From 75431095835b89abf7020979082e7313dfd633e7 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 4 Apr 2026 09:15:40 +0300
Subject: [PATCH] chore(llm): redesign thinking card

---
 .../type_widgets/llm_chat/ChatMessage.css     | 44 ++++---------------
 .../type_widgets/llm_chat/ChatMessage.tsx     | 22 +++++-----
 2 files changed, 20 insertions(+), 46 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/llm_chat/ChatMessage.css b/apps/client/src/widgets/type_widgets/llm_chat/ChatMessage.css
index 6e710e1ea3..f37f9abec9 100644
--- a/apps/client/src/widgets/type_widgets/llm_chat/ChatMessage.css
+++ b/apps/client/src/widgets/type_widgets/llm_chat/ChatMessage.css
@@ -16,7 +16,7 @@
 }
 
 .llm-chat-message-wrapper-assistant {
-    margin-right: auto;
+    width: 100%;
 }
 
 /* Show footer only on hover */
@@ -136,46 +136,20 @@
     color: var(--danger-text-color, #c00);
 }
 
-/* Thinking message (collapsible) */
-.llm-chat-message-thinking {
-    background: var(--accented-background-color);
-    border: 1px dashed var(--main-border-color);
-    cursor: pointer;
+.llm-chat-thinking-card.expandable-card {
+    width: 100%;
+    max-width: 100%;
+    border-style: dashed;
+    margin-right: 0;
+    margin: 0;
 }
 
-.llm-chat-thinking-summary {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.85rem;
-    font-weight: 500;
+.llm-chat-thinking-card .expandable-section-summary {
     color: var(--muted-text-color);
-    padding: 0.25rem 0;
-    list-style: none;
-}
-
-.llm-chat-thinking-summary::-webkit-details-marker {
-    display: none;
-}
-
-.llm-chat-thinking-summary::before {
-    content: "▶";
-    font-size: 0.7em;
-    transition: transform 0.2s ease;
-}
-
-.llm-chat-message-thinking[open] .llm-chat-thinking-summary::before {
-    transform: rotate(90deg);
-}
-
-.llm-chat-thinking-summary .bx {
-    font-size: 1rem;
 }
 
 .llm-chat-thinking-content {
-    margin-top: 0.5rem;
-    padding-top: 0.5rem;
-    border-top: 1px solid var(--main-border-color);
+    padding: 0.5rem 0.75rem;
     font-size: 0.9rem;
     color: var(--muted-text-color);
     white-space: pre-wrap;
diff --git a/apps/client/src/widgets/type_widgets/llm_chat/ChatMessage.tsx b/apps/client/src/widgets/type_widgets/llm_chat/ChatMessage.tsx
index d3d9b814f7..d0097c3bd7 100644
--- a/apps/client/src/widgets/type_widgets/llm_chat/ChatMessage.tsx
+++ b/apps/client/src/widgets/type_widgets/llm_chat/ChatMessage.tsx
@@ -117,19 +117,19 @@ export default function ChatMessage({ message, isStreaming }: Props) {
         isThinking && "llm-chat-message-thinking"
     ].filter(Boolean).join(" ");
 
-    // Render thinking messages in a collapsible details element
+    // Render thinking messages in a collapsible card
     if (isThinking) {
         return (
-            <details className={messageClasses}>
-                <summary className="llm-chat-thinking-summary">
-                    <span className="bx bx-brain" />
-                    {t("llm_chat.thought_process")}
-                </summary>
-                <div className="llm-chat-message-content llm-chat-thinking-content">
-                    {textContent}
-                    {isStreaming && <span className="llm-chat-cursor" />}
-                </div>
-            </details>
+            <div className="llm-chat-message-wrapper llm-chat-message-wrapper-assistant">
+                <ExpandableCard className="llm-chat-thinking-card">
+                    <ExpandableSection icon="bx bx-brain" label={t("llm_chat.thought_process")}>
+                        <div className="llm-chat-thinking-content">
+                            {textContent}
+                            {isStreaming && <span className="llm-chat-cursor" />}
+                        </div>
+                    </ExpandableSection>
+                </ExpandableCard>
+            </div>
         );
     }