Voice strip

"use client";
import * as React from "react";
import { VoiceStrip, type VoiceState } from "@/components/ui/notchset/blocks/voice-strip";
import { Button } from "@/components/ui/notchset/button";

/* a sample conversation, played as captions (no sound): the template's voice adapter drives the real one */
const SCRIPT: { state: VoiceState; caption?: string; speaker?: "you" | "assistant"; ms: number }[] = [
  { state: "connecting", ms: 900 },
  { state: "listening", caption: "When does the launch email go out?", speaker: "you", ms: 2400 },
  { state: "thinking", ms: 1400 },
  { state: "speaking", caption: "Tuesday at 9 am, to the three people on the beta list.", speaker: "assistant", ms: 3200 },
  { state: "listening", ms: 2000 },
];

export default function VoiceStripDemo() {
  const [i, setI] = React.useState(0);
  const [muted, setMuted] = React.useState(false);
  const [ended, setEnded] = React.useState(false);
  const [level, setLevel] = React.useState(0);
  const step = SCRIPT[i]!;
  React.useEffect(() => {
    if (ended || muted) return;
    const t = setTimeout(() => setI((n) => (n + 1) % SCRIPT.length), step.ms);
    return () => clearTimeout(t);
  }, [i, ended, muted, step.ms]);
  const voiced = !ended && !muted && (step.state === "listening" || step.state === "speaking");
  /* a stand-in for the voice level, so the orb's edge and body have something to follow */
  React.useEffect(() => {
    if (!voiced) return;
    const t = setInterval(() => setLevel(0.25 + Math.abs(Math.sin(Date.now() / 160)) * 0.6), 90);
    return () => clearInterval(t);
  }, [voiced]);
  if (ended)
    return (
      <div className="flex items-center gap-3 text-[length:var(--ns-text-small)] text-[var(--ns-ink-2)]">
        Voice ended. What was said is in the thread.
        <Button size="sm" onClick={() => (setEnded(false), setI(0))}>
          Talk again
        </Button>
      </div>
    );
  return (
    <VoiceStrip
      className="max-w-[640px]"
      state={muted ? "muted" : step.state}
      input={voiced && step.state === "listening" ? level : 0}
      output={voiced && step.state === "speaking" ? level : 0}
      caption={muted ? undefined : step.caption}
      speaker={step.speaker}
      soundOff
      onMute={() => setMuted(!muted)}
      onEnd={() => setEnded(true)}
    />
  );
}