Feature Request: Hide send box input without hiding suggested actions

[tdurnford]

Feature Request

Describe the suggestion or request in detail

At the moment, customers can hide the Send Box through Web Chat's style options; however, the hideSendBox option also hides suggested actions. It would be beneficial to have the ability to hide the side box while still displaying the suggested action so that the user has to select one of the actions to continue the conversation.

The SuggestedActions component would have to be moved outside of the SendBox to accomplish this.

Describe alternatives you have considered

Additional context
Original ask here: https://stackoverflow.com/questions/58116813/while-showing-button-choices-at-that-time-i-need-to-hide-sendbox-in-bot-framewo/

Ideally customers should be able to hide or disable the input field when Web Chat is displaying suggested actions. The code below is functional, but it also hides suggested actions.

const [hideSendBox, setHideSendBox] = useState(false);
const store = createStore(
  {},
  () => next => action => {

    if (action.type === 'DIRECT_LINE/SET_SUGGESTED_ACTIONS') {
      if (action.payload.suggestedActions.length) {
        setHideSendBox(true);
      } else {
        setHideSendBox(false);
      }
    }
    return next(action);
  }
)

return <ReactWebChat directLine={directLine} store={store} styleOptions={{hideSendBox}} />

[Enhancement]

[Edit by @corinagum]
Please add +1 to this thread if this is something you are looking to have available in your version of Web Chat.

[corinagum]

To me it doesn't seem 'right' to have typing indicator and connectivity status inside of the send box, but move suggested actions outside of the send box. Thoughts?

[tdurnford]

I agree that if suggested actions are moved out of the send box we should also move the typing indicator and the connectivity status. Issue #2323 is a DCR to encapsulate the typing indicator and the connectivity status components in a notification center. Does it make sense to also have the notification center include suggest actions and have all three sit in a component above the send box?

[corinagum]

I've had this discussion before with @compulim and we've gone back and forth about whether or not suggested actions should be inside the send box. I think it's logical to be in the sendbox itself and removing it doesn't seem correct to me.

Is there a customer ask for this? If not, I'd say making the switch is lower priority because we don't have users requesting this kind of change.

[tdurnford]

Yes, a customer asked a question on SO about hiding the send box while maintaining Suggested Actions.
https://stackoverflow.com/questions/58116813/while-showing-button-choices-at-that-time-i-need-to-hide-sendbox-in-bot-framewo/

[corinagum]

Alright, sounds good. Let's see what kind of traction we get on this, and go from there.

If anyone is looking for this feature, please add your +1 to this thread so we know that people want this feature.

[arman-g]

+1
Would be good to have this as a flag in the Options so we can use it with CDN too.

[arman-g]

Feature Request
Describe the suggestion or request in detail
At the moment, customers can hide the Send Box through Web Chat's style options; however, the hideSendBox option also hides suggested actions. It would be beneficial to have the ability to hide the side box while still displaying the suggested action so that the user has to select one of the actions to continue the conversation.
The SuggestedActions component would have to be moved outside of the SendBox to accomplish this.
Describe alternatives you have considered

Additional context
Original ask here: https://stackoverflow.com/questions/58116813/while-showing-button-choices-at-that-time-i-need-to-hide-sendbox-in-bot-framewo/

Ideally customers should be able to hide or disable the input field when Web Chat is displaying suggested actions. The code below is functional, but it also hides suggested actions.
const [hideSendBox, setHideSendBox] = useState(false);
const store = createStore(
{},
() => next => action => {

if (action.type === 'DIRECT_LINE/SET_SUGGESTED_ACTIONS') {
  if (action.payload.suggestedActions.length) {
    setHideSendBox(true);
  } else {
    setHideSendBox(false);
  }
}
return next(action);

}
)

return
[Enhancement]
[Edit by @corinagum]
Please add +1 to this thread if this is something you are looking to have available in your version of Web Chat.

Can you please let me know what package should I use for useState and createStore. I am using angular to host webchat? Thank you!

[corinagum]

Hi @arman-g Are you asking whether you should you use CDN or NPM?

createStore is available in both CDN and NPM. If you are using CDN, createStore should be available to you in the Web Chat object on the browser. window.WebChat.createStore....

