@assistant-ui/react 0.11.57 → 0.12.0

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;

package/src/primitives/composer/ComposerAddAttachment.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";
 
 const useComposerAddAttachment = ({
   multiple = true,
@@ -14,8 +14,8 @@ const useComposerAddAttachment = ({
   /** allow selecting multiple files */
   multiple?: boolean | undefined;
 } = {}) => {
-  const disabled = useAssistantState(({ composer }) => !composer.isEditing);
-  const api = useAssistantApi();
+  const disabled = useAuiState(({ composer }) => !composer.isEditing);
+  const aui = useAui();
 
   const callback = useCallback(() => {
     const input = document.createElement("input");
@@ -23,7 +23,7 @@ const useComposerAddAttachment = ({
     input.multiple = multiple;
     input.hidden = true;
 
-    const attachmentAccept = api.composer().getState().attachmentAccept;
+    const attachmentAccept = aui.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) {
-        api.composer().addAttachment(file);
+        aui.composer().addAttachment(file);
       }
 
       document.body.removeChild(input);
@@ -47,7 +47,7 @@ const useComposerAddAttachment = ({
     };
 
     input.click();
-  }, [api, multiple]);
+  }, [aui, multiple]);
 
   if (disabled) return null;
   return callback;

package/src/primitives/composer/ComposerAttachmentDropzone.tsx

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

package/src/primitives/composer/ComposerAttachments.tsx

@@ -2,10 +2,8 @@
 
 import { ComponentType, type FC, memo, useMemo } from "react";
 import { Attachment } from "../../types";
-import {
-  useAssistantState,
-  ComposerAttachmentByIndexProvider,
-} from "../../context";
+import { useAuiState } from "@assistant-ui/store";
+import { ComposerAttachmentByIndexProvider } from "../../context/providers";
 
 export namespace ComposerPrimitiveAttachments {
   export type Props = {
@@ -41,7 +39,7 @@ const getComponent = (
 const AttachmentComponent: FC<{
   components: ComposerPrimitiveAttachments.Props["components"];
 }> = ({ components }) => {
-  const attachment = useAssistantState(({ attachment }) => attachment);
+  const attachment = useAuiState(({ attachment }) => attachment);
   if (!attachment) return null;
 
   const Component = getComponent(components, attachment);
@@ -96,9 +94,7 @@ ComposerPrimitiveAttachmentByIndex.displayName =
 export const ComposerPrimitiveAttachments: FC<
   ComposerPrimitiveAttachments.Props
 > = ({ components }) => {
-  const attachmentsCount = useAssistantState(
-    (s) => s.composer.attachments.length,
-  );
+  const attachmentsCount = useAuiState((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 { useAssistantState, useAssistantApi } from "../../context";
+import { useAuiState, useAui } from "@assistant-ui/store";
 
 const useComposerCancel = () => {
-  const api = useAssistantApi();
-  const disabled = useAssistantState(({ composer }) => !composer.canCancel);
+  const aui = useAui();
+  const disabled = useAuiState(({ composer }) => !composer.canCancel);
 
   const callback = useCallback(() => {
-    api.composer().cancel();
-  }, [api]);
+    aui.composer().cancel();
+  }, [aui]);
 
   if (disabled) return null;
   return callback;

package/src/primitives/composer/ComposerDictate.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback } from "react";
-import { useAssistantState, useAssistantApi } from "../../context";
+import { useAui, useAuiState } from "@assistant-ui/store";
 import type {
   ActionButtonElement,
   ActionButtonProps,
@@ -9,8 +9,8 @@ import type {
 import { createActionButton } from "../../utils/createActionButton";
 
 const useComposerDictate = () => {
-  const api = useAssistantApi();
-  const disabled = useAssistantState(
+  const aui = useAui();
+  const disabled = useAuiState(
     ({ thread, composer }) =>
       composer.dictation != null ||
       !thread.capabilities.dictation ||
@@ -18,8 +18,8 @@ const useComposerDictate = () => {
   );
 
   const callback = useCallback(() => {
-    api.composer().startDictation();
-  }, [api]);
+    aui.composer().startDictation();
+  }, [aui]);
 
   if (disabled) return null;
   return callback;

package/src/primitives/composer/ComposerDictationTranscript.tsx

@@ -2,7 +2,7 @@
 
 import { Primitive } from "@radix-ui/react-primitive";
 import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
-import { useAssistantState } from "../../context";
+import { useAuiState } from "@assistant-ui/store";
 
 export namespace ComposerPrimitiveDictationTranscript {
   export type Element = ComponentRef<typeof Primitive.span>;
@@ -28,7 +28,7 @@ export const ComposerPrimitiveDictationTranscript = forwardRef<
   ComposerPrimitiveDictationTranscript.Element,
   ComposerPrimitiveDictationTranscript.Props
 >(({ children, ...props }, forwardRef) => {
-  const transcript = useAssistantState(
+  const transcript = useAuiState(
     ({ composer }) => composer.dictation?.transcript,
   );
 

package/src/primitives/composer/ComposerIf.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { FC, PropsWithChildren } from "react";
-import { useAssistantState } from "../../context";
+import { useAuiState } from "@assistant-ui/store";
 import type { RequireAtLeastOne } from "../../utils/RequireAtLeastOne";
 
 type ComposerIfFilters = {
@@ -14,7 +14,7 @@ type ComposerIfFilters = {
 export type UseComposerIfProps = RequireAtLeastOne<ComposerIfFilters>;
 
 const useComposerIf = (props: UseComposerIfProps) => {
-  return useAssistantState(({ composer }) => {
+  return useAuiState(({ composer }) => {
     if (props.editing === true && !composer.isEditing) return false;
     if (props.editing === false && composer.isEditing) return false;
 
@@ -31,7 +31,7 @@ export namespace ComposerPrimitiveIf {
 }
 
 /**
- * @deprecated Use `<AssistantIf condition={({ composer }) => ...} />` instead.
+ * @deprecated Use `<AuiIf condition={({ composer }) => ...} />` instead.
  */
 export const ComposerPrimitiveIf: FC<ComposerPrimitiveIf.Props> = ({
   children,

package/src/primitives/composer/ComposerInput.tsx

@@ -16,8 +16,8 @@ import TextareaAutosize, {
 } from "react-textarea-autosize";
 import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
 import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
-import { useAssistantState, useAssistantApi } from "../../context";
-import { flushSync } from "@assistant-ui/tap";
+import { useAuiState, useAui } from "@assistant-ui/store";
+import { flushResourcesSync } from "@assistant-ui/tap";
 
 export namespace ComposerPrimitiveInput {
   export type Element = HTMLTextAreaElement;
@@ -98,9 +98,9 @@ export const ComposerPrimitiveInput = forwardRef<
     },
     forwardedRef,
   ) => {
-    const api = useAssistantApi();
+    const aui = useAui();
 
-    const value = useAssistantState(({ composer }) => {
+    const value = useAuiState(({ composer }) => {
       if (!composer.isEditing) return "";
       return composer.text;
     });
@@ -108,7 +108,7 @@ export const ComposerPrimitiveInput = forwardRef<
     const Component = asChild ? Slot : TextareaAutosize;
 
     const isDisabled =
-      useAssistantState(
+      useAuiState(
         ({ thread, composer }) =>
           thread.isDisabled || composer.dictation?.inputDisabled,
       ) || disabledProp;
@@ -121,7 +121,7 @@ export const ComposerPrimitiveInput = forwardRef<
       // Only handle ESC if it originated from within this input
       if (!textareaRef.current?.contains(e.target as Node)) return;
 
-      const composer = api.composer();
+      const composer = aui.composer();
       if (composer.getState().canCancel) {
         composer.cancel();
         e.preventDefault();
@@ -135,7 +135,7 @@ export const ComposerPrimitiveInput = forwardRef<
       if (e.nativeEvent.isComposing) return;
 
       if (e.key === "Enter" && e.shiftKey === false) {
-        const isRunning = api.thread().getState().isRunning;
+        const isRunning = aui.thread().getState().isRunning;
 
         if (!isRunning) {
           e.preventDefault();
@@ -147,14 +147,14 @@ export const ComposerPrimitiveInput = forwardRef<
 
     const handlePaste = async (e: ClipboardEvent<HTMLTextAreaElement>) => {
       if (!addAttachmentOnPaste) return;
-      const threadCapabilities = api.thread().getState().capabilities;
+      const threadCapabilities = aui.thread().getState().capabilities;
       const files = Array.from(e.clipboardData?.files || []);
 
       if (threadCapabilities.attachments && files.length > 0) {
         try {
           e.preventDefault();
           await Promise.all(
-            files.map((file) => api.composer().addAttachment(file)),
+            files.map((file) => aui.composer().addAttachment(file)),
           );
         } catch (error) {
           console.error("Error adding attachment:", error);
@@ -175,7 +175,7 @@ export const ComposerPrimitiveInput = forwardRef<
 
     useOnScrollToBottom(() => {
       if (
-        api.composer().getState().type === "thread" &&
+        aui.composer().getState().type === "thread" &&
         unstable_focusOnScrollToBottom
       ) {
         focus();
@@ -184,23 +184,23 @@ export const ComposerPrimitiveInput = forwardRef<
 
     useEffect(() => {
       if (
-        api.composer().getState().type !== "thread" ||
+        aui.composer().getState().type !== "thread" ||
         !unstable_focusOnRunStart
       )
         return undefined;
 
-      return api.on("thread.run-start", focus);
-    }, [unstable_focusOnRunStart, focus, api]);
+      return aui.on("thread.runStart", focus);
+    }, [unstable_focusOnRunStart, focus, aui]);
 
     useEffect(() => {
       if (
-        api.composer().getState().type !== "thread" ||
+        aui.composer().getState().type !== "thread" ||
         !unstable_focusOnThreadSwitched
       )
         return undefined;
 
-      return api.on("thread-list-item.switched-to", focus);
-    }, [unstable_focusOnThreadSwitched, focus, api]);
+      return aui.on("threadListItem.switchedTo", focus);
+    }, [unstable_focusOnThreadSwitched, focus, aui]);
 
     return (
       <Component
@@ -210,9 +210,9 @@ export const ComposerPrimitiveInput = forwardRef<
         ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
         disabled={isDisabled}
         onChange={composeEventHandlers(onChange, (e) => {
-          if (!api.composer().getState().isEditing) return;
-          flushSync(() => {
-            api.composer().setText(e.target.value);
+          if (!aui.composer().getState().isEditing) return;
+          flushResourcesSync(() => {
+            aui.composer().setText(e.target.value);
           });
         })}
         onKeyDown={composeEventHandlers(onKeyDown, handleKeyPress)}