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:T1826,"use client"; import type { SendTextOptions, TransportState } from "@pipecat-ai/client-js"; import { useConversationContext, usePipecatClient, usePipecatClientTransportState, } from "@pipecat-ai/client-react"; import { Loader2Icon, SendIcon } from "lucide-react"; import { useCallback, useEffect, useRef, useState } from "react"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupTextarea, } from "@/components/ui/input-group"; export interface TextInputViewProps { /** Called with the trimmed message when the user sends. */ onSend?: (message: string) => Promise | void; /** Disable the composer entirely. */ disabled?: boolean; /** Use a textarea; Enter still sends, Shift+Enter inserts a newline. */ multiline?: boolean; placeholder?: string; /** Accessible name for the input. */ "aria-label"?: string; /** Content for the send button. Defaults to a send icon. */ buttonContent?: React.ReactNode; /** Side the send button sits on in multiline mode. */ buttonPosition?: "left" | "right"; /** Overrides merged onto the send button (variant, size, …). */ buttonProps?: Partial>; /** Classes for the InputGroup root. */ className?: string; } /** Enter sends unless composing with an IME. Successful sends clear the draft; failures preserve it. */ export function TextInputView({ onSend, disabled = false, multiline = false, placeholder = "Type message…", "aria-label": ariaLabel = "Message", buttonContent, buttonPosition = "right", buttonProps, className, }: TextInputViewProps) { const [message, setMessage] = useState(""); const [isSending, setIsSending] = useState(false); const inputRef = useRef(null); // The input is disabled while a send is in flight, which drops focus. // Restore it once the send settles (success or failure) — after the // re-render that re-enables the input, hence the effect. const wasSending = useRef(false); useEffect(() => { if (wasSending.current && !isSending) inputRef.current?.focus(); wasSending.current = isSending; }, [isSending]); const handleSend = useCallback(async () => { const text = message.trim(); if (!text || isSending) return; setIsSending(true); try { await onSend?.(text); // Clear only on success so a failed send keeps the draft. setMessage(""); } catch (error) { console.error("TextInput: send failed", error); } finally { setIsSending(false); } }, [message, onSend, isSending]); const handleKeyDown = ( e: React.KeyboardEvent, ) => { if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); void handleSend(); } }; const canSend = !disabled && !isSending && message.trim().length > 0; const inputProps = { placeholder, "aria-label": ariaLabel, value: message, onChange: (e: React.ChangeEvent) => setMessage(e.target.value), onKeyDown: handleKeyDown, disabled: disabled || isSending, }; return ( {multiline ? ( } {...inputProps} /> ) : ( } {...inputProps} /> )} void handleSend()} disabled={!canSend} aria-label="Send message" aria-busy={isSending || undefined} size={buttonContent ? "xs" : "icon-xs"} {...buttonProps} > {isSending ? ( ) : ( (buttonContent ?? ) )} ); } const CONNECTED_STATES: TransportState[] = ["connected", "ready"]; export interface TextInputProps extends Omit< TextInputViewProps, "onSend" | "disabled" > { /** Options forwarded to client.sendText(). */ sendTextOptions?: SendTextOptions; /** Placeholder shown while disconnected. */ disconnectedPlaceholder?: string; /** Skip injecting the sent message into the local conversation store. */ noInject?: boolean; /** Called after a message is successfully sent. */ onSent?: (message: string) => void; /** Disable the composer even while connected. */ disabled?: boolean; } /** Requires PipecatClientProvider. Adds optimistic conversation text and sends it through the client. */ export function TextInput({ sendTextOptions, disconnectedPlaceholder = "Connect to send", noInject = false, onSent, disabled, placeholder, ...props }: TextInputProps) { const client = usePipecatClient(); const transportState = usePipecatClientTransportState(); const isConnected = CONNECTED_STATES.includes(transportState); const { injectMessage } = useConversationContext(); const handleSend = useCallback( async (message: string) => { if (!isConnected || !client) return; if (!noInject) { injectMessage({ role: "user", parts: [ { text: message, final: true, createdAt: new Date().toISOString() }, ], }); } await client.sendText(message, sendTextOptions); onSent?.(message); }, [isConnected, client, injectMessage, noInject, onSent, sendTextOptions], ); return ( ); } 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":["input-group"]}]]}],null]}],["$","$L4b",null,{"files":[{"path":"src/components/text-input.tsx","content":"$4c","type":"registry:component","target":"components/pipecat/text-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]