From 96a1111654692259eb2b34a61b84341e9590c993 Mon Sep 17 00:00:00 2001
From: Dayuan Jiang <34411969+DayuanJiang@users.noreply.github.com>
Date: Fri, 5 Dec 2025 23:16:59 +0900
Subject: [PATCH] fix: ensure markdown text in user messages is visible (#108)

The prose plugin was overriding text colors for markdown elements
(bold, headings, etc.) in user message bubbles, causing text to
blend with the dark primary background.

Added conditional styling that forces all child elements in user
messages to use text-primary-foreground color with !important to
override prose defaults.
---
 components/chat-message-display.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/chat-message-display.tsx b/components/chat-message-display.tsx
index 8b0542e..e48e87f 100644
--- a/components/chat-message-display.tsx
+++ b/components/chat-message-display.tsx
@@ -406,7 +406,11 @@ export function ChatMessageDisplay({
                                                     switch (part.type) {
                                                         case "text":
                                                             return (
-                                                                <div key={index} className="prose prose-sm dark:prose-invert max-w-none break-words [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+                                                                <div key={index} className={`prose prose-sm max-w-none break-words [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 ${
+                                                                    message.role === "user"
+                                                                        ? "[&_*]:!text-primary-foreground prose-code:bg-white/20"
+                                                                        : "dark:prose-invert"
+                                                                }`}>
                                                                     <ReactMarkdown>{part.text}</ReactMarkdown>
                                                                 </div>
                                                             );