wrap code in progress, revert old message handling

package.json

@@ -41,7 +41,6 @@
     "openai": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-markdown": "^8.0.5",
     "react-redux": "^8.0.5",
     "react-textarea-autosize": "^8.4.0",
     "react-transition-group": "^4.4.5",

src/components/Messages/TextWrapper.jsx

@@ -1,25 +1,24 @@
 import React from 'react';
-// import ReactMarkdown from 'react-markdown';
-// import supersub from 'remark-supersub'
 import Markdown from 'markdown-to-jsx';
 import Embed from './Embed';
 import Highlight from './Highlight';
 import regexSplit from '~/utils/regexSplit';
 import { languages, wrapperRegex } from '~/utils';
-const { codeRegex, inLineRegex, matchRegex, languageMatch, newLineMatch } = wrapperRegex;
+const { codeRegex, inLineRegex, markupRegex, languageMatch, newLineMatch } = wrapperRegex;
 const mdOptions = { wrapper: React.Fragment, forceWrapper: true };
 
-
 const inLineWrap = (parts) => {
   let previousElement = null;
   return parts.map((part, i) => {
-    if (part.match(matchRegex)) {
+    if (part.match(markupRegex)) {
       const codeElement = <code key={i}>{part.slice(1, -1)}</code>;
       if (previousElement && typeof previousElement !== 'string') {
         // Append code element as a child to previous non-code element
         previousElement = (
-          // <ReactMarkdown remarkPlugins={[supersub]} key={i}>
+          <Markdown
-          <Markdown options={mdOptions} key={i}>
+            options={mdOptions}
+            key={i}
+          >
             {previousElement}
             {codeElement}
           </Markdown>
@@ -36,11 +35,17 @@ const inLineWrap = (parts) => {
 };
 
 export default function TextWrapper({ text }) {
-  // append triple backticks to the end of the text only if singular found and language found
+  let embedTest = false;
-  if (text.match(/```/g)?.length === 1 && text.match(languageMatch)) {
+
-    text += '\n```';
+  // to match unenclosed code blocks
+  // if (text.match(/```/g)?.length === 1 && text.match(/```(\w+)/)) {
+  if (text.match(/```/g)?.length === 1) {
+    // const splitString = text.split('```')[1].split(/\s+/).slice(1).join('').trim();
+    // embedTest = splitString.length > 0;
+    embedTest = true;
   }
 
+  // match enclosed code blocks
   if (text.match(codeRegex)) {
     const parts = regexSplit(text);
     const codeParts = parts.map((part, i) => {
@@ -71,21 +76,58 @@ export default function TextWrapper({ text }) {
         const innerParts = part.split(inLineRegex);
         return inLineWrap(innerParts);
       } else {
-        // return part;
+        return (
-        // return <ReactMarkdown remarkPlugins={[supersub]} key={i}>{part}</ReactMarkdown>;
+          <Markdown
-        return <Markdown options={mdOptions} key={i}>{part}</Markdown>
+            options={mdOptions}
+            key={i}
+          >
+            {part}
+          </Markdown>
+        );
       }
     });
 
     return <>{codeParts}</>; // return the wrapped text
-  } else if (text.match(matchRegex)) {
+  } else if (embedTest) {
+    const language = text.match(/```(\w+)/)[1].toLowerCase();
+    const parts = text.split(text.match(/```(\w+)/)[0]);
+    const codeParts = parts.map((part, i) => {
+      if (i === 1) {
+        part = part.replace(newLineMatch, '```');
+
+        return (
+          <Embed
+            key={i}
+            language={language}
+          >
+            <Highlight
+              code={part}
+              language={language}
+            />
+          </Embed>
+        );
+      } else if (part.match(inLineRegex)) {
+        const innerParts = part.split(inLineRegex);
+        return inLineWrap(innerParts);
+      } else {
+        return (
+          <Markdown
+            options={mdOptions}
+            key={i}
+          >
+            {part}
+          </Markdown>
+        );
+      }
+    });
+
+    return <>{codeParts}</>; // return the wrapped text
+  } else if (text.match(markupRegex)) {
     // map over the parts and wrap any text between tildes with <code> tags
-    const parts = text.split(matchRegex);
+    const parts = text.split(markupRegex);
     const codeParts = inLineWrap(parts);
     return <>{codeParts}</>; // return the wrapped text
   } else {
-    // return <ReactMarkdown  remarkPlugins={[supersub]}>{text}</ReactMarkdown>;
-    // return text
     return <Markdown options={mdOptions}>{text}</Markdown>;
   }
 }

src/components/main/TextChat.jsx

@@ -36,66 +36,66 @@ export default function TextChat({ messages }) {
     const messageHandler = (data) => {
       dispatch(setMessages([...messages, currentMsg, { sender: model, text: data }]));
     };
-    // const convoHandler = (data) => {
-    //   dispatch(
-    //     setMessages([...messages, { sender: model, text: data.text || data.response }])
-    //   );
-
-    //   if (
-    //     model !== 'bingai' &&
-    //     convo.conversationId === null &&
-    //     convo.parentMessageId === null
-    //   ) {
-    //     const { title, conversationId, id } = data;
-    //     dispatch(
-    //       setConversation({
-    //         title,
-    //         conversationId,
-    //         parentMessageId: id,
-    //         conversationSignature: null,
-    //         clientId: null,
-    //         invocationId: null
-    //       })
-    //     );
-    //   } else if (
-    //     model === 'bingai' &&
-    //     convo.conversationId === null &&
-    //     convo.invocationId === null
-    //   ) {
-    //     const { title, conversationSignature, clientId, conversationId, invocationId } = data;
-    //     dispatch(
-    //       setConversation({
-    //         title,
-    //         conversationSignature,
-    //         clientId,
-    //         conversationId,
-    //         invocationId,
-    //         parentMessageId: null
-    //       })
-    //     );
-    //   }
-
-    //   dispatch(setSubmitState(false));
-    // };
-
     const convoHandler = (data) => {
-      const { conversationId, id, invocationId, text } = data;
+      dispatch(
-      const conversationData = {
+        setMessages([...messages, currentMsg, { sender: model, text: data.text || data.response }])
-        title: data.title,
+      );
-        conversationId,
+
-        parentMessageId:
+      if (
-          model !== 'bingai' && !convo.conversationId && !convo.parentMessageId ? id : null,
+        model !== 'bingai' &&
-        conversationSignature:
+        convo.conversationId === null &&
-          model === 'bingai' && !convo.conversationId ? data.conversationSignature : null,
+        convo.parentMessageId === null
-        clientId: model === 'bingai' && !convo.conversationId ? data.clientId : null,
+      ) {
-        // invocationId: model === 'bingai' && !convo.conversationId ? data.invocationId : null
+        const { title, conversationId, id } = data;
-        invocationId: invocationId ? invocationId : null
+        dispatch(
-      };
+          setConversation({
-      dispatch(setMessages([...messages, currentMsg, { sender: model, text: text || data.response }]));
+            title,
-      dispatch(setConversation(conversationData));
+            conversationId,
+            parentMessageId: id,
+            conversationSignature: null,
+            clientId: null,
+            invocationId: null
+          })
+        );
+      } else if (
+        model === 'bingai' &&
+        convo.conversationId === null &&
+        convo.invocationId === null
+      ) {
+        const { title, conversationSignature, clientId, conversationId, invocationId } = data;
+        dispatch(
+          setConversation({
+            title,
+            conversationSignature,
+            clientId,
+            conversationId,
+            invocationId,
+            parentMessageId: null
+          })
+        );
+      }
+
       dispatch(setSubmitState(false));
     };
 
+    // const convoHandler = (data) => {
+    //   const { conversationId, id, invocationId } = data;
+    //   const conversationData = {
+    //     title: data.title,
+    //     conversationId,
+    //     parentMessageId:
+    //       model !== 'bingai' && !convo.conversationId && !convo.parentMessageId ? id : null,
+    //     conversationSignature:
+    //       model === 'bingai' && !convo.conversationId ? data.conversationSignature : null,
+    //     clientId: model === 'bingai' && !convo.conversationId ? data.clientId : null,
+    //     // invocationId: model === 'bingai' && !convo.conversationId ? data.invocationId : null
+    //     invocationId: invocationId ? invocationId : null
+    //   };
+    //   dispatch(setMessages([...messages, currentMsg, { sender: model, text: data.text || data.response }]));
+    //   dispatch(setConversation(conversationData));
+    //   dispatch(setSubmitState(false));
+    // };
+
     const errorHandler = (event) => {
       console.log('Error:', event);
       const errorResponse = {

src/utils/handleSubmit.js

@@ -44,10 +44,13 @@ export default function handleSubmit({
     let text = data.text || data.response;
     if (data.message) {
       messageHandler(text);
-    } else if (data.final) {
+    }
+
+    if (data.final) {
       convoHandler(data);
+      console.log('final', data);
     } else {
-      console.log('initial', data);
+      console.log('dataStream', data);
     }
   };
 

src/utils/index.js

@@ -38,7 +38,7 @@ export const languages = [
 export const wrapperRegex = {
   codeRegex: /(```[\s\S]*?```)/g,
   inLineRegex: /(`[^`]+?`)/g,
-  matchRegex: /(`[^`]+?`)/g,
+  markupRegex: /(`[^`]+?`)/g,
   languageMatch: /^```(\w+)/,
   newLineMatch: /^```(\n+)/
 };