From 8c1f5200477946eaf2b36985d9c1e05eb74d0ae0 Mon Sep 17 00:00:00 2001
From: Khalid Abdi <xamza2009@gmail.com>
Date: Sun, 14 Jun 2026 20:24:03 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20chat=20crashed=20(blank/broken=20input)?=
 =?UTF-8?q?=20=E2=80=94=20drop=20reasoning=20ai-element?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ai-elements `reasoning.tsx` imports `streamdown`/`@streamdown/*`, which are
not installed (it's a dormant component). Importing it into chat-panel made the
whole chat fail to render — taking the input toolbar (attach, add-patient, model
picker, mic, send) down with it.

Render the reasoning block with a self-contained COSS Collapsible + Shimmer
instead (no streamdown). The other AI-elements I wired in (tool, queue,
suggestion, shimmer) have their deps installed and stay. Verified with a full
`next build`.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/components/chat/chat-panel.tsx       | 34 +++++++++++--------
 frontend/lib/i18n/locales/en/translation.json |  1 +
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/frontend/components/chat/chat-panel.tsx b/frontend/components/chat/chat-panel.tsx
index bd608d6..8c31d03 100644
--- a/frontend/components/chat/chat-panel.tsx
+++ b/frontend/components/chat/chat-panel.tsx
@@ -2,7 +2,7 @@
 
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport, type ToolUIPart } from "ai";
-import { AlertTriangle, ShieldCheck, X } from "lucide-react";
+import { AlertTriangle, Brain, ChevronDown, ShieldCheck, X } from "lucide-react";
 import { nanoid } from "nanoid";
 import { useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -33,11 +33,6 @@ import {
   QueueItemIndicator,
   QueueList,
 } from "@/components/ai-elements/queue";
-import {
-  Reasoning,
-  ReasoningContent,
-  ReasoningTrigger,
-} from "@/components/ai-elements/reasoning";
 import { Shimmer } from "@/components/ai-elements/shimmer";
 import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion";
 import {
@@ -59,6 +54,11 @@ import {
 } from "@/components/chat/record-list-card";
 import { VeilConfirmation } from "@/components/chat/veil-confirmation";
 import { Badge } from "@/components/ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 import {
   DEFAULT_EFFORT,
   DEFAULT_MODEL_ID,
@@ -351,14 +351,20 @@ export function ChatPanel() {
             const key = `${message.id}-${i}`;
             if (part.type === "reasoning") {
               return (
-                <Reasoning
-                  className="w-full"
-                  isStreaming={isWorking && isLast}
-                  key={key}
-                >
-                  <ReasoningTrigger />
-                  <ReasoningContent>{part.text}</ReasoningContent>
-                </Reasoning>
+                <Collapsible className="w-full" key={key}>
+                  <CollapsibleTrigger className="group flex items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground">
+                    <Brain className="size-4" />
+                    {isWorking && isLast ? (
+                      <Shimmer duration={1}>{t("chat.reasoning")}</Shimmer>
+                    ) : (
+                      t("chat.reasoning")
+                    )}
+                    <ChevronDown className="size-4 transition-transform group-data-[panel-open]:rotate-180" />
+                  </CollapsibleTrigger>
+                  <CollapsibleContent className="mt-2 whitespace-pre-wrap text-muted-foreground text-sm leading-relaxed">
+                    {part.text}
+                  </CollapsibleContent>
+                </Collapsible>
               );
             }
             if (part.type.startsWith("tool-")) {
diff --git a/frontend/lib/i18n/locales/en/translation.json b/frontend/lib/i18n/locales/en/translation.json
index 93541da..b7ba111 100644
--- a/frontend/lib/i18n/locales/en/translation.json
+++ b/frontend/lib/i18n/locales/en/translation.json
@@ -772,6 +772,7 @@
     "patientNotFound": "I couldn't find a patient with file number {{fileNumber}}.",
     "thinking": "Thinking…",
     "steps": "Steps",
+    "reasoning": "Reasoning",
     "suggestions": {
       "schedule": "Show today's schedule",
       "tasks": "List open tasks",