A complete chat transcript that connects header, messages, answers, sources and feedback.
HistoryMessagesSource feedbackFullscreen
Live components with example content. Try their controls, or switch the theme and palette.
Usage
"use client";
import { Message, MessageContent, MessageScroller } from "@/components/agents/message";
import { ChatHeader } from "@/components/chat/chat-header";
export default function Example() {
return (
<div><ChatHeader nickname="Ciele" onNewChat={() => {}} /><MessageScroller label="Conversation" className="h-80"><Message from="assistant"><MessageContent>How can I help?</MessageContent></Message></MessageScroller></div>
);
}
Included variants
- History
- Messages
- Source feedback
- Fullscreen
In Ciele
Use the workspace imports shown above inside Ciele. App components use the shared Tailwind tokens in globals.css. For another project, adapt the imports and bring the dependencies listed in the source.
Source files
- apps/web/src/components/chat/chat-header.tsx
- apps/web/src/components/agents/message.tsx
- apps/web/src/components/agents/message-scroller.tsx
- apps/web/src/components/agents/streaming-response.tsx
- apps/web/src/components/chat/chat-markdown.tsx
- apps/web/src/components/chat/feedback-dialog.tsx
Source code
The implementation used by Ciele, including its supporting components. Original attribution and license notices remain in the files.
Loading source files…