@epicbagel/saas-kit 0.0.0-stage → 1.0.0

package/dist/primitives/voice-dictation-button.js

@@ -0,0 +1,244 @@
+"use client";
+"use client";
+import {
+  Button
+} from "../chunk-HQRWRRZJ.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/voice-dictation-button.tsx
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Mic, X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function VoiceDictationButton({
+  onCommit,
+  onCancel,
+  title = "Dictate your message",
+  caption = "listening",
+  lang = "en-US",
+  continuous = true,
+  className,
+  size = "sm",
+  showLabel = false,
+  children,
+  disabled = false,
+  visibility = "visible",
+  shrink = true
+}) {
+  const [supported, setSupported] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [transcript, setTranscript] = useState("");
+  const [interim, setInterim] = useState("");
+  const [errored, setErrored] = useState(false);
+  const recognitionRef = useRef(null);
+  useEffect(() => {
+    const w = window;
+    const Ctor = w.SpeechRecognition ?? w.webkitSpeechRecognition;
+    setSupported(typeof Ctor === "function");
+  }, []);
+  const stop = useCallback(() => {
+    recognitionRef.current?.stop();
+    recognitionRef.current = null;
+  }, []);
+  const startRecognition = useCallback(() => {
+    const w = window;
+    const Ctor = w.SpeechRecognition ?? w.webkitSpeechRecognition;
+    if (!Ctor) return;
+    const rec = new Ctor();
+    rec.continuous = continuous;
+    rec.interimResults = true;
+    rec.lang = lang;
+    rec.onresult = (event) => {
+      let finalChunk = "";
+      let interimChunk = "";
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        const r = event.results[i];
+        if (!r) continue;
+        if (r.isFinal) finalChunk += r[0].transcript;
+        else interimChunk += r[0].transcript;
+      }
+      if (finalChunk) {
+        setTranscript((prev) => prev ? prev + " " + finalChunk : finalChunk);
+        setInterim("");
+      } else if (interimChunk) {
+        setInterim(interimChunk);
+      }
+    };
+    rec.onerror = () => {
+      setErrored(true);
+    };
+    rec.onend = () => {
+      recognitionRef.current = null;
+    };
+    recognitionRef.current = rec;
+    setErrored(false);
+    rec.start();
+  }, [continuous, lang]);
+  const openOverlay = useCallback(() => {
+    setTranscript("");
+    setInterim("");
+    setOpen(true);
+    startRecognition();
+  }, [startRecognition]);
+  const closeOverlay = useCallback(() => {
+    stop();
+    setOpen(false);
+    setInterim("");
+  }, [stop]);
+  const handleDone = useCallback(() => {
+    const final = `${transcript} ${interim}`.trim();
+    closeOverlay();
+    if (final) onCommit(final);
+    else onCancel?.();
+  }, [transcript, interim, onCommit, onCancel, closeOverlay]);
+  const handleCancel = useCallback(() => {
+    closeOverlay();
+    onCancel?.();
+  }, [closeOverlay, onCancel]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Enter" && !e.shiftKey) handleDone();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, handleDone]);
+  useEffect(() => {
+    return () => {
+      recognitionRef.current?.abort();
+    };
+  }, []);
+  if (!supported) return null;
+  const displayTranscript = `${transcript}${interim ? (transcript ? " " : "") + interim : ""}`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: openOverlay,
+        disabled,
+        "aria-label": "Start dictation",
+        className: cn(visibility === "hidden" && "hidden", className),
+        children
+      }
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        onClick: openOverlay,
+        disabled,
+        variant: "outline",
+        size,
+        "aria-label": "Start dictation",
+        className: cn("transition-colors", visibility === "hidden" && "hidden", !shrink && "shrink-0", className),
+        children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsx(Mic, { className: "h-4 w-4" }),
+          showLabel && /* @__PURE__ */ jsx("span", { children: "Speak" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Root,
+      {
+        open,
+        onOpenChange: (next) => {
+          if (!next) closeOverlay();
+        },
+        children: /* @__PURE__ */ jsx(DialogPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+          DialogPrimitive.Content,
+          {
+            "aria-label": "Voice dictation",
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            onMouseDown: (e) => {
+              if (e.target === e.currentTarget) handleCancel();
+            },
+            className: "fixed inset-0 z-[200] flex flex-col bg-background outline-hidden md:items-center md:justify-center md:bg-black/40 md:backdrop-blur-sm",
+            children: [
+              /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: "Voice dictation" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 md:flex-initial w-full md:max-w-lg md:rounded-xl bg-background flex flex-col md:max-h-[80vh] md:shadow-2xl md:border md:border-border", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border md:rounded-t-xl", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-mono text-xs uppercase tracking-wider text-muted-foreground", children: caption }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleCancel,
+                      "aria-label": "Cancel",
+                      className: "p-1 -m-1 rounded-sm hover:bg-muted/60 transition-colors",
+                      children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center px-6 text-center", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "relative w-24 h-24 mb-10 flex items-center justify-center", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        className: cn(
+                          "absolute inset-0 rounded-full",
+                          errored ? "bg-destructive/20" : "bg-destructive/20 animate-ping"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        className: cn(
+                          "absolute inset-2 rounded-full",
+                          errored ? "bg-destructive/40" : "bg-destructive/40"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Mic, { className: "relative h-9 w-9 text-destructive-foreground" })
+                  ] }),
+                  title && /* @__PURE__ */ jsx("div", { className: "text-base font-medium text-muted-foreground mb-3", children: title }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xl md:text-2xl leading-relaxed min-h-[5rem] max-w-xl text-foreground", children: displayTranscript ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { children: transcript }),
+                    interim && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                      transcript ? " " : "",
+                      interim
+                    ] })
+                  ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground italic text-base", children: "Start speaking \u2014 I'm listening." }) }),
+                  errored && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive mt-4", children: "Couldn't access the microphone. Check permissions." })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "border-t border-border px-4 py-4 pb-[calc(1rem+env(safe-area-inset-bottom))] md:pb-4 md:rounded-b-xl flex flex-col items-stretch gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "lg",
+                      className: "h-12 w-full",
+                      onClick: handleDone,
+                      disabled: !displayTranscript.trim(),
+                      children: "Done"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleCancel,
+                      className: "text-sm text-muted-foreground hover:text-foreground py-1",
+                      children: "Cancel"
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        ) })
+      }
+    )
+  ] });
+}
+export {
+  VoiceDictationButton
+};