diff --git a/frontend/src/components/ai-elements/prompt-input.tsx b/frontend/src/components/ai-elements/prompt-input.tsx index 4e3a195..a094def 100644 --- a/frontend/src/components/ai-elements/prompt-input.tsx +++ b/frontend/src/components/ai-elements/prompt-input.tsx @@ -1128,6 +1128,8 @@ export const PromptInputSpeechButton = ({ null, ); const recognitionRef = useRef(null); + const callbacksRef = useRef({ textareaRef, onTranscriptionChange }); + callbacksRef.current = { textareaRef, onTranscriptionChange }; useEffect(() => { if ( @@ -1160,15 +1162,18 @@ export const PromptInputSpeechButton = ({ } } - if (finalTranscript && textareaRef?.current) { - const textarea = textareaRef.current; + const currentTextareaRef = callbacksRef.current.textareaRef; + const currentOnTranscriptionChange = callbacksRef.current.onTranscriptionChange; + + if (finalTranscript && currentTextareaRef?.current) { + const textarea = currentTextareaRef.current; const currentValue = textarea.value; const newValue = currentValue + (currentValue ? " " : "") + finalTranscript; textarea.value = newValue; textarea.dispatchEvent(new Event("input", { bubbles: true })); - onTranscriptionChange?.(newValue); + currentOnTranscriptionChange?.(newValue); } }; @@ -1186,7 +1191,7 @@ export const PromptInputSpeechButton = ({ recognitionRef.current.stop(); } }; - }, [textareaRef, onTranscriptionChange]); + }, []); const toggleListening = useCallback(() => { if (!recognition) {