@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/stock/message-export-menu.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { ActionBarMorePrimitive, useAui, useAuiState } from "@assistant-ui/react";
+import { ChevronRightIcon } from "lucide-react";
+import { DropdownMenu } from "radix-ui";
+import { useCallback, useMemo, useRef, useState, type ReactElement, type ReactNode } from "react";
+
+import { exportMessage } from "../../../replay/chat-export-run";
+import { messageAnchor } from "../../../replay/snapshot";
+import {
+  CHAT_EXPORT_FORMATS,
+  chatExportLabel,
+  chatExportStrings,
+  type ChatExportFormat,
+  type ChatExportStrings,
+} from "../transcript";
+import { useChatPrivateMode } from "./chat-private-mode";
+import { useEmbedChatPrefsOptional } from "./embed-chat-prefs";
+
+/** Export strings in the session language (`/language`), else English. */
+export function useChatExportStrings(): ChatExportStrings {
+  const prefs = useEmbedChatPrefsOptional();
+  const locale = prefs?.prefs.language;
+  return useMemo(() => chatExportStrings(locale), [locale]);
+}
+
+export type MessageExportMenuProps = {
+  /** The "…" button. It must forward its ref (TooltipIconButton does). */
+  trigger: ReactElement;
+  /** Drawn before "Export" in the menu. */
+  icon?: ReactNode;
+  /** Drawn before each format row. */
+  formatIcon?: (format: ChatExportFormat) => ReactNode;
+  contentClassName: string;
+  /** The side panel. Defaults to `contentClassName`. */
+  subContentClassName?: string;
+  itemClassName: string;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+};
+
+/**
+ * The message "…" menu: `Export ▸` with `Markdown (.md)` and `HTML (.html)`
+ * in a side panel. Both export this assistant message only.
+ *
+ * assistant-ui's more-menu has no submenu, so the menu is radix's own
+ * DropdownMenu. `ActionBarMorePrimitive.Root` still wraps it, controlled by
+ * the same open state, so the action bar stays visible while the menu is
+ * open. The export runs after the menu has closed: the HTML snapshot reads
+ * the page, and an open menu hides the thread from it.
+ *
+ * A private session (`ChatPrivateModeProvider`) renders nothing, on every
+ * skin: the export would put the typed text in a file.
+ */
+export function MessageExportMenu(props: MessageExportMenuProps) {
+  const privateMode = useChatPrivateMode();
+  if (privateMode) return null;
+  return <MessageExportMenuOpen {...props} />;
+}
+
+function MessageExportMenuOpen({
+  trigger,
+  icon,
+  formatIcon,
+  contentClassName,
+  subContentClassName,
+  itemClassName,
+  side = "bottom",
+  align = "start",
+  sideOffset = 6,
+}: MessageExportMenuProps) {
+  const aui = useAui();
+  const messageId = useAuiState((s) => s.message.id);
+  const strings = useChatExportStrings();
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const pending = useRef<ChatExportFormat | null>(null);
+
+  const run = useCallback(
+    (format: ChatExportFormat) => {
+      // Resolve the message element now: an older answer's action bar can
+      // unmount once the menu closes, taking the trigger with it.
+      const trigger = messageAnchor(triggerRef.current, messageId) ?? triggerRef.current;
+      const message = aui.message().getState();
+      const messages = aui.thread().getState().messages;
+      requestAnimationFrame(() => {
+        void exportMessage({ format, message, messageId, messages, trigger });
+      });
+    },
+    [aui, messageId],
+  );
+
+  const onOpenChange = useCallback(
+    (next: boolean) => {
+      setOpen(next);
+      if (next) return;
+      const format = pending.current;
+      pending.current = null;
+      if (format) run(format);
+    },
+    [run],
+  );
+
+  return (
+    <ActionBarMorePrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DropdownMenu.Root open={open} onOpenChange={onOpenChange}>
+        <DropdownMenu.Trigger asChild ref={triggerRef}>
+          {trigger}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content
+            side={side}
+            align={align}
+            sideOffset={sideOffset}
+            data-slot="message-more-menu"
+            className={contentClassName}
+          >
+            <DropdownMenu.Sub>
+              <DropdownMenu.SubTrigger
+                data-slot="message-export-trigger"
+                className={itemClassName}
+              >
+                {icon}
+                <span className="flex-1">{strings.export}</span>
+                <ChevronRightIcon aria-hidden className="size-3.5 opacity-70 rtl:rotate-180" />
+              </DropdownMenu.SubTrigger>
+              <DropdownMenu.Portal>
+                <DropdownMenu.SubContent
+                  sideOffset={4}
+                  alignOffset={-4}
+                  data-slot="message-export-formats"
+                  className={subContentClassName ?? contentClassName}
+                >
+                  {CHAT_EXPORT_FORMATS.map((format) => (
+                    <DropdownMenu.Item
+                      key={format}
+                      data-export-format={format}
+                      className={itemClassName}
+                      onSelect={() => {
+                        pending.current = format;
+                      }}
+                    >
+                      {formatIcon?.(format)}
+                      {chatExportLabel(format, strings)}
+                    </DropdownMenu.Item>
+                  ))}
+                </DropdownMenu.SubContent>
+              </DropdownMenu.Portal>
+            </DropdownMenu.Sub>
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+    </ActionBarMorePrimitive.Root>
+  );
+}

