docs(theme): 📝 Add RTL guide

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

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