handles in-line code in model response text (not multi-line yet)

src/App.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Messages from './components/Main/Messages';
+import Messages from './components/Messages';
 import Landing from './components/Main/Landing';
 import TextChat from './components/Main/TextChat';
 import Nav from './components/Nav';

src/components/Messages/CodeWrapper.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default function CodeWrapper({ text }) {
+  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, index) => {
+    if (part.match(matchRegex)) {
+      return <code key={index}>{part.slice(1, -1)}</code>;
+    } else {
+      return part;
+    }
+  });
+
+  return <>{codeParts}</>; // return the wrapped text
+}

src/components/Messages/Message.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import CodeWrapper from './CodeWrapper';
 import { useSelector } from 'react-redux';
 import GPTIcon from '../svg/GPTIcon';
 import BingIcon from '../svg/BingIcon';
@@ -52,6 +53,8 @@ export default function Message({
     );
   }
 
+  const wrapText = (text) => <CodeWrapper text={text} />;
+
   return (
     <div
       {...props}
@@ -64,14 +67,16 @@ export default function Message({
             {error ? (
               <div className="flex flex min-h-[20px] flex-row flex-col items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
                 <div className="rounded-md border border-red-500 bg-red-500/10 py-2 px-3 text-sm text-gray-600 dark:text-gray-100">
-                  {text}
+                  {wrapText(text)}
                 </div>
               </div>
             ) : (
-              <span>
+              <div className="flex min-h-[20px] flex-col items-start gap-4 whitespace-pre-wrap">
-                {text}
+                <div className="markdown prose dark:prose-invert light w-full break-words">
-                {blinker && <span className="result-streaming">█</span>}
+                  {wrapText(text)}
-              </span>
+                  {blinker && <span className="result-streaming">█</span>}
+                </div>
+              </div>
             )}
           </div>
         </div>

src/components/main/TextChat.jsx

@@ -160,7 +160,7 @@ export default function TextChat({ messages }) {
                 onKeyDown={handleKeyDown}
                 onChange={changeHandler}
                 placeholder=""
-                className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-9 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
+                className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-8 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
               />
               <SubmitButton submitMessage={submitMessage} />
             </div>

src/style.css

@@ -6,6 +6,28 @@
   box-sizing: border-box;
   outline: 1px solid limegreen !important;
 } */
+.prose :where(code):not(:where([class~="not-prose"] *)) {
+	color: var(--tw-prose-code);
+	font-size: .875em;
+	font-weight: 600;
+}
+
+.prose :where(code):not(:where([class~="not-prose"] *))::before {
+	content: "`";
+}
+
+.prose :where(code):not(:where([class~="not-prose"] *))::after {
+	content: "`";
+}
+
+code, pre {
+	font-family: Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace !important;
+}
+
+code, kbd, pre, samp {
+	font-family: Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace;
+	font-size: 1em;
+}
 
 .scroll-down-enter {
   opacity: 0;