Added Mobile Responsiveness and Close Button to Chat Window #183
Conversation
amansoni7477030
commented
Jun 5, 2024
amansoni7477030
commented
- Added Mobile Responsiveness.
- Slightly changed the position of the clear button.
- Added Close Button to Chat Window at the top, following the clear button.
- When clicking on the chatbot icon in mobile, the chat window now appears in full screen, and the chatbot icon disappears.
- 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.
- Improved responsiveness across all platforms, including Android, iOS, PC, tablet, ensuring consistent performance without any issues.
|
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 #132 (comment) |
| @@ -34,7 +34,7 @@ export const DeleteButton = (props: SendButtonProps) => { | |||
| disabled={props.isDisabled || props.isLoading} | |||
| {...props} | |||
| class={ | |||
| 'py-2 px-4 justify-center font-semibold text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 chatbot-button ' + | |||
| 'py-2 px-12 justify-center font-semibold text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 chatbot-button ' + | |||
There was a problem hiding this comment.
when using full page chatbot, need to change to px-4, otherwise we see a big space:
|
@HenryHengZJ is the new 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: Recording.2024-06-12.145358.mp4No autoFocus on Mobile: Record_2024-06-12-14-30-30.mp4In other words: |
@HenryHengZJ I have made the requested changes. Please review the updates. |
|
Added changes to automatically disable focus when its in mobile mode |
|
@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 🙌🏼 |
|
@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 |
|
@amansoni7477030 same 
|
|
Hii @HenryHengZJ @toi500 Chatbot icon is not visible issue has been fixed now check my latest PR #190 |