package/src/components/chat/stock/palette-row-preview.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useEffect } from "react";
+import { unstable_useTriggerPopoverScopeContextOptional } from "@assistant-ui/react";
+import { committedChatPrefs, slashRowPreview, useEmbedChatPrefsOptional } from "./embed-chat-prefs";
+
+/**
+ * Inside the `/` popover: while the highlighted row flips a purely visual
+ * setting in place (`/scrollbar`), the page shows the flipped look. Nothing
+ * is stored; moving off the row or closing the popover drops the preview,
+ * and choosing the row commits it as before.
+ */
+export function PaletteRowPreview(): null {
+  const scope = unstable_useTriggerPopoverScopeContextOptional();
+  const api = useEmbedChatPrefsOptional();
+  const preview = api?.previewPrefs;
+  const id = scope?.open ? scope.items[scope.highlightedIndex]?.id : undefined;
+  const patch = id && api ? slashRowPreview(id, committedChatPrefs(api)) : null;
+  const key = patch ? JSON.stringify(patch) : "";
+  useEffect(() => {
+    if (!preview || !key) return;
+    preview(JSON.parse(key));
+    return () => preview(null);
+  }, [preview, key]);
+  return null;
+}

package/src/components/chat/stock/reasoning.aui.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { memo, useCallback, useRef } from "react";
+import {
+  useScrollLock,
+  useAuiState,
+  type ReasoningMessagePartComponent,
+  type ReasoningGroupComponent,
+} from "@assistant-ui/react";
+import { MarkdownText } from "./markdown-text";
+import {
+  ANIMATION_DURATION,
+  ReasoningRoot as ReasoningRootBase,
+  ReasoningTrigger,
+  ReasoningContent,
+  ReasoningText,
+  ReasoningFade,
+  reasoningVariants,
+  type ReasoningRootProps,
+} from "./reasoning";
+
+export type { ReasoningRootProps } from "./reasoning";
+
+/** `ReasoningRoot` with the thread viewport scroll locked during disclosure animations. */
+function ReasoningRoot({
+  ref,
+  onAnimationStart,
+  ...props
+}: ReasoningRootProps) {
+  const collapsibleRef = useRef<HTMLDivElement | null>(null);
+  const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);
+
+  const handleAnimationStart = useCallback(() => {
+    lockScroll();
+    onAnimationStart?.();
+  }, [lockScroll, onAnimationStart]);
+
+  const composedRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      collapsibleRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref],
+  );
+
+  return (
+    <ReasoningRootBase
+      ref={composedRef}
+      onAnimationStart={handleAnimationStart}
+      {...props}
+    />
+  );
+}
+
+const ReasoningImpl: ReasoningMessagePartComponent = () => <MarkdownText />;
+
+const ReasoningGroupImpl: ReasoningGroupComponent = ({
+  children,
+  startIndex,
+  endIndex,
+}) => {
+  const isReasoningStreaming = useAuiState((s) => {
+    if (s.message.status?.type !== "running") return false;
+    for (let index = startIndex; index <= endIndex; index++) {
+      if (s.message.parts[index]?.status.type === "running") return true;
+    }
+    return false;
+  });
+
+  return (
+    <ReasoningRoot streaming={isReasoningStreaming}>
+      <ReasoningTrigger active={isReasoningStreaming} />
+      <ReasoningContent aria-busy={isReasoningStreaming}>
+        <ReasoningText>{children}</ReasoningText>
+      </ReasoningContent>
+    </ReasoningRoot>
+  );
+};
+
+const Reasoning = memo(
+  ReasoningImpl,
+) as unknown as ReasoningMessagePartComponent & {
+  Root: typeof ReasoningRoot;
+  Trigger: typeof ReasoningTrigger;
+  Content: typeof ReasoningContent;
+  Text: typeof ReasoningText;
+  Fade: typeof ReasoningFade;
+};
+
+Reasoning.displayName = "Reasoning";
+Reasoning.Root = ReasoningRoot;
+Reasoning.Trigger = ReasoningTrigger;
+Reasoning.Content = ReasoningContent;
+Reasoning.Text = ReasoningText;
+Reasoning.Fade = ReasoningFade;
+
+/**
+ * @deprecated This wrapper targets the legacy `components.ReasoningGroup`
+ * prop on `<MessagePrimitive.Parts>`. Use `<MessagePrimitive.GroupedParts>`
+ * with a `groupBy` returning `"group-reasoning"` and compose `ReasoningRoot`
+ * / `ReasoningTrigger` / `ReasoningContent` / `ReasoningText` directly.
+ * See `thread.aui.tsx` for an example.
+ */
+const ReasoningGroup = memo(ReasoningGroupImpl);
+ReasoningGroup.displayName = "ReasoningGroup";
+
+export {
+  Reasoning,
+  ReasoningGroup,
+  ReasoningRoot,
+  ReasoningTrigger,
+  ReasoningContent,
+  ReasoningText,
+  ReasoningFade,
+  reasoningVariants,
+};

