Merge pull request #69 from dasmy/dev/show_code_in_context

feat: Show Code in Context

Author: ricklamers

frontend/src/App.tsx

@@ -126,7 +126,6 @@ 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" });
 
       if (response.status != 200) {

frontend/src/components/Chat.tsx

@@ -30,26 +30,36 @@ function Message(props: {
         </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>
               {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

@@ -171,14 +171,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')