From 599033bef1f9ee453dd1ccb65e56a2fe06c9f447 Mon Sep 17 00:00:00 2001
From: david <david.cejtlin@hal8.io>
Date: Mon, 8 Jun 2026 18:05:27 +0200
Subject: [PATCH] =?UTF-8?q?feat(chat):=20animated=20"Thinking=E2=80=A6"=20?=
 =?UTF-8?q?placeholder=20while=20awaiting=20first=20token?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the static "…" in the streaming bubble with a "Thinking" label plus
three staggered bouncing dots, shown until the model's first token streams in.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 buyer/src/ui/components/ChatForm.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/buyer/src/ui/components/ChatForm.tsx b/buyer/src/ui/components/ChatForm.tsx
index e094dea..ab20996 100644
--- a/buyer/src/ui/components/ChatForm.tsx
+++ b/buyer/src/ui/components/ChatForm.tsx
@@ -102,6 +102,25 @@ async function streamChat(
   }
 }
 
+/** Animated "Thinking …" placeholder shown while waiting for the model's
+ * first token (the assistant bubble exists but no content has streamed yet). */
+function ThinkingDots(): JSX.Element {
+  return (
+    <span className="inline-flex items-center gap-1 text-gray-500" data-testid="chat-thinking">
+      Thinking
+      <span className="inline-flex items-end gap-0.5 pb-0.5">
+        {[0, 150, 300].map((d) => (
+          <span
+            key={d}
+            className="h-1.5 w-1.5 animate-bounce rounded-full bg-gray-400"
+            style={{ animationDelay: `${d}ms` }}
+          />
+        ))}
+      </span>
+    </span>
+  );
+}
+
 export default function ChatForm({ advertRef, payment_lovelace }: ChatFormProps = {}): JSX.Element {
   const isPaid = advertRef !== undefined && payment_lovelace !== undefined;
   const advertRefStr = advertRef ? `${advertRef.txHash}#${advertRef.index}` : null;
@@ -301,7 +320,7 @@ export default function ChatForm({ advertRef, payment_lovelace }: ChatFormProps
             {streaming !== null && (
               <div className="text-left">
                 <span className="inline-block max-w-[85%] whitespace-pre-wrap rounded bg-gray-100 px-3 py-2 text-sm text-gray-900">
-                  {streaming.length > 0 ? streaming : "…"}
+                  {streaming.length > 0 ? streaming : <ThinkingDots />}
                 </span>
               </div>
             )}