do not send notifications for failed messages

We are expanding Chatwoot’s automation capabilities by
introducing **Conversation Workflows**, a dedicated section in settings
where teams can configure rules that govern how conversations are closed
and what information agents must fill before resolving. This feature
helps teams enforce data consistency, collect structured resolution
information, and ensure downstream reporting is accurate.

Instead of having auto‑resolution buried inside Account Settings, we
introduced a new sidebar item:
- Auto‑resolve conversations (existing behaviour)
- Required attributes on resolution (new)

This groups all conversation‑closing logic into a single place.

#### Required Attributes on Resolve

Admins can now pick which custom conversation attributes must be filled
before an agent can resolve a conversation.

**How it works**

- Admin selects one or more attributes from the list of existing
conversation level custom attributes.
- These selected attributes become mandatory during resolution.
- List all the attributes configured via Required Attributes (Text,
Number, Link, Date, List, Checkbox)
- When an agent clicks Resolve Conversation:
If attributes already have values → the conversation resolves normally.
If attributes are missing → a modal appears prompting the agent to fill
them.

<img width="1554" height="1282" alt="CleanShot 2025-12-10 at 11 42
23@2x"
src="https://github.com/user-attachments/assets/4cd5d6e1-abe8-4999-accd-d4a08913b373"
/>


#### Custom Attributes Integration

On the Custom Attributes page, we will surfaced indicators showing how
each attribute is being used.

Each attribute will show badges such as:

- Resolution → used in the required‑on‑resolve workflow

- Pre‑chat form → already existing

<img width="2390" height="1822" alt="CleanShot 2025-12-10 at 11 43
42@2x"
src="https://github.com/user-attachments/assets/b92a6eb7-7f6c-40e6-bf23-6a5310f2d9c5"
/>


#### Admin Flow

- Navigate to Settings → Conversation Workflows.
- Under Required attributes on resolve, click Add Required Attribute.
- Pick from the dropdown list of conversation attributes.
- Save changes.

Agents will now be prompted automatically whenever they resolve.

<img width="2434" height="872" alt="CleanShot 2025-12-10 at 11 44 42@2x"
src="https://github.com/user-attachments/assets/632fc0e5-767c-4a1c-8cf4-ffe3d058d319"
/>



#### NOTES
- The Required Attributes on Resolve modal should only appear when
values are missing.
- Required attributes must block the resolution action until satisfied.
- Bulk‑resolve actions should follow the same rules — any conversation
missing attributes cannot be bulk‑resolved, rest will be resolved, show
a notification that the resolution cannot be done.
- API resolution does not respect the attributes.

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>

.circleci/config.yml

@@ -76,7 +76,7 @@ jobs:
             bundle install
 
       - node/install:
-          node-version: '23.7'
+          node-version: '24.13'
       - node/install-pnpm
       - node/install-packages:
           pkg-manager: pnpm
@@ -117,7 +117,7 @@ jobs:
     steps:
       - checkout
       - node/install:
-          node-version: '23.7'
+          node-version: '24.13'
       - node/install-pnpm
       - node/install-packages:
           pkg-manager: pnpm
@@ -148,7 +148,7 @@ jobs:
     steps:
       - checkout
       - node/install:
-          node-version: '23.7'
+          node-version: '24.13'
       - node/install-pnpm
       - node/install-packages:
           pkg-manager: pnpm
@@ -218,6 +218,49 @@ jobs:
             source ~/.rvm/scripts/rvm
             bundle install
 
+      # Install and configure OpenSearch
+      - run:
+          name: Install OpenSearch
+          command: |
+            # Download and install OpenSearch 2.11.0 (compatible with Elasticsearch 7.x clients)
+            wget https://artifacts.opensearch.org/releases/bundle/opensearch/2.11.0/opensearch-2.11.0-linux-x64.tar.gz
+            tar -xzf opensearch-2.11.0-linux-x64.tar.gz
+            sudo mv opensearch-2.11.0 /opt/opensearch
+
+      - run:
+          name: Configure and Start OpenSearch
+          command: |
+            # Configure OpenSearch for single-node testing
+            cat > /opt/opensearch/config/opensearch.yml \<< EOF
+            cluster.name: chatwoot-test
+            node.name: node-1
+            network.host: 0.0.0.0
+            http.port: 9200
+            discovery.type: single-node
+            plugins.security.disabled: true
+            EOF
+
+            # Set ownership and permissions
+            sudo chown -R $USER:$USER /opt/opensearch
+
+            # Start OpenSearch in background
+            /opt/opensearch/bin/opensearch -d -p /tmp/opensearch.pid
+
+      - run:
+          name: Wait for OpenSearch to be ready
+          command: |
+            echo "Waiting for OpenSearch to start..."
+            for i in {1..30}; do
+              if curl -s http://localhost:9200/_cluster/health | grep -q '"status"'; then
+                echo "OpenSearch is ready!"
+                exit 0
+              fi
+              echo "Waiting... ($i/30)"
+              sleep 2
+            done
+            echo "OpenSearch failed to start"
+            exit 1
+
       # Configure environment and database
       - run:
           name: Database Setup and Configure Environment Variables
@@ -234,6 +277,7 @@ jobs:
             sed -i -e '/POSTGRES_USERNAME/ s/=.*/=chatwoot/' .env
             sed -i -e "/POSTGRES_PASSWORD/ s/=.*/=$pg_pass/" .env
             echo -en "\nINSTALLATION_ENV=circleci" >> ".env"
+            echo -en "\nOPENSEARCH_URL=http://localhost:9200" >> ".env"
 
       # Database setup
       - run:

.devcontainer/docker-compose.base.yml

@@ -10,7 +10,7 @@ services:
       dockerfile: .devcontainer/Dockerfile.base
       args:
         VARIANT: 'ubuntu-22.04'
-        NODE_VERSION: '23.7.0'
+        NODE_VERSION: '24.13.0'
         RUBY_VERSION: '3.4.4'
         # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
         USER_UID: '1000'

.devcontainer/docker-compose.yml

@@ -11,7 +11,7 @@ services:
       dockerfile: .devcontainer/Dockerfile
       args:
         VARIANT: 'ubuntu-22.04'
-        NODE_VERSION: '23.7.0'
+        NODE_VERSION: '24.13.0'
         RUBY_VERSION: '3.4.4'
         # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
         USER_UID: '1000'

.env.example

@@ -274,3 +274,5 @@ AZURE_APP_SECRET=
 # Set to true if you want to remove stale contact inboxes
 # contact_inboxes with no conversation older than 90 days will be removed
 # REMOVE_STALE_CONTACT_INBOX_JOB_STATUS=false
+
+# REDIS_ALFRED_SIZE=10

.github/workflows/frontend-fe.yml

@@ -26,7 +26,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 23
+          node-version: 24
           cache: 'pnpm'
 
       - name: Install pnpm dependencies

.github/workflows/run_foss_spec.yml

@@ -28,7 +28,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 23
+          node-version: 24
           cache: 'pnpm'
       - name: Install pnpm dependencies
         run: pnpm i
@@ -43,7 +43,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 23
+          node-version: 24
           cache: 'pnpm'
       - name: Install pnpm dependencies
         run: pnpm i
@@ -94,7 +94,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 23
+          node-version: 24
           cache: 'pnpm'
 
       - name: Install pnpm dependencies

.github/workflows/size-limit.yml

@@ -28,7 +28,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 23
+          node-version: 24
           cache: 'pnpm'
 
       - name: pnpm

.nvmrc

@@ -1 +1 @@
-23.7.0
+24.13.0

AGENTS.md

@@ -47,6 +47,13 @@
 - Avoid writing specs unless explicitly asked
 - Remove dead/unreachable/unused code
 - Don’t write multiple versions or backups for the same logic — pick the best approach and implement it
+- Prefer `with_modified_env` (from spec helpers) over stubbing `ENV` directly in specs
+- Specs in parallel/reloading environments: prefer comparing `error.class.name` over constant class equality when asserting raised errors
+
+## Commit Messages
+
+- Prefer Conventional Commits: `type(scope): subject` (scope optional)
+- Example: `feat(auth): add user authentication`
 - Don't reference Claude in commit messages
 
 ## Project-Specific
@@ -78,3 +85,4 @@ Practical checklist for any change impacting core logic or public APIs
 - Keep request/response contracts stable across OSS and Enterprise; update both sets of routes/controllers when introducing new APIs.
 - When renaming/moving shared code, mirror the change in `enterprise/` to prevent drift.
 - Tests: Add Enterprise-specific specs under `spec/enterprise`, mirroring OSS spec layout where applicable.
+- When modifying existing OSS features for Enterprise-only behavior, add an Enterprise module (via `prepend_mod_with`/`include_mod_with`) instead of editing OSS files directly—especially for policies, controllers, and services. For Enterprise-exclusive features, place code directly under `enterprise/`.

Gemfile.lock

@@ -140,24 +140,27 @@ GEM
       actionmailbox (>= 7.1.0)
       aws-sdk-s3 (~> 1, >= 1.123.0)
       aws-sdk-sns (~> 1, >= 1.61.0)
-    aws-eventstream (1.2.0)
-    aws-partitions (1.760.0)
-    aws-sdk-core (3.188.0)
-      aws-eventstream (~> 1, >= 1.0.2)
-      aws-partitions (~> 1, >= 1.651.0)
-      aws-sigv4 (~> 1.5)
+    aws-eventstream (1.4.0)
+    aws-partitions (1.1198.0)
+    aws-sdk-core (3.240.0)
+      aws-eventstream (~> 1, >= 1.3.0)
+      aws-partitions (~> 1, >= 1.992.0)
+      aws-sigv4 (~> 1.9)
+      base64
+      bigdecimal
       jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.64.0)
-      aws-sdk-core (~> 3, >= 3.165.0)
-      aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.126.0)
-      aws-sdk-core (~> 3, >= 3.174.0)
+      logger
+    aws-sdk-kms (1.118.0)
+      aws-sdk-core (~> 3, >= 3.239.1)
+      aws-sigv4 (~> 1.5)
+    aws-sdk-s3 (1.208.0)
+      aws-sdk-core (~> 3, >= 3.234.0)
       aws-sdk-kms (~> 1)
-      aws-sigv4 (~> 1.4)
+      aws-sigv4 (~> 1.5)
     aws-sdk-sns (1.70.0)
       aws-sdk-core (~> 3, >= 3.188.0)
       aws-sigv4 (~> 1.1)
-    aws-sigv4 (1.5.2)
+    aws-sigv4 (1.12.1)
       aws-eventstream (~> 1, >= 1.0.2)
     barnes (0.0.9)
       multi_json (~> 1)
@@ -438,7 +441,8 @@ GEM
     http-cookie (1.0.5)
       domain_name (~> 0.5)
     http-form_data (2.3.0)
-    httparty (0.21.0)
+    httparty (0.24.0)
+      csv
       mini_mime (>= 1.0.0)
       multi_xml (>= 0.5.2)
     httpclient (2.8.3)
@@ -552,7 +556,8 @@ GEM
       ruby2_keywords
     msgpack (1.8.0)
     multi_json (1.15.0)
-    multi_xml (0.6.0)
+    multi_xml (0.8.0)
+      bigdecimal (>= 3.1, < 5)
     multipart-post (2.3.0)
     mutex_m (0.3.0)
     neighbor (0.2.3)

README.md

@@ -8,7 +8,6 @@ ___
 The modern customer support platform, an open-source alternative to Intercom, Zendesk, Salesforce Service Cloud etc.
 
 <p>
-  <a href="https://codeclimate.com/github/chatwoot/chatwoot/maintainability"><img src="https://api.codeclimate.com/v1/badges/e6e3f66332c91e5a4c0c/maintainability" alt="Maintainability"></a>
   <img src="https://img.shields.io/circleci/build/github/chatwoot/chatwoot" alt="CircleCI Badge">
     <a href="https://hub.docker.com/r/chatwoot/chatwoot/"><img src="https://img.shields.io/docker/pulls/chatwoot/chatwoot" alt="Docker Pull Badge"></a>
   <a href="https://hub.docker.com/r/chatwoot/chatwoot/"><img src="https://img.shields.io/docker/cloud/build/chatwoot/chatwoot" alt="Docker Build Badge"></a>
