@assistant-ui/core 0.1.0 → 0.1.1

package/src/react/model-context/useAssistantInstructions.ts

@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+import { useAui } from "@assistant-ui/store";
+import type { AssistantInstructionsConfig } from "../..";
+
+export type { AssistantInstructionsConfig };
+
+const getInstructions = (
+  instruction: string | AssistantInstructionsConfig,
+): AssistantInstructionsConfig => {
+  if (typeof instruction === "string") return { instruction };
+  return instruction;
+};
+
+export const useAssistantInstructions = (
+  config: string | AssistantInstructionsConfig,
+) => {
+  const { instruction, disabled = false } = getInstructions(config);
+  const aui = useAui();
+
+  useEffect(() => {
+    if (disabled) return;
+
+    const config = {
+      system: instruction,
+    };
+    return aui.modelContext().register({
+      getModelContext: () => config,
+    });
+  }, [aui, instruction, disabled]);
+};

package/src/react/model-context/useAssistantTool.ts

@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+import { useAui } from "@assistant-ui/store";
+import type { ToolCallMessagePartComponent } from "../types/MessagePartComponentTypes";
+import type { AssistantToolProps as CoreAssistantToolProps } from "../..";
+
+export type AssistantToolProps<
+  TArgs extends Record<string, unknown>,
+  TResult,
+> = CoreAssistantToolProps<TArgs, TResult> & {
+  render?: ToolCallMessagePartComponent<TArgs, TResult> | undefined;
+};
+
+export const useAssistantTool = <
+  TArgs extends Record<string, unknown>,
+  TResult,
+>(
+  tool: AssistantToolProps<TArgs, TResult>,
+) => {
+  const aui = useAui();
+
+  useEffect(() => {
+    if (!tool.render) return undefined;
+    return aui.tools().setToolUI(tool.toolName, tool.render);
+  }, [aui, tool.toolName, tool.render]);
+
+  useEffect(() => {
+    const { toolName, render, ...rest } = tool;
+    const context = {
+      tools: {
+        [toolName]: rest,
+      },
+    };
+    return aui.modelContext().register({
+      getModelContext: () => context,
+    });
+  }, [aui, tool]);
+};

package/src/react/model-context/useAssistantToolUI.ts

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+import { useAui } from "@assistant-ui/store";
+import type { ToolCallMessagePartComponent } from "../types/MessagePartComponentTypes";
+
+export type AssistantToolUIProps<TArgs, TResult> = {
+  toolName: string;
+  render: ToolCallMessagePartComponent<TArgs, TResult>;
+};
+
+export const useAssistantToolUI = (
+  tool: AssistantToolUIProps<any, any> | null,
+) => {
+  const aui = useAui();
+  useEffect(() => {
+    if (!tool?.toolName || !tool?.render) return undefined;
+    return aui.tools().setToolUI(tool.toolName, tool.render);
+  }, [aui, tool?.toolName, tool?.render]);
+};

package/src/react/model-context/useInlineRender.ts

@@ -0,0 +1,25 @@
+import { FC, useCallback, useEffect, useState } from "react";
+import { ToolCallMessagePartProps } from "../types";
+import { create } from "zustand";
+
+export const useInlineRender = <TArgs, TResult>(
+  toolUI: FC<ToolCallMessagePartProps<TArgs, TResult>>,
+): FC<ToolCallMessagePartProps<TArgs, TResult>> => {
+  const [useToolUIStore] = useState(() =>
+    create(() => ({
+      toolUI,
+    })),
+  );
+
+  useEffect(() => {
+    useToolUIStore.setState({ toolUI });
+  }, [toolUI, useToolUIStore]);
+
+  return useCallback(
+    function ToolUI(args) {
+      const store = useToolUIStore();
+      return store.toolUI(args);
+    },
+    [useToolUIStore],
+  );
+};

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

