fix: ChatInput Formatter Tool UI for small screens

[abirc8010]

Brief Title

Moved formatters, video and file attachment to popover menu for small screens

Acceptance Criteria fulfillment

• Implemented a media query (@media(max-width: 400px)) to render the VideoMessageRecorder inside the popover.
• Wrapped the formatters (bold, italic, strike, code, multiline) inside the popover when screen width is below 400px.
• Adjusted the chatToolMap logic to move the file upload into the popover for smaller screens.

Video/Screenshots

Screencast.from.2025-01-15.02-39-34.webm

Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-693 after approval. Contributors are requested to replace <pr_number> with the actual PR number.

[devanshkansagra]

Hey @abirc8010 it looks very good, but a suggestion you just put only formatters in that 3 dot menu. it would be better for user to find audio, video, and file upload buttons if they are displayed and visible on chatformatting toolbar. also you can see in layout editor, the formatters are not adjustable, and audio video and file upload are adjustable. the code I shared to you in that merged pr is based on this feature

[abirc8010]

@devanshkansagra I have considered moving the video and files to 3-dot menu so that clicking the audio message does not cause other icons (video, file) to be shifted outside the toolbar.

Screencast.from.2024-12-18.11-16-22.webm

[devanshkansagra]

then it might be difficult to edit layout of embeddedchat using layout_editor, or else do one thing, try to remove the margins from sides(left and right) of chat input box on small screen keeping only formatters in 3 dots. just for visualization how it would look, whether it will look consistent or not?

[abirc8010]

Screencast.from.2024-12-19.00-36-52.webm

@devanshkansagra @Spiral-Memory will it be ok to make the message box occupy the entire width ?

[Spiral-Memory]

Hi @abirc8010 and @devanshkansagra ,

Let’s make it configurable. In mobile mode, let the user (the one setting up EC) decide what they want to keep visible and which options should go into the three-dot menu, similar to how this is configurable in the theme object.

@devanshkansagra , maybe you can connect with @abirc8010 to guide him on this or collaborate together on it.

[devanshkansagra]

Sure

[abirc8010]

Hey @devanshkansagra @Spiral-Memory
Would this kind of behaviour be better ?
I am keeping the emoji fixed , and by default the formatters will be inside the popOver menu , user can shuffle the ordering , I am keeping 5 items inside the menu and 3 items outside to maintain consistency.
One can drag out an item from the popOver menu to outside.
Functionality is achieved using dnd-kit as in layout_editor

Screencast.from.2024-12-24.14-18-10.webm

[devanshkansagra]

Hey @abirc8010, this thing we already have in layout_editor check #607 where we can customize the ui of embeddedchat. so can you tell me why did you implemented here?

[devanshkansagra]

also I don't think we needed this modification of drag and drop here because we don't want that non-admin users should modify the ui otherwise every user will able modify the position of the buttons where they want to and each time the ui of that fomratting toolbar will be changed so it will be difficult for other users to handle new modification each time

[abirc8010]

Let’s make it configurable. In mobile mode, let the user (the one setting up EC) decide what they want to keep visible and which options should go into the three-dot menu, similar to how this is configurable in the theme object.

Hey @devanshkansagra after reading this , I thought we need to implement it the same way as it's done in the layout editor. Could you please clarify the intended behavior?

[devanshkansagra]

Ohh my bad I didn't read that comment, I was bit busy a bit since few days and without reading that entire comment I texted sure 😅

[abirc8010]

A problem here till now is that the user's preferences are not stored, so every time the user reloads or visits again, the toolbars revert to their default state.

[devanshkansagra]

It is because default layout is set by layout editor and you are modifying in the environment hence it does not modify the layout editor theme obj so if the page gets refreshed it will reset the changes

[Spiral-Memory]

Hi @abirc8010 ,
I think there’s some confusion here. This is not about user preferences. Instead, it’s about a developer embedding EmbeddedChat into their website. Based on the developer's choice, the layout will be determined.

It’s important to understand that EmbeddedChat is not a standalone chatting app. It’s presented inside Storybook for development purposes only. Its primary purpose is to be embedded into any website, offering the power of Rocket.Chat and the customizability provided by the external developer configuring it.

While setting it up, the developer can define the theme object accordingly.

[Spiral-Memory]

You may look into this repo to understand the purpose of EmbeddedChat : https://github.com/Spiral-Memory/rc-app-demo-page

https://spiral-memory.github.io/rc-app-demo-page/

[abirc8010]

Hey @Spiral-Memory @devanshkansagra I have made the message box configurable

eg:

optionConfig = {
   surfaceItems: ['emoji', 'formatter', 'audio', 'video', 'file'],
   formatters: ['bold', 'italic', 'strike', 'multiline'],
   smallScreenSurfaceItems: [ 'file', 'code', 'popoverItems', 'italic', 'video'],
   popOverItems: ['audio', 'bold', 'emoji', 'strike'],
 }

for large screen we have:

for smaller screen we have:

[devanshkansagra]

Hey @abirc8010, Can you share the working video regarding this or @Spiral-Memory can you please approve this pr to test?

[abirc8010]

@devanshkansagra Here is the working video. You mainly need to pass two additional configurations: smallScreenSurfaceItems to define the arrangement of toolbars on small screens, and popOverItems to specify the arrangement of items in the popover menu.

If these configurations are not provided, the default behavior will place emoji, audio, video, and file options outside the popover menu, while formatters will remain inside it.

working.webm

[Spiral-Memory]

Approving to test

[abirc8010]

Hey @Spiral-Memory I can see a 'link' option is added for the chatInputToolbar , should I consider moving it inside the popover menu or keep it outside by default ?
I am keeping it inside the popover by default, if any changes are needed , I will modify it

[Spiral-Memory]

Feels too big compared to the last one

Also, i am facing a slow behaviour, not sure why ?

Also, just before the login completes, You will see message #undefined -> Not sure, which PR introduced this

Can you please these please

[abirc8010]

Feels too big compared to the last one

@Spiral-Memory I made it occupy the full screen so that while recording audio other icons do not get shifted out of boundary

[abirc8010]

Also, i am facing a slow behaviour, not sure why ?

I am not quite sure about this as this seems to be fine from my end.

[Spiral-Memory]

Can we please keep the space same as before

You can occupy full width, after a breakpoint if needed, but that too, keep the font size consistent as before

[abirc8010]

Hey @Spiral-Memory I made the input box occupy full width only for smaller screens

[Spiral-Memory]

Hi @abirc8010
Can we please also keep the font size same as before for "Message #general"

[abirc8010]

Hey @Spiral-Memory I made the modification.