@opengeni/react 0.29.0 → 0.33.1

package/src/components/copy-button.tsx

@@ -0,0 +1,127 @@
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useEffect, useRef, useState, type MouseEvent, type ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { copyTextToClipboard } from "../lib/clipboard";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+const COPIED_MS = 1600;
+
+export type CopyButtonProps = {
+  /** Plain text to copy, or a lazy getter (tables / late DOM). */
+  text: string | (() => string);
+  /** Accessible name + tooltip while idle. */
+  label?: string | undefined;
+  className?: string | undefined;
+  /**
+   * `always` — visible control.
+   * `group-hover` — parent must use `group/copy`; fades in on hover/focus.
+   */
+  reveal?: "always" | "group-hover" | undefined;
+};
+
+/**
+ * Ghost icon copy control — no chrome box, no "Copy code" label.
+ * Copy → check flash. Hover-reveal via `group/copy` on a parent.
+ */
+export function CopyButton({
+  text,
+  label = "Copy",
+  className,
+  reveal = "group-hover",
+}: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  const onClick = async (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const value = typeof text === "function" ? text() : text;
+    const ok = await copyTextToClipboard(value);
+    if (!ok) {
+      return;
+    }
+    setCopied(true);
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      timerRef.current = null;
+      setCopied(false);
+    }, COPIED_MS);
+  };
+
+  const tip = copied ? "Copied" : label;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          data-og-copy=""
+          data-state={copied ? "copied" : "idle"}
+          aria-label={tip}
+          onClick={onClick}
+          className={cn(
+            "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
+            "text-og-fg-subtle transition-[opacity,color,background-color] duration-150",
+            "hover:bg-og-surface-2/80 hover:text-og-fg",
+            "focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent/40",
+            reveal === "group-hover" &&
+              "opacity-0 group-hover/copy:opacity-100 group-focus-within/copy:opacity-100 pointer-coarse:opacity-70",
+            copied && "opacity-100 text-og-accent",
+            className,
+          )}
+        >
+          {copied ? (
+            <CheckIcon className="size-3.5" aria-hidden />
+          ) : (
+            <CopyIcon className="size-3.5" aria-hidden />
+          )}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top">{tip}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+/** Hover-reveal chrome around a message / turn so {@link CopyButton} can fade in. */
+export function CopyHoverFrame({
+  children,
+  className,
+  copyText,
+  label,
+  align = "end",
+}: {
+  children: ReactNode;
+  className?: string | undefined;
+  copyText: string;
+  label: string;
+  align?: "start" | "end" | undefined;
+}) {
+  if (copyText.trim().length === 0) {
+    return <div className={className}>{children}</div>;
+  }
+  return (
+    <div className={cn("group/copy relative", className)}>
+      {children}
+      <div
+        className={cn(
+          "pointer-events-none absolute top-1 z-10",
+          align === "end" ? "right-1" : "left-1",
+        )}
+      >
+        <div className="pointer-events-auto">
+          <CopyButton text={copyText} label={label} reveal="group-hover" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/markdown.tsx

@@ -1,7 +1,24 @@
-import { memo } from "react";
+import {
+  Children,
+  isValidElement,
+  memo,
+  useEffect,
+  useReducer,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
 import ReactMarkdown, { type Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { cn } from "../lib/cn";
+import { tableElementToTsv } from "../lib/clipboard";
+import { prefersReducedMotion } from "../lib/motion";
+import { MOTION_INSPECT_SCALE } from "../lib/motion-inspect";
+import { CopyButton } from "./copy-button";
+import { softenStreamingMarkdown } from "./soften-streaming-markdown";
+import { createStreamReveal, rehypeStreamReveal, type StreamReveal } from "./stream-reveal";
+import { TooltipProvider } from "./tooltip";
 
 /**
  * The default renderer for chat message bodies in {@link MessageTimeline}.
@@ -20,6 +37,15 @@ import { cn } from "../lib/cn";
 export type MarkdownProps = {
   children: string;
   className?: string | undefined;
+  /**
+   * While true, newly arrived source fades in through tip ink (`.og-stream-ink`):
+   * an age window over each append batch — fast streams keep a large soft band,
+   * slow streams a tight tip. Paint-only: the DOM always holds the full truthful
+   * text. Once streaming ends and trailing ink settles, the body re-renders as
+   * plain markdown with a short local settle breath (no page-wide view
+   * transition — that blinked the whole document).
+   */
+  streaming?: boolean | undefined;
 };
 
 /* --- element renderers (themed to og-* tokens) ------------------------------ */
@@ -131,37 +157,20 @@ const components: Components = {
   // the `pre` renderer), so a `code` reaching here is treated as inline.
   code: ({ children, className: _className, ...props }) => (
     <code
-      className="rounded-og-xs border border-og-border bg-og-surface-1 px-1 py-0.5 font-og-mono text-og-sm text-og-fg"
+      className="rounded-og-xs bg-og-surface-1 px-1 py-0.5 font-og-mono text-og-sm text-og-fg"
       {...props}
     >
       {children}
     </code>
   ),
-  // Fenced code blocks — mirror the timeline's PayloadBlock <pre> styling for
-  // visual consistency (bordered, scrollable, mono, surface background).
-  pre: ({ children, ...props }) => (
-    <pre
-      className="my-3 max-h-96 overflow-auto rounded-og-md border border-og-border bg-og-bg/60 p-3 font-og-mono text-og-sm text-og-fg-muted [&>code]:border-0 [&>code]:bg-transparent [&>code]:p-0 [&>code]:text-inherit first:mt-0 last:mb-0"
-      {...props}
-    >
-      {children}
-    </pre>
-  ),
-  table: ({ children, ...props }) => (
-    <div className="my-3 max-w-full overflow-x-auto rounded-og-md border border-og-border first:mt-0 last:mb-0">
-      <table className="w-full border-collapse text-og-base" {...props}>
-        {children}
-      </table>
-    </div>
-  ),
-  thead: ({ children, ...props }) => (
-    <thead className="bg-og-surface-1" {...props}>
-      {children}
-    </thead>
-  ),
+  // Fenced code — quiet mono block (no card / no nested vertical scroll).
+  pre: ({ children }) => <MarkdownCodeBlock>{children}</MarkdownCodeBlock>,
+  // Tables stay unboxed (hairline rules); hover reveals a TSV copy control.
+  table: ({ children, ...props }) => <MarkdownTable {...props}>{children}</MarkdownTable>,
+  thead: ({ children, ...props }) => <thead {...props}>{children}</thead>,
   th: ({ children, ...props }) => (
     <th
-      className="border-b border-og-border px-3 py-1.5 text-left font-medium text-og-fg"
+      className="border-b border-og-border px-0 py-1.5 pr-4 text-left font-medium text-og-fg first:pl-0"
       {...props}
     >
       {children}
@@ -169,7 +178,7 @@ const components: Components = {
   ),
   td: ({ children, ...props }) => (
     <td
-      className="border-b border-og-border px-3 py-1.5 align-top text-og-fg-muted [tr:last-child>&]:border-b-0"
+      className="border-b border-og-border/70 px-0 py-1.5 pr-4 align-top text-og-fg-muted [tr:last-child>&]:border-b-0"
       {...props}
     >
       {children}
@@ -184,17 +193,207 @@ const components: Components = {
   ),
 };
 
-function MarkdownImpl({ children, className }: MarkdownProps) {
+/** How long after the stream ends the reveal pipeline stays for trailing animations. */
+/** Trailing ink window after stream end — keep ≥ {@link INK_FADE_MS}. */
+const REVEAL_LINGER_MS = 480 * MOTION_INSPECT_SCALE;
+/** Keep in sync with `--og-duration-markdown-crystallize` / view-transition CSS. */
+const MARKDOWN_SETTLE_MS = 480 * MOTION_INSPECT_SCALE;
+
+function nodeText(node: ReactNode): string {
+  if (node == null || typeof node === "boolean") {
+    return "";
+  }
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+  if (Array.isArray(node)) {
+    return node.map(nodeText).join("");
+  }
+  if (isValidElement<{ children?: ReactNode }>(node)) {
+    return nodeText(node.props.children);
+  }
+  return "";
+}
+
+function fenceLanguage(children: ReactNode): string | null {
+  let found: string | null = null;
+  Children.forEach(children, (child) => {
+    if (found || !isValidElement<{ className?: string }>(child)) {
+      return;
+    }
+    const match = /language-([a-zA-Z0-9_+-]+)/.exec(child.props.className ?? "");
+    if (match?.[1]) {
+      found = match[1];
+    }
+  });
+  return found;
+}
+
+function MarkdownCodeBlock({ children }: { children?: ReactNode }) {
+  const code = nodeText(children).replace(/\n$/, "");
+  const language = fenceLanguage(children);
+  // mt-only (no mb / last:mb-0): next sibling streaming in used to flip a
+  // previous block's bottom margin on and yank tip-follow. Copy is overlay-only.
+  // Fixed leading + overflow-x:auto with stable block chrome so wide ASCII lines
+  // don't pop a scrollbar gutters mid-stream (another tip bob).
   return (
-    // `min-w-0` lets the prose shrink inside flex parents (message bubbles) so
-    // long links and code blocks wrap/scroll instead of forcing overflow.
-    <div className={cn("min-w-0 break-words", className)}>
-      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+    <div className="group/copy relative mt-3 first:mt-0">
+      <div className="pointer-events-none absolute top-1.5 right-1.5 z-10 flex items-center gap-1">
+        {language ? (
+          <span className="rounded px-1 py-0.5 font-og-mono text-[10px] uppercase tracking-wide text-og-fg-subtle/80 opacity-0 transition-opacity group-hover/copy:opacity-100 pointer-coarse:opacity-70">
+            {language}
+          </span>
+        ) : null}
+        <div className="pointer-events-auto">
+          <CopyButton text={code} label="Copy code" reveal="group-hover" />
+        </div>
+      </div>
+      <pre className="overflow-x-auto overflow-y-hidden rounded-og-md bg-og-surface-1/70 px-3 py-2.5 font-og-mono text-og-sm leading-5 text-og-fg-muted [scrollbar-gutter:stable] [&>code]:block [&>code]:border-0 [&>code]:bg-transparent [&>code]:p-0 [&>code]:leading-5 [&>code]:text-inherit">
         {children}
-      </ReactMarkdown>
+      </pre>
     </div>
   );
 }
 
+function MarkdownTable({ children, className, ...props }: ComponentPropsWithoutRef<"table">) {
+  const tableRef = useRef<HTMLTableElement | null>(null);
+  return (
+    <div className="group/copy relative mt-3 max-w-full first:mt-0">
+      <div className="pointer-events-none absolute top-0 right-0 z-10">
+        <div className="pointer-events-auto">
+          <CopyButton
+            text={() => tableElementToTsv(tableRef.current)}
+            label="Copy table"
+            reveal="group-hover"
+          />
+        </div>
+      </div>
+      <div className="overflow-x-auto">
+        <table
+          ref={tableRef}
+          className={cn("w-full min-w-0 border-collapse text-og-base", className)}
+          {...props}
+        >
+          {children}
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function MarkdownImpl({ children, className, streaming = false }: MarkdownProps) {
+  // Tip-ink engine for THIS body: created on the first streaming render, kept
+  // through a short linger after the stream ends (so the last age window can
+  // finish), then dropped so settled bodies pay zero cost. Observing during
+  // render is idempotent per text length — StrictMode double-renders are safe.
+  const revealRef = useRef<StreamReveal | null>(null);
+  const bodyRef = useRef<HTMLDivElement | null>(null);
+  const [, bump] = useReducer((n: number) => n + 1, 0);
+  const [settling, setSettling] = useState(false);
+  const hadRevealRef = useRef(false);
+  const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+
+  // Local settle breath only — View Transitions with `::view-transition-*(*)`
+  // were fading the document root and felt like a full-page blink / focus loss
+  // right as a turn ended (just before the next user message in the seed loop).
+  const crystallize = (mutate: () => void) => {
+    mutate();
+    setSettling(true);
+    bump();
+    return setTimeout(() => setSettling(false), MARKDOWN_SETTLE_MS);
+  };
+  if (streaming && revealRef.current === null && !prefersReducedMotion()) {
+    revealRef.current = createStreamReveal();
+  }
+  const reveal = revealRef.current;
+  if (reveal !== null && streaming) {
+    reveal.observe(children, now);
+  }
+  if (reveal !== null) {
+    hadRevealRef.current = true;
+  }
+  const revealActive = reveal !== null && (streaming || reveal.hasActive(now));
+  // The plugin walks the standard hast tree; a structural local type keeps the
+  // module dependency-free, at the cost of this narrowing cast at the seam.
+  const rehypePlugins =
+    revealActive && reveal !== null
+      ? ([[rehypeStreamReveal, { reveal, now }]] as unknown as NonNullable<
+          Parameters<typeof ReactMarkdown>[0]["rehypePlugins"]
+        >)
+      : undefined;
+
+  // Drop tip ink after trailing age windows finish. Same commit crystallizes:
+  // ink spans → final plain markdown (soften off) + a short local settle breath.
+  useEffect(() => {
+    if (streaming || revealRef.current === null) {
+      return;
+    }
+    let clearSettle: ReturnType<typeof setTimeout> | undefined;
+    const timer = setTimeout(() => {
+      const shouldSettle = hadRevealRef.current && !prefersReducedMotion();
+      if (shouldSettle) {
+        hadRevealRef.current = false;
+      }
+      if (shouldSettle) {
+        clearSettle = crystallize(() => {
+          revealRef.current = null;
+        });
+      } else {
+        revealRef.current = null;
+        bump();
+      }
+    }, REVEAL_LINGER_MS);
+    return () => {
+      clearTimeout(timer);
+      if (clearSettle !== undefined) {
+        clearTimeout(clearSettle);
+      }
+    };
+  }, [streaming]);
+
+  // No-reveal path (stream ended before any ink batch): soften already dropped
+  // with `streaming`; keep the same local settle breath.
+  const wasStreamingRef = useRef(streaming);
+  useEffect(() => {
+    const ended = wasStreamingRef.current && !streaming;
+    wasStreamingRef.current = streaming;
+    if (!ended || revealRef.current !== null || prefersReducedMotion()) {
+      return;
+    }
+    setSettling(true);
+    const timer = setTimeout(() => setSettling(false), MARKDOWN_SETTLE_MS);
+    return () => clearTimeout(timer);
+  }, [streaming]);
+
+  // Soften unfinished markers for DISPLAY while the reveal pipeline is alive
+  // (stream + linger) — not only while `streaming` — so task lists / tables /
+  // fences don't snap to final GFM one commit before the crystallize morph.
+  // Reveal identity still tracks the true source (`children`).
+  const parseText = streaming || revealActive ? softenStreamingMarkdown(children) : children;
+
+  // `min-w-0` lets the prose shrink inside flex parents (message bubbles) so
+  // long links and code blocks wrap/scroll instead of forcing overflow.
+  return (
+    <TooltipProvider delayDuration={400}>
+      <div
+        ref={bodyRef}
+        className={cn(
+          "og-markdown-body min-w-0 break-words",
+          settling && "og-markdown-settle",
+          className,
+        )}
+      >
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={rehypePlugins}
+          components={components}
+        >
+          {parseText}
+        </ReactMarkdown>
+      </div>
+    </TooltipProvider>
+  );
+}
+
 /** Memoized so streaming re-renders of the parent don't re-parse settled bodies. */
 export const Markdown = memo(MarkdownImpl);