Made message box responsive and fixed alignment

[abirc8010]

Brief Title

Made message box responsive and fixed alignment

Acceptance Criteria fulfillment

• Set the min-width of the chat layout to 0 to improve responsiveness.
• Updated the chat formatter tool to use display: grid for better layout handling on screens narrower than 383px.
• Aligned the message box to the bottom by setting the chat body max-height to 100%.

Fixes # (issue)
#616 , #629

Video/Screenshots

message-box.webm

PR Test Details

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

[abirc8010]

Hey @Spiral-Memory I closed the previous PR related to this and opened a new one with updated changes

[abirc8010]

@Spiral-Memory is the layout for chat formatter tool ok for small screens ?

[Spiral-Memory]

@Spiral-Memory is the layout for chat formatter tool ok for small screens ?

For now, it's ok for me.. btw what changes are you proposing ?

[abirc8010]

Currently the message box is not properly aligned to the bottom as it was reported in #616
This PR ensures that the message box is aligned to the bottom for any screen size

[abirc8010]

Also for small screen sizes the message box is not completely visible
This PR fixes this UI responsiveness issue

[abirc8010]

Hey @Spiral-Memory could you please check and review this PR whenever you are free.

[Spiral-Memory]

Testing deployment

[Spiral-Memory]

Hi @abirc8010,
I am merging this PR as it looks good on other screen sizes. However, on small mobile devices, the icon font and the boxes are unexpectedly becoming larger. I hope you'll address this in the next PR.

[devanshkansagra]

Hey @abirc8010, when I was reviewing the merged output I observed this inconsistency before knowing that @Spiral-Memory have already mentioned this inconsistency in the latest comment of this pr. I would suggest to go with this kind of responsiveness

I was not knowing that you were already working and I started working on this until I saw that comment and your 👍🏻 reaction to that comment so this would be considered as kind of illegal so I apologize for that. This is a collabrative environment so I have come up with something that might help to you to make responsive like the one in the above picture see this code

import React, { useState } from 'react';
import { css } from '@emotion/react';
import {
  Box,
  Icon,
  ActionButton,
  Tooltip,
  useComponentOverrides,
  useTheme,
} from '@embeddedchat/ui-elements';
import { EmojiPicker } from '../EmojiPicker/index';
import { useMessageStore } from '../../store';
import { formatter } from '../../lib/textFormat';
import AudioMessageRecorder from './AudioMessageRecorder';
import VideoMessageRecorder from './VideoMessageRecoder';
import { getChatInputFormattingToolbarStyles } from './ChatInput.styles';
import formatSelection from '../../lib/formatSelection';

const ChatInputFormattingToolbar = ({
  messageRef,
  inputRef,
  triggerButton,
  optionConfig = {
    surfaceItems: ['emoji', 'formatter', 'audio', 'video', 'file'],
    formatters: ['bold', 'italic', 'strike', 'code', 'multiline'],
  },
}) => {
  const { classNames, styleOverrides, configOverrides } = useComponentOverrides(
    'ChatInputFormattingToolbar'
  );
  const theme = useTheme();
  const styles = getChatInputFormattingToolbarStyles(theme);
  const surfaceItems =
    configOverrides.optionConfig?.surfaceItems || optionConfig.surfaceItems;
  const formatters =
    configOverrides.optionConfig?.formatters || optionConfig.formatters;

  const isRecordingMessage = useMessageStore(
    (state) => state.isRecordingMessage
  );

  const [isEmojiOpen, setEmojiOpen] = useState(false);

  const handleClickToOpenFiles = () => {
    inputRef.current.click();
  };

  const handleEmojiClick = (emojiEvent) => {
    const [emoji] = emojiEvent.names;
    const message = `${messageRef.current.value} :${emoji.replace(
      /[\s-]+/g,
      '_'
    )}: `;
    triggerButton?.(null, message);
  };

  const chatToolMap = {
    audio: (
      <Tooltip text="Audio Message" position="top" key="audio">
        <AudioMessageRecorder />
      </Tooltip>
    ),
    video: (
      <Tooltip text="Video Message" position="top" key="video">
        <VideoMessageRecorder />
      </Tooltip>
    ),
    file: (
      <Tooltip text="Upload File" position="top" key="file">
        <ActionButton
          square
          ghost
          disabled={isRecordingMessage}
          onClick={handleClickToOpenFiles}
        >
          <Icon name="attachment" size="1.25rem" />
        </ActionButton>
      </Tooltip>
    ),
  };

  return (
    <Box
      css={styles.chatFormat}
      className={`ec-chat-input-formatting-toolbar ${classNames}`}
      style={styleOverrides}
    >
      {/* Moved from chatToolMapp array */}
      <Tooltip text="Emoji" position="top" key="emoji-btn">
        <ActionButton
          square
          ghost
          disabled={isRecordingMessage}
          onClick={() => {
            setEmojiOpen(true);
          }}
        >
          <Icon name="emoji" size="1.25rem" />
        </ActionButton>
      </Tooltip>

      {/* Moved from chatToolMap Array */}
      <Box>
        {formatters
          .map((name) => formatter.find((item) => item.name === name))
          .map((item) => (
            <Tooltip
              text={item.name}
              position="top"
              key={`formatter-${item.name}`}
            >
              <ActionButton
                square
                disabled={isRecordingMessage}
                ghost
                onClick={() => {
                  formatSelection(messageRef, item.pattern);
                }}
              >
                <Icon
                  disabled={isRecordingMessage}
                  name={item.name}
                  size="1.25rem"
                />
              </ActionButton>
            </Tooltip>
          ))}
      </Box>
      {surfaceItems.map((key) => chatToolMap[key])}
      {isEmojiOpen && (
        <EmojiPicker
          key="emoji-picker"
          handleEmojiClick={(emoji) => {
            setEmojiOpen(false);
            handleEmojiClick(emoji);
          }}
          onClose={() => setEmojiOpen(false)}
          positionStyles={css`
            position: absolute;
            bottom: 7rem;
            left: 1.85rem;
          `}
        />
      )}
    </Box>
  );
};

export default ChatInputFormattingToolbar;

In this code, you will see that I have moved the Emoji icon and the formatters from the chatToolMap array to directly into the main jsx code and I kept it such a way that emoji icon will come first then formatters and then other items like the position of this icons already present in the production. now you will need to make responsive all the formatters. and try to make it till all the formatter would come under 3 dots on small screen size.

Happy contributing 😄

[abirc8010]

I was not knowing that you were already working and I started working on this until I saw that comment and your 👍🏻 reaction to that comment so this would be considered as kind of illegal so I apologize for that.

No problem @devanshkansagra
Moving the formatters to the 3-dots menu, like in the main RC, will be better for small mobile screens.

[abirc8010]

Screencast.from.2024-12-18.01-31-34.webm

Hey @devanshkansagra @Spiral-Memory will this be ok ?

[abirc8010]

I have opened a PR for this