CODEWITHSUNDEEP
javascriptc#asp.netbotframeworkchatbot
Muthu mani
Muthu mani

Reputation: 45

how to disable/enable attachment button inside chatbox using javascript in C# bot framework

I have created a Microsoft bot framework using this tutorial. I created a chatbot using this javascript. I need to Enable/Disable the attachment button based on the bot message. My condition is to Enable the attachment button when the bot sends a message to the user to submit the attachment.

Html:

<div id="webchat" role="main"></div>

Script:

<script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

<script>
  // style properties
    var styleOptions = {
        botAvatarInitials: 'Bot',
        bubbleBackground: 'rgba(0, 0, 255, .1)',
        bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
        userAvatarInitials: 'User',
        hideUploadButton: true,  //To hide attachment button
        backgroundColor: "Grey"
    };

   // chatbot 
     window.WebChat.renderWebChat(
     {
        directLine: window.WebChat.createDirectLine({
        token: 'access token'
        }),
        userID: 'YOUR_USER_ID',
        username: 'Web Chat User',
        locale: 'en-US',
        styleOptions
      },
       document.getElementById('webchat'),
    );
    
</script>

Upvotes: 0

Views: 1066

Answers (1)

Steven Kanberg
Steven Kanberg

Reputation: 6393

You can accomplish this by filtering the activities that pass thru Web Chat's store. As you can see below, I first query for the attachment button's elements - there are two, a hidden input field and the button.

Next, I check if the activity has an attachment and if that attachment's contentType matches "application/vnd.microsoft.card.adaptive". If it does, then the attachment input & button is enabled. Otherwise, the attachment input & button is disabled for all other activities.

The whole if statement is wrapped in a time out. This is necessary because the check on the contentType of the attachment will complete before the store has finished rendering the activity resulting in a persistently disabled button. Setting a time out of ~300 ms allows the store to complete its rendering action. You can adjust the time out, but less than ~50 ms and the above will start occurring. Longer than ~500 ms and it will start to be noticeable to users.

Please note, isolating the input & button elements relies on attributes and classes defined by Web Chat. While it is unlikely to be an issue, it's possible those definitions could change in future releases resulting in breaking changes and requiring updates to your code.

const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => action => {
  if ( action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' ) {
    const activity = action.payload?.activity;

    const attachmentBtn = document.querySelector( '[title="Upload file"]' );
    const attachmentInput = document.querySelector( '.webchat__upload-button--file-input' );
    setTimeout(() => {
      if ( activity && activity.attachments) {
        if (activity.attachments[0].contentType === 'application/vnd.microsoft.card.adaptive' ) {
          attachmentBtn.disabled = false;
          attachmentBtn.disabled = false;
        }
      } else {
        attachmentBtn.disabled = true;
        attachmentInput.disabled = true;
      }
    }, 300);
  };
  next( action );
} );

[...]

window.WebChat.renderWebChat(
  {
    directLine: directLine,
    store: store,
  },
  document.getElementById( 'webchat' )
);
document.querySelector( '#webchat > *' ).focus();

Hope of help!

Upvotes: 1

Related Questions