From 533fdb1b3a293f75380bfcc583d8b031ce4b5420 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Thu, 10 Mar 2022 14:39:33 +0100
Subject: [PATCH] =?UTF-8?q?docs(theme):=20=F0=9F=93=9D=20Add=20RTL=20guide?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/docs/docs/guides/rtl.md                  | 28 +++++++++++++++++++
 .../ChatBlock/AvatarSideContainer.tsx         |  2 +-
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 apps/docs/docs/guides/rtl.md

diff --git a/apps/docs/docs/guides/rtl.md b/apps/docs/docs/guides/rtl.md
new file mode 100644
index 0000000000..424b57c3ce
--- /dev/null
+++ b/apps/docs/docs/guides/rtl.md
@@ -0,0 +1,28 @@
+# Enable RTL
+
+- Head over to the "Theme" tab
+- Paste the following Custom CSS:
+
+```css
+body {
+  direction: rtl;
+}
+
+.typebot-avatar-container {
+  margin-right: 0;
+  margin-left: 0.5rem;
+}
+
+.typebot-guest-bubble {
+  margin-right: 0;
+  margin-left: 0.5rem;
+}
+
+.bubble1,
+.bubble2 {
+  margin-right: 0;
+  margin-left: 0.25rem;
+}
+```
+
+If there is any visual flaw, [contact me](mailto:support@typebot.freshdesk.com) so that I can adjust the CSS rules
diff --git a/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx b/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx
index 0d15bbdb69..6926513491 100644
--- a/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx
+++ b/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx
@@ -43,7 +43,7 @@ export const AvatarSideContainer = forwardRef(
 
     return (
       <div
-        className="flex w-6 xs:w-10 mr-2 mb-2 flex-shrink-0 items-center relative "
+        className="flex w-6 xs:w-10 mr-2 mb-2 flex-shrink-0 items-center relative typebot-avatar-container "
         ref={scrollingSideBlockRef}
       >
         <CSSTransition