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/ChatHeaderExpanded.vue

@@ -1,45 +1,36 @@
-<script>
+<script setup>
 import HeaderActions from './HeaderActions.vue';
-import { useDarkMode } from 'widget/composables/useDarkMode';
+import { computed } from 'vue';
 
-export default {
-  name: 'ChatHeaderExpanded',
-  components: {
-    HeaderActions,
+const props = defineProps({
+  avatarUrl: {
+    type: String,
+    default: '',
   },
-  props: {
-    avatarUrl: {
-      type: String,
-      default: '',
-    },
-    introHeading: {
-      type: String,
-      default: '',
-    },
-    introBody: {
-      type: String,
-      default: '',
-    },
-    showPopoutButton: {
-      type: Boolean,
-      default: false,
-    },
+  introHeading: {
+    type: String,
+    default: '',
   },
-  setup() {
-    const { getThemeClass } = useDarkMode();
-    return { getThemeClass };
+  introBody: {
+    type: String,
+    default: '',
   },
-};
+  showPopoutButton: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const containerClasses = computed(() => [
+  props.avatarUrl ? 'justify-between' : 'justify-end',
+]);
 </script>
 
 <template>
   <header
     class="header-expanded pt-6 pb-4 px-5 relative box-border w-full bg-transparent"
   >
-    <div
-      class="flex items-start"
-      :class="[avatarUrl ? 'justify-between' : 'justify-end']"
-    >
+    <div class="flex items-start" :class="containerClasses">
       <img
         v-if="avatarUrl"
         class="h-12 rounded-full"
@@ -53,13 +44,11 @@ export default {
     </div>
     <h2
       v-dompurify-html="introHeading"
-      class="mt-4 text-2xl mb-1.5 font-medium"
-      :class="getThemeClass('text-slate-900', 'dark:text-slate-50')"
+      class="mt-4 text-2xl mb-1.5 font-medium text-n-slate-12"
     />
     <p
       v-dompurify-html="introBody"
-      class="text-base leading-normal"
-      :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
+      class="text-lg leading-normal text-n-slate-11"
     />
   </header>
 </template>