From 0722750a553409a7b82c92c840151514c58813ff Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 22 May 2026 12:16:19 +0530
Subject: [PATCH 1/2] chore: Captain reply actions not showing correctly with
 content (#14160)

---
 .../widgets/WootWriter/CopilotMenuBar.vue     | 22 +++------
 .../components/widgets/WootWriter/Editor.vue  | 48 ++++++++++---------
 .../widgets/WootWriter/ReplyTopPanel.vue      | 14 +++++-
 .../widgets/conversation/ReplyBox.vue         | 16 +++++++
 .../dashboard/helper/editorHelper.js          |  6 +--
 .../helper/specs/editorHelper.spec.js         | 27 +++++------
 6 files changed, 77 insertions(+), 56 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/WootWriter/CopilotMenuBar.vue b/app/javascript/dashboard/components/widgets/WootWriter/CopilotMenuBar.vue
index af9cc9f68..524d84ede 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/CopilotMenuBar.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/CopilotMenuBar.vue
@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { useElementSize, useWindowSize } from '@vueuse/core';
 import { useMapGetter } from 'dashboard/composables/store';
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
-import { useCaptain } from 'dashboard/composables/useCaptain';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
 
@@ -19,9 +18,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  editorContent: {
-    type: String,
-    default: undefined,
+  // Signature-aware emptiness is computed by the parent (which has access to
+  // the signature + channel context) and passed in as a boolean.
+  hasContent: {
+    type: Boolean,
+    default: false,
   },
   conversationId: {
     type: Number,
@@ -33,17 +34,8 @@ const emit = defineEmits(['executeCopilotAction']);
 
 const { t } = useI18n();
 
-const { draftMessage } = useCaptain();
-
 const replyMode = useMapGetter('draftMessages/getReplyEditorMode');
 
-// When editorContent prop is passed, use it exclusively (even if empty)
-// This ensures each editor instance shows menu items based on its own content
-// Falls back to global draftMessage only when editorContent is not provided
-const effectiveContent = computed(() =>
-  props.editorContent !== undefined ? props.editorContent : draftMessage.value
-);
-
 // Selection-based menu items (when text is selected)
 const menuItems = computed(() => {
   const items = [];
@@ -63,7 +55,7 @@ const menuItems = computed(() => {
   } else if (
     props.conversationId &&
     replyMode.value === REPLY_EDITOR_MODES.REPLY &&
-    effectiveContent.value
+    props.hasContent
   ) {
     items.push({
       label: t('INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.IMPROVE_REPLY'),
@@ -72,7 +64,7 @@ const menuItems = computed(() => {
     });
   }
 
-  if (effectiveContent.value) {
+  if (props.hasContent) {
     items.push(
       {
         label: t(
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index d7adb07d0..7881a0d25 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -354,16 +354,17 @@ function isBodyEmpty(content) {
   // if content is undefined, we assume that the body is empty
   if (!content) return true;
 
-  // if the signature is present, we need to remove it before checking
-  // note that we don't update the editorView, so this is safe
-  // Use effective channel type to match how signature was appended
-  const bodyWithoutSignature = props.signature
-    ? removeSignatureHelper(
-        content,
-        props.signature,
-        effectiveChannelType.value
-      )
-    : content;
+  // Only strip the signature when it's actually being auto-appended for this
+  // draft. Otherwise an agent whose typed text happens to match their saved
+  // signature would be mistakenly treated as empty.
+  const bodyWithoutSignature =
+    sendWithSignature.value && props.signature
+      ? removeSignatureHelper(
+          content,
+          props.signature,
+          effectiveChannelType.value
+        )
+      : content;
 
   // trimming should remove all the whitespaces, so we can check the length
   return bodyWithoutSignature.trim().length === 0;
@@ -474,17 +475,6 @@ function removeSignature() {
   reloadState(content);
 }
 
-function toggleSignatureInEditor(signatureEnabled) {
-  // The toggleSignatureInEditor gets the new value from the
-  // watcher, this means that if the value is true, the signature
-  // is supposed to be added, else we remove it.
-  if (signatureEnabled) {
-    addSignature();
-  } else {
-    removeSignature();
-  }
-}
-
 function setToolbarPosition() {
   const editorRect = editorRoot.value.getBoundingClientRect();
   const rect = selectedImageNode.value.getBoundingClientRect();
@@ -559,6 +549,20 @@ function emitOnChange() {
   emit('update:modelValue', contentFromEditor());
 }
 
+function toggleSignatureInEditor(signatureEnabled) {
+  // The toggleSignatureInEditor gets the new value from the
+  // watcher, this means that if the value is true, the signature
+  // is supposed to be added, else we remove it.
+  if (signatureEnabled) {
+    addSignature();
+  } else {
+    removeSignature();
+  }
+  // reloadState replaces editor state directly and bypasses dispatchTransaction,
+  // so v-model never hears about the signature change — sync it back explicitly.
+  emitOnChange();
+}
+
 function updateImgToolbarOnDelete() {
   // check if the selected node is present or not on keyup
   // this is needed because the user can select an image and then delete it
@@ -899,7 +903,7 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
       v-on-click-outside="handleClickOutside"
       :has-selection="isTextSelected"
       :is-editor-menu-popover="isEditorMenuPopover"
-      :editor-content="modelValue"
+      :has-content="!isBodyEmpty(modelValue)"
       :conversation-id="conversationId"
       :show-selection-menu="showSelectionMenu"
       :show-general-menu="false"
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index cdf577c21..a2929f7f8 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -53,6 +53,10 @@ export default {
       type: String,
       default: undefined,
     },
+    hasContent: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['setReplyMode', 'toggleEditorSize', 'executeCopilotAction'],
   setup(props, { emit }) {
@@ -76,6 +80,7 @@ export default {
 
     const { captainTasksEnabled } = useCaptain();
     const showCopilotMenu = ref(false);
+    const copilotToggleRef = ref(null);
 
     const handleCopilotAction = (actionKey, data) => {
       emit('executeCopilotAction', actionKey, data || props.editorContent);
@@ -117,6 +122,7 @@ export default {
       captainTasksEnabled,
       handleCopilotAction,
       showCopilotMenu,
+      copilotToggleRef,
       toggleCopilotMenu,
       handleClickOutside,
     };
@@ -164,6 +170,7 @@ export default {
     <div v-if="captainTasksEnabled" class="flex items-center gap-2">
       <div class="relative">
         <NextButton
+          ref="copilotToggleRef"
           ghost
           :disabled="disabled || isEditorDisabled"
           :class="{
@@ -176,9 +183,12 @@ export default {
         />
         <CopilotMenuBar
           v-if="showCopilotMenu"
-          v-on-click-outside="handleClickOutside"
+          v-on-click-outside="[
+            handleClickOutside,
+            { ignore: [copilotToggleRef] },
+          ]"
           :has-selection="false"
-          :editor-content="editorContent"
+          :has-content="hasContent"
           :conversation-id="conversationId"
           class="ltr:right-0 rtl:left-0 bottom-full mb-2"
           @execute-copilot-action="handleCopilotAction"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 75410a3c4..7f10190e6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -179,6 +179,21 @@ export default {
       }
       return true;
     },
+    hasMeaningfulEditorContent() {
+      const body = this.message || '';
+      // Only strip the signature when it's actually being auto-appended.
+      // If the toggle is off, the agent's text might happen to match their
+      // saved signature and we'd incorrectly treat it as empty.
+      const shouldStripSignature =
+        !this.isPrivate && this.sendWithSignature && !!this.messageSignature;
+      if (!shouldStripSignature) return !!body.trim();
+      const stripped = removeSignature(
+        body,
+        this.messageSignature,
+        getEffectiveChannelType(this.channelType, this.inbox?.medium || '')
+      );
+      return !!stripped.trim();
+    },
     isReplyRestricted() {
       return (
         !this.currentChat?.can_reply &&
@@ -1231,6 +1246,7 @@ export default {
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
       :characters-remaining="charactersRemaining"
       :editor-content="message"
+      :has-content="hasMeaningfulEditorContent"
       @set-reply-mode="setReplyMode"
       @toggle-editor-size="toggleEditorSize"
       @toggle-copilot="copilot.toggleEditor"
diff --git a/app/javascript/dashboard/helper/editorHelper.js b/app/javascript/dashboard/helper/editorHelper.js
index 491dd9d44..e4330b332 100644
--- a/app/javascript/dashboard/helper/editorHelper.js
+++ b/app/javascript/dashboard/helper/editorHelper.js
@@ -1,14 +1,14 @@
 import {
-  messageSchema,
-  MessageMarkdownTransformer,
   MessageMarkdownSerializer,
+  MessageMarkdownTransformer,
+  messageSchema,
   Selection,
 } from '@chatwoot/prosemirror-schema';
 import { replaceVariablesInMessage } from '@chatwoot/utils';
 import * as Sentry from '@sentry/vue';
+import camelcaseKeys from 'camelcase-keys';
 import { FORMATTING, MARKDOWN_PATTERNS } from 'dashboard/constants/editor';
 import { INBOX_TYPES, TWILIO_CHANNEL_MEDIUM } from 'dashboard/helper/inbox';
-import camelcaseKeys from 'camelcase-keys';
 
 /**
  * Extract text from markdown, and remove all images, code blocks, links, headers, bold, italic, lists etc.
diff --git a/app/javascript/dashboard/helper/specs/editorHelper.spec.js b/app/javascript/dashboard/helper/specs/editorHelper.spec.js
index c7822bde7..00d1e83d4 100644
--- a/app/javascript/dashboard/helper/specs/editorHelper.spec.js
+++ b/app/javascript/dashboard/helper/specs/editorHelper.spec.js
@@ -1,27 +1,26 @@
+import { EditorState, EditorView } from '@chatwoot/prosemirror-schema';
+import { FORMATTING } from 'dashboard/constants/editor';
+import { Schema } from 'prosemirror-model';
 import {
-  findSignatureInBody,
   appendSignature,
-  removeSignature,
-  replaceSignature,
+  calculateMenuPosition,
   cleanSignature,
+  collapseSelection,
   extractTextFromMarkdown,
-  stripUnsupportedMarkdown,
-  insertAtCursor,
   findNodeToInsertImage,
-  setURLWithQueryAndSize,
+  findSignatureInBody,
   getContentNode,
   getFormattingForEditor,
-  getSelectionCoords,
   getMenuAnchor,
-  calculateMenuPosition,
-  stripUnsupportedFormatting,
+  getSelectionCoords,
+  insertAtCursor,
+  removeSignature,
+  replaceSignature,
+  setURLWithQueryAndSize,
   stripInlineBase64Images,
-  collapseSelection,
+  stripUnsupportedFormatting,
+  stripUnsupportedMarkdown,
 } from '../editorHelper';
-import { FORMATTING } from 'dashboard/constants/editor';
-import { EditorState } from '@chatwoot/prosemirror-schema';
-import { EditorView } from '@chatwoot/prosemirror-schema';
-import { Schema } from 'prosemirror-model';
 
 // Define a basic ProseMirror schema
 const schema = new Schema({

From 4cdfe4168ca646d7f8a85b4fc8a85fce4994c08f Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <thanhkhoait@gmail.com>
Date: Fri, 22 May 2026 13:46:43 +0700
Subject: [PATCH 2/2] chore: resolve sass and vue compiler deprecation warnings
 (#13794)

---
 .../components-next/Editor/Editor.vue         | 36 +++++------
 .../Pages/ArticleEditorPage/ArticleEditor.vue | 62 +++++++++----------
 .../components-next/breadcrumb/Breadcrumb.vue |  1 -
 .../pageComponents/customTool/AuthConfig.vue  |  2 +-
 .../pageComponents/customTool/ParamRow.vue    |  2 +-
 .../colorpicker/ColorPicker.vue               |  2 +-
 .../dropdown-menu/DropdownMenu.vue            |  2 +-
 .../components-next/filter/ConditionRow.vue   |  2 +-
 .../filter/inputs/MultiSelect.vue             |  2 +-
 .../filter/inputs/SingleSelect.vue            |  2 +-
 .../dashboard/components-next/flag/Flag.vue   |  2 +-
 .../components-next/message/MessageList.vue   |  2 +-
 .../message/TranslationToggle.vue             |  2 -
 .../message/chips/AttachmentChips.vue         |  2 +-
 .../components/Accordion/AccordionItem.vue    |  1 -
 .../dashboard/components/CustomAttribute.vue  | 16 +++--
 .../components/IntersectionObserver.vue       |  2 +-
 app/javascript/dashboard/components/Modal.vue |  2 +-
 .../components/ui/Dropdown/DropdownSearch.vue |  1 -
 .../components/widgets/ColorPicker.vue        |  6 +-
 .../widgets/WootWriter/AudioRecorder.vue      |  2 +-
 .../widgets/WootWriter/ReplyBottomPanel.vue   |  2 +-
 .../linear/SearchableDropdown.vue             |  2 +-
 .../widgets/mentions/MentionBox.vue           |  2 +-
 .../components/MessageContextMenu.vue         | 10 ++-
 .../search/components/MessageContent.vue      |  4 +-
 .../components/SearchContactAgentSelector.vue |  2 +-
 .../components/SearchDateRangeSelector.vue    |  2 +-
 .../search/components/SearchFilters.vue       |  2 +-
 .../search/components/SearchHeader.vue        |  2 +-
 .../search/components/SearchInboxSelector.vue |  2 +-
 .../SearchResultConversationsList.vue         |  2 +-
 .../widget-preview/components/WidgetBody.vue  |  2 -
 .../dashboard/conversation/ContactPanel.vue   |  6 +-
 .../dashboard/settings/canned/AddCanned.vue   | 16 +++--
 .../dashboard/settings/canned/EditCanned.vue  | 16 +++--
 .../dashboard/settings/canned/Index.vue       |  2 +-
 .../component/CustomRolePaywall.vue           | 36 ++++++-----
 .../settings/inbox/PreChatForm/Settings.vue   |  6 +-
 .../inbox/channels/emailChannels/Google.vue   |  1 -
 .../channels/emailChannels/Microsoft.vue      |  1 -
 .../inbox/components/WeeklyAvailability.vue   |  2 +-
 .../inbox/settingsPage/ConfigurationPage.vue  |  2 +-
 .../settingsPage/CustomerSatisfactionPage.vue |  2 +-
 .../integrations/SingleIntegrationHooks.vue   |  1 -
 .../dashboard/settings/labels/AddLabel.vue    |  6 +-
 .../dashboard/settings/labels/EditLabel.vue   |  6 +-
 .../dashboard/settings/macros/MacroNode.vue   |  2 +-
 .../settings/macros/MacroProperties.vue       |  4 +-
 .../heatmaps/HeatmapDateRangeSelector.vue     |  2 +-
 .../routes/dashboard/upgrade/UpgradePage.vue  |  2 +-
 .../shared/components/StarRating.vue          |  2 +-
 .../components/ui/MultiselectDropdown.vue     |  2 +-
 .../components/ui/dropdown/DropdownItem.vue   |  8 +--
 app/javascript/v3/components/Form/Input.vue   |  2 +-
 .../widget/components/GroupedAvatars.vue      |  2 +-
 .../widget/components/UserMessageBubble.vue   |  8 +--
 .../Home/Article/ArticleBlock.vue             |  2 +-
 .../Home/Article/ArticleListItem.vue          |  1 -
 vite.config.ts                                |  7 +++
 60 files changed, 153 insertions(+), 179 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Editor/Editor.vue b/app/javascript/dashboard/components-next/Editor/Editor.vue
index 847bbd600..b12d0331a 100644
--- a/app/javascript/dashboard/components-next/Editor/Editor.vue
+++ b/app/javascript/dashboard/components-next/Editor/Editor.vue
@@ -142,29 +142,27 @@ watch(
 
 <style lang="scss" scoped>
 .editor-wrapper {
-  ::v-deep {
-    .ProseMirror-menubar-wrapper {
-      .ProseMirror.ProseMirror-woot-style {
-        p {
-          @apply first:mt-0 !important;
-        }
-
-        .empty-node {
-          @apply m-0 !important;
-
-          &::before {
-            @apply text-n-slate-11 dark:text-n-slate-11;
-          }
-        }
+  :deep(.ProseMirror-menubar-wrapper) {
+    .ProseMirror.ProseMirror-woot-style {
+      p {
+        @apply first:mt-0 !important;
       }
 
-      .ProseMirror-menubar {
-        width: fit-content !important;
-        position: relative !important;
-        top: unset !important;
-        @apply ltr:left-[-0.188rem] rtl:right-[-0.188rem] !important;
+      .empty-node {
+        @apply m-0 !important;
+
+        &::before {
+          @apply text-n-slate-11 dark:text-n-slate-11;
+        }
       }
     }
+
+    .ProseMirror-menubar {
+      width: fit-content !important;
+      position: relative !important;
+      top: unset !important;
+      @apply ltr:left-[-0.188rem] rtl:right-[-0.188rem] !important;
+    }
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
index 831312e0b..59c710a37 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
@@ -145,45 +145,43 @@ const handleCreateArticle = event => {
 </template>
 
 <style lang="scss" scoped>
-::v-deep {
-  .ProseMirror .empty-node::before {
-    @apply text-n-slate-10 text-base;
-  }
+:deep(.ProseMirror .empty-node::before) {
+  @apply text-n-slate-10 text-base;
+}
 
-  .ProseMirror-menubar-wrapper {
-    .ProseMirror-woot-style {
-      @apply min-h-[15rem] max-h-full;
-    }
+:deep(.ProseMirror-menubar-wrapper) {
+  .ProseMirror-woot-style {
+    @apply min-h-[15rem] max-h-full;
+  }
+}
+
+:deep(.ProseMirror-menubar) {
+  display: none; // Hide by default
+}
+
+:deep(.editor-root .has-selection) {
+  .ProseMirror-menubar:not(:has(*)) {
+    display: none !important;
   }
 
   .ProseMirror-menubar {
-    display: none; // Hide by default
-  }
+    @apply rounded-lg !px-3 !py-1.5 z-50 bg-n-background items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
+    display: flex;
+    top: var(--selection-top, auto) !important;
+    left: var(--selection-left, 0) !important;
+    width: fit-content !important;
+    position: absolute !important;
 
-  .editor-root .has-selection {
-    .ProseMirror-menubar:not(:has(*)) {
-      display: none !important;
+    .ProseMirror-menuitem {
+      @apply ltr:mr-0 rtl:ml-0 size-4 flex items-center;
+
+      .ProseMirror-icon {
+        @apply p-0.5 flex-shrink-0 ltr:mr-2 rtl:ml-2;
+      }
     }
 
-    .ProseMirror-menubar {
-      @apply rounded-lg !px-3 !py-1.5 z-50 bg-n-background items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
-      display: flex;
-      top: var(--selection-top, auto) !important;
-      left: var(--selection-left, 0) !important;
-      width: fit-content !important;
-      position: absolute !important;
-
-      .ProseMirror-menuitem {
-        @apply ltr:mr-0 rtl:ml-0 size-4 flex items-center;
-
-        .ProseMirror-icon {
-          @apply p-0.5 flex-shrink-0 ltr:mr-2 rtl:ml-2;
-        }
-      }
-
-      .ProseMirror-menu-active {
-        @apply bg-n-slate-3;
-      }
+    .ProseMirror-menu-active {
+      @apply bg-n-slate-3;
     }
   }
 }
diff --git a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
index 28c1af094..4e717d762 100644
--- a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
+++ b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { defineProps } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/customTool/AuthConfig.vue b/app/javascript/dashboard/components-next/captain/pageComponents/customTool/AuthConfig.vue
index 208a94dba..c1d54eeb6 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/customTool/AuthConfig.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/customTool/AuthConfig.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { defineModel, watch } from 'vue';
+import { watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Input from 'dashboard/components-next/input/Input.vue';
 
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/customTool/ParamRow.vue b/app/javascript/dashboard/components-next/captain/pageComponents/customTool/ParamRow.vue
index 33cd64468..2d812a60f 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/customTool/ParamRow.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/customTool/ParamRow.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, defineModel, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
diff --git a/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue b/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue
index 0e342def2..8d75306d9 100644
--- a/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue
+++ b/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, defineProps, defineEmits } from 'vue';
+import { ref } from 'vue';
 import { Chrome } from '@lk77/vue3-color';
 import { OnClickOutside } from '@vueuse/components';
 
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
index 7010ae3ac..8fa465704 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { defineProps, ref, defineEmits, computed, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
diff --git a/app/javascript/dashboard/components-next/filter/ConditionRow.vue b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
index 510ddbde3..cc620de32 100644
--- a/app/javascript/dashboard/components-next/filter/ConditionRow.vue
+++ b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, defineModel, h, watch, ref } from 'vue';
+import { computed, h, watch, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Button from 'next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
diff --git a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
index f64c8eb76..7e5eb185e 100644
--- a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { defineModel, computed } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Icon from 'next/icon/Icon.vue';
 import Button from 'next/button/Button.vue';
diff --git a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
index b66945c99..c9465aa12 100644
--- a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { defineModel, computed, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { picoSearch } from '@scmmishra/pico-search';
 import Icon from 'next/icon/Icon.vue';
diff --git a/app/javascript/dashboard/components-next/flag/Flag.vue b/app/javascript/dashboard/components-next/flag/Flag.vue
index 5868ce552..4b50bc10b 100644
--- a/app/javascript/dashboard/components-next/flag/Flag.vue
+++ b/app/javascript/dashboard/components-next/flag/Flag.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { h, defineProps } from 'vue';
+import { h } from 'vue';
 
 const props = defineProps({
   country: { type: String, required: true },
diff --git a/app/javascript/dashboard/components-next/message/MessageList.vue b/app/javascript/dashboard/components-next/message/MessageList.vue
index 7691ae246..a579208e8 100644
--- a/app/javascript/dashboard/components-next/message/MessageList.vue
+++ b/app/javascript/dashboard/components-next/message/MessageList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { defineProps, computed, reactive } from 'vue';
+import { computed, reactive } from 'vue';
 import Message from './Message.vue';
 import { MESSAGE_TYPES } from './constants.js';
 import { useCamelCase } from 'dashboard/composables/useTransformKeys';
diff --git a/app/javascript/dashboard/components-next/message/TranslationToggle.vue b/app/javascript/dashboard/components-next/message/TranslationToggle.vue
index 19b80dd9f..9c57f5aa2 100644
--- a/app/javascript/dashboard/components-next/message/TranslationToggle.vue
+++ b/app/javascript/dashboard/components-next/message/TranslationToggle.vue
@@ -1,6 +1,4 @@
 <script setup>
-import { defineProps, defineEmits } from 'vue';
-
 defineProps({
   showingOriginal: Boolean,
 });
diff --git a/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue b/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
index 4fd1d6428..0a3299d46 100644
--- a/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
+++ b/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, defineOptions, useAttrs } from 'vue';
+import { computed, useAttrs } from 'vue';
 
 import ImageChip from 'next/message/chips/Image.vue';
 import VideoChip from 'next/message/chips/Video.vue';
diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
index 8d65a471b..96fef9788 100644
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -1,6 +1,5 @@
 <script setup>
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
-import { defineEmits } from 'vue';
 
 defineProps({
   title: {
diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index 232cc9aac..5300bbbea 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -339,17 +339,15 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-::v-deep {
-  .selector-wrap {
-    @apply m-0 top-1;
+:deep(.selector-wrap) {
+  @apply m-0 top-1;
 
-    .selector-name {
-      @apply ml-0;
-    }
-  }
-
-  .name {
+  .selector-name {
     @apply ml-0;
   }
 }
+
+:deep(.name) {
+  @apply ml-0;
+}
 </style>
diff --git a/app/javascript/dashboard/components/IntersectionObserver.vue b/app/javascript/dashboard/components/IntersectionObserver.vue
index c650a8c0e..36135bd44 100644
--- a/app/javascript/dashboard/components/IntersectionObserver.vue
+++ b/app/javascript/dashboard/components/IntersectionObserver.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, defineEmits } from 'vue';
+import { ref } from 'vue';
 import { useIntersectionObserver } from '@vueuse/core';
 
 const { options } = defineProps({
diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index 136601c7c..c8a23bf95 100644
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -1,6 +1,6 @@
 <script setup>
 // [TODO] Use Teleport to move the modal to the end of the body
-import { ref, computed, defineEmits, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useEventListener } from '@vueuse/core';
 import Button from 'dashboard/components-next/button/Button.vue';
 
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue
index 6be49b99e..a8596897f 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { defineEmits, defineModel } from 'vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
diff --git a/app/javascript/dashboard/components/widgets/ColorPicker.vue b/app/javascript/dashboard/components/widgets/ColorPicker.vue
index 37637398e..a2daacc99 100644
--- a/app/javascript/dashboard/components/widgets/ColorPicker.vue
+++ b/app/javascript/dashboard/components/widgets/ColorPicker.vue
@@ -63,10 +63,8 @@ export default {
 .colorpicker--chrome.vc-chrome {
   @apply shadow-lg -mt-2.5 absolute z-[9999] border border-solid border-n-weak rounded;
 
-  ::v-deep {
-    input {
-      @apply bg-white dark:bg-white;
-    }
+  :deep(input) {
+    @apply bg-white dark:bg-white;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
index 924e72c53..b0428ecdb 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
@@ -1,6 +1,6 @@
 <script setup>
 import getUuid from 'widget/helpers/uuid';
-import { ref, onMounted, onUnmounted, defineEmits, defineExpose } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import WaveSurfer from 'wavesurfer.js';
 import RecordPlugin from 'wavesurfer.js/dist/plugins/record.js';
 import { format, intervalToDuration } from 'date-fns';
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index 2e5a9aab2..e4745595e 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -419,7 +419,7 @@ export default {
   @apply flex;
 }
 
-::v-deep .file-uploads {
+:deep(.file-uploads) {
   label {
     @apply cursor-pointer;
   }
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue b/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
index bce5f720a..32e180a97 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, defineOptions } from 'vue';
+import { ref, computed } from 'vue';
 import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
 import FilterListDropdown from 'dashboard/components/ui/Dropdown/DropdownList.vue';
 
diff --git a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
index dc00bdb4c..f6a6b7b28 100644
--- a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
+++ b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
@@ -121,7 +121,7 @@ const variableKey = (item = {}) => {
   }
 }
 
-.canned-item__button::v-deep .button__content {
+.canned-item__button :deep(.button__content) {
   @apply overflow-hidden text-ellipsis whitespace-nowrap;
 }
 </style>
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index b55949428..a100b379f 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -272,13 +272,11 @@ export default {
 }
 
 .context-menu--delete-modal {
-  ::v-deep {
-    .modal-container {
-      @apply max-w-[30rem];
+  :deep(.modal-container) {
+    @apply max-w-[30rem];
 
-      h2 {
-        @apply font-medium text-base;
-      }
+    h2 {
+      @apply font-medium text-base;
     }
   }
 }
diff --git a/app/javascript/dashboard/modules/search/components/MessageContent.vue b/app/javascript/dashboard/modules/search/components/MessageContent.vue
index 1c2d1c231..c75998771 100644
--- a/app/javascript/dashboard/modules/search/components/MessageContent.vue
+++ b/app/javascript/dashboard/modules/search/components/MessageContent.vue
@@ -104,12 +104,12 @@ const authorText = computed(() => {
 </template>
 
 <style scoped lang="scss">
-.message-content::v-deep p {
+.message-content :deep(p) {
   @apply inline;
   margin: 0;
 }
 
-.message-content::v-deep br {
+.message-content :deep(br) {
   display: none;
 }
 </style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchContactAgentSelector.vue b/app/javascript/dashboard/modules/search/components/SearchContactAgentSelector.vue
index 0227c8030..0f4119f6f 100644
--- a/app/javascript/dashboard/modules/search/components/SearchContactAgentSelector.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchContactAgentSelector.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, defineModel, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useToggle } from '@vueuse/core';
 import { vOnClickOutside } from '@vueuse/components';
diff --git a/app/javascript/dashboard/modules/search/components/SearchDateRangeSelector.vue b/app/javascript/dashboard/modules/search/components/SearchDateRangeSelector.vue
index 0f5902776..19aa3c8e6 100644
--- a/app/javascript/dashboard/modules/search/components/SearchDateRangeSelector.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchDateRangeSelector.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, defineModel } from 'vue';
+import { computed, ref } from 'vue';
 import { useToggle } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import { vOnClickOutside } from '@vueuse/components';
diff --git a/app/javascript/dashboard/modules/search/components/SearchFilters.vue b/app/javascript/dashboard/modules/search/components/SearchFilters.vue
index be5fa4d4c..2a44494ea 100644
--- a/app/javascript/dashboard/modules/search/components/SearchFilters.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchFilters.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, defineModel } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SearchDateRangeSelector from './SearchDateRangeSelector.vue';
 import SearchContactAgentSelector from './SearchContactAgentSelector.vue';
diff --git a/app/javascript/dashboard/modules/search/components/SearchHeader.vue b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
index 2e91d4279..08d4c0c7a 100644
--- a/app/javascript/dashboard/modules/search/components/SearchHeader.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, useTemplateRef, defineModel } from 'vue';
+import { ref, watch, useTemplateRef } from 'vue';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
 import { ROLES } from 'dashboard/constants/permissions';
diff --git a/app/javascript/dashboard/modules/search/components/SearchInboxSelector.vue b/app/javascript/dashboard/modules/search/components/SearchInboxSelector.vue
index c5bfe2d4d..581942183 100644
--- a/app/javascript/dashboard/modules/search/components/SearchInboxSelector.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchInboxSelector.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, defineModel } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useToggle } from '@vueuse/core';
 import { vOnClickOutside } from '@vueuse/components';
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
index c990dafcd..32d5b2047 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { defineProps, computed } from 'vue';
+import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store.js';
 
 import SearchResultSection from './SearchResultSection.vue';
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
index b2a1740b9..c2e6db0eb 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
@@ -1,6 +1,4 @@
 <script setup>
-import { defineProps } from 'vue';
-
 defineProps({
   config: {
     type: Object,
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index fe95f9e99..05bb9acab 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -317,9 +317,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-::v-deep {
-  .contact--profile {
-    @apply pb-3 border-b border-solid border-n-weak;
-  }
+:deep(.contact--profile) {
+  @apply pb-3 border-b border-solid border-n-weak;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
index 56caa2558..7fd23ebb1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
@@ -143,17 +143,15 @@ export default {
 </template>
 
 <style scoped lang="scss">
-::v-deep {
-  .ProseMirror-menubar {
-    @apply hidden;
-  }
+:deep(.ProseMirror-menubar) {
+  @apply hidden;
+}
 
-  .ProseMirror-woot-style {
-    @apply min-h-[12.5rem];
+:deep(.ProseMirror-woot-style) {
+  @apply min-h-[12.5rem];
 
-    p {
-      @apply text-base;
-    }
+  p {
+    @apply text-base;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
index d2c906511..7a570a300 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
@@ -147,17 +147,15 @@ export default {
 </template>
 
 <style scoped lang="scss">
-::v-deep {
-  .ProseMirror-menubar {
-    @apply hidden;
-  }
+:deep(.ProseMirror-menubar) {
+  @apply hidden;
+}
 
-  .ProseMirror-woot-style {
-    @apply min-h-[12.5rem];
+:deep(.ProseMirror-woot-style) {
+  @apply min-h-[12.5rem];
 
-    p {
-      @apply text-base;
-    }
+  p {
+    @apply text-base;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index 5c1810b63..1bc1ae392 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -4,7 +4,7 @@ import AddCanned from './AddCanned.vue';
 import EditCanned from './EditCanned.vue';
 import SettingsLayout from '../SettingsLayout.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
-import { computed, onMounted, ref, defineOptions } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
 import { picoSearch } from '@scmmishra/pico-search';
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRolePaywall.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRolePaywall.vue
index 90636dbde..4a3387fa2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRolePaywall.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRolePaywall.vue
@@ -74,23 +74,25 @@ const tableHeaders = computed(() => {
 
 <template>
   <div class="w-full min-h-[12rem] relative">
-    <div class="w-full space-y-3 text-sm">
-      <thead class="opacity-30 dark:opacity-30">
-        <th
-          v-for="thHeader in tableHeaders"
-          :key="thHeader"
-          class="py-4 ltr:pr-4 rtl:pl-4 text-start text-heading-3 text-n-slate-12"
-        >
-          <span class="mb-0">
-            {{ thHeader }}
-          </span>
-        </th>
-      </thead>
-      <CustomRoleListItem
-        class="opacity-25 dark:opacity-20"
-        :roles="dummyCustomRolesData"
-        :loading="{}"
-      />
+    <div class="w-full space-y-3 text-sm overflow-x-auto">
+      <table class="min-w-full">
+        <thead class="opacity-30 dark:opacity-30">
+          <tr>
+            <th
+              v-for="thHeader in tableHeaders"
+              :key="thHeader"
+              class="py-4 ltr:pr-4 rtl:pl-4 text-start text-heading-3 text-n-slate-12"
+            >
+              <span class="mb-0">
+                {{ thHeader }}
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="opacity-25 dark:opacity-20">
+          <CustomRoleListItem :roles="dummyCustomRolesData" :loading="{}" />
+        </tbody>
+      </table>
     </div>
     <div
       class="absolute inset-0 flex flex-col items-center justify-center w-full h-full bg-gradient-to-t from-white dark:from-slate-900 to-transparent"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
index 7f6ac7fe1..626971081 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
@@ -156,10 +156,8 @@ onMounted(() => {
 .message-editor {
   @apply px-3;
 
-  ::v-deep {
-    .ProseMirror-menubar {
-      @apply rounded-tl-[4px];
-    }
+  :deep(.ProseMirror-menubar) {
+    @apply rounded-tl-[4px];
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue
index a5c16fa57..e49d98423 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue
@@ -1,6 +1,5 @@
 <script setup>
 import OAuthChannel from './OAuthChannel.vue';
-import { defineOptions } from 'vue';
 
 defineOptions({
   name: 'GoogleOAuthChannel',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue
index 53cf5ccc7..5ae456d14 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue
@@ -1,6 +1,5 @@
 <script setup>
 import OAuthChannel from './OAuthChannel.vue';
-import { defineOptions } from 'vue';
 
 defineOptions({
   name: 'MicrosoftOAuthChannel',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
index a5a43496a..62c420048 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
@@ -227,7 +227,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-::v-deep.message-editor {
+:deep(.message-editor) {
   @apply border-0;
 }
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
index 9cd1665bf..8beaea489 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
@@ -446,7 +446,7 @@ export default {
 
 <style lang="scss" scoped>
 .whatsapp-settings--content {
-  ::v-deep input {
+  :deep(input) {
     margin-bottom: 0;
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue
index d955883eb..335378d32 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, onMounted, ref, defineProps, watch, computed } from 'vue';
+import { reactive, onMounted, ref, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
index 405656542..14fec4996 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { defineProps, defineEmits } from 'vue';
 import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
 import { useBranding } from 'shared/composables/useBranding';
 import Button from 'dashboard/components-next/button/Button.vue';
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
index c49537d35..ab5ec70a4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
@@ -132,10 +132,8 @@ export default {
 <style lang="scss" scoped>
 // Label API supports only lowercase letters
 .label-name--input {
-  ::v-deep {
-    input {
-      @apply lowercase;
-    }
+  :deep(input) {
+    @apply lowercase;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
index ccc1685be..e3d13f7f8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
@@ -135,10 +135,8 @@ export default {
 <style lang="scss" scoped>
 // Label API supports only lowercase letters
 .label-name--input {
-  ::v-deep {
-    input {
-      @apply lowercase;
-    }
+  :deep(input) {
+    @apply lowercase;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
index 687a14285..3614cd344 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, inject, defineModel } from 'vue';
+import { computed, inject } from 'vue';
 import { useMacros } from 'dashboard/composables/useMacros';
 import { useI18n } from 'vue-i18n';
 import ActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
index d19637bc0..8363c9af8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
@@ -163,11 +163,11 @@ export default {
 </template>
 
 <style scoped lang="scss">
-::v-deep input[type='text'] {
+:deep(input[type='text']) {
   @apply mb-0;
 }
 
-::v-deep .error {
+:deep(.error) {
   .message {
     @apply mb-0;
   }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/heatmaps/HeatmapDateRangeSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/heatmaps/HeatmapDateRangeSelector.vue
index 9e9021e93..20a58a4a7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/heatmaps/HeatmapDateRangeSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/heatmaps/HeatmapDateRangeSelector.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch, defineModel } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useToggle } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import addMonths from 'date-fns/addMonths';
diff --git a/app/javascript/dashboard/routes/dashboard/upgrade/UpgradePage.vue b/app/javascript/dashboard/routes/dashboard/upgrade/UpgradePage.vue
index a650aac37..fd55213ea 100644
--- a/app/javascript/dashboard/routes/dashboard/upgrade/UpgradePage.vue
+++ b/app/javascript/dashboard/routes/dashboard/upgrade/UpgradePage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed, defineExpose, defineProps } from 'vue';
+import { onMounted, computed } from 'vue';
 import { useStore } from 'dashboard/composables/store';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useRouter } from 'vue-router';
diff --git a/app/javascript/shared/components/StarRating.vue b/app/javascript/shared/components/StarRating.vue
index a7139638e..b3b11d4fb 100644
--- a/app/javascript/shared/components/StarRating.vue
+++ b/app/javascript/shared/components/StarRating.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, defineProps, defineEmits } from 'vue';
+import { ref } from 'vue';
 
 const props = defineProps({
   selectedRating: {
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index fe3a1e3d6..b06aef852 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, defineEmits } from 'vue';
+import { computed } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
 import { useToggle } from '@vueuse/core';
 
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
index ad2783f3a..6acd76f85 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
@@ -26,11 +26,9 @@ export default {
 
 <style lang="scss" scoped>
 .dropdown-menu__item {
-  ::v-deep {
-    a,
-    .button {
-      @apply inline-flex whitespace-nowrap w-full text-left rtl:text-right;
-    }
+  :deep(a),
+  :deep(.button) {
+    @apply inline-flex whitespace-nowrap w-full text-left rtl:text-right;
   }
 }
 
diff --git a/app/javascript/v3/components/Form/Input.vue b/app/javascript/v3/components/Form/Input.vue
index 8e719808f..48e842189 100644
--- a/app/javascript/v3/components/Form/Input.vue
+++ b/app/javascript/v3/components/Form/Input.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { defineProps, defineModel, computed } from 'vue';
+import { computed } from 'vue';
 import { useToggle } from '@vueuse/core';
 
 import Button from 'dashboard/components-next/button/Button.vue';
diff --git a/app/javascript/widget/components/GroupedAvatars.vue b/app/javascript/widget/components/GroupedAvatars.vue
index 14d375a03..25325ff5c 100644
--- a/app/javascript/widget/components/GroupedAvatars.vue
+++ b/app/javascript/widget/components/GroupedAvatars.vue
@@ -1,6 +1,6 @@
 <script setup>
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import { defineProps, computed } from 'vue';
+import { computed } from 'vue';
 
 const props = defineProps({
   users: {
diff --git a/app/javascript/widget/components/UserMessageBubble.vue b/app/javascript/widget/components/UserMessageBubble.vue
index 766a0bd2e..d4179b8b8 100755
--- a/app/javascript/widget/components/UserMessageBubble.vue
+++ b/app/javascript/widget/components/UserMessageBubble.vue
@@ -37,12 +37,12 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-.chat-bubble.user::v-deep {
-  p code {
+.chat-bubble.user {
+  :deep(p code) {
     @apply bg-n-alpha-2 dark:bg-n-alpha-1 text-white;
   }
 
-  pre {
+  :deep(pre) {
     @apply text-white bg-n-alpha-2 dark:bg-n-alpha-1;
 
     code {
@@ -50,7 +50,7 @@ export default {
     }
   }
 
-  blockquote {
+  :deep(blockquote) {
     @apply bg-transparent border-n-slate-7 ltr:border-l-2 rtl:border-r-2 border-solid;
 
     p {
diff --git a/app/javascript/widget/components/pageComponents/Home/Article/ArticleBlock.vue b/app/javascript/widget/components/pageComponents/Home/Article/ArticleBlock.vue
index 8890c6327..7f4f8df7d 100644
--- a/app/javascript/widget/components/pageComponents/Home/Article/ArticleBlock.vue
+++ b/app/javascript/widget/components/pageComponents/Home/Article/ArticleBlock.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { defineProps, defineEmits, computed } from 'vue';
+import { computed } from 'vue';
 import ArticleListItem from './ArticleListItem.vue';
 import { useMapGetter } from 'dashboard/composables/store';
 
diff --git a/app/javascript/widget/components/pageComponents/Home/Article/ArticleListItem.vue b/app/javascript/widget/components/pageComponents/Home/Article/ArticleListItem.vue
index a3912c3e2..ddb0828f0 100644
--- a/app/javascript/widget/components/pageComponents/Home/Article/ArticleListItem.vue
+++ b/app/javascript/widget/components/pageComponents/Home/Article/ArticleListItem.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { defineProps, defineEmits } from 'vue';
 const props = defineProps({
   link: {
     type: String,
diff --git a/vite.config.ts b/vite.config.ts
index 17d47fc76..5c3fee26b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -45,6 +45,13 @@ if (isLibraryMode) {
 
 export default defineConfig({
   plugins: plugins,
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
   build: {
     rollupOptions: {
       output: {