@assistant-ui/core 0.1.5 → 0.1.8

package/src/react/primitive-hooks/useActionBarStopSpeaking.ts

@@ -0,0 +1,13 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useActionBarStopSpeaking = () => {
+  const aui = useAui();
+  const disabled = useAuiState((s) => s.message.speech == null);
+
+  const stopSpeaking = useCallback(() => {
+    aui.message().stopSpeaking();
+  }, [aui]);
+
+  return { stopSpeaking, disabled };
+};

package/src/react/primitive-hooks/useBranchPickerNext.ts

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useBranchPickerNext = () => {
+  const aui = useAui();
+  const disabled = useAuiState((s) => {
+    if (s.message.branchNumber >= s.message.branchCount) return true;
+    if (s.thread.isRunning && !s.thread.capabilities.switchBranchDuringRun) {
+      return true;
+    }
+    return false;
+  });
+
+  const next = useCallback(() => {
+    aui.message().switchToBranch({ position: "next" });
+  }, [aui]);
+
+  return { next, disabled };
+};

package/src/react/primitive-hooks/useBranchPickerPrevious.ts

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useBranchPickerPrevious = () => {
+  const aui = useAui();
+  const disabled = useAuiState((s) => {
+    if (s.message.branchNumber <= 1) return true;
+    if (s.thread.isRunning && !s.thread.capabilities.switchBranchDuringRun) {
+      return true;
+    }
+    return false;
+  });
+
+  const previous = useCallback(() => {
+    aui.message().switchToBranch({ position: "previous" });
+  }, [aui]);
+
+  return { previous, disabled };
+};

package/src/react/primitive-hooks/useComposerDictate.ts

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useComposerDictate = () => {
+  const aui = useAui();
+  const disabled = useAuiState(
+    (s) =>
+      s.composer.dictation != null ||
+      !s.thread.capabilities.dictation ||
+      !s.composer.isEditing,
+  );
+
+  const startDictation = useCallback(() => {
+    aui.composer().startDictation();
+  }, [aui]);
+
+  return { startDictation, disabled };
+};

package/src/react/primitive-hooks/useComposerSend.ts

@@ -1,15 +1,22 @@
 import { useCallback } from "react";
 import { useAui, useAuiState } from "@assistant-ui/store";
+import type { ComposerSendOptions } from "../../store/scopes/composer";
 
 export const useComposerSend = () => {
   const aui = useAui();
   const disabled = useAuiState(
-    (s) => s.thread.isRunning || !s.composer.isEditing || s.composer.isEmpty,
+    (s) =>
+      (s.thread.isRunning && !s.thread.capabilities.queue) ||
+      !s.composer.isEditing ||
+      s.composer.isEmpty,
   );
 
-  const send = useCallback(() => {
-    aui.composer().send();
-  }, [aui]);
+  const send = useCallback(
+    (opts?: ComposerSendOptions) => {
+      aui.composer().send(opts);
+    },
+    [aui],
+  );
 
   return { send, disabled };
 };

package/src/react/primitive-hooks/useMessageError.ts

@@ -0,0 +1,10 @@
+import { useAuiState } from "@assistant-ui/store";
+
+export const useMessageError = () => {
+  return useAuiState((s) =>
+    s.message.status?.type === "incomplete" &&
+    s.message.status.reason === "error"
+      ? (s.message.status.error ?? "An error occurred")
+      : undefined,
+  );
+};

package/src/react/primitive-hooks/useSuggestionTrigger.ts

@@ -0,0 +1,43 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export type UseSuggestionTriggerOptions = {
+  prompt: string;
+  send?: boolean | undefined;
+  clearComposer?: boolean | undefined;
+};
+
+export const useSuggestionTrigger = ({
+  prompt,
+  send,
+  clearComposer = true,
+}: UseSuggestionTriggerOptions) => {
+  const aui = useAui();
+  const disabled = useAuiState((s) => s.thread.isDisabled);
+  const resolvedSend = send ?? false;
+
+  const trigger = useCallback(() => {
+    const isRunning = aui.thread().getState().isRunning;
+
+    if (resolvedSend && !isRunning) {
+      aui.thread().append({
+        content: [{ type: "text", text: prompt }],
+        runConfig: aui.composer().getState().runConfig,
+      });
+      if (clearComposer) {
+        aui.composer().setText("");
+      }
+    } else {
+      if (clearComposer) {
+        aui.composer().setText(prompt);
+      } else {
+        const currentText = aui.composer().getState().text;
+        aui
+          .composer()
+          .setText(currentText.trim() ? `${currentText} ${prompt}` : prompt);
+      }
+    }
+  }, [aui, resolvedSend, clearComposer, prompt]);
+
+  return { trigger, disabled };
+};

