@aginies/webuikit 0.2.0 → 0.3.0

package/dist/index.js

@@ -15,6 +15,7 @@ var trimSlash = (s) => s.replace(/\/+$/, "");
 var AginiesClient = class {
   baseUrl;
   token;
+  hosted;
   locale;
   fetchImpl;
   state = { status: "idle" };
@@ -23,9 +24,12 @@ var AginiesClient = class {
   session = null;
   constructor(config) {
     if (!config?.baseUrl) throw new AginiesError("baseUrl is required", 0, "MISSING_BASE_URL");
-    if (!config?.token) throw new AginiesError("token is required", 0, "MISSING_TOKEN");
+    if (!config?.token && !config?.hosted) {
+      throw new AginiesError("token is required", 0, "MISSING_TOKEN");
+    }
     this.baseUrl = trimSlash(config.baseUrl);
-    this.token = config.token;
+    this.token = config.token ?? null;
+    this.hosted = config.hosted === true;
     this.locale = config.locale ?? detectLocale();
     this.fetchImpl = config.fetch ?? ((...args) => fetch(...args));
   }
@@ -52,7 +56,7 @@ var AginiesClient = class {
         const res = await this.fetchImpl(`${this.baseUrl}/api/ui/activate`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ token: this.token })
+          body: JSON.stringify(this.hosted ? { hosted: true } : { token: this.token })
         });
         if (!res.ok) {
           const body2 = await safeJson(res);
@@ -127,6 +131,30 @@ var AginiesClient = class {
     this.assertActive();
     return this.request(path2, init2);
   }
+  /** Sends a recording to the platform's transcription model. */
+  async transcribe(identifier, audio, filename = "turn.webm", language) {
+    this.assertActive();
+    const form = new FormData();
+    form.append("file", audio, filename);
+    if (language) form.append("language", language);
+    const res = await this.request(`/api/chat/${encodeURIComponent(identifier)}/voice/transcribe`, {
+      method: "POST",
+      body: form
+    });
+    if (!res.ok) throw await voiceError(res);
+    return await res.json();
+  }
+  /** Audio for a reply from the platform's synthesis endpoint. */
+  async speak(identifier, text) {
+    this.assertActive();
+    const res = await this.request(`/api/chat/${encodeURIComponent(identifier)}/voice/speak`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text })
+    });
+    if (!res.ok) throw await voiceError(res);
+    return res.blob();
+  }
   /** Hosted-chat configuration. Resolves to an auth requirement instead of throwing on 401. */
   async getChat(identifier) {
     this.assertActive();
@@ -216,6 +244,15 @@ function decodeFrame(frame) {
   }
   return null;
 }
+async function voiceError(res) {
+  const body = await safeJson(res);
+  if (res.status === 401 && body && typeof body.authRequired === "string") {
+    return new AginiesError("Authentication required", 401, "AUTH_REQUIRED");
+  }
+  if (res.status === 503)
+    return new AginiesError("Voice is not available", 503, "VOICE_UNAVAILABLE");
+  return new AginiesError(body?.error || `HTTP ${res.status}`, res.status);
+}
 async function safeJson(res) {
   try {
     return await res.json();
@@ -514,6 +551,35 @@ var STRINGS = {
     },
     ssoButton: { tr: "Kurumsal giri\u015F", en: "Sign in" }
   },
+  voice: {
+    talk: { tr: "Konu\u015Fmak i\xE7in dokunun", en: "Tap to talk" },
+    stopTalking: { tr: "Bitirmek i\xE7in dokunun", en: "Tap when done" },
+    dictate: { tr: "Sesle yaz", en: "Dictate" },
+    handsFree: { tr: "Sesli sohbet", en: "Voice conversation" },
+    exit: { tr: "Sesli sohbetten \xE7\u0131k", en: "Leave voice conversation" },
+    listening: { tr: "Dinliyor", en: "Listening" },
+    transcribing: { tr: "Yaz\u0131ya d\xF6k\xFCl\xFCyor", en: "Transcribing" },
+    thinking: { tr: "Yan\u0131t haz\u0131rlan\u0131yor", en: "Working on it" },
+    speaking: { tr: "Konu\u015Fuyor", en: "Speaking" },
+    idle: { tr: "Haz\u0131r", en: "Ready" },
+    interrupt: { tr: "S\xF6z\xFCn\xFC kesmek i\xE7in dokunun", en: "Tap to interrupt" },
+    micDenied: {
+      tr: "Mikrofon izni verilmedi. Taray\u0131c\u0131 ayarlar\u0131ndan izin verin.",
+      en: "Microphone access was denied. Allow it in your browser settings."
+    },
+    unsupported: {
+      tr: "Bu taray\u0131c\u0131 ses kayd\u0131n\u0131 desteklemiyor.",
+      en: "This browser cannot record audio."
+    },
+    unavailable: {
+      tr: "Ses \xF6zelli\u011Fi bu sohbet i\xE7in a\xE7\u0131k de\u011Fil.",
+      en: "Voice is not enabled for this chat."
+    },
+    error: {
+      tr: "Ses i\u015Flenemedi. L\xFCtfen tekrar deneyin.",
+      en: "Voice could not be processed. Please try again."
+    }
+  },
   run: {
     submit: { tr: "\xC7al\u0131\u015Ft\u0131r", en: "Run" },
     cancel: { tr: "\u0130ptal", en: "Cancel" },
@@ -964,7 +1030,7 @@ function renderField(f, value, set, disabled) {
 }
 
 // src/chat/chat-widget.tsx
-import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
 
 // src/chat/markdown.tsx
 import { Fragment as Fragment3 } from "react";
@@ -1274,20 +1340,258 @@ function Pie({ labels, data }) {
   ] });
 }
 
