如何设置您的代理自助服务端到端聊天体验

注意

Orchestration AI Agent 需要为聊天联系人启用聊天流。如果不启用聊天直播，某些消息将无法呈现。请参阅为 AI 支持的聊天启用消息流。

什么是 AI 消息流媒体？

AI 消息流是 Amazon Connect 的一项功能，它允许在聊天互动期间逐步显示 AI 代理的响应。在向客户展示任何内容之前，流媒体不会等待 AI 生成完整的响应，而是在文本生成时显示文本，从而创造更自然的对话体验。

工作方式

使用标准聊天回复时，客户会等待 AI 生成其全部响应，然后会同时显示完整的消息。借助 AI Message Streaming，客户可以看到一个不断增长的文字气泡，文字会随着人工智能生成文字而逐渐出现，类似于观看某人实时打字。

注意

官方文档：有关完整的技术参考，请参阅为 AI 支持的聊天启用消息流。

渐进式文本显示的好处

AI 消息流为客户体验提供了几个主要优势：

缩短了感知等待时间 ——客户可以看到即时活动，而不是盯着装货微调器
更自然的对话流程 ——渐进式文本模仿人类打字，创造更具吸引力的互动
提高参与度-客户可以在响应仍在生成时开始阅读回复
配送消息-AI 代理可以在处理过程中提供临时消息，例如 “我正在审核您的账户”

标准聊天与直播聊天

下表比较了标准聊天和流媒体聊天之间的客户体验：

方面	标准聊天	直播聊天
响应显示	完整消息一次全部出现	文字逐渐出现（气泡越来越大）
客户体验	等待带有加载指示器的完整响应	查看实时显示的单词
感知等待时间	更长（等待完全响应）	更短（即时视觉反馈）
对话感觉	事务性	自然，就像和人聊天
配送消息	不可用	AI 可以发送临时状态更新
Lex 超时处理	受 Lex 超时限制的约束	消除了 Lex 超时限制

启用状态

AI 消息流的可用性取决于您的 Amazon Connect 实例的创建时间及其配置方式。

自动启用新实例

2025 年 12 月之后创建的 Amazon Connect 实例默认启用了人工智能消息流。这些MESSAGE_STREAMING实例的实例属性会自动设置为，因此无需进行其他配置。true

重要

如果您使用的是在 2025 年 12 月之前创建的 Amazon Connect 实例的 AWS 账户，则可能需要手动启用 AI 消息流。按照 “为人工智能支持的聊天启用消息流” 文档中的说明检查您的实例的MESSAGE_STREAMING属性并在需要时将其启用。

亚马逊 Lex 机器人权限

AI 消息流需要lex:RecognizeMessageAsync权限才能正常运行。此权限允许 Amazon Connect 调用支持流式传输响应的异步消息识别 API。

对于新的 Lex 机器人关联：当您将新的 Amazon Lex 机器人与 Amazon Connect 实例关联时，所需的lex:RecognizeMessageAsync权限将自动包含在机器人基于资源的策略中。无需进行其他配置。

重要

如果您的 Amazon Lex 机器人是在启用 AI 消息流之前与您的 Amazon Connect 实例关联的，则可能需要更新该机器人的基于资源的策略以包含该lex:RecognizeMessageAsync权限。

要更新现有 Lex 机器人政策，请执行以下操作：

导航到 Amazon Lex 控制台
选择您的机器人并转到基于资源的策略
将lex:RecognizeMessageAsync操作添加到授予 Amazon Connect 访问权限的政策声明中
保存更新的政策

有关详细说明，请参阅 AWS 文档中的 Lex 机器人权限部分。

Amazon Connect 通信控件是一个可嵌入的聊天界面，您可以将其添加到任何网站。在本节中，您将创建和配置用于测试 AI 消息流的微件。如果您打算使用自己的客户聊天插件，则可以跳过此部分。

在 Amazon Connect 控制台中，导航到您的实例
点击左侧导航菜单中的频道
单击 “通信” 控件
你会看到 “通信控件” 管理页面

注意

什么是通讯控件？ 通讯控件是 Amazon Connect 的 out-of-the-box聊天解决方案。它提供了一个功能齐全的聊天界面，您可以使用简单的 JavaScript 代码片段将其嵌入到网站中。该控件可以处理建立连接、管理会话和显示消息的所有复杂性。

单击 “添加微件” 以创建新的通信控件
输入以下详细信息：
- 名称：AI-Streaming-Demo-Widget
- 说明：Widget for testing AI Message Streaming
在 “通讯选项” 下，确保选中 “添加聊天”
选择自助服务测试流程作为聊天联系流程
单击 “保存” 并继续进入配置页面

接触流选择

请务必选择符合以下条件的联系流程：

