Merge branch 'develop' into chore-global-config-mixin

2024-09-11 14:42:39 +05:30
parent 4a0f0e759f 2c17c95eab
commit 1b7e6e5ab8
30 changed files with 759 additions and 196 deletions
@@ -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,
      },
    };
@@ -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"
@@ -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];

@@ -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>
@@ -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>
@@ -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)"
        />
@@ -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() {
@@ -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>
@@ -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>
@@ -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',
@@ -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 };
+};
@@ -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();
+    });
+  });
+});
@@ -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'
+      );
+    });
  });
 });
@@ -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 {
@@ -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",
@@ -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",
@@ -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"
@@ -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)"
        />
@@ -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({
@@ -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');
+    });
+  });
 });
@@ -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);
@@ -7,4 +7,5 @@ export const MESSAGE_MAX_LENGTH = {
  FACEBOOK: 1000,
  TWILIO_SMS: 320,
  TWILIO_WHATSAPP: 1600,
+  EMAIL: 25000,
 };