ChatInput

PreviousNext

A controlled text input form for the chatbot, with a send button and optional audio/attachment trigger.

'use client';

import { useState } from 'react';
import { ChatInput } from '@/ui/ChatInput';

export function ChatInputDemo() {
  const [value, setValue] = useState('');

  return (
    <div className="w-[380px]">
      <ChatInput
        value={value}
        onValueChange={setValue}
        onSubmit={() => setValue('')}
        onAudioClick={() => {}}
      />
    </div>
  );
}

Installation

npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/chat-input.json

Usage

import { ChatInput } from '@/ui/ChatInput';
import { useState } from 'react';
 
export function Component() {
  const [value, setValue] = useState('');
 
  return (
    <ChatInput
      value={value}
      onValueChange={setValue}
      onSubmit={() => {
        console.log('Submitted:', value);
        setValue('');
      }}
      onAudioClick={() => console.log('Audio clicked')}
    />
  );
}

API Reference

ChatInput

PropTypeDefaultDescription
valuestring—Required. Controlled input value
onValueChange(value: string) => void—Required. Called on every keystroke
onSubmit() => void—Required. Called when the form is submitted
placeholderstring"Ask a question?"Input placeholder text (also used as aria-label)
onAudioClick() => voidundefinedWhen provided, renders an audio/attachment button
classNamestringundefinedAdditional CSS classes on the <form> element

Inherits all HTMLFormElement attributes.

Notes

  • The send button is disabled when the input is empty or whitespace only.
  • The audio button only renders when onAudioClick is provided.
  • The component is fully controlled — manage state externally.
  • Used as the bottom bar inside ChatWindow.