feat: Add RTL Support to Widget (#11022)

This PR adds RTL support to the web widget for improved right-to-left language compatibility, updates colors, and cleans up code.

Fixes https://linear.app/chatwoot/issue/CW-4089/rtl-issues-on-widget

https://github.com/chatwoot/chatwoot/issues/9791

Other PR: https://github.com/chatwoot/chatwoot/pull/11016

app/javascript/widget/components/GroupedAvatars.vue

@@ -1,31 +1,33 @@
-<script>
+<script setup>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import { defineProps, computed } from 'vue';
 
-export default {
-  name: 'GroupedAvatars',
-  components: { Thumbnail },
-  props: {
-    users: {
-      type: Array,
-      default: () => [],
-    },
+const props = defineProps({
+  users: {
+    type: Array,
+    default: () => [],
   },
-};
+  limit: {
+    type: Number,
+    default: 4,
+  },
+});
+
+const usersToDisplay = computed(() => props.users.slice(0, props.limit));
 </script>
 
 <template>
   <div class="flex">
     <span
-      v-for="(user, index) in users"
+      v-for="(user, index) in usersToDisplay"
       :key="user.id"
-      :class="`${
-        index ? '-ml-4' : ''
-      } inline-block rounded-full text-white shadow-solid`"
+      :class="index ? 'ltr:-ml-4 rtl:-mr-4' : ''"
+      class="inline-block rounded-full text-white shadow-solid"
     >
       <Thumbnail
         size="36px"
         :username="user.name"
-        :src="user.avatar"
+        :src="user.avatar_url"
         has-border
       />
     </span>