package/src/components/chat/stock/reasoning.tsx

@@ -0,0 +1,335 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { DisclosureChevron } from "../disclosure-chevron";
+import { DotMatrix } from "../DotMatrix";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "./ui/collapsible";
+import { cn } from "../../../lib/utils";
+import { useExportKeepMounted } from "../../../replay/export-mount";
+import { OverlayScrollbar } from "../overlay-scrollbar";
+import { useTraceT } from "../trace-i18n";
+import { stockRadius, useStockShape } from "./stock-shape";
+
+export const ANIMATION_DURATION = 200;
+
+const ReasoningPreviewContext = createContext(false);
+
+const reasoningVariants = cva("aui-reasoning-root mb-4 w-full", {
+  variants: {
+    variant: {
+      outline: "border px-3 py-2",
+      ghost: "",
+      muted: "bg-surface-2/50 px-3 py-2",
+    },
+  },
+  defaultVariants: {
+    variant: "outline",
+  },
+});
+
+export type ReasoningRootProps = Omit<
+  React.ComponentProps<typeof Collapsible>,
+  "open" | "onOpenChange"
+> &
+  VariantProps<typeof reasoningVariants> & {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    /**
+     * Whether the reasoning is currently streaming. While `true` the
+     * disclosure is held open with a bottom-pinned live preview; when
+     * streaming ends it returns to `defaultOpen`, and the first manual
+     * toggle takes over the open/close state permanently. The live preview
+     * keeps following the newest tokens while the disclosure is open during
+     * streaming, even after a manual toggle, and pauses while the reader is
+     * scrolled up.
+     */
+    streaming?: boolean;
+    /** Called right before the disclosure animates, on toggle and on streaming transitions. */
+    onAnimationStart?: () => void;
+  };
+
+function ReasoningRoot({
+  className,
+  variant,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  defaultOpen = false,
+  streaming,
+  onAnimationStart,
+  children,
+  ...props
+}: ReasoningRootProps) {
+  const stock = useStockShape();
+  const initialOpenRef = useRef(defaultOpen);
+  const [userOpen, setUserOpen] = useState<boolean | null>(null);
+
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled
+    ? controlledOpen
+    : (userOpen ?? (streaming || initialOpenRef.current));
+  const isPreview = streaming === true && isOpen;
+
+  const prevStreamingRef = useRef(streaming);
+  useLayoutEffect(() => {
+    if (prevStreamingRef.current === streaming) return;
+    prevStreamingRef.current = streaming;
+    // A streaming transition only animates the panel when the resting state
+    // is collapsed; with `defaultOpen` the disclosure stays open across it.
+    if (!isControlled && userOpen === null && !initialOpenRef.current) {
+      onAnimationStart?.();
+    }
+  }, [streaming, isControlled, userOpen, onAnimationStart]);
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      onAnimationStart?.();
+      if (!isControlled) {
+        setUserOpen(open);
+      }
+      controlledOnOpenChange?.(open);
+    },
+    [onAnimationStart, isControlled, controlledOnOpenChange],
+  );
+
+  return (
+    <Collapsible
+      data-slot="reasoning-root"
+      data-variant={variant}
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+      className={cn(
+        "group/reasoning-root",
+        // assistant-ui's outline/muted reasoning box is rounded-lg.
+        reasoningVariants({ variant }),
+        (variant ?? "outline") !== "ghost" && stockRadius(stock, "rounded-lg"),
+        className,
+      )}
+      style={
+        {
+          "--animation-duration": `${ANIMATION_DURATION}ms`,
+        } as React.CSSProperties
+      }
+      {...props}
+    >
+      <ReasoningPreviewContext.Provider value={isPreview}>
+        {children}
+      </ReasoningPreviewContext.Provider>
+    </Collapsible>
+  );
+}
+
+function ReasoningFade({
+  side = "bottom",
+  className,
+  ...props
+}: React.ComponentProps<"div"> & { side?: "top" | "bottom" }) {
+  if (side === "top") {
+    return (
+      <div
+        data-slot="reasoning-fade"
+        className={cn(
+          "aui-reasoning-fade pointer-events-none absolute inset-x-0 top-0 z-10 h-8",
+          "bg-[linear-gradient(to_bottom,var(--color-background),transparent)]",
+          "group-data-[variant=muted]/reasoning-root:bg-[linear-gradient(to_bottom,color-mix(in_oklab,var(--color-muted)_50%,var(--color-background)),transparent)]",
+          "fade-in-0 animate-in",
+          "animation-duration-(--animation-duration)",
+          className,
+        )}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <div
+      data-slot="reasoning-fade"
+      className={cn(
+        "aui-reasoning-fade pointer-events-none absolute inset-x-0 bottom-0 z-10 h-8",
+        "bg-[linear-gradient(to_top,var(--color-background),transparent)]",
+        "group-data-[variant=muted]/reasoning-root:bg-[linear-gradient(to_top,color-mix(in_oklab,var(--color-muted)_50%,var(--color-background)),transparent)]",
+        "fade-in-0 animate-in",
+        "animation-duration-(--animation-duration)",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ReasoningTrigger({
+  active,
+  duration,
+  className,
+  ...props
+}: React.ComponentProps<typeof CollapsibleTrigger> & {
+  active?: boolean;
+  duration?: number;
+}) {
+  const reasoningLabel = useTraceT().t("reasoning");
+  const durationText = duration ? ` (${duration}s)` : "";
+
+  return (
+    <CollapsibleTrigger
+      data-slot="reasoning-trigger"
+      className={cn(
+        "aui-reasoning-trigger group/trigger text-ink-mute hover:text-ink flex max-w-[75%] origin-left items-center gap-2 py-1.5 text-xs transition-[color,scale] active:scale-[0.98]",
+        className,
+      )}
+      {...props}
+    >
+      <DotMatrix
+        state={active ? "thinking" : "thought"}
+        decorative
+        className="aui-reasoning-trigger-icon size-4 shrink-0"
+      />
+      <span
+        data-slot="reasoning-trigger-label"
+        className={cn(
+          "aui-reasoning-trigger-label-wrapper inline-block leading-none tabular-nums",
+        )}
+      >
+        {reasoningLabel}{durationText}
+      </span>
+      <DisclosureChevron />
+    </CollapsibleTrigger>
+  );
+}
+
+function ReasoningContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CollapsibleContent>) {
+  const isPreview = useContext(ReasoningPreviewContext);
+  const keepMounted = useExportKeepMounted();
+
+  return (
+    <CollapsibleContent
+      keepMounted={keepMounted}
+      data-slot="reasoning-content"
+      className={cn(
+        "aui-reasoning-content text-ink-mute 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}
+    >
+      <ReasoningFade side="top" />
+      {children}
+      {isPreview ? <ReasoningFade /> : null}
+    </CollapsibleContent>
+  );
+}
+
+function ReasoningText({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) {
+  const isPreview = useContext(ReasoningPreviewContext);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isPreview) return;
+    const scrollEl = scrollRef.current;
+    const contentEl = contentRef.current;
+    if (!scrollEl || !contentEl) return;
+
+    let pinned = true;
+    let lastScrollTop = scrollEl.scrollTop;
+    let lastScrollHeight = scrollEl.scrollHeight;
+    const isAtBottom = () =>
+      Math.abs(
+        scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight,
+      ) <= 1 || scrollEl.scrollHeight <= scrollEl.clientHeight;
+
+    const pin = () => {
+      if (!pinned) return;
+      scrollEl.scrollTop = scrollEl.scrollHeight;
+    };
+    // A pin's own scroll event can arrive after new content grew the scroll
+    // height and read as "not at bottom"; only an upward move at unchanged
+    // scroll height is user intent.
+    const onScroll = () => {
+      if (isAtBottom()) {
+        pinned = true;
+      } else if (
+        scrollEl.scrollTop < lastScrollTop &&
+        scrollEl.scrollHeight === lastScrollHeight
+      ) {
+        pinned = false;
+      }
+      lastScrollTop = scrollEl.scrollTop;
+      lastScrollHeight = scrollEl.scrollHeight;
+    };
+
+    pin();
+    scrollEl.addEventListener("scroll", onScroll);
+    const observer = new ResizeObserver(pin);
+    observer.observe(contentEl);
+    return () => {
+      scrollEl.removeEventListener("scroll", onScroll);
+      observer.disconnect();
+    };
+  }, [isPreview]);
+
+  return (
+    <div className="relative">
+    <div
+      ref={scrollRef}
+      data-slot="reasoning-text"
+      className={cn(
+        "aui-reasoning-text relative z-0 max-h-64 overflow-y-auto ps-6 pt-2 pb-2 leading-relaxed text-pretty",
+        "transform-gpu transition-[transform,opacity] ease-[cubic-bezier(0.32,0.72,0,1)]",
+        "motion-reduce:animate-none",
+        "group-data-open/collapsible-content:animate-in",
+        "group-data-closed/collapsible-content:animate-out",
+        "group-data-open/collapsible-content:fade-in-0",
+        "group-data-closed/collapsible-content:fade-out-0",
+        "group-data-open/collapsible-content:slide-in-from-top-4",
+        "group-data-closed/collapsible-content:slide-out-to-top-4",
+        "group-data-open/collapsible-content:blur-in-[2px]",
+        "group-data-closed/collapsible-content:blur-out-[2px]",
+        "group-data-open/collapsible-content:animation-duration-(--animation-duration)",
+        "group-data-closed/collapsible-content:animation-duration-(--animation-duration)",
+        className,
+      )}
+      {...props}
+    >
+      <div ref={contentRef} className="aui-reasoning-text-content space-y-4">
+        {children}
+      </div>
+    </div>
+    <OverlayScrollbar targetRef={scrollRef} width={4} className="aui-reasoning-scroll" />
+    </div>
+  );
+}
+
+export {
+  ReasoningRoot,
+  ReasoningTrigger,
+  ReasoningContent,
+  ReasoningText,
+  ReasoningFade,
+  reasoningVariants,
+};