useState is a React feature, and I believe Web Chat, in our hooks adoption, will not have a function called useState, so I'm not quite sure what you are looking for in this instance. Could you provide more information? If you are wondering whether to use CDN vs React, then using Web Chat hooks will only be available as customization in a React project. This would potentially mean that you have both Angular and React in one application, which I know might not be ideal. However, although we don't have a working sample, I believe the expectation is that having a Web Chat React project inside of an Angular project should work without problems.

[arman-g]

Hi @corinagum thank you for your response. I am using the WebChat CDN inside angular project. I was wondering if I could hide the send input box if a suggestion action is shown not allowing the user to input text but force them to select from the suggestions.
I am trying to test the workaround code above and was not sure where the createStore() and useState() come from. Yes I am able to use window.WebChat.createStore() in the project as you mentioned.
One thing I want to clear out is what you said, are you saying that this workaround will not work with CDN?

[corinagum]

Hi @arman-g, first let me apologize. I said that hooks are not available in CDN but that's not true. Heavier customization like recomposing the UI would require a React project, but using hooks that are already available is achievable in CDN.

Based on this conversation, creating your own components is what you're looking for to achieve the above before this feature is implemented. Take a look at our plain-ui sample for a little more guidance on creating your own components.

I missed the useState in TJ's code. useState is indeed a React feature, so you would need a React Web Chat project to make use of that.

I'm not sure that TJ's code above is a workaround, I think it's just an example of hiding the send box, and how hiding that will also prevent Suggested Actions and Connectivity Status from being visible.

[arman-g]

@corinagum, thank you for the clarification! I was looking for this hook and I am so glad that webchat supports it in CDN. I will defiantly look into plain-ui.

[corinagum]

Please see https://github.com/microsoft/BotFramework-WebChat/tree/master/packages/component/src/hooks to learn more about what hooks are currently available (in master bits). Hooks are not yet released in latest on CDN, but you can look into MyGet to test latest bits.

Please see our documentation on pointing to our MyGet feed for latest bits.
Urg, sorry @arman-g. you are using CDN. To build latest bits from our repo, following Contributing guidelines, then after you run npm run build, you can use the webchat.js files in the packages/bundle/lib folder.

[sw353552]

Is there an update on this yet? 'hideSendBox' flag is also hiding the suggested actions.

[corinagum]

No update yet :)

[sw353552]

Is there a workaround for this?

[arman-g]

@sw353552 I hide the sendbox with jQuery on the host app. There are three very important middlewares that are not documented anywhere which you could possibly use for this. I use CDN and those middlewares are essential for me to interact with chatbot activity. Below is the list of the middlewares:

• activityMiddleware

• cardActionMiddleware

• attachmentMiddleware

my implementation below using attachmentMiddleware:

const attachmentMiddleware = () => next => card => {

      if (card.attachment.contentType === 'application/vnd.microsoft.card.adaptive' ||
        card.attachment.contentType === 'application/vnd.microsoft.card.hero') {
        $('div.main').hide();
      } else if (card.attachment.contentType === 'text/markdown' && card.activity.from.role === 'bot') {
        $('div.main').show();
      }

      return next(card);
    };

this.webChat.renderWebChat(
      {
        local: 'en-US',
        userID: 'USER_ID',
        directLine: directLine,
        styleOptions: {
          botAvatarImage: './bot.png',
          botAvatarInitials: 'BF',
          botAvatarBackgroundColor: '#fff',

          bubbleNubOffset: 'top',
          bubbleNubSize: 10,
          bubbleBackground: '#F0F0F0',
          bubbleTextColor: 'Black',
          bubbleBorderRadius: 10,

          bubbleFromUserNubOffset: 'top',
          bubbleFromUserNubSize: 10,
          bubbleFromUserBorderRadius: 10,
          bubbleFromUserBackground: '#4d88ff',
          bubbleFromUserTextColor: 'White',
          userAvatarBackgroundColor: '#4d88ff',
          userAvatarInitials: 'You',
          //userAvatarImage: "https://github.com/compulim.png?size=64",

          typingAnimationDuration: 60000,

          hideUploadButton: true,
        },
        //store: store,
        attachmentMiddleware: attachmentMiddleware,
        //activityMiddleware: activityMiddleware,
        //cardActionMiddleware: cardActionMiddleware
      },
      this.botWindowElement.nativeElement
    );

[HesselWellema]

+1

[vokecodes]

+1

[samthrusha123]

+1