已配置基本设置（创建 AI 会话、日志记录等）
通过 AI 代理集成 Lex 机器人的路由
对断开连接有正确的错误处理

如果您尚未创建联系流程，请先完成 “创建流程” 部分。

自定义聊天小部件的外观和风格以匹配您的品牌，然后选择保存并继续。

步骤 4：配置允许的域

通信控件仅在明确允许的网站上加载。此安全功能可防止未经授权使用您的小部件。

向下滚动到 “允许的域名”
单击 “添加域”，然后添加以下域以进行本地主机测试：
- http://localhost
在 “安全” 下选择 “否”
如果您计划稍后部署到生产网站，请同时添加这些域名并确保配置安全性（例如https://www.example.com）

单击 “保存” 并继续保存您的微件配置
创建完成后，您将看到包含嵌入代码的 Widget 详细信息页面
重要：复制并保存嵌入代码片段中的以下值：
- 客户端 URI-控件 JavaScript 文件的 URL
- 控件 ID-您的控件的唯一标识符
- 代码片段 ID-一个 Base64 编码的配置字符串

步骤 6：设置本地测试环境

要在本地测试控件，您需要创建一个用于加载通信控件的简单 HTML 文件。

在计算机上创建一个用于测试的新文件夹（例如ai-streaming-test）
下载演示页面的背景图片并将其另存background.jpg为测试文件夹
在测试文件夹index.html中创建一个名为的新文件，其中包含以下内容：


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            background-image: url("background.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
    <title>AI Message Streaming Demo</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript">
      (function(w, d, x, id){
        s=d.createElement('script');
        s.src='REPLACE_WITH_CLIENT_URI';
        s.async=1;
        s.id=id;
        d.getElementsByTagName('head')[0].appendChild(s);
        w[x] = w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
      })(window, document, 'amazon_connect', 'REPLACE_WITH_WIDGET_ID');
      amazon_connect('styles', {
        iconType: 'CHAT',
        openChat: { color: '#ffffff', backgroundColor: '#ff9200' },
        closeChat: { color: '#ffffff', backgroundColor: '#ff9200'}
      });
      amazon_connect('snippetId', 'REPLACE_WITH_SNIPPET_ID');
      amazon_connect('supportedMessagingContentTypes', [
        'text/plain',
        'text/markdown',
        'application/vnd.amazonaws.connect.message.interactive',
        'application/vnd.amazonaws.connect.message.interactive.response'
      ]);
      amazon_connect('customStyles', {
        global: { frameWidth: '500px', frameHeight: '900px'}
      });
    </script>
</body>
</html>

步骤 7：替换占位符值

将 HTML 文件中的占位符值替换为实际的控件值：

Placeholder	替换为	示例
`REPLACE_WITH_CLIENT_URI`	步骤 5 中的客户端 URI	`https://d2s9x5slqf05.cloudfront.net/amazon-connect-chat-interface-client.js`
`REPLACE_WITH_WIDGET_ID`	第 5 步中的插件 ID	`amazon_connect_widget_abc123`
`REPLACE_WITH_SNIPPET_ID`	您在第 5 步中的片段 ID	`QVFJREFIaWJYbG...`（长 Base64 字符串）

步骤 8：启动本地 Web 服务器

要测试控件，您需要从本地 Web 服务器提供 HTML 文件。以下是几个选项：

选项 A：Python（如果已安装）


python -m http.server 8001

选项 B：Node.js（如果已安装）


npx http-server -p 8001

选项 C：VS Code 直播服务器扩展

在 VS Code 中安装 “直播服务器” 扩展
右键单击index.html并选择 “使用实时服务器打开”

启动服务器后，打开浏览器并导航至：http://localhost:8001

你应该会在右下角看到带有橙色聊天按钮的演示页面。

测试直播体验

现在，您的控件已加载，是时候测试 AI 消息流并观察渐进式文本显示效果了。

要寻找什么：直播与非直播

了解流式响应和非流式响应之间的区别可以帮助您验证 AI 消息流式传输是否正常工作：

行为	非直播（标准）	流式传输（AI 消息流式传输）
初始显示	正在加载指示器或键入圆点	文字立即开始出现
文字外观	完整消息一次全部出现	单词逐渐出现（泡沫越来越大）
响应时机	等到 AI 完成生成	在生成响应时查看响应
视觉效果	完整文本的 “弹出”	流畅、流畅的文字，就像看着别人打字一样

Javascript 在您的浏览器中被禁用或不可用。

要使用 Amazon Web Services 文档，必须启用 Javascript。请参阅浏览器的帮助页面以了解相关说明。

文档惯例

使用代理自助服务

（旧版）使用人工智能驱动的生成式自助服务