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/dashboard/assets/scss/_helper-classes.scss

@@ -4,7 +4,6 @@
   @apply inline-block h-6 py-0 px-6 relative align-middle w-6;
 
   &.message {
-    @include normal-shadow;
     @apply bg-white dark:bg-slate-800 rounded-full left-0 my-3 mx-auto p-4 top-0;
 
     &::before {

app/javascript/dashboard/assets/scss/_mixins.scss

@@ -1,79 +1,7 @@
 @import 'dashboard/assets/scss/variables';
-@import 'widget/assets/scss/mixins';
 
 $spinner-before-border-color: rgba(255, 255, 255, 0.7);
 
-//borders
-@mixin border-nil() {
-  border-color: transparent;
-  border: 0;
-}
-
-@mixin thin-border($color) {
-  border: 1px solid $color;
-}
-
-@mixin custom-border-bottom($size, $color) {
-  border-bottom: $size solid $color;
-}
-
-@mixin custom-border-top($size, $color) {
-  border-top: $size solid $color;
-}
-
-@mixin border-normal() {
-  @apply border border-slate-50 dark:border-slate-700;
-}
-
-@mixin border-normal-left() {
-  @apply border-l border-slate-50 dark:border-slate-700;
-}
-
-@mixin border-normal-top() {
-  @apply border-t border-slate-50 dark:border-slate-700;
-}
-
-@mixin border-normal-right() {
-  @apply border-r border-slate-50 dark:border-slate-700;
-}
-
-@mixin border-normal-bottom() {
-  @apply border-b border-slate-50 dark:border-slate-700;
-}
-
-@mixin border-light() {
-  @apply border border-slate-25 dark:border-slate-700;
-}
-
-@mixin border-light-left() {
-  @apply border-l border-slate-25 dark:border-slate-700;
-}
-
-@mixin border-light-top() {
-  @apply border-t border-slate-25 dark:border-slate-700;
-}
-
-@mixin border-light-right() {
-  @apply border-r border-slate-25 dark:border-slate-700;
-}
-
-@mixin border-light-bottom() {
-  @apply border-b border-slate-25 dark:border-slate-700;
-}
-
-// background
-@mixin background-gray() {
-  background: $color-background;
-}
-
-@mixin background-light() {
-  @apply bg-slate-50 dark:bg-slate-800;
-}
-
-@mixin background-white() {
-  @apply bg-white dark:bg-slate-900;
-}
-
 // input form
 @mixin ghost-input() {
   box-shadow: none;
@@ -87,65 +15,6 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
   }
 }
 
-// flex-layout
-@mixin space-between() {
-  display: flex;
-  justify-content: space-between;
-}
-
-@mixin space-between-column() {
-  @include space-between;
-  flex-direction: column;
-}
-
-@mixin space-between-row() {
-  @include space-between;
-  flex-direction: row;
-}
-
-@mixin flex-shrink() {
-  flex: 0 0 auto;
-  max-width: 100%;
-}
-
-@mixin flex-weight($value) {
-  // Grab flex-grow for older browsers.
-  $flex-grow: nth($value, 1);
-
-  // 2009
-  @include prefixer(box-flex, $flex-grow, webkit moz spec);
-
-  // 2011 (IE 10), 2012
-  @include prefixer(flex, $value, webkit moz ms spec);
-}
-
-// full height
-@mixin full-height() {
-  height: 100%;
-}
-
-@mixin round-corner() {
-  border-radius: 1000px;
-}
-
-@mixin scroll-on-hover() {
-  overflow: hidden;
-
-  &:hover {
-    overflow-y: auto;
-  }
-}
-
-
-@mixin horizontal-scroll() {
-  overflow-y: auto;
-}
-
-@mixin elegant-card() {
-  @include normal-shadow;
-  border-radius: $space-small;
-}
-
 @mixin color-spinner() {
   @keyframes spinner {
     to {
@@ -230,17 +99,3 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
     border-left: $size solid transparent;
   }
 }
-
-@mixin text-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@mixin three-column-grid($column-one-width: 16rem,
-  $column-three-width: 16rem) {
-  width: 100%;
-  height: 100%;
-  display: grid;
-  grid-template-columns: minmax($column-one-width, 6fr) 10fr minmax($column-three-width, 6fr);
-}

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -663,10 +663,10 @@ export default {
     }
 
     &.is-failed {
-      @apply bg-red-200 dark:bg-red-200;
+      @apply bg-n-ruby-4 dark:bg-n-ruby-4 text-n-slate-12;
 
       .message-text--metadata .time {
-        @apply text-red-50 dark:text-red-50;
+        @apply text-n-ruby-12 dark:text-n-ruby-12;
       }
     }
   }
@@ -727,7 +727,7 @@ li.right {
   }
 
   .wrap.is-failed {
-    @apply flex items-end ml-auto;
+    @apply flex items-end ltr:ml-auto rtl:mr-auto;
   }
 }
 

app/javascript/portal/application.scss

@@ -3,10 +3,6 @@
 @import 'tailwindcss/utilities';
 
 @import 'widget/assets/scss/reset';
-@import 'widget/assets/scss/variables';
-@import 'widget/assets/scss/buttons';
-@import 'widget/assets/scss/mixins';
-@import 'widget/assets/scss/forms';
 @import 'shared/assets/fonts/InterDisplay/inter-display';
 
 html,
@@ -18,7 +14,6 @@ body {
   letter-spacing: 0.2px;
 }
 
-
 // Taking these utils from tailwind 3.x.x, need to remove once we upgrade
 .scroll-mt-24 {
   scroll-margin-top: 6rem;

app/javascript/shared/assets/fonts/widget_fonts.scss

@@ -1,3 +1,19 @@
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('shared/assets/fonts/Inter/Inter-Thin.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('shared/assets/fonts/Inter/Inter-Light.woff2') format('woff2');
+}
+
 @font-face {
   font-family: 'Inter';
   font-style: normal;
@@ -6,6 +22,14 @@
   src: url('shared/assets/fonts/Inter/Inter-Regular.woff2') format('woff2');
 }
 
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('shared/assets/fonts/Inter/Inter-Italic.woff2') format('woff2');
+}
+
 @font-face {
   font-family: 'Inter';
   font-style: normal;
@@ -13,3 +37,19 @@
   font-display: swap;
   src: url('shared/assets/fonts/Inter/Inter-Medium.woff2') format('woff2');
 }
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('shared/assets/fonts/Inter/Inter-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('shared/assets/fonts/Inter/Inter-Bold.woff2') format('woff2');
+}

app/javascript/shared/components/Branding.vue

