From 76aa33612ce91ee4dd097ee65f75083130e76c5c Mon Sep 17 00:00:00 2001
From: Thuc Pham <51660321+thucpn@users.noreply.github.com>
Date: Tue, 26 Mar 2024 10:14:50 +0700
Subject: [PATCH] style: add list style for chat message markdown (#21)
---
.../components/ui/html/chat/chat-item.tsx | 2 +-
.../app/components/ui/chat/markdown.tsx | 2 +-
.../types/streaming/nextjs/app/layout.tsx | 1 +
.../types/streaming/nextjs/app/markdown.css | 23 +++++++++++++++++++
4 files changed, 26 insertions(+), 2 deletions(-)
create mode 100644 templates/types/streaming/nextjs/app/markdown.css
diff --git a/templates/components/ui/html/chat/chat-item.tsx b/templates/components/ui/html/chat/chat-item.tsx
index 2244f729..790fbed6 100644
--- a/templates/components/ui/html/chat/chat-item.tsx
+++ b/templates/components/ui/html/chat/chat-item.tsx
@@ -7,7 +7,7 @@ export default function ChatItem(message: Message) {
return (
<div className="flex items-start gap-4 pt-5">
<ChatAvatar {...message} />
- <p className="break-words">{message.content}</p>
+ <p className="break-words whitespace-pre-wrap">{message.content}</p>
</div>
);
}
diff --git a/templates/types/streaming/nextjs/app/components/ui/chat/markdown.tsx b/templates/types/streaming/nextjs/app/components/ui/chat/markdown.tsx
index 3ca53805..fab4cc57 100644
--- a/templates/types/streaming/nextjs/app/components/ui/chat/markdown.tsx
+++ b/templates/types/streaming/nextjs/app/components/ui/chat/markdown.tsx
@@ -15,7 +15,7 @@ const MemoizedReactMarkdown: FC<Options> = memo(
export default function Markdown({ content }: { content: string }) {
return (
<MemoizedReactMarkdown
- className="prose dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 break-words"
+ className="prose dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 break-words custom-markdown"
remarkPlugins={[remarkGfm, remarkMath]}
components={{
p({ children }) {
diff --git a/templates/types/streaming/nextjs/app/layout.tsx b/templates/types/streaming/nextjs/app/layout.tsx
index fb097706..8f7cab96 100644
--- a/templates/types/streaming/nextjs/app/layout.tsx
+++ b/templates/types/streaming/nextjs/app/layout.tsx
@@ -1,6 +1,7 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
+import "./markdown.css";
const inter = Inter({ subsets: ["latin"] });
diff --git a/templates/types/streaming/nextjs/app/markdown.css b/templates/types/streaming/nextjs/app/markdown.css
new file mode 100644
index 00000000..a843eeb7
--- /dev/null
+++ b/templates/types/streaming/nextjs/app/markdown.css
@@ -0,0 +1,23 @@
+/* Custom CSS for chat message markdown */
+.custom-markdown ul {
+ list-style-type: disc;
+ margin-left: 20px;
+}
+
+.custom-markdown ol {
+ list-style-type: decimal;
+ margin-left: 20px;
+}
+
+.custom-markdown li {
+ margin-bottom: 5px;
+}
+
+.custom-markdown ol ol {
+ list-style: lower-alpha;
+}
+
+.custom-markdown ul ul,
+.custom-markdown ol ol {
+ margin-left: 20px;
+}
--
GitLab