chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,286 @@
|
||||
---
|
||||
title: CopilotChatMessageView
|
||||
description: "Message list container component"
|
||||
---
|
||||
|
||||
`CopilotChatMessageView` is the default component used by [CopilotChat](/reference/copilot-chat) to render the message list. It handles rendering user messages, assistant messages, activity messages, and custom message renderers with optimized memoization for performance.
|
||||
|
||||
## What is CopilotChatMessageView?
|
||||
|
||||
The CopilotChatMessageView component:
|
||||
|
||||
- Renders the conversation message list
|
||||
- Handles user, assistant, and activity message types
|
||||
- Supports custom message renderers for extensibility
|
||||
- Optimizes re-renders with memoization
|
||||
- Shows a typing cursor during streaming responses
|
||||
- Built on the [slot system](/reference/slot-system) for deep customization
|
||||
|
||||
## Component Architecture
|
||||
|
||||
CopilotChatMessageView provides slots for customizing message rendering:
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
MV[CopilotChatMessageView] --> assistantMessage
|
||||
MV --> userMessage
|
||||
MV --> cursor
|
||||
```
|
||||
|
||||
### Slot Descriptions
|
||||
|
||||
| Slot | Description |
|
||||
| ------------------ | ----------------------------------------------- |
|
||||
| `assistantMessage` | Component for rendering assistant (AI) messages |
|
||||
| `userMessage` | Component for rendering user messages |
|
||||
| `cursor` | Typing indicator shown during streaming |
|
||||
|
||||
## Basic Usage
|
||||
|
||||
Customize the message view through the `messageView` prop on [CopilotChat](/reference/copilot-chat):
|
||||
|
||||
```tsx
|
||||
<CopilotChat
|
||||
messageView={{
|
||||
className: "space-y-4 p-4",
|
||||
assistantMessage: "bg-blue-50 rounded-lg",
|
||||
userMessage: "bg-gray-100 rounded-lg",
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
## Slot Customization
|
||||
|
||||
CopilotChatMessageView uses the [slot system](/reference/slot-system). Each slot accepts four types of values:
|
||||
|
||||
1. **Tailwind class string** - Add or override CSS classes
|
||||
2. **Props object** - Pass additional props to the default component
|
||||
3. **Custom component** - Replace the component entirely
|
||||
4. **Nested sub-slots** - Drill down to customize child components
|
||||
|
||||
### Assistant Message Customization
|
||||
|
||||
The `assistantMessage` slot controls how AI responses are rendered:
|
||||
|
||||
```tsx
|
||||
<CopilotChat
|
||||
messageView={{
|
||||
assistantMessage: {
|
||||
className: "bg-slate-50 border border-slate-200 rounded-xl p-4",
|
||||
onThumbsUp: (message) => sendFeedback(message.id, "positive"),
|
||||
onThumbsDown: (message) => sendFeedback(message.id, "negative"),
|
||||
onRegenerate: (message) => regenerateResponse(message.id),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
#### Assistant Message Sub-Slots
|
||||
|
||||
| Sub-Slot | Description |
|
||||
| ------------------ | ------------------------------------------------- |
|
||||
| `markdownRenderer` | Renders the message content with markdown support |
|
||||
| `toolbar` | Container for action buttons |
|
||||
| `copyButton` | Button to copy message content |
|
||||
| `thumbsUpButton` | Positive feedback button |
|
||||
| `thumbsDownButton` | Negative feedback button |
|
||||
| `readAloudButton` | Text-to-speech button |
|
||||
| `regenerateButton` | Button to regenerate the response |
|
||||
| `toolCallsView` | Renders tool call executions |
|
||||
|
||||
For full details, see [CopilotChatAssistantMessage](/reference/copilot-chat-assistant-message).
|
||||
|
||||
### User Message Customization
|
||||
|
||||
The `userMessage` slot controls how user messages are rendered:
|
||||
|
||||
```tsx
|
||||
<CopilotChat
|
||||
messageView={{
|
||||
userMessage: {
|
||||
className: "bg-primary text-primary-foreground rounded-2xl px-4 py-2",
|
||||
onEditMessage: ({ message }) => editMessage(message),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
#### User Message Sub-Slots
|
||||
|
||||
| Sub-Slot | Description |
|
||||
| ------------------ | ------------------------------------ |
|
||||
| `messageRenderer` | Renders the message text content |
|
||||
| `toolbar` | Container for action buttons |
|
||||
| `copyButton` | Button to copy message content |
|
||||
| `editButton` | Button to edit the message |
|
||||
| `branchNavigation` | Navigation for conversation branches |
|
||||
|
||||
For full details, see [CopilotChatUserMessage](/reference/copilot-chat-user-message).
|
||||
|
||||
### Cursor Customization
|
||||
|
||||
The cursor appears while the AI is generating a response:
|
||||
|
||||
```tsx
|
||||
<CopilotChat
|
||||
messageView={{
|
||||
cursor: "bg-blue-500 w-3 h-3",
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
Or with a custom component:
|
||||
|
||||
```tsx
|
||||
function CustomCursor() {
|
||||
return (
|
||||
<div className="flex gap-1">
|
||||
<span className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" />
|
||||
<span className="w-2 h-2 bg-blue-500 rounded-full animate-bounce delay-100" />
|
||||
<span className="w-2 h-2 bg-blue-500 rounded-full animate-bounce delay-200" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<CopilotChat
|
||||
messageView={{
|
||||
cursor: CustomCursor,
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
|
||||
## Replacing the Message View
|
||||
|
||||
To completely replace the message view with your own component, pass a custom component to the `messageView` prop:
|
||||
|
||||
```tsx
|
||||
import { CopilotChatMessageView } from "@copilotkit/react-core";
|
||||
|
||||
function CustomMessageView({ messages, isRunning, ...props }) {
|
||||
return (
|
||||
<div className="custom-message-list">
|
||||
<div className="message-count text-sm text-muted-foreground mb-4">
|
||||
{messages.length} messages
|
||||
</div>
|
||||
|
||||
{/* Use the default implementation with customizations */}
|
||||
<CopilotChatMessageView
|
||||
messages={messages}
|
||||
isRunning={isRunning}
|
||||
className="space-y-6"
|
||||
assistantMessage="bg-white shadow-sm rounded-xl p-4"
|
||||
userMessage="bg-blue-500 text-white rounded-2xl"
|
||||
{...props}
|
||||
/>
|
||||
|
||||
{isRunning && (
|
||||
<div className="text-center text-muted-foreground mt-4">
|
||||
AI is thinking...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<CopilotChat messageView={CustomMessageView} />;
|
||||
```
|
||||
|
||||
### Using the Render Function
|
||||
|
||||
For even more control, use the children render function pattern:
|
||||
|
||||
```tsx
|
||||
function CustomMessageView({ messages, isRunning }) {
|
||||
return (
|
||||
<CopilotChatMessageView messages={messages} isRunning={isRunning}>
|
||||
{({ messageElements, messages, isRunning }) => (
|
||||
<div className="custom-layout">
|
||||
<header className="sticky top-0 bg-background p-2 border-b">
|
||||
{messages.length} messages
|
||||
</header>
|
||||
|
||||
<div className="messages p-4">{messageElements}</div>
|
||||
|
||||
{isRunning && (
|
||||
<footer className="sticky bottom-0 bg-background p-2">
|
||||
Generating response...
|
||||
</footer>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CopilotChatMessageView>
|
||||
);
|
||||
}
|
||||
|
||||
<CopilotChat messageView={CustomMessageView} />;
|
||||
```
|
||||
|
||||
The render function receives:
|
||||
|
||||
| Property | Type | Description |
|
||||
| ----------------- | ---------------- | ------------------------------- |
|
||||
| `messageElements` | `ReactElement[]` | Pre-rendered message components |
|
||||
| `messages` | `Message[]` | Raw message data |
|
||||
| `isRunning` | `boolean` | Whether AI is generating |
|
||||
|
||||
## Examples
|
||||
|
||||
### Styling All Messages
|
||||
|
||||
```tsx
|
||||
<CopilotChat
|
||||
messageView={{
|
||||
className: "space-y-6 p-4",
|
||||
assistantMessage: "bg-white shadow-sm rounded-xl p-4",
|
||||
userMessage: "bg-blue-500 text-white rounded-2xl px-4 py-2",
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
### Adding Feedback Handlers
|
||||
|
||||
```tsx
|
||||
<CopilotChat
|
||||
messageView={{
|
||||
assistantMessage: {
|
||||
onThumbsUp: (message) => {
|
||||
analytics.track("positive_feedback", { messageId: message.id });
|
||||
},
|
||||
onThumbsDown: (message) => {
|
||||
analytics.track("negative_feedback", { messageId: message.id });
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
### Custom Assistant Message Component
|
||||
|
||||
Replace the assistant message component entirely:
|
||||
|
||||
```tsx
|
||||
function CustomAssistantMessage({ message, isRunning }) {
|
||||
return (
|
||||
<div className="flex gap-3">
|
||||
<Avatar src="/bot-avatar.png" />
|
||||
<div className="flex-1">
|
||||
<Markdown>{message.content}</Markdown>
|
||||
{isRunning && <TypingIndicator />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<CopilotChat
|
||||
messageView={{
|
||||
assistantMessage: CustomAssistantMessage,
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
|
||||
## Related
|
||||
|
||||
- [CopilotChat](/reference/copilot-chat) - Parent component that uses CopilotChatMessageView
|
||||
- [CopilotChatAssistantMessage](/reference/copilot-chat-assistant-message) - Assistant message customization
|
||||
- [CopilotChatUserMessage](/reference/copilot-chat-user-message) - User message customization
|
||||
- [Slot System](/reference/slot-system) - Deep dive into slot customization
|
||||
Reference in New Issue
Block a user