Entwickeln Sie eine Komponente für Virtual Agent

Erstellen Sie einen anwenderdefinierten Virtual AgentKomponente zum Sammeln von Eingaben oder Anzeigen von Informationen in Virtual AgentClient-Schnittstelle.

Typen von Virtual AgentKomponenten

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

Antwortkomponente

Eine Antwortkomponente stellt dem Anwender nur Informationen bereit und erfasst keine Eingaben oder verarbeitet keine Anwenderinteraktionen. Beispiel: Ein Kartensteuerelement, das keine Anwendereingabe erfordert und sich nur einmal in der Konversation befindet.

Fügen Sie Ihrer Antwortkomponente eine Eigenschaft hinzu, um die von gesendeten Daten zu verarbeiten Virtual AgentServer.

Tabelle : 1. Eigenschaften der Ausgabekomponente

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

Eingabekomponente

Eine Eingabekomponente zeigt Informationen an und/oder erfasst Anwendereingaben. Sie enthält dieselbe Eigenschaft wie die Ausgabekomponente, um vom Server gesendete Daten zu verarbeiten, hat jedoch mehr mögliche status und erfordert Anwenderinteraktion.

Tabelle : 2. Eigenschaften der Eingabekomponente

Eigenschaft	Beschreibung
ControlData	Anfängliche Daten, die Virtual AgentDer Server sendet an Ihre Komponente, 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 vom Server, wenn eine Aktualisierung stattfindet. Nur in Komponenten verwenden, die Anwendereingaben erfordern. Datentyp: JSON-Objekt
forceCloseControl	Kennzeichnung, die angibt, ob die Komponente Eingaben akzeptieren kann. Bei „wahr“ wird die Steuerung geschlossen, und der Anwender kann nicht mit ihr interagieren. Überwachen Sie Änderungen auf dem Client, um diesen Wert zu aktualisieren. Nur in Komponenten verwenden, die Anwendereingaben erfordern. Datentyp: Boolesch

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

Tabelle : 3. Eingabekomponentenaktionen

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

status der Eingabekomponente

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

1. Virtual Agent Zeigt die anwenderdefinierte Komponente im Status „Warten auf Eingabe“ an.
2. Der Anwender interagiert mit der Komponente, um Eingaben bereitzustellen.
3. Die Komponente wird geschlossen und sendet ResponseValue Eigenschaft für den Server.
4. Der Server führt die serverseitige Logik aus und sendet die Komponente mit der Eingabe des Anwenders an den Client zurück.

Warten auf Eingabe

Der Anfangsstatus einer Komponente, die auf die Anwenderinteraktion wartet. Die ControlData Eigenschaft ist festgelegt, aber ForceControlGeschlossen Eigenschaft ist „falsch“. Dieses Beispiel zeigt eine Schiebereglerkomponente im Status „Warten auf Eingabe“.

In diesem Beispiel, wenn der Anwender keinen angegeben hat ResponseValue Und die Steuerung ist nicht geschlossen, der Schieberegler und die Eingabetaste werden 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>}

Verarbeitung Der Eingabe

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

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

Geschlossen

Eine Komponente, die geschlossen ist, kann keine Anwendereingaben mehr akzeptieren. Komponenten werden im Allgemeinen geschlossen, weil:

• 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 den ursprünglichen Prompt nur im Status „Geschlossen“.

Antwort wird gesendet

Nachdem der Anwender geantwortet hat, wird die Steuerung erneut auf der Seite des Anwenders der Konversation mit dem Wert von gerendert ResponseValue Eigenschaft.

Beispielsweise verwendet das Schiebereglersteuerelement 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

Fügen Sie die Komponente nach der Entwicklung und der Bereitstellung in Ihrer Instanz zu hinzu Virtual Agent-DesignerVerwenden einer anwenderdefinierten Steuerung und Definition. Weitere Informationen finden Sie unter Anwenderdefinierte Virtual Agent-Steuerungen .

• Fügen Sie Eigenschaften hinzu, mit denen kommuniziert werden soll Virtual Agent
  Um eine Komponente für zu entwickeln Virtual AgentFügen Sie bestimmte Eigenschaften und Aktionen hinzu, um mit zu interagieren Virtual AgentClient-Schnittstelle. Die erforderlichen Eigenschaften hängen vom Typ der Komponente ab, die Sie erstellen.
• Testen Sie eine Komponente für Virtual Agent
  Testen Sie Virtual AgentAnwenderdefinierte Komponente, bevor sie in Ihrer Instanz bereitgestellt wird.