WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text Editor
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselImage CropperImage LightboxLocation MapQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryThemeCredits

AI Kit

Chat Message

AI KitChat Message
Agent Status CardChat Thread
Live props
Content
role
content
model
assistantName
State
status
error
edited
isLatest
Appearance
variant
size
bubble
tone
color
showAvatar
caret
codeAccent
Behavior
timestamp
timeFormat
actions
copyFormat
maxUserLines8
longPress
locale
Layout
grouped
Code
import { ChatMessage } from "@/components/ui/chat-message"

<ChatMessage />
Pro

v1.0.0·Added in 1.0.0

One message of an AI conversation: the question in a bubble, the answer with its thinking, tools, markdown, sources and actions.

Your question sits in a bubble on the right, the answer reads on the left with a small mark. While it streams, three dots wait for the first word, the thinking row shimmers, tools spin inline and a caret follows the text; the actions appear when it finishes. Under the answer: Copy (a check confirms it), thumbs up or down (the pressed one fills and pops, the other steps aside and "Thanks" shows for a moment), Regenerate, the "‹ 2 / 3 ›" version switcher and the "⋯" menu. On the latest answer the actions always show; elsewhere they fade in on hover or focus, and on a phone a tap on the message shows them and its time (one message at a time) while a long press opens an action sheet with the same actions. Edit turns your bubble into a text box: Cmd or Ctrl + Enter sends, Escape cancels and puts focus back on Edit. Images in attachments open a full-screen viewer with swipe, files and sources open in a new tab, long questions fold behind "Show more", and a failed answer shows its error with Retry. Every action is a button in the Tab order with its own name; thumbs are toggles.

Add to a project

npx wingo-ui@latest add chat-message

Pro item: the CLI needs a Pro account. See plans

Dependencies

motionlucide-reactmarkdownreasoning-indicatortool-call-timelineaction-sheetavatarbuttoncollapsiblecopy-buttondropdown-menuimage-lightboxtextareatooltipai-chatfile-typesrelative-timeuse-controllable-stateuse-localeuse-long-pressuse-media-querymotiontonesui-config

Files

  • components/ui/chat-message.tsx

See also

MarkdownReasoning IndicatorTool Call TimelinePrompt InputAvatarCopy ButtonImage LightboxComment ThreadAI Chatlib
PreviousAgent Status CardNext Chat Thread

You said, 4:32 PM

Which invoices from September are overdue? Put them in a table and suggest what to do next.

4:32 PM

Summit Assistant said, 4:33 PM

I found 3 overdue invoices in September, $22,775.95 in total:

ClientInvoiceAmountLate
Northwind Tech Inc.#2026-0405$12,480.001 day
Greenleaf Pharmacy#2026-0371$7,315.2053 days
Westside Books#2026-0366$2,980.7557 days

What I suggest:

  1. A polite reminder to Northwind Tech Inc., the due date passed yesterday.
  2. A call to Greenleaf Pharmacy: Daniel Cross, (503) 555-0118.
  3. For Westside Books, a formal payment notice. I can use the Final notice template.

Should I draft the emails?

4:33 PM·Summit Pro
last action: —caret=dot · copyFormat=markdown · longPress=on · maxUserLines=8 · codeAccent=—

Hover the answer (or tap it on a phone) for its actions; isLatest keeps them on.