diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss index f072d86ded..bfd974ed8a 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.module.scss +++ b/src/pages/common/components/ChatComponent/ChatComponent.module.scss @@ -96,8 +96,12 @@ display: flex; flex-direction: column; justify-content: center; - padding: 0.125rem 1.5rem 0.125rem 0.25rem; word-break: break-word; + padding: 0.125rem 1.75rem 0.125rem 0.25rem; +} + +.messageInputRtl { + padding: 0.125rem 0.25rem 0.125rem 1.75rem; } .messageInputEmpty { diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx index 8cdade8355..ef31be0348 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.tsx +++ b/src/pages/common/components/ChatComponent/ChatComponent.tsx @@ -658,6 +658,7 @@ export default function ChatComponent({ [styles.messageInputEmpty]: checkIsTextEditorValueEmpty(message), })} + classNameRtl={styles.messageInputRtl} elementStyles={{ emoji: classNames({ [styles.singleEmojiText]: emojiCount.isSingleEmoji, diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss index ee1bf0d5cf..9da9e2e916 100644 --- a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss +++ b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss @@ -111,6 +111,11 @@ word-break: break-word; } +.messageContentRtl { + direction: rtl; + text-align: right; +} + .messageContentCurrentUser { color: $white; margin-right: 2.5rem; diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx index 7cf8c2cd0e..343a2e74c9 100644 --- a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx +++ b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx @@ -40,8 +40,7 @@ import { parseStringToTextEditorValue, } from "@/shared/ui-kit"; import { ChatImageGallery } from "@/shared/ui-kit"; -import { StaticLinkType, isRTL } from "@/shared/utils"; -import { getUserName } from "@/shared/utils"; +import { StaticLinkType, isRtlText, getUserName } from "@/shared/utils"; import { convertBytes } from "@/shared/utils/convertBytes"; import { EditMessageInput } from "../EditMessageInput"; import { ChatMessageLinkify, InternalLinkData, Time } from "./components"; @@ -302,12 +301,14 @@ export default function ChatMessage({ className={classNames( styles.messageContent, styles.replyMessageContent, - { [styles.replyMessageContentCurrentUser]: !isNotCurrentUserMessage, [styles.replyMessageContentWithImage]: image, [styles.replyMessageContentWithFile]: file, + [styles.messageContentRtl]: isRtlText( + discussionMessage?.parentMessage?.text, + ), }, )} > @@ -378,7 +379,7 @@ export default function ChatMessage({ ref={messageRef} className={classNames(styles.messageText, { [styles.messageTextCurrentUser]: !isNotCurrentUserMessage, - [styles.messageTextRtl]: isRTL(discussionMessage.text), + [styles.messageTextRtl]: isRtlText(discussionMessage.text), [styles.messageTextWithReply]: !!discussionMessage.parentMessage?.id, [styles.systemMessage]: isSystemMessage, @@ -398,6 +399,7 @@ export default function ChatMessage({