@sero-ai/ui 0.3.0 → 0.3.2

package/dist/components/ai-elements/snippet.cjs

@@ -0,0 +1,105 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+
+
+
+
+
+
+var _inputgroup = require('../ui/input-group');
+var _utils = require('../../lib/utils');
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+
+var _react = require('react');
+const SnippetContext = _react.createContext.call(void 0, {
+  code: ""
+});
+const Snippet = ({
+  code,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SnippetContext.Provider, { value: { code }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _inputgroup.InputGroup, { className: _utils.cn.call(void 0, "font-mono", className), ...props, children }) });
+const SnippetAddon = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _inputgroup.InputGroupAddon, { ...props });
+const SnippetText = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _inputgroup.InputGroupText,
+  {
+    className: _utils.cn.call(void 0, "pl-2 font-normal text-muted-foreground", className),
+    ...props
+  }
+);
+const SnippetInput = ({ className, ...props }) => {
+  const { code } = _react.use.call(void 0, SnippetContext);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _inputgroup.InputGroupInput,
+    {
+      className: _utils.cn.call(void 0, "text-foreground", className),
+      readOnly: true,
+      value: code,
+      ...props
+    }
+  );
+};
+const SnippetCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2e3,
+  children,
+  className,
+  ...props
+}) => {
+  const [isCopied, setIsCopied] = _react.useState.call(void 0, false);
+  const timeoutRef = _react.useRef.call(void 0, 0);
+  const { code } = _react.use.call(void 0, SnippetContext);
+  const copyToClipboard = _react.useCallback.call(void 0, async () => {
+    if (typeof window === "undefined" || !_optionalChain([navigator, 'optionalAccess', _ => _.clipboard, 'optionalAccess', _2 => _2.writeText])) {
+      _optionalChain([onError, 'optionalCall', _3 => _3(new Error("Clipboard API not available"))]);
+      return;
+    }
+    try {
+      if (!isCopied) {
+        await navigator.clipboard.writeText(code);
+        setIsCopied(true);
+        _optionalChain([onCopy, 'optionalCall', _4 => _4()]);
+        timeoutRef.current = window.setTimeout(
+          () => setIsCopied(false),
+          timeout
+        );
+      }
+    } catch (error) {
+      _optionalChain([onError, 'optionalCall', _5 => _5(error)]);
+    }
+  }, [code, onCopy, onError, timeout, isCopied]);
+  _react.useEffect.call(void 0, 
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    []
+  );
+  const Icon = isCopied ? _lucidereact.CheckIcon : _lucidereact.CopyIcon;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _inputgroup.InputGroupButton,
+    {
+      "aria-label": "Copy",
+      className,
+      onClick: copyToClipboard,
+      size: "icon-sm",
+      title: "Copy",
+      ...props,
+      children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: "size-3.5", size: 14 })))
+    }
+  );
+};
+
+
+
+
+
+
+exports.Snippet = Snippet; exports.SnippetAddon = SnippetAddon; exports.SnippetCopyButton = SnippetCopyButton; exports.SnippetInput = SnippetInput; exports.SnippetText = SnippetText;

