@assistant-ui/react 0.11.58 → 0.12.0

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

@@ -10,7 +10,8 @@ import {
   ComponentType,
 } from "react";
 import { UseBoundStore, StoreApi, create } from "zustand";
-import { useAssistantApi, ThreadListItemByIdProvider } from "../../../context";
+import { useAui } from "@assistant-ui/store";
+import { ThreadListItemByIdProvider } from "../../../context/providers";
 import { ThreadRuntimeCore, ThreadRuntimeImpl } from "../../../internal";
 import { BaseSubscribable } from "./BaseSubscribable";
 import { AssistantRuntime } from "../../runtime";
@@ -103,7 +104,7 @@ export class RemoteThreadListHookInstanceManager extends BaseSubscribable {
       return threadBinding.outerSubscribe(updateRuntime);
     }, [threadBinding, updateRuntime]);
 
-    const api = useAssistantApi();
+    const aui = useAui();
     const initPromiseRef = useRef<Promise<unknown> | undefined>(undefined);
 
     useEffect(() => {
@@ -112,24 +113,24 @@ export class RemoteThreadListHookInstanceManager extends BaseSubscribable {
         "__internal_setGetInitializePromise"
       ];
       if (typeof setGetInitializePromise === "function") {
-        setGetInitializePromise(() => initPromiseRef.current);
+        setGetInitializePromise.call(runtimeCore, () => initPromiseRef.current);
       }
     }, [threadBinding]);
 
     useEffect(() => {
       return runtime.threads.main.unstable_on("initialize", () => {
-        const state = api.threadListItem().getState();
+        const state = aui.threadListItem().getState();
         if (state.status === "new") {
-          initPromiseRef.current = api.threadListItem().initialize();
+          initPromiseRef.current = aui.threadListItem().initialize();
 
-          const dispose = runtime.thread.unstable_on("run-end", () => {
+          const dispose = runtime.thread.unstable_on("runEnd", () => {
             dispose();
 
-            api.threadListItem().generateTitle();
+            aui.threadListItem().generateTitle();
           });
         }
       });
-    }, [runtime, api]);
+    }, [runtime, aui]);
 
     return null;
   };

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

@@ -7,7 +7,7 @@ import { RemoteThreadListOptions } from "./types";
 import { AssistantRuntimeImpl } from "../../../internal";
 import { AssistantRuntimeCore } from "../core/AssistantRuntimeCore";
 import { AssistantRuntime } from "../../runtime/AssistantRuntime";
-import { useAssistantApiImpl } from "../../../context/react/AssistantApiContext";
+import { useAui } from "@assistant-ui/store";
 
 class RemoteThreadListRuntimeCore
   extends BaseAssistantRuntimeCore
