microsoft / BotFramework-WebChat

A highly-customizable web-based client for Azure Bot Services.
https://www.botframework.com/
MIT License
1.58k stars 1.53k forks source link

Horizontal conversation UI #4502

Open tvvignesh opened 1 year ago

tvvignesh commented 1 year ago

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

Currently, the webchat scrolls top to bottom for every conversation and this works well. But after feedback from some of our prospects, what we heard is that a left to right scroll would be better for them with one conversation shown in the screen at a time (with previous and next buttons).

Just imagine it like a slider with previous and next buttons.

I was wondering how to implement the same in webchat

Describe the suggestion or request in detail

Ability to have webchat render conversations horizontally one at a time rather than vertically with previous and next buttons (like a slider)

Think of an interface like this where every slide is an adaptive card: image

Describe alternatives you have considered

I looked into this repository: https://github.com/compulim/experiment-horizontal-scroll-into-view/ but I am not clear on how we would implement this for multiple conversations. Also, the slider still shows multiple conversations in the scroll bar which I dont need.

I was also thinking of not using Botframework Webchat library and rather use the adaptive card SDK to directly render the cards and add my own logic - but this is too complicated considering I am using all the hooks which the webchat SDK provides.

Additional context

No response

compulim commented 1 year ago

This is more-or-less wizard style. In other words, using a bot create a wizard. 🤣

Few things:

I think this is unlikely to be build as part of Web Chat because it added some requirements to the bot which would present difficulties for existing bots.

If I have spare time, I would build a sample out of this. Some of our customers did use Web Chat for QnA-style bots. This UX may fit their purpose.

tvvignesh commented 1 year ago

Hmm. I understand. Thanks. Also, here is a sample for you on how we use Webchat and Adaptivecards for candidate assessments: https://chat.convint.ai/chat/?a=FullStackReactandNode

We have a comprehensive UI for recruiters, but this is just what candidates see