fix: ChatInput Formatter Tool UI for small screens (#693)

* Fix chatFormatter Toolbar UI

* make message box and popover menu occupy full width

* make message composer configurable

* zIndex fix

* resolve conflict

* Place popoverMenu icon to the extreme right

* feat: Add 'Cancel Recording' and 'Finish Recording' tooltips for audio/video buttons (#812)

* fix message box width and minor UI issues for chatinput formatters

* remove redundant tooltip

* remove audio from pop over menu

* run prettier

* fix audio issue

* change font size for chat input

---------

Co-authored-by: Dhairyashil Shinde <[email protected]>

Author: abirc8010

packages/react/src/views/ChatInput/AudioMessageRecorder.js

@@ -11,7 +11,8 @@ import useMessageStore from '../../store/messageStore';
 import { getCommonRecorderStyles } from './ChatInput.styles';
 import useAttachmentWindowStore from '../../store/attachmentwindow';
 
-const AudioMessageRecorder = ({ disabled }) => {
+const AudioMessageRecorder = (props) => {
+  const { disabled, displayName, popOverItemStyles } = props;
   const videoRef = useRef(null);
   const { theme } = useTheme();
   const styles = getCommonRecorderStyles(theme);
@@ -136,7 +137,17 @@ const AudioMessageRecorder = ({ disabled }) => {
   }, [isRecorded, file]);
 
   if (state === 'idle') {
-    return (
+    return displayName ? (
+      <Box
+        key="audio"
+        css={popOverItemStyles}
+        onClick={handleRecordButtonClick}
+        disabled={disabled}
+      >
+        <Icon name="mic" size="1rem" />
+        <span>{displayName}</span>
+      </Box>
+    ) : (
       <Tooltip text="Audio Message" position="top">
         <ActionButton
           ghost

packages/react/src/views/ChatInput/ChatInput.js

@@ -524,7 +524,7 @@ const ChatInput = ({ scrollToBottom }) => {
             disabled={!isUserAuthenticated || !canSendMsg || isRecordingMessage}
             placeholder={
               isUserAuthenticated && canSendMsg
-                ? `Message #${channelInfo.name}`
+                ? `Message ${channelInfo.name ? `#${channelInfo.name}` : ''}`
                 : isUserAuthenticated
                 ? 'This room is read only'
                 : 'Sign in to chat'

packages/react/src/views/ChatInput/ChatInput.styles.js

@@ -10,6 +10,10 @@ export const getChatInputStyles = (theme) => {
       &.focused {
         border: ${`1.5px solid ${theme.colors.ring}`};
       }
+      @media (max-width: 500px) {
+        margin: 0;
+        width: 100%;
+      }
     `,
 
     editMessage: css`
@@ -80,10 +84,27 @@ export const getChatInputFormattingToolbarStyles = ({ theme, mode }) => {
       position: relative;
       gap: 0.1rem;
       border-radius: 0 0 ${theme.radius} ${theme.radius};
-      @media (max-width: 383px) {
-        display: grid;
-        grid-template-columns: repeat(5, 0.2fr);
-      }
+    `,
+    popOverStyles: css`
+      position: absolute;
+      bottom: 3rem;
+      left: 0;
+      width: 100%;
+      background: ${theme.colors.background};
+      box-shadow: 0 -8px 10px ${mode === 'light' ? darken(theme.colors.background, 0.1) : lighten(theme.colors.background, 1)};
+      border-radius: 8px;
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      z-index: 1300;
+    `,
+    popOverItemStyles: css`
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      cursor: pointer;
+      padding: 0.5rem;
     `,
   };
   return styles;
@@ -101,8 +122,8 @@ export const getCommonRecorderStyles = (theme) => {
     `,
 
     controller: css`
-      display: flex;
       gap: 0.15rem;
+      display: inline-flex;
     `,
 
     timer: css`