Render messages in markdown (#1391)

This commit is contained in:
Jim Su 2024-04-26 14:05:17 -04:00 committed by GitHub
parent 831e934dab
commit 93d8ee1400
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 1273 additions and 7 deletions

File diff suppressed because it is too large Load Diff

View File

@ -28,6 +28,7 @@
"react-hot-toast": "^2.4.1",
"react-i18next": "^14.1.0",
"react-icons": "^5.0.1",
"react-markdown": "^9.0.1",
"react-redux": "^9.1.0",
"react-syntax-highlighter": "^15.5.0",
"tailwind-merge": "^2.2.2",
@ -56,6 +57,7 @@
]
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.12",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",

View File

@ -1,5 +1,6 @@
import React, { useEffect, useRef } from "react";
import { IoMdChatbubbles } from "react-icons/io";
import Markdown from "react-markdown";
import { useSelector } from "react-redux";
import { useTypingEffect } from "#/hooks/useTypingEffect";
import {
@ -58,7 +59,9 @@ function ChatBubble({ msg }: IChatBubbleProps): JSX.Element {
<div
className={`${msg?.sender === "user" ? "bg-neutral-700" : "bg-neutral-500"} rounded-lg`}
>
<div className="p-3">{msg?.content}</div>
<div className="p-3 prose prose-invert text-white">
<Markdown>{msg?.content}</Markdown>
</div>
</div>
</div>
</div>

View File

@ -23,5 +23,6 @@ export default {
}
}
}),
require('@tailwindcss/typography'),
],
};