fix: update stale mock data in component stories

These stories were written against older component APIs and broke under the new harness: - copilot: nest message content/reasoning and use message_type; pass the required conversationInboxType - ArticlesPage: pass the required categories, allowedLocales, portalName and meta props - CategoryPage: use the real category shape (name/icon/slug/meta) so cards render titles instead of "undefined undefined" - PortalSettings: provide a portals array matching the seeded route so the settings forms render
feat: replace histoire with a minimal in-house stories harness
2026-06-03 14:46:06 +05:30 · 2026-06-03 14:45:51 +05:30
237 changed files with 1866 additions and 4977 deletions
@@ -28,6 +28,17 @@ module.exports = {
        'no-console': 'off',
      },
    },
+    {
+      // The stories harness is dev-only tooling, not user-facing UI.
+      files: ['app/javascript/stories/**/*.{js,vue}'],
+      rules: {
+        'vue/no-bare-strings-in-template': 'off',
+        '@intlify/vue-i18n/no-raw-text': 'off',
+        // `group` is declared on <Story> only to accept Histoire's API.
+        'vue/no-unused-properties': 'off',
+        'no-console': 'off',
+      },
+    },
  ],
  plugins: ['html', 'prettier'],
  parserOptions: {
@@ -100,7 +100,7 @@ CLAUDE.local.md

 # Histoire deployment
 .netlify
-.histoire
+.stories
 .pnpm-store/*
 local/
 Procfile.worktree
@@ -76,7 +76,7 @@ gem 'faraday_middleware-aws-sigv4'
 ##--- gems for server & infra configuration ---##
 gem 'dotenv-rails', '>= 3.0.0'
 gem 'foreman'
-gem 'puma', '~> 7.2', '>= 7.2.1'
+gem 'puma'
 gem 'vite_rails'
 # metrics on heroku
 gem 'barnes'
@@ -136,8 +136,6 @@ GEM
    audited (5.4.1)
      activerecord (>= 5.0, < 7.7)
      activesupport (>= 5.0, < 7.7)
-    auth-sanitizer (0.2.1)
-      version_gem (~> 1.1, >= 1.1.10)
    aws-actionmailbox-ses (0.1.0)
      actionmailbox (>= 7.1.0)
      aws-sdk-s3 (~> 1, >= 1.123.0)
@@ -170,7 +168,7 @@ GEM
    base64 (0.3.0)
    bcrypt (3.1.22)
    benchmark (0.4.1)
-    bigdecimal (3.3.1)
+    bigdecimal (3.2.2)
    bindex (0.8.1)
    bootsnap (1.16.0)
      msgpack (~> 1.2)
@@ -186,7 +184,6 @@ GEM
      bundler (>= 1.2.0, < 3)
      thor (~> 1.0)
    byebug (11.1.3)
-    cgi (0.5.1)
    childprocess (5.1.0)
      logger (~> 1.5)
    cld3 (3.7.0)
@@ -315,7 +312,7 @@ GEM
      hashie
    faraday-multipart (1.2.0)
      multipart-post (~> 2.0)
-    faraday-net_http (3.4.4)
+    faraday-net_http (3.4.2)
      net-http (~> 0.5)
    faraday-net_http_persistent (2.1.0)
      faraday (~> 2.5)
@@ -438,8 +435,7 @@ GEM
    hana (1.3.7)
    hash_diff (1.1.1)
    hashdiff (1.1.0)
-    hashie (5.1.0)
-      logger
+    hashie (5.0.0)
    html2text (0.4.0)
      nokogiri (>= 1.0, < 2.0)
    http (5.1.1)
@@ -474,7 +470,7 @@ GEM
      rails-dom-testing (>= 1, < 3)
      railties (>= 4.2.0)
      thor (>= 0.14, < 2.0)
-    json (2.19.8)
+    json (2.19.5)
    json_refs (0.1.8)
      hana
    json_schemer (0.2.24)
@@ -572,7 +568,7 @@ GEM
      ruby2_keywords
    msgpack (1.8.0)
    multi_json (1.15.0)
-    multi_xml (0.9.1)
+    multi_xml (0.8.0)
      bigdecimal (>= 3.1, < 5)
    multipart-post (2.4.1)
    mutex_m (0.3.0)
@@ -597,7 +593,7 @@ GEM
      sidekiq
    newrelic_rpm (9.6.0)
      base64
-    nio4r (2.7.5)
+    nio4r (2.7.3)
    nokogiri (1.19.3)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
@@ -607,26 +603,19 @@ GEM
      racc (~> 1.4)
    nokogiri (1.19.3-x86_64-linux-gnu)
      racc (~> 1.4)
-    oauth (1.1.6)
-      auth-sanitizer (~> 0.2, >= 0.2.1)
-      base64 (~> 0.1)
-      cgi
-      oauth-tty (~> 1.0, >= 1.0.8)
-      snaky_hash (~> 2.0, >= 2.0.5)
-      version_gem (~> 1.1, >= 1.1.11)
-    oauth-tty (1.0.8)
-      auth-sanitizer (~> 0.1, >= 0.1.3)
-      cgi
-      version_gem (~> 1.1, >= 1.1.9)
-    oauth2 (2.0.22)
-      auth-sanitizer (~> 0.2, >= 0.2.1)
-      faraday (>= 0.17.3, < 4.0)
-      jwt (>= 1.0, < 4.0)
-      logger (~> 1.2)
+    oauth (1.1.0)
+      oauth-tty (~> 1.0, >= 1.0.1)
+      snaky_hash (~> 2.0)
+      version_gem (~> 1.1)
+    oauth-tty (1.0.5)
+      version_gem (~> 1.1, >= 1.1.1)
+    oauth2 (2.0.9)
+      faraday (>= 0.17.3, < 3.0)
+      jwt (>= 1.0, < 3.0)
      multi_xml (~> 0.5)
      rack (>= 1.2, < 4)
-      snaky_hash (~> 2.0, >= 2.0.5)
-      version_gem (~> 1.1, >= 1.1.11)
+      snaky_hash (~> 2.0)
+      version_gem (~> 1.1)
    oj (3.16.10)
      bigdecimal (>= 3.0)
      ostruct (>= 0.2)
@@ -693,7 +682,7 @@ GEM
    pry-rails (0.3.9)
      pry (>= 0.10.4)
    public_suffix (7.0.5)
-    puma (7.2.1)
+    puma (6.4.3)
      nio4r (~> 2.0)
    pundit (2.3.0)
      activesupport (>= 3.0.0)
@@ -946,9 +935,9 @@ GEM
      gli
      hashie
      logger
-    snaky_hash (2.0.5)
-      hashie (>= 0.1.0, < 6)
-      version_gem (>= 1.1.8, < 3)
+    snaky_hash (2.0.1)
+      hashie
+      version_gem (~> 1.1, >= 1.1.1)
    sorbet-runtime (0.5.11934)
    spring (4.1.1)
    spring-watcher-listen (2.1.0)
@@ -1006,7 +995,7 @@ GEM
    valid_email2 (5.2.6)
      activemodel (>= 3.2)
      mail (~> 2.5)
-    version_gem (1.1.11)
+    version_gem (1.1.4)
    vite_rails (3.10.0)
      railties (>= 5.1, < 9)
      vite_ruby (~> 3.0, >= 3.2.2)
@@ -1143,7 +1132,7 @@ DEPENDENCIES
  pgvector
  procore-sift
  pry-rails
-  puma (~> 7.2, >= 7.2.1)
+  puma
  pundit
  rack-attack (>= 6.7.0)
  rack-cors (= 2.0.0)
@@ -1 +1 @@
-4.14.2
+4.14.1
@@ -50,7 +50,7 @@ class ContactInboxWithContactBuilder

  def create_contact
    account.contacts.create!(
-      name: contact_name,
+      name: contact_attributes[:name] || ::Haikunator.haikunate(1000),
      phone_number: contact_attributes[:phone_number],
      email: contact_attributes[:email],
      identifier: contact_attributes[:identifier],
@@ -59,11 +59,6 @@ class ContactInboxWithContactBuilder
    )
  end

-  def contact_name
-    name = contact_attributes[:name] || ::Haikunator.haikunate(1000)
-    name.truncate(ApplicationRecord::MAX_STRING_COLUMN_LENGTH, omission: '')
-  end
-
  def find_contact
    contact = find_contact_by_identifier(contact_attributes[:identifier])
    contact ||= find_contact_by_email(contact_attributes[:email])
@@ -20,7 +20,7 @@ class Api::V1::Accounts::Channels::TwilioChannelsController < Api::V1::Accounts:
    ActiveRecord::Base.transaction do
      authenticate_twilio
      build_inbox
-      setup_webhooks
+      setup_webhooks if @twilio_channel.sms?
    end
  end

@@ -16,10 +16,6 @@ class Api::V1::Accounts::OnboardingsController < Api::V1::Accounts::BaseControll
    render 'api/v1/accounts/update', format: :json
  end

-  def help_center_generation
-    render json: help_center_generation_status
-  end
-
  private

  def finalizing_account_details?
@@ -37,15 +33,4 @@ class Api::V1::Accounts::OnboardingsController < Api::V1::Accounts::BaseControll
  def custom_attributes_params
    params.permit(:industry, :company_size, :timezone, :referral_source, :user_role, :website)
  end
-
-  def help_center_generation_status
-    {
-      generation_id: nil,
-      state: nil,
-      articles_count: 0,
-      categories_count: 0
-    }
-  end
 end
-
-Api::V1::Accounts::OnboardingsController.prepend_mod_with('Api::V1::Accounts::OnboardingsController')
@@ -80,15 +80,10 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
      :id, :color, :custom_domain, :header_text, :homepage_link,
      :name, :page_title, :slug, :archived,
      { config: [:default_locale, :layout, { allowed_locales: [] }, { draft_locales: [] },
-                 { social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] },
-                 { locale_translations: locale_translation_keys.index_with { %i[name page_title header_text] } }] }
+                 { social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] }] }
    )
  end

-  def locale_translation_keys
-    params.dig(:portal, :config, :locale_translations)&.keys || []
-  end
-
  def live_chat_widget_params
    permitted_params = params.permit(:inbox_id)
    return {} unless permitted_params.key?(:inbox_id)
@@ -1,9 +1,8 @@
 module AccessTokenAuthHelper
  BOT_ACCESSIBLE_ENDPOINTS = {
-    'api/v1/accounts/conversations' => %w[show toggle_status toggle_typing_status toggle_priority create update custom_attributes],
+    'api/v1/accounts/conversations' => %w[toggle_status toggle_typing_status toggle_priority create update custom_attributes],
    'api/v1/accounts/conversations/messages' => ['create'],
-    'api/v1/accounts/conversations/assignments' => ['create'],
-    'api/v1/accounts/conversations/labels' => %w[index create]
+    'api/v1/accounts/conversations/assignments' => ['create']
  }.freeze

  def ensure_access_token
@@ -9,7 +9,7 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
  layout 'portal'

  def show
-    @og_image_url = helpers.set_og_image_url('', @portal.localized_value('header_text', @locale))
+    @og_image_url = helpers.set_og_image_url('', @portal.header_text)
  end

  def sitemap
@@ -12,7 +12,7 @@ class ContactDrop < BaseDrop
  end

  def first_name
-    @obj.try(:name).try(:split).try(:first).try(:capitalize)
+    @obj.try(:name).try(:split).try(:first).try(:capitalize) if @obj.try(:name).try(:split).try(:size) > 1
  end

  def last_name
@@ -12,7 +12,7 @@ class UserDrop < BaseDrop
  end

  def first_name
-    @obj.try(:name).try(:split).try(:first).try(:capitalize)
+    @obj.try(:name).try(:split).try(:first).try(:capitalize) if @obj.try(:name).try(:split).try(:size).to_i > 1
  end

  def last_name
@@ -40,7 +40,7 @@ class ConversationFinder
  def perform
    set_up

-    mine_count, unassigned_count, all_count = set_count_for_all_conversations
+    mine_count, unassigned_count, all_count, = set_count_for_all_conversations
    assigned_count = all_count - unassigned_count

    filter_by_assignee_type
@@ -184,17 +184,6 @@ class ConversationFinder
  end

  def set_count_for_all_conversations
-    return legacy_count_for_all_conversations if @conversations.limit_value || @conversations.offset_value || @conversations.eager_loading?
-
-    counts = @conversations.unscope(:order).pick(
-      Arel.sql("COUNT(*) FILTER (WHERE assignee_id = #{current_user.id})"),
-      Arel.sql('COUNT(*) FILTER (WHERE assignee_id IS NULL)'),
-      Arel.sql('COUNT(*)')
-    )
-    counts || [0, 0, 0]
-  end
-
-  def legacy_count_for_all_conversations
    [
      @conversations.assigned_to(current_user).count,
      @conversations.unassigned.count,
@@ -34,12 +34,6 @@ disable_branding:
  enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
  icon: 'icon-sailbot-fill'
  enterprise: true
-voice_calls:
-  name: 'Voice Calls'
-  description: 'Enable voice calling capabilities for your agents and customers.'
-  enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
-  icon: 'icon-voice-line'
-  enterprise: true

 # ------- Product Features ------- #
 help_center:
@@ -48,12 +48,6 @@ class TwilioVoiceClient extends EventTarget {
    return !!this.activeConnection;
  }

-  setMuted(shouldMute) {
-    if (!this.activeConnection) return false;
-    this.activeConnection.mute(shouldMute);
-    return shouldMute;
-  }
-
  endClientCall() {
    if (this.activeConnection) {
      this.activeConnection.disconnect();
@@ -60,12 +60,6 @@ class Inboxes extends CacheEnabledApiClient {
  disableWhatsappCalling(inboxId) {
    return axios.post(`${this.url}/${inboxId}/disable_whatsapp_calling`);
  }
-
-  setInboundCalls(inboxId, enabled) {
-    return axios.post(`${this.url}/${inboxId}/set_inbound_calls`, {
-      inbound_calls_enabled: enabled,
-    });
-  }
 }

 export default new Inboxes();
@@ -9,10 +9,6 @@ class OnboardingAPI extends ApiClient {
  update(data) {
    return axios.patch(this.url, data);
  }
-
-  getHelpCenterGeneration() {
-    return axios.get(`${this.url}/help_center_generation`);
-  }
 }

 export default new OnboardingAPI();
@@ -46,8 +46,9 @@ const formattedLastActivityAt = computed(() => {
        :src="avatarSource"
        class="shrink-0"
        :name="name"
-        :size="42"
+        :size="48"
        hide-offline-status
+        rounded-full
      />
      <div class="flex flex-col gap-0.5 flex-1 min-w-0">
        <div class="flex flex-wrap items-center gap-x-4 gap-y-1 min-w-0">
@@ -141,6 +141,7 @@ const handleUpdateCompany = async () => {
        :src="avatarSource"
        :size="72"
        :allow-upload="!isAvatarBusy"
+        rounded-full
        hide-offline-status
        @upload="handleAvatarUpload"
        @delete="handleAvatarDelete"
@@ -124,9 +124,10 @@ const handleAvatarHover = isHovered => {
          <Avatar
            :name="name"
            :src="thumbnail"
-            :size="42"
+            :size="48"
            :status="availabilityStatus"
            hide-offline-status
+            rounded-full
          >
            <template v-if="selectable" #overlay="{ size }">
              <label
@@ -53,9 +53,6 @@ const localeMenuLabels = computed(() => ({
  'publish-locale': t(
    'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.PUBLISH_LOCALE'
  ),
-  'customize-content': t(
-    'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.CUSTOMIZE_CONTENT'
-  ),
  delete: t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE'),
 }));

@@ -131,7 +128,7 @@ const handleAction = ({ action, value }) => {
          <DropdownMenu
            v-if="showDropdownMenu"
            :menu-items="localeMenuItems"
-            class="ltr:right-0 rtl:left-0 mt-1 top-full z-60 min-w-[150px]"
+            class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
            @action="handleAction"
          />
        </div>
@@ -59,13 +59,38 @@ const articles = [
    views: 400,
  },
 ];
+
+const categories = [
+  { id: 1, name: 'Getting started', icon: '🚀' },
+  { id: 2, name: 'Marketing', icon: '⚡️' },
+  { id: 3, name: 'Development', icon: '🛠️' },
+];
+
+const allowedLocales = [{ code: 'en', name: 'English' }];
+
+const portalName = 'Chatwoot Help Center';
+
+const meta = {
+  currentPage: 1,
+  allArticlesCount: articles.length,
+  articlesCount: articles.length,
+  mineArticlesCount: 2,
+  draftArticlesCount: 1,
+  archivedArticlesCount: 2,
+};
 </script>

 <template>
  <Story title="Pages/HelpCenter/ArticlesPage" :layout="{ type: 'single' }">
    <Variant title="All Articles">
      <div class="w-full min-h-screen bg-n-background">
-        <ArticlesPage :articles="articles" />
+        <ArticlesPage
+          :articles="articles"
+          :categories="categories"
+          :allowed-locales="allowedLocales"
+          :portal-name="portalName"
+          :meta="meta"
+        />
      </div>
    </Variant>
  </Story>
@@ -3,206 +3,62 @@ import CategoriesPage from './CategoriesPage.vue';

 const categories = [
  {
-    id: 'getting-started',
-    title: '🚀 Getting started',
+    id: 1,
+    name: 'Getting started',
+    icon: '🚀',
+    slug: 'getting-started',
    description:
      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
-    articlesCount: '2',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-    ],
+    meta: { articles_count: 12 },
  },
  {
-    id: 'marketing',
-    title: 'Marketing',
+    id: 2,
+    name: 'Marketing',
+    icon: '⚡️',
+    slug: 'marketing',
    description:
      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support.',
-    articlesCount: '4',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-      {
-        variant: 'Archived article',
-        title: 'Best practices for organizing your Help Center content',
-        status: 'archived',
-        updatedAt: '3 days ago',
-        author: 'Fernando',
-        category: '💰 Finance',
-        views: 400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Customizing the appearance of your Help Center',
-        status: '',
-        updatedAt: '5 days ago',
-        author: 'Jane',
-        category: '💰 Finance',
-        views: 400,
-      },
-    ],
+    meta: { articles_count: 4 },
  },
  {
-    id: 'development',
-    title: 'Development',
+    id: 3,
+    name: 'Development',
+    icon: '🛠️',
+    slug: 'development',
    description: '',
-    articlesCount: '5',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-      {
-        variant: 'Archived article',
-        title: 'Best practices for organizing your Help Center content',
-        status: 'archived',
-        updatedAt: '3 days ago',
-        author: 'Fernando',
-        category: '💰 Finance',
-        views: 400,
-      },
-      {
-        variant: 'Archived article',
-        title: 'Best practices for organizing your Help Center content',
-        status: 'archived',
-        updatedAt: '3 days ago',
-        author: 'Fernando',
-        category: '💰 Finance',
-        views: 400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Customizing the appearance of your Help Center',
-        status: '',
-        updatedAt: '5 days ago',
-        author: 'Jane',
-        category: '💰 Finance',
-        views: 400,
-      },
-    ],
+    meta: { articles_count: 5 },
  },
  {
-    id: 'roadmap',
-    title: '🛣️ Roadmap',
+    id: 4,
+    name: 'Roadmap',
+    icon: '🛣️',
+    slug: 'roadmap',
    description:
      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
-    articlesCount: '3',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-    ],
+    meta: { articles_count: 3 },
  },
  {
-    id: 'finance',
-    title: '💰 Finance',
+    id: 5,
+    name: 'Finance',
+    icon: '💰',
+    slug: 'finance',
    description:
      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
-    articlesCount: '2',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-    ],
+    meta: { articles_count: 2 },
  },
 ];
+
+const allowedLocales = [{ code: 'en', name: 'English' }];
 </script>

 <template>
  <Story title="Pages/HelpCenter/CategoryPage" :layout="{ type: 'single' }">
    <Variant title="All Categories">
      <div class="w-full min-h-screen bg-n-background">
-        <CategoriesPage :categories="categories" />
+        <CategoriesPage
+          :categories="categories"
+          :allowed-locales="allowedLocales"
+        />
      </div>
    </Variant>
  </Story>
@@ -1,98 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-
-const props = defineProps({
-  portal: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const { t } = useI18n();
-const store = useStore();
-
-const dialogRef = ref(null);
-const activeLocale = ref('');
-const name = ref('');
-const pageTitle = ref('');
-const headerText = ref('');
-
-const localeTranslations = computed(
-  () => props.portal?.config?.locale_translations || {}
-);
-
-const openForLocale = localeCode => {
-  const existing = localeTranslations.value[localeCode] || {};
-  activeLocale.value = localeCode;
-  name.value = existing.name || '';
-  pageTitle.value = existing.page_title || '';
-  headerText.value = existing.header_text || '';
-  dialogRef.value?.open();
-};
-
-const onConfirm = async () => {
-  const translations = { ...localeTranslations.value };
-  const fields = {};
-  if (name.value.trim()) fields.name = name.value.trim();
-  if (pageTitle.value.trim()) fields.page_title = pageTitle.value.trim();
-  if (headerText.value.trim()) fields.header_text = headerText.value.trim();
-
-  if (Object.keys(fields).length) {
-    translations[activeLocale.value] = fields;
-  } else {
-    delete translations[activeLocale.value];
-  }
-
-  try {
-    await store.dispatch('portals/update', {
-      portalSlug: props.portal?.slug,
-      config: { locale_translations: translations },
-    });
-    dialogRef.value?.close();
-    useAlert(t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    useAlert(
-      error?.message ||
-        t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.API.ERROR_MESSAGE')
-    );
-  }
-};
-
-defineExpose({ openForLocale });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.TITLE')"
-    :description="t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.DESCRIPTION')"
-    @confirm="onConfirm"
-  >
-    <div class="flex flex-col gap-4">
-      <div class="flex flex-col gap-1">
-        <label class="text-sm font-medium text-n-slate-12">
-          {{ t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.NAME.LABEL') }}
-        </label>
-        <Input v-model="name" :placeholder="portal.name" />
-      </div>
-      <div class="flex flex-col gap-1">
-        <label class="text-sm font-medium text-n-slate-12">
-          {{ t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.PAGE_TITLE.LABEL') }}
-        </label>
-        <Input v-model="pageTitle" :placeholder="portal.page_title" />
-      </div>
-      <div class="flex flex-col gap-1">
-        <label class="text-sm font-medium text-n-slate-12">
-          {{ t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.HEADER_TEXT.LABEL') }}
-        </label>
-        <Input v-model="headerText" :placeholder="portal.header_text" />
-      </div>
-    </div>
-  </Dialog>
-</template>
@@ -1,7 +1,5 @@
 <script setup>
-import { ref } from 'vue';
 import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
-import LocaleContentDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleContentDialog.vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -25,8 +23,6 @@ const { t } = useI18n();
 const route = useRoute();
 const { uiSettings, updateUISettings } = useUISettings();

-const contentDialogRef = ref(null);
-
 const isLocaleDefault = code => {
  return props.portal?.meta?.default_locale === code;
 };
@@ -152,8 +148,6 @@ const handleAction = ({ action }, localeCode) => {
    moveLocaleToDraft({ localeCode: localeCode });
  } else if (action === 'publish-locale') {
    publishLocale({ localeCode: localeCode });
-  } else if (action === 'customize-content') {
-    contentDialogRef.value.openForLocale(localeCode);
  } else if (action === 'delete') {
    deletePortalLocale({ localeCode: localeCode });
  }
@@ -173,6 +167,5 @@ const handleAction = ({ action }, localeCode) => {
      :category-count="locale.categoriesCount || 0"
      @action="handleAction($event, locale.code)"
    />
-    <LocaleContentDialog ref="contentDialogRef" :portal="portal" />
  </ul>
 </template>
@@ -1,12 +1,28 @@
 <script setup>
 import PortalSettings from './PortalSettings.vue';
+
+// `slug` matches the route the stories harness seeds (portals/chatwoot), so
+// PortalSettings resolves an active portal and renders the settings forms.
+const portals = [
+  {
+    id: 1,
+    name: 'Chatwoot Help Center',
+    slug: 'chatwoot',
+    header_text: 'How can we help you today?',
+    page_title: 'Chatwoot Help Center',
+    homepage_link: 'https://www.chatwoot.com',
+    custom_domain: '',
+    config: {},
+    ssl_settings: {},
+  },
+];
 </script>

 <template>
  <Story title="Pages/HelpCenter/PortalSettings" :layout="{ type: 'single' }">
    <Variant title="Default">
      <div class="w-[1000px] min-h-screen bg-n-background">
-        <PortalSettings />
+        <PortalSettings :portals="portals" :is-fetching="false" />
      </div>
    </Variant>
  </Story>
@@ -182,10 +182,7 @@ const MIN_SEARCH_LENGTH = 2;
 export const createContactSearcher = () => {
  let controller = null;

-  return async (
-    query,
-    { skipMinLength = false, reachableOnly = true } = {}
-  ) => {
+  return async (query, { skipMinLength = false } = {}) => {
    const trimmed = typeof query === 'string' ? query.trim() : '';

    controller?.abort();
@@ -202,8 +199,6 @@ export const createContactSearcher = () => {
      } = await ContactAPI.search(trimmed, 1, 'name', '', { signal });

      const camelCasedPayload = camelcaseKeys(payload, { deep: true });
-      if (!reachableOnly) return camelCasedPayload || [];
-
      // Filter contacts that have either phone_number or email
      const filteredPayload = camelCasedPayload?.filter(
        contact => contact.phoneNumber || contact.email
@@ -197,9 +197,9 @@ const channelIcon = computed(() => {
                ? $t('CONVERSATION.VOICE_WIDGET.END_CALL')
                : $t('CONVERSATION.VOICE_WIDGET.REJECT_CALL')
            "
-            icon="i-ph-phone-bold"
+            icon="i-ph-phone-x-bold"
            ruby
-            class="!rounded-full rotate-[135deg]"
+            class="!rounded-full rotate-[134deg]"
            @click="isOngoing ? $emit('end') : $emit('reject')"
          />
        </div>
@@ -4,7 +4,6 @@ import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import { useCallSession } from 'dashboard/composables/useCallSession';
 import { setWhatsappCallMuted } from 'dashboard/composables/useWhatsappCallSession';
-import TwilioVoiceClient from 'dashboard/api/channel/voice/twilioVoiceClient';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import { VOICE_CALL_PROVIDERS } from 'dashboard/helper/inbox';
 import { VOICE_CALL_DIRECTION } from 'dashboard/components-next/message/constants';
@@ -12,7 +11,7 @@ import WindowVisibilityHelper from 'dashboard/helper/AudioAlerts/WindowVisibilit
 import CallCard from 'dashboard/components-next/call/CallCard.vue';
 import countriesList from 'shared/constants/countries.js';

-const RINGTONE_URL = '/audio/dashboard/ringtone.mp3';
+const RINGTONE_URL = '/audio/dashboard/bell.mp3';

 const route = useRoute();
 const router = useRouter();
@@ -30,8 +29,8 @@ const {
  formattedCallDuration,
 } = useCallSession();

-// Mute routes by provider: WhatsApp toggles the local mic track, Twilio uses
-// the Voice SDK connection's native mute. Both surface the same button.
+// Mute is currently WhatsApp-only — Twilio calls are mediated server-side and
+// don't expose a mic track on the browser side.
 const isMuted = ref(false);
 const isWhatsappActive = computed(
  () => activeCall.value?.provider === VOICE_CALL_PROVIDERS.WHATSAPP
@@ -64,11 +63,7 @@ const stackedCardState = call =>

 const toggleMute = () => {
  isMuted.value = !isMuted.value;
-  if (isWhatsappActive.value) {
-    setWhatsappCallMuted(isMuted.value);
-  } else {
-    TwilioVoiceClient.setMuted(isMuted.value);
-  }
+  setWhatsappCallMuted(isMuted.value);
 };

 watch(hasActiveCall, active => {
@@ -261,7 +256,7 @@ onBeforeUnmount(stopRingtone);
      :call-info="getCallInfo(activeCall || primaryIncomingCall)"
      :duration="hasActiveCall ? formattedCallDuration : ''"
      :is-muted="isMuted"
-      :show-mute="hasActiveCall"
+      :show-mute="hasActiveCall && isWhatsappActive"
      @accept="handleJoinCall(primaryIncomingCall)"
      @reject="rejectIncomingCall(primaryIncomingCall?.callSid)"
      @dismiss="dismissCall(primaryIncomingCall?.callSid)"
@@ -2,44 +2,51 @@
 import { ref } from 'vue';
 import Copilot from './Copilot.vue';

-const supportAgent = {
-  available_name: 'Pranav Raj',
-  avatar_url:
-    'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBd3FodGc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--d218a325af0ef45061eefd352f8efb9ac84275e8/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lKYW5CbFp3WTZCa1ZVT2hOeVpYTnBlbVZmZEc5ZlptbHNiRnNIYVFINk1BPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--533c3ad7218e24c4b0e8f8959dc1953ce1d279b9/1707423736896.jpeg',
-};
-
 const messages = ref([
  {
    id: 1,
-    role: 'user',
-    content: 'Hi there! How can I help you today?',
+    message_type: 'user',
+    message: { content: 'Hi there! How can I help you today?' },
  },
  {
    id: 2,
-    role: 'assistant',
-    content:
-      "Hello! I'm the AI assistant. I'll be helping the support team today.",
+    message_type: 'assistant_thinking',
+    message: {
+      content: 'Analyzing the conversation',
+      reasoning: 'Breaking down the request into actionable steps',
+    },
+  },
+  {
+    id: 3,
+    message_type: 'assistant_thinking',
+    message: {
+      content: 'Searching the knowledge base',
+      reasoning: 'Looking for relevant articles and past replies',
+    },
+  },
+  {
+    id: 4,
+    message_type: 'assistant',
+    message: {
+      content:
+        "Hello! I'm the AI assistant. I'll be helping the support team today.",
+    },
  },
 ]);

-const isCaptainTyping = ref(false);
-
 const sendMessage = message => {
-  // Add user message
  messages.value.push({
    id: messages.value.length + 1,
-    role: 'user',
-    content: message,
+    message_type: 'user',
+    message: { content: message },
  });

  // Simulate AI response
-  isCaptainTyping.value = true;
  setTimeout(() => {
-    isCaptainTyping.value = false;
    messages.value.push({
      id: messages.value.length + 1,
-      role: 'assistant',
-      content: 'This is a simulated AI response.',
+      message_type: 'assistant',
+      message: { content: 'This is a simulated AI response.' },
    });
  }, 2000);
 };
@@ -51,9 +58,8 @@ const sendMessage = message => {
    :layout="{ type: 'grid', width: '400px', height: '800px' }"
  >
    <Copilot
-      :support-agent="supportAgent"
      :messages="messages"
-      :is-captain-typing="isCaptainTyping"
+      conversation-inbox-type="Channel::WebWidget"
      @send-message="sendMessage"
    />
  </Story>
@@ -4,18 +4,24 @@ import CopilotThinkingGroup from './CopilotThinkingGroup.vue';
 const messages = [
  {
    id: 1,
-    content: 'Analyzing the user query',
-    reasoning: 'Breaking down the request into actionable steps',
+    message: {
+      content: 'Analyzing the user query',
+      reasoning: 'Breaking down the request into actionable steps',
+    },
  },
  {
    id: 2,
-    content: 'Searching codebase',
-    reasoning: 'Looking for relevant files and functions',
+    message: {
+      content: 'Searching codebase',
+      reasoning: 'Looking for relevant files and functions',
+    },
  },
  {
    id: 3,
-    content: 'Generating response',
-    reasoning: 'Composing a helpful and accurate answer',
+    message: {
+      content: 'Generating response',
+      reasoning: 'Composing a helpful and accurate answer',
+    },
  },
 ];
 </script>
@@ -1,7 +1,6 @@
 <script setup>
 import { computed, h, watch, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { debounce } from '@chatwoot/utils';
 import Button from 'next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
 import FilterSelect from './inputs/FilterSelect.vue';
@@ -110,34 +109,6 @@ const inputFieldType = computed(() => {
  return 'text';
 });

-const asyncOptions = ref([]);
-const isSearching = ref(false);
-const lastSearchQuery = ref('');
-
-const performAsyncSearch = async query => {
-  let results;
-  try {
-    results = await currentFilter.value.searchOptions(query);
-  } catch {
-    results = [];
-  }
-  // skip stale responses — a newer search in this row owns the UI
-  if (query !== lastSearchQuery.value) return;
-  // null means another row's search aborted ours, reset instead of staying stuck on the searching state
-  if (results !== null) asyncOptions.value = results;
-  isSearching.value = false;
-};
-
-const debouncedAsyncSearch = debounce(performAsyncSearch, 300);
-
-const onAsyncSearch = query => {
-  const hasQuery = !!query.trim();
-  lastSearchQuery.value = query;
-  if (!hasQuery) asyncOptions.value = [];
-  isSearching.value = hasQuery;
-  debouncedAsyncSearch(query);
-};
-
 const resetModelOnAttributeKeyChange = newAttributeKey => {
  /**
   * Resets the filter values and operator when the attribute key changes. This ensures that
@@ -150,16 +121,11 @@ const resetModelOnAttributeKeyChange = newAttributeKey => {
  const newInputType = getInputType(newOperator, filter);
  if (newInputType === 'multiSelect') {
    values.value = [];
-  } else if (
-    ['searchSelect', 'asyncSearchSelect', 'booleanSelect'].includes(
-      newInputType
-    )
-  ) {
+  } else if (['searchSelect', 'booleanSelect'].includes(newInputType)) {
    values.value = {};
  } else {
    values.value = '';
  }
-  asyncOptions.value = [];
  filterOperator.value = newOperator.value;
 };

@@ -219,16 +185,6 @@ defineExpose({ validate, resetValidation });
          :options="currentFilter.options"
          dropdown-max-height="max-h-64"
        />
-        <SingleSelect
-          v-else-if="inputType === 'asyncSearchSelect'"
-          v-model="values"
-          async-search
-          :options="asyncOptions"
-          :is-searching="isSearching"
-          :search-placeholder="currentFilter.searchPlaceholder"
-          dropdown-max-height="max-h-64"
-          @search="onAsyncSearch"
-        />
        <SingleSelect
          v-else-if="inputType === 'booleanSelect'"
          v-model="values"
@@ -7,7 +7,6 @@ export const CONVERSATION_ATTRIBUTES = {
  ASSIGNEE_ID: 'assignee_id',
  INBOX_ID: 'inbox_id',
  TEAM_ID: 'team_id',
-  CONTACT_ID: 'contact_id',
  DISPLAY_ID: 'display_id',
  CAMPAIGN_ID: 'campaign_id',
  LABELS: 'labels',
@@ -1,37 +1,9 @@
-import { ref } from 'vue';
-import ContactAPI from 'dashboard/api/contacts';
-import { useMapGetter } from 'dashboard/composables/store.js';
-import { useConversationFilterContext } from '../provider';
 import {
-  CONVERSATION_ATTRIBUTES,
  getCustomAttributeInputType,
  buildAttributesFilterTypes,
  replaceUnderscoreWithSpace,
 } from './filterHelper';

-vi.mock('dashboard/api/contacts', () => ({
-  default: {
-    search: vi.fn(),
-  },
-}));
-
-vi.mock('dashboard/composables/store.js', () => ({
-  useMapGetter: vi.fn(),
-}));
-
-vi.mock('next/icon/provider', () => ({
-  useChannelIcon: () => ref('i-test-channel'),
-}));
-
-vi.mock('vue-i18n', () => ({
-  useI18n: () => ({
-    t: (key, params = {}) => {
-      if (key === 'FILTER.CONTACT_FALLBACK') return `Contact #${params.id}`;
-      return key;
-    },
-  }),
-}));
-
 describe('filterHelper', () => {
  describe('getCustomAttributeInputType', () => {
    it('returns date for date type', () => {
@@ -163,64 +135,3 @@ describe('filterHelper', () => {
    });
  });
 });
-
-const storeValues = {
-  'attributes/getConversationAttributes': ref([]),
-  'labels/getLabels': ref([]),
-  'agents/getAgents': ref([]),
-  'inboxes/getInboxes': ref([]),
-  'teams/getTeams': ref([]),
-  'campaigns/getAllCampaigns': ref([]),
-};
-
-describe('useConversationFilterContext', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    useMapGetter.mockImplementation(key => storeValues[key] || ref([]));
-  });
-
-  it('exposes contact as an async searchable conversation filter', () => {
-    const { filterTypes } = useConversationFilterContext();
-    const contactFilter = filterTypes.value.find(
-      filter => filter.attributeKey === CONVERSATION_ATTRIBUTES.CONTACT_ID
-    );
-
-    expect(contactFilter).toMatchObject({
-      attributeKey: 'contact_id',
-      label: 'FILTER.ATTRIBUTES.CONTACT',
-      inputType: 'asyncSearchSelect',
-      dataType: 'number',
-      attributeModel: 'standard',
-    });
-    expect(
-      contactFilter.filterOperators.map(operator => operator.value)
-    ).toEqual(['equal_to', 'not_equal_to']);
-  });
-
-  it('uses the existing contact search API for contact filter options', async () => {
-    ContactAPI.search.mockResolvedValue({
-      data: {
-        payload: [
-          { id: 1, name: 'Jane Doe' },
-          { id: 2, email: 'alex@example.com' },
-          { id: 3 },
-        ],
-      },
-    });
-
-    const { filterTypes } = useConversationFilterContext();
-    const contactFilter = filterTypes.value.find(
-      filter => filter.attributeKey === CONVERSATION_ATTRIBUTES.CONTACT_ID
-    );
-    const options = await contactFilter.searchOptions('jane');
-
-    expect(ContactAPI.search).toHaveBeenCalledWith('jane', 1, 'name', '', {
-      signal: expect.any(AbortSignal),
-    });
-    expect(options).toEqual([
-      { id: 1, name: 'Jane Doe' },
-      { id: 2, name: 'alex@example.com' },
-      { id: 3, name: 'Contact #3' },
-    ]);
-  });
-});
@@ -11,8 +11,6 @@ import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';

 const {
  options,
-  asyncSearch,
-  isSearching,
  disableSearch,
  disableDeselect,
  placeholderIcon,
@@ -25,14 +23,6 @@ const {
    type: Array,
    required: true,
  },
-  asyncSearch: {
-    type: Boolean,
-    default: false,
-  },
-  isSearching: {
-    type: Boolean,
-    default: false,
-  },
  disableSearch: {
    type: Boolean,
    default: false,
@@ -63,12 +53,6 @@ const {
  },
 });

-const emit = defineEmits(['search']);
-
-// the input is re-inserted on every dropdown open (v-if),
-// where the native autofocus attribute is ignored so focus it via a directive instead
-const vFocus = { mounted: el => el.focus() };
-
 const { t } = useI18n();
 const selected = defineModel({
  type: Object,
@@ -76,9 +60,7 @@ const selected = defineModel({
 });

 const searchTerm = ref('');
-
 const searchResults = computed(() => {
-  if (asyncSearch) return options;
  if (!options) return [];
  return picoSearch(options, searchTerm.value, ['name']);
 });
@@ -95,11 +77,7 @@ const selectedItem = computed(() => {
  if (!optionToSearch) return null;
  // extract the selected item from the options array
  // this ensures that options like icon is also included
-  return (
-    options.find(option => option.id === optionToSearch.id) ||
-    // async options may not include the selected option, fall back to it
-    (asyncSearch && optionToSearch.id !== undefined ? optionToSearch : null)
-  );
+  return options.find(option => option.id === optionToSearch.id);
 });

 const toggleSelected = option => {
@@ -153,19 +131,13 @@ const toggleSelected = option => {
        <Icon class="absolute size-4 left-2 top-2" icon="i-lucide-search" />
        <input
          v-model="searchTerm"
-          v-focus
+          autofocus
          class="p-1.5 pl-8 text-n-slate-11 bg-n-alpha-1 rounded-lg w-full"
          :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
-          @input="emit('search', $event.target.value)"
        />
      </div>
      <DropdownSection :height="dropdownMaxHeight">
-        <template v-if="isSearching">
-          <DropdownItem disabled>
-            {{ t('DROPDOWN_MENU.SEARCHING') }}
-          </DropdownItem>
-        </template>
-        <template v-else-if="searchResults.length">
+        <template v-if="searchResults.length">
          <DropdownItem
            v-for="option in searchResults"
            :key="option.id"
@@ -3,7 +3,6 @@ import { useI18n } from 'vue-i18n';
 import { useOperators } from './operators';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useChannelIcon } from 'next/icon/provider';
-import { createContactSearcher } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
 import {
  buildAttributesFilterTypes,
  CONVERSATION_ATTRIBUTES,
@@ -31,7 +30,7 @@ import languages from 'dashboard/components/widgets/conversation/advancedFilterI
 * @property {string} value - This is a proxy for the attribute key used in FilterSelect
 * @property {string} attributeName - The attribute name used to display on the UI
 * @property {string} label - This is a proxy for the attribute name used in FilterSelect
- * @property {'multiSelect'|'searchSelect'|'asyncSearchSelect'|'plainText'|'date'|'booleanSelect'} inputType - The input type for the attribute
+ * @property {'multiSelect'|'searchSelect'|'plainText'|'date'|'booleanSelect'} inputType - The input type for the attribute
 * @property {FilterOption[]} [options] - The options available for the attribute if it is a multiSelect or singleSelect type
 * @property {'text'|'number'} dataType
 * @property {FilterOperator[]} filterOperators - The operators available for the attribute
@@ -69,30 +68,6 @@ export function useConversationFilterContext() {
    getOperatorTypes,
  } = useOperators();

-  const searchContacts = createContactSearcher();
-
-  const contactOptionName = contact =>
-    contact.name ||
-    contact.email ||
-    contact.phoneNumber ||
-    contact.identifier ||
-    t('FILTER.CONTACT_FALLBACK', { id: contact.id });
-
-  const searchContactOptions = async query => {
-    const contacts = await searchContacts(query, {
-      skipMinLength: true,
-      reachableOnly: false,
-    });
-
-    // null means the request was aborted (a newer search is in-flight)
-    if (contacts === null) return null;
-
-    return contacts.map(contact => ({
-      id: contact.id,
-      name: contactOptionName(contact),
-    }));
-  };
-
  /**
   * @type {import('vue').ComputedRef<FilterType[]>}
   */
@@ -183,18 +158,6 @@ export function useConversationFilterContext() {
      filterOperators: presenceOperators.value,
      attributeModel: 'standard',
    },
-    {
-      attributeKey: CONVERSATION_ATTRIBUTES.CONTACT_ID,
-      value: CONVERSATION_ATTRIBUTES.CONTACT_ID,
-      attributeName: t('FILTER.ATTRIBUTES.CONTACT'),
-      label: t('FILTER.ATTRIBUTES.CONTACT'),
-      inputType: 'asyncSearchSelect',
-      searchOptions: searchContactOptions,
-      searchPlaceholder: t('FILTER.CONTACT_SEARCH_PLACEHOLDER'),
-      dataType: 'number',
-      filterOperators: equalityOperators.value,
-      attributeModel: 'standard',
-    },
    {
      attributeKey: CONVERSATION_ATTRIBUTES.DISPLAY_ID,
      value: CONVERSATION_ATTRIBUTES.DISPLAY_ID,
@@ -175,9 +175,6 @@ useEventListener(document, 'touchend', onResizeEnd);

 const inboxes = useMapGetter('inboxes/getInboxes');
 const labels = useMapGetter('labels/getLabelsOnSidebar');
-const allUnreadCount = useMapGetter(
-  'conversationUnreadCounts/getAllUnreadCount'
-);
 const getInboxUnreadCount = useMapGetter(
  'conversationUnreadCounts/getInboxUnreadCount'
 );
@@ -300,7 +297,6 @@ const menuItems = computed(() => {
        {
          name: 'All',
          label: t('SIDEBAR.ALL_CONVERSATIONS'),
-          badgeCount: allUnreadCount.value,
          activeOn: ['inbox_conversation'],
          to: accountScopedRoute('home'),
        },
@@ -145,6 +145,7 @@ const allowedMenuItems = computed(() => {
          :src="currentUser.avatar_url"
          :status="currentUserAvailability"
          class="flex-shrink-0"
+          rounded-full
        />
        <div v-if="!isCollapsed" class="min-w-0">
          <div class="text-sm font-medium leading-4 truncate text-n-slate-12">
@@ -151,9 +151,6 @@ const activeFolder = computed(() => {
  return undefined;
 });

-const getContact = useMapGetter('contacts/getContact');
-const folderContactId = useMapGetter('customViews/getActiveFolderContactId');
-
 const activeFolderName = computed(() => {
  return activeFolder.value?.name;
 });
@@ -459,7 +456,6 @@ function setParamsForEditFolderModal() {
    inboxes: inboxesList.value,
    labels: labels.value,
    campaigns: campaigns.value,
-    contacts: [getContact.value(folderContactId.value)],
    languages: languages,
    countries: countries,
    priority: [
@@ -32,6 +32,7 @@ import {
  CONVERSATION_EVENTS,
  CAPTAIN_EVENTS,
 } from 'dashboard/helper/AnalyticsHelper/events';
+import { MESSAGE_EDITOR_IMAGE_RESIZES } from 'dashboard/constants/editor';

 import {
  messageSchema,
@@ -42,7 +43,6 @@ import {
  MessageMarkdownSerializer,
  EditorState,
  Selection,
-  imageResizeView,
 } from '@chatwoot/prosemirror-schema';
 import {
  suggestionsPlugin,
@@ -57,6 +57,7 @@ import {
  insertAtCursor,
  removeSignature as removeSignatureHelper,
  scrollCursorIntoView,
+  setURLWithQueryAndSize,
  getFormattingForEditor,
  getSelectionCoords,
  calculateMenuPosition,
@@ -71,7 +72,6 @@ import {
 import { createTypingIndicator } from '@chatwoot/utils';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';

 const props = defineProps({
  modelValue: { type: String, default: '' },
@@ -93,6 +93,7 @@ const props = defineProps({
  channelType: { type: String, default: '' },
  conversationId: { type: Number, default: null },
  medium: { type: String, default: '' },
+  showImageResizeToolbar: { type: Boolean, default: false }, // A kill switch to show or hide the image toolbar
  focusOnMount: { type: Boolean, default: true },
 });

@@ -118,14 +119,6 @@ const TYPING_INDICATOR_IDLE_TIME = 4000;
 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
 const DEFAULT_FORMATTING = 'Context::Default';
 const PRIVATE_NOTE_FORMATTING = 'Context::PrivateNote';
-const MESSAGE_SIGNATURE_FORMATTING = 'Context::MessageSignature';
-const INLINE_IMAGE_PASTE_TYPES = [
-  'image/png',
-  'image/jpeg',
-  'image/jpg',
-  'image/gif',
-  'image/webp',
-];

 const effectiveChannelType = computed(() =>
  getEffectiveChannelType(props.channelType, props.medium)
@@ -199,8 +192,12 @@ const cannedSearchTerm = ref('');
 const variableSearchTerm = ref('');
 const emojiSearchTerm = ref('');
 const range = ref(null);
+const isImageNodeSelected = ref(false);
+const toolbarPosition = ref({ top: 0, left: 0 });
+const selectedImageNode = ref(null);
 const isTextSelected = ref(false); // Tracks text selection and prevents unnecessary re-renders on mouse selection
 const showSelectionMenu = ref(false);
+const sizes = MESSAGE_EDITOR_IMAGE_RESIZES;

 // element ref
 const editorRoot = useTemplateRef('editorRoot');
@@ -478,6 +475,16 @@ function removeSignature() {
  reloadState(content);
 }

+function setToolbarPosition() {
+  const editorRect = editorRoot.value.getBoundingClientRect();
+  const rect = selectedImageNode.value.getBoundingClientRect();
+
+  toolbarPosition.value = {
+    top: `${rect.top - editorRect.top - 30}px`,
+    left: `${rect.left - editorRect.left - 4}px`,
+  };
+}
+
 function setMenubarPosition({ selection } = {}) {
  const wrapper = editorRoot.value;
  if (!selection || !wrapper) return;
@@ -513,6 +520,30 @@ function checkSelection(editorState) {
  if (hasSelection) setMenubarPosition(editorState);
 }

+function setURLWithQueryAndImageSize(size) {
+  if (!props.showImageResizeToolbar) {
+    return;
+  }
+  setURLWithQueryAndSize(selectedImageNode.value, size, editorView);
+  isImageNodeSelected.value = false;
+}
+
+function isEditorMouseFocusedOnAnImage() {
+  if (!props.showImageResizeToolbar) {
+    return;
+  }
+  selectedImageNode.value = document.querySelector(
+    'img.ProseMirror-selectednode'
+  );
+  if (selectedImageNode.value) {
+    isImageNodeSelected.value = !!selectedImageNode.value;
+    // Get the position of the selected node
+    setToolbarPosition();
+  } else {
+    isImageNodeSelected.value = false;
+  }
+}
+
 function emitOnChange() {
  emit('input', contentFromEditor());
  emit('update:modelValue', contentFromEditor());
@@ -532,6 +563,21 @@ function toggleSignatureInEditor(signatureEnabled) {
  emitOnChange();
 }

+function updateImgToolbarOnDelete() {
+  // check if the selected node is present or not on keyup
+  // this is needed because the user can select an image and then delete it
+  // in that case, the selected node will be null and we need to hide the toolbar
+  // otherwise, the toolbar will be visible even when the image is deleted and cause some errors
+  if (selectedImageNode.value) {
+    const hasImgSelectedNode = document.querySelector(
+      'img.ProseMirror-selectednode'
+    );
+    if (!hasImgSelectedNode) {
+      isImageNodeSelected.value = false;
+    }
+  }
+}
+
 function isEnterToSendEnabled() {
  return isEditorHotKeyEnabled('enter');
 }
@@ -540,6 +586,17 @@ function isCmdPlusEnterToSendEnabled() {
  return isEditorHotKeyEnabled('cmd_enter');
 }

+useKeyboardEvents({
+  'Alt+KeyP': {
+    action: focusEditorInputField,
+    allowOnFocusedInput: false,
+  },
+  'Alt+KeyL': {
+    action: focusEditorInputField,
+    allowOnFocusedInput: false,
+  },
+});
+
 function onImageInsertInEditor(fileUrl) {
  const { tr } = editorView.state;

@@ -560,11 +617,7 @@ async function uploadImageToStorage(file) {
      onImageInsertInEditor(fileUrl);
    }
    useAlert(
-      props.channelType === MESSAGE_SIGNATURE_FORMATTING
-        ? t(
-            'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SUCCESS'
-          )
-        : t('CONVERSATION.REPLYBOX.IMAGE_UPLOAD_SUCCESS')
+      t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SUCCESS')
    );
  } catch (error) {
    useAlert(
@@ -573,8 +626,8 @@ async function uploadImageToStorage(file) {
  }
 }

-function uploadImageIfWithinSizeLimit(file) {
-  if (!file) return;
+function onFileChange() {
+  const file = imageUpload.value.files[0];
  if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
    uploadImageToStorage(file);
  } else {
@@ -587,61 +640,10 @@ function uploadImageIfWithinSizeLimit(file) {
      )
    );
  }
+
+  imageUpload.value = '';
 }

-function onFileChange() {
-  const input = imageUpload.value;
-  uploadImageIfWithinSizeLimit(input.files[0]);
-  input.value = '';
-}
-
-const allowsInlineImagePaste = computed(
-  () =>
-    !props.isPrivate &&
-    (props.channelType === INBOX_TYPES.EMAIL ||
-      props.channelType === INBOX_TYPES.WEB)
-);
-
-// Shift+Cmd/Ctrl+V on email/website: upload a clipboard image inline. This
-// gesture's native paste event carries no image, so clipboard.read() is the
-// only way to get the bytes. No preventDefault: text still pastes natively.
-async function pasteInlineImageFromClipboard() {
-  if (!editorView?.hasFocus()) return;
-  if (!allowsInlineImagePaste.value || !navigator.clipboard?.read) return;
-  try {
-    const items = await navigator.clipboard.read();
-    const imageItem = items.find(item =>
-      item.types.some(type => INLINE_IMAGE_PASTE_TYPES.includes(type))
-    );
-    if (!imageItem) return;
-    const imageType = imageItem.types.find(type =>
-      INLINE_IMAGE_PASTE_TYPES.includes(type)
-    );
-    const blob = await imageItem.getType(imageType);
-    uploadImageIfWithinSizeLimit(
-      new File([blob], 'pasted-image', { type: imageType })
-    );
-  } catch (error) {
-    // clipboard-read denied/unfocused (NotAllowedError): image can't be read.
-    // Text paste is unaffected — ProseMirror handles it from the native event.
-  }
-}
-
-useKeyboardEvents({
-  'Alt+KeyP': {
-    action: focusEditorInputField,
-    allowOnFocusedInput: false,
-  },
-  'Alt+KeyL': {
-    action: focusEditorInputField,
-    allowOnFocusedInput: false,
-  },
-  '$mod+Shift+KeyV': {
-    action: pasteInlineImageFromClipboard,
-    allowOnFocusedInput: true,
-  },
-});
-
 function handleLineBreakWhenEnterToSendEnabled(event) {
  if (
    hasPressedEnterAndNotCmdOrShift(event) &&
@@ -734,9 +736,6 @@ function createEditorView() {
  editorView = new EditorView(editor.value, {
    state: state,
    editable: () => !props.disabled,
-    nodeViews: {
-      image: imageResizeView,
-    },
    dispatchTransaction: tx => {
      state = state.apply(tx);
      editorView.updateState(state);
@@ -749,10 +748,12 @@ function createEditorView() {
      keyup: () => {
        if (!props.disabled) {
          typingIndicator.start();
+          updateImgToolbarOnDelete();
        }
      },
      keydown: (view, event) => !props.disabled && onKeydown(event),
      focus: () => !props.disabled && emit('focus'),
+      click: () => !props.disabled && isEditorMouseFocusedOnAnImage(),
      blur: () => {
        if (props.disabled) return;
        typingIndicator.stop();
@@ -917,6 +918,23 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
      @change="onFileChange"
    />
    <div ref="editor" />
+    <div
+      v-show="isImageNodeSelected && showImageResizeToolbar"
+      class="absolute shadow-md rounded-[6px] flex gap-1 py-1 px-1 bg-n-solid-3 outline outline-1 outline-n-weak text-n-slate-12"
+      :style="{
+        top: toolbarPosition.top,
+        left: toolbarPosition.left,
+      }"
+    >
+      <button
+        v-for="size in sizes"
+        :key="size.name"
+        class="text-xs font-medium rounded-[4px] outline outline-1 outline-n-strong px-1.5 py-0.5 hover:bg-n-slate-5"
+        @click="setURLWithQueryAndImageSize(size)"
+      >
+        {{ size.name }}
+      </button>
+    </div>
    <slot name="footer" />
  </div>
 </template>
@@ -979,6 +997,10 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
        @apply text-n-slate-11;
      }
    }
+
+    ol li {
+      @apply list-item list-decimal;
+    }
  }
 }

@@ -124,6 +124,7 @@ const copyConversationId = async () => {
        :size="32"
        :status="currentContact.availability_status"
        hide-offline-status
+        rounded-full
      />
      <div
        class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2"
@@ -375,10 +375,10 @@ export default {
      return `draft-${this.conversationIdByRoute}-${this.replyType}`;
    },
    audioRecordFormat() {
-      if (this.isAWhatsAppCloudChannel) {
+      if (this.isAWhatsAppChannel) {
        return AUDIO_FORMATS.OGG;
      }
-      if (this.isAWhatsAppChannel || this.isATelegramChannel) {
+      if (this.isATelegramChannel) {
        return AUDIO_FORMATS.MP3;
      }
      if (this.isAPIInbox) {
@@ -46,14 +46,6 @@ const filterTypes = [
    filterOperators: OPERATOR_TYPES_2,
    attributeModel: 'standard',
  },
-  {
-    attributeKey: 'contact_id',
-    attributeI18nKey: 'CONTACT',
-    inputType: 'search_select',
-    dataType: 'number',
-    filterOperators: OPERATOR_TYPES_1,
-    attributeModel: 'standard',
-  },
  {
    attributeKey: 'display_id',
    attributeI18nKey: 'CONVERSATION_IDENTIFIER',
@@ -141,10 +133,6 @@ export const filterAttributeGroups = [
        key: 'team_id',
        i18nKey: 'TEAM_NAME',
      },
-      {
-        key: 'contact_id',
-        i18nKey: 'CONTACT',
-      },
      {
        key: 'display_id',
        i18nKey: 'CONVERSATION_IDENTIFIER',
@@ -1,149 +0,0 @@
-import { useFacebookPageConnect } from '../useFacebookPageConnect';
-import { useMapGetter } from 'dashboard/composables/store';
-import ChannelApi from 'dashboard/api/channels';
-import { setupFacebookSdk } from 'dashboard/routes/dashboard/settings/inbox/channels/whatsapp/utils';
-
-vi.mock('dashboard/composables/store', () => ({ useMapGetter: vi.fn() }));
-vi.mock('dashboard/api/channels', () => ({
-  default: { fetchFacebookPages: vi.fn() },
-}));
-vi.mock(
-  'dashboard/routes/dashboard/settings/inbox/channels/whatsapp/utils',
-  () => ({ setupFacebookSdk: vi.fn() })
-);
-
-const flushPromises = () =>
-  new Promise(resolve => {
-    setTimeout(resolve, 0);
-  });
-
-const createDeferred = () => {
-  let resolve;
-  let reject;
-  const promise = new Promise((res, rej) => {
-    resolve = res;
-    reject = rej;
-  });
-  return { promise, resolve, reject };
-};
-
-const ACCOUNT_ID = 42;
-const PAGES = [
-  { id: 'p1', name: 'Page One', access_token: 'page-token-1' },
-  { id: 'p2', name: 'Page Two', access_token: 'page-token-2', exists: true },
-];
-
-const pagesResponse = {
-  data: { data: { page_details: PAGES, user_access_token: 'long-token' } },
-};
-
-// FB.login invokes its callback with the given response.
-const stubLogin = response => {
-  window.FB = { login: vi.fn(callback => callback(response)) };
-};
-
-const connected = {
-  status: 'connected',
-  authResponse: { accessToken: 'user-token' },
-};
-
-describe('useFacebookPageConnect', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    window.chatwootConfig = { fbAppId: 'fb-app', fbApiVersion: 'v22.0' };
-    useMapGetter.mockReturnValue({ value: ACCOUNT_ID });
-    setupFacebookSdk.mockResolvedValue();
-    ChannelApi.fetchFacebookPages.mockResolvedValue(pagesResponse);
-    stubLogin(connected);
-  });
-
-  it('resolves the user token and pages on a connected login', async () => {
-    const { loginAndFetchPages } = useFacebookPageConnect();
-
-    await expect(loginAndFetchPages()).resolves.toEqual({
-      userAccessToken: 'long-token',
-      pages: PAGES,
-    });
-    expect(setupFacebookSdk).toHaveBeenCalledWith('fb-app', 'v22.0');
-    expect(ChannelApi.fetchFacebookPages).toHaveBeenCalledWith(
-      'user-token',
-      ACCOUNT_ID
-    );
-    expect(window.FB.login).toHaveBeenCalledWith(expect.any(Function), {
-      scope:
-        'pages_manage_metadata,business_management,pages_messaging,pages_show_list,pages_read_engagement',
-    });
-  });
-
-  it('resolves null when the user is not authorized', async () => {
-    stubLogin({ status: 'not_authorized' });
-    const { loginAndFetchPages } = useFacebookPageConnect();
-
-    await expect(loginAndFetchPages()).resolves.toBeNull();
-    expect(ChannelApi.fetchFacebookPages).not.toHaveBeenCalled();
-  });
-
-  it('resolves null on an unknown login status', async () => {
-    stubLogin({ status: 'unknown' });
-    const { loginAndFetchPages } = useFacebookPageConnect();
-
-    await expect(loginAndFetchPages()).resolves.toBeNull();
-  });
-
-  it('rejects when fetching pages fails', async () => {
-    ChannelApi.fetchFacebookPages.mockRejectedValue(new Error('fetch failed'));
-    const { loginAndFetchPages } = useFacebookPageConnect();
-
-    await expect(loginAndFetchPages()).rejects.toThrow('fetch failed');
-  });
-
-  it('rejects when the SDK fails to load', async () => {
-    const error = new Error('script load failed');
-    error.name = 'ScriptLoaderError';
-    setupFacebookSdk.mockRejectedValue(error);
-    const { loginAndFetchPages } = useFacebookPageConnect();
-
-    await expect(loginAndFetchPages()).rejects.toThrow('script load failed');
-  });
-
-  it('ignores a second call while a run is in flight', async () => {
-    const pending = createDeferred();
-    ChannelApi.fetchFacebookPages.mockReturnValue(pending.promise);
-
-    const { loginAndFetchPages } = useFacebookPageConnect();
-    const first = loginAndFetchPages();
-    const second = loginAndFetchPages();
-
-    await expect(second).resolves.toBeNull();
-
-    pending.resolve(pagesResponse);
-    await first;
-    expect(window.FB.login).toHaveBeenCalledTimes(1);
-  });
-
-  it('toggles isAuthenticating across a run', async () => {
-    const pending = createDeferred();
-    ChannelApi.fetchFacebookPages.mockReturnValue(pending.promise);
-
-    const { isAuthenticating, loginAndFetchPages } = useFacebookPageConnect();
-    expect(isAuthenticating.value).toBe(false);
-
-    const result = loginAndFetchPages();
-    await flushPromises();
-    expect(isAuthenticating.value).toBe(true);
-
-    pending.resolve(pagesResponse);
-    await result;
-    expect(isAuthenticating.value).toBe(false);
-  });
-
-  it('preloads the SDK once and reuses it for login', async () => {
-    const { preloadSdk, loginAndFetchPages } = useFacebookPageConnect();
-
-    preloadSdk();
-    preloadSdk();
-    await loginAndFetchPages();
-
-    expect(setupFacebookSdk).toHaveBeenCalledTimes(1);
-  });
-});
@@ -133,7 +133,6 @@ describe('useInbox', () => {
      });

      expect(wrapper.vm.isATwilioChannel).toBe(true);
-      expect(wrapper.vm.isATwilioSMSChannel).toBe(true);
      expect(wrapper.vm.isASmsInbox).toBe(true);
      expect(wrapper.vm.isAWhatsAppChannel).toBe(false);
    });
@@ -269,7 +268,6 @@ describe('useInbox', () => {
        'isASmsInbox',
        'isATelegramChannel',
        'isATwilioChannel',
-        'isATwilioSMSChannel',
        'isAWebWidgetInbox',
        'isAWhatsAppChannel',
        'isAMicrosoftInbox',
@@ -1,208 +0,0 @@
-import { useWhatsappEmbeddedSignup } from '../useWhatsappEmbeddedSignup';
-import {
-  setupFacebookSdk,
-  initWhatsAppEmbeddedSignup,
-  createMessageHandler,
-} from 'dashboard/routes/dashboard/settings/inbox/channels/whatsapp/utils';
-
-vi.mock(
-  'dashboard/routes/dashboard/settings/inbox/channels/whatsapp/utils',
-  () => ({
-    setupFacebookSdk: vi.fn(),
-    initWhatsAppEmbeddedSignup: vi.fn(),
-    createMessageHandler: vi.fn(),
-    isValidBusinessData: vi.fn(data =>
-      Boolean(data && data.business_id && data.waba_id)
-    ),
-  })
-);
-
-const flushPromises = () =>
-  new Promise(resolve => {
-    setTimeout(resolve, 0);
-  });
-
-const createDeferred = () => {
-  let resolve;
-  let reject;
-  const promise = new Promise((res, rej) => {
-    resolve = res;
-    reject = rej;
-  });
-  return { promise, resolve, reject };
-};
-
-const VALID_BUSINESS = {
-  business_id: 'biz-1',
-  waba_id: 'waba-1',
-  phone_number_id: 'phone-1',
-};
-
-describe('useWhatsappEmbeddedSignup', () => {
-  // The mocked createMessageHandler captures the callback the composable
-  // registers, so tests can simulate Meta's WA_EMBEDDED_SIGNUP postMessages
-  // directly without the window-event + origin plumbing (that is covered by
-  // the utils' own tests).
-  let signupCallback;
-  let registeredListener;
-
-  const emit = data => signupCallback(data);
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-
-    window.chatwootConfig = {
-      whatsappAppId: 'app-id',
-      whatsappConfigurationId: 'config-id',
-      whatsappApiVersion: 'v22.0',
-    };
-
-    setupFacebookSdk.mockResolvedValue();
-    createMessageHandler.mockImplementation(callback => {
-      signupCallback = callback;
-      registeredListener = () => {};
-      return registeredListener;
-    });
-  });
-
-  it('resolves credentials when the auth code arrives before the business data', async () => {
-    initWhatsAppEmbeddedSignup.mockResolvedValue('auth-code');
-
-    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
-    const result = runEmbeddedSignup();
-
-    await flushPromises(); // SDK setup + FB.login resolve the code first
-    emit({ event: 'FINISH', data: VALID_BUSINESS });
-
-    await expect(result).resolves.toEqual({
-      code: 'auth-code',
-      business_id: 'biz-1',
-      waba_id: 'waba-1',
-      phone_number_id: 'phone-1',
-    });
-    expect(setupFacebookSdk).toHaveBeenCalledWith('app-id', 'v22.0');
-    expect(initWhatsAppEmbeddedSignup).toHaveBeenCalledWith('config-id');
-  });
-
-  it('resolves credentials when the business data arrives before the auth code', async () => {
-    const code = createDeferred();
-    initWhatsAppEmbeddedSignup.mockReturnValue(code.promise);
-
-    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
-    const result = runEmbeddedSignup();
-
-    // Business data lands first, while FB.login is still pending.
-    emit({
-      event: 'FINISH_WHATSAPP_BUSINESS_APP_ONBOARDING',
-      data: VALID_BUSINESS,
-    });
-    code.resolve('late-code');
-
-    await expect(result).resolves.toEqual({
-      code: 'late-code',
-      business_id: 'biz-1',
-      waba_id: 'waba-1',
-      phone_number_id: 'phone-1',
-    });
-  });
-
-  it('defaults phone_number_id to an empty string when absent', async () => {
-    initWhatsAppEmbeddedSignup.mockResolvedValue('auth-code');
-
-    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
-    const result = runEmbeddedSignup();
-
-    await flushPromises();
-    emit({
-      event: 'FINISH',
-      data: { business_id: 'biz-1', waba_id: 'waba-1' },
-    });
-
-    await expect(result).resolves.toMatchObject({ phone_number_id: '' });
-  });
-
-  it('resolves null when FB.login is cancelled', async () => {
-    initWhatsAppEmbeddedSignup.mockRejectedValue(new Error('Login cancelled'));
-
-    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
-
-    await expect(runEmbeddedSignup()).resolves.toBeNull();
-  });
-
-  it('resolves null on a CANCEL event', async () => {
-    initWhatsAppEmbeddedSignup.mockReturnValue(createDeferred().promise);
-
-    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
-    const result = runEmbeddedSignup();
-
-    emit({ event: 'CANCEL' });
-
-    await expect(result).resolves.toBeNull();
-  });
-
-  it('rejects with the Meta error message on an error event', async () => {
-    initWhatsAppEmbeddedSignup.mockReturnValue(createDeferred().promise);
-
-    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
-    const result = runEmbeddedSignup();
-
-    emit({ event: 'error', error_message: 'WABA not eligible' });
-
-    await expect(result).rejects.toThrow('WABA not eligible');
-  });
-
-  it('rejects when the business data is invalid', async () => {
-    initWhatsAppEmbeddedSignup.mockReturnValue(createDeferred().promise);
-
-    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
-    const result = runEmbeddedSignup();
-
-    emit({ event: 'FINISH', data: { business_id: 'biz-1' } }); // no waba_id
-
-    await expect(result).rejects.toThrow('Invalid business data');
-  });
-
-  it('rejects when the SDK or login fails for a non-cancel reason', async () => {
-    initWhatsAppEmbeddedSignup.mockRejectedValue(new Error('popup blocked'));
-
-    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
-
-    await expect(runEmbeddedSignup()).rejects.toThrow('popup blocked');
-  });
-
-  it('ignores a second call while a run is in flight', async () => {
-    initWhatsAppEmbeddedSignup.mockResolvedValue('auth-code');
-
-    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
-    const first = runEmbeddedSignup();
-    const second = runEmbeddedSignup();
-
-    await expect(second).resolves.toBeNull();
-
-    // Let the first run finish so it doesn't leak into the next test.
-    await flushPromises();
-    emit({ event: 'FINISH', data: VALID_BUSINESS });
-    await first;
-
-    expect(setupFacebookSdk).toHaveBeenCalledTimes(1);
-  });
-
-  it('toggles isAuthenticating and removes the listener once settled', async () => {
-    initWhatsAppEmbeddedSignup.mockResolvedValue('auth-code');
-    const removeSpy = vi.spyOn(window, 'removeEventListener');
-
-    const { isAuthenticating, runEmbeddedSignup } = useWhatsappEmbeddedSignup();
-    expect(isAuthenticating.value).toBe(false);
-
-    const result = runEmbeddedSignup();
-    expect(isAuthenticating.value).toBe(true);
-
-    await flushPromises();
-    emit({ event: 'FINISH', data: VALID_BUSINESS });
-    await result;
-
-    expect(isAuthenticating.value).toBe(false);
-    expect(removeSpy).toHaveBeenCalledWith('message', registeredListener);
-    removeSpy.mockRestore();
-  });
-});
@@ -1,77 +0,0 @@
-import { ref } from 'vue';
-import { useMapGetter } from 'dashboard/composables/store';
-import ChannelApi from 'dashboard/api/channels';
-import { buildFacebookLoginScopes } from 'dashboard/helper/facebookScopes';
-import { setupFacebookSdk } from 'dashboard/routes/dashboard/settings/inbox/channels/whatsapp/utils';
-
-// Headless half of the Facebook Page connect flow: load the Meta SDK, run
-// FB.login for page scopes, and fetch the user's pages. The caller owns the
-// page-picker UI and the channel creation, because choosing a page is an
-// interactive step (a user can manage several pages).
-//
-// Split into preloadSdk() + loginAndFetchPages() for popup safety: FB.login
-// opens a popup and needs the click's transient activation. Preloading the SDK
-// when the picker opens means the click-time `await` resolves within that
-// activation window; a cold load resolves on the script's `load` task seconds
-// later, after activation has expired, and the popup gets blocked.
-export function useFacebookPageConnect() {
-  const accountId = useMapGetter('getCurrentAccountId');
-  const isAuthenticating = ref(false);
-
-  let sdkSetupPromise = null;
-
-  // Idempotent — call this when the picker UI opens. A failed load clears the
-  // cache so a later attempt can retry instead of being stuck on a rejection.
-  const preloadSdk = () => {
-    if (!sdkSetupPromise) {
-      sdkSetupPromise = setupFacebookSdk(
-        window.chatwootConfig?.fbAppId,
-        window.chatwootConfig?.fbApiVersion
-      ).catch(error => {
-        sdkSetupPromise = null;
-        throw error;
-      });
-    }
-    return sdkSetupPromise;
-  };
-
-  // FB.login never rejects; resolve the user access token on success and null
-  // for any other status (closed popup, not_authorized, unknown).
-  const login = () =>
-    new Promise(resolve => {
-      window.FB.login(
-        response => {
-          resolve(
-            response.status === 'connected'
-              ? response.authResponse?.accessToken || null
-              : null
-          );
-        },
-        { scope: buildFacebookLoginScopes() }
-      );
-    });
-
-  // Resolves { userAccessToken, pages } on success, null when the user cancels,
-  // and rejects on SDK-load or page-fetch failure (the caller maps it to UI).
-  const loginAndFetchPages = async () => {
-    if (isAuthenticating.value) return null;
-    isAuthenticating.value = true;
-    try {
-      await preloadSdk();
-      const token = await login();
-      if (!token) return null;
-
-      const response = await ChannelApi.fetchFacebookPages(
-        token,
-        accountId.value
-      );
-      const { page_details: pages, user_access_token: userAccessToken } =
-        response.data.data;
-      return { userAccessToken, pages };
-    } finally {
-      isAuthenticating.value = false;
-    }
-  };
-
-  return { isAuthenticating, preloadSdk, loginAndFetchPages };
-}
@@ -150,7 +150,6 @@ export const useInbox = (inboxId = null) => {
    isASmsInbox,
    isATelegramChannel,
    isATwilioChannel,
-    isATwilioSMSChannel,
    isAWebWidgetInbox,
    isAWhatsAppChannel,
    isAMicrosoftInbox,
@@ -1,96 +0,0 @@
-import { ref } from 'vue';
-import {
-  setupFacebookSdk,
-  initWhatsAppEmbeddedSignup,
-  createMessageHandler,
-  isValidBusinessData,
-} from 'dashboard/routes/dashboard/settings/inbox/channels/whatsapp/utils';
-
-// Drives Meta's WhatsApp embedded-signup popup (Facebook JS SDK). FB.login()
-// resolves an auth `code` while the WABA identifiers (waba_id, phone_number_id)
-// arrive separately over a postMessage event — order isn't guaranteed, so we
-// hold both and resolve once both are present.
-//
-// `runEmbeddedSignup` returns the signup credentials; the caller exchanges them
-// for an inbox via `inboxes/createWhatsAppEmbeddedSignup` and owns its own UX
-// (alerts, navigation, etc). Resolves `null` when the user cancels the popup;
-// rejects on SDK load or signup errors. The window listener is scoped to a
-// single run, so this is safe to call from anywhere without lifecycle wiring.
-export function useWhatsappEmbeddedSignup() {
-  const isAuthenticating = ref(false);
-
-  const runEmbeddedSignup = () => {
-    if (isAuthenticating.value) return Promise.resolve(null);
-    isAuthenticating.value = true;
-
-    return new Promise((resolve, reject) => {
-      let authCode = null;
-      let businessData = null;
-      let settled = false;
-      let messageHandler;
-
-      const settle = (fn, value) => {
-        if (settled) return;
-        settled = true;
-        window.removeEventListener('message', messageHandler);
-        isAuthenticating.value = false;
-        fn(value);
-      };
-
-      // Both the auth code and the business data arrive asynchronously and in
-      // no fixed order; only resolve once we're holding both.
-      const resolveIfReady = () => {
-        if (!authCode || !businessData) return;
-        settle(resolve, {
-          code: authCode,
-          business_id: businessData.business_id,
-          waba_id: businessData.waba_id,
-          phone_number_id: businessData.phone_number_id || '',
-        });
-      };
-
-      messageHandler = createMessageHandler(data => {
-        if (
-          data.event === 'FINISH' ||
-          data.event === 'FINISH_WHATSAPP_BUSINESS_APP_ONBOARDING'
-        ) {
-          if (!isValidBusinessData(data.data)) {
-            settle(reject, new Error('Invalid business data'));
-            return;
-          }
-          businessData = data.data;
-          resolveIfReady();
-        } else if (data.event === 'CANCEL') {
-          settle(resolve, null);
-        } else if (data.event === 'error') {
-          settle(reject, new Error(data.error_message || 'Signup error'));
-        }
-      });
-
-      window.addEventListener('message', messageHandler);
-
-      (async () => {
-        try {
-          await setupFacebookSdk(
-            window.chatwootConfig?.whatsappAppId,
-            window.chatwootConfig?.whatsappApiVersion
-          );
-          authCode = await initWhatsAppEmbeddedSignup(
-            window.chatwootConfig?.whatsappConfigurationId
-          );
-          resolveIfReady();
-        } catch (error) {
-          // FB.login() rejects with 'Login cancelled' when the user dismisses
-          // the popup — treat it as a cancel rather than an error.
-          if (error.message === 'Login cancelled') {
-            settle(resolve, null);
-          } else {
-            settle(reject, error);
-          }
-        }
-      })();
-    });
-  };
-
-  return { isAuthenticating, runEmbeddedSignup };
-}
@@ -14,7 +14,6 @@ export const FORMATTING = {
      'link',
      'bulletList',
      'orderedList',
-      'imageUpload',
      'undo',
      'redo',
    ],
@@ -31,7 +30,6 @@ export const FORMATTING = {
      'strike',
      'bulletList',
      'orderedList',
-      'imageUpload',
      'undo',
      'redo',
    ],
@@ -265,3 +263,23 @@ export const MARKDOWN_PATTERNS = [
    ],
  },
 ];
+
+// Editor image resize options for Message Editor
+export const MESSAGE_EDITOR_IMAGE_RESIZES = [
+  {
+    name: 'Small',
+    height: '24px',
+  },
+  {
+    name: 'Medium',
+    height: '48px',
+  },
+  {
+    name: 'Large',
+    height: '72px',
+  },
+  {
+    name: 'Original Size',
+    height: 'auto',
+  },
+];
@@ -37,13 +37,6 @@ export const getValuesName = (values, list, idKey, nameKey) => {
  };
 };

-const getValuesForContact = (values, contacts) => ({
-  id: values[0],
-  name:
-    contacts?.find(contact => contact.id === values[0])?.name ||
-    `Contact #${values[0]}`,
-});
-
 export const getValuesForStatus = values => {
  return values.map(value => ({ id: value, name: value }));
 };
@@ -91,7 +84,6 @@ export const getValuesForFilter = (filter, params) => {
    campaigns,
    labels,
    priority,
-    contacts,
  } = params;
  switch (attribute_key) {
    case 'status':
@@ -102,8 +94,6 @@ export const getValuesForFilter = (filter, params) => {
      return getValuesName(values, inboxes, 'id', 'name');
    case 'team_id':
      return getValuesName(values, teams, 'id', 'name');
-    case 'contact_id':
-      return getValuesForContact(values, contacts);
    case 'campaign_id':
      return getValuesName(values, campaigns, 'id', 'title');
    case 'labels':
@@ -379,6 +379,31 @@ export const findNodeToInsertImage = (editorState, fileUrl) => {
  };
 };

+/**
+ * Set URL with query and size.
+ *
+ * @param {Object} selectedImageNode - The current selected node.
+ * @param {Object} size - The size to set.
+ * @param {Object} editorView - The editor view.
+ */
+export function setURLWithQueryAndSize(selectedImageNode, size, editorView) {
+  if (selectedImageNode) {
+    // Create and apply the transaction
+    const tr = editorView.state.tr.setNodeMarkup(
+      editorView.state.selection.from,
+      null,
+      {
+        src: selectedImageNode.src,
+        height: size.height,
+      }
+    );
+
+    if (tr.docChanged) {
+      editorView.dispatch(tr);
+    }
+  }
+}
+
 /**
 * Strips unsupported markdown formatting from content based on the editor schema.
 * This ensures canned responses with rich formatting can be inserted into channels
@@ -1,22 +0,0 @@
-export const FACEBOOK_PAGE_SCOPES = [
-  'pages_manage_metadata',
-  'business_management',
-  'pages_messaging',
-  'pages_show_list',
-  'pages_read_engagement',
-];
-
-export const INSTAGRAM_SCOPES = [
-  'instagram_basic',
-  'instagram_manage_messages',
-];
-
-export const buildFacebookLoginScopes = ({
-  includeInstagramScopes = false,
-} = {}) => {
-  const scopes = [...FACEBOOK_PAGE_SCOPES];
-  if (includeInstagramScopes) {
-    scopes.push(...INSTAGRAM_SCOPES);
-  }
-  return scopes.join(',');
-};
@@ -159,13 +159,6 @@ export const LOCALE_MENU_ITEMS = {
    value: 'publish',
    icon: 'i-lucide-eye',
  },
-  customizeContent: {
-    label:
-      'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.CUSTOMIZE_CONTENT',
-    action: 'customize-content',
-    value: 'customize-content',
-    icon: 'i-lucide-pencil',
-  },
  delete: {
    label: 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE',
    action: 'delete',
@@ -179,28 +172,20 @@ const disableLocaleMenuItems = menuItems =>

 export const buildLocaleMenuItems = ({ isDefault, isDraft }) => {
  if (isDefault) {
-    return [
-      ...disableLocaleMenuItems([
-        LOCALE_MENU_ITEMS.makeDefault,
-        LOCALE_MENU_ITEMS.moveToDraft,
-      ]),
-      LOCALE_MENU_ITEMS.customizeContent,
-      ...disableLocaleMenuItems([LOCALE_MENU_ITEMS.delete]),
-    ];
+    return disableLocaleMenuItems([
+      LOCALE_MENU_ITEMS.makeDefault,
+      LOCALE_MENU_ITEMS.moveToDraft,
+      LOCALE_MENU_ITEMS.delete,
+    ]);
  }

  if (isDraft) {
-    return [
-      LOCALE_MENU_ITEMS.publishLocale,
-      LOCALE_MENU_ITEMS.customizeContent,
-      LOCALE_MENU_ITEMS.delete,
-    ];
+    return [LOCALE_MENU_ITEMS.publishLocale, LOCALE_MENU_ITEMS.delete];
  }

  return [
    LOCALE_MENU_ITEMS.makeDefault,
    LOCALE_MENU_ITEMS.moveToDraft,
-    LOCALE_MENU_ITEMS.customizeContent,
    LOCALE_MENU_ITEMS.delete,
  ];
 };
@@ -273,41 +273,6 @@ describe('customViewsHelper', () => {
      };
      expect(generateValuesForEditCustomViews(filter, params)).toEqual('1');
    });
-
-    it('returns contact name for contact filters when contact is available', () => {
-      const filter = {
-        attribute_key: 'contact_id',
-        filter_operator: 'equal_to',
-        values: [123],
-      };
-      const params = {
-        contacts: [{ id: 123, name: 'John Doe' }],
-        filterTypes: advancedFilterTypes,
-        allCustomAttributes: [],
-      };
-
-      expect(generateValuesForEditCustomViews(filter, params)).toEqual({
-        id: 123,
-        name: 'John Doe',
-      });
-    });
-
-    it('returns fallback contact display value when contact is not available', () => {
-      const filter = {
-        attribute_key: 'contact_id',
-        filter_operator: 'equal_to',
-        values: [123],
-      };
-      const params = {
-        filterTypes: advancedFilterTypes,
-        allCustomAttributes: [],
-      };
-
-      expect(generateValuesForEditCustomViews(filter, params)).toEqual({
-        id: 123,
-        name: 'Contact #123',
-      });
-    });
  });

  describe('#generateCustomAttributesInputType', () => {
@@ -16,6 +16,7 @@ import {
  insertAtCursor,
  removeSignature,
  replaceSignature,
+  setURLWithQueryAndSize,
  stripInlineBase64Images,
  stripUnsupportedFormatting,
  stripUnsupportedMarkdown,
@@ -652,6 +653,71 @@ describe('findNodeToInsertImage', () => {
  });
 });

+describe('setURLWithQueryAndSize', () => {
+  let selectedNode;
+  let editorView;
+
+  beforeEach(() => {
+    selectedNode = {
+      setAttribute: vi.fn(),
+    };
+
+    const tr = {
+      setNodeMarkup: vi.fn().mockReturnValue({
+        docChanged: true,
+      }),
+    };
+
+    const state = {
+      selection: { from: 0 },
+      tr,
+    };
+
+    editorView = {
+      state,
+      dispatch: vi.fn(),
+    };
+  });
+
+  it('updates the URL with the given size and updates the editor view', () => {
+    const size = { height: '20px' };
+
+    setURLWithQueryAndSize(selectedNode, size, editorView);
+
+    // Check if the editor view is updated
+    expect(editorView.dispatch).toHaveBeenCalledTimes(1);
+  });
+
+  it('updates the URL with the given size and updates the editor view with original size', () => {
+    const size = { height: 'auto' };
+
+    setURLWithQueryAndSize(selectedNode, size, editorView);
+
+    // Check if the editor view is updated
+    expect(editorView.dispatch).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not update the editor view if the document has not changed', () => {
+    editorView.state.tr.setNodeMarkup = vi.fn().mockReturnValue({
+      docChanged: false,
+    });
+
+    const size = { height: '20px' };
+
+    setURLWithQueryAndSize(selectedNode, size, editorView);
+
+    // Check if the editor view dispatch was not called
+    expect(editorView.dispatch).not.toHaveBeenCalled();
+  });
+
+  it('does not perform any operations if selectedNode is not provided', () => {
+    setURLWithQueryAndSize(null, { height: '20px' }, editorView);
+
+    // Ensure the dispatch method wasn't called
+    expect(editorView.dispatch).not.toHaveBeenCalled();
+  });
+});
+
 describe('getContentNode', () => {
  let mockEditorView;

@@ -64,25 +64,4 @@ describe('#filterQueryGenerator', () => {
      filterQueryGenerator(testData).payload.every(i => Array.isArray(i.values))
    ).toBe(true);
  });
-
-  it('serializes a selected contact object to contact id', () => {
-    const result = filterQueryGenerator([
-      {
-        attribute_key: 'contact_id',
-        filter_operator: 'equal_to',
-        values: { id: 123, name: 'Jane Doe' },
-        query_operator: 'and',
-      },
-    ]);
-
-    expect(result).toMatchObject({
-      payload: [
-        {
-          attribute_key: 'contact_id',
-          filter_operator: 'equal_to',
-          values: [123],
-        },
-      ],
-    });
-  });
 });
@@ -74,40 +74,37 @@ describe('PortalHelper', () => {
  });

  describe('buildLocaleMenuItems', () => {
-    it('disables other actions but keeps customize enabled for the default locale', () => {
-      const items = buildLocaleMenuItems({ isDefault: true, isDraft: false });
-      const customize = items.find(item => item.action === 'customize-content');
-
-      expect(customize).toBeTruthy();
-      expect(customize.disabled).toBeFalsy();
+    it('returns disabled actions for the default locale', () => {
      expect(
-        items
-          .filter(item => item.action !== 'customize-content')
-          .every(item => item.disabled)
-      ).toBe(true);
+        buildLocaleMenuItems({
+          isDefault: true,
+          isDraft: false,
+        })
+      ).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({ action: 'change-default', disabled: true }),
+          expect.objectContaining({ action: 'move-to-draft', disabled: true }),
+          expect.objectContaining({ action: 'delete', disabled: true }),
+        ])
+      );
    });

-    it('returns publish, customize, and delete actions for draft locales', () => {
+    it('returns publish and delete actions for draft locales', () => {
      expect(
        buildLocaleMenuItems({
          isDefault: false,
          isDraft: true,
        }).map(({ action }) => action)
-      ).toEqual(['publish-locale', 'customize-content', 'delete']);
+      ).toEqual(['publish-locale', 'delete']);
    });

-    it('returns default, draft, customize, and delete actions for live locales', () => {
+    it('returns default, draft, and delete actions for live locales', () => {
      expect(
        buildLocaleMenuItems({
          isDefault: false,
          isDraft: false,
        }).map(({ action }) => action)
-      ).toEqual([
-        'change-default',
-        'move-to-draft',
-        'customize-content',
-        'delete',
-      ]);
+      ).toEqual(['change-default', 'move-to-draft', 'delete']);
    });
  });
 });
@@ -19,8 +19,6 @@
      "OR": "OR"
    },
    "INPUT_PLACEHOLDER": "Enter value",
-    "CONTACT_SEARCH_PLACEHOLDER": "Search contacts",
-    "CONTACT_FALLBACK": "Contact #{id}",
    "OPERATOR_LABELS": {
      "equal_to": "Equal to",
      "not_equal_to": "Not equal to",
@@ -51,7 +49,6 @@
      "ASSIGNEE_NAME": "Assignee name",
      "INBOX_NAME": "Inbox name",
      "TEAM_NAME": "Team name",
-      "CONTACT": "Contact",
      "CONVERSATION_IDENTIFIER": "Conversation identifier",
      "CAMPAIGN_NAME": "Campaign name",
      "LABELS": "Labels",
@@ -233,7 +233,6 @@
      "TIP_AUDIORECORDER_ERROR": "Could not open the audio",
      "AUDIO_CONVERSION_FAILED": "Audio conversion failed. Please try again.",
      "DRAG_DROP": "Drag and drop here to attach",
-      "IMAGE_UPLOAD_SUCCESS": "Image uploaded successfully",
      "START_AUDIO_RECORDING": "Start audio recording",
      "STOP_AUDIO_RECORDING": "Stop audio recording",
      "COPILOT_THINKING": "Copilot is thinking",
@@ -700,27 +700,9 @@
          "MAKE_DEFAULT": "Make default",
          "MOVE_TO_DRAFT": "Move to draft",
          "PUBLISH_LOCALE": "Publish locale",
-          "CUSTOMIZE_CONTENT": "Localize content",
          "DELETE": "Delete"
        }
      },
-      "CONTENT_DIALOG": {
-        "TITLE": "Localize content",
-        "DESCRIPTION": "Set values specific to this locale. Anything left blank falls back to the default locale.",
-        "NAME": {
-          "LABEL": "Name"
-        },
-        "PAGE_TITLE": {
-          "LABEL": "Page title"
-        },
-        "HEADER_TEXT": {
-          "LABEL": "Header text"
-        },
-        "API": {
-          "SUCCESS_MESSAGE": "Locale content updated successfully",
-          "ERROR_MESSAGE": "Unable to update locale content. Try again."
-        }
-      },
      "ADD_LOCALE_DIALOG": {
        "TITLE": "Add a new locale",
        "DESCRIPTION": "Select the language in which this article will be written. This will be added to your list of translations, and you can add more later.",
@@ -134,6 +134,7 @@
      },
      "TWILIO": {
        "TITLE": "Twilio SMS/WhatsApp Channel",
+        "DESC": "Integrate Twilio and start supporting your customers via SMS or WhatsApp.",
        "ACCOUNT_SID": {
          "LABEL": "Account SID",
          "PLACEHOLDER": "Please enter your Twilio Account SID",
@@ -175,13 +176,13 @@
          "PLACEHOLDER": "Please enter the phone number from which message will be sent.",
          "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
        },
-        "SUBMIT_BUTTON": "Create Twilio Channel",
-        "API": {
-          "ERROR_MESSAGE": "We were not able to authenticate Twilio credentials, please try again"
-        },
        "API_CALLBACK": {
          "TITLE": "Callback URL",
          "SUBTITLE": "You have to configure the message callback URL in Twilio with the URL mentioned here."
+        },
+        "SUBMIT_BUTTON": "Create Twilio Channel",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to authenticate Twilio credentials, please try again"
        }
      },
      "SMS": {
@@ -558,7 +559,6 @@
      "MORE_SETTINGS": "More settings",
      "WEBSITE_SUCCESS": "You have successfully finished creating a website channel. Copy the code shown below and paste it on your website. Next time a customer use the live chat, the conversation will automatically appear on your inbox.",
      "WHATSAPP_QR_INSTRUCTION": "Scan the QR code above to quickly test your WhatsApp inbox",
-      "SMS_QR_INSTRUCTION": "Scan the QR code above to quickly test your SMS inbox",
      "MESSENGER_QR_INSTRUCTION": "Scan the QR code above to quickly test your Facebook Messenger inbox",
      "TELEGRAM_QR_INSTRUCTION": "Scan the QR code above to quickly test your Telegram inbox"
    },
@@ -653,10 +653,6 @@
      },
      "CREDENTIALS": {
        "DESCRIPTION": "Voice calling requires Twilio API Key credentials. These are used to generate tokens for agent voice connections."
-      },
-      "INBOUND": {
-        "LABEL": "Allow incoming calls",
-        "DESCRIPTION": "Let customers call this number. When turned off, incoming calls are declined automatically — agents aren't notified and no conversation is created. Agents can still place outgoing calls."
      }
    },
    "WHATSAPP_CALLING": {
@@ -188,6 +188,7 @@ export default {
          :status="contact.availability_status"
          :size="48"
          hide-offline-status
+          rounded-full
        />
      </div>

@@ -94,18 +94,8 @@ export default {
      return this.getAccount(this.accountId) || {};
    },
  },
-  watch: {
-    'currentAccount.id'(id) {
-      if (id) {
-        this.initializeAccount();
-      }
-    },
-  },
  mounted() {
-    // Account already in the store (navigated in): seed immediately.
-    if (this.currentAccount.id) {
-      this.initializeAccount();
-    }
+    this.initializeAccount();
  },
  methods: {
    async initializeAccount() {
@@ -8,7 +8,7 @@ import SectionLayout from './SectionLayout.vue';
 const { t } = useI18n();
 const { currentAccount } = useAccount();

-const getAccountId = computed(() => currentAccount.value?.id?.toString());
+const getAccountId = computed(() => currentAccount.value.id.toString());
 </script>

 <template>
@@ -16,7 +16,6 @@ const route = useRoute();
 const store = useStore();

 const qrCodes = reactive({
-  sms: '',
  whatsapp: '',
  messenger: '',
  telegram: '',
@@ -29,13 +28,14 @@ const currentInbox = computed(() =>
 // Use useInbox composable with the inbox ID
 const {
  isAWhatsAppCloudChannel,
-  isAWhatsAppChannel,
+  isATwilioChannel,
  isASmsInbox,
  isALineChannel,
  isAnEmailChannel,
+  isAWhatsAppChannel,
  isAFacebookInbox,
  isATelegramChannel,
-  isATwilioSMSChannel,
+  isATwilioWhatsAppChannel,
 } = useInbox(route.params.inbox_id);

 const hasDuplicateInstagramInbox = computed(() => {
@@ -55,28 +55,23 @@ const shouldShowWhatsAppWebhookDetails = computed(() => {
  );
 });

-const whatsappPhoneNumber = computed(() => {
-  return (currentInbox.value?.phone_number || '').replace('whatsapp:', '');
-});
-
-const shouldShowWhatsAppQr = computed(() => {
-  return isAWhatsAppChannel.value && Boolean(whatsappPhoneNumber.value);
-});
-
-const shouldShowSmsQr = computed(() => {
-  return isATwilioSMSChannel.value && Boolean(currentInbox.value?.phone_number);
+const isWhatsAppEmbeddedSignup = computed(() => {
+  return (
+    isAWhatsAppCloudChannel.value &&
+    currentInbox.value.provider_config?.source === 'embedded_signup'
+  );
 });

 const message = computed(() => {
-  if (shouldShowWhatsAppQr.value) {
+  if (isATwilioChannel.value) {
    return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
-      'INBOX_MGMT.FINISH.WHATSAPP_QR_INSTRUCTION'
+      'INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE'
    )}`;
  }

-  if (shouldShowSmsQr.value) {
+  if (isASmsInbox.value) {
    return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
-      'INBOX_MGMT.FINISH.SMS_QR_INSTRUCTION'
+      'INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.SUBTITLE'
    )}`;
  }

@@ -96,6 +91,12 @@ const message = computed(() => {
    return t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');
  }

+  if (isWhatsAppEmbeddedSignup.value) {
+    return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
+      'INBOX_MGMT.FINISH.WHATSAPP_QR_INSTRUCTION'
+    )}`;
+  }
+
  return t('INBOX_MGMT.FINISH.MESSAGE');
 });

@@ -108,7 +109,6 @@ async function generateQRCode(platform, identifier) {

  try {
    const platformUrls = {
-      sms: id => `sms:${id}`,
      whatsapp: id => `https://wa.me/${id}`,
      messenger: id => `https://m.me/${id}`,
      telegram: id => `https://t.me/${id}`,
@@ -127,13 +127,15 @@ async function generateQRCode(platform, identifier) {
 async function generateQRCodes() {
  if (!currentInbox.value) return;

-  // WhatsApp
-  if (shouldShowWhatsAppQr.value) {
-    await generateQRCode('whatsapp', whatsappPhoneNumber.value);
-  }
-
-  if (shouldShowSmsQr.value) {
-    await generateQRCode('sms', currentInbox.value.phone_number);
+  // WhatsApp (both Cloud and Twilio)
+  if (currentInbox.value.phone_number && isAWhatsAppChannel.value) {
+    // For Twilio WhatsApp, phone_number format is "whatsapp:+1234567890"
+    // Extract just the phone number part for QR code generation
+    const phoneNumber = currentInbox.value.phone_number.replace(
+      'whatsapp:',
+      ''
+    );
+    await generateQRCode('whatsapp', phoneNumber);
  }

  // Facebook Messenger
@@ -181,6 +183,13 @@ onMounted(() => {
            :script="currentInbox.web_widget_script"
          />
        </div>
+        <div class="w-[50%] max-w-[50%] ml-[25%]">
+          <woot-code
+            v-if="isATwilioWhatsAppChannel"
+            lang="html"
+            :script="currentInbox.callback_webhook_url"
+          />
+        </div>
        <div
          v-if="shouldShowWhatsAppWebhookDetails"
          class="w-[50%] max-w-[50%] ml-[25%]"
@@ -208,32 +217,12 @@ onMounted(() => {
            :script="currentInbox.callback_webhook_url"
          />
        </div>
-        <div
-          v-if="isASmsInbox && !isATwilioSMSChannel"
-          class="w-[50%] max-w-[50%] ml-[25%]"
-        >
-          <p class="mt-8 font-medium text-n-slate-11">
-            {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.TITLE') }}
-          </p>
-          <p class="mt-2 text-sm text-n-slate-9">
-            {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.SUBTITLE') }}
-          </p>
-          <woot-code lang="html" :script="currentInbox.callback_webhook_url" />
-        </div>
-        <div
-          v-if="shouldShowSmsQr && qrCodes.sms"
-          class="flex flex-col gap-3 items-center mt-8"
-        >
-          <p class="mt-2 text-sm text-n-slate-9">
-            {{ $t('INBOX_MGMT.FINISH.SMS_QR_INSTRUCTION') }}
-          </p>
-          <div class="rounded-lg shadow outline-1 outline-n-strong outline">
-            <img
-              :src="qrCodes.sms"
-              alt="SMS QR Code"
-              class="rounded-lg size-48 dark:invert"
-            />
-          </div>
+        <div class="w-[50%] max-w-[50%] ml-[25%]">
+          <woot-code
+            v-if="isASmsInbox"
+            lang="html"
+            :script="currentInbox.callback_webhook_url"
+          />
        </div>
        <EmailInboxFinish
          v-if="isAnEmailChannel && !currentInbox.provider"
@@ -241,7 +230,7 @@ onMounted(() => {
          :inbox-id="$route.params.inbox_id"
        />
        <div
-          v-if="shouldShowWhatsAppQr && qrCodes.whatsapp"
+          v-if="isAWhatsAppChannel && qrCodes.whatsapp"
          class="flex flex-col gap-3 items-center mt-8"
        >
          <p class="mt-2 text-sm text-n-slate-9">
@@ -1,16 +1,20 @@
 <script>
+/* eslint-env browser */
+/* global FB */
 import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
-import { useFacebookPageConnect } from 'dashboard/composables/useFacebookPageConnect';
+import { useAccount } from 'dashboard/composables/useAccount';
 import { required } from '@vuelidate/validators';
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';

+import ChannelApi from '../../../../../api/channels';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import router from '../../../../index';
 import { useBranding } from 'shared/composables/useBranding';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';

+import { loadScript } from 'dashboard/helper/DOMHelpers';
 import * as Sentry from '@sentry/vue';

 export default {
@@ -21,12 +25,11 @@ export default {
    ComboBox,
  },
  setup() {
+    const { accountId } = useAccount();
    const { replaceInstallationName } = useBranding();
-    const { preloadSdk, loginAndFetchPages } = useFacebookPageConnect();
    return {
+      accountId,
      replaceInstallationName,
-      preloadSdk,
-      loginAndFetchPages,
      v$: useVuelidate(),
    };
  },
@@ -34,7 +37,9 @@ export default {
    return {
      isCreating: false,
      hasError: false,
+      omniauth_token: '',
      user_access_token: '',
+      channel: 'facebook',
      selectedPage: { name: null, id: null },
      pageName: '',
      pageList: [],
@@ -73,29 +78,24 @@ export default {
  },

  mounted() {
-    // Warm the SDK so the login click opens its popup within the gesture's
-    // activation window (see useFacebookPageConnect).
-    this.preloadSdk();
+    window.fbAsyncInit = this.runFBInit;
  },

  methods: {
    async startLogin() {
      this.hasLoginStarted = true;
      try {
-        const result = await this.loginAndFetchPages();
-        if (!result) {
-          // Cancelled popup / not authorized — surface a generic auth error.
-          this.hasError = true;
-          this.errorStateMessage = this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH');
-          this.errorStateDescription = '';
-          return;
-        }
-        this.pageList = result.pages;
-        this.user_access_token = result.userAccessToken;
+        // this will load the SDK in a promise, and resolve it when the sdk is loaded
+        // in case the SDK is already present, it will resolve immediately
+        await this.loadFBsdk();
+        this.runFBInit(); // run init anyway, `tryFBlogin` won't wait for `fbAsyncInit` otherwise.
+        this.tryFBlogin(); // make an attempt to login
      } catch (error) {
        if (error.name === 'ScriptLoaderError') {
+          // if the error was related to script loading, we show a toast
          useAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_LOADING'));
        } else {
+          // if the error was anything else, we capture it and show a toast
          Sentry.captureException(error);
          useAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH'));
        }
@@ -114,6 +114,81 @@ export default {
      this.v$.selectedPage.$touch();
    },

+    initChannelAuth(channel) {
+      if (channel === 'facebook') {
+        this.loadFBsdk();
+      }
+    },
+
+    runFBInit() {
+      FB.init({
+        appId: window.chatwootConfig.fbAppId,
+        xfbml: true,
+        version: window.chatwootConfig.fbApiVersion,
+        status: true,
+      });
+      window.fbSDKLoaded = true;
+      FB.AppEvents.logPageView();
+    },
+
+    async loadFBsdk() {
+      return loadScript('https://connect.facebook.net/en_US/sdk.js', {
+        id: 'facebook-jssdk',
+      });
+    },
+
+    tryFBlogin() {
+      FB.login(
+        response => {
+          this.hasError = false;
+          if (response.status === 'connected') {
+            this.fetchPages(response.authResponse.accessToken);
+          } else if (response.status === 'not_authorized') {
+            // eslint-disable-next-line no-console
+            console.error('FACEBOOK AUTH ERROR', response);
+            this.hasError = true;
+            // The person is logged into Facebook, but not your app.
+            this.errorStateMessage = this.$t(
+              'INBOX_MGMT.DETAILS.ERROR_FB_UNAUTHORIZED'
+            );
+            this.errorStateDescription = this.$t(
+              'INBOX_MGMT.DETAILS.ERROR_FB_UNAUTHORIZED_HELP'
+            );
+          } else {
+            // eslint-disable-next-line no-console
+            console.error('FACEBOOK AUTH ERROR', response);
+            this.hasError = true;
+            // The person is not logged into Facebook, so we're not sure if
+            // they are logged into this app or not.
+            this.errorStateMessage = this.$t(
+              'INBOX_MGMT.DETAILS.ERROR_FB_AUTH'
+            );
+            this.errorStateDescription = '';
+          }
+        },
+        {
+          scope:
+            'pages_manage_metadata,business_management,pages_messaging,instagram_basic,pages_show_list,pages_read_engagement,instagram_manage_messages',
+        }
+      );
+    },
+
+    async fetchPages(_token) {
+      try {
+        const response = await ChannelApi.fetchFacebookPages(
+          _token,
+          this.accountId
+        );
+        const {
+          data: { data },
+        } = response;
+        this.pageList = data.page_details;
+        this.user_access_token = data.user_access_token;
+      } catch (error) {
+        // Ignore error
+      }
+    },
+
    channelParams() {
      return {
        user_access_token: this.user_access_token,
@@ -1,16 +1,21 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { useI18n, I18nT } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
-import { useWhatsappEmbeddedSignup } from 'dashboard/composables/useWhatsappEmbeddedSignup';
 import Icon from 'next/icon/Icon.vue';
 import NextButton from 'next/button/Button.vue';
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 import InboxesAPI from 'dashboard/api/inboxes';
 import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 import globalConstants from 'dashboard/constants/globals.js';
+import {
+  setupFacebookSdk,
+  initWhatsAppEmbeddedSignup,
+  createMessageHandler,
+  isValidBusinessData,
+} from './whatsapp/utils';

 const props = defineProps({
  enableCallingOnComplete: {
@@ -22,10 +27,15 @@ const props = defineProps({
 const store = useStore();
 const router = useRouter();
 const { t } = useI18n();
-const { isAuthenticating, runEmbeddedSignup } = useWhatsappEmbeddedSignup();

+// State
+const fbSdkLoaded = ref(false);
 const isProcessing = ref(false);
 const processingMessage = ref('');
+const authCodeReceived = ref(false);
+const authCode = ref(null);
+const businessData = ref(null);
+const isAuthenticating = ref(false);

 const benefits = computed(() => [
  {
@@ -44,6 +54,25 @@ const benefits = computed(() => [

 const showLoader = computed(() => isAuthenticating.value || isProcessing.value);

+// Error handling
+const handleSignupError = data => {
+  isProcessing.value = false;
+  authCodeReceived.value = false;
+  isAuthenticating.value = false;
+
+  const errorMessage =
+    data.error ||
+    data.message ||
+    t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE');
+  useAlert(errorMessage);
+};
+
+const handleSignupCancellation = () => {
+  isProcessing.value = false;
+  authCodeReceived.value = false;
+  isAuthenticating.value = false;
+};
+
 const enableCallingForInbox = async inboxId => {
  try {
    await InboxesAPI.enableWhatsappCalling(inboxId);
@@ -57,12 +86,14 @@ const enableCallingForInbox = async inboxId => {
 const handleSignupSuccess = async inboxData => {
  if (inboxData && inboxData.id) {
    if (props.enableCallingOnComplete) {
+      isProcessing.value = true;
      processingMessage.value = t(
        'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.ENABLING_CALLING'
      );
      await enableCallingForInbox(inboxData.id);
    }
    isProcessing.value = false;
+    isAuthenticating.value = false;
    useAlert(t('INBOX_MGMT.FINISH.MESSAGE'));
    router.replace({
      name: 'settings_inboxes_add_agents',
@@ -73,6 +104,7 @@ const handleSignupSuccess = async inboxData => {
    });
  } else {
    isProcessing.value = false;
+    isAuthenticating.value = false;
    useAlert(t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.SUCCESS_FALLBACK'));
    router.replace({
      name: 'settings_inbox_list',
@@ -80,21 +112,12 @@ const handleSignupSuccess = async inboxData => {
  }
 };

-const launchEmbeddedSignup = async () => {
-  let credentials;
-  try {
-    credentials = await runEmbeddedSignup();
-  } catch (error) {
-    useAlert(
-      error.message ||
-        t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.SDK_LOAD_ERROR')
-    );
-    return;
-  }
-
-  // Resolves null when the user dismisses the Meta popup.
-  if (!credentials) {
-    useAlert(t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.CANCELLED'));
+// Signup flow
+const completeSignupFlow = async businessDataParam => {
+  if (!authCodeReceived.value || !authCode.value) {
+    handleSignupError({
+      error: t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.AUTH_NOT_COMPLETED'),
+    });
    return;
  }

@@ -102,20 +125,130 @@ const launchEmbeddedSignup = async () => {
  processingMessage.value = t(
    'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.PROCESSING'
  );
+
  try {
-    const inboxData = await store.dispatch(
+    const params = {
+      code: authCode.value,
+      business_id: businessDataParam.business_id,
+      waba_id: businessDataParam.waba_id,
+      phone_number_id: businessDataParam?.phone_number_id || '',
+    };
+
+    const responseData = await store.dispatch(
      'inboxes/createWhatsAppEmbeddedSignup',
-      credentials
+      params
    );
-    await handleSignupSuccess(inboxData);
+
+    authCode.value = null;
+    handleSignupSuccess(responseData);
  } catch (error) {
-    isProcessing.value = false;
-    useAlert(
+    const errorMessage =
      parseAPIErrorResponse(error) ||
-        t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE')
-    );
+      t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE');
+    handleSignupError({ error: errorMessage });
  }
 };
+
+// Message handling
+const handleEmbeddedSignupData = async data => {
+  if (
+    data.event === 'FINISH' ||
+    data.event === 'FINISH_WHATSAPP_BUSINESS_APP_ONBOARDING'
+  ) {
+    const businessDataLocal = data.data;
+
+    if (isValidBusinessData(businessDataLocal)) {
+      businessData.value = businessDataLocal;
+      if (authCodeReceived.value && authCode.value) {
+        await completeSignupFlow(businessDataLocal);
+      } else {
+        processingMessage.value = t(
+          'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.WAITING_FOR_AUTH'
+        );
+      }
+    } else {
+      handleSignupError({
+        error: t(
+          'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.INVALID_BUSINESS_DATA'
+        ),
+      });
+    }
+  } else if (data.event === 'CANCEL') {
+    handleSignupCancellation();
+  } else if (data.event === 'error') {
+    handleSignupError({
+      error:
+        data.error_message ||
+        t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.SIGNUP_ERROR'),
+      error_id: data.error_id,
+      session_id: data.session_id,
+    });
+  }
+};
+
+const handleSignupMessage = createMessageHandler(handleEmbeddedSignupData);
+
+const launchEmbeddedSignup = async () => {
+  try {
+    isAuthenticating.value = true;
+    processingMessage.value = t(
+      'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.AUTH_PROCESSING'
+    );
+
+    await setupFacebookSdk(
+      window.chatwootConfig?.whatsappAppId,
+      window.chatwootConfig?.whatsappApiVersion
+    );
+    fbSdkLoaded.value = true;
+
+    const code = await initWhatsAppEmbeddedSignup(
+      window.chatwootConfig?.whatsappConfigurationId
+    );
+
+    authCode.value = code;
+    authCodeReceived.value = true;
+    processingMessage.value = t(
+      'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.WAITING_FOR_BUSINESS_INFO'
+    );
+
+    if (businessData.value) {
+      completeSignupFlow(businessData.value);
+    }
+  } catch (error) {
+    if (error.message === 'Login cancelled') {
+      isProcessing.value = false;
+      isAuthenticating.value = false;
+      useAlert(t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.CANCELLED'));
+    } else {
+      handleSignupError({
+        error:
+          error.message ||
+          t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.SDK_LOAD_ERROR'),
+      });
+    }
+  }
+};
+
+// Lifecycle
+const setupMessageListener = () => {
+  window.addEventListener('message', handleSignupMessage);
+};
+
+const cleanupMessageListener = () => {
+  window.removeEventListener('message', handleSignupMessage);
+};
+
+const initialize = () => {
+  setupMessageListener();
+};
+
+onMounted(() => {
+  initialize();
+});
+
+onBeforeUnmount(() => {
+  cleanupMessageListener();
+});
 </script>

 <template>
@@ -4,7 +4,6 @@ import InboxReconnectionRequired from '../components/InboxReconnectionRequired.v
 import { useAlert } from 'dashboard/composables';

 import { loadScript } from 'dashboard/helper/DOMHelpers';
-import { buildFacebookLoginScopes } from 'dashboard/helper/facebookScopes';
 import * as Sentry from '@sentry/vue';

 export default {
@@ -21,11 +20,6 @@ export default {
    inboxId() {
      return this.inbox.id;
    },
-    facebookLoginScopes() {
-      return buildFacebookLoginScopes({
-        includeInstagramScopes: !!this.inbox.instagram_id,
-      });
-    },
  },
  mounted() {
    window.fbAsyncInit = this.runFBInit;
@@ -83,7 +77,8 @@ export default {
          }
        },
        {
-          scope: this.facebookLoginScopes,
+          scope:
+            'pages_manage_metadata,business_management,pages_messaging,instagram_basic,pages_show_list,pages_read_engagement,instagram_manage_messages',
          auth_type: 'reauthorize',
        }
      );
@@ -1,11 +1,9 @@
 <script>
 import { useAlert } from 'dashboard/composables';
-import InboxesAPI from 'dashboard/api/inboxes';
 import SettingsFieldSection from 'dashboard/components-next/Settings/SettingsFieldSection.vue';
 import SettingsToggleSection from 'dashboard/components-next/Settings/SettingsToggleSection.vue';
 import NextInput from 'dashboard/components-next/input/Input.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';

 export default {
  components: {
@@ -13,7 +11,6 @@ export default {
    SettingsToggleSection,
    NextInput,
    NextButton,
-    Spinner,
  },
  props: {
    inbox: {
@@ -24,11 +21,9 @@ export default {
  data() {
    return {
      voiceEnabled: this.inbox.voice_enabled || false,
-      inboundCallsEnabled: this.inbox.inbound_calls_enabled !== false,
      apiKeySid: this.inbox.api_key_sid || '',
      apiKeySecret: '',
      isUpdating: false,
-      isTogglingInbound: false,
    };
  },
  computed: {
@@ -67,27 +62,8 @@ export default {
    'inbox.api_key_sid'(val) {
      this.apiKeySid = val || '';
    },
-    'inbox.inbound_calls_enabled'(val) {
-      this.inboundCallsEnabled = val !== false;
-    },
  },
  methods: {
-    async handleInboundToggle(newValue) {
-      if (this.isTogglingInbound) return;
-      const previousValue = this.inboundCallsEnabled;
-      this.inboundCallsEnabled = newValue;
-      this.isTogglingInbound = true;
-      try {
-        await InboxesAPI.setInboundCalls(this.inbox.id, newValue);
-        await this.$store.dispatch('inboxes/get', this.inbox.id);
-        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-      } catch (_) {
-        this.inboundCallsEnabled = previousValue;
-        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
-      } finally {
-        this.isTogglingInbound = false;
-      }
-    },
    async updateVoiceSettings() {
      this.isUpdating = true;
      try {
@@ -147,24 +123,6 @@ export default {
      />
    </div>

-    <div
-      v-if="inbox.voice_enabled"
-      class="relative"
-      :class="{ 'pointer-events-none opacity-60': isTogglingInbound }"
-    >
-      <SettingsToggleSection
-        :model-value="inboundCallsEnabled"
-        :header="$t('INBOX_MGMT.VOICE_CONFIGURATION.INBOUND.LABEL')"
-        :description="$t('INBOX_MGMT.VOICE_CONFIGURATION.INBOUND.DESCRIPTION')"
-        :hide-toggle="isTogglingInbound"
-        @update:model-value="handleInboundToggle"
-      >
-        <template v-if="isTogglingInbound" #hiddenToggle>
-          <Spinner class="size-4 text-n-slate-11" />
-        </template>
-      </SettingsToggleSection>
-    </div>
-
    <div v-if="inbox.voice_enabled && inbox.voice_call_webhook_url">
      <SettingsFieldSection
        :label="$t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_VOICE_URL_TITLE')"
@@ -24,13 +24,10 @@ export default {
  data() {
    return {
      callingEnabled: this.inbox.provider_config?.calling_enabled || false,
-      inboundCallsEnabled:
-        this.inbox.provider_config?.inbound_calls_enabled !== false,
      permissionRequestBody:
        this.inbox.provider_config?.call_permission_request_body || '',
      isUpdating: false,
      isTogglingCalling: false,
-      isTogglingInbound: false,
    };
  },
  computed: {
@@ -47,27 +44,8 @@ export default {
    'inbox.provider_config.call_permission_request_body'(val) {
      this.permissionRequestBody = val || '';
    },
-    'inbox.provider_config.inbound_calls_enabled'(val) {
-      this.inboundCallsEnabled = val !== false;
-    },
  },
  methods: {
-    async handleInboundToggle(newValue) {
-      if (this.isTogglingInbound) return;
-      const previousValue = this.inboundCallsEnabled;
-      this.inboundCallsEnabled = newValue;
-      this.isTogglingInbound = true;
-      try {
-        await InboxesAPI.setInboundCalls(this.inbox.id, newValue);
-        await this.$store.dispatch('inboxes/get', this.inbox.id);
-        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-      } catch (_) {
-        this.inboundCallsEnabled = previousValue;
-        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
-      } finally {
-        this.isTogglingInbound = false;
-      }
-    },
    async handleCallingToggle(newValue) {
      if (this.isTogglingCalling) return;
      const previousValue = this.callingEnabled;
@@ -139,25 +117,6 @@ export default {
    </div>

    <template v-if="callingEnabled">
-      <div
-        class="relative"
-        :class="{ 'pointer-events-none opacity-60': isTogglingInbound }"
-      >
-        <SettingsToggleSection
-          :model-value="inboundCallsEnabled"
-          :header="$t('INBOX_MGMT.VOICE_CONFIGURATION.INBOUND.LABEL')"
-          :description="
-            $t('INBOX_MGMT.VOICE_CONFIGURATION.INBOUND.DESCRIPTION')
-          "
-          :hide-toggle="isTogglingInbound"
-          @update:model-value="handleInboundToggle"
-        >
-          <template v-if="isTogglingInbound" #hiddenToggle>
-            <Spinner class="size-4 text-n-slate-11" />
-          </template>
-        </SettingsToggleSection>
-      </div>
-
      <SettingsFieldSection
        v-if="phoneNumber"
        :label="$t('INBOX_MGMT.WHATSAPP_CALLING.PHONE_NUMBER.LABEL')"
@@ -48,6 +48,7 @@ const updateSignature = () => {
      :placeholder="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')"
      channel-type="Context::MessageSignature"
      :enable-suggestions="false"
+      show-image-resize-toolbar
    />
    <div>
      <NextButton
@@ -2,21 +2,15 @@ import ConversationAPI from '../../api/conversations';
 import types from '../mutation-types';

 export const state = {
-  allCount: 0,
  inboxes: {},
  labels: {},
  teams: {},
 };

-const normalizeCount = count => {
-  const parsedCount = Number(count);
-  return Number.isFinite(parsedCount) && parsedCount > 0 ? parsedCount : 0;
-};
-
 const normalizeCounts = counts => {
  return Object.entries(counts || {}).reduce((result, [id, count]) => {
-    const parsedCount = normalizeCount(count);
-    if (parsedCount > 0) {
+    const parsedCount = Number(count);
+    if (Number.isFinite(parsedCount) && parsedCount > 0) {
      result[String(id)] = parsedCount;
    }

@@ -25,9 +19,6 @@ const normalizeCounts = counts => {
 };

 export const getters = {
-  getAllUnreadCount($state) {
-    return $state.allCount;
-  },
  getInboxUnreadCount: $state => inboxId => {
    return $state.inboxes[String(inboxId)] || 0;
  },
@@ -64,7 +55,6 @@ export const actions = {

 export const mutations = {
  [types.SET_CONVERSATION_UNREAD_COUNTS]($state, payload = {}) {
-    $state.allCount = normalizeCount(payload.all_count);
    $state.inboxes = normalizeCounts(payload.inboxes);
    $state.labels = normalizeCounts(payload.labels);
    $state.teams = normalizeCounts(payload.teams);
@@ -73,12 +73,6 @@ const getValueFromConversation = (conversation, attributeKey) => {
      return conversation.display_id || conversation.id;
    case 'assignee_id':
      return conversation.meta?.assignee?.id;
-    case 'contact_id':
-      return (
-        conversation.meta?.sender?.id ||
-        conversation.contact?.id ||
-        conversation.contact_id
-      );
    case 'inbox_id':
      return conversation.inbox_id;
    case 'team_id':
@@ -244,32 +244,6 @@ describe('filterHelpers', () => {
      expect(matchesFilters(conversation, filters)).toBe(false);
    });

-    it('should match conversation with equal_to operator for contact_id', () => {
-      const conversation = { meta: { sender: { id: 42 } } };
-      const filters = [
-        {
-          attribute_key: 'contact_id',
-          filter_operator: 'equal_to',
-          values: { id: 42, name: 'Jane Doe' },
-          query_operator: 'and',
-        },
-      ];
-      expect(matchesFilters(conversation, filters)).toBe(true);
-    });
-
-    it('should match conversation with saved contact_id filter values', () => {
-      const conversation = { meta: { sender: { id: 42 } } };
-      const filters = [
-        {
-          attribute_key: 'contact_id',
-          filter_operator: 'equal_to',
-          values: [42],
-          query_operator: 'and',
-        },
-      ];
-      expect(matchesFilters(conversation, filters)).toBe(true);
-    });
-
    // Standard attribute tests - priority
    it('should match conversation with equal_to operator for priority', () => {
      const conversation = { priority: 'urgent' };
@@ -15,12 +15,6 @@ const FILTER_KEYS = {
  [VIEW_TYPES.CONTACT]: VIEW_TYPES.CONTACT,
 };

-// a folder's contact_id filter stores only the id, extract it so the
-// contact can be fetched and its name shown in the edit folder modal
-const getFolderContactId = folder =>
-  folder?.query?.payload?.find(filter => filter.attribute_key === 'contact_id')
-    ?.values?.[0];
-
 export const state = {
  [VIEW_TYPES.CONVERSATION]: {
    records: [],
@@ -53,9 +47,6 @@ export const getters = {
  getActiveConversationFolder(_state) {
    return _state.activeConversationFolder;
  },
-  getActiveFolderContactId(_state) {
-    return getFolderContactId(_state.activeConversationFolder);
-  },
 };

 export const actions = {
@@ -113,11 +104,8 @@ export const actions = {
      commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: false });
    }
  },
-  setActiveConversationFolder({ commit, dispatch }, data) {
+  setActiveConversationFolder({ commit }, data) {
    commit(types.SET_ACTIVE_CONVERSATION_FOLDER, data);
-    // prefetch the contact of a contact filter so the UI can show its name
-    const contactId = getFolderContactId(data);
-    if (contactId) dispatch('contacts/show', { id: contactId }, { root: true });
  },
 };

@@ -15,7 +15,6 @@ describe('#actions', () => {
  describe('#get', () => {
    it('commits unread counts when API is successful', async () => {
      const payload = {
-        all_count: 2,
        inboxes: { 1: '2' },
        labels: { 3: 4 },
        teams: { 5: 6 },
@@ -3,7 +3,6 @@ import { getters } from '../../conversationUnreadCounts';
 describe('#getters', () => {
  it('returns inbox unread count by id', () => {
    const state = {
-      allCount: 0,
      inboxes: { 1: 2 },
      labels: {},
      teams: {},
@@ -16,7 +15,6 @@ describe('#getters', () => {

  it('returns label unread count by id', () => {
    const state = {
-      allCount: 0,
      inboxes: {},
      labels: { 3: 4 },
      teams: {},
@@ -29,7 +27,6 @@ describe('#getters', () => {

  it('returns team unread count by id', () => {
    const state = {
-      allCount: 0,
      inboxes: {},
      labels: {},
      teams: { 5: 6 },
@@ -40,20 +37,8 @@ describe('#getters', () => {
    expect(getters.getTeamUnreadCount(state)(6)).toBe(0);
  });

-  it('returns all unread count', () => {
-    const state = {
-      allCount: 7,
-      inboxes: {},
-      labels: {},
-      teams: {},
-    };
-
-    expect(getters.getAllUnreadCount(state)).toBe(7);
-  });
-
  it('returns unread count maps', () => {
    const state = {
-      allCount: 0,
      inboxes: { 1: 2 },
      labels: { 3: 4 },
      teams: { 5: 6 },
@@ -4,10 +4,9 @@ import { mutations } from '../../conversationUnreadCounts';
 describe('#mutations', () => {
  describe('#SET_CONVERSATION_UNREAD_COUNTS', () => {
    it('normalizes unread count payload', () => {
-      const state = { allCount: 0, inboxes: {}, labels: {}, teams: {} };
+      const state = { inboxes: {}, labels: {}, teams: {} };

      mutations[types.SET_CONVERSATION_UNREAD_COUNTS](state, {
-        all_count: '3',
        inboxes: {
          1: '2',
          2: 0,
@@ -24,7 +23,6 @@ describe('#mutations', () => {
      });

      expect(state).toEqual({
-        allCount: 3,
        inboxes: { 1: 2 },
        labels: { 4: 5 },
        teams: { 6: 7 },
@@ -33,7 +31,6 @@ describe('#mutations', () => {

    it('clears counts when payload is empty', () => {
      const state = {
-        allCount: 2,
        inboxes: { 1: 2 },
        labels: { 4: 5 },
        teams: { 6: 7 },
@@ -42,21 +39,10 @@ describe('#mutations', () => {
      mutations[types.SET_CONVERSATION_UNREAD_COUNTS](state, {});

      expect(state).toEqual({
-        allCount: 0,
        inboxes: {},
        labels: {},
        teams: {},
      });
    });
-
-    it('normalizes invalid aggregate counts to zero', () => {
-      const state = { allCount: 2, inboxes: {}, labels: {}, teams: {} };
-
-      mutations[types.SET_CONVERSATION_UNREAD_COUNTS](state, {
-        all_count: 'invalid',
-      });
-
-      expect(state.allCount).toBe(0);
-    });
  });
 });
@@ -1,11 +1,7 @@
 import axios from 'axios';
-import * as types from '../../../mutation-types';
 import { actions } from '../../customViews';
-import {
-  contactFilterView,
-  customViewList,
-  updateCustomViewList,
-} from './fixtures';
+import * as types from '../../../mutation-types';
+import { customViewList, updateCustomViewList } from './fixtures';

 const commit = vi.fn();
 global.axios = axios;
@@ -110,27 +106,5 @@ describe('#actions', () => {
        [types.default.SET_ACTIVE_CONVERSATION_FOLDER, customViewList[0]],
      ]);
    });
-
-    it('prefetches the contact of a contact filter', async () => {
-      const dispatch = vi.fn();
-      await actions.setActiveConversationFolder(
-        { commit, dispatch },
-        contactFilterView
-      );
-      expect(dispatch).toHaveBeenCalledWith(
-        'contacts/show',
-        { id: 42 },
-        { root: true }
-      );
-    });
-
-    it('does not prefetch without a contact filter', async () => {
-      const dispatch = vi.fn();
-      await actions.setActiveConversationFolder(
-        { commit, dispatch },
-        customViewList[0]
-      );
-      expect(dispatch).not.toHaveBeenCalled();
-    });
  });
 });
@@ -15,21 +15,6 @@ export const contactViewList = [
  },
 ];

-export const contactFilterView = {
-  name: 'Contact view',
-  filter_type: 0,
-  query: {
-    payload: [
-      {
-        attribute_key: 'contact_id',
-        filter_operator: 'equal_to',
-        values: [42],
-        query_operator: null,
-      },
-    ],
-  },
-};
-
 export const customViewList = [
  {
    name: 'Custom view',
@@ -1,5 +1,5 @@
 import { getters } from '../../customViews';
-import { contactFilterView, contactViewList, customViewList } from './fixtures';
+import { contactViewList, customViewList } from './fixtures';

 describe('#getters', () => {
  it('getCustomViewsByFilterType', () => {
@@ -43,20 +43,4 @@ describe('#getters', () => {
      customViewList[0]
    );
  });
-
-  it('getActiveFolderContactId', () => {
-    expect(
-      getters.getActiveFolderContactId({
-        activeConversationFolder: contactFilterView,
-      })
-    ).toEqual(42);
-  });
-
-  it('getActiveFolderContactId returns undefined without a contact filter', () => {
-    expect(
-      getters.getActiveFolderContactId({
-        activeConversationFolder: customViewList[0],
-      })
-    ).toBeUndefined();
-  });
 });
@@ -1,21 +0,0 @@
-@import 'dashboard/assets/scss/app';
-
-*,
-::before,
-::after {
-  --_histoire-color-primary-50: 235 245 255;
-  --_histoire-color-primary-100: 194 225 255;
-  --_histoire-color-primary-200: 153 206 255;
-  --_histoire-color-primary-300: 112 186 255;
-  --_histoire-color-primary-400: 71 166 255;
-  --_histoire-color-primary-500: 31 147 255;
-  --_histoire-color-primary-600: 25 118 204;
-  --_histoire-color-primary-700: 19 88 153;
-  --_histoire-color-primary-800: 12 59 102;
-  --_histoire-color-primary-900: 6 29 51;
-}
-
-html,
-body {
-  font-family: 'Inter', sans-serif;
-}
@@ -0,0 +1,6 @@
+@import 'dashboard/assets/scss/app';
+
+html,
+body {
+  font-family: 'Inter', sans-serif;
+}
@@ -1,37 +1,28 @@
-import MarkdownIt from 'markdown-it';
 import mila from 'markdown-it-link-attributes';
 import mentionPlugin from './markdownIt/link';
+import MarkdownIt from 'markdown-it';

-const setImageSizing = inlineToken => {
+const setImageHeight = inlineToken => {
  const imgSrc = inlineToken.attrGet('src');
  if (!imgSrc) return;
  const url = new URL(imgSrc);
-  const width = url.searchParams.get('cw_image_width');
-  if (width) {
-    inlineToken.attrSet(
-      'style',
-      `width: ${width}; max-width: 100%; height: auto;`
-    );
-    return;
-  }
  const height = url.searchParams.get('cw_image_height');
-  if (height) inlineToken.attrSet('style', `height: ${height};`);
+  if (!height) return;
+  inlineToken.attrSet('style', `height: ${height};`);
 };

 const processInlineToken = blockToken => {
  blockToken.children.forEach(inlineToken => {
    if (inlineToken.type === 'image') {
-      setImageSizing(inlineToken);
+      setImageHeight(inlineToken);
    }
  });
 };

 const imgResizeManager = md => {
-  // If the image URL carries a cw_image_width or cw_image_height query param,
-  // add an inline style attribute so the rendered <img> respects the agent's
-  // resize choice. Width takes precedence (HC drag-resize); height is kept for
-  // legacy messages and the message-signature use case.
-  md.core.ruler.after('inline', 'add-image-sizing', state => {
+  // Custom rule for image resize in markdown
+  // If the image url has a query param cw_image_height, then add a style attribute to the image
+  md.core.ruler.after('inline', 'add-image-height', state => {
    state.tokens.forEach(blockToken => {
      if (blockToken.type === 'inline') {
        processInlineToken(blockToken);
@@ -63,13 +54,6 @@ const createMarkdownInstance = (linkify = true) => {
    });
 };

-// Help center article tables persist column widths as an internal
-// `<!--cw-colwidths:...-->` comment before the table. It exists only for the
-// editor's markdown round-trip and must never surface as text — markdown-it runs
-// with `html: false`, which would otherwise escape it into a visible comment in
-// rendered/plain output (e.g. dashboard search snippets). Strip it on the way in.
-const COLWIDTHS_MARKER_REGEX = /<!--cw-colwidths:[\d,]+-->\r?\n?/g;
-
 const TWITTER_USERNAME_REGEX = /(^|[^@\w])@(\w{1,15})\b/g;
 const TWITTER_USERNAME_REPLACEMENT = '$1[@$2](http://twitter.com/$2)';
 const TWITTER_HASH_REGEX = /(^|\s)#(\w+)/g;
@@ -82,7 +66,7 @@ class MessageFormatter {
    isAPrivateNote = false,
    linkify = true
  ) {
-    this.message = (message || '').replace(COLWIDTHS_MARKER_REGEX, '');
+    this.message = message || '';
    this.isAPrivateNote = isAPrivateNote;
    this.isATweet = isATweet;
    this.linkify = linkify;
@@ -126,16 +126,6 @@ describe('#MessageFormatter', () => {
    });
  });

-  describe('help center table colwidth marker', () => {
-    it('strips the internal colwidths marker from rendered output', () => {
-      const message =
-        '<!--cw-colwidths:120,200-->\n| A | B |\n| --- | --- |\n| 1 | 2 |';
-      const formatter = new MessageFormatter(message);
-      expect(formatter.formattedMessage).not.toContain('cw-colwidths');
-      expect(formatter.plainText).not.toContain('cw-colwidths');
-    });
-  });
-
  describe('#sanitize', () => {
    it('sanitizes markup and removes all unnecessary elements', () => {
      const message =
@@ -0,0 +1,125 @@
+<script setup>
+import { ref, computed, defineAsyncComponent } from 'vue';
+import { stories, buildTree } from './registry';
+import TreeNode from './TreeNode.vue';
+import StoryFrame from './StoryFrame.vue';
+
+const query = ref('');
+const filteredStories = computed(() => {
+  const term = query.value.trim().toLowerCase();
+  if (!term) return stories;
+  return stories.filter(story => story.title.toLowerCase().includes(term));
+});
+const tree = computed(() => buildTree(filteredStories.value));
+const isSearching = computed(() => query.value.trim().length > 0);
+
+function pathFromHash() {
+  const hash = decodeURIComponent(window.location.hash.replace(/^#/, ''));
+  return stories.find(story => story.path === hash)?.path;
+}
+
+const selectedPath = ref(pathFromHash() || stories[0]?.path || '');
+const current = computed(() =>
+  stories.find(story => story.path === selectedPath.value)
+);
+const StoryComponent = computed(() =>
+  current.value ? defineAsyncComponent(current.value.loader) : null
+);
+
+function select(path) {
+  selectedPath.value = path;
+  window.location.hash = encodeURIComponent(path);
+}
+
+const isDark = ref(false);
+function toggleDark() {
+  isDark.value = !isDark.value;
+  document.documentElement.classList.toggle('dark', isDark.value);
+}
+
+// Scoped to the preview canvas only (see the <main :dir> below), so the
+// sidebar stays LTR while stories can be inspected in RTL.
+const isRtl = ref(false);
+function toggleDir() {
+  isRtl.value = !isRtl.value;
+}
+
+// Remount the active story on every hot update so a fixed file clears the
+// error boundary (otherwise a caught error stays latched until a full reload).
+const hmrTick = ref(0);
+if (import.meta.hot) {
+  import.meta.hot.on('vite:afterUpdate', () => {
+    hmrTick.value += 1;
+  });
+}
+</script>
+
+<template>
+  <div
+    class="flex w-screen h-screen overflow-hidden bg-n-background text-n-slate-12"
+  >
+    <aside
+      dir="ltr"
+      class="flex flex-col border-r w-72 shrink-0 border-n-weak bg-n-solid-1"
+    >
+      <div
+        class="flex items-center justify-between h-12 gap-2 px-4 border-b shrink-0 border-n-weak"
+      >
+        <span class="text-sm font-semibold text-n-slate-12">
+          @chatwoot/design
+        </span>
+        <div class="flex items-center gap-1">
+          <button
+            type="button"
+            class="px-2 py-1 text-xs font-medium uppercase rounded-md text-n-slate-11 hover:bg-n-alpha-1"
+            @click="toggleDir"
+          >
+            {{ isRtl ? 'RTL' : 'LTR' }}
+          </button>
+          <button
+            type="button"
+            class="px-2 py-1 text-sm rounded-md text-n-slate-11 hover:bg-n-alpha-1"
+            @click="toggleDark"
+          >
+            {{ isDark ? 'Light' : 'Dark' }}
+          </button>
+        </div>
+      </div>
+      <div class="p-3 border-b shrink-0 border-n-weak">
+        <input
+          v-model="query"
+          type="search"
+          placeholder="Search stories"
+          class="w-full px-3 py-1.5 text-sm rounded-md border outline-none border-n-weak bg-n-background text-n-slate-12 placeholder:text-n-slate-10 focus:border-n-brand"
+        />
+      </div>
+      <nav class="flex-1 p-2 overflow-y-auto">
+        <TreeNode
+          :nodes="tree"
+          :selected-path="selectedPath"
+          :force-expand="isSearching"
+          @select="select"
+        />
+        <p
+          v-if="!filteredStories.length"
+          class="px-2 py-4 text-sm text-n-slate-10"
+        >
+          No stories match "{{ query }}".
+        </p>
+      </nav>
+    </aside>
+    <main :dir="isRtl ? 'rtl' : 'ltr'" class="flex-1 min-w-0 overflow-hidden">
+      <StoryFrame
+        v-if="StoryComponent"
+        :key="`${selectedPath}:${hmrTick}`"
+        :component="StoryComponent"
+      />
+      <div
+        v-else
+        class="flex items-center justify-center h-full text-n-slate-10"
+      >
+        Select a story to preview.
+      </div>
+    </main>
+  </div>
+</template>
@@ -0,0 +1,39 @@
+<script setup>
+import { computed, provide } from 'vue';
+
+const props = defineProps({
+  title: { type: String, required: true },
+  layout: {
+    type: Object,
+    default: () => ({ type: 'grid', width: '80%' }),
+  },
+  // Accepted for API compatibility with Histoire; not used by the harness.
+  group: { type: String, default: '' },
+});
+
+const layout = computed(() => ({ type: 'grid', ...props.layout }));
+provide('storyLayout', layout);
+
+const name = computed(() => props.title.split('/').pop());
+const containerClass = computed(() =>
+  layout.value.type === 'single'
+    ? 'flex flex-col gap-6'
+    : 'flex flex-wrap items-start gap-6'
+);
+</script>
+
+<template>
+  <div class="flex flex-col h-full min-h-0 bg-n-background">
+    <header
+      class="flex flex-col gap-0.5 px-6 py-4 border-b border-n-weak shrink-0"
+    >
+      <h1 class="text-lg font-semibold text-n-slate-12">{{ name }}</h1>
+      <p class="text-xs text-n-slate-10">{{ title }}</p>
+    </header>
+    <div class="flex-1 min-h-0 overflow-auto p-6">
+      <div :class="containerClass">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,30 @@
+<script setup>
+import { ref, onErrorCaptured } from 'vue';
+
+// Per-story error boundary. Keyed by the story path in App.vue, so it remounts
+// (and resets) on navigation. Containing the error here keeps one broken story
+// from tearing down the whole harness, mirroring Histoire's per-story isolation.
+defineProps({
+  component: { type: [Object, Function], default: null },
+});
+
+const error = ref(null);
+onErrorCaptured(err => {
+  error.value = err;
+  return false;
+});
+</script>
+
+<template>
+  <div v-if="error" class="flex flex-col h-full gap-3 p-6 overflow-auto">
+    <p class="text-sm font-semibold text-n-ruby-11">
+      This story failed to render.
+    </p>
+    <div
+      class="p-3 font-mono text-xs whitespace-pre-wrap rounded-md text-n-slate-11 bg-n-alpha-1"
+    >
+      {{ error.stack || error.message }}
+    </div>
+  </div>
+  <component :is="component" v-else />
+</template>
@@ -0,0 +1,76 @@
+<script setup>
+import { reactive } from 'vue';
+
+// Recursive sidebar node. Each instance owns the collapsed state of its own
+// direct child groups, so nesting just works. Plain buttons/divs (no <ul>/<li>)
+// avoid the list markers the dashboard stylesheet injects.
+const props = defineProps({
+  nodes: { type: Array, required: true },
+  selectedPath: { type: String, default: '' },
+  forceExpand: { type: Boolean, default: false },
+  depth: { type: Number, default: 0 },
+});
+
+defineEmits(['select']);
+
+// Default: top-level (L1) groups open, everything deeper collapsed.
+// `overrides` holds the explicit open/closed state once the user toggles a group.
+const overrides = reactive({});
+const isOpen = name => {
+  if (props.forceExpand) return true;
+  if (name in overrides) return overrides[name];
+  return props.depth === 0;
+};
+const toggle = name => {
+  overrides[name] = !isOpen(name);
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-px">
+    <template v-for="node in nodes" :key="node.name">
+      <div v-if="node.type === 'group'" class="flex flex-col">
+        <button
+          type="button"
+          class="flex items-center w-full gap-1.5 px-2 py-1 rounded-md group text-n-slate-11 hover:bg-n-alpha-1"
+          @click="toggle(node.name)"
+        >
+          <span
+            class="transition-transform i-lucide-chevron-right size-3.5 shrink-0 text-n-slate-10"
+            :class="{ 'rotate-90': isOpen(node.name) }"
+          />
+          <span
+            class="text-xs font-semibold tracking-wide uppercase truncate text-n-slate-10"
+          >
+            {{ node.name }}
+          </span>
+        </button>
+        <div
+          v-show="isOpen(node.name)"
+          class="ml-2.5 pl-2 border-l border-n-weak"
+        >
+          <TreeNode
+            :nodes="node.children"
+            :selected-path="selectedPath"
+            :force-expand="forceExpand"
+            :depth="depth + 1"
+            @select="$emit('select', $event)"
+          />
+        </div>
+      </div>
+      <button
+        v-else
+        type="button"
+        class="block w-full px-2 py-1 ml-1 text-sm text-left truncate transition-colors rounded-md"
+        :class="
+          node.path === selectedPath
+            ? 'bg-n-brand/10 text-n-brand font-medium'
+            : 'text-n-slate-11 hover:bg-n-alpha-1 hover:text-n-slate-12'
+        "
+        @click="$emit('select', node.path)"
+      >
+        {{ node.name }}
+      </button>
+    </template>
+  </div>
+</template>
@@ -0,0 +1,41 @@
+<script setup>
+import { computed, inject } from 'vue';
+
+defineProps({
+  title: { type: String, default: '' },
+});
+
+const layout = inject('storyLayout', null);
+
+// Normalizes layout sizes: numbers and bare numeric strings -> px,
+// everything else (e.g. '100%', '800px') passes through unchanged.
+function normalizeSize(value) {
+  if (value === undefined || value === null || value === '') return undefined;
+  if (typeof value === 'number') return `${value}px`;
+  return /^\d+$/.test(value) ? `${value}px` : value;
+}
+
+const cellStyle = computed(() => {
+  const current = layout?.value ?? {};
+  return {
+    width: normalizeSize(current.width),
+    height: normalizeSize(current.height),
+  };
+});
+</script>
+
+<template>
+  <section
+    class="flex flex-col overflow-hidden rounded-lg border border-n-weak bg-n-solid-1"
+    :style="cellStyle"
+  >
+    <div
+      class="px-3 py-2 text-sm font-medium border-b text-n-slate-12 border-n-weak bg-n-alpha-1"
+    >
+      {{ title }}
+    </div>
+    <div class="flex-1 p-4 bg-n-background">
+      <slot />
+    </div>
+  </section>
+</template>
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@chatwoot/design</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
@@ -0,0 +1,15 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import Story from './Story.vue';
+import Variant from './Variant.vue';
+import { setupApp } from './setup';
+
+const app = createApp(App);
+
+// Story files reference <Story> and <Variant> as globals (same as Histoire).
+app.component('Story', Story);
+app.component('Variant', Variant);
+
+setupApp(app);
+
+app.mount('#app');
@@ -0,0 +1,61 @@
+// Lazy component loaders for every *.story.vue file under app/javascript.
+const storyModules = import.meta.glob('../**/*.story.vue');
+
+// Raw sources, eagerly loaded, so we can read each story's title without
+// instantiating the (potentially heavy) component just to build the sidebar.
+const storySources = import.meta.glob('../**/*.story.vue', {
+  query: '?raw',
+  import: 'default',
+  eager: true,
+});
+
+function parseTitle(source) {
+  const match = source.match(/<Story\b[^>]*?\btitle\s*=\s*"([^"]+)"/);
+  return match ? match[1] : null;
+}
+
+export const stories = Object.keys(storyModules)
+  .map(filePath => ({
+    path: filePath,
+    title: parseTitle(storySources[filePath] || ''),
+    loader: storyModules[filePath],
+  }))
+  .filter(story => story.title)
+  .sort((a, b) => a.title.localeCompare(b.title));
+
+function insert(nodes, parts, story) {
+  const [head, ...rest] = parts;
+  if (rest.length === 0) {
+    nodes.push({ type: 'story', name: head, path: story.path });
+    return;
+  }
+  let group = nodes.find(node => node.type === 'group' && node.name === head);
+  if (!group) {
+    group = { type: 'group', name: head, children: [] };
+    nodes.push(group);
+  }
+  insert(group.children, rest, story);
+}
+
+// Sorts each level so groups come before individual stories, both alphabetically.
+function sortNodes(nodes) {
+  nodes.sort((a, b) => {
+    if (a.type !== b.type) return a.type === 'group' ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+  nodes.forEach(node => {
+    if (node.type === 'group') sortNodes(node.children);
+  });
+  return nodes;
+}
+
+// Builds a nested tree from the slash-delimited story titles
+// (e.g. "Components/Button" -> group "Components" > story "Button").
+export function buildTree(items) {
+  const roots = [];
+  items.forEach(story => {
+    const parts = story.title.split('/').map(part => part.trim());
+    insert(roots, parts, story);
+  });
+  return sortNodes(roots);
+}
@@ -1,14 +1,33 @@
-import './design-system/histoire.scss';
-import { defineSetupVue3 } from '@histoire/plugin-vue';
-import dashboardI18n from 'dashboard/i18n';
-import widgetI18n from 'widget/i18n';
+import '../design-system/stories.scss';
 import { createI18n } from 'vue-i18n';
+import { createRouter, createMemoryHistory } from 'vue-router';
 import { vResizeObserver } from '@vueuse/components';
-import store from 'dashboard/store';
 import FloatingVue from 'floating-vue';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
-import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer.js';
 import { directive as onClickaway } from 'vue3-click-away';
+import dashboardI18n from 'dashboard/i18n';
+import widgetI18n from 'widget/i18n';
+import store from 'dashboard/store';
+import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer.js';
+
+// A throwaway router so composables like useRoute()/useAccount() resolve a real
+// route object instead of throwing. We seed realistic Help Center params
+// (accountId/portalSlug/locale) so page-level stories that key off the route
+// render instead of bailing out. Story selection itself is hash-based and
+// independent of this router.
+const noop = { render: () => null };
+const router = createRouter({
+  history: createMemoryHistory(),
+  routes: [
+    {
+      path: '/app/accounts/:accountId/portals/:portalSlug/:locale?',
+      name: 'stories',
+      component: noop,
+    },
+    { path: '/:pathMatch(.*)*', name: 'fallback', component: noop },
+  ],
+});
+router.replace('/app/accounts/1/portals/chatwoot/en');

 function mergeMessages(...sources) {
  return sources.reduce((acc, src) => {
@@ -36,9 +55,12 @@ const i18n = createI18n({
  ),
 });

-export const setupVue3 = defineSetupVue3(({ app }) => {
+// Registers the same global plugins/directives the dashboard components expect
+// at runtime, so stories render identically to the real app.
+export function setupApp(app) {
  app.use(store);
  app.use(i18n);
+  app.use(router);
  app.use(FloatingVue, {
    instantMove: true,
    arrowOverflow: false,
@@ -48,4 +70,4 @@ export const setupVue3 = defineSetupVue3(({ app }) => {
  app.directive('resize', vResizeObserver);
  app.use(VueDOMPurifyHTML, domPurifyConfig);
  app.directive('on-clickaway', onClickaway);
-});
+}
@@ -34,24 +34,13 @@ body {

 .message-content {
  ul {
-    @apply list-disc list-inside;
+    list-style: disc;
+    @apply ltr:pl-3 rtl:pr-3;
  }

  ol {
-    @apply list-decimal list-inside;
-  }
-
-  li {
-    padding-inline-start: 1.5em;
-    text-indent: -1.5em;
-
-    > p:first-child {
-      @apply inline;
-    }
-
-    > * {
-      text-indent: 0;
-    }
+    list-style: decimal;
+    @apply ltr:pl-4 rtl:pr-4;
  }
 }

@@ -36,9 +36,6 @@ class ActionCableConnector extends BaseActionCableConnector {

  onReconnect = () => {
    this.syncLatestMessages();
-    // Re-fetch conversation attributes so a status change (e.g. auto-resolve)
-    // that happened while disconnected is reflected, keeping the reply box state correct.
-    this.app.$store.dispatch('conversationAttributes/getAttributes');
  };

  setLastMessageId = () => {
@@ -1,53 +0,0 @@
-import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest';
-import ActionCableConnector from '../actionCable';
-
-vi.mock('@rails/actioncable', () => ({
-  createConsumer: () => ({
-    subscriptions: { create: () => ({}) },
-    disconnect: vi.fn(),
-  }),
-}));
-
-describe('Widget ActionCableConnector', () => {
-  let app;
-  let mockDispatch;
-  let connector;
-
-  beforeEach(() => {
-    vi.useFakeTimers();
-    mockDispatch = vi.fn();
-    app = {
-      $store: {
-        dispatch: mockDispatch,
-        getters: {
-          getCurrentAccountId: 1,
-          getCurrentUserID: 1,
-        },
-      },
-    };
-    connector = new ActionCableConnector(app, 'test-token');
-    mockDispatch.mockClear();
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-    vi.useRealTimers();
-  });
-
-  it('registers the conversation.status_changed event handler', () => {
-    expect(connector.events['conversation.status_changed']).toBe(
-      connector.onStatusChange
-    );
-  });
-
-  it('re-fetches conversation attributes on reconnect so a status change missed while disconnected is reflected', () => {
-    connector.onReconnect();
-
-    expect(mockDispatch).toHaveBeenCalledWith(
-      'conversation/syncLatestMessages'
-    );
-    expect(mockDispatch).toHaveBeenCalledWith(
-      'conversationAttributes/getAttributes'
-    );
-  });
-});
@@ -14,19 +14,6 @@
 class MutexApplicationJob < ApplicationJob
  class LockAcquisitionError < StandardError; end

-  def self.retry_on_lock_conflict(wait:, attempts:, on_exhaustion: :raise)
-    retry_on LockAcquisitionError, wait: wait, attempts: attempts do |job, error|
-      raise error if on_exhaustion == :raise
-
-      job.public_send(on_exhaustion, *job.arguments)
-    end
-  end
-
-  # Redis::LockManager#unlock is not owner-checked. If a job runs past the TTL,
-  # Redis can expire the key, a newer job can acquire it, and the older job can
-  # then delete the newer job's lock on unlock. Current mutex users treat locks as
-  # short race dampeners, so this is acceptable for now. Future iterations should
-  # move Redis::LockManager to token-checked unlocks.
  def with_lock(lock_key, timeout = Redis::LockManager::LOCK_TIMEOUT)
    lock_manager = Redis::LockManager.new

--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .14.2
 .14.1