Chat Suggestion

Горизонтальные chip-suggestions с быстрыми стартовыми prompts.

Выбрано: —

"use client";

import { useState } from "react";
import {
  ChatSuggestion,
  ChatSuggestions,
} from "@/components/ui/chat-suggestion";

const items = [
  "Напиши план продукта",
  "Объясни как ребёнку",
  "Найди ошибку в коде",
  "Подведи итог встречи",
  "Сравни два варианта",
  "Покажи примеры использования",
];

export default function Particle() {
  const [picked, setPicked] = useState<string | null>(null);

  return (
    <div className="flex w-full max-w-xl flex-col gap-4 p-4">
      <ChatSuggestions>
        {items.map((s) => (
          <ChatSuggestion key={s} onSelect={setPicked} suggestion={s} />
        ))}
      </ChatSuggestions>
      <p className="text-muted-foreground text-sm">
        Выбрано:{" "}
        <span className="font-medium text-foreground">{picked ?? "—"}</span>
      </p>
    </div>
  );
}

Установка


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

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

import {
  ChatSuggestion,
  ChatSuggestions,
} from "@/components/ui/chat-suggestion";
 
<ChatSuggestions>
  <ChatSuggestion
    onSelect={(text) => sendMessage(text)}
    suggestion="Что нового в Next.js 16?"
  />
  <ChatSuggestion
    onSelect={(text) => sendMessage(text)}
    suggestion="Объясни React Server Components"
  />
  <ChatSuggestion
    onSelect={(text) => sendMessage(text)}
    suggestion="Покажи мне примеры использования Streamdown"
  />
</ChatSuggestions>

API

Компонент	Описание
`ChatSuggestions`	Горизонтальный скроллируемый ряд. Скрывает скроллбар.
`ChatSuggestion`	Chip-кнопка. Принимает `suggestion: string` и `onSelect: (s: string) => void`.

<ChatSuggestion /> — это Button под капотом, так что можно передавать variant, size, disabled и т.д.

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

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