Merge branch 'feature/parse'

package.json

@@ -15,7 +15,11 @@
     "@unocss/reset": "^0.50.1",
     "astro": "^2.0.15",
     "eventsource-parser": "^0.1.0",
+    "highlight.js": "^11.7.0",
+    "katex": "^0.6.0",
     "markdown-it": "^13.0.1",
+    "markdown-it-highlightjs": "^4.0.1",
+    "markdown-it-katex": "^2.0.3",
     "solid-js": "^1.6.11"
   },
   "devDependencies": {

src/components/Generator.tsx

@@ -51,8 +51,7 @@ export default () => {
           continue
         }
         if (char) {
-          const textWithoutNewline = char.replace(/^\n+/, '')
-          setCurrentAssistantMessage(currentAssistantMessage() + textWithoutNewline)
+          setCurrentAssistantMessage(currentAssistantMessage() + char)
         }
       }
       done = readerDone

src/components/MessageItem.tsx

@@ -1,7 +1,9 @@
 import type { Accessor } from 'solid-js'
 import type { ChatMessage } from '../types'
 import MarkdownIt from 'markdown-it'
-// import Shiki from 'markdown-it-shiki'
+// @ts-ignore
+import mdKatex from 'markdown-it-katex'
+import mdHighlight from 'markdown-it-highlightjs'
 
 interface Props {
   role: ChatMessage['role']
@@ -15,7 +17,7 @@ export default ({ role, message }: Props) => {
     assistant: 'bg-gradient-to-r from-yellow-200 via-green-200 to-green-300',
   }
   const htmlString = () => {
-    const md = MarkdownIt()
+    const md = MarkdownIt().use(mdKatex).use(mdHighlight)
 
     if (typeof message === 'function') {
       return md.render(message())

src/layouts/Layout.astro

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

src/message.css

@@ -1,6 +1,11 @@
 .message pre {
   background-color: #64748b10;
   font-size: 0.8rem;
+  padding: 0.4rem 1rem;
+}
+
+.message .hljs {
+  background-color: transparent;
 }
 
 .message table {

src/pages/index.astro

@@ -3,6 +3,9 @@ import Layout from '../layouts/Layout.astro'
 import Header from '../components/Header.astro'
 import Footer from '../components/Footer.astro'
 import Generator from '../components/Generator'
+import '../message.css'
+import 'katex/dist/katex.min.css'
+import 'highlight.js/styles/atom-one-dark.css'
 ---
 
 <Layout title="ChatGPT API Demo">