feat: enhance AI assistant ui/x

package.json

@@ -33,6 +33,7 @@
     "ace-builds": "^1.4.13",
     "axios": "^0.24.0",
     "color": "^4.2.3",
+    "common-tags": "^1.8.2",
     "date-fns": "^2.28.0",
     "fontfaceobserver": "^2.3.0",
     "fuzzysort": "^2.0.4",
@@ -108,6 +109,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.22.2",
+    "@types/common-tags": "^1.8.1",
     "@types/lodash.debounce": "^4.0.7",
     "@types/mixpanel-browser": "^2.38.1",
     "@types/papaparse": "^5.3.7",

src/ui/components/CodeSnippet.tsx

@@ -0,0 +1,97 @@
+import { useRef, useState } from 'react';
+import Editor from '@monaco-editor/react';
+import { Box, IconButton, Stack, useTheme } from '@mui/material';
+import { ContentCopy } from '@mui/icons-material';
+import { TooltipHint } from './TooltipHint';
+
+interface Props {
+  code: string;
+  language?: string;
+}
+
+export function CodeSnippet({ code, language = 'plaintext' }: Props) {
+  const [tooltipMsg, setTooltipMsg] = useState<string>('Click to copy');
+  const editorRef = useRef(null);
+  const theme = useTheme();
+
+  const handleClick = (e: any) => {
+    if (editorRef.current) {
+      navigator.clipboard.writeText(code);
+      setTooltipMsg('Copied!');
+      setTimeout(() => {
+        setTooltipMsg('Click to copy');
+      }, 2000);
+    }
+  };
+
+  const handleEditorDidMount = (editor: any) => {
+    editorRef.current = editor;
+  };
+
+  // Mimic styles in the Monaco editor
+  const styles = {
+    fontFamily: `Menlo, Monaco, "Courier New", monospace`,
+    fontSize: '12px',
+  };
+
+  return (
+    <Box style={styles}>
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        spacing={1}
+        sx={{
+          backgroundColor: theme.palette.grey['100'],
+          pt: theme.spacing(0.5),
+          pb: theme.spacing(0.5),
+          // 10px on Monaco + 2px border
+          pr: '12px',
+          pl: '12px',
+        }}
+      >
+        <Box sx={{ color: 'text.secondary' }}>{language}</Box>
+
+        <TooltipHint title={tooltipMsg}>
+          <IconButton onClick={handleClick} size="small">
+            <ContentCopy fontSize="inherit" />
+          </IconButton>
+        </TooltipHint>
+      </Stack>
+      <div
+        style={{
+          // calculate height based on number of lines
+          height: `${Math.ceil(code.split('\n').length) * 19}px`,
+          position: 'relative',
+          border: `2px solid ${theme.palette.grey['100']}`,
+          borderTop: 'none',
+        }}
+      >
+        <Editor
+          language={language}
+          value={code}
+          height="100%"
+          width="100%"
+          options={{
+            readOnly: true,
+            minimap: { enabled: false },
+            overviewRulerLanes: 0,
+            hideCursorInOverviewRuler: true,
+            overviewRulerBorder: false,
+            scrollbar: {
+              vertical: 'hidden',
+              handleMouseWheel: false,
+            },
+            scrollBeyondLastLine: false,
+            wordWrap: 'off',
+            lineNumbers: 'off',
+            automaticLayout: true,
+            folding: false,
+            renderLineHighlightOnlyWhenFocus: true,
+          }}
+          onMount={handleEditorDidMount}
+        />
+      </div>
+    </Box>
+  );
+}

src/ui/menus/CodeEditor/AICodeBlockParser.tsx

@@ -1,6 +1,7 @@
-import Editor from '@monaco-editor/react';
+import { Stack } from '@mui/material';
+import { CodeSnippet } from '../../components/CodeSnippet';
 
-const CODE_BLOCK_REGEX = /```([a-z]+)?\n([\s\S]+?)\n```/g;
+const CODE_BLOCK_REGEX = /```([a-z]+)?\n([\s\S]+?)(?:\n```|$)/g;
 
 function parseCodeBlocks(input: string): Array<string | JSX.Element> {
   const blocks: Array<string | JSX.Element> = [];
@@ -12,39 +13,7 @@ function parseCodeBlocks(input: string): Array<string | JSX.Element> {
     if (lastIndex < match.index) {
       blocks.push(input.substring(lastIndex, match.index));
     }
-    blocks.push(
-      <div
-        key={lastIndex}
-        // calculate height based on number of lines
-        style={{
-          height: `${Math.ceil(code.split('\n').length) * 19}px`,
-          width: '100%',
-        }}
-      >
-        <Editor
-          language={language}
-          value={code}
-          height="100%"
-          width="100%"
-          options={{
-            readOnly: true,
-            minimap: { enabled: false },
-            overviewRulerLanes: 0,
-            hideCursorInOverviewRuler: true,
-            overviewRulerBorder: false,
-            scrollbar: {
-              vertical: 'hidden',
-              horizontal: 'hidden',
-              handleMouseWheel: false,
-            },
-            scrollBeyondLastLine: false,
-            wordWrap: 'off',
-            // lineNumbers: 'off',
-            automaticLayout: true,
-          }}
-        />
-      </div>
-    );
+    blocks.push(<CodeSnippet key={lastIndex} code={code} language={language} />);
     lastIndex = match.index + match[0].length;
   }
   if (lastIndex < input.length) {
@@ -54,5 +23,9 @@ function parseCodeBlocks(input: string): Array<string | JSX.Element> {
 }
 
 export function CodeBlockParser({ input }: { input: string }): JSX.Element {
-  return <>{parseCodeBlocks(input)}</>;
+  return (
+    <Stack gap={2} style={{ whiteSpace: 'normal' }}>
+      {parseCodeBlocks(input)}
+    </Stack>
+  );
 }