feat: add attachmentAccept to ThreadComposer (#851)

packages/react-hook-form/src/useAssistantForm.tsx

@@ -3,7 +3,6 @@
 import {
   type ModelConfig,
   type ToolCallContentPartComponent,
-  useAssistantActionsStore,
   useAssistantToolUI,
 } from "@assistant-ui/react";
 import { useEffect } from "react";
@@ -15,6 +14,7 @@ import {
 } from "react-hook-form";
 import type { z } from "zod";
 import { formTools } from "./formTools";
+import { useAssistantActionsStore } from "@assistant-ui/react";
 
 export type UseAssistantFormProps<
   TFieldValues extends FieldValues,

packages/react-playground/src/components/ui/assistant-ui/assistant-playground.tsx

@@ -324,7 +324,7 @@ const Sidebar: FC<AssistantPlaygroundProps> = ({
 }) => {
   const assistantActionsStore = useAssistantActionsStore();
   const handleReset = () => {
-    assistantActionsStore.getState().switchToThread(null);
+    assistantActionsStore.getState().switchToNewThread();
   };
 
   return (

packages/react/src/context/providers/ThreadProvider.tsx

@@ -67,12 +67,14 @@ export const ThreadProvider: FC<PropsWithChildren<ThreadProviderProps>> = ({
       if (
         thread.composer.isEmpty !== composerState.isEmpty ||
         thread.composer.text !== composerState.text ||
+        thread.composer.attachmentAccept !== composerState.attachmentAccept ||
         thread.composer.attachments !== composerState.attachments ||
         state.capabilities.cancel !== composerState.canCancel
       ) {
         writableStore(context.useComposer).setState({
           isEmpty: thread.composer.isEmpty,
           text: thread.composer.text,
+          attachmentAccept: thread.composer.attachmentAccept,
           attachments: thread.composer.attachments,
           canCancel: state.capabilities.cancel,
         });

packages/react/src/context/stores/AssistantActions.tsx

@@ -4,9 +4,12 @@ import { MutableRefObject } from "react";
 import { ModelConfigProvider, Unsubscribe } from "../../types";
 
 export type AssistantActionsState = Readonly<{
+  /**
+   * @deprecated Use `switchToNewThread` instead. This will be removed in 0.6.0.
+   */
   switchToThread: (threadId: string | null) => void;
+  switchToNewThread: () => void;
   registerModelConfigProvider: (provider: ModelConfigProvider) => Unsubscribe;
-  getRuntime: () => AssistantRuntime;
 }>;
 
 export const makeAssistantActionsStore = (
@@ -15,6 +18,7 @@ export const makeAssistantActionsStore = (
   create<AssistantActionsState>(() =>
     Object.freeze({
       switchToThread: () => runtimeRef.current.switchToThread(null),
+      switchToNewThread: () => runtimeRef.current.switchToNewThread(),
       registerModelConfigProvider: (provider: ModelConfigProvider) =>
         runtimeRef.current.registerModelConfigProvider(provider),
       getRuntime: () => runtimeRef.current,

packages/react/src/context/stores/ThreadComposer.ts

@@ -12,6 +12,8 @@ export type ThreadComposerState = Readonly<{
   /** @deprecated Use `setText` instead. */
   setValue: (value: string) => void;
 
+  attachmentAccept: string;
+
   attachments: readonly ThreadComposerAttachment[];
   addAttachment: (file: File) => void;
   removeAttachment: (attachmentId: string) => void;
@@ -47,6 +49,8 @@ export const makeThreadComposerStore = (
         get().setText(value);
       },
 
+      attachmentAccept: runtime.composer.attachmentAccept,
+
       attachments: runtime.composer.attachments,
       addAttachment: (file) => {
         useThreadRuntime.getState().composer.addAttachment(file);

packages/react/src/hooks/useSwitchToNewThread.tsx

@@ -2,11 +2,14 @@ import { useCallback } from "react";
 import { useAssistantActionsStore } from "../context";
 import { useThreadComposerStore } from "../context/react/ThreadContext";
 
+/**
+ * @deprecated Use `useRuntimeActions().switchToNewThread()` instead. This will be removed in 0.6.0.
+ */
 export const useSwitchToNewThread = () => {
   const assistantActionsStore = useAssistantActionsStore();
   const threadComposerStore = useThreadComposerStore();
   const switchToNewThread = useCallback(() => {
-    assistantActionsStore.getState().switchToThread(null);
+    assistantActionsStore.getState().switchToNewThread();
     threadComposerStore.getState().focus();
   }, [assistantActionsStore, threadComposerStore]);
 

packages/react/src/model-config/useAssistantInstructions.tsx

@@ -1,16 +1,16 @@
 "use client";
 
 import { useEffect } from "react";
-import { useAssistantRuntimeStore } from "../context";
+import { useAssistantActionsStore } from "../context";
 
 export const useAssistantInstructions = (instruction: string) => {
-  const runtimeStore = useAssistantRuntimeStore();
+  const actionsStore = useAssistantActionsStore();
   useEffect(() => {
     const config = {
       system: instruction,
     };
-    return runtimeStore
+    return actionsStore
       .getState()
       .registerModelConfigProvider({ getModelConfig: () => config });
-  }, [runtimeStore, instruction]);
+  }, [actionsStore, instruction]);
 };

packages/react/src/primitive-hooks/composer/useComposerAddAttachment.tsx

@@ -1,15 +1,15 @@
 import { useCallback } from "react";
-import { useComposer, useThreadRuntimeStore } from "../../context";
+import { useComposer } from "../../context";
 import { useThreadComposerStore } from "../../context/react/ThreadContext";
 
 export const useComposerAddAttachment = () => {
   const disabled = useComposer((c) => !c.isEditing);
 
   const threadComposerStore = useThreadComposerStore();
-  const threadRuntimeStore = useThreadRuntimeStore();
+  const threadRuntimeStore = useThreadComposerStore();
   const callback = useCallback(() => {
     const { addAttachment } = threadComposerStore.getState();
-    const { attachmentAccept } = threadRuntimeStore.getState().composer;
+    const { attachmentAccept } = threadRuntimeStore.getState();
 
     const input = document.createElement("input");
     input.type = "file";

packages/react/src/ui/thread-config.tsx

@@ -14,7 +14,7 @@ import { TextContentPartComponent, ToolCallContentPartProps } from "../types";
 import { AssistantRuntime } from "../runtimes";
 import { AssistantRuntimeProvider } from "../context";
 import { AssistantToolUI } from "../model-config";
-import { useAssistantRuntimeStore } from "../context/react/AssistantContext";
+import { useAssistantRuntimeStore as useAssistantActionsStore } from "../context/react/AssistantContext";
 
 export type SuggestionConfig = {
   text?: ReactNode;
@@ -167,7 +167,7 @@ export const ThreadConfigProvider: FC<ThreadConfigProviderProps> = ({
   children,
   config,
 }) => {
-  const hasAssistant = !!useAssistantRuntimeStore({ optional: true });
+  const hasAssistant = !!useAssistantActionsStore({ optional: true });
 
   const configProvider =
     config && Object.keys(config ?? {}).length > 0 ? (