Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Cara mengatur pengalaman obrolan layanan mandiri agen Anda dari ujung ke ujung
<a name="setup-agentic-selfservice-end-to-end"></a>

**catatan**  
Agen AI Orkestrasi mengharuskan streaming obrolan diaktifkan untuk kontak obrolan. Tanpa streaming obrolan diaktifkan, beberapa pesan akan gagal dirender. Lihat [Aktifkan streaming pesan untuk obrolan bertenaga AI](message-streaming-ai-chat.md).

## Apa itu Streaming Pesan AI?
<a name="what-is-ai-message-streaming"></a>

AI Message Streaming adalah fitur Amazon Connect yang memungkinkan **tampilan progresif respons agen AI** selama interaksi obrolan. Alih-alih menunggu AI menghasilkan respons lengkap sebelum menunjukkan apa pun kepada pelanggan, streaming menampilkan teks saat dihasilkan, menciptakan pengalaman percakapan yang lebih alami.

### Cara Kerjanya
<a name="how-streaming-works"></a>

Dengan respons obrolan standar, pelanggan menunggu sementara AI menghasilkan seluruh responsnya, kemudian pesan lengkap muncul sekaligus. Dengan AI Message Streaming, pelanggan melihat **gelembung teks yang berkembang** di mana kata-kata muncul secara progresif saat AI menghasilkannya, mirip dengan menonton seseorang mengetik secara real-time.

**catatan**  
**Dokumentasi Resmi**: Untuk referensi teknis lengkap, lihat[Aktifkan streaming pesan untuk obrolan bertenaga AI](message-streaming-ai-chat.md).

### Manfaat Tampilan Teks Progresif
<a name="benefits-progressive-text"></a>

AI Message Streaming memberikan beberapa manfaat utama bagi pengalaman pelanggan:
+ **Mengurangi waktu tunggu yang dirasakan** - Pelanggan melihat aktivitas langsung daripada menatap pemintal pemuatan
+ **Alur percakapan yang lebih alami** - Teks progresif meniru pengetikan manusia, menciptakan interaksi yang lebih menarik
+ **Keterlibatan yang lebih baik** - Pelanggan dapat mulai membaca respons saat masih dihasilkan
+ **Pesan pemenuhan** - Agen AI dapat memberikan pesan sementara seperti “Satu saat saat saya meninjau akun Anda” selama pemrosesan

### Obrolan Standar vs Obrolan Streaming
<a name="standard-vs-streaming-chat"></a>

Tabel berikut membandingkan pengalaman pelanggan antara obrolan standar dan obrolan streaming:


| Aspek | Obrolan Standar | Obrolan Streaming | 
| --- | --- | --- | 
| Tampilan Respons | Pesan lengkap muncul sekaligus | Teks muncul secara progresif (gelembung tumbuh) | 
| Pengalaman Pelanggan | Tunggu respons penuh dengan indikator pemuatan | Lihat kata-kata muncul secara real-time | 
| Waktu Tunggu yang Dirasakan | Lebih lama (menunggu tanggapan lengkap) | Lebih pendek (umpan balik visual langsung) | 
| Percakapan Merasa | Transaksional | Alami, seperti mengobrol dengan seseorang | 
| Pesan Pemenuhan | Tidak tersedia | AI dapat mengirim pembaruan status sementara | 
| Penanganan Lex Timeout | Tunduk pada batas batas waktu Lex | Menghilangkan batasan batas waktu Lex | 

## Status Pemberdayaan
<a name="enablement-status"></a>

Ketersediaan Streaming Pesan AI bergantung pada kapan instans Amazon Connect Anda dibuat dan cara konfigurasinya.

### Pengaktifan Otomatis untuk Instans Baru
<a name="automatic-enablement-new-instances"></a>

Instans Amazon Connect yang dibuat **setelah Desember 2025** mengaktifkan Streaming Pesan AI secara default. Atribut `MESSAGE_STREAMING` instance secara otomatis diatur ke `true` untuk instance ini, jadi tidak diperlukan konfigurasi tambahan.

**penting**  
Jika Anda menggunakan AWS akun dengan instans Amazon Connect yang dibuat **sebelum Desember 2025**, Anda mungkin perlu mengaktifkan Streaming Pesan AI secara manual. Ikuti petunjuk di [Aktifkan streaming pesan untuk dokumentasi obrolan yang didukung AI](https://docs.aws.amazon.com/connect/latest/adminguide/message-streaming-ai-chat.html) untuk memeriksa `MESSAGE_STREAMING` atribut instans Anda dan mengaktifkannya jika diperlukan.

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

AI Message Streaming memerlukan `lex:RecognizeMessageAsync` izin untuk berfungsi dengan benar. Izin ini memungkinkan Amazon Connect untuk menjalankan API pengenalan pesan asinkron yang memungkinkan respons streaming.

**Untuk asosiasi bot Lex baru**: Saat Anda mengaitkan bot Amazon Lex baru dengan instans Amazon Connect Anda, `lex:RecognizeMessageAsync` izin yang diperlukan **secara otomatis disertakan** dalam kebijakan berbasis sumber daya bot. Tidak diperlukan konfigurasi tambahan.

**penting**  
Jika Anda memiliki bot Amazon Lex yang dikaitkan dengan instans Amazon Connect Anda **sebelum** Streaming Pesan AI diaktifkan, Anda mungkin perlu memperbarui kebijakan berbasis sumber daya bot untuk menyertakan izin. `lex:RecognizeMessageAsync`  
Untuk memperbarui kebijakan bot Lex Anda yang ada:  
Arahkan ke konsol Amazon Lex
Pilih bot Anda dan buka Kebijakan berbasis **sumber daya**
Tambahkan `lex:RecognizeMessageAsync` tindakan ke pernyataan kebijakan yang memberikan akses Amazon Connect
Simpan kebijakan yang diperbarui
Untuk petunjuk terperinci, lihat bagian [izin Lex bot](https://docs.aws.amazon.com/connect/latest/adminguide/message-streaming-ai-chat.html#lex-bot-permissions) di AWS dokumentasi.

## Buat Widget Komunikasi
<a name="create-communications-widget"></a>

Amazon Connect Communications Widget adalah antarmuka obrolan yang dapat disematkan yang dapat Anda tambahkan ke situs web apa pun. Di bagian ini, Anda akan membuat dan mengonfigurasi widget untuk menguji Streaming Pesan AI. Anda dapat melewati bagian ini jika Anda berencana untuk menggunakan widget obrolan pelanggan Anda sendiri.

### Langkah 1: Arahkan ke Widget Komunikasi
<a name="navigate-to-widget"></a>

1. Di konsol Amazon Connect, navigasikan ke instans Anda

1. Klik **Saluran** di menu navigasi kiri

1. Klik **widget Komunikasi**

1. Anda akan melihat halaman manajemen Widget Komunikasi

**catatan**  
**Apa itu Widget Komunikasi?** Widget Komunikasi adalah solusi out-of-the-box obrolan Amazon Connect. Ini menyediakan antarmuka obrolan yang berfungsi penuh yang dapat Anda sematkan di situs web menggunakan JavaScript cuplikan sederhana. Widget menangani semua kompleksitas membangun koneksi, mengelola sesi, dan menampilkan pesan.

### Langkah 2: Buat Widget Baru
<a name="create-new-widget"></a>

1. Klik **Tambah widget** untuk membuat Widget Komunikasi baru

1. Masukkan detail berikut:
   + **Nama:** **AI-Streaming-Demo-Widget**
   + **Deskripsi:** **Widget for testing AI Message Streaming**

1. Di bawah **Opsi komunikasi** pastikan **Tambahkan obrolan** dipilih

1. Pilih **Self Service Test Flow** sebagai alur kontak Chat Anda

1. Klik **Simpan dan lanjutkan** ke halaman konfigurasi

**Pemilihan Arus Kontak**  
Pastikan Anda memilih alur kontak yang:  
Apakah Pengaturan Dasar telah dikonfigurasi (membuat sesi AI, logging, dll)
Rute ke bot Lex Anda dengan integrasi Agen AI
Memiliki penanganan kesalahan yang tepat untuk pemutusan
Jika Anda belum membuat alur kontak, selesaikan bagian [Membuat Aliran](https://catalog.workshops.aws/amazon-q-in-connect/en-US/03-Self-Service-Track/01-ai-agent-configuration/04-creating-flow/) terlebih dahulu.

### Langkah 3: Sesuaikan Penampilan Widget
<a name="customize-widget-appearance"></a>

Sesuaikan tampilan dan nuansa widget obrolan Anda agar sesuai dengan merek Anda dan pilih **Simpan dan lanjutkan**.

### Langkah 4: Konfigurasikan Domain yang Diizinkan
<a name="configure-allowed-domains"></a>

Widget Komunikasi hanya dimuat di situs web yang diizinkan secara eksplisit. Fitur keamanan ini mencegah penggunaan widget Anda secara tidak sah.

1. Gulir ke bawah ke **domain yang Diizinkan**

1. Klik **Tambahkan domain** dan tambahkan domain berikut untuk pengujian localhost:
   + **http://localhost**

1. Pilih **Tidak** di bawah keamanan

1. Jika Anda berencana untuk menyebarkan ke situs web produksi nanti, tambahkan domain tersebut juga dan pastikan Anda mengonfigurasi keamanan (mis.,) **https://www.example.com**

### Langkah 5: Simpan dan Dapatkan Kode Widget
<a name="save-get-widget-code"></a>

1. Klik **Simpan dan lanjutkan** untuk menyimpan konfigurasi widget Anda

1. Setelah pembuatan, Anda akan melihat halaman **detail Widget** dengan kode embed Anda

1. **Penting**: Salin dan simpan nilai-nilai berikut dari cuplikan kode embed:
   + **URI Klien** - URL ke JavaScript file widget
   + **ID Widget** - Pengidentifikasi unik untuk widget Anda
   + **ID Cuplikan** - String konfigurasi yang dikodekan Base64

### Langkah 6: Mengatur Lingkungan Pengujian Lokal
<a name="setup-local-testing"></a>

Untuk menguji widget secara lokal, Anda akan membuat file HTML sederhana yang memuat Widget Komunikasi.

1. Buat folder baru di komputer Anda untuk pengujian (mis.,`ai-streaming-test`)

1. Unduh gambar latar belakang untuk halaman demo dan simpan seperti `background.jpg` di folder pengujian Anda

1. Buat file baru yang disebut `index.html` di folder pengujian Anda dengan konten berikut:

```
<!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>
```

### Langkah 7: Ganti Nilai Placeholder
<a name="replace-placeholder-values"></a>

Ganti nilai placeholder dalam file HTML dengan nilai widget Anda yang sebenarnya:


| Placeholder | Ganti Dengan | Contoh | 
| --- | --- | --- | 
| REPLACE\$1WITH\$1CLIENT\$1URI | URI Klien Anda dari Langkah 5 | https://d2s9x5slqf05.cloudfront.net/amazon-connect-chat-interface-client.js | 
| REPLACE\$1WITH\$1WIDGET\$1ID | ID Widget Anda dari Langkah 5 | amazon\$1connect\$1widget\$1abc123 | 
| REPLACE\$1WITH\$1SNIPPET\$1ID | ID Cuplikan Anda dari Langkah 5 | QVFJREFIaWJYbG...(string Base64 panjang) | 

### Langkah 8: Mulai Server Web Lokal
<a name="start-local-web-server"></a>

Untuk menguji widget, Anda perlu menyajikan file HTML dari server web lokal. Berikut adalah beberapa opsi:

**Opsi A: Python (jika diinstal)**  


```
python -m http.server 8001
```

**Opsi B: Node.js (jika diinstal)**  


```
npx http-server -p 8001
```

**Opsi C: Ekstensi Server Langsung Kode VS**  

+ Instal ekstensi “Server Langsung” di VS Code
+ Klik kanan `index.html` dan pilih “Buka dengan Server Langsung”

Setelah memulai server, buka browser Anda dan arahkan ke: `http://localhost:8001`

Anda akan melihat halaman demo dengan tombol obrolan oranye di sudut kanan bawah.

## Uji Pengalaman Streaming
<a name="test-streaming-experience"></a>

Sekarang widget Anda dimuat, saatnya untuk menguji Streaming Pesan AI dan mengamati tampilan teks progresif yang sedang beraksi.

### Apa yang Harus Diperhatikan: Streaming vs Non-Streaming
<a name="what-to-look-for"></a>

Memahami perbedaan antara respons streaming dan non-streaming membantu Anda memverifikasi bahwa Streaming Pesan AI berfungsi:


| Perilaku | Non-Streaming (Standar) | Streaming (Streaming Pesan AI) | 
| --- | --- | --- | 
| Tampilan awal | Indikator pemuatan atau titik pengetikan | Teks mulai muncul segera | 
| Penampilan teks | Pesan lengkap muncul sekaligus | Kata-kata muncul secara progresif (gelembung tumbuh) | 
| Waktu respons | Tunggu hingga AI selesai menghasilkan | Lihat respons saat sedang dihasilkan | 
| Efek visual | “Pop” dari teks lengkap | Teks yang halus dan mengalir seperti menonton seseorang mengetik |