SpeechSynthesis dont speak the hole sentence

Question

I'm trying to use the browser's native TTS for the browser to read what's in my return. I'm separating it into chunks since he's not reading the whole sentence. And even separating it into chunks it doesn't read everything, it always stops at 190/200 characters. And don't read anything else.

The problem is that I need this to read continuously, even if it is separated into chunks or not. I need a way to read everything that is in the content of the answer. I have a button with an "audio" icon that calls the function onClick={() => handleSpeak(message.content)}

  useEffect(() => {
    if (messages.length > 0) {
      setAllMessages(prevMessages => {
        const newMessages = messages.filter(
          newMessage => !prevMessages.some(prevMessage => prevMessage.content === newMessage.content)
        );
        return [...prevMessages, ...newMessages];
      });
    }
  }, [messages]);

  const cleanText = (html) => {
    const div = document.createElement('div');
    div.innerHTML = html;
    return div.textContent || div.innerText || '';
  };

  const speakInChunks = (text) => {
    const maxChunkLength = 200; // Tamanho máximo de cada parte
    const chunks = [];

    // Divide o texto em partes de até 200 caracteres, sem cortar palavras no meio
    while (text.length > 0) {
      let chunk = text.slice(0, maxChunkLength);
      const lastSpaceIndex = chunk.lastIndexOf(' ');

      if (lastSpaceIndex > 0 && chunk.length === maxChunkLength) {
        chunk = chunk.slice(0, lastSpaceIndex); // Evita cortar palavras no meio
      }

      chunks.push(chunk);
      text = text.slice(chunk.length).trim(); // Remove a parte já falada
    }

    console.log("Chunks criados:", chunks);
    let currentChunk = 0;

    // Função para falar cada chunk
    const speakChunk = () => {
      if (currentChunk < chunks.length) {
        const utterance = new SpeechSynthesisUtterance(chunks[currentChunk]);
        utterance.lang = 'pt-BR'; // Define o idioma para português

        utterance.onend = () => {
          console.log(`Falando o chunk ${currentChunk + 1}: ${chunks[currentChunk]}`);
          currentChunk++;

          if (currentChunk < chunks.length) {
            window.speechSynthesis.pause();
            setTimeout(() => {
              window.speechSynthesis.resume();
              speakChunk();
            }, 500); // Pausa de 500ms entre os chunks
          }
        };

        window.speechSynthesis.speak(utterance); // Fala o chunk atual
      }
    };

    window.speechSynthesis.cancel(); // Cancela qualquer fala anterior
    speakChunk(); // Inicia o processo de fala
  };

  const handleSpeak = (messageContent) => {
    const cleanedText = cleanText(messageContent);
    speakInChunks(cleanedText); // Fala o texto em partes menores
  };