Text Input

The TextInput component provides a user interface for entering and sending textual messages to the bot. It includes both a headless variant for full control and a connected variant that automatically integrates with the Pipecat Client SDK.

import { TextInput, ConversationProvider } from "@pipecat-ai/voice-ui-kit";

<ConversationProvider>
  <TextInput placeholder="Ask me anything..." />
</ConversationProvider>

Component Variants

TextInput

The TextInput component is the connected variant that automatically integrates with the Pipecat Client SDK. It must be used within a PipecatClientProvider context.

SendTextOptions

The sendTextOptions prop accepts an object with the following properties:

TextInputComponent

The TextInputComponent is the headless variant that accepts all callbacks and state as props. This allows you to use it with any framework or state management solution.

import { TextInputComponent } from "@pipecat-ai/voice-ui-kit";

function Demo() {
  const handleSend = async (message: string) => {
    console.log("Sending message:", message);
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000));
  };

  return (
    <TextInputComponent
      placeholder="Type your message..."
      onSend={handleSend}
      buttonLabel="Send Message"
    />
  );
}

render(<Demo />);

Usage

SendTextOptions

You can customize how the bot handles text messages using the sendTextOptions prop.

import { TextInput, ConversationProvider } from "@pipecat-ai/voice-ui-kit";

<ConversationProvider>
  <TextInput
    placeholder="Send a text-only message..."
    sendTextOptions={{
      run_immediately: true,
      audio_response: false, // Bot will respond with text only, no TTS
    }}
  />
</ConversationProvider>

Disable Message Injection

By default, messages sent via TextInput are automatically injected into the conversation store. You can disable this behavior with the noInject prop if you want to handle message injection manually.

import { TextInput, ConversationProvider } from "@pipecat-ai/voice-ui-kit";

<ConversationProvider>
  <TextInput
    placeholder="Send without auto-injecting..."
    noInject={true}
    onSend={(message) => {
      console.log("Message sent:", message);
      // Handle message injection manually if needed
    }}
  />
</ConversationProvider>

Integration

The TextInput component uses:

• usePipecatConnectionState hook to check connection status
• usePipecatClient hook to access the Pipecat client instance
• useConversationContext hook to inject messages into the conversation store

It must be used within:

• PipecatClientProvider context (for client access and connection state)
• ConversationProvider context (for message injection)