From 8900b8f0f2196d8c6d02299cf628e7a367d732f5 Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Sat, 16 May 2026 23:35:17 +0300
Subject: [PATCH] fix(ui): smooth reasoning collapse animation

---
 .../chat/message/parts/ReasoningPart.tsx      | 82 ++++++++++---------
 packages/ui/src/lib/i18n/messages/en.ts       |  1 -
 packages/ui/src/lib/i18n/messages/es.ts       |  1 -
 packages/ui/src/lib/i18n/messages/ko.ts       |  1 -
 packages/ui/src/lib/i18n/messages/pl.ts       |  1 -
 packages/ui/src/lib/i18n/messages/pt-BR.ts    |  1 -
 packages/ui/src/lib/i18n/messages/uk.ts       |  1 -
 packages/ui/src/lib/i18n/messages/zh-CN.ts    |  1 -
 8 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/packages/ui/src/components/chat/message/parts/ReasoningPart.tsx b/packages/ui/src/components/chat/message/parts/ReasoningPart.tsx
index 6db40dc4..6fb906c1 100644
--- a/packages/ui/src/components/chat/message/parts/ReasoningPart.tsx
+++ b/packages/ui/src/components/chat/message/parts/ReasoningPart.tsx
@@ -209,7 +209,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
 
                     {isStreaming ? (
                         <span className="flex items-center gap-1 typography-meta font-medium" style={{ color: 'var(--tools-title)' }}>
-                            <span>{t('chat.reasoningTrace.reasoning')}</span>
+                            <span>{t(variant === 'justification' ? 'chat.reasoningTrace.justification' : 'chat.reasoningTrace.thinking')}</span>
                             <BusyDots />
                         </span>
                     ) : isExpanded ? (
@@ -244,45 +244,51 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
                 </div>
             </div>
 
-            {/* Expanded content — left border matching ToolPart */}
-            {isExpanded && (
-                <div
-                    id={contentId}
-                    className="relative ml-2 pl-3 pb-1 pt-0.5"
-                >
-                    <span
-                        aria-hidden="true"
-                        className="pointer-events-none absolute left-0 top-0 bottom-0 w-px"
-                        style={{ backgroundColor: 'var(--tools-border)' }}
-                    />
-                    <ScrollableOverlay
-                        ref={scrollRef}
-                        as="div"
-                        outerClassName="max-h-80"
-                        className="p-0"
-                        useScrollShadow
-                        scrollShadowSize={36}
-                        userIntentOnly
-                    >
-                        <div data-message-text-export-source="true">
-                            <MarkdownRenderer
-                                content={text}
-                                messageId={blockId}
-                                isAnimated={false}
-                                isStreaming={isStreaming}
-                                variant="reasoning"
-                            />
-                        </div>
-                        {actions ? (
-                            <div className="mt-2 mb-1 flex items-center justify-start gap-1.5" data-message-actions="true">
-                                <div className="flex items-center gap-1.5" data-message-action-group="true">
-                                    {actions}
-                                </div>
+            {/* Expanded content — keep mounted so auto-collapse can animate smoothly. */}
+            <div
+                id={contentId}
+                aria-hidden={!isExpanded}
+                className={cn(
+                    'grid transition-[grid-template-rows,opacity] duration-[350ms] ease-out motion-reduce:transition-none',
+                    isExpanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
+                )}
+            >
+                <div className="min-h-0 overflow-hidden">
+                    <div className="relative ml-2 pl-3 pb-1 pt-0.5">
+                        <span
+                            aria-hidden="true"
+                            className="pointer-events-none absolute left-0 top-0 bottom-0 w-px"
+                            style={{ backgroundColor: 'var(--tools-border)' }}
+                        />
+                        <ScrollableOverlay
+                            ref={scrollRef}
+                            as="div"
+                            outerClassName="max-h-80"
+                            className="p-0"
+                            useScrollShadow
+                            scrollShadowSize={36}
+                            userIntentOnly
+                        >
+                            <div data-message-text-export-source="true">
+                                <MarkdownRenderer
+                                    content={text}
+                                    messageId={blockId}
+                                    isAnimated={false}
+                                    isStreaming={isStreaming}
+                                    variant="reasoning"
+                                />
                             </div>
-                        ) : null}
-                    </ScrollableOverlay>
+                            {actions ? (
+                                <div className="mt-2 mb-1 flex items-center justify-start gap-1.5" data-message-actions="true">
+                                    <div className="flex items-center gap-1.5" data-message-action-group="true">
+                                        {actions}
+                                    </div>
+                                </div>
+                            ) : null}
+                        </ScrollableOverlay>
+                    </div>
                 </div>
-            )}
+            </div>
         </div>
     );
 };
