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

@@ -4,7 +4,6 @@ import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import HeaderActions from './HeaderActions.vue';
 import routerMixin from 'widget/mixins/routerMixin';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   name: 'ChatHeader',
@@ -35,10 +34,6 @@ export default {
       default: () => {},
     },
   },
-  setup() {
-    const { getThemeClass } = useDarkMode();
-    return { getThemeClass };
-  },
   computed: {
     isOnline() {
       const { workingHoursEnabled } = this.channelConfig;
@@ -59,43 +54,32 @@ export default {
 </script>
 
 <template>
-  <header
-    class="flex justify-between w-full p-5"
-    :class="getThemeClass('bg-white', 'dark:bg-slate-900')"
-  >
+  <header class="flex justify-between w-full p-5 bg-n-background gap-2">
     <div class="flex items-center">
       <button
         v-if="showBackButton"
-        class="px-2 -ml-3"
+        class="px-2 ltr:-ml-3 rtl:-mr-3"
         @click="onBackButtonClick"
       >
-        <FluentIcon
-          icon="chevron-left"
-          size="24"
-          :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
-        />
+        <FluentIcon icon="chevron-left" size="24" class="text-n-slate-12" />
       </button>
       <img
         v-if="avatarUrl"
-        class="w-8 h-8 mr-3 rounded-full"
+        class="w-8 h-8 ltr:mr-3 rtl:ml-3 rounded-full"
         :src="avatarUrl"
         alt="avatar"
       />
-      <div>
+      <div class="flex flex-col gap-1">
         <div
-          class="flex items-center text-base font-medium leading-4"
-          :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
+          class="flex items-center text-base font-medium leading-4 text-n-slate-12"
         >
-          <span v-dompurify-html="title" class="mr-1" />
+          <span v-dompurify-html="title" class="ltr:mr-1 rtl:ml-1" />
           <div
             :class="`h-2 w-2 rounded-full
               ${isOnline ? 'bg-green-500' : 'hidden'}`"
           />
         </div>
-        <div
-          class="mt-1 text-xs leading-3"
-          :class="getThemeClass('text-black-700', 'dark:text-slate-400')"
-        >
+        <div class="text-xs leading-3 text-n-slate-11">
           {{ replyWaitMessage }}
         </div>
       </div>