dostosowywanie czat internetowy

Artykuł
03/08/2023

DOTYCZY: Zestaw SDK w wersji 4

W tym artykule szczegółowo opisano sposób dostosowywania przykładów czat internetowy, aby dopasować je do bota.

Integrowanie czat internetowy z witryną internetową

W omówieniu czat internetowy opisano sposób integrowania kontrolki czat internetowy z witryną internetową.

Dostosowywanie stylów

Kontrolka czat internetowy udostępnia zaawansowane opcje dostosowywania: możesz zmieniać kolory, rozmiary, umieszczanie elementów, dodawać elementy niestandardowe i wchodzić w interakcje ze stroną internetową hostingu. Poniżej przedstawiono kilka przykładów dostosowywania interfejsu użytkownika czat internetowy.

Pełną listę wszystkich ustawień, które można zmodyfikować w czat internetowy w StyleOptions.ts pliku. Wartości domyślne dla czat internetowy można znaleźć w pliku defaultStyleOptions.ts

Te ustawienia spowodują wygenerowanie zestawu stylów, który jest zestawem reguł CSS rozszerzonych o efektowność. Pełną listę stylów CSS wygenerowanych w zestawie stylów można znaleźć w createStyleSet.ts pliku .

Ustawianie rozmiaru kontenera czat internetowy

Aby dostosować rozmiar kontenera czat internetowy, użyj właściwości i rootWidthzestawurootHeight stylów. Poniższy przykład ustawia również kolor tła kontenera, aby pokazać rozmiar kontrolera.

<!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>

Ustaw czat internetowy z wysokością katalogu głównego i szerokością katalogu głównego

Ostrzeżenie

Na stronie internetowej hostingu nie używaj klucza Direct Line w zasięgu wzroku. Użyj tokenu zgodnie z opisem w sekcji Opcja osadzania w środowisku produkcyjnym, aby połączyć bota z czat internetowy.

Zmienianie czcionki i koloru bąbelka czatu

Możesz dostosować kolor tła i czcionki używane w bąbelkach czatu, aby dopasować styl strony internetowej obsługującej kontrolkę czat internetowy. Poniższy fragment kodu pokazuje, jak to zrobić.

Ustawianie czcionki i koloru bąbelków

<!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>

Zmienianie awatarów bota i użytkownika

czat internetowy obsługuje awatary, które można dostosować, ustawiając botAvatarInitials i userAvatarInitials we styleOptions właściwości.

<!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 Użyj właściwości , aby ustawić inicjały awatara dla bota, który pojawia się po lewej stronie kontrolki. userAvatarInitials Użyj właściwości , aby ustawić inicjały awatara dla użytkownika, które są wyświetlane po prawej stronie.

Użyj właściwości botAvatarImage i userAvatarImage , aby podać adresy URL obrazów dla awatarów bota i użytkownika. Kontrolka wyświetli je zamiast inicjałów, jak pokazano poniżej.

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

Niestandardowe działanie renderowania lub załącznik

Najnowsza wersja czat internetowy umożliwia również renderowanie działań lub załączników, które czat internetowy nie obsługują gotowej wersji. Działania i załączniki renderowane są wysyłane przez dostosowywalny potok, który jest modelowany po użyciu oprogramowania pośredniczącego Redux. Potok jest wystarczająco elastyczny, aby można było łatwo wykonywać następujące zadania:

Dekorowanie istniejących działań/załączników
Dodawanie nowych działań/załączników
Zastąp istniejące działania/załączniki (lub usuń je)
Oprogramowanie pośredniczące łańcucha daisy razem

Wyświetlanie repozytorium GitHub jako załącznika

Jeśli na przykład chcesz wyświetlić talii kart repozytorium GitHub, możesz utworzyć nowy składnik React dla repozytorium GitHub i dodać go jako oprogramowanie pośredniczące. Poniższy obraz i fragmenty kodu pochodzą z przykładowego przykładu customization-card-components.

Poniżej przedstawiono dane wyjściowe po wprowadzeniu komunikatu domyślnego: sample:github-repository.

niestandardowe załączniki repozytorium github

Jeśli wprowadzisz pomoc , uzyskasz wybór wszystkich kart, które możesz wybrać. Jest to jeden z wielu przykładów:

niestandardowy załącznik obrazu

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')
);

W tym przykładzie dodajemy nowy składnik React o nazwie GitHubRepositoryAttachment:

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

Następnie utworzymy oprogramowanie pośredniczące, które będzie renderować nowy składnik React, gdy bot wyśle załącznik typu application/vnd.microsoft.botframework.samples.github-repositoryzawartości . W przeciwnym razie oprogramowanie pośredniczące będzie kontynuowane przez wywołanie metody 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);
   }
};

Działanie wysyłane z bota wygląda następująco:

{
   "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"
         }
      }
   ]
}

Share via