Data Display

Chat

Presentational primitives for AI-assistant experiences: a column layout, an auto-scrolling message viewport, role-styled bubbles, header chrome, an empty-state hero with suggestions, tool activity chips and cards, a typing indicator, and a submit-on-Enter composer. Bring your own state.

Import

import {
  Chat,
  ChatHeader,
  ChatHeaderAvatar,
  ChatHeaderTitle,
  ChatHeaderActions,
  ChatMessages,
  ChatMessage,
  ChatMessageBubble,
  ChatEmptyState,
  ChatEmptyStateIcon,
  ChatEmptyStateTitle,
  ChatEmptyStateDescription,
  ChatSuggestions,
  ChatSuggestion,
  ChatToolChip,
  ChatToolCard,
  ChatToolCardHeader,
  ChatToolCardActions,
  ChatTypingIndicator,
  ChatInput,
} from "@countryclub/ui-react";

Default

Concierge

Always here to help

Hi! I'm your Country Club concierge. How can I help you plan your week?

Any dinners near downtown this week?

There are three dinners downtown Thursday–Saturday. Want me to hold a seat?

Empty state

A welcome hero with tappable suggestion prompts for a fresh conversation.

Ask your concierge

Find dinners, discover members you should meet, and plan your week — just ask.

Tool activity

Inline chips and framed cards for tool calls and write-action approvals.

Searched dinners near downtown

Hold a seat at Thonglor Supper Club

Thursday · 7:30 PM · holds your seat for 24 hours while you confirm.