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

@@ -11,7 +11,6 @@ import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import configMixin from '../mixins/configMixin';
 import messageMixin from '../mixins/messageMixin';
 import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 import ReplyToChip from 'widget/components/ReplyToChip.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { emitter } from 'shared/helpers/mitt';
@@ -39,12 +38,6 @@ export default {
       default: () => {},
     },
   },
-  setup() {
-    const { getThemeClass } = useDarkMode();
-    return {
-      getThemeClass,
-    };
-  },
   data() {
     return {
       hasImageError: false,
@@ -183,8 +176,15 @@ export default {
         <div v-if="hasReplyTo" class="flex mt-2 mb-1 text-xs">
           <ReplyToChip :reply-to="replyTo" />
         </div>
-        <div class="flex gap-1">
-          <div class="space-y-2">
+        <div class="flex w-full gap-1">
+          <div
+            class="space-y-2"
+            :class="{
+              'w-full':
+                contentType === 'form' &&
+                !messageContentAttributes?.submitted_values,
+            }"
+          >
             <AgentMessageBubble
               v-if="shouldDisplayAgentMessage"
               :content-type="contentType"
@@ -195,10 +195,8 @@ export default {
             />
             <div
               v-if="hasAttachments"
-              class="space-y-2 chat-bubble has-attachment agent"
-              :class="
-                (wrapClass, getThemeClass('bg-white', 'dark:bg-slate-700'))
-              "
+              class="space-y-2 chat-bubble has-attachment agent bg-n-background dark:bg-n-solid-3"
+              :class="wrapClass"
             >
               <div
                 v-for="attachment in message.attachments"
@@ -219,7 +217,11 @@ export default {
                   @error="onVideoLoadError"
                 />
 
-                <audio v-else-if="attachment.file_type === 'audio'" controls>
+                <audio
+                  v-else-if="attachment.file_type === 'audio'"
+                  controls
+                  class="h-10 dark:invert"
+                >
                   <source :src="attachment.data_url" />
                 </audio>
                 <FileBubble v-else :url="attachment.data_url" />
@@ -236,8 +238,7 @@ export default {
         <p
           v-if="message.showAvatar || hasRecordedResponse"
           v-dompurify-html="agentName"
-          class="agent-name"
-          :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
+          class="agent-name text-n-slate-11"
         />
       </div>
     </div>

app/javascript/widget/components/AgentMessageBubble.vue

@@ -6,7 +6,6 @@ import ChatOptions from 'shared/components/ChatOptions.vue';
 import ChatArticle from './template/Article.vue';
 import EmailInput from './template/EmailInput.vue';
 import CustomerSatisfaction from 'shared/components/CustomerSatisfaction.vue';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 import IntegrationCard from './template/IntegrationCard.vue';
 
 export default {
@@ -33,13 +32,11 @@ export default {
   setup() {
     const { formatMessage, getPlainText, truncateMessage, highlightContent } =
       useMessageFormatter();
-    const { getThemeClass } = useDarkMode();
     return {
       formatMessage,
       getPlainText,
       truncateMessage,
       highlightContent,
-      getThemeClass,
     };
   },
   computed: {
@@ -98,12 +95,11 @@ export default {
       v-if="
         !isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
       "
-      class="chat-bubble agent"
-      :class="getThemeClass('bg-white', 'dark:bg-slate-700 has-dark-mode')"
+      class="chat-bubble agent bg-n-background dark:bg-n-solid-3 text-n-slate-12"
     >
       <div
         v-dompurify-html="formatMessage(message, false)"
-        class="message-content text-slate-900 dark:text-slate-50"
+        class="message-content text-n-slate-12"
       />
       <EmailInput
         v-if="isTemplateEmail"

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>

app/javascript/widget/components/ArticleCardSkeletonLoader.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="py-4 space-y-4 bg-white dark:bg-slate-700">
-    <div class="space-y-2 animate-pulse">
-      <div class="h-6 bg-slate-100 dark:bg-slate-500 rounded w-2/5" />
-    </div>
-    <div class="space-y-2 animate-pulse">
-      <div class="h-4 bg-slate-100 dark:bg-slate-500 rounded" />
-      <div class="h-4 bg-slate-100 dark:bg-slate-500 rounded" />
-      <div class="h-4 bg-slate-100 dark:bg-slate-500 rounded" />
-    </div>
-    <div class="space-y-2 animate-pulse">
-      <div class="h-4 bg-slate-100 dark:bg-slate-500 rounded w-1/5" />
-    </div>
-  </div>
-</template>

app/javascript/widget/components/ArticleCategoryCard.vue

@@ -1,54 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import ArticleList from './ArticleList.vue';
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-
-export default {
-  components: { FluentIcon, ArticleList },
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    articles: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['view', 'viewAll'],
-  computed: {
-    ...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
-  },
-  methods: {
-    onArticleClick(link) {
-      this.$emit('view', link);
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <h3 class="mb-0 text-sm font-medium text-slate-800 dark:text-slate-50">
-      {{ title }}
-    </h3>
-    <ArticleList :articles="articles" @select-article="onArticleClick" />
-    <button
-      class="inline-flex items-center justify-between px-2 py-1 -ml-2 text-sm font-medium leading-6 rounded-md text-slate-800 dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
-      :style="{ color: widgetColor }"
-      @click="$emit('viewAll')"
-    >
-      <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
-      <FluentIcon icon="arrow-right" size="14" />
-    </button>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.see-articles {
-  color: var(--brand-textButtonClear);
-  svg {
-    color: var(--brand-textButtonClear);
-  }
-}
-</style>

app/javascript/widget/components/ArticleHero.vue

@@ -1,27 +0,0 @@
-<script>
-import CategoryCard from './ArticleCategoryCard.vue';
-export default {
-  components: { CategoryCard },
-  props: {
-    articles: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['view', 'viewAll'],
-  methods: {
-    onArticleClick(link) {
-      this.$emit('view', link);
-    },
-  },
-};
-</script>
-
-<template>
-  <CategoryCard
-    :title="$t('PORTAL.POPULAR_ARTICLES')"
-    :articles="articles.slice(0, 6)"
-    @view-all="$emit('viewAll')"
-    @view="onArticleClick"
-  />
-</template>

app/javascript/widget/components/ArticleList.vue

@@ -1,36 +0,0 @@
-<script>
-import ArticleListItem from './ArticleListItem.vue';
-
-export default {
-  components: {
-    ArticleListItem,
-  },
-  props: {
-    articles: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['selectArticle'],
-  data() {
-    return {};
-  },
-  methods: {
-    onClick(link) {
-      this.$emit('selectArticle', link);
-    },
-  },
-};
-</script>
-
-<template>
-  <ul role="list" class="py-2">
-    <ArticleListItem
-      v-for="article in articles"
-      :key="article.slug"
-      :link="article.link"
-      :title="article.title"
-      @select-article="onClick"
-    />
-  </ul>
-</template>

app/javascript/widget/components/ArticleListItem.vue

@@ -1,41 +0,0 @@
-<script>
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-
-export default {
-  components: { FluentIcon },
-  props: {
-    link: {
-      type: String,
-      default: '',
-    },
-    title: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['selectArticle'],
-  data() {
-    return {};
-  },
-  methods: {
-    onClick() {
-      this.$emit('selectArticle', this.link);
-    },
-  },
-};
-</script>
-
-<template>
-  <li
-    class="py-1 flex items-center justify-between -mx-1 px-1 hover:bg-slate-25 dark:hover:bg-slate-600 rounded cursor-pointer text-slate-700 dark:text-slate-50 dark:hover:text-slate-25 hover:text-slate-900"
-    role="button"
-    @click="onClick"
-  >
-    <button class="underline-offset-2 text-sm leading-6 text-left">
-      {{ title }}
-    </button>
-    <span class="pl-1 arrow">
-      <FluentIcon icon="arrow-right" size="14" />
-    </span>
-  </li>
-</template>

app/javascript/widget/components/ArticleSearch.vue

@@ -1,52 +0,0 @@
-<script>
-import { debounce } from '@chatwoot/utils';
-export default {
-  props: {
-    placeholder: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['search'],
-  data() {
-    return {
-      searchQuery: '',
-    };
-  },
-  methods: {
-    handleInput: debounce(
-      () => {
-        this.$emit('search', this.searchQuery);
-      },
-      500,
-      true
-    ),
-  },
-};
-</script>
-
-<template>
-  <div class="relative flex items-center">
-    <div
-      class="absolute inset-y-0 left-0 flex items-center px-2 py-2 text-slate-500"
-    >
-      <fluent-icon icon="search" size="14" />
-    </div>
-    <input
-      id="search"
-      v-model="searchQuery"
-      :placeholder="placeholder"
-      type="text"
-      name="search"
-      class="block w-full h-8 px-2 pl-6 pr-1 text-sm border rounded-md focus-visible:outline-none text-slate-800 border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
-      @input="handleInput"
-    />
-    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
-      <kbd
-        class="inline-flex items-center px-1 font-sans border rounded border-slate-200 text-xxs text-slate-400"
-      >
-        {{ '⌘K' }}
-      </kbd>
-    </div>
-  </div>
-</template>

app/javascript/widget/components/AvailableAgents.vue

@@ -1,27 +0,0 @@
-<script>
-import GroupedAvatars from 'widget/components/GroupedAvatars.vue';
-
-export default {
-  name: 'AvailableAgents',
-  components: { GroupedAvatars },
-  props: {
-    agents: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    users() {
-      return this.agents.slice(0, 4).map(agent => ({
-        id: agent.id,
-        avatar: agent.avatar_url,
-        name: agent.name,
-      }));
-    },
-  },
-};
-</script>
-
-<template>
-  <GroupedAvatars :users="users" />
-</template>

app/javascript/widget/components/Banner.vue

@@ -33,21 +33,15 @@ export default {
 </template>
 
 <style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-
 .banner {
-  color: $color-white;
-  font-size: $font-size-default;
-  font-weight: $font-weight-bold;
-  padding: $space-slab;
-  text-align: center;
+  @apply text-white text-sm font-semibold p-3 text-center;
 
   &.success {
-    background: $color-success;
+    @apply bg-n-teal-9;
   }
 
   &.error {
-    background: $color-error;
+    @apply bg-n-ruby-9;
   }
 }
 </style>

app/javascript/widget/components/ChatAttachment.vue

@@ -147,7 +147,7 @@ export default {
     }"
     @input-file="onFileUpload"
   >
-    <button class="icon-button flex items-center justify-center">
+    <button class="min-h-8 min-w-8 flex items-center justify-center">
       <FluentIcon v-if="!isUploading.image" icon="attach" />
       <Spinner v-if="isUploading" size="small" />
     </button>

app/javascript/widget/components/ChatFooter.vue

@@ -156,23 +156,3 @@ export default {
     </CustomButton>
   </div>
 </template>
-
-<style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-
-.branding {
-  align-items: center;
-  color: $color-body;
-  display: flex;
-  font-size: $font-size-default;
-  justify-content: center;
-  padding: $space-one;
-  text-align: center;
-  text-decoration: none;
-
-  img {
-    margin-right: $space-small;
-    max-width: $space-two;
-  }
-}
-</style>

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>

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>

app/javascript/widget/components/ChatInputWrap.vue

@@ -6,7 +6,6 @@ import ChatSendButton from 'widget/components/ChatSendButton.vue';
 import configMixin from '../mixins/configMixin';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 
 import EmojiInput from 'shared/components/emoji/EmojiInput.vue';
 
@@ -30,10 +29,6 @@ export default {
       default: () => {},
     },
   },
-  setup() {
-    const { getThemeClass } = useDarkMode();
-    return { getThemeClass };
-  },
   data() {
     return {
       userInput: '',
@@ -53,18 +48,6 @@ export default {
     showSendButton() {
       return this.userInput.length > 0;
     },
-    inputColor() {
-      return `${this.getThemeClass('bg-white', 'dark:bg-slate-600')}
-        ${this.getThemeClass('text-black-900', 'dark:text-slate-50')}`;
-    },
-    emojiIconColor() {
-      return this.showEmojiPicker
-        ? `text-woot-500 ${this.getThemeClass(
-            'text-black-900',
-            'dark:text-slate-100'
-          )}`
-        : `${this.getThemeClass('text-black-900', 'dark:text-slate-100')}`;
-    },
   },
   watch: {
     isWidgetOpen(isWidgetOpen) {
@@ -133,8 +116,11 @@ export default {
 
 <template>
   <div
-    class="chat-message--input is-focused"
-    :class="getThemeClass('bg-white ', 'dark:bg-slate-600')"
+    class="items-center flex ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2 rounded-[7px] transition-all duration-200 bg-n-background !shadow-[0_0_0_1px,0_0_2px_3px]"
+    :class="{
+      '!shadow-n-brand dark:!shadow-n-brand': isFocused,
+      '!shadow-n-strong dark:!shadow-n-strong': !isFocused,
+    }"
     @keydown.esc="hideEmojiPicker"
   >
     <ResizableTextArea
@@ -144,26 +130,32 @@ export default {
       :rows="1"
       :aria-label="$t('CHAT_PLACEHOLDER')"
       :placeholder="$t('CHAT_PLACEHOLDER')"
-      class="form-input user-message-input is-focused"
-      :class="inputColor"
+      class="user-message-input reset-base"
       @typing-off="onTypingOff"
       @typing-on="onTypingOn"
       @focus="onFocus"
       @blur="onBlur"
     />
-    <div class="button-wrap">
+    <div class="flex items-center ltr:pl-2 rtl:pr-2">
       <ChatAttachmentButton
         v-if="showAttachment"
-        :class="getThemeClass('text-black-900', 'dark:text-slate-100')"
+        class="text-n-slate-12"
         :on-attach="onSendAttachment"
       />
       <button
         v-if="hasEmojiPickerEnabled"
-        class="flex items-center justify-center icon-button"
+        class="flex items-center justify-center min-h-8 min-w-8"
         :aria-label="$t('EMOJI.ARIA_LABEL')"
         @click="toggleEmojiPicker"
       >
-        <FluentIcon icon="emoji" :class="emojiIconColor" />
+        <FluentIcon
+          icon="emoji"
+          class="transition-all duration-150"
+          :class="{
+            'text-n-slate-12': !showEmojiPicker,
+            'text-n-brand': showEmojiPicker,
+          }"
+        />
       </button>
       <EmojiInput
         v-if="showEmojiPicker"
@@ -181,46 +173,11 @@ export default {
 </template>
 
 <style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-@import 'widget/assets/scss/mixins.scss';
-
-.chat-message--input {
-  align-items: center;
-  display: flex;
-  padding: 0 $space-small 0 $space-slab;
-  border-radius: 7px;
-
-  &.is-focused {
-    box-shadow:
-      0 0 0 1px $color-woot,
-      0 0 2px 3px $color-primary-light;
-  }
-}
-
 .emoji-dialog {
-  right: 20px;
-  top: -302px;
-  max-width: 100%;
-
-  &::before {
-    right: $space-one;
-  }
-}
-
-.button-wrap {
-  display: flex;
-  align-items: center;
-  padding-left: $space-small;
+  @apply max-w-full ltr:right-5 rtl:right-[unset] rtl:left-5 -top-[302px] before:ltr:right-2.5 before:rtl:right-[unset] before:rtl:left-2.5;
 }
 
 .user-message-input {
-  border: 0;
-  height: $space-large;
-  min-height: $space-large;
-  max-height: 2.4 * $space-mega;
-  resize: none;
-  padding: $space-smaller 0;
-  margin-top: $space-small;
-  margin-bottom: $space-small;
+  @apply border-none outline-none w-full placeholder:text-n-slate-10 resize-none h-8 min-h-8 max-h-60 py-1 px-0 my-2 bg-n-background text-n-slate-12 transition-all duration-200;
 }
 </style>

app/javascript/widget/components/ChatMessage.vue

@@ -53,56 +53,3 @@ export default {
   max-width: 90%;
 }
 </style>
-
-<style lang="scss">
-@import 'widget/assets/scss/variables.scss';
-
-.chat-bubble .message-content,
-.chat-bubble.user {
-  p code {
-    background-color: var(--s-75);
-    display: inline-block;
-    line-height: 1;
-
-    border-radius: $border-radius-small;
-    padding: $space-smaller;
-  }
-
-  pre {
-    overflow-y: auto;
-    background-color: var(--s-75);
-    border-color: var(--s-75);
-    color: var(--s-800);
-    border-radius: $border-radius-normal;
-    padding: $space-small;
-    margin-top: $space-smaller;
-    margin-bottom: $space-small;
-    display: block;
-    line-height: 1.7;
-    white-space: pre-wrap;
-
-    code {
-      background-color: transparent;
-      color: var(--s-800);
-      padding: 0;
-    }
-  }
-
-  blockquote {
-    border-left: $space-micro solid var(--s-75);
-    color: var(--s-800);
-    padding: $space-smaller $space-small;
-    margin: $space-smaller 0;
-    padding: $space-small $space-small 0 $space-normal;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .chat-bubble.agent.has-dark-mode {
-    blockquote {
-      border-color: var(--s-200);
-      color: var(--s-50);
-    }
-  }
-}
-</style>

app/javascript/widget/components/ChatSendButton.vue

@@ -28,7 +28,7 @@ export default {
   <button
     type="submit"
     :disabled="disabled"
-    class="icon-button flex items-center justify-center ml-1"
+    class="min-h-8 min-w-8 flex items-center justify-center ml-1"
   >
     <FluentIcon v-if="!loading" icon="send" :style="`color: ${color}`" />
     <Spinner v-else size="small" />

app/javascript/widget/components/ContinueChatButton.vue

@@ -1,62 +0,0 @@
-<script>
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-
-export default {
-  components: { FluentIcon },
-  props: {
-    title: {
-      type: String,
-      default: 'Continue your chat',
-    },
-    content: {
-      type: String,
-      default: 'Chat with us',
-    },
-    unreadCount: {
-      type: Number,
-      default: 0,
-    },
-  },
-  emits: ['continue'],
-};
-</script>
-
-<template>
-  <button
-    type="button"
-    class="flex w-full justify-between items-center rounded-md ring-1 ring-inset ring-slate-50 px-2 py-2 text-sm text-slate-700 bg-slate-25 hover:bg-slate-50 dark:text-white dark:bg-slate-800 dark:ring-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-woot-600 group"
-    @click="$emit('continue')"
-  >
-    <div
-      class="w-10 h-10 rounded-md bg-slate-75 dark:bg-slate-700 text-lg flex items-center justify-center flex-shrink-0"
-    >
-      <FluentIcon
-        icon="chat"
-        size="16"
-        class="text-slate-600 dark:text-slate-400"
-      />
-    </div>
-    <div
-      class="text-left flex flex-col justify-start flex-grow max-w-[calc(100%-80px)] mx-2 group-hover:opacity-75"
-    >
-      <h5 class="font-medium text-slate-900 dark:text-white">
-        {{ title }}
-      </h5>
-      <p class="h-4 leading-4 flex items-center gap-1">
-        <span
-          v-if="unreadCount > 0"
-          class="inline-flex items-center justify-center rounded-full bg-green-200 px-1 min-w-[16px] leading-4 text-xxs font-medium text-green-700 mr-0.5"
-        >
-          {{ unreadCount }}
-        </span>
-        <span
-          v-dompurify-html="content"
-          class="leading-4 h-4 text-ellipsis overflow-hidden whitespace-nowrap dark:text-slate-25"
-        />
-      </p>
-    </div>
-    <div class="w-8 h-10 flex items-center justify-center">
-      <FluentIcon icon="chevron-right" />
-    </div>
-  </button>
-</template>

app/javascript/widget/components/ConversationWrap.vue

@@ -122,9 +122,6 @@ export default {
 </template>
 
 <style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-@import 'widget/assets/scss/mixins.scss';
-
 .conversation--container {
   display: flex;
   flex-direction: column;
@@ -143,7 +140,7 @@ export default {
 
 .conversation-wrap {
   flex: 1;
-  padding: $space-large $space-small $space-small $space-small;
+  @apply px-2 pt-8 pb-2;
 }
 
 .message--loader {

app/javascript/widget/components/FileBubble.vue

@@ -1,6 +1,5 @@
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
@@ -25,10 +24,6 @@ export default {
       default: false,
     },
   },
-  setup() {
-    const { getThemeClass } = useDarkMode();
-    return { getThemeClass };
-  },
   computed: {
     title() {
       return this.isInProgress
@@ -46,11 +41,6 @@ export default {
         ? this.contrastingTextColor
         : '';
     },
-    titleColor() {
-      return !this.isUserBubble
-        ? this.getThemeClass('text-black-900', 'dark:text-slate-50')
-        : '';
-    },
   },
   methods: {
     openLink() {
@@ -66,11 +56,15 @@ export default {
     <div class="icon-wrap" :style="{ color: textColor }">
       <FluentIcon icon="document" size="28" />
     </div>
-    <div class="meta">
-      <div class="title" :class="titleColor" :style="{ color: textColor }">
+    <div class="ltr:pr-1 rtl:pl-1">
+      <div
+        class="m-0 font-medium text-sm"
+        :class="{ 'text-n-slate-12': !isUserBubble }"
+        :style="{ color: textColor }"
+      >
         {{ title }}
       </div>
-      <div class="link-wrap mb-1">
+      <div class="leading-none mb-1">
         <a
           class="download"
           rel="noreferrer noopener nofollow"
@@ -86,38 +80,13 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import 'widget/assets/scss/variables.scss';
-
 .file {
   .icon-wrap {
-    font-size: $font-size-mega;
-    color: $color-woot;
-    line-height: 1;
-    margin-left: $space-smaller;
-    margin-right: $space-small;
-  }
-
-  .title {
-    font-weight: $font-weight-medium;
-    font-size: $font-size-default;
-    margin: 0;
+    @apply text-[2.5rem] text-n-brand leading-none ltr:ml-1 rtl:mr-1 ltr:mr-2 rtl:ml-2;
   }
 
   .download {
-    color: $color-woot;
-    font-weight: $font-weight-medium;
-    padding: 0;
-    margin: 0;
-    font-size: $font-size-small;
-    text-decoration: none;
-  }
-
-  .link-wrap {
-    line-height: 1;
-  }
-
-  .meta {
-    padding-right: $space-smaller;
+    @apply text-n-brand font-medium p-0 m-0 text-xs no-underline;
   }
 }
 </style>

app/javascript/widget/components/Form/PhoneInput.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref, computed, watch, useTemplateRef, nextTick, unref } from 'vue';
 import countriesList from 'shared/constants/countries.js';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import {
   getActiveCountryCode,
@@ -17,8 +16,6 @@ const { context } = defineProps({
 
 const localValue = ref(context.value || '');
 
-const { getThemeClass: $dm } = useDarkMode();
-
 const selectedIndex = ref(-1);
 const showDropdown = ref(false);
 const searchCountry = ref('');
@@ -30,7 +27,7 @@ const dropdownRef = useTemplateRef('dropdownRef');
 const searchbarRef = useTemplateRef('searchbarRef');
 
 const placeholder = computed(() => context?.attrs?.placeholder || '');
-const hasErrorInPhoneInput = computed(() => context.hasErrorInPhoneInput);
+const hasErrorInPhoneInput = computed(() => context?.state?.invalid);
 const dropdownFirstItemName = computed(() =>
   activeCountryCode.value ? 'Clear selection' : 'Select Country'
 );
@@ -44,43 +41,6 @@ const countries = computed(() => [
   ...countriesList,
 ]);
 
-const dropdownClass = computed(() =>
-  $dm('bg-slate-100 text-slate-700', 'dark:bg-slate-700 dark:text-slate-50')
-);
-
-const dropdownBackgroundClass = computed(() =>
-  $dm('bg-white text-slate-700', 'dark:bg-slate-700 dark:text-slate-50')
-);
-
-const dropdownItemClass = computed(() =>
-  $dm(
-    'text-slate-700 hover:bg-slate-50',
-    'dark:text-slate-50 dark:hover:bg-slate-600'
-  )
-);
-
-const activeDropdownItemClass = computed(
-  () => `active ${$dm('bg-slate-100', 'dark:bg-slate-800')}`
-);
-
-const focusedDropdownItemClass = computed(
-  () => `focus ${$dm('bg-slate-50', 'dark:bg-slate-600')}`
-);
-
-const inputLightAndDarkModeColor = computed(() =>
-  $dm('bg-white text-slate-700', 'dark:bg-slate-600 dark:text-slate-50')
-);
-
-const inputBorderColor = computed(
-  () => `${$dm('border-black-200', 'dark:border-black-500')}`
-);
-
-const inputHasError = computed(() =>
-  hasErrorInPhoneInput.value
-    ? `border-red-200 hover:border-red-300 focus:border-red-300 ${inputLightAndDarkModeColor.value}`
-    : `hover:border-black-300 focus:border-black-300 ${inputLightAndDarkModeColor.value} ${inputBorderColor.value}`
-);
-
 const items = computed(() => {
   return countries.value.filter(country => {
     const { name, dial_code, id } = country;
@@ -206,12 +166,15 @@ function onSelect() {
 <template>
   <div class="relative mt-2 phone-input--wrap">
     <div
-      class="flex items-center justify-start w-full border border-solid rounded outline-none phone-input"
-      :class="inputHasError"
+      class="flex items-center justify-start outline-none phone-input rounded-lg box-border bg-n-background dark:bg-n-alpha-2 border-none outline outline-1 outline-offset-[-1px] text-sm w-full text-n-slate-12 focus-within:outline-n-brand focus-within:ring-1 focus-within:ring-n-brand"
+      :class="{
+        'outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9':
+          hasErrorInPhoneInput,
+        'outline-n-weak': !hasErrorInPhoneInput,
+      }"
     >
       <div
-        class="flex items-center justify-between h-full px-2 py-2 cursor-pointer country-emoji--wrap"
-        :class="dropdownClass"
+        class="flex items-center justify-between h-[2.625rem] px-2 py-2 cursor-pointer bg-n-alpha-1 dark:bg-n-solid-1 ltr:rounded-bl-lg rtl:rounded-br-lg ltr:rounded-tl-lg rtl:rounded-tr-lg min-w-[3.6rem] w-[3.6rem]"
         @click="toggleCountryDropdown"
       >
         <h5 v-if="activeCountry.emoji" class="mb-0 text-xl">
@@ -222,18 +185,16 @@ function onSelect() {
       </div>
       <span
         v-if="activeDialCode"
-        class="py-2 pl-2 pr-0 text-base"
-        :class="$dm('text-slate-700', 'dark:text-slate-50')"
+        class="py-2 ltr:pl-2 rtl:pr-2 text-base text-n-slate-11"
       >
         {{ activeDialCode }}
       </span>
       <input
         :value="phoneNumber"
         type="phoneInput"
-        class="w-full h-full py-2 pl-2 pr-3 leading-tight border-0 rounded-r outline-none"
+        class="w-full h-full !py-3 pl-2 pr-3 leading-tight rounded-r !outline-none focus:!ring-0 !bg-transparent dark:!bg-transparent"
         name="phoneNumber"
         :placeholder="placeholder"
-        :class="inputLightAndDarkModeColor"
         @input="onChange"
         @blur="context.blurHandler"
       />
@@ -242,30 +203,30 @@ function onSelect() {
       v-if="showDropdown"
       ref="dropdownRef"
       v-on-clickaway="closeDropdown"
-      :class="dropdownBackgroundClass"
-      class="absolute z-10 h-48 px-0 pt-0 pb-1 pl-1 pr-1 overflow-y-auto rounded shadow-lg country-dropdown top-12"
+      class="country-dropdown absolute bg-n-background text-n-slate-12 dark:bg-n-solid-3 z-10 h-48 px-0 pt-0 pb-1 pl-1 pr-1 overflow-y-auto rounded-lg shadow-lg top-12 w-full min-w-24 max-w-[14.8rem]"
       @keydown.up="moveSelectionUp"
       @keydown.down="moveSelectionDown"
       @keydown.enter="onSelect"
     >
-      <div class="sticky top-0" :class="dropdownBackgroundClass">
+      <div
+        class="sticky top-0 bg-n-background text-n-slate-12 dark:bg-n-solid-3"
+      >
         <input
           ref="searchbarRef"
           v-model="searchCountry"
           type="text"
           :placeholder="$t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_SEARCH')"
-          class="w-full h-8 px-3 py-2 mt-1 mb-1 text-sm border border-solid rounded outline-none dropdown-search"
-          :class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
+          class="w-full h-8 !ring-0 px-3 py-2 mt-1 mb-1 text-sm rounded bg-n-alpha-black2"
         />
       </div>
       <div
         v-for="(country, index) in items"
         :key="index"
-        class="flex items-center h-8 px-2 py-2 rounded cursor-pointer country-dropdown--item"
+        class="flex items-center h-8 px-2 py-2 rounded cursor-pointer country-dropdown--item text-n-slate-12 dark:hover:bg-n-solid-2 hover:bg-n-alpha-2"
         :class="[
-          dropdownItemClass,
-          country.id === activeCountryCode ? activeDropdownItemClass : '',
-          index === selectedIndex ? focusedDropdownItemClass : '',
+          country.id === activeCountryCode &&
+            'active bg-n-alpha-1 dark:bg-n-solid-1',
+          index === selectedIndex && 'focus dark:bg-n-solid-2 bg-n-alpha-2',
         ]"
         @click="onSelectCountry(country)"
       >
@@ -279,8 +240,7 @@ function onSelect() {
       </div>
       <div v-if="items.length === 0">
         <span
-          class="flex justify-center mt-4 text-sm text-center"
-          :class="$dm('text-slate-700', 'dark:text-slate-50')"
+          class="flex justify-center mt-4 text-sm text-center text-n-slate-11"
         >
           {{ $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
         </span>
@@ -288,30 +248,3 @@ function onSelect() {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-@import 'widget/assets/scss/variables.scss';
-
-.phone-input--wrap {
-  .phone-input {
-    height: 2.8rem;
-
-    input:placeholder-shown {
-      text-overflow: ellipsis;
-    }
-  }
-
-  .country-emoji--wrap {
-    border-bottom-left-radius: 0.18rem;
-    border-top-left-radius: 0.18rem;
-    min-width: 3.6rem;
-    width: 3.6rem;
-  }
-
-  .country-dropdown {
-    min-width: 6rem;
-    max-width: 14.8rem;
-    width: 100%;
-  }
-}
-</style>

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>

app/javascript/widget/components/HeaderActions.vue

@@ -3,7 +3,6 @@ import { mapGetters } from 'vuex';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import { popoutChatWindow } from '../helpers/popoutHelper';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 import configMixin from 'widget/mixins/configMixin';
 import { CONVERSATION_STATUS } from 'shared/constants/messages';
 
@@ -21,10 +20,6 @@ export default {
       default: true,
     },
   },
-  setup() {
-    const { getThemeClass } = useDarkMode();
-    return { getThemeClass };
-  },
   computed: {
     ...mapGetters({
       conversationAttributes: 'conversationAttributes/getConversationParams',
@@ -83,7 +78,7 @@ export default {
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
-  <div v-if="showHeaderActions" class="actions flex items-center">
+  <div v-if="showHeaderActions" class="actions flex items-center gap-3">
     <button
       v-if="
         canLeaveConversation &&
@@ -94,22 +89,14 @@ export default {
       :title="$t('END_CONVERSATION')"
       @click="resolveConversation"
     >
-      <FluentIcon
-        icon="sign-out"
-        size="22"
-        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
-      />
+      <FluentIcon icon="sign-out" size="22" class="text-n-slate-12" />
     </button>
     <button
       v-if="showPopoutButton"
       class="button transparent compact new-window--button"
       @click="popoutWindow"
     >
-      <FluentIcon
-        icon="open"
-        size="22"
-        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
-      />
+      <FluentIcon icon="open" size="22" class="text-n-slate-12" />
     </button>
     <button
       class="button transparent compact close-button"
@@ -118,28 +105,13 @@ export default {
       }"
       @click="closeWindow"
     >
-      <FluentIcon
-        icon="dismiss"
-        size="24"
-        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
-      />
+      <FluentIcon icon="dismiss" size="24" class="text-n-slate-12" />
     </button>
   </div>
 </template>
 
 <style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-
 .actions {
-  button {
-    margin-left: $space-normal;
-  }
-
-  span {
-    color: $color-heading;
-    font-size: $font-size-large;
-  }
-
   .close-button {
     display: none;
   }

app/javascript/widget/components/ImageBubble.vue

@@ -29,8 +29,6 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import 'widget/assets/scss/variables.scss';
-
 .image {
   display: block;
 
@@ -40,11 +38,7 @@ export default {
     max-width: 100%;
 
     &::before {
-      background-image: linear-gradient(
-        -180deg,
-        transparent 3%,
-        $color-heading 130%
-      );
+      background-image: linear-gradient(-180deg, transparent 3%, #1f2d3d 130%);
       bottom: 0;
       content: '';
       height: 20%;
@@ -61,12 +55,7 @@ export default {
   }
 
   .time {
-    font-size: $font-size-small;
-    bottom: $space-smaller;
-    color: $color-white;
-    position: absolute;
-    right: $space-slab;
-    white-space: nowrap;
+    @apply text-xs bottom-1 text-white ltr:right-3 rtl:left-3 whitespace-nowrap absolute;
   }
 }
 </style>

app/javascript/widget/components/PreChat/Form.vue

@@ -7,7 +7,6 @@ import { isEmptyObject } from 'widget/helpers/utils';
 import { getRegexp } from 'shared/helpers/Validators';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import routerMixin from 'widget/mixins/routerMixin';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 import configMixin from 'widget/mixins/configMixin';
 import { FormKit, createInput } from '@formkit/vue';
 import PhoneInput from 'widget/components/Form/PhoneInput.vue';
@@ -31,9 +30,8 @@ export default {
       props: ['hasErrorInPhoneInput'],
     });
     const { formatMessage } = useMessageFormatter();
-    const { getThemeClass } = useDarkMode();
 
-    return { formatMessage, phoneInput, getThemeClass };
+    return { formatMessage, phoneInput };
   },
   data() {
     return {
@@ -66,7 +64,10 @@ export default {
       return !isEmptyObject(this.activeCampaign);
     },
     shouldShowHeaderMessage() {
-      return this.hasActiveCampaign || this.preChatFormEnabled;
+      return (
+        this.hasActiveCampaign ||
+        (this.preChatFormEnabled && !!this.headerMessage)
+      );
     },
     headerMessage() {
       if (this.preChatFormEnabled) {
@@ -138,35 +139,12 @@ export default {
       });
       return contactAttributes;
     },
-    inputStyles() {
-      return `mt-1 border rounded w-full py-2 px-3 text-slate-700 outline-none`;
-    },
-    isInputDarkOrLightMode() {
-      return `${this.getThemeClass(
-        'bg-white',
-        'dark:bg-slate-600'
-      )} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
-    },
-    inputBorderColor() {
-      return `${this.getThemeClass(
-        'border-black-200',
-        'dark:border-black-500'
-      )}`;
-    },
   },
   methods: {
-    labelClass(context) {
-      const { hasErrors } = context;
-      if (!hasErrors) {
-        return `text-xs font-medium ${this.getThemeClass(
-          'text-black-800',
-          'dark:text-slate-50'
-        )}`;
-      }
-      return `text-xs font-medium ${this.getThemeClass(
-        'text-red-400',
-        'dark:text-red-400'
-      )}`;
+    labelClass(input) {
+      const { state } = input.context;
+      const hasErrors = state.invalid;
+      return !hasErrors ? 'text-n-slate-12' : 'text-n-ruby-10';
     },
     inputClass(input) {
       const { state, family: classification, type } = input.context;
@@ -178,9 +156,9 @@ export default {
         this.hasErrorInPhoneInput = hasErrors;
       }
       if (!hasErrors) {
-        return `${this.inputStyles} hover:border-black-300 focus:border-black-300 ${this.isInputDarkOrLightMode} ${this.inputBorderColor}`;
+        return `mt-1 rounded w-full py-2 px-3`;
       }
-      return `${this.inputStyles} border-red-200 hover:border-red-300 focus:border-red-300 ${this.isInputDarkOrLightMode}`;
+      return `mt-1 rounded w-full py-2 px-3 error`;
     },
     isContactFieldRequired(field) {
       return this.preChatFields.find(option => option.name === field).required;
@@ -286,8 +264,7 @@ export default {
     <div
       v-if="shouldShowHeaderMessage"
       v-dompurify-html="formatMessage(headerMessage, false)"
-      class="mb-4 text-sm leading-5 pre-chat-header-message"
-      :class="getThemeClass('text-black-800', 'dark:text-slate-50')"
+      class="mb-4 text-base leading-5 pre-chat-header-message text-n-slate-12"
     />
     <!-- Why do the v-bind shenanigan? Because Formkit API is really bad.
     If we just pass the options as is even with null or undefined or false,
@@ -307,7 +284,7 @@ export default {
             }
           : undefined
       "
-      :label-class="context => labelClass(context)"
+      :label-class="context => `text-sm font-medium ${labelClass(context)}`"
       :input-class="context => inputClass(context)"
       :validation-messages="{
         startsWithPlus: $t(
@@ -326,7 +303,7 @@ export default {
       v-if="!hasActiveCampaign"
       name="message"
       type="textarea"
-      :label-class="context => labelClass(context)"
+      :label-class="context => `text-sm font-medium ${labelClass(context)}`"
       :input-class="context => inputClass(context)"
       :label="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.LABEL')"
       :placeholder="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.PLACEHOLDER')"
@@ -337,7 +314,7 @@ export default {
     />
 
     <CustomButton
-      class="mt-2 mb-5 font-medium"
+      class="mt-3 mb-5 font-medium flex items-center justify-center gap-2"
       block
       :bg-color="widgetColor"
       :text-color="textColor"
@@ -352,10 +329,22 @@ export default {
 <style lang="scss">
 .formkit-outer {
   @apply mt-2;
+
+  .formkit-inner {
+    input.error,
+    textarea.error,
+    select.error {
+      @apply outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 focus:outline-n-ruby-9 dark:focus:outline-n-ruby-9;
+    }
+
+    input[type='checkbox'] {
+      @apply size-4 outline-none;
+    }
+  }
 }
 
 [data-invalid] .formkit-message {
-  @apply text-red-500 block text-xs font-normal mb-1 w-full;
+  @apply text-n-ruby-10 block text-xs font-normal my-0.5 w-full;
 }
 
 .formkit-outer[data-type='checkbox'] .formkit-wrapper {

app/javascript/widget/components/SearchArticle.vue

@@ -1,52 +0,0 @@
-<script>
-import { debounce } from '@chatwoot/utils';
-export default {
-  props: {
-    placeholder: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['search'],
-  data() {
-    return {
-      searchQuery: '',
-    };
-  },
-  methods: {
-    handleInput: debounce(
-      () => {
-        this.$emit('search', this.searchQuery);
-      },
-      500,
-      true
-    ),
-  },
-};
-</script>
-
-<template>
-  <div class="relative flex items-center">
-    <div
-      class="absolute inset-y-0 left-0 flex items-center h-8 px-2 text-slate-500"
-    >
-      <fluent-icon icon="search" size="14" />
-    </div>
-    <input
-      id="search"
-      v-model="searchQuery"
-      :placeholder="placeholder"
-      type="text"
-      name="search"
-      class="block w-full h-8 px-2 pl-6 pr-1 m-0 text-sm border rounded-md focus-visible:outline-none text-slate-800 border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
-      @input="handleInput"
-    />
-    <div class="absolute inset-y-0 right-0 flex h-8 p-1">
-      <kbd
-        class="inline-flex items-center px-1 font-sans border rounded border-slate-200 text-xxs text-slate-400"
-      >
-        {{ '⌘K' }}
-      </kbd>
-    </div>
-  </div>
-</template>

app/javascript/widget/components/TeamAvailability.vue

@@ -2,18 +2,16 @@
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
 import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
-import AvailableAgents from 'widget/components/AvailableAgents.vue';
 import configMixin from 'widget/mixins/configMixin';
 import availabilityMixin from 'widget/mixins/availability';
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import { IFrameHelper } from 'widget/helpers/utils';
 import { CHATWOOT_ON_START_CONVERSATION } from '../constants/sdkEvents';
+import GroupedAvatars from 'widget/components/GroupedAvatars.vue';
 
 export default {
   name: 'TeamAvailability',
   components: {
-    AvailableAgents,
-    FluentIcon,
+    GroupedAvatars,
   },
   mixins: [configMixin, nextAvailabilityTime, availabilityMixin],
   props: {
@@ -35,6 +33,13 @@ export default {
     textColor() {
       return getContrastingTextColor(this.widgetColor);
     },
+    agentAvatars() {
+      return this.availableAgents.map(agent => ({
+        name: agent.name,
+        avatar: agent.avatar_url,
+        id: agent.id,
+      }));
+    },
     isOnline() {
       const { workingHoursEnabled } = this.channelConfig;
       const anyAgentOnline = this.availableAgents.length > 0;
@@ -61,35 +66,37 @@ export default {
 </script>
 
 <template>
-  <div class="p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
-    <div class="flex items-center justify-between">
-      <div class="">
-        <div class="text-sm font-medium text-slate-700 dark:text-slate-50">
+  <div
+    class="flex flex-col gap-3 w-full shadow outline-1 outline outline-n-container rounded-xl bg-n-background dark:bg-n-solid-2 px-5 py-4"
+  >
+    <div class="flex items-center justify-between gap-2">
+      <div class="flex flex-col gap-1">
+        <div class="font-medium text-n-slate-12">
           {{
             isOnline
               ? $t('TEAM_AVAILABILITY.ONLINE')
               : $t('TEAM_AVAILABILITY.OFFLINE')
           }}
         </div>
-        <div class="mt-1 text-sm text-slate-500 dark:text-slate-100">
+        <div class="text-n-slate-11">
           {{ replyWaitMessage }}
         </div>
       </div>
-      <AvailableAgents v-if="isOnline" :agents="availableAgents" />
+      <GroupedAvatars v-if="isOnline" :users="availableAgents" />
     </div>
     <button
-      class="inline-flex items-center justify-between px-2 py-1 mt-2 -ml-2 text-sm font-medium leading-6 rounded-md text-slate-800 dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800"
+      class="inline-flex items-center gap-1 font-medium text-n-slate-12"
       :style="{ color: widgetColor }"
       @click="startConversation"
     >
-      <span class="pr-2 text-sm">
+      <span>
         {{
           hasConversation
             ? $t('CONTINUE_CONVERSATION')
             : $t('START_CONVERSATION')
         }}
       </span>
-      <FluentIcon icon="arrow-right" size="14" />
+      <i class="i-lucide-chevron-right size-5 mt-px" />
     </button>
   </div>
 </template>

app/javascript/widget/components/UnreadMessage.vue

@@ -9,7 +9,6 @@ import {
 } from '../constants/widgetBusEvents';
 import { emitter } from 'shared/helpers/mitt';
 
-import { useDarkMode } from 'widget/composables/useDarkMode';
 export default {
   name: 'UnreadMessage',
   components: { Thumbnail },
@@ -35,13 +34,11 @@ export default {
   setup() {
     const { formatMessage, getPlainText, truncateMessage, highlightContent } =
       useMessageFormatter();
-    const { getThemeClass } = useDarkMode();
     return {
       formatMessage,
       getPlainText,
       truncateMessage,
       highlightContent,
-      getThemeClass,
     };
   },
   computed: {
@@ -96,11 +93,7 @@ export default {
 
 <template>
   <div class="chat-bubble-wrap">
-    <button
-      class="chat-bubble agent"
-      :class="getThemeClass('bg-white', 'dark:bg-slate-50')"
-      @click="onClickMessage"
-    >
+    <button class="chat-bubble agent bg-white" @click="onClickMessage">
       <div v-if="showSender" class="row--agent-block">
         <Thumbnail
           :src="avatarUrl"
@@ -120,29 +113,19 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import 'widget/assets/scss/variables.scss';
-
 .chat-bubble {
-  max-width: 85%;
-  padding: $space-normal;
-  cursor: pointer;
+  @apply max-w-[85%] cursor-pointer p-4;
 }
 
 .row--agent-block {
-  align-items: center;
-  display: flex;
-  text-align: left;
-  padding-bottom: $space-small;
-  font-size: $font-size-small;
+  @apply items-center flex text-left pb-2 text-xs;
 
   .agent--name {
-    font-weight: $font-weight-medium;
-    margin-left: $space-smaller;
+    @apply font-medium ml-1;
   }
 
   .company--name {
-    color: $color-light-gray;
-    margin-left: $space-smaller;
+    @apply text-n-slate-11 dark:text-n-slate-10 ml-1;
   }
 }
 </style>

app/javascript/widget/components/UnreadMessageList.vue

@@ -56,7 +56,7 @@ export default {
 </script>
 
 <template>
-  <div class="unread-wrap">
+  <div class="unread-wrap" dir="ltr">
     <div class="close-unread-wrap">
       <button class="button small close-unread-button" @click="closeFullView">
         <span class="flex items-center">
@@ -87,7 +87,7 @@ export default {
         <span
           class="flex items-center"
           :class="{
-            'is-background-light': isBackgroundLighter,
+            '!text-n-slate-12': isBackgroundLighter,
           }"
           :style="{
             color: widgetColor,
@@ -102,8 +102,6 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import 'widget/assets/scss/variables';
-
 .unread-wrap {
   width: 100%;
   height: auto;
@@ -116,42 +114,17 @@ export default {
   overflow: hidden;
 
   .unread-messages {
-    padding-bottom: $space-small;
+    @apply pb-2;
   }
 
   .clear-button {
-    background: transparent;
-    color: $color-woot;
-    border: 0;
-    font-weight: $font-weight-bold;
-    font-size: $font-size-medium;
     transition: all 0.3s var(--ease-in-cubic);
-    margin-left: $space-smaller;
-    padding: 0 $space-one 0 0;
-
-    &:hover {
-      transform: translateX($space-smaller);
-      color: $color-primary-dark;
-    }
+    @apply bg-transparent text-n-brand border-none border-0 font-semibold text-base ml-1 py-0 pl-0 pr-2.5 hover:brightness-75 hover:translate-x-1;
   }
 
   .close-unread-button {
-    background: $color-background;
-    color: $color-light-gray;
-    border: 0;
-    font-weight: $font-weight-medium;
-    font-size: $font-size-mini;
     transition: all 0.3s var(--ease-in-cubic);
-    margin-bottom: $space-slab;
-    border-radius: $space-normal;
-
-    &:hover {
-      color: $color-body;
-    }
-  }
-
-  .is-background-light {
-    color: $color-body !important;
+    @apply bg-n-slate-3 dark:bg-n-slate-12 text-n-slate-12 dark:text-n-slate-1 hover:brightness-95 border-none border-0 font-medium text-xxs rounded-2xl mb-3;
   }
 }
 </style>

app/javascript/widget/components/UserAvatar.vue

@@ -1,49 +0,0 @@
-<script>
-/**
- * Thumbnail Component
- * Src - source for round image
- */
-export default {
-  name: 'UserAvatar',
-  props: {
-    src: {
-      type: String,
-      default: '',
-    },
-    size: {
-      type: String,
-      default: '',
-    },
-  },
-  computed: {
-    getBgImage() {
-      if (this.src) return { 'background-image': `url(${this.src})` };
-      return {};
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="user-avatar" :class="size" :style="getBgImage" />
-</template>
-
-<style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-@import 'widget/assets/scss/mixins.scss';
-
-.user-avatar {
-  @include light-shadow;
-  background: url('widget/assets/images/defaultUser.png') center center
-    no-repeat;
-  background-size: cover;
-  border-radius: 50%;
-  height: 40px;
-  width: 40px;
-
-  &.small {
-    width: $space-medium;
-    height: $space-medium;
-  }
-}
-</style>

app/javascript/widget/components/UserMessage.vue

@@ -165,12 +165,12 @@ export default {
         </div>
         <div
           v-if="isFailed"
-          class="flex justify-end px-4 py-2 text-red-700 align-middle"
+          class="flex justify-end px-4 py-2 text-n-ruby-9 align-middle"
         >
           <button
             v-if="!hasAttachments"
             :title="$t('COMPONENTS.MESSAGE_BUBBLE.RETRY')"
-            class="inline-flex items-center justify-center ml-2"
+            class="inline-flex items-center justify-center ltr:ml-2 rtl:mr-2"
             @click="retrySendMessage"
           >
             <FluentIcon icon="arrow-clockwise" size="14" />

app/javascript/widget/components/UserMessageBubble.vue

@@ -37,32 +37,24 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import 'widget/assets/scss/variables.scss';
-
 .chat-bubble.user::v-deep {
   p code {
-    background-color: var(--w-600);
-    color: var(--white);
+    @apply bg-n-alpha-2 dark:bg-n-alpha-1 text-white;
   }
 
   pre {
-    background-color: var(--w-800);
-    border-color: var(--w-700);
-    color: var(--white);
+    @apply text-white bg-n-alpha-2 dark:bg-n-alpha-1;
 
     code {
-      background-color: transparent;
-      color: var(--white);
+      @apply bg-transparent text-white;
     }
   }
 
   blockquote {
-    border-left: $space-micro solid var(--w-400);
-    background: var(--s-25);
-    border-color: var(--s-200);
+    @apply bg-transparent border-n-slate-7 ltr:border-l-2 rtl:border-r-2 border-solid;
 
     p {
-      color: var(--s-800);
+      @apply text-n-slate-5 dark:text-n-slate-12/90;
     }
   }
 }

app/javascript/widget/components/dropdown/DropdownMenu.vue

@@ -1,84 +0,0 @@
-<script>
-export default {
-  props: {
-    menuPlacement: {
-      type: String,
-      default: 'right',
-      validator: value => ['right', 'left'].indexOf(value) !== -1,
-    },
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    toggleMenu: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      isOpen: false,
-    };
-  },
-  watch: {
-    open() {
-      this.isOpen = !this.isOpen;
-    },
-  },
-  mounted() {
-    document.addEventListener('keydown', this.onEscape);
-  },
-  unmounted() {
-    document.removeEventListener('keydown', this.onEscape);
-  },
-  methods: {
-    onEscape(e) {
-      if (e.key === 'Esc' || e.key === 'Escape') {
-        this.isOpen = false;
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="relative">
-    <button class="z-10 focus:outline-none select-none" @click="toggleMenu">
-      <slot name="button" />
-    </button>
-
-    <!-- to close when clicked on space around it-->
-    <button
-      v-if="isOpen"
-      tabindex="-1"
-      class="fixed inset-0 h-full w-full cursor-default focus:outline-none"
-      @click="toggleMenu"
-    />
-
-    <!--dropdown menu-->
-    <transition
-      enter-active-class="transition-all duration-200 ease-out"
-      leave-active-class="transition-all duration-750 ease-in"
-      enter-class="opacity-0 scale-75"
-      enter-to-class="opacity-100 scale-100"
-      leave-class="opacity-100 scale-100"
-      leave-to-class="opacity-0 scale-75"
-    >
-      <div
-        v-if="isOpen"
-        class="menu-content absolute shadow-xl rounded-md border-solid border border-slate-100 mt-1 py-1 px-2 bg-white z-10"
-        :class="menuPlacement === 'right' ? 'right-0' : 'left-0'"
-      >
-        <slot name="content" />
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-
-.menu-content {
-  width: max-content;
-}
-</style>

app/javascript/widget/components/dropdown/DropdownMenuItem.vue

@@ -1,71 +0,0 @@
-<script>
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-
-export default {
-  components: { FluentIcon },
-  props: {
-    text: {
-      type: String,
-      default: 'Default',
-    },
-    textClass: {
-      type: String,
-      default: 'text-sm leading-3',
-    },
-    icon: {
-      type: Boolean,
-      default: true,
-    },
-    iconName: {
-      type: String,
-      default: '',
-    },
-    iconSize: {
-      type: String,
-      default: '15',
-    },
-    iconClass: {
-      type: String,
-      default: 'text-black-900',
-    },
-    itemClass: {
-      type: String,
-      default:
-        'flex items-center p-3 cursor-pointer ml-0 border-b border-slate-100',
-    },
-    action: {
-      type: Function,
-      default: () => {},
-    },
-  },
-};
-</script>
-
-<template>
-  <button class="menu-item" :class="[itemClass]" @click="action">
-    <FluentIcon
-      v-if="icon"
-      :icon="iconName"
-      :size="iconSize"
-      :class="iconClass"
-    />
-    <span :class="[{ 'pl-3': icon }, textClass]">{{ text }}</span>
-  </button>
-</template>
-
-<style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-
-.menu-item {
-  margin-left: $zero !important;
-  outline: none;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-}
-</style>

app/javascript/widget/components/layouts/ViewWithHeader.vue

@@ -103,17 +103,17 @@ export default {
 
 <template>
   <div
-    class="w-full h-full bg-slate-25 dark:bg-slate-800"
+    class="w-full h-full bg-n-slate-2 dark:bg-n-solid-1"
     :class="{ 'overflow-auto': isOnHomeView }"
     @keydown.esc="closeWindow"
   >
     <div class="relative flex flex-col h-full">
       <div
-        class="sticky top-0 z-40 transition-all header-wrap"
         :class="{
           expanded: !isHeaderCollapsed,
           collapsed: isHeaderCollapsed,
-          'custom-header-shadow': isHeaderCollapsed,
+          'shadow-[0_10px_15px_-16px_rgba(50,50,93,0.08),0_4px_6px_-8px_rgba(50,50,93,0.04)]':
+            isHeaderCollapsed,
           ...opacityClass,
         }"
       >
@@ -140,29 +140,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-@import 'widget/assets/scss/variables';
-@import 'widget/assets/scss/mixins';
-
-.custom-header-shadow {
-  @include shadow-large;
-}
-
-.header-wrap {
-  flex-shrink: 0;
-  transition: max-height 100ms;
-
-  &.expanded {
-    max-height: 16rem;
-  }
-
-  &.collapsed {
-    max-height: 4.5rem;
-  }
-
-  @media only screen and (min-device-width: 320px) and (max-device-width: 667px) {
-    border-radius: 0;
-  }
-}
-</style>

app/javascript/widget/components/pageComponents/Home/Article/ArticleBlock.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import ArticleListItem from './ArticleListItem.vue';
+import { useMapGetter } from 'dashboard/composables/store';
+
+const props = defineProps({
+  articles: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['view', 'viewAll']);
+
+const widgetColor = useMapGetter('appConfig/getWidgetColor');
+
+const articlesToDisplay = computed(() => props.articles.slice(0, 6));
+
+const onArticleClick = link => {
+  emit('view', link);
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <h3 class="font-medium text-n-slate-12">
+      {{ $t('PORTAL.POPULAR_ARTICLES') }}
+    </h3>
+    <div class="flex flex-col gap-4">
+      <ArticleListItem
+        v-for="article in articlesToDisplay"
+        :key="article.slug"
+        :link="article.link"
+        :title="article.title"
+        @select-article="onArticleClick"
+      />
+    </div>
+    <div>
+      <button
+        class="font-medium tracking-wide inline-flex"
+        :style="{ color: widgetColor }"
+        @click="$emit('viewAll')"
+      >
+        <span>{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
+      </button>
+    </div>
+  </div>
+</template>

app/javascript/widget/components/pageComponents/Home/Article/ArticleContainer.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { computed, onMounted } from 'vue';
+import ArticleBlock from 'widget/components/pageComponents/Home/Article/ArticleBlock.vue';
+import ArticleCardSkeletonLoader from 'widget/components/pageComponents/Home/Article/SkeletonLoader.vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStore } from 'dashboard/composables/store';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
+
+const store = useStore();
+const router = useRouter();
+const i18n = useI18n();
+const { prefersDarkMode } = useDarkMode();
+
+const portal = computed(() => window.chatwootWebChannel.portal);
+
+const popularArticles = useMapGetter('article/popularArticles');
+const articleUiFlags = useMapGetter('article/uiFlags');
+
+const locale = computed(() => {
+  const { locale: selectedLocale } = i18n;
+  const {
+    allowed_locales: allowedLocales,
+    default_locale: defaultLocale = 'en',
+  } = portal.value.config;
+  // IMPORTANT: Variation strict locale matching, Follow iso_639_1_code
+  // If the exact match of a locale is available in the list of portal locales, return it
+  // Else return the default locale. Eg: `es` will not work if `es_ES` is available in the list
+  if (allowedLocales.includes(selectedLocale)) {
+    return locale;
+  }
+  return defaultLocale;
+});
+
+const fetchArticles = () => {
+  if (portal.value && !popularArticles.value.length) {
+    store.dispatch('article/fetch', {
+      slug: portal.value.slug,
+      locale: locale.value,
+    });
+  }
+};
+
+const openArticleInArticleViewer = link => {
+  const params = new URLSearchParams({
+    show_plain_layout: 'true',
+    theme: prefersDarkMode.value ? 'dark' : 'light',
+  });
+
+  // Combine link with query parameters
+  const linkToOpen = `${link}?${params.toString()}`;
+  router.push({ name: 'article-viewer', query: { link: linkToOpen } });
+};
+
+const viewAllArticles = () => {
+  const {
+    portal: { slug },
+  } = window.chatwootWebChannel;
+  openArticleInArticleViewer(`/hc/${slug}/${locale.value}`);
+};
+
+const hasArticles = computed(
+  () =>
+    !articleUiFlags.value.isFetching &&
+    !articleUiFlags.value.isError &&
+    !!popularArticles.value.length
+);
+onMounted(() => fetchArticles());
+</script>
+
+<template>
+  <div
+    v-if="portal && (articleUiFlags.isFetching || !!popularArticles.length)"
+    class="w-full shadow outline-1 outline outline-n-container rounded-xl bg-n-background dark:bg-n-solid-2 px-5 py-4"
+  >
+    <ArticleBlock
+      v-if="hasArticles"
+      :articles="popularArticles"
+      @view="openArticleInArticleViewer"
+      @view-all="viewAllArticles"
+    />
+    <ArticleCardSkeletonLoader v-if="articleUiFlags.isFetching" />
+  </div>
+  <div v-else class="hidden" />
+</template>

app/javascript/widget/components/pageComponents/Home/Article/ArticleListItem.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+const props = defineProps({
+  link: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['selectArticle']);
+const onClick = () => {
+  emit('selectArticle', props.link);
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between rounded cursor-pointer text-n-slate-11 hover:text-n-slate-12 gap-2"
+    role="button"
+    @click="onClick"
+  >
+    <button
+      class="underline-offset-2 leading-6 ltr:text-left rtl:text-right text-base"
+    >
+      {{ title }}
+    </button>
+    <span class="i-lucide-chevron-right text-base shrink-0" />
+  </div>
+</template>

app/javascript/widget/components/pageComponents/Home/Article/SkeletonLoader.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="py-4 space-y-4">
+    <div class="space-y-2 animate-pulse">
+      <div class="h-6 bg-n-slate-5 dark:bg-n-alpha-black1 rounded w-2/5" />
+    </div>
+    <div class="space-y-2 animate-pulse">
+      <div class="h-4 bg-n-slate-5 dark:bg-n-alpha-black1 rounded" />
+      <div class="h-4 bg-n-slate-5 dark:bg-n-alpha-black1 rounded" />
+      <div class="h-4 bg-n-slate-5 dark:bg-n-alpha-black1 rounded" />
+    </div>
+    <div class="space-y-2 animate-pulse">
+      <div class="h-4 bg-n-slate-5 dark:bg-n-alpha-black1 rounded w-1/5" />
+    </div>
+  </div>
+</template>

app/javascript/widget/components/template/Article.vue

@@ -1,7 +1,6 @@
 <script>
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   components: {
@@ -15,8 +14,7 @@ export default {
   },
   setup() {
     const { truncateMessage } = useMessageFormatter();
-    const { getThemeClass } = useDarkMode();
-    return { getThemeClass, truncateMessage };
+    return { truncateMessage };
   },
 };
 </script>
@@ -25,52 +23,29 @@ export default {
 <template>
   <div
     v-if="!!items.length"
-    class="chat-bubble agent"
-    :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
+    class="chat-bubble agent bg-n-background dark:bg-n-solid-3"
   >
-    <div v-for="item in items" :key="item.link" class="article-item">
-      <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
-        <span class="title flex items-center text-black-900 font-medium">
-          <FluentIcon
-            icon="link"
-            class="mr-1"
-            :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
-          />
-          <span :class="getThemeClass('text-slate-900', 'dark:text-slate-50')">
+    <div
+      v-for="item in items"
+      :key="item.link"
+      class="border-b border-solid border-n-weak text-sm py-2 px-0 last:border-b-0"
+    >
+      <a
+        :href="item.link"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+        class="text-n-slate-12 no-underline"
+      >
+        <span class="flex items-center text-black-900 font-medium">
+          <FluentIcon icon="link" class="ltr:mr-1 rtl:ml-1 text-n-slate-12" />
+          <span class="text-n-slate-12">
             {{ item.title }}
           </span>
         </span>
-        <span
-          class="description"
-          :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
-        >
+        <span class="block mt-1 text-n-slate-12">
           {{ truncateMessage(item.description) }}
         </span>
       </a>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-@import 'widget/assets/scss/variables.scss';
-
-.article-item {
-  border-bottom: 1px solid $color-border;
-  font-size: $font-size-default;
-  padding: $space-small 0;
-
-  a {
-    color: $color-body;
-    text-decoration: none;
-  }
-
-  .description {
-    display: block;
-    margin-top: $space-smaller;
-  }
-
-  &:last-child {
-    border-bottom: 0;
-  }
-}
-</style>

app/javascript/widget/components/template/EmailInput.vue

@@ -6,7 +6,6 @@ import { getContrastingTextColor } from '@chatwoot/utils';
 
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   components: {
@@ -24,8 +23,7 @@ export default {
     },
   },
   setup() {
-    const { getThemeClass } = useDarkMode();
-    return { v$: useVuelidate(), getThemeClass };
+    return { v$: useVuelidate() };
   },
   data() {
     return {
@@ -46,16 +44,6 @@ export default {
         this.messageContentAttributes.submitted_email
       );
     },
-    inputColor() {
-      return `${this.getThemeClass('bg-white', 'dark:bg-slate-600')}
-        ${this.getThemeClass('text-black-900', 'dark:text-slate-50')}
-        ${this.getThemeClass('border-black-200', 'dark:border-black-500')}`;
-    },
-    inputHasError() {
-      return this.v$.email.$error
-        ? `${this.inputColor} error`
-        : `${this.inputColor}`;
-    },
   },
   validations: {
     email: {
@@ -88,14 +76,14 @@ export default {
   <div>
     <form
       v-if="!hasSubmitted"
-      class="email-input-group"
+      class="email-input-group h-10 flex my-2 mx-0 min-w-[200px]"
       @submit.prevent="onSubmit"
     >
       <input
         v-model="email"
-        class="form-input"
+        type="email"
         :placeholder="$t('EMAIL_PLACEHOLDER')"
-        :class="inputHasError"
+        :class="{ error: v$.email.$error }"
         @input="v$.email.$touch"
         @keydown.enter="onSubmit"
       />
@@ -116,34 +104,21 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import 'widget/assets/scss/variables.scss';
-
 .email-input-group {
-  display: flex;
-  margin: $space-small 0;
-  min-width: 200px;
-
   input {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-    padding: $space-one;
-    width: 100%;
+    @apply dark:bg-n-alpha-black1 rtl:rounded-tl-[0] ltr:rounded-tr-[0] rtl:rounded-bl-[0] ltr:rounded-br-[0] p-2.5 w-full focus:ring-0 focus:outline-n-brand;
 
     &::placeholder {
-      color: $color-light-gray;
+      @apply text-n-slate-10;
     }
 
     &.error {
-      border-color: $color-error;
+      @apply outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9;
     }
   }
 
   .button {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-    font-size: $font-size-large;
-    height: auto;
-    margin-left: -1px;
+    @apply rtl:rounded-tr-[0] ltr:rounded-tl-[0] rtl:rounded-br-[0] ltr:rounded-bl-[0] rounded-lg h-auto ltr:-ml-px rtl:-mr-px text-xl;
 
     .spinner {
       display: block;

app/javascript/widget/components/template/IntegrationCard.vue

@@ -62,7 +62,7 @@ export default {
       }"
       @click="joinTheCall"
     >
-      <FluentIcon icon="video-add" class="mr-2" />
+      <FluentIcon icon="video-add" class="rtl:ml-2 ltr:mr-2" />
       {{ $t('INTEGRATIONS.DYTE.CLICK_HERE_TO_JOIN') }}
     </button>
     <div v-if="dyteAuthToken" class="video-call--container">
@@ -81,8 +81,6 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import 'widget/assets/scss/variables.scss';
-
 .video-call--container {
   position: fixed;
   top: 72px;
@@ -101,15 +99,10 @@ export default {
 }
 
 .join-call-button {
-  margin: $space-small 0;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
+  @apply flex items-center my-2 rounded-lg;
 }
 
 .leave-room-button {
-  position: absolute;
-  top: 0;
-  right: $space-small;
+  @apply absolute top-0 ltr:right-2 rtl:left-2 px-1 rounded-md;
 }
 </style>