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

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

多行文本输入

#

用户在完成提示撰写后,有多种提交选项,这些选项再次因平台而异。

  • 移动设备:点击提交按钮。
  • 网页:按 Enter 或点击提交按钮。
  • 桌面:按 Enter 或点击提交按钮。

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

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

  • 移动设备:点击虚拟键盘上的回车键。
  • 网页:不支持。
  • 桌面:按 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 响应。在桌面或网络上,用户可以通过鼠标选择屏幕上的文本并像往常一样将其复制到剪贴板。

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 属性设置,如自定义样式文档中所述。