Voice input

'use client';

import * as React from 'react';
import { VoiceInput, type VoiceInputStatus } from './voice-input';

const WORDS = 'Book a table for four on Friday'.split(' ');

function useDictation(initial: VoiceInputStatus, words: boolean) {
  const [status, setStatus] = React.useState<VoiceInputStatus>(initial);
  const [level, setLevel] = React.useState(0);
  const [transcript, setTranscript] = React.useState('');
  const [startedAt, setStartedAt] = React.useState<number>();
  const [text, setText] = React.useState('');
  const timers = React.useRef<number[]>([]);

  const clear = React.useCallback(() => {
    for (const timer of timers.current) window.clearTimeout(timer);
    timers.current = [];
  }, []);
  const later = (ms: number, run: () => void) => timers.current.push(window.setTimeout(run, ms));

  // A fake mic level and the words arriving one by one while listening.
  React.useEffect(() => {
    if (status !== 'listening') return;
    const started = performance.now();
    const id = window.setInterval(() => {
      const t = (performance.now() - started) / 1000;
      setLevel(0.35 + 0.3 * Math.sin(t * 9) * Math.sin(t * 2.3) + 0.2 * Math.sin(t * 17));
    }, 90);
    return () => window.clearInterval(id);
  }, [status]);

  const start = () => {
    clear();
    setTranscript('');
    setText('');
    setStartedAt(Date.now());
    setStatus('listening');
    if (!words) return;
    for (let i = 1; i <= WORDS.length; i++)
      later(220 + i * 280, () => setTranscript(WORDS.slice(0, i).join(' ')));
  };
  const stop = () => {
    clear();
    setStatus('transcribing');
    later(1200, () => {
      setText(WORDS.join(' '));
      setStatus('idle');
    });
  };
  const cancel = () => {
    clear();
    setTranscript('');
    setStatus('idle');
  };
  React.useEffect(() => clear, [clear]);
  return { status, level, transcript, startedAt, text, start, stop, cancel, setStatus, later, clear };
}

export default function VoiceInputDemo({ replay = 0 }: { replay?: number }) {
  const main = useDictation('idle', true);
  const blocked = useDictation('blocked', false);
  const mainRef = React.useRef(main);
  mainRef.current = main;

  // Replay: press the mic, let the words arrive, then press Stop.
  React.useEffect(() => {
    if (replay === 0) return;
    mainRef.current.start();
    mainRef.current.later(3200, () => mainRef.current.stop());
  }, [replay]);

  return (
    <div className="flex w-full max-w-md flex-col gap-8">
      <div className="flex flex-col gap-2 rounded-2xl border border-secondary bg-primary_alt p-3 shadow-xs">
        <p
          className={
            main.text ? 'min-h-6 px-1 text-sm text-primary' : 'min-h-6 px-1 text-sm text-placeholder'
          }
        >
          {main.text || 'Write a message'}
        </p>
        <div className="flex items-end gap-2">
          <VoiceInput
            status={main.status}
            level={main.level}
            transcript={main.transcript}
            startedAt={main.startedAt}
            align="end"
            onStart={main.start}
            onStop={main.stop}
            onCancel={main.cancel}
          />
          <button
            type="button"
            aria-label="Send"
            className="mb-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-brand-solid text-fg-white outline-none focus-visible:shadow-focus-ring"
          >
            <svg
              viewBox="0 0 16 16"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="size-4"
              aria-hidden="true"
            >
              <path d="M8 12.667V3.333M3.333 8 8 3.333 12.667 8" />
            </svg>
          </button>
        </div>
      </div>
      <VoiceInput
        status={blocked.status}
        level={blocked.level}
        transcript={blocked.transcript}
        startedAt={blocked.startedAt}
        onStart={() => {
          blocked.start();
          blocked.later(1800, () => blocked.setStatus('error'));
        }}
        onStop={blocked.stop}
      />
    </div>
  );
}