zidane-ui 9.1.1 → 9.1.3

package/src/chat/transcript/MermaidDiagram.tsx

@@ -1,484 +0,0 @@
-/**
- * A Mermaid fence drawn as a diagram (Pele: Mermaid → SVG), in the code frame
- * its source would sit in. The frame's controls (shown on hover, with Copy):
- * zoom out, zoom in, back to fit, and a toggle to the highlighted source.
- *
- * Streaming: while a reply streams its fence, the diagram is drawn from the
- * source so far, at most every {@link STREAM_FRAME_MS}. A source that does not
- * parse yet (a half-written line) keeps the last drawing, never an error.
- * Once the fence closes, the diagram is mounted for good: it lays itself out
- * again when its column resizes, and it zooms.
- *
- * Performance: Pele (`pele/lazy`) loads on the first diagram that nears the
- * viewport, each diagram type on its first use. Every drawing is kept per
- * source (a bounded cache), so a diagram mounting again (its fence closing,
- * its row coming back into view) paints at once, at its size.
- *
- * Theme: the SVG reads `--pele-*` variables, which `.zg-diagram`
- * (styles/transcript.css) maps to the theme's tokens: switching themes repaints
- * through CSS alone. A change of the chat or code font (or its size) on the
- * root measures the labels again (`watchTypography`: one observer for the page).
- *
- * Safety: the source is model output. Pele escapes text, filters styles and
- * caps size; images (network requests) and links are off. A source Pele cannot
- * draw shows as highlighted code with the reason under it, set as text.
- */
-import { memo, useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
-import type { MountOptions, Mounted, RenderOptions } from 'pele';
-
-import { HighlightedCode } from '../../code/HighlightedCode';
-import { CodeFrame } from '../../components/CodeFrame';
-import { useNearViewport } from '../../hooks/useNearViewport';
-import { useChatLabels } from '../useChatLabels';
-
-/** Props of {@link MermaidDiagram}. */
-export interface MermaidDiagramProps {
-  /** The Mermaid source, without the closing newline. */
-  code: string;
-  /** The source is still streaming: draw what parses so far, and wait for the rest. */
-  streaming?: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/** Why a source was not drawn, for the line under its code. */
-interface Failure {
-  code: string;
-  message: string;
-  line: number;
-  column: number;
-}
-
-type Pele = typeof import('pele/lazy');
-
-let peleModule: Promise<Pele> | null = null;
-
-/** Pele's lazy entry, imported once for the page. A failed import is retried by the next diagram. */
-function loadPele(): Promise<Pele> {
-  peleModule ??= import('pele/lazy').catch((error: unknown) => {
-    peleModule = null;
-    throw error;
-  });
-  return peleModule;
-}
-
-/** The longest a streaming diagram waits between two drawings. */
-const STREAM_FRAME_MS = 120;
-/** Each zoom button's step. */
-const ZOOM_STEP = 1.25;
-
-/** A drawing: its SVG, the height its canvas took, its type. */
-interface Drawing {
-  svg: string;
-  height: number;
-  type: string;
-}
-
-/** The drawings by source, oldest first out, and the one a stream drew last. */
-const drawings = new Map<string, Drawing>();
-const DRAWINGS_MAX = 60;
-let lastStreamed: { code: string; drawing: Drawing } | null = null;
-
-function remember(code: string, drawing: Drawing, streaming: boolean) {
-  drawings.delete(code);
-  drawings.set(code, drawing);
-  if (drawings.size > DRAWINGS_MAX) drawings.delete(drawings.keys().next().value!);
-  if (streaming) lastStreamed = { code, drawing };
-}
-
-/**
- * The drawing to paint before Pele draws `code`: its own, else (a fence that just closed) the last
- * one its stream drew, when that source is where this one started.
- */
-function drawingFor(code: string): Drawing | undefined {
-  return drawings.get(code) ?? (lastStreamed && code.startsWith(lastStreamed.code) ? lastStreamed.drawing : undefined);
-}
-
-/**
- * Calls back when the root's font tokens change (the appearance preferences write them on `<html>`).
- * One MutationObserver for every diagram on the page, created with the first and dropped with the last.
- */
-const typographyListeners = new Set<() => void>();
-let typographyObserver: MutationObserver | null = null;
-let typography = '';
-
-function readTypography(): string {
-  const root = getComputedStyle(document.documentElement);
-  return ['--zg-font-chat', '--zg-font-mono', '--zg-font-size-chat']
-    .map((name) => root.getPropertyValue(name))
-    .join('|');
-}
-
-function watchTypography(listener: () => void): () => void {
-  typographyListeners.add(listener);
-  if (!typographyObserver && typeof MutationObserver !== 'undefined') {
-    typography = readTypography();
-    typographyObserver = new MutationObserver(() => {
-      const next = readTypography();
-      if (next === typography) return;
-      typography = next;
-      for (const notify of typographyListeners) notify();
-    });
-    typographyObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['style', 'class'] });
-  }
-  return () => {
-    typographyListeners.delete(listener);
-    if (typographyListeners.size === 0) {
-      typographyObserver?.disconnect();
-      typographyObserver = null;
-    }
-  };
-}
-
-/** Render options fixed for model output: no network, no navigation. */
-const SAFE_OPTIONS: RenderOptions = { images: false, links: false, padding: 12 };
-
-/** The canvas's metrics as render options: its label font and size (Pele measures labels with them). */
-function metricsOf(canvas: HTMLElement): RenderOptions {
-  const computed = getComputedStyle(canvas);
-  const size = parseFloat(computed.fontSize);
-  const mono = computed.getPropertyValue('--pele-font-mono').trim();
-  return {
-    ...(Number.isFinite(size) && size > 0 ? { fontSize: size } : {}),
-    ...(computed.fontFamily ? { fontFamily: computed.fontFamily } : {}),
-    ...(mono ? { fontFamilyMono: mono } : {}),
-  };
-}
-
-function failureOf(code: string, error: unknown): Failure {
-  const e = error as { message?: unknown; line?: unknown; column?: unknown };
-  return {
-    code,
-    message: typeof e?.message === 'string' ? e.message : String(error),
-    line: typeof e?.line === 'number' ? e.line : 0,
-    column: typeof e?.column === 'number' ? e.column : 0,
-  };
-}
-
-/**
- * Draws a Mermaid source as a themed SVG diagram, with zoom and a toggle to its source. Falls back to
- * the highlighted source when Pele cannot draw it.
- *
- * @param props - The {@link MermaidDiagramProps}.
- */
-export const MermaidDiagram = memo(function MermaidDiagram({
-  code,
-  streaming = false,
-  className,
-  style,
-}: MermaidDiagramProps) {
-  const labels = useChatLabels();
-  const [showSource, setShowSource] = useState(false);
-  const [failure, setFailure] = useState<Failure | null>(null);
-  const failed = !streaming && failure?.code === code ? failure : null;
-
-  const sourceToggle = (buttonClass: string) => {
-    const label = showSource ? labels.showDiagram : labels.showDiagramSource;
-    return (
-      <FrameButton
-        label={label}
-        icon={showSource ? 'i-ph-graph' : 'i-ph-code'}
-        className={buttonClass}
-        pressed={showSource}
-        onClick={() => setShowSource(!showSource)}
-      />
-    );
-  };
-
-  if (failed) {
-    const at = failed.line ? labels.diagramErrorAt(failed.line, failed.column) : '';
-    return (
-      <div className={className} style={style} data-zg-diagram="failed">
-        <HighlightedCode code={code} language="mermaid" className="mb-1" copyLabel={labels.copyDiagramSource} />
-        <p className="zg-meta m-0 mb-2 whitespace-pre-wrap">{labels.diagramError(failed.message, at)}</p>
-      </div>
-    );
-  }
-  if (showSource) {
-    return (
-      <HighlightedCode
-        code={code}
-        language="mermaid"
-        className={className}
-        style={style}
-        copyLabel={labels.copyDiagramSource}
-        actions={sourceToggle}
-      />
-    );
-  }
-  return (
-    <DiagramCanvas
-      code={code}
-      streaming={streaming}
-      className={className}
-      style={style}
-      sourceToggle={sourceToggle}
-      onFailure={setFailure}
-    />
-  );
-});
-
-/** One of the frame's controls: the class the frame hands its actions, an icon, a name. */
-function FrameButton({
-  label,
-  icon,
-  className,
-  pressed,
-  disabled,
-  onClick,
-}: {
-  label: string;
-  icon: string;
-  className: string;
-  pressed?: boolean;
-  disabled?: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={(e) => {
-        // Never toggle an enclosing disclosure.
-        e.stopPropagation();
-        onClick();
-      }}
-      {...(pressed !== undefined ? { 'aria-pressed': pressed } : {})}
-      aria-label={label}
-      title={label}
-      disabled={disabled}
-      data-active={pressed ? '' : undefined}
-      className={className}
-    >
-      <span className={`${icon} text-zg-label`} aria-hidden />
-    </button>
-  );
-}
-
-interface DiagramCanvasProps extends MermaidDiagramProps {
-  sourceToggle: (buttonClass: string) => ReactNode;
-  onFailure: (failure: Failure) => void;
-}
-
-function DiagramCanvas({ code, streaming, className, style, sourceToggle, onFailure }: DiagramCanvasProps) {
-  const labels = useChatLabels();
-  const frameRef = useRef<HTMLDivElement | null>(null);
-  const canvasRef = useRef<HTMLDivElement | null>(null);
-  const mounted = useRef<{ diagram: Mounted; options: MountOptions } | null>(null);
-  const near = useNearViewport(frameRef);
-  // Letters, digits and `-` only, as Pele's ids want: one prefix per streaming canvas.
-  const idPrefix = `zg-mmd-${useId().replace(/[^\w-]/g, '')}`;
-  const [type, setType] = useState<string | null>(null);
-  // Zoomed in past the fitting scale: the zoom-out and fit controls apply.
-  const [zoomed, setZoomed] = useState(false);
-  const lastDraw = useRef(0);
-  // The source Pele draws now: a redraw on resize files its drawing under it.
-  const codeRef = useRef(code);
-  useLayoutEffect(() => {
-    codeRef.current = code;
-  }, [code]);
-  // Until drawn, the canvas keeps the height this source (or its stream) last drew at.
-  const [reserved] = useState(() => drawingFor(code)?.height);
-
-  // Paint the drawing kept for this source before the first frame: a remount never flashes empty.
-  useLayoutEffect(() => {
-    const canvas = canvasRef.current;
-    const kept = drawingFor(code);
-    if (canvas && kept && !canvas.firstChild) {
-      canvas.innerHTML = kept.svg;
-      setType(kept.type);
-    }
-    // Only the first source: later ones are drawn by Pele.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Streaming: draw what parses so far, at most every STREAM_FRAME_MS, keeping the last drawing otherwise.
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!streaming || !near || !canvas) return undefined;
-    let cancelled = false;
-    const wait = Math.max(0, lastDraw.current + STREAM_FRAME_MS - performance.now());
-    const timer = window.setTimeout(() => {
-      void loadPele()
-        .then(async (pele) => {
-          const kind = pele.detectType(code);
-          if (!kind || !(await pele.load(kind)) || cancelled) return;
-          lastDraw.current = performance.now();
-          let result;
-          try {
-            result = pele.render(code, {
-              ...SAFE_OPTIONS,
-              ...metricsOf(canvas),
-              idPrefix,
-              maxWidth: canvas.clientWidth,
-            });
-          } catch {
-            return; // Not drawable yet: the next delta may complete it.
-          }
-          canvas.innerHTML = result.svg;
-          remember(code, { svg: result.svg, height: canvas.offsetHeight, type: result.type }, true);
-          setType(result.type);
-        })
-        .catch(() => {
-          // Pele did not load: the fence draws (or falls back) once it closes.
-        });
-    }, wait);
-    return () => {
-      cancelled = true;
-      window.clearTimeout(timer);
-    };
-  }, [streaming, near, code, idPrefix]);
-
-  // Settled: mount the diagram (layout on resize, zoom), or update it in place when the source changes.
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (streaming || !near || !canvas) return undefined;
-    let cancelled = false;
-    const current = mounted.current;
-    if (current) {
-      current.diagram.update(code, current.options);
-      return undefined;
-    }
-    void loadPele()
-      .then(async (pele) => {
-        const kind = pele.detectType(code);
-        if (kind) await pele.load(kind);
-        if (cancelled) return;
-        const options: MountOptions = {
-          ...SAFE_OPTIONS,
-          ...metricsOf(canvas),
-          // Our controls drive it (the frame's buttons); Pele's own stay off. Wheel scrolls the page; ⌘/Ctrl-wheel, pinch, drag and double-click zoom.
-          zoom: { always: true, controls: false },
-          onRender: (result) => {
-            remember(codeRef.current, { svg: result.svg, height: canvas.offsetHeight, type: result.type }, false);
-            setType(result.type);
-          },
-        };
-        const diagram = pele.mount(canvas, code, options);
-        // Nothing drawn: show the source with the reason instead of Pele's in-place message.
-        if (!diagram.result) {
-          diagram.destroy();
-          onFailure(failureOf(code, diagram.error));
-          return;
-        }
-        mounted.current = { diagram, options };
-      })
-      .catch((error: unknown) => {
-        if (!cancelled) onFailure(failureOf(code, error));
-      });
-    return () => {
-      cancelled = true;
-    };
-    // The failure callback is stable (a state setter).
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [streaming, near, code]);
-
-  // Gone: stop observing the column, drop the zoom.
-  useEffect(
-    () => () => {
-      mounted.current?.diagram.destroy();
-      mounted.current = null;
-    },
-    [],
-  );
-
-  // The chat or code font changed: measure the labels again, at the new size if that changed too.
-  useEffect(
-    () =>
-      watchTypography(() => {
-        const current = mounted.current;
-        const canvas = canvasRef.current;
-        if (!current || !canvas) return;
-        current.options = { ...current.options, ...metricsOf(canvas) };
-        current.diagram.update(code, current.options);
-      }),
-    [code],
-  );
-
-  // Pinch, ⌘-wheel, drag and double-click zoom outside our buttons: read the scale back after them.
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return undefined;
-    let frame = 0;
-    const sync = () => {
-      cancelAnimationFrame(frame);
-      frame = requestAnimationFrame(() => {
-        const zoom = mounted.current?.diagram.zoom;
-        setZoomed(Boolean(zoom && zoom.scale > zoom.fit + 1e-3));
-      });
-    };
-    const events = ['wheel', 'pointerup', 'dblclick', 'keyup', 'touchend'] as const;
-    for (const name of events) canvas.addEventListener(name, sync, { passive: true });
-    return () => {
-      cancelAnimationFrame(frame);
-      for (const name of events) canvas.removeEventListener(name, sync);
-    };
-  }, []);
-
-  const zoomBy = (factor: number) => {
-    const zoom = mounted.current?.diagram.zoom;
-    if (!zoom) return;
-    zoom.zoomBy(factor);
-    setZoomed(zoom.scale > zoom.fit + 1e-3);
-  };
-  const fit = () => {
-    mounted.current?.diagram.zoom?.reset();
-    setZoomed(false);
-  };
-  const zoomable = !streaming && type !== null;
-
-  const actions = (buttonClass: string) => (
-    <>
-      {zoomable && (
-        <>
-          <FrameButton
-            label={labels.zoomOutDiagram}
-            icon="i-ph-magnifying-glass-minus"
-            className={buttonClass}
-            disabled={!zoomed}
-            onClick={() => zoomBy(1 / ZOOM_STEP)}
-          />
-          <FrameButton
-            label={labels.zoomInDiagram}
-            icon="i-ph-magnifying-glass-plus"
-            className={buttonClass}
-            onClick={() => zoomBy(ZOOM_STEP)}
-          />
-          {zoomed && (
-            <FrameButton label={labels.fitDiagram} icon="i-ph-arrows-in" className={buttonClass} onClick={fit} />
-          )}
-        </>
-      )}
-      {sourceToggle(buttonClass)}
-    </>
-  );
-
-  return (
-    <CodeFrame
-      ref={frameRef}
-      code={code}
-      copyLabel={labels.copyDiagramSource}
-      actions={actions}
-      className={['zg-diagram my-2', className].filter(Boolean).join(' ')}
-      style={style}
-    >
-      {/* Streaming with nothing drawable yet: the source so far, in the frame the diagram will take. */}
-      {streaming && type === null ? (
-        <pre className="px-3 py-2 m-0 whitespace-pre font-mono text-[length:var(--zg-font-size-code)] leading-[1.5] text-[var(--zg-code-fg)]">
-          {code}
-        </pre>
-      ) : null}
-      {/* A group, not an img: it holds the zoomable drawing. Until drawn it keeps the height last drawn at. */}
-      <div
-        ref={canvasRef}
-        role="group"
-        aria-label={labels.diagram(type)}
-        data-zg-diagram={type ? 'drawn' : 'pending'}
-        data-zoomed={zoomed ? '' : undefined}
-        className="zg-diagram-canvas"
-        style={reserved && !type ? { minHeight: reserved } : undefined}
-      />
-    </CodeFrame>
-  );
-}

