Transcript Overlay

import { TranscriptOverlayComponent } from "@pipecat-ai/voice-ui-kit";

function Demo() {
  const [transcript, setTranscript] = React.useState([]);
  const [turnEnd, setTurnEnd] = React.useState(false);
  const [isSpeaking, setIsSpeaking] = React.useState(false);
  const [fadeInDuration, setFadeInDuration] = React.useState(300);
  const [fadeOutDuration, setFadeOutDuration] = React.useState(1000);

  const phrases = [
    "Hello, welcome to our voice application!",
    "I can help you with various tasks today.",
    "What would you like to know about our services?",
    "Let me search for that information for you.",
    "I found some relevant details that might help.",
  ];

  const startSpeech = () => {
    setIsSpeaking(true);
    setTurnEnd(false);
    setTranscript([]);
    
    const selectedPhrase = phrases[Math.floor(Math.random() * phrases.length)];
    const words = selectedPhrase.split(" ").filter(word => word && word.trim().length > 0);
    let wordIndex = 0;
    
    const interval = setInterval(() => {
      if (wordIndex < words.length) {
        const word = words[wordIndex];
        if (word) {
          setTranscript(prev => [...prev, word]);
          wordIndex++;
        } else {
          wordIndex++;
        }
      } else {
        clearInterval(interval);
      }
    }, 200);
  };

  const endSpeech = () => {
    setIsSpeaking(false);
    setTurnEnd(true);
  };

  const clearTranscript = () => {
    setTranscript([]);
    setTurnEnd(false);
    setIsSpeaking(false);
  };

  return (
    <div className="space-y-4 w-full">
      <div className="flex gap-2 flex-wrap">
        <button
          onClick={startSpeech}
          disabled={isSpeaking}
          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
        >
          Simulate Speech
        </button>
        <button
          onClick={endSpeech}
          disabled={!isSpeaking}
          className="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600 disabled:opacity-50"
        >
          Simulate Turn End
        </button>
        <button
          onClick={clearTranscript}
          className="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
        >
          Clear
        </button>
      </div>
      
      <div className="flex gap-4 text-sm">
        <div>
          <label className="block text-xs font-medium mb-1">Fade In (ms)</label>
          <input
            type="number"
            value={fadeInDuration}
            onChange={(e) => setFadeInDuration(Number(e.target.value))}
            className="w-20 px-2 py-1 border rounded text-xs"
            min="100"
            max="2000"
            step="100"
          />
        </div>
        <div>
          <label className="block text-xs font-medium mb-1">Fade Out (ms)</label>
          <input
            type="number"
            value={fadeOutDuration}
            onChange={(e) => setFadeOutDuration(Number(e.target.value))}
            className="w-20 px-2 py-1 border rounded text-xs"
            min="100"
            max="3000"
            step="100"
          />
        </div>
      </div>
      
      <div className="bg-gray-50 rounded-lg p-4 min-h-[80px] w-full flex items-center justify-center">
        {transcript.length > 0 ? (
          <TranscriptOverlayComponent
            words={transcript}
            turnEnd={turnEnd}
            className="w-full text-center"
            fadeInDuration={fadeInDuration}
            fadeOutDuration={fadeOutDuration}
          />
        ) : (
          <p className="text-gray-500 text-sm">
            Click 'Simulate Speech' to see the transcript build up word by word
          </p>
        )}
      </div>
      
      <div className="text-sm text-gray-600">
        <p><strong>Status:</strong> {isSpeaking ? "Speaking..." : turnEnd ? "Speech ended" : "Ready"}</p>
        <p><strong>Transcript:</strong> "{transcript.join(" ")}"</p>
      </div>
    </div>
  );
}

render(<Demo />);