@@ -137,4 +136,4 @@ Thanks goes to all these [wonderful people](https://www.chatwoot.com/docs/contri
 <a href="https://github.com/chatwoot/chatwoot/graphs/contributors"><img src="https://opencollective.com/chatwoot/contributors.svg?width=890&button=false" /></a>
 
 
-*Chatwoot* &copy; 2017-2025, Chatwoot Inc - Released under the MIT License.
+*Chatwoot* &copy; 2017-2026, Chatwoot Inc - Released under the MIT License.

VERSION_CW

@@ -1 +1 @@
-4.8.0
+4.10.1

VERSION_CWCTL

@@ -1 +1 @@
-3.4.3
+3.5.0

app/builders/v2/reports/channel_summary_builder.rb

@@ -0,0 +1,38 @@
+class V2::Reports::ChannelSummaryBuilder
+  include DateRangeHelper
+
+  pattr_initialize [:account!, :params!]
+
+  def build
+    conversations_by_channel_and_status.transform_values { |status_counts| build_channel_stats(status_counts) }
+  end
+
+  private
+
+  def conversations_by_channel_and_status
+    account.conversations
+           .joins(:inbox)
+           .where(created_at: range)
+           .group('inboxes.channel_type', 'conversations.status')
+           .count
+           .each_with_object({}) do |((channel_type, status), count), grouped|
+      grouped[channel_type] ||= {}
+      grouped[channel_type][status] = count
+    end
+  end
+
+  def build_channel_stats(status_counts)
+    open_count = status_counts['open'] || 0
+    resolved_count = status_counts['resolved'] || 0
+    pending_count = status_counts['pending'] || 0
+    snoozed_count = status_counts['snoozed'] || 0
+
+    {
+      open: open_count,
+      resolved: resolved_count,
+      pending: pending_count,
+      snoozed: snoozed_count,
+      total: open_count + resolved_count + pending_count + snoozed_count
+    }
+  end
+end

app/builders/year_in_review_builder.rb

@@ -0,0 +1,74 @@
+class YearInReviewBuilder
+  attr_reader :account, :user_id, :year
+
+  def initialize(account:, user_id:, year:)
+    @account = account
+    @user_id = user_id
+    @year = year
+  end
+
+  def build
+    {
+      year: year,
+      total_conversations: total_conversations_count,
+      busiest_day: busiest_day_data,
+      support_personality: support_personality_data
+    }
+  end
+
+  private
+
+  def year_range
+    @year_range ||= begin
+      start_time = Time.zone.local(year, 1, 1).beginning_of_day
+      end_time = Time.zone.local(year, 12, 31).end_of_day
+      start_time..end_time
+    end
+  end
+
+  def total_conversations_count
+    account.conversations
+           .where(assignee_id: user_id, created_at: year_range)
+           .count
+  end
+
+  def busiest_day_data
+    daily_counts = account.conversations
+                          .where(assignee_id: user_id, created_at: year_range)
+                          .group_by_day(:created_at, range: year_range, time_zone: Time.zone)
+                          .count
+
+    return nil if daily_counts.empty?
+
+    busiest_date, count = daily_counts.max_by { |_date, cnt| cnt }
+
+    return nil if count.zero?
+
+    {
+      date: busiest_date.strftime('%b %d'),
+      count: count
+    }
+  end
+
+  def support_personality_data
+    response_time = average_response_time
+
+    return { avg_response_time_seconds: 0 } if response_time.nil?
+
+    {
+      avg_response_time_seconds: response_time.to_i
+    }
+  end
+
+  def average_response_time
+    avg_time = account.reporting_events
+                      .where(
+                        name: 'first_response',
+                        user_id: user_id,
+                        created_at: year_range
+                      )
+                      .average(:value)
+
+    avg_time&.to_f
+  end
+end

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

@@ -1,4 +1,6 @@
 class Api::V1::Accounts::AutomationRulesController < Api::V1::Accounts::BaseController
+  include AttachmentConcern
+
   before_action :check_authorization
   before_action :fetch_automation_rule, only: [:show, :update, :destroy, :clone]
 
@@ -9,25 +11,32 @@ class Api::V1::Accounts::AutomationRulesController < Api::V1::Accounts::BaseCont
   def show; end
 
   def create
+    blobs, actions, error = validate_and_prepare_attachments(params[:actions])
+    return render_could_not_create_error(error) if error
+
     @automation_rule = Current.account.automation_rules.new(automation_rules_permit)
-    @automation_rule.actions = params[:actions]
+    @automation_rule.actions = actions
     @automation_rule.conditions = params[:conditions]
 
-    render json: { error: @automation_rule.errors.messages }, status: :unprocessable_entity and return unless @automation_rule.valid?
+    return render_could_not_create_error(@automation_rule.errors.messages) unless @automation_rule.valid?
 
     @automation_rule.save!
-    process_attachments
-    @automation_rule
+    blobs.each { |blob| @automation_rule.files.attach(blob) }
   end
 
   def update
-    ActiveRecord::Base.transaction do
-      automation_rule_update
-      process_attachments
+    blobs, actions, error = validate_and_prepare_attachments(params[:actions], @automation_rule)
+    return render_could_not_create_error(error) if error
 
+    ActiveRecord::Base.transaction do
+      @automation_rule.assign_attributes(automation_rules_permit)
+      @automation_rule.actions = actions if params[:actions]
+      @automation_rule.conditions = params[:conditions] if params[:conditions]
+      @automation_rule.save!
+      blobs.each { |blob| @automation_rule.files.attach(blob) }
     rescue StandardError => e
       Rails.logger.error e
-      render json: { error: @automation_rule.errors.messages }.to_json, status: :unprocessable_entity
+      render_could_not_create_error(@automation_rule.errors.messages)
     end
   end
 
@@ -43,29 +52,11 @@ class Api::V1::Accounts::AutomationRulesController < Api::V1::Accounts::BaseCont
     @automation_rule = new_rule
   end
 
-  def process_attachments
-    actions = @automation_rule.actions.filter_map { |k, _v| k if k['action_name'] == 'send_attachment' }
-    return if actions.blank?
-
-    actions.each do |action|
-      blob_id = action['action_params']
-      blob = ActiveStorage::Blob.find_by(id: blob_id)
-      @automation_rule.files.attach(blob)
-    end
-  end
-
   private
 
-  def automation_rule_update
-    @automation_rule.update!(automation_rules_permit)
-    @automation_rule.actions = params[:actions] if params[:actions]
-    @automation_rule.conditions = params[:conditions] if params[:conditions]
-    @automation_rule.save!
-  end
-
   def automation_rules_permit
     params.permit(
-      :name, :description, :event_name, :account_id, :active,
+      :name, :description, :event_name, :active,
       conditions: [:attribute_key, :filter_operator, :query_operator, :custom_attribute_type, { values: [] }],
       actions: [:action_name, { action_params: [] }]
     )

app/controllers/api/v1/accounts/captain/preferences_controller.rb

@@ -0,0 +1,76 @@
+class Api::V1::Accounts::Captain::PreferencesController < Api::V1::Accounts::BaseController
+  before_action :current_account
+  before_action :authorize_account_update, only: [:update]
+
+  def show
+    render json: preferences_payload
+  end
+
+  def update
+    params_to_update = captain_params
+    @current_account.captain_models = params_to_update[:captain_models] if params_to_update[:captain_models]
+    @current_account.captain_features = params_to_update[:captain_features] if params_to_update[:captain_features]
+    @current_account.save!
+
+    render json: preferences_payload
+  end
+
+  private
+
+  def preferences_payload
+    {
+      providers: Llm::Models.providers,
+      models: Llm::Models.models,
+      features: features_with_account_preferences
+    }
+  end
+
+  def authorize_account_update
+    authorize @current_account, :update?
+  end
+
+  def captain_params
+    permitted = {}
+    permitted[:captain_models] = merged_captain_models if params[:captain_models].present?
+    permitted[:captain_features] = merged_captain_features if params[:captain_features].present?
+    permitted
+  end
+
+  def merged_captain_models
+    existing_models = @current_account.captain_models || {}
+    existing_models.merge(permitted_captain_models)
+  end
+
+  def merged_captain_features
+    existing_features = @current_account.captain_features || {}
+    existing_features.merge(permitted_captain_features)
+  end
+
+  def permitted_captain_models
+    params.require(:captain_models).permit(
+      :editor, :assistant, :copilot, :label_suggestion,
+      :audio_transcription, :help_center_search
+    ).to_h.stringify_keys
+  end
+
+  def permitted_captain_features
+    params.require(:captain_features).permit(
+      :editor, :assistant, :copilot, :label_suggestion,
+      :audio_transcription, :help_center_search
+    ).to_h.stringify_keys
+  end
+
+  def features_with_account_preferences
+    preferences = Current.account.captain_preferences
+    account_features = preferences[:features] || {}
+    account_models = preferences[:models] || {}
+
+    Llm::Models.feature_keys.index_with do |feature_key|
+      config = Llm::Models.feature_config(feature_key)
+      config.merge(
+        enabled: account_features[feature_key] == true,
+        selected: account_models[feature_key] || config[:default]
+      )
+    end
+  end
+end

app/controllers/api/v1/accounts/channels/twilio_channels_controller.rb

@@ -64,7 +64,7 @@ class Api::V1::Accounts::Channels::TwilioChannelsController < Api::V1::Accounts:
 
   def permitted_params
     params.require(:twilio_channel).permit(
-      :account_id, :messaging_service_sid, :phone_number, :account_sid, :auth_token, :name, :medium, :api_key_sid
+      :messaging_service_sid, :phone_number, :account_sid, :auth_token, :name, :medium, :api_key_sid
     )
   end
 end

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

@@ -24,9 +24,8 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   def search
     render json: { error: 'Specify search string with parameter q' }, status: :unprocessable_entity if params[:q].blank? && return
 
-    contacts = resolved_contacts.where(
-      'name ILIKE :search OR email ILIKE :search OR phone_number ILIKE :search OR contacts.identifier LIKE :search
-        OR contacts.additional_attributes->>\'company_name\' ILIKE :search',
+    contacts = Current.account.contacts.where(
+      'name ILIKE :search OR email ILIKE :search OR phone_number ILIKE :search OR contacts.identifier LIKE :search',
       search: "%#{params[:q].strip}%"
     )
     @contacts = fetch_contacts(contacts)

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

@@ -110,6 +110,15 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   end
 
   def update_last_seen
+    # High-traffic accounts generate excessive DB writes when agents frequently switch between conversations.
+    # Throttle last_seen updates to once per hour when there are no unread messages to reduce DB load.
+    # Always update immediately if there are unread messages to maintain accurate read/unread state.
+    return update_last_seen_on_conversation(DateTime.now.utc, true) if assignee? && @conversation.assignee_unread_messages.any?
+    return update_last_seen_on_conversation(DateTime.now.utc, false) if !assignee? && @conversation.unread_messages.any?
+
+    # No unread messages - apply throttling to limit DB writes
+    return unless should_update_last_seen?
+
     update_last_seen_on_conversation(DateTime.now.utc, assignee?)
   end
 
@@ -142,12 +151,25 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   end
 
   def update_last_seen_on_conversation(last_seen_at, update_assignee)
+    updates = { agent_last_seen_at: last_seen_at }
+    updates[:assignee_last_seen_at] = last_seen_at if update_assignee.present?
+
     # rubocop:disable Rails/SkipsModelValidations
-    @conversation.update_column(:agent_last_seen_at, last_seen_at)
-    @conversation.update_column(:assignee_last_seen_at, last_seen_at) if update_assignee.present?
+    @conversation.update_columns(updates)
     # rubocop:enable Rails/SkipsModelValidations
   end
 
+  def should_update_last_seen?
+    # Update if at least one relevant timestamp is older than 1 hour or not set
+    # This prevents redundant DB writes when agents repeatedly view the same conversation
+    agent_needs_update = @conversation.agent_last_seen_at.blank? || @conversation.agent_last_seen_at < 1.hour.ago
+    return agent_needs_update unless assignee?
+
+    # For assignees, check both timestamps - update if either is old
+    assignee_needs_update = @conversation.assignee_last_seen_at.blank? || @conversation.assignee_last_seen_at < 1.hour.ago
+    agent_needs_update || assignee_needs_update
+  end
+
   def set_conversation_status
     @conversation.status = params[:status]
     @conversation.snoozed_until = parse_date_time(params[:snoozed_until].to_s) if params[:snoozed_until]

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

@@ -50,3 +50,5 @@ class Api::V1::Accounts::CsatSurveyResponsesController < Api::V1::Accounts::Base
     @current_page = params[:page] || 1
   end
 end
+
+Api::V1::Accounts::CsatSurveyResponsesController.prepend_mod_with('Api::V1::Accounts::CsatSurveyResponsesController')

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

@@ -1,38 +1,27 @@
 class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseController
-  DEFAULT_BUTTON_TEXT = 'Please rate us'.freeze
-  DEFAULT_LANGUAGE = 'en'.freeze
-
   before_action :fetch_inbox
   before_action :validate_whatsapp_channel
 
   def show
-    template = @inbox.csat_config&.dig('template')
-    return render json: { template_exists: false } unless template
+    service = CsatTemplateManagementService.new(@inbox)
+    result = service.template_status
 
-    template_name = template['name'] || Whatsapp::CsatTemplateNameService.csat_template_name(@inbox.id)
-    status_result = @inbox.channel.provider_service.get_template_status(template_name)
-
-    render_template_status_response(status_result, template_name)
-  rescue StandardError => e
-    Rails.logger.error "Error fetching CSAT template status: #{e.message}"
-    render json: { error: e.message }, status: :internal_server_error
+    if result[:service_error]
+      render json: { error: result[:service_error] }, status: :internal_server_error
+    else
+      render json: result
+    end
   end
 
   def create
     template_params = extract_template_params
     return render_missing_message_error if template_params[:message].blank?
 
-    # Delete existing template even though we are using a new one.
-    # We don't want too many templates in the business portfolio, but the create operation shouldn't fail if deletion fails.
-    delete_existing_template_if_needed
-
-    result = create_template_via_provider(template_params)
+    service = CsatTemplateManagementService.new(@inbox)
+    result = service.create_template(template_params)
     render_template_creation_result(result)
   rescue ActionController::ParameterMissing
     render json: { error: 'Template parameters are required' }, status: :unprocessable_entity
-  rescue StandardError => e
-    Rails.logger.error "Error creating CSAT template: #{e.message}"
-    render json: { error: 'Template creation failed' }, status: :internal_server_error
   end
 
   private
@@ -43,9 +32,9 @@ class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseC
   end
 
   def validate_whatsapp_channel
-    return if @inbox.whatsapp?
+    return if @inbox.whatsapp? || @inbox.twilio_whatsapp?
 
-    render json: { error: 'CSAT template operations only available for WhatsApp channels' },
+    render json: { error: 'CSAT template operations only available for WhatsApp and Twilio WhatsApp channels' },
            status: :bad_request
   end
 
@@ -57,35 +46,36 @@ class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseC
     render json: { error: 'Message is required' }, status: :unprocessable_entity
   end
 
-  def create_template_via_provider(template_params)
-    template_config = {
-      message: template_params[:message],
-      button_text: template_params[:button_text] || DEFAULT_BUTTON_TEXT,
-      base_url: ENV.fetch('FRONTEND_URL', 'http://localhost:3000'),
-      language: template_params[:language] || DEFAULT_LANGUAGE,
-      template_name: Whatsapp::CsatTemplateNameService.csat_template_name(@inbox.id)
-    }
-
-    @inbox.channel.provider_service.create_csat_template(template_config)
-  end
-
   def render_template_creation_result(result)
     if result[:success]
       render_successful_template_creation(result)
+    elsif result[:service_error]
+      render json: { error: result[:service_error] }, status: :internal_server_error
     else
       render_failed_template_creation(result)
     end
   end
 
   def render_successful_template_creation(result)
-    render json: {
-      template: {
-        name: result[:template_name],
-        template_id: result[:template_id],
-        status: 'PENDING',
-        language: result[:language] || DEFAULT_LANGUAGE
-      }
-    }, status: :created
+    if @inbox.twilio_whatsapp?
+      render json: {
+        template: {
+          friendly_name: result[:friendly_name],
+          content_sid: result[:content_sid],
+          status: result[:status] || 'pending',
+          language: result[:language] || 'en'
+        }
+      }, status: :created
+    else
+      render json: {
+        template: {
+          name: result[:template_name],
+          template_id: result[:template_id],
+          status: 'PENDING',
+          language: result[:language] || 'en'
+        }
+      }, status: :created
+    end
   end
 
   def render_failed_template_creation(result)
@@ -98,45 +88,6 @@ class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseC
     }, status: :unprocessable_entity
   end
 
-  def delete_existing_template_if_needed
-    template = @inbox.csat_config&.dig('template')
-    return true if template.blank?
-
-    template_name = template['name']
-    return true if template_name.blank?
-
-    template_status = @inbox.channel.provider_service.get_template_status(template_name)
-    return true unless template_status[:success]
-
-    deletion_result = @inbox.channel.provider_service.delete_csat_template(template_name)
-    if deletion_result[:success]
-      Rails.logger.info "Deleted existing CSAT template '#{template_name}' for inbox #{@inbox.id}"
-      true
-    else
-      Rails.logger.warn "Failed to delete existing CSAT template '#{template_name}' for inbox #{@inbox.id}: #{deletion_result[:response_body]}"
-      false
-    end
-  rescue StandardError => e
-    Rails.logger.error "Error during template deletion for inbox #{@inbox.id}: #{e.message}"
-    false
-  end
-
-  def render_template_status_response(status_result, template_name)
-    if status_result[:success]
-      render json: {
-        template_exists: true,
-        template_name: template_name,
-        status: status_result[:template][:status],
-        template_id: status_result[:template][:id]
-      }
-    else
-      render json: {
-        template_exists: false,
-        error: 'Template not found'
-      }
-    end
-  end
-
   def parse_whatsapp_error(response_body)
     return { user_message: nil, technical_details: nil } if response_body.blank?
 

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

@@ -176,7 +176,7 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
      :lock_to_single_conversation, :portal_id, :sender_name_type, :business_name,
      { csat_config: [:display_type, :message, :button_text, :language,
                      { survey_rules: [:operator, { values: [] }],
-                       template: [:name, :template_id, :created_at, :language] }] }]
+                       template: [:name, :template_id, :friendly_name, :content_sid, :approval_sid, :created_at, :language, :status] }] }]
   end
 
   def permitted_params(channel_attributes = [])

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

@@ -1,4 +1,6 @@
 class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
+  include AttachmentConcern
+
   before_action :fetch_macro, only: [:show, :update, :destroy, :execute]
   before_action :check_authorization, only: [:show, :update, :destroy, :execute]
 
@@ -11,26 +13,32 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
   end
 
   def create
+    blobs, actions, error = validate_and_prepare_attachments(params[:actions])
+    return render_could_not_create_error(error) if error
+
     @macro = Current.account.macros.new(macros_with_user.merge(created_by_id: current_user.id))
     @macro.set_visibility(current_user, permitted_params)
-    @macro.actions = params[:actions]
+    @macro.actions = actions
 
-    render json: { error: @macro.errors.messages }, status: :unprocessable_entity and return unless @macro.valid?
+    return render_could_not_create_error(@macro.errors.messages) unless @macro.valid?
 
     @macro.save!
-    process_attachments
-    @macro
+    blobs.each { |blob| @macro.files.attach(blob) }
   end
 
   def update
+    blobs, actions, error = validate_and_prepare_attachments(params[:actions], @macro)
+    return render_could_not_create_error(error) if error
+
     ActiveRecord::Base.transaction do
-      @macro.update!(macros_with_user)
+      @macro.assign_attributes(macros_with_user)
       @macro.set_visibility(current_user, permitted_params)
-      process_attachments
+      @macro.actions = actions if params[:actions]
       @macro.save!
+      blobs.each { |blob| @macro.files.attach(blob) }
     rescue StandardError => e
       Rails.logger.error e
-      render json: { error: @macro.errors.messages }.to_json, status: :unprocessable_entity
+      render_could_not_create_error(@macro.errors.messages)
     end
   end
 
@@ -47,20 +55,9 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
 
   private
 
-  def process_attachments
-    actions = @macro.actions.filter_map { |k, _v| k if k['action_name'] == 'send_attachment' }
-    return if actions.blank?
-
-    actions.each do |action|
-      blob_id = action['action_params']
-      blob = ActiveStorage::Blob.find_by(id: blob_id)
-      @macro.files.attach(blob)
-    end
-  end
-
   def permitted_params
     params.permit(
-      :name, :account_id, :visibility,
+      :name, :visibility,
       actions: [:action_name, { action_params: [] }]
     )
   end

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

@@ -62,7 +62,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
 
   def process_attached_logo
     blob_id = params[:blob_id]
-    blob = ActiveStorage::Blob.find_by(id: blob_id)
+    blob = ActiveStorage::Blob.find_signed(blob_id)
     @portal.logo.attach(blob)
   end
 
@@ -78,7 +78,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
 
   def portal_params
     params.require(:portal).permit(
-      :id, :account_id, :color, :custom_domain, :header_text, :homepage_link,
+      :id, :color, :custom_domain, :header_text, :homepage_link,
       :name, :page_title, :slug, :archived, { config: [:default_locale, { allowed_locales: [] }] }
     )
   end

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

@@ -28,5 +28,7 @@ class Api::V1::Accounts::SearchController < Api::V1::Accounts::BaseController
       search_type: search_type,
       params: params
     ).perform
+  rescue ArgumentError => e
+    render json: { error: e.message }, status: :unprocessable_entity
   end
 end

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

@@ -0,0 +1,15 @@
+class Api::V1::Accounts::Tiktok::AuthorizationsController < Api::V1::Accounts::OauthAuthorizationController
+  include Tiktok::IntegrationHelper
+
+  def create
+    redirect_url = Tiktok::AuthClient.authorize_url(
+      state: generate_tiktok_token(Current.account.id)
+    )
+
+    if redirect_url
+      render json: { success: true, url: redirect_url }
+    else
+      render json: { success: false }, status: :unprocessable_entity
+    end
+  end
+end

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

@@ -59,7 +59,7 @@ class Api::V1::Accounts::UploadController < Api::V1::Accounts::BaseController
   end
 
   def render_success(file_blob)
-    render json: { file_url: url_for(file_blob), blob_key: file_blob.key, blob_id: file_blob.id }
+    render json: { file_url: url_for(file_blob), blob_id: file_blob.signed_id }
   end
 
   def render_error(message, status)

app/controllers/api/v1/accounts_controller.rb

@@ -92,7 +92,11 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def settings_params
-    params.permit(:auto_resolve_after, :auto_resolve_message, :auto_resolve_ignore_waiting, :audio_transcriptions, :auto_resolve_label)
+    params.permit(*permitted_settings_attributes)
+  end
+
+  def permitted_settings_attributes
+    [:auto_resolve_after, :auto_resolve_message, :auto_resolve_ignore_waiting, :audio_transcriptions, :auto_resolve_label]
   end
 
   def check_signup_enabled
@@ -111,3 +115,5 @@ class Api::V1::AccountsController < Api::BaseController
     }
   end
 end
+
+Api::V1::AccountsController.prepend_mod_with('Api::V1::AccountsSettings')

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

@@ -38,6 +38,11 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
     generate_csv('teams_report', 'api/v2/accounts/reports/teams')
   end
 
+  def conversations_summary
+    @report_data = generate_conversations_report
+    generate_csv('conversations_summary_report', 'api/v2/accounts/reports/conversations_summary')
+  end
+
   def conversation_traffic
     @report_data = generate_conversations_heatmap_report
     timezone_offset = (params[:timezone_offset] || 0).to_f

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

@@ -1,6 +1,6 @@
 class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseController
   before_action :check_authorization
-  before_action :prepare_builder_params, only: [:agent, :team, :inbox, :label]
+  before_action :prepare_builder_params, only: [:agent, :team, :inbox, :label, :channel]
 
   def agent
     render_report_with(V2::Reports::AgentSummaryBuilder)
@@ -18,6 +18,12 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
     render_report_with(V2::Reports::LabelSummaryBuilder)
   end
 
+  def channel
+    return render_could_not_create_error(I18n.t('errors.reports.date_range_too_long')) if date_range_too_long?
+
+    render_report_with(V2::Reports::ChannelSummaryBuilder)
+  end
+
   private
 
   def check_authorization
@@ -40,4 +46,12 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
   def permitted_params
     params.permit(:since, :until, :business_hours)
   end
+
+  def date_range_too_long?
+    return false if permitted_params[:since].blank? || permitted_params[:until].blank?
+
+    since_time = Time.zone.at(permitted_params[:since].to_i)
+    until_time = Time.zone.at(permitted_params[:until].to_i)
+    (until_time - since_time) > 6.months
+  end
 end

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

@@ -0,0 +1,26 @@
+class Api::V2::Accounts::YearInReviewsController < Api::V1::Accounts::BaseController
+  def show
+    year = params[:year] || 2025
+    cache_key = "year_in_review_#{Current.account.id}_#{year}"
+
+    cached_data = Current.user.ui_settings&.dig(cache_key)
+
+    if cached_data.present?
+      render json: cached_data
+    else
+      builder = YearInReviewBuilder.new(
+        account: Current.account,
+        user_id: Current.user.id,
+        year: year
+      )
+
+      data = builder.build
+
+      ui_settings = Current.user.ui_settings || {}
+      ui_settings[cache_key] = data
+      Current.user.update(ui_settings: ui_settings)
+
+      render json: data
+    end
+  end
+end

app/controllers/concerns/attachment_concern.rb

@@ -0,0 +1,35 @@
+module AttachmentConcern
+  extend ActiveSupport::Concern
+
+  def validate_and_prepare_attachments(actions, record = nil)
+    blobs = []
+    return [blobs, actions, nil] if actions.blank?
+
+    sanitized = actions.map do |action|
+      next action unless action[:action_name] == 'send_attachment'
+
+      result = process_attachment_action(action, record, blobs)
+      return [nil, nil, I18n.t('errors.attachments.invalid')] unless result
+
+      result
+    end
+
+    [blobs, sanitized, nil]
+  end
+
+  private
+
+  def process_attachment_action(action, record, blobs)
+    blob_id = action[:action_params].first
+    blob = ActiveStorage::Blob.find_signed(blob_id.to_s)
+
+    return action.merge(action_params: [blob.id]).tap { blobs << blob } if blob.present?
+    return action if blob_already_attached?(record, blob_id)
+
+    nil
+  end
+
+  def blob_already_attached?(record, blob_id)
+    record&.files&.any? { |f| f.blob_id == blob_id.to_i }
+  end
+end

app/controllers/dashboard_controller.rb

@@ -16,7 +16,7 @@ class DashboardController < ActionController::Base
     CHATWOOT_INBOX_TOKEN
     API_CHANNEL_NAME
     API_CHANNEL_THUMBNAIL
-    ANALYTICS_TOKEN
+    CLOUD_ANALYTICS_TOKEN
     DIRECT_UPLOADS_ENABLED
     MAXIMUM_FILE_UPLOAD_SIZE
     HCAPTCHA_SITE_KEY
