+
)}
- {!isUser && (onReport || (isFailed && onRetry)) && (
+ {!isUser && (onReport || onToggleSpeak || (isFailed && onRetry)) && (
+ {onToggleSpeak && (
+
+ {speaking ? : }
+
+ )}
{onReport && (
<>
@@ -78,6 +84,33 @@ function MessageBubble({ msg, index, authorAvatar, authorName, onReport, reports
);
}
+/** Live voice waveform: mirrored gradient bars glowing with the input level. */
+function Waveform({ levels }: { levels: number[] }) {
+ const BARS = 48;
+ const padded = [...Array(Math.max(0, BARS - levels.length)).fill(0), ...levels].slice(-BARS) as number[];
+ return (
+
+ {padded.map((lv, i) => {
+ const mid = (BARS - 1) / 2;
+ const edge = 1 - Math.abs(i - mid) / mid; // taller in the middle
+ const h = Math.max(6, Math.min(100, (8 + lv * 92) * (0.35 + edge * 0.65)));
+ return (
+ 0.12 ? "0 0 8px rgb(var(--ka-accent-500) / 0.55)" : "none",
+ }}
+ />
+ );
+ })}
+
+ );
+}
+
function ReportDialog({ open, onClose, conversationId, messageIndex, content, prompt, model }: {
open: boolean;
onClose: () => void;
@@ -243,6 +276,153 @@ export function Chat({
const taRef = useRef(null);
const imgRef = useRef(null);
const txtRef = useRef(null);
+ // TTS playback: which assistant bubble is speaking (null = silent).
+ const [speakingKey, setSpeakingKey] = useState(null);
+ const voicesRef = useRef([]);
+ // Voice input: live recording session (null = composer idle).
+ const [rec, setRec] = useState<{
+ stream: MediaStream;
+ audioCtx: AudioContext;
+ analyser: AnalyserNode;
+ recog: Recognizer | null;
+ startTs: number;
+ } | null>(null);
+ const [recLevels, setRecLevels] = useState([]);
+ const [recElapsed, setRecElapsed] = useState(0);
+ const [recText, setRecText] = useState("");
+ const recRaf = useRef(0);
+ const recTimer = useRef | null>(null);
+ const micOn = sttSupported();
+
+ useEffect(() => {
+ listTtsVoices().then((v) => { voicesRef.current = v; });
+ return () => stopSpeak();
+ }, []);
+
+ // New message / conversation: stop any playback (never leak speech).
+ useEffect(() => {
+ stopSpeak();
+ setSpeakingKey(null);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [conv?.id]);
+
+ useEffect(() => {
+ return () => {
+ cancelRec(false);
+ stopSpeak();
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ function toggleSpeak(index: number, text: string) {
+ if (speakingKey === index) {
+ stopSpeak();
+ setSpeakingKey(null);
+ return;
+ }
+ const ok = speak(text, getVoicePrefs(), voicesRef.current, {
+ onend: () => setSpeakingKey(null),
+ onerror: () => setSpeakingKey(null),
+ });
+ if (ok) setSpeakingKey(index);
+ }
+
+ function cleanupRec(r: NonNullable) {
+ cancelAnimationFrame(recRaf.current);
+ if (recTimer.current) clearInterval(recTimer.current);
+ recTimer.current = null;
+ try { r.recog?.abort(); } catch { /* ignore */ }
+ try { r.audioCtx.close(); } catch { /* ignore */ }
+ for (const tr of r.stream.getTracks()) {
+ try { tr.stop(); } catch { /* ignore */ }
+ }
+ }
+
+ function cancelRec(reset = true) {
+ setRec((cur) => {
+ if (cur) cleanupRec(cur);
+ return null;
+ });
+ if (reset) {
+ setRecLevels([]);
+ setRecElapsed(0);
+ setRecText("");
+ }
+ }
+
+ async function startRec() {
+ if (rec || sending || readOnly || !micOn) return;
+ try {
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+ const audioCtx = new AudioContext();
+ const src = audioCtx.createMediaStreamSource(stream);
+ const analyser = audioCtx.createAnalyser();
+ analyser.fftSize = 512;
+ src.connect(analyser);
+ const data = new Uint8Array(analyser.fftSize);
+ const Ctor = recognizerCtor();
+ const recog: Recognizer | null = Ctor ? new Ctor() : null;
+ let finals = "";
+ if (recog) {
+ recog.lang = navigator.language || "fr-FR";
+ recog.interimResults = true;
+ recog.continuous = true;
+ recog.onresult = (ev) => {
+ let interim = "";
+ for (const res of Array.from(ev.results)) {
+ if (res.isFinal) finals += res[0]!.transcript;
+ else interim += res[0]!.transcript;
+ }
+ setRecText((finals + " " + interim).trim());
+ };
+ recog.onerror = () => {};
+ try { recog.start(); } catch { /* already started */ }
+ }
+ const startTs = Date.now();
+ const session = { stream, audioCtx, analyser, recog, startTs };
+ setRec(session);
+ setRecLevels([]);
+ setRecText("");
+ setRecElapsed(0);
+ let lastPush = 0;
+ const loop = () => {
+ analyser.getByteTimeDomainData(data);
+ let sum = 0;
+ for (let i = 0; i < data.length; i++) {
+ const v = (data[i]! - 128) / 128;
+ sum += v * v;
+ }
+ const level = Math.min(1, Math.sqrt(sum / data.length) * 2.4);
+ const now = performance.now();
+ if (now - lastPush > 90) {
+ lastPush = now;
+ setRecLevels((prev) => [...prev.slice(-47), level]);
+ }
+ recRaf.current = requestAnimationFrame(loop);
+ };
+ recRaf.current = requestAnimationFrame(loop);
+ recTimer.current = setInterval(() => setRecElapsed((Date.now() - startTs) / 1000), 500);
+ } catch {
+ // Mic denied / unavailable: stay on the text composer.
+ cancelRec();
+ }
+ }
+
+ function stopRec() {
+ const clean = recText.trim();
+ setRec((cur) => {
+ if (cur) cleanupRec(cur);
+ return null;
+ });
+ // Transcript lands in the composer, editable before sending.
+ if (clean) {
+ setDraft((d) => (d ? `${d.trimEnd()}\n${clean}` : clean));
+ requestAnimationFrame(autoGrow);
+ }
+ setRecText("");
+ setRecLevels([]);
+ setRecElapsed(0);
+ }
const modelGroups: PickerGroup[] = (() => {
const byDriver = new Map();
@@ -263,6 +443,14 @@ export function Chat({
if (el) el.scrollTop = el.scrollHeight;
}, [messages, streaming]);
+ // A fresh message ends any playback (the glow never sticks to a stale row).
+ const msgCount = messages.length;
+ useEffect(() => {
+ stopSpeak();
+ setSpeakingKey(null);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [msgCount]);
+
function autoGrow() {
const ta = taRef.current;
if (ta) {
@@ -276,6 +464,8 @@ export function Chat({
if (readOnly) return;
const text = draft.trim();
if (!text || sending) return;
+ stopSpeak();
+ setSpeakingKey(null);
setDraft("");
requestAnimationFrame(autoGrow);
onSend(text);
@@ -329,7 +519,7 @@ export function Chat({
)}
{messages.filter((m) => m.role !== "system").map((m, i) => (
-
+
toggleSpeak(i, m.content) : undefined} />
))}
{streaming !== "" && (
@@ -422,6 +612,35 @@ export function Chat({
{t("archived.unarchive")}
+ ) : rec ? (
+
+
+
+ {fmtDuration(recElapsed)}
+
+ {recText || t("voice.listening")}
+
+
+
+
+
+