@assistant-ui/react 0.0.12 → 0.0.13

package/dist/index.d.mts

@@ -55,8 +55,18 @@ declare const ThreadScrollToBottom: react.ForwardRefExoticComponent<Pick<Omit<re
     asChild?: boolean;
 }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
 
+declare const ThreadSuggestion: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & {
+    prompt: string;
+    method: "replace";
+    autoSend?: boolean;
+} & react.RefAttributes<HTMLButtonElement>>;
+
 declare namespace index$4 {
-  export { ThreadEmpty as Empty, ThreadIf as If, ThreadMessages as Messages, ThreadRoot as Root, ThreadScrollToBottom as ScrollToBottom, ThreadViewport as Viewport };
+  export { ThreadEmpty as Empty, ThreadIf as If, ThreadMessages as Messages, ThreadRoot as Root, ThreadScrollToBottom as ScrollToBottom, ThreadSuggestion as Suggestion, ThreadViewport as Viewport };
 }
 
 declare const ComposerRoot: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & {

package/dist/index.d.ts

@@ -55,8 +55,18 @@ declare const ThreadScrollToBottom: react.ForwardRefExoticComponent<Pick<Omit<re
     asChild?: boolean;
 }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
 
+declare const ThreadSuggestion: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & {
+    prompt: string;
+    method: "replace";
+    autoSend?: boolean;
+} & react.RefAttributes<HTMLButtonElement>>;
+
 declare namespace index$4 {
-  export { ThreadEmpty as Empty, ThreadIf as If, ThreadMessages as Messages, ThreadRoot as Root, ThreadScrollToBottom as ScrollToBottom, ThreadViewport as Viewport };
+  export { ThreadEmpty as Empty, ThreadIf as If, ThreadMessages as Messages, ThreadRoot as Root, ThreadScrollToBottom as ScrollToBottom, ThreadSuggestion as Suggestion, ThreadViewport as Viewport };
 }
 
 declare const ComposerRoot: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & {

package/dist/index.js

@@ -54,6 +54,7 @@ __export(thread_exports, {
   Messages: () => ThreadMessages,
   Root: () => ThreadRoot,
   ScrollToBottom: () => ThreadScrollToBottom,
+  Suggestion: () => ThreadSuggestion,
   Viewport: () => ThreadViewport
 });
 
@@ -528,6 +529,33 @@ var ThreadScrollToBottom = (0, import_react10.forwardRef)(({ onClick, ...rest },
   );
 });
 
