AI Chat Input
Loading...
A specialized input component designed for AI chat interfaces that combines a textarea with a send button and loading states.
Overview
Resources
Install
yarn add @camp/ai-chat-inputVariations
Basic Chat Input
A standard chat input with placeholder text and send button.
import { AiChatInput } from '@camp/ai-chat-input';
function ChatComponent() {
const [message, setMessage] = useState('');
const handleSendMessage = (e) => {
e.preventDefault();
// Handle sending message
// console.log('Sending:', message);
};
return (
<AiChatInput
value={message}
onChange={(e) => setMessage(e.target.value)}
onSendMessage={handleSendMessage}
placeholderText="What can I help you with?"
/>
);
}Chat Input with Loading State
import { AiChatInput } from '@camp/ai-chat-input';
function ChatComponent() {
const [message, setMessage] = useState('');
const [isLoading, setIsLoading] = useState(false);
const handleSendMessage = async (e) => {
e.preventDefault();
setIsLoading(true);
try {
// Simulate API call
await sendMessage(message);
setMessage('');
} finally {
setIsLoading(false);
}
};
return (
<AiChatInput
value={message}
onChange={(e) => setMessage(e.target.value)}
onSendMessage={handleSendMessage}
isLoading={isLoading}
placeholderText="Type your message..."
/>
);
}Chat Input without Send Button
A chat input that relies on external send functionality (e.g., Enter key).
import { AiChatInput } from '@camp/ai-chat-input';
function ChatComponent() {
const [message, setMessage] = useState('');
const handleSendMessage = (e) => {
e.preventDefault();
// Handle sending message
console.log('Sending:', message);
};
return (
<AiChatInput
value={message}
onChange={(e) => setMessage(e.target.value)}
onSendMessage={handleSendMessage}
hideSendButton={true}
placeholderText="Type your message and press Enter..."
/>
);
}Chat Input with Custom Label
A chat input with an accessible label for screen readers.
import { AiChatInput } from '@camp/ai-chat-input';
function ChatComponent() {
const [message, setMessage] = useState('');
const handleSendMessage = (e) => {
e.preventDefault();
// Handle sending message
console.log('Sending:', message);
};
return (
<AiChatInput
value={message}
onChange={(e) => setMessage(e.target.value)}
onSendMessage={handleSendMessage}
label="Chat message input"
placeholderText="Type your message..."
/>
);
}Usage
Best practices
- Use the loading state to provide visual feedback when processing messages
- Provide clear placeholder text that guides users on what to type
- Use the label prop for accessibility when the input needs additional context
- Consider hiding the send button when you want to rely on Enter key submission
- Ensure the onSendMessage handler prevents the default form submission behavior
Content guidelines
✅ DO
Use clear, concise placeholder text that explains the expected input
🚫 DON’T
Use overly long or confusing placeholder text
✅ DO
Provide meaningful labels for screen reader accessibility
🚫 DON’T
Leave the label prop undefined when context is needed
✅ DO
Show loading states to indicate when messages are being processed
🚫 DON’T
Leave users guessing about the status of their message
Accessibility
Keyboard support
- Enter key: Submits the message when pressed
- Tab navigation: Moves focus between the textarea and send button
- Escape key: Clears the current input (if implemented in your handler)
Screen reader support
- The component includes proper ARIA labels and roles
- Loading states are announced to screen readers
- The send button includes appropriate button semantics
- Custom labels can be provided for additional context
Last updated on