@assistant-ui/react 0.12.7 → 0.12.9

package/src/client/ChainOfThoughtClient.ts

@@ -0,0 +1,43 @@
+import { resource, tapMemo, tapState } from "@assistant-ui/tap";
+import { type ClientOutput } from "@assistant-ui/store";
+import type {
+  ChainOfThoughtState,
+  ChainOfThoughtPart,
+} from "../types/scopes/chainOfThought";
+import type { MessagePartStatus } from "../types/AssistantTypes";
+import type { PartMethods } from "../types/scopes/part";
+
+const COMPLETE_STATUS: MessagePartStatus = Object.freeze({
+  type: "complete",
+});
+
+export const ChainOfThoughtClient = resource(
+  ({
+    parts,
+    getMessagePart,
+  }: {
+    parts: readonly ChainOfThoughtPart[];
+    getMessagePart: (selector: { index: number }) => PartMethods;
+  }): ClientOutput<"chainOfThought"> => {
+    const [collapsed, setCollapsed] = tapState(true);
+
+    const status = tapMemo(() => {
+      const lastPart = parts[parts.length - 1];
+      return lastPart?.status ?? COMPLETE_STATUS;
+    }, [parts]);
+
+    const state = tapMemo<ChainOfThoughtState>(
+      () => ({ parts, collapsed, status }),
+      [parts, collapsed, status],
+    );
+
+    return {
+      state,
+      methods: {
+        getState: () => state,
+        setCollapsed,
+        part: getMessagePart,
+      },
+    };
+  },
+);

package/src/client/index.ts

@@ -10,3 +10,4 @@ export {
   InMemoryThreadList,
   type InMemoryThreadListProps,
 } from "./InMemoryThreadList";
+export { ChainOfThoughtClient } from "./ChainOfThoughtClient";

package/src/context/providers/ChainOfThoughtByIndicesProvider.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { type FC, type PropsWithChildren } from "react";
+import { useAui, useAuiState, AuiProvider } from "@assistant-ui/store";
+import { ChainOfThoughtClient } from "../../client/ChainOfThoughtClient";
+import type { ChainOfThoughtPart } from "../../types/scopes/chainOfThought";
+
+export const ChainOfThoughtByIndicesProvider: FC<
+  PropsWithChildren<{
+    startIndex: number;
+    endIndex: number;
+  }>
+> = ({ startIndex, endIndex, children }) => {
+  const parts = useAuiState(({ message }) => 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/context/providers/ChainOfThoughtPartByIndexProvider.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+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/primitives/chainOfThought/ChainOfThoughtAccordionTrigger.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import {
+  ActionButtonElement,
+  ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+import { useCallback } from "react";
+import { useAuiState, useAui } from "@assistant-ui/store";
+
+const useChainOfThoughtAccordionTrigger = () => {
+  const aui = useAui();
+  const collapsed = useAuiState(
+    ({ chainOfThought }) => chainOfThought.collapsed,
+  );
+
+  const callback = useCallback(() => {
+    aui.chainOfThought().setCollapsed(!collapsed);
+  }, [aui, collapsed]);
+
+  return callback;
+};
+
+export namespace ChainOfThoughtPrimitiveAccordionTrigger {
+  export type Element = ActionButtonElement;
+  /**
+   * Props for the ChainOfThoughtPrimitive.AccordionTrigger component.
+   * Inherits all button element props and action button functionality.
+   */
+  export type Props = ActionButtonProps<
+    typeof useChainOfThoughtAccordionTrigger
+  >;
+}
+
+/**
+ * A button component that toggles the collapsed state of the chain of thought accordion.
+ *
+ * This component automatically handles the toggle functionality, expanding or collapsing
+ * the chain of thought parts when clicked.
+ *
+ * @example
+ * ```tsx
+ * <ChainOfThoughtPrimitive.AccordionTrigger>
+ *   Toggle Reasoning
+ * </ChainOfThoughtPrimitive.AccordionTrigger>
+ * ```
+ */
+export const ChainOfThoughtPrimitiveAccordionTrigger = createActionButton(
+  "ChainOfThoughtPrimitive.AccordionTrigger",
+  useChainOfThoughtAccordionTrigger,
+);

package/src/primitives/chainOfThought/ChainOfThoughtParts.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+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";
+import type {
+  ReasoningMessagePartComponent,
+  ToolCallMessagePartComponent,
+} from "../../types/MessagePartComponentTypes";
+
+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.
+ *
+ * @example
+ * ```tsx
+ * <ChainOfThoughtPrimitive.Parts
+ *   components={{
+ *     Reasoning: ({ text }) => <p className="reasoning">{text}</p>,
+ *     tools: {
+ *       Fallback: ({ toolName }) => <div>Tool: {toolName}</div>
+ *     }
+ *   }}
+ * />
+ * ```
+ */
+export const ChainOfThoughtPrimitiveParts: FC<
+  ChainOfThoughtPrimitiveParts.Props
+> = ({ components }) => {
+  const partsLength = useAuiState(
+    ({ chainOfThought }) => 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/primitives/chainOfThought/ChainOfThoughtRoot.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Primitive } from "@radix-ui/react-primitive";
+import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
+
+type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
+
+export namespace ChainOfThoughtPrimitiveRoot {
+  export type Element = ComponentRef<typeof Primitive.div>;
+  export type Props = PrimitiveDivProps;
+}
+
+/**
+ * The root container for chain of thought components.
+ *
+ * This component provides a wrapper for chain of thought content,
+ * including reasoning and tool-call parts that can be collapsed in an accordion.
+ *
+ * @example
+ * ```tsx
+ * <ChainOfThoughtPrimitive.Root>
+ *   <ChainOfThoughtPrimitive.AccordionTrigger>
+ *     Toggle reasoning
+ *   </ChainOfThoughtPrimitive.AccordionTrigger>
+ *   <ChainOfThoughtPrimitive.Parts />
+ * </ChainOfThoughtPrimitive.Root>
+ * ```
+ */
+export const ChainOfThoughtPrimitiveRoot = forwardRef<
+  ChainOfThoughtPrimitiveRoot.Element,
+  ChainOfThoughtPrimitiveRoot.Props
+>((props, ref) => {
+  return <Primitive.div {...props} ref={ref} />;
+});
+
+ChainOfThoughtPrimitiveRoot.displayName = "ChainOfThoughtPrimitive.Root";

package/src/primitives/chainOfThought/index.ts

@@ -0,0 +1,14 @@
+export {
+  ChainOfThoughtPrimitiveRoot as Root,
+  type ChainOfThoughtPrimitiveRoot as RootPrimitive,
+} from "./ChainOfThoughtRoot";
+
+export {
+  ChainOfThoughtPrimitiveAccordionTrigger as AccordionTrigger,
+  type ChainOfThoughtPrimitiveAccordionTrigger as AccordionTriggerPrimitive,
+} from "./ChainOfThoughtAccordionTrigger";
+
+export {
+  ChainOfThoughtPrimitiveParts as Parts,
+  type ChainOfThoughtPrimitiveParts as PartsPrimitive,
+} from "./ChainOfThoughtParts";

package/src/primitives/index.ts

@@ -3,6 +3,7 @@ export * as ActionBarMorePrimitive from "./actionBarMore";
 export * as AssistantModalPrimitive from "./assistantModal";
 export * as AttachmentPrimitive from "./attachment";
 export * as BranchPickerPrimitive from "./branchPicker";
+export * as ChainOfThoughtPrimitive from "./chainOfThought";
 export * as ComposerPrimitive from "./composer";
 export * as MessagePartPrimitive from "./messagePart";
 export * as ErrorPrimitive from "./error";