chore: better data

chore: add dynamic templates
Update TemplatePreviewExamples.story.vue
2025-10-29 23:57:02 +05:30 · 2025-10-29 23:43:05 +05:30 · 2025-10-29 21:36:32 +05:30 · 2025-10-29 21:06:20 +05:30 · 2025-10-29 20:59:02 +05:30 · 2025-10-29 20:16:54 +05:30
59 changed files with 2811 additions and 986 deletions
@@ -21,7 +21,6 @@ gem 'telephone_number'
 gem 'time_diff'
 gem 'tzinfo-data'
 gem 'valid_email2'
-gem 'octokit'
 # compress javascript config.assets.js_compressor
 gem 'uglifier'
 ##-- used for single column multiple binary flags in notification settings/feature flagging --##
@@ -591,9 +591,6 @@ GEM
      rack (>= 1.2, < 4)
      snaky_hash (~> 2.0)
      version_gem (~> 1.1)
-    octokit (10.0.0)
-      faraday (>= 1, < 3)
-      sawyer (~> 0.9)
    oj (3.16.10)
      bigdecimal (>= 3.0)
      ostruct (>= 0.2)
@@ -820,9 +817,6 @@ GEM
      sprockets (> 3.0)
      sprockets-rails
      tilt
-    sawyer (0.9.2)
-      addressable (>= 2.3.5)
-      faraday (>= 0.17.3, < 3)
    scout_apm (5.3.3)
      parser
    scss_lint (0.60.0)
@@ -1063,7 +1057,6 @@ DEPENDENCIES
  net-smtp (~> 0.3.4)
  newrelic-sidekiq-metrics (>= 1.6.2)
  newrelic_rpm
-  octokit
  omniauth (>= 2.1.2)
  omniauth-google-oauth2 (>= 1.1.3)
  omniauth-oauth2
@@ -1,155 +0,0 @@
-class Api::V1::Accounts::Integrations::GithubController < Api::V1::Accounts::BaseController
-  before_action :fetch_hook
-  before_action :ensure_hook_exists, except: [:destroy]
-
-  def destroy
-    @hook.destroy!
-    head :ok
-  end
-
-  def repositories
-    repositories = github_service.repositories
-    filtered_repos = repositories.map do |repo|
-      {
-        full_name: repo[:full_name] || repo.full_name,
-        private: repo[:private] || repo.private
-      }
-    end
-    render json: filtered_repos
-  end
-
-  def search_repositories
-    repositories = github_service.search_repositories(params[:q])
-    filtered_repos = repositories.map do |repo|
-      {
-        full_name: repo[:full_name] || repo.full_name,
-        private: repo[:private] || repo.private
-      }
-    end
-    render json: filtered_repos
-  end
-
-  def assignees
-    assignees = github_service.assignees(repo_full_name)
-    filtered_assignees = assignees.map do |assignee|
-      {
-        login: assignee.login,
-        avatar_url: assignee.avatar_url
-      }
-    end
-    render json: filtered_assignees
-  end
-
-  def labels
-    labels = github_service.labels(repo_full_name)
-    filtered_labels = labels.map do |label|
-      {
-        name: label.name,
-        color: label.color
-      }
-    end
-    render json: filtered_labels
-  end
-
-  def search_issues
-    issues = github_service.search_issues(repo_full_name, params[:q])
-    filtered_issues = issues.map do |issue|
-      {
-        number: issue.number,
-        title: issue.title,
-        html_url: issue.html_url
-      }
-    end
-    render json: filtered_issues
-  end
-
-  def create_issue
-    issue_data = github_service.create_issue(
-      repo_full_name,
-      params[:title],
-      params[:body],
-      issue_options
-    )
-
-    github_issue = create_linked_issue(issue_data)
-    render json: issue_response(github_issue), status: :created
-  end
-
-  def link_issue
-    issue_data = github_service.issue(repo_full_name, params[:issue_number])
-    github_issue = create_linked_issue(issue_data)
-    render json: issue_response(github_issue), status: :created
-  end
-
-  def linked_issues
-    issues = GithubIssue.where(conversation_id: params[:conversation_id])
-
-    render json: issues.map do |issue|
-      {
-        id: issue.id,
-        issue_number: issue.issue_number,
-        title: issue.issue_title,
-        html_url: issue.html_url,
-        repo_full_name: issue.repo_full_name,
-        linked_by: {
-          id: issue.linked_by.id,
-          name: issue.linked_by.name
-        },
-        created_at: issue.created_at
-      }
-    end
-  end
-
-  def unlink_issue
-    github_issue = GithubIssue.find(params[:id])
-    github_issue.destroy!
-    head :ok
-  end
-
-  private
-
-  def fetch_hook
-    @hook = Integrations::Hook.where(account: Current.account).find_by(app_id: 'github')
-  end
-
-  def ensure_hook_exists
-    render json: { error: 'GitHub integration not configured' }, status: :unauthorized unless @hook
-  end
-
-  def github_service
-    @github_service ||= Github::GithubService.new(hook: @hook)
-  end
-
-  def repo_full_name
-    params[:repo_full_name] || "#{params[:owner]}/#{params[:repo]}"
-  end
-
-  def issue_options
-    options = {}
-    options[:assignees] = params[:assignees] if params[:assignees].present?
-    options[:labels] = params[:labels] if params[:labels].present?
-    options
-  end
-
-  def create_linked_issue(issue_data)
-    GithubIssue.create!(
-      conversation_id: params[:conversation_id],
-      account: Current.account,
-      repo_full_name: repo_full_name,
-      issue_number: issue_data.number,
-      issue_title: issue_data.title,
-      html_url: issue_data.html_url,
-      linked_by: Current.user
-    )
-  end
-
-  def issue_response(github_issue)
-    {
-      id: github_issue.id,
-      issue_number: github_issue.issue_number,
-      title: github_issue.issue_title,
-      html_url: github_issue.html_url,
-      repo_full_name: github_issue.repo_full_name
-    }
-  end
-end
@@ -1,160 +0,0 @@
-class Github::CallbacksController < ApplicationController
-  include Github::IntegrationHelper
-
-  def show
-    # Validate account context early for all flows that require it
-    account if params[:code].present?
-
-    if params[:installation_id].present? && params[:code].present?
-      # Both installation and OAuth code present - handle both
-      handle_installation_with_oauth
-    elsif params[:installation_id].present?
-      # Only installation_id present - redirect to OAuth
-      handle_installation
-    else
-      # Only OAuth code present - handle authorization
-      handle_authorization
-    end
-  rescue StandardError => e
-    Rails.logger.error("Github callback error: #{e.message}")
-    redirect_to fallback_redirect_uri
-  end
-
-  private
-
-  def handle_installation_with_oauth
-    # Handle both installation and OAuth in one go
-    installation_id = params[:installation_id]
-
-    @response = oauth_client.auth_code.get_token(
-      params[:code],
-      redirect_uri: "#{base_url}/github/callback"
-    )
-
-    handle_response(installation_id)
-  end
-
-  def handle_installation
-    if params[:setup_action] == 'install'
-      installation_id = params[:installation_id]
-
-      redirect_to build_oauth_url(installation_id)
-    else
-      Rails.logger.error("Unknown setup_action: #{params[:setup_action]}")
-      redirect_to github_integration_settings_url
-    end
-  end
-
-  def handle_authorization
-    @response = oauth_client.auth_code.get_token(
-      params[:code],
-      redirect_uri: "#{base_url}/github/callback"
-    )
-
-    handle_response
-  end
-
-  def build_oauth_url(installation_id)
-    GlobalConfigService.load('GITHUB_CLIENT_ID', nil)
-
-    # Store installation_id in session for later use
-    session[:github_installation_id] = installation_id
-
-    # For now, redirect to a page that will initiate OAuth with proper account context
-    # This is a temporary solution until we have a proper account-agnostic setup
-    "#{ENV.fetch('FRONTEND_URL', nil)}/app/accounts/1/settings/integrations/github?setup_action=install&installation_id=#{installation_id}"
-  end
-
-  def oauth_client
-    app_id = GlobalConfigService.load('GITHUB_CLIENT_ID', nil)
-    app_secret = GlobalConfigService.load('GITHUB_CLIENT_SECRET', nil)
-
-    OAuth2::Client.new(
-      app_id,
-      app_secret,
-      {
-        site: 'https://github.com',
-        token_url: '/login/oauth/access_token',
-        authorize_url: '/login/oauth/authorize'
-      }
-    )
-  end
-
-  def handle_response(installation_id = nil)
-    settings = build_hook_settings(installation_id)
-    hook = create_integration_hook(settings)
-    hook.save!
-
-    cleanup_session_data
-    redirect_to github_redirect_uri
-  rescue StandardError => e
-    Rails.logger.error("Github callback error: #{e.message}")
-    redirect_to fallback_redirect_uri
-  end
-
-  def build_hook_settings(installation_id)
-    settings = {
-      token_type: parsed_body['token_type'],
-      scope: parsed_body['scope']
-    }
-
-    settings[:installation_id] = installation_id || session[:github_installation_id]
-    settings.compact
-  end
-
-  def create_integration_hook(settings)
-    account.hooks.new(
-      access_token: parsed_body['access_token'],
-      status: 'enabled',
-      app_id: 'github',
-      settings: settings
-    )
-  end
-
-  def cleanup_session_data
-    session.delete(:github_installation_id)
-  end
-
-  def account
-    @account ||= account_from_state
-  end
-
-  def account_from_state
-    raise ActionController::BadRequest, 'Missing state variable' if params[:state].blank?
-
-    # Try signed GlobalID first (installation flow)
-    account = GlobalID::Locator.locate_signed(params[:state])
-    return account if account
-
-    # Fallback to JWT token (direct OAuth flow)
-    account_id = verify_github_token(params[:state])
-    return Account.find(account_id) if account_id
-
-    raise 'Invalid or expired state'
-  rescue StandardError
-    raise ActionController::BadRequest, 'Invalid account context'
-  end
-
-  def github_redirect_uri
-    "#{ENV.fetch('FRONTEND_URL', nil)}/app/accounts/#{account.id}/settings/integrations/github"
-  end
-
-  def github_integration_settings_url
-    "#{ENV.fetch('FRONTEND_URL', nil)}/app/accounts/1/settings/integrations/github"
-  end
-
-  def fallback_redirect_uri
-    github_redirect_uri
-  rescue StandardError
-    # Fallback if no account context available
-    "#{ENV.fetch('FRONTEND_URL', nil)}/app/settings/integrations"
-  end
-
-  def parsed_body
-    @parsed_body ||= @response.response.parsed
-  end
-
-  def base_url
-    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
-  end
-end
@@ -42,8 +42,7 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
      'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT],
      'whatsapp_embedded' => %w[WHATSAPP_APP_ID WHATSAPP_APP_SECRET WHATSAPP_CONFIGURATION_ID WHATSAPP_API_VERSION],
      'notion' => %w[NOTION_CLIENT_ID NOTION_CLIENT_SECRET],
-      'google' => %w[GOOGLE_OAUTH_CLIENT_ID GOOGLE_OAUTH_CLIENT_SECRET GOOGLE_OAUTH_REDIRECT_URI],
-      'github' => %w[GITHUB_CLIENT_ID GITHUB_CLIENT_SECRET]
+      'google' => %w[GOOGLE_OAUTH_CLIENT_ID GOOGLE_OAUTH_CLIENT_SECRET GOOGLE_OAUTH_REDIRECT_URI]
    }

    @allowed_configs = mapping.fetch(@config, %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS])