package/src/chat/transcript/PromptEcho.tsx

@@ -1,171 +0,0 @@
-import { useContext } from 'react';
-import { inferPromptRefs, splitPromptSegments, tidyPromptText, type PromptSegmentRef } from 'zidane/chat/pure';
-
-import { commandRef, urlRefs } from '../headless/badge-refs';
-import { chipForPath } from '../headless/file-chip';
-import { useChatLabels } from '../useChatLabels';
-import { BADGE_GLYPH, FileBadgeIcon, fileBadgeName, LinkBadge } from './badges';
-import { useBadgeMenu } from './BadgeMenu';
-import { ChipHover } from './ChipCard';
-import { CommandCard, SessionCard, SkillCard } from './ChipCards';
-import { MarkdownContext } from './markdown-context';
-import { PromptLines } from './prompt-lines';
-import { ReferenceChip } from './ReferenceText';
-import { useReferenceMatches } from './references';
-
-/**
- * A submitted prompt as typed: its lines as the composer lays them out
- * (`PromptLines`, the bubble keeps whitespace),
- * with the composer's badges around its references (files, skills, links,
- * and a command invocation's `/name`), so a prompt reads the same sent as
- * typed. Badges are atomic inline boxes, so wrapping leaves them whole.
- * An app's transcript `Prompt` slot.
- */
-export interface PromptEchoProps {
-  /** The prompt as sent. */
-  text: string;
-  /** What the composer marked in it (files, skills, links); inferred when absent. */
-  refs?: readonly PromptSegmentRef[];
-  /** A command invocation (`/fix conflicts now`): its command (`/fix conflicts`) is a badge. */
-  command?: boolean;
-  /**
-   * Reads a command's fixed arguments (`conflicts`), so `/fix conflicts` reads as one badge. A hook,
-   * called on every render: pass a stable one. Absent: the command name alone is the badge.
-   */
-  useCommandArgs?: (name: string | null) => ReadonlySet<string>;
-}
-
-const NO_ARGS: ReadonlySet<string> = new Set();
-const noCommandArgs = () => NO_ARGS;
-
-/**
- * A sent prompt with the composer's badges (see above).
- *
- * @param props - The {@link PromptEchoProps}.
- */
-export function PromptEcho({ text: raw, refs, command = false, useCommandArgs = noCommandArgs }: PromptEchoProps) {
-  // An event without refs (an older window's echo, an older replay) still gets its file chips.
-  const { text, refs: typed } = tidyPromptText(raw, refs && refs.length > 0 ? refs : inferPromptRefs(raw));
-  const commandName = command ? (/^\/([\w][\w:.-]*)/.exec(text)?.[1] ?? null) : null;
-  const args = useCommandArgs(commandName);
-  const name = commandName ? commandRef(text, args) : null;
-  const { cwd } = useContext(MarkdownContext);
-  // Extension references (a ticket id, an issue URL): tagged with their provider and key.
-  const references = useReferenceMatches(text, cwd, 'prompt').map((m) => ({
-    start: m.start,
-    end: m.end,
-    providerId: [m.providerId, m.key, m.placeholder ?? '', m.placeholderIcon?.gui ?? '']
-      .map((v) => `${REFERENCE_TAG}${v}`)
-      .join(''),
-  }));
-  // Overlaps resolve to the earlier ref (`splitPromptSegments`): a typed ref wins over a
-  // reference, a reference over a found link (the link badge stays its fallback).
-  const spans = [...(name ? [name] : []), ...typed, ...references, ...urlRefs(text)];
-  if (spans.length === 0) {
-    return <PromptLines items={[text]} />;
-  }
-
-  return (
-    <PromptLines
-      items={splitPromptSegments(text, spans).map((seg, idx) =>
-        // Index keys: segments are stable across renders because the upstream user-prompt event is append-only.
-        seg.kind === 'plain' ? (
-          seg.text
-        ) : (
-          <PromptBadge key={idx} text={seg.text} providerId={seg.providerId} cwd={cwd} />
-        ),
-      )}
-    />
-  );
-}
-
-/** Separates `ref`, the provider id and the key in a reference span's `providerId`. */
-const REFERENCE_TAG = '\u0000';
-
-function PromptBadge({ text, providerId, cwd }: { text: string; providerId: string; cwd: string | null }) {
-  const labels = useChatLabels();
-  const openMenu = useBadgeMenu();
-  if (providerId.startsWith(REFERENCE_TAG)) {
-    const [, id = '', key = '', placeholder = '', placeholderIcon = ''] = providerId.split(REFERENCE_TAG);
-    return (
-      <ReferenceChip
-        cwd={cwd}
-        providerId={id}
-        refKey={key}
-        text={text}
-        {...(placeholder ? { placeholder } : {})}
-        {...(placeholderIcon ? { placeholderIcon: { gui: placeholderIcon } } : {})}
-        fallback={/^https?:\/\//.test(text) ? <LinkBadge url={text} cwd={cwd} /> : <span>{text}</span>}
-      />
-    );
-  }
-  switch (providerId) {
-    case 'files': {
-      /*
-       * Sent as `@<full/path>` so the agent has the canonical reference;
-       * shown as the name, with the path on hover (the full path drowns a
-       * bubble, and the badge's role here is "what file").
-       */
-      const chip = chipForPath(text.replace(/^@/, ''));
-      const abs = chip.path.startsWith('/') ? chip.path : cwd ? `${cwd.replace(/\/$/, '')}/${chip.path}` : null;
-      return (
-        <span
-          className="zg-badge"
-          data-kind="file"
-          title={chip.path}
-          onContextMenu={
-            openMenu
-              ? (e) => openMenu(e, { kind: 'file', text: fileBadgeName(chip), ...(abs ? { href: abs } : {}) }, cwd)
-              : undefined
-          }
-        >
-          <FileBadgeIcon chip={chip} />
-          <span className="zg-badge-code">{fileBadgeName(chip)}</span>
-        </span>
-      );
-    }
-    case 'urls':
-      return <LinkBadge url={text} cwd={cwd} />;
-    case 'skills':
-      return (
-        <ChipHover
-          ariaLabel={labels.chipSkill(text)}
-          trigger={(props) => (
-            <span {...props} className={`zg-badge ${BADGE_GLYPH.skill}`} data-kind="skill">
-              {text}
-            </span>
-          )}
-        >
-          <SkillCard cwd={cwd} text={text} />
-        </ChipHover>
-      );
-    case 'commands':
-      return (
-        <ChipHover
-          ariaLabel={labels.chipCommand(text)}
-          trigger={(props) => (
-            <span {...props} className={`zg-badge ${BADGE_GLYPH.command}`} data-kind="command">
-              {text}
-            </span>
-          )}
-        >
-          <CommandCard cwd={cwd} text={text} />
-        </ChipHover>
-      );
-    case 'chats':
-      return (
-        <ChipHover
-          ariaLabel={labels.chipChat(text)}
-          trigger={(props) => (
-            <span {...props} className={`zg-badge ${BADGE_GLYPH.chat}`} data-kind="chat">
-              {text}
-            </span>
-          )}
-        >
-          <SessionCard token={text} />
-        </ChipHover>
-      );
-    default:
-      return <span className="zg-badge">{text}</span>;
-  }
-}

package/src/chat/transcript/PromptOriginLabel.tsx

@@ -1,44 +0,0 @@
-/**
- * The dim sender line above a prompt that came through a channel or an
- * event (`Alice · slack`, `via slack`, `orchestration`), as the TUI shows it.
- */
-import type { CSSProperties } from 'react';
-
-import { useLabels } from '../../labels';
-import {
-  PROMPT_ORIGIN_LABELS,
-  type PromptOrigin,
-  type PromptOriginLabels,
-  promptOriginLabel,
-} from '../headless/prompt-origin';
-
-/** Props for {@link PromptOriginLabel}. */
-export interface PromptOriginLabelProps {
-  /** The prompt's origin. */
-  origin: PromptOrigin;
-  /** Starts the label past the row's dot, in line with the bubble. Set when the transcript draws row icons. */
-  indent: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-}
-
-/**
- * One line of metadata naming who sent the prompt below it.
- *
- * @param props - The `origin`, and whether to `indent` past the dot.
- */
-export function PromptOriginLabel({ origin, indent, className, style }: PromptOriginLabelProps) {
-  const overrides = useLabels() as Partial<PromptOriginLabels>;
-  const text = promptOriginLabel(origin, { ...PROMPT_ORIGIN_LABELS, ...overrides });
-  return (
-    <div
-      data-prompt-origin=""
-      className={['zg-meta truncate mb-1', indent ? 'pl-7' : '', className].filter(Boolean).join(' ')}
-      style={style}
-    >
-      {text}
-    </div>
-  );
-}