fix RTL language issues

Cognigy · Jul 12, 2024 · 5fe0677 · 5fe0677
1 parent cfe15e8
commit 5fe0677
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 5 deletions.
diff --git a/src/webchat-embed/embedded-webchat-styles.css b/src/webchat-embed/embedded-webchat-styles.css
@@ -25,6 +25,11 @@
     z-index: 1;
 }
 
+[data-cognigy-webchat-root] button[data-cognigy-webchat-toggle]:dir(rtl) {
+    left: 20px;
+    right: unset;
+}
+
 [data-cognigy-webchat-root] button[data-cognigy-webchat-toggle]:focus {
 	box-shadow: 0 0 4px 3px rgb(0, 0, 0, 0.2);
 }
@@ -41,6 +46,11 @@
         height: 100%;
     }
 
+    [data-cognigy-webchat-root]:dir(rtl) {
+        right: auto;
+        left: unset;
+    }
+
     [data-cognigy-webchat-root] [data-cognigy-webchat] {
         left: auto;
         top: auto;
@@ -54,11 +64,25 @@
         border-radius: 16px;
         box-shadow: 0 5px 18px 0 rgba(151, 124, 156, 0.2), 0 5px 32px 0 rgba(203, 195, 212, 0.2), 0 8px 58px 0 rgba(216, 212, 221, 0.1);
     }
+
+    [data-cognigy-webchat-root] [data-cognigy-webchat]:dir(rtl) {
+        right: auto;
+        left: 20px;
+    }
+
 }
 
 @media screen and (min-width: 576px) and (max-height: 870px) {
     [data-cognigy-webchat-root] [data-cognigy-webchat] {
 		height: calc(100% - 90px);
 		min-height: 558px;
     }
+}
+
+.cc-rtl-flip {
+    transform: scaleX(-1);
+}
+
+.cc-rtl-flip-invert {
+    transform: scaleX(1) !important; 
 }
diff --git a/src/webchat-ui/components/WebchatUI.tsx b/src/webchat-ui/components/WebchatUI.tsx
@@ -215,6 +215,21 @@ const RegularLayoutContentWrapper = styled.div(({ theme }) => ({
 		transform: "translateX(100%)",
 		transition: "transform 400ms ease-out",
 	},
+
+	"&.slide-in-enter:dir(rtl)": {
+		transform: "translateX(-100%)",
+	},
+	"&.slide-in-enter-active:dir(rtl)": {
+		transform: "translateX(0%)",
+		transition: "transform 400ms ease-out",
+	},
+	"&.slide-in-exit:dir(rtl)": {
+		transform: "translateX(0%)",
+	},
+	"&.slide-in-exit-active:dir(rtl)": {
+		transform: "translateX(-100%)",
+		transition: "transform 400ms ease-out",
+	},
 }));
 
 export class WebchatUI extends React.PureComponent<

diff --git a/src/webchat-ui/components/plugins/input/base/BaseInput.tsx b/src/webchat-ui/components/plugins/input/base/BaseInput.tsx
@@ -505,7 +505,7 @@ export class BaseInput extends React.PureComponent<IBaseInputProps, IBaseInputSt
 							disabled={
 								(this.state.text === "" && isFileListEmpty) || fileUploadError
 							}
-							className="webchat-input-button-send"
+							className="webchat-input-button-send cc-rtl-flip"
 							aria-label="Send Message"
 							id="webchatInputMessageSendMessageButton"
 						>

diff --git a/src/webchat-ui/components/presentational/Header.tsx b/src/webchat-ui/components/presentational/Header.tsx
@@ -146,7 +146,7 @@ const Header: FC<HeaderProps> = props => {
 						<HeaderIconButton
 							data-header-back-button
 							onClick={onGoBack}
-							className="webchat-header-back-button"
+							className="webchat-header-back-button cc-rtl-flip"
 							aria-label="Go Back"
 							ref={closeButtonRef}
 						>

diff --git a/src/webchat-ui/components/presentational/previous-conversations/ConversationsListItem.tsx b/src/webchat-ui/components/presentational/previous-conversations/ConversationsListItem.tsx
@@ -145,7 +145,7 @@ export const ConversationsListItem = (props: IConversationsListItemProps) => {
 				</CenterMeta>
 			</Center>
 			<Right>
-				<ArrowIcon />
+				<ArrowIcon className="cc-rtl-flip-invert" />
 			</Right>
 		</ListItem>
 	);

diff --git a/src/webchat-ui/style.ts b/src/webchat-ui/style.ts
@@ -120,15 +120,23 @@ const deriveDisabledColor = (color: string) => {
 
 export const createWebchatTheme = (theme: Partial<IWebchatTheme> = {}): IWebchatTheme => {
 
+    const htmlDirection = document?.documentElement?.dir;
+    const bodyDirection = document?.body?.dir;
+    const isRTL = htmlDirection === 'rtl' || bodyDirection === 'rtl';
+
     // Webchat endpoint default color
-    const webchatEndpointDefaultColor = '#2C6CAF';
+    const webchatEndpointDefaultColor = '#2455E6';
 
     // Webchat 3 Theme color defaults
     const primaryColor = '#2455E6';
 
     const secondaryColor = '#1A1A1A';
 
     let backgroundHome = 'radial-gradient(204.5% 136.79% at 0.53% 95.79%, #EDECF9 0%, #BFBAFF 31.77%, #2152E3 65.63%, #05309E 100%)';
+    if (isRTL) {
+        console.log('RTL');
+        backgroundHome = 'radial-gradient(at right 95.79%, hsl(225, 80%, 32%) 0%, #2455E6 34.37%, hsl(225, 80%, 72%) 68.23%, hsl(225, 79%, 92%) 100%)';
+    }
     const backgroundWebchat = "#FFFFFF";
     const backgroundBotMessage = "#FFFFFF";
     const backgroundUserMessage = "#E8EBFF";
@@ -164,7 +172,6 @@ export const createWebchatTheme = (theme: Partial<IWebchatTheme> = {}): IWebchat
         }
     }
 
-
     if (!theme.primaryColor)
         theme.primaryColor = primaryColor;