@@ -73,6 +73,7 @@ class DashboardController < ActionController::Base
       ENABLE_ACCOUNT_SIGNUP: GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false'),
       FB_APP_ID: GlobalConfigService.load('FB_APP_ID', ''),
       INSTAGRAM_APP_ID: GlobalConfigService.load('INSTAGRAM_APP_ID', ''),
+      TIKTOK_APP_ID: GlobalConfigService.load('TIKTOK_APP_ID', ''),
       FACEBOOK_API_VERSION: GlobalConfigService.load('FACEBOOK_API_VERSION', 'v18.0'),
       WHATSAPP_APP_ID: GlobalConfigService.load('WHATSAPP_APP_ID', ''),
       WHATSAPP_CONFIGURATION_ID: GlobalConfigService.load('WHATSAPP_CONFIGURATION_ID', ''),

app/controllers/super_admin/app_configs_controller.rb

@@ -46,9 +46,11 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
       'linear' => %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET],
       'slack' => %w[SLACK_CLIENT_ID SLACK_CLIENT_SECRET],
       'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT],
+      'tiktok' => %w[TIKTOK_APP_ID TIKTOK_APP_SECRET],
       'whatsapp_embedded' => %w[WHATSAPP_APP_ID WHATSAPP_APP_SECRET WHATSAPP_CONFIGURATION_ID WHATSAPP_API_VERSION],
       'notion' => %w[NOTION_CLIENT_ID NOTION_CLIENT_SECRET],
-      'google' => %w[GOOGLE_OAUTH_CLIENT_ID GOOGLE_OAUTH_CLIENT_SECRET GOOGLE_OAUTH_REDIRECT_URI ENABLE_GOOGLE_OAUTH_LOGIN]
+      'google' => %w[GOOGLE_OAUTH_CLIENT_ID GOOGLE_OAUTH_CLIENT_SECRET GOOGLE_OAUTH_REDIRECT_URI ENABLE_GOOGLE_OAUTH_LOGIN],
+      'captain' => %w[CAPTAIN_OPEN_AI_API_KEY CAPTAIN_OPEN_AI_MODEL CAPTAIN_OPEN_AI_ENDPOINT]
     }
 
     @allowed_configs = mapping.fetch(

app/controllers/tiktok/callbacks_controller.rb

@@ -0,0 +1,144 @@
+class Tiktok::CallbacksController < ApplicationController
+  include Tiktok::IntegrationHelper
+
+  def show
+    return handle_authorization_error if params[:error].present?
+    return handle_ungranted_scopes_error unless all_scopes_granted?
+
+    process_successful_authorization
+  rescue StandardError => e
+    handle_error(e)
+  end
+
+  private
+
+  def all_scopes_granted?
+    granted_scopes = short_term_access_token[:scope].to_s.split(',')
+    (Tiktok::AuthClient::REQUIRED_SCOPES - granted_scopes).blank?
+  end
+
+  def process_successful_authorization
+    inbox, already_exists = find_or_create_inbox
+
+    if already_exists
+      redirect_to app_tiktok_inbox_settings_url(account_id: account_id, inbox_id: inbox.id)
+    else
+      redirect_to app_tiktok_inbox_agents_url(account_id: account_id, inbox_id: inbox.id)
+    end
+  end
+
+  def handle_error(error)
+    Rails.logger.error("TikTok Channel creation Error: #{error.message}")
+    ChatwootExceptionTracker.new(error).capture_exception
+
+    redirect_to_error_page(error_type: error.class.name, code: 500, error_message: error.message)
+  end
+
+  # Handles the case when a user denies permissions or cancels the authorization flow
+  def handle_authorization_error
+    redirect_to_error_page(
+      error_type: params[:error] || 'access_denied',
+      code: params[:error_code],
+      error_message: params[:error_description] || 'User cancelled the Authorization'
+    )
+  end
+
+  # Handles the case when a user partially accepted the required scopes
+  def handle_ungranted_scopes_error
+    redirect_to_error_page(
+      error_type: 'ungranted_scopes',
+      code: 400,
+      error_message: 'User did not grant all the required scopes'
+    )
+  end
+
+  # Centralized method to redirect to error page with appropriate parameters
+  # This ensures consistent error handling across different error scenarios
+  # Frontend will handle the error page based on the error_type
+  def redirect_to_error_page(error_type:, code:, error_message:)
+    redirect_to app_new_tiktok_inbox_url(
+      account_id: account_id,
+      error_type: error_type,
+      code: code,
+      error_message: error_message
+    )
+  end
+
+  def find_or_create_inbox
+    business_details = tiktok_client.business_account_details
+    channel_tiktok = find_channel
+    channel_exists = channel_tiktok.present?
+
+    if channel_tiktok
+      update_channel(channel_tiktok, business_details)
+    else
+      channel_tiktok = create_channel_with_inbox(business_details)
+    end
+
+    # reauthorized will also update cache keys for the associated inbox
+    channel_tiktok.reauthorized!
+
+    set_avatar(channel_tiktok.inbox, business_details[:profile_image]) if business_details[:profile_image].present?
+
+    [channel_tiktok.inbox, channel_exists]
+  end
+
+  def create_channel_with_inbox(business_details)
+    ActiveRecord::Base.transaction do
+      channel_tiktok = Channel::Tiktok.create!(
+        account: account,
+        business_id: short_term_access_token[:business_id],
+        access_token: short_term_access_token[:access_token],
+        refresh_token: short_term_access_token[:refresh_token],
+        expires_at: short_term_access_token[:expires_at],
+        refresh_token_expires_at: short_term_access_token[:refresh_token_expires_at]
+      )
+
+      account.inboxes.create!(
+        account: account,
+        channel: channel_tiktok,
+        name: business_details[:display_name].presence || business_details[:username]
+      )
+
+      channel_tiktok
+    end
+  end
+
+  def find_channel
+    Channel::Tiktok.find_by(business_id: short_term_access_token[:business_id], account: account)
+  end
+
+  def update_channel(channel_tiktok, business_details)
+    channel_tiktok.update!(
+      access_token: short_term_access_token[:access_token],
+      refresh_token: short_term_access_token[:refresh_token],
+      expires_at: short_term_access_token[:expires_at],
+      refresh_token_expires_at: short_term_access_token[:refresh_token_expires_at]
+    )
+
+    channel_tiktok.inbox.update!(name: business_details[:display_name].presence || business_details[:username])
+  end
+
+  def set_avatar(inbox, avatar_url)
+    Avatar::AvatarFromUrlJob.perform_later(inbox, avatar_url)
+  end
+
+  def account_id
+    @account_id ||= verify_tiktok_token(params[:state])
+  end
+
+  def account
+    @account ||= Account.find(account_id)
+  end
+
+  def short_term_access_token
+    @short_term_access_token ||= Tiktok::AuthClient.obtain_short_term_access_token(params[:code])
+  end
+
+  def tiktok_client
+    @tiktok_client ||= Tiktok::Client.new(
+      business_id: short_term_access_token[:business_id],
+      access_token: short_term_access_token[:access_token]
+    )
+  end
+end

app/controllers/webhooks/tiktok_controller.rb

@@ -0,0 +1,53 @@
+class Webhooks::TiktokController < ActionController::API
+  before_action :verify_signature!
+
+  def events
+    event = JSON.parse(request_payload)
+    if echo_event?
+      # Add delay to prevent race condition where echo arrives before send message API completes
+      # This avoids duplicate messages when echo comes early during API processing
+      ::Webhooks::TiktokEventsJob.set(wait: 2.seconds).perform_later(event)
+    else
+      ::Webhooks::TiktokEventsJob.perform_later(event)
+    end
+
+    head :ok
+  end
+
+  private
+
+  def request_payload
+    @request_payload ||= request.body.read
+  end
+
+  def verify_signature!
+    signature_header = request.headers['Tiktok-Signature']
+    client_secret = GlobalConfigService.load('TIKTOK_APP_SECRET', nil)
+    received_timestamp, received_signature = extract_signature_parts(signature_header)
+
+    return head :unauthorized unless client_secret && received_timestamp && received_signature
+
+    signature_payload = "#{received_timestamp}.#{request_payload}"
+    computed_signature = OpenSSL::HMAC.hexdigest('SHA256', client_secret, signature_payload)
+
+    return head :unauthorized unless ActiveSupport::SecurityUtils.secure_compare(computed_signature, received_signature)
+
+    # Check timestamp delay (acceptable delay: 5 seconds)
+    current_timestamp = Time.current.to_i
+    delay = current_timestamp - received_timestamp
+
+    return head :unauthorized if delay > 5
+  end
+
+  def extract_signature_parts(signature_header)
+    return [nil, nil] if signature_header.blank?
+
+    keys = signature_header.split(',')
+    signature_parts = keys.map { |part| part.split('=') }.to_h
+    [signature_parts['t']&.to_i, signature_parts['s']]
+  end
+
+  def echo_event?
+    params[:event] == 'im_send_msg'
+  end
+end

app/helpers/api/v2/accounts/reports_helper.rb

@@ -46,6 +46,13 @@ module Api::V2::Accounts::ReportsHelper
     end
   end
 
+  def generate_conversations_report
+    builder = V2::Reports::Conversations::MetricBuilder.new(Current.account, build_params(type: :account))
+    summary = builder.summary
+
+    [generate_conversation_report_metrics(summary)]
+  end
+
   private
 
   def build_params(base_params)
@@ -71,4 +78,16 @@ module Api::V2::Accounts::ReportsHelper
       report[:resolved_conversations_count]
     ]
   end
+
+  def generate_conversation_report_metrics(summary)
+    [
+      summary[:conversations_count],
+      summary[:incoming_messages_count],
+      summary[:outgoing_messages_count],
+      Reports::TimeFormatPresenter.new(summary[:avg_first_response_time]).format,
+      Reports::TimeFormatPresenter.new(summary[:avg_resolution_time]).format,
+      summary[:resolutions_count],
+      Reports::TimeFormatPresenter.new(summary[:reply_time]).format
+    ]
+  end
 end

app/helpers/super_admin/features.yml

@@ -2,13 +2,6 @@
 # No need to replicate the same values in two places
 
 # ------- Premium Features ------- #
-captain:
-  name: 'Captain'
-  description: 'Enable AI-powered conversations with your customers.'
-  enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
-  icon: 'icon-captain'
-  config_key: 'captain'
-  enterprise: true
 saml:
   name: 'SAML SSO'
   description: 'Configuration for controlling SAML Single Sign-On availability'
@@ -48,6 +41,12 @@ help_center:
   description: 'Allow agents to create help center articles and publish them in a portal.'
   enabled: true
   icon: 'icon-book-2-line'
+captain:
+  name: 'Captain'
+  description: 'Enable AI-powered conversations with your customers.'
+  enabled: true
+  icon: 'icon-captain'
+  config_key: 'captain'
 
 # ------- Communication Channels ------- #
 live_chat:
@@ -78,6 +77,12 @@ instagram:
   enabled: true
   icon: 'icon-instagram'
   config_key: 'instagram'
+tiktok:
+  name: 'TikTok'
+  description: 'Stay connected with your customers on TikTok'
+  enabled: true
+  icon: 'icon-tiktok'
+  config_key: 'tiktok'
 whatsapp:
   name: 'WhatsApp'
   description: 'Manage your WhatsApp business interactions from Chatwoot.'

app/helpers/tiktok/integration_helper.rb

@@ -0,0 +1,47 @@
+module Tiktok::IntegrationHelper
+  # Generates a signed JWT token for Tiktok integration
+  #
+  # @param account_id [Integer] The account ID to encode in the token
+  # @return [String, nil] The encoded JWT token or nil if client secret is missing
+  def generate_tiktok_token(account_id)
+    return if client_secret.blank?
+
+    JWT.encode(token_payload(account_id), client_secret, 'HS256')
+  rescue StandardError => e
+    Rails.logger.error("Failed to generate TikTok token: #{e.message}")
+    nil
+  end
+
+  # Verifies and decodes a Tiktok JWT token
+  #
+  # @param token [String] The JWT token to verify
+  # @return [Integer, nil] The account ID from the token or nil if invalid
+  def verify_tiktok_token(token)
+    return if token.blank? || client_secret.blank?
+
+    decode_token(token, client_secret)
+  end
+
+  private
+
+  def client_secret
+    @client_secret ||= GlobalConfigService.load('TIKTOK_APP_SECRET', nil)
+  end
+
+  def token_payload(account_id)
+    {
+      sub: account_id,
+      iat: Time.current.to_i
+    }
+  end
+
+  def decode_token(token, secret)
+    JWT.decode(token, secret, true, {
+                 algorithm: 'HS256',
+                 verify_expiration: true
+               }).first['sub']
+  rescue StandardError => e
+    Rails.logger.error("Unexpected error verifying Tiktok token: #{e.message}")
+    nil
+  end
+end

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

@@ -0,0 +1,18 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class CaptainPreferences extends ApiClient {
+  constructor() {
+    super('captain/preferences', { accountScoped: true });
+  }
+
+  get() {
+    return axios.get(this.url);
+  }
+
+  updatePreferences(data) {
+    return axios.put(this.url, data);
+  }
+}
+
+export default new CaptainPreferences();

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

@@ -0,0 +1,107 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+/**
+ * A client for the Captain Tasks API.
+ * @extends ApiClient
+ */
+class TasksAPI extends ApiClient {
+  /**
+   * Creates a new TasksAPI instance.
+   */
+  constructor() {
+    super('captain/tasks', { accountScoped: true });
+  }
+
+  /**
+   * Rewrites content with a specific operation.
+   * @param {Object} options - The rewrite options.
+   * @param {string} options.content - The content to rewrite.
+   * @param {string} options.operation - The rewrite operation (fix_spelling_grammar, casual, professional, etc).
+   * @param {string} [options.conversationId] - The conversation ID for context (required for 'improve').
+   * @param {AbortSignal} [signal] - AbortSignal to cancel the request.
+   * @returns {Promise} A promise that resolves with the rewritten content.
+   */
+  rewrite({ content, operation, conversationId }, signal) {
+    return axios.post(
+      `${this.url}/rewrite`,
+      {
+        content,
+        operation,
+        conversation_display_id: conversationId,
+      },
+      { signal }
+    );
+  }
+
+  /**
+   * Summarizes a conversation.
+   * @param {string} conversationId - The conversation ID to summarize.
+   * @param {AbortSignal} [signal] - AbortSignal to cancel the request.
+   * @returns {Promise} A promise that resolves with the summary.
+   */
+  summarize(conversationId, signal) {
+    return axios.post(
+      `${this.url}/summarize`,
+      {
+        conversation_display_id: conversationId,
+      },
+      { signal }
+    );
+  }
+
+  /**
+   * Gets a reply suggestion for a conversation.
+   * @param {string} conversationId - The conversation ID.
+   * @param {AbortSignal} [signal] - AbortSignal to cancel the request.
+   * @returns {Promise} A promise that resolves with the reply suggestion.
+   */
+  replySuggestion(conversationId, signal) {
+    return axios.post(
+      `${this.url}/reply_suggestion`,
+      {
+        conversation_display_id: conversationId,
+      },
+      { signal }
+    );
+  }
+
+  /**
+   * Gets label suggestions for a conversation.
+   * @param {string} conversationId - The conversation ID.
+   * @param {AbortSignal} [signal] - AbortSignal to cancel the request.
+   * @returns {Promise} A promise that resolves with label suggestions.
+   */
+  labelSuggestion(conversationId, signal) {
+    return axios.post(
+      `${this.url}/label_suggestion`,
+      {
+        conversation_display_id: conversationId,
+      },
+      { signal }
+    );
+  }
+
+  /**
+   * Sends a follow-up message to continue refining a previous task result.
+   * @param {Object} options - The follow-up options.
+   * @param {Object} options.followUpContext - The follow-up context from a previous task.
+   * @param {string} options.message - The follow-up message/request from the user.
+   * @param {string} [options.conversationId] - The conversation ID for Langfuse session tracking.
+   * @param {AbortSignal} [signal] - AbortSignal to cancel the request.
+   * @returns {Promise} A promise that resolves with the follow-up response and updated follow-up context.
+   */
+  followUp({ followUpContext, message, conversationId }, signal) {
+    return axios.post(
+      `${this.url}/follow_up`,
+      {
+        follow_up_context: followUpContext,
+        message,
+        conversation_display_id: conversationId,
+      },
+      { signal }
+    );
+  }
+}
+
+export default new TasksAPI();

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

@@ -0,0 +1,14 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class TiktokChannel extends ApiClient {
+  constructor() {
+    super('tiktok', { accountScoped: true });
+  }
+
+  generateAuthorization(payload) {
+    return axios.post(`${this.url}/authorization`, payload);
+  }
+}
+
+export default new TiktokChannel();

app/javascript/dashboard/api/channel/voice/twilioVoiceClient.js

@@ -0,0 +1,95 @@
+import { Device } from '@twilio/voice-sdk';
+import VoiceAPI from './voiceAPIClient';
+
+const createCallDisconnectedEvent = () => new CustomEvent('call:disconnected');
+
+class TwilioVoiceClient extends EventTarget {
+  constructor() {
+    super();
+    this.device = null;
+    this.activeConnection = null;
+    this.initialized = false;
+    this.inboxId = null;
+  }
+
+  async initializeDevice(inboxId) {
+    this.destroyDevice();
+
+    const response = await VoiceAPI.getToken(inboxId);
+    const { token, account_id } = response || {};
+    if (!token) throw new Error('Invalid token');
+
+    this.device = new Device(token, {
+      allowIncomingWhileBusy: true,
+      disableAudioContextSounds: true,
+      appParams: { account_id },
+    });
+
+    this.device.removeAllListeners();
+    this.device.on('connect', conn => {
+      this.activeConnection = conn;
+      conn.on('disconnect', this.onDisconnect);
+    });
+
+    this.device.on('disconnect', this.onDisconnect);
+
+    this.device.on('tokenWillExpire', async () => {
+      const r = await VoiceAPI.getToken(this.inboxId);
+      if (r?.token) this.device.updateToken(r.token);
+    });
+
+    this.initialized = true;
+    this.inboxId = inboxId;
+
+    return this.device;
+  }
+
+  get hasActiveConnection() {
+    return !!this.activeConnection;
+  }
+
+  endClientCall() {
+    if (this.activeConnection) {
+      this.activeConnection.disconnect();
+    }
+    this.activeConnection = null;
+    if (this.device) {
+      this.device.disconnectAll();
+    }
+  }
+
+  destroyDevice() {
+    if (this.device) {
+      this.device.destroy();
+    }
+    this.activeConnection = null;
+    this.device = null;
+    this.initialized = false;
+    this.inboxId = null;
+  }
+
+  async joinClientCall({ to, conversationId }) {
+    if (!this.device || !this.initialized || !to) return null;
+    if (this.activeConnection) return this.activeConnection;
+
+    const params = {
+      To: to,
+      is_agent: 'true',
+      conversation_id: conversationId,
+    };
+
+    const connection = await this.device.connect({ params });
+    this.activeConnection = connection;
+
+    connection.on('disconnect', this.onDisconnect);
+
+    return connection;
+  }
+
+  onDisconnect = () => {
+    this.activeConnection = null;
+    this.dispatchEvent(createCallDisconnectedEvent());
+  };
+}
+
+export default new TwilioVoiceClient();

app/javascript/dashboard/api/channel/voice/voiceAPIClient.js

