מחברים של אירועים מותאמים אישית ומודולים מותאמים אישית של ממשק משתמש

כל התקשורת בין מודול ממשק המשתמש של Agent Assist לבין המחבר שלו מתבצעת באמצעות אירועים מותאמים אישית. המחבר של מודול ממשק המשתמש מאפשר אירועים בין שולחן העבודה של הנציג לבין מודולי ממשק המשתמש.

לדוגמה, כשמתקבלת הצעה מ-Agent Assist, שירות מחבר של מודולי ממשק משתמש ישלח אירוע analyze-content-received למודולי ממשק המשתמש, והמודולים רשומים לקבלת אירועים כאלה.

פרטים של אירועים בהתאמה אישית

רשימה מלאה של אירועים במודול ממשק המשתמש והמטען הייעודי (payload) שלהם מופיעה במאמרי העזרה של ה-API של אירועים במודול ממשק המשתמש.

כדי לשלוח אירוע מותאם אישית באופן ידני, משתמשים בתחביר הבא:

    dispatchAgentAssistEvent('event_name', {
      detail: event_payload,
    });

בדוגמה הבאה אפשר לראות איך שולחים את האירוע analyze-content-received:

if (newMessageFromHumanAgent) {
  dispatchAgentAssistEvent('analyze-content-received', {
    detail: {
      participantRole: 'HUMAN_AGENT',
      request: {
        textInput: {text: newMessageFromHumanAgent},
        messageSendTime: new Date().toISOString()
      }
    }
  });
}

אחרי ששולחים אירוע מותאם אישית, רואים את הפרטים הבאים בשירות של מחבר מודול ממשק המשתמש:

    this.api.analyzeContent(...).then(function (response) {
      dispatchAgentAssistEvent('analyze-content-response-received', {
       detail: {response: response}});
    });

במודול יוצגו הפרטים הבאים:

    addAgentAssistEventListener('analyze-content-response-received', function (event) {
      // Use the AnalyzeContent response to render suggestions in the UI.
    });

כדי להירשם באופן ידני לאירוע בהתאמה אישית, משתמשים בתחביר הבא:

    addAgentAssistEventListener('event_name', function (event) {
      // `event.detail` contains the event payload.
    });

בדוגמה הבאה מוצג מינוי לאירוע בהתאמה אישית:

addAgentAssistEventListener('smart-reply-selected', function (event) {
  var chipContent = event.details;
  // Populate the agent chat box with the selected Smart Reply chip.
});

מחברים של מודולים של ממשק משתמש בהתאמה אישית

אפשר גם להשתמש באירועים מותאמים אישית כדי ליצור מחברים משלכם למודולים של ממשק המשתמש, שיאפשרו לכם לשלב את המודולים של ממשק המשתמש בשולחן עבודה של נציג שלא נתמך על ידי Agent Assist. מידע נוסף על הטמעה של מודולים ומחברים זמין במסמכי ההטמעה.

אם אתם משלבים מודולים של ממשק משתמש של Agent Assist בשולחן עבודה של סוכן בלי מחבר מודולים מובנה של ממשק משתמש, תצטרכו לכתוב מחבר מותאם אישית. אחרי שיוצרים מחבר מותאם אישית של מודול ממשק משתמש, חוזרים למסמכי הטמעת מודול ממשק המשתמש כדי לקבל פרטים על הגדרת המחברים והטמעת המודולים. אפשר להשתמש במחבר מותאם אישית של מודול ממשק משתמש עם מאגר תגים מנוהל או עם מודולים נפרדים.

מחבר מותאם אישית של מודול ממשק משתמש צריך להיות אחראי לפעולות הבאות:

1. שליחת אירוע כדי לבחור את השיחה הפעילה. הפעולה הזו תאתחל את השיחה ואת המשתתפים בה. שם האירוע: active-conversation-selected
2. לשיחות בצ'אט, שליחת אירוע בכל פעם שנרשמת אמירה חדשה מהסוכן או מהלקוח. שם האירוע: analyze-content-requested
3. הודעה למערכת המודולים כשמפעילים או משביתים את 'מצב כהה' באפליקציה הראשית. שם האירוע: dark-mode-toggled
4. שליחת אירוע כדי לבקש לסמן את השיחה כהשלמה בשרת העורפי. שם האירוע: complete-conversation-requested

בנוסף, מחבר מודול ממשק משתמש מותאם אישית צריך להירשם לאירועים הבאים כדי לעדכן את ממשק המשתמש של סוכן שירות הלקוחות במקומות הרלוונטיים:

1. במקרה של תשובה מהירה, צריך לעדכן את שדה להזנת קלט של הנציג בכל פעם שנבחר צ'יפ של תשובה מהירה. שם האירוע: smart-reply-selected.
2. במקרה של Generative Knowledge Assist, צריך לעדכן את שדה להזנת קלט של הסוכן בכל פעם שמדביקים בתיבת קלט תשובה של Knowledge Assist. שם האירוע: knowledge-assist-v2-answer-pasted.

אתחול של כמה מופעים של מודולים של ממשק משתמש באמצעות namespace

כדי לטעון כמה מופעים של מודולי ממשק המשתמש באותו דף, צריך כמה מופעי אתחול של שולחנות העבודה של הנציגים. כדי להפריד ביניהם, צריך להעביר אפשרות הגדרה של namespace אל מודולי ממשק המשתמש ואל UIModulesConnector בזמן האתחול.

משתמשים באפשרות הזו אם מבחינים בהודעות ובהצעות שמשותפות בין שיחות שונות בשולחן העבודה של הנציג. לדוגמה:

const connector = new UiModulesConnector();
const config = {};
// ...other UI module connector config options
config.uiModuleEventOptions = { namespace: this.recordId }

const containerElement = document.createElement("agent-assist-ui-modules-v2");
// ...other UI modules HTML attributes
containerEl.setAttribute("namespace", this.recordId);