Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 978edf9

Browse files
committed
Merge branch 'bot-ui-improvements' into 'master'
Bot UI: Loading and render improvements See merge request postgres-ai/database-lab!872
2 parents a10b3e6 + dd79d0c commit 978edf9

File tree

3 files changed

+24
-22
lines changed

3 files changed

+24
-22
lines changed

‎ui/packages/platform/src/pages/Bot/Messages/Message/CodeBlock.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React, { memo,useState } from 'react';
22
import { Accordion, AccordionDetails, AccordionSummary, Typography, makeStyles, Button } from '@material-ui/core';
33
import { Prism as SyntaxHighlighter, SyntaxHighlighterProps } from 'react-syntax-highlighter'
44
import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
@@ -65,7 +65,9 @@ const useStyles = makeStyles((theme) => ({
6565
}
6666
}));
6767

68-
export const CodeBlock = ({ value, language }: { value: string, language?: string | null }) => {
68+
type CodeBlockProps = { value: string, language?: string | null };
69+
70+
export const CodeBlock = memo(({ value, language }: CodeBlockProps) => {
6971
const classes = useStyles();
7072
const [expanded, setExpanded] = useState(false);
7173
const [copied, setCopied] = useState(false);
@@ -92,8 +94,7 @@ export const CodeBlock = ({ value, language }: { value: string, language?: strin
9294
});
9395
}
9496
};
95-
96-
97+
9798
const header = (
9899
<div className={classes.header}>
99100
{isValidLanguage && <Typography className={classes.languageName}>{language}</Typography>}
@@ -140,4 +141,4 @@ export const CodeBlock = ({ value, language }: { value: string, language?: strin
140141
/>
141142
</div>
142143
);
143-
}
144+
})

‎ui/packages/platform/src/pages/Bot/Messages/Message/Message.tsx

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, { useState } from 'react'
1+
import React, { useMemo,useState } from 'react'
22
import cn from "classnames";
3-
import ReactMarkdown from "react-markdown";
3+
import ReactMarkdown,{Components} from "react-markdown";
44
import rehypeRaw from "rehype-raw";
55
import remarkGfm from "remark-gfm";
66
import { makeStyles } from "@material-ui/core";
@@ -241,7 +241,20 @@ export const Message = React.memo((props: MessageProps) => {
241241
setDebugVisible(prevState => !prevState)
242242
}
243243

244-
const contentToRender: string = content?.replace(/\n/g, ' \n') || ''
244+
const contentToRender = useMemo(() => content, [content]);
245+
246+
const renderers = useMemo<Components>(() => ({
247+
p: ({ node, ...props }) => <div {...props} />,
248+
img: ({ node, ...props }) => <img style={{ maxWidth: '60%' }} {...props} />,
249+
code: ({ node, inline, className, children, ...props }) => {
250+
const match = /language-(\w+)/.exec(className || '');
251+
return !inline ? (
252+
<CodeBlock value={String(children).replace(/\n$/, '')} language={match?.[1]} />
253+
) : (
254+
<code {...props}>{children}</code>
255+
);
256+
},
257+
}), []);
245258

246259
return (
247260
<>
@@ -303,22 +316,11 @@ export const Message = React.memo((props: MessageProps) => {
303316
</div>
304317
: <ReactMarkdown
305318
className={classes.markdown}
306-
children={contentToRender}
319+
children={contentToRender||''}
307320
rehypePlugins={[rehypeRaw]}
308321
remarkPlugins={[remarkGfm]}
309322
linkTarget='_blank'
310-
components={{
311-
p: 'div',
312-
img: ({node, ...props}) => <img style={{maxWidth: '60%'}} {...props} />,
313-
code: ({ node, inline, className, children, ...props }) => {
314-
const match = /language-(\w+)/.exec(className || '');
315-
return !inline ? (
316-
<CodeBlock value={String(children).replace(/\n$/, '')} language={match?.[1]} />
317-
) : (
318-
<code {...props}>{children}</code>
319-
);
320-
},
321-
}}
323+
components={renderers}
322324
/>
323325
}
324326
</div>

‎ui/packages/platform/src/pages/Bot/hooks.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,6 @@ export const useAiBot = (args: UseAiBotArgs): UseAiBotReturnType => {
109109
subscribe(threadId)
110110
}
111111
setWsLoading(false);
112-
setLoading(false);
113112
closeSnackbar();
114113
}
115114
const onWebSocketClose = (event: WebSocketEventMap['close']) => {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /