As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

# Como configurar sua experiência de chat de autoatendimento como agente de ponta a ponta
<a name="setup-agentic-selfservice-end-to-end"></a>

**nota**  
Os agentes de IA de orquestração exigem que o streaming de bate-papo seja ativado para contatos de bate-papo. Sem o streaming de bate-papo ativado, algumas mensagens não serão renderizadas. Consulte [Ative o streaming de mensagens para bate-papo com tecnologia de IA](message-streaming-ai-chat.md).

## O que é streaming de mensagens com IA?
<a name="what-is-ai-message-streaming"></a>

O AI Message Streaming é um recurso do Amazon Connect que permite a **exibição progressiva das respostas dos agentes de IA durante as** interações de bate-papo. Em vez de esperar que a IA gere uma resposta completa antes de mostrar qualquer coisa ao cliente, o streaming exibe o texto à medida que ele é gerado, criando uma experiência de conversação mais natural.

### Como funciona
<a name="how-streaming-works"></a>

Com as respostas padrão do chat, os clientes esperam enquanto a IA gera toda a resposta e, em seguida, a mensagem completa aparece de uma só vez. Com o AI Message Streaming, os clientes veem um **crescente balão de texto** em que as palavras aparecem progressivamente à medida que a IA as gera, semelhante a ver alguém digitar em tempo real.

**nota**  
**Documentação oficial**: Para obter a referência técnica completa, consulte[Ative o streaming de mensagens para bate-papo com tecnologia de IA](message-streaming-ai-chat.md).

### Benefícios da exibição progressiva de texto
<a name="benefits-progressive-text"></a>

O AI Message Streaming oferece vários benefícios importantes para a experiência do cliente:
+ **Tempo de espera percebido reduzido** - os clientes veem a atividade imediata em vez de olhar fixamente para um botão giratório de carregamento
+ **Fluxo de conversação mais natural** - o texto progressivo imita a digitação humana, criando uma interação mais envolvente
+ **Melhor engajamento** - os clientes podem começar a ler a resposta enquanto ela ainda está sendo gerada
+ **Mensagens de atendimento** — os agentes de IA podem fornecer mensagens provisórias como “Um momento enquanto eu reviso sua conta” durante o processamento

### Chat padrão versus bate-papo de streaming
<a name="standard-vs-streaming-chat"></a>

A tabela a seguir compara a experiência do cliente entre o bate-papo padrão e o bate-papo por streaming:


| Aspecto | Chat padrão | Streaming de bate-papo | 
| --- | --- | --- | 
| Exibição de resposta | A mensagem completa aparece de uma só vez | O texto aparece progressivamente (bolha crescente) | 
| Experiência do cliente | Aguarde a resposta completa com o indicador de carregamento | Veja as palavras aparecerem em tempo real | 
| Tempo de espera percebido | Mais tempo (aguardando uma resposta completa) | Mais curto (feedback visual imediato) | 
| Sensação de conversa | Transacional | Natural, como conversar com uma pessoa | 
| Mensagens de atendimento | Indisponível | A IA pode enviar atualizações de status provisórias | 
| Manipulação do tempo limite do Lex | Sujeito aos limites de tempo limite do Lex | Elimina as limitações de tempo limite do Lex | 

## Status de habilitação
<a name="enablement-status"></a>

A disponibilidade do AI Message Streaming depende de quando sua instância do Amazon Connect foi criada e de como ela está configurada.

### Ativação automática para novas instâncias
<a name="automatic-enablement-new-instances"></a>

As instâncias do Amazon Connect criadas **após dezembro de 2025** têm o AI Message Streaming ativado por padrão. O atributo de `MESSAGE_STREAMING` instância é definido automaticamente `true` para essas instâncias, portanto, nenhuma configuração adicional é necessária.

