fix(voice): reuse open conversation for inbound calls instead of always creating new

Backend for WhatsApp WABA calling: query/enable/disable calling status via Meta, webhook re-subscribe, inbox policy, and incoming call service wiring. Builds on the WhatsApp calling UI branch.

.bundler-audit.yml

@@ -2,8 +2,22 @@
 ignore:
   - CVE-2021-41098 # https://github.com/chatwoot/chatwoot/issues/3097 (update once azure blob storage is updated)
   - GHSA-57hq-95w6-v4fc # Devise confirmable race condition — patched locally in User model (remove once on Devise 5+)
-  # Chatwoot defaults to Active Storage redirect-style URLs, and its recommended
-  # storage setup uses local/cloud storage with optional direct uploads to the
-  # storage provider rather than Rails proxy mode. Revisit if we enable
-  # rails_storage_proxy or other app-served Active Storage proxy routes.
+  # Devise 5 is currently blocked by devise-secure_password/devise_token_auth/devise-two-factor.
+  # Chatwoot does not enable Timeoutable, so the timeout redirect path is not reachable.
+  - GHSA-jp94-3292-c3xv
+  # Rails 7.1 has no patched release for the Active Storage proxy range
+  # advisories. Chatwoot limits proxy range requests locally.
   - CVE-2026-33658
+  # Rails 7.1 has no patched release for this Active Storage direct-upload
+  # advisory. Chatwoot filters internal metadata keys locally.
+  - CVE-2026-33173
+  - CVE-2026-33174
+  # Rails 7.1 has no patched release for these Rails advisories. These are not
+  # reachable through Chatwoot's current usage patterns and should be removed
+  # once we upgrade to Rails 7.2.3.1+.
+  - CVE-2026-33168
+  - CVE-2026-33169
+  - CVE-2026-33170
+  - CVE-2026-33176
+  - CVE-2026-33195
+  - CVE-2026-33202

.circleci/config.yml

@@ -144,7 +144,7 @@ jobs:
   # Backend tests with parallelization
   backend-tests:
     <<: *defaults
-    parallelism: 18
+    parallelism: 20
     steps:
       - checkout
       - node/install:

Gemfile

@@ -133,9 +133,9 @@ gem 'sentry-ruby', require: false
 gem 'sentry-sidekiq', '>= 5.19.0', require: false
 
 ##-- background job processing --##
-gem 'sidekiq', '>= 7.3.1'
+gem 'sidekiq', '~> 7.3', '>= 7.3.1'
 # We want cron jobs
-gem 'sidekiq-cron', '>= 1.12.0'
+gem 'sidekiq-cron', '>= 2.4.0'
 # for sidekiq healthcheck
 gem 'sidekiq_alive'
 

Gemfile.lock

@@ -196,6 +196,9 @@ GEM
       bigdecimal
       rexml
     crass (1.0.6)
+    cronex (0.15.0)
+      tzinfo
+      unicode (>= 0.4.4.5)
     csv (3.3.0)
     csv-safe (3.3.1)
       csv (~> 3.0)
@@ -212,7 +215,7 @@ GEM
       logger
       msgpack
     datadog-ruby_core_source (3.4.1)
-    date (3.4.1)
+    date (3.5.1)
     debug (1.8.0)
       irb (>= 1.5.0)
       reline (>= 0.3.1)
@@ -574,7 +577,7 @@ GEM
       uri (>= 0.11.1)
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.20)
+    net-imap (0.4.24)
       date
       net-protocol
     net-pop (0.1.2)
@@ -590,14 +593,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.19.1)
+    nokogiri (1.19.3)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.19.1-arm64-darwin)
+    nokogiri (1.19.3-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.19.1-x86_64-darwin)
+    nokogiri (1.19.3-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.19.1-x86_64-linux-gnu)
+    nokogiri (1.19.3-x86_64-linux-gnu)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -902,10 +905,11 @@ GEM
       logger
       rack (>= 2.2.4)
       redis-client (>= 0.22.2)
-    sidekiq-cron (1.12.0)
-      fugit (~> 1.8)
+    sidekiq-cron (2.4.0)
+      cronex (>= 0.13.0)
+      fugit (~> 1.8, >= 1.11.1)
       globalid (>= 1.0.1)
-      sidekiq (>= 6)
+      sidekiq (>= 6.5.0)
     sidekiq_alive (2.5.0)
       gserver (~> 0.0.1)
       sidekiq (>= 5, < 9)
@@ -961,7 +965,7 @@ GEM
     time_diff (0.3.0)
       activesupport
       i18n
-    timeout (0.4.3)
+    timeout (0.6.1)
     trailblazer-option (0.1.2)
     twilio-ruby (7.6.0)
       faraday (>= 0.9, < 3.0)
@@ -979,6 +983,7 @@ GEM
     unf (0.1.4)
       unf_ext
     unf_ext (0.0.8.2)
+    unicode (0.4.4.5)
     unicode-display_width (3.1.4)
       unicode-emoji (~> 4.0, >= 4.0.4)
     unicode-emoji (4.0.4)
@@ -1155,8 +1160,8 @@ DEPENDENCIES
   sentry-sidekiq (>= 5.19.0)
   shopify_api
   shoulda-matchers
-  sidekiq (>= 7.3.1)
-  sidekiq-cron (>= 1.12.0)
+  sidekiq (~> 7.3, >= 7.3.1)
+  sidekiq-cron (>= 2.4.0)
   sidekiq_alive
   simplecov (>= 0.21)
   simplecov_json_formatter

VERSION_CW

@@ -1 +1 @@
-4.13.0
+4.14.0

app/builders/messages/messenger/message_builder.rb

@@ -28,6 +28,10 @@ class Messages::Messenger::MessageBuilder
       filename: attachment_file.original_filename,
       content_type: attachment_file.content_type
     )
+    # The Attachment row is saved before the blob is attached, so the
+    # after_create_commit broadcast bails on `file.attached?`. Re-fire here
+    # for audio so the bubble updates without waiting on transcription.
+    attachment.message&.reload&.send_update_event if attachment.file_type.to_sym == :audio
   end
 
   def attachment_params(attachment)

app/builders/notification_builder.rb

@@ -27,6 +27,8 @@ class NotificationBuilder
     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'
+    # respect conversation access (inbox/team membership and custom-role permissions)
+    return unless user_can_access_conversation?
 
     user.notifications.create!(
       notification_type: notification_type,
@@ -36,4 +38,17 @@ class NotificationBuilder
       secondary_actor: secondary_actor || current_user
     )
   end
+
+  def user_can_access_conversation?
+    conversation = primary_actor.is_a?(Conversation) ? primary_actor : primary_actor.try(:conversation)
+    return true if conversation.blank?
+
+    account_user = AccountUser.find_by(account_id: account.id, user_id: user.id)
+    return false if account_user.blank?
+
+    ConversationPolicy.new(
+      { user: user, account: account, account_user: account_user },
+      conversation
+    ).show?
+  end
 end

app/builders/v2/reports/bot_metrics_builder.rb

@@ -31,13 +31,24 @@ class V2::Reports::BotMetricsBuilder
   end
 
   def bot_resolutions_count
-    account.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_bot_resolved,
-                                                                                 created_at: range).distinct.count
+    # Exclude conversations that also had a handoff in the same range — handoff wins
+    account.reporting_events.joins(:conversation).select(:conversation_id)
+           .where(account_id: account.id, name: :conversation_bot_resolved, created_at: range)
+           .where.not(conversation_id: bot_handoff_conversation_ids_subquery)
+           .distinct.count
   end
 
   def bot_handoffs_count
-    account.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_bot_handoff,
-                                                                                 created_at: range).distinct.count
+    account.reporting_events.joins(:conversation).select(:conversation_id)
+           .where(account_id: account.id, name: :conversation_bot_handoff, created_at: range)
+           .distinct.count
+  end
+
+  def bot_handoff_conversation_ids_subquery
+    account.reporting_events
+           .where(name: :conversation_bot_handoff, created_at: range)
+           .where.not(conversation_id: nil)
+           .select(:conversation_id)
   end
 
   def bot_resolution_rate

app/controllers/api/v1/accounts/contacts/attachments_controller.rb

@@ -0,0 +1,18 @@
+class Api::V1::Accounts::Contacts::AttachmentsController < Api::V1::Accounts::Contacts::BaseController
+  RESULTS_PER_PAGE = 100
+
+  def index
+    conversations = Conversations::PermissionFilterService.new(
+      Current.account.conversations.where(contact_id: @contact.id),
+      Current.user,
+      Current.account
+    ).perform
+
+    @attachments = Attachment.where(message_id: Message.where(conversation_id: conversations).select(:id))
+                             .includes({ file_attachment: :blob }, message: [:conversation, :inbox, { sender: { avatar_attachment: :blob } }])
+                             .order(created_at: :desc)
+                             .page(params[:page])
+                             .per(RESULTS_PER_PAGE)
+    @attachments_count = @attachments.total_count
+  end
+end

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

@@ -28,7 +28,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   def attachments
     @attachments_count = @conversation.attachments.count
     @attachments = @conversation.attachments
-                                .includes(:message)
+                                .includes({ file_attachment: :blob }, message: [:inbox, { sender: { avatar_attachment: :blob } }])
                                 .order(created_at: :desc)
                                 .page(attachment_params[:page])
                                 .per(ATTACHMENT_RESULTS_PER_PAGE)

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

@@ -9,7 +9,9 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   include Api::V1::Accounts::Concerns::WhatsappHealthManagement
 
   def index
-    @inboxes = policy_scope(Current.account.inboxes.order_by_name.includes(:channel, { avatar_attachment: [:blob] }))
+    @inboxes = policy_scope(Current.account.inboxes)
+               .includes(:channel, :portal, :working_hours, { avatar_attachment: :blob })
+               .order_by_name
   end
 
   def show; end
@@ -85,7 +87,7 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   end
 
   def fetch_agent_bot
-    @agent_bot = AgentBot.find(params[:agent_bot]) if params[:agent_bot]
+    @agent_bot = AgentBot.accessible_to(Current.account).find(params[:agent_bot]) if params[:agent_bot]
   end
 
   def create_channel

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

@@ -41,9 +41,9 @@ class Api::V1::Accounts::NotificationsController < Api::V1::Accounts::BaseContro
 
   def destroy_all
     if params[:type] == 'read'
-      ::Notification::DeleteNotificationJob.perform_later(Current.user, type: :read)
+      ::Notification::DeleteNotificationJob.perform_later(Current.user, Current.account, type: :read)
     else
-      ::Notification::DeleteNotificationJob.perform_later(Current.user, type: :all)
+      ::Notification::DeleteNotificationJob.perform_later(Current.user, Current.account, type: :all)
     end
     head :ok
   end
@@ -69,7 +69,7 @@ class Api::V1::Accounts::NotificationsController < Api::V1::Accounts::BaseContro
   end
 
   def fetch_notification
-    @notification = current_user.notifications.find(params[:id])
+    @notification = current_user.notifications.where(account_id: Current.account.id).find(params[:id])
   end
 
   def set_current_page

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

@@ -18,7 +18,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
     @portal = Current.account.portals.build(portal_params.merge(live_chat_widget_params))
     @portal.custom_domain = parsed_custom_domain
     @portal.save!
-    process_attached_logo
+    process_attached_logo if params[:blob_id].present?
   end
 
   def update
@@ -78,7 +78,9 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
   def portal_params
     params.require(:portal).permit(
       :id, :color, :custom_domain, :header_text, :homepage_link,
-      :name, :page_title, :slug, :archived, { config: [:default_locale, { allowed_locales: [] }, { draft_locales: [] }] }
+      :name, :page_title, :slug, :archived,
+      { config: [:default_locale, :layout, { allowed_locales: [] }, { draft_locales: [] },
+                 { social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] }] }
     )
   end
 
@@ -87,7 +89,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
     return {} unless permitted_params.key?(:inbox_id)
     return { channel_web_widget_id: nil } if permitted_params[:inbox_id].blank?
 
-    inbox = Inbox.find(permitted_params[:inbox_id])
+    inbox = Current.account.inboxes.find(permitted_params[:inbox_id])
     return {} unless inbox.web_widget?
 
     { channel_web_widget_id: inbox.channel.id }
@@ -98,6 +100,8 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
   end
 
   def parsed_custom_domain
+    return @portal.custom_domain if @portal.custom_domain.blank?
+
     domain = URI.parse(@portal.custom_domain)
     domain.is_a?(URI::HTTP) ? domain.host : @portal.custom_domain
   end

app/controllers/api/v1/accounts_controller.rb

@@ -111,7 +111,7 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def custom_attributes_params
-    params.permit(:industry, :company_size, :timezone, :referral_source, :user_role)
+    params.permit(:industry, :company_size, :timezone, :referral_source, :user_role, :website)
   end
 
   def settings_params

app/controllers/api/v1/notification_subscriptions_controller.rb

@@ -8,7 +8,8 @@ class Api::V1::NotificationSubscriptionsController < Api::BaseController
   end
 
   def destroy
-    notification_subscription = NotificationSubscription.where(["subscription_attributes->>'push_token' = ?", params[:push_token]]).first
+    notification_subscription = current_user.notification_subscriptions
+                                            .where(["subscription_attributes->>'push_token' = ?", params[:push_token]]).first
     notification_subscription.destroy! if notification_subscription.present?
     head :ok
   end

app/controllers/api/v1/widget/messages_controller.rb

@@ -83,6 +83,10 @@ class Api::V1::Widget::MessagesController < Api::V1::Widget::BaseController
   end
 
   def set_message
-    @message = @web_widget.inbox.messages.find(permitted_params[:id])
+    # `conversation.messages.find` would be simpler, but `conversation` is `conversations.last`,
+    # which means a visitor with more than one open thread could not edit a message in any
+    # but their most recent one. Scoping across all of the visitor's conversations keeps the
+    # happy path correct for that future multi-conversation widget flow.
+    @message = Message.where(conversation_id: conversations.select(:id)).find(permitted_params[:id])
   end
 end

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

@@ -24,6 +24,10 @@ class Public::Api::V1::InboxesController < PublicController
   def set_conversation
     return if params[:conversation_id].blank?
 
-    @conversation = @contact_inbox.contact.conversations.find_by!(display_id: params[:conversation_id])
+    @conversation = if @contact_inbox.hmac_verified?
+                      @contact_inbox.contact.conversations.find_by!(display_id: params[:conversation_id])
+                    else
+                      @contact_inbox.conversations.find_by!(display_id: params[:conversation_id])
+                    end
   end
 end

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

@@ -1,9 +1,11 @@
 class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::BaseController
-  before_action :ensure_custom_domain_request, only: [:show, :index]
+  before_action :ensure_custom_domain_request, only: [:show, :index, :show_markdown]
   before_action :portal
+  before_action :set_portal_layout
+  before_action :set_view_variant
   before_action :ensure_portal_feature_enabled
   before_action :set_category, except: [:index, :show, :tracking_pixel]
-  before_action :set_article, only: [:show]
+  before_action :set_article, only: [:show, :show_markdown]
   layout 'portal'
 
   def index
@@ -21,6 +23,13 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def show
     @og_image_url = helpers.set_og_image_url(@portal.name, @article.title)
+    @parsed_content = render_article_content(@article.content.to_s)
+  end
+
+  def show_markdown
+    return head :not_found unless @article&.published?
+
+    render plain: @article.content.to_s, content_type: 'text/markdown; charset=utf-8'
   end
 
   def tracking_pixel
@@ -62,7 +71,6 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def set_article
     @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
-    @parsed_content = render_article_content(@article.content.to_s)
   end
 
   def set_category

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

@@ -7,6 +7,8 @@ class Public::Api::V1::Portals::BaseController < PublicController
   around_action :set_locale
   after_action :allow_iframe_requests
 
+  PORTAL_LAYOUTS = %w[classic documentation].freeze
+
   private
 
   def show_plain_layout
@@ -17,6 +19,14 @@ class Public::Api::V1::Portals::BaseController < PublicController
     @theme_from_params = params[:theme] if %w[dark light].include?(params[:theme])
   end
 
+  def set_portal_layout
+    @portal_layout = PORTAL_LAYOUTS.include?(@portal&.layout) ? @portal.layout : 'classic'
+  end
+
+  def set_view_variant
+    request.variant = :documentation if @portal_layout == 'documentation' && !@is_plain_layout_enabled
+  end
+
   def portal
     @portal ||= Portal.find_by!(slug: params[:slug], archived: false)
   end
@@ -42,7 +52,7 @@ class Public::Api::V1::Portals::BaseController < PublicController
     article_locale = if article.category.present?
                        article.category.locale
                      else
-                       article.portal.default_locale
+                       article.locale
                      end
     @locale = validate_and_get_locale(article_locale)
     I18n.with_locale(@locale, &)

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

@@ -1,12 +1,18 @@
 class Public::Api::V1::Portals::CategoriesController < Public::Api::V1::Portals::BaseController
   before_action :ensure_custom_domain_request, only: [:show, :index]
   before_action :portal
+  before_action :set_portal_layout
+  before_action :set_view_variant
   before_action :ensure_portal_feature_enabled
   before_action :set_category, only: [:show]
+  before_action :load_category_articles, only: [:show], if: -> { @portal_layout == 'documentation' }
   layout 'portal'
 
   def index
-    @categories = @portal.categories.order(position: :asc)
+    respond_to do |format|
+      format.html { redirect_to public_portal_locale_path(@portal.slug, params[:locale]), status: :moved_permanently }
+      format.json { @categories = @portal.categories.order(position: :asc) }
+    end
   end
 
   def show
@@ -21,4 +27,9 @@ class Public::Api::V1::Portals::CategoriesController < Public::Api::V1::Portals:
     Rails.logger.info "Category: not found for slug: #{params[:category_slug]}"
     render_404 && return if @category.blank?
   end
+
+  def load_category_articles
+    @articles = @category.articles.published.order(:position).includes(:author)
+    @category_authors = @articles.filter_map(&:author).uniq
+  end
 end

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

@@ -2,7 +2,10 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
   before_action :ensure_custom_domain_request, only: [:show]
   before_action :redirect_to_portal_with_locale, only: [:show]
   before_action :portal
+  before_action :set_portal_layout
+  before_action :set_view_variant
   before_action :ensure_portal_feature_enabled
+  before_action :load_home_data, only: [:show], if: -> { @portal_layout == 'documentation' }
   layout 'portal'
 
   def show
@@ -28,4 +31,28 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
     portal
     redirect_to "/hc/#{@portal.slug}/#{@portal.default_locale}"
   end
+
+  def load_home_data
+    base_articles = @portal.articles.published.where(locale: @locale).includes(:author, :category)
+    @visible_categories = @portal.categories
+                                 .where(locale: @locale)
+                                 .joins(:articles).where(articles: { status: :published })
+                                 .order(position: :asc)
+                                 .group('categories.id')
+    @popular_topics = @visible_categories.first(3)
+    @featured = base_articles.order_by_views.limit(6)
+    @category_contributors = build_category_contributors(@visible_categories)
+  end
+
+  def build_category_contributors(categories)
+    category_ids = categories.map(&:id)
+    return {} if category_ids.empty?
+
+    @portal.articles
+           .published
+           .where(locale: @locale, category_id: category_ids)
+           .includes(:author)
+           .group_by(&:category_id)
+           .transform_values { |articles| articles.filter_map(&:author).uniq.first(3) }
+  end
 end

app/controllers/super_admin/app_configs_controller.rb

@@ -27,7 +27,7 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
     if errors.any?
       redirect_to super_admin_app_config_path(config: @config), alert: errors.join(', ')
     else
-      redirect_to super_admin_settings_path, notice: "App Configs - #{@config.titleize} updated successfully"
+      redirect_to super_admin_settings_path, flash: success_flash
     end
   end
 
@@ -58,6 +58,21 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
       %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS WEBHOOK_TIMEOUT MAXIMUM_FILE_UPLOAD_SIZE WIDGET_TOKEN_EXPIRY]
     )
   end
+
+  def success_notice
+    message = "#{@config.titleize} settings updated successfully"
+    return message unless restart_required_config_saved?
+
+    "#{message.delete_suffix('.')}. Restart Chatwoot web and worker processes to apply this change everywhere."
+  end
+
+  def success_flash
+    restart_required_config_saved? ? { success: success_notice } : { notice: success_notice }
+  end
+
+  def restart_required_config_saved?
+    params.fetch('app_config', {}).keys.intersect?(InstallationConfig::RESTART_REQUIRED_CONFIG_KEYS)
+  end
 end
 
 SuperAdmin::AppConfigsController.prepend_mod_with('SuperAdmin::AppConfigsController')

app/controllers/super_admin/installation_configs_controller.rb

@@ -25,6 +25,29 @@ class SuperAdmin::InstallationConfigsController < SuperAdmin::ApplicationControl
     resource_class.editable
   end
 
+  def create
+    resource = new_resource(resource_params)
+    authorize_resource(resource)
+
+    if resource.save
+      redirect_to after_resource_created_path(resource), flash: success_flash(resource)
+    else
+      render :new, locals: {
+        page: Administrate::Page::Form.new(dashboard, resource)
+      }, status: :unprocessable_entity
+    end
+  end
+
+  def update
+    if requested_resource.update(resource_params)
+      redirect_to after_resource_updated_path(requested_resource), flash: success_flash(requested_resource)
+    else
+      render :edit, locals: {
+        page: Administrate::Page::Form.new(dashboard, requested_resource)
+      }, status: :unprocessable_entity
+    end
+  end
+
   # Override `resource_params` if you want to transform the submitted
   # data before it's persisted. For example, the following would turn all
   # empty values into nil values. It uses other APIs such as `resource_class`
@@ -42,6 +65,20 @@ class SuperAdmin::InstallationConfigsController < SuperAdmin::ApplicationControl
           .transform_values { |value| value == '' ? nil : value }.merge(locked: false)
   end
 
+  private
+
+  def success_flash(resource)
+    message = translate_with_resource('update.success')
+    message = translate_with_resource('create.success') if action_name == 'create'
+    return { notice: message } unless restart_required_config?(resource)
+
+    { success: "#{message.delete_suffix('.')}. Restart Chatwoot web and worker processes to apply this change everywhere." }
+  end
+
+  def restart_required_config?(resource)
+    resource.name.in?(InstallationConfig::RESTART_REQUIRED_CONFIG_KEYS)
+  end
+
   # See https://administrate-prototype.herokuapp.com/customizing_controller_actions
   # for more information
 end

app/controllers/swagger_controller.rb

@@ -1,7 +1,12 @@
 class SwaggerController < ApplicationController
   def respond
     if Rails.env.development? || Rails.env.test?
-      render inline: Rails.root.join('swagger', derived_path).read
+      swagger_root = Rails.root.join('swagger')
+      file_path = swagger_root.join(derived_path).cleanpath
+
+      return head :not_found unless file_path.to_s.start_with?("#{swagger_root}/") && file_path.file?
+
+      render inline: file_path.read
     else
       head :not_found
     end
@@ -11,8 +16,8 @@ class SwaggerController < ApplicationController
 
   def derived_path
     params[:path] ||= 'index.html'
-    path = Rack::Utils.clean_path_info(params[:path])
-    path << ".#{Rack::Utils.clean_path_info(params[:format])}" unless path.ends_with?(params[:format].to_s)
+    path = Rack::Utils.clean_path_info(params[:path]).delete_prefix('/')
+    path << ".#{Rack::Utils.clean_path_info(params[:format]).delete_prefix('/')}" unless path.ends_with?(params[:format].to_s)
     path
   end
 end

app/controllers/twilio/callback_controller.rb

@@ -31,7 +31,11 @@ class Twilio::CallbackController < ApplicationController
       :Latitude,
       :Longitude,
       :MessageType,
-      :ProfileName
+      :ProfileName,
+      :ExternalUserId,
+      :ParentExternalUserId,
+      :ProfileUsername,
+      :Username
     )
   end
 end

app/helpers/file_type_helper.rb

@@ -17,6 +17,7 @@ module FileTypeHelper
   def image_file?(content_type)
     [
       'image/jpeg',
+      'image/jpg',
       'image/png',
       'image/gif',
       'image/bmp',

app/helpers/portal_helper.rb

@@ -96,4 +96,15 @@ module PortalHelper
 
     colors[username.length % colors.size]
   end
+
+  def format_authors_label(authors)
+    return if authors.blank?
+
+    names = authors.map(&:available_name)
+    return names.to_sentence if names.size <= 3
+
+    I18n.t('public_portal.sidebar.authors_others',
+           names: names.first(2).join(', '),
+           count: authors.size - 2)
+  end
 end

app/helpers/report_helper.rb

@@ -53,13 +53,12 @@ module ReportHelper
   end
 
   def resolutions
-    scope.reporting_events.where(account_id: account.id, name: :conversation_resolved,
-                                 created_at: range)
+    scope.reporting_events.where(account_id: account.id, name: :conversation_resolved, created_at: range)
   end
 
   def bot_resolutions
-    scope.reporting_events.where(account_id: account.id, name: :conversation_bot_resolved,
-                                 created_at: range)
+    scope.reporting_events.where(account_id: account.id, name: :conversation_bot_resolved, created_at: range)
+         .where.not(conversation_id: bot_handoff_conversation_ids_subquery)
   end
 
   def bot_handoffs
@@ -67,6 +66,10 @@ module ReportHelper
                                                                                created_at: range).distinct
   end
 
+  def bot_handoff_conversation_ids_subquery
+    bot_handoffs
+  end
+
   def avg_first_response_time
     grouped_reporting_events = (get_grouped_values scope.reporting_events.where(name: 'first_response', account_id: account.id))
     return grouped_reporting_events.average(:value_in_business_hours) if params[:business_hours]

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

@@ -6,15 +6,22 @@ class CaptainDocument extends ApiClient {
     super('captain/documents', { accountScoped: true });
   }
 
