Développer un composant pour Agent virtuel

Créez un composant personnalisé Agent virtuel pour recueillir des informations d’entrée ou afficher des informations dans l’interface Agent virtuel client.

Types de Agent virtuel composants

Pour développer un composant pour Agent virtuel, ajoutez des propriétés et des actions spécifiques afin d’interagir avec l’interface Agent virtuel client. Les propriétés requises dépendent du type de composant que vous créez.

Composant de réponse

Un composant de réponse fournit uniquement des informations à l’utilisateur, et ne collecte pas d’entrée ni ne gère l’interaction de l’utilisateur. Par exemple, un contrôle de carte qui ne nécessite pas d’entrée de l’utilisateur et qui n’apparaît qu’une seule fois dans la conversation.

Ajoutez une propriété à votre composant de réponse pour gérer les données envoyées par le Agent virtuel serveur.

Tableau 1. Propriétés des composants de sortie

Propriété	Description
données de contrôle	Données initiales que le Agent virtuel serveur envoie à votre composant au fur et à mesure de l’exécution de la rubrique. Type de données : objet JSON

Composant d’entrée

Un composant d’entrée affiche des informations et/ou recueille des entrées utilisateur. Il inclut la même propriété que le composant de sortie pour gérer les données envoyées par le serveur, mais a plus d’états possibles et nécessite une interaction de l’utilisateur.

Tableau 2. Propriétés des composants d’entrée

Propriété	Description
données de contrôle	Données initiales que le Agent virtuel serveur envoie à votre composant au fur et à mesure de l’exécution de la rubrique. Type de données : objet JSON
valeur de réponse	Données envoyées au composant à partir de la réponse de l’utilisateur, soit directement depuis le client, soit depuis le serveur en cas d’actualisation. À utiliser uniquement dans les composants qui nécessitent une entrée de l’utilisateur. Type de données : objet JSON
forceCloseControl	Marqueur indiquant si le composant peut accepter une entrée. Si la valeur est « vrai », le contrôle se ferme et l’utilisateur ne peut pas interagir avec lui. Surveillez les changements sur le client pour mettre à jour cette valeur. À utiliser uniquement dans les composants qui nécessitent une entrée de l’utilisateur. Type de données : booléennes

Utilisez cette action pour émettre des données à partir de l’interaction de l’utilisateur.

Tableau 3. Actions des composants d’entrée

Action	Description
VA_CONTROL#VALUE_SENT	Données de réponse du client à envoyer au serveur. À utiliser uniquement dans les composants qui nécessitent une entrée de l’utilisateur. Type de données : objet JSON

États des composants d’entrée

Parce qu’ils acceptent des données, les composants d’entrée doivent gérer plusieurs états. Le flux d’état est généralement le suivant :

1. Agent virtuel Affiche le composant personnalisé dans l’état En attente d’entrée.
2. L’utilisateur interagit avec le composant pour fournir une entrée.
3. Le composant ferme et envoie la propriété responseValue au serveur.
4. Le serveur exécute la logique côté serveur et renvoie le composant avec l’entrée de l’utilisateur au client.

En attente d’entrée

État initial d’un composant en attente d’interaction de l’utilisateur. La propriété controlData est définie, mais la propriété forceControlClosed est false. Cet exemple montre un composant de curseur à l’état En attente d’entrée.

Dans cet exemple, si l’utilisateur n’a pas fourni de responseValue et que le contrôle n’est pas fermé, le curseur et le bouton d’entrée s’affichent.

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

Gestion de l’entrée

Dans l’exemple précédent, le curseur utilise un composant now-button , sur lequel l’utilisateur clique pour confirmer l’entrée et l’envoyer au serveur. Lorsque l’utilisateur clique sur le bouton, l’action VA_CONTROL#VALUE_SENT se déclenche avec la charge utile responseValue .

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

Fermé

Un composant fermé ne peut plus accepter d’entrée utilisateur. Les composants sont généralement fermés car :

• L’utilisateur a répondu au composant. Le composant se ferme et la conversation se poursuit.
• L’utilisateur a mis fin à la messagerie instantanée. Le serveur n’attend pas de réponse.

Par exemple, le composant slider n’affiche l’invite d’origine que lorsqu’elle est à l’état Fermé.

Envoi de la réponse

Une fois que l’utilisateur a répondu, le contrôle est restitué du côté de l’utilisateur de la conversation avec la valeur de la propriété responseValue .

Par exemple, le curseur utilise cet extrait pour afficher la réponse.

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

Ajout du composant à Concepteur d'agent virtuel

Après avoir développé le composant et l’avoir déployé dans votre instance, ajoutez-le à Concepteur d'agent virtuel l’aide d’un contrôle et d’une définition personnalisés. Pour plus d’informations, consultez Contrôles personnalisés de l’Agent virtuel.

• Ajouter des propriétés pour communiquer avec Agent virtuel
  Pour développer un composant pour Agent virtuel, ajoutez des propriétés et des actions spécifiques afin d’interagir avec l’interface Agent virtuel client. Les propriétés requises dépendent du type de composant que vous créez.
• Tester un composant pour Agent virtuel
  Testez votre Agent virtuel composant personnalisé avant de le déployer sur votre instance.