@wq-hook/volcano-react 1.0.0

package/dist/index.js

@@ -0,0 +1,1406 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AudioProgressBar: () => AudioProgressBar_default,
+  AudioWaveVisualizer: () => AudioWaveVisualizer_default,
+  splitTextByDelimiters: () => splitTextByDelimiters,
+  useMessageTTS: () => useMessageTTS,
+  useVolcanoASR: () => useVolcanoASR,
+  useVolcanoTTS: () => useVolcanoTTS
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/asr/useVolcanoASR.ts
+var import_react = require("react");
+var import_asr = require("@wq-hook/volcano-sdk/asr");
+var DEFAULT_URL = "wss://openspeech.bytedance.com/api/v3/sauc/bigmodel_async";
+function useVolcanoASR(params) {
+  const [status, setStatus] = (0, import_react.useState)("idle");
+  const [text, setText] = (0, import_react.useState)("");
+  const [error, setError] = (0, import_react.useState)(null);
+  const asrInstanceRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    asrInstanceRef.current = (0, import_asr.LabASR)({
+      onStart: () => {
+        setStatus("recording");
+        setError(null);
+      },
+      onMessage: (msg, fullData) => {
+        if (msg) {
+          setText(msg);
+        }
+        console.log("fullData", fullData);
+      },
+      onClose: () => {
+        setStatus("idle");
+      },
+      onError: () => {
+        setStatus("error");
+        setError("Connection error");
+      }
+    });
+    return () => {
+      asrInstanceRef.current?.stopRecord();
+    };
+  }, []);
+  const start = (0, import_react.useCallback)(async () => {
+    if (!asrInstanceRef.current) return;
+    try {
+      setStatus("connecting");
+      setText("");
+      setError(null);
+      const { appId, token } = params;
+      const auth = {
+        api_app_key: appId,
+        api_access_key: `Jwt; ${token}`,
+        api_resource_id: "volc.seedasr.sauc.duration"
+      };
+      const authUrl = `${DEFAULT_URL}?${new URLSearchParams(auth).toString()}`;
+      const config = {
+        user: {
+          uid: (0, import_asr.uuid)()
+        },
+        audio: {
+          format: "pcm",
+          rate: 16e3,
+          bits: 16,
+          channel: 1
+        },
+        request: {
+          model_name: "bigmodel",
+          enable_punc: true,
+          result_type: "full"
+        }
+      };
+      asrInstanceRef.current.connect({
+        url: authUrl,
+        config
+      });
+      await asrInstanceRef.current.startRecord({}, () => {
+      });
+    } catch (err) {
+      const error2 = err;
+      setError(error2.message || "Failed to start ASR");
+      setStatus("error");
+    }
+  }, [params]);
+  const stop = (0, import_react.useCallback)(() => {
+    if (!asrInstanceRef.current) return;
+    asrInstanceRef.current.stopRecord();
+  }, []);
+  return {
+    status,
+    text,
+    error,
+    start,
+    stop
+  };
+}
+
+// src/tts/useVolcanoTTS.ts
+var import_tts = require("@wq-hook/volcano-sdk/tts");
+var import_volcano_sdk = require("@wq-hook/volcano-sdk");
+var import_react2 = require("react");
+var import_emoji_regex = __toESM(require("emoji-regex"));
+
+// src/tts/TTSCache.ts
+var DB_NAME = "VolcanoTTSCache";
+var STORE_NAME = "audio_segments";
+var DB_VERSION = 1;
+var memoryCache = /* @__PURE__ */ new Map();
+var dbPromise = null;
+function getDB() {
+  if (dbPromise) return dbPromise;
+  dbPromise = new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+    request.onerror = () => {
+      console.error("IndexedDB error:", request.error);
+      reject(request.error);
+    };
+    request.onsuccess = () => {
+      resolve(request.result);
+    };
+    request.onupgradeneeded = (event) => {
+      const db = event.target.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, { keyPath: "key" });
+      }
+    };
+  });
+  return dbPromise;
+}
+var TTSCache = {
+  get: async (key) => {
+    if (memoryCache.has(key)) {
+      console.log("[TTSCache] L1 Hit:", key);
+      return memoryCache.get(key);
+    }
+    try {
+      const db = await getDB();
+      return new Promise((resolve) => {
+        const transaction = db.transaction([STORE_NAME], "readonly");
+        const store = transaction.objectStore(STORE_NAME);
+        const request = store.get(key);
+        request.onsuccess = async () => {
+          const result = request.result;
+          if (result) {
+            console.log("[TTSCache] L2 Hit:", key);
+            memoryCache.set(key, result.data);
+            resolve(result.data);
+          } else {
+            resolve(void 0);
+          }
+        };
+        request.onerror = () => resolve(void 0);
+      });
+    } catch (e) {
+      console.warn("TTSCache L2 read failed", e);
+      return void 0;
+    }
+  },
+  set: async (key, data) => {
+    memoryCache.set(key, data);
+    if (memoryCache.size > 50) {
+      const firstKey = memoryCache.keys().next().value;
+      if (firstKey) memoryCache.delete(firstKey);
+    }
+    try {
+      const db = await getDB();
+      const transaction = db.transaction([STORE_NAME], "readwrite");
+      const store = transaction.objectStore(STORE_NAME);
+      store.put({
+        key,
+        data,
+        timestamp: Date.now()
+      });
+    } catch (e) {
+      console.warn("TTSCache L2 write failed", e);
+    }
+  },
+  generateKey: (text, voice, speed) => {
+    const textHash = simpleHash(text);
+    return `tts_${voice}_${speed}_${textHash}`;
+  },
+  delete: async (key) => {
+    memoryCache.delete(key);
+    try {
+      const db = await getDB();
+      const transaction = db.transaction([STORE_NAME], "readwrite");
+      const store = transaction.objectStore(STORE_NAME);
+      store.delete(key);
+    } catch (e) {
+      console.warn("TTSCache L2 delete failed", e);
+    }
+  },
+  clear: async () => {
+    memoryCache.clear();
+    try {
+      const db = await getDB();
+      const transaction = db.transaction([STORE_NAME], "readwrite");
+      transaction.objectStore(STORE_NAME).clear();
+    } catch (e) {
+    }
+  }
+};
+function simpleHash(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash).toString(36);
+}
+
+// src/tts/useVolcanoTTS.ts
+var URL2 = "wss://openspeech.bytedance.com/api/v3/tts/bidirection";
+function buildFullUrl(url, auth) {
+  const arr = [];
+  for (const key in auth) {
+    if (auth[key]) {
+      arr.push(
+        `${key}=${encodeURIComponent(auth[key])}`
+      );
+    }
+  }
+  return `${url}?${arr.join("&")}`;
+}
+function useVolcanoTTS({
+  ttsConfig,
+  audioParams
+}) {
+  const [status, setStatus] = (0, import_react2.useState)("idle");
+  const [error, setError] = (0, import_react2.useState)(null);
+  const client = (0, import_react2.useRef)(null);
+  const currentAudioBuffersRef = (0, import_react2.useRef)([]);
+  const cacheKeyRef = (0, import_react2.useRef)("");
+  const cleanupAll = (0, import_react2.useCallback)(() => {
+    if (client.current) {
+      try {
+        client.current.finishConnection();
+        client.current = null;
+        setTimeout(() => {
+          setStatus("idle");
+          setError(null);
+        }, 0);
+      } catch (err) {
+        console.error("[useTTS] cleanupAll error", err);
+      }
+    }
+  }, []);
+  const connect = (0, import_react2.useCallback)(async () => {
+    try {
+      setStatus("connecting");
+      setError(null);
+      const clientInstance = (0, import_tts.WebsocketMSE)({ autoStartSession: false });
+      client.current = clientInstance;
+      const auth = {};
+      if (ttsConfig.token) {
+        auth.api_app_key = ttsConfig.appid;
+        auth.api_access_key = `Jwt; ${ttsConfig.token}`;
+        auth.api_resource_id = ttsConfig.resourceId || "seed-tts-2.0";
+      }
+      const fullUrl = buildFullUrl(URL2, auth);
+      const audioUrl = clientInstance.start({
+        url: fullUrl,
+        config: {
+          user: {
+            uid: `feewee-tts-user-${Date.now()}`
+          },
+          namespace: ttsConfig.namespace || "BidirectionalTTS",
+          req_params: {
+            speaker: audioParams?.speaker || "zh_female_vv_uranus_bigtts",
+            audio_params: {
+              ...audioParams
+            },
+            additions: JSON.stringify({
+              enable_language_detector: true,
+              disable_markdown_filter: true,
+              enable_latex_tn: true
+              // max_length_to_filter_parenthesis: 100,
+            })
+          }
+        },
+        onWSError(errMsg) {
+          setStatus("error");
+          setError("\u8FDE\u63A5\u9519\u8BEF");
+          console.error("[useTTS] onWSError", errMsg);
+        },
+        onStart() {
+          setStatus("connected");
+          console.log("[useTTS] onStart");
+        },
+        onSessionStarted() {
+          setStatus("session-started");
+          console.log("[useTTS] onSessionStarted");
+        },
+        onSessionFinished() {
+          setStatus("connected");
+          console.log("[useTTS] onSessionFinished");
+          if (currentAudioBuffersRef.current.length > 0 && cacheKeyRef.current) {
+            const totalSize = currentAudioBuffersRef.current.reduce((acc, cur) => acc + cur.byteLength, 0);
+            if (totalSize > 512) {
+              TTSCache.set(cacheKeyRef.current, [...currentAudioBuffersRef.current]);
+            } else {
+              console.warn("[useTTS] Audio data too small, skip caching:", totalSize);
+            }
+          }
+        },
+        onTTSSentenceStart(val) {
+          console.log("[useTTS] onTTSSentenceStart", val);
+        },
+        onTTSSentenceEnd(val) {
+          console.log("[useTTS] onTTSSentenceEnd", val);
+        },
+        onError(err) {
+          setStatus("error");
+          setError(err.msg || "\u8FDE\u63A5\u9519\u8BEF");
+          console.error("[useTTS] onError", err);
+        },
+        onClose() {
+          cleanupAll();
+        },
+        onMessage(audioBuffer) {
+          console.log("[useTTS] onMessage", audioBuffer);
+          currentAudioBuffersRef.current.push(audioBuffer);
+        }
+      });
+      return audioUrl;
+    } catch (err) {
+      setStatus("error");
+      setError(err instanceof Error ? err.message : "Unknown error");
+      throw err;
+    }
+  }, [ttsConfig, audioParams, cleanupAll]);
+  const disconnect = (0, import_react2.useCallback)(() => {
+    cleanupAll();
+    setStatus("idle");
+    setError(null);
+  }, [cleanupAll]);
+  const finishSession = (0, import_react2.useCallback)(() => {
+    if (!client.current) {
+      throw new Error("Client not connected");
+    }
+    client.current.finishSession();
+  }, []);
+  const startSession = (0, import_react2.useCallback)(() => {
+    if (!client.current) {
+      throw new Error("Client not connected");
+    }
+    client.current?.startSession();
+  }, []);
+  const sendText = (0, import_react2.useCallback)(async (text) => {
+    if (!client.current) {
+      throw new Error("Client not connected");
+    }
+    const speed = audioParams?.speech_rate || 0;
+    const voice = audioParams?.speaker || "zh_female_vv_uranus_bigtts";
+    const cacheKey = TTSCache.generateKey(text, voice, speed);
+    cacheKeyRef.current = cacheKey;
+    currentAudioBuffersRef.current = [];
+    const cached = await TTSCache.get(cacheKey);
+    if (cached && cached.length > 0) {
+      const totalSize = cached.reduce((acc, cur) => acc + cur.byteLength, 0);
+      if (totalSize < 1024) {
+        console.warn("[useTTS] Cached data too small, invalidating cache:", totalSize);
+        await TTSCache.delete(cacheKey);
+      } else {
+        console.log(
+          "[useTTS] Cache hit",
+          cacheKey,
+          "chunks:",
+          cached.length,
+          "totalSize:",
+          totalSize
+        );
+        if (client.current && typeof client.current.appendBuffer === "function") {
+          cached.forEach((buf) => client.current?.appendBuffer(buf));
+          if (typeof client.current.closeStream === "function") {
+            client.current.closeStream();
+          }
+          if (typeof client.current.finishConnection === "function") {
+            client.current.finishConnection();
+          }
+          return;
+        } else {
+          console.warn(
+            "[useTTS] Cache hit but client.appendBuffer is missing. Falling back to network."
+          );
+        }
+      }
+    }
+    const formatText = import_volcano_sdk.MarkdownFormatter.format(text).replace((0, import_emoji_regex.default)(), "");
+    console.log("[useTTS] sendText", formatText);
+    client.current.sendText(formatText);
+    setTimeout(() => {
+      client.current?.finishSession();
+    }, 50);
+  }, [audioParams]);
+  return {
+    status,
+    error,
+    connect,
+    disconnect,
+    startSession,
+    finishSession,
+    sendText
+  };
+}
+
+// src/tts/useMessageTTS.ts
+var import_tts2 = require("@wq-hook/volcano-sdk/tts");
+var import_volcano_sdk2 = require("@wq-hook/volcano-sdk");
+var import_react3 = require("react");
+var import_emoji_regex2 = __toESM(require("emoji-regex"));
+
+// src/tts/TextSplitter.ts
+function splitTextByDelimiters(text, minLength = 10, maxLength = 150) {
+  const segments = [];
+  let cleanText = text.replace(/[\u200B-\u200D\uFEFF]/g, "");
+  const sentenceEndRegex = /([。！？.!?]+[”"']?)/g;
+  const rawSegments = cleanText.split(sentenceEndRegex);
+  let currentBuffer = "";
+  for (let i = 0; i < rawSegments.length; i++) {
+    const part = rawSegments[i];
+    if (sentenceEndRegex.test(part)) {
+      currentBuffer += part;
+    } else {
+      if (part.trim().length === 0) continue;
+      if (currentBuffer.length + part.length > maxLength && currentBuffer.length >= minLength) {
+        segments.push({
+          index: segments.length,
+          content: currentBuffer.trim(),
+          length: currentBuffer.trim().length
+        });
+        currentBuffer = part;
+      } else {
+        currentBuffer += part;
+      }
+    }
+  }
+  const mergedSentences = [];
+  let temp = "";
+  for (let i = 0; i < rawSegments.length; i++) {
+    const part = rawSegments[i];
+    if (sentenceEndRegex.test(part)) {
+      temp += part;
+      mergedSentences.push(temp);
+      temp = "";
+    } else {
+      if (temp.length > 0) {
+      }
+      temp += part;
+    }
+  }
+  if (temp.trim().length > 0) {
+    mergedSentences.push(temp);
+  }
+  segments.length = 0;
+  currentBuffer = "";
+  for (const sent of mergedSentences) {
+    if (currentBuffer.length + sent.length > maxLength) {
+      if (currentBuffer.trim().length > 0) {
+        segments.push({
+          index: segments.length,
+          content: currentBuffer.trim(),
+          length: currentBuffer.trim().length
+        });
+      }
+      currentBuffer = sent;
+    } else {
+      currentBuffer += sent;
+    }
+  }
+  if (currentBuffer.trim().length > 0) {
+    segments.push({
+      index: segments.length,
+      content: currentBuffer.trim(),
+      length: currentBuffer.trim().length
+    });
+  }
+  return segments;
+}
+
+// src/tts/Metrics.ts
+var NoopMetricsCollector = class {
+  record(_metric) {
+  }
+};
+
+// src/tts/useMessageTTS.ts
+var WS_URL = "wss://openspeech.bytedance.com/api/v3/tts/bidirection";
+var activeInstances = /* @__PURE__ */ new Map();
+function buildFullUrl2(url, params) {
+  const { ...auth } = params;
+  const arr = [];
+  for (const key in auth) {
+    if (Object.prototype.hasOwnProperty.call(auth, key)) {
+      arr.push(
+        `${key}=${encodeURIComponent(auth[key])}`
+      );
+    }
+  }
+  return `${url}?${arr.join("&")}`;
+}
+function useMessageTTS({
+  ttsConfig,
+  audioParams,
+  autoPlay = true,
+  metricsCollector = new NoopMetricsCollector(),
+  onPlayStart,
+  onPlayPause,
+  onPlayResume,
+  onPlayEnd,
+  onError,
+  exclusive = true,
+  fallbackVoice,
+  visualization
+}) {
+  const [isPlaying, setIsPlaying] = (0, import_react3.useState)(false);
+  const [isPaused, setIsPaused] = (0, import_react3.useState)(false);
+  const [isSynthesizing, setIsSynthesizing] = (0, import_react3.useState)(false);
+  const [error, setErrorState] = (0, import_react3.useState)(null);
+  const [progress, setProgress] = (0, import_react3.useState)(0);
+  const [visualizationData, setVisualizationData] = (0, import_react3.useState)({
+    frequencyData: new Uint8Array(0),
+    timeDomainData: new Uint8Array(0)
+  });
+  const instanceId = (0, import_react3.useRef)(
+    `tts-${Date.now()}-${Math.random().toString(36).slice(2)}`
+  ).current;
+  const clientRef = (0, import_react3.useRef)(null);
+  const audioRef = (0, import_react3.useRef)(null);
+  const audioContextRef = (0, import_react3.useRef)(null);
+  const analyserRef = (0, import_react3.useRef)(null);
+  const sourceRef = (0, import_react3.useRef)(null);
+  const audioUrlRef = (0, import_react3.useRef)(null);
+  const cacheKeyRef = (0, import_react3.useRef)("");
+  const audioBuffersRef = (0, import_react3.useRef)([]);
+  const isFallbackRef = (0, import_react3.useRef)(false);
+  const fallbackUtteranceRef = (0, import_react3.useRef)(null);
+  const stopOthers = (0, import_react3.useCallback)(() => {
+    if (!exclusive) return;
+    activeInstances.forEach((instance, id) => {
+      if (id !== instanceId) {
+        instance.pause();
+      }
+    });
+  }, [exclusive, instanceId]);
+  const initAudioContext = (0, import_react3.useCallback)(() => {
+    if (!audioRef.current) return;
+    if (!audioContextRef.current) {
+      const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+      audioContextRef.current = new AudioContextClass();
+    }
+    if (audioContextRef.current.state === "suspended") {
+      audioContextRef.current.resume();
+    }
+    if (!analyserRef.current) {
+      analyserRef.current = audioContextRef.current.createAnalyser();
+      analyserRef.current.fftSize = visualization?.fftSize || 256;
+    }
+    if (!sourceRef.current) {
+      try {
+        sourceRef.current = audioContextRef.current.createMediaElementSource(
+          audioRef.current
+        );
+        sourceRef.current.connect(analyserRef.current);
+        analyserRef.current.connect(audioContextRef.current.destination);
+      } catch (e) {
+      }
+    }
+  }, []);
+  const cleanupAudio = (0, import_react3.useCallback)(() => {
+    if (audioUrlRef.current) {
+      URL.revokeObjectURL(audioUrlRef.current);
+      audioUrlRef.current = null;
+    }
+    if (audioRef.current) {
+      audioRef.current.onerror = null;
+      audioRef.current.onended = null;
+      audioRef.current.onpause = null;
+      audioRef.current.onplay = null;
+      audioRef.current.ontimeupdate = null;
+      audioRef.current.pause();
+      audioRef.current.src = "";
+      audioRef.current = null;
+    }
+    if (sourceRef.current) {
+      try {
+        sourceRef.current.disconnect();
+      } catch (e) {
+      }
+      sourceRef.current = null;
+    }
+    if (fallbackUtteranceRef.current) {
+      window.speechSynthesis.cancel();
+      fallbackUtteranceRef.current = null;
+    }
+    isFallbackRef.current = false;
+  }, []);
+  const stop = (0, import_react3.useCallback)(() => {
+    if (clientRef.current) {
+      clientRef.current.close();
+      clientRef.current = null;
+    }
+    cleanupAudio();
+    setIsPlaying(false);
+    setIsPaused(false);
+    setIsSynthesizing(false);
+    setProgress(0);
+    activeInstances.delete(instanceId);
+  }, [cleanupAudio, instanceId]);
+  const pause = (0, import_react3.useCallback)(() => {
+    if (isFallbackRef.current) {
+      window.speechSynthesis.pause();
+    } else if (audioRef.current) {
+      audioRef.current.pause();
+    }
+    setIsPaused(true);
+    setIsPlaying(false);
+    onPlayPause?.();
+  }, [onPlayPause]);
+  const resume = (0, import_react3.useCallback)(() => {
+    stopOthers();
+    if (isFallbackRef.current) {
+      window.speechSynthesis.resume();
+    } else if (audioRef.current) {
+      audioRef.current.play();
+    }
+    setIsPaused(false);
+    setIsPlaying(true);
+    onPlayResume?.();
+    activeInstances.set(instanceId, { pause });
+  }, [stopOthers, instanceId, pause, onPlayResume]);
+  const togglePlay = (0, import_react3.useCallback)(() => {
+    if (isPlaying) {
+      pause();
+    } else {
+      resume();
+    }
+  }, [isPlaying, pause, resume]);
+  const playFallback = (0, import_react3.useCallback)(
+    (text) => {
+      console.warn("[useMessageTTS] Switching to fallback TTS");
+      isFallbackRef.current = true;
+      if (clientRef.current) {
+        clientRef.current.close();
+        clientRef.current = null;
+      }
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current = null;
+      }
+      const utterance = new SpeechSynthesisUtterance(text);
+      utterance.rate = audioParams?.speech_rate || 1;
+      const voices = window.speechSynthesis.getVoices();
+      const zhVoice = voices.find((v) => v.lang.includes("zh"));
+      if (zhVoice) utterance.voice = zhVoice;
+      utterance.onstart = () => {
+        setIsPlaying(true);
+        setIsPaused(false);
+        setIsSynthesizing(false);
+        onPlayStart?.();
+        activeInstances.set(instanceId, { pause });
+      };
+      utterance.onend = () => {
+        setIsPlaying(false);
+        setIsPaused(false);
+        activeInstances.delete(instanceId);
+        onPlayEnd?.();
+      };
+      utterance.onerror = (e) => {
+        console.error("[useMessageTTS] Fallback TTS failed", e);
+        setErrorState("Fallback TTS failed");
+        onError?.(new Error("Fallback TTS failed"));
+        setIsPlaying(false);
+      };
+      fallbackUtteranceRef.current = utterance;
+      window.speechSynthesis.speak(utterance);
+    },
+    [audioParams, instanceId, onError, onPlayEnd, onPlayStart, pause]
+  );
+  const executeTTS = (0, import_react3.useCallback)(
+    async (text, targetVoice) => {
+      stop();
+      stopOthers();
+      setErrorState(null);
+      setIsSynthesizing(true);
+      setProgress(0);
+      audioBuffersRef.current = [];
+      isFallbackRef.current = false;
+      const speed = audioParams?.speech_rate || 0;
+      const voice = targetVoice;
+      const cacheKey = TTSCache.generateKey(text, voice, speed);
+      cacheKeyRef.current = cacheKey;
+      const startTime = Date.now();
+      metricsCollector.record({
+        name: "tts_request",
+        labels: { voice, speed, text_length: text.length },
+        value: 1,
+        timestamp: startTime
+      });
+      try {
+        const cachedData = await TTSCache.get(cacheKey);
+        const audio = new Audio();
+        audio.crossOrigin = "anonymous";
+        audioRef.current = audio;
+        audio.onplay = () => {
+          setIsPlaying(true);
+          setIsPaused(false);
+          onPlayStart?.();
+          initAudioContext();
+          activeInstances.set(instanceId, { pause });
+          metricsCollector.record({
+            name: "tts_latency",
+            labels: { stage: "playback", voice, speed },
+            value: Date.now() - startTime,
+            timestamp: Date.now()
+          });
+        };
+        audio.onpause = () => {
+          if (!audio.ended) {
+          }
+        };
+        audio.onended = () => {
+          setIsPlaying(false);
+          setIsPaused(false);
+          onPlayEnd?.();
+          activeInstances.delete(instanceId);
+        };
+        audio.onerror = (e) => {
+          console.error("Audio playback error:", e, audio.error);
+          metricsCollector.record({
+            name: "tts_error",
+            labels: { error_code: "playback_error", voice, detail: audio.error?.message || String(audio.error?.code) },
+            value: 1,
+            timestamp: Date.now()
+          });
+          handleError(text, voice);
+        };
+        audio.ontimeupdate = () => {
+          let duration = audio.duration;
+          if (!isFinite(duration)) {
+            if (audio.buffered.length > 0) {
+              duration = audio.buffered.end(audio.buffered.length - 1);
+            }
+          }
+          if (isFinite(duration) && duration > 0) {
+            setProgress(audio.currentTime / duration * 100);
+          }
+        };
+        if (cachedData) {
+          const totalSize = cachedData.reduce((acc, buf) => acc + buf.byteLength, 0);
+          metricsCollector.record({
+            name: "tts_cache_hit",
+            labels: { voice, speed },
+            value: 1,
+            timestamp: Date.now()
+          });
+          console.log(
+            JSON.stringify({
+              event: "tts_cache_hit",
+              cache_hit: true,
+              text_len: text.length,
+              voice,
+              speed,
+              data_size: totalSize
+            })
+          );
+          if (totalSize === 0) {
+            console.warn("[useMessageTTS] Cached data is empty, falling back to stream");
+          } else {
+            const blob = new Blob(cachedData, { type: "audio/mpeg" });
+            const url2 = URL.createObjectURL(blob);
+            audioUrlRef.current = url2;
+            audio.src = url2;
+            setIsSynthesizing(false);
+            if (autoPlay) {
+              try {
+                await audio.play();
+              } catch (err) {
+                console.warn("AutoPlay blocked", err);
+              }
+            }
+            return;
+          }
+        }
+        console.log("[useMessageTTS] Cache miss, starting stream");
+        clientRef.current = (0, import_tts2.WebsocketMSE)({ autoStartSession: true });
+        const formattedText = import_volcano_sdk2.MarkdownFormatter.format(text).replace((0, import_emoji_regex2.default)(), "");
+        const segments = splitTextByDelimiters(formattedText);
+        const url = clientRef.current.start({
+          url: buildFullUrl2(WS_URL, {
+            api_access_key: `Jwt; ${ttsConfig.token}`,
+            api_app_key: ttsConfig.appid,
+            api_resource_id: ttsConfig.resourceId || "seed-tts-2.0"
+          }),
+          config: {
+            user: {
+              uid: `req-${Date.now()}`
+            },
+            namespace: ttsConfig.namespace || "BidirectionalTTS",
+            req_params: {
+              speaker: voice,
+              audio_params: {
+                sample_rate: audioParams?.sample_rate || 24e3,
+                format: audioParams?.format || "mp3",
+                speech_rate: audioParams?.speech_rate,
+                pitch_rate: audioParams?.pitch_rate,
+                loudness_rate: audioParams?.loudness_rate
+              },
+              additions: JSON.stringify({
+                enable_language_detector: true,
+                disable_markdown_filter: true,
+                enable_latex_tn: true
+                // max_length_to_filter_parenthesis: 100,
+              })
+            }
+          },
+          onSessionStarted: () => {
+            segments.forEach((seg) => {
+              clientRef.current?.sendText(seg.content);
+            });
+            clientRef.current?.finishSession();
+          },
+          onMessage: (data) => {
+            if (audioBuffersRef.current.length === 0) {
+              console.log(
+                JSON.stringify({
+                  event: "tts_first_packet",
+                  latency_ms: Date.now() - startTime,
+                  voice
+                })
+              );
+            }
+            const buffer = data instanceof ArrayBuffer ? data.slice(0) : new Uint8Array(data).buffer;
+            audioBuffersRef.current.push(buffer);
+          },
+          onSessionFinished: () => {
+            setIsSynthesizing(false);
+            if (audioBuffersRef.current.length > 0) {
+              TTSCache.set(cacheKey, [...audioBuffersRef.current]);
+            }
+            console.log(
+              JSON.stringify({
+                event: "tts_synthesis_finished",
+                cache_hit: false,
+                text_len: text.length,
+                duration_ms: Date.now() - startTime,
+                voice,
+                speed
+              })
+            );
+          },
+          onError: (err) => {
+            console.error("TTS Synthesis error:", err);
+            metricsCollector.record({
+              name: "tts_error",
+              labels: { error_code: "synthesis_error", voice },
+              value: 1,
+              timestamp: Date.now()
+            });
+            handleError(text, voice);
+            setIsSynthesizing(false);
+          }
+        });
+        audioUrlRef.current = url;
+        audio.src = url;
+        if (autoPlay) {
+          try {
+            await audio.play();
+          } catch (e) {
+            console.warn("Autoplay blocked/pending", e);
+          }
+        }
+      } catch (err) {
+        console.error("Unexpected error in executeTTS:", err);
+        metricsCollector.record({
+          name: "tts_error",
+          labels: { error_code: "unexpected_error", voice },
+          value: 1,
+          timestamp: Date.now()
+        });
+        handleError(text, voice);
+      }
+    },
+    [
+      ttsConfig,
+      audioParams,
+      autoPlay,
+      stop,
+      stopOthers,
+      instanceId,
+      onPlayStart,
+      onPlayEnd,
+      initAudioContext,
+      pause,
+      fallbackVoice,
+      metricsCollector
+    ]
+  );
+  const handleError = (0, import_react3.useCallback)(
+    (text, failedVoice) => {
+      if (fallbackVoice && failedVoice !== fallbackVoice) {
+        console.warn(
+          `[useMessageTTS] Voice ${failedVoice} failed, switching to fallback voice ${fallbackVoice}`
+        );
+        executeTTS(text, fallbackVoice);
+      } else {
+        playFallback(text);
+      }
+    },
+    [fallbackVoice, executeTTS, playFallback]
+  );
+  const play = (0, import_react3.useCallback)(
+    (text) => {
+      const voice = audioParams?.speaker || "default";
+      return executeTTS(text, voice);
+    },
+    [audioParams, executeTTS]
+  );
+  const getFrequencyData = (0, import_react3.useCallback)(() => {
+    if (!analyserRef.current) return new Uint8Array(0);
+    const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount);
+    analyserRef.current.getByteFrequencyData(dataArray);
+    return dataArray;
+  }, []);
+  const getTimeDomainData = (0, import_react3.useCallback)(() => {
+    if (!analyserRef.current) return new Uint8Array(0);
+    const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount);
+    analyserRef.current.getByteTimeDomainData(dataArray);
+    return dataArray;
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (!visualization?.enabled) return;
+    let animId;
+    let lastUpdate = 0;
+    const interval = visualization.refreshInterval || 0;
+    const update = (timestamp) => {
+      if (isPlaying && !isPaused) {
+        if (timestamp - lastUpdate >= interval) {
+          setVisualizationData({
+            frequencyData: getFrequencyData(),
+            timeDomainData: getTimeDomainData()
+          });
+          lastUpdate = timestamp;
+        }
+        animId = requestAnimationFrame(update);
+      }
+    };
+    if (isPlaying && !isPaused) {
+      animId = requestAnimationFrame(update);
+    }
+    return () => {
+      if (animId) cancelAnimationFrame(animId);
+    };
+  }, [isPlaying, isPaused, visualization, getFrequencyData, getTimeDomainData]);
+  (0, import_react3.useEffect)(() => {
+    return () => {
+      stop();
+      if (audioContextRef.current) {
+        audioContextRef.current.close();
+      }
+    };
+  }, [stop]);
+  const seek = (0, import_react3.useCallback)((percentage) => {
+    if (audioRef.current) {
+      let duration = audioRef.current.duration;
+      if (!isFinite(duration) && audioRef.current.buffered.length > 0) {
+        duration = audioRef.current.buffered.end(audioRef.current.buffered.length - 1);
+      }
+      if (isFinite(duration) && duration > 0) {
+        const time = percentage / 100 * duration;
+        if (isFinite(time)) {
+          audioRef.current.currentTime = time;
+          setProgress(percentage);
+        }
+      }
+    }
+  }, []);
+  return {
+    isPlaying,
+    isPaused,
+    isSynthesizing,
+    error,
+    play,
+    pause,
+    resume,
+    stop,
+    togglePlay,
+    seek,
+    progress,
+    getFrequencyData,
+    getTimeDomainData,
+    visualizationData
+  };
+}
+
+// src/components/AudioWaveVisualizer.tsx
+var import_react4 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var AudioWaveVisualizer = ({
+  isPlaying,
+  isPaused,
+  frequencyData,
+  timeDomainData,
+  style = "bar",
+  color = "#8b5cf6",
+  bars = 50,
+  height = 60,
+  width = 200,
+  className,
+  styleObj
+}) => {
+  const canvasRef = (0, import_react4.useRef)(null);
+  const requestRef = (0, import_react4.useRef)(null);
+  const progressBackground = Array.isArray(color) ? `linear-gradient(90deg, ${color[0]}, ${color[1]})` : color;
+  const textColor = Array.isArray(color) ? color[0] : color;
+  const draw = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const w = canvas.width;
+    const h = canvas.height;
+    ctx.clearRect(0, 0, w, h);
+    let fillStyle = "";
+    if (Array.isArray(color)) {
+      const gradient = ctx.createLinearGradient(0, 0, w, 0);
+      gradient.addColorStop(0, color[0]);
+      gradient.addColorStop(1, color[1]);
+      fillStyle = gradient;
+    } else {
+      fillStyle = color;
+    }
+    ctx.fillStyle = fillStyle;
+    ctx.strokeStyle = fillStyle;
+    if (style === "bar" && frequencyData) {
+      const barWidth = w / bars;
+      const step = Math.floor(frequencyData.length / bars);
+      for (let i = 0; i < bars; i++) {
+        const value = frequencyData[i * step] || 0;
+        const percent = value / 255;
+        const barHeight = h * percent;
+        ctx.fillRect(i * barWidth, h - barHeight, barWidth - 2, barHeight);
+      }
+    } else if (style === "line" && timeDomainData) {
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      const sliceWidth = w / timeDomainData.length;
+      let x = 0;
+      for (let i = 0; i < timeDomainData.length; i++) {
+        const v = timeDomainData[i] / 128;
+        const y = v * h / 2;
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+        x += sliceWidth;
+      }
+      ctx.stroke();
+    } else if (style === "wave") {
+      const avg = frequencyData ? frequencyData.reduce((a, b) => a + b, 0) / frequencyData.length : 0;
+      const amplitude = avg / 255 * (h / 2);
+      ctx.beginPath();
+      for (let x = 0; x < w; x++) {
+        const y = h / 2 + Math.sin(x * 0.1 + Date.now() * 0.01) * amplitude;
+        if (x === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      }
+      ctx.stroke();
+    } else if (style === "circle" && frequencyData) {
+      const avg = frequencyData.reduce((a, b) => a + b, 0) / frequencyData.length;
+      const radius = avg / 255 * (Math.min(w, h) / 2);
+      ctx.beginPath();
+      ctx.arc(w / 2, h / 2, Math.max(5, radius), 0, 2 * Math.PI);
+      ctx.fill();
+    }
+    if (isPlaying && !isPaused) {
+      requestRef.current = requestAnimationFrame(draw);
+    }
+  };
+  (0, import_react4.useEffect)(() => {
+    if (isPlaying && !isPaused) {
+      requestRef.current = requestAnimationFrame(draw);
+    } else {
+      draw();
+      if (requestRef.current) cancelAnimationFrame(requestRef.current);
+    }
+    return () => {
+      if (requestRef.current) cancelAnimationFrame(requestRef.current);
+    };
+  }, [
+    isPlaying,
+    isPaused,
+    frequencyData,
+    timeDomainData,
+    style,
+    color
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className,
+      style: {
+        display: "inline-flex",
+        flexDirection: "column",
+        gap: "4px",
+        width,
+        ...styleObj
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "canvas",
+        {
+          ref: canvasRef,
+          width,
+          height,
+          style: { display: "block" }
+        }
+      )
+    }
+  );
+};
+var AudioWaveVisualizer_default = AudioWaveVisualizer;
+
+// src/components/AudioProgressBar.tsx
+var import_react5 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var AudioProgressBar = ({
+  progress,
+  width = "100%",
+  height = 6,
+  color = "#8b5cf6",
+  backgroundColor = "rgba(128, 128, 128, 0.2)",
+  showText = true,
+  onSeek,
+  className,
+  style
+}) => {
+  const progressBarRef = (0, import_react5.useRef)(null);
+  const containerRef = (0, import_react5.useRef)(null);
+  const progressTextRef = (0, import_react5.useRef)(null);
+  const thumbRef = (0, import_react5.useRef)(null);
+  const displayedProgress = (0, import_react5.useRef)(0);
+  const requestRef = (0, import_react5.useRef)(null);
+  const isDragging = (0, import_react5.useRef)(false);
+  const isHovering = (0, import_react5.useRef)(false);
+  const isTouch = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
+    const match = window.matchMedia("(pointer: coarse)");
+    isTouch.current = match.matches;
+    if (isTouch.current && thumbRef.current) {
+      thumbRef.current.style.opacity = "1";
+      thumbRef.current.style.transform = "translate(-50%, -50%) scale(1)";
+    }
+  }, []);
+  const progressBackground = Array.isArray(color) ? `linear-gradient(90deg, ${color[0]}, ${color[1]})` : color;
+  const textColor = Array.isArray(color) ? color[0] : color;
+  const animate = () => {
+    if (isDragging.current) {
+      requestRef.current = requestAnimationFrame(animate);
+      return;
+    }
+    const target = Math.min(100, Math.max(0, progress));
+    const current = displayedProgress.current;
+    const ease = 0.1;
+    let next = current + (target - current) * ease;
+    if (Math.abs(target - next) < 0.1) {
+      next = target;
+    }
+    displayedProgress.current = next;
+    if (progressBarRef.current) {
+      progressBarRef.current.style.width = `${next}%`;
+    }
+    if (thumbRef.current) {
+      thumbRef.current.style.left = `${next}%`;
+    }
+    if (showText && progressTextRef.current) {
+      const rounded = Math.round(next);
+      if (progressTextRef.current.textContent !== `${rounded}%`) {
+        progressTextRef.current.textContent = `${rounded}%`;
+      }
+    }
+    if (Math.abs(target - next) >= 0.1) {
+      requestRef.current = requestAnimationFrame(animate);
+    }
+  };
+  (0, import_react5.useEffect)(() => {
+    requestRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (requestRef.current) {
+        cancelAnimationFrame(requestRef.current);
+      }
+    };
+  }, [progress, showText]);
+  const calculateProgress = (clientX) => {
+    if (!containerRef.current) return 0;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const width2 = rect.width;
+    const percentage = Math.min(100, Math.max(0, x / width2 * 100));
+    return percentage;
+  };
+  const updateVisuals = (percentage) => {
+    displayedProgress.current = percentage;
+    if (progressBarRef.current) {
+      progressBarRef.current.style.width = `${percentage}%`;
+    }
+    if (thumbRef.current) {
+      thumbRef.current.style.left = `${percentage}%`;
+    }
+    if (showText && progressTextRef.current) {
+      const rounded = Math.round(percentage);
+      if (progressTextRef.current.textContent !== `${rounded}%`) {
+        progressTextRef.current.textContent = `${rounded}%`;
+      }
+    }
+  };
+  const updateThumbVisibility = (visible) => {
+    if (!thumbRef.current || isTouch.current) return;
+    if (visible) {
+      thumbRef.current.style.opacity = "1";
+      thumbRef.current.style.transform = "translate(-50%, -50%) scale(1)";
+    } else {
+      thumbRef.current.style.opacity = "0";
+      thumbRef.current.style.transform = "translate(-50%, -50%) scale(0.8)";
+    }
+  };
+  const handleMouseEnter = () => {
+    if (!onSeek) return;
+    isHovering.current = true;
+    updateThumbVisibility(true);
+  };
+  const handleMouseLeave = () => {
+    if (!onSeek) return;
+    isHovering.current = false;
+    if (!isDragging.current) {
+      updateThumbVisibility(false);
+    }
+  };
+  const handleMouseDown = (e) => {
+    if (!onSeek) return;
+    e.preventDefault();
+    e.stopPropagation();
+    isDragging.current = true;
+    updateThumbVisibility(true);
+    const percentage = calculateProgress(e.clientX);
+    updateVisuals(percentage);
+    const handleMouseMove = (e2) => {
+      if (isDragging.current) {
+        e2.preventDefault();
+        const percentage2 = calculateProgress(e2.clientX);
+        updateVisuals(percentage2);
+      }
+    };
+    const handleMouseUp = (e2) => {
+      if (isDragging.current) {
+        e2.preventDefault();
+        isDragging.current = false;
+        const percentage2 = calculateProgress(e2.clientX);
+        onSeek(percentage2);
+        if (!isHovering.current) {
+          updateThumbVisibility(false);
+        }
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      }
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        width,
+        cursor: onSeek ? "pointer" : "default",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        touchAction: "none",
+        padding: "4px 0",
+        // 增加点击区域
+        ...style
+      },
+      onMouseDown: handleMouseDown,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            ref: containerRef,
+            style: {
+              flex: 1,
+              height: `${height}px`,
+              backgroundColor,
+              borderRadius: `${height / 2}px`,
+              position: "relative"
+              // 允许绝对定位子元素
+              // overflow: "hidden", // 移除 overflow hidden 以显示滑块
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  ref: progressBarRef,
+                  style: {
+                    width: `${displayedProgress.current}%`,
+                    // 初始值
+                    height: "100%",
+                    background: progressBackground,
+                    borderRadius: `${height / 2}px`
+                  }
+                }
+              ),
+              onSeek && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  ref: thumbRef,
+                  style: {
+                    position: "absolute",
+                    left: `${displayedProgress.current}%`,
+                    top: "50%",
+                    transform: "translate(-50%, -50%) scale(0.8)",
+                    // 初始略微缩小
+                    width: `${Math.max(12, height * 2)}px`,
+                    height: `${Math.max(12, height * 2)}px`,
+                    borderRadius: "50%",
+                    backgroundColor: "#fff",
+                    border: `2px solid ${textColor}`,
+                    boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
+                    opacity: 0,
+                    // 默认隐藏
+                    transition: "opacity 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                    pointerEvents: "none",
+                    // 让点击穿透到 container
+                    zIndex: 10
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        showText && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "span",
+          {
+            ref: progressTextRef,
+            style: {
+              fontSize: "12px",
+              color: textColor,
+              minWidth: "32px",
+              textAlign: "right",
+              fontFamily: "monospace",
+              lineHeight: 1
+            },
+            children: [
+              Math.round(displayedProgress.current),
+              "%"
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var AudioProgressBar_default = AudioProgressBar;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AudioProgressBar,
+  AudioWaveVisualizer,
+  splitTextByDelimiters,
+  useMessageTTS,
+  useVolcanoASR,
+  useVolcanoTTS
+});