ai-input-react 1.0.0-beta.1

package/dist/index.mjs

@@ -0,0 +1,628 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+// src/hooks/useAiInput.ts
+var DEFAULT_OPTIONS = {
+  cooldownMs: 1e3,
+  maxRequests: 10,
+  windowMs: 6e4
+};
+function useRateLimiter(options = {}) {
+  const config = { ...DEFAULT_OPTIONS, ...options };
+  const requestTimestamps = useRef([]);
+  const [cooldownEnd, setCooldownEnd] = useState(0);
+  const [cooldownRemaining, setCooldownRemaining] = useState(0);
+  const [, forceUpdate] = useState({});
+  const cleanupAndCount = useCallback(() => {
+    const now = Date.now();
+    const windowStart = now - config.windowMs;
+    requestTimestamps.current = requestTimestamps.current.filter(
+      (ts) => ts > windowStart
+    );
+    return config.maxRequests - requestTimestamps.current.length;
+  }, [config.windowMs, config.maxRequests]);
+  useEffect(() => {
+    if (cooldownEnd <= Date.now()) {
+      setCooldownRemaining(0);
+      return;
+    }
+    const interval = setInterval(() => {
+      const remaining = Math.max(0, cooldownEnd - Date.now());
+      setCooldownRemaining(remaining);
+      if (remaining === 0) {
+        clearInterval(interval);
+      }
+    }, 100);
+    return () => clearInterval(interval);
+  }, [cooldownEnd]);
+  const canRequest = useCallback(() => {
+    const now = Date.now();
+    if (now < cooldownEnd) {
+      return false;
+    }
+    return cleanupAndCount() > 0;
+  }, [cooldownEnd, cleanupAndCount]);
+  const recordRequest = useCallback(() => {
+    const now = Date.now();
+    requestTimestamps.current.push(now);
+    const newCooldownEnd = now + config.cooldownMs;
+    setCooldownEnd(newCooldownEnd);
+    setCooldownRemaining(config.cooldownMs);
+    forceUpdate({});
+  }, [config.cooldownMs]);
+  const reset = useCallback(() => {
+    requestTimestamps.current = [];
+    setCooldownEnd(0);
+    setCooldownRemaining(0);
+    forceUpdate({});
+  }, []);
+  return {
+    canRequest: canRequest(),
+    cooldownRemaining,
+    requestsRemaining: cleanupAndCount(),
+    recordRequest,
+    reset
+  };
+}
+var DEFAULT_OPTIONS2 = {
+  maxDurationMs: 6e4,
+  // 1 minute
+  mimeTypes: ["audio/webm", "audio/mp4", "audio/ogg", "audio/wav"]
+};
+function getSupportedMimeType(preferredTypes) {
+  if (typeof MediaRecorder === "undefined") {
+    return null;
+  }
+  for (const mimeType of preferredTypes) {
+    if (MediaRecorder.isTypeSupported(mimeType)) {
+      return mimeType;
+    }
+  }
+  return "";
+}
+function useAudioRecorder(options = {}) {
+  const config = { ...DEFAULT_OPTIONS2, ...options };
+  const [isRecording, setIsRecording] = useState(false);
+  const [duration, setDuration] = useState(0);
+  const [audioBlob, setAudioBlob] = useState(null);
+  const [error, setError] = useState(null);
+  const [audioLevels, setAudioLevels] = useState([]);
+  const mediaRecorderRef = useRef(null);
+  const streamRef = useRef(null);
+  const chunksRef = useRef([]);
+  const startTimeRef = useRef(0);
+  const durationIntervalRef = useRef(null);
+  const maxDurationTimeoutRef = useRef(null);
+  const audioContextRef = useRef(null);
+  const analyserRef = useRef(null);
+  const animationFrameRef = useRef(null);
+  const isSupported = typeof navigator !== "undefined" && "mediaDevices" in navigator && "getUserMedia" in navigator.mediaDevices && typeof MediaRecorder !== "undefined";
+  const updateAudioLevels = useCallback(() => {
+    if (!analyserRef.current) return;
+    const analyser = analyserRef.current;
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+    analyser.getByteFrequencyData(dataArray);
+    const bars = 12;
+    const step = Math.floor(bufferLength / bars);
+    const levels = [];
+    for (let i = 0; i < bars; i++) {
+      let sum = 0;
+      for (let j = 0; j < step; j++) {
+        sum += dataArray[i * step + j];
+      }
+      levels.push(sum / step / 255);
+    }
+    setAudioLevels(levels);
+    animationFrameRef.current = requestAnimationFrame(updateAudioLevels);
+  }, []);
+  const cleanup = useCallback(() => {
+    if (durationIntervalRef.current) {
+      clearInterval(durationIntervalRef.current);
+      durationIntervalRef.current = null;
+    }
+    if (maxDurationTimeoutRef.current) {
+      clearTimeout(maxDurationTimeoutRef.current);
+      maxDurationTimeoutRef.current = null;
+    }
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+    if (audioContextRef.current) {
+      audioContextRef.current.close();
+      audioContextRef.current = null;
+    }
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
+      streamRef.current = null;
+    }
+    analyserRef.current = null;
+    mediaRecorderRef.current = null;
+    chunksRef.current = [];
+    setAudioLevels([]);
+  }, []);
+  const stopRecording = useCallback(() => {
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+      mediaRecorderRef.current.stop();
+    }
+    setIsRecording(false);
+  }, []);
+  const startRecording = useCallback(async () => {
+    if (!isSupported) {
+      setError(new Error("Audio recording is not supported in this browser"));
+      return;
+    }
+    setError(null);
+    setAudioBlob(null);
+    setDuration(0);
+    setAudioLevels([]);
+    chunksRef.current = [];
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+      const audioContext = new AudioContext();
+      audioContextRef.current = audioContext;
+      const source = audioContext.createMediaStreamSource(stream);
+      const analyser = audioContext.createAnalyser();
+      analyser.fftSize = 256;
+      analyser.smoothingTimeConstant = 0.8;
+      source.connect(analyser);
+      analyserRef.current = analyser;
+      const mimeType = getSupportedMimeType(config.mimeTypes);
+      const mediaRecorder = new MediaRecorder(stream, mimeType ? { mimeType } : void 0);
+      mediaRecorderRef.current = mediaRecorder;
+      mediaRecorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          chunksRef.current.push(event.data);
+        }
+      };
+      mediaRecorder.onstop = () => {
+        const blob = new Blob(chunksRef.current, {
+          type: mimeType || "audio/webm"
+        });
+        setAudioBlob(blob);
+        if (config.onRecordingComplete) {
+          config.onRecordingComplete(blob);
+        }
+        cleanup();
+      };
+      mediaRecorder.onerror = () => {
+        setError(new Error("Recording error occurred"));
+        setIsRecording(false);
+        cleanup();
+      };
+      mediaRecorder.start(100);
+      startTimeRef.current = Date.now();
+      setIsRecording(true);
+      updateAudioLevels();
+      durationIntervalRef.current = setInterval(() => {
+        setDuration(Date.now() - startTimeRef.current);
+      }, 100);
+      maxDurationTimeoutRef.current = setTimeout(() => {
+        stopRecording();
+      }, config.maxDurationMs);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to access microphone";
+      setError(new Error(errorMessage));
+      cleanup();
+    }
+  }, [isSupported, config.mimeTypes, config.maxDurationMs, config.onRecordingComplete, cleanup, stopRecording, updateAudioLevels]);
+  const cancelRecording = useCallback(() => {
+    cleanup();
+    setIsRecording(false);
+    setDuration(0);
+    setAudioBlob(null);
+  }, [cleanup]);
+  const reset = useCallback(() => {
+    cleanup();
+    setIsRecording(false);
+    setDuration(0);
+    setAudioBlob(null);
+    setError(null);
+    setAudioLevels([]);
+  }, [cleanup]);
+  useEffect(() => {
+    return () => {
+      cleanup();
+    };
+  }, [cleanup]);
+  return {
+    isRecording,
+    isSupported,
+    duration,
+    audioBlob,
+    audioLevels,
+    error,
+    startRecording,
+    stopRecording,
+    cancelRecording,
+    reset
+  };
+}
+
+// src/hooks/useAiInput.ts
+var DEFAULT_RATE_LIMIT = {
+  cooldownMs: 1e3,
+  maxRequests: 10,
+  windowMs: 6e4
+};
+var DEFAULT_AUDIO_CONFIG = {
+  maxDurationMs: 6e4,
+  mimeTypes: ["audio/webm", "audio/mp4", "audio/ogg", "audio/wav"]
+};
+function useAiInput(options) {
+  const {
+    send,
+    sendAudio,
+    rateLimit = {},
+    audioConfig = {},
+    onSuccess,
+    onError,
+    onTranscription
+  } = options;
+  const rateLimitConfig = { ...DEFAULT_RATE_LIMIT, ...rateLimit };
+  const audioConfigMerged = { ...DEFAULT_AUDIO_CONFIG, ...audioConfig };
+  const [state, setState] = useState("idle");
+  const [text, setText] = useState("");
+  const [error, setError] = useState(null);
+  const [result, setResult] = useState(null);
+  const pendingAudioSubmitRef = useRef(false);
+  const rateLimiter = useRateLimiter(rateLimitConfig);
+  const audioRecorder = useAudioRecorder({
+    ...audioConfigMerged
+  });
+  useEffect(() => {
+    if (!rateLimiter.canRequest && state === "idle") {
+      setState("rate-limited");
+    } else if (rateLimiter.canRequest && state === "rate-limited") {
+      setState("idle");
+    }
+  }, [rateLimiter.canRequest, state]);
+  useEffect(() => {
+    if (audioRecorder.isRecording && state !== "recording") {
+      setState("recording");
+    }
+  }, [audioRecorder.isRecording, state]);
+  useEffect(() => {
+    if (audioRecorder.error) {
+      setError(audioRecorder.error);
+      setState("error");
+      onError?.(audioRecorder.error);
+    }
+  }, [audioRecorder.error, onError]);
+  const submitText = useCallback(async () => {
+    if (!text.trim() || !rateLimiter.canRequest) {
+      return;
+    }
+    setState("loading");
+    setError(null);
+    rateLimiter.recordRequest();
+    try {
+      const response = await send(text);
+      setResult(response);
+      setState("success");
+      onSuccess?.(response);
+      setText("");
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Request failed");
+      setError(error2);
+      setState("error");
+      onError?.(error2);
+    }
+  }, [text, rateLimiter, send, onSuccess, onError]);
+  const submitAudio = useCallback(async (blob) => {
+    if (!rateLimiter.canRequest) {
+      return;
+    }
+    setState("loading");
+    setError(null);
+    rateLimiter.recordRequest();
+    try {
+      const sendFn = sendAudio || send;
+      const response = await sendFn(blob);
+      setResult(response);
+      setState("success");
+      onSuccess?.(response);
+      if (onTranscription && response && typeof response === "object") {
+        const res = response;
+        const transcriptionText = res.text || res.transcription || res.transcript;
+        if (typeof transcriptionText === "string") {
+          setText(transcriptionText);
+          onTranscription(transcriptionText);
+        }
+      }
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Request failed");
+      setError(error2);
+      setState("error");
+      onError?.(error2);
+    }
+  }, [rateLimiter, send, sendAudio, onSuccess, onError, onTranscription]);
+  useEffect(() => {
+    if (pendingAudioSubmitRef.current && audioRecorder.audioBlob && !audioRecorder.isRecording) {
+      pendingAudioSubmitRef.current = false;
+      submitAudio(audioRecorder.audioBlob);
+    }
+  }, [audioRecorder.audioBlob, audioRecorder.isRecording, submitAudio]);
+  const startRecording = useCallback(async () => {
+    if (!rateLimiter.canRequest) {
+      return;
+    }
+    await audioRecorder.startRecording();
+  }, [rateLimiter.canRequest, audioRecorder]);
+  const stopRecording = useCallback(() => {
+    pendingAudioSubmitRef.current = true;
+    audioRecorder.stopRecording();
+  }, [audioRecorder]);
+  const cancelRecording = useCallback(() => {
+    audioRecorder.cancelRecording();
+    setState("idle");
+  }, [audioRecorder]);
+  const submit = useCallback(() => {
+    if (audioRecorder.isRecording) {
+      stopRecording();
+    } else if (text.trim()) {
+      submitText();
+    }
+  }, [audioRecorder.isRecording, text, stopRecording, submitText]);
+  const reset = useCallback(() => {
+    setState("idle");
+    setText("");
+    setError(null);
+    setResult(null);
+    rateLimiter.reset();
+    audioRecorder.reset();
+  }, [rateLimiter, audioRecorder]);
+  const canSubmit = rateLimiter.canRequest && state !== "loading" && (audioRecorder.isRecording || text.trim().length > 0);
+  return {
+    // State
+    state,
+    error,
+    result,
+    // Text
+    text,
+    setText,
+    submit,
+    canSubmit,
+    // Audio
+    isRecording: audioRecorder.isRecording,
+    startRecording,
+    stopRecording,
+    cancelRecording,
+    recordingDuration: audioRecorder.duration,
+    maxRecordingDuration: audioConfigMerged.maxDurationMs,
+    audioLevels: audioRecorder.audioLevels,
+    // Rate limiting
+    cooldownRemaining: rateLimiter.cooldownRemaining,
+    requestsRemaining: rateLimiter.requestsRemaining,
+    // Utils
+    reset
+  };
+}
+function formatDuration(ms) {
+  const seconds = Math.floor(ms / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
+}
+function Waveform({ levels, className = "" }) {
+  const bars = levels.length > 0 ? levels : Array(16).fill(0.1);
+  return /* @__PURE__ */ jsx("div", { className: `flex items-center justify-center gap-1 h-10 ${className}`, children: bars.map((level, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "w-1.5 bg-amber-500 rounded-full transition-all duration-75",
+      style: {
+        height: `${Math.max(6, level * 40)}px`
+      }
+    },
+    i
+  )) });
+}
+function MicIcon({ className = "" }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 256 256", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M128,176a48.05,48.05,0,0,0,48-48V64a48,48,0,0,0-96,0v64A48.05,48.05,0,0,0,128,176ZM96,64a32,32,0,0,1,64,0v64a32,32,0,0,1-64,0Zm40,143.6V232a8,8,0,0,1-16,0V207.6A80.11,80.11,0,0,1,48,128a8,8,0,0,1,16,0,64,64,0,0,0,128,0,8,8,0,0,1,16,0A80.11,80.11,0,0,1,136,207.6Z" }) });
+}
+function ArrowUpIcon({ className = "" }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 256 256", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M205.66,117.66a8,8,0,0,1-11.32,0L136,59.31V216a8,8,0,0,1-16,0V59.31L61.66,117.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,117.66Z" }) });
+}
+function StopIcon({ className = "" }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 256 256", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,160H56V56H200V200Z" }) });
+}
+function XIcon({ className = "" }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 256 256", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z" }) });
+}
+function Spinner({ className = "" }) {
+  return /* @__PURE__ */ jsxs("svg", { className: `animate-spin ${className}`, viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        className: "opacity-25",
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor",
+        strokeWidth: "4"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        className: "opacity-75",
+        fill: "currentColor",
+        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      }
+    )
+  ] });
+}
+function DefaultUI({
+  text,
+  setText,
+  submit,
+  canSubmit,
+  state,
+  error,
+  isRecording,
+  startRecording,
+  stopRecording,
+  cancelRecording,
+  recordingDuration,
+  maxRecordingDuration,
+  audioLevels,
+  cooldownRemaining,
+  placeholder = "Ask anything...",
+  disabled = false
+}) {
+  const isLoading = state === "loading";
+  const isRateLimited = state === "rate-limited";
+  const hasError = state === "error";
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey && canSubmit && !isRecording) {
+      e.preventDefault();
+      submit();
+    }
+  };
+  const handleInput = (e) => {
+    setText(e.target.value);
+    e.target.style.height = "auto";
+    e.target.style.height = `${Math.min(Math.max(e.target.scrollHeight, 56), 200)}px`;
+  };
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `
+                    bg-zinc-900 border border-zinc-800 rounded-xl
+                    focus-within:ring-1 focus-within:ring-amber-500/50 focus-within:border-amber-500/50
+                    transition-all duration-200
+                    ${disabled ? "opacity-50" : ""}
+                `,
+      children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            value: text,
+            onChange: handleInput,
+            onKeyDown: handleKeyDown,
+            placeholder: isRecording ? "Listening..." : placeholder,
+            disabled: disabled || isLoading || isRateLimited,
+            rows: 1,
+            className: `
+                        w-full px-4 pt-4 pb-2
+                        bg-transparent text-zinc-100 placeholder:text-zinc-500
+                        focus:outline-none
+                        disabled:cursor-not-allowed
+                        resize-none
+                        min-h-[56px]
+                    `,
+            style: { height: "56px" }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 pb-3 pt-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: isRecording ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: cancelRecording,
+                disabled,
+                className: "p-2 text-zinc-400 hover:text-zinc-200 transition-colors",
+                "aria-label": "Cancel recording",
+                children: /* @__PURE__ */ jsx(XIcon, { className: "h-5 w-5" })
+              }
+            ),
+            /* @__PURE__ */ jsx(Waveform, { levels: audioLevels }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-zinc-400 font-mono", children: formatDuration(recordingDuration) })
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
+            hasError && error && /* @__PURE__ */ jsx("span", { className: "text-red-400", children: error.message }),
+            isRateLimited && /* @__PURE__ */ jsxs("span", { className: "text-amber-400", children: [
+              "Wait ",
+              formatDuration(cooldownRemaining)
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: isRecording ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: stopRecording,
+              disabled,
+              className: `
+                                        p-2.5 rounded-full
+                                        bg-red-500 hover:bg-red-600
+                                        text-white
+                                        transition-colors
+                                        disabled:opacity-50 disabled:cursor-not-allowed
+                                    `,
+              "aria-label": "Stop recording",
+              children: /* @__PURE__ */ jsx(StopIcon, { className: "h-5 w-5" })
+            }
+          ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: startRecording,
+                disabled: disabled || isLoading || isRateLimited,
+                className: `
+                                        p-2 text-zinc-400 hover:text-zinc-200
+                                        transition-colors
+                                        disabled:opacity-50 disabled:cursor-not-allowed
+                                    `,
+                "aria-label": "Start recording",
+                children: /* @__PURE__ */ jsx(MicIcon, { className: "h-5 w-5" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: submit,
+                disabled: !canSubmit || disabled,
+                className: `
+                                        p-2.5 rounded-full
+                                        transition-colors
+                                        disabled:opacity-50 disabled:cursor-not-allowed
+                                        ${canSubmit ? "bg-amber-500 hover:bg-amber-600 text-zinc-900" : "bg-zinc-700 text-zinc-500"}
+                                    `,
+                "aria-label": "Send message",
+                children: isLoading ? /* @__PURE__ */ jsx(Spinner, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(ArrowUpIcon, { className: "h-5 w-5" })
+              }
+            )
+          ] }) })
+        ] })
+      ]
+    }
+  ) });
+}
+function AiInput({
+  send,
+  sendAudio,
+  rateLimit,
+  audioConfig,
+  onSuccess,
+  onError,
+  onTranscription,
+  children,
+  placeholder,
+  className,
+  disabled = false
+}) {
+  const inputState = useAiInput({
+    send,
+    sendAudio,
+    rateLimit,
+    audioConfig,
+    onSuccess,
+    onError,
+    onTranscription
+  });
+  if (children) {
+    return /* @__PURE__ */ jsx(Fragment, { children: children(inputState) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: `w-full ${className || ""}`, children: /* @__PURE__ */ jsx(
+    DefaultUI,
+    {
+      ...inputState,
+      placeholder,
+      disabled
+    }
+  ) });
+}
+
+export { AiInput, useAiInput, useAudioRecorder, useRateLimiter };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map