feat: update message

feat: add console.warn for action cable ignore
Merge branch 'develop' into deploy-apr-15
2024-07-26 14:20:52 +05:30 · 2024-07-26 14:20:45 +05:30 · 2024-07-10 20:29:13 -07:00 · 2024-07-10 20:28:53 -07:00 · 2024-07-10 20:28:30 -07:00 · 2024-07-10 19:56:46 -07:00
418 changed files with 9455 additions and 4362 deletions
@@ -7,7 +7,7 @@ defaults: &defaults
  working_directory: ~/build
  docker:
    # specify the version you desire here
-    - image: cimg/ruby:3.2.2-browsers
+    - image: cimg/ruby:3.3.3-browsers

    # Specify service dependencies here if necessary
    # CircleCI maintains a library of pre-built images
@@ -130,10 +130,7 @@ jobs:
          command: |
            mkdir -p ~/tmp/test-results/frontend_specs
            ~/tmp/cc-test-reporter before-build
-            TESTFILES=$(circleci tests glob **/specs/*.spec.js | circleci tests split --split-by=timings)
-            yarn test:coverage --profile 10 \
-                               --out ~/tmp/test-results/yarn.xml \
-                               -- ${TESTFILES}
+            yarn test:coverage
      - run:
          name: Code Climate Test Coverage
          command: |
@@ -12,7 +12,7 @@ services:
      args:
        VARIANT: "ubuntu-22.04"
        NODE_VERSION: "20.9.0"
-        RUBY_VERSION: "3.2.2"
+        RUBY_VERSION: "3.3.3"
        # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
        USER_UID: "1000"
        USER_GID: "1000"
@@ -25,7 +25,7 @@ services:
      args:
        VARIANT: "ubuntu-22.04"
        NODE_VERSION: "20.9.0"
-        RUBY_VERSION: "3.2.2"
+        RUBY_VERSION: "3.3.3"
        # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
        USER_UID: "1000"
        USER_GID: "1000"
@@ -1,4 +1,9 @@
+# Learn about the various environment variables at
+# https://www.chatwoot.com/docs/self-hosted/configuration/environment-variables/#rails-production-variables
+
 # Used to verify the integrity of signed cookies. so ensure a secure value is set
+# SECRET_KEY_BASE should be alphanumeric. Avoid special characters or symbols. 
+# Use `rake secret` to generate this variable
 SECRET_KEY_BASE=replace_with_lengthy_secure_hex

 # Replace with the URL you are planning to use for your app
@@ -80,6 +85,8 @@ SMTP_OPENSSL_VERIFY_MODE=peer
 # Comment out the following environment variables if required by your SMTP server
 # SMTP_TLS=
 # SMTP_SSL=
+# SMTP_OPEN_TIMEOUT
+# SMTP_READ_TIMEOUT

 # Mail Incoming
 # This is the domain set for the reply emails when conversation continuity is enabled
@@ -184,12 +191,6 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 # SENTRY_DSN=


-# MICROSOFT CLARITY
-# MS_CLARITY_TOKEN=xxxxxxxxx
-
-# GOOGLE_TAG_MANAGER
-# GOOGLE_TAG = GTM-XXXXXXX
-
 ## Scout
 ## https://scoutapm.com/docs/ruby/configuration
 # SCOUT_KEY=YOURKEY
@@ -65,10 +65,10 @@ module.exports = {
  },
  env: {
    browser: true,
-    jest: true,
    node: true,
  },
  globals: {
    bus: true,
+    vi: true,
  },
 };
@@ -1 +1 @@
-3.2.2
+3.3.3
@@ -1,10 +1,10 @@
 source 'https://rubygems.org'

-ruby '3.2.2'
+ruby '3.3.3'

 ##-- base gems for rails --##
 gem 'rack-cors', '2.0.0', require: 'rack/cors'
-gem 'rails', '~> 7.0.8.1'
+gem 'rails', '~> 7.0.8.4'
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', require: false

@@ -61,7 +61,7 @@ gem 'redis-namespace'
 gem 'activerecord-import'

 ##--- gems for server & infra configuration ---##
-gem 'dotenv-rails'
+gem 'dotenv-rails', '>= 3.0.0'
 gem 'foreman'
 gem 'puma'
 gem 'webpacker'
@@ -111,18 +111,18 @@ gem 'elastic-apm', require: false
 gem 'newrelic_rpm', require: false
 gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
 gem 'scout_apm', require: false
-gem 'sentry-rails', '>= 5.14.0', require: false
+gem 'sentry-rails', '>= 5.18.1', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.15.0', require: false
+gem 'sentry-sidekiq', '>= 5.18.1', require: false

 ##-- background job processing --##
-gem 'sidekiq', '>= 7.2.4'
+gem 'sidekiq', '>= 7.3.0'
 # We want cron jobs
 gem 'sidekiq-cron', '>= 1.12.0'

 ##-- Push notification service --##
 gem 'fcm'
-gem 'web-push'
+gem 'web-push', '>= 3.0.1'

 ##-- geocoding / parse location from ip --##
 # http://www.rubygeocoder.com/
@@ -228,7 +228,7 @@ group :development, :test do
  gem 'mock_redis'
  gem 'pry-rails'
  gem 'rspec_junit_formatter'
-  gem 'rspec-rails'
+  gem 'rspec-rails', '>= 6.1.3'
  gem 'rubocop', require: false
  gem 'rubocop-performance', require: false
  gem 'rubocop-rails', require: false
@@ -33,70 +33,70 @@ GIT
 GEM
  remote: https://rubygems.org/
  specs:
-    actioncable (7.0.8.3)
-      actionpack (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    actioncable (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.8.3)
-      actionpack (= 7.0.8.3)
-      activejob (= 7.0.8.3)
-      activerecord (= 7.0.8.3)
-      activestorage (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    actionmailbox (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      activejob (= 7.0.8.4)
+      activerecord (= 7.0.8.4)
+      activestorage (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
      mail (>= 2.7.1)
      net-imap
      net-pop
      net-smtp
-    actionmailer (7.0.8.3)
-      actionpack (= 7.0.8.3)
-      actionview (= 7.0.8.3)
-      activejob (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    actionmailer (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      actionview (= 7.0.8.4)
+      activejob (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
      mail (~> 2.5, >= 2.5.4)
      net-imap
      net-pop
      net-smtp
      rails-dom-testing (~> 2.0)
-    actionpack (7.0.8.3)
-      actionview (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    actionpack (7.0.8.4)
+      actionview (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
      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.8.3)
-      actionpack (= 7.0.8.3)
-      activerecord (= 7.0.8.3)
-      activestorage (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    actiontext (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      activerecord (= 7.0.8.4)
+      activestorage (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
      globalid (>= 0.6.0)
      nokogiri (>= 1.8.5)
-    actionview (7.0.8.3)
-      activesupport (= 7.0.8.3)
+    actionview (7.0.8.4)
+      activesupport (= 7.0.8.4)
      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.8.3)
-      activesupport (= 7.0.8.3)
+    activejob (7.0.8.4)
+      activesupport (= 7.0.8.4)
      globalid (>= 0.3.6)
-    activemodel (7.0.8.3)
-      activesupport (= 7.0.8.3)
-    activerecord (7.0.8.3)
-      activemodel (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    activemodel (7.0.8.4)
+      activesupport (= 7.0.8.4)
+    activerecord (7.0.8.4)
+      activemodel (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
    activerecord-import (1.4.1)
      activerecord (>= 4.2)
-    activestorage (7.0.8.3)
-      actionpack (= 7.0.8.3)
-      activejob (= 7.0.8.3)
-      activerecord (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    activestorage (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      activejob (= 7.0.8.4)
+      activerecord (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
      marcel (~> 1.0)
      mini_mime (>= 1.1.0)
-    activesupport (7.0.8.3)
+    activesupport (7.0.8.4)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (>= 1.6, < 2)
      minitest (>= 5.1)
@@ -148,15 +148,15 @@ GEM
    barnes (0.0.9)
      multi_json (~> 1)
      statsd-ruby (~> 1.1)
-    base64 (0.2.0)
+    base64 (0.1.1)
    bcrypt (3.1.20)
-    bigdecimal (3.1.7)
+    bigdecimal (3.1.8)
    bindex (0.8.1)
    bootsnap (1.16.0)
      msgpack (~> 1.2)
    brakeman (5.4.1)
    browser (5.3.1)
-    builder (3.2.4)
+    builder (3.3.0)
    bullet (7.0.7)
      activesupport (>= 3.0.0)
      uniform_notifier (~> 1.11)
@@ -169,12 +169,14 @@ GEM
    climate_control (1.2.0)
    coderay (1.1.3)
    commonmarker (0.23.10)
-    concurrent-ruby (1.2.3)
+    concurrent-ruby (1.3.3)
    connection_pool (2.4.1)
    crack (0.4.5)
      rexml
    crass (1.0.6)
-    csv-safe (3.2.1)
+    csv (3.3.0)
+    csv-safe (3.3.1)
+      csv (~> 3.0)
    cypress-on-rails (1.16.0)
      rack
    database_cleaner (2.0.2)
@@ -183,13 +185,16 @@ GEM
      activerecord (>= 5.a)
      database_cleaner-core (~> 2.0.0)
    database_cleaner-core (2.0.1)
-    date (3.3.4)
-    ddtrace (1.11.1)
-      debase-ruby_core_source (>= 0.10.16, <= 3.2.0)
-      libdatadog (~> 2.0.0.1.0)
-      libddwaf (~> 1.8.2.0.0)
+    datadog-ci (0.8.3)
      msgpack
-    debase-ruby_core_source (3.2.0)
+    date (3.3.4)
+    ddtrace (1.23.2)
+      datadog-ci (~> 0.8.1)
+      debase-ruby_core_source (= 3.3.1)
+      libdatadog (~> 7.0.0.1.0)
+      libddwaf (~> 1.14.0.0.0)
+      msgpack
+    debase-ruby_core_source (3.3.1)
    debug (1.8.0)
      irb (>= 1.5.0)
      reline (>= 0.3.1)
@@ -204,16 +209,16 @@ GEM
      bcrypt (~> 3.0)
      devise (> 3.5.2, < 5)
      rails (>= 4.2.0, < 7.2)
-    diff-lcs (1.5.0)
+    diff-lcs (1.5.1)
    digest-crc (0.6.4)
      rake (>= 12.0.0, < 14.0.0)
    docile (1.4.0)
    domain_name (0.5.20190701)
      unf (>= 0.0.5, < 1.0.0)
-    dotenv (2.8.1)
-    dotenv-rails (2.8.1)
-      dotenv (= 2.8.1)
-      railties (>= 3.2)
+    dotenv (3.1.2)
+    dotenv-rails (3.1.2)
+      dotenv (= 3.1.2)
+      railties (>= 6.1)
    down (5.4.0)
      addressable (~> 2.8)
    ecma-re-validator (0.4.0)
@@ -223,7 +228,7 @@ GEM
      http (>= 3.0)
      ruby2_keywords
    email_reply_trimmer (0.1.13)
-    erubi (1.12.0)
+    erubi (1.13.0)
    et-orbi (1.2.7)
      tzinfo
    execjs (2.8.1)
@@ -237,8 +242,9 @@ GEM
      railties (>= 5.0.0)
    faker (3.2.0)
      i18n (>= 1.8.11, < 2)
-    faraday (2.9.0)
-      faraday-net_http (>= 2.0, < 3.2)
+    faraday (2.7.4)
+      faraday-net_http (>= 2.0, < 3.1)
+      ruby2_keywords (>= 0.0.4)
    faraday-follow_redirects (0.3.0)
      faraday (>= 1, < 3)
    faraday-mashify (0.1.1)
@@ -246,8 +252,7 @@ GEM
      hashie
    faraday-multipart (1.0.4)
      multipart-post (~> 2)
-    faraday-net_http (3.1.0)
-      net-http
+    faraday-net_http (3.0.2)
    faraday-net_http_persistent (2.1.0)
      faraday (~> 2.5)
      net-http-persistent (~> 4.0)
@@ -316,10 +321,7 @@ GEM
    google-cloud-translate-v3 (0.6.0)
      gapic-common (>= 0.17.1, < 2.a)
      google-cloud-errors (~> 1.0)
-    google-protobuf (3.25.3)
    google-protobuf (3.25.3-arm64-darwin)
-    google-protobuf (3.25.3-x86_64-darwin)
-    google-protobuf (3.25.3-x86_64-linux)
    googleapis-common-protos (1.4.0)
      google-protobuf (~> 3.14)
      googleapis-common-protos-types (~> 1.2)
@@ -335,16 +337,7 @@ GEM
      signet (>= 0.16, < 2.a)
    groupdate (6.2.1)
      activesupport (>= 5.2)
-    grpc (1.62.0)
-      google-protobuf (~> 3.25)
-      googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-arm64-darwin)
-      google-protobuf (~> 3.25)
-      googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-x86_64-darwin)
-      google-protobuf (~> 3.25)
-      googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-x86_64-linux)
+    grpc (1.63.0-arm64-darwin)
      google-protobuf (~> 3.25)
      googleapis-common-protos-types (~> 1.0)
    haikunator (1.1.1)
@@ -355,7 +348,6 @@ GEM
    hana (1.3.7)
    hashdiff (1.0.1)
    hashie (5.0.0)
-    hkdf (1.0.0)
    http (5.1.1)
      addressable (~> 2.8)
      http-cookie (~> 1.0)
@@ -369,7 +361,7 @@ GEM
      mini_mime (>= 1.0.0)
      multi_xml (>= 0.5.2)
    httpclient (2.8.3)
-    i18n (1.14.5)
+    i18n (1.14.1)
      concurrent-ruby (~> 1.0)
    image_processing (1.12.2)
      mini_magick (>= 4.9.5, < 5)
@@ -393,8 +385,7 @@ GEM
      hana (~> 1.3)
      regexp_parser (~> 2.0)
      uri_template (~> 0.7)
-    jwt (2.8.1)
-      base64
+    jwt (2.7.0)
    kaminari (1.2.2)
      activesupport (>= 4.1.0)
      kaminari-actionview (= 1.2.2)
@@ -417,15 +408,8 @@ GEM
      addressable (~> 2.8)
    letter_opener (1.8.1)
      launchy (>= 2.2, < 3)
-    libdatadog (2.0.0.1.0)
-    libdatadog (2.0.0.1.0-x86_64-linux)
-    libddwaf (1.8.2.0.0)
-      ffi (~> 1.0)
-    libddwaf (1.8.2.0.0-arm64-darwin)
-      ffi (~> 1.0)
-    libddwaf (1.8.2.0.0-x86_64-darwin)
-      ffi (~> 1.0)
-    libddwaf (1.8.2.0.0-x86_64-linux)
+    libdatadog (7.0.0.1.0)
+    libddwaf (1.14.0.0.0-arm64-darwin)
      ffi (~> 1.0)
    line-bot-api (1.28.0)
    liquid (5.4.0)
@@ -435,6 +419,7 @@ GEM
    llhttp-ffi (0.4.0)
      ffi-compiler (~> 1.0)
      rake (~> 13.0)
+    logger (1.6.0)
    lograge (0.14.0)
      actionpack (>= 4)
      activesupport (>= 4)
@@ -454,14 +439,13 @@ GEM
    meta_request (0.8.2)
      rack-contrib (>= 1.1, < 3)
      railties (>= 3.0.0, < 8)
-    method_source (1.1.0)
+    method_source (1.0.0)
    mime-types (3.4.1)
      mime-types-data (~> 3.2015)
    mime-types-data (3.2023.0218.1)
    mini_magick (4.12.0)
    mini_mime (1.1.5)
-    mini_portile2 (2.8.6)
-    minitest (5.23.0)
+    minitest (5.24.1)
    mock_redis (0.36.0)
      ruby2_keywords
    msgpack (1.7.0)
@@ -470,11 +454,9 @@ GEM
    multipart-post (2.3.0)
    neighbor (0.2.3)
      activerecord (>= 5.2)
-    net-http (0.4.1)
-      uri
    net-http-persistent (4.0.2)
      connection_pool (~> 2.2)
-    net-imap (0.4.11)
+    net-imap (0.4.12)
      date
      net-protocol
    net-pop (0.1.2)
@@ -490,14 +472,7 @@ GEM
    newrelic_rpm (9.6.0)
      base64
    nio4r (2.7.3)
-    nokogiri (1.16.5)
-      mini_portile2 (~> 2.8.2)
-      racc (~> 1.4)
-    nokogiri (1.16.5-arm64-darwin)
-      racc (~> 1.4)
-    nokogiri (1.16.5-x86_64-darwin)
-      racc (~> 1.4)
-    nokogiri (1.16.5-x86_64-linux)
+    nokogiri (1.16.6-arm64-darwin)
      racc (~> 1.4)
    oauth (1.1.0)
      oauth-tty (~> 1.0, >= 1.0.1)
@@ -527,7 +502,7 @@ GEM
    omniauth-rails_csrf_protection (1.0.2)
      actionpack (>= 4.2)
      omniauth (~> 2.0)
-    openssl (3.1.0)
+    openssl (3.2.0)
    orm_adapter (0.5.0)
    os (1.1.4)
    parallel (1.23.0)
@@ -551,38 +526,37 @@ GEM
    pundit (2.3.0)
      activesupport (>= 3.0.0)
    raabro (1.4.0)
-    racc (1.7.3)
+    racc (1.8.0)
    rack (2.2.9)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
-    rack-contrib (2.4.0)
+    rack-contrib (2.5.0)
      rack (< 4)
    rack-cors (2.0.0)
      rack (>= 2.0.0)
    rack-mini-profiler (3.2.0)
      rack (>= 1.2.0)
-    rack-protection (3.2.0)
-      base64 (>= 0.1.0)
+    rack-protection (3.1.0)
      rack (~> 2.2, >= 2.2.4)
    rack-proxy (0.7.6)
      rack
    rack-test (2.1.0)
      rack (>= 1.3)
    rack-timeout (0.6.3)
-    rails (7.0.8.3)
-      actioncable (= 7.0.8.3)
-      actionmailbox (= 7.0.8.3)
-      actionmailer (= 7.0.8.3)
-      actionpack (= 7.0.8.3)
-      actiontext (= 7.0.8.3)
-      actionview (= 7.0.8.3)
-      activejob (= 7.0.8.3)
-      activemodel (= 7.0.8.3)
-      activerecord (= 7.0.8.3)
-      activestorage (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    rails (7.0.8.4)
+      actioncable (= 7.0.8.4)
+      actionmailbox (= 7.0.8.4)
+      actionmailer (= 7.0.8.4)
+      actionpack (= 7.0.8.4)
+      actiontext (= 7.0.8.4)
+      actionview (= 7.0.8.4)
+      activejob (= 7.0.8.4)
+      activemodel (= 7.0.8.4)
+      activerecord (= 7.0.8.4)
+      activestorage (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
      bundler (>= 1.15.0)
-      railties (= 7.0.8.3)
+      railties (= 7.0.8.4)
    rails-dom-testing (2.2.0)
      activesupport (>= 5.0.0)
      minitest
@@ -590,21 +564,21 @@ GEM
    rails-html-sanitizer (1.6.0)
      loofah (~> 2.21)
      nokogiri (~> 1.14)
-    railties (7.0.8.3)
-      actionpack (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    railties (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
      method_source
      rake (>= 12.2)
      thor (~> 1.0)
      zeitwerk (~> 2.5)
    rainbow (3.1.1)
-    rake (13.2.1)
+    rake (13.1.0)
    rb-fsevent (0.11.2)
    rb-inotify (0.10.1)
      ffi (~> 1.0)
    redis (5.0.6)
      redis-client (>= 0.9.0)
-    redis-client (0.22.1)
+    redis-client (0.22.2)
      connection_pool
    redis-namespace (1.10.0)
      redis (>= 4)
@@ -628,25 +602,25 @@ GEM
    retriable (3.1.2)
    reverse_markdown (2.1.1)
      nokogiri
-    rexml (3.2.8)
-      strscan (>= 3.0.9)
-    rspec-core (3.12.2)
-      rspec-support (~> 3.12.0)
-    rspec-expectations (3.12.3)
+    rexml (3.3.1)
+      strscan
+    rspec-core (3.13.0)
+      rspec-support (~> 3.13.0)
+    rspec-expectations (3.13.1)
      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.12.0)
-    rspec-mocks (3.12.5)
+      rspec-support (~> 3.13.0)
+    rspec-mocks (3.13.1)
      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.12.0)
-    rspec-rails (6.0.2)
+      rspec-support (~> 3.13.0)
+    rspec-rails (6.1.3)
      actionpack (>= 6.1)
      activesupport (>= 6.1)
      railties (>= 6.1)
-      rspec-core (~> 3.12)
-      rspec-expectations (~> 3.12)
-      rspec-mocks (~> 3.12)
-      rspec-support (~> 3.12)
-    rspec-support (3.12.0)
+      rspec-core (~> 3.13)
+      rspec-expectations (~> 3.13)
+      rspec-mocks (~> 3.13)
+      rspec-support (~> 3.13)
+    rspec-support (3.13.1)
    rspec_junit_formatter (0.6.0)
      rspec-core (>= 2, < 4, != 2.12.0)
    rubocop (1.50.2)
@@ -704,23 +678,24 @@ GEM
      activesupport (>= 4)
    selectize-rails (0.12.6)
    semantic_range (3.0.0)
-    sentry-rails (5.17.3)
+    sentry-rails (5.18.1)
      railties (>= 5.0)
-      sentry-ruby (~> 5.17.3)
-    sentry-ruby (5.17.3)
+      sentry-ruby (~> 5.18.1)
+    sentry-ruby (5.18.1)
      bigdecimal
      concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.17.3)
-      sentry-ruby (~> 5.17.3)
+    sentry-sidekiq (5.18.1)
+      sentry-ruby (~> 5.18.1)
      sidekiq (>= 3.0)
    sexp_processor (4.17.0)
    shoulda-matchers (5.3.0)
      activesupport (>= 5.2.0)
-    sidekiq (7.2.4)
+    sidekiq (7.3.0)
      concurrent-ruby (< 2)
      connection_pool (>= 2.3.0)
+      logger
      rack (>= 2.2.4)
-      redis-client (>= 0.19.0)
+      redis-client (>= 0.22.2)
    sidekiq-cron (1.12.0)
      fugit (~> 1.8)
      globalid (>= 1.0.1)
@@ -762,7 +737,7 @@ GEM
    strscan (3.1.0)
    telephone_number (1.4.20)
    test-prof (1.2.1)
-    thor (1.3.1)
+    thor (1.3.0)
    tilt (2.3.0)
    time_diff (0.3.0)
      activesupport
@@ -787,12 +762,11 @@ GEM
    unf_ext (0.0.8.2)
    unicode-display_width (2.4.2)
    uniform_notifier (1.16.0)
-    uri (0.13.0)
    uri_template (0.7.0)
    valid_email2 (4.0.6)
      activemodel (>= 3.2)
      mail (~> 2.5)
-    version_gem (1.1.4)
+    version_gem (1.1.3)
    warden (1.2.9)
      rack (>= 2.0.9)
    web-console (4.2.1)
@@ -800,8 +774,7 @@ GEM
      activemodel (>= 6.0.0)
      bindex (>= 0.4.0)
      railties (>= 6.0.0)
-    web-push (3.0.0)
-      hkdf (~> 1.0)
+    web-push (3.0.1)
      jwt (~> 2.0)
      openssl (~> 3.0)
    webmock (3.18.1)
@@ -821,18 +794,10 @@ GEM
    working_hours (1.4.1)
      activesupport (>= 3.2)
      tzinfo
-    zeitwerk (2.6.14)
+    zeitwerk (2.6.16)

 PLATFORMS
-  arm64-darwin-20
-  arm64-darwin-21
-  arm64-darwin-22
-  ruby
-  x86_64-darwin-18
-  x86_64-darwin-20
-  x86_64-darwin-21
-  x86_64-darwin-22
-  x86_64-linux
+  arm64-darwin-23

 DEPENDENCIES
  active_record_query_trace
@@ -863,7 +828,7 @@ DEPENDENCIES
  devise (>= 4.9.4)
  devise-secure_password!
  devise_token_auth (>= 1.2.3)
-  dotenv-rails
+  dotenv-rails (>= 3.0.0)
  down
  elastic-apm
  email_reply_trimmer
@@ -918,13 +883,13 @@ DEPENDENCIES
  rack-cors (= 2.0.0)
  rack-mini-profiler (>= 3.2.0)
  rack-timeout
-  rails (~> 7.0.8.1)
+  rails (~> 7.0.8.4)
  redis
  redis-namespace
  responders (>= 3.1.1)
  rest-client
  reverse_markdown
-  rspec-rails
+  rspec-rails (>= 6.1.3)
  rspec_junit_formatter
  rubocop
  rubocop-performance
@@ -933,11 +898,11 @@ DEPENDENCIES
  scout_apm
  scss_lint
  seed_dump
-  sentry-rails (>= 5.14.0)
+  sentry-rails (>= 5.18.1)
  sentry-ruby
-  sentry-sidekiq (>= 5.15.0)
+  sentry-sidekiq (>= 5.18.1)
  shoulda-matchers
-  sidekiq (>= 7.2.4)
+  sidekiq (>= 7.3.0)
  sidekiq-cron (>= 1.12.0)
  simplecov (= 0.17.1)
  slack-ruby-client (~> 2.2.0)
@@ -955,14 +920,14 @@ DEPENDENCIES
  uglifier
  valid_email2
  web-console (>= 4.2.1)
-  web-push
+  web-push (>= 3.0.1)
  webmock
  webpacker
  wisper (= 2.0.0)
  working_hours

 RUBY VERSION
-   ruby 3.2.2p185
+   ruby 3.3.3p89

 BUNDLED WITH
-   2.4.6
+   2.5.14
@@ -1 +1 @@
-3.3.1
+3.9.0
@@ -1 +1 @@
-2.7.0
+2.8.0
@@ -0,0 +1,30 @@
+class V2::BaseConversationReportBuilder
+  pattr_initialize :account, :params
+
+  private
+
+  AVG_METRICS = %w[avg_first_response_time avg_resolution_time reply_time].freeze
+  COUNT_METRICS = %w[
+    conversations_count
+    incoming_messages_count
+    outgoing_messages_count
+    resolutions_count
+    bot_resolutions_count
+    bot_handoffs_count
+  ].freeze
+
+  def builder_class(metric)
+    case metric
+    when *AVG_METRICS
+      V2::Reports::Timeseries::AverageReportBuilder
+    when *COUNT_METRICS
+      V2::Reports::Timeseries::CountReportBuilder
+    end
+  end
+
+  def log_invalid_metric
+    Rails.logger.error "ReportBuilder: Invalid metric - #{params[:metric]}"
+
+    {}
+  end
+end
@@ -0,0 +1,30 @@
+class V2::ConversationMetricBuilder < V2::BaseConversationReportBuilder
+  def summary
+    {
+      conversations_count: count('conversations_count'),
+      incoming_messages_count: count('incoming_messages_count'),
+      outgoing_messages_count: count('outgoing_messages_count'),
+      avg_first_response_time: count('avg_first_response_time'),
+      avg_resolution_time: count('avg_resolution_time'),
+      resolutions_count: count('resolutions_count'),
+      reply_time: count('reply_time')
+    }
+  end
+
+  def bot_summary
+    {
+      bot_resolutions_count: count('bot_resolutions_count'),
+      bot_handoffs_count: count('bot_handoffs_count')
+    }
+  end
+
+  private
+
+  def count(metric)
+    builder_class(metric).new(account, builder_params(metric)).aggregate_value
+  end
+
+  def builder_params(metric)
+    params.merge({ metric: metric })
+  end
+end
@@ -0,0 +1,25 @@
+class V2::ConversationReportBuilder < V2::BaseConversationReportBuilder
+  include DateRangeHelper
+
+  pattr_initialize :account, :params
+
+  def timeseries
+    perform_action(:timeseries)
+  end
+
+  def aggregate_value
+    perform_action(:aggregate_value)
+  end
+
+  private
+
+  def perform_action(method_name)
+    return builder.new(account, params).public_send(method_name) if builder.present?
+
+    log_invalid_metric
+  end
+
+  def builder
+    builder_class(params[:metric])
+  end
+end
@@ -3,6 +3,7 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder

  def build
    set_grouped_conversations_count
+    set_grouped_resolved_conversations_count
    set_grouped_avg_reply_time
    set_grouped_avg_first_response_time
    set_grouped_avg_resolution_time
@@ -27,6 +28,15 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
  end

+  def set_grouped_resolved_conversations_count
+    @grouped_resolved_conversations_count = reporting_events
+                                            .where(name: 'conversation_resolved')
+                                            .select(group_by_key, :conversation_id)
+                                            .distinct
+                                            .group(group_by_key)
+                                            .count(:conversation_id)
+  end
+
  def group_by_key
    :user_id
  end
@@ -37,12 +47,14 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder

  def prepare_report
    account.account_users.each_with_object([]) do |account_user, arr|
+      user_id = account_user.user_id
      arr << {
-        id: account_user.user_id,
-        conversations_count: @grouped_conversations_count[account_user.user_id],
-        avg_resolution_time: @grouped_avg_resolution_time[account_user.user_id],
-        avg_first_response_time: @grouped_avg_first_response_time[account_user.user_id],
-        avg_reply_time: @grouped_avg_reply_time[account_user.user_id]
+        id: user_id,
+        conversations_count: @grouped_conversations_count[user_id],
+        resolved_conversations_count: @grouped_resolved_conversations_count[user_id],
+        avg_resolution_time: @grouped_avg_resolution_time[user_id],
+        avg_first_response_time: @grouped_avg_first_response_time[user_id],
+        avg_reply_time: @grouped_avg_reply_time[user_id]
      }
    end
  end
@@ -0,0 +1,65 @@
+class V2::Reports::InboxSummaryBuilder < V2::Reports::BaseSummaryBuilder
+  pattr_initialize [:account!, :params!]
+
+  def build
+    set_grouped_conversations_count
+    set_grouped_resolved_conversations_count
+    set_grouped_avg_reply_time
+    set_grouped_avg_first_response_time
+    set_grouped_avg_resolution_time
+    prepare_report
+  end
+
+  private
+
+  def set_grouped_conversations_count
+    @grouped_conversations_count = Current.account.conversations.where(created_at: range).group('inbox_id').count
+  end
+
+  def set_grouped_avg_resolution_time
+    @grouped_avg_resolution_time = get_grouped_average(reporting_events.where(name: 'conversation_resolved'))
+  end
+
+  def set_grouped_avg_first_response_time
+    @grouped_avg_first_response_time = get_grouped_average(reporting_events.where(name: 'first_response'))
+  end
+
+  def set_grouped_avg_reply_time
+    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
+  end
+
+  def set_grouped_resolved_conversations_count
+    @grouped_resolved_conversations_count = reporting_events
+                                            .where(name: 'conversation_resolved')
+                                            .select(group_by_key, :conversation_id)
+                                            .distinct
+                                            .group(group_by_key)
+                                            .count(:conversation_id)
+  end
+
+  def group_by_key
+    :inbox_id
+  end
+
+  def reporting_events
+    @reporting_events ||= Current.account.reporting_events.where(created_at: range)
+  end
+
+  def prepare_report
+    account.inboxes.each_with_object([]) do |inbox, arr|
+      inbox_id = inbox.id
+      arr << {
+        id: inbox_id,
+        conversations_count: @grouped_conversations_count[inbox_id],
+        resolved_conversations_count: @grouped_resolved_conversations_count[inbox_id],
+        avg_resolution_time: @grouped_avg_resolution_time[inbox_id],
+        avg_first_response_time: @grouped_avg_first_response_time[inbox_id],
+        avg_reply_time: @grouped_avg_reply_time[inbox_id]
+      }
+    end
+  end
+
+  def average_value_key
+    ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :value_in_business_hours : :value
+  end
+end
@@ -3,6 +3,7 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder

  def build
    set_grouped_conversations_count
+    set_grouped_resolved_conversations_count
    set_grouped_avg_reply_time
    set_grouped_avg_first_response_time
    set_grouped_avg_resolution_time
@@ -27,6 +28,15 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
  end

+  def set_grouped_resolved_conversations_count
+    @grouped_resolved_conversations_count = reporting_events
+                                            .where(name: 'conversation_resolved')
+                                            .select(group_by_key, :conversation_id)
+                                            .distinct
+                                            .group(group_by_key)
+                                            .count(:conversation_id)
+  end
+
  def reporting_events
    @reporting_events ||= Current.account.reporting_events.where(created_at: range).joins(:conversation)
  end
@@ -40,6 +50,7 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
      arr << {
        id: team.id,
        conversations_count: @grouped_conversations_count[team.id],
+        resolved_conversations_count: @grouped_resolved_conversations_count[team.id],
        avg_resolution_time: @grouped_avg_resolution_time[team.id],
        avg_first_response_time: @grouped_avg_first_response_time[team.id],
        avg_reply_time: @grouped_avg_reply_time[team.id]
@@ -0,0 +1,32 @@
+class Api::V1::Accounts::Google::AuthorizationsController < Api::V1::Accounts::BaseController
+  include GoogleConcern
+  before_action :check_authorization
+
+  def create
+    email = params[:authorization][:email]
+    redirect_url = google_client.auth_code.authorize_url(
+      {
+        redirect_uri: "#{base_url}/google/callback",
+        scope: 'email profile https://mail.google.com/',
+        response_type: 'code',
+        prompt: 'consent', # the oauth flow does not return a refresh token, this is supposed to fix it
+        access_type: 'offline', # the default is 'online'
+        client_id: GlobalConfigService.load('GOOGLE_OAUTH_CLIENT_ID', nil)
+      }
+    )
+
+    if redirect_url
+      cache_key = "google::#{email.downcase}"
+      ::Redis::Alfred.setex(cache_key, Current.account.id, 5.minutes)
+      render json: { success: true, url: redirect_url }
+    else
+      render json: { success: false }, status: :unprocessable_entity
+    end
+  end
+
+  private
+
+  def check_authorization
+    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
+  end
+end
@@ -88,6 +88,6 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
  end

  def permitted_params
-    params.permit(:team_id, :conversation_id, :issue_id, :link_id, :title, :description, :assignee_id, :priority, label_ids: [])
+    params.permit(:team_id, :project_id, :conversation_id, :issue_id, :link_id, :title, :description, :assignee_id, :priority, label_ids: [])
  end
 end
@@ -12,8 +12,8 @@ class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts
      }
    )
    if redirect_url
-      email = email.downcase
-      ::Redis::Alfred.setex(email, Current.account.id, 5.minutes)
+      cache_key = "microsoft::#{email.downcase}"
+      ::Redis::Alfred.setex(cache_key, Current.account.id, 5.minutes)
      render json: { success: true, url: redirect_url }
    else
      render json: { success: false }, status: :unprocessable_entity
@@ -0,0 +1,57 @@
+class Api::V2::Accounts::LiveReportsController < Api::V1::Accounts::BaseController
+  before_action :load_conversations, only: [:conversation_metrics, :grouped_conversation_metrics]
+  before_action :set_group_scope, only: [:grouped_conversation_metrics]
+
+  def conversation_metrics
+    render json: {
+      open: @conversations.open.count,
+      unattended: @conversations.open.unattended.count,
+      unassigned: @conversations.open.unassigned.count
+    }
+  end
+
+  def grouped_conversation_metrics
+    count_by_group = @conversations.open.group(@group_scope).count
+    unattended_by_group = @conversations.open.unattended.group(@group_scope).count
+    unassigned_by_group = @conversations.open.unassigned.group(@group_scope).count
+
+    group_metrics = count_by_group.map do |group_id, count|
+      metric = {
+        open: count,
+        unattended: unattended_by_group[group_id] || 0,
+        unassigned: unassigned_by_group[group_id] || 0
+      }
+      metric[@group_scope] = group_id
+      metric
+    end
+
+    render json: group_metrics
+  end
+
+  private
+
+  def set_group_scope
+    render json: { error: 'invalid group_by' }, status: :unprocessable_entity and return unless %w[
+      team_id
+      assignee_id
+    ].include?(permitted_params[:group_by])
+
+    @group_scope = permitted_params[:group_by]
+  end
+
+  def team
+    return unless permitted_params[:team_id]
+
+    @team ||= Current.account.teams.find(permitted_params[:team_id])
+  end
+
+  def load_conversations
+    scope = Current.account.conversations
+    scope = scope.where(team_id: team.id) if team.present?
+    @conversations = scope
+  end
+
+  def permitted_params
+    params.permit(:team_id, :group_by)
+  end
+end
@@ -1,6 +1,6 @@
 class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseController
  before_action :check_authorization
-  before_action :prepare_builder_params, only: [:agent, :team]
+  before_action :prepare_builder_params, only: [:agent, :team, :inbox]

  def agent
    render_report_with(V2::Reports::AgentSummaryBuilder)
@@ -10,6 +10,10 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
    render_report_with(V2::Reports::TeamSummaryBuilder)
  end

+  def inbox
+    render_report_with(V2::Reports::InboxSummaryBuilder)
+  end
+
  private

  def check_authorization
@@ -0,0 +1,20 @@
+module GoogleConcern
+  extend ActiveSupport::Concern
+
+  def google_client
+    app_id = GlobalConfigService.load('GOOGLE_OAUTH_CLIENT_ID', nil)
+    app_secret = GlobalConfigService.load('GOOGLE_OAUTH_CLIENT_SECRET', nil)
+
+    ::OAuth2::Client.new(app_id, app_secret, {
+                           site: 'https://oauth2.googleapis.com',
+                           authorize_url: 'https://accounts.google.com/o/oauth2/auth',
+                           token_url: 'https://accounts.google.com/o/oauth2/token'
+                         })
+  end
+
+  private
+
+  def base_url
+    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
+  end
+end
@@ -15,10 +15,6 @@ module MicrosoftConcern

  private

-  def parsed_body
-    @parsed_body ||= Rack::Utils.parse_nested_query(@response.raw_response.body)
-  end
-
  def base_url
    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
  end
@@ -3,6 +3,7 @@ class DashboardController < ActionController::Base

  before_action :set_application_pack
  before_action :set_global_config
+  before_action :set_dashboard_scripts
  around_action :switch_locale
  before_action :ensure_installation_onboarding, only: [:index]
  before_action :render_hc_if_custom_domain, only: [:index]
@@ -35,6 +36,10 @@ class DashboardController < ActionController::Base
    ).merge(app_config)
  end

+  def set_dashboard_scripts
+    @dashboard_scripts = sensitive_path? ? nil : GlobalConfig.get_value('DASHBOARD_SCRIPTS')
+  end
+
  def ensure_installation_onboarding
    redirect_to '/installation/onboarding' if ::Redis::Alfred.get(::Redis::Alfred::CHATWOOT_INSTALLATION_ONBOARDING)
  end
@@ -70,4 +75,14 @@ class DashboardController < ActionController::Base
                          'application'
                        end
  end
+
+  def sensitive_path?
+    # dont load dashboard scripts on sensitive paths like password reset
+    sensitive_paths = [edit_user_password_path].freeze
+
+    # remove app prefix
+    current_path = request.path.gsub(%r{^/app}, '')
+
+    sensitive_paths.include?(current_path)
+  end
 end
@@ -0,0 +1,18 @@
+class Google::CallbacksController < OauthCallbackController
+  include GoogleConcern
+
+  private
+
+  def provider_name
+    'google'
+  end
+
+  def imap_address
+    'imap.gmail.com'
+  end
+
+  def oauth_client
+    # from GoogleConcern
+    google_client
+  end
+end
@@ -1,77 +1,17 @@
-class Microsoft::CallbacksController < ApplicationController
+class Microsoft::CallbacksController < OauthCallbackController
  include MicrosoftConcern

-  def show
-    @response = microsoft_client.auth_code.get_token(
-      oauth_code,
-      redirect_uri: "#{base_url}/microsoft/callback"
-    )
-
-    inbox = find_or_create_inbox
-    ::Redis::Alfred.delete(users_data['email'].downcase)
-    redirect_to app_microsoft_inbox_agents_url(account_id: account.id, inbox_id: inbox.id)
-  rescue StandardError => e
-    ChatwootExceptionTracker.new(e).capture_exception
-    redirect_to '/'
-  end
-
  private

-  def oauth_code
-    params[:code]
+  def oauth_client
+    microsoft_client
  end

-  def users_data
-    decoded_token = JWT.decode parsed_body[:id_token], nil, false
-    decoded_token[0]
+  def provider_name
+    'microsoft'
  end

-  def parsed_body
-    @parsed_body ||= @response.response.parsed
-  end
-
-  def account_id
-    ::Redis::Alfred.get(users_data['email'].downcase)
-  end
-
-  def account
-    @account ||= Account.find(account_id)
-  end
-
-  def find_or_create_inbox
-    channel_email = Channel::Email.find_by(email: users_data['email'], account: account)
-    channel_email ||= create_microsoft_channel_with_inbox
-    update_microsoft_channel(channel_email)
-    channel_email.inbox
-  end
-
-  # Fallback name, for when name field is missing from users_data
-  def fallback_name
-    users_data['email'].split('@').first.parameterize.titleize
-  end
-
-  def create_microsoft_channel_with_inbox
-    ActiveRecord::Base.transaction do
-      channel_email = Channel::Email.create!(email: users_data['email'], account: account)
-      account.inboxes.create!(
-        account: account,
-        channel: channel_email,
-        name: users_data['name'] || fallback_name
-      )
-      channel_email
-    end
-  end
-
-  def update_microsoft_channel(channel_email)
-    channel_email.update!({
-                            imap_login: users_data['email'], imap_address: 'outlook.office365.com',
-                            imap_port: '993', imap_enabled: true,
-                            provider: 'microsoft',
-                            provider_config: {
-                              access_token: parsed_body['access_token'],
-                              refresh_token: parsed_body['refresh_token'],
-                              expires_on: (Time.current.utc + 1.hour).to_s
-                            }
-                          })
+  def imap_address
+    'outlook.office365.com'
  end
 end
@@ -0,0 +1,108 @@
+class OauthCallbackController < ApplicationController
+  def show
+    @response = oauth_client.auth_code.get_token(
+      oauth_code,
+      redirect_uri: "#{base_url}/#{provider_name}/callback"
+    )
+
+    handle_response
+    ::Redis::Alfred.delete(cache_key)
+  rescue StandardError => e
+    ChatwootExceptionTracker.new(e).capture_exception
+    redirect_to '/'
+  end
+
+  private
+
+  def handle_response
+    inbox, already_exists = find_or_create_inbox
+
+    if already_exists
+      redirect_to app_email_inbox_settings_url(account_id: account.id, inbox_id: inbox.id)
+    else
+      redirect_to app_email_inbox_agents_url(account_id: account.id, inbox_id: inbox.id)
+    end
+  end
+
+  def find_or_create_inbox
+    channel_email = Channel::Email.find_by(email: users_data['email'], account: account)
+    # we need this value to know where to redirect on sucessful processing of the callback
+    channel_exists = channel_email.present?
+
+    channel_email ||= create_channel_with_inbox
+    update_channel(channel_email)
+
+    # reauthorize channel, this code path only triggers when microsoft auth is successful
+    # reauthorized will also update cache keys for the associated inbox
+    channel_email.reauthorized!
+
+    [channel_email.inbox, channel_exists]
+  end
+
+  def update_channel(channel_email)
+    channel_email.update!({
+                            imap_login: users_data['email'], imap_address: imap_address,
+                            imap_port: '993', imap_enabled: true,
+                            provider: provider_name,
+                            provider_config: {
+                              access_token: parsed_body['access_token'],
+                              refresh_token: parsed_body['refresh_token'],
+                              expires_on: (Time.current.utc + 1.hour).to_s
+                            }
+                          })
+  end
+
+  def provider_name
+    raise NotImplementedError
+  end
+
+  def oauth_client
+    raise NotImplementedError
+  end
+
+  def cache_key
+    "#{provider_name}::#{users_data['email'].downcase}"
+  end
+
+  def create_channel_with_inbox
+    ActiveRecord::Base.transaction do
+      channel_email = Channel::Email.create!(email: users_data['email'], account: account)
+      account.inboxes.create!(
+        account: account,
+        channel: channel_email,
+        name: users_data['name'] || fallback_name
+      )
+      channel_email
+    end
+  end
+
+  def users_data
+    decoded_token = JWT.decode parsed_body[:id_token], nil, false
+    decoded_token[0]
+  end
+
+  def account_id
+    ::Redis::Alfred.get(cache_key)
+  end
+
+  def account
+    @account ||= Account.find(account_id)
+  end
+
+  # Fallback name, for when name field is missing from users_data
+  def fallback_name
+    users_data['email'].split('@').first.parameterize.titleize
+  end
+
+  def oauth_code
+    params[:code]
+  end
+
+  def base_url
+    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
+  end
+
+  def parsed_body
+    @parsed_body ||= @response.response.parsed
+  end
+end
@@ -40,7 +40,7 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
                       when 'email'
                         ['MAILER_INBOUND_EMAIL_DOMAIN']
                       else
-                         %w[ENABLE_ACCOUNT_SIGNUP]
+                         %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS]
                       end
  end
 end
@@ -94,7 +94,8 @@ module Api::V2::Accounts::HeatmapHelper
  end

  def since_timestamp(date)
-    (date - 6.days).to_i.to_s
+    number_of_days = params[:days_before].present? ? params[:days_before].to_i.days : 6.days
+    (date - number_of_days).to_i.to_s
  end

  def until_timestamp(date)
@@ -1,11 +0,0 @@
-import App from './App';
-import '../../test-matchers';
-
-describe(`App component`, () => {
-  it(`should be a component`, () => {
-    // Arrange
-    // Act
-    expect(App).toBeVueComponent('App');
-    // Assert
-  });
-});
@@ -27,6 +27,7 @@

 <script>
 import { mapGetters } from 'vuex';
+import router from '../dashboard/routes';
 import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
 import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification.vue';
@@ -43,6 +44,7 @@ import {
  registerSubscription,
  verifyServiceWorkerExistence,
 } from './helper/pushHelper';
+import ReconnectService from 'dashboard/helper/ReconnectService';

 export default {
  name: 'App',
@@ -64,6 +66,7 @@ export default {
    return {
      showAddAccountModal: false,
      latestChatwootVersion: null,
+      reconnectService: null,
    };
  },

@@ -102,6 +105,11 @@ export default {
    this.listenToThemeChanges();
    this.setLocale(window.chatwootConfig.selectedLocale);
  },
+  beforeDestroy() {
+    if (this.reconnectService) {
+      this.reconnectService.disconnect();
+    }
+  },
  methods: {
    initializeColorTheme() {
      setColorTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
@@ -125,6 +133,7 @@ export default {
      this.updateRTLDirectionView(locale);
      this.latestChatwootVersion = latestChatwootVersion;
      vueActionCable.init(pubsubToken);
+      this.reconnectService = new ReconnectService(this.$store, router);

      verifyServiceWorkerExistence(registration =>
        registration.pushManager.getSubscription().then(subscription => {
@@ -9,6 +9,13 @@ class AccountAPI extends ApiClient {
  createAccount(data) {
    return axios.post(`${this.apiVersion}/accounts`, data);
  }
+
+  async getCacheKeys() {
+    const response = await axios.get(
+      `/api/v1/accounts/${this.accountIdFromRoute}/cache_keys`
+    );
+    return response.data.cache_keys;
+  }
 }

 export default new AccountAPI();
@@ -0,0 +1,14 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class MicrosoftClient extends ApiClient {
+  constructor() {
+    super('google', { accountScoped: true });
+  }
+
+  generateAuthorization(payload) {
+    return axios.post(`${this.url}/authorization`, payload);
+  }
+}
+
+export default new MicrosoftClient();
@@ -15,10 +15,10 @@ describe('#enterpriseAccountAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -15,6 +15,7 @@ class ConversationApi extends ApiClient {
    teamId,
    conversationType,
    sortBy,
+    updatedWithin,
  }) {
    return axios.get(this.url, {
      params: {
@@ -26,6 +27,7 @@ class ConversationApi extends ApiClient {
        labels,
        conversation_type: conversationType,
        sort_by: sortBy,
+        updated_within: updatedWithin,
      },
    });
  }
@@ -0,0 +1,47 @@
+/* global axios */
+
+import ApiClient from '../ApiClient';
+
+class LinearAPI extends ApiClient {
+  constructor() {
+    super('integrations/linear', { accountScoped: true });
+  }
+
+  getTeams() {
+    return axios.get(`${this.url}/teams`);
+  }
+
+  getTeamEntities(teamId) {
+    return axios.get(`${this.url}/team_entities?team_id=${teamId}`);
+  }
+
+  createIssue(data) {
+    return axios.post(`${this.url}/create_issue`, data);
+  }
+
+  link_issue(conversationId, issueId, title) {
+    return axios.post(`${this.url}/link_issue`, {
+      issue_id: issueId,
+      conversation_id: conversationId,
+      title: title,
+    });
+  }
+
+  getLinkedIssue(conversationId) {
+    return axios.get(
+      `${this.url}/linked_issues?conversation_id=${conversationId}`
+    );
+  }
+
+  unlinkIssue(linkId) {
+    return axios.post(`${this.url}/unlink_issue`, {
+      link_id: linkId,
+    });
+  }
+
+  searchIssues(query) {
+    return axios.get(`${this.url}/search_issue?q=${query}`);
+  }
+}
+
+export default new LinearAPI();
@@ -0,0 +1,20 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class LiveReportsAPI extends ApiClient {
+  constructor() {
+    super('live_reports', { accountScoped: true, apiVersion: 'v2' });
+  }
+
+  getConversationMetric(params = {}) {
+    return axios.get(`${this.url}/conversation_metrics`, { params });
+  }
+
+  getGroupedConversations({ groupBy } = { groupBy: 'assignee_id' }) {
+    return axios.get(`${this.url}/grouped_conversation_metrics`, {
+      params: { group_by: groupBy },
+    });
+  }
+}
+
+export default new LiveReportsAPI();
@@ -61,9 +61,9 @@ class ReportsAPI extends ApiClient {
    });
  }

