put the code back into output context

using https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight

Author: dasmy

frontend/src/components/Chat.tsx

@@ -46,10 +46,29 @@ function Message(props: {
             </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')