**Importante**  
Se você estiver usando uma AWS conta com uma instância do Amazon Connect criada **antes de dezembro de 2025**, talvez seja necessário habilitar manualmente o AI Message Streaming. Siga as instruções na documentação [Ativar streaming de mensagens para bate-papo com tecnologia de IA](https://docs.aws.amazon.com/connect/latest/adminguide/message-streaming-ai-chat.html) para verificar o `MESSAGE_STREAMING` atributo da sua instância e habilitá-lo, se necessário.

### Permissões do Amazon Lex Bot
<a name="amazon-lex-bot-permissions"></a>

O AI Message Streaming requer `lex:RecognizeMessageAsync` permissão para funcionar corretamente. Essa permissão permite que o Amazon Connect invoque a API de reconhecimento assíncrono de mensagens que permite o streaming de respostas.

**Para novas associações de bots Lex**: quando você associa um novo bot do Amazon Lex à sua instância do Amazon Connect, a `lex:RecognizeMessageAsync` permissão necessária é **incluída automaticamente** na política baseada em recursos do bot. Nenhuma configuração adicional é necessária.

**Importante**  
Se você tiver um bot do Amazon Lex associado à sua instância do Amazon Connect **antes da** ativação do AI Message Streaming, talvez seja necessário atualizar a política baseada em recursos do bot para incluir a `lex:RecognizeMessageAsync` permissão.  
Para atualizar sua política existente do Lex bot:  
Navegue até o console do Amazon Lex
Selecione seu bot e acesse Política baseada em **recursos**
Adicione a `lex:RecognizeMessageAsync` ação à declaração de política que concede acesso ao Amazon Connect
Salve a política atualizada
Para obter instruções detalhadas, consulte a seção de [permissões do bot Lex](https://docs.aws.amazon.com/connect/latest/adminguide/message-streaming-ai-chat.html#lex-bot-permissions) na AWS documentação.

## Criar widget de comunicação
<a name="create-communications-widget"></a>

O Amazon Connect Communications Widget é uma interface de bate-papo incorporável que você pode adicionar a qualquer site. Nesta seção, você criará e configurará um widget para testar o AI Message Streaming. Você pode pular esta seção se planeja usar seu próprio widget de chat com o cliente.

### Etapa 1: Navegue até o widget de comunicações
<a name="navigate-to-widget"></a>

1. No console do Amazon Connect, navegue até sua instância

1. Clique em **Canais** no menu de navegação à esquerda

1. Clique em **Widget de comunicações**

1. Você verá a página de gerenciamento do Widget de Comunicação

**nota**  
**O que é o widget de comunicação?** O widget de comunicação é a solução de out-of-the-box bate-papo do Amazon Connect. Ele fornece uma interface de bate-papo totalmente funcional que você pode incorporar em sites usando um simples JavaScript trecho. O widget lida com toda a complexidade de estabelecer conexões, gerenciar sessões e exibir mensagens.

### Etapa 2: criar um novo widget
<a name="create-new-widget"></a>

1. Clique em **Adicionar widget** para criar um novo widget de comunicação

1. Insira os detalhes a seguir:
   + **Nome:** **AI-Streaming-Demo-Widget**
   + **Descrição:** **Widget for testing AI Message Streaming**

1. Em **Opções de comunicação**, verifique se a opção **Adicionar bate-papo** está selecionada.

1. Selecione **Self Service Test Flow** como seu fluxo de contato do Chat

1. Clique em **Salvar e continue** para prosseguir para a página de configuração.

**Seleção de fluxo de contato**  
Certifique-se de selecionar um fluxo de contato que:  
Tem as configurações básicas definidas (cria sessão de IA, registro, etc.)
Rotas para seu bot Lex com integração com o AI Agent
Tem tratamento adequado de erros para desconexões
Se você ainda não criou um fluxo de contato, preencha primeiro a seção [Criando o fluxo](https://catalog.workshops.aws/amazon-q-in-connect/en-US/03-Self-Service-Track/01-ai-agent-configuration/04-creating-flow/).

### Etapa 3: personalizar a aparência do widget
<a name="customize-widget-appearance"></a>

Personalize a aparência do seu widget de bate-papo para combinar com sua marca e selecione **Salvar e continuar**.

### Etapa 4: Configurar domínios permitidos
<a name="configure-allowed-domains"></a>

O widget de comunicação só carrega em sites que são explicitamente permitidos. Esse recurso de segurança impede o uso não autorizado do seu widget.

1. Role para baixo até **Domínios permitidos**

1. Clique em **Adicionar domínio** e adicione o seguinte domínio para testar o localhost:
   + **http://localhost**

1. Selecione **Não** em segurança

1. Se você planeja implantar em um site de produção posteriormente, adicione esses domínios também e certifique-se de configurar a segurança (por exemplo,**https://www.example.com**)

### Etapa 5: salvar e obter o código do widget
<a name="save-get-widget-code"></a>

1. Clique em **Salvar e continuar** para salvar a configuração do widget

1. Após a criação, você verá a página de **detalhes do widget** com seu código de incorporação

1. **Importante**: copie e salve os seguintes valores do trecho de código incorporado:
   + **URI do cliente** - O URL para o arquivo do widget JavaScript 
   + **ID do widget** - Um identificador exclusivo para seu widget
   + **ID do trecho** - Uma string de configuração codificada em Base64

### Etapa 6: Configurar o ambiente de teste local
<a name="setup-local-testing"></a>

Para testar o widget localmente, você criará um arquivo HTML simples que carrega o widget de comunicação.

1. Crie uma nova pasta no seu computador para teste (por exemplo,`ai-streaming-test`)

1. Baixe a imagem de fundo da página de demonstração e salve-a como `background.jpg` em sua pasta de teste

1. Crie um novo arquivo chamado `index.html` em sua pasta de teste com o seguinte conteúdo:

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

### Etapa 7: Substituir valores de espaço reservado
<a name="replace-placeholder-values"></a>

Substitua os valores do espaço reservado no arquivo HTML pelos valores reais do widget:


| Espaço reservado | Substituir por | Exemplo | 
| --- | --- | --- | 
| REPLACE\_WITH\_CLIENT\_URI | Seu URI de cliente a partir da Etapa 5 | https://d2s9x5slqf05.cloudfront.net/amazon-connect-chat-interface-client.js | 
| REPLACE\_WITH\_WIDGET\_ID | Seu ID do widget a partir da Etapa 5 | amazon\_connect\_widget\_abc123 | 
| REPLACE\_WITH\_SNIPPET\_ID | Seu ID de trecho da etapa 5 | QVFJREFIaWJYbG...(sequência longa de Base64) | 

### Etapa 8: Iniciar um servidor Web local
<a name="start-local-web-server"></a>

Para testar o widget, você precisa servir o arquivo HTML a partir de um servidor web local. Aqui estão várias opções:

**Opção A: Python (se instalado)**  


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

**Opção B: Node.js (se instalado)**  


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

**Opção C: Extensão de servidor VS Code Live**  

+ Instale a extensão “Live Server” no VS Code
+ Clique com o botão direito do mouse `index.html` e selecione “Abrir com o Live Server”

Depois de iniciar o servidor, abra seu navegador e navegue até: `http://localhost:8001`

Você deve ver a página de demonstração com um botão de bate-papo laranja no canto inferior direito.

## Teste a experiência de streaming
<a name="test-streaming-experience"></a>

Agora que seu widget está carregado, é hora de testar o AI Message Streaming e observar a exibição progressiva de texto em ação.

### O que procurar: streaming versus não streaming
<a name="what-to-look-for"></a>

Entender a diferença entre respostas de streaming e não streaming ajuda você a verificar se o AI Message Streaming está funcionando:


| Comportamento | Sem streaming (padrão) | Streaming (streaming de mensagens AI) | 
| --- | --- | --- | 
| Exibição inicial | Indicador de carregamento ou pontos de digitação | O texto começa a aparecer imediatamente | 
| Aparência do texto | A mensagem completa aparece de uma só vez | As palavras aparecem progressivamente (bolha crescente) | 
| Tempo de resposta | Espere até que a IA termine de gerar | Veja a resposta à medida que ela está sendo gerada | 
| Efeito visual | “Pop” do texto completo | Texto suave e fluído, como ver alguém digitar |