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

注意

Orchestration AI 代理需要为聊天联系人启用聊天流。如果不启用聊天流，某些消息将无法呈现。请参阅为 AI-powered 聊天启用消息传输。

什么是 AI 消息直播？

AI 消息流是一项连接客户功能，支持在聊天交互期间逐步显示 AI 代理响应。流媒体不会等待 AI 生成完整的响应再向客户显示任何内容，而是在生成文本时显示文本，从而创造更自然的对话体验。

工作方式

使用标准聊天回复时，客户会等待 AI 生成其全部响应，然后完整的消息会同时出现。借助 AI Message Streaming，客户会看到一个越来越大的文本气泡，其中单词会随着人工智能的生成而逐渐出现，类似于看着某人实时打字。

注意

官方文档：有关完整的技术参考，请参阅为 AI-powered 聊天启用消息传输。

渐进式文本显示的好处

AI 消息流为客户体验提供了多项关键优势：

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

标准聊天与直播聊天

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

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

启用状态

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

自动启用新实例

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

重要

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

亚马逊 Lex 机器人权限

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

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

重要

如果在启用 A I 消息流式传输之前，您的 Amazon Lex 机器人与您的 Connect 客户实例相关联，则可能需要更新该机器人的基于资源的策略以包括该lex:RecognizeMessageAsync权限。

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

导航到 Amazon Lex 控制台
选择您的机器人并查看Resource-based 政策
将lex:RecognizeMessageAsync操作添加到授予 Connect 客户访问权限的政策声明中
保存更新后的政策

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

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

在 Connect Customer 控制台中，导航到您的实例
在左侧导航菜单中选择频道
选择 “通信” 小工具
您将看到通讯插件管理页面

注意

什么是通信小工具？ 通信插件是 Connect Customer 开箱即用的聊天解决方案。它提供了一个功能齐全的聊天界面，你可以使用一个简单的 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
- Widget ID -您的小工具的唯一标识符
- 代码片段 ID - Base64-encoded 配置字符串

步骤 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 中安装 “实时服务器” 扩展
打开 on 的快捷菜单index.html，然后选择 “使用实时服务器打开”

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

您应该会看到带有橙色聊天按钮的演示页面。

测试直播体验

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

要寻找什么：直播 vs. Non-Streaming

了解流式传输和非流式传输响应之间的区别有助于您验证 AI 消息流是否正常运行：

行为	Non-Streaming （标准）	直播（AI 消息直播）
初始显示	加载指示器或键入圆点	文字立即开始出现
文字外观	完整消息同时出现	文字逐渐出现（气泡越来越大）
响应时间	等到 AI 完成生成	查看正在生成的响应
视觉效果	全文的 “Pop”	流畅流畅的文字，就像看别人打字一样

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

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

文档惯例

使用代理自助服务

（旧版）使用生成式自助服务 AI-powered