style: add list style for chat message markdown (#21)

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>
   );
 }

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 }) {

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"] });
 

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;
+}