Molly chat improvements

MegumiKim commented 10 months ago

Molly frontend tasks I am working on can be divided to several stages. I would like to request reviews at each sub tasks I am working on.

First commits encompass the following changes:

Add Label to textarea
Prevent empty query to be sent
Enable press enter query submit
Unhide textarea for mobile view

One question: Now that query can be submitted on press Enter key, can I remove submit button in order to secure more space for textarea and avoid confusion?

StianSto commented 10 months ago

great work as always :) tested it on my phone, and while molly wasnt visible at first (fixable by adjusting height on the wrapper) i was able to write and send a query, and got a response. im also not able to send an empty query.

requests:

[ ] could you add the new changes to +server.ts in molly package?

MegumiKim commented 10 months ago

@StianSto Thanks Stian for testing. As requested, uncommented +server.ts file.

MegumiKim commented 10 months ago

Molly's chat box is now automatically scrolled to the bottom.
I have removed the submit button to see if it is better. Please let me know if you encounter any issue.

MegumiKim commented 9 months ago

Please note the following changes:

Re-organized Molly components (now Molly chat box does not live inside Molly button).
Added custom resize to Molly chat box.
Replace the close button to Molly icon to simplify the design. Since same icon opens the chat box, I believe this is intuitive to user...
Added hover state (drop shadow) to Molly icon buttons. Can be less subtle if it is required.
Added aria-label to Molly icon btns

Anclagen commented 9 months ago

There are some issues when it comes to resizing the box.

On Firefox Molly is expanding with the text. molly-firefox

On chrome its fine till you resize it. molly-chrrome

Fermain commented 9 months ago

We should bind escape to closing Molly. when fully expanded, it sits behind the header meaning you can't close it.

Would be useful to have a small explainer like:

Enter to send. Shift + Enter for new line.

MegumiKim commented 9 months ago

@Anclagen Thanks for spotting. There was a bug in the last commit. Should be ok now...

MegumiKim commented 9 months ago

In addition to custom resize, I added fixed resize button with placeholder icon. Please test if it works ok/good size.

MegumiKim commented 9 months ago

@StianSto @pretzL @Fermain All the requested changes are now made. Hope you could approve :-)

Fermain / -mollify

Molly chat improvements #167