[CLNP-5549] fix: Improve message layout direction hook reliability (#1242)

Aim to fix https://sendbird.atlassian.net/browse/SBISSUE-17616 

## Description
Fixed an issue where the `dir` attribute was not being properly applied to message containers. Instead of using DOM manipulation through `useMessageLayoutDirection` hook, implemented a more React-friendly solution by directly setting the `dir` attribute on the message container component.

### Changes
- Removed `useMessageLayoutDirection` hook
- Updated `MessageList` component to directly handle text direction through the `dir` attribute
- Simplified the implementation while maintaining the same functionality
- Ensures proper text direction propagation to child elements

### Testing
Please test the following scenarios:
- Verify text direction changes properly when switching between LTR and RTL by changing the value of `forceLeftToRightMessageLayout` / `hTMLTextDirection`
- Check message alignment in both directions
- Confirm direction changes are properly propagated to child elements

### Note
This change simplifies our approach to handling text direction while maintaining full compatibility with our RTL support system.

Author: AhyoungRyu

src/hooks/useHTMLTextDirection.tsx

@@ -15,18 +15,4 @@ const useHTMLTextDirection = (direction: HTMLTextDirection) => {
   }, [direction]);
 };
 
-export const useMessageLayoutDirection = (direction: HTMLTextDirection, forceLeftToRightMessageLayout: boolean, loading: boolean) => {
-  useEffect(() => {
-    if (loading) return;
-    const messageListElements = document.getElementsByClassName('sendbird-conversation__messages');
-    if (messageListElements.length > 0) {
-      Array.from(messageListElements).forEach((elem: HTMLElement) => {
-        elem.dir = forceLeftToRightMessageLayout
-          ? 'ltr'
-          : direction;
-      });
-    }
-  }, [direction, forceLeftToRightMessageLayout, loading]);
-};
-
 export default useHTMLTextDirection;

src/modules/Channel/components/MessageList/index.tsx

@@ -25,6 +25,7 @@ import { getMessagePartsInfo } from '../../../GroupChannel/components/MessageLis
 import { GroupChannelMessageListProps } from '../../../GroupChannel/components/MessageList';
 import { GroupChannelUIBasicProps } from '../../../GroupChannel/components/GroupChannelUI/GroupChannelUIView';
 import { deleteNullish } from '../../../../utils/utils';
+import { getHTMLTextDirection } from '../../../../utils';
 
 const SCROLL_BOTTOM_PADDING = 50;
 
