Поле ввода для ИИ-чата распознаёт упоминания инструментов: стоит набрать @видео, @поиск или @заметки, как поле плавно вырастает, а под текстом на пружине выскакивают слегка наклонённые карточки с иконкой и названием инструмента.
По Enter или кнопке со стрелкой текст и карточки перелетают из поля в ленту сообщений, снизу вверх проносится размытая радужная вспышка, и звучит короткий синтезированный звук отправки. Лента сама прокручивается к новому сообщению.
Скопируйте эти файлы в components/ai-input-mentions/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { AiInputMentions } from "@/components/ai-input-mentions/ai-input-mentions";
export function Chat() {
return (
<div className="h-[600px]">
<AiInputMentions placeholder="Спросите ассистента..." sound={false} />
</div>
);
}tools?Инструменты: ключ для @, название, иконка lucide и цвет иконки
Тип MentionTool[]·По умолчанию DEFAULT_MENTION_TOOLS
placeholder?Подсказка в пустом поле
Тип string·По умолчанию "Пиши давай.."
colors?Цвета радужной вспышки при отправке
Тип string[]·По умолчанию MENTION_BURST_COLORS
sound?Звук при отправке
Тип boolean·По умолчанию true
className?Классы корневого блока
Тип string