@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/skins/base/aui-default/tool-group.aui.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import {
+  memo,
+  useCallback,
+  useRef,
+  useState,
+  type FC,
+  type PropsWithChildren,
+} from "react";
+import { ChevronDownIcon, LoaderIcon } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { useScrollLock } from "@assistant-ui/react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "./collapsible";
+import { cn } from "../../../../../lib/utils";
+import { useTraceT } from "../../../trace-i18n";
+
+const ANIMATION_DURATION = 200;
+
+const toolGroupVariants = cva("aui-tool-group-root group/tool-group w-full", {
+  variants: {
+    variant: {
+      outline: "rounded-lg border py-3",
+      ghost: "",
+      muted: "border-muted-foreground/30 bg-muted/30 rounded-lg border py-3",
+    },
+  },
+  defaultVariants: { variant: "outline" },
+});
+
+export type ToolGroupRootProps = Omit<
+  React.ComponentProps<typeof Collapsible>,
+  "open" | "onOpenChange"
+> &
+  VariantProps<typeof toolGroupVariants> & {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    /** Open while this group is still streaming, auto-close on completion. */
+    streamingOpen?: boolean;
+  };
+
+function ToolGroupRoot({
+  className,
+  variant,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  defaultOpen = false,
+  streamingOpen = false,
+  children,
+  ...props
+}: ToolGroupRootProps) {
+  const collapsibleRef = useRef<HTMLDivElement>(null);
+  const [initialOpen] = useState(defaultOpen);
+  const [userOpen, setUserOpen] = useState<boolean | null>(null);
+  const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);
+
+  const isControlled = controlledOpen !== undefined;
+  // The first manual toggle wins; until then the group follows the stream.
+  const isOpen = isControlled
+    ? controlledOpen
+    : (userOpen ?? (streamingOpen || initialOpen));
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      lockScroll();
+      if (!isControlled) {
+        setUserOpen(open);
+      }
+      controlledOnOpenChange?.(open);
+    },
+    [lockScroll, isControlled, controlledOnOpenChange],
+  );
+
+  return (
+    <Collapsible
+      ref={collapsibleRef}
+      data-slot="tool-group-root"
+      data-variant={variant ?? "outline"}
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+      className={cn(
+        toolGroupVariants({ variant }),
+        "group/tool-group-root",
+        className,
+      )}
+      style={
+        {
+          "--animation-duration": `${ANIMATION_DURATION}ms`,
+        } as React.CSSProperties
+      }
+      {...props}
+    >
+      {children}
+    </Collapsible>
+  );
+}
+
+function ToolGroupTrigger({
+  count,
+  active = false,
+  className,
+  ...props
+}: React.ComponentProps<typeof CollapsibleTrigger> & {
+  count: number;
+  active?: boolean;
+}) {
+  const label = useTraceT().plural("toolCalls", count);
+
+  return (
+    <CollapsibleTrigger
+      data-slot="tool-group-trigger"
+      className={cn(
+        "aui-tool-group-trigger group/trigger flex origin-left items-center gap-2 text-sm transition-[color,scale] active:scale-[0.98]",
+        "group-data-[variant=ghost]/tool-group-root:text-muted-foreground group-data-[variant=ghost]/tool-group-root:hover:text-foreground group-data-[variant=ghost]/tool-group-root:py-1.5",
+        "group-data-[variant=outline]/tool-group-root:w-full group-data-[variant=outline]/tool-group-root:px-4",
+        "group-data-[variant=muted]/tool-group-root:w-full group-data-[variant=muted]/tool-group-root:px-4",
+        className,
+      )}
+      // Folded while the tools run, the trigger is the one control that
+      // knows about them, so it carries the busy state.
+      aria-busy={active || undefined}
+      {...props}
+    >
+      {active && (
+        <LoaderIcon
+          data-slot="tool-group-trigger-loader"
+          className="aui-tool-group-trigger-loader size-3 shrink-0 animate-spin [animation-duration:0.6s]"
+        />
+      )}
+      <span
+        data-slot="tool-group-trigger-label"
+        className={cn(
+          "aui-tool-group-trigger-label-wrapper inline-block text-start text-xs leading-none font-medium",
+          "group-data-[variant=ghost]/tool-group-root:font-normal",
+          "group-data-[variant=outline]/tool-group-root:grow",
+          "group-data-[variant=muted]/tool-group-root:grow",
+          active && "shimmer motion-reduce:animate-none",
+        )}
+      >
+        {label}
+      </span>
+      <ChevronDownIcon
+        data-slot="tool-group-trigger-chevron"
+        className={cn(
+          "aui-tool-group-trigger-chevron size-3 shrink-0",
+          "transition-transform duration-(--animation-duration) ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
+          "-rotate-90",
+          "group-data-open/trigger:rotate-0",
+          "group-data-panel-open/trigger:rotate-0",
+        )}
+      />
+    </CollapsibleTrigger>
+  );
+}
+
+function ToolGroupContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CollapsibleContent>) {
+  return (
+    <CollapsibleContent
+      data-slot="tool-group-content"
+      className={cn(
+        "aui-tool-group-content relative overflow-hidden text-sm outline-none",
+        "group/collapsible-content ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:animate-none",
+        "data-closed:animate-collapsible-up",
+        "data-open:animate-collapsible-down",
+        "data-closed:fill-mode-forwards",
+        "data-closed:pointer-events-none",
+        "[--tw-duration:var(--animation-duration)]",
+        className,
+      )}
+      {...props}
+    >
+      <div
+        className={cn(
+          "mt-2 flex flex-col gap-2",
+          "group-data-[variant=ghost]/tool-group-root:mt-1 group-data-[variant=ghost]/tool-group-root:gap-1",
+          "group-data-[variant=outline]/tool-group-root:mt-3 group-data-[variant=outline]/tool-group-root:border-t group-data-[variant=outline]/tool-group-root:px-4 group-data-[variant=outline]/tool-group-root:pt-3",
+          "group-data-[variant=muted]/tool-group-root:mt-3 group-data-[variant=muted]/tool-group-root:border-t group-data-[variant=muted]/tool-group-root:px-4 group-data-[variant=muted]/tool-group-root:pt-3",
+          "[&>*]:animate-in [&>*]:fade-in-0 [&>*]:blur-in-[2px] [&>*]:slide-in-from-top-1 [&>*]:animation-duration-(--animation-duration) [&>*]:ease-[cubic-bezier(0.32,0.72,0,1)]",
+          "[&>*]:motion-reduce:animate-none",
+          "[&>*:nth-child(2)]:[animation-delay:40ms]",
+          "[&>*:nth-child(3)]:[animation-delay:80ms]",
+          "[&>*:nth-child(4)]:[animation-delay:120ms]",
+          "[&>*:nth-child(n+5)]:[animation-delay:160ms]",
+        )}
+      >
+        {children}
+      </div>
+    </CollapsibleContent>
+  );
+}
+
+type ToolGroupComponent = FC<
+  PropsWithChildren<{ startIndex: number; endIndex: number }>
+> & {
+  Root: typeof ToolGroupRoot;
+  Trigger: typeof ToolGroupTrigger;
+  Content: typeof ToolGroupContent;
+};
+
+const ToolGroupImpl: FC<
+  PropsWithChildren<{ startIndex: number; endIndex: number }>
+> = ({ children, startIndex, endIndex }) => {
+  const toolCount = endIndex - startIndex + 1;
+
+  return (
+    <ToolGroupRoot>
+      <ToolGroupTrigger count={toolCount} />
+      <ToolGroupContent>{children}</ToolGroupContent>
+    </ToolGroupRoot>
+  );
+};
+
+/**
+ * @deprecated This wrapper targets the legacy `components.ToolGroup` prop
+ * on `<MessagePrimitive.Parts>`. Use `<MessagePrimitive.GroupedParts>` with
+ * a `groupBy` returning `"group-tool"` and compose `ToolGroupRoot` /
+ * `ToolGroupTrigger` / `ToolGroupContent` directly. See `thread.tsx`.
+ */
+const ToolGroup = memo(ToolGroupImpl) as unknown as ToolGroupComponent;
+
+ToolGroup.displayName = "ToolGroup";
+ToolGroup.Root = ToolGroupRoot;
+ToolGroup.Trigger = ToolGroupTrigger;
+ToolGroup.Content = ToolGroupContent;
+
+export {
+  ToolGroup,
+  ToolGroupRoot,
+  ToolGroupTrigger,
+  ToolGroupContent,
+  toolGroupVariants,
+};

