Back to cookbook
Recipe
Build a chat panel with GunjoUI
Build a support, assistant, or team chat interface using the system chat components.
Recommended:
Claude
Prompt
Use @gunjo/ui. Reference https://gunjo.dev/api/specs/overlay/chat-panel, https://gunjo.dev/api/specs/display/chat-message, and https://gunjo.dev/api/specs/inputs/chat-input. Build a full-height chat panel: - Header: title "Assistant" + Avatar + a settings button (variant=ghost, Settings icon) - ScrollArea with ChatMessage entries (alternating roles user/assistant). Each message has role badge, text, timestamp. - Input area at bottom: ChatInput with attachment button, multi-line textarea, send button (bg-primary). - Empty state: when no messages, show a centered EmptyState with icon "Sparkles" + "Ask anything" + a few suggested prompts as Tag components (there is no Chip component in @gunjo/ui). Stream responses by appending to the last assistant message.
Expected output
A working chat panel using ChatPanel, ChatInput, ChatMessage, ScrollArea, EmptyState, Avatar.
Components used
ChatPanel
ChatInput
ChatMessage
ScrollArea
EmptyState
Avatar