finish highlight.js styling (for chatgpt)

src/components/Messages/TextWrapper.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import Embed from './Embed';
+import Highlight from './Highlight';
+import regexSplit from '~/utils/regexSplit';
+// const codeRegex = /(```[^`]+?```)/g;
+const codeRegex = /(```[\s\S]*?```)/g;
+const inLineRegex = /(`[^`]+?`)/g;
+const matchRegex = /(`[^`]+?`)/g;
+const languageMatch = /^```(\w+)/;
+const newLineMatch = /^```(\n+)/;
+const languages = [
+  'java',
+  'c',
+  'python',
+  'c++',
+  'javascript',
+  'csharp',
+  'php',
+  'typescript',
+  'swift',
+  'objectivec',
+  'sql',
+  'r',
+  'kotlin',
+  'ruby',
+  'go',
+  'x86asm',
+  'matlab',
+  'perl',
+  'pascal'
+];
+
+const inLineWrap = (parts) =>
+  parts.map((part, i) => {
+    if (part.match(matchRegex)) {
+      return <code key={i}>{part.slice(1, -1)}</code>;
+    } else {
+      // return <p key={i}>{part}</p>;
+      return part;
+    }
+  });
+
+export default function CodeWrapper({ text }) {
+  if (text.includes('```')) {
+    // const parts = text.split(codeRegex);
+    const parts = regexSplit(text);
+    console.log(parts);
+    const codeParts = parts.map((part, i) => {
+      if (part.match(codeRegex)) {
+        let language = 'javascript';
+
+        if (part.match(languageMatch)) {
+          language = part.match(languageMatch)[1].toLowerCase();
+          const validLanguage = languages.some((lang) => language === lang);
+          part = validLanguage ? part.replace(languageMatch, '```') : part;
+          language = validLanguage ? language : 'javascript';
+        }
+
+        part = part.replace(newLineMatch, '```');
+
+        return (
+          <Embed
+            key={i}
+            language={language}
+          >
+            <Highlight
+              code={part.slice(3, -3)}
+              language={language}
+            />
+          </Embed>
+        );
+      } else if (part.match(inLineRegex)) {
+        const innerParts = part.split(inLineRegex);
+        return inLineWrap(innerParts);
+      } else {
+        return part;
+      }
+    });
+
+    return <>{codeParts}</>; // return the wrapped text
+  } else {
+    // map over the parts and wrap any text between tildes with <code> tags
+    const parts = text.split(matchRegex);
+    const codeParts = inLineWrap(parts);
+    return <>{codeParts}</>; // return the wrapped text
+  }
+}