@tangle-network/ui 11.2.2 → 11.2.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.2.3
+
+### Patch Changes
+
+- 7eeed23: Show the animated thinking row immediately after a user submits a message, before the first assistant event arrives.
+
 ## 11.2.2
 
 ### Patch Changes

package/dist/chat.js

@@ -5,7 +5,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-OTZWQJ5W.js";
+} from "./chunk-IH2VRPGZ.js";
 import "./chunk-AZWDI2JG.js";
 import "./chunk-SRAKCVPO.js";
 import "./chunk-4ORVXSMU.js";

package/dist/{chunk-OTZWQJ5W.js → chunk-IH2VRPGZ.js}

@@ -121,17 +121,25 @@ function ThinkingIndicator({ className }) {
     const interval = window.setInterval(() => setElapsed((current) => current + 1), 1e3);
     return () => window.clearInterval(interval);
   }, []);
-  return /* @__PURE__ */ jsxs2("div", { className: cn("flex items-center gap-2 px-3 py-1.5", className), children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex gap-[3px]", children: [
-      /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "0ms" } }),
-      /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "150ms" } }),
-      /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "300ms" } })
-    ] }),
-    elapsed > 3 && /* @__PURE__ */ jsxs2("span", { className: "text-[var(--font-size-xs)] tabular-nums text-muted-foreground", children: [
-      elapsed,
-      "s"
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Agent is thinking",
+      className: cn("flex items-center gap-2 px-3 py-1.5", className),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex gap-[3px]", children: [
+          /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "0ms" } }),
+          /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "150ms" } }),
+          /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "300ms" } })
+        ] }),
+        elapsed > 3 && /* @__PURE__ */ jsxs2("span", { className: "text-[var(--font-size-xs)] tabular-nums text-muted-foreground", children: [
+          elapsed,
+          "s"
+        ] })
+      ]
+    }
+  );
 }
 
 // src/chat/agent-timeline.tsx
@@ -439,7 +447,15 @@ function mapToolPartToTimelineType(part) {
 }
 function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enableOpenUI = true) {
   const items = [];
-  const lastAssistantMessage = [...messages].reverse().find((message) => message.role === "assistant");
+  let latestUserIndex = -1;
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    if (messages[index].role === "user") {
+      latestUserIndex = index;
+      break;
+    }
+  }
+  const responseMessages = latestUserIndex >= 0 ? messages.slice(latestUserIndex + 1) : messages;
+  const lastAssistantMessage = [...responseMessages].reverse().find((message) => message.role === "assistant");
   const toToolCall = (part) => {
     const meta = getToolDisplayMetadata(part);
     const start = part.state.time?.start;
@@ -566,9 +582,9 @@ function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enab
     });
     flushToolBuffer(parts.length);
   }