package/src/react/primitive-hooks/useThreadListItemArchive.ts

@@ -0,0 +1,12 @@
+import { useCallback } from "react";
+import { useAui } from "@assistant-ui/store";
+
+export const useThreadListItemArchive = () => {
+  const aui = useAui();
+
+  const archive = useCallback(() => {
+    aui.threadListItem().archive();
+  }, [aui]);
+
+  return { archive };
+};

package/src/react/primitive-hooks/useThreadListItemDelete.ts

@@ -0,0 +1,12 @@
+import { useCallback } from "react";
+import { useAui } from "@assistant-ui/store";
+
+export const useThreadListItemDelete = () => {
+  const aui = useAui();
+
+  const deleteThread = useCallback(() => {
+    aui.threadListItem().delete();
+  }, [aui]);
+
+  return { delete: deleteThread };
+};

package/src/react/primitive-hooks/useThreadListItemTrigger.ts

@@ -0,0 +1,12 @@
+import { useCallback } from "react";
+import { useAui } from "@assistant-ui/store";
+
+export const useThreadListItemTrigger = () => {
+  const aui = useAui();
+
+  const switchTo = useCallback(() => {
+    aui.threadListItem().switchTo();
+  }, [aui]);
+
+  return { switchTo };
+};

package/src/react/primitive-hooks/useThreadListItemUnarchive.ts

@@ -0,0 +1,12 @@
+import { useCallback } from "react";
+import { useAui } from "@assistant-ui/store";
+
+export const useThreadListItemUnarchive = () => {
+  const aui = useAui();
+
+  const unarchive = useCallback(() => {
+    aui.threadListItem().unarchive();
+  }, [aui]);
+
+  return { unarchive };
+};

package/src/react/primitive-hooks/useThreadListNew.ts

@@ -0,0 +1,12 @@
+import { useCallback } from "react";
+import { useAui } from "@assistant-ui/store";
+
+export const useThreadListNew = () => {
+  const aui = useAui();
+
+  const switchToNewThread = useCallback(() => {
+    aui.threads().switchToNewThread();
+  }, [aui]);
+
+  return { switchToNewThread };
+};

package/src/react/primitives/chainOfThought/ChainOfThoughtParts.tsx

@@ -2,34 +2,73 @@ import {
   type ComponentType,
   type FC,
   type PropsWithChildren,
+  type ReactNode,
   useMemo,
 } from "react";
