Простое светлое поле ввода с плюсом и кнопкой-стрелкой, которая встаёт вертикально, когда в поле есть текст. При отправке стрелка улетает вверх, снизу экрана поднимается и тает размытая радужная волна, а сообщение пружинисто всплывает над полем.
Через секунду приходит ответ собеседника в цветном пузыре, и стрелка возвращается на место. Отправка сопровождается коротким звуком, который можно выключить.
Скопируйте эти файлы в components/ai-input-gradient-send/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { AiInputGradientSend } from "@/components/ai-input-gradient-send/ai-input-gradient-send";
export function Chat() {
return (
<div className="h-[600px]">
<AiInputGradientSend placeholder="Напишите сообщение" sound={false} />
</div>
);
}placeholder?Подсказка в пустом поле
Тип string·По умолчанию "Сообщение"
reply?Ответ собеседника
Тип string·По умолчанию "Соберись, дружище 😵"
replyDelay?Задержка ответа, мс
Тип number·По умолчанию 1000
colors?Цвета радужной волны снизу вверх
Тип string[]·По умолчанию GRADIENT_SEND_COLORS
sound?Звук при отправке
Тип boolean·По умолчанию true
volume?Громкость звука от 0 до 1
Тип number·По умолчанию 0.2
width?Максимальная ширина поля, px
Тип number·По умолчанию 512
background?Фон сцены
Тип string·По умолчанию "#F5F6F6"
replyColor?Цвет пузыря ответа
Тип string·По умолчанию "#0b7a96"
className?Классы корневого блока
Тип string