@assistant-ui/react 0.12.1 → 0.12.5

package/src/client/InMemoryThreadList.ts

@@ -0,0 +1,197 @@
+import { resource, tapState, tapMemo } from "@assistant-ui/tap";
+import {
+  type ClientOutput,
+  tapClientLookup,
+  Derived,
+  attachDefaultPeers,
+  tapClientResource,
+} from "@assistant-ui/store";
+import { withKey } from "@assistant-ui/tap";
+import type { ResourceElement } from "@assistant-ui/tap";
+import type { ThreadState } from "../types/scopes/thread";
+import { Suggestions } from "./Suggestions";
+import { ModelContext } from "./ModelContextClient";
+import { Tools } from "./Tools";
+
+export type InMemoryThreadListProps = {
+  thread: (threadId: string) => ResourceElement<ClientOutput<"thread">>;
+  onSwitchToThread?: (threadId: string) => void;
+  onSwitchToNewThread?: () => void;
+};
+
+type ThreadData = {
+  id: string;
+  title?: string;
+  status: "regular" | "archived";
+};
+
+// ThreadListItem Client
+const ThreadListItemClient = resource(
+  (props: {
+    data: ThreadData;
+    onSwitchTo: () => void;
+    onArchive: () => void;
+    onUnarchive: () => void;
+    onDelete: () => void;
+  }): ClientOutput<"threadListItem"> => {
+    const { data, onSwitchTo, onArchive, onUnarchive, onDelete } = props;
+    const state = tapMemo(
+      () => ({
+        id: data.id,
+        remoteId: undefined,
+        externalId: undefined,
+        title: data.title,
+        status: data.status,
+      }),
+      [data.id, data.title, data.status],
+    );
+
+    return {
+      state,
+      methods: {
+        getState: () => state,
+        switchTo: onSwitchTo,
+        rename: () => {},
+        archive: onArchive,
+        unarchive: onUnarchive,
+        delete: onDelete,
+        generateTitle: () => {},
+        initialize: async () => ({ remoteId: data.id, externalId: undefined }),
+        detach: () => {},
+      },
+    };
+  },
+);
+
+// InMemoryThreadList Client
+export const InMemoryThreadList = resource(
+  (props: InMemoryThreadListProps): ClientOutput<"threads"> => {
+    const {
+      thread: threadFactory,
+      onSwitchToThread,
+      onSwitchToNewThread,
+    } = props;
+
+    const [mainThreadId, setMainThreadId] = tapState("main");
+    const [threads, setThreads] = tapState<readonly ThreadData[]>(() => [
+      { id: "main", title: "Main Thread", status: "regular" },
+    ]);
+
+    const handleSwitchToThread = (threadId: string) => {
+      setMainThreadId(threadId);
+      onSwitchToThread?.(threadId);
+    };
+
+    const handleArchive = (threadId: string) => {
+      setThreads((prev) =>
+        prev.map((t) =>
+          t.id === threadId ? { ...t, status: "archived" as const } : t,
+        ),
+      );
+    };
+
+    const handleUnarchive = (threadId: string) => {
+      setThreads((prev) =>
+        prev.map((t) =>
+          t.id === threadId ? { ...t, status: "regular" as const } : t,
+        ),
+      );
+    };
+
+    const handleDelete = (threadId: string) => {
+      setThreads((prev) => prev.filter((t) => t.id !== threadId));
+      if (mainThreadId === threadId) {
+        const remaining = threads.filter((t) => t.id !== threadId);
+        setMainThreadId(remaining[0]?.id || "main");
+      }
+    };
+
+    const handleSwitchToNewThread = () => {
+      const newId = `thread-${Date.now()}`;
+      setThreads((prev) => [
+        ...prev,
+        { id: newId, title: "New Thread", status: "regular" },
+      ]);
+      setMainThreadId(newId);
+      onSwitchToNewThread?.();
+    };
+
+    const threadListItems = tapClientLookup(
+      () =>
+        threads.map((t) =>
+          withKey(
+            t.id,
+            ThreadListItemClient({
+              data: t,
+              onSwitchTo: () => handleSwitchToThread(t.id),
+              onArchive: () => handleArchive(t.id),
+              onUnarchive: () => handleUnarchive(t.id),
+              onDelete: () => handleDelete(t.id),
+            }),
+          ),
+        ),
+      [threads],
+    );
+
+    // Create the main thread
+    const mainThreadClient = tapClientResource(threadFactory(mainThreadId));
+
+    const state = tapMemo(() => {
+      const regularThreads = threads.filter((t) => t.status === "regular");
+      const archivedThreads = threads.filter((t) => t.status === "archived");
+      const mainThreadState = mainThreadClient.state as ThreadState;
+
+      return {
+        mainThreadId,
+        newThreadId: null,
+        isLoading: false,
+        threadIds: regularThreads.map((t) => t.id),
+        archivedThreadIds: archivedThreads.map((t) => t.id),
+        threadItems: threadListItems.state,
+        main: mainThreadState,
+      };
+    }, [mainThreadId, threads, threadListItems.state, mainThreadClient.state]);
+
+    return {
+      state,
+      methods: {
+        getState: () => state,
+        switchToThread: handleSwitchToThread,
+        switchToNewThread: handleSwitchToNewThread,
+        item: (selector) => {
+          if (selector === "main") {
+            const index = threads.findIndex((t) => t.id === mainThreadId);
+            return threadListItems.get({ index: index === -1 ? 0 : index });
+          }
+          if ("id" in selector) {
+            const index = threads.findIndex((t) => t.id === selector.id);
+            return threadListItems.get({ index });
+          }
+          return threadListItems.get(selector);
+        },
+        thread: () => mainThreadClient.methods,
+      },
+    };
+  },
+);
+
+attachDefaultPeers(InMemoryThreadList, {
+  thread: Derived({
+    source: "threads",
+    query: { type: "main" },
+    get: (aui) => aui.threads().thread("main"),
+  }),
+  threadListItem: Derived({
+    source: "threads",
+    query: { type: "main" },
+    get: (aui) => aui.threads().item("main"),
+  }),
+  composer: Derived({
+    source: "thread",
+    query: {},
+    get: (aui) => aui.threads().thread("main").composer,
+  }),
+  modelContext: ModelContext(),
+  tools: Tools({}),
+  suggestions: Suggestions(),
+});

