本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 如何端對端設定您的客服人員自助服務聊天體驗
<a name="setup-agentic-selfservice-end-to-end"></a>

**注意**  
協調 AI 客服人員需要啟用聊天聯絡人的聊天串流。如果未啟用聊天串流，某些訊息將無法轉譯。請參閱 [為採用 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 訊息串流時，客戶會看到**不斷增加的文字氣泡**，隨著 AI 產生的文字逐漸出現，類似於即時觀看某人的類型。

**注意**  
**官方文件**：如需完整的技術參考，請參閱 [為採用 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 執行個體預設會啟用 AI 訊息串流。這些`MESSAGE_STREAMING`執行個體的執行個體屬性會自動設定為 `true` ，因此不需要額外的組態。

**重要**  
如果您使用 AWS 帳戶搭配 **2025 年 12 月之前**建立的 Amazon Connect 執行個體，您可能需要手動啟用 AI 訊息串流。遵循[啟用 AI 支援聊天功能訊息串流](https://docs.aws.amazon.com/connect/latest/adminguide/message-streaming-ai-chat.html)文件中的指示，檢查執行個體的`MESSAGE_STREAMING`屬性並視需要啟用它。

### Amazon Lex Bot 許可
<a name="amazon-lex-bot-permissions"></a>

AI 訊息串流需要 `lex:RecognizeMessageAsync`許可才能正常運作。此許可允許 Amazon Connect 叫用啟用串流回應的非同步訊息辨識 API。

**對於新的 Lex 機器人關聯**：當您將新的 Amazon Lex 機器人與 Amazon Connect 執行個體建立關聯時，所需的`lex:RecognizeMessageAsync`許可**會自動包含在**機器人的資源型政策中。不需要額外的組態。

**重要**  
如果您有在啟用 AI 訊息串流**之前**與 Amazon Connect 執行個體相關聯的 Amazon Amazon Lex 機器人，您可能需要更新機器人的資源型政策，以包含 `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 Communications Widget 是可內嵌的聊天介面，您可以新增至任何網站。在本節中，您將建立並設定小工具來測試 AI 訊息串流。如果您打算使用自己的客戶聊天小工具，可以略過本節。

### 步驟 1：導覽至通訊小工具
<a name="navigate-to-widget"></a>

1. 在 Amazon Connect 主控台中，導覽至您的執行個體

1. 按一下左側導覽選單中的**頻道** 

1. 按一下**通訊小工具**

1. 您將看到 Communications Widget 管理頁面

**注意**  
**什麼是 Communications Widget？** Communications Widget 是 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 Agent 整合的 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>

Communications Widget 只會載入明確允許的網站。此安全功能可防止未經授權使用您的小工具。

1. 向下捲動至**允許的網域**

1. 按一下**新增網域**並新增下列網域進行 localhost 測試：
   + **http://localhost**

1. 選取安全性下的**否** 

1. 如果您計劃稍後部署到生產網站，也請新增這些網域，並確保您設定安全性 （例如 **https://www.example.com**)

### 步驟 5：儲存並取得小工具程式碼
<a name="save-get-widget-code"></a>

1. 按一下**儲存並繼續**儲存您的小工具組態

1. 建立之後，您會看到包含內嵌程式碼**的小工具詳細資訊**頁面

1. **重要**：從內嵌程式碼片段複製並儲存下列值：
   + **用戶端 URI** - 小工具 JavaScript 檔案的 URL
   + **Widget ID** - 小工具的唯一識別符
   + **程式碼片段 ID** - Base64-encoded組態字串

### 步驟 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 檔案中的預留位置值取代為您實際的小工具值：


| 預留位置 | 將 取代為 | 範例 | 
| --- | --- | --- | 
| 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 Live Server Extension**  

+ 在 VS 程式碼中安裝「即時伺服器」延伸模組
+ 按一下滑鼠右鍵`index.html`，然後選取「使用即時伺服器開啟」

啟動伺服器後，開啟您的瀏覽器並導覽至： `http://localhost:8001`

您應該會在右下角看到顯示頁面，其中包含橘色聊天按鈕。

## 測試串流體驗
<a name="test-streaming-experience"></a>

現在您的小工具已載入，是時候測試 AI 訊息串流並觀察執行中的漸進式文字顯示了。

### 要注意的內容：串流與非串流
<a name="what-to-look-for"></a>

了解串流和非串流回應之間的差異，可協助您驗證 AI 訊息串流是否正常運作：


| Behavior (行為) | 非串流 （標準） | 串流 (AI 訊息串流） | 
| --- | --- | --- | 
| 初始顯示 | 載入指標或輸入點 | 文字會立即開始顯示 | 
| 文字外觀 | 完成訊息一次全部顯示 | 文字逐漸出現 （泡泡增加） | 
| 回應時間 | 等待 AI 完成產生 | 在產生回應時查看回應 | 
| 視覺化效果 | "Pop" 的完整文字 | 流暢、流暢的文字，例如觀看某人類型 |