From 94cda183e489c3d3c5ff08a9aa132ee109f53009 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 7 Jul 2026 04:38:34 +0000
Subject: [PATCH 1/8] =?UTF-8?q?=E2=9A=A1=20Bolt:=20optimize=20chat=20messa?=
 =?UTF-8?q?ge=20re-renders?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Memoize MessageBubble and ThinkingIndicator components
- Optimize props to localize re-renders to affected items only
- Reduce ReactMarkdown re-rendering overhead during streaming and copy actions
---
 src/components/chat/client.tsx         |   9 +-
 src/components/chat/message-bubble.tsx | 198 +++++++++++++------------
 2 files changed, 108 insertions(+), 99 deletions(-)

diff --git a/src/components/chat/client.tsx b/src/components/chat/client.tsx
index 6a3333e..8cd0f83 100644
--- a/src/components/chat/client.tsx
+++ b/src/components/chat/client.tsx
@@ -90,11 +90,14 @@ export default function ChatWidgetClient() {
               <MessageBubble
                 key={m.id}
                 message={m}
-                isLoading={isLoading}
-                isLast={index === messages.length - 1}
+                isTyping={
+                  index === messages.length - 1 &&
+                  m.role === "assistant" &&
+                  isLoading
+                }
                 onEdit={handleEdit}
                 onCopy={copyToClipboard}
-                copiedId={copiedId}
+                isCopied={copiedId === m.id}
               />
             ))}
             {status === "submitted" &&
diff --git a/src/components/chat/message-bubble.tsx b/src/components/chat/message-bubble.tsx
index 954de0d..ac8fc9c 100644
--- a/src/components/chat/message-bubble.tsx
+++ b/src/components/chat/message-bubble.tsx
@@ -3,6 +3,7 @@
 import { Check, Copy, Pencil } from "lucide-react";
 
 import { UIMessage } from "ai";
+import React, { memo } from "react";
 import ReactMarkdown from "react-markdown";
 
 import { Button, Tooltip } from "@heroui/react";
@@ -94,125 +95,128 @@ const MessageContent = ({
   return <ReactMarkdown components={markdownComponents}>{text}</ReactMarkdown>;
 };
 
-export const MessageBubble = ({
-  message,
-  isLoading,
-  isLast,
-  onEdit,
-  onCopy,
-  copiedId,
-}: {
-  message: UIMessage;
-  isLoading: boolean;
-  isLast: boolean;
-  onEdit: (text: string) => void;
-  onCopy: (id: string, text: string) => void;
-  copiedId: string | null;
-}) => {
-  const showTypingIndicator =
-    isLast && message.role === "assistant" && isLoading;
-  const messageText =
-    message.parts?.reduce(
-      (acc, p) => (p.type === "text" ? acc + p.text : acc),
-      "",
-    ) || "";
+// ⚡ Optimization: Memoize the MessageBubble to prevent expensive re-renders of the entire message list,
+// especially during streaming or when copying messages.
+export const MessageBubble = memo(
+  ({
+    message,
+    isTyping,
+    onEdit,
+    onCopy,
+    isCopied,
+  }: {
+    message: UIMessage;
+    isTyping: boolean;
+    onEdit: (text: string) => void;
+    onCopy: (id: string, text: string) => void;
+    isCopied: boolean;
+  }) => {
+    const messageText =
+      message.parts?.reduce(
+        (acc, p) => (p.type === "text" ? acc + p.text : acc),
+        "",
+      ) || "";
 
-  return (
-    <div
-      className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}
-    >
+    return (
       <div
-        tabIndex={0}
-        role="button"
-        aria-label="Double click to select message text"
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            selectElementText(e.currentTarget);
-          }
-        }}
-        onDoubleClick={(e) => {
-          selectElementText(e.currentTarget);
-        }}
-        className={`chat-message-bubble group ${
-          message.role === "user"
-            ? "chat-message-user"
-            : "chat-message-assistant"
-        }`}
+        className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}
       >
-        {/* Floating Message Actions */}
         <div
-          className={`chat-message-actions ${
+          tabIndex={0}
+          role="button"
+          aria-label="Double click to select message text"
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              selectElementText(e.currentTarget);
+            }
+          }}
+          onDoubleClick={(e) => {
+            selectElementText(e.currentTarget);
+          }}
+          className={`chat-message-bubble group ${
             message.role === "user"
-              ? "chat-message-actions-user"
-              : "chat-message-actions-assistant"
+              ? "chat-message-user"
+              : "chat-message-assistant"
           }`}
         >
-          {message.role === "user" && (
+          {/* Floating Message Actions */}
+          <div
+            className={`chat-message-actions ${
+              message.role === "user"
+                ? "chat-message-actions-user"
+                : "chat-message-actions-assistant"
+            }`}
+          >
+            {message.role === "user" && (
+              <Tooltip closeDelay={0}>
+                <Tooltip.Trigger>
+                  <Button
+                    isIconOnly
+                    variant="ghost"
+                    onPress={() => onEdit(messageText)}
+                    className="chat-message-action-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full"
+                    aria-label="Edit question"
+                  >
+                    <Pencil size={12} aria-hidden="true" />
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  Edit question
+                  <Tooltip.Arrow />
+                </Tooltip.Content>
+              </Tooltip>
+            )}
             <Tooltip closeDelay={0}>
               <Tooltip.Trigger>
                 <Button
                   isIconOnly
                   variant="ghost"
-                  onPress={() => onEdit(messageText)}
+                  onPress={() => onCopy(message.id, messageText)}
                   className="chat-message-action-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full"
-                  aria-label="Edit question"
+                  aria-label={
+                    message.role === "user" ? "Copy question" : "Copy answer"
+                  }
                 >
-                  <Pencil size={12} aria-hidden="true" />
+                  {isCopied ? (
+                    <Check
+                      size={12}
+                      className="text-green-500 animate-pulse"
+                      aria-hidden="true"
+                    />
+                  ) : (
+                    <Copy size={12} aria-hidden="true" />
+                  )}
                 </Button>
               </Tooltip.Trigger>
               <Tooltip.Content>
-                Edit question
+                {message.role === "user" ? "Copy question" : "Copy answer"}
                 <Tooltip.Arrow />
               </Tooltip.Content>
             </Tooltip>
-          )}
-          <Tooltip closeDelay={0}>
-            <Tooltip.Trigger>
-              <Button
-                isIconOnly
-                variant="ghost"
-                onPress={() => onCopy(message.id, messageText)}
-                className="chat-message-action-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full"
-                aria-label={
-                  message.role === "user" ? "Copy question" : "Copy answer"
-                }
-              >
-                {copiedId === message.id ? (
-                  <Check
-                    size={12}
-                    className="text-green-500 animate-pulse"
-                    aria-hidden="true"
-                  />
-                ) : (
-                  <Copy size={12} aria-hidden="true" />
-                )}
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content>
-              {message.role === "user" ? "Copy question" : "Copy answer"}
-              <Tooltip.Arrow />
-            </Tooltip.Content>
-          </Tooltip>
-        </div>
+          </div>
 
-        <div className="prose prose-sm dark:prose-invert max-w-none">
-          <MessageContent message={message} text={messageText} />
-          {showTypingIndicator && (
-            <div className="chat-typing-indicator">
-              <span className="chat-typing-text">Generating...</span>
-              <div className="chat-typing-dot [animation-delay:-0.3s]"></div>
-              <div className="chat-typing-dot [animation-delay:-0.15s]"></div>
-              <div className="chat-typing-dot"></div>
-            </div>
-          )}
+          <div className="prose prose-sm dark:prose-invert max-w-none">
+            <MessageContent message={message} text={messageText} />
+            {isTyping && (
+              <div className="chat-typing-indicator">
+                <span className="chat-typing-text">Generating...</span>
+                <div className="chat-typing-dot [animation-delay:-0.3s]"></div>
+                <div className="chat-typing-dot [animation-delay:-0.15s]"></div>
+                <div className="chat-typing-dot"></div>
+              </div>
+            )}
+          </div>
         </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);
+
+MessageBubble.displayName = "MessageBubble";
 
-export const ThinkingIndicator = () => (
+// ⚡ Optimization: Memoize the thinking indicator for minor performance gains during state updates.
+export const ThinkingIndicator = memo(() => (
   <div className="flex justify-start animate-in fade-in duration-200">
     <div className="chat-thinking-indicator">
       <span className="chat-thinking-text">Thinking</span>
@@ -221,4 +225,6 @@ export const ThinkingIndicator = () => (
       <div className="chat-thinking-dot"></div>
     </div>
   </div>
-);
+));
+
+ThinkingIndicator.displayName = "ThinkingIndicator";

From c7d2edfba4383f641d23a60eedbe12561bdee691 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 7 Jul 2026 09:55:59 +0000
Subject: [PATCH 2/8] =?UTF-8?q?=E2=9A=A1=20Bolt:=20refactor=20chat=20messa?=
 =?UTF-8?q?ges=20for=20better=20performance=20and=20maintainability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Memoize MessageBubble and ThinkingIndicator components
- Optimize props to localize re-renders to affected items
- Extract message actions into sub-components (EditAction, CopyAction)
- Integrate HeroUI components for message actions
- Use descriptive prop names (isGenerating) and remove unnecessary comments
---
 src/components/chat/client.tsx         |   2 +-
 src/components/chat/message-bubble.tsx | 171 ++++++++++++++++---------
 2 files changed, 111 insertions(+), 62 deletions(-)

diff --git a/src/components/chat/client.tsx b/src/components/chat/client.tsx
index 8cd0f83..059ba06 100644
--- a/src/components/chat/client.tsx
+++ b/src/components/chat/client.tsx
@@ -90,7 +90,7 @@ export default function ChatWidgetClient() {
               <MessageBubble
                 key={m.id}
                 message={m}
-                isTyping={
+                isGenerating={
                   index === messages.length - 1 &&
                   m.role === "assistant" &&
                   isLoading
diff --git a/src/components/chat/message-bubble.tsx b/src/components/chat/message-bubble.tsx
index ac8fc9c..5515ef5 100644
--- a/src/components/chat/message-bubble.tsx
+++ b/src/components/chat/message-bubble.tsx
@@ -95,18 +95,115 @@ const MessageContent = ({
   return <ReactMarkdown components={markdownComponents}>{text}</ReactMarkdown>;
 };
 
-// ⚡ Optimization: Memoize the MessageBubble to prevent expensive re-renders of the entire message list,
-// especially during streaming or when copying messages.
+const EditAction = ({
+  onEdit,
+  text,
+}: {
+  onEdit: (text: string) => void;
+  text: string;
+}) => (
+  <Tooltip closeDelay={0}>
+    <Tooltip.Trigger>
+      <Button
+        isIconOnly
+        variant="ghost"
+        onPress={() => onEdit(text)}
+        className="chat-message-action-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full"
+        aria-label="Edit question"
+      >
+        <Pencil size={12} aria-hidden="true" />
+      </Button>
+    </Tooltip.Trigger>
+    <Tooltip.Content>
+      Edit question
+      <Tooltip.Arrow />
+    </Tooltip.Content>
+  </Tooltip>
+);
+
+const CopyAction = ({
+  onCopy,
+  id,
+  text,
+  isCopied,
+  role,
+}: {
+  onCopy: (id: string, text: string) => void;
+  id: string;
+  text: string;
+  isCopied: boolean;
+  role: string;
+}) => (
+  <Tooltip closeDelay={0}>
+    <Tooltip.Trigger>
+      <Button
+        isIconOnly
+        variant="ghost"
+        onPress={() => onCopy(id, text)}
+        className="chat-message-action-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full"
+        aria-label={role === "user" ? "Copy question" : "Copy answer"}
+      >
+        {isCopied ? (
+          <Check
+            size={12}
+            className="text-green-500 animate-pulse"
+            aria-hidden="true"
+          />
+        ) : (
+          <Copy size={12} aria-hidden="true" />
+        )}
+      </Button>
+    </Tooltip.Trigger>
+    <Tooltip.Content>
+      {role === "user" ? "Copy question" : "Copy answer"}
+      <Tooltip.Arrow />
+    </Tooltip.Content>
+  </Tooltip>
+);
+
+const MessageActions = ({
+  role,
+  messageId,
+  messageText,
+  isCopied,
+  onEdit,
+  onCopy,
+}: {
+  role: string;
+  messageId: string;
+  messageText: string;
+  isCopied: boolean;
+  onEdit: (text: string) => void;
+  onCopy: (id: string, text: string) => void;
+}) => (
+  <div
+    className={`chat-message-actions ${
+      role === "user"
+        ? "chat-message-actions-user"
+        : "chat-message-actions-assistant"
+    }`}
+  >
+    {role === "user" && <EditAction onEdit={onEdit} text={messageText} />}
+    <CopyAction
+      onCopy={onCopy}
+      id={messageId}
+      text={messageText}
+      isCopied={isCopied}
+      role={role}
+    />
+  </div>
+);
+
 export const MessageBubble = memo(
   ({
     message,
-    isTyping,
+    isGenerating,
     onEdit,
     onCopy,
     isCopied,
   }: {
     message: UIMessage;
-    isTyping: boolean;
+    isGenerating: boolean;
     onEdit: (text: string) => void;
     onCopy: (id: string, text: string) => void;
     isCopied: boolean;
@@ -140,65 +237,18 @@ export const MessageBubble = memo(
               : "chat-message-assistant"
           }`}
         >
-          {/* Floating Message Actions */}
-          <div
-            className={`chat-message-actions ${
-              message.role === "user"
-                ? "chat-message-actions-user"
-                : "chat-message-actions-assistant"
-            }`}
-          >
-            {message.role === "user" && (
-              <Tooltip closeDelay={0}>
-                <Tooltip.Trigger>
-                  <Button
-                    isIconOnly
-                    variant="ghost"
-                    onPress={() => onEdit(messageText)}
-                    className="chat-message-action-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full"
-                    aria-label="Edit question"
-                  >
-                    <Pencil size={12} aria-hidden="true" />
-                  </Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content>
-                  Edit question
-                  <Tooltip.Arrow />
-                </Tooltip.Content>
-              </Tooltip>
-            )}
-            <Tooltip closeDelay={0}>
-              <Tooltip.Trigger>
-                <Button
-                  isIconOnly
-                  variant="ghost"
-                  onPress={() => onCopy(message.id, messageText)}
-                  className="chat-message-action-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full"
-                  aria-label={
-                    message.role === "user" ? "Copy question" : "Copy answer"
-                  }
-                >
-                  {isCopied ? (
-                    <Check
-                      size={12}
-                      className="text-green-500 animate-pulse"
-                      aria-hidden="true"
-                    />
-                  ) : (
-                    <Copy size={12} aria-hidden="true" />
-                  )}
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content>
-                {message.role === "user" ? "Copy question" : "Copy answer"}
-                <Tooltip.Arrow />
-              </Tooltip.Content>
-            </Tooltip>
-          </div>
+          <MessageActions
+            role={message.role}
+            messageId={message.id}
+            messageText={messageText}
+            isCopied={isCopied}
+            onEdit={onEdit}
+            onCopy={onCopy}
+          />
 
           <div className="prose prose-sm dark:prose-invert max-w-none">
             <MessageContent message={message} text={messageText} />
-            {isTyping && (
+            {isGenerating && (
               <div className="chat-typing-indicator">
                 <span className="chat-typing-text">Generating...</span>
                 <div className="chat-typing-dot [animation-delay:-0.3s]"></div>
@@ -215,7 +265,6 @@ export const MessageBubble = memo(
 
 MessageBubble.displayName = "MessageBubble";
 
-// ⚡ Optimization: Memoize the thinking indicator for minor performance gains during state updates.
 export const ThinkingIndicator = memo(() => (
   <div className="flex justify-start animate-in fade-in duration-200">
     <div className="chat-thinking-indicator">

From 977eb32fda566e38be91e8559c611be5a4cedb08 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 7 Jul 2026 10:32:09 +0000
Subject: [PATCH 3/8] =?UTF-8?q?=E2=9A=A1=20Bolt:=20refactor=20chat=20messa?=
 =?UTF-8?q?ge=20bubbles=20with=20CSS=20data=20variants?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Refactor MessageBubble to use data-role attributes
- Use Tailwind data- modifiers for conditional alignment and styling
- Improve code cleanliness by removing ternary operators in className strings
- Maintain performance optimizations (memoization and localized props)
---
 src/components/chat/message-bubble.tsx | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/chat/message-bubble.tsx b/src/components/chat/message-bubble.tsx
index 5515ef5..c2c3ef6 100644
--- a/src/components/chat/message-bubble.tsx
+++ b/src/components/chat/message-bubble.tsx
@@ -177,11 +177,8 @@ const MessageActions = ({
   onCopy: (id: string, text: string) => void;
 }) => (
   <div
-    className={`chat-message-actions ${
-      role === "user"
-        ? "chat-message-actions-user"
-        : "chat-message-actions-assistant"
-    }`}
+    data-role={role}
+    className="chat-message-actions data-[role=user]:chat-message-actions-user data-[role=assistant]:chat-message-actions-assistant"
   >
     {role === "user" && <EditAction onEdit={onEdit} text={messageText} />}
     <CopyAction
@@ -216,11 +213,13 @@ export const MessageBubble = memo(
 
     return (
       <div
-        className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}
+        data-role={message.role}
+        className="flex data-[role=user]:justify-end data-[role=assistant]:justify-start"
       >
         <div
           tabIndex={0}
           role="button"
+          data-role={message.role}
           aria-label="Double click to select message text"
           onKeyDown={(e) => {
             if (e.key === "Enter" || e.key === " ") {
@@ -231,11 +230,7 @@ export const MessageBubble = memo(
           onDoubleClick={(e) => {
             selectElementText(e.currentTarget);
           }}
-          className={`chat-message-bubble group ${
-            message.role === "user"
-              ? "chat-message-user"
-              : "chat-message-assistant"
-          }`}
+          className="chat-message-bubble group data-[role=user]:chat-message-user data-[role=assistant]:chat-message-assistant"
         >
           <MessageActions
             role={message.role}

From fadfbb92e233b5fa86c3d8086868a481fe921dde Mon Sep 17 00:00:00 2001
From: Amr Abed <3361565+amrabed@users.noreply.github.com>
Date: Tue, 7 Jul 2026 06:52:58 -0400
Subject: [PATCH 4/8] refactor: centralize chat styles into CSS classes

---
 src/app/globals.css                    | 61 +++++++++++++++++++++++---
 src/components/chat/message-bubble.tsx | 43 +++++++-----------
 2 files changed, 72 insertions(+), 32 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index ad2cb62..a5ca445 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -233,15 +233,27 @@
 }
 
 /* Chat Widget Message Bubbles */
+.chat-message-wrapper {
+  @apply flex;
+}
+
+.chat-message-wrapper[data-role="user"] {
+  @apply justify-end;
+}
+
+.chat-message-wrapper[data-role="assistant"] {
+  @apply justify-start;
+}
+
 .chat-message-bubble {
   @apply relative max-w-[80%] rounded-2xl px-4 py-2.5 text-sm shadow-sm select-text cursor-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary;
 }
 
-.chat-message-user {
+.chat-message-bubble[data-role="user"] {
   @apply bg-gradient-to-tr from-indigo-600 to-violet-500 dark:from-indigo-500 dark:to-purple-500 text-white;
 }
 
-.chat-message-assistant {
+.chat-message-bubble[data-role="assistant"] {
   @apply bg-slate-100 dark:bg-zinc-800/80 border border-slate-200/50 dark:border-zinc-700/50 text-foreground;
 }
 
@@ -249,16 +261,55 @@
   @apply absolute top-1/2 -translate-y-1/2 flex items-center gap-1 bg-white dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 border border-zinc-200 dark:border-zinc-700 shadow-md px-1.5 py-0.5 rounded-full opacity-90 md:opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-200 z-10;
 }
 
-.chat-message-actions-user {
+.chat-message-actions[data-role="user"] {
   @apply left-0 -translate-x-[calc(100%+8px)];
 }
 
-.chat-message-actions-assistant {
+.chat-message-actions[data-role="assistant"] {
   @apply right-0 translate-x-[calc(100%+8px)];
 }
 
 .chat-message-action-btn {
-  @apply p-1.5 hover:text-indigo-600 dark:hover:text-indigo-400 hover:scale-105 transition-all min-w-0 h-fit;
+  @apply p-1.5 hover:text-indigo-600 dark:hover:text-indigo-400 hover:scale-105 transition-all min-w-0 h-fit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full;
+}
+.chat-message-markdown-link {
+  @apply text-indigo-600 dark:text-indigo-400 hover:underline font-semibold transition-colors;
+}
+
+.chat-message-markdown-p {
+  @apply mb-2 last:mb-0 leading-relaxed;
+}
+
+.chat-message-markdown-ul {
+  @apply list-disc pl-4 mb-2 space-y-1;
+}
+
+.chat-message-markdown-ol {
+  @apply list-decimal pl-4 mb-2 space-y-1;
+}
+
+.chat-message-markdown-li {
+  @apply mb-0.5;
+}
+
+.chat-message-markdown-strong {
+  @apply font-bold text-indigo-950 dark:text-white;
+}
+
+.chat-reasoning-text {
+  @apply mb-2 italic text-zinc-500 dark:text-zinc-400 border-l-2 border-zinc-300 dark:border-zinc-700 pl-2 text-xs;
+}
+
+.chat-user-text {
+  @apply whitespace-pre-wrap break-words;
+}
+
+.chat-thinking-wrapper {
+  @apply flex justify-start animate-in fade-in duration-200;
+}
+
+.chat-action-btn-success {
+  @apply text-green-500 animate-pulse;
 }
 
 .chat-typing-indicator {
diff --git a/src/components/chat/message-bubble.tsx b/src/components/chat/message-bubble.tsx
index c2c3ef6..c75eab9 100644
--- a/src/components/chat/message-bubble.tsx
+++ b/src/components/chat/message-bubble.tsx
@@ -25,28 +25,26 @@ const markdownComponents = {
         href={href}
         target={isHash ? undefined : "_blank"}
         rel={isHash ? undefined : "noopener noreferrer"}
-        className="text-indigo-600 dark:text-indigo-400 hover:underline font-semibold transition-colors"
+        className="chat-message-markdown-link"
       >
         {children}
       </a>
     );
   },
   p: ({ children }: { children?: React.ReactNode }) => (
-    <p className="mb-2 last:mb-0 leading-relaxed">{children}</p>
+    <p className="chat-message-markdown-p">{children}</p>
   ),
   ul: ({ children }: { children?: React.ReactNode }) => (
-    <ul className="list-disc pl-4 mb-2 space-y-1">{children}</ul>
+    <ul className="chat-message-markdown-ul">{children}</ul>
   ),
   ol: ({ children }: { children?: React.ReactNode }) => (
-    <ol className="list-decimal pl-4 mb-2 space-y-1">{children}</ol>
+    <ol className="chat-message-markdown-ol">{children}</ol>
   ),
   li: ({ children }: { children?: React.ReactNode }) => (
-    <li className="mb-0.5">{children}</li>
+    <li className="chat-message-markdown-li">{children}</li>
   ),
   strong: ({ children }: { children?: React.ReactNode }) => (
-    <strong className="font-bold text-indigo-950 dark:text-white">
-      {children}
-    </strong>
+    <strong className="chat-message-markdown-strong">{children}</strong>
   ),
 };
 
@@ -63,7 +61,7 @@ const MessageContent = ({
       if (part.type === "text") {
         if (message.role === "user") {
           return (
-            <div key={partKey} className="whitespace-pre-wrap break-words">
+            <div key={partKey} className="chat-user-text">
               {part.text}
             </div>
           );
@@ -76,10 +74,7 @@ const MessageContent = ({
       }
       if (part.type === "reasoning") {
         return (
-          <div
-            key={partKey}
-            className="mb-2 italic text-zinc-500 dark:text-zinc-400 border-l-2 border-zinc-300 dark:border-zinc-700 pl-2 text-xs"
-          >
+          <div key={partKey} className="chat-reasoning-text">
             Thinking: {part.text}
           </div>
         );
@@ -89,7 +84,7 @@ const MessageContent = ({
   }
 
   if (message.role === "user") {
-    return <div className="whitespace-pre-wrap break-words">{text}</div>;
+    return <div className="chat-user-text">{text}</div>;
   }
 
   return <ReactMarkdown components={markdownComponents}>{text}</ReactMarkdown>;
@@ -108,7 +103,7 @@ const EditAction = ({
         isIconOnly
         variant="ghost"
         onPress={() => onEdit(text)}
-        className="chat-message-action-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full"
+        className="chat-message-action-btn"
         aria-label="Edit question"
       >
         <Pencil size={12} aria-hidden="true" />
@@ -140,13 +135,13 @@ const CopyAction = ({
         isIconOnly
         variant="ghost"
         onPress={() => onCopy(id, text)}
-        className="chat-message-action-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full"
+        className="chat-message-action-btn"
         aria-label={role === "user" ? "Copy question" : "Copy answer"}
       >
         {isCopied ? (
           <Check
             size={12}
-            className="text-green-500 animate-pulse"
+            className="chat-action-btn-success"
             aria-hidden="true"
           />
         ) : (
@@ -176,10 +171,7 @@ const MessageActions = ({
   onEdit: (text: string) => void;
   onCopy: (id: string, text: string) => void;
 }) => (
-  <div
-    data-role={role}
-    className="chat-message-actions data-[role=user]:chat-message-actions-user data-[role=assistant]:chat-message-actions-assistant"
-  >
+  <div data-role={role} className="chat-message-actions">
     {role === "user" && <EditAction onEdit={onEdit} text={messageText} />}
     <CopyAction
       onCopy={onCopy}
@@ -212,10 +204,7 @@ export const MessageBubble = memo(
       ) || "";
 
     return (
-      <div
-        data-role={message.role}
-        className="flex data-[role=user]:justify-end data-[role=assistant]:justify-start"
-      >
+      <div data-role={message.role} className="chat-message-wrapper">
         <div
           tabIndex={0}
           role="button"
@@ -230,7 +219,7 @@ export const MessageBubble = memo(
           onDoubleClick={(e) => {
             selectElementText(e.currentTarget);
           }}
-          className="chat-message-bubble group data-[role=user]:chat-message-user data-[role=assistant]:chat-message-assistant"
+          className="chat-message-bubble group"
         >
           <MessageActions
             role={message.role}
@@ -261,7 +250,7 @@ export const MessageBubble = memo(
 MessageBubble.displayName = "MessageBubble";
 
 export const ThinkingIndicator = memo(() => (
-  <div className="flex justify-start animate-in fade-in duration-200">
+  <div className="chat-thinking-wrapper">
     <div className="chat-thinking-indicator">
       <span className="chat-thinking-text">Thinking</span>
       <div className="chat-thinking-dot [animation-delay:-0.3s]"></div>

From febb0957b527bbd27d1a24121abf62f3b3bc5510 Mon Sep 17 00:00:00 2001
From: Amr Abed <3361565+amrabed@users.noreply.github.com>
Date: Tue, 7 Jul 2026 07:11:04 -0400
Subject: [PATCH 5/8] style: adjust chat message bubble width

---
 src/app/globals.css | 52 ++++++++++++++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index a5ca445..0c48986 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -11,17 +11,24 @@
 
 @layer base {
   :root {
-    --heroui-primary: #4f46e5; /* colors.indigo[600] */
-    --heroui-secondary: #52525b; /* colors.zinc[600] */
-    --heroui-foreground: #475569; /* colors.slate[600] */
+    --heroui-primary: #4f46e5;
+    /* colors.indigo[600] */
+    --heroui-secondary: #52525b;
+    /* colors.zinc[600] */
+    --heroui-foreground: #475569;
+    /* colors.slate[600] */
     --heroui-background: #ffffff;
   }
 
   .dark {
-    --heroui-primary: #a5b4fc; /* colors.indigo[300] */
-    --heroui-secondary: #a1a1aa; /* colors.zinc[400] */
-    --heroui-foreground: #94a3b8; /* colors.slate[400] */
-    --heroui-background: #020617; /* colors.slate[950] */
+    --heroui-primary: #a5b4fc;
+    /* colors.indigo[300] */
+    --heroui-secondary: #a1a1aa;
+    /* colors.zinc[400] */
+    --heroui-foreground: #94a3b8;
+    /* colors.slate[400] */
+    --heroui-background: #020617;
+    /* colors.slate[950] */
   }
 }
 
@@ -41,6 +48,7 @@
 }
 
 @layer base {
+
   p,
   div {
     text-align: justify;
@@ -64,12 +72,12 @@
   scale: 1;
 }
 
-.pop-down-child > div {
+.pop-down-child>div {
   opacity: 0;
   scale: 0;
 }
 
-.section.in-view .pop-down-child > div {
+.section.in-view .pop-down-child>div {
   opacity: 1;
   scale: 1;
 }
@@ -92,17 +100,16 @@
 }
 
 /* Social Media animation */
-.social-hide > div {
+.social-hide>div {
   transform: scale(0);
 }
 
-.social-show > div {
+.social-show>div {
   transform: scale(0.9);
 }
 
 /* Scroll to top button classes (positioning handled via Tailwind) */
-.scroll-to-top {
-}
+.scroll-to-top {}
 
 .scroll-button {
   color: #fff;
@@ -128,6 +135,7 @@
 
 /* Fix chat widget text stretching caused by global text-align: justify */
 @layer components {
+
   :where(.chat-widget) p,
   :where(.chat-widget) div,
   :where(.chat-widget) ul,
@@ -170,11 +178,13 @@
 }
 
 .dark .filter-chip {
-  background-color: rgba(51, 65, 85, 0.5); /* slate-700/50 */
+  background-color: rgba(51, 65, 85, 0.5);
+  /* slate-700/50 */
 }
 
 .dark .filter-chip:hover {
-  background-color: rgb(51, 65, 85); /* slate-700 */
+  background-color: rgb(51, 65, 85);
+  /* slate-700 */
 }
 
 .filter-chip[data-selected] {
@@ -201,7 +211,8 @@
 
 .filter-chip[data-selected] .filter-chip-label:hover,
 .filter-chip[data-selected]:hover .filter-chip-label {
-  color: #f4f4f5; /* zinc-100 */
+  color: #f4f4f5;
+  /* zinc-100 */
 }
 
 .filter-chip-wrapper:has(input:focus-visible) .filter-chip {
@@ -246,15 +257,15 @@
 }
 
 .chat-message-bubble {
-  @apply relative max-w-[80%] rounded-2xl px-4 py-2.5 text-sm shadow-sm select-text cursor-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary;
+  @apply relative rounded-2xl px-4 py-2.5 text-sm shadow-sm select-text cursor-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary;
 }
 
 .chat-message-bubble[data-role="user"] {
-  @apply bg-gradient-to-tr from-indigo-600 to-violet-500 dark:from-indigo-500 dark:to-purple-500 text-white;
+  @apply max-w-[70%] bg-gradient-to-tr from-indigo-600 to-violet-500 dark:from-indigo-500 dark:to-purple-500 text-white;
 }
 
 .chat-message-bubble[data-role="assistant"] {
-  @apply bg-slate-100 dark:bg-zinc-800/80 border border-slate-200/50 dark:border-zinc-700/50 text-foreground;
+  @apply max-w-[80%] bg-slate-100 dark:bg-zinc-800/80 border border-slate-200/50 dark:border-zinc-700/50 text-foreground;
 }
 
 .chat-message-actions {
@@ -272,6 +283,7 @@
 .chat-message-action-btn {
   @apply p-1.5 hover:text-indigo-600 dark:hover:text-indigo-400 hover:scale-105 transition-all min-w-0 h-fit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full;
 }
+
 .chat-message-markdown-link {
   @apply text-indigo-600 dark:text-indigo-400 hover:underline font-semibold transition-colors;
 }
@@ -407,4 +419,4 @@
 
 .chat-toggle-trigger {
   @apply h-14 w-14 rounded-full bg-gradient-to-tr from-indigo-600 to-violet-500 dark:from-indigo-500 dark:to-purple-500 text-white shadow-xl hover:scale-110 hover:shadow-indigo-500/30 transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary;
-}
+}
\ No newline at end of file

From af25ad4311719c66afc2a8ca9dbc436b066ae814 Mon Sep 17 00:00:00 2001
From: Amr Abed <3361565+amrabed@users.noreply.github.com>
Date: Tue, 7 Jul 2026 07:34:20 -0400
Subject: [PATCH 6/8] revert unnecessary changes

---
 src/app/globals.css | 35 ++++++++++++-----------------------
 1 file changed, 12 insertions(+), 23 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 0c48986..744f191 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -11,31 +11,23 @@
 
 @layer base {
   :root {
-    --heroui-primary: #4f46e5;
-    /* colors.indigo[600] */
-    --heroui-secondary: #52525b;
-    /* colors.zinc[600] */
-    --heroui-foreground: #475569;
-    /* colors.slate[600] */
+    --heroui-primary: #4f46e5; /* colors.indigo[600] */
+    --heroui-secondary: #52525b; /* colors.zinc[600] */
+    --heroui-foreground: #475569; /* colors.slate[600] */
     --heroui-background: #ffffff;
   }
 
   .dark {
-    --heroui-primary: #a5b4fc;
-    /* colors.indigo[300] */
-    --heroui-secondary: #a1a1aa;
-    /* colors.zinc[400] */
-    --heroui-foreground: #94a3b8;
-    /* colors.slate[400] */
-    --heroui-background: #020617;
-    /* colors.slate[950] */
+    --heroui-primary: #a5b4fc; /* colors.indigo[300] */
+    --heroui-secondary: #a1a1aa; /* colors.zinc[400] */
+    --heroui-foreground: #94a3b8; /* colors.slate[400] */
+    --heroui-background: #020617; /* colors.slate[950] */
   }
 }
 
 * {
   scroll-behavior: smooth !important;
-  -webkit-scroll-behavior: smooth !important;
-  /* other browsers */
+  -webkit-scroll-behavior: smooth !important; /* other browsers */
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -178,13 +170,11 @@
 }
 
 .dark .filter-chip {
-  background-color: rgba(51, 65, 85, 0.5);
-  /* slate-700/50 */
+  background-color: rgba(51, 65, 85, 0.5); /* slate-700/50 */
 }
 
 .dark .filter-chip:hover {
-  background-color: rgb(51, 65, 85);
-  /* slate-700 */
+  background-color: rgb(51, 65, 85); /* slate-700 */
 }
 
 .filter-chip[data-selected] {
@@ -211,8 +201,7 @@
 
 .filter-chip[data-selected] .filter-chip-label:hover,
 .filter-chip[data-selected]:hover .filter-chip-label {
-  color: #f4f4f5;
-  /* zinc-100 */
+  color: #f4f4f5; /* zinc-100 */
 }
 
 .filter-chip-wrapper:has(input:focus-visible) .filter-chip {
@@ -419,4 +408,4 @@
 
 .chat-toggle-trigger {
   @apply h-14 w-14 rounded-full bg-gradient-to-tr from-indigo-600 to-violet-500 dark:from-indigo-500 dark:to-purple-500 text-white shadow-xl hover:scale-110 hover:shadow-indigo-500/30 transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary;
-}
\ No newline at end of file
+}

From a9df94857e85764d40827eea372ebb85230a2391 Mon Sep 17 00:00:00 2001
From: Amr Abed <3361565+amrabed@users.noreply.github.com>
Date: Tue, 7 Jul 2026 07:36:00 -0400
Subject: [PATCH 7/8] format

---
 src/app/globals.css | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 744f191..7901e3c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -40,7 +40,6 @@
 }
 
 @layer base {
-
   p,
   div {
     text-align: justify;
@@ -64,12 +63,12 @@
   scale: 1;
 }
 
-.pop-down-child>div {
+.pop-down-child > div {
   opacity: 0;
   scale: 0;
 }
 
-.section.in-view .pop-down-child>div {
+.section.in-view .pop-down-child > div {
   opacity: 1;
   scale: 1;
 }
@@ -92,16 +91,17 @@
 }
 
 /* Social Media animation */
-.social-hide>div {
+.social-hide > div {
   transform: scale(0);
 }
 
-.social-show>div {
+.social-show > div {
   transform: scale(0.9);
 }
 
 /* Scroll to top button classes (positioning handled via Tailwind) */
-.scroll-to-top {}
+.scroll-to-top {
+}
 
 .scroll-button {
   color: #fff;
@@ -127,7 +127,6 @@
 
 /* Fix chat widget text stretching caused by global text-align: justify */
 @layer components {
-
   :where(.chat-widget) p,
   :where(.chat-widget) div,
   :where(.chat-widget) ul,

From 717e36276896c9d7f2b618e3ee3be17b1d534445 Mon Sep 17 00:00:00 2001
From: Amr Abed <3361565+amrabed@users.noreply.github.com>
Date: Tue, 7 Jul 2026 07:37:28 -0400
Subject: [PATCH 8/8] revert unnecessary change

---
 src/app/globals.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 7901e3c..2d0b160 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -27,7 +27,8 @@
 
 * {
   scroll-behavior: smooth !important;
-  -webkit-scroll-behavior: smooth !important; /* other browsers */
+  -webkit-scroll-behavior: smooth !important;
+  /* other browsers */
 }
 
 @media (prefers-reduced-motion: reduce) {