feat: disable matches filter

This update improves the throttling mechanism for conversation meta
requests to optimize server load and enhance performance. The changes
implement differentiated thresholds based on account size - a 2-second
throttle for small accounts (≤100 conversations) and a 10-second
throttle for large accounts (>100 conversations).

Fixes #11178

Gemfile.lock

@@ -501,14 +501,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.18.3)
+    nokogiri (1.18.4)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.18.3-arm64-darwin)
+    nokogiri (1.18.4-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.3-x86_64-darwin)
+    nokogiri (1.18.4-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.3-x86_64-linux-gnu)
+    nokogiri (1.18.4-x86_64-linux-gnu)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)

README.md

@@ -1,22 +1,11 @@
-## 🚨 Note: This branch is unstable. For the stable branch's source code, please use the branch [3.x](https://github.com/chatwoot/chatwoot/tree/3.x)
-
-
-<img src="https://user-images.githubusercontent.com/2246121/282256557-1570674b-d142-4198-9740-69404cc6a339.png#gh-light-mode-only" width="100%" alt="Chat dashboard dark mode"/>
-<img src="https://user-images.githubusercontent.com/2246121/282256632-87f6a01b-6467-4e0e-8a93-7bbf66d03a17.png#gh-dark-mode-only" width="100%" alt="Chat dashboard"/>
+<img src="./.github/screenshots/header.png#gh-light-mode-only" width="100%" alt="Header light mode"/>
+<img src="./.github/screenshots/header-dark.png#gh-dark-mode-only" width="100%" alt="Header dark mode"/>
 
 ___
 
 # Chatwoot
 
-Customer engagement suite, an open-source alternative to Intercom, Zendesk, Salesforce Service Cloud etc.
-<p>
-  <a href="https://heroku.com/deploy?template=https://github.com/chatwoot/chatwoot/tree/master" alt="Deploy to Heroku">
-     <img width="150" alt="Deploy" src="https://www.herokucdn.com/deploy/button.svg"/>
-  </a>
-  <a href="https://marketplace.digitalocean.com/apps/chatwoot?refcode=f2238426a2a8" alt="Deploy to DigitalOcean">
-     <img width="200" alt="Deploy to DO" src="https://www.deploytodo.com/do-btn-blue.svg"/>
-  </a>
-</p>
+The modern customer support platform, an open-source alternative to Intercom, Zendesk, Salesforce Service Cloud etc.
 
 <p>
   <a href="https://codeclimate.com/github/chatwoot/chatwoot/maintainability"><img src="https://api.codeclimate.com/v1/badges/e6e3f66332c91e5a4c0c/maintainability" alt="Maintainability"></a>
@@ -31,41 +20,71 @@ Customer engagement suite, an open-source alternative to Intercom, Zendesk, Sale
   <a href="https://artifacthub.io/packages/helm/chatwoot/chatwoot"><img src="https://img.shields.io/endpoint?url=https://artifacthub.io/badge/repository/artifact-hub" alt="Artifact HUB"></a>
 </p>
 
-<img src="https://user-images.githubusercontent.com/2246121/282255783-ee8a50c9-f42d-4752-8201-2d59965a663d.png#gh-light-mode-only" width="100%" alt="Chat dashboard dark mode"/>
-<img src="https://user-images.githubusercontent.com/2246121/282255784-3d1994ec-d895-4ff5-ac68-d819987e1869.png#gh-dark-mode-only" width="100%" alt="Chat dashboard"/>
 
-Chatwoot is an open-source, self-hosted customer engagement suite. Chatwoot lets you view and manage your customer data, communicate with them irrespective of which medium they use, and re-engage them based on their profile.
+<p>
+  <a href="https://heroku.com/deploy?template=https://github.com/chatwoot/chatwoot/tree/master" alt="Deploy to Heroku">
+     <img width="150" alt="Deploy" src="https://www.herokucdn.com/deploy/button.svg"/>
+  </a>
+  <a href="https://marketplace.digitalocean.com/apps/chatwoot?refcode=f2238426a2a8" alt="Deploy to DigitalOcean">
+     <img width="200" alt="Deploy to DO" src="https://www.deploytodo.com/do-btn-blue.svg"/>
+  </a>
+</p>
 
-## Features
+<img src="./.github/screenshots/dashboard.png#gh-light-mode-only" width="100%" alt="Chat dashboard dark mode"/>
+<img src="./.github/screenshots/dashboard-dark.png#gh-dark-mode-only" width="100%" alt="Chat dashboard"/>
 
-Chatwoot supports the following conversation channels:
+---
 
- - **Website**: Talk to your customers using our live chat widget and make use of our SDK to identify a user and provide contextual support.
- - **Facebook**: Connect your Facebook pages and start replying to the direct messages to your page.
- - **Instagram**: Connect your Instagram profile and start replying to the direct messages.
- - **Twitter**: Connect your Twitter profiles and reply to direct messages or the tweets where you are mentioned.
- - **Telegram**: Connect your Telegram bot and reply to your customers right from a single dashboard.
- - **WhatsApp**: Connect your WhatsApp business account and manage the conversation in Chatwoot.
- - **Line**: Connect your Line account and manage the conversations in Chatwoot.
- - **SMS**: Connect your Twilio SMS account and reply to the SMS queries in Chatwoot.
- - **API Channel**: Build custom communication channels using our API channel.
- - **Email**: Forward all your email queries to Chatwoot and view it in our integrated dashboard.
+Chatwoot is the modern, open-source, and self-hosted customer support platform designed to help businesses deliver exceptional customer support experience. Built for scale and flexibility, Chatwoot gives you full control over your customer data while providing powerful tools to manage conversations across channels.
 
-And more.
+### ✨ Captain – AI Agent for Support
 
