Feature: Molly-chat Improvements

[Jenfer93]

Molly improvements to be considered:

• [x] Molly chat can be opened into full window view for better communication with Molly, usefull when reviewing content, and for creators to discuss improvements on the content with Molly. Could also be used by students for same reasone.

• [x] An if statement so it's not possible to send an empty array as a message

• [x] Implement a img on user and molly chat message

• [x] Sanitize the textarea for security

• [ ] When Molly writes code, the text breakes

• [x] Shortcut to send with enter

• [x] Textarea should have a label

• [x] Should make it so the window scrolls to the bottom

• [x] Textarea needs to be enabled on mobile view

• [x] Chatbox custom resize

• [x] Focus textarea when Molly opens

• [x] Textarea auto resize

[MegumiKim]

@ShaindalDev @Jenfer93 @Fermain

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

[MegumiKim]

@Jenfer93 I don't quite understand "Implement a img on user and molly chat message". Could you please elaborate?

[MegumiKim]

@ShaindalDev @Fermain @Jenfer93

I would like to reconfirm with others if we really want full window screen or full height with half screen or some other options for chat screen size option. Also, what will be the good height ratio for textarea and Molly's response.

This might be also reflected in the new prototype?

[Anclagen]

@Jenfer93 I don't quite understand "Implement a img on user and molly chat message". Could you please elaborate?

I assume this would refer to adding a users avatar next to their text in the molly chat, similar to discord.

[Anclagen]

@ShaindalDev @Fermain @Jenfer93

I would like to reconfirm with others if we really want full window screen or full height with half screen or some other options for chat screen size option. Also, what will be the good height ratio for textarea and Molly's response.

This might be also reflected in the new prototype?

If its not a hassle to implement could I suggest having a text area that grows to about third or half the view port height depending on how much content the users puts in.

I think on phones/tablets having it full screen would be best, maybe intermediate sizes we could have the options to squash to the side over the navs or go full screen. I wouldn't mind on larger screens at least having the option to have molly chat take up all the space on the right hand side, covering the nav and table of contents.

[MegumiKim]

@Fermain @ShaindalDev I would like to continue working on the sanitisation of user input, so I re-opened the issue :-)

[MegumiKim]

It seems there is defence on the server side but user text input is still vulnerable. Seems like most effective way is to use DOMPurify (https://www.npmjs.com/package/dompurify). Is it ok to install it in Molly package?

[MegumiKim]

Molly's icon is added to Molly's response. For user side, user's avatar shall be added in future when that feature is implemented.

[MegumiKim]

I was not able to resolve "Molly's code break" issue during this sprint as this was not quite frontend fixes. I will create a separate issue for future sprints.