@ulearning/ai-generative-frame 0.0.0-stage → 1.0.0-next.0

package/src/assistant-ui/toolkit.tsx

@@ -0,0 +1,747 @@
+import {
+  useAssistantInstructions,
+  useAui,
+  useAuiState,
+  useToolArgsStatus,
+  type Toolkit,
+  type ToolCallMessagePartProps,
+} from "@ulearning/ai-sdk";
+import {
+  computed,
+  defineComponent,
+  h,
+  onDeactivated,
+  onScopeDispose,
+  shallowRef,
+  toValue,
+  watch,
+  watchEffect,
+  type Component,
+  type MaybeRefOrGetter,
+} from "vue";
+import { useIsomorphicLayoutEffect } from "@ulearning/ai-store/internal";
+import { previewWidget, type PreviewOptions } from "../preview";
+import type { ConsoleEntry, WidgetError } from "../protocol";
+import { buildRepairFeedback } from "../repair/repair";
+import { useThemeTokens } from "../vue/useThemeTokens";
+import { syncWidgetCode } from "../vue/sync";
+import { useWidget, type UseWidgetOptions } from "../vue/useWidget";
+import type { ThemeTokenSources } from "../theme";
+import { createWidgetRegistry, type WidgetRegistry } from "../tools/registry";
+import {
+  buildWidgetInstructions,
+  createWidgetTools,
+  type CreateWidgetToolsOptions,
+  type EditWidgetInput,
+  type PreviewWidgetInput,
+  type ShowWidgetInput,
+  type WidgetInstructionsOptions,
+  type WidgetTools,
+} from "../tools/tools";
+import type { AnyTool, ToolDefinition } from "../tools/define";
+import {
+  hasLaterToolCallInMessage,
+  type MessageLike,
+  type ToolCall,
+} from "./tool-calls";
+import { toolkitEntry } from "./entry";
+import type { ToolkitDisplay, WidgetToolkitExtension } from "./extension";
+import { resolveWidgetCode, resolveWidgetOrigin } from "./history";
+import {
+  frameContext,
+  savedContext,
+  type ModelContextSource,
+  type SharedContext,
+} from "./modelContext";
+import { createSnapshotSaver } from "./snapshotSaver";
+import { useSharedContext } from "./useSharedContext";
+
+/**
+ * Where theme tokens come from in an assistant-ui app: shadcn/ui variables
+ * first, because Tailwind v4 aliases `--color-accent` to shadcn's muted
+ * `--accent` rather than the primary color.
+ */
+export const ASSISTANT_UI_TOKEN_SOURCES: ThemeTokenSources = {
+  "--color-background": ["--background"],
+  "--color-surface": ["--card", "--background"],
+  "--color-surface-muted": ["--muted", "--secondary"],
+  "--color-text": ["--foreground"],
+  "--color-text-muted": ["--muted-foreground"],
+  "--color-text-subtle": ["--muted-foreground"],
+  "--color-border": ["--border"],
+  "--color-border-strong": ["--input", "--border"],
+  "--color-accent": ["--primary"],
+  "--color-accent-text": ["--primary-foreground"],
+  "--color-danger": ["--destructive"],
+  "--color-success": ["--aui-success", "--color-success"],
+  "--color-warning": ["--aui-warning", "--color-warning"],
+  "--color-info": ["--color-info"],
+};
+
+/** The app's assistant-ui (shadcn/ui) theme as widget tokens, kept in sync. */
+export function useAssistantUiThemeTokens(element?: Element | null) {
+  return useThemeTokens(element, ASSISTANT_UI_TOKEN_SOURCES);
+}
+
+export type WidgetToolkitOptions = Omit<
+  CreateWidgetToolsOptions,
+  "registry"
+> & {
+  registry?: WidgetRegistry;
+  /**
+   * `frontend` (default): the tools execute in the browser and the server
+   * forwards their schemas (`frontendTools` from `@ulearning/ai-sdk-adapter`).
+   * `backend`: the server executes `createWidgetTools()` and the toolkit
+   * only renders.
+   */
+  execution?: "frontend" | "backend";
+  /** Options for every widget frame (csp, product, maxHeight, handlers, …). */
+  widget?: Omit<UseWidgetOptions, "tokens" | "initialState">;
+  /** Spec mode: `createSpecToolkit(catalog, { components })` from `generative-frame/spec/assistant-ui`. */
+  spec?: WidgetToolkitExtension;
+  /** More tools for the model, such as data lookups. They execute like the widget tools and render nothing in the thread. */
+  extraTools?: Record<string, AnyTool>;
+  /** Where the theme is read from. Defaults to the document root. */
+  themeElement?: Element | null;
+  /** How the widget tools are presented relative to the reasoning trace. Defaults to `standalone`. */
+  display?: ToolkitDisplay;
+  /**
+   * With frontend execution, `show_widget` and `edit_widget` wait for the
+   * frame to finish rendering and return its errors as `render`. `false`
+   * returns as soon as the code is stored.
+   */
+  renderReport?: RenderReportOptions | false;
+  /** Keep the PNG in `preview_widget` results. Defaults to false. */
+  previewScreenshot?: boolean;
+  /**
+   * The storage id of a widget's frame, from the thread's persisted id and
+   * the `toolCallId` of the `show_widget` call that created it, so a widget
+   * keeps its localStorage across reloads and edits. Defaults to
+   * `<remoteId>:<toolCallId>`, or `aui:<toolCallId>` while the thread has no
+   * remote id; `false` gives every frame a fresh origin. Derive it from host
+   * data only, never from tool arguments the model wrote.
+   */
+  widgetId?:
+    | false
+    | ((call: { toolCallId: string; threadId: string | undefined }) => string);
+};
+
+export type RenderReportOptions = {
+  /** How long a tool result waits for the frame. Defaults to 10000 ms. */
+  timeoutMs?: number;
+  /** Wait after the code ends so late script errors are caught. Defaults to 300 ms. */
+  settleMs?: number;
+};
+
+/** How a widget rendered in the thread, attached to tool results as `render`. */
+export type WidgetRenderReport =
+  | {
+      status: "rendered";
+      ok: boolean;
+      blank: boolean;
+      height: number;
+      errors: WidgetError[];
+      /** Console warnings and errors, most recent last. */
+      console: ConsoleEntry[];
+      feedback: string;
+    }
+  | { status: "timeout"; feedback: string };
+
+export type WidgetToolkit = {
+  /** Pass to `Tools({ toolkit })`, or spread into your own toolkit. */
+  toolkit: Toolkit;
+  /** The tool definitions behind the toolkit, for instructions or the server. */
+  tools: WidgetTools & Record<string, AnyTool>;
+  /** Latest code per widget title. */
+  registry: WidgetRegistry;
+};
+
+type ShowArgs = Partial<ShowWidgetInput>;
+type EditArgs = Partial<EditWidgetInput>;
+
+const REPORT_BACKLOG = 50;
+/** A later show takes over once it has code to show; a later edit only once its arguments are settled and its edits apply, so the widget stays while a show has no code or an edit streams or fails. */
+const takesOverWidget = (messages: readonly MessageLike[], call: ToolCall) =>
+  (call.name === "show_widget" &&
+    typeof call.args["widget_code"] === "string" &&
+    call.args["widget_code"].trim() !== "") ||
+  (call.name === "edit_widget" &&
+    call.settled &&
+    resolveWidgetCode(messages, call.id) !== undefined);
+
+/** Hands render reports from the thread's widgets to the tool calls waiting for them. */
+function createRenderReports() {
+  const early = new Map<string, WidgetRenderReport>();
+  const waiters = new Map<string, (report: WidgetRenderReport) => void>();
+  return {
+    report(toolCallId: string, report: WidgetRenderReport) {
+      const waiter = waiters.get(toolCallId);
+      if (waiter) {
+        waiters.delete(toolCallId);
+        waiter(report);
+        return;
+      }
+      early.set(toolCallId, report);
+      // Calls rendered from history never execute, so their reports are dropped.
+      if (early.size > REPORT_BACKLOG) {
+        early.delete(early.keys().next().value as string);
+      }
+    },
+    wait(
+      toolCallId: string,
+      timeoutMs: number,
+      signal?: AbortSignal,
+    ): Promise<WidgetRenderReport> {
+      const ready = early.get(toolCallId);
+      if (ready) {
+        early.delete(toolCallId);
+        return Promise.resolve(ready);
+      }
+      return new Promise((resolve) => {
+        const finish = (report: WidgetRenderReport) => {
+          clearTimeout(timer);
+          signal?.removeEventListener("abort", onAbort);
+          waiters.delete(toolCallId);
+          resolve(report);
+        };
+        const timedOut = () =>
+          finish({
+            status: "timeout",
+            feedback: `The widget had not finished rendering after ${timeoutMs} ms, so no render errors are known.`,
+          });
+        const onAbort = timedOut;
+        const timer = setTimeout(timedOut, timeoutMs);
+        signal?.addEventListener("abort", onAbort, { once: true });
+        waiters.set(toolCallId, finish);
+      });
+    },
+  };
+}
+
+const visuallyHidden = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+} as const;
+
+const previewFrameOptions = (
+  widget: WidgetToolkitOptions["widget"],
+): PreviewOptions => ({
+  ...(widget?.product !== undefined ? { product: widget.product } : {}),
+  ...(widget?.frame !== undefined ? { frame: widget.frame } : {}),
+  ...(widget?.unsafeShimDomain !== undefined
+    ? { unsafeShimDomain: widget.unsafeShimDomain }
+    : {}),
+  ...(widget?.opaqueOrigin !== undefined
+    ? { opaqueOrigin: widget.opaqueOrigin }
+    : {}),
+});
+
+function savedWidgetState(
+  log: ToolCallMessagePartProps<ShowArgs>["unstable_interactions"],
+  toolCallId: string,
+): unknown {
+  const entries = log?.entries ?? [];
+  for (let index = entries.length - 1; index >= 0; index--) {
+    const { type, payload } = entries[index]!;
+    if (
+      type === "action" &&
+      payload["type"] === "widgetState" &&
+      payload["toolCallId"] === toolCallId
+    ) {
+      return payload["state"] ?? null;
+    }
+  }
+  return null;
+}
+
+function useWidgetModelContext(source: ModelContextSource) {
+  const aui = useAui();
+  useIsomorphicLayoutEffect(
+    () =>
+      aui.modelContext.register({
+        getModelContext: () => {
+          const system = source.read();
+          return system ? { system } : {};
+        },
+        subscribe: source.subscribe,
+      }),
+    [],
+  );
+}
+
+/**
+ * Renders `show_widget`, `edit_widget`, and `render_spec` tool calls in an
+ * assistant-ui thread: widget code streams into a frame from the partial
+ * tool arguments, `sendPrompt` adds its text to the thread composer, and the
+ * frame follows the app's theme. With `execution: "frontend"` the tools run
+ * in the browser too, so the server only forwards their schemas.
+ */
+export function createWidgetToolkit(
+  options: WidgetToolkitOptions = {},
+): WidgetToolkit {
+  const registry = options.registry ?? createWidgetRegistry();
+  const tools: WidgetTools & Record<string, AnyTool> = createWidgetTools({
+    ...options,
+    guidance: {
+      ...options.guidance,
+      hostApi: {
+        modelContext: true,
+        clipboard: options.widget?.onCopyText !== undefined,
+        ...options.guidance?.hostApi,
+      },
+    },
+    preview:
+      options.preview ??
+      ((code, previewOptions) =>
+        previewWidget(code, {
+          ...previewFrameOptions(options.widget),
+          ...previewOptions,
+        })),
+    registry,
+    modules: [...(options.modules ?? []), ...(options.spec?.modules ?? [])],
+    extraTools: { ...options.extraTools, ...options.spec?.tools },
+  });
+  const display = options.display ?? "standalone";
+  const execution = options.execution ?? "frontend";
+  const reports = createRenderReports();
+  const reportOptions =
+    options.renderReport === false ? undefined : (options.renderReport ?? {});
+  const settleMs = reportOptions?.settleMs ?? 300;
+  const timeoutMs = reportOptions?.timeoutMs ?? 10_000;
+
+  function useWidgetProps() {
+    const aui = useAui();
+    const tokens = useAssistantUiThemeTokens(options.themeElement);
+    return computed(() => ({
+      ...options.widget,
+      tokens: tokens.value,
+      onPrompt:
+        options.widget?.onPrompt ??
+        ((text: string) => {
+          const composer = aui.thread.composer();
+          composer.setText(
+            [composer.getState().text, text]
+              .filter((part) => part.trim())
+              .join(" "),
+          );
+        }),
+    }));
+  }
+
+  function useStorageId(origin: MaybeRefOrGetter<string | undefined>) {
+    const threadId = useAuiState((state) => state.threadListItem?.remoteId);
+    return computed(() => {
+      const toolCallId = toValue(origin);
+      if (options.widgetId === false || !toolCallId) return undefined;
+      if (options.widgetId)
+        return options.widgetId({ toolCallId, threadId: threadId.value });
+      return `${threadId.value ?? "aui"}:${toolCallId}`;
+    });
+  }
+
+  type ToolWidgetProps = {
+    code: string;
+    streaming: boolean;
+    title: string;
+    toolCallId: string;
+    storageId: string | undefined;
+    unstable_interactions: ToolCallMessagePartProps<ShowArgs>["unstable_interactions"];
+    unstable_recordInteraction: ToolCallMessagePartProps<ShowArgs>["unstable_recordInteraction"];
+  };
+  const ToolWidget = defineComponent(
+    (props: ToolWidgetProps) => {
+      const widgetProps = useWidgetProps();
+      const initialState = savedWidgetState(
+        props.unstable_interactions,
+        props.toolCallId,
+      );
+      const initialContext = savedContext(
+        props.unstable_interactions,
+        props.toolCallId,
+        "widgetState",
+      );
+      const latest = { state: initialState, context: initialContext };
+      const snapshot = () =>
+        latest.context
+          ? { state: latest.state, context: latest.context }
+          : latest.state === null
+            ? null
+            : { state: latest.state };
+      let disposed = false;
+      const saver = createSnapshotSaver<{
+        state: unknown;
+        context?: SharedContext;
+      } | null>(snapshot(), (saved) =>
+        props.unstable_recordInteraction?.({
+          type: "action",
+          payload: {
+            type: "widgetState",
+            toolCallId: props.toolCallId,
+            state: saved ? saved.state : null,
+            ...(saved?.context ? { context: saved.context } : {}),
+          },
+        }),
+      );
+      onDeactivated(() => saver.flush());
+      onScopeDispose(() => {
+        disposed = true;
+        saver.flush();
+      });
+      const share = useSharedContext(() => ({
+        title: props.title,
+        toolCallId: props.toolCallId,
+        initial: widgetProps.value.onUpdateModelContext
+          ? undefined
+          : initialContext,
+        useModelContext: useWidgetModelContext,
+        onShare(context) {
+          latest.context = context;
+          saver.schedule(snapshot);
+        },
+      }));
+      const { ref, widget } = useWidget(() => {
+        const current = widgetProps.value;
+        return {
+          ...current,
+          initialState,
+          ...(props.storageId !== undefined &&
+          !current.frame &&
+          !current.opaqueOrigin
+            ? { id: props.storageId }
+            : {}),
+          onWidgetState(state: unknown) {
+            if (disposed) return;
+            latest.state = state;
+            saver.schedule(snapshot);
+            current.onWidgetState?.(state);
+          },
+          onUpdateModelContext:
+            current.onUpdateModelContext ??
+            ((params: unknown) => {
+              share(frameContext(params));
+              return {};
+            }),
+        };
+      });
+      watch(
+        [widget, () => props.toolCallId],
+        ([handle, toolCallId], _previous, cleanup) => {
+          if (!handle || !reportOptions) return;
+          let valid = true;
+          let timer: ReturnType<typeof setTimeout> | undefined;
+          const off = handle.on("end", () => {
+            off();
+            timer = setTimeout(() => {
+              void handle
+                .inspect()
+                .then((inspection) => {
+                  if (!valid || disposed || widget.value !== handle) return;
+                  const feedback = buildRepairFeedback({
+                    errors: inspection.errors,
+                    console: inspection.console,
+                    blank: inspection.blank,
+                    height: inspection.size.height,
+                  });
+                  reports.report(toolCallId, {
+                    status: "rendered",
+                    ok: feedback.ok,
+                    blank: feedback.blank,
+                    height: inspection.size.height,
+                    errors: feedback.errors,
+                    console: feedback.console,
+                    feedback: feedback.text,
+                  });
+                })
+                .catch(() => {});
+            }, settleMs);
+          });
+          cleanup(() => {
+            valid = false;
+            off();
+            clearTimeout(timer);
+          });
+        },
+        { immediate: true, flush: "sync" },
+      );
+      watchEffect(
+        () => {
+          if (widget.value)
+            syncWidgetCode(widget.value, props.code, props.streaming);
+        },
+        { flush: "post" },
+      );
+      return () => h("div", { ref });
+    },
+    {
+      name: "ToolWidget",
+      props: [
+        "code",
+        "streaming",
+        "title",
+        "toolCallId",
+        "storageId",
+        "unstable_interactions",
+        "unstable_recordInteraction",
+      ],
+    },
+  );
+
+  function useWidgetCallSuperseded(
+    messages: MaybeRefOrGetter<readonly MessageLike[]>,
+    toolCallId: () => string,
+    title: () => string,
+  ) {
+    const superseded = computed(() => {
+      const current = toValue(messages);
+      return hasLaterToolCallInMessage(current, toolCallId(), title(), (call) =>
+        takesOverWidget(current, call),
+      );
+    });
+    watch(
+      [superseded, toolCallId],
+      ([replaced, id]) => {
+        if (replaced && reportOptions)
+          reports.report(id, {
+            status: "timeout",
+            feedback:
+              "This widget was superseded by a later call with the same title in this message and was not rendered.",
+          });
+      },
+      { immediate: true, flush: "sync" },
+    );
+    return superseded;
+  }
+  const partProps: (
+    | "args"
+    | "toolCallId"
+    | "unstable_interactions"
+    | "unstable_recordInteraction"
+  )[] = [
+    "args",
+    "toolCallId",
+    "unstable_interactions",
+    "unstable_recordInteraction",
+  ];
+  const ShowWidgetUI = defineComponent(
+    (props: ToolCallMessagePartProps<ShowArgs>) => {
+      const status = useToolArgsStatus<ShowWidgetInput>();
+      const messages = useAuiState((state) => state.thread.messages);
+      const streaming = computed(
+        () => status.value.propStatus.widget_code !== "complete",
+      );
+      const code = computed(() =>
+        typeof props.args.widget_code === "string"
+          ? props.args.widget_code
+          : "",
+      );
+      const title = computed(() =>
+        typeof props.args.title === "string" ? props.args.title : "",
+      );
+      const storageId = useStorageId(() => props.toolCallId);
+      const superseded = useWidgetCallSuperseded(
+        messages,
+        () => props.toolCallId,
+        () => title.value,
+      );
+      watch(
+        [streaming, title, code],
+        ([running, name, source]) => {
+          if (!running && name && source && registry.get(name)?.code !== source)
+            registry.set(name, source);
+        },
+        { immediate: true, flush: "sync" },
+      );
+      return () => {
+        if (superseded.value) return null;
+        const loading = props.args.loading_messages?.[0];
+        return h("div", { "data-gf-widget": title.value || undefined }, [
+          ...(streaming.value && !code.value && loading
+            ? [
+                h(
+                  "p",
+                  { role: "status", style: { margin: "4px 0", opacity: 0.7 } },
+                  loading,
+                ),
+              ]
+            : []),
+          h(ToolWidget, {
+            code: code.value,
+            streaming: streaming.value,
+            title: title.value,
+            toolCallId: props.toolCallId,
+            storageId: storageId.value,
+            unstable_interactions: props.unstable_interactions,
+            unstable_recordInteraction: props.unstable_recordInteraction,
+          }),
+        ]);
+      };
+    },
+    { name: "ShowWidgetUI", inheritAttrs: false, props: partProps },
+  );
+
+  const EditWidgetUI = defineComponent(
+    (props: ToolCallMessagePartProps<EditArgs>) => {
+      const status = useToolArgsStatus<EditWidgetInput>();
+      const messages = useAuiState((state) => state.thread.messages);
+      const title = computed(() =>
+        typeof props.args.title === "string" ? props.args.title : "",
+      );
+      const complete = computed(() => status.value.argsStatus === "complete");
+      const superseded = useWidgetCallSuperseded(
+        messages,
+        () => props.toolCallId,
+        () => title.value,
+      );
+      const code = computed(() =>
+        complete.value
+          ? resolveWidgetCode(messages.value, props.toolCallId)
+          : undefined,
+      );
+      const origin = computed(() =>
+        complete.value
+          ? resolveWidgetOrigin(messages.value, props.toolCallId)
+          : undefined,
+      );
+      const storageId = useStorageId(origin);
+      watch(
+        [title, code],
+        ([name, source]) => {
+          if (
+            name &&
+            source !== undefined &&
+            registry.get(name)?.code !== source
+          )
+            registry.set(name, source);
+        },
+        { immediate: true, flush: "sync" },
+      );
+      return () => {
+        if (superseded.value) return null;
+        if (!complete.value)
+          return h(
+            "p",
+            { role: "status", style: { margin: "4px 0", opacity: 0.7 } },
+            `Updating ${title.value || "widget"}…`,
+          );
+        if (code.value === undefined)
+          return h(
+            "p",
+            { role: "note", style: { margin: "4px 0", opacity: 0.7 } },
+            `${title.value || "The widget"} could not be updated.`,
+          );
+        return h("div", { "data-gf-widget": title.value || undefined }, [
+          h("span", { style: visuallyHidden }, `Updated ${title.value}`),
+          h(ToolWidget, {
+            code: code.value,
+            streaming: false,
+            title: title.value,
+            toolCallId: props.toolCallId,
+            storageId: storageId.value,
+            unstable_interactions: props.unstable_interactions,
+            unstable_recordInteraction: props.unstable_recordInteraction,
+          }),
+        ]);
+      };
+    },
+    { name: "EditWidgetUI", inheritAttrs: false, props: partProps },
+  );
+  const Silent = () => null;
+
+  type ExecuteContext = { toolCallId: string; abortSignal?: AbortSignal };
+
+  const entry = <I, O>(
+    tool: ToolDefinition<I, O>,
+    render: Component,
+    entryDisplay: ToolkitDisplay,
+    execute?: (input: I, context: ExecuteContext) => Promise<unknown>,
+  ) =>
+    toolkitEntry(tool, render, { execution, display: entryDisplay }, execute);
+
+  const withRenderReport =
+    <I,>(tool: ToolDefinition<I, { ok: boolean }>) =>
+    async (input: I, context: ExecuteContext) => {
+      const result = await tool.execute(input);
+      if (!result.ok || !reportOptions) return result;
+      const render = await reports.wait(
+        context.toolCallId,
+        timeoutMs,
+        context.abortSignal,
+      );
+      return { ...result, render };
+    };
+
+  const preview = async (input: PreviewWidgetInput) => {
+    const { screenshot, ...result } = await tools.preview_widget.execute(input);
+    const feedback = buildRepairFeedback(result).text;
+    return options.previewScreenshot && screenshot !== undefined
+      ? { ...result, screenshot, feedback }
+      : { ...result, feedback };
+  };
+
+  const toolkit: Toolkit = {
+    read_me: entry(tools.read_me, Silent, "inline"),
+    show_widget: entry(
+      tools.show_widget,
+      ShowWidgetUI,
+      display,
+      withRenderReport(tools.show_widget),
+    ),
+    edit_widget: entry(
+      tools.edit_widget,
+      EditWidgetUI,
+      display,
+      withRenderReport(tools.edit_widget),
+    ),
+    preview_widget: entry(tools.preview_widget, Silent, "inline", preview),
+    ...Object.fromEntries(
+      Object.entries(options.extraTools ?? {}).map(([name, tool]) => [
+        name,
+        entry(tool, Silent, "inline"),
+      ]),
+    ),
+    ...options.spec?.entries({ execution, display }),
+  };
+
+  return { toolkit, tools, registry };
+}
+
+/** Adds the widget guidance to the model while this Vue scope is active. */
+export function useWidgetInstructions(
+  tools: MaybeRefOrGetter<WidgetTools & Record<string, AnyTool>>,
+  options: MaybeRefOrGetter<WidgetInstructionsOptions> = {},
+): void {
+  const instruction = shallowRef("");
+  useIsomorphicLayoutEffect(
+    () =>
+      watch(
+        [
+          () => toValue(tools),
+          () => JSON.stringify(toValue(options).preload ?? null),
+        ],
+        ([currentTools, preloadKey], _previous, cleanup) => {
+          let cancelled = false;
+          cleanup(() => {
+            cancelled = true;
+          });
+          const preload: WidgetInstructionsOptions["preload"] | null =
+            JSON.parse(preloadKey);
+          void buildWidgetInstructions(
+            currentTools,
+            preload ? { preload } : {},
+          ).then((text) => {
+            if (!cancelled) instruction.value = text;
+          });
+        },
+        { immediate: true },
+      ),
+    [],
+  );
+  useAssistantInstructions(() => ({
+    instruction: instruction.value,
+    disabled: !instruction.value,
+  }));
+}