Added Mobile Responsiveness and Close Button to Chat Window

[amansoni7477030]

1. Added Mobile Responsiveness.
2. Slightly changed the position of the clear button.
3. Added Close Button to Chat Window at the top, following the clear button.
4. When clicking on the chatbot icon in mobile, the chat window now appears in full screen, and the chatbot icon disappears.
5. Removed auto-focus in the chat window input on mobile devices. This change improves the user experience as it prevents the mobile keyboard from obscuring the window, requiring users to repeatedly press "back" to read.
6. Improved responsiveness across all platforms, including Android, iOS, PC, tablet, ensuring consistent performance without any issues.

[toi500]

Wow, this is outstanding, a really fine piece of work here. I can't wait to see this working.

Just to put @HenryHengZJ in context about the auto-focus issue https://github.com/FlowiseAI/FlowiseChatEmbed/issues/132#issuecomment-2142550970

[toi500]

@HenryHengZJ is the new autoFocus option/feature only applicable for non-mobile device, right? Leaving the autoFocus on mobiles OFF by default, correct?

I am asking because I've been researching this for months now, and I can assure you that major players don't use autofocus on mobile apps at all. Chatbot.com is a good example:

Same APP:

autoFocus on desktop:

https://github.com/FlowiseAI/FlowiseChatEmbed/assets/138339291/62570786-5129-4ba0-9026-46f7fbd736f8

No autoFocus on Mobile:

https://github.com/FlowiseAI/FlowiseChatEmbed/assets/138339291/a9dde4bc-02e4-4cd2-9474-e590993a925e

In other words: -if you use 2 input devices like a mouse and keyboard, autofocus is the way to go for chatbots, since if not, you need manually click in the imput field. -If you only use 1 input device (like your hand), autofocus isn't needed and can actually be inconvenient, as @amansoni7477030 pointed out, by obscuring the content of the window.

[amansoni7477030]

Change to px-4 when using full page chatbot

@HenryHengZJ I have made the requested changes. Please review the updates.

[HenryHengZJ]

Added changes to automatically disable focus when its in mobile mode

[toi500]

@amansoni7477030 @HenryHengZJ i really would like to thank you both for your work here.

I think we have now an amazing embedding chatbot app.

Thank you so much 🙌🏼

[amansoni7477030]

@toi500 You're welcome ! ithink there is new issue arrived now chatbot icon is not visible becuase of @HenryHengZJ new commit update logic to detect mobile screen

can you also verify from your side @HenryHengZJ @toi500

[toi500]

@amansoni7477030 same

[amansoni7477030]

Hii @HenryHengZJ @toi500 Chatbot icon is not visible issue has been fixed now check my latest PR #190