4a:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4b:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4c:T2626,"use client"; import { type DTMFButton } from "@pipecat-ai/client-js"; import { useDTMF, usePipecatClientTransportState, } from "@pipecat-ai/client-react"; import { DeleteIcon, PhoneIcon } from "lucide-react"; import { useCallback, useEffect, useRef, useState } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; type ButtonProps = React.ComponentProps; /** * Ordered list of the twelve DTMF keys as they appear on a standard * telephone keypad, with the letters traditionally printed beneath each * digit. Rendered row by row into a 3-column grid. */ const DTMF_KEYS: { value: DTMFButton; sub?: string }[] = [ { value: "1" }, { value: "2", sub: "ABC" }, { value: "3", sub: "DEF" }, { value: "4", sub: "GHI" }, { value: "5", sub: "JKL" }, { value: "6", sub: "MNO" }, { value: "7", sub: "PQRS" }, { value: "8", sub: "TUV" }, { value: "9", sub: "WXYZ" }, { value: "*" }, { value: "0", sub: "+" }, { value: "#" }, ]; const sanitizeDTMF = (value: string): string => value.replace(/[^0-9*#]/g, ""); /** * The (row, column) frequency pair defining each key's dual tone, per the * standard DTMF layout. Synthesized so no audio assets ship with the kit. */ const DTMF_FREQUENCIES: Record = { "1": [697, 1209], "2": [697, 1336], "3": [697, 1477], "4": [770, 1209], "5": [770, 1336], "6": [770, 1477], "7": [852, 1209], "8": [852, 1336], "9": [852, 1477], "*": [941, 1209], "0": [941, 1336], "#": [941, 1477], }; const TONE_DURATION = 0.12; /** Deliberately quiet: the tone plays over a live call. */ const DEFAULT_TONE_VOLUME = 0.15; /** Attack/release ramp; without it the tone clicks. */ const TONE_RAMP = 0.01; /** * Local press-feedback tone. Cosmetic sidetone only — the actual * signalling happens over the transport via sendTone. */ function useDTMFTone(enabled: boolean, volume: number) { const contextRef = useRef(null); const peakGain = Math.min(Math.max(volume, 0), 1); useEffect( () => () => { void contextRef.current?.close(); contextRef.current = null; }, [], ); return useCallback( (key: DTMFButton) => { if ( !enabled || peakGain <= 0 || typeof window === "undefined" || !window.AudioContext ) { return; } // Created lazily on first press so it's tied to a user gesture // (autoplay policy) and never constructed during SSR. const context = (contextRef.current ??= new window.AudioContext()); if (context.state === "suspended") void context.resume(); const now = context.currentTime; const gain = context.createGain(); gain.connect(context.destination); gain.gain.setValueAtTime(0, now); gain.gain.linearRampToValueAtTime(peakGain, now + TONE_RAMP); gain.gain.setValueAtTime(peakGain, now + TONE_DURATION - TONE_RAMP); gain.gain.linearRampToValueAtTime(0, now + TONE_DURATION); const oscillators = DTMF_FREQUENCIES[key].map((frequency) => { const oscillator = context.createOscillator(); oscillator.type = "sine"; oscillator.frequency.setValueAtTime(frequency, now); oscillator.connect(gain); oscillator.start(now); oscillator.stop(now + TONE_DURATION); return oscillator; }); const last = oscillators[oscillators.length - 1]; if (last) { last.onended = () => { oscillators.forEach((oscillator) => oscillator.disconnect()); gain.disconnect(); }; } }, [enabled, peakGain], ); } /** * - "buffered" (default): presses accumulate in an editable field and send * as one sequence on submit — mistypes can be corrected before dialing. * - "immediate": each press sends right away — suits live IVR menus. */ export type DTMFKeypadMode = "immediate" | "buffered"; export interface DTMFKeypadViewProps { mode?: DTMFKeypadMode; variant?: ButtonProps["variant"]; size?: ButtonProps["size"]; disabled?: boolean; /** Hide the letters printed beneath each digit. */ noSubLabels?: boolean; /** Disable the audible press-feedback tone. */ noToneFeedback?: boolean; /** Peak tone volume, 0–1 (clamped). */ toneVolume?: number; placeholder?: string; sendLabel?: string; className?: string; /** Called with each key as it is pressed (both modes). */ onPress?: (button: DTMFButton) => void; /** Called with the full sequence on submit (buffered mode). */ onSend?: (sequence: string) => void; /** Controlled buffer value (buffered mode). */ value?: string; defaultValue?: string; onValueChange?: (value: string) => void; } /** * Telephone keypad, props-driven. Buffered mode adds an editable sequence * field, backspace, and a send button. */ export function DTMFKeypadView({ mode = "buffered", variant = "secondary", size = "lg", disabled = false, noSubLabels = false, noToneFeedback = false, toneVolume = DEFAULT_TONE_VOLUME, placeholder = "Enter digits", sendLabel = "Send", className, onPress, onSend, value, defaultValue, onValueChange, }: DTMFKeypadViewProps) { const buffered = mode === "buffered"; const isControlled = value !== undefined; const [internalValue, setInternalValue] = useState(defaultValue ?? ""); const buffer = isControlled ? (value ?? "") : internalValue; const setBuffer = useCallback( (next: string) => { if (!isControlled) setInternalValue(next); onValueChange?.(next); }, [isControlled, onValueChange], ); const playTone = useDTMFTone(!noToneFeedback, toneVolume); const handlePress = useCallback( (key: DTMFButton) => { playTone(key); onPress?.(key); if (buffered) setBuffer(buffer + key); }, [buffered, buffer, onPress, setBuffer, playTone], ); const handleSend = useCallback(() => { // Sanitize at send time too: controlled values bypass the input's // onChange sanitization. const sequence = sanitizeDTMF(buffer); if (!sequence) return; onSend?.(sequence); setBuffer(""); }, [buffer, onSend, setBuffer]); const grid = (

{DTMF_KEYS.map(({ value: key, sub }) => ( ))}

); if (!buffered) { return (

{grid}

); } return (

setBuffer(sanitizeDTMF(e.target.value))} onKeyDown={(e) => { if (e.key === "Enter") { // Enter should dispatch the sequence, not submit a form. e.preventDefault(); handleSend(); } }} placeholder={placeholder} disabled={disabled} // The on-screen keypad is the intended input method on touch // devices; typing/paste on desktop still works. inputMode="none" aria-label="DTMF sequence" className="flex-1 tracking-widest tabular-nums" />

{grid}

); } export interface DTMFKeypadProps extends Omit { /** Called after tone(s) are successfully sent. */ onToneSent?: (sequence: string) => void; /** * Called if sending fails — sendTone throws when the transport isn't * ready or the bot doesn't support DTMF (RTVI < 2.0.0). */ onError?: (error: unknown) => void; } /** Requires PipecatClientProvider. Buffered mode sends on submit; immediate mode sends each press. */ export function DTMFKeypad({ mode = "buffered", disabled, onPress, onToneSent, onError, ...props }: DTMFKeypadProps) { const { sendTone } = useDTMF(); const transportState = usePipecatClientTransportState(); const isConnected = transportState === "ready"; const send = useCallback( (sequence: string) => { try { sendTone(sequence); onToneSent?.(sequence); } catch (error) { onError?.(error); } }, [sendTone, onToneSent, onError], ); return ( { onPress?.(button); if (mode === "immediate") send(button); }} onSend={mode === "buffered" ? send : undefined} {...props} /> ); } 49:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@pipecat-ai/client-js@^1.13.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40pipecat-ai%2Fclient-js","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@pipecat-ai/client-js@^1.13.1"}]]}]}],["$","li","@pipecat-ai/client-react@^1.8.2",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40pipecat-ai%2Fclient-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@pipecat-ai/client-react@^1.8.2"}]]}]}],["$","li","lucide-react@^1.41.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.41.0"}]]}]}]]}],["$","$L4a",null,{"namespace":"@pipecat","registryDependencies":["button","input"]}]]}],null]}],["$","$L4b",null,{"files":[{"path":"src/components/dtmf-keypad.tsx","content":"$4c","type":"registry:component","target":"components/pipecat/dtmf-keypad.tsx"}],"className":"h-[70svh] min-h-80"}]]}]