自訂網路聊天

發行項
07/16/2024

適用於： SDK v4

本文詳細說明如何自定義網路聊天範例以符合 Bot。

將網路聊天整合到您的網站

網路聊天概觀說明如何將網路聊天控件整合到您的網站。

自定義樣式

網路聊天控件提供豐富的自定義選項：您可以變更色彩、大小、元素的位置、新增自定義元素，以及與主控網頁互動。以下是如何自定義網路聊天 UI 的數個範例。

您可以找到您可以在檔案中網路聊天 StyleOptions.ts 中修改之所有設定的完整清單。您可以在 defaultStyleOptions.ts 檔案中找到網路聊天的預設值

這些設定會產生樣式集，這是一組以魅力增強的 CSS 規則。您可以在檔案的樣式集中 createStyleSet.ts 找到產生的 CSS 樣式完整清單。

設定網路聊天容器的大小

若要調整網路聊天容器的大小，請使用樣式集的 rootHeight 和 rootWidth 屬性。下列範例也會設定容器的背景色彩，以顯示控制器的大小。

<!DOCTYPE html>
<head>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>
<body>
  <div style="height: 60%; width: 40%; margin-top:5%; margin-left:10%" id="webchat" role="main"></div>
  <script>
     // Set  the CSS rules.
     const styleSet = window.WebChat.createStyleSet({
         rootHeight: '100%',
         rootWidth: '50%',
         backgroundColor: 'paleturquoise'
      });

    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({
          token: '<Your Direct Line token>'}),
      styleSet
    }, document.getElementById('webchat'));
    
  </script>
</body>

使用根高度和根寬度設定網路聊天

警告

在主控網頁中，請勿在純視中使用您的 Direct Line 金鑰。使用令牌，如如何將 Bot 連線至網路聊天 的生產內嵌選項一節所述。

變更聊天泡泡字型和色彩

您可以自定義聊天泡泡中使用的背景色彩和字型，以符合裝載網路聊天控件的網頁樣式。下列代碼段示範如何執行。

設定泡泡字型和色彩

<!DOCTYPE html>
<head>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>
<body>
  <div style="height: 60%; width: 40%; margin-top:5%; margin-left:10%" id="webchat" role="main"></div>
  <script>
     
     // Set  the CSS rules.
     const styleSet = window.WebChat.createStyleSet({
         bubbleBackground: 'rgba(0, 0, 255, .1)',
         bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
         rootHeight: '100%',
         rootWidth: '50%',
         backgroundColor: 'paleturquoise'
      });

      // After generated, you can modify the CSS rules.
      // Change font family and weight. 
      styleSet.textContent = {
         ...styleSet.textContent,
         fontFamily: "'Comic Sans MS', 'Arial', sans-serif",
         fontWeight: 'bold'
      };
    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({
          token: '<Your Direct Line token>'}),
      styleSet
    }, document.getElementById('webchat'));
    
  </script>
</body>

變更 Bot 和用戶虛擬人偶

網路聊天支援虛擬人偶，您可以在屬性中styleOptions設定 botAvatarInitials 和 userAvatarInitials 來自定義。

<!DOCTYPE html>
<head>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>
<body>
  <div style="height: 60%; width: 40%; margin-top:5%; margin-left:10%" id="webchat" role="main"></div>
  <script>
     
     // Set  the CSS rules.
     const styleSet = window.WebChat.createStyleSet({
         bubbleBackground: 'rgba(0, 0, 255, .1)',
         bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
         rootHeight: '100%',
         rootWidth: '50%',
         backgroundColor: 'paleturquoise'
      });

      // After generated, you can modify the CSS rules.
      // Change font family and weight. 
      styleSet.textContent = {
         ...styleSet.textContent,
         fontFamily: "'Comic Sans MS', 'Arial', sans-serif",
         fontWeight: 'bold'
      };

    // Set the avatar options. 
     const avatarOptions = {
         botAvatarInitials: 'BF',
         userAvatarInitials: 'WC'
         };

    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({
          token: '<Your Direct Line token>'}),
      styleSet,
      styleOptions: avatarOptions
    }, document.getElementById('webchat'));
    
  </script>
</body>

botAvatarInitials使用屬性來設定 Bot 的虛擬人偶縮寫，該縮寫會出現在控件的左側。 userAvatarInitials使用屬性來設定出現在右側的用戶虛擬人偶縮寫。

botAvatarImage使用和 userAvatarImage 屬性來提供 Bot 和用戶虛擬人偶的影像 URL。控件會顯示這些取代縮寫，如下所示。

const avatarOptions = {
   botAvatarImage: '<URL to your bot avatar image>',
   botAvatarInitials: 'BF',
   userAvatarImage: '<URL to your user avatar image>',
   userAvatarInitials: 'WC'
};

自定義轉譯活動或附件

使用最新版本的網路聊天，您也可以轉譯網路聊天不支援現用的活動或附件。活動與附件轉譯會傳送至可自定義的管線，其模型化為 Redux 中間件。管線具有足夠的彈性，可讓您輕鬆地執行下列工作：

