microsoft / microsoft/BotFramework-WebChat

Feature Request: Hide send box input without hiding suggested actions

Open
#2,427 21 comments 13 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

backlog feature-request
Dominant language
HTML
Stars
1.8k
Forks
1.6k
Avg merge
22h 58m
Merged PRs (30d)
2

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the SuggestedActions component and the hideSendBox style option described in the issue, then trace how the SendBox currently controls both. The work is complete when the input can be hidden while suggested actions remain visible and selectable; check the relevant Web Chat behavior with suggested actions present and absent.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.