Белое поле ввода лежит на медленно переливающемся mesh-градиенте из четырёх пастельных цветов. Пока текст короткий, слева и справа видны кнопки «плюс», микрофона и голосового режима; когда строка становится длиннее, поле раздвигается, а кнопки уходят вниз. Кнопка голосового режима сменяется стрелкой отправки, как только появляется текст.
По Enter поле опрокидывается назад с размытием и исчезает, а на его месте проявляется мерцающая надпись о генерации.
Скопируйте эти файлы в components/ai-input-mesh/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { AiInputMesh } from "@/components/ai-input-mesh/ai-input-mesh";
export function Prompt() {
return (
<div className="h-[600px]">
<AiInputMesh colors={["#c1dafe", "#96beff", "#cfb7fc", "#ebe1f9"]} speed={0.6} />
</div>
);
}placeholder?Подсказка в пустом поле
Тип string·По умолчанию "Спросите что угодно..."
generatingText?Мерцающая надпись после отправки
Тип string·По умолчанию "Генерируем ваш SaaS на миллиард..."
colors?Цвета mesh-градиента
Тип string[]·По умолчанию MESH_INPUT_COLORS
speed?Скорость перетекания градиента
Тип number·По умолчанию 1
distortion?Сила искажения градиента
Тип number·По умолчанию 0.8
swirl?Сила завихрения градиента
Тип number·По умолчанию 1
className?Классы корневого блока
Тип string