@@ -0,0 +1,73 @@
+import {
+  type ComponentType,
+  type FC,
+  type PropsWithChildren,
+  useMemo,
+} from "react";
+import { useAuiState } from "@assistant-ui/store";
+import { ChainOfThoughtPartByIndexProvider } from "../../providers/ChainOfThoughtPartByIndexProvider";
+import { MessagePartComponent } from "../message/MessageParts";
+import type {
+  ReasoningMessagePartComponent,
+  ToolCallMessagePartComponent,
+} from "../../types";
+
+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;
+      };
+      /** Layout component to wrap the rendered parts when expanded */
+      Layout?: ComponentType<PropsWithChildren> | undefined;
+    };
+  };
+}
+
+/**
+ * Renders the parts within a chain of thought, with support for collapsed/expanded states.
+ *
+ * When collapsed, no parts are shown. When expanded, all parts are rendered
+ * using the provided component configuration through the part scope mechanism.
+ */
+export const ChainOfThoughtPrimitiveParts: FC<
+  ChainOfThoughtPrimitiveParts.Props
+> = ({ components }) => {
+  const partsLength = useAuiState((s) => s.chainOfThought.parts.length);
+
+  const messageComponents = useMemo(
+    () => ({
+      Reasoning: components?.Reasoning,
+      tools: {
+        Fallback: components?.tools?.Fallback,
+      },
+    }),
+    [components?.Reasoning, components?.tools?.Fallback],
+  );
+
+  const Layout = components?.Layout;
+
+  const elements = useMemo(() => {
+    return Array.from({ length: partsLength }, (_, index) => (
+      <ChainOfThoughtPartByIndexProvider key={index} index={index}>
+        {Layout ? (
+          <Layout>
+            <MessagePartComponent components={messageComponents} />
+          </Layout>
+        ) : (
+          <MessagePartComponent components={messageComponents} />
+        )}
+      </ChainOfThoughtPartByIndexProvider>
+    ));
+  }, [partsLength, messageComponents, Layout]);
+
+  return <>{elements}</>;
+};
+
+ChainOfThoughtPrimitiveParts.displayName = "ChainOfThoughtPrimitive.Parts";

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

@@ -0,0 +1,95 @@
+import type { Attachment } from "../../../types";
+import { ComponentType, type FC, memo, useMemo } from "react";
+import { useAuiState } from "@assistant-ui/store";
+import { ComposerAttachmentByIndexProvider } from "../../providers";
+
+export namespace ComposerPrimitiveAttachments {
+  export type Props = {
+    components:
+      | {
+          Image?: ComponentType | undefined;
+          Document?: ComponentType | undefined;
+          File?: ComponentType | undefined;
+          Attachment?: ComponentType | undefined;
+        }
+      | undefined;
+  };
+}
+
+const getComponent = (
+  components: ComposerPrimitiveAttachments.Props["components"],
+  attachment: Attachment,
+) => {
+  const type = attachment.type;
+  switch (type) {
+    case "image":
+      return components?.Image ?? components?.Attachment;
+    case "document":
+      return components?.Document ?? components?.Attachment;
+    case "file":
+      return components?.File ?? components?.Attachment;
+    default:
+      return components?.Attachment;
+  }
+};
+
+const AttachmentComponent: FC<{
+  components: ComposerPrimitiveAttachments.Props["components"];
+}> = ({ components }) => {
+  const attachment = useAuiState((s) => s.attachment);
+  if (!attachment) return null;
+
+  const Component = getComponent(components, attachment);
+  if (!Component) return null;
+  return <Component />;
+};
+
+export namespace ComposerPrimitiveAttachmentByIndex {
+  export type Props = {
+    index: number;
+    components?: ComposerPrimitiveAttachments.Props["components"];
+  };
+}
+
+/**
+ * Renders a single attachment at the specified index within the composer.
+ */
+export const ComposerPrimitiveAttachmentByIndex: FC<ComposerPrimitiveAttachmentByIndex.Props> =
+  memo(
+    ({ index, components }) => {
+      return (
+        <ComposerAttachmentByIndexProvider index={index}>
+          <AttachmentComponent components={components} />
+        </ComposerAttachmentByIndexProvider>
+      );
+    },
+    (prev, next) =>
+      prev.index === next.index &&
+      prev.components?.Image === next.components?.Image &&
+      prev.components?.Document === next.components?.Document &&
+      prev.components?.File === next.components?.File &&
+      prev.components?.Attachment === next.components?.Attachment,
+  );
+
+ComposerPrimitiveAttachmentByIndex.displayName =
+  "ComposerPrimitive.AttachmentByIndex";
+
+export const ComposerPrimitiveAttachments: FC<
+  ComposerPrimitiveAttachments.Props
+> = ({ components }) => {
+  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 attachmentElements;
+};
+
+ComposerPrimitiveAttachments.displayName = "ComposerPrimitive.Attachments";

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

