feat: support katex

HyperChatBot · Jan 5, 2025 · f14b4c3 · f14b4c3
1 parent 05501c8
commit f14b4c3
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <title>Hyper Chat</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
+      integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn"
+      crossorigin="anonymous"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "js-tiktoken": "^1.0.15",
     "luxon": "^3.5.0",
     "marked": "^15.0.3",
+    "marked-katex-extension": "^5.1.4",
     "notistack": "^3.0.1",
     "openai": "^4.76.0",
     "react": "^18.3.1",

diff --git a/src/components/ChatBox/InputBox.tsx b/src/components/ChatBox/InputBox.tsx
@@ -2,11 +2,7 @@ import classNames from 'classnames'
 import { useAtom, useAtomValue } from 'jotai'
 import { FC, memo, useEffect, useRef, useState } from 'react'
 import { useChatCompletion } from 'src/hooks'
-import {
-  base64FilePromptAtom,
-  conversationAtom,
-  inputTextAtom
-} from 'src/stores/conversation'
+import { base64FilePromptAtom, inputTextAtom } from 'src/stores/conversation'
 import { loadingAtom, settingsAtom } from 'src/stores/global'
 import { ContentPartType, TextPrompt } from 'src/types/conversation'
 import { LoadingIcon, SolidSendIcon } from '../Icons'
@@ -16,7 +12,6 @@ import AudioRecorder from './Recorder'
 import TokenCount from './TokenCount'
 
 const InputBox: FC = () => {
-  const conversation = useAtomValue(conversationAtom)
   const settings = useAtomValue(settingsAtom)
   const loading = useAtomValue(loadingAtom)
   const [inputText, setInputText] = useAtom(inputTextAtom)
@@ -80,8 +75,6 @@ const InputBox: FC = () => {
     }
   }, [inputText])
 
-  if (!conversation) return null
-
   return (
     <section className="absolute bottom-6 left-6 w-[calc(100%_-_3rem)] rounded-md border border-black/10 bg-white dark:bg-gray-700">
       <AttachmentUploader className="absolute bottom-3 left-4" />

diff --git a/src/components/ChatBox/Markdown.tsx b/src/components/ChatBox/Markdown.tsx
@@ -1,13 +1,14 @@
 import hljs from 'highlight.js'
 import 'highlight.js/styles/atom-one-dark.css'
 import { Marked, Renderer, Tokens } from 'marked'
+import markedKatex from 'marked-katex-extension'
 import { FC, memo, useCallback } from 'react'
 
 interface Props {
   src: string
 }
 
-const Markdown: FC<Props> = memo(({ src }) => {
+const Markdown: FC<Props> = ({ src }) => {
   const parseMarkdown = useCallback(() => {
     const renderer = new Renderer()
 
@@ -42,6 +43,8 @@ const Markdown: FC<Props> = memo(({ src }) => {
       }
     })
 
+    marked.use(markedKatex())
+
     return marked.parse(src)
   }, [src])
 
@@ -51,6 +54,6 @@ const Markdown: FC<Props> = memo(({ src }) => {
       dangerouslySetInnerHTML={{ __html: parseMarkdown() }}
     />
   )
-})
+}
 
-export default Markdown
+export default memo(Markdown)
diff --git a/src/components/ChatBox/TokenCount.tsx b/src/components/ChatBox/TokenCount.tsx
@@ -12,7 +12,7 @@ const TokenCount: FC = () => {
   const { maxInput } =
     models.find((m) => m.modelName === configuration.model) ?? {}
   const usedTokenCount =
-    conversation.messages.reduce((acc, val) => acc + val.tokenCount, 0) +
+    conversation?.messages.reduce((acc, val) => acc + val.tokenCount, 0) +
     configuration.systemMessageTokensCount
 
   return (

diff --git a/src/components/Configuration/index.tsx b/src/components/Configuration/index.tsx
@@ -12,14 +12,13 @@ import { useAtomValue } from 'jotai'
 import { FC } from 'react'
 import configurations from 'src/configurations'
 import { useDB } from 'src/hooks'
-import { configurationAtom, conversationAtom } from 'src/stores/conversation'
+import { configurationAtom } from 'src/stores/conversation'
 import { companyAtom } from 'src/stores/global'
 import { Configuration as IConfiguration } from 'src/types/conversation'
 import Divider from '../Divider'
 import InputSlider from '../InputSlider'
 
 const Configuration: FC = () => {
-  const conversation = useAtomValue(conversationAtom)
   const company = useAtomValue(companyAtom)
   const configuration = useAtomValue(configurationAtom)
   const { updateOneById } = useDB('configurations')
@@ -29,10 +28,6 @@ const Configuration: FC = () => {
     await updateOneById(configuration.company, configuration)
   }
 
-  if (!conversation) {
-    return null
-  }
-
   return (
     <section className="w-87.75">
       <section className="flex h-22 items-center justify-between pl-6">