package/dist/components/ai-elements/snippet.d.cts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from '../ui/input-group.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../ui/button.cjs';
+
+type SnippetProps = ComponentProps<typeof InputGroup> & {
+    code: string;
+};
+declare const Snippet: ({ code, className, children, ...props }: SnippetProps) => react_jsx_runtime.JSX.Element;
+type SnippetAddonProps = ComponentProps<typeof InputGroupAddon>;
+declare const SnippetAddon: (props: SnippetAddonProps) => react_jsx_runtime.JSX.Element;
+type SnippetTextProps = ComponentProps<typeof InputGroupText>;
+declare const SnippetText: ({ className, ...props }: SnippetTextProps) => react_jsx_runtime.JSX.Element;
+type SnippetInputProps = Omit<ComponentProps<typeof InputGroupInput>, "readOnly" | "value">;
+declare const SnippetInput: ({ className, ...props }: SnippetInputProps) => react_jsx_runtime.JSX.Element;
+type SnippetCopyButtonProps = ComponentProps<typeof InputGroupButton> & {
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+};
+declare const SnippetCopyButton: ({ onCopy, onError, timeout, children, className, ...props }: SnippetCopyButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { Snippet, SnippetAddon, type SnippetAddonProps, SnippetCopyButton, type SnippetCopyButtonProps, SnippetInput, type SnippetInputProps, type SnippetProps, SnippetText, type SnippetTextProps };

package/dist/components/ai-elements/snippet.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from '../ui/input-group.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../ui/button.js';
+
+type SnippetProps = ComponentProps<typeof InputGroup> & {
+    code: string;
+};
+declare const Snippet: ({ code, className, children, ...props }: SnippetProps) => react_jsx_runtime.JSX.Element;
+type SnippetAddonProps = ComponentProps<typeof InputGroupAddon>;
+declare const SnippetAddon: (props: SnippetAddonProps) => react_jsx_runtime.JSX.Element;
+type SnippetTextProps = ComponentProps<typeof InputGroupText>;
+declare const SnippetText: ({ className, ...props }: SnippetTextProps) => react_jsx_runtime.JSX.Element;
+type SnippetInputProps = Omit<ComponentProps<typeof InputGroupInput>, "readOnly" | "value">;
+declare const SnippetInput: ({ className, ...props }: SnippetInputProps) => react_jsx_runtime.JSX.Element;
+type SnippetCopyButtonProps = ComponentProps<typeof InputGroupButton> & {
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+};
+declare const SnippetCopyButton: ({ onCopy, onError, timeout, children, className, ...props }: SnippetCopyButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { Snippet, SnippetAddon, type SnippetAddonProps, SnippetCopyButton, type SnippetCopyButtonProps, SnippetInput, type SnippetInputProps, type SnippetProps, SnippetText, type SnippetTextProps };

package/dist/components/ai-elements/snippet.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText
+} from "../ui/input-group";
+import { cn } from "../../lib/utils";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import {
+  createContext,
+  useCallback,
+  use,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+const SnippetContext = createContext({
+  code: ""
+});
+const Snippet = ({
+  code,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(SnippetContext.Provider, { value: { code }, children: /* @__PURE__ */ jsx(InputGroup, { className: cn("font-mono", className), ...props, children }) });
+const SnippetAddon = (props) => /* @__PURE__ */ jsx(InputGroupAddon, { ...props });
+const SnippetText = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  InputGroupText,
+  {
+    className: cn("pl-2 font-normal text-muted-foreground", className),
+    ...props
+  }
+);
+const SnippetInput = ({ className, ...props }) => {
+  const { code } = use(SnippetContext);
+  return /* @__PURE__ */ jsx(
+    InputGroupInput,
+    {
+      className: cn("text-foreground", className),
+      readOnly: true,
+      value: code,
+      ...props
+    }
+  );
+};
+const SnippetCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2e3,
+  children,
+  className,
+  ...props
+}) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef(0);
+  const { code } = use(SnippetContext);
+  const copyToClipboard = useCallback(async () => {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+    try {
+      if (!isCopied) {
+        await navigator.clipboard.writeText(code);
+        setIsCopied(true);
+        onCopy?.();
+        timeoutRef.current = window.setTimeout(
+          () => setIsCopied(false),
+          timeout
+        );
+      }
+    } catch (error) {
+      onError?.(error);
+    }
+  }, [code, onCopy, onError, timeout, isCopied]);
+  useEffect(
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    []
+  );
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+  return /* @__PURE__ */ jsx(
+    InputGroupButton,
+    {
+      "aria-label": "Copy",
+      className,
+      onClick: copyToClipboard,
+      size: "icon-sm",
+      title: "Copy",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(Icon, { className: "size-3.5", size: 14 })
+    }
+  );
+};
+export {
+  Snippet,
+  SnippetAddon,
+  SnippetCopyButton,
+  SnippetInput,
+  SnippetText
+};

package/dist/components/ai-elements/sources.cjs

