diff --git a/ts/components/SessionMainPanel.tsx b/ts/components/SessionMainPanel.tsx
index 035275712..d5d383331 100644
--- a/ts/components/SessionMainPanel.tsx
+++ b/ts/components/SessionMainPanel.tsx
@@ -5,12 +5,14 @@ import { getFocusedSettingsSection } from '../state/selectors/section';
 
 import { SmartSessionConversation } from '../state/smart/SessionConversation';
 import { SessionSettingsView } from './settings/SessionSettings';
+import { useHTMLDirection } from '../util/i18n';
 
 const FilteredSettingsView = SessionSettingsView as any;
 
 export const SessionMainPanel = () => {
   const focusedSettingsSection = useSelector(getFocusedSettingsSection);
   const isSettingsView = focusedSettingsSection !== undefined;
+  const htmlDirection = useHTMLDirection();
 
   // even if it looks like this does nothing, this does update the redux store.
   useAppIsFocused();
@@ -20,7 +22,7 @@ export const SessionMainPanel = () => {
   }
   return (
     <div className="session-conversation">
-      <SmartSessionConversation />
+      <SmartSessionConversation htmlDirection={htmlDirection} />
     </div>
   );
 };
diff --git a/ts/state/selectors/user.ts b/ts/state/selectors/user.ts
index c4a75a5de..69535cfda 100644
--- a/ts/state/selectors/user.ts
+++ b/ts/state/selectors/user.ts
@@ -4,7 +4,6 @@ import { LocalizerType } from '../../types/Util';
 
 import { StateType } from '../reducer';
 import { UserStateType } from '../ducks/user';
-import { HTMLDirection, isRtlBody } from '../../util/i18n';
 
 export const getUser = (state: StateType): UserStateType => state.user;
 
@@ -14,8 +13,3 @@ export const getOurNumber = createSelector(
 );
 
 export const getIntl = createSelector(getUser, (): LocalizerType => window.i18n);
-
-export const getHTMLDirection = createSelector(
-  getUser,
-  (): HTMLDirection => (isRtlBody() ? 'rtl' : 'ltr')
-);
diff --git a/ts/state/smart/SessionConversation.ts b/ts/state/smart/SessionConversation.ts
index 09d1b5174..39809f652 100644
--- a/ts/state/smart/SessionConversation.ts
+++ b/ts/state/smart/SessionConversation.ts
@@ -17,9 +17,14 @@ import {
 } from '../selectors/selectedConversation';
 import { getStagedAttachmentsForCurrentConversation } from '../selectors/stagedAttachments';
 import { getTheme } from '../selectors/theme';
-import { getHTMLDirection, getOurNumber } from '../selectors/user';
+import { getOurNumber } from '../selectors/user';
+import { HTMLDirection } from '../../util/i18n';
 
-const mapStateToProps = (state: StateType) => {
+type SmartSessionConversationOwnProps = {
+  htmlDirection: HTMLDirection;
+};
+
+const mapStateToProps = (state: StateType, ownProps: SmartSessionConversationOwnProps) => {
   return {
     selectedConversation: getSelectedConversation(state),
     selectedConversationKey: getSelectedConversationKey(state),
@@ -33,7 +38,7 @@ const mapStateToProps = (state: StateType) => {
     stagedAttachments: getStagedAttachmentsForCurrentConversation(state),
     hasOngoingCallWithFocusedConvo: getHasOngoingCallWithFocusedConvo(state),
     isSelectedConvoInitialLoadingInProgress: getIsSelectedConvoInitialLoadingInProgress(state),
-    htmlDirection: getHTMLDirection(state),
+    htmlDirection: ownProps.htmlDirection,
   };
 };
 
diff --git a/ts/util/i18n.ts b/ts/util/i18n.ts
index 135f1d48e..7b77826c4 100644
--- a/ts/util/i18n.ts
+++ b/ts/util/i18n.ts
@@ -73,3 +73,5 @@ export function isRtlBody(): boolean {
 
   return body?.classList.contains('rtl') || false;
 }
+
+export const useHTMLDirection = (): HTMLDirection => (isRtlBody() ? 'rtl' : 'ltr');