@assistant-ui/react 0.11.58 → 0.12.1

package/src/primitives/message/MessagePartsGrouped.tsx

@@ -7,12 +7,11 @@ import {
   PropsWithChildren,
   useMemo,
 } from "react";
+import { useAuiState, useAui } from "@assistant-ui/store";
 import {
-  useAssistantState,
   PartByIndexProvider,
-  useAssistantApi,
   TextMessagePartProvider,
-} from "../../context";
+} from "../../context/providers";
 import { MessagePartPrimitiveText } from "../messagePart/MessagePartText";
 import { MessagePartPrimitiveImage } from "../messagePart/MessagePartImage";
 import type {
@@ -75,7 +74,7 @@ const groupMessagePartsByParentId: GroupingFunction = (
 const useMessagePartsGrouped = (
   groupingFunction: GroupingFunction,
 ): MessagePartGroup[] => {
-  const parts = useAssistantState(({ message }) => message.parts);
+  const parts = useAuiState(({ message }) => message.parts);
 
   return useMemo(() => {
     if (parts.length === 0) {
@@ -220,7 +219,7 @@ const ToolUIDisplay = ({
 }: {
   Fallback: ToolCallMessagePartComponent | undefined;
 } & ToolCallMessagePartProps) => {
-  const Render = useAssistantState(({ tools }) => {
+  const Render = useAuiState(({ tools }) => {
     const Render = tools.tools[props.toolName] ?? Fallback;
     if (Array.isArray(Render)) return Render[0] ?? Fallback;
     return Render;
@@ -261,13 +260,13 @@ const MessagePartComponent: FC<MessagePartComponentProps> = ({
     tools = {},
   } = {},
 }) => {
-  const api = useAssistantApi();
-  const part = useAssistantState(({ part }) => part);
+  const aui = useAui();
+  const part = useAuiState(({ part }) => part);
 
   const type = part.type;
   if (type === "tool-call") {
-    const addResult = (result: any) => api.part().addToolResult(result);
-    const resume = api.part().resumeToolCall;
+    const addResult = (result: any) => aui.part().addToolResult(result);
+    const resume = aui.part().resumeToolCall;
     if ("Override" in tools)
       return <tools.Override {...part} addResult={addResult} resume={resume} />;
     const Tool = tools.by_name?.[part.toolName] ?? tools.Fallback;
@@ -355,7 +354,7 @@ const COMPLETE_STATUS: MessagePartStatus = Object.freeze({
 });
 
 const EmptyPartsImpl: FC<MessagePartComponentProps> = ({ components }) => {
-  const status = useAssistantState(
+  const status = useAuiState(
     (s) => (s.message.status ?? COMPLETE_STATUS) as MessagePartStatus,
   );
 
@@ -427,9 +426,7 @@ const EmptyParts = memo(
 export const MessagePrimitiveUnstable_PartsGrouped: FC<
   MessagePrimitiveUnstable_PartsGrouped.Props
 > = ({ groupingFunction, components }) => {
-  const contentLength = useAssistantState(
-    ({ message }) => message.parts.length,
-  );
+  const contentLength = useAuiState(({ message }) => message.parts.length);
   const messageGroups = useMessagePartsGrouped(groupingFunction);
 
   const partsElements = useMemo(() => {

package/src/primitives/message/MessageRoot.tsx

@@ -7,7 +7,7 @@ import {
   ComponentPropsWithoutRef,
   useCallback,
 } from "react";
-import { useAssistantApi, useAssistantState } from "../../context";
+import { useAui, useAuiState } from "@assistant-ui/store";
 import { useManagedRef } from "../../utils/hooks/useManagedRef";
 import { useSizeHandle } from "../../utils/hooks/useSizeHandle";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
@@ -15,8 +15,8 @@ import { useThreadViewport } from "../../context/react/ThreadViewportContext";
 import { ThreadPrimitiveViewportSlack } from "../thread/ThreadViewportSlack";
 
 const useIsHoveringRef = () => {
-  const api = useAssistantApi();
-  const message = useAssistantState(() => api.message());
+  const aui = useAui();
+  const message = useAuiState(() => aui.message());
 
   const callbackRef = useCallback(
     (el: HTMLElement) => {
@@ -59,7 +59,7 @@ const useMessageViewportRef = () => {
 
   // inset rules:
   // - the previous user message before the last assistant message registers its full height
-  const shouldRegisterAsInset = useAssistantState(
+  const shouldRegisterAsInset = useAuiState(
     ({ thread, message }) =>
       turnAnchor === "top" &&
       message.role === "user" &&

package/src/primitives/messagePart/MessagePartInProgress.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { FC, PropsWithChildren } from "react";
-import { useAssistantState } from "../../context";
+import { useAuiState } from "@assistant-ui/store";
 
 export namespace MessagePartPrimitiveInProgress {
   export type Props = PropsWithChildren;
@@ -11,7 +11,7 @@ export namespace MessagePartPrimitiveInProgress {
 export const MessagePartPrimitiveInProgress: FC<
   MessagePartPrimitiveInProgress.Props
 > = ({ children }) => {
-  const isInProgress = useAssistantState(
+  const isInProgress = useAuiState(
     ({ part }) => part.status.type === "running",
   );
 

package/src/primitives/messagePart/useMessagePartData.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { useAssistantState } from "../../context";
+import { useAuiState } from "@assistant-ui/store";
 import { DataMessagePart } from "../../types";
 
 export const useMessagePartData = <T = any>(name?: string) => {
-  const part = useAssistantState(({ part }) => {
+  const part = useAuiState(({ part }) => {
     if (part.type !== "data") {
       return null;
     }

package/src/primitives/messagePart/useMessagePartFile.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { MessagePartState } from "../../legacy-runtime/runtime/MessagePartRuntime";
-import { useAssistantState } from "../../context";
+import { useAuiState } from "@assistant-ui/store";
 import { FileMessagePart } from "../../types";
 
 export const useMessagePartFile = () => {
-  const file = useAssistantState(({ part }) => {
+  const file = useAuiState(({ part }) => {
     if (part.type !== "file")
       throw new Error(
         "MessagePartFile can only be used inside file message parts.",

package/src/primitives/messagePart/useMessagePartImage.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { MessagePartState } from "../../legacy-runtime/runtime/MessagePartRuntime";
-import { useAssistantState } from "../../context";
+import { useAuiState } from "@assistant-ui/store";
 import { ImageMessagePart } from "../../types";
 
 export const useMessagePartImage = () => {
-  const image = useAssistantState(({ part }) => {
+  const image = useAuiState(({ part }) => {
     if (part.type !== "image")
       throw new Error(
         "MessagePartImage can only be used inside image message parts.",

package/src/primitives/messagePart/useMessagePartReasoning.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { MessagePartState } from "../../legacy-runtime/runtime/MessagePartRuntime";
-import { useAssistantState } from "../../context";
+import { useAuiState } from "@assistant-ui/store";
 import { ReasoningMessagePart } from "../../types";
 
 export const useMessagePartReasoning = () => {
-  const text = useAssistantState(({ part }) => {
+  const text = useAuiState(({ part }) => {
     if (part.type !== "reasoning")
       throw new Error(
         "MessagePartReasoning can only be used inside reasoning message parts.",

package/src/primitives/messagePart/useMessagePartSource.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import type { MessagePartState } from "../../legacy-runtime/runtime/MessagePartRuntime";
-import { useAssistantState } from "../../context";
+import { useAuiState } from "@assistant-ui/store";
 import { SourceMessagePart } from "../../types";
 
 export const useMessagePartSource = () => {
-  const source = useAssistantState(({ part }) => {
+  const source = useAuiState(({ part }) => {
     if (part.type !== "source")
       throw new Error(
         "MessagePartSource can only be used inside source message parts.",

package/src/primitives/messagePart/useMessagePartText.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { MessagePartState } from "../../legacy-runtime/runtime/MessagePartRuntime";
-import { useAssistantState } from "../../context";
+import { useAuiState } from "@assistant-ui/store";
 import { TextMessagePart, ReasoningMessagePart } from "../../types";
 
 export const useMessagePartText = () => {
-  const text = useAssistantState(({ part }) => {
+  const text = useAuiState(({ part }) => {
     if (part.type !== "text" && part.type !== "reasoning")
       throw new Error(
         "MessagePartText can only be used inside text or reasoning message parts.",

package/src/primitives/thread/ThreadEmpty.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { FC, PropsWithChildren } from "react";
-import { useAssistantState } from "../../context";
+import { useAuiState } from "@assistant-ui/store";
 
 export namespace ThreadPrimitiveEmpty {
   export type Props = PropsWithChildren;
@@ -10,7 +10,7 @@ export namespace ThreadPrimitiveEmpty {
 export const ThreadPrimitiveEmpty: FC<ThreadPrimitiveEmpty.Props> = ({
   children,
 }) => {
-  const empty = useAssistantState(
+  const empty = useAuiState(
     ({ thread }) => thread.messages.length === 0 && !thread.isLoading,
   );
   return empty ? children : null;

package/src/primitives/thread/ThreadIf.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 ThreadIfFilters = {
@@ -13,7 +13,7 @@ type ThreadIfFilters = {
 type UseThreadIfProps = RequireAtLeastOne<ThreadIfFilters>;
 
 const useThreadIf = (props: UseThreadIfProps) => {
-  return useAssistantState(({ thread }) => {
+  return useAuiState(({ thread }) => {
     if (props.empty === true && !thread.isEmpty) return false;
     if (props.empty === false && thread.isEmpty) return false;
 
@@ -31,7 +31,7 @@ export namespace ThreadPrimitiveIf {
 }
 
 /**
- * @deprecated Use `<AssistantIf condition={({ thread }) => ...} />` instead.
+ * @deprecated Use `<AuiIf condition={({ thread }) => ...} />` instead.
  */
 export const ThreadPrimitiveIf: FC<ThreadPrimitiveIf.Props> = ({
   children,

package/src/primitives/thread/ThreadMessages.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { type ComponentType, type FC, memo, useMemo } from "react";
-import { useAssistantState, MessageByIndexProvider } from "../../context";
+import { useAuiState } from "@assistant-ui/store";
+import { MessageByIndexProvider } from "../../context/providers";
 import { ThreadMessage as ThreadMessageType } from "../../types";
 
 export namespace ThreadPrimitiveMessages {
@@ -128,10 +129,8 @@ type ThreadMessageComponentProps = {
 const ThreadMessageComponent: FC<ThreadMessageComponentProps> = ({
   components,
 }) => {
-  const role = useAssistantState(({ message }) => message.role);
-  const isEditing = useAssistantState(
-    ({ message }) => message.composer.isEditing,
-  );
+  const role = useAuiState(({ message }) => message.role);
+  const isEditing = useAuiState(({ message }) => message.composer.isEditing);
   const Component = getComponent(components, role, isEditing);
 
   return <Component />;
@@ -197,9 +196,7 @@ ThreadPrimitiveMessageByIndex.displayName = "ThreadPrimitive.MessageByIndex";
 export const ThreadPrimitiveMessagesImpl: FC<ThreadPrimitiveMessages.Props> = ({
   components,
 }) => {
-  const messagesLength = useAssistantState(
-    ({ thread }) => thread.messages.length,
-  );
+  const messagesLength = useAuiState(({ thread }) => thread.messages.length);
 
   const messageElements = useMemo(() => {
     if (messagesLength === 0) return null;

package/src/primitives/thread/ThreadSuggestion.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 useThreadSuggestion = ({
   prompt,
@@ -39,32 +39,32 @@ const useThreadSuggestion = ({
   /** @deprecated Use `clearComposer` instead. */
   method?: "replace";
 }) => {
-  const api = useAssistantApi();
-  const disabled = useAssistantState(({ thread }) => thread.isDisabled);
+  const aui = useAui();
+  const disabled = useAuiState(({ thread }) => thread.isDisabled);
 
   // ========== Deprecation Mapping ==========
   const resolvedSend = send ?? autoSend ?? false;
   // ==========================================
 
   const callback = useCallback(() => {
-    const isRunning = api.thread().getState().isRunning;
+    const isRunning = aui.thread().getState().isRunning;
 
     if (resolvedSend && !isRunning) {
-      api.thread().append(prompt);
+      aui.thread().append(prompt);
       if (clearComposer) {
-        api.composer().setText("");
+        aui.composer().setText("");
       }
     } else {
       if (clearComposer) {
-        api.composer().setText(prompt);
+        aui.composer().setText(prompt);
       } else {
-        const currentText = api.composer().getState().text;
-        api
+        const currentText = aui.composer().getState().text;
+        aui
           .composer()
           .setText(currentText.trim() ? `${currentText} ${prompt}` : prompt);
       }
     }
-  }, [api, resolvedSend, clearComposer, prompt]);
+  }, [aui, resolvedSend, clearComposer, prompt]);
 
   if (disabled) return null;
   return callback;

package/src/primitives/thread/ThreadViewportSlack.tsx

@@ -9,7 +9,7 @@ import {
   useContext,
 } from "react";
 import { useThreadViewportStore } from "../../context/react/ThreadViewportContext";
-import { useAssistantState } from "../../context";
+import { useAuiState } from "@assistant-ui/store";
 import { useManagedRef } from "../../utils/hooks/useManagedRef";
 
 const SlackNestingContext = createContext(false);
@@ -57,7 +57,7 @@ export const ThreadPrimitiveViewportSlack: FC<ThreadViewportSlackProps> = ({
   fillClampThreshold = "10em",
   fillClampOffset = "6em",
 }) => {
-  const shouldApplySlack = useAssistantState(
+  const shouldApplySlack = useAuiState(
     // only add slack to the last assistant message following a user message (valid turn)
     ({ thread, message }) =>
       message.isLast &&

package/src/primitives/thread/useThreadViewportAutoScroll.tsx

@@ -2,7 +2,7 @@
 
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { useCallback, useRef, type RefCallback } from "react";
-import { useAssistantEvent } from "../../context";
+import { useAuiEvent } from "@assistant-ui/store";
 import { useOnResizeContent } from "../../utils/hooks/useOnResizeContent";
 import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
 import { useManagedRef } from "../../utils/hooks/useManagedRef";
@@ -122,7 +122,7 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
   });
 
   // autoscroll on run start
-  useAssistantEvent("thread.run-start", () => {
+  useAuiEvent("thread.runStart", () => {
     if (!scrollToBottomOnRunStart) return;
     scrollingToBottomBehaviorRef.current = "auto";
     requestAnimationFrame(() => {
@@ -131,7 +131,7 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
   });
 
   // scroll to bottom instantly when thread history is first loaded
-  useAssistantEvent("thread.initialize", () => {
+  useAuiEvent("thread.initialize", () => {
     if (!scrollToBottomOnInitialize) return;
     scrollingToBottomBehaviorRef.current = "instant";
     requestAnimationFrame(() => {
@@ -140,7 +140,7 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
   });
 
   // scroll to bottom instantly when switching threads
-  useAssistantEvent("thread-list-item.switched-to", () => {
+  useAuiEvent("threadListItem.switchedTo", () => {
     if (!scrollToBottomOnThreadSwitch) return;
     scrollingToBottomBehaviorRef.current = "instant";
     requestAnimationFrame(() => {

package/src/primitives/threadList/ThreadListItems.tsx

@@ -1,10 +1,8 @@
 "use client";
 
 import { ComponentType, FC, memo, useMemo } from "react";
-import {
-  ThreadListItemByIndexProvider,
-  useAssistantState,
-} from "../../context";
+import { useAuiState } from "@assistant-ui/store";
+import { ThreadListItemByIndexProvider } from "../../context/providers";
 
 export namespace ThreadListPrimitiveItems {
   export type Props = {
@@ -62,7 +60,7 @@ export const ThreadListPrimitiveItems: FC<ThreadListPrimitiveItems.Props> = ({
   archived = false,
   components,
 }) => {
-  const contentLength = useAssistantState(({ threads }) =>
+  const contentLength = useAuiState(({ threads }) =>
     archived ? threads.archivedThreadIds.length : threads.threadIds.length,
   );
 

package/src/primitives/threadList/ThreadListNew.tsx

@@ -7,7 +7,7 @@ import {
 import { forwardRef } from "react";
 import { Primitive } from "@radix-ui/react-primitive";
 import { composeEventHandlers } from "@radix-ui/primitive";
-import { useAssistantState, useAssistantApi } from "../../context";
+import { useAuiState, useAui } from "@assistant-ui/store";
 
 export namespace ThreadListPrimitiveNew {
   export type Element = ActionButtonElement;
@@ -18,11 +18,11 @@ export const ThreadListPrimitiveNew = forwardRef<
   ThreadListPrimitiveNew.Element,
   ThreadListPrimitiveNew.Props
 >(({ onClick, disabled, ...props }, forwardedRef) => {
-  const isMain = useAssistantState(
+  const isMain = useAuiState(
     ({ threads }) => threads.newThreadId === threads.mainThreadId,
   );
 
-  const api = useAssistantApi();
+  const aui = useAui();
 
   return (
     <Primitive.button
@@ -32,7 +32,7 @@ export const ThreadListPrimitiveNew = forwardRef<
       ref={forwardedRef}
       disabled={disabled}
       onClick={composeEventHandlers(onClick, () => {
-        api.threads().switchToNewThread();
+        aui.threads().switchToNewThread();
       })}
     />
   );

package/src/primitives/threadListItem/ThreadListItemArchive.ts

@@ -5,14 +5,14 @@ import {
   ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
-import { useAssistantApi } from "../../context";
+import { useAui } from "@assistant-ui/store";
 import { useCallback } from "react";
 
 const useThreadListItemArchive = () => {
-  const api = useAssistantApi();
+  const aui = useAui();
   return useCallback(() => {
-    api.threadListItem().archive();
-  }, [api]);
+    aui.threadListItem().archive();
+  }, [aui]);
 };
 
 export namespace ThreadListItemPrimitiveArchive {

package/src/primitives/threadListItem/ThreadListItemDelete.ts

@@ -5,14 +5,14 @@ import {
   ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
-import { useAssistantApi } from "../../context";
+import { useAui } from "@assistant-ui/store";
 import { useCallback } from "react";
 
 const useThreadListItemDelete = () => {
-  const api = useAssistantApi();
+  const aui = useAui();
   return useCallback(() => {
-    api.threadListItem().delete();
-  }, [api]);
+    aui.threadListItem().delete();
+  }, [aui]);
 };
 
 export namespace ThreadListItemPrimitiveDelete {

package/src/primitives/threadListItem/ThreadListItemRoot.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";
 
 type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
 
@@ -15,7 +15,7 @@ export const ThreadListItemPrimitiveRoot = forwardRef<
   ThreadListItemPrimitiveRoot.Element,
   ThreadListItemPrimitiveRoot.Props
 >((props, ref) => {
-  const isMain = useAssistantState(
+  const isMain = useAuiState(
     ({ threads, threadListItem }) => threads.mainThreadId === threadListItem.id,
   );
 

package/src/primitives/threadListItem/ThreadListItemTitle.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { FC, ReactNode } from "react";
-import { useAssistantState } from "../../context";
+import { useAuiState } from "@assistant-ui/store";
 
 export namespace ThreadListItemPrimitiveTitle {
   export type Props = {
@@ -12,7 +12,7 @@ export namespace ThreadListItemPrimitiveTitle {
 export const ThreadListItemPrimitiveTitle: FC<
   ThreadListItemPrimitiveTitle.Props
 > = ({ fallback }) => {
-  const title = useAssistantState(({ threadListItem }) => threadListItem.title);
+  const title = useAuiState(({ threadListItem }) => threadListItem.title);
   return <>{title || fallback}</>;
 };
 

package/src/primitives/threadListItem/ThreadListItemTrigger.ts

@@ -5,14 +5,14 @@ import {
   ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
-import { useAssistantApi } from "../../context";
+import { useAui } from "@assistant-ui/store";
 import { useCallback } from "react";
 
 const useThreadListItemTrigger = () => {
-  const api = useAssistantApi();
+  const aui = useAui();
   return useCallback(() => {
-    api.threadListItem().switchTo();
-  }, [api]);
+    aui.threadListItem().switchTo();
+  }, [aui]);
 };
 
 export namespace ThreadListItemPrimitiveTrigger {

package/src/primitives/threadListItem/ThreadListItemUnarchive.ts

@@ -5,14 +5,14 @@ import {
   ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
-import { useAssistantApi } from "../../context";
+import { useAui } from "@assistant-ui/store";
 import { useCallback } from "react";
 
 const useThreadListItemUnarchive = () => {
-  const api = useAssistantApi();
+  const aui = useAui();
   return useCallback(() => {
-    api.threadListItem().unarchive();
-  }, [api]);
+    aui.threadListItem().unarchive();
+  }, [aui]);
 };
 
 export namespace ThreadListItemPrimitiveUnarchive {

package/src/types/index.ts

@@ -52,11 +52,3 @@ export type {
 export type { ThreadListItemStatus } from "../legacy-runtime/runtime/ThreadListItemRuntime";
 
 export type { Unsubscribe } from "./Unsubscribe";
-
-export type {
-  AssistantEventScope,
-  AssistantEventSelector,
-  AssistantEvent,
-  AssistantEventMap,
-  AssistantEventCallback,
-} from "./EventTypes";

package/src/types/scopes/attachment.ts

@@ -0,0 +1,22 @@
+import type { Attachment } from "../AttachmentTypes";
+import type { AttachmentRuntime } from "../../legacy-runtime/runtime";
+
+export type AttachmentState = Attachment;
+
+export type AttachmentMethods = {
+  getState(): AttachmentState;
+  remove(): Promise<void>;
+  /** @internal */
+  __internal_getRuntime?(): AttachmentRuntime;
+};
+
+export type AttachmentMeta = {
+  source: "message" | "composer";
+  query: { type: "index"; index: number } | { type: "id"; id: string };
+};
+
+export type AttachmentClientSchema = {
+  state: AttachmentState;
+  methods: AttachmentMethods;
+  meta: AttachmentMeta;
+};