@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/gallery-thread/markdown-text.tsx

@@ -0,0 +1,278 @@
+"use client";
+
+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 {
+  CheckActionIcon,
+  CopyActionIcon,
+} from "./action-icons";
+import { TooltipIconButton } from "./tooltip-icon-button";
+import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard";
+import { cn } from "./cn";
+import { MermaidDiagram } from "../../assistant-ui/elements/mermaid-diagram.aui";
+
+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}
+      componentsByLanguage={{
+        mermaid: { SyntaxHighlighter: MermaidDiagram },
+      }}
+      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-hair bg-surface-2/50 mt-3 flex items-center justify-between rounded-none border border-b-0 px-3.5 py-1.5 text-xs">
+      <span className="aui-code-header-language text-ink-mute font-medium lowercase">
+        {language}
+      </span>
+      <TooltipIconButton tooltip="Copy" onClick={onCopy}>
+        {!isCopied && <CopyActionIcon className="size-3.5" />}
+        {isCopied && <CheckActionIcon className="size-3.5" />}
+      </TooltipIconButton>
+    </div>
+  );
+};
+
+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: ({ className, href, children, ...props }) =>
+    !isFollowableHref(href) ? (
+      <span className="aui-md-a-plain">{children}</span>
+    ) : (
+      <a
+        href={href}
+        className={cn(
+          "aui-md-a text-accent hover:text-accent/80 underline underline-offset-2",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </a>
+    ),
+  blockquote: ({ className, ...props }) => (
+    <blockquote
+      className={cn(
+        "aui-md-blockquote border-hair-2 text-ink-mute my-3 border-s-2 ps-4",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  ul: ({ className, ...props }) => (
+    <ul
+      className={cn(
+        "aui-md-ul marker:text-ink-mute my-3 ms-0 ps-7 list-outside list-disc [&>li]:mt-1",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  ol: ({ className, ...props }) => (
+    <ol
+      className={cn(
+        "aui-md-ol marker:text-ink-mute my-3 ms-0 ps-8 list-outside list-decimal [&>li]:mt-1",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  hr: ({ className, ...props }) => (
+    <hr
+      className={cn("aui-md-hr border-hair 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-surface-2 px-3 py-1.5 text-start font-medium first:rounded-none last:rounded-none [[align=center]]:text-center [[align=right]]:text-right",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  td: ({ className, ...props }) => (
+    <td
+      className={cn(
+        "aui-md-td border-hair 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-none [&:last-child>td:last-child]:rounded-none",
+        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-hair bg-surface-2/30 max-w-full overflow-x-auto rounded-t-none rounded-none 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-surface-2 rounded-none px-1.5 py-0.5 font-mono text-[0.85em]",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+  CodeHeader,
+});

package/src/components/chat/gallery-thread/message-error.aui.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import {
+  ActionBarPrimitive,
+  ErrorPrimitive,
+  MessagePrimitive,
+  useAuiState,
+} from "@assistant-ui/react";
+import type { FC } from "react";
+import { ChatNoticeContent, ChatNoticeDetail, chatNoticeRootProps } from "../stock/chat-notice";
+
+function messageStatusErrorText(status: {
+  type?: string;
+  reason?: string;
+  error?: unknown;
+}): string | undefined {
+  if (status.type !== "incomplete" || status.reason !== "error") return undefined;
+  const error = status.error;
+  if (typeof error === "string") return error;
+  if (
+    error &&
+    typeof error === "object" &&
+    "message" in error &&
+    typeof (error as { message: unknown }).message === "string"
+  ) {
+    return (error as { message: string }).message;
+  }
+  return error != null ? String(error) : undefined;
+}
+
+function splitError(raw: string | undefined): {
+  title: string;
+  detail?: string;
+  code?: string;
+} {
+  if (!raw?.trim()) return { title: "The request failed." };
+  try {
+    const parsed = JSON.parse(raw) as {
+      error?: string;
+      code?: string;
+      message?: string;
+      detail?: string;
+    };
+    const code = parsed.error ?? parsed.code;
+    const title =
+      (typeof parsed.message === "string" && parsed.message) ||
+      (typeof code === "string" ? code : raw);
+    return {
+      title,
+      detail: typeof parsed.detail === "string" ? parsed.detail : undefined,
+      code: typeof code === "string" ? code : undefined,
+    };
+  } catch {
+    return { title: raw };
+  }
+}
+
+/**
+ * Error state — the assistant-ui error-state element pattern: a quiet banner
+ * where the reply would have been, naming the failure with a retry path.
+ *
+ * MessagePrimitive.Error renders the banner only while the message carries an
+ * error (status incomplete + reason error), so nothing here has to check.
+ * ActionBarPrimitive.Reload re-runs the failed turn.
+ */
+export const MessageError: FC = () => {
+  const raw = useAuiState((s) => messageStatusErrorText(s.message.status ?? {}));
+  const { title, detail, code } = splitError(raw);
+
+  // DIG-4459: the backend's own words, whole, in the boxed error notice the
+  // tool errors and status lines share. The headline is the parsed message;
+  // the detail (or the raw payload when it says more) sits under it.
+  const rawDetail = raw && raw.trim() !== title ? raw : undefined;
+
+  return (
+    <MessagePrimitive.Error>
+      <ErrorPrimitive.Root
+        {...chatNoticeRootProps("error", "aui-message-error-root mt-2")}
+      >
+        <ChatNoticeContent
+          tone="error"
+          title={
+            <ErrorPrimitive.Message className="aui-message-error-message whitespace-pre-wrap">
+              {title}
+            </ErrorPrimitive.Message>
+          }
+          detail={detail}
+          extra={
+            code || (rawDetail && !detail) ? (
+              <div className="aui-message-error-details mt-1 text-ink-mute">
+                {code ? <p className="mt-1 font-mono">code: {code}</p> : null}
+                {rawDetail && !detail ? <ChatNoticeDetail text={rawDetail} /> : null}
+              </div>
+            ) : null
+          }
+          action={
+            <ActionBarPrimitive.Reload className="aui-message-error-retry ms-auto flex shrink-0 items-center gap-1.5 rounded-none border border-danger/25 px-3 py-1 text-xs font-medium text-danger transition-colors hover:bg-danger/10 disabled:pointer-events-none disabled:opacity-50">
+              Retry
+            </ActionBarPrimitive.Reload>
+          }
+        />
+      </ErrorPrimitive.Root>
+    </MessagePrimitive.Error>
+  );
+};

package/src/components/chat/gallery-thread/message-timing.aui.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { useAuiState, useMessageTiming } from "@assistant-ui/react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./ui/tooltip";
+import { cn } from "./cn";
+import { formatToolDurationMs } from "./format-json-dump";
+import type { FC } from "react";
+
+const formatTokens = (count: number): string => count.toLocaleString("en-US");
+
+type ThreadTokenUsage = {
+  inputTokens?: number;
+  outputTokens?: number;
+  totalTokens?: number;
+  reasoningTokens?: number;
+  cachedInputTokens?: number;
+};
+
+const readTokenUsage = (value: unknown): ThreadTokenUsage | undefined => {
+  if (typeof value !== "object" || value === null) return undefined;
+  const record = value as Record<string, unknown>;
+  const pick = (key: string): number | undefined =>
+    typeof record[key] === "number" ? record[key] : undefined;
+  const usage: ThreadTokenUsage = {
+    inputTokens: pick("inputTokens"),
+    outputTokens: pick("outputTokens"),
+    totalTokens: pick("totalTokens"),
+    reasoningTokens: pick("reasoningTokens"),
+    cachedInputTokens: pick("cachedInputTokens"),
+  };
+  return Object.values(usage).some((tokens) => tokens !== undefined)
+    ? usage
+    : undefined;
+};
+
+const TimingRow: FC<{ label: string; value: string }> = ({ label, value }) => (
+  <div className="flex items-center justify-between gap-4">
+    <span className="text-ink-mute">{label}</span>
+    <span className="font-mono tabular-nums">{value}</span>
+  </div>
+);
+
+export const MessageTiming: FC<{
+  className?: string;
+  side?: "top" | "right" | "bottom" | "left";
+}> = ({ className, side = "right" }) => {
+  const timing = useMessageTiming();
+  const usage = readTokenUsage(
+    useAuiState((s) => s.message.metadata.custom.usage),
+  );
+
+  if (timing?.totalStreamTime === undefined) return null;
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              data-slot="message-timing-trigger"
+              aria-label="Message timing"
+              className={cn(
+                "text-ink-mute hover:bg-accent hover:text-accent-foreground flex items-center rounded-none p-1 font-mono text-xs tabular-nums transition-colors",
+                className,
+              )}
+            />
+          }
+        >
+          {formatToolDurationMs(timing.totalStreamTime)}
+        </TooltipTrigger>
+        <TooltipContent
+          side={side}
+          sideOffset={8}
+          className="bg-surface-2 text-ink border px-3 py-2"
+        >
+          <div
+            data-slot="message-timing-popover"
+            className="grid min-w-35 gap-1.5 text-xs"
+          >
+            {timing.firstTokenTime !== undefined && (
+              <TimingRow
+                label="First token"
+                value={formatToolDurationMs(timing.firstTokenTime)}
+              />
+            )}
+            <TimingRow
+              label="Total"
+              value={formatToolDurationMs(timing.totalStreamTime)}
+            />
+            {timing.tokensPerSecond !== undefined && (
+              <TimingRow
+                label="Speed"
+                value={`${timing.tokensPerSecond.toFixed(1)} tok/s`}
+              />
+            )}
+            <TimingRow label="Chunks" value={String(timing.totalChunks)} />
+            {usage && (
+              <>
+                <div className="bg-border my-0.5 h-px" />
+                {usage.inputTokens !== undefined && (
+                  <TimingRow
+                    label="Input tokens"
+                    value={formatTokens(usage.inputTokens)}
+                  />
+                )}
+                {usage.outputTokens !== undefined && (
+                  <TimingRow
+                    label="Output tokens"
+                    value={formatTokens(usage.outputTokens)}
+                  />
+                )}
+                {usage.totalTokens !== undefined && (
+                  <TimingRow
+                    label="Total tokens"
+                    value={formatTokens(usage.totalTokens)}
+                  />
+                )}
+                {usage.reasoningTokens !== undefined && (
+                  <TimingRow
+                    label="Reasoning"
+                    value={formatTokens(usage.reasoningTokens)}
+                  />
+                )}
+                {usage.cachedInputTokens !== undefined && (
+                  <TimingRow
+                    label="Cached input"
+                    value={formatTokens(usage.cachedInputTokens)}
+                  />
+                )}
+              </>
+            )}
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};