Fixing border-radius on mobile & hiding close button on desktop

[toi500]

1. Fixed a minor CSS misconfiguration with the left and right top borders on mobile

--

2. Hid the close button on desktop and made it visible only when needed on mobile (full screen)

https://github.com/FlowiseAI/FlowiseChatEmbed/assets/138339291/f24c2b22-6437-4f89-a12c-a2592331653e

3. No conflicts with the full-screen chat embedded

   

4. Live demo pop-up: https://flowise-test03.surge.sh/ full-screen: https://flowise-test03.surge.sh/index-full

[amansoni7477030]

@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.

[toi500]

@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:

1. Preserve the minimalist and default view of the chatbot.
2. Limit the chances of accidentally deleting your history by clicking the wrong button. Now, to use properly a RAG, the chat history is quite important for users.

[amansoni7477030]

@toi500 check : https://www.chatbase.co/ https://www.botsonic.com/ https://devrev.ai/

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.

[toi500]

@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 chat history deletion function, so there's no way for users to accidentally delete their history by closing it.

And this is the main reason I made this PR:

• Limit the chances of accidentally deleting your history by clicking the wrong button. Now, to use properly a RAG, the chat history is quite important for users.

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.

[amansoni7477030]

@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.

[toi500]

@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 :wink:

[amansoni7477030]

@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

[amansoni7477030]

Hi @toi500 @HenryHengZJ, what do you think about the feature with the three dots containing extra options? Check below screenshot:

[amansoni7477030]

Hii @HenryHengZJ can you please also review #192 this pull request

[HenryHengZJ]

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.

[HenryHengZJ]

the close button is lil bit off in my opinion, not coming from this PR:

[toi500]

@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.