diff --git a/packages/ui/src/lib/i18n/messages/en.ts b/packages/ui/src/lib/i18n/messages/en.ts
index 37fcc175..8d72bfaf 100644
--- a/packages/ui/src/lib/i18n/messages/en.ts
+++ b/packages/ui/src/lib/i18n/messages/en.ts
@@ -1687,7 +1687,6 @@ export const dict = {
   'chat.modelControls.modeValue.all': 'All',
   'chat.modelControls.modeValue.none': '—',
   'chat.reasoningTrace.thinking': 'Thinking',
-  'chat.reasoningTrace.reasoning': 'Reasoning',
   'chat.reasoningTrace.justification': 'Justification',
   'chat.reasoningTrace.expandAria': 'Expand reasoning trace',
   'chat.reasoningTrace.collapseAria': 'Collapse reasoning trace',
diff --git a/packages/ui/src/lib/i18n/messages/es.ts b/packages/ui/src/lib/i18n/messages/es.ts
index 16e2bfe8..73ce4f09 100644
--- a/packages/ui/src/lib/i18n/messages/es.ts
+++ b/packages/ui/src/lib/i18n/messages/es.ts
@@ -1653,7 +1653,6 @@ export const dict: Record<I18nKey, string> = {
   "chat.modelControls.modeValue.all": "Todos",
   "chat.modelControls.modeValue.none": "—",
   "chat.reasoningTrace.thinking": "Pensando",
-  "chat.reasoningTrace.reasoning": "Razonando",
   "chat.reasoningTrace.justification": "Justificación",
   "chat.reasoningTrace.expandAria": "Expandir traza de razonamiento",
   "chat.reasoningTrace.collapseAria": "Contraer traza de razonamiento",
diff --git a/packages/ui/src/lib/i18n/messages/ko.ts b/packages/ui/src/lib/i18n/messages/ko.ts
index 83c4c99f..fb7a4c38 100644
--- a/packages/ui/src/lib/i18n/messages/ko.ts
+++ b/packages/ui/src/lib/i18n/messages/ko.ts
@@ -1687,7 +1687,6 @@ export const dict: Record<I18nKey, string> = {
   'chat.modelControls.modeValue.all': '전체',
   'chat.modelControls.modeValue.none': '—',
   'chat.reasoningTrace.thinking': '추론',
-  'chat.reasoningTrace.reasoning': '추론 중',
   'chat.reasoningTrace.justification': '근거',
   'chat.reasoningTrace.expandAria': '추론 트레이스 펼치기',
   'chat.reasoningTrace.collapseAria': '추론 트레이스 접기',
diff --git a/packages/ui/src/lib/i18n/messages/pl.ts b/packages/ui/src/lib/i18n/messages/pl.ts
index 4e6d1f7d..ff34d410 100644
--- a/packages/ui/src/lib/i18n/messages/pl.ts
+++ b/packages/ui/src/lib/i18n/messages/pl.ts
@@ -890,7 +890,6 @@ export const dict: Record<I18nKey, string> = {
   'chat.messageBody.subtask.showPrompt': 'Pokaż prompt',
   'chat.messageBody.subtask.title': 'Zadanie delegowane',
   'chat.reasoningTrace.thinking': 'Myślenie',
-  'chat.reasoningTrace.reasoning': 'Rozumowanie',
   'chat.reasoningTrace.justification': 'Uzasadnienie',
   'chat.reasoningTrace.expandAria': 'Rozwiń ślad rozumowania',
   'chat.reasoningTrace.collapseAria': 'Zwiń ślad rozumowania',
diff --git a/packages/ui/src/lib/i18n/messages/pt-BR.ts b/packages/ui/src/lib/i18n/messages/pt-BR.ts
index d271fbd4..fe37936d 100644
--- a/packages/ui/src/lib/i18n/messages/pt-BR.ts
+++ b/packages/ui/src/lib/i18n/messages/pt-BR.ts
@@ -1653,7 +1653,6 @@ export const dict: Record<I18nKey, string> = {
   "chat.modelControls.modeValue.all": "Todos",
   "chat.modelControls.modeValue.none": "—",
   "chat.reasoningTrace.thinking": "Pensando",
-  "chat.reasoningTrace.reasoning": "Raciocinando",
   "chat.reasoningTrace.justification": "Justificativa",
   "chat.reasoningTrace.expandAria": "Expandir rastro de raciocínio",
   "chat.reasoningTrace.collapseAria": "Recolher rastro de raciocínio",
diff --git a/packages/ui/src/lib/i18n/messages/uk.ts b/packages/ui/src/lib/i18n/messages/uk.ts
index 096a7ae4..9a6d673b 100644
--- a/packages/ui/src/lib/i18n/messages/uk.ts
+++ b/packages/ui/src/lib/i18n/messages/uk.ts
@@ -1653,7 +1653,6 @@ export const dict: Record<I18nKey, string> = {
   "chat.modelControls.modeValue.all": "всі",
   "chat.modelControls.modeValue.none": "—",
   "chat.reasoningTrace.thinking": "Міркування",
-  "chat.reasoningTrace.reasoning": "Міркую",
   "chat.reasoningTrace.justification": "Обґрунтування",
   "chat.reasoningTrace.expandAria": "Розгорнути слід міркування",
   "chat.reasoningTrace.collapseAria": "Згорнути слід міркування",
diff --git a/packages/ui/src/lib/i18n/messages/zh-CN.ts b/packages/ui/src/lib/i18n/messages/zh-CN.ts
index 2f470d48..eef33e44 100644
--- a/packages/ui/src/lib/i18n/messages/zh-CN.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-CN.ts
@@ -1653,7 +1653,6 @@ export const dict: Record<I18nKey, string> = {
   'chat.modelControls.modeValue.all': '全部',
   'chat.modelControls.modeValue.none': '—',
   'chat.reasoningTrace.thinking': '思考',
-  'chat.reasoningTrace.reasoning': '推理',
   'chat.reasoningTrace.justification': '理由',
   'chat.reasoningTrace.expandAria': '展开推理轨迹',
   'chat.reasoningTrace.collapseAria': '折叠推理轨迹',