@assistant-ui/core 0.1.0 → 0.1.1

package/src/react/primitives/thread/ThreadMessages.tsx

@@ -0,0 +1,222 @@
+import type { ThreadMessage as ThreadMessageType } from "../../../types";
+import { type ComponentType, type FC, memo, useMemo } from "react";
+import { useAuiState } from "@assistant-ui/store";
+import { MessageByIndexProvider } from "../../providers";
+
+export namespace ThreadPrimitiveMessages {
+  export type Props = {
+    /**
+     * Component configuration for rendering different types of messages and composers.
+     *
+     * You can provide either:
+     * 1. A single `Message` component that handles all message types
+     * 2. Specific components for `UserMessage` and `AssistantMessage` (with optional `SystemMessage`)
+     *
+     * Optional edit composer components can be provided to customize the editing experience
+     * for different message types when users edit their messages.
+     */
+    components:
+      | {
+          /** Component used to render all message types */
+          Message: ComponentType;
+          /** Component used when editing any message type */
+          EditComposer?: ComponentType | undefined;
+          /** Component used when editing user messages specifically */
+          UserEditComposer?: ComponentType | undefined;
+          /** Component used when editing assistant messages specifically */
+          AssistantEditComposer?: ComponentType | undefined;
+          /** Component used when editing system messages specifically */
+          SystemEditComposer?: ComponentType | undefined;
+          /** Component used to render user messages specifically */
+          UserMessage?: ComponentType | undefined;
+          /** Component used to render assistant messages specifically */
+          AssistantMessage?: ComponentType | undefined;
+          /** Component used to render system messages specifically */
+          SystemMessage?: ComponentType | undefined;
+        }
+      | {
+          /** Component used to render all message types (fallback) */
+          Message?: ComponentType | undefined;
+          /** Component used when editing any message type */
+          EditComposer?: ComponentType | undefined;
+          /** Component used when editing user messages specifically */
+          UserEditComposer?: ComponentType | undefined;
+          /** Component used when editing assistant messages specifically */
+          AssistantEditComposer?: ComponentType | undefined;
+          /** Component used when editing system messages specifically */
+          SystemEditComposer?: ComponentType | undefined;
+          /** Component used to render user messages */
+          UserMessage: ComponentType;
+          /** Component used to render assistant messages */
+          AssistantMessage: ComponentType;
+          /** Component used to render system messages */
+          SystemMessage?: ComponentType | undefined;
+        };
+  };
+}
+
+const isComponentsSame = (
+  prev: ThreadPrimitiveMessages.Props["components"],
+  next: ThreadPrimitiveMessages.Props["components"],
+) => {
+  return (
+    prev.Message === next.Message &&
+    prev.EditComposer === next.EditComposer &&
+    prev.UserEditComposer === next.UserEditComposer &&
+    prev.AssistantEditComposer === next.AssistantEditComposer &&
+    prev.SystemEditComposer === next.SystemEditComposer &&
+    prev.UserMessage === next.UserMessage &&
+    prev.AssistantMessage === next.AssistantMessage &&
+    prev.SystemMessage === next.SystemMessage
+  );
+};
+
+const DEFAULT_SYSTEM_MESSAGE = () => null;
+
+const getComponent = (
+  components: ThreadPrimitiveMessages.Props["components"],
+  role: ThreadMessageType["role"],
+  isEditing: boolean,
+) => {
+  switch (role) {
+    case "user":
+      if (isEditing) {
+        return (
+          components.UserEditComposer ??
+          components.EditComposer ??
+          components.UserMessage ??
+          (components.Message as ComponentType)
+        );
+      } else {
+        return components.UserMessage ?? (components.Message as ComponentType);
+      }
+    case "assistant":
+      if (isEditing) {
+        return (
+          components.AssistantEditComposer ??
+          components.EditComposer ??
+          components.AssistantMessage ??
+          (components.Message as ComponentType)
+        );
+      } else {
+        return (
+          components.AssistantMessage ?? (components.Message as ComponentType)
+        );
+      }
+    case "system":
+      if (isEditing) {
+        return (
+          components.SystemEditComposer ??
+          components.EditComposer ??
+          components.SystemMessage ??
+          (components.Message as ComponentType)
+        );
+      } else {
+        return (
+          components.SystemMessage ??
+          (components.Message as ComponentType) ??
+          DEFAULT_SYSTEM_MESSAGE
+        );
+      }
+    default:
+      const _exhaustiveCheck: never = role;
+      throw new Error(`Unknown message role: ${_exhaustiveCheck}`);
+  }
+};
+
+type ThreadMessageComponentProps = {
+  components: ThreadPrimitiveMessages.Props["components"];
+};
+
+const ThreadMessageComponent: FC<ThreadMessageComponentProps> = ({
+  components,
+}) => {
+  const role = useAuiState((s) => s.message.role);
+  const isEditing = useAuiState((s) => s.message.composer.isEditing);
+  const Component = getComponent(components, role, isEditing);
+
+  return <Component />;
+};
+export namespace ThreadPrimitiveMessageByIndex {
+  export type Props = {
+    index: number;
+    components: ThreadPrimitiveMessages.Props["components"];
+  };
+}
+
+/**
+ * Renders a single message at the specified index in the current thread.
+ *
+ * This component provides message context for a specific message in the thread
+ * and renders it using the provided component configuration.
+ *
+ * @example
+ * ```tsx
+ * <ThreadPrimitive.MessageByIndex
+ *   index={0}
+ *   components={{
+ *     UserMessage: MyUserMessage,
+ *     AssistantMessage: MyAssistantMessage
+ *   }}
+ * />
+ * ```
+ */
+export const ThreadPrimitiveMessageByIndex: FC<ThreadPrimitiveMessageByIndex.Props> =
+  memo(
+    ({ index, components }) => {
+      return (
+        <MessageByIndexProvider index={index}>
+          <ThreadMessageComponent components={components} />
+        </MessageByIndexProvider>
+      );
+    },
+    (prev, next) =>
+      prev.index === next.index &&
+      isComponentsSame(prev.components, next.components),
+  );
+
+ThreadPrimitiveMessageByIndex.displayName = "ThreadPrimitive.MessageByIndex";
+
+/**
+ * Renders all messages in the current thread using the provided component configuration.
+ *
+ * This component automatically renders all messages in the thread, providing the appropriate
+ * message context for each message. It handles different message types (user, assistant, system)
+ * and supports editing mode through the provided edit composer components.
+ *
+ * @example
+ * ```tsx
+ * <ThreadPrimitive.Messages
+ *   components={{
+ *     UserMessage: MyUserMessage,
+ *     AssistantMessage: MyAssistantMessage,
+ *     EditComposer: MyEditComposer
+ *   }}
+ * />
+ * ```
+ */
+export const ThreadPrimitiveMessagesImpl: FC<ThreadPrimitiveMessages.Props> = ({
+  components,
+}) => {
+  const messagesLength = useAuiState((s) => s.thread.messages.length);
+
+  const messageElements = useMemo(() => {
+    if (messagesLength === 0) return null;
+    return Array.from({ length: messagesLength }, (_, index) => (
+      <ThreadPrimitiveMessageByIndex
+        key={index}
+        index={index}
+        components={components}
+      />
+    ));
+  }, [messagesLength, components]);
+
+  return messageElements;
+};
+
+ThreadPrimitiveMessagesImpl.displayName = "ThreadPrimitive.Messages";
+
+export const ThreadPrimitiveMessages = memo(
+  ThreadPrimitiveMessagesImpl,
+  (prev, next) => isComponentsSame(prev.components, next.components),
+);

