Merge branch 'release/4.0.0'

.circleci/config.yml

@@ -26,6 +26,12 @@ jobs:
           override-ci-command: pnpm i
       - run: node --version
       - run: pnpm --version
+      - run:
+          name: Add PostgreSQL repository and update
+          command: |
+            sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt/ $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
+            wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
+            sudo apt-get update -y
 
       - run:
           name: Install System Dependencies
@@ -34,7 +40,9 @@ jobs:
             DEBIAN_FRONTEND=noninteractive sudo apt-get install -y \
               libpq-dev \
               redis-server \
-              postgresql \
+              postgresql-common \
+              postgresql-16 \
+              postgresql-16-pgvector \
               build-essential \
               git \
               curl \

.codeclimate.yml

@@ -51,6 +51,7 @@ exclude_patterns:
   - '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'

.devcontainer/docker-compose.yml

@@ -40,7 +40,7 @@ services:
     network_mode: service:db
 
   db:
-    image: postgres:latest
+    image: pgvector/pgvector:pg16
     restart: unless-stopped
     volumes:
       - postgres-data:/var/lib/postgresql/data

.github/workflows/run_foss_spec.yml

@@ -1,9 +1,3 @@
-# #
-# # This action will strip the enterprise folder
-# # and run the spec.
-# # This is set to run against every PR.
-# #
-
 name: Run Chatwoot CE spec
 on:
   push:
@@ -18,7 +12,7 @@ jobs:
     runs-on: ubuntu-20.04
     services:
       postgres:
-        image: postgres:15.3
+        image: pgvector/pgvector:pg15
         env:
           POSTGRES_USER: postgres
           POSTGRES_PASSWORD: ''

.github/workflows/run_response_bot_spec.yml

@@ -1,89 +0,0 @@
-# #
-# # This workflow will run specs related to response bot
-# # This can only be activated in installations Where vector extension is available.
-# #
-
-name: Run Response Bot spec
-on:
-  push:
-    branches:
-      - develop
-      - master
-  pull_request:
-  workflow_dispatch:
-
-jobs:
-  test:
-    runs-on: ubuntu-20.04
-    services:
-      postgres:
-        image: ankane/pgvector
-        env:
-          POSTGRES_USER: postgres
-          POSTGRES_PASSWORD: ""
-          POSTGRES_DB: postgres
-          POSTGRES_HOST_AUTH_METHOD: trust
-        ports:
-          - 5432:5432
-        # needed because the postgres container does not provide a healthcheck
-        # tmpfs makes DB faster by using RAM
-        options: >-
-          --mount type=tmpfs,destination=/var/lib/postgresql/data
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-      redis:
-        image: redis
-        ports:
-          - 6379:6379
-        options: --entrypoint redis-server
-
-    steps:
-    - uses: actions/checkout@v4
-      with:
-        ref: ${{ github.event.pull_request.head.ref }}
-        repository: ${{ github.event.pull_request.head.repo.full_name }}
-
-    - uses: ruby/setup-ruby@v1
-      with:
-        bundler-cache: true # runs 'bundle install' and caches installed gems automatically
-
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 9.3.0
-
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20
-        cache: pnpm
-
-    - name: pnpm
-      run: pnpm install
-
-    - name: Create database
-      run: bundle exec rake db:create
-
-    - name: Seed database
-      run: bundle exec rake db:schema:load
-
-    - name: Enable ResponseBotService in installation
-      run: RAILS_ENV=test bundle exec rails runner "Features::ResponseBotService.new.enable_in_installation"
-
-    # Run  Response Bot specs
-    - name: Run backend tests
-      run: |
-        bundle exec rspec \
-          spec/enterprise/controllers/api/v1/accounts/response_sources_controller_spec.rb \
-          spec/enterprise/services/enterprise/message_templates/response_bot_service_spec.rb \
-          spec/enterprise/controllers/enterprise/api/v1/accounts/inboxes_controller_spec.rb:47 \
-          spec/enterprise/jobs/enterprise/account/conversations_resolution_scheduler_job_spec.rb \
-          --profile=10 \
-          --format documentation
-
-    - name: Upload rails log folder
-      uses: actions/upload-artifact@v4
-      if: always()
-      with:
-        name: rails-log-folder
-        path: log

Gemfile

@@ -175,6 +175,8 @@ gem 'pgvector'
 # Convert Website HTML to Markdown
 gem 'reverse_markdown'
 
+gem 'ruby-openai'
+
 ### Gems required only in specific deployment environments ###
 ##############################################################
 

Gemfile.lock

@@ -231,6 +231,7 @@ GEM
     erubi (1.13.0)
     et-orbi (1.2.11)
       tzinfo
+    event_stream_parser (1.0.0)
     execjs (2.8.1)
     facebook-messenger (2.0.1)
       httparty (~> 0.13, >= 0.13.7)
@@ -684,6 +685,10 @@ GEM
     rubocop-rspec (2.21.0)
       rubocop (~> 1.33)
       rubocop-capybara (~> 2.17)
+    ruby-openai (7.3.1)
+      event_stream_parser (>= 0.3.0, < 2.0.0)
+      faraday (>= 1)
+      faraday-multipart (>= 1)
     ruby-progressbar (1.13.0)
     ruby-vips (2.1.4)
       ffi (~> 1.12)
@@ -941,6 +946,7 @@ DEPENDENCIES
   rubocop-performance
   rubocop-rails
   rubocop-rspec
+  ruby-openai
   scout_apm
   scss_lint
   seed_dump

VERSION_CWCTL

@@ -1 +1 @@
-3.0.0
+3.1.0

app/actions/contact_merge_action.rb

@@ -54,7 +54,7 @@ class ContactMergeAction
     # attributes in base contact are given preference
     merged_attributes = mergee_contact_attributes.deep_merge(base_contact_attributes)
 
-    @mergee_contact.destroy!
+    @mergee_contact.reload.destroy!
     Rails.configuration.dispatcher.dispatch(CONTACT_MERGED, Time.zone.now, contact: @base_contact,
                                                                            tokens: [@base_contact.contact_inboxes.filter_map(&:pubsub_token)])
     @base_contact.update!(merged_attributes)

app/builders/notification_builder.rb

@@ -25,6 +25,8 @@ class NotificationBuilder
   def build_notification
     # Create conversation_creation notification only if user is subscribed to it
     return if notification_type == 'conversation_creation' && !user_subscribed_to_notification?
+    # skip notifications for blocked conversations except for user mentions
+    return if primary_actor.contact.blocked? && notification_type != 'conversation_mention'
 
     user.notifications.create!(
       notification_type: notification_type,

app/builders/v2/reports/agent_summary_builder.rb

@@ -2,52 +2,38 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
   pattr_initialize [:account!, :params!]
 
   def build
-    set_grouped_conversations_count
-    set_grouped_avg_reply_time
-    set_grouped_avg_first_response_time
-    set_grouped_avg_resolution_time
+    load_data
     prepare_report
   end
 
   private
 
-  def set_grouped_conversations_count
-    @grouped_conversations_count = Current.account.conversations.where(created_at: range).group('assignee_id').count
+  attr_reader :conversations_count, :resolved_count,
+              :avg_resolution_time, :avg_first_response_time, :avg_reply_time
+
+  def fetch_conversations_count
+    account.conversations.where(created_at: range).group('assignee_id').count
   end
 
-  def set_grouped_avg_resolution_time
-    @grouped_avg_resolution_time = get_grouped_average(reporting_events.where(name: 'conversation_resolved'))
+  def prepare_report
+    account.account_users.map do |account_user|
+      build_agent_stats(account_user)
+    end
   end
 
-  def set_grouped_avg_first_response_time
-    @grouped_avg_first_response_time = get_grouped_average(reporting_events.where(name: 'first_response'))
-  end
-
-  def set_grouped_avg_reply_time
-    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
+  def build_agent_stats(account_user)
+    user_id = account_user.user_id
+    {
+      id: user_id,
+      conversations_count: conversations_count[user_id] || 0,
+      resolved_conversations_count: resolved_count[user_id] || 0,
+      avg_resolution_time: avg_resolution_time[user_id],
+      avg_first_response_time: avg_first_response_time[user_id],
+      avg_reply_time: avg_reply_time[user_id]
+    }
   end
 
   def group_by_key
     :user_id
   end
-
-  def reporting_events
-    @reporting_events ||= Current.account.reporting_events.where(created_at: range)
-  end
-
-  def prepare_report
-    account.account_users.each_with_object([]) do |account_user, arr|
-      arr << {
-        id: account_user.user_id,
-        conversations_count: @grouped_conversations_count[account_user.user_id],
-        avg_resolution_time: @grouped_avg_resolution_time[account_user.user_id],
-        avg_first_response_time: @grouped_avg_first_response_time[account_user.user_id],
-        avg_reply_time: @grouped_avg_reply_time[account_user.user_id]
-      }
-    end
-  end
-
-  def average_value_key
-    ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :value_in_business_hours : :value
-  end
 end

app/builders/v2/reports/base_summary_builder.rb

@@ -1,17 +1,50 @@
 class V2::Reports::BaseSummaryBuilder
   include DateRangeHelper
 
+  def build
+    load_data
+    prepare_report
+  end
+
   private
 
+  def load_data
+    @conversations_count = fetch_conversations_count
+    @resolved_count = fetch_resolved_count
+    @avg_resolution_time = fetch_average_time('conversation_resolved')
+    @avg_first_response_time = fetch_average_time('first_response')
+    @avg_reply_time = fetch_average_time('reply_time')
+  end
+
+  def reporting_events
+    @reporting_events ||= account.reporting_events.where(created_at: range)
+  end
+
+  def fetch_conversations_count
+    # Override this method
+  end
+
+  def fetch_average_time(event_name)
+    get_grouped_average(reporting_events.where(name: event_name))
+  end
+
+  def fetch_resolved_count
+    reporting_events.where(name: 'conversation_resolved').group(group_by_key).count
+  end
+
   def group_by_key
     # Override this method
   end
 
+  def prepare_report
+    # Override this method
+  end
+
   def get_grouped_average(events)
     events.group(group_by_key).average(average_value_key)
   end
 
   def average_value_key
-    params[:business_hours].present? ? :value_in_business_hours : :value
+    ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :value_in_business_hours : :value
   end
 end

app/builders/v2/reports/inbox_summary_builder.rb

@@ -0,0 +1,50 @@
+class V2::Reports::InboxSummaryBuilder < V2::Reports::BaseSummaryBuilder
+  pattr_initialize [:account!, :params!]
+
+  def build
+    load_data
+    prepare_report
+  end
+
+  private
+
+  attr_reader :conversations_count, :resolved_count,
+              :avg_resolution_time, :avg_first_response_time, :avg_reply_time
+
+  def load_data
+    @conversations_count = fetch_conversations_count
+    @resolved_count = fetch_resolved_count
+    @avg_resolution_time = fetch_average_time('conversation_resolved')
+    @avg_first_response_time = fetch_average_time('first_response')
+    @avg_reply_time = fetch_average_time('reply_time')
+  end
+
+  def fetch_conversations_count
+    account.conversations.where(created_at: range).group(group_by_key).count
+  end
+
+  def prepare_report
+    account.inboxes.map do |inbox|
+      build_inbox_stats(inbox)
+    end
+  end
+
+  def build_inbox_stats(inbox)
+    {
+      id: inbox.id,
+      conversations_count: conversations_count[inbox.id] || 0,
+      resolved_conversations_count: resolved_count[inbox.id] || 0,
+      avg_resolution_time: avg_resolution_time[inbox.id],
+      avg_first_response_time: avg_first_response_time[inbox.id],
+      avg_reply_time: avg_reply_time[inbox.id]
+    }
+  end
+
+  def group_by_key
+    :inbox_id
+  end
+
+  def average_value_key
+    ActiveModel::Type::Boolean.new.cast(params[:business_hours]) ? :value_in_business_hours : :value
+  end
+end

app/builders/v2/reports/team_summary_builder.rb

@@ -1,49 +1,37 @@
 class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
   pattr_initialize [:account!, :params!]
 
-  def build
-    set_grouped_conversations_count
-    set_grouped_avg_reply_time
-    set_grouped_avg_first_response_time
-    set_grouped_avg_resolution_time
-    prepare_report
-  end
-
   private
 
-  def set_grouped_conversations_count
-    @grouped_conversations_count = Current.account.conversations.where(created_at: range).group('team_id').count
-  end
+  attr_reader :conversations_count, :resolved_count,
+              :avg_resolution_time, :avg_first_response_time, :avg_reply_time
 
-  def set_grouped_avg_resolution_time
-    @grouped_avg_resolution_time = get_grouped_average(reporting_events.where(name: 'conversation_resolved'))
-  end
-
-  def set_grouped_avg_first_response_time
-    @grouped_avg_first_response_time = get_grouped_average(reporting_events.where(name: 'first_response'))
-  end
-
-  def set_grouped_avg_reply_time
-    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
+  def fetch_conversations_count
+    account.conversations.where(created_at: range).group(:team_id).count
   end
 
   def reporting_events
-    @reporting_events ||= Current.account.reporting_events.where(created_at: range).joins(:conversation)
+    @reporting_events ||= account.reporting_events.where(created_at: range).joins(:conversation)
+  end
+
+  def prepare_report
+    account.teams.map do |team|
+      build_team_stats(team)
+    end
+  end
+
+  def build_team_stats(team)
+    {
+      id: team.id,
+      conversations_count: conversations_count[team.id] || 0,
+      resolved_conversations_count: resolved_count[team.id] || 0,
+      avg_resolution_time: avg_resolution_time[team.id],
+      avg_first_response_time: avg_first_response_time[team.id],
+      avg_reply_time: avg_reply_time[team.id]
+    }
   end
 
   def group_by_key
     'conversations.team_id'
   end
-
-  def prepare_report
-    account.teams.each_with_object([]) do |team, arr|
-      arr << {
-        id: team.id,
-        conversations_count: @grouped_conversations_count[team.id],
-        avg_resolution_time: @grouped_avg_resolution_time[team.id],
-        avg_first_response_time: @grouped_avg_first_response_time[team.id],
-        avg_reply_time: @grouped_avg_reply_time[team.id]
-      }
-    end
-  end
 end

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

@@ -1,78 +0,0 @@
-class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::BaseController
-  before_action :hook
-
-  def proxy
-    request_url = build_request_url(request_path)
-    response = HTTParty.send(request_method, request_url, body: permitted_params[:body].to_json, headers: headers)
-    render plain: response.body, status: response.code
-  end
-
-  def copilot
-    request_url = build_request_url(build_request_path("/assistants/#{hook.settings['assistant_id']}/copilot"))
-    params = {
-      previous_messages: copilot_params[:previous_messages],
-      conversation_history: conversation_history,
-      message: copilot_params[:message]
-    }
-    response = HTTParty.send(:post, request_url, body: params.to_json, headers: headers)
-    render plain: response.body, status: response.code
-  end
-
-  private
-
-  def headers
-    {
-      'X-User-Email' => hook.settings['account_email'],
-      'X-User-Token' => hook.settings['access_token'],
-      'Content-Type' => 'application/json',
-      'Accept' => '*/*'
-    }
-  end
-
-  def build_request_path(route)
-    "api/accounts/#{hook.settings['account_id']}#{route}"
-  end
-
-  def request_path
-    request_route = with_leading_hash_on_route(params[:route])
-
-    return 'api/sessions/profile' if request_route == '/sessions/profile'
-
-    build_request_path(request_route)
-  end
-
-  def build_request_url(request_path)
-    base_url = InstallationConfig.find_by(name: 'CAPTAIN_API_URL').value
-    URI.join(base_url, request_path).to_s
-  end
-
-  def hook
-    @hook ||= Current.account.hooks.find_by!(app_id: 'captain')
-  end
-
-  def request_method
-    method = permitted_params[:method].downcase
-    raise 'Invalid or missing HTTP method' unless %w[get post put patch delete options head].include?(method)
-
-    method
-  end
-
-  def with_leading_hash_on_route(request_route)
-    return '' if request_route.blank?
-
-    request_route.start_with?('/') ? request_route : "/#{request_route}"
-  end
-
-  def conversation_history
-    conversation = Current.account.conversations.find_by!(display_id: copilot_params[:conversation_id])
-    conversation.to_llm_text
-  end
-
-  def copilot_params
-    params.permit(:previous_messages, :conversation_id, :message)
-  end
-
-  def permitted_params
-    params.permit(:method, :route, body: {})
-  end
-end

app/controllers/api/v2/accounts/summary_reports_controller.rb

@@ -1,6 +1,6 @@
 class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseController
   before_action :check_authorization
-  before_action :prepare_builder_params, only: [:agent, :team]
+  before_action :prepare_builder_params, only: [:agent, :team, :inbox]
 
   def agent
     render_report_with(V2::Reports::AgentSummaryBuilder)
@@ -10,6 +10,10 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
     render_report_with(V2::Reports::TeamSummaryBuilder)
   end
 
+  def inbox
+    render_report_with(V2::Reports::InboxSummaryBuilder)
+  end
+
   private
 
   def check_authorization
@@ -26,8 +30,7 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
 
   def render_report_with(builder_class)
     builder = builder_class.new(account: Current.account, params: @builder_params)
-    data = builder.build
-    render json: data
+    render json: builder.build
   end
 
   def permitted_params

app/controllers/public/api/v1/portals/articles_controller.rb

@@ -7,9 +7,10 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def index
     @articles = @portal.articles.published
+    @articles_count = @articles.count
     search_articles
     order_by_sort_param
-    @articles.page(list_params[:page]) if list_params[:page].present?
+    @articles = @articles.page(list_params[:page]) if list_params[:page].present?
   end
 
   def show; end
@@ -44,7 +45,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
   end
 
   def list_params
-    params.permit(:query, :locale, :sort, :status)
+    params.permit(:query, :locale, :sort, :status, :page)
   end
 
   def permitted_params

app/dispatchers/async_dispatcher.rb

@@ -22,3 +22,5 @@ class AsyncDispatcher < BaseDispatcher
     ]
   end
 end
+
+AsyncDispatcher.prepend_mod_with('AsyncDispatcher')

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

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

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

@@ -0,0 +1,20 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class CaptainDocument extends ApiClient {
+  constructor() {
+    super('captain/documents', { accountScoped: true });
+  }
+
+  get({ page = 1, searchKey, assistantId } = {}) {
+    return axios.get(this.url, {
+      params: {
+        page,
+        searchKey,
+        assistant_id: assistantId,
+      },
+    });
+  }
+}
+
+export default new CaptainDocument();

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

@@ -0,0 +1,26 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class CaptainInboxes extends ApiClient {
+  constructor() {
+    super('captain/assistants', { accountScoped: true });
+  }
+
+  get({ assistantId } = {}) {
+    return axios.get(`${this.url}/${assistantId}/inboxes`);
+  }
+
+  create(params = {}) {
+    const { assistantId, inboxId } = params;
+    return axios.post(`${this.url}/${assistantId}/inboxes`, {
+      inbox: { inbox_id: inboxId },
+    });
+  }
+
+  delete(params = {}) {
+    const { assistantId, inboxId } = params;
+    return axios.delete(`${this.url}/${assistantId}/inboxes/${inboxId}`);
+  }
+}
+
+export default new CaptainInboxes();

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

@@ -0,0 +1,22 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class CaptainResponses extends ApiClient {
+  constructor() {
+    super('captain/assistant_responses', { accountScoped: true });
+  }
+
+  get({ page = 1, searchKey, assistantId, documentId, status } = {}) {
+    return axios.get(this.url, {
+      params: {
+        page,
+        searchKey,
+        assistant_id: assistantId,
+        document_id: documentId,
+        status,
+      },
+    });
+  }
+}
+
+export default new CaptainResponses();

app/javascript/dashboard/api/inbox/conversation.js

@@ -133,6 +133,10 @@ class ConversationApi extends ApiClient {
   getAllAttachments(conversationId) {
     return axios.get(`${this.url}/${conversationId}/attachments`);
   }
+
+  requestCopilot(conversationId, body) {
+    return axios.post(`${this.url}/${conversationId}/copilot`, body);
+  }
 }
 
 export default new ConversationApi();

app/javascript/dashboard/api/integrations.js

@@ -32,14 +32,6 @@ class IntegrationsAPI extends ApiClient {
   deleteHook(hookId) {
     return axios.delete(`${this.baseUrl()}/integrations/hooks/${hookId}`);
   }
-
-  requestCaptain(body) {
-    return axios.post(`${this.baseUrl()}/integrations/captain/proxy`, body);
-  }
-
-  requestCaptainCopilot(body) {
-    return axios.post(`${this.baseUrl()}/integrations/captain/copilot`, body);
-  }
 }
 
 export default new IntegrationsAPI();

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

@@ -124,6 +124,19 @@
     --teal-11: 0 133 115;
     --teal-12: 13 61 56;
 
+    --gray-1: 252 252 252;
+    --gray-2: 249 249 249;
+    --gray-3: 240 240 240;
+    --gray-4: 232 232 232;
+    --gray-5: 224 224 224;
+    --gray-6: 217 217 217;
+    --gray-7: 206 206 206;
+    --gray-8: 187 187 187;
+    --gray-9: 141 141 141;
+    --gray-10: 131 131 131;
+    --gray-11: 100 100 100;
+    --gray-12: 32 32 32;
+
     --background-color: 253 253 253;
     --text-blue: 8 109 224;
     --border-container: 236 236 236;
@@ -213,6 +226,19 @@
     --teal-11: 11 216 182;
     --teal-12: 173 240 221;
 
+    --gray-1: 17 17 17;
+    --gray-2: 25 25 25;
+    --gray-3: 34 34 34;
+    --gray-4: 42 42 42;
+    --gray-5: 49 49 49;
+    --gray-6: 58 58 58;
+    --gray-7: 72 72 72;
+    --gray-8: 96 96 96;
+    --gray-9: 110 110 110;
+    --gray-10: 123 123 123;
+    --gray-11: 180 180 180;
+    --gray-12: 238 238 238;
+
     --background-color: 18 18 19;
     --border-strong: 52 52 52;
     --border-weak: 38 38 42;
@@ -232,7 +258,7 @@
     --black-alpha-2: 0, 0, 0, 0.2;
     --border-blue: 39, 129, 246, 0.5;
     --border-container: 236, 236, 236, 0;
-    --white-alpha: 255, 255, 255, 0.8;
+    --white-alpha: 255, 255, 255, 0.1;
   }
   /* NEXT COLORS END */
 

app/javascript/dashboard/assets/scss/plugins/_dropdown.scss