@@ -0,0 +1,40 @@
+/* global axios */
+import ApiClient from '../../ApiClient';
+import ContactsAPI from '../../contacts';
+
+class VoiceAPI extends ApiClient {
+  constructor() {
+    super('voice', { accountScoped: true });
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  initiateCall(contactId, inboxId) {
+    return ContactsAPI.initiateCall(contactId, inboxId).then(r => r.data);
+  }
+
+  leaveConference(inboxId, conversationId) {
+    return axios
+      .delete(`${this.baseUrl()}/inboxes/${inboxId}/conference`, {
+        params: { conversation_id: conversationId },
+      })
+      .then(r => r.data);
+  }
+
+  joinConference({ conversationId, inboxId, callSid }) {
+    return axios
+      .post(`${this.baseUrl()}/inboxes/${inboxId}/conference`, {
+        conversation_id: conversationId,
+        call_sid: callSid,
+      })
+      .then(r => r.data);
+  }
+
+  getToken(inboxId) {
+    if (!inboxId) return Promise.reject(new Error('Inbox ID is required'));
+    return axios
+      .get(`${this.baseUrl()}/inboxes/${inboxId}/conference/token`)
+      .then(r => r.data);
+  }
+}
+
+export default new VoiceAPI();

app/javascript/dashboard/api/inboxes.js

@@ -32,6 +32,16 @@ class Inboxes extends CacheEnabledApiClient {
   syncTemplates(inboxId) {
     return axios.post(`${this.url}/${inboxId}/sync_templates`);
   }
+
+  createCSATTemplate(inboxId, template) {
+    return axios.post(`${this.url}/${inboxId}/csat_template`, {
+      template,
+    });
+  }
+
+  getCSATTemplateStatus(inboxId) {
+    return axios.get(`${this.url}/${inboxId}/csat_template`);
+  }
 }
 
 export default new Inboxes();

app/javascript/dashboard/api/integrations/openapi.js

@@ -1,81 +0,0 @@
-/* global axios */
-
-import ApiClient from '../ApiClient';
-
-/**
- * Represents the data object for a OpenAI hook.
- * @typedef {Object} ConversationMessageData
- * @property {string} [tone] - The tone of the message.
- * @property {string} [content] - The content of the message.
- * @property {string} [conversation_display_id] - The display ID of the conversation (optional).
- */
-
-/**
- * A client for the OpenAI API.
- * @extends ApiClient
- */
-class OpenAIAPI extends ApiClient {
-  /**
-   * Creates a new OpenAIAPI instance.
-   */
-  constructor() {
-    super('integrations', { accountScoped: true });
-
-    /**
-     * The conversation events supported by the API.
-     * @type {string[]}
-     */
-    this.conversation_events = [
-      'summarize',
-      'reply_suggestion',
-      'label_suggestion',
-    ];
-
-    /**
-     * The message events supported by the API.
-     * @type {string[]}
-     */
-    this.message_events = ['rephrase'];
-  }
-
-  /**
-   * Processes an event using the OpenAI API.
-   * @param {Object} options - The options for the event.
-   * @param {string} [options.type='rephrase'] - The type of event to process.
-   * @param {string} [options.content] - The content of the event.
-   * @param {string} [options.tone] - The tone of the event.
-   * @param {string} [options.conversationId] - The ID of the conversation to process the event for.
-   * @param {string} options.hookId - The ID of the hook to use for processing the event.
-   * @returns {Promise} A promise that resolves with the result of the event processing.
-   */
-  processEvent({ type = 'rephrase', content, tone, conversationId, hookId }) {
-    /**
-     * @type {ConversationMessageData}
-     */
-    let data = {
-      tone,
-      content,
-    };
-
-    // Always include conversation_display_id when available for session tracking
-    if (conversationId) {
-      data.conversation_display_id = conversationId;
-    }
-
-    // For conversation-level events, only send conversation_display_id
-    if (this.conversation_events.includes(type)) {
-      data = {
-        conversation_display_id: conversationId,
-      };
-    }
-
-    return axios.post(`${this.url}/hooks/${hookId}/process_event`, {
-      event: {
-        name: type,
-        data,
-      },
-    });
-  }
-}
-
-export default new OpenAIAPI();

app/javascript/dashboard/api/reports.js

@@ -61,6 +61,12 @@ class ReportsAPI extends ApiClient {
     });
   }
 
+  getConversationsSummaryReports({ from: since, to: until, businessHours }) {
+    return axios.get(`${this.url}/conversations_summary`, {
+      params: { since, until, business_hours: businessHours },
+    });
+  }
+
   getConversationTrafficCSV({ daysBefore = 6 } = {}) {
     return axios.get(`${this.url}/conversation_traffic`, {
       params: { timezone_offset: getTimeOffset(), days_before: daysBefore },

app/javascript/dashboard/api/search.js

@@ -14,38 +14,48 @@ class SearchAPI extends ApiClient {
     });
   }
 
-  contacts({ q, page = 1 }) {
+  contacts({ q, page = 1, since, until }) {
     return axios.get(`${this.url}/contacts`, {
       params: {
         q,
         page: page,
+        since,
+        until,
       },
     });
   }
 
-  conversations({ q, page = 1 }) {
+  conversations({ q, page = 1, since, until }) {
     return axios.get(`${this.url}/conversations`, {
       params: {
         q,
         page: page,
+        since,
+        until,
       },
     });
   }
 
-  messages({ q, page = 1 }) {
+  messages({ q, page = 1, since, until, from, inboxId }) {
     return axios.get(`${this.url}/messages`, {
       params: {
         q,
         page: page,
+        since,
+        until,
+        from,
+        inbox_id: inboxId,
       },
     });
   }
 
-  articles({ q, page = 1 }) {
+  articles({ q, page = 1, since, until }) {
     return axios.get(`${this.url}/articles`, {
       params: {
         q,
         page: page,
+        since,
+        until,
       },
     });
   }

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

@@ -0,0 +1,134 @@
+import searchAPI from '../search';
+import ApiClient from '../ApiClient';
+
+describe('#SearchAPI', () => {
+  it('creates correct instance', () => {
+    expect(searchAPI).toBeInstanceOf(ApiClient);
+    expect(searchAPI).toHaveProperty('get');
+    expect(searchAPI).toHaveProperty('contacts');
+    expect(searchAPI).toHaveProperty('conversations');
+    expect(searchAPI).toHaveProperty('messages');
+    expect(searchAPI).toHaveProperty('articles');
+  });
+
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      get: vi.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+      vi.clearAllMocks();
+    });
+
+    it('#get', () => {
+      searchAPI.get({ q: 'test query' });
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/search', {
+        params: { q: 'test query' },
+      });
+    });
+
+    it('#contacts', () => {
+      searchAPI.contacts({ q: 'test', page: 1 });
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/search/contacts', {
+        params: { q: 'test', page: 1, since: undefined, until: undefined },
+      });
+    });
+
+    it('#contacts with date filters', () => {
+      searchAPI.contacts({
+        q: 'test',
+        page: 2,
+        since: 1700000000,
+        until: 1732000000,
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/search/contacts', {
+        params: { q: 'test', page: 2, since: 1700000000, until: 1732000000 },
+      });
+    });
+
+    it('#conversations', () => {
+      searchAPI.conversations({ q: 'test', page: 1 });
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/search/conversations',
+        {
+          params: { q: 'test', page: 1, since: undefined, until: undefined },
+        }
+      );
+    });
+
+    it('#conversations with date filters', () => {
+      searchAPI.conversations({
+        q: 'test',
+        page: 1,
+        since: 1700000000,
+        until: 1732000000,
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/search/conversations',
+        {
+          params: { q: 'test', page: 1, since: 1700000000, until: 1732000000 },
+        }
+      );
+    });
+
+    it('#messages', () => {
+      searchAPI.messages({ q: 'test', page: 1 });
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/search/messages', {
+        params: {
+          q: 'test',
+          page: 1,
+          since: undefined,
+          until: undefined,
+          from: undefined,
+          inbox_id: undefined,
+        },
+      });
+    });
+
+    it('#messages with all filters', () => {
+      searchAPI.messages({
+        q: 'test',
+        page: 1,
+        since: 1700000000,
+        until: 1732000000,
+        from: 'contact:42',
+        inboxId: 10,
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/search/messages', {
+        params: {
+          q: 'test',
+          page: 1,
+          since: 1700000000,
+          until: 1732000000,
+          from: 'contact:42',
+          inbox_id: 10,
+        },
+      });
+    });
+
+    it('#articles', () => {
+      searchAPI.articles({ q: 'test', page: 1 });
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/search/articles', {
+        params: { q: 'test', page: 1, since: undefined, until: undefined },
+      });
+    });
+
+    it('#articles with date filters', () => {
+      searchAPI.articles({
+        q: 'test',
+        page: 2,
+        since: 1700000000,
+        until: 1732000000,
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/search/articles', {
+        params: { q: 'test', page: 2, since: 1700000000, until: 1732000000 },
+      });
+    });
+  });
+});

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

@@ -0,0 +1,35 @@
+import ApiClient from '../ApiClient';
+import tiktokClient from '../channel/tiktokClient';
+
+describe('#TiktokClient', () => {
+  it('creates correct instance', () => {
+    expect(tiktokClient).toBeInstanceOf(ApiClient);
+    expect(tiktokClient).toHaveProperty('generateAuthorization');
+  });
+
+  describe('#generateAuthorization', () => {
+    const originalAxios = window.axios;
+    const originalPathname = window.location.pathname;
+    const axiosMock = {
+      post: vi.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+      window.history.pushState({}, '', '/app/accounts/1/settings');
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+      window.history.pushState({}, '', originalPathname);
+    });
+
+    it('posts to the authorization endpoint', () => {
+      tiktokClient.generateAuthorization({ state: 'test-state' });
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/tiktok/authorization',
+        { state: 'test-state' }
+      );
+    });
+  });
+});

app/javascript/dashboard/api/yearInReview.js

@@ -0,0 +1,16 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class YearInReviewAPI extends ApiClient {
+  constructor() {
+    super('year_in_review', { accountScoped: true, apiVersion: 'v2' });
+  }
+
+  get(year) {
+    return axios.get(`${this.url}`, {
+      params: { year },
+    });
+  }
+}
+
+export default new YearInReviewAPI();

app/javascript/dashboard/assets/scss/_next-colors.scss

@@ -94,6 +94,19 @@
     --gray-11: 100 100 100;
     --gray-12: 32 32 32;
 
+    --violet-1: 253 252 254;
+    --violet-2: 250 248 255;
+    --violet-3: 244 240 254;
+    --violet-4: 235 228 255;
+    --violet-5: 225 217 255;
+    --violet-6: 212 202 254;
+    --violet-7: 194 178 248;
+    --violet-8: 169 153 236;
+    --violet-9: 110 86 207;
+    --violet-10: 100 84 196;
+    --violet-11: 101 85 183;
+    --violet-12: 47 38 95;
+
     --background-color: 253 253 253;
     --text-blue: 8 109 224;
     --border-container: 236 236 236;
@@ -209,6 +222,19 @@
     --gray-11: 180 180 180;
     --gray-12: 238 238 238;
 
+    --violet-1: 20 17 31;
+    --violet-2: 27 21 37;
+    --violet-3: 41 31 67;
+    --violet-4: 50 37 85;
+    --violet-5: 60 46 105;
+    --violet-6: 71 56 135;
+    --violet-7: 86 70 151;
+    --violet-8: 110 86 171;
+    --violet-9: 110 86 207;
+    --violet-10: 125 109 217;
+    --violet-11: 169 153 236;
+    --violet-12: 226 221 254;
+
     --background-color: 18 18 19;
     --border-strong: 52 52 52;
     --border-weak: 38 38 42;

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

@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="flex flex-col w-full shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
+    class="flex flex-col w-full outline-1 outline outline-n-container group/cardLayout rounded-xl bg-n-solid-2"
   >
     <div
       class="flex w-full gap-3 py-5"

app/javascript/dashboard/components-next/Companies/CompaniesHeader/components/CompanySortMenu.vue

@@ -35,6 +35,10 @@ const sortMenus = [
     label: t('COMPANIES.SORT_BY.OPTIONS.CREATED_AT'),
     value: 'created_at',
   },
+  {
+    label: t('COMPANIES.SORT_BY.OPTIONS.CONTACTS_COUNT'),
+    value: 'contacts_count',
+  },
 ];
 
 const orderingMenus = [

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

@@ -44,6 +44,7 @@ const SOCIAL_CONFIG = {
   LINKEDIN: 'i-ri-linkedin-box-fill',
   FACEBOOK: 'i-ri-facebook-circle-fill',
   INSTAGRAM: 'i-ri-instagram-line',
+  TIKTOK: 'i-ri-tiktok-fill',
   TWITTER: 'i-ri-twitter-x-fill',
   GITHUB: 'i-ri-github-fill',
 };
@@ -65,6 +66,7 @@ const defaultState = {
       facebook: '',
       github: '',
       instagram: '',
+      tiktok: '',
       linkedin: '',
       twitter: '',
     },

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

@@ -40,7 +40,12 @@ defineExpose({ dialogRef, contactsFormRef, onSuccess });
 </script>
 
 <template>
-  <Dialog ref="dialogRef" width="3xl" @confirm="handleDialogConfirm">
+  <Dialog
+    ref="dialogRef"
+    width="3xl"
+    overflow-y-auto
+    @confirm="handleDialogConfirm"
+  >
     <ContactsForm
       ref="contactsFormRef"
       is-new-contact

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

@@ -6,6 +6,7 @@ import { useMapGetter, useStore } from 'dashboard/composables/store';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import { useAlert } from 'dashboard/composables';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
+import { useCallsStore } from 'dashboard/stores/calls';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
@@ -67,6 +68,17 @@ const startCall = async inboxId => {
       contactId: props.contactId,
       inboxId,
     });