+// src/primitives/thread/ThreadSuggestion.tsx
+var import_primitive4 = require("@radix-ui/primitive");
+var import_react_primitive5 = require("@radix-ui/react-primitive");
+var import_react11 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ThreadSuggestion = (0, import_react11.forwardRef)(({ onClick, prompt, method, autoSend: send, ...rest }, ref) => {
+  const { useThread, useComposer } = useAssistantContext();
+  const isDisabled = useThread((t) => t.isRunning);
+  const handleApplySuggestion = () => {
+    const thread = useThread.getState();
+    const composer = useComposer.getState();
+    composer.setValue(prompt);
+    if (send && !thread.isRunning) {
+      composer.send();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_react_primitive5.Primitive.button,
+    {
+      ...rest,
+      disabled: isDisabled,
+      ref,
+      onClick: (0, import_primitive4.composeEventHandlers)(onClick, handleApplySuggestion)
+    }
+  );
+});
+
 // src/primitives/composer/index.ts
 var composer_exports = {};
 __export(composer_exports, {
@@ -539,16 +567,16 @@ __export(composer_exports, {
 });
 
 // src/primitives/composer/ComposerRoot.tsx
-var import_primitive4 = require("@radix-ui/primitive");
+var import_primitive5 = require("@radix-ui/primitive");
 var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
-var import_react_primitive5 = require("@radix-ui/react-primitive");
-var import_react11 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var ComposerRoot = (0, import_react11.forwardRef)(
+var import_react_primitive6 = require("@radix-ui/react-primitive");
+var import_react12 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ComposerRoot = (0, import_react12.forwardRef)(
   ({ onSubmit, ...rest }, forwardedRef) => {
     const { useViewport } = useAssistantContext();
     const { useComposer } = useComposerContext();
-    const formRef = (0, import_react11.useRef)(null);
+    const formRef = (0, import_react12.useRef)(null);
     const ref = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, formRef);
     const handleSubmit = (e) => {
       const composerState = useComposer.getState();
@@ -558,25 +586,25 @@ var ComposerRoot = (0, import_react11.forwardRef)(
       composerState.send();
       useViewport.getState().scrollToBottom();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_primitive5.Primitive.form,
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react_primitive6.Primitive.form,
       {
         ...rest,
         ref,
-        onSubmit: (0, import_primitive4.composeEventHandlers)(onSubmit, handleSubmit)
+        onSubmit: (0, import_primitive5.composeEventHandlers)(onSubmit, handleSubmit)
       }
     );
   }
 );
 
 // src/primitives/composer/ComposerInput.tsx
-var import_primitive5 = require("@radix-ui/primitive");
+var import_primitive6 = require("@radix-ui/primitive");
 var import_react_compose_refs3 = require("@radix-ui/react-compose-refs");
 var import_react_slot = require("@radix-ui/react-slot");
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var ComposerInput = (0, import_react12.forwardRef)(
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ComposerInput = (0, import_react13.forwardRef)(
   ({ autoFocus, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
     const { useThread, useViewport } = useAssistantContext();
     const { useComposer, type } = useComposerContext();
@@ -603,10 +631,10 @@ var ComposerInput = (0, import_react12.forwardRef)(
         }
       }
     };
-    const textareaRef = (0, import_react12.useRef)(null);
+    const textareaRef = (0, import_react13.useRef)(null);
     const ref = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, textareaRef);
     const autoFocusEnabled = autoFocus !== false && !disabled;
-    const focus = (0, import_react12.useCallback)(() => {
+    const focus = (0, import_react13.useCallback)(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled)
         return;
@@ -616,41 +644,41 @@ var ComposerInput = (0, import_react12.forwardRef)(
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    (0, import_react12.useEffect)(() => focus(), [focus]);
+    (0, import_react13.useEffect)(() => focus(), [focus]);
     useOnScrollToBottom(() => {
       if (type === "assistant") {
         focus();
       }
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Component,
       {
         value,
         ...rest,
         ref,
         disabled,
-        onChange: (0, import_primitive5.composeEventHandlers)(onChange, (e) => {
+        onChange: (0, import_primitive6.composeEventHandlers)(onChange, (e) => {
           const composerState = useComposer.getState();
           if (!composerState.isEditing)
             return;
           return composerState.setValue(e.target.value);
         }),
-        onKeyDown: (0, import_primitive5.composeEventHandlers)(onKeyDown, handleKeyPress)
+        onKeyDown: (0, import_primitive6.composeEventHandlers)(onKeyDown, handleKeyPress)
       }
     );
   }
 );
 
 // src/primitives/composer/ComposerSend.tsx
-var import_react_primitive6 = require("@radix-ui/react-primitive");
-var import_react13 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var ComposerSend = (0, import_react13.forwardRef)(
+var import_react_primitive7 = require("@radix-ui/react-primitive");
+var import_react14 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ComposerSend = (0, import_react14.forwardRef)(
   ({ disabled, ...rest }, ref) => {
     const { useComposer } = useComposerContext();
     const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_react_primitive6.Primitive.button,
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react_primitive7.Primitive.button,
       {
         type: "submit",
         ...rest,
@@ -662,22 +690,22 @@ var ComposerSend = (0, import_react13.forwardRef)(
 );
 
 // src/primitives/composer/ComposerCancel.tsx
-var import_primitive6 = require("@radix-ui/primitive");
-var import_react_primitive7 = require("@radix-ui/react-primitive");
-var import_react14 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var ComposerCancel = (0, import_react14.forwardRef)(({ onClick, ...rest }, ref) => {
+var import_primitive7 = require("@radix-ui/primitive");
+var import_react_primitive8 = require("@radix-ui/react-primitive");
+var import_react15 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var ComposerCancel = (0, import_react15.forwardRef)(({ onClick, ...rest }, ref) => {
   const { useComposer } = useComposerContext();
   const handleCancel = () => {
     useComposer.getState().cancel();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react_primitive7.Primitive.button,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_react_primitive8.Primitive.button,
     {
       type: "button",
       ...rest,
       ref,
-      onClick: (0, import_primitive6.composeEventHandlers)(onClick, handleCancel)
+      onClick: (0, import_primitive7.composeEventHandlers)(onClick, handleCancel)
     }
   );
 });
@@ -693,10 +721,10 @@ __export(branchPicker_exports, {
 });
 
 // src/utils/context/combined/useCombinedStore.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/utils/context/combined/createCombinedStore.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var createCombinedStore = (stores) => {
   const subscribe = (callback) => {
     const unsubscribes = stores.map((store) => store.subscribe(callback));
@@ -708,13 +736,13 @@ var createCombinedStore = (stores) => {
   };
   return (selector) => {
     const getSnapshot = () => selector(...stores.map((store) => store.getState()));
-    return (0, import_react15.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+    return (0, import_react16.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
   };
 };
 
 // src/utils/context/combined/useCombinedStore.ts
 var useCombinedStore = (stores, selector) => {
-  const useCombined = (0, import_react16.useMemo)(() => createCombinedStore(stores), stores);
+  const useCombined = (0, import_react17.useMemo)(() => createCombinedStore(stores), stores);
   return useCombined(selector);
 };
 
@@ -735,22 +763,22 @@ var useGoToNextBranch = () => {
 };
 
 // src/utils/createActionButton.tsx
-var import_primitive7 = require("@radix-ui/primitive");
-var import_react_primitive8 = require("@radix-ui/react-primitive");
-var import_react17 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_primitive8 = require("@radix-ui/primitive");
+var import_react_primitive9 = require("@radix-ui/react-primitive");
+var import_react18 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var createActionButton = (useActionButton) => {
-  return (0, import_react17.forwardRef)(
+  return (0, import_react18.forwardRef)(
     (props, forwardedRef) => {
       const onClick = useActionButton(props);
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        import_react_primitive8.Primitive.button,
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_react_primitive9.Primitive.button,
         {
           type: "button",
           disabled: !onClick,
           ...props,
           ref: forwardedRef,
-          onClick: (0, import_primitive7.composeEventHandlers)(props.onClick, onClick ?? void 0)
+          onClick: (0, import_primitive8.composeEventHandlers)(props.onClick, onClick ?? void 0)
         }
       );
     }
@@ -783,27 +811,27 @@ var useGoToPreviousBranch = () => {
 var BranchPickerPrevious = createActionButton(useGoToPreviousBranch);
 
 // src/primitives/branchPicker/BranchPickerCount.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var BranchPickerCount = () => {
   const { useMessage } = useMessageContext();
   const branchCount = useMessage((s) => s.branches.length);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: branchCount });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: branchCount });
 };
 
 // src/primitives/branchPicker/BranchPickerNumber.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var BranchPickerNumber = () => {
   const { useMessage } = useMessageContext();
   const branchIdx = useMessage((s) => s.branches.indexOf(s.message.id));
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: branchIdx + 1 });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: branchIdx + 1 });
 };
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
-var import_react_primitive9 = require("@radix-ui/react-primitive");
-var import_react18 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var BranchPickerRoot = (0, import_react18.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_primitive9.Primitive.div, { ...rest, ref }) });
+var import_react_primitive10 = require("@radix-ui/react-primitive");
+var import_react19 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var BranchPickerRoot = (0, import_react19.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_primitive10.Primitive.div, { ...rest, ref }) });
 });
 
 // src/primitives/actionBar/index.ts
@@ -816,10 +844,10 @@ __export(actionBar_exports, {
 });
 
 // src/primitives/actionBar/ActionBarRoot.tsx
-var import_react_primitive10 = require("@radix-ui/react-primitive");
-var import_react19 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var ActionBarRoot = (0, import_react19.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
+var import_react_primitive11 = require("@radix-ui/react-primitive");
+var import_react20 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var ActionBarRoot = (0, import_react20.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
   const { useThread } = useAssistantContext();
   const { useMessage } = useMessageContext();
   const hideAndfloatStatus = useCombinedStore(
@@ -839,8 +867,8 @@ var ActionBarRoot = (0, import_react19.forwardRef)(({ hideWhenRunning, autohide,
   );
   if (hideAndfloatStatus === "hidden" /* Hidden */)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_react_primitive10.Primitive.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_react_primitive11.Primitive.div,
     {
       "data-floating": hideAndfloatStatus === "floating" /* Floating */,
       ...rest,
@@ -909,10 +937,10 @@ var useBeginMessageEdit = () => {
 var ActionBarEdit = createActionButton(useBeginMessageEdit);
 
 // src/adapters/vercel/VercelAIAssistantProvider.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/adapters/vercel/useDummyAIAssistantContext.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_zustand4 = require("zustand");
 
 // src/utils/context/stores/ViewportStore.tsx
@@ -958,7 +986,7 @@ var makeDummyThreadStore = () => {
   }));
 };
 var useDummyAIAssistantContext = () => {
-  const [context] = (0, import_react20.useState)(() => {
+  const [context] = (0, import_react21.useState)(() => {
     const useThread = makeDummyThreadStore();
     const useViewport = makeViewportStore();
     const useComposer = makeThreadComposerStore(useThread);
@@ -968,7 +996,7 @@ var useDummyAIAssistantContext = () => {
 };
 
 // src/adapters/vercel/useVercelAIBranches.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/adapters/MessageRepository.tsx
 var import_non_secure = require("nanoid/non-secure");
@@ -1128,10 +1156,10 @@ var hasUpcomingMessage = (isRunning, messages) => {
   return isRunning && messages[messages.length - 1]?.role !== "assistant";
 };
 var useVercelAIBranches = (chat, messages) => {
-  const [data] = (0, import_react21.useState)(() => new MessageRepository());
+  const [data] = (0, import_react22.useState)(() => new MessageRepository());
   const isRunning = "isLoading" in chat ? chat.isLoading : chat.status === "in_progress";
-  const assistantOptimisticIdRef = (0, import_react21.useRef)(null);
-  const messagesEx = (0, import_react21.useMemo)(() => {
+  const assistantOptimisticIdRef = (0, import_react22.useRef)(null);
+  const messagesEx = (0, import_react22.useMemo)(() => {
     for (const message of messages) {
       data.addOrUpdateMessage(message);
     }
@@ -1149,13 +1177,13 @@ var useVercelAIBranches = (chat, messages) => {
     );
     return data.getMessages();
   }, [data, isRunning, messages]);
-  const getBranches = (0, import_react21.useCallback)(
+  const getBranches = (0, import_react22.useCallback)(
     (messageId) => {
       return data.getBranches(messageId);
     },
     [data]
   );
-  const switchToBranch = (0, import_react21.useCallback)(
+  const switchToBranch = (0, import_react22.useCallback)(
     (messageId) => {
       data.switchToBranch(messageId);
       chat.setMessages(
@@ -1165,7 +1193,7 @@ var useVercelAIBranches = (chat, messages) => {
     [data, chat.setMessages]
   );
   const reloadMaybe = "reload" in chat ? chat.reload : void 0;
-  const startRun = (0, import_react21.useCallback)(
+  const startRun = (0, import_react22.useCallback)(
     async (parentId) => {
       if (!reloadMaybe)
         throw new Error("Reload not supported by Vercel AI SDK's useAssistant");
@@ -1175,7 +1203,7 @@ var useVercelAIBranches = (chat, messages) => {
     },
     [chat.messages, chat.setMessages, reloadMaybe]
   );
-  const append = (0, import_react21.useCallback)(
+  const append = (0, import_react22.useCallback)(
     async (message) => {
       if (message.content.length !== 1 || message.content[0]?.type !== "text")
         throw new Error("Only text content is supported by Vercel AI SDK");
@@ -1188,7 +1216,7 @@ var useVercelAIBranches = (chat, messages) => {
     },
     [chat.messages, chat.setMessages, chat.append]
   );
-  return (0, import_react21.useMemo)(
+  return (0, import_react22.useMemo)(
     () => ({
       messages: messagesEx,
       getBranches,
@@ -1201,7 +1229,7 @@ var useVercelAIBranches = (chat, messages) => {
 };
 
 // src/adapters/vercel/VercelAIAssistantProvider.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var ThreadMessageCache = /* @__PURE__ */ new WeakMap();
 var vercelToThreadMessage = (message, parentId) => {
   if (message.role !== "user" && message.role !== "assistant")
@@ -1232,11 +1260,11 @@ var VercelAIAssistantProvider = ({
 }) => {
   const context = useDummyAIAssistantContext();
   const vercel = "chat" in rest ? rest.chat : rest.assistant;
-  const messages = (0, import_react22.useMemo)(() => {
+  const messages = (0, import_react23.useMemo)(() => {
     return vercelToCachedThreadMessages(vercel.messages);
   }, [vercel.messages]);
   const branches = useVercelAIBranches(vercel, messages);
-  const cancelRun = (0, import_react22.useCallback)(() => {
+  const cancelRun = (0, import_react23.useCallback)(() => {
     const lastMessage = vercel.messages.at(-1);
     vercel.stop();
     if (lastMessage?.role === "user") {
@@ -1244,7 +1272,7 @@ var VercelAIAssistantProvider = ({
     }
   }, [vercel.messages, vercel.stop, vercel.setInput]);
   const isRunning = "isLoading" in vercel ? vercel.isLoading : vercel.status === "in_progress";
-  (0, import_react22.useMemo)(() => {
+  (0, import_react23.useMemo)(() => {
     context.useThread.setState(
       {
         messages: branches.messages,
@@ -1258,18 +1286,18 @@ var VercelAIAssistantProvider = ({
       true
     );
   }, [context, isRunning, cancelRun, branches]);
-  (0, import_react22.useMemo)(() => {
+  (0, import_react23.useMemo)(() => {
     context.useComposer.setState({
       value: vercel.input,
       setValue: vercel.setInput
     });
   }, [context, vercel.input, vercel.setInput]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AssistantContext.Provider, { value: context, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AssistantContext.Provider, { value: context, children });
 };
 
 // src/adapters/vercel/VercelRSCAssistantProvider.tsx
-var import_react23 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react24 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var ThreadMessageCache2 = /* @__PURE__ */ new WeakMap();
 var vercelToThreadMessage2 = (parentId, message) => {
   if (message.role !== "user" && message.role !== "assistant")
@@ -1295,10 +1323,10 @@ var vercelToCachedThreadMessages2 = (messages) => {
 };
 var VercelRSCAssistantProvider = ({ children, messages: vercelMessages, append: vercelAppend }) => {
   const context = useDummyAIAssistantContext();
-  const messages = (0, import_react23.useMemo)(() => {
+  const messages = (0, import_react24.useMemo)(() => {
     return vercelToCachedThreadMessages2(vercelMessages);
   }, [vercelMessages]);
-  const append = (0, import_react23.useCallback)(
+  const append = (0, import_react24.useCallback)(
     async (message) => {
       if (message.parentId !== (context.useThread.getState().messages.at(-1)?.id ?? null))
         throw new Error("Unexpected: Message editing is not supported");
@@ -1309,13 +1337,13 @@ var VercelRSCAssistantProvider = ({ children, messages: vercelMessages, append:
     },
     [context, vercelAppend]
   );
-  (0, import_react23.useMemo)(() => {
+  (0, import_react24.useMemo)(() => {
     context.useThread.setState({
       messages,
       append
     });
   }, [context, messages, append]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AssistantContext.Provider, { value: context, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssistantContext.Provider, { value: context, children });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -12,6 +12,7 @@ __export(thread_exports, {
   Messages: () => ThreadMessages,
   Root: () => ThreadRoot,
   ScrollToBottom: () => ThreadScrollToBottom,
+  Suggestion: () => ThreadSuggestion,
   Viewport: () => ThreadViewport
 });
 
@@ -496,6 +497,35 @@ var ThreadScrollToBottom = forwardRef4(({ onClick, ...rest }, ref) => {
   );
 });
 
+// src/primitives/thread/ThreadSuggestion.tsx
+import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primitive";
+import {
+  Primitive as Primitive5
+} from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ThreadSuggestion = forwardRef5(({ onClick, prompt, method, autoSend: send, ...rest }, ref) => {
+  const { useThread, useComposer } = useAssistantContext();
+  const isDisabled = useThread((t) => t.isRunning);
+  const handleApplySuggestion = () => {
+    const thread = useThread.getState();
+    const composer = useComposer.getState();
+    composer.setValue(prompt);
+    if (send && !thread.isRunning) {
+      composer.send();
+    }
+  };
+  return /* @__PURE__ */ jsx9(
+    Primitive5.button,
+    {
+      ...rest,
+      disabled: isDisabled,
+      ref,
+      onClick: composeEventHandlers4(onClick, handleApplySuggestion)
+    }
+  );
+});
+
 // src/primitives/composer/index.ts
 var composer_exports = {};
 __export(composer_exports, {
@@ -507,14 +537,14 @@ __export(composer_exports, {
 });
 
 // src/primitives/composer/ComposerRoot.tsx
-import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primitive";
+import { composeEventHandlers as composeEventHandlers5 } from "@radix-ui/primitive";
 import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
 import {
-  Primitive as Primitive5
+  Primitive as Primitive6
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef5, useRef as useRef4 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var ComposerRoot = forwardRef5(
+import { forwardRef as forwardRef6, useRef as useRef4 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var ComposerRoot = forwardRef6(
   ({ onSubmit, ...rest }, forwardedRef) => {
     const { useViewport } = useAssistantContext();
     const { useComposer } = useComposerContext();
@@ -528,30 +558,30 @@ var ComposerRoot = forwardRef5(
       composerState.send();
       useViewport.getState().scrollToBottom();
     };
-    return /* @__PURE__ */ jsx9(
-      Primitive5.form,
+    return /* @__PURE__ */ jsx10(
+      Primitive6.form,
       {
         ...rest,
         ref,
-        onSubmit: composeEventHandlers4(onSubmit, handleSubmit)
+        onSubmit: composeEventHandlers5(onSubmit, handleSubmit)
       }
     );
   }
 );
 
 // src/primitives/composer/ComposerInput.tsx
-import { composeEventHandlers as composeEventHandlers5 } from "@radix-ui/primitive";
+import { composeEventHandlers as composeEventHandlers6 } from "@radix-ui/primitive";
 import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
 import { Slot } from "@radix-ui/react-slot";
 import {
-  forwardRef as forwardRef6,
+  forwardRef as forwardRef7,
   useCallback,
   useEffect as useEffect2,
   useRef as useRef5
 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var ComposerInput = forwardRef6(
+import { jsx as jsx11 } from "react/jsx-runtime";
+var ComposerInput = forwardRef7(
   ({ autoFocus, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
     const { useThread, useViewport } = useAssistantContext();
     const { useComposer, type } = useComposerContext();
@@ -597,20 +627,20 @@ var ComposerInput = forwardRef6(
         focus();
       }
     });
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       Component,
       {
         value,
         ...rest,
         ref,
         disabled,
-        onChange: composeEventHandlers5(onChange, (e) => {
+        onChange: composeEventHandlers6(onChange, (e) => {
           const composerState = useComposer.getState();
           if (!composerState.isEditing)
             return;
           return composerState.setValue(e.target.value);
         }),
-        onKeyDown: composeEventHandlers5(onKeyDown, handleKeyPress)
+        onKeyDown: composeEventHandlers6(onKeyDown, handleKeyPress)
       }
     );
   }
@@ -618,16 +648,16 @@ var ComposerInput = forwardRef6(
 
 // src/primitives/composer/ComposerSend.tsx
 import {
-  Primitive as Primitive6
+  Primitive as Primitive7
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var ComposerSend = forwardRef7(
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var ComposerSend = forwardRef8(
   ({ disabled, ...rest }, ref) => {
     const { useComposer } = useComposerContext();
     const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
-    return /* @__PURE__ */ jsx11(
-      Primitive6.button,
+    return /* @__PURE__ */ jsx12(
+      Primitive7.button,
       {
         type: "submit",
         ...rest,
@@ -639,24 +669,24 @@ var ComposerSend = forwardRef7(
 );
 
 // src/primitives/composer/ComposerCancel.tsx
-import { composeEventHandlers as composeEventHandlers6 } from "@radix-ui/primitive";
+import { composeEventHandlers as composeEventHandlers7 } from "@radix-ui/primitive";
 import {
-  Primitive as Primitive7
+  Primitive as Primitive8
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var ComposerCancel = forwardRef8(({ onClick, ...rest }, ref) => {
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var ComposerCancel = forwardRef9(({ onClick, ...rest }, ref) => {
   const { useComposer } = useComposerContext();
   const handleCancel = () => {
     useComposer.getState().cancel();
   };
-  return /* @__PURE__ */ jsx12(
-    Primitive7.button,
+  return /* @__PURE__ */ jsx13(
+    Primitive8.button,
     {
       type: "button",
       ...rest,
       ref,
-      onClick: composeEventHandlers6(onClick, handleCancel)
+      onClick: composeEventHandlers7(onClick, handleCancel)
     }
   );
 });
@@ -714,24 +744,24 @@ var useGoToNextBranch = () => {
 };
 
 // src/utils/createActionButton.tsx
-import { composeEventHandlers as composeEventHandlers7 } from "@radix-ui/primitive";
+import { composeEventHandlers as composeEventHandlers8 } from "@radix-ui/primitive";
 import {
-  Primitive as Primitive8
+  Primitive as Primitive9
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var createActionButton = (useActionButton) => {
-  return forwardRef9(
+  return forwardRef10(
     (props, forwardedRef) => {
       const onClick = useActionButton(props);
-      return /* @__PURE__ */ jsx13(
-        Primitive8.button,
+      return /* @__PURE__ */ jsx14(
+        Primitive9.button,
         {
           type: "button",
           disabled: !onClick,
           ...props,
           ref: forwardedRef,
-          onClick: composeEventHandlers7(props.onClick, onClick ?? void 0)
+          onClick: composeEventHandlers8(props.onClick, onClick ?? void 0)
         }
       );
     }
@@ -764,29 +794,29 @@ var useGoToPreviousBranch = () => {
 var BranchPickerPrevious = createActionButton(useGoToPreviousBranch);
 
 // src/primitives/branchPicker/BranchPickerCount.tsx
-import { Fragment as Fragment3, jsx as jsx14 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx15 } from "react/jsx-runtime";
 var BranchPickerCount = () => {
   const { useMessage } = useMessageContext();
   const branchCount = useMessage((s) => s.branches.length);
-  return /* @__PURE__ */ jsx14(Fragment3, { children: branchCount });
+  return /* @__PURE__ */ jsx15(Fragment3, { children: branchCount });
 };
 
 // src/primitives/branchPicker/BranchPickerNumber.tsx
-import { Fragment as Fragment4, jsx as jsx15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx16 } from "react/jsx-runtime";
 var BranchPickerNumber = () => {
   const { useMessage } = useMessageContext();
   const branchIdx = useMessage((s) => s.branches.indexOf(s.message.id));
-  return /* @__PURE__ */ jsx15(Fragment4, { children: branchIdx + 1 });
+  return /* @__PURE__ */ jsx16(Fragment4, { children: branchIdx + 1 });
 };
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
 import {
-  Primitive as Primitive9
+  Primitive as Primitive10
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var BranchPickerRoot = forwardRef10(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx16(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx16(Primitive9.div, { ...rest, ref }) });
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var BranchPickerRoot = forwardRef11(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx17(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx17(Primitive10.div, { ...rest, ref }) });
 });
 
 // src/primitives/actionBar/index.ts
@@ -800,11 +830,11 @@ __export(actionBar_exports, {
 
 // src/primitives/actionBar/ActionBarRoot.tsx
 import {
-  Primitive as Primitive10
+  Primitive as Primitive11
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var ActionBarRoot = forwardRef11(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var ActionBarRoot = forwardRef12(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
   const { useThread } = useAssistantContext();
   const { useMessage } = useMessageContext();
   const hideAndfloatStatus = useCombinedStore(
@@ -824,8 +854,8 @@ var ActionBarRoot = forwardRef11(({ hideWhenRunning, autohide, autohideFloat, ..
   );
   if (hideAndfloatStatus === "hidden" /* Hidden */)
     return null;
-  return /* @__PURE__ */ jsx17(
-    Primitive10.div,
+  return /* @__PURE__ */ jsx18(
+    Primitive11.div,
     {
       "data-floating": hideAndfloatStatus === "floating" /* Floating */,
       ...rest,
@@ -1186,7 +1216,7 @@ var useVercelAIBranches = (chat, messages) => {
 };
 
 // src/adapters/vercel/VercelAIAssistantProvider.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var ThreadMessageCache = /* @__PURE__ */ new WeakMap();
 var vercelToThreadMessage = (message, parentId) => {
   if (message.role !== "user" && message.role !== "assistant")
@@ -1249,7 +1279,7 @@ var VercelAIAssistantProvider = ({
       setValue: vercel.setInput
     });
   }, [context, vercel.input, vercel.setInput]);
-  return /* @__PURE__ */ jsx18(AssistantContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx19(AssistantContext.Provider, { value: context, children });
 };
 
 // src/adapters/vercel/VercelRSCAssistantProvider.tsx
@@ -1257,7 +1287,7 @@ import {
   useCallback as useCallback4,
   useMemo as useMemo5
 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ThreadMessageCache2 = /* @__PURE__ */ new WeakMap();
 var vercelToThreadMessage2 = (parentId, message) => {
   if (message.role !== "user" && message.role !== "assistant")
@@ -1303,7 +1333,7 @@ var VercelRSCAssistantProvider = ({ children, messages: vercelMessages, append:
       append
     });
   }, [context, messages, append]);
-  return /* @__PURE__ */ jsx19(AssistantContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx20(AssistantContext.Provider, { value: context, children });
 };
 export {
   actionBar_exports as ActionBarPrimitive,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "license": "MIT",
   "exports": {
     ".": {