dmitrizzle / chat-bubble

Simple chatbot UI for the Web with JSON scripting 👋🤖🤙
MIT License
579 stars 171 forks source link

handling wrapping inside iframe #55

Closed mikkokotila closed 6 years ago

mikkokotila commented 6 years ago

Great solution you have created. Do you have an idea for how to manage a case where I have it running inside an iframe (chat-box frame basically) and when the window is closed the initial messages will wrap to single character length. If I do no wrapping, then the result is that nothing will wrap so that does not work either. There is also the case where the user closes the chat box in middle of replies coming from the bot, where the same will happen. Wrapping will take place to one character width.

I think the ideal would be where the chat is progressing only when the window is in focus, and if focus is stopped mid message, it would cancel it and start from where it left next time the user comes back to focus. Do you have an idea how I could achieve this?

Thanks a lot!

dmitrizzle commented 6 years ago

Hi @mikkokotila,

Not sure I understand the iFrame case fully. I would, however recommend using plain DOM elements, like a <div></div> with dynamic content. You can have multiple chat-bubble instances assigned to various DOM elements. If you set the dimensions of your bot and its container (in this case the <div></div>) as the same and set overflow:hidden; for your container, you can manipulate it to "minify" with ease.

As for chat progressing depending on user focus, you should be able to control that form outside the chat-bubble API. Might be a little tricky, however. You may have to structure your script in a way that it will feed one "sentence" at a time and check for user focus. If the focus is no longer present, the feed should stop and then resume again once the bot is in focus.

I hope this helps.

Note that I've been generally trying to stay away from adding features not directly related to displaying text and images in a chat-like format. That way we can keep this script performant and light, which is basically one of the main features. Note the #56 issue I've just created to deal with this restriction. Your feedback and input on it would be greatly appreciated :)