-  get({ page = 1, searchKey, assistantId } = {}) {
+  get({ page = 1, searchKey, assistantId, filter, source, sort } = {}) {
     return axios.get(this.url, {
       params: {
         page,
-        searchKey,
+        search_key: searchKey,
         assistant_id: assistantId,
+        filter,
+        source,
+        sort,
       },
     });
   }
+
+  sync(id) {
+    return axios.post(`${this.url}/${id}/sync`);
+  }
 }
 
 export default new CaptainDocument();

app/javascript/dashboard/api/channel/whatsapp/whatsappCallsAPI.js

@@ -0,0 +1,45 @@
+/* global axios */
+import ApiClient from '../../ApiClient';
+
+class WhatsappCallsAPI extends ApiClient {
+  constructor() {
+    super('whatsapp_calls', { accountScoped: true });
+  }
+
+  show(callId) {
+    return axios.get(`${this.url}/${callId}`).then(r => r.data);
+  }
+
+  initiate(conversationId, sdpOffer) {
+    return axios
+      .post(`${this.url}/initiate`, {
+        conversation_id: conversationId,
+        sdp_offer: sdpOffer,
+      })
+      .then(r => r.data);
+  }
+
+  accept(callId, sdpAnswer) {
+    return axios
+      .post(`${this.url}/${callId}/accept`, { sdp_answer: sdpAnswer })
+      .then(r => r.data);
+  }
+
+  reject(callId) {
+    return axios.post(`${this.url}/${callId}/reject`).then(r => r.data);
+  }
+
+  terminate(callId) {
+    return axios.post(`${this.url}/${callId}/terminate`).then(r => r.data);
+  }
+
+  uploadRecording(callId, blob, filename = 'call-recording.webm') {
+    const formData = new FormData();
+    formData.append('recording', blob, filename);
+    return axios
+      .post(`${this.url}/${callId}/upload_recording`, formData)
+      .then(r => r.data);
+  }
+}
+
+export default new WhatsappCallsAPI();

app/javascript/dashboard/api/companies.js

@@ -28,6 +28,14 @@ class CompanyAPI extends ApiClient {
     return axios.get(`${this.url}/${id}/contacts?${buildParams({ page })}`);
   }
 
