Merge branch 'feat/whatsapp-embedded-signup' into feat/whatsapp-es-reauth-flow

# Pull Request Template

## Description

Please include a summary of the change and issue(s) fixed. Also, mention
relevant motivation, context, and any dependencies that this change
requires.
Fixes # (issue)

## Type of change

Please delete options that are not relevant.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality not to work as expected)
- [ ] This change requires a documentation update

## How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also list any relevant details
for your test configuration.


## Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

.codeclimate.yml

@@ -0,0 +1,62 @@
+version: '2'
+plugins:
+  rubocop:
+    enabled: false
+    channel: rubocop-0-73
+  eslint:
+    enabled: false
+  csslint:
+    enabled: true
+  scss-lint:
+    enabled: true
+  brakeman:
+    enabled: false
+checks:
+  similar-code:
+    enabled: false
+  method-count:
+    enabled: true
+    config:
+      threshold: 32
+  file-lines:
+    enabled: true
+    config:
+      threshold: 300
+  method-lines:
+    config:
+      threshold: 50
+exclude_patterns:
+  - 'spec/'
+  - '**/specs/**/**'
+  - '**/spec/**/**'
+  - 'db/*'
+  - 'bin/**/*'
+  - 'db/**/*'
+  - 'config/**/*'
+  - 'public/**/*'
+  - 'vendor/**/*'
+  - 'node_modules/**/*'
+  - 'lib/tasks/auto_annotate_models.rake'
+  - 'app/test-matchers.js'
+  - 'docs/*'
+  - '**/*.md'
+  - '**/*.yml'
+  - 'app/javascript/dashboard/i18n/locale'
+  - '**/*.stories.js'
+  - 'stories/'
+  - 'app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js'
+  - 'app/javascript/shared/constants/countries.js'
+  - 'app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js'
+  - 'app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js'
+  - 'app/javascript/dashboard/routes/dashboard/settings/automation/constants.js'
+  - 'app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.js'
+  - 'app/javascript/dashboard/routes/dashboard/settings/reports/constants.js'
+  - 'app/javascript/dashboard/store/captain/storeFactory.js'
+  - 'app/javascript/dashboard/i18n/index.js'
+  - 'app/javascript/widget/i18n/index.js'
+  - 'app/javascript/survey/i18n/index.js'
+  - 'app/javascript/shared/constants/locales.js'
+  - 'app/javascript/dashboard/helper/specs/macrosFixtures.js'
+  - 'app/javascript/dashboard/routes/dashboard/settings/macros/constants.js'
+  - '**/fixtures/**'
+  - '**/*/fixtures.js'

.gitignore

@@ -94,4 +94,3 @@ yarn-debug.log*
 .vscode
 .claude/settings.local.json
 .cursor
-CLAUDE.local.md

.qlty/.gitignore

@@ -1,7 +0,0 @@
-*
-!configs
-!configs/**
-!hooks
-!hooks/**
-!qlty.toml
-!.gitignore

.qlty/configs/.hadolint.yaml

@@ -1,2 +0,0 @@
-ignored:
-  - DL3008

.qlty/configs/.shellcheckrc

@@ -1 +0,0 @@
-source-path=SCRIPTDIR

.qlty/configs/.yamllint.yaml

@@ -1,8 +0,0 @@
-rules:
-  document-start: disable
-  quoted-strings:
-    required: only-when-needed
-    extra-allowed: ["{|}"]
-  key-duplicates: {}
-  octal-values:
-    forbid-implicit-octal: true

.qlty/qlty.toml

@@ -1,84 +0,0 @@
-# This file was automatically generated by `qlty init`.
-# You can modify it to suit your needs.
-# We recommend you to commit this file to your repository.
-#
-# This configuration is used by both Qlty CLI and Qlty Cloud.
-#
-#     Qlty CLI -- Code quality toolkit for developers
-#     Qlty Cloud -- Fully automated Code Health Platform
-#
-# Try Qlty Cloud: https://qlty.sh
-#
-# For a guide to configuration, visit https://qlty.sh/d/config
-# Or for a full reference, visit https://qlty.sh/d/qlty-toml
-config_version = "0"
-
-exclude_patterns = [
-  "*_min.*",
-  "*-min.*",
-  "*.min.*",
-  "**/.yarn/**",
-  "**/*.d.ts",
-  "**/assets/**",
-  "**/bower_components/**",
-  "**/build/**",
-  "**/cache/**",
-  "**/config/**",
-  "**/db/**",
-  "**/deps/**",
-  "**/dist/**",
-  "**/extern/**",
-  "**/external/**",
-  "**/generated/**",
-  "**/Godeps/**",
-  "**/gradlew/**",
-  "**/mvnw/**",
-  "**/node_modules/**",
-  "**/protos/**",
-  "**/seed/**",
-  "**/target/**",
-  "**/templates/**",
-  "**/testdata/**",
-  "**/vendor/**", "spec/", "**/specs/**/**", "**/spec/**/**", "db/*", "bin/**/*", "db/**/*", "config/**/*", "public/**/*", "vendor/**/*", "node_modules/**/*", "lib/tasks/auto_annotate_models.rake", "app/test-matchers.js", "docs/*", "**/*.md", "**/*.yml", "app/javascript/dashboard/i18n/locale", "**/*.stories.js", "stories/", "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js", "app/javascript/shared/constants/countries.js", "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js", "app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js", "app/javascript/dashboard/routes/dashboard/settings/automation/constants.js", "app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.js", "app/javascript/dashboard/routes/dashboard/settings/reports/constants.js", "app/javascript/dashboard/store/captain/storeFactory.js", "app/javascript/dashboard/i18n/index.js", "app/javascript/widget/i18n/index.js", "app/javascript/survey/i18n/index.js", "app/javascript/shared/constants/locales.js", "app/javascript/dashboard/helper/specs/macrosFixtures.js", "app/javascript/dashboard/routes/dashboard/settings/macros/constants.js", "**/fixtures/**", "**/*/fixtures.js",
-]
-
-test_patterns = [
-  "**/test/**",
-  "**/spec/**",
-  "**/*.test.*",
-  "**/*.spec.*",
-  "**/*_test.*",
-  "**/*_spec.*",
-  "**/test_*.*",
-  "**/spec_*.*",
-]
-
-[smells]
-mode = "comment"
-
-[smells.boolean_logic]
-threshold = 4
-
-[smells.file_complexity]
-threshold = 66
-enabled = true
-
-[smells.return_statements]
-threshold = 4
-
-[smells.nested_control_flow]
-threshold = 4
-
-[smells.function_parameters]
-threshold = 4
-
-[smells.function_complexity]
-threshold = 5
-
-[smells.duplication]
-enabled = true
-threshold = 20
-
-[[source]]
-name = "default"
-default = true

.rubocop.yml

@@ -283,7 +283,7 @@ Rails/RedundantActiveRecordAllMethod:
   Enabled: false
 
 Layout/TrailingEmptyLines:
-  Enabled: true
+  Enabled: false
 
 Style/SafeNavigationChainLength:
   Enabled: false

AGENTS.md

@@ -55,21 +55,4 @@
 
 ## Ruby Best Practices
 
-- Use compact `module/class` definitions; avoid nested styles
-
-## Enterprise Edition Notes
-
-- Chatwoot has an Enterprise overlay under `enterprise/` that extends/overrides OSS code.
-- When you add or modify core functionality, always check for corresponding files in `enterprise/` and keep behavior compatible.
-- Follow the Enterprise development practices documented here:
-  - https://chatwoot.help/hc/handbook/articles/developing-enterprise-edition-features-38
-
-Practical checklist for any change impacting core logic or public APIs
-- Search for related files in both trees before editing (e.g., `rg -n "FooService|ControllerName|ModelName" app enterprise`).
-- If adding new endpoints, services, or models, consider whether Enterprise needs:
-  - An override (e.g., `enterprise/app/...`), or
-  - An extension point (e.g., `prepend_mod_with`, hooks, configuration) to avoid hard forks.
-- Avoid hardcoding instance- or plan-specific behavior in OSS; prefer configuration, feature flags, or extension points consumed by Enterprise.
-- Keep request/response contracts stable across OSS and Enterprise; update both sets of routes/controllers when introducing new APIs.
-- When renaming/moving shared code, mirror the change in `enterprise/` to prevent drift.
-- Tests: Add Enterprise-specific specs under `spec/enterprise`, mirroring OSS spec layout where applicable.
+- Use compact `module/class` definitions; avoid nested styles

Gemfile

@@ -108,7 +108,7 @@ gem 'google-cloud-translate-v3', '>= 0.7.0'
 ##-- apm and error monitoring ---#
 # loaded only when environment variables are set.
 # ref application.rb
-gem 'datadog', '~> 2.0', require: false
+gem 'ddtrace', require: false
 gem 'elastic-apm', require: false
 gem 'newrelic_rpm', require: false
 gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
@@ -121,8 +121,6 @@ gem 'sentry-sidekiq', '>= 5.19.0', require: false
 gem 'sidekiq', '>= 7.3.1'
 # We want cron jobs
 gem 'sidekiq-cron', '>= 1.12.0'
-# for sidekiq healthcheck
-gem 'sidekiq_alive'
 
 ##-- Push notification service --##
 gem 'fcm'
@@ -179,10 +177,6 @@ gem 'reverse_markdown'
 
 gem 'iso-639'
 gem 'ruby-openai'
-gem 'ai-agents', '>= 0.4.3'
-
-# TODO: Move this gem as a dependency of ai-agents
-gem 'ruby_llm-schema'
 
 gem 'shopify_api'
 

Gemfile.lock

