feat: add htmlTextDirection prop to SendbirdProvider

src/lib/Sendbird.tsx

@@ -49,7 +49,7 @@ import {
   SendbirdProviderUtils,
 } from './types';
 import { GlobalModalProvider, ModalRoot } from '../hooks/useModal';
-import { RenderUserProfileProps, UserListQuery } from '../types';
+import { HTMLTextDirection, RenderUserProfileProps, UserListQuery } from '../types';
 import PUBSUB_TOPICS, { SBUGlobalPubSub, SBUGlobalPubSubTopicPayloadUnion } from './pubSub/topics';
 import { EmojiManager } from './emojiManager';
 import { uikitConfigStorage } from './utils/uikitConfigStorage';
@@ -101,6 +101,7 @@ export interface SendbirdProviderProps extends CommonUIKitConfigProps, React.Pro
   allowProfileEdit?: boolean;
   disableMarkAsDelivered?: boolean;
   breakpoint?: string | boolean;
+  htmlTextDirection?: HTMLTextDirection;
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
   onUserProfileMessage?: (channel: GroupChannel) => void;
   uikitOptions?: UIKitOptions;
@@ -175,6 +176,7 @@ const SendbirdSDK = ({
   customExtensionParams,
   isMultipleFilesMessageEnabled = false,
   eventHandlers,
+  htmlTextDirection = 'ltr',
 }: SendbirdProviderProps): React.ReactElement => {
   const { logLevel = '', userMention = {}, isREMUnitEnabled = false, pubSub: customPubSub } = config;
   const { isMobile } = useMediaQueryContext();
@@ -393,6 +395,7 @@ const SendbirdSDK = ({
           isTypingIndicatorEnabledOnChannelList: configs.groupChannel.channelList.enableTypingIndicator,
           isMessageReceiptStatusEnabledOnChannelList: configs.groupChannel.channelList.enableMessageReceiptStatus,
           showSearchIcon: sdkInitialized && configsWithAppAttr(sdk).groupChannel.setting.enableMessageSearch,
+          htmlTextDirection,
         },
         eventHandlers,
         emojiManager,

src/lib/types.ts

@@ -23,6 +23,7 @@ import { SBUConfig } from '@sendbird/uikit-tools';
 import { Module, ModuleNamespaces } from '@sendbird/chat/lib/__definition';
 
 import type {
+  HTMLTextDirection,
   RenderUserProfileProps,
   ReplyType,
   UserListQuery,
@@ -71,6 +72,7 @@ export interface SendBirdStateConfig {
   appId: string;
   accessToken?: string;
   theme: string;
+  htmlTextDirection: HTMLTextDirection;
   pubSub: SBUGlobalPubSub;
   logger: Logger;
   setCurrentTheme: (theme: 'light' | 'dark') => void;

src/modules/App/AppLayout.tsx

@@ -19,6 +19,7 @@ export const AppLayout = (props: AppLayoutProps) => {
     currentChannel,
     setCurrentChannel,
     enableLegacyChannelModules,
+    htmlTextDirection,
   } = props;
 
   const globalStore = useSendbirdStateContext();
@@ -61,6 +62,7 @@ export const AppLayout = (props: AppLayoutProps) => {
               threadTargetMessage={threadTargetMessage}
               setThreadTargetMessage={setThreadTargetMessage}
               enableLegacyChannelModules={enableLegacyChannelModules}
+              htmlTextDirection={htmlTextDirection}
             />
           )
           : (
@@ -87,6 +89,7 @@ export const AppLayout = (props: AppLayoutProps) => {
               startingPoint={startingPoint}
               setStartingPoint={setStartingPoint}
               enableLegacyChannelModules={enableLegacyChannelModules}
+              htmlTextDirection={htmlTextDirection}
             />
           )
       }

src/modules/App/DesktopLayout.tsx

@@ -39,6 +39,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayout
     threadTargetMessage,
     setThreadTargetMessage,
     enableLegacyChannelModules,
+    htmlTextDirection,
   } = props;
 
   const updateFocusedChannel = (channel: GroupChannelClass) => {
@@ -109,7 +110,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayout
   };
 
   return (
-    <div className="sendbird-app__wrap">
+    <div className="sendbird-app__wrap" dir={htmlTextDirection}>
       <div className="sendbird-app__channellist-wrap">
         {enableLegacyChannelModules ? <ChannelList {...channelListProps} /> : <GroupChannelList {...channelListProps} />}
       </div>

src/modules/App/MobileLayout.tsx

@@ -44,6 +44,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (props: MobileLayoutPro
     highlightedMessage,
     setHighlightedMessage,
     enableLegacyChannelModules,
+    htmlTextDirection,
   } = props;
   const [panel, setPanel] = useState(PANELS.CHANNEL_LIST);
 
@@ -165,7 +166,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (props: MobileLayoutPro
   };
 
   return (
-    <div className="sb_mobile">
+    <div className="sb_mobile" dir={htmlTextDirection}>
       {panel === PANELS.CHANNEL_LIST && (
         <div className="sb_mobile__panelwrap">
           {enableLegacyChannelModules ? <ChannelList {...channelListProps} /> : <GroupChannelList {...channelListProps} />}

src/modules/App/index.tsx

@@ -44,6 +44,7 @@ export interface AppProps {
   isMessageGroupingEnabled?: AppLayoutProps['isMessageGroupingEnabled'];
   disableAutoSelect?: AppLayoutProps['disableAutoSelect'];
   onProfileEditSuccess?: AppLayoutProps['onProfileEditSuccess'];
+  htmlTextDirection?: AppLayoutProps['htmlTextDirection'];
 
   /**
    * The default value is false.
@@ -100,6 +101,7 @@ export default function App(props: AppProps) {
     isUserIdUsedForNickname = true,
     enableLegacyChannelModules = false,
     uikitOptions,
+    htmlTextDirection = 'ltr',
     // The below configs are duplicates of the Dashboard UIKit Configs.
     // Since their default values will be set in the Sendbird component,
     // we don't need to set them here.
@@ -167,6 +169,7 @@ export default function App(props: AppProps) {
         isReactionEnabled={isReactionEnabled}
         replyType={replyType}
         showSearchIcon={showSearchIcon}
+        htmlTextDirection={htmlTextDirection}
       />
     </Sendbird>
   );

src/modules/App/types.ts

@@ -6,13 +6,15 @@ import {
   UserListQuery,
   RenderUserProfileProps,
   SendBirdProviderConfig,
+  HTMLTextDirection,
 } from '../../types';
 import { CustomExtensionParams, SBUEventHandlers, SendbirdChatInitParams } from '../../lib/types';
 import { SendableMessageType } from '../../utils';
 
 export interface AppLayoutProps {
   isReactionEnabled?: boolean;
   replyType?: 'NONE' | 'QUOTE_REPLY' | 'THREAD';
+  htmlTextDirection?: HTMLTextDirection;
   isMessageGroupingEnabled?: boolean;
   isMultipleFilesMessageEnabled?: boolean;
   allowProfileEdit?: boolean;

src/stories/apps/GroupChannelApp.stories.tsx

@@ -29,6 +29,7 @@ const meta: Meta<typeof App> = {
         'isMessageReceiptStatusEnabledOnChannelList',
         'isMessageGroupingEnabled',
         'disableAutoSelect',
+        'htmlTextDirection',
       ],
     },
   },
@@ -136,6 +137,12 @@ const meta: Meta<typeof App> = {
         'A property that determines whether to automatically select another channel when the currently selected channel is deleted, or the user exits the channel, causing it to be deselected in the channel list.',
       control: 'boolean',
     },
+    htmlTextDirection: {
+      type: 'string',
+      description: 'A property that sets the text direction of the HTML. `ltr` is for left-to-right, and `rtl` is for right-to-left.',
+      control: 'radio',
+      options: ['ltr', 'rtl'],
+    }
   },
 };
 export default meta;
@@ -169,4 +176,5 @@ Default.args = {
   isMessageReceiptStatusEnabledOnChannelList: true,
   isMessageGroupingEnabled: true,
   disableAutoSelect: false,
+  htmlTextDirection: 'ltr',
 };

src/types.ts

@@ -91,3 +91,5 @@ export enum MessageContentMiddleContainerType {
   DEFAULT = 'default',
   WIDE = 'wide',
 }
+
+export type HTMLTextDirection = 'ltr' | 'rtl';