package/src/react/primitives/thread/ThreadSuggestions.tsx

@@ -0,0 +1,82 @@
+import { type ComponentType, type FC, memo, useMemo } from "react";
+import { useAuiState } from "@assistant-ui/store";
+import { SuggestionByIndexProvider } from "../../providers/SuggestionByIndexProvider";
+
+export namespace ThreadPrimitiveSuggestions {
+  export type Props = {
+    /**
+     * Component to render for each suggestion.
+     */
+    components: {
+      /** Component used to render each suggestion */
+      Suggestion: ComponentType;
+    };
+  };
+}
+
+type SuggestionComponentProps = {
+  components: ThreadPrimitiveSuggestions.Props["components"];
+};
+
+const SuggestionComponent: FC<SuggestionComponentProps> = ({ components }) => {
+  const Component = components.Suggestion;
+  return <Component />;
+};
+
+export namespace ThreadPrimitiveSuggestionByIndex {
+  export type Props = {
+    index: number;
+    components: ThreadPrimitiveSuggestions.Props["components"];
+  };
+}
+
+/**
+ * Renders a single suggestion at the specified index.
+ */
+export const ThreadPrimitiveSuggestionByIndex: FC<ThreadPrimitiveSuggestionByIndex.Props> =
+  memo(
+    ({ index, components }) => {
+      return (
+        <SuggestionByIndexProvider index={index}>
+          <SuggestionComponent components={components} />
+        </SuggestionByIndexProvider>
+      );
+    },
+    (prev, next) =>
+      prev.index === next.index &&
+      prev.components.Suggestion === next.components.Suggestion,
+  );
+
+ThreadPrimitiveSuggestionByIndex.displayName =
+  "ThreadPrimitive.SuggestionByIndex";
+
+/**
+ * Renders all suggestions using the provided component configuration.
+ */
+export const ThreadPrimitiveSuggestionsImpl: FC<
+  ThreadPrimitiveSuggestions.Props
+> = ({ components }) => {
+  const suggestionsLength = useAuiState(
+    (s) => s.suggestions.suggestions.length,
+  );
+
+  const suggestionElements = useMemo(() => {
+    if (suggestionsLength === 0) return null;
+    return Array.from({ length: suggestionsLength }, (_, index) => (
+      <ThreadPrimitiveSuggestionByIndex
+        key={index}
+        index={index}
+        components={components}
+      />
+    ));
+  }, [suggestionsLength, components]);
+
+  return suggestionElements;
+};
+
+ThreadPrimitiveSuggestionsImpl.displayName = "ThreadPrimitive.Suggestions";
+
+export const ThreadPrimitiveSuggestions = memo(
+  ThreadPrimitiveSuggestionsImpl,
+  (prev, next) => prev.components.Suggestion === next.components.Suggestion,
+);

