Skip to main content

Notifications

Power Platform Community / Forums / Bot Extensibility / how to add restart con...
Bot Extensibility
Unanswered

how to add restart conversation in canvas using the custom canvas implementation, which is already present in normal chatbot, but doesn't appear in custom canvas

Posted on by 4

how to add restart conversation in canvas using the custom canvas implementation, which is already present in normal chatbot, but doesn't appear in custom canvas

 

Below is the screenshot  of chatbot without custom canvas and it has by default restart conversation option at top right corner.

pskateel008_0-1709044584780.png

but in custom canvas implementation it is not present. what will be the html code to enable it?

 

pskateel008_1-1709044601631.png

 

  • pskateel-008 Profile Picture
    pskateel-008 4 on at
    Re: how to add restart conversation in canvas using the custom canvas implementation, which is already present in normal chatbot, but doesn't appear in custom canvas

    Hi @renatoromao  Thank you for the reference doc, i tried many times,but in the code i couldnt find how can i post a message or event back to my chatbot topics to start a conversations. in the below code it was not specified how it will post a message back to topics.

     

    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    <title>Web Chat: Decorate bot activity with upvote and downvote buttons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--
    For simplicity and code clarity, we are using Babel and React from unpkg.com.
    -->
    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-redux@7.1.0/dist/react-redux.min.js"></script>
    <!--
    This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to using Web Chat's latest bits:
    https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
    -->
    <script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
    html,
    body {
    height: 100%;
    }

    body {
    margin: 0;
    }

    #webchat {
    height: 100%;
    width: 100%;
    }

    .botActivityDecorator {
    min-height: 60px;
    position: relative;
    }

    .botActivityDecorator .botActivityDecorator__content {
    padding-left: 40px;
    }

    .botActivityDecorator .botActivityDecorator__buttonBar {
    list-style-type: none;
    margin: 0 0 0 10px;
    padding: 0;
    position: absolute;
    }

    .botActivityDecorator .botActivityDecorator__buttonBar .botActivityDecorator__button {
    background: White;
    border: solid 1px #e6e6e6;
    margin-bottom: 2px;
    padding: 2px 5px 5px;
    }
    </style>
    </head>

    <body>
    <div id="webchat" role="main"></div>
    <script type="text/babel" data-presets="es2015,react,stage-3">
    (async function () {
    'use strict';

    // In this demo, we are using Direct Line token from MockBot.
    // Your client code must provide either a secret or a token to talk to your bot.
    // Tokens are more secure. To learn about the differences between secrets and tokens
    // and to understand the risks associated with using secrets, visit https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0

    const {
    hooks: { usePostActivity },
    ReactWebChat
    } = window.WebChat;

    const { useCallback } = window.React;

    const BotActivityDecorator = ({ activityID, children }) => {
    const postActivity = usePostActivity();

    const addMessageReaction = helpful => {
    postActivity({
    type: 'messageReaction',
    reactionsAdded: [{ type: helpful === 1 ? 'ThumbsUp' : 'ThumbsDown' }],
    replyToId: activityID
    });
    };

    const handleDownvoteButton = useCallback(() => {
    addMessageReaction(-1);
    }, [activityID, postActivity]);

    const handleUpvoteButton = useCallback(() => {
    addMessageReaction(1);
    }, [activityID, postActivity]);

    return (
    <div className="botActivityDecorator">
    <ul className="botActivityDecorator__buttonBar">
    <li>
    <button className="botActivityDecorator__button" onClick={handleUpvoteButton}>
    👍
    </button>
    </li>
    <li>
    <button className="botActivityDecorator__button" onClick={handleDownvoteButton}>
    👎
    </button>
    </li>
    </ul>
    <div className="botActivityDecorator__content">{children}</div>
    </div>
    );
    };

    const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
    const { token } = await res.json();
    const activityMiddleware = () => next => (...setupArgs) => {
    const [card] = setupArgs;

    if (card.activity.type === 'messageReaction') {
    // Currently, Web Chat does not handle "messageReaction" activity and will show a warning in console log as it is an unknown activity.
    // In this sample, we will disable the rendering of "messageReaction" activity, so the warning is not shown.
    return false;
    } else if (card.activity.from.role === 'bot') {
    return (...renderArgs) => (
    <BotActivityDecorator key={card.activity.id} activityID={card.activity.id}>
    {next(...setupArgs)(...renderArgs)}
    </BotActivityDecorator>
    );
    }

    return next(...setupArgs);
    };

    window.ReactDOM.render(
    <ReactWebChat
    activityMiddleware={activityMiddleware}
    directLine={window.WebChat.createDirectLine({ token })}
    />,
    document.getElementById('webchat')
    );

    document.querySelector('#webchat > *').focus();
    })().catch(err => console.error(err));
    </script>
    </body>
    </html>

     

  • adilei Profile Picture
    adilei on at
    Re: how to add restart conversation in canvas using the custom canvas implementation, which is already present in normal chatbot, but doesn't appear in custom canvas

    @pskateel-008 this would be a good place to start: BotFramework-WebChat/samples/05.custom-components/d.reaction-buttons/index.html at main · microsoft/BotFramework-WebChat (github.com)

     

    In this sample, you can see that reaction buttons are used to post an activity. You can create a "reload" button and post a message or an event (both an activity) that would restart the conversation.

  • pskateel-008 Profile Picture
    pskateel-008 4 on at
    Re: how to add restart conversation in canvas using the custom canvas implementation, which is already present in normal chatbot, but doesn't appear in custom canvas

    Hi @renatoromao 

     

    Thank you for the response, I checked lot of documentations and blogs but i couldn't find anything on how can we reset the conversation on button click , if there is any related documentation or CSS or JS scripts that will help to reset conversation when button is clicked?

     

    Below is the current code i have written.

     

    <!DOCTYPE html>
    <html>
      <head>
        <title>My Bot</title>
        <style>
          html,
          body {
            height: 100%;
          }
     
          body {
            margin: 0;
          }
     
          h1 {
            color: whitesmoke;
            font-family: Segoe UI;
            font-size: 16px;
            line-height: 20px;
            margin: 0;
            padding: 0 20px;
          }
     
     
     
          #webchat {
            height: calc(100% - 50px);
            overflow: hidden;
            position: fixed;
            top: 50px;
            width: 100%;
          }
        </style>
      <meta></head>
      <body onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">
        <div>
          <div id="banner">
            <h1></h1>
          </div>
          <div id="webchat" role="main"></div>
        </div>
        <script crossorigin="anonymous" 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",
            suggestedActionLayout: 'stacked'
          });

          styleSet.textContent = {
           ...styleSet.textContent,
           fontFamily: "'Comic Sans MS', 'Arial', sans-serif",
           fontWeight: 'bold'
        };

      // Set the avatar options.
       const avatarOptions = {
          accent: '#0079bb',
            botAvatarBackgroundColor: '#6D31A2',
            botAvatarImage: '',
            botAvatarInitials: 'BT',
     
            hideUploadButton: true,
            botAvatarBackground: '#6D31A2',
            userAvatarBackground: '#6D31A2',
            suggestedActionLayout: 'stacked',
           userAvatarInitials: 'WC'
           };

       
          // Add your BOT ID below
          const BOT_ID = "my_bot_id";
          const theURL =" ****"

          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, styleOptions: avatarOptions
              },
              document.getElementById("webchat")
            );
          })().catch(async (err) => {
            console.error("An error occurred: " + err);
          });
        </script>
      </body>
    </html>
  • renatoromao Profile Picture
    renatoromao 6,459 on at
    Re: how to add restart conversation in canvas using the custom canvas implementation, which is already present in normal chatbot, but doesn't appear in custom canvas

    Hi @pskateel-008 ,

     

    Correct, you must customise this button otherwise will not appear in this page.

     

    You can implement a button manually via CSS or JS, and when the button is pressed, you can send a message to bot with "start over" message. This will trigger the Reset Conversatiion topic.

Helpful resources

Quick Links

Exciting News for Copilot Studio Communi…

Get ready to experience a whole new level of engagement with the Copilot Studio…

Celebrating the May Super User of the…

LaurensM is an exceptional contributor to the Power Platform Community…

Check out the Copilot Studio Cookbook…

We are excited to announce our new Copilot Cookbook Gallery in the Community…

Leaderboard

#1
renatoromao Profile Picture

renatoromao 6,459

#2
Pstork1 Profile Picture

Pstork1 1,997

#3
Expiscornovus Profile Picture

Expiscornovus 1,708

Leaderboard

Featured topics