aiMessageInput

Компонент aiMessageInput служит для ввода сообщения пользователем: это расширяющееся текстовое поле с кнопкой отправки, необязательными элементами управления рядом с полем и необязательным содержимым, задаваемым приложением, над и под ним.

XML-элемент

aiMessageInput

Java-класс

AiMessageInput

Используйте его отдельно везде, где приложение получает сообщение от пользователя. aiChat встраивает его и настраивает автоматически, поэтому всё, что описано на этой странице, доступно и через чат.

Обзор

Пока текст помещается в одну строку, поле ввода сообщений держит свои элементы управления в одном ряду:

Поле ввода сообщений в свёрнутом состоянии

Когда текст становится длиннее одной строки, поле занимает всю ширину, а элементы управления перестраиваются в строку панели инструментов под ним:

Поле ввода сообщений в развёрнутом состоянии

Основы

Объявите пространство имен aichat в XML-дескрипторе экрана:

<view xmlns="http://jmix.io/schema/flowui/view"
      xmlns:aichat="http://jmix.io/schema/aichat/ui"
      title="msg://MessageInputView.title">
Studio автоматически добавляет пространство имен, когда вы добавляете компонент с помощью действия Add Component на верхней панели действий. См. Палитра компонентов.

Полю ввода сообщений не нужно ничего, кроме самого элемента:

<aichat:aiMessageInput id="basicsComposer"/>

Отдельное поле ввода сообщений занимает всю ширину своего контейнера. В отличие от поля внутри чата, у него нет собственной ширины, поэтому задайте ему ширину или поместите его в контейнер, который ограничивает ширину.

Отправка сообщения

Текст передается в приложение через событие отправки:

@Subscribe("basicsComposer")
public void onBasicsComposerSubmit(final AiMessageInput.SubmitEvent event) {
    lastMessageSpan.setText(event.getValue());
}

Событие содержит отправленный текст, а поле затем очищается само, поэтому приложению не нужно это делать.

Поле ввода сообщений не предоставляет доступ к введенному в нем тексту. В нем нет методов getValue() и setValue(), поэтому приложение не может прочитать то, что вводит пользователь, заранее заполнить поле предлагаемым запросом или очистить его до отправки. Текст становится доступен только тогда, когда пользователь отправляет его.

Текстовое поле

Поле увеличивается вместе с содержимым до maxRows строк (по умолчанию десять), а после этого прокручивается внутри:

<aichat:aiMessageInput id="maxRowsComposer" maxRows="3"/>

По умолчанию Enter отправляет сообщение, а Shift+Enter вставляет перенос строки. Установите enterAction в NEWLINE, чтобы поменять их местами: тогда Enter вставляет перенос строки, а Ctrl/Cmd+Enter отправляет сообщение:

<aichat:aiMessageInput id="newlineComposer" enterAction="NEWLINE"/>

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

Префикс и суффикс

Элементы prefix и suffix размещают элементы управления приложения внутри области ввода, перед полем и после него:

<aichat:aiMessageInput id="slotsComposer">
    <aichat:prefix>
        <button id="promptLibraryButton"
                icon="PLUS"
                themeNames="tertiary"
                title="msg://promptLibraryButton.title"/>
    </aichat:prefix>
    <aichat:suffix>
        <button id="clearButton"
                icon="MICROPHONE"
                themeNames="tertiary"
                title="msg://clearButton.title"/>
    </aichat:suffix>
</aichat:aiMessageInput>

Компонент, объявленный в любом из этих элементов, можно инжектировать по id точно так же, как компонент верхнего уровня экрана:

@ViewComponent
private JmixButton promptLibraryButton;

@Subscribe
public void onInit(final InitEvent event) {
    promptLibraryButton.addClickListener(clickEvent ->
            notifications.show(messageBundle.getMessage("promptLibraryButton.notification")));
}

Верхняя и нижняя полосы

Элементы header и footer содержат контент приложения внутри поля ввода сообщений, но вне области ввода, например строку контекста над полем или предупреждение под ним:

Поле ввода сообщений с верхней и нижней полосами
XML
<aichat:aiMessageInput id="bandsComposer">
    <aichat:header>
        <span id="contextSpan" text="msg://contextSpan.text"/>
    </aichat:header>
    <aichat:footer>
        <span text="msg://disclaimer.text"/>
    </aichat:footer>
</aichat:aiMessageInput>
Пакет сообщений
com.company.demo.view.messageinput/disclaimer.text=AI can make mistakes. Check important information.

Полосы повторяют ширину и выравнивание по центру области ввода, поэтому они выровнены по полю, а не по окружающему макету. Их содержимое можно инжектировать по id, и оно отключается вместе с полем ввода сообщений.

Чтобы прижать полосу к области ввода, убрав разделяющий их отступ, примените вариант темы no-header-footer-gap:

<aichat:aiMessageInput id="noGapComposer"
                       themeNames="no-header-footer-gap">
    <aichat:footer>
        <span text="msg://disclaimer.text"/>
    </aichat:footer>
</aichat:aiMessageInput>

Этот вариант действует сразу на обе полосы и не меняет отступы внутри области ввода.

Постоянная панель инструментов

По умолчанию поле ввода сообщений переключается между двумя макетами, показанными в разделе Обзор, по мере увеличения текста. Вариант темы fixed-toolbar всегда сохраняет макет с панелью инструментов, поэтому элементы управления остаются в отдельной строке, даже когда в поле одна строка:

<aichat:aiMessageInput id="fixedToolbarComposer"
                       themeNames="fixed-toolbar">
    <aichat:prefix>
        <button id="modelButton"
                text="msg://modelButton.text"
                themeNames="tertiary"/>
    </aichat:prefix>
