FlowiseAI / FlowiseChatEmbed

317 stars 1.29k forks source link

Popup Mode misconfiguration #132

Closed toi500 closed 3 months ago

toi500 commented 5 months ago

Right now, It makes no much sense to set up the position of the button since the bot (or chatWindows) does not follow and there is not an easy way to move it a round, no without touch the source code and cook a new web.js.

--

image

--

And this because it renders as two independent elements in the body.

--

image

--

Why do not we wrap them up so they can be moved together?

amansoni7477030 commented 4 months ago

Hi @toi500, I've fixed this issue and added some latest functionality such as drag and drop, maxWords, and some more. Check out the new release of FlowiseChatEmbed. Now the chat window will follow along with the chat button. However, I'm still waiting for approval on the maxWords feature; it's in a pull request.

toi500 commented 4 months ago

hey @amansoni7477030

I know man! I have been following ur PRs so far. Really really good contribution here.

I have been try to customize the the embedding via custom CSS https://github.com/FlowiseAI/Flowise/discussions/2126. It is not perfect but better than the original one, where it was unresponsive on mobiles.

I think that, on mobiles, the chat needs go full screen like this one: http://chatbot.flowise.surge.sh/ https://github.com/FlowiseAI/Flowise/discussions/2109

amansoni7477030 commented 4 months ago

Thank you @toi500. I have already made some enhancements to the embedded chat. It is still in testing, but I will push it soon. It will also be responsive on mobile.

toi500 commented 4 months ago

You are the man, @amansoni7477030 . Thank you so much for taking care of this.

Maybe you have already noticed but, on mobile, there is a sort of "auto-focus" (1) when you open the embedded chat and (2) when you get a response from the model, resulting the end user has just a little window to read and a very bad user experience, since you need to keep pressing "back" on the phone to get rip of the mobile keyboard in order to be able to read.

https://github.com/FlowiseAI/FlowiseChatEmbed/assets/138339291/d830e50b-8c91-461b-8406-93ba6387dc72

For a really smoth user experience, here is how it should work, without any auto-focus:

https://github.com/FlowiseAI/FlowiseChatEmbed/assets/138339291/b91a57c2-fcb3-44e0-ac29-b2d5197d8fc5

CC: @HenryHengZJ

amansoni7477030 commented 4 months ago

@toi500 I get it i will also include this point in my code so it will work as you mentioned.

amansoni7477030 commented 4 months ago

Hi @toi500, please check #183 . Wait for it to be approved. Now it will be very responsive on any platform. I made changes in many files and also added the close button at the top of the chat window. Now it will work very responsively.

NicolasGramnea commented 3 months ago

@amansoni7477030 I believe some of the changes affected the chatWindow view on mobile devices. It's offset (right) is not working properly. It goes outside the screen... hiding the reset / new chat button.

amansoni7477030 commented 3 months ago

Hi @NicolasGramnea , I’ve identified the issue with the chat window view on mobile devices. I’ve made the necessary changes in my repository, and I’m waiting for my latest pull request #183 to be approved. This update will solve all the responsiveness issues on any device and ensure everything works perfectly.