From e95680e80057f4e06d9f8b2b0a54fe5f10c0e34c Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <iamwishnu@gmail.com>
Date: Mon, 2 Dec 2024 15:47:54 +0530
Subject: [PATCH 1/5] feat: remove stale ONLINE_PRESENCE contact keys in redis
 (#9558)

50% of Redis memory size comes from ONLINE_PRESENCE keys. This PR adds a
periodic job to remove stale keys from all accounts.
---
 app/jobs/internal/process_stale_redis_keys_job.rb  | 11 +++++++++++
 app/jobs/internal/remove_stale_redis_keys_job.rb   | 14 ++++++++++++++
 .../internal/remove_stale_redis_keys_service.rb    | 10 ++++++++++
 config/schedule.yml                                |  7 +++++++
 4 files changed, 42 insertions(+)
 create mode 100644 app/jobs/internal/process_stale_redis_keys_job.rb
 create mode 100644 app/jobs/internal/remove_stale_redis_keys_job.rb
 create mode 100644 app/services/internal/remove_stale_redis_keys_service.rb

diff --git a/app/jobs/internal/process_stale_redis_keys_job.rb b/app/jobs/internal/process_stale_redis_keys_job.rb
new file mode 100644
index 000000000..3afb3b434
--- /dev/null
+++ b/app/jobs/internal/process_stale_redis_keys_job.rb
@@ -0,0 +1,11 @@
+# housekeeping
+# remove contact inboxes that does not have any conversations
+# and are older than 3 months
+
+class Internal::ProcessStaleRedisKeysJob < ApplicationJob
+  queue_as :low
+
+  def perform(account)
+    Internal::RemoveStaleRedisKeysService.new(account_id: account.id).perform
+  end
+end
diff --git a/app/jobs/internal/remove_stale_redis_keys_job.rb b/app/jobs/internal/remove_stale_redis_keys_job.rb
new file mode 100644
index 000000000..667fa398b
--- /dev/null
+++ b/app/jobs/internal/remove_stale_redis_keys_job.rb
@@ -0,0 +1,14 @@
+# housekeeping
+# ensure stale ONLINE PRESENCE KEYS for contacts are removed periodically
+# should result in 50% redis mem size reduction
+
+class Internal::RemoveStaleRedisKeysJob < ApplicationJob
+  queue_as :scheduled_jobs
+
+  def perform
+    Account.find_each do |account|
+      Rails.logger.info "Enqueuing ProcessStaleRedisKeysJob for account #{account.id}"
+      Internal::ProcessStaleRedisKeysJob.perform_later(account)
+    end
+  end
+end
diff --git a/app/services/internal/remove_stale_redis_keys_service.rb b/app/services/internal/remove_stale_redis_keys_service.rb
new file mode 100644
index 000000000..a3e1da207
--- /dev/null
+++ b/app/services/internal/remove_stale_redis_keys_service.rb
@@ -0,0 +1,10 @@
+class Internal::RemoveStaleRedisKeysService
+  pattr_initialize [:account_id!]
+
+  def perform(account_id)
+    range_start = (Time.zone.now - PRESENCE_DURATION).to_i
+    # exclusive minimum score is specified by prefixing (
+    # we are clearing old records because this could clogg up the sorted set
+    ::Redis::Alfred.zremrangebyscore(presence_key(account_id, 'Contact'), '-inf', "(#{range_start}")
+  end
+end
diff --git a/config/schedule.yml b/config/schedule.yml
index 7a0d2faeb..a92960db8 100644
--- a/config/schedule.yml
+++ b/config/schedule.yml
@@ -26,3 +26,10 @@ remove_stale_contact_inboxes_job.rb:
   cron: '30 22 * * *'
   class: 'Internal::RemoveStaleContactInboxesJob'
   queue: scheduled_jobs
+
+# executed daily at 2230 UTC
+# which is our lowest traffic time
+remove_stale_redis_keys_job.rb:
+  cron: '30 22 * * *'
+  class: 'Internal::RemoveStaleRedisKeysJob'
+  queue: scheduled_jobs

From 0ab7accd3fe3c99e877882841156bffcc1b00fe1 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 2 Dec 2024 16:22:05 +0530
Subject: [PATCH 2/5] feat: Contact filter preview (#10516)

# Pull Request Template

## Description

**Screenshots**
<img width="986" alt="image"
src="https://github.com/user-attachments/assets/8df44237-ec51-45d3-aed3-518cded42f5d">

<img width="986" alt="image"
src="https://github.com/user-attachments/assets/2213ce2e-2461-41f0-a05a-0f955a4d7e3a">

**Story**
<img width="992" alt="image"
src="https://github.com/user-attachments/assets/f8e25fe2-11e8-4b9b-8d0b-357f9b7b6e39">
---
 .../Contacts/ContactsHeader/ContactHeader.vue |   4 +-
 .../ContactListHeaderWrapper.vue              |   1 -
 .../ContactsActiveFiltersPreview.vue          |  29 +++++
 .../Contacts/ContactsListLayout.vue           |   7 +-
 .../Contacts/Pages/ContactsList.vue           |   2 +-
 .../HelpCenter/HelpCenterLayout.vue           |   1 +
 .../ArticleEditorControls.vue                 |   3 +
 .../ArticleEditorProperties.vue               |   1 +
 .../PortalSwitcher/PortalSwitcher.vue         |   2 +
 .../components-next/button/Button.story.vue   |   9 +-
 .../components-next/button/Button.vue         |   7 +-
 .../filter/ActiveFilterPreview.story.vue      |  66 ++++++++++
 .../filter/ActiveFilterPreview.vue            | 117 ++++++++++++++++++
 .../filter/fixtures/filterTypes.js            |  45 +++++++
 .../filter/helper/filterHelper.js             |   8 ++
 .../filter/helper/filterHelper.spec.js        |  11 ++
 .../pagination/PaginationFooter.vue           |   4 +
 .../dashboard/i18n/locale/en/contact.json     |   7 +-
 .../contacts/pages/ContactsIndex.vue          |   1 +
 19 files changed, 313 insertions(+), 12 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/ActiveFilterPreview.story.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
index b5511f7e0..6e32b8581 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -54,9 +54,9 @@ const emit = defineEmits([
 </script>
 
 <template>
-  <header class="sticky top-0 z-10 px-6 xl:px-0">
+  <header class="sticky top-0 z-10">
     <div
-      class="flex items-center justify-between w-full h-20 gap-2 mx-auto max-w-[960px]"
+      class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[960px]"
     >
       <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
index d9ea3982e..5b27bcf17 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
@@ -176,7 +176,6 @@ const closeAdvanceFiltersModal = () => {
 };
 
 const clearFilters = async () => {
-  await store.dispatch('contacts/clearContactFilters');
   emit('clearFilters');
 };
 
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
new file mode 100644
index 000000000..b70cfe72d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import ActiveFilterPreview from 'dashboard/components-next/filter/ActiveFilterPreview.vue';
+
+const emit = defineEmits(['clearFilters']);
+
+const { t } = useI18n();
+
+const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
+</script>
+
+<template>
+  <ActiveFilterPreview
+    :applied-filters="appliedFilters"
+    :max-visible-filters="2"
+    :more-filters-label="
+      t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.MORE_FILTERS', {
+        count: appliedFilters.length - 2,
+      })
+    "
+    :clear-button-label="
+      t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
+    "
+    class="max-w-[960px] px-6"
+    @clear-filters="emit('clearFilters')"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
index d408a314a..1727cf21b 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
 import ContactListHeaderWrapper from 'dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue';
+import ContactsActiveFiltersPreview from 'dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 
 defineProps({
@@ -90,8 +91,12 @@ const updateCurrentPage = page => {
         @apply-filter="emit('applyFilter', $event)"
         @clear-filters="emit('clearFilters')"
       />
-      <main class="flex-1 px-6 overflow-y-auto xl:px-px">
+      <main class="flex-1 overflow-y-auto">
         <div class="w-full mx-auto max-w-[960px]">
+          <ContactsActiveFiltersPreview
+            v-if="hasAppliedFilters && isNotSegmentView"
+            @clear-filters="emit('clearFilters')"
+          />
           <slot name="default" />
         </div>
       </main>
diff --git a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
index 02e86d4de..1ca94ecaf 100644
--- a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
+++ b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
@@ -58,7 +58,7 @@ const toggleExpanded = id => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-4 p-6">
+  <div class="flex flex-col gap-4 px-6 pt-4 pb-6">
     <ContactsCard
       v-for="contact in contacts"
       :id="contact.id"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
index b05d5d3f2..9e3c9ee1e 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
@@ -76,6 +76,7 @@ const togglePortalSwitcher = () => {
               <Button
                 icon="i-lucide-chevron-down"
                 variant="ghost"
+                color="slate"
                 size="xs"
                 class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3"
                 @click="togglePortalSwitcher"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
index 6b2c3543d..d46fb5264 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
@@ -182,6 +182,7 @@ onMounted(() => {
       <OnClickOutside @trigger="openAgentsList = false">
         <Button
           variant="ghost"
+          color="slate"
           class="!px-0 font-normal hover:!bg-transparent"
           text-variant="info"
           @click="openAgentsList = !openAgentsList"
@@ -214,6 +215,7 @@ onMounted(() => {
           "
           :icon="!selectedCategory?.icon ? 'i-lucide-shapes' : ''"
           variant="ghost"
+          color="slate"
           class="!px-2 font-normal hover:!bg-transparent"
           @click="openCategoryList = !openCategoryList"
         >
@@ -244,6 +246,7 @@ onMounted(() => {
           "
           icon="i-lucide-plus"
           variant="ghost"
+          color="slate"
           :disabled="isNewArticle"
           class="!px-2 font-normal hover:!bg-transparent hover:!text-n-slate-11"
           @click="openProperties = !openProperties"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
index 0a49be942..e957948b2 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
@@ -66,6 +66,7 @@ onMounted(() => {
         icon="i-lucide-x"
         size="sm"
         variant="ghost"
+        color="slate"
         class="hover:text-n-slate-11"
         @click="emit('close')"
       />
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
index a182c78d3..1b4668b91 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
@@ -108,6 +108,7 @@ const redirectToPortalHomePage = () => {
           <Button
             icon="i-lucide-arrow-up-right"
             variant="ghost"
+            color="slate"
             icon-lib="lucide"
             size="sm"
             class="!w-6 !h-6 hover:bg-n-slate-2 text-n-slate-11 !p-0.5 rounded-md"
@@ -133,6 +134,7 @@ const redirectToPortalHomePage = () => {
         :key="index"
         :label="portal.name"
         variant="ghost"
+        color="slate"
         trailing-icon
         :icon="isPortalActive(portal) ? 'i-lucide-check' : ''"
         class="!justify-end !px-2 !py-2 hover:!bg-n-alpha-2 [&>.i-lucide-check]:text-n-teal-10 h-9"
diff --git a/app/javascript/dashboard/components-next/button/Button.story.vue b/app/javascript/dashboard/components-next/button/Button.story.vue
index fc0904156..404712b34 100644
--- a/app/javascript/dashboard/components-next/button/Button.story.vue
+++ b/app/javascript/dashboard/components-next/button/Button.story.vue
@@ -114,8 +114,13 @@ const SIZES = ['default', 'sm', 'lg'];
     <!-- Ghost & Link Variants -->
     <Variant title="Ghost & Link Variants">
       <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Ghost Button" variant="ghost" />
-        <Button label="Ghost with Icon" variant="ghost" icon="i-lucide-plus" />
+        <Button label="Ghost Button" variant="ghost" color="slate" />
+        <Button
+          label="Ghost with Icon"
+          variant="ghost"
+          color="slate"
+          icon="i-lucide-plus"
+        />
         <Button label="Link Button" variant="link" />
         <Button label="Link with Icon" variant="link" icon="i-lucide-plus" />
       </div>
diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index b174ca375..fecdbaf9b 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -88,6 +88,7 @@ const STYLE_CONFIG = {
       faded:
         'bg-n-brand/10 text-n-blue-text hover:bg-n-brand/20 outline-transparent',
       outline: 'text-n-blue-text outline-n-blue-border',
+      ghost: 'text-n-blue-text hover:bg-n-alpha-2 outline-transparent',
       link: 'text-n-blue-text hover:underline outline-transparent',
     },
     ruby: {
@@ -95,6 +96,7 @@ const STYLE_CONFIG = {
       faded:
         'bg-n-ruby-9/10 text-n-ruby-11 hover:bg-n-ruby-9/20 outline-transparent',
       outline: 'text-n-ruby-11 hover:bg-n-ruby-9/10 outline-n-ruby-8',
+      ghost: 'text-n-ruby-11 hover:bg-n-alpha-2 outline-transparent',
       link: 'text-n-ruby-9 hover:underline outline-transparent',
     },
     amber: {
@@ -103,6 +105,7 @@ const STYLE_CONFIG = {
         'bg-n-amber-9/10 text-n-slate-12 hover:bg-n-amber-9/20 outline-transparent',
       outline: 'text-n-amber-11 hover:bg-n-amber-9/10 outline-n-amber-9',
       link: 'text-n-amber-9 hover:underline outline-transparent',
+      ghost: 'text-n-amber-9 hover:bg-n-alpha-2 outline-transparent',
     },
     slate: {
       solid:
@@ -111,6 +114,7 @@ const STYLE_CONFIG = {
         'bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20 outline-transparent',
       outline: 'text-n-slate-11 outline-n-strong hover:bg-n-slate-9/10',
       link: 'text-n-slate-11 hover:text-n-slate-12 hover:underline outline-transparent',
+      ghost: 'text-n-slate-12 hover:bg-n-alpha-2 outline-transparent',
     },
     teal: {
       solid: 'bg-n-teal-9 text-white hover:bg-n-teal-10 outline-transparent',
@@ -118,6 +122,7 @@ const STYLE_CONFIG = {
         'bg-n-teal-9/10 text-n-slate-12 hover:bg-n-teal-9/20 outline-transparent',
       outline: 'text-n-teal-11 hover:bg-n-teal-9/10 outline-n-teal-9',
       link: 'text-n-teal-9 hover:underline outline-transparent',
+      ghost: 'text-n-teal-9 hover:bg-n-alpha-2 outline-transparent',
     },
   },
   sizes: {
@@ -151,7 +156,7 @@ const STYLE_CONFIG = {
 
 const variantClasses = computed(() => {
   const variantMap = {
-    ghost: 'text-n-slate-12 hover:bg-n-alpha-2 outline-transparent',
+    ghost: `${STYLE_CONFIG.colors[computedColor.value].ghost}`,
     link: `${STYLE_CONFIG.colors[computedColor.value].link} p-0 font-medium underline-offset-4`,
     outline: STYLE_CONFIG.colors[computedColor.value].outline,
     faded: STYLE_CONFIG.colors[computedColor.value].faded,
diff --git a/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.story.vue b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.story.vue
new file mode 100644
index 000000000..0c79b97da
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.story.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { sampleActiveFilters } from './fixtures/filterTypes';
+import ActiveFilterPreview from './ActiveFilterPreview.vue';
+
+const appliedFilters = ref([...sampleActiveFilters]);
+const maxVisibleFilters = ref(2);
+
+const moreFiltersLabel = computed(
+  () => `${appliedFilters.value.length - maxVisibleFilters.value} more filters`
+);
+</script>
+
+<template>
+  <Story
+    title="Components/Filters/ActiveFilterPreview"
+    :layout="{ type: 'grid', width: '960px' }"
+  >
+    <Variant title="Default (2 visible filters)">
+      <ActiveFilterPreview
+        :applied-filters="appliedFilters.slice(0, 2)"
+        :max-visible-filters="2"
+        clear-button-label="Clear Filters"
+        more-filters-label=""
+        @clear-filters="() => {}"
+      />
+    </Variant>
+
+    <Variant title="Multiple Filters (with more indicator)">
+      <ActiveFilterPreview
+        :applied-filters="appliedFilters"
+        :max-visible-filters="maxVisibleFilters"
+        clear-button-label="Clear Filters"
+        :more-filters-label="moreFiltersLabel"
+        @clear-filters="() => {}"
+      />
+    </Variant>
+
+    <Variant title="Show All Filters">
+      <ActiveFilterPreview
+        :applied-filters="appliedFilters"
+        :max-visible-filters="10"
+        clear-button-label="Clear Filters"
+        @clear-filters="() => {}"
+      />
+    </Variant>
+
+    <Variant title="Single Filter">
+      <ActiveFilterPreview
+        :applied-filters="[appliedFilters[0]]"
+        :max-visible-filters="maxVisibleFilters"
+        clear-button-label="Clear Filters"
+        @clear-filters="() => {}"
+      />
+    </Variant>
+
+    <Variant title="With Object Values">
+      <ActiveFilterPreview
+        :applied-filters="[appliedFilters[6]]"
+        :max-visible-filters="maxVisibleFilters"
+        clear-button-label="Clear Filters"
+        @clear-filters="() => {}"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue
new file mode 100644
index 000000000..b35569a8b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue
@@ -0,0 +1,117 @@
+<script setup>
+import { replaceUnderscoreWithSpace } from './helper/filterHelper.js';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  appliedFilters: {
+    type: Array,
+    default: () => [],
+  },
+  maxVisibleFilters: {
+    type: Number,
+    default: 2,
+  },
+  clearButtonLabel: {
+    type: String,
+    default: '',
+  },
+  moreFiltersLabel: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['clearFilters']);
+
+const shouldCapitalizeFirstLetter = key => {
+  const lowercaseKeys = ['email'];
+  return !lowercaseKeys.includes(key);
+};
+
+const formatOperatorLabel = operator => {
+  const operators = {
+    equal_to: 'is',
+    not_equal_to: 'is not',
+    contains: 'contains',
+    does_not_contain: 'does not contain',
+    is_present: 'is present',
+    is_not_present: 'is not present',
+    is_greater_than: 'is greater than',
+    is_less_than: 'is less than',
+    days_before: 'days before',
+  };
+  return operators[operator] || replaceUnderscoreWithSpace(operator);
+};
+
+const formatFilterValue = value => {
+  if (!value) return '';
+  if (typeof value === 'object' && value.name) {
+    return value.name;
+  }
+  return value;
+};
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center w-full gap-2 mx-auto">
+    <template
+      v-for="(filter, index) in appliedFilters"
+      :key="filter.attributeKey"
+    >
+      <div
+        v-if="index < maxVisibleFilters"
+        class="inline-flex items-center gap-2 h-7"
+      >
+        <div
+          class="flex items-center h-full min-w-0 gap-1 px-2 py-1 text-xs border rounded-lg max-w-72 border-n-weak"
+        >
+          <span
+            class="lowercase whitespace-nowrap first-letter:capitalize text-n-slate-12"
+          >
+            {{ replaceUnderscoreWithSpace(filter.attributeKey) }}
+          </span>
+          <span class="px-1 text-xs text-n-slate-10 whitespace-nowrap">
+            {{ formatOperatorLabel(filter.filterOperator) }}
+          </span>
+          <span
+            v-if="filter.values"
+            class="lowercase truncate text-n-slate-12"
+            :class="{
+              'first-letter:capitalize': shouldCapitalizeFirstLetter(
+                filter.attributeKey
+              ),
+            }"
+          >
+            {{ formatFilterValue(filter.values) }}
+          </span>
+        </div>
+        <template
+          v-if="
+            index < maxVisibleFilters - 1 && index < appliedFilters.length - 1
+          "
+        >
+          <span
+            class="content-center h-full px-1 text-xs font-medium uppercase rounded-lg text-n-slate-10"
+          >
+            {{ filter.queryOperator }}
+          </span>
+        </template>
+      </div>
+    </template>
+    <div
+      v-if="appliedFilters.length > maxVisibleFilters"
+      class="inline-flex items-center content-center px-1 text-xs rounded-lg text-n-slate-10 h-7"
+    >
+      {{ moreFiltersLabel }}
+    </div>
+    <div class="w-px h-3 rounded-lg bg-n-strong" />
+    <Button
+      :label="clearButtonLabel"
+      size="xs"
+      class="!px-1"
+      variant="ghost"
+      @click="emit('clearFilters')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js b/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js
index fcec5eb08..0eb618535 100644
--- a/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js
+++ b/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js
@@ -556,3 +556,48 @@ export const filterTypes = [
     attributeModel: 'customAttributes',
   },
 ];
+
+export const sampleActiveFilters = [
+  {
+    attributeKey: 'name',
+    filterOperator: 'contains',
+    values: 'John',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'email',
+    filterOperator: 'does_not_contain',
+    values: 'test@chatwoot.com',
+    queryOperator: 'or',
+  },
+  {
+    attributeKey: 'phone_number',
+    filterOperator: 'is_present',
+    values: '+928383822',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'created_at',
+    filterOperator: 'is_greater_than',
+    values: '2024-01-01',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'last_activity',
+    filterOperator: 'days_before',
+    values: '30',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'date_of_birth',
+    filterOperator: 'is_not_present',
+    values: '',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'country',
+    filterOperator: 'not_equal_to',
+    values: { id: 1, name: 'India' },
+    queryOperator: 'and',
+  },
+];
diff --git a/app/javascript/dashboard/components-next/filter/helper/filterHelper.js b/app/javascript/dashboard/components-next/filter/helper/filterHelper.js
index f1fc0c452..2160365f6 100644
--- a/app/javascript/dashboard/components-next/filter/helper/filterHelper.js
+++ b/app/javascript/dashboard/components-next/filter/helper/filterHelper.js
@@ -39,3 +39,11 @@ export const buildAttributesFilterTypes = (attributes, getOperatorTypes) => {
     attributeModel: 'customAttributes',
   }));
 };
+
+/**
+ * Replaces underscores with spaces in a string
+ * @param {string} text - The input string
+ * @returns {string} The string with underscores replaced by spaces
+ */
+export const replaceUnderscoreWithSpace = text =>
+  text?.replaceAll('_', ' ') ?? '';
diff --git a/app/javascript/dashboard/components-next/filter/helper/filterHelper.spec.js b/app/javascript/dashboard/components-next/filter/helper/filterHelper.spec.js
index 7db5cb2d2..58cf92cf3 100644
--- a/app/javascript/dashboard/components-next/filter/helper/filterHelper.spec.js
+++ b/app/javascript/dashboard/components-next/filter/helper/filterHelper.spec.js
@@ -1,6 +1,7 @@
 import {
   getCustomAttributeInputType,
   buildAttributesFilterTypes,
+  replaceUnderscoreWithSpace,
 } from './filterHelper';
 
 describe('filterHelper', () => {
@@ -123,4 +124,14 @@ describe('filterHelper', () => {
       expect(result).toEqual([]);
     });
   });
+
+  describe('replaceUnderscoreWithSpace', () => {
+    it('replaces underscores with spaces', () => {
+      expect(replaceUnderscoreWithSpace('test_key')).toBe('test key');
+    });
+
+    it('returns empty string if input is null', () => {
+      expect(replaceUnderscoreWithSpace(null)).toBe('');
+    });
+  });
 });
diff --git a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
index a3324a618..4f6f47c85 100644
--- a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
+++ b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
@@ -75,6 +75,7 @@ const pageInfo = computed(() => {
         icon="i-lucide-chevrons-left"
         variant="ghost"
         size="sm"
+        color="slate"
         class="!w-8 !h-6"
         :disabled="isFirstPage"
         @click="changePage(1)"
@@ -82,6 +83,7 @@ const pageInfo = computed(() => {
       <Button
         icon="i-lucide-chevron-left"
         variant="ghost"
+        color="slate"
         size="sm"
         class="!w-8 !h-6"
         :disabled="isFirstPage"
@@ -96,6 +98,7 @@ const pageInfo = computed(() => {
       <Button
         icon="i-lucide-chevron-right"
         variant="ghost"
+        color="slate"
         size="sm"
         class="!w-8 !h-6"
         :disabled="isLastPage"
@@ -104,6 +107,7 @@ const pageInfo = computed(() => {
       <Button
         icon="i-lucide-chevrons-right"
         variant="ghost"
+        color="slate"
         size="sm"
         class="!w-8 !h-6"
         :disabled="isLastPage"
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index a99a78eb2..5a0257e0b 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -491,10 +491,9 @@
         "LABEL": "Segment name",
         "INPUT_PLACEHOLDER": "Enter the name of the segment"
       },
-      "GROUPS": {
-        "STANDARD_FILTERS": "Standard filters",
-        "ADDITIONAL_FILTERS": "Additional filters",
-        "CUSTOM_ATTRIBUTES": "Custom attributes"
+      "ACTIVE_FILTERS": {
+        "MORE_FILTERS": "+ {count} more filters",
+        "CLEAR_FILTERS": "Clear filters"
       }
     },
     "CARD": {
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
index a54ea3c0d..af18ea684 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
@@ -118,6 +118,7 @@ const getCommonFetchParams = (page = 1) => ({
 });
 
 const fetchContacts = async (page = 1) => {
+  await store.dispatch('contacts/clearContactFilters');
   await store.dispatch('contacts/get', getCommonFetchParams(page));
   updatePageParam(page);
 };

From 86bd339a47f89ae61ed00545b815b9235bd1c925 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 2 Dec 2024 18:16:33 -0800
Subject: [PATCH 3/5] chore(deps): bump vue-i18n from 9.14.0 to 9.14.2 (#10526)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bumps
[vue-i18n](https://github.com/intlify/vue-i18n/tree/HEAD/packages/vue-i18n)
from 9.14.0 to 9.14.2.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/intlify/vue-i18n/releases">vue-i18n's
releases</a>.</em></p>
<blockquote>
<h2>v9.14.2</h2>
<!-- raw HTML omitted -->
<h2>What's Changed</h2>
<h3>🔒 Security Fixes</h3>
<ul>
<li>fix: XSS vulnerability with prototype pollution on AST: <a
href="https://github.com/intlify/vue-i18n/security/advisories/GHSA-9r9m-ffp6-9x4v">https://github.com/intlify/vue-i18n/security/advisories/GHSA-9r9m-ffp6-9x4v</a></li>
<li>fix: prototype pollusion on deepCopy: <a
href="https://github.com/intlify/vue-i18n/security/advisories/GHSA-hjwq-mjwj-4x6c">https://github.com/intlify/vue-i18n/security/advisories/GHSA-hjwq-mjwj-4x6c</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a
href="https://github.com/intlify/vue-i18n/compare/v9.14.1...v9.14.2">https://github.com/intlify/vue-i18n/compare/v9.14.1...v9.14.2</a></p>
<h2>v9.14.1</h2>
<!-- raw HTML omitted -->
<h2>What's Changed</h2>
<h3>🐛 Bug Fixes</h3>
<ul>
<li>fix: messages <code>deepCopy</code> mutates <code>src</code>
arguments by <a
href="https://github.com/BobbieGoede"><code>@​BobbieGoede</code></a> in
<a
href="https://redirect.github.com/intlify/vue-i18n/pull/1975">intlify/vue-i18n#1975</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a
href="https://github.com/intlify/vue-i18n/compare/v9.14.0...v9.14.1">https://github.com/intlify/vue-i18n/compare/v9.14.0...v9.14.1</a></p>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/intlify/vue-i18n/commit/5448139375d123c90019f372404de6138ff6b588"><code>5448139</code></a>
release: v9.14.2</li>
<li><a
href="https://github.com/intlify/vue-i18n/commit/af67265181fa776dab006afbab85de6a47a34d66"><code>af67265</code></a>
release: v9.14.1</li>
<li>See full diff in <a
href="https://github.com/intlify/vue-i18n/commits/v9.14.2/packages/vue-i18n">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=vue-i18n&package-manager=npm_and_yarn&previous-version=9.14.0&new-version=9.14.2)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/chatwoot/chatwoot/network/alerts).

</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json   |  2 +-
 pnpm-lock.yaml | 40 ++++++++++++++++++++--------------------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 8fe4b5657..5978f3696 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,7 @@
     "vue-chartjs": "5.3.1",
     "vue-datepicker-next": "^1.0.3",
     "vue-dompurify-html": "^5.1.0",
-    "vue-i18n": "9.14.0",
+    "vue-i18n": "9.14.2",
     "vue-letter": "^0.2.0",
     "vue-multiselect": "3.1.0",
     "vue-router": "~4.4.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 679f94325..e11ba6920 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -194,8 +194,8 @@ importers:
         specifier: ^5.1.0
         version: 5.1.0(vue@3.5.12(typescript@5.6.2))
       vue-i18n:
-        specifier: 9.14.0
-        version: 9.14.0(vue@3.5.12(typescript@5.6.2))
+        specifier: 9.14.2
+        version: 9.14.2(vue@3.5.12(typescript@5.6.2))
       vue-letter:
         specifier: ^0.2.0
         version: 0.2.0
@@ -905,16 +905,16 @@ packages:
   '@internationalized/number@3.5.4':
     resolution: {integrity: sha512-h9huwWjNqYyE2FXZZewWqmCdkw1HeFds5q4Siuoms3hUQC5iPJK3aBmkFZoDSLN4UD0Bl8G22L/NdHpeOr+/7A==}
 
-  '@intlify/core-base@9.14.0':
-    resolution: {integrity: sha512-zJn0imh9HIsZZUtt9v8T16PeVstPv6bP2YzlrYJwoF8F30gs4brZBwW2KK6EI5WYKFi3NeqX6+UU4gniz5TkGg==}
+  '@intlify/core-base@9.14.2':
+    resolution: {integrity: sha512-DZyQ4Hk22sC81MP4qiCDuU+LdaYW91A6lCjq8AWPvY3+mGMzhGDfOCzvyR6YBQxtlPjFqMoFk9ylnNYRAQwXtQ==}
     engines: {node: '>= 16'}
 
-  '@intlify/message-compiler@9.14.0':
-    resolution: {integrity: sha512-sXNsoMI0YsipSXW8SR75drmVK56tnJHoYbPXUv2Cf9lz6FzvwsosFm6JtC1oQZI/kU+n7qx0qRrEWkeYFTgETA==}
+  '@intlify/message-compiler@9.14.2':
+    resolution: {integrity: sha512-YsKKuV4Qv4wrLNsvgWbTf0E40uRv+Qiw1BeLQ0LAxifQuhiMe+hfTIzOMdWj/ZpnTDj4RSZtkXjJM7JDiiB5LQ==}
     engines: {node: '>= 16'}
 
-  '@intlify/shared@9.14.0':
-    resolution: {integrity: sha512-r+N8KRQL7LgN1TMTs1A2svfuAU0J94Wu9wWdJVJqYsoMMLIeJxrPjazihfHpmJqfgZq0ah3Y9Q4pgWV2O90Fyg==}
+  '@intlify/shared@9.14.2':
+    resolution: {integrity: sha512-uRAHAxYPeF+G5DBIboKpPgC/Waecd4Jz8ihtkpJQD5ycb5PwXp0k/+hBGl5dAjwF7w+l74kz/PKA8r8OK//RUw==}
     engines: {node: '>= 16'}
 
   '@isaacs/cliui@8.0.2':
@@ -4934,8 +4934,8 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  vue-i18n@9.14.0:
-    resolution: {integrity: sha512-LxmpRuCt2rI8gqU+kxeflRZMQn4D5+4M3oP3PWZdowW/ePJraHqhF7p4CuaME52mUxdw3Mmy2yAUKgfZYgCRjA==}
+  vue-i18n@9.14.2:
+    resolution: {integrity: sha512-JK9Pm80OqssGJU2Y6F7DcM8RFHqVG4WkuCqOZTVsXkEzZME7ABejAUqUdA931zEBedc4thBgSUWxeQh4uocJAQ==}
     engines: {node: '>= 16'}
     peerDependencies:
       vue: ^3.0.0
@@ -5770,17 +5770,17 @@ snapshots:
     dependencies:
       '@swc/helpers': 0.5.15
 
-  '@intlify/core-base@9.14.0':
+  '@intlify/core-base@9.14.2':
     dependencies:
-      '@intlify/message-compiler': 9.14.0
-      '@intlify/shared': 9.14.0
+      '@intlify/message-compiler': 9.14.2
+      '@intlify/shared': 9.14.2
 
-  '@intlify/message-compiler@9.14.0':
+  '@intlify/message-compiler@9.14.2':
     dependencies:
-      '@intlify/shared': 9.14.0
+      '@intlify/shared': 9.14.2
       source-map-js: 1.2.1
 
-  '@intlify/shared@9.14.0': {}
+  '@intlify/shared@9.14.2': {}
 
   '@isaacs/cliui@8.0.2':
     dependencies:
@@ -10406,11 +10406,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-i18n@9.14.0(vue@3.5.12(typescript@5.6.2)):
+  vue-i18n@9.14.2(vue@3.5.12(typescript@5.6.2)):
     dependencies:
-      '@intlify/core-base': 9.14.0
-      '@intlify/shared': 9.14.0
-      '@vue/devtools-api': 6.6.3
+      '@intlify/core-base': 9.14.2
+      '@intlify/shared': 9.14.2
+      '@vue/devtools-api': 6.6.4
       vue: 3.5.12(typescript@5.6.2)
 
   vue-letter@0.2.0:

From 062587487a87c7dc7558bdafbb38bbe8e44dd6c7 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 3 Dec 2024 07:53:41 +0530
Subject: [PATCH 4/5] feat: Improve Contact list (#10522)

---
 .../Contacts/ContactsForm/ContactsForm.vue    |  7 +-
 .../ContactsForm/CreateNewContactDialog.vue   |  7 +-
 .../ContactListHeaderWrapper.vue              | 76 ++++++++++---------
 .../phonenumberinput/PhoneNumberInput.vue     |  9 ++-
 .../dashboard/i18n/locale/en/contact.json     |  6 +-
 .../dashboard/store/modules/customViews.js    |  1 +
 6 files changed, 66 insertions(+), 40 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
index 1813f1057..90329b311 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
@@ -214,6 +214,10 @@ const resetValidation = () => {
   v$.value.$reset();
 };
 
+const resetForm = () => {
+  Object.assign(state, defaultState);
+};
+
 watch(() => props.contactData, prepareStateBasedOnProps, {
   immediate: true,
   deep: true,
@@ -224,6 +228,7 @@ defineExpose({
   state,
   resetValidation,
   isFormInvalid,
+  resetForm,
 });
 </script>
 
@@ -261,7 +266,7 @@ defineExpose({
             :placeholder="item.placeholder"
             :message-type="getMessageType(item.key)"
             :custom-input-class="`h-8 !pt-1 !pb-1 ${
-              !isDetailsView ? '[&:not(.error)]:!border-transparent' : ''
+              !isDetailsView ? '[&:not(.error,.focus)]:!border-transparent' : ''
             }`"
             class="w-full"
             @input="
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue
index 1a9f183e8..806fcf4ac 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue
@@ -27,11 +27,16 @@ const handleDialogConfirm = async () => {
   emit('create', contact.value);
 };
 
+const onSuccess = () => {
+  contactsFormRef.value?.resetForm();
+  dialogRef.value.close();
+};
+
 const closeDialog = () => {
   dialogRef.value.close();
 };
 
-defineExpose({ dialogRef, contactsFormRef });
+defineExpose({ dialogRef, contactsFormRef, onSuccess });
 </script>
 
 <template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
index 5b27bcf17..4905e8eee 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
@@ -7,6 +7,10 @@ import { useAlert, useTrack } from 'dashboard/composables';
 import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
 import contactFilterItems from 'dashboard/routes/dashboard/contacts/contactFilterItems';
+import {
+  DuplicateContactException,
+  ExceptionWithMessage,
+} from 'shared/helpers/CustomErrors';
 import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
 import countries from 'shared/constants/countries';
 import {
@@ -23,38 +27,14 @@ import DeleteSegmentDialog from 'dashboard/components-next/Contacts/ContactsForm
 import ContactsFilter from 'dashboard/components-next/filter/ContactsFilter.vue';
 
 const props = defineProps({
-  showSearch: {
-    type: Boolean,
-    default: true,
-  },
-  searchValue: {
-    type: String,
-    default: '',
-  },
-  activeSort: {
-    type: String,
-    default: 'last_activity_at',
-  },
-  activeOrdering: {
-    type: String,
-    default: '',
-  },
-  headerTitle: {
-    type: String,
-    default: '',
-  },
-  segmentsId: {
-    type: [String, Number],
-    default: 0,
-  },
-  activeSegment: {
-    type: Object,
-    default: null,
-  },
-  hasAppliedFilters: {
-    type: Boolean,
-    default: false,
-  },
+  showSearch: { type: Boolean, default: true },
+  searchValue: { type: String, default: '' },
+  activeSort: { type: String, default: 'last_activity_at' },
+  activeOrdering: { type: String, default: '' },
+  headerTitle: { type: String, default: '' },
+  segmentsId: { type: [String, Number], default: 0 },
+  activeSegment: { type: Object, default: null },
+  hasAppliedFilters: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -99,8 +79,26 @@ const openDeleteSegmentDialog = () =>
   deleteSegmentDialogRef.value?.dialogRef.open();
 
 const onCreate = async contact => {
-  await store.dispatch('contacts/create', contact);
-  createNewContactDialogRef.value?.dialogRef.close();
+  try {
+    await store.dispatch('contacts/create', contact);
+    createNewContactDialogRef.value?.onSuccess();
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.SUCCESS_MESSAGE')
+    );
+  } catch (error) {
+    const i18nPrefix = 'CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION';
+    if (error instanceof DuplicateContactException) {
+      if (error.data.includes('email')) {
+        useAlert(t(`${i18nPrefix}.EMAIL_ADDRESS_DUPLICATE`));
+      } else if (error.data.includes('phone_number')) {
+        useAlert(t(`${i18nPrefix}.PHONE_NUMBER_DUPLICATE`));
+      }
+    } else if (error instanceof ExceptionWithMessage) {
+      useAlert(error.data);
+    } else {
+      useAlert(t(`${i18nPrefix}.ERROR_MESSAGE`));
+    }
+  }
 };
 
 const onImport = async file => {
@@ -135,11 +133,19 @@ const onCreateSegment = async payload => {
       ...payload,
       query: segmentsQuery.value,
     };
-    await store.dispatch('customViews/create', payloadData);
+    const response = await store.dispatch('customViews/create', payloadData);
     createSegmentDialogRef.value?.dialogRef.close();
     useAlert(
       t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.SUCCESS_MESSAGE')
     );
+    const segmentId = response?.data?.id;
+    if (!segmentId) return;
+    // Navigate to the created segment
+    router.push({
+      name: 'contacts_dashboard_segments_index',
+      params: { segmentId },
+      query: { page: 1 },
+    });
   } catch {
     useAlert(
       t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.ERROR_MESSAGE')
diff --git a/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue b/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
index 5168bb4b3..e523c306b 100644
--- a/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
+++ b/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
@@ -91,13 +91,18 @@ const activeCountry = computed(() =>
 const inputBorderClass = computed(() => {
   const errorClass =
     'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9 disabled:border-n-ruby-8 dark:disabled:border-n-ruby-8';
+  const focusClass =
+    'has-[:focus]:border-n-brand dark:has-[:focus]:border-n-brand';
+
   if (!props.showBorder) {
-    return hasError.value ? errorClass : 'border-transparent';
+    if (hasError.value) return errorClass;
+    return `border-transparent ${focusClass}`;
   }
+
   if (hasError.value) {
     return errorClass;
   }
-  return 'has-[:focus]:border-n-brand dark:has-[:focus]:border-n-brand border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak';
+  return `${focusClass} border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak`;
 });
 
 const phoneNumberError = computed(() => {
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 5a0257e0b..aad3a5a06 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -401,7 +401,11 @@
           "ADD_CONTACT": "Add contact",
           "EXPORT_CONTACT": "Export contacts",
           "IMPORT_CONTACT": "Import contacts",
-          "SAVE_CONTACT": "Save contact"
+          "SAVE_CONTACT": "Save contact",
+          "EMAIL_ADDRESS_DUPLICATE": "This email address is in use for another contact.",
+          "PHONE_NUMBER_DUPLICATE": "This phone number is in use for another contact.",
+          "SUCCESS_MESSAGE": "Contact saved successfully",
+          "ERROR_MESSAGE": "Unable to save contact. Please try again later."
         },
         "IMPORT_CONTACT": {
           "TITLE": "Import contacts",
diff --git a/app/javascript/dashboard/store/modules/customViews.js b/app/javascript/dashboard/store/modules/customViews.js
index 9c7f6f0ff..a69bc2c17 100644
--- a/app/javascript/dashboard/store/modules/customViews.js
+++ b/app/javascript/dashboard/store/modules/customViews.js
@@ -70,6 +70,7 @@ export const actions = {
         data: response.data,
         filterType: FILTER_KEYS[obj.filter_type],
       });
+      return response;
     } catch (error) {
       const errorMessage = error?.response?.data?.message;
       throw new Error(errorMessage);

From 50e7ceb19bdb9ae776709569222f3dae505de4fc Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 2 Dec 2024 18:23:58 -0800
Subject: [PATCH 5/5] chore(deps): bump rails-html-sanitizer from 1.6.0 to
 1.6.1 (#10528)

Bumps
[rails-html-sanitizer](https://github.com/rails/rails-html-sanitizer)
from 1.6.0 to 1.6.1.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/rails/rails-html-sanitizer/releases">rails-html-sanitizer's
releases</a>.</em></p>
<blockquote>
<h2>1.6.1 / 2024-12-02</h2>
<p>This is a performance and security release which addresses several
possible XSS vulnerabilities.</p>
<ul>
<li>
<p>The dependency on Nokogiri is updated to v1.15.7 or &gt;=1.16.8.</p>
<p>This change addresses CVE-2024-53985 (<a
href="https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-w8gc-x259-rc7x">https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-w8gc-x259-rc7x</a>).</p>
<p><em>Mike Dalessio</em></p>
</li>
<li>
<p>Disallowed tags will be pruned when they appear in foreign content
(i.e. SVG or MathML content),
regardless of the <code>prune:</code> option value. Previously,
disallowed tags were &quot;stripped&quot; unless the
gem was configured with the <code>prune: true</code> option.</p>
<p>The CVEs addressed by this change are:</p>
<ul>
<li>CVE-2024-53986 (<a
href="https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-638j-pmjw-jq48">https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-638j-pmjw-jq48</a>)</li>
<li>CVE-2024-53987 (<a
href="https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-2x5m-9ch4-qgrr">https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-2x5m-9ch4-qgrr</a>)</li>
</ul>
<p><em>Mike Dalessio</em></p>
</li>
<li>
<p>The tags &quot;noscript&quot;, &quot;mglyph&quot;, and
&quot;malignmark&quot; will not be allowed, even if explicitly added to
the allowlist. If applications try to allow any of these tags, a warning
is emitted and the tags
are removed from the allow-list.</p>
<p>The CVEs addressed by this change are:</p>
<ul>
<li>CVE-2024-53988 (<a
href="https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-cfjx-w229-hgx5">https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-cfjx-w229-hgx5</a>)</li>
<li>CVE-2024-53989 (<a
href="https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-rxv5-gxqc-xx8g">https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-rxv5-gxqc-xx8g</a>)</li>
</ul>
<p>Please note that we <em>may</em> restore support for allowing
&quot;noscript&quot; in a future release. We do not
expect to ever allow &quot;mglyph&quot; or &quot;malignmark&quot;,
though, especially since browser support is minimal
for these tags.</p>
<p><em>Mike Dalessio</em></p>
</li>
<li>
<p>Improve performance by eliminating needless operations on attributes
that are being removed. <a
href="https://redirect.github.com/rails/rails-html-sanitizer/issues/188">#188</a></p>
<p><em>Mike Dalessio</em></p>
</li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/rails/rails-html-sanitizer/blob/main/CHANGELOG.md">rails-html-sanitizer's
changelog</a>.</em></p>
<blockquote>
<h2>1.6.1 / 2024-12-02</h2>
<p>This is a performance and security release which addresses several
possible XSS vulnerabilities.</p>
<ul>
<li>
<p>The dependency on Nokogiri is updated to v1.15.7 or &gt;=1.16.8.</p>
<p>This change addresses CVE-2024-53985 (GHSA-w8gc-x259-rc7x).</p>
<p><em>Mike Dalessio</em></p>
</li>
<li>
<p>Disallowed tags will be pruned when they appear in foreign content
(i.e. SVG or MathML content),
regardless of the <code>prune:</code> option value. Previously,
disallowed tags were &quot;stripped&quot; unless the
gem was configured with the <code>prune: true</code> option.</p>
<p>The CVEs addressed by this change are:</p>
<ul>
<li>CVE-2024-53986 (GHSA-638j-pmjw-jq48)</li>
<li>CVE-2024-53987 (GHSA-2x5m-9ch4-qgrr)</li>
</ul>
<p><em>Mike Dalessio</em></p>
</li>
<li>
<p>The tags &quot;noscript&quot;, &quot;mglyph&quot;, and
&quot;malignmark&quot; will not be allowed, even if explicitly added to
the allowlist. If applications try to allow any of these tags, a warning
is emitted and the tags
are removed from the allow-list.</p>
<p>The CVEs addressed by this change are:</p>
<ul>
<li>CVE-2024-53988 (GHSA-cfjx-w229-hgx5)</li>
<li>CVE-2024-53989 (GHSA-rxv5-gxqc-xx8g)</li>
</ul>
<p>Please note that we <em>may</em> restore support for allowing
&quot;noscript&quot; in a future release. We do not
expect to ever allow &quot;mglyph&quot; or &quot;malignmark&quot;,
though, especially since browser support is minimal
for these tags.</p>
<p><em>Mike Dalessio</em></p>
</li>
<li>
<p>Improve performance by eliminating needless operations on attributes
that are being removed. <a
href="https://redirect.github.com/rails/rails-html-sanitizer/issues/188">#188</a></p>
<p><em>Mike Dalessio</em></p>
</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/5e96b19bbb934284e675109851bd82429622bb6e"><code>5e96b19</code></a>
version bump to v1.6.1</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/383cc7c17f5a6aafed79adff1c419da31a414878"><code>383cc7c</code></a>
doc: update CHANGELOG with assigned CVEs</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/a7b0cfe103ff5d8b17d77fb3660589522dd6bcad"><code>a7b0cfe</code></a>
Combine the noscript/mglyph prevention blocks</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/5658335ede931a47d02b8aa4d3b5800bd3184158"><code>5658335</code></a>
Merge branch 'h1-2509647-noscript' into
flavorjones-2024-security-fixes</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/65fb72f07e875b401bbec479c2a5a3d3b10ad338"><code>65fb72f</code></a>
Merge branch 'h1-2519936-mglyph-foster-parenting' into
flavorjones-2024-secur...</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/3fe22a8b892361c8463f50f4f4a5d08e299c62a2"><code>3fe22a8</code></a>
Merge branch 'h1-2519936-foreign-ns-confusion' into
flavorjones-2024-security...</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/d7a94c125209a9611308fbfdb7420a8786d7e80f"><code>d7a94c1</code></a>
Merge branch 'h1-2503220-nokogiri-serialization' into
flavorjones-2024-securi...</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/3fd6e650f991ce687961da45038b77504114d237"><code>3fd6e65</code></a>
doc: update CHANGELOG</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/16251735e36ebdc302e2f90f2a39cad56879414f"><code>1625173</code></a>
fix: disallow 'noscript' from safe lists</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/a0a3e8b76b696446ffc6bffcff3bc7b7c6393c72"><code>a0a3e8b</code></a>
fix: disallow 'mglyph' and 'malignmark' from safe lists</li>
<li>Additional commits viewable in <a
href="https://github.com/rails/rails-html-sanitizer/compare/v1.6.0...v1.6.1">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=rails-html-sanitizer&package-manager=bundler&previous-version=1.6.0&new-version=1.6.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/chatwoot/chatwoot/network/alerts).

</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
---
 Gemfile.lock | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 4ea52d1e1..298d8e041 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -452,7 +452,7 @@ GEM
       activesupport (>= 4)
       railties (>= 4)
       request_store (~> 1.0)
-    loofah (2.22.0)
+    loofah (2.23.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     mail (2.8.1)
@@ -471,7 +471,7 @@ GEM
     mime-types-data (3.2023.0218.1)
     mini_magick (4.12.0)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.7)
+    mini_portile2 (2.8.8)
     minitest (5.25.1)
     mock_redis (0.36.0)
       ruby2_keywords
@@ -502,14 +502,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.16.7)
+    nokogiri (1.16.8)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.7-arm64-darwin)
+    nokogiri (1.16.8-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-darwin)
+    nokogiri (1.16.8-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-linux)
+    nokogiri (1.16.8-x86_64-linux)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -599,9 +599,9 @@ GEM
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.6.0)
+    rails-html-sanitizer (1.6.1)
       loofah (~> 2.21)
-      nokogiri (~> 1.14)
+      nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
     railties (7.0.8.5)
       actionpack (= 7.0.8.5)
       activesupport (= 7.0.8.5)