@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/skins/base/elements/quote.aui.tsx

@@ -0,0 +1,290 @@
+"use client";
+
+import { memo, type ComponentProps, type FC } from "react";
+import type { QuoteMessagePartComponent } from "@assistant-ui/react";
+import {
+  ComposerPrimitive,
+  SelectionToolbarPrimitive,
+} from "@assistant-ui/react";
+import { QuoteIcon, XIcon } from "lucide-react";
+import { cn } from "../../../../../lib/utils";
+
+function QuoteBlockRoot({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="quote-block"
+      className={cn("mb-2 flex items-start gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function QuoteBlockIcon({
+  className,
+  ...props
+}: ComponentProps<typeof QuoteIcon>) {
+  return (
+    <QuoteIcon
+      data-slot="quote-block-icon"
+      className={cn(
+        "text-muted-foreground/60 mt-0.5 size-3 shrink-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function QuoteBlockText({ className, ...props }: ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="quote-block-text"
+      className={cn(
+        "text-muted-foreground/80 line-clamp-2 min-w-0 text-sm italic",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Renders quoted text in user messages.
+ *
+ * Pass this to `MessagePrimitive.Parts` as the `Quote` renderer.
+ *
+ * @example
+ * ```tsx
+ * <MessagePrimitive.Quote>
+ *   {(quote) => <QuoteBlock {...quote} />}
+ * </MessagePrimitive.Quote>
+ * ```
+ */
+const QuoteBlockImpl: QuoteMessagePartComponent = ({ text }) => {
+  return (
+    <QuoteBlockRoot>
+      <QuoteBlockIcon />
+      <QuoteBlockText>{text}</QuoteBlockText>
+    </QuoteBlockRoot>
+  );
+};
+
+const QuoteBlock = memo(
+  QuoteBlockImpl,
+) as unknown as QuoteMessagePartComponent & {
+  Root: typeof QuoteBlockRoot;
+  Icon: typeof QuoteBlockIcon;
+  Text: typeof QuoteBlockText;
+};
+
+QuoteBlock.displayName = "QuoteBlock";
+QuoteBlock.Root = QuoteBlockRoot;
+QuoteBlock.Icon = QuoteBlockIcon;
+QuoteBlock.Text = QuoteBlockText;
+
+function SelectionToolbarRoot({
+  className,
+  ...props
+}: ComponentProps<typeof SelectionToolbarPrimitive.Root>) {
+  return (
+    <SelectionToolbarPrimitive.Root
+      data-slot="selection-toolbar"
+      className={cn(
+        "bg-popover flex items-center gap-1 rounded-lg border px-1 py-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SelectionToolbarQuote({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof SelectionToolbarPrimitive.Quote>) {
+  return (
+    <SelectionToolbarPrimitive.Quote
+      data-slot="selection-toolbar-quote"
+      className={cn(
+        "text-popover-foreground hover:bg-muted flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm transition-colors",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <QuoteIcon className="size-3.5" />
+          Quote
+        </>
+      )}
+    </SelectionToolbarPrimitive.Quote>
+  );
+}
+
+/**
+ * Floating toolbar that appears when text is selected in a message.
+ *
+ * Render anywhere inside `ThreadPrimitive.Root` (or any `AssistantRuntimeProvider` scope).
+ *
+ * @example
+ * ```tsx
+ * <ThreadPrimitive.Root>
+ *   <ThreadPrimitive.Viewport>...</ThreadPrimitive.Viewport>
+ *   <SelectionToolbar />
+ * </ThreadPrimitive.Root>
+ * ```
+ */
+const SelectionToolbarImpl: FC<ComponentProps<typeof SelectionToolbarRoot>> = ({
+  className,
+  ...props
+}) => {
+  return (
+    <SelectionToolbarRoot className={className} {...props}>
+      <SelectionToolbarQuote />
+    </SelectionToolbarRoot>
+  );
+};
+
+const SelectionToolbar = memo(
+  SelectionToolbarImpl,
+) as unknown as typeof SelectionToolbarImpl & {
+  Root: typeof SelectionToolbarRoot;
+  Quote: typeof SelectionToolbarQuote;
+};
+
+SelectionToolbar.displayName = "SelectionToolbar";
+SelectionToolbar.Root = SelectionToolbarRoot;
+SelectionToolbar.Quote = SelectionToolbarQuote;
+
+function ComposerQuotePreviewRoot({
+  className,
+  ...props
+}: ComponentProps<typeof ComposerPrimitive.Quote>) {
+  return (
+    <ComposerPrimitive.Quote
+      data-slot="composer-quote"
+      className={cn(
+        "bg-muted/60 mx-3 mt-2 flex items-start gap-2 rounded-lg px-3 py-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComposerQuotePreviewIcon({
+  className,
+  ...props
+}: ComponentProps<typeof QuoteIcon>) {
+  return (
+    <QuoteIcon
+      data-slot="composer-quote-icon"
+      className={cn(
+        "text-muted-foreground/70 mt-0.5 size-3.5 shrink-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComposerQuotePreviewText({
+  className,
+  ...props
+}: ComponentProps<typeof ComposerPrimitive.QuoteText>) {
+  return (
+    <ComposerPrimitive.QuoteText
+      data-slot="composer-quote-text"
+      className={cn(
+        "text-muted-foreground line-clamp-2 min-w-0 flex-1 text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComposerQuotePreviewDismiss({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof ComposerPrimitive.QuoteDismiss>) {
+  const defaultClassName =
+    "shrink-0 rounded-sm p-0.5 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground";
+
+  return (
+    <ComposerPrimitive.QuoteDismiss
+      data-slot="composer-quote-dismiss"
+      asChild
+      className={children ? className : undefined}
+      {...props}
+    >
+      {children ?? (
+        <button
+          type="button"
+          aria-label="Dismiss quote"
+          className={cn(defaultClassName, className)}
+        >
+          <XIcon className="size-3.5" />
+        </button>
+      )}
+    </ComposerPrimitive.QuoteDismiss>
+  );
+}
+
+/**
+ * Quote preview inside the composer. Only renders when a quote is set.
+ *
+ * Place inside `ComposerPrimitive.Root`.
+ *
+ * @example
+ * ```tsx
+ * <ComposerPrimitive.Root>
+ *   <ComposerQuotePreview />
+ *   <ComposerPrimitive.Input />
+ *   <ComposerPrimitive.Send />
+ * </ComposerPrimitive.Root>
+ * ```
+ */
+const ComposerQuotePreviewImpl: FC<
+  ComponentProps<typeof ComposerQuotePreviewRoot>
+> = ({ className, ...props }) => {
+  return (
+    <ComposerQuotePreviewRoot className={className} {...props}>
+      <ComposerQuotePreviewIcon />
+      <ComposerQuotePreviewText />
+      <ComposerQuotePreviewDismiss />
+    </ComposerQuotePreviewRoot>
+  );
+};
+
+const ComposerQuotePreview = memo(
+  ComposerQuotePreviewImpl,
+) as unknown as typeof ComposerQuotePreviewImpl & {
+  Root: typeof ComposerQuotePreviewRoot;
+  Icon: typeof ComposerQuotePreviewIcon;
+  Text: typeof ComposerQuotePreviewText;
+  Dismiss: typeof ComposerQuotePreviewDismiss;
+};
+
+ComposerQuotePreview.displayName = "ComposerQuotePreview";
+ComposerQuotePreview.Root = ComposerQuotePreviewRoot;
+ComposerQuotePreview.Icon = ComposerQuotePreviewIcon;
+ComposerQuotePreview.Text = ComposerQuotePreviewText;
+ComposerQuotePreview.Dismiss = ComposerQuotePreviewDismiss;
+
+export {
+  QuoteBlock,
+  QuoteBlockRoot,
+  QuoteBlockIcon,
+  QuoteBlockText,
+  SelectionToolbar,
+  SelectionToolbarRoot,
+  SelectionToolbarQuote,
+  ComposerQuotePreview,
+  ComposerQuotePreviewRoot,
+  ComposerQuotePreviewIcon,
+  ComposerQuotePreviewText,
+  ComposerQuotePreviewDismiss,
+};

package/src/components/chat/skins/base/elements/work-chain.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useRef, type ReactNode } from "react";
+import { useScrollLock } from "@assistant-ui/react";
+import {
+  ChevronRightIcon,
+  CircleAlertIcon,
+  CircleStopIcon,
+  LoaderIcon,
+} from "lucide-react";
+import { cn } from "../../../../../lib/utils";
+import {
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+} from "../aui-default/collapsible-root";
+import { collapsePanel } from "../aui-default/surfaces";
+import { useWorkChain, type WorkChainOptions } from "../../../trace-grouping/use-work-chain";
+
+/** The upstream disclosure duration. */
+const ANIMATION_DURATION = 200;
+
+/**
+ * The whole chain of reasoning and tool calls under one header, in the base
+ * skin's look (assistant-ui's Run activity line on the theme tokens).
+ *
+ * When it opens and folds, and what the header says, are the digichat skin's
+ * rules (`useWorkChain`): open while the agent works, folded shortly after
+ * the answer starts; folded, the header is the status line ("Working —
+ * web_search", "Used 3 tools"); open, it is "Working" / "Worked". Inside, the
+ * reasoning box and the `N tool calls` group keep their own disclosures,
+ * exactly as in the digichat skin.
+ */
+export function WorkChain({
+  children,
+  className,
+  ...options
+}: WorkChainOptions & { children: ReactNode; className?: string }) {
+  const { open, onOpenChange, title, marker, outcome } = useWorkChain(options);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  // Upstream: lock the thread viewport's scroll before the panel animates.
+  const lockScroll = useScrollLock(rootRef, ANIMATION_DURATION);
+  const busy = marker === "loading";
+
+  return (
+    <CollapsibleRoot
+      ref={rootRef}
+      data-slot="aui_work-chain"
+      data-outcome={outcome}
+      open={open}
+      onOpenChange={(next) => {
+        lockScroll();
+        onOpenChange(next);
+      }}
+      className={cn("aui-work-chain my-1 flex min-w-0 flex-col", className)}
+    >
+      <CollapsibleTrigger
+        data-slot="aui_work-chain-trigger"
+        aria-busy={busy || undefined}
+        className="aui-work-chain-trigger group/trigger text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 flex max-w-full items-center gap-1.5 rounded-md py-1 text-sm outline-none focus-visible:ring-[3px]"
+      >
+        <ChevronRightIcon
+          aria-hidden="true"
+          className="size-3.5 shrink-0 transition-transform duration-200 group-data-panel-open/trigger:rotate-90 group-data-open/trigger:rotate-90 motion-reduce:transition-none"
+        />
+        <span
+          data-slot="aui_work-chain-title"
+          className={cn(
+            "text-start tabular-nums wrap-anywhere",
+            busy && "shimmer motion-reduce:animate-none",
+          )}
+        >
+          {title}
+        </span>
+        {marker === "loading" && (
+          <LoaderIcon
+            aria-hidden="true"
+            className="size-3 shrink-0 animate-spin [animation-duration:0.6s] motion-reduce:animate-none"
+          />
+        )}
+        {marker === "error" && (
+          <CircleAlertIcon aria-hidden="true" className="text-destructive size-3.5 shrink-0" />
+        )}
+        {marker === "stop" && (
+          <CircleStopIcon aria-hidden="true" className="size-3.5 shrink-0" />
+        )}
+      </CollapsibleTrigger>
+      <CollapsibleContent
+        // Kept mounted: the rows inside keep their own state while folded.
+        keepMounted
+        data-slot="aui_work-chain-content"
+        className={collapsePanel}
+      >
+        <div className="border-border ms-1.5 flex min-w-0 flex-col gap-1 border-s ps-3.5 pt-1 text-sm wrap-anywhere">
+          {children}
+        </div>
+      </CollapsibleContent>
+    </CollapsibleRoot>
+  );
+}

package/src/components/chat/skins/base/markdown-text.tsx

@@ -0,0 +1,294 @@
+"use client";
+
+/**
+ * Base skin markdown text: the stock twin re-expressed on theme tokens only
+ * (foreground, background, muted, border, destructive, ring), so the active
+ * tenant or brand theme styles it. Kept in step with `stock/markdown-text.tsx`; the
+ * stock copy keeps the digichat square look.
+ */
+
+import "@assistant-ui/react-markdown/styles/dot.css";
+
+import {
+  type CodeHeaderProps,
+  MarkdownTextPrimitive,
+  unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
+  useIsMarkdownCodeBlock,
+} from "@assistant-ui/react-markdown";
+import remarkGfm from "remark-gfm";
+import { isFollowableHref } from "../../followable-href";
+import { remarkStripModelBoilerplate } from "../../strip-model-boilerplate";
+import { type FC, memo, useMemo, useRef } from "react";
+import type { TextMessagePartProps } from "@assistant-ui/react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+
+import { TooltipIconButton } from "./tooltip-icon-button";
+import { useCopyToClipboard } from "../../stock/use-copy-to-clipboard";
+import { ArtifactLink, isArtifactBlobHref } from "../../stock/artifacts-panel";
+import { cn } from "../../../../lib/utils";
+
+type MarkdownTextProps = Partial<TextMessagePartProps> & {
+  components?: Parameters<typeof memoizeMarkdownComponents>[0];
+};
+
+const useShallowStable = <T extends Record<string, unknown> | undefined>(
+  value: T,
+): T => {
+  const ref = useRef(value);
+  if (value !== ref.current) {
+    const prev = ref.current;
+    const stable =
+      value !== undefined &&
+      prev !== undefined &&
+      Object.keys(prev).length === Object.keys(value).length &&
+      Object.keys(value).every((key) => prev[key] === value[key]);
+    if (!stable) ref.current = value;
+  }
+  return ref.current;
+};
+
+const MarkdownTextImpl: FC<MarkdownTextProps> = ({ components }) => {
+  const stableComponents = useShallowStable(components);
+    const markdownComponents = useMemo(() => {
+    if (!stableComponents) return defaultComponents;
+    return {
+      ...defaultComponents,
+      ...memoizeMarkdownComponents(stableComponents),
+    };
+  }, [stableComponents]);
+
+  return (
+    <MarkdownTextPrimitive
+      remarkPlugins={[remarkGfm, remarkStripModelBoilerplate]}
+      className="aui-md"
+      components={markdownComponents}
+      defer
+    />
+  );
+};
+
+export const MarkdownText = memo(MarkdownTextImpl);
+
+const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
+  const onCopy = () => {
+    if (!code || isCopied) return;
+    copyToClipboard(code);
+  };
+
+  return (
+    <div className="aui-code-header-root border-border bg-muted/50 mt-3 flex items-center justify-between rounded-t-lg border border-b-0 px-3.5 py-1.5 text-xs">
+      <span className="aui-code-header-language text-muted-foreground font-medium lowercase">
+        {language}
+      </span>
+      <TooltipIconButton tooltip="Copy" onClick={onCopy}>
+        {!isCopied && (
+          <CopyIcon className="animate-in zoom-in-75 fade-in duration-(--dur-fast)" />
+        )}
+        {isCopied && (
+          <CheckIcon className="animate-in zoom-in-50 fade-in duration-(--duration-hover) ease-out" />
+        )}
+      </TooltipIconButton>
+    </div>
+  );
+};
+
+// Exported so the `a:` override's routing is testable: without a pin, a
+// revert to the plain anchor would pass every suite that only exercises
+// ArtifactLink directly.
+export const defaultComponents = memoizeMarkdownComponents({
+  h1: ({ className, ...props }) => (
+    <h1
+      className={cn(
+        "aui-md-h1 mt-5 mb-2 scroll-m-20 text-xl font-semibold first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h2: ({ className, ...props }) => (
+    <h2
+      className={cn(
+        "aui-md-h2 mt-5 mb-2 scroll-m-20 text-lg font-semibold first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h3: ({ className, ...props }) => (
+    <h3
+      className={cn(
+        "aui-md-h3 mt-4 mb-1.5 scroll-m-20 text-base font-semibold first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h4: ({ className, ...props }) => (
+    <h4
+      className={cn(
+        "aui-md-h4 mt-3.5 mb-1 scroll-m-20 text-base font-medium first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h5: ({ className, ...props }) => (
+    <h5
+      className={cn(
+        "aui-md-h5 mt-3 mb-1 text-sm font-semibold first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h6: ({ className, ...props }) => (
+    <h6
+      className={cn(
+        "aui-md-h6 mt-3 mb-1 text-sm font-medium first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  p: ({ className, ...props }) => (
+    <p
+      className={cn(
+        "aui-md-p my-3 leading-relaxed first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  // A citation to a non-web source (repo://, vault paths) arrives with its href
+  // emptied by the sanitizer; an <a href=""> would reload the embed itself
+  // (carrying its query string). Show the label as plain text instead.
+  a: ({ className, href, children, ...props }) =>
+    !isFollowableHref(href) ? (
+      <span className="aui-md-a-plain">{children}</span>
+    ) : isArtifactBlobHref(href) ? (
+      <ArtifactLink href={href as string} className={className}>
+        {children}
+      </ArtifactLink>
+    ) : (
+      <a
+        className={cn(
+          "aui-md-a text-accent hover:text-accent/80 underline underline-offset-2",
+          className,
+        )}
+        href={href}
+        {...props}
+      >
+        {children}
+      </a>
+    ),
+  blockquote: ({ className, ...props }) => (
+    <blockquote
+      className={cn(
+        "aui-md-blockquote border-border text-muted-foreground my-3 border-s-2 ps-4",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  ul: ({ className, ...props }) => (
+    <ul
+      className={cn(
+        "aui-md-ul marker:text-muted-foreground my-3 ms-5 list-disc [&>li]:mt-1",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  ol: ({ className, ...props }) => (
+    <ol
+      className={cn(
+        "aui-md-ol marker:text-muted-foreground my-3 ms-5 list-decimal [&>li]:mt-1",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  hr: ({ className, ...props }) => (
+    <hr
+      className={cn("aui-md-hr border-border my-3", className)}
+      {...props}
+    />
+  ),
+  table: ({ className, ...props }) => (
+    <div className="aui-md-table-wrapper my-3 overflow-x-auto">
+      <table
+        className={cn(
+          "aui-md-table w-full border-separate border-spacing-0",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  ),
+  th: ({ className, ...props }) => (
+    <th
+      className={cn(
+        "aui-md-th bg-muted px-3 py-1.5 text-start font-medium first:rounded-ss-lg last:rounded-se-lg [[align=center]]:text-center [[align=right]]:text-right",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  td: ({ className, ...props }) => (
+    <td
+      className={cn(
+        "aui-md-td border-border border-s border-b px-3 py-1.5 text-start last:border-e [[align=center]]:text-center [[align=right]]:text-right",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  tr: ({ className, ...props }) => (
+    <tr
+      className={cn(
+        "aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-es-lg [&:last-child>td:last-child]:rounded-ee-lg",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  li: ({ className, ...props }) => (
+    <li className={cn("aui-md-li leading-relaxed", className)} {...props} />
+  ),
+  strong: ({ className, ...props }) => (
+    <strong
+      className={cn("aui-md-strong font-semibold", className)}
+      {...props}
+    />
+  ),
+  sup: ({ className, ...props }) => (
+    <sup
+      className={cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className)}
+      {...props}
+    />
+  ),
+  pre: ({ className, ...props }) => (
+    <pre
+      className={cn(
+        "aui-md-pre border-border bg-muted/30 overflow-x-auto rounded-t-none rounded-b-lg border border-t-0 p-3.5 text-[13px] leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  code: function Code({ className, ...props }) {
+    const isCodeBlock = useIsMarkdownCodeBlock();
+    return (
+      <code
+        className={cn(
+          !isCodeBlock &&
+            "aui-md-inline-code bg-muted rounded-md px-1.5 py-0.5 font-mono text-[0.85em]",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+  CodeHeader,
+});

package/src/components/chat/skins/base/model.ts

@@ -0,0 +1 @@
+export const DEFAULT_MODEL_ID = "gpt-5.6-luna";