package/src/components/chat/skins/base/docs-model-options.ts

@@ -0,0 +1,6 @@
+export function docsModelOptions() {
+  return [
+    { id: "gpt-5.6-luna", name: "GPT-5.6 Luna" },
+    { id: "gpt-5.6-terra", name: "GPT-5.6 Terra" },
+  ];
+}

package/src/components/chat/skins/base/elements/assistant-trace.aui.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import type { ComponentType, FC, PropsWithChildren, ReactNode } from "react";
+import {
+  MessagePrimitive,
+  useAuiState,
+  type ToolCallMessagePartComponent,
+} from "@assistant-ui/react";
+import {
+  Reasoning,
+  ReasoningContent,
+  ReasoningRoot,
+  ReasoningText,
+  ReasoningTrigger,
+} from "../aui-default/reasoning.aui";
+import { ToolFallback } from "../aui-default/tool-fallback.aui";
+import {
+  ToolGroupContent,
+  ToolGroupRoot,
+  ToolGroupTrigger,
+} from "../aui-default/tool-group.aui";
+import { WorkChain } from "./work-chain";
+import {
+  chainFollowedByText,
+  chainGroupBy,
+  chainHoldsWork,
+  chainToolCount,
+  reasoningGroupDisclosure,
+  toolGroupDisclosure,
+  useDeployWorkDisclosure,
+} from "../../../trace-grouping";
+import { useViewDisclosure } from "../../../stock/deploy-ui-context";
+
+export type AssistantTraceGroupPart = MessagePrimitive.GroupedParts.GroupPart;
+
+type GroupedPartsRender = Parameters<
+  NonNullable<MessagePrimitive.GroupedParts.Props["children"]>
+>[0];
+
+/** A part the trace does not own (text, file, image, indicator, data, source). */
+export type AssistantTracePartProps = {
+  part: GroupedPartsRender["part"];
+  children: ReactNode;
+};
+
+export type AssistantTraceProps = {
+  /**
+   * Renders the parts that are not the trace (text, file, image, indicator,
+   * data, source). Return `null` to drop a part.
+   */
+  renderPart: (props: AssistantTracePartProps) => ReactNode;
+  /** Replaces assistant-ui's tool card for calls with no registered tool UI. */
+  ToolFallback?: ToolCallMessagePartComponent | undefined;
+  /** Replaces the `N tool calls` group. */
+  ToolGroup?:
+    | ComponentType<PropsWithChildren<{ group: AssistantTraceGroupPart }>>
+    | undefined;
+  /** Replaces the reasoning box. */
+  ReasoningGroup?:
+    | ComponentType<PropsWithChildren<{ group: AssistantTraceGroupPart }>>
+    | undefined;
+};
+
+/**
+ * The assistant message trace the base skin draws: one work chain over the
+ * reasoning and tool calls (folded it reads "Used 3 tools"), a reasoning box
+ * and an `N tool calls` group inside it, and assistant-ui's own tool card for
+ * each call. The grouping and fold rules are the shared trace rules
+ * (`../../../trace-grouping`, the digichat skin's); the look is assistant-ui's
+ * defaults (`../aui-default`). Shared by the base skin and the stock thread so
+ * both trace the same way; each skin keeps its own text, file and indicator
+ * rendering through `renderPart`.
+ */
+export const AssistantTrace: FC<AssistantTraceProps> = ({
+  renderPart,
+  ToolFallback: ToolFallbackComponent = ToolFallback,
+  ToolGroup,
+  ReasoningGroup,
+}) => {
+  const disclosure = useViewDisclosure();
+  const { reasoningMode, toolCallsMode, disclosure: work } = useDeployWorkDisclosure();
+  // The whole turn, not just the group: the tools answer faster than the
+  // chain can fold, and a group that closes between two of them flickers.
+  const turnRunning = useAuiState((s) => s.thread.isRunning);
+  const messageParts = useAuiState((s) => s.message.parts);
+
+  return (
+    <MessagePrimitive.GroupedParts groupBy={chainGroupBy}>
+      {({ part, children }) => {
+        switch (part.type) {
+          case "group-chainOfThought":
+            // A chain of only status or source parts is not work: no
+            // header, the loading row covers that phase. The parts still
+            // render bare so a backend notice does not vanish.
+            if (!chainHoldsWork(messageParts, part.indices)) return <>{children}</>;
+            // One header for the whole chain: the reasoning and the tool
+            // calls collapse together.
+            return (
+              <div data-slot="aui_chain-of-thought">
+                <WorkChain
+                  key={disclosure.key}
+                  indices={part.indices}
+                  openAtRest={work.openAtRest}
+                  foldOnAnswer={work.foldOnAnswer}
+                  followedByText={chainFollowedByText(messageParts, part.indices)}
+                >
+                  {children}
+                </WorkChain>
+              </div>
+            );
+          case "group-tool": {
+            if (toolCallsMode === "off") return null;
+            // The group can hold the source and status parts between two
+            // tool runs; the count is the tool calls only.
+            const toolCount = chainToolCount(messageParts, part.indices);
+            if (toolCount === 0) return <div data-slot="aui_chain-tools">{children}</div>;
+            if (ToolGroup) return <ToolGroup group={part}>{children}</ToolGroup>;
+            const running = part.status.type === "running";
+            const group = toolGroupDisclosure(work, toolCallsMode, running || turnRunning);
+            return (
+              <ToolGroupRoot
+                key={disclosure.key}
+                variant="ghost"
+                defaultOpen={group.defaultOpen}
+                streamingOpen={group.streamingOpen}
+                {...(group.locked ? { open: true, onOpenChange: () => {} } : {})}
+              >
+                <ToolGroupTrigger count={toolCount} active={running} disabled={group.locked} />
+                <ToolGroupContent>{children}</ToolGroupContent>
+              </ToolGroupRoot>
+            );
+          }
+          case "group-reasoning": {
+            if (reasoningMode === "off") return null;
+            if (ReasoningGroup) return <ReasoningGroup group={part}>{children}</ReasoningGroup>;
+            const running = part.status.type === "running";
+            const box = reasoningGroupDisclosure(work, reasoningMode, running || turnRunning);
+            return (
+              <ReasoningRoot
+                key={disclosure.key}
+                variant="ghost"
+                className="mb-0"
+                streaming={box.streamingOpen}
+                defaultOpen={box.defaultOpen}
+                {...(box.locked ? { open: true, onOpenChange: () => {} } : {})}
+              >
+                {/* The reasoning is a sub-step with its own disclosure
+                    inside the chain, streaming while it runs. */}
+                <ReasoningTrigger active={running} disabled={box.locked} />
+                <ReasoningContent aria-busy={running}>
+                  <ReasoningText>{children}</ReasoningText>
+                </ReasoningContent>
+              </ReasoningRoot>
+            );
+          }
+          case "reasoning":
+            if (reasoningMode === "off") return null;
+            return <Reasoning {...part} />;
+          case "tool-call":
+            if (toolCallsMode === "off") return null;
+            // assistant-ui's ToolFallback owns the approval controls too.
+            return part.toolUI ?? <ToolFallbackComponent key={disclosure.key} {...part} />;
+          default:
+            return renderPart({ part, children });
+        }
+      }}
+    </MessagePrimitive.GroupedParts>
+  );
+};

