Обзор
Компоненты
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Auth Surface
- Avatar
- Badge
- Browse Catalog Dialog
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Command
- Connector Setup Dialog
- Cookie Banner
- Dialog
- Directory Card
- Directory Detail
- Directory Skeleton
- DrawerНовое
- Token Parts Input
- Empty
- Field
- Fieldset
- File Preview Modal
- File Preview Skeleton
- Form
- Frame
- Group
- Icon
- Input
- Input Group
- Kbd
- Label
- Legal Shell
- Menu
- Mermaid Diagram
- Mind Map Diagram
- Not Found Screen
- Onboarding Frame
- Popover
- PDF Thumbnail
- Personalization Landing
- Preview Card
- Pricing Page
- Progress
- Radio Group
- Ring Spinner
- Scroll Area
- Select
- Separator
- Settings Page
- Settings Skills
- Settings Connectors
- Settings Capabilities
- Settings Usage
- Settings Account
- Settings Billing
- Sheet
- Sidebar
- Skeleton
- Skill Create Dialog
- Slider
- Spinner
- Stat
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Tooltip
AI-компоненты
- Компоненты AI
- Chat Conversation
- Chat Message
- Chat Response
- Chat Suggestion
- Chat Prompt Input
- Slash Highlighted Textarea
- Chat Search Dialog
- Chat Skill Doc
- Chat Connector Detail
- Chat Attachments
- Chat File Card
- Chat Token Chip
- Chat Code Block
- Chat Image
- Chat Inline Citation
- Chat Sources
- Chat Web Search
- Chat Research
- Chat Source
- Chat Actions
- Chat Context
- Chat Loader
- Chat Compaction
- Chat Timeline
- Chat Snippet
- Chat Terminal
- Chat Stack Trace
- Chat Test Results
- Chat File Tree
- Chat Environment Variables
- Chat Audio Player
- Chat Transcription
- Chat Speech Input
- Chat Mic Selector
- Chat Voice Selector
- Chat Agent
- Chat Persona
- Chat Connection
- Chat Connector Suggestion
- Chat Queue
- Chat Checkpoint
- Chat Confirmation
- Chat Artifact
- Chat JSX Preview
- Chat Schema Display
- Chat Package Info
- Chat Commit
- Chat Plan
- Chat Open In Chat
- Chat Sandbox
- Chat Model Selector
- Chat Canvas
- Chat Node
- Chat Edge
Ресурсы
Chat Conversation
Скроллируемый контейнер истории сообщений с авто-прилипанием к низу.
Вопрос #1: что в Oracul DS лучше всего?
Базовые примитивы с render-prop API и большая коллекция готовых particles.
Вопрос #2: что в Oracul DS лучше всего?
Базовые примитивы с render-prop API и большая коллекция готовых particles.
Вопрос #3: что в Oracul DS лучше всего?
Базовые примитивы с render-prop API и большая коллекция готовых particles.
Вопрос #4: что в Oracul DS лучше всего?
Базовые примитивы с render-prop API и большая коллекция готовых particles.
import { IconMessage } from "@tabler/icons-react";
import {
ChatConversation,
ChatConversationContent,
ChatConversationEmptyState,
} from "@/components/ui/chat-conversation";
import {
ChatMessage,
ChatMessageContent,
} from "@/components/ui/chat-message";
const messages = Array.from({ length: 8 }, (_, i) => ({
id: `m-${i}`,
role: (i % 2 === 0 ? "user" : "assistant") as "user" | "assistant",
content:
i % 2 === 0
? `Вопрос #${Math.floor(i / 2) + 1}: что в Oracul DS лучше всего?`
: "Базовые примитивы с render-prop API и большая коллекция готовых particles.",
}));
export default function Particle() {
return (
<div className="flex h-100 w-full rounded-2xl border bg-card">
<ChatConversation className="flex-1">
<ChatConversationContent>
{messages.length === 0 ? (
<ChatConversationEmptyState
description="Напиши что-нибудь, чтобы начать."
icon={<IconMessage aria-hidden="true" stroke={1.5} />}
title="Пусто"
/>
) : (
messages.map((m) => (
<ChatMessage from={m.role} key={m.id}>
<ChatMessageContent>{m.content}</ChatMessageContent>
</ChatMessage>
))
)}
</ChatConversationContent>
</ChatConversation>
</div>
);
}
Установка
pnpm dlx shadcn@latest add @oracul/chat-conversation
Использование
import {
ChatConversation,
ChatConversationContent,
ChatConversationEmptyState,
ChatConversationScrollButton,
} from "@/components/ui/chat-conversation";<ChatConversation>
<ChatConversationContent>
{messages.map((m) => (
<ChatMessage from={m.role} key={m.id}>
<ChatMessageContent>{m.content}</ChatMessageContent>
</ChatMessage>
))}
</ChatConversationContent>
<ChatConversationScrollButton />
</ChatConversation>API
| Компонент | Описание |
|---|---|
ChatConversation | Внешний контейнер. Прокидывает контекст auto-scroll вниз. |
ChatConversationContent | Скроллируемая область. Должна быть внутри ChatConversation. |
ChatConversationEmptyState | Заглушка для пустого состояния (title, description, icon). |
ChatConversationScrollButton | Floating-кнопка «вниз», появляется когда пользователь проскроллил вверх. |
Хук
import { useChatConversation } from "@/components/ui/chat-conversation";
const { isAtBottom, scrollToBottom } = useChatConversation();На этой странице