Hi I am new to Microsoft's Bot Framework, pardon me for my questions.
I was trying out to change the styling for the chatbots and I came upon an issue where I was not able to disable my upload button via styleSet.
const styleOptions = {
hideUploadButton: true,
bubbleBackground: "red",
bubbleBorderStyle: "solid",
bubbleBorderRadius: "10px",
bubbleFromUserBackground: "#5ce9ff",
bubbleFromUserBorderRadius: "10px",
groupTimeStamp: 3000,
emojiSet: true,
timestampFormat: 'relative',
timestampColor: "red",
};The above code work perfectly normal, however as I was trying to change the background image of the chatbots I assume I would need to pass the styleOptions through styleSet and that is where everything else works normally instead of the upload button despite me setting it to true.
const styleOptions = {
hideUploadButton: true,
bubbleBackground: "red",
bubbleBorderStyle: "solid",
bubbleBorderRadius: "10px",
bubbleFromUserBackground: "#5ce9ff",
bubbleFromUserBorderRadius: "10px",
groupTimeStamp: 3000,
emojiSet: true,
timestampFormat: 'relative',
timestampColor: "red",
};
const styleSet = createStyleSet({
...styleOptions,
});
styleSet.activities = {
...styleSet.activities,
backgroundImage:
"url('https://i.pinimg.com/originals/79/5c/ab/795cabc4647f73b365e2e6eabd0f34dc.png')",
};
// render webchat
function renderWebChat(token, userId, enableWSS) {
console.log("starting webchat");
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: token,
// domain: '//' + window.location.host,
domain:
"https://bot-web-connector-dot-anna-dev-bot-services.df.r.appspot.com",
webSocket: !!enableWSS,
}),
styleSet,
store: store,
userID: userId,
username: "You",
locale: navigator.language || "en-SG",
},
document.getElementById("webchat")
);
} I am not sure why it would not work out when I implement my code this way, could anyone advise me on my mistakes.
It seems there is a small bug with styleOptions, at the moment. In the mean time, you can do the following to achieve hiding the upload button.
styleSet.uploadButton = {
...styleSet.uploadButton,
display:
"none",
};
Hope of help!
Thanks for helping out, it worked well for me. I actually did it through another method by trying to pass the whole styleOptions in the renderWebChat() below styleSet and it kinda worked too. Nonetheless thanks for helping out so much!