refactor: better variable names

chore: revert flag condition to false
test: new inReplyTo states
2023-10-04 18:22:35 +05:30 · 2023-10-04 18:16:34 +05:30 · 2023-10-04 18:14:15 +05:30 · 2023-10-04 18:14:15 +05:30 · 2023-10-04 18:14:15 +05:30 · 2023-10-04 18:13:52 +05:30
966 changed files with 5542 additions and 16836 deletions
@@ -81,7 +81,7 @@ SMTP_OPENSSL_VERIFY_MODE=peer
 # Mail Incoming
 # This is the domain set for the reply emails when conversation continuity is enabled
 MAILER_INBOUND_EMAIL_DOMAIN=
-# Set this to the appropriate ingress channel with regards to incoming emails
+# Set this to appropriate ingress channel with regards to incoming emails
 # Possible values are :
 # relay for Exim, Postfix, Qmail
 # mailgun for Mailgun
@@ -91,20 +91,10 @@ MAILER_INBOUND_EMAIL_DOMAIN=
 RAILS_INBOUND_EMAIL_SERVICE=
 # Use one of the following based on the email ingress service
 # Ref: https://edgeguides.rubyonrails.org/action_mailbox_basics.html
-# Set this to a password of your choice and use it in the Inbound webhook
 RAILS_INBOUND_EMAIL_PASSWORD=
-
 MAILGUN_INGRESS_SIGNING_KEY=
 MANDRILL_INGRESS_API_KEY=

-# Creating Your Inbound Webhook Instructions for Postmark and Sendgrid:
-# Inbound webhook URL format:
-#    https://actionmailbox:[YOUR_RAILS_INBOUND_EMAIL_PASSWORD]@[YOUR_CHATWOOT_DOMAIN.COM]/rails/action_mailbox/[RAILS_INBOUND_EMAIL_SERVICE]/inbound_emails
-# Note: Replace the values inside the brackets; do not include the brackets themselves.
-# Example: https://actionmailbox:mYRandomPassword3@chatwoot.example.com/rails/action_mailbox/postmark/inbound_emails
-# For Postmark
-# Ensure the 'Include raw email content in JSON payload' checkbox is selected in the inbound webhook section.
-
 # Storage
 ACTIVE_STORAGE_SERVICE=local

@@ -186,9 +176,6 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 # MICROSOFT CLARITY
 # MS_CLARITY_TOKEN=xxxxxxxxx

-# GOOGLE_TAG_MANAGER
-# GOOGLE_TAG = GTM-XXXXXXX
-
 ## Scout
 ## https://scoutapm.com/docs/ruby/configuration
 # SCOUT_KEY=YOURKEY
@@ -253,9 +240,3 @@ AZURE_APP_SECRET=

 # Sentiment analysis model file path
 SENTIMENT_FILE_PATH=
-
-
-# Housekeeping/Performance related configurations
-# Set to true if you want to remove stale contact inboxes
-# contact_inboxes with no conversation older than 90 days will be removed
-# REMOVE_STALE_CONTACT_INBOX_JOB_STATUS=false
@@ -4,7 +4,6 @@ module.exports = {
    'prettier',
    'plugin:vue/recommended',
    'plugin:storybook/recommended',
-    'plugin:cypress/recommended',
  ],
  parserOptions: {
    parser: '@babel/eslint-parser',
@@ -15,7 +15,7 @@ gem 'browser'
 gem 'hashie'
 gem 'jbuilder'
 gem 'kaminari'
-gem 'responders', '>= 3.1.1'
+gem 'responders'
 gem 'rest-client'
 gem 'telephone_number'
 gem 'time_diff'
@@ -67,7 +67,7 @@ gem 'webpacker'
 gem 'barnes'

 ##--- gems for authentication & authorization ---##
-gem 'devise', '>= 4.9.3'
+gem 'devise'
 gem 'devise-secure_password', git: 'https://github.com/chatwoot/devise-secure_password', branch: 'chatwoot'
 gem 'devise_token_auth'
 # authorization
@@ -75,8 +75,8 @@ gem 'jwt'
 gem 'pundit'
 # super admin
 gem 'administrate', '>= 0.19.0'
-gem 'administrate-field-active_storage', '>= 1.0.1'
-gem 'administrate-field-belongs_to_search', '>= 0.9.0'
+gem 'administrate-field-active_storage'
+gem 'administrate-field-belongs_to_search'

 ##--- gems for pubsub service ---##
 # https://karolgalanciak.com/blog/2019/11/30/from-activerecord-callbacks-to-publish-slash-subscribe-pattern-and-event-driven-design/
@@ -92,7 +92,7 @@ gem 'twitty', '~> 0.1.5'
 # facebook client
 gem 'koala'
 # slack client
-gem 'slack-ruby-client', '~> 2.2.0'
+gem 'slack-ruby-client', '~> 2.0.0'
 # for dialogflow integrations
 gem 'google-cloud-dialogflow-v2'
 gem 'grpc'
@@ -107,16 +107,16 @@ gem 'google-cloud-translate-v3'
 gem 'ddtrace', require: false
 gem 'elastic-apm', require: false
 gem 'newrelic_rpm', require: false
-gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
+gem 'newrelic-sidekiq-metrics', require: false
 gem 'scout_apm', require: false
-gem 'sentry-rails', '>= 5.14.0', require: false
+gem 'sentry-rails', '>= 5.11.0', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.14.0', require: false
+gem 'sentry-sidekiq', '>= 5.11.0', require: false

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

 ##-- Push notification service --##
 gem 'fcm'
@@ -154,15 +154,15 @@ gem 'stripe'
 gem 'faker'

 # Include logrange conditionally in intializer using env variable
-gem 'lograge', '~> 0.14.0', require: false
+gem 'lograge', '~> 0.13.0', require: false

 # worked with microsoft refresh token
 gem 'omniauth-oauth2'

-gem 'audited', '~> 5.4', '>= 5.4.1'
+gem 'audited', '~> 5.4', '>= 5.4.0'

 # need for google auth
-gem 'omniauth', '>= 2.1.2'
+gem 'omniauth'
 gem 'omniauth-google-oauth2'
 gem 'omniauth-rails_csrf_protection', '~> 1.0'

@@ -198,10 +198,8 @@ group :development do
  gem 'squasher'

  # profiling
-  gem 'rack-mini-profiler', '>= 3.2.0', require: false
+  gem 'rack-mini-profiler', '>= 3.1.1', require: false
  gem 'stackprof'
-  # Should install the associated chrome extension to view query logs
-  gem 'meta_request'
 end

 group :test do
@@ -224,7 +222,7 @@ group :development, :test do
  gem 'byebug', platform: :mri
  gem 'climate_control'
  gem 'debug', '~> 1.8'
-  gem 'factory_bot_rails', '>= 6.4.3'
+  gem 'factory_bot_rails'
  gem 'listen'
  gem 'mock_redis'
  gem 'pry-rails'
@@ -113,22 +113,22 @@ GEM
      kaminari (>= 1.0)
      sassc-rails (~> 2.1)
      selectize-rails (~> 0.6)
-    administrate-field-active_storage (1.0.1)
+    administrate-field-active_storage (0.4.2)
      administrate (>= 0.2.2)
      rails (>= 7.0)
-    administrate-field-belongs_to_search (0.9.0)
+    administrate-field-belongs_to_search (0.8.0)
      administrate (>= 0.3, < 1.0)
      jbuilder (~> 2)
-      rails (>= 4.2, < 7.2)
+      rails (>= 4.2, < 7.1)
      selectize-rails (~> 0.6)
    annotate (3.2.0)
      activerecord (>= 3.2, < 8.0)
      rake (>= 10.4, < 14.0)
    ast (2.4.2)
    attr_extras (7.1.0)
-    audited (5.4.1)
-      activerecord (>= 5.0, < 7.7)
-      activesupport (>= 5.0, < 7.7)
+    audited (5.4.0)
+      activerecord (>= 5.0, < 7.2)
+      request_store (~> 1.2)
    aws-eventstream (1.2.0)
    aws-partitions (1.760.0)
    aws-sdk-core (3.171.1)
@@ -148,8 +148,7 @@ GEM
    barnes (0.0.9)
      multi_json (~> 1)
      statsd-ruby (~> 1.1)
-    base64 (0.1.1)
-    bcrypt (3.1.19)
+    bcrypt (3.1.18)
    bindex (0.8.1)
    blingfire (0.1.8)
    bootsnap (1.16.0)
@@ -175,7 +174,7 @@ GEM
      rexml
    crass (1.0.6)
    csv-safe (3.2.1)
-    cypress-on-rails (1.16.0)
+    cypress-on-rails (1.13.1)
      rack
    database_cleaner (2.0.2)
      database_cleaner-active_record (>= 2, < 3)
@@ -183,7 +182,7 @@ GEM
      activerecord (>= 5.a)
      database_cleaner-core (~> 2.0.0)
    database_cleaner-core (2.0.1)
-    date (3.3.4)
+    date (3.3.3)
    ddtrace (1.11.1)
      debase-ruby_core_source (>= 0.10.16, <= 3.2.0)
      libdatadog (~> 2.0.0.1.0)
@@ -194,7 +193,7 @@ GEM
      irb (>= 1.5.0)
      reline (>= 0.3.1)
    declarative (0.0.20)
-    devise (4.9.3)
+    devise (4.9.2)
      bcrypt (~> 3.0)
      orm_adapter (~> 0.1)
      railties (>= 4.1.0)
@@ -230,10 +229,10 @@ GEM
    facebook-messenger (2.0.1)
      httparty (~> 0.13, >= 0.13.7)
      rack (>= 1.4.5)
-    factory_bot (6.4.5)
+    factory_bot (6.2.1)
      activesupport (>= 5.0.0)
-    factory_bot_rails (6.4.3)
-      factory_bot (~> 6.4)
+    factory_bot_rails (6.2.0)
+      factory_bot (~> 6.2.0)
      railties (>= 5.0.0)
    faker (3.2.0)
      i18n (>= 1.8.11, < 2)
@@ -256,13 +255,13 @@ GEM
    fcm (1.0.8)
      faraday (>= 1.0.0, < 3.0)
      googleauth (~> 1)
-    ffi (1.16.3)
+    ffi (1.15.5)
    ffi-compiler (1.0.1)
      ffi (>= 1.0.0)
      rake
    flag_shih_tzu (0.3.23)
    foreman (0.87.2)
-    fugit (1.9.0)
+    fugit (1.8.1)
      et-orbi (~> 1, >= 1.2.7)
      raabro (~> 1.4)
    gapic-common (0.18.0)
@@ -274,7 +273,7 @@ GEM
      googleauth (~> 1.0)
      grpc (~> 1.36)
    geocoder (1.8.1)
-    gli (2.21.1)
+    gli (2.21.0)
    globalid (1.2.1)
      activesupport (>= 6.1)
    gmail_xoauth (0.4.2)
@@ -435,12 +434,12 @@ GEM
    llhttp-ffi (0.4.0)
      ffi-compiler (~> 1.0)
      rake (~> 13.0)
-    lograge (0.14.0)
+    lograge (0.13.0)
      actionpack (>= 4)
      activesupport (>= 4)
      railties (>= 4)
      request_store (~> 1.0)
-    loofah (2.22.0)
+    loofah (2.21.3)
      crass (~> 1.0.2)
      nokogiri (>= 1.12.0)
    mail (2.8.1)
@@ -451,16 +450,13 @@ GEM
    marcel (1.0.2)
    maxminddb (0.1.22)
    memoist (0.16.2)
-    meta_request (0.7.4)
-      rack-contrib (>= 1.1, < 3)
-      railties (>= 3.0.0, < 7.1)
    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.5)
+    mini_portile2 (2.8.4)
    minitest (5.20.0)
    mock_redis (0.36.0)
      ruby2_keywords
@@ -472,30 +468,29 @@ GEM
      activerecord (>= 5.2)
    net-http-persistent (4.0.2)
      connection_pool (~> 2.2)
-    net-imap (0.4.9)
+    net-imap (0.3.7)
      date
      net-protocol
    net-pop (0.1.2)
      net-protocol
-    net-protocol (0.2.2)
+    net-protocol (0.2.1)
      timeout
-    net-smtp (0.4.0)
+    net-smtp (0.3.3)
      net-protocol
    netrc (0.11.0)
-    newrelic-sidekiq-metrics (1.6.2)
-      newrelic_rpm (>= 8.0.0)
+    newrelic-sidekiq-metrics (1.6.1)
+      newrelic_rpm (~> 8)
      sidekiq
-    newrelic_rpm (9.6.0)
-      base64
-    nio4r (2.7.0)
-    nokogiri (1.16.0)
+    newrelic_rpm (8.16.0)
+    nio4r (2.5.9)
+    nokogiri (1.15.4)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
-    nokogiri (1.16.0-arm64-darwin)
+    nokogiri (1.15.4-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.16.0-x86_64-darwin)
+    nokogiri (1.15.4-x86_64-darwin)
      racc (~> 1.4)
-    nokogiri (1.16.0-x86_64-linux)
+    nokogiri (1.15.4-x86_64-linux)
      racc (~> 1.4)
    numo-narray (0.9.2.1)
    oauth (1.1.0)
@@ -511,7 +506,7 @@ GEM
      rack (>= 1.2, < 4)
      snaky_hash (~> 2.0)
      version_gem (~> 1.1)
-    omniauth (2.1.2)
+    omniauth (2.1.1)
      hashie (>= 3.4.6)
      rack (>= 2.2.3)
      rack-protection
@@ -553,23 +548,21 @@ GEM
    pry-rails (0.3.9)
      pry (>= 0.10.4)
    public_suffix (5.0.1)
-    puma (6.4.2)
+    puma (6.3.1)
      nio4r (~> 2.0)
    pundit (2.3.0)
      activesupport (>= 3.0.0)
    raabro (1.4.0)
-    racc (1.7.3)
+    racc (1.7.1)
    rack (2.2.8)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
-    rack-contrib (2.4.0)
-      rack (< 4)
    rack-cors (2.0.1)
      rack (>= 2.0.0)
-    rack-mini-profiler (3.2.0)
+    rack-mini-profiler (3.1.1)
      rack (>= 1.2.0)
-    rack-protection (3.1.0)
-      rack (~> 2.2, >= 2.2.4)
+    rack-protection (3.0.6)
+      rack
    rack-proxy (0.7.6)
      rack
    rack-test (2.1.0)
@@ -604,13 +597,13 @@ GEM
      thor (~> 1.0)
      zeitwerk (~> 2.5)
    rainbow (3.1.1)
-    rake (13.1.0)
+    rake (13.0.6)
    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.19.0)
+    redis-client (0.17.0)
      connection_pool
    redis-namespace (1.10.0)
      redis (>= 4)
@@ -623,7 +616,7 @@ GEM
      uber (< 0.2.0)
    request_store (1.5.1)
      rack (>= 1.4)
-    responders (3.1.1)
+    responders (3.1.0)
      actionpack (>= 5.2)
      railties (>= 5.2)
    rest-client (2.1.0)
@@ -709,23 +702,23 @@ GEM
      activesupport (>= 4)
    selectize-rails (0.12.6)
    semantic_range (3.0.0)
-    sentry-rails (5.14.0)
+    sentry-rails (5.11.0)
      railties (>= 5.0)
-      sentry-ruby (~> 5.14.0)
-    sentry-ruby (5.14.0)
+      sentry-ruby (~> 5.11.0)
+    sentry-ruby (5.11.0)
      concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.14.0)
-      sentry-ruby (~> 5.14.0)
+    sentry-sidekiq (5.11.0)
+      sentry-ruby (~> 5.11.0)
      sidekiq (>= 3.0)
    sexp_processor (4.17.0)
    shoulda-matchers (5.3.0)
      activesupport (>= 5.2.0)
-    sidekiq (7.2.0)
+    sidekiq (7.1.3)
      concurrent-ruby (< 2)
      connection_pool (>= 2.3.0)
      rack (>= 2.2.4)
      redis-client (>= 0.14.0)
-    sidekiq-cron (1.12.0)
+    sidekiq-cron (1.10.1)
      fugit (~> 1.8)
      globalid (>= 1.0.1)
      sidekiq (>= 6)
@@ -739,12 +732,13 @@ GEM
      json (>= 1.8, < 3)
      simplecov-html (~> 0.10.0)
    simplecov-html (0.10.2)
-    slack-ruby-client (2.2.0)
+    slack-ruby-client (2.0.0)
      faraday (>= 2.0)
      faraday-mashify
      faraday-multipart
      gli
      hashie
+      websocket-driver
    snaky_hash (2.0.1)
      hashie
      version_gem (~> 1.1, >= 1.1.1)
@@ -752,7 +746,7 @@ GEM
    spring-watcher-listen (2.1.0)
      listen (>= 2.7, < 4.0)
      spring (>= 4)
-    sprockets (4.2.1)
+    sprockets (4.2.0)
      concurrent-ruby (~> 1.0)
      rack (>= 2.2.4, < 4)
    sprockets-rails (3.4.2)
@@ -765,12 +759,12 @@ GEM
    stripe (8.5.0)
    telephone_number (1.4.20)
    test-prof (1.2.1)
-    thor (1.3.0)
-    tilt (2.3.0)
+    thor (1.2.2)
+    tilt (2.2.0)
    time_diff (0.3.0)
      activesupport
      i18n
-    timeout (0.4.1)
+    timeout (0.4.0)
    trailblazer-option (0.1.2)
    twilio-ruby (5.77.0)
      faraday (>= 0.9, < 3.0)
@@ -823,7 +817,7 @@ GEM
    working_hours (1.4.1)
      activesupport (>= 3.2)
      tzinfo
-    zeitwerk (2.6.12)
+    zeitwerk (2.6.11)

 PLATFORMS
  arm64-darwin-20
@@ -841,11 +835,11 @@ DEPENDENCIES
  activerecord-import
  acts-as-taggable-on
  administrate (>= 0.19.0)
-  administrate-field-active_storage (>= 1.0.1)
-  administrate-field-belongs_to_search (>= 0.9.0)
+  administrate-field-active_storage
+  administrate-field-belongs_to_search
  annotate
  attr_extras
-  audited (~> 5.4, >= 5.4.1)
+  audited (~> 5.4, >= 5.4.0)
  aws-sdk-s3
  azure-storage-blob!
  barnes
@@ -862,7 +856,7 @@ DEPENDENCIES
  database_cleaner
  ddtrace
  debug (~> 1.8)
-  devise (>= 4.9.3)
+  devise
  devise-secure_password!
  devise_token_auth
  dotenv-rails
@@ -870,7 +864,7 @@ DEPENDENCIES
  elastic-apm
  email_reply_trimmer
  facebook-messenger
-  factory_bot_rails (>= 6.4.3)
+  factory_bot_rails
  faker
  fcm
  flag_shih_tzu
@@ -898,14 +892,13 @@ DEPENDENCIES
  line-bot-api
  liquid
  listen
-  lograge (~> 0.14.0)
+  lograge (~> 0.13.0)
  maxminddb
-  meta_request
  mock_redis
  neighbor
-  newrelic-sidekiq-metrics (>= 1.6.2)
+  newrelic-sidekiq-metrics
  newrelic_rpm
-  omniauth (>= 2.1.2)
+  omniauth
  omniauth-google-oauth2
  omniauth-oauth2
  omniauth-rails_csrf_protection (~> 1.0)
@@ -918,12 +911,12 @@ DEPENDENCIES
  pundit
  rack-attack (>= 6.7.0)
  rack-cors
-  rack-mini-profiler (>= 3.2.0)
+  rack-mini-profiler (>= 3.1.1)
  rack-timeout
  rails (~> 7.0.8.0)
  redis
  redis-namespace
-  responders (>= 3.1.1)
+  responders
  rest-client
  reverse_markdown
  rspec-rails
@@ -935,14 +928,14 @@ DEPENDENCIES
  scout_apm
  scss_lint
  seed_dump
-  sentry-rails (>= 5.14.0)
+  sentry-rails (>= 5.11.0)
  sentry-ruby
-  sentry-sidekiq (>= 5.14.0)
+  sentry-sidekiq (>= 5.11.0)
  shoulda-matchers
  sidekiq (>= 7.1.3)
-  sidekiq-cron (>= 1.12.0)
+  sidekiq-cron (>= 1.10.1)
  simplecov (= 0.17.1)
-  slack-ruby-client (~> 2.2.0)
+  slack-ruby-client (~> 2.0.0)
  spring
  spring-watcher-listen
  squasher
@@ -1,3 +1,3 @@
 backend: RAILS_ENV=test bin/rails s -p 5050
-frontend: export NODE_OPTIONS=--openssl-legacy-provider && bin/webpack-dev-server
-worker: RAILS_ENV=test dotenv bundle exec sidekiq -C config/sidekiq.yml
+frontend: bin/webpack-dev-server
+worker: dotenv RAILS_ENV=test bundle exec sidekiq -C config/sidekiq.yml
@@ -1,12 +1,10 @@
-<img src="https://user-images.githubusercontent.com/2246121/282256557-1570674b-d142-4198-9740-69404cc6a339.png#gh-light-mode-only" width="100%" alt="Chat dashboard dark mode"/>
-<img src="https://user-images.githubusercontent.com/2246121/282256632-87f6a01b-6467-4e0e-8a93-7bbf66d03a17.png#gh-dark-mode-only" width="100%" alt="Chat dashboard"/>
+<p align="center">
+  <img src="https://s3.us-west-2.amazonaws.com/gh-assets.chatwoot.com/brand.svg" alt="Woot-logo" width="240" />

-___
+  <p align="center">Customer engagement suite, an open-source alternative to Intercom, Zendesk, Salesforce Service Cloud etc.</p>
+</p>