-  getConversationTrafficCSV() {
+  getConversationTrafficCSV({ daysBefore = 6 } = {}) {
    return axios.get(`${this.url}/conversation_traffic`, {
-      params: { timezone_offset: getTimeOffset() },
+      params: { timezone_offset: getTimeOffset(), days_before: daysBefore },
    });
  }

@@ -15,10 +15,10 @@ describe('#accountAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -10,10 +10,10 @@ describe('#ContactsAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -14,7 +14,7 @@ describe('#AgentAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -14,10 +14,10 @@ describe('#PortalAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -44,10 +44,10 @@ describe('#PortalAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -71,10 +71,10 @@ describe('#PortalAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -98,10 +98,10 @@ describe('#PortalAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -129,10 +129,10 @@ describe('#PortalAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -4,10 +4,10 @@ describe('#AssignableAgentsAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -13,10 +13,10 @@ describe('#FBChannel', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -17,10 +17,10 @@ describe('#ContactsAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -16,10 +16,10 @@ describe('#ConversationApi', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -11,10 +11,10 @@ describe('#Reports API', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -24,10 +24,10 @@ describe('#ConversationAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -46,6 +46,7 @@ describe('#ConversationAPI', () => {
        page: 1,
        labels: [],
        teamId: 1,
+        updatedWithin: 20,
      });
      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/conversations', {
        params: {
@@ -55,6 +56,7 @@ describe('#ConversationAPI', () => {
          assignee_type: 'me',
          page: 1,
          labels: [],
+          updated_within: 20,
        },
      });
    });
