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

@@ -1,47 +1,30 @@
 <script>
-import { useDarkMode } from 'widget/composables/useDarkMode';
 export default {
   name: 'AgentTypingBubble',
-  setup() {
-    const { getThemeClass } = useDarkMode();
-    return { getThemeClass };
-  },
 };
 </script>
 
 <template>
-  <div class="agent-message-wrap">
+  <div class="agent-message-wrap sticky bottom-1">
     <div class="agent-message">
       <div class="avatar-wrap" />
       <div class="message-wrap mt-2">
         <div
-          class="typing-bubble chat-bubble agent"
-          :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
+          class="chat-bubble agent typing-bubble bg-n-background dark:bg-n-solid-3"
         >
-          <img src="assets/images/typing.gif" alt="Agent is typing a message" />
+          <img
+            src="assets/images/typing.gif"
+            alt="Agent is typing a message"
+            class="!w-full"
+          />
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-@import 'widget/assets/scss/variables.scss';
-
-.agent-message-wrap {
-  position: sticky;
-  bottom: $space-smaller;
-}
-
 .typing-bubble {
-  max-width: $space-normal * 2.4;
-  padding: $space-small;
-  border-bottom-left-radius: $space-two;
-  border-top-left-radius: $space-small;
-
-  img {
-    width: 100%;
-  }
+  @apply max-w-[2.4rem] p-2 ltr:rounded-bl-[1.25rem] rtl:rounded-br-[1.25rem] ltr:rounded-tl-lg rtl:rounded-tr-lg;
 }
 </style>