-# Chatwoot 
-
-Customer engagement suite, an open-source alternative to Intercom, Zendesk, Salesforce Service Cloud etc.
-<p>
+<p align="center">
  <a href="https://heroku.com/deploy?template=https://github.com/chatwoot/chatwoot/tree/master" alt="Deploy to Heroku">
     <img width="150" alt="Deploy" src="https://www.herokucdn.com/deploy/button.svg"/>
  </a>
@@ -15,7 +13,9 @@ Customer engagement suite, an open-source alternative to Intercom, Zendesk, Sale
  </a>
 </p>

-<p>
+___
+
+<p align="center">
  <a href="https://codeclimate.com/github/chatwoot/chatwoot/maintainability"><img src="https://api.codeclimate.com/v1/badges/e6e3f66332c91e5a4c0c/maintainability" alt="Maintainability"></a>
  <img src="https://img.shields.io/circleci/build/github/chatwoot/chatwoot" alt="CircleCI Badge">
    <a href="https://hub.docker.com/r/chatwoot/chatwoot/"><img src="https://img.shields.io/docker/pulls/chatwoot/chatwoot" alt="Docker Pull Badge"></a>
@@ -29,8 +29,9 @@ Customer engagement suite, an open-source alternative to Intercom, Zendesk, Sale
  <a href="https://artifacthub.io/packages/helm/chatwoot/chatwoot"><img src="https://img.shields.io/endpoint?url=https://artifacthub.io/badge/repository/artifact-hub" alt="Artifact HUB"></a>
 </p>

-<img src="https://user-images.githubusercontent.com/2246121/282255783-ee8a50c9-f42d-4752-8201-2d59965a663d.png#gh-light-mode-only" width="100%" alt="Chat dashboard dark mode"/>
-<img src="https://user-images.githubusercontent.com/2246121/282255784-3d1994ec-d895-4ff5-ac68-d819987e1869.png#gh-dark-mode-only" width="100%" alt="Chat dashboard"/>
+<img src="https://chatwoot-public-assets.s3.amazonaws.com/github/screenshot.png" width="100%" alt="Chat dashboard"/>
+
+

 Chatwoot is an open-source, self-hosted customer engagement suite. Chatwoot lets you view and manage your customer data, communicate with them irrespective of which medium they use, and re-engage them based on their profile.

@@ -118,4 +119,4 @@ Thanks goes to all these [wonderful people](https://www.chatwoot.com/docs/contri
 <a href="https://github.com/chatwoot/chatwoot/graphs/contributors"><img src="https://opencollective.com/chatwoot/contributors.svg?width=890&button=false" /></a>


-*Chatwoot* &copy; 2017-2024, Chatwoot Inc - Released under the MIT License.
+*Chatwoot* &copy; 2017-2023, Chatwoot Inc - Released under the MIT License.
@@ -1 +1 @@
-3.3.1
+3.1.0
@@ -1 +1 @@
-2.7.0
+2.4.0
@@ -25,6 +25,7 @@
@import 'components/flashes';
@import 'components/form-actions';
@import 'components/main-content';
+@import 'components/navigation';
@import 'components/pagination';
@import 'components/search';
@import 'components/reports';
@@ -1,7 +1,7 @@
 html {
  background-color: $color-white;
  box-sizing: border-box;
-  font-size: 16px;
+  font-size: 10px;
  -webkit-font-smoothing: antialiased;
 }

@@ -16,8 +16,8 @@
 .attribute-data {
  float: left;
  margin-bottom: $base-spacing;
-  margin-left: 1.25rem;
-  width: calc(84% - 0.625rem);
+  margin-left: 2rem;
+  width: calc(84% - 1rem);
 }

 .attribute--nested {
@@ -9,22 +9,22 @@

 .field-unit__label {
  float: left;
-  margin-left: 0.625rem;
+  margin-left: 1rem;
  text-align: right;
-  width: calc(15% - 0.625rem);
+  width: calc(15% - 1rem);
 }

 .field-unit__field {
  float: left;
-  margin-left: 1.25rem;
-  max-width: 31.15rem;
+  margin-left: 2rem;
+  max-width: 50rem;
  width: 100%;
 }

 .field-unit--nested {
  border: $base-border;
  margin-left: 7.5%;
-  max-width: 37.5rem;
+  max-width: 60rem;
  padding: $small-spacing;
  width: 100%;

@@ -1,3 +1,3 @@
 .form-actions {
-  margin-left: calc(15% + 1.25rem);
+  margin-left: calc(15% + 2rem);
 }
@@ -13,10 +13,6 @@
  table {
    font-size: $font-size-small;
  }
-
-  form {
-    margin-top: $space-two;
-  }
 }

 .main-content__header {
@@ -24,7 +20,7 @@
  background-color: $color-white;
  border-bottom: 1px solid $color-border;
  display: flex;
-  min-height: 3.5rem;
+  min-height: 5.6rem;
  padding: $space-small $space-normal;
 }

@@ -0,0 +1,88 @@
+.logo-brand {
+  margin-bottom: $space-normal;
+  padding: $space-normal $space-smaller $space-small;
+  text-align: left;
+
+  img {
+    margin-bottom: $space-smaller;
+    max-height: 3rem;
+  }
+}
+
+.navigation {
+  background: $white;
+  border-right: 1px solid $color-border;
+  display: flex;
+  flex-direction: column;
+  font-size: $font-size-default;
+  font-weight: $font-weight-medium;
+  height: 100%;
+  justify-content: flex-start;
+  left: 0;
+  margin: 0;
+  overflow: auto;
+  padding: $space-normal;
+  position: fixed;
+  top: 0;
+  width: 21rem;
+  z-index: 1023;
+
+  li {
+    align-items: center;
+    display: flex;
+    font-size: $font-size-small;
+
+    a {
+      color: $color-gray;
+      text-decoration: none;
+    }
+
+    i {
+      min-width: $space-medium;
+    }
+  }
+
+  hr {
+    margin: $space-slab;
+  }
+}
+
+.navigation__link {
+  background-color: transparent;
+  color: $color-gray;
+  display: block;
+  line-height: 1;
+  margin-bottom: $space-smaller;
+  padding: $space-small;
+
+  &:hover {
+    color: $blue;
+
+    a {
+      color: $blue;
+    }
+  }
+
+
+  &.navigation__link--active {
+    background-color: $color-background;
+    border-radius: $base-border-radius;
+    color: $blue;
+
+    a {
+      color: $blue;
+    }
+  }
+}
+
+.logout {
+  bottom: $space-normal;
+  left: $space-normal;
+  position: fixed;
+}
+
+.app-version {
+  color: $color-gray;
+  font-size: $font-size-small;
+  padding-top: $space-smaller;
+}
@@ -1,7 +1,7 @@
 .search {
  margin-left: auto;
-  margin-right: 1.25rem;
-  max-width: 27.5rem;
+  margin-right: 2rem;
+  max-width: 44rem;
  position: relative;
  width: 100%;
 }
@@ -1,10 +1,10 @@
 // Typography
-$base-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+$base-font-family: PlusJakarta, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
  "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
  sans-serif !default;
 $heading-font-family: $base-font-family !default;

-$base-font-size: 16px !default;
+$base-font-size: 14px !default;

 $base-line-height: 1.5 !default;
 $heading-line-height: 1.2 !default;
@@ -1,30 +1,30 @@
 // Font sizes
-$font-size-nano: 0.5rem;
-$font-size-micro: 0.675rem;
-$font-size-mini: 0.75rem;
-$font-size-small: 0.875rem;
-$font-size-default: 1rem;
-$font-size-medium: 1.125rem;
-$font-size-large: 1.375rem;
-$font-size-big: 1.5rem;
-$font-size-bigger: 1.75rem;
-$font-size-mega: 2.125rem;
-$font-size-giga: 2.5rem;
+$font-size-nano: 0.8rem;
+$font-size-micro: 1.0rem;
+$font-size-mini: 1.2rem;
+$font-size-small: 1.4rem;
+$font-size-default: 1.6rem;
+$font-size-medium: 1.8rem;
+$font-size-large: 2.2rem;
+$font-size-big: 2.4rem;
+$font-size-bigger: 3.0rem;
+$font-size-mega: 3.4rem;
+$font-size-giga: 4.0rem;

 // spaces
 $zero: 0;
-$space-micro: 0.125rem;
-$space-smaller: 0.25rem;
-$space-small: 0.5rem;
-$space-one: 0.675rem;
-$space-slab: 0.75rem;
-$space-normal: 1rem;
-$space-two: 1.25rem;
-$space-medium: 1.5rem;
-$space-large: 2rem;
-$space-larger: 3rem;
-$space-jumbo: 4rem;
-$space-mega: 6.25rem;
+$space-micro: 0.2rem;
+$space-smaller: 0.4rem;
+$space-small: 0.8rem;
+$space-one: 1rem;
+$space-slab: 1.2rem;
+$space-normal: 1.6rem;
+$space-two: 2.0rem;
+$space-medium: 2.4rem;
+$space-large: 3.2rem;
+$space-larger: 4.8rem;
+$space-jumbo: 6.4rem;
+$space-mega: 10.0rem;

 // font-weight
 $font-weight-feather: 100;
@@ -25,9 +25,7 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
      build_contact_inbox
      build_message
    end
-  rescue Koala::Facebook::AuthenticationError => e
-    Rails.logger.warn("Facebook authentication error for inbox: #{@inbox.id} with error: #{e.message}")
-    Rails.logger.error e
+  rescue Koala::Facebook::AuthenticationError
    @inbox.channel.authorization_error!
  rescue StandardError => e
    ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception
@@ -95,9 +93,6 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
      message_type: @message_type,
      content: response.content,
      source_id: response.identifier,
-      content_attributes: {
-        in_reply_to_external_id: response.in_reply_to_external_id
-      },
      sender: @outgoing_echo ? nil : @contact_inbox.contact
    }
  end
@@ -110,15 +105,11 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
    }
  end

-  # rubocop:disable Metrics/AbcSize
-  # rubocop:disable Metrics/MethodLength
  def contact_params
    begin
      k = Koala::Facebook::API.new(@inbox.channel.page_access_token) if @inbox.facebook?
      result = k.get_object(@sender_id) || {}
-    rescue Koala::Facebook::AuthenticationError => e
-      Rails.logger.warn("Facebook authentication error for inbox: #{@inbox.id} with error: #{e.message}")
-      Rails.logger.error e
+    rescue Koala::Facebook::AuthenticationError
      @inbox.channel.authorization_error!
      raise
    rescue Koala::Facebook::ClientError => e
@@ -136,6 +127,4 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
    end
    process_contact_params_result(result)
  end
-  # rubocop:enable Metrics/AbcSize
-  # rubocop:enable Metrics/MethodLength
 end
@@ -20,9 +20,7 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
    ActiveRecord::Base.transaction do
      build_message
    end
-  rescue Koala::Facebook::AuthenticationError => e
-    Rails.logger.warn("Instagram authentication error for inbox: #{@inbox.id} with error: #{e.message}")
-    Rails.logger.error e
+  rescue Koala::Facebook::AuthenticationError
    @inbox.channel.authorization_error!
    raise
  rescue StandardError => e
@@ -48,10 +46,6 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
    @outgoing_echo ? recipient_id : sender_id
  end

-  def message_is_unsupported?
-    message[:is_unsupported].present? && @messaging[:message][:is_unsupported] == true
-  end
-
  def sender_id
    @messaging[:sender][:id]
  end
@@ -82,10 +76,6 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
    message[:reply_to][:story] if message[:reply_to].present? && message[:reply_to][:story].present?
  end

-  def message_reply_attributes
-    message[:reply_to][:mid] if message[:reply_to].present? && message[:reply_to][:mid].present?
-  end
-
  def build_message
    return if @outgoing_echo && already_sent_from_chatwoot?
    return if message_content.blank? && all_unsupported_files?
@@ -122,20 +112,14 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
  end

  def message_params
-    params = {
+    {
      account_id: conversation.account_id,
      inbox_id: conversation.inbox_id,
      message_type: message_type,
      source_id: message_identifier,
      content: message_content,
-      sender: @outgoing_echo ? nil : contact,
-      content_attributes: {
-        in_reply_to_external_id: message_reply_attributes
-      }
+      sender: @outgoing_echo ? nil : contact
    }
-
-    params[:content_attributes][:is_unsupported] = true if message_is_unsupported?
-    params
  end

  def already_sent_from_chatwoot?
@@ -9,11 +9,11 @@ class Messages::MessageBuilder
    @user = user
    @message_type = params[:message_type] || 'outgoing'
    @attachments = params[:attachments]
-    @automation_rule = content_attributes&.dig(:automation_rule_id)
+    @automation_rule = @params&.dig(:content_attributes, :automation_rule_id)
    return unless params.instance_of?(ActionController::Parameters)

-    @in_reply_to = content_attributes&.dig(:in_reply_to)
-    @items = content_attributes&.dig(:items)
+    @in_reply_to = params.to_unsafe_h&.dig(:content_attributes, :in_reply_to)
+    @items = params.to_unsafe_h&.dig(:content_attributes, :items)
  end

  def perform
@@ -26,38 +26,6 @@ class Messages::MessageBuilder

  private

-  # Extracts content attributes from the given params.
-  # - Converts ActionController::Parameters to a regular hash if needed.
-  # - Attempts to parse a JSON string if content is a string.
-  # - Returns an empty hash if content is not present, if there's a parsing error, or if it's an unexpected type.
-  def content_attributes
-    params = convert_to_hash(@params)
-    content_attributes = params.fetch(:content_attributes, {})
-
-    return parse_json(content_attributes) if content_attributes.is_a?(String)
-    return content_attributes if content_attributes.is_a?(Hash)
-
-    {}
-  end
-
-  # Converts the given object to a hash.
-  # If it's an instance of ActionController::Parameters, converts it to an unsafe hash.
-  # Otherwise, returns the object as-is.
-  def convert_to_hash(obj)
-    return obj.to_unsafe_h if obj.instance_of?(ActionController::Parameters)
-
-    obj
-  end
-
-  # Attempts to parse a string as JSON.
-  # If successful, returns the parsed hash with symbolized names.
-  # If unsuccessful, returns nil.
-  def parse_json(content)
-    JSON.parse(content, symbolize_names: true)
-  rescue JSON::ParserError
-    {}
-  end
-
  def process_attachments
    return if @attachments.blank?

@@ -149,8 +117,7 @@ class Messages::MessageBuilder
      content_type: @params[:content_type],
      items: @items,
      in_reply_to: @in_reply_to,
-      echo_id: @params[:echo_id],
-      source_id: @params[:source_id]
+      echo_id: @params[:echo_id]
    }.merge(external_created_at).merge(automation_rule_id).merge(campaign_id).merge(template_params)
  end
 end
@@ -1,5 +1,5 @@
 class NotificationBuilder
-  pattr_initialize [:notification_type!, :user!, :account!, :primary_actor!, :secondary_actor]
+  pattr_initialize [:notification_type!, :user!, :account!, :primary_actor!]

  def perform
    return unless user_subscribed_to_notification?
@@ -9,7 +9,7 @@ class NotificationBuilder

  private

-  def current_user
+  def secondary_actor
    Current.user
  end

@@ -29,8 +29,7 @@ class NotificationBuilder
      notification_type: notification_type,
      account: account,
      primary_actor: primary_actor,
-      # secondary_actor is secondary_actor if present, else current_user
-      secondary_actor: secondary_actor || current_user
+      secondary_actor: secondary_actor
    )
  end
 end
@@ -15,10 +15,7 @@ class V2::ReportBuilder
  end

  def timeseries
-    return send(params[:metric]) if metric_valid?
-
-    Rails.logger.error "ReportBuilder: Invalid metric - #{params[:metric]}"
-    {}
+    send(params[:metric])
  end

  # For backward compatible with old report
@@ -56,16 +53,6 @@ class V2::ReportBuilder

  private

-  def metric_valid?
-    %w[conversations_count
-       incoming_messages_count
-       outgoing_messages_count
-       avg_first_response_time
-       avg_resolution_time reply_time
-       resolutions_count
-       reply_time].include?(params[:metric])
-  end
-
  def inbox
    @inbox ||= account.inboxes.find(params[:id])
  end
@@ -9,6 +9,7 @@ class Api::V1::Accounts::Actions::ContactMergesController < Api::V1::Accounts::B
      mergee_contact: @mergee_contact
    )
    contact_merge_action.perform
+    render json: @base_contact
  end

  private
@@ -10,18 +10,11 @@ class Api::V1::Accounts::AgentBotsController < Api::V1::Accounts::BaseController
  def show; end

  def create
-    @agent_bot = Current.account.agent_bots.create!(permitted_params.except(:avatar_url))
-    process_avatar_from_url
+    @agent_bot = Current.account.agent_bots.create!(permitted_params)
  end

  def update
-    @agent_bot.update!(permitted_params.except(:avatar_url))
-    process_avatar_from_url
-  end
-
-  def avatar
-    @agent_bot.avatar.purge if @agent_bot.avatar.attached?
-    @agent_bot
+    @agent_bot.update!(permitted_params)
  end

  def destroy
@@ -37,10 +30,6 @@ class Api::V1::Accounts::AgentBotsController < Api::V1::Accounts::BaseController
  end

  def permitted_params
-    params.permit(:name, :description, :outgoing_url, :avatar, :avatar_url, :bot_type, bot_config: [:csml_content])
-  end
-
-  def process_avatar_from_url
-    ::Avatar::AvatarFromUrlJob.perform_later(@agent_bot, params[:avatar_url]) if params[:avatar_url].present?
+    params.permit(:name, :description, :outgoing_url, :bot_type, bot_config: [:csml_content])
  end
 end
@@ -10,7 +10,7 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
    @articles_count = @all_articles.count

    @articles = if list_params[:category_slug].present?
-                  @all_articles.order_by_position.page(@current_page)
+                  @all_articles.order_by_position.page(@current_page).per(50)
                else
                  @all_articles.order_by_updated_at.page(@current_page)
                end
@@ -48,7 +48,7 @@ class Api::V1::Accounts::CategoriesController < Api::V1::Accounts::BaseControlle

  def category_params
    params.require(:category).permit(
-      :name, :description, :position, :slug, :locale, :icon, :parent_category_id, :associated_category_id
+      :name, :description, :position, :slug, :locale, :parent_category_id, :associated_category_id
    )
  end

@@ -83,14 +83,14 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
      @contact = Current.account.contacts.new(permitted_params.except(:avatar_url))
      @contact.save!
      @contact_inbox = build_contact_inbox
-      process_avatar_from_url
+      process_avatar
    end
  end

  def update
    @contact.assign_attributes(contact_update_params)
    @contact.save!
-    process_avatar_from_url
+    process_avatar if permitted_params[:avatar].present? || permitted_params[:avatar_url].present?
  end

  def destroy
@@ -174,7 +174,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
    @contact = Current.account.contacts.includes(contact_inboxes: [:inbox]).find(params[:id])
  end

-  def process_avatar_from_url
+  def process_avatar
    ::Avatar::AvatarFromUrlJob.perform_later(@contact, params[:avatar_url]) if params[:avatar_url].present?
  end

@@ -14,8 +14,7 @@ class Api::V1::Accounts::Conversations::AssignmentsController < Api::V1::Account

  def set_agent
    @agent = Current.account.users.find_by(id: params[:assignee_id])
-    @conversation.assignee = @agent
-    @conversation.save!
+    @conversation.update_assignee(@agent)
    render_agent
  end

@@ -18,15 +18,6 @@ class Api::V1::Accounts::Conversations::MessagesController < Api::V1::Accounts::
    end
  end

-  def retry
-    return if message.blank?
-
-    message.update!(status: :sent, content_attributes: {})
-    ::SendReplyJob.perform_later(message.id)
-  rescue StandardError => e
-    render_could_not_create_error(e.message)
-  end
-
  def translate
    return head :ok if already_translated_content_available?

@@ -60,26 +60,13 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
  end

  def toggle_status
-    # FIXME: move this logic into a service object
-    if pending_to_open_by_bot?
-      @conversation.bot_handoff!
-    elsif params[:status].present?
+    if params[:status]
      set_conversation_status
      @status = @conversation.save!
    else
      @status = @conversation.toggle_status
    end
-    assign_conversation if should_assign_conversation?
-  end
-
-  def pending_to_open_by_bot?
-    return false unless Current.user.is_a?(AgentBot)
-
-    @conversation.status == 'pending' && params[:status] == 'open'
-  end
-
-  def should_assign_conversation?
-    @conversation.status == 'open' && Current.user.is_a?(User) && Current.user&.agent?
+    assign_conversation if @conversation.status == 'open' && Current.user.is_a?(User) && Current.user&.agent?
  end

  def toggle_priority
@@ -123,8 +110,8 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
  end

  def assign_conversation
-    @conversation.assignee = current_user
-    @conversation.save!
+    @agent = Current.account.users.find(current_user.id)
+    @conversation.update_assignee(@agent)
  end

  def conversation
@@ -1,8 +1,7 @@
 class Api::V1::Accounts::NotificationsController < Api::V1::Accounts::BaseController
  RESULTS_PER_PAGE = 15
-  include DateRangeHelper

-  before_action :fetch_notification, only: [:update, :destroy, :snooze]
+  before_action :fetch_notification, only: [:update]
  before_action :set_primary_actor, only: [:read_all]
  before_action :set_current_page, only: [:index]

@@ -29,21 +28,11 @@ class Api::V1::Accounts::NotificationsController < Api::V1::Accounts::BaseContro
    render json: @notification
  end

-  def destroy
-    @notification.destroy
-    head :ok
-  end
-
  def unread_count
    @unread_count = current_user.notifications.where(account_id: current_account.id, read_at: nil).count
    render json: @unread_count
  end