+  listNotes(id) {
+    return axios.get(`${this.url}/${id}/notes`);
+  }
+
+  listConversations(id) {
+    return axios.get(`${this.url}/${id}/conversations`);
+  }
+
   searchContacts(id, query = '', page = 1) {
     const requestURL = `${this.url}/${id}/contacts/search?${buildParams({ q: query, page })}`;
     return axios.get(requestURL);

app/javascript/dashboard/api/contacts.js

@@ -35,8 +35,9 @@ class ContactAPI extends ApiClient {
     return axios.patch(`${this.url}/${id}?include_contact_inboxes=false`, data);
   }
 
-  getConversations(contactId) {
-    return axios.get(`${this.url}/${contactId}/conversations`);
+  getConversations(contactId, { inboxId } = {}) {
+    const params = inboxId ? { inbox_id: inboxId } : {};
+    return axios.get(`${this.url}/${contactId}/conversations`, { params });
   }
 
   getContactableInboxes(contactId) {
@@ -47,9 +48,10 @@ class ContactAPI extends ApiClient {
     return axios.get(`${this.url}/${contactId}/labels`);
   }
 
-  initiateCall(contactId, inboxId) {
+  initiateCall(contactId, inboxId, conversationId = null) {
     return axios.post(`${this.url}/${contactId}/call`, {
       inbox_id: inboxId,
+      conversation_id: conversationId,
     });
   }
 

app/javascript/dashboard/api/inboxes.js

@@ -52,6 +52,14 @@ class Inboxes extends CacheEnabledApiClient {
   resetSecret(inboxId) {
     return axios.post(`${this.url}/${inboxId}/reset_secret`);
   }
+
+  enableWhatsappCalling(inboxId) {
+    return axios.post(`${this.url}/${inboxId}/enable_whatsapp_calling`);
+  }
+
+  disableWhatsappCalling(inboxId) {
+    return axios.post(`${this.url}/${inboxId}/disable_whatsapp_calling`);
+  }
 }
 
 export default new Inboxes();

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

@@ -41,7 +41,8 @@ describe('#ContactsAPI', () => {
     it('#getConversations', () => {
       contactAPI.getConversations(1);
       expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/contacts/1/conversations'
+        '/api/v1/contacts/1/conversations',
+        { params: {} }
       );
     });
 

app/javascript/dashboard/components-next/Companies/CompaniesDetailsLayout.vue

@@ -56,9 +56,14 @@ const closeMobileSidebar = () => {
 
     <div
       v-if="slots.sidebar"
-      class="hidden lg:block overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
+      class="hidden lg:flex flex-col min-w-52 w-full max-w-md border-l border-n-weak bg-n-solid-2"
     >
-      <slot name="sidebar" />
+      <div class="shrink-0">
+        <slot name="sidebarHeader" />
+      </div>
+      <div class="flex-1 overflow-y-auto pb-6 pt-3">
+        <slot name="sidebar" />
+      </div>
     </div>
 
     <div
@@ -105,9 +110,14 @@ const closeMobileSidebar = () => {
         <div
           v-if="isSidebarOpen"
           id="details-sidebar-content"
-          class="order-2 w-[85%] sm:w-[50%] bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak overflow-y-auto py-6 shadow-lg"
+          class="order-2 w-[85%] sm:w-[50%] flex flex-col bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak shadow-lg"
         >
-          <slot name="sidebar" />
+          <div class="shrink-0">
+            <slot name="sidebarHeader" />
+          </div>
+          <div class="flex-1 overflow-y-auto pb-6 pt-3">
+            <slot name="sidebar" />
+          </div>
         </div>
       </Transition>
     </div>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyContactsSidebar.vue

@@ -169,7 +169,7 @@ const handleContactSelect = contactId => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-6 px-6 pb-8 pt-1">
+  <div class="flex flex-col gap-6 px-6 pb-8">
     <div v-if="!selectedContact" class="flex flex-col gap-4">
       <div class="flex flex-col gap-2">
         <label class="text-base text-n-slate-12">
@@ -288,7 +288,7 @@ const handleContactSelect = contactId => {
 
       <div
         v-else-if="!hasContacts"
-        class="py-8 text-sm text-center rounded-xl border border-dashed border-n-weak text-n-slate-11"
+        class="py-8 px-4 text-sm text-center rounded-xl border border-dashed border-n-strong text-n-slate-11"
       >
         {{ t('COMPANIES.DETAIL.CONTACTS.EMPTY') }}
       </div>
@@ -346,7 +346,7 @@ const handleContactSelect = contactId => {
         :current-page="currentPage"
         :total-items="totalContacts"
         :items-per-page="15"
-        class="!px-0 before:hidden"
+        class="!px-0 before:hidden bg-transparent"
         @update:current-page="emit('update:currentPage', $event)"
       />
     </div>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyHistorySidebar.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+defineProps({
+  conversations: {
+    type: Array,
+    default: () => [],
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+const contactsById = useMapGetter('contacts/getContactById');
+const stateInbox = useMapGetter('inboxes/getInboxById');
+const accountLabels = useMapGetter('labels/getLabels');
+
+const accountLabelsValue = computed(() => accountLabels.value);
+const conversationContact = conversation => {
+  const sender = conversation.meta?.sender || {};
+  const contact = contactsById.value(sender.id);
+  return contact.id ? contact : sender;
+};
+const conversationInbox = conversation =>
+  stateInbox.value(conversation.inboxId) || {
+    name: '',
+    channelType: conversation.meta?.channel,
+  };
+</script>
+
+<template>
+  <div
+    v-if="isLoading"
+    class="flex items-center justify-center py-10 text-n-slate-11"
+  >
+    <Spinner />
+  </div>
+
+  <div
+    v-else-if="conversations.length > 0"
+    class="px-6 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
+  >
+    <ConversationCard
+      v-for="conversation in conversations"
+      :key="conversation.id"
+      :conversation="conversation"
+      :contact="conversationContact(conversation)"
+      :state-inbox="conversationInbox(conversation)"
+      :account-labels="accountLabelsValue"
+      class="rounded-none hover:rounded-xl hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
+    />
+  </div>
+
+  <p
+    v-else
+    class="py-8 px-4 mx-6 text-sm text-center rounded-xl border border-dashed border-n-strong text-n-slate-11"
+  >
+    {{ t('COMPANIES.DETAIL.HISTORY.EMPTY') }}
+  </p>
+</template>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyNotesSidebar.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const props = defineProps({
+  notes: {
+    type: Array,
+    default: () => [],
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { formatMessage } = useMessageFormatter();
+const currentUser = useMapGetter('getCurrentUser');
+
+const hasNotes = computed(() => props.notes.length > 0);
+
+const contactName = contact =>
+  contact?.name || t('COMPANIES.DETAIL.CONTACTS.UNNAMED_CONTACT');
+
+const getWrittenBy = note => {
+  const isCurrentUser = note?.user?.id === currentUser.value.id;
+  return isCurrentUser
+    ? t('CONTACTS_LAYOUT.SIDEBAR.NOTES.YOU')
+    : note?.user?.name || 'Bot';
+};
+
+const openContact = contactId => {
+  router.push({
+    name: 'contacts_edit',
+    params: {
+      accountId: route.params.accountId,
+      contactId,
+    },
+  });
+};
+</script>
+
+<template>
+  <div v-if="hasNotes" class="flex flex-col px-6">
+    <div class="flex flex-col divide-y divide-n-strong">
+      <div
+        v-for="note in notes"
+        :key="note.id"
+        class="flex flex-col gap-2 py-4 group/note"
+      >
+        <div class="flex items-center gap-1.5 min-w-0">
+          <Avatar
+            :name="contactName(note.contact)"
+            :src="note.contact?.thumbnail"
+            :size="16"
+            rounded-full
+            hide-offline-status
+          />
+          <div
+            class="flex items-center justify-between min-w-0 gap-1 w-full text-sm text-n-slate-11"
+          >
+            <button
+              type="button"
+              class="min-w-0 font-medium truncate text-start text-n-slate-12 hover:text-n-blue-11 p-0"
+              @click="openContact(note.contact.id)"
+            >
+              {{ contactName(note.contact) }}
+            </button>
+            <div class="min-w-0 truncate">
+              <span
+                class="inline-flex items-center gap-1 text-sm text-n-slate-10"
+              >
+                <span class="font-medium text-n-slate-11">
+                  {{ getWrittenBy(note) }}
+                </span>
+                {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.WROTE') }}
+                <span class="font-medium text-n-slate-11">
+                  {{ dynamicTime(note.createdAt) }}
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+        <p
+          v-dompurify-html="formatMessage(note.content || '')"
+          class="mb-0 prose-sm prose-p:text-sm prose-p:leading-relaxed prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
+        />
+      </div>
+    </div>
+  </div>
+
+  <div
+    v-else-if="isLoading"
+    class="flex items-center justify-center py-10 text-n-slate-11"
+  >
+    <Spinner />
+  </div>
+
+  <p
+    v-else
+    class="py-8 mx-6 px-4 text-sm text-center rounded-xl border border-dashed border-n-strong text-n-slate-11"
+  >
+    {{ t('COMPANIES.DETAIL.NOTES.EMPTY') }}
+  </p>
+</template>

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

@@ -32,7 +32,7 @@ const emit = defineEmits([
 </script>
 
 <template>
-  <header class="sticky top-0 z-10 px-6">
+  <header class="sticky top-0 z-20 px-6">
     <div
       class="flex items-start sm:items-center justify-between w-full py-6 gap-2 mx-auto max-w-5xl"
     >

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

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

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

@@ -3,10 +3,16 @@ import { computed, ref, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
-import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
+import {
+  isVoiceCallEnabled,
+  getVoiceCallProvider,
+  VOICE_CALL_PROVIDERS,
+} from 'dashboard/helper/inbox';
 import { useAlert } from 'dashboard/composables';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import { useCallsStore } from 'dashboard/stores/calls';
+import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSession';
+import ContactAPI from 'dashboard/api/contacts';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
@@ -14,6 +20,9 @@ import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 const props = defineProps({
   phone: { type: String, default: '' },
   contactId: { type: [String, Number], required: true },
+  // When set, the WhatsApp call continues in this conversation (matching the
+  // header button) instead of looking up the contact's most recent one.
+  conversationId: { type: [String, Number], default: null },
   label: { type: String, default: '' },
   icon: { type: [String, Object, Function], default: '' },
   size: { type: String, default: 'sm' },
@@ -38,7 +47,6 @@ const voiceInboxes = computed(() =>
 );
 const hasVoiceInboxes = computed(() => voiceInboxes.value.length > 0);
 
-// Unified behavior: hide when no phone
 const shouldRender = computed(() => hasVoiceInboxes.value && !!props.phone);
 
 const isInitiatingCall = computed(() => {
@@ -58,17 +66,85 @@ const navigateToConversation = conversationId => {
   }
 };
 
-const startCall = async inboxId => {
+const whatsappCallSession = useWhatsappCallSession();
+
+// Find the most recent open conversation for this contact in the picked inbox.
+// WhatsApp /initiate is conversation-scoped (unlike Twilio's contact-scoped path).
+// Pass inboxId so the BE applies the filter before the 20-row cap — without it,
+// contacts whose latest WhatsApp conversation falls outside the 20 most recent
+// across all inboxes would be treated as having no conversation.
+const findWhatsappConversationId = async inboxId => {
+  const { data } = await ContactAPI.getConversations(props.contactId, {
+    inboxId,
+  });
+  const conversations = data?.payload || [];
+  const match = [...conversations].sort(
+    (a, b) => (b.last_activity_at || 0) - (a.last_activity_at || 0)
+  )[0];
+  return match?.id || null;
+};
+
+const startWhatsappCall = async (inboxId, conversationIdHint) => {
+  // WhatsApp /initiate is conversation-scoped, so we must hand it a
+  // conversation. Use the caller's hint when given (in-conversation flow);
+  // otherwise pick the most recent one in the inbox.
+  const conversationId =
+    conversationIdHint || (await findWhatsappConversationId(inboxId));
+  if (!conversationId) {
+    useAlert(t('CONTACT_PANEL.CALL_FAILED'));
+    return;
+  }
+
+  const response =
+    await whatsappCallSession.initiateOutboundCall(conversationId);
+  // The composable returns { status: 'locked' } when an init is already in
+  // flight or a call is already active; treat that as a soft no-op rather than
+  // claiming success.
+  if (response?.status === 'locked') return;
+  if (!response?.id) {
+    // Permission flow returns no id — banner already handled server-side; surface to user.
+    useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
+    navigateToConversation(conversationId);
+    return;
+  }
+
+  const callsStore = useCallsStore();
+  // Stay non-active until the connect cable event arrives — flipping to active
+  // here would start the duration timer before the contact picks up.
+  callsStore.addCall({
+    callSid: response.call_id,
+    callId: response.id,
+    conversationId,
+    inboxId,
+    callDirection: 'outbound',
+    provider: 'whatsapp',
+  });
+
+  useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
+  navigateToConversation(conversationId);
+};
+
+const startCall = async (inboxId, conversationIdHint = null) => {
   if (isInitiatingCall.value) return;
 
+  const inbox = (inboxesList.value || []).find(i => i.id === inboxId);
+  if (getVoiceCallProvider(inbox) === VOICE_CALL_PROVIDERS.WHATSAPP) {
+    try {
+      await startWhatsappCall(inboxId, conversationIdHint);
+    } catch (error) {
+      useAlert(error?.message || t('CONTACT_PANEL.CALL_FAILED'));
+    }
+    return;
+  }
+
   try {
     const response = await store.dispatch('contacts/initiateCall', {
       contactId: props.contactId,
       inboxId,
+      conversationId: conversationIdHint,
     });
     const { call_sid: callSid, conversation_id: conversationId } = response;
 
-    // Add call to store immediately so widget shows
     const callsStore = useCallsStore();
     callsStore.addCall({
       callSid,
@@ -86,6 +162,22 @@ const startCall = async inboxId => {
 };
 
 const onClick = async () => {
+  // In conversation context, only stay in this conversation if its inbox is
+  // itself voice-capable (works the same for Twilio and WhatsApp). For
+  // non-voice channels (email, web, …) fall back to the picker so the call
+  // goes out via a voice inbox.
+  if (props.conversationId) {
+    const conversation = store.getters.getConversationById(
+      props.conversationId
+    );
+    const conversationInbox = (inboxesList.value || []).find(
+      i => i.id === conversation?.inbox_id
+    );
+    if (conversationInbox && isVoiceCallEnabled(conversationInbox)) {
+      await startCall(conversationInbox.id, props.conversationId);
+      return;
+    }
+  }
   if (voiceInboxes.value.length > 1) {
     dialogRef.value?.open();
     return;

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue

@@ -84,28 +84,20 @@ const findCategoryFromSlug = slug => {
   return categories.value?.find(category => category.slug === slug);
 };
 
-const assignCategoryFromSlug = slug => {
-  const categoryFromSlug = findCategoryFromSlug(slug);
-  if (categoryFromSlug) {
-    selectedCategoryId.value = categoryFromSlug.id;
-    return categoryFromSlug;
-  }
-  return null;
-};
-
 const selectedCategory = computed(() => {
   if (isNewArticle.value) {
+    if (selectedCategoryId.value) {
+      return (
+        categories.value?.find(c => c.id === selectedCategoryId.value) || null
+      );
+    }
     if (categorySlugFromRoute.value) {
-      const categoryFromSlug = assignCategoryFromSlug(
+      const categoryFromSlug = findCategoryFromSlug(
         categorySlugFromRoute.value
       );
       if (categoryFromSlug) return categoryFromSlug;
     }
-    return selectedCategoryId.value
-      ? categories.value.find(
-          category => category.id === selectedCategoryId.value
-        )
-      : categories.value[0] || null;
+    return categories.value?.[0] || null;
   }
   return categories.value.find(
     category => category.id === props.article?.category?.id

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue

@@ -168,7 +168,9 @@ const handlePageChange = page => emit('pageChange', page);
 const navigateToNewArticlePage = () => {
   const { categorySlug, locale } = route.params;
   router.push({
-    name: 'portals_articles_new',
+    name: props.isCategoryArticles
+      ? 'portals_categories_articles_new'
+      : 'portals_articles_new',
     params: { categorySlug, locale },
   });
 };
@@ -274,6 +276,7 @@ watch(
           :categories="categories"
           :allowed-locales="allowedLocales"
           :has-selected-category="isCategoryArticles"
+          @new-article="navigateToNewArticlePage"
         />
       </div>
     </template>

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue

@@ -25,7 +25,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['localeChange']);
+const emit = defineEmits(['localeChange', 'newArticle']);
 
 const route = useRoute();
 const router = useRouter();
@@ -179,7 +179,7 @@ const handleBreadcrumbClick = () => {
         />
       </OnClickOutside>
     </div>
-    <div v-else class="relative">
+    <div v-else class="relative flex items-center gap-2">
       <OnClickOutside @trigger="isEditCategoryDialogOpen = false">
         <Button
           :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.EDIT_CATEGORY')"
@@ -196,6 +196,12 @@ const handleBreadcrumbClick = () => {
           @close="isEditCategoryDialogOpen = false"
         />
       </OnClickOutside>
+      <Button
+        :label="t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.NEW_ARTICLE')"
+        icon="i-lucide-plus"
+        size="sm"
+        @click="emit('newArticle')"
+      />
     </div>
   </div>
 </template>

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

@@ -0,0 +1,290 @@
+<script setup>
+import { computed, reactive, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import classicLayoutPreview from './classic-layout-preview.svg?raw';
+import documentationLayoutPreview from './documentation-layout-preview.svg?raw';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import RadioCard from 'dashboard/components-next/radioCard/RadioCard.vue';
+
+const props = defineProps({
+  activePortal: { type: Object, required: true },
+  isFetching: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['updatePortalConfiguration']);
+
+const { t } = useI18n();
+
+const PORTAL_LAYOUTS = {
+  CLASSIC: 'classic',
+  DOCUMENTATION: 'documentation',
+};
+
+// `prefix` is the link the help center auto-fills; the DB only stores the handle.
+const SOCIAL_PLATFORMS = [
+  {
+    key: 'facebook',
+    label: 'Facebook',
+    icon: 'i-ri-facebook-circle-fill',
+    prefix: 'facebook.com/',
+  },
+  { key: 'x', label: 'X', icon: 'i-ri-twitter-x-fill', prefix: 'x.com/' },
+  {
+    key: 'instagram',
+    label: 'Instagram',
+    icon: 'i-ri-instagram-fill',
+    prefix: 'instagram.com/',
+  },
+  {
+    key: 'linkedin',
+    label: 'LinkedIn',
+    icon: 'i-ri-linkedin-box-fill',
+    prefix: 'linkedin.com/',
+  },
+  {
+    key: 'youtube',
+    label: 'YouTube',
+    icon: 'i-ri-youtube-fill',
+    prefix: 'youtube.com/',
+  },
+  {
+    key: 'tiktok',
+    label: 'TikTok',
+    icon: 'i-ri-tiktok-fill',
+    prefix: 'tiktok.com/',
+  },
+  {
+    key: 'github',
+    label: 'GitHub',
+    icon: 'i-ri-github-fill',
+    prefix: 'github.com/',
+  },
+  {
+    key: 'whatsapp',
+    label: 'WhatsApp',
+    icon: 'i-ri-whatsapp-fill',
+    prefix: 'wa.me/',
+  },
+];
+
+const portalConfig = computed(() => props.activePortal?.config || {});
+
+const state = reactive({
+  layout: PORTAL_LAYOUTS.CLASSIC,
+  socialProfiles: {},
+});
+const visiblePlatforms = ref([]);
+const showAddMenu = ref(false);
+
+let originalSnapshot = '';
+
+const platformByKey = key => SOCIAL_PLATFORMS.find(p => p.key === key);
+
+const trimmedHandle = key => (state.socialProfiles[key] || '').trim();
+
+const buildSocialProfiles = () =>
+  visiblePlatforms.value.reduce((acc, key) => {
+    const handle = trimmedHandle(key);
+    if (handle) acc[key] = handle;
+    return acc;
+  }, {});
+
+const snapshot = () =>
+  JSON.stringify({ layout: state.layout, social: buildSocialProfiles() });
+
+const resetFromPortal = () => {
+  const savedProfiles = portalConfig.value.social_profiles || {};
+  state.layout = portalConfig.value.layout || PORTAL_LAYOUTS.CLASSIC;
+  state.socialProfiles = SOCIAL_PLATFORMS.reduce((acc, { key }) => {
+    acc[key] = savedProfiles[key] || '';
+    return acc;
+  }, {});
+  visiblePlatforms.value = SOCIAL_PLATFORMS.map(p => p.key).filter(key =>
+    (savedProfiles[key] || '').trim()
+  );
+  originalSnapshot = snapshot();
+};
+
+watch(() => props.activePortal, resetFromPortal, {
+  immediate: true,
+  deep: true,
+});
+
+const hasChanges = computed(() => snapshot() !== originalSnapshot);
+
+const visiblePlatformDetails = computed(() =>
+  visiblePlatforms.value.map(platformByKey)
+);
+
+const addablePlatforms = computed(() =>
+  SOCIAL_PLATFORMS.filter(p => !visiblePlatforms.value.includes(p.key)).map(
+    p => ({ label: p.label, value: p.key, action: p.key, icon: p.icon })
+  )
+);
+
+const addPlatform = ({ value }) => {
+  if (!visiblePlatforms.value.includes(value)) {
+    visiblePlatforms.value.push(value);
+  }
+  showAddMenu.value = false;
+};
+
+const removePlatform = key => {
+  visiblePlatforms.value = visiblePlatforms.value.filter(k => k !== key);
+  state.socialProfiles[key] = '';
+};
+
+const handleSave = () => {
+  emit('updatePortalConfiguration', {
+    id: props.activePortal.id,
+    slug: props.activePortal.slug,
+    config: {
+      layout: state.layout,
+      social_profiles: buildSocialProfiles(),
+    },
+  });
+};
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-6">
+    <div class="flex flex-col gap-2">
+      <h6 class="text-base font-medium text-n-slate-12">
+        {{ t('HELP_CENTER.PORTAL_SETTINGS.LAYOUT_CONTENT.HEADER') }}
+      </h6>
+      <span class="text-sm text-n-slate-11">
+        {{ t('HELP_CENTER.PORTAL_SETTINGS.LAYOUT_CONTENT.DESCRIPTION') }}
+      </span>
+    </div>
+
+    <section class="flex flex-col gap-3">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-n-slate-11">
+        <RadioCard
+          :id="PORTAL_LAYOUTS.CLASSIC"
+          :is-active="state.layout === PORTAL_LAYOUTS.CLASSIC"
+          :label="
+            t('HELP_CENTER.PORTAL_SETTINGS.LAYOUT_CONTENT.LAYOUT.CLASSIC.TITLE')
+          "
+          :description="
+            t(
+              'HELP_CENTER.PORTAL_SETTINGS.LAYOUT_CONTENT.LAYOUT.CLASSIC.DESCRIPTION'
+            )
+          "
+          @select="value => (state.layout = value)"
+        >
+          <div
+            class="w-full mt-2 rounded-md overflow-hidden border border-solid border-n-weak bg-n-slate-2 dark:bg-n-slate-1"
+          >
+            <span v-dompurify-html="classicLayoutPreview" />
+          </div>
+        </RadioCard>
+
+        <RadioCard
+          :id="PORTAL_LAYOUTS.DOCUMENTATION"
+          beta
+          :is-active="state.layout === PORTAL_LAYOUTS.DOCUMENTATION"
+          :label="
+            t('HELP_CENTER.PORTAL_SETTINGS.LAYOUT_CONTENT.LAYOUT.SIDEBAR.TITLE')
+          "
+          :description="
+            t(
+              'HELP_CENTER.PORTAL_SETTINGS.LAYOUT_CONTENT.LAYOUT.SIDEBAR.DESCRIPTION'
+            )
+          "
+          @select="value => (state.layout = value)"
+        >
+          <div
+            class="w-full mt-2 rounded-md overflow-hidden border border-solid border-n-weak bg-n-slate-2 dark:bg-n-slate-1"
+          >
+            <span v-dompurify-html="documentationLayoutPreview" />
+          </div>
+        </RadioCard>
+      </div>
+    </section>
+
+    <section
+      v-if="state.layout === PORTAL_LAYOUTS.DOCUMENTATION"
+      class="flex flex-col gap-3"
+    >
+      <div class="flex flex-col gap-1">
+        <h6 class="text-sm font-medium text-n-slate-12">
+          {{
+            t('HELP_CENTER.PORTAL_SETTINGS.LAYOUT_CONTENT.SOCIAL_LINKS.HEADER')
+          }}
+        </h6>
+        <span class="text-sm text-n-slate-11">
+          {{
+            t(
+              'HELP_CENTER.PORTAL_SETTINGS.LAYOUT_CONTENT.SOCIAL_LINKS.DESCRIPTION'
+            )
+          }}
+        </span>
+      </div>
+
+      <div
+        v-for="platform in visiblePlatformDetails"
+        :key="platform.key"
+        class="flex items-center h-10 gap-1.5 px-3 rounded-lg outline outline-1 outline-n-weak focus-within:outline-n-brand"
+      >
+        <Icon :icon="platform.icon" class="size-4 shrink-0 text-n-slate-11" />
+        <span class="text-sm shrink-0 text-n-slate-10">{{
+          platform.prefix
+        }}</span>
+        <input
+          v-model="state.socialProfiles[platform.key]"
+          type="text"
+          class="flex-1 min-w-0 text-sm bg-transparent outline-none reset-base text-n-slate-12 placeholder:text-n-slate-10"
+          :placeholder="
+            t(
+              'HELP_CENTER.PORTAL_SETTINGS.LAYOUT_CONTENT.SOCIAL_LINKS.PLACEHOLDER'
+            )
+          "
+        />
+        <Button
+          icon="i-lucide-x"
+          color="slate"
+          variant="ghost"
+          size="xs"
+          :aria-label="
+            t('HELP_CENTER.PORTAL_SETTINGS.LAYOUT_CONTENT.SOCIAL_LINKS.REMOVE')
+          "
+          @click="removePlatform(platform.key)"
+        />
+      </div>
+
+      <div
+        v-if="addablePlatforms.length"
+        v-on-clickaway="() => (showAddMenu = false)"
+        class="relative"
+      >
+        <Button
+          :label="
+            t('HELP_CENTER.PORTAL_SETTINGS.LAYOUT_CONTENT.SOCIAL_LINKS.ADD')
+          "
+          icon="i-lucide-plus"
+          color="slate"
+          variant="faded"
+          size="sm"
+          @click="showAddMenu = !showAddMenu"
+        />
+        <DropdownMenu
+          v-if="showAddMenu"
+          :menu-items="addablePlatforms"
+          class="mt-1 w-52 top-full ltr:left-0 rtl:right-0"
+          @action="addPlatform"
+        />
+      </div>
+    </section>
+
+    <div class="flex justify-end">
+      <Button
+        :label="t('HELP_CENTER.PORTAL_SETTINGS.LAYOUT_CONTENT.SAVE')"
+        :disabled="!hasChanges || isFetching"
+        @click="handleSave"
+      />
+    </div>
+  </div>
+</template>

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

@@ -7,6 +7,7 @@ import { useMapGetter } from 'dashboard/composables/store.js';
 import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
 import PortalBaseSettings from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue';
 import PortalConfigurationSettings from './PortalConfigurationSettings.vue';
+import PortalLayoutContentSettings from './PortalLayoutContentSettings.vue';
 import ConfirmDeletePortalDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/ConfirmDeletePortalDialog.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -102,6 +103,12 @@ const handleDeletePortal = () => {
           @send-cname-instructions="handleSendCnameInstructions"
         />
         <div class="w-full h-px bg-n-weak" />
+        <PortalLayoutContentSettings
+          :active-portal="activePortal"
+          :is-fetching="isFetching"
+          @update-portal-configuration="handleUpdatePortalConfiguration"
+        />
+        <div class="w-full h-px bg-n-weak" />
         <div class="flex items-end justify-between w-full gap-4">
           <div class="flex flex-col gap-2">
             <h6 class="text-base font-medium text-n-slate-12">

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/classic-layout-preview.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120" class="w-full h-auto block" aria-hidden="true">
+  <rect x="0" y="0" width="200" height="14" fill="currentColor" opacity="0.1"/>
+  <rect x="14" y="5" width="20" height="4" rx="1" fill="currentColor" opacity="0.3"/>
+  <rect x="14" y="22" width="64" height="5" rx="1" fill="currentColor" opacity="0.32"/>
+  <rect x="14" y="32" width="128" height="9" rx="2" fill="currentColor" opacity="0.18"/>
+  <rect x="14" y="70" width="82" height="19" rx="2" fill="currentColor" opacity="0.12"/>
+  <rect x="104" y="70" width="82" height="19" rx="2" fill="currentColor" opacity="0.12"/>
+  <rect x="14" y="93" width="82" height="19" rx="2" fill="currentColor" opacity="0.12"/>
+  <rect x="104" y="93" width="82" height="19" rx="2" fill="currentColor" opacity="0.12"/>
+</svg>

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/documentation-layout-preview.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120" class="w-full h-auto block" aria-hidden="true">
+  <rect x="0" y="0" width="200" height="14" fill="currentColor" opacity="0.1"/>
+  <rect x="6" y="5" width="20" height="4" rx="1" fill="currentColor" opacity="0.3"/>
+  <rect x="0" y="14" width="50" height="106" fill="currentColor" opacity="0.07"/>
+  <rect x="6" y="22" width="38" height="4" rx="1" fill="currentColor" opacity="0.25"/>
+  <rect x="6" y="32" width="30" height="3" rx="1" fill="currentColor" opacity="0.18"/>
+  <rect x="6" y="40" width="35" height="3" rx="1" fill="currentColor" opacity="0.18"/>
+  <rect x="6" y="48" width="28" height="3" rx="1" fill="currentColor" opacity="0.18"/>
+  <rect x="6" y="56" width="32" height="3" rx="1" fill="currentColor" opacity="0.18"/>
+  <rect x="60" y="25" width="80" height="6" rx="1" fill="currentColor" opacity="0.35"/>
+  <rect x="60" y="38" width="120" height="8" rx="2" fill="currentColor" opacity="0.18"/>
+  <rect x="60" y="55" width="37" height="22" rx="2" fill="currentColor" opacity="0.12"/>
+  <rect x="101" y="55" width="37" height="22" rx="2" fill="currentColor" opacity="0.12"/>
+  <rect x="142" y="55" width="37" height="22" rx="2" fill="currentColor" opacity="0.12"/>
+  <rect x="60" y="82" width="37" height="22" rx="2" fill="currentColor" opacity="0.12"/>
+  <rect x="101" y="82" width="37" height="22" rx="2" fill="currentColor" opacity="0.12"/>
+  <rect x="142" y="82" width="37" height="22" rx="2" fill="currentColor" opacity="0.12"/>
+</svg>

app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue

@@ -19,6 +19,7 @@ const DEFAULT_ROUTE = 'portals_articles_index';
 const CATEGORY_ROUTE = 'portals_categories_index';
 const CATEGORY_SUB_ROUTES = [
   'portals_categories_articles_index',
+  'portals_categories_articles_new',
   'portals_categories_articles_edit',
 ];
 

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

@@ -0,0 +1,113 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+
+import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
+import BulkDeleteDialog from 'dashboard/components-next/captain/pageComponents/BulkDeleteDialog.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  selectedIds: { type: Set, default: () => new Set() },
+  documents: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits([
+  'update:selectedIds',
+  'bulkSyncQueued',
+  'bulkDeleteSucceeded',
+]);
+
+const { t } = useI18n();
+const store = useStore();
+
+const bulkDeleteDialog = ref(null);
+
+const isSyncableDocument = doc =>
+  !doc.pdf_document && doc.status === 'available' && !doc.sync_in_progress;
+
+const syncableSelectedIds = computed(() => {
+  if (!props.selectedIds.size) return [];
+  return props.documents
+    .filter(doc => props.selectedIds.has(doc.id) && isSyncableDocument(doc))
+    .map(doc => doc.id);
+});
+
+const hasSyncableSelection = computed(
+  () => syncableSelectedIds.value.length > 0
+);
+
+const selectAllLabel = computed(() => {
+  const count = props.documents.length;
+  const isAllSelected = props.selectedIds.size === count && count > 0;
+  return isAllSelected
+    ? t('CAPTAIN.DOCUMENTS.UNSELECT_ALL', { count })
+    : t('CAPTAIN.DOCUMENTS.SELECT_ALL', { count });
+});
+
+const selectedCountLabel = computed(() =>
+  t('CAPTAIN.DOCUMENTS.SELECTED', { count: props.selectedIds.size })
+);
+
+const handleBulkSync = async () => {
+  const ids = syncableSelectedIds.value;
+  if (!ids.length) return;
+
+  try {
+    const response = await store.dispatch('captainBulkActions/handleBulkSync', {
+      ids,
+    });
+    const queuedCount = response?.count ?? response?.ids?.length ?? 0;
+    let message = t('CAPTAIN.DOCUMENTS.BULK_SYNC.ZERO_MESSAGE');
+
+    if (queuedCount === 1) {
+      message = t('CAPTAIN.DOCUMENTS.BULK_SYNC.SUCCESS_MESSAGE_ONE');
+    } else if (queuedCount > 1) {
+      message = t('CAPTAIN.DOCUMENTS.BULK_SYNC.SUCCESS_MESSAGE', {
+        count: queuedCount,
+      });
+    }
+
+    useAlert(message);
+    emit('update:selectedIds', new Set());
+    if (queuedCount > 0) emit('bulkSyncQueued');
+  } catch (error) {
+    useAlert(t('CAPTAIN.DOCUMENTS.BULK_SYNC.ERROR_MESSAGE'));
+  }
+};
+</script>
+
+<template>
+  <div>
+    <BulkSelectBar
+      :model-value="selectedIds"
+      :all-items="documents"
+      :select-all-label="selectAllLabel"
+      :selected-count-label="selectedCountLabel"
+      :delete-label="$t('CAPTAIN.DOCUMENTS.BULK_DELETE_BUTTON')"
+      class="w-fit"
+      :class="{ 'mb-2': selectedIds.size > 0 }"
+      @update:model-value="emit('update:selectedIds', $event)"
+      @bulk-delete="bulkDeleteDialog.dialogRef.open()"
+    >
+      <template v-if="hasSyncableSelection" #secondaryActions>
+        <Button
+          :label="$t('CAPTAIN.DOCUMENTS.BULK_SYNC_BUTTON')"
+          sm
+          slate
+          ghost
+          icon="i-lucide-refresh-cw"
+          class="!px-1.5"
+          @click="handleBulkSync"
+        />
+      </template>
+    </BulkSelectBar>
+    <BulkDeleteDialog
+      ref="bulkDeleteDialog"
+      :bulk-ids="selectedIds"
+      type="AssistantDocument"
+      @delete-success="emit('bulkDeleteSucceeded')"
+    />
+  </div>
+</template>

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

@@ -5,14 +5,17 @@ import { useI18n } from 'vue-i18n';
 import { dynamicTime } from 'shared/helpers/timeHelper';
 import { usePolicy } from 'dashboard/composables/usePolicy';
 import {
-  isPdfDocument,
+  isSafeHttpLink,
   formatDocumentLink,
+  getDocumentDisplayPath,
 } from 'shared/helpers/documentHelper';
 
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 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 Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import DocumentSyncStatus from 'dashboard/components-next/captain/assistant/DocumentSyncStatus.vue';
 
 const props = defineProps({
   id: {
@@ -31,10 +34,38 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  pdfDocument: {
+    type: Boolean,
+    default: false,
+  },
   createdAt: {
     type: Number,
     required: true,
   },
+  status: {
+    type: String,
+    default: null,
+  },
+  syncStatus: {
+    type: String,
+    default: null,
+  },
+  lastSyncedAt: {
+    type: Number,
+    default: null,
+  },
+  lastSyncErrorCode: {
+    type: String,
+    default: null,
+  },
+  syncInProgress: {
+    type: Boolean,
+    default: false,
+  },
+  syncStaleAfterHours: {
+    type: Number,
+    default: null,
+  },
   isSelected: {
     type: Boolean,
     default: false,
@@ -64,6 +95,20 @@ const modelValue = computed({
   set: () => emit('select', props.id),
 });
 
+const isPdf = computed(() => props.pdfDocument);
+const hasSafeLink = computed(() => isSafeHttpLink(props.externalLink));
+const canManage = computed(() => checkPermissions(['administrator']));
+const isAvailable = computed(() => props.status === 'available');
+const canSync = computed(
+  () => canManage.value && !isPdf.value && isAvailable.value
+);
+const isSyncing = computed(() => props.syncStatus === 'syncing');
+const isFailed = computed(() => props.syncStatus === 'failed');
+const isRetryableSync = computed(
+  () => isFailed.value || (isSyncing.value && !props.syncInProgress)
+);
+const showSyncStatus = computed(() => !isPdf.value);
+
 const menuItems = computed(() => {
   const allOptions = [
     {
@@ -74,7 +119,19 @@ const menuItems = computed(() => {
     },
   ];
 
-  if (checkPermissions(['administrator'])) {
+  if (canSync.value) {
+    allOptions.push({
+      label: isRetryableSync.value
+        ? t('CAPTAIN.DOCUMENTS.OPTIONS.RETRY_SYNC')
+        : t('CAPTAIN.DOCUMENTS.OPTIONS.SYNC_NOW'),
+      value: 'sync',
+      action: 'sync',
+      icon: 'i-lucide-refresh-cw',
+      disabled: props.syncInProgress,
+    });
+  }
+
+  if (canManage.value) {
     allOptions.push({
       label: t('CAPTAIN.DOCUMENTS.OPTIONS.DELETE_DOCUMENT'),
       value: 'delete',
@@ -86,17 +143,25 @@ const menuItems = computed(() => {
   return allOptions;
 });
 
-const createdAt = computed(() => dynamicTime(props.createdAt));
+const createdAtLabel = computed(() => dynamicTime(props.createdAt));
 
-const displayLink = computed(() => formatDocumentLink(props.externalLink));
+const displayLink = computed(() =>
+  isPdf.value
+    ? formatDocumentLink(props.externalLink)
+    : getDocumentDisplayPath(props.externalLink)
+);
 const linkIcon = computed(() =>
-  isPdfDocument(props.externalLink) ? 'i-ph-file-pdf' : 'i-ph-link-simple'
+  isPdf.value ? 'i-ph-file-pdf' : 'i-ph-link-simple'
 );
 
 const handleAction = ({ action, value }) => {
   toggleDropdown(false);
   emit('action', { action, value, id: props.id });
 };
+
+const handleRetry = () => {
+  emit('action', { action: 'sync', id: props.id });
+};
 </script>
 
 <template>
@@ -141,17 +206,41 @@ const handleAction = ({ action, value }) => {
       <span
         class="flex gap-1 items-center text-sm truncate shrink-0 text-n-slate-11"
       >
-        <i class="i-woot-captain" />
+        <Icon icon="i-woot-captain" />
         {{ assistant?.name || '' }}
       </span>
+      <a
+        v-if="!isPdf && hasSafeLink"
+        :href="externalLink"
+        :title="externalLink"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex flex-1 gap-1 justify-start items-center text-sm truncate text-n-slate-11 hover:text-n-slate-12 hover:underline"
+        @click.stop
+      >
+        <Icon :icon="linkIcon" class="shrink-0" />
+        <span class="truncate">{{ displayLink }}</span>
+        <Icon icon="i-lucide-external-link size-3 shrink-0 opacity-70" />
+      </a>
       <span
+        v-else
         class="flex flex-1 gap-1 justify-start items-center text-sm truncate text-n-slate-11"
       >
-        <i :class="linkIcon" class="shrink-0" />
+        <Icon :icon="linkIcon" class="shrink-0" />
         <span class="truncate">{{ displayLink }}</span>
       </span>
-      <div class="text-sm shrink-0 text-n-slate-11 line-clamp-1">
-        {{ createdAt }}
+      <DocumentSyncStatus
+        v-if="showSyncStatus"
+        :status="syncStatus"
+        :last-synced-at="lastSyncedAt"
+        :error-code="lastSyncErrorCode"
+        :sync-in-progress="syncInProgress"
+        :stale-after-hours="syncStaleAfterHours"
+        :show-retry="canSync && isRetryableSync"
+        @retry="handleRetry"
+      />
+      <div v-else class="text-sm shrink-0 text-n-slate-11 line-clamp-1">
+        {{ createdAtLabel }}
       </div>
     </div>
   </CardLayout>

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

@@ -0,0 +1,61 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+import DocumentFiltersBar from 'dashboard/components-next/captain/assistant/DocumentFiltersBar.vue';
+
+const emit = defineEmits(['change']);
+
+const source = ref('all');
+const status = ref(null);
+const sort = ref('recently_updated');
+
+const hasActiveFilters = computed(
+  () => source.value !== 'all' || Boolean(status.value)
+);
+
+const buildParams = (page = 1) => {
+  const params = { page };
+  if (source.value !== 'all') params.source = source.value;
+  if (status.value) params.filter = status.value;
+  if (sort.value) params.sort = sort.value;
+  return params;
+};
+
+const emitChange = () => emit('change');
+
+const handleSourceSelect = sourceKey => {
+  source.value = sourceKey;
+  if (sourceKey !== 'web') status.value = null;
+  emitChange();
+};
+
+const handleStatusSelect = statusKey => {
+  status.value = statusKey;
+  if (statusKey) source.value = 'web';
+  emitChange();
+};
+
+const handleSortSelect = sortKey => {
+  sort.value = sortKey;
+  emitChange();
+};
+
+const reset = () => {
+  source.value = 'all';
+  status.value = null;
+  sort.value = 'recently_updated';
+};
+
+defineExpose({ buildParams, reset, hasActiveFilters });
+</script>
+
+<template>
+  <DocumentFiltersBar
+    :active-source-filter="source"
+    :active-status-filter="status"
+    :active-sort="sort"
+    @select-source="handleSourceSelect"
+    @select-status="handleStatusSelect"
+    @select-sort="handleSortSelect"
+  />
+</template>

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

@@ -0,0 +1,141 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { vOnClickOutside } from '@vueuse/components';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  activeSourceFilter: { type: String, default: 'all' },
+  activeStatusFilter: { type: String, default: null },
+  activeSort: { type: String, default: 'recently_updated' },
+});
+
+const emit = defineEmits(['selectSource', 'selectStatus', 'selectSort']);
+
+const { t } = useI18n();
+
+const openMenu = ref(null);
+
+const MENU_CONFIG = [
+  {
+    key: 'source',
+    activeKey: 'activeSourceFilter',
+    dropdownClass: 'min-w-48',
+    options: [
+      { labelKey: 'SOURCE.ALL', value: 'all', icon: 'i-lucide-files' },
+      { labelKey: 'SOURCE.WEB', value: 'web', icon: 'i-lucide-link' },
+      { labelKey: 'SOURCE.PDF', value: 'pdf', icon: 'i-lucide-file-text' },
+    ],
+  },
+  {
+    key: 'status',
+    activeKey: 'activeStatusFilter',
+    dropdownClass: 'min-w-52',
+    options: [
+      { labelKey: 'STATUS.ANY', value: null, icon: 'i-lucide-circle-dashed' },
+      {
+        labelKey: 'STATUS.UPDATED',
+        value: 'synced',
+        icon: 'i-lucide-check-circle',
+      },
+      {
+        labelKey: 'STATUS.NEEDS_UPDATE',
+        value: 'stale',
+        icon: 'i-lucide-clock',
+      },
+      {
+        labelKey: 'STATUS.UPDATING',
+        value: 'syncing',
+        icon: 'i-lucide-refresh-cw',
+      },
+      {
+        labelKey: 'STATUS.FAILED',
+        value: 'failed',
+        icon: 'i-lucide-circle-x',
+      },
+    ],
+  },
+  {
+    key: 'sort',
+    activeKey: 'activeSort',
+    dropdownClass: 'min-w-56',
+    options: [
+      {
+        labelKey: 'SORT.RECENTLY_UPDATED',
+        value: 'recently_updated',
+        icon: 'i-lucide-arrow-down-up',
+      },
+      {
+        labelKey: 'SORT.RECENTLY_CREATED',
+        value: 'recently_created',
+        icon: 'i-lucide-clock',
+      },
+    ],
+  },
+];
+
+const filterMenus = computed(() =>
+  MENU_CONFIG.filter(
+    menu => !(menu.key === 'status' && props.activeSourceFilter === 'pdf')
+  ).map(menu => {
+    const active = props[menu.activeKey];
+    const items = menu.options.map(opt => ({
+      label: t(`CAPTAIN.DOCUMENTS.FILTERS.${opt.labelKey}`),
+      value: opt.value,
+      icon: opt.icon,
+      action: menu.key,
+      isSelected: opt.value === active,
+    }));
+    return {
+      ...menu,
+      items,
+      selected: items.find(item => item.isSelected) || items[0],
+    };
+  })
+);
+
+const closeMenu = () => {
+  openMenu.value = null;
+};
+
+const toggleMenu = menu => {
+  openMenu.value = openMenu.value === menu ? null : menu;
+};
+
+const handleMenuAction = ({ action, value }) => {
+  closeMenu();
+  if (action === 'source') emit('selectSource', value);
+  else if (action === 'status') emit('selectStatus', value);
+  else if (action === 'sort') emit('selectSort', value);
+};
+</script>
+
+<template>
+  <div
+    v-on-click-outside="closeMenu"
+    class="inline-flex flex-wrap items-center gap-2 pt-2 w-fit"
+  >
+    <div v-for="menu in filterMenus" :key="menu.key" class="relative">
+      <Button
+        :icon="menu.selected.icon"
+        slate
+        size="sm"
+        :class="{ 'bg-n-slate-9/10': openMenu === menu.key }"
+        @click="toggleMenu(menu.key)"
+      >
+        <span class="min-w-0 truncate">{{ menu.selected.label }}</span>
+        <Icon icon="i-lucide-chevron-down" class="shrink-0 size-4" />
+      </Button>
+      <DropdownMenu
+        v-if="openMenu === menu.key"
+        :menu-items="menu.items"
+        :class="menu.dropdownClass"
+        class="top-full mt-2 ltr:left-0 rtl:right-0"
+        @action="handleMenuAction"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,153 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const props = defineProps({
+  status: {
+    type: String,
+    default: null,
+  },
+  lastSyncedAt: {
+    type: Number,
+    default: null,
+  },
+  errorCode: {
+    type: String,
+    default: null,
+  },
+  syncInProgress: {
+    type: Boolean,
+    default: false,
+  },
+  staleAfterHours: {
+    type: Number,
+    default: null,
+  },
+  showRetry: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['retry']);
+const { t } = useI18n();
+
+const SECONDS_PER_HOUR = 3600;
+
+const SYNCING = 'syncing';
+const FAILED = 'failed';
+
+const ERROR_CODE_LABELS = {
+  not_found: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.NOT_FOUND',
+  access_denied: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.ACCESS_DENIED',
+  timeout: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.TIMEOUT',
+  content_empty: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.CONTENT_EMPTY',
+  fetch_failed: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.FETCH_FAILED',
+  sync_error: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.SYNC_ERROR',
+};
+const DEFAULT_ERROR_LABEL = 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.DEFAULT';
+
+const hasSyncingStatus = computed(() => props.status === SYNCING);
+const isSyncing = computed(
+  () => hasSyncingStatus.value && props.syncInProgress
+);
+const isStaleSync = computed(
+  () => hasSyncingStatus.value && !props.syncInProgress
+);
+const isFailed = computed(() => props.status === FAILED);
+const canRetry = computed(() => isFailed.value || isStaleSync.value);
+const hasBeenSynced = computed(() => Boolean(props.lastSyncedAt));
+
+const ageInHours = computed(() => {
+  if (!props.lastSyncedAt) return null;
+  const nowSeconds = Date.now() / 1000;
+  return (nowSeconds - props.lastSyncedAt) / SECONDS_PER_HOUR;
+});
+
+const staleAfterHours = computed(() => Number(props.staleAfterHours));
+const hasStaleThreshold = computed(
+  () => Number.isFinite(staleAfterHours.value) && staleAfterHours.value > 0
+);
+const isStale = computed(
+  () =>
+    hasStaleThreshold.value &&
+    ageInHours.value !== null &&
+    ageInHours.value >= staleAfterHours.value
+);
+
+const errorLabel = computed(() =>
+  t(ERROR_CODE_LABELS[props.errorCode] || DEFAULT_ERROR_LABEL)
+);
+
+const label = computed(() => {
+  if (isSyncing.value) return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.SYNCING');
+  if (isStaleSync.value) return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.STALE_SYNC');
+  if (isFailed.value) return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.FAILED');
+  if (hasBeenSynced.value)
+    return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.SYNCED', {
+      time: dynamicTime(props.lastSyncedAt),
+    });
+  return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.NEVER_SYNCED');
+});
+
+const fullLabel = computed(() => {
+  if (isSyncing.value) return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.SYNCING');
+  if (isStaleSync.value) return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.STALE_SYNC');
+  if (isFailed.value)
+    return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.FAILED', {
+      error: errorLabel.value,
+    });
+  if (hasBeenSynced.value)
+    return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.SYNCED', {
+      time: dynamicTime(props.lastSyncedAt),
+    });
+  return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.NEVER_SYNCED');
+});
+
+const tone = computed(() => {
+  if (isSyncing.value) return 'amber';
+  if (isStaleSync.value) return 'amber';
+  if (isFailed.value) return 'ruby';
+  if (isStale.value) return 'amber';
+  return 'slate';
+});
+
+const textClass = computed(() => {
+  if (tone.value === 'amber') return 'text-n-amber-11';
+  if (tone.value === 'ruby') return 'text-n-ruby-11';
+  return 'text-n-slate-11';
+});
+
+const statusIcon = computed(() => {
+  if (isFailed.value || isStale.value || isStaleSync.value) {
+    return 'i-lucide-circle-alert';
+  }
+  return 'i-lucide-refresh-cw';
+});
+</script>
+
+<template>
+  <span
+    class="flex gap-1.5 items-center text-sm truncate shrink-0 tabular-nums"
+    :class="textClass"
+    :title="fullLabel"
+  >
+    <Spinner v-if="isSyncing" class="text-n-amber-11 size-3" />
+    <Icon v-else :icon="statusIcon" class="shrink-0 size-3.5" />
+    <span class="truncate">{{ label }}</span>
+    <Button
+      v-if="showRetry && canRetry"
+      :label="t('CAPTAIN.DOCUMENTS.OPTIONS.RETRY_SYNC')"
+      xs
+      link
+      ruby
+      icon="i-lucide-refresh-cw"
+      class="hover:!no-underline !gap-1 ms-1"
+      @click.stop="emit('retry')"
+    />
+  </span>
+</template>

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

@@ -15,7 +15,7 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['close']);
+const emit = defineEmits(['close', 'createSuccess']);
 const { t } = useI18n();
 const store = useStore();
 
@@ -26,6 +26,7 @@ const i18nKey = 'CAPTAIN.DOCUMENTS.CREATE';
 const handleSubmit = async newDocument => {
   try {
     await store.dispatch('captainDocuments/create', newDocument);
+    emit('createSuccess');
     useAlert(t(`${i18nKey}.SUCCESS_MESSAGE`));
     dialogRef.value.close();
   } catch (error) {

app/javascript/dashboard/components-next/icon/ChannelIcon.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { toRef } from 'vue';
+import { computed, toRef } from 'vue';
+import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
 import { useChannelIcon } from './provider';
 import Icon from 'next/icon/Icon.vue';
 
@@ -10,9 +11,20 @@ const props = defineProps({
   },
 });
 
+defineOptions({ inheritAttrs: false });
+
 const channelIcon = useChannelIcon(toRef(props, 'inbox'));
+const hasVoiceBadge = computed(() => isVoiceCallEnabled(props.inbox));
 </script>
 
 <template>
-  <Icon :icon="channelIcon" />
+  <span class="relative inline-flex" v-bind="$attrs">
+    <Icon :icon="channelIcon" class="size-full" />
+    <span
+      v-if="hasVoiceBadge"
+      class="absolute -top-1 -right-1 inline-flex items-center justify-center size-2.5 rounded-full bg-n-alpha-2 ring-1 ring-n-solid-1"
+    >
+      <Icon icon="i-lucide-audio-lines" class="size-1.5 text-n-slate-10" />
+    </span>
+  </span>
 </template>

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

@@ -1,5 +1,4 @@
 import { computed } from 'vue';
-import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
 
 export function useChannelIcon(inbox) {
   const channelTypeIconMap = {
@@ -38,8 +37,15 @@ export function useChannelIcon(inbox) {
       icon = 'i-woot-whatsapp';
     }
 
-    // Special case for voice-enabled inboxes (Twilio, WhatsApp, etc.)
-    if (isVoiceCallEnabled(inboxDetails)) {
+    // Native Twilio voice inbox: a TwilioSms with voice enabled (and no WhatsApp medium)
+    // is presented as a Voice channel, so show the phone icon.
+    const voiceEnabled =
+      inboxDetails.voice_enabled || inboxDetails.voiceEnabled;
+    if (
+      type === 'Channel::TwilioSms' &&
+      voiceEnabled &&
+      inboxDetails.medium !== 'whatsapp'
+    ) {
       icon = 'i-woot-voice';
     }
 

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

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import BaseBubble from './Base.vue';
+import FormattedContent from './Text/FormattedContent.vue';
 import { useI18n } from 'vue-i18n';
 import { CSAT_RATINGS, CSAT_DISPLAY_TYPES } from 'shared/constants/messages';
 import { useMessageContext } from '../provider.js';
@@ -41,7 +42,8 @@ const starRatingValue = computed(() => {
 
 <template>
   <BaseBubble class="px-4 py-3" data-bubble-name="csat">
-    <h4>{{ content || t('CONVERSATION.CSAT_REPLY_MESSAGE') }}</h4>
+    <FormattedContent v-if="content" :content="content" />
+    <h4 v-else>{{ t('CONVERSATION.CSAT_REPLY_MESSAGE') }}</h4>
     <dl v-if="isRatingSubmitted" class="mt-4">
       <dt class="text-n-slate-11 italic">
         {{ t('CONVERSATION.RATING_TITLE') }}

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

@@ -3,9 +3,12 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
 import { useMessageContext } from '../provider.js';
-import { VOICE_CALL_STATUS } from '../constants';
-import { useCallSession } from 'dashboard/composables/useCallSession';
+import { VOICE_CALL_STATUS, MESSAGE_TYPES } from '../constants';
+import { useCallActions } from 'dashboard/composables/useCallSession';
+import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSession';
+import { useCallsStore } from 'dashboard/stores/calls';
 import { formatDuration } from 'shared/helpers/timeHelper';
+import { useAlert } from 'dashboard/composables';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
@@ -17,39 +20,54 @@ const LABEL_MAP = {
 };
 
 const ICON_MAP = {
-  [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call',
-  [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x',
-  [VOICE_CALL_STATUS.FAILED]: 'i-ph-phone-x',
-};
-
-const BG_COLOR_MAP = {
-  [VOICE_CALL_STATUS.IN_PROGRESS]: 'bg-n-teal-9',
-  [VOICE_CALL_STATUS.RINGING]: 'bg-n-teal-9 animate-pulse',
-  [VOICE_CALL_STATUS.COMPLETED]: 'bg-n-slate-11',
-  [VOICE_CALL_STATUS.NO_ANSWER]: 'bg-n-ruby-9',
-  [VOICE_CALL_STATUS.FAILED]: 'bg-n-ruby-9',
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call-bold',
+  [VOICE_CALL_STATUS.COMPLETED]: 'i-ph-phone-bold',
+  [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x-bold',
+  [VOICE_CALL_STATUS.FAILED]: 'i-ph-phone-x-bold',
 };
 
 const { t } = useI18n();
 const store = useStore();
-const { call, conversationId, currentUserId, inboxId } = useMessageContext();
+const {
+  call,
+  attachments,
+  contentAttributes,
+  conversationId,
+  currentUserId,
+  inboxId,
+  sender,
+  messageType,
+} = useMessageContext();
 const { joinCall, endCall, activeCall, hasActiveCall, isJoining } =
-  useCallSession();
+  useCallActions();
+const whatsappCallSession = useWhatsappCallSession();
 
 const status = computed(() => call.value?.status);
-const isOutbound = computed(() => call.value?.direction === 'outgoing');
+// Server-side call records use `outgoing`/`incoming`, while the Pinia store
+// and a few API hops normalise to `outbound`/`inbound`. Accept either so the
+// bubble label matches the message orientation no matter the source.
+const isOutbound = computed(() => {
+  const dir = call.value?.direction;
+  if (dir === 'outgoing' || dir === 'outbound') return true;
+  if (dir === 'incoming' || dir === 'inbound') return false;
+  // Fall back to the message orientation: agent-authored messages sit on the
+  // right (outbound) and contact-authored ones on the left.
+  return messageType.value === MESSAGE_TYPES.OUTGOING;
+});
+const isWhatsapp = computed(() => call.value?.provider === 'whatsapp');
 const isFailed = computed(() =>
   [VOICE_CALL_STATUS.NO_ANSWER, VOICE_CALL_STATUS.FAILED].includes(status.value)
 );
+const isMissedInbound = computed(() => isFailed.value && !isOutbound.value);
+const endReason = computed(() => call.value?.endReason);
+const wasDeclinedByAgent = computed(
+  () => isMissedInbound.value && endReason.value === 'agent_rejected'
+);
 const acceptedByAgentId = computed(() => call.value?.acceptedByAgentId);
 const didCurrentUserAnswer = computed(
   () =>
     !!acceptedByAgentId.value && acceptedByAgentId.value === currentUserId.value
 );
-// Pickup auto-assigns the conversation, so the assignee is a safe display proxy
-// for the answerer when the Call payload lacks accepted_by_agent_id (e.g.,
-// Twilio's call-status webhook flipped the call to in-progress before the
-// participant-join webhook claimed it).
 const conversationAssignee = computed(() => {
   const conversation = store.getters.getConversationById?.(
     conversationId?.value
@@ -66,6 +84,19 @@ const displayAgentName = computed(() => {
   return conversationAssignee.value?.name || null;
 });
 
+const audioAttachment = computed(() =>
+  (attachments?.value || []).find(a => a.fileType === 'audio')
+);
+
+const durationSeconds = computed(() => {
+  const fromCall = call.value?.durationSeconds || call.value?.duration_seconds;
+  if (fromCall != null) return fromCall;
+  const data = contentAttributes?.value?.data;
+  return data?.durationSeconds || data?.duration_seconds;
+});
+
+const formattedDuration = computed(() => formatDuration(durationSeconds.value));
+
 const labelKey = computed(() => {
   if (LABEL_MAP[status.value]) return LABEL_MAP[status.value];
   if (status.value === VOICE_CALL_STATUS.RINGING) {
@@ -73,24 +104,25 @@ const labelKey = computed(() => {
       ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
       : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
   }
-  return isFailed.value
-    ? 'CONVERSATION.VOICE_CALL.MISSED_CALL'
-    : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
+  if (isFailed.value) {
+    return isOutbound.value
+      ? 'CONVERSATION.VOICE_CALL.NO_ANSWER_OUTBOUND_LABEL'
+      : 'CONVERSATION.VOICE_CALL.MISSED_CALL';
+  }
+  return 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
 });
 
-const formattedDuration = computed(() =>
-  formatDuration(call.value?.durationSeconds)
-);
-
 const subtext = computed(() => {
   if (status.value === VOICE_CALL_STATUS.RINGING) {
-    return t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
+    return isOutbound.value
+      ? t('CONVERSATION.VOICE_CALL.CALLING')
+      : t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
   }
   if (status.value === VOICE_CALL_STATUS.COMPLETED) {
     return formattedDuration.value;
   }
   if (status.value === VOICE_CALL_STATUS.IN_PROGRESS) {
-    if (isOutbound.value) return t('CONVERSATION.VOICE_CALL.THEY_ANSWERED');
+    if (isOutbound.value) return null;
     if (didCurrentUserAnswer.value) {
       return t('CONVERSATION.VOICE_CALL.YOU_ANSWERED');
     }
@@ -99,34 +131,51 @@ const subtext = computed(() => {
         agentName: displayAgentName.value,
       });
     }
-    return t('CONVERSATION.VOICE_CALL.THEY_ANSWERED');
+    return null;
   }
-  return isFailed.value
-    ? t('CONVERSATION.VOICE_CALL.NO_ANSWER')
-    : t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
+  if (isFailed.value) {
+    if (isOutbound.value) {
+      return t('CONVERSATION.VOICE_CALL.NO_ANSWER_OUTBOUND_SUBTEXT');
+    }
+    if (wasDeclinedByAgent.value && displayAgentName.value) {
+      return t('CONVERSATION.VOICE_CALL.MISSED_CALL_DECLINED_BY', {
+        agentName: displayAgentName.value,
+      });
+    }
+    return t('CONVERSATION.VOICE_CALL.MISSED_CALL_INBOUND_SUBTEXT');
+  }
+  return t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
 });
 
 const iconName = computed(() => {
   if (ICON_MAP[status.value]) return ICON_MAP[status.value];
-  return isOutbound.value ? 'i-ph-phone-outgoing' : 'i-ph-phone-incoming';
+  return isOutbound.value
+    ? 'i-ph-phone-outgoing-bold'
+    : 'i-ph-phone-incoming-bold';
 });
 
-const bgColor = computed(() => BG_COLOR_MAP[status.value] || 'bg-n-teal-9');
+// Subtle icon container — matches the design's tonal swatch over the bubble bg.
+// Status drives the accent: teal for live, ruby for missed, neutral otherwise.
+const iconContainerClass = computed(() => {
+  if (status.value === VOICE_CALL_STATUS.IN_PROGRESS) {
+    return 'bg-n-teal-3 text-n-teal-11';
+  }
+  if (status.value === VOICE_CALL_STATUS.RINGING) {
+    return 'bg-n-teal-3 text-n-teal-11';
+  }
+  if (isMissedInbound.value) {
+    return 'bg-n-alpha-2 text-n-ruby-9';
+  }
+  return 'bg-n-alpha-2 text-n-slate-12';
+});
 
 const callSid = computed(() => call.value?.providerCallId);
 
-// Show "Join call" when the call is still ringing, no agent has claimed it,
-// and the conversation is unassigned or assigned to the current user. Mirrors
-// the eligibility used by FloatingCallWidget so the bubble can act as a
-// recovery affordance after a refresh or missed widget.
 const canJoinCall = computed(() => {
   if (status.value !== VOICE_CALL_STATUS.RINGING) return false;
   if (isOutbound.value) return false;
   if (acceptedByAgentId.value) return false;
   if (!callSid.value || !inboxId.value || !conversationId.value) return false;
-  // Suppress the button once this call is the local active session — the
-  // message status webhook may lag behind, so we can't rely on `status` alone
-  // to hide it after a successful join from this client.
   if (hasActiveCall.value && activeCall.value?.callSid === callSid.value)
     return false;
   const assignee = conversationAssignee.value;
@@ -135,6 +184,7 @@ const canJoinCall = computed(() => {
 });
 
 const recordingAttachment = computed(() => {
+  if (audioAttachment.value) return audioAttachment.value;
   const url = call.value?.recordingUrl;
   if (!url) return null;
   return {
@@ -162,48 +212,102 @@ const handleJoinCall = async () => {
     callSid: callSid.value,
   });
 };
+
+const canCallBack = computed(
+  () => isMissedInbound.value && !!inboxId.value && !!conversationId.value
+);
+
+const handleCallBack = async () => {
+  if (!canCallBack.value) return;
+  try {
+    if (isWhatsapp.value) {
+      const response = await whatsappCallSession.initiateOutboundCall(
+        conversationId.value
+      );
+      if (response?.status === 'locked') return;
+      if (response?.call_id) {
+        const callsStore = useCallsStore();
+        callsStore.addCall({
+          callSid: response.call_id,
+          callId: response.id,
+          conversationId: conversationId.value,
+          inboxId: inboxId.value,
+          callDirection: 'outbound',
+          provider: 'whatsapp',
+        });
+      }
+      return;
+    }
+    await store.dispatch('contacts/initiateCall', {
+      contactId: sender.value?.id,
+      inboxId: inboxId.value,
+      conversationId: conversationId.value,
+    });
+  } catch (error) {
+    useAlert(error?.message || t('CONTACT_PANEL.CALL_FAILED'));
+  }
+};
 </script>
 
 <template>
-  <BaseBubble class="p-0 border-none" hide-meta>
-    <div class="flex overflow-hidden flex-col w-full max-w-sm">
-      <div class="flex gap-3 items-center p-3 w-full">
+  <BaseBubble class="!p-3 !max-w-md min-w-[240px]" hide-meta>
+    <div class="flex flex-col gap-3 w-full">
+      <!-- Header row: icon + title + duration/subtext -->
+      <div class="flex gap-2.5 items-start">
         <div
-          class="flex justify-center items-center rounded-full size-10 shrink-0"
-          :class="bgColor"
+          class="flex justify-center items-center rounded-xl size-11 shrink-0"
+          :class="iconContainerClass"
         >
-          <Icon
-            class="size-5"
-            :icon="iconName"
-            :class="{
-              'text-n-slate-1': status === VOICE_CALL_STATUS.COMPLETED,
-              'text-white': status !== VOICE_CALL_STATUS.COMPLETED,
-            }"
-          />
+          <Icon class="size-4" :icon="iconName" />
         </div>
-
-        <div class="flex overflow-hidden flex-col flex-grow">
-          <span class="text-sm font-medium truncate text-n-slate-12">
+        <div class="flex flex-col flex-1 min-w-0 self-center">
+          <span
+            class="font-display text-sm font-medium leading-tight truncate tracking-tight"
+          >
             {{ $t(labelKey) }}
           </span>
-          <span v-if="subtext" class="text-xs text-n-slate-11">
+          <span
+            v-if="subtext"
+            class="text-sm leading-tight truncate tracking-tight opacity-75"
+          >
             {{ subtext }}
           </span>
-          <button
-            v-if="canJoinCall"
-            type="button"
-            class="p-0 mt-1 text-xs font-medium text-start text-n-teal-10 hover:text-n-teal-11 disabled:opacity-50"
-            :disabled="isJoining"
-            @click="handleJoinCall"
-          >
-            {{ $t('CONVERSATION.VOICE_CALL.JOIN_CALL') }}
-          </button>
         </div>
       </div>
 
-      <div v-if="recordingAttachment" class="px-3 pb-3">
-        <AudioChip :attachment="recordingAttachment" />
-      </div>
+      <!-- Audio player (when there's a recording) -->
+      <AudioChip
+        v-if="recordingAttachment"
+        :attachment="recordingAttachment"
+        show-transcribed-text
+      />
+
+      <!-- Call back button (missed inbound) -->
+      <button
+        v-if="canCallBack"
+        type="button"
+        class="flex justify-center items-center gap-2 px-3 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
+        @click="handleCallBack"
+      >
+        <i class="text-base text-white i-ph-phone-bold" />
+        <span class="text-sm font-medium text-white tracking-tight">
+          {{ $t('CONVERSATION.VOICE_CALL.CALL_BACK') }}
+        </span>
+      </button>
+
+      <!-- Join call button (ringing inbound) -->
+      <button
+        v-if="canJoinCall"
+        type="button"
+        class="flex justify-center items-center gap-2 px-3 h-10 bg-n-teal-9 hover:bg-n-teal-10 disabled:opacity-50 rounded-full transition-colors"
+        :disabled="isJoining"
+        @click="handleJoinCall"
+      >
+        <i class="text-base text-white i-ph-phone-bold" />
+        <span class="text-sm font-medium text-white tracking-tight">
+          {{ $t('CONVERSATION.VOICE_CALL.JOIN_CALL') }}
+        </span>
+      </button>
     </div>
   </BaseBubble>
 </template>

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

@@ -41,8 +41,33 @@ const playbackSpeed = ref(1);
 
 const { uid } = getCurrentInstance();
 
+// MediaRecorder-produced WebM/Opus blobs lack a Duration header → <audio>.duration
+// resolves to Infinity until we seek past the end, which forces the engine to
+// scan the file and compute the real length. Safe no-op for files with a real
+// duration already (mp3/m4a/etc).
+const resolveStreamingDuration = () => {
+  const el = audioPlayer.value;
+  if (!el) return;
+  const onTimeUpdate = () => {
+    el.removeEventListener('timeupdate', onTimeUpdate);
+    el.currentTime = 0;
+    duration.value = el.duration;
+  };
+  el.addEventListener('timeupdate', onTimeUpdate);
+  try {
+    el.currentTime = Number.MAX_SAFE_INTEGER;
+  } catch {
+    el.removeEventListener('timeupdate', onTimeUpdate);
+  }
+};
+
 const onLoadedMetadata = () => {
-  duration.value = audioPlayer.value?.duration;
+  const d = audioPlayer.value?.duration;
+  if (!Number.isFinite(d)) {
+    resolveStreamingDuration();
+    return;
+  }
+  duration.value = d;
 };
 
 const playbackSpeedLabel = computed(() => {
@@ -53,7 +78,8 @@ const playbackSpeedLabel = computed(() => {
 // 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 d = audioPlayer.value?.duration;
+  if (Number.isFinite(d)) duration.value = d;
   audioPlayer.value.playbackRate = playbackSpeed.value;
 });
 

app/javascript/dashboard/components-next/radioCard/RadioCard.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
 import Label from 'dashboard/components-next/label/Label.vue';
 
 const props = defineProps({
@@ -30,10 +31,16 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  beta: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['select']);
 
+const { t } = useI18n();
+
 const handleChange = () => {
   if (!props.isActive && !props.disabled) {
     emit('select', props.id);
@@ -42,14 +49,14 @@ const handleChange = () => {
 </script>
 
 <template>
-  <div
-    class="cursor-pointer rounded-xl outline outline-1 p-4 transition-all duration-200 bg-n-solid-1 py-4 ltr:pl-4 rtl:pr-4 ltr:pr-6 rtl:pl-6"
+  <label
+    :for="id"
+    class="rounded-xl outline outline-1 p-4 transition-all duration-200 bg-n-solid-1 py-4 ltr:pl-4 rtl:pr-4 ltr:pr-6 rtl:pl-6 focus-within:has-[:focus-visible]:ring-2 focus-within:has-[:focus-visible]:ring-n-strong"
     :class="[
       disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
       isActive ? 'outline-n-blue-9' : 'outline-n-weak',
       !disabled && !isActive ? 'hover:outline-n-strong' : '',
     ]"
-    @click="handleChange"
   >
     <div class="flex flex-col gap-2 items-start">
       <div class="flex items-center justify-between w-full gap-3">
@@ -58,6 +65,7 @@ const handleChange = () => {
             {{ label }}
           </h3>
           <Label v-if="disabled" :label="disabledLabel" color="amber" compact />
+          <Label v-if="beta" :label="t('GENERAL.BETA')" color="blue" compact />
         </div>
         <input
           :id="`${id}`"
@@ -66,7 +74,7 @@ const handleChange = () => {
           :name="id"
           :disabled="disabled"
           type="radio"
-          class="h-4 w-4 border-n-slate-6 text-n-brand focus:ring-n-brand focus:ring-offset-0 flex-shrink-0"
+          class="shadow cursor-pointer grid place-items-center border-2 border-n-strong appearance-none rounded-full w-5 h-5 checked:bg-n-brand before:content-[''] before:bg-n-brand before:border-4 before:rounded-full before:border-n-strong checked:before:w-[18px] checked:before:h-[18px] checked:border checked:border-n-brand"
           @change="handleChange"
         />
       </div>
@@ -75,5 +83,5 @@ const handleChange = () => {
       </p>
       <slot />
     </div>
-  </div>
+  </label>
 </template>

app/javascript/dashboard/components/ChannelSelector.vue

@@ -24,6 +24,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  hasVoiceBadge: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const { t } = useI18n();
@@ -38,10 +42,18 @@ const { t } = useI18n();
       'cursor-not-allowed disabled:opacity-80': isComingSoon,
     }"
   >
-    <div
-      class="flex size-10 items-center justify-center rounded-full bg-n-alpha-2"
-    >
-      <Icon :icon="icon" class="text-n-slate-10 size-6" />
+    <div class="relative">
+      <div
+        class="flex size-10 items-center justify-center rounded-full bg-n-alpha-2"
+      >
+        <Icon :icon="icon" class="text-n-slate-10 size-6" />
+      </div>
+      <div
+        v-if="hasVoiceBadge"
+        class="absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full bg-n-alpha-2 ring-2 ring-n-solid-1"
+      >
+        <Icon icon="i-lucide-audio-lines" class="text-n-slate-10 size-2.5" />
+      </div>
     </div>
 
     <div class="flex flex-col items-start gap-1.5">

app/javascript/dashboard/components/widgets/ChannelItem.vue

@@ -56,6 +56,14 @@ const isActive = computed(() => {
     return props.enabledFeatures.channel_voice;
   }
 
+  if (key === 'whatsapp_call') {
+    return (
+      props.enabledFeatures.channel_voice &&
+      !!window.chatwootConfig?.whatsappAppId &&
+      window.chatwootConfig.whatsappAppId !== 'none'
+    );
+  }
+
   return [
     'website',
     'twilio',
@@ -78,7 +86,14 @@ const isComingSoon = computed(() => {
 });
 
 const isBeta = computed(() => {
-  return ['tiktok', 'voice'].includes(props.channel.key);
+  return ['tiktok', 'voice', 'whatsapp_call'].includes(props.channel.key);
+});
+
+const hasVoiceBadge = computed(() => {
+  return (
+    ['voice', 'whatsapp_call'].includes(props.channel.key) &&
+    !!props.enabledFeatures.channel_voice
+  );
 });
 
 const onItemClick = () => {
@@ -95,6 +110,7 @@ const onItemClick = () => {
     :icon="channel.icon"
     :is-coming-soon="isComingSoon"
     :is-beta="isBeta"
+    :has-voice-badge="hasVoiceBadge"
     :disabled="!isActive"
     @click="onItemClick"
   />

app/javascript/dashboard/components/widgets/FloatingCallWidget.vue

@@ -1,11 +1,17 @@
 <script setup>
-import { watch } from 'vue';
-import { useRouter } from 'vue-router';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import { useCallSession } from 'dashboard/composables/useCallSession';
+import { setWhatsappCallMuted } from 'dashboard/composables/useWhatsappCallSession';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import WindowVisibilityHelper from 'dashboard/helper/AudioAlerts/WindowVisibilityHelper';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import CallCard from 'dashboard/components/widgets/call/CallCard.vue';
+import countriesList from 'shared/constants/countries.js';
 
+const RINGTONE_URL = '/audio/dashboard/bell.mp3';
+
+const route = useRoute();
 const router = useRouter();
 const store = useStore();
 
@@ -21,19 +27,103 @@ const {
   formattedCallDuration,
 } = useCallSession();
 
+// Mute is currently WhatsApp-only — Twilio calls are mediated server-side and
+// don't expose a mic track on the browser side.
+const isMuted = ref(false);
+const isWhatsappActive = computed(
+  () => activeCall.value?.provider === 'whatsapp'
+);
+
+const primaryIncomingCall = computed(() =>
+  hasActiveCall.value ? null : incomingCalls.value[0] || null
+);
+
+const stackedIncomingCalls = computed(() =>
+  hasActiveCall.value ? incomingCalls.value : incomingCalls.value.slice(1)
+);
+
+const mainCardState = computed(() => {
+  if (hasActiveCall.value) return 'ongoing';
+  const direction = primaryIncomingCall.value?.callDirection;
+  return direction === 'outbound' ? 'outgoing' : 'incoming';
+});
+
+const toggleMute = () => {
+  isMuted.value = !isMuted.value;
+  setWhatsappCallMuted(isMuted.value);
+};
+
+watch(hasActiveCall, active => {
+  if (!active) isMuted.value = false;
+});
+
+// Convert ISO 3166-1 alpha-2 country code (e.g. "US") to its regional indicator
+// flag emoji. Returns empty string if the code is missing or malformed.
+const countryCodeToFlag = code => {
+  if (!code || code.length !== 2) return '';
+  const base = 0x1f1e6;
+  const offset = 'A'.charCodeAt(0);
+  return String.fromCodePoint(
+    ...code
+      .toUpperCase()
+      .split('')
+      .map(c => base + (c.charCodeAt(0) - offset))
+  );
+};
+
 const getCallInfo = call => {
   const conversation = store.getters.getConversationById(call?.conversationId);
-  const inbox = store.getters['inboxes/getInbox'](conversation?.inbox_id);
+  // Look up inbox from the call's own inboxId — the conversation can drop out
+  // of the Vuex store when the user navigates between inbox views, so going
+  // through `conversation.inbox_id` would lose the inbox name (and fall back
+  // to the literal "Customer support" string).
+  const inbox = store.getters['inboxes/getInbox'](call?.inboxId);
   const sender = conversation?.meta?.sender;
+  // `caller` is the snapshot captured when the call first landed (from the
+  // message sender or the WhatsApp cable payload). It outlives the
+  // conversation being in the store, so prefer it for display.
+  const caller = call?.caller;
+  const additional =
+    sender?.additional_attributes || caller?.additionalAttributes || {};
+  const city = additional.city || '';
+  const countryCode = additional.country_code || '';
+  const country =
+    additional.country ||
+    countriesList.find(c => c.id === countryCode.toUpperCase())?.name ||
+    '';
+  // Prefer the richest available location string ("City, Country"); fall back to
+  // whichever single field is present; finally fall back to the inbox name so
+  // there's always something to show.
+  const locationParts = [city, country].filter(Boolean);
+  const location =
+    locationParts.join(', ') || inbox?.name || 'Customer support';
   return {
     conversation,
     inbox,
-    contactName: sender?.name || sender?.phone_number || 'Unknown caller',
+    contactName:
+      caller?.name ||
+      sender?.name ||
+      caller?.phone ||
+      sender?.phone_number ||
+      'Unknown caller',
+    phoneNumber: caller?.phone || sender?.phone_number || '',
     inboxName: inbox?.name || 'Customer support',
-    avatar: sender?.avatar || sender?.thumbnail,
+    location,
+    countryFlag: countryCodeToFlag(countryCode),
+    hasLocation: locationParts.length > 0,
+    avatar: caller?.avatar || sender?.avatar || sender?.thumbnail,
   };
 };
 
+const goToConversation = call => {
+  const conversationId = call?.conversationId;
+  const accountId = route.params.accountId;
+  if (!conversationId || !accountId) return;
+  router.push({
+    path: frontendURL(conversationUrl({ accountId, id: conversationId })),
+  });
+};
+
 const handleEndCall = async () => {
   const call = activeCall.value;
   if (!call) return;
@@ -49,21 +139,22 @@ const handleEndCall = async () => {
 };
 
 const handleJoinCall = async call => {
+  if (!call || isJoining.value) return;
   const { conversation } = getCallInfo(call);
-  if (!call || !conversation || isJoining.value) return;
 
-  // End current active call before joining new one
   if (hasActiveCall.value) {
     await handleEndCall();
   }
 
+  // The conversation may not be hydrated yet (post-refresh seeding path);
+  // call.inboxId already carries what joinCall needs.
   const result = await joinCall({
     conversationId: call.conversationId,
-    inboxId: conversation.inbox_id,
+    inboxId: call.inboxId || conversation?.inbox_id,
     callSid: call.callSid,
   });
 
-  if (result) {
+  if (result && conversation) {
     router.push({
       name: 'inbox_conversation',
       params: { conversation_id: call.conversationId },
@@ -71,12 +162,15 @@ const handleJoinCall = async call => {
   }
 };
 
-// Auto-join outbound calls when window is visible
+// Auto-join outbound calls when window is visible. WhatsApp outbound has no
+// separate join step (the offer was sent at initiate time and the answer is
+// applied directly by the cable handler), so this only covers Twilio.
 watch(
   () => incomingCalls.value[0],
   call => {
     if (
       call?.callDirection === 'outbound' &&
+      call?.provider !== 'whatsapp' &&
       !hasActiveCall.value &&
       WindowVisibilityHelper.isWindowVisible()
     ) {
@@ -85,101 +179,73 @@ watch(
   },
   { immediate: true }
 );
+
+// Loop the ringtone while an inbound call is unanswered. Stop the moment any
+// call is active (we joined), every inbound call cleared, or the widget tears
+// down. The watcher only fires on the boolean transitioning, so additional
+// ringing calls arriving while one is already ringing don't restart the audio
+// — they silently stack into the UI without producing a fresh ring.
+// Browser autoplay may reject the first play() if the tab has no prior
+// user gesture; that's fine — the visual widget still surfaces the call.
+const ringtone = new Audio(RINGTONE_URL);
+ringtone.loop = true;
+ringtone.volume = 1;
+
+const stopRingtone = () => {
+  ringtone.pause();
+  ringtone.currentTime = 0;
+};
+
+const ringingInbound = computed(() =>
+  incomingCalls.value.some(call => call.callDirection !== 'outbound')
+);
+
+watch(
+  () => ringingInbound.value && !hasActiveCall.value,
+  shouldRing => {
+    if (shouldRing) {
+      ringtone.play().catch(() => {});
+    } else {
+      stopRingtone();
+    }
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(stopRingtone);
 </script>
 
 <template>
   <div
     v-if="incomingCalls.length || hasActiveCall"
-    class="fixed ltr:right-4 rtl:left-4 bottom-4 z-50 flex flex-col gap-2 w-72"
+    class="fixed ltr:right-4 rtl:left-4 bottom-4 z-50 flex flex-col gap-3 w-[400px]"
   >
-    <!-- Incoming Calls (shown above active call) -->
-    <div
-      v-for="call in hasActiveCall ? incomingCalls : []"
+    <!-- Stacked incoming calls (shown above the primary card) -->
+    <CallCard
+      v-for="call in stackedIncomingCalls"
       :key="call.callSid"
-      class="flex items-center gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
-    >
-      <div class="animate-pulse ring-2 ring-n-teal-9 rounded-full inline-flex">
-        <Avatar
-          :src="getCallInfo(call).avatar"
-          :name="getCallInfo(call).contactName"
-          :size="40"
-          rounded-full
-        />
-      </div>
-      <div class="flex-1 min-w-0">
-        <p class="text-sm font-medium text-n-slate-12 truncate mb-0">
-          {{ getCallInfo(call).contactName }}
-        </p>
-        <p class="text-xs text-n-slate-11 truncate">
-          {{ getCallInfo(call).inboxName }}
-        </p>
-      </div>
-      <div class="flex shrink-0 gap-2">
-        <button
-          class="flex justify-center items-center w-10 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors"
-          @click="dismissCall(call.callSid)"
-        >
-          <i class="text-lg text-white i-ph-phone-x-bold" />
-        </button>
-        <button
-          class="flex justify-center items-center w-10 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
-          @click="handleJoinCall(call)"
-        >
-          <i class="text-lg text-white i-ph-phone-bold" />
-        </button>
-      </div>
-    </div>
+      :call="call"
+      state="incoming"
+      :call-info="getCallInfo(call)"
+      @accept="handleJoinCall(call)"
+      @reject="dismissCall(call.callSid)"
+      @go-to-conversation="goToConversation(call)"
+    />
 
     <!-- Main Call Widget -->
-    <div
-      v-if="hasActiveCall || incomingCalls.length"
-      class="flex items-center gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
-    >
-      <div
-        class="ring-2 ring-n-teal-9 rounded-full inline-flex"
-        :class="{ 'animate-pulse': !hasActiveCall }"
-      >
-        <Avatar
-          :src="getCallInfo(activeCall || incomingCalls[0]).avatar"
-          :name="getCallInfo(activeCall || incomingCalls[0]).contactName"
-          :size="40"
-          rounded-full
-        />
-      </div>
-      <div class="flex-1 min-w-0">
-        <p class="text-sm font-medium text-n-slate-12 truncate mb-0">
-          {{ getCallInfo(activeCall || incomingCalls[0]).contactName }}
-        </p>
-        <p v-if="hasActiveCall" class="font-mono text-sm text-n-teal-9">
-          {{ formattedCallDuration }}
-        </p>
-        <p v-else class="text-xs text-n-slate-11">
-          {{
-            incomingCalls[0]?.callDirection === 'outbound'
-              ? $t('CONVERSATION.VOICE_WIDGET.OUTGOING_CALL')
-              : $t('CONVERSATION.VOICE_WIDGET.INCOMING_CALL')
-          }}
-        </p>
-      </div>
-      <div class="flex shrink-0 gap-2">
-        <button
-          class="flex justify-center items-center w-10 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors"
-          @click="
-            hasActiveCall
-              ? handleEndCall()
-              : rejectIncomingCall(incomingCalls[0]?.callSid)
-          "
-        >
-          <i class="text-lg text-white i-ph-phone-x-bold" />
-        </button>
-        <button
-          v-if="!hasActiveCall"
-          class="flex justify-center items-center w-10 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
-          @click="handleJoinCall(incomingCalls[0])"
-        >
-          <i class="text-lg text-white i-ph-phone-bold" />
-        </button>
-      </div>
-    </div>
+    <CallCard
+      v-if="hasActiveCall || primaryIncomingCall"
+      :call="activeCall || primaryIncomingCall"
+      :state="mainCardState"
+      :call-info="getCallInfo(activeCall || primaryIncomingCall)"
+      :duration="hasActiveCall ? formattedCallDuration : ''"
+      :is-muted="isMuted"
+      :show-mute="hasActiveCall && isWhatsappActive"
+      @accept="handleJoinCall(primaryIncomingCall)"
+      @reject="rejectIncomingCall(primaryIncomingCall?.callSid)"
+      @end="handleEndCall"
+      @toggle-mute="toggleMute"
+      @go-to-conversation="goToConversation(activeCall || primaryIncomingCall)"
+    />
   </div>
 </template>

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -803,6 +803,11 @@ watch(
   }
 );
 
+watch(
+  computed(() => props.disabled),
+  () => editorView?.setProps({})
+);
+
 watch(
   computed(() => props.updateSelectionWith),
   (newValue, oldValue) => {

app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue

@@ -7,6 +7,7 @@ import {
   ArticleMarkdownTransformer,
   EditorState,
   Selection,
+  imageResizeView,
 } from '@chatwoot/prosemirror-schema';
 import {
   suggestionsPlugin,
@@ -235,6 +236,7 @@ export default {
           const tr = editorView.state.tr.replaceSelectionWith(tableNode);
           editorView.dispatch(tr.scrollIntoView());
         },
+        imageUpload: () => this.openFileBrowser(),
       };
 
       const command = commandMap[actionKey];
@@ -332,6 +334,9 @@ export default {
     createEditorView() {
       editorView = new EditorView(this.$refs.editor, {
         state: state,
+        nodeViews: {
+          image: imageResizeView,
+        },
         dispatchTransaction: tx => {
           state = state.apply(tx);
           editorView.updateState(state);

app/javascript/dashboard/components/widgets/WootWriter/SlashCommandMenu.vue

@@ -60,6 +60,12 @@ const EDITOR_ACTIONS = [
     icon: 'i-lucide-table',
     menuKey: 'insertTable',
   },
+  {
+    value: 'imageUpload',
+    labelKey: 'SLASH_COMMANDS.IMAGE',
+    icon: 'i-lucide-image',
+    menuKey: 'imageUpload',
+  },
   {
     value: 'strike',
     labelKey: 'SLASH_COMMANDS.STRIKETHROUGH',

app/javascript/dashboard/components/widgets/call/CallCard.vue

@@ -0,0 +1,208 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+
+const props = defineProps({
+  call: {
+    type: Object,
+    required: true,
+  },
+  callInfo: {
+    type: Object,
+    required: true,
+  },
+  // 'incoming' | 'outgoing' | 'ongoing'
+  state: {
+    type: String,
+    required: true,
+  },
+  duration: {
+    type: String,
+    default: '',
+  },
+  isMuted: {
+    type: Boolean,
+    default: false,
+  },
+  showMute: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+defineEmits(['accept', 'reject', 'end', 'toggleMute', 'goToConversation']);
+
+const { t } = useI18n();
+
+const isOngoing = computed(() => props.state === 'ongoing');
+const isIncoming = computed(() => props.state === 'incoming');
+const isOutgoing = computed(() => props.state === 'outgoing');
+
+const statusIcon = computed(() => {
+  if (isOngoing.value) return 'i-ph-phone-call-bold';
+  if (isOutgoing.value) return 'i-ph-phone-outgoing-bold';
+  return 'i-ph-phone-incoming-bold';
+});
+
+const statusLabel = computed(() => {
+  if (isOngoing.value) return t('CONVERSATION.VOICE_WIDGET.CALL_IN_PROGRESS');
+  if (isOutgoing.value) return t('CONVERSATION.VOICE_WIDGET.OUTGOING_CALL');
+  return t('CONVERSATION.VOICE_WIDGET.INCOMING_CALL');
+});
+
+const channelIcon = computed(() => {
+  if (props.call?.provider === 'whatsapp') return 'i-ri-whatsapp-fill';
+  return 'i-ph-phone-bold';
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-3 pt-4 pb-4 bg-n-solid-2/95 rounded-2xl shadow-xl outline outline-1 outline-n-strong backdrop-blur-md"
+  >
+    <!-- Top section: status badge + location/inbox + duration -->
+    <div class="flex flex-col gap-3 pb-2">
+      <div class="flex items-center gap-2 px-4">
+        <!-- Ongoing: status badge on left -->
+        <div v-if="isOngoing" class="flex items-center gap-1.5 shrink-0">
+          <i class="text-sm text-n-teal-9" :class="statusIcon" />
+          <span class="text-xs font-medium text-n-teal-9 tracking-tight">
+            {{ statusLabel }}
+          </span>
+        </div>
+
+        <!-- Caller location (city, country) or fallback to channel + inbox name -->
+        <div class="flex items-center gap-1.5 min-w-0 flex-1">
+          <span
+            v-if="callInfo.hasLocation && callInfo.countryFlag"
+            class="text-sm leading-none shrink-0"
+          >
+            {{ callInfo.countryFlag }}
+          </span>
+          <i
+            v-else-if="!isOngoing"
+            class="text-sm text-n-slate-10 shrink-0"
+            :class="channelIcon"
+          />
+          <span
+            class="text-xs font-medium text-n-slate-11 tracking-tight truncate"
+          >
+            {{ callInfo.location }}
+          </span>
+        </div>
+
+        <!-- Ongoing: duration on right -->
+        <p
+          v-if="isOngoing"
+          class="font-display text-base font-medium text-n-slate-11 shrink-0 mb-0 tabular-nums tracking-tight"
+        >
+          {{ duration }}
+        </p>
+        <!-- Incoming/Outgoing: status badge on right -->
+        <div v-else class="flex items-center gap-1.5 shrink-0">
+          <i class="text-sm text-n-teal-9" :class="statusIcon" />
+          <span class="text-xs font-medium text-n-teal-9 tracking-tight">
+            {{ statusLabel }}
+          </span>
+        </div>
+      </div>
+
+      <!-- Main row: avatar + name/phone + actions -->
+      <div class="flex items-end gap-3 px-4">
+        <div class="shrink-0">
+          <Avatar
+            :src="callInfo.avatar"
+            :name="callInfo.contactName"
+            :size="44"
+          />
+        </div>
+        <div class="flex-1 min-w-0">
+          <p
+            class="font-display text-sm font-medium text-n-slate-12 truncate mb-0.5 tracking-tight leading-tight"
+          >
+            {{ callInfo.contactName }}
+          </p>
+          <p
+            v-if="callInfo.phoneNumber"
+            class="text-sm text-n-slate-11 truncate mb-0 tracking-tight leading-tight"
+          >
+            {{ callInfo.phoneNumber }}
+          </p>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex items-center gap-2 shrink-0">
+          <!-- Mute toggle (WhatsApp ongoing only) -->
+          <button
+            v-if="isOngoing && showMute"
+            v-tooltip.top="
+              isMuted
+                ? $t('CONVERSATION.VOICE_WIDGET.UNMUTE')
+                : $t('CONVERSATION.VOICE_WIDGET.MUTE')
+            "
+            class="flex justify-center items-center w-10 h-10 rounded-full transition-colors"
+            :class="
+              isMuted
+                ? 'bg-n-amber-9 hover:bg-n-amber-10 text-white'
+                : 'bg-n-teal-3 hover:bg-n-teal-4 text-n-teal-11'
+            "
+            @click="$emit('toggleMute')"
+          >
+            <i
+              class="text-base"
+              :class="
+                isMuted ? 'i-ph-microphone-slash-bold' : 'i-ph-microphone-bold'
+              "
+            />
+          </button>
+
+          <!-- Accept call (incoming only) -->
+          <button
+            v-if="isIncoming"
+            v-tooltip.top="$t('CONVERSATION.VOICE_WIDGET.JOIN_CALL')"
+            class="flex justify-center items-center w-10 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors shadow-sm"
+            @click="$emit('accept')"
+          >
+            <i class="text-base text-white i-ph-phone-bold" />
+          </button>
+
+          <!-- Reject / end call (all states) -->
+          <button
+            v-tooltip.top="
+              isOngoing
+                ? $t('CONVERSATION.VOICE_WIDGET.END_CALL')
+                : $t('CONVERSATION.VOICE_WIDGET.REJECT_CALL')
+            "
+            class="flex justify-center items-center w-10 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors shadow-sm"
+            @click="isOngoing ? $emit('end') : $emit('reject')"
+          >
+            <i class="text-base text-white i-ph-phone-x-bold rotate-[134deg]" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer: go to conversation thread -->
+    <button
+      v-if="call?.conversationId"
+      class="flex items-center justify-between gap-2 px-4 pt-3 border-t border-n-strong hover:bg-n-alpha-1 transition-colors group"
+      @click="$emit('goToConversation')"
+    >
+      <span
+        class="text-sm text-n-slate-11 tracking-tight group-hover:text-n-slate-12"
+      >
+        {{ $t('CONVERSATION.VOICE_WIDGET.GO_TO_CONVERSATION') }}
+      </span>
+      <span
+        class="flex items-center gap-1 text-n-slate-11 group-hover:text-n-slate-12"
+      >
+        <i class="text-sm i-ph-chat-circle-text-bold" />
+        <span class="text-sm tracking-tight tabular-nums">
+          #{{ call.conversationId }}
+        </span>
+        <i class="text-xs i-ph-caret-right-bold" />
+      </span>
+    </button>
+  </div>
+</template>

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router';
 import { useStore } from 'vuex';
 import { useElementSize } from '@vueuse/core';
 import BackButton from '../BackButton.vue';
+import ButtonV4 from 'dashboard/components-next/button/Button.vue';
 import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
 import Avatar from 'next/avatar/Avatar.vue';
@@ -12,9 +13,16 @@ import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
 import { useInbox } from 'dashboard/composables/useInbox';
+import {
+  getVoiceCallProvider,
+  VOICE_CALL_PROVIDERS,
+} from 'dashboard/helper/inbox';
+import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSession';
+import { useCallsStore } from 'dashboard/stores/calls';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import { useAlert } from 'dashboard/composables';
 
 const props = defineProps({
   chat: {
@@ -94,6 +102,97 @@ const hasMultipleInboxes = computed(
 
 const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
 
+const callsStore = useCallsStore();
+const whatsappCallSession = useWhatsappCallSession();
+const contactsUiFlags = useMapGetter('contacts/getUIFlags');
+
+const voiceCallProvider = computed(() => getVoiceCallProvider(inbox.value));
+const isVoiceCallInbox = computed(() => voiceCallProvider.value !== null);
+const isWhatsappVoiceInbox = computed(
+  () => voiceCallProvider.value === VOICE_CALL_PROVIDERS.WHATSAPP
+);
+
+const isCallButtonDisabled = computed(() => {
+  if (callsStore.hasActiveCall || callsStore.hasIncomingCall) return true;
+  if (isWhatsappVoiceInbox.value) {
+    return whatsappCallSession.isInitiating.value;
+  }
+  return contactsUiFlags.value?.isInitiatingCall || false;
+});
+
+const isCallButtonLoading = computed(() =>
+  isWhatsappVoiceInbox.value
+    ? whatsappCallSession.isInitiating.value
+    : !!contactsUiFlags.value?.isInitiatingCall
+);
+
+const callButtonTooltip = computed(() =>
+  isWhatsappVoiceInbox.value
+    ? t('CONVERSATION.HEADER.WHATSAPP_CALL')
+    : t('CONVERSATION.HEADER.VOICE_CALL')
+);
+
+const startWhatsappCall = async () => {
+  if (whatsappCallSession.isInitiating.value) return;
+  try {
+    const response = await whatsappCallSession.initiateOutboundCall(
+      currentChat.value.id
+    );
+
+    // Composable returns { status: 'locked' } when init is already in flight or
+    // a call is active; soft no-op so a parallel click doesn't trigger a banner.
+    if (response?.status === 'locked') return;
+    // Permission template path returns no call id — show banner, no widget yet.
+    if (!response?.id) {
+      const status = response?.status;
+      const messageKey =
+        status === 'permission_pending'
+          ? 'CONVERSATION.HEADER.WHATSAPP_CALL_PERMISSION_PENDING'
+          : 'CONVERSATION.HEADER.WHATSAPP_CALL_PERMISSION_REQUESTED';
+      useAlert(t(messageKey));
+      return;
+    }
+
+    // Stay non-active until Meta delivers the connect webhook (sdp_answer);
+    // flipping to active here would start the duration timer before pickup.
+    callsStore.addCall({
+      callSid: response.call_id,
+      callId: response.id,
+      conversationId: currentChat.value.id,
+      inboxId: inbox.value?.id,
+      callDirection: 'outbound',
+      provider: 'whatsapp',
+    });
+  } catch (error) {
+    useAlert(error?.message || t('CONVERSATION.HEADER.WHATSAPP_CALL_FAILED'));
+  }
+};
+
+const startTwilioCall = async () => {
+  if (contactsUiFlags.value?.isInitiatingCall) return;
+  try {
+    const response = await store.dispatch('contacts/initiateCall', {
+      contactId: currentContact.value.id,
+      inboxId: inbox.value?.id,
+      conversationId: currentChat.value.id,
+    });
+
+    callsStore.addCall({
+      callSid: response?.call_sid,
+      conversationId: response?.conversation_id ?? currentChat.value.id,
+      inboxId: inbox.value?.id,
+      callDirection: 'outbound',
+    });
+  } catch (error) {
+    useAlert(error?.message || t('CONVERSATION.HEADER.VOICE_CALL_FAILED'));
+  }
+};
+
+const startCall = () => {
+  if (isWhatsappVoiceInbox.value) return startWhatsappCall();
+  return startTwilioCall();
+};
+
 const copyConversationId = async () => {
   try {
     await copyTextToClipboard(String(props.chat.id));
@@ -172,6 +271,18 @@ const copyConversationId = async () => {
         :parent-width="width"
         class="hidden md:flex"
       />
+      <ButtonV4
+        v-if="isVoiceCallInbox"
+        v-tooltip.bottom="callButtonTooltip"
+        size="sm"
+        variant="ghost"
+        color="slate"
+        icon="i-lucide-phone"
+        :is-loading="isCallButtonLoading"
+        :disabled="isCallButtonDisabled"
+        class="rounded-md hover:bg-n-alpha-2"
+        @click="startCall"
+      />
       <MoreActions :conversation-id="currentChat.id" />
     </div>
   </div>

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -5,7 +5,6 @@ import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useTrack } from 'dashboard/composables';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 import ReplyToMessage from './ReplyToMessage.vue';
 import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview.vue';
@@ -144,8 +143,6 @@ export default {
       currentUser: 'getCurrentUser',
       lastEmail: 'getLastEmailInSelectedChat',
       globalConfig: 'globalConfig/get',
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     currentContact() {
       const senderId = this.currentChat?.meta?.sender?.id;
@@ -384,14 +381,8 @@ export default {
       const { slug = '' } = portal;
       return slug;
     },
-    isQuotedEmailReplyEnabled() {
-      return this.isFeatureEnabledonAccount(
-        this.accountId,
-        FEATURE_FLAGS.QUOTED_EMAIL_REPLY
-      );
-    },
     quotedReplyPreference() {
-      if (!this.isAnEmailChannel || !this.isQuotedEmailReplyEnabled) {
+      if (!this.isAnEmailChannel) {
         return false;
       }
 
@@ -416,11 +407,7 @@ export default {
       return truncatePreviewText(this.quotedEmailText, 80);
     },
     shouldShowQuotedReplyToggle() {
-      return (
-        this.isAnEmailChannel &&
-        !this.isOnPrivateNote &&
-        this.isQuotedEmailReplyEnabled
-      );
+      return this.isAnEmailChannel && !this.isOnPrivateNote;
     },
     shouldShowQuotedPreview() {
       return (
@@ -577,7 +564,6 @@ export default {
     },
     shouldIncludeQuotedEmail() {
       return (
-        this.isQuotedEmailReplyEnabled &&
         this.quotedReplyPreference &&
         this.shouldShowQuotedReplyToggle &&
         !!this.quotedEmailText

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkTeamActions.vue

@@ -1,9 +1,8 @@
 <script setup>
-import { useTemplateRef, computed, ref, onMounted } from 'vue';
+import { useTemplateRef, computed, ref } from 'vue';
 import { useI18n, I18nT } from 'vue-i18n';
 import { useToggle } from '@vueuse/core';
 import { vOnClickOutside } from '@vueuse/components';
-import { useStore } from 'vuex';
 import { useMapGetter } from 'dashboard/composables/store';
 
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -19,7 +18,6 @@ const props = defineProps({
 const emit = defineEmits(['select']);
 
 const { t } = useI18n();
-const store = useStore();
 const containerRef = useTemplateRef('containerRef');
 const [showDropdown, toggleDropdown] = useToggle(false);
 const selectedTeam = ref(null);
@@ -77,10 +75,6 @@ const handleDismiss = () => {
   selectedTeam.value = null;
   toggleDropdown(false);
 };
-
-onMounted(() => {
-  store.dispatch('teams/get');
-});
 </script>
 
 <template>

app/javascript/dashboard/composables/useCallSession.js

@@ -1,62 +1,129 @@
 import { computed, ref, watch, onUnmounted, onMounted } from 'vue';
+import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import VoiceAPI from 'dashboard/api/channel/voice/voiceAPIClient';
 import TwilioVoiceClient from 'dashboard/api/channel/voice/twilioVoiceClient';
 import { useCallsStore } from 'dashboard/stores/calls';
 import { useAlert } from 'dashboard/composables';
+import {
+  useWhatsappCallSession,
+  sendWhatsappTerminateBeacon,
+  cleanupWhatsappSession,
+} from 'dashboard/composables/useWhatsappCallSession';
+import { handleVoiceCallCreated } from 'dashboard/helper/voice';
 import Timer from 'dashboard/helper/Timer';
 
-export function useCallSession() {
-  const callsStore = useCallsStore();
-  const { t } = useI18n();
-  const isJoining = ref(false);
-  const callDuration = ref(0);
-  const durationTimer = new Timer(elapsed => {
-    callDuration.value = elapsed;
+const isWhatsappCall = call => call?.provider === 'whatsapp';
+
+// Dismissed call sids must not be re-seeded by the conversation-load watcher.
+// Lives at module scope so all consumers share the same set.
+const dismissedCallSids = new Set();
+const markDismissed = callSid => {
+  if (callSid) dismissedCallSids.add(callSid);
+};
+
+// Globals attached once across all useCallSession() consumers — bubbles in a
+// long thread call this composable many times, and a per-instance Timer +
+// window listener stack would multiply work.
+let globalsAttachedCount = 0;
+let globalDurationTimer = null;
+const globalCallDuration = ref(0);
+let storedCallsStoreRef = null;
+// Shared join lock so two surfaces (bubble + widget) clicking concurrently
+// see one in-flight join, not two unrelated isJoining refs.
+const globalIsJoining = ref(false);
+
+const handleBeforeUnloadGlobal = event => {
+  const store = storedCallsStoreRef;
+  if (!store) return;
+  if (!store.hasActiveCall && !store.hasIncomingCall) return;
+  event.preventDefault();
+  event.returnValue = '';
+};
+const handlePageHideGlobal = () => sendWhatsappTerminateBeacon();
+const handleTwilioDisconnectedGlobal = () =>
+  storedCallsStoreRef?.clearActiveCall();
+
+const attachGlobalsOnFirstMount = callsStore => {
+  globalsAttachedCount += 1;
+  if (globalsAttachedCount > 1) return;
+  storedCallsStoreRef = callsStore;
+  globalDurationTimer = new Timer(elapsed => {
+    globalCallDuration.value = elapsed;
   });
-
-  const activeCall = computed(() => callsStore.activeCall);
-  const incomingCalls = computed(() => callsStore.incomingCalls);
-  const hasActiveCall = computed(() => callsStore.hasActiveCall);
-
-  watch(
-    hasActiveCall,
-    active => {
-      if (active) {
-        durationTimer.start();
-      } else {
-        durationTimer.stop();
-        callDuration.value = 0;
-      }
-    },
-    { immediate: true }
+  TwilioVoiceClient.addEventListener(
+    'call:disconnected',
+    handleTwilioDisconnectedGlobal
   );
+  window.addEventListener('beforeunload', handleBeforeUnloadGlobal);
+  window.addEventListener('pagehide', handlePageHideGlobal);
+};
 
-  onMounted(() => {
-    TwilioVoiceClient.addEventListener('call:disconnected', () =>
-      callsStore.clearActiveCall()
-    );
-  });
+const detachGlobalsOnLastUnmount = () => {
+  globalsAttachedCount -= 1;
+  if (globalsAttachedCount > 0) return;
+  globalDurationTimer?.stop();
+  globalDurationTimer = null;
+  globalCallDuration.value = 0;
+  storedCallsStoreRef = null;
+  TwilioVoiceClient.removeEventListener(
+    'call:disconnected',
+    handleTwilioDisconnectedGlobal
+  );
+  window.removeEventListener('beforeunload', handleBeforeUnloadGlobal);
+  window.removeEventListener('pagehide', handlePageHideGlobal);
+};
 
-  onUnmounted(() => {
-    durationTimer.stop();
-    TwilioVoiceClient.removeEventListener('call:disconnected', () =>
-      callsStore.clearActiveCall()
-    );
-  });
+// Build the action surface used by both the root session composable and the
+// lighter useCallActions consumer. All state is module-scoped — the actions
+// don't depend on per-instance refs, so they're cheap to call from anywhere.
+const buildCallActions = ({ callsStore, whatsappSession, t }) => {
+  const findCall = callSid => callsStore.calls.find(c => c.callSid === callSid);
 
   const endCall = async ({ conversationId, inboxId, callSid }) => {
+    const call = findCall(callSid);
+    if (isWhatsappCall(call)) {
+      // Pass call.callId so a wiped module state (e.g. a prior accept attempt
+      // tore down the WebRTC session) doesn't stop us hitting /terminate.
+      await whatsappSession.endActiveCall(call?.callId);
+      globalDurationTimer?.stop();
+      callsStore.clearActiveCall();
+      return;
+    }
+
     await VoiceAPI.leaveConference({ inboxId, conversationId, callSid });
     TwilioVoiceClient.endClientCall();
-    durationTimer.stop();
+    globalDurationTimer?.stop();
     callsStore.clearActiveCall();
   };
 
   const joinCall = async ({ conversationId, inboxId, callSid }) => {
-    if (isJoining.value) return null;
+    if (globalIsJoining.value) return null;
 
-    isJoining.value = true;
+    const call = findCall(callSid);
+    // Outbound *WhatsApp* calls have no separate join step — the offer was
+    // sent at initiate time and the answer is applied by the cable handler.
+    // Routing through acceptIncomingCall here would call prepareInboundAnswer →
+    // cleanup() and destroy the live outbound session. Outbound *Twilio*
+    // calls still need joinConference + joinClientCall (FloatingCallWidget
+    // auto-joins them), so don't short-circuit those.
+    if (call?.callDirection === 'outbound' && isWhatsappCall(call)) {
+      return null;
+    }
+
+    globalIsJoining.value = true;
     try {
+      if (isWhatsappCall(call)) {
+        await whatsappSession.acceptIncomingCall({
+          callId: call.callId,
+          sdpOffer: call.sdpOffer,
+          iceServers: call.iceServers,
+        });
+        callsStore.setCallActive(callSid);
+        globalDurationTimer?.start();
+        return { callId: call.callId };
+      }
+
       const device = await TwilioVoiceClient.initializeDevice(inboxId);
       if (!device) return null;
 
@@ -73,47 +140,160 @@ export function useCallSession() {
       });
 
       callsStore.setCallActive(callSid);
-      durationTimer.start();
+      globalDurationTimer?.start();
 
       return { conferenceSid: joinResponse?.conference_sid };
     } catch (error) {
       useAlert(error?.response?.data?.error || t('CONTACT_PANEL.CALL_FAILED'));
       if (error?.response?.status === 409) {
         TwilioVoiceClient.endClientCall();
+        markDismissed(callSid);
         callsStore.dismissCall(callSid);
       }
       // eslint-disable-next-line no-console
       console.error('Failed to join call:', error);
+      // Drop any half-built WebRTC state so the next click starts fresh.
+      cleanupWhatsappSession();
       return null;
     } finally {
-      isJoining.value = false;
+      globalIsJoining.value = false;
     }
   };
 
-  const rejectIncomingCall = callSid => {
-    TwilioVoiceClient.endClientCall();
-    callsStore.dismissCall(callSid);
+  // Await provider-side reject before dismissing the local entry; if the API
+  // call fails the call should stay surfaced so the agent can retry instead of
+  // disappearing while the backend still rings.
+  const rejectIncomingCall = async callSid => {
+    const call = findCall(callSid);
+    try {
+      if (isWhatsappCall(call) && call?.callId) {
+        if (call.callDirection === 'outbound') {
+          // Outbound calls that are still ringing must be terminated, not
+          // rejected (reject is the inbound-side verb on Meta's API).
+          await whatsappSession.endActiveCall(call.callId);
+        } else {
+          await whatsappSession.rejectIncomingCall(call.callId);
+        }
+      } else if (call?.inboxId && call?.conversationId) {
+        // Twilio incoming reject: agent hasn't joined the Device yet, so
+        // endClientCall is a no-op. End the conference server-side instead
+        // so Twilio hangs up the inbound leg.
+        await VoiceAPI.leaveConference({
+          inboxId: call.inboxId,
+          conversationId: call.conversationId,
+          callSid,
+        });
+      } else {
+        TwilioVoiceClient.endClientCall();
+      }
+    } finally {
+      markDismissed(callSid);
+      callsStore.dismissCall(callSid);
+    }
   };
 
   const dismissCall = callSid => {
+    markDismissed(callSid);
     callsStore.dismissCall(callSid);
   };
 
+  return { endCall, joinCall, rejectIncomingCall, dismissCall };
+};
+
+const buildReactiveSurface = callsStore => {
+  const activeCall = computed(() => callsStore.activeCall);
+  const incomingCalls = computed(() => callsStore.incomingCalls);
+  const hasActiveCall = computed(() => callsStore.hasActiveCall);
   const formattedCallDuration = computed(() => {
-    const minutes = Math.floor(callDuration.value / 60);
-    const seconds = callDuration.value % 60;
+    const total = globalCallDuration.value;
+    const minutes = Math.floor(total / 60);
+    const seconds = total % 60;
     return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
   });
-
   return {
     activeCall,
     incomingCalls,
     hasActiveCall,
-    isJoining,
+    isJoining: globalIsJoining,
     formattedCallDuration,
-    joinCall,
-    endCall,
-    rejectIncomingCall,
-    dismissCall,
   };
+};
+
+// Root-mount composable. Call once at the dashboard root (FloatingCallWidget
+// is the natural anchor — always mounted, lifetime spans the whole session).
+// This is the only path that registers global window/Twilio listeners and
+// owns the duration Timer.
+export function useCallSession() {
+  const store = useStore();
+  const callsStore = useCallsStore();
+  const whatsappSession = useWhatsappCallSession();
+  const { t } = useI18n();
+
+  const reactive = buildReactiveSurface(callsStore);
+
+  // Cable broadcasts (voice_call.incoming / message.created) are one-shot, so
+  // on a hard refresh they leave the calls store empty. Seed it from any
+  // ringing voice_call message in the conversation cache. Skip calls the
+  // agent has already dismissed locally so they don't re-pop on the next
+  // conversation update.
+  const seedCallsFromHydratedMessages = () => {
+    const conversations = store.getters.getAllConversations || [];
+    const currentUserId = store.getters.getCurrentUserID;
+    const currentUserAvailability = store.getters.getCurrentUserAvailability;
+    conversations.forEach(conv => {
+      (conv.messages || []).forEach(msg => {
+        if (msg.content_type !== 'voice_call') return;
+        if (msg.call?.status !== 'ringing') return;
+        const callSid = msg.call?.provider_call_id;
+        if (callSid && dismissedCallSids.has(callSid)) return;
+        handleVoiceCallCreated(msg, currentUserId, currentUserAvailability);
+      });
+    });
+  };
+
+  watch(
+    reactive.hasActiveCall,
+    active => {
+      if (active) {
+        globalDurationTimer?.start();
+      } else {
+        globalDurationTimer?.stop();
+        globalCallDuration.value = 0;
+      }
+    },
+    { immediate: true }
+  );
+
+  onMounted(() => {
+    attachGlobalsOnFirstMount(callsStore);
+    seedCallsFromHydratedMessages();
+  });
+
+  // Re-seed when conversations stream in after mount; addCall merges by callSid
+  // and dismissed sids are filtered, so this is idempotent.
+  watch(
+    () => store.getters.getAllConversations?.length,
+    () => seedCallsFromHydratedMessages()
+  );
+
+  onUnmounted(() => detachGlobalsOnLastUnmount());
+
+  const actions = buildCallActions({ callsStore, whatsappSession, t });
+
+  return { ...reactive, ...actions };
+}
+
+// Lightweight consumer for components that need to read state and trigger
+// actions but should NOT mount global listeners (e.g., per-message bubbles
+// rendered in a thread). Reads from the same module-level state that
+// useCallSession owns, so the duration timer and dismissed set stay coherent.
+export function useCallActions() {
+  const callsStore = useCallsStore();
+  const whatsappSession = useWhatsappCallSession();
+  const { t } = useI18n();
+
+  const reactive = buildReactiveSurface(callsStore);
+  const actions = buildCallActions({ callsStore, whatsappSession, t });
+
+  return { ...reactive, ...actions };
 }

app/javascript/dashboard/composables/useWhatsappCallSession.js

@@ -0,0 +1,414 @@
+import { ref } from 'vue';
+import Cookies from 'js-cookie';
+import WhatsappCallsAPI from 'dashboard/api/channel/whatsapp/whatsappCallsAPI';
+
+// Module-level state lets the cable handlers and unload listeners reach the
+// live PeerConnection without prop-drilling refs through every composable.
+let pc = null;
+let localStream = null;
+let remoteStream = null;
+let remoteAudioEl = null;
+let mediaRecorder = null;
+let recorderChunks = [];
+let audioContext = null;
+let activeCallId = null;
+// Module-scoped so multiple composable callers (header button + contact-panel
+// button) share the same lock. A per-instance ref let two parallel callers
+// both pass the guard and tear down each other's WebRTC state in cleanup().
+// ref() so consumers can reactively gate buttons on it (the composable
+// re-exports this as `isInitiating`).
+const isInitiatingOutbound = ref(false);
+// Inbound calls record from the moment the agent clicks accept (their click =
+// pickup). Outbound calls must wait — Meta's `connect` webhook (which lands
+// during ringing) negotiates remote tracks ~20s before the contact actually
+// answers, and we don't want pre-pickup audio in the recording. This flag is
+// flipped to true by armOutboundRecorder() when the ACCEPTED status arrives.
+let recorderArmed = false;
+
+const ensureRemoteAudioElement = () => {
+  if (remoteAudioEl) return remoteAudioEl;
+  remoteAudioEl = document.createElement('audio');
+  remoteAudioEl.id = 'whatsapp-call-remote-audio';
+  remoteAudioEl.autoplay = true;
+  remoteAudioEl.playsInline = true;
+  remoteAudioEl.style.display = 'none';
+  document.body.appendChild(remoteAudioEl);
+  return remoteAudioEl;
+};
+
+const playRemoteStream = stream => {
+  const el = ensureRemoteAudioElement();
+  el.srcObject = stream;
+  el.play().catch(err => {
+    // eslint-disable-next-line no-console
+    console.warn('[WhatsApp Call] remote audio play() failed:', err);
+  });
+};
+
+// 1s timeslice keeps a recent recording chunk in memory so a remote hangup
+// that races cleanup still has data to upload.
+const RECORDING_TIMESLICE_MS = 1000;
+const ICE_GATHER_TIMEOUT_MS = 10000;
+
+const RECORDER_MIME_CANDIDATES = [
+  'audio/webm;codecs=opus',
+  'audio/webm',
+  'audio/ogg;codecs=opus',
+];
+
+// Outbound calls have no backend-supplied ice_servers (the call doesn't exist
+// at offer time). Without STUN the browser only sends host candidates and
+// browser→Meta media silently drops through any non-trivial NAT.
+const DEFAULT_OUTBOUND_ICE_SERVERS = [{ urls: 'stun:stun.l.google.com:19302' }];
+
+const waitForIceGatheringComplete = peer =>
+  new Promise(resolve => {
+    if (peer.iceGatheringState === 'complete') {
+      resolve();
+      return;
+    }
+    const timer = setTimeout(resolve, ICE_GATHER_TIMEOUT_MS);
+    peer.addEventListener('icegatheringstatechange', () => {
+      if (peer.iceGatheringState === 'complete') {
+        clearTimeout(timer);
+        resolve();
+      }
+    });
+  });
+
+const setupRecorder = () => {
+  if (!localStream || !remoteStream || mediaRecorder) return;
+  // createMediaStreamSource on a stream with no audio tracks wires up to
+  // nothing — the recorded mix would be silence. Wait until ontrack fires.
+  if (remoteStream.getAudioTracks().length === 0) return;
+
+  audioContext = new AudioContext({ sampleRate: 48000 });
+  // AudioContext starts suspended under most autoplay policies; without
+  // resume() the destination stream produces silence.
+  audioContext.resume().catch(() => {});
+
+  const destination = audioContext.createMediaStreamDestination();
+  audioContext.createMediaStreamSource(localStream).connect(destination);
+  audioContext.createMediaStreamSource(remoteStream).connect(destination);
+
+  const mimeType = RECORDER_MIME_CANDIDATES.find(t =>
+    MediaRecorder.isTypeSupported(t)
+  );
+  if (!mimeType) return;
+
+  recorderChunks = [];
+  mediaRecorder = new MediaRecorder(destination.stream, { mimeType });
+  mediaRecorder.ondataavailable = event => {
+    if (event.data && event.data.size > 0) recorderChunks.push(event.data);
+  };
+  mediaRecorder.start(RECORDING_TIMESLICE_MS);
+};
+
+const cleanup = () => {
+  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+    try {
+      mediaRecorder.stop();
+    } catch (_) {
+      /* noop */
+    }
+  }
+  if (audioContext && audioContext.state !== 'closed') {
+    audioContext.close().catch(() => {});
+  }
+  if (localStream) localStream.getTracks().forEach(t => t.stop());
+  if (remoteStream) remoteStream.getTracks().forEach(t => t.stop());
+  if (pc) pc.close();
+  if (remoteAudioEl) remoteAudioEl.srcObject = null;
+
+  pc = null;
+  localStream = null;
+  remoteStream = null;
+  mediaRecorder = null;
+  recorderChunks = [];
+  audioContext = null;
+  activeCallId = null;
+  recorderArmed = false;
+};
+
+const buildPeerConnection = iceServers => {
+  const config = iceServers && iceServers.length ? { iceServers } : {};
+  pc = new RTCPeerConnection(config);
+  remoteStream = new MediaStream();
+  pc.ontrack = event => {
+    // Reuse the same MediaStream object — the recorder's audioContext source
+    // taps it once, so reassigning would orphan the recorder.
+    const tracks =
+      event.streams && event.streams[0]
+        ? event.streams[0].getTracks()
+        : [event.track];
+    tracks.forEach(track => {
+      if (!remoteStream.getTracks().includes(track))
+        remoteStream.addTrack(track);
+    });
+    playRemoteStream(remoteStream);
+    // Only arm the recorder when the call is actually accepted. For outbound
+    // this is the ACCEPTED status webhook; for inbound this is the agent's
+    // own click (acceptIncomingCall flips recorderArmed before returning).
+    if (recorderArmed) setupRecorder();
+  };
+  return pc;
+};
+
+const stopRecorderAndUpload = async callId => {
+  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+    await new Promise(resolve => {
+      mediaRecorder.addEventListener('stop', resolve, { once: true });
+      try {
+        mediaRecorder.stop();
+      } catch (_) {
+        resolve();
+      }
+    });
+  }
+  if (!recorderChunks.length || !callId) return;
+
+  const blob = new Blob(recorderChunks, { type: recorderChunks[0].type });
+  // Best-effort — the controller's idempotency guard handles a retry.
+  try {
+    await WhatsappCallsAPI.uploadRecording(callId, blob);
+  } catch (_) {
+    /* noop */
+  }
+};
+
+// devise-token-auth requires access-token / client / uid headers on every
+// request — navigator.sendBeacon can't set custom headers, so we rehydrate
+// the auth payload from the cw_d_session_info cookie that the dashboard sets
+// at login. Used by the page-close terminate path below.
+const getDeviseAuthHeaders = () => {
+  try {
+    const raw = Cookies.get('cw_d_session_info');
+    if (!raw) return null;
+    const session = JSON.parse(raw);
+    return {
+      'access-token': session['access-token'] || '',
+      client: session.client || '',
+      uid: session.uid || '',
+      expiry: session.expiry || '',
+      'token-type': session['token-type'] || 'Bearer',
+    };
+  } catch (_) {
+    return null;
+  }
+};
+
+const beaconTerminate = callId => {
+  if (!callId) return;
+  const accountId = window.location.pathname.split('/')[3];
+  if (!accountId) return;
+  const headers = getDeviseAuthHeaders();
+  if (!headers) return;
+  const url = `/api/v1/accounts/${accountId}/whatsapp_calls/${callId}/terminate`;
+  // fetch+keepalive (instead of navigator.sendBeacon) so we can attach auth
+  // headers — without them devise-token-auth 401s and the call stays open on
+  // Meta until its carrier-side timeout (~60s).
+  try {
+    fetch(url, {
+      method: 'POST',
+      keepalive: true,
+      credentials: 'same-origin',
+      headers: { 'Content-Type': 'application/json', ...headers },
+      body: '{}',
+    }).catch(() => {});
+  } catch (_) {
+    /* noop */
+  }
+};
+
+export const hasActiveWhatsappCall = () => !!(activeCallId || pc);
+
+export const isLocalWhatsappCall = callId =>
+  !!callId && activeCallId != null && callId === activeCallId;
+
+export function useWhatsappCallSession() {
+  const prepareInboundAnswer = async (sdpOffer, iceServers) => {
+    cleanup();
+    localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    buildPeerConnection(iceServers);
+    localStream.getTracks().forEach(t => pc.addTrack(t, localStream));
+    await pc.setRemoteDescription({ type: 'offer', sdp: sdpOffer });
+    const answer = await pc.createAnswer();
+    await pc.setLocalDescription(answer);
+    await waitForIceGatheringComplete(pc);
+    return pc.localDescription.sdp;
+  };
+
+  const prepareOutboundOffer = async () => {
+    cleanup();
+    localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    buildPeerConnection(DEFAULT_OUTBOUND_ICE_SERVERS);
+    localStream.getTracks().forEach(t => pc.addTrack(t, localStream));
+    const offer = await pc.createOffer();
+    await pc.setLocalDescription(offer);
+    await waitForIceGatheringComplete(pc);
+    return pc.localDescription.sdp;
+  };
+
+  const acceptIncomingCall = async ({ callId, sdpOffer, iceServers }) => {
+    // The store may not have sdpOffer yet (the cable broadcast can race the
+    // click). Fall back to GET /whatsapp_calls/:id which exposes it.
+    let offer = sdpOffer;
+    let ice = iceServers;
+    if (!offer && callId) {
+      try {
+        const fresh = await WhatsappCallsAPI.show(callId);
+        offer = fresh?.sdp_offer || fresh?.sdpOffer;
+        ice = ice || fresh?.ice_servers || fresh?.iceServers;
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(
+          '[WhatsApp Call] failed to fetch call data for accept:',
+          e
+        );
+      }
+    }
+    if (!offer) {
+      throw new Error('Missing sdp_offer for accept — call may have ended.');
+    }
+
+    const sdpAnswer = await prepareInboundAnswer(offer, ice);
+    activeCallId = callId;
+    // Inbound: agent's click is the pickup. Arm the recorder before the API
+    // round-trip so when ontrack fires (triggered by setRemoteDescription
+    // back in prepareInboundAnswer) the recorder is already authorized.
+    recorderArmed = true;
+    setupRecorder();
+    await WhatsappCallsAPI.accept(callId, sdpAnswer);
+  };
+
+  const rejectIncomingCall = async callId => {
+    try {
+      await WhatsappCallsAPI.reject(callId);
+    } finally {
+      cleanup();
+    }
+  };
+
+  const initiateOutboundCall = async conversationId => {
+    // Module-scoped lock + active-session guard so a second click — from the
+    // same composable instance OR a different one (header vs contact panel)
+    // OR while a call is already live — can't tear down the in-flight setup
+    // via prepareOutboundOffer's cleanup().
+    if (isInitiatingOutbound.value) return { status: 'locked' };
+    if (hasActiveWhatsappCall()) return { status: 'locked' };
+    isInitiatingOutbound.value = true;
+    try {
+      const sdpOffer = await prepareOutboundOffer();
+      const response = await WhatsappCallsAPI.initiate(
+        conversationId,
+        sdpOffer
+      );
+      if (response?.id) {
+        activeCallId = response.id;
+        return response;
+      }
+      // No call id back: this is the permission-request branch. The mic +
+      // PeerConnection allocated by prepareOutboundOffer aren't useful until
+      // the contact opts in and the agent retries — release them.
+      cleanup();
+      return response;
+    } catch (e) {
+      cleanup();
+      // BE returns 422 when the contact hasn't opted in (permission template
+      // sent or already pending). Surface it to the caller as a normal
+      // response shape so it can render the banner instead of an error toast.
+      const data = e?.response?.data;
+      if (
+        data?.status === 'permission_requested' ||
+        data?.status === 'permission_pending'
+      ) {
+        return { status: data.status };
+      }
+      throw e;
+    } finally {
+      isInitiatingOutbound.value = false;
+    }
+  };
+
+  // callIdOverride is the call.id from the dashboard's calls store. Module
+  // `activeCallId` may be null after a prior accept attempt's cleanup() — but
+  // the call still exists on Meta and must still be terminated. Falling back
+  // to the override means hangup is robust to a wiped local session.
+  const endActiveCall = async (callIdOverride = null) => {
+    const callId = activeCallId || callIdOverride;
+    if (!callId) {
+      cleanup();
+      return;
+    }
+    try {
+      await stopRecorderAndUpload(callId);
+      await WhatsappCallsAPI.terminate(callId).catch(() => {});
+    } finally {
+      cleanup();
+    }
+  };
+
+  return {
+    isInitiating: isInitiatingOutbound,
+    prepareInboundAnswer,
+    prepareOutboundOffer,
+    acceptIncomingCall,
+    rejectIncomingCall,
+    initiateOutboundCall,
+    endActiveCall,
+  };
+}
+
+// Cable handlers fire outside any composable instance, so the shared session
+// surface is exposed as module-level functions for them.
+
+export const applyOutboundAnswer = async (callId, sdpAnswer) => {
+  if (!pc) return;
+  // voice_call.outbound_connected is broadcast account-wide; only apply
+  // the SDP answer if it's for this tab's in-flight outbound call.
+  if (activeCallId != null && callId !== activeCallId) return;
+  activeCallId = callId;
+  await pc.setRemoteDescription({ type: 'answer', sdp: sdpAnswer });
+};
+
+// Called by the cable handler when Meta delivers status=ACCEPTED for the
+// outbound call (real pickup). Flips the recorder gate and starts the
+// MediaRecorder. Idempotent — safe if ontrack hasn't fired yet (setupRecorder
+// bails until the remote stream has audio tracks; ontrack will retry).
+export const armOutboundRecorder = () => {
+  recorderArmed = true;
+  setupRecorder();
+};
+
+export const cleanupWhatsappSession = () => cleanup();
+
+export const handleWhatsappRemoteEnd = async callId => {
+  // Snapshot before cleanup nulls activeCallId.
+  const id = callId || activeCallId;
+  if (!id) {
+    cleanup();
+    return;
+  }
+  try {
+    await stopRecorderAndUpload(id);
+  } finally {
+    cleanup();
+  }
+};
+
+export const setWhatsappCallMuted = muted => {
+  if (!localStream) return false;
+  localStream.getAudioTracks().forEach(track => {
+    track.enabled = !muted;
+  });
+  return muted;
+};
+
+export const sendWhatsappTerminateBeacon = () => {
+  // Always fire when there's a live callId. The beacon endpoint is idempotent,
+  // so racing it with an in-flight Axios terminate (which unload may abort) is
+  // fine — Meta gets exactly one terminate either way, and we avoid leaving
+  // the call ringing on Meta until its carrier-side timeout.
+  if (!activeCallId) return;
+  beaconTerminate(activeCallId);
+};

app/javascript/dashboard/featureFlags.js

@@ -41,8 +41,8 @@ export const FEATURE_FLAGS = {
   CAPTAIN_CUSTOM_TOOLS: 'custom_tools',
   CAPTAIN_V2: 'captain_integration_v2',
   CAPTAIN_TASKS: 'captain_tasks',
+  CAPTAIN_DOCUMENT_AUTO_SYNC: 'captain_document_auto_sync',
   SAML: 'saml',
-  QUOTED_EMAIL_REPLY: 'quoted_email_reply',
   COMPANIES: 'companies',
   ADVANCED_SEARCH: 'advanced_search',
   CONVERSATION_REQUIRED_ATTRIBUTES: 'conversation_required_attributes',

app/javascript/dashboard/helper/actionCable.js

@@ -4,6 +4,13 @@ import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotifi
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { emitter } from 'shared/helpers/mitt';
 import { useImpersonation } from 'dashboard/composables/useImpersonation';
+import { useCallsStore } from 'dashboard/stores/calls';
+import {
+  applyOutboundAnswer,
+  armOutboundRecorder,
+  handleWhatsappRemoteEnd,
+  isLocalWhatsappCall,
+} from 'dashboard/composables/useWhatsappCallSession';
 
 const { isImpersonating } = useImpersonation();
 
@@ -35,6 +42,10 @@ class ActionCableConnector extends BaseActionCableConnector {
       'account.cache_invalidated': this.onCacheInvalidate,
       'account.enrichment_completed': this.onEnrichmentCompleted,
       'copilot.message.created': this.onCopilotMessageCreated,
+      'voice_call.incoming': this.onVoiceCallIncoming,
+      'voice_call.outbound_connected': this.onVoiceCallOutboundConnected,
+      'voice_call.outbound_accepted': this.onVoiceCallOutboundAccepted,
+      'voice_call.ended': this.onVoiceCallEnded,
     };
   }
 
@@ -205,6 +216,74 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.app.$store.dispatch('inboxes/revalidate', { newKey: keys.inbox });
     this.app.$store.dispatch('teams/revalidate', { newKey: keys.team });
   };
+
+  onVoiceCallIncoming = data => {
+    if (data?.provider !== 'whatsapp') return;
+    // Defense in depth: the server already filters to online agent streams,
+    // but if anything ever broadcasts to a broader stream (e.g. account-wide),
+    // an agent who's set availability=offline/busy shouldn't ring.
+    const availability = this.app.$store.getters.getCurrentUserAvailability;
+    if (availability !== 'online') return;
+
+    useCallsStore().addCall({
+      callSid: data.call_id,
+      callId: data.id,
+      conversationId: data.conversation_id,
+      inboxId: data.inbox_id,
+      callDirection: 'inbound',
+      provider: 'whatsapp',
+      sdpOffer: data.sdp_offer,
+      iceServers: data.ice_servers,
+      caller: data.caller,
+    });
+  };
+
+  // `connect` is the WebRTC tunnel-ready signal (fires ~20s before pickup
+  // for outbound). Apply the SDP answer so the handshake completes during
+  // ringing, but stay non-active until `outbound_accepted` arrives.
+  // eslint-disable-next-line class-methods-use-this
+  onVoiceCallOutboundConnected = async data => {
+    if (data?.provider !== 'whatsapp' || !data.sdp_answer) return;
+    // Account-wide broadcast: skip SDPs for calls another agent is handling,
+    // otherwise applyOutboundAnswer would feed a foreign SDP into this tab's
+    // peer connection.
+    if (!isLocalWhatsappCall(data.id)) return;
+    try {
+      await applyOutboundAnswer(data.id, data.sdp_answer);
+    } catch (_) {
+      /* noop */
+    }
+  };
+
+  // Real pickup signal — Meta sends status=ACCEPTED on the call when the
+  // contact answers. Flip active (timer starts) and arm the recorder.
+  // eslint-disable-next-line class-methods-use-this
+  onVoiceCallOutboundAccepted = data => {
+    if (data?.provider !== 'whatsapp') return;
+    const store = useCallsStore();
+    if (!store.calls.some(c => c.callSid === data.call_id)) return;
+    store.setCallActive(data.call_id);
+    armOutboundRecorder();
+  };
+
+  // eslint-disable-next-line class-methods-use-this
+  onVoiceCallEnded = async data => {
+    if (data?.provider !== 'whatsapp') return;
+    // The store entry should always be removed for this account-wide broadcast,
+    // but the WebRTC/recorder teardown must only run for the call this tab owns
+    // — otherwise an unrelated agent's call ending would stop this tab's
+    // recorder and upload its chunks against the wrong call id.
+    if (isLocalWhatsappCall(data.id)) {
+      // Await upload before removeCall — the store's sync teardown would otherwise
+      // wipe the recorder chunks before they reach the server.
+      try {
+        await handleWhatsappRemoteEnd(data.id);
+      } catch (_) {
+        /* noop */
+      }
+    }
+    useCallsStore().removeCall(data.call_id);
+  };
 }
 
 export default {

app/javascript/dashboard/helper/inbox.js

@@ -16,6 +16,7 @@ export const INBOX_TYPES = {
 // Add providers here as they gain voice capability (e.g., WhatsApp Cloud, Twilio WhatsApp)
 export const VOICE_CALL_PROVIDERS = {
   TWILIO: 'twilio',
+  WHATSAPP: 'whatsapp',
 };
 
 export const getVoiceCallProvider = inbox => {
@@ -25,9 +26,11 @@ export const getVoiceCallProvider = inbox => {
   const channelType = inbox.channel_type || inbox.channelType;
   const voiceEnabled = inbox.voice_enabled || inbox.voiceEnabled;
 
-  if (channelType === INBOX_TYPES.TWILIO && voiceEnabled) {
-    return VOICE_CALL_PROVIDERS.TWILIO;
-  }
+  if (!voiceEnabled) return null;
+
+  if (channelType === INBOX_TYPES.TWILIO) return VOICE_CALL_PROVIDERS.TWILIO;
+  if (channelType === INBOX_TYPES.WHATSAPP)
+    return VOICE_CALL_PROVIDERS.WHATSAPP;
 
   return null;
 };

app/javascript/dashboard/helper/voice.js

@@ -45,23 +45,62 @@ const shouldShowCall = ({
   return !isAssignedToAnotherAgent(assigneeId, currentUserId);
 };
 
+// Offline/busy agents shouldn't get a ringing popup for inbound calls, but
+// outbound calls always belong to the initiator regardless of their status,
+// and existing (already-surfaced) calls keep going so a status change
+// mid-call doesn't yank away an active widget.
+const shouldRingInbound = (callDirection, currentUserAvailability) => {
+  if (callDirection === 'outbound') return true;
+  return currentUserAvailability === 'online';
+};
+
+function extractCallerSnapshot(message) {
+  // Snapshot caller info from the message at add-time so the widget can keep
+  // rendering it after the user navigates away from a conversation list that
+  // had the conversation hydrated (and Vuex evicts it from the store).
+  const sender = message?.sender;
+  if (!sender) return null;
+  return {
+    name: sender.name,
+    phone: sender.phone_number,
+    avatar: sender.avatar || sender.thumbnail,
+    additionalAttributes: sender.additional_attributes || {},
+  };
+}
+
 function extractCallData(message) {
   const call = message?.call || {};
   return {
     callSid: call.provider_call_id,
+    callId: call.id,
+    provider: call.provider,
     status: call.status,
     callDirection: call.direction === 'outgoing' ? 'outbound' : 'inbound',
     conversationId: message?.conversation_id,
+    inboxId: message?.inbox_id ?? message?.conversation?.inbox_id,
     assigneeId: extractAssigneeId(message?.conversation),
     senderId: message?.sender?.id,
+    caller: extractCallerSnapshot(message),
   };
 }
 
-export function handleVoiceCallCreated(message, currentUserId) {
+export function handleVoiceCallCreated(
+  message,
+  currentUserId,
+  currentUserAvailability
+) {
   if (!isVoiceCallMessage(message)) return;
 
-  const { callSid, callDirection, conversationId, assigneeId, senderId } =
-    extractCallData(message);
+  const {
+    callSid,
+    callId,
+    provider,
+    callDirection,
+    conversationId,
+    inboxId,
+    assigneeId,
+    senderId,
+  } = extractCallData(message);
 
   if (
     !shouldShowCall({
@@ -74,23 +113,37 @@ export function handleVoiceCallCreated(message, currentUserId) {
     return;
   }
 
+  if (!shouldRingInbound(callDirection, currentUserAvailability)) return;
+
   const callsStore = useCallsStore();
   callsStore.addCall({
     callSid,
+    callId,
+    provider,
     conversationId,
+    inboxId,
     callDirection,
     senderId,
+    caller: extractCallerSnapshot(message),
   });
 }
 
-export function handleVoiceCallUpdated(commit, message, currentUserId) {
+export function handleVoiceCallUpdated(
+  commit,
+  message,
+  currentUserId,
+  currentUserAvailability
+) {
   if (!isVoiceCallMessage(message)) return;
 
   const {
     callSid,
+    callId,
+    provider,
     status,
     callDirection,
     conversationId,
+    inboxId,
     assigneeId,
     senderId,
   } = extractCallData(message);
@@ -118,11 +171,17 @@ export function handleVoiceCallUpdated(commit, message, currentUserId) {
   }
 
   if (status === 'ringing') {
+    if (!shouldRingInbound(callDirection, currentUserAvailability)) return;
+
     callsStore.addCall({
       callSid,
+      callId,
+      provider,
       conversationId,
+      inboxId,
       callDirection,
       senderId,
+      caller: extractCallerSnapshot(message),
     });
   }
 }
@@ -131,6 +190,20 @@ export function syncConversationCallVisibility(conversation, currentUserId) {
   const assigneeId = extractAssigneeId(conversation);
   if (!isAssignedToAnotherAgent(assigneeId, currentUserId)) return;
 
+  // Outbound calls belong to the initiator regardless of who the conversation
+  // is currently assigned to (auto-assignment may flip mid-call). Mirror
+  // shouldShowCall's outbound exception so an in-progress outbound call isn't
+  // ripped out from under the caller when the conversation reassigns.
   const callsStore = useCallsStore();
-  callsStore.removeCallsForConversation(conversation.id);
+  const callsToRemove = callsStore.calls.filter(
+    call =>
+      call.conversationId === conversation.id &&
+      !shouldShowCall({
+        callDirection: call.callDirection,
+        senderId: call.senderId,
+        assigneeId,
+        currentUserId,
+      })
+  );
+  callsToRemove.forEach(call => callsStore.removeCall(call.callSid));
 }

app/javascript/dashboard/i18n/index.js

@@ -7,6 +7,7 @@ import de from './locale/de';
 import el from './locale/el';
 import en from './locale/en';
 import es from './locale/es';
+import et from './locale/et';
 import fa from './locale/fa';
 import fi from './locale/fi';
 import fr from './locale/fr';
@@ -49,6 +50,7 @@ export default {
   el,
   en,
   es,
+  et,
   fa,
   fi,
   fr,

app/javascript/dashboard/i18n/locale/am/attributesMgmt.json

@@ -10,7 +10,8 @@
     "NO_RESULTS": "No attributes found matching your search",
     "ATTRIBUTE_MODELS": {
       "CONVERSATION": "Conversation",
-      "CONTACT": "Contact"
+      "CONTACT": "Contact",
+      "COMPANY": "ኩባንያ"
     },
     "ATTRIBUTE_TYPES": {
       "TEXT": "Text",
@@ -108,7 +109,8 @@
     "TABS": {
       "HEADER": "Custom Attributes",
       "CONVERSATION": "Conversation",
-      "CONTACT": "Contact"
+      "CONTACT": "Contact",
+      "COMPANY": "ኩባንያ"
     },
     "LIST": {
       "TABLE_HEADER": {

app/javascript/dashboard/i18n/locale/am/automation.json

@@ -130,6 +130,7 @@
       "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     },
     "NONE_OPTION": "None",
+    "LAST_RESPONDING_AGENT": "Last Responding Agent",
     "EVENTS": {
       "CONVERSATION_CREATED": "Conversation Created",
       "CONVERSATION_UPDATED": "Conversation Updated",
@@ -181,6 +182,7 @@
       "BROWSER_LANGUAGE": "Browser Language",
       "MAIL_SUBJECT": "Email Subject",
       "COUNTRY_NAME": "Country",
+      "COMPANY_NAME": "ኩባንያ",
       "REFERER_LINK": "Referrer Link",
       "ASSIGNEE_NAME": "Assignee",
       "TEAM_NAME": "Team",

app/javascript/dashboard/i18n/locale/am/bulkActions.json

@@ -6,7 +6,12 @@
     "UNASSIGN_CONFIRMATION_LABEL": "Are you sure to unassign {conversationCount} {conversationLabel}?",
     "GO_BACK_LABEL": "Go back",
     "ASSIGN_LABEL": "Assign",
+    "NONE": "None",
+    "CLEAR_SELECTION": "Clear",
+    "ASSIGN_AGENT_CONFIRMATION_LABEL": "Are you sure you want to assign {n} conversation to {agentName}? | Are you sure you want to assign {n} conversations to {agentName}?",
+    "UNASSIGN_AGENT_CONFIRMATION_LABEL": "Are you sure you want to unassign {n} conversation? | Are you sure you want to unassign {n} conversations?",
     "YES": "Yes",
+    "CANCEL": "Cancel",
     "SEARCH_INPUT_PLACEHOLDER": "Search",
     "ASSIGN_AGENT_TOOLTIP": "Assign agent",
     "ASSIGN_TEAM_TOOLTIP": "Assign team",
@@ -38,6 +43,8 @@
       "NONE": "None",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
+      "ASSIGN_TEAM_CONFIRMATION_LABEL": "Are you sure you want to assign {n} conversation to {teamName}? | Are you sure you want to assign {n} conversations to {teamName}?",
+      "UNASSIGN_TEAM_CONFIRMATION_LABEL": "Are you sure you want to unassign {n} conversation? | Are you sure you want to unassign {n} conversations?",
       "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }

app/javascript/dashboard/i18n/locale/am/chatlist.json

@@ -140,6 +140,7 @@
     "HIDE_QUOTED_TEXT": "Hide Quoted Text",
     "SHOW_QUOTED_TEXT": "Show Quoted Text",
     "MESSAGE_READ": "Read",
-    "SENDING": "Sending"
+    "SENDING": "Sending",
+    "UNREAD_COUNT_OVERFLOW": "9+"
   }
 }

app/javascript/dashboard/i18n/locale/am/companies.json

@@ -7,6 +7,7 @@
         "NAME": "Name",
         "DOMAIN": "Domain",
         "CREATED_AT": "Created at",
+        "LAST_ACTIVITY_AT": "Last activity",
         "CONTACTS_COUNT": "Contacts count"
       }
     },
@@ -21,6 +22,121 @@
     "LOADING": "Loading companies...",
     "UNNAMED": "Unnamed Company",
     "CONTACTS_COUNT": "{n} contact | {n} contacts",
+    "ACTIONS": {
+      "CREATE": "Add company"
+    },
+    "CREATE": {
+      "TITLE": "Add company details",
+      "ACTIONS": {
+        "SAVE": "Add company"
+      },
+      "MESSAGES": {
+        "SUCCESS": "Company created.",
+        "ERROR": "Could not create the company."
+      }
+    },
+    "DETAIL": {
+      "LOADING": "Loading company details...",
+      "EMPTY_STATE": {
+        "TITLE": "Company not found",
+        "SUBTITLE": "This company may have been removed or is no longer available in this account."
+      },
+      "SIDEBAR": {
+        "TABS": {
+          "ATTRIBUTES": "ባህሪያት",
+          "CONTACTS": "እውቂያዎች",
+          "HISTORY": "ታሪክ",
+          "NOTES": "ማስታወሻዎች"
+        }
+      },
+      "HISTORY": {
+        "EMPTY": "No conversations found for this company's contacts yet."
+      },
+      "NOTES": {
+        "EMPTY": "No notes found for this company's contacts yet."
+      },
+      "ATTRIBUTES": {
+        "SEARCH_PLACEHOLDER": "Search attributes...",
+        "EMPTY_STATE": "There are no company custom attributes configured yet.",
+        "NO_ATTRIBUTES": "No matching attributes found.",
+        "UNUSED_ATTRIBUTES": "{count} unused attribute | {count} unused attributes",
+        "MESSAGES": {
+          "UPDATE_SUCCESS": "Company attribute updated.",
+          "UPDATE_ERROR": "Could not update company attribute.",
+          "DELETE_SUCCESS": "Company attribute removed.",
+          "DELETE_ERROR": "Could not remove company attribute."
+        }
+      },
+      "CONTACTS": {
+        "LOADING": "Loading contacts...",
+        "EMPTY": "No contacts are linked to this company yet.",
+        "UNNAMED_CONTACT": "Unnamed contact",
+        "ACTIONS": {
+          "ADD": "እውቂያ አክል",
+          "REMOVE": "Remove contact"
+        },
+        "DIALOGS": {
+          "ADD": {
+            "DESCRIPTION": "Search for an existing contact and link it to this company.",
+            "SEARCH_PLACEHOLDER": "እውቂያዎችን ይፈልጉ...",
+            "INITIAL": "Start typing to search contacts.",
+            "EMPTY": "አንድም እውቂያ አልተገኘም.",
+            "CONFIRM_TITLE": "Link contact",
+            "CONFIRM_DESCRIPTION": "Confirm the company and contact before linking them.",
+            "COMPANY_LABEL": "ኩባንያ",
+            "CONTACT_LABEL": "እውቂያ",
+            "CURRENT_COMPANY": "Currently linked to {companyName}",
+            "ADD": "Link contact",
+            "CANCEL": "Cancel"
+          }
+        },
+        "MESSAGES": {
+          "ADD_SUCCESS": "Contact linked to company.",
+          "ADD_ERROR": "Could not link contact to company.",
+          "REASSIGN_SUCCESS": "Contact reassigned to company.",
+          "REASSIGN_ERROR": "Could not reassign contact to company.",
+          "REMOVE_SUCCESS": "Contact removed from company.",
+          "REMOVE_ERROR": "Could not remove contact from company."
+        }
+      },
+      "AVATAR": {
+        "UPDATING": "Updating company avatar...",
+        "UPLOAD_SUCCESS": "Company avatar updated.",
+        "UPLOAD_ERROR": "Could not update the company avatar.",
+        "DELETE_SUCCESS": "Company avatar removed.",
+        "DELETE_ERROR": "Could not remove the company avatar."
+      },
+      "PROFILE": {
+        "TITLE": "Edit company details",
+        "CREATED_AT": "ተፈጥሯል {date}",
+        "LAST_ACTIVE": "መጨረሻ እንቅስቃሴ {date}",
+        "DESCRIPTION_PLACEHOLDER": "Add a short description for this company",
+        "ACTIONS": {
+          "SAVE": "Update company"
+        },
+        "MESSAGES": {
+          "UPDATE_SUCCESS": "Company updated.",
+          "UPDATE_ERROR": "Could not update the company."
+        },
+        "FIELDS": {
+          "NAME": "Name",
+          "DOMAIN": "ዶሜይን"
+        }
+      },
+      "DELETE": {
+        "SECTION_TITLE": "Danger zone",
+        "SECTION_DESCRIPTION": "Delete this company and unlink its contacts. The contacts will remain in the account.",
+        "BUTTON": "Delete company",
+        "TITLE": "Delete company?",
+        "DESCRIPTION": "This will remove the company and unlink all associated contacts. Contacts themselves will be preserved.",
+        "DESCRIPTION_WITH_NAME": "This will remove {companyName} and unlink all associated contacts. Contacts themselves will be preserved.",
+        "CONFIRM": "Delete company",
+        "MESSAGES": {
+          "SUCCESS": "Company deleted.",
+          "ERROR": "Could not delete the company."
+        }
+      }
+    },
     "EMPTY_STATE": {
       "TITLE": "No companies found"
     }

app/javascript/dashboard/i18n/locale/am/contact.json

@@ -386,6 +386,7 @@
       "IDENTIFIER": "መለያ",
       "COUNTRY": "አገር",
       "CITY": "ከተማ",
+      "COMPANY": "ኩባንያ",
       "CREATED_AT": "ተፈጥሯል በ",
       "LAST_ACTIVITY": "መጨረሻ እንቅስቃሴ",
       "REFERER_LINK": "የመግቢያ አገናኝ አገናኝ",

app/javascript/dashboard/i18n/locale/am/conversation.json

@@ -71,7 +71,8 @@
     "REPLY_MESSAGE_NOT_FOUND": "Message not available",
     "CARD": {
       "SHOW_LABELS": "Show labels",
-      "HIDE_LABELS": "Hide labels"
+      "HIDE_LABELS": "Hide labels",
+      "LABELS_COUNT": "{count} labels"
     },
     "VOICE_CALL": {
       "INCOMING_CALL": "Incoming call",
@@ -82,7 +83,9 @@
       "CALL_ENDED": "Call ended",
       "NOT_ANSWERED_YET": "Not answered yet",
       "THEY_ANSWERED": "They answered",
-      "YOU_ANSWERED": "You answered"
+      "YOU_ANSWERED": "You answered",
+      "AGENT_ANSWERED": "{agentName} answered",
+      "JOIN_CALL": "Join call"
     },
     "HEADER": {
       "RESOLVE_ACTION": "ተፈትኗል",
@@ -92,6 +95,7 @@
       "OPEN": "ተጨማሪ",
       "CLOSE": "ዝጋ",
       "DETAILS": "ዝርዝሮች",
+      "COPY_ID_SUCCESS": "Conversation ID copied to clipboard",
       "SNOOZED_UNTIL": "Snoozed until",
       "SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",
       "SNOOZED_UNTIL_NEXT_WEEK": "Snoozed until next week",
@@ -362,7 +366,19 @@
       "PREVIOUS_CONVERSATION": "Previous Conversations",
       "MACROS": "Macros",
       "LINEAR_ISSUES": "የተገናኙ የLinear ጉዳዮች",
-      "SHOPIFY_ORDERS": "Shopify Orders"
+      "SHOPIFY_ORDERS": "Shopify Orders",
+      "SHARED_FILES": "Attachments"
+    },
+    "SHARED_FILES": {
+      "EMPTY": "No attachments yet",
+      "DOWNLOAD": "Download file",
+      "DOWNLOAD_ERROR": "Could not download the file. Please try again.",
+      "MEDIA_HEADING": "Media",
+      "FILES_HEADING": "Files",
+      "VIEW_ALL": "View all",
+      "SHOW_LESS": "Show less",
+      "MORE_COUNT": "+{count}",
+      "UNTITLED_FILE": "Untitled file"
     },
     "SHOPIFY": {
       "ORDER_ID": "Order #{id}",

app/javascript/dashboard/i18n/locale/am/helpCenter.json

@@ -525,6 +525,7 @@
             "PUBLISH": "ለህትመት አድርግ",
             "DRAFT": "እቅድ",
             "ARCHIVE": "አርክቭ",
+            "TRANSLATE": "Translate",
             "DELETE": "ሰርዝ"
           },
           "STATUS": {
@@ -579,6 +580,41 @@
           "TITLE": "በዚህ ምድብ ምንም ጽሑፎች የሉም",
           "SUBTITLE": "በዚህ ምድብ ያሉ ጽሑፎች እዚህ ይታያሉ"
         }
+      },
+      "BULK_TRANSLATE": {
+        "TITLE": "Translate article | Translate {count} articles",
+        "DESCRIPTION": "Translate the selected article to another language. | Translate the selected articles to another language.",
+        "LOCALE_LABEL": "Target language",
+        "LOCALE_PLACEHOLDER": "Select a language",
+        "CATEGORY_LABEL": "Target category",
+        "CATEGORY_PLACEHOLDER": "Select a category",
+        "OPTIONAL": "(optional)",
+        "CONFIRM": "Translate",
+        "SELECT_ALL": "ሁሉንም ይምረጡ ({count})",
+        "SELECTED_COUNT": "{count} ተመረጡ",
+        "CLEAR_SELECTION": "ምርጫ አጽዳ",
+        "TRANSLATE_BUTTON": "Translate",
+        "CONFIRM_OVERWRITE": "Overwrite and translate",
+        "DUPLICATE_WARNING": "A translation already exists for this article in the selected language. | Translations already exist for {count} articles in the selected language.",
+        "DUPLICATE_CONFIRM_HINT": "Click translate again to overwrite the existing translation.",
+        "API": {
+          "SUCCESS_MESSAGE": "Translation in progress. The article will appear as a draft once ready.",
+          "ERROR_MESSAGE": "Failed to start translation. Please try again."
+        }
+      },
+      "BULK_ACTIONS": {
+        "PUBLISH": "አስተዋውቅ",
+        "DRAFT": "እቅድ",
+        "ARCHIVE": "አርክቭ",
+        "TRANSLATE": "Translate",
+        "DELETE": "Delete",
+        "STATUS_SUCCESS": "Articles updated successfully",
+        "STATUS_ERROR": "Failed to update articles",
+        "DELETE_CONFIRM_TITLE": "Delete article | Delete {count} articles",
+        "DELETE_CONFIRM_DESCRIPTION": "This will permanently delete the selected article. This action cannot be undone. | This will permanently delete {count} selected articles. This action cannot be undone.",
+        "DELETE_CONFIRM": "Delete",
+        "DELETE_SUCCESS": "Articles deleted successfully",
+        "DELETE_ERROR": "Failed to delete articles"
       }
     },
     "CATEGORY_PAGE": {

app/javascript/dashboard/i18n/locale/am/inboxMgmt.json

@@ -636,7 +636,17 @@
       "WIDGET_BUILDER": "የዊጅት አሰራር መሣሪያ",
       "BOT_CONFIGURATION": "የቦት ቅንብሮች",
       "ACCOUNT_HEALTH": "የመለያ ጤና",
-      "CSAT": "የደንበኞች ደህንነት ግምገማ (CSAT)"
+      "CSAT": "የደንበኞች ደህንነት ግምገማ (CSAT)",
+      "VOICE": "ድምጽ"
+    },
+    "VOICE_CONFIGURATION": {
+      "ENABLE_VOICE": {
+        "LABEL": "Enable Voice Calling",
+        "DESCRIPTION": "Enable voice calling on this inbox. Agents will be able to make and receive phone calls."
+      },
+      "CREDENTIALS": {
+        "DESCRIPTION": "Voice calling requires Twilio API Key credentials. These are used to generate tokens for agent voice connections."
+      }
     },
     "CHANNEL_PREFERENCES": "የቻናል ቅድሚያዎች",
     "WIDGET_FEATURES": "የዊጅት ባህሪያት",
@@ -745,6 +755,7 @@
       "SENDER_NAME_SECTION_TEXT": "በኢሜይል ውስጥ የAgent ስም እንዲታይ/እንዳይታይ አርግ፣ ካልተከናወነ የንግድ ስም ይታያል",
       "ENABLE_CONTINUITY_VIA_EMAIL": "በኢሜል የውይይት ቀጥታነት አንቀሳቅስ",
       "ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT": "ከኮንታክት ኢሜይል አድራሻ ካለ ውይይቶች በኢሜይል ይቀጥላሉ።",
+      "ENABLE_CONTINUITY_VIA_EMAIL_DISABLED_TEXT": "This feature is available on a paid plan. Upgrade to enable conversation continuity via email.",
       "LOCK_TO_SINGLE_CONVERSATION": "የውይይት መላኪያ",
       "LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT": "ለአሁን ያሉ እውቂያዎች ውይይት ፍጠራ ያስተካክሉ",
       "INBOX_UPDATE_TITLE": "የኢንቦክስ ቅንብሮች",
@@ -1000,7 +1011,8 @@
         "LABEL": "የይለፍ ቃል",
         "PLACE_HOLDER": "የይለፍ ቃል"
       },
-      "ENABLE_SSL": "SSL አንቀሳቅስ"
+      "ENABLE_SSL": "SSL አንቀሳቅስ",
+      "AUTH_MECHANISM": "ማረጋገጫ"
     },
     "MICROSOFT": {
       "TITLE": "Microsoft",

app/javascript/dashboard/i18n/locale/am/index.js

@@ -8,6 +8,7 @@ import bulkActions from './bulkActions.json';
 import campaign from './campaign.json';
 import cannedMgmt from './cannedMgmt.json';
 import chatlist from './chatlist.json';
+import companies from './companies.json';
 import components from './components.json';
 import contact from './contact.json';
 import contactFilters from './contactFilters.json';
@@ -26,6 +27,8 @@ import integrations from './integrations.json';
 import labelsMgmt from './labelsMgmt.json';
 import login from './login.json';
 import macros from './macros.json';
+import mfa from './mfa.json';
+import onboarding from './onboarding.json';
 import report from './report.json';
 import resetPassword from './resetPassword.json';
 import search from './search.json';
@@ -47,6 +50,7 @@ export default {
   ...campaign,
   ...cannedMgmt,
   ...chatlist,
+  ...companies,
   ...components,
   ...contact,
   ...contactFilters,
@@ -65,6 +69,8 @@ export default {
   ...labelsMgmt,
   ...login,
   ...macros,
+  ...mfa,
+  ...onboarding,
   ...report,
   ...resetPassword,
   ...search,

app/javascript/dashboard/i18n/locale/am/integrationApps.json

@@ -46,6 +46,7 @@
           "PLACEHOLDER": "Select Inbox"
         },
         "SUBMIT": "Create",
+        "VALIDATING_OPENAI": "Validating with OpenAI...",
         "CANCEL": "Cancel"
       },
       "API": {

app/javascript/dashboard/i18n/locale/am/integrations.json

@@ -742,6 +742,7 @@
       "SELECT_ALL": "ሁሉንም ይምረጡ ({count})",
       "UNSELECT_ALL": "ሁሉንም አልምረጥም ({count})",
       "BULK_DELETE_BUTTON": "Delete",
+      "BULK_SYNC_BUTTON": "Refresh",
       "BULK_DELETE": {
         "TITLE": "Delete documents?",
         "DESCRIPTION": "Are you sure you want to delete the selected documents? This action cannot be undone.",
@@ -749,6 +750,51 @@
         "SUCCESS_MESSAGE": "Documents deleted successfully",
         "ERROR_MESSAGE": "There was an error deleting the documents, please try again."
       },
+      "BULK_SYNC": {
+        "SUCCESS_MESSAGE_ONE": "Refresh queued for 1 document",
+        "SUCCESS_MESSAGE": "Refresh queued for {count} documents",
+        "ZERO_MESSAGE": "No documents marked for refresh.",
+        "ERROR_MESSAGE": "There was an error queuing the refresh, please try again."
+      },
+      "SYNC": {
+        "QUEUED_MESSAGE": "Refresh queued. We'll update the document shortly.",
+        "ERROR_MESSAGE": "Could not queue refresh, please try again."
+      },
+      "FILTERS": {
+        "SOURCE": {
+          "ALL": "All sources",
+          "WEB": "Web pages",
+          "PDF": "PDFs"
+        },
+        "STATUS": {
+          "ANY": "Any status",
+          "UPDATED": "Updated",
+          "NEEDS_UPDATE": "Needs update",
+          "UPDATING": "Updating",
+          "FAILED": "አልተሳካም"
+        },
+        "SORT": {
+          "RECENTLY_UPDATED": "Recently updated",
+          "RECENTLY_CREATED": "Recently created"
+        },
+        "SEARCH_PLACEHOLDER": "Search..."
+      },
+      "SYNC_STATUS": {
+        "SYNCED": "last updated {time}",
+        "SYNCING": "updating...",
+        "STALE_SYNC": "update stalled",
+        "FAILED": "Failed to sync",
+        "NEVER_SYNCED": "not updated yet"
+      },
+      "SYNC_ERRORS": {
+        "NOT_FOUND": "Page not found",
+        "ACCESS_DENIED": "Access denied",
+        "TIMEOUT": "Page took too long to respond",
+        "CONTENT_EMPTY": "Page returned empty content",
+        "FETCH_FAILED": "Could not fetch page",
+        "SYNC_ERROR": "Unexpected error",
+        "DEFAULT": "Sync error"
+      },
       "RELATED_RESPONSES": {
         "TITLE": "ተዛማጅ የFAQ ጥያቄዎች",
         "DESCRIPTION": "እነዚህ የFAQ ጥያቄዎች ቀጥተኛ ከሰነዱ ተፈጥረዋል።"
@@ -792,11 +838,15 @@
       },
       "OPTIONS": {
         "VIEW_RELATED_RESPONSES": "ተዛማጅ ምላሾችን እይ",
+        "SYNC_NOW": "Refresh now",
+        "RETRY_SYNC": "Retry refresh",
         "DELETE_DOCUMENT": "ሰነድ ሰርዝ"
       },
       "EMPTY_STATE": {
         "TITLE": "ሰነዶች አልተገኙም",
         "SUBTITLE": "ሰነዶች በእርስዎ አገልጋይ በተጠቃሚ ጥያቄዎች ላይ የሚሰጥ የተደጋጋሚ ጥያቄዎችን ለመፍጠር ይጠቀማሉ። ሰነዶችን ለአገልጋይዎ እውነተኛ እይታ ለማቅረብ ማስገባት ይችላሉ።",
+        "FILTERED_TITLE": "No matching documents",
+        "FILTERED_SUBTITLE": "Try changing the source, status, or search term.",
         "FEATURE_SPOTLIGHT": {
           "TITLE": "Captain ሰነድ",
           "NOTE": "በCaptain ውስጥ ሰነድ እንደ ለማድረግ ምንጭ እንደሚሰራ አገልግሎት አገልግሎት ነው። የእርዳታ ማዕከላችሁን ወይም መምሪያዎችን በመገናኘት፣ Captain ይዘቱን ማብራሪያ ማድረግ እና ለደንበኞች ጥያቄዎች ትክክለኛ ምላሾችን ማቅረብ ይችላል።"

app/javascript/dashboard/i18n/locale/am/macros.json

@@ -49,6 +49,9 @@
         "ERROR_MESSAGE": "There was an error deleting the macro. Please try again later"
       }
     },
+    "VIEW": {
+      "TOOLTIP": "View macro"
+    },
     "EDIT": {
       "TOOLTIP": "Edit macro",
       "API": {
@@ -66,7 +69,9 @@
         "LABEL": "Macro Visibility",
         "GLOBAL": {
           "LABEL": "Public",
-          "DESCRIPTION": "This macro is available publicly for all agents in this account."
+          "DESCRIPTION": "This macro is available publicly for all agents in this account.",
+          "CREATE_DISABLED_DESCRIPTION": "Only administrators can create public macros.",
+          "EDIT_DISABLED_DESCRIPTION": "Only administrators can edit public macros."
         },
         "PERSONAL": {
           "LABEL": "Private",

app/javascript/dashboard/i18n/locale/am/mfa.json

@@ -55,6 +55,10 @@
       "PASSWORD": "Password",
       "OTP_CODE": "Verification Code",
       "OTP_CODE_PLACEHOLDER": "000000",
+      "BACKUP_CODE": "Backup Code",
+      "BACKUP_CODE_PLACEHOLDER": "Enter one of your backup codes",
+      "USE_BACKUP_CODE": "Lost access to your authenticator? Use a backup code instead",
+      "USE_OTP_CODE": "Use a verification code from your authenticator app",
       "CONFIRM": "Disable 2FA",
       "CANCEL": "Cancel",
       "SUCCESS": "Two-factor authentication has been disabled",

app/javascript/dashboard/i18n/locale/am/onboarding.json

@@ -0,0 +1,34 @@
+{
+  "ONBOARDING_NEXT": {
+    "GREETING": "Hello {name}!",
+    "SUBTITLE": "Please review the following details",
+    "YOUR_DETAILS": "Your details",
+    "COMPANY_DETAILS": "Company details",
+    "FIELDS": {
+      "EMAIL": "Email",
+      "YOUR_ROLE": "Your Role",
+      "WEBSITE": "Website",
+      "LANGUAGE": "Language",
+      "TIMEZONE": "Timezone",
+      "COMPANY_SIZE": "Company Size",
+      "INDUSTRY": "Industry",
+      "REFERRAL_SOURCE": "Where did you find us?"
+    },
+    "PLACEHOLDERS": {
+      "SELECT_ROLE": "Select your role",
+      "ENTER_WEBSITE": "www.example.com",
+      "SELECT_LANGUAGE": "Select language",
+      "SELECT_TIMEZONE": "የሰዓት ክልል ይምረጡ",
+      "SELECT_COMPANY_SIZE": "Select company size",
+      "SELECT_INDUSTRY": "Select industry",
+      "SELECT_REFERRAL_SOURCE": "Select source"
+    },
+    "EMAIL_VERIFIED": "Email verified",
+    "SETTING_UP": "Setting up your account...",
+    "CONTINUE": "ቀጥል",
+    "SAVING": "እየተቀማጭ ነው...",
+    "VALIDATION_ERROR": "Please fill in all required fields",
+    "SUCCESS": "Details saved successfully",
+    "ERROR": "Could not save details. Please try again."
+  }
+}

app/javascript/dashboard/i18n/locale/ar/attributesMgmt.json

@@ -10,7 +10,8 @@
     "NO_RESULTS": "No attributes found matching your search",
     "ATTRIBUTE_MODELS": {
       "CONVERSATION": "المحادثات",
-      "CONTACT": "جهات الاتصال"
+      "CONTACT": "جهات الاتصال",
+      "COMPANY": "المنشأة"
     },
     "ATTRIBUTE_TYPES": {
       "TEXT": "النص",
@@ -108,7 +109,8 @@
     "TABS": {
       "HEADER": "صفات مخصصة",
       "CONVERSATION": "المحادثات",
-      "CONTACT": "جهات الاتصال"
+      "CONTACT": "جهات الاتصال",
+      "COMPANY": "المنشأة"
     },
     "LIST": {
       "TABLE_HEADER": {

app/javascript/dashboard/i18n/locale/ar/automation.json

@@ -130,6 +130,7 @@
       "ATLEAST_ONE_ACTION_REQUIRED": "إجراء واحد على الأقل مطلوب"
     },
     "NONE_OPTION": "لا شيء",
+    "LAST_RESPONDING_AGENT": "آخر وكيل قام بالرد",
     "EVENTS": {
       "CONVERSATION_CREATED": "تم إنشاء المحادثة",
       "CONVERSATION_UPDATED": "تم تحديث المحادثة",
@@ -181,6 +182,7 @@
       "BROWSER_LANGUAGE": "لغة المتصفح",
       "MAIL_SUBJECT": "Email Subject",
       "COUNTRY_NAME": "الدولة",
+      "COMPANY_NAME": "المنشأة",
       "REFERER_LINK": "Referrer Link",
       "ASSIGNEE_NAME": "المكلَّف",
       "TEAM_NAME": "الفريق",

app/javascript/dashboard/i18n/locale/ar/bulkActions.json

@@ -6,7 +6,12 @@
     "UNASSIGN_CONFIRMATION_LABEL": "هل أنت متأكد من إلغاء تعيين {conversationCount} {conversationLabel}؟",
     "GO_BACK_LABEL": "العودة للخلف",
     "ASSIGN_LABEL": "تكليف",
+    "NONE": "لا شيء",
+    "CLEAR_SELECTION": "مسح",
+    "ASSIGN_AGENT_CONFIRMATION_LABEL": "Are you sure you want to assign {n} conversation to {agentName}? | Are you sure you want to assign {n} conversations to {agentName}?",
+    "UNASSIGN_AGENT_CONFIRMATION_LABEL": "Are you sure you want to unassign {n} conversation? | Are you sure you want to unassign {n} conversations?",
     "YES": "نعم",
+    "CANCEL": "إلغاء",
     "SEARCH_INPUT_PLACEHOLDER": "بحث",
     "ASSIGN_AGENT_TOOLTIP": "تعيين وكيل",
     "ASSIGN_TEAM_TOOLTIP": "تعيين فريق",
@@ -38,6 +43,8 @@
       "NONE": "لا شيء",
       "NO_TEAMS_AVAILABLE": "لا توجد فرق مضافة إلى هذا الحساب حتى الآن.",
       "ASSIGN_SELECTED_TEAMS": "تعيين فريق محدد.",
+      "ASSIGN_TEAM_CONFIRMATION_LABEL": "Are you sure you want to assign {n} conversation to {teamName}? | Are you sure you want to assign {n} conversations to {teamName}?",
+      "UNASSIGN_TEAM_CONFIRMATION_LABEL": "Are you sure you want to unassign {n} conversation? | Are you sure you want to unassign {n} conversations?",
       "ASSIGN_SUCCESFUL": "تم تعيين الفرق بنجاح.",
       "ASSIGN_FAILED": "فشل تعيين الفريق، الرجاء المحاولة مرة أخرى."
     }

app/javascript/dashboard/i18n/locale/ar/chatlist.json

@@ -140,6 +140,7 @@
     "HIDE_QUOTED_TEXT": "إخفاء النص المقتبس",
     "SHOW_QUOTED_TEXT": "إظهار النص المقتبس",
     "MESSAGE_READ": "قراءة",
-    "SENDING": "Sending"
+    "SENDING": "Sending",
+    "UNREAD_COUNT_OVERFLOW": "9+"
   }
 }

app/javascript/dashboard/i18n/locale/ar/companies.json

@@ -7,6 +7,7 @@
         "NAME": "الاسم",
         "DOMAIN": "النطاق",
         "CREATED_AT": "تم إنشاؤها في",
+        "LAST_ACTIVITY_AT": "آخر نشاط",
         "CONTACTS_COUNT": "عدد جهات الاتصال"
       }
     },
@@ -21,6 +22,121 @@
     "LOADING": "جاري تحميل الشركات...",
     "UNNAMED": "شركة بلا اسم",
     "CONTACTS_COUNT": "جهة اتصال {n} | {n} جهات الاتصال",
+    "ACTIONS": {
+      "CREATE": "Add company"
+    },
+    "CREATE": {
+      "TITLE": "Add company details",
+      "ACTIONS": {
+        "SAVE": "Add company"
+      },
+      "MESSAGES": {
+        "SUCCESS": "Company created.",
+        "ERROR": "Could not create the company."
+      }
+    },
+    "DETAIL": {
+      "LOADING": "Loading company details...",
+      "EMPTY_STATE": {
+        "TITLE": "Company not found",
+        "SUBTITLE": "This company may have been removed or is no longer available in this account."
+      },
+      "SIDEBAR": {
+        "TABS": {
+          "ATTRIBUTES": "السمات",
+          "CONTACTS": "جهات الاتصال",
+          "HISTORY": "History",
+          "NOTES": "ملاحظات"
+        }
+      },
+      "HISTORY": {
+        "EMPTY": "No conversations found for this company's contacts yet."
+      },
+      "NOTES": {
+        "EMPTY": "No notes found for this company's contacts yet."
+      },
+      "ATTRIBUTES": {
+        "SEARCH_PLACEHOLDER": "البحث عن صفات...",
+        "EMPTY_STATE": "There are no company custom attributes configured yet.",
+        "NO_ATTRIBUTES": "No matching attributes found.",
+        "UNUSED_ATTRIBUTES": "{count} unused attribute | {count} unused attributes",
+        "MESSAGES": {
+          "UPDATE_SUCCESS": "Company attribute updated.",
+          "UPDATE_ERROR": "Could not update company attribute.",
+          "DELETE_SUCCESS": "Company attribute removed.",
+          "DELETE_ERROR": "Could not remove company attribute."
+        }
+      },
+      "CONTACTS": {
+        "LOADING": "جاري جلب جهات الاتصال...",
+        "EMPTY": "No contacts are linked to this company yet.",
+        "UNNAMED_CONTACT": "Unnamed contact",
+        "ACTIONS": {
+          "ADD": "Add contact",
+          "REMOVE": "Remove contact"
+        },
+        "DIALOGS": {
+          "ADD": {
+            "DESCRIPTION": "Search for an existing contact and link it to this company.",
+            "SEARCH_PLACEHOLDER": "Search contacts...",
+            "INITIAL": "Start typing to search contacts.",
+            "EMPTY": "No contacts found.",
+            "CONFIRM_TITLE": "Link contact",
+            "CONFIRM_DESCRIPTION": "Confirm the company and contact before linking them.",
+            "COMPANY_LABEL": "المنشأة",
+            "CONTACT_LABEL": "جهات الاتصال",
+            "CURRENT_COMPANY": "Currently linked to {companyName}",
+            "ADD": "Link contact",
+            "CANCEL": "إلغاء"
+          }
+        },
+        "MESSAGES": {
+          "ADD_SUCCESS": "Contact linked to company.",
+          "ADD_ERROR": "Could not link contact to company.",
+          "REASSIGN_SUCCESS": "Contact reassigned to company.",
+          "REASSIGN_ERROR": "Could not reassign contact to company.",
+          "REMOVE_SUCCESS": "Contact removed from company.",
+          "REMOVE_ERROR": "Could not remove contact from company."
+        }
+      },
+      "AVATAR": {
+        "UPDATING": "Updating company avatar...",
+        "UPLOAD_SUCCESS": "Company avatar updated.",
+        "UPLOAD_ERROR": "Could not update the company avatar.",
+        "DELETE_SUCCESS": "Company avatar removed.",
+        "DELETE_ERROR": "Could not remove the company avatar."
+      },
+      "PROFILE": {
+        "TITLE": "Edit company details",
+        "CREATED_AT": "Created {date}",
+        "LAST_ACTIVE": "Last active {date}",
+        "DESCRIPTION_PLACEHOLDER": "Add a short description for this company",
+        "ACTIONS": {
+          "SAVE": "Update company"
+        },
+        "MESSAGES": {
+          "UPDATE_SUCCESS": "Company updated.",
+          "UPDATE_ERROR": "Could not update the company."
+        },
+        "FIELDS": {
+          "NAME": "الاسم",
+          "DOMAIN": "النطاق"
+        }
+      },
+      "DELETE": {
+        "SECTION_TITLE": "Danger zone",
+        "SECTION_DESCRIPTION": "Delete this company and unlink its contacts. The contacts will remain in the account.",
+        "BUTTON": "Delete company",
+        "TITLE": "Delete company?",
+        "DESCRIPTION": "This will remove the company and unlink all associated contacts. Contacts themselves will be preserved.",
+        "DESCRIPTION_WITH_NAME": "This will remove {companyName} and unlink all associated contacts. Contacts themselves will be preserved.",
+        "CONFIRM": "Delete company",
+        "MESSAGES": {
+          "SUCCESS": "Company deleted.",
+          "ERROR": "Could not delete the company."
+        }
+      }
+    },
     "EMPTY_STATE": {
       "TITLE": "لم يتم العثور على شركات"
     }

app/javascript/dashboard/i18n/locale/ar/contact.json

@@ -386,6 +386,7 @@
       "IDENTIFIER": "المعرف",
       "COUNTRY": "الدولة",
       "CITY": "المدينة",
+      "COMPANY": "المنشأة",
       "CREATED_AT": "تم إنشاؤها في",
       "LAST_ACTIVITY": "آخر نشاط",
       "REFERER_LINK": "رابط المرجع",

app/javascript/dashboard/i18n/locale/ar/conversation.json

@@ -71,7 +71,8 @@
     "REPLY_MESSAGE_NOT_FOUND": "الرسالة غير متوفرة",
     "CARD": {
       "SHOW_LABELS": "إظهار السمات",
-      "HIDE_LABELS": "إخفاء السمات"
+      "HIDE_LABELS": "إخفاء السمات",
+      "LABELS_COUNT": "{count} علامة"
     },
     "VOICE_CALL": {
       "INCOMING_CALL": "Incoming call",
@@ -82,7 +83,9 @@
       "CALL_ENDED": "Call ended",
       "NOT_ANSWERED_YET": "Not answered yet",
       "THEY_ANSWERED": "They answered",
-      "YOU_ANSWERED": "You answered"
+      "YOU_ANSWERED": "You answered",
+      "AGENT_ANSWERED": "{agentName} answered",
+      "JOIN_CALL": "انضم إلى المكالمة"
     },
     "HEADER": {
       "RESOLVE_ACTION": "حل المحادثة",
@@ -92,6 +95,7 @@
       "OPEN": "المزيد",
       "CLOSE": "أغلق",
       "DETAILS": "التفاصيل",
+      "COPY_ID_SUCCESS": "Conversation ID copied to clipboard",
       "SNOOZED_UNTIL": "غفوة حتى",
       "SNOOZED_UNTIL_TOMORROW": "تأجيل حتى الغد",
       "SNOOZED_UNTIL_NEXT_WEEK": "تأجيل حتى الأسبوع القادم",
@@ -362,7 +366,19 @@
       "PREVIOUS_CONVERSATION": "المحادثات السابقة",
       "MACROS": "ماكروس",
       "LINEAR_ISSUES": "Linked Linear Issues",
-      "SHOPIFY_ORDERS": "Shopify Orders"
+      "SHOPIFY_ORDERS": "Shopify Orders",
+      "SHARED_FILES": "Attachments"
+    },
+    "SHARED_FILES": {
+      "EMPTY": "No attachments yet",
+      "DOWNLOAD": "Download file",
+      "DOWNLOAD_ERROR": "Could not download the file. Please try again.",
+      "MEDIA_HEADING": "Media",
+      "FILES_HEADING": "Files",
+      "VIEW_ALL": "عرض الكل",
+      "SHOW_LESS": "Show less",
+      "MORE_COUNT": "+{count}",
+      "UNTITLED_FILE": "Untitled file"
     },
     "SHOPIFY": {
       "ORDER_ID": "Order #{id}",