Web-Component-Modul

Einleitung

Zeigen Sie eine Web Component innerhalb des Chats an, um interaktive Elemente und benutzerdefinierte Funktionen zu ermöglichen.

Typische Anwendungsfälle

Betten Sie interaktive Web Components wie Bild-Uploader, benutzerdefinierte Formulare oder dynamische Inhalte in Ihren Chat ein.

Verwendung des Moduls

Beispiel

Das folgende Beispiel definiert eine Web Component mit dem Tag image-upload. Um die Web Component in LoyJoy zu integrieren, (1) stellen Sie das folgende JavaScript-Snippet als Datei auf einem Webhosting Ihrer Wahl bereit, (2) geben Sie die URL zu dieser Datei in LoyJoy als URL der Web Component ein und (3) geben Sie image-upload als HTML-Tag der Web Component ein.

Veröffentlichen Sie den KI-Agenten vor dem Testen

Web Components werden nur in der veröffentlichten Version des KI-Agenten gerendert. Nachdem Sie ein Web-Component-Modul hinzugefügt, die JavaScript-Datei hochgeladen oder das HTML-Tag geändert haben, veröffentlichen Sie den KI-Agenten und testen Sie ihn dann im veröffentlichten Chat. Solange diese Änderungen nicht veröffentlicht sind, zeigt der Chat die Web Component nicht an.

class ImageUpload extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({
            mode: 'open'
        });

        // define the parameters you want to transfer from LoyJoy here
        this.props = {
            guid: ''
        };

        this.render = () => {

            this.shadowRoot.innerHTML = `
              <style>
                div {
                  background-color: #eee;
                  padding: 10px;
                  border-radius: 5px;
                  width: 75%;
                }

                input {
                  padding-bottom: 10px;
                }
              </style>

              <div>
                <input class="fileupload" type="file" name="fileupload"/>
                <button class="upload-button">Upload</button>
              </div>
            `;

            var uploadButton = this.shadowRoot.querySelector('.upload-button');

            uploadButton.onclick = async () => {
                var fileupload = this.shadowRoot.querySelector('.fileupload');
                var formData = new FormData();
                formData.append('file', fileupload.files[0]);
                await fetch(`https://httpbin.org/post?Action=new2&guid=${this.props.guid}`, {
                    method: 'POST',
                    body: formData
                });

                uploadButton.disabled = true;

                // this call in combination with the continue: true allows the chat to continue after waiting
                this.dispatchEvent(new CustomEvent('variables', {
                    detail: {
                        variables: {
                          filename: fileupload.files[0].name
                        },
                        continue: true
                    }
                }));
            };
        };

        this.setProps = () => {
            var attribute = this.attributes['properties']
            var props = attribute?.value && JSON.parse(attribute.value)

            if (props) {
                Object.keys(this.props).forEach(propKey => {
                    this.props[propKey] = props[propKey] || ''
                });
            }
        };
    }

    connectedCallback() {
        this.setProps();

        if (!this._rendered) {
            this.render();
            this._rendered = true;
        }
    }
}

if (!customElements.get('image-upload')) {
    customElements.define('image-upload', ImageUpload);
}

hinweis

Diese Web Component verwendet einen Parameter namens guid, der in LoyJoy wie folgt definiert werden kann. Die Parameter werden dann an die Web Component übergeben. Verwenden Sie dies, um individuelle Daten an Ihre Web Components zu übergeben.

Den Chat an der Web Component stoppen und auf Eingaben warten

Verwenden Sie die Option Warten an der Web Component, um auf Nutzereingaben zu warten, wenn die Web Component angezeigt wird:

Innerhalb der Web Component kann der Ablauf mit dem Aufruf this.dispatchEvent(new CustomEvent('variables', ... fortgesetzt werden. Beachten Sie: Sie müssen { 'detail' : { ..., 'continue': true } } verwenden, um das Fortsetzen des Chat-Ablaufs zu aktivieren.

Zugriff auf Variablen, die von Web Components geschrieben wurden

Wenn Ihre Web Component eine Variable wie filename im obigen Beispiel schreibt, wird der Variablenname nicht unverändert geschrieben. Stattdessen wird die Variable unter dem Namen <key>_<Modul-ID> gespeichert, wobei <key> der Name im variables-Payload der Web Component und <Modul-ID> die ID Ihres Web-Component-Moduls ist. Für das obige Beispiel filename wäre die gespeicherte Variable z. B. filename_59c2f4d0_0123_4e56_89ab_cdef01234567, wobei die Bindestriche der Modul-ID durch Unterstriche ersetzt werden. Den genauen Namen für Ihr Web-Component-Modul finden Sie unten in den Einstellungen der Web Component:

Dieser Zusatz wird hinzugefügt, um sicherzustellen, dass Variablen aus dem potenziell nicht vertrauenswürdigen Kontext der Web Component keine vorhandenen Variablen überschreiben können.