Développer un composant pour Agent virtuel

Créez un composant personnalisé Agent virtuel pour recueillir des informations d’entrée ou d’affichage 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 pour 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 du composant 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 rassemble les entrées de l’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
responseValue	Données envoyées au composant à partir de la réponse de l’utilisateur, soit directement par le client, soit par 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 l’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 de 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

Étant donné 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 se 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 d’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>}

Entrée de gestion

Dans l’exemple précédent, le curseur utilise un composant de bouton maintenant , 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és

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

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

Par exemple, le composant de curseur n’affiche l’invite d’origine que lorsqu’il 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 restituer 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é sur votre instance, ajoutez-le à l’aide d’un contrôle et d’une Concepteur d'agent virtuel définition personnalisés. Pour plus d’informations, consultez Contrôles personnalisés de l’Agent virtuel.

• Ajouter des propriétés avec lesquelles communiquer Agent virtuel
  Pour développer un composant pour Agent virtuel, ajoutez des propriétés et des actions spécifiques pour 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.