@@ -0,0 +1,70 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+
+
+
+
+var _collapsible = require('../ui/collapsible');
+var _utils = require('../../lib/utils');
+var _lucidereact = require('lucide-react');
+const Sources = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _collapsible.Collapsible,
+  {
+    className: _utils.cn.call(void 0, "not-prose mb-4 text-primary text-xs", className),
+    ...props
+  }
+);
+const SourcesTrigger = ({
+  className,
+  count,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _collapsible.CollapsibleTrigger,
+  {
+    className: _utils.cn.call(void 0, "flex items-center gap-2", className),
+    ...props,
+    children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "font-medium", children: [
+        "Used ",
+        count,
+        " sources"
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronDownIcon, { className: "size-4" })
+    ] })))
+  }
+);
+const SourcesContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _collapsible.CollapsibleContent,
+  {
+    className: _utils.cn.call(void 0, 
+      "mt-3 flex w-fit flex-col gap-2",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    ),
+    ...props
+  }
+);
+const Source = ({ href, title, children, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "a",
+  {
+    className: "flex items-center gap-2",
+    href,
+    rel: "noreferrer",
+    target: "_blank",
+    ...props,
+    children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.BookIcon, { className: "size-4" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "block font-medium", children: title })
+    ] })))
+  }
+);
+
+
+
+
+
+exports.Source = Source; exports.Sources = Sources; exports.SourcesContent = SourcesContent; exports.SourcesTrigger = SourcesTrigger;

package/dist/components/ai-elements/sources.d.cts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible.cjs';
+import 'radix-ui';
+
+type SourcesProps = ComponentProps<"div">;
+declare const Sources: ({ className, ...props }: SourcesProps) => react_jsx_runtime.JSX.Element;
+type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+    count: number;
+};
+declare const SourcesTrigger: ({ className, count, children, ...props }: SourcesTriggerProps) => react_jsx_runtime.JSX.Element;
+type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const SourcesContent: ({ className, ...props }: SourcesContentProps) => react_jsx_runtime.JSX.Element;
+type SourceProps = ComponentProps<"a">;
+declare const Source: ({ href, title, children, ...props }: SourceProps) => react_jsx_runtime.JSX.Element;
+
+export { Source, type SourceProps, Sources, SourcesContent, type SourcesContentProps, type SourcesProps, SourcesTrigger, type SourcesTriggerProps };

package/dist/components/ai-elements/sources.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible.js';
+import 'radix-ui';
+
+type SourcesProps = ComponentProps<"div">;
+declare const Sources: ({ className, ...props }: SourcesProps) => react_jsx_runtime.JSX.Element;
+type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+    count: number;
+};
+declare const SourcesTrigger: ({ className, count, children, ...props }: SourcesTriggerProps) => react_jsx_runtime.JSX.Element;
+type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const SourcesContent: ({ className, ...props }: SourcesContentProps) => react_jsx_runtime.JSX.Element;
+type SourceProps = ComponentProps<"a">;
+declare const Source: ({ href, title, children, ...props }: SourceProps) => react_jsx_runtime.JSX.Element;
+
+export { Source, type SourceProps, Sources, SourcesContent, type SourcesContentProps, type SourcesProps, SourcesTrigger, type SourcesTriggerProps };

package/dist/components/ai-elements/sources.js

@@ -0,0 +1,70 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "../ui/collapsible";
+import { cn } from "../../lib/utils";
+import { BookIcon, ChevronDownIcon } from "lucide-react";
+const Sources = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Collapsible,
+  {
+    className: cn("not-prose mb-4 text-primary text-xs", className),
+    ...props
+  }
+);
+const SourcesTrigger = ({
+  className,
+  count,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  CollapsibleTrigger,
+  {
+    className: cn("flex items-center gap-2", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("p", { className: "font-medium", children: [
+        "Used ",
+        count,
+        " sources"
+      ] }),
+      /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+    ] })
+  }
+);
+const SourcesContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  CollapsibleContent,
+  {
+    className: cn(
+      "mt-3 flex w-fit flex-col gap-2",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    ),
+    ...props
+  }
+);
+const Source = ({ href, title, children, ...props }) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    className: "flex items-center gap-2",
+    href,
+    rel: "noreferrer",
+    target: "_blank",
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(BookIcon, { className: "size-4" }),
+      /* @__PURE__ */ jsx("span", { className: "block font-medium", children: title })
+    ] })
+  }
+);
+export {
+  Source,
+  Sources,
+  SourcesContent,
+  SourcesTrigger
+};

