Add support for latex

README.md

@@ -14,11 +14,10 @@ LLM X (web app) will not connect to a server that is not secure. This means that
 
 # Recent additions:
 
+- LaTex support!
 - Users can connect to open ai compatible servers
 - Users can connect to multiple of the same server at the same time
 - Text generation through LM Studio is here! 
-- Regenerating a bot message adds it to a message variation list
-- Message headers and footers are sticky with the message, useful for long messages
 
 # How To Use:
 
@@ -80,6 +79,7 @@ LLM X (web app) will not connect to a server that is not secure. This means that
 - [x] **Offline Support** via PWA technology
 - [x] **Code highlighting** with Highlight.js (only handles common languages for now)
 - [x] **Search/Command bar** provides quick access to app features through kbar
+- [x] **LaTex support**
 - [x] Allow users to have as many connections as they way!
 - [x] Text Entry and Response to Ollama
 - [x] Auto saved Chat history
@@ -114,6 +114,10 @@ LLM X (web app) will not connect to a server that is not secure. This means that
 | --------------------------------------------------------------------------------------------------------- |
 | ![Cat screenshot](https://raw.githubusercontent.com/mrdjohnson/llm-X/main/screenshots/Screenshot-cat.png) |
 
+| LaTex support!                                                                                   |
+| --------------------------------------------------------------------------------------------------------- |
+| ![Latex screenshot](https://raw.githubusercontent.com/mrdjohnson/llm-X/main/screenshots/Screenshot-latex.png) |
+
 | Another logo response                                                                                           |
 | --------------------------------------------------------------------------------------------------------------- |
 | ![Logo 2 screenshot](https://raw.githubusercontent.com/mrdjohnson/llm-X/main/screenshots/Screenshot-logo-1.png) |

package.json

@@ -45,7 +45,9 @@
     "react-markdown": "^9.0.1",
     "react-scrollable-feed": "^2.0.2",
     "react-textarea-autosize": "^8.5.3",
+    "rehype-katex": "^7.0.0",
     "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
     "tailwindcss": "^3.4.1",
     "use-media": "^1.5.0",
     "vite-tsconfig-paths": "^4.3.2",

src/components/LazyMessage.tsx

@@ -1,6 +1,8 @@
 import React, { Suspense, useCallback, useEffect, useMemo, useRef } from 'react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+import rehypeKatex from 'rehype-katex'
 import { type PropsWithChildren } from 'react'
 import _ from 'lodash'
 import { observer } from 'mobx-react-lite'
@@ -165,7 +167,7 @@ const LazyMessage = observer(
         {(botName || isVariationGroupView || hasVarations) && (
           <div
             className={
-              'group sticky z-10 mb-2 flex flex-row gap-2 bg-base-100 opacity-100 align-middle ' +
+              'group sticky z-10 mb-2 flex flex-row gap-2 bg-base-100 align-middle opacity-100 ' +
               (isVariationGroupView ? ' top-7' : ' top-0')
             }
           >
@@ -237,7 +239,8 @@ const LazyMessage = observer(
               }
             >
               <Markdown
-                remarkPlugins={[[remarkGfm, { singleTilde: false }]]}
+                remarkPlugins={[[remarkGfm, { singleTilde: false }], remarkMath]}
+                rehypePlugins={[[rehypeKatex, { output: 'mathml' }]]}
                 className="prose-spacing prose flex w-full flex-wrap overflow-x-hidden overscroll-none prose-p:w-full"
                 components={{
                   code: DelayedCustomCodeBlock,