@@ -15,10 +15,10 @@ describe('#ConversationAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -17,10 +17,10 @@ describe('#InboxesAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -18,10 +18,10 @@ describe('#integrationAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -11,10 +11,10 @@ describe('#accountAPI', () => {
  describe('createAMeeting', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -39,10 +39,10 @@ describe('#accountAPI', () => {
  describe('addParticipantToMeeting', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -0,0 +1,202 @@
+import LinearAPIClient from '../../integrations/linear';
+import ApiClient from '../../ApiClient';
+
+describe('#linearAPI', () => {
+  it('creates correct instance', () => {
+    expect(LinearAPIClient).toBeInstanceOf(ApiClient);
+    expect(LinearAPIClient).toHaveProperty('getTeams');
+    expect(LinearAPIClient).toHaveProperty('getTeamEntities');
+    expect(LinearAPIClient).toHaveProperty('createIssue');
+    expect(LinearAPIClient).toHaveProperty('link_issue');
+    expect(LinearAPIClient).toHaveProperty('getLinkedIssue');
+    expect(LinearAPIClient).toHaveProperty('unlinkIssue');
+    expect(LinearAPIClient).toHaveProperty('searchIssues');
+  });
+
+  describe('getTeams', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('creates a valid request', () => {
+      LinearAPIClient.getTeams();
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/teams'
+      );
+    });
+  });
+
+  describe('getTeamEntities', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('creates a valid request', () => {
+      LinearAPIClient.getTeamEntities(1);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/team_entities?team_id=1'
+      );
+    });
+  });
+
+  describe('createIssue', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('creates a valid request', () => {
+      const issueData = {
+        title: 'New Issue',
+        description: 'Issue description',
+      };
+      LinearAPIClient.createIssue(issueData);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/create_issue',
+        issueData
+      );
+    });
+  });
+
+  describe('link_issue', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('creates a valid request', () => {
+      LinearAPIClient.link_issue(1, 2);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/link_issue',
+        {
+          issue_id: 2,
+          conversation_id: 1,
+        }
+      );
+    });
+  });
+
+  describe('getLinkedIssue', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('creates a valid request', () => {
+      LinearAPIClient.getLinkedIssue(1);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/linked_issues?conversation_id=1'
+      );
+    });
+  });
+
+  describe('unlinkIssue', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('creates a valid request', () => {
+      LinearAPIClient.unlinkIssue(1);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/unlink_issue',
+        {
+          link_id: 1,
+        }
+      );
+    });
+  });
+
+  describe('searchIssues', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('creates a valid request', () => {
+      LinearAPIClient.searchIssues('query');
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/search_issue?q=query'
+      );
+    });
+  });
+});
@@ -13,10 +13,10 @@ describe('#NotificationAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -20,10 +20,10 @@ describe('#Reports API', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -12,10 +12,10 @@ describe('#SLAReports API', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -16,10 +16,10 @@ describe('#TeamsAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -0,0 +1,40 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class SummaryReportsAPI extends ApiClient {
+  constructor() {
+    super('summary_reports', { accountScoped: true, apiVersion: 'v2' });
+  }
+
+  getTeamReports({ since, until, businessHours } = {}) {
+    return axios.get(`${this.url}/team`, {
+      params: {
+        since,
+        until,
+        business_hours: businessHours,
+      },
+    });
+  }
+
+  getAgentReports({ since, until, businessHours } = {}) {
+    return axios.get(`${this.url}/agent`, {
+      params: {
+        since,
+        until,
+        business_hours: businessHours,
+      },
+    });
+  }
+
+  getInboxReports({ since, until, businessHours } = {}) {
+    return axios.get(`${this.url}/inbox`, {
+      params: {
+        since,
+        until,
+        business_hours: businessHours,
+      },
+    });
+  }
+}
+
+export default new SummaryReportsAPI();
@@ -1,6 +1,6 @@
 <template>
  <button
