From 3d9384eff712d57a6581053fe695172ea97c4680 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Wed, 13 May 2026 20:36:22 -0700
Subject: [PATCH] feat(ui): add animated thinking bubble to chat panel to
 indicate ai progress

---
 components/vibn-chat/chat-panel.tsx | 45 +++++++++++++++++++++++++++--
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/components/vibn-chat/chat-panel.tsx b/components/vibn-chat/chat-panel.tsx
index 1ad2041f..c1bc3b44 100644
--- a/components/vibn-chat/chat-panel.tsx
+++ b/components/vibn-chat/chat-panel.tsx
@@ -220,8 +220,49 @@ function thoughtPreview(thoughts: string): string {
 }
 
 function ThinkingBubble({ thoughts }: { thoughts: string }) {
-  // Hide thoughts completely to avoid the "weird paragraph" streaming effect
-  return null;
+  if (!thoughts) return null;
+
+  // Split thoughts into phrases, take the last one as the "current" action
+  const lines = thoughts
+    .split(/[.!?\n]/)
+    .map((l) => l.trim())
+    .filter(Boolean);
+  const currentAction = lines[lines.length - 1];
+
+  if (!currentAction) return null;
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "6px 12px",
+        margin: "4px 0",
+        fontSize: "0.75rem",
+        color: "#8c8580",
+        fontFamily: "var(--font-inter),ui-sans-serif,sans-serif",
+        fontStyle: "italic",
+      }}
+    >
+      <div
+        style={{
+          position: "relative",
+          width: 14,
+          height: 14,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Sparkles
+          style={{ width: 12, height: 12, opacity: 0.7 }}
+          className="animate-pulse"
+        />
+      </div>
+      <span className="animate-pulse">{currentAction}</span>
+    </div>
+  );
 }
 
 function MessageBubble({ msg }: { msg: Message }) {