Fix STORAGE_BUSY error in firefox

Merge branch 'develop' into feat/CW-1873
chore: Minor fixes
2023-06-15 16:30:48 +05:30 · 2023-06-15 13:01:29 +05:30 · 2023-06-15 12:58:26 +05:30 · 2023-06-15 12:57:56 +05:30 · 2023-06-15 12:50:27 +05:30 · 2023-06-14 18:28:42 +05:30
474 changed files with 14024 additions and 1673 deletions
@@ -157,7 +157,7 @@ jobs:
      - run:
          name: Code Climate Test Coverage
          command: |
-            ~/tmp/cc-test-reporter format-coverage -t lcov -o coverage/codeclimate.frontend_$CIRCLE_NODE_INDEX.json buildreports/lcov.info    
+            ~/tmp/cc-test-reporter format-coverage -t lcov -o "coverage/codeclimate.frontend_$CIRCLE_NODE_INDEX.json"  
            
      - persist_to_workspace:
          root: coverage
@@ -173,6 +173,9 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 ## LogRocket
 # LOG_ROCKET_PROJECT_ID=xxxxx/some-project

+# MICROSOFT CLARITY
+# MS_CLARITY_TOKEN=xxxxxxxxx
+
 ## Scout
 ## https://scoutapm.com/docs/ruby/configuration
 # SCOUT_KEY=YOURKEY
@@ -0,0 +1,38 @@
+name: Run Size Limit Check
+
+on:
+  pull_request:
+    branches:
+      - develop
+
+jobs:
+  test:
+    runs-on: ubuntu-20.04
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+
+      - uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: yarn
+        run: yarn install
+
+      - name: Strip enterprise code
+        run: |
+          rm -rf enterprise
+          rm -rf spec/enterprise
+
+      - name: Run asset compile
+        run: bundle exec rake assets:precompile
+
+      - name: Size Check
+        run: yarn run size
@@ -162,41 +162,33 @@ Rails/RenderInline:
 Performance/CollectionLiteralInLoop:
  Exclude:
    - 'db/migrate/20210315101919_enable_email_channel.rb'
-RSpec/NamedSubject:
-  Enabled: false
-Style/RedundantConstantBase:
-  Enabled: false
-Rails/RootPathnameMethods:
-  Enabled: false
-RSpec/Rails/MinitestAssertions:
-  Enabled: false
-RSpec/Rails/InferredSpecType:
-  Enabled: false
+Rails/ThreeStateBooleanColumn:
+  Exclude:
+    - 'db/migrate/20200509044639_add_hide_input_flag_to_bot_config.rb'
+    - 'db/migrate/20200605130625_agent_away_message_to_auto_reply.rb'
+    - 'db/migrate/20200606132552_create_labels.rb'
+    - 'db/migrate/20201027135006_create_working_hours.rb'
+    - 'db/migrate/20210112174124_add_hmac_token_to_inbox.rb'
+    - 'db/migrate/20210114202310_create_teams.rb'
+    - 'db/migrate/20210212154240_add_request_for_email_on_channel_web_widget.rb'
+    - 'db/migrate/20210428135041_add_campaigns.rb'
+    - 'db/migrate/20210602182058_add_hmac_to_api_channel.rb'
+    - 'db/migrate/20210609133433_add_email_collect_to_inboxes.rb'
+    - 'db/migrate/20210618095823_add_csat_toggle_for_inbox.rb'
+    - 'db/migrate/20210927062350_add_trigger_only_during_business_hours_collect_to_campaigns.rb'
+    - 'db/migrate/20211027073553_add_imap_smtp_config_to_channel_email.rb'
+    - 'db/migrate/20211109143122_add_tweet_enabled_flag_to_twitter_channel.rb'
+    - 'db/migrate/20211216110209_add_allow_messages_after_resolved_to_inbox.rb'
+    - 'db/migrate/20220116103902_add_open_ssl_verify_mode_to_channel_email.rb'
+    - 'db/migrate/20220216151613_add_open_all_day_to_working_hour.rb'
+    - 'db/migrate/20220511072655_add_archive_column_to_portal.rb'
+    - 'db/migrate/20230503101201_create_sla_policies.rb'
 RSpec/IndexedLet:
  Enabled: false
-RSpec/MatchArray:
-  Enabled: false
-Rails/ResponseParsedBody:
-  Enabled: false
-RSpec/FactoryBot/ConsistentParenthesesStyle:
-  Enabled: false
-Rails/ThreeStateBooleanColumn:
-  Enabled: false
-Rails/Pluck:
-  Enabled: false
-Rails/TopLevelHashWithIndifferentAccess:
-  Enabled: false
-Rails/ActionOrder:
-  Enabled: false
-Style/ArrayIntersect:
-  Enabled: false
-RSpec/NoExpectationExample:
-  Enabled: false
-Style/RedundantReturn:
-  Enabled: false
-Rails/I18nLocaleTexts:
+RSpec/NamedSubject:
  Enabled: false

+
 # we should bring this down
 RSpec/MultipleMemoizedHelpers:
  Max: 14
@@ -75,6 +75,7 @@ gem 'jwt'
 gem 'pundit'
 # super admin
 gem 'administrate'
+gem 'administrate-field-active_storage'

 ##--- gems for pubsub service ---##
 # https://karolgalanciak.com/blog/2019/11/30/from-activerecord-callbacks-to-publish-slash-subscribe-pattern-and-event-driven-design/
@@ -33,70 +33,70 @@ GIT
 GEM
  remote: https://rubygems.org/
  specs:
-    actioncable (7.0.4.3)
-      actionpack (= 7.0.4.3)
-      activesupport (= 7.0.4.3)
+    actioncable (7.0.5)
+      actionpack (= 7.0.5)
+      activesupport (= 7.0.5)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.4.3)
-      actionpack (= 7.0.4.3)
-      activejob (= 7.0.4.3)
-      activerecord (= 7.0.4.3)
-      activestorage (= 7.0.4.3)
-      activesupport (= 7.0.4.3)
+    actionmailbox (7.0.5)
+      actionpack (= 7.0.5)
+      activejob (= 7.0.5)
+      activerecord (= 7.0.5)
+      activestorage (= 7.0.5)
+      activesupport (= 7.0.5)
      mail (>= 2.7.1)
      net-imap
      net-pop
      net-smtp
-    actionmailer (7.0.4.3)
-      actionpack (= 7.0.4.3)
-      actionview (= 7.0.4.3)
-      activejob (= 7.0.4.3)
-      activesupport (= 7.0.4.3)
+    actionmailer (7.0.5)
+      actionpack (= 7.0.5)
+      actionview (= 7.0.5)
+      activejob (= 7.0.5)
+      activesupport (= 7.0.5)
      mail (~> 2.5, >= 2.5.4)
      net-imap
      net-pop
      net-smtp
      rails-dom-testing (~> 2.0)
-    actionpack (7.0.4.3)
-      actionview (= 7.0.4.3)
-      activesupport (= 7.0.4.3)
-      rack (~> 2.0, >= 2.2.0)
+    actionpack (7.0.5)
+      actionview (= 7.0.5)
+      activesupport (= 7.0.5)
+      rack (~> 2.0, >= 2.2.4)
      rack-test (>= 0.6.3)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.4.3)
-      actionpack (= 7.0.4.3)
-      activerecord (= 7.0.4.3)
-      activestorage (= 7.0.4.3)
-      activesupport (= 7.0.4.3)
+    actiontext (7.0.5)
+      actionpack (= 7.0.5)
+      activerecord (= 7.0.5)
+      activestorage (= 7.0.5)
+      activesupport (= 7.0.5)
      globalid (>= 0.6.0)
      nokogiri (>= 1.8.5)
-    actionview (7.0.4.3)
-      activesupport (= 7.0.4.3)
+    actionview (7.0.5)
+      activesupport (= 7.0.5)
      builder (~> 3.1)
      erubi (~> 1.4)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.1, >= 1.2.0)
    active_record_query_trace (1.8)
-    activejob (7.0.4.3)
-      activesupport (= 7.0.4.3)
+    activejob (7.0.5)
+      activesupport (= 7.0.5)
      globalid (>= 0.3.6)
-    activemodel (7.0.4.3)
-      activesupport (= 7.0.4.3)
-    activerecord (7.0.4.3)
-      activemodel (= 7.0.4.3)
-      activesupport (= 7.0.4.3)
+    activemodel (7.0.5)
+      activesupport (= 7.0.5)
+    activerecord (7.0.5)
+      activemodel (= 7.0.5)
+      activesupport (= 7.0.5)
    activerecord-import (1.4.1)
      activerecord (>= 4.2)
-    activestorage (7.0.4.3)
-      actionpack (= 7.0.4.3)
-      activejob (= 7.0.4.3)
-      activerecord (= 7.0.4.3)
-      activesupport (= 7.0.4.3)
+    activestorage (7.0.5)
+      actionpack (= 7.0.5)
+      activejob (= 7.0.5)
+      activerecord (= 7.0.5)
+      activesupport (= 7.0.5)
      marcel (~> 1.0)
      mini_mime (>= 1.1.0)
-    activesupport (7.0.4.3)
+    activesupport (7.0.5)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (>= 1.6, < 2)
      minitest (>= 5.1)
@@ -113,6 +113,9 @@ GEM
      kaminari (>= 1.0)
      sassc-rails (~> 2.1)
      selectize-rails (~> 0.6)
+    administrate-field-active_storage (0.4.2)
+      administrate (>= 0.2.2)
+      rails (>= 7.0)
    annotate (3.2.0)
      activerecord (>= 3.2, < 8.0)
      rake (>= 10.4, < 14.0)
@@ -353,7 +356,7 @@ GEM
      mini_mime (>= 1.0.0)
      multi_xml (>= 0.5.2)
    httpclient (2.8.3)
-    i18n (1.13.0)
+    i18n (1.14.1)
      concurrent-ruby (~> 1.0)
    image_processing (1.12.2)
      mini_magick (>= 4.9.5, < 5)
@@ -420,9 +423,9 @@ GEM
      activesupport (>= 4)
      railties (>= 4)
      request_store (~> 1.0)
-    loofah (2.20.0)
+    loofah (2.21.3)
      crass (~> 1.0.2)
-      nokogiri (>= 1.5.9)
+      nokogiri (>= 1.12.0)
    mail (2.8.1)
      mini_mime (>= 0.1.1)
      net-imap
@@ -462,14 +465,14 @@ GEM
      sidekiq
    newrelic_rpm (8.16.0)
    nio4r (2.5.9)
-    nokogiri (1.14.3)
-      mini_portile2 (~> 2.8.0)
+    nokogiri (1.15.2)
+      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
-    nokogiri (1.14.3-arm64-darwin)
+    nokogiri (1.15.2-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.14.3-x86_64-darwin)
+    nokogiri (1.15.2-x86_64-darwin)
      racc (~> 1.4)
-    nokogiri (1.14.3-x86_64-linux)
+    nokogiri (1.15.2-x86_64-linux)
      racc (~> 1.4)
    oauth (1.1.0)
      oauth-tty (~> 1.0, >= 1.0.1)
@@ -522,7 +525,7 @@ GEM
    pundit (2.3.0)
      activesupport (>= 3.0.0)
    raabro (1.4.0)
-    racc (1.6.2)
+    racc (1.7.0)
    rack (2.2.7)
    rack-attack (6.6.1)
      rack (>= 1.0, < 3)
@@ -537,28 +540,29 @@ GEM
    rack-test (2.1.0)
      rack (>= 1.3)
    rack-timeout (0.6.3)
-    rails (7.0.4.3)
-      actioncable (= 7.0.4.3)
-      actionmailbox (= 7.0.4.3)
-      actionmailer (= 7.0.4.3)
-      actionpack (= 7.0.4.3)
-      actiontext (= 7.0.4.3)
-      actionview (= 7.0.4.3)
-      activejob (= 7.0.4.3)
-      activemodel (= 7.0.4.3)
-      activerecord (= 7.0.4.3)
-      activestorage (= 7.0.4.3)
-      activesupport (= 7.0.4.3)
+    rails (7.0.5)
+      actioncable (= 7.0.5)
+      actionmailbox (= 7.0.5)
+      actionmailer (= 7.0.5)
+      actionpack (= 7.0.5)
+      actiontext (= 7.0.5)
+      actionview (= 7.0.5)
+      activejob (= 7.0.5)
+      activemodel (= 7.0.5)
+      activerecord (= 7.0.5)
+      activestorage (= 7.0.5)
+      activesupport (= 7.0.5)
      bundler (>= 1.15.0)
-      railties (= 7.0.4.3)
+      railties (= 7.0.5)
    rails-dom-testing (2.0.3)
      activesupport (>= 4.2.0)
      nokogiri (>= 1.6)
-    rails-html-sanitizer (1.5.0)
-      loofah (~> 2.19, >= 2.19.1)
-    railties (7.0.4.3)
-      actionpack (= 7.0.4.3)
-      activesupport (= 7.0.4.3)
+    rails-html-sanitizer (1.6.0)
+      loofah (~> 2.21)
+      nokogiri (~> 1.14)
+    railties (7.0.5)
+      actionpack (= 7.0.5)
+      activesupport (= 7.0.5)
      method_source
      rake (>= 12.2)
      thor (~> 1.0)
@@ -722,8 +726,8 @@ GEM
    stripe (8.5.0)
    telephone_number (1.4.20)
    test-prof (1.2.1)
-    thor (1.2.1)
-    tilt (2.1.0)
+    thor (1.2.2)
+    tilt (2.2.0)
    time_diff (0.3.0)
      activesupport
      i18n
@@ -785,6 +789,7 @@ GEM
 PLATFORMS
  arm64-darwin-20
  arm64-darwin-21
+  arm64-darwin-22
  ruby
  x86_64-darwin-18
  x86_64-darwin-20
@@ -797,6 +802,7 @@ DEPENDENCIES
  activerecord-import
  acts-as-taggable-on
  administrate
+  administrate-field-active_storage
  annotate
  attr_extras
  audited (~> 5.3)
@@ -915,4 +921,4 @@ RUBY VERSION
   ruby 3.2.2p185

 BUNDLED WITH
-   2.4.10
+   2.4.6
@@ -1,5 +1,6 @@
 //= link_tree ../images
 //= link administrate/application.css
 //= link administrate/application.js
+//= link administrate-field-active_storage/application.css
 //= link dashboardChart.js
 //= link secretField.js
@@ -63,9 +63,9 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
  end

  def conversation
-    @conversation ||= Conversation.where(
+    @conversation ||= Conversation.where(conversation_params).find_by(
      "additional_attributes ->> 'type' = 'instagram_direct_message'"
-    ).find_by(conversation_params) || build_conversation
+    ) || build_conversation
  end

  def message_content
@@ -96,6 +96,7 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder

  def build_conversation
    @contact_inbox ||= contact.contact_inboxes.find_by!(source_id: message_source_id)
