@assistant-ui/react 0.15.24 → 0.15.25

package/src/primitives/composer/trigger/TriggerPopoverDirective.tsx

@@ -1,20 +1,17 @@
 "use client";
 
-import type {
-  Unstable_DirectiveFormatter,
-  Unstable_TriggerItem,
-} from "@assistant-ui/core";
-import { unstable_defaultDirectiveFormatter } from "@assistant-ui/core";
+import type { DirectiveFormatter, TriggerItem } from "@assistant-ui/core";
+import { defaultDirectiveFormatter } from "@assistant-ui/core";
 import { useEffect, useInsertionEffect, useRef, type FC } from "react";
 import { useTriggerBehaviorRegistration } from "./TriggerPopover";
 import type { TriggerBehavior } from "./triggerSelectionResource";
 
 export namespace ComposerPrimitiveTriggerPopoverDirective {
   export type Props = {
-    /** Defaults to `unstable_defaultDirectiveFormatter`. */
-    readonly formatter?: Unstable_DirectiveFormatter | undefined;
+    /** Defaults to `defaultDirectiveFormatter`. */
+    readonly formatter?: DirectiveFormatter | undefined;
     /** Fires after an item has been inserted into the composer. */
-    readonly onInserted?: ((item: Unstable_TriggerItem) => void) | undefined;
+    readonly onInserted?: ((item: TriggerItem) => void) | undefined;
   };
 }
 
