STT+VAR article - index.tsx

index.tsx

import React from "react";
import ReactDOM from "react-dom";
import useSpeechToText from "./utils/hooks/useSpeechToText";

ReactDOM.render(
  <React.StrictMode>
    <TestApp />
  </React.StrictMode>,
  document.getElementById("root"),
);

function TestApp() {
  const [muted, setMuted] = React.useState(true);
  const [messages, setMessages] = React.useState<{ text: string; isFinal: boolean }[]>([]);
  
  const showMessage = React.useCallback((newMessage: { text: string; isFinal: boolean }) => {
    setMessages(messages => {
      const previousMessages = messages.slice(0, -1);
      const [lastMessage] = messages.slice(-1);
      return lastMessage?.isFinal
        ? [...previousMessages, lastMessage, newMessage]
        : [...previousMessages, newMessage];
    });
  }, []);
  
  useSpeechToText(true, muted, showMessage);
  
  return (
    <div>
      <button onClick={() => setMuted(m => !m)}>{muted ? "Unmute" : "Mute"}</button>
      <ul>
        {messages.map((m, i) => (
          <li key={i} style={{ color: m.isFinal ? "black" : "red" }}>
            {m.text}
          </li>
        ))}
      </ul>
    </div>
  );
}