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();

На этой странице

Установка Использование API Хук