+    const { call_sid: callSid, conversation_id: conversationId } = response;
+
+    // Add call to store immediately so widget shows
+    const callsStore = useCallsStore();
+    callsStore.addCall({
+      callSid,
+      conversationId,
+      inboxId,
+      callDirection: 'outbound',
+    });
+
     useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
     navigateToConversation(response?.conversation_id);
   } catch (error) {

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

@@ -0,0 +1,17 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="flex justify-between items-center px-4 py-4 w-full">
+    <div
+      class="flex justify-center items-center py-6 w-full custom-dashed-border"
+    >
+      <span class="text-sm text-n-slate-11">
+        {{ t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.NO_ATTRIBUTES') }}
+      </span>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/ConversationWorkflow/AttributeListItem.vue

@@ -0,0 +1,88 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import AttributeBadge from 'dashboard/components-next/CustomAttributes/AttributeBadge.vue';
+import { computed } from 'vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  badges: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['edit', 'delete']);
+
+const iconByType = {
+  text: 'i-lucide-align-justify',
+  checkbox: 'i-lucide-circle-check-big',
+  list: 'i-lucide-list',
+  date: 'i-lucide-calendar',
+  link: 'i-lucide-link',
+  number: 'i-lucide-hash',
+};
+
+const attributeIcon = computed(() => {
+  const typeKey = props.attribute.type?.toLowerCase();
+  return iconByType[typeKey] || 'i-lucide-align-justify';
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2 p-4 bg-n-solid-1 rounded-2xl outline outline-1 outline-n-container"
+  >
+    <div class="flex flex-wrap gap-2 justify-between items-center">
+      <div class="flex flex-wrap gap-2 items-center min-w-0">
+        <h4 class="text-sm font-medium truncate text-n-slate-12">
+          {{ attribute.label }}
+        </h4>
+        <div class="w-px h-3 bg-n-strong" />
+        <div class="flex gap-2 items-center text-sm text-n-slate-11">
+          <div class="flex items-center gap-1.5 text-n-slate-11">
+            <Icon :icon="attributeIcon" class="size-4" />
+            <span class="text-sm">{{ attribute.type }}</span>
+          </div>
+          <div class="w-px h-3 bg-n-weak" />
+          <div class="flex items-center gap-1.5 text-n-slate-11">
+            <Icon icon="i-lucide-key-round" class="size-4" />
+            <span class="line-clamp-1 text-sm">{{ attribute.value }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="flex gap-2 items-center">
+        <AttributeBadge
+          v-for="badge in badges"
+          :key="badge.type"
+          :type="badge.type"
+        />
+        <div
+          v-if="badges.length > 0"
+          class="w-px h-3 bg-n-strong ltr:ml-1.5 rtl:mr-1.5"
+        />
+        <Button
+          icon="i-lucide-pencil-line"
+          size="sm"
+          color="slate"
+          ghost
+          @click="emit('edit', attribute)"
+        />
+        <div class="w-px h-3 bg-n-strong" />
+        <Button
+          icon="i-lucide-trash"
+          size="sm"
+          color="slate"
+          ghost
+          @click="emit('delete', attribute)"
+        />
+      </div>
+    </div>
+    <p class="mb-0 text-sm text-n-slate-11">
+      {{ attribute.attribute_description || attribute.description || '' }}
+    </p>
+  </div>
+</template>

app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributeItem.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { computed } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import { ATTRIBUTE_TYPES } from './constants';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['delete']);
+
+const iconByType = {
+  [ATTRIBUTE_TYPES.TEXT]: 'i-lucide-align-justify',
+  [ATTRIBUTE_TYPES.CHECKBOX]: 'i-lucide-circle-check-big',
+  [ATTRIBUTE_TYPES.LIST]: 'i-lucide-list',
+  [ATTRIBUTE_TYPES.DATE]: 'i-lucide-calendar',
+  [ATTRIBUTE_TYPES.LINK]: 'i-lucide-link',
+  [ATTRIBUTE_TYPES.NUMBER]: 'i-lucide-hash',
+};
+
+const attributeIcon = computed(() => {
+  const typeKey = props.attribute.type?.toLowerCase();
+  return iconByType[typeKey] || 'i-lucide-align-justify';
+});
+
+const handleDelete = () => {
+  emit('delete', props.attribute);
+};
+</script>
+
+<template>
+  <div class="flex justify-between items-center px-4 py-3 w-full">
+    <div class="flex gap-3 items-center">
+      <h5 class="text-sm font-medium text-n-slate-12 line-clamp-1">
+        {{ attribute.label }}
+      </h5>
+      <div class="w-px h-2.5 bg-n-slate-5" />
+      <div class="flex gap-1.5 items-center">
+        <Icon :icon="attributeIcon" class="size-4 text-n-slate-11" />
+        <span class="text-sm text-n-slate-11">{{ attribute.type }}</span>
+      </div>
+      <div class="w-px h-2.5 bg-n-slate-5" />
+      <div class="flex gap-1.5 items-center">
+        <Icon icon="i-lucide-key-round" class="size-4 text-n-slate-11" />
+        <span class="text-sm text-n-slate-11">{{ attribute.value }}</span>
+      </div>
+    </div>
+    <div class="flex gap-2 items-center">
+      <Button icon="i-lucide-trash" sm slate ghost @click.stop="handleDelete" />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributes.vue

@@ -0,0 +1,186 @@
+<script setup>
+import { computed } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useAlert } from 'dashboard/composables';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import ConversationRequiredAttributeItem from 'dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributeItem.vue';
+import ConversationRequiredEmpty from 'dashboard/components-next/Conversation/ConversationRequiredEmpty.vue';
+import BasePaywallModal from 'dashboard/routes/dashboard/settings/components/BasePaywallModal.vue';
+
+const props = defineProps({
+  isEnabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['click']);
+const router = useRouter();
+const { t } = useI18n();
+const { currentAccount, accountId, isOnChatwootCloud, updateAccount } =
+  useAccount();
+const [showDropdown, toggleDropdown] = useToggle(false);
+const [isSaving, toggleSaving] = useToggle(false);
+const conversationAttributes = useMapGetter(
+  'attributes/getConversationAttributes'
+);
+const currentUser = useMapGetter('getCurrentUser');
+
+const isSuperAdmin = computed(() => currentUser.value.type === 'SuperAdmin');
+const showPaywall = computed(() => !props.isEnabled && isOnChatwootCloud.value);
+const i18nKey = computed(() =>
+  isOnChatwootCloud.value ? 'PAYWALL' : 'ENTERPRISE_PAYWALL'
+);
+
+const goToBillingSettings = () => {
+  router.push({
+    name: 'billing_settings_index',
+    params: { accountId: accountId.value },
+  });
+};
+
+const handleClick = () => {
+  emit('click');
+};
+
+const selectedAttributeKeys = computed(
+  () => currentAccount.value?.settings?.conversation_required_attributes || []
+);
+
+const allAttributeOptions = computed(() =>
+  (conversationAttributes.value || []).map(attribute => ({
+    ...attribute,
+    action: 'add',
+    value: attribute.attributeKey,
+    label: attribute.attributeDisplayName,
+    type: attribute.attributeDisplayType,
+  }))
+);
+
+const attributeOptions = computed(() => {
+  const selectedKeysSet = new Set(selectedAttributeKeys.value);
+  return allAttributeOptions.value.filter(
+    attribute => !selectedKeysSet.has(attribute.value)
+  );
+});
+
+const conversationRequiredAttributes = computed(() => {
+  const attributeMap = new Map(
+    allAttributeOptions.value.map(attr => [attr.value, attr])
+  );
+  return selectedAttributeKeys.value
+    .map(key => attributeMap.get(key))
+    .filter(Boolean);
+});
+
+const handleAddAttributesClick = event => {
+  event.stopPropagation();
+  toggleDropdown();
+};
+
+const saveRequiredAttributes = async keys => {
+  try {
+    toggleSaving(true);
+    await updateAccount(
+      { conversation_required_attributes: keys },
+      { silent: true }
+    );
+    useAlert(t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.SAVE.SUCCESS'));
+  } catch (error) {
+    useAlert(t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.SAVE.ERROR'));
+  } finally {
+    toggleSaving(false);
+    toggleDropdown(false);
+  }
+};
+
+const handleAttributeAction = ({ value }) => {
+  if (!value || isSaving.value) return;
+  const updatedKeys = Array.from(
+    new Set([...selectedAttributeKeys.value, value])
+  );
+  saveRequiredAttributes(updatedKeys);
+};
+
+const closeDropdown = () => {
+  toggleDropdown(false);
+};
+
+const handleDelete = attribute => {
+  if (isSaving.value) return;
+  const updatedKeys = selectedAttributeKeys.value.filter(
+    key => key !== attribute.value
+  );
+  saveRequiredAttributes(updatedKeys);
+};
+</script>
+
+<template>
+  <div
+    v-if="isEnabled || showPaywall"
+    class="flex flex-col w-full outline-1 outline outline-n-container rounded-xl bg-n-solid-2 divide-y divide-n-weak"
+    @click="handleClick"
+  >
+    <div class="flex flex-col gap-2 items-start px-5 py-4">
+      <div class="flex justify-between items-center w-full">
+        <div class="flex flex-col gap-2">
+          <h3 class="text-base font-medium text-n-slate-12">
+            {{ $t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.TITLE') }}
+          </h3>
+          <p class="mb-0 text-sm text-n-slate-11">
+            {{ $t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.DESCRIPTION') }}
+          </p>
+        </div>
+        <div v-if="isEnabled" v-on-clickaway="closeDropdown" class="relative">
+          <Button
+            icon="i-lucide-circle-plus"
+            :label="$t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.ADD.TITLE')"
+            :is-loading="isSaving"
+            :disabled="isSaving || attributeOptions.length === 0"
+            @click="handleAddAttributesClick"
+          />
+          <DropdownMenu
+            v-if="showDropdown"
+            :menu-items="attributeOptions"
+            show-search
+            :search-placeholder="
+              $t(
+                'CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.ADD.SEARCH_PLACEHOLDER'
+              )
+            "
+            class="top-full mt-1 w-52 ltr:right-0 rtl:left-0"
+            @action="handleAttributeAction"
+          />
+        </div>
+      </div>
+    </div>
+
+    <template v-if="isEnabled">
+      <ConversationRequiredEmpty
+        v-if="conversationRequiredAttributes.length === 0"
+      />
+
+      <ConversationRequiredAttributeItem
+        v-for="attribute in conversationRequiredAttributes"
+        :key="attribute.value"
+        :attribute="attribute"
+        @delete="handleDelete"
+      />
+    </template>
+
+    <BasePaywallModal
+      v-else
+      class="mx-auto my-8"
+      feature-prefix="CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES"
+      :i18n-key="i18nKey"
+      :is-on-chatwoot-cloud="isOnChatwootCloud"
+      :is-super-admin="isSuperAdmin"
+      @upgrade="goToBillingSettings"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/ConversationWorkflow/ConversationResolveAttributesModal.vue

@@ -0,0 +1,248 @@
+<script setup>
+import { ref, computed, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required, url, helpers } from '@vuelidate/validators';
+import { getRegexp } from 'shared/helpers/Validators';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import TextArea from 'next/textarea/TextArea.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import ChoiceToggle from 'dashboard/components-next/input/ChoiceToggle.vue';
+import { ATTRIBUTE_TYPES } from './constants';
+
+const emit = defineEmits(['submit']);
+
+const { t } = useI18n();
+
+const dialogRef = ref(null);
+const visibleAttributes = ref([]);
+const formValues = reactive({});
+const conversationContext = ref(null);
+
+const placeholders = computed(() => ({
+  text: t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.PLACEHOLDERS.TEXT'),
+  number: t(
+    'CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.PLACEHOLDERS.NUMBER'
+  ),
+  link: t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.PLACEHOLDERS.LINK'),
+  date: t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.PLACEHOLDERS.DATE'),
+  list: t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.PLACEHOLDERS.LIST'),
+}));
+
+const getPlaceholder = type => placeholders.value[type] || '';
+
+const validationRules = computed(() => {
+  const rules = {};
+  visibleAttributes.value.forEach(attribute => {
+    if (attribute.type === ATTRIBUTE_TYPES.LINK) {
+      rules[attribute.value] = { required, url };
+    } else if (attribute.type === ATTRIBUTE_TYPES.CHECKBOX) {
+      // Checkbox doesn't need validation - any selection is valid
+      rules[attribute.value] = {};
+    } else {
+      rules[attribute.value] = { required };
+      if (attribute.regexPattern) {
+        rules[attribute.value].regexValidation = helpers.withParams(
+          { regexCue: attribute.regexCue },
+          value => !value || getRegexp(attribute.regexPattern).test(value)
+        );
+      }
+    }
+  });
+  return rules;
+});
+
+const v$ = useVuelidate(validationRules, formValues);
+
+const getErrorMessage = attributeKey => {
+  const field = v$.value[attributeKey];
+  if (!field || !field.$error) return '';
+
+  if (field.url && field.url.$invalid) {
+    return t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
+  }
+  if (field.regexValidation && field.regexValidation.$invalid) {
+    return (
+      field.regexValidation.$params?.regexCue ||
+      t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT')
+    );
+  }
+  if (field.required && field.required.$invalid) {
+    return t('CUSTOM_ATTRIBUTES.VALIDATIONS.REQUIRED');
+  }
+  return '';
+};
+
+const isFormComplete = computed(() =>
+  visibleAttributes.value.every(attribute => {
+    const value = formValues[attribute.value];
+
+    // For checkbox attributes, ensure the agent has explicitly selected a value
+    if (attribute.type === ATTRIBUTE_TYPES.CHECKBOX) {
+      return formValues[attribute.value] !== null;
+    }
+
+    // For other attribute types, check for valid non-empty values
+    return value !== undefined && value !== null && String(value).trim() !== '';
+  })
+);
+
+const comboBoxOptions = computed(() => {
+  const options = {};
+  visibleAttributes.value.forEach(attribute => {
+    if (attribute.type === ATTRIBUTE_TYPES.LIST) {
+      options[attribute.value] = (attribute.attributeValues || []).map(
+        option => ({
+          value: option,
+          label: option,
+        })
+      );
+    }
+  });
+  return options;
+});
+
+const close = () => {
+  dialogRef.value?.close();
+  conversationContext.value = null;
+  v$.value.$reset();
+};
+
+const open = (attributes = [], initialValues = {}, context = null) => {
+  visibleAttributes.value = attributes;
+  conversationContext.value = context;
+
+  // Clear existing formValues
+  Object.keys(formValues).forEach(key => {
+    delete formValues[key];
+  });
+
+  // Initialize form values
+  attributes.forEach(attribute => {
+    const presetValue = initialValues[attribute.value];
+    if (presetValue !== undefined && presetValue !== null) {
+      formValues[attribute.value] = presetValue;
+    } else {
+      // For checkbox attributes, initialize to null to avoid pre-selection
+      // For other attributes, initialize to empty string
+      formValues[attribute.value] =
+        attribute.type === ATTRIBUTE_TYPES.CHECKBOX ? null : '';
+    }
+  });
+
+  v$.value.$reset();
+  dialogRef.value?.open();
+};
+
+const handleConfirm = async () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) {
+    return;
+  }
+
+  emit('submit', {
+    attributes: { ...formValues },
+    context: conversationContext.value,
+  });
+  close();
+};
+
+defineExpose({ open, close });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    width="lg"
+    :title="t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.TITLE')"
+    :description="
+      t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.DESCRIPTION')
+    "
+    :confirm-button-label="
+      t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.ACTIONS.RESOLVE')
+    "
+    :cancel-button-label="
+      t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.ACTIONS.CANCEL')
+    "
+    :disable-confirm-button="!isFormComplete"
+    @confirm="handleConfirm"
+  >
+    <div class="flex flex-col gap-4">
+      <div
+        v-for="attribute in visibleAttributes"
+        :key="attribute.value"
+        class="flex flex-col gap-2"
+      >
+        <div class="flex justify-between items-center">
+          <label class="mb-0.5 text-sm font-medium text-n-slate-12">
+            {{ attribute.label }}
+          </label>
+        </div>
+
+        <template v-if="attribute.type === ATTRIBUTE_TYPES.TEXT">
+          <TextArea
+            v-model="formValues[attribute.value]"
+            class="w-full"
+            :placeholder="getPlaceholder(ATTRIBUTE_TYPES.TEXT)"
+            :message="getErrorMessage(attribute.value)"
+            :message-type="v$[attribute.value].$error ? 'error' : 'info'"
+            @blur="v$[attribute.value].$touch"
+          />
+        </template>
+
+        <template v-else-if="attribute.type === ATTRIBUTE_TYPES.NUMBER">
+          <Input
+            v-model="formValues[attribute.value]"
+            type="number"
+            size="md"
+            :placeholder="getPlaceholder(ATTRIBUTE_TYPES.NUMBER)"
+            :message="getErrorMessage(attribute.value)"
+            :message-type="v$[attribute.value].$error ? 'error' : 'info'"
+            @blur="v$[attribute.value].$touch"
+          />
+        </template>
+
+        <template v-else-if="attribute.type === ATTRIBUTE_TYPES.LINK">
+          <Input
+            v-model="formValues[attribute.value]"
+            type="url"
+            size="md"
+            :placeholder="getPlaceholder(ATTRIBUTE_TYPES.LINK)"
+            :message="getErrorMessage(attribute.value)"
+            :message-type="v$[attribute.value].$error ? 'error' : 'info'"
+            @blur="v$[attribute.value].$touch"
+          />
+        </template>
+
+        <template v-else-if="attribute.type === ATTRIBUTE_TYPES.DATE">
+          <Input
+            v-model="formValues[attribute.value]"
+            type="date"
+            size="md"
+            :placeholder="getPlaceholder(ATTRIBUTE_TYPES.DATE)"
+            :message="getErrorMessage(attribute.value)"
+            :message-type="v$[attribute.value].$error ? 'error' : 'info'"
+            @blur="v$[attribute.value].$touch"
+          />
+        </template>
+
+        <template v-else-if="attribute.type === ATTRIBUTE_TYPES.LIST">
+          <ComboBox
+            v-model="formValues[attribute.value]"
+            :options="comboBoxOptions[attribute.value]"
+            :placeholder="getPlaceholder(ATTRIBUTE_TYPES.LIST)"
+            :message="getErrorMessage(attribute.value)"
+            :message-type="v$[attribute.value].$error ? 'error' : 'info'"
+            :has-error="v$[attribute.value].$error"
+            class="w-full"
+          />
+        </template>
+
+        <template v-else-if="attribute.type === ATTRIBUTE_TYPES.CHECKBOX">
+          <ChoiceToggle v-model="formValues[attribute.value]" />
+        </template>
+      </div>
+    </div>
+  </Dialog>
+</template>

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

@@ -0,0 +1,8 @@
+export const ATTRIBUTE_TYPES = {
+  TEXT: 'text',
+  NUMBER: 'number',
+  LINK: 'link',
+  DATE: 'date',
+  LIST: 'list',
+  CHECKBOX: 'checkbox',
+};

app/javascript/dashboard/components-next/CustomAttributes/AttributeBadge.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'resolution',
+    validator: value => ['pre-chat', 'resolution'].includes(value),
+  },
+});
+
+const { t } = useI18n();
+
+const attributeConfig = {
+  'pre-chat': {
+    colorClass: 'text-n-blue-11',
+    icon: 'i-lucide-message-circle',
+    labelKey: 'ATTRIBUTES_MGMT.BADGES.PRE_CHAT',
+  },
+  resolution: {
+    colorClass: 'text-n-teal-11',
+    icon: 'i-lucide-circle-check-big',
+    labelKey: 'ATTRIBUTES_MGMT.BADGES.RESOLUTION',
+  },
+};
+const config = computed(
+  () => attributeConfig[props.type] || attributeConfig.resolution
+);
+</script>
+
+<template>
+  <div
+    class="flex gap-1 justify-center items-center px-1.5 py-1 rounded-md shadow outline-1 outline outline-n-container bg-n-solid-2"
+  >
+    <Icon :icon="config.icon" class="size-4" :class="config.colorClass" />
+    <span class="text-xs" :class="config.colorClass">{{
+      t(config.labelKey)
+    }}</span>
+  </div>
+</template>

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

@@ -5,6 +5,7 @@ import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 
 const props = defineProps({
   modelValue: { type: String, default: '' },
+  editorKey: { type: String, default: '' },
   label: { type: String, default: '' },
   placeholder: { type: String, default: '' },
   focusOnMount: { type: Boolean, default: false },
@@ -96,6 +97,7 @@ watch(
       ]"
     >
       <WootEditor
+        :editor-id="editorKey"
         :model-value="modelValue"
         :placeholder="placeholder"
         :focus-on-mount="focusOnMount"
@@ -152,6 +154,13 @@ watch(
           }
         }
       }
+
+      .ProseMirror-menubar {
+        width: fit-content !important;
+        position: relative !important;
+        top: unset !important;
+        @apply ltr:left-[-0.188rem] rtl:right-[-0.188rem] !important;
+      }
     }
   }
 }

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

@@ -9,6 +9,8 @@ import { useAlert } from 'dashboard/composables';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
 import { debounce } from '@chatwoot/utils';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { emitter } from 'shared/helpers/mitt';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
   searchContacts,
   createNewContact,
@@ -226,6 +228,8 @@ const keyboardEvents = {
     action: () => {
       if (showComposeNewConversation.value) {
         showComposeNewConversation.value = false;
+        emit('close');
+        emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
       }
     },
   },

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

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useFileUpload } from 'dashboard/composables/useFileUpload';
 import { vOnClickOutside } from '@vueuse/components';
+import { useEventListener } from '@vueuse/core';
 import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import FileUpload from 'vue-upload-component';
@@ -43,6 +44,12 @@ const emit = defineEmits([
 
 const { t } = useI18n();
 
+const attachmentId = ref(0);
+const generateUid = () => {
+  attachmentId.value += 1;
+  return `attachment-${attachmentId.value}`;
+};
+
 const uploadAttachment = ref(null);
 const isEmojiPickerOpen = ref(false);
 
@@ -163,6 +170,24 @@ const keyboardEvents = {
   },
 };
 useKeyboardEvents(keyboardEvents);
+
+const onPaste = e => {
+  if (!props.isEmailOrWebWidgetInbox) return;
+
+  const files = e.clipboardData?.files;
+  if (!files?.length) return;
+
+  // Filter valid files (non-zero size)
+  Array.from(files)
+    .filter(file => file.size > 0)
+    .forEach(file => {
+      const { name, type, size } = file;
+      // Add unique ID for clipboard-pasted files
+      onFileUpload({ file, name, type, size, id: generateUid() });
+    });
+};
+
+useEventListener(document, 'paste', onPaste);
 </script>
 
 <template>

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

@@ -7,6 +7,7 @@ import {
   appendSignature,
   removeSignature,
   getEffectiveChannelType,
+  stripUnsupportedMarkdown,
 } from 'dashboard/helper/editorHelper';
 import {
   buildContactableInboxesList,
@@ -47,6 +48,8 @@ const emit = defineEmits([
   'createConversation',
 ]);
 
+const DEFAULT_FORMATTING = 'Context::Default';
+
 const showContactsDropdown = ref(false);
 const showInboxesDropdown = ref(false);
 const showCcEmailsDropdown = ref(false);
@@ -198,10 +201,22 @@ const setSelectedContact = async ({ value, action, ...rest }) => {
   showInboxesDropdown.value = true;
 };
 
-const handleInboxAction = ({ value, action, ...rest }) => {
+const stripMessageFormatting = channelType => {
+  if (!state.message || !channelType) return;
+
+  state.message = stripUnsupportedMarkdown(state.message, channelType, false);
+};
+
+const handleInboxAction = ({ value, action, channelType, medium, ...rest }) => {
   v$.value.$reset();
-  state.message = '';
-  emit('updateTargetInbox', { ...rest });
+
+  // Strip unsupported formatting when changing the target inbox
+  if (channelType) {
+    const newChannelType = getEffectiveChannelType(channelType, medium);
+    stripMessageFormatting(newChannelType);
+  }
+
+  emit('updateTargetInbox', { ...rest, channelType, medium });
   showInboxesDropdown.value = false;
   state.attachedFiles = [];
 };
@@ -221,7 +236,9 @@ const removeSignatureFromMessage = () => {
 const removeTargetInbox = value => {
   v$.value.$reset();
   removeSignatureFromMessage();
-  state.message = '';
+
+  stripMessageFormatting(DEFAULT_FORMATTING);
+
   emit('updateTargetInbox', value);
   state.attachedFiles = [];
 };
@@ -324,67 +341,68 @@ const shouldShowMessageEditor = computed(() => {
 
 <template>
   <div
-    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0"
+    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
   >
-    <ContactSelector
-      :contacts="contacts"
-      :selected-contact="selectedContact"
-      :show-contacts-dropdown="showContactsDropdown"
-      :is-loading="isLoading"
-      :is-creating-contact="isCreatingContact"
-      :contact-id="contactId"
-      :contactable-inboxes-list="contactableInboxesList"
-      :show-inboxes-dropdown="showInboxesDropdown"
-      :has-errors="validationStates.isContactInvalid"
-      @search-contacts="handleContactSearch"
-      @set-selected-contact="setSelectedContact"
-      @clear-selected-contact="clearSelectedContact"
-      @update-dropdown="handleDropdownUpdate"
-    />
-    <InboxEmptyState v-if="showNoInboxAlert" />
-    <InboxSelector
-      v-else
-      :target-inbox="targetInbox"
-      :selected-contact="selectedContact"
-      :show-inboxes-dropdown="showInboxesDropdown"
-      :contactable-inboxes-list="contactableInboxesList"
-      :has-errors="validationStates.isInboxInvalid"
-      @update-inbox="removeTargetInbox"
-      @toggle-dropdown="showInboxesDropdown = $event"
-      @handle-inbox-action="handleInboxAction"
-    />
+    <div class="flex-1 overflow-y-auto divide-y divide-n-strong">
+      <ContactSelector
+        :contacts="contacts"
+        :selected-contact="selectedContact"
+        :show-contacts-dropdown="showContactsDropdown"
+        :is-loading="isLoading"
+        :is-creating-contact="isCreatingContact"
+        :contact-id="contactId"
+        :contactable-inboxes-list="contactableInboxesList"
+        :show-inboxes-dropdown="showInboxesDropdown"
+        :has-errors="validationStates.isContactInvalid"
+        @search-contacts="handleContactSearch"
+        @set-selected-contact="setSelectedContact"
+        @clear-selected-contact="clearSelectedContact"
+        @update-dropdown="handleDropdownUpdate"
+      />
+      <InboxEmptyState v-if="showNoInboxAlert" />
+      <InboxSelector
+        v-else
+        :target-inbox="targetInbox"
+        :selected-contact="selectedContact"
+        :show-inboxes-dropdown="showInboxesDropdown"
+        :contactable-inboxes-list="contactableInboxesList"
+        :has-errors="validationStates.isInboxInvalid"
+        @update-inbox="removeTargetInbox"
+        @toggle-dropdown="showInboxesDropdown = $event"
+        @handle-inbox-action="handleInboxAction"
+      />
 
-    <EmailOptions
-      v-if="inboxTypes.isEmail"
-      v-model:cc-emails="state.ccEmails"
-      v-model:bcc-emails="state.bccEmails"
-      v-model:subject="state.subject"
-      :contacts="contacts"
-      :show-cc-emails-dropdown="showCcEmailsDropdown"
-      :show-bcc-emails-dropdown="showBccEmailsDropdown"
-      :is-loading="isLoading"
-      :has-errors="validationStates.isSubjectInvalid"
-      @search-cc-emails="searchCcEmails"
-      @search-bcc-emails="searchBccEmails"
-      @update-dropdown="handleDropdownUpdate"
-    />
+      <EmailOptions
+        v-if="inboxTypes.isEmail"
+        v-model:cc-emails="state.ccEmails"
+        v-model:bcc-emails="state.bccEmails"
+        v-model:subject="state.subject"
+        :contacts="contacts"
+        :show-cc-emails-dropdown="showCcEmailsDropdown"
+        :show-bcc-emails-dropdown="showBccEmailsDropdown"
+        :is-loading="isLoading"
+        :has-errors="validationStates.isSubjectInvalid"
+        @search-cc-emails="searchCcEmails"
+        @search-bcc-emails="searchBccEmails"
+        @update-dropdown="handleDropdownUpdate"
+      />
 
-    <MessageEditor
-      v-if="shouldShowMessageEditor"
-      v-model="state.message"
-      :message-signature="messageSignature"
-      :send-with-signature="sendWithSignature"
-      :has-errors="validationStates.isMessageInvalid"
-      :has-attachments="state.attachedFiles.length > 0"
-      :channel-type="inboxChannelType"
-      :medium="targetInbox?.medium || ''"
-    />
+      <MessageEditor
+        v-if="shouldShowMessageEditor"
+        v-model="state.message"
+        :message-signature="messageSignature"
+        :send-with-signature="sendWithSignature"
+        :has-errors="validationStates.isMessageInvalid"
+        :channel-type="inboxChannelType"
+        :medium="targetInbox?.medium || ''"
+      />
 
-    <AttachmentPreviews
-      v-if="state.attachedFiles.length > 0"
-      :attachments="state.attachedFiles"
-      @update:attachments="state.attachedFiles = $event"
-    />
+      <AttachmentPreviews
+        v-if="state.attachedFiles.length > 0"
+        :attachments="state.attachedFiles"
+        @update:attachments="state.attachedFiles = $event"
+      />
+    </div>
 
     <ActionButtons
       :attached-files="state.attachedFiles"

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

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

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

@@ -6,7 +6,6 @@ import Editor from 'dashboard/components-next/Editor/Editor.vue';
 
 const props = defineProps({
   hasErrors: { type: Boolean, default: false },
-  hasAttachments: { type: Boolean, default: false },
   sendWithSignature: { type: Boolean, default: false },
   messageSignature: { type: String, default: '' },
   channelType: { type: String, default: '' },
@@ -24,14 +23,14 @@ const modelValue = defineModel({
 </script>
 
 <template>
-  <div class="flex-1 h-full" :class="[!hasAttachments && 'min-h-[200px]']">
+  <div class="flex-1 h-full">
     <Editor
-      :key="editorKey"
       v-model="modelValue"
+      :editor-key="editorKey"
       :placeholder="
         t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
       "
-      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[200px]"
+      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[12.5rem] [&_.ProseMirror-woot-style]:!min-h-[10rem] [&_.ProseMirror-menubar]:!pt-0 [&_.mention--box]:-top-[7.5rem] [&_.mention--box]:bottom-[unset]"
       :class="
         hasErrors
           ? '[&_.empty-node]:before:!text-n-ruby-9 [&_.empty-node]:dark:before:!text-n-ruby-9'

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

@@ -146,7 +146,7 @@ const STYLE_CONFIG = {
       solid:
         'bg-n-teal-9 text-white hover:enabled:bg-n-teal-10 focus-visible:bg-n-teal-10 outline-transparent',
       faded:
-        'bg-n-teal-9/10 text-n-slate-12 hover:enabled:bg-n-teal-9/20 focus-visible:bg-n-teal-9/20 outline-transparent',
+        'bg-n-teal-9/10 text-n-teal-11 hover:enabled:bg-n-teal-9/20 focus-visible:bg-n-teal-9/20 outline-transparent',
       outline:
         'text-n-teal-11 hover:enabled:bg-n-teal-9/10 focus-visible:bg-n-teal-9/10 outline-n-teal-9',
       link: 'text-n-teal-9 hover:enabled:underline focus-visible:underline outline-transparent',

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

@@ -1,5 +1,6 @@
 <script setup>
 import { useAccount } from 'dashboard/composables/useAccount';
+import { useBranding } from 'shared/composables/useBranding';
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DocumentCard from 'dashboard/components-next/captain/assistant/DocumentCard.vue';
@@ -9,6 +10,8 @@ import { documentsList } from 'dashboard/components-next/captain/pageComponents/
 const emit = defineEmits(['click']);
 const { isOnChatwootCloud } = useAccount();
 
+const { replaceInstallationName } = useBranding();
+
 const onClick = () => {
   emit('click');
 };
@@ -35,7 +38,7 @@ const onClick = () => {
           v-for="(document, index) in documentsList.slice(0, 5)"
           :id="document.id"
           :key="`document-${index}`"
-          :name="document.name"
+          :name="replaceInstallationName(document.name)"
           :assistant="document.assistant"
           :external-link="document.external_link"
           :created-at="document.created_at"

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

@@ -1,5 +1,6 @@
 <script setup>
 import { useAccount } from 'dashboard/composables/useAccount';
+import { useBranding } from 'shared/composables/useBranding';
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ResponseCard from 'dashboard/components-next/captain/assistant/ResponseCard.vue';
@@ -26,6 +27,7 @@ const isApproved = computed(() => props.variant === 'approved');
 const isPending = computed(() => props.variant === 'pending');
 
 const { isOnChatwootCloud } = useAccount();
+const { replaceInstallationName } = useBranding();
 
 const onClick = () => {
   emit('click');
@@ -63,8 +65,8 @@ const onClearFilters = () => {
           v-for="(response, index) in responsesList.slice(0, 5)"
           :id="response.id"
           :key="`response-${index}`"
-          :question="response.question"
-          :answer="response.answer"
+          :question="replaceInstallationName(response.question)"
+          :answer="replaceInstallationName(response.answer)"
           :status="response.status"
           :assistant="response.assistant"
           :created-at="response.created_at"

app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 const props = defineProps({
   menuItems: {
@@ -37,9 +38,13 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  disableLocalFiltering: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['action']);
+const emit = defineEmits(['action', 'search']);
 
 const { t } = useI18n();
 
@@ -57,6 +62,7 @@ const flattenedMenuItems = computed(() => {
 });
 
 const filteredMenuItems = computed(() => {
+  if (props.disableLocalFiltering) return props.menuItems;
   if (!searchQuery.value) return flattenedMenuItems.value;
 
   return flattenedMenuItems.value.filter(item =>
@@ -69,7 +75,7 @@ const filteredMenuSections = computed(() => {
     return [];
   }
 
-  if (!searchQuery.value) {
+  if (props.disableLocalFiltering || !searchQuery.value) {
     return props.menuSections;
   }
 
@@ -89,6 +95,12 @@ const filteredMenuSections = computed(() => {
     .filter(section => section.items.length > 0);
 });
 
+const handleSearchInput = event => {
+  if (props.disableLocalFiltering) {
+    emit('search', event.target.value);
+  }
+};
+
 const handleAction = item => {
   const { action, value, ...rest } = item;
   emit('action', { action, value, ...rest });
@@ -118,7 +130,7 @@ onMounted(() => {
   >
     <div
       v-if="showSearch"
-      class="sticky top-0 bg-n-alpha-3 backdrop-blur-sm pt-2"
+      class="sticky top-0 bg-n-alpha-3 backdrop-blur-sm pt-2 z-20"
     >
       <div class="relative">
         <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
@@ -130,6 +142,7 @@ onMounted(() => {
             searchPlaceholder || t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')
           "
           class="reset-base w-full h-8 py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+          @input="handleSearchInput"
         />
       </div>
     </div>
@@ -141,10 +154,23 @@ onMounted(() => {
       >
         <p
           v-if="section.title"
-          class="px-2 pt-2 text-xs font-medium text-n-slate-11 uppercase tracking-wide"
+          class="px-2 py-2 text-xs mb-0 font-medium text-n-slate-11 uppercase tracking-wide sticky z-10 bg-n-alpha-3 backdrop-blur-sm"
+          :class="showSearch ? 'top-10' : 'top-0'"
         >
           {{ section.title }}
         </p>
+        <div
+          v-if="section.isLoading"
+          class="flex items-center justify-center py-2"
+        >
+          <Spinner :size="24" />
+        </div>
+        <div
+          v-else-if="!section.items.length && section.emptyState"
+          class="text-sm text-n-slate-11 px-2 py-1.5"
+        >
+          {{ section.emptyState }}
+        </div>
         <button
           v-for="(item, itemIndex) in section.items"
           :key="item.value || itemIndex"
@@ -235,5 +261,6 @@ onMounted(() => {
           : t('DROPDOWN_MENU.EMPTY_STATE')
       }}
     </div>
+    <slot name="footer" />
   </div>
 </template>

app/javascript/dashboard/components-next/filter/helper/filterHelper.js

@@ -11,7 +11,6 @@ export const CONVERSATION_ATTRIBUTES = {
   CAMPAIGN_ID: 'campaign_id',
   LABELS: 'labels',
   BROWSER_LANGUAGE: 'browser_language',
-  COUNTRY_CODE: 'country_code',
   REFERER: 'referer',
   CREATED_AT: 'created_at',
   LAST_ACTIVITY_AT: 'last_activity_at',

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

@@ -7,7 +7,6 @@ import {
   buildAttributesFilterTypes,
   CONVERSATION_ATTRIBUTES,
 } from './helper/filterHelper';
-import countries from 'shared/constants/countries.js';
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages.js';
 
 /**
@@ -218,17 +217,6 @@ export function useConversationFilterContext() {
       filterOperators: equalityOperators.value,
       attributeModel: 'additional',
     },
-    {
-      attributeKey: CONVERSATION_ATTRIBUTES.COUNTRY_CODE,
-      value: CONVERSATION_ATTRIBUTES.COUNTRY_CODE,
-      attributeName: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
-      label: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
-      inputType: 'searchSelect',
-      options: countries,
-      dataType: 'text',
-      filterOperators: equalityOperators.value,
-      attributeModel: 'additional',
-    },
     {
       attributeKey: CONVERSATION_ATTRIBUTES.REFERER,
       value: CONVERSATION_ATTRIBUTES.REFERER,

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

@@ -13,6 +13,7 @@ export function useChannelIcon(inbox) {
     'Channel::WebWidget': 'i-woot-website',
     'Channel::Whatsapp': 'i-woot-whatsapp',
     'Channel::Instagram': 'i-woot-instagram',
+    'Channel::Tiktok': 'i-woot-tiktok',
     'Channel::Voice': 'i-ri-phone-fill',
   };
 

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

@@ -61,6 +61,12 @@ describe('useChannelIcon', () => {
     expect(icon).toBe('i-woot-instagram');
   });
 
+  it('returns correct icon for TikTok channel', () => {
+    const inbox = { channel_type: 'Channel::Tiktok' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-woot-tiktok');
+  });
+
   describe('TwilioSms channel', () => {
     it('returns chat icon for regular Twilio SMS channel', () => {
       const inbox = { channel_type: 'Channel::TwilioSms' };

app/javascript/dashboard/components-next/input/ChoiceToggle.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  modelValue: {
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const { t } = useI18n();
+
+const options = computed(() => [
+  { label: t('CHOICE_TOGGLE.YES'), value: true },
+  { label: t('CHOICE_TOGGLE.NO'), value: false },
+]);
+
+const handleSelect = value => {
+  emit('update:modelValue', value);
+};
+</script>
+
+<template>
+  <div
+    class="flex gap-4 items-center px-4 py-2.5 w-full rounded-lg divide-x transition-colors bg-n-solid-1 outline outline-1 outline-n-weak hover:outline-n-slate-6 focus-within:outline-n-brand divide-n-weak"
+  >
+    <div
+      v-for="option in options"
+      :key="option.value"
+      class="flex flex-1 gap-2 justify-center items-center"
+    >
+      <label class="inline-flex gap-2 items-center text-base cursor-pointer">
+        <input
+          type="radio"
+          :value="option.value"
+          :checked="modelValue === option.value"
+          class="size-4 accent-n-blue-9 text-n-blue-9"
+          @change="handleSelect(option.value)"
+        />
+        <span class="text-sm text-n-slate-12">{{ option.label }}</span>
+      </label>
+    </div>
+  </div>
+</template>

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

@@ -28,6 +28,7 @@ import ImageBubble from './bubbles/Image.vue';
 import FileBubble from './bubbles/File.vue';
 import AudioBubble from './bubbles/Audio.vue';
 import VideoBubble from './bubbles/Video.vue';
+import EmbedBubble from './bubbles/Embed.vue';
 import InstagramStoryBubble from './bubbles/InstagramStory.vue';
 import EmailBubble from './bubbles/Email/Index.vue';
 import UnsupportedBubble from './bubbles/Unsupported.vue';
@@ -317,6 +318,7 @@ const componentToRender = computed(() => {
       if (fileType === ATTACHMENT_TYPES.AUDIO) return AudioBubble;
       if (fileType === ATTACHMENT_TYPES.VIDEO) return VideoBubble;
       if (fileType === ATTACHMENT_TYPES.IG_REEL) return VideoBubble;
+      if (fileType === ATTACHMENT_TYPES.EMBED) return EmbedBubble;
       if (fileType === ATTACHMENT_TYPES.LOCATION) return LocationBubble;
     }
     // Attachment content is the name of the contact

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

@@ -42,7 +42,10 @@ const props = defineProps({
 const emit = defineEmits(['retry']);
 
 const allMessages = computed(() => {
-  return useCamelCase(props.messages, { deep: true });
+  return useCamelCase(props.messages, {
+    deep: true,
+    stopPaths: ['content_attributes.translations'],
+  });
 });
 
 const currentChat = useMapGetter('getSelectedChat');

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

@@ -20,6 +20,7 @@ const {
   isAWhatsAppChannel,
   isAnEmailChannel,
   isAnInstagramChannel,
+  isATiktokChannel,
 } = useInbox();
 
 const {
@@ -60,7 +61,8 @@ const isSent = computed(() => {
     isAFacebookInbox.value ||
     isASmsInbox.value ||
     isATelegramChannel.value ||
-    isAnInstagramChannel.value
+    isAnInstagramChannel.value ||
+    isATiktokChannel.value
   ) {
     return sourceId.value && status.value === MESSAGE_STATUS.SENT;
   }
@@ -78,7 +80,8 @@ const isDelivered = computed(() => {
     isAWhatsAppChannel.value ||
     isATwilioChannel.value ||
     isASmsInbox.value ||
-    isAFacebookInbox.value
+    isAFacebookInbox.value ||
+    isATiktokChannel.value
   ) {
     return sourceId.value && status.value === MESSAGE_STATUS.DELIVERED;
   }
@@ -100,7 +103,8 @@ const isRead = computed(() => {
     isAWhatsAppChannel.value ||
     isATwilioChannel.value ||
     isAFacebookInbox.value ||
-    isAnInstagramChannel.value
+    isAnInstagramChannel.value ||
+    isATiktokChannel.value
   ) {
     return sourceId.value && status.value === MESSAGE_STATUS.READ;
   }

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

@@ -0,0 +1,30 @@
+<script setup>
+import { computed } from 'vue';
+import BaseBubble from './Base.vue';
+import { useMessageContext } from '../provider.js';
+import { useI18n } from 'vue-i18n';
+
+const { attachments } = useMessageContext();
+const { t } = useI18n();
+
+const attachment = computed(() => {
+  return attachments.value[0];
+});
+</script>
+
+<template>
+  <BaseBubble class="overflow-hidden p-3" data-bubble-name="embed">
+    <div
+      class="w-full max-w-[360px] sm:max-w-[420px] min-h-[520px] h-[70vh] max-h-[680px]"
+    >
+      <iframe
+        class="w-full h-full border-0 rounded-lg"
+        :title="t('CHAT_LIST.ATTACHMENTS.embed.CONTENT')"
+        :src="attachment.dataUrl"
+        loading="lazy"
+        allow="autoplay; encrypted-media; picture-in-picture"
+        allowfullscreen
+      />
+    </div>
+  </BaseBubble>
+</template>

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

@@ -0,0 +1,28 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+  buttonText: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-2.5 text-n-slate-12 max-w-80">
+    <div class="p-3 rounded-xl bg-n-alpha-2">
+      <span
+        v-dompurify-html="message.content"
+        class="text-sm font-medium prose prose-bubble"
+      />
+    </div>
+    <div class="flex gap-2">
+      <Button :label="buttonText" slate class="!text-n-blue-text w-full" />
+    </div>
+  </div>
+</template>

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

@@ -17,6 +17,10 @@ const { attachment } = defineProps({
     type: Object,
     required: true,
   },
+  showTranscribedText: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 defineOptions({
@@ -182,7 +186,7 @@ const downloadAudio = async () => {
     </div>
 
     <div
-      v-if="attachment.transcribedText"
+      v-if="attachment.transcribedText && showTranscribedText"
       class="text-n-slate-12 p-3 text-sm bg-n-alpha-1 rounded-lg w-full break-words"
     >
       {{ attachment.transcribedText }}

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

@@ -49,6 +49,7 @@ export const ATTACHMENT_TYPES = {
   STORY_MENTION: 'story_mention',
   CONTACT: 'contact',
   IG_REEL: 'ig_reel',
+  EMBED: 'embed',
   IG_POST: 'ig_post',
   IG_STORY: 'ig_story',
 };

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

@@ -1,14 +1,15 @@
 <script setup>
-import { h, computed, onMounted } from 'vue';
+import { h, ref, computed, onMounted } from 'vue';
 import { provideSidebarContext } from './provider';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useKbd } from 'dashboard/composables/utils/useKbd';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
-import { useStorage } from '@vueuse/core';
 import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
 import { vOnClickOutside } from '@vueuse/components';
+import { emitter } from 'shared/helpers/mitt';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import SidebarGroup from './SidebarGroup.vue';
@@ -52,14 +53,7 @@ const toggleShortcutModalFn = show => {
 
 useSidebarKeyboardShortcuts(toggleShortcutModalFn);
 
-// We're using localStorage to store the expanded item in the sidebar
-// This helps preserve context when navigating between portal and dashboard layouts
-// and also when the user refreshes the page
-const expandedItem = useStorage(
-  'next-sidebar-expanded-item',
-  null,
-  sessionStorage
-);
+const expandedItem = ref(null);
 
 const setExpandedItem = name => {
   expandedItem.value = expandedItem.value === name ? null : name;
@@ -96,6 +90,15 @@ const closeMobileSidebar = () => {
   emit('closeMobileSidebar');
 };
 
+const onComposeOpen = toggleFn => {
+  toggleFn();
+  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, true);
+};
+
+const onComposeClose = () => {
+  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
+};
+
 const newReportRoutes = () => [
   {
     name: 'Reports Agent',
@@ -481,6 +484,12 @@ const menuItems = computed(() => {
           icon: 'i-lucide-briefcase',
           to: accountScopedRoute('general_settings_index'),
         },
+        // {
+        //   name: 'Settings Captain',
+        //   label: t('SIDEBAR.CAPTAIN_AI'),
+        //   icon: 'i-woot-captain',
+        //   to: accountScopedRoute('captain_settings_index'),
+        // },
         {
           name: 'Settings Agents',
           label: t('SIDEBAR.AGENTS'),
@@ -520,7 +529,7 @@ const menuItems = computed(() => {
         {
           name: 'Settings Automation',
           label: t('SIDEBAR.AUTOMATION'),
-          icon: 'i-lucide-workflow',
+          icon: 'i-lucide-repeat',
           to: accountScopedRoute('automation_list'),
         },
         {
@@ -565,6 +574,12 @@ const menuItems = computed(() => {
           icon: 'i-lucide-clock-alert',
           to: accountScopedRoute('sla_list'),
         },
+        {
+          name: 'Conversation Workflow',
+          label: t('SIDEBAR.CONVERSATION_WORKFLOW'),
+          icon: 'i-lucide-workflow',
+          to: accountScopedRoute('conversation_workflow_index'),
+        },
         {
           name: 'Settings Security',
           label: t('SIDEBAR.SECURITY'),
@@ -623,14 +638,14 @@ const menuItems = computed(() => {
             {{ searchShortcut }}
           </span>
         </RouterLink>
-        <ComposeConversation align-position="right">
+        <ComposeConversation align-position="right" @close="onComposeClose">
           <template #trigger="{ toggle }">
             <Button
               icon="i-lucide-pen-line"
               color="slate"
               size="sm"
               class="!h-7 !bg-n-solid-3 dark:!bg-n-black/30 !outline-n-weak !text-n-slate-11"
-              @click="toggle"
+              @click="onComposeOpen(toggle)"
             />
           </template>
         </ComposeConversation>
@@ -646,7 +661,7 @@ const menuItems = computed(() => {
       </ul>
     </nav>
     <section
-      class="flex flex-col flex-shrink-0 relative gap-1 justify-between items-center"
+      class="flex relative flex-col flex-shrink-0 gap-1 justify-between items-center"
     >
       <div
         class="pointer-events-none absolute inset-x-0 -top-[31px] h-8 bg-gradient-to-t from-n-solid-2 to-transparent"

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, nextTick } from 'vue';
+import { computed, onMounted, watch, nextTick } from 'vue';
 import { useSidebarContext } from './provider';
 import { useRoute, useRouter } from 'vue-router';
 import Policy from 'dashboard/components/policy.vue';
@@ -126,6 +126,16 @@ onMounted(async () => {
     setExpandedItem(props.name);
   }
 });
+
+watch(
+  hasActiveChild,
+  hasNewActiveChild => {
+    if (hasNewActiveChild && !isExpanded.value) {
+      setExpandedItem(props.name);
+    }
+  },
+  { once: true }
+);
 </script>
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->

app/javascript/dashboard/components-next/tabbar/TabBar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, onMounted, nextTick } from 'vue';
+import { computed, ref, onMounted, nextTick, watch } from 'vue';
 import { useResizeObserver } from '@vueuse/core';
 
 const props = defineProps({
@@ -31,20 +31,24 @@ const enableTransition = ref(false);
 const activeElement = computed(() => tabRefs.value[activeTab.value]);
 
 const updateIndicator = () => {
-  if (!activeElement.value) return;
+  nextTick(() => {
+    if (!activeElement.value) return;
 
-  indicatorStyle.value = {
-    left: `${activeElement.value.offsetLeft}px`,
-    width: `${activeElement.value.offsetWidth}px`,
-  };
+    indicatorStyle.value = {
+      left: `${activeElement.value.offsetLeft}px`,
+      width: `${activeElement.value.offsetWidth}px`,
+    };
+  });
 };
 
-useResizeObserver(activeElement, () => {
-  if (enableTransition.value || !activeElement.value) updateIndicator();
+useResizeObserver(activeElement, updateIndicator);
+
+// Watch for prop/tabs changes to update indicator position
+watch([() => props.initialActiveTab, () => props.tabs], updateIndicator, {
+  immediate: true,
 });
 
 onMounted(() => {
-  updateIndicator();
   nextTick(() => {
     enableTransition.value = true;
   });
@@ -66,7 +70,7 @@ const showDivider = index => {
 
 <template>
   <div
-    class="relative flex items-center h-8 rounded-lg bg-n-alpha-1 w-fit transition-all duration-200 ease-out has-[button:active]:scale-[1.01]"
+    class="relative flex items-center h-8 rounded-lg bg-n-alpha-1 dark:bg-n-solid-1 w-fit transition-all duration-200 ease-out has-[button:active]:scale-[1.01]"
   >
     <div
       class="absolute rounded-lg bg-n-solid-active shadow-sm pointer-events-none h-8 outline-1 outline outline-n-container inset-y-0"

app/javascript/dashboard/components-next/taginput/TagInput.vue

@@ -230,7 +230,7 @@ const handleBlur = e => emit('blur', e);
         v-if="showDropdownMenu"
         :menu-items="filteredMenuItems"
         :is-searching="isLoading"
-        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-60 w-[inherit] max-w-md dark:!outline-n-slate-5"
+        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-56 w-[inherit] max-w-md dark:!outline-n-slate-5"
         @action="handleDropdownAction"
       />
     </div>

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

@@ -32,7 +32,7 @@ const props = defineProps({
   allowSignature: { type: Boolean, default: false }, // allowSignature is a kill switch, ensuring no signature methods are triggered except when this flag is true
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'blur', 'focus']);
 
 const textareaRef = ref(null);
 const isFocused = ref(false);
@@ -96,15 +96,17 @@ const handleInput = event => {
   }
 };
 
-const handleFocus = () => {
+const handleFocus = event => {
   if (!props.disabled) {
     isFocused.value = true;
+    emit('focus', event);
   }
 };
 
-const handleBlur = () => {
+const handleBlur = event => {
   if (!props.disabled) {
     isFocused.value = false;
+    emit('blur', event);
   }
 };
 

app/javascript/dashboard/components-next/year-in-review/ShareModal.vue

@@ -0,0 +1,239 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { toPng } from 'html-to-image';
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  slideElement: {
+    type: Object,
+    default: null,
+  },
+  slideBackground: {
+    type: String,
+    required: true,
+  },
+  year: {
+    type: [Number, String],
+    required: true,
+  },
+});
+
+const emit = defineEmits(['close']);
+
+const { t } = useI18n();
+
+const isGenerating = ref(false);
+const shareImageUrl = ref(null);
+
+const generateImage = async () => {
+  if (!props.slideElement) return;
+
+  isGenerating.value = true;
+  try {
+    let slideElement = props.slideElement;
+
+    if (slideElement && '$el' in slideElement) {
+      slideElement = slideElement.$el;
+    }
+
+    if (!slideElement) {
+      // eslint-disable-next-line no-console
+      console.error('No slide element found');
+      return;
+    }
+
+    const colorMap = {
+      'bg-[#5BD58A]': '#5BD58A',
+      'bg-[#60a5fa]': '#60a5fa',
+      'bg-[#fb923c]': '#fb923c',
+      'bg-[#f87171]': '#f87171',
+      'bg-[#fbbf24]': '#fbbf24',
+    };
+    const bgColor = colorMap[props.slideBackground] || '#ffffff';
+
+    const dataUrl = await toPng(slideElement, {
+      pixelRatio: 1.2,
+      backgroundColor: bgColor,
+      // Skip font/CSS embedding to avoid CORS issues with CDN stylesheets
+      // See: https://github.com/bubkoo/html-to-image/issues/49#issuecomment-762222100
+      fontEmbedCSS: '',
+      cacheBust: true,
+    });
+
+    const img = new Image();
+    img.src = dataUrl;
+    await new Promise((resolve, reject) => {
+      img.onload = resolve;
+      img.onerror = reject;
+    });
+
+    const finalCanvas = document.createElement('canvas');
+    const borderSize = 20;
+    const bottomPadding = 50;
+
+    finalCanvas.width = img.width + borderSize * 2;
+    finalCanvas.height = img.height + borderSize * 2 + bottomPadding;
+
+    const ctx = finalCanvas.getContext('2d');
+
+    ctx.fillStyle = 'white';
+    ctx.fillRect(0, 0, finalCanvas.width, finalCanvas.height);
+
+    ctx.drawImage(img, borderSize, borderSize);
+
+    ctx.fillStyle = '#1f2d3d';
+    ctx.font = 'normal 16px system-ui, -apple-system, sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillText(
+      t('YEAR_IN_REVIEW.SHARE_MODAL.BRANDING'),
+      borderSize,
+      img.height + borderSize + 35
+    );
+
+    const logo = new Image();
+    logo.src = '/brand-assets/logo.svg';
+    await new Promise(resolve => {
+      logo.onload = resolve;
+    });
+
+    const logoHeight = 30;
+    const logoWidth = (logo.width / logo.height) * logoHeight;
+    const logoX = finalCanvas.width - borderSize - logoWidth;
+    const logoY = img.height + borderSize + 15;
+
+    ctx.drawImage(logo, logoX, logoY, logoWidth, logoHeight);
+
+    shareImageUrl.value = finalCanvas.toDataURL('image/png');
+  } catch (err) {
+    // Handle errors silently for now
+    // eslint-disable-next-line no-console
+    console.error('Failed to generate image:', err);
+  } finally {
+    isGenerating.value = false;
+  }
+};
+
+const downloadImage = () => {
+  if (!shareImageUrl.value) return;
+
+  const link = document.createElement('a');
+  link.href = shareImageUrl.value;
+  link.download = `chatwoot-year-in-review-${props.year}.png`;
+  link.click();
+};
+
+const shareImage = async () => {
+  if (!shareImageUrl.value) return;
+
+  try {
+    const response = await fetch(shareImageUrl.value);
+    const blob = await response.blob();
+    const file = new File([blob], `chatwoot-year-in-review-${props.year}.png`, {
+      type: 'image/png',
+    });
+
+    if (
+      navigator.share &&
+      navigator.canShare &&
+      navigator.canShare({ files: [file] })
+    ) {
+      await navigator.share({
+        title: t('YEAR_IN_REVIEW.SHARE_MODAL.SHARE_TITLE', {
+          year: props.year,
+        }),
+        text: t('YEAR_IN_REVIEW.SHARE_MODAL.SHARE_TEXT', { year: props.year }),
+        files: [file],
+      });
+      return;
+    }
+
+    downloadImage();
+  } catch (err) {
+    // Fallback to download if sharing fails
+    downloadImage();
+  }
+};
+
+const close = () => {
+  shareImageUrl.value = null;
+  emit('close');
+};
+
+const handleOpen = async () => {
+  if (props.show && !shareImageUrl.value) {
+    await generateImage();
+  }
+};
+
+defineExpose({ handleOpen });
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="show"
+      class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-[10001]"
+      @click="close"
+    >
+      <div v-if="isGenerating" class="flex items-center justify-center">
+        <div class="text-center">
+          <div
+            class="inline-block w-12 h-12 border-4 rounded-full border-white border-t-transparent animate-spin"
+          />
+          <p class="mt-4 text-sm text-white">
+            {{ t('YEAR_IN_REVIEW.SHARE_MODAL.PREPARING') }}
+          </p>
+        </div>
+      </div>
+
+      <div
+        v-else-if="shareImageUrl"
+        class="max-w-2xl w-full mx-4 flex flex-col gap-6 bg-slate-800 rounded-2xl p-6"
+        @click.stop
+      >
+        <div class="flex items-center justify-between">
+          <h3 class="text-xl font-medium text-white">
+            {{ t('YEAR_IN_REVIEW.SHARE_MODAL.TITLE') }}
+          </h3>
+          <button
+            class="w-10 h-10 flex items-center justify-center rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-colors"
+            @click="close"
+          >
+            <i class="i-lucide-x w-6 h-6" />
+          </button>
+        </div>
+
+        <div>
+          <img
+            :src="shareImageUrl"
+            alt="Year in Review"
+            class="w-full h-auto"
+          />
+        </div>
+
+        <div class="flex gap-3">
+          <button
+            class="flex-[2] px-4 py-3 flex items-center justify-center gap-2 rounded-full text-white bg-white bg-opacity-20 hover:bg-opacity-30 transition-colors"
+            @click="downloadImage"
+          >
+            <i class="i-lucide-download w-5 h-5" />
+            <span class="text-sm font-medium">{{
+              t('YEAR_IN_REVIEW.SHARE_MODAL.DOWNLOAD')
+            }}</span>
+          </button>
+
+          <button
+            class="w-10 h-10 flex items-center justify-center rounded-full text-white bg-white bg-opacity-20 hover:bg-opacity-30 transition-colors"
+            @click="shareImage"
+          >
+            <i class="i-lucide-share-2 w-5 h-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

app/javascript/dashboard/components-next/year-in-review/YearInReviewBanner.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useStoreGetters } from 'dashboard/composables/store';
+import YearInReviewModal from './YearInReviewModal.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const yearInReviewBannerImage =
+  '/assets/images/dashboard/year-in-review/year-in-review-sidebar.png';
+const { t } = useI18n();
+const { uiSettings, updateUISettings } = useUISettings();
+const getters = useStoreGetters();
+const showModal = ref(false);
+const modalRef = ref(null);
+
+const currentYear = 2025;
+
+const isACustomBrandedInstance =
+  getters['globalConfig/isACustomBrandedInstance'];
+
+const bannerClosedKey = computed(() => {
+  const accountId = getters.getCurrentAccountId.value;
+  return `yir_closed_${accountId}_${currentYear}`;
+});
+
+const isBannerClosed = computed(() => {
+  return uiSettings.value?.[bannerClosedKey.value] === true;
+});
+
+const shouldShowBanner = computed(
+  () => !isBannerClosed.value && !isACustomBrandedInstance.value
+);
+
+const openModal = () => {
+  showModal.value = true;
+};
+
+const closeModal = () => {
+  showModal.value = false;
+};
+
+const closeBanner = event => {
+  event.stopPropagation();
+  updateUISettings({ [bannerClosedKey.value]: true });
+};
+</script>
+
+<template>
+  <div v-if="shouldShowBanner" class="relative">
+    <div
+      class="mx-2 my-1 p-3 bg-n-iris-9 rounded-lg cursor-pointer hover:shadow-md transition-all"
+      @click="openModal"
+    >
+      <div class="flex items-start justify-between gap-2 mb-3">
+        <span
+          class="text-sm font-semibold text-white leading-tight tracking-tight flex-1"
+        >
+          {{ t('YEAR_IN_REVIEW.BANNER.TITLE', { year: currentYear }) }}
+        </span>
+        <button
+          class="inline-flex items-center justify-center rounded hover:bg-white hover:bg-opacity-20 transition-colors p-0"
+          @click="closeBanner"
+        >
+          <Icon
+            icon="i-lucide-x size-4 mt-0.5 text-n-slate-1 dark:text-n-slate-12"
+          />
+        </button>
+      </div>
+
+      <div class="flex flex-col gap-3">
+        <img
+          :src="yearInReviewBannerImage"
+          alt="Year in Review"
+          class="w-full h-auto rounded"
+        />
+        <button
+          class="w-full px-3 py-2 bg-white text-n-iris-9 text-xs font-medium rounded-mdtracking-tight"
+          @click.stop="openModal"
+        >
+          {{ t('YEAR_IN_REVIEW.BANNER.BUTTON') }}
+        </button>
+      </div>
+    </div>
+
+    <YearInReviewModal ref="modalRef" :show="showModal" @close="closeModal" />
+  </div>
+</template>

app/javascript/dashboard/components-next/year-in-review/YearInReviewModal.vue

@@ -0,0 +1,389 @@
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import YearInReviewAPI from 'dashboard/api/yearInReview';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useStoreGetters } from 'dashboard/composables/store';
+import { useTrack } from 'dashboard/composables';
+import { YEAR_IN_REVIEW_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import IntroSlide from './slides/IntroSlide.vue';
+import ConversationsSlide from './slides/ConversationsSlide.vue';
+import BusiestDaySlide from './slides/BusiestDaySlide.vue';
+import PersonalitySlide from './slides/PersonalitySlide.vue';
+import ThankYouSlide from './slides/ThankYouSlide.vue';
+import ShareModal from './ShareModal.vue';
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['close']);
+
+const { t } = useI18n();
+const { uiSettings } = useUISettings();
+const getters = useStoreGetters();
+const isOpen = ref(false);
+const currentSlide = ref(0);
+const yearData = ref(null);
+const isLoading = ref(false);
+const error = ref(null);
+const slideRefs = ref([]);
+const showShareModal = ref(false);
+const shareModalRef = ref(null);
+const drumrollAudio = ref(null);
+
+const hasConversations = computed(() => {
+  return yearData.value?.total_conversations > 0;
+});
+
+const totalSlides = computed(() => {
+  if (!hasConversations.value) {
+    return 3;
+  }
+  return 5;
+});
+
+const slideIndexMap = computed(() => {
+  if (!hasConversations.value) {
+    return [0, 1, 4];
+  }
+  return [0, 1, 2, 3, 4];
+});
+
+const currentVisualSlide = computed(() => {
+  return slideIndexMap.value.indexOf(currentSlide.value);
+});
+
+const slideBackgrounds = [
+  'bg-[#5BD58A]',
+  'bg-[#60a5fa]',
+  'bg-[#fb923c]',
+  'bg-[#f87171]',
+  'bg-[#fbbf24]',
+];
+
+const playDrumroll = () => {
+  try {
+    if (!drumrollAudio.value) {
+      drumrollAudio.value = new Audio('/audio/dashboard/drumroll.mp3');
+      drumrollAudio.value.volume = 0.5;
+    }
+
+    drumrollAudio.value.currentTime = 0;
+    drumrollAudio.value.play().catch(err => {
+      // eslint-disable-next-line no-console
+      console.log('Could not play drumroll:', err);
+    });
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.log('Error playing drumroll:', err);
+  }
+};
+
+const fetchYearInReviewData = async () => {
+  const year = 2025;
+  const accountId = getters.getCurrentAccountId.value;
+  const cacheKey = `year_in_review_${accountId}_${year}`;
+
+  const cachedData = uiSettings.value?.[cacheKey];
+
+  if (cachedData) {
+    yearData.value = cachedData;
+    return;
+  }
+
+  isLoading.value = true;
+  error.value = null;
+  try {
+    const response = await YearInReviewAPI.get(year);
+    yearData.value = response.data;
+  } catch (err) {
+    error.value = err.message;
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const nextSlide = () => {
+  if (currentSlide.value < 4) {
+    useTrack(YEAR_IN_REVIEW_EVENTS.NEXT_CLICKED);
+    if (!hasConversations.value && currentSlide.value === 1) {
+      currentSlide.value = 4;
+    } else {
+      currentSlide.value += 1;
+    }
+  }
+};
+
+const previousSlide = () => {
+  if (currentSlide.value > 0) {
+    if (!hasConversations.value && currentSlide.value === 4) {
+      currentSlide.value = 1;
+    } else {
+      currentSlide.value -= 1;
+    }
+  }
+};
+
+const goToSlide = visualIndex => {
+  currentSlide.value = slideIndexMap.value[visualIndex];
+};
+
+const close = () => {
+  currentSlide.value = 0;
+  isOpen.value = false;
+  yearData.value = null;
+  isLoading.value = false;
+  error.value = null;
+
+  emit('close');
+};
+
+const open = () => {
+  useTrack(YEAR_IN_REVIEW_EVENTS.MODAL_OPENED);
+  isOpen.value = true;
+  fetchYearInReviewData();
+  playDrumroll();
+};
+
+const currentSlideBackground = computed(
+  () => slideBackgrounds[currentSlide.value]
+);
+
+const shareCurrentSlide = async () => {
+  useTrack(YEAR_IN_REVIEW_EVENTS.SHARE_CLICKED);
+  showShareModal.value = true;
+  nextTick(() => {
+    if (shareModalRef.value) {
+      shareModalRef.value.handleOpen();
+    }
+  });
+};
+
+const closeShareModal = () => {
+  showShareModal.value = false;
+};
+
+const keyboardEvents = {
+  Escape: { action: close },
+  ArrowLeft: { action: previousSlide },
+  ArrowRight: { action: nextSlide },
+};
+
+useKeyboardEvents(keyboardEvents);
+
+defineExpose({ open, close });
+
+watch(
+  () => props.show,
+  newValue => {
+    if (newValue) {
+      open();
+    }
+  }
+);
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="isOpen"
+      class="fixed inset-0 z-[9999] bg-black font-interDisplay"
+    >
+      <div class="relative w-full h-full overflow-hidden">
+        <div
+          v-if="isLoading"
+          class="flex items-center justify-center w-full h-full bg-n-slate-2"
+        >
+          <div class="text-center">
+            <div
+              class="inline-block w-12 h-12 border-4 rounded-full border-n-slate-6 border-t-n-slate-11 animate-spin"
+            />
+            <p class="mt-4 text-sm text-n-slate-11">
+              {{ t('YEAR_IN_REVIEW.LOADING') }}
+            </p>
+          </div>
+        </div>
+
+        <div
+          v-else-if="error"
+          class="flex items-center justify-center w-full h-full bg-n-slate-2"
+        >
+          <div class="text-center">
+            <p class="text-lg font-semibold text-red-600">
+              {{ t('YEAR_IN_REVIEW.ERROR') }}
+            </p>
+            <p class="mt-2 text-sm text-n-slate-11">{{ error }}</p>
+            <button
+              class="mt-4 px-4 py-2 rounded-full text-n-slate-12 dark:text-n-slate-1 bg-white bg-opacity-20 hover:bg-opacity-30 transition-colors"
+              @click="close"
+            >
+              <span class="text-sm font-medium">{{
+                t('YEAR_IN_REVIEW.CLOSE')
+              }}</span>
+            </button>
+          </div>
+        </div>
+
+        <div
+          v-else-if="yearData"
+          class="relative w-full h-full"
+          :class="currentSlideBackground"
+        >
+          <Transition
+            enter-active-class="transition-all duration-300 ease-out"
+            leave-active-class="transition-all duration-300 ease-out"
+            enter-from-class="opacity-0 translate-x-[30px]"
+            leave-to-class="opacity-0 -translate-x-[30px]"
+          >
+            <IntroSlide
+              v-if="currentSlide === 0"
+              :key="0"
+              :ref="el => (slideRefs[0] = el)"
+              :year="yearData.year"
+            />
+          </Transition>
+
+          <Transition
+            enter-active-class="transition-all duration-300 ease-out"
+            leave-active-class="transition-all duration-300 ease-out"
+            enter-from-class="opacity-0 translate-x-[30px]"
+            leave-to-class="opacity-0 -translate-x-[30px]"
+          >
+            <ConversationsSlide
+              v-if="currentSlide === 1"
+              :key="1"
+              :ref="el => (slideRefs[1] = el)"
+              :total-conversations="yearData.total_conversations"
+            />
+          </Transition>
+
+          <Transition
+            enter-active-class="transition-all duration-300 ease-out"
+            leave-active-class="transition-all duration-300 ease-out"
+            enter-from-class="opacity-0 translate-x-[30px]"
+            leave-to-class="opacity-0 -translate-x-[30px]"
+          >
+            <BusiestDaySlide
+              v-if="
+                currentSlide === 2 && hasConversations && yearData.busiest_day
+              "
+              :key="2"
+              :ref="el => (slideRefs[2] = el)"
+              :busiest-day="yearData.busiest_day"
+            />
+          </Transition>
+
+          <Transition
+            enter-active-class="transition-all duration-300 ease-out"
+            leave-active-class="transition-all duration-300 ease-out"
+            enter-from-class="opacity-0 translate-x-[30px]"
+            leave-to-class="opacity-0 -translate-x-[30px]"
+          >
+            <PersonalitySlide
+              v-if="
+                currentSlide === 3 &&
+                hasConversations &&
+                yearData.support_personality
+              "
+              :key="3"
+              :ref="el => (slideRefs[3] = el)"
+              :support-personality="yearData.support_personality"
+            />
+          </Transition>
+
+          <Transition
+            enter-active-class="transition-all duration-300 ease-out"
+            leave-active-class="transition-all duration-300 ease-out"
+            enter-from-class="opacity-0 translate-x-[30px]"
+            leave-to-class="opacity-0 -translate-x-[30px]"
+          >
+            <ThankYouSlide
+              v-if="currentSlide === 4"
+              :key="4"
+              :ref="el => (slideRefs[4] = el)"
+              :year="yearData.year"
+            />
+          </Transition>
+
+          <div
+            class="absolute bottom-8 left-0 right-0 flex items-center justify-between px-8"
+          >
+            <button
+              v-if="currentSlide > 0"
+              class="px-4 py-2 flex items-center gap-2 rounded-full text-n-slate-12 dark:text-n-slate-1 bg-white bg-opacity-20 hover:bg-opacity-30 transition-colors"
+              @click="previousSlide"
+            >
+              <i class="i-lucide-chevron-left w-5 h-5" />
+              <span class="text-sm font-medium">
+                {{ t('YEAR_IN_REVIEW.NAVIGATION.PREVIOUS') }}
+              </span>
+            </button>
+            <div v-else class="w-20" />
+
+            <div class="flex gap-2">
+              <button
+                v-for="index in totalSlides"
+                :key="index"
+                class="w-2 h-2 rounded-full transition-all"
+                :class="
+                  currentVisualSlide === index - 1
+                    ? 'bg-white w-8'
+                    : 'bg-white bg-opacity-50'
+                "
+                @click="goToSlide(index - 1)"
+              />
+            </div>
+
+            <button
+              class="px-4 py-2 flex items-center gap-2 rounded-full text-n-slate-12 dark:text-n-slate-1 bg-white bg-opacity-20 hover:bg-opacity-30 transition-colors"
+              :class="{ invisible: currentVisualSlide === totalSlides - 1 }"
+              @click="nextSlide"
+            >
+              <span
+                v-if="currentVisualSlide < totalSlides - 1"
+                class="text-sm font-medium"
+              >
+                {{ t('YEAR_IN_REVIEW.NAVIGATION.NEXT') }}
+              </span>
+              <i
+                v-if="currentVisualSlide < totalSlides - 1"
+                class="i-lucide-chevron-right w-5 h-5"
+              />
+            </button>
+          </div>
+
+          <button
+            class="absolute top-4 left-4 px-4 py-2 flex items-center gap-2 rounded-full text-n-slate-12 dark:text-n-slate-1 bg-white bg-opacity-20 hover:bg-opacity-30 transition-colors"
+            @click="shareCurrentSlide"
+          >
+            <i class="i-lucide-share-2 w-5 h-5" />
+            <span class="text-sm font-medium">{{
+              t('YEAR_IN_REVIEW.NAVIGATION.SHARE')
+            }}</span>
+          </button>
+
+          <button
+            class="absolute top-4 right-4 w-10 h-10 flex items-center justify-center rounded-full text-n-slate-12 dark:text-n-slate-1 hover:bg-white hover:bg-opacity-20 transition-colors"
+            @click="close"
+          >
+            <i class="i-lucide-x w-6 h-6" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <ShareModal
+      ref="shareModalRef"
+      :show="showShareModal"
+      :slide-element="slideRefs[currentSlide]"
+      :slide-background="currentSlideBackground"
+      :year="yearData?.year"
+      @close="closeShareModal"
+    />
+  </Teleport>
+</template>

app/javascript/dashboard/components-next/year-in-review/slides/BusiestDaySlide.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  busiestDay: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const coffeeImage =
+  '/assets/images/dashboard/year-in-review/third-frame-coffee.png';
+const doubleQuotesImage =
+  '/assets/images/dashboard/year-in-review/double-quotes.png';
+
+const performanceHelperText = computed(() => {
+  const count = props.busiestDay.count;
+  if (count <= 5) return t('YEAR_IN_REVIEW.BUSIEST_DAY.COMPARISON.0_5');
+  if (count <= 10) return t('YEAR_IN_REVIEW.BUSIEST_DAY.COMPARISON.5_10');
+  if (count <= 25) return t('YEAR_IN_REVIEW.BUSIEST_DAY.COMPARISON.10_25');
+  if (count <= 50) return t('YEAR_IN_REVIEW.BUSIEST_DAY.COMPARISON.25_50');
+  if (count <= 100) return t('YEAR_IN_REVIEW.BUSIEST_DAY.COMPARISON.50_100');
+  if (count <= 500) return t('YEAR_IN_REVIEW.BUSIEST_DAY.COMPARISON.100_500');
+  return t('YEAR_IN_REVIEW.BUSIEST_DAY.COMPARISON.500_PLUS');
+});
+</script>
+
+<template>
+  <div class="absolute inset-0 flex items-center justify-center px-8 md:px-32">
+    <div class="flex flex-col gap-4 w-full max-w-3xl">
+      <div class="flex items-center justify-center flex-1">
+        <div class="flex items-center justify-between gap-6 flex-1 md:gap-16">
+          <div class="text-white flex gap-2 flex-col">
+            <div class="text-2xl lg:text-3xl xl:text-4xl tracking-tight">
+              {{ t('YEAR_IN_REVIEW.BUSIEST_DAY.TITLE') }}
+            </div>
+            <div class="text-6xl md:text-8xl lg:text-[140px] tracking-tighter">
+              {{ busiestDay.date }}
+            </div>
+          </div>
+
+          <img
+            :src="coffeeImage"
+            alt="Coffee"
+            class="w-auto h-32 md:h-56 lg:h-72"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2 flex-1">
+        <div class="flex items-center justify-center gap-3 md:gap-8">
+          <img
+            :src="doubleQuotesImage"
+            alt="Quote"
+            class="w-8 h-8 md:w-12 md:h-12 lg:w-16 lg:h-16"
+          />
+          <div class="flex-1">
+            <p
+              class="text-xl md:text-3xl lg:text-4xl font-medium tracking-[-0.2px] text-n-slate-12 dark:text-n-slate-1"
+            >
+              {{
+                t('YEAR_IN_REVIEW.BUSIEST_DAY.MESSAGE', {
+                  count: busiestDay.count,
+                })
+              }}
+              {{ performanceHelperText }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/year-in-review/slides/ConversationsSlide.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  totalConversations: {
+    type: Number,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const cloudImage =
+  '/assets/images/dashboard/year-in-review/second-frame-cloud-icon.png';
+const doubleQuotesImage =
+  '/assets/images/dashboard/year-in-review/double-quotes.png';
+
+const hasData = computed(() => {
+  return props.totalConversations > 0;
+});
+
+const formatNumber = num => {
+  if (num >= 100000) {
+    return '100k+';
+  }
+  return new Intl.NumberFormat().format(num);
+};
+
+const performanceHelperText = computed(() => {
+  if (!hasData.value) {
+    return t('YEAR_IN_REVIEW.CONVERSATIONS.FALLBACK');
+  }
+
+  const count = props.totalConversations;
+  if (count <= 50) return t('YEAR_IN_REVIEW.CONVERSATIONS.COMPARISON.0_50');
+  if (count <= 100) return t('YEAR_IN_REVIEW.CONVERSATIONS.COMPARISON.50_100');
+  if (count <= 500) return t('YEAR_IN_REVIEW.CONVERSATIONS.COMPARISON.100_500');
+  if (count <= 2000)
+    return t('YEAR_IN_REVIEW.CONVERSATIONS.COMPARISON.500_2000');
+  if (count <= 10000)
+    return t('YEAR_IN_REVIEW.CONVERSATIONS.COMPARISON.2000_10000');
+  return t('YEAR_IN_REVIEW.CONVERSATIONS.COMPARISON.10000_PLUS');
+});
+</script>
+
+<template>
+  <div
+    class="absolute inset-0 flex items-center justify-center px-8 md:px-32 py-20"
+  >
+    <div
+      class="flex flex-col gap-16"
+      :class="totalConversations > 100 ? 'max-w-4xl' : 'max-w-3xl'"
+    >
+      <div class="flex items-center justify-center flex-1">
+        <div
+          class="flex items-center justify-between gap-6 flex-1"
+          :class="totalConversations > 100 ? 'md:gap-16' : 'md:gap-8'"
+        >
+          <div class="text-white flex gap-3 flex-col">
+            <div class="text-2xl md:text-3xl lg:text-4xl tracking-tight">
+              {{ t('YEAR_IN_REVIEW.CONVERSATIONS.TITLE') }}
+            </div>
+            <div class="text-6xl md:text-8xl lg:text-[180px] tracking-tighter">
+              {{ formatNumber(totalConversations) }}
+            </div>
+            <div class="text-2xl md:text-3xl lg:text-4xl tracking-tight -mt-2">
+              {{ t('YEAR_IN_REVIEW.CONVERSATIONS.SUBTITLE') }}
+            </div>
+          </div>
+
+          <img
+            :src="cloudImage"
+            alt="Cloud"
+            class="w-auto h-32 md:h-56 lg:h-80 -mr-2"
+          />
+        </div>
+      </div>
+
+      <div class="flex items-center justify-center gap-3 md:gap-6">
+        <img
+          :src="doubleQuotesImage"
+          alt="Quote"
+          class="w-8 h-8 md:w-12 md:h-12 lg:w-16 lg:h-16"
+        />
+        <p
+          class="text-xl md:text-3xl lg:text-4xl font-medium tracking-[-0.2px] text-n-slate-12 dark:text-n-slate-1"
+        >
+          {{ performanceHelperText }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/year-in-review/slides/IntroSlide.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  year: {
+    type: Number,
+    required: true,
+  },
+});
+
+const candlesImagePath =
+  '/assets/images/dashboard/year-in-review/first-frame-candles.png';
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div
+    class="absolute inset-0 flex flex-col items-center justify-center text-black px-8 md:px-16 lg:px-24 py-10 md:py-16 lg:py-20 bg-cover bg-center min-h-[700px]"
+    :style="{
+      backgroundImage: `url('/assets/images/dashboard/year-in-review/first-frame-bg.png')`,
+    }"
+  >
+    <div class="text-center max-w-3xl">
+      <h1
+        class="text-8xl md:text-9xl lg:text-[220px] font-semibold mb-4 md:mb-6 leading-none tracking-tight text-n-slate-12 dark:text-n-slate-1"
+      >
+        {{ year }}
+      </h1>
+      <h2
+        class="text-3xl md:text-4xl lg:text-5xl font-medium mb-12 md:mb-16 lg:mb-20 text-n-slate-12 dark:text-n-slate-1"
+      >
+        {{ t('YEAR_IN_REVIEW.TITLE') }}
+      </h2>
+    </div>
+
+    <img
+      :src="candlesImagePath"
+      alt="Candles"
+      class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-auto h-32 md:h-48 lg:h-64"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/year-in-review/slides/PersonalitySlide.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  supportPersonality: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const clockImage =
+  '/assets/images/dashboard/year-in-review/fourth-frame-clock.png';
+const doubleQuotesImage =
+  '/assets/images/dashboard/year-in-review/double-quotes.png';
+
+const formatResponseTime = seconds => {
+  if (seconds < 60) {
+    return 'less than a minute';
+  }
+  if (seconds < 3600) {
+    const minutes = Math.floor(seconds / 60);
+    return minutes === 1 ? '1 minute' : `${minutes} minutes`;
+  }
+  if (seconds < 86400) {
+    const hours = Math.floor(seconds / 3600);
+    return hours === 1 ? '1 hour' : `${hours} hours`;
+  }
+  return 'more than a day';
+};
+
+const personality = computed(() => {
+  const seconds = props.supportPersonality.avg_response_time_seconds;
+  const minutes = seconds / 60;
+
+  if (minutes < 2) {
+    return 'Swift Helper';
+  }
+  if (minutes < 5) {
+    return 'Quick Responder';
+  }
+  if (minutes < 15) {
+    return 'Steady Support';
+  }
+  return 'Thoughtful Advisor';
+});
+
+const personalityMessage = computed(() => {
+  const seconds = props.supportPersonality.avg_response_time_seconds;
+  const time = formatResponseTime(seconds);
+
+  const personalityKeyMap = {
+    'Swift Helper': 'SWIFT_HELPER',
+    'Quick Responder': 'QUICK_RESPONDER',
+    'Steady Support': 'STEADY_SUPPORT',
+    'Thoughtful Advisor': 'THOUGHTFUL_ADVISOR',
+  };
+
+  const key = personalityKeyMap[personality.value];
+  if (!key) return '';
+
+  return t(`YEAR_IN_REVIEW.PERSONALITY.MESSAGES.${key}`, { time });
+});
+</script>
+
+<template>
+  <div class="absolute inset-0 flex items-center justify-center px-8 md:px-32">
+    <div class="flex flex-col gap-9 max-w-3xl">
+      <div class="mb-4 md:mb-6">
+        <img :src="clockImage" alt="Clock" class="w-auto h-28" />
+        <div class="flex items-center justify-start flex-1 mt-9">
+          <div class="text-n-slate-1 dark:text-n-slate-12 flex gap-3 flex-col">
+            <div class="text-2xl md:text-4xl tracking-tight">
+              {{ t('YEAR_IN_REVIEW.PERSONALITY.TITLE') }}
+            </div>
+            <div class="text-6xl md:text-7xl lg:text-8xl tracking-tighter">
+              {{ personality }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-center gap-3 md:gap-6">
+        <img
+          :src="doubleQuotesImage"
+          alt="Quote"
+          class="w-8 h-8 md:w-12 md:h-12 lg:w-16 lg:h-16"
+        />
+        <p
+          class="text-xl md:text-3xl lg:text-3xl font-medium tracking-[-0.2px] text-n-slate-12 dark:text-n-slate-1"
+        >
+          {{ personalityMessage }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>