---
title: ChatInput
description: A controlled text input form for the chatbot, with a send button and optional audio/attachment trigger.
---
```tsx
'use client';
import { useState } from 'react';
import { ChatInput } from '@/ui/ChatInput';
export function ChatInputDemo() {
const [value, setValue] = useState('');
return (
setValue('')}
onAudioClick={() => {}}
/>
);
}
```
## Installation
Using the CLI:
```bash
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/chat-input.json
```
Or manually, copy the following code into `/ui/ChatInput.tsx`:
```tsx
///
'use client';
import type { FormHTMLAttributes, KeyboardEvent, MouseEvent, SubmitEvent } from 'react';
import { useEffect, useRef, useState } from 'react';
import { Button } from '../buttons/Button';
import { twMerge } from '../helpers/twMerge';
/**
* Keyboard shortcut that submits the message:
* - `mod+enter`: Ctrl/Cmd+Enter submits, Enter adds a line break
* - `enter`: Enter submits, Shift+Enter adds a line break (Ctrl/Cmd+Enter submits too)
*/
export type ChatInputSubmitKey = 'mod+enter' | 'enter';
export interface ChatInputProps extends FormHTMLAttributes {
value: string;
placeholder?: string;
onValueChange: (value: string) => void;
onSubmit: () => void;
/**
* Keyboard shortcut that submits the message.
* @default 'mod+enter'
*/
submitKey?: ChatInputSubmitKey;
/** While `true`, submitting is disabled and the send button becomes a stop button */
isStreaming?: boolean;
/**
* Enables the microphone button. The browser speech recognition is used when available, this
* callback is the fallback for when the browser does not support the Web Speech API.
*/
onAudioClick?: () => void;
/** Called when the stop button, shown in place of the send button while `isStreaming`, is clicked */
onStop?: () => void;
}
function isSubmitKey(e: KeyboardEvent, submitKey: ChatInputSubmitKey) {
// Enter validates the text being composed with an IME: it must not submit
if (e.key !== 'Enter' || e.nativeEvent.isComposing) return false;
if (e.metaKey || e.ctrlKey) return true;
return submitKey === 'enter' && !e.shiftKey;
}
const FORM_PAD = 12; // matches p-12
const BTN_SIZE = 48; // matches size-48
const BTN_GAP = 8; // matches gap-8
// Keep onValueChange stable inside the recognition handler without re-creating the SR instance
function useCallbackRef unknown>(fn: T) {
const ref = useRef(fn);
useEffect(() => {
ref.current = fn;
});
return ref;
}
const SILENCE_TIMEOUT_MS = 3_000;
function useSpeechRecognition({
enabled,
onValueChange,
}: {
enabled: boolean;
onValueChange: (v: string) => void;
}) {
const [isSupported, setIsSupported] = useState(false);
const [isListening, setIsListening] = useState(false);
const recognitionRef = useRef(null);
const silenceTimerRef = useRef | null>(null);
const isListeningRef = useRef(false);
const onValueChangeRef = useCallbackRef(onValueChange);
function clearSilenceTimer() {
if (silenceTimerRef.current) clearTimeout(silenceTimerRef.current);
}
function resetSilenceTimer() {
clearSilenceTimer();
silenceTimerRef.current = setTimeout(() => {
isListeningRef.current = false;
setIsListening(false);
recognitionRef.current?.stop();
}, SILENCE_TIMEOUT_MS);
}
useEffect(() => {
const SR: typeof SpeechRecognition | undefined =
(window as Window & { webkitSpeechRecognition?: typeof SpeechRecognition })
.webkitSpeechRecognition ?? window.SpeechRecognition;
if (!enabled || !SR) {
return;
}
setIsSupported(true);
const recognition = new SR();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = navigator.language;
recognition.onresult = (event: SpeechRecognitionEvent) => {
const transcript = Array.from(event.results)
.map((r: SpeechRecognitionResult) => r[0].transcript)
.join('');
onValueChangeRef.current(transcript);
resetSilenceTimer();
};
recognition.onend = () => {
clearSilenceTimer();
// Restart automatically if the user hasn't manually stopped (browser cut us off)
if (isListeningRef.current) {
try {
recognition.start();
} catch {
/* already starting */
}
} else {
setIsListening(false);
}
};
recognition.onerror = (e: SpeechRecognitionErrorEvent) => {
if (e.error === 'not-allowed' || e.error === 'aborted') {
isListeningRef.current = false;
setIsListening(false);
clearSilenceTimer();
}
};
recognitionRef.current = recognition;
return () => {
recognition.abort();
clearSilenceTimer();
};
// SR detection and instance creation only needs to run when the capability changes
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [enabled]);
function toggle() {
const recognition = recognitionRef.current;
if (!recognition) return;
if (isListeningRef.current) {
isListeningRef.current = false;
recognition.stop();
} else {
isListeningRef.current = true;
setIsListening(true);
recognition.start();
resetSilenceTimer();
}
}
return { isSupported, isListening, toggle };
}
/**
* Drives the audio-level indicator by writing directly to the DOM element's
* style — avoids triggering a React re-render on every animation frame
* (rule: rerender-use-ref-transient-values).
*
* Returns a ref to attach to the indicator .
*/
function useAudioLevel(isListening: boolean) {
const indicatorRef = useRef(null);
useEffect(() => {
const el = indicatorRef.current;
if (!isListening) {
if (el) el.style.height = '0px';
return;
}
let animId: number;
let stream: MediaStream | null = null;
let ctx: AudioContext | null = null;
navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then((s) => {
stream = s;
ctx = new AudioContext();
const source = ctx.createMediaStreamSource(stream);
const analyser = ctx.createAnalyser();
analyser.fftSize = 256;
source.connect(analyser);
const data = new Uint8Array(analyser.frequencyBinCount);
function tick() {
analyser.getByteFrequencyData(data);
const avg = data.reduce((sum, v) => sum + v, 0) / data.length;
// Square-root curve so quiet sounds register more visibly
const node = indicatorRef.current;
if (node) node.style.height = `${Math.sqrt(avg / 255) * 10}px`;
animId = requestAnimationFrame(tick);
}
animId = requestAnimationFrame(tick);
});
return () => {
cancelAnimationFrame(animId);
stream?.getTracks().forEach((t) => t.stop());
ctx?.close();
};
}, [isListening]);
return indicatorRef;
}
export function ChatInput({
value,
placeholder = 'Ask a question?',
onValueChange,
onSubmit,
onAudioClick,
onStop,
isStreaming,
submitKey = 'mod+enter',
className,
...props
}: ChatInputProps) {
const { isSupported, isListening, toggle } = useSpeechRecognition({
enabled: !!onAudioClick,
onValueChange: onValueChange,
});
const audioIndicatorRef = useAudioLevel(isListening);
const [isFocused, setIsFocused] = useState(false);
const trimmed = value.trim();
const isOpen = isFocused || trimmed.length > 0;
const btnW = onAudioClick ? BTN_SIZE + BTN_GAP + BTN_SIZE : BTN_SIZE;
function handleAudioClick() {
if (isSupported) {
toggle();
} else {
onAudioClick?.();
}
}
function handleSubmit(e: SubmitEvent) {
e.preventDefault();
if (trimmed && !isStreaming) onSubmit();
}
function onKeyDown(e: KeyboardEvent) {
if (!isSubmitKey(e, submitKey)) return;
e.preventDefault();
if (trimmed && !isStreaming) onSubmit();
}
function onMouseDown(e: MouseEvent) {
if ((e.target as HTMLElement).tagName !== 'TEXTAREA') {
e.preventDefault();
}
}
return (