@@ -22,16 +19,16 @@ export namespace ComposerPrimitiveTriggerPopoverDirective {
  * Configures a `<TriggerPopover>` to insert a directive chip when an item is
  * selected. Render exactly one behavior sub-primitive per `<TriggerPopover>`.
  *
- * Exposed as `ComposerPrimitive.Unstable_TriggerPopover.Directive`.
+ * Exposed as `ComposerPrimitive.TriggerPopover.Directive`.
  *
  * @example
  * ```tsx
- * <ComposerPrimitive.Unstable_TriggerPopover char="@" adapter={mentionAdapter}>
- *   <ComposerPrimitive.Unstable_TriggerPopover.Directive
- *     formatter={unstable_defaultDirectiveFormatter}
+ * <ComposerPrimitive.TriggerPopover char="@" adapter={mentionAdapter}>
+ *   <ComposerPrimitive.TriggerPopover.Directive
+ *     formatter={defaultDirectiveFormatter}
  *     onInserted={(item) => track("mention", item.id)}
  *   />
- * </ComposerPrimitive.Unstable_TriggerPopover>
+ * </ComposerPrimitive.TriggerPopover>
  * ```
  */
 export const ComposerPrimitiveTriggerPopoverDirective: FC<
@@ -46,7 +43,7 @@ export const ComposerPrimitiveTriggerPopoverDirective: FC<
   useEffect(() => {
     const behavior: TriggerBehavior = {
       kind: "directive",
-      formatter: formatter ?? unstable_defaultDirectiveFormatter,
+      formatter: formatter ?? defaultDirectiveFormatter,
       onInserted: (item) => onInsertedRef.current?.(item),
     };
     return register(behavior);

package/src/primitives/composer/trigger/TriggerPopoverExports.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, expectTypeOf, it } from "vitest";
+import * as ComposerPrimitive from "../../composer";
+import {
+  defaultDirectiveFormatter,
+  unstable_defaultDirectiveFormatter,
+  type DirectiveFormatter,
+  type TriggerAdapter,
+  type TriggerCategory,
+  type TriggerItem,
+  type Unstable_DirectiveFormatter,
+  type Unstable_TriggerBehavior,
+  type Unstable_TriggerItem,
+} from "../../../index";
+import type { TriggerBehavior } from "./triggerSelectionResource";
+
+describe("stable trigger popover exports", () => {
+  it("keeps every old composer member as an alias of its stable member", () => {
+    expect(ComposerPrimitive.Unstable_TriggerPopover).toBe(
+      ComposerPrimitive.TriggerPopover,
+    );
+    expect(ComposerPrimitive.Unstable_TriggerPopover.Directive).toBe(
+      ComposerPrimitive.TriggerPopover.Directive,
+    );
+    expect(ComposerPrimitive.Unstable_TriggerPopover.Action).toBe(
+      ComposerPrimitive.TriggerPopover.Action,
+    );
+    expect(ComposerPrimitive.Unstable_TriggerPopoverRoot).toBe(
+      ComposerPrimitive.TriggerPopoverRoot,
+    );
+    expect(ComposerPrimitive.Unstable_TriggerPopoverCategories).toBe(
+      ComposerPrimitive.TriggerPopoverCategories,
+    );
+    expect(ComposerPrimitive.Unstable_TriggerPopoverCategoryItem).toBe(
+      ComposerPrimitive.TriggerPopoverCategoryItem,
+    );
+    expect(ComposerPrimitive.Unstable_TriggerPopoverItems).toBe(
+      ComposerPrimitive.TriggerPopoverItems,
+    );
+    expect(ComposerPrimitive.Unstable_TriggerPopoverItem).toBe(
+      ComposerPrimitive.TriggerPopoverItem,
+    );
+    expect(ComposerPrimitive.Unstable_TriggerPopoverBack).toBe(
+      ComposerPrimitive.TriggerPopoverBack,
+    );
+  });
+
+  it("keeps the old members' namespaced prop types", () => {
+    expectTypeOf<ComposerPrimitive.Unstable_TriggerPopoverItem.Props>().toEqualTypeOf<ComposerPrimitive.TriggerPopoverItem.Props>();
+    expectTypeOf<ComposerPrimitive.Unstable_TriggerPopoverBack.Element>().toEqualTypeOf<ComposerPrimitive.TriggerPopoverBack.Element>();
+  });
+
+  it("exports the stable adapter, item, category and formatter names beside the old ones", () => {
+    expect(unstable_defaultDirectiveFormatter).toBe(defaultDirectiveFormatter);
+    expectTypeOf<Unstable_TriggerItem>().toEqualTypeOf<TriggerItem>();
+    expectTypeOf<Unstable_DirectiveFormatter>().toEqualTypeOf<DirectiveFormatter>();
+    expectTypeOf<TriggerAdapter["categories"]>().returns.toEqualTypeOf<
+      readonly TriggerCategory[]
+    >();
+    expectTypeOf<Unstable_TriggerBehavior>().toEqualTypeOf<TriggerBehavior>();
+  });
+});

package/src/primitives/composer/trigger/TriggerPopoverItems.tsx

@@ -10,7 +10,7 @@ import {
 } from "react";
 import { composeEventHandlers } from "radix-ui/internal";
 import { useTriggerPopoverScopeContext } from "./TriggerPopover";
-import type { Unstable_TriggerItem } from "@assistant-ui/core";
+import type { TriggerItem } from "@assistant-ui/core";
 
 export namespace ComposerPrimitiveTriggerPopoverItems {
   export type Element = ComponentRef<typeof Primitive.div>;
@@ -18,7 +18,7 @@ export namespace ComposerPrimitiveTriggerPopoverItems {
     ComponentPropsWithoutRef<typeof Primitive.div>,
     "children"
   > & {
-    children: (items: readonly Unstable_TriggerItem[]) => ReactNode;
+    children: (items: readonly TriggerItem[]) => ReactNode;
   };
 }
 
@@ -53,7 +53,7 @@ ComposerPrimitiveTriggerPopoverItems.displayName =
 export namespace ComposerPrimitiveTriggerPopoverItem {
   export type Element = ComponentRef<typeof Primitive.button>;
   export type Props = ComponentPropsWithoutRef<typeof Primitive.button> & {
-    item: Unstable_TriggerItem;
+    item: TriggerItem;
     index?: number | undefined;
   };
 }

package/src/primitives/composer/trigger/TriggerPopoverRootContext.tsx

@@ -294,21 +294,21 @@ const TriggerPopoverRootInner: FC<
  *
  * @example
  * ```tsx
- * <ComposerPrimitive.Unstable_TriggerPopoverRoot>
- *   <ComposerPrimitive.Unstable_TriggerPopover char="@" adapter={mentionAdapter}>
- *     <ComposerPrimitive.Unstable_TriggerPopover.Directive formatter={formatter} />
+ * <ComposerPrimitive.TriggerPopoverRoot>
+ *   <ComposerPrimitive.TriggerPopover char="@" adapter={mentionAdapter}>
+ *     <ComposerPrimitive.TriggerPopover.Directive formatter={formatter} />
  *     ...
- *   </ComposerPrimitive.Unstable_TriggerPopover>
+ *   </ComposerPrimitive.TriggerPopover>
  *
- *   <ComposerPrimitive.Unstable_TriggerPopover char="/" adapter={slashAdapter}>
- *     <ComposerPrimitive.Unstable_TriggerPopover.Action onExecute={handler} />
+ *   <ComposerPrimitive.TriggerPopover char="/" adapter={slashAdapter}>
+ *     <ComposerPrimitive.TriggerPopover.Action onExecute={handler} />
  *     ...
- *   </ComposerPrimitive.Unstable_TriggerPopover>
+ *   </ComposerPrimitive.TriggerPopover>
  *
  *   <ComposerPrimitive.Root>
  *     <ComposerPrimitive.Input />
  *   </ComposerPrimitive.Root>
- * </ComposerPrimitive.Unstable_TriggerPopoverRoot>
+ * </ComposerPrimitive.TriggerPopoverRoot>
  * ```
  */
 export const ComposerPrimitiveTriggerPopoverRoot: FC<

package/src/primitives/composer.ts

@@ -1,3 +1,5 @@
+import type { TriggerMatch, TriggerMatcher } from "./composer/trigger";
+
 export { ComposerPrimitiveRoot as Root } from "./composer/ComposerRoot";
 export { ComposerPrimitiveInput as Input } from "./composer/ComposerInput";
 export { ComposerPrimitiveSend as Send } from "./composer/ComposerSend";
@@ -15,12 +17,26 @@ export { ComposerPrimitiveQuoteText as QuoteText } from "./composer/ComposerQuot
 export { ComposerPrimitiveQuoteDismiss as QuoteDismiss } from "./composer/ComposerQuote";
 export { ComposerPrimitiveQueue as Queue } from "./composer/ComposerQueue";
 
+export { ComposerPrimitiveTriggerPopover as TriggerPopover } from "./composer/trigger";
+/** @deprecated Use `ComposerPrimitive.TriggerPopover` instead. */
 export { ComposerPrimitiveTriggerPopover as Unstable_TriggerPopover } from "./composer/trigger";
+export { ComposerPrimitiveTriggerPopoverRoot as TriggerPopoverRoot } from "./composer/trigger";
+/** @deprecated Use `ComposerPrimitive.TriggerPopoverRoot` instead. */
 export { ComposerPrimitiveTriggerPopoverRoot as Unstable_TriggerPopoverRoot } from "./composer/trigger";
+export { ComposerPrimitiveTriggerPopoverCategories as TriggerPopoverCategories } from "./composer/trigger";
+/** @deprecated Use `ComposerPrimitive.TriggerPopoverCategories` instead. */
 export { ComposerPrimitiveTriggerPopoverCategories as Unstable_TriggerPopoverCategories } from "./composer/trigger";
+export { ComposerPrimitiveTriggerPopoverCategoryItem as TriggerPopoverCategoryItem } from "./composer/trigger";
+/** @deprecated Use `ComposerPrimitive.TriggerPopoverCategoryItem` instead. */
 export { ComposerPrimitiveTriggerPopoverCategoryItem as Unstable_TriggerPopoverCategoryItem } from "./composer/trigger";
+export { ComposerPrimitiveTriggerPopoverItems as TriggerPopoverItems } from "./composer/trigger";
+/** @deprecated Use `ComposerPrimitive.TriggerPopoverItems` instead. */
 export { ComposerPrimitiveTriggerPopoverItems as Unstable_TriggerPopoverItems } from "./composer/trigger";
+export { ComposerPrimitiveTriggerPopoverItem as TriggerPopoverItem } from "./composer/trigger";
+/** @deprecated Use `ComposerPrimitive.TriggerPopoverItem` instead. */
 export { ComposerPrimitiveTriggerPopoverItem as Unstable_TriggerPopoverItem } from "./composer/trigger";
+export { ComposerPrimitiveTriggerPopoverBack as TriggerPopoverBack } from "./composer/trigger";
+/** @deprecated Use `ComposerPrimitive.TriggerPopoverBack` instead. */
 export { ComposerPrimitiveTriggerPopoverBack as Unstable_TriggerPopoverBack } from "./composer/trigger";
 export { useTriggerPopoverRootContext as unstable_useTriggerPopoverRootContext } from "./composer/trigger";
 export { useTriggerPopoverRootContextOptional as unstable_useTriggerPopoverRootContextOptional } from "./composer/trigger";
@@ -29,4 +45,8 @@ export { useTriggerPopoverScopeContextOptional as unstable_useTriggerPopoverScop
 export { useTriggerPopoverTriggers as unstable_useTriggerPopoverTriggers } from "./composer/trigger";
 export { useTriggerPopoverTriggersOptional as unstable_useTriggerPopoverTriggersOptional } from "./composer/trigger";
 export type { RegisteredTrigger as Unstable_RegisteredTrigger } from "./composer/trigger";
-export type { TriggerMatcher as Unstable_TriggerMatcher } from "./composer/trigger";
+export type { TriggerMatch, TriggerMatcher } from "./composer/trigger";
+/** @deprecated Use `TriggerMatcher` instead. */
+export type Unstable_TriggerMatcher = TriggerMatcher;
+/** @deprecated Use `TriggerMatch` instead. */
+export type Unstable_TriggerMatch = TriggerMatch;

package/src/primitives/message/MessageRoot.test.tsx

@@ -2,14 +2,26 @@
 
 import { act, render } from "@testing-library/react";
 import { createContext, useContext } from "react";
+import type { ReactNode } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import type { ThreadMessageLike } from "@assistant-ui/core";
+import type {
+  ChatModelAdapter,
+  ThreadMessageLike,
+  ThreadMessage,
+} from "@assistant-ui/core";
 import {
   AssistantRuntimeProvider,
+  ThreadListItemRuntimeProvider,
   useExternalStoreRuntime,
+  useLocalRuntime,
 } from "@assistant-ui/core/react";
 import { useAuiState } from "@assistant-ui/store";
-import { ThreadPrimitiveMessageByIndex } from "../thread/ThreadMessages";
+import {
+  ThreadPrimitiveMessageByIndex,
+  ThreadPrimitiveMessages,
+} from "../thread/ThreadMessages";
 import { ThreadPrimitiveRoot } from "../thread/ThreadRoot";
 import { ThreadPrimitiveViewport } from "../thread/ThreadViewport";
 import { MessagePrimitiveRoot } from "./MessageRoot";
@@ -22,6 +34,14 @@ const messages: ThreadMessageLike[] = [
   },
 ];
 
+const initialMessages: readonly ThreadMessageLike[] = [
+  { role: "user", content: "Hydrated message" },
+];
+
+const chatModel: ChatModelAdapter = {
+  run: async () => ({ content: [] }),
+};
+
 class TestResizeObserver {
   observe() {}
   unobserve() {}
@@ -62,6 +82,64 @@ const Example = ({ visible = true }: { visible?: boolean }) => {
   );
 };
 
+const HydrationMessage = () => (
+  <MessagePrimitiveRoot data-testid="hydration-message" />
+);
+
+const LocalThread = ({
+  onRuntime,
+  turnAnchor,
+}: {
+  onRuntime: (runtime: ReturnType<typeof useLocalRuntime>) => void;
+  turnAnchor: "bottom" | "top";
+}) => {
+  const runtime = useLocalRuntime(chatModel, { initialMessages });
+  onRuntime(runtime);
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <ThreadPrimitiveRoot>
+        <ThreadPrimitiveViewport
+          scrollToBottomOnInitialize={false}
+          turnAnchor={turnAnchor}
+        >
+          <ThreadPrimitiveMessages components={{ Message: HydrationMessage }} />
+        </ThreadPrimitiveViewport>
+      </ThreadPrimitiveRoot>
+    </AssistantRuntimeProvider>
+  );
+};
+
+const NestedLocalRuntime = ({
+  onRuntime,
+  turnAnchor,
+}: {
+  onRuntime: (runtime: ReturnType<typeof useLocalRuntime>) => void;
+  turnAnchor: "bottom" | "top";
+}) => {
+  const host = useExternalStoreRuntime<ThreadMessage>({
+    messages: [],
+    onNew: async () => {},
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={host}>
+      <ThreadListItemRuntimeProvider runtime={host.threads.mainItem}>
+        <LocalThread onRuntime={onRuntime} turnAnchor={turnAnchor} />
+      </ThreadListItemRuntimeProvider>
+    </AssistantRuntimeProvider>
+  );
+};
+
+const renderOnServer = (node: ReactNode) => {
+  vi.stubGlobal("document", undefined);
+  try {
+    return renderToString(node);
+  } finally {
+    vi.unstubAllGlobals();
+  }
+};
+
 beforeEach(() => {
   vi.stubGlobal("ResizeObserver", TestResizeObserver);
 });
@@ -82,6 +160,51 @@ const mockHoveredElement = () => {
 };
 
 describe("MessagePrimitiveRoot", () => {
+  it.each(["bottom", "top"] as const)(
+    "hydrates nested local message ids with %s anchoring",
+    async (turnAnchor) => {
+      let serverRuntime: ReturnType<typeof useLocalRuntime> | undefined;
+      const html = renderOnServer(
+        <NestedLocalRuntime
+          onRuntime={(runtime) => (serverRuntime = runtime)}
+          turnAnchor={turnAnchor}
+        />,
+      );
+      const serverMessageId = serverRuntime!.thread.getState().messages[0]!.id;
+      const container = document.createElement("div");
+      container.innerHTML = html;
+      vi.stubGlobal("ResizeObserver", TestResizeObserver);
+
+      let clientRuntime: ReturnType<typeof useLocalRuntime> | undefined;
+      const errors = vi.spyOn(console, "error").mockImplementation(() => {});
+      let root: ReturnType<typeof hydrateRoot> | undefined;
+      await act(async () => {
+        root = hydrateRoot(
+          container,
+          <NestedLocalRuntime
+            onRuntime={(runtime) => (clientRuntime = runtime)}
+            turnAnchor={turnAnchor}
+          />,
+        );
+      });
+
+      const clientMessageId = clientRuntime!.thread.getState().messages[0]!.id;
+      const domMessageId = container
+        .querySelector("[data-testid='hydration-message']")!
+        .getAttribute("data-message-id");
+
+      expect(clientMessageId).toBe(serverMessageId);
+      expect(domMessageId).toBe(clientMessageId);
+      expect(
+        errors.mock.calls.some((args) =>
+          args.some((value) => String(value).includes("data-message-id")),
+        ),
+      ).toBe(false);
+
+      await act(async () => root?.unmount());
+    },
+  );
+
   it("synchronizes hover state while mounted", async () => {
     mockHoveredElement();
 

package/src/primitives/thread/ThreadLoadEarlier.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+import {
+  type ActionButtonElement,
+  type ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+
+const useThreadLoadEarlier = () => {
+  const aui = useAui();
+  const hasEarlier = useAuiState((s) => s.thread.hasEarlier);
+  const loadEarlier = useCallback(() => {
+    void aui.thread.loadEarlier();
+  }, [aui]);
+  if (!hasEarlier) return null;
+  return loadEarlier;
+};
+
+export namespace ThreadPrimitiveLoadEarlier {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useThreadLoadEarlier>;
+}
+
+/**
+ * A button that loads the page before the first loaded message. Disabled
+ * while the runtime reports no earlier messages. A press while a page is
+ * loading joins that load, so the button stays enabled and keeps keyboard
+ * focus until the page lands; read `thread.isLoadingEarlier` to show progress.
+ */
+export const ThreadPrimitiveLoadEarlier = createActionButton(
+  "ThreadPrimitive.LoadEarlier",
+  useThreadLoadEarlier,
+);

package/src/primitives/thread/ThreadMessages.tsx

@@ -5,4 +5,5 @@ export {
   ThreadPrimitiveMessagesImpl,
   ThreadPrimitiveMessageByIndex,
   ThreadPrimitiveUnstable_MessageById,
+  ThreadPrimitiveRow,
 } from "@assistant-ui/core/react";