fix codeWrapper issue, will produce funky text with ` commenting

README.md

@@ -39,10 +39,10 @@ Currently, this project is only functional with the `text-davinci-003` model.
 - [x] Remember last selected model
 - [x] Highlight.js for code blocks
 - [x] Markdown handling
+- [ ] Bing AI Styling (for suggested responses, convo end, etc.)
 - [ ] AI model change handling (whether to pseudo-persist convos or start new convos within existing convo)
 - [ ] Server convo pagination (limit fetch and load more with 'show more' button)
 - [ ] Prompt Templates
-- [ ] Bing AI Styling (for suggested responses, convo end, etc.)
 - [ ] Conversation/Prompt Search
 - [ ] Refactor/clean up code
 - [ ] Config file for easy startup

src/components/Messages/TextWrapper.jsx

@@ -38,8 +38,8 @@ export default function TextWrapper({ text }) {
   let embedTest = false;
 
   // to match unenclosed code blocks
-  // if (text.match(/```/g)?.length === 1 && text.match(/```(\w+)/)) {
-  if (text.match(/```/g)?.length === 1) {
+  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;
@@ -48,6 +48,7 @@ export default function TextWrapper({ text }) {
   // match enclosed code blocks
   if (text.match(codeRegex)) {
     const parts = regexSplit(text);
+    // console.log(parts);
     const codeParts = parts.map((part, i) => {
       if (part.match(codeRegex)) {
         let language = 'javascript';
@@ -89,11 +90,11 @@ export default function TextWrapper({ text }) {
 
     return <>{codeParts}</>; // return the wrapped text
   } else if (embedTest) {
-    const language = text.match(/```(\w+)/)[1].toLowerCase();
-    const parts = text.split(text.match(/```(\w+)/)[0]);
+    const language = text.match(/```(\w+)/)?.[1].toLowerCase() || 'javascript';
+    const parts = text.split(text.match(/```(\w+)/)?.[0] || '```');
     const codeParts = parts.map((part, i) => {
       if (i === 1) {
-        part = part.replace(newLineMatch, '```');
+        part = part.replace(/^\n+/, '');
 
         return (
           <Embed

src/components/Nav/index.jsx

@@ -10,10 +10,14 @@ import { useSelector } from 'react-redux';
 export default function Nav() {
   const [isHovering, setIsHovering] = useState(false);
   const { conversationId } = useSelector((state) => state.convo);
-  const { data, error, isLoading, mutate } = swr('http://localhost:3050/convos');
+  const { data, isLoading, mutate } = swr('http://localhost:3050/convos');
 
   useDidMountEffect(() => mutate(), [conversationId]);
 
+  const containerClasses = isLoading
+    ? 'flex flex-col gap-2 text-gray-100 text-sm h-full justify-center items-center'
+    : 'flex flex-col gap-2 text-gray-100 text-sm';
+
   return (
     <div className="dark hidden bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col">
       <div className="flex h-full min-h-0 flex-col ">
@@ -27,8 +31,15 @@ export default function Nav() {
               onMouseEnter={() => setIsHovering(true)}
               onMouseLeave={() => setIsHovering(false)}
             >
-              <div className="flex flex-col gap-2 text-sm text-gray-100">
-                {isLoading ? <Spinner /> : <Conversations conversations={data} conversationId={conversationId}/>}
+              <div className={containerClasses}>
+                {isLoading ? (
+                  <Spinner />
+                ) : (
+                  <Conversations
+                    conversations={data}
+                    conversationId={conversationId}
+                  />
+                )}
               </div>
             </div>
             <NavLinks />

src/utils/handleSubmit.js

@@ -50,7 +50,7 @@ export default function handleSubmit({
       convoHandler(data);
       console.log('final', data);
     } else {
-      console.log('dataStream', data);
+      // console.log('dataStream', data);
     }
   };
 

src/utils/regexSplit.js

@@ -1,18 +1,56 @@
 const regex = /```([^`\n]*?)\n([\s\S]*?)\n```/g;
 
+const unenclosedCodeTest = (text) => {
+  let workingText = text;
+  if (workingText.startsWith('<') || (!workingText.startsWith('`') && workingText.match(/```/g)?.length === 1)) {
+    workingText = `\`\`\`${workingText}`
+  }
+
+  return workingText;
+};
+
 export default function regexSplit(string) {
   const matches = [...string.matchAll(regex)];
   const output = [matches[0].input.slice(0, matches[0].index)];
 
+  // console.log(matches);
+
   for (let i = 0; i < matches.length; i++) {
     const [fullMatch, language, code] = matches[i];
     // const formattedCode = code.replace(/`+/g, '\\`');
     output.push(`\`\`\`${language}\n${code}\n\`\`\``);
     if (i < matches.length - 1) {
-      const nextText = string.slice(matches[i].index + fullMatch.length, matches[i + 1].index);
-      output.push(nextText.trim());
+      let nextText = string.slice(matches[i].index + fullMatch.length, matches[i + 1].index);
+      nextText = unenclosedCodeTest(nextText);
+      output.push(nextText);
+    } else {
+      const lastMatch = matches[matches.length - 1][0];
+      // console.log(lastMatch);
+      // console.log(matches[0].input.split(lastMatch));
+      let rest = matches[0].input.split(lastMatch)[1]
+
+      if (rest) {
+        rest = unenclosedCodeTest(rest);
+        output.push(rest);
+      }
     }
   }
 
+  console.log(output);
+
+  // for (let i = 0; i < matches.length; i++) {
+  //   const [fullMatch, language, code] = matches[i];
+  //   output.push(`\`\`\`${language}\n${code}\n\`\`\``);
+  //   if (i < matches.length - 1 && matches[i + 1]) {
+  //     const nextText = string.slice(matches[i].index + fullMatch.length, matches[i + 1].index);
+  //     output.push(nextText.trim());
+  //   } else if (i === matches.length - 1) {
+  //     const nextText = string.slice(matches[i].index + fullMatch.length);
+  //     output.push(nextText.trim());
+  //   }
+  // }
+
+  // console.log(output);
+
   return output;
 }