Merge branch 'bot-ui-improvements' into 'master'

Bot UI: Loading and render improvements

See merge request postgres-ai/database-lab!872

Author: NikolayS

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { memo, useState } from 'react';
 import { Accordion, AccordionDetails, AccordionSummary, Typography, makeStyles, Button } from '@material-ui/core';
 import { Prism as SyntaxHighlighter, SyntaxHighlighterProps } from 'react-syntax-highlighter'
 import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
@@ -65,7 +65,9 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-export const CodeBlock = ({ value, language }: { value: string, language?: string | null }) => {
+type CodeBlockProps = { value: string, language?: string | null };
+
+export const CodeBlock = memo(({ value, language }: CodeBlockProps) => {
   const classes = useStyles();
   const [expanded, setExpanded] = useState(false);
   const [copied, setCopied] = useState(false);
@@ -92,8 +94,7 @@ export const CodeBlock = ({ value, language }: { value: string, language?: strin
       });
     }
   };
-
-
+  
   const header = (
     <div className={classes.header}>
       {isValidLanguage && <Typography className={classes.languageName}>{language}</Typography>}
@@ -140,4 +141,4 @@ export const CodeBlock = ({ value, language }: { value: string, language?: strin
       />
     </div>
   );
-}
+})

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

@@ -1,6 +1,6 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import cn from "classnames";
-import ReactMarkdown from "react-markdown";
+import ReactMarkdown, { Components } from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import { makeStyles } from "@material-ui/core";
@@ -241,7 +241,20 @@ export const Message = React.memo((props: MessageProps) => {
     setDebugVisible(prevState => !prevState)
   }
 
-  const contentToRender: string = content?.replace(/\n/g, '  \n') || ''
+  const contentToRender = useMemo(() => content, [content]);
+
+  const renderers = useMemo<Components>(() => ({
+    p: ({ node, ...props }) => <div {...props} />,
+    img: ({ node, ...props }) => <img style={{ maxWidth: '60%' }} {...props} />,
+    code: ({ node, inline, className, children, ...props }) => {
+      const match = /language-(\w+)/.exec(className || '');
+      return !inline ? (
+        <CodeBlock value={String(children).replace(/\n$/, '')} language={match?.[1]} />
+      ) : (
+        <code {...props}>{children}</code>
+      );
+    },
+  }), []);
 
   return (
     <>
@@ -303,22 +316,11 @@ export const Message = React.memo((props: MessageProps) => {
             </div>
             : <ReactMarkdown
                 className={classes.markdown}
-                children={contentToRender}
+                children={contentToRender || ''}
                 rehypePlugins={[rehypeRaw]}
                 remarkPlugins={[remarkGfm]}
                 linkTarget='_blank'
-                components={{
-                  p: 'div',
-                  img: ({node, ...props}) => <img style={{maxWidth: '60%'}} {...props} />,
-                  code: ({ node, inline, className, children, ...props }) => {
-                    const match = /language-(\w+)/.exec(className || '');
-                    return !inline ? (
-                      <CodeBlock value={String(children).replace(/\n$/, '')} language={match?.[1]} />
-                    ) : (
-                      <code {...props}>{children}</code>
-                    );
-                  },
-                }}
+                components={renderers}
               />
           }
         </div>

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

@@ -109,7 +109,6 @@ export const useAiBot = (args: UseAiBotArgs): UseAiBotReturnType => {
       subscribe(threadId)
     }
     setWsLoading(false);
-    setLoading(false);
     closeSnackbar();
   }
   const onWebSocketClose = (event: WebSocketEventMap['close']) => {