Merge pull request #70 from dasmy/dev/more_icons

feat: Distinguish More Message Roles by Individual Icon

Author: ricklamers

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",
@@ -121,20 +117,22 @@ function App() {
         }),
       });
 
-      
-
       const data = await response.json();
       const code = data.code;
 
-      addMessage({ text: data.text, type: "message", role: "system" });
+      addMessage({ text: data.text, type: "message", role: "generator" });
 
       if (response.status != 200) {
         setWaitingForSystem(WaitingStates.Idle);
         return;
       }
 
-      submitCode(code);
-      setWaitingForSystem(WaitingStates.RunningCode);
+      if (!!code) {
+        submitCode(code);
+        setWaitingForSystem(WaitingStates.RunningCode);
+      } else {
+        setWaitingForSystem(WaitingStates.Idle);
+      }
     } catch (error) {
       console.error(
         "There has been a problem with your fetch operation:",
@@ -161,12 +159,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,13 +22,20 @@ 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">