@assistant-ui/core 0.1.3 → 0.1.7

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

@@ -0,0 +1,13 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useComposerCancel = () => {
+  const aui = useAui();
+  const disabled = useAuiState((s) => !s.composer.canCancel);
+
+  const cancel = useCallback(() => {
+    aui.composer().cancel();
+  }, [aui]);
+
+  return { cancel, 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

@@ -0,0 +1,15 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useComposerSend = () => {
+  const aui = useAui();
+  const disabled = useAuiState(
+    (s) => s.thread.isRunning || !s.composer.isEditing || s.composer.isEmpty,
+  );
+
+  const send = useCallback(() => {
+    aui.composer().send();
+  }, [aui]);
+
+  return { send, disabled };
+};

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

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

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

@@ -0,0 +1,13 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useEditComposerSend = () => {
+  const aui = useAui();
+  const disabled = useAuiState((s) => s.composer.isEmpty);
+
+  const send = useCallback(() => {
+    aui.composer().send();
+  }, [aui]);
+
+  return { send, disabled };
+};

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

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useMessageBranching = () => {
+  const aui = useAui();
+  const branchNumber = useAuiState((s) => s.message.branchNumber);
+  const branchCount = useAuiState((s) => s.message.branchCount);
+
+  const goToPrev = useCallback(() => {
+    aui.message().switchToBranch({ position: "previous" });
+  }, [aui]);
+
+  const goToNext = useCallback(() => {
+    aui.message().switchToBranch({ position: "next" });
+  }, [aui]);
+
+  return { branchNumber, branchCount, goToPrev, goToNext };
+};

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/useMessageReload.ts

@@ -0,0 +1,13 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useMessageReload = () => {
+  const aui = useAui();
+  const canReload = useAuiState((s) => s.message.role === "assistant");
+
+  const reload = useCallback(() => {
+    aui.message().reload();
+  }, [aui]);
+
+  return { reload, canReload };
+};

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/useThreadIsEmpty.ts

@@ -0,0 +1,5 @@
+import { useAuiState } from "@assistant-ui/store";
+
+export const useThreadIsEmpty = (): boolean => {
+  return useAuiState((s) => s.thread.isEmpty);
+};

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

@@ -0,0 +1,5 @@
+import { useAuiState } from "@assistant-ui/store";
+
+export const useThreadIsRunning = (): boolean => {
+  return useAuiState((s) => s.thread.isRunning);
+};

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/primitive-hooks/useThreadMessages.ts

@@ -0,0 +1,6 @@
+import { useAuiState } from "@assistant-ui/store";
+import type { MessageState } from "../../store/scopes/message";
+
+export const useThreadMessages = (): readonly MessageState[] => {
+  return useAuiState((s) => s.thread.messages);
+};

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/message/MessageAttachments.tsx

@@ -1,23 +1,31 @@
-import type { CompleteAttachment } from "../../../types";
-import { ComponentType, type FC, memo, useMemo } from "react";
-import { useAuiState } from "@assistant-ui/store";
-import { MessageAttachmentByIndexProvider } from "../../providers";
+import type { CompleteAttachment } from "../../../types/attachment";
+import { ComponentType, type FC, type ReactNode, memo, useMemo } from "react";
+import { RenderChildrenWithAccessor, useAuiState } from "@assistant-ui/store";
+import { MessageAttachmentByIndexProvider } from "../../providers/AttachmentByIndexProvider";
+
+type MessageAttachmentsComponentConfig = {
+  Image?: ComponentType | undefined;
+  Document?: ComponentType | undefined;
+  File?: ComponentType | undefined;
+  Attachment?: ComponentType | undefined;
+};
 
 export namespace MessagePrimitiveAttachments {
-  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: MessageAttachmentsComponentConfig;
+        children?: never;
+      }
+    | {
+        /** Render function called for each attachment. Receives the attachment. */
+        children: (value: { attachment: CompleteAttachment }) => ReactNode;
+        components?: never;
+      };
 }
 
 const getComponent = (
-  components: MessagePrimitiveAttachments.Props["components"],
+  components: MessageAttachmentsComponentConfig | undefined,
   attachment: CompleteAttachment,
 ) => {
   const type = attachment.type;
@@ -34,7 +42,7 @@ const getComponent = (
 };
 
 const AttachmentComponent: FC<{
-  components: MessagePrimitiveAttachments.Props["components"];
+  components: MessageAttachmentsComponentConfig | undefined;
 }> = ({ components }) => {
   const attachment = useAuiState((s) => s.attachment);
   if (!attachment) return null;
@@ -47,7 +55,7 @@ const AttachmentComponent: FC<{
 export namespace MessagePrimitiveAttachmentByIndex {
   export type Props = {
     index: number;
-    components?: MessagePrimitiveAttachments.Props["components"];
+    components?: MessageAttachmentsComponentConfig;
   };
 }
 
@@ -74,25 +82,56 @@ export const MessagePrimitiveAttachmentByIndex: FC<MessagePrimitiveAttachmentByI
 MessagePrimitiveAttachmentByIndex.displayName =
   "MessagePrimitive.AttachmentByIndex";
 
-export const MessagePrimitiveAttachments: FC<
-  MessagePrimitiveAttachments.Props
-> = ({ components }) => {
+const MessagePrimitiveAttachmentsInner: FC<{
+  children: (value: { attachment: CompleteAttachment }) => ReactNode;
+}> = ({ children }) => {
   const attachmentsCount = useAuiState((s) => {
     if (s.message.role !== "user") return 0;
     return s.message.attachments.length;
   });
 
-  const attachmentElements = useMemo(() => {
-    return Array.from({ length: attachmentsCount }, (_, index) => (
-      <MessagePrimitiveAttachmentByIndex
-        key={index}
-        index={index}
-        components={components}
-      />
-    ));
-  }, [attachmentsCount, components]);
+  return useMemo(
+    () =>
+      Array.from({ length: attachmentsCount }, (_, index) => (
+        <MessageAttachmentByIndexProvider key={index} index={index}>
+          <RenderChildrenWithAccessor
+            getItemState={(aui) =>
+              aui.message().attachment({ index }).getState()
+            }
+          >
+            {(getItem) =>
+              children({
+                get attachment() {
+                  return getItem() as CompleteAttachment;
+                },
+              })
+            }
+          </RenderChildrenWithAccessor>
+        </MessageAttachmentByIndexProvider>
+      )),
+    [attachmentsCount, children],
+  );
+};
 
-  return attachmentElements;
+export const MessagePrimitiveAttachments: FC<
+  MessagePrimitiveAttachments.Props
+> = ({ components, children }) => {
+  if (components) {
+    return (
+      <MessagePrimitiveAttachmentsInner>
+        {({ attachment }) => {
+          const Component = getComponent(components, attachment);
+          if (!Component) return null;
+          return <Component />;
+        }}
+      </MessagePrimitiveAttachmentsInner>
+    );
+  }
+  return (
+    <MessagePrimitiveAttachmentsInner>
+      {children}
+    </MessagePrimitiveAttachmentsInner>
+  );
 };
 
 MessagePrimitiveAttachments.displayName = "MessagePrimitive.Attachments";