Entwickeln Sie eine Komponente für Virtual Agent

Erstellen Sie eine benutzerdefinierte Virtual Agent -Komponente, um Eingaben zu sammeln oder Informationen in der Virtual Agent -Client-Schnittstelle anzuzeigen.

Typen von Virtual Agent -Komponenten

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

Antwortkomponente

Eine Antwortkomponente stellt dem Benutzer nur Informationen bereit und erfasst 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
kontrolldaten	Anfängliche Daten, die der Server Virtual Agent an Ihre Komponente sendet, wenn das Thema ausgeführt wird. Datentyp: JSON-Objekt

Eingabekomponente

Eine Eingabekomponente zeigt Informationen an und/oder erfasst Benutzereingaben. Sie enthält die gleiche Eigenschaft wie die Ausgabekomponente zur Verarbeitung der vom Server gesendeten Daten, hat jedoch mehr mögliche Status und erfordert Benutzerinteraktion.

Tabelle : 2. Eigenschaften der Eingabekomponente

Eigenschaft	Beschreibung
kontrolldaten	Anfängliche Daten, die der Server Virtual Agent an Ihre Komponente sendet, wenn das Thema ausgeführt wird. Datentyp: JSON-Objekt
responseValue	Daten, die aus der Antwort des Benutzers an die Komponente gesendet werden, entweder direkt vom Client oder bei einer Aktualisierung vom Server. Nur in Komponenten verwenden, die eine Benutzereingabe erfordern. Datentyp: JSON-Objekt
erzwingenCloseControl	Kennzeichnung, die angibt, ob die Komponente Eingaben akzeptieren kann. Bei „true“ wird das Steuerelement geschlossen, und der Benutzer kann nicht mit ihm interagieren. Überwachen Sie Änderungen auf dem Client, um diesen Wert zu aktualisieren. Nur in Komponenten verwenden, die eine Benutzereingabe erfordern. Datentyp: Boolesch

Verwenden Sie diese Aktion, um Daten aus der Benutzerinteraktion auszugeben.

Tabelle : 3. Eingabekomponentenaktionen

Aktion	Beschreibung
VA_STEUERUNG#VALUE_SENT	Antwortdaten vom Client, die an den Server gesendet werden sollen. Nur in Komponenten verwenden, die eine Benutzereingabe erfordern. Datentyp: JSON-Objekt

Eingabekomponentenstatus

Da sie Daten akzeptieren, müssen Eingabekomponenten mehrere Status verarbeiten. Der Statusfluss ist im Allgemeinen wie folgt:

1. Virtual Agent zeigt die benutzerdefinierte Komponente im Status „Warten auf Eingabe“ an.
2. Der Benutzer interagiert mit der Komponente, um Eingaben bereitzustellen.
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 Benutzereingabe 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“ jedoch auf „falsch“. Dieses Beispiel zeigt eine Schiebereglerkomponente im Status „Warten auf Eingabe“.

Wenn der Benutzer in diesem Beispiel keinen responseValue 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 bearbeiten

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_STEUERUNG#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 Benutzereingaben mehr akzeptieren. Komponenten werden im Allgemeinen geschlossen, weil:

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

Beispielsweise rendert die Schiebereglerkomponente die ursprüngliche Eingabeaufforderung nur im geschlossenen Zustand.

Antwort wird gesendet

Nachdem der Benutzer geantwortet hat, wird das Steuerelement auf der Benutzerseite der Konversation erneut mit dem Wert der responseValue -Eigenschaft gerendert.

Zum Beispiel verwendet das Schieberegler-Steuerelement dieses Fragment, 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 benutzerdefinierten Steuerelements und einer benutzerdefinierten Definition zu Virtual Agent-Designer hinzu. Weitere Informationen finden Sie unter Benutzerdefinierte Virtual Agent-Steuerungen.

• 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 hinzu, um mit der Client-Schnittstelle Virtual Agent zu interagieren. Die erforderlichen Eigenschaften hängen vom Typ der Komponente ab, die Sie erstellen.
• Testen Sie eine Komponente für Virtual Agent
  Testen Sie Ihre benutzerdefinierte Komponente Virtual Agent, bevor Sie sie in Ihrer Instanz bereitstellen.