@assistant-ui/react 0.10.50 → 0.11.1

package/src/primitives/actionBar/ActionBarCopy.tsx

@@ -4,13 +4,8 @@ import { forwardRef } from "react";
 import { ActionButtonProps } from "../../utils/createActionButton";
 import { composeEventHandlers } from "@radix-ui/primitive";
 import { Primitive } from "@radix-ui/react-primitive";
-import { useMessageUtils } from "../../context";
 import { useCallback } from "react";
-import {
-  useMessage,
-  useMessageRuntime,
-} from "../../context/react/MessageContext";
-import { useComposerRuntime } from "../../context";
+import { useAssistantState, useAssistantApi } from "../../context";
 
 /**
  * Hook that provides copy functionality for action bar buttons.
@@ -39,28 +34,27 @@ import { useComposerRuntime } from "../../context";
 const useActionBarPrimitiveCopy = ({
   copiedDuration = 3000,
 }: { copiedDuration?: number | undefined } = {}) => {
-  const messageRuntime = useMessageRuntime();
-  const composerRuntime = useComposerRuntime();
-  const setIsCopied = useMessageUtils((s) => s.setIsCopied);
-  const hasCopyableContent = useMessage((message) => {
+  const api = useAssistantApi();
+  const hasCopyableContent = useAssistantState(({ message }) => {
     return (
-      (message.role !== "assistant" || message.status.type !== "running") &&
-      message.content.some((c) => c.type === "text" && c.text.length > 0)
+      (message.role !== "assistant" || message.status?.type !== "running") &&
+      message.parts.some((c) => c.type === "text" && c.text.length > 0)
     );
   });
 
+  const isEditing = useAssistantState(({ composer }) => composer.isEditing);
+  const composerValue = useAssistantState(({ composer }) => composer.text);
+
   const callback = useCallback(() => {
-    const { isEditing, text: composerValue } = composerRuntime.getState();
+    const valueToCopy = isEditing ? composerValue : api.message().getCopyText();
 
-    const valueToCopy = isEditing
-      ? composerValue
-      : messageRuntime.unstable_getCopyText();
+    if (!valueToCopy) return;
 
     navigator.clipboard.writeText(valueToCopy).then(() => {
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), copiedDuration);
+      api.message().setIsCopied(true);
+      setTimeout(() => api.message().setIsCopied(false), copiedDuration);
     });
-  }, [messageRuntime, setIsCopied, composerRuntime, copiedDuration]);
+  }, [api, isEditing, composerValue, copiedDuration]);
 
   if (!hasCopyableContent) return null;
   return callback;
@@ -93,7 +87,7 @@ export const ActionBarPrimitiveCopy = forwardRef<
   ActionBarPrimitiveCopy.Element,
   ActionBarPrimitiveCopy.Props
 >(({ copiedDuration, onClick, disabled, ...props }, forwardedRef) => {
-  const isCopied = useMessageUtils((u) => u.isCopied);
+  const isCopied = useAssistantState(({ message }) => message.isCopied);
   const callback = useActionBarPrimitiveCopy({ copiedDuration });
   return (
     <Primitive.button

package/src/primitives/actionBar/ActionBarEdit.tsx

@@ -6,7 +6,7 @@ import {
   createActionButton,
 } from "../../utils/createActionButton";
 import { useCallback } from "react";
-import { useEditComposer, useMessageRuntime } from "../../context";
+import { useAssistantState, useAssistantApi } from "../../context";
 
 /**
  * Hook that provides edit functionality for action bar buttons.
@@ -30,12 +30,12 @@ import { useEditComposer, useMessageRuntime } from "../../context";
  * ```
  */
 const useActionBarEdit = () => {
-  const messageRuntime = useMessageRuntime();
-  const disabled = useEditComposer((c) => c.isEditing);
+  const api = useAssistantApi();
+  const disabled = useAssistantState(({ composer }) => composer.isEditing);
 
   const callback = useCallback(() => {
-    messageRuntime.composer.beginEdit();
-  }, [messageRuntime]);
+    api.composer().beginEdit();
+  }, [api]);
 
   if (disabled) return null;
   return callback;

package/src/primitives/actionBar/ActionBarFeedbackNegative.tsx

