Decouple rendering logic from chat completion logic

* Only store string content in `ChatMessage` type
* Move rendering function outside component to prevent unnecessary recreation
* Update render function signature
* Restore GPT-generated output warning for bot messages
* Refactor render function logic
* Fix React render warnings
* Add TODOs for full Markdown/stories-like parsing

Also uses non-greedy regex to match and split code blocks:

* Only match JavaScript code blocks
* Fix false matches
* Supports multiple code blocks in a single message

Author: RichDom2185

src/pages/sicp/subcomponents/chatbot/ChatBox.tsx

@@ -12,13 +12,13 @@ type Props = {
   getText: () => string;
 };
 
-type ChatMessage = { role: 'user' | 'bot'; content: string[] };
+type ChatMessage = { role: 'user' | 'bot'; content: string };
 const initialMessage: ChatMessage = {
-  content: ['Ask me something about this paragraph!'],
+  content: 'Ask me something about this paragraph!',
   role: 'bot'
 };
 const botErrorMessage: ChatMessage = {
-  content: ['Sorry, I am down with a cold, please try again later.'],
+  content: 'Sorry, I am down with a cold, please try again later.',
   role: 'bot'
 };
 
@@ -37,18 +37,12 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
     setUserInput(event.target.value);
   };
 
-  // TODO: Reimplement
-  // // To get code snippets
-  // const codeBlocks = (temp: string) => {
-  //   return temp.split('```');
-  // };
-
   const sendMessage = async () => {
     if (userInput.trim() === '') {
       return;
     }
     setUserInput('');
-    setMessages(prev => [...prev, { role: 'user', content: [userInput] }]);
+    setMessages(prev => [...prev, { role: 'user', content: userInput }]);
   };
 
   // Watch whenever a new message comes in
@@ -72,16 +66,14 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
       { role: 'system', content: prompt },
       ...messages.slice(-CONTEXT_SIZE).map(message => {
         const role = message.role === 'user' ? 'user' : 'assistant';
-        const content = message.content.join('\n');
-        const segment: Payload[number] = { role, content };
+        const segment: Payload[number] = { role, content: message.content };
         return segment;
       })
     ];
 
     chat(tokens, payload)
       .then(text => {
-        // TODO: + '\n\nThe answer is generated by GPT-4 and may not be correct.'
-        setMessages(prev => [...prev, { role: 'bot', content: [text] }]);
+        setMessages(prev => [...prev, { role: 'bot', content: text }]);
       })
       .catch(e => {
         setMessages(prev => [...prev, botErrorMessage]);
@@ -95,23 +87,6 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
     setMessages([initialMessage]);
   };
 
-  const renderMessageContent = (message: string | string[]) => {
-    if (!Array.isArray(message)) {
-      return message;
-    }
-
-    return message.map((block, index) =>
-      // Assume that only javascript code snippets will appear
-      block.substring(0, 10) === 'javascript' ? (
-        <SyntaxHighlighter language="javascript" style={SourceTheme} key={index}>
-          {block.substring(11, block.length)}
-        </SyntaxHighlighter>
-      ) : (
-        block
-      )
-    );
-  };
-
   const keyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
       sendMessage();
@@ -135,7 +110,7 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
             className={classes[`${message.role}`]}
             style={{ whiteSpace: 'pre-line' }}
           >
-            {renderMessageContent(message.content)}
+            {renderMessageContent(message)}
           </div>
         ))}
         {isLoading && <p>loading...</p>}
@@ -160,4 +135,26 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
   );
 };
 
+const renderMessageContent = (message: ChatMessage) => {
+  let contentToRender = message.content;
+  if (message.role === 'bot') {
+    contentToRender += '\n\nThe answer is generated by GPT-4 and may not be correct.';
+  }
+  // TODO: Parse full Markdown, make snippets runnable
+  if (!contentToRender.includes('```javascript')) {
+    return contentToRender;
+  }
+  const renderableRegex = /```javascript\n([\s\S]*?)\n```/g;
+  const chunks = contentToRender.split(renderableRegex);
+  return chunks.map((chunk, i) => {
+    return renderableRegex.test(chunk) ? (
+      <SyntaxHighlighter language="javascript" style={SourceTheme} key={i}>
+        {chunk}
+      </SyntaxHighlighter>
+    ) : (
+      <React.Fragment key={i}>{chunk}</React.Fragment>
+    );
+  });
+};
+
 export default ChatBox;