package/dist/components/ai-elements/speech-input.cjs

@@ -0,0 +1,207 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _button = require('../ui/button');
+var _spinner = require('../ui/spinner');
+var _utils = require('../../lib/utils');
+var _lucidereact = require('lucide-react');
+var _react = require('react');
+const detectSpeechInputMode = () => {
+  if (typeof window === "undefined") {
+    return "none";
+  }
+  if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) {
+    return "speech-recognition";
+  }
+  if ("MediaRecorder" in window && "mediaDevices" in navigator) {
+    return "media-recorder";
+  }
+  return "none";
+};
+const SpeechInput = ({
+  className,
+  onTranscriptionChange,
+  onAudioRecorded,
+  lang = "en-US",
+  ...props
+}) => {
+  const [isListening, setIsListening] = _react.useState.call(void 0, false);
+  const [isProcessing, setIsProcessing] = _react.useState.call(void 0, false);
+  const [mode] = _react.useState.call(void 0, detectSpeechInputMode);
+  const [isRecognitionReady, setIsRecognitionReady] = _react.useState.call(void 0, false);
+  const recognitionRef = _react.useRef.call(void 0, null);
+  const mediaRecorderRef = _react.useRef.call(void 0, null);
+  const streamRef = _react.useRef.call(void 0, null);
+  const audioChunksRef = _react.useRef.call(void 0, []);
+  const onTranscriptionChangeRef = _react.useRef.call(void 0, onTranscriptionChange);
+  const onAudioRecordedRef = _react.useRef.call(void 0, onAudioRecorded);
+  onTranscriptionChangeRef.current = onTranscriptionChange;
+  onAudioRecordedRef.current = onAudioRecorded;
+  _react.useEffect.call(void 0, () => {
+    if (mode !== "speech-recognition") {
+      return;
+    }
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    const speechRecognition = new SpeechRecognition();
+    speechRecognition.continuous = true;
+    speechRecognition.interimResults = true;
+    speechRecognition.lang = lang;
+    const handleStart = () => {
+      setIsListening(true);
+    };
+    const handleEnd = () => {
+      setIsListening(false);
+    };
+    const handleResult = (event) => {
+      const speechEvent = event;
+      let finalTranscript = "";
+      for (let i = speechEvent.resultIndex; i < speechEvent.results.length; i += 1) {
+        const result = speechEvent.results[i];
+        if (result.isFinal) {
+          finalTranscript += _nullishCoalesce(_optionalChain([result, 'access', _ => _[0], 'optionalAccess', _2 => _2.transcript]), () => ( ""));
+        }
+      }
+      if (finalTranscript) {
+        _optionalChain([onTranscriptionChangeRef, 'access', _3 => _3.current, 'optionalCall', _4 => _4(finalTranscript)]);
+      }
+    };
+    const handleError = () => {
+      setIsListening(false);
+    };
+    speechRecognition.addEventListener("start", handleStart);
+    speechRecognition.addEventListener("end", handleEnd);
+    speechRecognition.addEventListener("result", handleResult);
+    speechRecognition.addEventListener("error", handleError);
+    recognitionRef.current = speechRecognition;
+    setIsRecognitionReady(true);
+    return () => {
+      speechRecognition.removeEventListener("start", handleStart);
+      speechRecognition.removeEventListener("end", handleEnd);
+      speechRecognition.removeEventListener("result", handleResult);
+      speechRecognition.removeEventListener("error", handleError);
+      speechRecognition.stop();
+      recognitionRef.current = null;
+      setIsRecognitionReady(false);
+    };
+  }, [mode, lang]);
+  _react.useEffect.call(void 0, 
+    () => () => {
+      if (_optionalChain([mediaRecorderRef, 'access', _5 => _5.current, 'optionalAccess', _6 => _6.state]) === "recording") {
+        mediaRecorderRef.current.stop();
+      }
+      if (streamRef.current) {
+        for (const track of streamRef.current.getTracks()) {
+          track.stop();
+        }
+      }
+    },
+    []
+  );
+  const startMediaRecorder = _react.useCallback.call(void 0, async () => {
+    if (!onAudioRecordedRef.current) {
+      return;
+    }
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+      const mediaRecorder = new MediaRecorder(stream);
+      audioChunksRef.current = [];
+      const handleDataAvailable = (event) => {
+        if (event.data.size > 0) {
+          audioChunksRef.current.push(event.data);
+        }
+      };
+      const handleStop = async () => {
+        for (const track of stream.getTracks()) {
+          track.stop();
+        }
+        streamRef.current = null;
+        const audioBlob = new Blob(audioChunksRef.current, {
+          type: "audio/webm"
+        });
+        if (audioBlob.size > 0 && onAudioRecordedRef.current) {
+          setIsProcessing(true);
+          try {
+            const transcript = await onAudioRecordedRef.current(audioBlob);
+            if (transcript) {
+              _optionalChain([onTranscriptionChangeRef, 'access', _7 => _7.current, 'optionalCall', _8 => _8(transcript)]);
+            }
+          } catch (e) {
+          } finally {
+            setIsProcessing(false);
+          }
+        }
+      };
+      const handleError = () => {
+        setIsListening(false);
+        for (const track of stream.getTracks()) {
+          track.stop();
+        }
+        streamRef.current = null;
+      };
+      mediaRecorder.addEventListener("dataavailable", handleDataAvailable);
+      mediaRecorder.addEventListener("stop", handleStop);
+      mediaRecorder.addEventListener("error", handleError);
+      mediaRecorderRef.current = mediaRecorder;
+      mediaRecorder.start();
+      setIsListening(true);
+    } catch (e2) {
+      setIsListening(false);
+    }
+  }, []);
+  const stopMediaRecorder = _react.useCallback.call(void 0, () => {
+    if (_optionalChain([mediaRecorderRef, 'access', _9 => _9.current, 'optionalAccess', _10 => _10.state]) === "recording") {
+      mediaRecorderRef.current.stop();
+    }
+    setIsListening(false);
+  }, []);
+  const toggleListening = _react.useCallback.call(void 0, () => {
+    if (mode === "speech-recognition" && recognitionRef.current) {
+      if (isListening) {
+        recognitionRef.current.stop();
+      } else {
+        recognitionRef.current.start();
+      }
+    } else if (mode === "media-recorder") {
+      if (isListening) {
+        stopMediaRecorder();
+      } else {
+        startMediaRecorder();
+      }
+    }
+  }, [mode, isListening, startMediaRecorder, stopMediaRecorder]);
+  const isDisabled = mode === "none" || mode === "speech-recognition" && !isRecognitionReady || mode === "media-recorder" && !onAudioRecorded || isProcessing;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative inline-flex items-center justify-center", children: [
+    isListening && [0, 1, 2].map((index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: "absolute inset-0 animate-ping rounded-full border-2 border-red-400/30",
+        style: {
+          animationDelay: `${index * 0.3}s`,
+          animationDuration: "2s"
+        }
+      },
+      index
+    )),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _button.Button,
+      {
+        className: _utils.cn.call(void 0, 
+          "relative z-10 rounded-full transition-all duration-300",
+          isListening ? "bg-destructive text-white hover:bg-destructive/80 hover:text-white" : "bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground",
+          className
+        ),
+        disabled: isDisabled,
+        onClick: toggleListening,
+        ...props,
+        children: [
+          isProcessing && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _spinner.Spinner, {}),
+          !isProcessing && isListening && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.SquareIcon, { className: "size-4" }),
+          !(isProcessing || isListening) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.MicIcon, { className: "size-4" })
+        ]
+      }
+    )
+  ] });
+};
+
+
+exports.SpeechInput = SpeechInput;