@@ -3,17 +3,16 @@
 import { forwardRef } from "react";
 import { ActionButtonProps } from "../../utils/createActionButton";
 import { composeEventHandlers } from "@radix-ui/primitive";
-import { useMessage } from "../../context";
 import { Primitive } from "@radix-ui/react-primitive";
 import { useCallback } from "react";
-import { useMessageRuntime } from "../../context";
+import { useAssistantState, useAssistantApi } from "../../context";
 
 const useActionBarFeedbackNegative = () => {
-  const messageRuntime = useMessageRuntime();
+  const api = useAssistantApi();
 
   const callback = useCallback(() => {
-    messageRuntime.submitFeedback({ type: "negative" });
-  }, [messageRuntime]);
+    api.message().submitFeedback({ type: "negative" });
+  }, [api]);
 
   return callback;
 };
@@ -27,8 +26,8 @@ export const ActionBarPrimitiveFeedbackNegative = forwardRef<
   ActionBarPrimitiveFeedbackNegative.Element,
   ActionBarPrimitiveFeedbackNegative.Props
 >(({ onClick, disabled, ...props }, forwardedRef) => {
-  const isSubmitted = useMessage(
-    (u) => u.submittedFeedback?.type === "negative",
+  const isSubmitted = useAssistantState(
+    (s) => s.message.submittedFeedback?.type === "negative",
   );
   const callback = useActionBarFeedbackNegative();
   return (

package/src/primitives/actionBar/ActionBarFeedbackPositive.tsx

@@ -3,15 +3,15 @@
 import { forwardRef, useCallback } from "react";
 import { ActionButtonProps } from "../../utils/createActionButton";
 import { composeEventHandlers } from "@radix-ui/primitive";
-import { useMessage, useMessageRuntime } from "../../context";
+import { useAssistantState, useAssistantApi } from "../../context";
 import { Primitive } from "@radix-ui/react-primitive";
 
 const useActionBarFeedbackPositive = () => {
-  const messageRuntime = useMessageRuntime();
+  const api = useAssistantApi();
 
   const callback = useCallback(() => {
-    messageRuntime.submitFeedback({ type: "positive" });
-  }, [messageRuntime]);
+    api.message().submitFeedback({ type: "positive" });
+  }, [api]);
 
   return callback;
 };
@@ -25,8 +25,8 @@ export const ActionBarPrimitiveFeedbackPositive = forwardRef<
   ActionBarPrimitiveFeedbackPositive.Element,
   ActionBarPrimitiveFeedbackPositive.Props
 >(({ onClick, disabled, ...props }, forwardedRef) => {
-  const isSubmitted = useMessage(
-    (u) => u.submittedFeedback?.type === "positive",
+  const isSubmitted = useAssistantState(
+    (s) => s.message.submittedFeedback?.type === "positive",
   );
   const callback = useActionBarFeedbackPositive();
   return (

package/src/primitives/actionBar/ActionBarReload.tsx

@@ -6,9 +6,7 @@ import {
   createActionButton,
 } from "../../utils/createActionButton";
 import { useCallback } from "react";
-import { useMessageRuntime } from "../../context";
-import { useThreadRuntime } from "../../context/react/ThreadContext";
-import { useCombinedStore } from "../../utils/combined/useCombinedStore";
+import { useAssistantState, useAssistantApi } from "../../context";
 
 /**
  * Hook that provides reload functionality for action bar buttons.
@@ -32,17 +30,18 @@ import { useCombinedStore } from "../../utils/combined/useCombinedStore";
  * ```
  */
 const useActionBarReload = () => {
-  const messageRuntime = useMessageRuntime();
-  const threadRuntime = useThreadRuntime();
+  const api = useAssistantApi();
 
-  const disabled = useCombinedStore(
-    [threadRuntime, messageRuntime],
-    (t, m) => t.isRunning || t.isDisabled || m.role !== "assistant",
+  const disabled = useAssistantState(
+    (s) =>
+      s.thread.isRunning ||
+      s.thread.isDisabled ||
+      s.message.role !== "assistant",
   );
 
   const callback = useCallback(() => {
-    messageRuntime.reload();
-  }, [messageRuntime]);
+    api.message().reload();
+  }, [api]);
 
   if (disabled) return null;
   return callback;

package/src/primitives/actionBar/ActionBarSpeak.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback } from "react";
-import { useMessage, useMessageRuntime } from "../../context";
+import { useAssistantState, useAssistantApi } from "../../context";
 import {
   ActionButtonElement,
   ActionButtonProps,
@@ -9,15 +9,15 @@ import {
 } from "../../utils/createActionButton";
 
 const useActionBarSpeak = () => {
-  const messageRuntime = useMessageRuntime();
+  const api = useAssistantApi();
   const callback = useCallback(async () => {
-    messageRuntime.speak();
-  }, [messageRuntime]);
+    api.message().speak();
+  }, [api]);
 
-  const hasSpeakableContent = useMessage((m) => {
+  const hasSpeakableContent = useAssistantState(({ message }) => {
     return (
-      (m.role !== "assistant" || m.status.type !== "running") &&
-      m.content.some((c) => c.type === "text" && c.text.length > 0)
+      (message.role !== "assistant" || message.status?.type !== "running") &&
+      message.parts.some((c) => c.type === "text" && c.text.length > 0)
     );
   });
 

package/src/primitives/actionBar/ActionBarStopSpeaking.tsx

@@ -6,18 +6,15 @@ import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
 import { Primitive } from "@radix-ui/react-primitive";
 import { composeEventHandlers } from "@radix-ui/primitive";
 import { useCallback } from "react";
-import {
-  useMessage,
-  useMessageRuntime,
-} from "../../context/react/MessageContext";
+import { useAssistantState, useAssistantApi } from "../../context";
 
 const useActionBarStopSpeaking = () => {
-  const messageRuntime = useMessageRuntime();
-  const isSpeaking = useMessage((u) => u.speech != null);
+  const api = useAssistantApi();
+  const isSpeaking = useAssistantState(({ message }) => message.speech != null);
 
   const callback = useCallback(() => {
-    messageRuntime.stopSpeaking();
-  }, [messageRuntime]);
+    api.message().stopSpeaking();
+  }, [api]);
 
   if (!isSpeaking) return null;
 

package/src/primitives/actionBar/useActionBarFloatStatus.tsx

@@ -1,11 +1,6 @@
 "use client";
 
-import {
-  useMessageRuntime,
-  useMessageUtilsStore,
-} from "../../context/react/MessageContext";
-import { useThreadRuntime } from "../../context/react/ThreadContext";
-import { useCombinedStore } from "../../utils/combined/useCombinedStore";
+import { useAssistantState } from "../../context";
 
 export enum HideAndFloatStatus {
   Hidden = "hidden",
@@ -24,32 +19,25 @@ export const useActionBarFloatStatus = ({
   autohide,
   autohideFloat,
 }: UseActionBarFloatStatusProps) => {
-  const threadRuntime = useThreadRuntime();
-  const messageRuntime = useMessageRuntime();
-  const messageUtilsStore = useMessageUtilsStore();
-
-  return useCombinedStore(
-    [threadRuntime, messageRuntime, messageUtilsStore],
-    (t, m, mu) => {
-      if (hideWhenRunning && t.isRunning) return HideAndFloatStatus.Hidden;
-
-      const autohideEnabled =
-        autohide === "always" || (autohide === "not-last" && !m.isLast);
-
-      // normal status
-      if (!autohideEnabled) return HideAndFloatStatus.Normal;
-
-      // hidden status
-      if (!mu.isHovering) return HideAndFloatStatus.Hidden;
-
-      // floating status
-      if (
-        autohideFloat === "always" ||
-        (autohideFloat === "single-branch" && m.branchCount <= 1)
-      )
-        return HideAndFloatStatus.Floating;
-
-      return HideAndFloatStatus.Normal;
-    },
-  );
+  return useAssistantState(({ thread, message }) => {
+    if (hideWhenRunning && thread.isRunning) return HideAndFloatStatus.Hidden;
+
+    const autohideEnabled =
+      autohide === "always" || (autohide === "not-last" && !message.isLast);
+
+    // normal status
+    if (!autohideEnabled) return HideAndFloatStatus.Normal;
+
+    // hidden status
+    if (!message.isHovering) return HideAndFloatStatus.Hidden;
+
+    // floating status
+    if (
+      autohideFloat === "always" ||
+      (autohideFloat === "single-branch" && message.branchCount <= 1)
+    )
+      return HideAndFloatStatus.Floating;
+
+    return HideAndFloatStatus.Normal;
+  });
 };

package/src/primitives/assistantModal/AssistantModalRoot.tsx

@@ -3,7 +3,7 @@
 import { FC, useEffect, useState } from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { ScopedProps, usePopoverScope } from "./scope";
-import { useThreadRuntime } from "../../context";
+import { useAssistantApi } from "../../context";
 
 export namespace AssistantModalPrimitiveRoot {
   export type Props = PopoverPrimitive.PopoverProps & {
@@ -21,14 +21,14 @@ const useAssistantModalOpenState = ({
   const state = useState(defaultOpen);
 
   const [, setOpen] = state;
-  const threadRuntime = useThreadRuntime();
+  const api = useAssistantApi();
   useEffect(() => {
     if (!unstable_openOnRunStart) return undefined;
 
-    return threadRuntime.unstable_on("run-start", () => {
+    return api.on("thread.run-start", () => {
       setOpen(true);
     });
-  }, [unstable_openOnRunStart, setOpen, threadRuntime]);
+  }, [unstable_openOnRunStart, setOpen, api]);
 
   return state;
 };

package/src/primitives/attachment/AttachmentName.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { FC } from "react";
-import { useAttachment } from "../../context/react/AttachmentContext";
+import { useAssistantState } from "../../context";
 
 export namespace AttachmentPrimitiveName {
   export type Props = Record<string, never>;
@@ -10,7 +10,7 @@ export namespace AttachmentPrimitiveName {
 export const AttachmentPrimitiveName: FC<
   AttachmentPrimitiveName.Props
 > = () => {
-  const name = useAttachment((a) => a.name);
+  const name = useAssistantState(({ attachment }) => attachment.name);
   return <>{name}</>;
 };
 

package/src/primitives/attachment/AttachmentRemove.tsx

@@ -6,14 +6,14 @@ import {
   createActionButton,
 } from "../../utils/createActionButton";
 import { useCallback } from "react";
-import { useAttachmentRuntime } from "../../context/react/AttachmentContext";
+import { useAssistantApi } from "../../context";
 
 const useAttachmentRemove = () => {
-  const attachmentRuntime = useAttachmentRuntime();
+  const api = useAssistantApi();
 
   const handleRemoveAttachment = useCallback(() => {
-    attachmentRuntime.remove();
-  }, [attachmentRuntime]);
+    api.attachment().remove();
+  }, [api]);
 
   return handleRemoveAttachment;
 };

package/src/primitives/attachment/AttachmentThumb.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ComponentPropsWithoutRef, forwardRef, type ComponentRef } from "react";
-import { useAttachment } from "../../context/react/AttachmentContext";
+import { useAssistantState } from "../../context";
 import { Primitive } from "@radix-ui/react-primitive";
 
 type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
@@ -15,7 +15,10 @@ export const AttachmentPrimitiveThumb = forwardRef<
   AttachmentPrimitiveThumb.Element,
   AttachmentPrimitiveThumb.Props
 >((props, ref) => {
-  const ext = useAttachment((a) => a.name.split(".").pop());
+  const ext = useAssistantState(({ attachment }) => {
+    const parts = attachment.name.split(".");
+    return parts.length > 1 ? parts.pop()! : "";
+  });
   return (
     <Primitive.div {...props} ref={ref}>
       .{ext}

package/src/primitives/branchPicker/BranchPickerCount.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import type { FC } from "react";
-import { useMessage } from "../../context/react/MessageContext";
+import { useAssistantState } from "../../context";
 
 const useBranchPickerCount = () => {
-  const branchCount = useMessage((s) => s.branchCount);
+  const branchCount = useAssistantState(({ message }) => message.branchCount);
   return branchCount;
 };
 

package/src/primitives/branchPicker/BranchPickerNext.tsx

@@ -6,18 +6,17 @@ import {
   createActionButton,
 } from "../../utils/createActionButton";
 import { useCallback } from "react";
-import {
-  useMessage,
-  useMessageRuntime,
-} from "../../context/react/MessageContext";
+import { useAssistantState, useAssistantApi } from "../../context";
 
 const useBranchPickerNext = () => {
-  const messageRuntime = useMessageRuntime();
-  const disabled = useMessage((m) => m.branchNumber >= m.branchCount);
+  const api = useAssistantApi();
+  const disabled = useAssistantState(
+    ({ message }) => message.branchNumber >= message.branchCount,
+  );
 
   const callback = useCallback(() => {
-    messageRuntime.switchToBranch({ position: "next" });
-  }, [messageRuntime]);
+    api.message().switchToBranch({ position: "next" });
+  }, [api]);
 
   if (disabled) return null;
   return callback;

package/src/primitives/branchPicker/BranchPickerNumber.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import type { FC } from "react";
-import { useMessage } from "../../context/react/MessageContext";
+import { useAssistantState } from "../../context";
 
 const useBranchPickerNumber = () => {
-  const branchNumber = useMessage((s) => s.branchNumber);
+  const branchNumber = useAssistantState(({ message }) => message.branchNumber);
   return branchNumber;
 };
 

package/src/primitives/branchPicker/BranchPickerPrevious.tsx

@@ -6,10 +6,7 @@ import {
   createActionButton,
 } from "../../utils/createActionButton";
 import { useCallback } from "react";
-import {
-  useMessage,
-  useMessageRuntime,
-} from "../../context/react/MessageContext";
+import { useAssistantState, useAssistantApi } from "../../context";
 
 /**
  * Hook that provides navigation to the previous branch functionality.
@@ -33,12 +30,14 @@ import {
  * ```
  */
 const useBranchPickerPrevious = () => {
-  const messageRuntime = useMessageRuntime();
-  const disabled = useMessage((m) => m.branchNumber <= 1);
+  const api = useAssistantApi();
+  const disabled = useAssistantState(
+    ({ message }) => message.branchNumber <= 1,
+  );
 
   const callback = useCallback(() => {
-    messageRuntime.switchToBranch({ position: "previous" });
-  }, [messageRuntime]);
+    api.message().switchToBranch({ position: "previous" });
+  }, [api]);
 
   if (disabled) return null;
   return callback;

package/src/primitives/composer/ComposerAddAttachment.tsx

@@ -6,7 +6,7 @@ import {
   createActionButton,
 } from "../../utils/createActionButton";
 import { useCallback } from "react";
-import { useComposer, useComposerRuntime } from "../../context";
+import { useAssistantState, useAssistantApi } from "../../context";
 
 const useComposerAddAttachment = ({
   multiple = true,
@@ -14,16 +14,16 @@ const useComposerAddAttachment = ({
   /** allow selecting multiple files */
   multiple?: boolean | undefined;
 } = {}) => {
-  const disabled = useComposer((c) => !c.isEditing);
+  const disabled = useAssistantState(({ composer }) => !composer.isEditing);
+  const api = useAssistantApi();
 
-  const composerRuntime = useComposerRuntime();
   const callback = useCallback(() => {
     const input = document.createElement("input");
     input.type = "file";
     input.multiple = multiple;
     input.hidden = true;
 
-    const attachmentAccept = composerRuntime.getAttachmentAccept();
+    const attachmentAccept = api.composer().getState().attachmentAccept;
     if (attachmentAccept !== "*") {
       input.accept = attachmentAccept;
     }
@@ -34,7 +34,7 @@ const useComposerAddAttachment = ({
       const fileList = (e.target as HTMLInputElement).files;
       if (!fileList) return;
       for (const file of fileList) {
-        composerRuntime.addAttachment(file);
+        api.composer().addAttachment(file);
       }
 
       document.body.removeChild(input);
@@ -47,7 +47,7 @@ const useComposerAddAttachment = ({
     };
 
     input.click();
-  }, [composerRuntime, multiple]);
+  }, [api, multiple]);
 
   if (disabled) return null;
   return callback;

package/src/primitives/composer/ComposerAttachmentDropzone.tsx

@@ -2,7 +2,7 @@ import { forwardRef, useCallback, useState } from "react";
 
 import { Slot } from "@radix-ui/react-slot";
 import React from "react";
-import { useComposerRuntime } from "../../context";
+import { useAssistantApi } from "../../context";
 
 export namespace ComposerAttachmentDropzonePrimitive {
   export type Element = HTMLDivElement;
@@ -17,7 +17,7 @@ export const ComposerAttachmentDropzone = forwardRef<
   ComposerAttachmentDropzonePrimitive.Props
 >(({ disabled, asChild = false, children, ...rest }, ref) => {
   const [isDragging, setIsDragging] = useState(false);
-  const composerRuntime = useComposerRuntime();
+  const api = useAssistantApi();
 
   const handleDrag = useCallback(
     (e: React.DragEvent) => {
@@ -37,13 +37,13 @@ export const ComposerAttachmentDropzone = forwardRef<
       setIsDragging(false);
       for (const file of e.dataTransfer.files) {
         try {
-          await composerRuntime.addAttachment(file);
+          await api.composer().addAttachment(file);
         } catch (error) {
           console.error("Failed to add attachment:", error);
         }
       }
     },
-    [disabled, composerRuntime],
+    [disabled, api],
   );
 
   const dragProps = {

package/src/primitives/composer/ComposerAttachments.tsx

@@ -2,9 +2,10 @@
 
 import { ComponentType, type FC, memo, useMemo } from "react";
 import { Attachment } from "../../types";
-import { useComposer, useComposerRuntime } from "../../context";
-import { useThreadComposerAttachment } from "../../context/react/AttachmentContext";
-import { AttachmentRuntimeProvider } from "../../context/providers/AttachmentRuntimeProvider";
+import {
+  useAssistantState,
+  ComposerAttachmentByIndexProvider,
+} from "../../context";
 
 export namespace ComposerPrimitiveAttachments {
   export type Props = {
@@ -40,10 +41,10 @@ const getComponent = (
 const AttachmentComponent: FC<{
   components: ComposerPrimitiveAttachments.Props["components"];
 }> = ({ components }) => {
-  const Component = useThreadComposerAttachment((a) =>
-    getComponent(components, a),
-  );
+  const attachment = useAssistantState(({ attachment }) => attachment);
+  if (!attachment) return null;
 
+  const Component = getComponent(components, attachment);
   if (!Component) return null;
   return <Component />;
 };
@@ -75,16 +76,10 @@ export namespace ComposerPrimitiveAttachmentByIndex {
 export const ComposerPrimitiveAttachmentByIndex: FC<ComposerPrimitiveAttachmentByIndex.Props> =
   memo(
     ({ index, components }) => {
-      const composerRuntime = useComposerRuntime();
-      const runtime = useMemo(
-        () => composerRuntime.getAttachmentByIndex(index),
-        [composerRuntime, index],
-      );
-
       return (
-        <AttachmentRuntimeProvider runtime={runtime}>
+        <ComposerAttachmentByIndexProvider index={index}>
           <AttachmentComponent components={components} />
-        </AttachmentRuntimeProvider>
+        </ComposerAttachmentByIndexProvider>
       );
     },
     (prev, next) =>
@@ -101,7 +96,9 @@ ComposerPrimitiveAttachmentByIndex.displayName =
 export const ComposerPrimitiveAttachments: FC<
   ComposerPrimitiveAttachments.Props
 > = ({ components }) => {
-  const attachmentsCount = useComposer((s) => s.attachments.length);
+  const attachmentsCount = useAssistantState(
+    (s) => s.composer.attachments.length,
+  );
 
   const attachmentElements = useMemo(() => {
     return Array.from({ length: attachmentsCount }, (_, index) => (

package/src/primitives/composer/ComposerCancel.tsx

@@ -6,15 +6,15 @@ import {
   createActionButton,
 } from "../../utils/createActionButton";
 import { useCallback } from "react";
-import { useComposer, useComposerRuntime } from "../../context";
+import { useAssistantState, useAssistantApi } from "../../context";
 
 const useComposerCancel = () => {
-  const composerRuntime = useComposerRuntime();
-  const disabled = useComposer((c) => !c.canCancel);
+  const api = useAssistantApi();
+  const disabled = useAssistantState(({ composer }) => !composer.canCancel);
 
   const callback = useCallback(() => {
-    composerRuntime.cancel();
-  }, [composerRuntime]);
+    api.composer().cancel();
+  }, [api]);
 
   if (disabled) return null;
   return callback;