Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>My Bot</title>
    <link rel="stylesheet" href="style.min.css" />
  </head>
  <body>
    <div>
      <div id="heading">
        <!-- Change the h1 text to change the bot name -->
        <div class="headingFirst">
          <h1 class="chatboth1header">My Bot</h1>
        </div>
        <div class="headingSecond"></div>
      </div>
      <div id="webchat" role="main"></div>
    </div>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script>
      const styleSet = window.WebChat.createStyleSet({
        // Add styleOptions to customize Web Chat canvas
        bubbleBackground: "rgba(0, 0, 255, .1)",
        bubbleFromUserBackground: "rgba(0, 255, 0, .1)",
        rootHeight: "100%",
        rootWidth: "100%",
        backgroundColor: "white",
        hideUploadButton: false,
        userAvatarBackgroundColor: "white",
        botAvatarBackgroundColor: "white",
      });
      // Set the avatar options.
      const avatarOptions = {
        backgroundColor: "white",
        botAvatarBackgroundColor: "rgba(255, 255, 255, 1)",
        // accent: 'rgba(255, 255, 255, 1)',
        botAvatarInitials: "MPID",
        userAvatarInitials: "ME",
      };
      // Add your BOT ID below
      const BOT_ID = "my_bot_id";
      const theURL =
        "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" +
        BOT_ID;

      const directLineTokenString = "directLineToken";

      const getDirectLineToken = async () => {
        if (!sessionStorage) return undefined;

        const now = Date.now();

        let tokenItem = undefined;

        try {
          tokenItem = JSON.parse(sessionStorage.getItem(directLineTokenString));
        } catch (err) {
          console.error("An error occurred: " + err);
        }

        // If there is no token in storage or the token has expired
        if (!tokenItem || (tokenItem && now > tokenItem.expiration)) {
          try {
            const res = await fetch(theURL);
            const result = await res.json();
            const tokenStorageItem = {
              token: result.token,
              expiration: now + result.expires_in * 1000,
            };
            sessionStorage.setItem(
              directLineTokenString,
              JSON.stringify(tokenStorageItem)
            );
            return result.token;
          } catch (err) {
            sessionStorage.removeItem(directLineTokenString);
            console.error("An error occurred: " + err);
            return undefined;
          }
        } else {
          return tokenItem.token;
        }
      };

      (async function () {
        const token = await getDirectLineToken();
        window.WebChat.renderWebChat(
          {
            directLine: window.WebChat.createDirectLine({ token }),
            styleSet,
            store: store,
            styleOptions: styleOptions,
          },
          document.getElementById("webchat")
        );
      })().catch(async (err) => {
        console.error("An error occurred: " + err);
      });
    </script>
  </body>
</html>