@assistant-ui/react 0.11.58 → 0.12.0

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;
+};

package/src/{client/types/Composer.ts → types/scopes/composer.ts}

@@ -1,10 +1,10 @@
+import type { Attachment } from "../AttachmentTypes";
+import type { MessageRole, RunConfig } from "../AssistantTypes";
 import type { ComposerRuntime } from "../../legacy-runtime/runtime";
-import type { DictationState } from "../../legacy-runtime/runtime-cores/core/ComposerRuntimeCore";
-import type { Attachment } from "../../types";
-import type { MessageRole, RunConfig } from "../../types/AssistantTypes";
-import type { AttachmentClientApi } from "./Attachment";
+import type { AttachmentMethods } from "./attachment";
+import { DictationState } from "../../legacy-runtime/runtime-cores";
 
-export type ComposerClientState = {
+export type ComposerState = {
   readonly text: string;
   readonly role: MessageRole;
   readonly attachments: readonly Attachment[];
@@ -14,6 +14,7 @@ export type ComposerClientState = {
   readonly attachmentAccept: string;
   readonly isEmpty: boolean;
   readonly type: "thread" | "edit";
+
   /**
    * The current state of dictation.
    * Undefined when dictation is not active.
@@ -21,15 +22,14 @@ export type ComposerClientState = {
   readonly dictation: DictationState | undefined;
 };
 
-export type ComposerClientApi = {
-  getState(): ComposerClientState;
-
+export type ComposerMethods = {
+  getState(): ComposerState;
   setText(text: string): void;
   setRole(role: MessageRole): void;
   setRunConfig(runConfig: RunConfig): void;
   addAttachment(file: File): Promise<void>;
   clearAttachments(): Promise<void>;
-  attachment(selector: { index: number } | { id: string }): AttachmentClientApi;
+  attachment(selector: { index: number } | { id: string }): AttachmentMethods;
   reset(): Promise<void>;
   send(): void;
   cancel(): void;
@@ -49,3 +49,20 @@ export type ComposerClientApi = {
   /** @internal */
   __internal_getRuntime?(): ComposerRuntime;
 };
+
+export type ComposerMeta = {
+  source: "thread" | "message";
+  query: Record<string, never>;
+};
+
+export type ComposerEvents = {
+  "composer.send": { threadId: string; messageId?: string };
+  "composer.attachmentAdd": { threadId: string; messageId?: string };
+};
+
+export type ComposerClientSchema = {
+  state: ComposerState;
+  methods: ComposerMethods;
+  meta: ComposerMeta;
+  events: ComposerEvents;
+};

package/src/types/scopes/index.ts

@@ -0,0 +1,50 @@
+export type {
+  ThreadsState,
+  ThreadsMethods,
+  ThreadsClientSchema,
+} from "./threads";
+export type {
+  ThreadListItemState,
+  ThreadListItemMethods,
+  ThreadListItemMeta,
+  ThreadListItemEvents,
+  ThreadListItemClientSchema,
+} from "./threadListItem";
+export type {
+  ThreadState,
+  ThreadMethods,
+  ThreadMeta,
+  ThreadEvents,
+  ThreadClientSchema,
+} from "./thread";
+export type {
+  MessageState,
+  MessageMethods,
+  MessageMeta,
+  MessageClientSchema,
+} from "./message";
+export type {
+  PartState,
+  PartMethods,
+  PartMeta,
+  PartClientSchema,
+} from "./part";
+export type {
+  ComposerState,
+  ComposerMethods,
+  ComposerMeta,
+  ComposerEvents,
+  ComposerClientSchema,
+} from "./composer";
+export type {
+  AttachmentState,
+  AttachmentMethods,
+  AttachmentMeta,
+  AttachmentClientSchema,
+} from "./attachment";
+export type { ToolsState, ToolsMethods, ToolsClientSchema } from "./tools";
+export type {
+  ModelContextState,
+  ModelContextMethods,
+  ModelContextClientSchema,
+} from "./modelContext";