+// src/chat/voice.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+var MIME_CANDIDATES = [
+  "audio/webm;codecs=opus",
+  "audio/webm",
+  "audio/mp4",
+  "audio/ogg;codecs=opus"
+];
+var MIN_CLIP_BYTES = 800;
+var SPEECH_RMS = 0.02;
+function isVoiceSupported() {
+  return typeof window !== "undefined" && typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia && typeof MediaRecorder !== "undefined";
+}
+function useVoice({
+  identifier,
+  onTranscript,
+  language,
+  silenceMs = 1400,
+  maxMs = 6e4
+}) {
+  const { client, t } = useAginies();
+  const supported = isVoiceSupported();
+  const [state, setState] = useState3(supported ? "idle" : "unsupported");
+  const [error, setError] = useState3(null);
+  const [level, setLevel] = useState3(0);
+  const recorderRef = useRef2(null);
+  const streamRef = useRef2(null);
+  const chunksRef = useRef2([]);
+  const discardRef = useRef2(false);
+  const timersRef = useRef2([]);
+  const meterRef = useRef2(null);
+  const audioRef = useRef2(null);
+  const audioUrlRef = useRef2(null);
+  const startingRef = useRef2(false);
+  const onTranscriptRef = useRef2(onTranscript);
+  onTranscriptRef.current = onTranscript;
+  const clearTimers = useCallback2(() => {
+    for (const id of timersRef.current) window.clearTimeout(id);
+    timersRef.current = [];
+    if (meterRef.current) {
+      window.clearInterval(meterRef.current.interval);
+      void meterRef.current.ctx.close().catch(() => {
+      });
+      meterRef.current = null;
+    }
+    setLevel(0);
+  }, []);
+  const releaseStream = useCallback2(() => {
+    for (const track of streamRef.current?.getTracks() ?? []) track.stop();
+    streamRef.current = null;
+  }, []);
+  const stopSpeaking = useCallback2(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.pause();
+      audio.src = "";
+      audioRef.current = null;
+    }
+    if (audioUrlRef.current) {
+      URL.revokeObjectURL(audioUrlRef.current);
+      audioUrlRef.current = null;
+    }
+    setState((s) => s === "speaking" ? "idle" : s);
+  }, []);
+  const finish = useCallback2((recorder) => {
+    recorder.stop();
+  }, []);
+  const stopListening = useCallback2(() => {
+    const recorder = recorderRef.current;
+    if (!recorder || recorder.state === "inactive") return;
+    discardRef.current = false;
+    finish(recorder);
+  }, [finish]);
+  const cancelListening = useCallback2(() => {
+    const recorder = recorderRef.current;
+    if (!recorder || recorder.state === "inactive") return;
+    discardRef.current = true;
+    finish(recorder);
+  }, [finish]);
+  const startMeter = useCallback2(
+    (stream, onSilence) => {
+      const Ctx = typeof AudioContext !== "undefined" ? AudioContext : window.webkitAudioContext;
+      if (!Ctx) return;
+      try {
+        const ctx = new Ctx();
+        const analyser = ctx.createAnalyser();
+        analyser.fftSize = 2048;
+        ctx.createMediaStreamSource(stream).connect(analyser);
+        const data = new Uint8Array(analyser.fftSize);
+        let heard = false;
+        let lastVoice = Date.now();
+        const interval = window.setInterval(() => {
+          analyser.getByteTimeDomainData(data);
+          let sum = 0;
+          for (const v of data) {
+            const n = (v - 128) / 128;
+            sum += n * n;
+          }
+          const rms = Math.sqrt(sum / data.length);
+          setLevel(Math.min(1, rms * 6));
+          if (rms > SPEECH_RMS) {
+            heard = true;
+            lastVoice = Date.now();
+          } else if (heard && Date.now() - lastVoice > silenceMs) {
+            onSilence();
+          }
+        }, 100);
+        meterRef.current = { ctx, interval };
+      } catch {
+      }
+    },
+    [silenceMs]
+  );
+  const startListening = useCallback2(async () => {
+    if (!supported) {
+      setState("unsupported");
+      return;
+    }
+    if (startingRef.current) return;
+    if (recorderRef.current && recorderRef.current.state !== "inactive") return;
+    startingRef.current = true;
+    stopSpeaking();
+    setError(null);
+    let stream;
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    } catch {
+      startingRef.current = false;
+      setState("denied");
+      setError(t("voice", "micDenied"));
+      return;
+    }
+    startingRef.current = false;
+    streamRef.current = stream;
+    const mimeType = MIME_CANDIDATES.find((m) => MediaRecorder.isTypeSupported?.(m));
+    const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : void 0);
+    recorderRef.current = recorder;
+    chunksRef.current = [];
+    discardRef.current = false;
+    recorder.ondataavailable = (e) => {
+      if (e.data && e.data.size > 0) chunksRef.current.push(e.data);
+    };
+    recorder.onstop = () => {
+      clearTimers();
+      releaseStream();
+      recorderRef.current = null;
+      const type = recorder.mimeType || mimeType || "audio/webm";
+      const clip = new Blob(chunksRef.current, { type });
+      chunksRef.current = [];
+      if (discardRef.current || clip.size < MIN_CLIP_BYTES) {
+        setState("idle");
+        return;
+      }
+      setState("transcribing");
+      const ext = type.includes("mp4") ? "m4a" : type.includes("ogg") ? "ogg" : "webm";
+      client.transcribe(identifier, clip, `turn.${ext}`, language).then((result) => {
+        setState("idle");
+        if (result.transcript) onTranscriptRef.current(result.transcript);
+      }).catch((err) => {
+        setState("idle");
+        setError(
+          err instanceof AginiesError && err.code === "VOICE_UNAVAILABLE" ? t("voice", "unavailable") : t("voice", "error")
+        );
+      });
+    };
+    recorder.start(250);
+    setState("listening");
+    startMeter(stream, () => stopListening());
+    timersRef.current.push(window.setTimeout(() => stopListening(), maxMs));
+  }, [
+    supported,
+    stopSpeaking,
+    t,
+    client,
+    identifier,
+    language,
+    maxMs,
+    stopListening,
+    clearTimers,
+    releaseStream,
+    startMeter
+  ]);
+  const speak = useCallback2(
+    async (text) => {
+      stopSpeaking();
+      setError(null);
+      setState("speaking");
+      try {
+        const blob = await client.speak(identifier, text);
+        const url = URL.createObjectURL(blob);
+        audioUrlRef.current = url;
+        const audio = new Audio(url);
+        audioRef.current = audio;
+        await new Promise((resolve) => {
+          audio.onended = () => resolve();
+          audio.onerror = () => resolve();
+          audio.onpause = () => resolve();
+          audio.play().catch(() => resolve());
+        });
+      } catch (err) {
+        setError(
+          err instanceof AginiesError && err.code === "VOICE_UNAVAILABLE" ? t("voice", "unavailable") : t("voice", "error")
+        );
+      } finally {
+        if (audioUrlRef.current) URL.revokeObjectURL(audioUrlRef.current);
+        audioUrlRef.current = null;
+        audioRef.current = null;
+        setState((s) => s === "speaking" ? "idle" : s);
+      }
+    },
+    [client, identifier, stopSpeaking, t]
+  );
+  useEffect3(
+    () => () => {
+      discardRef.current = true;
+      if (recorderRef.current && recorderRef.current.state !== "inactive")
+        recorderRef.current.stop();
+      clearTimers();
+      releaseStream();
+      const audio = audioRef.current;
+      if (audio) audio.pause();
+      if (audioUrlRef.current) URL.revokeObjectURL(audioUrlRef.current);
+    },
+    [clearTimers, releaseStream]
+  );
+  return {
+    state,
+    error,
+    supported,
+    level,
+    startListening,
+    stopListening,
+    cancelListening,
+    speak,
+    stopSpeaking
+  };
+}
+
 // src/chat/chat-widget.tsx
 import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var ATTACHMENT_LIMITS = { maxFiles: 5, maxBytes: 10 * 1024 * 1024 };
 function useChat(identifier, enabled = true) {
   const { client, t } = useAginies();
-  const [config, setConfig] = useState3(null);
-  const [authNeed, setAuthNeed] = useState3(null);
-  const [authTitle, setAuthTitle] = useState3();
-  const [loadError, setLoadError] = useState3(null);
-  const [messages, setMessages] = useState3([]);
-  const [busy, setBusy] = useState3(false);
-  const [conversationId] = useState3(() => randomId());
-  const abortRef = useRef2(null);
-  const load = useCallback2(async () => {
+  const [config, setConfig] = useState4(null);
+  const [authNeed, setAuthNeed] = useState4(null);
+  const [authTitle, setAuthTitle] = useState4();
+  const [loadError, setLoadError] = useState4(null);
+  const [messages, setMessages] = useState4([]);
+  const [busy, setBusy] = useState4(false);
+  const [conversationId] = useState4(() => randomId());
+  const abortRef = useRef3(null);
+  const load = useCallback3(async () => {
     setLoadError(null);
     try {
       const res = await client.getChat(identifier);
@@ -1304,11 +1608,11 @@ function useChat(identifier, enabled = true) {
       );
     }
   }, [client, identifier, t]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (enabled) void load();
   }, [load, enabled]);
   const chatPath = `/api/chat/${encodeURIComponent(identifier)}`;
-  const authenticate = useCallback2(
+  const authenticate = useCallback3(
     async ({ password }) => {
       const res = await client.fetchRaw(chatPath, {
         method: "POST",
@@ -1323,7 +1627,7 @@ function useChat(identifier, enabled = true) {
     },
     [client, chatPath, conversationId, load]
   );
-  const requestCode = useCallback2(
+  const requestCode = useCallback3(
     async (email) => {
       const res = await client.fetchRaw(`${chatPath}/otp`, {
         method: "POST",
@@ -1335,7 +1639,7 @@ function useChat(identifier, enabled = true) {
     },
     [client, chatPath]
   );
-  const verifyCode = useCallback2(
+  const verifyCode = useCallback3(
     async (email, otp) => {
       const res = await client.fetchRaw(`${chatPath}/otp`, {
         method: "PUT",
@@ -1350,7 +1654,7 @@ function useChat(identifier, enabled = true) {
     },
     [client, chatPath, load]
   );
-  const stop = useCallback2(() => {
+  const stop = useCallback3(() => {
     abortRef.current?.abort();
     abortRef.current = null;
     setBusy(false);
@@ -1363,7 +1667,7 @@ function useChat(identifier, enabled = true) {
       ];
     });
   }, [t]);
-  const send = useCallback2(
+  const send = useCallback3(
     async (text, files = []) => {
       const input = text.trim();
       if (!input && files.length === 0 || busy) return;
@@ -1455,15 +1759,36 @@ function ChatWidget({
   launcherLabel,
   defaultOpen = false,
   theme = "auto",
+  voice = true,
   className
 }) {
-  const [open, setOpen] = useState3(defaultOpen || mode !== "bubble");
+  const [open, setOpen] = useState4(defaultOpen || mode !== "bubble");
   const { t } = useAginies();
   const enabled = useModule("chat");
   const chat = useChat(identifier, enabled);
+  const [voiceMode, setVoiceMode] = useState4(false);
+  const [dictation, setDictation] = useState4(null);
+  const voiceModeRef = useRef3(voiceMode);
+  voiceModeRef.current = voiceMode;
+  const sendRef = useRef3(chat.send);
+  sendRef.current = chat.send;
+  const voiceControls = useVoice({
+    identifier,
+    onTranscript: (text) => {
+      if (voiceModeRef.current) void sendRef.current(text);
+      else setDictation({ id: Date.now(), text });
+    }
+  });
+  const capabilities = chat.config?.voice;
+  const voiceAvailable = voice && voiceControls.supported && capabilities?.stt === true;
   const title = chat.config?.title ?? chat.authTitle ?? launcherLabel ?? "Aginies";
   const themeClass = theme === "auto" ? void 0 : theme === "dark" ? "dark" : "light";
   if (!enabled) return null;
+  const leaveVoiceMode = () => {
+    voiceControls.cancelListening();
+    voiceControls.stopSpeaking();
+    setVoiceMode(false);
+  };
   const panel = /* @__PURE__ */ jsxs5(
     "section",
     {
@@ -1501,7 +1826,16 @@ function ChatWidget({
             onRequestCode: chat.requestCode,
             onVerifyCode: chat.verifyCode
           }
-        ) : !chat.config ? /* @__PURE__ */ jsx6("div", { className: "agi-chat__state", children: /* @__PURE__ */ jsx6(Spinner, { label: t("common", "loading") }) }) : /* @__PURE__ */ jsxs5(Fragment4, { children: [
+        ) : !chat.config ? /* @__PURE__ */ jsx6("div", { className: "agi-chat__state", children: /* @__PURE__ */ jsx6(Spinner, { label: t("common", "loading") }) }) : voiceMode ? /* @__PURE__ */ jsx6(
+          VoiceConversation,
+          {
+            messages: chat.messages,
+            busy: chat.busy,
+            voice: voiceControls,
+            speakReplies: capabilities?.tts === true,
+            onExit: leaveVoiceMode
+          }
+        ) : /* @__PURE__ */ jsxs5(Fragment4, { children: [
           /* @__PURE__ */ jsx6(
             MessageList,
             {
@@ -1510,7 +1844,22 @@ function ChatWidget({
               onAction: (action) => void chat.send(action)
             }
           ),
-          /* @__PURE__ */ jsx6(Composer, { busy: chat.busy, onSend: chat.send, onStop: chat.stop })
+          /* @__PURE__ */ jsx6(
+            Composer,
+            {
+              busy: chat.busy,
+              onSend: chat.send,
+              onStop: chat.stop,
+              dictation,
+              voice: voiceAvailable ? {
+                state: voiceControls.state,
+                error: voiceControls.error,
+                start: voiceControls.startListening,
+                stop: voiceControls.stopListening,
+                onHandsFree: () => setVoiceMode(true)
+              } : void 0
+            }
+          )
         ] }),
         /* @__PURE__ */ jsx6("footer", { className: "agi-chat__foot", children: /* @__PURE__ */ jsx6("a", { href: "https://www.aginies.com", target: "_blank", rel: "noreferrer", children: t("chat", "poweredBy") }) })
       ]
@@ -1565,53 +1914,57 @@ function MessageList({
   onAction
 }) {
   const { t } = useAginies();
-  const endRef = useRef2(null);
-  useEffect3(() => {
+  const endRef = useRef3(null);
+  useEffect4(() => {
     endRef.current?.scrollIntoView?.({ block: "end" });
   }, []);
-  return (
-    // biome-ignore lint/a11y/useSemanticElements: no native element conveys a live log
-    /* @__PURE__ */ jsxs5("div", { className: "agi-chat__messages", role: "log", "aria-live": "polite", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "agi-msg agi-msg--assistant", children: [
-        /* @__PURE__ */ jsx6("span", { className: "agi-msg__who", children: t("chat", "assistant") }),
-        /* @__PURE__ */ jsx6("div", { className: "agi-msg__body", children: welcome })
-      ] }),
-      messages.map((m) => /* @__PURE__ */ jsxs5(
-        "div",
-        {
-          className: cx("agi-msg", `agi-msg--${m.role}`, m.error && "agi-msg--error"),
-          children: [
-            /* @__PURE__ */ jsx6("span", { className: "agi-msg__who", children: m.role === "user" ? t("chat", "you") : t("chat", "assistant") }),
-            /* @__PURE__ */ jsxs5("div", { className: "agi-msg__body", children: [
-              m.structured ? /* @__PURE__ */ jsx6(StructuredUI, { response: m.structured, onAction }) : m.content ? m.role === "assistant" && !m.error ? /* @__PURE__ */ jsx6(Markdown, { className: "agi-md", text: m.content }) : /* @__PURE__ */ jsx6("p", { children: m.content }) : m.streaming ? /* @__PURE__ */ jsxs5("span", { className: "agi-msg__thinking", children: [
-                /* @__PURE__ */ jsx6(Spinner, { label: t("chat", "thinking") }),
-                " ",
-                t("chat", "thinking")
-              ] }) : null,
-              m.attachments && m.attachments.length > 0 && /* @__PURE__ */ jsx6("ul", { className: "agi-msg__files", "aria-label": t("chat", "attachments"), children: m.attachments.map((file, n) => /* @__PURE__ */ jsxs5("li", { className: "agi-file", children: [
-                /* @__PURE__ */ jsx6(FileGlyph, {}),
-                /* @__PURE__ */ jsx6("span", { className: "agi-file__name", children: file.name }),
-                /* @__PURE__ */ jsx6("span", { className: "agi-file__size", children: formatBytes(file.size) })
-              ] }, n)) })
-            ] })
-          ]
-        },
-        m.id
-      )),
-      /* @__PURE__ */ jsx6("div", { ref: endRef })
-    ] })
-  );
+  return /* @__PURE__ */ jsxs5("div", { className: "agi-chat__messages", role: "log", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "agi-msg agi-msg--assistant", children: [
+      /* @__PURE__ */ jsx6("span", { className: "agi-msg__who", children: t("chat", "assistant") }),
+      /* @__PURE__ */ jsx6("div", { className: "agi-msg__body", children: welcome })
+    ] }),
+    messages.map((m) => /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: cx("agi-msg", `agi-msg--${m.role}`, m.error && "agi-msg--error"),
+        children: [
+          /* @__PURE__ */ jsx6("span", { className: "agi-msg__who", children: m.role === "user" ? t("chat", "you") : t("chat", "assistant") }),
+          /* @__PURE__ */ jsxs5("div", { className: "agi-msg__body", children: [
+            m.structured ? /* @__PURE__ */ jsx6(StructuredUI, { response: m.structured, onAction }) : m.content ? m.role === "assistant" && !m.error ? /* @__PURE__ */ jsx6(Markdown, { className: "agi-md", text: m.content }) : /* @__PURE__ */ jsx6("p", { children: m.content }) : m.streaming ? /* @__PURE__ */ jsxs5("span", { className: "agi-msg__thinking", children: [
+              /* @__PURE__ */ jsx6(Spinner, { label: t("chat", "thinking") }),
+              " ",
+              t("chat", "thinking")
+            ] }) : null,
+            m.attachments && m.attachments.length > 0 && /* @__PURE__ */ jsx6("ul", { className: "agi-msg__files", "aria-label": t("chat", "attachments"), children: m.attachments.map((file, n) => /* @__PURE__ */ jsxs5("li", { className: "agi-file", children: [
+              /* @__PURE__ */ jsx6(FileGlyph, {}),
+              /* @__PURE__ */ jsx6("span", { className: "agi-file__name", children: file.name }),
+              /* @__PURE__ */ jsx6("span", { className: "agi-file__size", children: formatBytes(file.size) })
+            ] }, n)) })
+          ] })
+        ]
+      },
+      m.id
+    )),
+    /* @__PURE__ */ jsx6("div", { ref: endRef })
+  ] });
 }
 function Composer({
   busy,
   onSend,
-  onStop
+  onStop,
+  voice,
+  dictation
 }) {
   const { t } = useAginies();
-  const [value, setValue] = useState3("");
-  const [files, setFiles] = useState3([]);
-  const [fileError, setFileError] = useState3(null);
-  const fileInput = useRef2(null);
+  const [value, setValue] = useState4("");
+  const [files, setFiles] = useState4([]);
+  const [fileError, setFileError] = useState4(null);
+  const fileInput = useRef3(null);
+  useEffect4(() => {
+    if (dictation) setValue((v) => v.trim() ? `${v.trimEnd()} ${dictation.text}` : dictation.text);
+  }, [dictation]);
+  const listening = voice?.state === "listening";
+  const transcribing = voice?.state === "transcribing";
   const submit = (e) => {
     e.preventDefault();
     if (busy) return;
@@ -1657,6 +2010,7 @@ function Composer({
       ] }, n)),
       fileError && /* @__PURE__ */ jsx6("span", { className: "agi-chat__file-error", children: fileError })
     ] }),
+    voice?.error && /* @__PURE__ */ jsx6("div", { className: "agi-chat__file-error", children: voice.error }),
     /* @__PURE__ */ jsxs5("div", { className: "agi-chat__row", children: [
       /* @__PURE__ */ jsx6(
         "input",
@@ -1700,10 +2054,156 @@ function Composer({
           autoComplete: "off"
         }
       ),
+      voice && /* @__PURE__ */ jsxs5(Fragment4, { children: [
+        /* @__PURE__ */ jsx6(
+          Button,
+          {
+            variant: "ghost",
+            type: "button",
+            className: cx("agi-chat__mic", listening && "agi-chat__mic--on"),
+            "aria-label": listening ? t("voice", "stopTalking") : t("voice", "dictate"),
+            "aria-pressed": listening,
+            title: listening ? t("voice", "stopTalking") : t("voice", "dictate"),
+            disabled: busy || transcribing,
+            onClick: () => listening ? voice.stop() : void voice.start(),
+            children: transcribing ? /* @__PURE__ */ jsx6(Spinner, { label: t("voice", "transcribing") }) : /* @__PURE__ */ jsx6(MicGlyph, {})
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          Button,
+          {
+            variant: "ghost",
+            type: "button",
+            "aria-label": t("voice", "handsFree"),
+            title: t("voice", "handsFree"),
+            disabled: busy || listening || transcribing,
+            onClick: voice.onHandsFree,
+            children: /* @__PURE__ */ jsx6(HeadsetGlyph, {})
+          }
+        )
+      ] }),
       busy ? /* @__PURE__ */ jsx6(Button, { variant: "outline", onClick: onStop, children: t("chat", "stop") }) : /* @__PURE__ */ jsx6(Button, { variant: "signal", type: "submit", disabled: !canSend, children: t("chat", "send") })
     ] })
   ] });
 }
+function VoiceConversation({
+  messages,
+  busy,
+  voice,
+  speakReplies,
+  onExit
+}) {
+  const { t } = useAginies();
+  const spokenRef = useRef3(null);
+  const mountedRef = useRef3(true);
+  const lastAssistant = [...messages].reverse().find((m) => m.role === "assistant");
+  const lastUser = [...messages].reverse().find((m) => m.role === "user");
+  useEffect4(() => {
+    mountedRef.current = true;
+    spokenRef.current = lastAssistant?.id ?? null;
+    void voice.startListening();
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const replyId = lastAssistant?.id;
+  const replyStreaming = lastAssistant?.streaming === true;
+  useEffect4(() => {
+    if (!lastAssistant || replyStreaming || replyId === spokenRef.current) return;
+    spokenRef.current = replyId ?? null;
+    const run = async () => {
+      if (speakReplies && lastAssistant.content && !lastAssistant.error) {
+        await voice.speak(lastAssistant.content);
+      }
+      if (mountedRef.current) await voice.startListening();
+    };
+    void run();
+  }, [replyId, replyStreaming]);
+  const status = voice.state === "listening" ? t("voice", "listening") : voice.state === "transcribing" ? t("voice", "transcribing") : voice.state === "speaking" ? t("voice", "speaking") : busy ? t("voice", "thinking") : t("voice", "idle");
+  const hint = voice.state === "listening" ? t("voice", "stopTalking") : voice.state === "speaking" ? t("voice", "interrupt") : voice.state === "transcribing" || busy ? "" : t("voice", "talk");
+  const tap = () => {
+    if (voice.state === "listening") voice.stopListening();
+    else if (voice.state === "speaking") {
+      voice.stopSpeaking();
+      void voice.startListening();
+    } else if (voice.state === "idle" && !busy) void voice.startListening();
+  };
+  return /* @__PURE__ */ jsxs5("section", { className: "agi-voice", "aria-label": t("voice", "handsFree"), children: [
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        className: "agi-voice__exit",
+        onClick: onExit,
+        "aria-label": t("voice", "exit"),
+        children: "\xD7"
+      }
+    ),
+    /* @__PURE__ */ jsx6("div", { className: "agi-voice__status", "aria-live": "polite", children: status }),
+    lastUser?.content && /* @__PURE__ */ jsx6("p", { className: "agi-voice__you", children: lastUser.content }),
+    /* @__PURE__ */ jsx6("div", { className: "agi-voice__reply", children: lastAssistant?.content ? /* @__PURE__ */ jsx6(Markdown, { className: "agi-md", text: lastAssistant.content }) : busy ? /* @__PURE__ */ jsx6(Spinner, { label: t("voice", "thinking") }) : null }),
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        className: cx(
+          "agi-voice__orb",
+          `agi-voice__orb--${voice.state}`,
+          busy && "agi-voice__orb--busy"
+        ),
+        style: { ["--agi-level"]: voice.level },
+        onClick: tap,
+        "aria-label": hint || status,
+        disabled: voice.state === "transcribing" || voice.state === "unsupported",
+        children: /* @__PURE__ */ jsx6(MicGlyph, { size: 28 })
+      }
+    ),
+    /* @__PURE__ */ jsx6("div", { className: "agi-voice__hint", children: hint }),
+    voice.error && /* @__PURE__ */ jsx6("div", { className: "agi-voice__error", children: voice.error })
+  ] });
+}
+function MicGlyph({ size = 16 }) {
+  return /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx6("rect", { x: "9", y: "3", width: "6", height: "11", rx: "3" }),
+        /* @__PURE__ */ jsx6("path", { d: "M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6" })
+      ]
+    }
+  );
+}
+function HeadsetGlyph() {
+  return /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx6("path", { d: "M4 14v-2a8 8 0 0 1 16 0v2" }),
+        /* @__PURE__ */ jsx6("rect", { x: "3", y: "13", width: "4", height: "6", rx: "1.5" }),
+        /* @__PURE__ */ jsx6("rect", { x: "17", y: "13", width: "4", height: "6", rx: "1.5" }),
+        /* @__PURE__ */ jsx6("path", { d: "M19 19v1a2 2 0 0 1-2 2h-3" })
+      ]
+    }
+  );
+}
 function readFile(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -1767,9 +2267,9 @@ function PasswordAuth({
   onPassword
 }) {
   const { t } = useAginies();
-  const [value, setValue] = useState3("");
-  const [error, setError] = useState3(null);
-  const [pending, setPending] = useState3(false);
+  const [value, setValue] = useState4("");
+  const [error, setError] = useState4(null);
+  const [pending, setPending] = useState4(false);
   const submit = async (e) => {
     e.preventDefault();
     setPending(true);
@@ -1799,12 +2299,12 @@ function EmailAuth({
   onVerifyCode
 }) {
   const { t } = useAginies();
-  const [email, setEmail] = useState3("");
-  const [code, setCode] = useState3("");
-  const [step, setStep] = useState3("email");
-  const [error, setError] = useState3(null);
-  const [notice, setNotice] = useState3(null);
-  const [pending, setPending] = useState3(false);
+  const [email, setEmail] = useState4("");
+  const [code, setCode] = useState4("");
+  const [step, setStep] = useState4("email");
+  const [error, setError] = useState4(null);
+  const [notice, setNotice] = useState4(null);
+  const [pending, setPending] = useState4(false);
   const request = async () => {
     setPending(true);
     setError(null);
@@ -2015,7 +2515,7 @@ function CostBars({ items, format = usd, className, ...props }) {
 }
 
 // src/run/agent-runner.tsx
-import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
 
 // src/run/run-client.ts
 async function* runAgent(client, workflowId, options, signal) {
@@ -2155,19 +2655,19 @@ function decodeRunFrame(frame) {
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function useAgentRun(workflowId, apiKey) {
   const { client, t } = useAginies();
-  const [status, setStatus] = useState4("idle");
-  const [text, setText] = useState4("");
-  const [steps, setSteps] = useState4([]);
-  const [output, setOutput] = useState4(null);
-  const [error, setError] = useState4(null);
-  const [executionId, setExecutionId] = useState4();
-  const abortRef = useRef3(null);
-  const cancel = useCallback3(() => {
+  const [status, setStatus] = useState5("idle");
+  const [text, setText] = useState5("");
+  const [steps, setSteps] = useState5([]);
+  const [output, setOutput] = useState5(null);
+  const [error, setError] = useState5(null);
+  const [executionId, setExecutionId] = useState5();
+  const abortRef = useRef4(null);
+  const cancel = useCallback4(() => {
     abortRef.current?.abort();
     abortRef.current = null;
     setStatus((s) => s === "running" ? "idle" : s);
   }, []);
-  const run = useCallback3(
+  const run = useCallback4(
     async (input) => {
       abortRef.current?.abort();
       const controller = new AbortController();
@@ -2244,7 +2744,7 @@ function AgentRunner({
   const { t } = useAginies();
   const enabled = useModule("run");
   const agent = useAgentRun(workflowId, apiKey);
-  const [values, setValues] = useState4(
+  const [values, setValues] = useState5(
     () => Object.fromEntries(
       fields.map((f) => [f.name, f.defaultValue ?? (f.type === "boolean" ? false : "")])
     )
@@ -2256,9 +2756,9 @@ function AgentRunner({
     const input = fields.length === 1 && fields[0]?.name === "input" && fields[0]?.type === "textarea" ? values.input : values;
     await agent.run(input);
   };
-  const onResultRef = useRef3(onResult);
+  const onResultRef = useRef4(onResult);
   onResultRef.current = onResult;
-  useEffect4(() => {
+  useEffect5(() => {
     if (agent.status === "done") onResultRef.current?.(agent.output);
   }, [agent.status, agent.output]);
   if (!enabled) return null;
@@ -2378,6 +2878,7 @@ export {
   getPausedExecution,
   init,
   initialValues,
+  isVoiceSupported,
   listPausedExecutions,
   outputOf,
   parseFieldValue,
@@ -2391,6 +2892,7 @@ export {
   useAginies,
   useApproval,
   useChat,
-  useModule
+  useModule,
+  useVoice
 };
 //# sourceMappingURL=index.js.map