@alfadocs/ui-kit 0.1.7 → 0.1.9

package/dist/_chunks/transcript-panel.agent-BXEYP6w-.js

@@ -0,0 +1,337 @@
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { forwardRef as $, useState as E, useRef as S, useId as K, useMemo as I, useCallback as C, useLayoutEffect as A, useImperativeHandle as _, Fragment as j } from "react";
+import { c as O } from "./index-D2ZczOXr.js";
+import { useTranslation as V } from "react-i18next";
+import { u as D } from "./index-CJE9uQmb.js";
+import { S as F } from "./search-input-Xw3cdWXW.js";
+const H = O(
+  [
+    "ds:flex ds:flex-col ds:w-full ds:min-h-0",
+    "ds:rounded-[var(--radius-md)] ds:border ds:border-border",
+    "ds:bg-background",
+    "ds:focus-within:border-[color:var(--primary)]"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:text-[length:var(--font-size-sm)]",
+        md: "ds:text-[length:var(--font-size-base)]",
+        lg: "ds:text-[length:var(--font-size-lg)]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), q = 100, B = 8;
+function z(t, n) {
+  const a = Math.max(0, Math.floor(t)), i = Math.floor(a / 60), u = a % 60, p = (v) => new Intl.NumberFormat(n, { minimumIntegerDigits: 2 }).format(v);
+  return `${p(i)}:${p(u)}`;
+}
+function U(t) {
+  const n = Math.max(0, Math.floor(t)), a = Math.floor(n / 60), i = n % 60;
+  return `PT${a}M${i}S`;
+}
+function G(t) {
+  let n = 0;
+  for (let a = 0; a < t.length; a += 1)
+    n = n * 31 + t.charCodeAt(a) | 0;
+  return Math.abs(n) % B;
+}
+const Q = [
+  "ds:bg-[color:var(--transcript-speaker-1)]",
+  "ds:bg-[color:var(--transcript-speaker-2)]",
+  "ds:bg-[color:var(--transcript-speaker-3)]",
+  "ds:bg-[color:var(--transcript-speaker-4)]",
+  "ds:bg-[color:var(--transcript-speaker-5)]",
+  "ds:bg-[color:var(--transcript-speaker-6)]",
+  "ds:bg-[color:var(--transcript-speaker-7)]",
+  "ds:bg-[color:var(--transcript-speaker-8)]"
+];
+function Y(t) {
+  return t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function Z({ text: t, query: n }) {
+  if (!n) return t;
+  const a = Y(n);
+  return t.split(new RegExp(`(${a})`, "gi")).map(
+    (u, p) => u.toLocaleLowerCase() === n.toLocaleLowerCase() ? /* @__PURE__ */ o(
+      "mark",
+      {
+        className: "ds:bg-[color:var(--warning)]/30 ds:text-[color:var(--foreground)] ds:rounded-[var(--radius-sm)]",
+        children: u
+      },
+      p
+    ) : /* @__PURE__ */ o(j, { children: u }, p)
+  );
+}
+const J = $(
+  ({
+    lines: t,
+    currentTime: n = 0,
+    onSeek: a,
+    searchable: i = !0,
+    size: u = "md",
+    className: p,
+    ...v
+  }, L) => {
+    const { t: d, i18n: b } = V(), [m, M] = E(""), h = S(null), x = S(null), R = K(), c = I(() => {
+      if (!Number.isFinite(n)) return -1;
+      for (let e = 0; e < t.length; e += 1) {
+        const r = t[e];
+        if (r.start <= n && n < r.end) return e;
+      }
+      return -1;
+    }, [t, n]), w = I(() => {
+      if (!m) return 0;
+      let e = 0;
+      const r = m.toLocaleLowerCase();
+      for (const s of t) {
+        const l = s.text.toLocaleLowerCase();
+        let g = l.indexOf(r);
+        for (; g !== -1; )
+          e += 1, g = l.indexOf(r, g + r.length);
+      }
+      return e;
+    }, [t, m]), P = C(
+      (e) => {
+        var r;
+        (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "f" && i && (e.preventDefault(), (r = x.current) == null || r.focus());
+      },
+      [i]
+    ), T = t.length > q, y = D({
+      count: T ? t.length : 0,
+      getScrollElement: () => h.current,
+      estimateSize: () => 48,
+      overscan: 8,
+      getItemKey: (e) => e
+    });
+    A(() => {
+      if (c < 0) return;
+      const e = h.current;
+      if (!e) return;
+      const r = e.querySelector(
+        `[data-line-index="${c}"]`
+      );
+      if (!r) return;
+      const s = typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      r.scrollIntoView({
+        block: "center",
+        behavior: s ? "auto" : "smooth"
+      });
+    }, [c]);
+    const k = C(
+      (e, r, s) => {
+        const l = r === c, g = G(e.speaker), N = typeof e.confidence == "number" && e.confidence < 0.6;
+        return /* @__PURE__ */ f(
+          "li",
+          {
+            ref: s == null ? void 0 : s.liRef,
+            "data-line-index": r,
+            "data-turn-id": String(r),
+            "data-index": s == null ? void 0 : s.dataIndex,
+            "aria-current": l ? "true" : void 0,
+            style: s == null ? void 0 : s.style,
+            className: [
+              "ds:flex ds:items-start ds:gap-[var(--spacing-sm)]",
+              "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]",
+              l ? "ds:bg-[color:var(--accent)]/12 ds:border-s-[3px] ds:border-[color:var(--primary)]" : "ds:border-s-[3px] ds:border-transparent",
+              s != null && s.absolutePositioning ? "ds:absolute ds:start-0 ds:end-0 ds:top-0 ds:w-full" : ""
+            ].filter(Boolean).join(" "),
+            children: [
+              /* @__PURE__ */ o(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => a == null ? void 0 : a(e.start),
+                  "aria-label": d("ui.chat.transcript.seekTo", {
+                    time: z(e.start, b.language)
+                  }),
+                  className: [
+                    "ds:inline-flex ds:items-center ds:justify-center",
+                    "ds:font-[family-name:var(--font-mono)]",
+                    "type-meta",
+                    "ds:tabular-nums",
+                    "ds:text-[color:var(--muted-foreground)]",
+                    "ds:rounded-[var(--radius-sm)]",
+                    "ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)] ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]",
+                    // WCAG 2.5.5 target size: 44×44 default, 48×48 in accessible
+                    // themes — matches the DS `--min-target-size` token.
+                    "ds:min-h-[var(--min-target-size)] ds:min-w-[var(--min-target-size)]",
+                    "ds:hover:bg-muted/20",
+                    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+                    "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+                    "ds:forced-colors:focus-visible:outline-[CanvasText]"
+                  ].join(" "),
+                  children: /* @__PURE__ */ o("time", { dir: "ltr", dateTime: U(e.start), children: z(e.start, b.language) })
+                }
+              ),
+              /* @__PURE__ */ f("div", { className: "ds:flex-1 ds:min-w-0", children: [
+                /* @__PURE__ */ f("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+                  /* @__PURE__ */ o(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: `ds:inline-block ds:size-2 ds:rounded-[var(--radius-full)] ${Q[g]}`
+                    }
+                  ),
+                  /* @__PURE__ */ o("strong", { className: "type-title-item", children: d("ui.chat.transcript.speaker", { name: e.speaker }) }),
+                  N ? /* @__PURE__ */ f("span", { className: "type-meta ds:italic ds:text-[color:var(--muted-foreground)]", children: [
+                    "(",
+                    d("ui.chat.transcript.lowConfidence"),
+                    ")"
+                  ] }) : null
+                ] }),
+                /* @__PURE__ */ o(
+                  "span",
+                  {
+                    dir: "auto",
+                    className: [
+                      "ds:block",
+                      N ? "ds:underline ds:decoration-dotted ds:decoration-[color:var(--muted-foreground)]" : ""
+                    ].join(" "),
+                    children: /* @__PURE__ */ o(Z, { text: e.text, query: m })
+                  }
+                )
+              ] })
+            ]
+          },
+          r
+        );
+      },
+      [c, b.language, a, m, d]
+    );
+    return _(
+      L,
+      () => ({
+        getSelectedTurn: () => c >= 0 ? String(c) : null,
+        focusTurn: (e) => {
+          var l;
+          const r = (l = h.current) == null ? void 0 : l.querySelector(
+            `[data-turn-id="${e}"]`
+          );
+          if (!r) return;
+          r.scrollIntoView({ block: "center", behavior: "auto" });
+          const s = r.querySelector("button");
+          s == null || s.focus();
+        },
+        copyTurn: (e) => {
+          const r = Number.parseInt(e, 10);
+          if (!Number.isFinite(r)) return;
+          const s = t[r];
+          if (s && typeof navigator < "u" && navigator.clipboard)
+            return navigator.clipboard.writeText(s.text);
+        }
+      }),
+      [c, t]
+    ), /* @__PURE__ */ f(
+      "div",
+      {
+        onKeyDown: P,
+        "data-component": "transcript-panel",
+        "data-component-id": v.id,
+        className: H({ size: u, className: p }),
+        ...v,
+        children: [
+          i ? /* @__PURE__ */ f("div", { className: "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-xs)] ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:border-b ds:border-border", children: [
+            /* @__PURE__ */ o(
+              F,
+              {
+                ref: x,
+                id: R,
+                placeholder: d("ui.chat.transcript.search"),
+                "aria-label": d("ui.chat.transcript.search"),
+                "aria-keyshortcuts": "Meta+F Control+F",
+                debounceMs: 150,
+                onChange: (e) => M(e),
+                size: "sm"
+              }
+            ),
+            m ? /* @__PURE__ */ o(
+              "span",
+              {
+                role: "status",
+                "aria-live": "polite",
+                className: "type-meta ds:text-[color:var(--muted-foreground)] ds:tabular-nums",
+                children: w === 0 ? d("ui.chat.transcript.noMatches") : d("ui.chat.transcript.matchCount", { count: w })
+              }
+            ) : null
+          ] }) : null,
+          /* @__PURE__ */ o(
+            "div",
+            {
+              ref: h,
+              className: "ds:flex-1 ds:min-h-0 ds:overflow-y-auto ds:overflow-x-hidden",
+              children: T ? /* @__PURE__ */ o(
+                "ol",
+                {
+                  className: "ds:relative ds:list-none ds:ps-0 ds:m-0",
+                  style: { blockSize: `${y.getTotalSize()}px` },
+                  children: y.getVirtualItems().map((e) => {
+                    const r = t[e.index];
+                    return r ? k(r, e.index, {
+                      liRef: y.measureElement,
+                      dataIndex: e.index,
+                      style: { transform: `translateY(${e.start}px)` },
+                      absolutePositioning: !0
+                    }) : null;
+                  })
+                }
+              ) : /* @__PURE__ */ o("ol", { className: "ds:list-none ds:ps-0 ds:m-0", children: t.map((e, r) => k(e, r)) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+J.displayName = "TranscriptPanel";
+const ne = {
+  id: "transcript-panel",
+  capabilities: ["select_single"],
+  state: {
+    selectedTurn: {
+      type: "string | null",
+      descriptionKey: "ui.agent.transcriptPanel.state.selectedTurn",
+      description: "Opaque id (line index) of the currently-active turn, or null when none is active.",
+      read: (t) => t.getSelectedTurn()
+    }
+  },
+  actions: {
+    focus_turn: {
+      safety: "read",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.agent.transcriptPanel.actions.focusTurn",
+      description: "Scroll the given turn into view and focus its seek button.",
+      invoke: (t, n) => {
+        t.focusTurn(n.id);
+      }
+    },
+    copy_turn: {
+      safety: "read",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.agent.transcriptPanel.actions.copyTurn",
+      description: "Copy the given turn's text to the clipboard.",
+      invoke: (t, n) => t.copyTurn(n.id)
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "transcript-panel",
+      description: "Marks the TranscriptPanel wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-turn-id",
+      description: "Stable opaque turn id (line index). Never carries the turn's dictated text."
+    }
+  }
+};
+export {
+  J as T,
+  ne as t
+};
+//# sourceMappingURL=transcript-panel.agent-BXEYP6w-.js.map