-import { useAuiState } from "@assistant-ui/store";
+import { RenderChildrenWithAccessor, useAuiState } from "@assistant-ui/store";
+import type { PartState } from "../../../store/scopes/part";
 import { ChainOfThoughtPartByIndexProvider } from "../../providers/ChainOfThoughtPartByIndexProvider";
 import { MessagePartComponent } from "../message/MessageParts";
 import type {
   ReasoningMessagePartComponent,
   ToolCallMessagePartComponent,
-} from "../../types";
+} from "../../types/MessagePartComponentTypes";
+
+type ChainOfThoughtPartsComponentConfig = {
+  /** Component for rendering reasoning parts */
+  Reasoning?: ReasoningMessagePartComponent | undefined;
+  /** Fallback component for tool-call parts */
+  tools?: {
+    Fallback?: ToolCallMessagePartComponent | undefined;
+  };
+  /** Layout component to wrap the rendered parts when expanded */
+  Layout?: ComponentType<PropsWithChildren> | undefined;
+};
 
 export namespace ChainOfThoughtPrimitiveParts {
-  export type Props = {
-    /**
-     * Component configuration for rendering chain of thought parts.
-     */
-    components?: {
-      /** Component for rendering reasoning parts */
-      Reasoning?: ReasoningMessagePartComponent | undefined;
-      /** Fallback component for tool-call parts */
-      tools?: {
-        Fallback?: ToolCallMessagePartComponent | undefined;
+  export type Props =
+    | {
+        /**
+         * @deprecated Use the children render function instead.
+         */
+        components?: ChainOfThoughtPartsComponentConfig;
+        children?: never;
+      }
+    | {
+        /** Render function called for each part. Receives the part. */
+        children: (value: { part: PartState }) => ReactNode;
+        components?: never;
       };
-      /** Layout component to wrap the rendered parts when expanded */
-      Layout?: ComponentType<PropsWithChildren> | undefined;
-    };
-  };
 }
 
+const ChainOfThoughtPrimitivePartsInner: FC<{
+  children: (value: { part: PartState }) => ReactNode;
+}> = ({ children }) => {
+  const partsLength = useAuiState((s) => s.chainOfThought.parts.length);
+
+  return useMemo(
+    () =>
+      Array.from({ length: partsLength }, (_, index) => (
+        <ChainOfThoughtPartByIndexProvider key={index} index={index}>
+          <RenderChildrenWithAccessor
+            getItemState={(aui) =>
+              aui.chainOfThought().part({ index }).getState()
+            }
+          >
+            {(getItem) =>
+              children({
+                get part() {
+                  return getItem();
+                },
+              })
+            }
+          </RenderChildrenWithAccessor>
+        </ChainOfThoughtPartByIndexProvider>
+      )),
+    [partsLength, children],
+  );
+};
+
 /**
  * Renders the parts within a chain of thought, with support for collapsed/expanded states.
  *
@@ -38,9 +77,16 @@ export namespace ChainOfThoughtPrimitiveParts {
  */
 export const ChainOfThoughtPrimitiveParts: FC<
   ChainOfThoughtPrimitiveParts.Props
-> = ({ components }) => {
-  const partsLength = useAuiState((s) => s.chainOfThought.parts.length);
+> = ({ components, children }) => {
+  if (children) {
+    return (
+      <ChainOfThoughtPrimitivePartsInner>
+        {children}
+      </ChainOfThoughtPrimitivePartsInner>
+    );
+  }
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const messageComponents = useMemo(
     () => ({
       Reasoning: components?.Reasoning,
@@ -53,21 +99,19 @@ export const ChainOfThoughtPrimitiveParts: FC<
 
   const Layout = components?.Layout;
 
-  const elements = useMemo(() => {
-    return Array.from({ length: partsLength }, (_, index) => (
-      <ChainOfThoughtPartByIndexProvider key={index} index={index}>
-        {Layout ? (
+  return (
+    <ChainOfThoughtPrimitivePartsInner>
+      {() =>
+        Layout ? (
           <Layout>
             <MessagePartComponent components={messageComponents} />
           </Layout>
         ) : (
           <MessagePartComponent components={messageComponents} />
-        )}
-      </ChainOfThoughtPartByIndexProvider>
-    ));
-  }, [partsLength, messageComponents, Layout]);
-
-  return <>{elements}</>;
+        )
+      }
+    </ChainOfThoughtPrimitivePartsInner>
+  );
 };
 
 ChainOfThoughtPrimitiveParts.displayName = "ChainOfThoughtPrimitive.Parts";

package/src/react/primitives/composer/ComposerAttachments.tsx

@@ -1,23 +1,31 @@
-import type { Attachment } from "../../../types";
-import { ComponentType, type FC, memo, useMemo } from "react";
-import { useAuiState } from "@assistant-ui/store";
-import { ComposerAttachmentByIndexProvider } from "../../providers";
+import type { Attachment } from "../../../types/attachment";
+import { ComponentType, type FC, type ReactNode, memo, useMemo } from "react";
+import { RenderChildrenWithAccessor, useAuiState } from "@assistant-ui/store";
+import { ComposerAttachmentByIndexProvider } from "../../providers/AttachmentByIndexProvider";
+
+type ComposerAttachmentsComponentConfig = {
+  Image?: ComponentType | undefined;
+  Document?: ComponentType | undefined;
+  File?: ComponentType | undefined;
+  Attachment?: ComponentType | undefined;
+};
 
 export namespace ComposerPrimitiveAttachments {
-  export type Props = {
-    components:
-      | {
-          Image?: ComponentType | undefined;
-          Document?: ComponentType | undefined;
-          File?: ComponentType | undefined;
-          Attachment?: ComponentType | undefined;
-        }
-      | undefined;
-  };
+  export type Props =
+    | {
+        /** @deprecated Use the children render function instead. */
+        components: ComposerAttachmentsComponentConfig;
+        children?: never;
+      }
+    | {
+        /** Render function called for each attachment. Receives the attachment. */
+        children: (value: { attachment: Attachment }) => ReactNode;
+        components?: never;
+      };
 }
 
 const getComponent = (
-  components: ComposerPrimitiveAttachments.Props["components"],
+  components: ComposerAttachmentsComponentConfig | undefined,
   attachment: Attachment,
 ) => {
   const type = attachment.type;
@@ -34,7 +42,7 @@ const getComponent = (
 };
 
 const AttachmentComponent: FC<{
-  components: ComposerPrimitiveAttachments.Props["components"];
+  components: ComposerAttachmentsComponentConfig | undefined;
 }> = ({ components }) => {
   const attachment = useAuiState((s) => s.attachment);
   if (!attachment) return null;
@@ -47,7 +55,7 @@ const AttachmentComponent: FC<{
 export namespace ComposerPrimitiveAttachmentByIndex {
   export type Props = {
     index: number;
-    components?: ComposerPrimitiveAttachments.Props["components"];
+    components?: ComposerAttachmentsComponentConfig;
   };
 }
 
@@ -74,22 +82,53 @@ export const ComposerPrimitiveAttachmentByIndex: FC<ComposerPrimitiveAttachmentB
 ComposerPrimitiveAttachmentByIndex.displayName =
   "ComposerPrimitive.AttachmentByIndex";
 
-export const ComposerPrimitiveAttachments: FC<
-  ComposerPrimitiveAttachments.Props
-> = ({ components }) => {
+const ComposerPrimitiveAttachmentsInner: FC<{
+  children: (value: { attachment: Attachment }) => ReactNode;
+}> = ({ children }) => {
   const attachmentsCount = useAuiState((s) => s.composer.attachments.length);
 
-  const attachmentElements = useMemo(() => {
-    return Array.from({ length: attachmentsCount }, (_, index) => (
-      <ComposerPrimitiveAttachmentByIndex
-        key={index}
-        index={index}
-        components={components}
-      />
-    ));
-  }, [attachmentsCount, components]);
+  return useMemo(
+    () =>
+      Array.from({ length: attachmentsCount }, (_, index) => (
+        <ComposerAttachmentByIndexProvider key={index} index={index}>
+          <RenderChildrenWithAccessor
+            getItemState={(aui) =>
+              aui.composer().attachment({ index }).getState()
+            }
+          >
+            {(getItem) =>
+              children({
+                get attachment() {
+                  return getItem();
+                },
+              })
+            }
+          </RenderChildrenWithAccessor>
+        </ComposerAttachmentByIndexProvider>
+      )),
+    [attachmentsCount, children],
+  );
+};
 
-  return attachmentElements;
+export const ComposerPrimitiveAttachments: FC<
+  ComposerPrimitiveAttachments.Props
+> = ({ components, children }) => {
+  if (components) {
+    return (
+      <ComposerPrimitiveAttachmentsInner>
+        {({ attachment }) => {
+          const Component = getComponent(components, attachment);
+          if (!Component) return null;
+          return <Component />;
+        }}
+      </ComposerPrimitiveAttachmentsInner>
+    );
+  }
+  return (
+    <ComposerPrimitiveAttachmentsInner>
+      {children}
+    </ComposerPrimitiveAttachmentsInner>
+  );
 };
 
 ComposerPrimitiveAttachments.displayName = "ComposerPrimitive.Attachments";

package/src/react/primitives/composer/ComposerQueue.tsx

@@ -0,0 +1,58 @@
+import { type FC, type ReactNode, memo, useMemo } from "react";
+import { RenderChildrenWithAccessor, useAuiState } from "@assistant-ui/store";
+import type { QueueItemState } from "../../../store/scopes/queue-item";
+import { QueueItemByIndexProvider } from "../../providers/QueueItemByIndexProvider";
+
+export namespace ComposerPrimitiveQueue {
+  export type Props = {
+    /** Render function called for each queue item. Receives the queue item state. */
+    children: (value: { queueItem: QueueItemState }) => ReactNode;
+  };
+}
+
+const ComposerPrimitiveQueueInner: FC<{
+  children: (value: { queueItem: QueueItemState }) => ReactNode;
+}> = ({ children }) => {
+  const queue = useAuiState((s) => s.composer.queue.length);
+
+  return useMemo(
+    () =>
+      Array.from({ length: queue }, (_, index) => (
+        <QueueItemByIndexProvider key={index} index={index}>
+          <RenderChildrenWithAccessor
+            getItemState={(aui) =>
+              aui.composer().queueItem({ index }).getState()
+            }
+          >
+            {(getItem) =>
+              children({
+                get queueItem() {
+                  return getItem();
+                },
+              })
+            }
+          </RenderChildrenWithAccessor>
+        </QueueItemByIndexProvider>
+      )),
+    [queue, children],
+  );
+};
+
+/**
+ * Renders all queue items in the composer.
+ *
+ * @example
+ * ```tsx
+ * <ComposerPrimitive.Queue>
+ *   {({ queueItem }) => (
+ *     <div>
+ *       <QueueItemPrimitive.Text />
+ *       <QueueItemPrimitive.Steer>Run Now</QueueItemPrimitive.Steer>
+ *     </div>
+ *   )}
+ * </ComposerPrimitive.Queue>
+ * ```
+ */
+export const ComposerPrimitiveQueue = memo(ComposerPrimitiveQueueInner);
+
+ComposerPrimitiveQueue.displayName = "ComposerPrimitive.Queue";