@@ -25,35 +25,35 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actioncable (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
       zeitwerk (~> 2.6)
-    actionmailbox (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      activejob (= 7.1.5.2)
-      activerecord (= 7.1.5.2)
-      activestorage (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actionmailbox (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activejob (= 7.1.5.1)
+      activerecord (= 7.1.5.1)
+      activestorage (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    actionmailer (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      actionview (= 7.1.5.2)
-      activejob (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actionmailer (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      actionview (= 7.1.5.1)
+      activejob (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
       rails-dom-testing (~> 2.2)
-    actionpack (7.1.5.2)
-      actionview (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actionpack (7.1.5.1)
+      actionview (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       nokogiri (>= 1.8.5)
       racc
       rack (>= 2.2.4)
@@ -61,38 +61,38 @@ GEM
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
-    actiontext (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      activerecord (= 7.1.5.2)
-      activestorage (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actiontext (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activerecord (= 7.1.5.1)
+      activestorage (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actionview (7.1.5.1)
+      activesupport (= 7.1.5.1)
       builder (~> 3.1)
       erubi (~> 1.11)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
     active_record_query_trace (1.8)
-    activejob (7.1.5.2)
-      activesupport (= 7.1.5.2)
+    activejob (7.1.5.1)
+      activesupport (= 7.1.5.1)
       globalid (>= 0.3.6)
-    activemodel (7.1.5.2)
-      activesupport (= 7.1.5.2)
-    activerecord (7.1.5.2)
-      activemodel (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    activemodel (7.1.5.1)
+      activesupport (= 7.1.5.1)
+    activerecord (7.1.5.1)
+      activemodel (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       timeout (>= 0.4.0)
     activerecord-import (2.1.0)
       activerecord (>= 4.2)
-    activestorage (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      activejob (= 7.1.5.2)
-      activerecord (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    activestorage (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activejob (= 7.1.5.1)
+      activerecord (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       marcel (~> 1.0)
-    activesupport (7.1.5.2)
+    activesupport (7.1.5.1)
       base64
       benchmark (>= 0.3)
       bigdecimal
@@ -126,8 +126,6 @@ GEM
       jbuilder (~> 2)
       rails (>= 4.2, < 7.2)
       selectize-rails (~> 0.6)
-    ai-agents (0.4.3)
-      ruby_llm (~> 1.3)
     annotate (3.2.0)
       activerecord (>= 3.2, < 8.0)
       rake (>= 10.4, < 14.0)
@@ -155,10 +153,10 @@ GEM
     barnes (0.0.9)
       multi_json (~> 1)
       statsd-ruby (~> 1.1)
-    base64 (0.3.0)
+    base64 (0.2.0)
     bcrypt (3.1.20)
-    benchmark (0.4.1)
-    bigdecimal (3.2.2)
+    benchmark (0.4.0)
+    bigdecimal (3.1.9)
     bindex (0.8.1)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
@@ -194,14 +192,10 @@ GEM
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    datadog (2.19.0)
-      datadog-ruby_core_source (~> 3.4, >= 3.4.1)
-      libdatadog (~> 18.1.0.1.0)
-      libddwaf (~> 1.24.1.0.3)
-      logger
-      msgpack
-    datadog-ruby_core_source (3.4.1)
     date (3.4.1)
+    ddtrace (0.48.0)
+      ffi (~> 1.0)
+      msgpack
     debug (1.8.0)
       irb (>= 1.5.0)
       reline (>= 0.3.1)
@@ -363,7 +357,6 @@ GEM
     grpc (1.72.0-x86_64-linux)
       google-protobuf (>= 3.25, < 5.0)
       googleapis-common-protos-types (~> 1.0)
-    gserver (0.0.1)
     haikunator (1.1.1)
     hairtrigger (1.0.0)
       activerecord (>= 6.0, < 8)
@@ -448,16 +441,6 @@ GEM
       logger (~> 1.6)
     letter_opener (1.10.0)
       launchy (>= 2.2, < 4)
-    libdatadog (18.1.0.1.0)
-    libdatadog (18.1.0.1.0-x86_64-linux)
-    libddwaf (1.24.1.0.3)
-      ffi (~> 1.0)
-    libddwaf (1.24.1.0.3-arm64-darwin)
-      ffi (~> 1.0)
-    libddwaf (1.24.1.0.3-x86_64-darwin)
-      ffi (~> 1.0)
-    libddwaf (1.24.1.0.3-x86_64-linux)
-      ffi (~> 1.0)
     line-bot-api (1.28.0)
     lint_roller (1.1.0)
     liquid (5.4.0)
@@ -492,7 +475,7 @@ GEM
     mime-types-data (3.2023.0218.1)
     mini_magick (4.12.0)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.9)
+    mini_portile2 (2.8.8)
     minitest (5.25.5)
     mock_redis (0.36.0)
       ruby2_keywords
@@ -523,14 +506,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.18.9)
+    nokogiri (1.18.8)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.18.9-arm64-darwin)
+    nokogiri (1.18.8-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.9-x86_64-darwin)
+    nokogiri (1.18.8-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.9-x86_64-linux-gnu)
+    nokogiri (1.18.8-x86_64-linux-gnu)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -613,20 +596,20 @@ GEM
     rackup (1.0.1)
       rack (< 3)
       webrick
-    rails (7.1.5.2)
-      actioncable (= 7.1.5.2)
-      actionmailbox (= 7.1.5.2)
-      actionmailer (= 7.1.5.2)
-      actionpack (= 7.1.5.2)
-      actiontext (= 7.1.5.2)
-      actionview (= 7.1.5.2)
-      activejob (= 7.1.5.2)
-      activemodel (= 7.1.5.2)
-      activerecord (= 7.1.5.2)
-      activestorage (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    rails (7.1.5.1)
+      actioncable (= 7.1.5.1)
+      actionmailbox (= 7.1.5.1)
+      actionmailer (= 7.1.5.1)
+      actionpack (= 7.1.5.1)
+      actiontext (= 7.1.5.1)
+      actionview (= 7.1.5.1)
+      activejob (= 7.1.5.1)
+      activemodel (= 7.1.5.1)
+      activerecord (= 7.1.5.1)
+      activestorage (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       bundler (>= 1.15.0)
-      railties (= 7.1.5.2)
+      railties (= 7.1.5.1)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
@@ -634,9 +617,9 @@ GEM
     rails-html-sanitizer (1.6.1)
       loofah (~> 2.21)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
-    railties (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    railties (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       irb
       rackup (>= 1.0.0)
       rake (>= 12.2)
@@ -734,16 +717,6 @@ GEM
     ruby2ruby (2.5.0)
       ruby_parser (~> 3.1)
       sexp_processor (~> 4.6)
-    ruby_llm (1.5.1)
-      base64
-      event_stream_parser (~> 1)
-      faraday (>= 1.10.0)
-      faraday-multipart (>= 1)
-      faraday-net_http (>= 1)
-      faraday-retry (>= 1)
-      marcel (~> 1.0)
-      zeitwerk (~> 2)
-    ruby_llm-schema (0.1.0)
     ruby_parser (3.20.0)
       sexp_processor (~> 4.16)
     sass (3.7.4)
@@ -801,9 +774,6 @@ GEM
       fugit (~> 1.8)
       globalid (>= 1.0.1)
       sidekiq (>= 6)
-    sidekiq_alive (2.5.0)
-      gserver (~> 0.0.1)
-      sidekiq (>= 5, < 9)
     signet (0.17.0)
       addressable (~> 2.8)
       faraday (>= 0.17.5, < 3.a)
@@ -842,7 +812,7 @@ GEM
     stripe (8.5.0)
     telephone_number (1.4.20)
     test-prof (1.2.1)
-    thor (1.4.0)
+    thor (1.3.1)
     tilt (2.3.0)
     time_diff (0.3.0)
       activesupport
@@ -925,7 +895,6 @@ DEPENDENCIES
   administrate (>= 0.20.1)
   administrate-field-active_storage (>= 1.0.3)
   administrate-field-belongs_to_search (>= 0.9.0)
-  ai-agents (>= 0.4.3)
   annotate
   attr_extras
   audited (~> 5.4, >= 5.4.1)
@@ -942,7 +911,7 @@ DEPENDENCIES
   commonmarker
   csv-safe
   database_cleaner
-  datadog (~> 2.0)
+  ddtrace
   debug (~> 1.8)
   devise (>= 4.9.4)
   devise-secure_password!
@@ -1019,7 +988,6 @@ DEPENDENCIES
   rubocop-rails
   rubocop-rspec
   ruby-openai
-  ruby_llm-schema
   scout_apm
   scss_lint
   seed_dump
@@ -1030,7 +998,6 @@ DEPENDENCIES
   shoulda-matchers
   sidekiq (>= 7.3.1)
   sidekiq-cron (>= 1.12.0)
-  sidekiq_alive
   simplecov (= 0.17.1)
   slack-ruby-client (~> 2.5.2)
   spring

VERSION_CW

@@ -1 +1 @@
-4.4.0
+3.13.0

VERSION_CWCTL

@@ -1 +1 @@
-3.4.2
+3.2.0

app/actions/contact_identify_action.rb

@@ -6,7 +6,6 @@
 # We don't want to update the name of the identified original contact.
 
 class ContactIdentifyAction
-  include UrlHelper
   pattr_initialize [:contact!, :params!, { retain_original_contact_name: false, discard_invalid_attrs: false }]
 
   def perform
@@ -105,14 +104,7 @@ class ContactIdentifyAction
     # TODO: replace reject { |_k, v| v.blank? } with compact_blank when rails is upgraded
     @contact.discard_invalid_attrs if discard_invalid_attrs
     @contact.save!
-    enqueue_avatar_job
-  end
-
-  def enqueue_avatar_job
-    return unless params[:avatar_url].present? && !@contact.avatar.attached?
-    return unless url_valid?(params[:avatar_url])
-
-    Avatar::AvatarFromUrlJob.perform_later(@contact, params[:avatar_url])
+    Avatar::AvatarFromUrlJob.perform_later(@contact, params[:avatar_url]) if params[:avatar_url].present? && !@contact.avatar.attached?
   end
 
   def merge_contact(base_contact, merge_contact)

app/controllers/api/v1/accounts/assignment_policies/inboxes_controller.rb

@@ -1,20 +0,0 @@
-class Api::V1::Accounts::AssignmentPolicies::InboxesController < Api::V1::Accounts::BaseController
-  before_action :fetch_assignment_policy
-  before_action -> { check_authorization(AssignmentPolicy) }
-
-  def index
-    @inboxes = @assignment_policy.inboxes
-  end
-
-  private
-
-  def fetch_assignment_policy
-    @assignment_policy = Current.account.assignment_policies.find(
-      params[:assignment_policy_id]
-    )
-  end
-
-  def permitted_params
-    params.permit(:assignment_policy_id)
-  end
-end

app/controllers/api/v1/accounts/assignment_policies_controller.rb

@@ -1,36 +0,0 @@
-class Api::V1::Accounts::AssignmentPoliciesController < Api::V1::Accounts::BaseController
-  before_action :fetch_assignment_policy, only: [:show, :update, :destroy]
-  before_action :check_authorization
-
-  def index
-    @assignment_policies = Current.account.assignment_policies
-  end
-
-  def show; end
-
-  def create
-    @assignment_policy = Current.account.assignment_policies.create!(assignment_policy_params)
-  end
-
-  def update
-    @assignment_policy.update!(assignment_policy_params)
-  end
-
-  def destroy
-    @assignment_policy.destroy!
-    head :ok
-  end
-
-  private
-
-  def fetch_assignment_policy
-    @assignment_policy = Current.account.assignment_policies.find(params[:id])
-  end
-
-  def assignment_policy_params
-    params.require(:assignment_policy).permit(
-      :name, :description, :assignment_order, :conversation_priority,
-      :fair_distribution_limit, :fair_distribution_window, :enabled
-    )
-  end
-end

app/controllers/api/v1/accounts/callbacks_controller.rb

@@ -30,14 +30,7 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
   end
 
   def facebook_pages
-    pages = []
-    fb_pages = fb_object.get_connections('me', 'accounts')
-    pages.concat(fb_pages)
-    while fb_pages.respond_to?(:next_page) && (next_page = fb_pages.next_page)
-      fb_pages = next_page
-      pages.concat(fb_pages)
-    end
-    @page_details = mark_already_existing_facebook_pages(pages)
+    @page_details = mark_already_existing_facebook_pages(fb_object.get_connections('me', 'accounts'))
   end
 
   def set_instagram_id(page_access_token, facebook_channel)

app/controllers/api/v1/accounts/campaigns_controller.rb

@@ -29,6 +29,6 @@ class Api::V1::Accounts::CampaignsController < Api::V1::Accounts::BaseController
 
   def campaign_params
     params.require(:campaign).permit(:title, :description, :message, :enabled, :trigger_only_during_business_hours, :inbox_id, :sender_id,
-                                     :scheduled_at, audience: [:type, :id], trigger_rules: {}, template_params: {})
+                                     :scheduled_at, audience: [:type, :id], trigger_rules: {})
   end
 end

app/controllers/api/v1/accounts/contacts_controller.rb

@@ -122,7 +122,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   def resolved_contacts
     return @resolved_contacts if @resolved_contacts
 
-    @resolved_contacts = Current.account.contacts.resolved_contacts(use_crm_v2: Current.account.feature_enabled?('crm_v2'))
+    @resolved_contacts = Current.account.contacts.resolved_contacts
 
     @resolved_contacts = @resolved_contacts.tagged_with(params[:labels], any: true) if params[:labels].present?
     @resolved_contacts

app/controllers/api/v1/accounts/inboxes/assignment_policies_controller.rb

@@ -1,46 +0,0 @@
-class Api::V1::Accounts::Inboxes::AssignmentPoliciesController < Api::V1::Accounts::BaseController
-  before_action :fetch_inbox
-  before_action :fetch_assignment_policy, only: [:create]
-  before_action -> { check_authorization(AssignmentPolicy) }
-  before_action :validate_assignment_policy, only: [:show, :destroy]
-
-  def show
-    @assignment_policy = @inbox.assignment_policy
-  end
-
-  def create
-    # There should be only one assignment policy for an inbox.
-    # If there is a new request to add an assignment policy, we will
-    # delete the old one and attach the new policy
-    remove_inbox_assignment_policy
-    @inbox_assignment_policy = @inbox.create_inbox_assignment_policy!(assignment_policy: @assignment_policy)
-    @assignment_policy = @inbox.assignment_policy
-  end
-
-  def destroy
-    remove_inbox_assignment_policy
-    head :ok
-  end
-
-  private
-
-  def remove_inbox_assignment_policy
-    @inbox.inbox_assignment_policy&.destroy
-  end
-
-  def fetch_inbox
-    @inbox = Current.account.inboxes.find(permitted_params[:inbox_id])
-  end
-
-  def fetch_assignment_policy
-    @assignment_policy = Current.account.assignment_policies.find(permitted_params[:assignment_policy_id])
-  end
-
-  def permitted_params
-    params.permit(:assignment_policy_id, :inbox_id)
-  end
-
-  def validate_assignment_policy
-    return render_not_found_error(I18n.t('errors.assignment_policy.not_found')) unless @inbox.assignment_policy
-  end
-end

app/controllers/api/v1/accounts/inboxes_controller.rb

@@ -69,17 +69,6 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     render status: :ok, json: { message: I18n.t('messages.inbox_deletetion_response') }
   end
 
-  def sync_templates
-    unless @inbox.channel.is_a?(Channel::Whatsapp)
-      return render status: :unprocessable_entity, json: { error: 'Template sync is only available for WhatsApp channels' }
-    end
-
-    Channels::Whatsapp::TemplatesSyncJob.perform_later(@inbox.channel)
-    render status: :ok, json: { message: 'Template sync initiated successfully' }
-  rescue StandardError => e
-    render status: :internal_server_error, json: { error: e.message }
-  end
-
   private
 
   def fetch_inbox

app/controllers/api/v1/accounts/integrations/notion_controller.rb

@@ -11,4 +11,4 @@ class Api::V1::Accounts::Integrations::NotionController < Api::V1::Accounts::Bas
   def fetch_hook
     @hook = Integrations::Hook.where(account: Current.account).find_by(app_id: 'notion')
   end
-end
+end

app/controllers/api/v1/accounts/notion/authorizations_controller.rb

@@ -18,4 +18,4 @@ class Api::V1::Accounts::Notion::AuthorizationsController < Api::V1::Accounts::O
       render json: { success: false }, status: :unprocessable_entity
     end
   end
-end
+end

app/controllers/api/v1/accounts/portals_controller.rb

@@ -26,8 +26,9 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
       @portal.update!(portal_params.merge(live_chat_widget_params)) if params[:portal].present?
       # @portal.custom_domain = parsed_custom_domain
       process_attached_logo if params[:blob_id].present?
-    rescue ActiveRecord::RecordInvalid => e
-      render_record_invalid(e)
+    rescue StandardError => e
+      Rails.logger.error e
+      render json: { error: @portal.errors.messages }.to_json, status: :unprocessable_entity
     end
   end
 
@@ -46,20 +47,6 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
     head :ok
   end
 
-  def send_instructions
-    email = permitted_params[:email]
-    return render_could_not_create_error(I18n.t('portals.send_instructions.email_required')) if email.blank?
-    return render_could_not_create_error(I18n.t('portals.send_instructions.invalid_email_format')) unless valid_email?(email)
-    return render_could_not_create_error(I18n.t('portals.send_instructions.custom_domain_not_configured')) if @portal.custom_domain.blank?
-
-    PortalInstructionsMailer.send_cname_instructions(
-      portal: @portal,
-      recipient_email: email
-    ).deliver_later
-
-    render json: { message: I18n.t('portals.send_instructions.instructions_sent_successfully') }, status: :ok
-  end
-
   def process_attached_logo
     blob_id = params[:blob_id]
     blob = ActiveStorage::Blob.find_by(id: blob_id)
@@ -73,12 +60,12 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
   end
 
   def permitted_params
-    params.permit(:id, :email)
+    params.permit(:id)
   end
 
   def portal_params
     params.require(:portal).permit(
-      :id, :account_id, :color, :custom_domain, :header_text, :homepage_link,
+      :account_id, :color, :custom_domain, :header_text, :homepage_link,
       :name, :page_title, :slug, :archived, { config: [:default_locale, { allowed_locales: [] }] }
     )
   end
@@ -101,10 +88,4 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
     domain = URI.parse(@portal.custom_domain)
     domain.is_a?(URI::HTTP) ? domain.host : @portal.custom_domain
   end
-
-  def valid_email?(email)
-    ValidEmail2::Address.new(email).valid?
-  end
 end
-
-Api::V1::Accounts::PortalsController.prepend_mod_with('Api::V1::Accounts::PortalsController')

app/controllers/api/v1/accounts/whatsapp/authorizations_controller.rb

@@ -1,87 +0,0 @@
-class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts::BaseController
-  before_action :validate_feature_enabled!
-  before_action :fetch_and_validate_inbox, if: -> { params[:inbox_id].present? }
-
-  # POST /api/v1/accounts/:account_id/whatsapp/authorization
-  # Handles both initial authorization and reauthorization
-  # If inbox_id is present in params, it performs reauthorization
-  def create
-    validate_embedded_signup_params!
-    channel = process_embedded_signup
-    render_success_response(channel.inbox)
-  rescue StandardError => e
-    render_error_response(e)
-  end
-
-  private
-
-  def process_embedded_signup
-    service = Whatsapp::EmbeddedSignupService.new(
-      account: Current.account,
-      params: params.permit(:code, :business_id, :waba_id, :phone_number_id).to_h.symbolize_keys,
-      inbox_id: params[:inbox_id]
-    )
-    service.perform
-  end
-
-  def fetch_and_validate_inbox
-    @inbox = Current.account.inboxes.find(params[:inbox_id])
-    validate_reauthorization_required
-  end
-
-  def validate_reauthorization_required
-    return if @inbox.channel.reauthorization_required? || can_upgrade_to_embedded_signup?
-
-    render json: {
-      success: false,
-      message: I18n.t('inbox.reauthorization.not_required')
-    }, status: :unprocessable_entity
-  end
-
-  def can_upgrade_to_embedded_signup?
-    channel = @inbox.channel
-    return false unless channel.provider == 'whatsapp_cloud'
-
-    true
-  end
-
-  def render_success_response(inbox)
-    response = {
-      success: true,
-      id: inbox.id,
-      name: inbox.name,
-      channel_type: 'whatsapp'
-    }
-    response[:message] = I18n.t('inbox.reauthorization.success') if params[:inbox_id].present?
-    render json: response
-  end
-
-  def render_error_response(error)
-    Rails.logger.error "[WHATSAPP AUTHORIZATION] Embedded signup error: #{error.message}"
-    Rails.logger.error error.backtrace.join("\n")
-    render json: {
-      success: false,
-      error: error.message
-    }, status: :unprocessable_entity
-  end
-
-  def validate_feature_enabled!
-    return if Current.account.feature_whatsapp_embedded_signup?
-
-    render json: {
-      success: false,
-      error: 'WhatsApp embedded signup is not enabled for this account'
-    }, status: :forbidden
-  end
-
-  def validate_embedded_signup_params!
-    missing_params = []
-    missing_params << 'code' if params[:code].blank?
-    missing_params << 'business_id' if params[:business_id].blank?
-    missing_params << 'waba_id' if params[:waba_id].blank?
-
-    return if missing_params.empty?
-
-    raise ArgumentError, "Required parameters are missing: #{missing_params.join(', ')}"
-  end
-end

app/controllers/microsoft_controller.rb

@@ -2,7 +2,7 @@ class MicrosoftController < ApplicationController
   after_action :set_version_header
 
   def identity_association
-    microsoft_identity
+    microsoft_indentity
   end
 
   private
@@ -11,7 +11,7 @@ class MicrosoftController < ApplicationController
     response.headers['Content-Length'] = { associatedApplications: [{ applicationId: @identity_json }] }.to_json.length
   end
 
-  def microsoft_identity
+  def microsoft_indentity
     @identity_json = GlobalConfigService.load('AZURE_APP_ID', nil)
   end
 end

app/controllers/notion/callbacks_controller.rb

@@ -33,4 +33,4 @@ class Notion::CallbacksController < OauthCallbackController
   def notion_redirect_uri
     "#{ENV.fetch('FRONTEND_URL', nil)}/app/accounts/#{account.id}/settings/integrations/notion"
   end
-end
+end

app/controllers/platform/api/v1/accounts_controller.rb

@@ -1,11 +1,4 @@
 class Platform::Api::V1::AccountsController < PlatformController
-  def index
-    @resources = @platform_app.platform_app_permissibles
-                              .where(permissible_type: 'Account')
-                              .includes(:permissible)
-                              .map(&:permissible)
-  end
-
   def show; end
 
   def create

app/controllers/slack_uploads_controller.rb

@@ -17,12 +17,7 @@ class SlackUploadsController < ApplicationController
   end
 
   def blob_url
-    # Only generate representations for images
-    if @blob.content_type.start_with?('image/')
-      url_for(@blob.representation(resize_to_fill: [250, nil]))
-    else
-      url_for(@blob)
-    end
+    url_for(@blob.representation(resize_to_fill: [250, nil]))
   end
 
   def avatar_url

app/controllers/super_admin/app_configs_controller.rb

@@ -41,8 +41,7 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
       'slack' => %w[SLACK_CLIENT_ID SLACK_CLIENT_SECRET],
       'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT],
       'whatsapp_embedded' => %w[WHATSAPP_APP_ID WHATSAPP_APP_SECRET WHATSAPP_CONFIGURATION_ID WHATSAPP_API_VERSION],
-      'notion' => %w[NOTION_CLIENT_ID NOTION_CLIENT_SECRET],
-      'google' => %w[GOOGLE_OAUTH_CLIENT_ID GOOGLE_OAUTH_CLIENT_SECRET GOOGLE_OAUTH_REDIRECT_URI]
+      'notion' => %w[NOTION_CLIENT_ID NOTION_CLIENT_SECRET]
     }
 
     @allowed_configs = mapping.fetch(@config, %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS])

app/controllers/super_admin/application_controller.rb

@@ -7,9 +7,8 @@
 class SuperAdmin::ApplicationController < Administrate::ApplicationController
   include ActionView::Helpers::TagHelper
   include ActionView::Context
-  include SuperAdmin::NavigationHelper
 
-  helper_method :render_vue_component, :settings_open?, :settings_pages
+  helper_method :render_vue_component
   # authenticiation done via devise : SuperAdmin Model
   before_action :authenticate_super_admin!
 

app/controllers/twilio/callback_controller.rb

@@ -30,8 +30,7 @@ class Twilio::CallbackController < ApplicationController
       :NumMedia,
       :Latitude,
       :Longitude,
-      :MessageType,
-      :ProfileName
+      :MessageType
     )
   end
 end

app/controllers/webhooks/instagram_controller.rb

@@ -4,16 +4,7 @@ class Webhooks::InstagramController < ActionController::API
   def events
     Rails.logger.info('Instagram webhook received events')
     if params['object'].casecmp('instagram').zero?
-      entry_params = params.to_unsafe_hash[:entry]
-
-      if contains_echo_event?(entry_params)
-        # Add delay to prevent race condition where echo arrives before send message API completes
-        # This avoids duplicate messages when echo comes early during API processing
-        ::Webhooks::InstagramEventsJob.set(wait: 2.seconds).perform_later(entry_params)
-      else
-        ::Webhooks::InstagramEventsJob.perform_later(entry_params)
-      end
-
+      ::Webhooks::InstagramEventsJob.perform_later(params.to_unsafe_hash[:entry])
       render json: :ok
     else
       Rails.logger.warn("Message is not received from the instagram webhook event: #{params['object']}")
@@ -23,16 +14,6 @@ class Webhooks::InstagramController < ActionController::API
 
   private
 
-  def contains_echo_event?(entry_params)
-    return false unless entry_params.is_a?(Array)
-
-    entry_params.any? do |entry|
-      # Check messaging array for echo events
-      messaging_events = entry[:messaging] || []
-      messaging_events.any? { |messaging| messaging.dig(:message, :is_echo).present? }
-    end
-  end
-
   def valid_token?(token)
     # Validates against both IG_VERIFY_TOKEN (Instagram channel via Facebook page) and
     # INSTAGRAM_VERIFY_TOKEN (Instagram channel via direct Instagram login)

app/controllers/whatsapp/embedded_controller.rb

@@ -0,0 +1,125 @@
+class Whatsapp::EmbeddedController < ApplicationController
+  include EnsureCurrentAccountHelper
+
+  before_action :authenticate_user!
+  before_action :current_account
+  before_action :check_authorization
+
+  def new
+    # Configuration endpoint for embedded signup initialization
+    render json: {
+      status: 'ready',
+      app_id: GlobalConfigService.load('WHATSAPP_APP_ID', ''),
+      config_id: GlobalConfigService.load('WHATSAPP_CONFIGURATION_ID', ''),
+      app_secret: GlobalConfigService.load('WHATSAPP_APP_SECRET', '')
+    }
+  end
+
+  def embedded_signup
+    # Complete embedded signup using auth code + business info from frontend
+    validate_authorization_code!
+    return if performed?
+
+    validate_required_parameters!
+    return if performed?
+
+    channel = process_signup
+    @inbox = channel.inbox
+
+    # Return the inbox object using the standard jbuilder template
+    render 'embedded_signup', formats: [:json]
+  rescue StandardError => e
+    handle_signup_error(e)
+  end
+
+  def reauthorize
+    # Reauthorize existing WhatsApp inbox using embedded signup flow
+    validate_authorization_code!
+    return if performed?
+
+    validate_required_parameters!
+    return if performed?
+
+    validate_inbox_id!
+    return if performed?
+
+    channel = process_reauthorization
+    @inbox = channel.inbox
+
+    # Clear reauthorization required flag
+    channel.reauthorized!
+
+    render json: { message: 'WhatsApp channel reauthorized successfully' }, status: :ok
+  rescue StandardError => e
+    handle_signup_error(e)
+  end
+
+  private
+
+  def validate_authorization_code!
+    return if params[:code].present?
+
+    render json: {
+      error: 'Missing authorization code',
+      message: 'Authorization code is required for embedded signup'
+    }, status: :bad_request
+  end
+
+  def validate_required_parameters!
+    return if params[:business_id].present? && params[:waba_id].present?
+
+    render json: {
+      error: 'Missing required parameters: business_id and waba_id are required'
+    }, status: :bad_request
+  end
+
+  def validate_inbox_id!
+    return if params[:inbox_id].present?
+
+    render json: {
+      error: 'Missing inbox_id parameter'
+    }, status: :bad_request
+  end
+
+  def process_signup
+    service = Whatsapp::EmbeddedSignupService.new(
+      {
+        account: Current.account,
+        code: params[:code],
+        business_id: params[:business_id],
+        waba_id: params[:waba_id],
+        phone_number_id: params[:phone_number_id]
+      }
+    )
+
+    service.perform
+  end
+
+  def process_reauthorization
+    service = Whatsapp::EmbeddedSignupService.new(
+      {
+        account: Current.account,
+        code: params[:code],
+        business_id: params[:business_id],
+        waba_id: params[:waba_id],
+        phone_number_id: params[:phone_number_id],
+        inbox_id: params[:inbox_id]
+      }
+    )
+
+    service.perform_reauthorization
+  end
+
+  def handle_signup_error(error)
+    Rails.logger.error("WhatsApp embedded signup processing error: #{error.message}")
+    Rails.logger.error(error.backtrace.join("\n"))
+    render json: {
+      error: 'Internal server error',
+      message: error.message
+    }, status: :internal_server_error
+  end
+
+  def check_authorization
+    authorize(Current.account, :update?)
+  end
+end

app/finders/notification_finder.rb

@@ -15,13 +15,7 @@ class NotificationFinder
   end
 
   def unread_count
-    if type_included?('read')
-      # If we're including read notifications, filter to unread
-      @notifications.where(read_at: nil).count
-    else
-      # Already filtered to unread notifications, just count
-      @notifications.count
-    end
+    @notifications.where(read_at: nil).count
   end
 
   def count
@@ -33,7 +27,7 @@ class NotificationFinder
   def set_up
     find_all_notifications
     filter_snoozed_notifications
-    filter_read_notifications
+    fitler_read_notifications
   end
 
   def find_all_notifications
@@ -44,7 +38,7 @@ class NotificationFinder
     @notifications = @notifications.where(snoozed_until: nil) unless type_included?('snoozed')
   end
 
-  def filter_read_notifications
+  def fitler_read_notifications
     @notifications = @notifications.where(read_at: nil) unless type_included?('read')
   end
 

app/helpers/reporting_event_helper.rb

@@ -18,25 +18,12 @@ module ReportingEventHelper
   end
 
   def last_non_human_activity(conversation)
-    # Try to get either a handoff or reopened event first
-    # These will always take precedence over any other activity
-    # Also, any of these events can happen at any time in the course of a conversation lifecycle.
-    # So we pick the latest event
-    event = ReportingEvent.where(
-      conversation_id: conversation.id,
-      name: %w[conversation_bot_handoff conversation_opened]
-    ).order(event_end_time: :desc).first
+    # check if a handoff event already exists
+    handoff_event = ReportingEvent.where(conversation_id: conversation.id, name: 'conversation_bot_handoff').last
 
-    return event.event_end_time if event&.event_end_time
-
-    # Fallback to bot resolved event
-    # Because this will be closest to the most accurate activity instead of conversation.created_at
-    bot_event = ReportingEvent.where(conversation_id: conversation.id, name: 'conversation_bot_resolved').last
-
-    return bot_event.event_end_time if bot_event&.event_end_time
-
-    # If no events found, return conversation creation time
-    conversation.created_at
+    # if a handoff exists, last non human activity is when the handoff ended,
+    # otherwise it's when the conversation was created
+    handoff_event&.event_end_time || conversation.created_at
   end
 
   private

app/helpers/super_admin/navigation_helper.rb

@@ -1,16 +0,0 @@
-module SuperAdmin::NavigationHelper
-  def settings_open?
-    params[:controller].in? %w[super_admin/settings super_admin/app_configs]
-  end
-
-  def settings_pages
-    features = SuperAdmin::FeaturesHelper.available_features.select do |_feature, attrs|
-      attrs['config_key'].present? && attrs['enabled']
-    end
-
-    # Add general at the beginning
-    general_feature = [['general', { 'config_key' => 'general', 'name' => 'General' }]]
-
-    general_feature + features.to_a
-  end
-end

app/javascript/dashboard/App.vue

@@ -136,7 +136,8 @@ export default {
   <div
     v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
     id="app"
-    class="flex flex-col w-full h-screen min-h-0"
+    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
+    :class="{ 'app-rtl--wrapper': isRTL }"
     :dir="isRTL ? 'rtl' : 'ltr'"
   >
     <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />

app/javascript/dashboard/api/captain/scenarios.js

@@ -1,36 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class CaptainScenarios extends ApiClient {
-  constructor() {
-    super('captain/assistants', { accountScoped: true });
-  }
-
-  get({ assistantId, page = 1, searchKey } = {}) {
-    return axios.get(`${this.url}/${assistantId}/scenarios`, {
-      params: { page, searchKey },
-    });
-  }
-
-  show({ assistantId, id }) {
-    return axios.get(`${this.url}/${assistantId}/scenarios/${id}`);
-  }
-
-  create({ assistantId, ...data } = {}) {
-    return axios.post(`${this.url}/${assistantId}/scenarios`, {
-      scenario: data,
-    });
-  }
-
-  update({ assistantId, id }, data = {}) {
-    return axios.put(`${this.url}/${assistantId}/scenarios/${id}`, {
-      scenario: data,
-    });
-  }
-
-  delete({ assistantId, id }) {
-    return axios.delete(`${this.url}/${assistantId}/scenarios/${id}`);
-  }
-}
-
-export default new CaptainScenarios();

app/javascript/dashboard/api/captain/tools.js

@@ -1,16 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class CaptainTools extends ApiClient {
-  constructor() {
-    super('captain/assistants/tools', { accountScoped: true });
-  }
-
-  get(params = {}) {
-    return axios.get(this.url, {
-      params,
-    });
-  }
-}
-
-export default new CaptainTools();

app/javascript/dashboard/api/channel/whatsappChannel.js

@@ -1,21 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class WhatsappChannel extends ApiClient {
-  constructor() {
-    super('whatsapp', { accountScoped: true });
-  }
-
-  createEmbeddedSignup(params) {
-    return axios.post(`${this.baseUrl()}/whatsapp/authorization`, params);
-  }
-
-  reauthorizeWhatsApp({ inboxId, ...params }) {
-    return axios.post(`${this.baseUrl()}/whatsapp/authorization`, {
-      ...params,
-      inbox_id: inboxId,
-    });
-  }
-}
-
-export default new WhatsappChannel();

app/javascript/dashboard/api/helpCenter/portals.js

@@ -21,14 +21,6 @@ class PortalsAPI extends ApiClient {
   deleteLogo(portalSlug) {
     return axios.delete(`${this.url}/${portalSlug}/logo`);
   }
-
-  sendCnameInstructions(portalSlug, email) {
-    return axios.post(`${this.url}/${portalSlug}/send_instructions`, { email });
-  }
-
-  sslStatus(portalSlug) {
-    return axios.get(`${this.url}/${portalSlug}/ssl_status`);
-  }
 }
 
 export default PortalsAPI;

app/javascript/dashboard/api/inboxes.js

@@ -28,10 +28,6 @@ class Inboxes extends CacheEnabledApiClient {
       agent_bot: botId,
     });
   }
-
-  syncTemplates(inboxId) {
-    return axios.post(`${this.url}/${inboxId}/sync_templates`);
-  }
 }
 
 export default new Inboxes();

app/javascript/dashboard/api/specs/inboxes.spec.js

@@ -12,7 +12,6 @@ describe('#InboxesAPI', () => {
     expect(inboxesAPI).toHaveProperty('getCampaigns');
     expect(inboxesAPI).toHaveProperty('getAgentBot');
     expect(inboxesAPI).toHaveProperty('setAgentBot');
-    expect(inboxesAPI).toHaveProperty('syncTemplates');
   });
 
   describe('API calls', () => {
@@ -41,12 +40,5 @@ describe('#InboxesAPI', () => {
       inboxesAPI.deleteInboxAvatar(2);
       expect(axiosMock.delete).toHaveBeenCalledWith('/api/v1/inboxes/2/avatar');
     });
-
-    it('#syncTemplates', () => {
-      inboxesAPI.syncTemplates(2);
-      expect(axiosMock.post).toHaveBeenCalledWith(
-        '/api/v1/inboxes/2/sync_templates'
-      );
-    });
   });
 });

app/javascript/dashboard/assets/scss/_woot.scss

@@ -37,6 +37,30 @@ body {
   width: 100%;
 }
 
+.app-wrapper {
+  @apply h-screen flex-grow-0 min-h-0 w-full;
+
+  .button--fixed-top {
+    @apply fixed ltr:right-2 rtl:left-2 top-2 flex flex-row;
+  }
+}
+
+.banner + .app-wrapper {
+  // Reduce the height of the dashboard to make room for the banner.
+  // And causing the top right green-action button to be pushed down when scrolling.
+  @apply h-[calc(100%-48px)];
+
+  .button--fixed-top {
+    @apply top-14;
+  }
+
+  .off-canvas-content {
+    .button--fixed-top {
+      @apply top-2;
+    }
+  }
+}
+
 .tooltip {
   @apply bg-n-solid-2 text-n-slate-12 py-1 px-2 z-40 text-xs rounded-md max-w-96;
 }

app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue

@@ -76,8 +76,8 @@ const campaignStatus = computed(() => {
 const inboxName = computed(() => props.inbox?.name || '');
 
 const inboxIcon = computed(() => {
-  const { medium, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, medium);
+  const { phone_number: phoneNumber, channel_type: type } = props.inbox;
+  return getInboxIconByType(type, phoneNumber);
 });
 </script>
 

app/javascript/dashboard/components-next/Campaigns/EmptyState/WhatsAppCampaignEmptyState.vue

@@ -1,37 +0,0 @@
-<script setup>
-import { ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT } from './CampaignEmptyStateContent';
-
-import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
-import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
-
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  subtitle: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
-<template>
-  <EmptyStateLayout :title="title" :subtitle="subtitle">
-    <template #empty-state-item>
-      <div class="flex flex-col gap-4 p-px">
-        <CampaignCard
-          v-for="campaign in ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT"
-          :key="campaign.id"
-          :title="campaign.title"
-          :message="campaign.message"
-          :is-enabled="campaign.enabled"
-          :status="campaign.campaign_status"
-          :sender="campaign.sender"
-          :inbox="campaign.inbox"
-          :scheduled-at="campaign.scheduled_at"
-        />
-      </div>
-    </template>
-  </EmptyStateLayout>
-</template>

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignDialog.vue

@@ -1,50 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
-import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
-
-import WhatsAppCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue';
-
-const emit = defineEmits(['close']);
-
-const store = useStore();
-const { t } = useI18n();
-
-const addCampaign = async campaignDetails => {
-  try {
-    await store.dispatch('campaigns/create', campaignDetails);
-
-    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
-      type: CAMPAIGN_TYPES.ONE_OFF,
-    });
-
-    useAlert(t('CAMPAIGN.WHATSAPP.CREATE.FORM.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    const errorMessage =
-      error?.response?.message ||
-      t('CAMPAIGN.WHATSAPP.CREATE.FORM.API.ERROR_MESSAGE');
-    useAlert(errorMessage);
-  }
-};
-
-const handleSubmit = campaignDetails => {
-  addCampaign(campaignDetails);
-};
-
-const handleClose = () => emit('close');
-</script>
-
-<template>
-  <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] rounded-xl border border-n-weak shadow-md max-h-[80vh] overflow-y-auto"
-  >
-    <div class="p-6 flex flex-col gap-6">
-      <h3 class="text-base font-medium text-n-slate-12 flex-shrink-0">
-        {{ t(`CAMPAIGN.WHATSAPP.CREATE.TITLE`) }}
-      </h3>
-      <WhatsAppCampaignForm @submit="handleSubmit" @cancel="handleClose" />
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue

@@ -1,266 +0,0 @@
-<script setup>
-import { reactive, computed, watch, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-import { useMapGetter } from 'dashboard/composables/store';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import TagMultiSelectComboBox from 'dashboard/components-next/combobox/TagMultiSelectComboBox.vue';
-import WhatsAppTemplateParser from 'dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue';
-
-const emit = defineEmits(['submit', 'cancel']);
-
-const { t } = useI18n();
-
-const formState = {
-  uiFlags: useMapGetter('campaigns/getUIFlags'),
-  labels: useMapGetter('labels/getLabels'),
-  inboxes: useMapGetter('inboxes/getWhatsAppInboxes'),
-  getFilteredWhatsAppTemplates: useMapGetter(
-    'inboxes/getFilteredWhatsAppTemplates'
-  ),
-};
-
-const initialState = {
-  title: '',
-  inboxId: null,
-  templateId: null,
-  scheduledAt: null,
-  selectedAudience: [],
-};
-
-const state = reactive({ ...initialState });
-const templateParserRef = ref(null);
-
-const rules = {
-  title: { required, minLength: minLength(1) },
-  inboxId: { required },
-  templateId: { required },
-  scheduledAt: { required },
-  selectedAudience: { required },
-};
-
-const v$ = useVuelidate(rules, state);
-
-const isCreating = computed(() => formState.uiFlags.value.isCreating);
-
-const currentDateTime = computed(() => {
-  // Added to disable the scheduled at field from being set to the current time
-  const now = new Date();
-  const localTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
-  return localTime.toISOString().slice(0, 16);
-});
-
-const mapToOptions = (items, valueKey, labelKey) =>
-  items?.map(item => ({
-    value: item[valueKey],
-    label: item[labelKey],
-  })) ?? [];
-
-const audienceList = computed(() =>
-  mapToOptions(formState.labels.value, 'id', 'title')
-);
-
-const inboxOptions = computed(() =>
-  mapToOptions(formState.inboxes.value, 'id', 'name')
-);
-
-const templateOptions = computed(() => {
-  if (!state.inboxId) return [];
-  const templates = formState.getFilteredWhatsAppTemplates.value(state.inboxId);
-  return templates.map(template => {
-    // Create a more user-friendly label from template name
-    const friendlyName = template.name
-      .replace(/_/g, ' ')
-      .replace(/\b\w/g, l => l.toUpperCase());
-
-    return {
-      value: template.id,
-      label: `${friendlyName} (${template.language || 'en'})`,
-      template: template,
-    };
-  });
-});
-
-const selectedTemplate = computed(() => {
-  if (!state.templateId) return null;
-  return templateOptions.value.find(option => option.value === state.templateId)
-    ?.template;
-});
-
-const getErrorMessage = (field, errorKey) => {
-  const baseKey = 'CAMPAIGN.WHATSAPP.CREATE.FORM';
-  return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
-};
-
-const formErrors = computed(() => ({
-  title: getErrorMessage('title', 'TITLE'),
-  inbox: getErrorMessage('inboxId', 'INBOX'),
-  template: getErrorMessage('templateId', 'TEMPLATE'),
-  scheduledAt: getErrorMessage('scheduledAt', 'SCHEDULED_AT'),
-  audience: getErrorMessage('selectedAudience', 'AUDIENCE'),
-}));
-
-const hasRequiredTemplateParams = computed(() => {
-  return templateParserRef.value?.v$?.$invalid === false || true;
-});
-
-const isSubmitDisabled = computed(
-  () => v$.value.$invalid || !hasRequiredTemplateParams.value
-);
-
-const formatToUTCString = localDateTime =>
-  localDateTime ? new Date(localDateTime).toISOString() : null;
-
-const resetState = () => {
-  Object.assign(state, initialState);
-  v$.value.$reset();
-};
-
-const handleCancel = () => emit('cancel');
-
-const prepareCampaignDetails = () => {
-  // Find the selected template to get its content
-  const currentTemplate = selectedTemplate.value;
-  const parserData = templateParserRef.value;
-
-  // Extract template content - this should be the template message body
-  const templateContent = parserData?.renderedTemplate || '';
-
-  // Prepare template_params object with the same structure as used in contacts
-  const templateParams = {
-    name: currentTemplate?.name || '',
-    namespace: currentTemplate?.namespace || '',
-    category: currentTemplate?.category || 'UTILITY',
-    language: currentTemplate?.language || 'en_US',
-    processed_params: parserData?.processedParams || {},
-  };
-
-  return {
-    title: state.title,
-    message: templateContent,
-    template_params: templateParams,
-    inbox_id: state.inboxId,
-    scheduled_at: formatToUTCString(state.scheduledAt),
-    audience: state.selectedAudience?.map(id => ({
-      id,
-      type: 'Label',
-    })),
-  };
-};
-
-const handleSubmit = async () => {
-  const isFormValid = await v$.value.$validate();
-  if (!isFormValid) return;
-
-  emit('submit', prepareCampaignDetails());
-  resetState();
-  handleCancel();
-};
-
-// Reset template selection when inbox changes
-watch(
-  () => state.inboxId,
-  () => {
-    state.templateId = null;
-  }
-);
-</script>
-
-<template>
-  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <Input
-      v-model="state.title"
-      :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.TITLE.LABEL')"
-      :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.TITLE.PLACEHOLDER')"
-      :message="formErrors.title"
-      :message-type="formErrors.title ? 'error' : 'info'"
-    />
-
-    <div class="flex flex-col gap-1">
-      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.INBOX.LABEL') }}
-      </label>
-      <ComboBox
-        id="inbox"
-        v-model="state.inboxId"
-        :options="inboxOptions"
-        :has-error="!!formErrors.inbox"
-        :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.INBOX.PLACEHOLDER')"
-        :message="formErrors.inbox"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
-      />
-    </div>
-
-    <div class="flex flex-col gap-1">
-      <label for="template" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.LABEL') }}
-      </label>
-      <ComboBox
-        id="template"
-        v-model="state.templateId"
-        :options="templateOptions"
-        :has-error="!!formErrors.template"
-        :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.PLACEHOLDER')"
-        :message="formErrors.template"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
-      />
-      <p class="mt-1 text-xs text-n-slate-11">
-        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.INFO') }}
-      </p>
-    </div>
-
-    <!-- Template Parser -->
-    <WhatsAppTemplateParser
-      v-if="selectedTemplate"
-      ref="templateParserRef"
-      :template="selectedTemplate"
-    />
-
-    <div class="flex flex-col gap-1">
-      <label for="audience" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.AUDIENCE.LABEL') }}
-      </label>
-      <TagMultiSelectComboBox
-        v-model="state.selectedAudience"
-        :options="audienceList"
-        :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.AUDIENCE.LABEL')"
-        :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.AUDIENCE.PLACEHOLDER')"
-        :has-error="!!formErrors.audience"
-        :message="formErrors.audience"
-        class="[&>div>button]:bg-n-alpha-black2"
-      />
-    </div>
-
-    <Input
-      v-model="state.scheduledAt"
-      :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.SCHEDULED_AT.LABEL')"
-      type="datetime-local"
-      :min="currentDateTime"
-      :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.SCHEDULED_AT.PLACEHOLDER')"
-      :message="formErrors.scheduledAt"
-      :message-type="formErrors.scheduledAt ? 'error' : 'info'"
-    />
-
-    <div class="flex gap-3 justify-between items-center w-full">
-      <Button
-        variant="faded"
-        color="slate"
-        type="button"
-        :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
-        @click="handleCancel"
-      />
-      <Button
-        :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.BUTTONS.CREATE')"
-        class="w-full"
-        type="submit"
-        :is-loading="isCreating"
-        :disabled="isCreating || isSubmitDisabled"
-      />
-    </div>
-  </form>
-</template>

app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue

@@ -98,7 +98,6 @@ const onClickViewDetails = () => emit('showContact', props.id);
         :src="thumbnail"
         :size="48"
         :status="availabilityStatus"
-        hide-offline-status
         rounded-full
       />
       <div class="flex flex-col gap-0.5 flex-1">

app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue

@@ -1,13 +1,11 @@
 <script setup>
-import { computed, useSlots, ref } from 'vue';
+import { computed, useSlots } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { vOnClickOutside } from '@vueuse/components';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
-import VoiceCallButton from 'dashboard/components-next/Contacts/VoiceCallButton.vue';
 
 const props = defineProps({
   selectedContact: {
@@ -26,8 +24,6 @@ const { t } = useI18n();
 const slots = useSlots();
 const route = useRoute();
 
-const isContactSidebarOpen = ref(false);
-
 const contactId = computed(() => route.params.contactId);
 
 const selectedContactName = computed(() => {
@@ -60,15 +56,6 @@ const handleBreadcrumbClick = () => {
 const toggleBlock = () => {
   emit('toggleBlock', isContactBlocked.value);
 };
-
-const handleConversationSidebarToggle = () => {
-  isContactSidebarOpen.value = !isContactSidebarOpen.value;
-};
-
-const closeMobileSidebar = () => {
-  if (!isContactSidebarOpen.value) return;
-  isContactSidebarOpen.value = false;
-};
 </script>
 
 <template>
@@ -80,9 +67,7 @@ const closeMobileSidebar = () => {
     >
       <header class="sticky top-0 z-10 px-6 3xl:px-0">
         <div class="w-full mx-auto max-w-[40.625rem]">
-          <div
-            class="flex flex-col xs:flex-row items-start xs:items-center justify-between w-full py-7 gap-2"
-          >
+          <div class="flex items-center justify-between w-full h-20 gap-2">
             <Breadcrumb
               :items="breadcrumbItems"
               @click="handleBreadcrumbClick"
@@ -100,11 +85,6 @@ const closeMobileSidebar = () => {
                 :disabled="isUpdating"
                 @click="toggleBlock"
               />
-              <VoiceCallButton
-                :phone="selectedContact?.phoneNumber"
-                :label="$t('CONTACT_PANEL.CALL')"
-                size="sm"
-              />
               <ComposeConversation :contact-id="contactId">
                 <template #trigger="{ toggle }">
                   <Button
@@ -125,65 +105,11 @@ const closeMobileSidebar = () => {
       </main>
     </div>
 
-    <!-- Desktop sidebar -->
     <div
       v-if="slots.sidebar"
-      class="hidden lg:block overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
+      class="overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
     >
       <slot name="sidebar" />
     </div>
-
-    <!-- Mobile sidebar container -->
-    <div
-      v-if="slots.sidebar"
-      class="lg:hidden fixed top-0 ltr:right-0 rtl:left-0 h-full z-50 flex justify-end transition-all duration-200 ease-in-out"
-      :class="isContactSidebarOpen ? 'w-full' : 'w-16'"
-    >
-      <!-- Toggle button -->
-      <div
-        v-on-click-outside="[
-          closeMobileSidebar,
-          { ignore: ['#contact-sidebar-content'] },
-        ]"
-        class="flex items-start p-1 w-fit h-fit relative order-1 xs:top-24 top-28 transition-all bg-n-solid-2 border border-n-weak duration-500 ease-in-out"
-        :class="[
-          isContactSidebarOpen
-            ? 'justify-end ltr:rounded-l-full rtl:rounded-r-full ltr:rounded-r-none rtl:rounded-l-none'
-            : 'justify-center rounded-full ltr:mr-6 rtl:ml-6',
-        ]"
-      >
-        <Button
-          ghost
-          slate
-          sm
-          class="!rounded-full rtl:rotate-180"
-          :class="{ 'bg-n-alpha-2': isContactSidebarOpen }"
-          :icon="
-            isContactSidebarOpen
-              ? 'i-lucide-panel-right-close'
-              : 'i-lucide-panel-right-open'
-          "
-          data-contact-sidebar-toggle
-          @click="handleConversationSidebarToggle"
-        />
-      </div>
-
-      <Transition
-        enter-active-class="transition-transform duration-200 ease-in-out"
-        leave-active-class="transition-transform duration-200 ease-in-out"
-        enter-from-class="ltr:translate-x-full rtl:-translate-x-full"
-        enter-to-class="ltr:translate-x-0 rtl:-translate-x-0"
-        leave-from-class="ltr:translate-x-0 rtl:-translate-x-0"
-        leave-to-class="ltr:translate-x-full rtl:-translate-x-full"
-      >
-        <div
-          v-if="isContactSidebarOpen"
-          id="contact-sidebar-content"
-          class="order-2 w-[85%] sm:w-[50%] bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak overflow-y-auto py-6 shadow-lg"
-        >
-          <slot name="sidebar" />
-        </div>
-      </Transition>
-    </div>
   </section>
 </template>

app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue

@@ -218,13 +218,10 @@ const resetForm = () => {
   Object.assign(state, defaultState);
 };
 
-watch(
-  () => props.contactData?.id,
-  id => {
-    if (id) prepareStateBasedOnProps();
-  },
-  { immediate: true }
-);
+watch(() => props.contactData, prepareStateBasedOnProps, {
+  immediate: true,
+  deep: true,
+});
 
 // Expose state to parent component for avatar upload
 defineExpose({

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue

@@ -34,13 +34,13 @@ const emit = defineEmits([
 <template>
   <header class="sticky top-0 z-10">
     <div
-      class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[60rem]"
+      class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[60rem]"
     >
       <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}
       </span>
-      <div class="flex items-center flex-col sm:flex-row flex-shrink-0 gap-4">
-        <div v-if="showSearch" class="flex items-center gap-2 w-full">
+      <div class="flex items-center flex-shrink-0 gap-4">
+        <div v-if="showSearch" class="flex items-center gap-2">
           <Input
             :model-value="searchValue"
             type="search"
@@ -48,7 +48,6 @@ const emit = defineEmits([
             :custom-input-class="[
               'h-8 [&:not(.focus)]:!border-transparent bg-n-alpha-2 dark:bg-n-solid-1 ltr:!pl-8 !py-1 rtl:!pr-8',
             ]"
-            class="w-full"
             @input="emit('search', $event.target.value)"
           >
             <template #prefix>
@@ -59,66 +58,64 @@ const emit = defineEmits([
             </template>
           </Input>
         </div>
-        <div class="flex items-center flex-shrink-0 gap-4">
-          <div class="flex items-center gap-2">
-            <div v-if="!isLabelView && !isActiveView" class="relative">
-              <Button
-                id="toggleContactsFilterButton"
-                :icon="
-                  isSegmentsView ? 'i-lucide-pen-line' : 'i-lucide-list-filter'
-                "
-                color="slate"
-                size="sm"
-                class="relative w-8"
-                variant="ghost"
-                @click="emit('filter')"
-              >
-                <div
-                  v-if="hasActiveFilters && !isSegmentsView"
-                  class="absolute top-0 right-0 w-2 h-2 rounded-full bg-n-brand"
-                />
-              </Button>
-              <slot name="filter" />
-            </div>
+        <div class="flex items-center gap-2">
+          <div v-if="!isLabelView && !isActiveView" class="relative">
             <Button
-              v-if="
-                hasActiveFilters &&
-                !isSegmentsView &&
-                !isLabelView &&
-                !isActiveView
+              id="toggleContactsFilterButton"
+              :icon="
+                isSegmentsView ? 'i-lucide-pen-line' : 'i-lucide-list-filter'
               "
-              icon="i-lucide-save"
               color="slate"
               size="sm"
+              class="relative w-8"
               variant="ghost"
-              @click="emit('createSegment')"
-            />
-            <Button
-              v-if="isSegmentsView && !isLabelView && !isActiveView"
-              icon="i-lucide-trash"
-              color="slate"
-              size="sm"
-              variant="ghost"
-              @click="emit('deleteSegment')"
-            />
-            <ContactSortMenu
-              :active-sort="activeSort"
-              :active-ordering="activeOrdering"
-              @update:sort="emit('update:sort', $event)"
-            />
-            <ContactMoreActions
-              @add="emit('add')"
-              @import="emit('import')"
-              @export="emit('export')"
-            />
+              @click="emit('filter')"
+            >
+              <div
+                v-if="hasActiveFilters && !isSegmentsView"
+                class="absolute top-0 right-0 w-2 h-2 rounded-full bg-n-brand"
+              />
+            </Button>
+            <slot name="filter" />
           </div>
-          <div class="w-px h-4 bg-n-strong" />
-          <ComposeConversation>
-            <template #trigger="{ toggle }">
-              <Button :label="buttonLabel" size="sm" @click="toggle" />
-            </template>
-          </ComposeConversation>
+          <Button
+            v-if="
+              hasActiveFilters &&
+              !isSegmentsView &&
+              !isLabelView &&
+              !isActiveView
+            "
+            icon="i-lucide-save"
+            color="slate"
+            size="sm"
+            variant="ghost"
+            @click="emit('createSegment')"
+          />
+          <Button
+            v-if="isSegmentsView && !isLabelView && !isActiveView"
+            icon="i-lucide-trash"
+            color="slate"
+            size="sm"
+            variant="ghost"
+            @click="emit('deleteSegment')"
+          />
+          <ContactSortMenu
+            :active-sort="activeSort"
+            :active-ordering="activeOrdering"
+            @update:sort="emit('update:sort', $event)"
+          />
+          <ContactMoreActions
+            @add="emit('add')"
+            @import="emit('import')"
+            @export="emit('export')"
+          />
         </div>
+        <div class="w-px h-4 bg-n-strong" />
+        <ComposeConversation>
+          <template #trigger="{ toggle }">
+            <Button :label="buttonLabel" size="sm" @click="toggle" />
+          </template>
+        </ComposeConversation>
       </div>
     </div>
   </header>

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue

@@ -291,20 +291,17 @@ defineExpose({
     @delete-segment="openDeleteSegmentDialog"
   >
     <template #filter>
-      <div
-        class="absolute mt-1 ltr:-right-52 rtl:-left-52 sm:ltr:right-0 sm:rtl:left-0 top-full"
-      >
-        <ContactsFilter
-          v-if="showFiltersModal"
-          v-model="appliedFilter"
-          :segment-name="activeSegmentName"
-          :is-segment-view="hasActiveSegments"
-          @apply-filter="onApplyFilter"
-          @update-segment="onUpdateSegment"
-          @close="closeAdvanceFiltersModal"
-          @clear-filters="clearFilters"
-        />
-      </div>
+      <ContactsFilter
+        v-if="showFiltersModal"
+        v-model="appliedFilter"
+        :segment-name="activeSegmentName"
+        :is-segment-view="hasActiveSegments"
+        class="absolute mt-1 ltr:right-0 rtl:left-0 top-full"
+        @apply-filter="onApplyFilter"
+        @update-segment="onUpdateSegment"
+        @close="closeAdvanceFiltersModal"
+        @clear-filters="clearFilters"
+      />
     </template>
   </ContactsHeader>
 

app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue

@@ -105,7 +105,7 @@ const handleOrderChange = value => {
     <div
       v-if="isMenuOpen"
       v-on-clickaway="() => (isMenuOpen = false)"
-      class="absolute top-full mt-1 ltr:-right-32 rtl:-left-32 sm:ltr:right-0 sm:rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
+      class="absolute top-full mt-1 ltr:right-0 rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
     >
       <div class="flex items-center justify-between gap-2">
         <span class="text-sm text-n-slate-12">

app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue

@@ -96,7 +96,10 @@ const openFilter = () => {
           <slot name="default" />
         </div>
       </main>
-      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0 px-4 pb-4">
+      <footer
+        v-if="showPaginationFooter"
+        class="sticky bottom-0 z-10 px-4 pb-4"
+      >
         <PaginationFooter
           current-page-info="CONTACTS_LAYOUT.PAGINATION_FOOTER.SHOWING"
           :current-page="currentPage"

app/javascript/dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent.js

@@ -4,8 +4,8 @@ export default [
       city: 'Los Angeles',
       country: 'United States',
       description:
-        "I'm Candice, a developer focusing on building web solutions. Currently, I’m working as a Product Developer at Lumora.",
-      companyName: 'Lumora',
+        "I'm Candice, a developer focusing on building web solutions. Currently, I’m working as a Product Developer at Chatwoot.",
+      companyName: 'Chatwoot',
       countryCode: 'US',
       socialProfiles: {
         github: 'candice-dev',
@@ -16,7 +16,7 @@ export default [
       },
     },
     availabilityStatus: 'offline',
-    email: 'candice.matherson@lumora.com',
+    email: 'candice.matherson@chatwoot.com',
     id: 22,
     name: 'Candice Matherson',
     phoneNumber: '+14155552671',

app/javascript/dashboard/components-next/Contacts/VoiceCallButton.vue

@@ -1,91 +0,0 @@
-<script setup>
-import { computed, ref, useAttrs } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
-import { useAlert } from 'dashboard/composables';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-
-const props = defineProps({
-  phone: { type: String, default: '' },
-  label: { type: String, default: '' },
-  icon: { type: [String, Object, Function], default: '' },
-  size: { type: String, default: 'sm' },
-  tooltipLabel: { type: String, default: '' },
-});
-
-defineOptions({ inheritAttrs: false });
-const attrs = useAttrs();
-
-const { t } = useI18n();
-
-const inboxesList = useMapGetter('inboxes/getInboxes');
-const voiceInboxes = computed(() =>
-  (inboxesList.value || []).filter(
-    inbox => inbox.channel_type === INBOX_TYPES.VOICE
-  )
-);
-const hasVoiceInboxes = computed(() => voiceInboxes.value.length > 0);
-
-// Unified behavior: hide when no phone
-const shouldRender = computed(() => hasVoiceInboxes.value && !!props.phone);
-
-const dialogRef = ref(null);
-
-const onClick = () => {
-  if (voiceInboxes.value.length > 1) {
-    dialogRef.value?.open();
-    return;
-  }
-  useAlert(t('CONTACT_PANEL.CALL_UNDER_DEVELOPMENT'));
-};
-
-const onPickInbox = () => {
-  // Placeholder until actual call wiring happens
-  useAlert(t('CONTACT_PANEL.CALL_UNDER_DEVELOPMENT'));
-  dialogRef.value?.close();
-};
-</script>
-
-<template>
-  <span class="contents">
-    <Button
-      v-if="shouldRender"
-      v-tooltip.top-end="tooltipLabel || null"
-      v-bind="attrs"
-      :label="label"
-      :icon="icon"
-      :size="size"
-      @click="onClick"
-    />
-
-    <Dialog
-      v-if="shouldRender && voiceInboxes.length > 1"
-      ref="dialogRef"
-      :title="$t('CONTACT_PANEL.VOICE_INBOX_PICKER.TITLE')"
-      show-cancel-button
-      :show-confirm-button="false"
-      width="md"
-    >
-      <div class="flex flex-col gap-2">
-        <button
-          v-for="inbox in voiceInboxes"
-          :key="inbox.id"
-          type="button"
-          class="flex items-center justify-between w-full px-4 py-2 text-left rounded-lg hover:bg-n-alpha-2"
-          @click="onPickInbox(inbox)"
-        >
-          <div class="flex items-center gap-2">
-            <span class="i-ri-phone-fill text-n-slate-10" />
-            <span class="text-sm text-n-slate-12">{{ inbox.name }}</span>
-          </div>
-          <span v-if="inbox.phone_number" class="text-xs text-n-slate-10">
-            {{ inbox.phone_number }}
-          </span>
-        </button>
-      </div>
-    </Dialog>
-  </span>
-</template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue

@@ -47,7 +47,6 @@ const unreadMessagesCount = computed(() => {
     </p>
     <div class="flex items-center flex-shrink-0 gap-2 pb-2">
       <Avatar
-        v-if="assignee.name"
         :name="assignee.name"
         :src="assignee.thumbnail"
         :size="20"

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue

@@ -96,7 +96,6 @@ defineExpose({
         />
       </div>
       <Avatar
-        v-if="assignee.name"
         :name="assignee.name"
         :src="assignee.thumbnail"
         :size="20"

app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue

@@ -48,8 +48,8 @@ const inbox = computed(() => props.stateInbox);
 const inboxName = computed(() => inbox.value?.name);
 
 const inboxIcon = computed(() => {
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+  const { phoneNumber, channelType } = inbox.value;
+  return getInboxIconByType(channelType, phoneNumber);
 });
 
 const lastActivityAt = computed(() => {

app/javascript/dashboard/components-next/Editor/Editor.vue

@@ -20,7 +20,6 @@ const props = defineProps({
   enableVariables: { type: Boolean, default: false },
   enableCannedResponses: { type: Boolean, default: true },
   enabledMenuOptions: { type: Array, default: () => [] },
-  enableCaptainTools: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -99,7 +98,6 @@ watch(
         :enable-variables="enableVariables"
         :enable-canned-responses="enableCannedResponses"
         :enabled-menu-options="enabledMenuOptions"
-        :enable-captain-tools="enableCaptainTools"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue

@@ -1,9 +1,6 @@
 <script setup>
 import { ref, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useVuelidate } from '@vuelidate/core';
-import { helpers } from '@vuelidate/validators';
-import { isValidDomain } from '@chatwoot/utils';
 
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
@@ -29,20 +26,6 @@ const formState = reactive({
   customDomain: props.customDomain,
 });
 
-const rules = {
-  customDomain: {
-    isValidDomain: helpers.withMessage(
-      () =>
-        t(
-          'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.FORMAT_ERROR'
-        ),
-      isValidDomain
-    ),
-  },
-};
-
-const v$ = useVuelidate(rules, formState);
-
 watch(
   () => props.customDomain,
   newVal => {
@@ -50,10 +33,7 @@ watch(
   }
 );
 
-const handleDialogConfirm = async () => {
-  const isFormCorrect = await v$.value.$validate();
-  if (!isFormCorrect) return;
-
+const handleDialogConfirm = () => {
   emit('addCustomDomain', formState.customDomain);
 };
 
@@ -87,11 +67,6 @@ defineExpose({ dialogRef });
           'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.PLACEHOLDER'
         )
       "
-      :message="
-        v$.customDomain.$error ? v$.customDomain.$errors[0].$message : ''
-      "
-      :message-type="v$.customDomain.$error ? 'error' : 'info'"
-      @blur="v$.customDomain.$touch()"
     />
   </Dialog>
 </template>

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue

@@ -1,15 +1,9 @@
 <script setup>
-import { reactive, computed, ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useAlert } from 'dashboard/composables';
-import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { getHostNameFromURL } from 'dashboard/helper/URLHelper';
-import { email, required } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
 
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   customDomain: {
@@ -18,20 +12,10 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['send', 'close']);
+const emit = defineEmits(['confirm']);
 
 const { t } = useI18n();
 
-const state = reactive({
-  email: '',
-});
-
-const validationRules = {
-  email: { email, required },
-};
-
-const v$ = useVuelidate(validationRules, state);
-
 const domain = computed(() => {
   const { hostURL, helpCenterURL } = window?.chatwootConfig || {};
   return getHostNameFromURL(helpCenterURL) || getHostNameFromURL(hostURL) || '';
@@ -41,34 +25,10 @@ const subdomainCNAME = computed(
   () => `${props.customDomain} CNAME ${domain.value}`
 );
 
-const handleCopy = async e => {
-  e.stopPropagation();
-  await copyTextToClipboard(subdomainCNAME.value);
-  useAlert(
-    t(
-      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.COPY'
-    )
-  );
-};
-
 const dialogRef = ref(null);
 
-const resetForm = () => {
-  v$.value.$reset();
-  state.email = '';
-};
-
-const onClose = () => {
-  resetForm();
-  emit('close');
-};
-
-const handleSend = async () => {
-  const isFormCorrect = await v$.value.$validate();
-  if (!isFormCorrect) return;
-
-  emit('send', state.email);
-  onClose();
+const handleDialogConfirm = () => {
+  emit('confirm');
 };
 
 defineExpose({ dialogRef });
@@ -77,103 +37,42 @@ defineExpose({ dialogRef });
 <template>
   <Dialog
     ref="dialogRef"
+    :title="
+      t(
+        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HEADER'
+      )
+    "
+    :confirm-button-label="
+      t(
+        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.CONFIRM_BUTTON_LABEL'
+      )
+    "
     :show-cancel-button="false"
-    :show-confirm-button="false"
-    @close="resetForm"
+    @confirm="handleDialogConfirm"
   >
-    <NextButton
-      icon="i-lucide-x"
-      sm
-      ghost
-      slate
-      class="flex-shrink-0 absolute top-2 ltr:right-2 rtl:left-2"
-      @click="onClose"
-    />
-    <div class="flex flex-col gap-6 divide-y divide-n-strong">
-      <div class="flex flex-col gap-6">
-        <div class="flex flex-col gap-2 ltr:pr-10 rtl:pl-10">
-          <h3 class="text-base font-medium leading-6 text-n-slate-12">
-            {{
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HEADER'
-              )
-            }}
-          </h3>
-          <p class="mb-0 text-sm text-n-slate-12">
-            {{
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.DESCRIPTION'
-              )
-            }}
-          </p>
-        </div>
-        <div class="flex items-center gap-3 w-full">
-          <span
-            class="min-h-10 px-3 py-2.5 inline-flex items-center w-full text-sm bg-transparent border rounded-lg text-n-slate-11 border-n-strong"
-          >
-            {{ subdomainCNAME }}
-          </span>
-          <NextButton
-            faded
-            slate
-            type="button"
-            icon="i-lucide-copy"
-            class="flex-shrink-0"
-            @click="handleCopy"
-          />
-        </div>
-      </div>
+    <template #description>
+      <p class="mb-0 text-sm text-n-slate-12">
+        {{
+          t(
+            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.DESCRIPTION'
+          )
+        }}
+      </p>
+    </template>
 
-      <div class="flex flex-col gap-6 pt-6">
-        <div class="flex flex-col gap-2 ltr:pr-10 rtl:pl-10">
-          <h3 class="text-base font-medium leading-6 text-n-slate-12">
-            {{
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.HEADER'
-              )
-            }}
-          </h3>
-          <p class="mb-0 text-sm text-n-slate-12">
-            {{
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.DESCRIPTION'
-              )
-            }}
-          </p>
-        </div>
-        <form
-          class="flex items-start gap-3 w-full"
-          @submit.prevent="handleSend"
-        >
-          <Input
-            v-model="state.email"
-            :placeholder="
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.PLACEHOLDER'
-              )
-            "
-            :message="
-              v$.email.$error
-                ? t(
-                    'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.ERROR'
-                  )
-                : ''
-            "
-            :message-type="v$.email.$error ? 'error' : 'info'"
-            class="w-full"
-            @blur="v$.email.$touch()"
-          />
-          <NextButton
-            :label="
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.SEND_BUTTON'
-              )
-            "
-            type="submit"
-            class="flex-shrink-0"
-          />
-        </form>
-      </div>
+    <div class="flex flex-col gap-6">
+      <span
+        class="h-10 px-3 py-2.5 text-sm select-none bg-transparent border rounded-lg text-n-slate-11 border-n-strong"
+      >
+        {{ subdomainCNAME }}
+      </span>
+      <p class="text-sm text-n-slate-12">
+        {{
+          t(
+            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HELP_TEXT'
+          )
+        }}
+      </p>
     </div>
   </Dialog>
 </template>

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue

@@ -7,8 +7,8 @@ import { useStore, useStoreGetters } from 'dashboard/composables/store';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { useVuelidate } from '@vuelidate/core';
-import { required, minLength, helpers, url } from '@vuelidate/validators';
-import { isValidSlug } from 'shared/helpers/Validators';
+import { required, minLength, helpers } from '@vuelidate/validators';
+import { shouldBeUrl, isValidSlug } from 'shared/helpers/Validators';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
@@ -71,7 +71,7 @@ const rules = {
       isValidSlug
     ),
   },
-  homePageLink: { url },
+  homePageLink: { shouldBeUrl },
 };
 
 const v$ = useVuelidate(rules, state);
@@ -315,9 +315,7 @@ const handleAvatarDelete = () => {
           class="[&>div>button:not(.focused)]:!outline-n-weak"
         />
       </div>
-      <div
-        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
-      >
+      <div class="flex items-start justify-between w-full gap-2">
         <label
           class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
         >

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useAccount } from 'dashboard/composables/useAccount';
 
 import AddCustomDomainDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue';
 import DNSConfigurationDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue';
@@ -12,52 +11,11 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-  isFetchingStatus: {
-    type: Boolean,
-    required: true,
-  },
 });
 
-const emit = defineEmits([
-  'updatePortalConfiguration',
-  'refreshStatus',
-  'sendCnameInstructions',
-]);
-
-const SSL_STATUS = {
-  LIVE: ['active', 'staging_active'],
-  PENDING: [
-    'provisioned',
-    'pending',
-    'initializing',
-    'pending_validation',
-    'pending_deployment',
-    'pending_issuance',
-    'holding_deployment',
-    'holding_validation',
-    'pending_expiration',
-    'pending_cleanup',
-    'pending_deletion',
-    'staging_deployment',
-    'backup_issued',
-  ],
-  ERROR: [
-    'blocked',
-    'inactive',
-    'moved',
-    'expired',
-    'deleted',
-    'timed_out_initializing',
-    'timed_out_validation',
-    'timed_out_issuance',
-    'timed_out_deployment',
-    'timed_out_deletion',
-    'deactivating',
-  ],
-};
+const emit = defineEmits(['updatePortalConfiguration']);
 
 const { t } = useI18n();
-const { isOnChatwootCloud } = useAccount();
 
 const addCustomDomainDialogRef = ref(null);
 const dnsConfigurationDialogRef = ref(null);
@@ -67,45 +25,6 @@ const customDomainAddress = computed(
   () => props.activePortal?.custom_domain || ''
 );
 
-const sslSettings = computed(() => props.activePortal?.ssl_settings || {});
-const verificationErrors = computed(
-  () => sslSettings.value.verification_errors || ''
-);
-
-const isLive = computed(() =>
-  SSL_STATUS.LIVE.includes(sslSettings.value.status)
-);
-const isPending = computed(() =>
-  SSL_STATUS.PENDING.includes(sslSettings.value.status)
-);
-const isError = computed(() =>
-  SSL_STATUS.ERROR.includes(sslSettings.value.status)
-);
-
-const statusText = computed(() => {
-  if (isLive.value)
-    return t(
-      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.LIVE'
-    );
-  if (isPending.value)
-    return t(
-      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.PENDING'
-    );
-  if (isError.value)
-    return t(
-      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.ERROR'
-    );
-  return '';
-});
-
-const statusColors = computed(() => {
-  if (isLive.value)
-    return { text: 'text-n-teal-11', bubble: 'outline-n-teal-6 bg-n-teal-9' };
-  if (isError.value)
-    return { text: 'text-n-ruby-11', bubble: 'outline-n-ruby-6 bg-n-ruby-9' };
-  return { text: 'text-n-amber-11', bubble: 'outline-n-amber-6 bg-n-amber-9' };
-});
-
 const updatePortalConfiguration = customDomain => {
   const portal = {
     id: props.activePortal?.id,
@@ -123,17 +42,6 @@ const closeDNSConfigurationDialog = () => {
   updatedDomainAddress.value = '';
   dnsConfigurationDialogRef.value.dialogRef.close();
 };
-
-const onClickRefreshSSLStatus = () => {
-  emit('refreshStatus');
-};
-
-const onClickSend = email => {
-  emit('sendCnameInstructions', {
-    portalSlug: props.activePortal?.slug,
-    email,
-  });
-};
 </script>
 
 <template>
@@ -155,76 +63,33 @@ const onClickSend = email => {
       </span>
     </div>
     <div class="flex flex-col w-full gap-4">
-      <div class="flex items-center justify-between w-full gap-2">
-        <div v-if="customDomainAddress" class="flex flex-col gap-1">
-          <div class="flex items-center w-full h-8 gap-4">
-            <label class="text-sm font-medium text-n-slate-12">
-              {{
-                t(
-                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.LABEL'
-                )
-              }}
-            </label>
-            <span class="text-sm text-n-slate-12">
-              {{ customDomainAddress }}
-            </span>
-          </div>
-          <span
-            v-if="!isLive && isOnChatwootCloud"
-            class="text-sm text-n-slate-11"
-          >
+      <div class="flex justify-between w-full gap-2">
+        <div
+          v-if="customDomainAddress"
+          class="flex items-center w-full h-8 gap-4"
+        >
+          <label class="text-sm font-medium text-n-slate-12">
             {{
               t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS_DESCRIPTION'
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.LABEL'
               )
             }}
+          </label>
+          <span class="text-sm text-n-slate-12">
+            {{ customDomainAddress }}
           </span>
         </div>
-        <div class="flex items-center">
-          <div v-if="customDomainAddress" class="flex items-center gap-3">
-            <div
-              v-if="statusText && isOnChatwootCloud"
-              v-tooltip="verificationErrors"
-              class="flex items-center gap-3 flex-shrink-0"
-            >
-              <span
-                class="size-1.5 rounded-full outline outline-2 block flex-shrink-0"
-                :class="statusColors.bubble"
-              />
-              <span
-                :class="statusColors.text"
-                class="text-sm leading-[16px] font-medium"
-              >
-                {{ statusText }}
-              </span>
-            </div>
-            <div
-              v-if="statusText && isOnChatwootCloud"
-              class="w-px h-3 bg-n-weak"
-            />
-            <Button
-              slate
-              sm
-              link
-              :label="
-                t(
-                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.EDIT_BUTTON'
-                )
-              "
-              class="hover:!no-underline flex-shrink-0"
-              @click="addCustomDomainDialogRef.dialogRef.open()"
-            />
-            <div v-if="isOnChatwootCloud" class="w-px h-3 bg-n-weak" />
-            <Button
-              v-if="isOnChatwootCloud"
-              slate
-              sm
-              link
-              icon="i-lucide-refresh-ccw"
-              :class="isFetchingStatus && 'animate-spin'"
-              @click="onClickRefreshSSLStatus"
-            />
-          </div>
+        <div class="flex items-center justify-end w-full">
+          <Button
+            v-if="customDomainAddress"
+            color="slate"
+            :label="
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.EDIT_BUTTON'
+              )
+            "
+            @click="addCustomDomainDialogRef.dialogRef.open()"
+          />
           <Button
             v-else
             :label="
@@ -247,8 +112,7 @@ const onClickSend = email => {
     <DNSConfigurationDialog
       ref="dnsConfigurationDialogRef"
       :custom-domain="updatedDomainAddress || customDomainAddress"
-      @close="closeDNSConfigurationDialog"
-      @send="onClickSend"
+      @confirm="closeDNSConfigurationDialog"
     />
   </div>
 </template>

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue

@@ -26,8 +26,6 @@ const emit = defineEmits([
   'updatePortal',
   'updatePortalConfiguration',
   'deletePortal',
-  'refreshStatus',
-  'sendCnameInstructions',
 ]);
 
 const { t } = useI18n();
@@ -38,7 +36,6 @@ const confirmDeletePortalDialogRef = ref(null);
 const currentPortalSlug = computed(() => route.params.portalSlug);
 
 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
-const isFetchingSSLStatus = useMapGetter('portals/isFetchingSSLStatus');
 
 const activePortal = computed(() => {
   return props.portals?.find(portal => portal.slug === currentPortalSlug.value);
@@ -56,14 +53,6 @@ const handleUpdatePortalConfiguration = portal => {
   emit('updatePortalConfiguration', portal);
 };
 
-const fetchSSLStatus = () => {
-  emit('refreshStatus');
-};
-
-const handleSendCnameInstructions = payload => {
-  emit('sendCnameInstructions', payload);
-};
-
 const openConfirmDeletePortalDialog = () => {
   confirmDeletePortalDialogRef.value.dialogRef.open();
 };
@@ -96,10 +85,7 @@ const handleDeletePortal = () => {
         <PortalConfigurationSettings
           :active-portal="activePortal"
           :is-fetching="isFetching"
-          :is-fetching-status="isFetchingSSLStatus"
           @update-portal-configuration="handleUpdatePortalConfiguration"
-          @refresh-status="fetchSSLStatus"
-          @send-cname-instructions="handleSendCnameInstructions"
         />
         <div class="w-full h-px bg-n-weak" />
         <div class="flex items-end justify-between w-full gap-4">

app/javascript/dashboard/components-next/Inbox/InboxCard.vue

@@ -49,8 +49,8 @@ const isUnread = computed(() => !props.inboxItem?.readAt);
 const inbox = computed(() => props.stateInbox);
 
 const inboxIcon = computed(() => {
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+  const { phoneNumber, channelType } = inbox.value;
+  return getInboxIconByType(channelType, phoneNumber);
 });
 
 const hasSlaThreshold = computed(() => {
@@ -63,12 +63,11 @@ const lastActivityAt = computed(() => {
 });
 
 const menuItems = computed(() => [
+  { key: 'delete', label: t('INBOX.MENU_ITEM.DELETE') },
   {
     key: isUnread.value ? 'mark_as_read' : 'mark_as_unread',
-    icon: isUnread.value ? 'mail' : 'mail-unread',
     label: t(`INBOX.MENU_ITEM.MARK_AS_${isUnread.value ? 'READ' : 'UNREAD'}`),
   },
-  { key: 'delete', icon: 'delete', label: t('INBOX.MENU_ITEM.DELETE') },
 ]);
 
 const messageClasses = computed(() => ({
@@ -154,7 +153,7 @@ onBeforeMount(contextMenuActions.close);
 <template>
   <div
     role="button"
-    class="flex flex-col w-full gap-1 p-3 transition-all duration-300 ease-in-out cursor-pointer"
+    class="flex flex-col w-full gap-2 p-3 transition-all duration-300 ease-in-out cursor-pointer"
     @contextmenu="contextMenuActions.open($event)"
     @click="emit('click')"
   >
@@ -233,7 +232,7 @@ onBeforeMount(contextMenuActions.close);
             class="flex-shrink-0 text-n-slate-11 size-2.5"
           />
         </div>
-        <span class="text-xs text-n-slate-10">
+        <span class="text-sm text-n-slate-10">
           {{ lastActivityAt }}
         </span>
       </div>

app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue

@@ -2,7 +2,6 @@
 import { ref, computed, onMounted, watch } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
-import { useWindowSize } from '@vueuse/core';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { vOnClickOutside } from '@vueuse/components';
 import { useAlert } from 'dashboard/composables';
@@ -16,7 +15,6 @@ import {
   processContactableInboxes,
   mergeInboxDetails,
 } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
-import wootConstants from 'dashboard/constants/globals';
 
 import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
 
@@ -39,16 +37,9 @@ const emit = defineEmits(['close']);
 
 const store = useStore();
 const { t } = useI18n();
-const { width: windowWidth } = useWindowSize();
 
 const { fetchSignatureFlagFromUISettings } = useUISettings();
 
-const isSmallScreen = computed(
-  () => windowWidth.value < wootConstants.SMALL_SCREEN_BREAKPOINT
-);
-
-const viewInModal = computed(() => props.isModal || isSmallScreen.value);
-
 const contacts = ref([]);
 const selectedContact = ref(null);
 const targetInbox = ref(null);
@@ -76,7 +67,7 @@ const directUploadsEnabled = computed(
 const activeContact = computed(() => contactById.value(props.contactId));
 
 const composePopoverClass = computed(() => {
-  if (viewInModal.value) return '';
+  if (props.isModal) return '';
 
   return props.alignPosition === 'right'
     ? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]'
@@ -188,18 +179,14 @@ const toggle = () => {
 
 watch(
   activeContact,
-  (currentContact, previousContact) => {
-    if (currentContact && props.contactId) {
-      // Reset on contact change
-      if (currentContact?.id !== previousContact?.id) clearSelectedContact();
-
+  () => {
+    if (activeContact.value && props.contactId) {
+      const contactInboxes = activeContact.value?.contactInboxes || [];
       // First process the contactable inboxes to get the right structure
-      const processedInboxes = processContactableInboxes(
-        currentContact.contactInboxes || []
-      );
+      const processedInboxes = processContactableInboxes(contactInboxes);
       // Then Merge processedInboxes with the inboxes list
       selectedContact.value = {
-        ...currentContact,
+        ...activeContact.value,
         contactInboxes: mergeInboxDetails(processedInboxes, inboxesList.value),
       };
     }
@@ -215,7 +202,7 @@ const handleClickOutside = () => {
 };
 
 const onModalBackdropClick = () => {
-  if (!viewInModal.value) return;
+  if (!props.isModal) return;
   handleClickOutside();
 };
 
@@ -244,7 +231,7 @@ useKeyboardEvents(keyboardEvents);
     ]"
     class="relative"
     :class="{
-      'z-50': showComposeNewConversation && !viewInModal,
+      'z-40': showComposeNewConversation,
     }"
   >
     <slot
@@ -256,12 +243,12 @@ useKeyboardEvents(keyboardEvents);
       v-if="showComposeNewConversation"
       :class="{
         'fixed z-50 bg-n-alpha-black1 backdrop-blur-[4px] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center inset-0':
-          viewInModal,
+          isModal,
       }"
       @click.self="onModalBackdropClick"
     >
       <ComposeNewConversationForm
-        :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
+        :class="[{ 'mt-2': !isModal }, composePopoverClass]"
         :contacts="contacts"
         :contact-id="contactId"
         :is-loading="isSearching"

app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue

@@ -25,7 +25,6 @@ const props = defineProps({
   hasNoInbox: { type: Boolean, default: false },
   isDropdownActive: { type: Boolean, default: false },
   messageSignature: { type: String, default: '' },
-  inboxId: { type: Number, default: null },
 });
 
 const emit = defineEmits([
@@ -151,10 +150,9 @@ useKeyboardEvents(keyboardEvents);
   <div
     class="flex items-center justify-between w-full h-[3.25rem] gap-2 px-4 py-3"
   >
-    <div class="flex gap-2 items-center">
+    <div class="flex items-center gap-2">
       <WhatsAppOptions
         v-if="isWhatsappInbox"
-        :inbox-id="inboxId"
         :message-templates="messageTemplates"
         @send-message="emit('sendWhatsappMessage', $event)"
       />
@@ -172,7 +170,7 @@ useKeyboardEvents(keyboardEvents);
         />
         <EmojiInput
           v-if="isEmojiPickerOpen"
-          class="ltr:left-0 rtl:right-0 top-full mt-1.5"
+          class="left-0 top-full mt-1.5"
           :on-click="onClickInsertEmoji"
         />
       </div>
@@ -208,7 +206,7 @@ useKeyboardEvents(keyboardEvents);
       />
     </div>
 
-    <div class="flex gap-2 items-center">
+    <div class="flex items-center gap-2">
       <Button
         :label="t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.DISCARD')"
         variant="faded"

app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue

@@ -57,7 +57,7 @@ const removeAttachment = id => {
           variant="ghost"
           icon="i-lucide-trash"
           color="slate"
-          class="absolute top-1 ltr:right-1 rtl:left-1 !w-5 !h-5 transition-opacity duration-150 ease-in-out opacity-0 group-hover/image:opacity-100"
+          class="absolute top-1 right-1 !w-5 !h-5 transition-opacity duration-150 ease-in-out opacity-0 group-hover/image:opacity-100"
           @click="removeAttachment(attachment.resource.id)"
         />
       </div>

app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue

@@ -265,7 +265,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
 
 <template>
   <div
-    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0"
+    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
   >
     <ContactSelector
       :contacts="contacts"
@@ -336,7 +336,6 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
       :is-loading="isCreating"
       :disable-send-button="isCreating"
       :has-selected-inbox="!!targetInbox"
-      :inbox-id="targetInbox?.id"
       :has-no-inbox="showNoInboxAlert"
       :is-dropdown-active="isAnyDropdownActive"
       :message-signature="messageSignature"

app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue

@@ -83,7 +83,7 @@ const targetInboxLabel = computed(() => {
       <DropdownMenu
         v-if="contactableInboxesList?.length > 0 && showInboxesDropdown"
         :menu-items="contactableInboxesList"
-        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-60 w-fit max-w-sm dark:!outline-n-slate-5"
+        class="left-0 z-[100] top-8 overflow-y-auto max-h-60 w-fit max-w-sm dark:!outline-n-slate-5"
         @action="emit('handleInboxAction', $event)"
       />
     </div>

app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue

@@ -1,25 +1,23 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store';
 
-import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
-import WhatsappTemplate from './WhatsappTemplate.vue';
+import WhatsappTemplateParser from './WhatsappTemplateParser.vue';
 
 const props = defineProps({
-  inboxId: {
-    type: Number,
-    required: true,
+  messageTemplates: {
+    type: Array,
+    default: () => [],
   },
 });
 
 const emit = defineEmits(['sendMessage']);
 
 const { t } = useI18n();
-const getFilteredWhatsAppTemplates = useMapGetter(
-  'inboxes/getFilteredWhatsAppTemplates'
-);
+
+// TODO: Remove this when we support all formats
+const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
 
 const searchQuery = ref('');
 const selectedTemplate = ref(null);
@@ -27,7 +25,19 @@ const selectedTemplate = ref(null);
 const showTemplatesMenu = ref(false);
 
 const whatsAppTemplateMessages = computed(() => {
-  return getFilteredWhatsAppTemplates.value(props.inboxId);
+  // Add null check and ensure it's an array
+  const templates = Array.isArray(props.messageTemplates)
+    ? props.messageTemplates
+    : [];
+
+  // TODO: Remove the last filter when we support all formats
+  return templates
+    .filter(template => template?.status?.toLowerCase() === 'approved')
+    .filter(template => {
+      return template?.components?.every(component => {
+        return !formatsToRemove.includes(component.format);
+      });
+    });
 });
 
 const filteredTemplates = computed(() => {
@@ -74,13 +84,10 @@ const handleSendMessage = template => {
     />
     <div
       v-if="showTemplatesMenu"
-      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-2 p-4 items-center w-[21.875rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto left-0 flex flex-col gap-2 p-4 items-center w-[21.875rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
     >
       <div class="relative w-full">
-        <Icon
-          icon="i-lucide-search"
-          class="absolute size-3.5 top-2 ltr:left-3 rtl:right-3"
-        />
+        <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
         <input
           v-model="searchQuery"
           type="search"
@@ -89,13 +96,13 @@ const handleSendMessage = template => {
               'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
             )
           "
-          class="w-full h-8 py-2 ltr:pl-10 rtl:pr-10 ltr:pr-2 rtl:pl-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
         />
       </div>
       <div
         v-for="template in filteredTemplates"
         :key="template.id"
-        class="flex flex-col gap-2 p-2 w-full rounded-lg cursor-pointer dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
+        class="flex flex-col w-full gap-2 p-2 rounded-lg cursor-pointer dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
         @click="handleTemplateClick(template)"
       >
         <span class="text-sm text-n-slate-12">{{ template.name }}</span>
@@ -104,12 +111,12 @@ const handleSendMessage = template => {
         </p>
       </div>
       <template v-if="filteredTemplates.length === 0">
-        <p class="pt-2 w-full text-sm text-n-slate-11">
+        <p class="w-full pt-2 text-sm text-n-slate-11">
           {{ t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.EMPTY_STATE') }}
         </p>
       </template>
     </div>
-    <WhatsappTemplate
+    <WhatsappTemplateParser
       v-if="selectedTemplate"
       :template="selectedTemplate"
       @send-message="handleSendMessage"

app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplate.vue

@@ -1,64 +0,0 @@
-<script setup>
-import WhatsAppTemplateParser from 'dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import { useI18n } from 'vue-i18n';
-
-defineProps({
-  template: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const emit = defineEmits(['sendMessage', 'back']);
-
-const { t } = useI18n();
-
-const handleSendMessage = payload => {
-  emit('sendMessage', payload);
-};
-
-const handleBack = () => {
-  emit('back');
-};
-</script>
-
-<template>
-  <div
-    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
-  >
-    <div class="w-full">
-      <WhatsAppTemplateParser
-        :template="template"
-        @send-message="handleSendMessage"
-        @back="handleBack"
-      >
-        <template #actions="{ sendMessage, goBack, disabled }">
-          <div class="flex gap-3 justify-between items-end w-full h-14">
-            <Button
-              :label="
-                t(
-                  'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.BACK'
-                )
-              "
-              color="slate"
-              variant="faded"
-              class="w-full font-medium"
-              @click="goBack"
-            />
-            <Button
-              :label="
-                t(
-                  'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.SEND_MESSAGE'
-                )
-              "
-              class="w-full font-medium"
-              :disabled="disabled"
-              @click="sendMessage"
-            />
-          </div>
-        </template>
-      </WhatsAppTemplateParser>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue

@@ -106,7 +106,7 @@ onMounted(() => {
 
 <template>
   <div
-    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto left-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
   >
     <span class="text-sm text-n-slate-12">
       {{
@@ -138,8 +138,7 @@ onMounted(() => {
       class="flex items-center w-full gap-2"
     >
       <span
-        class="block h-8 text-sm min-w-6 text-start truncate text-n-slate-10 leading-8"
-        :title="key"
+        class="flex items-center h-8 text-sm min-w-6 ltr:text-left rtl:text-right text-n-slate-10"
       >
         {{ key }}
       </span>

app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js

@@ -36,11 +36,10 @@ const transformInbox = ({
   email,
   channelType,
   phoneNumber,
-  medium,
   ...rest
 }) => ({
   id,
-  icon: getInboxIconByType(channelType, medium, 'line'),
+  icon: getInboxIconByType(channelType, phoneNumber, 'line'),
   label: generateLabelForContactableInboxesList({
     name,
     email,

app/javascript/dashboard/components-next/avatar/Avatar.vue

@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { removeEmoji } from 'shared/helpers/emoji';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
-import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
 import wootConstants from 'dashboard/constants/globals';
 
 const props = defineProps({
@@ -34,18 +33,10 @@ const props = defineProps({
     validator: value =>
       !value || wootConstants.AVAILABILITY_STATUS_KEYS.includes(value),
   },
-  inbox: {
-    type: Object,
-    default: null,
-  },
   iconName: {
     type: String,
     default: null,
   },
-  hideOfflineStatus: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits(['upload', 'delete']);
@@ -75,11 +66,11 @@ const AVATAR_COLORS = {
   default: { bg: '#E8E8E8', text: '#60646C' },
 };
 
-const STATUS_CLASSES = computed(() => ({
+const STATUS_CLASSES = {
   online: 'bg-n-teal-10',
   busy: 'bg-n-amber-10',
-  ...(props.hideOfflineStatus ? {} : { offline: 'bg-n-slate-10' }),
-}));
+  offline: 'bg-n-slate-10',
+};
 
 const showDefaultAvatar = computed(() => !props.src && !props.name);
 
@@ -183,31 +174,21 @@ watch(
 </script>
 
 <template>
-  <span
-    class="relative inline-flex group/avatar z-0 flex-shrink-0"
-    :style="containerStyles"
-  >
+  <span class="relative inline-flex group/avatar z-0" :style="containerStyles">
     <!-- Status Badge -->
     <slot name="badge" :size="size">
       <div
-        v-if="status && STATUS_CLASSES[status]"
+        v-if="status"
         class="absolute z-20 border rounded-full border-n-slate-3"
         :style="badgeStyles"
         :class="STATUS_CLASSES[status]"
       />
-      <div
-        v-if="inbox && !(status && STATUS_CLASSES[status])"
-        :style="badgeStyles"
-        class="absolute z-20 flex items-center justify-center rounded-full bg-n-solid-1 border border-transparent flex-shrink-0"
-      >
-        <ChannelIcon :inbox="inbox" class="w-full h-full text-n-slate-11" />
-      </div>
     </slot>
 
     <!-- Delete Avatar Button -->
     <div
       v-if="src && allowUpload"
-      class="absolute z-20 flex items-center justify-center invisible w-6 h-6 transition-all duration-300 ease-in-out opacity-0 cursor-pointer outline outline-1 outline-n-container -top-2 ltr:-right-2 rtl:-left-2 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
+      class="absolute z-20 flex items-center justify-center invisible w-6 h-6 transition-all duration-300 ease-in-out opacity-0 cursor-pointer outline outline-1 outline-n-container -top-2 -right-2 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
       @click="handleDismiss"
     >
       <Icon icon="i-lucide-x" class="text-n-slate-11 size-4" />
@@ -251,40 +232,31 @@ watch(
         <!-- Fallback Icon if no name or image -->
         <Icon
           v-else
-          :title="t('THUMBNAIL.AUTHOR.NOT_AVAILABLE')"
+          v-tooltip.top-start="t('THUMBNAIL.AUTHOR.NOT_AVAILABLE')"
           icon="i-lucide-user"
           :style="iconStyles"
         />
       </template>
 
       <!-- Upload Overlay and Input -->
-      <slot
-        v-if="allowUpload || $slots.overlay"
-        name="overlay"
-        :size="size"
-        :handle-upload="handleUploadAvatar"
-        :file-input-ref="fileInput"
-        :handle-image-upload="handleImageUpload"
+      <div
+        v-if="allowUpload"
+        class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
+        @click="handleUploadAvatar"
       >
-        <div
-          class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
-          @click="handleUploadAvatar"
-        >
-          <Icon
-            icon="i-lucide-upload"
-            class="text-white"
-            :style="{ width: `${size / 2}px`, height: `${size / 2}px` }"
-          />
-          <input
-            v-if="allowUpload"
-            ref="fileInput"
-            type="file"
-            accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-            class="hidden"
-            @change="handleImageUpload"
-          />
-        </div>
-      </slot>
+        <Icon
+          icon="i-lucide-upload"
+          class="text-white"
+          :style="{ width: `${size / 2}px`, height: `${size / 2}px` }"
+        />
+        <input
+          ref="fileInput"
+          type="file"
+          accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+          class="hidden"
+          @change="handleImageUpload"
+        />
+      </div>
     </span>
   </span>
 </template>

app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue

@@ -15,42 +15,31 @@ const emit = defineEmits(['click']);
 
 const { t } = useI18n();
 
-const onClick = (item, index) => {
-  emit('click', item, index);
+const onClick = event => {
+  emit('click', event);
 };
 </script>
 
 <template>
-  <nav
-    :aria-label="t('BREADCRUMB.ARIA_LABEL')"
-    class="flex items-center h-8 min-w-0"
-  >
-    <ol class="flex items-center mb-0 min-w-0">
-      <li
-        v-for="(item, index) in items"
-        :key="index"
-        class="flex items-center"
-        :class="{ 'min-w-0 flex-1': index === items.length - 1 }"
-      >
-        <Icon
-          v-if="index > 0"
-          icon="i-lucide-chevron-right"
-          class="flex-shrink-0 mx-2 size-4 text-n-slate-11 dark:text-n-slate-11"
-        />
-
-        <!-- Render as button for all except the last item -->
+  <nav :aria-label="t('BREADCRUMB.ARIA_LABEL')" class="flex items-center h-8">
+    <ol class="flex items-center mb-0">
+      <li v-for="(item, index) in items" :key="index" class="flex items-center">
         <button
-          v-if="index !== items.length - 1"
+          v-if="index === 0"
           class="inline-flex items-center justify-center min-w-0 gap-2 p-0 text-sm font-medium transition-all duration-200 ease-in-out border-0 rounded-lg text-n-slate-11 hover:text-n-slate-12 outline-transparent max-w-56"
-          @click="onClick(item, index)"
+          @click="onClick"
         >
           <span class="min-w-0 truncate">{{ item.label }}</span>
         </button>
-
-        <!-- The last breadcrumb item is plain text -->
-        <span v-else class="text-sm truncate text-n-slate-12 min-w-0 block">
-          {{ item.emoji ? item.emoji : '' }} {{ item.label }}
-        </span>
+        <template v-else>
+          <Icon
+            icon="i-lucide-chevron-right"
+            class="flex-shrink-0 mx-2 size-4 text-n-slate-11 dark:text-n-slate-11"
+          />
+          <span class="text-sm truncate text-n-slate-12 max-w-56">
+            {{ item.emoji ? item.emoji : '' }} {{ item.label }}
+          </span>
+        </template>
       </li>
     </ol>
   </nav>

app/javascript/dashboard/components-next/captain/SettingsPageLayout.vue

@@ -1,91 +0,0 @@
-<script setup>
-import { useRouter } from 'vue-router';
-import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
-
-defineProps({
-  isFetching: {
-    type: Boolean,
-    default: false,
-  },
-  isEmpty: {
-    type: Boolean,
-    default: false,
-  },
-  currentPage: {
-    type: Number,
-    default: 1,
-  },
-  totalCount: {
-    type: Number,
-    default: 100,
-  },
-  itemsPerPage: {
-    type: Number,
-    default: 25,
-  },
-  showPaginationFooter: {
-    type: Boolean,
-    default: false,
-  },
-  breadcrumbItems: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['update:currentPage']);
-
-const router = useRouter();
-
-const handlePageChange = event => {
-  emit('update:currentPage', event);
-};
-
-const handleBreadcrumbClick = item => {
-  router.push({
-    name: item.routeName,
-  });
-};
-</script>
-
-<template>
-  <section
-    class="px-6 flex flex-col w-full h-screen overflow-y-auto bg-n-background"
-  >
-    <div class="max-w-[60rem] mx-auto flex flex-col w-full h-full mb-4">
-      <header class="mb-7 sticky top-0 bg-n-background pt-4 z-20">
-        <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
-      </header>
-      <main class="flex gap-16 w-full flex-1 pb-16">
-        <section
-          v-if="$slots.body || $slots.emptyState || isFetching"
-          class="flex flex-col w-full"
-        >
-          <div
-            v-if="isFetching"
-            class="flex items-center justify-center py-10 text-n-slate-11"
-          >
-            <Spinner />
-          </div>
-          <div v-else-if="isEmpty">
-            <slot name="emptyState" />
-          </div>
-          <slot v-else name="body" />
-        </section>
-        <section v-if="$slots.controls" class="flex w-full">
-          <slot name="controls" />
-        </section>
-      </main>
-      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 pb-4">
-        <PaginationFooter
-          :current-page="currentPage"
-          :total-items="totalCount"
-          :items-per-page="itemsPerPage"
-          @update:current-page="handlePageChange"
-        />
-      </footer>
-    </div>
-  </section>
-</template>

app/javascript/dashboard/components-next/captain/assistant/AddNewRulesDialog.story.vue

@@ -1,21 +0,0 @@
-<script setup>
-import AddNewRulesDialog from './AddNewRulesDialog.vue';
-</script>
-
-<template>
-  <Story
-    title="Captain/Assistant/AddNewRulesDialog"
-    :layout="{ type: 'grid', width: '800px' }"
-  >
-    <Variant title="Default">
-      <div class="px-4 py-4 bg-n-background h-[200px]">
-        <AddNewRulesDialog
-          button-label="Add a guardrail"
-          placeholder="Type in another guardrail..."
-          confirm-label="Create"
-          cancel-label="Cancel"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/captain/assistant/AddNewRulesDialog.vue

@@ -1,81 +0,0 @@
-<script setup>
-import { useToggle } from '@vueuse/core';
-import { vOnClickOutside } from '@vueuse/components';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
-
-defineProps({
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  buttonLabel: {
-    type: String,
-    default: '',
-  },
-  confirmLabel: {
-    type: String,
-    default: '',
-  },
-  cancelLabel: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['add']);
-
-const modelValue = defineModel({
-  type: String,
-  default: '',
-});
-
-const [showPopover, togglePopover] = useToggle();
-const onClickAdd = () => {
-  if (!modelValue.value?.trim()) return;
-  emit('add', modelValue.value.trim());
-  modelValue.value = '';
-  togglePopover(false);
-};
-
-const onClickCancel = () => {
-  togglePopover(false);
-};
-</script>
-
-<template>
-  <div
-    v-on-click-outside="() => togglePopover(false)"
-    class="inline-flex relative"
-  >
-    <Button
-      :label="buttonLabel"
-      sm
-      slate
-      class="flex-shrink-0"
-      @click="togglePopover(!showPopover)"
-    />
-    <div
-      v-if="showPopover"
-      class="absolute w-[26.5rem] top-9 z-50 ltr:left-0 rtl:right-0 flex flex-col gap-5 bg-n-alpha-3 backdrop-blur-[100px] p-4 rounded-xl border border-n-weak shadow-md"
-    >
-      <InlineInput
-        v-model="modelValue"
-        :placeholder="placeholder"
-        @keyup.enter="onClickAdd"
-      />
-      <div class="flex gap-2 justify-between">
-        <Button
-          :label="cancelLabel"
-          sm
-          link
-          slate
-          class="h-10 hover:!no-underline"
-          @click="onClickCancel"
-        />
-        <Button :label="confirmLabel" sm @click="onClickAdd" />
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/captain/assistant/AddNewRulesInput.story.vue

@@ -1,19 +0,0 @@
-<script setup>
-import AddNewRulesInput from './AddNewRulesInput.vue';
-</script>
-
-<template>
-  <Story
-    title="Captain/Assistant/AddNewRulesInput"
-    :layout="{ type: 'grid', width: '800px' }"
-  >
-    <Variant title="Default">
-      <div class="px-6 py-4 bg-n-background">
-        <AddNewRulesInput
-          placeholder="Type in another response guideline..."
-          label="Add and save (↵)"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/captain/assistant/AddNewRulesInput.vue

@@ -1,51 +0,0 @@
-<script setup>
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
-
-defineProps({
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['add']);
-
-const modelValue = defineModel({
-  type: String,
-  default: '',
-});
-
-const onClickAdd = () => {
-  if (!modelValue.value?.trim()) return;
-  emit('add', modelValue.value.trim());
-  modelValue.value = '';
-};
-</script>
-
-<template>
-  <div
-    class="flex py-3 ltr:pl-3 h-16 rtl:pr-3 ltr:pr-4 rtl:pl-4 items-center gap-3 rounded-xl bg-n-solid-2 outline-1 outline outline-n-container"
-  >
-    <Icon icon="i-lucide-plus" class="text-n-slate-10 size-5 flex-shrink-0" />
-
-    <InlineInput
-      v-model="modelValue"
-      :placeholder="placeholder"
-      @keyup.enter="onClickAdd"
-    />
-    <Button
-      :label="label"
-      ghost
-      xs
-      slate
-      class="!text-sm !text-n-slate-11 flex-shrink-0"
-      @click="onClickAdd"
-    />
-  </div>
-</template>

app/javascript/dashboard/components-next/captain/assistant/AddNewScenariosDialog.vue

@@ -1,155 +0,0 @@
-<script setup>
-import { computed, reactive } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useToggle } from '@vueuse/core';
-import { useVuelidate } from '@vuelidate/core';
-import { vOnClickOutside } from '@vueuse/components';
-import { required, minLength } from '@vuelidate/validators';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
-import Editor from 'dashboard/components-next/Editor/Editor.vue';
-
-const emit = defineEmits(['add']);
-
-const { t } = useI18n();
-
-const [showPopover, togglePopover] = useToggle();
-
-const state = reactive({
-  id: '',
-  title: '',
-  description: '',
-  instruction: '',
-});
-
-const rules = {
-  title: { required, minLength: minLength(1) },
-  description: { required },
-  instruction: { required },
-};
-
-const v$ = useVuelidate(rules, state);
-
-const titleError = computed(() =>
-  v$.value.title.$error
-    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.ERROR')
-    : ''
-);
-
-const descriptionError = computed(() =>
-  v$.value.description.$error
-    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.ERROR')
-    : ''
-);
-
-const instructionError = computed(() =>
-  v$.value.instruction.$error
-    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.ERROR')
-    : ''
-);
-
-const resetState = () => {
-  Object.assign(state, {
-    id: '',
-    title: '',
-    description: '',
-    instruction: '',
-  });
-};
-
-const onClickAdd = async () => {
-  v$.value.$touch();
-  if (v$.value.$invalid) return;
-
-  await emit('add', state);
-  resetState();
-  togglePopover(false);
-};
-
-const onClickCancel = () => {
-  togglePopover(false);
-};
-</script>
-
-<template>
-  <div
-    v-on-click-outside="() => togglePopover(false)"
-    class="inline-flex relative"
-  >
-    <Button
-      :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.CREATE')"
-      sm
-      slate
-      class="flex-shrink-0"
-      @click="togglePopover(!showPopover)"
-    />
-
-    <div
-      v-if="showPopover"
-      class="w-[31.25rem] absolute top-10 ltr:left-0 rtl:right-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6 z-50"
-    >
-      <h3 class="text-base font-medium text-n-slate-12">
-        {{ t(`CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.TITLE`) }}
-      </h3>
-
-      <div class="flex flex-col gap-4">
-        <Input
-          v-model="state.title"
-          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.LABEL')"
-          :placeholder="
-            t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.PLACEHOLDER')
-          "
-          :message="titleError"
-          :message-type="titleError ? 'error' : 'info'"
-        />
-
-        <TextArea
-          v-model="state.description"
-          :label="
-            t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.LABEL')
-          "
-          :placeholder="
-            t(
-              'CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.PLACEHOLDER'
-            )
-          "
-          :message="descriptionError"
-          :message-type="descriptionError ? 'error' : 'info'"
-          show-character-count
-        />
-        <Editor
-          v-model="state.instruction"
-          :label="
-            t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.LABEL')
-          "
-          :placeholder="
-            t(
-              'CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.PLACEHOLDER'
-            )
-          "
-          :message="instructionError"
-          :message-type="instructionError ? 'error' : 'info'"
-          :show-character-count="false"
-          enable-captain-tools
-        />
-      </div>
-
-      <div class="flex items-center justify-between w-full gap-3">
-        <Button
-          variant="faded"
-          color="slate"
-          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.CANCEL')"
-          class="w-full bg-n-alpha-2 !text-n-blue-text hover:bg-n-alpha-3"
-          @click="onClickCancel"
-        />
-        <Button
-          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.CREATE')"
-          class="w-full"
-          @click="onClickAdd"
-        />
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue

@@ -1,99 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  allItems: {
-    type: Array,
-    required: true,
-  },
-  selectAllLabel: {
-    type: String,
-    default: '',
-  },
-  selectedCountLabel: {
-    type: String,
-    default: '',
-  },
-  deleteLabel: {
-    type: String,
-    default: 'Delete',
-  },
-});
-
-const emit = defineEmits(['bulkDelete']);
-
-const modelValue = defineModel({
-  type: Set,
-  default: () => new Set(),
-});
-
-const selectedCount = computed(() => modelValue.value.size);
-const totalCount = computed(() => props.allItems.length);
-
-const hasSelected = computed(() => selectedCount.value > 0);
-const isIndeterminate = computed(
-  () => hasSelected.value && selectedCount.value < totalCount.value
-);
-const allSelected = computed(
-  () => totalCount.value > 0 && selectedCount.value === totalCount.value
-);
-
-const bulkCheckboxState = computed({
-  get: () => allSelected.value,
-  set: shouldSelectAll => {
-    const newSelectedIds = shouldSelectAll
-      ? new Set(props.allItems.map(item => item.id))
-      : new Set();
-    modelValue.value = newSelectedIds;
-  },
-});
-</script>
-
-<template>
-  <transition
-    name="slide-fade"
-    enter-active-class="transition-all duration-300 ease-out"
-    enter-from-class="opacity-0 transform ltr:-translate-x-4 rtl:translate-x-4"
-    enter-to-class="opacity-100 transform translate-x-0"
-    leave-active-class="hidden opacity-0"
-  >
-    <div
-      v-if="hasSelected"
-      class="flex items-center gap-3 py-1 ltr:pl-3 rtl:pr-3 ltr:pr-4 rtl:pl-4 rounded-lg bg-n-solid-2 outline outline-1 outline-n-container shadow"
-    >
-      <div class="flex items-center gap-3">
-        <div class="flex items-center gap-1.5">
-          <Checkbox
-            v-model="bulkCheckboxState"
-            :indeterminate="isIndeterminate"
-          />
-          <span class="text-sm font-medium text-n-slate-12 tabular-nums">
-            {{ selectAllLabel }}
-          </span>
-        </div>
-        <span class="text-sm text-n-slate-10 tabular-nums">
-          {{ selectedCountLabel }}
-        </span>
-      </div>
-      <div class="h-4 w-px bg-n-strong" />
-      <div class="flex items-center gap-3">
-        <slot name="actions" :selected-count="selectedCount">
-          <Button
-            :label="deleteLabel"
-            sm
-            ruby
-            ghost
-            class="!px-1.5"
-            icon="i-lucide-trash"
-            @click="emit('bulkDelete')"
-          />
-        </slot>
-      </div>
-    </div>
-    <div v-else class="flex items-center gap-3">
-      <slot name="default-actions" />
-    </div>
-  </transition>
-</template>

app/javascript/dashboard/components-next/captain/assistant/InboxCard.vue

@@ -57,10 +57,9 @@ const menuItems = computed(() => [
   },
 ]);
 
-const icon = computed(() => {
-  const { medium, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, medium, 'outline');
-});
+const icon = computed(() =>
+  getInboxIconByType(props.inbox.channel_type, '', 'outline')
+);
 
 const handleAction = ({ action, value }) => {
   toggleDropdown(false);

app/javascript/dashboard/components-next/captain/assistant/ResponseCard.vue

@@ -55,10 +55,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  showMenu: {
-    type: Boolean,
-    default: true,
-  },
 });
 
 const emit = defineEmits(['action', 'navigate', 'select', 'hover']);
@@ -134,7 +130,7 @@ const handleDocumentableClick = () => {
       <span class="text-base text-n-slate-12 line-clamp-1">
         {{ question }}
       </span>
-      <div v-if="!compact && showMenu" class="flex items-center gap-2">
+      <div v-if="!compact" class="flex items-center gap-2">
         <Policy
           v-on-clickaway="() => toggleDropdown(false)"
           :permissions="['administrator']"

app/javascript/dashboard/components-next/captain/assistant/RuleCard.story.vue

@@ -1,37 +0,0 @@
-<script setup>
-import RuleCard from './RuleCard.vue';
-
-const sampleRules = [
-  { id: 1, content: 'Block sensitive personal information', selectable: true },
-  { id: 2, content: 'Reject offensive language', selectable: true },
-  { id: 3, content: 'Deflect legal or medical advice', selectable: true },
-];
-</script>
-
-<template>
-  <Story
-    title="Captain/Assistant/RuleCard"
-    :layout="{ type: 'grid', width: '800px' }"
-  >
-    <Variant title="Selectable List">
-      <div class="flex flex-col gap-4 px-20 py-4 bg-n-background">
-        <RuleCard
-          v-for="rule in sampleRules"
-          :id="rule.id"
-          :key="rule.id"
-          :content="rule.content"
-          :selectable="rule.selectable"
-          @select="id => console.log('Selected rule', id)"
-          @edit="id => console.log('Edit', id)"
-          @delete="id => console.log('Delete', id)"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Non-Selectable">
-      <div class="flex flex-col gap-4 px-20 py-4 bg-n-background">
-        <RuleCard id="4" content="Replies should be friendly and clear." />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/captain/assistant/RuleCard.vue

@@ -1,93 +0,0 @@
-<script setup>
-import { computed, ref, watch } from 'vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
-import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
-
-const props = defineProps({
-  id: {
-    type: Number,
-    required: true,
-  },
-  content: {
-    type: String,
-    required: true,
-  },
-  selectable: {
-    type: Boolean,
-    default: false,
-  },
-  isSelected: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['select', 'hover', 'edit', 'delete']);
-
-const modelValue = computed({
-  get: () => props.isSelected,
-  set: () => emit('select', props.id),
-});
-
-const isEditing = ref(false);
-const editedContent = ref(props.content);
-
-// Local content to display to avoid flicker until parent prop updates on inline edit
-const localContent = ref(props.content);
-
-// Keeps localContent in sync when parent updates content prop
-watch(
-  () => props.content,
-  newVal => {
-    localContent.value = newVal;
-  }
-);
-
-const startEdit = () => {
-  isEditing.value = true;
-  editedContent.value = props.content;
-};
-
-const saveEdit = () => {
-  isEditing.value = false;
-  // Update local content
-  localContent.value = editedContent.value;
-  emit('edit', { id: props.id, content: editedContent.value });
-};
-</script>
-
-<template>
-  <CardLayout
-    selectable
-    class="relative [&>div]:!py-5 [&>div]:ltr:!pr-4 [&>div]:rtl:!pl-4"
-    layout="row"
-    @mouseenter="emit('hover', true)"
-    @mouseleave="emit('hover', false)"
-  >
-    <div v-show="selectable" class="absolute top-6 ltr:left-3 rtl:right-3">
-      <Checkbox v-model="modelValue" />
-    </div>
-    <InlineInput
-      v-if="isEditing"
-      v-model="editedContent"
-      focus-on-mount
-      @keyup.enter="saveEdit"
-    />
-    <span v-else class="flex items-center gap-2 text-sm text-n-slate-12">
-      {{ localContent }}
-    </span>
-    <div class="flex items-center gap-2">
-      <Button icon="i-lucide-pen" slate xs ghost @click="startEdit" />
-      <span class="w-px h-4 bg-n-weak" />
-      <Button
-        icon="i-lucide-trash"
-        slate
-        xs
-        ghost
-        @click="emit('delete', id)"
-      />
-    </div>
-  </CardLayout>
-</template>

app/javascript/dashboard/components-next/captain/assistant/ScenariosCard.story.vue

@@ -1,45 +0,0 @@
-<script setup>
-import ScenariosCard from './ScenariosCard.vue';
-
-const sampleScenarios = [
-  {
-    id: 1,
-    title: 'Refund Order',
-    description: 'User requests a refund for a recent purchase.',
-    instruction:
-      'Gather order details and reason for refund. Use [Order Search](tool://order_search) then submit with [Refund Payment](tool://refund_payment).',
-    tools: ['order_search', 'refund_payment'],
-  },
-  {
-    id: 2,
-    title: 'Bug Report',
-    description: 'Customer reports a bug in the mobile app.',
-    instruction:
-      'Ask for reproduction steps and environment. Check [Known Issues](tool://known_issues) then create ticket with [Create Bug Report](tool://bug_report_create).',
-    tools: ['known_issues', 'bug_report_create'],
-  },
-];
-</script>
-
-<template>
-  <Story
-    title="Captain/Assistant/ScenariosCard"
-    :layout="{ type: 'grid', width: '800px' }"
-  >
-    <Variant title="Default">
-      <div
-        v-for="scenario in sampleScenarios"
-        :key="scenario.id"
-        class="px-4 py-4 bg-n-background"
-      >
-        <ScenariosCard
-          :id="scenario.id"
-          :title="scenario.title"
-          :description="scenario.description"
-          :instruction="scenario.instruction"
-          :tools="scenario.tools"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/captain/assistant/ScenariosCard.vue

@@ -1,255 +0,0 @@
-<script setup>
-import { computed, h, reactive, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useToggle, useElementSize } from '@vueuse/core';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-import Input from 'dashboard/components-next/input/Input.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
-import Editor from 'dashboard/components-next/Editor/Editor.vue';
-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-const props = defineProps({
-  id: {
-    type: Number,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  instruction: {
-    type: String,
-    required: true,
-  },
-  tools: {
-    type: Array,
-    default: () => [],
-  },
-  selectable: {
-    type: Boolean,
-    default: false,
-  },
-  isSelected: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['select', 'hover', 'delete', 'update']);
-
-const { t } = useI18n();
-const { formatMessage } = useMessageFormatter();
-
-const modelValue = computed({
-  get: () => props.isSelected,
-  set: () => emit('select', props.id),
-});
-
-const state = reactive({
-  id: '',
-  title: '',
-  description: '',
-  instruction: '',
-});
-
-const instructionContentRef = ref();
-
-const [isEditing, toggleEditing] = useToggle();
-const [isInstructionExpanded, toggleInstructionExpanded] = useToggle();
-
-const { height: contentHeight } = useElementSize(instructionContentRef);
-const needsOverlay = computed(() => contentHeight.value > 160);
-
-const startEdit = () => {
-  Object.assign(state, {
-    id: props.id,
-    title: props.title,
-    description: props.description,
-    instruction: props.instruction,
-    tools: props.tools,
-  });
-  toggleEditing(true);
-};
-
-const rules = {
-  title: { required, minLength: minLength(1) },
-  description: { required },
-  instruction: { required },
-};
-
-const v$ = useVuelidate(rules, state);
-
-const titleError = computed(() =>
-  v$.value.title.$error
-    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.ERROR')
-    : ''
-);
-
-const descriptionError = computed(() =>
-  v$.value.description.$error
-    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.ERROR')
-    : ''
-);
-
-const onClickUpdate = () => {
-  v$.value.$touch();
-  if (v$.value.$invalid) return;
-  emit('update', { ...state });
-  toggleEditing(false);
-};
-
-const instructionError = computed(() =>
-  v$.value.instruction.$error
-    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.ERROR')
-    : ''
-);
-
-const LINK_INSTRUCTION_CLASS =
-  '[&_a[href^="tool://"]]:text-n-iris-11 [&_a:not([href^="tool://"])]:text-n-slate-12 [&_a]:pointer-events-none [&_a]:cursor-default';
-
-const renderInstruction = instruction => () =>
-  h('p', {
-    class: `text-sm text-n-slate-12 py-4 mb-0 prose prose-sm min-w-0 break-words max-w-none ${LINK_INSTRUCTION_CLASS}`,
-    innerHTML: instruction,
-  });
-</script>
-
-<template>
-  <CardLayout
-    selectable
-    class="relative [&>div]:!py-4"
-    :class="{
-      '[&>div]:ltr:!pr-4 [&>div]:rtl:!pl-4': !isEditing,
-      '[&>div]:ltr:!pr-10 [&>div]:rtl:!pl-10': isEditing,
-    }"
-    layout="row"
-    @mouseenter="emit('hover', true)"
-    @mouseleave="emit('hover', false)"
-  >
-    <div
-      v-show="selectable && !isEditing"
-      class="absolute top-[1.125rem] ltr:left-3 rtl:right-3"
-    >
-      <Checkbox v-model="modelValue" />
-    </div>
-
-    <div v-if="!isEditing" class="flex flex-col w-full">
-      <div class="flex items-start justify-between w-full gap-2">
-        <div class="flex flex-col items-start">
-          <span class="text-sm text-n-slate-12 font-medium">{{ title }}</span>
-          <span class="text-sm text-n-slate-11 mt-2">
-            {{ description }}
-          </span>
-        </div>
-        <div class="flex items-center gap-2">
-          <!-- <Button label="Test" slate xs ghost class="!text-sm" />
-          <span class="w-px h-4 bg-n-weak" /> -->
-          <Button icon="i-lucide-pen" slate xs ghost @click="startEdit" />
-          <span class="w-px h-4 bg-n-weak" />
-          <Button
-            icon="i-lucide-trash"
-            slate
-            xs
-            ghost
-            @click="emit('delete', id)"
-          />
-        </div>
-      </div>
-
-      <div
-        class="relative overflow-hidden transition-all duration-300 ease-in-out group/expandable"
-        :class="{ 'cursor-pointer': needsOverlay }"
-        :style="{
-          maxHeight: isInstructionExpanded ? `${contentHeight}px` : '10rem',
-        }"
-        @click="needsOverlay ? toggleInstructionExpanded() : null"
-      >
-        <div ref="instructionContentRef">
-          <component
-            :is="renderInstruction(formatMessage(instruction, false))"
-          />
-        </div>
-
-        <div
-          class="absolute bottom-0 w-full flex items-end justify-center text-xs text-n-slate-11 bg-gradient-to-t h-40 from-n-solid-2 via-n-solid-2 via-10% to-transparent transition-all duration-500 ease-in-out px-2 py-1 rounded pointer-events-none"
-          :class="{
-            'visible opacity-100': !isInstructionExpanded,
-            'invisible opacity-0': isInstructionExpanded || !needsOverlay,
-          }"
-        >
-          <Icon
-            icon="i-lucide-chevron-down"
-            class="text-n-slate-7 mb-4 size-4 group-hover/expandable:text-n-slate-11 transition-colors duration-200"
-          />
-        </div>
-      </div>
-      <span
-        v-if="tools?.length"
-        class="text-sm text-n-slate-11 font-medium mb-1"
-      >
-        {{ t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.SUGGESTED.TOOLS_USED') }}
-        {{ tools?.map(tool => `@${tool}`).join(', ') }}
-      </span>
-    </div>
-    <div v-else class="overflow-hidden flex flex-col gap-4 w-full">
-      <Input
-        v-model="state.title"
-        :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.LABEL')"
-        :placeholder="
-          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.PLACEHOLDER')
-        "
-        :message="titleError"
-        :message-type="titleError ? 'error' : 'info'"
-      />
-
-      <TextArea
-        v-model="state.description"
-        :label="
-          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.LABEL')
-        "
-        :placeholder="
-          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.PLACEHOLDER')
-        "
-        :message="descriptionError"
-        :message-type="descriptionError ? 'error' : 'info'"
-        show-character-count
-      />
-      <Editor
-        v-model="state.instruction"
-        :label="
-          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.LABEL')
-        "
-        :placeholder="
-          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.PLACEHOLDER')
-        "
-        :message="instructionError"
-        :message-type="instructionError ? 'error' : 'info'"
-        :show-character-count="false"
-        enable-captain-tools
-      />
-      <div class="flex items-center gap-3">
-        <Button
-          faded
-          slate
-          sm
-          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.UPDATE.CANCEL')"
-          @click="toggleEditing(false)"
-        />
-        <Button
-          sm
-          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.UPDATE.UPDATE')"
-          @click="onClickUpdate"
-        />
-      </div>
-    </div>
-  </CardLayout>
-</template>

app/javascript/dashboard/components-next/captain/assistant/SuggestedRules.story.vue

@@ -1,46 +0,0 @@
-<script setup>
-import SuggestedRules from './SuggestedRules.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const guidelinesExample = [
-  {
-    content:
-      'Block queries that share or request sensitive personal information (e.g. phone numbers, passwords).',
-  },
-  {
-    content:
-      'Reject queries that include offensive, discriminatory, or threatening language.',
-  },
-  {
-    content:
-      'Deflect when the assistant is asked for legal or medical diagnosis or treatment.',
-  },
-];
-</script>
-
-<template>
-  <Story
-    title="Captain/Assistant/SuggestedRules"
-    :layout="{ type: 'grid', width: '800px' }"
-  >
-    <Variant title="Suggested Rules List">
-      <div class="px-20 py-4 bg-n-background">
-        <SuggestedRules
-          title="Example response guidelines"
-          :items="guidelinesExample"
-        >
-          <template #default="{ item }">
-            <span class="text-sm text-n-slate-12">{{ item.content }}</span>
-            <Button
-              label="Add this"
-              ghost
-              xs
-              slate
-              class="!text-sm !text-n-slate-11 flex-shrink-0"
-            />
-          </template>
-        </SuggestedRules>
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/captain/assistant/SuggestedRules.vue

@@ -1,63 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  items: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['add', 'close']);
-
-const { t } = useI18n();
-
-const onAddClick = () => {
-  emit('add');
-};
-
-const onClickClose = () => {
-  emit('close');
-};
-</script>
-
-<template>
-  <div
-    class="flex flex-col items-start self-stretch rounded-xl w-full overflow-hidden border border-dashed border-n-strong"
-  >
-    <div class="flex items-center justify-between w-full gap-3 px-4 pb-1 pt-4">
-      <div class="flex items-center gap-3">
-        <h5 class="text-sm font-medium text-n-slate-11">{{ title }}</h5>
-        <span class="h-3 w-px bg-n-weak" />
-        <Button
-          :label="t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.SUGGESTED.ADD')"
-          ghost
-          xs
-          slate
-          class="!text-sm !text-n-slate-11 flex-shrink-0"
-          @click="onAddClick"
-        />
-      </div>
-      <Button
-        ghost
-        xs
-        slate
-        icon="i-lucide-x"
-        class="!text-sm !text-n-slate-11 flex-shrink-0"
-        @click="onClickClose"
-      />
-    </div>
-    <div
-      class="flex flex-col items-start divide-y divide-n-strong divide-dashed w-full"
-    >
-      <div v-for="item in items" :key="item.content" class="w-full px-4 py-4">
-        <slot :item="item" />
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/captain/assistant/ToolsDropdown.story.vue

@@ -1,37 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import ToolsDropdown from './ToolsDropdown.vue';
-
-const items = [
-  {
-    id: 'order_search',
-    title: 'Order Search',
-    description: 'Lookup orders by customer ID, email, or order number',
-  },
-  {
-    id: 'refund_payment',
-    title: 'Refund Payment',
-    description: 'Initiates a refund on a specific payment',
-  },
-  {
-    id: 'fetch_customer',
-    title: 'Fetch Customer',
-    description: 'Pulls customer details (email, tags, last seen, etc.)',
-  },
-];
-
-const selectedIndex = ref(0);
-</script>
-
-<template>
-  <Story
-    title="Captain/Assistant/ToolsDropdown"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Default">
-      <div class="relative h-80 bg-n-background p-4">
-        <ToolsDropdown :items="items" :selected-index="selectedIndex" />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/captain/assistant/ToolsDropdown.vue

@@ -1,54 +0,0 @@
-<script setup>
-import { ref, watch, nextTick } from 'vue';
-
-const props = defineProps({
-  items: {
-    type: Array,
-    required: true,
-  },
-  selectedIndex: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const emit = defineEmits(['select']);
-
-const toolsDropdownRef = ref(null);
-
-const onItemClick = idx => emit('select', idx);
-
-watch(
-  () => props.selectedIndex,
-  () => {
-    nextTick(() => {
-      const el = toolsDropdownRef.value?.querySelector(
-        `#tool-item-${props.selectedIndex}`
-      );
-      if (el) {
-        el.scrollIntoView({ block: 'nearest', behavior: 'auto' });
-      }
-    });
-  },
-  { immediate: true }
-);
-</script>
-
-<template>
-  <div
-    ref="toolsDropdownRef"
-    class="w-[22.5rem] p-2 flex flex-col gap-1 z-50 absolute rounded-xl bg-n-alpha-3 shadow outline outline-1 outline-n-weak backdrop-blur-[50px] max-h-[20rem] overflow-y-auto"
-  >
-    <div
-      v-for="(tool, idx) in items"
-      :id="`tool-item-${idx}`"
-      :key="tool.id || idx"
-      :class="{ 'bg-n-alpha-black2': idx === selectedIndex }"
-      class="flex flex-col gap-1 rounded-md py-2 px-2 cursor-pointer hover:bg-n-alpha-black2"
-      @click="onItemClick(idx)"
-    >
-      <span class="text-n-slate-12 font-medium text-sm">{{ tool.title }}</span>
-      <span class="text-n-slate-11 text-sm">{{ tool.description }}</span>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue

@@ -35,7 +35,6 @@ const initialState = {
   productName: '',
   featureFaq: false,
   featureMemory: false,
-  featureCitation: false,
 };
 
 const state = reactive({ ...initialState });
@@ -71,7 +70,6 @@ const prepareAssistantDetails = () => ({
     product_name: state.productName,
     feature_faq: state.featureFaq,
     feature_memory: state.featureMemory,
-    feature_citation: state.featureCitation,
   },
 });
 
@@ -95,7 +93,6 @@ const updateStateFromAssistant = assistant => {
     productName: config.product_name,
     featureFaq: config.feature_faq || false,
     featureMemory: config.feature_memory || false,
-    featureCitation: config.feature_citation || false,
   });
 };
 
@@ -154,13 +151,6 @@ watch(
           {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
         </span>
       </label>
-
-      <label class="flex items-center gap-2">
-        <input v-model="state.featureCitation" type="checkbox" />
-        <span class="text-sm font-medium text-n-slate-12">
-          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CITATIONS') }}
-        </span>
-      </label>
     </fieldset>
 
     <div class="flex items-center justify-between w-full gap-3">

app/javascript/dashboard/components-next/captain/pageComponents/assistant/EditAssistantForm.vue

@@ -41,7 +41,6 @@ const initialState = {
   features: {
     conversationFaqs: false,
     memories: false,
-    citations: false,
   },
   temperature: 1,
 };
@@ -88,7 +87,6 @@ const updateStateFromAssistant = assistant => {
   state.features = {
     conversationFaqs: config.feature_faq || false,
     memories: config.feature_memory || false,
-    citations: config.feature_citation || false,
   };
   state.temperature = config.temperature || 1;
 };
@@ -154,7 +152,6 @@ const handleFeaturesUpdate = () => {
       ...props.assistant.config,
       feature_faq: state.features.conversationFaqs,
       feature_memory: state.features.memories,
-      feature_citation: state.features.citations,
     },
   };
 
@@ -303,19 +300,20 @@ watch(
               <input
                 v-model="state.features.conversationFaqs"
                 type="checkbox"
+                class="form-checkbox"
               />
               {{
                 t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS')
               }}
             </label>
             <label class="flex items-center gap-2">
-              <input v-model="state.features.memories" type="checkbox" />
+              <input
+                v-model="state.features.memories"
+                type="checkbox"
+                class="form-checkbox"
+              />
               {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
             </label>
-            <label class="flex items-center gap-2">
-              <input v-model="state.features.citations" type="checkbox" />
-              {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CITATIONS') }}
-            </label>
           </div>
         </div>