Merge remote-tracking branch 'origin/chatUpdate' into streaming

src/frontend/package.json

@@ -8,6 +8,7 @@
         "@headlessui/react": "^1.7.10",
         "@heroicons/react": "^2.0.15",
         "@mui/material": "^5.11.9",
+        "@tabler/icons-react": "^2.17.0",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/line-clamp": "^0.4.4",
         "@testing-library/jest-dom": "^5.16.5",
@@ -32,8 +33,12 @@
         "react-markdown": "^8.0.7",
         "react-router-dom": "^6.8.1",
         "react-scripts": "5.0.1",
+        "react-syntax-highlighter": "^15.5.0",
         "react-tabs": "^6.0.0",
         "reactflow": "^11.5.5",
+        "rehype-mathjax": "^4.0.2",
+        "remark-gfm": "^3.0.1",
+        "remark-math": "^5.1.1",
         "tailwindcss": "^3.2.6",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
@@ -62,5 +67,8 @@
             "last 1 safari version"
         ]
     },
-    "proxy": "http://127.0.0.1:7860"
+    "proxy": "http://127.0.0.1:7860",
+    "devDependencies": {
+        "@tailwindcss/typography": "^0.5.9"
+    }
 }

src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx

@@ -0,0 +1,84 @@
+import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
+import { FC, memo, useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { programmingLanguages } from '../../../../utils';
+
+interface Props {
+  language: string;
+  value: string;
+}
+
+export const CodeBlock: FC<Props> = memo(({ language, value }) => {
+  const [isCopied, setIsCopied] = useState<Boolean>(false);
+
+  const copyToClipboard = () => {
+    if (!navigator.clipboard || !navigator.clipboard.writeText) {
+      return;
+    }
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    });
+  };
+  const downloadAsFile = () => {
+    const fileExtension = programmingLanguages[language] || '.file';
+    const suggestedFileName = `${"generated-code"}${fileExtension}`;
+    const fileName = window.prompt(
+      "enter file name",
+      suggestedFileName,
+    );
+
+    if (!fileName) {
+      // user pressed cancel on prompt
+      return;
+    }
+
+    const blob = new Blob([value], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.download = fileName;
+    link.href = url;
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+  return (
+    <div className="codeblock relative font-sans text-[16px]">
+      <div className="flex items-center justify-between py-1.5 px-4">
+        <span className="text-xs lowercase text-white">{language}</span>
+
+        <div className="flex items-center">
+          <button
+            className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-white"
+            onClick={copyToClipboard}
+          >
+            {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
+            {isCopied ? 'Copied!' : 'Copy code'}
+          </button>
+          <button
+            className="flex items-center rounded bg-none p-1 text-xs text-white"
+            onClick={downloadAsFile}
+          >
+            <IconDownload size={18} />
+          </button>
+        </div>
+      </div>
+
+      <SyntaxHighlighter
+        language={language}
+        style={oneDark}
+        customStyle={{ margin: 0 }}
+      >
+        {value}
+      </SyntaxHighlighter>
+    </div>
+  );
+});
+CodeBlock.displayName = 'CodeBlock';

src/frontend/src/modals/chatModal/chatMessage/index.tsx

@@ -1,21 +1,31 @@
 import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { classNames } from "../../../utils";
 import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
 import { UserIcon } from "@heroicons/react/24/solid";
 import FileCard from "../fileComponent";
 import ReactMarkdown from "react-markdown";
+import rehypeMathjax from "rehype-mathjax";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import { CodeBlock } from "./codeBlock";
 var Convert = require("ansi-to-html");
 var convert = new Convert({ newline: true });
 
 export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
+	const [message, setMessage] = useState("");
+	useEffect(() => {
+		setMessage(chat.message);
+	}, [chat.message]);
 	const [hidden, setHidden] = useState(true);
 	return (
 		<div
 			className={classNames(
 				"w-full py-2 pl-2 flex",
-        chat.isSend ? "bg-white dark:bg-gray-800 " : "bg-gray-200  dark:bg-gray-700"
+				chat.isSend
+					? "bg-white dark:bg-gray-800 "
+					: "bg-gray-200  dark:bg-gray-700"
 			)}
 		>
 			<div
@@ -50,8 +60,42 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 						)}
 						{chat.thought && chat.thought !== "" && !hidden && <br></br>}
 						<div className="w-full px-4 pb-3 pt-3 pr-8">
-              <span className="dark:text-white">
+							<div className="dark:text-white">
-              <ReactMarkdown>{chat.message}</ReactMarkdown>
+								<div>
+									<ReactMarkdown
+										remarkPlugins={[remarkGfm, remarkMath]}
+										rehypePlugins={[rehypeMathjax]}
+										className="markdown prose"
+										components={{
+											code({ node, inline, className, children, ...props }) {
+												if (children.length) {
+												  if (children[0] == '▍') {
+													return <span className="animate-pulse cursor-default mt-1">▍</span>
+												  }
+							
+												  children[0] = (children[0] as string).replace("`▍`", "▍")
+												}
+							
+												const match = /language-(\w+)/.exec(className || '');
+							
+												return !inline ? (
+												  <CodeBlock
+													key={Math.random()}
+													language={(match && match[1]) || ''}
+													value={String(children).replace(/\n$/, '')}
+													{...props}
+												  />
+												) : (
+												  <code className={className} {...props}>
+													{children}
+												  </code>
+												);
+											  }
+										}}
+									>
+										{message}
+									</ReactMarkdown>
+								</div>
 								{chat.files && (
 									<div className="my-2 w-full">
 										{chat.files.map((file, index) => {
@@ -67,14 +111,20 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 										})}
 									</div>
 								)}
-              </span>
+							</div>
 						</div>
 					</div>
 				</div>
 			) : (
 				<div className="w-full flex items-center">
 					<div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white">
-            <ReactMarkdown>{chat.message}</ReactMarkdown>
+						<ReactMarkdown
+							remarkPlugins={[remarkGfm, remarkMath]}
+							rehypePlugins={[rehypeMathjax]}
+							className="markdown prose"
+						>
+							{message}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}

