feat: address RTL UI feedback (#1173)

Addresses https://sendbird.atlassian.net/browse/CLNP-4340 

- [x] Fixed an issue : setting `htmlTextDirection` prop didn't work when
using SendbirdProvider but only work in App module.
- [x] The paper plane icon should point left not right 
- [x] The buttons in the modal footer should be positioned in the right
side not left

Author: AhyoungRyu

src/hooks/VoicePlayer/index.tsx

@@ -211,7 +211,13 @@ export const VoicePlayerProvider = ({
       stop,
       voicePlayerStore,
     }}>
+      {/**
+       * This empty div is also used for finding the root div element
+       * within SendbirdProvider to set the 'dir' attribute ('rtl' | 'ltr').
+       * See hooks/useHTMLTextDirection.tsx for more details.
+       */}
       <div id={VOICE_PLAYER_ROOT_ID} style={{ display: 'none' }} />
+
       {children}
     </Context.Provider>
   );

src/hooks/useHTMLTextDirection.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { VOICE_PLAYER_ROOT_ID } from '../utils/consts';
+import { HTMLTextDirection } from '../types';
+
+const useHTMLTextDirection = (direction: HTMLTextDirection) => {
+  useEffect(() => {
+    /**
+     * It sets the 'dir' attribute of the closest parent <div> element of the element with VOICE_PLAYER_ROOT_ID cause:
+     * - An empty <div> element is created in the VoiceMessageProvider, which is the highest-level <div> element within the SendbirdProvider.
+     * - It tries to find the nearest parent <div> element within the SendbirdProvider and sets 'dir' attribute,
+     * ensuring that the directionality is applied correctly.
+     * */
+    const targetElement = document.getElementById(VOICE_PLAYER_ROOT_ID);
+    targetElement.parentElement.dir = direction;
+  }, [direction]);
+};
+
+export default useHTMLTextDirection;

src/lib/Sendbird.tsx

@@ -55,6 +55,7 @@ import { EmojiManager } from './emojiManager';
 import { uikitConfigStorage } from './utils/uikitConfigStorage';
 import useMessageTemplateUtils from './hooks/useMessageTemplateUtils';
 import { EmojiReactionListRoot, MenuRoot } from '../ui/ContextMenu';
+import useHTMLTextDirection from '../hooks/useHTMLTextDirection';
 
 export { useSendbirdStateContext } from '../hooks/useSendbirdStateContext';
 
@@ -285,6 +286,8 @@ const SendbirdSDK = ({
     };
   }, [currentTheme]);
 
+  useHTMLTextDirection(htmlTextDirection);
+
   const isOnline = useOnlineStatus(sdkStore.sdk, logger);
 
   const markAsReadScheduler = useMarkAsReadScheduler({ isConnected: isOnline }, { logger });

src/modules/App/AppLayout.tsx

@@ -9,7 +9,6 @@ import { MobileLayout } from './MobileLayout';
 import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
 import { SendableMessageType } from '../../utils';
 import { getCaseResolvedReplyType } from '../../lib/utils/resolvedReplyType';
-import useApplyTextDirection from './hooks/useApplyTextDirection';
 
 export const AppLayout = (props: AppLayoutProps) => {
   const {
@@ -20,7 +19,6 @@ export const AppLayout = (props: AppLayoutProps) => {
     currentChannel,
     setCurrentChannel,
     enableLegacyChannelModules,
-    htmlTextDirection,
   } = props;
 
   const globalStore = useSendbirdStateContext();
@@ -34,8 +32,6 @@ export const AppLayout = (props: AppLayoutProps) => {
   const [startingPoint, setStartingPoint] = useState<number | null>(null);
   const { isMobile } = useMediaQueryContext();
 
-  useApplyTextDirection(htmlTextDirection);
-
   /**
    * Below configs can be set via Dashboard UIKit config setting but as a lower priority than App props.
    * So need to be have fallback value \w global configs even though each prop values are undefined

src/modules/App/hooks/useApplyTextDirection.ts

@@ -157,6 +157,7 @@ export default function App(props: AppProps) {
       isReactionEnabled={isReactionEnabled}
       isMentionEnabled={isMentionEnabled}
       isVoiceMessageEnabled={isVoiceMessageEnabled}
+      htmlTextDirection={htmlTextDirection}
     >
       <AppLayout
         isMessageGroupingEnabled={isMessageGroupingEnabled}
@@ -169,7 +170,6 @@ export default function App(props: AppProps) {
         isReactionEnabled={isReactionEnabled}
         replyType={replyType}
         showSearchIcon={showSearchIcon}
-        htmlTextDirection={htmlTextDirection}
       />
     </Sendbird>
   );

src/modules/App/index.tsx

@@ -86,8 +86,6 @@
   }
   .sendbird-channel-settings__panel-icon-right {
     right: 16px;
-    /*rtl:raw:
-    transform: rotate(180deg);*/
   }
   .sendbird-channel-settings__panel-icon--open {
     transform: rotate(90deg) /*rtl:rotate(270deg)*/;

src/modules/ChannelSettings/components/ChannelSettingsUI/channel-settings-ui.scss

@@ -79,6 +79,8 @@
     padding: 6px;
     right: 16px;
     bottom: 14px;
+    /*rtl:raw:
+    transform: rotate(180deg);*/
   }
 
   .sendbird-message-input--attach-input {

src/ui/MessageInput/index.scss

@@ -57,6 +57,8 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
+    /*rtl:raw:
+    justify-content: flex-start;*/
     @include mobile() {
       position: sticky;
       bottom: 24px;