@@ -1,47 +0,0 @@
-module Github::IntegrationHelper
-  # Generates a signed JWT token for Github integration
-  #
-  # @param account_id [Integer] The account ID to encode in the token
-  # @return [String, nil] The encoded JWT token or nil if client secret is missing
-  def generate_github_token(account_id)
-    return if github_client_secret.blank?
-
-    JWT.encode(github_token_payload(account_id), github_client_secret, 'HS256')
-  rescue StandardError => e
-    Rails.logger.error("Failed to generate Github token: #{e.message}")
-    nil
-  end
-
-  def github_token_payload(account_id)
-    {
-      sub: account_id,
-      iat: Time.current.to_i
-    }
-  end
-
-  # Verifies and decodes a Github JWT token
-  #
-  # @param token [String] The JWT token to verify
-  # @return [Integer, nil] The account ID from the token or nil if invalid
-  def verify_github_token(token)
-    return if token.blank? || github_client_secret.blank?
-
-    github_decode_token(token, github_client_secret)
-  end
-
-  private
-
-  def github_client_secret
-    @github_client_secret ||= GlobalConfigService.load('GITHUB_CLIENT_SECRET', nil)
-  end
-
-  def github_decode_token(token, secret)
-    JWT.decode(token, secret, true, {
-                 algorithm: 'HS256',
-                 verify_expiration: true
-               }).first['sub']
-  rescue StandardError => e
-    Rails.logger.error("Unexpected error verifying Github token: #{e.message}")
-    nil
-  end
-end
@@ -9,6 +9,7 @@ import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.v
 import Button from 'dashboard/components-next/button/Button.vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Policy from 'dashboard/components/policy.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';

 const props = defineProps({
  id: {
@@ -59,6 +60,10 @@ const props = defineProps({
    type: Boolean,
    default: true,
  },
+  showActions: {
+    type: Boolean,
+    default: false,
+  },
 });

 const emit = defineEmits(['action', 'navigate', 'select', 'hover']);
@@ -159,73 +164,116 @@ const handleDocumentableClick = () => {
    <span class="text-n-slate-11 text-sm line-clamp-5">
      {{ answer }}
    </span>
-    <div v-if="!compact" class="items-center justify-between hidden lg:flex">
-      <div class="inline-flex items-center">
-        <span
-          class="text-sm shrink-0 truncate text-n-slate-11 inline-flex items-center gap-1"
-        >
-          <i class="i-woot-captain" />
-          {{ assistant?.name || '' }}
-        </span>
-        <div
-          v-if="documentable"
-          class="shrink-0 text-sm text-n-slate-11 inline-flex line-clamp-1 gap-1 ml-3"
-        >
+    <div
+      v-if="!compact"
+      class="flex items-start justify-between flex-col-reverse md:flex-row gap-3"
+    >
+      <Policy v-if="showActions" :permissions="['administrator']">
+        <div class="flex items-center gap-2 sm:gap-5 w-full">
+          <Button
+            v-if="status === 'pending'"
+            :label="$t('CAPTAIN.RESPONSES.OPTIONS.APPROVE')"
+            icon="i-lucide-circle-check-big"
+            sm
+            link
+            class="hover:!no-underline"
+            @click="
+              handleAssistantAction({ action: 'approve', value: 'approve' })
+            "
+          />
+          <Button
+            :label="$t('CAPTAIN.RESPONSES.OPTIONS.EDIT_RESPONSE')"
+            icon="i-lucide-pencil-line"
+            sm
+            slate
+            link
+            class="hover:!no-underline"
+            @click="
+              handleAssistantAction({
+                action: 'edit',
+                value: 'edit',
+              })
+            "
+          />
+          <Button
+            :label="$t('CAPTAIN.RESPONSES.OPTIONS.DELETE_RESPONSE')"
+            icon="i-lucide-trash"
+            sm
+            ruby
+            link
+            class="hover:!no-underline"
+            @click="
+              handleAssistantAction({ action: 'delete', value: 'delete' })
+            "
+          />
+        </div>
+      </Policy>
+      <div
+        class="flex items-center gap-3"
+        :class="{ 'justify-between w-full': !showActions }"
+      >
+        <div class="inline-flex items-center gap-3 min-w-0">
          <span
-            v-if="documentable.type === 'Captain::Document'"
-            class="inline-flex items-center gap-1 truncate over"
+            v-if="status === 'approved'"
+            class="text-sm shrink-0 truncate text-n-slate-11 inline-flex items-center gap-1"
          >
-            <i class="i-ph-files-light text-base" />
-            <span class="max-w-96 truncate" :title="documentable.name">
+            <Icon icon="i-woot-captain" class="size-3.5" />
+            {{ assistant?.name || '' }}
+          </span>
+          <div
+            v-if="documentable"
+            class="text-sm text-n-slate-11 grid grid-cols-[auto_1fr] items-center gap-1 min-w-0"
+          >
+            <Icon
+              v-if="documentable.type === 'Captain::Document'"
+              icon="i-ph-files-light"
+              class="size-3.5"
+            />
+            <Icon
+              v-else-if="documentable.type === 'User'"
+              icon="i-ph-user-circle-plus"
+              class="size-3.5"
+            />
+            <Icon
+              v-else-if="documentable.type === 'Conversation'"
+              icon="i-ph-chat-circle-dots"
+              class="size-3.5"
+            />
+            <span
+              v-if="documentable.type === 'Captain::Document'"
+              class="truncate"
+              :title="documentable.name"
+            >
              {{ documentable.name }}
            </span>
-          </span>
-          <span
-            v-if="documentable.type === 'User'"
-            class="inline-flex items-center gap-1"
-          >
-            <i class="i-ph-user-circle-plus text-base" />
            <span
-              class="max-w-96 truncate"
+              v-else-if="documentable.type === 'User'"
+              class="truncate"
              :title="documentable.available_name"
            >
              {{ documentable.available_name }}
            </span>
-          </span>
-          <span
-            v-else-if="documentable.type === 'Conversation'"
-            class="inline-flex items-center gap-1 group cursor-pointer"
-            role="button"
-            @click="handleDocumentableClick"
-          >
-            <i class="i-ph-chat-circle-dots text-base" />
-            <span class="group-hover:underline">
+            <span
+              v-else-if="documentable.type === 'Conversation'"
+              class="hover:underline truncate cursor-pointer"
+              role="button"
+              @click="handleDocumentableClick"
+            >
              {{
                t(`CAPTAIN.RESPONSES.DOCUMENTABLE.CONVERSATION`, {
                  id: documentable.display_id,
                })
              }}
            </span>
-          </span>
-          <span v-else />
+          </div>
        </div>
        <div
-          v-if="status !== 'approved'"
-          class="shrink-0 text-sm text-n-slate-11 line-clamp-1 inline-flex items-center gap-1 ml-3"
+          class="shrink-0 text-sm text-n-slate-11 line-clamp-1 inline-flex items-center gap-1"
        >
-          <i
-            class="i-ph-stack text-base"
-            :title="t('CAPTAIN.RESPONSES.STATUS.TITLE')"
-          />
-          {{ t(`CAPTAIN.RESPONSES.STATUS.${status.toUpperCase()}`) }}
+          <Icon icon="i-ph-calendar-dot" class="size-3.5" />
+          {{ timestamp }}
        </div>
      </div>
-      <div
-        class="shrink-0 text-sm text-n-slate-11 line-clamp-1 inline-flex items-center gap-1 ml-3"
-      >
-        <i class="i-ph-calendar-dot" />
-        {{ timestamp }}
-      </div>
    </div>
  </CardLayout>
 </template>
@@ -0,0 +1,29 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="text-n-slate-12 max-w-80 flex flex-col gap-2.5">
+    <div class="p-3 bg-n-alpha-2 rounded-xl">
+      <span
+        v-dompurify-html="message.content"
+        class="prose prose-bubble font-medium text-sm"
+      />
+    </div>
+    <div class="flex gap-2">
+      <Button label="Call us" slate class="!text-n-blue-text w-full" />
+      <Button
+        label="Visit our website"
+        slate
+        class="!text-n-blue-text w-full"
+      />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,32 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
+  >
+    <div class="px-3 py-2.5">
+      <img :src="message.image_url" class="max-h-44 rounded-lg w-full" />
+      <div class="pt-2.5 flex flex-col gap-2">
+        <h6 class="font-semibold">{{ message.title }}</h6>
+        <span
+          v-dompurify-html="message.content"
+          class="prose prose-bubble text-sm"
+        />
+      </div>
+    </div>
+    <div class="p-3 flex items-center justify-center">
+      <Button label="Call us to order" link class="hover:!no-underline" />
+    </div>
+    <div class="p-3 flex items-center justify-center">
+      <Button label="Visit our store" link class="hover:!no-underline" />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,25 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
+  >
+    <div class="p-3">
+      <span
+        v-dompurify-html="message.content"
+        class="prose prose-bubble font-medium text-sm"
+      />
+    </div>
+    <div class="p-3 flex items-center justify-center">
+      <Button label="See options" link class="hover:!no-underline" />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,20 @@
+<script setup>
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 text-n-slate-12 rounded-xl flex flex-col gap-2.5 p-3 max-w-80"
+  >
+    <img :src="message.image_url" class="max-h-44 rounded-lg w-full" />
+    <span
+      v-dompurify-html="message.content"
+      class="prose prose-bubble font-medium text-sm"
+    />
+  </div>
+</template>
@@ -0,0 +1,68 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
+  >
+    <div class="p-3">
+      <span
+        v-dompurify-html="message.content"
+        class="prose prose-bubble font-medium text-sm"
+      />
+    </div>
+    <div class="p-3 flex items-center justify-center">
+      <Button label="No, that will be all" link class="hover:!no-underline">
+        <template #icon>
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            class="stroke-n-blue-text"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M.667 6.654 5.315.667v3.326c7.968 0 8.878 6.46 8.656 10.007l-.005-.027c-.334-1.79-.474-4.658-8.65-4.658v3.327z"
+              stroke-width="1.333"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </template>
+      </Button>
+    </div>
+    <div class="p-3 flex items-center justify-center">
+      <Button
+        label="I want to talk to an agents"
+        link
+        class="hover:!no-underline"
+      >
+        <template #icon>
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            class="stroke-n-blue-text"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M.667 6.654 5.315.667v3.326c7.968 0 8.878 6.46 8.656 10.007l-.005-.027c-.334-1.79-.474-4.658-8.65-4.658v3.327z"
+              stroke-width="1.333"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </template>
+      </Button>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="bg-n-alpha-2 text-n-slate-12 rounded-xl p-3 max-w-80">
+    <span v-dompurify-html="message.content" class="prose prose-bubble" />
+  </div>
+</template>
@@ -0,0 +1,21 @@
+<script setup>
+import CallToAction from '../../bubbles/Template/CallToAction.vue';
+
+const message = {
+  content:
+    'We have super cool products going live! Pre-order and customize products. Contact us for more details',
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/CallToAction"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Call To Action">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <CallToAction :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,23 @@
+<script setup>
+import Card from '../../bubbles/Template/Card.vue';
+
+const message = {
+  title: 'Two in one cake (1 pound)',
+  content: 'Customize your order for special occasions',
+  image_url:
+    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop',
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/Card"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Card">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <Card :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,21 @@
+<script setup>
+import ListPicker from '../../bubbles/Template/ListPicker.vue';
+
+const message = {
+  content: `Hey there! Thanks for reaching out to us. Could you let us know
+what you need to help us better assist you? `,
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/ListPicker"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="ListPicker">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <ListPicker :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,23 @@
+<script setup>
+import Media from '../../bubbles/Template/Media.vue';
+
+const message = {
+  content:
+    'Welcome to our Diwali sale! Get flat 50% off on select items. Hurry now!',
+  image_url:
+    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop',
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/Media"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Image Media">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <Media :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,21 @@
+<script setup>
+import QuickReply from '../../bubbles/Template/QuickReply.vue';
+
+const message = {
+  content: `Hey there! Thanks for reaching out to us. Could you let us know
+what you need to help us better assist you?`,
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/QuickReply"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Quick Replies">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <QuickReply :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,20 @@
+<script setup>
+import Text from '../../bubbles/Template/Text.vue';
+
+const message = {
+  content: 'Hello John, how may we assist you?',
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/Text"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Default Text">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <Text :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,33 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-2.5 text-n-slate-12 max-w-80">
+    <div class="p-3 rounded-xl bg-n-alpha-2">
+      <span
+        v-dompurify-html="message.content"
+        class="text-sm font-medium prose prose-bubble"
+      />
+    </div>
+    <div
+      v-if="message.buttons && message.buttons.length > 0"
+      class="flex flex-col gap-2"
+    >
+      <Button
+        v-for="(button, index) in message.buttons"
+        :key="index"
+        :label="button.text || 'Button'"
+        slate
+        class="!text-n-blue-text w-full"
+      />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,77 @@
+<script setup>
+import { computed } from 'vue';
+import FileIcon from 'dashboard/components-next/icon/FileIcon.vue';
+
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+
+// Determine media type based on URL or template data
+const getMediaType = () => {
+  if (props.message.originalTemplate?.header?.format) {
+    return props.message.originalTemplate.header.format.toLowerCase();
+  }
+
+  const url = props.message.image_url;
+  if (!url) return 'document';
+
+  if (url.includes('.pdf') || url.includes('pdf')) return 'document';
+  if (url.includes('.mp4') || url.includes('.mov') || url.includes('video'))
+    return 'video';
+  return 'image';
+};
+
+const mediaType = getMediaType();
+
+// Get file type from URL for proper icon
+const fileType = computed(() => {
+  const url = props.message.image_url;
+  if (!url) return 'pdf';
+
+  if (url.includes('.pdf') || url.includes('pdf')) return 'pdf';
+  if (url.includes('.doc')) return 'doc';
+  return 'pdf'; // Default to PDF for documents
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2.5 p-3 rounded-xl bg-n-alpha-2 text-n-slate-12 max-w-80"
+  >
+    <!-- Image Media -->
+    <img
+      v-if="mediaType === 'image'"
+      :src="message.image_url"
+      class="object-cover w-full max-h-44 rounded-lg"
+      alt="Template media"
+    />
+
+    <!-- Video Media -->
+    <div
+      v-else-if="mediaType === 'video'"
+      class="overflow-hidden relative bg-gray-100 rounded-lg"
+    >
+      <video
+        :src="message.image_url"
+        class="object-cover w-full max-h-44"
+        controls
+        preload="metadata"
+      />
+    </div>
+
+    <!-- Document Media -->
+    <div v-else-if="mediaType === 'document'" class="flex items-center">
+      <FileIcon :file-type="fileType" class="text-2xl text-n-slate-12" />
+    </div>
+
+    <!-- Content Text -->
+    <span
+      v-if="message.content"
+      v-dompurify-html="message.content"
+      class="text-sm font-medium prose prose-bubble"
+    />
+  </div>
+</template>
@@ -0,0 +1,52 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
+  >
+    <div class="p-3">
+      <span
+        v-dompurify-html="message.content"
+        class="prose prose-bubble font-medium text-sm"
+      />
+    </div>
+    <div
+      v-for="(action, index) in message.actions"
+      :key="index"
+      class="p-3 flex items-center justify-center"
+    >
+      <Button
+        :label="action.title || action.text || 'Button'"
+        link
+        class="hover:!no-underline"
+      >
+        <template #icon>
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            class="stroke-n-blue-text"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M.667 6.654 5.315.667v3.326c7.968 0 8.878 6.46 8.656 10.007l-.005-.027c-.334-1.79-.474-4.658-8.65-4.658v3.327z"
+              stroke-width="1.333"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </template>
+      </Button>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,322 @@
+<script setup>
+import TemplatePreview from './TemplatePreview.vue';
+
+// Sample template data from the JSON files
+const whatsAppTemplates = {
+  greet: {
+    id: '997298832221901',
+    name: 'greet',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        text: 'Hey {{customer_name}} how may I help you?',
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'John',
+              param_name: 'customer_name',
+            },
+          ],
+        },
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+
+  eventInvitation: {
+    id: '1381151706284063',
+    name: 'event_invitation_static',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        text: "You're invited to {{event_name}} at {{location}}, Join us for an amazing experience!",
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'F1',
+              param_name: 'event_name',
+            },
+            {
+              example: 'Dubai',
+              param_name: 'location',
+            },
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            url: 'https://events.example.com/register',
+            text: 'Visit website',
+            type: 'URL',
+          },
+          {
+            url: 'https://maps.app.goo.gl/YoWAzRj1GDuxs6qz8',
+            text: 'Get Directions',
+            type: 'URL',
+          },
+        ],
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+
+  orderConfirmation: {
+    id: '1106685194739985',
+    name: 'order_confirmation',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'IMAGE',
+        example: {
+          header_handle: [
+            'https://scontent.whatsapp.net/v/t61.29466-34/518466505_1106685198073318_3569250580697484416_n.jpg',
+          ],
+        },
+      },
+      {
+        text: 'Hi your order {{1}} is confirmed. Please wait for further updates',
+        type: 'BODY',
+        example: {
+          body_text: [['blue canvas shoes']],
+        },
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'POSITIONAL',
+  },
+
+  discountCoupon: {
+    id: '1469258364071127',
+    name: 'discount_coupon',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        text: '🎉 Special offer for you! Get {{discount_percentage}}% off your next purchase. Use the code below at checkout',
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: '30',
+              param_name: 'discount_percentage',
+            },
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            text: 'Copy offer code',
+            type: 'COPY_CODE',
+            example: ['SAVE30OFF'],
+          },
+        ],
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+
+  trainingVideo: {
+    id: '1023596726651144',
+    name: 'training_video',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'VIDEO',
+        example: {
+          header_handle: [
+            'https://scontent.whatsapp.net/v/t61.29466-34/521582686_1023596729984477_1872358575355618432_n.mp4',
+          ],
+        },
+      },
+      {
+        text: "Hi {{name}}, here's your training video. Please watch by {{date}}.",
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'john',
+              param_name: 'name',
+            },
+            {
+              example: 'July 31',
+              param_name: 'date',
+            },
+          ],
+        },
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+};
+
+const twilioTemplates = {
+  greet: {
+    body: 'Hey {{1}}, how may I help you?',
+    types: {
+      'twilio/text': {
+        body: 'Hey {{1}}, how may I help you?',
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {
+      1: 'John',
+    },
+    content_sid: 'HXee240fd3a8b5045dba057feda5173e55',
+    friendly_name: 'greet',
+    template_type: 'text',
+  },
+
+  shoeLaunch: {
+    body: '👟 Introducing our latest release — the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
+    types: {
+      'twilio/media': {
+        body: '👟 Introducing our latest release — the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
+        media: ['https://vite-five-phi.vercel.app/jordan-shoes.jpg'],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {
+      1: 'Jordan',
+      2: '100$',
+    },
+    content_sid: 'HX4b1ff075f097ccdf7f274b6af4d7be02',
+    friendly_name: 'shoe_launch',
+    template_type: 'media',
+  },
+
+  welcomeMessage: {
+    body: 'Thanks for reaching out to us. Before we proceed, we would like to get some information from you to assist you better. To whom would you like to connect?',
+    types: {
+      'twilio/quick-reply': {
+        body: 'Thanks for reaching out to us. Before we proceed, we would like to get some information from you to assist you better. To whom would you like to connect?',
+        actions: [
+          {
+            id: 'Sales_payload',
+            title: 'Sales',
+          },
+          {
+            id: 'Support_payload',
+            title: 'Support',
+          },
+        ],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en_US',
+    variables: {},
+    content_sid: 'HX778677f5867f96175ab4b7efb9a5bee6',
+    friendly_name: 'welcome_message_new',
+    template_type: 'quick_reply',
+  },
+};
+</script>
+
+<template>
+  <Story
+    title="Components/TemplatePreview"
+    :layout="{ type: 'grid', width: 400 }"
+  >
+    <!-- WhatsApp Text Templates -->
+    <Variant title="WhatsApp - Simple Text">
+      <TemplatePreview
+        :template="whatsAppTemplates.greet"
+        :variables="{ customer_name: 'John' }"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WhatsApp - Simple Text (No Variables)">
+      <TemplatePreview
+        :template="whatsAppTemplates.greet"
+        :variables="{}"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <!-- WhatsApp Button Templates -->
+    <Variant title="WhatsApp - Call to Action Buttons">
+      <TemplatePreview
+        :template="whatsAppTemplates.eventInvitation"
+        :variables="{ event_name: 'F1 Grand Prix', location: 'Dubai' }"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <!-- WhatsApp Media Templates -->
+    <Variant title="WhatsApp - Image Media">
+      <TemplatePreview
+        :template="whatsAppTemplates.orderConfirmation"
+        :variables="{ '1': 'Blue Canvas Shoes' }"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WhatsApp - Video Media">
+      <TemplatePreview
+        :template="whatsAppTemplates.trainingVideo"
+        :variables="{ name: 'John', date: 'July 31st' }"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <!-- WhatsApp Copy Code Templates -->
+    <Variant title="WhatsApp - Copy Code">
+      <TemplatePreview
+        :template="whatsAppTemplates.discountCoupon"
+        :variables="{ discount_percentage: '30' }"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <!-- Twilio Templates -->
+    <Variant title="Twilio - Text">
+      <TemplatePreview
+        :template="twilioTemplates.greet"
+        :variables="{ '1': 'John' }"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio - Media">
+      <TemplatePreview
+        :template="twilioTemplates.shoeLaunch"
+        :variables="{ '1': 'Air Jordan', '2': '$150' }"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio - Quick Reply">
+      <TemplatePreview
+        :template="twilioTemplates.welcomeMessage"
+        :variables="{}"
+        platform="twilio"
+      />
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,120 @@
+<script setup>
+import { computed } from 'vue';
+import { TemplateNormalizer } from 'dashboard/services/TemplateNormalizer';
+
+import TextTemplate from 'dashboard/components-next/message/bubbles/Template/Text.vue';
+import CardTemplate from 'dashboard/components-next/message/bubbles/Template/Card.vue';
+import DynamicCallToActionTemplate from './DynamicCallToActionTemplate.vue';
+import DynamicMediaTemplate from './DynamicMediaTemplate.vue';
+import WhatsAppTextTemplate from './WhatsAppTextTemplate.vue';
+import DynamicQuickReplyTemplate from './DynamicQuickReplyTemplate.vue';
+
+const props = defineProps({
+  template: {
+    type: Object,
+    required: true,
+  },
+  variables: {
+    type: Object,
+    default: () => ({}),
+  },
+  platform: {
+    type: String,
+    required: true,
+    validator: value => ['whatsapp', 'twilio'].includes(value),
+  },
+});
+
+// Normalize template data and apply variables
+const processedTemplate = computed(() => {
+  const normalized =
+    props.platform === 'whatsapp'
+      ? TemplateNormalizer.normalizeWhatsApp(props.template)
+      : TemplateNormalizer.normalizeTwilio(props.template);
+
+  // Apply variable substitution to content
+  const processText = text => {
+    if (!text) return '';
+    return text.replace(/\{\{([^}]+)\}\}/g, (match, variable) => {
+      const value = props.variables[variable];
+      return value !== undefined && value !== '' ? value : `[${variable}]`;
+    });
+  };
+
+  // Extract content based on platform
+  let content = '';
+  let imageUrl = '';
+  let title = '';
+  let footer = '';
+
+  if (props.platform === 'whatsapp') {
+    // WhatsApp: get text from body component
+    content = normalized.body?.text || '';
+
+    // Get header content for media templates
+    if (normalized.header) {
+      if (
+        normalized.header.format === 'IMAGE' ||
+        normalized.header.format === 'VIDEO' ||
+        normalized.header.format === 'DOCUMENT'
+      ) {
+        imageUrl = normalized.header.example?.header_handle?.[0] || '';
+      }
+      if (normalized.header.format === 'TEXT') {
+        title = normalized.header.text || '';
+      }
+    }
+
+    // Get footer content
+    footer = normalized.footer?.text || '';
+  } else {
+    // Twilio: get body directly
+    content = normalized.body || '';
+
+    // Get media URL if available
+    if (normalized.media && normalized.media.length > 0) {
+      imageUrl = normalized.media[0];
+    }
+  }
+
+  return {
+    ...normalized,
+    content: processText(content),
+    title: processText(title),
+    footer: processText(footer),
+    image_url: imageUrl,
+    buttons: normalized.buttons || [],
+    actions: normalized.actions || [],
+  };
+});
+
+// Component selection based on template type
+const previewComponent = computed(() => {
+  const type = processedTemplate.value.type;
+
+  const componentMap = {
+    // WhatsApp components
+    'whatsapp-text': WhatsAppTextTemplate,
+    'whatsapp-text-header': WhatsAppTextTemplate,
+    'whatsapp-media-image': DynamicMediaTemplate,
+    'whatsapp-media-video': DynamicMediaTemplate,
+    'whatsapp-media-document': DynamicMediaTemplate,
+    'whatsapp-interactive': DynamicCallToActionTemplate,
+    'whatsapp-copy-code': DynamicCallToActionTemplate,
+
+    // Twilio components
+    'twilio-text': TextTemplate,
+    'twilio-media': DynamicMediaTemplate,
+    'twilio-quick-reply': DynamicQuickReplyTemplate,
+    'twilio-card': CardTemplate,
+  };
+
+  return componentMap[type] || TextTemplate;
+});
+</script>
+
+<template>
+  <div class="template-preview">
+    <component :is="previewComponent" :message="processedTemplate" />
+  </div>
+</template>
@@ -0,0 +1,193 @@
+<script setup>
+import TemplatePreview from './TemplatePreview.vue';
+import {
+  whatsAppTemplates,
+  getWhatsAppVariables,
+} from './templates/whatsapp-templates.js';
+import { twilioTemplates } from './templates/twillio-templates.js';
+</script>
+
+<template>
+  <Story
+    title="Components/TemplatePreviewExamples"
+    :layout="{ type: 'grid', width: 400 }"
+  >
+    <!-- WhatsApp Templates -->
+    <Variant title="WA: Event Invitation (Buttons)">
+      <TemplatePreview
+        :template="whatsAppTemplates[0]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[0])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Purchase Receipt (Document)">
+      <TemplatePreview
+        :template="whatsAppTemplates[1]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[1])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Discount Coupon (Copy Code)">
+      <TemplatePreview
+        :template="whatsAppTemplates[2]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[2])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Support Callback (Phone)">
+      <TemplatePreview
+        :template="whatsAppTemplates[3]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[3])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Training Video (Video)">
+      <TemplatePreview
+        :template="whatsAppTemplates[4]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[4])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Order Confirmation (Image)">
+      <TemplatePreview
+        :template="whatsAppTemplates[5]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[5])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Product Launch (Image + Footer)">
+      <TemplatePreview
+        :template="whatsAppTemplates[6]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[6])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Technician Visit (Header + Buttons)">
+      <TemplatePreview
+        :template="whatsAppTemplates[7]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[7])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Greet (Simple Text)">
+      <TemplatePreview
+        :template="whatsAppTemplates[8]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[8])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Hello World (Header + Footer)">
+      <TemplatePreview
+        :template="whatsAppTemplates[9]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[9])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Feedback Request (Button)">
+      <TemplatePreview
+        :template="whatsAppTemplates[10]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[10])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Address Update (Header)">
+      <TemplatePreview
+        :template="whatsAppTemplates[11]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[11])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Delivery Confirmation">
+      <TemplatePreview
+        :template="whatsAppTemplates[12]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[12])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <!-- Twilio Templates -->
+    <Variant title="Twilio: Shoe Launch (Media)">
+      <TemplatePreview
+        :template="twilioTemplates[0]"
+        :variables="twilioTemplates[0].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Product Launch Custom Price (Media)">
+      <TemplatePreview
+        :template="twilioTemplates[1]"
+        :variables="twilioTemplates[1].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Product Launch (Media)">
+      <TemplatePreview
+        :template="twilioTemplates[2]"
+        :variables="twilioTemplates[2].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Greet (Text)">
+      <TemplatePreview
+        :template="twilioTemplates[3]"
+        :variables="twilioTemplates[3].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Order Status (Text)">
+      <TemplatePreview
+        :template="twilioTemplates[4]"
+        :variables="twilioTemplates[4].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Hello World (Text)">
+      <TemplatePreview
+        :template="twilioTemplates[5]"
+        :variables="twilioTemplates[5].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Welcome Message New (Quick Reply)">
+      <TemplatePreview
+        :template="twilioTemplates[6]"
+        :variables="twilioTemplates[6].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: SaaS WhatsApp Question (Quick Reply)">
+      <TemplatePreview
+        :template="twilioTemplates[7]"
+        :variables="twilioTemplates[7].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Welcome Message (Quick Reply)">
+      <TemplatePreview
+        :template="twilioTemplates[8]"
+        :variables="twilioTemplates[8].variables"
+        platform="twilio"
+      />
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,29 @@
+<script setup>
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 text-n-slate-12 rounded-xl p-3 max-w-80 flex flex-col gap-2"
+  >
+    <!-- Header Text -->
+    <div v-if="message.title" class="font-bold text-base">
+      {{ message.title }}
+    </div>
+
+    <!-- Body Content -->
+    <div v-if="message.content" class="prose prose-bubble font-medium text-sm">
+      <span v-dompurify-html="message.content" />
+    </div>
+
+    <!-- Footer Text -->
+    <div v-if="message.footer" class="text-xs text-n-slate-11 opacity-70">
+      {{ message.footer }}
+    </div>
+  </div>
+</template>
@@ -0,0 +1,6 @@
+// Main Template Preview Component
+export { default as TemplatePreview } from './TemplatePreview.vue';
+
+// Core Services
+export { TemplateTypeDetector } from 'dashboard/services/TemplateTypeDetector';
+export { TemplateNormalizer } from 'dashboard/services/TemplateNormalizer';
@@ -0,0 +1,185 @@
+export const twilioTemplates = [
+  {
+    body: '=_ Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
+    types: {
+      'twilio/media': {
+        body: '=_ Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
+        media: ['https://vite-five-phi.vercel.app/jordan-shoes.jpg'],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {
+      1: 'Jordan',
+      2: '100$',
+    },
+    content_sid: 'HX4b1ff075f097ccdf7f274b6af4d7be02',
+    friendly_name: 'shoe_launch',
+    template_type: 'media',
+  },
+  {
+    body: '=_ Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
+    types: {
+      'twilio/media': {
+        body: '=_ Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
+        media: ['https://vite-five-phi.vercel.app/jordan-shoes.jpg'],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {
+      1: 'Jordan',
+      2: '400$',
+    },
+    content_sid: 'HXd5c1f8f8d68976f841c440d5e4b46c2e',
+    friendly_name: 'product_launch_custom_price',
+    template_type: 'media',
+  },
+  {
+    body: '=_ Introducing our latest release  the Nike Air Force! Available now for just $129.99',
+    types: {
+      'twilio/media': {
+        body: '=_ Introducing our latest release  the Nike Air Force! Available now for just $129.99',
+        media: ['https://vite-five-phi.vercel.app/jordan-shoes.jpg'],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {},
+    content_sid: 'HX25f6e823f2416ca4b34254d98e916fae',
+    friendly_name: 'product_launch',
+    template_type: 'media',
+  },
+  {
+    body: 'Hey {{1}}, how may I help you?',
+    types: {
+      'twilio/text': {
+        body: 'Hey {{1}}, how may I help you?',
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {
+      1: 'John',
+    },
+    content_sid: 'HXee240fd3a8b5045dba057feda5173e55',
+    friendly_name: 'greet',
+    template_type: 'text',
+  },
+  {
+    body: "Hi {{1}} Thanks for placing an order with us. We'll let you know once your order has been processed and delivered. Your order number is {{3}}. Thanks",
+    types: {
+      'twilio/text': {
+        body: "Hi {{1}} Thanks for placing an order with us. We'll let you know once your order has been processed and delivered. Your order number is {{3}}. Thanks",
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {
+      1: 'John',
+      3: '12345',
+    },
+    content_sid: 'HX88291ef8d30d7dcd436cbb9b21c236f4',
+    friendly_name: 'order_status',
+    template_type: 'text',
+  },
+  {
+    body: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
+    types: {
+      'twilio/text': {
+        body: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {},
+    content_sid: 'HXdc6da32d489ee80f67c07d5bb0e7e390',
+    friendly_name: 'hello_world',
+    template_type: 'text',
+  },
+  {
+    body: 'Thanks for reaching out to us. Before we proceed, we would like to get some information from you to assist you better. To whom would you like to connect?',
+    types: {
+      'twilio/quick-reply': {
+        body: 'Thanks for reaching out to us. Before we proceed, we would like to get some information from you to assist you better. To whom would you like to connect?',
+        actions: [
+          {
+            id: 'Sales_payload',
+            title: 'Sales',
+          },
+          {
+            id: 'Support_payload',
+            title: 'Support',
+          },
+        ],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en_US',
+    variables: {},
+    content_sid: 'HX778677f5867f96175ab4b7efb9a5bee6',
+    friendly_name: 'welcome_message_new',
+    template_type: 'quick_reply',
+  },
+  {
+    body: 'What type of Chatwoot installation are you using? Select "Chatwoot Cloud" if you are using app.chatwoot.com, otherwise select "Self-hosted Chatwoot".',
+    types: {
+      'twilio/quick-reply': {
+        body: 'What type of Chatwoot installation are you using? Select "Chatwoot Cloud" if you are using app.chatwoot.com, otherwise select "Self-hosted Chatwoot".',
+        actions: [
+          {
+            id: 'Chatwoot Cloud_payload',
+            title: 'Chatwoot Cloud',
+          },
+          {
+            id: 'Self-hosted Chatwoot_payload',
+            title: 'Self-hosted Chatwoot',
+          },
+        ],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en_US',
+    variables: {},
+    content_sid: 'HX3a35e5cd76529fd91d19341deb4ef685',
+    friendly_name: 'saas_whatsapp_question',
+    template_type: 'quick_reply',
+  },
+  {
+    body: 'Thanks for reaching out to us. Happy to help. What are you looking for?',
+    types: {
+      'twilio/quick-reply': {
+        body: 'Thanks for reaching out to us. Happy to help. What are you looking for?',
+        actions: [
+          {
+            id: 'Support_payload',
+            title: 'Support',
+          },
+          {
+            id: 'Sales_payload',
+            title: 'Sales',
+          },
+          {
+            id: 'Demo_payload',
+            title: 'Demo',
+          },
+        ],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en_US',
+    variables: {},
+    content_sid: 'HX5d8e09f96cee2f7fb7bab223c03cb0a1',
+    friendly_name: 'welcome_message',
+    template_type: 'quick_reply',
+  },
+];
@@ -0,0 +1,408 @@
+export const whatsAppTemplates = [
+  {
+    id: '1381151706284063',
+    name: 'event_invitation_static',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        text: "You're invited to {{event_name}} at {{location}}, Join us for an amazing experience!",
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'F1',
+              param_name: 'event_name',
+            },
+            {
+              example: 'Dubai',
+              param_name: 'location',
+            },
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            url: 'https://events.example.com/register',
+            text: 'Visit website',
+            type: 'URL',
+          },
+          {
+            url: 'https://maps.app.goo.gl/YoWAzRj1GDuxs6qz8',
+            text: 'Get Directions',
+            type: 'URL',
+          },
+        ],
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '767076159336759',
+    name: 'purchase_receipt',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en_US',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'DOCUMENT',
+        example: {
+          header_handle: [
+            'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+          ],
+        },
+      },
+      {
+        text: 'Thank you for using your {{1}} card at {{2}}. Your {{3}} is attached as a PDF.',
+        type: 'BODY',
+        example: {
+          body_text: [['credit', 'CS Mutual', 'receipt']],
+        },
+      },
+    ],
+    parameter_format: 'POSITIONAL',
+  },
+  {
+    id: '1469258364071127',
+    name: 'discount_coupon',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        text: '<� Special offer for you! Get {{discount_percentage}}% off your next purchase. Use the code below at checkout',
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: '30',
+              param_name: 'discount_percentage',
+            },
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            text: 'Copy offer code',
+            type: 'COPY_CODE',
+            example: ['SAVE1OFF'],
+          },
+        ],
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '1075221534579807',
+    name: 'support_callback',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en',
+    components: [
+      {
+        text: 'Hello {{name}},  our support team will call you regarding ticket # {{ticket_id}}.',
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'muhsin',
+              param_name: 'name',
+            },
+            {
+              example: '232323',
+              param_name: 'ticket_id',
+            },
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            text: 'Call Support',
+            type: 'PHONE_NUMBER',
+            phone_number: '+16506677566',
+          },
+        ],
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '1023596726651144',
+    name: 'training_video',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'VIDEO',
+        example: {
+          header_handle: [
+            'https://scontent.whatsapp.net/v/t61.29466-34/521582686_1023596729984477_1872358575355618432_n.mp4',
+          ],
+        },
+      },
+      {
+        text: "Hi {{name}}, here's your training video. Please watch by{{date}}.",
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'john',
+              param_name: 'name',
+            },
+            {
+              example: 'July 31',
+              param_name: 'date',
+            },
+          ],
+        },
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '1106685194739985',
+    name: 'order_confirmation',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'IMAGE',
+        example: {
+          header_handle: ['https://vite-five-phi.vercel.app/vaporfly.png'],
+        },
+      },
+      {
+        text: 'Hi your order {{1}} is confirmed. Please wait for further updates',
+        type: 'BODY',
+        example: {
+          body_text: [['blue canvas shoes']],
+        },
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'POSITIONAL',
+  },
+  {
+    id: '1242180011253003',
+    name: 'product_launch',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'IMAGE',
+        example: {
+          header_handle: ['https://vite-five-phi.vercel.app/coat.png'],
+        },
+      },
+      {
+        text: 'New arrival! Our stunning coat now available in {{color}} color.',
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'blue',
+              param_name: 'color',
+            },
+          ],
+        },
+      },
+      {
+        text: 'Free shipping on orders over $100. Limited time offer.',
+        type: 'FOOTER',
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '1449876326175680',
+    name: 'technician_visit',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en_US',
+    components: [
+      {
+        text: 'Technician visit',
+        type: 'HEADER',
+        format: 'TEXT',
+      },
+      {
+        text: "Hi {{1}}, we're scheduling a technician visit to {{2}} on {{3}} between {{4}} and {{5}}. Please confirm if this time slot works for you.",
+        type: 'BODY',
+        example: {
+          body_text: [
+            ['John', '123 Maple St', '2025-12-31', '10:00 AM', '2:00 PM'],
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            text: 'Confirm',
+            type: 'QUICK_REPLY',
+          },
+          {
+            text: 'Reschedule',
+            type: 'QUICK_REPLY',
+          },
+        ],
+      },
+    ],
+    parameter_format: 'POSITIONAL',
+  },
+  {
+    id: '997298832221901',
+    name: 'greet',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        text: 'Hey {{customer_name}} how may I help you?',
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'John',
+              param_name: 'customer_name',
+            },
+          ],
+        },
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '632315222954611',
+    name: 'hello_world',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en_US',
+    components: [
+      {
+        text: 'Hello World',
+        type: 'HEADER',
+        format: 'TEXT',
+      },
+      {
+        text: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
+        type: 'BODY',
+      },
+      {
+        text: 'WhatsApp Business Platform sample message',
+        type: 'FOOTER',
+      },
+    ],
+    parameter_format: 'POSITIONAL',
+  },
+  {
+    id: '787864066907971',
+    name: 'feedback_request',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        text: "Hey {{name}}, how was your experience with Puma? We'd love your feedback!",
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'muhsin',
+              param_name: 'name',
+            },
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            url: 'https://feedback.example.com/survey',
+            text: 'Leave Feedback',
+            type: 'URL',
+          },
+        ],
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '1938057163677205',
+    name: 'address_update',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en_US',
+    components: [
+      {
+        text: 'Address update',
+        type: 'HEADER',
+        format: 'TEXT',
+      },
+      {
+        text: 'Hi {{1}}, your delivery address has been successfully updated to {{2}}. Contact {{3}} for any inquiries.',
+        type: 'BODY',
+        example: {
+          body_text: [['John', '123 Main St', 'support@telco.com']],
+        },
+      },
+    ],
+    parameter_format: 'POSITIONAL',
+  },
+  {
+    id: '1644094842949394',
+    name: 'delivery_confirmation',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en_US',
+    components: [
+      {
+        text: '{{1}}, your order was successfully delivered on {{2}}.\\n\\nThank you for your purchase.\\n',
+        type: 'BODY',
+        example: {
+          body_text: [['John', 'Jan 1, 2024']],
+        },
+      },
+    ],
+    parameter_format: 'POSITIONAL',
+  },
+];
+
+// Helper function to get variable values from examples
+export const getWhatsAppVariables = template => {
+  const variables = {};
+  template.components?.forEach(component => {
+    if (component.example?.body_text_named_params) {
+      component.example.body_text_named_params.forEach(param => {
+        variables[param.param_name] = param.example;
+      });
+    }
+    if (component.example?.body_text) {
+      component.example.body_text[0]?.forEach((value, index) => {
+        variables[(index + 1).toString()] = value;
+      });
+    }
+  });
+  return variables;
+};
@@ -15,20 +15,6 @@
      },
      "ERROR": "There was an error connecting to Shopify. Please try again or contact support if the issue persists."
    },
-    "GITHUB": {
-      "TITLE": "Connect Github",
-      "LABEL": "Github Client ID",
-      "PLACEHOLDER": "Enter your Github Client ID",
-      "HELP": "Enter your Github Client ID",
-      "CANCEL": "Cancel",
-      "SUBMIT": "Connect",
-      "DELETE": {
-        "TITLE": "Are you sure you want to delete the integration?",
-        "MESSAGE": "Are you sure you want to delete the integration?",
-        "CONFIRM": "Yes, delete",
-        "CANCEL": "Cancel"
-      }
-    },
    "HEADER": "Integrations",
    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
    "LEARN_MORE": "Learn more about integrations",
@@ -352,7 +338,6 @@
      }
    }
  },
-
  "CAPTAIN": {
    "NAME": "Captain",
    "HEADER_KNOW_MORE": "Know more",
@@ -876,6 +861,7 @@
    },
    "RESPONSES": {
      "HEADER": "FAQs",
+      "PENDING_FAQS": "Pending FAQs",
      "ADD_NEW": "Create new FAQ",
      "DOCUMENTABLE": {
        "CONVERSATION": "Conversation #{id}"
@@ -915,6 +901,10 @@
        "APPROVED": "Approved",
        "ALL": "All"
      },
+      "PENDING_BANNER": {
+        "TITLE": "Captain has found some FAQs your customers were looking for.",
+        "ACTION": "Click here to review"
+      },
      "FORM_DESCRIPTION": "Add a question and its corresponding answer to the knowledge base and select the assistant it should be associated with.",
      "CREATE": {
        "TITLE": "Add an FAQ",
@@ -946,9 +936,9 @@
        "APPROVE_SUCCESS_MESSAGE": "The FAQ was marked as approved"
      },
      "OPTIONS": {
-        "APPROVE": "Mark as approved",
-        "EDIT_RESPONSE": "Edit FAQ",
-        "DELETE_RESPONSE": "Delete FAQ"
+        "APPROVE": "Approve",
+        "EDIT_RESPONSE": "Edit",
+        "DELETE_RESPONSE": "Delete"
      },
      "EMPTY_STATE": {
        "TITLE": "No FAQs Found",
@@ -10,6 +10,7 @@ import AssistantGuidelinesIndex from './assistants/guidelines/Index.vue';
 import AssistantScenariosIndex from './assistants/scenarios/Index.vue';
 import DocumentsIndex from './documents/Index.vue';
 import ResponsesIndex from './responses/Index.vue';
+import ResponsesPendingIndex from './responses/Pending.vue';
 import CustomToolsIndex from './tools/Index.vue';

 export const routes = [
@@ -125,6 +126,19 @@ export const routes = [
      ],
    },
  },
+  {
+    path: frontendURL('accounts/:accountId/captain/responses/pending'),
+    component: ResponsesPendingIndex,
+    name: 'captain_responses_pending',
+    meta: {
+      permissions: ['administrator', 'agent'],
+      featureFlag: FEATURE_FLAGS.CAPTAIN,
+      installationTypes: [
+        INSTALLATION_TYPES.CLOUD,
+        INSTALLATION_TYPES.ENTERPRISE,
+      ],
+    },
+  },
  {
    path: frontendURL('accounts/:accountId/captain/tools'),
    component: CustomToolsIndex,
@@ -1,17 +1,15 @@
 <script setup>
 import { computed, onMounted, ref, nextTick } from 'vue';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
-import { OnClickOutside } from '@vueuse/components';
 import { useRouter } from 'vue-router';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { debounce } from '@chatwoot/utils';
 import { useAccount } from 'dashboard/composables/useAccount';

+import Banner from 'dashboard/components-next/banner/Banner.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
 import DeleteDialog from 'dashboard/components-next/captain/pageComponents/DeleteDialog.vue';
 import BulkDeleteDialog from 'dashboard/components-next/captain/pageComponents/BulkDeleteDialog.vue';
@@ -37,7 +35,6 @@ const selectedResponse = ref(null);
 const deleteDialog = ref(null);
 const bulkDeleteDialog = ref(null);

-const selectedStatus = ref('all');
 const selectedAssistant = ref('all');
 const dialogType = ref('');
 const searchQuery = ref('');
@@ -45,54 +42,17 @@ const { t } = useI18n();

 const createDialog = ref(null);

-const isStatusFilterOpen = ref(false);
 const shouldShowDropdown = computed(() => {
  if (assistants.value.length === 0) return false;

  return !isFetching.value;
 });

-const statusOptions = computed(() =>
-  ['all', 'pending', 'approved'].map(key => ({
-    label: t(`CAPTAIN.RESPONSES.STATUS.${key.toUpperCase()}`),
-    value: key,
-    action: 'filter',
-  }))
-);
-
-const filteredResponses = computed(() => {
-  return selectedStatus.value === 'pending'
-    ? responses.value.filter(r => r.status === 'pending')
-    : responses.value;
-});
-
-const selectedStatusLabel = computed(() => {
-  const status = statusOptions.value.find(
-    option => option.value === selectedStatus.value
-  );
-  return t('CAPTAIN.RESPONSES.FILTER.STATUS', {
-    selected: status ? status.label : '',
-  });
-});
+const pendingCount = useMapGetter('captainResponses/getPendingCount');

 const handleDelete = () => {
  deleteDialog.value.dialogRef.open();
 };
-const handleAccept = async () => {
-  try {
-    await store.dispatch('captainResponses/update', {
-      id: selectedResponse.value.id,
-      status: 'approved',
-    });
-    useAlert(t(`CAPTAIN.RESPONSES.EDIT.APPROVE_SUCCESS_MESSAGE`));
-  } catch (error) {
-    const errorMessage =
-      error?.message || t(`CAPTAIN.RESPONSES.EDIT.ERROR_MESSAGE`);
-    useAlert(errorMessage);
-  } finally {
-    selectedResponse.value = null;
-  }
-};

 const handleCreate = () => {
  dialogType.value = 'create';
@@ -105,9 +65,7 @@ const handleEdit = () => {
 };

 const handleAction = ({ action, id }) => {
-  selectedResponse.value = filteredResponses.value.find(
-    response => id === response.id
-  );
+  selectedResponse.value = responses.value.find(response => id === response.id);
  nextTick(() => {
    if (action === 'delete') {
      handleDelete();
@@ -115,9 +73,6 @@ const handleAction = ({ action, id }) => {
    if (action === 'edit') {
      handleEdit();
    }
-    if (action === 'approve') {
-      handleAccept();
-    }
  });
 };

@@ -136,10 +91,8 @@ const handleCreateClose = () => {
 };

 const fetchResponses = (page = 1) => {
-  const filterParams = { page };
-  if (selectedStatus.value !== 'all') {
-    filterParams.status = selectedStatus.value;
-  }
+  const filterParams = { page, status: 'approved' };
+
  if (selectedAssistant.value !== 'all') {
    filterParams.assistantId = selectedAssistant.value;
  }
@@ -155,7 +108,7 @@ const hoveredCard = ref(null);

 const bulkSelectionState = computed(() => {
  const selectedCount = bulkSelectedIds.value.size;
-  const totalCount = filteredResponses.value?.length || 0;
+  const totalCount = responses.value?.length || 0;

  return {
    hasSelected: selectedCount > 0,
@@ -168,13 +121,13 @@ const bulkCheckbox = computed({
  get: () => bulkSelectionState.value.allSelected,
  set: value => {
    bulkSelectedIds.value = value
-      ? new Set(filteredResponses.value.map(r => r.id))
+      ? new Set(responses.value.map(r => r.id))
      : new Set();
  },
 });

 const buildSelectedCountLabel = computed(() => {
-  const count = filteredResponses.value?.length || 0;
+  const count = responses.value?.length || 0;
  return bulkSelectionState.value.allSelected
    ? t('CAPTAIN.RESPONSES.UNSELECT_ALL', { count })
    : t('CAPTAIN.RESPONSES.SELECT_ALL', { count });
@@ -191,7 +144,7 @@ const handleCardSelect = id => {
 };

 const fetchResponseAfterBulkAction = () => {
-  const hasNoResponsesLeft = filteredResponses.value?.length === 0;
+  const hasNoResponsesLeft = responses.value?.length === 0;
  const currentPage = responseMeta.value?.page;

  if (hasNoResponsesLeft) {
@@ -208,22 +161,6 @@ const fetchResponseAfterBulkAction = () => {
  bulkSelectedIds.value = new Set();
 };

-const handleBulkApprove = async () => {
-  try {
-    await store.dispatch(
-      'captainBulkActions/handleBulkApprove',
-      Array.from(bulkSelectedIds.value)
-    );
-
-    fetchResponseAfterBulkAction();
-    useAlert(t('CAPTAIN.RESPONSES.BULK_APPROVE.SUCCESS_MESSAGE'));
-  } catch (error) {
-    useAlert(
-      error?.message || t('CAPTAIN.RESPONSES.BULK_APPROVE.ERROR_MESSAGE')
-    );
-  }
-};
-
 const onPageChange = page => {
  // Store current selection state before fetching new page
  const wasAllPageSelected = bulkSelectionState.value.allSelected;
@@ -238,7 +175,7 @@ const onPageChange = page => {
 };

 const onDeleteSuccess = () => {
-  if (filteredResponses.value?.length === 0 && responseMeta.value?.page > 1) {
+  if (responses.value?.length === 0 && responseMeta.value?.page > 1) {
    onPageChange(responseMeta.value.page - 1);
  }
 };
@@ -247,12 +184,6 @@ const onBulkDeleteSuccess = () => {
  fetchResponseAfterBulkAction();
 };

-const handleStatusFilterChange = ({ value }) => {
-  selectedStatus.value = value;
-  isStatusFilterOpen.value = false;
-  fetchResponses();
-};
-
 const handleAssistantFilterChange = assistant => {
  selectedAssistant.value = assistant;
  fetchResponses();
@@ -262,9 +193,14 @@ const debouncedSearch = debounce(async () => {
  fetchResponses();
 }, 500);

+const navigateToPendingFAQs = () => {
+  router.push({ name: 'captain_responses_pending' });
+};
+
 onMounted(() => {
  store.dispatch('captainAssistants/get');
  fetchResponses();
+  store.dispatch('captainResponses/fetchPendingCount');
 });
 </script>

@@ -276,8 +212,8 @@ onMounted(() => {
    :header-title="$t('CAPTAIN.RESPONSES.HEADER')"
    :button-label="$t('CAPTAIN.RESPONSES.ADD_NEW')"
    :is-fetching="isFetching"
-    :is-empty="!filteredResponses.length"
-    :show-pagination-footer="!isFetching && !!filteredResponses.length"
+    :is-empty="!responses.length"
+    :show-pagination-footer="!isFetching && !!responses.length"
    :feature-flag="FEATURE_FLAGS.CAPTAIN"
    @update:current-page="onPageChange"
    @click="handleCreate"
@@ -315,25 +251,7 @@ onMounted(() => {
          v-if="!bulkSelectionState.hasSelected"
          class="flex gap-3 justify-between w-full items-center"
        >
-          <div class="flex gap-3">
-            <OnClickOutside @trigger="isStatusFilterOpen = false">
-              <Button
-                :label="selectedStatusLabel"
-                icon="i-lucide-chevron-down"
-                size="sm"
-                color="slate"
-                trailing-icon
-                class="max-w-48"
-                @click="isStatusFilterOpen = !isStatusFilterOpen"
-              />
-
-              <DropdownMenu
-                v-if="isStatusFilterOpen"
-                :menu-items="statusOptions"
-                class="mt-2"
-                @action="handleStatusFilterChange"
-              />
-            </OnClickOutside>
+          <div class="flex items-center gap-3">
            <AssistantSelector
              :assistant-id="selectedAssistant"
              @update="handleAssistantFilterChange"
@@ -344,6 +262,7 @@ onMounted(() => {
            :placeholder="$t('CAPTAIN.RESPONSES.SEARCH_PLACEHOLDER')"
            class="w-64"
            size="sm"
+            type="search"
            autofocus
            @input="debouncedSearch"
          />
@@ -380,15 +299,6 @@ onMounted(() => {
            </div>
            <div class="h-4 w-px bg-n-strong" />
            <div class="flex gap-3 items-center">
-              <Button
-                :label="$t('CAPTAIN.RESPONSES.BULK_APPROVE_BUTTON')"
-                sm
-                ghost
-                icon="i-lucide-check"
-                class="!px-1.5"
-                @click="handleBulkApprove"
-              />
-              <div class="h-4 w-px bg-n-strong" />
              <Button
                :label="$t('CAPTAIN.RESPONSES.BULK_DELETE_BUTTON')"
                sm
@@ -406,10 +316,19 @@ onMounted(() => {

    <template #body>
      <LimitBanner class="mb-5" />
+      <Banner
+        v-if="pendingCount > 0"
+        color="blue"
+        class="mb-4"
+        :action-label="$t('CAPTAIN.RESPONSES.PENDING_BANNER.ACTION')"
+        @action="navigateToPendingFAQs"
+      >
+        {{ $t('CAPTAIN.RESPONSES.PENDING_BANNER.TITLE') }}
+      </Banner>

      <div class="flex flex-col gap-4">
        <ResponseCard
-          v-for="response in filteredResponses"
+          v-for="response in responses"
          :id="response.id"
          :key="response.id"
          :question="response.question"
@@ -422,6 +341,7 @@ onMounted(() => {
          :is-selected="bulkSelectedIds.has(response.id)"
          :selectable="hoveredCard === response.id || bulkSelectedIds.size > 0"
          :show-menu="!bulkSelectedIds.has(response.id)"
+          :show-actions="false"
          @action="handleAction"
          @navigate="handleNavigationAction"
          @select="handleCardSelect"
@@ -0,0 +1,412 @@
+<script setup>
+import { computed, onMounted, ref, nextTick } from 'vue';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { debounce } from '@chatwoot/utils';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import DeleteDialog from 'dashboard/components-next/captain/pageComponents/DeleteDialog.vue';
+import BulkDeleteDialog from 'dashboard/components-next/captain/pageComponents/BulkDeleteDialog.vue';
+import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
+import CaptainPaywall from 'dashboard/components-next/captain/pageComponents/Paywall.vue';
+import AssistantSelector from 'dashboard/components-next/captain/pageComponents/AssistantSelector.vue';
+import ResponseCard from 'dashboard/components-next/captain/assistant/ResponseCard.vue';
+import CreateResponseDialog from 'dashboard/components-next/captain/pageComponents/response/CreateResponseDialog.vue';
+import ResponsePageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue';
+import FeatureSpotlightPopover from 'dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue';
+import LimitBanner from 'dashboard/components-next/captain/pageComponents/response/LimitBanner.vue';
+
+const router = useRouter();
+const route = useRoute();
+const store = useStore();
+const { isOnChatwootCloud } = useAccount();
+const uiFlags = useMapGetter('captainResponses/getUIFlags');
+const assistants = useMapGetter('captainAssistants/getRecords');
+const responseMeta = useMapGetter('captainResponses/getMeta');
+const responses = useMapGetter('captainResponses/getRecords');
+const isFetching = computed(() => uiFlags.value.fetchingList);
+
+const selectedResponse = ref(null);
+const deleteDialog = ref(null);
+const bulkDeleteDialog = ref(null);
+
+const selectedAssistant = ref('all');
+const dialogType = ref('');
+const searchQuery = ref('');
+const { t } = useI18n();
+
+const createDialog = ref(null);
+
+const shouldShowDropdown = computed(() => {
+  if (assistants.value.length === 0) return false;
+  return !isFetching.value;
+});
+
+const backUrl = computed(() =>
+  frontendURL(`accounts/${route.params.accountId}/captain/responses`)
+);
+
+// Filter out approved responses in pending view
+const filteredResponses = computed(() =>
+  responses.value.filter(response => response.status !== 'approved')
+);
+
+const handleDelete = () => {
+  deleteDialog.value.dialogRef.open();
+};
+
+const handleAccept = async () => {
+  try {
+    await store.dispatch('captainResponses/update', {
+      id: selectedResponse.value.id,
+      status: 'approved',
+    });
+    useAlert(t(`CAPTAIN.RESPONSES.EDIT.APPROVE_SUCCESS_MESSAGE`));
+  } catch (error) {
+    const errorMessage =
+      error?.message || t(`CAPTAIN.RESPONSES.EDIT.ERROR_MESSAGE`);
+    useAlert(errorMessage);
+  } finally {
+    selectedResponse.value = null;
+  }
+};
+
+const handleCreate = () => {
+  dialogType.value = 'create';
+  nextTick(() => createDialog.value.dialogRef.open());
+};
+
+const handleEdit = () => {
+  dialogType.value = 'edit';
+  nextTick(() => createDialog.value.dialogRef.open());
+};
+
+const handleAction = ({ action, id }) => {
+  selectedResponse.value = filteredResponses.value.find(
+    response => id === response.id
+  );
+  nextTick(() => {
+    if (action === 'delete') {
+      handleDelete();
+    }
+    if (action === 'edit') {
+      handleEdit();
+    }
+    if (action === 'approve') {
+      handleAccept();
+    }
+  });
+};
+
+const handleNavigationAction = ({ id, type }) => {
+  if (type === 'Conversation') {
+    router.push({
+      name: 'inbox_conversation',
+      params: { conversation_id: id },
+    });
+  }
+};
+
+const handleCreateClose = () => {
+  dialogType.value = '';
+  selectedResponse.value = null;
+};
+
+const fetchResponses = (page = 1) => {
+  const filterParams = { page, status: 'pending' };
+
+  if (selectedAssistant.value !== 'all') {
+    filterParams.assistantId = selectedAssistant.value;
+  }
+  if (searchQuery.value) {
+    filterParams.search = searchQuery.value;
+  }
+  store.dispatch('captainResponses/get', filterParams);
+};
+
+// Bulk action
+const bulkSelectedIds = ref(new Set());
+const hoveredCard = ref(null);
+
+const bulkSelectionState = computed(() => {
+  const selectedCount = bulkSelectedIds.value.size;
+  const totalCount = filteredResponses.value?.length || 0;
+
+  return {
+    hasSelected: selectedCount > 0,
+    isIndeterminate: selectedCount > 0 && selectedCount < totalCount,
+    allSelected: totalCount > 0 && selectedCount === totalCount,
+  };
+});
+
+const bulkCheckbox = computed({
+  get: () => bulkSelectionState.value.allSelected,
+  set: value => {
+    bulkSelectedIds.value = value
+      ? new Set(filteredResponses.value.map(r => r.id))
+      : new Set();
+  },
+});
+
+const buildSelectedCountLabel = computed(() => {
+  const count = filteredResponses.value?.length || 0;
+  return bulkSelectionState.value.allSelected
+    ? t('CAPTAIN.RESPONSES.UNSELECT_ALL', { count })
+    : t('CAPTAIN.RESPONSES.SELECT_ALL', { count });
+});
+
+const handleCardHover = (isHovered, id) => {
+  hoveredCard.value = isHovered ? id : null;
+};
+
+const handleCardSelect = id => {
+  const selected = new Set(bulkSelectedIds.value);
+  selected[selected.has(id) ? 'delete' : 'add'](id);
+  bulkSelectedIds.value = selected;
+};
+
+const fetchResponseAfterBulkAction = () => {
+  const hasNoResponsesLeft = filteredResponses.value?.length === 0;
+  const currentPage = responseMeta.value?.page;
+
+  if (hasNoResponsesLeft) {
+    const pageToFetch = currentPage > 1 ? currentPage - 1 : currentPage;
+    fetchResponses(pageToFetch);
+  } else {
+    fetchResponses(currentPage);
+  }
+
+  bulkSelectedIds.value = new Set();
+};
+
+const handleBulkApprove = async () => {
+  try {
+    await store.dispatch(
+      'captainBulkActions/handleBulkApprove',
+      Array.from(bulkSelectedIds.value)
+    );
+
+    fetchResponseAfterBulkAction();
+    useAlert(t('CAPTAIN.RESPONSES.BULK_APPROVE.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(
+      error?.message || t('CAPTAIN.RESPONSES.BULK_APPROVE.ERROR_MESSAGE')
+    );
+  }
+};
+
+const onPageChange = page => {
+  const wasAllPageSelected = bulkSelectionState.value.allSelected;
+  const hadPartialSelection = bulkSelectedIds.value.size > 0;
+
+  fetchResponses(page);
+
+  if (wasAllPageSelected || hadPartialSelection) {
+    bulkSelectedIds.value = new Set();
+  }
+};
+
+const onDeleteSuccess = () => {
+  if (filteredResponses.value?.length === 0 && responseMeta.value?.page > 1) {
+    onPageChange(responseMeta.value.page - 1);
+  }
+};
+
+const onBulkDeleteSuccess = () => {
+  fetchResponseAfterBulkAction();
+};
+
+const handleAssistantFilterChange = assistant => {
+  selectedAssistant.value = assistant;
+  fetchResponses();
+};
+
+const debouncedSearch = debounce(async () => {
+  fetchResponses();
+}, 500);
+
+onMounted(() => {
+  store.dispatch('captainAssistants/get');
+  fetchResponses();
+});
+</script>
+
+<template>
+  <PageLayout
+    :total-count="responseMeta.totalCount"
+    :current-page="responseMeta.page"
+    :button-policy="['administrator']"
+    :header-title="$t('CAPTAIN.RESPONSES.PENDING_FAQS')"
+    :button-label="$t('CAPTAIN.RESPONSES.ADD_NEW')"
+    :is-fetching="isFetching"
+    :is-empty="!filteredResponses.length"
+    :show-pagination-footer="!isFetching && !!filteredResponses.length"
+    :feature-flag="FEATURE_FLAGS.CAPTAIN"
+    :back-url="backUrl"
+    @update:current-page="onPageChange"
+    @click="handleCreate"
+  >
+    <template #knowMore>
+      <FeatureSpotlightPopover
+        :button-label="$t('CAPTAIN.HEADER_KNOW_MORE')"
+        :title="$t('CAPTAIN.RESPONSES.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
+        :note="$t('CAPTAIN.RESPONSES.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
+        :hide-actions="!isOnChatwootCloud"
+        fallback-thumbnail="/assets/images/dashboard/captain/faqs-popover-light.svg"
+        fallback-thumbnail-dark="/assets/images/dashboard/captain/faqs-popover-dark.svg"
+        learn-more-url="https://chwt.app/captain-faq"
+      />
+    </template>
+
+    <template #emptyState>
+      <ResponsePageEmptyState @click="handleCreate" />
+    </template>
+
+    <template #paywall>
+      <CaptainPaywall />
+    </template>
+
+    <template #controls>
+      <div
+        v-if="shouldShowDropdown"
+        class="mb-4 -mt-3 flex justify-between items-center py-1"
+        :class="{
+          'ltr:pl-3 rtl:pr-3 ltr:pr-1 rtl:pl-1 rounded-lg outline outline-1 outline-n-weak bg-n-solid-3 w-fit':
+            bulkSelectionState.hasSelected,
+        }"
+      >
+        <div
+          v-if="!bulkSelectionState.hasSelected"
+          class="flex gap-3 justify-between w-full items-center"
+        >
+          <div class="flex items-center gap-3">
+            <AssistantSelector
+              :assistant-id="selectedAssistant"
+              @update="handleAssistantFilterChange"
+            />
+          </div>
+          <Input
+            v-model="searchQuery"
+            :placeholder="$t('CAPTAIN.RESPONSES.SEARCH_PLACEHOLDER')"
+            class="w-64"
+            size="sm"
+            type="search"
+            autofocus
+            @input="debouncedSearch"
+          />
+        </div>
+
+        <transition
+          name="slide-fade"
+          enter-active-class="transition-all duration-300 ease-out"
+          enter-from-class="opacity-0 transform ltr:-translate-x-4 rtl:translate-x-4"
+          enter-to-class="opacity-100 transform translate-x-0"
+          leave-active-class="hidden opacity-0"
+        >
+          <div
+            v-if="bulkSelectionState.hasSelected"
+            class="flex items-center gap-3"
+          >
+            <div class="flex items-center gap-3">
+              <div class="flex items-center gap-1.5">
+                <Checkbox
+                  v-model="bulkCheckbox"
+                  :indeterminate="bulkSelectionState.isIndeterminate"
+                />
+                <span class="text-sm text-n-slate-12 font-medium tabular-nums">
+                  {{ buildSelectedCountLabel }}
+                </span>
+              </div>
+              <span class="text-sm text-n-slate-10 tabular-nums">
+                {{
+                  $t('CAPTAIN.RESPONSES.SELECTED', {
+                    count: bulkSelectedIds.size,
+                  })
+                }}
+              </span>
+            </div>
+            <div class="h-4 w-px bg-n-strong" />
+            <div class="flex gap-3 items-center">
+              <Button
+                :label="$t('CAPTAIN.RESPONSES.BULK_APPROVE_BUTTON')"
+                sm
+                ghost
+                icon="i-lucide-check"
+                class="!px-1.5"
+                @click="handleBulkApprove"
+              />
+              <div class="h-4 w-px bg-n-strong" />
+              <Button
+                :label="$t('CAPTAIN.RESPONSES.BULK_DELETE_BUTTON')"
+                sm
+                ruby
+                ghost
+                class="!px-1.5"
+                icon="i-lucide-trash"
+                @click="bulkDeleteDialog.dialogRef.open()"
+              />
+            </div>
+          </div>
+        </transition>
+      </div>
+    </template>
+
+    <template #body>
+      <LimitBanner class="mb-5" />
+
+      <div class="flex flex-col gap-4">
+        <ResponseCard
+          v-for="response in filteredResponses"
+          :id="response.id"
+          :key="response.id"
+          :question="response.question"
+          :answer="response.answer"
+          :assistant="response.assistant"
+          :documentable="response.documentable"
+          :status="response.status"
+          :created-at="response.created_at"
+          :updated-at="response.updated_at"
+          :is-selected="bulkSelectedIds.has(response.id)"
+          :selectable="hoveredCard === response.id || bulkSelectedIds.size > 0"
+          :show-menu="false"
+          :show-actions="!bulkSelectedIds.has(response.id)"
+          @action="handleAction"
+          @navigate="handleNavigationAction"
+          @select="handleCardSelect"
+          @hover="isHovered => handleCardHover(isHovered, response.id)"
+        />
+      </div>
+    </template>
+
+    <DeleteDialog
+      v-if="selectedResponse"
+      ref="deleteDialog"
+      :entity="selectedResponse"
+      type="Responses"
+      @delete-success="onDeleteSuccess"
+    />
+
+    <BulkDeleteDialog
+      v-if="bulkSelectedIds"
+      ref="bulkDeleteDialog"
+      :bulk-ids="bulkSelectedIds"
+      type="Responses"
+      @delete-success="onBulkDeleteSuccess"
+    />
+
+    <CreateResponseDialog
+      v-if="dialogType"
+      ref="createDialog"
+      :type="dialogType"
+      :selected-response="selectedResponse"
+      @close="handleCreateClose"
+    />
+  </PageLayout>
+</template>
@@ -1,57 +0,0 @@
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import {
-  useFunctionGetter,
-  useMapGetter,
-  useStore,
-} from 'dashboard/composables/store';
-
-import Integration from './Integration.vue';
-import Spinner from 'shared/components/Spinner.vue';
-
-const store = useStore();
-
-const integrationLoaded = ref(false);
-
-const integration = useFunctionGetter('integrations/getIntegration', 'github');
-
-const uiFlags = useMapGetter('integrations/getUIFlags');
-
-const integrationAction = computed(() => {
-  if (integration.value.enabled) {
-    return 'disconnect';
-  }
-  return integration.value.action;
-});
-
-const initializeGithubIntegration = async () => {
-  await store.dispatch('integrations/get', 'github');
-  integrationLoaded.value = true;
-};
-
-onMounted(() => {
-  initializeGithubIntegration();
-});
-</script>
-
-<template>
-  <div class="flex-grow flex-shrink max-w-6xl p-4 mx-auto overflow-auto">
-    <div v-if="integrationLoaded && !uiFlags.isCreatingGithub">
-      <Integration
-        :integration-id="integration.id"
-        :integration-logo="integration.logo"
-        :integration-name="integration.name"
-        :integration-description="integration.description"
-        :integration-enabled="integration.enabled"
-        :integration-action="integrationAction"
-        :delete-confirmation-text="{
-          title: $t('INTEGRATION_SETTINGS.GITHUB.DELETE.TITLE'),
-          message: $t('INTEGRATION_SETTINGS.GITHUB.DELETE.MESSAGE'),
-        }"
-      />
-    </div>
-    <div v-else class="flex items-center justify-center flex-1">
-      <Spinner size="" color-scheme="primary" />
-    </div>
-  </div>
-</template>
@@ -10,7 +10,7 @@ import SettingsContent from '../Wrapper.vue';
 import Linear from './Linear.vue';
 import Notion from './Notion.vue';
 import Shopify from './Shopify.vue';
-import Github from './Github.vue';
+
 export default {
  routes: [
    {
@@ -100,16 +100,6 @@ export default {
          },
          props: route => ({ code: route.query.code }),
        },
-        {
-          path: 'github',
-          name: 'settings_integrations_github',
-          component: Github,
-          meta: {
-            featureFlag: FEATURE_FLAGS.INTEGRATIONS,
-            permissions: ['administrator'],
-          },
-          props: route => ({ error: route.query.error }),
-        },
        {
          path: 'shopify',
          name: 'settings_integrations_shopify',
@@ -0,0 +1,156 @@
+import { TemplateTypeDetector } from './TemplateTypeDetector';
+
+/**
+ * TemplateNormalizer - Convert platform-specific formats to unified structure
+ */
+export class TemplateNormalizer {
+  /**
+   * Normalize WhatsApp template to unified format
+   * @param {Object} template - WhatsApp template object
+   * @returns {Object} - Normalized template
+   */
+  static normalizeWhatsApp(template) {
+    const components = template.components || [];
+
+    return {
+      id: template.id,
+      name: template.name,
+      platform: 'whatsapp',
+      type: TemplateTypeDetector.detectWhatsAppType(template),
+      parameterFormat: template.parameter_format || 'POSITIONAL',
+      header: components.find(c => c.type === 'HEADER'),
+      body: components.find(c => c.type === 'BODY'),
+      footer: components.find(c => c.type === 'FOOTER'),
+      buttons: components.find(c => c.type === 'BUTTONS')?.buttons || [],
+      variables: this.extractWhatsAppVariables(template),
+      category: template.category,
+      language: template.language,
+      originalTemplate: template,
+    };
+  }
+
+  /**
+   * Normalize Twilio template to unified format
+   * @param {Object} template - Twilio template object
+   * @returns {Object} - Normalized template
+   */
+  static normalizeTwilio(template) {
+    // Convert template_type to match the keys used in the types object
+    const normalizedType = template.template_type.replace('_', '-');
+    const lookupKey = `twilio/${normalizedType}`;
+    const typeData = template.types?.[lookupKey] || {};
+
+    return {
+      contentSid: template.content_sid,
+      name: template.friendly_name,
+      platform: 'twilio',
+      type: TemplateTypeDetector.detectTwilioType(template),
+      body: template.body || typeData.body,
+      media: typeData.media || [],
+      actions: typeData.actions || [],
+      variables: template.variables || {},
+      category: template.category || 'utility',
+      language: template.language || 'en',
+      originalTemplate: template,
+    };
+  }
+
+  /**
+   * Extract variables from WhatsApp template
+   * @param {Object} template - WhatsApp template object
+   * @returns {Object} - Variables object with example values
+   */
+  static extractWhatsAppVariables(template) {
+    const variables = {};
+    const components = template.components || [];
+
+    components.forEach(component => {
+      // Extract from text content
+      if (component.text) {
+        const matches = component.text.match(/\{\{([^}]+)\}\}/g) || [];
+        matches.forEach(match => {
+          const variable = match.replace(/[{}]/g, '');
+
+          if (template.parameter_format === 'NAMED') {
+            // Named parameters: {{customer_name}}
+            const example =
+              component.example?.body_text_named_params?.find(
+                p => p.param_name === variable
+              )?.example || '';
+            variables[variable] = example;
+          } else {
+            // Positional parameters: {{1}}, {{2}}
+            const position = parseInt(variable, 10) - 1;
+            const example = component.example?.body_text?.[0]?.[position] || '';
+            variables[variable] = example;
+          }
+        });
+      }
+
+      // Extract from button URLs
+      if (component.buttons) {
+        component.buttons.forEach(button => {
+          if (button.url) {
+            const matches = button.url.match(/\{\{([^}]+)\}\}/g) || [];
+            matches.forEach(match => {
+              const variable = match.replace(/[{}]/g, '');
+              const example = button.example?.[0] || '';
+              variables[variable] = example;
+            });
+          }
+        });
+      }
+    });
+
+    return variables;
+  }
+
+  /**
+   * Extract variables from Twilio template
+   * @param {Object} template - Twilio template object
+   * @returns {Object} - Variables object with example values
+   */
+  static extractTwilioVariables(template) {
+    const variables = {};
+
+    // Extract from body text
+    if (template.body) {
+      const matches = template.body.match(/\{\{([^}]+)\}\}/g) || [];
+      matches.forEach(match => {
+        const variable = match.replace(/[{}]/g, '');
+        variables[variable] = template.variables?.[variable] || '';
+      });
+    }
+
+    // Extract from media URLs
+    const typeData = template.types?.[`twilio/${template.template_type}`] || {};
+    if (typeData.media) {
+      typeData.media.forEach(mediaUrl => {
+        const matches = mediaUrl.match(/\{\{([^}]+)\}\}/g) || [];
+        matches.forEach(match => {
+          const variable = match.replace(/[{}]/g, '');
+          variables[variable] = template.variables?.[variable] || '';
+        });
+      });
+    }
+
+    return variables;
+  }
+
+  /**
+   * Normalize template from any platform
+   * @param {Object} template - Template object
+   * @param {string} platform - Platform identifier ('whatsapp' | 'twilio')
+   * @returns {Object} - Normalized template
+   */
+  static normalize(template, platform) {
+    switch (platform) {
+      case 'whatsapp':
+        return this.normalizeWhatsApp(template);
+      case 'twilio':
+        return this.normalizeTwilio(template);
+      default:
+        throw new Error(`Unsupported platform: ${platform}`);
+    }
+  }
+}
@@ -0,0 +1,71 @@
+/**
+ * TemplateTypeDetector - Unified service to identify template types across platforms
+ */
+export class TemplateTypeDetector {
+  /**
+   * Detect WhatsApp template type based on components
+   * @param {Object} template - WhatsApp template object
+   * @returns {string} - Template type identifier
+   */
+  static detectWhatsAppType(template) {
+    const components = template.components || [];
+    const hasHeader = components.find(c => c.type === 'HEADER');
+    const hasButtons = components.find(c => c.type === 'BUTTONS');
+
+    // Media templates (priority: header media)
+    if (hasHeader?.format === 'IMAGE') return 'whatsapp-media-image';
+    if (hasHeader?.format === 'VIDEO') return 'whatsapp-media-video';
+    if (hasHeader?.format === 'DOCUMENT') return 'whatsapp-media-document';
+
+    // Interactive templates (priority: special buttons)
+    if (hasButtons) {
+      const copyCodeButton = hasButtons.buttons?.find(
+        b => b.type === 'COPY_CODE'
+      );
+      if (copyCodeButton) return 'whatsapp-copy-code';
+      return 'whatsapp-interactive';
+    }
+
+    // Text templates
+    if (hasHeader?.format === 'TEXT') return 'whatsapp-text-header';
+    return 'whatsapp-text';
+  }
+
+  /**
+   * Detect Twilio template type
+   * @param {Object} template - Twilio template object
+   * @returns {string} - Template type identifier
+   */
+  static detectTwilioType(template) {
+    switch (template.template_type) {
+      case 'media':
+        return 'twilio-media';
+      case 'quick_reply':
+        return 'twilio-quick-reply';
+      default:
+        return 'twilio-text';
+    }
+  }
+
+  /**
+   * Get all supported template types
+   * @returns {Array} - Array of supported template types
+   */
+  static getSupportedTypes() {
+    return [
+      // WhatsApp types
+      'whatsapp-text',
+      'whatsapp-text-header',
+      'whatsapp-media-image',
+      'whatsapp-media-video',
+      'whatsapp-media-document',
+      'whatsapp-interactive',
+      'whatsapp-copy-code',
+
+      // Twilio types
+      'twilio-text',
+      'twilio-media',
+      'twilio-quick-reply',
+    ];
+  }
+}
@@ -1,9 +1,22 @@
 import CaptainResponseAPI from 'dashboard/api/captain/response';
 import { createStore } from './storeFactory';

+const SET_PENDING_COUNT = 'SET_PENDING_COUNT';
+
 export default createStore({
  name: 'CaptainResponse',
  API: CaptainResponseAPI,
+  getters: {
+    getPendingCount: state => state.meta.pendingCount || 0,
+  },
+  mutations: {
+    [SET_PENDING_COUNT](state, count) {
+      state.meta = {
+        ...state.meta,
+        pendingCount: Number(count),
+      };
+    },
+  },
  actions: mutations => ({
    removeBulkResponses: ({ commit, state }, ids) => {
      const updatedRecords = state.records.filter(
@@ -28,5 +41,18 @@ export default createStore({

      commit(mutations.SET, updatedRecords);
    },
+    fetchPendingCount: async ({ commit }, assistantId) => {
+      try {
+        const response = await CaptainResponseAPI.get({
+          status: 'pending',
+          page: 1,
+          assistantId,
+        });
+        const count = response.data?.meta?.total_count || 0;
+        commit(SET_PENDING_COUNT, count);
+      } catch (error) {
+        commit(SET_PENDING_COUNT, 0);
+      }
+    },
  }),
 });
@@ -49,6 +49,7 @@ export const createMutations = mutationTypes => ({
  },
  [mutationTypes.SET_META](state, meta) {
    state.meta = {
+      ...state.meta,
      totalCount: Number(meta.total_count),
      page: Number(meta.page),
    };
@@ -69,7 +70,7 @@ export const createCrudActions = (API, mutationTypes) => ({
 });

 export const createStore = options => {
-  const { name, API, actions, getters } = options;
+  const { name, API, actions, getters, mutations } = options;
  const mutationTypes = generateMutationTypes(name);

  const customActions = actions ? actions(mutationTypes) : {};
@@ -81,7 +82,10 @@ export const createStore = options => {
      ...createGetters(),
      ...(getters || {}),
    },
-    mutations: createMutations(mutationTypes),
+    mutations: {
+      ...createMutations(mutationTypes),
+      ...(mutations || {}),
+    },
    actions: {
      ...createCrudActions(API, mutationTypes),
      ...customActions,
@@ -78,6 +78,11 @@ export const getters = {
        return false;
      }

+      // Filter out authentication templates
+      if (template.category === 'AUTHENTICATION') {
+        return false;
+      }
+
      // Filter out interactive templates (LIST, PRODUCT, CATALOG), location templates, and call permission templates
      const hasUnsupportedComponents = template.components.some(
        component =>
@@ -265,6 +265,39 @@ describe('#getters', () => {
      expect(result[0].name).toBe('regular_template');
    });

+    it('filters out authentication templates', () => {
+      const authenticationTemplates = [
+        {
+          name: 'auth_template',
+          status: 'approved',
+          category: 'AUTHENTICATION',
+          components: [
+            { type: 'BODY', text: 'Your verification code is {{1}}' },
+          ],
+        },
+        {
+          name: 'regular_template',
+          status: 'approved',
+          category: 'MARKETING',
+          components: [{ type: 'BODY', text: 'Regular message' }],
+        },
+      ];
+
+      const state = {
+        records: [
+          {
+            id: 1,
+            channel_type: 'Channel::Whatsapp',
+            message_templates: authenticationTemplates,
+          },
+        ],
+      };
+
+      const result = getters.getFilteredWhatsAppTemplates(state)(1);
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe('regular_template');
+    });
+
    it('returns valid templates from fixture data', () => {
      const state = {
        records: [
@@ -1,6 +1,5 @@
 class Integrations::App
  include Linear::IntegrationHelper
-  include Github::IntegrationHelper
  attr_accessor :params

  def initialize(params)
@@ -31,15 +30,10 @@ class Integrations::App
    params[:fields]
  end

-  # There is no way to get the account_id from the linear/github callback
-  # so we are using the generate token method to generate a token and encode it in the state parameter
+  # There is no way to get the account_id from the linear callback
+  # so we are using the generate_linear_token method to generate a token and encode it in the state parameter
  def encode_state
-    case params[:id]
-    when 'linear'
-      generate_linear_token(Current.account.id)
-    when 'github'
-      generate_github_token(Current.account.id)
-    end
+    generate_linear_token(Current.account.id)
  end

  def action
@@ -49,8 +43,6 @@ class Integrations::App
      "#{params[:action]}&client_id=#{client_id}&redirect_uri=#{self.class.slack_integration_url}"
    when 'linear'
      build_linear_action
-    when 'github'
-      build_github_action
    else
      params[:action]
    end
@@ -62,8 +54,6 @@ class Integrations::App
      GlobalConfigService.load('SLACK_CLIENT_SECRET', nil).present?
    when 'linear'
      GlobalConfigService.load('LINEAR_CLIENT_ID', nil).present?
-    when 'github'
-      github_enabled?
    when 'shopify'
      shopify_enabled?(account)
    when 'leadsquared'
@@ -88,17 +78,6 @@ class Integrations::App
    ].join('&')
  end

-  def build_github_action
-    GlobalConfigService.load('GITHUB_CLIENT_ID', nil)
-
-    # For GitHub Apps, redirect to installation page
-    # The standard /installations/new URL should show org/user selection if the app is properly configured
-    # Include state parameter with signed account ID for account context
-    github_app_name = GlobalConfigService.load('GITHUB_APP_NAME', 'chatwoot-qa')
-    state = Current.account.to_signed_global_id(expires_in: 1.hour)
-    "https://github.com/apps/#{github_app_name}/installations/new?state=#{state}"
-  end
-
  def enabled?(account)
    case params[:id]
    when 'webhook'
@@ -122,10 +101,6 @@ class Integrations::App
    "#{ENV.fetch('FRONTEND_URL', nil)}/linear/callback"
  end

-  def self.github_integration_url
-    "#{ENV.fetch('FRONTEND_URL', nil)}/github/callback"
-  end
-
  class << self
    def apps
      Hashie::Mash.new(APPS_CONFIG)
@@ -144,10 +119,6 @@ class Integrations::App

  private

-  def github_enabled?
-    GlobalConfigService.load('GITHUB_CLIENT_ID', nil).present? && GlobalConfigService.load('GITHUB_CLIENT_SECRET', nil).present?
-  end
-
  def shopify_enabled?(account)
    account.feature_enabled?('shopify_integration') && GlobalConfigService.load('SHOPIFY_CLIENT_ID', nil).present?
  end
@@ -1,60 +0,0 @@
-class Github::GithubService
-  attr_reader :hook
-
-  def initialize(hook:)
-    @hook = hook
-  end
-
-  def repositories
-    client.repositories(nil, type: 'all')
-  rescue Octokit::Error => e
-    Rails.logger.error("GitHub API error fetching repositories: #{e.message}")
-    raise_api_error(e)
-  end
-
-  def assignees(repo_full_name)
-    client.repository_assignees(repo_full_name)
-  rescue Octokit::Error => e
-    Rails.logger.error("GitHub API error fetching assignees for #{repo_full_name}: #{e.message}")
-    raise_api_error(e)
-  end
-
-  def search_repositories(query)
-    return repositories if query.blank?
-
-    # Get all user's repositories first
-    user_repos = repositories
-
-    # Filter repositories by query string (case-insensitive)
-    user_repos.select do |repo|
-      repo.full_name.downcase.include?(query.downcase) ||
-        (repo.description&.downcase&.include?(query.downcase))
-    end
-  rescue Octokit::Error => e
-    Rails.logger.error("GitHub API error searching repositories with query '#{query}': #{e.message}")
-    raise_api_error(e)
-  end
-
-  private
-
-  def client
-    @client ||= Octokit::Client.new(
-      access_token: hook.access_token,
-      auto_paginate: true,
-      per_page: 100
-    )
-  end
-
-  def raise_api_error(error)
-    case error.response_status
-    when 401
-      raise CustomExceptions::Base.new('GitHub authentication failed', 401)
-    when 403
-      raise CustomExceptions::Base.new('GitHub API rate limit exceeded or insufficient permissions', 403)
-    when 404
-      raise CustomExceptions::Base.new('GitHub resource not found', 404)
-    else
-      raise CustomExceptions::Base.new("GitHub API error: #{error.message}", error.response_status || 500)
-    end
-  end
-end
@@ -169,11 +169,7 @@
  <symbol id="icon-shopify"  viewBox="0 0 32 32">
    <path fill="currentColor" d="m20.448 31.974l9.625-2.083s-3.474-23.484-3.5-23.641s-.156-.255-.281-.255c-.13 0-2.573-.182-2.573-.182s-1.703-1.698-1.922-1.88a.4.4 0 0 0-.161-.099l-1.219 28.141zm-4.833-16.901s-1.083-.563-2.365-.563c-1.932 0-2.005 1.203-2.005 1.521c0 1.641 4.318 2.286 4.318 6.172c0 3.057-1.922 5.01-4.542 5.01c-3.141 0-4.719-1.953-4.719-1.953l.859-2.781s1.661 1.422 3.042 1.422c.901 0 1.302-.724 1.302-1.245c0-2.156-3.542-2.255-3.542-5.807c-.047-2.984 2.094-5.891 6.438-5.891c1.677 0 2.5.479 2.5.479l-1.26 3.625zm-.719-13.969c.177 0 .359.052.536.182c-1.313.62-2.75 2.188-3.344 5.323a76 76 0 0 1-2.516.771c.688-2.38 2.359-6.26 5.323-6.26zm1.646 3.932v.182c-1.005.307-2.115.646-3.193.979c.62-2.37 1.776-3.526 2.781-3.958c.255.667.411 1.568.411 2.797zm.718-2.973c.922.094 1.521 1.151 1.901 2.339c-.464.151-.979.307-1.542.484v-.333c0-1.005-.13-1.828-.359-2.495zm3.99 1.718c-.031 0-.083.026-.104.026c-.026 0-.385.099-.953.281C19.63 2.442 18.625.927 16.849.927h-.156C16.183.281 15.558 0 15.021 0c-4.141 0-6.12 5.172-6.74 7.797c-1.594.484-2.75.844-2.88.896c-.901.286-.927.313-1.031 1.161c-.099.615-2.438 18.75-2.438 18.75L20.01 32z"/>
  </symbol>
-  
-  <symbol id="icon-github" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-  </symbol>
-  
+
  <symbol id="icon-slack" viewBox="0 0 24 24">
    <path fill="currentColor" d="M6.527 14.514A1.973 1.973 0 0 1 4.56 16.48a1.973 1.973 0 0 1-1.968-1.967c0-1.083.885-1.968 1.968-1.968h1.967zm.992 0c0-1.083.885-1.968 1.968-1.968s1.967.885 1.967 1.968v4.927a1.973 1.973 0 0 1-1.967 1.968a1.973 1.973 0 0 1-1.968-1.968zm1.968-7.987A1.973 1.973 0 0 1 7.519 4.56c0-1.083.885-1.967 1.968-1.967s1.967.884 1.967 1.967v1.968zm0 .992c1.083 0 1.967.884 1.967 1.967a1.973 1.973 0 0 1-1.967 1.968H4.56a1.973 1.973 0 0 1-1.968-1.968c0-1.083.885-1.967 1.968-1.967zm7.986 1.967c0-1.083.885-1.967 1.968-1.967s1.968.884 1.968 1.967a1.973 1.973 0 0 1-1.968 1.968h-1.968zm-.991 0a1.973 1.973 0 0 1-1.968 1.968a1.973 1.973 0 0 1-1.968-1.968V4.56c0-1.083.885-1.967 1.968-1.967s1.968.884 1.968 1.967zm-1.968 7.987c1.083 0 1.968.885 1.968 1.968a1.973 1.973 0 0 1-1.968 1.968a1.973 1.973 0 0 1-1.968-1.968v-1.968zm0-.992a1.973 1.973 0 0 1-1.968-1.967c0-1.083.885-1.968 1.968-1.968h4.927c1.083 0 1.968.885 1.968 1.968a1.973 1.973 0 0 1-1.968 1.967z"/>
  </symbol>
@@ -176,9 +176,6 @@
 - name: notion_integration
  display_name: Notion Integration
  enabled: false
- name: github_integration
-  display_name: Github Integration
-  enabled: false
 - name: captain_integration_v2
  display_name: Captain V2
  enabled: false
@@ -451,22 +451,3 @@
  locked: false
  description: 'Token expiry in days'
 ## ------ End of Customizations for Customers ------ ##
-
-# ------- Github Integration Config ------- #
- name: GITHUB_CLIENT_ID
-  display_title: 'Github Client ID'
-  value:
-  locked: false
-  description: 'Github client ID'
- name: GITHUB_CLIENT_SECRET
-  display_title: 'Github Client Secret'
-  value:
-  locked: false
-  description: 'Github client secret'
-  type: secret
- name: GITHUB_APP_NAME
-  display_title: 'Github App Name'
-  value:
-  locked: false
-  description: 'Github App name for installation URLs (e.g., "chatwoot-qa")'
-## ------ End of Github Integration Config ------- #
@@ -284,11 +284,3 @@ leadsquared:
      'conversation_activity_score',
      'transcript_activity_score',
    ]
-
-github:
-  id: github
-  logo: github.png
-  i18n_key: github
-  hook_type: account
-  action: https://github.com/login/oauth/authorize
-  allow_multiple_hooks: false
@@ -312,10 +312,6 @@ en:
      name: 'LeadSquared'
      short_description: 'Sync your contacts and conversations with LeadSquared CRM.'
      description: 'Sync your contacts and conversations with LeadSquared CRM. This integration automatically creates leads in LeadSquared when new contacts are added, and logs conversation activity to provide your sales team with complete context.'
-    github:
-      name: 'GitHub'
-      short_description: 'Create and manage GitHub issues directly from conversations.'
-      description: 'Connect your GitHub repositories to create issues directly from customer conversations. This integration helps you track bugs, feature requests, and development tasks seamlessly.'
  captain:
    copilot_message_required: Message is required
    copilot_error: 'Please connect an assistant to this inbox to use Copilot'
@@ -302,14 +302,6 @@ Rails.application.routes.draw do
                delete :destroy
              end
            end
-            resource :github, controller: 'github', only: [] do
-              collection do
-                delete :destroy
-                get :repositories
-                get :search_repositories
-                get 'repositories/:owner/:repo/assignees', to: 'github#assignees', as: :repository_assignees
-              end
-            end
          end
          resources :working_hours, only: [:update]

@@ -557,10 +549,6 @@ Rails.application.routes.draw do
    end
  end

-  namespace :github do
-    get :callback, to: 'callbacks#show'
-  end
-
  get 'microsoft/callback', to: 'microsoft/callbacks#show'
  get 'google/callback', to: 'google/callbacks#show'
  get 'instagram/callback', to: 'instagram/callbacks#show'
@@ -5,11 +5,13 @@ class Captain::Tools::FirecrawlParserJob < ApplicationJob
    assistant = Captain::Assistant.find(assistant_id)
    metadata = payload[:metadata]

+    canonical_url = normalize_link(metadata['url'])
    document = assistant.documents.find_or_initialize_by(
-      external_link: metadata['url']
+      external_link: canonical_url
    )

    document.update!(
+      external_link: canonical_url,
      content: payload[:markdown],
      name: metadata['title'],
      status: :available
@@ -17,4 +19,10 @@ class Captain::Tools::FirecrawlParserJob < ApplicationJob
  rescue StandardError => e
    raise "Failed to parse FireCrawl data: #{e.message}"
  end
+
+  private
+
+  def normalize_link(raw_url)
+    raw_url.to_s.delete_suffix('/')
+  end
 end
@@ -15,11 +15,11 @@ class Captain::Tools::SimplePageCrawlParserJob < ApplicationJob
    page_title = crawler.page_title || ''
    content = crawler.body_text_content || ''

-    document = assistant.documents.find_or_initialize_by(
-      external_link: page_link
-    )
+    normalized_link = normalize_link(page_link)
+    document = assistant.documents.find_or_initialize_by(external_link: normalized_link)

    document.update!(
+      external_link: normalized_link,
      name: page_title[0..254], content: content[0..14_999], status: :available
    )
  rescue StandardError => e
@@ -28,6 +28,10 @@ class Captain::Tools::SimplePageCrawlParserJob < ApplicationJob

  private

+  def normalize_link(raw_link)
+    raw_link.to_s.delete_suffix('/')
+  end
+
  def limit_exceeded?(account)
    limits = account.usage_limits[:captain][:documents]
    limits[:current_available].negative? || limits[:current_available].zero?
@@ -37,6 +37,7 @@ class Captain::Document < ApplicationRecord
  validate :validate_file_attachment, if: -> { pdf_file.attached? }
  before_validation :ensure_account_id
  before_validation :set_external_link_for_pdf
+  before_validation :normalize_external_link

  enum status: {
    in_progress: 0,
@@ -47,7 +48,7 @@ class Captain::Document < ApplicationRecord
  after_create_commit :enqueue_crawl_job
  after_create_commit :update_document_usage
  after_destroy :update_document_usage
-  after_commit :enqueue_response_builder_job, on: :update, if: :should_enqueue_response_builder?
+  after_commit :enqueue_response_builder_job
  scope :ordered, -> { order(created_at: :desc) }

  scope :for_account, ->(account_id) { where(account_id: account_id) }
@@ -94,15 +95,18 @@ class Captain::Document < ApplicationRecord
  end

  def enqueue_response_builder_job
-    return if status != 'available'
+    return unless should_enqueue_response_builder?

    Captain::Documents::ResponseBuilderJob.perform_later(self)
  end

  def should_enqueue_response_builder?
-    # Only enqueue when status changes to available
-    # Avoid re-enqueueing when metadata is updated by the job itself
-    saved_change_to_status? && status == 'available'
+    return false if destroyed?
+    return false unless available?
+
+    return saved_change_to_status? if pdf_document?
+
+    (saved_change_to_status? || saved_change_to_content?) && content.present?
  end

  def update_document_usage
@@ -140,4 +144,11 @@ class Captain::Document < ApplicationRecord
    timestamp = Time.current.strftime('%Y%m%d%H%M%S')
    self.external_link = "PDF: #{pdf_file.filename.base}_#{timestamp}"
  end
+
+  def normalize_external_link
+    return if external_link.blank?
+    return if pdf_document?
+
+    self.external_link = external_link.delete_suffix('/')
+  end
 end
@@ -1,165 +0,0 @@
-require 'rails_helper'
-
-RSpec.describe Github::CallbacksController, type: :controller do
-  let(:account) { create(:account) }
-  let(:signed_account_id) { account.to_signed_global_id(expires_in: 1.hour) }
-
-  before do
-    # Clear any existing GitHub hooks for the account
-    account.hooks.where(app_id: 'github').destroy_all
-
-    allow(GlobalConfigService).to receive(:load).with('GITHUB_CLIENT_ID', nil).and_return('test_client_id')
-    allow(GlobalConfigService).to receive(:load).with('GITHUB_CLIENT_SECRET', nil).and_return('test_client_secret')
-  end
-
-  describe 'route accessibility' do
-    it 'is accessible via the github callback route' do
-      expect(get: '/github/callback').to route_to(
-        controller: 'github/callbacks',
-        action: 'show'
-      )
-    end
-  end
-
-  describe 'helper methods' do
-    describe '#account' do
-      it 'resolves account from valid signed global id' do
-        controller.params = { state: signed_account_id }
-        expect(controller.send(:account)).to eq(account)
-      end
-
-      it 'raises error for missing state' do
-        controller.params = {}
-        expect { controller.send(:account) }.to raise_error(ActionController::BadRequest, 'Invalid account context')
-      end
-
-      it 'raises error for invalid state' do
-        controller.params = { state: 'invalid_state' }
-        expect { controller.send(:account) }.to raise_error(ActionController::BadRequest, 'Invalid account context')
-      end
-    end
-
-    describe '#oauth_client' do
-      it 'creates OAuth2 client with correct configuration' do
-        oauth_client = controller.send(:oauth_client)
-        expect(oauth_client).to be_a(OAuth2::Client)
-        expect(oauth_client.id).to eq('test_client_id')
-        expect(oauth_client.secret).to eq('test_client_secret')
-        expect(oauth_client.site).to eq('https://github.com')
-        expect(oauth_client.options[:token_url]).to eq('/login/oauth/access_token')
-        expect(oauth_client.options[:authorize_url]).to eq('/login/oauth/authorize')
-      end
-    end
-
-    describe '#github_redirect_uri' do
-      before do
-        allow(controller).to receive(:account).and_return(account)
-      end
-
-      it 'generates correct GitHub redirect URI' do
-        with_modified_env FRONTEND_URL: 'http://localhost:3000' do
-          uri = controller.send(:github_redirect_uri)
-          expect(uri).to eq("http://localhost:3000/app/accounts/#{account.id}/settings/integrations/github")
-        end
-      end
-    end
-
-    describe '#fallback_redirect_uri' do
-      it 'generates fallback redirect URI when account is unavailable' do
-        allow(controller).to receive(:account).and_raise(StandardError)
-
-        with_modified_env FRONTEND_URL: 'http://localhost:3000' do
-          uri = controller.send(:fallback_redirect_uri)
-          expect(uri).to eq('http://localhost:3000/app/settings/integrations')
-        end
-      end
-    end
-
-    describe '#build_hook_settings' do
-      let(:mock_parsed_body) do
-        {
-          'access_token' => 'test_token',
-          'token_type' => 'bearer',
-          'scope' => 'repo,read:org'
-        }
-      end
-
-      before do
-        allow(controller).to receive(:parsed_body).and_return(mock_parsed_body)
-      end
-
-      it 'builds hook settings with installation_id' do
-        settings = controller.send(:build_hook_settings, '12345')
-        expect(settings).to include(
-          token_type: 'bearer',
-          scope: 'repo,read:org',
-          installation_id: '12345'
-        )
-      end
-
-      it 'builds hook settings without installation_id when nil' do
-        settings = controller.send(:build_hook_settings, nil)
-        expect(settings).to include(
-          token_type: 'bearer',
-          scope: 'repo,read:org'
-        )
-        expect(settings).not_to have_key(:installation_id)
-      end
-
-      it 'removes nil installation_id values' do
-        settings = controller.send(:build_hook_settings, nil)
-        expect(settings.keys).not_to include(:installation_id)
-      end
-    end
-
-    describe '#create_integration_hook' do
-      let(:settings) do
-        {
-          token_type: 'bearer',
-          scope: 'repo,read:org',
-          installation_id: '12345'
-        }
-      end
-
-      before do
-        allow(controller).to receive(:account).and_return(account)
-        allow(controller).to receive(:parsed_body).and_return({
-                                                                'access_token' => 'test_token'
-                                                              })
-      end
-
-      it 'creates integration hook with correct attributes' do
-        hook = controller.send(:create_integration_hook, settings)
-        expect(hook.access_token).to eq('test_token')
-        expect(hook.status).to eq('enabled')
-        expect(hook.app_id).to eq('github')
-        expect(hook.settings).to eq(settings.stringify_keys)
-        expect(hook.account).to eq(account)
-      end
-    end
-
-    describe '#build_oauth_url' do
-      it 'builds OAuth URL with installation context' do
-        with_modified_env FRONTEND_URL: 'http://localhost:3000' do
-          url = controller.send(:build_oauth_url, '12345')
-          expect(url).to include('github?setup_action=install&installation_id=12345')
-          expect(controller.session[:github_installation_id]).to eq('12345')
-        end
-      end
-    end
-
-    describe '#base_url' do
-      it 'returns FRONTEND_URL when set' do
-        with_modified_env FRONTEND_URL: 'https://app.chatwoot.com' do
-          expect(controller.send(:base_url)).to eq('https://app.chatwoot.com')
-        end
-      end
-
-      it 'returns default localhost when FRONTEND_URL not set' do
-        with_modified_env FRONTEND_URL: nil do
-          expect(controller.send(:base_url)).to eq('http://localhost:3000')
-        end
-      end
-    end
-  end
-end
@@ -23,7 +23,7 @@ RSpec.describe Captain::Tools::FirecrawlParserJob, type: :job do
      expect(document).to have_attributes(
        content: payload[:markdown],
        name: payload[:metadata]['title'],
-        external_link: payload[:metadata]['url'],
+        external_link: 'https://www.firecrawl.dev',
        status: 'available'
      )
    end
@@ -32,7 +32,7 @@ RSpec.describe Captain::Tools::FirecrawlParserJob, type: :job do
      existing_document = create(:captain_document,
                                 assistant: assistant,
                                 account: assistant.account,
-                                 external_link: payload[:metadata]['url'],
+                                 external_link: 'https://www.firecrawl.dev',
                                 content: 'old content',
                                 name: 'old title',
                                 status: :in_progress)
@@ -42,7 +42,9 @@ RSpec.describe Captain::Tools::FirecrawlParserJob, type: :job do
      end.not_to change(assistant.documents, :count)

      existing_document.reload
+      # Payload URL ends with '/', but we persist the canonical URL without it.
      expect(existing_document).to have_attributes(
+        external_link: 'https://www.firecrawl.dev',
        content: payload[:markdown],
        name: payload[:metadata]['title'],
        status: 'available'
@@ -3,7 +3,7 @@ require 'rails_helper'
 RSpec.describe Captain::Tools::SimplePageCrawlParserJob, type: :job do
  describe '#perform' do
    let(:assistant) { create(:captain_assistant) }
-    let(:page_link) { 'https://example.com/page' }
+    let(:page_link) { 'https://example.com/page/' }
    let(:page_title) { 'Example Page Title' }
    let(:content) { 'Some page content here' }
    let(:crawler) { instance_double(Captain::Tools::SimplePageCrawlService) }
@@ -24,7 +24,7 @@ RSpec.describe Captain::Tools::SimplePageCrawlParserJob, type: :job do
        end.to change(assistant.documents, :count).by(1)

        document = assistant.documents.last
-        expect(document.external_link).to eq(page_link)
+        expect(document.external_link).to eq('https://example.com/page')
        expect(document.name).to eq(page_title)
        expect(document.content).to eq(content)
        expect(document.status).to eq('available')
@@ -33,7 +33,7 @@ RSpec.describe Captain::Tools::SimplePageCrawlParserJob, type: :job do
      it 'updates existing document if one exists' do
        existing_document = create(:captain_document,
                                   assistant: assistant,
-                                   external_link: page_link,
+                                   external_link: 'https://example.com/page',
                                   name: 'Old Title',
                                   content: 'Old content')

@@ -4,6 +4,17 @@ RSpec.describe Captain::Document, type: :model do
  let(:account) { create(:account) }
  let(:assistant) { create(:captain_assistant, account: account) }

+  describe 'URL normalization' do
+    it 'removes a trailing slash before validation' do
+      document = create(:captain_document,
+                        assistant: assistant,
+                        account: account,
+                        external_link: 'https://example.com/path/')
+
+      expect(document.external_link).to eq('https://example.com/path')
+    end
+  end
+
  describe 'PDF support' do
    let(:pdf_document) do
      doc = build(:captain_document, assistant: assistant, account: account)
@@ -82,4 +93,161 @@ RSpec.describe Captain::Document, type: :model do
      end
    end
  end
+
+  describe 'response builder job callback' do
+    before { clear_enqueued_jobs }
+
+    describe 'non-PDF documents' do
+      it 'enqueues when created with available status and content' do
+        expect do
+          create(:captain_document, assistant: assistant, account: account, status: :available)
+        end.to have_enqueued_job(Captain::Documents::ResponseBuilderJob)
+      end
+
+      it 'does not enqueue when created available without content' do
+        expect do
+          create(:captain_document, assistant: assistant, account: account, status: :available, content: nil)
+        end.not_to have_enqueued_job(Captain::Documents::ResponseBuilderJob)
+      end
+
+      it 'enqueues when status transitions to available with existing content' do
+        document = create(:captain_document, assistant: assistant, account: account, status: :in_progress)
+
+        expect do
+          document.update!(status: :available)
+        end.to have_enqueued_job(Captain::Documents::ResponseBuilderJob)
+      end
+
+      it 'does not enqueue when status transitions to available without content' do
+        document = create(
+          :captain_document,
+          assistant: assistant,
+          account: account,
+          status: :in_progress,
+          content: nil
+        )
+
+        expect do
+          document.update!(status: :available)
+        end.not_to have_enqueued_job(Captain::Documents::ResponseBuilderJob)
+      end
+
+      it 'enqueues when content is populated on an available document' do
+        document = create(
+          :captain_document,
+          assistant: assistant,
+          account: account,
+          status: :available,
+          content: nil
+        )
+        clear_enqueued_jobs
+
+        expect do
+          document.update!(content: 'Fresh content from crawl')
+        end.to have_enqueued_job(Captain::Documents::ResponseBuilderJob)
+      end
+
+      it 'enqueues when content changes on an available document' do
+        document = create(
+          :captain_document,
+          assistant: assistant,
+          account: account,
+          status: :available,
+          content: 'Initial content'
+        )
+        clear_enqueued_jobs
+
+        expect do
+          document.update!(content: 'Updated crawl content')
+        end.to have_enqueued_job(Captain::Documents::ResponseBuilderJob)
+      end
+
+      it 'does not enqueue when content is cleared on an available document' do
+        document = create(
+          :captain_document,
+          assistant: assistant,
+          account: account,
+          status: :available,
+          content: 'Initial content'
+        )
+        clear_enqueued_jobs
+
+        expect do
+          document.update!(content: nil)
+        end.not_to have_enqueued_job(Captain::Documents::ResponseBuilderJob)
+      end
+
+      it 'does not enqueue for metadata-only updates' do
+        document = create(:captain_document, assistant: assistant, account: account, status: :available)
+        clear_enqueued_jobs
+
+        expect do
+          document.update!(metadata: { 'title' => 'Updated Again' })
+        end.not_to have_enqueued_job(Captain::Documents::ResponseBuilderJob)
+      end
+
+      it 'does not enqueue while document remains in progress' do
+        document = create(:captain_document, assistant: assistant, account: account, status: :in_progress)
+
+        expect do
+          document.update!(metadata: { 'title' => 'Updated' })
+        end.not_to have_enqueued_job(Captain::Documents::ResponseBuilderJob)
+      end
+    end
+
+    describe 'PDF documents' do
+      def build_pdf_document(status:, content:)
+        build(
+          :captain_document,
+          assistant: assistant,
+          account: account,
+          status: status,
+          content: content
+        ).tap do |doc|
+          doc.pdf_file.attach(
+            io: StringIO.new('PDF content'),
+            filename: 'sample.pdf',
+            content_type: 'application/pdf'
+          )
+        end
+      end
+
+      it 'enqueues when created available without content' do
+        document = build_pdf_document(status: :available, content: nil)
+
+        expect do
+          document.save!
+        end.to have_enqueued_job(Captain::Documents::ResponseBuilderJob)
+      end
+
+      it 'enqueues when status transitions to available' do
+        document = build_pdf_document(status: :in_progress, content: nil)
+        document.save!
+        clear_enqueued_jobs
+
+        expect do
+          document.update!(status: :available)
+        end.to have_enqueued_job(Captain::Documents::ResponseBuilderJob)
+      end
+
+      it 'does not enqueue when content updates without status change' do
+        document = build_pdf_document(status: :available, content: nil)
+        document.save!
+        clear_enqueued_jobs
+
+        expect do
+          document.update!(content: 'Extracted PDF text')
+        end.not_to have_enqueued_job(Captain::Documents::ResponseBuilderJob)
+      end
+    end
+
+    it 'does not enqueue when the document is destroyed' do
+      document = create(:captain_document, assistant: assistant, account: account, status: :available)
+      clear_enqueued_jobs
+
+      expect do
+        document.destroy!
+      end.not_to have_enqueued_job(Captain::Documents::ResponseBuilderJob)
+    end
+  end
 end
@@ -38,25 +38,6 @@ RSpec.describe Integrations::App do
        end
      end
    end
-
-    context 'when the app is github' do
-      let(:app_name) { 'github' }
-
-      it 'returns the GitHub App installation URL with state parameter' do
-        with_modified_env GITHUB_CLIENT_ID: 'dummy_client_id', GITHUB_APP_NAME: 'test-app' do
-          expect(app.action).to include('https://github.com/apps/test-app/installations/new')
-          expect(app.action).to include('state=')
-        end
-      end
-
-      it 'uses default app name when GITHUB_APP_NAME is not set' do
-        with_modified_env GITHUB_CLIENT_ID: 'dummy_client_id' do
-          allow(GlobalConfigService).to receive(:load).with('GITHUB_CLIENT_ID', nil).and_return('dummy_client_id')
-          allow(GlobalConfigService).to receive(:load).with('GITHUB_APP_NAME', 'chatwoot-qa').and_return('chatwoot-qa')
-          expect(app.action).to include('https://github.com/apps/chatwoot-qa/installations/new')
-        end
-      end
-    end
  end

  describe '#active?' do
@@ -106,34 +87,6 @@ RSpec.describe Integrations::App do
      end
    end

-    context 'when the app is github' do
-      let(:app_name) { 'github' }
-
-      it 'returns false if github credentials are not present' do
-        allow(GlobalConfigService).to receive(:load).with('GITHUB_CLIENT_ID', nil).and_return(nil)
-        allow(GlobalConfigService).to receive(:load).with('GITHUB_CLIENT_SECRET', nil).and_return(nil)
-        expect(app.active?(account)).to be false
-      end
-
-      it 'returns false if only client_id is present' do
-        allow(GlobalConfigService).to receive(:load).with('GITHUB_CLIENT_ID', nil).and_return('client_id')
-        allow(GlobalConfigService).to receive(:load).with('GITHUB_CLIENT_SECRET', nil).and_return(nil)
-        expect(app.active?(account)).to be false
-      end
-
-      it 'returns false if only client_secret is present' do
-        allow(GlobalConfigService).to receive(:load).with('GITHUB_CLIENT_ID', nil).and_return(nil)
-        allow(GlobalConfigService).to receive(:load).with('GITHUB_CLIENT_SECRET', nil).and_return('client_secret')
-        expect(app.active?(account)).to be false
-      end
-
-      it 'returns true if both client_id and client_secret are present' do
-        allow(GlobalConfigService).to receive(:load).with('GITHUB_CLIENT_ID', nil).and_return('client_id')
-        allow(GlobalConfigService).to receive(:load).with('GITHUB_CLIENT_SECRET', nil).and_return('client_secret')
-        expect(app.active?(account)).to be true
-      end
-    end
-
    context 'when other apps are queried' do
      let(:app_name) { 'webhook' }
Author	SHA1	Message	Date
Muhsin	661f3065fc	chore: better data	2025-10-29 23:57:02 +05:30
Muhsin	11fb464501	chore: add dynamic templates	2025-10-29 23:43:05 +05:30
Muhsin	02a4fc9e54	Update TemplatePreviewExamples.story.vue	2025-10-29 21:36:32 +05:30
Muhsin	43395be4d4	chore: add the support for header and footer	2025-10-29 21:06:20 +05:30
Muhsin	7b237372b0	chore: update urls	2025-10-29 20:59:02 +05:30
Muhsin	aba68158bb	chore: update document styles	2025-10-29 20:16:54 +05:30
Muhsin	883d80b144	chore: fix document	2025-10-29 20:09:00 +05:30
Muhsin	43367d57a8	chore: update button styles	2025-10-29 19:50:56 +05:30
Muhsin	250558c2f6	feat: add base components	2025-10-29 19:25:17 +05:30
Sivin Varghese GitHub Muhsin Keloth	a35c3e4c06	feat: Template types components (#12714 ) # Pull Request Template ## Description Fixes https://linear.app/chatwoot/issue/CW-5806/create-the-story-book-components-for-template-typestext-media-list Pending Need to standardize the structure to match the template/campaigns. ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? ### Screenshots <img width="669" height="179" alt="image" src="https://github.com/user-attachments/assets/42efd292-8520-4b05-81ec-8bc526fc12db" /> <img width="646" height="304" alt="image" src="https://github.com/user-attachments/assets/431dd964-006c-4877-a693-dae39b90df4c" /> <img width="646" height="380" alt="image" src="https://github.com/user-attachments/assets/9052e31f-9292-4afb-8897-13931655fa00" /> <img width="646" height="272" alt="image" src="https://github.com/user-attachments/assets/873d2488-e856-4a0d-8579-cc1bcc61cc8e" /> <img width="646" height="490" alt="image" src="https://github.com/user-attachments/assets/14c2aa42-bf27-475f-aa70-fe59c1d00e9b" /> <img width="646" height="281" alt="image" src="https://github.com/user-attachments/assets/1f42408e-03e8-4863-b4c7-715d13d67686" /> ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>	2025-10-29 17:06:32 +05:30
Muhsin KelothandGitHub	344e8d5016	fix: Exclude authentication templates from WhatsApp template selection (#12753 ) This PR add the changes for excluding the authentication templates from the WhatsApp template selection in the frontend, as these templates are not supported at the moment. Reference: https://www.chatwoot.com/hc/user-guide/articles/1754940076-whatsapp-templates#what-is-not-supported	2025-10-29 14:03:43 +05:30
Sivin Varghese GitHub Pranav	3e27e28848	chore: Update captain pending FAQ interface (#12752 ) # Pull Request Template ## Description This PR includes, - Added new pending FAQs view with approve/edit/delete actions for each response. - Implemented banner notification showing pending FAQ count on main approved responses page. - Created dedicated route for pending FAQs review at /captain/responses/pending. - Added automatic pending count updates when switching assistants or routes. - Modified ResponseCard component to show action buttons instead of dropdown in pending view. Fixes https://linear.app/chatwoot/issue/CW-5833/pending-faqs-in-a-different-ux ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? ### Loom video https://www.loom.com/share/5fe8f79b04cd4681b9360c48710b9373 ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Pranav <pranav@chatwoot.com>	2025-10-28 20:47:42 -07:00
Sojan Jose GitHub Pranav	38af08534c	fix: Captain response builder not getting triggered (#12729 ) ## Summary - Fix captain response builder not getting triggered for cases where responses are created as completed. ## Testing Instructions - Test articles with firecrawl - Test articles without firecrawl - Test PDF documents --------- Co-authored-by: Pranav <pranav@chatwoot.com>	2025-10-28 18:31:08 -07:00