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

(0) Share

Report

Posted on by pskateel-008

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?

Categories:

Bot extensibility

I have the same question (0)

All responses (4)

Answers (0)

CU22081450-0 Most Valuable Professional on at

Like (0)

Report

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.

Was this reply helpful? Yes No
pskateel-008 4 on at

Like (0)

Report

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

Was this reply helpful? Yes No
adilei on at

Like (0)

Report

@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.

Was this reply helpful? Yes No
pskateel-008 4 on at

Like (0)

Report

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" />

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

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

Was this reply helpful? Yes No