chore: Refactor conversation info panel for RTL (#6526)

* chore: Refactor conversation info panel for RTL

* chore: Adds comments

* chore: Settings header icon fix

* chore: Toggle layout switch

* chore: Border fix in chat list

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -27,7 +27,7 @@
       <emoji-input
         v-if="showEmojiPicker"
         v-on-clickaway="hideEmojiPicker"
-        :class="emojiDialogClassOnExpanedLayout"
+        :class="emojiDialogClassOnExpandedLayoutAndRTLView"
         :on-click="emojiOnClick"
       />
       <reply-email-head
@@ -179,6 +179,7 @@ import { trimContent, debounce } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants';
 import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
+import rtlMixin from 'shared/mixins/rtlMixin';
 
 const EmojiInput = () => import('shared/components/emoji/EmojiInput');
 
@@ -202,6 +203,7 @@ export default {
     uiSettingsMixin,
     alertMixin,
     messageFormatterMixin,
+    rtlMixin,
   ],
   props: {
     selectedTweet: {
@@ -422,10 +424,14 @@ export default {
       } = this.uiSettings;
       return conversationDisplayType !== CONDENSED;
     },
-    emojiDialogClassOnExpanedLayout() {
-      return this.isOnExpandedLayout || this.popoutReplyBox
-        ? 'emoji-dialog--expanded'
-        : '';
+    emojiDialogClassOnExpandedLayoutAndRTLView() {
+      if (this.isOnExpandedLayout || this.popoutReplyBox) {
+        return 'emoji-dialog--expanded';
+      }
+      if (this.isRTLView) {
+        return 'emoji-dialog--rtl';
+      }
+      return '';
     },
     replyToUserLength() {
       const selectedTweet = this.selectedTweet || {};
@@ -1098,7 +1104,7 @@ export default {
 
 .emoji-dialog {
   top: unset;
-  bottom: var(--space-normal);
+  bottom: -40px;
   left: -320px;
   right: unset;
 
@@ -1109,6 +1115,19 @@ export default {
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));
   }
 }
+
+.emoji-dialog--rtl {
+  left: unset;
+  right: -320px;
+  &::before {
+    left: var(--space-minus-normal);
+    transform: rotate(90deg);
+    right: 0;
+    bottom: var(--space-small);
+    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));
+  }
+}
+
 .emoji-dialog--expanded {
   left: unset;
   bottom: var(--space-jumbo);

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue

@@ -184,9 +184,18 @@ export default {
 </script>
 
 <style scoped lang="scss">
+// For RTL direction view
+.app-rtl--wrapper {
+  .bulk-action__actions {
+    ::v-deep .button--only-icon:last-child {
+      margin-right: var(--space-smaller);
+    }
+  }
+}
+
 .bulk-action__container {
   border-bottom: 1px solid var(--s-100);
-  padding: var(--space-normal) var(--space-one);
+  padding: var(--space-normal);
   position: relative;
 }
 
@@ -195,7 +204,7 @@ export default {
 
   span {
     font-size: var(--font-size-mini);
-    margin-left: var(--space-smaller);
+    margin: 0 var(--space-smaller);
   }
 
   input[type='checkbox'] {