@assistant-ui/react 0.12.8 → 0.12.10

package/src/legacy-runtime/runtime-cores/assistant-transport/useAssistantTransportRuntime.tsx

@@ -35,6 +35,36 @@ import { InMemoryThreadListAdapter } from "../remote-thread-list/adapter/in-memo
 import { useAui, useAuiState } from "@assistant-ui/store";
 import { UserExternalState } from "../../../augmentations";
 
+const convertAppendMessageToCommand = (
+  message: AppendMessage,
+): AddMessageCommand => {
+  if (message.role !== "user")
+    throw new Error("Only user messages are supported");
+
+  const parts: UserMessagePart[] = [];
+  const content = [
+    ...message.content,
+    ...(message.attachments?.flatMap((a) => a.content) ?? []),
+  ];
+  for (const contentPart of content) {
+    if (contentPart.type === "text") {
+      parts.push({ type: "text", text: contentPart.text });
+    } else if (contentPart.type === "image") {
+      parts.push({ type: "image", image: contentPart.image });
+    }
+  }
+
+  return {
+    type: "add-message",
+    message: {
+      role: "user",
+      parts,
+    },
+    parentId: message.parentId,
+    sourceId: message.sourceId,
+  };
+};
+
 const symbolAssistantTransportExtras = Symbol("assistant-transport-extras");
 type AssistantTransportExtras = {
   [symbolAssistantTransportExtras]: true;
@@ -74,8 +104,8 @@ export function useAssistantTransportState<T>(
 export function useAssistantTransportState<T>(
   selector: (state: UserExternalState) => T = (t) => t as T,
 ): T | UserExternalState {
-  return useAuiState(({ thread }) =>
-    selector(asAssistantTransportExtras(thread.extras).state),
+  return useAuiState((s) =>
+    selector(asAssistantTransportExtras(s.thread.extras).state),
   );
 }
 
@@ -90,7 +120,7 @@ const useAssistantTransportThreadRuntime = <T,>(
     onQueue: () => runManager.schedule(),
   });
 
-  const threadId = useAuiState(({ threadListItem }) => threadListItem.remoteId);
+  const threadId = useAuiState((s) => s.threadListItem.remoteId);
 
   const runManager = useRunManager({
     onRun: async (signal: AbortSignal) => {
@@ -254,37 +284,17 @@ const useAssistantTransportThreadRuntime = <T,>(
       state: agentStateRef.current as UserExternalState,
     } satisfies AssistantTransportExtras,
     onNew: async (message: AppendMessage): Promise<void> => {
-      if (message.role !== "user")
-        throw new Error("Only user messages are supported");
-
-      // Store parentId for the request
       parentIdRef.current = message.parentId;
-
-      // Convert AppendMessage to AddMessageCommand
-      const parts: UserMessagePart[] = [];
-
-      const content = [
-        ...message.content,
-        ...(message.attachments?.flatMap((a) => a.content) ?? []),
-      ];
-      for (const contentPart of content) {
-        if (contentPart.type === "text") {
-          parts.push({ type: "text", text: contentPart.text });
-        } else if (contentPart.type === "image") {
-          parts.push({ type: "image", image: contentPart.image });
-        }
-      }
-
-      const command: AddMessageCommand = {
-        type: "add-message",
-        message: {
-          role: "user",
-          parts,
-        },
-      };
-
+      const command = convertAppendMessageToCommand(message);
       commandQueue.enqueue(command);
     },
+    ...(options.capabilities?.edit && {
+      onEdit: async (message: AppendMessage): Promise<void> => {
+        parentIdRef.current = message.parentId;
+        const command = convertAppendMessageToCommand(message);
+        commandQueue.enqueue(command);
+      },
+    }),
     onCancel: async () => {
       runManager.cancel();
       await toolInvocations.abort();

package/src/legacy-runtime/runtime-cores/assistant-transport/useToolInvocations.ts

@@ -181,7 +181,7 @@ export function useToolInvocations({
 
               if (content.argsText !== lastState.argsText) {
                 if (lastState.argsComplete) {
-                  if (process.env["NODE_ENV"] !== "production") {
+                  if (process.env.NODE_ENV !== "production") {
                     console.warn(
                       "argsText updated after controller was closed:",
                       {
@@ -233,6 +233,13 @@ export function useToolInvocations({
               }
 
               if (content.result !== undefined && !lastState.hasResult) {
+                lastToolStates.current[content.toolCallId] = {
+                  hasResult: true,
+                  argsComplete: true,
+                  argsText: lastState.argsText,
+                  controller: lastState.controller,
+                };
+
                 lastState.controller.setResponse(
                   new ToolResponse({
                     result: content.result as ReadonlyJSONValue,
@@ -241,13 +248,6 @@ export function useToolInvocations({
                   }),
                 );
                 lastState.controller.close();
-
-                lastToolStates.current[content.toolCallId] = {
-                  hasResult: true,
-                  argsComplete: true,
-                  argsText: lastState.argsText,
-                  controller: lastState.controller,
-                };
               }
             }
 

package/src/legacy-runtime/runtime-cores/composer/BaseComposerRuntimeCore.tsx

@@ -11,6 +11,7 @@ import type {
   DictationState,
 } from "../core/ComposerRuntimeCore";
 import type { MessageRole, RunConfig } from "../../../types/AssistantTypes";
+import type { QuoteInfo } from "../../../types/QuoteTypes";
 import { BaseSubscribable } from "../remote-thread-list/BaseSubscribable";
 import type { DictationAdapter } from "../adapters/speech/SpeechAdapterTypes";
 
@@ -64,6 +65,19 @@ export abstract class BaseComposerRuntimeCore
     return this._runConfig;
   }
 
+  private _quote: QuoteInfo | undefined = undefined;
+
+  get quote() {
+    return this._quote;
+  }
+
+  public setQuote(quote: QuoteInfo | undefined) {
+    if (this._quote === quote) return;
+
+    this._quote = quote;
+    this._notifySubscribers();
+  }
+
   public setText(value: string) {
     if (this._text === value) return;
 
@@ -112,13 +126,15 @@ export abstract class BaseComposerRuntimeCore
       this._attachments.length === 0 &&
       this._text === "" &&
       this._role === "user" &&
-      Object.keys(this._runConfig).length === 0
+      Object.keys(this._runConfig).length === 0 &&
+      this._quote === undefined
     ) {
       return;
     }
 
     this._role = "user";
     this._runConfig = {};
+    this._quote = undefined;
 
     const task = this._onClearAttachments();
     this._emptyTextAndAttachments();
@@ -151,14 +167,17 @@ export abstract class BaseComposerRuntimeCore
         : [];
 
     const text = this.text;
+    const quote = this._quote;
+    this._quote = undefined;
     this._emptyTextAndAttachments();
+
     const message: Omit<AppendMessage, "parentId" | "sourceId"> = {
       createdAt: new Date(),
       role: this.role,
       content: text ? [{ type: "text", text }] : [],
       attachments: await attachments,
       runConfig: this.runConfig,
-      metadata: { custom: {} },
+      metadata: { custom: { ...(quote ? { quote } : {}) } },
     };
 
     this.handleSend(message);

package/src/legacy-runtime/runtime-cores/core/ComposerRuntimeCore.tsx

@@ -5,6 +5,7 @@ import type {
 } from "../../../types";
 import type { MessageRole, RunConfig } from "../../../types/AssistantTypes";
 import type { DictationAdapter } from "../adapters/speech/SpeechAdapterTypes";
+import type { QuoteInfo } from "../../../types/QuoteTypes";
 
 export type ComposerRuntimeEventType = "send" | "attachmentAdd";
 
@@ -49,6 +50,9 @@ export type ComposerRuntimeCore = Readonly<{
   runConfig: RunConfig;
   setRunConfig: (runConfig: RunConfig) => void;
 
+  quote: QuoteInfo | undefined;
+  setQuote: (quote: QuoteInfo | undefined) => void;
+
   reset: () => Promise<void>;
   clearAttachments: () => Promise<void>;
 

package/src/legacy-runtime/runtime-cores/external-store/createMessageConverter.tsx

@@ -63,8 +63,8 @@ export const createMessageConverter = <T extends object>(
         return undefined;
       });
 
-      const messageMessages = useAuiState<T[]>(({ message }) =>
-        getExternalStoreMessages(message),
+      const messageMessages = useAuiState<T[]>((s) =>
+        getExternalStoreMessages(s.message),
       );
 
       const messages = partMessages ?? messageMessages;

package/src/legacy-runtime/runtime-cores/local/useLocalRuntime.tsx

@@ -27,9 +27,7 @@ const useLocalThreadRuntime = (
   const [runtime] = useState(() => new LocalRuntimeCore(opt, initialMessages));
 
   const threadIdRef = useRef<string | undefined>(undefined);
-  threadIdRef.current = useAuiState(
-    ({ threadListItem }) => threadListItem.remoteId,
-  );
+  threadIdRef.current = useAuiState((s) => s.threadListItem.remoteId);
 
   useEffect(() => {
     runtime.threads

package/src/legacy-runtime/runtime-cores/remote-thread-list/EMPTY_THREAD_CORE.tsx

@@ -129,6 +129,12 @@ export const EMPTY_THREAD_CORE: ThreadRuntimeCore = {
       // noop
     },
 
+    quote: undefined,
+
+    setQuote() {
+      throw EMPTY_THREAD_ERROR;
+    },
+
     subscribe() {
       return () => {};
     },

package/src/primitives/actionBar/ActionBarCopy.tsx

@@ -37,15 +37,16 @@ const useActionBarPrimitiveCopy = ({
   copiedDuration?: number | undefined;
 } = {}) => {
   const aui = useAui();
-  const hasCopyableContent = useAuiState(({ message }) => {
+  const hasCopyableContent = useAuiState((s) => {
     return (
-      (message.role !== "assistant" || message.status?.type !== "running") &&
-      message.parts.some((c) => c.type === "text" && c.text.length > 0)
+      (s.message.role !== "assistant" ||
+        s.message.status?.type !== "running") &&
+      s.message.parts.some((c) => c.type === "text" && c.text.length > 0)
     );
   });
 
-  const isEditing = useAuiState(({ composer }) => composer.isEditing);
-  const composerValue = useAuiState(({ composer }) => composer.text);
+  const isEditing = useAuiState((s) => s.composer.isEditing);
+  const composerValue = useAuiState((s) => s.composer.text);
 
   const callback = useCallback(() => {
     const valueToCopy = isEditing ? composerValue : aui.message().getCopyText();
@@ -89,7 +90,7 @@ export const ActionBarPrimitiveCopy = forwardRef<
   ActionBarPrimitiveCopy.Element,
   ActionBarPrimitiveCopy.Props
 >(({ copiedDuration, onClick, disabled, ...props }, forwardedRef) => {
-  const isCopied = useAuiState(({ message }) => message.isCopied);
+  const isCopied = useAuiState((s) => s.message.isCopied);
   const callback = useActionBarPrimitiveCopy({ copiedDuration });
   return (
     <Primitive.button

package/src/primitives/actionBar/ActionBarEdit.tsx

@@ -31,7 +31,7 @@ import { useAuiState, useAui } from "@assistant-ui/store";
  */
 const useActionBarEdit = () => {
   const aui = useAui();
-  const disabled = useAuiState(({ composer }) => composer.isEditing);
+  const disabled = useAuiState((s) => s.composer.isEditing);
 
   const callback = useCallback(() => {
     aui.composer().beginEdit();

package/src/primitives/actionBar/ActionBarExportMarkdown.tsx

@@ -14,10 +14,11 @@ const useActionBarExportMarkdown = ({
   onExport?: ((content: string) => void | Promise<void>) | undefined;
 } = {}) => {
   const aui = useAui();
-  const hasExportableContent = useAuiState(({ message }) => {
+  const hasExportableContent = useAuiState((s) => {
     return (
-      (message.role !== "assistant" || message.status?.type !== "running") &&
-      message.parts.some((c) => c.type === "text" && c.text.length > 0)
+      (s.message.role !== "assistant" ||
+        s.message.status?.type !== "running") &&
+      s.message.parts.some((c) => c.type === "text" && c.text.length > 0)
     );
   });
 

package/src/primitives/actionBar/ActionBarSpeak.tsx

@@ -14,10 +14,11 @@ const useActionBarSpeak = () => {
     aui.message().speak();
   }, [aui]);
 
-  const hasSpeakableContent = useAuiState(({ message }) => {
+  const hasSpeakableContent = useAuiState((s) => {
     return (
-      (message.role !== "assistant" || message.status?.type !== "running") &&
-      message.parts.some((c) => c.type === "text" && c.text.length > 0)
+      (s.message.role !== "assistant" ||
+        s.message.status?.type !== "running") &&
+      s.message.parts.some((c) => c.type === "text" && c.text.length > 0)
     );
   });
 

package/src/primitives/actionBar/ActionBarStopSpeaking.tsx

@@ -10,7 +10,7 @@ import { useAuiState, useAui } from "@assistant-ui/store";
 
 const useActionBarStopSpeaking = () => {
   const aui = useAui();
-  const isSpeaking = useAuiState(({ message }) => message.speech != null);
+  const isSpeaking = useAuiState((s) => s.message.speech != null);
 
   const callback = useCallback(() => {
     aui.message().stopSpeaking();

package/src/primitives/actionBar/useActionBarFloatStatus.tsx

@@ -19,22 +19,22 @@ export const useActionBarFloatStatus = ({
   autohide,
   autohideFloat,
 }: UseActionBarFloatStatusProps) => {
-  return useAuiState(({ thread, message }) => {
-    if (hideWhenRunning && thread.isRunning) return HideAndFloatStatus.Hidden;
+  return useAuiState((s) => {
+    if (hideWhenRunning && s.thread.isRunning) return HideAndFloatStatus.Hidden;
 
     const autohideEnabled =
-      autohide === "always" || (autohide === "not-last" && !message.isLast);
+      autohide === "always" || (autohide === "not-last" && !s.message.isLast);
 
     // normal status
     if (!autohideEnabled) return HideAndFloatStatus.Normal;
 
     // hidden status
-    if (!message.isHovering) return HideAndFloatStatus.Hidden;
+    if (!s.message.isHovering) return HideAndFloatStatus.Hidden;
 
     // floating status
     if (
       autohideFloat === "always" ||
-      (autohideFloat === "single-branch" && message.branchCount <= 1)
+      (autohideFloat === "single-branch" && s.message.branchCount <= 1)
     )
       return HideAndFloatStatus.Floating;
 

package/src/primitives/attachment/AttachmentName.tsx

@@ -10,7 +10,7 @@ export namespace AttachmentPrimitiveName {
 export const AttachmentPrimitiveName: FC<
   AttachmentPrimitiveName.Props
 > = () => {
-  const name = useAuiState(({ attachment }) => attachment.name);
+  const name = useAuiState((s) => s.attachment.name);
   return <>{name}</>;
 };
 

package/src/primitives/attachment/AttachmentThumb.tsx

@@ -15,8 +15,8 @@ export const AttachmentPrimitiveThumb = forwardRef<
   AttachmentPrimitiveThumb.Element,
   AttachmentPrimitiveThumb.Props
 >((props, ref) => {
-  const ext = useAuiState(({ attachment }) => {
-    const parts = attachment.name.split(".");
+  const ext = useAuiState((s) => {
+    const parts = s.attachment.name.split(".");
     return parts.length > 1 ? parts.pop()! : "";
   });
   return (

package/src/primitives/branchPicker/BranchPickerCount.tsx

@@ -4,7 +4,7 @@ import type { FC } from "react";
 import { useAuiState } from "@assistant-ui/store";
 
 const useBranchPickerCount = () => {
-  const branchCount = useAuiState(({ message }) => message.branchCount);
+  const branchCount = useAuiState((s) => s.message.branchCount);
   return branchCount;
 };
 

package/src/primitives/branchPicker/BranchPickerNext.tsx

@@ -10,12 +10,12 @@ import { useAuiState, useAui } from "@assistant-ui/store";
 
 const useBranchPickerNext = () => {
   const aui = useAui();
-  const disabled = useAuiState(({ thread, message }) => {
+  const disabled = useAuiState((s) => {
     // Disabled if no next branch
-    if (message.branchNumber >= message.branchCount) return true;
+    if (s.message.branchNumber >= s.message.branchCount) return true;
 
     // Disabled if running and capability not supported
-    if (thread.isRunning && !thread.capabilities.switchBranchDuringRun) {
+    if (s.thread.isRunning && !s.thread.capabilities.switchBranchDuringRun) {
       return true;
     }
 

package/src/primitives/branchPicker/BranchPickerNumber.tsx

@@ -4,7 +4,7 @@ import type { FC } from "react";
 import { useAuiState } from "@assistant-ui/store";
 
 const useBranchPickerNumber = () => {
-  const branchNumber = useAuiState(({ message }) => message.branchNumber);
+  const branchNumber = useAuiState((s) => s.message.branchNumber);
   return branchNumber;
 };
 

package/src/primitives/branchPicker/BranchPickerPrevious.tsx

@@ -31,12 +31,12 @@ import { useAuiState, useAui } from "@assistant-ui/store";
  */
 const useBranchPickerPrevious = () => {
   const aui = useAui();
-  const disabled = useAuiState(({ thread, message }) => {
+  const disabled = useAuiState((s) => {
     // Disabled if no previous branch
-    if (message.branchNumber <= 1) return true;
+    if (s.message.branchNumber <= 1) return true;
 
     // Disabled if running and capability not supported
-    if (thread.isRunning && !thread.capabilities.switchBranchDuringRun) {
+    if (s.thread.isRunning && !s.thread.capabilities.switchBranchDuringRun) {
       return true;
     }
 

package/src/primitives/chainOfThought/ChainOfThoughtAccordionTrigger.tsx

@@ -10,9 +10,7 @@ import { useAuiState, useAui } from "@assistant-ui/store";
 
 const useChainOfThoughtAccordionTrigger = () => {
   const aui = useAui();
-  const collapsed = useAuiState(
-    ({ chainOfThought }) => chainOfThought.collapsed,
-  );
+  const collapsed = useAuiState((s) => s.chainOfThought.collapsed);
 
   const callback = useCallback(() => {
     aui.chainOfThought().setCollapsed(!collapsed);

package/src/primitives/chainOfThought/ChainOfThoughtParts.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { type FC, useMemo } from "react";
+import {
+  type ComponentType,
+  type FC,
+  type PropsWithChildren,
+  useMemo,
+} from "react";
 import { useAuiState } from "@assistant-ui/store";
 import { ChainOfThoughtPartByIndexProvider } from "../../context/providers/ChainOfThoughtPartByIndexProvider";
 import { MessagePartComponent } from "../message/MessageParts";
@@ -21,6 +26,8 @@ export namespace ChainOfThoughtPrimitiveParts {
       tools?: {
         Fallback?: ToolCallMessagePartComponent | undefined;
       };
+      /** Layout component to wrap the rendered parts when expanded */
+      Layout?: ComponentType<PropsWithChildren> | undefined;
     };
   };
 }
@@ -46,12 +53,7 @@ export namespace ChainOfThoughtPrimitiveParts {
 export const ChainOfThoughtPrimitiveParts: FC<
   ChainOfThoughtPrimitiveParts.Props
 > = ({ components }) => {
-  const collapsed = useAuiState(
-    ({ chainOfThought }) => chainOfThought.collapsed,
-  );
-  const partsLength = useAuiState(
-    ({ chainOfThought }) => chainOfThought.parts.length,
-  );
+  const partsLength = useAuiState((s) => s.chainOfThought.parts.length);
 
   const messageComponents = useMemo(
     () => ({
@@ -63,15 +65,21 @@ export const ChainOfThoughtPrimitiveParts: FC<
     [components?.Reasoning, components?.tools?.Fallback],
   );
 
-  const elements = useMemo(() => {
-    if (collapsed) return null;
+  const Layout = components?.Layout;
 
+  const elements = useMemo(() => {
     return Array.from({ length: partsLength }, (_, index) => (
       <ChainOfThoughtPartByIndexProvider key={index} index={index}>
-        <MessagePartComponent components={messageComponents} />
+        {Layout ? (
+          <Layout>
+            <MessagePartComponent components={messageComponents} />
+          </Layout>
+        ) : (
+          <MessagePartComponent components={messageComponents} />
+        )}
       </ChainOfThoughtPartByIndexProvider>
     ));
-  }, [collapsed, partsLength, messageComponents]);
+  }, [partsLength, messageComponents, Layout]);
 
   return <>{elements}</>;
 };

package/src/primitives/composer/ComposerAddAttachment.tsx

@@ -14,7 +14,7 @@ const useComposerAddAttachment = ({
   /** allow selecting multiple files */
   multiple?: boolean | undefined;
 } = {}) => {
-  const disabled = useAuiState(({ composer }) => !composer.isEditing);
+  const disabled = useAuiState((s) => !s.composer.isEditing);
   const aui = useAui();
 
   const callback = useCallback(() => {

package/src/primitives/composer/ComposerAttachments.tsx

@@ -39,7 +39,7 @@ const getComponent = (
 const AttachmentComponent: FC<{
   components: ComposerPrimitiveAttachments.Props["components"];
 }> = ({ components }) => {
-  const attachment = useAuiState(({ attachment }) => attachment);
+  const attachment = useAuiState((s) => s.attachment);
   if (!attachment) return null;
 
   const Component = getComponent(components, attachment);

package/src/primitives/composer/ComposerCancel.tsx

@@ -10,7 +10,7 @@ import { useAuiState, useAui } from "@assistant-ui/store";
 
 const useComposerCancel = () => {
   const aui = useAui();
-  const disabled = useAuiState(({ composer }) => !composer.canCancel);
+  const disabled = useAuiState((s) => !s.composer.canCancel);
 
   const callback = useCallback(() => {
     aui.composer().cancel();

package/src/primitives/composer/ComposerDictate.tsx

@@ -11,10 +11,10 @@ import { createActionButton } from "../../utils/createActionButton";
 const useComposerDictate = () => {
   const aui = useAui();
   const disabled = useAuiState(
-    ({ thread, composer }) =>
-      composer.dictation != null ||
-      !thread.capabilities.dictation ||
-      !composer.isEditing,
+    (s) =>
+      s.composer.dictation != null ||
+      !s.thread.capabilities.dictation ||
+      !s.composer.isEditing,
   );
 
   const callback = useCallback(() => {

package/src/primitives/composer/ComposerDictationTranscript.tsx

@@ -28,9 +28,7 @@ export const ComposerPrimitiveDictationTranscript = forwardRef<
   ComposerPrimitiveDictationTranscript.Element,
   ComposerPrimitiveDictationTranscript.Props
 >(({ children, ...props }, forwardRef) => {
-  const transcript = useAuiState(
-    ({ composer }) => composer.dictation?.transcript,
-  );
+  const transcript = useAuiState((s) => s.composer.dictation?.transcript);
 
   if (!transcript) return null;
 

package/src/primitives/composer/ComposerIf.tsx

@@ -14,11 +14,11 @@ type ComposerIfFilters = {
 export type UseComposerIfProps = RequireAtLeastOne<ComposerIfFilters>;
 
 const useComposerIf = (props: UseComposerIfProps) => {
-  return useAuiState(({ composer }) => {
-    if (props.editing === true && !composer.isEditing) return false;
-    if (props.editing === false && composer.isEditing) return false;
+  return useAuiState((s) => {
+    if (props.editing === true && !s.composer.isEditing) return false;
+    if (props.editing === false && s.composer.isEditing) return false;
 
-    const isDictating = composer.dictation != null;
+    const isDictating = s.composer.dictation != null;
     if (props.dictation === true && !isDictating) return false;
     if (props.dictation === false && isDictating) return false;