Desenvolva um componente para Virtual Agent

Crie um personalizado Virtual Agentcomponente para coletar informações de entrada ou exibir informações no Virtual Agentinterface do cliente.

Tipos de Virtual Agentcomponentes

Para desenvolver um componente para Virtual Agent, adicione propriedades e ações específicas para interagir com o. Virtual Agentinterface do cliente. 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 processa 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 manipular os dados enviados pelo Virtual Agentservidor.

Tabela 1. Propriedades do componente de saída

Propriedade	Descrição
ControlData	Dados iniciais que o. Virtual Agento servidor envia para 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 manipular 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
ControlData	Dados iniciais que o. Virtual Agento servidor envia para 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, 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
VALOR_SENT_DE_CONTROLE	Dados de resposta do cliente a serem enviados 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 o. 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 aguardando interação do usuário. . ControlData a propriedade está definida, mas ForceControlClosed a propriedade é falsa. Este exemplo mostra um componente deslizante no estado Aguardando entrada.

Neste exemplo, se o usuário não tiver fornecido um ResponseValue e o controle não está fechado, o controle deslizante e a exibição do botão de entrada.

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>}

Manipulando entrada

No exemplo anterior, o controle deslizante usa um now-button componente, no qual o usuário clica para confirmar a entrada e enviá-la para o servidor. Quando o usuário clica no botão, o. VALOR_SENT_DE_CONTROLE a ação é acionada com ResponseValue carga.

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

Encerrado(a)

Um componente que está fechado não pode mais aceitar entrada do usuário. Geralmente, os componentes são encerrados 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 aguarda uma resposta.

Por exemplo, o componente Controle deslizante renderiza o prompt original somente 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 de ResponseValue propriedade.

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 Agentusando um controle e uma definição personalizados. Para obter mais informações, consulte Controles personalizados do Virtual Agent .

• Adicione 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 o. Virtual Agentinterface do cliente. As propriedades necessárias dependem do tipo de componente que você está criando.
• Teste um componente para Virtual Agent
  Teste seu Virtual Agentcomponente personalizado antes de implantá-lo em sua instância.