Voice NodeVoice Node

"use client";

import * as React from "react";
import { VoiceNode, type VoiceState } from "@/components/ui/notchset/voice-node";

type Session = { stop: () => void; setMuted: (muted: boolean) => Promise<void> };
type Connect = (handlers: { onState: (s: VoiceState) => void; onUser: (t: string) => void; onAgent: (t: string) => void }) => Session;

/**
 * Wire state and transcript to your voice agent. The node draws the mic level and the ring; mute is
 * yours: mute the agent's own transport in onMutedChange, then pass the result back as muted.
 */
export function VoiceAgent({ connect }: { connect: Connect }) {
  const [state, setState] = React.useState<VoiceState>("ready");
  const [heard, setHeard] = React.useState("");
  const [reply, setReply] = React.useState("");
  const [muted, setMuted] = React.useState(false);
  const session = React.useRef<Session | null>(null);
  return (
    <VoiceNode
      state={state}
      user={heard}
      agent={reply}
      muted={muted}
      onMutedChange={async (next) => {
        await session.current?.setMuted(next);
        setMuted(next);
      }}
      onStart={() => {
        setHeard("");
        setReply("");
        setMuted(false);
        session.current = connect({ onState: setState, onUser: setHeard, onAgent: setReply });
      }}
      onEnd={() => {
        session.current?.stop();
        session.current = null;
        setState("ready");
      }}
    />
  );
}