指導教學: 在 Web 會談中實作自訂選項按鈕

本指導教學顯示如何將選項回應的預設呈現取代為您自己的自訂可按式按鈕。

如需本指導教學中所說明範例的完整工作版本，請參閱 watsonx Assistant Web 會談的自訂按鈕。

依預設，Web 會談一律會將選項回應顯示為一組可按式按鈕 (適用於 4 個或更少選項) 或下拉清單 (適用於 5 個或更多選項)。此範例顯示具有 3 個選項之選項回應的預設呈現:

呈現為 3 個按鈕的選項回應

在本指導教學中，我們將以較大的卡片樣式按鈕取代此預設呈現:

呈現為 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');
}
```
如果使用者重新載入頁面或導覽至不同的頁面，則 Web 會談會從階段作業歷程重新載入。如果發生這種情況，我們想要保留任何按一下按鈕的「已選取」狀態。

為此，在 onClick 處理程式中，使用 updateHistoryUserDefined 實例方法將變數儲存在階段作業歷程中，以指出按一下哪個按鈕。
```
webChatInstance.updateHistoryUserDefined(fullMessage.id, { selectedIndex:     itemIndex });
```
然後，在 customResponse 處理程式中，讀取此值，並使用它來設定已在階段作業歷程中的任何自訂回應中按鈕的起始狀態。
```
if (fullMessage.history?.user_defined?.selectedIndex === index) {
  button.classList.add('CardButton--selected');
}
```

如需完整的工作程式碼，請參閱 watsonx Assistant Web 會談的自訂按鈕範例。此範例也顯示如何在客戶傳送訊息之後停用自訂回應中的按鈕，這會防止使用按鈕來傳送不正常的訊息。