@@ -42,8 +42,8 @@ const useRemoteThreadListRuntimeImpl = (
 export const useRemoteThreadListRuntime = (
   options: RemoteThreadListOptions,
 ): AssistantRuntime => {
-  const api = useAssistantApiImpl();
-  const isNested = api.threadListItem.source !== null;
+  const aui = useAui();
+  const isNested = aui.threadListItem.source !== null;
 
   if (isNested) {
     if (!options.allowNesting) {

package/src/model-context/makeAssistantVisible.tsx

@@ -11,7 +11,7 @@ import {
   createContext,
   useContext,
 } from "react";
-import { useAssistantApi } from "../context/react/AssistantApiContext";
+import { useAui } from "@assistant-ui/store";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { tool } from "./tool";
 
@@ -83,11 +83,11 @@ export const makeAssistantVisible = <T extends ComponentType<any>>(
       const clickId = useId();
       const componentRef = useRef<HTMLElement>(null);
 
-      const api = useAssistantApi();
+      const aui = useAui();
 
       const { clickable, editable } = config ?? {};
       useEffect(() => {
-        return api.modelContext().register({
+        return aui.modelContext().register({
           getModelContext: () => {
             return {
               tools: {
@@ -100,7 +100,7 @@ export const makeAssistantVisible = <T extends ComponentType<any>>(
             };
           },
         });
-      }, [isNestedReadable, api, clickable, editable]);
+      }, [isNestedReadable, aui, clickable, editable]);
 
       const ref = useComposedRefs(componentRef, outerRef);
 

package/src/model-context/useAssistantInstructions.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import { useAssistantApi } from "../context/react/AssistantApiContext";
+import { useAui } from "@assistant-ui/store";
 
 export type AssistantInstructionsConfig = {
   disabled?: boolean | undefined;
@@ -19,7 +19,7 @@ export const useAssistantInstructions = (
   config: string | AssistantInstructionsConfig,
 ) => {
   const { instruction, disabled = false } = getInstructions(config);
-  const api = useAssistantApi();
+  const aui = useAui();
 
   useEffect(() => {
     if (disabled) return;
@@ -27,8 +27,8 @@ export const useAssistantInstructions = (
     const config = {
       system: instruction,
     };
-    return api.modelContext().register({
+    return aui.modelContext().register({
       getModelContext: () => config,
     });
-  }, [api, instruction, disabled]);
+  }, [aui, instruction, disabled]);
 };

package/src/model-context/useAssistantTool.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import { useAssistantApi } from "../context/react/AssistantApiContext";
+import { useAui } from "@assistant-ui/store";
 import type { ToolCallMessagePartComponent } from "../types/MessagePartComponentTypes";
 import type { Tool } from "assistant-stream";
 
@@ -19,12 +19,12 @@ export const useAssistantTool = <
 >(
   tool: AssistantToolProps<TArgs, TResult>,
 ) => {
-  const api = useAssistantApi();
+  const aui = useAui();
 
   useEffect(() => {
     if (!tool.render) return undefined;
-    return api.tools().setToolUI(tool.toolName, tool.render);
-  }, [api, tool.toolName, tool.render]);
+    return aui.tools().setToolUI(tool.toolName, tool.render);
+  }, [aui, tool.toolName, tool.render]);
 
   useEffect(() => {
     const { toolName, render, ...rest } = tool;
@@ -33,8 +33,8 @@ export const useAssistantTool = <
         [toolName]: rest,
       },
     };
-    return api.modelContext().register({
+    return aui.modelContext().register({
       getModelContext: () => context,
     });
-  }, [api, tool]);
+  }, [aui, tool]);
 };

package/src/model-context/useAssistantToolUI.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import { useAssistantApi } from "../context/react/AssistantApiContext";
+import { useAui } from "@assistant-ui/store";
 import type { ToolCallMessagePartComponent } from "../types/MessagePartComponentTypes";
 
 export type AssistantToolUIProps<TArgs, TResult> = {
@@ -12,9 +12,9 @@ export type AssistantToolUIProps<TArgs, TResult> = {
 export const useAssistantToolUI = (
   tool: AssistantToolUIProps<any, any> | null,
 ) => {
-  const api = useAssistantApi();
+  const aui = useAui();
   useEffect(() => {
     if (!tool?.toolName || !tool?.render) return undefined;
-    return api.tools().setToolUI(tool.toolName, tool.render);
-  }, [api, tool?.toolName, tool?.render]);
+    return aui.tools().setToolUI(tool.toolName, tool.render);
+  }, [aui, tool?.toolName, tool?.render]);
 };

package/src/primitives/actionBar/ActionBarCopy.tsx

@@ -5,7 +5,7 @@ import { ActionButtonProps } from "../../utils/createActionButton";
 import { composeEventHandlers } from "@radix-ui/primitive";
 import { Primitive } from "@radix-ui/react-primitive";
 import { useCallback } from "react";
-import { useAssistantState, useAssistantApi } from "../../context";
+import { useAuiState, useAui } from "@assistant-ui/store";
 
 /**
  * Hook that provides copy functionality for action bar buttons.
@@ -36,27 +36,27 @@ const useActionBarPrimitiveCopy = ({
 }: {
   copiedDuration?: number | undefined;
 } = {}) => {
-  const api = useAssistantApi();
-  const hasCopyableContent = useAssistantState(({ message }) => {
+  const aui = useAui();
+  const hasCopyableContent = useAuiState(({ message }) => {
     return (
       (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 isEditing = useAuiState(({ composer }) => composer.isEditing);
+  const composerValue = useAuiState(({ composer }) => composer.text);
 
   const callback = useCallback(() => {
-    const valueToCopy = isEditing ? composerValue : api.message().getCopyText();
+    const valueToCopy = isEditing ? composerValue : aui.message().getCopyText();
 
     if (!valueToCopy) return;
 
     navigator.clipboard.writeText(valueToCopy).then(() => {
-      api.message().setIsCopied(true);
-      setTimeout(() => api.message().setIsCopied(false), copiedDuration);
+      aui.message().setIsCopied(true);
+      setTimeout(() => aui.message().setIsCopied(false), copiedDuration);
     });
-  }, [api, isEditing, composerValue, copiedDuration]);
+  }, [aui, isEditing, composerValue, copiedDuration]);
 
   if (!hasCopyableContent) return null;
   return callback;
@@ -89,7 +89,7 @@ export const ActionBarPrimitiveCopy = forwardRef<
   ActionBarPrimitiveCopy.Element,
   ActionBarPrimitiveCopy.Props
 >(({ copiedDuration, onClick, disabled, ...props }, forwardedRef) => {
-  const isCopied = useAssistantState(({ message }) => message.isCopied);
+  const isCopied = useAuiState(({ 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 { useAssistantState, useAssistantApi } from "../../context";
+import { useAuiState, useAui } from "@assistant-ui/store";
 
 /**
  * Hook that provides edit functionality for action bar buttons.
@@ -30,12 +30,12 @@ import { useAssistantState, useAssistantApi } from "../../context";
  * ```
  */
 const useActionBarEdit = () => {
-  const api = useAssistantApi();
-  const disabled = useAssistantState(({ composer }) => composer.isEditing);
+  const aui = useAui();
+  const disabled = useAuiState(({ composer }) => composer.isEditing);
 
   const callback = useCallback(() => {
-    api.composer().beginEdit();
-  }, [api]);
+    aui.composer().beginEdit();
+  }, [aui]);
 
   if (disabled) return null;
   return callback;

package/src/primitives/actionBar/ActionBarExportMarkdown.tsx

@@ -4,7 +4,7 @@ import { forwardRef, useCallback } from "react";
 import { ActionButtonProps } from "../../utils/createActionButton";
 import { composeEventHandlers } from "@radix-ui/primitive";
 import { Primitive } from "@radix-ui/react-primitive";
-import { useAssistantState, useAssistantApi } from "../../context";
+import { useAuiState, useAui } from "@assistant-ui/store";
 
 const useActionBarExportMarkdown = ({
   filename,
@@ -13,8 +13,8 @@ const useActionBarExportMarkdown = ({
   filename?: string | undefined;
   onExport?: ((content: string) => void | Promise<void>) | undefined;
 } = {}) => {
-  const api = useAssistantApi();
-  const hasExportableContent = useAssistantState(({ message }) => {
+  const aui = useAui();
+  const hasExportableContent = useAuiState(({ message }) => {
     return (
       (message.role !== "assistant" || message.status?.type !== "running") &&
       message.parts.some((c) => c.type === "text" && c.text.length > 0)
@@ -22,7 +22,7 @@ const useActionBarExportMarkdown = ({
   });
 
   const callback = useCallback(async () => {
-    const content = api.message().getCopyText();
+    const content = aui.message().getCopyText();
     if (!content) return;
 
     if (onExport) {
@@ -37,7 +37,7 @@ const useActionBarExportMarkdown = ({
     a.download = filename ?? `message-${Date.now()}.md`;
     a.click();
     URL.revokeObjectURL(url);
-  }, [api, filename, onExport]);
+  }, [aui, filename, onExport]);
 
   if (!hasExportableContent) return null;
   return callback;

package/src/primitives/actionBar/ActionBarFeedbackNegative.tsx

@@ -5,14 +5,14 @@ import { ActionButtonProps } from "../../utils/createActionButton";
 import { composeEventHandlers } from "@radix-ui/primitive";
 import { Primitive } from "@radix-ui/react-primitive";
 import { useCallback } from "react";
-import { useAssistantState, useAssistantApi } from "../../context";
+import { useAuiState, useAui } from "@assistant-ui/store";
 
 const useActionBarFeedbackNegative = () => {
-  const api = useAssistantApi();
+  const aui = useAui();
 
   const callback = useCallback(() => {
-    api.message().submitFeedback({ type: "negative" });
-  }, [api]);
+    aui.message().submitFeedback({ type: "negative" });
+  }, [aui]);
 
   return callback;
 };
@@ -26,7 +26,7 @@ export const ActionBarPrimitiveFeedbackNegative = forwardRef<
   ActionBarPrimitiveFeedbackNegative.Element,
   ActionBarPrimitiveFeedbackNegative.Props
 >(({ onClick, disabled, ...props }, forwardedRef) => {
-  const isSubmitted = useAssistantState(
+  const isSubmitted = useAuiState(
     (s) => s.message.metadata.submittedFeedback?.type === "negative",
   );
   const callback = useActionBarFeedbackNegative();

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 { useAssistantState, useAssistantApi } from "../../context";
+import { useAuiState, useAui } from "@assistant-ui/store";
 import { Primitive } from "@radix-ui/react-primitive";
 
 const useActionBarFeedbackPositive = () => {
-  const api = useAssistantApi();
+  const aui = useAui();
 
   const callback = useCallback(() => {
-    api.message().submitFeedback({ type: "positive" });
-  }, [api]);
+    aui.message().submitFeedback({ type: "positive" });
+  }, [aui]);
 
   return callback;
 };
@@ -25,7 +25,7 @@ export const ActionBarPrimitiveFeedbackPositive = forwardRef<
   ActionBarPrimitiveFeedbackPositive.Element,
   ActionBarPrimitiveFeedbackPositive.Props
 >(({ onClick, disabled, ...props }, forwardedRef) => {
-  const isSubmitted = useAssistantState(
+  const isSubmitted = useAuiState(
     (s) => s.message.metadata.submittedFeedback?.type === "positive",
   );
   const callback = useActionBarFeedbackPositive();

package/src/primitives/actionBar/ActionBarReload.tsx

@@ -6,7 +6,7 @@ import {
   createActionButton,
 } from "../../utils/createActionButton";
 import { useCallback } from "react";
-import { useAssistantState, useAssistantApi } from "../../context";
+import { useAuiState, useAui } from "@assistant-ui/store";
 
 /**
  * Hook that provides reload functionality for action bar buttons.
@@ -30,9 +30,9 @@ import { useAssistantState, useAssistantApi } from "../../context";
  * ```
  */
 const useActionBarReload = () => {
-  const api = useAssistantApi();
+  const aui = useAui();
 
-  const disabled = useAssistantState(
+  const disabled = useAuiState(
     (s) =>
       s.thread.isRunning ||
       s.thread.isDisabled ||
@@ -40,8 +40,8 @@ const useActionBarReload = () => {
   );
 
   const callback = useCallback(() => {
-    api.message().reload();
-  }, [api]);
+    aui.message().reload();
+  }, [aui]);
 
   if (disabled) return null;
   return callback;

package/src/primitives/actionBar/ActionBarSpeak.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback } from "react";
-import { useAssistantState, useAssistantApi } from "../../context";
+import { useAuiState, useAui } from "@assistant-ui/store";
 import {
   ActionButtonElement,
   ActionButtonProps,
@@ -9,12 +9,12 @@ import {
 } from "../../utils/createActionButton";
 
 const useActionBarSpeak = () => {
-  const api = useAssistantApi();
+  const aui = useAui();
   const callback = useCallback(async () => {
-    api.message().speak();
-  }, [api]);
+    aui.message().speak();
+  }, [aui]);
 
-  const hasSpeakableContent = useAssistantState(({ message }) => {
+  const hasSpeakableContent = useAuiState(({ message }) => {
     return (
       (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,15 +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 { useAssistantState, useAssistantApi } from "../../context";
+import { useAuiState, useAui } from "@assistant-ui/store";
 
 const useActionBarStopSpeaking = () => {
-  const api = useAssistantApi();
-  const isSpeaking = useAssistantState(({ message }) => message.speech != null);
+  const aui = useAui();
+  const isSpeaking = useAuiState(({ message }) => message.speech != null);
 
   const callback = useCallback(() => {
-    api.message().stopSpeaking();
-  }, [api]);
+    aui.message().stopSpeaking();
+  }, [aui]);
 
   if (!isSpeaking) return null;
 

package/src/primitives/actionBar/useActionBarFloatStatus.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useAssistantState } from "../../context";
+import { useAuiState } from "@assistant-ui/store";
 
 export enum HideAndFloatStatus {
   Hidden = "hidden",
@@ -19,7 +19,7 @@ export const useActionBarFloatStatus = ({
   autohide,
   autohideFloat,
 }: UseActionBarFloatStatusProps) => {
-  return useAssistantState(({ thread, message }) => {
+  return useAuiState(({ thread, message }) => {
     if (hideWhenRunning && thread.isRunning) return HideAndFloatStatus.Hidden;
 
     const autohideEnabled =

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 { useAssistantApi } from "../../context";
+import { useAui } from "@assistant-ui/store";
 
 export namespace AssistantModalPrimitiveRoot {
   export type Props = PopoverPrimitive.PopoverProps & {
@@ -21,14 +21,14 @@ const useAssistantModalOpenState = ({
   const state = useState(defaultOpen);
 
   const [, setOpen] = state;
-  const api = useAssistantApi();
+  const aui = useAui();
   useEffect(() => {
     if (!unstable_openOnRunStart) return undefined;
 
-    return api.on("thread.run-start", () => {
+    return aui.on("thread.runStart", () => {
       setOpen(true);
     });
-  }, [unstable_openOnRunStart, setOpen, api]);
+  }, [unstable_openOnRunStart, setOpen, aui]);
 
   return state;
 };

package/src/primitives/attachment/AttachmentName.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { FC } from "react";
-import { useAssistantState } from "../../context";
+import { useAuiState } from "@assistant-ui/store";
 
 export namespace AttachmentPrimitiveName {
   export type Props = Record<string, never>;
@@ -10,7 +10,7 @@ export namespace AttachmentPrimitiveName {
 export const AttachmentPrimitiveName: FC<
   AttachmentPrimitiveName.Props
 > = () => {
-  const name = useAssistantState(({ attachment }) => attachment.name);
+  const name = useAuiState(({ 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 { useAssistantApi } from "../../context";
+import { useAui } from "@assistant-ui/store";
 
 const useAttachmentRemove = () => {
-  const api = useAssistantApi();
+  const aui = useAui();
 
   const handleRemoveAttachment = useCallback(() => {
-    api.attachment().remove();
-  }, [api]);
+    aui.attachment().remove();
+  }, [aui]);
 
   return handleRemoveAttachment;
 };

package/src/primitives/attachment/AttachmentThumb.tsx

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

package/src/primitives/branchPicker/BranchPickerCount.tsx

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

package/src/primitives/branchPicker/BranchPickerNext.tsx

@@ -6,11 +6,11 @@ import {
   createActionButton,
 } from "../../utils/createActionButton";
 import { useCallback } from "react";
-import { useAssistantState, useAssistantApi } from "../../context";
+import { useAuiState, useAui } from "@assistant-ui/store";
 
 const useBranchPickerNext = () => {
-  const api = useAssistantApi();
-  const disabled = useAssistantState(({ thread, message }) => {
+  const aui = useAui();
+  const disabled = useAuiState(({ thread, message }) => {
     // Disabled if no next branch
     if (message.branchNumber >= message.branchCount) return true;
 
@@ -23,8 +23,8 @@ const useBranchPickerNext = () => {
   });
 
   const callback = useCallback(() => {
-    api.message().switchToBranch({ position: "next" });
-  }, [api]);
+    aui.message().switchToBranch({ position: "next" });
+  }, [aui]);
 
   if (disabled) return null;
   return callback;

package/src/primitives/branchPicker/BranchPickerNumber.tsx

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

package/src/primitives/branchPicker/BranchPickerPrevious.tsx

@@ -6,7 +6,7 @@ import {
   createActionButton,
 } from "../../utils/createActionButton";
 import { useCallback } from "react";
-import { useAssistantState, useAssistantApi } from "../../context";
+import { useAuiState, useAui } from "@assistant-ui/store";
 
 /**
  * Hook that provides navigation to the previous branch functionality.
@@ -30,8 +30,8 @@ import { useAssistantState, useAssistantApi } from "../../context";
  * ```
  */
 const useBranchPickerPrevious = () => {
-  const api = useAssistantApi();
-  const disabled = useAssistantState(({ thread, message }) => {
+  const aui = useAui();
+  const disabled = useAuiState(({ thread, message }) => {
     // Disabled if no previous branch
     if (message.branchNumber <= 1) return true;
 
@@ -44,8 +44,8 @@ const useBranchPickerPrevious = () => {
   });
 
   const callback = useCallback(() => {
-    api.message().switchToBranch({ position: "previous" });
-  }, [api]);
+    aui.message().switchToBranch({ position: "previous" });
+  }, [aui]);
 
   if (disabled) return null;
   return callback;