@assistant-ui/react 0.14.16 → 0.14.19

package/src/client/ExternalThread.ts

@@ -13,18 +13,25 @@ import type {
   AppendMessage,
   Attachment,
   CreateAttachment,
+  RespondToToolApprovalOptions,
   ThreadAssistantMessagePart,
   ThreadUserMessagePart,
   ThreadMessage,
   ExternalThreadQueueAdapter,
+  ExternalThreadBranchAdapter,
 } from "@assistant-ui/core";
 import type { QueueItemState } from "@assistant-ui/core/store";
 import type { ComposerSendOptions } from "@assistant-ui/core/store";
+import {
+  getThreadMessageText,
+  resolveToolApprovalResponse,
+} from "@assistant-ui/core/internal";
 import { ModelContext, Suggestions } from "@assistant-ui/core/store";
 import { Tools, DataRenderers } from "@assistant-ui/core/react";
 import { SingleThreadList } from "./SingleThreadList";
 
 const EMPTY_QUEUE_ITEMS: readonly QueueItemState[] = [];
+const EMPTY_BRANCH_IDS: readonly string[] = [];
 
 export type ExternalThreadMessage = ThreadMessage & {
   id: string;
@@ -51,6 +58,10 @@ export type ExternalThreadProps = {
   onCancel?: () => void;
   /** Queue adapter for runtimes that support message queuing and steering. */
   queue?: ExternalThreadQueueAdapter;
+  /** Branch adapter for runtimes that track sibling variants of messages. */
+  branches?: ExternalThreadBranchAdapter;
+  /** Callback for tool approval decisions. Absent: responding to an approval throws a capability error. */
+  onRespondToToolApproval?: (options: RespondToToolApprovalOptions) => void;
 };
 
 type MessageClientProps = {
@@ -59,38 +70,42 @@ type MessageClientProps = {
   onEdit?: (message: AppendMessage) => void;
   onReload?: () => void;
   queue?: ExternalThreadQueueAdapter | undefined;
+  branches?: ExternalThreadBranchAdapter | undefined;
+  onRespondToToolApproval?:
+    | ((options: RespondToToolApprovalOptions) => void)
+    | undefined;
 };
 
 // Message Client - minimal implementation
-const MessageClient = resource(function MessageClient({
+const useMessageClient = ({
   message,
   index,
   onEdit,
   onReload,
   queue,
-}: MessageClientProps): ClientOutput<"message"> {
+  branches,
+  onRespondToToolApproval,
+}: MessageClientProps): ClientOutput<"message"> => {
   const [isCopied, setIsCopied] = useState(false);
   const [isHovering, setIsHovering] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
 
   const partClients = useClientLookup(
-    () =>
-      message.content.map((part, idx) => withKey(idx, PartResource({ part }))),
-    [message.content],
+    message.content.map((part, idx) =>
+      withKey(idx, PartResource({ part, onRespondToToolApproval })),
+    ),
   );
 
   const attachmentClients = useClientLookup(
-    () =>
-      (message.attachments ?? []).map((attachment) =>
-        withKey(
-          attachment.id,
-          AttachmentResource({
-            attachment,
-            onRemove: () => {},
-          }),
-        ),
+    (message.attachments ?? []).map((attachment) =>
+      withKey(
+        attachment.id,
+        AttachmentResource({
+          attachment,
+          onRemove: () => {},
+        }),
       ),
-    [message.attachments],
+    ),
   );
 
   const handleBeginEdit = () => {
@@ -124,14 +139,19 @@ const MessageClient = resource(function MessageClient({
     }),
   );
 
+  const branchIds = branches?.getBranches(message.id) ?? EMPTY_BRANCH_IDS;
+  const branchIndex = branchIds.indexOf(message.id);
+  const branchNumber = branchIndex === -1 ? 1 : branchIndex + 1;
+  const branchCount = branchIndex === -1 ? 1 : branchIds.length;
+
   const state = useMemo(() => {
     return {
       ...message,
       attachments: message.attachments ?? [],
       parentId: null,
       isLast: false, // Will be set by thread
-      branchNumber: 1,
-      branchCount: 1,
+      branchNumber,
+      branchCount,
       speech: undefined,
       parts: partClients.state,
       isCopied,
@@ -146,20 +166,35 @@ const MessageClient = resource(function MessageClient({
     index,
     composerClient.state,
     partClients.state,
+    branchNumber,
+    branchCount,
   ]);
 
   return {
     getState: () => state,
     composer: () => composerClient.methods,
+    delete: () => {},
     reload: () => {
       onReload?.();
     },
     speak: () => {},
     stopSpeaking: () => {},
     submitFeedback: () => {},
-    switchToBranch: () => {},
-    getCopyText: () =>
-      message.content.map((c) => ("text" in c ? c.text : "")).join(""),
+    switchToBranch: ({ position, branchId }) => {
+      if (!branches) return;
+      const target =
+        branchId ??
+        (branchIndex === -1
+          ? undefined
+          : position === "previous"
+            ? branchIds[branchIndex - 1]
+            : position === "next"
+              ? branchIds[branchIndex + 1]
+              : undefined);
+      if (target !== undefined && target !== message.id)
+        branches.switchToBranch(target);
+    },
+    getCopyText: () => getThreadMessageText(message),
     part: (selector) => {
       if ("index" in selector) {
         return partClients.get(selector);
@@ -178,16 +213,22 @@ const MessageClient = resource(function MessageClient({
     setIsCopied,
     setIsHovering,
   };
-});
+};
+
+const MessageClient = resource(useMessageClient);
 
 type PartResourceProps = {
   part: ThreadAssistantMessagePart | ThreadUserMessagePart;
+  onRespondToToolApproval?:
+    | ((options: RespondToToolApprovalOptions) => void)
+    | undefined;
 };
 
 // Part Client - minimal implementation
-const PartResource = resource(function PartResource({
+const usePartResource = ({
   part,
-}: PartResourceProps): ClientOutput<"part"> {
+  onRespondToToolApproval,
+}: PartResourceProps): ClientOutput<"part"> => {
   const state = useMemo(
     () => ({
       ...part,
@@ -200,9 +241,30 @@ const PartResource = resource(function PartResource({
     getState: () => state,
     addToolResult: () => {},
     resumeToolCall: () => {},
-    respondToToolApproval: () => {},
+    respondToToolApproval: (response) => {
+      if (!onRespondToToolApproval)
+        throw new Error("Runtime does not support tool approvals.");
+
+      if (part.type !== "tool-call")
+        throw new Error(
+          "Tried to respond to tool approval on non-tool message part",
+        );
+
+      if (
+        !part.approval ||
+        part.approval.approved !== undefined ||
+        part.approval.resolution !== undefined
+      )
+        throw new Error("Tool call has no pending approval");
+
+      onRespondToToolApproval(
+        resolveToolApprovalResponse(part.approval, response),
+      );
+    },
   };
-});
+};
+
+const PartResource = resource(usePartResource);
 
 type AttachmentResourceProps = {
   attachment: Attachment;
@@ -210,17 +272,19 @@ type AttachmentResourceProps = {
 };
 
 // Attachment Client - minimal implementation
-const AttachmentResource = resource(function AttachmentResource({
+const useAttachmentResource = ({
   attachment,
   onRemove,
-}: AttachmentResourceProps): ClientOutput<"attachment"> {
+}: AttachmentResourceProps): ClientOutput<"attachment"> => {
   return {
     getState: () => attachment,
     remove: async () => {
       onRemove?.();
     },
   };
-});
+};
+
+const AttachmentResource = resource(useAttachmentResource);
 
 type ComposerClientResourceProps = {
   type: "thread" | "edit";
@@ -234,7 +298,7 @@ type ComposerClientResourceProps = {
   queue?: ExternalThreadQueueAdapter | undefined;
 };
 
-const QueueItemClient = resource(function QueueItemClient({
+const useQueueItemClient = ({
   item,
   onSteer,
   onRemove,
@@ -242,16 +306,18 @@ const QueueItemClient = resource(function QueueItemClient({
   item: QueueItemState;
   onSteer: () => void;
   onRemove: () => void;
-}): ClientOutput<"queueItem"> {
+}): ClientOutput<"queueItem"> => {
   return {
     getState: () => item,
     steer: onSteer,
     remove: onRemove,
   };
-});
+};
+
+const QueueItemClient = resource(useQueueItemClient);
 
 // Composer Client - minimal implementation
-const ComposerClientResource = resource(function ComposerClientResource({
+const useComposerClientResource = ({
   type,
   isEditing,
   canCancel,
@@ -261,7 +327,7 @@ const ComposerClientResource = resource(function ComposerClientResource({
   onSend,
   message,
   queue,
-}: ComposerClientResourceProps): ClientOutput<"composer"> {
+}: ComposerClientResourceProps): ClientOutput<"composer"> => {
   const [text, setText] = useState("");
   const [role, setRole] = useState<"user" | "assistant" | "system">("user");
   const [runConfig, setRunConfig] = useState<Record<string, unknown>>({});
@@ -292,35 +358,31 @@ const ComposerClientResource = resource(function ComposerClientResource({
   }, [isEditing]);
 
   const attachmentClients = useClientLookup(
-    () =>
-      attachments.map((attachment, idx) =>
-        withKey(
-          attachment.id,
-          AttachmentResource({
-            attachment,
-            onRemove: () => {
-              setAttachments(attachments.filter((_, i) => i !== idx));
-            },
-          }),
-        ),
+    attachments.map((attachment, idx) =>
+      withKey(
+        attachment.id,
+        AttachmentResource({
+          attachment,
+          onRemove: () => {
+            setAttachments(attachments.filter((_, i) => i !== idx));
+          },
+        }),
       ),
-    [attachments],
+    ),
   );
 
   const queueItems = queue?.items ?? EMPTY_QUEUE_ITEMS;
   const queueItemClients = useClientLookup(
-    () =>
-      queueItems.map((item) =>
-        withKey(
-          item.id,
-          QueueItemClient({
-            item,
-            onSteer: () => queue?.steer(item.id),
-            onRemove: () => queue?.remove(item.id),
-          }),
-        ),
+    queueItems.map((item) =>
+      withKey(
+        item.id,
+        QueueItemClient({
+          item,
+          onSteer: () => queue?.steer(item.id),
+          onRemove: () => queue?.remove(item.id),
+        }),
       ),
-    [queueItems],
+    ),
   );
 
   const state = useMemo(() => {
@@ -436,10 +498,12 @@ const ComposerClientResource = resource(function ComposerClientResource({
       return queueItemClients.get(selector);
     },
   };
-});
+};
+
+const ComposerClientResource = resource(useComposerClientResource);
 
 // External Thread Client
-export const ExternalThread = resource(function ExternalThread({
+const useExternalThread = ({
   messages,
   isRunning = false,
   isSendDisabled = false,
@@ -449,7 +513,9 @@ export const ExternalThread = resource(function ExternalThread({
   onStartRun,
   onCancel,
   queue,
-}: ExternalThreadProps): ClientOutput<"thread"> {
+  branches,
+  onRespondToToolApproval,
+}: ExternalThreadProps): ClientOutput<"thread"> => {
   const handleReload = (messageId: string) => {
     const messageIndex = messages.findIndex((m) => m.id === messageId);
     if (messageIndex === -1) return;
@@ -460,18 +526,18 @@ export const ExternalThread = resource(function ExternalThread({
   };
 
   const messageClients = useClientLookup(
-    () =>
-      messages.map((msg, index) => {
-        const props: MessageClientProps = {
-          message: msg,
-          index,
-          onReload: () => handleReload(msg.id),
-          queue,
-        };
-        if (onEdit) props.onEdit = onEdit;
-        return withKey(msg.id, MessageClient(props));
-      }),
-    [messages, onEdit, queue],
+    messages.map((msg, index) => {
+      const props: MessageClientProps = {
+        message: msg,
+        index,
+        onReload: () => handleReload(msg.id),
+        queue,
+        branches,
+        onRespondToToolApproval,
+      };
+      if (onEdit) props.onEdit = onEdit;
+      return withKey(msg.id, MessageClient(props));
+    }),
   );
 
   const handleCancelRun = () => {
@@ -496,6 +562,7 @@ export const ExternalThread = resource(function ExternalThread({
   );
 
   const hasQueue = !!queue;
+  const hasBranches = !!branches;
   const state = useMemo(() => {
     const messageStates = messageClients.state.map((s, idx, arr) => ({
       ...s,
@@ -509,13 +576,14 @@ export const ExternalThread = resource(function ExternalThread({
       isRunning,
       capabilities: {
         edit: false,
+        delete: false,
         reload: false,
         cancel: isRunning,
         speech: false,
         attachments: false,
         feedback: false,
         voice: false,
-        switchToBranch: false,
+        switchToBranch: hasBranches,
         switchBranchDuringRun: false,
         unstable_copy: false,
         dictation: false,
@@ -533,6 +601,7 @@ export const ExternalThread = resource(function ExternalThread({
     messages,
     isRunning,
     hasQueue,
+    hasBranches,
     messageClients.state,
     composerClient.state,
   ]);
@@ -570,6 +639,7 @@ export const ExternalThread = resource(function ExternalThread({
         onNew?.(appendMessage);
       }
     },
+    deleteMessage: () => {},
     startRun: () => {
       onStartRun?.();
     },
@@ -593,9 +663,11 @@ export const ExternalThread = resource(function ExternalThread({
     muteVoice: () => {},
     unmuteVoice: () => {},
   };
-});
+};
+
+export const ExternalThread = resource(useExternalThread);
 
-attachTransformScopes(ExternalThread, (scopes, parent) => {
+attachTransformScopes(useExternalThread, (scopes, parent) => {
   if (!scopes.threads && parent.threads.source === null) {
     const threadElement = scopes.thread as ClientElement<"thread">;
     scopes.threads = SingleThreadList({ thread: threadElement });

package/src/client/InMemoryThreadList.ts

@@ -27,14 +27,14 @@ type ThreadData = {
 };
 
 // ThreadListItem Client
-const ThreadListItemClient = resource(function ThreadListItemClient(props: {
+const useThreadListItemClient = (props: {
   data: ThreadData;
   onSwitchTo: () => void;
   onUpdateCustom: (custom: Record<string, unknown> | undefined) => void;
   onArchive: () => void;
   onUnarchive: () => void;
   onDelete: () => void;
-}): ClientOutput<"threadListItem"> {
+}): ClientOutput<"threadListItem"> => {
   const { data, onSwitchTo, onUpdateCustom, onArchive, onUnarchive, onDelete } =
     props;
   const state = useMemo(
@@ -61,12 +61,14 @@ const ThreadListItemClient = resource(function ThreadListItemClient(props: {
     initialize: async () => ({ remoteId: data.id, externalId: undefined }),
     detach: () => {},
   };
-});
+};
+
+const ThreadListItemClient = resource(useThreadListItemClient);
 
 // InMemoryThreadList Client
-export const InMemoryThreadList = resource(function InMemoryThreadList(
+const useInMemoryThreadList = (
   props: InMemoryThreadListProps,
-): ClientOutput<"threads"> {
+): ClientOutput<"threads"> => {
   const {
     thread: threadFactory,
     onSwitchToThread,
@@ -127,21 +129,19 @@ export const InMemoryThreadList = resource(function InMemoryThreadList(
   };
 
   const threadListItems = useClientLookup(
-    () =>
-      threads.map((t) =>
-        withKey(
-          t.id,
-          ThreadListItemClient({
-            data: t,
-            onSwitchTo: () => handleSwitchToThread(t.id),
-            onUpdateCustom: (custom) => handleUpdateCustom(t.id, custom),
-            onArchive: () => handleArchive(t.id),
-            onUnarchive: () => handleUnarchive(t.id),
-            onDelete: () => handleDelete(t.id),
-          }),
-        ),
+    threads.map((t) =>
+      withKey(
+        t.id,
+        ThreadListItemClient({
+          data: t,
+          onSwitchTo: () => handleSwitchToThread(t.id),
+          onUpdateCustom: (custom) => handleUpdateCustom(t.id, custom),
+          onArchive: () => handleArchive(t.id),
+          onUnarchive: () => handleUnarchive(t.id),
+          onDelete: () => handleDelete(t.id),
+        }),
       ),
-    [threads],
+    ),
   );
 
   // Create the main thread
@@ -184,9 +184,11 @@ export const InMemoryThreadList = resource(function InMemoryThreadList(
     },
     thread: () => mainThreadClient.methods,
   };
-});
+};
+
+export const InMemoryThreadList = resource(useInMemoryThreadList);
 
-attachTransformScopes(InMemoryThreadList, (scopes, parent) => {
+attachTransformScopes(useInMemoryThreadList, (scopes, parent) => {
   scopes.thread ??= Derived({
     source: "threads",
     query: { type: "main" },

package/src/client/SingleThreadList.ts

@@ -9,31 +9,31 @@ import {
 const RESOLVED_PROMISE = Promise.resolve();
 const THREAD_ID = "default";
 
-const SingleThreadListItem = resource(
-  function SingleThreadListItem(): ClientOutput<"threadListItem"> {
-    const [custom, setCustom] = useState<Record<string, unknown> | undefined>();
+const useSingleThreadListItem = (): ClientOutput<"threadListItem"> => {
+  const [custom, setCustom] = useState<Record<string, unknown> | undefined>();
 
-    return {
-      getState: () => ({
-        id: THREAD_ID,
-        remoteId: undefined,
-        externalId: undefined,
-        title: undefined,
-        status: "regular",
-        custom,
-      }),
-      switchTo: () => {},
-      rename: () => {},
-      updateCustom: setCustom,
-      archive: () => {},
-      unarchive: () => {},
-      delete: () => {},
-      generateTitle: () => {},
-      initialize: async () => ({ remoteId: THREAD_ID, externalId: undefined }),
-      detach: () => {},
-    };
-  },
-);
+  return {
+    getState: () => ({
+      id: THREAD_ID,
+      remoteId: undefined,
+      externalId: undefined,
+      title: undefined,
+      status: "regular",
+      custom,
+    }),
+    switchTo: () => {},
+    rename: () => {},
+    updateCustom: setCustom,
+    archive: () => {},
+    unarchive: () => {},
+    delete: () => {},
+    generateTitle: () => {},
+    initialize: async () => ({ remoteId: THREAD_ID, externalId: undefined }),
+    detach: () => {},
+  };
+};
+
+const SingleThreadListItem = resource(useSingleThreadListItem);
 
 type SingleThreadListProps = {
   thread: ClientElement<"thread">;
@@ -44,9 +44,9 @@ type SingleThreadListProps = {
  * Automatically provided by ExternalThread when no threads scope exists.
  * Mounts the provided thread resource element.
  */
-export const SingleThreadList = resource(function SingleThreadList({
+const useSingleThreadList = ({
   thread,
-}: SingleThreadListProps): ClientOutput<"threads"> {
+}: SingleThreadListProps): ClientOutput<"threads"> => {
   const itemClient = useClientResource(SingleThreadListItem());
   const threadClient = useClientResource(thread);
 
@@ -105,4 +105,6 @@ export const SingleThreadList = resource(function SingleThreadList({
       return threadClient.methods;
     },
   };
-});
+};
+
+export const SingleThreadList = resource(useSingleThreadList);

package/src/hooks/useToolCallElapsed.ts

@@ -0,0 +1,52 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+/**
+ * Hook that returns the elapsed wall-clock time of the current tool call in
+ * milliseconds, ticking once per second while the call runs.
+ *
+ * Reads `part.timing`. Returns `undefined` when the part is not a tool call,
+ * carries no timing, ended without a recorded completion (the duration is
+ * unknown), or when no message part scope is available (so kit components
+ * stay renderable standalone, e.g. in docs previews).
+ *
+ * @example
+ * ```tsx
+ * function ToolDuration() {
+ *   const elapsedMs = useToolCallElapsed();
+ *   if (elapsedMs === undefined) return null;
+ *   return <span>{(elapsedMs / 1000).toFixed(1)}s</span>;
+ * }
+ * ```
+ */
+export const useToolCallElapsed = (): number | undefined => {
+  const aui = useAui();
+  const hasPart = aui.part.source !== null;
+  const timing = useAuiState((s) =>
+    hasPart && s.part.type === "tool-call" ? s.part.timing : undefined,
+  );
+  const partRunning = useAuiState(
+    (s) =>
+      hasPart &&
+      s.part.type === "tool-call" &&
+      s.part.status.type === "running",
+  );
+  const running =
+    timing !== undefined && timing.completedAt === undefined && partRunning;
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (!running) return undefined;
+    setNow(Date.now());
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [running]);
+
+  if (timing === undefined) return undefined;
+  if (timing.completedAt !== undefined)
+    return Math.max(0, timing.completedAt - timing.startedAt);
+  if (!running) return undefined;
+  return Math.max(0, now - timing.startedAt);
+};