code highlighting in progress

src/components/Messages/CodeWrapper.jsx

@@ -1,18 +1,55 @@
 import React from 'react';
+import Embed from './Embed';
+import hljs from 'highlight.js';
+import Highlight from 'react-highlight';
 
 export default function CodeWrapper({ text }) {
-  const matchRegex = /(`[^`]+?`)/g;
-  const parts = text.split(matchRegex);
-  // console.log('parts', parts);
+  if (text.includes('```')) {
+    const codeRegex = /(```[^`]+?```)/g;
+    const inLineRegex = /(`[^`]+?`)/g;
+    const parts = text.split(codeRegex);
+    // console.log(parts);
+    const codeParts = parts.map((part, i) => {
+      if (part.match(codeRegex)) {
+        return (
+          <Embed
+            key={i}
+            language="javascript"
+          >
+            {hljs.highlightAuto(part.slice(1, -1)).value}
+            {/* <Highlight className="!whitespace-pre">{part.slice(1, -1)}</Highlight> */}
 
-  // map over the parts and wrap any text between tildes with <code> tags
-  const codeParts = parts.map((part, index) => {
-    if (part.match(matchRegex)) {
-      return <code key={index}>{part.slice(1, -1)}</code>;
-    } else {
-      return part;
-    }
-  });
+          </Embed>
+        );
+      } else if (part.match(inLineRegex)) {
+        const innerParts = part.split(inLineRegex);
+        return innerParts.map((part, i) => {
+          if (part.match(inLineRegex)) {
+            return <code key={i}>{part.slice(1, -1)}</code>;
+          } else {
+            return part;
+          }
+        });
+      } else {
+        return part;
+      }
+    });
 
-  return <>{codeParts}</>; // return the wrapped text
-}
+    return <>{codeParts}</>; // return the wrapped text
+  } else {
+    const matchRegex = /(`[^`]+?`)/g;
+    const parts = text.split(matchRegex);
+    // console.log('parts', parts);
+
+    // map over the parts and wrap any text between tildes with <code> tags
+    const codeParts = parts.map((part, i) => {
+      if (part.match(matchRegex)) {
+        return <code key={i}>{part.slice(1, -1)}</code>;
+      } else {
+        return part;
+      }
+    });
+
+    return <>{codeParts}</>; // return the wrapped text
+  }
+}

src/components/Messages/Embed.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+// import '~/atom-one-dark.css';
+
+export default function Embed({ children, language = ''}) {
+  return (
+    <pre>
+      <div className="mb-4 rounded-md bg-black">
+        <div className="relative flex items-center bg-gray-800 px-4 py-2 font-sans text-xs text-gray-200">
+          <span className="">{ language }</span>
+          <button className="ml-auto flex gap-2">
+            <svg
+              stroke="currentColor"
+              fill="none"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="h-4 w-4"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
+              <rect
+                x="8"
+                y="2"
+                width="8"
+                height="4"
+                rx="1"
+                ry="1"
+              ></rect>
+            </svg>
+            Copy code
+          </button>
+        </div>
+        <div className="overflow-y-auto p-4">
+          { children }
+            {/* <span className="hljs-keyword">export</span> <span className="hljs-keyword">default</span> <span className="hljs-keyword">function</span> <span className="hljs-title function_">CodeWrapper</span>(<span className="hljs-params">{ text }</span>) {
+  <span className="hljs-keyword">const</span> matchRegex = <span className="hljs-regexp">/(`[^`]+?`)/g</span>; <span className="hljs-comment">// regex to match backticks and text between them</span>
+  <span className="hljs-keyword">const</span> parts = text.<span className="hljs-title function_">split</span>(matchRegex);
+  <span className="hljs-variable language_">console</span>.<span className="hljs-title function_">log</span>(<span className="hljs-string">'parts'</span>, parts);
+
+  <span className="hljs-comment">// map over the parts and wrap any backticked text with &lt;code&gt; tags</span>
+  <span className="hljs-keyword">const</span> codeParts = parts.<span className="hljs-title function_">map</span>(<span className="hljs-function">(<span className="hljs-params">part, index</span>) =&gt;</span> {
+    <span className="hljs-keyword">if</span> (part.<span className="hljs-title function_">match</span>(matchRegex)) {
+      <>
+      <span className="hljs-keyword">return</span> <span className="xml"><span className="hljs-tag">&lt;<span className="hljs-name">code</span> <span className="hljs-attr">key</span>=<span className="hljs-string">{index}</span>&gt;</span>{part}<span className="hljs-tag">&lt;/<span className="hljs-name">code</span>&gt;</span></span>;
+      </>
+    } <span className="hljs-keyword">else</span> {
+      <>
+      <span className="hljs-keyword">return</span> part.<span className="hljs-title function_">trim</span>(); <span className="hljs-comment">// remove leading/trailing whitespace from non-backticked text</span>
+      </>
+    }
+  });
+
+  <span className="hljs-keyword">return</span> <span className="xml"><span className="hljs-tag">&lt;&gt;</span>{codeParts}<span className="hljs-tag">&lt;/&gt;</span></span>; <span className="hljs-comment">// return the wrapped text</span>
+} */}
+        </div>
+      </div>
+    </pre>
+  );
+}

src/components/Nav/index.jsx

@@ -28,7 +28,7 @@ export default function Nav() {
               onMouseLeave={() => setIsHovering(false)}
             >
               <div className="flex flex-col gap-2 text-sm text-gray-100">
-                {!!isLoading ? <Spinner /> : <Conversations conversations={data} conversationId={conversationId}/>}
+                {isLoading ? <Spinner /> : <Conversations conversations={data} conversationId={conversationId}/>}
               </div>
             </div>
             <NavLinks />

src/components/main/TextChat.jsx

@@ -38,7 +38,7 @@ export default function TextChat({ messages }) {
     };
     const convoHandler = (data) => {
       console.log('in convo handler');
-      if (model !== 'bingai' && convo.conversationId && convo.parentMessageId === null) {
+      if (model !== 'bingai' && convo.conversationId === null && convo.parentMessageId === null) {
         const { title, conversationId, id } = data;
         console.log('parentMessageId is null');
         console.log('title, convoId, id', title, conversationId, id);