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

[devanshkansagra]

Hey @abirc8010, a small issue caught in login ui, the chat input block also after login

[abirc8010]

Hey @devanshkansagra , I was trying to make it occupy full width so that on clicking audio message , other icons don't get shifted out of boundary

[devanshkansagra]

ohh okay

[abirc8010]

@Spiral-Memory you can review and approve this to test the latest changes

[Spiral-Memory]

Hey @abirc8010
If we are doing this only for the formatters.. Pls use a proper like like 'T' kind of.. which is followed in RC

[abirc8010]

Hey @abirc8010 If we are doing this only for the formatters.. Pls use a proper like like 'T' kind of.. which is followed in RC

Hey @Spiral-Memory I didn’t implement this only for the formatters (though I can if needed). By default, the formatters and the link option will appear in the popover menu. I added flexibility so that anyone setting up the EC can decide how to arrange the items.

[Spiral-Memory]

That's great.. then why is it at 2nd option ?
Let's have it at the end right ?

[Spiral-Memory]

If possible,

If one is adding all formatter option at once (having this flexibility, let's use T icon)

Not sure, if that will be easily implementable.. let's see if you can do that .. if not just shift it to the end.

[abirc8010]

@Spiral-Memory, would you like me to create something similar to this if the formatter + link options are in the popover menu?

That's great.. then why is it at 2nd option ?
Let's have it at the end right ?

Also could you please clarify what you meant by this?

[Spiral-Memory]

If you look at your video that vertical triple dot is at 2nd option right.. that's not looking right.. it should be at end.

[abirc8010]

If you look at your video that vertical triple dot is at 2nd option right.. that's not looking right.. it should be at end.

The positioning can be adjusted using the theme object. I’ve added that option.

[Spiral-Memory]

That's not needed in this case abir..

Inside that menu, have it adjustable

But menu itself should be at end..

[abirc8010]

Got it, I’ll update it.

[Spiral-Memory]

Btw Abir, this is a really nice addition

Thanks a lot for this 🚀

[abirc8010]

@Spiral-Memory I have made the required changes.