Merge pull request #4 from yoziru/add-markdown

feat: add support for markdown
yoziru · Jul 28, 2024 · 89f7754 · 89f7754
2 parents c53673e + d7427ed
commit 89f7754
Show file tree

Hide file tree

Showing 3 changed files with 840 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,9 @@
     "react-code-blocks": "^0.1.6",
     "react-dom": "^18",
     "react-hook-form": "^7.51.2",
+    "react-markdown": "^9.0.1",
     "react-textarea-autosize": "^8.5.3",
+    "remark-gfm": "^4.0.0",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.2",
     "use-debounce": "^10.0.0",

diff --git a/src/components/chat/chat-list.tsx b/src/components/chat/chat-list.tsx
@@ -4,6 +4,8 @@ import Image from "next/image";
 
 import OllamaLogo from "../../../public/ollama.png";
 import CodeDisplayBlock from "../code-display-block";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { Message } from "ai";
 
 interface ChatListProps {
@@ -101,9 +103,9 @@ export default function ChatList({ messages, isLoading }: ChatListProps) {
                         {message.content.split("```").map((part, index) => {
                           if (index % 2 === 0) {
                             return (
-                              <React.Fragment key={index}>
+                              <Markdown key={index} remarkPlugins={[remarkGfm]}>
                                 {part}
-                              </React.Fragment>
+                              </Markdown>
                             );
                           } else {
                             return (