INIT

src/hooks/useTts.ts

@@ -0,0 +1,34 @@
+import { useCallback, useRef } from "react";
+import { useStore } from "../state/store";
+
+/**
+ * Speaks text with the browser's on-device speech synthesis. The Hermes API
+ * server has no TTS endpoint, so replies are voiced client-side.
+ */
+export function useTts() {
+  const voiceName = useStore((s) => s.config.ttsVoice);
+  const audioRef = useRef<SpeechSynthesisUtterance | null>(null);
+
+  const stop = useCallback(() => {
+    if (typeof speechSynthesis !== "undefined") speechSynthesis.cancel();
+    audioRef.current = null;
+  }, []);
+
+  const speak = useCallback(
+    (text: string) => {
+      const clean = text.trim();
+      if (!clean || typeof speechSynthesis === "undefined") return;
+      speechSynthesis.cancel();
+      const u = new SpeechSynthesisUtterance(clean);
+      if (voiceName) {
+        const voice = speechSynthesis.getVoices().find((v) => v.name === voiceName);
+        if (voice) u.voice = voice;
+      }
+      audioRef.current = u;
+      speechSynthesis.speak(u);
+    },
+    [voiceName],
+  );
+
+  return { speak, stop };
+}