Botframework-webchat: Show suggested actions horizontally with line-break

[HesselWellema]

Stacking the suggested actions takes up to much real estate. Most efficient way to show multiple suggested actions is horizontally with line-breaks with the option (nice to have) to align right, middle or center.
Good example sceenshot is in https://github.com/microsoft/BotFramework-WebChat/pull/2596

[compulim]

Looks like a suggestion for a new suggested actions layout. We have "carousel" and "stacked" today. This one is "flow" layout.

[keshansandeepa]

@compulim Any Update regarding this ? ,
In stacked option can't we make it align left ? so suggestions all wrap like this ??

[gtejeda]

+1 on the need for flow layout (or a workaround please)

[HesselWellema]

Adding a 'flow' layout in stead of carousel will also allow for styling on :hover of a suggested action resulting in a more pleasant user experience.

[compulim]

Looks like quite some votes.

Will bring this one up on our next planning meeting. Next vehicle is May, then Aug.

[kushalbhabra]

Can we have also have a option for suggested actions to stay relative just below the last message from bot.

Currently the suggested actions are sticky and take up permanent space if user scrolls up.

Could you suggest a fix for this?

[kavyashreeh22]

https://github.com/microsoft/BotFramework-WebChat/issues/2745#issuecomment-570126555

is this feature introduced?

[SeanDarlingBiomni]

Is there any plans to introduce this feature? It is quite common to see in other chat components. The webchat component currently has terrible UX if there are too many suggested actions but this feature would solve it! Thanks.

[sam-sam-med]

would it be possible to also add the ability to configure, if the text of the buttons get too long, be able to word wrap?

[keshansandeepa]

@sam-sam-med You can do it from Css trick for right now

[sam-sam-med]

@keshansandeepa I was hoping there be something out-of-the-box that can do this without having to use custom css. the custom css is sort of like a workaround to get the text to word wrap.

[corinagum]

@sam-sam-med Could you file a new feature-request and add that link to this conversation? I think button word wrap is a good option to have, but due to time limitations I'm not sure compulim would be able to add that to this change.

[HesselWellema]

Hi team. What happened with this feature request? Do you still plan to implement it or should I stick with custom css for now?

[sam-sam-med]

hi @corinagum , how do I file a new feature-request ? i've never done one on github before. thank you.

[corinagum]

@HesselWellema this item is still high priority on our list. It has been moved to our next milestone.

@sam-sam-med Please see the GitHub tutorial: https://docs.github.com/en/free-pro-team@latest/github/managing-your-work-on-github/creating-an-issue

[sam-sam-med]

hi @corinagum , thank you for the link to the info on creating an issue. i have just created issue 3562.

[HesselWellema]

Good luck with this one @compulim 👍