</aichat:aiMessageInput>

Локализация

Текст-заполнитель и доступные имена кнопок берутся из пакета сообщений дополнения, из ключей aiMessageInput.i18n.*. Переопределите их в пакете сообщений приложения, чтобы изменить тексты поля ввода сообщений везде.

Чтобы изменить тексты одного поля ввода сообщений, добавьте вложенный элемент i18n:

XML
<aichat:aiMessageInput id="i18nComposer">
    <aichat:i18n placeholder="msg://i18nComposer.placeholder"/>
</aichat:aiMessageInput>
Пакет сообщений
com.company.demo.view.messageinput/i18nComposer.placeholder=Ask about this ticket

О том, как сочетаются эти два уровня, см. Приоритет.

Стилизация

Поле ввода сообщений открывает доступ к своим внутренним частям как к shadow parts, к которым можно обращаться с помощью селектора ::part().

Следующие свойства стилей можно использовать в таблицах стилей CSS для настройки внешнего вида этого компонента.

Имя Описание

--jmix-ai-message-input-background

Фон области ввода.

--jmix-ai-message-input-padding

Внутренний отступ области ввода.

--jmix-ai-message-input-gap

Расстояние между частями поля ввода сообщений: полосами, лотком с вложениями, полем и кнопками.

--jmix-ai-message-input-max-width

Ширина, в пределах которой компонент выравнивается по центру. Вне чата не задана, поэтому отдельное поле ввода сообщений занимает весь свой контейнер.

--jmix-ai-message-input-icon-send

Значок кнопки отправки.

--jmix-ai-message-input-icon-stop

Значок, который показывает кнопка отправки, пока генерируется ответ.

Варианты темы

Имя темы Результат

fixed-toolbar

Всегда держит элементы управления в отдельной строке, а не только когда текст становится длиннее одной строки. См. Постоянная панель инструментов.

no-header-footer-gap

Убирает отступ между полосами и областью ввода, так что полоса выглядит как продолжение поля. См. Верхняя и нижняя полосы.

Если применить их к чату, оба варианта передаются его полю ввода сообщений. См. раздел Стилизация на странице чата.

Компоненты стилизованы для обеих тем Jmix, Aura и Lumo, и используют собственные токены темы для рамок фокуса, границ, радиусов скругления и отступов, поэтому у перечисленных выше свойств нет единого значения по умолчанию. Поддерживаются темный режим, режим высокой контрастности и уменьшение анимации, а макет описан свойствами, которые не зависят от направления, поэтому компоненты следуют направлению текста документа.

Вложения

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

Атрибуты

aiMessageInput имеет следующие уникальные атрибуты:

Имя Описание По умолчанию

acceptedFileExtensions

Ограничивает вложения перечисленными расширениями файлов. См. Вложения.

—

acceptedMimeTypes

Ограничивает вложения перечисленными типами медиа. См. Вложения.

—

attachmentsEnabled

Определяет, принимает ли поле ввода сообщений вложения. См. Вложения.

false

enterAction

Определяет действие клавиши Enter: SEND отправляет сообщение, NEWLINE вставляет перенос строки. См. Текстовое поле.

SEND

maxFileSize

Задает максимальный размер одного вложения в байтах. См. Вложения.

26214400

maxFiles

Задает, сколько файлов можно прикрепить к одному сообщению. См. Вложения.

10

maxRows

Задает, до скольких строк увеличивается поле, прежде чем начать прокручиваться внутри. См. Текстовое поле.

10

uploadDropZoneEnabled

Определяет, можно ли перетаскивать файлы на поле ввода сообщений. См. Вложения.

true

themeNames

Применяет варианты темы: fixed-toolbar всегда сохраняет макет с панелью инструментов, no-header-footer-gap убирает отступ между полосами и областью ввода.

—

aiMessageInput имеет следующие общие атрибуты:

id - alignSelf - classNames - colspan - css - enabled - focusShortcut - height - justifySelf - maxHeight - maxWidth - minHeight - minWidth - tabIndex - visible - width

Обработчики

aiMessageInput имеет следующие уникальные обработчики:

Имя Описание

AttachmentRejectedEvent

Вызывается, когда файл отклонен одним из ограничений на вложения. Содержит имя файла и причину. См. Отклонённые файлы.

StopEvent

Вызывается, когда пользователь нажимает кнопку остановки во время генерации ответа.

SubmitEvent

Вызывается, когда пользователь отправляет сообщение. Содержит отправленный текст и его вложения. См. Отправка сообщения.

aiMessageInput имеет следующие общие обработчики:

AttachEvent - BlurEvent - DetachEvent - FocusEvent

События получения и потери фокуса относятся к полю ввода сообщений в целом: перемещение фокуса из поля на кнопку отправки или на элемент управления в префиксе или суффиксе не вызывает их.

Элементы

aiMessageInput может содержать следующие вложенные элементы: prefix, suffix, header, footer, tooltip и i18n.

prefix, suffix

Элементы prefix и suffix содержат по одному компоненту, который размещается внутри области ввода, перед полем и после него. См. Префикс и суффикс.

Элементы header и footer содержат по одному компоненту, который размещается внутри поля ввода сообщений, но вне области ввода. См. Верхняя и нижняя полосы.

i18n

Элемент i18n изменяет тексты этого поля ввода сообщений. Он поддерживает атрибуты placeholder, send, stop и attach, каждый из которых принимает ключ сообщения. Атрибуты, которые не указаны, сохраняют значения из пакета сообщений. См. Локализация.