package/src/react/primitives/threadList/ThreadListItems.tsx

@@ -0,0 +1,66 @@
+import { ComponentType, FC, memo, useMemo } from "react";
+import { useAuiState } from "@assistant-ui/store";
+import { ThreadListItemByIndexProvider } from "../../providers";
+
+export namespace ThreadListPrimitiveItems {
+  export type Props = {
+    archived?: boolean | undefined;
+    components: {
+      ThreadListItem: ComponentType;
+    };
+  };
+}
+
+export namespace ThreadListPrimitiveItemByIndex {
+  export type Props = {
+    index: number;
+    archived?: boolean | undefined;
+    components: ThreadListPrimitiveItems.Props["components"];
+  };
+}
+
+/**
+ * Renders a single thread list item at the specified index.
+ */
+export const ThreadListPrimitiveItemByIndex: FC<ThreadListPrimitiveItemByIndex.Props> =
+  memo(
+    ({ index, archived = false, components }) => {
+      const ThreadListItemComponent = components.ThreadListItem;
+
+      return (
+        <ThreadListItemByIndexProvider index={index} archived={archived}>
+          <ThreadListItemComponent />
+        </ThreadListItemByIndexProvider>
+      );
+    },
+    (prev, next) =>
+      prev.index === next.index &&
+      prev.archived === next.archived &&
+      prev.components.ThreadListItem === next.components.ThreadListItem,
+  );
+
+ThreadListPrimitiveItemByIndex.displayName = "ThreadListPrimitive.ItemByIndex";
+
+export const ThreadListPrimitiveItems: FC<ThreadListPrimitiveItems.Props> = ({
+  archived = false,
+  components,
+}) => {
+  const contentLength = useAuiState((s) =>
+    archived ? s.threads.archivedThreadIds.length : s.threads.threadIds.length,
+  );
+
+  const listElements = useMemo(() => {
+    return Array.from({ length: contentLength }, (_, index) => (
+      <ThreadListPrimitiveItemByIndex
+        key={index}
+        index={index}
+        archived={archived}
+        components={components}
+      />
+    ));
+  }, [contentLength, archived, components]);
+
+  return listElements;
+};
+
+ThreadListPrimitiveItems.displayName = "ThreadListPrimitive.Items";

package/src/react/primitives/threadListItem/ThreadListItemTitle.tsx

@@ -0,0 +1,17 @@
+import type { FC, ReactNode } from "react";
+import { useAuiState } from "@assistant-ui/store";
+
+export namespace ThreadListItemPrimitiveTitle {
+  export type Props = {
+    fallback?: ReactNode;
+  };
+}
+
+export const ThreadListItemPrimitiveTitle: FC<
+  ThreadListItemPrimitiveTitle.Props
+> = ({ fallback }) => {
+  const title = useAuiState((s) => s.threadListItem.title);
+  return <>{title || fallback}</>;
+};
+
+ThreadListItemPrimitiveTitle.displayName = "ThreadListItemPrimitive.Title";

