You’re offline. This is a read only version of the page.
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.
but in custom canvas implementation it is not present. what will be the html code to enable it?
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>
@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.
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.
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.
Share
Report
All responses (
Answers (
