Создание многострочного поля ввода чата с кнопками на базе baseweb UI

Содержание

Кому нужен этот промт и как он работает?
Готовый промт
Как использовать промт и на что обратить внимание
Примеры использования
Пример выхода нейросети
Итог: зачем использовать этот промт?

Кому нужен этот промт и как он работает?

Этот промт предназначен для веб-разработчиков и специалистов по UI/UX-дизайну, которым необходимо быстро создать удобное поле ввода для чат-интерфейса с помощью библиотеки BaseWeb UI. Промт помогает сгенерировать точные инструкции для нейросети по реализации многострочного текстового поля с функциональными кнопками.

Использование такого промта позволяет решить типичные задачи интерфейса чата: предоставить пользователю возможность вводить сообщения с автоматическим увеличением поля, добавлять эмодзи и изображения, а также сразу отправлять сообщение. Это значительно ускоряет процесс разработки и снижает вероятность ошибок при верстке.

Сам промт задаёт условия, при которых текстовое поле расширяется по вертикали до 96 пикселей, после чего появляется прокрутка. Слева от поля расположены две кнопки для вставки эмодзи и изображения, а справа — кнопка отправки сообщения. Это упрощённое и распространённое решение для удобства пользователей чат-приложений.

Готовый промт

Привет, помоги использовать библиотеку baseweb UI для создания поля ввода чата с несколькими характеристиками: многострочное текстовое поле, под которым расположены три кнопки. Слева две кнопки — вставка эмодзи и вставка изображения, справа одна кнопка — отправка сообщения. Текстовое поле автоматически расширяется по вертикали, пока не достигнет высоты 96 пикселей, после чего появляется вертикальная прокрутка.

Как использовать промт и на что обратить внимание

При использовании промта обращайте внимание на следующие моменты:

Чётко указывайте цели интерфейса, чтобы нейросеть могла понять структуру и поведение компонента.
Если требуется изменить дизайн или добавить новые кнопки, дополните промт соответствующими описаниями.
Проверяйте, чтобы библиотека BaseWeb UI была подключена и корректно работала в вашем проекте, так как промт ориентирован именно на неё.
Авторасширение текстового поля ограничено высотой 96 пикселей — если хотите изменить высоту, дополните описание в промте.
Обратите внимание: поведение кнопок и функции вставки эмодзи или изображений должны быть реализованы отдельно, промт описывает лишь внешний вид и базовую функциональность.

Результаты от нейросети зависят от точности и полноты описания задачи в промте. Необходимо при необходимости делать уточнения и тестировать выходной код.

Примеры использования

Пример 1: Создание поля ввода для веб-чата в мобильном приложении, где важно поддерживать удобный ввод с возможностью прикреплять мультимедиа.

Привет, помоги использовать библиотеку baseweb UI для создания многострочного поля ввода чата с тремя кнопками: две слева — вставка эмодзи и изображений, справа — кнопка отправки. Текстовое поле авторасширяется по высоте до 96 пикселей, далее появляется прокрутка. Дизайн адаптирован для мобильных устройств.

Пример 2: Разработка интерфейса чата для рабочего портала, где требуется быстро отправлять сообщения и добавлять к ним фотографии и эмодзи.

Привет, помоги на базе baseweb UI сделать чат: многострочное текстовое поле под ним три кнопки — две слева (эмодзи и изображение), одна справа (отправка). Текстовое поле растёт по высоте автоматически до 96 пикселей, затем появляется вертикальный скролл. Интерфейс должен быть прост и удобен для сотрудников офиса.

Пример выхода нейросети

На основе данного промта нейросеть может сгенерировать следующий код или подробное пошаговое руководство по созданию интерфейса в BaseWeb UI. Например:

✅ Для реализации поля ввода в BaseWeb UI используйте компонент Textarea с пропсом resize="vertical" и ограничением максимальной высоты в 96 пикселей. Добавьте под полем контейнер с тремя кнопками: Button для вставки эмодзи и изображения слева, а справа — кнопку отправки. Для прокрутки используйте контейнер с overflowY: "auto". Таким образом, текстовое поле будет расширяться до заданного размера, а кнопки остаются фиксированными и расположены по сторонам согласно описанию.

Обратите внимание: результат примерный и может отличаться в зависимости от версии BaseWeb UI и требуемой кастомизации.

Итог: зачем использовать этот промт?

Этот промт существенно упрощает задачу создания функционального и удобного поля ввода для чата на базе BaseWeb UI. В нём сразу заложено необходимое поведение и интерфейсные элементы, что снижает время на разработку и минимизирует ошибки. Вы быстро получите конкретные рекомендации или исходный код для внедрения в ваш проект.