package/src/react/providers/AttachmentByIndexProvider.tsx

@@ -0,0 +1,34 @@
+import { type FC, type PropsWithChildren } from "react";
+import { useAui, AuiProvider, Derived } from "@assistant-ui/store";
+
+export const MessageAttachmentByIndexProvider: FC<
+  PropsWithChildren<{
+    index: number;
+  }>
+> = ({ index, children }) => {
+  const aui = useAui({
+    attachment: Derived({
+      source: "message",
+      query: { type: "index", index },
+      get: (aui) => aui.message().attachment({ index }),
+    }),
+  });
+
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
+};
+
+export const ComposerAttachmentByIndexProvider: FC<
+  PropsWithChildren<{
+    index: number;
+  }>
+> = ({ index, children }) => {
+  const aui = useAui({
+    attachment: Derived({
+      source: "composer",
+      query: { type: "index", index },
+      get: (aui) => aui.composer().attachment({ index }),
+    }),
+  });
+
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
+};

package/src/react/providers/ChainOfThoughtByIndicesProvider.tsx

@@ -0,0 +1,34 @@
+import { type FC, type PropsWithChildren } from "react";
+import { useAui, useAuiState, AuiProvider } from "@assistant-ui/store";
+import { ChainOfThoughtClient } from "../../store/clients/chain-of-thought-client";
+import type { ChainOfThoughtPart } from "../../store/scopes/chain-of-thought";
+
+export const ChainOfThoughtByIndicesProvider: FC<
+  PropsWithChildren<{
+    startIndex: number;
+    endIndex: number;
+  }>
+> = ({ startIndex, endIndex, children }) => {
+  const parts = useAuiState((s) => s.message.parts).slice(
+    startIndex,
+    endIndex + 1,
+  ) as ChainOfThoughtPart[];
+
+  const parentAui = useAui();
+
+  const aui = useAui({
+    chainOfThought: ChainOfThoughtClient({
+      parts,
+      getMessagePart: ({ index }) => {
+        if (index < 0 || index >= parts.length) {
+          throw new Error(
+            `ChainOfThought part index ${index} is out of bounds (0..${parts.length - 1})`,
+          );
+        }
+        return parentAui.message().part({ index: startIndex + index });
+      },
+    }),
+  });
+
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
+};

package/src/react/providers/ChainOfThoughtPartByIndexProvider.tsx

@@ -0,0 +1,18 @@
+import { type FC, type PropsWithChildren } from "react";
+import { useAui, AuiProvider, Derived } from "@assistant-ui/store";
+
+export const ChainOfThoughtPartByIndexProvider: FC<
+  PropsWithChildren<{
+    index: number;
+  }>
+> = ({ index, children }) => {
+  const aui = useAui({
+    part: Derived({
+      source: "chainOfThought",
+      query: { type: "index", index },
+      get: (aui) => aui.chainOfThought().part({ index }),
+    }),
+  });
+
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
+};

package/src/react/providers/MessageByIndexProvider.tsx

@@ -0,0 +1,23 @@
+import { type FC, type PropsWithChildren } from "react";
+import { useAui, AuiProvider, Derived } from "@assistant-ui/store";
+
+export const MessageByIndexProvider: FC<
+  PropsWithChildren<{
+    index: number;
+  }>
+> = ({ index, children }) => {
+  const aui = useAui({
+    message: Derived({
+      source: "thread",
+      query: { type: "index", index },
+      get: (aui) => aui.thread().message({ index }),
+    }),
+    composer: Derived({
+      source: "message",
+      query: {},
+      get: (aui) => aui.thread().message({ index }).composer(),
+    }),
+  });
+
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
+};

package/src/react/providers/PartByIndexProvider.tsx

@@ -0,0 +1,18 @@
+import { type FC, type PropsWithChildren } from "react";
+import { useAui, AuiProvider, Derived } from "@assistant-ui/store";
+
+export const PartByIndexProvider: FC<
+  PropsWithChildren<{
+    index: number;
+  }>
+> = ({ index, children }) => {
+  const aui = useAui({
+    part: Derived({
+      source: "message",
+      query: { type: "index", index },
+      get: (aui) => aui.message().part({ index }),
+    }),
+  });
+
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
+};