package/src/client/Suggestions.ts

@@ -0,0 +1,74 @@
+import { resource, tapState, withKey } from "@assistant-ui/tap";
+import { type ClientOutput, tapClientLookup } from "@assistant-ui/store";
+import type { SuggestionsState, SuggestionState } from "../types/scopes";
+
+export type SuggestionConfig =
+  | string
+  | { title: string; label: string; prompt: string };
+
+const SuggestionClient = resource(
+  (state: SuggestionState): ClientOutput<"suggestion"> => {
+    return {
+      state,
+      methods: {
+        getState: () => state,
+      },
+    };
+  },
+);
+
+const SuggestionsResource = resource(
+  (suggestions?: SuggestionConfig[]): ClientOutput<"suggestions"> => {
+    const [state] = tapState<SuggestionsState>(() => {
+      const normalizedSuggestions = (suggestions ?? []).map((s) => {
+        if (typeof s === "string") {
+          return {
+            title: s,
+            label: "",
+            prompt: s,
+          };
+        }
+        return {
+          title: s.title,
+          label: s.label,
+          prompt: s.prompt,
+        };
+      });
+
+      return {
+        suggestions: normalizedSuggestions,
+      };
+    });
+
+    const suggestionClients = tapClientLookup(
+      () =>
+        state.suggestions.map((suggestion, index) =>
+          withKey(index, SuggestionClient(suggestion)),
+        ),
+      [state.suggestions],
+    );
+
+    return {
+      state,
+      methods: {
+        getState: () => state,
+        suggestion: ({ index }: { index: number }) => {
+          return suggestionClients.get({ index });
+        },
+      },
+    };
+  },
+);
+
+export const Suggestions: {
+  (): import("@assistant-ui/tap").ResourceElement<
+    ClientOutput<"suggestions">,
+    undefined
+  >;
+  (
+    suggestions: SuggestionConfig[],
+  ): import("@assistant-ui/tap").ResourceElement<
+    ClientOutput<"suggestions">,
+    SuggestionConfig[]
+  >;
+} = SuggestionsResource as any;

package/src/client/Tools.ts

@@ -1,9 +1,14 @@
 import { resource, tapState, tapEffect, tapCallback } from "@assistant-ui/tap";
-import { tapAssistantClientRef, type ClientOutput } from "@assistant-ui/store";
+import {
+  tapAssistantClientRef,
+  type ClientOutput,
+  attachDefaultPeers,
+} from "@assistant-ui/store";
 import { ToolsState } from "../types/scopes";
 import type { Tool } from "assistant-stream";
 import { type Toolkit } from "../model-context/toolbox";
 import { ToolCallMessagePartComponent } from "../types";
+import { ModelContext } from "./ModelContextClient";
 
 export const Tools = resource(
   ({ toolkit }: { toolkit?: Toolkit }): ClientOutput<"tools"> => {
@@ -86,3 +91,7 @@ export const Tools = resource(
     };
   },
 );