-  def snooze
-    @notification.update(snoozed_until: parse_date_time(params[:snoozed_until].to_s)) if params[:snoozed_until]
-    render json: @notification
-  end
-
  private

  def set_primary_actor
@@ -47,11 +47,6 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
    head :ok
  end

-  def logo
-    @portal.logo.purge if @portal.logo.attached?
-    head :ok
-  end
-
  def process_attached_logo
    blob_id = params[:blob_id]
    blob = ActiveStorage::Blob.find_by(id: blob_id)
@@ -79,9 +79,6 @@ class Api::V1::Widget::BaseController < ApplicationController
      sender: @contact,
      content: permitted_params[:message][:content],
      inbox_id: conversation.inbox_id,
-      content_attributes: {
-        in_reply_to: permitted_params[:message][:reply_to]
-      },
      echo_id: permitted_params[:message][:echo_id],
      message_type: :incoming
    }
@@ -1,6 +1,5 @@
 class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
  include Events::Types
-  before_action :render_not_found_if_empty, only: [:toggle_typing, :toggle_status, :set_custom_attributes, :destroy_custom_attributes]

  def index
    @conversation = conversation
@@ -28,7 +27,6 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController

    conversation.contact_last_seen_at = DateTime.now.utc
    conversation.save!
-    ::Conversations::UpdateMessageStatusJob.perform_later(conversation.id, conversation.contact_last_seen_at)
    head :ok
  end

@@ -43,6 +41,8 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
  end

  def toggle_typing
+    head :ok && return if conversation.nil?
+
    case permitted_params[:typing_status]
    when 'on'
      trigger_typing_event(CONVERSATION_TYPING_ON)
@@ -54,6 +54,8 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
  end

  def toggle_status
+    return head :not_found if conversation.nil?
+
    return head :forbidden unless @web_widget.end_conversation?

    unless conversation.resolved?
@@ -79,10 +81,6 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
    Rails.configuration.dispatcher.dispatch(event, Time.zone.now, conversation: conversation, user: @contact)
  end

-  def render_not_found_if_empty
-    return head :not_found if conversation.nil?
-  end
-
  def permitted_params
    params.permit(:id, :typing_status, :website_token, :email, contact: [:name, :email, :phone_number],
                                                               message: [:content, :referer_url, :timestamp, :echo_id],
@@ -64,7 +64,7 @@ class Api::V1::Widget::MessagesController < Api::V1::Widget::BaseController

  def permitted_params
    # timestamp parameter is used in create conversation method
-    params.permit(:id, :before, :after, :website_token, contact: [:name, :email], message: [:content, :referer_url, :timestamp, :echo_id, :reply_to])
+    params.permit(:id, :before, :after, :website_token, contact: [:name, :email], message: [:content, :referer_url, :timestamp, :echo_id])
  end

  def set_message
@@ -14,7 +14,7 @@ module AccessTokenAuthHelper
    render_unauthorized('Invalid Access Token') && return if @access_token.blank?

    @resource = @access_token.owner
-    Current.user = @resource if [User, AgentBot].include?(@resource.class)
+    Current.user = @resource if current_user.is_a?(User)
  end

  def validate_bot_access_token!
@@ -9,15 +9,13 @@ class Platform::Api::V1::AgentBotsController < PlatformController
  def show; end

  def create
-    @resource = AgentBot.new(agent_bot_params.except(:avatar_url))
+    @resource = AgentBot.new(agent_bot_params)
    @resource.save!
-    process_avatar_from_url
    @platform_app.platform_app_permissibles.find_or_create_by(permissible: @resource)
  end

  def update
-    @resource.update!(agent_bot_params.except(:avatar_url))
-    process_avatar_from_url
+    @resource.update!(agent_bot_params)
  end

  def destroy
@@ -25,11 +23,6 @@ class Platform::Api::V1::AgentBotsController < PlatformController
    head :ok
  end

-  def avatar
-    @resource.avatar.purge if @resource.avatar.attached?
-    @resource
-  end
-
  private

  def set_resource
@@ -37,10 +30,6 @@ class Platform::Api::V1::AgentBotsController < PlatformController
  end

  def agent_bot_params
-    params.permit(:name, :description, :account_id, :outgoing_url, :avatar, :avatar_url)
-  end
-
-  def process_avatar_from_url
-    ::Avatar::AvatarFromUrlJob.perform_later(@resource, params[:avatar_url]) if params[:avatar_url].present?
+    params.permit(:name, :description, :account_id, :outgoing_url)
  end
 end
@@ -23,7 +23,6 @@ class Public::Api::V1::Inboxes::ConversationsController < Public::Api::V1::Inbox
  def update_last_seen
    @conversation.contact_last_seen_at = DateTime.now.utc
    @conversation.save!
-    ::Conversations::UpdateMessageStatusJob.perform_later(@conversation.id, @conversation.contact_last_seen_at)
    head :ok
  end

@@ -39,6 +39,10 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
    )
  end

+  def portal
+    @portal ||= Portal.find_by!(slug: permitted_params[:slug], archived: false)
+  end
+
  def list_params
    params.permit(:query, :locale, :sort, :status)
  end
@@ -11,11 +11,11 @@ class Public::Api::V1::Portals::BaseController < PublicController
  end

  def set_color_scheme
-    @theme_from_params = params[:theme] if %w[dark light].include?(params[:theme])
-  end
-
-  def portal
-    @portal ||= Portal.find_by!(slug: params[:slug], archived: false)
+    @theme = if %w[dark light].include?(params[:theme])
+               params[:theme]
+             else
+               ''
+             end
  end

  def set_locale(&)
@@ -40,8 +40,6 @@ class Public::Api::V1::Portals::BaseController < PublicController

  def switch_locale_with_article(&)
    article = Article.find_by(slug: params[:article_slug])
-    Rails.logger.info "Article: not found for slug: #{params[:article_slug]}"
-    render_404 && return if article.blank?

    @locale = if article.category.present?
                article.category.locale
@@ -55,9 +53,4 @@ class Public::Api::V1::Portals::BaseController < PublicController
  def allow_iframe_requests
    response.headers.delete('X-Frame-Options') if @is_plain_layout_enabled
  end
-
-  def render_404
-    portal
-    render 'public/api/v1/portals/error/404', status: :not_found
-  end
 end
@@ -13,9 +13,10 @@ class Public::Api::V1::Portals::CategoriesController < Public::Api::V1::Portals:
  private

  def set_category
-    @category = @portal.categories.find_by(locale: params[:locale], slug: params[:category_slug])
+    @category = @portal.categories.find_by!(locale: params[:locale], slug: params[:category_slug])
+  end

-    Rails.logger.info "Category: not found for slug: #{params[:category_slug]}"
-    render_404 && return if @category.blank?
+  def portal
+    @portal ||= Portal.find_by!(slug: params[:slug], archived: false)
  end
 end
@@ -1,38 +1,21 @@
 class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
-  before_action :set_config
-  before_action :allowed_configs
  def show
+    @allowed_configs = %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET]
    # ref: https://github.com/rubocop/rubocop/issues/7767
    # rubocop:disable Style/HashTransformValues
-    @app_config = InstallationConfig.where(name: @allowed_configs)
-                                    .pluck(:name, :serialized_value)
-                                    .map { |name, serialized_value| [name, serialized_value['value']] }
-                                    .to_h
+    @fb_config = InstallationConfig.where(name: @allowed_configs)
+                                   .pluck(:name, :serialized_value)
+                                   .map { |name, serialized_value| [name, serialized_value['value']] }
+                                   .to_h
    # rubocop:enable Style/HashTransformValues
  end

  def create
    params['app_config'].each do |key, value|
-      next unless @allowed_configs.include?(key)
-
      i = InstallationConfig.where(name: key).first_or_create(value: value, locked: false)
      i.value = value
      i.save!
    end
-    # rubocop:disable Rails/I18nLocaleTexts
-    redirect_to super_admin_settings_path, notice: 'App Configs updated successfully'
-    # rubocop:enable Rails/I18nLocaleTexts
-  end
-
-  private
-
-  def set_config
-    @config = params[:config]
-  end
-
-  def allowed_configs
-    @allowed_configs = %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET]
+    redirect_to super_admin_app_config_url
  end
 end
-
-SuperAdmin::AppConfigsController.prepend_mod_with('SuperAdmin::AppConfigsController')
@@ -20,13 +20,4 @@ class SuperAdmin::ApplicationController < Administrate::ApplicationController
      params.fetch(resource_name, {}).fetch(:direction, 'desc')
    )
  end
-
-  private
-
-  def invalid_action_perfomed
-    # rubocop:disable Rails/I18nLocaleTexts
-    flash[:error] = 'Invalid action performed'
-    # rubocop:enable Rails/I18nLocaleTexts
-    redirect_back(fallback_location: root_path)
-  end
 end
@@ -27,8 +27,7 @@ class SuperAdmin::Devise::SessionsController < Devise::SessionsController

    true
  rescue StandardError => e
-    Rails.logger.error e.message
-    @error_message = 'Invalid credentials. Please try again.'
+    @error_message = e.message
    false
  end
 end
@@ -1,5 +1,4 @@
 class SuperAdmin::InstallationConfigsController < SuperAdmin::ApplicationController
-  rescue_from ActiveRecord::RecordNotUnique, :with => :invalid_action_perfomed
  # Overwrite any of the RESTful controller actions to implement custom behavior
  # For example, you may want to send an email after a foo is updated.
  #
@@ -1,10 +0,0 @@
-class SuperAdmin::SettingsController < SuperAdmin::ApplicationController
-  def show; end
-
-  def refresh
-    Internal::CheckNewVersionsJob.perform_now
-    # rubocop:disable Rails/I18nLocaleTexts
-    redirect_to super_admin_settings_path, notice: 'Instance status refreshed'
-    # rubocop:enable Rails/I18nLocaleTexts
-  end
-end
@@ -1,21 +0,0 @@
-class Twilio::DeliveryStatusController < ApplicationController
-  def create
-    ::Twilio::DeliveryStatusService.new(params: permitted_params).perform
-
-    head :no_content
-  end
-
-  private
-
-  def permitted_params
-    params.permit(
-      :AccountSid,
-      :From,
-      :MessageSid,
-      :MessagingServiceSid,
-      :MessageStatus,
-      :ErrorCode,
-      :ErrorMessage
-    )
-  end
-end
@@ -30,7 +30,11 @@ class AccessTokenDashboard < Administrate::BaseDashboard
  # SHOW_PAGE_ATTRIBUTES
  # an array of attributes that will be displayed on the model's show page.
  SHOW_PAGE_ATTRIBUTES = %i[
+    owner
+    id
    token
+    created_at
+    updated_at
  ].freeze

  # FORM_ATTRIBUTES
@@ -46,7 +46,6 @@ class AgentBotDashboard < Administrate::BaseDashboard
    name
    description
    outgoing_url
-    access_token
  ].freeze

  # FORM_ATTRIBUTES
@@ -32,7 +32,6 @@ class PlatformAppDashboard < Administrate::BaseDashboard
    name
    created_at
    updated_at
-    access_token
  ].freeze

  # FORM_ATTRIBUTES
@@ -36,8 +36,7 @@ class UserDashboard < Administrate::BaseDashboard
    updated_at: Field::DateTime,
    pubsub_token: Field::String,
    type: Field::Select.with_options(collection: [nil, 'SuperAdmin']),
-    accounts: CountField,
-    access_token: Field::HasOne
+    accounts: CountField
  }.freeze

  # COLLECTION_ATTRIBUTES
@@ -68,7 +67,6 @@ class UserDashboard < Administrate::BaseDashboard
    updated_at
    confirmed_at
    account_users
-    access_token
  ].freeze

  # FORM_ATTRIBUTES
@@ -18,9 +18,4 @@ class ContactDrop < BaseDrop
  def last_name
    @obj.try(:name).try(:split).try(:last).try(:capitalize) if @obj.try(:name).try(:split).try(:size) > 1
  end
-
-  def custom_attribute
-    custom_attributes = @obj.try(:custom_attributes) || {}
-    custom_attributes.transform_keys(&:to_s)
-  end
 end
@@ -19,11 +19,6 @@ class ConversationDrop < BaseDrop
    end
  end

-  def custom_attribute
-    custom_attributes = @obj.try(:custom_attributes) || {}
-    custom_attributes.transform_keys(&:to_s)
-  end
-
  private

  def message_sender_name(sender)
@@ -3,21 +3,13 @@ class ConversationFinder

  DEFAULT_STATUS = 'open'.freeze
  SORT_OPTIONS = {
-    'last_activity_at_asc' => %w[sort_on_last_activity_at asc],
-    'last_activity_at_desc' => %w[sort_on_last_activity_at desc],
-    'created_at_asc' => %w[sort_on_created_at asc],
-    'created_at_desc' => %w[sort_on_created_at desc],
-    'priority_asc' => %w[sort_on_priority asc],
-    'priority_desc' => %w[sort_on_priority desc],
-    'waiting_since_asc' => %w[sort_on_waiting_since asc],
-    'waiting_since_desc' => %w[sort_on_waiting_since desc],
-
-    # To be removed in v3.5.0
-    'latest' => %w[sort_on_last_activity_at desc],
-    'sort_on_created_at' => %w[sort_on_created_at asc],
-    'sort_on_priority' => %w[sort_on_priority desc],
-    'sort_on_waiting_since' => %w[sort_on_waiting_since asc]
+    latest: 'latest',
+    sort_on_created_at: 'sort_on_created_at',
+    last_user_message_at: 'last_user_message_at',
+    sort_on_priority: 'sort_on_priority',
+    sort_on_waiting_since: 'sort_on_waiting_since'
  }.with_indifferent_access
+
  # assumptions
  # inbox_id if not given, take from all conversations, else specific to inbox
  # assignee_type if not given, take 'all'
@@ -167,8 +159,7 @@ class ConversationFinder
    @conversations = @conversations.includes(
      :taggings, :inbox, { assignee: { avatar_attachment: [:blob] } }, { contact: { avatar_attachment: [:blob] } }, :team, :contact_inbox
    )
-
-    sort_by, sort_order = SORT_OPTIONS[params[:sort_by]] || SORT_OPTIONS['last_activity_at_desc']
-    @conversations.send(sort_by, sort_order).page(current_page).per(ENV.fetch('CONVERSATION_RESULTS_PER_PAGE', '25').to_i)
+    sort_by = SORT_OPTIONS[params[:sort_by]] || SORT_OPTIONS['latest']
+    @conversations.send(sort_by).page(current_page)
  end
 end
@@ -1,71 +1,11 @@
 module PortalHelper
  def generate_portal_bg_color(portal_color, theme)
    base_color = theme == 'dark' ? 'black' : 'white'
-    "color-mix(in srgb, #{portal_color} 20%, #{base_color})"
+    "color-mix(in srgb, #{portal_color} 10%, #{base_color})"
  end

  def generate_portal_bg(portal_color, theme)
-    bg_image = theme == 'dark' ? 'hexagon-dark.svg' : 'hexagon-light.svg'
-    "url(/assets/images/hc/#{bg_image}) #{generate_portal_bg_color(portal_color, theme)}"
-  end
-
-  def generate_gradient_to_bottom(theme)
-    base_color = theme == 'dark' ? '#151718' : 'white'
-    "linear-gradient(to bottom, transparent, #{base_color})"
-  end
-
-  def generate_portal_hover_color(portal_color, theme)
-    base_color = theme == 'dark' ? '#1B1B1B' : '#F9F9F9'
-    "color-mix(in srgb, #{portal_color} 5%, #{base_color})"
-  end
-
-  def language_name(locale)
-    language_map = YAML.load_file(Rails.root.join('config/languages/language_map.yml'))
-    language_map[locale] || locale
-  end
-
-  def theme_query_string(theme)
-    theme.present? && theme != 'system' ? "?theme=#{theme}" : ''
-  end
-
-  def generate_home_link(portal_slug, portal_locale, theme, is_plain_layout_enabled)
-    if is_plain_layout_enabled
-      "/hc/#{portal_slug}/#{portal_locale}#{theme_query_string(theme)}"
-    else
-      "/hc/#{portal_slug}/#{portal_locale}"
-    end
-  end
-
-  def generate_category_link(params)
-    portal_slug = params[:portal_slug]
-    category_locale = params[:category_locale]
-    category_slug = params[:category_slug]
-    theme = params[:theme]
-    is_plain_layout_enabled = params[:is_plain_layout_enabled]
-
-    if is_plain_layout_enabled
-      "/hc/#{portal_slug}/#{category_locale}/categories/#{category_slug}#{theme_query_string(theme)}"
-    else
-      "/hc/#{portal_slug}/#{category_locale}/categories/#{category_slug}"
-    end
-  end
-
-  def generate_article_link(portal_slug, article_slug, theme, is_plain_layout_enabled)
-    if is_plain_layout_enabled
-      "/hc/#{portal_slug}/articles/#{article_slug}#{theme_query_string(theme)}"
-    else
-      "/hc/#{portal_slug}/articles/#{article_slug}"
-    end
-  end
-
-  def render_category_content(content)
-    ChatwootMarkdownRenderer.new(content).render_markdown_to_plain_text
-  end
-
-  def thumbnail_bg_color(username)
-    colors = ['#6D95BA', '#A4C3C3', '#E19191']
-    return colors.sample if username.blank?
-
-    colors[username.length % colors.size]
+    bg_image = theme == 'dark' ? 'grid_dark.svg' : 'grid.svg'
+    "background: url(/assets/images/hc/#{bg_image}) #{generate_portal_bg_color(portal_color, theme)}"
  end
 end
@@ -1,13 +1,13 @@
 <template>
  <div
-    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
+    v-if="!authUIFlags.isFetching"
    id="app"
    class="app-wrapper h-full flex-grow-0 min-h-0 w-full"
    :class="{ 'app-rtl--wrapper': isRTLView }"
    :dir="isRTLView ? 'rtl' : 'ltr'"
  >
    <update-banner :latest-chatwoot-version="latestChatwootVersion" />
-    <template v-if="currentAccountId">
+    <template v-if="!accountUIFlags.isFetchingItem && currentAccountId">
      <payment-pending-banner />
      <upgrade-banner />
    </template>
@@ -84,11 +84,6 @@ export default {
    return axios.delete(endPoints('deleteAvatar').url);
  },

