Минималистичный чат с полем ввода, прижатым к нижнему краю. Кнопка «Думать глубже» включает режим глубокого мышления: её подпись начинает мерцать, а подсказка в пустом поле плавно сменяется на другую.
После отправки сообщение уходит в ленту, кнопка отправки превращается в квадрат «стоп», а слева появляется пузырь с мерцающим «Думаю...». Через заданную паузу приходит ответ бота, и лента аккуратно прокручивается так, чтобы последний обмен репликами оказался над полем.
Скопируйте эти файлы в components/ai-input-deep-thinking/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { AiInputDeepThinking } from "@/components/ai-input-deep-thinking/ai-input-deep-thinking";
export function Assistant() {
return (
<div className="h-[640px]">
<AiInputDeepThinking reply="Сейчас разберёмся" replyDelay={2000} />
</div>
);
}askPlaceholder?Подсказка в обычном режиме
Тип string·По умолчанию "Спросите что угодно..."
deepPlaceholder?Подсказка в режиме глубокого мышления
Тип string·По умолчанию "Пиши давай.."
thinkingText?Текст пузыря ожидания
Тип string·По умолчанию "Думаю..."
deepOnLabel?Подпись кнопки при включённом режиме
Тип string·По умолчанию "Думаю глубоко"
deepOffLabel?Подпись кнопки при выключенном режиме
Тип string·По умолчанию "Думать глубже"
footnote?Подпись справа под полем
Тип string·По умолчанию "AGI уже здесь"
reply?Текст ответа бота
Тип string·По умолчанию "Без понятия 😭"
replyDelay?Пауза перед ответом в миллисекундах
Тип number·По умолчанию 1500
className?Классы корневого блока
Тип string