Entwickeln Sie eine Komponente für Virtual Agent

Erstellen Sie eine anwenderdefinierte Komponente [], um Eingaben zu sammeln oder Informationen auf der Clientoberfläche Virtual AgentVirtual Agent anzuzeigen .

Typen von Virtual Agent -Komponenten

Um eine -Komponente für Virtual Agentzu entwickeln, fügen Sie bestimmte Eigenschaften und Aktionen für die Interaktion mit der Virtual Agent Clientschnittstelle hinzu. Die erforderlichen Eigenschaften hängen vom Typ der Komponente ab, die Sie erstellen.

Antwortkomponente

Eine Antwortkomponente stellt dem Benutzer nur Informationen bereit und sammelt keine Eingaben oder verarbeitet die Benutzerinteraktion. Zum Beispiel ein Kartensteuerelement, das keine Benutzereingabe erfordert und nur einmal in der Konversation vorhanden ist.

Fügen Sie Ihrer Antwortkomponente eine Eigenschaft hinzu, um die vom Server Virtual Agent gesendeten Daten zu verarbeiten.

Tabelle : 1. Eigenschaften der Ausgabekomponente

Eigenschaft	Beschreibung
Steuerungsdaten	Anfängliche Daten, die der Server Virtual Agent an Ihre Komponente sendet, während das Thema ausgeführt wird. Datentyp: JSON-Objekt

Eingabekomponente

Eine Eingabekomponente zeigt Informationen an und/oder sammelt Benutzereingaben. Sie enthält dieselbe Eigenschaft wie die Ausgabekomponente zur Verarbeitung der vom Server gesendeten Daten, verfügt jedoch über mehr mögliche Status und erfordert eine Benutzerinteraktion.

Tabelle : 2. Eigenschaften der Eingabekomponente

Eigenschaft	Beschreibung
Steuerungsdaten	Anfängliche Daten, die der Server Virtual Agent an Ihre Komponente sendet, während das Thema ausgeführt wird. Datentyp: JSON-Objekt
responseValue	Daten, die von der Antwort des Anwenders an die Komponente gesendet werden, entweder direkt vom Client oder im Falle einer Aktualisierung vom Server. Verwenden Sie nur in Komponenten, die Benutzereingaben erfordern. Datentyp: JSON-Objekt
forceCloseControl	Kennzeichnung, die angibt, ob die Komponente Eingaben akzeptieren kann. Bei „wahr“ wird das Steuerelement geschlossen, und der Benutzer kann nicht mit ihm interagieren. Überwachen Sie Changes auf dem Client, um diesen Wert zu aktualisieren. Verwenden Sie nur in Komponenten, die Benutzereingaben erfordern. Datentyp: Boolesch

Diese Aktion verwenden, um Daten aus der Anwenderinteraktion auszugeben.

Tabelle : 3. Aktionen der Eingabekomponente

Aktion	Beschreibung
VA_CONTROL#VALUE_SENT	Antwortdaten vom Client, die an den Server gesendet werden sollen. Verwenden Sie nur in Komponenten, die Benutzereingaben erfordern. Datentyp: JSON-Objekt

Status der Eingabekomponenten

Da sie Daten akzeptieren, müssen Eingabekomponenten mehrere Status verarbeiten. Der Status-Flow sieht im Allgemeinen wie folgt aus:

1. Virtual Agent zeigt die anwenderdefinierte Komponente im Status „Warten auf Eingabe“ an.
2. Der Benutzer interagiert mit der Komponente, um Eingaben zu machen.
3. Die Komponente wird geschlossen und sendet die Eigenschaft responseValue an den Server.
4. Der -Server führt die serverseitige Logik aus und sendet die Komponente mit der Eingabe des Benutzers an den Client zurück.

Warten auf Eingabe

Der Anfangsstatus einer Komponente, die auf eine Benutzerinteraktion wartet. Die Eigenschaft „controlData“ ist festgelegt, die Eigenschaft „forceControlClosed“ ist jedoch „falsch“. Dieses Beispiel zeigt eine Schiebereglerkomponente im Status „Warten auf Eingabe“.

Wenn in diesem Beispiel der Benutzer keinen Antwortwert angegeben hat und das Steuerelement nicht geschlossen ist, werden der Schieberegler und die Eingabeschaltfläche angezeigt.

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

Eingabe für die Verarbeitung

Im vorherigen Beispiel verwendet der Schieberegler eine now-button- Komponente, auf die der Benutzer klickt, um die Eingabe zu bestätigen und an den Server zu senden. Wenn der Benutzer auf die Schaltfläche klickt, wird die Aktion VA_CONTROL#VALUE_SENT mit der Nutzlast responseValue ausgelöst.

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

Geschlossen

Eine geschlossene Komponente kann keine Benutzereingabe mehr akzeptieren. Komponenten sind aus folgenden Gründen generell geschlossen:

• Der Anwender hat auf die Komponente geantwortet. Die Komponente wird geschlossen, und die Konversation wird fortgesetzt.
• Der Anwender hat den Chat beendet. Der Server wartet nicht auf eine Antwort.

Beispielsweise rendert die Schiebereglerkomponente die ursprüngliche Eingabeaufforderung nur im Status „Geschlossen“.

Antwort wird gesendet

Nachdem der Benutzer geantwortet hat, wird das Steuerelement auf der Seite des Benutzers in der Konversation mit dem Wert der Eigenschaft responseValue erneut gerendert.

Beispielsweise verwendet die Schiebereglersteuerung dieses Snippet, um die Antwort zu rendern.

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

Die Komponente wird zu hinzugefügt Virtual Agent-Designer

Nachdem Sie die Komponente entwickelt und in Ihrer Instanz bereitgestellt haben, fügen Sie sie mithilfe eines anwenderdefinierten Steuerelements und einer Definition zu Virtual Agent-Designer hinzu. Weitere Informationen finden Sie unter Anwenderdefinierte Steuerungen für Virtual Agent.

• Fügen Sie Eigenschaften für die Kommunikation mit hinzu Virtual Agent
  Um eine -Komponente für Virtual Agentzu entwickeln, fügen Sie bestimmte Eigenschaften und Aktionen für die Interaktion mit der Virtual Agent Clientschnittstelle hinzu. Die erforderlichen Eigenschaften hängen vom Typ der Komponente ab, die Sie erstellen.
• Testen Sie eine Komponente für Virtual Agent
  Testen Sie Ihre anwenderdefinierte Komponente Virtual Agent, bevor Sie sie in Ihrer -Instanz bereitstellen.