Make the whole thinking experience feel alive

app/src/components/channels/chat-messages.test.ts

@@ -1,9 +1,12 @@
 import { describe, expect, test } from "bun:test";
 import type { Message } from "@ag-ui/core";
 import {
+  latestStreamTail,
   searchableMessageIds,
   shouldShowThinking,
+  toolStepsSinceLastUser,
   toVisibleChatItems,
+  type VisibleChatItem,
 } from "./chat-messages";
 
 const messages: Message[] = [
@@ -159,3 +162,82 @@ describe("visible chat messages", () => {
     ]);
   });
 });
+
+describe("latestStreamTail", () => {
+  const streaming: VisibleChatItem[] = [
+    { kind: "text", id: "user-1", role: "user", text: "Question" },
+    {
+      kind: "text",
+      id: "assistant-1",
+      role: "assistant",
+      text: "## Findings\nThe *third* option is `usually` the safest one to pick here",
+    },
+  ];
+
+  test("quotes the trailing words of a streaming answer, markdown stripped", () => {
+    const tail = latestStreamTail(true, streaming);
+    expect(tail).toStartWith("…");
+    expect(tail).toEndWith("the safest one to pick here");
+    expect(tail).not.toContain("*");
+    expect(tail).not.toContain("`");
+  });
+
+  test("short answers pass through whole, without an ellipsis", () => {
+    expect(
+      latestStreamTail(true, [
+        { kind: "text", id: "a", role: "assistant", text: "On it." },
+      ]),
+    ).toBe("On it.");
+  });
+
+  test("null without a streaming answer to quote", () => {
+    expect(latestStreamTail(false, streaming)).toBeNull();
+    expect(latestStreamTail(true, [])).toBeNull();
+    expect(
+      latestStreamTail(true, [
+        { kind: "text", id: "user-1", role: "user", text: "Question" },
+      ]),
+    ).toBeNull();
+    expect(
+      latestStreamTail(true, [
+        { kind: "text", id: "a", role: "assistant", text: "***" },
+      ]),
+    ).toBeNull();
+  });
+});
+
+describe("toolStepsSinceLastUser", () => {
+  const tool = (id: string, result?: string): VisibleChatItem => ({
+    kind: "tool",
+    id,
+    messageId: `m-${id}`,
+    toolCall: {
+      id,
+      type: "function",
+      function: { name: "computer_click", arguments: "{}" },
+    },
+    ...(result === undefined ? {} : { result }),
+  });
+
+  test("counts only the turn being answered", () => {
+    expect(
+      toolStepsSinceLastUser([
+        { kind: "text", id: "u1", role: "user", text: "First" },
+        tool("t1", "done"),
+        { kind: "text", id: "a1", role: "assistant", text: "Answer" },
+        { kind: "text", id: "u2", role: "user", text: "Second" },
+        tool("t2", "done"),
+        tool("t3"),
+      ]),
+    ).toBe(2);
+  });
+
+  test("zero for a turn that used no tools, or an empty transcript", () => {
+    expect(
+      toolStepsSinceLastUser([
+        { kind: "text", id: "u1", role: "user", text: "Hi" },
+      ]),
+    ).toBe(0);
+    expect(toolStepsSinceLastUser([])).toBe(0);
+  });
+});

app/src/components/channels/chat-messages.ts

@@ -189,6 +189,45 @@ export function shouldShowThinking(
   return lastItem.role === "user";
 }
 
+/**
+ * The trailing words of the answer currently streaming, for the scroll-to-end affordance.
+ *
+ * A person scrolled up mid-turn sees a transcript that stopped moving and a bare arrow button;
+ * whether the Bot is still talking is invisible from there. Feeding the live tail of the streaming
+ * text into that button turns it from "there is more below" into "this is being said right now" —
+ * the conversation stays visibly alive from anywhere in history.
+ *
+ * Null whenever there is no streaming answer to quote, so the button can fall back to its arrow.
+ * Markdown marks are stripped crudely; this is a glimpse, not a rendering.
+ */
+export function latestStreamTail(
+  busy: boolean,
+  items: readonly VisibleChatItem[],
+): string | null {
+  if (!busy) return null;
+  const last = items.at(-1);
+  if (last?.kind !== "text" || last.role !== "assistant") return null;
+  const flat = last.text
+    .replace(/[`*_#|>-]/g, "")
+    .replace(/\s+/g, " ")
+    .trim();
+  if (!flat) return null;
+  return flat.length <= 48 ? flat : `…${flat.slice(-46).trimStart()}`;
+}
+
+/** Tool calls in the turn being (or just) answered: everything after the person last spoke. */
+export function toolStepsSinceLastUser(
+  items: readonly VisibleChatItem[],
+): number {
+  let steps = 0;
+  for (let index = items.length - 1; index >= 0; index -= 1) {
+    const item = items[index];
+    if (!item || (item.kind === "text" && item.role === "user")) break;
+    if (item.kind === "tool") steps += 1;
+  }
+  return steps;
+}
+
 export function searchableMessageIds(
   messages: ReadonlyArray<Readonly<Message>>,
   query: string,