-  const showThinking = isStreaming && lastAssistantMessage != null && !items.some(
+  const showThinking = isStreaming && latestUserIndex >= 0 && (lastAssistantMessage == null || !items.some(
     (item) => item.kind === "message" && item.role === "assistant" && item.id.startsWith(lastAssistantMessage.id)
-  );
+  ));
   return { items, showThinking };
 }
 var ChatContainer = memo3(

package/dist/index.js

@@ -137,7 +137,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-OTZWQJ5W.js";
+} from "./chunk-IH2VRPGZ.js";
 import {
   useAutoScroll,
   useRunCollapseState,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.2.2",
+  "version": "11.2.3",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/chat/chat-container.test.tsx

@@ -27,6 +27,68 @@ const editPart: ToolPart = {
 const partMap: Record<string, SessionPart[]> = { m1: [editPart] }
 
 describe("ChatContainer timeline tool rendering", () => {
+  it("shows thinking as soon as a submitted user message is streaming", () => {
+    render(
+      <ChatContainer
+        messages={[{ id: "user-1", role: "user" }]}
+        partMap={{
+          "user-1": [{ type: "text", text: "hello" }],
+        }}
+        isStreaming
+        presentation="timeline"
+      />,
+    )
+
+    expect(
+      screen.getByRole("status", { name: "Agent is thinking" }),
+    ).toBeInTheDocument()
+  })
+
+  it("does not let an earlier assistant reply hide the next turn's thinking state", () => {
+    render(
+      <ChatContainer
+        messages={[
+          { id: "user-1", role: "user" },
+          { id: "assistant-1", role: "assistant" },
+          { id: "user-2", role: "user" },
+        ]}
+        partMap={{
+          "user-1": [{ type: "text", text: "first" }],
+          "assistant-1": [{ type: "text", text: "done" }],
+          "user-2": [{ type: "text", text: "second" }],
+        }}
+        isStreaming
+        presentation="timeline"
+      />,
+    )
+
+    expect(
+      screen.getByRole("status", { name: "Agent is thinking" }),
+    ).toBeInTheDocument()
+  })
+
+  it("replaces the generic thinking row when the current reply has text", () => {
+    render(
+      <ChatContainer
+        messages={[
+          { id: "user-1", role: "user" },
+          { id: "assistant-1", role: "assistant" },
+        ]}
+        partMap={{
+          "user-1": [{ type: "text", text: "hello" }],
+          "assistant-1": [{ type: "text", text: "working on it" }],
+        }}
+        isStreaming
+        presentation="timeline"
+      />,
+    )
+
+    expect(
+      screen.queryByRole("status", { name: "Agent is thinking" }),
+    ).not.toBeInTheDocument()
+    expect(screen.getByText("working on it")).toBeInTheDocument()
+  })
+
   it("shows a clean tool detail (the file path), not the raw input JSON", () => {
     render(
       <ChatContainer

package/src/chat/chat-container.tsx

@@ -179,7 +179,18 @@ function buildTimelineItems(
   enableOpenUI = true,
 ): { items: AgentTimelineItem[]; showThinking: boolean } {
   const items: AgentTimelineItem[] = [];
-  const lastAssistantMessage = [...messages].reverse().find((message) => message.role === "assistant");
+  let latestUserIndex = -1;
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    if (messages[index].role === "user") {
+      latestUserIndex = index;
+      break;
+    }
+  }
+  const responseMessages =
+    latestUserIndex >= 0 ? messages.slice(latestUserIndex + 1) : messages;
+  const lastAssistantMessage = [...responseMessages]
+    .reverse()
+    .find((message) => message.role === "assistant");
   const toToolCall = (part: ToolPart) => {
     const meta = getToolDisplayMetadata(part as ToolPart);
     const start = part.state.time?.start;
@@ -346,13 +357,14 @@ function buildTimelineItems(
 
   const showThinking =
     isStreaming &&
-    lastAssistantMessage != null &&
-    !items.some(
-      (item) =>
-        item.kind === "message" &&
-        item.role === "assistant" &&
-        item.id.startsWith(lastAssistantMessage.id),
-    );
+    latestUserIndex >= 0 &&
+    (lastAssistantMessage == null ||
+      !items.some(
+        (item) =>
+          item.kind === "message" &&
+          item.role === "assistant" &&
+          item.id.startsWith(lastAssistantMessage.id),
+      ));
 
   return { items, showThinking };
 }

package/src/chat/thinking-indicator.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { ChatContainer } from './chat-container'
 import { ThinkingIndicator } from './thinking-indicator'
 
 const meta: Meta<typeof ThinkingIndicator> = {
@@ -42,6 +43,25 @@ export const InContext: Story = {
   ),
 }
 
+/**
+ * The production handoff state: the user's message is already visible while
+ * the first assistant event has not arrived yet.
+ */
+export const PendingChatResponse: Story = {
+  render: () => (
+    <div className="h-80 rounded-xl border border-border bg-[var(--bg-root)]">
+      <ChatContainer
+        messages={[{ id: 'user-1', role: 'user' }]}
+        partMap={{
+          'user-1': [{ type: 'text', text: 'Hello — can you inspect this sandbox?' }],
+        }}
+        isStreaming
+        presentation="timeline"
+      />
+    </div>
+  ),
+}
+
 /**
  * Multiple indicators to show staggered animation timing.
  */

package/src/chat/thinking-indicator.tsx

@@ -14,7 +14,11 @@ export function ThinkingIndicator({ className }: ThinkingIndicatorProps) {
   }, []);
 
   return (
-    <div className={cn("flex items-center gap-2 px-3 py-1.5", className)}>
+    <div
+      role="status"
+      aria-label="Agent is thinking"
+      className={cn("flex items-center gap-2 px-3 py-1.5", className)}
+    >
       <div className="flex gap-[3px]">
         <span className="h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "0ms" }} />
         <span className="h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "150ms" }} />