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/shared/components/ChatOptions.vue

@@ -43,66 +43,24 @@ export default {
 </script>
 
 <template>
-  <div class="options-message chat-bubble agent bg-white dark:bg-slate-700">
-    <div class="card-body">
-      <h4 class="title text-black-900 dark:text-slate-50">
-        <div
-          v-dompurify-html="formatMessage(title, false)"
-          class="message-content text-black-900 dark:text-slate-50"
-        />
-      </h4>
-      <ul
-        v-if="!hideFields"
-        class="options"
-        :class="{ 'has-selected': !!selected }"
-      >
-        <ChatOption
-          v-for="option in options"
-          :key="option.id"
-          :action="option"
-          :is-selected="isSelected(option)"
-          @option-select="onClick"
-        />
-      </ul>
-    </div>
+  <div
+    class="chat-bubble agent max-w-64 !py-2 !px-4 rounded-lg overflow-hidden mt-1 bg-n-background dark:bg-n-solid-3"
+  >
+    <h4 class="text-n-slate-12 text-sm font-normal my-1 leading-[1.5]">
+      <div
+        v-dompurify-html="formatMessage(title, false)"
+        class="text-n-slate-12"
+      />
+    </h4>
+    <ul v-if="!hideFields" class="w-full">
+      <ChatOption
+        v-for="option in options"
+        :key="option.id"
+        :action="option"
+        :is-selected="isSelected(option)"
+        class="list-none p-0"
+        @option-select="onClick"
+      />
+    </ul>
   </div>
 </template>
-
-<style lang="scss">
-@import 'dashboard/assets/scss/variables.scss';
-
-.has-selected {
-  .option-button:not(.is-selected) {
-    color: $color-light-gray;
-    cursor: initial;
-  }
-}
-</style>
-
-<style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-
-.options-message {
-  max-width: 17rem;
-  padding: $space-small $space-normal;
-  border-radius: $space-small;
-  overflow: hidden;
-
-  .title {
-    font-size: $font-size-default;
-    font-weight: $font-weight-normal;
-    margin-top: $space-smaller;
-    margin-bottom: $space-smaller;
-    line-height: 1.5;
-  }
-
-  .options {
-    width: 100%;
-
-    > li {
-      list-style: none;
-      padding: 0;
-    }
-  }
-}
-</style>