> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Chat
> A chat component for displaying messages and handling chat interactions
export const ChatCustomStylingPreview = () => ;
export const ChatFileUploadPreview = () => ;
export const ChatSimpleInterfacePreview = () => ;
export const ChatFileMessagesPreview = () => ;
export const ChatImageMessagesPreview = () => ;
export const ChatTextMessagesPreview = () => ;
export const ChatBasicExamplePreview = () => ;
## Overview
The Chat component provides a complete chat interface with message display, input handling, and various message types.
## Basic Usage
```tsx theme={null}
import { Chat } from '@peppermint-design/devreadykit-custom';
export default function App() {
const [messages, setMessages] = useState([]);
return (
{
setMessages(prev => [...prev, message]);
}}
/>
);
}
```
## Message Types
### Text Messages
```tsx theme={null}
const messages = [
{
id: 1,
type: 'text',
content: 'Hello! How are you?',
sender: 'user',
timestamp: new Date()
},
{
id: 2,
type: 'text',
content: 'I\'m doing great, thanks for asking!',
sender: 'bot',
timestamp: new Date()
}
];
```
### File Messages
```tsx theme={null}
const messages = [
{
id: 1,
type: 'file',
content: {
name: 'document.pdf',
size: '2.5 MB',
url: 'https://example.com/document.pdf'
},
sender: 'user',
timestamp: new Date()
}
];
```
## Props
| Prop | Type | Default | Description |
| :--------------- | :--------------------------- | :-------------------- | :---------------------- |
| messages | `Message[]` | `[]` | Array of messages |
| onSendMessage | `(message: Message) => void` | — | Send message handler |
| placeholder | `string` | `"Type a message..."` | Input placeholder |
| disabled | `boolean` | `false` | Disable chat input |
| className | `string` | — | Additional CSS classes |
| showTimestamps | `boolean` | `true` | Show message timestamps |
| allowFileUpload | `boolean` | `true` | Allow file uploads |
| maxFileSize | `number` | `10485760` | Max file size in bytes |
| allowedFileTypes | `string[]` | `[]` | Allowed file types |
## Examples
### Simple Chat Interface
```tsx theme={null}
function SimpleChat() {
const [messages, setMessages] = useState([
{
id: 1,
type: 'text',
content: 'Welcome to the chat!',
sender: 'bot',
timestamp: new Date()
}
]);
const handleSendMessage = (message) => {
const newMessage = {
id: Date.now(),
...message,
timestamp: new Date()
};
setMessages(prev => [...prev, newMessage]);
};
return (
);
}
```