-    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
+    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
    @click="$emit('click')"
  >
    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
@@ -111,15 +111,6 @@
        @updateFolder="onUpdateSavedFilter"
      />
    </woot-modal>
-    <woot-modal
-      :show.sync="showCustomSnoozeModal"
-      :on-close="hideCustomSnoozeModal"
-    >
-      <custom-snooze-modal
-        @close="hideCustomSnoozeModal"
-        @choose-time="chooseSnoozeTime"
-      />
-    </woot-modal>
  </div>
 </template>

@@ -152,10 +143,6 @@ import {
  isOnUnattendedView,
 } from '../store/modules/conversations/helpers/actionHelpers';
 import { CONVERSATION_EVENTS } from '../helper/AnalyticsHelper/events';
-import { CMD_SNOOZE_CONVERSATION } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
-import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
-import { getUnixTime } from 'date-fns';
-import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
 import IntersectionObserver from './IntersectionObserver.vue';

 export default {
@@ -170,7 +157,6 @@ export default {
    ConversationBulkActions,
    IntersectionObserver,
    VirtualList,
-    CustomSnoozeModal,
  },
  mixins: [
    timeMixin,
@@ -247,7 +233,6 @@ export default {
        root: this.$refs.conversationList,
        rootMargin: '100px 0px 100px 0px',
      },
-      showCustomSnoozeModal: false,

      itemComponent: ConversationItem,
      // virtualListExtraProps is to pass the props to the conversationItem component.
@@ -268,6 +253,7 @@ export default {
      chatLists: 'getAllConversations',
      mineChatsList: 'getMineChats',
      allChatList: 'getAllStatusChats',
+      chatListFilters: 'getChatListFilters',
      unAssignedChatsList: 'getUnAssignedChats',
      chatListLoading: 'getChatListLoadingStatus',
      currentUserID: 'getCurrentUserID',
@@ -282,7 +268,6 @@ export default {
      campaigns: 'campaigns/getAllCampaigns',
      labels: 'labels/getLabels',
      selectedConversations: 'bulkActions/getSelectedConversationIds',
-      contextMenuChatId: 'getContextMenuChatId',
    }),
    hasAppliedFilters() {
      return this.appliedFilters.length !== 0;
@@ -293,13 +278,6 @@ export default {
    hasAppliedFiltersOrActiveFolders() {
      return this.hasAppliedFilters || this.hasActiveFolders;
    },
-    savedFoldersValue() {
-      if (this.hasActiveFolders) {
-        const payload = this.activeFolder.query;
-        this.fetchSavedFilteredConversations(payload);
-      }
-      return {};
-    },
    showEndOfListMessage() {
      return (
        this.conversationList.length &&
@@ -375,7 +353,6 @@ export default {
        labels: this.label ? [this.label] : undefined,
        teamId: this.teamId || undefined,
        conversationType: this.conversationType || undefined,
-        folders: this.hasActiveFolders ? this.savedFoldersValue : undefined,
      };
    },
    conversationListPagination() {
@@ -488,7 +465,13 @@ export default {
      this.resetAndFetchData();
      this.updateVirtualListProps('conversationType', this.conversationType);
    },
-    activeFolder() {
+    activeFolder(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.$store.dispatch(
+          'customViews/setActiveConversationFolder',
+          newVal || null
+        );
+      }
      this.resetAndFetchData();
      this.updateVirtualListProps('foldersId', this.foldersId);
    },
@@ -498,8 +481,14 @@ export default {
    showAssigneeInConversationCard(newVal) {
      this.updateVirtualListProps('showAssignee', newVal);
    },
+    conversationFilters(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.$store.dispatch('updateChatListFilters', newVal);
+      }
+    },
  },
  mounted() {
+    this.$store.dispatch('setChatListFilters', this.conversationFilters);
    this.setFiltersFromUISettings();
    this.$store.dispatch('setChatStatusFilter', this.activeStatus);
    this.$store.dispatch('setChatSortFilter', this.activeSortBy);
@@ -509,14 +498,9 @@ export default {
      this.$store.dispatch('campaigns/get');
    }

-    bus.$on('fetch_conversation_stats', () => {
+    this.$emitter.on('fetch_conversation_stats', () => {
      this.$store.dispatch('conversationStats/get', this.conversationFilters);
    });
-
-    bus.$on(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
-  },
-  beforeDestroy() {
-    bus.$off(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
  },
  methods: {
    updateVirtualListProps(key, value) {
@@ -695,8 +679,9 @@ export default {
      this.fetchConversations();
    },
    fetchConversations() {
+      this.$store.dispatch('updateChatListFilters', this.conversationFilters);
      this.$store
-        .dispatch('fetchAllConversations', this.conversationFilters)
+        .dispatch('fetchAllConversations')
        .then(this.emitConversationLoaded);
    },
    loadMoreConversations() {
@@ -736,7 +721,7 @@ export default {
    updateAssigneeTab(selectedTab) {
      if (this.activeAssigneeTab !== selectedTab) {
        this.resetBulkActions();
-        bus.$emit('clearSearchInput');
+        this.$emitter.emit('clearSearchInput');
        this.activeAssigneeTab = selectedTab;
        if (!this.currentPage) {
          this.fetchConversations();
@@ -993,43 +978,6 @@ export default {
    onContextMenuToggle(state) {
      this.isContextMenuOpen = state;
    },
-    onCmdSnoozeConversation(snoozeType) {
-      if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
-        this.showCustomSnoozeModal = true;
-      } else {
-        this.toggleStatus(
-          wootConstants.STATUS_TYPE.SNOOZED,
-          findSnoozeTime(snoozeType) || null
-        );
-      }
-    },
-    chooseSnoozeTime(customSnoozeTime) {
-      this.showCustomSnoozeModal = false;
-      if (customSnoozeTime) {
-        this.toggleStatus(
-          wootConstants.STATUS_TYPE.SNOOZED,
-          getUnixTime(customSnoozeTime)
-        );
-      }
-    },
-    toggleStatus(status, snoozedUntil) {
-      this.$store
-        .dispatch('toggleStatus', {
-          conversationId: this.currentChat?.id || this.contextMenuChatId,
-          status,
-          snoozedUntil,
-        })
-        .then(() => {
-          this.$store.dispatch('setContextMenuChatId', null);
-          this.showAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
-        });
-    },
-    hideCustomSnoozeModal() {
-      // if we select custom snooze and then the custom snooze modal is open
-      // Then if the custom snooze modal is closed and set the context menu chat id to null
-      this.$store.dispatch('setContextMenuChatId', null);
-      this.showCustomSnoozeModal = false;
-    },
  },
 };
 </script>
@@ -25,8 +25,10 @@
 <script>
 import 'highlight.js/styles/default.css';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import alertMixin from 'shared/mixins/alertMixin';

 export default {
+  mixins: [alertMixin],
  props: {
    script: {
      type: String,
@@ -59,7 +61,7 @@ export default {
    async onCopy(e) {
      e.preventDefault();
      await copyTextToClipboard(this.script);
-      bus.$emit('newToastMessage', this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+      this.showAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
    },
  },
 };
@@ -27,7 +27,7 @@
            />
          </span>
          <woot-button
-            v-if="showCopyAndDeleteButton"
+            v-if="showActions && value"
            v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
            variant="link"
            size="medium"
@@ -90,7 +90,7 @@
        </p>
        <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
          <woot-button
-            v-if="showCopyAndDeleteButton"
+            v-if="showActions && value"
            v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
            variant="link"
            size="small"
@@ -100,7 +100,7 @@
            @click="onCopy"
          />
          <woot-button
-            v-if="showEditButton"
+            v-if="showActions"
            v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
            variant="link"
            size="small"
@@ -174,12 +174,6 @@ export default {
    };
  },
  computed: {
-    showCopyAndDeleteButton() {
-      return this.value && this.showActions;
-    },
-    showEditButton() {
-      return !this.value && this.showActions;
-    },
    displayValue() {
      if (this.isAttributeTypeDate) {
        return this.value
@@ -276,10 +270,10 @@ export default {
  },
  mounted() {
    this.editedValue = this.formattedValue;
-    bus.$on(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
+    this.$emitter.on(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
  },
  destroyed() {
-    bus.$off(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
+    this.$emitter.off(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
  },
  methods: {
    onFocusAttribute(focusAttributeKey) {
@@ -18,8 +18,10 @@
 <script>
 import 'highlight.js/styles/default.css';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import alertMixin from 'shared/mixins/alertMixin';

 export default {
+  mixins: [alertMixin],
  props: {
    value: {
      type: String,
@@ -35,7 +37,7 @@ export default {
    async onCopy(e) {
      e.preventDefault();
      await copyTextToClipboard(this.value);
-      bus.$emit('newToastMessage', this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+      this.showAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
    },
    toggleMasked() {
      this.masked = !this.masked;
@@ -99,7 +99,9 @@ export default {
    onMouseUp() {
      if (this.mousedDownOnBackdrop) {
        this.mousedDownOnBackdrop = false;
-        this.onClose();
+        if (this.closeOnBackdropClick) {
+          this.onClose();
+        }
      }
    },
  },
@@ -1,26 +1,133 @@
+<script setup>
+import { ref, computed, onBeforeUnmount } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useRoute } from 'dashboard/composables/route';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import {
+  isAConversationRoute,
+  isAInboxViewRoute,
+  isNotificationRoute,
+} from 'dashboard/helper/routeHelpers';
+import { useEventListener } from '@vueuse/core';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const RECONNECTED_BANNER_TIMEOUT = 2000;
+
+const showNotification = ref(!navigator.onLine);
+const isDisconnected = ref(false);
+const isReconnecting = ref(false);
+const isReconnected = ref(false);
+let reconnectTimeout = null;
+
+const bannerText = computed(() => {
+  if (isReconnecting.value) return t('NETWORK.NOTIFICATION.RECONNECTING');
+  if (isReconnected.value) return t('NETWORK.NOTIFICATION.RECONNECT_SUCCESS');
+  return t('NETWORK.NOTIFICATION.OFFLINE');
+});
+
+const iconName = computed(() => (isReconnected.value ? 'wifi' : 'wifi-off'));
+const canRefresh = computed(
+  () => !isReconnecting.value && !isReconnected.value
+);
+
+const refreshPage = () => {
+  window.location.reload();
+};
+
+const closeNotification = () => {
+  showNotification.value = false;
+  isReconnected.value = false;
+  clearTimeout(reconnectTimeout);
+};
+
+const isInAnyOfTheRoutes = routeName => {
+  return (
+    isAConversationRoute(routeName, true) ||
+    isAInboxViewRoute(routeName, true) ||
+    isNotificationRoute(routeName, true)
+  );
+};
+
+const updateWebsocketStatus = () => {
+  isDisconnected.value = true;
+  showNotification.value = true;
+};
+
+const handleReconnectionCompleted = () => {
+  isDisconnected.value = false;
+  isReconnecting.value = false;
+  isReconnected.value = true;
+  showNotification.value = true;
+  reconnectTimeout = setTimeout(closeNotification, RECONNECTED_BANNER_TIMEOUT);
+};
+
+const handleReconnecting = () => {
+  if (isInAnyOfTheRoutes(route.name)) {
+    isReconnecting.value = true;
+    isReconnected.value = false;
+    showNotification.value = true;
+  } else {
+    handleReconnectionCompleted();
+  }
+};
+
+const updateOnlineStatus = event => {
+  // Case: Websocket is not disconnected
+  // If the app goes offline, show the notification
+  // If the app goes online, close the notification
+
+  // Case: Websocket is disconnected
+  // If the app goes offline, show the notification
+  // If the app goes online but the websocket is disconnected, don't close the notification
+  // If the app goes online and the websocket is not disconnected, close the notification
+
+  if (event.type === 'offline') {
+    showNotification.value = true;
+  } else if (event.type === 'online' && !isDisconnected.value) {
+    handleReconnectionCompleted();
+  }
+};
+
+useEventListener('online', updateOnlineStatus);
+useEventListener('offline', updateOnlineStatus);
+useEmitter(BUS_EVENTS.WEBSOCKET_DISCONNECT, updateWebsocketStatus);
+useEmitter(
+  BUS_EVENTS.WEBSOCKET_RECONNECT_COMPLETED,
+  handleReconnectionCompleted
+);
+useEmitter(BUS_EVENTS.WEBSOCKET_RECONNECT, handleReconnecting);
+
+onBeforeUnmount(() => {
+  clearTimeout(reconnectTimeout);
+});
+</script>
+
 <template>
  <transition name="network-notification-fade" tag="div">
-    <div v-show="showNotification" class="fixed top-4 left-2 z-50 group">
+    <div v-show="showNotification" class="fixed z-50 top-4 left-2 group">
      <div
-        class="flex items-center justify-between py-1 px-2 w-full rounded-lg shadow-lg bg-yellow-200 dark:bg-yellow-700 relative"
+        class="relative flex items-center justify-between w-full px-2 py-1 bg-yellow-200 rounded-lg shadow-lg dark:bg-yellow-700"
      >
        <fluent-icon
-          icon="wifi-off"
+          :icon="iconName"
          class="text-yellow-700/50 dark:text-yellow-50"
          size="18"
        />
        <span
-          class="text-xs tracking-wide font-medium px-2 text-yellow-700/70 dark:text-yellow-50"
+          class="px-2 text-xs font-medium tracking-wide text-yellow-700/70 dark:text-yellow-50"
        >
-          {{ $t('NETWORK.NOTIFICATION.OFFLINE') }}
+          {{ bannerText }}
        </span>
        <woot-button
+          v-if="canRefresh"
          :title="$t('NETWORK.BUTTON.REFRESH')"
          variant="clear"
          size="small"
          color-scheme="warning"
          icon="arrow-clockwise"
-          class="visible transition-all duration-500 ease-in-out ml-1"
          @click="refreshPage"
        />
        <woot-button
@@ -34,55 +141,3 @@
    </div>
  </transition>
 </template>
-
-<script>
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import { mapGetters } from 'vuex';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
-
-export default {
-  mixins: [globalConfigMixin],
-
-  data() {
-    return {
-      showNotification: !navigator.onLine,
-    };
-  },
-
-  computed: {
-    ...mapGetters({ globalConfig: 'globalConfig/get' }),
-  },
-
-  mounted() {
-    window.addEventListener('offline', this.updateOnlineStatus);
-    window.bus.$on(BUS_EVENTS.WEBSOCKET_DISCONNECT, () => {
-      // TODO: Remove this after completing the conversation list refetching
-      // TODO: DIRTY FIX : CLEAN UP THIS WITH PROPER FIX, DELAYING THE RECONNECT FOR NOW
-      // THE CABLE IS FIRING IS VERY COMMON AND THUS INTERFERING USER EXPERIENCE
-      setTimeout(() => {
-        this.updateOnlineStatus({ type: 'offline' });
-      }, 4000);
-    });
-  },
-
-  beforeDestroy() {
-    window.removeEventListener('offline', this.updateOnlineStatus);
-  },
-
-  methods: {
-    refreshPage() {
-      window.location.reload();
-    },
-
-    closeNotification() {
-      this.showNotification = false;
-    },
-
-    updateOnlineStatus(event) {
-      if (event.type === 'offline') {
-        this.showNotification = true;
-      }
-    },
-  },
-};
-</script>
@@ -21,7 +21,7 @@ export default {
  },
  methods: {
    onMenuItemClick() {
-      bus.$emit(BUS_EVENTS.TOGGLE_SIDEMENU);
+      this.$emitter.emit(BUS_EVENTS.TOGGLE_SIDEMENU);
    },
  },
 };
@@ -15,11 +15,13 @@

 <script>
 import WootSnackbar from './Snackbar.vue';
+import alertMixin from 'shared/mixins/alertMixin';

 export default {
  components: {
    WootSnackbar,
  },
+  mixins: [alertMixin],
  props: {
    duration: {
      type: Number,
@@ -34,10 +36,10 @@ export default {
  },

  mounted() {
-    bus.$on('newToastMessage', this.onNewToastMessage);
+    this.$emitter.on('newToastMessage', this.onNewToastMessage);
  },
  beforeDestroy() {
-    bus.$off('newToastMessage', this.onNewToastMessage);
+    this.$emitter.off('newToastMessage', this.onNewToastMessage);
  },
  methods: {
    onNewToastMessage(message, action) {
@@ -1,5 +1,5 @@
 <template>
-  <div class="resolve-actions relative flex items-center justify-end">
+  <div class="relative flex items-center justify-end resolve-actions">
    <div class="button-group">
      <woot-button
        v-if="isOpen"
@@ -128,12 +128,12 @@ export default {
    },
  },
  mounted() {
-    bus.$on(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
-    bus.$on(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
+    this.$emitter.on(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
+    this.$emitter.on(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
  },
  destroyed() {
-    bus.$off(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
-    bus.$off(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
+    this.$emitter.off(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
+    this.$emitter.off(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
  },
  methods: {
    getKeyboardEvents() {
@@ -20,7 +20,7 @@
      :teams="teams"
      :custom-views="customViews"
      :menu-config="activeSecondaryMenu"
-      :current-role="currentRole"
+      :current-user="currentUser"
      :is-on-chatwoot-cloud="isOnChatwootCloud"
      @add-label="showAddLabelPopup"
      @toggle-accounts="toggleAccountModal"
@@ -37,7 +37,8 @@ import alertMixin from 'shared/mixins/alertMixin';
 import PrimarySidebar from './sidebarComponents/Primary.vue';
 import SecondarySidebar from './sidebarComponents/Secondary.vue';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import router from '../../routes';
+import router, { routesWithPermissions } from '../../routes';
+import { hasPermissions } from '../../helper/permissionsHelper';

 export default {
  components: {
@@ -98,9 +99,13 @@ export default {
      return getSidebarItems(this.accountId);
    },
    primaryMenuItems() {
+      const userPermissions = this.currentUser.permissions;
      const menuItems = this.sideMenuConfig.primaryMenu;
      return menuItems.filter(menuItem => {
-        const isAvailableForTheUser = menuItem.roles.includes(this.currentRole);
+        const isAvailableForTheUser = hasPermissions(
+          routesWithPermissions[menuItem.toStateName],
+          userPermissions
+        );

        if (!isAvailableForTheUser) {
          return false;
@@ -9,7 +9,6 @@ const primaryMenuItems = accountId => [
    featureFlag: FEATURE_FLAGS.INBOX_VIEW,
    toState: frontendURL(`accounts/${accountId}/inbox-view`),
    toStateName: 'inbox_view',
-    roles: ['administrator', 'agent'],
  },
  {
    icon: 'chat',
@@ -17,7 +16,6 @@ const primaryMenuItems = accountId => [
    label: 'CONVERSATIONS',
    toState: frontendURL(`accounts/${accountId}/dashboard`),
    toStateName: 'home',
-    roles: ['administrator', 'agent'],
  },
  {
    icon: 'book-contacts',
@@ -26,7 +24,6 @@ const primaryMenuItems = accountId => [
    featureFlag: FEATURE_FLAGS.CRM,
    toState: frontendURL(`accounts/${accountId}/contacts`),
    toStateName: 'contacts_dashboard',
-    roles: ['administrator', 'agent'],
  },
  {
    icon: 'arrow-trending-lines',
@@ -34,8 +31,7 @@ const primaryMenuItems = accountId => [
    label: 'REPORTS',
    featureFlag: FEATURE_FLAGS.REPORTS,
    toState: frontendURL(`accounts/${accountId}/reports`),
-    toStateName: 'settings_account_reports',
-    roles: ['administrator'],
+    toStateName: 'account_overview_reports',
  },
  {
    icon: 'megaphone',
@@ -44,7 +40,6 @@ const primaryMenuItems = accountId => [
    featureFlag: FEATURE_FLAGS.CAMPAIGNS,
    toState: frontendURL(`accounts/${accountId}/campaigns`),
    toStateName: 'ongoing_campaigns',
-    roles: ['administrator'],
  },
  {
    icon: 'library',
@@ -54,7 +49,6 @@ const primaryMenuItems = accountId => [
    alwaysVisibleOnChatwootInstances: true,
    toState: frontendURL(`accounts/${accountId}/portals`),
    toStateName: 'default_portal_articles',
-    roles: ['administrator'],
  },
  {
    icon: 'settings',
@@ -62,7 +56,6 @@ const primaryMenuItems = accountId => [
    label: 'SETTINGS',
    toState: frontendURL(`accounts/${accountId}/settings`),
    toStateName: 'settings_home',
-    roles: ['administrator', 'agent'],
  },
 ];

@@ -24,7 +24,6 @@ const settings = accountId => ({
    'settings_inbox_list',
    'settings_inbox_new',
    'settings_inbox_show',
-    'settings_inbox',
    'settings_inboxes_add_agents',
    'settings_inboxes_page_channel',
    'settings_integrations_dashboard_apps',
@@ -46,6 +45,9 @@ const settings = accountId => ({
      icon: 'briefcase',
      label: 'ACCOUNT_SETTINGS',
      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
      toState: frontendURL(`accounts/${accountId}/settings/general`),
      toStateName: 'general_settings_index',
    },
@@ -53,6 +55,9 @@ const settings = accountId => ({
      icon: 'people',
      label: 'AGENTS',
      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
      toState: frontendURL(`accounts/${accountId}/settings/agents/list`),
      toStateName: 'agent_list',
      featureFlag: FEATURE_FLAGS.AGENT_MANAGEMENT,
@@ -61,6 +66,9 @@ const settings = accountId => ({
      icon: 'people-team',
      label: 'TEAMS',
      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
      toState: frontendURL(`accounts/${accountId}/settings/teams/list`),
      toStateName: 'settings_teams_list',
      featureFlag: FEATURE_FLAGS.TEAM_MANAGEMENT,
@@ -69,6 +77,9 @@ const settings = accountId => ({
      icon: 'mail-inbox-all',
      label: 'INBOXES',
      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
      toState: frontendURL(`accounts/${accountId}/settings/inboxes/list`),
      toStateName: 'settings_inbox_list',
      featureFlag: FEATURE_FLAGS.INBOX_MANAGEMENT,
@@ -77,6 +88,9 @@ const settings = accountId => ({
      icon: 'tag',
      label: 'LABELS',
      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
      toState: frontendURL(`accounts/${accountId}/settings/labels/list`),
      toStateName: 'labels_list',
      featureFlag: FEATURE_FLAGS.LABELS,
@@ -85,6 +99,9 @@ const settings = accountId => ({
      icon: 'code',
      label: 'CUSTOM_ATTRIBUTES',
      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
      toState: frontendURL(
        `accounts/${accountId}/settings/custom-attributes/list`
      ),
@@ -95,6 +112,9 @@ const settings = accountId => ({
      icon: 'automation',
      label: 'AUTOMATION',
      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
      toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
      toStateName: 'automation_list',
      featureFlag: FEATURE_FLAGS.AUTOMATIONS,
@@ -103,6 +123,9 @@ const settings = accountId => ({
      icon: 'bot',
      label: 'AGENT_BOTS',
      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
      globalConfigFlag: 'csmlEditorHost',
      toState: frontendURL(`accounts/${accountId}/settings/agent-bots`),
      toStateName: 'agent_bots',
@@ -112,6 +135,9 @@ const settings = accountId => ({
      icon: 'flash-settings',
      label: 'MACROS',
      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
      toState: frontendURL(`accounts/${accountId}/settings/macros`),
      toStateName: 'macros_wrapper',
      featureFlag: FEATURE_FLAGS.MACROS,
@@ -120,6 +146,9 @@ const settings = accountId => ({
      icon: 'chat-multiple',
      label: 'CANNED_RESPONSES',
      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
      toState: frontendURL(
        `accounts/${accountId}/settings/canned-response/list`
      ),
@@ -130,6 +159,9 @@ const settings = accountId => ({
      icon: 'flash-on',
      label: 'INTEGRATIONS',
      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
      toState: frontendURL(`accounts/${accountId}/settings/integrations`),
      toStateName: 'settings_integrations',
      featureFlag: FEATURE_FLAGS.INTEGRATIONS,
@@ -138,6 +170,9 @@ const settings = accountId => ({
      icon: 'star-emphasis',
      label: 'APPLICATIONS',
      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
      toState: frontendURL(`accounts/${accountId}/settings/applications`),
      toStateName: 'settings_applications',
      featureFlag: FEATURE_FLAGS.INTEGRATIONS,
@@ -146,6 +181,9 @@ const settings = accountId => ({
      icon: 'key',
      label: 'AUDIT_LOGS',
      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
      toState: frontendURL(`accounts/${accountId}/settings/audit-log/list`),
      toStateName: 'auditlogs_list',
      isEnterpriseOnly: true,
@@ -156,6 +194,9 @@ const settings = accountId => ({
      icon: 'document-list-clock',
      label: 'SLA',
      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
      toState: frontendURL(`accounts/${accountId}/settings/sla/list`),
      toStateName: 'sla_list',
      isEnterpriseOnly: true,
@@ -166,6 +207,9 @@ const settings = accountId => ({
      icon: 'credit-card-person',
      label: 'BILLING',
      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
      toState: frontendURL(`accounts/${accountId}/settings/billing`),
      toStateName: 'billing_settings_index',
      showOnlyOnCloud: true,
@@ -29,6 +29,8 @@ import SecondaryNavItem from './SecondaryNavItem.vue';
 import AccountContext from './AccountContext.vue';
 import { mapGetters } from 'vuex';
 import { FEATURE_FLAGS } from '../../../featureFlags';
+import { hasPermissions } from '../../../helper/permissionsHelper';
+import { routesWithPermissions } from '../../../routes';

 export default {
  components: {
@@ -60,9 +62,9 @@ export default {
      type: Object,
      default: () => {},
    },
-    currentRole: {
-      type: String,
-      default: '',
+    currentUser: {
+      type: Object,
+      default: () => {},
    },
    isOnChatwootCloud: {
      type: Boolean,
@@ -80,16 +82,16 @@ export default {
      return this.customViews.filter(view => view.filter_type === 'contact');
    },
    accessibleMenuItems() {
-      if (!this.currentRole) {
-        return [];
-      }
-      const menuItemsFilteredByRole = this.menuConfig.menuItems.filter(
-        menuItem =>
-          window.roleWiseRoutes[this.currentRole].indexOf(
-            menuItem.toStateName
-          ) > -1
+      const menuItemsFilteredByPermissions = this.menuConfig.menuItems.filter(
+        menuItem => {
+          const { permissions: userPermissions = [] } = this.currentUser;
+          return hasPermissions(
+            routesWithPermissions[menuItem.toStateName],
+            userPermissions
+          );
+        }
      );
-      return menuItemsFilteredByRole.filter(item => {
+      return menuItemsFilteredByPermissions.filter(item => {
        if (item.showOnlyOnCloud) {
          return this.isOnChatwootCloud;
        }
@@ -65,11 +65,11 @@
        </div>
        <span
          v-if="warningIcon"
-          class="inline-flex rounded-sm mr-1 bg-slate-100"
+          class="inline-flex mr-1 bg-red-50 dark:bg-red-900 p-0.5 rounded-sm"
        >
          <fluent-icon
-            v-tooltip.top-end="$t('SIDEBAR.FACEBOOK_REAUTHORIZE')"
-            class="text-xxs"
+            v-tooltip.top-end="$t('SIDEBAR.REAUTHORIZE')"
+            class="text-xxs text-red-500 dark:text-red-300"
            :icon="warningIcon"
            size="12"
          />
@@ -65,27 +65,29 @@
        :show-child-count="showChildCount(child.count)"
        :child-item-count="child.count"
      />
-      <router-link
-        v-if="showItem(menuItem)"
-        v-slot="{ href, navigate }"
-        :to="menuItem.toState"
-        custom
-      >
-        <li class="pl-1">
-          <a :href="href">
-            <woot-button
-              size="tiny"
-              variant="clear"
-              color-scheme="secondary"
-              icon="add"
-              :data-testid="menuItem.dataTestid"
-              @click="e => newLinkClick(e, navigate)"
-            >
-              {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
-            </woot-button>
-          </a>
-        </li>
-      </router-link>
+      <Policy :permissions="['administrator']">
+        <router-link
+          v-if="menuItem.newLink"
+          v-slot="{ href, navigate }"
+          :to="menuItem.toState"
+          custom
+        >
+          <li class="pl-1">
+            <a :href="href">
+              <woot-button
+                size="tiny"
+                variant="clear"
+                color-scheme="secondary"
+                icon="add"
+                :data-testid="menuItem.dataTestid"
+                @click="e => newLinkClick(e, navigate)"
+              >
+                {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
+              </woot-button>
+            </a>
+          </li>
+        </router-link>
+      </Policy>
    </ul>
  </li>
 </template>
@@ -105,9 +107,10 @@ import {
  isOnMentionsView,
  isOnUnattendedView,
 } from '../../../store/modules/conversations/helpers/actionHelpers';
+import Policy from '../../policy.vue';

 export default {
-  components: { SecondaryChildNavItem },
+  components: { SecondaryChildNavItem, Policy },
  mixins: [adminMixin, configMixin],
  props: {
    menuItem: {
@@ -1,12 +1,12 @@
-import AccountSelector from '../AccountSelector';
+import AccountSelector from '../AccountSelector.vue';
 import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';

 import i18n from 'dashboard/i18n';
-import WootModal from 'dashboard/components/Modal';
-import WootModalHeader from 'dashboard/components/ModalHeader';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
+import WootModal from 'dashboard/components/Modal.vue';
+import WootModalHeader from 'dashboard/components/ModalHeader.vue';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';

 const localVue = createLocalVue();
 localVue.component('woot-modal', WootModal);
@@ -1,12 +1,12 @@
-import AgentDetails from '../AgentDetails';
+import AgentDetails from '../AgentDetails.vue';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 import VTooltip from 'v-tooltip';

 import i18n from 'dashboard/i18n';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail';
-import WootButton from 'dashboard/components/ui/WootButton';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import WootButton from 'dashboard/components/ui/WootButton.vue';
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueI18n);
@@ -1,13 +1,15 @@
-import NotificationBell from '../NotificationBell';
+import NotificationBell from '../NotificationBell.vue';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';

 import i18n from 'dashboard/i18n';

 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueI18n);
+localVue.component('fluent-icon', FluentIcon);

 const i18nConfig = new VueI18n({
  locale: 'en',
@@ -27,7 +29,7 @@ describe('notificationBell', () => {

  beforeEach(() => {
    actions = {
-      showNotification: jest.fn(),
+      showNotification: vi.fn(),
    };
    modules = {
      auth: {
@@ -2,15 +2,21 @@ import AvailabilityStatus from '../AvailabilityStatus.vue';
 import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
+import VTooltip from 'v-tooltip';
+
+import WootButton from 'dashboard/components/ui/WootButton.vue';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
+import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider.vue';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';

-import WootButton from 'dashboard/components/ui/WootButton';
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
-import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader';
-import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider';
 import i18n from 'dashboard/i18n';

 const localVue = createLocalVue();
+localVue.use(VTooltip, {
+  defaultHtml: false,
+});
 localVue.use(Vuex);
 localVue.use(VueI18n);
 localVue.component('woot-button', WootButton);
@@ -18,12 +24,14 @@ localVue.component('woot-dropdown-header', WootDropdownHeader);
 localVue.component('woot-dropdown-menu', WootDropdownMenu);
 localVue.component('woot-dropdown-divider', WootDropdownDivider);
 localVue.component('woot-dropdown-item', WootDropdownItem);
+localVue.component('fluent-icon', FluentIcon);

 const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });

 describe('AvailabilityStatus', () => {
  const currentAvailability = 'online';
  const currentAccountId = '1';
+  const currentUserAutoOffline = false;
  let store = null;
  let actions = null;
  let modules = null;
@@ -31,7 +39,7 @@ describe('AvailabilityStatus', () => {

  beforeEach(() => {
    actions = {
-      updateAvailability: jest.fn(() => {
+      updateAvailability: vi.fn(() => {
        return Promise.resolve();
      }),
    };
@@ -41,6 +49,7 @@ describe('AvailabilityStatus', () => {
        getters: {
          getCurrentUserAvailability: () => currentAvailability,
          getCurrentAccountId: () => currentAccountId,
+          getCurrentUserAutoOffline: () => currentUserAutoOffline,
        },
      },
    };
@@ -0,0 +1,23 @@
+<script setup>
+import { useStoreGetters } from 'dashboard/composables/store';
+import { computed } from 'vue';
+import { hasPermissions } from '../helper/permissionsHelper';
+const props = defineProps({
+  permissions: {
+    type: Array,
+    required: true,
+  },
+});
+
+const getters = useStoreGetters();
+const user = getters.getCurrentUser.value;
+const hasPermission = computed(() =>
+  hasPermissions(props.permissions, user.permissions)
+);
+</script>
+
+<template>
+  <div v-if="hasPermission">
+    <slot />
+  </div>
+</template>
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import SidemenuIcon from '../SidemenuIcon';
+import SidemenuIcon from '../SidemenuIcon.vue';

 describe('SidemenuIcon', () => {
  test('matches snapshot', () => {
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

-exports[`SidemenuIcon matches snapshot 1`] = `
+exports[`SidemenuIcon > matches snapshot 1`] = `
 <button
  class="-ml-3 text-black-900 dark:text-slate-300"
  color-scheme="secondary"
@@ -22,7 +22,7 @@ import {
  setYear,
  isAfter,
 } from 'date-fns';
-
+import { useAlert } from 'dashboard/composables';
 import DatePickerButton from './components/DatePickerButton.vue';
 import CalendarDateInput from './components/CalendarDateInput.vue';
 import CalendarDateRange from './components/CalendarDateRange.vue';
@@ -185,7 +185,7 @@ const updateManualInput = (newDate, calendarType) => {
 };

 const handleManualInputError = message => {
-  bus.$emit('newToastMessage', message);
+  useAlert(message);
 };

 const resetDatePicker = () => {
@@ -201,7 +201,7 @@ const resetDatePicker = () => {

 const emitDateRange = () => {
  if (!isValid(selectedStartDate.value) || !isValid(selectedEndDate.value)) {
-    bus.$emit('newToastMessage', 'Please select a valid time range');
+    useAlert('Please select a valid time range');
  } else {
    showDatePicker.value = false;
    emit('dateRangeChanged', [selectedStartDate.value, selectedEndDate.value]);
@@ -18,11 +18,11 @@ describe('Date formatting functions', () => {
  const testDate = new Date(2020, 4, 15); // May 15, 2020

  beforeEach(() => {
-    jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-US');
+    vi.spyOn(navigator, 'language', 'get').mockReturnValue('en-US');
  });

  afterEach(() => {
-    jest.restoreAllMocks();
+    vi.restoreAllMocks();
  });

  it('returns the correct month name from a date', () => {
@@ -39,7 +39,7 @@ describe('Date formatting functions', () => {
  });

  it('returns the correct date format for the current locale en-IN', () => {
-    jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-IN');
+    vi.spyOn(navigator, 'language', 'get').mockReturnValue('en-IN');
    const expected = 'dd/MM/yyyy';
    expect(getIntlDateFormatForLocale()).toBe(expected);
  });
@@ -231,13 +231,13 @@ describe('isHoveringNextDayInRange', () => {
 describe('getActiveDateRange', () => {
  const currentDate = new Date(2020, 5, 15, 12, 0); // May 15, 2020, at noon

-  beforeAll(() => {
+  beforeEach(() => {
    // Mocking the current date to ensure consistency in tests
-    jest.useFakeTimers().setSystemTime(currentDate.getTime());
+    vi.useFakeTimers().setSystemTime(currentDate.getTime());
  });

-  afterAll(() => {
-    jest.useRealTimers();
+  afterEach(() => {
+    vi.useRealTimers();
  });

  it('returns the correct range for "last7days"', () => {
@@ -1,9 +1,11 @@
 <script setup>
 import { ref, computed } from 'vue';
+import { debounce } from '@chatwoot/utils';
 import { picoSearch } from '@scmmishra/pico-search';
 import ListItemButton from './DropdownListItemButton.vue';
 import DropdownSearch from './DropdownSearch.vue';
 import DropdownEmptyState from './DropdownEmptyState.vue';
+import DropdownLoadingState from './DropdownLoadingState.vue';

 const props = defineProps({
  listItems: {
@@ -19,20 +21,31 @@ const props = defineProps({
    default: '',
  },
  activeFilterId: {
-    type: Number,
+    type: [String, Number],
    default: null,
  },
  showClearFilter: {
    type: Boolean,
    default: false,
  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  loadingPlaceholder: {
+    type: String,
+    default: '',
+  },
 });

+const emits = defineEmits(['on-search']);
+
 const searchTerm = ref('');

-const onSearch = value => {
+const onSearch = debounce(value => {
  searchTerm.value = value;
-};
+  emits('on-search', value);
+}, 300);

 const filteredListItems = computed(() => {
  if (!searchTerm.value) return props.listItems;
@@ -47,6 +60,16 @@ const isFilterActive = id => {
  if (!props.activeFilterId) return false;
  return id === props.activeFilterId;
 };
+
+const shouldShowLoadingState = computed(() => {
+  return (
+    props.isLoading && isDropdownListEmpty.value && props.loadingPlaceholder
+  );
+});
+
+const shouldShowEmptyState = computed(() => {
+  return !props.isLoading && isDropdownListEmpty.value;
+});
 </script>
 <template>
  <div
@@ -55,7 +78,7 @@ const isFilterActive = id => {
  >
    <slot name="search">
      <dropdown-search
-        v-if="enableSearch && listItems.length"
+        v-if="enableSearch"
        :input-value="searchTerm"
        :input-placeholder="inputPlaceholder"
        :show-clear-filter="showClearFilter"
@@ -64,8 +87,12 @@ const isFilterActive = id => {
      />
    </slot>
    <slot name="listItem">
+      <dropdown-loading-state
+        v-if="shouldShowLoadingState"
+        :message="loadingPlaceholder"
+      />
      <dropdown-empty-state
-        v-if="isDropdownListEmpty"
+        v-else-if="shouldShowEmptyState"
        :message="$t('REPORT.FILTER_ACTIONS.EMPTY_LIST')"
      />
      <list-item-button
@@ -13,7 +13,7 @@ defineProps({
 <template>
  <button
    class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:bg-slate-50 dark:hover:bg-slate-700 active:bg-slate-75 dark:active:bg-slate-800"
-    @click.stop="$emit('click')"
+    @click.stop.prevent="$emit('click')"
    @mouseenter="$emit('mouseenter')"
    @mouseleave="$emit('mouseleave')"
    @focus="$emit('focus')"
@@ -0,0 +1,15 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <div
+    class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
+  >
+    {{ message }}
+  </div>
+</template>
@@ -81,7 +81,7 @@ export default {
  },

  mounted() {
-    bus.$on(CMD_AI_ASSIST, this.onAIAssist);
+    this.$emitter.on(CMD_AI_ASSIST, this.onAIAssist);
    this.initialMessage = this.draftMessage;
  },

@@ -352,10 +352,16 @@ export default {
    // Components using this
    // 1. SearchPopover.vue

-    bus.$on(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, this.insertContentIntoEditor);
+    this.$emitter.on(
+      BUS_EVENTS.INSERT_INTO_RICH_EDITOR,
+      this.insertContentIntoEditor
+    );
  },
  beforeDestroy() {
-    bus.$off(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, this.insertContentIntoEditor);
+    this.$emitter.off(
+      BUS_EVENTS.INSERT_INTO_RICH_EDITOR,
+      this.insertContentIntoEditor
+    );
  },
  methods: {
    reloadState(content = this.value) {
@@ -71,6 +71,10 @@
        :class="{ 'justify-end': isContactPanelOpen }"
      >
        <SLA-card-label v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
+        <linear
+          v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
+          :conversation-id="currentChat.id"
+        />
        <more-actions :conversation-id="currentChat.id" />
      </div>
    </div>
@@ -89,6 +93,8 @@ import SLACardLabel from './components/SLACardLabel.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import Linear from './linear/index.vue';

 export default {
  components: {
@@ -97,6 +103,7 @@ export default {
    MoreActions,
    Thumbnail,
    SLACardLabel,
+    Linear,
  },
  mixins: [inboxMixin, agentMixin, keyboardEventListenerMixins],
  props: {
@@ -121,6 +128,9 @@ export default {
    ...mapGetters({
      uiFlags: 'inboxAssignableAgents/getUIFlags',
      currentChat: 'getSelectedChat',
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+      appIntegrations: 'integrations/getAppIntegrations',
    }),
    chatMetadata() {
      return this.chat.meta;
@@ -178,6 +188,17 @@ export default {
    hasSlaPolicyId() {
      return this.chat?.sla_policy_id;
    },
+    isLinearIntegrationEnabled() {
+      return this.appIntegrations.find(
+        integration => integration.id === 'linear' && !!integration.hooks.length
+      );
+    },
+    isLinearFeatureEnabled() {
+      return this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.LINEAR
+      );
+    },
  },

  methods: {
@@ -1,5 +1,9 @@
 <template>
-  <li v-if="shouldRenderMessage" :id="`message${data.id}`" :class="alignBubble">
+  <li
+    v-if="shouldRenderMessage"
+    :id="`message${data.id}`"
+    :class="[alignBubble, 'group']"
+  >
    <div :class="wrapClass">
      <div
        v-if="isFailed && !hasOneDayPassed && !isAnEmailInbox"
@@ -121,7 +125,10 @@
        </a>
      </div>
    </div>
-    <div v-if="shouldShowContextMenu" class="context-menu-wrap">
+    <div
+      v-if="shouldShowContextMenu"
+      class="context-menu-wrap invisible group-hover:visible"
+    >
      <context-menu
        v-if="isBubble && !isMessageDeleted"
        :context-menu-position="contextMenuPosition"
@@ -250,7 +257,16 @@ export default {
        html_content: { full: fullHTMLContent } = {},
        text_content: { full: fullTextContent } = {},
      } = this.contentAttributes.email || {};
-      return fullHTMLContent || fullTextContent || '';
+
+      if (fullHTMLContent) {
+        return fullHTMLContent;
+      }
+
+      if (fullTextContent) {
+        return fullTextContent.replace(/\n/g, '<br>');
+      }
+
+      return '';
    },
    displayQuotedButton() {
      if (this.emailMessageContent.includes('<blockquote')) {
@@ -473,11 +489,11 @@ export default {
  },
  mounted() {
    this.hasMediaLoadError = false;
-    bus.$on(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL, this.closeContextMenu);
+    this.$emitter.on(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL, this.closeContextMenu);
    this.setupHighlightTimer();
  },
  beforeDestroy() {
-    bus.$off(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL, this.closeContextMenu);
+    this.$emitter.off(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL, this.closeContextMenu);
    clearTimeout(this.higlightTimeout);
  },
  methods: {
@@ -531,7 +547,7 @@ export default {
      const { conversation_id: conversationId, id: replyTo } = this.data;

      LocalStorage.updateJsonStore(replyStorageKey, conversationId, replyTo);
-      bus.$emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.data);
+      this.$emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.data);
    },
    setupHighlightTimer() {
      if (Number(this.$route.query.messageId) !== Number(this.data.id)) {
@@ -324,12 +324,12 @@ export default {
  },

  created() {
-    bus.$on(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
+    this.$emitter.on(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
    // when a new message comes in, we refetch the label suggestions
-    bus.$on(BUS_EVENTS.FETCH_LABEL_SUGGESTIONS, this.fetchSuggestions);
+    this.$emitter.on(BUS_EVENTS.FETCH_LABEL_SUGGESTIONS, this.fetchSuggestions);
    // when a message is sent we set the flag to true this hides the label suggestions,
    // until the chat is changed and the flag is reset in the watch for currentChat
-    bus.$on(BUS_EVENTS.MESSAGE_SENT, () => {
+    this.$emitter.on(BUS_EVENTS.MESSAGE_SENT, () => {
      this.messageSentSinceOpened = true;
    });
  },
@@ -396,7 +396,7 @@ export default {
      this.$store.dispatch('fetchAllAttachments', this.currentChat.id);
    },
    removeBusListeners() {
-      bus.$off(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
+      this.$emitter.off(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
    },
    onScrollToMessage({ messageId = '' } = {}) {
      this.$nextTick(() => {
@@ -514,7 +514,7 @@ export default {
      } else {
        this.hasUserScrolled = true;
      }
-      bus.$emit(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL);
+      this.$emitter.emit(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL);
      this.fetchPreviousMessages(e.target.scrollTop);
    },

@@ -61,14 +61,14 @@ export default {
    ...mapGetters({ currentChat: 'getSelectedChat' }),
  },
  mounted() {
-    bus.$on(CMD_MUTE_CONVERSATION, this.mute);
-    bus.$on(CMD_UNMUTE_CONVERSATION, this.unmute);
-    bus.$on(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
+    this.$emitter.on(CMD_MUTE_CONVERSATION, this.mute);
+    this.$emitter.on(CMD_UNMUTE_CONVERSATION, this.unmute);
+    this.$emitter.on(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
  },
  destroyed() {
-    bus.$off(CMD_MUTE_CONVERSATION, this.mute);
-    bus.$off(CMD_UNMUTE_CONVERSATION, this.unmute);
-    bus.$off(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
+    this.$emitter.off(CMD_MUTE_CONVERSATION, this.mute);
+    this.$emitter.off(CMD_UNMUTE_CONVERSATION, this.unmute);
+    this.$emitter.off(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
  },
  methods: {
    mute() {
@@ -197,7 +197,7 @@ import {
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';

-const EmojiInput = () => import('shared/components/emoji/EmojiInput');
+const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');

 export default {
  components: {
@@ -596,12 +596,15 @@ export default {
    );

    this.fetchAndSetReplyTo();
-    bus.$on(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.fetchAndSetReplyTo);
+    this.$emitter.on(
+      BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE,
+      this.fetchAndSetReplyTo
+    );

    // A hacky fix to solve the drag and drop
    // Is showing on top of new conversation modal drag and drop
    // TODO need to find a better solution
-    bus.$on(
+    this.$emitter.on(
      BUS_EVENTS.NEW_CONVERSATION_MODAL,
      this.onNewConversationModalActive
    );
@@ -609,10 +612,13 @@ export default {
  destroyed() {
    document.removeEventListener('paste', this.onPaste);
    document.removeEventListener('keydown', this.handleKeyEvents);
-    bus.$off(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.fetchAndSetReplyTo);
+    this.$emitter.off(
+      BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE,
+      this.fetchAndSetReplyTo
+    );
  },
  beforeDestroy() {
-    bus.$off(
+    this.$emitter.off(
      BUS_EVENTS.NEW_CONVERSATION_MODAL,
      this.onNewConversationModalActive
    );
@@ -625,7 +631,7 @@ export default {
        const lines = title.split('\n');
        const nonEmptyLines = lines.filter(line => line.trim() !== '');
        const filteredMarkdown = nonEmptyLines.join(' ');
-        bus.$emit(
+        this.$emitter.emit(
          BUS_EVENTS.INSERT_INTO_RICH_EDITOR,
          `[${filteredMarkdown}](${url})`
        );
@@ -867,8 +873,8 @@ export default {
          'createPendingMessageAndSend',
          messagePayload
        );
-        bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
-        bus.$emit(BUS_EVENTS.MESSAGE_SENT);
+        this.$emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
+        this.$emitter.emit(BUS_EVENTS.MESSAGE_SENT);
        this.removeFromDraft();
        this.sendMessageAnalyticsData(messagePayload.private);
      } catch (error) {
@@ -1194,7 +1200,7 @@ export default {
    resetReplyToMessage() {
      const replyStorageKey = LOCAL_STORAGE_KEYS.MESSAGE_REPLY_TO;
      LocalStorage.deleteFromJsonStore(replyStorageKey, this.conversationId);
-      bus.$emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE);
+      this.$emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE);
    },
    onNewConversationModalActive(isActive) {
      // Issue is if the new conversation modal is open and we drag and drop the file
@@ -47,7 +47,9 @@ export default {
  },
  methods: {
    scrollToMessage() {
-      bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE, { messageId: this.message.id });
+      this.$emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE, {
+        messageId: this.message.id,
+      });
    },
  },
 };
@@ -39,7 +39,7 @@ const toggleShowAllNRT = () => {
 </script>
 <template>
  <div
-    class="absolute flex flex-col items-start bg-[#fdfdfd] dark:bg-slate-800 z-50 p-4 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
+    class="absolute flex flex-col items-start bg-white dark:bg-slate-800 z-50 p-4 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
  >
    <span class="text-sm font-medium text-slate-900 dark:text-slate-25">
      {{ $t('SLA.EVENTS.TITLE') }}
@@ -167,17 +167,29 @@ export default {
    };
  },
  mounted() {
-    bus.$on(CMD_BULK_ACTION_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
-    bus.$on(CMD_BULK_ACTION_REOPEN_CONVERSATION, this.onCmdReopenConversation);
-    bus.$on(
+    this.$emitter.on(
+      CMD_BULK_ACTION_SNOOZE_CONVERSATION,
+      this.onCmdSnoozeConversation
+    );
+    this.$emitter.on(
+      CMD_BULK_ACTION_REOPEN_CONVERSATION,
+      this.onCmdReopenConversation
+    );
+    this.$emitter.on(
      CMD_BULK_ACTION_RESOLVE_CONVERSATION,
      this.onCmdResolveConversation
    );
  },
  destroyed() {
-    bus.$off(CMD_BULK_ACTION_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
-    bus.$off(CMD_BULK_ACTION_REOPEN_CONVERSATION, this.onCmdReopenConversation);
-    bus.$off(
+    this.$emitter.off(
+      CMD_BULK_ACTION_SNOOZE_CONVERSATION,
+      this.onCmdSnoozeConversation
+    );
+    this.$emitter.off(
+      CMD_BULK_ACTION_REOPEN_CONVERSATION,
+      this.onCmdReopenConversation
+    );
+    this.$emitter.off(
      CMD_BULK_ACTION_RESOLVE_CONVERSATION,
      this.onCmdResolveConversation
    );
@@ -0,0 +1,268 @@
+<template>
+  <div>
+    <woot-input
+      v-model="formState.title"
+      :class="{ error: v$.title.$error }"
+      class="w-full"
+      :styles="{ ...inputStyles, padding: '6px 12px' }"
+      :label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.LABEL')"
+      :placeholder="
+        $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.PLACEHOLDER')
+      "
+      :error="nameError"
+      @input="v$.title.$touch"
+    />
+    <label>
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.LABEL') }}
+      <textarea
+        v-model="formState.description"
+        :style="{ ...inputStyles, padding: '8px 12px' }"
+        rows="3"
+        class="text-sm"
+        :placeholder="
+          $t(
+            'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.PLACEHOLDER'
+          )
+        "
+      />
+    </label>
+    <div class="flex flex-col gap-4">
+      <searchable-dropdown
+        v-for="dropdown in dropdowns"
+        :key="dropdown.type"
+        :type="dropdown.type"
+        :value="formState[dropdown.type]"
+        :label="$t(dropdown.label)"
+        :items="dropdown.items"
+        :placeholder="$t(dropdown.placeholder)"
+        :error="dropdown.error"
+        @change="onChange"
+      />
+    </div>
+    <div class="flex items-center justify-end w-full gap-2 mt-8">
+      <woot-button
+        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+        @click.prevent="onClose"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
+      </woot-button>
+      <woot-button
+        :is-disabled="isSubmitDisabled"
+        class="px-4 rounded-xl"
+        :is-loading="isCreating"
+        @click.prevent="createIssue"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, computed, onMounted, ref } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useAlert } from 'dashboard/composables';
+import LinearAPI from 'dashboard/api/integrations/linear';
+import validations from './validations';
+import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
+import SearchableDropdown from './SearchableDropdown.vue';
+
+const props = defineProps({
+  accountId: {
+    type: [Number, String],
+    required: true,
+  },
+  conversationId: {
+    type: [Number, String],
+    required: true,
+  },
+  title: {
+    type: String,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['close']);
+const { t } = useI18n();
+
+const teams = ref([]);
+const assignees = ref([]);
+const projects = ref([]);
+const labels = ref([]);
+const statuses = ref([]);
+
+const priorities = [
+  { id: 0, name: 'No priority' },
+  { id: 1, name: 'Urgent' },
+  { id: 2, name: 'High' },
+  { id: 3, name: 'Normal' },
+  { id: 4, name: 'Low' },
+];
+
+const statusDesiredOrder = [
+  'Backlog',
+  'Todo',
+  'In Progress',
+  'Done',
+  'Canceled',
+];
+
+const isCreating = ref(false);
+const inputStyles = { borderRadius: '12px', fontSize: '14px' };
+
+const formState = reactive({
+  title: '',
+  description: '',
+  teamId: '',
+  assigneeId: '',
+  labelId: '',
+  stateId: '',
+  priority: '',
+  projectId: '',
+});
+const v$ = useVuelidate(validations, formState);
+
+const isSubmitDisabled = computed(
+  () => v$.value.title.$invalid || isCreating.value
+);
+const nameError = computed(() =>
+  v$.value.title.$error
+    ? t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.REQUIRED_ERROR')
+    : ''
+);
+const teamError = computed(() =>
+  v$.value.teamId.$error
+    ? t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.REQUIRED_ERROR')
+    : ''
+);
+
+const dropdowns = computed(() => {
+  return [
+    {
+      type: 'teamId',
+      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.LABEL',
+      items: teams.value,
+      placeholder: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.SEARCH',
+      error: teamError.value,
+    },
+    {
+      type: 'assigneeId',
+      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.ASSIGNEE.LABEL',
+      items: assignees.value,
+      placeholder:
+        'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.ASSIGNEE.SEARCH',
+      error: '',
+    },
+    {
+      type: 'labelId',
+      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.LABEL.LABEL',
+      items: labels.value,
+      placeholder: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.LABEL.SEARCH',
+      error: '',
+    },
+    {
+      type: 'priority',
+      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PRIORITY.LABEL',
+      items: priorities,
+      placeholder:
+        'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PRIORITY.SEARCH',
+      error: '',
+    },
+    {
+      type: 'projectId',
+      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PROJECT.LABEL',
+      items: projects.value,
+      placeholder:
+        'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PROJECT.SEARCH',
+      error: '',
+    },
+    {
+      type: 'stateId',
+      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.STATUS.LABEL',
+      items: statuses.value,
+      placeholder: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.STATUS.SEARCH',
+      error: '',
+    },
+  ];
+});
+
+const onClose = () => emit('close');
+
+const getTeams = async () => {
+  try {
+    const response = await LinearAPI.getTeams();
+    teams.value = response.data;
+  } catch (error) {
+    const errorMessage = parseLinearAPIErrorResponse(
+      error,
+      t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.LOADING_TEAM_ERROR')
+    );
+    useAlert(errorMessage);
+  }
+};
+
+const getTeamEntities = async () => {
+  try {
+    const response = await LinearAPI.getTeamEntities(formState.teamId);
+    assignees.value = response.data.users;
+    labels.value = response.data.labels;
+    projects.value = response.data.projects;
+    statuses.value = statusDesiredOrder
+      .map(name => response.data.states.find(status => status.name === name))
+      .filter(Boolean);
+  } catch (error) {
+    const errorMessage = parseLinearAPIErrorResponse(
+      error,
+      t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.LOADING_TEAM_ENTITIES_ERROR')
+    );
+    useAlert(errorMessage);
+  }
+};
+
+const onChange = (item, type) => {
+  formState[type] = item.id;
+  if (type === 'teamId') {
+    formState.assigneeId = '';
+    formState.stateId = '';
+    formState.labelId = '';
+    formState.projectId = '';
+    getTeamEntities();
+  }
+};
+
+const createIssue = async () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+
+  const payload = {
+    team_id: formState.teamId,
+    title: formState.title,
+    description: formState.description || undefined,
+    assignee_id: formState.assigneeId || undefined,
+    project_id: formState.projectId || undefined,
+    state_id: formState.stateId || undefined,
+    priority: formState.priority || undefined,
+    label_ids: formState.labelId ? [formState.labelId] : undefined,
+  };
+
+  try {
+    isCreating.value = true;
+    const response = await LinearAPI.createIssue(payload);
+    const { id: issueId } = response.data;
+    await LinearAPI.link_issue(props.conversationId, issueId, props.title);
+    useAlert(t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE_SUCCESS'));
+    onClose();
+  } catch (error) {
+    const errorMessage = parseLinearAPIErrorResponse(
+      error,
+      t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE_ERROR')
+    );
+    useAlert(errorMessage);
+  } finally {
+    isCreating.value = false;
+  }
+};
+
+onMounted(getTeams);
+</script>
@@ -0,0 +1,92 @@
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header
+      :header-title="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.TITLE')"
+      :header-content="
+        $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.DESCRIPTION')
+      "
+    />
+
+    <div class="flex flex-col h-auto overflow-auto">
+      <div class="flex flex-col px-8 pb-4">
+        <woot-tabs
+          class="ltr:[&>ul]:pl-0 rtl:[&>ul]:pr-0"
+          :index="selectedTabIndex"
+          @change="onClickTabChange"
+        >
+          <woot-tabs-item
+            v-for="tab in tabs"
+            :key="tab.key"
+            :name="tab.name"
+            :show-badge="false"
+          />
+        </woot-tabs>
+      </div>
+      <div v-if="selectedTabIndex === 0" class="flex flex-col px-8 pb-4">
+        <create-issue
+          :account-id="accountId"
+          :conversation-id="conversation.id"
+          :title="title"
+          @close="onClose"
+        />
+      </div>
+
+      <div v-else class="flex flex-col px-8 pb-4">
+        <link-issue
+          :conversation-id="conversation.id"
+          :title="title"
+          @close="onClose"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { useI18n } from 'dashboard/composables/useI18n';
+import { computed, ref } from 'vue';
+import LinkIssue from './LinkIssue.vue';
+import CreateIssue from './CreateIssue.vue';
+
+const props = defineProps({
+  accountId: {
+    type: [Number, String],
+    required: true,
+  },
+  conversation: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const selectedTabIndex = ref(0);
+
+const title = computed(() => {
+  const { meta: { sender: { name = null } = {} } = {} } = props.conversation;
+  return t('INTEGRATION_SETTINGS.LINEAR.LINK.LINK_TITLE', {
+    conversationId: props.conversation.id,
+    name,
+  });
+});
+
+const emits = defineEmits(['close']);
+
+const tabs = ref([
+  {
+    key: 0,
+    name: t('INTEGRATION_SETTINGS.LINEAR.CREATE'),
+  },
+  {
+    key: 1,
+    name: t('INTEGRATION_SETTINGS.LINEAR.LINK.TITLE'),
+  },
+]);
+const onClose = () => {
+  emits('close');
+};
+
+const onClickTabChange = index => {
+  selectedTabIndex.value = index;
+};
+</script>
@@ -0,0 +1,123 @@
+<script setup>
+import { format } from 'date-fns';
+import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
+import IssueHeader from './IssueHeader.vue';
+import { computed } from 'vue';
+
+const priorityMap = {
+  1: 'Urgent',
+  2: 'High',
+  3: 'Medium',
+  4: 'Low',
+};
+
+const props = defineProps({
+  issue: {
+    type: Object,
+    required: true,
+  },
+  linkId: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['unlink-issue']);
+
+const formattedDate = computed(() => {
+  const { createdAt } = props.issue;
+  return format(new Date(createdAt), 'hh:mm a, MMM dd');
+});
+
+const assignee = computed(() => {
+  const assigneeDetails = props.issue.assignee;
+
+  if (!assigneeDetails) return null;
+  const { name, avatarUrl } = assigneeDetails;
+
+  return {
+    name,
+    thumbnail: avatarUrl,
+  };
+});
+
+const labels = computed(() => {
+  return props.issue.labels?.nodes || [];
+});
+
+const priorityLabel = computed(() => {
+  return priorityMap[props.issue.priority];
+});
+
+const unlinkIssue = () => {
+  emit('unlink-issue', props.linkId);
+};
+</script>
+
+<template>
+  <div
+    class="absolute flex flex-col items-start bg-white dark:bg-slate-800 z-50 px-4 py-3 border border-solid border-ash-200 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
+  >
+    <div class="flex flex-col w-full">
+      <issue-header
+        :identifier="issue.identifier"
+        :link-id="linkId"
+        :issue-url="issue.url"
+        @unlink-issue="unlinkIssue"
+      />
+
+      <span class="mt-2 text-sm font-medium text-ash-900">
+        {{ issue.title }}
+      </span>
+      <span
+        v-if="issue.description"
+        class="mt-1 text-sm text-ash-800 line-clamp-3"
+      >
+        {{ issue.description }}
+      </span>
+    </div>
+    <div class="flex flex-row items-center h-6 gap-2">
+      <user-avatar-with-name v-if="assignee" :user="assignee" class="py-1" />
+      <div v-if="assignee" class="w-px h-3 bg-ash-200" />
+      <div class="flex items-center gap-1 py-1">
+        <fluent-icon
+          icon="status"
+          size="14"
+          :style="{ color: issue.state.color }"
+        />
+        <h6 class="text-xs text-ash-900">
+          {{ issue.state.name }}
+        </h6>
+      </div>
+      <div v-if="priorityLabel" class="w-px h-3 bg-ash-200" />
+      <div v-if="priorityLabel" class="flex items-center gap-1 py-1">
+        <fluent-icon
+          :icon="`priority-${priorityLabel.toLowerCase()}`"
+          size="14"
+          view-box="0 0 12 12"
+        />
+        <h6 class="text-xs text-ash-900">{{ priorityLabel }}</h6>
+      </div>
+    </div>
+    <div v-if="labels.length" class="flex flex-wrap items-center gap-1">
+      <woot-label
+        v-for="label in labels"
+        :key="label.id"
+        :title="label.name"
+        :description="label.description"
+        :color="label.color"
+        variant="smooth"
+        small
+      />
+    </div>
+    <div class="flex items-center">
+      <span class="text-xs text-ash-800">
+        {{
+          $t('INTEGRATION_SETTINGS.LINEAR.ISSUE.CREATED_AT', {
+            createdAt: formattedDate,
+          })
+        }}
+      </span>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,66 @@
+<template>
+  <div class="flex flex-row justify-between">
+    <div
+      class="flex items-center justify-center gap-1 h-[24px] px-2 py-1 border rounded-lg border-ash-200"
+    >
+      <fluent-icon
+        icon="linear"
+        size="19"
+        class="text-[#5E6AD2]"
+        view-box="0 0 19 19"
+      />
+      <span class="text-xs font-medium text-ash-900">{{ identifier }}</span>
+    </div>
+    <div class="flex items-center gap-0.5">
+      <woot-button
+        variant="clear"
+        color-scheme="secondary"
+        class="h-[24px]"
+        :is-loading="isUnlinking"
+        @click="unlinkIssue"
+      >
+        <fluent-icon
+          v-if="!isUnlinking"
+          icon="unlink"
+          size="12"
+          type="outline"
+          icon-lib="lucide"
+        />
+      </woot-button>
+      <woot-button
+        variant="clear"
+        class="h-[24px]"
+        color-scheme="secondary"
+        @click="openIssue"
+      >
+        <fluent-icon icon="arrow-up-right" size="14" />
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+const props = defineProps({
+  identifier: {
+    type: String,
+    required: true,
+  },
+  issueUrl: {
+    type: String,
+    required: true,
+  },
+});
+
+const isUnlinking = inject('isUnlinking');
+
+const emit = defineEmits(['unlink-issue']);
+
+const unlinkIssue = () => {
+  emit('unlink-issue');
+};
+
+const openIssue = () => {
+  window.open(props.issueUrl, '_blank');
+};
+</script>
@@ -0,0 +1,143 @@
+<template>
+  <div
+    class="flex flex-col justify-between"
+    :class="shouldShowDropdown ? 'h-[256px]' : 'gap-2'"
+  >
+    <filter-button
+      right-icon="chevron-down"
+      :button-text="linkIssueTitle"
+      class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
+      @click="toggleDropdown"
+    >
+      <template v-if="shouldShowDropdown" #dropdown>
+        <filter-list-dropdown
+          v-if="issues"
+          v-on-clickaway="toggleDropdown"
+          :show-clear-filter="false"
+          :list-items="issues"
+          :active-filter-id="selectedOption.id"
+          :is-loading="isFetching"
+          :input-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.SEARCH')"
+          :loading-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.LOADING')"
+          enable-search
+          class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
+          @on-search="onSearch"
+          @click="onSelectIssue"
+        />
+      </template>
+    </filter-button>
+    <div class="flex items-center justify-end w-full gap-2 mt-2">
+      <woot-button
+        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+        @click.prevent="onClose"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
+      </woot-button>
+      <woot-button
+        :is-disabled="isSubmitDisabled"
+        class="px-4 rounded-xl"
+        :is-loading="isLinking"
+        @click.prevent="linkIssue"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.LINK.TITLE') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useAlert } from 'dashboard/composables';
+import LinearAPI from 'dashboard/api/integrations/linear';
+import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
+import FilterListDropdown from 'dashboard/components/ui/Dropdown/DropdownList.vue';
+import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
+
+const props = defineProps({
+  conversationId: {
+    type: [Number, String],
+    required: true,
+  },
+  title: {
+    type: String,
+    default: null,
+  },
+});
+
+const emits = defineEmits(['close']);
+
+const { t } = useI18n();
+const issues = ref([]);
+const shouldShowDropdown = ref(false);
+const selectedOption = ref({ id: null, name: '' });
+const isFetching = ref(false);
+const isLinking = ref(false);
+const searchQuery = ref('');
+
+const toggleDropdown = () => {
+  issues.value = [];
+  shouldShowDropdown.value = !shouldShowDropdown.value;
+};
+
+const linkIssueTitle = computed(() => {
+  return selectedOption.value.id
+    ? selectedOption.value.name
+    : t('INTEGRATION_SETTINGS.LINEAR.LINK.SELECT');
+});
+
+const isSubmitDisabled = computed(() => {
+  return !selectedOption.value.id || isLinking.value;
+});
+
+const onSelectIssue = item => {
+  selectedOption.value = item;
+  toggleDropdown();
+};
+
+const onClose = () => {
+  emits('close');
+};
+
+const onSearch = async value => {
+  issues.value = [];
+  if (!value) return;
+  searchQuery.value = value;
+  try {
+    isFetching.value = true;
+    const response = await LinearAPI.searchIssues(value);
+    issues.value = response.data.map(issue => ({
+      id: issue.id,
+      name: `${issue.identifier} ${issue.title}`,
+    }));
+  } catch (error) {
+    const errorMessage = parseLinearAPIErrorResponse(
+      error,
+      t('INTEGRATION_SETTINGS.LINEAR.LINK.ERROR')
+    );
+    useAlert(errorMessage);
+  } finally {
+    isFetching.value = false;
+  }
+};
+
+const linkIssue = async () => {
+  const { id: issueId } = selectedOption.value;
+  try {
+    isLinking.value = true;
+    await LinearAPI.link_issue(props.conversationId, issueId, props.title);
+    useAlert(t('INTEGRATION_SETTINGS.LINEAR.LINK.LINK_SUCCESS'));
+    searchQuery.value = '';
+    issues.value = [];
+    onClose();
+  } catch (error) {
+    const errorMessage = parseLinearAPIErrorResponse(
+      error,
+      t('INTEGRATION_SETTINGS.LINEAR.LINK.LINK_ERROR')
+    );
+    useAlert(errorMessage);
+  } finally {
+    isLinking.value = false;
+  }
+};
+</script>
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .2.2
 .3.3
@@ -1 +1 @@
 .3.1
 .9.0
@@ -1 +1 @@
 .7.0
 .8.0