Fixing border-radius on mobile & hiding close button on desktop #194
Conversation
|
@toi500 I think it's not a good idea to hide the close button on desktop because some users don't know how to actually close the chatbot if they don't see a close button. A good example of this is available here: https://www.chatbase.co/. In this example, the chatbot can be closed by clicking on the icon as well as the close button. |
|
@amansoni7477030 I get your point but I have never encountered a user who asked here in Flowise or anywhere else how to close the chatbot after opening it by clicking the chatbot button. It is quite intuitive and the way other main players do it. The reasons for the change are as follows:
|
|
@toi500 check : This are some major chatbot service providers they all provoide a functionality for closing bot from both clicking on the icon as well as the close button. |
|
@amansoni7477030 my friend, I already told I got your point. I could also provide a list of other chatbot players that do not use it, but what is the point? But since you've already brought up some of them, Botonic (https://www.botsonic.com/) and DevRev (https://devrev.ai/) don't have a And this is the main reason I made this PR:
If @HenryHengZJ (or any other member of the team) thinks this change is unncesary, I have no problem to close this PR, or bad feelings about it either. I just think is a good chage and wanted to share it. |
|
@toi500 I have no issue with this PR; I was just sharing my opinion on it. I think we should wait and let @HenryHengZJ decide what he wants for this change. |
We can at least agree we both want the best possible embbed chatbot in flowise 😉 |
Yes, thats what i want |
|
Hi @toi500 @HenryHengZJ, what do you think about the feature with the three dots containing extra options?
|
| } | ||
|
|
||
| @media (min-width: 640px) { | ||
|
|
||
| .py-2.pr-3.absolute.top-0.right-\[-8px\].m-\[6px\] { |
There was a problem hiding this comment.
i think if we want to hide it, it should be done on the component level, not css. beacuse .py-2.pr-3.absolute.top-0.right-\[-8px\].m-\[6px\] { <- this will not work once we change the style of that button
There was a problem hiding this comment.
I agree. This level of specificity only works well when you are cooking your own web.js for a specific project.
|
Hii @HenryHengZJ can you please also review #192 this pull request |
|
also thank you guys so much for the contribution! I personally dont have preference. I dont think it matters much to end user as well. If I have to pick one, for consistency, I suppose we can leave it there. |
| } | ||
|
|
||
| .chatbot-button { | ||
| padding-right: 12px !important; |
There was a problem hiding this comment.
why do we need this? do you have a screenshot of the differences?
There was a problem hiding this comment.
This was a change I had to intruduce after seeing that the items (clear and close) does not share a flex container. So now the clear botton has a fixed padding-right: 48px, resulting: #183 (comment) if you elimine the close botton.
|
the close button is lil bit off in my opinion, not coming from this PR: |
|
@HenryHengZJ after your feedback, I am going to close this PR as it is unnecessary. Me (and any other educated user in the matter) can always make these sorts of changes in our own custom web.js anyway. |
top borderson mobile--
close buttonon desktop and made it visible only when needed on mobile (full screen)0002.mp4
pop-up: https://flowise-test03.surge.sh/
full-screen: https://flowise-test03.surge.sh/index-full