Merge branch 'main' into dev/conversation_history

Author: dasmy

.env.azure-example

@@ -1,6 +1,6 @@
 OPENAI_API_KEY=XXXX
 OPENAI_API_TYPE=azure
-OPENAI_BASE_URL=https://your-resource-name.openai.azure.com
+OPENAI_API_BASE=https://your-resource-name.openai.azure.com
 OPENAI_API_VERSION=2023-03-15-preview
 # OPENAI_EXTRA_HEADERS={"key": "value"}
 AZURE_OPENAI_DEPLOYMENTS=[{"displayName": "GPT-3.5", "name": "your-gpt-3.5-deployment"}, {"displayName": "GPT-4", "name": "your-gpt-4-deployment"}]

.env.example

@@ -1,6 +1,6 @@
 OPENAI_API_KEY=sk-XXXX
 OPENAI_API_TYPE=open_ai
-OPENAI_BASE_URL=https://api.openai.com/v1
+OPENAI_API_BASE=https://api.openai.com/v1
 OPENAI_API_VERSION=2023-03-15-preview
 # OPENAI_EXTRA_HEADERS={"key": "value"}
 OPENAI_MODELS=[{"displayName": "GPT-3.5", "name": "gpt-3.5-turbo"}, {"displayName": "GPT-4", "name": "gpt-4"}]

frontend/src/App.tsx

@@ -47,7 +47,7 @@ function App() {
       },
       {
         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,21 +117,22 @@ 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);
         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:",
@@ -162,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);
   }
 

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,36 +22,53 @@ 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>
-        )}
-
-        {["message", "message_status"].indexOf(props.type) !== -1 &&
+        {props.type == "message" &&
           (props.showLoader ? (
             <div>
               {text} {props.showLoader ? <div className="loader"></div> : null}
             </div>
           ) : (
             isMarkdown(text) ? 
-            <ReactMarkdown
-            children={text}
-            remarkPlugins={[remarkGfm]}
-            /> :
+              <ReactMarkdown
+              children={text}
+              remarkPlugins={[remarkGfm]}
+              components={{
+                code({node, inline, className, children, style, ...props}) {
+                  const match = /language-(\w+)/.exec(className || '')
+                  return !inline ? (
+                    <SyntaxHighlighter
+                      {...props}
+                      children={String(children).replace(/\n$/, '')}
+                      wrapLongLines={true}
+                      language={match ? match[1] : "python"}
+                      PreTag="div"
+                    />
+                  ) : (
+                    <code {...props} className={className}>
+                      {children}
+                    </code>
+                  )
+                }
+              }}
+            />
+          :
             <div className="cell-output" dangerouslySetInnerHTML={{ __html: text }}></div>
           ))}
 

gpt_code_ui/webapp/main.py

@@ -174,14 +174,7 @@ def extract_code(text):
             if single_match:
                 return single_match.group(1).strip()
 
-    def extract_non_code(text):
-        # Replace triple backtick blocks
-        text = re.sub(r'```(?:\w+\n)?(.+?)```', '', text, flags=re.DOTALL)
-        # Replace single backtick blocks
-        text = re.sub(r'`(.+?)`', '', text, flags=re.DOTALL)
-        return text.strip()
-
-    return extract_code(content), extract_non_code(content), 200
+    return extract_code(content), content.strip(), 200
 
 # We know this Flask app is for local use. So we can disable the verbose Werkzeug logger
 log = logging.getLogger('werkzeug')