distinguish more message types by icon

Author: dasmy

frontend/src/App.tsx

@@ -42,12 +42,12 @@ function App() {
     Array.from([
       {
         text: "Hello! I'm a GPT Code assistant. Ask me to do something for you! Pro tip: you can upload a file and I'll be able to use it.",
-        role: "system",
+        role: "generator",
         type: "message",
       },
       {
         text: "If I get stuck just type 'reset' and I'll restart the kernel.",
-        role: "system",
+        role: "generator",
         type: "message",
       },
     ])
@@ -77,11 +77,7 @@ function App() {
 
   const handleCommand = (command: string) => {
     if (command == "reset") {
-      addMessage({
-        text: "Restarting the kernel.",
-        type: "message",
-        role: "system",
-      });
+      addMessage({ text: "Restarting the kernel.", type: "message", role: "system" });
 
       fetch(`${Config.API_ADDRESS}/restart`, {
         method: "POST",
@@ -126,8 +122,7 @@ function App() {
       const data = await response.json();
       const code = data.code;
 
-      addMessage({ text: code, type: "code", role: "system" });
-      addMessage({ text: data.text, type: "message", role: "system" });
+      addMessage({ text: data.text, type: "message", role: "generator" });
 
       if (response.status != 200) {
         setWaitingForSystem(WaitingStates.Idle);
@@ -162,12 +157,7 @@ function App() {
   }
 
   function completeUpload(message: string) {
-    addMessage({
-      text: message,
-      type: "message",
-      role: "system",
-    });
-
+    addMessage({ text: message, type: "message", role: "upload" });
     setWaitingForSystem(WaitingStates.Idle);
 
     // Inform prompt server

frontend/src/components/Chat.css

@@ -1,3 +1,7 @@
+div.message.generator {
+    background: rgba(247,247,248);
+}
+
 div.message.system {
     background: rgba(247,247,248);
 }
@@ -20,6 +24,10 @@ div.avatar svg {
     overflow-x: hidden;
 }
 
+div.message.generator div.avatar {
+    background: #74a89b;
+}
+
 div.message.system div.avatar {
     background: #74a89b;
 }

frontend/src/components/Chat.tsx

@@ -2,6 +2,8 @@ import "./Chat.css";
 
 import VoiceChatIcon from "@mui/icons-material/VoiceChat";
 import PersonIcon from "@mui/icons-material/Person";
+import TerminalIcon from '@mui/icons-material/Terminal';
+import FileUploadIcon from '@mui/icons-material/FileUpload';
 import { MessageDict } from "../App";
 
 import remarkGfm from 'remark-gfm';
@@ -20,25 +22,23 @@ function Message(props: {
   const isMarkdown = (input: string) => {
     const mdRegex = /\[.*\]\(.*\)|\*\*.*\*\*|__.*__|\#.*|\!\[.*\]\(.*\)|`.*`|\- .*|\|.*\|/g;
     return mdRegex.test(input);
-  }
+  };
+
+  let ICONS = {
+    "upload": <FileUploadIcon />,
+    "generator":  <VoiceChatIcon />,
+    "system": <TerminalIcon />,
+    "user": <PersonIcon />,
+  };
 
   return (
-    <div className={"message " + (role == "system" ? "system" : "user")}>
+    <div className={"message " + role}>
       <div className="avatar-holder">
         <div className="avatar">
-          {role == "system" ? <VoiceChatIcon /> : <PersonIcon />}
+          { ICONS[role as keyof typeof ICONS] }
         </div>
       </div>
       <div className="message-body">
-        {props.type == "code" && (
-          <div>
-            I generated the following code:
-            <SyntaxHighlighter wrapLongLines={true} language="python">
-              {text}
-            </SyntaxHighlighter>
-          </div>
-        )}
-
         {props.type == "message" &&
           (props.showLoader ? (
             <div>