aiMessageInput

aiMessageInput 组件为用户提供编写消息的功能：包含一个大小可变的文本域和一个发送按钮。另外，还有一些可选的配置，比如添加一些控制或者在组件周围添加应用程序上下文。

XML 元素

aiMessageInput

Java 类

AiMessageInput

该组件可以在应用程序中任何需要用户输入消息的地方独立使用。aiChat 中嵌入并配置好了该组件，因此，在 aiChat 中可以使用本页介绍的所有功能。

概览

消息输入组件将所有的控制功能都放在了同一行，其中的文本输入也适配为一行：

Message input in its collapsed state

一旦文本输入超过一行，文本域会占据全部宽度，将控制功能调整到下一行的工具栏中：

Message input in its expanded state

基本用法

在视图的 XML 中声明 aichat 命名空间：

<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 行（默认 10 行），并自动滚动：

<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 part 开放出来，可通过 ::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 都进行了样式设置，并遵循主题自身的焦点环、边框、圆角和间距方面的样式变量，因此上面的属性没有单一的默认值。此外，组件还处理了暗黑模式、高对比度模式以及减弱动画效果，并且其布局采用了与文本方向无关的属性来表示，从而能够自动适应文档的文本书写方向。

附件

消息输入框可以接受文件，通过拖拽的方式或从文件选择器添加，附件与消息一起传递。附件涉及到多个方面的内容，因此在 附件 中一并介绍。

XML 属性

下面是 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

其中获得焦点（focus）和失焦（blur）是针对消息输入框整体触发：将焦点从字段移到发送按钮，或移到插槽中的控件，不会触发。

XML 内部元素

一个 aiMessageInput 可以包含 prefix、suffix、header、footer、tooltip 和 i18n 等内部元素。

prefix、suffix

prefix 和 suffix 元素各包含一个组件，放置在输入框内部、输入控件之前和之后。参见 前缀和后缀。

header 和 footer 元素各包含一个组件，放置在消息输入组件内部但在输入框之外。参见 页眉和页脚区域。

i18n

i18n 元素用于对列表文本进行本地化。支持 placeholder、send、stop 和 attach 属性，每个属性都支持消息键值。省略的属性使用其在扩展组件消息包中的值。参见 本地化。