-  resetPassword({ email }) {
-    const urlData = endPoints('resetPassword');
-    return axios.post(urlData.url, { email });
-  },
-
  setActiveAccount({ accountId }) {
    const urlData = endPoints('setActiveAccount');
    return axios.put(urlData.url, {
@@ -1,7 +1,6 @@
 /* global axios */

 import PortalsAPI from './portals';
-import { getArticleSearchURL } from 'dashboard/helper/URLHelper.js';

 class ArticlesAPI extends PortalsAPI {
  constructor() {
@@ -13,31 +12,14 @@ class ArticlesAPI extends PortalsAPI {
    portalSlug,
    locale,
    status,
-    authorId,
-    categorySlug,
-    sort,
+    author_id,
+    category_slug,
  }) {
-    const url = getArticleSearchURL({
-      pageNumber,
-      portalSlug,
-      locale,
-      status,
-      authorId,
-      categorySlug,
-      sort,
-      host: this.url,
-    });
-
-    return axios.get(url);
-  }
-
-  searchArticles({ portalSlug, query }) {
-    const url = getArticleSearchURL({
-      portalSlug,
-      query,
-      host: this.url,
-    });
-    return axios.get(url);
+    let baseUrl = `${this.url}/${portalSlug}/articles?page=${pageNumber}&locale=${locale}`;
+    if (status !== undefined) baseUrl += `&status=${status}`;
+    if (author_id) baseUrl += `&author_id=${author_id}`;
+    if (category_slug) baseUrl += `&category_slug=${category_slug}`;
+    return axios.get(baseUrl);
  }

  getArticle({ id, portalSlug }) {
@@ -17,10 +17,6 @@ class PortalsAPI extends ApiClient {
  deletePortal(portalSlug) {
    return axios.delete(`${this.url}/${portalSlug}`);
  }
-
-  deleteLogo(portalSlug) {
-    return axios.delete(`${this.url}/${portalSlug}/logo`);
-  }
 }

 export default PortalsAPI;
@@ -26,13 +26,9 @@ export const buildCreatePayload = ({
    payload.append('echo_id', echoId);
    payload.append('cc_emails', ccEmails);
    payload.append('bcc_emails', bccEmails);
-
    if (toEmails) {
      payload.append('to_emails', toEmails);
    }
-    if (contentAttributes) {
-      payload.append('content_attributes', JSON.stringify(contentAttributes));
-    }
  } else {
    payload = {
      content: message,
@@ -86,12 +82,6 @@ class MessageApi extends ApiClient {
    return axios.delete(`${this.url}/${conversationID}/messages/${messageId}`);
  }

-  retry(conversationID, messageId) {
-    return axios.post(
-      `${this.url}/${conversationID}/messages/${messageId}/retry`
-    );
-  }
-
  getPreviousMessages({ conversationId, after, before }) {
    const params = { before };
    if (after && Number(after) !== Number(before)) {
@@ -34,7 +34,7 @@ describe('#PortalAPI', () => {
        portalSlug: 'room-rental',
        locale: 'en-US',
        status: 'published',
-        authorId: '1',
+        author_id: '1',
      });
      expect(axiosMock.get).toHaveBeenCalledWith(
        '/api/v1/portals/room-rental/articles?page=1&locale=en-US&status=published&author_id=1'
@@ -85,33 +85,6 @@ describe('#PortalAPI', () => {
      window.axios = originalAxios;
    });

-    it('#searchArticles', () => {
-      articlesAPI.searchArticles({
-        query: 'test',
-        portalSlug: 'room-rental',
-      });
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/portals/room-rental/articles?query=test'
-      );
-    });
-  });
-  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()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
    it('#updateArticle', () => {
      articlesAPI.updateArticle({
        articleId: 1,
@@ -50,7 +50,6 @@ describe('#ConversationAPI', () => {
        message: 'test content',
        echoId: 12,
        isPrivate: true,
-        contentAttributes: { in_reply_to: 12 },
        files: [new Blob(['test-content'], { type: 'application/pdf' })],
      });
      expect(formPayload).toBeInstanceOf(FormData);
@@ -58,10 +57,6 @@ describe('#ConversationAPI', () => {
      expect(formPayload.get('echo_id')).toEqual('12');
      expect(formPayload.get('private')).toEqual('true');
      expect(formPayload.get('cc_emails')).toEqual('');
-      expect(formPayload.get('bcc_emails')).toEqual('');
-      expect(formPayload.get('content_attributes')).toEqual(
-        '{"in_reply_to":12}'
-      );
    });

    it('builds object payload if file is not available', () => {
@@ -1,5 +1,9 @@
@import '~vue2-datepicker/scss/index';

+.mx-datepicker-popup {
+  @apply z-[99999];
+}
+
 .date-picker {
  &.no-margin {
    .mx-input {
@@ -25,52 +29,10 @@
  .mx-input[readonly] {
    @apply bg-white dark:bg-slate-900 cursor-pointer;
  }
-
-  .mx-icon-calendar {
-    @apply dark:text-slate-500;
-  }
 }

-.mx-datepicker-main {
-  @apply border-0 bg-white dark:bg-slate-800;
-
-  .cell {
-    &.disabled {
-      @apply bg-slate-25 dark:bg-slate-900 text-slate-200 dark:text-slate-300;
-    }
-
-    &:hover,
-    &.hover-in-range,
-    &.in-range {
-      @apply bg-slate-75 dark:bg-slate-700 text-slate-900 dark:text-slate-100;
-    }
-  }
-
-  .mx-time {
-    @apply border-0 bg-white dark:bg-slate-800;
-
-    .mx-time-header {
-      @apply border-0;
-    }
-
-    .mx-time-item {
-      &.disabled {
-        @apply bg-slate-25 dark:bg-slate-900;
-      }
-
-      &:hover {
-        @apply bg-slate-75 dark:bg-slate-700;
-      }
-    }
-  }
-
-  .today {
-    @apply font-semibold;
-  }
-}
-
-.mx-datepicker-popup {
-  @apply z-[99999];
+.mx-calendar-content .cell:hover {
+  @apply bg-slate-75 dark:bg-slate-700 text-slate-900 dark:text-slate-100;
 }

 .mx-datepicker-inline {
@@ -79,4 +41,24 @@
  .mx-calendar {
    @apply w-full;
  }
+
+  .cell.disabled {
+    @apply bg-slate-25 dark:bg-slate-900 text-slate-200 dark:text-slate-300;
+  }
+
+  .mx-time-item.disabled {
+    @apply bg-slate-25 dark:bg-slate-900;
+  }
+
+  .today {
+    @apply font-semibold;
+  }
+
+  .mx-datepicker-main {
+    @apply border-0 bg-white dark:bg-slate-800;
+  }
+
+  .mx-time-header {
+    @apply border-0;
+  }
 }
@@ -16,23 +16,3 @@
    width: 100%;
  }
 }
-
-.integration-hooks {
-  .formulate-input[data-type='checkbox'] {
-    .formulate-input-wrapper {
-      @apply flex;
-
-      .formulate-input-element {
-        @apply pr-2;
-
-        input {
-          @apply mb-0;
-        }
-      }
-    }
-
-    .formulate-input-element-decorator {
-      @apply hidden;
-    }
-  }
-}
@@ -1,8 +1,39 @@
-@import 'shared/assets/fonts/inter';
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import '../variables';

-body {
-  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+.superadmin-body {
+  background: var(--color-background);
+
+  .hero--title {
+    font-size: var(--font-size-mega);
+    font-weight: var(--font-weight-light);
+    margin-top: var(--space-large);
+  }
+
+  .update-subscription--checkbox {
+    display: flex;
+
+    input {
+      line-height: 1.5;
+      margin-right: var(--space-one);
+      margin-top: var(--space-smaller);
+    }
+
+    label {
+      font-size: var(--font-size-small);
+      line-height: 1.5;
+      margin-bottom: var(--space-normal);
+    }
+  }
 }
+
+.alert-box {
+  background-color: var(--r-500);
+  border-radius: 5px;
+  color: var(--color-white);
+  font-size: 14px;
+  margin-bottom: 14px;
+  padding: 10px;
+  text-align: center;
+}
+
+
@@ -0,0 +1,3 @@
+@import 'shared/assets/fonts/plus-jakarta';
+@import '../variables';
+@import '~shared/assets/stylesheets/ionicons';
@@ -34,26 +34,26 @@
  }

  &.hollow {
-    @apply border border-woot-500 dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900;
+    @apply border border-slate-200 dark:border-slate-600 text-woot-700 dark:text-woot-100 hover:bg-woot-50 dark:hover:bg-woot-900;

    &.secondary {
      @apply text-slate-700 border-slate-200 dark:border-slate-600 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
    }

    &.success {
-      @apply text-green-700 dark:text-green-400 border-green-100 dark:border-green-600 hover:bg-green-50 dark:hover:bg-green-800;
+      @apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800;
    }

    &.alert {
-      @apply text-red-700 dark:text-red-400 border-red-100 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-800;
+      @apply text-red-700 dark:text-red-100 hover:bg-red-50 dark:hover:bg-red-800;
    }

    &.warning {
-      @apply text-yellow-600 dark:text-yellow-600 border-yellow-600 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-800;
+      @apply text-yellow-700 dark:text-yellow-100 hover:bg-yellow-50 dark:hover:bg-yellow-800;
    }

    &:hover {
-      @apply bg-woot-75 dark:bg-woot-800 border-slate-100 dark:border-woot-600 dark:text-woot-400;
+      @apply bg-slate-75 dark:bg-slate-900 border-slate-100 dark:border-slate-700;

      &.secondary {
        @apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
@@ -68,7 +68,7 @@
      }

      &.warning {
-        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-500;
+        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-700;
      }
    }
  }
@@ -76,11 +76,7 @@

  &.left {
    .bubble {
-      @apply rounded-r-lg rounded-l mr-auto break-words;
-
-      &:not(.is-unsupported) {
-        @apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50
-      }
+      @apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50 rounded-r-lg rounded-l mr-auto break-words;

      &.is-image {
        @apply rounded-lg;
@@ -156,10 +152,6 @@

      &.is-image {
        @apply rounded-lg;
-
-        .message__mail-head {
-          @apply px-4 py-2;
-        }
      }
    }

@@ -4,6 +4,10 @@
  @apply flex items-center justify-center bg-modal dark:bg-modal z-[9990] h-full left-0 fixed top-0 w-full;
 }

+.modal--close {
+  @apply absolute right-2 rtl:right-[unset] rtl:left-2 top-2;
+}
+
 .page-top-bar {
  @apply px-8 pt-9 pb-0;

@@ -126,33 +126,49 @@
      @assign-team="onAssignTeamsForBulk"
    />
    <div
-      ref="conversationList"
+      ref="activeConversation"
      class="conversations-list flex-1"
      :class="{ 'overflow-hidden': isContextMenuOpen }"
    >
-      <virtual-list
-        ref="conversationVirtualList"
-        :data-key="'id'"
-        :data-sources="conversationList"
-        :data-component="itemComponent"
-        :extra-props="virtualListExtraProps"
-        class="w-full overflow-auto h-full"
-        footer-tag="div"
+      <div>
+        <conversation-card
+          v-for="chat in conversationList"
+          :key="chat.id"
+          :active-label="label"
+          :team-id="teamId"
+          :folders-id="foldersId"
+          :chat="chat"
+          :conversation-type="conversationType"
+          :show-assignee="showAssigneeInConversationCard"
+          :selected="isConversationSelected(chat.id)"
+          @select-conversation="selectConversation"
+          @de-select-conversation="deSelectConversation"
+          @assign-agent="onAssignAgent"
+          @assign-team="onAssignTeam"
+          @assign-label="onAssignLabels"
+          @update-conversation-status="toggleConversationStatus"
+          @context-menu-toggle="onContextMenuToggle"
+          @mark-as-unread="markAsUnread"
+          @assign-priority="assignPriority"
+        />
+      </div>
+      <div v-if="chatListLoading" class="text-center">
+        <span class="spinner mt-4 mb-4" />
+      </div>
+
+      <woot-button
+        v-if="!hasCurrentPageEndReached && !chatListLoading"
+        variant="clear"
+        size="expanded"
+        class="load-more--button"
+        @click="loadMoreConversations"
      >
-        <template #footer>
-          <div v-if="chatListLoading" class="text-center">
-            <span class="spinner mt-4 mb-4" />
-          </div>
-          <p v-if="showEndOfListMessage" class="text-center text-muted p-4">
-            {{ $t('CHAT_LIST.EOF') }}
-          </p>
-          <intersection-observer
-            v-if="!showEndOfListMessage && !chatListLoading"
-            :options="infiniteLoaderOptions"
-            @observed="loadMoreConversations"
-          />
-        </template>
-      </virtual-list>
+        {{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}
+      </woot-button>
+
+      <p v-if="showEndOfListMessage" class="text-center text-muted p-4">
+        {{ $t('CHAT_LIST.EOF') }}
+      </p>
    </div>
    <woot-modal
      :show.sync="showAdvancedFilters"
@@ -175,12 +191,11 @@

 <script>
 import { mapGetters } from 'vuex';
-import VirtualList from 'vue-virtual-scroll-list';

 import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter.vue';
 import ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter.vue';
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
-import ConversationItem from './ConversationItem.vue';
+import ConversationCard from './widgets/conversation/ConversationCard.vue';
 import timeMixin from '../mixins/time';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import conversationMixin from '../mixins/conversations';
@@ -192,7 +207,6 @@ import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCust
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import filterMixin from 'shared/mixins/filterMixin';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import countries from 'shared/constants/countries';
 import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
@@ -207,20 +221,16 @@ import {
  isOnUnattendedView,
 } from '../store/modules/conversations/helpers/actionHelpers';
 import { CONVERSATION_EVENTS } from '../helper/AnalyticsHelper/events';
-import IntersectionObserver from './IntersectionObserver.vue';

 export default {
  components: {
    AddCustomViews,
    ChatTypeTabs,
-    // eslint-disable-next-line vue/no-unused-components
-    ConversationItem,
+    ConversationCard,
    ConversationAdvancedFilter,
    DeleteCustomViews,
    ConversationBulkActions,
    ConversationBasicFilter,
-    IntersectionObserver,
-    VirtualList,
  },
  mixins: [
    timeMixin,
@@ -228,22 +238,7 @@ export default {
    eventListenerMixins,
    alertMixin,
    filterMixin,
-    uiSettingsMixin,
  ],
-  provide() {
-    return {
-      // Actions to be performed on virtual list item and context menu.
-      selectConversation: this.selectConversation,
-      deSelectConversation: this.deSelectConversation,
-      assignAgent: this.onAssignAgent,
-      assignTeam: this.onAssignTeam,
-      assignLabels: this.onAssignLabels,
-      updateConversationStatus: this.toggleConversationStatus,
-      toggleContextMenu: this.onContextMenuToggle,
-      markAsUnread: this.markAsUnread,
-      assignPriority: this.assignPriority,
-    };
-  },
  props: {
    conversationInbox: {
      type: [String, Number],
@@ -278,7 +273,7 @@ export default {
    return {
      activeAssigneeTab: wootConstants.ASSIGNEE_TYPE.ME,
      activeStatus: wootConstants.STATUS_TYPE.OPEN,
-      activeSortBy: wootConstants.SORT_BY_TYPE.LAST_ACTIVITY_AT_DESC,
+      activeSortBy: wootConstants.SORT_BY_TYPE.LATEST,
      showAdvancedFilters: false,
      advancedFilterTypes: advancedFilterTypes.map(filter => ({
        ...filter,
@@ -294,21 +289,6 @@ export default {
      selectedInboxes: [],
      isContextMenuOpen: false,
      appliedFilter: [],
-      infiniteLoaderOptions: {
-        root: this.$refs.conversationList,
-        rootMargin: '100px 0px 100px 0px',
-      },
-
-      itemComponent: ConversationItem,
-      // virtualListExtraProps is to pass the props to the conversationItem component.
-      virtualListExtraProps: {
-        label: this.label,
-        teamId: this.teamId,
-        foldersId: this.foldersId,
-        conversationType: this.conversationType,
-        showAssignee: false,
-        isConversationSelected: this.isConversationSelected,
-      },
    };
  },
  computed: {
@@ -428,12 +408,8 @@ export default {
    },
    conversationListPagination() {
      const conversationsPerPage = 25;
-      const hasChatsOnView =
-        this.chatsOnView &&
-        Array.isArray(this.chatsOnView) &&
-        !this.chatsOnView.length;
      const isNoFiltersOrFoldersAndChatListNotEmpty =
-        !this.hasAppliedFiltersOrActiveFolders && hasChatsOnView;
+        !this.hasAppliedFiltersOrActiveFolders && this.chatsOnView !== [];
      const isUnderPerPage =
        this.chatsOnView.length < conversationsPerPage &&
        this.activeAssigneeTabCount < conversationsPerPage &&
@@ -527,25 +503,18 @@ export default {
    },
    label() {
      this.resetAndFetchData();
-      this.updateVirtualListProps('label', this.label);
    },
    conversationType() {
      this.resetAndFetchData();
-      this.updateVirtualListProps('conversationType', this.conversationType);
    },
    activeFolder() {
      this.resetAndFetchData();
-      this.updateVirtualListProps('foldersId', this.foldersId);
    },
    chatLists() {
      this.chatsOnView = this.conversationList;
    },
-    showAssigneeInConversationCard(newVal) {
-      this.updateVirtualListProps('showAssignee', newVal);
-    },
  },
  mounted() {
-    this.setFiltersFromUISettings();
    this.$store.dispatch('setChatStatusFilter', this.activeStatus);
    this.$store.dispatch('setChatSortFilter', this.activeSortBy);
    this.resetAndFetchData();
@@ -559,12 +528,6 @@ export default {
    });
  },
  methods: {
-    updateVirtualListProps(key, value) {
-      this.virtualListExtraProps = {
-        ...this.virtualListExtraProps,
-        [key]: value,
-      };
-    },
    onApplyFilter(payload) {
      this.resetBulkActions();
      this.foldersQuery = filterQueryGenerator(payload);
@@ -581,15 +544,6 @@ export default {
      this.$store.dispatch('customViews/update', payloadData);
      this.closeAdvanceFiltersModal();
    },
-    setFiltersFromUISettings() {
-      const { conversations_filter_by: filterBy = {} } = this.uiSettings;
-      const { status, order_by: orderBy } = filterBy;
-      this.activeStatus = status || wootConstants.STATUS_TYPE.OPEN;
-      this.activeSortBy =
-        Object.keys(wootConstants.SORT_BY_TYPE).find(
-          sortField => sortField === orderBy
-        ) || wootConstants.SORT_BY_TYPE.LAST_ACTIVITY_AT_DESC;
-    },
    onClickOpenAddFoldersModal() {
      this.showAddFoldersModal = true;
    },
@@ -668,10 +622,10 @@ export default {
      );
    },
    getKeyboardListenerParams() {
-      const allConversations = this.$refs.conversationList.querySelectorAll(
+      const allConversations = this.$refs.activeConversation.querySelectorAll(
        'div.conversations-list div.conversation'
      );
-      const activeConversation = this.$refs.conversationList.querySelector(
+      const activeConversation = this.$refs.activeConversation.querySelector(
        'div.conversations-list div.conversation.active'
      );
      const activeConversationIndex = [...allConversations].indexOf(
@@ -727,12 +681,9 @@ export default {
    fetchConversations() {
      this.$store
        .dispatch('fetchAllConversations', this.conversationFilters)
-        .then(this.emitConversationLoaded);
+        .then(() => this.$emit('conversation-load'));
    },
    loadMoreConversations() {
-      if (this.hasCurrentPageEndReached || this.chatListLoading) {
-        return;
-      }
      if (!this.hasAppliedFiltersOrActiveFolders) {
        this.fetchConversations();
      }
@@ -751,7 +702,7 @@ export default {
          queryData: filterQueryGenerator(payload),
          page,
        })
-        .then(this.emitConversationLoaded);
+        .then(() => this.$emit('conversation-load'));
      this.showAdvancedFilters = false;
    },
    fetchSavedFilteredConversations(payload) {
@@ -761,7 +712,7 @@ export default {
          queryData: payload,
          page,
        })
-        .then(this.emitConversationLoaded);
+        .then(() => this.$emit('conversation-load'));
    },
    updateAssigneeTab(selectedTab) {
      if (this.activeAssigneeTab !== selectedTab) {
@@ -773,20 +724,6 @@ export default {
        }
      }
    },
-    emitConversationLoaded() {
-      this.$emit('conversation-load');
-      this.$nextTick(() => {
-        // Addressing a known issue in the virtual list library where dynamically added items
-        // might not render correctly. This workaround involves a slight manual adjustment
-        // to the scroll position, triggering the list to refresh its rendering.
-        const virtualList = this.$refs.conversationVirtualList;
-        const scrollToOffset = virtualList?.scrollToOffset;
-        const currentOffset = virtualList?.getOffset() || 0;
-        if (scrollToOffset) {
-          scrollToOffset(currentOffset + 1);
-        }
-      });
-    },
    resetBulkActions() {
      this.selectedConversations = [];
      this.selectedInboxes = [];
@@ -1,72 +0,0 @@
-<template>
-  <conversation-card
-    :key="source.id"
-    :active-label="label"
-    :team-id="teamId"
-    :folders-id="foldersId"
-    :chat="source"
-    :conversation-type="conversationType"
-    :selected="isConversationSelected(source.id)"
-    :show-assignee="showAssignee"
-    :enable-context-menu="true"
-    @select-conversation="selectConversation"
-    @de-select-conversation="deSelectConversation"
-    @assign-agent="assignAgent"
-    @assign-team="assignTeam"
-    @assign-label="assignLabels"
-    @update-conversation-status="updateConversationStatus"
-    @context-menu-toggle="toggleContextMenu"
-    @mark-as-unread="markAsUnread"
-    @assign-priority="assignPriority"
-  />
-</template>
-
-<script>
-import ConversationCard from './widgets/conversation/ConversationCard.vue';
-export default {
-  components: {
-    ConversationCard,
-  },
-  inject: [
-    'selectConversation',
-    'deSelectConversation',
-    'assignAgent',
-    'assignTeam',
-    'assignLabels',
-    'updateConversationStatus',
-    'toggleContextMenu',
-    'markAsUnread',
-    'assignPriority',
-  ],
-  props: {
-    source: {
-      type: Object,
-      required: true,
-    },
-    teamId: {
-      type: [String, Number],
-      default: 0,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    conversationType: {
-      type: String,
-      default: '',
-    },
-    foldersId: {
-      type: [String, Number],
-      default: 0,
-    },
-    isConversationSelected: {
-      type: Function,
-      default: () => {},
-    },
-    showAssignee: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
@@ -1,34 +0,0 @@
-<template>
-  <div ref="observedElement" class="h-6 w-full" />
-</template>
-
-<script>
-export default {
-  props: {
-    options: {
-      type: Object,
-      default: () => ({ root: document, rootMargin: '100px 0 100px 0)' }),
-    },
-  },
-  mounted() {
-    this.intersectionObserver = null;
-    this.registerInfiniteLoader();
-  },
-  beforeDestroy() {
-    this.unobserveInfiniteLoadObserver();
-  },
-  methods: {
-    registerInfiniteLoader() {
-      this.intersectionObserver = new IntersectionObserver(entries => {
-        if (entries && entries[0].isIntersecting) {
-          this.$emit('observed');
-        }
-      }, this.options);
-      this.intersectionObserver.observe(this.$refs.observedElement);
-    },
-    unobserveInfiniteLoadObserver() {
-      this.intersectionObserver.unobserve(this.$refs.observedElement);
-    },
-  },
-};
-</script>
@@ -4,19 +4,15 @@
      v-if="show"
      :class="modalClassName"
      transition="modal"
-      @mousedown="handleMouseDown"
+      @click="onBackDropClick"
    >
-      <div
-        :class="modalContainerClassName"
-        @mouse.stop
-        @mousedown="event => event.stopPropagation()"
-      >
+      <div :class="modalContainerClassName" @click.stop>
        <woot-button
          v-if="showCloseButton"
          color-scheme="secondary"
          icon="dismiss"
          variant="clear"
-          class="absolute ltr:right-2 rtl:left-2 top-2 z-10"
+          class="modal--close"
          @click="close"
        />
        <slot />
@@ -54,11 +50,6 @@ export default {
      default: '',
    },
  },
-  data() {
-    return {
-      mousedDownOnBackdrop: false,
-    };
-  },
  computed: {
    modalContainerClassName() {
      let className =
@@ -86,22 +77,13 @@ export default {
        this.onClose();
      }
    });
-
-    document.body.addEventListener('mouseup', this.onMouseUp);
-  },
-  beforeDestroy() {
-    document.body.removeEventListener('mouseup', this.onMouseUp);
  },
  methods: {
-    handleMouseDown() {
-      this.mousedDownOnBackdrop = true;
-    },
    close() {
      this.onClose();
    },
-    onMouseUp() {
-      if (this.mousedDownOnBackdrop) {
-        this.mousedDownOnBackdrop = false;
+    onBackDropClick() {
+      if (this.closeOnBackdropClick) {
        this.onClose();
      }
    },
@@ -1,33 +1,24 @@
 <template>
  <transition name="network-notification-fade" tag="div">
-    <div v-show="showNotification" class="fixed top-4 left-2 z-50 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"
-      >
-        <fluent-icon
-          icon="wifi-off"
-          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"
-        >
-          {{ $t('NETWORK.NOTIFICATION.OFFLINE') }}
-        </span>
+    <div v-show="showNotification" class="ui-notification-container">
+      <div class="ui-notification">
+        <fluent-icon icon="wifi-off" />
+        <p class="ui-notification-text">
+          {{
+            useInstallationName(
+              $t('NETWORK.NOTIFICATION.TEXT'),
+              globalConfig.installationName
+            )
+          }}
+        </p>
+        <woot-button variant="clear" size="small" @click="refreshPage">
+          {{ $t('NETWORK.BUTTON.REFRESH') }}
+        </woot-button>
        <woot-button
-          :title="$t('NETWORK.BUTTON.REFRESH')"
-          variant="clear"
+          variant="smooth"
          size="small"
          color-scheme="warning"
-          icon="arrow-clockwise"
-          class="visible transition-all duration-500 ease-in-out ml-1"
-          @click="refreshPage"
-        />
-        <woot-button
-          variant="clear"
-          size="small"
-          color-scheme="warning"
-          icon="dismiss"
+          icon="dismiss-circle"
          @click="closeNotification"
        />
      </div>
@@ -56,12 +47,7 @@ export default {
  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);
+      this.updateOnlineStatus({ type: 'offline' });
    });
  },

@@ -86,3 +72,33 @@ export default {
  },
 };
 </script>
+
+<style scoped lang="scss">
+@import '~dashboard/assets/scss/mixins';
+
+.ui-notification-container {
+  max-width: 25rem;
+  position: absolute;
+  right: var(--space-normal);
+  top: var(--space-normal);
+  z-index: var(--z-index-very-high);
+}
+
+.ui-notification {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+
+  background-color: var(--y-100);
+  border-radius: var(--border-radius-medium);
+  box-shadow: var(--shadow-large);
+
+  min-width: 15rem;
+  padding: var(--space-normal);
+}
+
+.ui-notification-text {
+  margin: 0 var(--space-small);
+}
+</style>
@@ -11,6 +11,7 @@
      @key-shortcut-modal="toggleKeyShortcutModal"
      @open-notification-panel="openNotificationPanel"
    />
+
    <secondary-sidebar
      v-if="showSecondarySidebar"
      :class="sidebarClassName"
@@ -113,12 +114,7 @@ export default {
        if (!isAvailableForTheUser) {
          return false;
        }
-        if (
-          menuItem.alwaysVisibleOnChatwootInstances &&
-          !this.isACustomBrandedInstance
-        ) {
-          return true;
-        }
+
        if (menuItem.featureFlag) {
          return this.isFeatureEnabledonAccount(
            this.accountId,
@@ -42,7 +42,6 @@ const primaryMenuItems = accountId => [
    key: 'helpcenter',
    label: 'HELP_CENTER.TITLE',
    featureFlag: FEATURE_FLAGS.HELP_CENTER,
-    alwaysVisibleOnChatwootInstances: true,
    toState: frontendURL(`accounts/${accountId}/portals`),
    toStateName: 'default_portal_articles',
    roles: ['administrator'],
@@ -136,7 +136,6 @@ export default {
        toStateName: 'labels_list',
        showModalForNewItem: true,
        modalName: 'AddLabel',
-        dataTestid: 'sidebar-new-label-button',
        children: this.labels.map(label => ({
          id: label.id,
          label: label.title,
@@ -78,7 +78,6 @@
              variant="clear"
              color-scheme="secondary"
              icon="add"
-              :data-testid="menuItem.dataTestid"
              @click="e => newLinkClick(e, navigate)"
            >
              {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
@@ -61,7 +61,6 @@ export default {
  computed: {
    ...mapGetters({
      currentChat: 'getSelectedChat',
-      isAChatwootInstance: 'globalConfig/isAChatwootInstance',
    }),
    isAICTAModalDismissed() {
      return this.uiSettings.is_open_ai_cta_modal_dismissed;
@@ -71,8 +70,7 @@ export default {
      return (
        this.isAdmin &&
        !this.isAIIntegrationEnabled &&
-        !this.isAICTAModalDismissed &&
-        this.isAChatwootInstance
+        !this.isAICTAModalDismissed
      );
    },
    // Display a AI CTA button for agents and other admins who have not yet opened the AI assistance modal.
@@ -1,9 +1,11 @@
 <template>
-  <div class="preview-item__wrap flex overflow-auto max-h-[12.5rem]">
+  <div
+    class="preview-item__wrap flex flex-col overflow-auto mt-4 max-h-[12.5rem]"
+  >
    <div
      v-for="(attachment, index) in attachments"
      :key="attachment.id"
-      class="preview-item flex items-center p-1 bg-slate-50 dark:bg-slate-800 gap-1 rounded-md w-[15rem] mb-1"
+      class="preview-item flex p-1 bg-slate-50 dark:bg-slate-800 rounded-md w-[15rem] mb-1"
    >
      <div class="max-w-[4rem] flex-shrink-0 w-6 flex items-center">
        <img
@@ -15,7 +17,7 @@
          📄
        </span>
      </div>
-      <div class="max-w-[60%] min-w-[50%] overflow-hidden text-ellipsis">
+      <div class="max-w-[60%] min-w-[50%] overflow-hidden text-ellipsis ml-2">
        <span
          class="h-4 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap"
        >
@@ -12,7 +12,7 @@
      />
      <iframe
        v-if="configItem.type === 'frame' && configItem.url"
-        :id="getFrameId(index)"
+        :id="`dashboard-app--frame-${index}`"
        :src="configItem.url"
        @load="() => onIframeLoad(index)"
      />
@@ -39,10 +39,6 @@ export default {
      type: Boolean,
      default: false,
    },
-    position: {
-      type: Number,
-      required: true,
-    },
  },
  data() {
    return {
@@ -86,14 +82,10 @@ export default {
    };
  },
  methods: {
-    getFrameId(index) {
-      return `dashboard-app--frame-${this.position}-${index}`;
-    },
    onIframeLoad(index) {
-      // A possible alternative is to use ref instead of document.getElementById
-      // However, when ref is used together with v-for, the ref you get will be
-      // an array containing the child components mirroring the data source.
-      const frameElement = document.getElementById(this.getFrameId(index));
+      const frameElement = document.getElementById(
+        `dashboard-app--frame-${index}`
+      );
      const eventData = { event: 'appContext', data: this.dashboardAppContext };
      frameElement.contentWindow.postMessage(JSON.stringify(eventData), '*');
      this.iframeLoading = false;
@@ -1,5 +1,5 @@
 <template>
-  <div ref="editorRoot" class="relative editor-root">
+  <div class="editor-root">
    <tag-agents
      v-if="showUserMentions && isPrivate"
      :search-key="mentionSearchKey"
@@ -23,23 +23,6 @@
      @change="onFileChange"
    />
    <div ref="editor" />
-    <div
-      v-show="isImageNodeSelected && showImageResizeToolbar"
-      class="absolute shadow-md rounded-[4px] flex gap-1 py-1 px-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-50"
-      :style="{
-        top: toolbarPosition.top,
-        left: toolbarPosition.left,
-      }"
-    >
-      <button
-        v-for="size in sizes"
-        :key="size.name"
-        class="text-xs font-medium rounded-[4px] border border-solid border-slate-200 dark:border-slate-600 px-1.5 py-0.5 hover:bg-slate-100 dark:hover:bg-slate-800"
-        @click="setURLWithQueryAndImageSize(size)"
-      >
-        {{ size.name }}
-      </button>
-    </div>
    <slot name="footer" />
  </div>
 </template>
@@ -58,7 +41,6 @@ import {
  suggestionsPlugin,
  triggerCharacters,
 } from '@chatwoot/prosemirror-schema/src/mentions/plugin';
-import { BUS_EVENTS } from 'shared/constants/busEvents';

 import TagAgents from '../conversation/TagAgents.vue';
 import CannedResponse from '../conversation/CannedResponse.vue';
@@ -66,10 +48,6 @@ import VariableList from '../conversation/VariableList.vue';
 import {
  appendSignature,
  removeSignature,
-  insertAtCursor,
-  scrollCursorIntoView,
-  findNodeToInsertImage,
-  setURLWithQueryAndSize,
 } from 'dashboard/helper/editorHelper';

 const TYPING_INDICATOR_IDLE_TIME = 4000;
@@ -84,18 +62,13 @@ import {
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
-import {
-  replaceVariablesInMessage,
-  createTypingIndicator,
-} from '@chatwoot/utils';
+import { replaceVariablesInMessage } from '@chatwoot/utils';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
 import alertMixin from 'shared/mixins/alertMixin';
-import {
-  MESSAGE_EDITOR_MENU_OPTIONS,
-  MESSAGE_EDITOR_IMAGE_RESIZES,
-} from 'dashboard/constants/editor';
+import { findNodeToInsertImage } from 'dashboard/helper/messageEditorHelper';
+import { MESSAGE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';

 const createState = (
  content,
@@ -138,20 +111,9 @@ export default {
    // allowSignature is a kill switch, ensuring no signature methods
    // are triggered except when this flag is true
    allowSignature: { type: Boolean, default: false },
-    channelType: { type: String, default: '' },
-    showImageResizeToolbar: { type: Boolean, default: false }, // A kill switch to show or hide the image toolbar
  },
  data() {
    return {
-      typingIndicator: createTypingIndicator(
-        () => {
-          this.$emit('typing-on');
-        },
-        () => {
-          this.$emit('typing-off');
-        },
-        TYPING_INDICATOR_IDLE_TIME
-      ),
      showUserMentions: false,
      showCannedMenu: false,
      showVariables: false,
@@ -161,16 +123,9 @@ export default {
      editorView: null,
      range: null,
      state: undefined,
-      isImageNodeSelected: false,
-      toolbarPosition: { top: 0, left: 0 },
-      sizes: MESSAGE_EDITOR_IMAGE_RESIZES,
-      selectedImageNode: null,
    };
  },
  computed: {
-    editorRoot() {
-      return this.$refs.editorRoot;
-    },
    contentFromEditor() {
      return MessageMarkdownSerializer.serialize(this.editorView.state.doc);
    },
@@ -279,11 +234,8 @@ export default {
    sendWithSignature() {
      // this is considered the source of truth, we watch this property
      // on change, we toggle the signature in the editor
-      if (this.allowSignature && !this.isPrivate && this.channelType) {
-        return this.fetchSignatureFlagFromUiSettings(this.channelType);
-      }
-
-      return false;
+      const { send_with_signature: isEnabled } = this.uiSettings;
+      return isEnabled && this.allowSignature && !this.isPrivate;
    },
  },
  watch: {
@@ -321,7 +273,6 @@ export default {
          const tr = this.editorView.state.tr.replaceSelectionWith(node);
          this.editorView.focus();
          this.state = this.editorView.state.apply(tr);
-          this.editorView.updateState(this.state);
          this.emitOnChange();
          this.$emit('clear-selection');
        }
@@ -347,17 +298,7 @@ export default {
  mounted() {
    this.createEditorView();
    this.editorView.updateState(this.state);
-    this.focusEditorInputField();
-
-    // BUS Event to insert text or markdown into the editor at the
-    // current cursor position.
-    // Components using this
-    // 1. SearchPopover.vue
-
-    bus.$on(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, this.insertContentIntoEditor);
-  },
-  beforeDestroy() {
-    bus.$off(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, this.insertContentIntoEditor);
+    this.focusEditor(this.value);
  },
  methods: {
    reloadState(content = this.value) {
@@ -444,7 +385,6 @@ export default {
        state: this.state,
        dispatchTransaction: tx => {
          this.state = this.state.apply(tx);
-          this.editorView.updateState(this.state);
          this.emitOnChange();
        },
        handleDOMEvents: {
@@ -457,9 +397,6 @@ export default {
          focus: () => {
            this.onFocus();
          },
-          click: () => {
-            this.isEditorMouseFocusedOnAnImage();
-          },
          blur: () => {
            this.onBlur();
          },
@@ -472,50 +409,6 @@ export default {
        },
      });
    },
-    isEditorMouseFocusedOnAnImage() {
-      if (!this.showImageResizeToolbar) {
-        return;
-      }
-      this.selectedImageNode = document.querySelector(
-        'img.ProseMirror-selectednode'
-      );
-      if (this.selectedImageNode) {
-        this.isImageNodeSelected = !!this.selectedImageNode;
-        // Get the position of the selected node
-        this.setToolbarPosition();
-      } else {
-        this.isImageNodeSelected = false;
-      }
-    },
-    setToolbarPosition() {
-      const editorRect = this.editorRoot.getBoundingClientRect();
-      const rect = this.selectedImageNode.getBoundingClientRect();
-      this.toolbarPosition = {
-        top: `${rect.top - editorRect.top - 30}px`,
-        left: `${rect.left - editorRect.left - 4}px`,
-      };
-    },
-    setURLWithQueryAndImageSize(size) {
-      if (!this.showImageResizeToolbar) {
-        return;
-      }
-      setURLWithQueryAndSize(this.selectedImageNode, size, this.editorView);
-      this.isImageNodeSelected = false;
-    },
-    updateImgToolbarOnDelete() {
-      // check if the selected node is present or not on keyup
-      // this is needed because the user can select an image and then delete it
-      // in that case, the selected node will be null and we need to hide the toolbar
-      // otherwise, the toolbar will be visible even when the image is deleted and cause some errors
-      if (this.selectedImageNode) {
-        const hasImgSelectedNode = document.querySelector(
-          'img.ProseMirror-selectednode'
-        );
-        if (!hasImgSelectedNode) {
-          this.isImageNodeSelected = false;
-        }
-      }
-    },
    isEnterToSendEnabled() {
      return isEditorHotKeyEnabled(this.uiSettings, 'enter');
    },
@@ -548,7 +441,11 @@ export default {
        userFullName: mentionItem.name,
      });

-      this.insertNodeIntoEditor(node, this.range.from, this.range.to);
+      const tr = this.editorView.state.tr
+        .replaceWith(this.range.from, this.range.to, node)
+        .insertText(` `);
+      this.state = this.editorView.state.apply(tr);
+      this.emitOnChange();
      this.$track(CONVERSATION_EVENTS.USED_MENTIONS);

      return false;
@@ -558,22 +455,30 @@ export default {
        message: cannedItem,
        variables: this.variables,
      });
-
      if (!this.editorView) {
        return null;
      }

+      let from = this.range.from - 1;
      let node = new MessageMarkdownTransformer(messageSchema).parse(
        updatedMessage
      );

-      const from =
-        node.textContent === updatedMessage
-          ? this.range.from
-          : this.range.from - 1;
+      if (node.textContent === updatedMessage) {
+        node = this.editorView.state.schema.text(updatedMessage);
+        from = this.range.from;
+      }

-      this.insertNodeIntoEditor(node, from, this.range.to);
+      const tr = this.editorView.state.tr.replaceWith(
+        from,
+        this.range.to,
+        node
+      );

+      this.state = this.editorView.state.apply(tr);
+      this.emitOnChange();
+
+      tr.scrollIntoView();
      this.$track(CONVERSATION_EVENTS.INSERTED_A_CANNED_RESPONSE);
      return false;
    },
@@ -581,14 +486,23 @@ export default {
      if (!this.editorView) {
        return null;
      }
+      let node = this.editorView.state.schema.text(`{{${variable}}}`);
+      const from = this.range.from;

-      const content = `{{${variable}}}`;
-      let node = this.editorView.state.schema.text(content);
-      const { from, to } = this.range;
+      const tr = this.editorView.state.tr.replaceWith(
+        from,
+        this.range.to,
+        node
+      );

-      this.insertNodeIntoEditor(node, from, to);
+      this.state = this.editorView.state.apply(tr);
+      this.emitOnChange();
+
+      // The `{{ }}` are added to the message, but the cursor is placed
+      // and onExit of suggestionsPlugin is not called. So we need to manually hide
      this.showVariables = false;
      this.$track(CONVERSATION_EVENTS.INSERTED_A_VARIABLE);
+      tr.scrollIntoView();
      return false;
    },
    openFileBrowser() {
@@ -644,12 +558,23 @@ export default {
    },

    emitOnChange() {
+      this.editorView.updateState(this.state);
+
      this.$emit('input', this.contentFromEditor);
    },

    hideMentions() {
      this.showUserMentions = false;
    },
+    resetTyping() {
+      this.$emit('typing-off');
+      this.idleTimer = null;
+    },
+    turnOffIdleTimer() {
+      if (this.idleTimer) {
+        clearTimeout(this.idleTimer);
+      }
+    },
    handleLineBreakWhenEnterToSendEnabled(event) {
      if (
        hasPressedEnterAndNotCmdOrShift(event) &&
@@ -669,8 +594,14 @@ export default {
      }
    },
    onKeyup() {
-      this.typingIndicator.start();
-      this.updateImgToolbarOnDelete();
+      if (!this.idleTimer) {
+        this.$emit('typing-on');
+      }
+      this.turnOffIdleTimer();
+      this.idleTimer = setTimeout(
+        () => this.resetTyping(),
+        TYPING_INDICATOR_IDLE_TIME
+      );
    },
    onKeydown(event) {
      if (this.isEnterToSendEnabled()) {
@@ -681,25 +612,13 @@ export default {
      }
    },
    onBlur() {
-      this.typingIndicator.stop();
+      this.turnOffIdleTimer();
+      this.resetTyping();
      this.$emit('blur');
    },
    onFocus() {
      this.$emit('focus');
    },
-    insertContentIntoEditor(content, defaultFrom = 0) {
-      const from = defaultFrom || this.editorView.state.selection.from || 0;
-      let node = new MessageMarkdownTransformer(messageSchema).parse(content);
-
-      this.insertNodeIntoEditor(node, from, undefined);
-    },
-    insertNodeIntoEditor(node, from = 0, to = 0) {
-      this.state = insertAtCursor(this.editorView, node, from, to);
-      this.emitOnChange();
-      this.$nextTick(() => {
-        scrollCursorIntoView(this.editorView);
-      });
-    },
  },
 };
 </script>
@@ -793,6 +712,6 @@ export default {
 }

 .editor-warning__message {
-  @apply text-red-400 dark:text-red-400 font-normal text-sm pt-1 pb-0 px-0;
+  @apply text-red-400 dark:text-red-400 text-sm font-normal pt-1 pb-0 px-0;
 }
 </style>
@@ -14,11 +14,10 @@
      <file-upload
        ref="upload"
        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
-        input-id="conversationAttachment"
        :size="4096 * 4096"
        :accept="allowedFileTypes"
        :multiple="enableMultipleFileUpload"
-        :drop="enableDragAndDrop"
+        :drop="true"
        :drop-directory="false"
        :data="{
          direct_upload_url: '/rails/active_storage/direct_uploads',
@@ -101,24 +100,14 @@
      <transition name="modal-fade">
        <div
          v-show="$refs.upload && $refs.upload.dropActive"
-          class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-slate-600 dark:text-slate-200 bg-white_transparent dark:bg-black_transparent"
+          class="modal-mask"
        >
-          <fluent-icon icon="cloud-backup" size="40" />
+          <fluent-icon icon="cloud-backup" />
          <h4 class="page-sub-title text-slate-600 dark:text-slate-200">
            {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
          </h4>
        </div>
      </transition>
-      <woot-button
-        v-if="enableInsertArticleInReply"
-        v-tooltip.top-end="$t('HELP_CENTER.ARTICLE_SEARCH.OPEN_ARTICLE_SEARCH')"
-        icon="document-text-link"
-        color-scheme="secondary"
-        variant="smooth"
-        size="small"
-        :title="$t('HELP_CENTER.ARTICLE_SEARCH.OPEN_ARTICLE_SEARCH')"
-        @click="toggleInsertArticle"
-      />
    </div>
    <div class="right-wrap">
      <woot-button
@@ -144,7 +133,6 @@ import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import {
  ALLOWED_FILE_TYPES,
  ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP,
-  ALLOWED_FILE_TYPES_FOR_LINE,
 } from 'shared/constants/messages';
 import VideoCallButton from '../VideoCallButton.vue';
 import AIAssistanceButton from '../AIAssistanceButton.vue';
@@ -240,14 +228,6 @@ export default {
      type: String,
      default: '',
    },
-    newConversationModalActive: {
-      type: Boolean,
-      default: false,
-    },
-    portalSlug: {
-      type: String,
-      required: true,
-    },
  },
  computed: {
    ...mapGetters({
@@ -271,9 +251,6 @@ export default {
      return this.showFileUpload || this.isNote;
    },
    showAudioRecorderButton() {
-      if (this.isALineChannel) {
-        return false;
-      }
      // Disable audio recorder for safari browser as recording is not supported
      const isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(
        navigator.userAgent
@@ -295,14 +272,8 @@ export default {
      if (this.isATwilioWhatsAppChannel) {
        return ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP;
      }
-      if (this.isALineChannel) {
-        return ALLOWED_FILE_TYPES_FOR_LINE;
-      }
      return ALLOWED_FILE_TYPES;
    },
-    enableDragAndDrop() {
-      return !this.newConversationModalActive;
-    },
    audioRecorderPlayStopIcon() {
      switch (this.recordingAudioState) {
        // playing paused recording stopped inactive destroyed
@@ -320,21 +291,14 @@ export default {
      return !this.isOnPrivateNote;
    },
    sendWithSignature() {
-      // channelType is sourced from inboxMixin
-      return this.fetchSignatureFlagFromUiSettings(this.channelType);
+      const { send_with_signature: isEnabled } = this.uiSettings;
+      return isEnabled;
    },
    signatureToggleTooltip() {
      return this.sendWithSignature
        ? this.$t('CONVERSATION.FOOTER.DISABLE_SIGN_TOOLTIP')
        : this.$t('CONVERSATION.FOOTER.ENABLE_SIGN_TOOLTIP');
    },
-    enableInsertArticleInReply() {
-      const isFeatEnabled = this.isFeatureEnabledonAccount(
-        this.accountId,
-        FEATURE_FLAGS.INSERT_ARTICLE_IN_REPLY
-      );
-      return isFeatEnabled && this.portalSlug;
-    },
  },
  mounted() {
    ActiveStorage.start();
@@ -346,14 +310,13 @@ export default {
      }
    },
    toggleMessageSignature() {
-      this.setSignatureFlagForInbox(this.channelType, !this.sendWithSignature);
+      this.updateUISettings({
+        send_with_signature: !this.sendWithSignature,
+      });
    },
    replaceText(text) {
      this.$emit('replace-text', text);
    },
-    toggleInsertArticle() {
-      this.$emit('toggle-insert-article');
-    },
  },
 };
 </script>
@@ -383,4 +346,12 @@ export default {
    @apply dark:bg-slate-800 bg-slate-100;
  }
 }
+
+.modal-mask {
+  @apply text-slate-600 dark:text-slate-200 bg-white_transparent dark:bg-black_transparent flex-col;
+}
+
+.icon {
+  @apply text-[5rem];
+}
 </style>
@@ -1,9 +1,5 @@
 <template>
-  <mention-box
-    v-if="items.length"
-    :items="items"
-    @mention-select="handleMentionClick"
-  >
+  <mention-box :items="items" @mention-select="handleMentionClick">
    <template slot-scope="{ item }">
      <strong>{{ item.label }}</strong> - {{ item.description }}
    </template>
@@ -32,9 +32,9 @@
        }}</span>
        <filter-item
          type="sort"
-          :selected-value="sortFilter"
+          :selected-value="chatSortFilter"
          :items="chatSortItems"
-          path-prefix="CHAT_LIST.SORT_ORDER_ITEMS"
+          path-prefix="CHAT_LIST.CHAT_SORT_FILTER_ITEMS"
          @onChangeFilter="onChangeFilter"
        />
      </div>
@@ -47,18 +47,17 @@ import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
 import FilterItem from './FilterItem.vue';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';

 export default {
  components: {
    FilterItem,
  },
-  mixins: [clickaway, uiSettingsMixin],
+  mixins: [clickaway],
  data() {
    return {
      showActionsDropdown: false,
      chatStatusItems: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS'),
-      chatSortItems: this.$t('CHAT_LIST.SORT_ORDER_ITEMS'),
+      chatSortItems: this.$t('CHAT_LIST.CHAT_SORT_FILTER_ITEMS'),
    };
  },
  computed: {
@@ -70,9 +69,7 @@ export default {
      return this.chatStatusFilter || wootConstants.STATUS_TYPE.OPEN;
    },
    sortFilter() {
-      return (
-        this.chatSortFilter || wootConstants.SORT_BY_TYPE.LAST_ACTIVITY_AT_DESC
-      );
+      return this.chatSortFilter || wootConstants.SORT_BY_TYPE.LATEST;
    },
  },
  methods: {
@@ -86,17 +83,8 @@ export default {
    closeDropdown() {
      this.showActionsDropdown = false;
    },
-    onChangeFilter(value, type) {
-      this.$emit('changeFilter', value, type);
-      this.saveSelectedFilter(type, value);
-    },
-    saveSelectedFilter(type, value) {
-      this.updateUISettings({
-        conversations_filter_by: {
-          status: type === 'status' ? value : this.chatStatus,
-          order_by: type === 'sort' ? value : this.sortFilter,
-        },
-      });
+    onChangeFilter(type, value) {
+      this.$emit('changeFilter', type, value);
    },
  },
 };
@@ -52,7 +52,6 @@
      :key="currentChat.id + '-' + dashboardApp.id"
      :is-visible="activeIndex - 1 === index"
      :config="dashboardApps[index].content"
-      :position="index"
      :current-chat="currentChat"
    />
  </div>
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-slate-25 dark:hover:bg-slate-800 group"
+    class="conversation flex flex-shrink-0 flex-grow-0 w-auto max-w-full cursor-pointer relative py-0 px-4 border-transparent border-l-2 border-t-0 border-b-0 border-r-0 border-solid items-start hover:bg-slate-25 dark:hover:bg-slate-800 group"
    :class="{
      'active bg-slate-25 dark:bg-slate-800 border-woot-500': isActiveChat,
      'unread-chat': hasUnread,
@@ -31,7 +31,7 @@
      size="40px"
    />
    <div
-      class="px-0 py-3 border-b group-hover:border-transparent border-slate-50 dark:border-slate-800/75 columns"
+      class="py-3 px-0 border-b group-last:border-transparent group-hover:border-transparent border-slate-50 dark:border-slate-800/75 columns"
    >
      <div class="flex justify-between">
        <inbox-name v-if="showInboxName" :inbox="inbox" />
@@ -55,11 +55,44 @@
      >
        {{ currentContact.name }}
      </h4>
-      <message-preview
+      <p
        v-if="lastMessageInChat"
-        :message="lastMessageInChat"
-        class="conversation--message my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] text-sm text-slate-700 dark:text-slate-200"
-      />
+        class="conversation--message text-slate-700 dark:text-slate-200 text-sm my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] overflow-hidden text-ellipsis whitespace-nowrap"
+      >
+        <fluent-icon
+          v-if="isMessagePrivate"
+          size="16"
+          class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
+          icon="lock-closed"
+        />
+        <fluent-icon
+          v-else-if="messageByAgent"
+          size="16"
+          class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
+          icon="arrow-reply"
+        />
+        <fluent-icon
+          v-else-if="isMessageAnActivity"
+          size="16"
+          class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
+          icon="info"
+        />
+        <span v-if="lastMessageInChat.content">
+          {{ parsedLastMessage }}
+        </span>
+        <span v-else-if="lastMessageInChat.attachments">
+          <fluent-icon
+            v-if="attachmentIcon"
+            size="16"
+            class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
+            :icon="attachmentIcon"
+          />
+          {{ $t(`${attachmentMessageContent}`) }}
+        </span>
+        <span v-else>
+          {{ $t('CHAT_LIST.NO_CONTENT') }}
+        </span>
+      </p>
      <p
        v-else
        class="conversation--message text-slate-700 dark:text-slate-200 text-sm my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] overflow-hidden text-ellipsis whitespace-nowrap"
@@ -73,8 +106,8 @@
          {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
        </span>
      </p>
-      <div class="absolute flex flex-col conversation--meta right-4 top-4">
-        <span class="ml-auto font-normal leading-4 text-black-600 text-xxs">
+      <div class="conversation--meta flex flex-col absolute right-4 top-4">
+        <span class="text-black-600 text-xxs font-normal leading-4 ml-auto">
          <time-ago
            :last-activity-timestamp="chat.timestamp"
            :created-at-timestamp="chat.created_at"
@@ -112,8 +145,9 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import { MESSAGE_TYPE } from 'widget/helpers/constants';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import Thumbnail from '../Thumbnail.vue';
-import MessagePreview from './MessagePreview.vue';
 import conversationMixin from '../../../mixins/conversations';
 import timeMixin from '../../../mixins/time';
 import router from '../../../routes';
@@ -125,6 +159,14 @@ import alertMixin from 'shared/mixins/alertMixin';
 import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
 import CardLabels from './conversationCardComponents/CardLabels.vue';
 import PriorityMark from './PriorityMark.vue';
+const ATTACHMENT_ICONS = {
+  image: 'image',
+  audio: 'headphones-sound-wave',
+  video: 'video',
+  file: 'document',
+  location: 'location',
+  fallback: 'link',
+};

 export default {
  components: {
@@ -133,11 +175,16 @@ export default {
    Thumbnail,
    ConversationContextMenu,
    TimeAgo,
-    MessagePreview,
    PriorityMark,
  },

-  mixins: [inboxMixin, timeMixin, conversationMixin, alertMixin],
+  mixins: [
+    inboxMixin,
+    timeMixin,
+    conversationMixin,
+    messageFormatterMixin,
+    alertMixin,
+  ],
  props: {
    activeLabel: {
      type: String,
@@ -175,10 +222,6 @@ export default {
      type: Boolean,
      default: false,
    },
-    enableContextMenu: {
-      type: Boolean,
-      default: false,
-    },
  },
  data() {
    return {
@@ -215,6 +258,20 @@ export default {
      );
    },

+    lastMessageFileType() {
+      const lastMessage = this.lastMessageInChat;
+      const [{ file_type: fileType } = {}] = lastMessage.attachments;
+      return fileType;
+    },
+
+    attachmentIcon() {
+      return ATTACHMENT_ICONS[this.lastMessageFileType];
+    },
+
+    attachmentMessageContent() {
+      return `CHAT_LIST.ATTACHMENTS.${this.lastMessageFileType}.CONTENT`;
+    },
+
    isActiveChat() {
      return this.currentChat.id === this.chat.id;
    },
@@ -235,6 +292,30 @@ export default {
      return this.lastMessage(this.chat);
    },

+    messageByAgent() {
+      const lastMessage = this.lastMessageInChat;
+      const { message_type: messageType } = lastMessage;
+      return messageType === MESSAGE_TYPE.OUTGOING;
+    },
+
+    isMessageAnActivity() {
+      const lastMessage = this.lastMessageInChat;
+      const { message_type: messageType } = lastMessage;
+      return messageType === MESSAGE_TYPE.ACTIVITY;
+    },
+
+    isMessagePrivate() {
+      const lastMessage = this.lastMessageInChat;
+      const { private: isPrivate } = lastMessage;
+      return isPrivate;
+    },
+
+    parsedLastMessage() {
+      const { content_attributes: contentAttributes } = this.lastMessageInChat;
+      const { email: { subject } = {} } = contentAttributes || {};
+      return this.getPlainText(subject || this.lastMessageInChat.content);
+    },
+
    inbox() {
      const { inbox_id: inboxId } = this.chat;
      const stateInbox = this.$store.getters['inboxes/getInbox'](inboxId);
@@ -293,7 +374,6 @@ export default {
      this.$emit(action, this.chat.id, this.inbox.id);
    },
    openContextMenu(e) {
-      if (!this.enableContextMenu) return;
      e.preventDefault();
      this.$emit('context-menu-toggle', true);
      this.contextMenu.x = e.pageX || e.clientX;
@@ -3,10 +3,10 @@
    class="bg-white dark:bg-slate-900 flex justify-between items-center py-2 px-4 border-b border-slate-50 dark:border-slate-800/50 flex-col md:flex-row"
  >
    <div
-      class="flex-1 w-full min-w-0 flex flex-col md:flex-row items-center justify-center"
+      class="flex-1 w-100 flex flex-col md:flex-row items-center justify-center"
    >
      <div
-        class="flex justify-start items-center mr-4 rtl:mr-0 rtl:ml-4 min-w-0 w-[inherit]"
+        class="flex justify-center items-center mr-4 rtl:mr-0 rtl:ml-4 min-w-0"
      >
        <back-button
          v-if="showBackButton"
@@ -19,31 +19,26 @@
          :username="currentContact.name"
          :status="currentContact.availability_status"
        />
-        <div
-          class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0 w-[inherit] overflow-hidden"
-        >
-          <div class="flex items-center flex-row gap-1 m-0 p-0 w-[inherit]">
-            <woot-button
-              variant="link"
-              color-scheme="secondary"
-              class="[&>span]:overflow-hidden [&>span]:whitespace-nowrap [&>span]:text-ellipsis min-w-0"
-              @click.prevent="$emit('contact-panel-toggle')"
+        <div class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0">
+          <woot-button
+            variant="link"
+            color-scheme="secondary"
+            class="overflow-hidden whitespace-nowrap text-ellipsis"
+            @click.prevent="$emit('contact-panel-toggle')"
+          >
+            <h3
+              class="text-base inline-block leading-tight capitalize m-0 p-0 text-ellipsis overflow-hidden whitespace-nowrap text-slate-900 dark:text-slate-100"
            >
-              <span
-                class="text-base leading-tight text-slate-900 dark:text-slate-100"
-              >
-                {{ currentContact.name }}
-              </span>
-            </woot-button>
-            <fluent-icon
-              v-if="!isHMACVerified"
-              v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
-              size="14"
-              class="text-yellow-600 dark:text-yellow-500 my-0 mx-0 min-w-[14px]"
-              icon="warning"
-            />
-          </div>
-
+              <span>{{ currentContact.name }}</span>
+              <fluent-icon
+                v-if="!isHMACVerified"
+                v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
+                size="14"
+                class="text-yellow-600 dark:text-yellow-500 my-0 mx-0.5"
+                icon="warning"
+              />
+            </h3>
+          </woot-button>
          <div
            class="conversation--header--actions items-center flex text-xs gap-2 text-ellipsis overflow-hidden whitespace-nowrap"
          >
@@ -1,7 +1,7 @@
 <template>
  <li v-if="shouldRenderMessage" :id="`message${data.id}`" :class="alignBubble">
    <div :class="wrapClass">
-      <div v-if="isFailed && !hasOneDayPassed" class="message-failed--alert">
+      <div v-if="isFailed" class="message-failed--alert">
        <woot-button
          v-tooltip.top-end="$t('CONVERSATION.TRY_AGAIN')"
          size="tiny"
@@ -22,26 +22,20 @@
          :bcc="emailHeadAttributes.bcc"
          :is-incoming="isIncoming"
        />
-        <instagram-story-reply v-if="storyUrl" :story-url="storyUrl" />
-        <bubble-reply-to
-          v-if="inReplyToMessageId && inboxSupportsReplyTo.incoming"
-          :message="inReplyTo"
-          :message-type="data.message_type"
-          :parent-has-attachments="hasAttachments"
-        />
-        <div v-if="isUnsupported">
-          <template v-if="isAFacebookInbox && isInstagram">
-            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_INSTAGRAM') }}
-          </template>
-          <template v-else-if="isAFacebookInbox">
-            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_FACEBOOK') }}
-          </template>
-          <template v-else>
-            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
-          </template>
-        </div>
+        <blockquote v-if="storyReply" class="story-reply-quote">
+          <span>{{ $t('CONVERSATION.REPLIED_TO_STORY') }}</span>
+          <bubble-image
+            v-if="!hasImgStoryError && storyUrl"
+            :url="storyUrl"
+            @error="onStoryLoadError"
+          />
+          <bubble-video
+            v-else-if="hasImgStoryError && storyUrl"
+            :url="storyUrl"
+          />
+        </blockquote>
        <bubble-text
-          v-else-if="data.content"
+          v-if="data.content"
          :message="message"
          :is-email="isEmailContentType"
          :display-quoted-button="displayQuotedButton"
@@ -59,15 +53,10 @@
        </span>
        <div v-if="!isPending && hasAttachments">
          <div v-for="attachment in attachments" :key="attachment.id">
-            <instagram-story
-              v-if="isAnInstagramStory"
-              :story-url="attachment.data_url"
-              @error="onMediaLoadError"
-            />
            <bubble-image-audio-video
-              v-else-if="isAttachmentImageVideoAudio(attachment.file_type)"
+              v-if="isAttachmentImageVideoAudio(attachment.file_type)"
              :attachment="attachment"
-              @error="onMediaLoadError"
+              @error="onImageLoadError"
            />
            <bubble-location
              v-else-if="attachment.file_type === 'location'"
@@ -80,6 +69,9 @@
              :name="data.content"
              :phone-number="attachment.fallback_title"
            />
+            <instagram-image-error-placeholder
+              v-else-if="hasImageError && hasInstagramStory"
+            />
            <bubble-file v-else :url="attachment.data_url" />
          </div>
        </div>
@@ -91,6 +83,7 @@
          :story-id="`${storyId}`"
          :is-a-tweet="isATweet"
          :is-a-whatsapp-channel="isAWhatsAppChannel"
+          :has-instagram-story="hasInstagramStory"
          :is-email="isEmailContentType"
          :is-private="data.private"
          :message-type="data.message_type"
@@ -139,43 +132,40 @@
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import BubbleActions from './bubble/Actions.vue';
-import BubbleContact from './bubble/Contact.vue';
 import BubbleFile from './bubble/File.vue';
+import BubbleImage from './bubble/Image.vue';
+import BubbleVideo from './bubble/Video.vue';
 import BubbleImageAudioVideo from './bubble/ImageAudioVideo.vue';
 import BubbleIntegration from './bubble/Integration.vue';
 import BubbleLocation from './bubble/Location.vue';
 import BubbleMailHead from './bubble/MailHead.vue';
-import BubbleReplyTo from './bubble/ReplyTo.vue';
 import BubbleText from './bubble/Text.vue';
-import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu.vue';
-import InstagramStory from './bubble/InstagramStory.vue';
-import InstagramStoryReply from './bubble/InstagramStoryReply.vue';
+import BubbleContact from './bubble/Contact.vue';
 import Spinner from 'shared/components/Spinner.vue';
+import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu.vue';
+import instagramImageErrorPlaceholder from './instagramImageErrorPlaceholder.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import contentTypeMixin from 'shared/mixins/contentTypeMixin';
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 import { generateBotMessageContent } from './helpers/botMessageContentHelper';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { ACCOUNT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
-import { LocalStorage } from 'shared/helpers/localStorage';
-import { getDayDifferenceFromNow } from 'shared/helpers/DateHelper';

 export default {
  components: {
    BubbleActions,
-    BubbleContact,
    BubbleFile,
+    BubbleImage,
+    BubbleVideo,
    BubbleImageAudioVideo,
    BubbleIntegration,
    BubbleLocation,
    BubbleMailHead,
-    BubbleReplyTo,
    BubbleText,
+    BubbleContact,
    ContextMenu,
-    InstagramStory,
-    InstagramStoryReply,
    Spinner,
+    instagramImageErrorPlaceholder,
  },
  mixins: [alertMixin, messageFormatterMixin, contentTypeMixin],
  props: {
@@ -187,37 +177,30 @@ export default {
      type: Boolean,
      default: false,
    },
-    isAFacebookInbox: {
-      type: Boolean,
-      default: false,
-    },
-    isInstagram: {
-      type: Boolean,
-      default: false,
-    },
    isAWhatsAppChannel: {
      type: Boolean,
      default: false,
    },
+    hasInstagramStory: {
+      type: Boolean,
+      default: false,
+    },
    isWebWidgetInbox: {
      type: Boolean,
      default: false,
    },
    inboxSupportsReplyTo: {
-      type: Object,
-      default: () => ({}),
-    },
-    inReplyTo: {
-      type: Object,
-      default: () => ({}),
+      type: Boolean,
+      default: false,
    },
  },
  data() {
    return {
      showContextMenu: false,
-      hasMediaLoadError: false,
+      hasImageError: false,
      contextMenuPosition: {},
      showBackgroundHighlight: false,
+      hasImgStoryError: false,
    };
  },
  computed: {
@@ -229,16 +212,11 @@ export default {
        created_at: this.data.created_at || '',
      }));
    },
-    hasOneDayPassed() {
-      // Disable retry button if the message is failed and the message is older than 24 hours
-      return getDayDifferenceFromNow(new Date(), this.data?.created_at) >= 1;
-    },
    shouldRenderMessage() {
      return (
        this.hasAttachments ||
        this.data.content ||
        this.isEmailContentType ||
-        this.isUnsupported ||
        this.isAnIntegrationMessage
      );
    },
@@ -291,29 +269,20 @@ export default {
        ) + botMessageContent
      );
    },
-    inReplyToMessageId() {
-      // Why not use the inReplyTo object directly?
-      // Glad you asked! The inReplyTo object may or may not be available
-      // depending on the current scroll position of the message list
-      // since old messages are only loaded when the user scrolls up
-      return this.data.content_attributes?.in_reply_to;
-    },
-    isAnInstagramStory() {
-      return this.contentAttributes.image_type === 'story_mention';
-    },
    contextMenuEnabledOptions() {
      return {
        copy: this.hasText,
        delete: this.hasText || this.hasAttachments,
        cannedResponse: this.isOutgoing && this.hasText,
-        replyTo: !this.data.private && this.inboxSupportsReplyTo.outgoing,
+        replyTo: false,
+        // replyTo: !this.data.private && this.inboxSupportsReplyTo,
      };
    },
    contentAttributes() {
      return this.data.content_attributes || {};
    },
    externalError() {
-      return this.contentAttributes.external_error || '';
+      return this.contentAttributes.external_error || null;
    },
    sender() {
      return this.data.sender || {};
@@ -330,6 +299,9 @@ export default {
    storyUrl() {
      return this.contentAttributes.story_url || null;
    },
+    storyReply() {
+      return this.storyUrl && this.hasInstagramStory;
+    },
    contentType() {
      const {
        data: { content_type: contentType },
@@ -353,8 +325,6 @@ export default {
        left: isLeftAligned,
        right: isRightAligned,
        'has-context-menu': this.showContextMenu,
-        // this handles the offset required to align the context menu button
-        // extra alignment is required since a tweet message has a the user name and avatar below it
        'has-tweet-menu': this.isATweet,
        'has-bg': this.showBackgroundHighlight,
      };
@@ -410,7 +380,7 @@ export default {
        return false;
      }
      if (this.isFailed) {
-        return this.externalError || this.$t(`CONVERSATION.SEND_FAILED`);
+        return this.externalError ? '' : this.$t(`CONVERSATION.SEND_FAILED`);
      }
      return false;
    },
@@ -427,7 +397,6 @@ export default {
      return {
        bubble: this.isBubble,
        'is-private': this.data.private,
-        'is-unsupported': this.isUnsupported,
        'is-image': this.hasMediaAttachment('image'),
        'is-video': this.hasMediaAttachment('video'),
        'is-text': this.hasText,
@@ -436,9 +405,6 @@ export default {
        'is-email': this.isEmailContentType,
      };
    },
-    isUnsupported() {
-      return this.contentAttributes.is_unsupported ?? false;
-    },
    isPending() {
      return this.data.status === MESSAGE_STATUS.PROGRESS;
    },
@@ -450,7 +416,11 @@ export default {
      return !this.sender.type || this.sender.type === 'agent_bot';
    },
    shouldShowContextMenu() {
-      return !(this.isFailed || this.isPending || this.isUnsupported);
+      return !(this.isFailed || this.isPending);
+    },
+    errorMessage() {
+      const { meta } = this.data;
+      return meta ? meta.error : '';
    },
    showAvatar() {
      if (this.isOutgoing || this.isTemplate) {
@@ -468,11 +438,13 @@ export default {
  },
  watch: {
    data() {
-      this.hasMediaLoadError = false;
+      this.hasImageError = false;
+      this.hasImgStoryError = false;
    },
  },
  mounted() {
-    this.hasMediaLoadError = false;
+    this.hasImageError = false;
+    this.hasImgStoryError = false;
    bus.$on(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL, this.closeContextMenu);
    this.setupHighlightTimer();
  },
@@ -482,13 +454,13 @@ export default {
  },
  methods: {
    isAttachmentImageVideoAudio(fileType) {
-      return ['image', 'audio', 'video', 'story_mention'].includes(fileType);
+      return ['image', 'audio', 'video'].includes(fileType);
    },
    hasMediaAttachment(type) {
      if (this.hasAttachments && this.data.attachments.length > 0) {
        const { attachments = [{}] } = this.data;
        const { file_type: fileType } = attachments[0];
-        return fileType === type && !this.hasMediaLoadError;
+        return fileType === type && !this.hasImageError;
      }
      if (this.storyReply) {
        return true;
@@ -501,8 +473,11 @@ export default {
    async retrySendMessage() {
      await this.$store.dispatch('sendMessageWithData', this.data);
    },
-    onMediaLoadError() {
-      this.hasMediaLoadError = true;
+    onImageLoadError() {
+      this.hasImageError = true;
+    },
+    onStoryLoadError() {
+      this.hasImgStoryError = true;
    },
    openContextMenu(e) {
      const shouldSkipContextMenu =
@@ -527,11 +502,10 @@ export default {
      this.contextMenuPosition = { x: null, y: null };
    },
    handleReplyTo() {
-      const replyStorageKey = LOCAL_STORAGE_KEYS.MESSAGE_REPLY_TO;
-      const { conversation_id: conversationId, id: replyTo } = this.data;
-
-      LocalStorage.updateJsonStore(replyStorageKey, conversationId, replyTo);
-      bus.$emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.data);
+      this.$store.dispatch('draftMessages/setInReplyTo', {
+        conversationId: this.data.conversation_id,
+        inReplyToMessage: this.data.id,
+      });
    },
    setupHighlightTimer() {
      if (Number(this.$route.query.messageId) !== Number(this.data.id)) {
@@ -552,14 +526,6 @@ export default {
  > .bubble {
    @apply min-w-[128px];

-    &.is-unsupported {
-      @apply text-xs max-w-[300px] border-dashed border border-slate-200 text-slate-600 dark:text-slate-200 bg-slate-50 dark:bg-slate-700 dark:border-slate-500;
-
-      .message-text--metadata .time {
-        @apply text-slate-400 dark:text-slate-300;
-      }
-    }
-
    &.is-image,
    &.is-video {
      @apply p-0 overflow-hidden;
@@ -572,12 +538,10 @@ export default {
        > video {
          @apply rounded-lg;
        }
-
        > video {
          @apply h-full w-full object-cover;
        }
      }
-
      .video {
        @apply h-[11.25rem];
      }
@@ -592,11 +556,9 @@ export default {
      .file--icon {
        @apply text-woot-400 dark:text-woot-400;
      }
-
      .text-block-title {
        @apply text-slate-700 dark:text-slate-700;
      }
-
      .download.button {
        @apply text-woot-400 dark:text-woot-400;
      }
@@ -605,7 +567,6 @@ export default {
    &.is-private.is-text > .message-text__wrap .link {
      @apply text-woot-600 dark:text-woot-200;
    }
-
    &.is-private.is-text > .message-text__wrap .prosemirror-mention-node {
      @apply font-bold bg-none rounded-sm p-0 bg-yellow-100 dark:bg-yellow-700 text-slate-700 dark:text-slate-25 underline;
    }
@@ -616,7 +577,6 @@ export default {
      .message-text--metadata .time {
        @apply text-violet-50 dark:text-violet-50;
      }
-
      &.is-private .message-text--metadata .time {
        @apply text-slate-400 dark:text-slate-400;
      }
@@ -666,8 +626,6 @@ li.right {
 }

 li.left.has-tweet-menu .context-menu {
-  // this handles the offset required to align the context menu button
-  // extra alignment is required since a tweet message has a the user name and avatar below it
  @apply mb-6;
 }

@@ -748,4 +706,8 @@ li.right {
    }
  }
 }
+
+.story-reply-quote {
+  @apply mt-2 mx-4 mb-0 px-2 pb-0 pt-2 border-l-4 border-solid border-slate-75 dark:border-slate-600 text-slate-600 dark:text-slate-200;
+}
 </style>
@@ -1,104 +0,0 @@
-<template>
-  <div class="overflow-hidden text-ellipsis whitespace-nowrap">
-    <template v-if="showMessageType">
-      <fluent-icon
-        v-if="isMessagePrivate"
-        size="16"
-        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
-        icon="lock-closed"
-      />
-      <fluent-icon
-        v-else-if="messageByAgent"
-        size="16"
-        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
-        icon="arrow-reply"
-      />
-      <fluent-icon
-        v-else-if="isMessageAnActivity"
-        size="16"
-        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
-        icon="info"
-      />
-    </template>
-    <span v-if="message.content && isMessageSticker">
-      <fluent-icon
-        size="16"
-        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
-        icon="image"
-      />
-      {{ $t('CHAT_LIST.ATTACHMENTS.image.CONTENT') }}
-    </span>
-    <span v-else-if="message.content">
-      {{ parsedLastMessage }}
-    </span>
-    <span v-else-if="message.attachments">
-      <fluent-icon
-        v-if="attachmentIcon && showMessageType"
-        size="16"
-        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
-        :icon="attachmentIcon"
-      />
-      {{ $t(`${attachmentMessageContent}`) }}
-    </span>
-    <span v-else>
-      {{ defaultEmptyMessage || $t('CHAT_LIST.NO_CONTENT') }}
-    </span>
-  </div>
-</template>
-
-<script>
-import { MESSAGE_TYPE } from 'widget/helpers/constants';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import { ATTACHMENT_ICONS } from 'shared/constants/messages';
-
-export default {
-  name: 'MessagePreview',
-  mixins: [messageFormatterMixin],
-  props: {
-    message: {
-      type: Object,
-      required: true,
-    },
-    showMessageType: {
-      type: Boolean,
-      default: true,
-    },
-    defaultEmptyMessage: {
-      type: String,
-      default: '',
-    },
-  },
-  computed: {
-    messageByAgent() {
-      const { message_type: messageType } = this.message;
-      return messageType === MESSAGE_TYPE.OUTGOING;
-    },
-    isMessageAnActivity() {
-      const { message_type: messageType } = this.message;
-      return messageType === MESSAGE_TYPE.ACTIVITY;
-    },
-    isMessagePrivate() {
-      const { private: isPrivate } = this.message;
-      return isPrivate;
-    },
-    parsedLastMessage() {
-      const { content_attributes: contentAttributes } = this.message;
-      const { email: { subject } = {} } = contentAttributes || {};
-      return this.getPlainText(subject || this.message.content);
-    },
-    lastMessageFileType() {
-      const [{ file_type: fileType } = {}] = this.message.attachments;
-      return fileType;
-    },
-    attachmentIcon() {
-      return ATTACHMENT_ICONS[this.lastMessageFileType];
-    },
-    attachmentMessageContent() {
-      return `CHAT_LIST.ATTACHMENTS.${this.lastMessageFileType}.CONTENT`;
-    },
-    isMessageSticker() {
-      return this.message && this.message.content_type === 'sticker';
-    },
-  },
-};
-</script>
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col justify-between flex-grow h-full min-w-0 m-0">
+  <div class="m-0 flex flex-col justify-between h-full flex-grow min-w-0">
    <banner
      v-if="!currentChat.can_reply"
      color-scheme="alert"
@@ -7,12 +7,21 @@
      :href-link="replyWindowLink"
      :href-link-text="replyWindowLinkText"
    />
+
+    <banner
+      v-if="isATweet"
+      color-scheme="gray"
+      :banner-message="tweetBannerText"
+      :has-close-button="hasSelectedTweetId"
+      @close="removeTweetSelection"
+    />
+
    <div class="flex justify-end">
      <woot-button
        variant="smooth"
        size="tiny"
        color-scheme="secondary"
-        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed top-[9.5rem] md:top-[6.25rem] z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
+        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed top-[6.25rem] z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
        :icon="isRightOrLeftIcon"
        @click="onToggleContactPanel"
      />
@@ -31,11 +40,9 @@
        :data="message"
        :is-a-tweet="isATweet"
        :is-a-whatsapp-channel="isAWhatsAppChannel"
+        :has-instagram-story="hasInstagramStory"
        :is-web-widget-inbox="isAWebWidgetInbox"
-        :is-a-facebook-inbox="isAFacebookInbox"
-        :is-instagram="isInstagramDM"
        :inbox-supports-reply-to="inboxSupportsReplyTo"
-        :in-reply-to="getInReplyToMessage(message)"
      />
      <li v-show="unreadMessageCount != 0" class="unread--toast">
        <span>
@@ -55,11 +62,8 @@
        :data="message"
        :is-a-tweet="isATweet"
        :is-a-whatsapp-channel="isAWhatsAppChannel"
+        :has-instagram-story="hasInstagramStory"
        :is-web-widget-inbox="isAWebWidgetInbox"
-        :is-a-facebook-inbox="isAFacebookInbox"
-        :is-instagram-dm="isInstagramDM"
-        :inbox-supports-reply-to="inboxSupportsReplyTo"
-        :in-reply-to="getInReplyToMessage(message)"
      />
      <conversation-label-suggestion
        v-if="shouldShowLabelSuggestions"
@@ -84,6 +88,8 @@
      </div>
      <reply-box
        :conversation-id="currentChat.id"
+        :is-a-tweet="isATweet"
+        :selected-tweet="selectedTweet"
        :popout-reply-box.sync="isPopoutReplyBox"
        @click="showPopoutReplyBox"
      />
@@ -148,6 +154,7 @@ export default {
      isLoadingPrevious: true,
      heightBeforeLoad: null,
      conversationPanel: null,
+      selectedTweetId: null,
      hasUserScrolled: false,
      isProgrammaticScroll: false,
      isPopoutReplyBox: false,
@@ -158,14 +165,12 @@ export default {

  computed: {
    ...mapGetters({
-      accountId: 'getCurrentAccountId',
      currentChat: 'getSelectedChat',
      allConversations: 'getAllConversations',
      inboxesList: 'inboxes/getInboxes',
      listLoadingStatus: 'getAllMessagesLoaded',
      loadingChatList: 'getChatListLoadingStatus',
      appIntegrations: 'integrations/getAppIntegrations',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
      currentAccountId: 'getCurrentAccountId',
    }),
    isOpen() {
@@ -185,6 +190,16 @@ export default {
    inbox() {
      return this.$store.getters['inboxes/getInbox'](this.inboxId);
    },
+    hasSelectedTweetId() {
+      return !!this.selectedTweetId;
+    },
+    tweetBannerText() {
+      return !this.selectedTweetId
+        ? this.$t('CONVERSATION.SELECT_A_TWEET_TO_REPLY')
+        : `
+          ${this.$t('CONVERSATION.REPLYING_TO')}
+          ${this.selectedTweet.content}` || '';
+    },
    typingUsersList() {
      const userList = this.$store.getters[
        'conversationTypingStatus/getUserList'
@@ -239,6 +254,21 @@ export default {
    isATweet() {
      return this.conversationType === 'tweet';
    },
+
+    hasInstagramStory() {
+      return this.conversationType === 'instagram_direct_message';
+    },
+
+    selectedTweet() {
+      if (this.selectedTweetId) {
+        const { messages = [] } = this.currentChat;
+        const [selectedMessage] = messages.filter(
+          message => message.id === this.selectedTweetId
+        );
+        return selectedMessage || {};
+      }
+      return '';
+    },
    isRightOrLeftIcon() {
      if (this.isContactPanelOpen) {
        return 'arrow-chevron-right';
@@ -287,16 +317,8 @@ export default {
    unreadMessageCount() {
      return this.currentChat.unread_count || 0;
    },
-    isInstagramDM() {
-      return this.conversationType === 'instagram_direct_message';
-    },
    inboxSupportsReplyTo() {
-      const incoming = this.inboxHasFeature(INBOX_FEATURES.REPLY_TO);
-      const outgoing =
-        this.inboxHasFeature(INBOX_FEATURES.REPLY_TO_OUTGOING) &&
-        !this.is360DialogWhatsAppChannel;
-
-      return { incoming, outgoing };
+      return this.inboxHasFeature(INBOX_FEATURES.REPLY_TO);
    },
  },

@@ -308,6 +330,7 @@ export default {
      this.fetchAllAttachmentsFromCurrentChat();
      this.fetchSuggestions();
      this.messageSentSinceOpened = false;
+      this.selectedTweetId = null;
    },
  },

@@ -315,6 +338,7 @@ export default {
    bus.$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);
+    bus.$on(BUS_EVENTS.SET_TWEET_REPLY, this.setSelectedTweet);
    // 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, () => {
@@ -349,7 +373,7 @@ export default {
      // method available in mixin, need to ensure that integrations are present
      await this.fetchIntegrationsIfRequired();

-      if (!this.isLabelSuggestionFeatureEnabled) {
+      if (!this.isAIIntegrationEnabled) {
        return;
      }

@@ -385,6 +409,10 @@ export default {
    },
    removeBusListeners() {
      bus.$off(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
+      bus.$off(BUS_EVENTS.SET_TWEET_REPLY, this.setSelectedTweet);
+    },
+    setSelectedTweet(tweetId) {
+      this.selectedTweetId = tweetId;
    },
    onScrollToMessage({ messageId = '' } = {}) {
      this.$nextTick(() => {
@@ -507,18 +535,8 @@ export default {
    makeMessagesRead() {
      this.$store.dispatch('markMessagesRead', { id: this.currentChat.id });
    },
-
-    getInReplyToMessage(parentMessage) {
-      if (!parentMessage) return {};
-      const inReplyToMessageId = parentMessage.content_attributes?.in_reply_to;
-      if (!inReplyToMessageId) return {};
-
-      return this.currentChat?.messages.find(message => {
-        if (message.id === inReplyToMessageId) {
-          return true;
-        }
-        return false;
-      });
+    removeTweetSelection() {
+      this.selectedTweetId = null;
    },
  },
 };
@@ -18,18 +18,7 @@
      :popout-reply-box="popoutReplyBox"
      @click="$emit('click')"
    />
-    <article-search-popover
-      v-if="showArticleSearchPopover && connectedPortalSlug"
-      :selected-portal-slug="connectedPortalSlug"
-      @insert="handleInsert"
-      @close="onSearchPopoverClose"
-    />
    <div class="reply-box__top">
-      <reply-to-message
-        v-if="shouldShowReplyToMessage"
-        :message="inReplyTo"
-        @dismiss="resetReplyToMessage"
-      />
      <canned-response
        v-if="showMentions && hasSlashCommand"
        v-on-clickaway="hideMentions"
@@ -41,7 +30,7 @@
        v-if="showEmojiPicker"
        v-on-clickaway="hideEmojiPicker"
        :class="emojiDialogClassOnExpandedLayoutAndRTLView"
-        :on-click="addIntoEditor"
+        :on-click="emojiOnClick"
      />
      <reply-email-head
        v-if="showReplyHead"
@@ -85,7 +74,6 @@
        :variables="messageVariables"
        :signature="signatureToApply"
        :allow-signature="true"
-        :channel-type="channelType"
        @typing-off="onTypingOff"
        @typing-on="onTypingOn"
        @focus="onFocus"
@@ -98,7 +86,6 @@
    </div>
    <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
      <attachment-preview
-        class="flex-col mt-4"
        :attachments="attachedFiles"
        :remove-attachment="removeAttachment"
      />
@@ -128,12 +115,9 @@
      :toggle-audio-recorder="toggleAudioRecorder"
      :toggle-emoji-picker="toggleEmojiPicker"
      :message="message"
-      :portal-slug="connectedPortalSlug"
-      :new-conversation-modal-active="newConversationModalActive"
      @selectWhatsappTemplate="openWhatsappTemplateModal"
      @toggle-editor="toggleRichContentEditor"
      @replace-text="replaceText"
-      @toggle-insert-article="toggleInsertArticle"
    />
    <whatsapp-templates
      :inbox-id="inbox.id"
@@ -157,13 +141,11 @@ import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';

 import CannedResponse from './CannedResponse.vue';
-import ReplyToMessage from './ReplyToMessage.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview.vue';
 import ReplyTopPanel from 'dashboard/components/widgets/WootWriter/ReplyTopPanel.vue';
 import ReplyEmailHead from './ReplyEmailHead.vue';
 import ReplyBottomPanel from 'dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue';
-import ArticleSearchPopover from 'dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue';
 import MessageSignatureMissingAlert from './MessageSignatureMissingAlert';
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
@@ -180,7 +162,7 @@ import {
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
 import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
-import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
+import inboxMixin from 'shared/mixins/inboxMixin';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { trimContent, debounce } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants/globals';
@@ -195,16 +177,12 @@ import {
  extractTextFromMarkdown,
 } from 'dashboard/helper/editorHelper';

-import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
-import { LocalStorage } from 'shared/helpers/localStorage';
-
 const EmojiInput = () => import('shared/components/emoji/EmojiInput');

 export default {
  components: {
    EmojiInput,
    CannedResponse,
-    ReplyToMessage,
    ResizableTextArea,
    AttachmentPreview,
    ReplyTopPanel,
@@ -215,7 +193,6 @@ export default {
    Banner,
    WhatsappTemplates,
    MessageSignatureMissingAlert,
-    ArticleSearchPopover,
  },
  mixins: [
    clickaway,
@@ -227,6 +204,14 @@ export default {
    fileUploadMixin,
  ],
  props: {
+    selectedTweet: {
+      type: [Object, String],
+      default: () => ({}),
+    },
+    isATweet: {
+      type: Boolean,
+      default: false,
+    },
    popoutReplyBox: {
      type: Boolean,
      default: false,
@@ -235,7 +220,6 @@ export default {
  data() {
    return {
      message: '',
-      inReplyTo: {},
      isFocused: false,
      showEmojiPicker: false,
      attachedFiles: [],
@@ -257,8 +241,6 @@ export default {
      showUserMentions: false,
      showCannedMenu: false,
      showVariablesMenu: false,
-      newConversationModalActive: false,
-      showArticleSearchPopover: false,
    };
  },
  computed: {
@@ -269,21 +251,7 @@ export default {
      lastEmail: 'getLastEmailInSelectedChat',
      globalConfig: 'globalConfig/get',
      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
    }),
-    currentContact() {
-      return this.$store.getters['contacts/getContact'](
-        this.currentChat.meta.sender.id
-      );
-    },
-    shouldShowReplyToMessage() {
-      return (
-        this.inReplyTo?.id &&
-        !this.isPrivate &&
-        this.inboxHasFeature(INBOX_FEATURES.REPLY_TO) &&
-        !this.is360DialogWhatsAppChannel
-      );
-    },
    showRichContentEditor() {
      if (this.isOnPrivateNote || this.isRichEditorEnabled) {
        return true;
@@ -355,7 +323,10 @@ export default {
      return this.maxLength - this.message.length;
    },
    isReplyButtonDisabled() {
-      if (this.isATwitterInbox) return true;
+      if (this.isATweet && !this.inReplyTo && !this.isOnPrivateNote) {
+        return true;
+      }
+
      if (this.hasAttachments || this.hasRecordedAudio) return false;

      return (
@@ -388,6 +359,11 @@ export default {
      if (this.isASmsInbox) {
        return MESSAGE_MAX_LENGTH.TWILIO_SMS;
      }
+      if (this.isATwitterInbox) {
+        if (this.conversationType === 'tweet') {
+          return MESSAGE_MAX_LENGTH.TWEET - this.replyToUserLength - 2;
+        }
+      }
      return MESSAGE_MAX_LENGTH.GENERAL;
    },
    showFileUpload() {
@@ -398,14 +374,15 @@ export default {
        this.isAPIInbox ||
        this.isAnEmailChannel ||
        this.isASmsInbox ||
-        this.isATelegramChannel ||
-        this.isALineChannel
+        this.isATelegramChannel
      );
    },
    replyButtonLabel() {
      let sendMessageText = this.$t('CONVERSATION.REPLYBOX.SEND');
      if (this.isPrivate) {
        sendMessageText = this.$t('CONVERSATION.REPLYBOX.CREATE');
+      } else if (this.conversationType === 'tweet') {
+        sendMessageText = this.$t('CONVERSATION.REPLYBOX.TWEET');
      }
      const keyLabel = isEditorHotKeyEnabled(this.uiSettings, 'cmd_enter')
        ? '(⌘ + ↵)'
@@ -439,6 +416,10 @@ export default {
    isOnPrivateNote() {
      return this.replyType === REPLY_EDITOR_MODES.NOTE;
    },
+    inReplyTo() {
+      const selectedTweet = this.selectedTweet || {};
+      return selectedTweet.id;
+    },
    isOnExpandedLayout() {
      const {
        LAYOUT_TYPES: { CONDENSED },
@@ -456,6 +437,15 @@ export default {
      }
      return '';
    },
+    replyToUserLength() {
+      const selectedTweet = this.selectedTweet || {};
+      const {
+        sender: {
+          additional_attributes: { screen_name: screenName = '' } = {},
+        } = {},
+      } = selectedTweet;
+      return screenName ? screenName.length : 0;
+    },
    isMessageEmpty() {
      if (!this.message) {
        return true;
@@ -480,7 +470,8 @@ export default {
      return !!this.signatureToApply;
    },
    sendWithSignature() {
-      return this.fetchSignatureFlagFromUiSettings(this.channelType);
+      const { send_with_signature: isEnabled } = this.uiSettings;
+      return isEnabled;
    },
    editorMessageKey() {
      const { editor_message_key: isEnabled } = this.uiSettings;
@@ -502,11 +493,7 @@ export default {
      return `draft-${this.conversationIdByRoute}-${this.replyType}`;
    },
    audioRecordFormat() {
-      if (
-        this.isAWhatsAppChannel ||
-        this.isAPIInbox ||
-        this.isATelegramChannel
-      ) {
+      if (this.isAWhatsAppChannel || this.isAPIInbox) {
        return AUDIO_FORMATS.OGG;
      }
      return AUDIO_FORMATS.WAV;
@@ -514,7 +501,6 @@ export default {
    messageVariables() {
      const variables = getMessageVariables({
        conversation: this.currentChat,
-        contact: this.currentContact,
      });
      return variables;
    },
@@ -524,18 +510,11 @@ export default {
        ? this.messageSignature
        : extractTextFromMarkdown(this.messageSignature);
    },
-    connectedPortalSlug() {
-      const { help_center: portal = {} } = this.inbox;
-      const { slug = '' } = portal;
-      return slug;
-    },
  },
  watch: {
    currentChat(conversation) {
      const { can_reply: canReply } = conversation;

-      this.setCCAndToEmailsFromLastChat();
-
      if (this.isOnPrivateNote) {
        return;
      }
@@ -546,7 +525,7 @@ export default {
        this.replyType = REPLY_EDITOR_MODES.NOTE;
      }

-      this.fetchAndSetReplyTo();
+      this.setCCAndToEmailsFromLastChat();
    },
    conversationIdByRoute(conversationId, oldConversationId) {
      if (conversationId !== oldConversationId) {
@@ -555,25 +534,17 @@ export default {
      }
    },
    message(updatedMessage) {
-      // Check if the message starts with a slash.
-      const bodyWithoutSignature = removeSignature(
-        updatedMessage,
-        this.signatureToApply
-      );
-      const startsWithSlash = bodyWithoutSignature.startsWith('/');
-
-      // Determine if the user is potentially typing a slash command.
-      // This is true if the message starts with a slash and the rich content editor is not active.
-      this.hasSlashCommand = startsWithSlash && !this.showRichContentEditor;
-      this.showMentions = this.hasSlashCommand;
-
-      // If a slash command is active, extract the command text after the slash.
-      // If not, reset the mentionSearchKey.
-      this.mentionSearchKey = this.hasSlashCommand
-        ? bodyWithoutSignature.substring(1)
-        : '';
-
-      // Autosave the current message draft.
+      this.hasSlashCommand =
+        updatedMessage[0] === '/' && !this.showRichContentEditor;
+      const hasNextWord = updatedMessage.includes(' ');
+      const isShortCodeActive = this.hasSlashCommand && !hasNextWord;
+      if (isShortCodeActive) {
+        this.mentionSearchKey = updatedMessage.substring(1);
+        this.showMentions = true;
+      } else {
+        this.mentionSearchKey = '';
+        this.showMentions = false;
+      }
      this.doAutoSaveDraft();
    },
    replyType(updatedReplyType, oldReplyType) {
@@ -596,49 +567,12 @@ export default {
      500,
      true
    );
-
-    this.fetchAndSetReplyTo();
-    bus.$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(
-      BUS_EVENTS.NEW_CONVERSATION_MODAL,
-      this.onNewConversationModalActive
-    );
  },
  destroyed() {
    document.removeEventListener('paste', this.onPaste);
    document.removeEventListener('keydown', this.handleKeyEvents);
-    bus.$off(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.fetchAndSetReplyTo);
-  },
-  beforeDestroy() {
-    bus.$off(
-      BUS_EVENTS.NEW_CONVERSATION_MODAL,
-      this.onNewConversationModalActive
-    );
  },
  methods: {
-    handleInsert(article) {
-      const { url, title } = article;
-      if (this.isRichEditorEnabled) {
-        // Removing empty lines from the title
-        const lines = title.split('\n');
-        const nonEmptyLines = lines.filter(line => line.trim() !== '');
-        const filteredMarkdown = nonEmptyLines.join(' ');
-        bus.$emit(
-          BUS_EVENTS.INSERT_INTO_RICH_EDITOR,
-          `[${filteredMarkdown}](${url})`
-        );
-      } else {
-        this.addIntoEditor(
-          `${this.$t('CONVERSATION.REPLYBOX.INSERT_READ_MORE')} ${url}`
-        );
-      }
-
-      this.$track(CONVERSATION_EVENTS.INSERT_ARTICLE_LINK);
-    },
    toggleRichContentEditor() {
      this.updateUISettings({
        display_rich_content_editor: !this.showRichContentEditor,
@@ -819,7 +753,6 @@ export default {
        : this.$track(CONVERSATION_EVENTS.SENT_MESSAGE, {
            channelType: this.channelType,
            signatureEnabled: this.sendWithSignature,
-            hasReplyTo: !!this.inReplyTo?.id,
          });
    },
    async onSendReply() {
@@ -870,18 +803,10 @@ export default {
      this.hideWhatsappTemplatesModal();
    },
    replaceText(message) {
-      if (this.sendWithSignature && !this.private) {
-        // if signature is enabled, append it to the message
-        // appendSignature ensures that the signature is not duplicated
-        // so we don't need to check if the signature is already present
-        message = appendSignature(message, this.signatureToApply);
-      }
-
      const updatedMessage = replaceVariablesInMessage({
        message,
        variables: this.messageVariables,
      });
-
      setTimeout(() => {
        this.$track(CONVERSATION_EVENTS.INSERTED_A_CANNED_RESPONSE);
        this.message = updatedMessage;
@@ -904,22 +829,22 @@ export default {
    clearEditorSelection() {
      this.updateEditorSelectionWith = '';
    },
-    insertIntoTextEditor(text, selectionStart, selectionEnd) {
+    insertEmoji(emoji, selectionStart, selectionEnd) {
      const { message } = this;
      const newMessage =
        message.slice(0, selectionStart) +
-        text +
+        emoji +
        message.slice(selectionEnd, message.length);
      this.message = newMessage;
    },
-    addIntoEditor(content) {
+    emojiOnClick(emoji) {
      if (this.showRichContentEditor) {
-        this.updateEditorSelectionWith = content;
+        this.updateEditorSelectionWith = emoji;
        this.onFocus();
      }
      if (!this.showRichContentEditor) {
        const { selectionStart, selectionEnd } = this.$refs.messageInput.$el;
-        this.insertIntoTextEditor(content, selectionStart, selectionEnd);
+        this.insertEmoji(emoji, selectionStart, selectionEnd);
      }
    },
    clearMessage() {
@@ -930,7 +855,6 @@ export default {
      }
      this.attachedFiles = [];
      this.isRecordingAudio = false;
-      this.resetReplyToMessage();
    },
    clearEmailField() {
      this.ccEmails = '';
@@ -1023,19 +947,6 @@ export default {
        (item, index) => itemIndex !== index
      );
    },
-    setReplyToInPayload(payload) {
-      if (this.inReplyTo?.id) {
-        return {
-          ...payload,
-          contentAttributes: {
-            ...payload.contentAttributes,
-            in_reply_to: this.inReplyTo.id,
-          },
-        };
-      }
-
-      return payload;
-    },
    getMessagePayloadForWhatsapp(message) {
      const multipleMessagePayload = [];

@@ -1045,41 +956,39 @@ export default {
          const attachedFile = this.globalConfig.directUploadsEnabled
            ? attachment.blobSignedId
            : attachment.resource.file;
-          let attachmentPayload = {
+          const attachmentPayload = {
            conversationId: this.currentChat.id,
            files: [attachedFile],
            private: false,
            message: caption,
            sender: this.sender,
          };
-
-          attachmentPayload = this.setReplyToInPayload(attachmentPayload);
          multipleMessagePayload.push(attachmentPayload);
          caption = '';
        });
      } else {
-        let messagePayload = {
+        const messagePayload = {
          conversationId: this.currentChat.id,
          message,
          private: false,
          sender: this.sender,
        };
-
-        messagePayload = this.setReplyToInPayload(messagePayload);
-
        multipleMessagePayload.push(messagePayload);
      }

      return multipleMessagePayload;
    },
    getMessagePayload(message) {
-      let messagePayload = {
+      const messagePayload = {
        conversationId: this.currentChat.id,
        message,
        private: this.isPrivate,
        sender: this.sender,
      };
-      messagePayload = this.setReplyToInPayload(messagePayload);
+
+      if (this.inReplyTo) {
+        messagePayload.contentAttributes = { in_reply_to: this.inReplyTo };
+      }

      if (this.attachedFiles && this.attachedFiles.length) {
        messagePayload.files = [];
@@ -1151,39 +1060,6 @@ export default {
      this.bccEmails = bcc.join(', ');
      this.toEmails = to.join(', ');
    },
-    fetchAndSetReplyTo() {
-      const replyStorageKey = LOCAL_STORAGE_KEYS.MESSAGE_REPLY_TO;
-      const replyToMessageId = LocalStorage.getFromJsonStore(
-        replyStorageKey,
-        this.conversationId
-      );
-
-      this.inReplyTo = this.currentChat?.messages?.find(message => {
-        if (message.id === replyToMessageId) {
-          return true;
-        }
-        return false;
-      });
-    },
-    resetReplyToMessage() {
-      const replyStorageKey = LOCAL_STORAGE_KEYS.MESSAGE_REPLY_TO;
-      LocalStorage.deleteFromJsonStore(replyStorageKey, this.conversationId);
-      bus.$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
-      // then the file is not getting attached to the new conversation modal
-      // and it is getting attached to the current conversation reply box
-      // so to fix this we are removing the drag and drop event listener from the current conversation reply box
-      // When new conversation modal is open
-      this.newConversationModalActive = isActive;
-    },
-    onSearchPopoverClose() {
-      this.showArticleSearchPopover = false;
-    },
-    toggleInsertArticle() {
-      this.showArticleSearchPopover = !this.showArticleSearchPopover;
-    },
  },
 };
 </script>
@@ -1202,7 +1078,7 @@ export default {
 }

 .reply-box {
-  @apply relative border-t border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;
+  @apply border-t border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;

  &.is-private {
    @apply bg-yellow-50 dark:bg-yellow-200;
@@ -1,49 +0,0 @@
-<template>
-  <div
-    class="reply-editor bg-slate-50 dark:bg-slate-800 rounded-md py-1 pl-2 pr-1 text-xs tracking-wide mt-2 flex items-center gap-1.5 -mx-2"
-  >
-    <fluent-icon class="flex-shrink-0 icon" icon="arrow-reply" size="14" />
-    <div class="flex-grow gap-1 mt-px text-xs truncate">
-      {{ $t('CONVERSATION.REPLYBOX.REPLYING_TO') }}
-      <message-preview
-        :message="message"
-        :show-message-type="false"
-        :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
-        class="inline"
-      />
-    </div>
-    <woot-button
-      v-tooltip="$t('CONVERSATION.REPLYBOX.DISMISS_REPLY')"
-      color-scheme="secondary"
-      icon="dismiss"
-      variant="clear"
-      size="tiny"
-      class="flex-shrink-0"
-      @click.stop="$emit('dismiss')"
-    />
-  </div>
-</template>
-
-<script>
-import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
-
-export default {
-  components: { MessagePreview },
-  props: {
-    message: {
-      type: Object,
-      required: true,
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-// TODO: Remove this
-// override for dashboard/assets/scss/widgets/_reply-box.scss
-.reply-editor {
-  .icon {
-    margin-right: 0px !important;
-  }
-}
-</style>
@@ -1,9 +1,5 @@
 <template>
-  <mention-box
-    type="variable"
-    :items="items"
-    @mention-select="handleVariableClick"
-  >
+  <mention-box :items="items" @mention-select="handleVariableClick">
    <template slot-scope="{ item }">
      <span class="text-capitalize variable--list-label">
        {{ item.description }}
@@ -14,7 +10,6 @@
 </template>

 <script>
-import { mapGetters } from 'vuex';
 import { MESSAGE_VARIABLES } from 'shared/constants/messages';
 import MentionBox from '../mentions/MentionBox.vue';

@@ -27,16 +22,7 @@ export default {
    },
  },
  computed: {
-    ...mapGetters({
-      customAttributes: 'attributes/getAttributes',
-    }),
    items() {
-      return [
-        ...this.standardAttributeVariables,
-        ...this.customAttributeVariables,
-      ];
-    },
-    standardAttributeVariables() {
      return MESSAGE_VARIABLES.filter(variable => {
        return (
          variable.label.includes(this.searchKey) ||
@@ -48,20 +34,6 @@ export default {
        description: variable.label,
      }));
    },
-    customAttributeVariables() {
-      return this.customAttributes.map(attribute => {
-        const attributePrefix =
-          attribute.attribute_model === 'conversation_attribute'
-            ? 'conversation'
-            : 'contact';
-
-        return {
-          label: `${attributePrefix}.custom_attribute.${attribute.attribute_key}`,
-          key: `${attributePrefix}.custom_attribute.${attribute.attribute_key}`,
-          description: attribute.attribute_description,
-        };
-      });
-    },
  },
  methods: {
    handleVariableClick(item = {}) {
@@ -33,7 +33,7 @@
      <woot-button variant="smooth" @click="$emit('resetTemplate')">
        {{ $t('WHATSAPP_TEMPLATES.PARSER.GO_BACK_LABEL') }}
      </woot-button>
-      <woot-button type="button" @click="sendMessage">
+      <woot-button @click="sendMessage">
        {{ $t('WHATSAPP_TEMPLATES.PARSER.SEND_MESSAGE_LABEL') }}
      </woot-button>
    </footer>
@@ -57,6 +57,17 @@
      @mouseenter="isHovered = true"
      @mouseleave="isHovered = false"
    />
+    <button
+      v-if="isATweet && (isIncoming || isOutgoing) && sourceId"
+      @click="onTweetReply"
+    >
+      <fluent-icon
+        v-tooltip.top-start="$t('CHAT_LIST.REPLY_TO_TWEET')"
+        icon="arrow-reply"
+        class="action--icon cursor-pointer"
+        size="16"
+      />
+    </button>
    <a
      v-if="isATweet && (isOutgoing || isIncoming) && linkToTweet"
      :href="linkToTweet"
@@ -66,7 +77,7 @@
      <fluent-icon
        v-tooltip.top-start="$t('CHAT_LIST.VIEW_TWEET_IN_TWITTER')"
        icon="open"
-        class="cursor-pointer action--icon"
+        class="action--icon cursor-pointer"
        size="16"
      />
    </a>
@@ -75,6 +86,7 @@

 <script>
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import { mapGetters } from 'vuex';
 import timeMixin from '../../../../mixins/time';
@@ -114,6 +126,10 @@ export default {
      type: Boolean,
      default: true,
    },
+    hasInstagramStory: {
+      type: Boolean,
+      default: true,
+    },
    messageType: {
      type: Number,
      default: 1,
@@ -192,46 +208,24 @@ export default {
      if (!this.showStatusIndicators) {
        return false;
      }
-      // Messages will be marked as sent for the Email channel if they have a source ID.
+
      if (this.isAnEmailChannel) {
        return !!this.sourceId;
      }

-      if (
-        this.isAWhatsAppChannel ||
-        this.isATwilioChannel ||
-        this.isAFacebookInbox ||
-        this.isASmsInbox ||
-        this.isATelegramChannel
-      ) {
+      if (this.isAWhatsAppChannel) {
        return this.sourceId && this.isSent;
      }
-      // All messages will be mark as sent for the Line channel, as there is no source ID.
-      if (this.isALineChannel) {
-        return true;
-      }
-
      return false;
    },
    showDeliveredIndicator() {
      if (!this.showStatusIndicators) {
        return false;
      }
-      if (
-        this.isAWhatsAppChannel ||
-        this.isATwilioChannel ||
-        this.isASmsInbox ||
-        this.isAFacebookInbox
-      ) {
+
+      if (this.isAWhatsAppChannel) {
        return this.sourceId && this.isDelivered;
      }
-      // All messages marked as delivered for the web widget inbox and API inbox once they are sent.
-      if (this.isAWebWidgetInbox || this.isAPIInbox) {
-        return this.isSent;
-      }
-      if (this.isALineChannel) {
-        return this.isDelivered;
-      }

      return false;
    },
@@ -239,21 +233,24 @@ export default {
      if (!this.showStatusIndicators) {
        return false;
      }
-      if (
-        this.isAWhatsAppChannel ||
-        this.isATwilioChannel ||
-        this.isAFacebookInbox
-      ) {
+
+      if (this.isAWebWidgetInbox || this.isAPIInbox) {
+        const { contact_last_seen_at: contactLastSeenAt } = this.currentChat;
+        return contactLastSeenAt >= this.createdAt;
+      }
+
+      if (this.isAWhatsAppChannel) {
        return this.sourceId && this.isRead;
      }

-      if (this.isAWebWidgetInbox || this.isAPIInbox) {
-        return this.isRead;
-      }
-
      return false;
    },
  },
+  methods: {
+    onTweetReply() {
+      bus.$emit(BUS_EVENTS.SET_TWEET_REPLY, this.id);
+    },
+  },
 };
 </script>

@@ -1,6 +1,6 @@
 <template>
  <div class="image message-text__wrap">
-    <img :src="url" @click="onClick" @error="$emit('error')" />
+    <img :src="url" @click="onClick" @error="onImgError()" />
    <woot-modal :full-width="true" :show.sync="show" :on-close="onClose">
      <img :src="url" class="modal-image skip-context-menu" />
    </woot-modal>
@@ -28,6 +28,9 @@ export default {
    onClick() {
      this.show = true;
    },
+    onImgError() {
+      this.$emit('error');
+    },
  },
 };
 </script>
@@ -4,14 +4,13 @@
      v-if="isImage && !isImageError"
      :src="attachment.data_url"
      @click="onClick"
-      @error="onImgError"
+      @error="onImgError()"
    />
    <video
      v-if="isVideo"
      :src="attachment.data_url"
      muted
      playsInline
-      @error="onImgError"
      @click="onClick"
    />
    <audio v-else-if="isAudio" controls class="skip-context-menu">
@@ -22,7 +21,7 @@
      :show.sync="show"
      :attachment="attachment"
      :all-attachments="filteredCurrentChatAttachments"
-      @error="onImgError"
+      @error="onImgError()"
      @close="onClose"
    />
  </div>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Shivam Mishra	7adf7ab115	refactor: better variable names	2023-10-04 18:22:35 +05:30
Shivam Mishra	ba1eaa169a	chore: revert flag condition to false	2023-10-04 18:16:34 +05:30
Shivam Mishra	a862ddfafe	test: new inReplyTo states	2023-10-04 18:14:15 +05:30
Shivam Mishra	249fcdf471	fix: event handler call	2023-10-04 18:14:15 +05:30
Shivam Mishra	e4620291a7	feat: setup inReplyTo store	2023-10-04 18:14:15 +05:30
Shivam MishraandGitHub	3aa79dffef	fix: event name	2023-10-04 18:13:52 +05:30
Shivam MishraandGitHub	758b7bf061	Merge branch 'develop' into feature/cw-2594	2023-10-04 16:00:29 +05:30
Shivam Mishra	93d126af7b	chore: add comment for INBOX_FEATURE_MAP	2023-10-04 15:55:54 +05:30
Shivam Mishra	3c6c57ca0e	refactor: better variable name	2023-10-04 15:54:48 +05:30
Shivam Mishra	b952608eeb	feat: disable reply to for all	2023-10-04 15:52:17 +05:30
Shivam Mishra	eb6f1e4031	feat: allow reply to for outgoing messages too	2023-10-04 15:51:48 +05:30
Shivam Mishra	94909255a8	test: cover all inboxMixin functions	2023-10-04 15:50:01 +05:30
Shivam Mishra	91788255f2	test: missing tests for line and telegram	2023-10-04 15:30:15 +05:30
Shivam Mishra	515b9ba0b5	refactor: use common config generator	2023-10-04 15:26:34 +05:30
Shivam Mishra	e5c5ebc398	test: inboxHasFeature	2023-10-04 15:20:11 +05:30
Shivam Mishra	21212d9bc3	chore: add dummy handler	2023-10-04 12:13:57 +05:30
Shivam Mishra	0af9e974bd	feat: add feature flag map for inbox specific features	2023-10-04 12:12:15 +05:30
Shivam Mishra	b3141de50b	feat: add context menu option for reply to	2023-10-04 12:01:09 +05:30
Shivam Mishra	1da6962467	feat: add copy for reply to	2023-10-04 12:00:43 +05:30
@@ -1 +1 @@
 .3.1
 .1.0
@@ -1 +1 @@
 .7.0
 .4.0