@@ -1,7 +1,7 @@
 .dropdown-pane {
-  @apply border rounded-lg hidden relative invisible shadow-lg border-slate-25 dark:border-slate-700 box-content p-2 w-fit z-[9999];
+  @apply border rounded-lg hidden relative invisible shadow-lg border-n-strong dark:border-n-strong box-content p-2 w-fit z-[9999];
 
   &.dropdown-pane--open {
-    @apply bg-white absolute dark:bg-slate-800 block visible;
+    @apply bg-n-alpha-3 backdrop-blur-[100px] absolute  block visible;
   }
 }

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -31,7 +31,7 @@ button {
 }
 
 .button {
-  @apply items-center bg-woot-500 dark:bg-woot-500 px-2.5 text-white dark:text-white inline-flex h-10 mb-0 gap-2 font-medium;
+  @apply items-center bg-n-brand px-2.5 text-white dark:text-white inline-flex h-10 mb-0 gap-2 font-medium;
 
   .button__content {
     @apply w-full whitespace-nowrap overflow-hidden text-ellipsis;
@@ -42,8 +42,10 @@ button {
     }
   }
 
-  &:hover {
-    @apply bg-woot-600 dark:bg-woot-600;
+  &:hover:not(.secondary):not(.success):not(.alert):not(.warning):not(
+      .clear
+    ):not(.smooth):not(.hollow) {
+    @apply bg-n-brand/80 dark:bg-n-brand/80;
   }
 
   &:disabled,
@@ -52,23 +54,23 @@ button {
   }
 
   &.success {
-    @apply bg-[#44ce4b] dark:bg-[#44ce4b] text-white dark:text-white;
+    @apply bg-n-teal-9 text-white dark:text-white;
   }
 
   &.secondary {
-    @apply bg-slate-700 dark:bg-slate-600 text-white dark:text-white;
+    @apply bg-n-solid-3 text-white dark:text-white;
   }
 
   &.primary {
-    @apply bg-woot-500 dark:bg-woot-500 text-white dark:text-white;
+    @apply bg-n-brand text-white dark:text-white;
   }
 
   &.clear {
-    @apply text-woot-500 dark:text-woot-500 bg-transparent dark:bg-transparent;
+    @apply text-n-blue-text dark:text-n-blue-text bg-transparent dark:bg-transparent;
   }
 
   &.alert {
-    @apply bg-red-500 dark:bg-red-500 text-white dark:text-white;
+    @apply bg-n-ruby-9 text-white dark:text-white;
 
     &.clear {
       @apply bg-transparent dark:bg-transparent;
@@ -76,7 +78,7 @@ button {
   }
 
   &.warning {
-    @apply bg-[#ffc532] dark:bg-[#ffc532] text-white dark:text-white;
+    @apply bg-n-amber-9 text-white dark:text-white;
 
     &.clear {
       @apply bg-transparent dark:bg-transparent;
@@ -115,114 +117,74 @@ button {
   }
 
   &.hollow {
-    @apply border border-woot-500 bg-transparent dark:bg-transparent dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900;
+    @apply border border-n-brand/40 bg-transparent text-n-blue-text hover:bg-n-brand/20;
 
     &.secondary {
-      @apply text-slate-700 border-slate-100 dark:border-slate-800 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
+      @apply text-n-slate-12 border-n-slate-5 hover:bg-n-slate-5;
     }
 
     &.success {
-      @apply text-green-700 dark:text-green-400 border-green-100 dark:border-green-600 hover:bg-green-50 dark:hover:bg-green-800;
+      @apply text-n-teal-9 border-n-teal-8 hover:bg-n-teal-5;
     }
 
     &.alert {
-      @apply text-red-700 dark:text-red-400 border-red-100 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-800;
+      @apply text-n-ruby-9 border-n-ruby-8 hover:bg-n-ruby-5;
     }
 
     &.warning {
-      @apply text-yellow-600 dark:text-yellow-600 border-yellow-600 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-800;
-    }
-
-    &:hover {
-      @apply bg-woot-75 dark:bg-woot-800 border-slate-100 dark:border-woot-600 dark:text-woot-400;
-
-      &.secondary {
-        @apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
-      }
-
-      &.success {
-        @apply border-slate-100 dark:border-slate-700 text-green-800 dark:text-green-100;
-      }
-
-      &.alert {
-        @apply border-slate-100 dark:border-slate-700 text-red-700 dark:text-red-100;
-      }
-
-      &.warning {
-        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-500;
-      }
+      @apply text-n-amber-9 border-n-amber-8 hover:bg-n-amber-5;
     }
   }
 
   // Smooth style
   &.smooth {
-    @apply bg-woot-50 dark:bg-woot-800 text-woot-700 dark:text-woot-100 hover:text-woot-700 dark:hover:text-woot-700 hover:bg-woot-100 dark:hover:bg-woot-900;
+    @apply bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-text hover:bg-n-brand/20 dark:hover:bg-n-brand/40;
 
     &.secondary {
-      @apply bg-slate-50 dark:bg-slate-700 text-slate-700 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800;
+      @apply bg-n-slate-4 text-n-slate-11 hover:text-n-slate-11 hover:bg-n-slate-5;
     }
 
     &.success {
-      @apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
+      @apply bg-n-teal-4 text-n-teal-11 hover:text-n-teal-11 hover:bg-n-teal-5;
     }
 
     &.alert {
-      @apply bg-red-50 dark:bg-red-700 dark:bg-opacity-50 text-red-700 dark:text-red-100 hover:bg-red-100 dark:hover:bg-red-800 dark:hover:bg-opacity-30;
+      @apply bg-n-ruby-4 text-n-ruby-11 hover:text-n-ruby-11 hover:bg-n-ruby-5;
     }
 
     &.warning {
-      @apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-700 hover:bg-yellow-200 dark:hover:bg-yellow-200;
+      @apply bg-n-amber-4 text-n-amber-11 hover:text-n-amber-11 hover:bg-n-amber-5;
     }
   }
 
   &.clear {
-    @apply text-woot-500 dark:text-woot-500;
+    @apply text-n-blue-text hover:bg-n-brand/10 dark:hover:bg-n-brand/30;
 
     &.secondary {
-      @apply text-slate-700 dark:text-slate-100;
+      @apply text-n-slate-12 hover:bg-n-slate-4;
     }
 
     &.success {
-      @apply text-green-700 dark:text-green-100;
+      @apply text-n-teal-10 hover:bg-n-teal-4;
     }
 
     &.alert {
-      @apply text-red-700 dark:text-red-100;
+      @apply text-n-ruby-11 hover:bg-n-ruby-4;
     }
 
     &.warning {
-      @apply text-yellow-700 dark:text-yellow-600;
-    }
-
-    &:hover {
-      @apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
-
-      &.secondary {
-        @apply hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-800 dark:hover:text-slate-100;
-      }
-
-      &.success {
-        @apply hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
-      }
-
-      &.alert {
-        @apply hover:bg-red-50 dark:hover:bg-red-800 hover:text-red-700 dark:hover:text-red-100;
-      }
-
-      &.warning {
-        @apply hover:bg-yellow-100 dark:hover:bg-yellow-800 hover:text-yellow-700 dark:hover:text-yellow-600;
-      }
+      @apply text-n-amber-11 hover:bg-n-amber-4;
     }
 
     &:active {
       &.secondary {
-        @apply active:bg-slate-100 dark:active:bg-slate-900;
+        @apply active:bg-n-slate-3 dark:active:bg-n-slate-7;
       }
     }
 
     &:focus {
       &.secondary {
-        @apply focus:bg-slate-50 dark:focus:bg-slate-700;
+        @apply focus:bg-n-slate-4 dark:focus:bg-n-slate-6;
       }
     }
   }

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -3,7 +3,7 @@
 }
 
 .tabs--container--with-border {
-  @apply border-b border-slate-50 dark:border-slate-800/50;
+  @apply border-b border-n-weak;
 }
 
 .tabs--container--compact.tab--chat-type {
@@ -42,7 +42,7 @@
   @apply flex-shrink-0 my-0 mx-2;
 
   .badge {
-    @apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
+    @apply bg-n-alpha-black2 dark:bg-n-solid-3 rounded-md text-n-slate-11 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
   }
 
   &:first-child {
@@ -56,22 +56,22 @@
   &:hover,
   &:focus {
     a {
-      @apply text-slate-800 dark:text-slate-100;
+      @apply text-n-slate-12;
     }
   }
 
   a {
-    @apply flex items-center flex-row border-b py-2.5 select-none cursor-pointer border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative;
+    @apply flex items-center flex-row border-b py-2.5 select-none cursor-pointer border-transparent text-n-slate-11 text-sm top-[1px] relative;
     transition: border-color 0.15s $swift-ease-out-function;
   }
 
   &.is-active {
     a {
-      @apply border-b border-woot-500 text-woot-500 dark:text-woot-500;
+      @apply border-b border-n-brand text-n-blue-text;
     }
 
     .badge {
-      @apply bg-woot-50 dark:bg-woot-500 text-woot-500 dark:text-woot-50 dark:bg-opacity-40;
+      @apply bg-n-brand/10 dark:bg-n-brand/20 text-n-blue-text;
     }
   }
 }

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue

@@ -29,7 +29,7 @@ const getWrittenBy = note => {
   const isCurrentUser = note?.user?.id === currentUser.value.id;
   return isCurrentUser
     ? t('CONTACTS_LAYOUT.SIDEBAR.NOTES.YOU')
-    : note.user.name;
+    : note?.user?.name || 'Bot';
 };
 
 const onAdd = content => {

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue

@@ -33,8 +33,8 @@ const handleDelete = () => {
     <div class="flex items-center justify-between">
       <div class="flex items-center gap-1.5 py-2.5 min-w-0">
         <Avatar
-          :name="note.user.name"
-          :src="note.user.thumbnail"
+          :name="note?.user?.name || 'Bot'"
+          :src="note?.user?.thumbnail || '/assets/images/chatwoot_bot.png'"
           :size="16"
           rounded-full
         />

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

@@ -21,7 +21,7 @@ const lastNonActivityMessageContent = computed(() => {
     props.conversation;
   const { email: { subject } = {} } = customAttributes;
   return getPlainText(
-    subject || lastNonActivityMessage.content || t('CHAT_LIST.NO_CONTENT')
+    subject || lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT')
   );
 });
 

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
@@ -20,6 +20,8 @@ const props = defineProps({
 
 const { t } = useI18n();
 
+const slaCardLabelRef = ref(null);
+
 const { getPlainText } = useMessageFormatter();
 
 const lastNonActivityMessageContent = computed(() => {
@@ -27,7 +29,7 @@ const lastNonActivityMessageContent = computed(() => {
     props.conversation;
   const { email: { subject } = {} } = customAttributes;
   return getPlainText(
-    subject || lastNonActivityMessage.content || t('CHAT_LIST.NO_CONTENT')
+    subject || lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT')
   );
 });
 
@@ -45,7 +47,15 @@ const unreadMessagesCount = computed(() => {
   return unreadCount;
 });
 
-const hasSlaThreshold = computed(() => props.conversation?.slaPolicyId);
+const hasSlaThreshold = computed(() => {
+  return (
+    slaCardLabelRef.value?.hasSlaThreshold && props.conversation?.slaPolicyId
+  );
+});
+
+defineExpose({
+  hasSlaThreshold,
+});
 </script>
 
 <template>
@@ -73,7 +83,11 @@ const hasSlaThreshold = computed(() => props.conversation?.slaPolicyId);
           : 'grid-cols-[1fr_20px]'
       "
     >
-      <SLACardLabel v-if="hasSlaThreshold" :conversation="conversation" />
+      <SLACardLabel
+        v-show="hasSlaThreshold"
+        ref="slaCardLabelRef"
+        :conversation="conversation"
+      />
       <div v-if="hasSlaThreshold" class="w-px h-3 bg-n-slate-4" />
       <div class="overflow-hidden">
         <CardLabels

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { getInboxIconByType } from 'dashboard/helper/inbox';
 import { useRouter, useRoute } from 'vue-router';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper.js';
@@ -33,6 +33,8 @@ const props = defineProps({
 const router = useRouter();
 const route = useRoute();
 
+const cardMessagePreviewWithMetaRef = ref(null);
+
 const currentContact = computed(() => props.contact);
 
 const currentContactName = computed(() => currentContact.value?.name);
@@ -56,8 +58,10 @@ const lastActivityAt = computed(() => {
 });
 
 const showMessagePreviewWithoutMeta = computed(() => {
-  const { slaPolicyId, labels = [] } = props.conversation;
-  return !slaPolicyId && labels.length === 0;
+  const { labels = [] } = props.conversation;
+  return (
+    !cardMessagePreviewWithMetaRef.value?.hasSlaThreshold && labels.length === 0
+  );
 });
 
 const onCardClick = e => {
@@ -82,6 +86,7 @@ const onCardClick = e => {
 
 <template>
   <div
+    role="button"
     class="flex w-full gap-3 px-3 py-4 transition-all duration-300 ease-in-out cursor-pointer"
     @click="onCardClick"
   >
@@ -92,7 +97,7 @@ const onCardClick = e => {
       :status="currentContactStatus"
       rounded-full
     />
-    <div class="flex flex-col w-full gap-1">
+    <div class="flex flex-col w-full gap-1 min-w-0">
       <div class="flex items-center justify-between h-6 gap-2">
         <h4 class="text-base font-medium truncate text-n-slate-12">
           {{ currentContactName }}
@@ -114,11 +119,12 @@ const onCardClick = e => {
         </div>
       </div>
       <CardMessagePreview
-        v-if="showMessagePreviewWithoutMeta"
+        v-show="showMessagePreviewWithoutMeta"
         :conversation="conversation"
       />
       <CardMessagePreviewWithMeta
-        v-else
+        v-show="!showMessagePreviewWithoutMeta"
+        ref="cardMessagePreviewWithMetaRef"
         :conversation="conversation"
         :account-labels="accountLabels"
       />

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

@@ -31,13 +31,17 @@ const convertObjectCamelCaseToSnakeCase = object => {
 const appliedSLA = computed(() => props.conversation?.appliedSla);
 const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
 
+const hasSlaThreshold = computed(() => {
+  return slaStatus.value?.threshold && appliedSLA.value?.id;
+});
+
 const slaStatusText = computed(() => {
   return slaStatus.value?.type?.toUpperCase();
 });
 
 const updateSlaStatus = () => {
   slaStatus.value = evaluateSLAStatus({
-    appliedSla: convertObjectCamelCaseToSnakeCase(appliedSLA.value),
+    appliedSla: convertObjectCamelCaseToSnakeCase(appliedSLA.value || {}),
     chat: props.conversation,
   });
 };
@@ -61,6 +65,21 @@ onUnmounted(() => {
 });
 
 watch(() => props.conversation, updateSlaStatus);
+
+// This expose is to provide context to the parent component, so that it can decided weather
+// a new row has to be added to the conversation card or not
+// SLACardLabel > CardMessagePreviewWithMeta > ConversationCard
+//
+// We need to do this becuase each SLA card has it's own SLA timer
+// and it's just convenient to have this logic in the SLACardLabel component
+// However this is a bit hacky, and we should change this in the future
+//
+// TODO: A better implementation would be to have the timer as a shared composable, just like the provider pattern
+// we use across the next components. Have the calculation be done on the top ConversationCard component
+// and then the value be injected to the SLACardLabel component
+defineExpose({
+  hasSlaThreshold,
+});
 </script>
 
 <template>

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

@@ -41,6 +41,8 @@ const props = defineProps({
     default: 'info',
     validator: value => ['info', 'error', 'success'].includes(value),
   },
+  enableVariables: { type: Boolean, default: false },
+  enableCannedResponses: { type: Boolean, default: true },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -116,6 +118,8 @@ watch(
         :placeholder="placeholder"
         :focus-on-mount="focusOnMount"
         :disabled="disabled"
+        :enable-variables="enableVariables"
+        :enable-canned-responses="enableCannedResponses"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"

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

@@ -0,0 +1,248 @@
+<script setup>
+import { computed, ref, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { getInboxIconByType } from 'dashboard/helper/inbox';
+import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
+import {
+  snoozedReopenTimeToTimestamp,
+  shortenSnoozeTime,
+} from 'dashboard/helper/snoozeHelpers';
+import { NOTIFICATION_TYPES_MAPPING } from 'dashboard/routes/dashboard/inbox/helpers/InboxViewHelpers';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import CardPriorityIcon from 'dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue';
+import SLACardLabel from 'dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue';
+import InboxContextMenu from 'dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue';
+
+const props = defineProps({
+  inboxItem: { type: Object, default: () => ({}) },
+  stateInbox: { type: Object, default: () => ({}) },
+});
+
+const emit = defineEmits([
+  'click',
+  'contextMenuOpen',
+  'contextMenuClose',
+  'markNotificationAsRead',
+  'markNotificationAsUnRead',
+  'deleteNotification',
+]);
+
+const { t } = useI18n();
+
+const isContextMenuOpen = ref(false);
+const contextMenuPosition = ref({ x: null, y: null });
+const slaCardLabel = ref(null);
+
+const getMessageClasses = {
+  emphasis: 'text-sm font-medium text-n-slate-11',
+  emphasisUnread: 'text-sm font-medium text-n-slate-12',
+  normal: 'text-sm font-normal text-n-slate-11',
+  normalUnread: 'text-sm text-n-slate-12',
+};
+
+const primaryActor = computed(() => props.inboxItem?.primaryActor);
+const meta = computed(() => primaryActor.value?.meta);
+const assigneeMeta = computed(() => meta.value?.sender);
+const isUnread = computed(() => !props.inboxItem?.readAt);
+const inbox = computed(() => props.stateInbox);
+
+const inboxIcon = computed(() => {
+  const { phoneNumber, channelType } = inbox.value;
+  return getInboxIconByType(channelType, phoneNumber);
+});
+
+const hasSlaThreshold = computed(() => {
+  return slaCardLabel.value?.hasSlaThreshold && primaryActor.value?.slaPolicyId;
+});
+
+const lastActivityAt = computed(() => {
+  const timestamp = props.inboxItem?.lastActivityAt;
+  return timestamp ? shortTimestamp(dynamicTime(timestamp)) : '';
+});
+
+const menuItems = computed(() => [
+  { key: 'delete', label: t('INBOX.MENU_ITEM.DELETE') },
+  {
+    key: isUnread.value ? 'mark_as_read' : 'mark_as_unread',
+    label: t(`INBOX.MENU_ITEM.MARK_AS_${isUnread.value ? 'READ' : 'UNREAD'}`),
+  },
+]);
+
+const messageClasses = computed(() => ({
+  emphasis: isUnread.value
+    ? getMessageClasses.emphasisUnread
+    : getMessageClasses.emphasis,
+  normal: isUnread.value
+    ? getMessageClasses.normalUnread
+    : getMessageClasses.normal,
+}));
+
+const formatPushMessage = message => {
+  if (message.startsWith(': ')) {
+    return message.slice(2);
+  }
+
+  return message.replace(/^([^:]+):/g, (match, name) => {
+    return `<span class="${messageClasses.value.emphasis}">${name}:</span>`;
+  });
+};
+
+const formattedMessage = computed(() => {
+  const messageContent = `<span class="${messageClasses.value.normal}">${formatPushMessage(props.inboxItem?.pushMessageBody || '')}</span>`;
+
+  return isUnread.value
+    ? `<span class="inline-flex flex-shrink-0 w-2 h-2 mb-px rounded-full bg-n-iris-10 ltr:mr-1 rtl:ml-1"></span> ${messageContent}`
+    : messageContent;
+});
+
+const notificationDetails = computed(() => {
+  const type = props.inboxItem?.notificationType?.toUpperCase() || '';
+  const [icon = '', color = 'text-n-blue-text'] =
+    NOTIFICATION_TYPES_MAPPING[type] || [];
+  return { text: type ? t(`INBOX.TYPES_NEXT.${type}`) : '', icon, color };
+});
+
+const snoozedUntilTime = computed(() => {
+  const { snoozedUntil } = props.inboxItem;
+  if (!snoozedUntil) return null;
+  return shortenSnoozeTime(
+    dynamicTime(snoozedReopenTimeToTimestamp(snoozedUntil))
+  );
+});
+
+const hasLastSnoozed = computed(() => props.inboxItem?.meta?.lastSnoozedAt);
+
+const snoozedText = computed(() => {
+  return !hasLastSnoozed.value
+    ? t('INBOX.TYPES_NEXT.SNOOZED_UNTIL', {
+        time: shortTimestamp(snoozedUntilTime.value),
+      })
+    : t('INBOX.TYPES_NEXT.SNOOZED_ENDS');
+});
+
+const contextMenuActions = {
+  close: () => {
+    isContextMenuOpen.value = false;
+    contextMenuPosition.value = { x: null, y: null };
+    emit('contextMenuClose');
+  },
+  open: e => {
+    e.preventDefault();
+    contextMenuPosition.value = {
+      x: e.pageX || e.clientX,
+      y: e.pageY || e.clientY,
+    };
+    isContextMenuOpen.value = true;
+    emit('contextMenuOpen');
+  },
+  handle: key => {
+    const actions = {
+      mark_as_read: () => emit('markNotificationAsRead', props.inboxItem),
+      mark_as_unread: () => emit('markNotificationAsUnRead', props.inboxItem),
+      delete: () => emit('deleteNotification', props.inboxItem),
+    };
+    actions[key]?.();
+  },
+};
+
+onBeforeMount(contextMenuActions.close);
+</script>
+
+<template>
+  <div
+    role="button"
+    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')"
+  >
+    <div class="flex items-start gap-2">
+      <Avatar
+        :name="assigneeMeta.name"
+        :src="assigneeMeta.thumbnail"
+        :size="20"
+        rounded-full
+        class="mt-1"
+      />
+      <p v-dompurify-html="formattedMessage" class="mb-0 line-clamp-2" />
+    </div>
+    <div class="flex items-center justify-between h-6 gap-2">
+      <div class="flex items-center flex-1 min-w-0 gap-1">
+        <div
+          v-if="snoozedUntilTime || hasLastSnoozed"
+          class="flex items-center w-full min-w-0 gap-2 ltr:pl-1 rtl:pr-1"
+        >
+          <Icon
+            :icon="
+              !hasLastSnoozed
+                ? 'i-lucide-alarm-clock-plus'
+                : 'i-lucide-alarm-clock-off'
+            "
+            class="flex-shrink-0 size-4"
+            :class="!isUnread ? 'text-n-slate-11' : 'text-n-blue-text'"
+          />
+          <span
+            class="text-xs font-medium truncate"
+            :class="!isUnread ? 'text-n-slate-11' : 'text-n-blue-text'"
+          >
+            {{ snoozedText }}
+          </span>
+        </div>
+        <div
+          v-else-if="notificationDetails.text"
+          class="flex items-center w-full min-w-0 gap-2 ltr:pl-1 rtl:pr-1"
+        >
+          <Icon
+            :icon="notificationDetails.icon"
+            :class="isUnread ? notificationDetails.color : 'text-n-slate-11'"
+            class="flex-shrink-0 size-4"
+          />
+          <span
+            class="text-xs font-medium truncate"
+            :class="isUnread ? notificationDetails.color : 'text-n-slate-11'"
+          >
+            {{ notificationDetails.text }}
+          </span>
+        </div>
+      </div>
+      <div class="flex items-center flex-shrink-0 gap-2">
+        <SLACardLabel
+          v-show="hasSlaThreshold"
+          ref="slaCardLabel"
+          :conversation="primaryActor"
+          class="[&>span]:text-xs"
+          :class="
+            !isUnread && '[&>span]:text-n-slate-11 [&>div>svg]:fill-n-slate-11'
+          "
+        />
+        <div v-if="hasSlaThreshold" class="w-px h-3 rounded-sm bg-n-slate-4" />
+        <CardPriorityIcon
+          v-if="primaryActor?.priority"
+          :priority="primaryActor?.priority"
+          class="[&>svg]:size-4"
+        />
+        <div
+          v-if="inboxIcon"
+          v-tooltip.left="inbox?.name"
+          class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-4"
+        >
+          <Icon
+            :icon="inboxIcon"
+            class="flex-shrink-0 text-n-slate-11 size-2.5"
+          />
+        </div>
+        <span class="text-sm text-n-slate-10">
+          {{ lastActivityAt }}
+        </span>
+      </div>
+    </div>
+    <InboxContextMenu
+      v-if="isContextMenuOpen"
+      :context-menu-position="contextMenuPosition"
+      :menu-items="menuItems"
+      @close="contextMenuActions.close"
+      @select-action="contextMenuActions.handle"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/Label/AddLabel.vue

@@ -21,7 +21,7 @@ const showDropdown = ref(false);
 <template>
   <div class="relative">
     <button
-      class="flex items-center gap-1 px-2 py-1 rounded-md outline-dashed h-[26px] outline-1 outline-n-slate-6 hover:bg-n-alpha-2"
+      class="flex items-center gap-1 px-2 py-1 rounded-md outline-dashed h-6 outline-1 outline-n-slate-6 hover:bg-n-alpha-2"
       :class="{ 'bg-n-alpha-2': showDropdown }"
       @click="showDropdown = !showDropdown"
     >

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

@@ -2,6 +2,7 @@
 import { ref, computed, onMounted, watch } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import { vOnClickOutside } from '@vueuse/components';
 import { useAlert } from 'dashboard/composables';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
@@ -30,6 +31,8 @@ const props = defineProps({
 const store = useStore();
 const { t } = useI18n();
 
+const { fetchSignatureFlagFromUISettings } = useUISettings();
+
 const contacts = ref([]);
 const selectedContact = ref(null);
 const targetInbox = ref(null);
@@ -43,6 +46,11 @@ const contactsUiFlags = useMapGetter('contacts/getUIFlags');
 const currentUser = useMapGetter('getCurrentUser');
 const globalConfig = useMapGetter('globalConfig/get');
 const uiFlags = useMapGetter('contactConversations/getUIFlags');
+const messageSignature = useMapGetter('getMessageSignature');
+
+const sendWithSignature = computed(() =>
+  fetchSignatureFlagFromUISettings(targetInbox.value?.channelType)
+);
 
 const directUploadsEnabled = computed(
   () => globalConfig.value.directUploadsEnabled
@@ -181,7 +189,10 @@ useKeyboardEvents(keyboardEvents);
 <template>
   <div
     v-on-click-outside="() => (showComposeNewConversation = false)"
-    class="relative z-40"
+    class="relative"
+    :class="{
+      'z-40': showComposeNewConversation,
+    }"
   >
     <slot
       name="trigger"
@@ -202,6 +213,8 @@ useKeyboardEvents(keyboardEvents);
       :contact-conversations-ui-flags="uiFlags"
       :contacts-ui-flags="contactsUiFlags"
       :class="composePopoverClass"
+      :message-signature="messageSignature"
+      :send-with-signature="sendWithSignature"
       @search-contacts="onContactSearch"
       @reset-contact-search="resetContacts"
       @update-selected-contact="handleSelectedContact"

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

@@ -1,6 +1,5 @@
 <script setup>
-import { defineAsyncComponent, ref, computed } from 'vue';
-import { useMapGetter } from 'dashboard/composables/store';
+import { defineAsyncComponent, ref, computed, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useFileUpload } from 'dashboard/composables/useFileUpload';
@@ -8,51 +7,24 @@ import { vOnClickOutside } from '@vueuse/components';
 import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import FileUpload from 'vue-upload-component';
+import { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import WhatsAppOptions from './WhatsAppOptions.vue';
 
 const props = defineProps({
-  attachedFiles: {
-    type: Array,
-    default: () => [],
-  },
-  isWhatsappInbox: {
-    type: Boolean,
-    default: false,
-  },
-  isEmailOrWebWidgetInbox: {
-    type: Boolean,
-    default: false,
-  },
-  isTwilioSmsInbox: {
-    type: Boolean,
-    default: false,
-  },
-  messageTemplates: {
-    type: Array,
-    default: () => [],
-  },
-  channelType: {
-    type: String,
-    default: '',
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-  disableSendButton: {
-    type: Boolean,
-    default: false,
-  },
-  hasNoInbox: {
-    type: Boolean,
-    default: false,
-  },
-  isDropdownActive: {
-    type: Boolean,
-    default: false,
-  },
+  attachedFiles: { type: Array, default: () => [] },
+  isWhatsappInbox: { type: Boolean, default: false },
+  isEmailOrWebWidgetInbox: { type: Boolean, default: false },
+  isTwilioSmsInbox: { type: Boolean, default: false },
+  messageTemplates: { type: Array, default: () => [] },
+  channelType: { type: String, default: '' },
+  isLoading: { type: Boolean, default: false },
+  disableSendButton: { type: Boolean, default: false },
+  hasSelectedInbox: { type: Boolean, default: false },
+  hasNoInbox: { type: Boolean, default: false },
+  isDropdownActive: { type: Boolean, default: false },
+  messageSignature: { type: String, default: '' },
 });
 
 const emit = defineEmits([
@@ -74,8 +46,11 @@ const EmojiInput = defineAsyncComponent(
   () => import('shared/components/emoji/EmojiInput.vue')
 );
 
-const messageSignature = useMapGetter('getMessageSignature');
-const signatureToApply = computed(() => messageSignature.value);
+const signatureToApply = computed(() =>
+  props.isEmailOrWebWidgetInbox
+    ? props.messageSignature
+    : extractTextFromMarkdown(props.messageSignature)
+);
 
 const {
   fetchSignatureFlagFromUISettings,
@@ -87,13 +62,9 @@ const sendWithSignature = computed(() => {
   return fetchSignatureFlagFromUISettings(props.channelType);
 });
 
-const isSignatureEnabledForInbox = computed(() => {
-  return props.isEmailOrWebWidgetInbox && sendWithSignature.value;
-});
-
 const setSignature = () => {
   if (signatureToApply.value) {
-    if (isSignatureEnabledForInbox.value) {
+    if (sendWithSignature.value) {
       emit('addSignature', signatureToApply.value);
     } else {
       emit('removeSignature', signatureToApply.value);
@@ -106,6 +77,18 @@ const toggleMessageSignature = () => {
   setSignature();
 };
 
+// Added this watch to dynamically set signature.
+// Only targetInbox has value and is Advance Editor(used by isEmailOrWebWidgetInbox)
+// Set the signature only if the inbox based flag is true
+watch(
+  () => props.hasSelectedInbox,
+  newValue => {
+    nextTick(() => {
+      if (newValue && props.isEmailOrWebWidgetInbox) setSignature();
+    });
+  }
+);
+
 const onClickInsertEmoji = emoji => {
   emit('insertEmoji', emoji);
 };
@@ -213,7 +196,7 @@ useKeyboardEvents(keyboardEvents);
         />
       </FileUpload>
       <Button
-        v-if="isEmailOrWebWidgetInbox"
+        v-if="hasSelectedInbox && !isWhatsappInbox"
         icon="i-lucide-signature"
         color="slate"
         size="sm"

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

@@ -6,6 +6,7 @@ import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import {
   appendSignature,
   removeSignature,
+  extractTextFromMarkdown,
 } from 'dashboard/helper/editorHelper';
 import {
   buildContactableInboxesList,
@@ -33,6 +34,8 @@ const props = defineProps({
   isDirectUploadsEnabled: { type: Boolean, default: false },
   contactConversationsUiFlags: { type: Object, default: null },
   contactsUiFlags: { type: Object, default: null },
+  messageSignature: { type: String, default: '' },
+  sendWithSignature: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -184,6 +187,14 @@ const handleInboxAction = ({ value, action, ...rest }) => {
 
 const removeTargetInbox = value => {
   v$.value.$reset();
+  // Remove the signature from message content
+  // Based on the Advance Editor (used in isEmailOrWebWidget) and Plain editor(all other inboxes except WhatsApp)
+  if (props.sendWithSignature) {
+    const signatureToRemove = inboxTypes.value.isEmailOrWebWidget
+      ? props.messageSignature
+      : extractTextFromMarkdown(props.messageSignature);
+    state.message = removeSignature(state.message, signatureToRemove);
+  }
   emit('updateTargetInbox', value);
   state.attachedFiles = [];
 };
@@ -302,6 +313,8 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
     <MessageEditor
       v-if="!inboxTypes.isWhatsapp && !showNoInboxAlert"
       v-model="state.message"
+      :message-signature="messageSignature"
+      :send-with-signature="sendWithSignature"
       :is-email-or-web-widget-inbox="inboxTypes.isEmailOrWebWidget"
       :has-errors="validationStates.isMessageInvalid"
       :has-attachments="state.attachedFiles.length > 0"
@@ -322,8 +335,10 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
       :channel-type="inboxChannelType"
       :is-loading="isCreating"
       :disable-send-button="isCreating"
+      :has-selected-inbox="!!targetInbox"
       :has-no-inbox="showNoInboxAlert"
       :is-dropdown-active="isAnyDropdownActive"
+      :message-signature="messageSignature"
       @insert-emoji="onClickInsertEmoji"
       @add-signature="handleAddSignature"
       @remove-signature="handleRemoveSignature"

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

@@ -1,22 +1,22 @@
 <script setup>
+import { ref, watch, computed, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
+import {
+  appendSignature,
+  extractTextFromMarkdown,
+  removeSignature,
+} from 'dashboard/helper/editorHelper';
 
 import Editor from 'dashboard/components-next/Editor/Editor.vue';
 import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import CannedResponse from 'dashboard/components/widgets/conversation/CannedResponse.vue';
 
-defineProps({
-  isEmailOrWebWidgetInbox: {
-    type: Boolean,
-    required: true,
-  },
-  hasErrors: {
-    type: Boolean,
-    default: false,
-  },
-  hasAttachments: {
-    type: Boolean,
-    default: false,
-  },
+const props = defineProps({
+  isEmailOrWebWidgetInbox: { type: Boolean, required: true },
+  hasErrors: { type: Boolean, default: false },
+  hasAttachments: { type: Boolean, default: false },
+  sendWithSignature: { type: Boolean, default: false },
+  messageSignature: { type: String, default: '' },
 });
 
 const { t } = useI18n();
@@ -25,41 +25,98 @@ const modelValue = defineModel({
   type: String,
   default: '',
 });
+
+const state = ref({
+  hasSlashCommand: false,
+  showMentions: false,
+  mentionSearchKey: '',
+});
+
+const plainTextSignature = computed(() =>
+  extractTextFromMarkdown(props.messageSignature)
+);
+
+watch(
+  modelValue,
+  newValue => {
+    if (props.isEmailOrWebWidgetInbox) return;
+
+    const bodyWithoutSignature = newValue
+      ? removeSignature(newValue, plainTextSignature.value)
+      : '';
+
+    // Check if message starts with slash
+    const startsWithSlash = bodyWithoutSignature.startsWith('/');
+
+    // Update slash command and mentions state
+    state.value = {
+      ...state.value,
+      hasSlashCommand: startsWithSlash,
+      showMentions: startsWithSlash,
+      mentionSearchKey: startsWithSlash ? bodyWithoutSignature.slice(1) : '',
+    };
+  },
+  { immediate: true }
+);
+
+const hideMention = () => {
+  state.value.showMentions = false;
+};
+
+const replaceText = async message => {
+  // Only append signature on replace if sendWithSignature is true
+  const finalMessage = props.sendWithSignature
+    ? appendSignature(message, plainTextSignature.value)
+    : message;
+
+  await nextTick();
+  modelValue.value = finalMessage;
+};
 </script>
 
 <template>
-  <div
-    v-if="isEmailOrWebWidgetInbox"
-    class="flex-1 h-full"
-    :class="!hasAttachments && 'min-h-[200px]'"
-  >
-    <Editor
-      v-model="modelValue"
-      :placeholder="
-        t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
-      "
-      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[200px]"
-      :class="
-        hasErrors
-          ? '[&_.empty-node]:before:!text-n-ruby-9 [&_.empty-node]:dark:before:!text-n-ruby-9'
-          : ''
-      "
-      :show-character-count="false"
-    />
-  </div>
-  <div v-else class="flex-1 h-full" :class="!hasAttachments && 'min-h-[200px]'">
-    <TextArea
-      v-model="modelValue"
-      :placeholder="
-        t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
-      "
-      class="!px-0 [&>div]:!px-4 [&>div]:!border-transparent [&>div]:!bg-transparent"
-      auto-height
-      :custom-text-area-class="
-        hasErrors
-          ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
-          : ''
-      "
-    />
+  <div class="flex-1 h-full" :class="[!hasAttachments && 'min-h-[200px]']">
+    <template v-if="isEmailOrWebWidgetInbox">
+      <Editor
+        v-model="modelValue"
+        :placeholder="
+          t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
+        "
+        class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[200px]"
+        :class="
+          hasErrors
+            ? '[&_.empty-node]:before:!text-n-ruby-9 [&_.empty-node]:dark:before:!text-n-ruby-9'
+            : ''
+        "
+        enable-variables
+        :show-character-count="false"
+      />
+    </template>
+    <template v-else>
+      <TextArea
+        v-model="modelValue"
+        :placeholder="
+          t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
+        "
+        class="!px-0 [&>div]:!px-4 [&>div]:!border-transparent [&>div]:!bg-transparent"
+        :custom-text-area-class="
+          hasErrors
+            ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
+            : ''
+        "
+        auto-height
+        allow-signature
+        :signature="messageSignature"
+        :send-with-signature="sendWithSignature"
+      >
+        <CannedResponse
+          v-if="state.showMentions && state.hasSlashCommand"
+          v-on-clickaway="hideMention"
+          class="normal-editor__canned-box"
+          :search-key="state.mentionSearchKey"
+          @replace="replaceText"
+        />
+      </TextArea>
+    </template>
   </div>
 </template>

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

@@ -174,7 +174,7 @@ watch(
 </script>
 
 <template>
-  <span class="relative inline-flex group/avatar" :style="containerStyles">
+  <span class="relative inline-flex group/avatar z-0" :style="containerStyles">
     <!-- Status Badge -->
     <slot name="badge" :size="size">
       <div

app/javascript/dashboard/components-next/button/Button.vue

@@ -6,6 +6,7 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 import {
   VARIANT_OPTIONS,
   COLOR_OPTIONS,
+  JUSTIFY_OPTIONS,
   SIZE_OPTIONS,
   EXCLUDED_ATTRS,
 } from './constants.js';
@@ -27,6 +28,11 @@ const props = defineProps({
     default: null,
     validator: value => SIZE_OPTIONS.includes(value) || value === null,
   },
+  justify: {
+    type: String,
+    default: null,
+    validator: value => JUSTIFY_OPTIONS.includes(value) || value === null,
+  },
   icon: { type: [String, Object, Function], default: '' },
   trailingIcon: { type: Boolean, default: false },
   isLoading: { type: Boolean, default: false },
@@ -81,6 +87,15 @@ const computedSize = computed(() => {
   return 'md';
 });
 
+const computedJustify = computed(() => {
+  if (props.justify) return props.justify;
+  if (attrs.start || attrs.start === '') return 'start';
+  if (attrs.center || attrs.center === '') return 'center';
+  if (attrs.end || attrs.end === '') return 'end';
+
+  return 'center';
+});
+
 const STYLE_CONFIG = {
   colors: {
     blue: {
@@ -151,7 +166,12 @@ const STYLE_CONFIG = {
     md: 'text-sm font-medium',
     lg: 'text-base',
   },
-  base: 'inline-flex items-center justify-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
+  justify: {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+  },
+  base: 'inline-flex items-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
 };
 
 const variantClasses = computed(() => {
@@ -197,6 +217,7 @@ const linkButtonClasses = computed(() => {
       [STYLE_CONFIG.base]: true,
       [isLink ? linkButtonClasses : buttonClasses]: true,
       [STYLE_CONFIG.fontSize[computedSize]]: true,
+      [STYLE_CONFIG.justify[computedJustify]]: true,
       'flex-row-reverse': trailingIcon && !isIconOnly,
     }"
   >

app/javascript/dashboard/components-next/button/constants.js

@@ -1,6 +1,7 @@
 export const VARIANT_OPTIONS = ['solid', 'outline', 'faded', 'link', 'ghost'];
 export const COLOR_OPTIONS = ['blue', 'ruby', 'amber', 'slate', 'teal'];
 export const SIZE_OPTIONS = ['xs', 'sm', 'md', 'lg'];
+export const JUSTIFY_OPTIONS = ['start', 'center', 'end'];
 
 export const EXCLUDED_ATTRS = [
   'variant',
@@ -12,4 +13,5 @@ export const EXCLUDED_ATTRS = [
   ...VARIANT_OPTIONS,
   ...COLOR_OPTIONS,
   ...SIZE_OPTIONS,
+  ...JUSTIFY_OPTIONS,
 ];

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

@@ -0,0 +1,84 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
+
+defineProps({
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  totalCount: {
+    type: Number,
+    default: 100,
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 25,
+  },
+  headerTitle: {
+    type: String,
+    default: '',
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+  showPaginationFooter: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(['click', 'close', 'update:currentPage']);
+
+const handleButtonClick = () => {
+  emit('click');
+};
+
+const handlePageChange = event => {
+  emit('update:currentPage', event);
+};
+</script>
+
+<template>
+  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
+    <header class="sticky top-0 z-10 px-6 xl:px-0">
+      <div class="w-full max-w-[960px] mx-auto">
+        <div
+          class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
+        >
+          <span class="text-xl font-medium text-n-slate-12">
+            {{ headerTitle }}
+            <slot name="headerTitle" />
+          </span>
+          <div
+            v-on-clickaway="() => emit('close')"
+            class="relative group/campaign-button"
+          >
+            <Button
+              :label="buttonLabel"
+              icon="i-lucide-plus"
+              size="sm"
+              class="group-hover/campaign-button:brightness-110"
+              @click="handleButtonClick"
+            />
+            <slot name="action" />
+          </div>
+        </div>
+      </div>
+    </header>
+    <main class="flex-1 px-6 overflow-y-auto xl:px-0">
+      <div class="w-full max-w-[960px] mx-auto py-4">
+        <slot name="default" />
+      </div>
+    </main>
+    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
+      <PaginationFooter
+        :current-page="currentPage"
+        :total-items="totalCount"
+        :items-per-page="itemsPerPage"
+        @update:current-page="handlePageChange"
+      />
+    </footer>
+  </section>
+</template>

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

@@ -0,0 +1,27 @@
+<script setup>
+import AssistantCard from './AssistantCard.vue';
+import { assistantsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
+</script>
+
+<template>
+  <Story
+    title="Captain/Assistant/AssistantCard"
+    :layout="{ type: 'grid', width: '700px' }"
+  >
+    <Variant title="Assistant Card">
+      <div
+        v-for="(assistant, index) in assistantsList"
+        :key="index"
+        class="px-20 py-4 bg-white dark:bg-slate-900"
+      >
+        <AssistantCard
+          :id="assistant.id"
+          :name="assistant.name"
+          :description="assistant.description"
+          :updated-at="assistant.updated_at || assistant.created_at"
+          :created-at="assistant.created_at"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

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

@@ -0,0 +1,101 @@
+<script setup>
+import { computed } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  updatedAt: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['action']);
+
+const { t } = useI18n();
+
+const [showActionsDropdown, toggleDropdown] = useToggle();
+
+const menuItems = computed(() => [
+  {
+    label: t('CAPTAIN.ASSISTANTS.OPTIONS.VIEW_CONNECTED_INBOXES'),
+    value: 'viewConnectedInboxes',
+    action: 'viewConnectedInboxes',
+    icon: 'i-lucide-link',
+  },
+  {
+    label: t('CAPTAIN.ASSISTANTS.OPTIONS.EDIT_ASSISTANT'),
+    value: 'edit',
+    action: 'edit',
+    icon: 'i-lucide-pencil-line',
+  },
+  {
+    label: t('CAPTAIN.ASSISTANTS.OPTIONS.DELETE_ASSISTANT'),
+    value: 'delete',
+    action: 'delete',
+    icon: 'i-lucide-trash',
+  },
+]);
+
+const lastUpdatedAt = computed(() => dynamicTime(props.updatedAt));
+
+const handleAction = ({ action, value }) => {
+  toggleDropdown(false);
+  emit('action', { action, value, id: props.id });
+};
+</script>
+
+<template>
+  <CardLayout>
+    <div class="flex justify-between w-full gap-1">
+      <span class="text-base text-n-slate-12 line-clamp-1">
+        {{ name }}
+      </span>
+      <div class="flex items-center gap-2">
+        <div
+          v-on-clickaway="() => toggleDropdown(false)"
+          class="relative flex items-center group"
+        >
+          <Button
+            icon="i-lucide-ellipsis-vertical"
+            color="slate"
+            size="xs"
+            class="rounded-md group-hover:bg-n-alpha-2"
+            @click="toggleDropdown()"
+          />
+          <DropdownMenu
+            v-if="showActionsDropdown"
+            :menu-items="menuItems"
+            class="mt-1 ltr:right-0 rtl:left-0 top-full"
+            @action="handleAction($event)"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="flex items-center justify-between w-full gap-4">
+      <span class="text-sm truncate text-n-slate-11">
+        {{ description || 'Description not available' }}
+      </span>
+      <span class="text-sm text-n-slate-11 line-clamp-1 shrink-0">
+        {{ lastUpdatedAt }}
+      </span>
+    </div>
+  </CardLayout>
+</template>

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

@@ -0,0 +1,27 @@
+<script setup>
+import DocumentCard from './DocumentCard.vue';
+import { documentsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
+</script>
+
+<template>
+  <Story
+    title="Captain/Assistant/DocumentCard"
+    :layout="{ type: 'grid', width: '700px' }"
+  >
+    <Variant title="Document Card">
+      <div
+        v-for="(doc, index) in documentsList"
+        :key="index"
+        class="px-20 py-4 bg-white dark:bg-slate-900"
+      >
+        <DocumentCard
+          :id="doc.id"
+          :name="doc.name"
+          :external-link="doc.external_link"
+          :assistant="doc.assistant"
+          :created-at="doc.created_at"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

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

@@ -0,0 +1,108 @@
+<script setup>
+import { computed } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  assistant: {
+    type: Object,
+    default: () => ({}),
+  },
+  externalLink: {
+    type: String,
+    required: true,
+  },
+  createdAt: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['action']);
+
+const { t } = useI18n();
+
+const [showActionsDropdown, toggleDropdown] = useToggle();
+
+const menuItems = computed(() => [
+  {
+    label: t('CAPTAIN.DOCUMENTS.OPTIONS.VIEW_RELATED_RESPONSES'),
+    value: 'viewRelatedQuestions',
+    action: 'viewRelatedQuestions',
+    icon: 'i-ph-tree-view-duotone',
+  },
+  {
+    label: t('CAPTAIN.DOCUMENTS.OPTIONS.DELETE_DOCUMENT'),
+    value: 'delete',
+    action: 'delete',
+    icon: 'i-lucide-trash',
+  },
+]);
+
+const createdAt = computed(() => dynamicTime(props.createdAt));
+
+const handleAction = ({ action, value }) => {
+  toggleDropdown(false);
+  emit('action', { action, value, id: props.id });
+};
+</script>
+
+<template>
+  <CardLayout>
+    <div class="flex justify-between w-full gap-1">
+      <span class="text-base text-n-slate-12 line-clamp-1">
+        {{ name }}
+      </span>
+      <div class="flex items-center gap-2">
+        <div
+          v-on-clickaway="() => toggleDropdown(false)"
+          class="relative flex items-center group"
+        >
+          <Button
+            icon="i-lucide-ellipsis-vertical"
+            color="slate"
+            size="xs"
+            class="rounded-md group-hover:bg-n-alpha-2"
+            @click="toggleDropdown()"
+          />
+          <DropdownMenu
+            v-if="showActionsDropdown"
+            :menu-items="menuItems"
+            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full"
+            @action="handleAction($event)"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="flex items-center justify-between w-full gap-4">
+      <span
+        class="text-sm shrink-0 truncate text-n-slate-11 flex items-center gap-1"
+      >
+        <i class="i-woot-captain" />
+        {{ assistant?.name || '' }}
+      </span>
+      <span
+        class="text-n-slate-11 text-sm truncate flex justify-start flex-1 items-center gap-1"
+      >
+        <i class="i-ph-link-simple shrink-0" />
+        <span class="truncate">{{ externalLink }}</span>
+      </span>
+      <div class="shrink-0 text-sm text-n-slate-11 line-clamp-1">
+        {{ createdAt }}
+      </div>
+    </div>
+  </CardLayout>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup>
+import InboxCard from './InboxCard.vue';
+import { inboxes } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
+</script>
+
+<template>
+  <Story
+    title="Captain/Assistant/InboxCard"
+    :layout="{ type: 'grid', width: '700px' }"
+  >
+    <Variant title="Inbox Card">
+      <div
+        v-for="inbox in inboxes"
+        :key="inbox.id"
+        class="px-20 py-4 bg-white dark:bg-slate-900"
+      >
+        <InboxCard :id="inbox.id" :inbox="inbox" />
+      </div>
+    </Variant>
+  </Story>
+</template>

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

@@ -0,0 +1,100 @@
+<script setup>
+import { computed } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import { INBOX_TYPES, getInboxIconByType } from 'dashboard/helper/inbox';
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+  },
+  inbox: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['action']);
+
+const { t } = useI18n();
+
+const [showActionsDropdown, toggleDropdown] = useToggle();
+
+const inboxName = computed(() => {
+  const inbox = props.inbox;
+  if (!inbox?.name) {
+    return '';
+  }
+
+  const isTwilioChannel = inbox.channel_type === INBOX_TYPES.TWILIO;
+  const isWhatsAppChannel = inbox.channel_type === INBOX_TYPES.WHATSAPP;
+  const isEmailChannel = inbox.channel_type === INBOX_TYPES.EMAIL;
+
+  if (isTwilioChannel || isWhatsAppChannel) {
+    const identifier = inbox.messaging_service_sid || inbox.phone_number;
+    return identifier ? `${inbox.name} (${identifier})` : inbox.name;
+  }
+
+  if (isEmailChannel && inbox.email) {
+    return `${inbox.name} (${inbox.email})`;
+  }
+
+  return inbox.name;
+});
+
+const menuItems = computed(() => [
+  {
+    label: t('CAPTAIN.INBOXES.OPTIONS.DISCONNECT'),
+    value: 'delete',
+    action: 'delete',
+    icon: 'i-lucide-trash',
+  },
+]);
+
+const icon = computed(() =>
+  getInboxIconByType(props.inbox.channel_type, '', 'outline')
+);
+
+const handleAction = ({ action, value }) => {
+  toggleDropdown(false);
+  emit('action', { action, value, id: props.id });
+};
+</script>
+
+<template>
+  <CardLayout>
+    <div class="flex justify-between w-full gap-1">
+      <span
+        class="text-base text-n-slate-12 line-clamp-1 flex items-center gap-2"
+      >
+        <span :class="icon" />
+        {{ inboxName }}
+      </span>
+      <div class="flex items-center gap-2">
+        <div
+          v-on-clickaway="() => toggleDropdown(false)"
+          class="relative flex items-center group"
+        >
+          <Button
+            icon="i-lucide-ellipsis-vertical"
+            color="slate"
+            size="xs"
+            class="rounded-md group-hover:bg-n-alpha-2"
+            @click="toggleDropdown()"
+          />
+          <DropdownMenu
+            v-if="showActionsDropdown"
+            :menu-items="menuItems"
+            class="mt-1 ltr:right-0 rtl:left-0 top-full"
+            @action="handleAction($event)"
+          />
+        </div>
+      </div>
+    </div>
+  </CardLayout>
+</template>

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

@@ -0,0 +1,28 @@
+<script setup>
+import ResponseCard from './ResponseCard.vue';
+import { responsesList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
+</script>
+
+<template>
+  <Story
+    title="Captain/Assistant/ResponseCard"
+    :layout="{ type: 'grid', width: '700px' }"
+  >
+    <Variant title="Article Card">
+      <div
+        v-for="(response, index) in responsesList"
+        :key="index"
+        class="px-20 py-4 bg-white dark:bg-slate-900"
+      >
+        <ResponseCard
+          :id="response.id"
+          :question="response.question"
+          :answer="response.answer"
+          :status="response.status"
+          :assistant="response.assistant"
+          :created-at="response.created_at"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

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

@@ -0,0 +1,202 @@
+<script setup>
+import { computed } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+  },
+  question: {
+    type: String,
+    required: true,
+  },
+  answer: {
+    type: String,
+    required: true,
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+  status: {
+    type: String,
+    default: 'approved',
+  },
+  documentable: {
+    type: Object,
+    default: null,
+  },
+  assistant: {
+    type: Object,
+    default: () => ({}),
+  },
+  updatedAt: {
+    type: Number,
+    required: true,
+  },
+  createdAt: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['action', 'navigate']);
+
+const { t } = useI18n();
+
+const [showActionsDropdown, toggleDropdown] = useToggle();
+
+const statusAction = computed(() => {
+  if (props.status === 'pending') {
+    return [
+      {
+        label: t('CAPTAIN.RESPONSES.OPTIONS.APPROVE'),
+        value: 'approve',
+        action: 'approve',
+        icon: 'i-lucide-circle-check-big',
+      },
+    ];
+  }
+  return [];
+});
+
+const menuItems = computed(() => [
+  ...statusAction.value,
+  {
+    label: t('CAPTAIN.RESPONSES.OPTIONS.EDIT_RESPONSE'),
+    value: 'edit',
+    action: 'edit',
+    icon: 'i-lucide-pencil-line',
+  },
+  {
+    label: t('CAPTAIN.RESPONSES.OPTIONS.DELETE_RESPONSE'),
+    value: 'delete',
+    action: 'delete',
+    icon: 'i-lucide-trash',
+  },
+]);
+
+const timestamp = computed(() =>
+  dynamicTime(props.updatedAt || props.createdAt)
+);
+
+const handleAssistantAction = ({ action, value }) => {
+  toggleDropdown(false);
+  emit('action', { action, value, id: props.id });
+};
+
+const handleDocumentableClick = () => {
+  emit('navigate', {
+    id: props.documentable.id,
+    type: props.documentable.type,
+  });
+};
+</script>
+
+<template>
+  <CardLayout :class="{ 'rounded-md': compact }">
+    <div class="flex justify-between w-full gap-1">
+      <span class="text-base text-n-slate-12 line-clamp-1">
+        {{ question }}
+      </span>
+      <div v-if="!compact" class="flex items-center gap-2">
+        <div
+          v-on-clickaway="() => toggleDropdown(false)"
+          class="relative flex items-center group"
+        >
+          <Button
+            icon="i-lucide-ellipsis-vertical"
+            color="slate"
+            size="xs"
+            class="rounded-md group-hover:bg-n-alpha-2"
+            @click="toggleDropdown()"
+          />
+          <DropdownMenu
+            v-if="showActionsDropdown"
+            :menu-items="menuItems"
+            class="mt-1 ltr:right-0 rtl:right-0 top-full"
+            @action="handleAssistantAction($event)"
+          />
+        </div>
+      </div>
+    </div>
+    <span class="text-n-slate-11 text-sm line-clamp-5">
+      {{ answer }}
+    </span>
+    <div v-if="!compact" class="items-center justify-between hidden lg:flex">
+      <div class="inline-flex items-center">
+        <span
+          class="text-sm shrink-0 truncate text-n-slate-11 inline-flex items-center gap-1"
+        >
+          <i class="i-woot-captain" />
+          {{ assistant?.name || '' }}
+        </span>
+        <div
+          v-if="documentable"
+          class="shrink-0 text-sm text-n-slate-11 inline-flex line-clamp-1 gap-1 ml-3"
+        >
+          <span
+            v-if="documentable.type === 'Captain::Document'"
+            class="inline-flex items-center gap-1 truncate over"
+          >
+            <i class="i-ph-chat-circle-dots text-base" />
+            <span class="max-w-96 truncate" :title="documentable.name">
+              {{ documentable.name }}
+            </span>
+          </span>
+          <span
+            v-if="documentable.type === 'User'"
+            class="inline-flex items-center gap-1"
+          >
+            <i class="i-ph-user-circle-plus text-base" />
+            <span
+              class="max-w-96 truncate"
+              :title="documentable.available_name"
+            >
+              {{ documentable.available_name }}
+            </span>
+          </span>
+          <span
+            v-else-if="documentable.type === 'Conversation'"
+            class="inline-flex items-center gap-1 group cursor-pointer"
+            role="button"
+            @click="handleDocumentableClick"
+          >
+            <i class="i-ph-chat-circle-dots text-base" />
+            <span class="group-hover:underline">
+              {{
+                t(`CAPTAIN.RESPONSES.DOCUMENTABLE.CONVERSATION`, {
+                  id: documentable.display_id,
+                })
+              }}
+            </span>
+          </span>
+          <span v-else />
+        </div>
+        <div
+          v-if="status !== 'approved'"
+          class="shrink-0 text-sm text-n-slate-11 line-clamp-1 inline-flex items-center gap-1 ml-3"
+        >
+          <i
+            class="i-ph-stack text-base"
+            :title="t('CAPTAIN.RESPONSES.STATUS.TITLE')"
+          />
+          {{ t(`CAPTAIN.RESPONSES.STATUS.${status.toUpperCase()}`) }}
+        </div>
+      </div>
+      <div
+        class="shrink-0 text-sm text-n-slate-11 line-clamp-1 inline-flex items-center gap-1 ml-3"
+      >
+        <i class="i-ph-calendar-dot" />
+        {{ timestamp }}
+      </div>
+    </div>
+  </CardLayout>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/AssistantSelector.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { OnClickOutside } from '@vueuse/components';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  assistantId: {
+    type: [String, Number],
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update']);
+const { t } = useI18n();
+const isFilterOpen = ref(false);
+
+const assistants = useMapGetter('captainAssistants/getRecords');
+const assistantOptions = computed(() => [
+  {
+    label: t(`CAPTAIN.RESPONSES.FILTER.ALL_ASSISTANTS`),
+    value: 'all',
+    action: 'filter',
+  },
+  ...assistants.value.map(assistant => ({
+    value: assistant.id,
+    label: assistant.name,
+    action: 'filter',
+  })),
+]);
+
+const selectedAssistantLabel = computed(() => {
+  const assistant = assistantOptions.value.find(
+    option => option.value === props.assistantId
+  );
+  return t('CAPTAIN.RESPONSES.FILTER.ASSISTANT', {
+    selected: assistant ? assistant.label : '',
+  });
+});
+
+const handleAssistantFilterChange = ({ value }) => {
+  isFilterOpen.value = false;
+  emit('update', value);
+};
+</script>
+
+<template>
+  <OnClickOutside @trigger="isFilterOpen = false">
+    <Button
+      :label="selectedAssistantLabel"
+      icon="i-lucide-chevron-down"
+      size="sm"
+      color="slate"
+      trailing-icon
+      class="max-w-48"
+      @click="isFilterOpen = !isFilterOpen"
+    />
+
+    <DropdownMenu
+      v-if="isFilterOpen"
+      :menu-items="assistantOptions"
+      class="mt-2"
+      @action="handleAssistantFilterChange"
+    />
+  </OnClickOutside>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/DeleteDialog.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  type: {
+    type: String,
+    required: true,
+  },
+  entity: {
+    type: Object,
+    required: true,
+  },
+  deletePayload: {
+    type: Object,
+    default: null,
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+const deleteDialogRef = ref(null);
+const i18nKey = computed(() => props.type.toUpperCase());
+
+const deleteEntity = async payload => {
+  if (!payload) return;
+
+  try {
+    await store.dispatch(`captain${props.type}/delete`, payload);
+    useAlert(t(`CAPTAIN.${i18nKey.value}.DELETE.SUCCESS_MESSAGE`));
+  } catch (error) {
+    useAlert(t(`CAPTAIN.${i18nKey.value}.DELETE.ERROR_MESSAGE`));
+  }
+};
+
+const handleDialogConfirm = async () => {
+  await deleteEntity(props.deletePayload || props.entity.id);
+  deleteDialogRef.value?.close();
+};
+
+defineExpose({ dialogRef: deleteDialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="deleteDialogRef"
+    type="alert"
+    :title="t(`CAPTAIN.${i18nKey}.DELETE.TITLE`)"
+    :description="t(`CAPTAIN.${i18nKey}.DELETE.DESCRIPTION`)"
+    :confirm-button-label="t(`CAPTAIN.${i18nKey}.DELETE.CONFIRM`)"
+    @confirm="handleDialogConfirm"
+  />
+</template>

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

@@ -0,0 +1,174 @@
+<script setup>
+import { reactive, computed, watch } 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 Editor from 'dashboard/components-next/Editor/Editor.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true,
+    validator: value => ['edit', 'create'].includes(value),
+  },
+  assistant: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['submit', 'cancel']);
+
+const { t } = useI18n();
+
+const formState = {
+  uiFlags: useMapGetter('captainAssistants/getUIFlags'),
+};
+
+const initialState = {
+  name: '',
+  description: '',
+  productName: '',
+  featureFaq: false,
+  featureMemory: false,
+};
+
+const state = reactive({ ...initialState });
+
+const validationRules = {
+  name: { required, minLength: minLength(1) },
+  description: { required, minLength: minLength(1) },
+  productName: { required, minLength: minLength(1) },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const isLoading = computed(() => formState.uiFlags.value.creatingItem);
+
+const getErrorMessage = (field, errorKey) => {
+  return v$.value[field].$error
+    ? t(`CAPTAIN.ASSISTANTS.FORM.${errorKey}.ERROR`)
+    : '';
+};
+
+const formErrors = computed(() => ({
+  name: getErrorMessage('name', 'NAME'),
+  description: getErrorMessage('description', 'DESCRIPTION'),
+  productName: getErrorMessage('productName', 'PRODUCT_NAME'),
+}));
+
+const handleCancel = () => emit('cancel');
+
+const prepareAssistantDetails = () => ({
+  name: state.name,
+  description: state.description,
+  config: {
+    product_name: state.productName,
+    feature_faq: state.featureFaq,
+    feature_memory: state.featureMemory,
+  },
+});
+
+const handleSubmit = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) {
+    return;
+  }
+
+  emit('submit', prepareAssistantDetails());
+};
+
+const updateStateFromAssistant = assistant => {
+  if (!assistant) return;
+
+  const { name, description, config } = assistant;
+
+  Object.assign(state, {
+    name,
+    description,
+    productName: config.product_name,
+    featureFaq: config.feature_faq || false,
+    featureMemory: config.feature_memory || false,
+  });
+};
+
+watch(
+  () => props.assistant,
+  newAssistant => {
+    if (props.mode === 'edit' && newAssistant) {
+      updateStateFromAssistant(newAssistant);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <Input
+      v-model="state.name"
+      :label="t('CAPTAIN.ASSISTANTS.FORM.NAME.LABEL')"
+      :placeholder="t('CAPTAIN.ASSISTANTS.FORM.NAME.PLACEHOLDER')"
+      :message="formErrors.name"
+      :message-type="formErrors.name ? 'error' : 'info'"
+    />
+
+    <Editor
+      v-model="state.description"
+      :label="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.LABEL')"
+      :placeholder="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.PLACEHOLDER')"
+      :message="formErrors.description"
+      :message-type="formErrors.description ? 'error' : 'info'"
+    />
+
+    <Input
+      v-model="state.productName"
+      :label="t('CAPTAIN.ASSISTANTS.FORM.PRODUCT_NAME.LABEL')"
+      :placeholder="t('CAPTAIN.ASSISTANTS.FORM.PRODUCT_NAME.PLACEHOLDER')"
+      :message="formErrors.productName"
+      :message-type="formErrors.productName ? 'error' : 'info'"
+    />
+
+    <fieldset class="flex flex-col gap-2.5">
+      <legend class="mb-3 text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.TITLE') }}
+      </legend>
+
+      <label class="flex items-center gap-2">
+        <input v-model="state.featureFaq" type="checkbox" />
+        <span class="text-sm font-medium text-n-slate-12">
+          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS') }}
+        </span>
+      </label>
+
+      <label class="flex items-center gap-2">
+        <input v-model="state.featureMemory" type="checkbox" />
+        <span class="text-sm font-medium text-n-slate-12">
+          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
+        </span>
+      </label>
+    </fieldset>
+
+    <div class="flex items-center justify-between w-full gap-3">
+      <Button
+        type="button"
+        variant="faded"
+        color="slate"
+        :label="t('CAPTAIN.FORM.CANCEL')"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        @click="handleCancel"
+      />
+      <Button
+        type="submit"
+        :label="t(`CAPTAIN.FORM.${mode.toUpperCase()}`)"
+        class="w-full"
+        :is-loading="isLoading"
+        :disabled="isLoading"
+      />
+    </div>
+  </form>
+</template>

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

@@ -0,0 +1,87 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import AssistantForm from './AssistantForm.vue';
+
+const props = defineProps({
+  selectedAssistant: {
+    type: Object,
+    default: () => ({}),
+  },
+  type: {
+    type: String,
+    default: 'create',
+    validator: value => ['create', 'edit'].includes(value),
+  },
+});
+const emit = defineEmits(['close']);
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+const assistantForm = ref(null);
+
+const updateAssistant = assistantDetails =>
+  store.dispatch('captainAssistants/update', {
+    id: props.selectedAssistant.id,
+    ...assistantDetails,
+  });
+
+const i18nKey = computed(
+  () => `CAPTAIN.ASSISTANTS.${props.type.toUpperCase()}`
+);
+
+const createAssistant = assistantDetails =>
+  store.dispatch('captainAssistants/create', assistantDetails);
+
+const handleSubmit = async updatedAssistant => {
+  try {
+    if (props.type === 'edit') {
+      await updateAssistant(updatedAssistant);
+    } else {
+      await createAssistant(updatedAssistant);
+    }
+    useAlert(t(`${i18nKey.value}.SUCCESS_MESSAGE`));
+    dialogRef.value.close();
+  } catch (error) {
+    const errorMessage = error?.message || t(`${i18nKey.value}.ERROR_MESSAGE`);
+    useAlert(errorMessage);
+  }
+};
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleCancel = () => {
+  dialogRef.value.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="t(`${i18nKey}.TITLE`)"
+    :description="t('CAPTAIN.ASSISTANTS.FORM_DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    overflow-y-auto
+    @close="handleClose"
+  >
+    <AssistantForm
+      ref="assistantForm"
+      :mode="type"
+      :assistant="selectedAssistant"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+    />
+    <template #footer />
+  </Dialog>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import DocumentForm from './DocumentForm.vue';
+
+const emit = defineEmits(['close']);
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+const documentForm = ref(null);
+
+const i18nKey = 'CAPTAIN.DOCUMENTS.CREATE';
+
+const handleSubmit = async newDocument => {
+  try {
+    await store.dispatch('captainDocuments/create', newDocument);
+    useAlert(t(`${i18nKey}.SUCCESS_MESSAGE`));
+    dialogRef.value.close();
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message || t(`${i18nKey}.ERROR_MESSAGE`);
+    useAlert(errorMessage);
+  }
+};
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleCancel = () => {
+  dialogRef.value.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="$t(`${i18nKey}.TITLE`)"
+    :description="$t('CAPTAIN.DOCUMENTS.FORM_DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    @close="handleClose"
+  >
+    <DocumentForm
+      ref="documentForm"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+    />
+    <template #footer />
+  </Dialog>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength, url } 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';
+
+const emit = defineEmits(['submit', 'cancel']);
+
+const { t } = useI18n();
+
+const formState = {
+  uiFlags: useMapGetter('captainDocuments/getUIFlags'),
+  assistants: useMapGetter('captainAssistants/getRecords'),
+};
+
+const initialState = {
+  name: '',
+  assistantId: null,
+};
+
+const state = reactive({ ...initialState });
+
+const validationRules = {
+  url: { required, url, minLength: minLength(1) },
+  assistantId: { required },
+};
+
+const assistantList = computed(() =>
+  formState.assistants.value.map(assistant => ({
+    value: assistant.id,
+    label: assistant.name,
+  }))
+);
+
+const v$ = useVuelidate(validationRules, state);
+
+const isLoading = computed(() => formState.uiFlags.value.creatingItem);
+
+const getErrorMessage = (field, errorKey) => {
+  return v$.value[field].$error
+    ? t(`CAPTAIN.DOCUMENTS.FORM.${errorKey}.ERROR`)
+    : '';
+};
+
+const formErrors = computed(() => ({
+  url: getErrorMessage('url', 'URL'),
+  assistantId: getErrorMessage('assistantId', 'ASSISTANT'),
+}));
+
+const handleCancel = () => emit('cancel');
+
+const prepareDocumentDetails = () => ({
+  external_link: state.url,
+  assistant_id: state.assistantId,
+});
+
+const handleSubmit = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) {
+    return;
+  }
+
+  emit('submit', prepareDocumentDetails());
+};
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <Input
+      v-model="state.url"
+      :label="t('CAPTAIN.DOCUMENTS.FORM.URL.LABEL')"
+      :placeholder="t('CAPTAIN.DOCUMENTS.FORM.URL.PLACEHOLDER')"
+      :message="formErrors.url"
+      :message-type="formErrors.url ? 'error' : 'info'"
+    />
+    <div class="flex flex-col gap-1">
+      <label for="assistant" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.LABEL') }}
+      </label>
+      <ComboBox
+        id="assistant"
+        v-model="state.assistantId"
+        :options="assistantList"
+        :has-error="!!formErrors.assistantId"
+        :placeholder="t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.PLACEHOLDER')"
+        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
+        :message="formErrors.assistantId"
+      />
+    </div>
+
+    <div class="flex items-center justify-between w-full gap-3">
+      <Button
+        type="button"
+        variant="faded"
+        color="slate"
+        :label="t('CAPTAIN.FORM.CANCEL')"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        @click="handleCancel"
+      />
+      <Button
+        type="submit"
+        :label="t('CAPTAIN.FORM.CREATE')"
+        class="w-full"
+        :is-loading="isLoading"
+        :disabled="isLoading"
+      />
+    </div>
+  </form>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/document/RelatedResponses.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import ResponseCard from '../../assistant/ResponseCard.vue';
+const props = defineProps({
+  captainDocument: {
+    type: Object,
+    required: true,
+  },
+});
+const emit = defineEmits(['close']);
+const { t } = useI18n();
+const store = useStore();
+const dialogRef = ref(null);
+
+const uiFlags = useMapGetter('captainResponses/getUIFlags');
+const responses = useMapGetter('captainResponses/getRecords');
+const isFetching = computed(() => uiFlags.value.fetchingList);
+
+const handleClose = () => {
+  emit('close');
+};
+
+onMounted(() => {
+  store.dispatch('captainResponses/get', {
+    assistantId: props.captainDocument.assistant.id,
+    documentId: props.captainDocument.id,
+  });
+});
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.TITLE')"
+    :description="t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    overflow-y-auto
+    width="3xl"
+    @close="handleClose"
+  >
+    <div
+      v-if="isFetching"
+      class="flex items-center justify-center py-10 text-n-slate-11"
+    >
+      <Spinner />
+    </div>
+    <div v-else class="flex flex-col gap-3 min-h-48">
+      <ResponseCard
+        v-for="response in responses"
+        :id="response.id"
+        :key="response.id"
+        :question="response.question"
+        :status="response.status"
+        :answer="response.answer"
+        :assistant="response.assistant"
+        :created-at="response.created_at"
+        :updated-at="response.updated_at"
+        compact
+      />
+    </div>
+  </Dialog>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue

@@ -0,0 +1,39 @@
+<script setup>
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import AssistantCard from 'dashboard/components-next/captain/assistant/AssistantCard.vue';
+import { assistantsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
+
+const emit = defineEmits(['click']);
+
+const onClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <EmptyStateLayout
+    :title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.TITLE')"
+    :subtitle="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.SUBTITLE')"
+  >
+    <template #empty-state-item>
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+        <AssistantCard
+          v-for="(assistant, index) in assistantsList.slice(0, 5)"
+          :id="assistant.id"
+          :key="`assistant-${index}`"
+          :name="assistant.name"
+          :description="assistant.description"
+          :updated-at="assistant.created_at"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <Button
+        :label="$t('CAPTAIN.ASSISTANTS.ADD_NEW')"
+        icon="i-lucide-plus"
+        @click="onClick"
+      />
+    </template>
+  </EmptyStateLayout>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue

@@ -0,0 +1,40 @@
+<script setup>
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DocumentCard from 'dashboard/components-next/captain/assistant/DocumentCard.vue';
+import { documentsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
+
+const emit = defineEmits(['click']);
+
+const onClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <EmptyStateLayout
+    :title="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.TITLE')"
+    :subtitle="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.SUBTITLE')"
+  >
+    <template #empty-state-item>
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+        <DocumentCard
+          v-for="(document, index) in documentsList.slice(0, 5)"
+          :id="document.id"
+          :key="`document-${index}`"
+          :name="document.name"
+          :assistant="document.assistant"
+          :external-link="document.external_link"
+          :created-at="document.created_at"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <Button
+        :label="$t('CAPTAIN.DOCUMENTS.ADD_NEW')"
+        icon="i-lucide-plus"
+        @click="onClick"
+      />
+    </template>
+  </EmptyStateLayout>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/InboxPageEmptyState.vue

@@ -0,0 +1,37 @@
+<script setup>
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import InboxCard from 'dashboard/components-next/captain/assistant/InboxCard.vue';
+import { inboxes } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
+
+const emit = defineEmits(['click']);
+
+const onClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <EmptyStateLayout
+    :title="$t('CAPTAIN.INBOXES.EMPTY_STATE.TITLE')"
+    :subtitle="$t('CAPTAIN.INBOXES.EMPTY_STATE.SUBTITLE')"
+  >
+    <template #empty-state-item>
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+        <InboxCard
+          v-for="(inbox, index) in inboxes.slice(0, 5)"
+          :id="inbox.id"
+          :key="`inbox-${index}`"
+          :inbox="inbox"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <Button
+        :label="$t('CAPTAIN.INBOXES.ADD_NEW')"
+        icon="i-lucide-plus"
+        @click="onClick"
+      />
+    </template>
+  </EmptyStateLayout>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue

@@ -0,0 +1,42 @@
+<script setup>
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ResponseCard from 'dashboard/components-next/captain/assistant/ResponseCard.vue';
+import { responsesList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
+
+const emit = defineEmits(['click']);
+
+const onClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <EmptyStateLayout
+    :title="$t('CAPTAIN.RESPONSES.EMPTY_STATE.TITLE')"
+    :subtitle="$t('CAPTAIN.RESPONSES.EMPTY_STATE.SUBTITLE')"
+  >
+    <template #empty-state-item>
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+        <ResponseCard
+          v-for="(response, index) in responsesList.slice(0, 5)"
+          :id="response.id"
+          :key="`response-${index}`"
+          :question="response.question"
+          :answer="response.answer"
+          :status="response.status"
+          :assistant="response.assistant"
+          :created-at="response.created_at"
+          :updated-at="response.created_at"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <Button
+        :label="$t('CAPTAIN.RESPONSES.ADD_NEW')"
+        icon="i-lucide-plus"
+        @click="onClick"
+      />
+    </template>
+  </EmptyStateLayout>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js

@@ -0,0 +1,286 @@
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+
+export const assistantsList = [
+  {
+    account_id: 2,
+    config: { product_name: 'HelpDesk Pro' },
+    created_at: 1736033561,
+    description:
+      'An advanced AI assistant designed to enhance customer support solutions by automating workflows and providing instant responses.',
+    id: 4,
+    name: 'Support Genie',
+  },
+  {
+    account_id: 3,
+    config: { product_name: 'CRM Tools' },
+    created_at: 1736033562,
+    description:
+      'Helps streamline customer relationship management by organizing contacts, automating follow-ups, and providing insights.',
+    id: 5,
+    name: 'CRM Assistant',
+  },
+  {
+    account_id: 4,
+    config: { product_name: 'SalesFlow' },
+    created_at: 1736033563,
+    description:
+      'Optimizes your sales pipeline by tracking prospects, forecasting sales, and automating administrative tasks.',
+    id: 6,
+    name: 'SalesBot',
+  },
+  {
+    account_id: 5,
+    config: { product_name: 'TicketMaster AI' },
+    created_at: 1736033564,
+    description:
+      'Automates ticket assignment, categorization, and customer query responses to enhance support efficiency.',
+    id: 7,
+    name: 'TicketBot',
+  },
+  {
+    account_id: 6,
+    config: { product_name: 'FinanceAssist' },
+    created_at: 1736033565,
+    description:
+      'Provides financial analytics, reporting, and insights, helping teams make data-driven financial decisions.',
+    id: 8,
+    name: 'Finance Wizard',
+  },
+  {
+    account_id: 8,
+    config: { product_name: 'HR Assistant' },
+    created_at: 1736033567,
+    description:
+      'Streamlines HR operations including employee management, payroll, and recruitment processes.',
+    id: 10,
+    name: 'HR Helper',
+  },
+];
+
+export const documentsList = [
+  {
+    account_id: 1,
+    assistant: { id: 1, name: 'Helper Pro' },
+    content:
+      'Comprehensive guide on using conversation filters to manage chats effectively.',
+    created_at: 1736143272,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688192-how-to-use-conversation-filters',
+    id: 3059,
+    name: 'How to use Conversation Filters? | User Guide | Chatwoot',
+    status: 'available',
+  },
+  {
+    account_id: 2,
+    assistant: { id: 2, name: 'Support Genie' },
+    content:
+      'Step-by-step guide for automating ticket assignments and improving support workflow in Chatwoot.',
+    created_at: 1736143273,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688200-automating-ticket-assignments',
+    id: 3060,
+    name: 'Automating Ticket Assignments | User Guide | Chatwoot',
+    status: 'available',
+  },
+  {
+    account_id: 3,
+    assistant: { id: 3, name: 'CRM Assistant' },
+    content:
+      'A detailed guide on managing and organizing customer profiles for better relationship management.',
+    created_at: 1736143274,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688210-managing-customer-profiles',
+    id: 3061,
+    name: 'Managing Customer Profiles | User Guide | Chatwoot',
+    status: 'available',
+  },
+  {
+    account_id: 4,
+    assistant: { id: 4, name: 'SalesBot' },
+    content:
+      'Learn how to optimize sales tracking and improve your sales forecasting using advanced features.',
+    created_at: 1736143275,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688220-sales-tracking-guide',
+    id: 3062,
+    name: 'Sales Tracking Guide | User Guide | Chatwoot',
+    status: 'available',
+  },
+  {
+    account_id: 5,
+    assistant: { id: 5, name: 'TicketBot' },
+    content:
+      'How to efficiently create, manage, and resolve tickets in Chatwoot.',
+    created_at: 1736143276,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688230-managing-tickets',
+    id: 3063,
+    name: 'Managing Tickets | User Guide | Chatwoot',
+    status: 'available',
+  },
+  {
+    account_id: 6,
+    assistant: { id: 6, name: 'Finance Wizard' },
+    content:
+      'Detailed guide on how to use financial reporting tools and generate insightful analytics.',
+    created_at: 1736143277,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688240-financial-reporting',
+    id: 3064,
+    name: 'Financial Reporting | User Guide | Chatwoot',
+    status: 'available',
+  },
+];
+
+export const responsesList = [
+  {
+    account_id: 1,
+    answer:
+      'Messenger may be deactivated because you are on a free plan or the limit for inboxes might have been reached.',
+    created_at: 1736283330,
+    id: 87,
+    question: 'Why is my Messenger in Chatwoot deactivated?',
+    status: 'pending',
+    assistant: {
+      account_id: 1,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033280,
+      description: 'Assists with general queries and system-wide issues.',
+      id: 1,
+      name: 'Assistant 2',
+    },
+  },
+  {
+    account_id: 2,
+    answer:
+      'You can integrate your WhatsApp account by navigating to the Integrations section and selecting the WhatsApp integration option.',
+    created_at: 1736283340,
+    id: 88,
+    question: 'How do I integrate WhatsApp with Chatwoot?',
+    assistant: {
+      account_id: 2,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033281,
+      description: 'Helps with integration and setup-related inquiries.',
+      id: 2,
+      name: 'Assistant 3',
+    },
+  },
+  {
+    account_id: 3,
+    answer:
+      "To reset your password, go to the login page and click on 'Forgot Password', then follow the instructions sent to your email.",
+    created_at: 1736283350,
+    id: 89,
+    question: 'How can I reset my password in Chatwoot?',
+    assistant: {
+      account_id: 3,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033282,
+      description: 'Handles account management and recovery support.',
+      id: 3,
+      name: 'Assistant 4',
+    },
+  },
+  {
+    account_id: 4,
+    answer:
+      "You can enable the dark mode in settings by navigating to 'Appearance' and selecting 'Dark Mode'.",
+    created_at: 1736283360,
+    id: 90,
+    question: 'How do I enable dark mode in Chatwoot?',
+    assistant: {
+      account_id: 4,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033283,
+      description: 'Helps with UI and theme-related inquiries.',
+      id: 4,
+      name: 'Assistant 5',
+    },
+  },
+  {
+    account_id: 5,
+    answer:
+      "To add a new team member, navigate to 'Settings', then 'Team', and click on 'Add Team Member'.",
+    created_at: 1736283370,
+    id: 91,
+    question: 'How do I add a new team member in Chatwoot?',
+    assistant: {
+      account_id: 5,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033284,
+      description: 'Supports team management and user access-related queries.',
+      id: 5,
+      name: 'Assistant 6',
+    },
+  },
+  {
+    account_id: 6,
+    answer:
+      "Campaigns in Chatwoot allow you to send targeted messages to specific user segments. You can create them in the 'Campaigns' section.",
+    created_at: 1736283380,
+    id: 92,
+    question: 'What are campaigns in Chatwoot?',
+    assistant: {
+      account_id: 6,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033285,
+      description:
+        'Specialized in marketing, campaign management, and messaging strategies.',
+      id: 6,
+      name: 'Assistant 7',
+    },
+  },
+];
+
+export const inboxes = [
+  {
+    id: 7,
+    name: 'Email Support',
+    channel_type: INBOX_TYPES.EMAIL,
+    email: 'support@company.com',
+  },
+  {
+    id: 1,
+    name: 'Website Chat',
+    channel_type: INBOX_TYPES.WEB,
+  },
+  {
+    id: 2,
+    name: 'Facebook Support',
+    channel_type: INBOX_TYPES.FB,
+  },
+  {
+    id: 5,
+    name: 'SMS Service',
+    channel_type: INBOX_TYPES.TWILIO,
+    messaging_service_sid: 'MGxxxxxx',
+  },
+  {
+    id: 6,
+    name: 'WhatsApp Support',
+    channel_type: INBOX_TYPES.WHATSAPP,
+    phone_number: '+1987654321',
+  },
+  {
+    id: 8,
+    name: 'Telegram Support',
+    channel_type: INBOX_TYPES.TELEGRAM,
+  },
+  {
+    id: 9,
+    name: 'LINE Support',
+    channel_type: INBOX_TYPES.LINE,
+  },
+  {
+    id: 10,
+    name: 'API Channel',
+    channel_type: INBOX_TYPES.API,
+  },
+  {
+    id: 11,
+    name: 'SMS Basic',
+    channel_type: INBOX_TYPES.SMS,
+    phone_number: '+1555555555',
+  },
+];

app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxDialog.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { ref } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import ConnectInboxForm from './ConnectInboxForm.vue';
+
+defineProps({
+  assistantId: {
+    type: Number,
+    required: true,
+  },
+});
+const emit = defineEmits(['close']);
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+const connectForm = ref(null);
+
+const i18nKey = 'CAPTAIN.INBOXES.CREATE';
+
+const handleSubmit = async payload => {
+  try {
+    await store.dispatch('captainInboxes/create', payload);
+    useAlert(t(`${i18nKey}.SUCCESS_MESSAGE`));
+    dialogRef.value.close();
+  } catch (error) {
+    const errorMessage = error?.message || t(`${i18nKey}.ERROR_MESSAGE`);
+    useAlert(errorMessage);
+  }
+};
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleCancel = () => {
+  dialogRef.value.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="create"
+    :title="$t(`${i18nKey}.TITLE`)"
+    :description="$t('CAPTAIN.INBOXES.FORM_DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    @close="handleClose"
+  >
+    <ConnectInboxForm
+      ref="connectForm"
+      :assistant-id="assistantId"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+    />
+    <template #footer />
+  </Dialog>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxForm.vue

@@ -0,0 +1,115 @@
+<script setup>
+import { reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+
+const props = defineProps({
+  assistantId: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['submit', 'cancel']);
+
+const { t } = useI18n();
+
+const formState = {
+  uiFlags: useMapGetter('captainInboxes/getUIFlags'),
+  inboxes: useMapGetter('inboxes/getInboxes'),
+  captainInboxes: useMapGetter('captainInboxes/getRecords'),
+};
+
+const initialState = {
+  inboxId: null,
+};
+
+const state = reactive({ ...initialState });
+
+const validationRules = {
+  inboxId: { required },
+};
+
+const inboxList = computed(() => {
+  const captainInboxIds = formState.captainInboxes.value.map(inbox => inbox.id);
+
+  return formState.inboxes.value
+    .filter(inbox => !captainInboxIds.includes(inbox.id))
+    .map(inbox => ({
+      value: inbox.id,
+      label: inbox.name,
+    }));
+});
+
+const v$ = useVuelidate(validationRules, state);
+
+const isLoading = computed(() => formState.uiFlags.value.creatingItem);
+
+const getErrorMessage = (field, errorKey) => {
+  return v$.value[field].$error
+    ? t(`CAPTAIN.INBOXES.FORM.${errorKey}.ERROR`)
+    : '';
+};
+
+const formErrors = computed(() => ({
+  inboxId: getErrorMessage('inboxId', 'INBOX'),
+}));
+
+const handleCancel = () => emit('cancel');
+
+const prepareInboxPayload = () => ({
+  inboxId: state.inboxId,
+  assistantId: props.assistantId,
+});
+
+const handleSubmit = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) {
+    return;
+  }
+
+  emit('submit', prepareInboxPayload());
+};
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <div class="flex flex-col gap-1">
+      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.INBOXES.FORM.INBOX.LABEL') }}
+      </label>
+      <ComboBox
+        id="inbox"
+        v-model="state.inboxId"
+        :options="inboxList"
+        :has-error="!!formErrors.inboxId"
+        :placeholder="t('CAPTAIN.INBOXES.FORM.INBOX.PLACEHOLDER')"
+        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
+        :message="formErrors.inboxId"
+      />
+    </div>
+
+    <div class="flex items-center justify-between w-full gap-3">
+      <Button
+        type="button"
+        variant="faded"
+        color="slate"
+        :label="t('CAPTAIN.FORM.CANCEL')"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        @click="handleCancel"
+      />
+      <Button
+        type="submit"
+        :label="t('CAPTAIN.FORM.CREATE')"
+        class="w-full"
+        :is-loading="isLoading"
+        :disabled="isLoading"
+      />
+    </div>
+  </form>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/response/CreateResponseDialog.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import ResponseForm from './ResponseForm.vue';
+
+const props = defineProps({
+  selectedResponse: {
+    type: Object,
+    default: () => ({}),
+  },
+  type: {
+    type: String,
+    default: 'create',
+    validator: value => ['create', 'edit'].includes(value),
+  },
+});
+const emit = defineEmits(['close']);
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+const responseForm = ref(null);
+
+const updateResponse = responseDetails =>
+  store.dispatch('captainResponses/update', {
+    id: props.selectedResponse.id,
+    ...responseDetails,
+  });
+
+const i18nKey = computed(() => `CAPTAIN.RESPONSES.${props.type.toUpperCase()}`);
+
+const createResponse = responseDetails =>
+  store.dispatch('captainResponses/create', responseDetails);
+
+const handleSubmit = async updatedResponse => {
+  try {
+    if (props.type === 'edit') {
+      await updateResponse(updatedResponse);
+    } else {
+      await createResponse(updatedResponse);
+    }
+    useAlert(t(`${i18nKey.value}.SUCCESS_MESSAGE`));
+    dialogRef.value.close();
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message || t(`${i18nKey.value}.ERROR_MESSAGE`);
+    useAlert(errorMessage);
+  }
+};
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleCancel = () => {
+  dialogRef.value.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="$t(`${i18nKey}.TITLE`)"
+    :description="$t('CAPTAIN.RESPONSES.FORM_DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    @close="handleClose"
+  >
+    <ResponseForm
+      ref="responseForm"
+      :mode="type"
+      :response="selectedResponse"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+    />
+    <template #footer />
+  </Dialog>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/response/ResponseForm.vue

@@ -0,0 +1,161 @@
+<script setup>
+import { reactive, computed, watch } 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 Editor from 'dashboard/components-next/Editor/Editor.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true,
+    validator: value => ['edit', 'create'].includes(value),
+  },
+  response: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['submit', 'cancel']);
+const { t } = useI18n();
+
+const formState = {
+  uiFlags: useMapGetter('captainResponses/getUIFlags'),
+  assistants: useMapGetter('captainAssistants/getRecords'),
+};
+
+const initialState = {
+  question: '',
+  answer: '',
+  assistantId: null,
+};
+
+const state = reactive({ ...initialState });
+
+const validationRules = {
+  question: { required, minLength: minLength(1) },
+  answer: { required, minLength: minLength(1) },
+  assistantId: { required },
+};
+
+const assistantList = computed(() =>
+  formState.assistants.value.map(assistant => ({
+    value: assistant.id,
+    label: assistant.name,
+  }))
+);
+
+const v$ = useVuelidate(validationRules, state);
+
+const isLoading = computed(() => formState.uiFlags.value.creatingItem);
+
+const getErrorMessage = (field, errorKey) => {
+  return v$.value[field].$error
+    ? t(`CAPTAIN.RESPONSES.FORM.${errorKey}.ERROR`)
+    : '';
+};
+
+const formErrors = computed(() => ({
+  question: getErrorMessage('question', 'QUESTION'),
+  answer: getErrorMessage('answer', 'ANSWER'),
+  assistantId: getErrorMessage('assistantId', 'ASSISTANT'),
+}));
+
+const handleCancel = () => emit('cancel');
+
+const prepareDocumentDetails = () => ({
+  question: state.question,
+  answer: state.answer,
+  assistant_id: state.assistantId,
+});
+
+const handleSubmit = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) {
+    return;
+  }
+
+  emit('submit', prepareDocumentDetails());
+};
+
+const updateStateFromResponse = response => {
+  if (!response) return;
+
+  const { question, answer, assistant } = response;
+
+  Object.assign(state, {
+    question,
+    answer,
+    assistantId: assistant.id,
+  });
+};
+
+watch(
+  () => props.response,
+  newResponse => {
+    if (props.mode === 'edit' && newResponse) {
+      updateStateFromResponse(newResponse);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <Input
+      v-model="state.question"
+      :label="t('CAPTAIN.RESPONSES.FORM.QUESTION.LABEL')"
+      :placeholder="t('CAPTAIN.RESPONSES.FORM.QUESTION.PLACEHOLDER')"
+      :message="formErrors.question"
+      :message-type="formErrors.question ? 'error' : 'info'"
+    />
+
+    <Editor
+      v-model="state.answer"
+      :label="t('CAPTAIN.RESPONSES.FORM.ANSWER.LABEL')"
+      :placeholder="t('CAPTAIN.RESPONSES.FORM.ANSWER.PLACEHOLDER')"
+      :message="formErrors.answer"
+      :max-length="10000"
+      :message-type="formErrors.answer ? 'error' : 'info'"
+    />
+
+    <div class="flex flex-col gap-1">
+      <label for="assistant" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.RESPONSES.FORM.ASSISTANT.LABEL') }}
+      </label>
+      <ComboBox
+        id="assistant"
+        v-model="state.assistantId"
+        :options="assistantList"
+        :has-error="!!formErrors.assistantId"
+        :placeholder="t('CAPTAIN.RESPONSES.FORM.ASSISTANT.PLACEHOLDER')"
+        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
+        :message="formErrors.assistantId"
+      />
+    </div>
+
+    <div class="flex items-center justify-between w-full gap-3">
+      <Button
+        type="button"
+        variant="faded"
+        color="slate"
+        :label="t('CAPTAIN.FORM.CANCEL')"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        @click="handleCancel"
+      />
+      <Button
+        type="submit"
+        :label="t(`CAPTAIN.FORM.${mode.toUpperCase()}`)"
+        class="w-full"
+        :is-loading="isLoading"
+        :disabled="isLoading"
+      />
+    </div>
+  </form>
+</template>

app/javascript/dashboard/components-next/dialog/Dialog.vue

@@ -150,6 +150,6 @@ defineExpose({ open, close });
 
 <style scoped>
 dialog::backdrop {
-  @apply dark:bg-n-alpha-white bg-n-alpha-black2;
+  @apply bg-n-alpha-black1 backdrop-blur-[4px];
 }
 </style>

app/javascript/dashboard/components-next/message/Message.vue

@@ -1,6 +1,15 @@
 <script setup>
-import { computed, defineAsyncComponent } from 'vue';
+import { onMounted, computed, ref, toRefs } from 'vue';
+import { useTimeoutFn } from '@vueuse/core';
 import { provideMessageContext } from './provider.js';
+import { useTrack } from 'dashboard/composables';
+import { emitter } from 'shared/helpers/mitt';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { LocalStorage } from 'shared/helpers/localStorage';
+import { ACCOUNT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
   MESSAGE_TYPES,
   ATTACHMENT_TYPES,
@@ -8,6 +17,7 @@ import {
   SENDER_TYPES,
   ORIENTATION,
   MESSAGE_STATUS,
+  CONTENT_TYPES,
 } from './constants';
 
 import Avatar from 'next/avatar/Avatar.vue';
@@ -19,17 +29,14 @@ import FileBubble from './bubbles/File.vue';
 import AudioBubble from './bubbles/Audio.vue';
 import VideoBubble from './bubbles/Video.vue';
 import InstagramStoryBubble from './bubbles/InstagramStory.vue';
-import AttachmentsBubble from './bubbles/Attachments.vue';
 import EmailBubble from './bubbles/Email/Index.vue';
 import UnsupportedBubble from './bubbles/Unsupported.vue';
 import ContactBubble from './bubbles/Contact.vue';
 import DyteBubble from './bubbles/Dyte.vue';
-const LocationBubble = defineAsyncComponent(
-  () => import('./bubbles/Location.vue')
-);
+import LocationBubble from './bubbles/Location.vue';
 
 import MessageError from './MessageError.vue';
-import MessageMeta from './MessageMeta.vue';
+import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu.vue';
 
 /**
  * @typedef {Object} Attachment
@@ -65,7 +72,7 @@ import MessageMeta from './MessageMeta.vue';
 
 /**
  * @typedef {Object} Props
- * @property {('sent'|'delivered'|'read'|'failed')} status - The delivery status of the message
+ * @property {('sent'|'delivered'|'read'|'failed'|'progress')} status - The delivery status of the message
  * @property {ContentAttributes} [contentAttributes={}] - Additional attributes of the message content
  * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
  * @property {Sender|null} [sender=null] - The sender information
@@ -78,6 +85,11 @@ import MessageMeta from './MessageMeta.vue';
  * @property {string|null} [error=null] - Error message if the message failed to send
  * @property {string|null} [senderType=null] - The type of the sender
  * @property {string} content - The message content
+ * @property {boolean} [groupWithNext=false] - Whether the message should be grouped with the next message
+ * @property {Object|null} [inReplyTo=null] - The message to which this message is a reply
+ * @property {boolean} [isEmailInbox=false] - Whether the message is from an email inbox
+ * @property {number} conversationId - The ID of the conversation to which the message belongs
+ * @property {number} inboxId - The ID of the inbox to which the message belongs
  */
 
 // eslint-disable-next-line vue/define-macros-order
@@ -93,72 +105,62 @@ const props = defineProps({
     required: true,
     validator: value => Object.values(MESSAGE_STATUS).includes(value),
   },
-  attachments: {
-    type: Array,
-    default: () => [],
-  },
-  private: {
-    type: Boolean,
-    default: false,
-  },
-  createdAt: {
-    type: Number,
-    required: true,
-  },
-  sender: {
-    type: Object,
-    default: null,
-  },
-  senderId: {
-    type: Number,
-    default: null,
-  },
-  senderType: {
+  attachments: { type: Array, default: () => [] },
+  content: { type: String, default: null },
+  contentAttributes: { type: Object, default: () => ({}) },
+  contentType: {
     type: String,
-    default: null,
-  },
-  content: {
-    type: String,
-    required: true,
-  },
-  contentAttributes: {
-    type: Object,
-    default: () => {},
-  },
-  currentUserId: {
-    type: Number,
-    required: true,
-  },
-  groupWithNext: {
-    type: Boolean,
-    default: false,
-  },
-  inReplyTo: {
-    type: Object,
-    default: null,
-  },
-  isEmailInbox: {
-    type: Boolean,
-    default: false,
+    default: 'text',
+    validator: value => Object.values(CONTENT_TYPES).includes(value),
   },
+  conversationId: { type: Number, required: true },
+  createdAt: { type: Number, required: true }, // eslint-disable-line vue/no-unused-properties
+  currentUserId: { type: Number, required: true },
+  groupWithNext: { type: Boolean, default: false },
+  inboxId: { type: Number, default: null }, // eslint-disable-line vue/no-unused-properties
+  inboxSupportsReplyTo: { type: Object, default: () => ({}) },
+  inReplyTo: { type: Object, default: null }, // eslint-disable-line vue/no-unused-properties
+  isEmailInbox: { type: Boolean, default: false },
+  private: { type: Boolean, default: false },
+  sender: { type: Object, default: null },
+  senderId: { type: Number, default: null },
+  senderType: { type: String, default: null },
+  sourceId: { type: String, default: '' }, // eslint-disable-line vue/no-unused-properties
 });
 
+const contextMenuPosition = ref({});
+const showBackgroundHighlight = ref(false);
+const showContextMenu = ref(false);
+const { t } = useI18n();
+const route = useRoute();
+
 /**
  * Computes the message variant based on props
  * @type {import('vue').ComputedRef<'user'|'agent'|'activity'|'private'|'bot'|'template'>}
  */
 const variant = computed(() => {
   if (props.private) return MESSAGE_VARIANTS.PRIVATE;
+
   if (props.isEmailInbox) {
     const emailInboxTypes = [MESSAGE_TYPES.INCOMING, MESSAGE_TYPES.OUTGOING];
     if (emailInboxTypes.includes(props.messageType)) {
       return MESSAGE_VARIANTS.EMAIL;
     }
   }
+
+  if (props.contentType === CONTENT_TYPES.INCOMING_EMAIL) {
+    return MESSAGE_VARIANTS.EMAIL;
+  }
+
   if (props.status === MESSAGE_STATUS.FAILED) return MESSAGE_VARIANTS.ERROR;
-  if (props.contentAttributes.isUnsupported)
+  if (props.contentAttributes?.isUnsupported)
     return MESSAGE_VARIANTS.UNSUPPORTED;
 
+  const isBot = !props.sender || props.sender.type === SENDER_TYPES.AGENT_BOT;
+  if (isBot && props.messageType === MESSAGE_TYPES.OUTGOING) {
+    return MESSAGE_VARIANTS.BOT;
+  }
+
   const variants = {
     [MESSAGE_TYPES.INCOMING]: MESSAGE_VARIANTS.USER,
     [MESSAGE_TYPES.ACTIVITY]: MESSAGE_VARIANTS.ACTIVITY,
@@ -170,10 +172,20 @@ const variant = computed(() => {
 });
 
 const isMyMessage = computed(() => {
+  // if an outgoing message is still processing, then it's definitely a
+  // message sent by the current user
+  if (
+    props.status === MESSAGE_STATUS.PROGRESS &&
+    props.messageType === MESSAGE_TYPES.OUTGOING
+  ) {
+    return true;
+  }
   const senderId = props.senderId ?? props.sender?.id;
   const senderType = props.senderType ?? props.sender?.type;
 
-  if (!senderType || !senderId) return false;
+  if (!senderType || !senderId) {
+    return false;
+  }
 
   return (
     senderType.toLowerCase() === SENDER_TYPES.USER.toLowerCase() &&
@@ -248,7 +260,11 @@ const componentToRender = computed(() => {
     if (emailInboxTypes.includes(props.messageType)) return EmailBubble;
   }
 
-  if (props.contentAttributes.isUnsupported) {
+  if (props.contentType === CONTENT_TYPES.INCOMING_EMAIL) {
+    return EmailBubble;
+  }
+
+  if (props.contentAttributes?.isUnsupported) {
     return UnsupportedBubble;
   }
 
@@ -260,7 +276,7 @@ const componentToRender = computed(() => {
     return InstagramStoryBubble;
   }
 
-  if (props.attachments.length === 1) {
+  if (Array.isArray(props.attachments) && props.attachments.length === 1) {
     const fileType = props.attachments[0].fileType;
 
     if (!props.content) {
@@ -275,26 +291,155 @@ const componentToRender = computed(() => {
     if (fileType === ATTACHMENT_TYPES.CONTACT) return ContactBubble;
   }
 
-  if (props.attachments.length > 1 && !props.content) {
-    return AttachmentsBubble;
-  }
-
   return TextBubble;
 });
 
+const shouldShowContextMenu = computed(() => {
+  return !(
+    props.status === MESSAGE_STATUS.FAILED ||
+    props.status === MESSAGE_STATUS.PROGRESS ||
+    props.contentAttributes?.isUnsupported
+  );
+});
+
+const isBubble = computed(() => {
+  return props.messageType !== MESSAGE_TYPES.ACTIVITY;
+});
+
+const isMessageDeleted = computed(() => {
+  return props.contentAttributes?.deleted;
+});
+
+const payloadForContextMenu = computed(() => {
+  return {
+    id: props.id,
+    content_attributes: props.contentAttributes,
+    content: props.content,
+    conversation_id: props.conversationId,
+  };
+});
+
+const contextMenuEnabledOptions = computed(() => {
+  const hasText = !!props.content;
+  const hasAttachments = !!(props.attachments && props.attachments.length > 0);
+
+  const isOutgoing = props.messageType === MESSAGE_TYPES.OUTGOING;
+
+  return {
+    copy: hasText,
+    delete: hasText || hasAttachments,
+    cannedResponse: isOutgoing && hasText,
+    replyTo: !props.private && props.inboxSupportsReplyTo.outgoing,
+  };
+});
+
+const shouldRenderMessage = computed(() => {
+  const hasAttachments = !!(props.attachments && props.attachments.length > 0);
+  const isEmailContentType = props.contentType === CONTENT_TYPES.INCOMING_EMAIL;
+  const isUnsupported = props.contentAttributes?.isUnsupported;
+  const isAnIntegrationMessage =
+    props.contentType === CONTENT_TYPES.INTEGRATIONS;
+
+  return (
+    hasAttachments ||
+    props.content ||
+    isEmailContentType ||
+    isUnsupported ||
+    isAnIntegrationMessage
+  );
+});
+
+function openContextMenu(e) {
+  const shouldSkipContextMenu =
+    e.target?.classList.contains('skip-context-menu') ||
+    e.target?.tagName.toLowerCase() === 'a';
+  if (shouldSkipContextMenu || getSelection().toString()) {
+    return;
+  }
+
+  e.preventDefault();
+  if (e.type === 'contextmenu') {
+    useTrack(ACCOUNT_EVENTS.OPEN_MESSAGE_CONTEXT_MENU);
+  }
+  contextMenuPosition.value = {
+    x: e.pageX || e.clientX,
+    y: e.pageY || e.clientY,
+  };
+  showContextMenu.value = true;
+}
+
+function closeContextMenu() {
+  showContextMenu.value = false;
+  contextMenuPosition.value = { x: null, y: null };
+}
+
+function handleReplyTo() {
+  const replyStorageKey = LOCAL_STORAGE_KEYS.MESSAGE_REPLY_TO;
+  const { conversationId, id: replyTo } = props;
+
+  LocalStorage.updateJsonStore(replyStorageKey, conversationId, replyTo);
+  emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, props);
+}
+
+const avatarInfo = computed(() => {
+  if (!props.sender || props.sender.type === SENDER_TYPES.AGENT_BOT) {
+    return {
+      name: t('CONVERSATION.BOT'),
+      src: '',
+    };
+  }
+
+  if (props.sender) {
+    return {
+      name: props.sender.name,
+      src: props.sender?.thumbnail,
+    };
+  }
+
+  return {
+    name: '',
+    src: '',
+  };
+});
+
+const setupHighlightTimer = () => {
+  if (Number(route.query.messageId) !== Number(props.id)) {
+    return;
+  }
+
+  showBackgroundHighlight.value = true;
+  const HIGHLIGHT_TIMER = 1000;
+  useTimeoutFn(() => {
+    showBackgroundHighlight.value = false;
+  }, HIGHLIGHT_TIMER);
+};
+
+onMounted(setupHighlightTimer);
+
 provideMessageContext({
+  ...toRefs(props),
+  isPrivate: computed(() => props.private),
   variant,
-  inReplyTo: props.inReplyTo,
   orientation,
   isMyMessage,
+  shouldGroupWithNext,
 });
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <div
-    class="flex w-full"
+    v-if="shouldRenderMessage"
+    :id="`message${props.id}`"
+    class="flex w-full message-bubble-container mb-2"
     :data-message-id="props.id"
-    :class="[flexOrientationClass, shouldGroupWithNext ? 'mb-2' : 'mb-4']"
+    :class="[
+      flexOrientationClass,
+      {
+        'group-with-next': shouldGroupWithNext,
+        'bg-n-alpha-1': showBackgroundHighlight,
+      },
+    ]"
   >
     <div v-if="variant === MESSAGE_VARIANTS.ACTIVITY">
       <ActivityBubble :content="content" />
@@ -304,7 +449,7 @@ provideMessageContext({
       :class="[
         gridClass,
         {
-          'gap-y-2': !shouldGroupWithNext,
+          'gap-y-2': contentAttributes.externalError,
           'w-full': variant === MESSAGE_VARIANTS.EMAIL,
         },
       ]"
@@ -317,19 +462,17 @@ provideMessageContext({
         v-if="!shouldGroupWithNext && shouldShowAvatar"
         class="[grid-area:avatar] flex items-end"
       >
-        <Avatar
-          :name="sender ? sender.name : ''"
-          :src="sender?.thumbnail"
-          :size="24"
-        />
+        <Avatar v-bind="avatarInfo" :size="24" />
       </div>
       <div
-        class="[grid-area:bubble]"
+        class="[grid-area:bubble] flex"
         :class="{
-          'pl-9': ORIENTATION.RIGHT === orientation,
+          'ltr:pl-9 rtl:pl-0 justify-end': orientation === ORIENTATION.RIGHT,
+          'min-w-0': variant === MESSAGE_VARIANTS.EMAIL,
         }"
+        @contextmenu="openContextMenu($event)"
       >
-        <Component :is="componentToRender" v-bind="props" />
+        <Component :is="componentToRender" />
       </div>
       <MessageError
         v-if="contentAttributes.externalError"
@@ -337,16 +480,31 @@ provideMessageContext({
         :class="flexOrientationClass"
         :error="contentAttributes.externalError"
       />
-      <MessageMeta
-        v-else-if="!shouldGroupWithNext"
-        class="[grid-area:meta]"
-        :class="flexOrientationClass"
-        :sender="props.sender"
-        :status="props.status"
-        :private="props.private"
-        :is-my-message="isMyMessage"
-        :created-at="props.createdAt"
+    </div>
+    <div v-if="shouldShowContextMenu" class="context-menu-wrap">
+      <ContextMenu
+        v-if="isBubble && !isMessageDeleted"
+        :context-menu-position="contextMenuPosition"
+        :is-open="showContextMenu"
+        :enabled-options="contextMenuEnabledOptions"
+        :message="payloadForContextMenu"
+        hide-button
+        @open="openContextMenu"
+        @close="closeContextMenu"
+        @reply-to="handleReplyTo"
       />
     </div>
   </div>
 </template>
+
+<style lang="scss">
+.group-with-next + .message-bubble-container {
+  .left-bubble {
+    @apply ltr:rounded-tl-sm rtl:rounded-tr-sm;
+  }
+
+  .right-bubble {
+    @apply ltr:rounded-tr-sm rtl:rounded-tl-sm;
+  }
+}
+</style>

app/javascript/dashboard/components-next/message/MessageError.vue

@@ -1,11 +1,15 @@
 <script setup>
 import Icon from 'next/icon/Icon.vue';
 import { useI18n } from 'vue-i18n';
+import { useMessageContext } from './provider.js';
+import { ORIENTATION } from './constants';
 
 defineProps({
   error: { type: String, required: true },
 });
 
+const { orientation } = useMessageContext();
+
 const { t } = useI18n();
 </script>
 
@@ -22,7 +26,11 @@ const { t } = useI18n();
         />
       </div>
       <div
-        class="absolute bg-n-alpha-3 px-4 py-3 border rounded-xl border-n-strong text-n-slate-12 bottom-6 w-52 right-0 text-xs backdrop-blur-[100px] shadow-[0px_0px_24px_0px_rgba(0,0,0,0.12)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all"
+        class="absolute bg-n-alpha-3 px-4 py-3 border rounded-xl border-n-strong text-n-slate-12 bottom-6 w-52 text-xs backdrop-blur-[100px] shadow-[0px_0px_24px_0px_rgba(0,0,0,0.12)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all"
+        :class="{
+          'ltr:left-0 rtl:right-0': orientation === ORIENTATION.LEFT,
+          'ltr:right-0 rtl:left-0': orientation === ORIENTATION.RIGHT,
+        }"
       >
         {{ error }}
       </div>

app/javascript/dashboard/components-next/message/MessageList.vue

@@ -0,0 +1,136 @@
+<script setup>
+import { defineProps, computed } from 'vue';
+import Message from './Message.vue';
+import { MESSAGE_TYPES } from './constants.js';
+import { useCamelCase } from 'dashboard/composables/useTransformKeys';
+
+/**
+ * Props definition for the component
+ * @typedef {Object} Props
+ * @property {Array} readMessages - Array of read messages
+ * @property {Array} unReadMessages - Array of unread messages
+ * @property {Number} currentUserId - ID of the current user
+ * @property {Boolean} isAnEmailChannel - Whether this is an email channel
+ * @property {Object} inboxSupportsReplyTo - Inbox reply support configuration
+ * @property {Array} messages - Array of all messages [These are not in camelcase]
+ */
+const props = defineProps({
+  readMessages: {
+    type: Array,
+    default: () => [],
+  },
+  unReadMessages: {
+    type: Array,
+    default: () => [],
+  },
+  currentUserId: {
+    type: Number,
+    required: true,
+  },
+  isAnEmailChannel: {
+    type: Boolean,
+    default: false,
+  },
+  inboxSupportsReplyTo: {
+    type: Object,
+    default: () => ({ incoming: false, outgoing: false }),
+  },
+  messages: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const unread = computed(() => {
+  return useCamelCase(props.unReadMessages, { deep: true });
+});
+
+const read = computed(() => {
+  return useCamelCase(props.readMessages, { deep: true });
+});
+
+/**
+ * Determines if a message should be grouped with the next message
+ * @param {Number} index - Index of the current message
+ * @param {Array} searchList - Array of messages to check
+ * @returns {Boolean} - Whether the message should be grouped with next
+ */
+const shouldGroupWithNext = (index, searchList) => {
+  if (index === searchList.length - 1) return false;
+
+  const current = searchList[index];
+  const next = searchList[index + 1];
+
+  if (next.status === 'failed') return false;
+
+  const nextSenderId = next.senderId ?? next.sender?.id;
+  const currentSenderId = current.senderId ?? current.sender?.id;
+  const hasSameSender = nextSenderId === currentSenderId;
+
+  const nextMessageType = next.messageType;
+  const currentMessageType = current.messageType;
+
+  const areBothTemplates =
+    nextMessageType === MESSAGE_TYPES.TEMPLATE &&
+    currentMessageType === MESSAGE_TYPES.TEMPLATE;
+
+  if (!hasSameSender || areBothTemplates) return false;
+
+  if (currentMessageType !== nextMessageType) return false;
+
+  // Check if messages are in the same minute by rounding down to nearest minute
+  return Math.floor(next.createdAt / 60) === Math.floor(current.createdAt / 60);
+};
+
+/**
+ * Gets the message that was replied to
+ * @param {Object} parentMessage - The message containing the reply reference
+ * @returns {Object|null} - The message being replied to, or null if not found
+ */
+const getInReplyToMessage = parentMessage => {
+  if (!parentMessage) return null;
+
+  const inReplyToMessageId =
+    parentMessage.contentAttributes?.inReplyTo ??
+    parentMessage.content_attributes?.in_reply_to;
+
+  if (!inReplyToMessageId) return null;
+
+  // Find in-reply-to message in the messages prop
+  const replyMessage = props.messages?.find(
+    message => message.id === inReplyToMessageId
+  );
+
+  return replyMessage ? useCamelCase(replyMessage) : null;
+};
+</script>
+
+<template>
+  <ul class="px-4 bg-n-background">
+    <slot name="beforeAll" />
+    <template v-for="(message, index) in read" :key="message.id">
+      <Message
+        v-bind="message"
+        :is-email-inbox="isAnEmailChannel"
+        :in-reply-to="getInReplyToMessage(message)"
+        :group-with-next="shouldGroupWithNext(index, read)"
+        :inbox-supports-reply-to="inboxSupportsReplyTo"
+        :current-user-id="currentUserId"
+        data-clarity-mask="True"
+      />
+    </template>
+    <slot name="beforeUnread" />
+    <template v-for="(message, index) in unread" :key="message.id">
+      <Message
+        v-bind="message"
+        :in-reply-to="getInReplyToMessage(message)"
+        :group-with-next="shouldGroupWithNext(index, unread)"
+        :inbox-supports-reply-to="inboxSupportsReplyTo"
+        :current-user-id="currentUserId"
+        :is-email-inbox="isAnEmailChannel"
+        data-clarity-mask="True"
+      />
+    </template>
+    <slot name="after" />
+  </ul>
+</template>

app/javascript/dashboard/components-next/message/MessageMeta.vue

@@ -4,74 +4,116 @@ import { messageTimestamp } from 'shared/helpers/timeHelper';
 
 import MessageStatus from './MessageStatus.vue';
 import Icon from 'next/icon/Icon.vue';
+import { useInbox } from 'dashboard/composables/useInbox';
+import { useMessageContext } from './provider.js';
 
-import { MESSAGE_STATUS } from './constants';
+import { MESSAGE_STATUS, MESSAGE_TYPES } from './constants';
 
-/**
- * @typedef {Object} Sender
- * @property {Object} additional_attributes - Additional attributes of the sender
- * @property {Object} custom_attributes - Custom attributes of the sender
- * @property {string} email - Email of the sender
- * @property {number} id - ID of the sender
- * @property {string|null} identifier - Identifier of the sender
- * @property {string} name - Name of the sender
- * @property {string|null} phone_number - Phone number of the sender
- * @property {string} thumbnail - Thumbnail URL of the sender
- * @property {string} type - Type of sender
- */
+const {
+  isAFacebookInbox,
+  isALineChannel,
+  isAPIInbox,
+  isASmsInbox,
+  isATelegramChannel,
+  isATwilioChannel,
+  isAWebWidgetInbox,
+  isAWhatsAppChannel,
+  isAnEmailChannel,
+} = useInbox();
 
-/**
- * @typedef {Object} Props
- * @property {('sent'|'delivered'|'read'|'failed')} status - The delivery status of the message
- * @property {boolean} [private=false] - Whether the message is private
- * @property {isMyMessage} [private=false] - Whether the message is sent by the current user or not
- * @property {number} createdAt - Timestamp when the message was created
- * @property {Sender|null} [sender=null] - The sender information
- */
-
-const props = defineProps({
-  sender: {
-    type: Object,
-    required: true,
-  },
-  status: {
-    type: String,
-    required: true,
-    validator: value => Object.values(MESSAGE_STATUS).includes(value),
-  },
-  private: {
-    type: Boolean,
-    default: false,
-  },
-  isMyMessage: {
-    type: Boolean,
-    default: false,
-  },
-  createdAt: {
-    type: Number,
-    required: true,
-  },
-});
+const { status, isPrivate, createdAt, sourceId, messageType } =
+  useMessageContext();
 
 const readableTime = computed(() =>
-  messageTimestamp(props.createdAt, 'LLL d, h:mm a')
+  messageTimestamp(createdAt.value, 'LLL d, h:mm a')
 );
 
-const showSender = computed(() => !props.isMyMessage && props.sender);
+const showStatusIndicator = computed(() => {
+  if (isPrivate.value) return false;
+  if (messageType.value === MESSAGE_TYPES.OUTGOING) return true;
+  if (messageType.value === MESSAGE_TYPES.TEMPLATE) return true;
+
+  return false;
+});
+
+const isSent = computed(() => {
+  if (!showStatusIndicator.value) return false;
+
+  // Messages will be marked as sent for the Email channel if they have a source ID.
+  if (isAnEmailChannel.value) return !!sourceId.value;
+
+  if (
+    isAWhatsAppChannel.value ||
+    isATwilioChannel.value ||
+    isAFacebookInbox.value ||
+    isASmsInbox.value ||
+    isATelegramChannel.value
+  ) {
+    return sourceId.value && status.value === MESSAGE_STATUS.SENT;
+  }
+
+  // All messages will be mark as sent for the Line channel, as there is no source ID.
+  if (isALineChannel.value) return true;
+
+  return false;
+});
+
+const isDelivered = computed(() => {
+  if (!showStatusIndicator.value) return false;
+
+  if (
+    isAWhatsAppChannel.value ||
+    isATwilioChannel.value ||
+    isASmsInbox.value ||
+    isAFacebookInbox.value
+  ) {
+    return sourceId.value && status.value === MESSAGE_STATUS.DELIVERED;
+  }
+  // All messages marked as delivered for the web widget inbox and API inbox once they are sent.
+  if (isAWebWidgetInbox.value || isAPIInbox.value) {
+    return status.value === MESSAGE_STATUS.SENT;
+  }
+  if (isALineChannel.value) {
+    return status.value === MESSAGE_STATUS.DELIVERED;
+  }
+
+  return false;
+});
+
+const isRead = computed(() => {
+  if (!showStatusIndicator.value) return false;
+
+  if (
+    isAWhatsAppChannel.value ||
+    isATwilioChannel.value ||
+    isAFacebookInbox.value
+  ) {
+    return sourceId.value && status.value === MESSAGE_STATUS.READ;
+  }
+
+  if (isAWebWidgetInbox.value || isAPIInbox.value) {
+    return status.value === MESSAGE_STATUS.READ;
+  }
+
+  return false;
+});
+
+const statusToShow = computed(() => {
+  if (isRead.value) return MESSAGE_STATUS.READ;
+  if (isDelivered.value) return MESSAGE_STATUS.DELIVERED;
+  if (isSent.value) return MESSAGE_STATUS.SENT;
+
+  return MESSAGE_STATUS.PROGRESS;
+});
 </script>
 
 <template>
-  <div class="text-xs text-n-slate-11 flex items-center gap-1.5">
+  <div class="text-xs flex items-center gap-1.5">
     <div class="inline">
-      <span v-if="showSender" class="inline capitalize">{{ sender.name }}</span>
-      <span v-if="showSender && readableTime" class="inline"> • </span>
-      <span class="inline">{{ readableTime }}</span>
+      <time class="inline">{{ readableTime }}</time>
     </div>
-    <Icon
-      v-if="props.private"
-      icon="i-lucide-lock-keyhole"
-      class="text-n-slate-10 size-3"
-    />
-    <MessageStatus v-if="props.isMyMessage" :status />
+    <Icon v-if="isPrivate" icon="i-lucide-lock-keyhole" class="size-3" />
+    <MessageStatus v-if="showStatusIndicator" :status="statusToShow" />
   </div>
 </template>
+`

app/javascript/dashboard/components-next/message/bubbles/Activity.vue

@@ -1,16 +1,22 @@
 <script setup>
+import { computed } from 'vue';
+import { messageTimestamp } from 'shared/helpers/timeHelper';
 import BaseBubble from './Base.vue';
+import { useMessageContext } from '../provider.js';
 
-defineProps({
-  content: {
-    type: String,
-    required: true,
-  },
-});
+const { content, createdAt } = useMessageContext();
+
+const readableTime = computed(() =>
+  messageTimestamp(createdAt.value, 'LLL d, h:mm a')
+);
 </script>
 
 <template>
-  <BaseBubble class="px-2 py-0.5" data-bubble-name="activity">
-    <span v-dompurify-html="content" />
+  <BaseBubble
+    v-tooltip.top="readableTime"
+    class="px-2 py-0.5 !rounded-full flex min-w-0 items-center gap-2"
+    data-bubble-name="activity"
+  >
+    <span v-dompurify-html="content" :title="content" />
   </BaseBubble>
 </template>

app/javascript/dashboard/components-next/message/bubbles/Attachments.vue

@@ -1,30 +0,0 @@
-<script setup>
-import BaseBubble from 'next/message/bubbles/Base.vue';
-import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
-
-/**
- * @typedef {Object} Attachment
- * @property {number} id - Unique identifier for the attachment
- * @property {number} messageId - ID of the associated message
- * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
- * @property {number} accountId - ID of the associated account
- * @property {string|null} extension - File extension
- * @property {string} dataUrl - URL to access the full attachment data
- * @property {string} thumbUrl - URL to access the thumbnail version
- * @property {number} fileSize - Size of the file in bytes
- * @property {number|null} width - Width of the image if applicable
- * @property {number|null} height - Height of the image if applicable
- */
-defineProps({
-  attachments: {
-    type: Array,
-    default: () => [],
-  },
-});
-</script>
-
-<template>
-  <BaseBubble class="grid gap-2 bg-transparent" data-bubble-name="attachments">
-    <AttachmentChips :attachments="attachments" class="gap-1" />
-  </BaseBubble>
-</template>

app/javascript/dashboard/components-next/message/bubbles/Audio.vue

@@ -2,43 +2,17 @@
 import { computed } from 'vue';
 import BaseBubble from './Base.vue';
 import AudioChip from 'next/message/chips/Audio.vue';
+import { useMessageContext } from '../provider.js';
 
-/**
- * @typedef {Object} Attachment
- * @property {number} id - Unique identifier for the attachment
- * @property {number} messageId - ID of the associated message
- * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
- * @property {number} accountId - ID of the associated account
- * @property {string|null} extension - File extension
- * @property {string} dataUrl - URL to access the full attachment data
- * @property {string} thumbUrl - URL to access the thumbnail version
- * @property {number} fileSize - Size of the file in bytes
- * @property {number|null} width - Width of the image if applicable
- * @property {number|null} height - Height of the image if applicable
- */
-
-/**
- * @typedef {Object} Props
- * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
- */
-
-const props = defineProps({
-  attachments: {
-    type: Array,
-    required: true,
-  },
-});
+const { attachments } = useMessageContext();
 
 const attachment = computed(() => {
-  return props.attachments[0];
+  return attachments.value[0];
 });
 </script>
 
 <template>
   <BaseBubble class="bg-transparent" data-bubble-name="audio">
-    <AudioChip
-      :attachment="attachment"
-      class="p-2 text-n-slate-12 bg-n-alpha-3"
-    />
+    <AudioChip :attachment="attachment" class="p-2 text-n-slate-12" />
   </BaseBubble>
 </template>

app/javascript/dashboard/components-next/message/bubbles/Base.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from 'vue';
 
+import MessageMeta from '../MessageMeta.vue';
+
 import { emitter } from 'shared/helpers/mitt';
 import { useMessageContext } from '../provider.js';
 import { useI18n } from 'vue-i18n';
@@ -8,29 +10,42 @@ import { useI18n } from 'vue-i18n';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { MESSAGE_VARIANTS, ORIENTATION } from '../constants';
 
-const { variant, orientation, inReplyTo } = useMessageContext();
+const { variant, orientation, inReplyTo, shouldGroupWithNext } =
+  useMessageContext();
 const { t } = useI18n();
 
 const varaintBaseMap = {
   [MESSAGE_VARIANTS.AGENT]: 'bg-n-solid-blue text-n-slate-12',
   [MESSAGE_VARIANTS.PRIVATE]:
     'bg-n-solid-amber text-n-amber-12 [&_.prosemirror-mention-node]:font-semibold',
-  [MESSAGE_VARIANTS.USER]: 'bg-n-slate-4 text-n-slate-12',
+  [MESSAGE_VARIANTS.USER]: 'bg-n-gray-3 text-n-slate-12',
   [MESSAGE_VARIANTS.ACTIVITY]: 'bg-n-alpha-1 text-n-slate-11 text-sm',
   [MESSAGE_VARIANTS.BOT]: 'bg-n-solid-iris text-n-slate-12',
   [MESSAGE_VARIANTS.TEMPLATE]: 'bg-n-solid-iris text-n-slate-12',
   [MESSAGE_VARIANTS.ERROR]: 'bg-n-ruby-4 text-n-ruby-12',
-  [MESSAGE_VARIANTS.EMAIL]: 'bg-n-alpha-2 w-full',
+  [MESSAGE_VARIANTS.EMAIL]: 'bg-n-gray-3 w-full',
   [MESSAGE_VARIANTS.UNSUPPORTED]:
     'bg-n-solid-amber/70 border border-dashed border-n-amber-12 text-n-amber-12',
 };
 
 const orientationMap = {
-  [ORIENTATION.LEFT]: 'rounded-xl rounded-bl-sm',
-  [ORIENTATION.RIGHT]: 'rounded-xl rounded-br-sm',
+  [ORIENTATION.LEFT]:
+    'left-bubble rounded-xl ltr:rounded-bl-sm rtl:rounded-br-sm',
+  [ORIENTATION.RIGHT]:
+    'right-bubble rounded-xl ltr:rounded-br-sm rtl:rounded-bl-sm',
   [ORIENTATION.CENTER]: 'rounded-md',
 };
 
+const flexOrientationClass = computed(() => {
+  const map = {
+    [ORIENTATION.LEFT]: 'justify-start',
+    [ORIENTATION.RIGHT]: 'justify-end',
+    [ORIENTATION.CENTER]: 'justify-center',
+  };
+
+  return map[orientation.value];
+});
+
 const messageClass = computed(() => {
   const classToApply = [varaintBaseMap[variant.value]];
 
@@ -45,14 +60,14 @@ const messageClass = computed(() => {
 
 const scrollToMessage = () => {
   emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE, {
-    messageId: this.message.id,
+    messageId: inReplyTo.value.id,
   });
 };
 
-const previewMessage = computed(() => {
+const replyToPreview = computed(() => {
   if (!inReplyTo) return '';
 
-  const { content, attachments } = inReplyTo;
+  const { content, attachments } = inReplyTo.value;
 
   if (content) return content;
   if (attachments?.length) {
@@ -68,23 +83,34 @@ const previewMessage = computed(() => {
 
 <template>
   <div
-    class="text-sm min-w-32 break-words"
+    class="text-sm"
     :class="[
       messageClass,
       {
-        'max-w-md': variant !== MESSAGE_VARIANTS.EMAIL,
+        'max-w-lg': variant !== MESSAGE_VARIANTS.EMAIL,
       },
     ]"
   >
     <div
       v-if="inReplyTo"
-      class="bg-n-alpha-black1 rounded-lg p-2"
+      class="bg-n-alpha-black1 rounded-lg p-2 -mx-1 mb-2 cursor-pointer"
       @click="scrollToMessage"
     >
-      <span class="line-clamp-2">
-        {{ previewMessage }}
+      <span class="line-clamp-2 break-all">
+        {{ replyToPreview }}
       </span>
     </div>
     <slot />
+    <MessageMeta
+      v-if="!shouldGroupWithNext && variant !== MESSAGE_VARIANTS.ACTIVITY"
+      :class="[
+        flexOrientationClass,
+        variant === MESSAGE_VARIANTS.EMAIL ? 'px-3 pb-3' : '',
+        variant === MESSAGE_VARIANTS.PRIVATE
+          ? 'text-n-amber-12/50'
+          : 'text-n-slate-11',
+      ]"
+      class="mt-2"
+    />
   </div>
 </template>

app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue

@@ -3,11 +3,11 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import BaseBubble from './Base.vue';
 import Icon from 'next/icon/Icon.vue';
+import { useMessageContext } from '../provider.js';
 
-const props = defineProps({
+defineProps({
   icon: { type: [String, Object], required: true },
   iconBgColor: { type: String, default: 'bg-n-alpha-3' },
-  sender: { type: Object, default: () => ({}) },
   senderTranslationKey: { type: String, required: true },
   content: { type: String, required: true },
   action: {
@@ -19,60 +19,59 @@ const props = defineProps({
   },
 });
 
+const { sender } = useMessageContext();
 const { t } = useI18n();
 
 const senderName = computed(() => {
-  return props.sender.name;
+  return sender?.value.name;
 });
 </script>
 
 <template>
-  <BaseBubble
-    class="overflow-hidden grid gap-4 min-w-64 p-0"
-    data-bubble-name="attachment"
-  >
-    <slot name="before" />
-    <div class="grid gap-3 px-3 pt-3 z-20">
-      <div
-        class="size-8 rounded-lg grid place-content-center"
-        :class="iconBgColor"
-      >
-        <slot name="icon">
-          <Icon :icon="icon" class="text-white size-4" />
-        </slot>
-      </div>
-      <div class="space-y-1">
-        <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
-          {{
-            t(senderTranslationKey, {
-              sender: senderName,
-            })
-          }}
+  <BaseBubble class="overflow-hidden p-3" data-bubble-name="attachment">
+    <div class="grid gap-4 min-w-64">
+      <div class="grid gap-3 z-20">
+        <div
+          class="size-8 rounded-lg grid place-content-center"
+          :class="iconBgColor"
+        >
+          <slot name="icon">
+            <Icon :icon="icon" class="text-white size-4" />
+          </slot>
         </div>
-        <slot>
-          <div v-if="content" class="truncate text-sm text-n-slate-11">
-            {{ content }}
+        <div class="space-y-1">
+          <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
+            {{
+              t(senderTranslationKey, {
+                sender: senderName,
+              })
+            }}
           </div>
-        </slot>
+          <slot>
+            <div v-if="content" class="truncate text-sm text-n-slate-11">
+              {{ content }}
+            </div>
+          </slot>
+        </div>
+      </div>
+      <div v-if="action" class="mb-2">
+        <a
+          v-if="action.href"
+          :href="action.href"
+          rel="noreferrer noopener nofollow"
+          target="_blank"
+          class="w-full block bg-n-solid-3 px-4 py-2 rounded-lg text-sm text-center border border-n-container"
+        >
+          {{ action.label }}
+        </a>
+        <button
+          v-else
+          class="w-full bg-n-solid-3 px-4 py-2 rounded-lg text-sm text-center border border-n-container"
+          @click="action.onClick"
+        >
+          {{ action.label }}
+        </button>
       </div>
-    </div>
-    <div v-if="action" class="px-3 pb-3">
-      <a
-        v-if="action.href"
-        :href="action.href"
-        rel="noreferrer noopener nofollow"
-        target="_blank"
-        class="w-full block bg-n-solid-3 px-4 py-2 rounded-lg text-sm text-center"
-      >
-        {{ action.label }}
-      </a>
-      <button
-        v-else
-        class="w-full bg-n-solid-3 px-4 py-2 rounded-lg text-sm"
-        @click="action.onClick"
-      >
-        {{ action.label }}
-      </button>
     </div>
   </BaseBubble>
 </template>

app/javascript/dashboard/components-next/message/bubbles/Contact.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useAlert } from 'dashboard/composables';
 import { useStore } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
+import { useMessageContext } from '../provider.js';
 import BaseAttachmentBubble from './BaseAttachment.vue';
 
 import {
@@ -10,45 +11,13 @@ import {
   ExceptionWithMessage,
 } from 'shared/helpers/CustomErrors';
 
-/**
- * @typedef {Object} Attachment
- * @property {number} id - Unique identifier for the attachment
- * @property {number} messageId - ID of the associated message
- * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
- * @property {number} accountId - ID of the associated account
- * @property {string|null} extension - File extension
- * @property {string} dataUrl - URL to access the full attachment data
- * @property {string} thumbUrl - URL to access the thumbnail version
- * @property {number} fileSize - Size of the file in bytes
- * @property {number|null} width - Width of the image if applicable
- * @property {number|null} height - Height of the image if applicable
- */
-
-/**
- * @typedef {Object} Props
- * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
- */
-
-const props = defineProps({
-  content: {
-    type: String,
-    required: true,
-  },
-  attachments: {
-    type: Array,
-    required: true,
-  },
-  sender: {
-    type: Object,
-    default: () => ({}),
-  },
-});
+const { content, attachments } = useMessageContext();
 
 const $store = useStore();
 const { t } = useI18n();
 
 const attachment = computed(() => {
-  return props.attachments[0];
+  return attachments.value[0];
 });
 
 const phoneNumber = computed(() => {
@@ -64,7 +33,7 @@ const rawPhoneNumber = computed(() => {
 });
 
 const name = computed(() => {
-  return props.content;
+  return content.value;
 });
 
 function getContactObject() {
@@ -129,7 +98,6 @@ const action = computed(() => ({
   <BaseAttachmentBubble
     icon="i-teenyicons-user-circle-solid"
     icon-bg-color="bg-[#D6409F]"
-    :sender="sender"
     sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.CONTACT"
     :content="phoneNumber"
     :action="formattedPhoneNumber ? action : null"

app/javascript/dashboard/components-next/message/bubbles/Dyte.vue

@@ -5,23 +5,16 @@ import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
 import { useCamelCase } from 'dashboard/composables/useTransformKeys';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
+
+import { useMessageContext } from '../provider.js';
 import BaseAttachmentBubble from './BaseAttachment.vue';
 
-const props = defineProps({
-  contentAttributes: {
-    type: String,
-    required: true,
-  },
-  sender: {
-    type: Object,
-    default: () => ({}),
-  },
-});
+const { contentAttributes } = useMessageContext();
 
 const { t } = useI18n();
 
 const meetingData = computed(() => {
-  return useCamelCase(props.contentAttributes.data);
+  return useCamelCase(contentAttributes.value.data);
 });
 
 const isLoading = ref(false);
@@ -57,7 +50,6 @@ const action = computed(() => ({
   <BaseAttachmentBubble
     icon="i-ph-video-camera-fill"
     icon-bg-color="bg-[#2781F6]"
-    :sender="sender"
     sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.MEETING"
     :action="action"
   >

app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue

@@ -1,57 +1,44 @@
 <script setup>
 import { computed } from 'vue';
 import { MESSAGE_STATUS } from '../../constants';
+import { useMessageContext } from '../../provider.js';
 
-const props = defineProps({
-  contentAttributes: {
-    type: Object,
-    default: () => ({}),
-  },
-  status: {
-    type: String,
-    required: true,
-    validator: value => Object.values(MESSAGE_STATUS).includes(value),
-  },
-  sender: {
-    type: Object,
-    default: () => ({}),
-  },
-});
+const { contentAttributes, status, sender } = useMessageContext();
 
 const hasError = computed(() => {
-  return props.status === MESSAGE_STATUS.FAILED;
+  return status.value === MESSAGE_STATUS.FAILED;
 });
 
 const fromEmail = computed(() => {
-  return props.contentAttributes?.email?.from ?? [];
+  return contentAttributes.value?.email?.from ?? [];
 });
 
 const toEmail = computed(() => {
-  return props.contentAttributes?.email?.to ?? [];
+  return contentAttributes.value?.email?.to ?? [];
 });
 
 const ccEmail = computed(() => {
   return (
-    props.contentAttributes?.ccEmails ??
-    props.contentAttributes?.email?.cc ??
+    contentAttributes.value?.ccEmails ??
+    contentAttributes.value?.email?.cc ??
     []
   );
 });
 
 const senderName = computed(() => {
-  return props.sender.name ?? '';
+  return sender.value.name ?? '';
 });
 
 const bccEmail = computed(() => {
   return (
-    props.contentAttributes?.bccEmails ??
-    props.contentAttributes?.email?.bcc ??
+    contentAttributes.value?.bccEmails ??
+    contentAttributes.value?.email?.bcc ??
     []
   );
 });
 
 const subject = computed(() => {
-  return props.contentAttributes?.email?.subject ?? '';
+  return contentAttributes.value?.email?.subject ?? '';
 });
 
 const showMeta = computed(() => {
@@ -68,7 +55,7 @@ const showMeta = computed(() => {
 <template>
   <section
     v-show="showMeta"
-    class="p-4 space-y-1 pr-9 border-b border-n-strong"
+    class="space-y-1 rtl:pl-9 ltr:pr-9 border-b border-n-strong text-sm break-words"
     :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
   >
     <template v-if="showMeta">

app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue

@@ -7,37 +7,13 @@ import { EmailQuoteExtractor } from './removeReply.js';
 import BaseBubble from 'next/message/bubbles/Base.vue';
 import FormattedContent from 'next/message/bubbles/Text/FormattedContent.vue';
 import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
-
 import EmailMeta from './EmailMeta.vue';
-import { MESSAGE_STATUS, MESSAGE_TYPES } from '../../constants';
 
-const props = defineProps({
-  content: {
-    type: String,
-    required: true,
-  },
-  contentAttributes: {
-    type: Object,
-    default: () => ({}),
-  },
-  attachments: {
-    type: Array,
-    default: () => [],
-  },
-  status: {
-    type: String,
-    required: true,
-    validator: value => Object.values(MESSAGE_STATUS).includes(value),
-  },
-  sender: {
-    type: Object,
-    default: () => ({}),
-  },
-  messageType: {
-    type: Number,
-    required: true,
-  },
-});
+import { useMessageContext } from '../../provider.js';
+import { MESSAGE_TYPES } from 'next/message/constants.js';
+
+const { content, contentAttributes, attachments, messageType } =
+  useMessageContext();
 
 const isExpandable = ref(false);
 const isExpanded = ref(false);
@@ -45,15 +21,15 @@ const showQuotedMessage = ref(false);
 const contentContainer = useTemplateRef('contentContainer');
 
 onMounted(() => {
-  isExpandable.value = contentContainer.value.scrollHeight > 400;
+  isExpandable.value = contentContainer.value?.scrollHeight > 400;
 });
 
 const isOutgoing = computed(() => {
-  return props.messageType === MESSAGE_TYPES.OUTGOING;
+  return messageType.value === MESSAGE_TYPES.OUTGOING;
 });
 
 const fullHTML = computed(() => {
-  return props.contentAttributes?.email?.htmlContent?.full ?? props.content;
+  return contentAttributes?.value?.email?.htmlContent?.full ?? content.value;
 });
 
 const unquotedHTML = computed(() => {
@@ -66,67 +42,77 @@ const hasQuotedMessage = computed(() => {
 
 const textToShow = computed(() => {
   const text =
-    props.contentAttributes?.email?.textContent?.full ?? props.content;
-  return text.replace(/\n/g, '<br>');
+    contentAttributes?.value?.email?.textContent?.full ?? content.value;
+  return text?.replace(/\n/g, '<br>');
 });
 </script>
 
 <template>
-  <BaseBubble class="w-full overflow-hidden" data-bubble-name="email">
-    <EmailMeta :status :sender :content-attributes />
-    <section
-      ref="contentContainer"
-      class="p-4"
-      :class="{
-        'max-h-[400px] overflow-hidden relative': !isExpanded && isExpandable,
-      }"
-    >
+  <BaseBubble class="w-full" data-bubble-name="email">
+    <EmailMeta class="p-3" />
+    <section ref="contentContainer" class="p-3">
       <div
-        v-if="isExpandable && !isExpanded"
-        class="absolute left-0 right-0 bottom-0 h-40 p-8 flex items-end bg-gradient-to-t dark:from-[#24252b] from-[#F5F5F6] dark:via-[rgba(36,37,43,0.5)] via-[rgba(245,245,246,0.50)] dark:to-transparent to-[rgba(245,245,246,0.00)]"
+        :class="{
+          'max-h-[400px] overflow-hidden relative': !isExpanded && isExpandable,
+          'overflow-y-scroll relative': isExpanded,
+        }"
       >
-        <button
-          class="text-n-slate-12 py-2 px-8 mx-auto text-center flex items-center gap-2"
-          @click="isExpanded = true"
+        <div
+          v-if="isExpandable && !isExpanded"
+          class="absolute left-0 right-0 bottom-0 h-40 px-8 flex items-end bg-gradient-to-t from-n-gray-3 via-n-gray-3 via-20% to-transparent"
         >
-          <Icon icon="i-lucide-maximize-2" />
-          {{ $t('EMAIL_HEADER.EXPAND') }}
+          <button
+            class="text-n-slate-12 py-2 px-8 mx-auto text-center flex items-center gap-2"
+            @click="isExpanded = true"
+          >
+            <Icon icon="i-lucide-maximize-2" />
+            {{ $t('EMAIL_HEADER.EXPAND') }}
+          </button>
+        </div>
+        <FormattedContent
+          v-if="isOutgoing && content"
+          class="text-n-slate-12"
+          :content="content"
+        />
+        <template v-else>
+          <Letter
+            v-if="showQuotedMessage"
+            class-name="prose prose-bubble !max-w-none"
+            :html="fullHTML"
+            :text="textToShow"
+          />
+          <Letter
+            v-else
+            class-name="prose prose-bubble !max-w-none"
+            :html="unquotedHTML"
+            :text="textToShow"
+          />
+        </template>
+        <button
+          v-if="hasQuotedMessage"
+          class="text-n-slate-11 px-1 leading-none text-sm bg-n-alpha-black2 text-center flex items-center gap-1 mt-2"
+          @click="showQuotedMessage = !showQuotedMessage"
+        >
+          <template v-if="showQuotedMessage">
+            {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
+          </template>
+          <template v-else>
+            {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
+          </template>
+          <Icon
+            :icon="
+              showQuotedMessage
+                ? 'i-lucide-chevron-up'
+                : 'i-lucide-chevron-down'
+            "
+          />
         </button>
       </div>
-      <FormattedContent v-if="isOutgoing && content" :content="content" />
-      <template v-else>
-        <Letter
-          v-if="showQuotedMessage"
-          class-name="prose prose-email !max-w-none"
-          :html="fullHTML"
-          :text="textToShow"
-        />
-        <Letter
-          v-else
-          class-name="prose prose-email !max-w-none"
-          :html="unquotedHTML"
-          :text="textToShow"
-        />
-      </template>
-      <button
-        v-if="hasQuotedMessage"
-        class="text-n-slate-11 px-1 leading-none text-sm bg-n-alpha-black2 text-center flex items-center gap-1 mt-2"
-        @click="showQuotedMessage = !showQuotedMessage"
-      >
-        <template v-if="showQuotedMessage">
-          {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
-        </template>
-        <template v-else>
-          {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
-        </template>
-        <Icon
-          :icon="
-            showQuotedMessage ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'
-          "
-        />
-      </button>
     </section>
-    <section v-if="attachments.length" class="px-4 pb-4 space-y-2">
+    <section
+      v-if="Array.isArray(attachments) && attachments.length"
+      class="px-4 pb-4 space-y-2"
+    >
       <AttachmentChips :attachments="attachments" class="gap-1" />
     </section>
   </BaseBubble>

app/javascript/dashboard/components-next/message/bubbles/File.vue

@@ -2,43 +2,16 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import { useMessageContext } from '../provider.js';
 import BaseAttachmentBubble from './BaseAttachment.vue';
 import FileIcon from 'next/icon/FileIcon.vue';
 
-/**
- * @typedef {Object} Attachment
- * @property {number} id - Unique identifier for the attachment
- * @property {number} messageId - ID of the associated message
- * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
- * @property {number} accountId - ID of the associated account
- * @property {string|null} extension - File extension
- * @property {string} dataUrl - URL to access the full attachment data
- * @property {string} thumbUrl - URL to access the thumbnail version
- * @property {number} fileSize - Size of the file in bytes
- * @property {number|null} width - Width of the image if applicable
- * @property {number|null} height - Height of the image if applicable
- */
-
-/**
- * @typedef {Object} Props
- * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
- */
-
-const props = defineProps({
-  attachments: {
-    type: Array,
-    required: true,
-  },
-  sender: {
-    type: Object,
-    default: () => ({}),
-  },
-});
+const { attachments } = useMessageContext();
 
 const { t } = useI18n();
 
 const url = computed(() => {
-  return props.attachments[0].dataUrl;
+  return attachments.value[0].dataUrl;
 });
 
 const fileName = computed(() => {
@@ -58,7 +31,6 @@ const fileType = computed(() => {
   <BaseAttachmentBubble
     icon="i-teenyicons-user-circle-solid"
     icon-bg-color="bg-n-alpha-3 dark:bg-n-alpha-white"
-    :sender="sender"
     sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.FILE"
     :content="decodeURI(fileName)"
     :action="{

app/javascript/dashboard/components-next/message/bubbles/Image.vue

@@ -4,44 +4,18 @@ import BaseBubble from './Base.vue';
 import Button from 'next/button/Button.vue';
 import Icon from 'next/icon/Icon.vue';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
-import { useMessageContext } from 'next/message/provider.js';
+import { useMessageContext } from '../provider.js';
 import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
 
-/**
- * @typedef {Object} Attachment
- * @property {number} id - Unique identifier for the attachment
- * @property {number} messageId - ID of the associated message
- * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
- * @property {number} accountId - ID of the associated account
- * @property {string|null} extension - File extension
- * @property {string} dataUrl - URL to access the full attachment data
- * @property {string} thumbUrl - URL to access the thumbnail version
- * @property {number} fileSize - Size of the file in bytes
- * @property {number|null} width - Width of the image if applicable
- * @property {number|null} height - Height of the image if applicable
- */
-
-/**
- * @typedef {Object} Props
- * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
- */
-
-const props = defineProps({
-  attachments: {
-    type: Array,
-    required: true,
-  },
-});
-
 const emit = defineEmits(['error']);
+const { filteredCurrentChatAttachments, attachments } = useMessageContext();
 
 const attachment = computed(() => {
-  return props.attachments[0];
+  return attachments.value[0];
 });
 
 const hasError = ref(false);
 const showGallery = ref(false);
-const { filteredCurrentChatAttachments } = useMessageContext();
 
 const handleError = () => {
   hasError.value = true;
@@ -64,20 +38,17 @@ const downloadAttachment = async () => {
 
 <template>
   <BaseBubble
-    class="overflow-hidden relative group border-[4px] border-n-weak"
+    class="overflow-hidden p-3"
     data-bubble-name="image"
     @click="showGallery = true"
   >
-    <div
-      v-if="hasError"
-      class="flex items-center gap-1 px-5 py-4 text-center rounded-lg bg-n-alpha-1"
-    >
+    <div v-if="hasError" class="flex items-center gap-1 text-center rounded-lg">
       <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
       <p class="mb-0 text-n-slate-11">
         {{ $t('COMPONENTS.MEDIA.IMAGE_UNAVAILABLE') }}
       </p>
     </div>
-    <template v-else>
+    <div v-else class="relative group rounded-lg overflow-hidden">
       <img
         :src="attachment.dataUrl"
         :width="attachment.width"
@@ -98,7 +69,7 @@ const downloadAttachment = async () => {
           @click="downloadAttachment"
         />
       </div>
-    </template>
+    </div>
   </BaseBubble>
   <GalleryView
     v-if="showGallery"

app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue

@@ -7,46 +7,22 @@ import BaseBubble from 'next/message/bubbles/Base.vue';
 import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 import { MESSAGE_VARIANTS } from '../constants';
 
-/**
- * @typedef {Object} Attachment
- * @property {number} id - Unique identifier for the attachment
- * @property {number} messageId - ID of the associated message
- * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
- * @property {number} accountId - ID of the associated account
- * @property {string|null} extension - File extension
- * @property {string} dataUrl - URL to access the full attachment data
- * @property {string} thumbUrl - URL to access the thumbnail version
- * @property {number} fileSize - Size of the file in bytes
- * @property {number|null} width - Width of the image if applicable
- * @property {number|null} height - Height of the image if applicable
- */
-const props = defineProps({
-  content: {
-    type: String,
-    required: true,
-  },
-  attachments: {
-    type: Array,
-    default: () => [],
-  },
-});
-
 const emit = defineEmits(['error']);
+const { variant, content, attachments } = useMessageContext();
 
 const attachment = computed(() => {
-  return props.attachments[0];
+  return attachments.value[0];
 });
 
-const { variant } = useMessageContext();
 const hasImgStoryError = ref(false);
 const hasVideoStoryError = ref(false);
 
 const formattedContent = computed(() => {
   if (variant.value === MESSAGE_VARIANTS.ACTIVITY) {
-    return props.content;
+    return content.value;
   }
 
-  return new MessageFormatter(props.content).formattedMessage;
+  return new MessageFormatter(content.value).formattedMessage;
 });
 
 const onImageLoadError = () => {
@@ -62,7 +38,7 @@ const onVideoLoadError = () => {
 
 <template>
   <BaseBubble class="p-3 overflow-hidden" data-bubble-name="ig-story">
-    <div v-if="content" class="mb-2" v-html="formattedContent" />
+    <div v-if="content" v-dompurify-html="formattedContent" class="mb-2" />
     <img
       v-if="!hasImgStoryError"
       class="rounded-lg max-w-80"

app/javascript/dashboard/components-next/message/bubbles/Location.vue

@@ -1,43 +1,14 @@
 <script setup>
-import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
+import { computed } from 'vue';
 import BaseAttachmentBubble from './BaseAttachment.vue';
 import { useI18n } from 'vue-i18n';
-import maplibregl from 'maplibre-gl';
-
-/**
- * @typedef {Object} Attachment
- * @property {number} id - Unique identifier for the attachment
- * @property {number} messageId - ID of the associated message
- * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
- * @property {number} accountId - ID of the associated account
- * @property {string|null} extension - File extension
- * @property {string} dataUrl - URL to access the full attachment data
- * @property {string} thumbUrl - URL to access the thumbnail version
- * @property {number} fileSize - Size of the file in bytes
- * @property {number|null} width - Width of the image if applicable
- * @property {number|null} height - Height of the image if applicable
- */
-
-/**
- * @typedef {Object} Props
- * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
- */
-
-const props = defineProps({
-  attachments: {
-    type: Array,
-    required: true,
-  },
-  sender: {
-    type: Object,
-    default: () => ({}),
-  },
-});
+import { useMessageContext } from '../provider.js';
 
+const { attachments } = useMessageContext();
 const { t } = useI18n();
 
 const attachment = computed(() => {
-  return props.attachments[0];
+  return attachments.value[0];
 });
 
 const lat = computed(() => {
@@ -48,61 +19,23 @@ const long = computed(() => {
 });
 
 const title = computed(() => {
-  return attachment.value.fallbackTitle;
+  return attachment.value.fallbackTitle ?? attachment.value.fallback_title;
 });
 
 const mapUrl = computed(
   () => `https://maps.google.com/?q=${lat.value},${long.value}`
 );
-
-const mapContainer = useTemplateRef('mapContainer');
-
-const setupMap = () => {
-  const map = new maplibregl.Map({
-    style: 'https://tiles.openfreemap.org/styles/positron',
-    center: [long.value, lat.value],
-    zoom: 9.5,
-    container: mapContainer.value,
-    attributionControl: false,
-    dragPan: false,
-    dragRotate: false,
-    scrollZoom: false,
-    touchZoom: false,
-    touchRotate: false,
-    keyboard: false,
-    doubleClickZoom: false,
-  });
-
-  return map;
-};
-
-onMounted(async () => {
-  await nextTick();
-  setupMap();
-});
 </script>
 
 <template>
   <BaseAttachmentBubble
     icon="i-ph-navigation-arrow-fill"
     icon-bg-color="bg-[#0D9B8A]"
-    :sender="sender"
     sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.LOCATION"
     :content="title"
     :action="{
       label: t('COMPONENTS.LOCATION_BUBBLE.SEE_ON_MAP'),
       href: mapUrl,
     }"
-  >
-    <template #before>
-      <div
-        ref="mapContainer"
-        class="z-10 w-full max-w-md -mb-12 min-w-64 h-28"
-      />
-    </template>
-  </BaseAttachmentBubble>
+  />
 </template>
-
-<style>
-@import 'maplibre-gl/dist/maplibre-gl.css';
-</style>

app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue

@@ -24,8 +24,5 @@ const formattedContent = computed(() => {
 </script>
 
 <template>
-  <span
-    v-dompurify-html="formattedContent"
-    class="[&>p:last-child]:mb-0 [&>ul]:list-inside"
-  />
+  <span v-dompurify-html="formattedContent" class="prose prose-bubble" />
 </template>

app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue

@@ -4,57 +4,37 @@ import BaseBubble from 'next/message/bubbles/Base.vue';
 import FormattedContent from './FormattedContent.vue';
 import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
 import { MESSAGE_TYPES } from '../../constants';
+import { useMessageContext } from '../../provider.js';
 
-/**
- * @typedef {Object} Attachment
- * @property {number} id - Unique identifier for the attachment
- * @property {number} messageId - ID of the associated message
- * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
- * @property {number} accountId - ID of the associated account
- * @property {string|null} extension - File extension
- * @property {string} dataUrl - URL to access the full attachment data
- * @property {string} thumbUrl - URL to access the thumbnail version
- * @property {number} fileSize - Size of the file in bytes
- * @property {number|null} width - Width of the image if applicable
- * @property {number|null} height - Height of the image if applicable
- */
-const props = defineProps({
-  content: {
-    type: String,
-    required: true,
-  },
-  attachments: {
-    type: Array,
-    default: () => [],
-  },
-  contentAttributes: {
-    type: Object,
-    default: () => ({}),
-  },
-  messageType: {
-    type: Number,
-    required: true,
-    validator: value => Object.values(MESSAGE_TYPES).includes(value),
-  },
-});
+const { content, attachments, contentAttributes, messageType } =
+  useMessageContext();
 
 const isTemplate = computed(() => {
-  return props.messageType === MESSAGE_TYPES.TEMPLATE;
+  return messageType.value === MESSAGE_TYPES.TEMPLATE;
+});
+
+const isEmpty = computed(() => {
+  return !content.value && !attachments.value?.length;
 });
 </script>
 
 <template>
-  <BaseBubble class="flex flex-col gap-3 px-4 py-3" data-bubble-name="text">
-    <FormattedContent v-if="content" :content="content" />
-    <AttachmentChips :attachments="attachments" class="gap-2" />
-    <template v-if="isTemplate">
-      <div
-        v-if="contentAttributes.submittedEmail"
-        class="px-2 py-1 rounded-lg bg-n-alpha-3"
-      >
-        {{ contentAttributes.submittedEmail }}
-      </div>
-    </template>
+  <BaseBubble class="px-4 py-3" data-bubble-name="text">
+    <div class="gap-3 flex flex-col">
+      <span v-if="isEmpty" class="text-n-slate-11">
+        {{ $t('CONVERSATION.NO_CONTENT') }}
+      </span>
+      <FormattedContent v-if="content" :content="content" />
+      <AttachmentChips :attachments="attachments" class="gap-2" />
+      <template v-if="isTemplate">
+        <div
+          v-if="contentAttributes.submittedEmail"
+          class="px-2 py-1 rounded-lg bg-n-alpha-3"
+        >
+          {{ contentAttributes.submittedEmail }}
+        </div>
+      </template>
+    </div>
   </BaseBubble>
 </template>
 

app/javascript/dashboard/components-next/message/bubbles/Video.vue

@@ -3,39 +3,14 @@ import { ref, computed } from 'vue';
 import BaseBubble from './Base.vue';
 import Icon from 'next/icon/Icon.vue';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
-import { useMessageContext } from 'next/message/provider.js';
+import { useMessageContext } from '../provider.js';
 import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
 import { ATTACHMENT_TYPES } from '../constants';
 
-/**
- * @typedef {Object} Attachment
- * @property {number} id - Unique identifier for the attachment
- * @property {number} messageId - ID of the associated message
- * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
- * @property {number} accountId - ID of the associated account
- * @property {string|null} extension - File extension
- * @property {string} dataUrl - URL to access the full attachment data
- * @property {string} thumbUrl - URL to access the thumbnail version
- * @property {number} fileSize - Size of the file in bytes
- * @property {number|null} width - Width of the image if applicable
- * @property {number|null} height - Height of the image if applicable
- */
-
-/**
- * @typedef {Object} Props
- * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
- */
-
-const props = defineProps({
-  attachments: {
-    type: Array,
-    required: true,
-  },
-});
 const emit = defineEmits(['error']);
 const hasError = ref(false);
 const showGallery = ref(false);
-const { filteredCurrentChatAttachments } = useMessageContext();
+const { filteredCurrentChatAttachments, attachments } = useMessageContext();
 
 const handleError = () => {
   hasError.value = true;
@@ -43,7 +18,7 @@ const handleError = () => {
 };
 
 const attachment = computed(() => {
-  return props.attachments[0];
+  return attachments.value[0];
 });
 
 const isReel = computed(() => {
@@ -53,25 +28,28 @@ const isReel = computed(() => {
 
 <template>
   <BaseBubble
-    class="overflow-hidden relative group border-[4px] border-n-weak"
+    class="overflow-hidden p-3"
     data-bubble-name="video"
     @click="showGallery = true"
   >
-    <div
-      v-if="isReel"
-      class="absolute p-2 flex items-start justify-end size-12 bg-gradient-to-bl from-n-alpha-black1 to-transparent right-0"
-    >
-      <Icon icon="i-lucide-instagram" class="text-white" />
+    <div class="relative group rounded-lg overflow-hidden">
+      <div
+        v-if="isReel"
+        class="absolute p-2 flex items-start justify-end right-0"
+      >
+        <Icon icon="i-lucide-instagram" class="text-white shadow-lg" />
+      </div>
+      <video
+        controls
+        class="rounded-lg"
+        :src="attachment.dataUrl"
+        :class="{
+          'max-w-48': isReel,
+          'max-w-full': !isReel,
+        }"
+        @error="handleError"
+      />
     </div>
-    <video
-      controls
-      :src="attachment.dataUrl"
-      :class="{
-        'max-w-48': isReel,
-        'max-w-full': !isReel,
-      }"
-      @error="handleError"
-    />
   </BaseBubble>
   <GalleryView
     v-if="showGallery"

app/javascript/dashboard/components-next/message/chips/Audio.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useTemplateRef, ref } from 'vue';
+import { computed, onMounted, useTemplateRef, ref } from 'vue';
 import Icon from 'next/icon/Icon.vue';
 import { timeStampAppendedURL } from 'dashboard/helper/URLHelper';
 
@@ -26,9 +26,16 @@ const currentTime = ref(0);
 const duration = ref(0);
 
 const onLoadedMetadata = () => {
-  duration.value = audioPlayer.value.duration;
+  duration.value = audioPlayer.value?.duration;
 };
 
+// There maybe a chance that the audioPlayer ref is not available
+// When the onLoadMetadata is called, so we need to set the duration
+// value when the component is mounted
+onMounted(() => {
+  duration.value = audioPlayer.value?.duration;
+});
+
 const formatTime = time => {
   const minutes = Math.floor(time / 60);
   const seconds = Math.floor(time % 60);

app/javascript/dashboard/components-next/message/chips/File.vue

@@ -53,7 +53,7 @@ const textColorClass = computed(() => {
 
 <template>
   <div
-    class="h-9 bg-n-alpha-white gap-2 items-center flex px-2 rounded-lg border border-n-strong"
+    class="h-9 bg-n-alpha-white gap-2 items-center flex px-2 rounded-lg border border-n-container"
   >
     <FileIcon class="flex-shrink-0" :file-type="fileType" />
     <span class="mr-1 max-w-32 truncate" :class="textColorClass">
@@ -62,7 +62,7 @@ const textColorClass = computed(() => {
     <a
       v-tooltip="t('CONVERSATION.DOWNLOAD')"
       class="flex-shrink-0 h-9 grid place-content-center cursor-pointer text-n-slate-11"
-      :href="url"
+      :href="attachment.dataUrl"
       rel="noreferrer noopener nofollow"
       target="_blank"
     >

app/javascript/dashboard/components-next/message/constants.js

@@ -20,6 +20,7 @@ export const MESSAGE_VARIANTS = {
 export const SENDER_TYPES = {
   CONTACT: 'Contact',
   USER: 'User',
+  AGENT_BOT: 'agent_bot',
 };
 
 export const ORIENTATION = {

app/javascript/dashboard/components-next/message/provider.js

@@ -5,6 +5,112 @@ import { ATTACHMENT_TYPES } from './constants';
 
 const MessageControl = Symbol('MessageControl');
 
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Sender
+ * @property {Object} additional_attributes - Additional attributes of the sender
+ * @property {Object} custom_attributes - Custom attributes of the sender
+ * @property {string} email - Email of the sender
+ * @property {number} id - ID of the sender
+ * @property {string|null} identifier - Identifier of the sender
+ * @property {string} name - Name of the sender
+ * @property {string|null} phone_number - Phone number of the sender
+ * @property {string} thumbnail - Thumbnail URL of the sender
+ * @property {string} type - Type of sender
+ */
+
+/**
+ * @typedef {Object} EmailContent
+ * @property {string[]|null} bcc - BCC recipients
+ * @property {string[]|null} cc - CC recipients
+ * @property {string} contentType - Content type of the email
+ * @property {string} date - Date the email was sent
+ * @property {string[]} from - From email address
+ * @property {Object} htmlContent - HTML content of the email
+ * @property {string} htmlContent.full - Full HTML content
+ * @property {string} htmlContent.reply - Reply HTML content
+ * @property {string} htmlContent.quoted - Quoted HTML content
+ * @property {string|null} inReplyTo - Message ID being replied to
+ * @property {string} messageId - Unique message identifier
+ * @property {boolean} multipart - Whether the email is multipart
+ * @property {number} numberOfAttachments - Number of attachments
+ * @property {string} subject - Email subject line
+ * @property {Object} textContent - Text content of the email
+ * @property {string} textContent.full - Full text content
+ * @property {string} textContent.reply - Reply text content
+ * @property {string} textContent.quoted - Quoted text content
+ * @property {string[]} to - To email addresses
+ */
+
+/**
+ * @typedef {Object} ContentAttributes
+ * @property {string} externalError - an error message to be shown if the message failed to send
+ * @property {Object} [data] - Optional data object containing roomName and messageId
+ * @property {string} data.roomName - Name of the room
+ * @property {string} data.messageId - ID of the message
+ * @property {'story_mention'} [imageType] - Flag to indicate this is a story mention
+ * @property {'dyte'} [type] - Flag to indicate this is a dyte call
+ * @property {EmailContent} [email] - Email content and metadata
+ * @property {string|null} [ccEmail] - CC email addresses
+ * @property {string|null} [bccEmail] - BCC email addresses
+ */
+
+/**
+ * @typedef {'sent'|'delivered'|'read'|'failed'|'progress'} MessageStatus
+ * @typedef {'text'|'input_text'|'input_textarea'|'input_email'|'input_select'|'cards'|'form'|'article'|'incoming_email'|'input_csat'|'integrations'|'sticker'} MessageContentType
+ * @typedef {0|1|2|3} MessageType
+ * @typedef {'contact'|'user'|'Contact'|'User'} SenderType
+ * @typedef {'user'|'agent'|'activity'|'private'|'bot'|'error'|'template'|'email'|'unsupported'} MessageVariant
+ * @typedef {'left'|'center'|'right'} MessageOrientation
+
+ * @typedef {Object} MessageContext
+ * @property {import('vue').Ref<string>} content - The message content
+ * @property {import('vue').Ref<number>} conversationId - The ID of the conversation to which the message belongs
+ * @property {import('vue').Ref<number>} createdAt - Timestamp when the message was created
+ * @property {import('vue').Ref<number>} currentUserId - The ID of the current user
+ * @property {import('vue').Ref<number>} id - The unique identifier for the message
+ * @property {import('vue').Ref<number>} inboxId - The ID of the inbox to which the message belongs
+ * @property {import('vue').Ref<boolean>} [groupWithNext=false] - Whether the message should be grouped with the next message
+ * @property {import('vue').Ref<boolean>} [isEmailInbox=false] - Whether the message is from an email inbox
+ * @property {import('vue').Ref<boolean>} [private=false] - Whether the message is private
+ * @property {import('vue').Ref<number|null>} [senderId=null] - The ID of the sender
+ * @property {import('vue').Ref<string|null>} [error=null] - Error message if the message failed to send
+ * @property {import('vue').Ref<Attachment[]>} [attachments=[]] - The attachments associated with the message
+ * @property {import('vue').Ref<ContentAttributes>} [contentAttributes={}] - Additional attributes of the message content
+ * @property {import('vue').Ref<MessageContentType>} contentType - Content type of the message
+ * @property {import('vue').Ref<MessageStatus>} status - The delivery status of the message
+ * @property {import('vue').Ref<MessageType>} messageType - The type of message (must be one of MESSAGE_TYPES)
+ * @property {import('vue').Ref<Object|null>} [inReplyTo=null] - The message to which this message is a reply
+ * @property {import('vue').Ref<SenderType>} [senderType=null] - The type of the sender
+ * @property {import('vue').Ref<Sender|null>} [sender=null] - The sender information
+ * @property {import('vue').ComputedRef<MessageOrientation>} orientation - The visual variant of the message
+ * @property {import('vue').ComputedRef<MessageVariant>} variant - The visual variant of the message
+ * @property {import('vue').ComputedRef<boolean>} isMyMessage - Does the message belong to the current user
+ * @property {import('vue').ComputedRef<boolean>} isPrivate - Proxy computed value for private
+ * @property {import('vue').ComputedRef<boolean>} shouldGroupWithNext - Should group with the next message or not, it is differnt from groupWithNext, this has a bypass for a failed message
+ */
+
+/**
+ * Retrieves the message context from the parent Message component.
+ * Must be used within a component that is a child of a Message component.
+ *
+ * @returns {MessageContext & { filteredCurrentChatAttachments: import('vue').ComputedRef<Attachment[]> }}
+ * Message context object containing message properties and computed values
+ * @throws {Error} If used outside of a Message component context
+ */
 export function useMessageContext() {
   const context = inject(MessageControl, null);
   if (context === null) {

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -84,6 +84,7 @@ const menuItems = computed(() => {
       label: t('SIDEBAR.INBOX'),
       icon: 'i-lucide-inbox',
       to: accountScopedRoute('inbox_view'),
+      activeOn: ['inbox_view', 'inbox_view_conversation'],
     },
     {
       name: 'Conversation',
@@ -171,20 +172,20 @@ const menuItems = computed(() => {
       icon: 'i-woot-captain',
       label: t('SIDEBAR.CAPTAIN'),
       children: [
+        {
+          name: 'Assistants',
+          label: t('SIDEBAR.CAPTAIN_ASSISTANTS'),
+          to: accountScopedRoute('captain_assistants_index'),
+        },
         {
           name: 'Documents',
-          label: 'Documents',
-          to: accountScopedRoute('captain', { page: 'documents' }),
+          label: t('SIDEBAR.CAPTAIN_DOCUMENTS'),
+          to: accountScopedRoute('captain_documents_index'),
         },
         {
           name: 'Responses',
-          label: 'Responses',
-          to: accountScopedRoute('captain', { page: 'responses' }),
-        },
-        {
-          name: 'Playground',
-          label: 'Playground',
-          to: accountScopedRoute('captain', { page: 'playground' }),
+          label: t('SIDEBAR.CAPTAIN_RESPONSES'),
+          to: accountScopedRoute('captain_responses_index'),
         },
       ],
     },

app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue

@@ -40,7 +40,12 @@ const hasChildren = computed(
 
 const accessibleItems = computed(() => {
   if (!hasChildren.value) return [];
-  return props.children.filter(child => isAllowed(child.to));
+  return props.children.filter(child => {
+    // If a item has no link, it means it's just a subgroup header
+    // So we don't need to check for permissions here, because there's nothing to
+    // access here anyway
+    return child.to && isAllowed(child.to);
+  });
 });
 
 const hasAccessibleChildren = computed(() => {

app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue

@@ -90,7 +90,8 @@ const allowedMenuItems = computed(() => {
 
 <template>
   <DropdownContainer
-    class="relative z-20 w-full min-w-0"
+    class="relative w-full min-w-0"
+    :class="{ 'z-20': isOpen }"
     @close="emit('close')"
   >
     <template #trigger="{ toggle, isOpen }">

app/javascript/dashboard/components-next/textarea/TextArea.vue

@@ -1,72 +1,35 @@
 <script setup>
 import { computed, ref, onMounted, nextTick, watch } from 'vue';
+import {
+  appendSignature,
+  removeSignature,
+  extractTextFromMarkdown,
+} from 'dashboard/helper/editorHelper';
 
 const props = defineProps({
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  maxLength: {
-    type: Number,
-    default: 200,
-  },
-  id: {
-    type: String,
-    default: '',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  customTextAreaClass: {
-    type: String,
-    default: '',
-  },
-  customTextAreaWrapperClass: {
-    type: String,
-    default: '',
-  },
-  showCharacterCount: {
-    type: Boolean,
-    default: false,
-  },
-  autoHeight: {
-    type: Boolean,
-    default: false,
-  },
-  resize: {
-    type: Boolean,
-    default: false,
-  },
-  minHeight: {
-    type: String,
-    default: '4rem',
-  },
-  maxHeight: {
-    type: String,
-    default: '12rem',
-  },
-  autofocus: {
-    type: Boolean,
-    default: false,
-  },
-  message: {
-    type: String,
-    default: '',
-  },
+  modelValue: { type: String, default: '' },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  maxLength: { type: Number, default: 200 },
+  id: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  customTextAreaClass: { type: String, default: '' },
+  customTextAreaWrapperClass: { type: String, default: '' },
+  showCharacterCount: { type: Boolean, default: false },
+  autoHeight: { type: Boolean, default: false },
+  resize: { type: Boolean, default: false },
+  minHeight: { type: String, default: '4rem' },
+  maxHeight: { type: String, default: '12rem' },
+  autofocus: { type: Boolean, default: false },
+  message: { type: String, default: '' },
   messageType: {
     type: String,
     default: 'info',
     validator: value => ['info', 'error', 'success'].includes(value),
   },
+  signature: { type: String, default: '' },
+  sendWithSignature: { type: Boolean, default: false }, // add this as a prop, so that we won't have to add useUISettings
+  allowSignature: { type: Boolean, default: false }, // allowSignature is a kill switch, ensuring no signature methods are triggered except when this flag is true
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -75,6 +38,9 @@ const textareaRef = ref(null);
 const isFocused = ref(false);
 
 const characterCount = computed(() => props.modelValue.length);
+const cleanedSignature = computed(() =>
+  extractTextFromMarkdown(props.signature)
+);
 
 const messageClass = computed(() => {
   switch (props.messageType) {
@@ -97,6 +63,32 @@ const adjustHeight = () => {
   textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`;
 };
 
+const setCursor = () => {
+  if (!textareaRef.value) return;
+
+  const bodyWithoutSignature = removeSignature(
+    props.modelValue,
+    cleanedSignature.value
+  );
+  const bodyEndsAt = bodyWithoutSignature.trimEnd().length;
+
+  textareaRef.value.focus();
+  textareaRef.value.setSelectionRange(bodyEndsAt, bodyEndsAt);
+};
+
+const toggleSignatureInEditor = signatureEnabled => {
+  if (!props.allowSignature) return;
+  const valueWithSignature = signatureEnabled
+    ? appendSignature(props.modelValue, cleanedSignature.value)
+    : removeSignature(props.modelValue, cleanedSignature.value);
+  emit('update:modelValue', valueWithSignature);
+
+  nextTick(() => {
+    adjustHeight();
+    setCursor();
+  });
+};
+
 const handleInput = event => {
   emit('update:modelValue', event.target.value);
   if (props.autoHeight) {
@@ -126,13 +118,20 @@ watch(
   }
 );
 
+watch(
+  () => props.sendWithSignature,
+  newValue => {
+    if (props.allowSignature) toggleSignatureInEditor(newValue);
+  }
+);
+
 onMounted(() => {
   if (props.autoHeight) {
     nextTick(adjustHeight);
   }
 
   if (props.autofocus) {
-    textareaRef.value.focus();
+    textareaRef.value?.focus();
   }
 });
 </script>
@@ -161,6 +160,7 @@ onMounted(() => {
         },
       ]"
     >
+      <slot /><!-- Slot for adding popover -->
       <textarea
         :id="id"
         ref="textareaRef"

app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -33,22 +33,21 @@ const onToggle = () => {
 </script>
 
 <template>
-  <div class="-mt-px text-sm">
+  <div class="text-sm">
     <button
-      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
+      class="flex items-center select-none w-full rounded-lg bg-n-slate-2 border border-n-weak m-0 cursor-grab justify-between py-2 px-4 drag-handle"
+      :class="{ 'rounded-bl-none rounded-br-none': isOpen }"
       @click.stop="onToggle"
     >
-      <div class="flex justify-between mb-0.5">
+      <div class="flex justify-between">
         <EmojiOrIcon class="inline-block w-5" :icon="icon" :emoji="emoji" />
-        <h5
-          class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
-        >
+        <h5 class="text-n-slate-12 text-sm mb-0 py-0 pr-2 pl-0">
           {{ title }}
         </h5>
       </div>
       <div class="flex flex-row">
         <slot name="button" />
-        <div class="flex justify-end w-3 text-woot-500">
+        <div class="flex justify-end w-3 text-n-blue-text cursor-pointer">
           <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
           <fluent-icon v-else size="24" icon="add" type="solid" />
         </div>
@@ -56,8 +55,8 @@ const onToggle = () => {
     </button>
     <div
       v-if="isOpen"
-      class="bg-white dark:bg-slate-900"
-      :class="compact ? 'p-0' : 'p-4'"
+      class="bg-n-background border border-n-weak dark:border-n-slate-2 border-t-0 rounded-br-lg rounded-bl-lg"
+      :class="compact ? 'p-0' : 'px-2 py-4'"
     >
       <slot />
     </div>

app/javascript/dashboard/components/ChatList.vue

@@ -782,7 +782,7 @@ watch(conversationFilters, (newVal, oldVal) => {
 
 <template>
   <div
-    class="flex flex-col flex-shrink-0 conversations-list-wrap"
+    class="flex flex-col flex-shrink-0 bg-n-solid-1 conversations-list-wrap"
     :class="[
       { hidden: !showConversationList },
       isOnExpandedLayout ? 'basis-full' : 'w-[360px] 2xl:w-[420px]',