Merge branch 'develop' into chore-replace-router-mixin

# Pull Request Template

## Description

Replaces darkModeMixin with the new useDarkMode composable and replaces
wll usages of mixin the the composable in components and pages

Fixes
https://linear.app/chatwoot/issue/CW-3474/rewrite-darkmodemixin-mixin-to-a-composable

## Type of change

Please delete options that are not relevant.

- [x] New feature (non-breaking change which adds functionality)

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

Gemfile

@@ -96,12 +96,12 @@ gem 'koala'
 # slack client
 gem 'slack-ruby-client', '~> 2.2.0'
 # for dialogflow integrations
-gem 'google-cloud-dialogflow-v2'
+gem 'google-cloud-dialogflow-v2', '>= 0.24.0'
 gem 'grpc'
 # Translate integrations
 # 'google-cloud-translate' gem depends on faraday 2.0 version
 # this dependency breaks the slack-ruby-client gem
-gem 'google-cloud-translate-v3'
+gem 'google-cloud-translate-v3', '>= 0.7.0'
 
 ##-- apm and error monitoring ---#
 # loaded only when environment variables are set.
@@ -165,7 +165,7 @@ gem 'audited', '~> 5.4', '>= 5.4.1'
 
 # need for google auth
 gem 'omniauth', '>= 2.1.2'
-gem 'omniauth-google-oauth2', '>= 1.1.2'
+gem 'omniauth-google-oauth2', '>= 1.1.3'
 gem 'omniauth-rails_csrf_protection', '~> 1.0', '>= 1.0.2'
 
 ## Gems for reponse bot
@@ -200,7 +200,7 @@ group :development do
   gem 'rack-mini-profiler', '>= 3.2.0', require: false
   gem 'stackprof'
   # Should install the associated chrome extension to view query logs
-  gem 'meta_request', '>= 0.8.0'
+  gem 'meta_request', '>= 0.8.3'
 end
 
 group :test do

Gemfile.lock

@@ -257,7 +257,7 @@ GEM
     faraday-net_http_persistent (2.1.0)
       faraday (~> 2.5)
       net-http-persistent (~> 4.0)
-    faraday-retry (2.1.0)
+    faraday-retry (2.2.1)
       faraday (~> 2.0)
     fcm (1.0.8)
       faraday (>= 1.0.0, < 3.0)
@@ -271,7 +271,7 @@ GEM
     fugit (1.11.1)
       et-orbi (~> 1, >= 1.2.11)
       raabro (~> 1.4)
-    gapic-common (0.18.0)
+    gapic-common (0.20.0)
       faraday (>= 1.9, < 3.a)
       faraday-retry (>= 1.0, < 3.a)
       google-protobuf (~> 3.14)
@@ -301,15 +301,15 @@ GEM
     google-cloud-core (1.6.0)
       google-cloud-env (~> 1.0)
       google-cloud-errors (~> 1.0)
-    google-cloud-dialogflow-v2 (0.23.0)
-      gapic-common (>= 0.18.0, < 2.a)
+    google-cloud-dialogflow-v2 (0.31.0)
+      gapic-common (>= 0.20.0, < 2.a)
       google-cloud-errors (~> 1.0)
       google-cloud-location (>= 0.4, < 2.a)
     google-cloud-env (1.6.0)
       faraday (>= 0.17.3, < 3.0)
     google-cloud-errors (1.3.1)
-    google-cloud-location (0.4.0)
-      gapic-common (>= 0.17.1, < 2.a)
+    google-cloud-location (0.6.0)
+      gapic-common (>= 0.20.0, < 2.a)
       google-cloud-errors (~> 1.0)
     google-cloud-storage (1.44.0)
       addressable (~> 2.8)
@@ -319,17 +319,17 @@ GEM
       google-cloud-core (~> 1.6)
       googleauth (>= 0.16.2, < 2.a)
       mini_mime (~> 1.0)
-    google-cloud-translate-v3 (0.6.0)
-      gapic-common (>= 0.17.1, < 2.a)
+    google-cloud-translate-v3 (0.10.0)
+      gapic-common (>= 0.20.0, < 2.a)
       google-cloud-errors (~> 1.0)
     google-protobuf (3.25.3)
     google-protobuf (3.25.3-arm64-darwin)
     google-protobuf (3.25.3-x86_64-darwin)
     google-protobuf (3.25.3-x86_64-linux)
-    googleapis-common-protos (1.4.0)
-      google-protobuf (~> 3.14)
-      googleapis-common-protos-types (~> 1.2)
-      grpc (~> 1.27)
+    googleapis-common-protos (1.6.0)
+      google-protobuf (>= 3.18, < 5.a)
+      googleapis-common-protos-types (~> 1.7)
+      grpc (~> 1.41)
     googleapis-common-protos-types (1.14.0)
       google-protobuf (~> 3.18)
     googleauth (1.5.2)
@@ -457,7 +457,7 @@ GEM
     marcel (1.0.4)
     maxminddb (0.1.22)
     memoist (0.16.2)
-    meta_request (0.8.2)
+    meta_request (0.8.3)
       rack-contrib (>= 1.1, < 3)
       railties (>= 3.0.0, < 8)
     method_source (1.1.0)
@@ -522,7 +522,7 @@ GEM
       hashie (>= 3.4.6)
       rack (>= 2.2.3)
       rack-protection
-    omniauth-google-oauth2 (1.1.2)
+    omniauth-google-oauth2 (1.1.3)
       jwt (>= 2.0)
       oauth2 (~> 2.0)
       omniauth (~> 2.0)
@@ -881,9 +881,9 @@ DEPENDENCIES
   foreman
   geocoder
   gmail_xoauth
-  google-cloud-dialogflow-v2
+  google-cloud-dialogflow-v2 (>= 0.24.0)
   google-cloud-storage
-  google-cloud-translate-v3
+  google-cloud-translate-v3 (>= 0.7.0)
   groupdate
   grpc
   haikunator
@@ -903,14 +903,14 @@ DEPENDENCIES
   listen
   lograge (~> 0.14.0)
   maxminddb
-  meta_request (>= 0.8.0)
+  meta_request (>= 0.8.3)
   mock_redis
   neighbor
   net-smtp (~> 0.3.4)
   newrelic-sidekiq-metrics (>= 1.6.2)
   newrelic_rpm
   omniauth (>= 2.1.2)
-  omniauth-google-oauth2 (>= 1.1.2)
+  omniauth-google-oauth2 (>= 1.1.3)
   omniauth-oauth2
   omniauth-rails_csrf_protection (~> 1.0, >= 1.0.2)
   pg

app/builders/account_builder.rb

@@ -94,8 +94,8 @@ class AccountBuilder
 
   def blocked_domains
     domains = GlobalConfigService.load('BLOCKED_EMAIL_DOMAINS', '')
-    domains.split("\n").map(&:strip) if domains.present?
+    return [] if domains.blank?
 
-    []
+    domains.split("\n").map(&:strip)
   end
 end

app/controllers/api/v1/accounts/upload_controller.rb

@@ -1,13 +1,68 @@
 class Api::V1::Accounts::UploadController < Api::V1::Accounts::BaseController
   def create
-    file_blob = ActiveStorage::Blob.create_and_upload!(
-      key: nil,
-      io: params[:attachment].tempfile,
-      filename: params[:attachment].original_filename,
-      content_type: params[:attachment].content_type
-    )
-    file_blob.save!
+    result = if params[:attachment].present?
+               create_from_file
+             elsif params[:external_url].present?
+               create_from_url
+             else
+               render_error('No file or URL provided', :unprocessable_entity)
+             end
 
+    render_success(result) if result.is_a?(ActiveStorage::Blob)
+  end
+
+  private
+
+  def create_from_file
+    attachment = params[:attachment]
+    create_and_save_blob(attachment.tempfile, attachment.original_filename, attachment.content_type)
+  end
+
+  def create_from_url
+    uri = parse_uri(params[:external_url])
+    return if performed?
+
+    fetch_and_process_file_from_uri(uri)
+  end
+
+  def parse_uri(url)
+    uri = URI.parse(url)
+    validate_uri(uri)
+    uri
+  rescue URI::InvalidURIError, SocketError
+    render_error('Invalid URL provided', :unprocessable_entity)
+    nil
+  end
+
+  def validate_uri(uri)
+    raise URI::InvalidURIError unless uri.is_a?(URI::HTTP) || uri.is_a?(URI::HTTPS)
+  end
+
+  def fetch_and_process_file_from_uri(uri)
+    uri.open do |file|
+      create_and_save_blob(file, File.basename(uri.path), file.content_type)
+    end
+  rescue OpenURI::HTTPError => e
+    render_error("Failed to fetch file from URL: #{e.message}", :unprocessable_entity)
+  rescue SocketError
+    render_error('Invalid URL provided', :unprocessable_entity)
+  rescue StandardError
+    render_error('An unexpected error occurred', :internal_server_error)
+  end
+
+  def create_and_save_blob(io, filename, content_type)
+    ActiveStorage::Blob.create_and_upload!(
+      io: io,
+      filename: filename,
+      content_type: content_type
+    )
+  end
+
+  def render_success(file_blob)
     render json: { file_url: url_for(file_blob), blob_key: file_blob.key, blob_id: file_blob.id }
   end
+
+  def render_error(message, status)
+    render json: { error: message }, status: status
+  end
 end

app/javascript/dashboard/components/ChatList.vue

@@ -117,35 +117,41 @@ export default {
         lastConversationIndex,
       };
     };
