Skip to main content

​
Chat

Full-featured chat interface with message history, template support, and media uploads. Automatically groups messages by date and shows template prompt when last message is > 24 hours old.

​
Import

import { Chat } from '@adoptaunabuelo/react-components';

​
Props

​
messages
Array<ChatMessageProps>
required
Array of chat messages to display, grouped automatically by date
​
templates
Array<TemplateProps>
required
Available message templates shown when conversation is inactive (>24 hrs)
​
onSend
(data: SendData) => void
required
Callback fired when user sends a message, template, or uploads media
​
loading
boolean
Shows loading spinner in input when true
​
placeholder
string
Placeholder text for the input field
​
style
React.CSSProperties
Custom styles for the container

​
ChatMessageProps

​
key
string
required
Unique identifier for the message
​
type
'sender' | 'recipient'
required
Message direction/sender type
​
text
string
Text content of the message
​
createdAt
Date
required
Timestamp when message was created
​
state
'sent' | 'undelivered' | 'delivered' | 'failed' | 'read'
required
Delivery/read status of the message
​
media
Array<MediaProps>
Array of media attachments (images, audio)
​
User
{ imageUrl?: string; name?: string }
required
User information for the message sender
​
role
string
Role attribute for the message container

​
TemplateProps

​
id
string
required
Unique identifier for the template
​
title
string
required
Template title
​
subtitle
string
required
Template subtitle
​
description
string
required
Full template message content

​
SendData

​
text
string
Text message content
​
template
string
Template ID when using a template
​
media
{ base64: string; contentType: string }
Media attachment with base64 data and content type

​
Usage

<Chat
  messages={chatMessages}
  templates={messageTemplates}
  loading={isSending}
  onSend={(data) => handleSendMessage(data)}
/>

​
Notes

  • Messages are automatically grouped by date with date dividers
  • Shows template prompt when last recipient message is >24 hours old
  • Supports image and audio media attachments
  • Auto-scrolls to bottom when new messages arrive
  • Media uploads are converted to base64 before sending
  • Input is disabled when templates are required (>24h inactive)

Build docs developers (and LLMs) love

Get started for freeTalk to us