LlmChatView 控件是 AI Toolkit 提供的交互式聊天体验的入口点。托管 LlmChatView 实例可以启用多项用户体验功能,而无需额外代码即可使用

  • 多行文本输入:允许用户粘贴长文本输入或在输入时在文本中插入新行。
  • 语音输入:允许用户通过语音输入提示,以方便使用。
  • 多媒体输入:使用户能够拍照并发送图片及其他文件类型。
  • 图片缩放:使用户能够放大图片缩略图。
  • 复制到剪贴板:允许用户将消息或 LLM 响应的文本复制到剪贴板。
  • 消息编辑:允许用户编辑最近的消息,以便重新提交给 LLM。
  • Material 和 Cupertino:适应两种设计语言的最佳实践。

多行文本输入

#

用户完成提示编写后,有多种提交选项,这些选项因平台而异

  • 移动设备:点击“提交”按钮
  • Web 端:按 Enter 键或点击“提交”按钮
  • 桌面端:按 Enter 键或点击“提交”按钮

此外,聊天视图支持嵌入换行符的文本提示。如果用户已有包含换行符的文本,他们可以像往常一样将其粘贴到提示文本字段中。

如果他们想在输入时手动将换行符嵌入到提示中,他们可以这样做。该操作的手势因其使用的平台而异

  • 移动设备:点击虚拟键盘上的 Return 键
  • Web 端:不支持
  • 桌面端:按 Ctrl+EnterOpt/Alt+Enter

这些选项如下所示

桌面端:

Screenshot of entering text on desktop

移动设备:

Screenshot of entering text on mobile

语音输入

#

除了文本输入之外,聊天视图还可以通过点击麦克风按钮来获取音频录制作为输入,该按钮在尚未输入文本时可见。

点击“麦克风”按钮开始录音

Screenshot of entering text

按下“停止”按钮将用户的语音输入转换为文本

然后可以像往常一样编辑、补充和提交此文本。

Screenshot of entered voice

多媒体输入

#

Textfield containing "Testing, testing, one, two, three"

聊天视图还可以将图像和文件作为输入传递给底层的 LLM。用户可以点击文本输入框左侧的“加号”按钮,然后从“拍照”、“图片库”和“附加文件”图标中选择。

Screenshot of the 4 icons

拍照”按钮允许用户使用其设备的摄像头拍照

Selfie image

按下“图片库”按钮允许用户从其设备的图片库上传

Download image from gallery

按下“附加文件”按钮允许用户选择其设备上可用的任何类型的文件,例如 PDF 或 TXT 文件。

选择照片、图片或文件后,它将成为附件,并显示为与当前活动提示关联的缩略图。

Thumbnails of images

用户可以通过点击缩略图上的“X”按钮来删除附件。

图片缩放

#

用户可以通过点击图片缩略图来放大图片。

Zoomed image

按下 ESC 键或点击图片以外的任何位置可关闭放大的图片。

复制到剪贴板

#

用户可以通过多种方式复制当前聊天中的任何文本提示或 LLM 响应。在桌面或 Web 端,用户可以像往常一样通过鼠标选择屏幕上的文本并将其复制到剪贴板。

Copy to clipboard

此外,在每个提示或响应的底部,当用户将鼠标悬停在其上时,可以按下弹出的“复制”按钮。

Press the copy button

在移动平台上,用户可以长按提示或响应并选择“复制”选项。

Long tap to see the copy button

消息编辑

#

如果用户想编辑他们最后的提示并让 LLM 再次处理它,他们可以这样做。在桌面端,用户可以点击其最近提示的“复制”按钮旁边的“编辑”按钮。

How to edit prompt

在移动设备上,用户可以长按并访问其最近提示的“编辑”选项。

How to access edit menu

一旦用户点击“编辑”按钮,他们将进入编辑模式,该模式会从聊天历史记录中删除用户的最后一条提示和 LLM 的最后一条响应,将提示文本放入文本字段,并提供一个编辑指示器。

How to exit editing mode

在编辑模式下,用户可以根据需要编辑提示并提交,让 LLM 像往常一样生成响应。或者,如果他们改变主意,可以点击编辑指示器旁边的“X”来取消编辑并恢复之前的 LLM 响应。

Material 和 Cupertino

#

LlmChatView 控件托管在 Material 应用中时,它使用 Material 设计语言提供的功能,例如 Material 的 TextField。同样,当托管在 Cupertino 应用中时,它会使用这些功能,例如 CupertinoTextField

Cupertino example app

然而,尽管聊天视图支持 Material 和 Cupertino 两种应用类型,但它不会自动采用相关的设计主题。相反,这由 LlmChatViewstyle 属性设置,如自定义样式文档中所述。