-    const handlePreviousConversation = () => {
-      const { allConversations, activeConversationIndex } =
-        getKeyboardListenerParams();
-      if (activeConversationIndex === -1) {
-        allConversations[0].click();
-      }
-      if (activeConversationIndex >= 1) {
-        allConversations[activeConversationIndex - 1].click();
-      }
-    };
-    const handleNextConversation = () => {
+    const handleConversationNavigation = direction => {
       const {
         allConversations,
         activeConversationIndex,
         lastConversationIndex,
       } = getKeyboardListenerParams();
-      if (activeConversationIndex === -1) {
-        allConversations[lastConversationIndex].click();
-      } else if (activeConversationIndex < lastConversationIndex) {
-        allConversations[activeConversationIndex + 1].click();
+
+      // Determine the new index based on the direction
+      const newIndex =
+        direction === 'previous'
+          ? activeConversationIndex - 1
+          : activeConversationIndex + 1;
+
+      // Check if the new index is within the valid range
+      if (
+        allConversations.length > 0 &&
+        newIndex >= 0 &&
+        newIndex <= lastConversationIndex
+      ) {
+        // Click the conversation at the new index
+        allConversations[newIndex].click();
+      } else if (allConversations.length > 0) {
+        // If the new index is out of range, click the first or last conversation based on the direction
+        const fallbackIndex =
+          direction === 'previous' ? 0 : lastConversationIndex;
+        allConversations[fallbackIndex].click();
       }
     };
     const keyboardEvents = {
       'Alt+KeyJ': {
-        action: () => handlePreviousConversation(),
+        action: () => handleConversationNavigation('previous'),
         allowOnFocusedInput: true,
       },
       'Alt+KeyK': {
-        action: () => handleNextConversation(),
+        action: () => handleConversationNavigation('next'),
         allowOnFocusedInput: true,
       },
     };

app/javascript/dashboard/components/CustomAttribute.vue

@@ -331,10 +331,12 @@ export default {
 ::v-deep {
   .selector-wrap {
     @apply m-0 top-1;
+
     .selector-name {
       @apply ml-0;
     }
   }
+
   .name {
     @apply ml-0;
   }

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

@@ -1,38 +1,34 @@
-<script>
-export default {
-  props: {
-    text: {
-      type: String,
-      default: '',
-    },
-    limit: {
-      type: Number,
-      default: 120,
-    },
-  },
-  data() {
-    return {
-      showMore: false,
-    };
-  },
-  computed: {
-    textToBeDisplayed() {
-      if (this.showMore || this.text.length <= this.limit) {
-        return this.text;
-      }
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
 
-      return this.text.slice(0, this.limit) + '...';
-    },
-    buttonLabel() {
-      const i18nKey = !this.showMore ? 'SHOW_MORE' : 'SHOW_LESS';
-      return this.$t(`COMPONENTS.SHOW_MORE_BLOCK.${i18nKey}`);
-    },
+const props = defineProps({
+  text: {
+    type: String,
+    default: '',
   },
-  methods: {
-    toggleShowMore() {
-      this.showMore = !this.showMore;
-    },
+  limit: {
+    type: Number,
+    default: 120,
   },
+});
+const { t } = useI18n();
+const showMore = ref(false);
+
+const textToBeDisplayed = computed(() => {
+  if (showMore.value || props.text.length <= props.limit) {
+    return props.text;
+  }
+
+  return props.text.slice(0, props.limit) + '...';
+});
+const buttonLabel = computed(() => {
+  const i18nKey = !showMore.value ? 'SHOW_MORE' : 'SHOW_LESS';
+  return t(`COMPONENTS.SHOW_MORE_BLOCK.${i18nKey}`);
+});
+
+const toggleShowMore = () => {
+  showMore.value = !showMore.value;
 };
 </script>
 
@@ -41,16 +37,10 @@ export default {
     {{ textToBeDisplayed }}
     <button
       v-if="text.length > limit"
-      class="show-more--button"
+      class="text-woot-500 !p-0 !border-0 align-top"
       @click="toggleShowMore"
     >
       {{ buttonLabel }}
     </button>
   </span>
 </template>
-
-<style scoped>
-.show-more--button {
-  color: var(--w-500);
-}
-</style>

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

@@ -17,6 +17,8 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
 import TagAgents from '../conversation/TagAgents.vue';
 import CannedResponse from '../conversation/CannedResponse.vue';
 import VariableList from '../conversation/VariableList.vue';
+import KeyboardEmojiSelector from './keyboardEmojiSelector.vue';
+
 import {
   appendSignature,
   removeSignature,
@@ -24,6 +26,7 @@ import {
   scrollCursorIntoView,
   findNodeToInsertImage,
   setURLWithQueryAndSize,
+  getContentNode,
 } from 'dashboard/helper/editorHelper';
 
 const TYPING_INDICATOR_IDLE_TIME = 4000;
@@ -35,10 +38,8 @@ import {
 } from 'shared/helpers/KeyboardHelpers';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import { useUISettings } from 'dashboard/composables/useUISettings';
-import {
-  replaceVariablesInMessage,
-  createTypingIndicator,
-} from '@chatwoot/utils';
+
+import { createTypingIndicator } from '@chatwoot/utils';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
@@ -71,7 +72,12 @@ const createState = (
 
 export default {
   name: 'WootMessageEditor',
-  components: { TagAgents, CannedResponse, VariableList },
+  components: {
+    TagAgents,
+    CannedResponse,
+    VariableList,
+    KeyboardEmojiSelector,
+  },
   mixins: [keyboardEventListenerMixins],
   props: {
     value: { type: String, default: '' },
@@ -119,9 +125,11 @@ export default {
       showUserMentions: false,
       showCannedMenu: false,
       showVariables: false,
+      showEmojiMenu: false,
       mentionSearchKey: '',
       cannedSearchTerm: '',
       variableSearchTerm: '',
+      emojiSearchTerm: '',
       editorView: null,
       range: null,
       state: undefined,
@@ -169,7 +177,7 @@ export default {
             this.editorView = args.view;
             this.range = args.range;
 
-            this.mentionSearchKey = args.text.replace('@', '');
+            this.mentionSearchKey = args.text;
 
             return false;
           },
@@ -198,7 +206,7 @@ export default {
             this.editorView = args.view;
             this.range = args.range;
 
-            this.cannedSearchTerm = args.text.replace('/', '');
+            this.cannedSearchTerm = args.text;
             return false;
           },
           onExit: () => {
@@ -226,7 +234,7 @@ export default {
             this.editorView = args.view;
             this.range = args.range;
 
-            this.variableSearchTerm = args.text.replace('{{', '');
+            this.variableSearchTerm = args.text;
             return false;
           },
           onExit: () => {
@@ -238,6 +246,31 @@ export default {
             return event.keyCode === 13 && this.showVariables;
           },
         }),
+        suggestionsPlugin({
+          matcher: triggerCharacters(':', 1), // Trigger after ':' and at least 1 characters
+          suggestionClass: '',
+          onEnter: args => {
+            this.showEmojiMenu = true;
+            this.emojiSearchTerm = args.text || '';
+            this.range = args.range;
+            this.editorView = args.view;
+            return false;
+          },
+          onChange: args => {
+            this.editorView = args.view;
+            this.range = args.range;
+            this.emojiSearchTerm = args.text;
+            return false;
+          },
+          onExit: () => {
+            this.emojiSearchTerm = '';
+            this.showEmojiMenu = false;
+            return false;
+          },
+          onKeyDown: ({ event }) => {
+            return event.keyCode === 13 && this.showEmojiMenu;
+          },
+        }),
       ];
     },
     sendWithSignature() {
@@ -267,6 +300,8 @@ export default {
     },
     editorId() {
       this.showCannedMenu = false;
+      this.showEmojiMenu = false;
+      this.showVariables = false;
       this.cannedSearchTerm = '';
       this.reloadState(this.value);
     },
@@ -517,57 +552,36 @@ export default {
       this.editorView.dispatch(tr.setSelection(selection));
       this.editorView.focus();
     },
-    insertMentionNode(mentionItem) {
+    /**
+     * Inserts special content (mention, canned response, variable, emoji) into the editor.
+     * @param {string} type - The type of special content to insert. Possible values: 'mention', 'canned_response', 'variable', 'emoji'.
+     * @param {Object|string} content - The content to insert, depending on the type.
+     */
+    insertSpecialContent(type, content) {
       if (!this.editorView) {
-        return null;
-      }
-      const node = this.editorView.state.schema.nodes.mention.create({
-        userId: mentionItem.id,
-        userFullName: mentionItem.name,
-      });
-
-      this.insertNodeIntoEditor(node, this.range.from, this.range.to);
-      this.$track(CONVERSATION_EVENTS.USED_MENTIONS);
-
-      return false;
-    },
-    insertCannedResponse(cannedItem) {
-      const updatedMessage = replaceVariablesInMessage({
-        message: cannedItem,
-        variables: this.variables,
-      });
-
-      if (!this.editorView) {
-        return null;
+        return;
       }
 
-      let node = new MessageMarkdownTransformer(messageSchema).parse(
-        updatedMessage
+      let { node, from, to } = getContentNode(
+        this.editorView,
+        type,
+        content,
+        this.range,
+        this.variables
       );
 
-      const from =
-        node.textContent === updatedMessage
-          ? this.range.from
-          : this.range.from - 1;
-
-      this.insertNodeIntoEditor(node, from, this.range.to);
-
-      this.$track(CONVERSATION_EVENTS.INSERTED_A_CANNED_RESPONSE);
-      return false;
-    },
-    insertVariable(variable) {
-      if (!this.editorView) {
-        return null;
-      }
-
-      const content = `{{${variable}}}`;
-      let node = this.editorView.state.schema.text(content);
-      const { from, to } = this.range;
+      if (!node) return;
 
       this.insertNodeIntoEditor(node, from, to);
-      this.showVariables = false;
-      this.$track(CONVERSATION_EVENTS.INSERTED_A_VARIABLE);
-      return false;
+
+      const event_map = {
+        mention: CONVERSATION_EVENTS.USED_MENTIONS,
+        cannedResponse: CONVERSATION_EVENTS.INSERTED_A_CANNED_RESPONSE,
+        variable: CONVERSATION_EVENTS.INSERTED_A_VARIABLE,
+        emoji: CONVERSATION_EVENTS.INSERTED_AN_EMOJI,
+      };
+
+      this.$track(event_map[type]);
     },
     openFileBrowser() {
       this.$refs.imageUpload.click();
@@ -687,17 +701,22 @@ export default {
     <TagAgents
       v-if="showUserMentions && isPrivate"
       :search-key="mentionSearchKey"
-      @click="insertMentionNode"
+      @click="content => insertSpecialContent('mention', content)"
     />
     <CannedResponse
       v-if="shouldShowCannedResponses"
       :search-key="cannedSearchTerm"
-      @click="insertCannedResponse"
+      @click="content => insertSpecialContent('cannedResponse', content)"
     />
     <VariableList
       v-if="shouldShowVariables"
       :search-key="variableSearchTerm"
-      @click="insertVariable"
+      @click="content => insertSpecialContent('variable', content)"
+    />
+    <KeyboardEmojiSelector
+      v-if="showEmojiMenu"
+      :search-key="emojiSearchTerm"
+      @click="emoji => insertSpecialContent('emoji', emoji)"
     />
     <input
       ref="imageUpload"

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

@@ -8,6 +8,7 @@ import {
   EditorState,
   Selection,
 } from '@chatwoot/prosemirror-schema';
+import imagePastePlugin from '@chatwoot/prosemirror-schema/src/plugins/image';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -55,7 +56,7 @@ export default {
     return {
       editorView: null,
       state: undefined,
-      plugins: [],
+      plugins: [imagePastePlugin(this.handleImageUpload)],
     };
   },
   computed: {
@@ -76,6 +77,7 @@ export default {
       this.reloadState();
     },
   },
+
   created() {
     this.state = createState(
       this.value,
@@ -95,6 +97,24 @@ export default {
     openFileBrowser() {
       this.$refs.imageUploadInput.click();
     },
+    async handleImageUpload(url) {
+      try {
+        const fileUrl = await this.$store.dispatch(
+          'articles/uploadExternalImage',
+          {
+            portalSlug: this.$route.params.portalSlug,
+            url,
+          }
+        );
+
+        return fileUrl;
+      } catch (error) {
+        useAlert(
+          this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.UN_AUTHORIZED_ERROR')
+        );
+        return '';
+      }
+    },
     onFileChange() {
       const file = this.$refs.imageUploadInput.files[0];
 
@@ -152,45 +172,6 @@ export default {
       this.editorView.updateState(this.state);
       this.focusEditorInputField();
     },
-    insertImage(src, alt = '') {
-      const { selection } = this.editorView.state;
-      const from = selection.from;
-      const node = this.editorView.state.schema.nodes.image.create({
-        src,
-        alt,
-      });
-      const paragraphNode = this.editorView.state.schema.node('paragraph');
-
-      if (node) {
-        const tr = this.editorView.state.tr
-          .replaceSelectionWith(paragraphNode)
-          .insert(from + 1, node);
-
-        this.editorView.dispatch(tr.scrollIntoView());
-        this.focusEditorInputField();
-      }
-    },
-    handlePastedText(text, view) {
-      const markdownImageRegex = /!\[([^\]]*)\]\(([^)]+)\)/g;
-      let match;
-      let lastIndex = 0;
-      while ((match = markdownImageRegex.exec(text)) !== null) {
-        // Insert text before the image
-        if (match.index > lastIndex) {
-          const textBefore = text.slice(lastIndex, match.index);
-          view.dispatch(view.state.tr.insertText(textBefore));
-        }
-        // // Insert the image
-        const [, alt, src] = match;
-        this.insertImage(src, alt);
-        lastIndex = markdownImageRegex.lastIndex;
-      }
-      // Insert any remaining text after the last image
-      if (lastIndex < text.length) {
-        const remainingText = text.slice(lastIndex);
-        view.dispatch(view.state.tr.insertText(remainingText));
-      }
-    },
     createEditorView() {
       this.editorView = new EditorView(this.$refs.editor, {
         state: this.state,
@@ -212,17 +193,14 @@ export default {
             this.onBlur();
           },
           paste: (view, event) => {
-            const clipboardData = event.clipboardData;
-            const pastedText = clipboardData.getData('text/plain');
-            const files = clipboardData.files;
-
-            if (files.length > 0) {
-              // Handle direct image file paste
-              files.forEach(file => this.uploadImageToStorage(file));
-              event.preventDefault();
-            } else if (pastedText) {
-              // Handle potential markdown image links
-              this.handlePastedText(pastedText, view);
+            const data = event.clipboardData.files;
+            if (data.length > 0) {
+              data.forEach(file => {
+                // Check if the file is an image
+                if (file.type.includes('image')) {
+                  this.uploadImageToStorage(file);
+                }
+              });
               event.preventDefault();
             }
           },

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

@@ -0,0 +1,68 @@
+<script setup>
+import { shallowRef, computed, onMounted } from 'vue';
+import emojis from 'shared/components/emoji/emojisGroup.json';
+import MentionBox from '../mentions/MentionBox.vue';
+
+const props = defineProps({
+  searchKey: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['click']);
+
+const allEmojis = shallowRef([]);
+
+const items = computed(() => {
+  if (!props.searchKey) return [];
+  const searchTerm = props.searchKey.toLowerCase();
+  return allEmojis.value.filter(emoji =>
+    emoji.searchString.includes(searchTerm)
+  );
+});
+
+function loadEmojis() {
+  allEmojis.value = emojis.flatMap(group =>
+    group.emojis.map(emoji => ({
+      ...emoji,
+      searchString: `${emoji.slug} ${emoji.name}`.toLowerCase(),
+    }))
+  );
+}
+
+function handleMentionClick(item = {}) {
+  emit('click', item.emoji);
+}
+
+onMounted(() => {
+  loadEmojis();
+});
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <MentionBox
+    v-if="items.length"
+    type="emoji"
+    :items="items"
+    @mentionSelect="handleMentionClick"
+  >
+    <template #default="{ item, selected }">
+      <span
+        class="max-w-full inline-flex items-center gap-0.5 min-w-0 mb-0 text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 truncate"
+      >
+        {{ item.emoji }}
+        <p
+          class="relative mb-0 truncate bottom-px"
+          :class="{
+            'text-woot-500 dark:text-woot-500': selected,
+            'font-normal': !selected,
+          }"
+        >
+          :{{ item.slug }}
+        </p>
+      </span>
+    </template>
+  </MentionBox>
+</template>

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

@@ -41,14 +41,11 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <MentionBox
     v-if="items.length"
     :items="items"
     @mentionSelect="handleMentionClick"
-  >
-    <template slot-scope="{ item }">
-      <strong>{{ item.label }}</strong> - {{ item.description }}
-    </template>
-  </MentionBox>
+  />
 </template>

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

@@ -338,7 +338,11 @@ export default {
           :show-query-operator="i !== appliedFilters.length - 1"
           :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
           grouped-filters
-          :error-message="validationErrors[`filter_${i}`]"
+          :error-message="
+            validationErrors[`filter_${i}`]
+              ? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
+              : ''
+          "
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"
         />

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

@@ -237,6 +237,9 @@ export default {
       if (this.isASmsInbox) {
         return MESSAGE_MAX_LENGTH.TWILIO_SMS;
       }
+      if (this.isAnEmailChannel) {
+        return MESSAGE_MAX_LENGTH.EMAIL;
+      }
       return MESSAGE_MAX_LENGTH.GENERAL;
     },
     showFileUpload() {

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

@@ -56,20 +56,14 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <MentionBox
     v-if="items.length"
     type="variable"
     :items="items"
     @mentionSelect="handleVariableClick"
-  >
-    <template slot-scope="{ item }">
-      <span class="text-capitalize variable--list-label">
-        {{ item.description }}
-      </span>
-      ({{ item.label }})
-    </template>
-  </MentionBox>
+  />
 </template>
 
 <style scoped>

app/javascript/dashboard/components/widgets/mentions/MentionBox.vue

@@ -90,22 +90,24 @@ const variableKey = (item = {}) => {
           }"
           @click="onListItemSelection(index)"
         >
-          <p
-            class="max-w-full min-w-0 mb-0 overflow-hidden text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
-            :class="{
-              'text-woot-500 dark:text-woot-500': index === selectedIndex,
-            }"
-          >
-            {{ item.description }}
-          </p>
-          <p
-            class="max-w-full min-w-0 mb-0 overflow-hidden text-xs text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
-            :class="{
-              'text-woot-500 dark:text-woot-500': index === selectedIndex,
-            }"
-          >
-            {{ variableKey(item) }}
-          </p>
+          <slot :item="item" :index="index" :selected="index === selectedIndex">
+            <p
+              class="max-w-full min-w-0 mb-0 overflow-hidden text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
+              :class="{
+                'text-woot-500 dark:text-woot-500': index === selectedIndex,
+              }"
+            >
+              {{ item.description }}
+            </p>
+            <p
+              class="max-w-full min-w-0 mb-0 overflow-hidden text-xs text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
+              :class="{
+                'text-woot-500 dark:text-woot-500': index === selectedIndex,
+              }"
+            >
+              {{ variableKey(item) }}
+            </p>
+          </slot>
         </button>
       </woot-dropdown-item>
     </ul>

app/javascript/dashboard/helper/AnalyticsHelper/events.js

@@ -5,6 +5,7 @@ export const CONVERSATION_EVENTS = Object.freeze({
   INSERTED_A_CANNED_RESPONSE: 'Inserted a canned response',
   TRANSLATE_A_MESSAGE: 'Translated a message',
   INSERTED_A_VARIABLE: 'Inserted a variable',
+  INSERTED_AN_EMOJI: 'Inserted an emoji',
   USED_MENTIONS: 'Used mentions',
   SEARCH_CONVERSATION: 'Searched conversations',
   APPLY_FILTER: 'Applied filters in the conversation list',

app/javascript/dashboard/helper/editorHelper.js

@@ -3,6 +3,8 @@ import {
   MessageMarkdownTransformer,
   MessageMarkdownSerializer,
 } from '@chatwoot/prosemirror-schema';
+import { replaceVariablesInMessage } from '@chatwoot/utils';
+
 import * as Sentry from '@sentry/browser';
 
 /**
@@ -281,3 +283,92 @@ export function setURLWithQueryAndSize(selectedImageNode, size, editorView) {
     }
   }
 }
+
+/**
+ * Content Node Creation Helper Functions for
+ * - mention
+ * - canned response
+ * - variable
+ * - emoji
+ */
+
+/**
+ * Centralized node creation function that handles the creation of different types of nodes based on the specified type.
+ * @param {Object} editorView - The editor view instance.
+ * @param {string} nodeType - The type of node to create ('mention', 'cannedResponse', 'variable', 'emoji').
+ * @param {Object|string} content - The content needed to create the node, which varies based on node type.
+ * @returns {Object|null} - The created ProseMirror node or null if the type is not supported.
+ */
+const createNode = (editorView, nodeType, content) => {
+  const { state } = editorView;
+  switch (nodeType) {
+    case 'mention':
+      return state.schema.nodes.mention.create({
+        userId: content.id,
+        userFullName: content.name,
+      });
+    case 'cannedResponse':
+      return new MessageMarkdownTransformer(messageSchema).parse(content);
+    case 'variable':
+      return state.schema.text(`{{${content}}}`);
+    case 'emoji':
+      return state.schema.text(content);
+    default:
+      return null;
+  }
+};
+
+/**
+ * Object mapping types to their respective node creation functions.
+ */
+const nodeCreators = {
+  mention: (editorView, content, from, to) => ({
+    node: createNode(editorView, 'mention', content),
+    from,
+    to,
+  }),
+  cannedResponse: (editorView, content, from, to, variables) => {
+    const updatedMessage = replaceVariablesInMessage({
+      message: content,
+      variables,
+    });
+    const node = createNode(editorView, 'cannedResponse', updatedMessage);
+    return {
+      node,
+      from: node.textContent === updatedMessage ? from : from - 1,
+      to,
+    };
+  },
+  variable: (editorView, content, from, to) => ({
+    node: createNode(editorView, 'variable', content),
+    from,
+    to,
+  }),
+  emoji: (editorView, content, from, to) => ({
+    node: createNode(editorView, 'emoji', content),
+    from,
+    to,
+  }),
+};
+
+/**
+ * Retrieves a content node based on the specified type and content, using a functional approach to select the appropriate node creation function.
+ * @param {Object} editorView - The editor view instance.
+ * @param {string} type - The type of content node to create ('mention', 'cannedResponse', 'variable', 'emoji').
+ * @param {string|Object} content - The content to be transformed into a node.
+ * @param {Object} range - An object containing 'from' and 'to' properties indicating the range in the document where the node should be placed.
+ * @param {Object} variables - Optional. Variables to replace in the content, used for 'cannedResponse' type.
+ * @returns {Object} - An object containing the created node and the updated 'from' and 'to' positions.
+ */
+export const getContentNode = (
+  editorView,
+  type,
+  content,
+  { from, to },
+  variables
+) => {
+  const creator = nodeCreators[type];
+  return creator
+    ? creator(editorView, content, from, to, variables)
+    : { node: null, from, to };
+};

app/javascript/dashboard/helper/featureHelper.js

@@ -17,6 +17,7 @@ const FEATURE_HELP_URLS = {
   reports: 'https://chwt.app/hc/reports',
   sla: 'https://chwt.app/hc/sla',
   team_management: 'https://chwt.app/hc/teams',
+  webhook: 'https://chwt.app/hc/webhooks',
 };
 
 export function getHelpUrlForFeature(featureName) {

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

@@ -0,0 +1,127 @@
+// Moved from editorHelper.spec.js to editorContentHelper.spec.js
+// the mock of chatwoot/prosemirror-schema is getting conflicted with other specs
+import { getContentNode } from '../editorHelper';
+import {
+  MessageMarkdownTransformer,
+  messageSchema,
+} from '@chatwoot/prosemirror-schema';
+import { replaceVariablesInMessage } from '@chatwoot/utils';
+
+vi.mock('@chatwoot/prosemirror-schema', () => ({
+  MessageMarkdownTransformer: vi.fn(),
+  messageSchema: {},
+}));
+
+vi.mock('@chatwoot/utils', () => ({
+  replaceVariablesInMessage: vi.fn(),
+}));
+
+describe('getContentNode', () => {
+  let editorView;
+
+  beforeEach(() => {
+    editorView = {
+      state: {
+        schema: {
+          nodes: {
+            mention: {
+              create: vi.fn(),
+            },
+          },
+          text: vi.fn(),
+        },
+      },
+    };
+  });
+
+  describe('getMentionNode', () => {
+    it('should create a mention node', () => {
+      const content = { id: 1, name: 'John Doe' };
+      const from = 0;
+      const to = 10;
+      getContentNode(editorView, 'mention', content, {
+        from,
+        to,
+      });
+
+      expect(editorView.state.schema.nodes.mention.create).toHaveBeenCalledWith(
+        {
+          userId: content.id,
+          userFullName: content.name,
+        }
+      );
+    });
+  });
+
+  describe('getCannedResponseNode', () => {
+    it('should create a canned response node', () => {
+      const content = 'Hello {{name}}';
+      const variables = { name: 'John' };
+      const from = 0;
+      const to = 10;
+      const updatedMessage = 'Hello John';
+
+      replaceVariablesInMessage.mockReturnValue(updatedMessage);
+      MessageMarkdownTransformer.mockImplementation(() => ({
+        parse: vi.fn().mockReturnValue({ textContent: updatedMessage }),
+      }));
+
+      const { node } = getContentNode(
+        editorView,
+        'cannedResponse',
+        content,
+        { from, to },
+        variables
+      );
+
+      expect(replaceVariablesInMessage).toHaveBeenCalledWith({
+        message: content,
+        variables,
+      });
+      expect(MessageMarkdownTransformer).toHaveBeenCalledWith(messageSchema);
+      expect(node.textContent).toBe(updatedMessage);
+    });
+  });
+
+  describe('getVariableNode', () => {
+    it('should create a variable node', () => {
+      const content = 'name';
+      const from = 0;
+      const to = 10;
+      getContentNode(editorView, 'variable', content, {
+        from,
+        to,
+      });
+
+      expect(editorView.state.schema.text).toHaveBeenCalledWith('{{name}}');
+    });
+  });
+
+  describe('getEmojiNode', () => {
+    it('should create an emoji node', () => {
+      const content = '😊';
+      const from = 0;
+      const to = 2;
+      getContentNode(editorView, 'emoji', content, {
+        from,
+        to,
+      });
+
+      expect(editorView.state.schema.text).toHaveBeenCalledWith('😊');
+    });
+  });
+
+  describe('getContentNode', () => {
+    it('should return null for invalid type', () => {
+      const content = 'invalid';
+      const from = 0;
+      const to = 10;
+      const { node } = getContentNode(editorView, 'invalid', content, {
+        from,
+        to,
+      });
+
+      expect(node).toBeNull();
+    });
+  });
+});

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

@@ -1,52 +1,93 @@
-import { uploadFile } from '../uploadHelper';
 import axios from 'axios';
+import { uploadExternalImage, uploadFile } from '../uploadHelper';
 
 global.axios = axios;
 vi.mock('axios');
 
-describe('#Upload Helpers', () => {
+describe('Upload Helpers', () => {
   afterEach(() => {
-    // Cleaning up the mock after each test
     axios.post.mockReset();
   });
 
-  it('should send a POST request with correct data', async () => {
-    const mockFile = new File(['dummy content'], 'example.png', {
-      type: 'image/png',
+  describe('uploadFile', () => {
+    it('should send a POST request with correct data', async () => {
+      const mockFile = new File(['dummy content'], 'example.png', {
+        type: 'image/png',
+      });
+      const mockResponse = {
+        data: {
+          file_url: 'https://example.com/fileUrl',
+          blob_key: 'blobKey123',
+          blob_id: 'blobId456',
+        },
+      };
+
+      axios.post.mockResolvedValueOnce(mockResponse);
+
+      const result = await uploadFile(mockFile, '1602');
+
+      expect(axios.post).toHaveBeenCalledWith(
+        '/api/v1/accounts/1602/upload',
+        expect.any(FormData),
+        { headers: { 'Content-Type': 'multipart/form-data' } }
+      );
+
+      expect(result).toEqual({
+        fileUrl: 'https://example.com/fileUrl',
+        blobKey: 'blobKey123',
+        blobId: 'blobId456',
+      });
     });
-    const mockResponse = {
-      data: {
-        file_url: 'https://example.com/fileUrl',
-        blob_key: 'blobKey123',
-        blob_id: 'blobId456',
-      },
-    };
 
-    axios.post.mockResolvedValueOnce(mockResponse);
+    it('should handle errors', async () => {
+      const mockFile = new File(['dummy content'], 'example.png', {
+        type: 'image/png',
+      });
+      const mockError = new Error('Failed to upload');
 
-    const result = await uploadFile(mockFile, '1602');
+      axios.post.mockRejectedValueOnce(mockError);
 
-    expect(axios.post).toHaveBeenCalledWith(
-      '/api/v1/accounts/1602/upload',
-      expect.any(FormData),
-      { headers: { 'Content-Type': 'multipart/form-data' } }
-    );
-
-    expect(result).toEqual({
-      fileUrl: 'https://example.com/fileUrl',
-      blobKey: 'blobKey123',
-      blobId: 'blobId456',
+      await expect(uploadFile(mockFile)).rejects.toThrow('Failed to upload');
     });
   });
 
-  it('should handle errors', async () => {
-    const mockFile = new File(['dummy content'], 'example.png', {
-      type: 'image/png',
+  describe('uploadExternalImage', () => {
+    it('should send a POST request with correct data', async () => {
+      const mockUrl = 'https://example.com/image.jpg';
+      const mockResponse = {
+        data: {
+          file_url: 'https://example.com/fileUrl',
+          blob_key: 'blobKey123',
+          blob_id: 'blobId456',
+        },
+      };
+
+      axios.post.mockResolvedValueOnce(mockResponse);
+
+      const result = await uploadExternalImage(mockUrl, '1602');
+
+      expect(axios.post).toHaveBeenCalledWith(
+        '/api/v1/accounts/1602/upload',
+        { external_url: mockUrl },
+        { headers: { 'Content-Type': 'application/json' } }
+      );
+
+      expect(result).toEqual({
+        fileUrl: 'https://example.com/fileUrl',
+        blobKey: 'blobKey123',
+        blobId: 'blobId456',
+      });
     });
-    const mockError = new Error('Failed to upload');
 
-    axios.post.mockRejectedValueOnce(mockError);
+    it('should handle errors', async () => {
+      const mockUrl = 'https://example.com/image.jpg';
+      const mockError = new Error('Failed to upload');
 
-    await expect(uploadFile(mockFile)).rejects.toThrow('Failed to upload');
+      axios.post.mockRejectedValueOnce(mockError);
+
+      await expect(uploadExternalImage(mockUrl)).rejects.toThrow(
+        'Failed to upload'
+      );
+    });
   });
 });

app/javascript/dashboard/helper/uploadHelper.js

@@ -19,26 +19,47 @@ const HEADERS = {
  * The function uses FormData to wrap the file and axios to send the request.
  *
  * @param {File} file - The file to be uploaded. It should be a File object (typically coming from a file input element).
+ * @param {string} accountId - The account ID.
  * @returns {Promise} A promise that resolves with the server's response when the upload is successful, or rejects if there's an error.
  */
 export async function uploadFile(file, accountId) {
-  // Create a new FormData instance.
-  let formData = new FormData();
-
   if (!accountId) {
     accountId = window.location.pathname.split('/')[3];
   }
 
   // Append the file to the FormData instance under the key 'attachment'.
+  let formData = new FormData();
   formData.append('attachment', file);
 
-  // Use axios to send a POST request to the upload endpoint.
   const { data } = await axios.post(
     `/api/${API_VERSION}/accounts/${accountId}/upload`,
     formData,
-    {
-      headers: HEADERS,
-    }
+    { headers: HEADERS }
+  );
+
+  return {
+    fileUrl: data.file_url,
+    blobKey: data.blob_key,
+    blobId: data.blob_id,
+  };
+}
+
+/**
+ * Uploads an image from an external URL.
+ *
+ * @param {string} url - The external URL of the image.
+ * @param {string} accountId - The account ID.
+ * @returns {Promise} A promise that resolves with the server's response.
+ */
+export async function uploadExternalImage(url, accountId) {
+  if (!accountId) {
+    accountId = window.location.pathname.split('/')[3];
+  }
+
+  const { data } = await axios.post(
+    `/api/${API_VERSION}/accounts/${accountId}/upload`,
+    { external_url: url },
+    { headers: { 'Content-Type': 'application/json' } }
   );
 
   return {

app/javascript/dashboard/i18n/locale/en/advancedFilters.json

@@ -55,6 +55,9 @@
       "CREATED_AT": "Created at",
       "LAST_ACTIVITY": "Last activity"
     },
+    "ERRORS": {
+      "VALUE_REQUIRED": "Value is required"
+    },
     "GROUPS": {
       "STANDARD_FILTERS": "Standard filters",
       "ADDITIONAL_FILTERS": "Additional filters",

app/javascript/dashboard/i18n/locale/en/attributesMgmt.json

@@ -3,7 +3,8 @@
     "HEADER": "Custom Attributes",
     "HEADER_BTN_TXT": "Add Custom Attribute",
     "LOADING": "Fetching custom attributes",
-    "SIDEBAR_TXT": "<p><b>Custom Attributes</b> <p>A custom attribute tracks facts about your contacts/conversation — like the subscription plan, or when they ordered the first item etc. <br /><br />For creating a Custom Attribute, just click on the <b>Add Custom Attribute.</b> You can also edit or delete an existing  Custom Attribute by clicking on the Edit or Delete button.</p>",
+    "DESCRIPTION": "A custom attribute tracks additional details about your contacts or conversations—such as the subscription plan or the date of their first purchase. You can add different types of custom attributes, such as text, lists, or numbers, to capture the specific information you need.",
+    "LEARN_MORE": "Learn more about custom attributes",
     "ADD": {
       "TITLE": "Add Custom Attribute",
       "SUBMIT": "Create",
@@ -91,7 +92,12 @@
       "CONTACT": "Contact"
     },
     "LIST": {
-      "TABLE_HEADER": ["Name", "Description", "Type", "Key"],
+      "TABLE_HEADER": [
+        "Name",
+        "Description",
+        "Type",
+        "Key"
+      ],
       "BUTTONS": {
         "EDIT": "Edit",
         "DELETE": "Delete"

app/javascript/dashboard/i18n/locale/en/contactFilters.json

@@ -30,6 +30,9 @@
       "is_lesser_than": "Is lesser than",
       "days_before": "Is x days before"
     },
+    "ERRORS": {
+      "VALUE_REQUIRED": "Value is required"
+    },
     "ATTRIBUTES": {
       "NAME": "Name",
       "EMAIL": "Email",

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

@@ -41,6 +41,7 @@
         "UPLOADING": "Uploading...",
         "SUCCESS": "Image uploaded successfully",
         "ERROR": "Error while uploading image",
+        "UN_AUTHORIZED_ERROR": "You are not authorized to upload images",
         "ERROR_FILE_SIZE": "Image size should be less than {size}MB",
         "ERROR_FILE_FORMAT": "Image format should be jpg, jpeg or png",
         "ERROR_FILE_DIMENSIONS": "Image dimensions should be less than 2000 x 2000"

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

@@ -12,6 +12,7 @@
     },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
+      "LEARN_MORE": "Learn more about webhooks",
       "FORM": {
         "CANCEL": "Cancel",
         "DESC": "Webhook events provide you the realtime information about what's happening in your Chatwoot account. Please enter a valid URL to configure a callback.",

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue

@@ -308,7 +308,11 @@ export default {
           :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
           :show-query-operator="i !== appliedFilters.length - 1"
           :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
-          :error-message="validationErrors[`filter_${i}`]"
+          :error-message="
+            validationErrors[`filter_${i}`]
+              ? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
+              : ''
+          "
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"
         />

app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue

@@ -22,17 +22,21 @@ defineProps({
 <template>
   <div class="flex flex-col w-full h-full gap-10 font-inter">
     <slot name="header" />
-    <slot v-if="isLoading" name="loading">
-      <woot-loading-state :message="loadingMessage" />
-    </slot>
-    <p
-      v-else-if="noRecordsFound"
-      class="flex-1 text-slate-700 dark:text-slate-100 flex items-center justify-center text-base"
-    >
-      {{ noRecordsMessage }}
-    </p>
-    <slot v-else name="body" />
-    <!-- Do not delete the slot below. It is required to render anything that is not defined in the above slots. -->
-    <slot />
+    <!-- Added to render any templates that should be rendered before body -->
+    <div>
+      <slot name="preBody" />
+      <slot v-if="isLoading" name="loading">
+        <woot-loading-state :message="loadingMessage" />
+      </slot>
+      <p
+        v-else-if="noRecordsFound"
+        class="flex-1 text-slate-700 dark:text-slate-100 flex items-center justify-center text-base"
+      >
+        {{ noRecordsMessage }}
+      </p>
+      <slot v-else name="body" />
+      <!-- Do not delete the slot below. It is required to render anything that is not defined in the above slots. -->
+      <slot />
+    </div>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue

@@ -12,6 +12,12 @@ export default {
       type: Function,
       default: () => {},
     },
+    // Passes 0 or 1 based on the selected AttributeModel tab selected in the UI
+    // Needs a better data type, todo: refactor this component later
+    selectedAttributeModelTab: {
+      type: Number,
+      default: 0,
+    },
   },
   setup() {
     return { v$: useVuelidate() };
@@ -20,7 +26,10 @@ export default {
     return {
       displayName: '',
       description: '',
-      attributeModel: 0,
+      // Using the prop as default. There is no side effect here as the component
+      // is destroyed completely when the modal is closed. The prop doesn't change
+      // dynamically when the modal is active.
+      attributeModel: this.selectedAttributeModelTab || 0,
       attributeType: 0,
       attributeKey: '',
       regexPattern: null,
@@ -280,13 +289,16 @@ export default {
   padding: 0 var(--space-small) var(--space-small) 0;
   font-family: monospace;
 }
+
 .multiselect--wrap {
   margin-bottom: var(--space-normal);
+
   .error-message {
     color: var(--r-400);
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-normal);
   }
+
   .invalid {
     ::v-deep {
       .multiselect__tags {
@@ -295,13 +307,16 @@ export default {
     }
   }
 }
+
 ::v-deep {
   .multiselect {
     margin-bottom: 0;
   }
+
   .multiselect__content-wrapper {
     display: none;
   }
+
   .multiselect--active .multiselect__tags {
     border-radius: var(--border-radius-normal);
   }

app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue

@@ -1,195 +1,141 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
 import { useAlert } from 'dashboard/composables';
 import EditAttribute from './EditAttribute.vue';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { computed, ref } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+const props = defineProps({
+  attributeModel: {
+    type: String,
+    default: 'conversation_attribute',
+  },
+});
 
-export default {
-  components: {
-    EditAttribute,
-  },
-  data() {
-    return {
-      selectedTabIndex: 0,
-      showEditPopup: false,
-      showDeletePopup: false,
-      selectedAttribute: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'attributes/getUIFlags',
-    }),
-    attributes() {
-      const attributeModel = this.selectedTabIndex
-        ? 'contact_attribute'
-        : 'conversation_attribute';
+const { t } = useI18n();
 
-      return this.$store.getters['attributes/getAttributesByModel'](
-        attributeModel
-      );
-    },
-    tabs() {
-      return [
-        {
-          key: 0,
-          name: this.$t('ATTRIBUTES_MGMT.TABS.CONVERSATION'),
-        },
-        {
-          key: 1,
-          name: this.$t('ATTRIBUTES_MGMT.TABS.CONTACT'),
-        },
-      ];
-    },
-    deleteConfirmText() {
-      return `${this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.YES')} ${
-        this.selectedAttribute.attribute_display_name
-      }`;
-    },
-    deleteRejectText() {
-      return this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.NO');
-    },
-    confirmDeleteTitle() {
-      return this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.TITLE', {
-        attributeName: this.selectedAttribute.attribute_display_name,
-      });
-    },
-    confirmPlaceHolderText() {
-      return `${this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
-        attributeName: this.selectedAttribute.attribute_display_name,
-      })}`;
-    },
-  },
-  mounted() {
-    this.fetchAttributes(this.selectedTabIndex);
-  },
-  methods: {
-    onClickTabChange(index) {
-      this.selectedTabIndex = index;
-      this.fetchAttributes(index);
-    },
-    fetchAttributes(index) {
-      this.$store.dispatch('attributes/get', index);
-    },
-    async deleteAttributes({ id }) {
-      try {
-        await this.$store.dispatch('attributes/delete', id);
-        useAlert(this.$t('ATTRIBUTES_MGMT.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        const errorMessage =
-          error?.response?.message ||
-          this.$t('ATTRIBUTES_MGMT.DELETE.API.ERROR_MESSAGE');
-        useAlert(errorMessage);
-      }
-    },
-    openEditPopup(response) {
-      this.showEditPopup = true;
-      this.selectedAttribute = response;
-    },
-    hideEditPopup() {
-      this.showEditPopup = false;
-    },
-    confirmDeletion() {
-      this.deleteAttributes(this.selectedAttribute);
-      this.closeDelete();
-    },
-    openDelete(value) {
-      this.showDeletePopup = true;
-      this.selectedAttribute = value;
-    },
-    closeDelete() {
-      this.showDeletePopup = false;
-      this.selectedAttribute = {};
-    },
-  },
+const showEditPopup = ref(false);
+const showDeletePopup = ref(false);
+const selectedAttribute = ref({});
+
+const getters = useStoreGetters();
+const store = useStore();
+
+const attributes = computed(() =>
+  getters['attributes/getAttributesByModel'].value(props.attributeModel)
+);
+const uiFlags = computed(() => getters['attributes/getUIFlags'].value);
+
+const attributeDisplayName = computed(
+  () => selectedAttribute.value.attribute_display_name
+);
+const deleteConfirmText = computed(
+  () =>
+    `${t('ATTRIBUTES_MGMT.DELETE.CONFIRM.YES')} ${attributeDisplayName.value}`
+);
+const deleteRejectText = computed(() => t('ATTRIBUTES_MGMT.DELETE.CONFIRM.NO'));
+const confirmDeleteTitle = computed(() =>
+  t('ATTRIBUTES_MGMT.DELETE.CONFIRM.TITLE', {
+    attributeName: attributeDisplayName.value,
+  })
+);
+const confirmPlaceHolderText = computed(
+  () =>
+    `${t('ATTRIBUTES_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
+      attributeName: attributeDisplayName.value,
+    })}`
+);
+
+const deleteAttributes = async ({ id }) => {
+  try {
+    await store.dispatch('attributes/delete', id);
+    useAlert(t('ATTRIBUTES_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message || t('ATTRIBUTES_MGMT.DELETE.API.ERROR_MESSAGE');
+    useAlert(errorMessage);
+  }
+};
+const openEditPopup = response => {
+  showEditPopup.value = true;
+  selectedAttribute.value = response;
+};
+const hideEditPopup = () => {
+  showEditPopup.value = false;
+};
+
+const closeDelete = () => {
+  showDeletePopup.value = false;
+  selectedAttribute.value = {};
+};
+const confirmDeletion = () => {
+  deleteAttributes(selectedAttribute.value);
+  closeDelete();
+};
+const openDelete = value => {
+  showDeletePopup.value = true;
+  selectedAttribute.value = value;
 };
 </script>
 
 <template>
-  <div class="flex flex-row gap-4 p-8">
-    <div class="w-full lg:w-3/5">
-      <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
-        <woot-tabs-item
-          v-for="tab in tabs"
-          :key="tab.key"
-          :name="tab.name"
-          :show-badge="false"
-        />
-      </woot-tabs>
-
-      <div class="w-full">
-        <p
-          v-if="!uiFlags.isFetching && !attributes.length"
-          class="flex items-center justify-center mt-12"
+  <div class="flex flex-col">
+    <table class="min-w-full overflow-x-auto">
+      <thead>
+        <th
+          v-for="tableHeader in $t('ATTRIBUTES_MGMT.LIST.TABLE_HEADER')"
+          :key="tableHeader"
+          class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-slate-700 dark:text-slate-300"
         >
-          {{ $t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.isFetching"
-          :message="$t('ATTRIBUTES_MGMT.LOADING')"
-        />
-        <table
-          v-if="!uiFlags.isFetching && attributes.length"
-          class="w-full mt-2 table-fixed woot-table"
-        >
-          <thead>
-            <th
-              v-for="tableHeader in $t('ATTRIBUTES_MGMT.LIST.TABLE_HEADER')"
-              :key="tableHeader"
-              class="pl-0 max-w-[6.25rem] min-w-[5rem]"
-            >
-              {{ tableHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <tr v-for="attribute in attributes" :key="attribute.attribute_key">
-              <td
-                class="pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
-              >
-                {{ attribute.attribute_display_name }}
-              </td>
-              <td
-                class="pl-0 max-w-[10rem] min-w-[6.25rem] overflow-hidden whitespace-nowrap text-ellipsis"
-              >
-                {{ attribute.attribute_description }}
-              </td>
-              <td
-                class="pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
-              >
-                {{ attribute.attribute_display_type }}
-              </td>
-              <td
-                class="attribute-key pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
-              >
-                {{ attribute.attribute_key }}
-              </td>
-              <td class="button-wrapper">
-                <woot-button
-                  v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT')"
-                  variant="smooth"
-                  size="tiny"
-                  color-scheme="secondary"
-                  class-names="grey-btn"
-                  icon="edit"
-                  @click="openEditPopup(attribute)"
-                />
-                <woot-button
-                  v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.DELETE')"
-                  variant="smooth"
-                  color-scheme="alert"
-                  size="tiny"
-                  icon="dismiss-circle"
-                  class-names="grey-btn"
-                  @click="openDelete(attribute)"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-    <div class="hidden w-1/3 lg:block">
-      <span v-dompurify-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')" />
-    </div>
+          {{ tableHeader }}
+        </th>
+      </thead>
+      <tbody
+        class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
+      >
+        <tr v-for="attribute in attributes" :key="attribute.attribute_key">
+          <td
+            class="py-4 ltr:pr-4 rtl:pl-4 overflow-hidden whitespace-nowrap text-ellipsis"
+          >
+            {{ attribute.attribute_display_name }}
+          </td>
+          <td class="py-4 ltr:pr-4 rtl:pl-4">
+            {{ attribute.attribute_description }}
+          </td>
+          <td
+            class="py-4 ltr:pr-4 rtl:pl-4 overflow-hidden whitespace-nowrap text-ellipsis"
+          >
+            {{ attribute.attribute_display_type }}
+          </td>
+          <td
+            class="py-4 ltr:pr-4 rtl:pl-4 attribute-key overflow-hidden whitespace-nowrap text-ellipsis"
+          >
+            {{ attribute.attribute_key }}
+          </td>
+          <td class="py-4 min-w-xs">
+            <div class="flex gap-1">
+              <woot-button
+                v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT')"
+                variant="smooth"
+                size="tiny"
+                color-scheme="secondary"
+                class-names="grey-btn"
+                icon="edit"
+                @click="openEditPopup(attribute)"
+              />
+              <woot-button
+                v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.DELETE')"
+                variant="smooth"
+                color-scheme="alert"
+                size="tiny"
+                icon="dismiss-circle"
+                class-names="grey-btn"
+                @click="openDelete(attribute)"
+              />
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
       <EditAttribute
         :selected-attribute="selectedAttribute"
@@ -216,17 +162,4 @@ export default {
 .attribute-key {
   font-family: monospace;
 }
-
-::v-deep {
-  .tabs--container {
-    .tabs {
-      @apply p-0;
-    }
-  }
-
-  .tabs-title a {
-    font-weight: var(--font-weight-medium);
-    padding-top: 0;
-  }
-}
 </style>

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

@@ -1,40 +1,112 @@
-<script>
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import AddAttribute from './AddAttribute.vue';
 import CustomAttribute from './CustomAttribute.vue';
-export default {
-  components: {
-    AddAttribute,
-    CustomAttribute,
-  },
-  data() {
-    return {
-      showAddPopup: false,
-    };
-  },
-  methods: {
-    openAddPopup() {
-      this.showAddPopup = true;
+import SettingsLayout from '../SettingsLayout.vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+
+const { t } = useI18n();
+
+const getters = useStoreGetters();
+const store = useStore();
+
+const showAddPopup = ref(false);
+const selectedTabIndex = ref(0);
+const uiFlags = computed(() => getters['attributes/getUIFlags'].value);
+
+const openAddPopup = () => {
+  showAddPopup.value = true;
+};
+const hideAddPopup = () => {
+  showAddPopup.value = false;
+};
+
+const tabs = computed(() => {
+  return [
+    {
+      key: 0,
+      name: t('ATTRIBUTES_MGMT.TABS.CONVERSATION'),
     },
-    hideAddPopup() {
-      this.showAddPopup = false;
+    {
+      key: 1,
+      name: t('ATTRIBUTES_MGMT.TABS.CONTACT'),
     },
-  },
+  ];
+});
+
+onMounted(() => {
+  store.dispatch('attributes/get');
+});
+
+const attributeModel = computed(() =>
+  selectedTabIndex.value ? 'contact_attribute' : 'conversation_attribute'
+);
+
+const attributes = computed(() =>
+  getters['attributes/getAttributesByModel'].value(attributeModel.value)
+);
+
+const onClickTabChange = index => {
+  selectedTabIndex.value = index;
 };
 </script>
 
 <template>
-  <div class="flex-1 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup()"
+  <SettingsLayout
+    :is-loading="uiFlags.isFetching"
+    :loading-message="$t('ATTRIBUTES_MGMT.LOADING')"
+    :no-records-found="!attributes.length"
+    :no-records-message="$t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404')"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('ATTRIBUTES_MGMT.HEADER')"
+        :description="$t('ATTRIBUTES_MGMT.DESCRIPTION')"
+        :link-text="$t('ATTRIBUTES_MGMT.LEARN_MORE')"
+        feature-name="custom_attributes"
+      >
+        <template #actions>
+          <woot-button
+            class="button nice rounded-md"
+            icon="add-circle"
+            @click="openAddPopup"
+          >
+            {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
+          </woot-button>
+        </template>
+      </BaseSettingsHeader>
+    </template>
+    <template #preBody>
+      <woot-tabs
+        class="font-medium [&_.tabs]:p-0 mb-4"
+        :index="selectedTabIndex"
+        @change="onClickTabChange"
+      >
+        <woot-tabs-item
+          v-for="tab in tabs"
+          :key="tab.key"
+          :name="tab.name"
+          :show-badge="false"
+        />
+      </woot-tabs>
+    </template>
+    <template #body>
+      <CustomAttribute
+        :key="attributeModel"
+        :attribute-model="attributeModel"
+      />
+    </template>
+    <woot-modal
+      v-if="showAddPopup"
+      :show.sync="showAddPopup"
+      :on-close="hideAddPopup"
     >
-      {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
-    </woot-button>
-    <CustomAttribute />
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <AddAttribute :on-close="hideAddPopup" />
+      <AddAttribute
+        :on-close="hideAddPopup"
+        :selected-attribute-model-tab="selectedTabIndex"
+      />
     </woot-modal>
-  </div>
+  </SettingsLayout>
 </template>

app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js

@@ -1,17 +1,12 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
+const SettingsWrapper = () => import('../SettingsWrapper.vue');
 const AttributesHome = () => import('./Index.vue');
 
 export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/custom-attributes'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'ATTRIBUTES_MGMT.HEADER',
-        icon: 'code',
-        showNewButton: false,
-      },
+      component: SettingsWrapper,
       children: [
         {
           path: '',

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue

@@ -3,16 +3,18 @@ import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import NewWebhook from './NewWebHook.vue';
 import EditWebhook from './EditWebHook.vue';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import WebhookRow from './WebhookRow.vue';
+import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
+import SettingsLayout from '../../SettingsLayout.vue';
 
 export default {
   components: {
+    SettingsLayout,
+    BaseSettingsHeader,
     NewWebhook,
     EditWebhook,
     WebhookRow,
   },
-  mixins: [globalConfigMixin],
   data() {
     return {
       loading: {},
@@ -26,8 +28,10 @@ export default {
     ...mapGetters({
       records: 'webhooks/getWebhooks',
       uiFlags: 'webhooks/getUIFlags',
-      globalConfig: 'globalConfig/get',
     }),
+    integration() {
+      return this.$store.getters['integrations/getIntegration']('webhook');
+    },
   },
   mounted() {
     this.$store.dispatch('webhooks/get');
@@ -75,69 +79,59 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup"
-    >
-      {{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
-    </woot-button>
-
-    <div class="flex flex-row gap-4">
-      <div class="w-full lg:w-3/5">
-        <p
-          v-if="!uiFlags.fetchingList && !records.length"
-          class="flex flex-col items-center justify-center h-full"
+  <SettingsLayout
+    :is-loading="uiFlags.fetchingList"
+    :loading-message="$t('INTEGRATION_SETTINGS.WEBHOOK.LOADING')"
+    :no-records-message="$t('INTEGRATION_SETTINGS.WEBHOOK.LIST.404')"
+    :no-records-found="!records.length"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        v-if="integration.name"
+        :title="integration.name"
+        :description="integration.description"
+        :link-text="$t('INTEGRATION_SETTINGS.WEBHOOK.LEARN_MORE')"
+        feature-name="webhook"
+        :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
+      >
+        <template #actions>
+          <woot-button
+            class="button nice rounded-md"
+            icon="add-circle"
+            @click="openAddPopup"
+          >
+            {{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
+          </woot-button>
+        </template>
+      </BaseSettingsHeader>
+    </template>
+    <template #body>
+      <table class="min-w-full divide-y divide-slate-75 dark:divide-slate-700">
+        <thead>
+          <th
+            v-for="thHeader in $t(
+              'INTEGRATION_SETTINGS.WEBHOOK.LIST.TABLE_HEADER'
+            )"
+            :key="thHeader"
+            class="py-4 pr-4 text-left font-semibold text-slate-700 dark:text-slate-300 last:text-right last:pr-4"
+          >
+            {{ thHeader }}
+          </th>
+        </thead>
+        <tbody
+          class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
         >
-          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.LIST.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.fetchingList"
-          :message="$t('INTEGRATION_SETTINGS.WEBHOOK.LOADING')"
-        />
-
-        <table
-          v-if="!uiFlags.fetchingList && records.length"
-          class="woot-table"
-        >
-          <thead>
-            <th
-              v-for="thHeader in $t(
-                'INTEGRATION_SETTINGS.WEBHOOK.LIST.TABLE_HEADER'
-              )"
-              :key="thHeader"
-              class="last:text-right"
-            >
-              {{ thHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <WebhookRow
-              v-for="(webHookItem, index) in records"
-              :key="webHookItem.id"
-              :index="index"
-              :webhook="webHookItem"
-              @edit="openEditPopup"
-              @delete="openDeletePopup"
-            />
-          </tbody>
-        </table>
-      </div>
-
-      <div class="hidden w-1/3 lg:block">
-        <span
-          v-dompurify-html="
-            useInstallationName(
-              $t('INTEGRATION_SETTINGS.WEBHOOK.SIDEBAR_TXT'),
-              globalConfig.installationName
-            )
-          "
-        />
-      </div>
-    </div>
-
+          <WebhookRow
+            v-for="(webHookItem, index) in records"
+            :key="webHookItem.id"
+            :index="index"
+            :webhook="webHookItem"
+            @edit="openEditPopup"
+            @delete="openDeletePopup"
+          />
+        </tbody>
+      </table>
+    </template>
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
       <NewWebhook v-if="showAddPopup" :on-close="hideAddPopup" />
     </woot-modal>
@@ -163,5 +157,5 @@ export default {
       :confirm-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.YES')"
       :reject-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.NO')"
     />
-  </div>
+  </SettingsLayout>
 </template>

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue

@@ -1,8 +1,8 @@
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, url, minLength } from '@vuelidate/validators';
-import webhookMixin from './webhookMixin';
 import wootConstants from 'dashboard/constants/globals';
+import { getEventNamei18n } from './webhookHelper';
 
 const { EXAMPLE_WEBHOOK_URL } = wootConstants;
 
@@ -18,7 +18,6 @@ const SUPPORTED_WEBHOOK_EVENTS = [
 ];
 
 export default {
-  mixins: [webhookMixin],
   props: {
     value: {
       type: Object,
@@ -70,6 +69,7 @@ export default {
         subscriptions: this.subscriptions,
       });
     },
+    getEventNamei18n,
   },
 };
 </script>
@@ -105,10 +105,10 @@ export default {
             type="checkbox"
             :value="event"
             name="subscriptions"
-            class="checkbox"
+            class="mr-2"
           />
           <label :for="event" class="text-sm">
-            {{ `${getEventLabel(event)} (${event})` }}
+            {{ `${$t(getEventNamei18n(event))} (${event})` }}
           </label>
         </div>
       </div>
@@ -129,9 +129,3 @@ export default {
     </div>
   </form>
 </template>
-
-<style lang="scss" scoped>
-.checkbox {
-  @apply mr-2;
-}
-</style>

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue

@@ -1,59 +1,58 @@
-<script>
-import webhookMixin from './webhookMixin';
+<script setup>
+import { computed } from 'vue';
+import { getEventNamei18n } from './webhookHelper';
 import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
+import { useI18n } from 'dashboard/composables/useI18n';
 
-export default {
-  components: { ShowMore },
-  mixins: [webhookMixin],
-  props: {
-    webhook: {
-      type: Object,
-      required: true,
-    },
-    index: {
-      type: Number,
-      required: true,
-    },
+const props = defineProps({
+  webhook: {
+    type: Object,
+    required: true,
   },
-  computed: {
-    subscribedEvents() {
-      const { subscriptions } = this.webhook;
-      return subscriptions.map(event => this.getEventLabel(event)).join(', ');
-    },
+  index: {
+    type: Number,
+    required: true,
   },
-};
+});
+const { t } = useI18n();
+const subscribedEvents = computed(() => {
+  const { subscriptions } = props.webhook;
+  return subscriptions.map(event => t(getEventNamei18n(event))).join(', ');
+});
 </script>
 
 <template>
-  <tr class="space-x-2">
-    <td class="max-w-2xl">
+  <tr>
+    <td class="py-4 ltr:pr-4 rtl:pl-4">
       <div class="font-medium break-words text-slate-700 dark:text-slate-100">
         {{ webhook.url }}
       </div>
-      <span class="text-xs text-slate-500 dark:text-slate-400">
+      <div class="text-sm text-slate-500 dark:text-slate-400 block mt-1">
         <span class="font-medium">
           {{ $t('INTEGRATION_SETTINGS.WEBHOOK.SUBSCRIBED_EVENTS') }}:
         </span>
         <ShowMore :text="subscribedEvents" :limit="60" />
-      </span>
+      </div>
     </td>
-    <td class="min-w-[7rem] flex gap-1 justify-end flex-shrink-0">
-      <woot-button
-        v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')"
-        variant="smooth"
-        size="tiny"
-        color-scheme="secondary"
-        icon="edit"
-        @click="$emit('edit', webhook)"
-      />
-      <woot-button
-        v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')"
-        variant="smooth"
-        color-scheme="alert"
-        size="tiny"
-        icon="dismiss-circle"
-        @click="$emit('delete', webhook, index)"
-      />
+    <td class="py-4 min-w-xs">
+      <div class="flex gap-1 justify-end">
+        <woot-button
+          v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')"
+          variant="smooth"
+          size="tiny"
+          color-scheme="secondary"
+          icon="edit"
+          @click="$emit('edit', webhook)"
+        />
+        <woot-button
+          v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')"
+          variant="smooth"
+          color-scheme="alert"
+          size="tiny"
+          icon="dismiss-circle"
+          @click="$emit('delete', webhook, index)"
+        />
+      </div>
     </td>
   </tr>
 </template>

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/specs/webhookHelper.spec.js

@@ -0,0 +1,9 @@
+import { getEventNamei18n } from '../webhookHelper';
+
+describe('#getEventNamei18n', () => {
+  it('returns correct i18n translation text', () => {
+    expect(getEventNamei18n('message_created')).toEqual(
+      `INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.EVENTS.MESSAGE_CREATED`
+    );
+  });
+});

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/specs/webhookMixin.spec.js

@@ -1,26 +0,0 @@
-import { createWrapper } from '@vue/test-utils';
-import webhookMixin from '../webhookMixin';
-import Vue from 'vue';
-
-describe('webhookMixin', () => {
-  describe('#getEventLabel', () => {
-    it('returns correct i18n translation:', () => {
-      const Component = {
-        render() {},
-        title: 'WebhookComponent',
-        mixins: [webhookMixin],
-        methods: {
-          $t(text) {
-            return text;
-          },
-        },
-      };
-      const Constructor = Vue.extend(Component);
-      const vm = new Constructor().$mount();
-      const wrapper = createWrapper(vm);
-      expect(wrapper.vm.getEventLabel('message_created')).toEqual(
-        `INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.EVENTS.MESSAGE_CREATED`
-      );
-    });
-  });
-});

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/webhookHelper.js

@@ -0,0 +1,4 @@
+export const getEventNamei18n = event => {
+  const eventName = event.toUpperCase();
+  return `INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.EVENTS.${eventName}`;
+};

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/webhookMixin.js

@@ -1,10 +0,0 @@
-export default {
-  methods: {
-    getEventLabel(event) {
-      const eventName = event.toUpperCase();
-      return this.$t(
-        `INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.EVENTS.${eventName}`
-      );
-    },
-  },
-};

app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js

@@ -30,6 +30,14 @@ export default {
             permissions: ['administrator'],
           },
         },
+        {
+          path: 'webhook',
+          component: Webhook,
+          name: 'settings_integrations_webhook',
+          meta: {
+            permissions: ['administrator'],
+          },
+        },
       ],
     },
     {
@@ -49,14 +57,6 @@ export default {
         };
       },
       children: [
-        {
-          path: 'webhook',
-          component: Webhook,
-          name: 'settings_integrations_webhook',
-          meta: {
-            permissions: ['administrator'],
-          },
-        },
         {
           path: 'slack',
           name: 'settings_integrations_slack',

app/javascript/dashboard/store/modules/helpCenterArticles/actions.js

@@ -1,5 +1,5 @@
 import articlesAPI from 'dashboard/api/helpCenter/articles';
-import { uploadFile } from 'dashboard/helper/uploadHelper';
+import { uploadExternalImage, uploadFile } from 'dashboard/helper/uploadHelper';
 import { throwErrorMessage } from 'dashboard/store/utils/api';
 
 import types from '../../mutation-types';
@@ -132,6 +132,11 @@ export const actions = {
     return fileUrl;
   },
 
+  uploadExternalImage: async (_, { url }) => {
+    const { fileUrl } = await uploadExternalImage(url);
+    return fileUrl;
+  },
+
   reorder: async (_, { portalSlug, categorySlug, reorderedGroup }) => {
     try {
       await articlesAPI.reorderArticles({

app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
-import { actions } from '../actions';
+import { uploadExternalImage, uploadFile } from 'dashboard/helper/uploadHelper';
 import * as types from '../../../mutation-types';
-import { uploadFile } from 'dashboard/helper/uploadHelper';
+import { actions } from '../actions';
 
 vi.mock('dashboard/helper/uploadHelper');
 
@@ -187,33 +187,53 @@ describe('#actions', () => {
 
   describe('attachImage', () => {
     it('should upload the file and return the fileUrl', async () => {
-      // Given
       const mockFile = new Blob(['test'], { type: 'image/png' });
       mockFile.name = 'test.png';
 
       const mockFileUrl = 'https://test.com/test.png';
       uploadFile.mockResolvedValueOnce({ fileUrl: mockFileUrl });
 
-      // When
       const result = await actions.attachImage({}, { file: mockFile });
 
-      // Then
       expect(uploadFile).toHaveBeenCalledWith(mockFile);
       expect(result).toBe(mockFileUrl);
     });
 
     it('should throw an error if the upload fails', async () => {
-      // Given
       const mockFile = new Blob(['test'], { type: 'image/png' });
       mockFile.name = 'test.png';
 
       const mockError = new Error('Upload failed');
       uploadFile.mockRejectedValueOnce(mockError);
 
-      // When & Then
       await expect(actions.attachImage({}, { file: mockFile })).rejects.toThrow(
         'Upload failed'
       );
     });
   });
+
+  describe('uploadExternalImage', () => {
+    it('should upload the image from external URL and return the fileUrl', async () => {
+      const mockUrl = 'https://example.com/image.jpg';
+      const mockFileUrl = 'https://uploaded.example.com/image.jpg';
+      uploadExternalImage.mockResolvedValueOnce({ fileUrl: mockFileUrl });
+
+      // When
+      const result = await actions.uploadExternalImage({}, { url: mockUrl });
+
+      // Then
+      expect(uploadExternalImage).toHaveBeenCalledWith(mockUrl);
+      expect(result).toBe(mockFileUrl);
+    });
+
+    it('should throw an error if the upload fails', async () => {
+      const mockUrl = 'https://example.com/image.jpg';
+      const mockError = new Error('Upload failed');
+      uploadExternalImage.mockRejectedValueOnce(mockError);
+
+      await expect(
+        actions.uploadExternalImage({}, { url: mockUrl })
+      ).rejects.toThrow('Upload failed');
+    });
+  });
 });

app/javascript/shared/components/ChatCard.vue

@@ -1,12 +1,11 @@
 <script>
 import CardButton from 'shared/components/CardButton.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   components: {
     CardButton,
   },
-  mixins: [darkModeMixin],
   props: {
     title: {
       type: String,
@@ -25,21 +24,30 @@ export default {
       default: () => [],
     },
   },
-  computed: {},
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
 };
 </script>
 
 <template>
   <div
     class="card-message chat-bubble agent"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
+    :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
   >
     <img class="media" :src="mediaUrl" />
     <div class="card-body">
-      <h4 class="title" :class="$dm('text-black-900', 'dark:text-slate-50')">
+      <h4
+        class="title"
+        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
+      >
         {{ title }}
       </h4>
-      <p class="body" :class="$dm('text-black-700', 'dark:text-slate-100')">
+      <p
+        class="body"
+        :class="getThemeClass('text-black-700', 'dark:text-slate-100')"
+      >
         {{ description }}
       </p>
       <CardButton v-for="action in actions" :key="action.id" :action="action" />

app/javascript/shared/components/ChatForm.vue

@@ -1,10 +1,9 @@
 <script>
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
-  mixins: [darkModeMixin],
   props: {
     buttonLabel: {
       type: String,
@@ -19,6 +18,10 @@ export default {
       default: () => [],
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   data() {
     return {
       formValues: {},
@@ -33,8 +36,8 @@ export default {
       return getContrastingTextColor(this.widgetColor);
     },
     inputColor() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
-        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
+      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 }) => {
@@ -80,7 +83,7 @@ export default {
 <template>
   <div
     class="form chat-bubble agent"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
+    :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
   >
     <form @submit.prevent="onSubmit">
       <div
@@ -91,7 +94,7 @@ export default {
           'has-submitted': hasSubmitted,
         }"
       >
-        <label :class="$dm('text-black-900', 'dark:text-slate-50')">{{
+        <label :class="getThemeClass('text-black-900', 'dark:text-slate-50')">{{
           item.label
         }}</label>
         <input

app/javascript/shared/components/CustomerSatisfaction.vue

@@ -3,7 +3,7 @@ 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 darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
@@ -11,7 +11,6 @@ export default {
     Spinner,
     FluentIcon,
   },
-  mixins: [darkModeMixin],
   props: {
     messageContentAttributes: {
       type: Object,
@@ -22,6 +21,10 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   data() {
     return {
       email: '',
@@ -44,8 +47,8 @@ export default {
       return !(this.selectedRating && this.feedback);
     },
     inputColor() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
-        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
+      return `${this.getThemeClass('bg-white', 'dark:bg-slate-600')}
+        ${this.getThemeClass('text-black-900', 'dark:text-slate-50')}`;
     },
     textColor() {
       return getContrastingTextColor(this.widgetColor);
@@ -105,10 +108,13 @@ export default {
 <template>
   <div
     class="customer-satisfaction"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
+    :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
     :style="{ borderColor: widgetColor }"
   >
-    <h6 class="title" :class="$dm('text-slate-900', 'dark:text-slate-50')">
+    <h6
+      class="title"
+      :class="getThemeClass('text-slate-900', 'dark:text-slate-50')"
+    >
       {{ title }}
     </h6>
     <div class="ratings">

app/javascript/shared/components/DateSeparator.vue

@@ -1,15 +1,18 @@
 <script>
 import { formatDate } from 'shared/helpers/DateHelper';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
-  mixins: [darkModeMixin],
   props: {
     date: {
       type: String,
       required: true,
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   computed: {
     formattedDate() {
       return formatDate({
@@ -25,7 +28,7 @@ export default {
 <template>
   <div
     class="date--separator"
-    :class="$dm('text-slate-700', 'dark:text-slate-200')"
+    :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
   >
     {{ formattedDate }}
   </div>

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

@@ -2,7 +2,6 @@ import DateSeparator from '../DateSeparator.vue';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 const localVue = createLocalVue();
 import i18n from 'dashboard/i18n';
 localVue.use(Vuex);
@@ -40,7 +39,6 @@ describe('dateSeparator', () => {
       propsData: { date: 'Nov 18, 2019' },
       mocks: { $t: msg => msg },
       i18n: i18nConfig,
-      mixins: [darkModeMixin],
     });
   });
 

app/javascript/shared/composables/useFilter.js

@@ -1,7 +1,8 @@
 import wootConstants from 'dashboard/constants/globals';
 import { useStore } from 'dashboard/composables/store';
 import { useI18n } from 'dashboard/composables/useI18n';
-import { filterAttributeGroups } from 'dashboard/components/widgets/conversation/advancedFilterItems';
+import { filterAttributeGroups as conversationFilterAttributeGroups } from 'dashboard/components/widgets/conversation/advancedFilterItems';
+import { filterAttributeGroups as contactFilterAttributeGroups } from 'dashboard/routes/dashboard/contacts/contactFilterItems';
 import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
 
 const customAttributeInputType = key => {
@@ -42,6 +43,11 @@ export const useFilter = ({ filteri18nKey, attributeModel }) => {
   const { t: $t } = useI18n();
   const { getters } = useStore();
 
+  const filterAttributeGroups =
+    attributeModel === 'contact_attribute'
+      ? contactFilterAttributeGroups
+      : conversationFilterAttributeGroups;
+
   const setFilterAttributes = () => {
     const allCustomAttributes =
       getters['attributes/getAttributesByModel'](attributeModel);

app/javascript/shared/helpers/MessageTypeHelper.js

@@ -7,4 +7,5 @@ export const MESSAGE_MAX_LENGTH = {
   FACEBOOK: 1000,
   TWILIO_SMS: 320,
   TWILIO_WHATSAPP: 1600,
+  EMAIL: 25000,
 };

app/javascript/widget/App.vue

@@ -8,7 +8,7 @@ import availabilityMixin from 'widget/mixins/availability';
 import { getLocale } from './helpers/urlParamsHelper';
 import { isEmptyObject } from 'widget/helpers/utils';
 import Spinner from 'shared/components/Spinner.vue';
-import routerMixin from './mixins/routerMixin';
+import useReplaceRoute from 'widget/composables/useReplaceRoute';
 import {
   getExtraSpaceToScroll,
   loadedEventConfig,
@@ -18,7 +18,7 @@ import {
   ON_CAMPAIGN_MESSAGE_CLICK,
   ON_UNREAD_MESSAGE_CLICK,
 } from './constants/widgetBusEvents';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import { SDK_SET_BUBBLE_VISIBILITY } from '../shared/constants/sharedFrameEvents';
 import { emitter } from 'shared/helpers/mitt';
 
@@ -27,7 +27,12 @@ export default {
   components: {
     Spinner,
   },
-  mixins: [availabilityMixin, configMixin, routerMixin, darkModeMixin],
+  mixins: [availabilityMixin, configMixin],
+  setup() {
+    const { prefersDarkMode } = useDarkMode();
+    const replaceRoute = useReplaceRoute();
+    return { replaceRoute, prefersDarkMode };
+  },
   data() {
     return {
       isMobile: false,

app/javascript/widget/components/AgentMessage.vue

@@ -11,7 +11,7 @@ import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import configMixin from '../mixins/configMixin';
 import messageMixin from '../mixins/messageMixin';
 import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+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';
@@ -28,7 +28,7 @@ export default {
     MessageReplyButton,
     ReplyToChip,
   },
-  mixins: [configMixin, messageMixin, darkModeMixin],
+  mixins: [configMixin, messageMixin],
   props: {
     message: {
       type: Object,
@@ -39,6 +39,12 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return {
+      getThemeClass,
+    };
+  },
   data() {
     return {
       hasImageError: false,
@@ -192,7 +198,9 @@ export default {
             <div
               v-if="hasAttachments"
               class="space-y-2 chat-bubble has-attachment agent"
-              :class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
+              :class="
+                (wrapClass, getThemeClass('bg-white', 'dark:bg-slate-700'))
+              "
             >
               <div
                 v-for="attachment in message.attachments"
@@ -231,7 +239,7 @@ export default {
           v-if="message.showAvatar || hasRecordedResponse"
           v-dompurify-html="agentName"
           class="agent-name"
-          :class="$dm('text-slate-700', 'dark:text-slate-200')"
+          :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
         />
       </div>
     </div>

app/javascript/widget/components/AgentMessageBubble.vue

@@ -6,7 +6,7 @@ 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 darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import IntegrationCard from './template/IntegrationCard.vue';
 
 export default {
@@ -20,7 +20,6 @@ export default {
     CustomerSatisfaction,
     IntegrationCard,
   },
-  mixins: [darkModeMixin],
   props: {
     message: { type: String, default: null },
     contentType: { type: String, default: null },
@@ -34,11 +33,13 @@ export default {
   setup() {
     const { formatMessage, getPlainText, truncateMessage, highlightContent } =
       useMessageFormatter();
+    const { getThemeClass } = useDarkMode();
     return {
       formatMessage,
       getPlainText,
       truncateMessage,
       highlightContent,
+      getThemeClass,
     };
   },
   computed: {
@@ -98,7 +99,7 @@ export default {
         !isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
       "
       class="chat-bubble agent"
-      :class="$dm('bg-white', 'dark:bg-slate-700 has-dark-mode')"
+      :class="getThemeClass('bg-white', 'dark:bg-slate-700 has-dark-mode')"
     >
       <div
         v-dompurify-html="formatMessage(message, false)"

app/javascript/widget/components/AgentTypingBubble.vue

@@ -1,8 +1,11 @@
 <script>
-import darkModeMixing from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 export default {
   name: 'AgentTypingBubble',
-  mixins: [darkModeMixing],
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
 };
 </script>
 
@@ -13,7 +16,7 @@ export default {
       <div class="message-wrap mt-2">
         <div
           class="typing-bubble chat-bubble agent"
-          :class="$dm('bg-white', 'dark:bg-slate-700')"
+          :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
         >
           <img
             src="~widget/assets/images/typing.gif"

app/javascript/widget/components/ChatFooter.vue

@@ -6,7 +6,7 @@ import FooterReplyTo from 'widget/components/FooterReplyTo.vue';
 import ChatInputWrap from 'widget/components/ChatInputWrap.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { sendEmailTranscript } from 'widget/api/conversation';
-import routerMixin from 'widget/mixins/routerMixin';
+import useReplaceRoute from 'widget/composables/useReplaceRoute';
 import { IFrameHelper } from '../helpers/utils';
 import { CHATWOOT_ON_START_CONVERSATION } from '../constants/sdkEvents';
 
@@ -16,7 +16,10 @@ export default {
     CustomButton,
     FooterReplyTo,
   },
-  mixins: [routerMixin],
+  setup() {
+    const replaceRoute = useReplaceRoute();
+    return { replaceRoute };
+  },
   data() {
     return {
       inReplyTo: null,

app/javascript/widget/components/ChatHeader.vue

@@ -3,8 +3,10 @@ import availabilityMixin from 'widget/mixins/availability';
 import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import HeaderActions from './HeaderActions.vue';
-import routerMixin from 'widget/mixins/routerMixin';
+import useReplaceRoute from 'widget/composables/useReplaceRoute';
 import darkMixin from 'widget/mixins/darkModeMixin.js';
+import routerMixin from 'widget/mixins/routerMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   name: 'ChatHeader',
@@ -12,7 +14,7 @@ export default {
     FluentIcon,
     HeaderActions,
   },
-  mixins: [nextAvailabilityTime, availabilityMixin, routerMixin, darkMixin],
+  mixins: [nextAvailabilityTime, availabilityMixin],
   props: {
     avatarUrl: {
       type: String,
@@ -35,6 +37,11 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    const replaceRoute = useReplaceRoute();
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass, replaceRoute };
+  },
   computed: {
     isOnline() {
       const { workingHoursEnabled } = this.channelConfig;
@@ -57,7 +64,7 @@ export default {
 <template>
   <header
     class="flex justify-between w-full p-5"
-    :class="$dm('bg-white', 'dark:bg-slate-900')"
+    :class="getThemeClass('bg-white', 'dark:bg-slate-900')"
   >
     <div class="flex items-center">
       <button
@@ -68,7 +75,7 @@ export default {
         <FluentIcon
           icon="chevron-left"
           size="24"
-          :class="$dm('text-black-900', 'dark:text-slate-50')"
+          :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
         />
       </button>
       <img
@@ -80,7 +87,7 @@ export default {
       <div>
         <div
           class="flex items-center text-base font-medium leading-4"
-          :class="$dm('text-black-900', 'dark:text-slate-50')"
+          :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
         >
           <span v-dompurify-html="title" class="mr-1" />
           <div
@@ -90,7 +97,7 @@ export default {
         </div>
         <div
           class="mt-1 text-xs leading-3"
-          :class="$dm('text-black-700', 'dark:text-slate-400')"
+          :class="getThemeClass('text-black-700', 'dark:text-slate-400')"
         >
           {{ replyWaitMessage }}
         </div>

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -1,13 +1,12 @@
 <script>
 import HeaderActions from './HeaderActions.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   name: 'ChatHeaderExpanded',
   components: {
     HeaderActions,
   },
-  mixins: [darkModeMixin],
   props: {
     avatarUrl: {
       type: String,
@@ -26,6 +25,10 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
 };
 </script>
 
@@ -51,12 +54,12 @@ export default {
     <h2
       v-dompurify-html="introHeading"
       class="mt-4 text-2xl mb-1.5 font-medium"
-      :class="$dm('text-slate-900', 'dark:text-slate-50')"
+      :class="getThemeClass('text-slate-900', 'dark:text-slate-50')"
     />
     <p
       v-dompurify-html="introBody"
       class="text-base leading-normal"
-      :class="$dm('text-slate-700', 'dark:text-slate-200')"
+      :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
     />
   </header>
 </template>

app/javascript/widget/components/ChatInputWrap.vue

@@ -6,7 +6,7 @@ import ChatSendButton from 'widget/components/ChatSendButton.vue';
 import configMixin from '../mixins/configMixin';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');
 
@@ -19,7 +19,7 @@ export default {
     FluentIcon,
     ResizableTextArea,
   },
-  mixins: [configMixin, darkModeMixin],
+  mixins: [configMixin],
   props: {
     onSendMessage: {
       type: Function,
@@ -30,7 +30,10 @@ export default {
       default: () => {},
     },
   },
-
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   data() {
     return {
       userInput: '',
@@ -51,13 +54,16 @@ export default {
       return this.userInput.length > 0;
     },
     inputColor() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
-        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
+      return `${this.getThemeClass('bg-white', 'dark:bg-slate-600')}
+        ${this.getThemeClass('text-black-900', 'dark:text-slate-50')}`;
     },
     emojiIconColor() {
       return this.showEmojiPicker
-        ? `text-woot-500 ${this.$dm('text-black-900', 'dark:text-slate-100')}`
-        : `${this.$dm('text-black-900', 'dark:text-slate-100')}`;
+        ? `text-woot-500 ${this.getThemeClass(
+            'text-black-900',
+            'dark:text-slate-100'
+          )}`
+        : `${this.getThemeClass('text-black-900', 'dark:text-slate-100')}`;
     },
   },
   watch: {
@@ -128,7 +134,7 @@ export default {
 <template>
   <div
     class="chat-message--input is-focused"
-    :class="$dm('bg-white ', 'dark:bg-slate-600')"
+    :class="getThemeClass('bg-white ', 'dark:bg-slate-600')"
     @keydown.esc="hideEmojiPicker"
   >
     <ResizableTextArea
@@ -148,7 +154,7 @@ export default {
     <div class="button-wrap">
       <ChatAttachmentButton
         v-if="showAttachment"
-        :class="$dm('text-black-900', 'dark:text-slate-100')"
+        :class="getThemeClass('text-black-900', 'dark:text-slate-100')"
         :on-attach="onSendAttachment"
       />
       <button

app/javascript/widget/components/ConversationWrap.vue

@@ -3,7 +3,7 @@ import ChatMessage from 'widget/components/ChatMessage.vue';
 import AgentTypingBubble from 'widget/components/AgentTypingBubble.vue';
 import DateSeparator from 'shared/components/DateSeparator.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import { MESSAGE_TYPE } from 'shared/constants/messages';
 import { mapActions, mapGetters } from 'vuex';
 
@@ -15,13 +15,16 @@ export default {
     DateSeparator,
     Spinner,
   },
-  mixins: [darkModeMixin],
   props: {
     groupedMessages: {
       type: Array,
       default: () => [],
     },
   },
+  setup() {
+    const { darkMode } = useDarkMode();
+    return { darkMode };
+  },
   data() {
     return {
       previousScrollHeight: 0,

app/javascript/widget/components/FileBubble.vue

@@ -1,13 +1,12 @@
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
   components: {
     FluentIcon,
   },
-  mixins: [darkModeMixin],
   props: {
     url: {
       type: String,
@@ -26,6 +25,10 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   computed: {
     title() {
       return this.isInProgress
@@ -45,7 +48,7 @@ export default {
     },
     titleColor() {
       return !this.isUserBubble
-        ? this.$dm('text-black-900', 'dark:text-slate-50')
+        ? this.getThemeClass('text-black-900', 'dark:text-slate-50')
         : '';
     },
   },

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

@@ -1,7 +1,6 @@
 <script>
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 export default {
-  mixins: [darkModeMixin],
   props: {
     label: {
       type: String,
@@ -28,20 +27,33 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   computed: {
     labelClass() {
       return this.error
-        ? `text-red-400 ${this.$dm('text-black-800', 'dark:text-slate-50')}`
-        : `text-black-800 ${this.$dm('text-black-800', 'dark:text-slate-50')}`;
+        ? `text-red-400 ${this.getThemeClass(
+            'text-black-800',
+            'dark:text-slate-50'
+          )}`
+        : `text-black-800 ${this.getThemeClass(
+            'text-black-800',
+            'dark:text-slate-50'
+          )}`;
     },
     isInputDarkOrLightMode() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
-        'text-slate-700',
-        'dark:text-slate-50'
-      )}`;
+      return `${this.getThemeClass(
+        'bg-white',
+        'dark:bg-slate-600'
+      )} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
     },
     inputBorderColor() {
-      return `${this.$dm('border-black-200', 'dark:border-black-500')}`;
+      return `${this.getThemeClass(
+        'border-black-200',
+        'dark:border-black-500'
+      )}`;
     },
     inputHasError() {
       return this.error

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

@@ -2,13 +2,13 @@
 import countries from 'shared/constants/countries.js';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import FormulateInputMixin from '@braid/vue-formulate/src/FormulateInputMixin';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   components: {
     FluentIcon,
   },
-  mixins: [FormulateInputMixin, darkModeMixin],
+  mixins: [FormulateInputMixin],
   props: {
     placeholder: {
       type: String,
@@ -19,6 +19,10 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   data() {
     return {
       selectedIndex: -1,
@@ -45,28 +49,31 @@ export default {
       return this.activeCountryCode ? 'Clear selection' : 'Select Country';
     },
     dropdownClass() {
-      return `${this.$dm('bg-slate-100', 'dark:bg-slate-700')} ${this.$dm(
-        'text-slate-700',
-        'dark:text-slate-50'
-      )}`;
+      return `${this.getThemeClass(
+        'bg-slate-100',
+        'dark:bg-slate-700'
+      )} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
     },
     dropdownBackgroundClass() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-700')} ${this.$dm(
-        'text-slate-700',
-        'dark:text-slate-50'
-      )}`;
+      return `${this.getThemeClass(
+        'bg-white',
+        'dark:bg-slate-700'
+      )} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
     },
     dropdownItemClass() {
-      return `${this.$dm('text-slate-700', 'dark:text-slate-50')} ${this.$dm(
-        'hover:bg-slate-50',
-        'dark:hover:bg-slate-600'
-      )}`;
+      return `${this.getThemeClass(
+        'text-slate-700',
+        'dark:text-slate-50'
+      )} ${this.getThemeClass('hover:bg-slate-50', 'dark:hover:bg-slate-600')}`;
     },
     activeDropdownItemClass() {
-      return `active ${this.$dm('bg-slate-100', 'dark:bg-slate-800')}`;
+      return `active ${this.getThemeClass(
+        'bg-slate-100',
+        'dark:bg-slate-800'
+      )}`;
     },
     focusedDropdownItemClass() {
-      return `focus ${this.$dm('bg-slate-50', 'dark:bg-slate-600')}`;
+      return `focus ${this.getThemeClass('bg-slate-50', 'dark:bg-slate-600')}`;
     },
     inputHasError() {
       return this.hasErrorInPhoneInput
@@ -74,13 +81,16 @@ export default {
         : `hover:border-black-300 focus:border-black-300 ${this.inputLightAndDarkModeColor} ${this.inputBorderColor}`;
     },
     inputBorderColor() {
-      return `${this.$dm('border-black-200', 'dark:border-black-500')}`;
+      return `${this.getThemeClass(
+        'border-black-200',
+        'dark:border-black-500'
+      )}`;
     },
     inputLightAndDarkModeColor() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
-        'text-slate-700',
-        'dark:text-slate-50'
-      )}`;
+      return `${this.getThemeClass(
+        'bg-white',
+        'dark:bg-slate-600'
+      )} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
     },
     items() {
       return this.countries.filter(country => {
@@ -241,7 +251,7 @@ export default {
       <span
         v-if="activeDialCode"
         class="py-2 pl-2 pr-0 text-base"
-        :class="$dm('text-slate-700', 'dark:text-slate-50')"
+        :class="getThemeClass('text-slate-700', 'dark:text-slate-50')"
       >
         {{ activeDialCode }}
       </span>
@@ -273,7 +283,10 @@ export default {
           type="text"
           :placeholder="$t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_SEARCH')"
           class="w-full h-8 px-3 py-2 mt-1 mb-1 text-sm border border-solid rounded outline-none dropdown-search"
-          :class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
+          :class="[
+            getThemeClass('bg-slate-50', 'dark:bg-slate-600'),
+            inputBorderColor,
+          ]"
         />
       </div>
       <div
@@ -298,7 +311,7 @@ export default {
       <div v-if="items.length === 0">
         <span
           class="flex justify-center mt-4 text-sm text-center"
-          :class="$dm('text-slate-700', 'dark:text-slate-50')"
+          :class="getThemeClass('text-slate-700', 'dark:text-slate-50')"
         >
           {{ $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
         </span>

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

@@ -1,7 +1,6 @@
 <script>
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 export default {
-  mixins: [darkModeMixin],
   props: {
     label: {
       type: String,
@@ -20,20 +19,33 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   computed: {
     labelClass() {
       return this.error
-        ? `text-red-400 ${this.$dm('text-black-800', 'dark:text-slate-50')}`
-        : `text-black-800 ${this.$dm('text-black-800', 'dark:text-slate-50')}`;
+        ? `text-red-400 ${this.getThemeClass(
+            'text-black-800',
+            'dark:text-slate-50'
+          )}`
+        : `text-black-800 ${this.getThemeClass(
+            'text-black-800',
+            'dark:text-slate-50'
+          )}`;
     },
     isTextAreaDarkOrLightMode() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
-        'text-slate-700',
-        'dark:text-slate-50'
-      )}`;
+      return `${this.getThemeClass(
+        'bg-white',
+        'dark:bg-slate-600'
+      )} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
     },
     textAreaBorderColor() {
-      return `${this.$dm('border-black-200', 'dark:border-black-500')}`;
+      return `${this.getThemeClass(
+        'border-black-200',
+        'dark:border-black-500'
+      )}`;
     },
     isTextAreaHasError() {
       return this.error

app/javascript/widget/components/HeaderActions.vue

@@ -3,14 +3,14 @@ import { mapGetters } from 'vuex';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import { popoutChatWindow } from '../helpers/popoutHelper';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import configMixin from 'widget/mixins/configMixin';
 import { CONVERSATION_STATUS } from 'shared/constants/messages';
 
 export default {
   name: 'HeaderActions',
   components: { FluentIcon },
-  mixins: [configMixin, darkModeMixin],
+  mixins: [configMixin],
   props: {
     showPopoutButton: {
       type: Boolean,
@@ -21,6 +21,10 @@ export default {
       default: true,
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   computed: {
     ...mapGetters({
       conversationAttributes: 'conversationAttributes/getConversationParams',
@@ -92,7 +96,7 @@ export default {
       <FluentIcon
         icon="sign-out"
         size="22"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
+        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
       />
     </button>
     <button
@@ -103,7 +107,7 @@ export default {
       <FluentIcon
         icon="open"
         size="22"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
+        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
       />
     </button>
     <button
@@ -116,7 +120,7 @@ export default {
       <FluentIcon
         icon="dismiss"
         size="24"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
+        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
       />
     </button>
   </div>

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

@@ -5,17 +5,20 @@ import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
 import { isEmptyObject } from 'widget/helpers/utils';
 import { getRegexp } from 'shared/helpers/Validators';
+import useReplaceRoute from 'widget/composables/useReplaceRoute';
+import darkModeMixin from 'widget/mixins/darkModeMixin';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import routerMixin from 'widget/mixins/routerMixin';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import configMixin from 'widget/mixins/configMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 export default {
   components: {
     CustomButton,
     Spinner,
   },
-  mixins: [routerMixin, darkModeMixin, configMixin],
+  mixins: [configMixin],
   props: {
     options: {
       type: Object,
@@ -24,9 +27,9 @@ export default {
   },
   setup() {
     const { formatMessage } = useMessageFormatter();
-    return {
-      formatMessage,
-    };
+    const replaceRoute = useReplaceRoute();
+    const { getThemeClass } = useDarkMode();
+    return { formatMessage, getThemeClass, replaceRoute };
   },
   data() {
     return {
@@ -131,25 +134,28 @@ export default {
       return `mt-1 border rounded w-full py-2 px-3 text-slate-700 outline-none`;
     },
     isInputDarkOrLightMode() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
-        'text-slate-700',
-        'dark:text-slate-50'
-      )}`;
+      return `${this.getThemeClass(
+        'bg-white',
+        'dark:bg-slate-600'
+      )} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
     },
     inputBorderColor() {
-      return `${this.$dm('border-black-200', 'dark:border-black-500')}`;
+      return `${this.getThemeClass(
+        'border-black-200',
+        'dark:border-black-500'
+      )}`;
     },
   },
   methods: {
     labelClass(context) {
       const { hasErrors } = context;
       if (!hasErrors) {
-        return `text-xs font-medium ${this.$dm(
+        return `text-xs font-medium ${this.getThemeClass(
           'text-black-800',
           'dark:text-slate-50'
         )}`;
       }
-      return `text-xs font-medium ${this.$dm(
+      return `text-xs font-medium ${this.getThemeClass(
         'text-red-400',
         'dark:text-red-400'
       )}`;
@@ -264,7 +270,7 @@ export default {
       v-if="shouldShowHeaderMessage"
       v-dompurify-html="formatMessage(headerMessage, false)"
       class="mb-4 text-sm leading-5 pre-chat-header-message"
-      :class="$dm('text-black-800', 'dark:text-slate-50')"
+      :class="getThemeClass('text-black-800', 'dark:text-slate-50')"
     />
     <FormulateInput
       v-for="item in enabledPreChatFields"

app/javascript/widget/components/UnreadMessage.vue

@@ -7,11 +7,11 @@ import {
   ON_CAMPAIGN_MESSAGE_CLICK,
   ON_UNREAD_MESSAGE_CLICK,
 } from '../constants/widgetBusEvents';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 export default {
   name: 'UnreadMessage',
   components: { Thumbnail },
-  mixins: [configMixin, darkModeMixin],
+  mixins: [configMixin],
   props: {
     message: {
       type: String,
@@ -31,9 +31,15 @@ export default {
     },
   },
   setup() {
-    const { formatMessage } = useMessageFormatter();
+    const { formatMessage, getPlainText, truncateMessage, highlightContent } =
+      useMessageFormatter();
+    const { getThemeClass } = useDarkMode();
     return {
       formatMessage,
+      getPlainText,
+      truncateMessage,
+      highlightContent,
+      getThemeClass,
     };
   },
   computed: {
@@ -91,7 +97,7 @@ export default {
   <div class="chat-bubble-wrap">
     <button
       class="chat-bubble agent"
-      :class="$dm('bg-white', 'dark:bg-slate-50')"
+      :class="getThemeClass('bg-white', 'dark:bg-slate-50')"
       @click="onClickMessage"
     >
       <div v-if="showSender" class="row--agent-block">

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

@@ -1,13 +1,12 @@
 <script>
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   components: {
     FluentIcon,
   },
-  mixins: [darkModeMixin],
   props: {
     items: {
       type: Array,
@@ -16,9 +15,8 @@ export default {
   },
   setup() {
     const { truncateMessage } = useMessageFormatter();
-    return {
-      truncateMessage,
-    };
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass, truncateMessage };
   },
 };
 </script>
@@ -27,7 +25,7 @@ export default {
   <div
     v-if="!!items.length"
     class="chat-bubble agent"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
+    :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
   >
     <div v-for="item in items" :key="item.link" class="article-item">
       <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
@@ -35,15 +33,16 @@ export default {
           <FluentIcon
             icon="link"
             class="mr-1"
-            :class="$dm('text-black-900', 'dark:text-slate-50')"
+            :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
           />
-          <span :class="$dm('text-slate-900', 'dark:text-slate-50')">{{
-            item.title
-          }}</span>
+          <span
+            :class="getThemeClass('text-slate-900', 'dark:text-slate-50')"
+            >{{ item.title }}</span
+          >
         </span>
         <span
           class="description"
-          :class="$dm('text-slate-700', 'dark:text-slate-200')"
+          :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
         >
           {{ truncateMessage(item.description) }}
         </span>

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

@@ -6,14 +6,13 @@ import { getContrastingTextColor } from '@chatwoot/utils';
 
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   components: {
     FluentIcon,
     Spinner,
   },
-  mixins: [darkModeMixin],
   props: {
     messageId: {
       type: Number,
@@ -25,7 +24,8 @@ export default {
     },
   },
   setup() {
-    return { v$: useVuelidate() };
+    const { getThemeClass } = useDarkMode();
+    return { v$: useVuelidate(), getThemeClass };
   },
   data() {
     return {
@@ -47,9 +47,9 @@ export default {
       );
     },
     inputColor() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
-        ${this.$dm('text-black-900', 'dark:text-slate-50')}
-        ${this.$dm('border-black-200', 'dark:border-black-500')}`;
+      return `${this.getThemeClass('bg-white', 'dark:bg-slate-600')}
+        ${this.getThemeClass('text-black-900', 'dark:text-slate-50')}
+        ${this.getThemeClass('border-black-200', 'dark:border-black-500')}`;
     },
     inputHasError() {
       return this.v$.email.$error

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

@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useDarkMode } from '../useDarkMode';
+import { useMapGetter } from 'dashboard/composables/store';
+
+vi.mock('dashboard/composables/store', () => ({
+  useMapGetter: vi.fn(),
+}));
+
+describe('useDarkMode', () => {
+  let mockDarkMode;
+
+  beforeEach(() => {
+    mockDarkMode = { value: 'light' };
+    vi.mocked(useMapGetter).mockReturnValue(mockDarkMode);
+  });
+
+  it('returns darkMode, prefersDarkMode, and getThemeClass', () => {
+    const result = useDarkMode();
+    expect(result).toHaveProperty('darkMode');
+    expect(result).toHaveProperty('prefersDarkMode');
+    expect(result).toHaveProperty('getThemeClass');
+  });
+
+  describe('prefersDarkMode', () => {
+    it('returns false when darkMode is light', () => {
+      const { prefersDarkMode } = useDarkMode();
+      expect(prefersDarkMode.value).toBe(false);
+    });
+
+    it('returns true when darkMode is dark', () => {
+      mockDarkMode.value = 'dark';
+      const { prefersDarkMode } = useDarkMode();
+      expect(prefersDarkMode.value).toBe(true);
+    });
+
+    it('returns true when darkMode is auto and OS prefers dark mode', () => {
+      mockDarkMode.value = 'auto';
+      vi.spyOn(window, 'matchMedia').mockReturnValue({ matches: true });
+      const { prefersDarkMode } = useDarkMode();
+      expect(prefersDarkMode.value).toBe(true);
+    });
+
+    it('returns false when darkMode is auto and OS prefers light mode', () => {
+      mockDarkMode.value = 'auto';
+      vi.spyOn(window, 'matchMedia').mockReturnValue({ matches: false });
+      const { prefersDarkMode } = useDarkMode();
+      expect(prefersDarkMode.value).toBe(false);
+    });
+  });
+
+  describe('getThemeClass', () => {
+    it('returns light class when darkMode is light', () => {
+      const { getThemeClass } = useDarkMode();
+      expect(getThemeClass('light-class', 'dark-class')).toBe('light-class');
+    });
+
+    it('returns dark class when darkMode is dark', () => {
+      mockDarkMode.value = 'dark';
+      const { getThemeClass } = useDarkMode();
+      expect(getThemeClass('light-class', 'dark-class')).toBe('dark-class');
+    });
+
+    it('returns both classes when darkMode is auto', () => {
+      mockDarkMode.value = 'auto';
+      const { getThemeClass } = useDarkMode();
+      expect(getThemeClass('light-class', 'dark-class')).toBe(
+        'light-class dark-class'
+      );
+    });
+  });
+});

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

@@ -0,0 +1,51 @@
+import { describe, it, expect, vi } from 'vitest';
+import { useReplaceRoute } from '../useReplaceRoute';
+
+vi.mock('dashboard/composables/route', () => ({
+  useRouter: vi.fn(),
+  useRoute: vi.fn(),
+}));
+
+import { useRouter, useRoute } from 'dashboard/composables/route';
+
+describe('useReplaceRoute', () => {
+  const mockReplace = vi.fn();
+  const mockRouter = { replace: mockReplace };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    useRouter.mockReturnValue(mockRouter);
+  });
+
+  it('should replace route when current route is different', () => {
+    useRoute.mockReturnValue({ name: 'currentRoute' });
+    const replaceRoute = useReplaceRoute();
+
+    replaceRoute('newRoute', { id: 1 });
+
+    expect(mockReplace).toHaveBeenCalledWith({
+      name: 'newRoute',
+      params: { id: 1 },
+    });
+  });
+
+  it('should not replace route when current route is the same', () => {
+    useRoute.mockReturnValue({ name: 'sameRoute' });
+    const replaceRoute = useReplaceRoute();
+
+    const result = replaceRoute('sameRoute');
+
+    expect(mockReplace).not.toHaveBeenCalled();
+    expect(result).toBeUndefined();
+  });
+
+  it('should return the result of router.replace when replacing route', () => {
+    useRoute.mockReturnValue({ name: 'currentRoute' });
+    mockReplace.mockReturnValue('replacementResult');
+    const replaceRoute = useReplaceRoute();
+
+    const result = replaceRoute('newRoute');
+
+    expect(result).toBe('replacementResult');
+  });
+});

app/javascript/widget/composables/useDarkMode.js

@@ -0,0 +1,39 @@
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+
+const isDarkModeAuto = mode => mode === 'auto';
+const isDarkMode = mode => mode === 'dark';
+
+const getSystemPreference = () =>
+  window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+
+const calculatePrefersDarkMode = (mode, systemPreference) =>
+  isDarkModeAuto(mode) ? systemPreference : isDarkMode(mode);
+
+const calculateThemeClass = (mode, light, dark) => {
+  if (isDarkModeAuto(mode)) return `${light} ${dark}`;
+  return isDarkMode(mode) ? dark : light;
+};
+
+/**
+ * Composable for handling dark mode.
+ * @returns {Object} An object containing computed properties and methods for dark mode.
+ */
+export function useDarkMode() {
+  const darkMode = useMapGetter('appConfig/darkMode');
+
+  const systemPreference = computed(getSystemPreference);
+
+  const prefersDarkMode = computed(() =>
+    calculatePrefersDarkMode(darkMode.value, systemPreference.value)
+  );
+
+  const getThemeClass = (light, dark) =>
+    calculateThemeClass(darkMode.value, light, dark);
+
+  return {
+    darkMode,
+    prefersDarkMode,
+    getThemeClass,
+  };
+}

app/javascript/widget/composables/useReplaceRoute.js

@@ -0,0 +1,21 @@
+import { useRouter, useRoute } from 'dashboard/composables/route';
+
+/**
+ * Composable for replacing the current route with a new one if it's different.
+ * @param {string} name - The name of the route to replace with.
+ * @param {Object} params - The params to pass to the new route.
+ * @returns {Function} A function that replaces the route when called.
+ */
+export const useReplaceRoute = () => {
+  const router = useRouter();
+  const route = useRoute();
+
+  return (name, params = {}) => {
+    if (route.name !== name) {
+      return router.replace({ name, params });
+    }
+    return undefined;
+  };
+};
+
+export default useReplaceRoute;

app/javascript/widget/mixins/darkModeMixin.js

@@ -1,24 +0,0 @@
-import { mapGetters } from 'vuex';
-
-export default {
-  computed: {
-    ...mapGetters({ darkMode: 'appConfig/darkMode' }),
-    prefersDarkMode() {
-      const isOSOnDarkMode =
-        this.darkMode === 'auto' &&
-        window.matchMedia('(prefers-color-scheme: dark)').matches;
-      return isOSOnDarkMode || this.darkMode === 'dark';
-    },
-  },
-  methods: {
-    $dm(light, dark) {
-      if (this.darkMode === 'light') {
-        return light;
-      }
-      if (this.darkMode === 'dark') {
-        return dark;
-      }
-      return light + ' ' + dark;
-    },
-  },
-};

app/javascript/widget/mixins/routerMixin.js

@@ -1,10 +0,0 @@
-export default {
-  methods: {
-    async replaceRoute(name, params = {}) {
-      if (this.$route.name !== name) {
-        return this.$router.replace({ name, params });
-      }
-      return undefined;
-    },
-  },
-};

app/javascript/widget/mixins/specs/darkModeMixin.spec.js

@@ -1,41 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import darkModeMixin from '../darkModeMixin';
-import Vuex from 'vuex';
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-const darkModeValues = ['light', 'auto'];
-
-describe('darkModeMixin', () => {
-  let getters;
-  let store;
-  beforeEach(() => {
-    getters = {
-      'appConfig/darkMode': () => darkModeValues[0],
-    };
-    store = new Vuex.Store({ getters });
-  });
-
-  it('if light theme', () => {
-    const Component = {
-      render() {},
-      mixins: [darkModeMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.$dm('bg-100', 'bg-600')).toBe('bg-100');
-  });
-
-  it('if auto theme', () => {
-    getters = {
-      'appConfig/darkMode': () => darkModeValues[2],
-    };
-    store = new Vuex.Store({ getters });
-
-    const Component = {
-      render() {},
-      mixins: [darkModeMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.$dm('bg-100', 'bg-600')).toBe('bg-100 bg-600');
-  });
-});

app/javascript/widget/views/Home.vue

@@ -5,6 +5,8 @@ import ArticleCardSkeletonLoader from 'widget/components/ArticleCardSkeletonLoad
 
 import { mapGetters } from 'vuex';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
+import useReplaceRoute from 'widget/composables/useReplaceRoute';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import routerMixin from 'widget/mixins/routerMixin';
 import configMixin from 'widget/mixins/configMixin';
 
@@ -15,7 +17,12 @@ export default {
     TeamAvailability,
     ArticleCardSkeletonLoader,
   },
-  mixins: [configMixin, routerMixin, darkModeMixin],
+  mixins: [configMixin],
+  setup() {
+    const replaceRoute = useReplaceRoute();
+    const { prefersDarkMode } = useDarkMode();
+    return { prefersDarkMode, replaceRoute };
+  },
   computed: {
     ...mapGetters({
       availableAgents: 'agent/availableAgents',

app/javascript/widget/views/PreChatForm.vue

@@ -1,7 +1,7 @@
 <script>
 import PreChatForm from '../components/PreChat/Form.vue';
 import configMixin from '../mixins/configMixin';
-import routerMixin from '../mixins/routerMixin';
+import useReplaceRoute from 'widget/composables/useReplaceRoute';
 import { isEmptyObject } from 'widget/helpers/utils';
 import { ON_CONVERSATION_CREATED } from '../constants/widgetBusEvents';
 
@@ -9,7 +9,11 @@ export default {
   components: {
     PreChatForm,
   },
-  mixins: [configMixin, routerMixin],
+  mixins: [configMixin],
+  setup() {
+    const replaceRoute = useReplaceRoute();
+    return { replaceRoute };
+  },
   mounted() {
     this.$emitter.on(ON_CONVERSATION_CREATED, () => {
       // Redirect to messages page after conversation is created

package.json

@@ -31,7 +31,7 @@
   "dependencies": {
     "@braid/vue-formulate": "^2.5.2",
     "@chatwoot/ninja-keys": "1.2.3",
-    "@chatwoot/prosemirror-schema": "1.0.11",
+    "@chatwoot/prosemirror-schema": "1.0.17",
     "@chatwoot/utils": "^0.0.25",
     "@hcaptcha/vue-hcaptcha": "^0.3.2",
     "@june-so/analytics-next": "^2.0.0",

spec/controllers/api/v1/upload_controller_spec.rb

@@ -1,42 +1,112 @@
 require 'rails_helper'
 
 RSpec.describe 'Api::V1::Accounts::UploadController', type: :request do
-  describe 'POST /api/v1/account/1/upload/' do
-    let(:account) { create(:account) }
-    let(:user) { create(:user, account: account) }
+  let(:account) { create(:account) }
+  let(:user) { create(:user, account: account) }
+  let(:upload_url) { "/api/v1/accounts/#{account.id}/upload/" }
 
-    it 'uploads the image when authorized' do
-      file = fixture_file_upload(Rails.root.join('spec/assets/avatar.png'), 'image/png')
+  describe 'POST /api/v1/accounts/:account_id/upload/' do
+    context 'when uploading a file' do
+      let(:file) { fixture_file_upload(Rails.root.join('spec/assets/avatar.png'), 'image/png') }
 
-      post "/api/v1/accounts/#{account.id}/upload/",
-           headers: user.create_new_auth_token,
-           params: { attachment: file }
+      it 'uploads the image when authorized' do
+        post upload_url,
+             headers: user.create_new_auth_token,
+             params: { attachment: file }
 
-      expect(response).to have_http_status(:success)
-      blob = response.parsed_body
+        expect(response).to have_http_status(:success)
+        blob = response.parsed_body
+        expect(blob['errors']).to be_nil
+        expect(blob['file_url']).to be_present
+        expect(blob['blob_key']).to be_present
+        expect(blob['blob_id']).to be_present
+      end
 
-      expect(blob['errors']).to be_nil
+      it 'does not upload when unauthorized' do
+        post upload_url,
+             headers: {},
+             params: { attachment: file }
 
-      expect(blob['file_url']).to be_present
-      expect(blob['blob_key']).to be_present
-      expect(blob['blob_id']).to be_present
+        expect(response).to have_http_status(:unauthorized)
+        blob = response.parsed_body
+        expect(blob['errors']).to be_present
+        expect(blob['file_url']).to be_nil
+        expect(blob['blob_key']).to be_nil
+        expect(blob['blob_id']).to be_nil
+      end
     end
 
-    it 'does not upload when un-authorized' do
-      file = fixture_file_upload(Rails.root.join('spec/assets/avatar.png'), 'image/png')
+    context 'when uploading from a URL' do
+      let(:valid_external_url) { 'http://example.com/image.jpg' }
 
-      post "/api/v1/accounts/#{account.id}/upload/",
-           headers: {},
-           params: { attachment: file }
+      before do
+        stub_request(:get, valid_external_url)
+          .to_return(status: 200, body: File.new(Rails.root.join('spec/assets/avatar.png')), headers: { 'Content-Type' => 'image/png' })
+      end
 
-      expect(response).to have_http_status(:unauthorized)
-      blob = response.parsed_body
+      it 'uploads the image from URL when authorized' do
+        post upload_url,
+             headers: user.create_new_auth_token,
+             params: { external_url: valid_external_url }
 
-      expect(blob['errors']).to be_present
+        expect(response).to have_http_status(:success)
+        blob = response.parsed_body
+        expect(blob['error']).to be_nil
+        expect(blob['file_url']).to be_present
+        expect(blob['blob_key']).to be_present
+        expect(blob['blob_id']).to be_present
+      end
 
-      expect(blob['file_url']).to be_nil
-      expect(blob['blob_key']).to be_nil
-      expect(blob['blob_id']).to be_nil
+      it 'handles invalid URL format' do
+        post upload_url,
+             headers: user.create_new_auth_token,
+             params: { external_url: 'not_a_url' }
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(response.parsed_body['error']).to eq('Invalid URL provided')
+      end
+
+      it 'handles URL with unsupported protocol' do
+        post upload_url,
+             headers: user.create_new_auth_token,
+             params: { external_url: 'ftp://example.com/image.jpg' }
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(response.parsed_body['error']).to eq('Invalid URL provided')
+      end
+
+      it 'handles unreachable URLs' do
+        stub_request(:get, 'http://nonexistent.example.com')
+          .to_raise(SocketError.new('Failed to open TCP connection'))
+
+        post upload_url,
+             headers: user.create_new_auth_token,
+             params: { external_url: 'http://nonexistent.example.com' }
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(response.parsed_body['error']).to eq('Invalid URL provided')
+      end
+
+      it 'handles HTTP errors' do
+        stub_request(:get, 'http://error.example.com')
+          .to_return(status: 404)
+
+        post upload_url,
+             headers: user.create_new_auth_token,
+             params: { external_url: 'http://error.example.com' }
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(response.parsed_body['error']).to start_with('Failed to fetch file from URL')
+      end
+    end
+
+    it 'returns an error when no file or URL is provided' do
+      post upload_url,
+           headers: user.create_new_auth_token,
+           params: {}
+
+      expect(response).to have_http_status(:unprocessable_entity)
+      expect(response.parsed_body['error']).to eq('No file or URL provided')
     end
   end
 end

spec/enterprise/controllers/api/v1/accounts/custom_roles_controller_spec.rb

@@ -69,7 +69,8 @@ RSpec.describe 'Custom Roles API', type: :request do
 
   describe 'POST #create' do
     let(:valid_params) do
-      { custom_role: { name: 'Support', description: 'Support role', permissions: CustomRole::PERMISSIONS.sample(SecureRandom.random_number(4)) } }
+      { custom_role: { name: 'Support', description: 'Support role',
+                       permissions: CustomRole::PERMISSIONS.sample(SecureRandom.random_number(1..4)) } }
     end
 
     context 'when it is an authenticated administrator' do

spec/factories/custom_roles.rb

@@ -3,6 +3,6 @@ FactoryBot.define do
     account
     name { Faker::Name.name }
     description { Faker::Lorem.sentence }
-    permissions { CustomRole::PERMISSIONS.sample(SecureRandom.random_number(4)) }
+    permissions { CustomRole::PERMISSIONS.sample(SecureRandom.random_number(1..4)) }
   end
 end

yarn.lock

@@ -2914,10 +2914,10 @@
     hotkeys-js "3.8.7"
     lit "2.2.6"
 
-"@chatwoot/prosemirror-schema@1.0.11":
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/@chatwoot/prosemirror-schema/-/prosemirror-schema-1.0.11.tgz#b66201be8b09cd4c6370a60607cc5d4f9d924bdb"
-  integrity sha512-OAUa1CuHtetEPh/ZhRkMLVQHY2/eesCRb2IRdVzjh0z+4spp3fG826y8FbOEsa7m4hisNirnGF/mDH+NMmYetw==
+"@chatwoot/prosemirror-schema@1.0.17":
+  version "1.0.17"
+  resolved "https://registry.yarnpkg.com/@chatwoot/prosemirror-schema/-/prosemirror-schema-1.0.17.tgz#5c04a94c8200b303d943369b2534730d5ba15a64"
+  integrity sha512-3hwBSMdb5a+Ilct0fNSlAvQu/9+pnyI/FoGshVRC9Hn1tCdZdS7LUlxOuDweta3HneVclhE+SxJN5lM33v5WGw==
   dependencies:
     markdown-it-sup "^1.0.0"
     prosemirror-commands "^1.1.4"