Botframework-webchat: Request for Configurable Option to Word Wrap Text of Suggested Action Buttons

[sam-sam-med]

Feature Request

Is your feature request related to a problem? Please describe.

The feature request being requested is related to a problem. The current problem is that when the text for the suggested action buttons are long, the text does not word wrap. The text is cut off instead. The user is not able to read the full text of the suggested action buttons.

Describe the suggestion or request in detail

Would like to have an out-of-the-box configurable option where we can turn on and off the word wrap of text of suggested action buttons. This way, when the word wrap is turned on, the user is able to read the full text of the suggested action buttons.

Describe alternatives you have considered

At the moment, the only alternative to making the word wrap happen is to use custom css. But this is only a workaround/band-aid to the issue. The underlying problem is that there isn't an out-of-the-box configurable option to do this. To word wrap the text of suggested action buttons, we need to do a little extra, manual work to make it happen.

Additional context

Screenshot:

[corinagum]

Thanks for filing this issue! I've added the feature request label. If any one else would like this feature, please thumbsup the original comment above.

[corinagum]

Quick note, @sam-sam-med posted a screencap of Adaptive Cards (which is not Web Chat's domain), but this change is intended for Web Chat's Suggested Actions buttons only.

[HuaTang92]

Hi @corinagum, this is the exact same issue I'm also facing with - text in suggested actions is cut-off when too long. And I'm happy to see it's been moved to in progress recently. If possible, could you also share me the ETA of it? Thank you.

[corinagum]

Hi @HuaTang92. Currently there is no official ETA. I was offline for a few weeks, so I did not add progress to this work item. Web Chat team's planning meeting will most likely be happening soon, after which more information will be available.

[corinagum]

Per discussion with compulim: adding needs-team-discussion to verify if we should have design meeting -- word wrap on buttons is not very common as a default feature

• This would affect flow layout of SA - is word wrap in flow layout possible?
  
  
  
  • height of buttons on the same line may be different.
  
  

[compulim]

Some draw ups for 3 layouts:

I am unsure if it is technically possible in flow layout. But if it works, it should looks like as in the draw up. But IMO, it looks weird on flow layout. So I recommend only on stacked layout.

[corinagum]

@Quirinevwm Do you have feedback on this request? 🙂

[Quirinevwm]

@corinagum sure! As scribbled in the overview: 'flow' does look weird when content for actions differ in length. If they are more similar the flow experience is better. It's just since we don't' control any content our end users put in let's go for 'stacked'.

From a design perspective, I actually like that the 'bug' now highlights the essence for the content to be short for the action :) Aside we should be able to make this experience nicer. Suggestions for stacked:

• Multi line of max 2 lines (max character count). If we make it possible to put in large chunks of text, the actions start to look more like cards.. The double width action (2 lines) really feels like the max to mimic a button.
• Whenever the max character count then overrides 2 lines (the text is still cut off) can we rely on hover (canvas specific) to show the ending of the line of text.

[Quirinevwm]

Ps. I do think the way forward could be 'Flow' as conversation designers/content creators get more specific on making the 'actions' short in content :)

[corinagum]

@Quirinevwm to make sure I understand,

• Only implement word wrapping on SA buttons for stacked layout
• Max char count for all SA buttons
  
  
  
  • (What should this max char count be?)
    
    
    
    
    
    • Investigate SA buttons char max length
    
    
    
  
  
• Investigate tooltip on hover for extra long buttons
  
  
  
  • Without having looked into it I'm concerned this will not be trivial, but I'll report back
  
  
• (Based on PS): Continue to encourage bot developers to use short text names for SA buttons?

Please let me know if I got anything wrong 😆

[Quirinevwm]

@corinagum yes!
Just for stacked: only way that works with wrapping
for the max character count, I propose to start with #25 or #20 - then we can explore together if you've mocked it up?

• main goal, encourage devs to go for 'short content on SA action buttons'
  _Bit of guidance:_ Rule of thumb to use a verb phrase for the title of a push button. If you need more than 20-25 characters it likely that the experience for the user will be affected (especially if you include multiple buttons). Also by hiding in the tool tip is not the recommended experience.

[HesselWellema]

• Only implement word wrapping on SA buttons for stacked layout

50c from a 'customer'. Since one is already trying to free up as much real estate as possible when selecting the flow layout, you are safe to assume that the length of the text on the button (the CTA) is already as short as possible. So it makes sense to not word-wrap in flow layout.

[corinagum]

@HesselWellema thanks for the feedback! We've had tons of differing opinions on this topic so it's good to see alignment with the decisions we receive from the designers. Overall we strongly believe that buttons should always be a short as possible, with necessary context added with the activity. I'll be documenting this in our PR