src/frontend/src/modals/chatModal/fileComponent/index.tsx

@@ -1,14 +1,15 @@
 import { CloudArrowDownIcon, DocumentIcon } from "@heroicons/react/24/outline";
-import * as base64js from 'base64-js';
+import * as base64js from "base64-js";
+import Tooltip from "../../../components/TooltipComponent";
 
 export default function FileCard({ fileName, content, fileType }) {
 	const handleDownload = () => {
 		const byteArray = new Uint8Array(base64js.toByteArray(content));
-        const blob = new Blob([byteArray], { type: 'application/octet-stream' });
+		const blob = new Blob([byteArray], { type: "application/octet-stream" });
 		const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
+		const link = document.createElement("a");
 		link.href = url;
-        link.download = fileName+".png";
+		link.download = fileName + ".png";
 		document.body.appendChild(link);
 		link.click();
 		document.body.removeChild(link);
@@ -22,12 +23,19 @@ export default function FileCard({ fileName, content, fileType }) {
 		>
 			<div className="flex gap-2 text-current items-center w-full mr-2">
 				{" "}
+				{fileType === "image" ? (
+					<img
+						src={`data:image/png;base64,${content}`}
+						alt=""
+						className="w-8 h-8"
+					/>
+				) : (
 					<DocumentIcon className="w-8 h-8" />
+				)}
 				<div className="flex flex-col items-start">
 					{" "}
 					<div className="truncate text-sm text-current">{fileName}</div>
 					<div className="truncate text-xs  text-gray-500">{fileType}</div>
-
 				</div>
 				<CloudArrowDownIcon className="w-6 h-6 text-current ml-auto" />
 			</div>

src/frontend/src/modals/chatModal/index.tsx

@@ -60,18 +60,20 @@ export default function ChatModal({
     str,
     thought,
     end = false,
+    files,
   }: {
     str?: string;
     thought?: string;
     // end param default is false
     end?: boolean;
+    files?: Array<any>;
   }) {
     setChatHistory((old) => {
       let newChat = [...old];
       if (str) {
-        if (end && !newChat[newChat.length - 1].message) {
+        if (end) {
           newChat[newChat.length - 1].message = str;
-        } else if (!end) {
+        } else {
           newChat[newChat.length - 1].message =
             newChat[newChat.length - 1].message + str;
         }
@@ -79,12 +81,16 @@ export default function ChatModal({
       if (thought) {
         newChat[newChat.length - 1].thought = thought;
       }
+      if (files) {
+        newChat[newChat.length - 1].files = files;
+      }
       return newChat;
     });
   }
 
   function handleOnClose(event: CloseEvent) {
     if (isOpen.current) {
+      console.log(event);
       setLockChat(false);
       setTimeout(() => {
         connectWS();
@@ -139,12 +145,16 @@ export default function ChatModal({
           end: true,
         });
       }
+      if (data.files) {
+        updateLastMessage({
+          end: true,
+          files: data.files,
+        });
+      }
+
       setLockChat(false);
       isStream = false;
     }
-    if (data.type === "file") {
-      console.log(data);
-    }
     if (data.type === "stream" && isStream) {
       updateLastMessage({ str: data.message });
     }
@@ -346,7 +356,7 @@ export default function ChatModal({
                 <div className="relative w-full">
                   <button
                     onClick={() => clearChat()}
-                    className="absolute top-2 right-2 hover:text-red-500"
+                    className="absolute top-2 right-2 hover:text-red-500 z-30"
                   >
                     <FaEraser className="w-4 h-4" />
                   </button>

src/frontend/src/utils.ts

@@ -454,3 +454,35 @@ export function updateTemplate(
 	}
 	return clonedObject;
 }
+
+interface languageMap {
+	[key: string]: string | undefined;
+  }
+  
+  export const programmingLanguages: languageMap = {
+	javascript: '.js',
+	python: '.py',
+	java: '.java',
+	c: '.c',
+	cpp: '.cpp',
+	'c++': '.cpp',
+	'c#': '.cs',
+	ruby: '.rb',
+	php: '.php',
+	swift: '.swift',
+	'objective-c': '.m',
+	kotlin: '.kt',
+	typescript: '.ts',
+	go: '.go',
+	perl: '.pl',
+	rust: '.rs',
+	scala: '.scala',
+	haskell: '.hs',
+	lua: '.lua',
+	shell: '.sh',
+	sql: '.sql',
+	html: '.html',
+	css: '.css',
+	// add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
+  };
+  

src/frontend/tailwind.config.js

@@ -73,6 +73,6 @@ module.exports = {
         }
       }
     })
-    }),require('@tailwindcss/line-clamp')
+    }),require('@tailwindcss/line-clamp'),require('@tailwindcss/typography'),
   ],
 };