package/src/react/providers/SuggestionByIndexProvider.tsx

@@ -0,0 +1,21 @@
+import { type FC, type PropsWithChildren } from "react";
+import { AuiProvider, Derived, useAui } from "@assistant-ui/store";
+
+export type SuggestionByIndexProviderProps = PropsWithChildren<{
+  index: number;
+}>;
+
+export const SuggestionByIndexProvider: FC<SuggestionByIndexProviderProps> = ({
+  index,
+  children,
+}) => {
+  const aui = useAui({
+    suggestion: Derived({
+      source: "suggestions",
+      query: { index },
+      get: (aui) => aui.suggestions().suggestion({ index }),
+    }),
+  });
+
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
+};

package/src/react/providers/TextMessagePartProvider.tsx

@@ -0,0 +1,46 @@
+import { type FC, type PropsWithChildren } from "react";
+import { useAui, AuiProvider, type ClientOutput } from "@assistant-ui/store";
+import type { PartState } from "../../store/scopes/part";
+import { resource, tapMemo } from "@assistant-ui/tap";
+
+const TextMessagePartClient = resource(
+  ({
+    text,
+    isRunning,
+  }: {
+    text: string;
+    isRunning: boolean;
+  }): ClientOutput<"part"> => {
+    const state = tapMemo<PartState>(
+      () => ({
+        type: "text",
+        text,
+        status: isRunning ? { type: "running" } : { type: "complete" },
+      }),
+      [text, isRunning],
+    );
+
+    return {
+      getState: () => state,
+      addToolResult: () => {
+        throw new Error("Not supported");
+      },
+      resumeToolCall: () => {
+        throw new Error("Not supported");
+      },
+    };
+  },
+);
+
+export const TextMessagePartProvider: FC<
+  PropsWithChildren<{
+    text: string;
+    isRunning?: boolean;
+  }>
+> = ({ text, isRunning = false, children }) => {
+  const aui = useAui({
+    part: TextMessagePartClient({ text, isRunning }),
+  });
+
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
+};

package/src/react/providers/ThreadListItemByIndexProvider.tsx

@@ -0,0 +1,19 @@
+import { type FC, type PropsWithChildren } from "react";
+import { useAui, AuiProvider, Derived } from "@assistant-ui/store";
+
+export const ThreadListItemByIndexProvider: FC<
+  PropsWithChildren<{
+    index: number;
+    archived: boolean;
+  }>
+> = ({ index, archived, children }) => {
+  const aui = useAui({
+    threadListItem: Derived({
+      source: "threads",
+      query: { type: "index", index, archived },
+      get: (aui) => aui.threads().item({ index, archived }),
+    }),
+  });
+
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
+};

package/src/react/providers/ThreadListItemRuntimeProvider.tsx

@@ -0,0 +1,16 @@
+import { type FC, type PropsWithChildren } from "react";
+import { useAui, AuiProvider } from "@assistant-ui/store";
+import type { ThreadListItemRuntime } from "../..";
+import { ThreadListItemClient } from "../../store/internal";
+
+export const ThreadListItemRuntimeProvider: FC<
+  PropsWithChildren<{
+    runtime: ThreadListItemRuntime;
+  }>
+> = ({ runtime, children }) => {
+  const aui = useAui({
+    threadListItem: ThreadListItemClient({ runtime }),
+  });
+
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
+};

package/src/react/providers/index.ts

@@ -0,0 +1,15 @@
+export {
+  MessageAttachmentByIndexProvider,
+  ComposerAttachmentByIndexProvider,
+} from "./AttachmentByIndexProvider";
+export { ThreadListItemRuntimeProvider } from "./ThreadListItemRuntimeProvider";
+export { MessageByIndexProvider } from "./MessageByIndexProvider";
+export { PartByIndexProvider } from "./PartByIndexProvider";
+export { TextMessagePartProvider } from "./TextMessagePartProvider";
+export { ChainOfThoughtByIndicesProvider } from "./ChainOfThoughtByIndicesProvider";
+export { ThreadListItemByIndexProvider } from "./ThreadListItemByIndexProvider";
+export { ChainOfThoughtPartByIndexProvider } from "./ChainOfThoughtPartByIndexProvider";
+export {
+  SuggestionByIndexProvider,
+  type SuggestionByIndexProviderProps,
+} from "./SuggestionByIndexProvider";