+
+attachDefaultPeers(Tools, {
+  modelContext: ModelContext(),
+});

package/src/client/index.ts

@@ -0,0 +1,12 @@
+export { ModelContext as ModelContextClient } from "./ModelContextClient";
+export { Tools } from "./Tools";
+export { Suggestions, type SuggestionConfig } from "./Suggestions";
+export {
+  ExternalThread,
+  type ExternalThreadProps,
+  type ExternalThreadMessage,
+} from "./ExternalThread";
+export {
+  InMemoryThreadList,
+  type InMemoryThreadListProps,
+} from "./InMemoryThreadList";

package/src/context/providers/SuggestionByIndexProvider.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { type FC, type PropsWithChildren } from "react";
+import { AuiProvider, Derived, useAui } from "@assistant-ui/store";
+
+export type SuggestionByIndexProviderProps = PropsWithChildren<{
+  index: number;
+}>;
+
+export const SuggestionByIndexProvider: FC<SuggestionByIndexProviderProps> = ({
+  index,
+  children,
+}) => {
+  const aui = useAui({
+    suggestion: Derived({
+      source: "suggestions",
+      query: { index },
+      get: (aui) => aui.suggestions().suggestion({ index }),
+    }),
+  });
+
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
+};

package/src/context/providers/index.ts

@@ -4,6 +4,7 @@ export {
   ThreadListItemRuntimeProvider,
 } from "./ThreadListItemProvider";
 export { MessageByIndexProvider } from "./MessageByIndexProvider";