@@ -175,7 +176,13 @@ export const MessageList = (props: MessageListProps) => {
   return (
     <>
       {!isScrolled && <PlaceHolder type={PlaceHolderTypes.LOADING} />}
-      <div className={`sendbird-conversation__messages ${className}`}>
+      <div
+        className={`sendbird-conversation__messages ${className}`}
+        dir={getHTMLTextDirection(
+          store?.config?.htmlTextDirection,
+          store?.config?.forceLeftToRightMessageLayout,
+        )}
+      >
         <div className="sendbird-conversation__scroll-container">
           <div className="sendbird-conversation__padding" />
           <div

src/modules/Channel/context/ChannelProvider.tsx

@@ -51,7 +51,6 @@ import { useSendMultipleFilesMessage } from './hooks/useSendMultipleFilesMessage
 import { useHandleChannelPubsubEvents } from './hooks/useHandleChannelPubsubEvents';
 import { PublishingModuleType } from '../../internalInterfaces';
 import { ChannelActionTypes } from './dux/actionTypes';
-import { useMessageLayoutDirection } from '../../../hooks/useHTMLTextDirection';
 
 export { ThreadReplySelectType } from './const'; // export for external usage
 
@@ -212,8 +211,6 @@ const ChannelProvider = (props: ChannelContextProps) => {
     imageCompression,
     markAsReadScheduler,
     groupChannel,
-    htmlTextDirection,
-    forceLeftToRightMessageLayout,
   } = config;
   const sdk = globalStore?.stores?.sdkStore?.sdk;
   const sdkInit = globalStore?.stores?.sdkStore?.initialized;
@@ -381,12 +378,6 @@ const ChannelProvider = (props: ChannelContextProps) => {
     markAsReadScheduler,
   });
 
-  useMessageLayoutDirection(
-    htmlTextDirection,
-    forceLeftToRightMessageLayout,
-    loading,
-  );
-
   // callbacks for Message CURD actions
   const deleteMessage = useDeleteMessageCallback(
     { currentGroupChannel, messagesDispatcher },

src/modules/GroupChannel/components/MessageList/index.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import type { Member } from '@sendbird/chat/groupChannel';
 import { useGroupChannelHandler } from '@sendbird/uikit-tools';
 
-import { CoreMessageType, isSendableMessage } from '../../../../utils';
+import { CoreMessageType, isSendableMessage, getHTMLTextDirection } from '../../../../utils';
 import { EveryMessage, RenderMessageParamsType, TypingIndicatorType } from '../../../../types';
 
 import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
@@ -160,7 +160,13 @@ export const MessageList = (props: GroupChannelMessageListProps) => {
 
   return (
     <>
-      <div className={`sendbird-conversation__messages ${className}`}>
+      <div
+        className={`sendbird-conversation__messages ${className}`}
+        dir={getHTMLTextDirection(
+          store?.config?.htmlTextDirection,
+          store?.config?.forceLeftToRightMessageLayout,
+        )}
+      >
         <InfiniteList
           ref={scrollRef}
           initDeps={[channelUrl]}

src/modules/GroupChannel/context/GroupChannelProvider.tsx

@@ -26,7 +26,6 @@ import PUBSUB_TOPICS, { PubSubSendMessagePayload } from '../../../lib/pubSub/top
 import { PubSubTypes } from '../../../lib/pubSub';
 import { useMessageActions } from './hooks/useMessageActions';
 import { getIsReactionEnabled } from '../../../utils/getIsReactionEnabled';
-import { useMessageLayoutDirection } from '../../../hooks/useHTMLTextDirection';
 
 export { ThreadReplySelectType } from './const'; // export for external usage
 
@@ -146,7 +145,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
   const { config, stores } = useSendbirdStateContext();
 
   const { sdkStore } = stores;
-  const { markAsReadScheduler, logger, htmlTextDirection, forceLeftToRightMessageLayout } = config;
+  const { markAsReadScheduler, logger } = config;
 
   // State
   const [quoteMessage, setQuoteMessage] = useState<SendableMessageType | null>(null);
@@ -262,12 +261,6 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
     if (_animatedMessageId) setAnimatedMessageId(_animatedMessageId);
   }, [_animatedMessageId]);
 
-  useMessageLayoutDirection(
-    htmlTextDirection,
-    forceLeftToRightMessageLayout,
-    messageDataSource.loading,
-  );
-
   const scrollToBottom = usePreservedCallback(async (animated?: boolean) => {
     if (!scrollRef.current) return;
 

src/modules/Thread/components/ThreadUI/index.tsx

@@ -17,7 +17,7 @@ import useMemorizedThreadList from './useMemorizedThreadList';
 import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
 import { isAboutSame } from '../../context/utils';
 import { MessageProvider } from '../../../Message/context/MessageProvider';
-import { SendableMessageType } from '../../../../utils';
+import { SendableMessageType, getHTMLTextDirection } from '../../../../utils';
 import { classnames } from '../../../../utils/utils';
 
 export interface ThreadUIProps {
@@ -52,6 +52,7 @@ const ThreadUI: React.FC<ThreadUIProps> = ({
 }: ThreadUIProps): React.ReactElement => {
   const {
     stores,
+    config,
   } = useSendbirdStateContext();
   const currentUserId = stores?.sdkStore?.sdk?.currentUser?.userId;
   const {
@@ -152,6 +153,7 @@ const ThreadUI: React.FC<ThreadUIProps> = ({
         className={classnames('sendbird-thread-ui--scroll', 'sendbird-conversation__messages')}
         ref={scrollRef}
         onScroll={onScroll}
+        dir={getHTMLTextDirection(config?.htmlTextDirection, config?.forceLeftToRightMessageLayout)}
       >
         <MessageProvider message={parentMessage} isByMe={isByMe}>
           {MemorizedParentMessageInfo}

src/modules/Thread/context/ThreadProvider.tsx

@@ -33,8 +33,6 @@ import useSendVoiceMessageCallback from './hooks/useSendVoiceMessageCallback';
 import { PublishingModuleType, useSendMultipleFilesMessage } from './hooks/useSendMultipleFilesMessage';
 import { SendableMessageType } from '../../../utils';
 import { useThreadFetchers } from './hooks/useThreadFetchers';
-import { useMessageLayoutDirection } from '../../../hooks/useHTMLTextDirection';
-import { ChannelStateTypes, ParentMessageStateTypes, ThreadListStateTypes } from '../types';
 
 export interface ThreadProviderProps extends
   Pick<UserProfileProviderProps, 'disableUserProfile' | 'renderUserProfile'> {
@@ -92,7 +90,7 @@ export const ThreadProvider = (props: ThreadProviderProps) => {
   const { user } = userStore;
   const sdkInit = sdkStore?.initialized;
   // // config
-  const { logger, pubSub, htmlTextDirection, forceLeftToRightMessageLayout } = config;
+  const { logger, pubSub } = config;
 
   const isMentionEnabled = config.groupChannel.enableMention;
   const isReactionEnabled = config.groupChannel.enableReactions;
@@ -166,14 +164,6 @@ export const ThreadProvider = (props: ThreadProviderProps) => {
     }
   }, [stores.sdkStore.initialized, config.isOnline, initialize]);
 
-  useMessageLayoutDirection(
-    htmlTextDirection,
-    forceLeftToRightMessageLayout,
-    channelState === ChannelStateTypes.LOADING
-    || threadListState === ThreadListStateTypes.LOADING
-    || parentMessageState === ParentMessageStateTypes.LOADING,
-  );
-
   const toggleReaction = useToggleReactionCallback({ currentChannel }, { logger });
 
   // Send Message Hooks

src/utils/index.ts

@@ -990,3 +990,7 @@ export const isSendableMessage = (message?: BaseMessage | null): message is Send
 export const isChannelJustCreated = (channel: GroupChannel): boolean => {
   return isSameSecond(channel.createdAt, channel.invitedAt) && !channel.lastMessage;
 };
+
+export const getHTMLTextDirection = (direction: HTMLTextDirection, forceLeftToRightMessageLayout: boolean): string => {
+  return forceLeftToRightMessageLayout ? 'ltr' : direction;
+};