-Other features include:
+Supercharge your support with Captain, Chatwoot’s AI agent. Captain helps automate responses, handle common queries, and reduce agent workload—ensuring customers get instant, accurate answers. With Captain, your team can focus on complex conversations while routine questions are resolved automatically. Read more about Captain [here](https://chwt.app/captain-docs).
+
+### 💬 Omnichannel Support Desk
+
+Chatwoot centralizes all customer conversations into one powerful inbox, no matter where your customers reach out from. It supports live chat on your website, email, Facebook, Instagram, Twitter, WhatsApp, Telegram, Line, SMS etc.
+
+### 📚 Help center portal
+
+Publish help articles, FAQs, and guides through the built-in Help Center Portal. Enable customers to find answers on their own, reduce repetitive queries, and keep your support team focused on more complex issues.
+
+### 🗂️ Other features
+
+#### Collaboration & Productivity
+
+- Private Notes and @mentions for internal team discussions.
+- Labels to organize and categorize conversations.
+- Keyboard Shortcuts and a Command Bar for quick navigation.
+- Canned Responses to reply faster to frequently asked questions.
+- Auto-Assignment to route conversations based on agent availability.
+- Multi-lingual Support to serve customers in multiple languages.
+- Custom Views and Filters for better inbox organization.
+- Business Hours and Auto-Responders to manage response expectations.
+- Teams and Automation tools for scaling support workflows.
+- Agent Capacity Management to balance workload across the team.
+
+#### Customer Data & Segmentation
+- Contact Management with profiles and interaction history.
+- Contact Segments and Notes for targeted communication.
+- Campaigns to proactively engage customers.
+- Custom Attributes for storing additional customer data.
+- Pre-Chat Forms to collect user information before starting conversations.
+
+#### Integrations
+- Slack Integration to manage conversations directly from Slack.
+- Dialogflow Integration for chatbot automation.
+- Dashboard Apps to embed internal tools within Chatwoot.
+- Shopify Integration to view and manage customer orders right within Chatwoot.
+- Use Google Translate to translate messages from your customers in realtime.
+- Create and manage Linear tickets within Chatwoot.
+
+#### Reports & Insights
+- Live View of ongoing conversations for real-time monitoring.
+- Conversation, Agent, Inbox, Label, and Team Reports for operational visibility.
+- CSAT Reports to measure customer satisfaction.
+- Downloadable Reports for offline analysis and reporting.
 
-- **CRM**: Save all your customer information right inside Chatwoot, use contact notes to log emails, phone calls, or meeting notes.
-- **Custom Attributes**: Define custom attribute attributes to store information about a contact or a conversation and extend the product to match your workflow.
-- **Shared multi-brand inboxes**: Manage multiple brands or pages using a shared inbox.
-- **Private notes**: Use @mentions and private notes to communicate internally about a conversation.
-- **Canned responses (Saved replies)**: Improve the response rate by adding saved replies for frequently asked questions.
-- **Conversation Labels**: Use conversation labels to create custom workflows.
-- **Auto assignment**: Chatwoot intelligently assigns a ticket to the agents who have access to the inbox depending on their availability and load.
-- **Conversation continuity**: If the user has provided an email address through the chat widget, Chatwoot will send an email to the customer under the agent name so that the user can continue the conversation over the email.
-- **Multi-lingual support**: Chatwoot supports 10+ languages.
-- **Powerful API & Webhooks**: Extend the capability of the software using Chatwoot’s webhooks and APIs.
-- **Integrations**: Chatwoot natively integrates with Slack right now. Manage your conversations in Slack without logging into the dashboard.
 
 ## Documentation
 
@@ -107,13 +126,11 @@ For other supported options, checkout our [deployment page](https://chatwoot.com
 
 Looking to report a vulnerability? Please refer our [SECURITY.md](./SECURITY.md) file.
 
-
-## Community? Questions? Support ?
+## Community
 
 If you need help or just want to hang out, come, say hi on our [Discord](https://discord.gg/cJXdrwS) server.
 
-
-## Contributors ✨
+## Contributors
 
 Thanks goes to all these [wonderful people](https://www.chatwoot.com/docs/contributors):
 

app/builders/contact_inbox_builder.rb

@@ -64,5 +64,40 @@ class ContactInboxBuilder
       inbox_id: @inbox.id,
       source_id: @source_id
     )
+  rescue ActiveRecord::RecordNotUnique
+    Rails.logger.info("[ContactInboxBuilder] RecordNotUnique #{@source_id} #{@contact.id} #{@inbox.id}")
+    update_old_contact_inbox
+    retry
+  end
+
+  def update_old_contact_inbox
+    # The race condition occurs when there’s a contact inbox with the
+    # same source ID but linked to a different contact. This can happen
+    # if the agent updates the contact’s email or phone number, or
+    # if the contact is merged with another.
+    #
+    # We update the old contact inbox source_id to a random value to
+    # avoid disrupting the current flow. However, the root cause of
+    # this issue is a flaw in the contact inbox model design.
+    # Contact inbox is essentially tracking a session and is not
+    # needed for non-live chat channels.
+    raise ActiveRecord::RecordNotUnique unless allowed_channels?
+
+    contact_inbox = ::ContactInbox.find_by(inbox_id: @inbox.id, source_id: @source_id)
+    return if contact_inbox.blank?
+
+    contact_inbox.update!(source_id: new_source_id)
+  end
+
+  def new_source_id
+    if @inbox.whatsapp? || @inbox.sms? || @inbox.twilio?
+      "whatsapp:#{@source_id}#{rand(100)}"
+    else
+      "#{rand(10)}#{@source_id}"
+    end
+  end
+
+  def allowed_channels?
+    @inbox.email? || @inbox.sms? || @inbox.twilio? || @inbox.whatsapp?
   end
 end

app/controllers/dashboard_controller.rb

@@ -15,7 +15,7 @@ class DashboardController < ActionController::Base
   private
 
   def ensure_html_format
-    head :not_acceptable if request.format.json?
+    head :not_acceptable unless request.format.html?
   end
 
   def set_global_config

app/finders/conversation_finder.rb

@@ -32,6 +32,7 @@ class ConversationFinder
   def initialize(current_user, params)
     @current_user = current_user
     @current_account = current_user.account
+    @is_admin = current_account.account_users.find_by(user_id: current_user.id)&.administrator?
     @params = params
   end
 
@@ -86,7 +87,8 @@ class ConversationFinder
   end
 
   def find_all_conversations
-    @conversations = current_account.conversations.where(inbox_id: @inbox_ids)
+    @conversations = current_account.conversations
+    @conversations = @conversations.where(inbox_id: @inbox_ids) unless @is_admin
     filter_by_conversation_type if params[:conversation_type]
     @conversations
   end

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-next/Contacts/ContactsForm/CreateNewContactDialog.vue

@@ -55,13 +55,13 @@ defineExpose({ dialogRef, contactsFormRef, onSuccess });
           @click="closeDialog"
         />
         <Button
+          type="submit"
           :label="
             t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.SAVE_CONTACT')
           "
           color="blue"
           :disabled="contactsFormRef?.isFormInvalid"
           :is-loading="isCreatingContact"
-          @click="handleDialogConfirm"
         />
       </div>
     </template>

app/javascript/dashboard/components-next/button/Button.vue

@@ -190,7 +190,7 @@ const STYLE_CONFIG = {
 const variantClasses = computed(() => {
   const variantMap = {
     ghost: `${STYLE_CONFIG.colors[computedColor.value].ghost}`,
-    link: `${STYLE_CONFIG.colors[computedColor.value].link} p-0 font-medium underline-offset-4`,
+    link: `${STYLE_CONFIG.colors[computedColor.value].link} p-0 font-medium underline-offset-2`,
     outline: STYLE_CONFIG.colors[computedColor.value].outline,
     faded: STYLE_CONFIG.colors[computedColor.value].faded,
     solid: STYLE_CONFIG.colors[computedColor.value].solid,

app/javascript/dashboard/components/ChatList.vue

@@ -61,6 +61,7 @@ import {
   getUserPermissions,
   filterItemsByPermission,
 } from 'dashboard/helper/permissionsHelper.js';
+// import { matchesFilters } from '../store/modules/conversations/helpers/filterHelpers';
 import { CONVERSATION_EVENTS } from '../helper/AnalyticsHelper/events';
 import { ASSIGNEE_TYPE_TAB_PERMISSIONS } from 'dashboard/constants/permissions.js';
 
@@ -324,6 +325,14 @@ const conversationList = computed(() => {
   } else {
     localConversationList = [...chatLists.value];
   }
+
+  // if (activeFolder.value) {
+  //   const { payload } = activeFolder.value.query;
+  //   localConversationList = localConversationList.filter(conversation => {
+  //     return matchesFilters(conversation, payload);
+  //   });
+  // }
+
   return localConversationList;
 });
 
@@ -460,6 +469,12 @@ function setParamsForEditFolderModal() {
     campaigns: campaigns.value,
     languages: languages,
     countries: countries,
+    priority: [
+      { id: 'low', name: t('CONVERSATION.PRIORITY.OPTIONS.LOW') },
+      { id: 'medium', name: t('CONVERSATION.PRIORITY.OPTIONS.MEDIUM') },
+      { id: 'high', name: t('CONVERSATION.PRIORITY.OPTIONS.HIGH') },
+      { id: 'urgent', name: t('CONVERSATION.PRIORITY.OPTIONS.URGENT') },
+    ],
     filterTypes: advancedFilterTypes.value,
     allCustomAttributes: conversationCustomAttributes.value,
   };

app/javascript/dashboard/components/CustomAttribute.vue

@@ -9,12 +9,15 @@ import { getRegexp } from 'shared/helpers/Validators';
 import { useVuelidate } from '@vuelidate/core';
 import { emitter } from 'shared/helpers/mitt';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 const DATE_FORMAT = 'yyyy-MM-dd';
 
 export default {
   components: {
     MultiselectDropdown,
     HelperTextPopup,
+    NextButton,
   },
   props: {
     label: { type: String, required: true },
@@ -219,14 +222,13 @@ export default {
               class="mt-0.5"
             />
           </span>
-          <woot-button
+          <NextButton
             v-if="showActions && value"
             v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
-            variant="link"
-            size="medium"
-            color-scheme="secondary"
-            icon="delete"
-            class-names="flex justify-end !w-fit"
+            slate
+            sm
+            link
+            icon="i-lucide-trash-2"
             @click="onDelete"
           />
         </div>
@@ -246,10 +248,10 @@ export default {
             @keyup.enter="onUpdate"
           />
           <div>
-            <woot-button
-              size="small"
-              icon="checkmark"
-              class="ltr:rounded-l-none rtl:rounded-r-none"
+            <NextButton
+              sm
+              icon="i-lucide-check"
+              class="ltr:rounded-l-none rtl:rounded-r-none h-[34px]"
               @click="onUpdate"
             />
           </div>
@@ -281,25 +283,27 @@ export default {
         >
           {{ displayValue || '---' }}
         </p>
-        <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
-          <woot-button
+        <div
+          class="flex items-center max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0"
+        >
+          <NextButton
             v-if="showActions && value"
             v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
-            variant="link"
-            size="small"
-            color-scheme="secondary"
-            icon="clipboard"
-            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
+            xs
+            slate
+            ghost
+            icon="i-lucide-clipboard"
+            class="hidden group-hover:flex flex-shrink-0"
             @click="onCopy"
           />
-          <woot-button
+          <NextButton
             v-if="showActions"
             v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
-            variant="link"
-            size="small"
-            color-scheme="secondary"
-            icon="edit"
-            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
+            xs
+            slate
+            ghost
+            icon="i-lucide-pen"
+            class="hidden group-hover:flex flex-shrink-0"
             @click="onEdit"
           />
         </div>

app/javascript/dashboard/components/CustomSnoozeModal.vue

@@ -1,9 +1,11 @@
 <script>
 import DatePicker from 'vue-datepicker-next';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     DatePicker,
+    NextButton,
   },
   emits: ['close', 'chooseTime'],
 
@@ -52,18 +54,23 @@ export default {
         v-model:value="snoozeTime"
         type="datetime"
         inline
-        input-class="mx-input reset-base"
+        input-class="mx-input "
         :lang="lang"
         :disabled-date="disabledDate"
         :disabled-time="disabledTime"
       />
       <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
-        </woot-button>
-        <woot-button>
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
-        </woot-button>
+        <NextButton
+          faded
+          slate
+          type="reset"
+          :label="$t('CONVERSATION.CUSTOM_SNOOZE.CANCEL')"
+          @click.prevent="onClose"
+        />
+        <NextButton
+          type="submit"
+          :label="$t('CONVERSATION.CUSTOM_SNOOZE.APPLY')"
+        />
       </div>
     </form>
   </div>

app/javascript/dashboard/components/Modal.vue

@@ -2,6 +2,7 @@
 // [TODO] Use Teleport to move the modal to the end of the body
 import { ref, computed, defineEmits, onMounted } from 'vue';
 import { useEventListener } from '@vueuse/core';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const { modalType, closeOnBackdropClick, onClose } = defineProps({
   closeOnBackdropClick: { type: Boolean, default: true },
@@ -85,11 +86,11 @@ onMounted(() => {
         @mouse.stop
         @mousedown="event => event.stopPropagation()"
       >
-        <woot-button
+        <Button
           v-if="showCloseButton"
-          color-scheme="secondary"
-          icon="dismiss"
-          variant="clear"
+          ghost
+          slate
+          icon="i-lucide-x"
           class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
           @click="close"
         />

app/javascript/dashboard/components/NetworkNotification.vue

@@ -11,6 +11,8 @@ import {
 } from 'dashboard/helper/routeHelpers';
 import { useEventListener } from '@vueuse/core';
 
+import Button from 'dashboard/components-next/button/Button.vue';
+
 const { t } = useI18n();
 const route = useRoute();
 
@@ -107,34 +109,31 @@ onBeforeUnmount(() => {
 
 <template>
   <transition name="network-notification-fade" tag="div">
-    <div v-show="showNotification" class="fixed z-50 top-4 left-2 group">
+    <div v-show="showNotification" class="fixed z-50 top-2 left-2 group">
       <div
-        class="relative flex items-center justify-between w-full px-2 py-1 bg-yellow-200 rounded-lg shadow-lg dark:bg-yellow-700"
+        class="relative flex items-center justify-between w-full px-2 py-1 bg-n-amber-4 dark:bg-n-amber-8 rounded-lg shadow-lg"
       >
-        <fluent-icon
-          :icon="iconName"
-          class="text-yellow-700/50 dark:text-yellow-50"
-          size="18"
-        />
-        <span
-          class="px-2 text-xs font-medium tracking-wide text-yellow-700/70 dark:text-yellow-50"
-        >
+        <fluent-icon :icon="iconName" class="text-n-amber-12" size="18" />
+        <span class="px-2 text-xs font-medium tracking-wide text-n-amber-12">
           {{ bannerText }}
         </span>
-        <woot-button
+        <Button
           v-if="canRefresh"
+          ghost
+          sm
+          amber
+          icon="i-lucide-refresh-ccw"
           :title="$t('NETWORK.BUTTON.REFRESH')"
-          variant="clear"
-          size="small"
-          color-scheme="warning"
-          icon="arrow-clockwise"
+          class="!text-n-amber-12 dark:!text-n-amber-9"
           @click="refreshPage"
         />
-        <woot-button
-          variant="clear"
-          size="small"
-          color-scheme="warning"
-          icon="dismiss"
+
+        <Button
+          ghost
+          sm
+          amber
+          icon="i-lucide-x"
+          class="!text-n-amber-12 dark:!text-n-amber-9"
           @click="closeNotification"
         />
       </div>

app/javascript/dashboard/components/ui/AnnouncementPopup.vue

@@ -1,90 +0,0 @@
-<script>
-export default {
-  props: {
-    popupMessage: {
-      type: String,
-      default: '',
-    },
-    routeText: {
-      type: String,
-      default: '',
-    },
-    hasCloseButton: {
-      type: Boolean,
-      default: true,
-    },
-    closeButtonText: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['open', 'close'],
-  methods: {
-    onClickOpenPath() {
-      this.$emit('open');
-    },
-    onClickClose(e) {
-      this.$emit('close', e);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="announcement-popup">
-    <span v-if="popupMessage" class="popup-content">
-      {{ popupMessage }}
-      <span v-if="routeText" class="route-url" @click="onClickOpenPath">
-        {{ routeText }}
-      </span>
-    </span>
-    <div v-if="hasCloseButton" class="popup-close">
-      <woot-button
-        v-if="hasCloseButton"
-        color-scheme="primary"
-        variant="link"
-        size="small"
-        @click="onClickClose"
-      >
-        {{ closeButtonText }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.announcement-popup {
-  max-width: 15rem;
-  min-width: 10rem;
-  display: flex;
-  position: absolute;
-  flex-direction: column;
-  align-items: flex-start;
-  height: fit-content;
-  background: var(--white);
-  padding: 0 var(--space-normal);
-  z-index: var(--z-index-much-higher);
-  box-shadow: var(--b-200) 4px 4px 16px 4px;
-  border-radius: var(--border-radius-normal);
-
-  .popup-content {
-    font-size: var(--font-size-mini);
-    color: var(--s-700);
-    padding: var(--space-one) 0;
-    .route-url {
-      font-size: var(--font-size-mini);
-      color: var(--s-600);
-      cursor: pointer;
-      text-decoration: underline;
-    }
-  }
-
-  .popup-close {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    padding: var(--space-one) 0;
-    border-top: 1px solid var(--color-border-light);
-  }
-}
-</style>

app/javascript/dashboard/components/widgets/AIAssistanceModal.vue

@@ -2,10 +2,12 @@
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import { useAI } from 'dashboard/composables/useAI';
 import AILoader from './AILoader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     AILoader,
+    NextButton,
   },
   props: {
     aiOption: {
@@ -84,16 +86,22 @@ export default {
       </div>
 
       <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{
+        <NextButton
+          faded
+          slate
+          type="reset"
+          :label="
             $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.CANCEL')
-          }}
-        </woot-button>
-        <woot-button :disabled="!generatedContent">
-          {{
+          "
+          @click.prevent="onClose"
+        />
+        <NextButton
+          type="submit"
+          :disabled="!generatedContent"
+          :label="
             $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.APPLY')
-          }}
-        </woot-button>
+          "
+        />
       </div>
     </form>
   </div>

app/javascript/dashboard/components/widgets/AICTAModal.vue

@@ -6,7 +6,12 @@ import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAI } from 'dashboard/composables/useAI';
 import { OPEN_AI_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   emits: ['close'],
 
   setup() {
@@ -94,16 +99,30 @@ export default {
         />
       </div>
       <div class="flex flex-row justify-between w-full gap-2 px-0 py-2">
-        <woot-button variant="link" @click.prevent="openOpenAIDoc">
-          {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.NEED_HELP') }}
-        </woot-button>
+        <NextButton
+          ghost
+          type="button"
+          class="!px-3"
+          :label="
+            $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.NEED_HELP')
+          "
+          @click.prevent="openOpenAIDoc"
+        />
         <div class="flex items-center gap-1">
-          <woot-button variant="clear" @click.prevent="onDismiss">
-            {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.DISMISS') }}
-          </woot-button>
-          <woot-button :is-disabled="v$.value.$invalid">
-            {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.FINISH') }}
-          </woot-button>
+          <NextButton
+            faded
+            slate
+            type="reset"
+            :label="
+              $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.DISMISS')
+            "
+            @click.prevent="onDismiss"
+          />
+          <NextButton
+            type="submit"
+            :disabled="v$.value.$invalid"
+            :label="$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.FINISH')"
+          />
         </div>
       </div>
     </form>

app/javascript/dashboard/components/widgets/AttachmentsPreview.vue

@@ -2,6 +2,8 @@
 import { computed } from 'vue';
 import { formatBytes } from 'shared/helpers/FileHelper';
 
+import Button from 'dashboard/components-next/button/Button.vue';
+
 const props = defineProps({
   attachments: {
     type: Array,
@@ -73,9 +75,11 @@ const fileName = file => {
         </span>
       </div>
       <div class="flex items-center justify-center">
-        <woot-button
-          class="!w-6 !h-6 text-sm rounded-md hover:bg-slate-50 dark:hover:bg-slate-800 clear secondary"
-          icon="dismiss"
+        <Button
+          ghost
+          slate
+          xs
+          icon="i-lucide-x"
           @click="onRemoveAttachment(index)"
         />
       </div>

app/javascript/dashboard/components/widgets/AutomationActionInput.vue

@@ -2,11 +2,14 @@
 import AutomationActionTeamMessageInput from './AutomationActionTeamMessageInput.vue';
 import AutomationActionFileInput from './AutomationFileInput.vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
   components: {
     AutomationActionTeamMessageInput,
     AutomationActionFileInput,
     WootMessageEditor,
+    NextButton,
   },
   props: {
     modelValue: {
@@ -172,11 +175,11 @@ export default {
           />
         </div>
       </div>
-      <woot-button
+      <NextButton
         v-if="!isMacro"
-        icon="dismiss"
-        variant="clear"
-        color-scheme="secondary"
+        icon="i-lucide-x"
+        slate
+        ghost
         class="flex-shrink-0"
         @click="removeAction"
       />

app/javascript/dashboard/components/widgets/FilterInput/Index.vue

@@ -247,7 +247,13 @@ export default {
             :placeholder="$t('FILTER.INPUT_PLACEHOLDER')"
           />
         </div>
-        <NextButton icon="i-lucide-x" slate ghost @click="removeFilter" />
+        <NextButton
+          icon="i-lucide-x"
+          slate
+          ghost
+          class="flex-shrink-0"
+          @click="removeFilter"
+        />
       </div>
       <p v-if="errorMessage" class="filter-error">
         {{ errorMessage }}

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -164,11 +164,6 @@ export default {
         'is-note-mode': this.isNote,
       };
     },
-    buttonClass() {
-      return {
-        warning: this.isNote,
-      };
-    },
     showAttachButton() {
       return this.showFileUpload || this.isNote;
     },
@@ -367,14 +362,15 @@ export default {
       />
     </div>
     <div class="right-wrap">
-      <woot-button
-        size="small"
-        :class-names="buttonClass"
-        :is-disabled="isSendDisabled"
+      <NextButton
+        :label="sendButtonText"
+        type="submit"
+        sm
+        :color="isNote ? 'amber' : 'blue'"
+        :disabled="isSendDisabled"
+        class="flex-shrink-0"
         @click="onSend"
-      >
-        {{ sendButtonText }}
-      </woot-button>
+      />
     </div>
   </div>
 </template>

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

@@ -13,6 +13,8 @@ import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import Linear from './linear/index.vue';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
   components: {
     BackButton,
@@ -21,6 +23,7 @@ export default {
     Thumbnail,
     SLACardLabel,
     Linear,
+    NextButton,
   },
   mixins: [inboxMixin],
   props: {
@@ -154,16 +157,13 @@ export default {
           <div
             class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit"
           >
-            <woot-button
-              variant="link"
-              color-scheme="secondary"
-              class="[&>span]:overflow-hidden [&>span]:whitespace-nowrap [&>span]:text-ellipsis min-w-0"
-              @click.prevent="$emit('contactPanelToggle')"
-            >
-              <span class="text-base font-medium leading-tight text-n-slate-12">
+            <NextButton link slate @click.prevent="$emit('contactPanelToggle')">
+              <span
+                class="text-base font-medium truncate leading-tight text-n-slate-12"
+              >
                 {{ currentContact.name }}
               </span>
-            </woot-button>
+            </NextButton>
             <fluent-icon
               v-if="!isHMACVerified"
               v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
@@ -180,14 +180,13 @@ export default {
             <span v-if="isSnoozed" class="font-medium text-n-amber-10">
               {{ snoozedDisplayText }}
             </span>
-            <woot-button
-              class="p-0"
-              size="small"
-              variant="link"
+            <NextButton
+              link
+              xs
+              blue
+              :label="contactPanelToggleText"
               @click="$emit('contactPanelToggle')"
-            >
-              {{ contactPanelToggleText }}
-            </woot-button>
+            />
           </div>
         </div>
       </div>

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

@@ -25,6 +25,8 @@ import * as Sentry from '@sentry/vue';
 import { useTrack } from 'dashboard/composables';
 import { emitter } from 'shared/helpers/mitt';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
   components: {
     BubbleActions,
@@ -40,6 +42,7 @@ export default {
     InstagramStory,
     InstagramStoryReply,
     Spinner,
+    NextButton,
   },
   props: {
     data: {
@@ -452,12 +455,12 @@ export default {
         v-if="isFailed && !hasOneDayPassed && !isAnEmailInbox"
         class="message-failed--alert"
       >
-        <woot-button
+        <NextButton
           v-tooltip.top-end="$t('CONVERSATION.TRY_AGAIN')"
-          size="tiny"
-          color-scheme="alert"
-          variant="clear"
-          icon="arrow-clockwise"
+          ghost
+          xs
+          ruby
+          icon="i-lucide-refresh-ccw"
           @click="retrySendMessage"
         />
       </div>
@@ -660,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;
       }
     }
   }
@@ -724,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/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue

@@ -1,10 +1,11 @@
-<script>
-export default {
-  methods: {
-    openProfileSettings() {
-      return this.$router.push({ name: 'profile_settings_index' });
-    },
-  },
+<script setup>
+import { useRouter } from 'vue-router';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const router = useRouter();
+
+const openProfileSettings = () => {
+  return router.push({ name: 'profile_settings_index' });
 };
 </script>
 
@@ -14,13 +15,12 @@ export default {
   >
     <p class="w-fit !m-0">
       {{ $t('CONVERSATION.FOOTER.MESSAGE_SIGNATURE_NOT_CONFIGURED') }}
-      <woot-button
-        color-scheme="primary"
-        variant="link"
+
+      <Button
+        link
+        :label="$t('CONVERSATION.FOOTER.CLICK_HERE')"
         @click="openProfileSettings"
-      >
-        {{ $t('CONVERSATION.FOOTER.CLICK_HERE') }}
-      </woot-button>
+      />
     </p>
   </div>
 </template>

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

@@ -37,6 +37,8 @@ import wootConstants from 'dashboard/constants/globals';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { FEATURE_FLAGS } from '../../../featureFlags';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
   components: {
     Message,
@@ -44,6 +46,7 @@ export default {
     ReplyBox,
     Banner,
     ConversationLabelSuggestion,
+    NextButton,
   },
   mixins: [inboxMixin],
   props: {
@@ -488,13 +491,15 @@ export default {
       :href-link-text="replyWindowLinkText"
     />
     <div class="flex justify-end">
-      <woot-button
-        variant="smooth"
-        size="tiny"
-        color-scheme="secondary"
-        class="box-border fixed z-10 bg-white border border-r-0 border-solid rounded-bl-calc rtl:rotate-180 rounded-tl-calc border-n-weak"
+      <NextButton
+        faded
+        xs
+        slate
+        class="!rounded-r-none rtl:rotate-180 !rounded-2xl !fixed z-10"
+        :icon="
+          isContactPanelOpen ? 'i-ph-caret-right-fill' : 'i-ph-caret-left-fill'
+        "
         :class="isInboxView ? 'top-52 md:top-40' : 'top-32'"
-        :icon="isRightOrLeftIcon"
         @click="onToggleContactPanel"
       />
     </div>
@@ -614,20 +619,6 @@ export default {
   </div>
 </template>
 
-<style scoped>
-@tailwind components;
-
-@layer components {
-  .rounded-bl-calc {
-    border-bottom-left-radius: calc(1.5rem + 1px);
-  }
-
-  .rounded-tl-calc {
-    border-top-left-radius: calc(1.5rem + 1px);
-  }
-}
-</style>
-
 <style scoped lang="scss">
 .modal-mask {
   @apply absolute;

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

@@ -1,21 +1,20 @@
-<script>
+<script setup>
 import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
-export default {
-  components: { MessagePreview },
-  props: {
-    message: {
-      type: Object,
-      required: true,
-    },
+defineProps({
+  message: {
+    type: Object,
+    required: true,
   },
-  emits: ['dismiss'],
-};
+});
+
+const emit = defineEmits(['dismiss']);
 </script>
 
 <template>
   <div
-    class="reply-editor bg-slate-50 dark:bg-slate-800 rounded-md py-1 pl-2 pr-1 text-xs tracking-wide mt-2 flex items-center gap-1.5 -mx-2"
+    class="reply-editor bg-n-slate-9/10 rounded-md py-1 pl-2 pr-1 text-xs tracking-wide mt-2 flex items-center gap-1.5 -mx-2"
   >
     <fluent-icon class="flex-shrink-0 icon" icon="arrow-reply" size="14" />
     <div class="flex-grow gap-1 mt-px text-xs truncate">
@@ -27,14 +26,13 @@ export default {
         class="inline"
       />
     </div>
-    <woot-button
+    <Button
       v-tooltip="$t('CONVERSATION.REPLYBOX.DISMISS_REPLY')"
-      color-scheme="secondary"
-      icon="dismiss"
-      variant="clear"
-      size="tiny"
-      class="flex-shrink-0"
-      @click.stop="$emit('dismiss')"
+      ghost
+      xs
+      slate
+      icon="i-lucide-x"
+      @click.stop="emit('dismiss')"
     />
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue

@@ -12,7 +12,12 @@ import { ref, computed, onMounted } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     template: {
       type: Object,
@@ -114,78 +119,47 @@ export default {
       readonly
       class="template-input"
     />
-    <div v-if="variables" class="template__variables-container">
-      <p class="variables-label">
+    <div v-if="variables" class="p-2.5">
+      <p class="text-sm font-semibold mb-2.5">
         {{ $t('WHATSAPP_TEMPLATES.PARSER.VARIABLES_LABEL') }}
       </p>
       <div
         v-for="(variable, key) in processedParams"
         :key="key"
-        class="template__variable-item"
+        class="items-center flex mb-2.5"
       >
-        <span class="variable-label">
+        <span
+          class="bg-n-alpha-black2 text-n-slate-12 inline-block rounded-md text-xs py-2.5 px-6"
+        >
           {{ key }}
         </span>
         <woot-input
           v-model="processedParams[key]"
           type="text"
-          class="variable-input"
+          class="flex-1 text-sm ml-2.5"
           :styles="{ marginBottom: 0 }"
         />
       </div>
-      <p v-if="v$.$dirty && v$.$invalid" class="error">
+      <p
+        v-if="v$.$dirty && v$.$invalid"
+        class="bg-n-ruby-9/20 rounded-md text-n-ruby-9 p-2.5 text-center"
+      >
         {{ $t('WHATSAPP_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
       </p>
     </div>
-    <footer>
-      <woot-button variant="smooth" @click="resetTemplate">
-        {{ $t('WHATSAPP_TEMPLATES.PARSER.GO_BACK_LABEL') }}
-      </woot-button>
-      <woot-button type="button" @click="sendMessage">
-        {{ $t('WHATSAPP_TEMPLATES.PARSER.SEND_MESSAGE_LABEL') }}
-      </woot-button>
+    <footer class="flex justify-end gap-2">
+      <NextButton
+        faded
+        slate
+        type="reset"
+        :label="$t('WHATSAPP_TEMPLATES.PARSER.GO_BACK_LABEL')"
+        @click="resetTemplate"
+      />
+      <NextButton
+        type="button"
+        :label="$t('WHATSAPP_TEMPLATES.PARSER.SEND_MESSAGE_LABEL')"
+        @click="sendMessage"
+      />
     </footer>
   </div>
 </template>
-
-<style scoped lang="scss">
-.template__variables-container {
-  @apply p-2.5;
-}
-
-.variables-label {
-  @apply text-sm font-semibold mb-2.5;
-}
-
-.template__variable-item {
-  @apply items-center flex mb-2.5;
-
-  .label {
-    @apply text-xs;
-  }
-
-  .variable-input {
-    @apply flex-1 text-sm ml-2.5;
-  }
-
-  .variable-label {
-    @apply bg-slate-75 dark:bg-slate-700 text-slate-700 dark:text-slate-100 inline-block rounded-md text-xs py-2.5 px-6;
-  }
-}
-
-footer {
-  @apply flex justify-end;
-
-  button {
-    @apply ml-2.5;
-  }
-}
-
-.error {
-  @apply bg-red-100 dark:bg-red-100 rounded-md text-red-800 dark:text-red-800 p-2.5 text-center;
-}
-
-.template-input {
-  @apply bg-slate-25 dark:bg-slate-900 text-slate-700 dark:text-slate-100;
-}
-</style>

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue

@@ -43,48 +43,56 @@ export default {
 
 <template>
   <div class="w-full">
-    <div class="gap-1 templates__list-search">
-      <fluent-icon icon="search" class="search-icon" size="16" />
+    <div
+      class="gap-1 bg-n-alpha-black2 items-center flex mb-2.5 py-0 px-2.5 rounded-lg outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 focus-within:outline-n-brand dark:focus-within:outline-n-brand"
+    >
+      <fluent-icon icon="search" class="text-n-slate-12" size="16" />
       <input
         v-model="query"
         type="search"
         :placeholder="$t('WHATSAPP_TEMPLATES.PICKER.SEARCH_PLACEHOLDER')"
-        class="templates__search-input"
+        class="reset-base w-full h-9 bg-transparent text-n-slate-12 !text-sm !outline-0"
       />
     </div>
-    <div class="template__list-container">
+    <div
+      class="bg-n-background outline-n-container outline outline-1 rounded-lg max-h-[18.75rem] overflow-y-auto p-2.5"
+    >
       <div v-for="(template, i) in filteredTemplateMessages" :key="template.id">
         <button
-          class="template__list-item"
+          class="rounded-lg cursor-pointer block p-2.5 text-left w-full hover:bg-n-alpha-2 dark:hover:bg-n-solid-2"
           @click="$emit('onSelect', template)"
         >
           <div>
             <div class="flex items-center justify-between mb-2.5">
-              <p class="label-title">
+              <p class="text-sm">
                 {{ template.name }}
               </p>
               <span
-                class="inline-block px-2 py-1 text-xs leading-none bg-white rounded-sm cursor-default dark:bg-slate-700 text-slate-800 dark:text-slate-100"
+                class="inline-block px-2 py-1 text-xs leading-none bg-n-slate-3 rounded-lg cursor-default text-n-slate-12"
               >
                 {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.LANGUAGE') }} :
                 {{ template.language }}
               </span>
             </div>
             <div>
-              <p class="strong">
+              <p class="font-medium">
                 {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.TEMPLATE_BODY') }}
               </p>
               <p class="label-body">{{ getTemplatebody(template) }}</p>
             </div>
-            <div class="label-category">
-              <p class="strong">
+            <div class="mt-5">
+              <p class="font-medium">
                 {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.CATEGORY') }}
               </p>
               <p>{{ template.category }}</p>
             </div>
           </div>
         </button>
-        <hr v-if="i != filteredTemplateMessages.length - 1" :key="`hr-${i}`" />
+        <hr
+          v-if="i != filteredTemplateMessages.length - 1"
+          :key="`hr-${i}`"
+          class="border-b border-solid border-n-weak my-2.5 mx-auto max-w-[95%]"
+        />
       </div>
       <div v-if="!filteredTemplateMessages.length">
         <p>
@@ -97,46 +105,7 @@ export default {
 </template>
 
 <style scoped lang="scss">
-.templates__list-search {
-  @apply items-center flex bg-slate-25 dark:bg-slate-900 mb-2.5 py-0 px-2.5 rounded-md border border-solid border-slate-100 dark:border-slate-700;
-
-  .search-icon {
-    @apply text-slate-400 dark:text-slate-300;
-  }
-
-  .templates__search-input {
-    @apply bg-transparent border-0 text-xs h-9 m-0;
-  }
-}
-.template__list-container {
-  @apply bg-slate-25 dark:bg-slate-900 rounded-md max-h-[18.75rem] overflow-y-auto p-2.5;
-
-  .template__list-item {
-    @apply rounded-lg cursor-pointer block p-2.5 text-left w-full hover:bg-woot-50 dark:hover:bg-slate-800;
-
-    .label-title {
-      @apply text-sm;
-    }
-
-    .label-category {
-      @apply mt-5;
-
-      span {
-        @apply text-sm font-semibold;
-      }
-    }
-
-    .label-body {
-      font-family: monospace;
-    }
-  }
-}
-
-.strong {
-  @apply text-xs font-semibold;
-}
-
-hr {
-  @apply border-b border-solid border-slate-100 dark:border-slate-700 my-2.5 mx-auto max-w-[95%];
+.label-body {
+  font-family: monospace;
 }
 </style>

app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js

@@ -22,6 +22,14 @@ const filterTypes = [
     filterOperators: OPERATOR_TYPES_2,
     attributeModel: 'standard',
   },
+  {
+    attributeKey: 'priority',
+    attributeI18nKey: 'PRIORITY',
+    inputType: 'multi_select',
+    dataType: 'text',
+    filterOperators: OPERATOR_TYPES_1,
+    attributeModel: 'standard',
+  },
   {
     attributeKey: 'inbox_id',
     attributeI18nKey: 'INBOX_NAME',

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

@@ -3,6 +3,7 @@ import { ref, computed } from 'vue';
 
 import wootConstants from 'dashboard/constants/globals';
 import SLAEventItem from './SLAEventItem.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   slaMissedEvents: {
@@ -60,20 +61,19 @@ const toggleShowAllNRT = () => {
           v-if="shouldShowMoreNRTButton"
           class="flex flex-col items-end w-full"
         >
-          <woot-button
-            size="small"
-            :icon="!shouldShowAllNrts ? 'plus-sign' : ''"
-            variant="link"
-            color-scheme="secondary"
-            class="hover:!no-underline !gap-1 hover:!bg-transparent dark:hover:!bg-transparent"
-            @click="toggleShowAllNRT"
-          >
-            {{
+          <Button
+            link
+            xs
+            slate
+            class="hover:!no-underline"
+            :icon="!shouldShowAllNrts ? 'i-lucide-plus' : ''"
+            :label="
               shouldShowAllNrts
                 ? $t('SLA.EVENTS.HIDE', { count: nrtMisses.length })
                 : $t('SLA.EVENTS.SHOW_MORE', { count: nrtMisses.length })
-            }}
-          </woot-button>
+            "
+            @click="toggleShowAllNRT"
+          />
         </div>
       </template>
     </SLAEventItem>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue

@@ -2,11 +2,13 @@
 import { mapGetters } from 'vuex';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import Spinner from 'shared/components/Spinner.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     Thumbnail,
     Spinner,
+    NextButton,
   },
   props: {
     selectedInboxes: {
@@ -94,13 +96,7 @@ export default {
     </div>
     <div class="flex items-center justify-between header">
       <span>{{ $t('BULK_ACTION.AGENT_SELECT_LABEL') }}</span>
-      <woot-button
-        size="tiny"
-        variant="clear"
-        color-scheme="secondary"
-        icon="dismiss"
-        @click="onClose"
-      />
+      <NextButton ghost xs slate icon="i-lucide-x" @click="onClose" />
     </div>
     <div class="container">
       <div
@@ -121,7 +117,7 @@ export default {
                 v-model="query"
                 type="search"
                 :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
-                class="agent--search_input"
+                class="reset-base !outline-0 !text-sm agent--search_input"
               />
             </div>
           </li>
@@ -161,21 +157,21 @@ export default {
             }}
           </p>
           <div class="agent-confirmation-actions">
-            <woot-button
-              color-scheme="primary"
-              variant="smooth"
+            <NextButton
+              faded
+              sm
+              slate
+              type="reset"
+              :label="$t('BULK_ACTION.GO_BACK_LABEL')"
               @click="goBack"
-            >
-              {{ $t('BULK_ACTION.GO_BACK_LABEL') }}
-            </woot-button>
-            <woot-button
-              color-scheme="primary"
-              variant="flat"
+            />
+            <NextButton
+              sm
+              type="submit"
+              :label="$t('BULK_ACTION.YES')"
               :is-loading="uiFlags.isUpdating"
               @click="submit"
-            >
-              {{ $t('BULK_ACTION.YES') }}
-            </woot-button>
+            />
           </div>
         </div>
       </div>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue

@@ -1,7 +1,11 @@
 <script>
 import { mapGetters } from 'vuex';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
+  components: {
+    NextButton,
+  },
   emits: ['update', 'close', 'assign'],
   data() {
     return {
@@ -40,13 +44,7 @@ export default {
     </div>
     <div class="flex items-center justify-between header">
       <span>{{ $t('BULK_ACTION.LABELS.ASSIGN_LABELS') }}</span>
-      <woot-button
-        size="tiny"
-        variant="clear"
-        color-scheme="secondary"
-        icon="dismiss"
-        @click="onClose"
-      />
+      <NextButton ghost xs slate icon="i-lucide-x" @click="onClose" />
     </div>
     <div class="labels-list">
       <header class="labels-list__header">
@@ -58,7 +56,7 @@ export default {
             v-model="query"
             type="search"
             :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
-            class="label--search_input"
+            class="reset-base !outline-0 !text-sm label--search_input"
           />
         </div>
       </header>
@@ -91,15 +89,13 @@ export default {
         </li>
       </ul>
       <footer class="labels-list__footer">
-        <woot-button
-          size="small"
-          is-expanded
-          color-scheme="primary"
+        <NextButton
+          sm
+          type="submit"
+          :label="$t('BULK_ACTION.LABELS.ASSIGN_SELECTED_LABELS')"
           :disabled="!selectedLabels.length"
           @click="$emit('assign', selectedLabels)"
-        >
-          <span>{{ $t('BULK_ACTION.LABELS.ASSIGN_SELECTED_LABELS') }}</span>
-        </woot-button>
+        />
       </footer>
     </div>
   </div>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue

@@ -1,6 +1,11 @@
 <script>
 import { mapGetters } from 'vuex';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   emits: ['assignTeam', 'close'],
 
   data() {
@@ -40,13 +45,7 @@ export default {
     </div>
     <div class="flex items-center justify-between header">
       <span>{{ $t('BULK_ACTION.TEAMS.TEAM_SELECT_LABEL') }}</span>
-      <woot-button
-        size="tiny"
-        variant="clear"
-        color-scheme="secondary"
-        icon="dismiss"
-        @click="onClose"
-      />
+      <NextButton ghost xs slate icon="i-lucide-x" @click="onClose" />
     </div>
     <div class="container">
       <div class="team__list-container">
@@ -60,7 +59,7 @@ export default {
                 v-model="query"
                 type="search"
                 :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
-                class="agent--search_input"
+                class="reset-base !outline-0 !text-sm agent--search_input"
               />
             </div>
           </li>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue

@@ -4,6 +4,7 @@ import { ref } from 'vue';
 
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   showResolve: {
@@ -25,9 +26,9 @@ const emit = defineEmits(['update', 'close']);
 const { t } = useI18n();
 
 const actions = ref([
-  { icon: 'checkmark', key: 'resolved' },
-  { icon: 'arrow-redo', key: 'open' },
-  { icon: 'send-clock', key: 'snoozed' },
+  { icon: 'i-lucide-check', key: 'resolved' },
+  { icon: 'i-lucide-redo', key: 'open' },
+  { icon: 'i-lucide-alarm-clock', key: 'snoozed' },
 ]);
 
 const updateConversations = key => {
@@ -85,28 +86,21 @@ const actionLabel = key => {
       <span class="text-sm font-medium text-slate-600 dark:text-slate-100">
         {{ $t('BULK_ACTION.UPDATE.CHANGE_STATUS') }}
       </span>
-      <woot-button
-        size="tiny"
-        variant="clear"
-        color-scheme="secondary"
-        icon="dismiss"
-        @click="onClose"
-      />
+      <Button ghost xs slate icon="i-lucide-x" @click="onClose" />
     </div>
     <div class="px-2.5 pt-0 pb-2.5">
       <WootDropdownMenu class="m-0 list-none">
         <template v-for="action in actions">
           <WootDropdownItem v-if="showAction(action.key)" :key="action.key">
-            <woot-button
-              variant="clear"
-              color-scheme="secondary"
-              size="small"
+            <Button
+              ghost
+              sm
+              slate
+              class="!w-full ltr:!justify-start rtl:!justify-end"
               :icon="action.icon"
-              class="hover:!bg-n-slate-3 dark:hover:!bg-n-solid-3"
+              :label="actionLabel(action.key)"
               @click="updateConversations(action.key)"
-            >
-              {{ actionLabel(action.key) }}
-            </woot-button>
+            />
           </WootDropdownItem>
         </template>
       </WootDropdownMenu>

app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue

@@ -9,6 +9,7 @@ import validations from './validations';
 import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
 import SearchableDropdown from './SearchableDropdown.vue';
 import { LINEAR_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   conversationId: {
@@ -248,20 +249,20 @@ onMounted(getTeams);
       />
     </div>
     <div class="flex items-center justify-end w-full gap-2 mt-8">
-      <woot-button
-        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+      <Button
+        faded
+        slate
+        type="reset"
+        :label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL')"
         @click.prevent="onClose"
-      >
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
-      </woot-button>
-      <woot-button
-        :is-disabled="isSubmitDisabled"
-        class="px-4 rounded-xl"
+      />
+      <Button
+        type="submit"
+        :label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE')"
+        :disabled="isSubmitDisabled"
         :is-loading="isCreating"
         @click.prevent="createIssue"
-      >
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE') }}
-      </woot-button>
+      />
     </div>
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue

@@ -1,5 +1,7 @@
 <script setup>
 import { inject } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
 const props = defineProps({
   identifier: {
     type: String,
@@ -37,30 +39,24 @@ const openIssue = () => {
       />
       <span class="text-xs font-medium text-ash-900">{{ identifier }}</span>
     </div>
-    <div class="flex items-center gap-0.5">
-      <woot-button
-        variant="clear"
-        color-scheme="secondary"
-        class="h-[24px]"
+    <div class="flex items-center gap-1">
+      <Button
+        ghost
+        xs
+        slate
+        icon="i-lucide-unlink"
+        class="!transition-none"
         :is-loading="isUnlinking"
         @click="unlinkIssue"
-      >
-        <fluent-icon
-          v-if="!isUnlinking"
-          icon="unlink"
-          size="12"
-          type="outline"
-          icon-lib="lucide"
-        />
-      </woot-button>
-      <woot-button
-        variant="clear"
-        class="h-[24px]"
-        color-scheme="secondary"
+      />
+      <Button
+        ghost
+        xs
+        slate
+        class="!transition-none"
+        icon="i-lucide-arrow-up-right"
         @click="openIssue"
-      >
-        <fluent-icon icon="arrow-up-right" size="14" />
-      </woot-button>
+      />
     </div>
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue

@@ -8,6 +8,7 @@ import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
 import FilterListDropdown from 'dashboard/components/ui/Dropdown/DropdownList.vue';
 import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
 import { LINEAR_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   conversationId: {
@@ -129,20 +130,20 @@ const linkIssue = async () => {
       </template>
     </FilterButton>
     <div class="flex items-center justify-end w-full gap-2 mt-2">
-      <woot-button
-        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+      <Button
+        faded
+        slate
+        type="reset"
+        :label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL')"
         @click.prevent="onClose"
-      >
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
-      </woot-button>
-      <woot-button
-        :is-disabled="isSubmitDisabled"
-        class="px-4 rounded-xl"
+      />
+      <Button
+        type="submit"
+        :label="$t('INTEGRATION_SETTINGS.LINEAR.LINK.TITLE')"
+        :disabled="isSubmitDisabled"
         :is-loading="isLinking"
         @click.prevent="linkIssue"
-      >
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.LINK.TITLE') }}
-      </woot-button>
+      />
     </div>
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/linear/index.vue

@@ -9,6 +9,7 @@ import Issue from './Issue.vue';
 import { useTrack } from 'dashboard/composables';
 import { LINEAR_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   conversationId: {
@@ -100,23 +101,25 @@ onMounted(() => {
 
 <template>
   <div class="relative" :class="{ group: linkedIssue }">
-    <woot-button
+    <Button
       v-on-clickaway="closeIssue"
       v-tooltip="tooltipText"
-      variant="clear"
-      color-scheme="secondary"
+      sm
+      ghost
+      slate
+      class="!gap-1"
       @click="openIssue"
     >
       <fluent-icon
         icon="linear"
         size="19"
-        class="text-[#5E6AD2]"
+        class="text-[#5E6AD2] flex-shrink-0"
         view-box="0 0 19 19"
       />
-      <span v-if="linkedIssue" class="text-xs font-medium text-ash-800">
+      <span v-if="linkedIssue" class="text-xs font-medium text-n-slate-11">
         {{ linkedIssue.issue.identifier }}
       </span>
-    </woot-button>
+    </Button>
     <Issue
       v-if="linkedIssue"
       :issue="linkedIssue.issue"

app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue

@@ -3,9 +3,12 @@ import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import Modal from '../../Modal.vue';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
   components: {
     Modal,
+    NextButton,
   },
   props: {
     show: { type: Boolean, default: false },
@@ -66,13 +69,20 @@ export default {
         :placeholder="confirmPlaceHolderText"
         @blur="v$.value.$touch"
       />
-      <div class="button-wrapper">
-        <woot-button color-scheme="alert" :is-disabled="v$.value.$invalid">
-          {{ confirmText }}
-        </woot-button>
-        <woot-button class="clear" @click.prevent="closeModal">
-          {{ rejectText }}
-        </woot-button>
+      <div class="flex items-center justify-end gap-2">
+        <NextButton
+          faded
+          slate
+          type="reset"
+          :label="rejectText"
+          @click.prevent="closeModal"
+        />
+        <NextButton
+          ruby
+          type="submit"
+          :label="confirmText"
+          :disabled="v$.value.$invalid"
+        />
       </div>
     </form>
   </Modal>

app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue

@@ -1,9 +1,11 @@
 <script>
 import Modal from '../../Modal.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     Modal,
+    NextButton,
   },
   props: {
     title: {
@@ -55,12 +57,8 @@ export default {
     <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header :header-title="title" :header-content="description" />
       <div class="flex flex-row justify-end gap-2 py-4 px-6 w-full">
-        <woot-button variant="clear" @click="cancel">
-          {{ cancelLabel }}
-        </woot-button>
-        <woot-button @click="confirm">
-          {{ confirmLabel }}
-        </woot-button>
+        <NextButton faded type="reset" :label="cancelLabel" @click="cancel" />
+        <NextButton type="submit" :label="confirmLabel" @click="confirm" />
       </div>
     </div>
   </Modal>

app/javascript/dashboard/components/widgets/modal/DeleteModal.vue

@@ -1,5 +1,6 @@
 <script setup>
 import Modal from '../../Modal.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
   onClose: { type: Function, default: () => {} },
@@ -22,23 +23,8 @@ const show = defineModel('show', { type: Boolean, default: false });
       :header-content-value="messageValue"
     />
     <div class="flex items-center justify-end gap-2 p-8">
-      <woot-button variant="clear" class="action-button" @click="onClose">
-        {{ rejectText }}
-      </woot-button>
-      <woot-button
-        color-scheme="alert"
-        class="action-button"
-        variant="smooth"
-        @click="onConfirm"
-      >
-        {{ confirmText }}
-      </woot-button>
+      <Button faded slate type="reset" :label="rejectText" @click="onClose" />
+      <Button ruby type="submit" :label="confirmText" @click="onConfirm" />
     </div>
   </Modal>
 </template>
-
-<style lang="scss" scoped>
-.action-button {
-  max-width: var(--space-giga);
-}
-</style>

app/javascript/dashboard/helper/ConversationMetaThrottleManager.js

@@ -0,0 +1,29 @@
+class ConversationMetaThrottleManager {
+  constructor() {
+    this.lastUpdatedTime = null;
+  }
+
+  shouldThrottle(threshold = 10000) {
+    if (!this.lastUpdatedTime) {
+      return false;
+    }
+
+    const currentTime = new Date().getTime();
+    const lastUpdatedTime = new Date(this.lastUpdatedTime).getTime();
+
+    if (currentTime - lastUpdatedTime < threshold) {
+      return true;
+    }
+    return false;
+  }
+
+  markUpdate() {
+    this.lastUpdatedTime = new Date();
+  }
+
+  reset() {
+    this.lastUpdatedTime = null;
+  }
+}
+
+export default new ConversationMetaThrottleManager();

app/javascript/dashboard/helper/customViewsHelper.js

@@ -21,6 +21,7 @@ export const getAttributeInputType = (key, allCustomAttributes) => {
   const customAttribute = allCustomAttributes.find(
     attr => attr.attribute_key === key
   );
+
   const { attribute_display_type } = customAttribute;
   const filterInputTypes = generateCustomAttributesInputType(
     attribute_display_type
@@ -68,10 +69,22 @@ const getValuesForCountries = (values, countries) => {
   }));
 };
 
+const getValuesForPriority = (values, priority) => {
+  return priority.filter(option => values.includes(option.id));
+};
+
 export const getValuesForFilter = (filter, params) => {
   const { attribute_key, values } = filter;
-  const { languages, countries, agents, inboxes, teams, campaigns, labels } =
-    params;
+  const {
+    languages,
+    countries,
+    agents,
+    inboxes,
+    teams,
+    campaigns,
+    labels,
+    priority,
+  } = params;
   switch (attribute_key) {
     case 'status':
       return getValuesForStatus(values);
@@ -83,15 +96,14 @@ export const getValuesForFilter = (filter, params) => {
       return getValuesName(values, teams, 'id', 'name');
     case 'campaign_id':
       return getValuesName(values, campaigns, 'id', 'title');
-    case 'labels': {
+    case 'labels':
       return getValuesForLabels(values, labels);
-    }
-    case 'browser_language': {
+    case 'priority':
+      return getValuesForPriority(values, priority);
+    case 'browser_language':
       return getValuesForLanguages(values, languages);
-    }
-    case 'country_code': {
+    case 'country_code':
       return getValuesForCountries(values, countries);
-    }
     default:
       return { id: values[0], name: values[0] };
   }
@@ -100,9 +112,9 @@ export const getValuesForFilter = (filter, params) => {
 export const generateValuesForEditCustomViews = (filter, params) => {
   const { attribute_key, filter_operator, values } = filter;
   const { filterTypes, allCustomAttributes } = params;
-  const inboxType = getInputType(attribute_key, filter_operator, filterTypes);
+  const inputType = getInputType(attribute_key, filter_operator, filterTypes);
 
-  if (inboxType === undefined) {
+  if (inputType === undefined) {
     const filterInputTypes = getAttributeInputType(
       attribute_key,
       allCustomAttributes
@@ -112,7 +124,7 @@ export const generateValuesForEditCustomViews = (filter, params) => {
       : { id: values[0], name: values[0] };
   }
 
-  return inboxType === 'multi_select' || inboxType === 'search_select'
+  return inputType === 'multi_select' || inputType === 'search_select'
     ? getValuesForFilter(filter, params)
     : values[0].toString();
 };

app/javascript/dashboard/helper/specs/ConversationMetaThrottleManager.spec.js

@@ -0,0 +1,34 @@
+import ConversationMetaThrottleManager from '../ConversationMetaThrottleManager';
+
+describe('ConversationMetaThrottleManager', () => {
+  beforeEach(() => {
+    // Reset the lastUpdatedTime before each test
+    ConversationMetaThrottleManager.lastUpdatedTime = null;
+  });
+
+  describe('shouldThrottle', () => {
+    it('returns false when lastUpdatedTime is not set', () => {
+      expect(ConversationMetaThrottleManager.shouldThrottle()).toBe(false);
+    });
+
+    it('returns true when time difference is less than threshold', () => {
+      ConversationMetaThrottleManager.markUpdate();
+      expect(ConversationMetaThrottleManager.shouldThrottle()).toBe(true);
+    });
+
+    it('returns false when time difference is more than threshold', () => {
+      ConversationMetaThrottleManager.lastUpdatedTime = new Date(
+        Date.now() - 11000
+      );
+      expect(ConversationMetaThrottleManager.shouldThrottle()).toBe(false);
+    });
+
+    it('respects custom threshold value', () => {
+      ConversationMetaThrottleManager.lastUpdatedTime = new Date(
+        Date.now() - 5000
+      );
+      expect(ConversationMetaThrottleManager.shouldThrottle(3000)).toBe(false);
+      expect(ConversationMetaThrottleManager.shouldThrottle(6000)).toBe(true);
+    });
+  });
+});

app/javascript/dashboard/i18n/locale/pt/contact.json

@@ -288,32 +288,32 @@
       "SEARCH_PLACEHOLDER": "Search...",
       "MESSAGE_BUTTON": "Messagem",
       "SEND_MESSAGE": "Enviar mensagem",
-      "BLOCK_CONTACT": "Block contact",
-      "UNBLOCK_CONTACT": "Unblock contact",
+      "BLOCK_CONTACT": "Bloquear contato",
+      "UNBLOCK_CONTACT": "Desbloquear contato",
       "BREADCRUMB": {
         "CONTACTS": "Contactos"
       },
       "ACTIONS": {
         "CONTACT_CREATION": {
-          "ADD_CONTACT": "Add contact",
-          "EXPORT_CONTACT": "Export contacts",
-          "IMPORT_CONTACT": "Import contacts",
-          "SAVE_CONTACT": "Save contact",
+          "ADD_CONTACT": "Editar contato",
+          "EXPORT_CONTACT": "Exportar contatos",
+          "IMPORT_CONTACT": "Importar contatos",
+          "SAVE_CONTACT": "Salvar contato",
           "EMAIL_ADDRESS_DUPLICATE": "O e-mail inserido já está a ser utilizado por outro contacto.",
           "PHONE_NUMBER_DUPLICATE": "Este número já está a ser usado por outro contacto.",
           "SUCCESS_MESSAGE": "Contacto guardado com sucesso",
-          "ERROR_MESSAGE": "Unable to save contact. Please try again later."
+          "ERROR_MESSAGE": "Não foi possível o contato. Por favor, tente mais tarde."
         },
-        "BLOCK_SUCCESS_MESSAGE": "This contact is blocked successfully",
-        "BLOCK_ERROR_MESSAGE": "Unable to block contact. Please try again later.",
+        "BLOCK_SUCCESS_MESSAGE": "Este contato foi bloqueado com sucesso",
+        "BLOCK_ERROR_MESSAGE": "Não foi possível bloquear o contato. Por favor, tente mais tarde.",
         "UNBLOCK_SUCCESS_MESSAGE": "Este contacto foi desbloqueado",
-        "UNBLOCK_ERROR_MESSAGE": "Unable to unblock contact. Please try again later.",
+        "UNBLOCK_ERROR_MESSAGE": "Não foi possível bloquear o contato. Por favor, tente mais tarde.",
         "IMPORT_CONTACT": {
-          "TITLE": "Import contacts",
+          "TITLE": "Importar contatos",
           "DESCRIPTION": "Importar contactos através de um ficheiro CSV.",
           "DOWNLOAD_LABEL": "Descarregar uma amostra CSV.",
           "LABEL": "Ficheiro CSV:",
-          "CHOOSE_FILE": "Choose file",
+          "CHOOSE_FILE": "Escolher arquivo",
           "CHANGE": "Trocar",
           "CANCEL": "Cancelar",
           "IMPORT": "Importar",
@@ -321,8 +321,8 @@
           "ERROR_MESSAGE": "Ocorreu um erro, por favor, tente novamente"
         },
         "EXPORT_CONTACT": {
-          "TITLE": "Export contacts",
-          "DESCRIPTION": "Quickly export a csv file with comprehensive details of your contacts",
+          "TITLE": "Exportar contatos",
+          "DESCRIPTION": "Exporte rapidamente um arquivo csv com detalhes completos dos seus contatos",
           "CONFIRM": "Exportar",
           "SUCCESS_MESSAGE": "Exportação em progresso. Será notificado via e-mail quando o ficheiro de exportação estiver pronto para descarregar.",
           "ERROR_MESSAGE": "Ocorreu um erro, por favor, tente novamente"
@@ -408,44 +408,44 @@
         "TITLE": "Editar detalhes do contacto",
         "FORM": {
           "FIRST_NAME": {
-            "PLACEHOLDER": "Enter the first name"
+            "PLACEHOLDER": "Digite o primeiro nome"
           },
           "LAST_NAME": {
-            "PLACEHOLDER": "Enter the last name"
+            "PLACEHOLDER": "Digite o sobrenome"
           },
           "EMAIL_ADDRESS": {
-            "PLACEHOLDER": "Enter the email address",
+            "PLACEHOLDER": "Insira um endereço de e-mail",
             "DUPLICATE": "O e-mail inserido já está a ser utilizado por outro contacto."
           },
           "PHONE_NUMBER": {
-            "PLACEHOLDER": "Enter the phone number",
+            "PLACEHOLDER": "Digite número de telefone",
             "DUPLICATE": "Este número já está a ser usado por outro contacto."
           },
           "CITY": {
             "PLACEHOLDER": "Escreva o nome da cidade"
           },
           "COUNTRY": {
-            "PLACEHOLDER": "Select country"
+            "PLACEHOLDER": "Selecionar País"
           },
           "BIO": {
-            "PLACEHOLDER": "Enter the bio"
+            "PLACEHOLDER": "Digite descrição"
           },
           "COMPANY_NAME": {
             "PLACEHOLDER": "Insira o nome da empresa"
           }
         },
-        "UPDATE_BUTTON": "Update contact",
-        "SUCCESS_MESSAGE": "Contact updated successfully",
-        "ERROR_MESSAGE": "Unable to update contact. Please try again later."
+        "UPDATE_BUTTON": "Atualizar contato",
+        "SUCCESS_MESSAGE": "Contato atualizado com sucesso",
+        "ERROR_MESSAGE": "Não foi possível atualizar o contato. Por favor, tente mais tarde."
       },
       "SOCIAL_MEDIA": {
-        "TITLE": "Edit social links",
+        "TITLE": "Editar redes sociais",
         "FORM": {
           "FACEBOOK": {
-            "PLACEHOLDER": "Add Facebook"
+            "PLACEHOLDER": "Adicionar Facebook"
           },
           "GITHUB": {
-            "PLACEHOLDER": "Add Github"
+            "PLACEHOLDER": "Adicionar Github"
           },
           "INSTAGRAM": {
             "PLACEHOLDER": "Add Instagram"
@@ -543,43 +543,43 @@
         "PLACEHOLDER": "Adicionar nota",
         "WROTE": "escreveu",
         "YOU": "Você",
-        "SAVE": "Save note",
-        "EMPTY_STATE": "There are no notes associated to this contact. You can add a note by typing in the box above."
+        "SAVE": "Salvar nota",
+        "EMPTY_STATE": "Não existem notas associadas a este contato. Você pode adicionar uma nota digitando a caixa acima."
       }
     },
     "EMPTY_STATE": {
-      "TITLE": "No contacts found in this account",
-      "SUBTITLE": "Start adding new contacts by clicking on the button below",
-      "BUTTON_LABEL": "Add contact",
+      "TITLE": "Nenhum contato encontrado nesta conta",
+      "SUBTITLE": "Para adicionar novos contatos, clique no botão abaixo",
+      "BUTTON_LABEL": "Editar contato",
       "SEARCH_EMPTY_STATE_TITLE": "Nenhum contacto corresponde à sua pesquisa 🔍",
-      "LIST_EMPTY_STATE_TITLE": "No contacts available in this view 📋"
+      "LIST_EMPTY_STATE_TITLE": "Não há contatos disponíveis nesta visualização 📋"
     }
   },
   "COMPOSE_NEW_CONVERSATION": {
     "CONTACT_SEARCH": {
-      "ERROR_MESSAGE": "We couldn’t complete the search. Please try again."
+      "ERROR_MESSAGE": "Não foi possível concluir a pesquisa. Por favor, tente novamente."
     },
     "FORM": {
       "GO_TO_CONVERSATION": "Ver",
-      "SUCCESS_MESSAGE": "The message was sent successfully!",
-      "ERROR_MESSAGE": "An error occurred while creating the conversation. Please try again later.",
-      "NO_INBOX_ALERT": "There are no available inboxes to start a conversation with this contact.",
+      "SUCCESS_MESSAGE": "Mensagem enviada com sucesso!",
+      "ERROR_MESSAGE": "Ocorreu um erro ao criar a conversa. Tente novamente mais tarde.",
+      "NO_INBOX_ALERT": "Não há caixas de entrada disponíveis para iniciar uma conversa com este contato.",
       "CONTACT_SELECTOR": {
         "LABEL": "Para:",
-        "TAG_INPUT_PLACEHOLDER": "Search for a contact with name, email or phone number",
-        "CONTACT_CREATING": "Creating contact..."
+        "TAG_INPUT_PLACEHOLDER": "Procurar por um contato com o nome, e-mail ou número de telefone",
+        "CONTACT_CREATING": "Criando contato..."
       },
       "INBOX_SELECTOR": {
         "LABEL": "Via:",
-        "BUTTON": "Show inboxes"
+        "BUTTON": "Mostrar caixas de entrada"
       },
       "EMAIL_OPTIONS": {
         "SUBJECT_LABEL": "Assunto :",
-        "SUBJECT_PLACEHOLDER": "Enter your email subject here",
+        "SUBJECT_PLACEHOLDER": "Insira seu assunto do e-mail aqui",
         "CC_LABEL": "Cc:",
-        "CC_PLACEHOLDER": "Search for a contact with their email address",
+        "CC_PLACEHOLDER": "Procurar um contato com seu endereço de e-mail",
         "BCC_LABEL": "Bcc:",
-        "BCC_PLACEHOLDER": "Search for a contact with their email address",
+        "BCC_PLACEHOLDER": "Procurar um contato com seu endereço de e-mail",
         "BCC_BUTTON": "Bcc"
       },
       "MESSAGE_EDITOR": {

app/javascript/dashboard/i18n/locale/pt/teamsSettings.json

@@ -100,7 +100,7 @@
         "NO": "cancelar"
       }
     },
-    "SETTINGS": "Confirgurações",
+    "SETTINGS": "Configurações",
     "FORM": {
       "UPDATE": "Atualizar a equipa",
       "CREATE": "Criar uma equipa",

app/javascript/dashboard/i18n/locale/pt_BR/components.json

@@ -42,6 +42,6 @@
   },
   "FEATURE_SPOTLIGHT": {
     "LEARN_MORE": "Saiba mais",
-    "WATCH_VIDEO": "Watch video"
+    "WATCH_VIDEO": "Assista ao vídeo"
   }
 }

app/javascript/dashboard/i18n/locale/pt_BR/conversation.json

@@ -296,25 +296,25 @@
       "CONTACT_ATTRIBUTES": "Atributos do contato",
       "PREVIOUS_CONVERSATION": "Conversas anteriores",
       "MACROS": "Macros",
-      "SHOPIFY_ORDERS": "Shopify Orders"
+      "SHOPIFY_ORDERS": "Pedidos Shopify"
     },
     "SHOPIFY": {
-      "ORDER_ID": "Order #{id}",
-      "ERROR": "Error loading orders",
-      "NO_SHOPIFY_ORDERS": "No orders found",
+      "ORDER_ID": "Pedido #{id}",
+      "ERROR": "Erro ao carregar pedidos",
+      "NO_SHOPIFY_ORDERS": "Nenhum pedido encontrado",
       "FINANCIAL_STATUS": {
         "PENDING": "Pendentes",
-        "AUTHORIZED": "Authorized",
-        "PARTIALLY_PAID": "Partially Paid",
-        "PAID": "Paid",
-        "PARTIALLY_REFUNDED": "Partially Refunded",
-        "REFUNDED": "Refunded",
-        "VOIDED": "Voided"
+        "AUTHORIZED": "Autorizado",
+        "PARTIALLY_PAID": "Parcialmente pago",
+        "PAID": "Pago",
+        "PARTIALLY_REFUNDED": "Parcialmente reembolsado",
+        "REFUNDED": "Reembolsado",
+        "VOIDED": "Anulado"
       },
       "FULFILLMENT_STATUS": {
-        "FULFILLED": "Fulfilled",
-        "PARTIALLY_FULFILLED": "Partially Fulfilled",
-        "UNFULFILLED": "Unfulfilled"
+        "FULFILLED": "Processado",
+        "PARTIALLY_FULFILLED": "Parcialmente processado",
+        "UNFULFILLED": "Não processado"
       }
     }
   },

app/javascript/dashboard/i18n/locale/pt_BR/helpCenter.json

@@ -9,7 +9,7 @@
       "FILTER": "Filtrar por",
       "SORT": "Classificar por",
       "LOCALE": "Localidade",
-      "SETTINGS_BUTTON": "Confirgurações",
+      "SETTINGS_BUTTON": "Configurações",
       "NEW_BUTTON": "Novo artigo",
       "DROPDOWN_OPTIONS": {
         "PUBLISHED": "Publicado",
@@ -121,7 +121,7 @@
             "COUNT_LABEL": "artigos",
             "ADD": "Adicionar localidade",
             "VISIT": "Visitar site",
-            "SETTINGS": "Confirgurações",
+            "SETTINGS": "Configurações",
             "DELETE": "Excluir"
           },
           "PORTAL_CONFIG": {

app/javascript/dashboard/i18n/locale/pt_BR/inboxMgmt.json

@@ -473,7 +473,7 @@
       "WIDGET_BUILDER": "Construtor de Widget",
       "BOT_CONFIGURATION": "Configuração do Bot"
     },
-    "SETTINGS": "Confirgurações",
+    "SETTINGS": "Configurações",
     "FEATURES": {
       "LABEL": "Funcionalidades",
       "DISPLAY_FILE_PICKER": "Exibir seletor de arquivos no widget",

app/javascript/dashboard/i18n/locale/pt_BR/integrations.json

@@ -2,18 +2,18 @@
   "INTEGRATION_SETTINGS": {
     "SHOPIFY": {
       "DELETE": {
-        "TITLE": "Delete Shopify Integration",
-        "MESSAGE": "Are you sure you want to delete the Shopify integration?"
+        "TITLE": "Excluir integração com Shopify",
+        "MESSAGE": "Tem certeza de que deseja excluir a integração com Shopify?"
       },
       "STORE_URL": {
-        "TITLE": "Connect Shopify Store",
-        "LABEL": "Store URL",
-        "PLACEHOLDER": "your-store.myshopify.com",
-        "HELP": "Enter your Shopify store's myshopify.com URL",
+        "TITLE": "Conectar loja Shopify",
+        "LABEL": "URL da loja",
+        "PLACEHOLDER": "sua-loja.myshopify.com",
+        "HELP": "Insira a URL myshopify.com da sua loja Shopify",
         "CANCEL": "Cancelar",
-        "SUBMIT": "Connect Store"
+        "SUBMIT": "Conectar loja"
       },
-      "ERROR": "There was an error connecting to Shopify. Please try again or contact support if the issue persists."
+      "ERROR": "Ocorreu um erro ao conectar com o Shopify. Por favor, tente novamente ou entre em contato com o suporte se o problema persistir."
     },
     "HEADER": "Integrações",
     "DESCRIPTION": "Chatwoot se integra com várias ferramentas e serviços para melhorar a eficiência da sua equipe. Explore a lista abaixo para configurar seus aplicativos favoritos.",
@@ -325,8 +325,8 @@
     }
   },
   "CAPTAIN": {
-    "NAME": "Capitão",
-    "HEADER_KNOW_MORE": "Know more",
+    "NAME": "Captain",
+    "HEADER_KNOW_MORE": "Saiba mais",
     "COPILOT": {
       "SEND_MESSAGE": "Enviar mensagem...",
       "LOADER": "Capitão está pensando",
@@ -408,8 +408,8 @@
         "TITLE": "Não há assistentes disponíveis",
         "SUBTITLE": "Crie um assistente para fornecer respostas rápidas e precisas aos seus usuários. Ele pode aprender com seus artigos de ajuda e conversas passadas.",
         "FEATURE_SPOTLIGHT": {
-          "TITLE": "Captain Assistant",
-          "NOTE": "Captain Assistant engages directly with customers, learns from your help docs and past conversations, and delivers instant, accurate responses. It handles the initial queries, providing quick resolutions before  transferring to an agent when needed."
+          "TITLE": "Assistente Captain",
+          "NOTE": "O Assistente Capitão interage diretamente com os clientes, aprende com seus documentos de ajuda e conversas passadas, e fornece respostas instantâneas e precisas. Ele lida com as consultas iniciais, oferecendo soluções rápidas antes de transferir para um agente quando necessário."
         }
       }
     },
@@ -453,8 +453,8 @@
         "TITLE": "Nenhum documento disponível",
         "SUBTITLE": "Os documentos são usados pelo seu assistente para gerar perguntas frequentes. Pode importar documentos para fornecer um contexto para seu assistente.",
         "FEATURE_SPOTLIGHT": {
-          "TITLE": "Captain Document",
-          "NOTE": "A document in Captain serves as a knowledge resource for the assistant. By connecting your help center or guides, Captain can analyze the content and provide accurate responses for customer inquiries."
+          "TITLE": "Documentos Captain",
+          "NOTE": "Um documento no Captain serve como um recurso de conhecimento para o assistente. Ao conectar sua central de ajuda ou guias, o Captain pode analisar o conteúdo e fornecer respostas precisas para as perguntas dos clientes."
         }
       }
     },
@@ -534,8 +534,8 @@
         "TITLE": "Nenhuma FAQ encontrada",
         "SUBTITLE": "Perguntas Frequentes ajudam seu assistente a fornecer respostas rápidas e precisas para perguntas de seus clientes. Eles podem ser gerados automaticamente a partir do seu conteúdo ou podem ser adicionados manualmente.",
         "FEATURE_SPOTLIGHT": {
-          "TITLE": "Captain FAQ",
-          "NOTE": "Captain FAQs detects common customer questions—whether missing from your knowledge base or frequently asked—and generates relevant FAQs to improve support. You can review each suggestion and decide whether to approve or reject it."
+          "TITLE": "Perguntas Frequentes do Captain",
+          "NOTE": "As Perguntas Frequentes do Captain detectam dúvidas comuns dos clientes — sejam elas ausentes da sua base de conhecimento ou frequentemente feitas — e geram respostas relevantes para melhorar o suporte. Você pode revisar cada sugestão e decidir se deseja aprová-la ou rejeitá-la."
         }
       }
     },

app/javascript/dashboard/i18n/locale/pt_BR/report.json

@@ -120,7 +120,7 @@
     },
     "PAGINATION": {
       "RESULTS": "Exibindo {start} — {end} de {total} resultados",
-      "PER_PAGE_TEMPLATE": "{size} / page"
+      "PER_PAGE_TEMPLATE": "{size} / página"
     }
   },
   "AGENT_REPORTS": {

app/javascript/dashboard/i18n/locale/pt_BR/settings.json

@@ -333,7 +333,7 @@
       "ARTICLES": "Artigos",
       "CATEGORIES": "Categorias",
       "LOCALES": "Localidades",
-      "SETTINGS": "Confirgurações"
+      "SETTINGS": "Configurações"
     },
     "CHANNELS": "Canais",
     "SET_AUTO_OFFLINE": {
@@ -364,7 +364,7 @@
       "BUTTON_TXT": "Comprar mais créditos",
       "DOCUMENTS": "Documentos",
       "RESPONSES": "Respostas",
-      "UPGRADE": "O capitão não está disponível no plano gratuito, faça o upgrade para ter acesso aos assistentes, co-piloto e muito mais."
+      "UPGRADE": "O Captain não está disponível no plano gratuito, faça o upgrade para ter acesso aos assistentes, copilot e muito mais."
     },
     "CHAT_WITH_US": {
       "TITLE": "Precisa de ajuda?",

app/javascript/dashboard/i18n/locale/pt_BR/teamsSettings.json

@@ -100,7 +100,7 @@
         "NO": "Cancelar"
       }
     },
-    "SETTINGS": "Confirgurações",
+    "SETTINGS": "Configurações",
     "FORM": {
       "UPDATE": "Atualizar equipe",
       "CREATE": "Criar nova equipe",

app/javascript/dashboard/modules/contact/components/MergeContact.vue

@@ -4,9 +4,10 @@ import { useVuelidate } from '@vuelidate/core';
 
 import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
 import ContactDropdownItem from './ContactDropdownItem.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
-  components: { MergeContactSummary, ContactDropdownItem },
+  components: { MergeContactSummary, ContactDropdownItem, NextButton },
   props: {
     primaryContact: {
       type: Object,
@@ -173,12 +174,18 @@ export default {
       :parent-contact-name="parentContactName"
     />
     <div class="flex justify-end gap-2 mt-6">
-      <woot-button variant="clear" @click.prevent="onCancel">
-        {{ $t('MERGE_CONTACTS.FORM.CANCEL') }}
-      </woot-button>
-      <woot-button type="submit" :is-loading="isMerging">
-        {{ $t('MERGE_CONTACTS.FORM.SUBMIT') }}
-      </woot-button>
+      <NextButton
+        faded
+        slate
+        type="reset"
+        :label="$t('MERGE_CONTACTS.FORM.CANCEL')"
+        @click.prevent="onCancel"
+      />
+      <NextButton
+        type="submit"
+        :is-loading="isMerging"
+        :label="$t('MERGE_CONTACTS.FORM.SUBMIT')"
+      />
     </div>
   </form>
 </template>

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue

@@ -1,47 +1,50 @@
-<script>
+<script setup>
 import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import Button from 'dashboard/components-next/button/Button.vue';
 
-export default {
-  name: 'ArticleSearchResultItem',
-  props: {
-    id: {
-      type: Number,
-      default: 0,
-    },
-    title: {
-      type: String,
-      default: 'Untitled',
-    },
-    url: {
-      type: String,
-      default: '',
-    },
-    category: {
-      type: String,
-      default: '',
-    },
-    locale: {
-      type: String,
-      default: '',
-    },
+const props = defineProps({
+  id: {
+    type: Number,
+    default: 0,
   },
-  emits: ['insert', 'preview'],
-  methods: {
-    handleInsert(e) {
-      e.stopPropagation();
-      this.$emit('insert', this.id);
-    },
-    handlePreview(e) {
-      e.stopPropagation();
-      this.$emit('preview', this.id);
-    },
-    async handleCopy(e) {
-      e.stopPropagation();
-      await copyTextToClipboard(this.url);
-      useAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
-    },
+  title: {
+    type: String,
+    default: 'Untitled',
   },
+  url: {
+    type: String,
+    default: '',
+  },
+  category: {
+    type: String,
+    default: '',
+  },
+  locale: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['insert', 'preview']);
+
+const { t } = useI18n();
+
+const handleInsert = e => {
+  e.stopPropagation();
+  emit('insert', props.id);
+};
+
+const handlePreview = e => {
+  e.stopPropagation();
+  emit('preview', props.id);
+};
+
+const handleCopy = async e => {
+  e.stopPropagation();
+  await copyTextToClipboard(props.url);
+  useAlert(t('CONTACT_PANEL.COPY_SUCCESSFUL'));
 };
 </script>
 
@@ -65,24 +68,23 @@ export default {
         {{ category || $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.UNCATEGORIZED') }}
       </p>
       <div class="flex gap-0.5">
-        <woot-button
+        <Button
           :title="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.COPY_LINK')"
-          variant="hollow"
-          color-scheme="secondary"
-          size="tiny"
-          icon="copy"
+          faded
+          slate
+          xs
+          type="reset"
+          icon="i-lucide-copy"
           class="invisible group-hover:visible"
           @click="handleCopy"
         />
-        <woot-button
-          class="insert-button"
-          variant="smooth"
-          color-scheme="secondary"
-          size="tiny"
+        <Button
+          xs
+          faded
+          slate
+          :label="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.INSERT_ARTICLE')"
           @click="handleInsert"
-        >
-          {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.INSERT_ARTICLE') }}
-        </woot-button>
+        />
       </div>
     </div>
   </button>

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue

@@ -1,42 +1,37 @@
-<script>
+<script setup>
 import IframeLoader from 'shared/components/IframeLoader.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
-export default {
-  name: 'ArticleView',
-  components: {
-    IframeLoader,
-  },
-  props: {
-    url: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['back', 'insert'],
-  methods: {
-    onBack(e) {
-      e.stopPropagation();
-      this.$emit('back');
-    },
-    onInsert(e) {
-      e.stopPropagation();
-      this.$emit('insert');
-    },
+defineProps({
+  url: {
+    type: String,
+    default: '',
   },
+});
+
+const emit = defineEmits(['back', 'insert']);
+
+const onBack = e => {
+  e.stopPropagation();
+  emit('back');
+};
+
+const onInsert = e => {
+  e.stopPropagation();
+  emit('insert');
 };
 </script>
 
 <template>
   <div class="h-full w-full flex flex-col flex-1 overflow-hidden">
     <div class="py-1">
-      <woot-button
-        variant="link"
-        size="small"
-        icon="chevron-left"
+      <Button
+        link
+        xs
+        :label="$t('HELP_CENTER.ARTICLE_SEARCH.BACK_RESULTS')"
+        icon="i-lucide-chevron-left"
         @click="onBack"
-      >
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH.BACK_RESULTS') }}
-      </woot-button>
+      />
     </div>
     <div class="-ml-4 h-full overflow-y-auto">
       <div class="w-full h-full min-h-0">
@@ -45,24 +40,22 @@ export default {
     </div>
 
     <div class="flex justify-end gap-2 py-2">
-      <woot-button
-        variant="hollow"
-        size="small"
-        is-expanded
-        color-scheme="secondary"
-        icon="chevron-left"
+      <Button
+        faded
+        slate
+        sm
+        type="reset"
+        icon="i-lucide-chevron-left"
+        :label="$t('HELP_CENTER.ARTICLE_SEARCH.BACK')"
         @click="onBack"
-      >
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH.BACK') }}
-      </woot-button>
-      <woot-button
-        size="small"
-        is-expanded
-        icon="arrow-download"
+      />
+      <Button
+        sm
+        type="submit"
+        icon="i-lucide-arrow-down-to-dot"
+        :label="$t('HELP_CENTER.ARTICLE_SEARCH.INSERT_ARTICLE')"
         @click="onInsert"
-      >
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH.INSERT_ARTICLE') }}
-      </woot-button>
+      />
     </div>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, onMounted } from 'vue';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
   title: {
@@ -49,13 +50,7 @@ useKeyboardEvents(keyboardEvents);
       <h3 class="text-base text-slate-900 dark:text-slate-25">
         {{ title }}
       </h3>
-      <woot-button
-        variant="clear"
-        size="tiny"
-        color-scheme="secondary"
-        icon="dismiss"
-        @click="onClose"
-      />
+      <Button ghost xs slate icon="i-lucide-x" @click="onClose" />
     </div>
 
     <div class="relative">

app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue

@@ -1,11 +1,10 @@
 <script>
 import V4Button from 'dashboard/components-next/button/Button.vue';
 import { useAlert, useTrack } from 'dashboard/composables';
-import fromUnixTime from 'date-fns/fromUnixTime';
-import format from 'date-fns/format';
 import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
+import { generateFileName } from 'dashboard/helper/downloadHelper';
 import ReportContainer from './ReportContainer.vue';
 import ReportHeader from './components/ReportHeader.vue';
 
@@ -79,11 +78,17 @@ export default {
     },
     downloadAgentReports() {
       const { from, to } = this;
-      const fileName = `agent-report-${format(
-        fromUnixTime(to),
-        'dd-MM-yyyy'
-      )}.csv`;
-      this.$store.dispatch('downloadAgentReports', { from, to, fileName });
+      const fileName = generateFileName({
+        type: 'agent',
+        to,
+        businessHours: this.businessHours,
+      });
+      this.$store.dispatch('downloadAgentReports', {
+        from,
+        to,
+        fileName,
+        businessHours: this.businessHours,
+      });
     },
     onFilterChange({ from, to, groupBy, businessHours }) {
       this.from = from;

app/javascript/dashboard/store/modules/conversationStats.js

@@ -1,28 +1,40 @@
 import types from '../mutation-types';
 import ConversationApi from '../../api/inbox/conversation';
 
+import ConversationMetaThrottleManager from 'dashboard/helper/ConversationMetaThrottleManager';
+
 const state = {
   mineCount: 0,
   unAssignedCount: 0,
   allCount: 0,
-  updatedOn: null,
 };
 
 export const getters = {
   getStats: $state => $state,
 };
 
+export const shouldThrottle = conversationCount => {
+  // The threshold for throttling is different for normal users and large accounts
+  // Normal users: 2 seconds
+  // Large accounts: 10 seconds
+  // We would only update the conversation stats based on the threshold above.
+  // This is done to reduce the number of /meta request made to the server.
+  const NORMAL_USER_THRESHOLD = 500;
+  const LARGE_ACCOUNT_THRESHOLD = 10000;
+
+  const threshold =
+    conversationCount > 100 ? LARGE_ACCOUNT_THRESHOLD : NORMAL_USER_THRESHOLD;
+  return ConversationMetaThrottleManager.shouldThrottle(threshold);
+};
+
 export const actions = {
   get: async ({ commit, state: $state }, params) => {
-    const currentTime = new Date();
-    const lastUpdatedTime = new Date($state.updatedOn);
-
-    // Skip large accounts from making too many requests
-    if (currentTime - lastUpdatedTime < 10000 && $state.allCount > 100) {
+    if (shouldThrottle($state.allCount)) {
       // eslint-disable-next-line no-console
-      console.warn('Skipping conversation meta fetch');
+      console.warn('Throttle /meta fetch, will resume after threshold');
       return;
     }
+    ConversationMetaThrottleManager.markUpdate();
 
     try {
       const response = await ConversationApi.meta(params);

app/javascript/dashboard/store/modules/conversations/getters.js

@@ -1,6 +1,7 @@
 import { MESSAGE_TYPE } from 'shared/constants/messages';
 import { applyPageFilters, sortComparator } from './helpers';
 import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
+import { matchesFilters } from './helpers/filterHelpers';
 import camelcaseKeys from 'camelcase-keys';
 
 export const getSelectedChatConversation = ({
@@ -13,6 +14,15 @@ const getters = {
   getAllConversations: ({ allConversations, chatSortFilter: sortKey }) => {
     return allConversations.sort((a, b) => sortComparator(a, b, sortKey));
   },
+  getFilteredConversations: ({
+    allConversations,
+    chatSortFilter,
+    appliedFilters,
+  }) => {
+    return allConversations
+      .filter(conversation => matchesFilters(conversation, appliedFilters))
+      .sort((a, b) => sortComparator(a, b, chatSortFilter));
+  },
   getSelectedChat: ({ selectedChatId, allConversations }) => {
     const selectedChat = allConversations.find(
       conversation => conversation.id === selectedChatId

app/javascript/dashboard/store/modules/conversations/helpers/filterHelpers.js

@@ -0,0 +1,356 @@
+/**
+ * Conversation Filter Helpers
+ * ---------------------------
+ * This file contains helper functions for filtering conversations in the frontend.
+ * The filtering logic is designed to align with the backend SQL behavior to ensure
+ * consistent results across the application.
+ *
+ * Key components:
+ * 1. getValueFromConversation: Retrieves values from conversation objects, handling
+ *    both top-level properties and nested attributes.
+ * 2. matchesCondition: Evaluates a single filter condition against a value.
+ * 3. matchesFilters: Evaluates a complete filter chain against a conversation.
+ * 4. buildJsonLogicRule: Transforms evaluated filters into a JSON Logic frule that
+ *    respects SQL-like operator precedence.
+ *
+ * Filter Structure:
+ * -----------------
+ * Each filter has the following structure:
+ * {
+ *   attributeKey: 'status',          // The attribute to filter on
+ *   filterOperator: 'equal_to',      // The operator to use (equal_to, contains, etc.)
+ *   values: ['open'],                // The values to compare against
+ *   queryOperator: 'and'             // How this filter connects to the next one (and/or)
+ * }
+ *
+ * Operator Precedence:
+ * --------------------
+ * The filter evaluation respects SQL-like operator precedence using JSON Logic:
+ * https://www.postgresql.org/docs/17/sql-syntax-lexical.html#SQL-PRECEDENCE
+ * 1. First evaluates individual conditions
+ * 2. Then applies AND operators (groups consecutive AND conditions)
+ * 3. Finally applies OR operators (connects AND groups with OR operations)
+ *
+ * This means that a filter chain like "A AND B OR C" is evaluated as "(A AND B) OR C",
+ * and "A OR B AND C" is evaluated as "A OR (B AND C)".
+ *
+ * The implementation uses json-logic-js to apply these rules. The JsonLogic format is designed
+ * to allow you to share rules (logic) between front-end and back-end code
+ * Here we use json-logic-js to transform filter conditions into a nested JSON Logic structure that preserves proper
+ * operator precedence, effectively mimicking SQL-like operator precedence.
+ *
+ * Conversation Object Structure:
+ * -----------------------------
+ * The conversation object can have:
+ * 1. Top-level properties (status, priority, display_id, etc.)
+ * 2. Nested properties in additional_attributes (browser_language, referer, etc.)
+ * 3. Nested properties in custom_attributes (conversation_type, etc.)
+ */
+import jsonLogic from 'json-logic-js';
+
+/**
+ * Gets a value from a conversation based on the attribute key
+ * @param {Object} conversation - The conversation object
+ * @param {String} attributeKey - The attribute key to get the value for
+ * @returns {*} - The value of the attribute
+ *
+ * This function handles various attribute locations:
+ * 1. Direct properties on the conversation object (status, priority, etc.)
+ * 2. Properties in conversation.additional_attributes (browser_language, referer, etc.)
+ * 3. Properties in conversation.custom_attributes (conversation_type, etc.)
+ */
+const getValueFromConversation = (conversation, attributeKey) => {
+  switch (attributeKey) {
+    case 'status':
+    case 'priority':
+    case 'display_id':
+    case 'labels':
+    case 'created_at':
+    case 'last_activity_at':
+      return conversation[attributeKey];
+    case 'assignee_id':
+      return conversation.meta?.assignee?.id;
+    case 'inbox_id':
+      return conversation.inbox_id;
+    case 'team_id':
+      return conversation.meta?.team?.id;
+    case 'browser_language':
+    case 'country_code':
+    case 'referer':
+      return conversation.additional_attributes?.[attributeKey];
+    default:
+      // Check if it's a custom attribute
+      if (
+        conversation.custom_attributes &&
+        conversation.custom_attributes[attributeKey]
+      ) {
+        return conversation.custom_attributes[attributeKey];
+      }
+      return null;
+  }
+};
+
+/**
+ * Resolves the value from an input candidate
+ * @param {*} candidate - The input value to resolve
+ * @returns {*} - If the candidate is an object with an id property, returns the id;
+ *                otherwise returns the candidate unchanged
+ *
+ * This helper function is used to normalize values, particularly when dealing with
+ * objects that represent entities like users, teams, or inboxes where we want to
+ * compare by ID rather than by the whole object.
+ */
+const resolveValue = candidate => {
+  if (
+    typeof candidate === 'object' &&
+    candidate !== null &&
+    'id' in candidate
+  ) {
+    return candidate.id;
+  }
+
+  return candidate;
+};
+
+/**
+ * Checks if two values are equal in the context of filtering
+ * @param {*} filterValue - The filterValue value
+ * @param {*} conversationValue - The conversationValue value
+ * @returns {Boolean} - Returns true if the values are considered equal according to filtering rules
+ *
+ * This function handles various equality scenarios:
+ * 1. When both values are arrays: checks if all items in filterValue exist in conversationValue
+ * 2. When filterValue is an array but conversationValue is not: checks if conversationValue is included in filterValue
+ * 3. Otherwise: performs strict equality comparison
+ */
+const equalTo = (filterValue, conversationValue) => {
+  if (Array.isArray(filterValue)) {
+    if (filterValue.includes('all')) return true;
+    if (filterValue === 'all') return true;
+
+    if (Array.isArray(conversationValue)) {
+      // For array values like labels, check if any of the filter values exist in the array
+      return filterValue.every(val => conversationValue.includes(val));
+    }
+
+    if (!Array.isArray(conversationValue)) {
+      return filterValue.includes(conversationValue);
+    }
+  }
+
+  return conversationValue === filterValue;
+};
+
+/**
+ * Checks if the filterValue value is contained within the conversationValue value
+ * @param {*} filterValue - The value to look for
+ * @param {*} conversationValue - The value to search within
+ * @returns {Boolean} - Returns true if filterValue is contained within conversationValue
+ *
+ * This function performs case-insensitive string containment checks.
+ * It only works with string values and returns false for non-string types.
+ */
+const contains = (filterValue, conversationValue) => {
+  if (typeof conversationValue === 'string') {
+    return conversationValue.toLowerCase().includes(filterValue.toLowerCase());
+  }
+  return false;
+};
+
+/**
+ * Checks if a value matches a filter condition
+ * @param {*} conversationValue - The value to check
+ * @param {Object} filter - The filter condition
+ * @returns {Boolean} - Returns true if the value matches the filter
+ */
+const matchesCondition = (conversationValue, filter) => {
+  const { filter_operator: filterOperator, values } = filter;
+
+  // Handle null/undefined values
+  if (conversationValue === null || conversationValue === undefined) {
+    return filterOperator === 'is_not_present';
+  }
+
+  const filterValue = Array.isArray(values)
+    ? values.map(resolveValue)
+    : resolveValue(values);
+
+  switch (filterOperator) {
+    case 'equal_to':
+      return equalTo(filterValue, conversationValue);
+
+    case 'not_equal_to':
+      return !equalTo(filterValue, conversationValue);
+
+    case 'contains':
+      return contains(filterValue, conversationValue);
+
+    case 'does_not_contain':
+      return !contains(filterValue, conversationValue);
+
+    case 'is_present':
+      return true; // We already handled null/undefined above
+
+    case 'is_not_present':
+      return false; // We already handled null/undefined above
+
+    case 'is_greater_than':
+      return new Date(conversationValue) > new Date(filterValue);
+
+    case 'is_less_than':
+      return new Date(conversationValue) < new Date(filterValue);
+
+    case 'days_before': {
+      const today = new Date();
+      const daysInMilliseconds = filterValue * 24 * 60 * 60 * 1000;
+      const targetDate = new Date(today.getTime() - daysInMilliseconds);
+      return conversationValue < targetDate.getTime();
+    }
+
+    default:
+      return false;
+  }
+};
+
+/**
+ * Converts an array of evaluated filters into a JSON Logic rule
+ * that respects SQL-like operator precedence (AND before OR)
+ *
+ * This function transforms the linear sequence of filter results and operators
+ * into a nested JSON Logic structure that correctly implements SQL-like precedence:
+ * - AND operators are evaluated before OR operators
+ * - Consecutive AND conditions are grouped together
+ * - These AND groups are then connected with OR operators
+ *
+ * For example:
+ * - "A AND B AND C" becomes { "and": [A, B, C] }
+ * - "A OR B OR C" becomes { "or": [A, B, C] }
+ * - "A AND B OR C" becomes { "or": [{ "and": [A, B] }, C] }
+ * - "A OR B AND C" becomes { "or": [A, { "and": [B, C] }] }
+ *
+ * FILTER CHAIN:  A --AND--> B --OR--> C --AND--> D --AND--> E --OR--> F
+ *                |         |         |         |         |         |
+ *                v         v         v         v         v         v
+ * EVALUATED:    true      false     true      false     true      false
+ *                \         /         \         \         /         /
+ *                 \       /           \         \       /         /
+ *                  \     /             \         \     /         /
+ *                   \   /               \         \   /         /
+ *                    \ /                 \         \ /         /
+ * AND GROUPS:      [true,false]          [true,false,true]    [false]
+ *                     |                       |                  |
+ *                     v                       v                  v
+ * JSON LOGIC:    {"and":[true,false]}   {"and":[true,false,true]}  false
+ *                   \                      |                  /
+ *                    \                     |                 /
+ *                     \                    |                /
+ *                      \                   |               /
+ *                       \                  |              /
+ * FINAL RULE:            {"or":[{"and":[true,false]},{"and":[true,false,true]},false]}
+ *
+ * {
+ *  "or": [
+ *    { "and": [true, false] },
+ *    { "and": [true, false, true] },
+ *    { "and": [false] }
+ *  ]
+ * }
+ * @param {Array} evaluatedFilters - Array of evaluated filter conditions with results and operators
+ * @returns {Object} - JSON Logic rule
+ */
+const buildJsonLogicRule = evaluatedFilters => {
+  // Step 1: Group consecutive AND conditions into logical units
+  // This implements the higher precedence of AND over OR
+  const andGroups = [];
+  let currentAndGroup = [evaluatedFilters[0].result];
+
+  for (let i = 0; i < evaluatedFilters.length - 1; i += 1) {
+    if (evaluatedFilters[i].operator === 'and') {
+      // When we see an AND operator, we add the next filter to the current AND group
+      // This builds up chains of AND conditions that will be evaluated together
+      currentAndGroup.push(evaluatedFilters[i + 1].result);
+    } else {
+      // When we see an OR operator, it marks the boundary between AND groups
+      // We finalize the current AND group and start a new one
+
+      // If the AND group has only one item, don't wrap it in an "and" operator
+      // Otherwise, create a proper "and" JSON Logic expression
+      andGroups.push(
+        currentAndGroup.length === 1
+          ? currentAndGroup[0] // Single item doesn't need an "and" wrapper
+          : { and: currentAndGroup } // Multiple items need to be AND-ed together
+      );
+
+      // Start a new AND group with the next filter's result
+      currentAndGroup = [evaluatedFilters[i + 1].result];
+    }
+  }
+
+  // Step 2: Add the final AND group that wasn't followed by an OR
+  if (currentAndGroup.length > 0) {
+    andGroups.push(
+      currentAndGroup.length === 1
+        ? currentAndGroup[0] // Single item doesn't need an "and" wrapper
+        : { and: currentAndGroup } // Multiple items need to be AND-ed together
+    );
+  }
+
+  // Step 3: Combine all AND groups with OR operators
+  // If we have multiple AND groups, they are separated by OR operators
+  // in the original filter chain, so we combine them with an "or" operation
+  if (andGroups.length > 1) {
+    return { or: andGroups };
+  }
+
+  // If there's only one AND group (which might be a single condition
+  // or multiple AND-ed conditions), just return it directly
+  return andGroups[0];
+};
+
+/**
+ * Evaluates each filter against the conversation and prepares the results array
+ * @param {Object} conversation - The conversation to evaluate
+ * @param {Array} filters - Filters to apply
+ * @returns {Array} - Array of evaluated filter results with operators
+ */
+const evaluateFilters = (conversation, filters) => {
+  return filters.map((filter, index) => {
+    const value = getValueFromConversation(conversation, filter.attribute_key);
+    const result = matchesCondition(value, filter);
+
+    // This part determines the logical operator that connects this filter to the next one:
+    // - If this is not the last filter (index < filters.length - 1), use the filter's query_operator
+    //   or default to 'and' if query_operator is not specified
+    // - If this is the last filter, set operator to null since there's no next filter to connect to
+    const isLastFilter = index === filters.length - 1;
+    const operator = isLastFilter ? null : filter.query_operator || 'and';
+
+    return { result, operator };
+  });
+};
+
+/**
+ * Checks if a conversation matches the given filters
+ * @param {Object} conversation - The conversation object to check
+ * @param {Array} filters - Array of filter conditions
+ * @returns {Boolean} - Returns true if conversation matches filters, false otherwise
+ */
+export const matchesFilters = (conversation, filters) => {
+  // If no filters, return true
+  if (!filters || filters.length === 0) {
+    return true;
+  }
+
+  // Handle single filter case
+  if (filters.length === 1) {
+    const value = getValueFromConversation(
+      conversation,
+      filters[0].attribute_key
+    );
+    return matchesCondition(value, filters[0]);
+  }
+
+  // Evaluate all conditions and prepare for jsonLogic
+  const evaluatedFilters = evaluateFilters(conversation, filters);
+  return jsonLogic.apply(buildJsonLogicRule(evaluatedFilters));
+};

app/javascript/dashboard/store/modules/specs/conversationStats/helper.spec.js

@@ -0,0 +1,37 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import ConversationMetaThrottleManager from 'dashboard/helper/ConversationMetaThrottleManager';
+import { shouldThrottle } from '../../conversationStats';
+
+vi.mock('dashboard/helper/ConversationMetaThrottleManager', () => ({
+  default: {
+    shouldThrottle: vi.fn(),
+  },
+}));
+
+describe('shouldThrottle', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('uses normal threshold for accounts with 100 or fewer conversations', () => {
+    shouldThrottle(100);
+    expect(ConversationMetaThrottleManager.shouldThrottle).toHaveBeenCalledWith(
+      2000
+    );
+  });
+
+  it('uses large account threshold for accounts with more than 100 conversations', () => {
+    shouldThrottle(101);
+    expect(ConversationMetaThrottleManager.shouldThrottle).toHaveBeenCalledWith(
+      10000
+    );
+  });
+
+  it('returns the throttle value from ConversationMetaThrottleManager', () => {
+    ConversationMetaThrottleManager.shouldThrottle.mockReturnValue(true);
+    expect(shouldThrottle(50)).toBe(true);
+
+    ConversationMetaThrottleManager.shouldThrottle.mockReturnValue(false);
+    expect(shouldThrottle(150)).toBe(false);
+  });
+});

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;
-  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%;
+  @apply items-center rounded-lg flex font-medium justify-center mt-1 p-0 w-full;
 }
 </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="getThemeClass('bg-white', 'dark:bg-slate-700')"
+    class="card-message chat-bubble agent bg-n-background dark:bg-n-solid-3 max-w-56 rounded-lg overflow-hidden"
   >
-    <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="getThemeClass('text-black-900', 'dark:text-slate-50')"
+        class="!text-base !font-medium !mt-1 !mb-1 !leading-[1.5] text-n-slate-12"
       >
         {{ title }}
       </h4>
-      <p
-        class="body"
-        :class="getThemeClass('text-black-700', 'dark:text-slate-100')"
-      >
+      <p class="!mb-1 text-n-slate-11">
         {{ 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="getThemeClass('bg-white', 'dark:bg-slate-700')"
+    class="form chat-bubble agent w-full p-4 bg-n-background dark:bg-n-solid-3"
   >
     <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')">{{
-          item.label
-        }}</label>
+        <label class="text-n-slate-12">
+          {{ item.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;
-    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;
+    @apply block font-medium py-1 px-0 capitalize;
   }
 
   .button {
-    font-size: $font-size-default;
+    @apply text-sm rounded-lg;
   }
 
   .error-message {
-    display: none;
-    margin-top: $space-smaller;
-    color: $color-error;
+    @apply text-n-ruby-9 mt-1 hidden;
+  }
+
+  input,
+  textarea,
+  select {
+    @apply dark:bg-n-alpha-black1;
   }
 
   .has-submitted {
-    input:invalid {
-      border: 1px solid $color-error;
-    }
-
-    input:invalid + .error-message {
-      display: block;
-    }
-
+    input:invalid,
     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;
-  border: 1px solid $color-woot;
-  float: left;
-  margin: $space-smaller;
-  max-width: 100%;
+  @apply rounded-[5rem] border border-solid border-n-brand ltr:float-left rtl:float-right m-1 max-w-full;
 
   .option-button {
-    background: transparent;
-    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;
+    @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];
 
     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 class="card-body">
-      <h4 class="title text-black-900 dark:text-slate-50">
-        <div
-          v-dompurify-html="formatMessage(title, false)"
-          class="message-content text-black-900 dark:text-slate-50"
-        />
-      </h4>
-      <ul
-        v-if="!hideFields"
-        class="options"
-        :class="{ 'has-selected': !!selected }"
-      >
-        <ChatOption
-          v-for="option in options"
-          :key="option.id"
-          :action="option"
-          :is-selected="isSelected(option)"
-          @option-select="onClick"
-        />
-      </ul>
-    </div>
+  <div
+    class="chat-bubble agent max-w-64 !py-2 !px-4 rounded-lg overflow-hidden mt-1 bg-n-background dark:bg-n-solid-3"
+  >
+    <h4 class="text-n-slate-12 text-sm font-normal my-1 leading-[1.5]">
+      <div
+        v-dompurify-html="formatMessage(title, false)"
+        class="text-n-slate-12"
+      />
+    </h4>
+    <ul v-if="!hideFields" class="w-full">
+      <ChatOption
+        v-for="option in options"
+        :key="option.id"
+        :action="option"
+        :is-selected="isSelected(option)"
+        class="list-none p-0"
+        @option-select="onClick"
+      />
+    </ul>
   </div>
 </template>
-
-<style lang="scss">
-@import 'dashboard/assets/scss/variables.scss';
-
-.has-selected {
-  .option-button:not(.is-selected) {
-    color: $color-light-gray;
-    cursor: initial;
-  }
-}
-</style>
-
-<style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-
-.options-message {
-  max-width: 17rem;
-  padding: $space-small $space-normal;
-  border-radius: $space-small;
-  overflow: hidden;
-
-  .title {
-    font-size: $font-size-default;
-    font-weight: $font-weight-normal;
-    margin-top: $space-smaller;
-    margin-bottom: $space-smaller;
-    line-height: 1.5;
-  }
-
-  .options {
-    width: 100%;
-
-    > li {
-      list-style: none;
-      padding: 0;
-    }
-  }
-}
-</style>

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="getThemeClass('bg-white', 'dark:bg-slate-700')"
+    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"
     :style="{ borderColor: widgetColor }"
   >
-    <h6
-      class="title"
-      :class="getThemeClass('text-slate-900', 'dark:text-slate-50')"
-    >
+    <h6 class="text-n-slate-12 text-sm font-medium pt-5 px-2.5 text-center">
       {{ 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;
-      filter: grayscale(100%);
-      font-size: $font-size-big;
-      outline: none;
+      @apply shadow-none grayscale text-2xl outline-none transition-all duration-200;
 
       &.selected,
       &:hover,
       &:focus,
       &:active {
-        filter: grayscale(0%);
-        transform: scale(1.32);
+        @apply grayscale-0 scale-[1.32];
       }
 
       &.disabled {
-        cursor: default;
-        opacity: 0.5;
-        pointer-events: none;
+        @apply cursor-not-allowed opacity-50 pointer-events-none;
       }
     }
   }
 
   .feedback-form {
-    display: flex;
-
     input {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: $space-small;
-      border: 0;
-      border-top: 1px solid $color-border;
-      padding: $space-one;
-      width: 100%;
+      @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;
 
       &::placeholder {
-        color: $color-light-gray;
+        @apply text-n-slate-10;
       }
     }
 
     .button {
-      appearance: none;
-      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;
+      @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;
 
       .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="getThemeClass('text-slate-700', 'dark:text-slate-200')"
+    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"
   >
     {{ 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';
-
-@mixin color-spinner() {
-  @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;
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
   }
 }
 
 .spinner {
-  @include color-spinner();
-  position: relative;
-  display: inline-block;
-  width: $space-medium;
-  height: $space-medium;
-  padding: $zero $space-medium;
-  vertical-align: middle;
+  @apply relative inline-block w-6 h-6 align-middle;
+
+  &:before {
+    @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];
+  }
 
   &.message {
-    padding: $space-one;
-    top: 0;
-    left: 0;
-    margin: 0 auto;
-    margin-top: $space-slab;
-    background: $color-white;
-    border-radius: $space-large;
+    @apply p-2.5 top-0 left-0 mx-auto my-0 mt-3 bg-n-background rounded-[2rem];
 
     &:before {
-      margin-top: -$space-slab;
-      margin-left: -$space-slab;
+      @apply -mt-3 -ml-3;
     }
   }
 
   &.small {
-    width: $space-normal;
-    height: $space-normal;
+    @apply w-4 h-4;
 
     &:before {
-      width: $space-normal;
-      height: $space-normal;
-      margin-top: -$space-small;
+      @apply w-4 h-4 -mt-2;
     }
   }
 
   &.tiny {
-    width: $space-one;
-    height: $space-one;
-    padding: 0 $space-smaller;
+    @apply w-2.5 h-2.5 py-0 px-1;
 
     &:before {
-      width: $space-one;
-      height: $space-one;
-      margin-top: -$space-small + $space-micro;
+      @apply w-2.5 h-2.5 -mt-1.5;
     }
   }
-
-  &.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"
-  data-v-b24b73fa=""
+  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"
 >
   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/shared/components/ui/dropdown/AddLabel.vue

@@ -1,30 +1,20 @@
-<script>
-export default {
-  emits: ['add'],
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
 
-  methods: {
-    addLabel() {
-      this.$emit('add');
-    },
-  },
+const emit = defineEmits(['add']);
+
+const addLabel = () => {
+  emit('add');
 };
 </script>
 
 <template>
-  <woot-button
-    variant="smooth"
-    class="label--add"
-    icon="add"
-    size="tiny"
+  <Button
+    faded
+    xs
+    icon="i-lucide-plus"
+    class="mb-0.5 ltr:mr-0.5 rtl:ml-0.5 !rounded-[4px]"
+    :label="$t('CONTACT_PANEL.LABELS.CONVERSATION.ADD_BUTTON')"
     @click="addLabel"
-  >
-    {{ $t('CONTACT_PANEL.LABELS.CONVERSATION.ADD_BUTTON') }}
-  </woot-button>
+  />
 </template>
-
-<style lang="scss" scoped>
-.label--add {
-  margin-bottom: var(--space-micro);
-  margin-right: var(--space-micro);
-}
-</style>

app/javascript/shared/helpers/cache.js

@@ -0,0 +1,43 @@
+import { LocalStorage } from './localStorage';
+
+// Default cache expiry is 24 hours
+const DEFAULT_EXPIRY = 24 * 60 * 60 * 1000;
+
+export const getFromCache = (key, expiry = DEFAULT_EXPIRY) => {
+  try {
+    const cached = LocalStorage.get(key);
+    if (!cached) return null;
+
+    const { data, timestamp } = cached;
+    const isExpired = Date.now() - timestamp > expiry;
+
+    if (isExpired) {
+      LocalStorage.remove(key);
+      return null;
+    }
+
+    return data;
+  } catch (error) {
+    return null;
+  }
+};
+
+export const setCache = (key, data) => {
+  try {
+    const cacheData = {
+      data,
+      timestamp: Date.now(),
+    };
+    LocalStorage.set(key, cacheData);
+  } catch (error) {
+    // Ignore cache errors
+  }
+};
+
+export const clearCache = key => {
+  try {
+    LocalStorage.remove(key);
+  } catch (error) {
+    // Ignore cache errors
+  }
+};

app/javascript/shared/helpers/specs/cache.spec.js

@@ -0,0 +1,136 @@
+import { getFromCache, setCache, clearCache } from '../cache';
+import { LocalStorage } from '../localStorage';
+
+vi.mock('../localStorage');
+
+describe('Cache Helpers', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2023, 1, 1, 0, 0, 0));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe('getFromCache', () => {
+    it('returns null when no data is cached', () => {
+      LocalStorage.get.mockReturnValue(null);
+
+      const result = getFromCache('test-key');
+
+      expect(result).toBeNull();
+      expect(LocalStorage.get).toHaveBeenCalledWith('test-key');
+    });
+
+    it('returns cached data when not expired', () => {
+      // Current time is 2023-02-01 00:00:00
+      // Cache timestamp is 1 hour ago
+      const oneHourAgo =
+        new Date(2023, 1, 1, 0, 0, 0).getTime() - 60 * 60 * 1000;
+
+      LocalStorage.get.mockReturnValue({
+        data: { foo: 'bar' },
+        timestamp: oneHourAgo,
+      });
+
+      // Default expiry is 24 hours
+      const result = getFromCache('test-key');
+
+      expect(result).toEqual({ foo: 'bar' });
+      expect(LocalStorage.get).toHaveBeenCalledWith('test-key');
+      expect(LocalStorage.remove).not.toHaveBeenCalled();
+    });
+
+    it('removes and returns null when data is expired', () => {
+      // Current time is 2023-02-01 00:00:00
+      // Cache timestamp is 25 hours ago (beyond the default 24-hour expiry)
+      const twentyFiveHoursAgo =
+        new Date(2023, 1, 1, 0, 0, 0).getTime() - 25 * 60 * 60 * 1000;
+
+      LocalStorage.get.mockReturnValue({
+        data: { foo: 'bar' },
+        timestamp: twentyFiveHoursAgo,
+      });
+
+      const result = getFromCache('test-key');
+
+      expect(result).toBeNull();
+      expect(LocalStorage.get).toHaveBeenCalledWith('test-key');
+      expect(LocalStorage.remove).toHaveBeenCalledWith('test-key');
+    });
+
+    it('respects custom expiry time', () => {
+      // Current time is 2023-02-01 00:00:00
+      // Cache timestamp is 2 hours ago
+      const twoHoursAgo =
+        new Date(2023, 1, 1, 0, 0, 0).getTime() - 2 * 60 * 60 * 1000;
+
+      LocalStorage.get.mockReturnValue({
+        data: { foo: 'bar' },
+        timestamp: twoHoursAgo,
+      });
+
+      // Set expiry to 1 hour
+      const result = getFromCache('test-key', 60 * 60 * 1000);
+
+      expect(result).toBeNull();
+      expect(LocalStorage.get).toHaveBeenCalledWith('test-key');
+      expect(LocalStorage.remove).toHaveBeenCalledWith('test-key');
+    });
+
+    it('handles errors gracefully', () => {
+      LocalStorage.get.mockImplementation(() => {
+        throw new Error('Storage error');
+      });
+
+      const result = getFromCache('test-key');
+
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('setCache', () => {
+    it('stores data with timestamp', () => {
+      const data = { name: 'test' };
+      const expectedCacheData = {
+        data,
+        timestamp: new Date(2023, 1, 1, 0, 0, 0).getTime(),
+      };
+
+      setCache('test-key', data);
+
+      expect(LocalStorage.set).toHaveBeenCalledWith(
+        'test-key',
+        expectedCacheData
+      );
+    });
+
+    it('handles errors gracefully', () => {
+      LocalStorage.set.mockImplementation(() => {
+        throw new Error('Storage error');
+      });
+
+      // Should not throw
+      expect(() => setCache('test-key', { foo: 'bar' })).not.toThrow();
+    });
+  });
+
+  describe('clearCache', () => {
+    it('removes cached data', () => {
+      clearCache('test-key');
+
+      expect(LocalStorage.remove).toHaveBeenCalledWith('test-key');
+    });
+
+    it('handles errors gracefully', () => {
+      LocalStorage.remove.mockImplementation(() => {
+        throw new Error('Storage error');
+      });
+
+      // Should not throw
+      expect(() => clearCache('test-key')).not.toThrow();
+    });
+  });
+});

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;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    margin: 0 0 $space-micro $space-small;
-    max-width: 88%;
+    @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%];
 
     .avatar-wrap {
-      flex-shrink: 0;
-      height: $space-medium;
-      width: $space-medium;
+      @apply flex-shrink-0 h-6 w-6;
 
       .user-thumbnail-box {
-        margin-top: -$space-large;
+        @apply -mt-8;
       }
     }
 
     .message-wrap {
-      flex-grow: 1;
-      flex-shrink: 0;
-      margin-left: $space-small;
-      max-width: 90%;
+      @apply flex-grow flex-shrink-0 ltr:ml-2 rtl:mr-2 max-w-[90%];
     }
   }
 
@@ -42,10 +32,7 @@
   }
 
   .agent-name {
-    font-size: $font-size-small;
-    font-weight: $font-weight-medium;
-    margin: $space-small 0;
-    padding-left: $space-micro;
+    @apply text-xs font-medium my-2 ltr:pl-0.5 rtl:pr-0.5;
   }
 
   .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;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    margin: 0 $space-smaller $space-micro auto;
-    max-width: 85%;
-    text-align: right;
+    @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;
 
     .message-wrap {
-      margin-right: $space-small;
-      max-width: 100%;
+      @apply max-w-full ltr:mr-2 rtl:ml-2;
     }
 
-    .in-progress,
-    .is-failed {
+    .in-progress {
       opacity: 0.6;
     }
 
     .is-failed {
-      align-items: flex-end;
-      display: flex;
-      flex-direction: row-reverse;
+      @apply flex items-end flex-row-reverse;
 
       .chat-bubble.user {
-        background: $color-error !important;
-        // TODO: Remove the important
+        @apply bg-n-ruby-9 dark:bg-n-ruby-9 #{!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;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  margin-top: 0;
-  overflow-y: auto;
-  padding-bottom: $space-small;
-  width: 100%;
+  @apply flex flex-col flex-nowrap mt-0 overflow-y-auto w-full pb-2;
 
   .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;
-  text-align: right;
+  @apply ltr:text-right rtl:text-left overflow-hidden;
 
   .chat-bubble-wrap {
     .chat-bubble {
-      border-bottom-right-radius: $space-smaller;
-      border-radius: $space-two;
+      @apply ltr:rounded-br-[0.25rem] rtl:rounded-bl-[0.25rem] rounded-[1.25rem];
     }
 
     + .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;
-  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;
+  @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;
+
   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;
-    color: $color-body;
+    @apply ltr:rounded-bl-[0.25rem] rtl:rounded-br-[0.25rem] text-n-slate-12;
 
     .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;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  height: 100%;
+  @apply antialiased h-full;
 }
 
 .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="space-y-2">
+        <div class="flex w-full gap-1">
+          <div
+            class="space-y-2"
+            :class="{
+              'w-full':
+                contentType === 'form' &&
+                !messageContentAttributes?.submitted_values,
+            }"
+          >
             <AgentMessageBubble
               v-if="shouldDisplayAgentMessage"
               :content-type="contentType"
@@ -195,10 +195,8 @@ export default {
             />
             <div
               v-if="hasAttachments"
-              class="space-y-2 chat-bubble has-attachment agent"
-              :class="
-                (wrapClass, getThemeClass('bg-white', 'dark:bg-slate-700'))
-              "
+              class="space-y-2 chat-bubble has-attachment agent bg-n-background dark:bg-n-solid-3"
+              :class="wrapClass"
             >
               <div
                 v-for="attachment in message.attachments"
@@ -219,7 +217,11 @@ export default {
                   @error="onVideoLoadError"
                 />
 
-                <audio v-else-if="attachment.file_type === 'audio'" controls>
+                <audio
+                  v-else-if="attachment.file_type === 'audio'"
+                  controls
+                  class="h-10 dark:invert"
+                >
                   <source :src="attachment.data_url" />
                 </audio>
                 <FileBubble v-else :url="attachment.data_url" />
@@ -236,8 +238,7 @@ export default {
         <p
           v-if="message.showAvatar || hasRecordedResponse"
           v-dompurify-html="agentName"
-          class="agent-name"
-          :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
+          class="agent-name text-n-slate-11"
         />
       </div>
     </div>

app/javascript/widget/components/AgentMessageBubble.vue

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

app/javascript/widget/components/AgentTypingBubble.vue

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

app/javascript/widget/components/ArticleCardSkeletonLoader.vue

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