Microsoft BotFrameWork styleSet with hideUploadButton

Question

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.

Answer 1

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!