+
    Conversation.create!(conversation_params.merge(
                           contact_inbox_id: @contact_inbox.id,
                           additional_attributes: { type: 'instagram_direct_message' }
@@ -96,10 +96,9 @@ class V2::ReportBuilder

  def conversations
    @open_conversations = scope.conversations.where(account_id: @account.id).open
-    first_response_count = @account.reporting_events.where(name: 'first_response', conversation_id: @open_conversations.pluck('id')).count
    metric = {
      open: @open_conversations.count,
-      unattended: @open_conversations.count - first_response_count
+      unattended: @open_conversations.unattended.count
    }
    metric[:unassigned] = @open_conversations.unassigned.count if params[:type].equal?(:account)
    metric
@@ -16,6 +16,9 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
                end
  end

+  def show; end
+  def edit; end
+
  def create
    @article = @portal.articles.create!(article_params)
    @article.associate_root_article(article_params[:associated_article_id])
@@ -23,10 +26,6 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
    render json: { error: @article.errors.messages }, status: :unprocessable_entity and return unless @article.valid?
  end

-  def edit; end
-
-  def show; end
-
  def update
    @article.update!(article_params) if params[:article].present?
    render json: { error: @article.errors.messages }, status: :unprocessable_entity and return unless @article.valid?
@@ -6,6 +6,8 @@ class Api::V1::Accounts::AutomationRulesController < Api::V1::Accounts::BaseCont
    @automation_rules = Current.account.automation_rules
  end

+  def show; end
+
  def create
    @automation_rule = Current.account.automation_rules.new(automation_rules_permit)
    @automation_rule.actions = params[:actions]
@@ -28,8 +30,6 @@ class Api::V1::Accounts::AutomationRulesController < Api::V1::Accounts::BaseCont
    render json: { blob_key: file_blob.key, blob_id: file_blob.id }
  end

-  def show; end
-
  def update
    ActiveRecord::Base.transaction do
      automation_rule_update
@@ -6,21 +6,21 @@ class Api::V1::Accounts::CampaignsController < Api::V1::Accounts::BaseController
    @campaigns = Current.account.campaigns
  end

+  def show; end
+
  def create
    @campaign = Current.account.campaigns.create!(campaign_params)
  end

+  def update
+    @campaign.update!(campaign_params)
+  end
+
  def destroy
    @campaign.destroy!
    head :ok
  end

-  def show; end
-
-  def update
-    @campaign.update!(campaign_params)
-  end
-
  private

  def campaign
@@ -9,6 +9,8 @@ class Api::V1::Accounts::CategoriesController < Api::V1::Accounts::BaseControlle
    @categories = @portal.categories.search(params)
  end

+  def show; end
+
  def create
    @category = @portal.categories.create!(category_params)
    @category.related_categories << related_categories_records
@@ -17,8 +19,6 @@ class Api::V1::Accounts::CategoriesController < Api::V1::Accounts::BaseControlle
    @category.save!
  end

-  def show; end
-
  def update
    @category.update!(category_params)
    @category.related_categories = related_categories_records if related_categories_records.any?
@@ -1,11 +1,13 @@
 class Api::V1::Accounts::Contacts::ContactInboxesController < Api::V1::Accounts::Contacts::BaseController
+  include HmacConcern
  before_action :ensure_inbox, only: [:create]

  def create
    @contact_inbox = ContactInboxBuilder.new(
      contact: @contact,
      inbox: @inbox,
-      source_id: params[:source_id]
+      source_id: params[:source_id],
+      hmac_verified: hmac_verified?
    ).perform
  end

@@ -5,21 +5,21 @@ class Api::V1::Accounts::Contacts::NotesController < Api::V1::Accounts::Contacts
    @notes = @contact.notes.latest.includes(:user)
  end

+  def show; end
+
  def create
    @note = @contact.notes.create!(note_params)
  end

+  def update
+    @note.update(note_params)
+  end
+
  def destroy
    @note.destroy!
    head :ok
  end

-  def show; end
-
-  def update
-    @note.update(note_params)
-  end
-
  private

  def note
@@ -42,6 +42,12 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
    head :ok
  end

+  def export
+    column_names = params['column_names']
+    Account::ContactsExportJob.perform_later(Current.account.id, column_names)
+    head :ok, message: I18n.t('errors.contacts.export.success')
+  end
+
  # returns online contacts
  def active
    contacts = Current.account.contacts.where(id: ::OnlineStatusTracker
@@ -1,6 +1,7 @@
 class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseController
  include Events::Types
  include DateRangeHelper
+  include HmacConcern

  before_action :conversation, except: [:index, :meta, :search, :create, :filter]
  before_action :inbox, :contact, :contact_inbox, only: [:create]
@@ -26,6 +27,8 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
    @attachments = @conversation.attachments
  end

+  def show; end
+
  def create
    ActiveRecord::Base.transaction do
      @conversation = ConversationBuilder.new(params: params, contact_inbox: @contact_inbox).perform
@@ -33,8 +36,6 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
    end
  end

-  def show; end
-
  def filter
    result = ::Conversations::FilterService.new(params.permit!, current_user).perform
    @conversations = result[:conversations]
@@ -104,9 +105,6 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
  end

  def set_conversation_status
-    # TODO: temporary fallback for the old bot status in conversation, we will remove after couple of releases
-    # commenting this out to see if there are any errors, if not we can remove this in subsequent releases
-    # status = params[:status] == 'bot' ? 'pending' : params[:status]
    @conversation.status = params[:status]
    @conversation.snoozed_until = parse_date_time(params[:snoozed_until].to_s) if params[:snoozed_until]
  end
@@ -152,7 +150,8 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
    ContactInboxBuilder.new(
      contact: @contact,
      inbox: @inbox,
-      source_id: params[:source_id]
+      source_id: params[:source_id],
+      hmac_verified: hmac_verified?
    ).perform
  end

@@ -34,9 +34,12 @@ class Api::V1::Accounts::CsatSurveyResponsesController < Api::V1::Accounts::Base
  end

  def set_csat_survey_responses
-    @csat_survey_responses = filtrate(
-      Current.account.csat_survey_responses.includes([:conversation, :assigned_agent, :contact])
-    ).filter_by_created_at(range).filter_by_assigned_agent_id(params[:user_ids])
+    base_query = Current.account.csat_survey_responses.includes([:conversation, :assigned_agent, :contact])
+    @csat_survey_responses = filtrate(base_query).filter_by_created_at(range)
+                                                 .filter_by_assigned_agent_id(params[:user_ids])
+                                                 .filter_by_inbox_id(params[:inbox_id])
+                                                 .filter_by_team_id(params[:team_id])
+                                                 .filter_by_rating(params[:rating])
  end

  def set_current_page_surveys
@@ -11,6 +11,7 @@ class Api::V1::Accounts::CustomFiltersController < Api::V1::Accounts::BaseContro
    @custom_filter = current_user.custom_filters.create!(
      permitted_payload.merge(account_id: Current.account.id)
    )
+    render json: { error: @custom_filter.errors.messages }, status: :unprocessable_entity and return unless @custom_filter.valid?
  end

  def update
@@ -2,6 +2,11 @@ class Api::V1::Accounts::InboxMembersController < Api::V1::Accounts::BaseControl
  before_action :fetch_inbox
  before_action :current_agents_ids, only: [:create, :update]

+  def show
+    authorize @inbox, :show?
+    fetch_updated_agents
+  end
+
  def create
    authorize @inbox, :create?
    ActiveRecord::Base.transaction do
@@ -10,11 +15,6 @@ class Api::V1::Accounts::InboxMembersController < Api::V1::Accounts::BaseControl
    fetch_updated_agents
  end

-  def show
-    authorize @inbox, :show?
-    fetch_updated_agents
-  end
-
  def update
    authorize @inbox, :update?
    update_agents_list
@@ -44,26 +44,7 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
  def update
    @inbox.update!(permitted_params.except(:channel))
    update_inbox_working_hours
-    channel_attributes = get_channel_attributes(@inbox.channel_type)
-
-    # Inbox update doesn't necessarily need channel attributes
-    return if permitted_params(channel_attributes)[:channel].blank?
-
-    if @inbox.inbox_type == 'Email'
-      begin
-        validate_email_channel(channel_attributes)
-      rescue StandardError => e
-        render json: { message: e }, status: :unprocessable_entity and return
-      end
-      @inbox.channel.reauthorized!
-    end
-
-    @inbox.channel.update!(permitted_params(channel_attributes)[:channel])
-    update_channel_feature_flags
-  end
-
-  def update_inbox_working_hours
-    @inbox.update_working_hours(params.permit(working_hours: Inbox::OFFISABLE_ATTRS)[:working_hours]) if params[:working_hours]
+    update_channel if channel_update_required?
  end

  def agent_bot
@@ -103,6 +84,35 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
    account_channels_method.create!(permitted_params(channel_type_from_params::EDITABLE_ATTRS)[:channel].except(:type))
  end

+  def update_inbox_working_hours
+    @inbox.update_working_hours(params.permit(working_hours: Inbox::OFFISABLE_ATTRS)[:working_hours]) if params[:working_hours]
+  end
+
+  def update_channel
+    channel_attributes = get_channel_attributes(@inbox.channel_type)
+    return if permitted_params(channel_attributes)[:channel].blank?
+
+    validate_and_update_email_channel(channel_attributes) if @inbox.inbox_type == 'Email'
+
+    reauthorize_and_update_channel(channel_attributes)
+    update_channel_feature_flags
+  end
+
+  def channel_update_required?
+    permitted_params(get_channel_attributes(@inbox.channel_type))[:channel].present?
+  end
+
+  def validate_and_update_email_channel(channel_attributes)
+    validate_email_channel(channel_attributes)
+  rescue StandardError => e
+    render json: { message: e }, status: :unprocessable_entity and return
+  end
+
+  def reauthorize_and_update_channel(channel_attributes)
+    @inbox.channel.reauthorized! if @inbox.channel.respond_to?(:reauthorized!)
+    @inbox.channel.update!(permitted_params(channel_attributes)[:channel])
+  end
+
  def update_channel_feature_flags
    return unless @inbox.web_widget?
    return unless permitted_params(Channel::WebWidget::EDITABLE_ATTRS)[:channel].key? :selected_feature_flags
@@ -6,6 +6,10 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
    @macros = Macro.with_visibility(current_user, params)
  end

+  def show
+    head :not_found if @macro.nil?
+  end
+
  def create
    @macro = Current.account.macros.new(macros_with_user.merge(created_by_id: current_user.id))
    @macro.set_visibility(current_user, permitted_params)
@@ -18,8 +22,16 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
    @macro
  end

-  def show
-    head :not_found if @macro.nil?
+  def update
+    ActiveRecord::Base.transaction do
+      @macro.update!(macros_with_user)
+      @macro.set_visibility(current_user, permitted_params)
+      process_attachments
+      @macro.save!
+    rescue StandardError => e
+      Rails.logger.error e
+      render json: { error: @macro.errors.messages }.to_json, status: :unprocessable_entity
+    end
  end

  def destroy
@@ -37,18 +49,6 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
    render json: { blob_key: file_blob.key, blob_id: file_blob.id }
  end

-  def update
-    ActiveRecord::Base.transaction do
-      @macro.update!(macros_with_user)
-      @macro.set_visibility(current_user, permitted_params)
-      process_attachments
-      @macro.save!
-    rescue StandardError => e
-      Rails.logger.error e
-      render json: { error: @macro.errors.messages }.to_json, status: :unprocessable_entity
-    end
-  end
-
  def execute
    ::MacrosExecutionJob.perform_later(@macro, conversation_ids: params[:conversation_ids], user: Current.user)

@@ -14,6 +14,11 @@ class Api::V1::AccountsController < Api::BaseController
              CustomExceptions::Account::UserErrors,
              with: :render_error_response

+  def show
+    @latest_chatwoot_version = ::Redis::Alfred.get(::Redis::Alfred::LATEST_CHATWOOT_VERSION)
+    render 'api/v1/accounts/show', format: :json
+  end
+
  def create
    @user, @account = AccountBuilder.new(
      account_name: account_params[:account_name],
@@ -32,14 +37,10 @@ class Api::V1::AccountsController < Api::BaseController
  end

  def cache_keys
+    expires_in 10.seconds, public: false, stale_while_revalidate: 5.minutes
    render json: { cache_keys: get_cache_keys }, status: :ok
  end

-  def show
-    @latest_chatwoot_version = ::Redis::Alfred.get(::Redis::Alfred::LATEST_CHATWOOT_VERSION)
-    render 'api/v1/accounts/show', format: :json
-  end
-
  def update
    @account.update!(account_params.slice(:name, :locale, :domain, :support_email, :auto_resolve_duration))
  end
@@ -0,0 +1,5 @@
+module HmacConcern
+  def hmac_verified?
+    ActiveModel::Type::Boolean.new.cast(params[:hmac_verified]).present?
+  end
+end
@@ -4,6 +4,16 @@ class DeviseOverrides::PasswordsController < Devise::PasswordsController
  skip_before_action :require_no_authentication, raise: false
  skip_before_action :authenticate_user!, raise: false

+  def create
+    @user = User.find_by(email: params[:email])
+    if @user
+      @user.send_reset_password_instructions
+      build_response(I18n.t('messages.reset_password_success'), 200)
+    else
+      build_response(I18n.t('messages.reset_password_failure'), 404)
+    end
+  end
+
  def update
    # params: reset_password_token, password, password_confirmation
    original_token = params[:reset_password_token]
@@ -17,16 +27,6 @@ class DeviseOverrides::PasswordsController < Devise::PasswordsController
    end
  end

-  def create
-    @user = User.find_by(email: params[:email])
-    if @user
-      @user.send_reset_password_instructions
-      build_response(I18n.t('messages.reset_password_success'), 200)
-    else
-      build_response(I18n.t('messages.reset_password_failure'), 404)
-    end
-  end
-
  private

  def reset_password_and_confirmation(recoverable)
@@ -1,4 +1,4 @@
-class DeviseOverrides::SessionsController < ::DeviseTokenAuth::SessionsController
+class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
  # Prevent session parameter from being passed
  # Unpermitted parameter: session
  wrap_parameters format: []
@@ -37,3 +37,5 @@ class DeviseOverrides::SessionsController < ::DeviseTokenAuth::SessionsControlle
    @resource = user if user&.valid_sso_auth_token?(params[:sso_auth_token])
  end
 end
+
+DeviseOverrides::SessionsController.prepend_mod_with('DeviseOverrides::SessionsController')
@@ -1,4 +1,4 @@
-class DeviseOverrides::TokenValidationsController < ::DeviseTokenAuth::TokenValidationsController
+class DeviseOverrides::TokenValidationsController < DeviseTokenAuth::TokenValidationsController
  def validate_token
    # @resource will have been set by set_user_by_token concern
    if @resource
@@ -1,12 +1,12 @@
 class Platform::Api::V1::AccountsController < PlatformController
+  def show; end
+
  def create
    @resource = Account.create!(account_params)
    update_resource_features
    @platform_app.platform_app_permissibles.find_or_create_by(permissible: @resource)
  end

-  def show; end
-
  def update
    @resource.assign_attributes(account_params)
    update_resource_features
@@ -6,14 +6,14 @@ class Platform::Api::V1::AgentBotsController < PlatformController
    @resources = @platform_app.platform_app_permissibles.where(permissible_type: 'AgentBot').all
  end

+  def show; end
+
  def create
    @resource = AgentBot.new(agent_bot_params)
    @resource.save!
    @platform_app.platform_app_permissibles.find_or_create_by(permissible: @resource)
  end

-  def show; end
-
  def update
    @resource.update!(agent_bot_params)
  end
@@ -5,6 +5,8 @@ class Platform::Api::V1::UsersController < PlatformController
  before_action(only: [:login]) { set_resource }
  before_action(only: [:login]) { validate_platform_app_permissible }

+  def show; end
+
  def create
    @resource = (User.find_by(email: user_params[:email]) || User.new(user_params))
    @resource.skip_confirmation!
@@ -16,8 +18,6 @@ class Platform::Api::V1::UsersController < PlatformController
    render json: { url: @resource.generate_sso_link }
  end

-  def show; end
-
  def update
    @resource.assign_attributes(user_update_params)

@@ -2,6 +2,8 @@ class Public::Api::V1::Inboxes::ContactsController < Public::Api::V1::InboxesCon
  before_action :contact_inbox, except: [:create]
  before_action :process_hmac

+  def show; end
+
  def create
    source_id = params[:source_id] || SecureRandom.uuid
    @contact_inbox = ::ContactInboxWithContactBuilder.new(
@@ -11,8 +13,6 @@ class Public::Api::V1::Inboxes::ContactsController < Public::Api::V1::InboxesCon
    ).perform
  end

-  def show; end
-
  def update
    contact_identify_action = ContactIdentifyAction.new(
      contact: @contact_inbox.contact,
@@ -43,8 +43,6 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
  end

  def render_article_content(content)
-    # rubocop:disable Rails/OutputSafety
-    CommonMarker.render_html(content).html_safe
-    # rubocop:enable Rails/OutputSafety
+    ChatwootMarkdownRenderer.new(content).render_article
  end
 end
@@ -6,6 +6,8 @@ class Public::Api::V1::Portals::BaseController < PublicController
  def set_locale(&)
    switch_locale_with_portal(&) if params[:locale].present?
    switch_locale_with_article(&) if params[:article_slug].present?
+
+    yield
  end

  def switch_locale_with_portal(&)
@@ -45,13 +45,24 @@ class SuperAdmin::AccountsController < SuperAdmin::ApplicationController

  def seed
    Internal::SeedAccountJob.perform_later(requested_resource)
+    # rubocop:disable Rails/I18nLocaleTexts
    redirect_back(fallback_location: [namespace, requested_resource], notice: 'Account seeding triggered')
+    # rubocop:enable Rails/I18nLocaleTexts
+  end
+
+  def reset_cache
+    requested_resource.reset_cache_keys
+    # rubocop:disable Rails/I18nLocaleTexts
+    redirect_back(fallback_location: [namespace, requested_resource], notice: 'Cache keys cleared')
+    # rubocop:enable Rails/I18nLocaleTexts
  end

  def destroy
    account = Account.find(params[:id])

    DeleteObjectJob.perform_later(account) if account.present?
+    # rubocop:disable Rails/I18nLocaleTexts
    redirect_back(fallback_location: [namespace, requested_resource], notice: 'Account deletion is in progress.')
+    # rubocop:enable Rails/I18nLocaleTexts
  end
 end
@@ -41,4 +41,14 @@ class SuperAdmin::AgentBotsController < SuperAdmin::ApplicationController

  # See https://administrate-prototype.herokuapp.com/customizing_controller_actions
  # for more information
+
+  def destroy_avatar
+    avatar = requested_resource.avatar
+    avatar.purge
+    redirect_back(fallback_location: super_admin_agent_bots_path)
+  end
+
+  def scoped_resource
+    resource_class.with_attached_avatar
+  end
 end
@@ -5,6 +5,17 @@ class SuperAdmin::InstanceStatusesController < SuperAdmin::ApplicationController
    sha
    postgres_status
    redis_metrics
+    chatwoot_edition
+  end
+
+  def chatwoot_edition
+    @metrics['Chatwoot edition'] = if ChatwootApp.enterprise?
+                                     'Enterprise'
+                                   elsif ChatwootApp.custom?
+                                     'Custom'
+                                   else
+                                     'Community'
+                                   end
  end

  def chatwoot_version
@@ -45,6 +45,17 @@ class SuperAdmin::UsersController < SuperAdmin::ApplicationController
  # empty values into nil values. It uses other APIs such as `resource_class`
  # and `dashboard`:
  #
+
+  def destroy_avatar
+    avatar = requested_resource.avatar
+    avatar.purge
+    redirect_back(fallback_location: super_admin_users_path)
+  end
+
+  def scoped_resource
+    resource_class.with_attached_avatar
+  end
+
  def resource_params
    permitted_params = super
    permitted_params.delete(:password) if permitted_params[:password].blank?
@@ -1,7 +1,7 @@
 class SwaggerController < ApplicationController
  def respond
    if Rails.env.development? || Rails.env.test?
-      render inline: File.read(Rails.root.join('swagger', derived_path))
+      render inline: Rails.root.join('swagger', derived_path).read
    else
      head :not_found
    end
@@ -10,6 +10,11 @@ class AgentBotDashboard < Administrate::BaseDashboard
  ATTRIBUTE_TYPES = {
    access_token: Field::HasOne,
    avatar_url: AvatarField,
+    avatar: Field::ActiveStorage.with_options(
+      destroy_url: proc do |_namespace, _resource, attachment|
+        [:avatar_super_admin_agent_bot, { attachment_id: attachment.id }]
+      end
+    ),
    id: Field::Number,
    name: Field::String,
    account: Field::BelongsTo.with_options(searchable: true, searchable_field: 'name', order: 'id DESC'),
@@ -36,6 +41,7 @@ class AgentBotDashboard < Administrate::BaseDashboard
  # an array of attributes that will be displayed on the model's show page.
  SHOW_PAGE_ATTRIBUTES = %i[
    id
+    avatar_url
    account
    name
    description
@@ -47,6 +53,7 @@ class AgentBotDashboard < Administrate::BaseDashboard
  # on the model's form (`new` and `edit`) pages.
  FORM_ATTRIBUTES = %i[
    name
+    avatar
    account
    description
    outgoing_url
@@ -11,6 +11,11 @@ class UserDashboard < Administrate::BaseDashboard
    account_users: Field::HasMany,
    id: Field::Number,
    avatar_url: AvatarField,
+    avatar: Field::ActiveStorage.with_options(
+      destroy_url: proc do |_namespace, _resource, attachment|
+        [:avatar_super_admin_user, { attachment_id: attachment.id }]
+      end
+    ),
    provider: Field::String,
    uid: Field::String,
    password: Field::Password,
@@ -69,6 +74,7 @@ class UserDashboard < Administrate::BaseDashboard
  # on the model's form (`new` and `edit`) pages.
  FORM_ATTRIBUTES = %i[
    name
+    avatar
    display_name
    email
    password
@@ -102,7 +102,7 @@ class ConversationFinder
    when 'participating'
      @conversations = current_user.participating_conversations.where(account_id: current_account.id)
    when 'unattended'
-      @conversations = @conversations.where(first_reply_created_at: nil)
+      @conversations = @conversations.unattended
    end
    @conversations
  end
@@ -155,9 +155,9 @@ class ConversationFinder
  end

  def conversations
-    @conversations = @conversations.includes(
-      :taggings, :inbox, { assignee: { avatar_attachment: [:blob] } }, { contact: { avatar_attachment: [:blob] } }, :team, :contact_inbox
-    )
+    @conversations = @conversations.includes(:taggings, :inbox,
+                                             { assignee: [{ account_users: [:account] }, { avatar_attachment: [:blob] }] },
+                                             { contact: { avatar_attachment: [:blob] } }, :team, :contact_inbox, :messages)
    sort_by = SORT_OPTIONS[params[:sort_by]] || SORT_OPTIONS['latest']
    @conversations.send(sort_by).page(current_page)
  end
@@ -7,8 +7,6 @@ module MessageFormatHelper
  end

  def render_message_content(message_content)
-    # rubocop:disable Rails/OutputSafety
-    CommonMarker.render_html(message_content).html_safe
-    # rubocop:enable Rails/OutputSafety
+    ChatwootMarkdownRenderer.new(message_content).render_message
  end
 end
@@ -29,7 +29,9 @@ module ReportHelper
  end

  def resolutions_count
-    (get_grouped_values scope.conversations.where(account_id: account.id).resolved).count
+    object_scope = scope.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_resolved,
+                                                                                              conversations: { status: :resolved }).distinct
+    (get_grouped_values object_scope).count
  end

  def avg_first_response_time
@@ -115,11 +115,6 @@ export default {

 <style lang="scss">
@import './assets/scss/app';
-.update-banner {
-  height: var(--space-larger);
-  align-items: center;
-  font-size: var(--font-size-small) !important;
-}
 </style>

 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
@@ -75,6 +75,10 @@ class ContactAPI extends ApiClient {
  destroyAvatar(contactId) {
    return axios.delete(`${this.url}/${contactId}/avatar`);
  }
+
+  exportContacts() {
+    return axios.get(`${this.url}/export`);
+  }
 }

 export default new ContactAPI();
@@ -6,7 +6,7 @@ class CSATReportsAPI extends ApiClient {
    super('csat_survey_responses', { accountScoped: true });
  }

-  get({ page, from, to, user_ids } = {}) {
+  get({ page, from, to, user_ids, inbox_id, team_id, rating } = {}) {
    return axios.get(this.url, {
      params: {
        page,
@@ -14,24 +14,31 @@ class CSATReportsAPI extends ApiClient {
        until: to,
        sort: '-created_at',
        user_ids,
+        inbox_id,
+        team_id,
+        rating,
      },
    });
  }

-  download({ from, to, user_ids } = {}) {
+  download({ from, to, user_ids, inbox_id, team_id, rating } = {}) {
    return axios.get(`${this.url}/download`, {
      params: {
        since: from,
        until: to,
        sort: '-created_at',
        user_ids,
+        inbox_id,
+        team_id,
+        rating,
      },
    });
  }

-  getMetrics({ from, to, user_ids } = {}) {
+  getMetrics({ from, to, user_ids, inbox_id, team_id, rating } = {}) {
+    // no ratings for metrics
    return axios.get(`${this.url}/metrics`, {
-      params: { since: from, until: to, user_ids },
+      params: { since: from, until: to, user_ids, inbox_id, team_id, rating },
    });
  }
 }
@@ -127,6 +127,10 @@ class ConversationApi extends ApiClient {
      user_ids: userIds,
    });
  }
+
+  getAllAttachments(conversationId) {
+    return axios.get(`${this.url}/${conversationId}/attachments`);
+  }
 }

 export default new ConversationApi();
@@ -210,5 +210,12 @@ describe('#ConversationAPI', () => {
        { params: { page: payload.page } }
      );
    });
+
+    it('#getAllAttachments', () => {
+      conversationAPI.getAllAttachments(1);
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/conversations/1/attachments'
+      );
+    });
  });
 });
@@ -5,12 +5,20 @@
 }

 .date-picker {
-  .mx-datepicker {
-    width: 100%;
+  &.no-margin {
+    .mx-input {
+      margin-bottom: 0;
+    }
  }

-  .mx-datepicker-range {
-    width: 320px;
+  &:not(.auto-width) {
+    .mx-datepicker-range {
+      width: 320px;
+    }
+  }
+
+  .mx-datepicker {
+    width: 100%;
  }

  .mx-input {
@@ -13,7 +13,9 @@
 }

 .multiselect {
-  margin-bottom: var(--space-normal);
+  &:not(.no-margin) {
+    margin-bottom: var(--space-normal);
+  }

  &.multiselect--disabled {
    opacity: 0.8;
@@ -29,13 +29,13 @@
    }

    .modal-image {
-      max-height: 90%;
-      max-width: 90%;
+      max-height: 80vh;
+      max-width: 80vw;
    }

    .modal-video {
-      max-height: 75vh;
-      max-width: 100%;
+      max-height: 80vh;
+      max-width: 80vw;
    }

    &::before {
@@ -53,16 +53,6 @@
      width: 100%;
    }
  }
-
-  .video {
-    .modal-container {
-      width: auto;
-
-      .modal--close {
-        z-index: var(--z-index-low);
-      }
-    }
-  }
 }

 .conversations-list-wrap {
@@ -400,4 +390,3 @@
    margin-bottom: 0;
  }
 }
-
@@ -47,6 +47,14 @@
          />
        </div>
        <div v-if="hasActiveFolders">
+          <woot-button
+            v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
+            size="tiny"
+            variant="smooth"
+            color-scheme="secondary"
+            icon="edit"
+            @click="onToggleAdvanceFiltersModal"
+          />
          <woot-button
            v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
            size="tiny"
@@ -168,8 +176,11 @@
        v-if="showAdvancedFilters"
        :initial-filter-types="advancedFilterTypes"
        :initial-applied-filters="appliedFilter"
+        :active-folder-name="activeFolderName"
        :on-close="closeAdvanceFiltersModal"
+        :is-folder-view="hasActiveFolders"
        @applyFilter="onApplyFilter"
+        @updateFolder="onUpdateSavedFilter"
      />
    </woot-modal>
  </div>
@@ -193,6 +204,9 @@ import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCust
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import filterMixin from 'shared/mixins/filterMixin';
+import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
+import countries from 'shared/constants/countries';
+import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';

 import {
  hasPressedAltAndJKey,
@@ -289,6 +303,11 @@ export default {
      appliedFilters: 'getAppliedConversationFilters',
      folders: 'customViews/getCustomViews',
      inboxes: 'inboxes/getInboxes',
+      agentList: 'agents/getAgents',
+      teamsList: 'teams/getTeams',
+      inboxesList: 'inboxes/getInboxes',
+      campaigns: 'campaigns/getAllCampaigns',
+      labels: 'labels/getLabels',
    }),
    hasAppliedFilters() {
      return this.appliedFilters.length !== 0;
@@ -451,6 +470,9 @@ export default {
      }
      return undefined;
    },
+    activeFolderName() {
+      return this.activeFolder?.name;
+    },
    activeTeam() {
      if (this.teamId) {
        return this.$store.getters['teams/getTeam'](this.teamId);
@@ -483,9 +505,7 @@ export default {
      this.resetAndFetchData();
    },
    activeFolder() {
-      if (!this.hasAppliedFilters) {
-        this.resetAndFetchData();
-      }
+      this.resetAndFetchData();
    },
    chatLists() {
      this.chatsOnView = this.conversationList;
@@ -496,6 +516,10 @@ export default {
    this.$store.dispatch('setChatSortFilter', this.activeSortBy);
    this.resetAndFetchData();

+    if (this.hasActiveFolders) {
+      this.$store.dispatch('campaigns/get');
+    }
+
    bus.$on('fetch_conversation_stats', () => {
      this.$store.dispatch('conversationStats/get', this.conversationFilters);
    });
@@ -508,6 +532,15 @@ export default {
      this.$store.dispatch('emptyAllConversations');
      this.fetchFilteredConversations(payload);
    },
+    onUpdateSavedFilter(payload, folderName) {
+      const payloadData = {
+        ...this.activeFolder,
+        name: folderName,
+        query: filterQueryGenerator(payload),
+      };
+      this.$store.dispatch('customViews/update', payloadData);
+      this.closeAdvanceFiltersModal();
+    },
    onClickOpenAddFoldersModal() {
      this.showAddFoldersModal = true;
    },
@@ -521,15 +554,70 @@ export default {
      this.showDeleteFoldersModal = false;
    },
    onToggleAdvanceFiltersModal() {
-      if (!this.hasAppliedFilters) {
+      if (!this.hasAppliedFilters && !this.hasActiveFolders) {
        this.initializeExistingFilterToModal();
      }
+      if (this.hasActiveFolders) {
+        this.initializeFolderToFilterModal(this.activeFolder);
+      }
      this.showAdvancedFilters = true;
    },
    closeAdvanceFiltersModal() {
      this.showAdvancedFilters = false;
      this.appliedFilter = [];
    },
+    setParamsForEditFolderModal() {
+      // Here we are setting the params for edit folder modal to show the existing values.
+
+      // For agent, team, inboxes,and campaigns we get only the id's from the query.
+      // So we are mapping the id's to the actual values.
+
+      // For labels we get the name of the label from the query.
+      // If we delete the label from the label list then we will not be able to show the label name.
+
+      // For custom attributes we get only attribute key.
+      // So we are mapping it to find the input type of the attribute to show in the edit folder modal.
+      const params = {
+        agents: this.agentList,
+        teams: this.teamsList,
+        inboxes: this.inboxesList,
+        labels: this.labels,
+        campaigns: this.campaigns,
+        languages: languages,
+        countries: countries,
+        filterTypes: advancedFilterTypes,
+        allCustomAttributes: this.$store.getters[
+          'attributes/getAttributesByModel'
+        ]('conversation_attribute'),
+      };
+      return params;
+    },
+    initializeFolderToFilterModal(activeFolder) {
+      // Here we are setting the params for edit folder modal.
+      //  To show the existing values. when we click on edit folder button.
+
+      // Here we get the query from the active folder.
+      // And we are mapping the query to the actual values.
+      // To show in the edit folder modal by the help of generateValuesForEditCustomViews helper.
+      const query = activeFolder?.query?.payload;
+      if (!Array.isArray(query)) return;
+
+      this.appliedFilter.push(
+        ...query.map(filter => ({
+          attribute_key: filter.attribute_key,
+          attribute_model: filter.attribute_model,
+          filter_operator: filter.filter_operator,
+          values: Array.isArray(filter.values)
+            ? generateValuesForEditCustomViews(
+                filter,
+                this.setParamsForEditFolderModal()
+              )
+            : [],
+          query_operator: filter.query_operator,
+          custom_attribute_type: filter.custom_attribute_type,
+        }))
+      );
+    },
    getKeyboardListenerParams() {
      const allConversations = this.$refs.activeConversation.querySelectorAll(
        'div.conversations-list div.conversation'
@@ -575,6 +663,7 @@ export default {
      }
    },
    resetAndFetchData() {
+      this.appliedFilter = [];
      this.resetBulkActions();
      this.$store.dispatch('conversationPage/reset');
      this.$store.dispatch('emptyAllConversations');
@@ -587,7 +676,6 @@ export default {
        return;
      }
      this.fetchConversations();
-      this.appliedFilter = [];
    },
    fetchConversations() {
      this.$store
@@ -115,7 +115,7 @@
 </template>

 <script>
-import format from 'date-fns/format';
+import { format, parseISO } from 'date-fns';
 import { required, url } from 'vuelidate/lib/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
@@ -143,15 +143,20 @@ export default {
  },

  computed: {
-    formattedValue() {
+    displayValue() {
      if (this.isAttributeTypeDate) {
-        return format(new Date(this.value || new Date()), DATE_FORMAT);
+        return new Date(this.value || new Date()).toLocaleDateString();
      }
      if (this.isAttributeTypeCheckbox) {
        return this.value === 'false' ? false : this.value;
      }
      return this.value;
    },
+    formattedValue() {
+      return this.isAttributeTypeDate
+        ? format(this.value ? new Date(this.value) : new Date(), DATE_FORMAT)
+        : this.value;
+    },
    listOptions() {
      return this.values.map((value, index) => ({
        id: index + 1,
@@ -192,17 +197,11 @@ export default {
      }
      return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.REQUIRED');
    },
-    displayValue() {
-      if (this.attributeType === 'date') {
-        return format(new Date(this.editedValue), 'dd-MM-yyyy');
-      }
-      return this.editedValue;
-    },
  },
  watch: {
    value() {
      this.isEditing = false;
-      this.editedValue = this.value;
+      this.editedValue = this.formattedValue;
    },
  },

@@ -249,9 +248,8 @@ export default {
    onUpdate() {
      const updatedValue =
        this.attributeType === 'date'
-          ? format(new Date(this.editedValue), DATE_FORMAT)
+          ? parseISO(this.editedValue)
          : this.editedValue;
-
      this.$v.$touch();
      if (this.$v.$invalid) {
        return;
@@ -8,6 +8,7 @@
    >
      <div :class="modalContainerClassName" @click.stop>
        <woot-button
+          v-if="showCloseButton"
          color-scheme="secondary"
          icon="dismiss"
          variant="clear"
@@ -28,6 +29,10 @@ export default {
      default: true,
    },
    show: Boolean,
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
    onClose: {
      type: Function,
      required: true,
@@ -1,7 +1,6 @@
 <template>
  <banner
    v-if="shouldShowBanner"
-    class="update-banner"
    color-scheme="primary"
    :banner-message="bannerMessage"
    href-link="https://github.com/chatwoot/chatwoot/releases"
@@ -11,26 +11,29 @@
        {{ hrefLinkText }}
      </a>
    </span>
-    <woot-button
-      v-if="hasActionButton"
-      size="small"
-      variant="link"
-      icon="arrow-right"
-      color-scheme="primary"
-      class-names="banner-action__button"
-      @click="onClick"
-    >
-      {{ actionButtonLabel }}
-    </woot-button>
-    <woot-button
-      v-if="hasCloseButton"
-      size="small"
-      variant="link"
-      color-scheme="secondary"
-      icon="dismiss-circle"
-      class-names="banner-action__button"
-      @click="onClickClose"
-    />
+    <div class="actions">
+      <woot-button
+        v-if="hasActionButton"
+        size="tiny"
+        icon="arrow-right"
+        :variant="actionButtonVariant"
+        color-scheme="primary"
+        class-names="banner-action__button"
+        @click="onClick"
+      >
+        {{ actionButtonLabel }}
+      </woot-button>
+      <woot-button
+        v-if="hasCloseButton"
+        size="tiny"
+        :color-scheme="colorScheme"
+        icon="dismiss-circle"
+        class-names="banner-action__button"
+        @click="onClickClose"
+      >
+        {{ $t('GENERAL_SETTINGS.DISMISS') }}
+      </woot-button>
+    </div>
  </div>
 </template>

@@ -53,6 +56,10 @@ export default {
      type: Boolean,
      default: false,
    },
+    actionButtonVariant: {
+      type: String,
+      default: '',
+    },
    actionButtonLabel: {
      type: String,
      default: '',
@@ -68,7 +75,12 @@ export default {
  },
  computed: {
    bannerClasses() {
-      return [this.colorScheme];
+      const classList = [this.colorScheme, `banner-align-${this.align}`];
+
+      if (this.hasActionButton || this.hasCloseButton) {
+        classList.push('has-button');
+      }
+      return classList;
    },
  },
  methods: {
@@ -84,17 +96,26 @@ export default {

 <style lang="scss" scoped>
 .banner {
+  --x-padding: var(--space-normal);
+  --y-padding: var(--space-slab);
+
  display: flex;
+  gap: var(--x-padding);
  color: var(--white);
  font-size: var(--font-size-mini);
-  padding: var(--space-slab) var(--space-normal);
+  padding: var(--y-padding) var(--x-padding);
  justify-content: center;
-  position: sticky;

  &.primary {
    background: var(--w-500);
    .banner-action__button {
+      background: var(--w-600);
+      border: none;
      color: var(--white);
+
+      &:hover {
+        background: var(--w-800);
+      }
    }
  }

@@ -107,7 +128,16 @@ export default {
  }

  &.alert {
-    background: var(--r-400);
+    background: var(--r-500);
+    .banner-action__button {
+      background: var(--r-700);
+      border: none;
+      color: var(--white);
+
+      &:hover {
+        background: var(--r-800);
+      }
+    }
  }

  &.warning {
@@ -133,8 +163,6 @@ export default {
  }

  .banner-action__button {
-    margin: 0 var(--space-smaller);
-
    ::v-deep .button__content {
      white-space: nowrap;
    }
@@ -144,5 +172,11 @@ export default {
    display: flex;
    align-items: center;
  }
+
+  .actions {
+    display: flex;
+    gap: var(--space-smaller);
+    right: var(--y-padding);
+  }
 }
 </style>
@@ -45,6 +45,14 @@ export default {
      default: () => {},
    },
  },
+  watch: {
+    collection() {
+      this.renderChart(this.collection, {
+        ...chartOptions,
+        ...this.chartOptions,
+      });
+    },
+  },
  mounted() {
    this.renderChart(this.collection, {
      ...chartOptions,
@@ -1,9 +1,21 @@
 <template>
  <div class="column">
-    <woot-modal-header :header-title="$t('FILTER.TITLE')">
-      <p>{{ $t('FILTER.SUBTITLE') }}</p>
+    <woot-modal-header :header-title="filterModalHeaderTitle">
+      <p>{{ filterModalSubTitle }}</p>
    </woot-modal-header>
-    <div class="row modal-content">
+    <div class="column modal-content">
+      <div v-if="isFolderView" class="columns">
+        <label class="input-label" :class="{ error: !activeFolderNewName }">
+          {{ $t('FILTER.FOLDER_LABEL') }}
+          <input v-model="activeFolderNewName" type="text" class="name-input" />
+          <span v-if="!activeFolderNewName" class="message">
+            {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
+          </span>
+        </label>
+        <label class="input-label">
+          {{ $t('FILTER.FOLDER_QUERY_LABEL') }}
+        </label>
+      </div>
      <div class="medium-12 columns filters-wrap">
        <filter-input-box
          v-for="(filter, i) in appliedFilters"
@@ -42,7 +54,14 @@
          <woot-button class="button clear" @click.prevent="onClose">
            {{ $t('FILTER.CANCEL_BUTTON_LABEL') }}
          </woot-button>
-          <woot-button @click="submitFilterQuery">
+          <woot-button
+            v-if="isFolderView"
+            :disabled="!activeFolderNewName"
+            @click="updateSavedCustomViews"
+          >
+            {{ $t('FILTER.UPDATE_BUTTON_LABEL') }}
+          </woot-button>
+          <woot-button v-else @click="submitFilterQuery">
            {{ $t('FILTER.SUBMIT_BUTTON_LABEL') }}
          </woot-button>
        </div>
@@ -81,6 +100,14 @@ export default {
      type: Array,
      default: () => [],
    },
+    activeFolderName: {
+      type: String,
+      default: '',
+    },
+    isFolderView: {
+      type: Boolean,
+      default: false,
+    },
  },
  validations: {
    appliedFilters: {
@@ -107,6 +134,7 @@ export default {
    return {
      show: true,
      appliedFilters: this.initialAppliedFilters,
+      activeFolderNewName: this.activeFolderName,
      filterTypes: this.initialFilterTypes,
      filterAttributeGroups,
      filterGroups: [],
@@ -119,6 +147,16 @@ export default {
    ...mapGetters({
      getAppliedConversationFilters: 'getAppliedConversationFilters',
    }),
+    filterModalHeaderTitle() {
+      return !this.isFolderView
+        ? this.$t('FILTER.TITLE')
+        : this.$t('FILTER.EDIT_CUSTOM_FILTER');
+    },
+    filterModalSubTitle() {
+      return !this.isFolderView
+        ? this.$t('FILTER.SUBTITLE')
+        : this.$t('FILTER.CUSTOM_VIEWS_SUBTITLE');
+    },
  },
  mounted() {
    this.setFilterAttributes();
@@ -126,7 +164,7 @@ export default {
    if (this.getAppliedConversationFilters.length) {
      this.appliedFilters = [];
      this.appliedFilters = [...this.getAppliedConversationFilters];
-    } else {
+    } else if (!this.isFolderView) {
      this.appliedFilters.push({
        attribute_key: 'status',
        filter_operator: 'equal_to',
@@ -177,11 +215,11 @@ export default {
      if (key === 'created_at' || key === 'last_activity_at')
        if (operator === 'days_before') return 'plain_text';
      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type.inputType;
+      return type?.inputType;
    },
    getOperators(key) {
      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type.filterOperators;
+      return type?.filterOperators;
    },
    getDropdownValues(type) {
      const statusFilters = this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS');
@@ -267,11 +305,30 @@ export default {
      }
    },
    appendNewFilter() {
-      this.appliedFilters.push({
-        attribute_key: 'status',
-        filter_operator: 'equal_to',
-        values: '',
+      if (this.isFolderView) {
+        this.setQueryOperatorOnLastQuery();
+      } else {
+        this.appliedFilters.push({
+          attribute_key: 'status',
+          filter_operator: 'equal_to',
+          values: '',
+          query_operator: 'and',
+        });
+      }
+    },
+    setQueryOperatorOnLastQuery() {
+      const lastItemIndex = this.appliedFilters.length - 1;
+      this.appliedFilters[lastItemIndex] = {
+        ...this.appliedFilters[lastItemIndex],
        query_operator: 'and',
+      };
+      this.$nextTick(() => {
+        this.appliedFilters.push({
+          attribute_key: 'status',
+          filter_operator: 'equal_to',
+          values: '',
+          query_operator: 'and',
+        });
      });
    },
    removeFilter(index) {
@@ -296,6 +353,9 @@ export default {
        })),
      });
    },
+    updateSavedCustomViews() {
+      this.$emit('updateFolder', this.appliedFilters, this.activeFolderNewName);
+    },
    resetFilter(index, currentFilter) {
      this.appliedFilters[index].filter_operator = this.filterTypes.find(
        filter => filter.attributeKey === currentFilter.attribute_key
@@ -322,4 +382,12 @@ export default {
 .filter-actions {
  margin-top: var(--space-normal);
 }
+
+.input-label {
+  margin-bottom: var(--space-smaller);
+
+  .name-input {
+    width: 50%;
+  }
+}
 </style>
@@ -25,10 +25,14 @@
        <blockquote v-if="storyReply" class="story-reply-quote">
          <span>{{ $t('CONVERSATION.REPLIED_TO_STORY') }}</span>
          <bubble-image
-            v-if="!hasStoryError"
+            v-if="!hasImgStoryError && storyUrl"
            :url="storyUrl"
            @error="onStoryLoadError"
          />
+          <bubble-video
+            v-else-if="hasImgStoryError && storyUrl"
+            :url="storyUrl"
+          />
        </blockquote>
        <bubble-text
          v-if="data.content"
@@ -48,23 +52,12 @@
          {{ $t('CONVERSATION.UPLOADING_ATTACHMENTS') }}
        </span>
        <div v-if="!isPending && hasAttachments">
-          <div v-for="attachment in data.attachments" :key="attachment.id">
-            <bubble-image
-              v-if="attachment.file_type === 'image' && !hasImageError"
-              :url="attachment.data_url"
+          <div v-for="attachment in attachments" :key="attachment.id">
+            <bubble-image-audio-video
+              v-if="isAttachmentImageVideoAudio(attachment.file_type)"
+              :attachment="attachment"
              @error="onImageLoadError"
            />
-            <audio
-              v-else-if="attachment.file_type === 'audio'"
-              controls
-              class="skip-context-menu"
-            >
-              <source :src="`${attachment.data_url}?t=${Date.now()}`" />
-            </audio>
-            <bubble-video
-              v-else-if="attachment.file_type === 'video'"
-              :url="attachment.data_url"
-            />
            <bubble-location
              v-else-if="attachment.file_type === 'location'"
              :latitude="attachment.coordinates_lat"
@@ -140,11 +133,12 @@ import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import BubbleActions from './bubble/Actions';
 import BubbleFile from './bubble/File';
 import BubbleImage from './bubble/Image';
+import BubbleVideo from './bubble/Video';
+import BubbleImageAudioVideo from './bubble/ImageAudioVideo';
 import BubbleIntegration from './bubble/Integration.vue';
 import BubbleLocation from './bubble/Location';
 import BubbleMailHead from './bubble/MailHead';
 import BubbleText from './bubble/Text';
-import BubbleVideo from './bubble/Video.vue';
 import BubbleContact from './bubble/Contact';
 import Spinner from 'shared/components/Spinner';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu';
@@ -161,11 +155,12 @@ export default {
    BubbleActions,
    BubbleFile,
    BubbleImage,
+    BubbleVideo,
+    BubbleImageAudioVideo,
    BubbleIntegration,
    BubbleLocation,
    BubbleMailHead,
    BubbleText,
-    BubbleVideo,
    BubbleContact,
    ContextMenu,
    Spinner,
@@ -200,10 +195,18 @@ export default {
      hasImageError: false,
      contextMenuPosition: {},
      showBackgroundHighlight: false,
-      hasStoryError: false,
+      hasImgStoryError: false,
    };
  },
  computed: {
+    attachments() {
+      // Here it is used to get sender and created_at for each attachment
+      return this.data?.attachments.map(attachment => ({
+        ...attachment,
+        sender: this.data.sender || {},
+        created_at: this.data.created_at || '',
+      }));
+    },
    shouldRenderMessage() {
      return (
        this.hasAttachments ||
@@ -429,12 +432,12 @@ export default {
  watch: {
    data() {
      this.hasImageError = false;
-      this.hasStoryError = false;
+      this.hasImgStoryError = false;
    },
  },
  mounted() {
    this.hasImageError = false;
-    this.hasStoryError = false;
+    this.hasImgStoryError = false;
    bus.$on(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL, this.closeContextMenu);
    this.setupHighlightTimer();
  },
@@ -443,6 +446,9 @@ export default {
    clearTimeout(this.higlightTimeout);
  },
  methods: {
+    isAttachmentImageVideoAudio(fileType) {
+      return ['image', 'audio', 'video'].includes(fileType);
+    },
    hasMediaAttachment(type) {
      if (this.hasAttachments && this.data.attachments.length > 0) {
        const { attachments = [{}] } = this.data;
@@ -464,7 +470,7 @@ export default {
      this.hasImageError = true;
    },
    onStoryLoadError() {
-      this.hasStoryError = true;
+      this.hasImgStoryError = true;
    },
    openContextMenu(e) {
      const shouldSkipContextMenu =
@@ -36,6 +36,7 @@
        v-for="message in getReadMessages"
        :key="message.id"
        class="message--read ph-no-capture"
+        data-clarity-mask="True"
        :data="message"
        :is-a-tweet="isATweet"
        :is-a-whatsapp-channel="isAWhatsAppChannel"
@@ -56,6 +57,7 @@
        v-for="message in getUnReadMessages"
        :key="message.id"
        class="message--unread ph-no-capture"
+        data-clarity-mask="True"
        :data="message"
        :is-a-tweet="isATweet"
        :is-a-whatsapp-channel="isAWhatsAppChannel"
@@ -277,6 +279,7 @@ export default {
      if (newChat.id === oldChat.id) {
        return;
      }
+      this.fetchAllAttachmentsFromCurrentChat();
      this.selectedTweetId = null;
    },
  },
@@ -288,6 +291,7 @@ export default {

  mounted() {
    this.addScrollListener();
+    this.fetchAllAttachmentsFromCurrentChat();
  },

  beforeDestroy() {
@@ -296,6 +300,9 @@ export default {
  },

  methods: {
+    fetchAllAttachmentsFromCurrentChat() {
+      this.$store.dispatch('fetchAllAttachments', this.currentChat.id);
+    },
    removeBusListeners() {
      bus.$off(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
      bus.$off(BUS_EVENTS.SET_TWEET_REPLY, this.setSelectedTweet);
@@ -2,6 +2,7 @@
  <div class="reply-box" :class="replyBoxClass">
    <banner
      v-if="showSelfAssignBanner"
+      action-button-variant="link"
      color-scheme="secondary"
      :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
      :has-action-button="true"
@@ -501,7 +502,7 @@ export default {
      return `draft-${this.conversationIdByRoute}-${this.replyType}`;
    },
    audioRecordFormat() {
-      if (this.isAWhatsAppChannel) {
+      if (this.isAWhatsAppChannel || this.isAPIInbox) {
        return AUDIO_FORMATS.OGG;
      }
      return AUDIO_FORMATS.WAV;
@@ -0,0 +1,106 @@
+<template>
+  <div class="message-text__wrap" :class="attachmentTypeClasses">
+    <img
+      v-if="isImage && !isImageError"
+      :src="attachment.data_url"
+      @click="onClick"
+      @error="onImgError()"
+    />
+    <video
+      v-if="isVideo"
+      :src="attachment.data_url"
+      muted
+      playsInline
+      @click="onClick"
+    />
+    <audio v-else-if="isAudio" controls class="skip-context-menu">
+      <source :src="`${attachment.data_url}?t=${Date.now()}`" />
+    </audio>
+    <gallery-view
+      v-if="show"
+      :show.sync="show"
+      :attachment="attachment"
+      :all-attachments="filteredCurrentChatAttachments"
+      @error="onImgError()"
+      @close="onClose"
+    />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { hasPressedCommand } from 'shared/helpers/KeyboardHelpers';
+
+import GalleryView from '../components/GalleryView';
+
+const ALLOWED_FILE_TYPES = {
+  IMAGE: 'image',
+  VIDEO: 'video',
+  AUDIO: 'audio',
+};
+
+export default {
+  components: {
+    GalleryView,
+  },
+  props: {
+    attachment: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      show: false,
+      isImageError: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      currentChatAttachments: 'getSelectedChatAttachments',
+    }),
+    isImage() {
+      return this.attachment.file_type === ALLOWED_FILE_TYPES.IMAGE;
+    },
+    isVideo() {
+      return this.attachment.file_type === ALLOWED_FILE_TYPES.VIDEO;
+    },
+    isAudio() {
+      return this.attachment.file_type === ALLOWED_FILE_TYPES.AUDIO;
+    },
+    attachmentTypeClasses() {
+      return {
+        image: this.isImage,
+        video: this.isVideo,
+      };
+    },
+    filteredCurrentChatAttachments() {
+      const attachments = this.currentChatAttachments.filter(attachment =>
+        ['image', 'video', 'audio'].includes(attachment.file_type)
+      );
+      return attachments;
+    },
+  },
+  watch: {
+    attachment() {
+      this.isImageError = false;
+    },
+  },
+  methods: {
+    onClose() {
+      this.show = false;
+    },
+    onClick(e) {
+      if (hasPressedCommand(e)) {
+        window.open(this.attachment.data_url, '_blank');
+        return;
+      }
+      this.show = true;
+    },
+    onImgError() {
+      this.isImageError = true;
+      this.$emit('error');
+    },
+  },
+};
+</script>
@@ -0,0 +1,330 @@
+<template>
+  <woot-modal
+    full-width
+    :show.sync="show"
+    :show-close-button="false"
+    :on-close="onClose"
+  >
+    <div v-on-clickaway="onClose" class="gallery-modal--wrap" @click="onClose">
+      <div class="gallery-modal--header">
+        <div class="header-info--wrap" @click.stop>
+          <thumbnail
+            :username="senderDetails.name"
+            :src="senderDetails.avatar"
+            size="40px"
+          />
+          <div class="header-info">
+            <h3 class="sub-block-title sender-name text-truncate">
+              <span>{{ senderDetails.name }}</span>
+            </h3>
+            <span class="time-stamp">{{ readableTime }}</span>
+          </div>
+        </div>
+        <div class="header-actions" @click.stop>
+          <woot-button
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="arrow-download"
+            @click="onClickDownload"
+          />
+          <woot-button
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="dismiss"
+            @click="onClose"
+          />
+        </div>
+      </div>
+      <div class="gallery-modal--body">
+        <div class="attachment-toggle--button">
+          <woot-button
+            v-if="hasMoreThanOneAttachment"
+            size="large"
+            variant="smooth"
+            color-scheme="primary"
+            icon="chevron-left"
+            :disabled="activeImageIndex === 0"
+            @click.stop="
+              onClickChangeAttachment(
+                allAttachments[activeImageIndex - 1],
+                activeImageIndex - 1
+              )
+            "
+          />
+        </div>
+        <div class="attachments-viewer">
+          <div class="attachment-view">
+            <img
+              v-if="isImage"
+              :key="activeAttachment.message_id"
+              :src="activeAttachment.data_url"
+              class="modal-image skip-context-menu"
+              @click.stop
+            />
+            <video
+              v-if="isVideo"
+              :key="activeAttachment.message_id"
+              :src="activeAttachment.data_url"
+              controls
+              playsInline
+              class="modal-video skip-context-menu"
+              @click.stop
+            />
+            <audio
+              v-if="isAudio"
+              :key="activeAttachment.message_id"
+              controls
+              class="skip-context-menu"
+              @click.stop
+            >
+              <source :src="`${activeAttachment.data_url}?t=${Date.now()}`" />
+            </audio>
+          </div>
+        </div>
+        <div class="attachment-toggle--button">
+          <woot-button
+            v-if="hasMoreThanOneAttachment"
+            size="large"
+            variant="smooth"
+            color-scheme="primary"
+            :disabled="activeImageIndex === allAttachments.length - 1"
+            icon="chevron-right"
+            @click.stop="
+              onClickChangeAttachment(
+                allAttachments[activeImageIndex + 1],
+                activeImageIndex + 1
+              )
+            "
+          />
+        </div>
+      </div>
+    </div>
+  </woot-modal>
+</template>
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+import { mapGetters } from 'vuex';
+import {
+  isEscape,
+  hasPressedArrowLeftKey,
+  hasPressedArrowRightKey,
+} from 'shared/helpers/KeyboardHelpers';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import timeMixin from 'dashboard/mixins/time';
+
+import Thumbnail from 'dashboard/components/widgets/Thumbnail';
+
+const ALLOWED_FILE_TYPES = {
+  IMAGE: 'image',
+  VIDEO: 'video',
+  AUDIO: 'audio',
+};
+
+export default {
+  components: {
+    Thumbnail,
+  },
+  mixins: [eventListenerMixins, clickaway, timeMixin],
+  props: {
+    show: {
+      type: Boolean,
+      required: true,
+    },
+    attachment: {
+      type: Object,
+      required: true,
+    },
+    allAttachments: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      activeAttachment: {},
+      activeFileType: '',
+      activeImageIndex:
+        this.allAttachments.findIndex(
+          attachment => attachment.message_id === this.attachment.message_id
+        ) || 0,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+    }),
+    hasMoreThanOneAttachment() {
+      return this.allAttachments.length > 1;
+    },
+    readableTime() {
+      if (!this.activeAttachment.created_at) return '';
+      return this.messageTimestamp(
+        this.activeAttachment.created_at,
+        'LLL d yyyy, h:mm a'
+      );
+    },
+    isImage() {
+      return this.activeFileType === ALLOWED_FILE_TYPES.IMAGE;
+    },
+    isVideo() {
+      return this.activeFileType === ALLOWED_FILE_TYPES.VIDEO;
+    },
+    isAudio() {
+      return this.activeFileType === ALLOWED_FILE_TYPES.AUDIO;
+    },
+    senderDetails() {
+      const { name, available_name: availableName, avatar_url, thumbnail, id } =
+        this.activeAttachment?.sender || this.attachment?.sender;
+      const currentUserID = this.currentUser?.id;
+      return {
+        name: currentUserID === id ? 'You' : name || availableName,
+        avatar: thumbnail || avatar_url,
+      };
+    },
+  },
+  mounted() {
+    this.setImageAndVideoSrc(this.attachment);
+  },
+  methods: {
+    onClose() {
+      this.$emit('close');
+    },
+    onClickChangeAttachment(attachment, index) {
+      if (!attachment) {
+        return;
+      }
+      this.activeImageIndex = index;
+      this.setImageAndVideoSrc(attachment);
+    },
+    setImageAndVideoSrc(attachment) {
+      const { file_type: type } = attachment;
+      if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) {
+        return;
+      }
+      this.activeAttachment = attachment;
+      this.activeFileType = type;
+    },
+    onKeyDownHandler(e) {
+      if (isEscape(e)) {
+        this.onClose();
+      } else if (hasPressedArrowLeftKey(e)) {
+        this.onClickChangeAttachment(
+          this.allAttachments[this.activeImageIndex - 1],
+          this.activeImageIndex - 1
+        );
+      } else if (hasPressedArrowRightKey(e)) {
+        this.onClickChangeAttachment(
+          this.allAttachments[this.activeImageIndex + 1],
+          this.activeImageIndex + 1
+        );
+      }
+    },
+    onClickDownload() {
+      const { file_type: type, data_url: url } = this.activeAttachment;
+      if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) {
+        return;
+      }
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `attachment.${type}`;
+      link.click();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.gallery-modal--wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: inherit;
+  height: inherit;
+
+  .gallery-modal--header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--space-small) var(--space-medium);
+
+    .header-info--wrap {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      .header-info {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        margin-left: var(--space-small);
+
+        .sender-name {
+          display: inline-block;
+          line-height: 1.4;
+          text-transform: capitalize;
+          margin: 0;
+          padding: 0;
+        }
+
+        .time-stamp {
+          color: var(--s-400);
+          font-size: var(--font-size-mini);
+          margin: 0;
+          padding: 0;
+        }
+      }
+    }
+
+    .header-actions {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-end;
+      margin-left: auto;
+      gap: var(--space-small);
+    }
+  }
+
+  .gallery-modal--body {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 86%;
+  }
+
+  .attachments-viewer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+    .attachment-view {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        margin: 0 auto;
+      }
+
+      video {
+        margin: 0 auto;
+      }
+    }
+  }
+
+  .attachment-toggle--button {
+    width: var(--space-mega);
+    min-width: var(--space-mega);
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>
@@ -79,6 +79,7 @@ import MenuItem from './menuItem.vue';
 import MenuItemWithSubmenu from './menuItemWithSubmenu.vue';
 import wootConstants from 'dashboard/constants/globals';
 import snoozeTimesMixin from 'dashboard/mixins/conversation/snoozeTimesMixin';
+import agentMixin from 'dashboard/mixins/agentMixin';
 import { mapGetters } from 'vuex';
 import AgentLoadingPlaceholder from './agentLoadingPlaceholder.vue';
 export default {
@@ -87,7 +88,7 @@ export default {
    MenuItemWithSubmenu,
    AgentLoadingPlaceholder,
  },
-  mixins: [snoozeTimesMixin],
+  mixins: [snoozeTimesMixin, agentMixin],
  props: {
    status: {
      type: String,
@@ -202,6 +203,16 @@ export default {
      teams: 'teams/getTeams',
      assignableAgentsUiFlags: 'inboxAssignableAgents/getUIFlags',
    }),
+    filteredAgentOnAvailability() {
+      const agents = this.$store.getters[
+        'inboxAssignableAgents/getAssignableAgents'
+      ](this.inboxId);
+      const agentsByUpdatedPresence = this.getAgentsByUpdatedPresence(agents);
+      const filteredAgents = this.sortedAgentsByAvailability(
+        agentsByUpdatedPresence
+      );
+      return filteredAgents;
+    },
    assignableAgents() {
      return [
        {
@@ -212,9 +223,7 @@ export default {
          account_id: 0,
          email: 'None',
        },
-        ...this.$store.getters['inboxAssignableAgents/getAssignableAgents'](
-          this.inboxId
-        ),
+        ...this.filteredAgentOnAvailability,
      ];
    },
  },
@@ -246,6 +255,7 @@ export default {
        ...(type === 'icon' && { icon: option.icon }),
        ...(type === 'label' && { color: option.color }),
        ...(type === 'agent' && { thumbnail: option.thumbnail }),
+        ...(type === 'agent' && { status: option.availability_status }),
        ...(type === 'text' && { label: option.label }),
        ...(type === 'label' && { label: option.title }),
        ...(type === 'agent' && { label: option.name }),
@@ -15,6 +15,7 @@
      v-if="variant === 'agent'"
      :username="option.label"
      :src="option.thumbnail"
+      :status="option.status"
      size="20px"
      class="agent-thumbnail"
    />
@@ -0,0 +1,119 @@
+export const getInputType = (key, operator, filterTypes) => {
+  if (key === 'created_at' || key === 'last_activity_at')
+    if (operator === 'days_before') return 'plain_text';
+  const type = filterTypes.find(filter => filter.attributeKey === key);
+  return type?.inputType;
+};
+
+export const generateCustomAttributesInputType = type => {
+  const filterInputTypes = {
+    text: 'string',
+    number: 'string',
+    date: 'string',
+    checkbox: 'multi_select',
+    list: 'multi_select',
+    link: 'string',
+  };
+  return filterInputTypes[type];
+};
+
+export const getAttributeInputType = (key, allCustomAttributes) => {
+  const customAttribute = allCustomAttributes.find(
+    attr => attr.attribute_key === key
+  );
+  const { attribute_display_type } = customAttribute;
+  const filterInputTypes = generateCustomAttributesInputType(
+    attribute_display_type
+  );
+  return filterInputTypes;
+};
+
+export const getValuesName = (values, list, idKey, nameKey) => {
+  const item = list?.find(v => v[idKey] === values[0]);
+  return {
+    id: values[0],
+    name: item ? item[nameKey] : values[0],
+  };
+};
+
+const getValuesForLabels = (values, labels) => {
+  const selectedLabels = labels.filter(label => values.includes(label.title));
+  return selectedLabels.map(({ title }) => ({
+    id: title,
+    name: title,
+  }));
+};
+
+const getValuesForLanguages = (values, languages) => {
+  const selectedLanguages = languages.filter(language =>
+    values.includes(language.id)
+  );
+  return selectedLanguages.map(({ id, name }) => ({
+    id: id.toLowerCase(),
+    name: name,
+  }));
+};
+
+const getValuesForCountries = (values, countries) => {
+  const selectedCountries = countries.filter(country =>
+    values.includes(country.id)
+  );
+  return selectedCountries.map(({ id, name }) => ({
+    id: id,
+    name: name,
+  }));
+};
+
+export const getValuesForFilter = (filter, params) => {
+  const { attribute_key, values } = filter;
+  const {
+    languages,
+    countries,
+    agents,
+    inboxes,
+    teams,
+    campaigns,
+    labels,
+  } = params;
+  switch (attribute_key) {
+    case 'assignee_id':
+      return getValuesName(values, agents, 'id', 'name');
+    case 'inbox_id':
+      return getValuesName(values, inboxes, 'id', 'name');
+    case 'team_id':
+      return getValuesName(values, teams, 'id', 'name');
+    case 'campaign_id':
+      return getValuesName(values, campaigns, 'id', 'title');
+    case 'labels': {
+      return getValuesForLabels(values, labels);
+    }
+    case 'browser_language': {
+      return getValuesForLanguages(values, languages);
+    }
+    case 'country_code': {
+      return getValuesForCountries(values, countries);
+    }
+    default:
+      return { id: values[0], name: values[0] };
+  }
+};
+
+export const generateValuesForEditCustomViews = (filter, params) => {
+  const { attribute_key, filter_operator, values } = filter;
+  const { filterTypes, allCustomAttributes } = params;
+  const inboxType = getInputType(attribute_key, filter_operator, filterTypes);
+
+  if (inboxType === undefined) {
+    const filterInputTypes = getAttributeInputType(
+      attribute_key,
+      allCustomAttributes
+    );
+    return filterInputTypes === 'string'
+      ? values[0].toString()
+      : { id: values[0], name: values[0] };
+  }
+
+  return inboxType === 'multi_select' || inboxType === 'search_select'
+    ? getValuesForFilter(filter, params)
+    : values[0].toString();
+};
@@ -1,9 +1,12 @@
+const setArrayValues = item => {
+  return item.values[0]?.id ? item.values.map(val => val.id) : item.values;
+};
 const generatePayload = data => {
  // Make a copy of data to avoid vue data reactivity issues
  const filters = JSON.parse(JSON.stringify(data));
  let payload = filters.map(item => {
    if (Array.isArray(item.values)) {
-      item.values = item.values.map(val => val.id);
+      item.values = setArrayValues(item);
    } else if (typeof item.values === 'object') {
      item.values = [item.values.id];
    } else if (!item.values) {
@@ -18,18 +18,18 @@ export const initializeAnalyticsEvents = () => {
      });
    }
  });
-  window.bus.$on(ANALYTICS_RESET, () => {});
 };

 const initializeAudioAlerts = user => {
-  // InitializeAudioNotifications
  const { ui_settings: uiSettings } = user || {};
  const {
    always_play_audio_alert: alwaysPlayAudioAlert,
    enable_audio_alerts: audioAlertType,
    alert_if_unread_assigned_conversation_exist: alertIfUnreadConversationExist,
    notification_tone: audioAlertTone,
-  } = uiSettings;
+    // UI Settings can be undefined initally as we don't send the
+    // entire payload for the user during the signup process.
+  } = uiSettings || {};

  DashboardAudioNotificationHelper.setInstanceValues({
    currentUserId: user.id,
@@ -0,0 +1,278 @@
+import {
+  getAttributeInputType,
+  getInputType,
+  getValuesName,
+  getValuesForFilter,
+  generateValuesForEditCustomViews,
+  generateCustomAttributesInputType,
+} from '../customViewsHelper';
+import advancedFilterTypes from 'dashboard/components/widgets/conversation/advancedFilterItems/index';
+
+describe('customViewsHelper', () => {
+  describe('#getInputType', () => {
+    it('should return plain_text if key is created_at or last_activity_at and operator is days_before', () => {
+      const filterTypes = [
+        { attributeKey: 'created_at', inputType: 'date' },
+        { attributeKey: 'last_activity_at', inputType: 'date' },
+      ];
+      expect(getInputType('created_at', 'days_before', filterTypes)).toEqual(
+        'plain_text'
+      );
+      expect(
+        getInputType('last_activity_at', 'days_before', filterTypes)
+      ).toEqual('plain_text');
+    });
+
+    it('should return inputType if key is not created_at or last_activity_at', () => {
+      const filterTypes = [
+        { attributeKey: 'created_at', inputType: 'date' },
+        { attributeKey: 'last_activity_at', inputType: 'date' },
+        { attributeKey: 'test', inputType: 'string' },
+      ];
+      expect(getInputType('test', 'days_before', filterTypes)).toEqual(
+        'string'
+      );
+    });
+
+    it('should return undefined if key is not created_at or last_activity_at and inputType is not present', () => {
+      const filterTypes = [
+        { attributeKey: 'created_at', inputType: 'date' },
+        { attributeKey: 'last_activity_at', inputType: 'date' },
+        { attributeKey: 'test', inputType: 'string' },
+      ];
+      expect(getInputType('test', 'days_before', filterTypes)).toEqual(
+        'string'
+      );
+    });
+  });
+
+  describe('#getAttributeInputType', () => {
+    it('should return multi_select if attribute_display_type is checkbox or list', () => {
+      const allCustomAttributes = [
+        { attribute_key: 'test', attribute_display_type: 'checkbox' },
+        { attribute_key: 'test2', attribute_display_type: 'list' },
+      ];
+      expect(getAttributeInputType('test', allCustomAttributes)).toEqual(
+        'multi_select'
+      );
+      expect(getAttributeInputType('test2', allCustomAttributes)).toEqual(
+        'multi_select'
+      );
+    });
+
+    it('should return string if attribute_display_type is text, number, date or link', () => {
+      const allCustomAttributes = [
+        { attribute_key: 'test', attribute_display_type: 'text' },
+        { attribute_key: 'test2', attribute_display_type: 'number' },
+        { attribute_key: 'test3', attribute_display_type: 'date' },
+        { attribute_key: 'test4', attribute_display_type: 'link' },
+      ];
+      expect(getAttributeInputType('test', allCustomAttributes)).toEqual(
+        'string'
+      );
+      expect(getAttributeInputType('test2', allCustomAttributes)).toEqual(
+        'string'
+      );
+      expect(getAttributeInputType('test3', allCustomAttributes)).toEqual(
+        'string'
+      );
+      expect(getAttributeInputType('test4', allCustomAttributes)).toEqual(
+        'string'
+      );
+    });
+  });
+
+  describe('#getValuesName', () => {
+    it('should return id and name if item is present', () => {
+      const list = [{ id: 1, name: 'test' }];
+      const idKey = 'id';
+      const nameKey = 'name';
+      const values = [1];
+      expect(getValuesName(values, list, idKey, nameKey)).toEqual({
+        id: 1,
+        name: 'test',
+      });
+    });
+
+    it('should return id and value if item is not present', () => {
+      const list = [{ id: 1, name: 'test' }];
+      const idKey = 'id';
+      const nameKey = 'name';
+      const values = [2];
+      expect(getValuesName(values, list, idKey, nameKey)).toEqual({
+        id: 2,
+        name: 2,
+      });
+    });
+  });
+
+  describe('#getValuesForFilter', () => {
+    it('should return id and name if attribute_key is assignee_id', () => {
+      const filter = { attribute_key: 'assignee_id', values: [1] };
+      const params = { agents: [{ id: 1, name: 'test' }] };
+      expect(getValuesForFilter(filter, params)).toEqual({
+        id: 1,
+        name: 'test',
+      });
+    });
+
+    it('should return id and name if attribute_key is inbox_id', () => {
+      const filter = { attribute_key: 'inbox_id', values: [1] };
+      const params = { inboxes: [{ id: 1, name: 'test' }] };
+      expect(getValuesForFilter(filter, params)).toEqual({
+        id: 1,
+        name: 'test',
+      });
+    });
+
+    it('should return id and name if attribute_key is team_id', () => {
+      const filter = { attribute_key: 'team_id', values: [1] };
+      const params = { teams: [{ id: 1, name: 'test' }] };
+      expect(getValuesForFilter(filter, params)).toEqual({
+        id: 1,
+        name: 'test',
+      });
+    });
+
+    it('should return id and title if attribute_key is campaign_id', () => {
+      const filter = { attribute_key: 'campaign_id', values: [1] };
+      const params = { campaigns: [{ id: 1, title: 'test' }] };
+      expect(getValuesForFilter(filter, params)).toEqual({
+        id: 1,
+        name: 'test',
+      });
+    });
+
+    it('should return id and title if attribute_key is labels', () => {
+      const filter = { attribute_key: 'labels', values: ['test'] };
+      const params = { labels: [{ title: 'test' }] };
+      expect(getValuesForFilter(filter, params)).toEqual([
+        { id: 'test', name: 'test' },
+      ]);
+    });
+
+    it('should return id and name if attribute_key is browser_language', () => {
+      const filter = { attribute_key: 'browser_language', values: ['en'] };
+      const params = { languages: [{ id: 'en', name: 'English' }] };
+      expect(getValuesForFilter(filter, params)).toEqual([
+        { id: 'en', name: 'English' },
+      ]);
+    });
+
+    it('should return id and name if attribute_key is country_code', () => {
+      const filter = { attribute_key: 'country_code', values: ['IN'] };
+      const params = { countries: [{ id: 'IN', name: 'India' }] };
+      expect(getValuesForFilter(filter, params)).toEqual([
+        { id: 'IN', name: 'India' },
+      ]);
+    });
+
+    it('should return id and name if attribute_key is not present', () => {
+      const filter = { attribute_key: 'test', values: [1] };
+      const params = {};
+      expect(getValuesForFilter(filter, params)).toEqual({
+        id: 1,
+        name: 1,
+      });
+    });
+  });
+
+  describe('#generateValuesForEditCustomViews', () => {
+    it('should return id and name if inboxType is multi_select or search_select', () => {
+      const filter = {
+        attribute_key: 'assignee_id',
+        filter_operator: 'and',
+        values: [1],
+      };
+      const params = {
+        filterTypes: advancedFilterTypes,
+        allCustomAttributes: [],
+        agents: [{ id: 1, name: 'test' }],
+      };
+      expect(generateValuesForEditCustomViews(filter, params)).toEqual({
+        id: 1,
+        name: 'test',
+      });
+    });
+
+    it('should return id and name if inboxType is not multi_select or search_select', () => {
+      const filter = {
+        attribute_key: 'assignee_id',
+        filter_operator: 'and',
+        values: [1],
+      };
+      const params = {
+        filterTypes: advancedFilterTypes,
+        allCustomAttributes: [],
+        agents: [{ id: 1, name: 'test' }],
+      };
+      expect(generateValuesForEditCustomViews(filter, params)).toEqual({
+        id: 1,
+        name: 'test',
+      });
+    });
+
+    it('should return id and name if inboxType is undefined', () => {
+      const filter = {
+        attribute_key: 'test2',
+        filter_operator: 'and',
+        values: [1],
+      };
+      const params = {
+        filterTypes: advancedFilterTypes,
+        allCustomAttributes: [
+          { attribute_key: 'test', attribute_display_type: 'checkbox' },
+          { attribute_key: 'test2', attribute_display_type: 'list' },
+        ],
+      };
+      expect(generateValuesForEditCustomViews(filter, params)).toEqual({
+        id: 1,
+        name: 1,
+      });
+    });
+
+    it('should return value as string if filterInputTypes is string', () => {
+      const filter = {
+        attribute_key: 'test',
+        filter_operator: 'and',
+        values: [1],
+      };
+      const params = {
+        filterTypes: advancedFilterTypes,
+        allCustomAttributes: [
+          { attribute_key: 'test', attribute_display_type: 'date' },
+          { attribute_key: 'test2', attribute_display_type: 'list' },
+        ],
+      };
+      expect(generateValuesForEditCustomViews(filter, params)).toEqual('1');
+    });
+  });
+
+  describe('#generateCustomAttributesInputType', () => {
+    it('should return string if type is text', () => {
+      expect(generateCustomAttributesInputType('text')).toEqual('string');
+    });
+
+    it('should return string if type is number', () => {
+      expect(generateCustomAttributesInputType('number')).toEqual('string');
+    });
+
+    it('should return string if type is date', () => {
+      expect(generateCustomAttributesInputType('date')).toEqual('string');
+    });
+
+    it('should return multi_select if type is checkbox', () => {
+      expect(generateCustomAttributesInputType('checkbox')).toEqual(
+        'multi_select'
+      );
+    });
+
+    it('should return multi_select if type is list', () => {
+      expect(generateCustomAttributesInputType('list')).toEqual('multi_select');
+    });
+
+    it('should return string if type is link', () => {
+      expect(generateCustomAttributesInputType('link')).toEqual('string');
+    });
+  });
+});
@@ -2,12 +2,17 @@
  "FILTER": {
    "TITLE": "Filter Conversations",
    "SUBTITLE": "Add filters below and hit 'Apply filters' to filter conversations.",
+    "EDIT_CUSTOM_FILTER": "Edit Folder",
+    "CUSTOM_VIEWS_SUBTITLE": "Add or remove filters and update your folder.",
    "ADD_NEW_FILTER": "Add Filter",
    "FILTER_DELETE_ERROR": "You should have atleast one filter to save",
    "SUBMIT_BUTTON_LABEL": "Apply filters",
+    "UPDATE_BUTTON_LABEL": "Update folder",
    "CANCEL_BUTTON_LABEL": "Cancel",
    "CLEAR_BUTTON_LABEL": "Clear Filters",
    "EMPTY_VALUE_ERROR": "Value is required",
+    "FOLDER_LABEL": "Folder Name",
+    "FOLDER_QUERY_LABEL": "Folder Query",
    "TOOLTIP_LABEL": "Filter conversations",
    "QUERY_DROPDOWN_LABELS": {
      "AND": "AND",
@@ -71,6 +76,9 @@
          "ERROR_MESSAGE": "Error while creating segment"
        }
      },
+      "EDIT": {
+        "EDIT_BUTTON": "Edit folder"
+      },
      "DELETE": {
        "DELETE_BUTTON": "Delete filter",
        "MODAL": {
@@ -10,15 +10,39 @@
      "TITLE": "Manage Audit Logs",
      "DESC": "Audit Logs are trails for events and actions in a Chatwoot System.",
      "TABLE_HEADER": [
-        "User",
-        "Action",
-        "IP Address",
-        "Time"
+        "Activity",
+        "Time",
+        "IP Address"
      ]
    },
    "API": {
      "SUCCESS_MESSAGE": "AuditLogs retrieved successfully",
      "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
-    }
+    },
+    "DEFAULT_USER": "System",
+    "AUTOMATION_RULE": {
+      "ADD": "%{agentName} created a new automation rule (#%{id})",
+      "EDIT": "%{agentName} updated an automation rule (#%{id})",
+      "DELETE": "%{agentName} deleted an automation rule (#%{id})"
+    },
+    "INBOX": {
+      "ADD": "%{agentName} created a new inbox (#%{id})",
+      "EDIT": "%{agentName} updated an inbox (#%{id})",
+      "DELETE": "%{agentName} deleted an inbox (#%{id})"
+    },
+    "WEBHOOK": {
+      "ADD": "%{agentName} created a new webhook (#%{id})",
+      "EDIT": "%{agentName} updated a webhook (#%{id})",
+      "DELETE": "%{agentName} deleted a webhook (#%{id})"
+    },
+    "USER_ACTION": {
+      "SIGN_IN": "%{agentName} signed in",
+      "SIGN_OUT": "%{agentName} signed out"
+    },
+    "TEAM": {
+      "ADD": "%{agentName} created a new team (#%{id})",
+      "EDIT": "%{agentName} updated a team (#%{id})",
+      "DELETE": "%{agentName} deleted a team (#%{id})"
+  }
  }
 }
@@ -73,6 +73,13 @@
    "SUCCESS_MESSAGE": "Contacts saved successfully",
    "ERROR_MESSAGE": "There was an error, please try again"
  },
+  "EXPORT_CONTACTS": {
+    "BUTTON_LABEL": "Export",
+    "TITLE": "Export Contacts",
+    "DESC": "Export contacts to a CSV file.",
+    "SUCCESS_MESSAGE": "Export is in progress, You will be notified via email when export file is ready to dowanlod.",
+    "ERROR_MESSAGE": "There was an error, please try again"
+  },
  "DELETE_NOTE": {
    "CONFIRM": {
      "TITLE": "Confirm Deletion",
@@ -211,6 +218,7 @@
    "FILTER_CONTACTS": "Filter",
    "FILTER_CONTACTS_SAVE": "Save filter",
    "FILTER_CONTACTS_DELETE": "Delete filter",
+    "FILTER_CONTACTS_EDIT": "Edit segment",
    "LIST": {
      "LOADING_MESSAGE": "Loading contacts...",
      "404": "No contacts matches your search 🔍",
@@ -1,50 +1,55 @@
 {
-    "CONTACTS_FILTER": {
-        "TITLE": "Filter Contacts",
-        "SUBTITLE": "Add filters below and hit 'Submit' to filter contacts.",
-        "ADD_NEW_FILTER": "Add Filter",
-        "CLEAR_ALL_FILTERS": "Clear All Filters",
-        "FILTER_DELETE_ERROR": "You should have atleast one filter to save",
-        "SUBMIT_BUTTON_LABEL": "Submit",
-        "CANCEL_BUTTON_LABEL": "Cancel",
-        "CLEAR_BUTTON_LABEL": "Clear Filters",
-        "EMPTY_VALUE_ERROR": "Value is required",
-        "TOOLTIP_LABEL": "Filter contacts",
-        "QUERY_DROPDOWN_LABELS": {
-            "AND": "AND",
-            "OR": "OR"
-        },
-        "OPERATOR_LABELS": {
-            "equal_to": "Equal to",
-            "not_equal_to": "Not equal to",
-            "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_lesser_than": "Is lesser than",
-            "days_before": "Is x days before"
-        },
-        "ATTRIBUTES": {
-            "NAME": "Name",
-            "EMAIL": "Email",
-            "PHONE_NUMBER": "Phone number",
-            "IDENTIFIER": "Identifier",
-            "CITY": "City",
-            "COUNTRY": "Country",
-            "CUSTOM_ATTRIBUTE_LIST": "List",
-            "CUSTOM_ATTRIBUTE_TEXT": "Text",
-            "CUSTOM_ATTRIBUTE_NUMBER": "Number",
-            "CUSTOM_ATTRIBUTE_LINK": "Link",
-            "CUSTOM_ATTRIBUTE_CHECKBOX": "Checkbox",
-            "CREATED_AT": "Created At",
-            "LAST_ACTIVITY": "Last Activity",
-            "REFERER_LINK": "Referrer link"
-        },
-        "GROUPS": {
-            "STANDARD_FILTERS": "Standard Filters",
-            "ADDITIONAL_FILTERS": "Additional Filters",
-            "CUSTOM_ATTRIBUTES": "Custom Attributes"
-        }
+  "CONTACTS_FILTER": {
+    "TITLE": "Filter Contacts",
+    "SUBTITLE": "Add filters below and hit 'Submit' to filter contacts.",
+    "EDIT_CUSTOM_SEGMENT": "Edit Segment",
+    "CUSTOM_VIEWS_SUBTITLE": "Add or remove filters and update your segment.",
+    "ADD_NEW_FILTER": "Add Filter",
+    "CLEAR_ALL_FILTERS": "Clear All Filters",
+    "FILTER_DELETE_ERROR": "You should have atleast one filter to save",
+    "SUBMIT_BUTTON_LABEL": "Submit",
+    "UPDATE_BUTTON_LABEL": "Update Segment",
+    "CANCEL_BUTTON_LABEL": "Cancel",
+    "CLEAR_BUTTON_LABEL": "Clear Filters",
+    "EMPTY_VALUE_ERROR": "Value is required",
+    "SEGMENT_LABEL": "Segment Name",
+    "SEGMENT_QUERY_LABEL": "Segment Query",
+    "TOOLTIP_LABEL": "Filter contacts",
+    "QUERY_DROPDOWN_LABELS": {
+      "AND": "AND",
+      "OR": "OR"
+    },
+    "OPERATOR_LABELS": {
+      "equal_to": "Equal to",
+      "not_equal_to": "Not equal to",
+      "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_lesser_than": "Is lesser than",
+      "days_before": "Is x days before"
+    },
+    "ATTRIBUTES": {
+      "NAME": "Name",
+      "EMAIL": "Email",
+      "PHONE_NUMBER": "Phone number",
+      "IDENTIFIER": "Identifier",
+      "CITY": "City",
+      "COUNTRY": "Country",
+      "CUSTOM_ATTRIBUTE_LIST": "List",
+      "CUSTOM_ATTRIBUTE_TEXT": "Text",
+      "CUSTOM_ATTRIBUTE_NUMBER": "Number",
+      "CUSTOM_ATTRIBUTE_LINK": "Link",
+      "CUSTOM_ATTRIBUTE_CHECKBOX": "Checkbox",
+      "CREATED_AT": "Created At",
+      "LAST_ACTIVITY": "Last Activity",
+      "REFERER_LINK": "Referrer link"
+    },
+    "GROUPS": {
+      "STANDARD_FILTERS": "Standard Filters",
+      "ADDITIONAL_FILTERS": "Additional Filters",
+      "CUSTOM_ATTRIBUTES": "Custom Attributes"
    }
+  }
 }
@@ -1,6 +1,13 @@
 {
  "CSAT": {
    "TITLE": "Rate your conversation",
-    "PLACEHOLDER": "Tell us more..."
+    "PLACEHOLDER": "Tell us more...",
+    "RATINGS": {
+      "POOR": "😞 Poor",
+      "FAIR": "😑 Fair",
+      "AVERAGE": "😐 Average",
+      "GOOD": "😀 Good",
+      "EXCELLENT": "😍 Excellent"
+    }
  }
 }
@@ -74,6 +74,14 @@
        "DELETE": "Delete article"
      }
    },
+    "ARTICLE_SEARCH_RESULT": {
+      "UNCATEGORIZED": "Uncategorized",
+      "INSERT_ARTICLE": "Insert",
+      "NO_RESULT": "No articles found",
+      "COPY_LINK": "Copy article link to clipboard",
+      "OPEN_LINK": "Open article in new tab",
+      "PREVIEW_LINK": "Preview article"
+    },
    "PORTAL": {
      "HEADER": "Portals",
      "DEFAULT": "Default",
@@ -83,7 +83,7 @@
        },
        "CHANNEL_GREETING_TOGGLE": {
          "LABEL": "Enable channel greeting",
-          "HELP_TEXT": "Automatically send a greeting message after the contact's first message in a conversation.",
+          "HELP_TEXT": "Auto-send greeting messages when customers start a conversation and send their first message.",
          "ENABLED": "Enabled",
          "DISABLED": "Disabled"
        },
@@ -535,7 +535,6 @@
      "UPDATE": "Update business hours settings",
      "TOGGLE_AVAILABILITY": "Enable business availability for this inbox",
      "UNAVAILABLE_MESSAGE_LABEL": "Unavailable message for visitors",
-      "UNAVAILABLE_MESSAGE_DEFAULT": "We are unavailable at the moment. Leave a message we will respond once we are back.",
      "TOGGLE_HELP": "Enabling business availability will show the available hours on live chat widget even if all the agents are offline. Outside available hours vistors can be warned with a message and a pre-chat form.",
      "DAY": {
        "ENABLE": "Enable availability for this day",
@@ -4,6 +4,8 @@
    "LOADING_CHART": "Loading chart data...",
    "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
    "DOWNLOAD_AGENT_REPORTS": "Download agent reports",
+    "DATA_FETCHING_FAILED": "Failed to fetch data, please try again later.",
+    "SUMMARY_FETCHING_FAILED": "Failed to fetch summary, please try again later.",
    "METRICS": {
      "CONVERSATIONS": {
        "NAME": "Conversations",
@@ -34,6 +36,14 @@
        "DESC": "( Total )"
      }
    },
+    "DATE_RANGE_OPTIONS": {
+      "LAST_7_DAYS": "Last 7 days",
+      "LAST_30_DAYS": "Last 30 days",
+      "LAST_3_MONTHS": "Last 3 months",
+      "LAST_6_MONTHS": "Last 6 months",
+      "LAST_YEAR": "Last year",
+      "CUSTOM_DATE_RANGE": "Custom date range"
+    },
    "DATE_RANGE": [
      {
        "id": 0,
@@ -66,6 +76,12 @@
    },
    "GROUP_BY_FILTER_DROPDOWN_LABEL": "Group By",
    "DURATION_FILTER_LABEL": "Duration",
+    "GROUPING_OPTIONS": {
+      "DAY": "Day",
+      "WEEK": "Week",
+      "MONTH": "Month",
+      "YEAR": "Year"
+    },
    "GROUP_BY_DAY_OPTIONS": [{ "id": 1, "groupBy": "Day" }],
    "GROUP_BY_WEEK_OPTIONS": [
      { "id": 1, "groupBy": "Day" },
@@ -356,6 +372,7 @@
    "HEADER": "CSAT Reports",
    "NO_RECORDS": "There are no CSAT survey responses available.",
    "DOWNLOAD": "Download CSAT Reports",
+    "DOWNLOAD_FAILED": "Failed to download CSAT Reports",
    "FILTERS": {
      "AGENTS": {
        "PLACEHOLDER": "Choose Agents"
@@ -2,39 +2,68 @@ import { mapGetters } from 'vuex';

 export default {
  computed: {
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+      currentAccountId: 'getCurrentAccountId',
+    }),
    assignableAgents() {
      return this.$store.getters['inboxAssignableAgents/getAssignableAgents'](
        this.inboxId
      );
    },
-    ...mapGetters({ currentUser: 'getCurrentUser' }),
    isAgentSelected() {
      return this.currentChat?.meta?.assignee;
    },
+    createNoneAgent() {
+      return {
+        confirmed: true,
+        name: 'None',
+        id: 0,
+        role: 'agent',
+        account_id: 0,
+        email: 'None',
+      };
+    },
    agentsList() {
      const agents = this.assignableAgents || [];
-      return [
-        ...(this.isAgentSelected
-          ? [
-              {
-                confirmed: true,
-                name: 'None',
-                id: 0,
-                role: 'agent',
-                account_id: 0,
-                email: 'None',
-              },
-            ]
-          : []),
-        ...agents,
-      ].map(item =>
+      const agentsByUpdatedPresence = this.getAgentsByUpdatedPresence(agents);
+      const none = this.createNoneAgent;
+      const filteredAgentsByAvailability = this.sortedAgentsByAvailability(
+        agentsByUpdatedPresence
+      );
+      const filteredAgents = [
+        ...(this.isAgentSelected ? [none] : []),
+        ...filteredAgentsByAvailability,
+      ];
+      return filteredAgents;
+    },
+  },
+  methods: {
+    getAgentsByAvailability(agents, availability) {
+      return agents
+        .filter(agent => agent.availability_status === availability)
+        .sort((a, b) => a.name.localeCompare(b.name));
+    },
+    sortedAgentsByAvailability(agents) {
+      const onlineAgents = this.getAgentsByAvailability(agents, 'online');
+      const busyAgents = this.getAgentsByAvailability(agents, 'busy');
+      const offlineAgents = this.getAgentsByAvailability(agents, 'offline');
+      const filteredAgents = [...onlineAgents, ...busyAgents, ...offlineAgents];
+      return filteredAgents;
+    },
+    getAgentsByUpdatedPresence(agents) {
+      // Here we are updating the availability status of the current user dynamically (live) based on the current account availability status
+      const agentsWithDynamicPresenceUpdate = agents.map(item =>
        item.id === this.currentUser.id
          ? {
              ...item,
-              availability_status: this.currentUser.availability_status,
+              availability_status: this.currentUser.accounts.find(
+                account => account.id === this.currentAccountId
+              ).availability_status,
            }
          : item
      );
+      return agentsWithDynamicPresenceUpdate;
    },
  },
 };
@@ -20,6 +20,36 @@ export default {
      name: 'Samuel Keta',
      role: 'agent',
    },
+    {
+      account_id: 1,
+      availability_status: 'offline',
+      available_name: 'James K',
+      confirmed: true,
+      email: 'james@chatwoot.com',
+      id: 3,
+      name: 'James Koti',
+      role: 'agent',
+    },
+    {
+      account_id: 1,
+      availability_status: 'busy',
+      available_name: 'Honey',
+      confirmed: true,
+      email: 'bee@chatwoot.com',
+      id: 4,
+      name: 'Honey Bee',
+      role: 'agent',
+    },
+    {
+      account_id: 1,
+      availability_status: 'online',
+      available_name: 'Abraham',
+      confirmed: true,
+      email: 'abraham@chatwoot.com',
+      id: 5,
+      name: 'Abraham Keta',
+      role: 'agent',
+    },
  ],
  formattedAgents: [
    {
@@ -32,7 +62,17 @@ export default {
    },
    {
      account_id: 1,
-      availability_status: 'busy',
+      availability_status: 'online',
+      available_name: 'Abraham',
+      confirmed: true,
+      email: 'abraham@chatwoot.com',
+      id: 5,
+      name: 'Abraham Keta',
+      role: 'agent',
+    },
+    {
+      account_id: 1,
+      availability_status: 'online',
      available_name: 'John K',
      confirmed: true,
      email: 'john@chatwoot.com',
@@ -40,6 +80,70 @@ export default {
      name: 'John Kennady',
      role: 'administrator',
    },
+    {
+      account_id: 1,
+      availability_status: 'busy',
+      available_name: 'Honey',
+      confirmed: true,
+      email: 'bee@chatwoot.com',
+      id: 4,
+      name: 'Honey Bee',
+      role: 'agent',
+    },
+    {
+      account_id: 1,
+      availability_status: 'busy',
+      available_name: 'Samuel K',
+      confirmed: true,
+      email: 'samuel@chatwoot.com',
+      id: 2,
+      name: 'Samuel Keta',
+      role: 'agent',
+    },
+    {
+      account_id: 1,
+      availability_status: 'offline',
+      available_name: 'James K',
+      confirmed: true,
+      email: 'james@chatwoot.com',
+      id: 3,
+      name: 'James Koti',
+      role: 'agent',
+    },
+  ],
+  onlineAgents: [
+    {
+      account_id: 1,
+      availability_status: 'online',
+      available_name: 'Abraham',
+      confirmed: true,
+      email: 'abraham@chatwoot.com',
+      id: 5,
+      name: 'Abraham Keta',
+      role: 'agent',
+    },
+    {
+      account_id: 1,
+      availability_status: 'online',
+      available_name: 'John K',
+      confirmed: true,
+      email: 'john@chatwoot.com',
+      id: 1,
+      name: 'John Kennady',
+      role: 'administrator',
+    },
+  ],
+  busyAgents: [
+    {
+      account_id: 1,
+      availability_status: 'busy',
+      available_name: 'Honey',
+      confirmed: true,
+      email: 'bee@chatwoot.com',
+      id: 4,
+      name: 'Honey Bee',
+      role: 'agent',
+    },
    {
      account_id: 1,
      availability_status: 'busy',
@@ -51,4 +155,92 @@ export default {
      role: 'agent',
    },
  ],
+  offlineAgents: [
+    {
+      account_id: 1,
+      availability_status: 'offline',
+      available_name: 'James K',
+      confirmed: true,
+      email: 'james@chatwoot.com',
+      id: 3,
+      name: 'James Koti',
+      role: 'agent',
+    },
+  ],
+  sortedByAvailability: [
+    {
+      account_id: 1,
+      availability_status: 'online',
+      available_name: 'Abraham',
+      confirmed: true,
+      email: 'abraham@chatwoot.com',
+      id: 5,
+      name: 'Abraham Keta',
+      role: 'agent',
+    },
+    {
+      account_id: 1,
+      availability_status: 'online',
+      available_name: 'John K',
+      confirmed: true,
+      email: 'john@chatwoot.com',
+      id: 1,
+      name: 'John Kennady',
+      role: 'administrator',
+    },
+    {
+      account_id: 1,
+      availability_status: 'busy',
+      available_name: 'Honey',
+      confirmed: true,
+      email: 'bee@chatwoot.com',
+      id: 4,
+      name: 'Honey Bee',
+      role: 'agent',
+    },
+    {
+      account_id: 1,
+      availability_status: 'busy',
+      available_name: 'Samuel K',
+      confirmed: true,
+      email: 'samuel@chatwoot.com',
+      id: 2,
+      name: 'Samuel Keta',
+      role: 'agent',
+    },
+    {
+      account_id: 1,
+      availability_status: 'offline',
+      available_name: 'James K',
+      confirmed: true,
+      email: 'james@chatwoot.com',
+      id: 3,
+      name: 'James Koti',
+      role: 'agent',
+    },
+  ],
+  formattedAgentsByPresenceOnline: [
+    {
+      account_id: 1,
+      availability_status: 'online',
+      available_name: 'Abraham',
+      confirmed: true,
+      email: 'abr@chatwoot.com',
+      id: 1,
+      name: 'Abraham Keta',
+      role: 'agent',
+    },
+  ],
+  formattedAgentsByPresenceOffline: [
+    {
+      account_id: 1,
+      availability_status: 'offline',
+      available_name: 'Abraham',
+      confirmed: true,
+      email: 'abr@chatwoot.com',
+      id: 1,
+      name: 'Abraham Keta',
+      role: 'agent',
+    },
+  ],
 };
@@ -12,12 +12,71 @@ describe('agentMixin', () => {
    getters = {
      getCurrentUser: () => ({
        id: 1,
-        availability_status: 'busy',
+        accounts: [
+          {
+            id: 1,
+            availability_status: 'online',
+            auto_offline: false,
+          },
+        ],
      }),
+      getCurrentAccountId: () => 1,
    };
    store = new Vuex.Store({ getters });
  });

+  it('return agents by availability', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [agentMixin],
+      data() {
+        return {
+          inboxId: 1,
+          currentChat: { meta: { assignee: { name: 'John' } } },
+        };
+      },
+      computed: {
+        assignableAgents() {
+          return agentFixtures.allAgents;
+        },
+      },
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(
+      wrapper.vm.getAgentsByAvailability(agentFixtures.allAgents, 'online')
+    ).toEqual(agentFixtures.onlineAgents);
+    expect(
+      wrapper.vm.getAgentsByAvailability(agentFixtures.allAgents, 'busy')
+    ).toEqual(agentFixtures.busyAgents);
+    expect(
+      wrapper.vm.getAgentsByAvailability(agentFixtures.allAgents, 'offline')
+    ).toEqual(agentFixtures.offlineAgents);
+  });
+
+  it('return sorted agents by availability', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [agentMixin],
+      data() {
+        return {
+          inboxId: 1,
+          currentChat: { meta: { assignee: { name: 'John' } } },
+        };
+      },
+      computed: {
+        assignableAgents() {
+          return agentFixtures.allAgents;
+        },
+      },
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(
+      wrapper.vm.sortedAgentsByAvailability(agentFixtures.allAgents)
+    ).toEqual(agentFixtures.sortedByAvailability);
+  });
+
  it('return formatted agents', () => {
    const Component = {
      render() {},
@@ -38,4 +97,44 @@ describe('agentMixin', () => {
    const wrapper = shallowMount(Component, { store, localVue });
    expect(wrapper.vm.agentsList).toEqual(agentFixtures.formattedAgents);
  });
+
+  it('return formatted agents by presence', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [agentMixin],
+      data() {
+        return {
+          inboxId: 1,
+          currentChat: { meta: { assignee: { name: 'John' } } },
+        };
+      },
+      computed: {
+        currentUser() {
+          return {
+            id: 1,
+            accounts: [
+              {
+                id: 1,
+                availability_status: 'offline',
+                auto_offline: false,
+              },
+            ],
+          };
+        },
+        currentAccountId() {
+          return 1;
+        },
+        assignableAgents() {
+          return agentFixtures.allAgents;
+        },
+      },
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(
+      wrapper.vm.getAgentsByUpdatedPresence(
+        agentFixtures.formattedAgentsByPresenceOnline
+      )
+    ).toEqual(agentFixtures.formattedAgentsByPresenceOffline);
+  });
 });
@@ -1,9 +1,25 @@
 <template>
  <div class="column">
-    <woot-modal-header :header-title="$t('CONTACTS_FILTER.TITLE')">
-      <p>{{ $t('CONTACTS_FILTER.SUBTITLE') }}</p>
+    <woot-modal-header :header-title="filterModalHeaderTitle">
+      <p>{{ filterModalSubTitle }}</p>
    </woot-modal-header>
-    <div class="row modal-content">
+    <div class="column modal-content">
+      <div v-if="isSegmentsView" class="columns">
+        <label class="input-label" :class="{ error: !activeSegmentNewName }">
+          {{ $t('CONTACTS_FILTER.SEGMENT_LABEL') }}
+          <input
+            v-model="activeSegmentNewName"
+            type="text"
+            class="name-input"
+          />
+          <span v-if="!activeSegmentNewName" class="message">
+            {{ $t('CONTACTS_FILTER.EMPTY_VALUE_ERROR') }}
+          </span>
+        </label>
+        <label class="input-label">
+          {{ $t('CONTACTS_FILTER.SEGMENT_QUERY_LABEL') }}
+        </label>
+      </div>
      <div class="medium-12 columns filters-wrap">
        <filter-input-box
          v-for="(filter, i) in appliedFilters"
@@ -36,7 +52,7 @@
            {{ $t('CONTACTS_FILTER.ADD_NEW_FILTER') }}
          </woot-button>
          <woot-button
-            v-if="hasAppliedFilters"
+            v-if="hasAppliedFilters && !isSegmentsView"
            icon="subtract"
            color-scheme="alert"
            variant="smooth"
@@ -52,7 +68,14 @@
          <woot-button class="button clear" @click.prevent="onClose">
            {{ $t('CONTACTS_FILTER.CANCEL_BUTTON_LABEL') }}
          </woot-button>
-          <woot-button @click="submitFilterQuery">
+          <woot-button
+            v-if="isSegmentsView"
+            :disabled="!activeSegmentNewName"
+            @click="updateSegment"
+          >
+            {{ $t('CONTACTS_FILTER.UPDATE_BUTTON_LABEL') }}
+          </woot-button>
+          <woot-button v-else @click="submitFilterQuery">
            {{ $t('CONTACTS_FILTER.SUBMIT_BUTTON_LABEL') }}
          </woot-button>
        </div>
@@ -85,6 +108,18 @@ export default {
      type: Array,
      default: () => [],
    },
+    initialAppliedFilters: {
+      type: Array,
+      default: () => [],
+    },
+    isSegmentsView: {
+      type: Boolean,
+      default: false,
+    },
+    activeSegmentName: {
+      type: String,
+      default: '',
+    },
  },
  validations: {
    appliedFilters: {
@@ -105,7 +140,8 @@ export default {
  data() {
    return {
      show: true,
-      appliedFilters: [],
+      appliedFilters: this.initialAppliedFilters,
+      activeSegmentNewName: this.activeSegmentName,
      filterTypes: this.initialFilterTypes,
      filterGroups: [],
      allCustomAttributes: [],
@@ -121,12 +157,22 @@ export default {
    hasAppliedFilters() {
      return this.getAppliedContactFilters.length;
    },
+    filterModalHeaderTitle() {
+      return !this.isSegmentsView
+        ? this.$t('CONTACTS_FILTER.TITLE')
+        : this.$t('CONTACTS_FILTER.EDIT_CUSTOM_SEGMENT');
+    },
+    filterModalSubTitle() {
+      return !this.isSegmentsView
+        ? this.$t('CONTACTS_FILTER.SUBTITLE')
+        : this.$t('CONTACTS_FILTER.CUSTOM_VIEWS_SUBTITLE');
+    },
  },
  mounted() {
    this.setFilterAttributes();
    if (this.getAppliedContactFilters.length) {
      this.appliedFilters = [...this.getAppliedContactFilters];
-    } else {
+    } else if (!this.isSegmentsView) {
      this.appliedFilters.push({
        attribute_key: 'name',
        filter_operator: 'equal_to',
@@ -177,11 +223,11 @@ export default {
      if (key === 'created_at' || key === 'last_activity_at')
        if (operator === 'days_before') return 'plain_text';
      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type.inputType;
+      return type?.inputType;
    },
    getOperators(key) {
      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type.filterOperators;
+      return type?.filterOperators;
    },
    getDropdownValues(type) {
      const allCustomAttributes = this.$store.getters[
@@ -230,11 +276,30 @@ export default {
      }
    },
    appendNewFilter() {
-      this.appliedFilters.push({
-        attribute_key: 'name',
-        filter_operator: 'equal_to',
-        values: '',
+      if (this.isSegmentsView) {
+        this.setQueryOperatorOnLastQuery();
+      } else {
+        this.appliedFilters.push({
+          attribute_key: 'name',
+          filter_operator: 'equal_to',
+          values: '',
+          query_operator: 'and',
+        });
+      }
+    },
+    setQueryOperatorOnLastQuery() {
+      const lastItemIndex = this.appliedFilters.length - 1;
+      this.appliedFilters[lastItemIndex] = {
+        ...this.appliedFilters[lastItemIndex],
        query_operator: 'and',
+      };
+      this.$nextTick(() => {
+        this.appliedFilters.push({
+          attribute_key: 'name',
+          filter_operator: 'equal_to',
+          values: '',
+          query_operator: 'and',
+        });
      });
    },
    removeFilter(index) {
@@ -259,6 +324,13 @@ export default {
        })),
      });
    },
+    updateSegment() {
+      this.$emit(
+        'updateSegment',
+        this.appliedFilters,
+        this.activeSegmentNewName
+      );
+    },
    resetFilter(index, currentFilter) {
      this.appliedFilters[index].filter_operator = this.filterTypes.find(
        filter => filter.attributeKey === currentFilter.attribute_key
@@ -1,10 +1,11 @@
 <template>
  <div class="contacts-page row">
-    <div class="left-wrap" :class="wrapClas">
+    <div class="left-wrap" :class="wrapClass">
      <contacts-header
        :search-query="searchQuery"
        :segments-id="segmentsId"
        :on-search-submit="onSearchSubmit"
+        :on-export-submit="onExportSubmit"
        this-selected-contact-id=""
        :on-input-search="onInputSearch"
        :on-toggle-create="onToggleCreate"
@@ -13,6 +14,7 @@
        :header-title="pageTitle"
        @on-toggle-save-filter="onToggleSaveFilters"
        @on-toggle-delete-filter="onToggleDeleteFilters"
+        @on-toggle-edit-filter="onToggleFilters"
      />
      <contacts-table
        :contacts="records"
@@ -58,14 +60,18 @@
    </woot-modal>
    <woot-modal
      :show.sync="showFiltersModal"
-      :on-close="onToggleFilters"
+      :on-close="closeAdvanceFiltersModal"
      size="medium"
    >
      <contacts-advanced-filters
        v-if="showFiltersModal"
-        :on-close="onToggleFilters"
+        :on-close="closeAdvanceFiltersModal"
        :initial-filter-types="contactFilterItems"
+        :initial-applied-filters="appliedFilter"
+        :active-segment-name="activeSegmentName"
+        :is-segments-view="hasActiveSegments"
        @applyFilter="onApplyFilter"
+        @updateSegment="onUpdateSegment"
        @clearFilters="clearFilters"
      />
    </woot-modal>
@@ -87,6 +93,9 @@ import filterQueryGenerator from '../../../../helper/filterQueryGenerator';
 import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews';
 import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
+import alertMixin from 'shared/mixins/alertMixin';
+import countries from 'shared/constants/countries.js';
+import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';

 const DEFAULT_PAGE = 1;
 const FILTER_TYPE_CONTACT = 1;
@@ -103,6 +112,7 @@ export default {
    AddCustomViews,
    DeleteCustomViews,
  },
+  mixins: [alertMixin],
  props: {
    label: { type: String, default: '' },
    segmentsId: {
@@ -128,6 +138,7 @@ export default {
      filterType: FILTER_TYPE_CONTACT,
      showAddSegmentsModal: false,
      showDeleteSegmentsModal: false,
+      appliedFilter: [],
    };
  },
  computed: {
@@ -175,7 +186,7 @@ export default {
    showContactViewPane() {
      return this.selectedContactId !== '';
    },
-    wrapClas() {
+    wrapClass() {
      return this.showContactViewPane ? 'medium-9' : 'medium-12';
    },
    pageParameter() {
@@ -194,6 +205,9 @@ export default {
      }
      return undefined;
    },
+    activeSegmentName() {
+      return this.activeSegment?.name;
+    },
  },
  watch: {
    label() {
@@ -345,7 +359,14 @@ export default {
      });
    },
    onToggleFilters() {
-      this.showFiltersModal = !this.showFiltersModal;
+      if (this.hasActiveSegments) {
+        this.initializeSegmentToFilterModal(this.activeSegment);
+      }
+      this.showFiltersModal = true;
+    },
+    closeAdvanceFiltersModal() {
+      this.showFiltersModal = false;
+      this.appliedFilter = [];
    },
    onApplyFilter(payload) {
      this.closeContactInfoPanel();
@@ -355,10 +376,69 @@ export default {
      });
      this.showFiltersModal = false;
    },
+    onUpdateSegment(payload, segmentName) {
+      const payloadData = {
+        ...this.activeSegment,
+        name: segmentName,
+        query: filterQueryGenerator(payload),
+      };
+      this.$store.dispatch('customViews/update', payloadData);
+      this.closeAdvanceFiltersModal();
+    },
    clearFilters() {
      this.$store.dispatch('contacts/clearContactFilters');
      this.fetchContacts(this.pageParameter);
    },
+    onExportSubmit() {
+      try {
+        this.$store.dispatch('contacts/export');
+        this.showAlert(this.$t('EXPORT_CONTACTS.SUCCESS_MESSAGE'));
+      } catch (error) {
+        this.showAlert(
+          error.message || this.$t('EXPORT_CONTACTS.ERROR_MESSAGE')
+        );
+      }
+    },
+    setParamsForEditSegmentModal() {
+      // Here we are setting the params for edit segment modal to show the existing values.
+
+      // For custom attributes we get only attribute key.
+      // So we are mapping it to find the input type of the attribute to show in the edit segment modal.
+      const params = {
+        countries: countries,
+        filterTypes: contactFilterItems,
+        allCustomAttributes: this.$store.getters[
+          'attributes/getAttributesByModel'
+        ]('contact_attribute'),
+      };
+      return params;
+    },
+    initializeSegmentToFilterModal(activeSegment) {
+      // Here we are setting the params for edit segment modal.
+      //  To show the existing values. when we click on edit segment button.
+
+      // Here we get the query from the active segment.
+      // And we are mapping the query to the actual values.
+      // To show in the edit segment modal by the help of generateValuesForEditCustomViews helper.
+      const query = activeSegment?.query?.payload;
+      if (!Array.isArray(query)) return;
+
+      this.appliedFilter.push(
+        ...query.map(filter => ({
+          attribute_key: filter.attribute_key,
+          attribute_model: filter.attribute_model,
+          filter_operator: filter.filter_operator,
+          values: Array.isArray(filter.values)
+            ? generateValuesForEditCustomViews(
+                filter,
+                this.setParamsForEditSegmentModal()
+              )
+            : [],
+          query_operator: filter.query_operator,
+          custom_attribute_type: filter.custom_attribute_type,
+        }))
+      );
+    },
    openSavedItemInSegment() {
      const lastItemInSegments = this.segments[this.segments.length - 1];
      const lastItemId = lastItemInSegments.id;
@@ -27,15 +27,24 @@
            {{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
          </woot-button>
        </div>
-        <woot-button
-          v-if="hasActiveSegments"
-          class="margin-right-1 clear"
-          color-scheme="alert"
-          icon="delete"
-          @click="onToggleDeleteSegmentsModal"
-        >
-          {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
-        </woot-button>
+        <div v-if="hasActiveSegments">
+          <woot-button
+            class="margin-right-1 clear"
+            color-scheme="secondary"
+            icon="edit"
+            @click="onToggleEditSegmentsModal"
+          >
+            {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_EDIT') }}
+          </woot-button>
+          <woot-button
+            class="margin-right-1 clear"
+            color-scheme="alert"
+            icon="delete"
+            @click="onToggleDeleteSegmentsModal"
+          >
+            {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
+          </woot-button>
+        </div>
        <div v-if="!hasActiveSegments" class="filters__button-wrap">
          <div v-if="hasAppliedFilters" class="filters__applied-indicator" />
          <woot-button
@@ -78,6 +87,16 @@
        >
          {{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
        </woot-button>
+
+        <woot-button
+          v-if="isAdmin"
+          color-scheme="info"
+          icon="upload"
+          class="clear"
+          @click="onExportSubmit"
+        >
+          {{ $t('EXPORT_CONTACTS.BUTTON_LABEL') }}
+        </woot-button>
      </div>
    </div>
  </header>
@@ -118,6 +137,10 @@ export default {
      type: Function,
      default: () => {},
    },
+    onExportSubmit: {
+      type: Function,
+      default: () => {},
+    },
    onToggleFilter: {
      type: Function,
      default: () => {},
@@ -147,6 +170,9 @@ export default {
    onToggleSegmentsModal() {
      this.$emit('on-toggle-save-filter');
    },
+    onToggleEditSegmentsModal() {
+      this.$emit('on-toggle-edit-filter');
+    },
    onToggleDeleteSegmentsModal() {
      this.$emit('on-toggle-delete-filter');
    },
@@ -98,7 +98,7 @@ export default {
        const errorMessage = error?.message;
        this.alertMessage =
          errorMessage || this.filterType === 0
-            ? this.$t('FILTER.CUSTOM_VIEWS.ADD.API_FOLDERS.ERROR_MESSAGE')
+            ? errorMessage
            : this.$t('FILTER.CUSTOM_VIEWS.ADD.API_SEGMENTS.ERROR_MESSAGE');
      } finally {
        this.showAlert(this.alertMessage);
@@ -0,0 +1,130 @@
+<template>
+  <div class="article-item">
+    <h4 class="text-block-title margin-bottom-0">{{ title }}</h4>
+    <p class="margin-bottom-0 text-truncate">{{ body }}</p>
+    <div class="footer">
+      <p class="text-small meta">
+        {{ locale }}
+        {{ ` / ` }}
+        {{
+          category ||
+            $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.ARTICLE_SEARCH_RESULT')
+        }}
+      </p>
+      <div class="action-buttons">
+        <woot-button
+          :title="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.COPY_LINK')"
+          variant="hollow"
+          color-scheme="secondary"
+          size="tiny"
+          icon="copy"
+          @click="handleCopy"
+        />
+
+        <a
+          :href="url"
+          class="button hollow button--only-icon tiny secondary"
+          rel="noopener noreferrer nofollow"
+          target="_blank"
+          :title="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.OPEN_LINK')"
+        >
+          <fluent-icon size="12" icon="arrow-up-right" />
+          <span class="show-for-sr">{{ url }}</span>
+        </a>
+        <woot-button
+          variant="hollow"
+          color-scheme="secondary"
+          size="tiny"
+          icon="preview-link"
+          :title="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.PREVIEW_LINK')"
+          @click="handlePreview"
+        />
+        <woot-button
+          class="insert-button"
+          variant="smooth"
+          color-scheme="secondary"
+          size="tiny"
+          @click="handleClick"
+        >
+          {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.INSERT_ARTICLE') }}
+        </woot-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+
+export default {
+  name: 'ArticleSearchResultItem',
+  props: {
+    title: {
+      type: String,
+      default: 'Untitled',
+    },
+    body: {
+      type: String,
+      default: '',
+    },
+    url: {
+      type: String,
+      default: '',
+    },
+    category: {
+      type: String,
+      default: '',
+    },
+    locale: {
+      type: String,
+      default: 'en-US',
+    },
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    },
+    handlePreview() {
+      this.$emit('preview');
+    },
+    async handleCopy() {
+      await copyTextToClipboard(this.url);
+      this.showAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.article-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-micro);
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: var(--space-micro);
+}
+
+.meta {
+  color: var(--s-600);
+  margin-bottom: 0;
+}
+
+.action-buttons {
+  display: flex;
+  gap: var(--space-micro);
+}
+.action-buttons .button:not(.insert-button) {
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.1s ease-in;
+}
+
+.article-item:hover .action-buttons .button:not(.insert-button) {
+  visibility: visible;
+  opacity: 1;
+}
+</style>
@@ -0,0 +1,56 @@
+import ArticleSearchResultItem from '../ArticleSearchResultItem.vue';
+
+export default {
+  title: 'Components/Help Center/ArticleSearchResultItem',
+  component: ArticleSearchResultItem,
+  argTypes: {
+    title: {
+      defaultValue: 'Setup your account',
+      control: {
+        type: 'text',
+      },
+    },
+    body: {
+      defaultValue:
+        'You can integrate your Chatwoot account with multiple conversation channels like website live-chat, email, Facebook page, Twitter handle, WhatsApp, etc. You can view all of your conversations from different channels on one dashboard. This helps in reducing the time and friction involved with switching between multiple tools.',
+      control: {
+        type: 'text',
+      },
+    },
+    category: {
+      defaultValue: 'Getting started',
+      control: {
+        type: 'text',
+      },
+    },
+    locale: {
+      defaultValue: 'en-US',
+      control: {
+        type: 'text',
+      },
+    },
+    url: {
+      defaultValue: '/app/accounts/1/conversations/23842',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ArticleSearchResultItem },
+  template:
+    '<ArticleSearchResultItem v-bind="$props" ></ArticleSearchResultItem>',
+});
+
+export const ArticleSearchResultItemStory = Template.bind({});
+ArticleSearchResultItemStory.args = {
+  title: 'Setup your account',
+  body: `You can integrate your Chatwoot account with multiple conversation channels like website live-chat, email, Facebook page, Twitter handle, WhatsApp, etc. You can view all of your conversations from different channels on one dashboard. This helps in reducing the time and friction involved with switching between multiple tools.
+
+You can manage your conversations and collaborate with your team on the go with Chatwoot mobile apps (available for Android and iOS).
+
+In this user guide, we’ve explained the features, capabilities, modes of operation, and step-by-step procedures for easily using the Chatwoot platform.`,
+};
@@ -1,8 +1,8 @@
 <template>
-  <div class="column content-box">
+  <div class="column content-box audit-log--settings">
    <!-- List Audit Logs -->
-    <div class="row">
-      <div class="small-8 columns with-right-space ">
+    <div>
+      <div>
        <p
          v-if="!uiFlags.fetchingList && !records.length"
          class="no-items-error-message"
@@ -16,8 +16,13 @@

        <table
          v-if="!uiFlags.fetchingList && records.length"
-          class="woot-table"
+          class="woot-table width-100"
        >
+          <colgroup>
+            <col class="column-activity" />
+            <col />
+            <col />
+          </colgroup>
          <thead>
            <!-- Header -->
            <th
@@ -29,16 +34,20 @@
          </thead>
          <tbody>
            <tr v-for="auditLogItem in records" :key="auditLogItem.id">
-              <td class="wrap-break-words">{{ auditLogItem.username }}</td>
              <td class="wrap-break-words">
-                {{ auditLogItem.auditable_type }}.{{ auditLogItem.action }}
+                {{ generateLogText(auditLogItem) }}
+              </td>
+              <td class="wrap-break-words">
+                {{
+                  messageTimestamp(
+                    auditLogItem.created_at,
+                    'MMM dd, yyyy hh:mm a'
+                  )
+                }}
              </td>
              <td class="remote-address">
                {{ auditLogItem.remote_address }}
              </td>
-              <td class="wrap-break-words">
-                {{ dynamicTime(auditLogItem.created_at) }}
-              </td>
            </tr>
          </tbody>
        </table>
@@ -76,13 +85,55 @@ export default {
      records: 'auditlogs/getAuditLogs',
      uiFlags: 'auditlogs/getUIFlags',
      meta: 'auditlogs/getMeta',
+      agentList: 'agents/getAgents',
    }),
  },
  mounted() {
    // Fetch API Call
    this.$store.dispatch('auditlogs/fetch', { page: 1 });
+    this.$store.dispatch('agents/get');
  },
  methods: {
+    getAgentName(email) {
+      if (email === null) {
+        return this.$t('AUDIT_LOGS.DEFAULT_USER');
+      }
+      const agentName = this.agentList.find(agent => agent.email === email)
+        ?.name;
+      // If agent does not exist(removed/deleted), return email from audit log
+      return agentName || email;
+    },
+    generateLogText(auditLogItem) {
+      const agentName = this.getAgentName(auditLogItem.username);
+      const auditableType = auditLogItem.auditable_type.toLowerCase();
+      const action = auditLogItem.action.toLowerCase();
+      const auditId = auditLogItem.auditable_id;
+      const logActionKey = `${auditableType}:${action}`;
+
+      const translationPayload = {
+        agentName,
+        id: auditId,
+      };
+
+      const translationKeys = {
+        'automationrule:create': `AUDIT_LOGS.AUTOMATION_RULE.ADD`,
+        'automationrule:update': `AUDIT_LOGS.AUTOMATION_RULE.EDIT`,
+        'automationrule:destroy': `AUDIT_LOGS.AUTOMATION_RULE.DELETE`,
+        'webhook:create': `AUDIT_LOGS.WEBHOOK.ADD`,
+        'webhook:update': `AUDIT_LOGS.WEBHOOK.EDIT`,
+        'webhook:destroy': `AUDIT_LOGS.WEBHOOK.DELETE`,
+        'inbox:create': `AUDIT_LOGS.INBOX.ADD`,
+        'inbox:update': `AUDIT_LOGS.INBOX.EDIT`,
+        'inbox:destroy': `AUDIT_LOGS.INBOX.DELETE`,
+        'user:sign_in': `AUDIT_LOGS.USER_ACTION.SIGN_IN`,
+        'user:sign_out': `AUDIT_LOGS.USER_ACTION.SIGN_OUT`,
+        'team:create': `AUDIT_LOGS.TEAM.ADD`,
+        'team:update': `AUDIT_LOGS.TEAM.EDIT`,
+        'team:destroy': `AUDIT_LOGS.TEAM.DELETE`,
+      };
+
+      return this.$t(translationKeys[logActionKey] || '', translationPayload);
+    },
    onPageChange(page) {
      window.history.pushState({}, null, `${this.$route.path}?page=${page}`);
      try {
@@ -96,12 +147,24 @@ export default {
  },
 };
 </script>
-<style scoped>
-.remote-address {
-  width: 14rem;
-}
-.wrap-break-words {
-  word-break: break-all;
-  white-space: normal;
+
+<style lang="scss" scoped>
+.audit-log--settings {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+
+  .remote-address {
+    width: 14rem;
+  }
+
+  .wrap-break-words {
+    word-break: break-all;
+    white-space: normal;
+  }
+
+  .column-activity {
+    width: 60%;
+  }
 }
 </style>
@@ -102,9 +102,7 @@ export default {
  data() {
    return {
      isBusinessHoursEnabled: false,
-      unavailableMessage: this.$t(
-        'INBOX_MGMT.BUSINESS_HOURS.UNAVAILABLE_MESSAGE_DEFAULT'
-      ),
+      unavailableMessage: '',
      timeZone: DEFAULT_TIMEZONE,
      dayNames: {
        0: 'Sunday',
@@ -157,9 +155,7 @@ export default {
        ? timeSlotParse(timeSlots)
        : defaultTimeSlot;
      this.isBusinessHoursEnabled = isEnabled;
-      this.unavailableMessage =
-        unavailableMessage ||
-        this.$t('INBOX_MGMT.BUSINESS_HOURS.UNAVAILABLE_MESSAGE_DEFAULT');
+      this.unavailableMessage = unavailableMessage || '';
      this.timeSlots = slots;
      this.timeZone =
        this.timeZones.find(item => timeZone === item.value) ||
@@ -1,11 +1,12 @@
 <template>
  <div class="column content-box">
    <report-filter-selector
-      agents-filter
-      :agents-filter-items-list="agentList"
+      :show-agents-filter="true"
+      :show-inbox-filter="true"
+      :show-rating-filter="true"
+      :show-team-filter="isTeamsEnabled"
      :show-business-hours-switch="false"
-      @date-range-change="onDateRangeChange"
-      @agents-filter-change="onAgentsFilterChange"
+      @filter-change="onFilterChange"
    />
    <woot-button
      color-scheme="success"
@@ -15,7 +16,7 @@
    >
      {{ $t('CSAT_REPORTS.DOWNLOAD') }}
    </woot-button>
-    <csat-metrics />
+    <csat-metrics :filters="requestPayload" />
    <csat-table :page-index="pageIndex" @page-change="onPageNumberChange" />
  </div>
 </template>
@@ -23,9 +24,11 @@
 import CsatMetrics from './components/CsatMetrics';
 import CsatTable from './components/CsatTable';
 import ReportFilterSelector from './components/FilterSelector';
-import { mapGetters } from 'vuex';
 import { generateFileName } from '../../../../helper/downloadHelper';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
+import { mapGetters } from 'vuex';
+import { FEATURE_FLAGS } from '../../../../featureFlags';
+import alertMixin from '../../../../../shared/mixins/alertMixin';

 export default {
  name: 'CsatResponses',
@@ -34,39 +37,78 @@ export default {
    CsatTable,
    ReportFilterSelector,
  },
+  mixins: [alertMixin],
  data() {
-    return { pageIndex: 1, from: 0, to: 0, userIds: [] };
+    return {
+      pageIndex: 1,
+      from: 0,
+      to: 0,
+      userIds: [],
+      inbox: null,
+      team: null,
+      rating: null,
+    };
  },
  computed: {
    ...mapGetters({
-      agentList: 'agents/getAgents',
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledOnAccount: 'accounts/isFeatureEnabledonAccount',
    }),
-  },
-  mounted() {
-    this.$store.dispatch('agents/get');
-  },
-  methods: {
-    getAllData() {
-      this.$store.dispatch('csat/getMetrics', {
+    requestPayload() {
+      return {
        from: this.from,
        to: this.to,
        user_ids: this.userIds,
-      });
-      this.getResponses();
+        inbox_id: this.inbox,
+        team_id: this.team,
+        rating: this.rating,
+      };
+    },
+    isTeamsEnabled() {
+      return this.isFeatureEnabledOnAccount(
+        this.accountId,
+        FEATURE_FLAGS.TEAM_MANAGEMENT
+      );
+    },
+  },
+  methods: {
+    getAllData() {
+      try {
+        this.$store.dispatch('csat/getMetrics', this.requestPayload);
+        this.getResponses();
+      } catch {
+        this.showAlert(this.$t('REPORT.DATA_FETCHING_FAILED'));
+      }
    },
    getResponses() {
      this.$store.dispatch('csat/get', {
        page: this.pageIndex,
-        from: this.from,
-        to: this.to,
-        user_ids: this.userIds,
+        ...this.requestPayload,
      });
    },
+    downloadReports() {
+      const type = 'csat';
+      try {
+        this.$store.dispatch('csat/downloadCSATReports', {
+          fileName: generateFileName({ type, to: this.to }),
+          ...this.requestPayload,
+        });
+      } catch (error) {
+        this.showAlert(this.$t('REPORT.CSAT_REPORTS.DOWNLOAD_FAILED'));
+      }
+    },
    onPageNumberChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.getResponses();
    },
-    onDateRangeChange({ from, to }) {
+    onFilterChange({
+      from,
+      to,
+      selectedAgents,
+      selectedInbox,
+      selectedTeam,
+      selectedRating,
+    }) {
      // do not track filter change on inital load
      if (this.from !== 0 && this.to !== 0) {
        this.$track(REPORTS_EVENTS.FILTER_REPORT, {
@@ -74,27 +116,16 @@ export default {
          reportType: 'csat',
        });
      }
+
      this.from = from;
      this.to = to;
+      this.userIds = selectedAgents.map(el => el.id);
+      this.inbox = selectedInbox?.id;
+      this.team = selectedTeam?.id;
+      this.rating = selectedRating?.value;
+
      this.getAllData();
    },
-    onAgentsFilterChange(agents) {
-      this.userIds = agents.map(el => el.id);
-      this.getAllData();
-      this.$track(REPORTS_EVENTS.FILTER_REPORT, {
-        filterType: 'agent',
-        reportType: 'csat',
-      });
-    },
-    downloadReports() {
-      const type = 'csat';
-      this.$store.dispatch('csat/downloadCSATReports', {
-        from: this.from,
-        to: this.to,
-        user_ids: this.userIds,
-        fileName: generateFileName({ type, to: this.to }),
-      });
-    },
  },
 };
 </script>
@@ -9,12 +9,9 @@
      {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
    </woot-button>
    <report-filter-selector
-      group-by-filter
-      :selected-group-by-filter="selectedGroupByFilter"
-      :filter-items-list="filterItemsList"
-      @date-range-change="onDateRangeChange"
+      :show-agents-filter="false"
+      :show-group-by-filter="true"
      @filter-change="onFilterChange"
-      @business-hours-toggle="onBusinessHoursToggle"
    />
    <div class="row">
      <woot-report-stats-card
@@ -55,7 +52,8 @@ import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
 import ReportFilterSelector from './components/FilterSelector';
 import { GROUP_BY_FILTER, METRIC_CHART } from './constants';
-import reportMixin from '../../../../mixins/reportMixin';
+import reportMixin from 'dashboard/mixins/reportMixin';
+import alertMixin from 'shared/mixins/alertMixin';
 import { formatTime } from '@chatwoot/utils';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';

@@ -73,15 +71,13 @@ export default {
  components: {
    ReportFilterSelector,
  },
-  mixins: [reportMixin],
+  mixins: [reportMixin, alertMixin],
  data() {
    return {
      from: 0,
      to: 0,
      currentSelection: 0,
      groupBy: GROUP_BY_FILTER[1],
-      filterItemsList: this.$t('REPORT.GROUP_BY_DAY_OPTIONS'),
-      selectedGroupByFilter: {},
      businessHours: false,
    };
  },
@@ -96,7 +92,7 @@ export default {
      }
      if (!this.accountReport.data.length) return {};
      const labels = this.accountReport.data.map(element => {
-        if (this.groupBy.period === GROUP_BY_FILTER[2].period) {
+        if (this.groupBy?.period === GROUP_BY_FILTER[2].period) {
          let week_date = new Date(fromUnixTime(element.timestamp));
          const first_day = week_date.getDate() - week_date.getDay();
          const last_day = first_day + 6;
@@ -109,10 +105,10 @@ export default {
            'dd/MM/yy'
          )}`;
        }
-        if (this.groupBy.period === GROUP_BY_FILTER[3].period) {
+        if (this.groupBy?.period === GROUP_BY_FILTER[3].period) {
          return format(fromUnixTime(element.timestamp), 'MMM-yyyy');
        }
-        if (this.groupBy.period === GROUP_BY_FILTER[4].period) {
+        if (this.groupBy?.period === GROUP_BY_FILTER[4].period) {
          return format(fromUnixTime(element.timestamp), 'yyyy');
        }
        return format(fromUnixTime(element.timestamp), 'dd-MMM-yyyy');
@@ -191,24 +187,35 @@ export default {
  },
  methods: {
    fetchAllData() {
-      const { from, to, groupBy, businessHours } = this;
-      this.$store.dispatch('fetchAccountSummary', {
-        from,
-        to,
-        groupBy: groupBy.period,
-        businessHours,
-      });
+      this.fetchAccountSummary();
      this.fetchChartData();
    },
+    fetchAccountSummary() {
+      try {
+        this.$store.dispatch('fetchAccountSummary', this.getRequestPayload());
+      } catch {
+        this.showAlert(this.$t('REPORT.SUMMARY_FETCHING_FAILED'));
+      }
+    },
    fetchChartData() {
+      try {
+        this.$store.dispatch('fetchAccountReport', {
+          metric: this.metrics[this.currentSelection].KEY,
+          ...this.getRequestPayload(),
+        });
+      } catch {
+        this.showAlert(this.$t('REPORT.DATA_FETCHING_FAILED'));
+      }
+    },
+    getRequestPayload() {
      const { from, to, groupBy, businessHours } = this;
-      this.$store.dispatch('fetchAccountReport', {
-        metric: this.metrics[this.currentSelection].KEY,
+
+      return {
        from,
        to,
-        groupBy: groupBy.period,
+        groupBy: groupBy?.period,
        businessHours,
-      });
+      };
    },
    downloadAgentReports() {
      const { from, to } = this;
@@ -222,57 +229,15 @@ export default {
      this.currentSelection = index;
      this.fetchChartData();
    },
-    onDateRangeChange({ from, to, groupBy }) {
-      // do not track filter change on inital load
-      if (this.from !== 0 && this.to !== 0) {
-        this.$track(REPORTS_EVENTS.FILTER_REPORT, {
-          filterType: 'date',
-          reportType: 'conversations',
-        });
-      }
+    onFilterChange({ from, to, groupBy, businessHours }) {
      this.from = from;
      this.to = to;
-      this.filterItemsList = this.fetchFilterItems(groupBy);
-      const filterItems = this.filterItemsList.filter(
-        item => item.id === this.groupBy.id
-      );
-      if (filterItems.length > 0) {
-        this.selectedGroupByFilter = filterItems[0];
-      } else {
-        this.selectedGroupByFilter = this.filterItemsList[0];
-        this.groupBy = GROUP_BY_FILTER[this.selectedGroupByFilter.id];
-      }
-      this.fetchAllData();
-    },
-    onFilterChange(payload) {
-      this.groupBy = GROUP_BY_FILTER[payload.id];
+      this.groupBy = groupBy;
+      this.businessHours = businessHours;
      this.fetchAllData();

      this.$track(REPORTS_EVENTS.FILTER_REPORT, {
-        filterType: 'groupBy',
-        filterValue: this.groupBy?.period,
-        reportType: 'conversations',
-      });
-    },
-    fetchFilterItems(groupBy) {
-      switch (groupBy) {
-        case GROUP_BY_FILTER[2].period:
-          return this.$t('REPORT.GROUP_BY_WEEK_OPTIONS');
-        case GROUP_BY_FILTER[3].period:
-          return this.$t('REPORT.GROUP_BY_MONTH_OPTIONS');
-        case GROUP_BY_FILTER[4].period:
-          return this.$t('REPORT.GROUP_BY_YEAR_OPTIONS');
-        default:
-          return this.$t('REPORT.GROUP_BY_DAY_OPTIONS');
-      }
-    },
-    onBusinessHoursToggle(value) {
-      this.businessHours = value;
-      this.fetchAllData();
-
-      this.$track(REPORTS_EVENTS.FILTER_REPORT, {
-        filterType: 'businessHours',
-        filterValue: value,
+        filterValue: { from, to, groupBy, businessHours },
        reportType: 'conversations',
      });
    },
@@ -1,5 +1,10 @@
 <template>
-  <div class="medium-2 small-6 csat--metric-card">
+  <div
+    class="medium-2 small-6 csat--metric-card"
+    :class="{
+      disabled: disabled,
+    }"
+  >
    <h3 class="heading">
      <span>{{ label }}</span>
      <fluent-icon
@@ -29,6 +34,10 @@ export default {
      type: String,
      required: true,
    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
  },
 };
 </script>
@@ -37,6 +46,13 @@ export default {
  margin: 0;
  padding: var(--space-normal);

+  &.disabled {
+    // grayscale everything
+    filter: grayscale(100%);
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
  .heading {
    align-items: center;
    color: var(--color-heading);
@@ -6,16 +6,20 @@
      :value="responseCount"
    />
    <csat-metric-card
+      :disabled="ratingFilterEnabled"
      :label="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL')"
      :info-text="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP')"
-      :value="formatToPercent(satisfactionScore)"
+      :value="ratingFilterEnabled ? '--' : formatToPercent(satisfactionScore)"
    />
    <csat-metric-card
      :label="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL')"
      :info-text="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP')"
      :value="formatToPercent(responseRate)"
    />
-    <div v-if="metrics.totalResponseCount" class="medium-6 report-card">
+    <div
+      v-if="metrics.totalResponseCount && !ratingFilterEnabled"
+      class="medium-6 report-card"
+    >
      <h3 class="heading">
        <div class="emoji--distribution">
          <div
@@ -24,7 +28,7 @@
            class="emoji--distribution-item"
          >
            <span class="emoji--distribution-key">{{
-              csatRatings[key - 1].emoji
+              ratingToEmoji(key)
            }}</span>
            <span>{{ formatToPercent(rating) }}</span>
          </div>
@@ -45,6 +49,12 @@ export default {
  components: {
    CsatMetricCard,
  },
+  props: {
+    filters: {
+      type: Object,
+      required: true,
+    },
+  },
  data() {
    return {
      csatRatings: CSAT_RATINGS,
@@ -57,12 +67,15 @@ export default {
      satisfactionScore: 'csat/getSatisfactionScore',
      responseRate: 'csat/getResponseRate',
    }),
+    ratingFilterEnabled() {
+      return Boolean(this.filters.rating);
+    },
    chartData() {
      return {
        labels: ['Rating'],
-        datasets: CSAT_RATINGS.map((rating, index) => ({
+        datasets: CSAT_RATINGS.map(rating => ({
          label: rating.emoji,
-          data: [this.ratingPercentage[index + 1]],
+          data: [this.ratingPercentage[rating.value]],
          backgroundColor: rating.color,
        })),
      };
@@ -77,6 +90,9 @@ export default {
    formatToPercent(value) {
      return value ? `${value}%` : '--';
    },
+    ratingToEmoji(value) {
+      return CSAT_RATINGS.find(rating => rating.value === Number(value)).emoji;
+    },
  },
 };
 </script>
@@ -1,72 +1,43 @@
 <template>
-  <div class="flex-container flex-dir-column medium-flex-dir-row">
-    <div class="small-12 medium-3 pull-right multiselect-wrap--small">
-      <multiselect
-        v-model="currentDateRangeSelection"
-        track-by="name"
-        label="name"
-        :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
-        selected-label
-        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-        deselect-label=""
-        :options="dateRange"
-        :searchable="false"
-        :allow-empty="false"
-        @select="changeDateSelection"
-      />
-    </div>
+  <div class="filter-container">
+    <reports-filters-date-range @on-range-change="onDateRangeChange" />
    <woot-date-range-picker
      v-if="isDateRangeSelected"
-      class="margin-left-1"
      show-range
+      class="no-margin auto-width"
      :value="customDateRange"
      :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
      :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
-      @change="onChange"
+      @change="onCustomDateRangeChange"
    />
-    <div
-      v-if="notLast7Days && groupByFilter"
-      class="small-12 medium-3 pull-right margin-left-1 margin-right-1 multiselect-wrap--small"
-    >
-      <p aria-hidden="true" class="hide">
-        {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
-      </p>
-      <multiselect
-        v-model="currentSelectedFilter"
-        track-by="id"
-        label="groupBy"
-        :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
-        :options="filterItemsList"
-        :allow-empty="false"
-        :show-labels="false"
-        @input="changeFilterSelection"
-      />
-    </div>
-    <div
-      v-if="agentsFilter"
-      class="small-12 medium-3 pull-right margin-left-1 margin-right-1 multiselect-wrap--small"
-    >
-      <multiselect
-        v-model="selectedAgents"
-        :options="agentsFilterItemsList"
-        track-by="id"
-        label="name"
-        :multiple="true"
-        :close-on-select="false"
-        :clear-on-select="false"
-        :hide-selected="true"
-        :placeholder="$t('CSAT_REPORTS.FILTERS.AGENTS.PLACEHOLDER')"
-        selected-label
-        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-        :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-        @input="handleAgentsFilterSelection"
-      />
-    </div>
-    <div
-      v-if="showBusinessHoursSwitch"
-      class="small-12 medium-3 business-hours"
-    >
-      <span class="business-hours-text margin-right-1">
+    <reports-filters-date-group-by
+      v-if="showGroupByFilter && isGroupByPossible"
+      :valid-group-options="validGroupOptions"
+      :selected-option="selectedGroupByFilter"
+      @on-grouping-change="onGroupingChange"
+    />
+    <reports-filters-agents
+      v-if="showAgentsFilter"
+      @agents-filter-selection="handleAgentsFilterSelection"
+    />
+    <reports-filters-labels
+      v-if="showLabelsFilter"
+      @labels-filter-selection="handleLabelsFilterSelection"
+    />
+    <reports-filters-teams
+      v-if="showTeamFilter"
+      @team-filter-selection="handleTeamFilterSelection"
+    />
+    <reports-filters-inboxes
+      v-if="showInboxFilter"
+      @inbox-filter-selection="handleInboxFilterSelection"
+    />
+    <reports-filters-ratings
+      v-if="showRatingFilter"
+      @rating-filter-selection="handleRatingFilterSelection"
+    />
+    <div v-if="showBusinessHoursSwitch" class="business-hours">
+      <span class="business-hours-text ">
        {{ $t('REPORT.BUSINESS_HOURS') }}
      </span>
      <span>
@@ -77,36 +48,54 @@
 </template>
 <script>
 import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
+import ReportsFiltersDateRange from './Filters/DateRange.vue';
+import ReportsFiltersDateGroupBy from './Filters/DateGroupBy.vue';
+import ReportsFiltersAgents from './Filters/Agents.vue';
+import ReportsFiltersLabels from './Filters/Labels.vue';
+import ReportsFiltersInboxes from './Filters/Inboxes.vue';
+import ReportsFiltersTeams from './Filters/Teams.vue';
+import ReportsFiltersRatings from './Filters/Ratings.vue';
 import subDays from 'date-fns/subDays';
-import startOfDay from 'date-fns/startOfDay';
-import getUnixTime from 'date-fns/getUnixTime';
-import { GROUP_BY_FILTER } from '../constants';
-import endOfDay from 'date-fns/endOfDay';
-
-const CUSTOM_DATE_RANGE_ID = 5;
+import { DATE_RANGE_OPTIONS } from '../constants';
+import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';

 export default {
  components: {
    WootDateRangePicker,
+    ReportsFiltersDateRange,
+    ReportsFiltersDateGroupBy,
+    ReportsFiltersAgents,
+    ReportsFiltersLabels,
+    ReportsFiltersInboxes,
+    ReportsFiltersTeams,
+    ReportsFiltersRatings,
  },
  props: {
    filterItemsList: {
      type: Array,
      default: () => [],
    },
-    agentsFilterItemsList: {
-      type: Array,
-      default: () => [],
-    },
-    selectedGroupByFilter: {
-      type: Object,
-      default: () => {},
-    },
-    groupByFilter: {
+    showGroupByFilter: {
      type: Boolean,
      default: false,
    },
-    agentsFilter: {
+    showAgentsFilter: {
+      type: Boolean,
+      default: false,
+    },
+    showLabelsFilter: {
+      type: Boolean,
+      default: false,
+    },
+    showInboxFilter: {
+      type: Boolean,
+      default: false,
+    },
+    showRatingFilter: {
+      type: Boolean,
+      default: false,
+    },
+    showTeamFilter: {
      type: Boolean,
      default: false,
    },
@@ -117,95 +106,134 @@ export default {
  },
  data() {
    return {
-      currentDateRangeSelection: this.$t('REPORT.DATE_RANGE')[0],
-      dateRange: this.$t('REPORT.DATE_RANGE'),
-      customDateRange: [new Date(), new Date()],
-      currentSelectedFilter: null,
+      // default value, need not be translated
+      selectedDateRange: DATE_RANGE_OPTIONS.LAST_7_DAYS,
+      selectedGroupByFilter: null,
+      selectedLabel: null,
+      selectedInbox: null,
+      selectedTeam: null,
+      selectedRating: null,
      selectedAgents: [],
+      customDateRange: [new Date(), new Date()],
      businessHoursSelected: false,
    };
  },
  computed: {
    isDateRangeSelected() {
-      return this.currentDateRangeSelection.id === CUSTOM_DATE_RANGE_ID;
+      return (
+        this.selectedDateRange.id === DATE_RANGE_OPTIONS.CUSTOM_DATE_RANGE.id
+      );
+    },
+    isGroupByPossible() {
+      return this.selectedDateRange.id !== DATE_RANGE_OPTIONS.LAST_7_DAYS.id;
    },
    to() {
      if (this.isDateRangeSelected) {
-        return this.toCustomDate(this.customDateRange[1]);
+        return getUnixEndOfDay(this.customDateRange[1]);
      }
-      return this.toCustomDate(new Date());
+      return getUnixEndOfDay(new Date());
    },
    from() {
      if (this.isDateRangeSelected) {
-        return this.fromCustomDate(this.customDateRange[0]);
+        return getUnixStartOfDay(this.customDateRange[0]);
      }
-      const dateRange = {
-        0: 6,
-        1: 29,
-        2: 89,
-        3: 179,
-        4: 364,
-      };
-      const diff = dateRange[this.currentDateRangeSelection.id];
-      const fromDate = subDays(new Date(), diff);
-      return this.fromCustomDate(fromDate);
+
+      const { offset } = this.selectedDateRange;
+      const fromDate = subDays(new Date(), offset);
+      return getUnixStartOfDay(fromDate);
    },
-    groupBy() {
-      if (this.isDateRangeSelected) {
-        return GROUP_BY_FILTER[4].period;
+    validGroupOptions() {
+      return this.selectedDateRange.groupByOptions;
+    },
+    validGroupBy() {
+      if (!this.selectedGroupByFilter) {
+        return this.validGroupOptions[0];
      }
-      const groupRange = {
-        0: GROUP_BY_FILTER[1].period,
-        1: GROUP_BY_FILTER[2].period,
-        2: GROUP_BY_FILTER[3].period,
-        3: GROUP_BY_FILTER[3].period,
-        4: GROUP_BY_FILTER[3].period,
-      };
-      return groupRange[this.currentDateRangeSelection.id];
-    },
-    notLast7Days() {
-      return this.groupBy !== GROUP_BY_FILTER[1].period;
+
+      const validIds = this.validGroupOptions.map(opt => opt.id);
+      if (validIds.includes(this.selectedGroupByFilter.id)) {
+        return this.selectedGroupByFilter;
+      }
+      return this.validGroupOptions[0];
    },
  },
  watch: {
-    filterItemsList() {
-      this.currentSelectedFilter = this.selectedGroupByFilter;
-    },
    businessHoursSelected() {
-      this.$emit('business-hours-toggle', this.businessHoursSelected);
+      this.emitChange();
    },
  },
  mounted() {
-    this.onDateRangeChange();
+    this.emitChange();
  },
  methods: {
-    onDateRangeChange() {
-      this.$emit('date-range-change', {
-        from: this.from,
-        to: this.to,
-        groupBy: this.groupBy,
+    emitChange() {
+      const {
+        from,
+        to,
+        selectedGroupByFilter: groupBy,
+        businessHoursSelected: businessHours,
+        selectedAgents,
+        selectedLabel,
+        selectedInbox,
+        selectedTeam,
+        selectedRating,
+      } = this;
+      this.$emit('filter-change', {
+        from,
+        to,
+        groupBy,
+        businessHours,
+        selectedAgents,
+        selectedLabel,
+        selectedInbox,
+        selectedTeam,
+        selectedRating,
      });
    },
-    fromCustomDate(date) {
-      return getUnixTime(startOfDay(date));
+    onDateRangeChange(selectedRange) {
+      this.selectedDateRange = selectedRange;
+      this.selectedGroupByFilter = this.validGroupBy;
+      this.emitChange();
    },
-    toCustomDate(date) {
-      return getUnixTime(endOfDay(date));
-    },
-    changeDateSelection(selectedRange) {
-      this.currentDateRangeSelection = selectedRange;
-      this.onDateRangeChange();
-    },
-    onChange(value) {
+    onCustomDateRangeChange(value) {
      this.customDateRange = value;
-      this.onDateRangeChange();
+      this.selectedGroupByFilter = this.validGroupBy;
+      this.emitChange();
    },
-    changeFilterSelection() {
-      this.$emit('filter-change', this.currentSelectedFilter);
+    onGroupingChange(payload) {
+      this.selectedGroupByFilter = payload;
+      this.emitChange();
    },
-    handleAgentsFilterSelection() {
-      this.$emit('agents-filter-change', this.selectedAgents);
+    handleAgentsFilterSelection(selectedAgents) {
+      this.selectedAgents = selectedAgents;
+      this.emitChange();
+    },
+    handleLabelsFilterSelection(selectedLabel) {
+      this.selectedLabel = selectedLabel;
+      this.emitChange();
+    },
+    handleInboxFilterSelection(selectedInbox) {
+      this.selectedInbox = selectedInbox;
+      this.emitChange();
+    },
+    handleTeamFilterSelection(selectedTeam) {
+      this.selectedTeam = selectedTeam;
+      this.emitChange();
+    },
+    handleRatingFilterSelection(selectedRating) {
+      this.selectedRating = selectedRating;
+      this.emitChange();
    },
  },
 };
 </script>
+
+<style scoped>
+.filter-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-gap: var(--space-slab);
+
+  margin-bottom: var(--space-normal);
+}
+</style>
@@ -0,0 +1,45 @@
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOptions"
+      class="no-margin"
+      :options="options"
+      track-by="id"
+      label="name"
+      :multiple="true"
+      :close-on-select="false"
+      :clear-on-select="false"
+      :hide-selected="true"
+      :placeholder="$t('CSAT_REPORTS.FILTERS.AGENTS.PLACEHOLDER')"
+      selected-label
+      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+      :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+      @input="handleInput"
+    />
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'ReportsFiltersAgents',
+  data() {
+    return {
+      selectedOptions: [],
+    };
+  },
+  computed: {
+    ...mapGetters({
+      options: 'agents/getAgents',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('agents/get');
+  },
+  methods: {
+    handleInput() {
+      this.$emit('agents-filter-selection', this.selectedOptions);
+    },
+  },
+};
+</script>
@@ -0,0 +1,67 @@
+<template>
+  <div class="multiselect-wrap--small">
+    <p aria-hidden="true" class="hide">
+      {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
+    </p>
+    <multiselect
+      v-model="currentSelectedFilter"
+      class="no-margin"
+      track-by="id"
+      label="groupBy"
+      :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
+      :options="translatedOptions"
+      :allow-empty="false"
+      :show-labels="false"
+      @select="changeFilterSelection"
+    />
+  </div>
+</template>
+
+<script>
+import { GROUP_BY_OPTIONS } from '../../constants';
+
+const EVENT_NAME = 'on-grouping-change';
+
+export default {
+  name: 'ReportsFiltersDateGroupBy',
+  props: {
+    validGroupOptions: {
+      type: Array,
+      default: () => [GROUP_BY_OPTIONS.DAY],
+    },
+    selectedOption: {
+      type: Object,
+      default: () => GROUP_BY_OPTIONS.DAY,
+    },
+  },
+  data() {
+    return {
+      currentSelectedFilter: null,
+    };
+  },
+  computed: {
+    translatedOptions() {
+      return this.validGroupOptions.map(option => ({
+        ...option,
+        groupBy: this.$t(option.translationKey),
+      }));
+    },
+  },
+  watch: {
+    selectedOption: {
+      handler() {
+        this.currentSelectedFilter = {
+          ...this.selectedOption,
+          groupBy: this.$t(this.selectedOption.translationKey),
+        };
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    changeFilterSelection(selectedFilter) {
+      this.groupByOptions = this.$emit(EVENT_NAME, selectedFilter);
+    },
+  },
+};
+</script>
@@ -0,0 +1,46 @@
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      track-by="name"
+      label="name"
+      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
+      selected-label
+      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+      deselect-label=""
+      :options="options"
+      :searchable="false"
+      :allow-empty="false"
+      @select="updateRange"
+    />
+  </div>
+</template>
+
+<script>
+import { DATE_RANGE_OPTIONS } from '../../constants';
+
+const EVENT_NAME = 'on-range-change';
+
+export default {
+  name: 'ReportFiltersDateRange',
+  data() {
+    const translatedOptions = Object.values(DATE_RANGE_OPTIONS).map(option => ({
+      ...option,
+      name: this.$t(option.translationKey),
+    }));
+
+    return {
+      // relies on translations, need to move it to constants
+      selectedOption: translatedOptions[0],
+      options: translatedOptions,
+    };
+  },
+  methods: {
+    updateRange(selectedRange) {
+      this.selectedOption = selectedRange;
+      this.$emit(EVENT_NAME, selectedRange);
+    },
+  },
+};
+</script>
@@ -0,0 +1,40 @@
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :placeholder="$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL')"
+      label="name"
+      track-by="id"
+      :options="options"
+      :option-height="24"
+      :show-labels="false"
+      @input="handleInput"
+    />
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'ReportsFiltersInboxes',
+  data() {
+    return {
+      selectedOption: null,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      options: 'inboxes/getInboxes',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('inboxes/get');
+  },
+  methods: {
+    handleInput() {
+      this.$emit('inbox-filter-selection', this.selectedOption);
+    },
+  },
+};
+</script>
@@ -0,0 +1,71 @@
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :placeholder="$t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL')"
+      label="title"
+      track-by="id"
+      :options="options"
+      :option-height="24"
+      :show-labels="false"
+      @input="handleInput"
+    >
+      <template slot="singleLabel" slot-scope="props">
+        <div class="reports-option__wrap">
+          <div
+            :style="{ backgroundColor: props.option.color }"
+            class="reports-option__rounded--item"
+          />
+          <span class="reports-option__desc">
+            <span class="reports-option__title">
+              {{ props.option.title }}
+            </span>
+          </span>
+        </div>
+      </template>
+      <template slot="option" slot-scope="props">
+        <div class="reports-option__wrap">
+          <div
+            :style="{ backgroundColor: props.option.color }"
+            class="
+                reports-option__rounded--item
+                reports-option__item
+                reports-option__label--swatch
+              "
+          />
+          <span class="reports-option__desc">
+            <span class="reports-option__title">
+              {{ props.option.title }}
+            </span>
+          </span>
+        </div>
+      </template>
+    </multiselect>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'ReportsFiltersLabels',
+  data() {
+    return {
+      selectedOption: null,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      options: 'labels/getLabels',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('labels/get');
+  },
+  methods: {
+    handleInput() {
+      this.$emit('labels-filter-selection', this.selectedOption);
+    },
+  },
+};
+</script>
@@ -0,0 +1,39 @@
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :option-height="24"
+      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
+      :options="options"
+      :show-labels="false"
+      track-by="value"
+      label="label"
+      @input="handleInput"
+    />
+  </div>
+</template>
+
+<script>
+import { CSAT_RATINGS } from 'shared/constants/messages';
+
+export default {
+  name: 'ReportFiltersRatings',
+  data() {
+    const translatedOptions = CSAT_RATINGS.reverse().map(option => ({
+      ...option,
+      label: this.$t(option.translationKey),
+    }));
+
+    return {
+      selectedOption: null,
+      options: translatedOptions,
+    };
+  },
+  methods: {
+    handleInput(selectedRating) {
+      this.$emit('rating-filter-selection', selectedRating);
+    },
+  },
+};
+</script>
@@ -0,0 +1,40 @@
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :placeholder="$t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL')"
+      label="name"
+      track-by="id"
+      :options="options"
+      :option-height="24"
+      :show-labels="false"
+      @input="handleInput"
+    />
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'ReportsFiltersTeams',
+  data() {
+    return {
+      selectedOption: null,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      options: 'teams/getTeams',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('teams/get');
+  },
+  methods: {
+    handleInput() {
+      this.$emit('team-filter-selection', this.selectedOption);
+    },
+  },
+};
+</script>
--- a/Show More
+++ b/Show More