학습서: 웹 대화에서 사용자 정의 옵션 단추 구현

이 학습서에서는 옵션 응답의 기본 렌더링을 사용자 고유의 사용자 정의 클릭 가능 단추로 대체하는 방법을 보여줍니다.

이 학습서에 설명된 예제의 전체 작동 버전은 watsonx Assistant 웹 대화에 대한 사용자 정의 단추를 참조하십시오.

기본적으로 웹 대화는 항상 옵션 응답을 클릭 가능한 단추 세트 (4개이하의 옵션의 경우) 또는 드롭 다운 목록 (5개이상의 옵션의 경우) 으로 표시합니다. 이 예제는 세 개의 옵션이 있는 옵션 응답의 기본 렌더링을 표시합니다.

세 개의 단추로 렌더링된 옵션 응답

이 학습서에서는 이 기본 렌더링을 더 큰 카드 스타일 단추로 대체합니다.

3개의 사용자 정의 카드 스타일 단추로 렌더링된 옵션 응답

옵션 응답의 렌더링을 수정할 수 없기 때문에 어시스턴트에서 수신 옵션 응답을 가로채고 이를 사용자 정의 (user_defined) 응답으로 변환하여 이를 수행합니다. 그런 다음 이러한 응답에 대한 사용자 정의 렌더링을 구현할 수 있습니다.

pre:receive 이벤트에 대한 핸들러를 작성하십시오. 이 핸들러에서 메시지 페이로드의 option 응답을 찾아 user_defined 응답으로 변환하십시오.

function preReceiveHandler(event) {
  const message = event.data;
  if (message.output.generic) {
    message.output.generic.forEach(messageItem => {
      if (messageItem.response_type === 'option') {
        messageItem.response_type = 'user_defined';
      }
    })
  }
}

customResponse 이벤트에 대한 핸들러를 작성하십시오. 이 핸들러는 CSS에서 정의할 수 있는 사용자 정의 CardButton 스타일을 사용하여 사용자 정의 단추를 렌더링합니다. ( 전체 예제에서 이 스타일의 정의를 볼 수 있습니다.)

function customResponseHandler(event) {
  const { message, element, fullMessage } = event.data;
  message.options.forEach((messageItem, index) => {
    const button = document.createElement('button');
    button.innerHTML = messageItem.label;
    button.classList.add('CardButton');
    button.addEventListener('click', () => onClick(messageItem, button,     fullMessage, index));
    element.appendChild(button);
  });
}

onLoad 이벤트 핸들러에서 on() 인스턴스 메소드를 사용하여 pre:receive 및 customResponse 이벤트에 등록하고 핸들러를 콜백으로 등록하십시오.
```
instance.on({ type: 'customResponse', handler: customResponseHandler });
instance.on({ type: 'pre:receive', handler: preReceiveHandler });
```
고객이 사용자 정의 버튼 중 하나를 누를 때 응답할 클릭 핸들러를 작성하십시오. 핸들러에서 send() 인스턴스 메소드를 사용하여 단추 레이블을 메시지 텍스트로 사용하여 어시스턴트에 메시지를 전송하십시오.

또한 클릭한 단추에 사용자 정의 CSS 클래스 CardButton--selected 를 추가하여 선택되었음을 표시하도록 모양을 변경합니다. (이 클래스는 전체 예제에도 정의되어 있습니다.)
```
function onClick(messageItem, button, fullMessage, itemIndex) {
  webChatInstance.send({ input: { text: messageItem.label }});
  button.classList.add('CardButton--selected');
}
```
사용자가 페이지를 다시 로드하거나 다른 페이지로 이동하면 웹 대화가 세션 히스토리에서 다시 로드됩니다. 이 경우 클릭한 단추의 "선택됨" 상태를 유지하려고 합니다.

이를 수행하려면 onClick 핸들러에서 updateHistoryUserDefined 인스턴스 메소드를 사용하여 클릭된 단추를 표시하는 변수를 세션 히스토리에 저장하십시오.
```
webChatInstance.updateHistoryUserDefined(fullMessage.id, { selectedIndex:     itemIndex });
```
그런 다음 customResponse 핸들러에서 이 값을 읽고 이 값을 사용하여 세션 히스토리에 이미 있는 사용자 정의 응답에서 단추의 초기 상태를 설정하십시오.
```
if (fullMessage.history?.user_defined?.selectedIndex === index) {
  button.classList.add('CardButton--selected');
}
```

전체 작업 코드는 watsonx Assistant 웹 대화에 대한 사용자 정의 단추 예제를 참조하십시오. 이 예제에서는 고객이 메시지를 보낸 후 사용자 정의 응답에서 단추를 사용 안함으로 설정하는 방법도 표시합니다. 이 경우 단추를 사용하여 순서가 잘못된 메시지를 전송하는 것을 방지할 수 있습니다.