From ba11b948e7a682c3389b34c23720129bb85a01ec Mon Sep 17 00:00:00 2001
From: Sathurshan <jsathu07@gmail.com>
Date: Wed, 13 Dec 2023 16:16:42 +0530
Subject: [PATCH] feat: display language icon for auto translated msgs

---
 .../Components/RightIcons/Translated.tsx      | 23 +++++++++++++++++++
 .../message/Components/RightIcons/index.tsx   |  5 +++-
 app/containers/message/Message.tsx            |  1 +
 app/containers/message/User.tsx               | 17 +++++++++++++-
 4 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 app/containers/message/Components/RightIcons/Translated.tsx

diff --git a/app/containers/message/Components/RightIcons/Translated.tsx b/app/containers/message/Components/RightIcons/Translated.tsx
new file mode 100644
index 000000000..f4c19576e
--- /dev/null
+++ b/app/containers/message/Components/RightIcons/Translated.tsx
@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+
+import { CustomIcon } from '../../../CustomIcon';
+import { useTheme } from '../../../../theme';
+import { themes } from '../../../../lib/constants';
+import styles from '../../styles';
+
+const Translated = memo(({ isTranslated }: { isTranslated: boolean }) => {
+	const { theme } = useTheme();
+
+	if (!isTranslated) {
+		return null;
+	}
+
+	return (
+		<View style={styles.rightIcons}>
+			<CustomIcon name='language' size={16} color={themes[theme].auxiliaryText} />
+		</View>
+	);
+});
+
+export default Translated;
diff --git a/app/containers/message/Components/RightIcons/index.tsx b/app/containers/message/Components/RightIcons/index.tsx
index fb96aaaf5..1bffa4c1f 100644
--- a/app/containers/message/Components/RightIcons/index.tsx
+++ b/app/containers/message/Components/RightIcons/index.tsx
@@ -5,6 +5,7 @@ import Encrypted from './Encrypted';
 import Edited from './Edited';
 import MessageError from './MessageError';
 import ReadReceipt from './ReadReceipt';
+import Translated from './Translated';
 import { MessageType } from '../../../../definitions';
 
 const styles = StyleSheet.create({
@@ -20,14 +21,16 @@ interface IRightIcons {
 	isReadReceiptEnabled?: boolean;
 	unread?: boolean;
 	hasError: boolean;
+	isTranslated: boolean;
 }
 
-const RightIcons = ({ type, msg, isEdited, hasError, isReadReceiptEnabled, unread }: IRightIcons) => (
+const RightIcons = ({ type, msg, isEdited, hasError, isReadReceiptEnabled, unread, isTranslated }: IRightIcons) => (
 	<View style={styles.actionIcons}>
 		<Encrypted type={type} />
 		<Edited testID={`${msg}-edited`} isEdited={isEdited} />
 		<MessageError hasError={hasError} />
 		<ReadReceipt isReadReceiptEnabled={isReadReceiptEnabled} unread={unread} />
+		<Translated isTranslated={isTranslated} />
 	</View>
 );
 
diff --git a/app/containers/message/Message.tsx b/app/containers/message/Message.tsx
index 133bc6e02..1f134615f 100644
--- a/app/containers/message/Message.tsx
+++ b/app/containers/message/Message.tsx
@@ -117,6 +117,7 @@ const Message = React.memo((props: IMessage) => {
 						hasError={props.hasError}
 						isReadReceiptEnabled={props.isReadReceiptEnabled}
 						unread={props.unread}
+						isTranslated={props.isTranslated}
 					/>
 				) : null}
 			</View>
diff --git a/app/containers/message/User.tsx b/app/containers/message/User.tsx
index 09c548f72..a032ac35a 100644
--- a/app/containers/message/User.tsx
+++ b/app/containers/message/User.tsx
@@ -60,10 +60,24 @@ interface IMessageUser {
 	isEdited: boolean;
 	isReadReceiptEnabled?: boolean;
 	unread?: boolean;
+	isTranslated: boolean;
 }
 
 const User = React.memo(
-	({ isHeader, useRealName, author, alias, ts, timeFormat, hasError, navToRoomInfo, type, isEdited, ...props }: IMessageUser) => {
+	({
+		isHeader,
+		useRealName,
+		author,
+		alias,
+		ts,
+		timeFormat,
+		hasError,
+		navToRoomInfo,
+		type,
+		isEdited,
+		isTranslated,
+		...props
+	}: IMessageUser) => {
 		const { user } = useContext(MessageContext);
 		const { colors } = useTheme();
 
@@ -110,6 +124,7 @@ const User = React.memo(
 						hasError={hasError}
 						isReadReceiptEnabled={props.isReadReceiptEnabled}
 						unread={props.unread}
+						isTranslated={isTranslated}
 					/>
 				</View>
 			);