Chat interfaces are everywhere now. AI products, messaging apps, customer support tools all need the same basic interaction: a text input with send functionality, file attachments, and various actions. Building this well is harder than it looks.
Chatbar is KookieUI's answer to that problem. It handles the input experience where users type, attach files, and submit messages. Every chat interface needs this, and now teams can use a battle-tested component instead of rebuilding it from scratch.
Most chat interfaces start simple: a text field and a send button. But requirements grow fast:
Each of these is straightforward in isolation. Together, they create edge cases that compound. File uploads break focus. Multi-line text breaks layout. Keyboard shortcuts conflict with browser defaults. Loading states need careful coordination.
Teams end up building the same component over and over, each time hitting the same problems and solving them in slightly different ways. That inconsistency shows up in the product.
Chatbar handles the input layer for chat interfaces. It's a compound component built with KookieUI primitives to create a cohesive input experience with comprehensive file handling.
Auto-expanding textarea. Configure minimum and maximum lines with minLines and maxLines. Control expansion behavior with expandOn (none, focus, overflow, or both). The expansion is smooth and predictable.
Built-in file handling. Accepts file attachments through drag-and-drop, file picker, and paste. Configure file type restrictions with accept, limit attachments with maxAttachments and maxFileSize. Shows previews with AttachmentsRow. Supports controlled and uncontrolled state.
Flexible action system. Control send button visibility with sendMode (always, whenDirty, or never). Use Chatbar.Send or provide custom actions with asChild. The component adapts to your workflow.
Keyboard shortcuts that work. Shift+Enter adds a new line. Enter behavior is configurable through the submitOnEnter prop on Chatbar.Textarea to match your users' expectations.
State management. Supports both controlled (value/onValueChange, attachments/onAttachmentsChange) and uncontrolled state (defaultValue, defaultAttachments). Handles disabled and readOnly states. Expansion state managed via open/onOpenChange.
Accessible by default. Requires aria-label or aria-labelledby on Chatbar.Textarea. Full keyboard navigation. Proper ARIA attributes including aria-expanded. Respects prefers-reduced-motion. Supports Windows High Contrast mode.
The API is controlled and minimal. You manage the value, handle submission, and optionally manage files and actions. The component gives you complete control over state while handling all the complex interaction details.
For complete API documentation, examples, and interactive demos, visit the KookieUI Chatbar documentation.
Chatbar is a compound component composed of:
Chatbar.Root - Container managing state and contextChatbar.Textarea - Multi-line input with auto-resize and paste handlingChatbar.AttachmentsRow - Displays attached files with previews and removalChatbar.Row - Layout container for action buttonsChatbar.AttachTrigger - Opens file picker (can be rendered as child via asChild)Chatbar.Send - Submit button with conditional visibility based on sendModeThe component handles focus management, scroll behavior, keyboard coordination, drag-and-drop zones, file validation, state synchronization, and accessibility. It focuses on the input layer. Message history, rendering, backend communication, and file storage belong to your application.
Chatbar follows the same principles as every other KookieUI component:
Compound component pattern. Built as composable subcomponents (Root, Textarea, AttachmentsRow, Row, AttachTrigger, Send) that work together through shared context. Each piece is independently styleable while maintaining cohesion.
Patterns, not parts. Chatbar encodes the complete pattern of how chat inputs should behave: expansion, submission, file handling, keyboard shortcuts. Teams get the full pattern with all interactions coordinated.
Unified tokens. Supports KookieUI's size variants (1-3), color system, radius options, and material properties (solid/translucent). A size-2 Chatbar uses the same scale as other size-2 components. Variants include classic, soft, outline, surface, and ghost.
Accessible by default. ARIA labels are required. Keyboard navigation works correctly. Screen readers announce state changes. The accessibility is built in and enforced.
Composable. Chatbar is a controlled component that fits into your state management and layout structure.
I built Chatbar while consulting on Womp Spark, Womp's AI assistant. Spark needed a consistent input experience across desktop and mobile, with file attachments, stop/regenerate actions, and smooth keyboard interaction.
Before Chatbar, the chat input was custom-built and tightly coupled to Spark's implementation. That made it harder for the team to iterate on the input experience without touching application logic. It also meant any improvements stayed locked inside Spark instead of being reusable across Womp's product surface.
With Chatbar in KookieUI:
This removed a significant amount of friction from the development process.
Chatbar is stable and ready to use. A few areas I'm continuing to develop:
Voice input support. Recording, waveform visualization, playback. Chat interfaces increasingly need audio, and Chatbar should handle it as cleanly as it handles text and files.
Enhanced file previews. Richer attachment UI with upload progress indicators via the status and progress properties on ChatbarAttachment. Better image thumbnails, document metadata display, and video preview frames.
Better mobile support. The component works on mobile, but the experience could be tighter. Better touch targets, smoother expansion, native-feeling interactions.
Chatbar already handles the core use case well. These additions will make it even more capable as chat interfaces continue to evolve.
The input experience is consistent across chat products. Users expect the same behavior whether they're chatting with AI, messaging a team, or talking to support. Chatbar encodes that pattern in KookieUI so teams get a tested, accessible, composable component that handles the complex details.
This lets teams focus on what makes their chat experience unique instead of rebuilding input infrastructure. That's the value Chatbar brings to KookieUI.