Fix #1835 to verical stacking for SuggestedActions

[spyip]

Fixes #1835 to verical stacking for SuggestedActions

Changelog Entry

Added

• Added suggestedActionLayout to defaultStyleOptions, by @spyip, in PR #2596

Description

Added 'stacked' layout to suggested-actions

Specific Changes

---

• Testing Added

[coveralls]

Coverage increased (+0.08%) to 64.166% when pulling 0b703bf on spyip:fix-1835 into 3fe44cd on microsoft:master.

[corinagum]

@compulim could you review? Thanks :)

[corinagum]

@spyip could you look at merge conflicts? Sorry :(

[corinagum]

@spyip, one more thing, could you run npm run eslint and fix the error? After that we'll FINALLY get this merged in. Thanks for all your help <3

[anishjaindev]

Is this change already in production?
We tried embedding this option, but the suggestedActions still display in carousel.
Use the below cdn link for webchat js.

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

window.WebChat.renderWebChat({
directLine: botConn,
styleOptions: {
rootHeight: '100%',
rootWidth: '100%',
hideUploadButton: true,
botAvatarImage: '/images/logo.png',
botAvatarBackgroundColor: null,
suggestedActionBorder: 'solid 2px #D90A07',
suggestedActionTextColor: 'blue',
suggestedActionHeight: 30,
suggestedActionLayout: 'stacked',
bubbleBackground: '#D90A07',
bubbleTextColor: 'white',
bubbleFromUserBackground: 'black',
bubbleFromUserTextColor: 'white',
suggestedActionBorderRadius: 10,
bubbleFromUserBorderRadius: 10,
bubbleBorderRadius: 10,
bubbleMinHeight: 30,
sendBoxButtonColor: '#D90A07',
transcriptOverlayButtonColor: '#D90A07',
sendBoxTextWrap: true,
sendBoxHeight: 50,
avatarSize: 25,
timestampFormat: 'absolute'
}
}, document.getElementById('webchat'));

Could you please suggest why this is not working?

[compulim]

@anishjaindev the change is not in production yet. We are planning to ship the next release before mid-December.

If you want to try out the fix with a development build, you can build webchat.js by following steps on our CONTRIBUTING.md. 😉

[markbosshard]

can you just provide a screenshot what it will look like? like most people I suppose, we would like to have the buttons only using new lines when there is not enough space on the old line. Will stacked do that behaviour, or will it act differently? See this image for what I would like to have as a behaviour, and in my opinion clearly is the most user-friendly:

[corinagum]

Please see the test images in the PR. Your example is horizontal with line breaks - the changes that @spyip has incorporated provide a vertical stacking for the suggested actions.

[markbosshard]

That sounds very promising to me. Can you tell me, how to do your mentioned "horizontal with linebreaks"? Thanks a lot.

[anishjaindev]

Yea, if "horizontal with line breaks" is achievable, could you please suggest what is the hack for that? It does look to be good alternative.

[corinagum]

horizontal with line breaks is not currently supported on Web Chat. Since there are already two of you looking for this feature, I recommend filing a feature request on our repo and continuing discussion there. :)

[anishjaindev]

I could do small hack for showing suggestion options in "horizontal with line breaks" using the below css workaround. But would like to have some standard approach to achieve the same.

.css-nil > div > * > ul {
flex-wrap: wrap;
font-size: small;
}

.css-nil > div > * > ul > li {
padding: 0px !important;
}