맞춤 이벤트 및 맞춤 UI 모듈 커넥터

Agent Assist UI 모듈과 커넥터 간의 모든 통신은 맞춤 이벤트를 통해 이루어집니다. UI 모듈 커넥터는 에이전트 데스크톱과 UI 모듈 간의 이벤트를 용이하게 합니다.

예를 들어 Agent Assist 제안이 수신되면 UI 모듈 커넥터 서비스는 UI 모듈에 analyze-content-received 이벤트를 디스패치하고 모듈은 이러한 이벤트를 구독합니다.

맞춤 이벤트 세부정보

UI 모듈 이벤트 및 페이로드의 전체 목록은 UI 모듈 이벤트 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()
      }
    }
  });
}

맞춤 이벤트를 디스패치하면 UI 모듈 커넥터 서비스에 다음이 표시됩니다.

    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.
});

맞춤 UI 모듈 커넥터

맞춤 이벤트를 사용하여 자체 맞춤 UI 모듈 커넥터를 만들 수도 있습니다. 이를 통해 UI 모듈을 Agent Assist에서 지원하지 않는 상담사 데스크톱에 통합할 수 있습니다. 모듈 및 커넥터 구현에 관한 자세한 내용은 구현 문서를 참고하세요.

사전 빌드된 UI 모듈 커넥터가 없는 상담사 데스크톱에 상담사 지원 UI 모듈을 통합하는 경우 맞춤 커넥터를 작성해야 합니다. 맞춤 UI 모듈 커넥터를 만든 후 UI 모듈 구현 문서로 돌아가 커넥터를 구성하고 모듈을 구현하는 방법을 자세히 알아보세요. 관리 컨테이너 또는 개별 모듈과 함께 맞춤 UI 모듈 커넥터를 사용할 수 있습니다.

맞춤 UI 모듈 커넥터는 다음 작업을 담당해야 합니다.

  1. 활성 대화를 선택하는 이벤트를 디스패치합니다. 이렇게 하면 참가자와 함께 대화가 초기화됩니다. 이벤트 이름: active-conversation-selected
  2. 채팅 대화의 경우 상담사 또는 고객으로부터 새로운 발화가 등록될 때마다 이벤트를 디스패치합니다. 이벤트 이름: analyze-content-requested
  3. 기본 애플리케이션에서 '어두운 모드'가 전환될 때 모듈 시스템에 알림 이벤트 이름: dark-mode-toggled

또한 맞춤 UI 모듈 커넥터는 해당하는 경우 상담사 데스크톱 UI를 업데이트하기 위해 다음 이벤트를 구독해야 합니다.

  1. 스마트 답장의 경우 스마트 답장 칩이 선택될 때마다 에이전트의 입력 필드를 업데이트합니다. 이벤트 이름: smart-reply-selected
  2. 생성형 지식 지원의 경우 지식 지원 답변이 입력란에 붙여넣어질 때마다 에이전트의 입력란을 업데이트합니다. 이벤트 이름: knowledge-assist-v2-answer-pasted

namespace로 여러 UI 모듈 인스턴스 초기화

동일한 페이지에서 UI 모듈의 여러 인스턴스를 로드하려면 상담사 데스크톱에 여러 초기화 인스턴스가 필요합니다. 별도로 유지하려면 초기화 시 namespace 구성 옵션을 UI 모듈과 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);