Desenvolver um componente para Virtual Agent

Crie um componente Virtual Agent personalizado para coletar entrada ou exibir informações na interface do cliente Virtual Agent.

Tipos de Virtual Agent componentes

Para desenvolver um componente para Virtual Agent, adicione propriedades e ações específicas para interagir com a interface do cliente Virtual Agent. As propriedades necessárias dependem do tipo de componente que você está criando.

Componente de resposta

Um componente de resposta fornece apenas informações ao usuário e não coleta entrada ou manipula a interação do usuário. Por exemplo, um controle de cartão que não requer entrada do usuário e está na conversa apenas uma vez.

Adicione uma propriedade ao seu componente de resposta para lidar com os dados enviados pelo servidor Virtual Agent.

Tabela 1. Propriedades do componente de saída

Propriedade	Descrição
dados de controle	Dados iniciais que o servidor Virtual Agent envia para o seu componente conforme o tópico é executado. Tipo de dados: objeto JSON

Componente de entrada

Um componente de entrada exibe informações e/ou coleta a entrada do usuário. Ele inclui a mesma propriedade que o componente de saída para lidar com os dados enviados pelo servidor, mas tem mais estados possíveis e requer interação do usuário.

Tabela 2. Propriedades do componente de entrada

Propriedade	Descrição
dados de controle	Dados iniciais que o servidor Virtual Agent envia para o seu componente conforme o tópico é executado. Tipo de dados: objeto JSON
responseValue	Dados enviados para o componente a partir da resposta do usuário, seja diretamente do cliente ou do servidor, se houver uma atualização. Use somente em componentes que exigem entrada do usuário. Tipo de dados: objeto JSON
forceCloseControl	Sinalizador que indica se o componente pode aceitar entrada. Quando verdadeiro, o controle é fechado e o usuário não pode interagir com ele. Monitore mudanças no cliente para atualizar este valor. Use somente em componentes que exigem entrada do usuário. Tipo de dados: booliano

Use esta ação para emitir dados da interação do usuário.

Tabela 3. Ações do componente de entrada

Ação	Descrição
VA_CONTROL#VALUE_SENT	Dados de resposta do cliente para enviar ao servidor. Use somente em componentes que exigem entrada do usuário. Tipo de dados: objeto JSON

Estados do componente de entrada

Como eles aceitam dados, os componentes de entrada devem lidar com vários estados. O fluxo de estado geralmente é o seguinte:

1. Virtual Agent mostra o componente personalizado no estado aguardando entrada.
2. O usuário interage com o componente para fornecer entrada.
3. O componente fecha e envia a propriedade responseValue para o servidor.
4. O servidor executa a lógica do lado do servidor e envia o componente com a entrada do usuário de volta para o cliente.

Aguardando entrada

O estado inicial de um componente que aguarda a interação do usuário. A propriedade controlData está definida, mas a propriedade forceControlClosed é falsa. Este exemplo mostra um componente do controle deslizante no estado aguardando entrada.

Neste exemplo, se o usuário não tiver fornecido um responseValue e o controle não estiver fechado, o controle deslizante e o botão de entrada serão exibidos.

const {controlClosed, sliderVal, sliderMin, sliderMax} = state;
return (<div class={{"slider-chat": true}}>
    {responseValue ? null :  <Fragment>
    <div class={{"slider-label": true}}>{label}</div>
    {controlClosed ? null : <Fragment>
        <div class={{"slider-container": true}}>
                    <input on-change={onSliderChange} type="range" min={sliderMin} max={sliderMax} value={sliderVal} class={{"slider": true}} />
            <div class={{"slider-value": true}}>
                    {unitIcon && 
                     <div class={{"unit-icon": true}}><img src={unitIcon} /></div>
                     } 
                     {sliderVal} {unitName}
                </div>
        <div class={{"button-container":true}}>
            <now-button variant="primary" label={buttonText || 'Confirm'} />
         </div></div></Fragment>}

Entrada de manipulação

No exemplo anterior, o controle deslizante usa um componente de botão agora, no qual o usuário clica para confirmar a entrada e enviá-lo para o servidor. Quando o usuário clica no botão, a ação VA_CONTROL#VALUE_SENT é acionada com a carga responseValue.

'NOW_BUTTON#CLICKED': (data) => {
    const {updateState, dispatch, state: {sliderVal}} = data;
    updateState({controlClosed: true});
    dispatch('VA_CONTROL#VALUE_SENT', {
        value: {
            sliderVal
        }
    }); 
}

Encerrado

Um componente que está fechado não pode mais aceitar a entrada do usuário. Os componentes geralmente são fechados porque:

• O usuário respondeu ao componente. O componente é encerrado e a conversa continua.
• O usuário encerrou o bate-papo. O servidor não espera por uma resposta.

Por exemplo, o componente do controle deslizante somente renderiza o prompt original quando está no estado fechado.

Enviando resposta

Depois que o usuário responde, o controle é renderizado novamente no lado do usuário da conversa com o valor da propriedade responseValue.

Por exemplo, o controle deslizante usa este snippet para renderizar a resposta.

{responseValue && <div className="response-container slider-value">
   {unitIcon && 
   <div className="unit-icon"><img src={unitIcon} /></div>
   } 
   {returnVal} {unitName}
</div>}

Adicionando o componente a Designer do Virtual Agent

Depois de desenvolver o componente e implantá-lo em sua instância, adicione-o a Designer do Virtual Agent usando um controle e uma definição personalizados. Para obter mais informações, consulte Controles personalizados do Virtual Agent.

• Adicionar propriedades com as quais se comunicar Virtual Agent
  Para desenvolver um componente para Virtual Agent, adicione propriedades e ações específicas para interagir com a interface do cliente Virtual Agent. As propriedades necessárias dependem do tipo de componente que você está criando.
• Testar um componente para Virtual Agent
  Teste seu componente personalizado Virtual Agent antes de implantá-lo em sua instância.