feat: support code block, math

package.json

@@ -15,7 +15,9 @@
     "@unocss/reset": "^0.50.1",
     "astro": "^2.0.15",
     "eventsource-parser": "^0.1.0",
-    "openai": "^3.1.0",
+    "micromark": "^3.1.0",
+    "micromark-extension-gfm": "^2.0.1",
+    "micromark-extension-math": "^2.0.2",
     "solid-js": "^1.6.11"
   },
   "devDependencies": {

src/components/MessageItem.tsx

@@ -1,5 +1,8 @@
-import { Accessor, For } from 'solid-js'
+import type { Accessor } from 'solid-js'
 import type { ChatMessage } from '../types'
+import { micromark } from 'micromark'
+import { gfm, gfmHtml } from 'micromark-extension-gfm'
+import { math, mathHtml } from 'micromark-extension-math'
 
 interface Props {
   role: ChatMessage['role']
@@ -12,22 +15,28 @@ export default ({ role, message }: Props) => {
     user: 'bg-gradient-to-r from-purple-400 to-yellow-400',
     assistant: 'bg-gradient-to-r from-yellow-200 via-green-200 to-green-300',
   }
-  const paragraphArr = () => {
+  const htmlString = () => {
+    const microMarkOptions = {
+      extensions: [
+        gfm(),
+        math(),
+      ],
+      htmlExtensions: [
+        gfmHtml(),
+        mathHtml(),
+      ],
+    }
     if (typeof message === 'function') {
-      return message().split('\n')
+      return micromark(message(), microMarkOptions)
     } else if (typeof message === 'string') {
-      return message.split('\n')
+      return micromark(message, microMarkOptions)
     }
-    return []
+    return ''
   }
   return (
     <div class="flex py-4 gap-3" class:op-75={ role === 'user' }>
       <div class={ `shrink-0 w-7 h-7 rounded-full op-80 ${ roleClass[role] }` }></div>
-      <div>
-        <For each={ paragraphArr() }>
-          { (line) => <p class="py-0.5 text-slate leading-relaxed break-words">{ line }</p> }
-        </For>
-      </div>
+      <div class="message text-slate leading-loose break-words overflow-hidden" innerHTML={htmlString()} />
     </div>
   )
 }

src/layouts/Layout.astro

@@ -1,4 +1,6 @@
 ---
+import '../message.css'
+
 export interface Props {
 	title: string;
 }

src/message.css

@@ -0,0 +1,31 @@
+.message pre {
+  margin: 0.5rem 0;
+  line-height: 1.5;
+  padding: 0.4rem 0.8rem;
+  font-size: 0.8em;
+  background-color: #1e293b;
+  border-radius: 4px;
+}
+
+.message table {
+  border-collapse: collapse;
+  font-size: 0.82em;
+}
+
+.message table thead tr {
+  background-color: #1e293b;
+  color: #f1f5f9;
+  text-align: left;
+}
+
+.message table th, .message table td {
+  padding: 0.6rem 1rem;
+}
+
+.message table tbody tr:nth-of-type(even) {
+  background-color: #f1f5f90a;
+}
+
+.message table tbody tr:last-of-type {
+  border-bottom: 2px solid #1e293b;
+}