裝飾現有的活動/附件
新增活動/附件
取代現有的活動/附件（或移除它們）
黛西鏈結中間件在一起

將 GitHub 存放庫顯示為附件

例如，如果您想要顯示 GitHub 存放庫卡片的甲板，您可以為 GitHub 存放庫建立新的 React 元件，並將其新增為中間件。下圖和代碼段來自自定義卡片元件範例範例。

當您輸入預設訊息時，輸出如下： sample：github-repository。

github 存放庫附件自定義

如果您輸入協助，您可以取得所有卡片的選擇。這是許多範例之一：

影像附件自定義

import ReactWebChat from 'botframework-webchat';
import ReactDOM from 'react-dom';

// Create a new React component that accept render a GitHub repository attachment
const GitHubRepositoryAttachment = props => (
   <div
      style={{
         fontFamily: "'Calibri', 'Helvetica Neue', Arial, sans-serif",
         margin: 20,
         textAlign: 'center'
      }}
   >
      <svg
         height="64"
         viewBox="0 0 16 16"
         version="1.1"
         width="64"
         aria-hidden="true"
      >
         <path
            fillRule="evenodd"
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
         />
      </svg>
      <p>
         <a
            href={`https://github.com/${encodeURI(props.owner)}/${encodeURI(
               props.repo
            )}`}
            target="_blank"
         >
            {props.owner}/<br />
            {props.repo}
         </a>
      </p>
   </div>
);

// Creating a new middleware pipeline that will render <GitHubRepositoryAttachment> for specific type of attachment
const attachmentMiddleware = () => next => card => {
   switch (card.attachment.contentType) {
      case 'application/vnd.microsoft.botframework.samples.github-repository':
         return (
            <GitHubRepositoryAttachment
               owner={card.attachment.content.owner}
               repo={card.attachment.content.repo}
            />
         );

      default:
         return next(card);
   }
};

ReactDOM.render(
   <ReactWebChat
      // Prepending the new middleware pipeline
      attachmentMiddleware={attachmentMiddleware}
      directLine={window.WebChat.createDirectLine({ token })}
   />,
   document.getElementById('webchat')
);

在此範例中，我們會新增名為 GitHubRepositoryAttachment的新 React 元件：

const GitHubRepositoryAttachment = props => (
   <div
      style={{
         fontFamily: "'Calibri', 'Helvetica Neue', Arial, sans-serif",
         margin: 20,
         textAlign: 'center'
      }}
   >
      <svg
         height="64"
         viewBox="0 0 16 16"
         version="1.1"
         width="64"
         aria-hidden="true"
      >
         <path
            fillRule="evenodd"
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
         />
      </svg>
      <p>
         <a
            href={`https://github.com/${encodeURI(props.owner)}/${encodeURI(
               props.repo
            )}`}
            target="_blank"
         >
            {props.owner}/<br />
            {props.repo}
         </a>
      </p>
   </div>
);

然後，我們會建立中間件，以在 Bot 傳送內容類型 application/vnd.microsoft.botframework.samples.github-repository的附件時轉譯新的 React 元件。否則，它會藉由呼叫 next(card)繼續在中間件上。

const attachmentMiddleware = () => next => card => {
   switch (card.attachment.contentType) {
      case 'application/vnd.microsoft.botframework.samples.github-repository':
         return (
            <GitHubRepositoryAttachment
               owner={card.attachment.content.owner}
               repo={card.attachment.content.repo}
            />
         );

      default:
         return next(card);
   }
};

從 Bot 傳送的活動如下所示：

{
   "type": "message",
   "from": {
      "role": "bot"
   },
   "attachmentLayout": "carousel",
   "attachments": [
      {
         "contentType": "application/vnd.microsoft.botframework.samples.github-repository",
         "content": {
            "owner": "Microsoft",
            "repo": "BotFramework-WebChat"
         }
      },
      {
         "contentType": "application/vnd.microsoft.botframework.samples.github-repository",
         "content": {
            "owner": "Microsoft",
            "repo": "BotFramework-Emulator"
         }
      },
      {
         "contentType": "application/vnd.microsoft.botframework.samples.github-repository",
         "content": {
            "owner": "Microsoft",
            "repo": "BotFramework-DirectLineJS"
         }
      }
   ]
}

共用方式為

自訂網路聊天

將網路聊天整合到您的網站

自定義樣式

設定網路聊天容器的大小

變更聊天泡泡字型和色彩

變更 Bot 和用戶虛擬人偶

自定義轉譯活動或附件

將 GitHub 存放庫顯示為附件

其他資源

共用方式為

自訂 網路聊天

將 網路聊天 整合到您的網站

自定義樣式

設定 網路聊天容器的大小

變更聊天泡泡字型和色彩

變更 Bot 和用戶虛擬人偶

自定義轉譯活動或附件

將 GitHub 存放庫顯示為附件

其他資源

自訂網路聊天

將網路聊天整合到您的網站

設定網路聊天容器的大小