@@ -53,10 +53,10 @@ export default {
       :href="brandRedirectURL"
       rel="noreferrer noopener nofollow"
       target="_blank"
-      class="branding--link justify-center items-center leading-3"
+      class="branding--link text-n-slate-11 hover:text-n-slate-12 cursor-pointer text-xs inline-flex grayscale-[1] hover:grayscale-0 hover:opacity-100 opacity-90 no-underline justify-center items-center leading-3"
     >
       <img
-        class="branding--image"
+        class="ltr:mr-1 rtl:ml-1 max-w-3 max-h-3"
         :alt="globalConfig.brandName"
         :src="globalConfig.logoThumbnail"
       />
@@ -67,29 +67,3 @@ export default {
   </div>
   <div v-else class="p-3" />
 </template>
-
-<style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-
-.branding--image {
-  margin-right: $space-smaller;
-  max-width: $space-slab;
-  max-height: $space-slab;
-}
-
-.branding--link {
-  color: $color-light-gray;
-  cursor: pointer;
-  display: inline-flex;
-  filter: grayscale(1);
-  font-size: $font-size-small;
-  opacity: 0.9;
-  text-decoration: none;
-
-  &:hover {
-    filter: grayscale(0);
-    opacity: 1;
-    color: $color-gray;
-  }
-}
-</style>

app/javascript/shared/components/Button.vue

@@ -25,7 +25,7 @@ export default {
   computed: {
     buttonClassName() {
       let className =
-        'text-white py-3 px-4 rounded shadow-sm leading-4 cursor-pointer disabled:opacity-50';
+        'text-white py-3 px-4 rounded-lg shadow-sm leading-4 cursor-pointer disabled:opacity-50';
       if (this.type === 'clear') {
         className = 'flex mx-auto mt-4 text-xs leading-3 w-auto text-black-600';
       }

app/javascript/shared/components/CardButton.vue

@@ -57,7 +57,7 @@ export default {
   <button
     v-else
     :key="action.payload"
-    class="action-button button"
+    class="action-button button !bg-n-background dark:!bg-n-alpha-black1 text-n-brand"
     :style="{ borderColor: widgetColor, color: widgetColor }"
     @click="onClick"
   >
@@ -66,17 +66,7 @@ export default {
 </template>
 
 <style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-
 .action-button {
-  align-items: center;
+  @apply items-center rounded-lg flex font-medium justify-center mt-1 p-0 w-full;
-  border-radius: $space-micro;
-  display: flex;
-  font-weight: $font-weight-medium;
-  justify-content: center;
-  margin-top: $space-smaller;
-  max-height: 34px;
-  padding: 0;
-  width: 100%;
 }
 </style>

app/javascript/shared/components/ChatCard.vue

@@ -1,6 +1,5 @@
 <script>
 import CardButton from 'shared/components/CardButton.vue';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   components: {
@@ -24,71 +23,27 @@ export default {
       default: () => [],
     },
   },
-  setup() {
-    const { getThemeClass } = useDarkMode();
-    return { getThemeClass };
-  },
 };
 </script>
 
 <template>
   <div
-    class="card-message chat-bubble agent"
+    class="card-message chat-bubble agent bg-n-background dark:bg-n-solid-3 max-w-56 rounded-lg overflow-hidden"
-    :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
   >
-    <img class="media" :src="mediaUrl" />
+    <img
+      class="w-full object-contain max-h-[150px] rounded-[5px]"
+      :src="mediaUrl"
+    />
     <div class="card-body">
       <h4
-        class="title"
+        class="!text-base !font-medium !mt-1 !mb-1 !leading-[1.5] text-n-slate-12"
-        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
       >
         {{ title }}
       </h4>
-      <p
+      <p class="!mb-1 text-n-slate-11">
-        class="body"
-        :class="getThemeClass('text-black-700', 'dark:text-slate-100')"
-      >
         {{ description }}
       </p>
       <CardButton v-for="action in actions" :key="action.id" :action="action" />
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-@import 'dashboard/assets/scss/mixins.scss';
-
-.card-message {
-  max-width: 220px;
-  padding: $space-small;
-  border-radius: $space-small;
-  overflow: hidden;
-
-  .title {
-    font-size: $font-size-default;
-    font-weight: $font-weight-medium;
-    margin-top: $space-smaller;
-    margin-bottom: $space-smaller;
-    line-height: 1.5;
-  }
-
-  .body {
-    margin-bottom: $space-smaller;
-  }
-
-  .media {
-    @include border-light;
-    width: 100%;
-    object-fit: contain;
-    max-height: 150px;
-    border-radius: 5px;
-  }
-
-  .action-button + .action-button {
-    background: $color-white;
-    @include thin-border($color-woot);
-    color: $color-woot;
-  }
-}
-</style>

app/javascript/shared/components/ChatForm.vue

@@ -1,7 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   props: {
@@ -19,10 +18,6 @@ export default {
     },
   },
   emits: ['submit'],
-  setup() {
-    const { getThemeClass } = useDarkMode();
-    return { getThemeClass };
-  },
   data() {
     return {
       formValues: {},
@@ -36,10 +31,6 @@ export default {
     textColor() {
       return getContrastingTextColor(this.widgetColor);
     },
-    inputColor() {
-      return `${this.getThemeClass('bg-white', 'dark:bg-slate-600')}
-        ${this.getThemeClass('text-black-900', 'dark:text-slate-50')}`;
-    },
     isFormValid() {
       return this.items.reduce((acc, { name }) => {
         return !!this.formValues[name] && acc;
@@ -83,25 +74,23 @@ export default {
 
 <template>
   <div
-    class="form chat-bubble agent"
+    class="form chat-bubble agent w-full p-4 bg-n-background dark:bg-n-solid-3"
-    :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
   >
     <form @submit.prevent="onSubmit">
       <div
         v-for="item in items"
         :key="item.key"
-        class="form-block"
+        class="pb-2 w-full"
         :class="{
           'has-submitted': hasSubmitted,
         }"
       >
-        <label :class="getThemeClass('text-black-900', 'dark:text-slate-50')">{{
+        <label class="text-n-slate-12">
-          item.label
+          {{ item.label }}
-        }}</label>
+        </label>
         <input
           v-if="item.type === 'email'"
           v-model="formValues[item.name]"
-          :class="inputColor"
           :type="item.type"
           :pattern="item.regex"
           :title="item.title"
@@ -113,7 +102,6 @@ export default {
         <input
           v-else-if="item.type === 'text'"
           v-model="formValues[item.name]"
-          :class="inputColor"
           :required="item.required && 'required'"
           :pattern="item.pattern"
           :title="item.title"
@@ -125,7 +113,6 @@ export default {
         <textarea
           v-else-if="item.type === 'text_area'"
           v-model="formValues[item.name]"
-          :class="inputColor"
           :required="item.required && 'required'"
           :title="item.title"
           :name="item.name"
@@ -135,7 +122,6 @@ export default {
         <select
           v-else-if="item.type === 'select'"
           v-model="formValues[item.name]"
-          :class="inputColor"
           :required="item.required && 'required'"
         >
           <option
@@ -168,87 +154,31 @@ export default {
 </template>
 
 <style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-
 .form {
-  padding: $space-normal;
-  width: 80%;
-
-  .form-block {
-    width: 90%;
-    padding-bottom: $space-small;
-  }
-
   label {
-    display: block;
+    @apply block font-medium py-1 px-0 capitalize;
-    font-weight: $font-weight-medium;
-    padding: $space-smaller 0;
-    text-transform: capitalize;
-  }
-
-  input,
-  textarea {
-    border-radius: $space-smaller;
-    border: 1px solid $color-border;
-    display: block;
-    font-family: inherit;
-    font-size: $font-size-default;
-    line-height: 1.5;
-    padding: $space-one;
-    width: 100%;
-
-    &:disabled {
-      background: $color-background-light;
-    }
-  }
-
-  textarea {
-    resize: none;
-  }
-
-  select {
-    width: 110%;
-    padding: $space-smaller;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    border: 1px solid $color-border;
-    border-radius: $space-smaller;
-    font-family: inherit;
-    font-size: $space-normal;
-    font-weight: normal;
-    line-height: 1.5;
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
-    background-origin: content-box;
-    background-position: right -1.6rem center;
-    background-repeat: no-repeat;
-    background-size: 9px 6px;
-    padding-right: 2.4rem;
   }
 
   .button {
-    font-size: $font-size-default;
+    @apply text-sm rounded-lg;
   }
 
   .error-message {
-    display: none;
+    @apply text-n-ruby-9 mt-1 hidden;
-    margin-top: $space-smaller;
+  }
-    color: $color-error;
+
+  input,
+  textarea,
+  select {
+    @apply dark:bg-n-alpha-black1;
   }
 
   .has-submitted {
-    input:invalid {
+    input:invalid,
-      border: 1px solid $color-error;
-    }
-
-    input:invalid + .error-message {
-      display: block;
-    }
-
     textarea:invalid {
-      border: 1px solid $color-error;
+      @apply outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9;
     }
-
+    input:invalid + .error-message,
     textarea:invalid + .error-message {
       display: block;
     }

app/javascript/shared/components/ChatOption.vue

@@ -40,35 +40,16 @@ export default {
 </template>
 
 <style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-
 .option {
-  border-radius: $space-jumbo;
+  @apply rounded-[5rem] border border-solid border-n-brand ltr:float-left rtl:float-right m-1 max-w-full;
-  border: 1px solid $color-woot;
-  float: left;
-  margin: $space-smaller;
-  max-width: 100%;
 
   .option-button {
-    background: transparent;
+    @apply bg-transparent border-0 cursor-pointer h-auto leading-normal ltr:text-left rtl:text-right whitespace-normal rounded-[2rem] min-h-[2.5rem];
-    border-radius: $space-large;
-    border: 0;
-    cursor: pointer;
-    height: auto;
-    line-height: 1.5;
-    min-height: $space-two * 2;
-    text-align: left;
-    white-space: normal;
 
     span {
       display: inline-block;
       vertical-align: middle;
     }
-
-    > .icon {
-      margin-right: $space-smaller;
-      font-size: $font-size-medium;
-    }
   }
 }
 </style>

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
-    <div class="card-body">
+    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="title text-black-900 dark:text-slate-50">
+  >
-        <div
+    <h4 class="text-n-slate-12 text-sm font-normal my-1 leading-[1.5]">
-          v-dompurify-html="formatMessage(title, false)"
+      <div
-          class="message-content text-black-900 dark:text-slate-50"
+        v-dompurify-html="formatMessage(title, false)"
-        />
+        class="text-n-slate-12"
-      </h4>
+      />
-      <ul
+    </h4>
-        v-if="!hideFields"
+    <ul v-if="!hideFields" class="w-full">
-        class="options"
+      <ChatOption
-        :class="{ 'has-selected': !!selected }"
+        v-for="option in options"
-      >
+        :key="option.id"
-        <ChatOption
+        :action="option"
-          v-for="option in options"
+        :is-selected="isSelected(option)"
-          :key="option.id"
+        class="list-none p-0"
-          :action="option"
+        @option-select="onClick"
-          :is-selected="isSelected(option)"
+      />
-          @option-select="onClick"
+    </ul>
-        />
-      </ul>
-    </div>
   </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>

app/javascript/shared/components/CustomerSatisfaction.vue

@@ -3,7 +3,6 @@ import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner.vue';
 import { CSAT_RATINGS } from 'shared/constants/messages';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
@@ -21,10 +20,6 @@ export default {
       required: true,
     },
   },
-  setup() {
-    const { getThemeClass } = useDarkMode();
-    return { getThemeClass };
-  },
   data() {
     return {
       email: '',
@@ -46,10 +41,6 @@ export default {
     isButtonDisabled() {
       return !(this.selectedRating && this.feedback);
     },
-    inputColor() {
-      return `${this.getThemeClass('bg-white', 'dark:bg-slate-600')}
-        ${this.getThemeClass('text-black-900', 'dark:text-slate-50')}`;
-    },
     textColor() {
       return getContrastingTextColor(this.widgetColor);
     },
@@ -107,17 +98,13 @@ export default {
 
 <template>
   <div
-    class="customer-satisfaction"
+    class="customer-satisfaction w-full bg-n-background dark:bg-n-solid-3 shadow-[0_0.25rem_6px_rgba(50,50,93,0.08),0_1px_3px_rgba(0,0,0,0.05)] ltr:rounded-bl-[0.25rem] rtl:rounded-br-[0.25rem] rounded-lg inline-block leading-[1.5] mt-1 border-t-2 border-t-n-brand border-solid"
-    :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
     :style="{ borderColor: widgetColor }"
   >
-    <h6
+    <h6 class="text-n-slate-12 text-sm font-medium pt-5 px-2.5 text-center">
-      class="title"
-      :class="getThemeClass('text-slate-900', 'dark:text-slate-50')"
-    >
       {{ title }}
     </h6>
-    <div class="ratings">
+    <div class="ratings flex justify-around py-5 px-4">
       <button
         v-for="rating in ratings"
         :key="rating.key"
@@ -129,13 +116,11 @@ export default {
     </div>
     <form
       v-if="!isFeedbackSubmitted"
-      class="feedback-form"
+      class="feedback-form flex"
       @submit.prevent="onSubmit()"
     >
       <input
         v-model="feedback"
-        class="form-input"
-        :class="inputColor"
         :placeholder="$t('CSAT.PLACEHOLDER')"
         @keydown.enter="onSubmit"
       />
@@ -156,80 +141,35 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import 'widget/assets/scss/variables.scss';
-@import 'widget/assets/scss/mixins.scss';
-
 .customer-satisfaction {
-  @include light-shadow;
-
-  border-bottom-left-radius: $space-smaller;
-  border-radius: $space-small;
-  border-top: $space-micro solid $color-woot;
-  color: $color-body;
-  display: inline-block;
-  line-height: 1.5;
-  margin-top: $space-smaller;
-  width: 80%;
-
-  .title {
-    font-size: $font-size-default;
-    font-weight: $font-weight-medium;
-    padding: $space-two $space-one 0;
-    text-align: center;
-  }
-
   .ratings {
-    display: flex;
-    justify-content: space-around;
-    padding: $space-two $space-normal;
-
     .emoji-button {
-      box-shadow: none;
+      @apply shadow-none grayscale text-2xl outline-none transition-all duration-200;
-      filter: grayscale(100%);
-      font-size: $font-size-big;
-      outline: none;
 
       &.selected,
       &:hover,
       &:focus,
       &:active {
-        filter: grayscale(0%);
+        @apply grayscale-0 scale-[1.32];
-        transform: scale(1.32);
       }
 
       &.disabled {
-        cursor: default;
+        @apply cursor-not-allowed opacity-50 pointer-events-none;
-        opacity: 0.5;
-        pointer-events: none;
       }
     }
   }
 
   .feedback-form {
-    display: flex;
-
     input {
-      border-bottom-right-radius: 0;
+      @apply h-10 dark:bg-n-alpha-black1 rtl:rounded-tl-[0] rtl:rounded-tr-[0] ltr:rounded-tr-[0] ltr:rounded-tl-[0] rtl:rounded-bl-[0] ltr:rounded-br-[0] ltr:rounded-bl-[0.25rem] rtl:rounded-br-[0.25rem] rounded-lg p-2.5 w-full focus:ring-0 focus:outline-n-brand;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: $space-small;
-      border: 0;
-      border-top: 1px solid $color-border;
-      padding: $space-one;
-      width: 100%;
 
       &::placeholder {
-        color: $color-light-gray;
+        @apply text-n-slate-10;
       }
     }
 
     .button {
-      appearance: none;
+      @apply rtl:rounded-tr-[0] rtl:rounded-tl-[0] appearance-none ltr:rounded-tl-[0] ltr:rounded-tr-[0] rtl:rounded-br-[0] ltr:rounded-bl-[0] rounded-lg h-auto ltr:-ml-px rtl:-mr-px text-xl;
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-      border-bottom-right-radius: $space-small;
-      font-size: $font-size-large;
-      height: auto;
-      margin-left: -1px;
 
       .spinner {
         display: block;
@@ -240,10 +180,4 @@ export default {
     }
   }
 }
-
-@media (prefers-color-scheme: dark) {
-  .customer-satisfaction .feedback-form input {
-    border-top: 1px solid var(--b-500);
-  }
-}
 </style>

app/javascript/shared/components/DateSeparator.vue

@@ -1,6 +1,5 @@
 <script>
 import { formatDate } from 'shared/helpers/DateHelper';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   props: {
@@ -9,10 +8,6 @@ export default {
       required: true,
     },
   },
-  setup() {
-    const { getThemeClass } = useDarkMode();
-    return { getThemeClass };
-  },
   computed: {
     formattedDate() {
       return formatDate({
@@ -27,40 +22,8 @@ export default {
 
 <template>
   <div
-    class="date--separator"
+    class="text-sm text-n-slate-11 h-[50px] leading-[50px] relative text-center w-full before:content-[''] before:h-px before:absolute before:top-6 before:w-[calc((100%-120px)/2)] before:bg-n-slate-4 before:dark:bg-n-slate-6 before:left-0 after:content-[''] after:h-px after:absolute after:top-6 after:w-[calc((100%-120px)/2)] after:bg-n-slate-4 after:dark:bg-n-slate-6 after:right-0"
-    :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
   >
     {{ formattedDate }}
   </div>
 </template>
-
-<style lang="scss" scoped>
-@import 'widget/assets/scss/variables';
-
-.date--separator {
-  font-size: $font-size-default;
-  height: 50px;
-  line-height: 50px;
-  position: relative;
-  text-align: center;
-  width: 100%;
-}
-
-.date--separator::before,
-.date--separator::after {
-  background-color: $color-border;
-  content: '';
-  height: 1px;
-  position: absolute;
-  top: 24px;
-  width: calc((100% - 120px) / 2);
-}
-
-.date--separator::before {
-  left: 0;
-}
-
-.date--separator::after {
-  right: 0;
-}
-</style>

app/javascript/shared/components/IframeLoader.vue

@@ -11,6 +11,10 @@ export default {
       type: String,
       default: '',
     },
+    isRtl: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -18,6 +22,32 @@ export default {
       showEmptyState: !this.url,
     };
   },
+  watch: {
+    isRtl: {
+      immediate: true,
+      handler(value) {
+        this.$nextTick(() => {
+          const iframeElement = this.$el.querySelector('iframe');
+          if (iframeElement) {
+            iframeElement.onload = () => {
+              try {
+                const iframeDocument =
+                  iframeElement.contentDocument ||
+                  (iframeElement.contentWindow &&
+                    iframeElement.contentWindow.document);
+
+                if (iframeDocument) {
+                  iframeDocument.documentElement.dir = value ? 'rtl' : 'ltr';
+                }
+              } catch (e) {
+                // error
+              }
+            };
+          }
+        });
+      },
+    },
+  },
   methods: {
     handleIframeLoad() {
       // Once loaded, the loading state is hidden

app/javascript/shared/components/Spinner.vue

@@ -35,82 +35,41 @@ export default {
 </template>
 
 <style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
+@keyframes spinner {
-
+  to {
-@mixin color-spinner() {
+    transform: rotate(360deg);
-  @keyframes spinner {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  &:before {
-    content: '';
-    box-sizing: border-box;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: $space-medium;
-    height: $space-medium;
-    margin-top: -$space-one;
-    margin-left: -$space-one;
-    border-radius: 50%;
-    border: 2px solid rgba(255, 255, 255, 0.8);
-    border-top-color: rgba(255, 255, 255, 0.3);
-    animation: spinner 0.9s linear infinite;
   }
 }
 
 .spinner {
-  @include color-spinner();
+  @apply relative inline-block w-6 h-6 align-middle;
-  position: relative;
+
-  display: inline-block;
+  &:before {
-  width: $space-medium;
+    @apply border-n-slate-10 border-2 border-solid content-[''] box-border absolute top-[50%] left-[50%] rounded-full border-t-n-strong -ml-2.5 -mt-2.5 w-6 h-6 animate-[spinner_0.9s_linear_infinite];
-  height: $space-medium;
+  }
-  padding: $zero $space-medium;
-  vertical-align: middle;
 
   &.message {
-    padding: $space-one;
+    @apply p-2.5 top-0 left-0 mx-auto my-0 mt-3 bg-n-background rounded-[2rem];
-    top: 0;
-    left: 0;
-    margin: 0 auto;
-    margin-top: $space-slab;
-    background: $color-white;
-    border-radius: $space-large;
 
     &:before {
-      margin-top: -$space-slab;
+      @apply -mt-3 -ml-3;
-      margin-left: -$space-slab;
     }
   }
 
   &.small {
-    width: $space-normal;
+    @apply w-4 h-4;
-    height: $space-normal;
 
     &:before {
-      width: $space-normal;
+      @apply w-4 h-4 -mt-2;
-      height: $space-normal;
-      margin-top: -$space-small;
     }
   }
 
   &.tiny {
-    width: $space-one;
+    @apply w-2.5 h-2.5 py-0 px-1;
-    height: $space-one;
-    padding: 0 $space-smaller;
 
     &:before {
-      width: $space-one;
+      @apply w-2.5 h-2.5 -mt-1.5;
-      height: $space-one;
-      margin-top: -$space-small + $space-micro;
     }
   }
-
-  &.dark::before {
-    border-color: rgba(0, 0, 0, 0.7);
-    border-top-color: rgba(0, 0, 0, 0.2);
-  }
 }
 </style>

app/javascript/shared/components/specs/__snapshots__/DateSeparator.spec.js.snap

@@ -2,18 +2,8 @@
 
 exports[`DateSeparator > date separator snapshot 1`] = `
 <div
-  class="date--separator text-slate-700"
+  class="text-sm text-n-slate-11 h-[50px] leading-[50px] relative text-center w-full before:content-[''] before:h-px before:absolute before:top-6 before:w-[calc((100%-120px)/2)] before:bg-n-slate-4 before:dark:bg-n-slate-6 before:left-0 after:content-[''] after:h-px after:absolute after:top-6 after:w-[calc((100%-120px)/2)] after:bg-n-slate-4 after:dark:bg-n-slate-6 after:right-0"
-  data-v-b24b73fa=""
 >
   Nov 18, 2019
 </div>
 `;
-
-exports[`dateSeparator > date separator snapshot 1`] = `
-<div
-  class="date--separator text-slate-700"
-  data-v-b24b73fa=""
->
-   Nov 18, 2019 
-</div>
-`;

app/javascript/survey/assets/scss/woot.scss

@@ -2,15 +2,11 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 @import 'widget/assets/scss/reset';
-@import 'widget/assets/scss/variables';
-@import 'widget/assets/scss/buttons';
-@import 'widget/assets/scss/mixins';
-@import 'widget/assets/scss/forms';
 @import 'shared/assets/fonts/widget_fonts';
 
 html,
 body {
-  font-family: $font-family;
+  font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Tahoma, Arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   height: 100%;

app/javascript/survey/views/Response.vue

@@ -180,9 +180,7 @@ export default {
 </template>
 
 <style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-
 .logo {
-  max-height: $space-larger;
+  max-height: 3rem;
 }
 </style>

app/javascript/widget/App.vue

@@ -6,6 +6,7 @@ import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import configMixin from './mixins/configMixin';
 import availabilityMixin from 'widget/mixins/availability';
 import { getLocale } from './helpers/urlParamsHelper';
+import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import { isEmptyObject } from 'widget/helpers/utils';
 import Spinner from 'shared/components/Spinner.vue';
 import routerMixin from './mixins/routerMixin';
@@ -57,11 +58,22 @@ export default {
     isRNWebView() {
       return RNHelper.isRNWebView();
     },
+    isRTL() {
+      return this.$root.$i18n.locale
+        ? getLanguageDirection(this.$root.$i18n.locale)
+        : false;
+    },
   },
   watch: {
     activeCampaign() {
       this.setCampaignView();
     },
+    isRTL: {
+      immediate: true,
+      handler(value) {
+        document.documentElement.dir = value ? 'rtl' : 'ltr';
+      },
+    },
   },
   mounted() {
     const { websiteToken, locale, widgetColor } = window.chatwootWebChannel;
@@ -335,7 +347,7 @@ export default {
 <template>
   <div
     v-if="!conversationSize && isFetchingList"
-    class="flex items-center justify-center flex-1 h-full bg-black-25"
+    class="flex items-center justify-center flex-1 h-full bg-n-background"
     :class="{ dark: prefersDarkMode }"
   >
     <Spinner size="" />

app/javascript/widget/assets/scss/_buttons.scss

@@ -1,71 +0,0 @@
-$button-border-width: 1px;
-// Buttons
-.button {
-  appearance: none;
-  background: $color-primary;
-  border: $button-border-width solid $color-primary;
-  border-radius: $border-radius;
-  color: $color-white;
-  cursor: pointer;
-  display: inline-block;
-  font-size: $font-size-default;
-  height: $space-two * 2;
-  line-height: $line-height;
-  outline: none;
-  padding: $space-smaller $space-normal;
-  text-align: center;
-  text-decoration: none;
-  transition: background .2s, border .2s, box-shadow .2s, color .2s;
-  user-select: none;
-  vertical-align: middle;
-  white-space: nowrap;
-
-  &:focus,
-  &:hover {
-    background: lighten($color-primary, 7%);
-    border-color: $color-primary;
-    text-decoration: none;
-  }
-
-  &:active,
-  &.active {
-    background: $color-primary;
-    border-color: darken($color-primary, 5%);
-    color: lighten($color-primary, 20%);
-    text-decoration: none;
-  }
-
-  &[disabled],
-  &:disabled,
-  &.disabled {
-    cursor: default;
-    opacity: .5;
-    pointer-events: none;
-  }
-
-  &.small {
-    font-size: $font-size-small;
-    height: $space-medium;
-    padding: $space-smaller $space-slab;
-  }
-
-  &.large {
-    font-size: $font-size-medium;
-    height: $space-larger;
-    padding: $space-small $space-medium;
-  }
-
-  &.block {
-    width: 100%;
-  }
-
-  &.transparent {
-    background: transparent;
-    border: 0;
-    height: auto;
-  }
-
-  &.compact {
-    padding: 0;
-  }
-}

app/javascript/widget/assets/scss/_forms.scss

@@ -1,83 +0,0 @@
-// scss-lint:disable PropertySortOrder DeclarationOrder QualifyingElement
-$form-border-width: 1px;
-$input-height: $space-two * 2;
-
-.form-input {
-  @include placeholder {
-    color: $color-gray;
-  }
-
-  appearance: none;
-  background: $color-white;
-  border: 1px solid $color-border;
-  border-radius: $border-radius;
-  box-sizing: border-box;
-  color: $color-body;
-  display: block;
-  font-family: $font-family;
-  font-size: $font-size-medium;
-  height: $input-height;
-  line-height: 1.5;
-  max-width: 100%;
-  outline: none;
-  padding: $space-smaller;
-  position: relative;
-  transition: background .2s,
-  border .2s,
-  box-shadow .2s,
-  color .2s;
-  width: 100%;
-
-  &:focus {
-    border-color: $color-primary;
-  }
-
-  &::placeholder {
-    color: $color-gray;
-  }
-
-  // Input sizes
-  &.small {
-    font-size: $font-size-small;
-    height: $space-large;
-    padding: $space-small $space-one;
-  }
-
-  &.default {
-    font-size: $font-size-default;
-    height: $space-medium;
-    padding: $space-smaller $space-slab;
-  }
-
-  &.large {
-    font-size: $font-size-medium;
-    height: $space-larger;
-    padding: $space-slab $space-two;
-  }
-
-  &.input-inline {
-    display: inline-block;
-    vertical-align: middle;
-    width: auto;
-  }
-
-  // Input types
-  &[type="file"] {
-    height: auto;
-  }
-}
-
-// Form element: Textarea
-textarea.form-input {
-  font-family: $font-family;
-
-  @include placeholder {
-    color: $color-light-gray;
-  }
-
-  &,
-  &.large,
-  &.small {
-    height: auto;
-  }
-}

app/javascript/widget/assets/scss/_mixins.scss

@@ -1,78 +0,0 @@
-// scss-lint:disable PseudoElement SpaceBeforeBrace VendorPrefix
-$shadow-color-1: rgba(50, 50, 93, 0.08);
-$shadow-color-2: rgba(0, 0, 0, 0.07);
-$shadow-color-3: rgba(50, 50, 93, 0.08);
-$shadow-color-4: rgba(0, 0, 0, 0.05);
-
-$color-shadow-medium: rgba(50, 50, 93, 0.08);
-$color-shadow-light: rgba(50, 50, 93, 0.04);
-$color-shadow-large: rgba(50, 50, 93, 0.25);
-$color-shadow-outline: rgba(66, 153, 225, 0.5);
-
-@mixin normal-shadow {
-  box-shadow: 0 $space-small $space-normal $shadow-color-1,
-    0 $space-smaller $space-slab $shadow-color-2;
-}
-
-@mixin light-shadow {
-  box-shadow: 0 $space-smaller 6px $shadow-color-3, 0 1px 3px $shadow-color-4;
-}
-
-@mixin placeholder {
-  &::-webkit-input-placeholder {
-    @content;
-  }
-
-  &:-moz-placeholder {
-    @content;
-  }
-
-  &::-moz-placeholder {
-    @content;
-  }
-
-  &:-ms-input-placeholder {
-    @content;
-  }
-}
-
-@mixin shadow {
-  box-shadow: 0 1px 10px 2px $color-shadow-medium,
-    0 1px 5px 1px $color-shadow-light;
-}
-
-@mixin shadow-medium {
-  box-shadow: 0 4px 24px 4px $color-shadow-medium,
-    0 2px 16px 2px $color-shadow-light;
-}
-
-@mixin shadow-large {
-  box-shadow: 0 10px 15px -16px $color-shadow-medium,
-    0 4px 6px -8px $color-shadow-light;
-}
-
-@mixin shadow-big {
-  box-shadow: 0 20px 25px -20px $color-shadow-medium,
-    0 10px 10px -10px $color-shadow-light;
-}
-
-@mixin shadow-mega {
-  box-shadow: 0 25px 50px -12px $color-shadow-big;
-}
-
-@mixin shadow-inner {
-  box-shadow: inset 0 2px 4px 0 $color-shadow-light;
-}
-
-@mixin shadow-outline {
-  box-shadow: 0 0 0 3px $color-shadow-outline;
-}
-
-@mixin shadow-none {
-  box-shadow: none;
-}
-
-@mixin button-size {
-  min-height: $space-large;
-  min-width: $space-large;
-}

app/javascript/widget/assets/scss/_utilities.scss

@@ -1,3 +0,0 @@
-.icon-button {
-  @include button-size;
-}

app/javascript/widget/assets/scss/_variables.scss

@@ -1,87 +0,0 @@
-// Font sizes
-$font-size-micro: 0.5rem;
-$font-size-mini: 0.625rem;
-$font-size-small: 0.75rem;
-$font-size-default: 0.875rem;
-$font-size-medium: 1rem;
-$font-size-large: 1.25rem;
-$font-size-big: 1.5rem;
-$font-size-bigger: 2rem;
-$font-size-mega: 2.5rem;
-$font-size-giga: 3.5rem;
-
-// spaces
-$zero: 0;
-$space-micro: 0.125rem;
-$space-smaller: 0.25rem;
-$space-small: 0.5rem;
-$space-one: 0.625rem;
-$space-slab: 0.75rem;
-$space-normal: 1rem;
-$space-two: 1.25rem;
-$space-medium: 1.5rem;
-$space-large: 2rem;
-$space-larger: 3rem;
-$space-big: 4rem;
-$space-jumbo: 5rem;
-$space-mega: 6.25rem;
-
-$border-radius-small: 0.1875rem;
-$border-radius-normal: 0.3125rem;
-
-// font-weight
-$font-weight-feather: 100;
-$font-weight-light: 300;
-$font-weight-normal: 400;
-$font-weight-medium: 500;
-$font-weight-bold: 600;
-$font-weight-black: 700;
-
-// Colors
-$color-woot: #1f93ff;
-$color-primary: $color-woot;
-$color-gray: #6e6f73;
-$color-light-gray: #999a9b;
-$color-border: #e0e6ed;
-$color-border-transparent: rgba(224, 230, 237, 0.5);
-$color-border-light: #f0f4f5;
-$color-border-dark: #cad0d4;
-$color-background: #f4f6fb;
-$color-background-light: #fafafa;
-$color-white: #fff;
-$color-body: #3c4858;
-$color-heading: #1f2d3d;
-$color-error: #ff382d;
-$color-success: #44ce4b;
-
-// Color-palettes
-
-$color-primary-light: #c7e3ff;
-$color-primary-dark: darken($color-woot, 20%);
-
-// Snackbar default
-$woot-snackbar-bg: #323232;
-$woot-snackbar-button: #ffeb3b;
-
-$swift-ease-out-duration: 0.4s !default;
-$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
-$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
-
-$border-radius: 0.1875px;
-$line-height: 1;
-$footer-height: 11.2rem;
-$header-expanded-height: $space-medium * 10;
-
-$font-family: 'Inter',
-  -apple-system,
-  system-ui,
-  BlinkMacSystemFont,
-  'Segoe UI',
-  Roboto,
-  'Helvetica Neue',
-  Tahoma,
-  Arial,
-  sans-serif;
-
-// Break points
-$break-point-medium: 667px;

app/javascript/widget/assets/scss/views/_conversation.scss

@@ -4,28 +4,18 @@
 
 .conversation-wrap {
   .agent-message {
-    align-items: flex-end;
+    @apply items-end flex flex-row justify-start mt-0 ltr:mr-0 rtl:mr-2 mb-0.5 ltr:ml-2 rtl:ml-0 max-w-[88%];
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    margin: 0 0 $space-micro $space-small;
-    max-width: 88%;
 
     .avatar-wrap {
-      flex-shrink: 0;
+      @apply flex-shrink-0 h-6 w-6;
-      height: $space-medium;
-      width: $space-medium;
 
       .user-thumbnail-box {
-        margin-top: -$space-large;
+        @apply -mt-8;
       }
     }
 
     .message-wrap {
-      flex-grow: 1;
+      @apply flex-grow flex-shrink-0 ltr:ml-2 rtl:mr-2 max-w-[90%];
-      flex-shrink: 0;
-      margin-left: $space-small;
-      max-width: 90%;
     }
   }
 
@@ -42,10 +32,7 @@
   }
 
   .agent-name {
-    font-size: $font-size-small;
+    @apply text-xs font-medium my-2 ltr:pl-0.5 rtl:pr-0.5;
-    font-weight: $font-weight-medium;
-    margin: $space-small 0;
-    padding-left: $space-micro;
   }
 
   .has-attachment {
@@ -56,146 +43,127 @@
     }
 
     &.has-text {
-      margin-top: $space-smaller;
+      @apply mt-1;
     }
   }
 
   .agent-message-wrap {
     + .agent-message-wrap {
-      margin-top: $space-micro;
+      @apply mt-0.5;
 
       .agent-message .chat-bubble {
-        border-top-left-radius: $space-smaller;
+        @apply ltr:rounded-tl-[0.25rem] rtl:rounded-tr-[0.25rem];
       }
     }
 
     + .user-message-wrap {
-      margin-top: $space-normal;
+      @apply mt-4;
     }
 
     &.has-response + .user-message-wrap {
-      margin-top: $space-micro;
+      @apply mt-0.5;
 
       .chat-bubble {
-        border-top-right-radius: $space-smaller;
+        @apply ltr:rounded-tr-[0.25rem] rtl:rounded-tl-[0.25rem];
       }
     }
 
     &.has-response + .agent-message-wrap {
-      margin-top: $space-normal;
+      @apply mt-4;
     }
   }
 
   .user-message {
-    align-items: flex-end;
+    @apply flex items-end flex-row justify-end max-w-[85%] ltr:text-right rtl:text-left mt-0 ltr:ml-auto rtl:mr-auto ltr:mr-1 rtl:ml-1 mb-0.5;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    margin: 0 $space-smaller $space-micro auto;
-    max-width: 85%;
-    text-align: right;
 
     .message-wrap {
-      margin-right: $space-small;
+      @apply max-w-full ltr:mr-2 rtl:ml-2;
-      max-width: 100%;
     }
 
-    .in-progress,
+    .in-progress {
-    .is-failed {
       opacity: 0.6;
     }
 
     .is-failed {
-      align-items: flex-end;
+      @apply flex items-end flex-row-reverse;
-      display: flex;
-      flex-direction: row-reverse;
 
       .chat-bubble.user {
-        background: $color-error !important;
+        @apply bg-n-ruby-9 dark:bg-n-ruby-9 #{!important};
-        // TODO: Remove the important
       }
     }
   }
 
   .user.has-attachment {
     .icon-wrap {
-      color: $color-white;
+      @apply text-white;
     }
 
     .download {
-      color: $color-white;
+      @apply text-white;
     }
   }
 
   .user-message-wrap {
     + .user-message-wrap {
-      margin-top: $space-micro;
+      @apply mt-0.5;
 
       .user-message .chat-bubble {
-        border-top-right-radius: $space-smaller;
+        @apply ltr:rounded-tr-[0.25rem] rtl:rounded-tl-[0.25rem];
       }
     }
 
     + .agent-message-wrap {
-      margin-top: $space-normal;
+      @apply mt-4;
     }
   }
 
   p:not(:last-child) {
-    margin-bottom: $space-normal;
+    @apply mb-4;
   }
 }
 
 .unread-messages {
-  display: flex;
+  @apply flex flex-col flex-nowrap mt-0 overflow-y-auto w-full pb-2;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  margin-top: 0;
-  overflow-y: auto;
-  padding-bottom: $space-small;
-  width: 100%;
 
   .chat-bubble-wrap {
-    margin-bottom: $space-smaller;
+    @apply mb-1;
 
     &:first-child {
       margin-top: auto;
     }
 
     .chat-bubble {
-      border: 1px solid $color-border-dark;
+      @apply border border-solid border-n-slate-5 dark:border-n-slate-11/50 text-n-black;
     }
 
     + .chat-bubble-wrap {
       .chat-bubble {
-        border-top-left-radius: $space-smaller;
+        @apply ltr:rounded-tl-[0.25rem] rtl:rounded-tr-[0.25rem];
       }
     }
 
     &:last-child .chat-bubble {
-      border-bottom-left-radius: $space-two;
+      @apply ltr:rounded-bl-[1.25rem] rtl:rounded-br-[1.25rem];
     }
   }
 }
 
 .is-widget-right .unread-wrap {
-  overflow: hidden;
+  @apply ltr:text-right rtl:text-left overflow-hidden;
-  text-align: right;
 
   .chat-bubble-wrap {
     .chat-bubble {
-      border-bottom-right-radius: $space-smaller;
+      @apply ltr:rounded-br-[0.25rem] rtl:rounded-bl-[0.25rem] rounded-[1.25rem];
-      border-radius: $space-two;
     }
 
     + .chat-bubble-wrap {
       .chat-bubble {
-        border-top-right-radius: $space-smaller;
+        @apply ltr:rounded-tr-[0.25rem] rtl:rounded-tl-[0.25rem];
       }
     }
 
     &:last-child .chat-bubble {
-      border-bottom-right-radius: $space-two;
+      @apply ltr:rounded-br-[1.25rem] rtl:rounded-bl-[1.25rem];
     }
   }
 
@@ -205,15 +173,8 @@
 }
 
 .chat-bubble {
-  @include light-shadow;
+  @apply shadow-[0_0.25rem_6px_rgba(50,50,93,0.08),0_1px_3px_rgba(0,0,0,0.05)] rounded-[1.25rem] inline-block text-sm leading-[1.5] max-w-full ltr:text-left rtl:text-right py-3 px-4 text-white;
-  border-radius: $space-two;
+
-  color: $color-white;
-  display: inline-block;
-  font-size: $font-size-default;
-  line-height: 1.5;
-  max-width: 100%;
-  padding: $space-slab $space-normal;
-  text-align: left;
   word-break: break-word;
 
   :not([audio]) {
@@ -221,7 +182,7 @@
   }
 
   > a {
-    color: $color-primary;
+    @apply text-n-brand;
     word-break: break-all;
   }
 
@@ -230,19 +191,18 @@
   }
 
   &.user {
-    border-bottom-right-radius: $space-smaller;
+    @apply ltr:rounded-br-[0.25rem] rtl:rounded-bl-[0.25rem];
 
     > a {
-      color: $color-white;
+      @apply text-white;
     }
   }
 
   &.agent {
-    border-bottom-left-radius: $space-smaller;
+    @apply ltr:rounded-bl-[0.25rem] rtl:rounded-br-[0.25rem] text-n-slate-12;
-    color: $color-body;
 
     .link {
-      color: $color-woot;
+      @apply text-n-brand;
       word-break: break-word;
     }
   }

app/javascript/widget/assets/scss/woot.scss

@@ -5,20 +5,12 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
-@import 'variables';
-@import 'buttons';
-@import 'mixins';
-@import 'forms';
-@import 'utilities';
 @import 'shared/assets/fonts/widget_fonts';
 @import 'views/conversation';
 
 html,
 body {
-  font-family: $font-family;
+  @apply antialiased h-full bg-n-background;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  height: 100%;
 }
 
 .is-mobile {
@@ -43,19 +35,15 @@ body {
   }
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
 .message-content {
   ul {
     list-style: disc;
-    padding-left: $space-slab;
+    @apply ltr:pl-3 rtl:pr-3;
   }
 
   ol {
     list-style: decimal;
-    padding-left: $space-normal;
+    @apply ltr:pl-4 rtl:pr-4;
   }
 }
 
@@ -82,3 +70,316 @@ body {
     }
   }
 }
+
+label {
+  @apply block font-medium py-1 px-0 capitalize;
+}
+
+input:not(.reset-base),
+textarea:not(.reset-base) {
+  font-family: inherit;
+  @apply rounded-lg box-border bg-n-background dark:bg-n-alpha-2 border-none outline outline-1 outline-offset-[-1px] outline-n-weak block text-base leading-[1.5] p-2.5 w-full text-n-slate-12 focus:outline-n-brand focus:ring-1 focus:ring-n-brand;
+
+  &:disabled {
+    @apply opacity-40 cursor-not-allowed;
+  }
+
+  &:placeholder-shown {
+    @apply text-ellipsis;
+  }
+}
+
+textarea {
+  resize: none;
+}
+
+select:not(.reset-base) {
+  @apply bg-n-background dark:bg-n-alpha-2 w-full p-2.5 border-none outline outline-1 outline-offset-[-1px] outline-n-weak rounded-lg text-n-slate-12 text-base ltr:pr-10 rtl:pl-10 font-normal ltr:bg-[right_-1.6rem_center] rtl:bg-[left_-1.6rem_center] focus:outline-n-brand focus:ring-1 focus:ring-n-brand;
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
+  background-origin: content-box;
+  background-repeat: no-repeat;
+  background-size: 9px 6px;
+  font-family: inherit;
+}
+
+p code {
+  @apply bg-n-slate-3 dark:bg-n-alpha-2 text-n-slate-11 text-sm inline-block rounded py-px px-1;
+}
+
+pre {
+  @apply bg-n-slate-3 dark:bg-n-alpha-2 text-n-slate-11 overflow-y-auto rounded-md p-2 mt-1 mb-2 block leading-[1.5] whitespace-pre-wrap;
+
+  code {
+    @apply bg-transparent text-n-slate-11 p-0 text-sm;
+  }
+}
+
+blockquote {
+  @apply ltr:border-l-4 rtl:border-r-4 border-n-slate-3 dark:border-n-alpha-2 border-solid my-1 px-0 text-n-slate-11 py-1 ltr:pr-2 rtl:pr-4 ltr:pl-4 rtl:pl-2;
+}
+
+.button {
+  @apply appearance-none bg-n-brand border border-solid border-n-brand text-white cursor-pointer inline-block text-sm h-10 leading-none outline-none outline-0 py-1 px-4 text-center no-underline select-none align-middle whitespace-nowrap;
+
+  &:focus,
+  &:hover {
+    @apply no-underline border-n-brand brightness-110;
+  }
+
+  &:active,
+  &.active {
+    @apply no-underline border-n-brand brightness-125;
+  }
+
+  &[disabled],
+  &:disabled,
+  &.disabled {
+    cursor: default;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &.small {
+    @apply text-xs h-6 py-1 px-3;
+  }
+
+  &.large {
+    @apply text-base h-12 py-2 px-6;
+  }
+
+  &.block {
+    width: 100%;
+  }
+
+  &.transparent {
+    background: transparent;
+    border: 0;
+    height: auto;
+  }
+
+  &.compact {
+    padding: 0;
+  }
+}
+
+// scss-lint:disable PropertySortOrder
+@layer base {
+  // NEXT COLORS START
+  :root {
+    // slate
+    --slate-1: 252 252 253;
+    --slate-2: 249 249 251;
+    --slate-3: 240 240 243;
+    --slate-4: 232 232 236;
+    --slate-5: 224 225 230;
+    --slate-6: 217 217 224;
+    --slate-7: 205 206 214;
+    --slate-8: 185 187 198;
+    --slate-9: 139 141 152;
+    --slate-10: 128 131 141;
+    --slate-11: 96 100 108;
+    --slate-12: 28 32 36;
+
+    // iris
+    --iris-1: 253 253 255;
+    --iris-2: 248 248 255;
+    --iris-3: 240 241 254;
+    --iris-4: 230 231 255;
+    --iris-5: 218 220 255;
+    --iris-6: 203 205 255;
+    --iris-7: 184 186 248;
+    --iris-8: 155 158 240;
+    --iris-9: 91 91 214;
+    --iris-10: 81 81 205;
+    --iris-11: 87 83 198;
+    --iris-12: 39 41 98;
+
+    // ruby
+    --ruby-1: 255 252 253;
+    --ruby-2: 255 247 248;
+    --ruby-3: 254 234 237;
+    --ruby-4: 255 220 225;
+    --ruby-5: 255 206 214;
+    --ruby-6: 248 191 200;
+    --ruby-7: 239 172 184;
+    --ruby-8: 229 146 163;
+    --ruby-9: 229 70 102;
+    --ruby-10: 220 59 93;
+    --ruby-11: 202 36 77;
+    --ruby-12: 100 23 43;
+
+    // amber
+    --amber-1: 254 253 251;
+    --amber-2: 254 251 233;
+    --amber-3: 255 247 194;
+    --amber-4: 255 238 156;
+    --amber-5: 251 229 119;
+    --amber-6: 243 214 115;
+    --amber-7: 233 193 98;
+    --amber-8: 226 163 54;
+    --amber-9: 255 197 61;
+    --amber-10: 255 186 24;
+    --amber-11: 171 100 0;
+    --amber-12: 79 52 34;
+
+    // teal
+    --teal-1: 250 254 253;
+    --teal-2: 243 251 249;
+    --teal-3: 224 248 243;
+    --teal-4: 204 243 234;
+    --teal-5: 184 234 224;
+    --teal-6: 161 222 210;
+    --teal-7: 131 205 193;
+    --teal-8: 83 185 171;
+    --teal-9: 18 165 148;
+    --teal-10: 13 155 138;
+    --teal-11: 0 133 115;
+    --teal-12: 13 61 56;
+
+    // gray
+    --gray-1: 252 252 252;
+    --gray-2: 249 249 249;
+    --gray-3: 240 240 240;
+    --gray-4: 232 232 232;
+    --gray-5: 224 224 224;
+    --gray-6: 217 217 217;
+    --gray-7: 206 206 206;
+    --gray-8: 187 187 187;
+    --gray-9: 141 141 141;
+    --gray-10: 131 131 131;
+    --gray-11: 100 100 100;
+    --gray-12: 32 32 32;
+
+    --background-color: 253 253 253;
+    --text-blue: 8 109 224;
+    --border-container: 236 236 236;
+    --border-strong: 235 235 235;
+    --border-weak: 234 234 234;
+    --solid-1: 255 255 255;
+    --solid-2: 255 255 255;
+    --solid-3: 255 255 255;
+    --solid-active: 255 255 255;
+    --solid-amber: 252 232 193;
+    --solid-blue: 218 236 255;
+    --solid-iris: 230 231 255;
+
+    --alpha-1: 67, 67, 67, 0.06;
+    --alpha-2: 201, 202, 207, 0.15;
+    --alpha-3: 255, 255, 255, 0.96;
+    --black-alpha-1: 0, 0, 0, 0.12;
+    --black-alpha-2: 0, 0, 0, 0.04;
+    --border-blue: 39, 129, 246, 0.5;
+    --white-alpha: 255, 255, 255, 0.8;
+  }
+
+  .dark {
+    // slate
+    --slate-1: 17 17 19;
+    --slate-2: 24 25 27;
+    --slate-3: 33 34 37;
+    --slate-4: 39 42 45;
+    --slate-5: 46 49 53;
+    --slate-6: 54 58 63;
+    --slate-7: 67 72 78;
+    --slate-8: 90 97 105;
+    --slate-9: 105 110 119;
+    --slate-10: 119 123 132;
+    --slate-11: 176 180 186;
+    --slate-12: 237 238 240;
+
+    // iris
+    --iris-1: 19 19 30;
+    --iris-2: 23 22 37;
+    --iris-3: 32 34 72;
+    --iris-4: 38 42 101;
+    --iris-5: 48 51 116;
+    --iris-6: 61 62 130;
+    --iris-7: 74 74 149;
+    --iris-8: 89 88 177;
+    --iris-9: 91 91 214;
+    --iris-10: 84 114 228;
+    --iris-11: 158 177 255;
+    --iris-12: 224 223 254;
+
+    // ruby
+    --ruby-1: 25 17 19;
+    --ruby-2: 30 21 23;
+    --ruby-3: 58 20 30;
+    --ruby-4: 78 19 37;
+    --ruby-5: 94 26 46;
+    --ruby-6: 111 37 57;
+    --ruby-7: 136 52 71;
+    --ruby-8: 179 68 90;
+    --ruby-9: 229 70 102;
+    --ruby-10: 236 90 114;
+    --ruby-11: 255 148 157;
+    --ruby-12: 254 210 225;
+
+    // amber
+    --amber-1: 22 18 12;
+    --amber-2: 29 24 15;
+    --amber-3: 48 32 8;
+    --amber-4: 63 39 0;
+    --amber-5: 77 48 0;
+    --amber-6: 92 61 5;
+    --amber-7: 113 79 25;
+    --amber-8: 143 100 36;
+    --amber-9: 255 197 61;
+    --amber-10: 255 214 10;
+    --amber-11: 255 202 22;
+    --amber-12: 255 231 179;
+
+    // teal
+    --teal-1: 13 21 20;
+    --teal-2: 17 28 27;
+    --teal-3: 13 45 42;
+    --teal-4: 2 59 55;
+    --teal-5: 8 72 67;
+    --teal-6: 20 87 80;
+    --teal-7: 28 105 97;
+    --teal-8: 32 126 115;
+    --teal-9: 18 165 148;
+    --teal-10: 14 179 158;
+    --teal-11: 11 216 182;
+    --teal-12: 173 240 221;
+
+    // gray
+    --gray-1: 17 17 17;
+    --gray-2: 25 25 25;
+    --gray-3: 34 34 34;
+    --gray-4: 42 42 42;
+    --gray-5: 49 49 49;
+    --gray-6: 58 58 58;
+    --gray-7: 72 72 72;
+    --gray-8: 96 96 96;
+    --gray-9: 110 110 110;
+    --gray-10: 123 123 123;
+    --gray-11: 180 180 180;
+    --gray-12: 238 238 238;
+
+    --background-color: 18 18 19;
+    --border-strong: 52 52 52;
+    --border-weak: 38 38 42;
+    --solid-1: 23 23 26;
+    --solid-2: 29 30 36;
+    --solid-3: 44 45 54;
+    --solid-active: 53 57 66;
+    --solid-amber: 42 37 30;
+    --solid-blue: 16 49 91;
+    --solid-iris: 38 42 101;
+    --text-blue: 126 182 255;
+
+    --alpha-1: 36, 36, 36, 0.8;
+    --alpha-2: 139, 147, 182, 0.15;
+    --alpha-3: 36, 38, 45, 0.9;
+    --black-alpha-1: 0, 0, 0, 0.3;
+    --black-alpha-2: 0, 0, 0, 0.2;
+    --border-blue: 39, 129, 246, 0.5;
+    --border-container: 236, 236, 236, 0;
+    --white-alpha: 255, 255, 255, 0.1;
+  }
+}

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="flex w-full gap-1">
-          <div class="space-y-2">
+          <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="space-y-2 chat-bubble has-attachment agent bg-n-background dark:bg-n-solid-3"
-              :class="
+              :class="wrapClass"
-                (wrapClass, getThemeClass('bg-white', 'dark:bg-slate-700'))
-              "
             >
               <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="agent-name text-n-slate-11"
-          :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
         />
       </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="chat-bubble agent bg-n-background dark:bg-n-solid-3 text-n-slate-12"
-      :class="getThemeClass('bg-white', 'dark:bg-slate-700 has-dark-mode')"
     >
       <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="chat-bubble agent typing-bubble bg-n-background dark:bg-n-solid-3"
-          :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
         >
-          <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;
+  @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;
-  padding: $space-small;
-  border-bottom-left-radius: $space-two;
-  border-top-left-radius: $space-small;
-
-  img {
-    width: 100%;
-  }
 }
 </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;
+  @apply text-white text-sm font-semibold p-3 text-center;
-  font-size: $font-size-default;
-  font-weight: $font-weight-bold;
-  padding: $space-slab;
-  text-align: 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
+  <header class="flex justify-between w-full p-5 bg-n-background gap-2">
-    class="flex justify-between w-full p-5"
-    :class="getThemeClass('bg-white', 'dark:bg-slate-900')"
-  >
     <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
+        <FluentIcon icon="chevron-left" size="24" class="text-n-slate-12" />
-          icon="chevron-left"
-          size="24"
-          :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
-        />
       </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="flex items-center text-base font-medium leading-4 text-n-slate-12"
-          :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
         >
-          <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
+        <div class="text-xs leading-3 text-n-slate-11">
-          class="mt-1 text-xs leading-3"
-          :class="getThemeClass('text-black-700', 'dark:text-slate-400')"
-        >
           {{ 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 {
+const props = defineProps({
-  name: 'ChatHeaderExpanded',
+  avatarUrl: {
-  components: {
+    type: String,
-    HeaderActions,
+    default: '',
   },
-  props: {
+  introHeading: {
-    avatarUrl: {
+    type: String,
-      type: String,
+    default: '',
-      default: '',
-    },
-    introHeading: {
-      type: String,
-      default: '',
-    },
-    introBody: {
-      type: String,
-      default: '',
-    },
-    showPopoutButton: {
-      type: Boolean,
-      default: false,
-    },
   },
-  setup() {
+  introBody: {
-    const { getThemeClass } = useDarkMode();
+    type: String,
-    return { getThemeClass };
+    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
+    <div class="flex items-start" :class="containerClasses">
-      class="flex items-start"
-      :class="[avatarUrl ? 'justify-between' : 'justify-end']"
-    >
       <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="mt-4 text-2xl mb-1.5 font-medium text-n-slate-12"
-      :class="getThemeClass('text-slate-900', 'dark:text-slate-50')"
     />
     <p
       v-dompurify-html="introBody"
-      class="text-base leading-normal"
+      class="text-lg leading-normal text-n-slate-11"
-      :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
     />
   </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="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="getThemeClass('bg-white ', 'dark:bg-slate-600')"
+    :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="user-message-input reset-base"
-      :class="inputColor"
       @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;
+  @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;
-  top: -302px;
-  max-width: 100%;
-
-  &::before {
-    right: $space-one;
-  }
-}
-
-.button-wrap {
-  display: flex;
-  align-items: center;
-  padding-left: $space-small;
 }
 
 .user-message-input {
-  border: 0;
+  @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;
-  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;
 }
 </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="ltr:pr-1 rtl:pl-1">
-      <div class="title" :class="titleColor" :style="{ color: textColor }">
+      <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;
+    @apply text-[2.5rem] text-n-brand leading-none ltr:ml-1 rtl:mr-1 ltr:mr-2 rtl:ml-2;
-    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;
   }
 
   .download {
-    color: $color-woot;
+    @apply text-n-brand font-medium p-0 m-0 text-xs no-underline;
-    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;
   }
 }
 </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="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="inputHasError"
+      :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="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]"
-        :class="dropdownClass"
         @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="py-2 ltr:pl-2 rtl:pr-2 text-base text-n-slate-11"
-        :class="$dm('text-slate-700', 'dark:text-slate-50')"
       >
         {{ 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="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]"
-      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"
       @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="w-full h-8 !ring-0 px-3 py-2 mt-1 mb-1 text-sm rounded bg-n-alpha-black2"
-          :class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
         />
       </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 &&
-          country.id === activeCountryCode ? activeDropdownItemClass : '',
+            'active bg-n-alpha-1 dark:bg-n-solid-1',
-          index === selectedIndex ? focusedDropdownItemClass : '',
+          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="flex justify-center mt-4 text-sm text-center text-n-slate-11"
-          :class="$dm('text-slate-700', 'dark:text-slate-50')"
         >
           {{ $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 {
+const props = defineProps({
-  name: 'GroupedAvatars',
+  users: {
-  components: { Thumbnail },
+    type: Array,
-  props: {
+    default: () => [],
-    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="`${
+      :class="index ? 'ltr:-ml-4 rtl:-mr-4' : ''"
-        index ? '-ml-4' : ''
+      class="inline-block rounded-full text-white shadow-solid"
-      } 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
+      <FluentIcon icon="sign-out" size="22" class="text-n-slate-12" />
-        icon="sign-out"
-        size="22"
-        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
-      />
     </button>
     <button
       v-if="showPopoutButton"
       class="button transparent compact new-window--button"
       @click="popoutWindow"
     >
-      <FluentIcon
+      <FluentIcon icon="open" size="22" class="text-n-slate-12" />
-        icon="open"
-        size="22"
-        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
-      />
     </button>
     <button
       class="button transparent compact close-button"
@@ -118,28 +105,13 @@ export default {
       }"
       @click="closeWindow"
     >
-      <FluentIcon
+      <FluentIcon icon="dismiss" size="24" class="text-n-slate-12" />
-        icon="dismiss"
-        size="24"
-        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
-      />
     </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(
+      background-image: linear-gradient(-180deg, transparent 3%, #1f2d3d 130%);
-        -180deg,
-        transparent 3%,
-        $color-heading 130%
-      );
       bottom: 0;
       content: '';
       height: 20%;
@@ -61,12 +55,7 @@ export default {
   }
 
   .time {
-    font-size: $font-size-small;
+    @apply text-xs bottom-1 text-white ltr:right-3 rtl:left-3 whitespace-nowrap absolute;
-    bottom: $space-smaller;
-    color: $color-white;
-    position: absolute;
-    right: $space-slab;
-    white-space: nowrap;
   }
 }
 </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) {
+    labelClass(input) {
-      const { hasErrors } = context;
+      const { state } = input.context;
-      if (!hasErrors) {
+      const hasErrors = state.invalid;
-        return `text-xs font-medium ${this.getThemeClass(
+      return !hasErrors ? 'text-n-slate-12' : 'text-n-ruby-10';
-          'text-black-800',
-          'dark:text-slate-50'
-        )}`;
-      }
-      return `text-xs font-medium ${this.getThemeClass(
-        'text-red-400',
-        'dark:text-red-400'
-      )}`;
     },
     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="mb-4 text-base leading-5 pre-chat-header-message text-n-slate-12"
-      :class="getThemeClass('text-black-800', 'dark:text-slate-50')"
     />
     <!-- 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,
+    GroupedAvatars,
-    FluentIcon,
   },
   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
-    <div class="flex items-center justify-between">
+    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="">
+  >
-        <div class="text-sm font-medium text-slate-700 dark:text-slate-50">
+    <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
+    <button class="chat-bubble agent bg-white" @click="onClickMessage">
-      class="chat-bubble agent"
-      :class="getThemeClass('bg-white', 'dark:bg-slate-50')"
-      @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%;
+  @apply max-w-[85%] cursor-pointer p-4;
-  padding: $space-normal;
-  cursor: pointer;
 }
 
 .row--agent-block {
-  align-items: center;
+  @apply items-center flex text-left pb-2 text-xs;
-  display: flex;
-  text-align: left;
-  padding-bottom: $space-small;
-  font-size: $font-size-small;
 
   .agent--name {
-    font-weight: $font-weight-medium;
+    @apply font-medium ml-1;
-    margin-left: $space-smaller;
   }
 
   .company--name {
-    color: $color-light-gray;
+    @apply text-n-slate-11 dark:text-n-slate-10 ml-1;
-    margin-left: $space-smaller;
   }
 }
 </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;
+    @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;
-    padding: 0 $space-one 0 0;
-
-    &:hover {
-      transform: translateX($space-smaller);
-      color: $color-primary-dark;
-    }
   }
 
   .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;
+    @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;
-    border-radius: $space-normal;
-
-    &:hover {
-      color: $color-body;
-    }
-  }
-
-  .is-background-light {
-    color: $color-body !important;
   }
 }
 </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);
+    @apply bg-n-alpha-2 dark:bg-n-alpha-1 text-white;
-    color: var(--white);
   }
 
   pre {
-    background-color: var(--w-800);
+    @apply text-white bg-n-alpha-2 dark:bg-n-alpha-1;
-    border-color: var(--w-700);
-    color: var(--white);
 
     code {
-      background-color: transparent;
+      @apply bg-transparent text-white;
-      color: var(--white);
     }
   }
 
   blockquote {
-    border-left: $space-micro solid var(--w-400);
+    @apply bg-transparent border-n-slate-7 ltr:border-l-2 rtl:border-r-2 border-solid;
-    background: var(--s-25);
-    border-color: var(--s-200);
 
     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 { truncateMessage };
-    return { getThemeClass, truncateMessage };
   },
 };
 </script>
@@ -25,52 +23,29 @@ export default {
 <template>
   <div
     v-if="!!items.length"
-    class="chat-bubble agent"
+    class="chat-bubble agent bg-n-background dark:bg-n-solid-3"
-    :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
   >
-    <div v-for="item in items" :key="item.link" class="article-item">
+    <div
-      <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
+      v-for="item in items"
-        <span class="title flex items-center text-black-900 font-medium">
+      :key="item.link"
-          <FluentIcon
+      class="border-b border-solid border-n-weak text-sm py-2 px-0 last:border-b-0"
-            icon="link"
+    >
-            class="mr-1"
+      <a
-            :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
+        :href="item.link"
-          />
+        target="_blank"
-          <span :class="getThemeClass('text-slate-900', 'dark:text-slate-50')">
+        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
+        <span class="block mt-1 text-n-slate-12">
-          class="description"
-          :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
-        >
           {{ 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() };
-    return { v$: useVuelidate(), getThemeClass };
   },
   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;
+    @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;
-    border-top-right-radius: 0;
-    padding: $space-one;
-    width: 100%;
 
     &::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;
+    @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;
-    border-top-left-radius: 0;
-    font-size: $font-size-large;
-    height: auto;
-    margin-left: -1px;
 
     .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;
+  @apply flex items-center my-2 rounded-lg;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
 }
 
 .leave-room-button {
-  position: absolute;
+  @apply absolute top-0 ltr:right-2 rtl:left-2 px-1 rounded-md;
-  top: 0;
-  right: $space-small;
 }
 </style>

app/javascript/widget/composables/specs/useDarkMode.spec.js

@@ -14,11 +14,10 @@ describe('useDarkMode', () => {
     vi.mocked(useMapGetter).mockReturnValue(mockDarkMode);
   });
 
-  it('returns darkMode, prefersDarkMode, and getThemeClass', () => {
+  it('returns darkMode, prefersDarkMode', () => {
     const result = useDarkMode();
     expect(result).toHaveProperty('darkMode');
     expect(result).toHaveProperty('prefersDarkMode');
-    expect(result).toHaveProperty('getThemeClass');
   });
 
   describe('prefersDarkMode', () => {
@@ -47,25 +46,4 @@ describe('useDarkMode', () => {
       expect(prefersDarkMode.value).toBe(false);
     });
   });
-
-  describe('getThemeClass', () => {
-    it('returns light class when darkMode is light', () => {
-      const { getThemeClass } = useDarkMode();
-      expect(getThemeClass('light-class', 'dark-class')).toBe('light-class');
-    });
-
-    it('returns dark class when darkMode is dark', () => {
-      mockDarkMode.value = 'dark';
-      const { getThemeClass } = useDarkMode();
-      expect(getThemeClass('light-class', 'dark-class')).toBe('dark-class');
-    });
-
-    it('returns both classes when darkMode is auto', () => {
-      mockDarkMode.value = 'auto';
-      const { getThemeClass } = useDarkMode();
-      expect(getThemeClass('light-class', 'dark-class')).toBe(
-        'light-class dark-class'
-      );
-    });
-  });
 });

app/javascript/widget/composables/useDarkMode.js

@@ -10,11 +10,6 @@ const getSystemPreference = () =>
 const calculatePrefersDarkMode = (mode, systemPreference) =>
   isDarkModeAuto(mode) ? systemPreference : isDarkMode(mode);
 
-const calculateThemeClass = (mode, light, dark) => {
-  if (isDarkModeAuto(mode)) return `${light} ${dark}`;
-  return isDarkMode(mode) ? dark : light;
-};
-
 /**
  * Composable for handling dark mode.
  * @returns {Object} An object containing computed properties and methods for dark mode.
@@ -28,12 +23,8 @@ export function useDarkMode() {
     calculatePrefersDarkMode(darkMode.value, systemPreference.value)
   );
 
-  const getThemeClass = (light, dark) =>
-    calculateThemeClass(darkMode.value, light, dark);
-
   return {
     darkMode,
     prefersDarkMode,
-    getThemeClass,
   };
 }

app/javascript/widget/router.js

@@ -1,5 +1,11 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 import ViewWithHeader from './components/layouts/ViewWithHeader.vue';
+import UnreadMessages from './views/UnreadMessages.vue';
+import Campaigns from './views/Campaigns.vue';
+import Home from './views/Home.vue';
+import PreChatForm from './views/PreChatForm.vue';
+import Messages from './views/Messages.vue';
+import ArticleViewer from './views/ArticleViewer.vue';
 import store from './store';
 
 const router = createRouter({
@@ -8,12 +14,12 @@ const router = createRouter({
     {
       path: '/unread-messages',
       name: 'unread-messages',
-      component: () => import('./views/UnreadMessages.vue'),
+      component: UnreadMessages,
     },
     {
       path: '/campaigns',
       name: 'campaigns',
-      component: () => import('./views/Campaigns.vue'),
+      component: Campaigns,
     },
     {
       path: '/',
@@ -22,22 +28,22 @@ const router = createRouter({
         {
           path: '',
           name: 'home',
-          component: () => import('./views/Home.vue'),
+          component: Home,
         },
         {
           path: '/prechat-form',
           name: 'prechat-form',
-          component: () => import('./views/PreChatForm.vue'),
+          component: PreChatForm,
         },
         {
           path: '/messages',
           name: 'messages',
-          component: () => import('./views/Messages.vue'),
+          component: Messages,
         },
         {
           path: '/article',
           name: 'article-viewer',
-          component: () => import('./views/ArticleViewer.vue'),
+          component: ArticleViewer,
         },
       ],
     },

app/javascript/widget/views/ArticleViewer.vue

@@ -1,16 +1,24 @@
 <script>
 import IframeLoader from 'shared/components/IframeLoader.vue';
+import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 
 export default {
   name: 'ArticleViewer',
   components: {
     IframeLoader,
   },
+  computed: {
+    isRTL() {
+      return this.$root.$i18n.locale
+        ? getLanguageDirection(this.$root.$i18n.locale)
+        : false;
+    },
+  },
 };
 </script>
 
 <template>
   <div class="bg-white h-full">
-    <IframeLoader :url="$route.query.link" />
+    <IframeLoader :url="$route.query.link" :is-rtl="isRTL" />
   </div>
 </template>

app/javascript/widget/views/Home.vue

@@ -1,68 +1,22 @@
 <script>
 import TeamAvailability from 'widget/components/TeamAvailability.vue';
-import ArticleHero from 'widget/components/ArticleHero.vue';
-import ArticleCardSkeletonLoader from 'widget/components/ArticleCardSkeletonLoader.vue';
-
 import { mapGetters } from 'vuex';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 import routerMixin from 'widget/mixins/routerMixin';
 import configMixin from 'widget/mixins/configMixin';
-
+import ArticleContainer from '../components/pageComponents/Home/Article/ArticleContainer.vue';
 export default {
   name: 'Home',
   components: {
-    ArticleHero,
+    ArticleContainer,
     TeamAvailability,
-    ArticleCardSkeletonLoader,
   },
   mixins: [configMixin, routerMixin],
-  setup() {
-    const { prefersDarkMode } = useDarkMode();
-    return { prefersDarkMode };
-  },
   computed: {
     ...mapGetters({
       availableAgents: 'agent/availableAgents',
       conversationSize: 'conversation/getConversationSize',
       unreadMessageCount: 'conversation/getUnreadMessageCount',
-      popularArticles: 'article/popularArticles',
-      articleUiFlags: 'article/uiFlags',
     }),
-    widgetLocale() {
-      return this.$i18n.locale || 'en';
-    },
-    portal() {
-      return window.chatwootWebChannel.portal;
-    },
-    showArticles() {
-      return (
-        this.portal &&
-        !this.articleUiFlags.isFetching &&
-        this.popularArticles.length
-      );
-    },
-    defaultLocale() {
-      const widgetLocale = this.widgetLocale;
-      const { allowed_locales: allowedLocales, default_locale: defaultLocale } =
-        this.portal.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(widgetLocale)) {
-        return widgetLocale;
-      }
-      return defaultLocale;
-    },
-  },
-  mounted() {
-    if (this.portal && this.popularArticles.length === 0) {
-      const locale = this.defaultLocale;
-      this.$store.dispatch('article/fetch', {
-        slug: this.portal.slug,
-        locale,
-      });
-    }
   },
   methods: {
     startConversation() {
@@ -71,59 +25,19 @@ export default {
       }
       return this.replaceRoute('messages');
     },
-    openArticleInArticleViewer(link) {
-      const params = new URLSearchParams({
-        show_plain_layout: 'true',
-        theme: this.prefersDarkMode ? 'dark' : 'light',
-      });
-      const linkToOpen = `${link}?${params.toString()}`;
-      this.$router.push({
-        name: 'article-viewer',
-        query: { link: linkToOpen },
-      });
-    },
-    viewAllArticles() {
-      const locale = this.defaultLocale;
-      const {
-        portal: { slug },
-      } = window.chatwootWebChannel;
-      this.openArticleInArticleViewer(`/hc/${slug}/${locale}`);
-    },
   },
 };
 </script>
 
 <template>
-  <div
+  <div class="z-50 flex flex-col justify-end flex-1 w-full p-4 gap-4">
-    class="z-50 flex flex-col flex-1 w-full rounded-md"
+    <TeamAvailability
-    :class="{ 'pb-2': showArticles, 'justify-end': !showArticles }"
+      :available-agents="availableAgents"
-  >
+      :has-conversation="!!conversationSize"
-    <div class="w-full px-4 pt-4">
+      :unread-count="unreadMessageCount"
-      <TeamAvailability
+      @start-conversation="startConversation"
-        :available-agents="availableAgents"
+    />
-        :has-conversation="!!conversationSize"
+
-        :unread-count="unreadMessageCount"
+    <ArticleContainer />
-        @start-conversation="startConversation"
-      />
-    </div>
-    <div v-if="showArticles" class="w-full px-4 py-2">
-      <div class="w-full p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
-        <ArticleHero
-          v-if="
-            !articleUiFlags.isFetching &&
-            !articleUiFlags.isError &&
-            popularArticles.length
-          "
-          :articles="popularArticles"
-          @view="openArticleInArticleViewer"
-          @view-all="viewAllArticles"
-        />
-      </div>
-    </div>
-    <div v-if="articleUiFlags.isFetching" class="w-full px-4 py-2">
-      <div class="w-full p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
-        <ArticleCardSkeletonLoader />
-      </div>
-    </div>
   </div>
 </template>

app/javascript/widget/views/Messages.vue

@@ -19,7 +19,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col flex-1 overflow-hidden rounded-b-lg bg-slate-25 dark:bg-slate-800"
+    class="flex flex-col flex-1 overflow-hidden rounded-b-lg bg-n-slate-2 dark:bg-n-solid-1"
   >
     <div class="flex flex-1 overflow-auto">
       <ConversationWrap :grouped-messages="groupedMessages" />