package/src/components/chat/skins/base/elements/composer-trigger-popover.aui.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { memo, useRef, type ComponentPropsWithoutRef, type FC } from "react";
+import {
+  ComposerPrimitive,
+  unstable_defaultDirectiveFormatter,
+  unstable_useTriggerPopoverScopeContext,
+  type Unstable_DirectiveFormatter,
+  type Unstable_TriggerItem,
+} from "@assistant-ui/react";
+import { ChevronLeftIcon, ChevronRightIcon, SparklesIcon } from "lucide-react";
+import { cn } from "../../../../../lib/utils";
+import { PaletteRowPreview } from "../../../stock/palette-row-preview";
+
+type IconComponent = FC<{ className?: string }>;
+
+type DirectiveBehaviorProps = {
+  /** Formatter used to serialize the selected item into composer text. */
+  formatter?: Unstable_DirectiveFormatter | undefined;
+  /** Called after the directive text has been inserted into the composer. */
+  onInserted?: ((item: Unstable_TriggerItem) => void) | undefined;
+};
+
+type ActionBehaviorProps = {
+  /** Formatter used to serialize the audit-trail chip (when `removeOnExecute` is false). */
+  formatter?: Unstable_DirectiveFormatter | undefined;
+  /** Invoked with the selected item at the moment of selection. */
+  onExecute: (item: Unstable_TriggerItem) => void;
+  /** If `true`, strip the trigger text from the composer after executing. @default false */
+  removeOnExecute?: boolean | undefined;
+};
+
+type ComposerTriggerPopoverBaseProps = Omit<
+  ComponentPropsWithoutRef<typeof ComposerPrimitive.Unstable_TriggerPopover>,
+  "children"
+> & {
+  /**
+   * Maps icon keys to components. Items look up via `item.metadata?.icon`
+   * (string); categories look up via their `id`.
+   */
+  iconMap?: Record<string, IconComponent>;
+  /** Fallback icon when no entry in `iconMap` matches. */
+  fallbackIcon?: IconComponent;
+  /** Label shown on the back button. @default "Back" */
+  backLabel?: string;
+  /** Label shown when no categories are available. @default "No items available" */
+  emptyCategoriesLabel?: string;
+  /** Label shown when no items match. @default "No matching items" */
+  emptyItemsLabel?: string;
+  /** Label shown while an async adapter is resolving items. @default "Loading…" */
+  loadingLabel?: string;
+};
+
+type ComposerTriggerPopoverProps = ComposerTriggerPopoverBaseProps &
+  (
+    | {
+        /** Insert-directive behavior. */
+        directive: DirectiveBehaviorProps;
+        action?: never;
+      }
+    | {
+        /** Action behavior. */
+        action: ActionBehaviorProps;
+        directive?: never;
+      }
+  );
+
+function resolveIcon(
+  iconKey: string | undefined,
+  iconMap: Record<string, IconComponent> | undefined,
+  fallback: IconComponent,
+): IconComponent {
+  if (iconKey && iconMap?.[iconKey]) return iconMap[iconKey]!;
+  return fallback;
+}
+
+type CategoriesProps = {
+  iconMap: Record<string, IconComponent> | undefined;
+  fallbackIcon: IconComponent;
+  emptyLabel: string;
+};
+
+const Categories: FC<CategoriesProps> = ({
+  iconMap,
+  fallbackIcon,
+  emptyLabel,
+}) => (
+  <ComposerPrimitive.Unstable_TriggerPopoverCategories>
+    {(categories) => (
+      <div
+        data-slot="composer-trigger-popover-categories"
+        className="flex flex-col py-1"
+      >
+        {categories.map((cat) => {
+          const Icon = resolveIcon(cat.id, iconMap, fallbackIcon);
+          return (
+            <ComposerPrimitive.Unstable_TriggerPopoverCategoryItem
+              key={cat.id}
+              categoryId={cat.id}
+              className="hover:bg-muted focus:bg-muted data-[highlighted]:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset data-[highlighted]:ring-2 data-[highlighted]:ring-ring data-[highlighted]:ring-inset flex cursor-pointer items-center justify-between gap-2 px-3 py-2 text-sm transition-colors outline-none"
+            >
+              <span className="flex items-center gap-2">
+                <Icon className="text-muted-foreground size-4" />
+                {cat.label}
+              </span>
+              <ChevronRightIcon className="text-muted-foreground size-4" />
+            </ComposerPrimitive.Unstable_TriggerPopoverCategoryItem>
+          );
+        })}
+        {categories.length === 0 && (
+          <div className="text-muted-foreground px-3 py-2 text-sm">
+            {emptyLabel}
+          </div>
+        )}
+      </div>
+    )}
+  </ComposerPrimitive.Unstable_TriggerPopoverCategories>
+);
+
+type ItemsProps = {
+  iconMap: Record<string, IconComponent> | undefined;
+  fallbackIcon: IconComponent;
+  backLabel: string;
+  emptyLabel: string;
+  loadingLabel: string;
+};
+
+const Items: FC<ItemsProps> = ({
+  iconMap,
+  fallbackIcon,
+  backLabel,
+  emptyLabel,
+  loadingLabel,
+}) => {
+  const { isLoading } = unstable_useTriggerPopoverScopeContext();
+  return (
+    <ComposerPrimitive.Unstable_TriggerPopoverItems>
+      {(items) => (
+        <div
+          data-slot="composer-trigger-popover-items"
+          className="flex flex-col"
+        >
+          <ComposerPrimitive.Unstable_TriggerPopoverBack className="text-muted-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 border-b px-3 py-2 text-xs tracking-wide uppercase transition-colors">
+            <ChevronLeftIcon className="size-3.5" />
+            {backLabel}
+          </ComposerPrimitive.Unstable_TriggerPopoverBack>
+
+          <div className="py-1">
+            {items.map((item, index) => {
+              const iconKey =
+                typeof item.metadata?.icon === "string"
+                  ? item.metadata.icon
+                  : undefined;
+              const Icon = resolveIcon(iconKey, iconMap, fallbackIcon);
+              const value =
+                typeof item.metadata?.value === "string" ? item.metadata.value : "";
+              const detailId = item.description ? `slash-desc-${item.id}` : undefined;
+              return (
+                <ComposerPrimitive.Unstable_TriggerPopoverItem
+                  key={item.id}
+                  item={item}
+                  index={index}
+                  aria-describedby={detailId}
+                  className="group hover:bg-muted focus:bg-muted data-[highlighted]:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset data-[highlighted]:ring-2 data-[highlighted]:ring-ring data-[highlighted]:ring-inset flex w-full cursor-pointer flex-col items-stretch gap-0.5 px-3 py-2 text-start transition-colors outline-none"
+                >
+                  <span className="flex w-full items-center gap-2 text-sm font-medium">
+                    <Icon className="text-primary size-3.5" />
+                    <span className="min-w-0 flex-1">{item.label}</span>
+                    {value ? (
+                      <span
+                        data-slot="palette-value"
+                        className="text-muted-foreground ml-auto min-w-0 truncate text-end text-xs font-normal"
+                      >
+                        {value}
+                      </span>
+                    ) : null}
+                  </span>
+                  {item.description ? (
+                    <span
+                      id={detailId}
+                      data-slot="palette-detail"
+                      className="text-muted-foreground ms-5.5 hidden truncate text-xs leading-tight group-data-[highlighted]:block"
+                    >
+                      {item.description}
+                    </span>
+                  ) : null}
+                </ComposerPrimitive.Unstable_TriggerPopoverItem>
+              );
+            })}
+            {items.length === 0 && (
+              <div className="text-muted-foreground px-3 py-2 text-sm">
+                {isLoading ? loadingLabel : emptyLabel}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </ComposerPrimitive.Unstable_TriggerPopoverItems>
+  );
+};
+
+/**
+ * Pre-built popover UI for a trigger-driven picker (mentions, slash commands, etc).
+ * Pass exactly one of `directive` (inserts a chip) or `action` (fires a handler).
+ */
+const ComposerTriggerPopoverImpl: FC<ComposerTriggerPopoverProps> = ({
+  iconMap,
+  fallbackIcon = SparklesIcon,
+  backLabel = "Back",
+  emptyCategoriesLabel = "No items available",
+  emptyItemsLabel = "No matching items",
+  loadingLabel = "Loading…",
+  className,
+  directive,
+  action,
+  ...props
+}) => {
+  const warnedRef = useRef(false);
+  if (
+    process.env.NODE_ENV !== "production" &&
+    !warnedRef.current &&
+    Boolean(directive) === Boolean(action)
+  ) {
+    warnedRef.current = true;
+    console.warn(
+      "[assistant-ui] ComposerTriggerPopover requires exactly one of `directive` or `action` props.",
+    );
+  }
+
+  return (
+    <ComposerPrimitive.Unstable_TriggerPopover
+      data-slot="composer-trigger-popover"
+      className={cn(
+        "aui-composer-trigger-popover bg-popover text-popover-foreground absolute start-0 bottom-full z-50 mb-2 w-64 overflow-hidden rounded-xl border",
+        className,
+      )}
+      {...props}
+    >
+      {directive ? (
+        <ComposerPrimitive.Unstable_TriggerPopover.Directive
+          formatter={directive.formatter ?? unstable_defaultDirectiveFormatter}
+          onInserted={directive.onInserted}
+        />
+      ) : action ? (
+        <ComposerPrimitive.Unstable_TriggerPopover.Action
+          formatter={action.formatter ?? unstable_defaultDirectiveFormatter}
+          onExecute={action.onExecute}
+          removeOnExecute={action.removeOnExecute}
+        />
+      ) : null}
+      <PaletteRowPreview />
+      <Categories
+        iconMap={iconMap}
+        fallbackIcon={fallbackIcon}
+        emptyLabel={emptyCategoriesLabel}
+      />
+      <Items
+        iconMap={iconMap}
+        fallbackIcon={fallbackIcon}
+        backLabel={backLabel}
+        emptyLabel={emptyItemsLabel}
+        loadingLabel={loadingLabel}
+      />
+    </ComposerPrimitive.Unstable_TriggerPopover>
+  );
+};
+ComposerTriggerPopoverImpl.displayName = "ComposerTriggerPopover";
+
+export const ComposerTriggerPopover = memo(
+  ComposerTriggerPopoverImpl,
+) as FC<ComposerTriggerPopoverProps>;