本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 如何设置您的代理自助服务端到端聊天体验
<a name="setup-agentic-selfservice-end-to-end"></a>

**注意**  
Orchestration AI Agent 需要为聊天联系人启用聊天流。如果不启用聊天直播，某些消息将无法呈现。请参阅[为 AI 支持的聊天启用消息流](message-streaming-ai-chat.md)。

## 什么是 AI 消息流媒体？
<a name="what-is-ai-message-streaming"></a>

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

### 工作方式
<a name="how-streaming-works"></a>

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

**注意**  
**官方文档**：有关完整的技术参考，请参阅[为 AI 支持的聊天启用消息流](message-streaming-ai-chat.md)。

### 渐进式文本显示的好处
<a name="benefits-progressive-text"></a>

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

### 标准聊天与直播聊天
<a name="standard-vs-streaming-chat"></a>

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


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

## 启用状态
<a name="enablement-status"></a>

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

### 自动启用新实例
<a name="automatic-enablement-new-instances"></a>

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

**重要**  
如果您使用的是在 **2025 年 12 月之前**创建的 Amazon Connect 实例的 AWS 账户，则可能需要手动启用 AI 消息流。按照 “[为人工智能支持的聊天启用消息流](https://docs.aws.amazon.com/connect/latest/adminguide/message-streaming-ai-chat.html)” 文档中的说明检查您的实例的`MESSAGE_STREAMING`属性并在需要时将其启用。

### 亚马逊 Lex 机器人权限
<a name="amazon-lex-bot-permissions"></a>

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 机器人权限](https://docs.aws.amazon.com/connect/latest/adminguide/message-streaming-ai-chat.html#lex-bot-permissions)部分。

## 创建通信控件
<a name="create-communications-widget"></a>

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

### 步骤 1：导航到 “通信” 控件
<a name="navigate-to-widget"></a>

1. 在 Amazon Connect 控制台中，导航到您的实例

1. 点击左侧导航菜单中的**频道**

1. 单击 “**通信” 控件**

1. 你会看到 “通信控件” 管理页面

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

### 第 2 步：创建新控件
<a name="create-new-widget"></a>

1. 单击 “**添加微件**” 以创建新的通信控件

1. 输入以下详细信息：
   + **名称：****AI-Streaming-Demo-Widget**
   + **说明：****Widget for testing AI Message Streaming**

1. 在 “**通讯选项”** 下，确保选**中 “添加聊天**”

1. 选择**自助服务测试流程**作为聊天联系流程

1. 单击 “**保存” 并继续**进入配置页面

**接触流选择**  
请务必选择符合以下条件的联系流程：  
已配置基本设置（创建 AI 会话、日志记录等）
通过 AI 代理集成 Lex 机器人的路由
对断开连接有正确的错误处理
如果您尚未创建联系流程，请先完成 “[创建流程](https://catalog.workshops.aws/amazon-q-in-connect/en-US/03-Self-Service-Track/01-ai-agent-configuration/04-creating-flow/)” 部分。

### 第 3 步：自定义控件外观
<a name="customize-widget-appearance"></a>

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

### 步骤 4：配置允许的域
<a name="configure-allowed-domains"></a>

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

1. 向下滚动到 “**允许的域名**”

1. 单击 “**添加域**”，然后添加以下域以进行本地主机测试：
   + **http://localhost**

1. 在 “安全” 下选择 “**否**”

1. 如果您计划稍后部署到生产网站，请同时添加这些域名并确保配置安全性（例如**https://www.example.com**）

### 第 5 步：保存并获取控件代码
<a name="save-get-widget-code"></a>

1. 单击 “**保存” 并继续**保存您的微件配置

1. 创建完成后，您将看到包含嵌入代码的 **Widget 详细信息**页面

1. **重要**：复制并保存嵌入代码片段中的以下值：
   + **客户端 URI**-控件 JavaScript 文件的 URL
   + **控件 ID**-您的控件的唯一标识符
   + **代码片段 ID**-一个 Base64 编码的配置字符串

### 步骤 6：设置本地测试环境
<a name="setup-local-testing"></a>

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

1. 在计算机上创建一个用于测试的新文件夹（例如`ai-streaming-test`）

1. 下载演示页面的背景图片并将其另存`background.jpg`为测试文件夹

1. 在测试文件夹`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：替换占位符值
<a name="replace-placeholder-values"></a>

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


| Placeholder | 替换为 | 示例 | 
| --- | --- | --- | 
| REPLACE\$1WITH\$1CLIENT\$1URI | 步骤 5 中的客户端 URI | https://d2s9x5slqf05.cloudfront.net/amazon-connect-chat-interface-client.js | 
| REPLACE\$1WITH\$1WIDGET\$1ID | 第 5 步中的插件 ID | amazon\$1connect\$1widget\$1abc123 | 
| REPLACE\$1WITH\$1SNIPPET\$1ID | 您在第 5 步中的片段 ID | QVFJREFIaWJYbG...（长 Base64 字符串） | 

### 步骤 8：启动本地 Web 服务器
<a name="start-local-web-server"></a>

要测试控件，您需要从本地 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`

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

## 测试直播体验
<a name="test-streaming-experience"></a>

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

### 要寻找什么：直播与非直播
<a name="what-to-look-for"></a>

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


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