Chat Actions

Панель инструментов под сообщением — копирование, перегенерация, редактирование, лайк/дизлайк со встроенными состояниями.

Oracul DS — это коллекция компонентов на Base UI с CLI-установкой через shadcn. Включает 50+ примитивов и 500+ готовых particles.

import {
  ChatActionCopy,
  ChatActionEdit,
  ChatActionFeedback,
  ChatActionRegenerate,
  ChatActions,
} from "@/components/ui/chat-actions";
import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent,
  ChatMessageToolbar,
} from "@/components/ui/chat-message";

const response =
  "Oracul DS — это коллекция компонентов на Base UI с CLI-установкой через shadcn. Включает 50+ примитивов и 500+ готовых particles.";

export default function Particle() {
  return (
    <div className="w-full max-w-2xl p-4">
      <ChatMessage from="assistant">
        <ChatMessageAvatar fallback="J" />
        <ChatMessageContent>{response}</ChatMessageContent>
        <ChatMessageToolbar>
          <ChatActions>
            <ChatActionCopy text={response} />
            <ChatActionRegenerate />
            <ChatActionEdit />
            <ChatActionFeedback type="like" />
            <ChatActionFeedback type="dislike" />
          </ChatActions>
        </ChatMessageToolbar>
      </ChatMessage>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-actions

Использование

import {
  ChatAction,
  ChatActionCopy,
  ChatActionEdit,
  ChatActionFeedback,
  ChatActionRegenerate,
  ChatActions,
} from "@/components/ui/chat-actions";
 
<ChatActions>
  <ChatActionCopy text={message.content} />
  <ChatActionRegenerate onClick={() => regenerate()} />
  <ChatActionEdit onClick={() => edit()} />
  <ChatActionFeedback type="like" onToggle={(active) => rate("up", active)} />
  <ChatActionFeedback type="dislike" onToggle={(active) => rate("down", active)} />
</ChatActions>

Встроенные действия

Компонент	Поведение
`ChatActionCopy`	Копирует `text` через `navigator.clipboard`, показывает галочку ~1.5с.
`ChatActionRegenerate`	Иконка ↺. Передайте `onClick`.
`ChatActionEdit`	Иконка ✎. Передайте `onClick`.
`ChatActionFeedback`	Переключатель лайк / дизлайк. Управляемый (`active`) или неуправляемый (`defaultActive`).
`ChatAction`	Универсальная кнопка только с иконкой для любых других действий. Передайте `label`.

Все наследуют Button Oracul — варианты, размеры и render-prop работают.

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

Установка Использование Встроенные действия