CODEWITHSUNDEEP
botframeworkdirect-line-botframeworkweb-chat
Sam Sam
Sam Sam

Reputation: 75

Is There a “Reset” Button Available for the Web Chat?

Out of the box, the default set of buttons of the web chat is a "Send" button and an "Upload File" button. Does the web chat have available a "Reset" button that would end the current conversation and start a new conversation from the beginning for the same user? Is there some configuration or style options that I need to turn on to get and see visually a "Reset" button.

The chat/conversation history needs to stay intact. It should not clear out.

I'm currently using JavaScript to setup the web chat and using direct line channel to talk to my bot. I have made some UI customizations using the botframework-webchat style options. Pls note, there is no iframe involved for the web chat.

Screenshot

var directLineObj = window.WebChat.createDirectLine({

    token: "..."
});

// For additional style options:
// https://github.com/Microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleOptions.js
const styleOptions = {

    ...
};

var options = {

    directLine: directLineObj,
    styleOptions: styleOptions
};

var containerObj = document.getElementById("chatContainer");

var webChatObj = window.WebChat.renderWebChat(options, containerObj);
<div id="chatContainer" class="..."></div>

Upvotes: 1

Views: 1401

Answers (1)

Steven Kanberg
Steven Kanberg

Reputation: 6368

You can do this by using a button (or implementation of your choice) coupled with sending an activity via Web Chat plus the cancel / interrupt component dialog of the 13.core-bot sample (example below uses JS SDK, but is available in the other SDKs).

Web Chat: When the button is clicked, Web Chat dispatches WEB_CHAT/SEND_ACTIVITY that includes the text 'reset'.

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/[email protected]/dist/markdown-it.min.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/runtime.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/dist/react-redux.min.js"></script>
  <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%s;
    }

  </style>
</head>

<body>
  <div id="webchat" role="main"></div>
  <button id='resetBtn' type="button">Reset Dialog</button>

  <script type="text/babel" data-presets="es2015,react,stage-3">
    ( async function () {
      // 'use strict';
      const { ReactDOM: { render }, WebChat: { ReactWebChat } } = window;

      const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => action => {
        return next( action );
      } );

      const res = await fetch( 'http://localhost:3500/directline/token', { method: 'POST' } );
      let { token } = await res.json();

      await render(
        <ReactWebChat
          directLine={await window.WebChat.createDirectLine( {token} )}
          store={store}
        />,
        document.getElementById( 'webchat' )
      );
      document.querySelector( '#webchat > *' ).focus();

      const resetBtn = document.getElementById( 'resetBtn' );
      resetBtn.addEventListener( 'click', ( e ) => {
        e.preventDefault();
        store.dispatch( {
          type: 'WEB_CHAT/SEND_MESSAGE',
          payload: {
            text: `Reset`
          }
        } )
      } )

    } )().catch( err => console.error( err ) );     
  </script>
</body>

</html>

cancelAndHelpDialog.js: When the 'reset' activity is received by the bot, it then calls cancelAllDialogs(true) clearing the stack and returning the bot to the initial dialog.

async interrupt(innerDc) {
  if (innerDc.context && innerDc.context.activity) {
    const { activity } = innerDc.context;
    if (activity.text) {
      const text = activity.text;
      const activityText = text.toLowerCase();
      let message = '';

      switch (activityText) {
        case 'reset': {
          message = 'Request approved: resetting dialog';
          const resetMessage = MessageFactory.text(message, message, InputHints.IgnoringInput);
          resetMessage.channelData = { action: 'dialog_reset' };
          await innerDc.context.sendActivity(resetMessage);
          return await innerDc.cancelAllDialogs(true);
        }
        case 'help':
          case '?': {
            message = 'Show help here';
            await innerDc.context.sendActivity(message, message, InputHints.ExpectingInput);
            return { status: DialogTurnStatus.waiting };
        }
        case 'cancel':
        case 'quit': {
          message = 'Cancelling...';
          await innerDc.context.sendActivity(message, message, InputHints.IgnoringInput);
          return await innerDc.beginDialog(EXIT_DIALOG);
        }
      }
    }
  }
}

This is fairly bare bones and will likely require some 'clean up" to meet your needs, including some sort of response showing the dialog is restarting.

Hope of help!

Upvotes: 3

Related Questions