@@ -0,0 +1,49 @@
+import type { FC, PropsWithChildren } from "react";
+import { useAuiState } from "@assistant-ui/store";
+
+type ComposerIfFilters = {
+  /** Whether the composer is in editing mode */
+  editing: boolean | undefined;
+  /** Whether dictation is currently active */
+  dictation: boolean | undefined;
+};
+
+export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<
+  T,
+  Exclude<keyof T, Keys>
+> &
+  {
+    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
+  }[Keys];
+
+export type UseComposerIfProps = RequireAtLeastOne<ComposerIfFilters>;
+
+const useComposerIf = (props: UseComposerIfProps) => {
+  return useAuiState((s) => {
+    if (props.editing === true && !s.composer.isEditing) return false;
+    if (props.editing === false && s.composer.isEditing) return false;
+
+    const isDictating = s.composer.dictation != null;
+    if (props.dictation === true && !isDictating) return false;
+    if (props.dictation === false && isDictating) return false;
+
+    return true;
+  });
+};
+
+export namespace ComposerPrimitiveIf {
+  export type Props = PropsWithChildren<UseComposerIfProps>;
+}
+
+/**
+ * @deprecated Use `<AuiIf condition={(s) => s.composer...} />` instead.
+ */
+export const ComposerPrimitiveIf: FC<ComposerPrimitiveIf.Props> = ({
+  children,
+  ...query
+}) => {
+  const result = useComposerIf(query);
+  return result ? children : null;
+};
+
+ComposerPrimitiveIf.displayName = "ComposerPrimitive.If";

package/src/react/primitives/message/MessageAttachments.tsx

@@ -0,0 +1,98 @@
+import type { CompleteAttachment } from "../../../types";
+import { ComponentType, type FC, memo, useMemo } from "react";
+import { useAuiState } from "@assistant-ui/store";
+import { MessageAttachmentByIndexProvider } from "../../providers";
+
+export namespace MessagePrimitiveAttachments {
+  export type Props = {
+    components:
+      | {
+          Image?: ComponentType | undefined;
+          Document?: ComponentType | undefined;
+          File?: ComponentType | undefined;
+          Attachment?: ComponentType | undefined;
+        }
+      | undefined;
+  };
+}
+
+const getComponent = (
+  components: MessagePrimitiveAttachments.Props["components"],
+  attachment: CompleteAttachment,
+) => {
+  const type = attachment.type;
+  switch (type) {
+    case "image":
+      return components?.Image ?? components?.Attachment;
+    case "document":
+      return components?.Document ?? components?.Attachment;
+    case "file":
+      return components?.File ?? components?.Attachment;
+    default:
+      return components?.Attachment;
+  }
+};
+
+const AttachmentComponent: FC<{
+  components: MessagePrimitiveAttachments.Props["components"];
+}> = ({ components }) => {
+  const attachment = useAuiState((s) => s.attachment);
+  if (!attachment) return null;
+
+  const Component = getComponent(components, attachment as CompleteAttachment);
+  if (!Component) return null;
+  return <Component />;
+};
+
+export namespace MessagePrimitiveAttachmentByIndex {
+  export type Props = {
+    index: number;
+    components?: MessagePrimitiveAttachments.Props["components"];
+  };
+}
+
+/**
+ * Renders a single attachment at the specified index within the current message.
+ */
+export const MessagePrimitiveAttachmentByIndex: FC<MessagePrimitiveAttachmentByIndex.Props> =
+  memo(
+    ({ index, components }) => {
+      return (
+        <MessageAttachmentByIndexProvider index={index}>
+          <AttachmentComponent components={components} />
+        </MessageAttachmentByIndexProvider>
+      );
+    },
+    (prev, next) =>
+      prev.index === next.index &&
+      prev.components?.Image === next.components?.Image &&
+      prev.components?.Document === next.components?.Document &&
+      prev.components?.File === next.components?.File &&
+      prev.components?.Attachment === next.components?.Attachment,
+  );
+
+MessagePrimitiveAttachmentByIndex.displayName =
+  "MessagePrimitive.AttachmentByIndex";
+
+export const MessagePrimitiveAttachments: FC<
+  MessagePrimitiveAttachments.Props
+> = ({ components }) => {
+  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 attachmentElements;
+};
+
+MessagePrimitiveAttachments.displayName = "MessagePrimitive.Attachments";