@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/audio-recorder.agent--VKeykUp.js

@@ -0,0 +1,458 @@
+import { jsxs as b, jsx as s, Fragment as ie } from "react/jsx-runtime";
+import { forwardRef as re, useReducer as se, useState as x, useRef as m, useEffect as D, useCallback as h, useImperativeHandle as ae } from "react";
+import { c as ne } from "./index-D2ZczOXr.js";
+import { useTranslation as de } from "react-i18next";
+import { B as X } from "./button-7mLWcMp_.js";
+import { I as N } from "./icon-button-Wnnde5lc.js";
+import { S as ce } from "./select-DY1Cb2Tg.js";
+import { A as oe } from "./audio-visualiser-CeMPCZkd.js";
+import { A as j } from "./alert-BlOUMkXj.js";
+import { c as P } from "./createLucideIcon-CrFbzy84.js";
+import { S as ue } from "./square-CZoGU14v.js";
+import { X as pe } from "./x-CCcI3eJp.js";
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const le = [
+  ["path", { d: "M12 19v3", key: "npa21l" }],
+  ["path", { d: "M19 10v2a7 7 0 0 1-14 0v-2", key: "1vc78b" }],
+  ["rect", { x: "9", y: "2", width: "6", height: "13", rx: "3", key: "s6n7sd" }]
+], me = P("mic", le);
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const fe = [
+  ["rect", { x: "14", y: "3", width: "5", height: "18", rx: "1", key: "kaeet6" }],
+  ["rect", { x: "5", y: "3", width: "5", height: "18", rx: "1", key: "1wsw3u" }]
+], ge = P("pause", fe);
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const he = [
+  [
+    "path",
+    {
+      d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",
+      key: "10ikf1"
+    }
+  ]
+], ve = P("play", he);
+function ye(i, u) {
+  switch (u.type) {
+    case "request":
+      return { kind: "requesting" };
+    case "start":
+      return { kind: "recording", startedAt: Date.now(), pausedMs: 0 };
+    case "pause":
+      return i.kind !== "recording" ? i : {
+        kind: "paused",
+        startedAt: i.startedAt,
+        pausedMs: i.pausedMs,
+        pausedAt: Date.now()
+      };
+    case "resume":
+      return i.kind !== "paused" ? i : {
+        kind: "recording",
+        startedAt: i.startedAt,
+        pausedMs: i.pausedMs + (Date.now() - i.pausedAt)
+      };
+    case "stop":
+      return { kind: "stopped", duration: u.duration };
+    case "cancel":
+      return { kind: "idle" };
+    case "error":
+      return { kind: "error", type: u.kind };
+    case "reset":
+      return { kind: "idle" };
+    default:
+      return i;
+  }
+}
+const ke = ne(
+  [
+    "ds:inline-flex ds:flex-col ds:items-stretch ds:gap-[var(--spacing-sm)]",
+    "ds:rounded-[var(--radius-md)] ds:border ds:border-border",
+    "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]",
+    "ds:bg-background"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "",
+        md: "",
+        lg: ""
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), be = [
+  "audio/webm;codecs=opus",
+  "audio/webm",
+  "audio/mp4",
+  "audio/ogg;codecs=opus"
+];
+function we() {
+  if (!(typeof MediaRecorder > "u")) {
+    for (const i of be)
+      if (MediaRecorder.isTypeSupported(i)) return i;
+  }
+}
+function Re(i, u) {
+  const l = Math.max(0, Math.floor(i / 1e3)), r = Math.floor(l / 60), f = l % 60, v = (S) => new Intl.NumberFormat(u, { minimumIntegerDigits: 2 }).format(S);
+  return `${v(r)}:${v(f)}`;
+}
+const Ae = re(
+  ({
+    size: i = "md",
+    onRecordingComplete: u,
+    onCancel: l,
+    onError: r,
+    maxDurationMs: f = 1800 * 1e3,
+    maxBytes: v = 250 * 1024 * 1024,
+    className: S,
+    ...F
+  }, G) => {
+    const { t: d, i18n: J } = de(), [t, p] = se(ye, { kind: "idle" }), [I, z] = x(null), [Q, W] = x(Date.now()), [Y, Z] = x([]), [w, E] = x(""), c = m(null), y = m([]), T = m(0), V = m(0), g = m(null), $ = m(!1), R = m(!1), k = typeof MediaRecorder < "u";
+    D(() => {
+      var e;
+      !k || !((e = navigator.mediaDevices) != null && e.enumerateDevices) || navigator.mediaDevices.enumerateDevices().then((a) => {
+        const o = a.filter((n) => n.kind === "audioinput");
+        Z(o);
+      }).catch(() => {
+      });
+    }, [k]), D(() => {
+      if (t.kind !== "recording") return;
+      const e = window.setInterval(() => W(Date.now()), 250);
+      return () => window.clearInterval(e);
+    }, [t.kind]);
+    const B = h(() => {
+      const e = g.current ?? I;
+      e == null || e.getTracks().forEach((a) => a.stop()), g.current = null, z(null);
+    }, [I]), A = h(async () => {
+      if (!k) {
+        p({ type: "error", kind: "unsupported" }), r == null || r("unsupported");
+        return;
+      }
+      p({ type: "request" }), R.current = !1;
+      try {
+        const e = await navigator.mediaDevices.getUserMedia({
+          audio: w ? { deviceId: { exact: w } } : !0
+        });
+        if ($.current) {
+          e.getTracks().forEach((n) => n.stop());
+          return;
+        }
+        g.current = e, z(e);
+        const a = we(), o = new MediaRecorder(
+          e,
+          a ? { mimeType: a } : void 0
+        );
+        c.current = o, y.current = [], T.current = 0, o.ondataavailable = (n) => {
+          var U;
+          if (n.data && n.data.size > 0 && (y.current.push(n.data), T.current += n.data.size, typeof v == "number" && T.current >= v && ((U = c.current) == null ? void 0 : U.state) === "recording")) {
+            r == null || r("max-size");
+            try {
+              c.current.stop();
+            } catch {
+            }
+          }
+        }, o.onstop = () => {
+          if (!R.current) {
+            const n = new Blob(y.current, {
+              type: a ?? "audio/webm"
+            });
+            u == null || u(n, V.current);
+          }
+          y.current = [], c.current = null, e.getTracks().forEach((n) => n.stop()), g.current = null, z(null), R.current = !1;
+        }, o.start(1e3), p({ type: "start" });
+      } catch (e) {
+        const a = e instanceof Error ? e.name : "";
+        a === "NotAllowedError" || a === "SecurityError" ? (p({ type: "error", kind: "permission-denied" }), r == null || r("permission-denied")) : a === "NotFoundError" || a === "OverconstrainedError" ? (p({ type: "error", kind: "no-device" }), r == null || r("no-device")) : (p({ type: "error", kind: "capture-failed" }), r == null || r("capture-failed"));
+      }
+    }, [r, u, w, k]), ee = h(() => {
+      var e;
+      (e = c.current) == null || e.pause(), p({ type: "pause" });
+    }, []), te = h(() => {
+      var e;
+      (e = c.current) == null || e.resume(), p({ type: "resume" });
+    }, []), _ = h(() => {
+      var e;
+      if (t.kind === "recording" || t.kind === "paused") {
+        const a = t.startedAt, o = t.pausedMs, n = Date.now() - a - o;
+        V.current = Math.max(0, n), p({ type: "stop", duration: n });
+      }
+      try {
+        (e = c.current) == null || e.stop();
+      } catch {
+      }
+    }, [t]), q = h(() => {
+      var e;
+      R.current = !0;
+      try {
+        (e = c.current) == null || e.stop();
+      } catch {
+      }
+      y.current = [], c.current = null, B(), p({ type: "cancel" }), l == null || l();
+    }, [B, l]);
+    D(() => {
+      if (t.kind !== "recording" || typeof f != "number" || f <= 0) return;
+      const e = Date.now() - t.startedAt - t.pausedMs, a = Math.max(0, f - e), o = window.setTimeout(() => {
+        var n;
+        if (((n = c.current) == null ? void 0 : n.state) === "recording") {
+          r == null || r("max-duration");
+          try {
+            c.current.stop();
+          } catch {
+          }
+        }
+      }, a);
+      return () => window.clearTimeout(o);
+    }, [t, f, r]), D(() => () => {
+      var e, a;
+      $.current = !0;
+      try {
+        (e = c.current) == null || e.stop();
+      } catch {
+      }
+      (a = g.current) == null || a.getTracks().forEach((o) => o.stop()), g.current = null;
+    }, []);
+    const K = t.kind === "recording" ? Q - t.startedAt - t.pausedMs : t.kind === "paused" ? t.pausedAt - t.startedAt - t.pausedMs : t.kind === "stopped" ? t.duration : 0;
+    ae(
+      G,
+      () => ({
+        isRecording: () => t.kind === "recording",
+        getDuration: () => K,
+        hasRecording: () => t.kind === "stopped",
+        startRecording: () => A(),
+        stopRecording: () => _(),
+        discard: () => q()
+      }),
+      [t, K, A, _, q]
+    );
+    const C = Y.map((e) => ({
+      value: e.deviceId,
+      label: e.label || d("ui.chat.audio.selectDevice")
+    })), H = (() => {
+      switch (t.kind) {
+        case "idle":
+          return d("ui.chat.audio.idle");
+        case "requesting":
+          return d("ui.common.loading");
+        case "recording":
+          return d("ui.chat.audio.recording");
+        case "paused":
+          return d("ui.chat.audio.paused");
+        case "stopped":
+          return d("ui.chat.audio.idle");
+        case "error":
+          return t.type === "permission-denied" ? d("ui.chat.audio.permissionDenied") : t.type === "unsupported" ? d("ui.chat.audio.unsupported") : d("ui.chat.audio.idle");
+      }
+    })(), M = t.kind === "recording", O = t.kind === "paused", L = t.kind === "error";
+    return /* @__PURE__ */ b(
+      "div",
+      {
+        "data-component": "audio-recorder",
+        "data-component-id": F.id,
+        className: ke({ size: i, className: S }),
+        ...F,
+        children: [
+          /* @__PURE__ */ b("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+            /* @__PURE__ */ s(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: [
+                  "ds:relative ds:inline-flex ds:size-3 ds:items-center ds:justify-center ds:rounded-[var(--radius-full)]",
+                  M ? "ds:bg-[color:var(--destructive)]" : "ds:bg-[color:var(--muted)]"
+                ].join(" "),
+                children: M ? /* @__PURE__ */ s(
+                  "span",
+                  {
+                    className: [
+                      "ds:absolute ds:inset-0 ds:rounded-[var(--radius-full)]",
+                      "ds:bg-[color:var(--destructive)]",
+                      "ds:motion-safe:animate-[recorder-pulse_1.2s_ease-out_infinite]",
+                      "ds:[.theme-accessible_&]:animate-none"
+                    ].join(" ")
+                  }
+                ) : null
+              }
+            ),
+            /* @__PURE__ */ s(
+              oe,
+              {
+                stream: I,
+                size: "sm",
+                "aria-hidden": "true",
+                className: "ds:flex-1"
+              }
+            ),
+            /* @__PURE__ */ s(
+              "time",
+              {
+                dir: "ltr",
+                "aria-hidden": "true",
+                className: "ds:tabular-nums type-meta ds:text-[color:var(--muted-foreground)]",
+                children: Re(K, J.language)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ s("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: H }),
+          /* @__PURE__ */ b("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+            t.kind === "idle" || t.kind === "stopped" || L ? /* @__PURE__ */ s(
+              X,
+              {
+                intent: "primary",
+                size: "sm",
+                startIcon: /* @__PURE__ */ s(me, {}),
+                onClick: A,
+                disabled: !k,
+                children: d("ui.chat.audio.record")
+              }
+            ) : null,
+            M ? /* @__PURE__ */ s(
+              N,
+              {
+                icon: /* @__PURE__ */ s(ge, {}),
+                "aria-label": d("ui.chat.audio.pause"),
+                intent: "secondary",
+                size: "sm",
+                onClick: ee
+              }
+            ) : null,
+            O ? /* @__PURE__ */ s(
+              N,
+              {
+                icon: /* @__PURE__ */ s(ve, {}),
+                "aria-label": d("ui.chat.audio.resume"),
+                intent: "secondary",
+                size: "sm",
+                onClick: te
+              }
+            ) : null,
+            M || O ? /* @__PURE__ */ b(ie, { children: [
+              /* @__PURE__ */ s(
+                N,
+                {
+                  icon: /* @__PURE__ */ s(ue, {}),
+                  "aria-label": d("ui.chat.audio.stop"),
+                  intent: "primary",
+                  size: "sm",
+                  onClick: _
+                }
+              ),
+              /* @__PURE__ */ s(
+                N,
+                {
+                  icon: /* @__PURE__ */ s(pe, {}),
+                  "aria-label": d("ui.chat.audio.cancel"),
+                  intent: "ghost",
+                  size: "sm",
+                  onClick: q
+                }
+              )
+            ] }) : null,
+            t.kind === "idle" && C.length > 1 ? /* @__PURE__ */ s("div", { className: "ds:ms-auto ds:min-w-[160px]", children: /* @__PURE__ */ s(
+              ce,
+              {
+                "aria-label": d("ui.chat.audio.selectDevice"),
+                options: C,
+                value: w,
+                onValueChange: (e) => E(e),
+                size: "sm",
+                clearable: !0
+              }
+            ) }) : null
+          ] }),
+          L && t.kind === "error" ? /* @__PURE__ */ b(j, { variant: "error", live: "polite", children: [
+            /* @__PURE__ */ s(j.Description, { children: H }),
+            t.type === "permission-denied" ? /* @__PURE__ */ s(j.Action, { children: /* @__PURE__ */ s(X, { intent: "ghost", size: "sm", onClick: A, children: d("ui.chat.audio.retry") }) }) : null
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+Ae.displayName = "AudioRecorder";
+const Pe = {
+  id: "audio-recorder",
+  capabilities: ["submit"],
+  state: {
+    isRecording: {
+      type: "boolean",
+      descriptionKey: "ui.agent.audioRecorder.state.isRecording",
+      description: "True while actively capturing audio (not paused).",
+      read: (i) => i.isRecording()
+    },
+    duration: {
+      type: "number",
+      descriptionKey: "ui.agent.audioRecorder.state.duration",
+      description: "Elapsed recording time in milliseconds (paused time excluded).",
+      read: (i) => i.getDuration()
+    },
+    hasRecording: {
+      type: "boolean",
+      descriptionKey: "ui.agent.audioRecorder.state.hasRecording",
+      description: "True when a completed recording is available for submission.",
+      read: (i) => i.hasRecording()
+    }
+  },
+  actions: {
+    start_recording: {
+      safety: "write",
+      descriptionKey: "ui.agent.audioRecorder.actions.startRecording",
+      description: "Request microphone permission and begin recording.",
+      invoke: (i) => i.startRecording()
+    },
+    stop_recording: {
+      safety: "write",
+      descriptionKey: "ui.agent.audioRecorder.actions.stopRecording",
+      description: "Stop the current recording and finalise the blob.",
+      invoke: (i) => {
+        i.stopRecording();
+      }
+    },
+    discard: {
+      safety: "destructive",
+      descriptionKey: "ui.agent.audioRecorder.actions.discard",
+      description: "Cancel the recording. Irreversible — the captured audio is dropped.",
+      invoke: (i) => {
+        i.discard();
+      }
+    },
+    submit: {
+      safety: "write",
+      descriptionKey: "ui.agent.audioRecorder.actions.submit",
+      description: "Stop the active recording, finalising it via onRecordingComplete.",
+      invoke: (i) => {
+        i.stopRecording();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "audio-recorder",
+      description: "Marks the AudioRecorder wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+};
+export {
+  Ae as A,
+  Pe as a
+};
+//# sourceMappingURL=audio-recorder.agent--VKeykUp.js.map