+export { SuggestionByIndexProvider } from "./SuggestionByIndexProvider";
 export { PartByIndexProvider } from "./PartByIndexProvider";
 export {
   MessageAttachmentByIndexProvider,

package/src/devtools/index.ts

@@ -1 +1 @@
-export { DevToolsHooks } from "./DevToolsHooks";
+export { DevToolsHooks, DevToolsProviderApi } from "./DevToolsHooks";

package/src/index.ts

@@ -25,6 +25,7 @@ export * from "./model-context";
 export * from "./primitives";
 export * from "./types";
 export * from "./devtools";
+export * from "./client";
 
 export * as INTERNAL from "./internal";
 export type { ToolExecutionStatus } from "./internal";

package/src/legacy-runtime/AssistantRuntimeProvider.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { FC, memo, PropsWithChildren } from "react";
-import { useAui, AuiProvider } from "@assistant-ui/store";
+import { FC, memo, PropsWithChildren, useEffect } from "react";
+import { useAui, AuiProvider, AssistantClient } from "@assistant-ui/store";
 import { AssistantRuntime } from "./runtime/AssistantRuntime";
 import { AssistantRuntimeCore } from "./runtime-cores/core/AssistantRuntimeCore";
 import { RuntimeAdapter } from "./RuntimeAdapter";
 import { ThreadPrimitiveViewportProvider } from "../context/providers/ThreadViewportProvider";
+import { DevToolsProviderApi } from "../devtools";
 
 export namespace AssistantRuntimeProvider {
   export type Props = PropsWithChildren<{
@@ -13,6 +14,11 @@ export namespace AssistantRuntimeProvider {
      * The runtime to provide to the rest of your app.
      */
     runtime: AssistantRuntime;
+
+    /**
+     * The aui instance to extend. If not provided, a new aui instance will be created.
+     */
+    aui?: AssistantClient;
   }>;
 }
 
@@ -22,10 +28,13 @@ const getRenderComponent = (runtime: AssistantRuntime) => {
 
 export const AssistantRuntimeProviderImpl: FC<
   AssistantRuntimeProvider.Props
-> = ({ children, runtime }) => {
-  const aui = useAui({
-    threads: RuntimeAdapter(runtime),
-  });
+> = ({ children, aui: parent = null, runtime }) => {
+  const aui = useAui({ threads: RuntimeAdapter(runtime) }, { parent: parent });
+
+  useEffect(() => {
+    if (process.env["NODE_ENV"] === "production") return;
+    return DevToolsProviderApi.register(aui);
+  }, [aui]);
 
   const RenderComponent = getRenderComponent(runtime);
 

package/src/legacy-runtime/RuntimeAdapter.ts

@@ -7,7 +7,7 @@ import {
   attachDefaultPeers,
 } from "@assistant-ui/store";
 import { ModelContext } from "../client/ModelContextClient";
-import { Tools } from "../model-context";
+import { Tools, Suggestions } from "../model-context";
 
 export const RuntimeAdapter = resource((runtime: AssistantRuntime) => {
   const clientRef = tapAssistantClientRef();
@@ -29,6 +29,7 @@ export const RuntimeAdapter = resource((runtime: AssistantRuntime) => {
 attachDefaultPeers(RuntimeAdapter, {
   modelContext: ModelContext(),
   tools: Tools({}),
+  suggestions: Suggestions(),
   threadListItem: Derived({
     source: "threads",
     query: { type: "main" },

package/src/legacy-runtime/runtime-cores/assistant-transport/useAssistantTransportRuntime.tsx

@@ -15,6 +15,7 @@ import {
   DataStreamDecoder,
   AssistantTransportDecoder,
   unstable_createInitialMessage as createInitialMessage,
+  toToolsJSONSchema,
 } from "assistant-stream";
 import {
   AssistantTransportOptions,
@@ -28,7 +29,7 @@ import { useCommandQueue } from "./commandQueue";
 import { useRunManager } from "./runManager";
 import { useConvertedState } from "./useConvertedState";
 import { ToolExecutionStatus, useToolInvocations } from "./useToolInvocations";
-import { toAISDKTools, getEnabledTools, createRequestHeaders } from "./utils";
+import { createRequestHeaders } from "./utils";
 import { useRemoteThreadListRuntime } from "../remote-thread-list/useRemoteThreadListRuntime";
 import { InMemoryThreadListAdapter } from "../remote-thread-list/adapter/in-memory";
 import { useAui, useAuiState } from "@assistant-ui/store";
@@ -115,9 +116,7 @@ const useAssistantTransportThreadRuntime = <T,>(
             commands,
             state: agentStateRef.current,
             system: context.system,
-            tools: context.tools
-              ? toAISDKTools(getEnabledTools(context.tools))
-              : undefined,
+            tools: context.tools ? toToolsJSONSchema(context.tools) : undefined,
             threadId,
             ...(parentIdRef.current !== undefined && {
               parentId: parentIdRef.current,

package/src/legacy-runtime/runtime-cores/assistant-transport/utils.ts

@@ -1,42 +1,37 @@
-import { Tool } from "assistant-stream";
-import type { JSONSchema7 } from "json-schema";
-import { z } from "zod";
+import { Tool, toToolsJSONSchema, type ToolJSONSchema } from "assistant-stream";
 
-// Convert tools to AI SDK format
-export const toAISDKTools = (tools: Record<string, Tool>) => {
-  return Object.fromEntries(
-    Object.entries(tools).map(([name, tool]) => [
-      name,
-      {
-        ...(tool.description ? { description: tool.description } : undefined),
-        parameters: (tool.parameters instanceof z.ZodType
-          ? z.toJSONSchema(tool.parameters)
-          : tool.parameters) as JSONSchema7,
-      },
-    ]),
-  );
-};
+/**
+ * @deprecated Use `toToolsJSONSchema` from `assistant-stream` instead.
+ */
+export function toAISDKTools(
+  tools: Record<string, Tool>,
+): Record<string, ToolJSONSchema> {
+  return toToolsJSONSchema(tools, { filter: () => true });
+}
 
-// Filter enabled tools
-export const getEnabledTools = (tools: Record<string, Tool>) => {
+/**
+ * @deprecated Use `toToolsJSONSchema` from `assistant-stream` instead, which includes filtering by default.
+ */
+export function getEnabledTools(
+  tools: Record<string, Tool>,
+): Record<string, Tool> {
   return Object.fromEntries(
     Object.entries(tools).filter(
       ([, tool]) => !tool.disabled && tool.type !== "backend",
     ),
   );
-};
+}
 
-// Create headers for fetch request
-export const createRequestHeaders = async (
+export async function createRequestHeaders(
   headersValue:
     | Record<string, string>
     | Headers
     | (() => Promise<Record<string, string> | Headers>),
-): Promise<Headers> => {
+): Promise<Headers> {
   const resolvedHeaders =
     typeof headersValue === "function" ? await headersValue() : headersValue;
 
   const headers = new Headers(resolvedHeaders);
   headers.set("Content-Type", "application/json");
   return headers;
-};
+}

package/src/legacy-runtime/runtime-cores/external-store/external-message-converter.tsx

@@ -11,6 +11,8 @@ import { getAutoStatus, isAutoStatus } from "./auto-status";
 import { ThreadMessage, ToolCallMessagePart } from "../../../types";
 import { ToolExecutionStatus } from "../assistant-transport/useToolInvocations";
 import { ReadonlyJSONValue } from "assistant-stream/utils";
+import { generateErrorMessageId } from "../../../utils/idUtils";
+import { ThreadAssistantMessage } from "../../../types/AssistantTypes";
 
 export namespace useExternalMessageConverter {
   export type Message =
@@ -262,6 +264,28 @@ const chunkExternalMessages = <T,>(
   return results;
 };
 
+function createErrorAssistantMessage(
+  error: ReadonlyJSONValue,
+): ThreadAssistantMessage {
+  return Object.assign<ThreadAssistantMessage, { [symbolInnerMessage]: [] }>(
+    {
+      id: generateErrorMessageId(),
+      role: "assistant",
+      content: [],
+      status: { type: "incomplete", reason: "error", error },
+      createdAt: new Date(),
+      metadata: {
+        unstable_state: null,
+        unstable_annotations: [],
+        unstable_data: [],
+        custom: {},
+        steps: [],
+      },
+    },
+    { [symbolInnerMessage]: [] },
+  );
+}
+
 export const convertExternalMessages = <T extends WeakKey>(
   messages: T[],
   callback: useExternalMessageConverter.Callback<T>,
@@ -278,14 +302,9 @@ export const convertExternalMessages = <T extends WeakKey>(
 
   const chunks = chunkExternalMessages(callbackResults);
 
-  return chunks.map((message, idx) => {
+  const result = chunks.map((message, idx) => {
     const isLast = idx === chunks.length - 1;
     const joined = joinExternalMessages(message.outputs);
-    const hasSuspendedToolCalls =
-      typeof joined.content === "object" &&
-      joined.content.some(
-        (c) => c.type === "tool-call" && c.result === undefined,
-      );
     const hasPendingToolCalls =
       typeof joined.content === "object" &&
       joined.content.some(
@@ -294,7 +313,7 @@ export const convertExternalMessages = <T extends WeakKey>(
     const autoStatus = getAutoStatus(
       isLast,
       isRunning,
-      hasSuspendedToolCalls,
+      hasPendingToolCalls,
       hasPendingToolCalls,
       isLast ? metadata.error : undefined,
     );
@@ -306,6 +325,15 @@ export const convertExternalMessages = <T extends WeakKey>(
     (newMessage as any)[symbolInnerMessage] = message.inputs;
     return newMessage;
   });
+
+  if (metadata.error) {
+    const lastMessage = result.at(-1);
+    if (!lastMessage || lastMessage.role !== "assistant") {
+      result.push(createErrorAssistantMessage(metadata.error));
+    }
+  }
+
+  return result;
 };
 
 export const useExternalMessageConverter = <T extends WeakKey>({
@@ -411,6 +439,13 @@ export const useExternalMessageConverter = <T extends WeakKey>({
       symbolInnerMessage
     ] = messages;
 
+    if (state.metadata.error) {
+      const lastMessage = threadMessages.at(-1);
+      if (!lastMessage || lastMessage.role !== "assistant") {
+        threadMessages.push(createErrorAssistantMessage(state.metadata.error));
+      }
+    }
+
     return threadMessages;
   }, [state, messages, isRunning, joinStrategy]);
 };

package/src/legacy-runtime/runtime-cores/remote-thread-list/BaseSubscribable.tsx

@@ -31,6 +31,9 @@ export class BaseSubscribable {
       if (errors.length === 1) {
         throw errors[0];
       } else {
+        for (const error of errors) {
+          console.error(error);
+        }
         throw new AggregateError(errors);
       }
     }

package/src/model-context/index.ts

@@ -23,5 +23,7 @@ export type { Toolkit, ToolDefinition } from "./toolbox";
 
 export { Tools } from "../client/Tools";
 
+export { Suggestions, type SuggestionConfig } from "../client/Suggestions";
+
 export * from "./registry";
 export * from "./frame";

package/src/primitives/assistantModal/AssistantModalRoot.tsx

@@ -28,7 +28,7 @@ const useAssistantModalOpenState = ({
     return aui.on("thread.runStart", () => {
       setOpen(true);
     });
-  }, [unstable_openOnRunStart, setOpen, aui]);
+  }, [unstable_openOnRunStart, aui]);
 
   return state;
 };

package/src/primitives/index.ts

@@ -8,6 +8,7 @@ export * as MessagePartPrimitive from "./messagePart";
 export * as ErrorPrimitive from "./error";
 export * as MessagePrimitive from "./message";
 export * as ThreadPrimitive from "./thread";
+export * as SuggestionPrimitive from "./suggestion";
 export * as ThreadListPrimitive from "./threadList";
 export * as ThreadListItemPrimitive from "./threadListItem";
 export * as ThreadListItemMorePrimitive from "./threadListItemMore";