Merge branch 'feat/log-captain' of github.com:chatwoot/chatwoot into feat/log-captain

.rubocop.yml

@@ -87,6 +87,7 @@ Metrics/ModuleLength:
 Rails/HelperInstanceVariable:
   Exclude:
     - enterprise/app/helpers/captain/chat_helper.rb
+    - enterprise/app/helpers/captain/loggable.rb
 
 Rails/ApplicationController:
   Exclude:
@@ -336,4 +337,4 @@ FactoryBot/RedundantFactoryOption:
   Enabled: false
 
 FactoryBot/FactoryAssociationWithStrategy:
-  Enabled: false
+  Enabled: false

VERSION_CWCTL

@@ -1 +1 @@
-3.4.2
+3.4.0

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

@@ -26,8 +26,9 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
       @portal.update!(portal_params.merge(live_chat_widget_params)) if params[:portal].present?
       # @portal.custom_domain = parsed_custom_domain
       process_attached_logo if params[:blob_id].present?
-    rescue ActiveRecord::RecordInvalid => e
-      render_record_invalid(e)
+    rescue StandardError => e
+      Rails.logger.error e
+      render json: { error: @portal.errors.messages }.to_json, status: :unprocessable_entity
     end
   end
 
@@ -46,20 +47,6 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
     head :ok
   end
 
-  def send_instructions
-    email = permitted_params[:email]
-    return render_could_not_create_error(I18n.t('portals.send_instructions.email_required')) if email.blank?
-    return render_could_not_create_error(I18n.t('portals.send_instructions.invalid_email_format')) unless valid_email?(email)
-    return render_could_not_create_error(I18n.t('portals.send_instructions.custom_domain_not_configured')) if @portal.custom_domain.blank?
-
-    PortalInstructionsMailer.send_cname_instructions(
-      portal: @portal,
-      recipient_email: email
-    ).deliver_later
-
-    render json: { message: I18n.t('portals.send_instructions.instructions_sent_successfully') }, status: :ok
-  end
-
   def process_attached_logo
     blob_id = params[:blob_id]
     blob = ActiveStorage::Blob.find_by(id: blob_id)
@@ -73,12 +60,12 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
   end
 
   def permitted_params
-    params.permit(:id, :email)
+    params.permit(:id)
   end
 
   def portal_params
     params.require(:portal).permit(
-      :id, :account_id, :color, :custom_domain, :header_text, :homepage_link,
+      :account_id, :color, :custom_domain, :header_text, :homepage_link,
       :name, :page_title, :slug, :archived, { config: [:default_locale, { allowed_locales: [] }] }
     )
   end
@@ -101,10 +88,4 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
     domain = URI.parse(@portal.custom_domain)
     domain.is_a?(URI::HTTP) ? domain.host : @portal.custom_domain
   end
-
-  def valid_email?(email)
-    ValidEmail2::Address.new(email).valid?
-  end
 end
-
-Api::V1::Accounts::PortalsController.prepend_mod_with('Api::V1::Accounts::PortalsController')

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

@@ -1,10 +1,8 @@
 class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts::BaseController
   before_action :validate_feature_enabled!
-  before_action :fetch_and_validate_inbox, if: -> { params[:inbox_id].present? }
 
   # POST /api/v1/accounts/:account_id/whatsapp/authorization
-  # Handles both initial authorization and reauthorization
-  # If inbox_id is present in params, it performs reauthorization
+  # Handles the embedded signup callback data from the Facebook SDK
   def create
     validate_embedded_signup_params!
     channel = process_embedded_signup
@@ -18,42 +16,21 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
   def process_embedded_signup
     service = Whatsapp::EmbeddedSignupService.new(
       account: Current.account,
-      params: params.permit(:code, :business_id, :waba_id, :phone_number_id).to_h.symbolize_keys,
-      inbox_id: params[:inbox_id]
+      code: params[:code],
+      business_id: params[:business_id],
+      waba_id: params[:waba_id],
+      phone_number_id: params[:phone_number_id]
     )
     service.perform
   end
 
-  def fetch_and_validate_inbox
-    @inbox = Current.account.inboxes.find(params[:inbox_id])
-    validate_reauthorization_required
-  end
-
-  def validate_reauthorization_required
-    return if @inbox.channel.reauthorization_required? || can_upgrade_to_embedded_signup?
-
-    render json: {
-      success: false,
-      message: I18n.t('inbox.reauthorization.not_required')
-    }, status: :unprocessable_entity
-  end
-
-  def can_upgrade_to_embedded_signup?
-    channel = @inbox.channel
-    return false unless channel.provider == 'whatsapp_cloud'
-
-    true
-  end
-
   def render_success_response(inbox)
-    response = {
+    render json: {
       success: true,
       id: inbox.id,
       name: inbox.name,
       channel_type: 'whatsapp'
     }
-    response[:message] = I18n.t('inbox.reauthorization.success') if params[:inbox_id].present?
-    render json: response
   end
 
   def render_error_response(error)

app/controllers/platform/api/v1/accounts_controller.rb

@@ -1,11 +1,4 @@
 class Platform::Api::V1::AccountsController < PlatformController
-  def index
-    @resources = @platform_app.platform_app_permissibles
-                              .where(permissible_type: 'Account')
-                              .includes(:permissible)
-                              .map(&:permissible)
-  end
-
   def show; end
 
   def create

app/controllers/twilio/callback_controller.rb

@@ -30,8 +30,7 @@ class Twilio::CallbackController < ApplicationController
       :NumMedia,
       :Latitude,
       :Longitude,
-      :MessageType,
-      :ProfileName
+      :MessageType
     )
   end
 end

app/finders/notification_finder.rb

@@ -15,13 +15,7 @@ class NotificationFinder
   end
 
   def unread_count
-    if type_included?('read')
-      # If we're including read notifications, filter to unread
-      @notifications.where(read_at: nil).count
-    else
-      # Already filtered to unread notifications, just count
-      @notifications.count
-    end
+    @notifications.where(read_at: nil).count
   end
 
   def count
@@ -33,7 +27,7 @@ class NotificationFinder
   def set_up
     find_all_notifications
     filter_snoozed_notifications
-    filter_read_notifications
+    fitler_read_notifications
   end
 
   def find_all_notifications
@@ -44,7 +38,7 @@ class NotificationFinder
     @notifications = @notifications.where(snoozed_until: nil) unless type_included?('snoozed')
   end
 
-  def filter_read_notifications
+  def fitler_read_notifications
     @notifications = @notifications.where(read_at: nil) unless type_included?('read')
   end
 

app/javascript/dashboard/App.vue

@@ -136,7 +136,8 @@ export default {
   <div
     v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
     id="app"
-    class="flex flex-col w-full h-screen min-h-0"
+    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
+    :class="{ 'app-rtl--wrapper': isRTL }"
     :dir="isRTL ? 'rtl' : 'ltr'"
   >
     <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />

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

@@ -1,36 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class CaptainScenarios extends ApiClient {
-  constructor() {
-    super('captain/assistants', { accountScoped: true });
-  }
-
-  get({ assistantId, page = 1, searchKey } = {}) {
-    return axios.get(`${this.url}/${assistantId}/scenarios`, {
-      params: { page, searchKey },
-    });
-  }
-
-  show({ assistantId, id }) {
-    return axios.get(`${this.url}/${assistantId}/scenarios/${id}`);
-  }
-
-  create({ assistantId, ...data } = {}) {
-    return axios.post(`${this.url}/${assistantId}/scenarios`, {
-      scenario: data,
-    });
-  }
-
-  update({ assistantId, id }, data = {}) {
-    return axios.put(`${this.url}/${assistantId}/scenarios/${id}`, {
-      scenario: data,
-    });
-  }
-
-  delete({ assistantId, id }) {
-    return axios.delete(`${this.url}/${assistantId}/scenarios/${id}`);
-  }
-}
-
-export default new CaptainScenarios();

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

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

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

@@ -9,13 +9,6 @@ class WhatsappChannel extends ApiClient {
   createEmbeddedSignup(params) {
     return axios.post(`${this.baseUrl()}/whatsapp/authorization`, params);
   }
-
-  reauthorizeWhatsApp({ inboxId, ...params }) {
-    return axios.post(`${this.baseUrl()}/whatsapp/authorization`, {
-      ...params,
-      inbox_id: inboxId,
-    });
-  }
 }
 
 export default new WhatsappChannel();

app/javascript/dashboard/api/helpCenter/portals.js

@@ -21,14 +21,6 @@ class PortalsAPI extends ApiClient {
   deleteLogo(portalSlug) {
     return axios.delete(`${this.url}/${portalSlug}/logo`);
   }
-
-  sendCnameInstructions(portalSlug, email) {
-    return axios.post(`${this.url}/${portalSlug}/send_instructions`, { email });
-  }
-
-  sslStatus(portalSlug) {
-    return axios.get(`${this.url}/${portalSlug}/ssl_status`);
-  }
 }
 
 export default PortalsAPI;

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

@@ -37,6 +37,30 @@ body {
   width: 100%;
 }
 
+.app-wrapper {
+  @apply h-screen flex-grow-0 min-h-0 w-full;
+
+  .button--fixed-top {
+    @apply fixed ltr:right-2 rtl:left-2 top-2 flex flex-row;
+  }
+}
+
+.banner + .app-wrapper {
+  // Reduce the height of the dashboard to make room for the banner.
+  // And causing the top right green-action button to be pushed down when scrolling.
+  @apply h-[calc(100%-48px)];
+
+  .button--fixed-top {
+    @apply top-14;
+  }
+
+  .off-canvas-content {
+    .button--fixed-top {
+      @apply top-2;
+    }
+  }
+}
+
 .tooltip {
   @apply bg-n-solid-2 text-n-slate-12 py-1 px-2 z-40 text-xs rounded-md max-w-96;
 }

app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue

@@ -76,8 +76,8 @@ const campaignStatus = computed(() => {
 const inboxName = computed(() => props.inbox?.name || '');
 
 const inboxIcon = computed(() => {
-  const { medium, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, medium);
+  const { phone_number: phoneNumber, channel_type: type } = props.inbox;
+  return getInboxIconByType(type, phoneNumber);
 });
 </script>
 

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignDialog.vue

@@ -38,13 +38,11 @@ const handleClose = () => emit('close');
 
 <template>
   <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] rounded-xl border border-n-weak shadow-md max-h-[80vh] overflow-y-auto"
+    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6"
   >
-    <div class="p-6 flex flex-col gap-6">
-      <h3 class="text-base font-medium text-n-slate-12 flex-shrink-0">
-        {{ t(`CAMPAIGN.WHATSAPP.CREATE.TITLE`) }}
-      </h3>
-      <WhatsAppCampaignForm @submit="handleSubmit" @cancel="handleClose" />
-    </div>
+    <h3 class="text-base font-medium text-n-slate-12">
+      {{ t(`CAMPAIGN.WHATSAPP.CREATE.TITLE`) }}
+    </h3>
+    <WhatsAppCampaignForm @submit="handleSubmit" @cancel="handleClose" />
   </div>
 </template>

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue

@@ -9,7 +9,6 @@ import Input from 'dashboard/components-next/input/Input.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 import TagMultiSelectComboBox from 'dashboard/components-next/combobox/TagMultiSelectComboBox.vue';
-import WhatsAppTemplateParser from 'dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue';
 
 const emit = defineEmits(['submit', 'cancel']);
 
@@ -19,9 +18,7 @@ const formState = {
   uiFlags: useMapGetter('campaigns/getUIFlags'),
   labels: useMapGetter('labels/getLabels'),
   inboxes: useMapGetter('inboxes/getWhatsAppInboxes'),
-  getFilteredWhatsAppTemplates: useMapGetter(
-    'inboxes/getFilteredWhatsAppTemplates'
-  ),
+  getWhatsAppTemplates: useMapGetter('inboxes/getWhatsAppTemplates'),
 };
 
 const initialState = {
@@ -33,7 +30,7 @@ const initialState = {
 };
 
 const state = reactive({ ...initialState });
-const templateParserRef = ref(null);
+const processedParams = ref({});
 
 const rules = {
   title: { required, minLength: minLength(1) },
@@ -70,7 +67,7 @@ const inboxOptions = computed(() =>
 
 const templateOptions = computed(() => {
   if (!state.inboxId) return [];
-  const templates = formState.getFilteredWhatsAppTemplates.value(state.inboxId);
+  const templates = formState.getWhatsAppTemplates.value(state.inboxId);
   return templates.map(template => {
     // Create a more user-friendly label from template name
     const friendlyName = template.name
@@ -91,6 +88,26 @@ const selectedTemplate = computed(() => {
     ?.template;
 });
 
+const templateString = computed(() => {
+  if (!selectedTemplate.value) return '';
+  try {
+    return (
+      selectedTemplate.value.components?.find(
+        component => component.type === 'BODY'
+      )?.text || ''
+    );
+  } catch (error) {
+    return '';
+  }
+});
+
+const processedString = computed(() => {
+  if (!templateString.value) return '';
+  return templateString.value.replace(/{{([^}]+)}}/g, (match, variable) => {
+    return processedParams.value[variable] || `{{${variable}}}`;
+  });
+});
+
 const getErrorMessage = (field, errorKey) => {
   const baseKey = 'CAMPAIGN.WHATSAPP.CREATE.FORM';
   return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
@@ -105,7 +122,8 @@ const formErrors = computed(() => ({
 }));
 
 const hasRequiredTemplateParams = computed(() => {
-  return templateParserRef.value?.v$?.$invalid === false || true;
+  const params = Object.values(processedParams.value);
+  return params.length === 0 || params.every(param => param.trim() !== '');
 });
 
 const isSubmitDisabled = computed(
@@ -117,18 +135,32 @@ const formatToUTCString = localDateTime =>
 
 const resetState = () => {
   Object.assign(state, initialState);
+  processedParams.value = {};
   v$.value.$reset();
 };
 
 const handleCancel = () => emit('cancel');
 
+const generateVariables = () => {
+  const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
+  if (!matchedVariables) {
+    processedParams.value = {};
+    return;
+  }
+
+  const finalVars = matchedVariables.map(match => match.replace(/{{|}}/g, ''));
+  processedParams.value = finalVars.reduce((acc, variable) => {
+    acc[variable] = processedParams.value[variable] || '';
+    return acc;
+  }, {});
+};
+
 const prepareCampaignDetails = () => {
   // Find the selected template to get its content
   const currentTemplate = selectedTemplate.value;
-  const parserData = templateParserRef.value;
 
   // Extract template content - this should be the template message body
-  const templateContent = parserData?.renderedTemplate || '';
+  const templateContent = templateString.value;
 
   // Prepare template_params object with the same structure as used in contacts
   const templateParams = {
@@ -136,7 +168,7 @@ const prepareCampaignDetails = () => {
     namespace: currentTemplate?.namespace || '',
     category: currentTemplate?.category || 'UTILITY',
     language: currentTemplate?.language || 'en_US',
-    processed_params: parserData?.processedParams || {},
+    processed_params: processedParams.value,
   };
 
   return {
@@ -166,6 +198,15 @@ watch(
   () => state.inboxId,
   () => {
     state.templateId = null;
+    processedParams.value = {};
+  }
+);
+
+// Generate variables when template changes
+watch(
+  () => state.templateId,
+  () => {
+    generateVariables();
   }
 );
 </script>
@@ -213,12 +254,62 @@ watch(
       </p>
     </div>
 
-    <!-- Template Parser -->
-    <WhatsAppTemplateParser
+    <!-- Template Preview -->
+    <div
       v-if="selectedTemplate"
-      ref="templateParserRef"
-      :template="selectedTemplate"
-    />
+      class="flex flex-col gap-4 p-4 rounded-lg bg-n-alpha-black2"
+    >
+      <div class="flex justify-between items-center">
+        <h3 class="text-sm font-medium text-n-slate-12">
+          {{ selectedTemplate.name }}
+        </h3>
+        <span class="text-xs text-n-slate-11">
+          {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.LANGUAGE') }}:
+          {{ selectedTemplate.language || 'en' }}
+        </span>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <div class="rounded-md bg-n-alpha-black3">
+          <div class="text-sm whitespace-pre-wrap text-n-slate-12">
+            {{ processedString }}
+          </div>
+        </div>
+      </div>
+
+      <div class="text-xs text-n-slate-11">
+        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.CATEGORY') }}:
+        {{ selectedTemplate.category || 'UTILITY' }}
+      </div>
+    </div>
+
+    <!-- Template Variables -->
+    <div
+      v-if="Object.keys(processedParams).length > 0"
+      class="flex flex-col gap-3"
+    >
+      <label class="text-sm font-medium text-n-slate-12">
+        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.VARIABLES_LABEL') }}
+      </label>
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="(value, key) in processedParams"
+          :key="key"
+          class="flex gap-2 items-center"
+        >
+          <Input
+            v-model="processedParams[key]"
+            type="text"
+            class="flex-1"
+            :placeholder="
+              t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.VARIABLE_PLACEHOLDER', {
+                variable: key,
+              })
+            "
+          />
+        </div>
+      </div>
+    </div>
 
     <div class="flex flex-col gap-1">
       <label for="audience" class="mb-0.5 text-sm font-medium text-n-slate-12">

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

@@ -98,7 +98,6 @@ const onClickViewDetails = () => emit('showContact', props.id);
         :src="thumbnail"
         :size="48"
         :status="availabilityStatus"
-        hide-offline-status
         rounded-full
       />
       <div class="flex flex-col gap-0.5 flex-1">

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

@@ -48,8 +48,8 @@ const inbox = computed(() => props.stateInbox);
 const inboxName = computed(() => inbox.value?.name);
 
 const inboxIcon = computed(() => {
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+  const { phoneNumber, channelType } = inbox.value;
+  return getInboxIconByType(channelType, phoneNumber);
 });
 
 const lastActivityAt = computed(() => {

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

@@ -20,7 +20,6 @@ const props = defineProps({
   enableVariables: { type: Boolean, default: false },
   enableCannedResponses: { type: Boolean, default: true },
   enabledMenuOptions: { type: Array, default: () => [] },
-  enableCaptainTools: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -99,7 +98,6 @@ watch(
         :enable-variables="enableVariables"
         :enable-canned-responses="enableCannedResponses"
         :enabled-menu-options="enabledMenuOptions"
-        :enable-captain-tools="enableCaptainTools"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"

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

@@ -1,9 +1,6 @@
 <script setup>
 import { ref, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useVuelidate } from '@vuelidate/core';
-import { helpers } from '@vuelidate/validators';
-import { isValidDomain } from '@chatwoot/utils';
 
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
@@ -29,20 +26,6 @@ const formState = reactive({
   customDomain: props.customDomain,
 });
 
-const rules = {
-  customDomain: {
-    isValidDomain: helpers.withMessage(
-      () =>
-        t(
-          'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.FORMAT_ERROR'
-        ),
-      isValidDomain
-    ),
-  },
-};
-
-const v$ = useVuelidate(rules, formState);
-
 watch(
   () => props.customDomain,
   newVal => {
@@ -50,10 +33,7 @@ watch(
   }
 );
 
-const handleDialogConfirm = async () => {
-  const isFormCorrect = await v$.value.$validate();
-  if (!isFormCorrect) return;
-
+const handleDialogConfirm = () => {
   emit('addCustomDomain', formState.customDomain);
 };
 
@@ -87,11 +67,6 @@ defineExpose({ dialogRef });
           'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.PLACEHOLDER'
         )
       "
-      :message="
-        v$.customDomain.$error ? v$.customDomain.$errors[0].$message : ''
-      "
-      :message-type="v$.customDomain.$error ? 'error' : 'info'"
-      @blur="v$.customDomain.$touch()"
     />
   </Dialog>
 </template>

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

@@ -1,15 +1,9 @@
 <script setup>
-import { reactive, computed, ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useAlert } from 'dashboard/composables';
-import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { getHostNameFromURL } from 'dashboard/helper/URLHelper';
-import { email, required } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
 
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   customDomain: {
@@ -18,20 +12,10 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['send', 'close']);
+const emit = defineEmits(['confirm']);
 
 const { t } = useI18n();
 
-const state = reactive({
-  email: '',
-});
-
-const validationRules = {
-  email: { email, required },
-};
-
-const v$ = useVuelidate(validationRules, state);
-
 const domain = computed(() => {
   const { hostURL, helpCenterURL } = window?.chatwootConfig || {};
   return getHostNameFromURL(helpCenterURL) || getHostNameFromURL(hostURL) || '';
@@ -41,34 +25,10 @@ const subdomainCNAME = computed(
   () => `${props.customDomain} CNAME ${domain.value}`
 );
 
-const handleCopy = async e => {
-  e.stopPropagation();
-  await copyTextToClipboard(subdomainCNAME.value);
-  useAlert(
-    t(
-      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.COPY'
-    )
-  );
-};
-
 const dialogRef = ref(null);
 
-const resetForm = () => {
-  v$.value.$reset();
-  state.email = '';
-};
-
-const onClose = () => {
-  resetForm();
-  emit('close');
-};
-
-const handleSend = async () => {
-  const isFormCorrect = await v$.value.$validate();
-  if (!isFormCorrect) return;
-
-  emit('send', state.email);
-  onClose();
+const handleDialogConfirm = () => {
+  emit('confirm');
 };
 
 defineExpose({ dialogRef });
@@ -77,103 +37,42 @@ defineExpose({ dialogRef });
 <template>
   <Dialog
     ref="dialogRef"
+    :title="
+      t(
+        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HEADER'
+      )
+    "
+    :confirm-button-label="
+      t(
+        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.CONFIRM_BUTTON_LABEL'
+      )
+    "
     :show-cancel-button="false"
-    :show-confirm-button="false"
-    @close="resetForm"
+    @confirm="handleDialogConfirm"
   >
-    <NextButton
-      icon="i-lucide-x"
-      sm
-      ghost
-      slate
-      class="flex-shrink-0 absolute top-2 ltr:right-2 rtl:left-2"
-      @click="onClose"
-    />
-    <div class="flex flex-col gap-6 divide-y divide-n-strong">
-      <div class="flex flex-col gap-6">
-        <div class="flex flex-col gap-2 ltr:pr-10 rtl:pl-10">
-          <h3 class="text-base font-medium leading-6 text-n-slate-12">
-            {{
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HEADER'
-              )
-            }}
-          </h3>
-          <p class="mb-0 text-sm text-n-slate-12">
-            {{
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.DESCRIPTION'
-              )
-            }}
-          </p>
-        </div>
-        <div class="flex items-center gap-3 w-full">
-          <span
-            class="min-h-10 px-3 py-2.5 inline-flex items-center w-full text-sm bg-transparent border rounded-lg text-n-slate-11 border-n-strong"
-          >
-            {{ subdomainCNAME }}
-          </span>
-          <NextButton
-            faded
-            slate
-            type="button"
-            icon="i-lucide-copy"
-            class="flex-shrink-0"
-            @click="handleCopy"
-          />
-        </div>
-      </div>
+    <template #description>
+      <p class="mb-0 text-sm text-n-slate-12">
+        {{
+          t(
+            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.DESCRIPTION'
+          )
+        }}
+      </p>
+    </template>
 
-      <div class="flex flex-col gap-6 pt-6">
-        <div class="flex flex-col gap-2 ltr:pr-10 rtl:pl-10">
-          <h3 class="text-base font-medium leading-6 text-n-slate-12">
-            {{
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.HEADER'
-              )
-            }}
-          </h3>
-          <p class="mb-0 text-sm text-n-slate-12">
-            {{
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.DESCRIPTION'
-              )
-            }}
-          </p>
-        </div>
-        <form
-          class="flex items-start gap-3 w-full"
-          @submit.prevent="handleSend"
-        >
-          <Input
-            v-model="state.email"
-            :placeholder="
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.PLACEHOLDER'
-              )
-            "
-            :message="
-              v$.email.$error
-                ? t(
-                    'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.ERROR'
-                  )
-                : ''
-            "
-            :message-type="v$.email.$error ? 'error' : 'info'"
-            class="w-full"
-            @blur="v$.email.$touch()"
-          />
-          <NextButton
-            :label="
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.SEND_BUTTON'
-              )
-            "
-            type="submit"
-            class="flex-shrink-0"
-          />
-        </form>
-      </div>
+    <div class="flex flex-col gap-6">
+      <span
+        class="h-10 px-3 py-2.5 text-sm select-none bg-transparent border rounded-lg text-n-slate-11 border-n-strong"
+      >
+        {{ subdomainCNAME }}
+      </span>
+      <p class="text-sm text-n-slate-12">
+        {{
+          t(
+            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HELP_TEXT'
+          )
+        }}
+      </p>
     </div>
   </Dialog>
 </template>

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

@@ -7,8 +7,8 @@ import { useStore, useStoreGetters } from 'dashboard/composables/store';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { useVuelidate } from '@vuelidate/core';
-import { required, minLength, helpers, url } from '@vuelidate/validators';
-import { isValidSlug } from 'shared/helpers/Validators';
+import { required, minLength, helpers } from '@vuelidate/validators';
+import { shouldBeUrl, isValidSlug } from 'shared/helpers/Validators';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
@@ -71,7 +71,7 @@ const rules = {
       isValidSlug
     ),
   },
-  homePageLink: { url },
+  homePageLink: { shouldBeUrl },
 };
 
 const v$ = useVuelidate(rules, state);
@@ -315,9 +315,7 @@ const handleAvatarDelete = () => {
           class="[&>div>button:not(.focused)]:!outline-n-weak"
         />
       </div>
-      <div
-        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
-      >
+      <div class="flex items-start justify-between w-full gap-2">
         <label
           class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
         >

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

@@ -1,7 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useAccount } from 'dashboard/composables/useAccount';
 
 import AddCustomDomainDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue';
 import DNSConfigurationDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue';
@@ -12,52 +11,11 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-  isFetchingStatus: {
-    type: Boolean,
-    required: true,
-  },
 });
 
-const emit = defineEmits([
-  'updatePortalConfiguration',
-  'refreshStatus',
-  'sendCnameInstructions',
-]);
-
-const SSL_STATUS = {
-  LIVE: ['active', 'staging_active'],
-  PENDING: [
-    'provisioned',
-    'pending',
-    'initializing',
-    'pending_validation',
-    'pending_deployment',
-    'pending_issuance',
-    'holding_deployment',
-    'holding_validation',
-    'pending_expiration',
-    'pending_cleanup',
-    'pending_deletion',
-    'staging_deployment',
-    'backup_issued',
-  ],
-  ERROR: [
-    'blocked',
-    'inactive',
-    'moved',
-    'expired',
-    'deleted',
-    'timed_out_initializing',
-    'timed_out_validation',
-    'timed_out_issuance',
-    'timed_out_deployment',
-    'timed_out_deletion',
-    'deactivating',
-  ],
-};
+const emit = defineEmits(['updatePortalConfiguration']);
 
 const { t } = useI18n();
-const { isOnChatwootCloud } = useAccount();
 
 const addCustomDomainDialogRef = ref(null);
 const dnsConfigurationDialogRef = ref(null);
@@ -67,45 +25,6 @@ const customDomainAddress = computed(
   () => props.activePortal?.custom_domain || ''
 );
 
-const sslSettings = computed(() => props.activePortal?.ssl_settings || {});
-const verificationErrors = computed(
-  () => sslSettings.value.verification_errors || ''
-);
-
-const isLive = computed(() =>
-  SSL_STATUS.LIVE.includes(sslSettings.value.status)
-);
-const isPending = computed(() =>
-  SSL_STATUS.PENDING.includes(sslSettings.value.status)
-);
-const isError = computed(() =>
-  SSL_STATUS.ERROR.includes(sslSettings.value.status)
-);
-
-const statusText = computed(() => {
-  if (isLive.value)
-    return t(
-      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.LIVE'
-    );
-  if (isPending.value)
-    return t(
-      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.PENDING'
-    );
-  if (isError.value)
-    return t(
-      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.ERROR'
-    );
-  return '';
-});
-
-const statusColors = computed(() => {
-  if (isLive.value)
-    return { text: 'text-n-teal-11', bubble: 'outline-n-teal-6 bg-n-teal-9' };
-  if (isError.value)
-    return { text: 'text-n-ruby-11', bubble: 'outline-n-ruby-6 bg-n-ruby-9' };
-  return { text: 'text-n-amber-11', bubble: 'outline-n-amber-6 bg-n-amber-9' };
-});
-
 const updatePortalConfiguration = customDomain => {
   const portal = {
     id: props.activePortal?.id,
@@ -123,17 +42,6 @@ const closeDNSConfigurationDialog = () => {
   updatedDomainAddress.value = '';
   dnsConfigurationDialogRef.value.dialogRef.close();
 };
-
-const onClickRefreshSSLStatus = () => {
-  emit('refreshStatus');
-};
-
-const onClickSend = email => {
-  emit('sendCnameInstructions', {
-    portalSlug: props.activePortal?.slug,
-    email,
-  });
-};
 </script>
 
 <template>
@@ -155,76 +63,33 @@ const onClickSend = email => {
       </span>
     </div>
     <div class="flex flex-col w-full gap-4">
-      <div class="flex items-center justify-between w-full gap-2">
-        <div v-if="customDomainAddress" class="flex flex-col gap-1">
-          <div class="flex items-center w-full h-8 gap-4">
-            <label class="text-sm font-medium text-n-slate-12">
-              {{
-                t(
-                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.LABEL'
-                )
-              }}
-            </label>
-            <span class="text-sm text-n-slate-12">
-              {{ customDomainAddress }}
-            </span>
-          </div>
-          <span
-            v-if="!isLive && isOnChatwootCloud"
-            class="text-sm text-n-slate-11"
-          >
+      <div class="flex justify-between w-full gap-2">
+        <div
+          v-if="customDomainAddress"
+          class="flex items-center w-full h-8 gap-4"
+        >
+          <label class="text-sm font-medium text-n-slate-12">
             {{
               t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS_DESCRIPTION'
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.LABEL'
               )
             }}
+          </label>
+          <span class="text-sm text-n-slate-12">
+            {{ customDomainAddress }}
           </span>
         </div>
-        <div class="flex items-center">
-          <div v-if="customDomainAddress" class="flex items-center gap-3">
-            <div
-              v-if="statusText && isOnChatwootCloud"
-              v-tooltip="verificationErrors"
-              class="flex items-center gap-3 flex-shrink-0"
-            >
-              <span
-                class="size-1.5 rounded-full outline outline-2 block flex-shrink-0"
-                :class="statusColors.bubble"
-              />
-              <span
-                :class="statusColors.text"
-                class="text-sm leading-[16px] font-medium"
-              >
-                {{ statusText }}
-              </span>
-            </div>
-            <div
-              v-if="statusText && isOnChatwootCloud"
-              class="w-px h-3 bg-n-weak"
-            />
-            <Button
-              slate
-              sm
-              link
-              :label="
-                t(
-                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.EDIT_BUTTON'
-                )
-              "
-              class="hover:!no-underline flex-shrink-0"
-              @click="addCustomDomainDialogRef.dialogRef.open()"
-            />
-            <div v-if="isOnChatwootCloud" class="w-px h-3 bg-n-weak" />
-            <Button
-              v-if="isOnChatwootCloud"
-              slate
-              sm
-              link
-              icon="i-lucide-refresh-ccw"
-              :class="isFetchingStatus && 'animate-spin'"
-              @click="onClickRefreshSSLStatus"
-            />
-          </div>
+        <div class="flex items-center justify-end w-full">
+          <Button
+            v-if="customDomainAddress"
+            color="slate"
+            :label="
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.EDIT_BUTTON'
+              )
+            "
+            @click="addCustomDomainDialogRef.dialogRef.open()"
+          />
           <Button
             v-else
             :label="
@@ -247,8 +112,7 @@ const onClickSend = email => {
     <DNSConfigurationDialog
       ref="dnsConfigurationDialogRef"
       :custom-domain="updatedDomainAddress || customDomainAddress"
-      @close="closeDNSConfigurationDialog"
-      @send="onClickSend"
+      @confirm="closeDNSConfigurationDialog"
     />
   </div>
 </template>

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

@@ -26,8 +26,6 @@ const emit = defineEmits([
   'updatePortal',
   'updatePortalConfiguration',
   'deletePortal',
-  'refreshStatus',
-  'sendCnameInstructions',
 ]);
 
 const { t } = useI18n();
@@ -38,7 +36,6 @@ const confirmDeletePortalDialogRef = ref(null);
 const currentPortalSlug = computed(() => route.params.portalSlug);
 
 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
-const isFetchingSSLStatus = useMapGetter('portals/isFetchingSSLStatus');
 
 const activePortal = computed(() => {
   return props.portals?.find(portal => portal.slug === currentPortalSlug.value);
@@ -56,14 +53,6 @@ const handleUpdatePortalConfiguration = portal => {
   emit('updatePortalConfiguration', portal);
 };
 
-const fetchSSLStatus = () => {
-  emit('refreshStatus');
-};
-
-const handleSendCnameInstructions = payload => {
-  emit('sendCnameInstructions', payload);
-};
-
 const openConfirmDeletePortalDialog = () => {
   confirmDeletePortalDialogRef.value.dialogRef.open();
 };
@@ -96,10 +85,7 @@ const handleDeletePortal = () => {
         <PortalConfigurationSettings
           :active-portal="activePortal"
           :is-fetching="isFetching"
-          :is-fetching-status="isFetchingSSLStatus"
           @update-portal-configuration="handleUpdatePortalConfiguration"
-          @refresh-status="fetchSSLStatus"
-          @send-cname-instructions="handleSendCnameInstructions"
         />
         <div class="w-full h-px bg-n-weak" />
         <div class="flex items-end justify-between w-full gap-4">

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

@@ -49,8 +49,8 @@ const isUnread = computed(() => !props.inboxItem?.readAt);
 const inbox = computed(() => props.stateInbox);
 
 const inboxIcon = computed(() => {
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+  const { phoneNumber, channelType } = inbox.value;
+  return getInboxIconByType(channelType, phoneNumber);
 });
 
 const hasSlaThreshold = computed(() => {
@@ -63,12 +63,11 @@ const lastActivityAt = computed(() => {
 });
 
 const menuItems = computed(() => [
+  { key: 'delete', label: t('INBOX.MENU_ITEM.DELETE') },
   {
     key: isUnread.value ? 'mark_as_read' : 'mark_as_unread',
-    icon: isUnread.value ? 'mail' : 'mail-unread',
     label: t(`INBOX.MENU_ITEM.MARK_AS_${isUnread.value ? 'READ' : 'UNREAD'}`),
   },
-  { key: 'delete', icon: 'delete', label: t('INBOX.MENU_ITEM.DELETE') },
 ]);
 
 const messageClasses = computed(() => ({
@@ -154,7 +153,7 @@ onBeforeMount(contextMenuActions.close);
 <template>
   <div
     role="button"
-    class="flex flex-col w-full gap-1 p-3 transition-all duration-300 ease-in-out cursor-pointer"
+    class="flex flex-col w-full gap-2 p-3 transition-all duration-300 ease-in-out cursor-pointer"
     @contextmenu="contextMenuActions.open($event)"
     @click="emit('click')"
   >
@@ -233,7 +232,7 @@ onBeforeMount(contextMenuActions.close);
             class="flex-shrink-0 text-n-slate-11 size-2.5"
           />
         </div>
-        <span class="text-xs text-n-slate-10">
+        <span class="text-sm text-n-slate-10">
           {{ lastActivityAt }}
         </span>
       </div>

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

@@ -2,7 +2,6 @@
 import { ref, computed, onMounted, watch } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
-import { useWindowSize } from '@vueuse/core';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { vOnClickOutside } from '@vueuse/components';
 import { useAlert } from 'dashboard/composables';
@@ -16,7 +15,6 @@ import {
   processContactableInboxes,
   mergeInboxDetails,
 } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
-import wootConstants from 'dashboard/constants/globals';
 
 import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
 
@@ -39,16 +37,9 @@ const emit = defineEmits(['close']);
 
 const store = useStore();
 const { t } = useI18n();
-const { width: windowWidth } = useWindowSize();
 
 const { fetchSignatureFlagFromUISettings } = useUISettings();
 
-const isSmallScreen = computed(
-  () => windowWidth.value < wootConstants.SMALL_SCREEN_BREAKPOINT
-);
-
-const viewInModal = computed(() => props.isModal || isSmallScreen.value);
-
 const contacts = ref([]);
 const selectedContact = ref(null);
 const targetInbox = ref(null);
@@ -76,7 +67,7 @@ const directUploadsEnabled = computed(
 const activeContact = computed(() => contactById.value(props.contactId));
 
 const composePopoverClass = computed(() => {
-  if (viewInModal.value) return '';
+  if (props.isModal) return '';
 
   return props.alignPosition === 'right'
     ? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]'
@@ -211,7 +202,7 @@ const handleClickOutside = () => {
 };
 
 const onModalBackdropClick = () => {
-  if (!viewInModal.value) return;
+  if (!props.isModal) return;
   handleClickOutside();
 };
 
@@ -240,7 +231,7 @@ useKeyboardEvents(keyboardEvents);
     ]"
     class="relative"
     :class="{
-      'z-50': showComposeNewConversation && !viewInModal,
+      'z-40': showComposeNewConversation,
     }"
   >
     <slot
@@ -252,12 +243,12 @@ useKeyboardEvents(keyboardEvents);
       v-if="showComposeNewConversation"
       :class="{
         'fixed z-50 bg-n-alpha-black1 backdrop-blur-[4px] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center inset-0':
-          viewInModal,
+          isModal,
       }"
       @click.self="onModalBackdropClick"
     >
       <ComposeNewConversationForm
-        :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
+        :class="[{ 'mt-2': !isModal }, composePopoverClass]"
         :contacts="contacts"
         :contact-id="contactId"
         :is-loading="isSearching"

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

@@ -25,7 +25,6 @@ const props = defineProps({
   hasNoInbox: { type: Boolean, default: false },
   isDropdownActive: { type: Boolean, default: false },
   messageSignature: { type: String, default: '' },
-  inboxId: { type: Number, default: null },
 });
 
 const emit = defineEmits([
@@ -151,10 +150,9 @@ useKeyboardEvents(keyboardEvents);
   <div
     class="flex items-center justify-between w-full h-[3.25rem] gap-2 px-4 py-3"
   >
-    <div class="flex gap-2 items-center">
+    <div class="flex items-center gap-2">
       <WhatsAppOptions
         v-if="isWhatsappInbox"
-        :inbox-id="inboxId"
         :message-templates="messageTemplates"
         @send-message="emit('sendWhatsappMessage', $event)"
       />
@@ -172,7 +170,7 @@ useKeyboardEvents(keyboardEvents);
         />
         <EmojiInput
           v-if="isEmojiPickerOpen"
-          class="ltr:left-0 rtl:right-0 top-full mt-1.5"
+          class="left-0 top-full mt-1.5"
           :on-click="onClickInsertEmoji"
         />
       </div>
@@ -208,7 +206,7 @@ useKeyboardEvents(keyboardEvents);
       />
     </div>
 
-    <div class="flex gap-2 items-center">
+    <div class="flex items-center gap-2">
       <Button
         :label="t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.DISCARD')"
         variant="faded"

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

@@ -57,7 +57,7 @@ const removeAttachment = id => {
           variant="ghost"
           icon="i-lucide-trash"
           color="slate"
-          class="absolute top-1 ltr:right-1 rtl:left-1 !w-5 !h-5 transition-opacity duration-150 ease-in-out opacity-0 group-hover/image:opacity-100"
+          class="absolute top-1 right-1 !w-5 !h-5 transition-opacity duration-150 ease-in-out opacity-0 group-hover/image:opacity-100"
           @click="removeAttachment(attachment.resource.id)"
         />
       </div>

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

@@ -336,7 +336,6 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
       :is-loading="isCreating"
       :disable-send-button="isCreating"
       :has-selected-inbox="!!targetInbox"
-      :inbox-id="targetInbox?.id"
       :has-no-inbox="showNoInboxAlert"
       :is-dropdown-active="isAnyDropdownActive"
       :message-signature="messageSignature"

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

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

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

@@ -1,25 +1,23 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store';
 
-import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
-import WhatsappTemplate from './WhatsappTemplate.vue';
+import WhatsappTemplateParser from './WhatsappTemplateParser.vue';
 
 const props = defineProps({
-  inboxId: {
-    type: Number,
-    required: true,
+  messageTemplates: {
+    type: Array,
+    default: () => [],
   },
 });
 
 const emit = defineEmits(['sendMessage']);
 
 const { t } = useI18n();
-const getFilteredWhatsAppTemplates = useMapGetter(
-  'inboxes/getFilteredWhatsAppTemplates'
-);
+
+// TODO: Remove this when we support all formats
+const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
 
 const searchQuery = ref('');
 const selectedTemplate = ref(null);
@@ -27,7 +25,19 @@ const selectedTemplate = ref(null);
 const showTemplatesMenu = ref(false);
 
 const whatsAppTemplateMessages = computed(() => {
-  return getFilteredWhatsAppTemplates.value(props.inboxId);
+  // Add null check and ensure it's an array
+  const templates = Array.isArray(props.messageTemplates)
+    ? props.messageTemplates
+    : [];
+
+  // TODO: Remove the last filter when we support all formats
+  return templates
+    .filter(template => template?.status?.toLowerCase() === 'approved')
+    .filter(template => {
+      return template?.components?.every(component => {
+        return !formatsToRemove.includes(component.format);
+      });
+    });
 });
 
 const filteredTemplates = computed(() => {
@@ -74,13 +84,10 @@ const handleSendMessage = template => {
     />
     <div
       v-if="showTemplatesMenu"
-      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-2 p-4 items-center w-[21.875rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto left-0 flex flex-col gap-2 p-4 items-center w-[21.875rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
     >
       <div class="relative w-full">
-        <Icon
-          icon="i-lucide-search"
-          class="absolute size-3.5 top-2 ltr:left-3 rtl:right-3"
-        />
+        <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
         <input
           v-model="searchQuery"
           type="search"
@@ -89,13 +96,13 @@ const handleSendMessage = template => {
               'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
             )
           "
-          class="w-full h-8 py-2 ltr:pl-10 rtl:pr-10 ltr:pr-2 rtl:pl-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
         />
       </div>
       <div
         v-for="template in filteredTemplates"
         :key="template.id"
-        class="flex flex-col gap-2 p-2 w-full rounded-lg cursor-pointer dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
+        class="flex flex-col w-full gap-2 p-2 rounded-lg cursor-pointer dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
         @click="handleTemplateClick(template)"
       >
         <span class="text-sm text-n-slate-12">{{ template.name }}</span>
@@ -104,12 +111,12 @@ const handleSendMessage = template => {
         </p>
       </div>
       <template v-if="filteredTemplates.length === 0">
-        <p class="pt-2 w-full text-sm text-n-slate-11">
+        <p class="w-full pt-2 text-sm text-n-slate-11">
           {{ t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.EMPTY_STATE') }}
         </p>
       </template>
     </div>
-    <WhatsappTemplate
+    <WhatsappTemplateParser
       v-if="selectedTemplate"
       :template="selectedTemplate"
       @send-message="handleSendMessage"

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

@@ -1,64 +0,0 @@
-<script setup>
-import WhatsAppTemplateParser from 'dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import { useI18n } from 'vue-i18n';
-
-defineProps({
-  template: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const emit = defineEmits(['sendMessage', 'back']);
-
-const { t } = useI18n();
-
-const handleSendMessage = payload => {
-  emit('sendMessage', payload);
-};
-
-const handleBack = () => {
-  emit('back');
-};
-</script>
-
-<template>
-  <div
-    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
-  >
-    <div class="w-full">
-      <WhatsAppTemplateParser
-        :template="template"
-        @send-message="handleSendMessage"
-        @back="handleBack"
-      >
-        <template #actions="{ sendMessage, goBack, disabled }">
-          <div class="flex gap-3 justify-between items-end w-full h-14">
-            <Button
-              :label="
-                t(
-                  'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.BACK'
-                )
-              "
-              color="slate"
-              variant="faded"
-              class="w-full font-medium"
-              @click="goBack"
-            />
-            <Button
-              :label="
-                t(
-                  'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.SEND_MESSAGE'
-                )
-              "
-              class="w-full font-medium"
-              :disabled="disabled"
-              @click="sendMessage"
-            />
-          </div>
-        </template>
-      </WhatsAppTemplateParser>
-    </div>
-  </div>
-</template>

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

@@ -106,7 +106,7 @@ onMounted(() => {
 
 <template>
   <div
-    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto left-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
   >
     <span class="text-sm text-n-slate-12">
       {{
@@ -138,8 +138,7 @@ onMounted(() => {
       class="flex items-center w-full gap-2"
     >
       <span
-        class="block h-8 text-sm min-w-6 text-start truncate text-n-slate-10 leading-8"
-        :title="key"
+        class="flex items-center h-8 text-sm min-w-6 ltr:text-left rtl:text-right text-n-slate-10"
       >
         {{ key }}
       </span>

app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js

@@ -36,11 +36,10 @@ const transformInbox = ({
   email,
   channelType,
   phoneNumber,
-  medium,
   ...rest
 }) => ({
   id,
-  icon: getInboxIconByType(channelType, medium, 'line'),
+  icon: getInboxIconByType(channelType, phoneNumber, 'line'),
   label: generateLabelForContactableInboxesList({
     name,
     email,

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

@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { removeEmoji } from 'shared/helpers/emoji';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
-import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
 import wootConstants from 'dashboard/constants/globals';
 
 const props = defineProps({
@@ -34,18 +33,10 @@ const props = defineProps({
     validator: value =>
       !value || wootConstants.AVAILABILITY_STATUS_KEYS.includes(value),
   },
-  inbox: {
-    type: Object,
-    default: null,
-  },
   iconName: {
     type: String,
     default: null,
   },
-  hideOfflineStatus: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits(['upload', 'delete']);
@@ -75,11 +66,11 @@ const AVATAR_COLORS = {
   default: { bg: '#E8E8E8', text: '#60646C' },
 };
 
-const STATUS_CLASSES = computed(() => ({
+const STATUS_CLASSES = {
   online: 'bg-n-teal-10',
   busy: 'bg-n-amber-10',
-  ...(props.hideOfflineStatus ? {} : { offline: 'bg-n-slate-10' }),
-}));
+  offline: 'bg-n-slate-10',
+};
 
 const showDefaultAvatar = computed(() => !props.src && !props.name);
 
@@ -183,31 +174,21 @@ watch(
 </script>
 
 <template>
-  <span
-    class="relative inline-flex group/avatar z-0 flex-shrink-0"
-    :style="containerStyles"
-  >
+  <span class="relative inline-flex group/avatar z-0" :style="containerStyles">
     <!-- Status Badge -->
     <slot name="badge" :size="size">
       <div
-        v-if="status && STATUS_CLASSES[status]"
+        v-if="status"
         class="absolute z-20 border rounded-full border-n-slate-3"
         :style="badgeStyles"
         :class="STATUS_CLASSES[status]"
       />
-      <div
-        v-if="inbox && !(status && STATUS_CLASSES[status])"
-        :style="badgeStyles"
-        class="absolute z-20 flex items-center justify-center rounded-full bg-n-solid-1 border border-transparent flex-shrink-0"
-      >
-        <ChannelIcon :inbox="inbox" class="w-full h-full text-n-slate-11" />
-      </div>
     </slot>
 
     <!-- Delete Avatar Button -->
     <div
       v-if="src && allowUpload"
-      class="absolute z-20 flex items-center justify-center invisible w-6 h-6 transition-all duration-300 ease-in-out opacity-0 cursor-pointer outline outline-1 outline-n-container -top-2 ltr:-right-2 rtl:-left-2 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
+      class="absolute z-20 flex items-center justify-center invisible w-6 h-6 transition-all duration-300 ease-in-out opacity-0 cursor-pointer outline outline-1 outline-n-container -top-2 -right-2 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
       @click="handleDismiss"
     >
       <Icon icon="i-lucide-x" class="text-n-slate-11 size-4" />
@@ -251,40 +232,31 @@ watch(
         <!-- Fallback Icon if no name or image -->
         <Icon
           v-else
-          :title="t('THUMBNAIL.AUTHOR.NOT_AVAILABLE')"
+          v-tooltip.top-start="t('THUMBNAIL.AUTHOR.NOT_AVAILABLE')"
           icon="i-lucide-user"
           :style="iconStyles"
         />
       </template>
 
       <!-- Upload Overlay and Input -->
-      <slot
-        v-if="allowUpload || $slots.overlay"
-        name="overlay"
-        :size="size"
-        :handle-upload="handleUploadAvatar"
-        :file-input-ref="fileInput"
-        :handle-image-upload="handleImageUpload"
+      <div
+        v-if="allowUpload"
+        class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
+        @click="handleUploadAvatar"
       >
-        <div
-          class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
-          @click="handleUploadAvatar"
-        >
-          <Icon
-            icon="i-lucide-upload"
-            class="text-white"
-            :style="{ width: `${size / 2}px`, height: `${size / 2}px` }"
-          />
-          <input
-            v-if="allowUpload"
-            ref="fileInput"
-            type="file"
-            accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-            class="hidden"
-            @change="handleImageUpload"
-          />
-        </div>
-      </slot>
+        <Icon
+          icon="i-lucide-upload"
+          class="text-white"
+          :style="{ width: `${size / 2}px`, height: `${size / 2}px` }"
+        />
+        <input
+          ref="fileInput"
+          type="file"
+          accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+          class="hidden"
+          @change="handleImageUpload"
+        />
+      </div>
     </span>
   </span>
 </template>

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

@@ -1,6 +1,5 @@
 <script setup>
 import { useToggle } from '@vueuse/core';
-import { vOnClickOutside } from '@vueuse/components';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
@@ -45,10 +44,7 @@ const onClickCancel = () => {
 </script>
 
 <template>
-  <div
-    v-on-click-outside="() => togglePopover(false)"
-    class="inline-flex relative"
-  >
+  <div class="inline-flex relative">
     <Button
       :label="buttonLabel"
       sm

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

@@ -1,155 +0,0 @@
-<script setup>
-import { computed, reactive } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useToggle } from '@vueuse/core';
-import { useVuelidate } from '@vuelidate/core';
-import { vOnClickOutside } from '@vueuse/components';
-import { required, minLength } from '@vuelidate/validators';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
-import Editor from 'dashboard/components-next/Editor/Editor.vue';
-
-const emit = defineEmits(['add']);
-
-const { t } = useI18n();
-
-const [showPopover, togglePopover] = useToggle();
-
-const state = reactive({
-  id: '',
-  title: '',
-  description: '',
-  instruction: '',
-});
-
-const rules = {
-  title: { required, minLength: minLength(1) },
-  description: { required },
-  instruction: { required },
-};
-
-const v$ = useVuelidate(rules, state);
-
-const titleError = computed(() =>
-  v$.value.title.$error
-    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.ERROR')
-    : ''
-);
-
-const descriptionError = computed(() =>
-  v$.value.description.$error
-    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.ERROR')
-    : ''
-);
-
-const instructionError = computed(() =>
-  v$.value.instruction.$error
-    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.ERROR')
-    : ''
-);
-
-const resetState = () => {
-  Object.assign(state, {
-    id: '',
-    title: '',
-    description: '',
-    instruction: '',
-  });
-};
-
-const onClickAdd = async () => {
-  v$.value.$touch();
-  if (v$.value.$invalid) return;
-
-  await emit('add', state);
-  resetState();
-  togglePopover(false);
-};
-
-const onClickCancel = () => {
-  togglePopover(false);
-};
-</script>
-
-<template>
-  <div
-    v-on-click-outside="() => togglePopover(false)"
-    class="inline-flex relative"
-  >
-    <Button
-      :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.CREATE')"
-      sm
-      slate
-      class="flex-shrink-0"
-      @click="togglePopover(!showPopover)"
-    />
-
-    <div
-      v-if="showPopover"
-      class="w-[31.25rem] absolute top-10 ltr:left-0 rtl:right-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6 z-50"
-    >
-      <h3 class="text-base font-medium text-n-slate-12">
-        {{ t(`CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.TITLE`) }}
-      </h3>
-
-      <div class="flex flex-col gap-4">
-        <Input
-          v-model="state.title"
-          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.LABEL')"
-          :placeholder="
-            t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.PLACEHOLDER')
-          "
-          :message="titleError"
-          :message-type="titleError ? 'error' : 'info'"
-        />
-
-        <TextArea
-          v-model="state.description"
-          :label="
-            t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.LABEL')
-          "
-          :placeholder="
-            t(
-              'CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.PLACEHOLDER'
-            )
-          "
-          :message="descriptionError"
-          :message-type="descriptionError ? 'error' : 'info'"
-          show-character-count
-        />
-        <Editor
-          v-model="state.instruction"
-          :label="
-            t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.LABEL')
-          "
-          :placeholder="
-            t(
-              'CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.PLACEHOLDER'
-            )
-          "
-          :message="instructionError"
-          :message-type="instructionError ? 'error' : 'info'"
-          :show-character-count="false"
-          enable-captain-tools
-        />
-      </div>
-
-      <div class="flex items-center justify-between w-full gap-3">
-        <Button
-          variant="faded"
-          color="slate"
-          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.CANCEL')"
-          class="w-full bg-n-alpha-2 !text-n-blue-text hover:bg-n-alpha-3"
-          @click="onClickCancel"
-        />
-        <Button
-          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.CREATE')"
-          class="w-full"
-          @click="onClickAdd"
-        />
-      </div>
-    </div>
-  </div>
-</template>

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

@@ -57,10 +57,9 @@ const menuItems = computed(() => [
   },
 ]);
 
-const icon = computed(() => {
-  const { medium, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, medium, 'outline');
-});
+const icon = computed(() =>
+  getInboxIconByType(props.inbox.channel_type, '', 'outline')
+);
 
 const handleAction = ({ action, value }) => {
   toggleDropdown(false);

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

@@ -73,6 +73,7 @@ const saveEdit = () => {
       v-if="isEditing"
       v-model="editedContent"
       focus-on-mount
+      custom-input-class="flex items-center gap-2 text-sm text-n-slate-12"
       @keyup.enter="saveEdit"
     />
     <span v-else class="flex items-center gap-2 text-sm text-n-slate-12">

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

@@ -1,45 +0,0 @@
-<script setup>
-import ScenariosCard from './ScenariosCard.vue';
-
-const sampleScenarios = [
-  {
-    id: 1,
-    title: 'Refund Order',
-    description: 'User requests a refund for a recent purchase.',
-    instruction:
-      'Gather order details and reason for refund. Use [Order Search](tool://order_search) then submit with [Refund Payment](tool://refund_payment).',
-    tools: ['order_search', 'refund_payment'],
-  },
-  {
-    id: 2,
-    title: 'Bug Report',
-    description: 'Customer reports a bug in the mobile app.',
-    instruction:
-      'Ask for reproduction steps and environment. Check [Known Issues](tool://known_issues) then create ticket with [Create Bug Report](tool://bug_report_create).',
-    tools: ['known_issues', 'bug_report_create'],
-  },
-];
-</script>
-
-<template>
-  <Story
-    title="Captain/Assistant/ScenariosCard"
-    :layout="{ type: 'grid', width: '800px' }"
-  >
-    <Variant title="Default">
-      <div
-        v-for="scenario in sampleScenarios"
-        :key="scenario.id"
-        class="px-4 py-4 bg-n-background"
-      >
-        <ScenariosCard
-          :id="scenario.id"
-          :title="scenario.title"
-          :description="scenario.description"
-          :instruction="scenario.instruction"
-          :tools="scenario.tools"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

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

@@ -1,218 +0,0 @@
-<script setup>
-import { computed, h, reactive } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useToggle } from '@vueuse/core';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-import Input from 'dashboard/components-next/input/Input.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
-import Editor from 'dashboard/components-next/Editor/Editor.vue';
-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
-
-const props = defineProps({
-  id: {
-    type: Number,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  instruction: {
-    type: String,
-    required: true,
-  },
-  tools: {
-    type: Array,
-    required: true,
-  },
-  selectable: {
-    type: Boolean,
-    default: false,
-  },
-  isSelected: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['select', 'hover', 'delete', 'update']);
-
-const { t } = useI18n();
-const { formatMessage } = useMessageFormatter();
-
-const modelValue = computed({
-  get: () => props.isSelected,
-  set: () => emit('select', props.id),
-});
-
-const state = reactive({
-  id: '',
-  title: '',
-  description: '',
-  instruction: '',
-});
-
-const [isEditing, toggleEditing] = useToggle();
-
-const startEdit = () => {
-  Object.assign(state, {
-    id: props.id,
-    title: props.title,
-    description: props.description,
-    instruction: props.instruction,
-    tools: props.tools,
-  });
-  toggleEditing(true);
-};
-
-const rules = {
-  title: { required, minLength: minLength(1) },
-  description: { required },
-  instruction: { required },
-};
-
-const v$ = useVuelidate(rules, state);
-
-const titleError = computed(() =>
-  v$.value.title.$error
-    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.ERROR')
-    : ''
-);
-
-const descriptionError = computed(() =>
-  v$.value.description.$error
-    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.ERROR')
-    : ''
-);
-
-const onClickUpdate = () => {
-  v$.value.$touch();
-  if (v$.value.$invalid) return;
-  emit('update', { ...state });
-  toggleEditing(false);
-};
-
-const instructionError = computed(() =>
-  v$.value.instruction.$error
-    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.ERROR')
-    : ''
-);
-
-const LINK_INSTRUCTION_CLASS =
-  '[&_a[href^="tool://"]]:text-n-iris-11 [&_a:not([href^="tool://"])]:text-n-slate-12 [&_a]:pointer-events-none [&_a]:cursor-default';
-
-const renderInstruction = instruction => () =>
-  h('p', {
-    class: `text-sm text-n-slate-12 py-4 mb-0 [&_ol]:list-decimal ${LINK_INSTRUCTION_CLASS}`,
-    innerHTML: instruction,
-  });
-</script>
-
-<template>
-  <CardLayout
-    selectable
-    class="relative [&>div]:!py-4"
-    :class="{
-      '[&>div]:ltr:!pr-4 [&>div]:rtl:!pl-4': !isEditing,
-      '[&>div]:ltr:!pr-10 [&>div]:rtl:!pl-10': isEditing,
-    }"
-    layout="row"
-    @mouseenter="emit('hover', true)"
-    @mouseleave="emit('hover', false)"
-  >
-    <div
-      v-show="selectable && !isEditing"
-      class="absolute top-[1.125rem] ltr:left-3 rtl:right-3"
-    >
-      <Checkbox v-model="modelValue" />
-    </div>
-
-    <div v-if="!isEditing" class="flex flex-col w-full">
-      <div class="flex items-start justify-between w-full gap-2">
-        <div class="flex flex-col items-start">
-          <span class="text-sm text-n-slate-12 font-medium">{{ title }}</span>
-          <span class="text-sm text-n-slate-11 mt-2">
-            {{ description }}
-          </span>
-        </div>
-        <div class="flex items-center gap-2">
-          <!-- <Button label="Test" slate xs ghost class="!text-sm" />
-          <span class="w-px h-4 bg-n-weak" /> -->
-          <Button icon="i-lucide-pen" slate xs ghost @click="startEdit" />
-          <span class="w-px h-4 bg-n-weak" />
-          <Button
-            icon="i-lucide-trash"
-            slate
-            xs
-            ghost
-            @click="emit('delete', id)"
-          />
-        </div>
-      </div>
-      <component :is="renderInstruction(formatMessage(instruction, false))" />
-      <span class="text-sm text-n-slate-11 font-medium mb-1">
-        {{ t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.SUGGESTED.TOOLS_USED') }}
-        {{ tools?.map(tool => `@${tool}`).join(', ') }}
-      </span>
-    </div>
-    <div v-else class="overflow-hidden flex flex-col gap-4 w-full">
-      <Input
-        v-model="state.title"
-        :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.LABEL')"
-        :placeholder="
-          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.PLACEHOLDER')
-        "
-        :message="titleError"
-        :message-type="titleError ? 'error' : 'info'"
-      />
-
-      <TextArea
-        v-model="state.description"
-        :label="
-          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.LABEL')
-        "
-        :placeholder="
-          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.PLACEHOLDER')
-        "
-        :message="descriptionError"
-        :message-type="descriptionError ? 'error' : 'info'"
-        show-character-count
-      />
-      <Editor
-        v-model="state.instruction"
-        :label="
-          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.LABEL')
-        "
-        :placeholder="
-          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.PLACEHOLDER')
-        "
-        :message="instructionError"
-        :message-type="instructionError ? 'error' : 'info'"
-        :show-character-count="false"
-        enable-captain-tools
-      />
-      <div class="flex items-center gap-3">
-        <Button
-          faded
-          slate
-          sm
-          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.UPDATE.CANCEL')"
-          @click="toggleEditing(false)"
-        />
-        <Button
-          sm
-          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.UPDATE.UPDATE')"
-          @click="onClickUpdate"
-        />
-      </div>
-    </div>
-  </CardLayout>
-</template>

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

@@ -1,37 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import ToolsDropdown from './ToolsDropdown.vue';
-
-const items = [
-  {
-    id: 'order_search',
-    title: 'Order Search',
-    description: 'Lookup orders by customer ID, email, or order number',
-  },
-  {
-    id: 'refund_payment',
-    title: 'Refund Payment',
-    description: 'Initiates a refund on a specific payment',
-  },
-  {
-    id: 'fetch_customer',
-    title: 'Fetch Customer',
-    description: 'Pulls customer details (email, tags, last seen, etc.)',
-  },
-];
-
-const selectedIndex = ref(0);
-</script>
-
-<template>
-  <Story
-    title="Captain/Assistant/ToolsDropdown"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Default">
-      <div class="relative h-80 bg-n-background p-4">
-        <ToolsDropdown :items="items" :selected-index="selectedIndex" />
-      </div>
-    </Variant>
-  </Story>
-</template>

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

@@ -1,54 +0,0 @@
-<script setup>
-import { ref, watch, nextTick } from 'vue';
-
-const props = defineProps({
-  items: {
-    type: Array,
-    required: true,
-  },
-  selectedIndex: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const emit = defineEmits(['select']);
-
-const toolsDropdownRef = ref(null);
-
-const onItemClick = idx => emit('select', idx);
-
-watch(
-  () => props.selectedIndex,
-  () => {
-    nextTick(() => {
-      const el = toolsDropdownRef.value?.querySelector(
-        `#tool-item-${props.selectedIndex}`
-      );
-      if (el) {
-        el.scrollIntoView({ block: 'nearest', behavior: 'auto' });
-      }
-    });
-  },
-  { immediate: true }
-);
-</script>
-
-<template>
-  <div
-    ref="toolsDropdownRef"
-    class="w-[22.5rem] p-2 flex flex-col gap-1 z-50 absolute rounded-xl bg-n-alpha-3 shadow outline outline-1 outline-n-weak backdrop-blur-[50px] max-h-[20rem] overflow-y-auto"
-  >
-    <div
-      v-for="(tool, idx) in items"
-      :id="`tool-item-${idx}`"
-      :key="tool.id || idx"
-      :class="{ 'bg-n-alpha-black2': idx === selectedIndex }"
-      class="flex flex-col gap-1 rounded-md py-2 px-2 cursor-pointer hover:bg-n-alpha-black2"
-      @click="onItemClick(idx)"
-    >
-      <span class="text-n-slate-12 font-medium text-sm">{{ tool.title }}</span>
-      <span class="text-n-slate-11 text-sm">{{ tool.description }}</span>
-    </div>
-  </div>
-</template>

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

@@ -35,7 +35,6 @@ const initialState = {
   productName: '',
   featureFaq: false,
   featureMemory: false,
-  featureCitation: false,
 };
 
 const state = reactive({ ...initialState });
@@ -71,7 +70,6 @@ const prepareAssistantDetails = () => ({
     product_name: state.productName,
     feature_faq: state.featureFaq,
     feature_memory: state.featureMemory,
-    feature_citation: state.featureCitation,
   },
 });
 
@@ -95,7 +93,6 @@ const updateStateFromAssistant = assistant => {
     productName: config.product_name,
     featureFaq: config.feature_faq || false,
     featureMemory: config.feature_memory || false,
-    featureCitation: config.feature_citation || false,
   });
 };
 
@@ -154,13 +151,6 @@ watch(
           {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
         </span>
       </label>
-
-      <label class="flex items-center gap-2">
-        <input v-model="state.featureCitation" type="checkbox" />
-        <span class="text-sm font-medium text-n-slate-12">
-          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CITATIONS') }}
-        </span>
-      </label>
     </fieldset>
 
     <div class="flex items-center justify-between w-full gap-3">

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

@@ -41,7 +41,6 @@ const initialState = {
   features: {
     conversationFaqs: false,
     memories: false,
-    citations: false,
   },
   temperature: 1,
 };
@@ -88,7 +87,6 @@ const updateStateFromAssistant = assistant => {
   state.features = {
     conversationFaqs: config.feature_faq || false,
     memories: config.feature_memory || false,
-    citations: config.feature_citation || false,
   };
   state.temperature = config.temperature || 1;
 };
@@ -154,7 +152,6 @@ const handleFeaturesUpdate = () => {
       ...props.assistant.config,
       feature_faq: state.features.conversationFaqs,
       feature_memory: state.features.memories,
-      feature_citation: state.features.citations,
     },
   };
 
@@ -303,19 +300,20 @@ watch(
               <input
                 v-model="state.features.conversationFaqs"
                 type="checkbox"
+                class="form-checkbox"
               />
               {{
                 t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS')
               }}
             </label>
             <label class="flex items-center gap-2">
-              <input v-model="state.features.memories" type="checkbox" />
+              <input
+                v-model="state.features.memories"
+                type="checkbox"
+                class="form-checkbox"
+              />
               {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
             </label>
-            <label class="flex items-center gap-2">
-              <input v-model="state.features.citations" type="checkbox" />
-              {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CITATIONS') }}
-            </label>
           </div>
         </div>
 

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

@@ -26,7 +26,6 @@ const initialState = {
   features: {
     conversationFaqs: false,
     memories: false,
-    citations: false,
   },
 };
 
@@ -58,7 +57,6 @@ const updateStateFromAssistant = assistant => {
   state.features = {
     conversationFaqs: config.feature_faq || false,
     memories: config.feature_memory || false,
-    citations: config.feature_citation || false,
   };
 };
 
@@ -78,7 +76,6 @@ const handleBasicInfoUpdate = async () => {
       product_name: state.productName,
       feature_faq: state.features.conversationFaqs,
       feature_memory: state.features.memories,
-      feature_citation: state.features.citations,
     },
   };
 
@@ -126,17 +123,21 @@ watch(
       </label>
       <div class="flex flex-col gap-2">
         <label class="flex items-center gap-2">
-          <input v-model="state.features.conversationFaqs" type="checkbox" />
+          <input
+            v-model="state.features.conversationFaqs"
+            type="checkbox"
+            class="form-checkbox"
+          />
           {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS') }}
         </label>
         <label class="flex items-center gap-2">
-          <input v-model="state.features.memories" type="checkbox" />
+          <input
+            v-model="state.features.memories"
+            type="checkbox"
+            class="form-checkbox"
+          />
           {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
         </label>
-        <label class="flex items-center gap-2">
-          <input v-model="state.features.citations" type="checkbox" />
-          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CITATIONS') }}
-        </label>
       </div>
     </div>
 

app/javascript/dashboard/components-next/filter/ConditionRow.vue

@@ -2,7 +2,6 @@
 import { computed, defineModel, h, watch, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Button from 'next/button/Button.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
 import FilterSelect from './inputs/FilterSelect.vue';
 import MultiSelect from './inputs/MultiSelect.vue';
 import SingleSelect from './inputs/SingleSelect.vue';
@@ -179,11 +178,11 @@ defineExpose({ validate });
           disable-search
           :options="booleanOptions"
         />
-        <Input
+        <input
           v-else
           v-model="values"
           :type="inputType === 'date' ? 'date' : 'text'"
-          class="[&>input]:h-8 [&>input]:py-1.5 [&>input]:outline-offset-0"
+          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base"
           :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
         />
       </template>

app/javascript/dashboard/components-next/filter/ContactsFilter.vue

@@ -9,7 +9,6 @@ import { useContactFilterContext } from './contactProvider.js';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 
 import Button from 'next/button/Button.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
 import ConditionRow from './ConditionRow.vue';
 
 const props = defineProps({
@@ -110,13 +109,16 @@ const outsideClickHandler = [
       {{ filterModalHeaderTitle }}
     </h3>
     <div v-if="props.isSegmentView">
-      <div class="pb-6 border-b border-n-weak">
-        <Input
+      <label class="pb-6 border-b border-n-weak">
+        <div class="mb-2 text-sm text-n-slate-11">
+          {{ $t('CONTACTS_LAYOUT.FILTER.SEGMENT.LABEL') }}
+        </div>
+        <input
           v-model="segmentNameLocal"
-          :label="$t('CONTACTS_LAYOUT.FILTER.SEGMENT.LABEL')"
+          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base w-full"
           :placeholder="t('CONTACTS_LAYOUT.FILTER.SEGMENT.INPUT_PLACEHOLDER')"
         />
-      </div>
+      </label>
     </div>
     <ul class="grid gap-4 list-none">
       <template v-for="(filter, index) in filters" :key="filter.id">

app/javascript/dashboard/components-next/filter/ConversationFilter.vue

@@ -9,7 +9,6 @@ import { useConversationFilterContext } from './provider.js';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 
 import Button from 'next/button/Button.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
 import ConditionRow from './ConditionRow.vue';
 
 const props = defineProps({
@@ -111,13 +110,16 @@ const outsideClickHandler = [
       {{ filterModalHeaderTitle }}
     </h3>
     <div v-if="props.isFolderView">
-      <div class="border-b border-n-weak pb-6">
-        <Input
+      <label class="border-b border-n-weak pb-6">
+        <div class="text-n-slate-11 text-sm mb-2">
+          {{ t('FILTER.FOLDER_LABEL') }}
+        </div>
+        <input
           v-model="folderNameLocal"
-          :label="t('FILTER.FOLDER_LABEL')"
+          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base w-full"
           :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
         />
-      </div>
+      </label>
     </div>
     <ul class="grid gap-4 list-none">
       <template v-for="(filter, index) in filters" :key="filter.id">

app/javascript/dashboard/components-next/filter/SaveCustomView.vue

@@ -6,12 +6,10 @@ import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import { vOnClickOutside } from '@vueuse/components';
 import { useTrack } from 'dashboard/composables';
 import NextButton from 'next/button/Button.vue';
-import NextInput from 'dashboard/components-next/input/Input.vue';
 
 export default {
   components: {
     NextButton,
-    NextInput,
   },
   directives: {
     onClickOutside: vOnClickOutside,
@@ -105,13 +103,20 @@ export default {
       {{ $t('FILTER.CUSTOM_VIEWS.ADD.TITLE') }}
     </h3>
     <form class="w-full grid gap-6" @submit.prevent="saveCustomViews">
-      <NextInput
-        v-model="name"
-        :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
-        :message="v$.name.$error && $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE')"
-        :message-type="v$.name.$error && 'error'"
-        @blur="v$.name.$touch"
-      />
+      <label :class="{ error: v$.name.$error }">
+        <input
+          v-model="name"
+          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base w-full"
+          :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
+          @blur="v$.name.$touch"
+        />
+        <span
+          v-if="v$.name.$error"
+          class="text-xs text-n-ruby-11 ml-1 rtl:mr-1"
+        >
+          {{ $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') }}
+        </span>
+      </label>
       <div class="flex flex-row justify-end w-full gap-2">
         <NextButton faded slate sm @click.prevent="onClose">
           {{ $t('FILTER.CUSTOM_VIEWS.ADD.CANCEL_BUTTON') }}

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

@@ -1,5 +1,4 @@
 <script setup>
-import { toRef } from 'vue';
 import { useChannelIcon } from './provider';
 import Icon from 'next/icon/Icon.vue';
 
@@ -10,7 +9,7 @@ const props = defineProps({
   },
 });
 
-const channelIcon = useChannelIcon(toRef(props, 'inbox'));
+const channelIcon = useChannelIcon(props.inbox);
 </script>
 
 <template>

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

@@ -22,21 +22,15 @@ export function useChannelIcon(inbox) {
   };
 
   const channelIcon = computed(() => {
-    const inboxDetails = inbox.value || inbox;
-    const type = inboxDetails.channel_type;
+    const type = inbox.channel_type;
     let icon = channelTypeIconMap[type];
 
-    if (type === 'Channel::Email' && inboxDetails.provider) {
-      if (Object.keys(providerIconMap).includes(inboxDetails.provider)) {
-        icon = providerIconMap[inboxDetails.provider];
+    if (type === 'Channel::Email' && inbox.provider) {
+      if (Object.keys(providerIconMap).includes(inbox.provider)) {
+        icon = providerIconMap[inbox.provider];
       }
     }
 
-    // Special case for Twilio whatsapp
-    if (type === 'Channel::TwilioSms' && inboxDetails.medium === 'whatsapp') {
-      icon = 'i-ri-whatsapp-fill';
-    }
-
     return icon ?? 'i-ri-global-fill';
   });
 

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

@@ -25,77 +25,6 @@ describe('useChannelIcon', () => {
     expect(icon).toBe('i-ri-phone-fill');
   });
 
-  it('returns correct icon for Line channel', () => {
-    const inbox = { channel_type: 'Channel::Line' };
-    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-line-fill');
-  });
-
-  it('returns correct icon for SMS channel', () => {
-    const inbox = { channel_type: 'Channel::Sms' };
-    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-chat-1-fill');
-  });
-
-  it('returns correct icon for Telegram channel', () => {
-    const inbox = { channel_type: 'Channel::Telegram' };
-    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-telegram-fill');
-  });
-
-  it('returns correct icon for Twitter channel', () => {
-    const inbox = { channel_type: 'Channel::TwitterProfile' };
-    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-twitter-x-fill');
-  });
-
-  it('returns correct icon for WebWidget channel', () => {
-    const inbox = { channel_type: 'Channel::WebWidget' };
-    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-global-fill');
-  });
-
-  it('returns correct icon for Instagram channel', () => {
-    const inbox = { channel_type: 'Channel::Instagram' };
-    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-instagram-fill');
-  });
-
-  describe('TwilioSms channel', () => {
-    it('returns chat icon for regular Twilio SMS channel', () => {
-      const inbox = { channel_type: 'Channel::TwilioSms' };
-      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-chat-1-fill');
-    });
-
-    it('returns WhatsApp icon for Twilio SMS with WhatsApp medium', () => {
-      const inbox = {
-        channel_type: 'Channel::TwilioSms',
-        medium: 'whatsapp',
-      };
-      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-whatsapp-fill');
-    });
-
-    it('returns chat icon for Twilio SMS with non-WhatsApp medium', () => {
-      const inbox = {
-        channel_type: 'Channel::TwilioSms',
-        medium: 'sms',
-      };
-      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-chat-1-fill');
-    });
-
-    it('returns chat icon for Twilio SMS with undefined medium', () => {
-      const inbox = {
-        channel_type: 'Channel::TwilioSms',
-        medium: undefined,
-      };
-      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-chat-1-fill');
-    });
-  });
-
   describe('Email channel', () => {
     it('returns mail icon for generic email channel', () => {
       const inbox = { channel_type: 'Channel::Email' };

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

@@ -1,58 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-defineProps({
-  isMobileSidebarOpen: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['toggle']);
-
-const route = useRoute();
-
-const isConversationRoute = computed(() => {
-  const CONVERSATION_ROUTES = [
-    'inbox_conversation',
-    'conversation_through_inbox',
-    'conversations_through_label',
-    'team_conversations_through_label',
-    'conversations_through_folders',
-    'conversation_through_mentions',
-    'conversation_through_unattended',
-    'conversation_through_participating',
-    'inbox_view_conversation',
-  ];
-  return CONVERSATION_ROUTES.includes(route.name);
-});
-
-const toggleSidebar = () => {
-  emit('toggle');
-};
-</script>
-
-<template>
-  <div
-    v-if="!isConversationRoute"
-    id="mobile-sidebar-launcher"
-    class="fixed bottom-4 ltr:left-4 rtl:right-4 z-40 transition-transform duration-200 ease-in-out block md:hidden"
-    :class="[
-      {
-        'ltr:translate-x-48 rtl:-translate-x-48': isMobileSidebarOpen,
-      },
-    ]"
-  >
-    <div class="rounded-full bg-n-alpha-2 p-1">
-      <Button
-        icon="i-lucide-menu"
-        class="!rounded-full !bg-n-solid-3 dark:!bg-n-alpha-2 !text-n-slate-12 text-xl"
-        lg
-        @click="toggleSidebar"
-      />
-    </div>
-  </div>
-  <template v-else />
-</template>

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

@@ -8,7 +8,6 @@ import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { useStorage } from '@vueuse/core';
 import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
-import { vOnClickOutside } from '@vueuse/components';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import SidebarGroup from './SidebarGroup.vue';
@@ -18,18 +17,10 @@ import SidebarAccountSwitcher from './SidebarAccountSwitcher.vue';
 import Logo from 'next/icon/Logo.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
 
-const props = defineProps({
-  isMobileSidebarOpen: {
-    type: Boolean,
-    default: false,
-  },
-});
-
 const emit = defineEmits([
   'closeKeyShortcutModal',
   'openKeyShortcutModal',
   'showCreateAccountModal',
-  'closeMobileSidebar',
 ]);
 
 const { accountScopedRoute } = useAccount();
@@ -86,11 +77,6 @@ const sortedInboxes = computed(() =>
   inboxes.value.slice().sort((a, b) => a.name.localeCompare(b.name))
 );
 
-const closeMobileSidebar = () => {
-  if (!props.isMobileSidebarOpen) return;
-  emit('closeMobileSidebar');
-};
-
 const newReportRoutes = () => [
   {
     name: 'Reports Agent',
@@ -502,17 +488,7 @@ const menuItems = computed(() => {
 
 <template>
   <aside
-    v-on-click-outside="[
-      closeMobileSidebar,
-      { ignore: ['#mobile-sidebar-launcher'] },
-    ]"
-    class="bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak flex flex-col text-sm pb-1 fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 transition-transform duration-200 ease-in-out md:static w-[200px] basis-[200px] md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:-translate-x-0"
-    :class="[
-      {
-        'shadow-lg md:shadow-none': isMobileSidebarOpen,
-        'ltr:-translate-x-full rtl:translate-x-full': !isMobileSidebarOpen,
-      },
-    ]"
+    class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
   >
     <section class="grid gap-2 mt-2 mb-4">
       <div class="flex items-center min-w-0 gap-2 px-2">

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

@@ -218,8 +218,8 @@ onMounted(async () => {
   left: 0;
 }
 
-#app[dir='rtl'] .sidebar-group-children > .child-item:last-child::after,
-#app[dir='rtl']
+.app-rtl--wrapper .sidebar-group-children > .child-item:last-child::after,
+.app-rtl--wrapper
   .sidebar-group-children
   > *:last-child
   > *:last-child

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

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

app/javascript/dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue

@@ -1,279 +0,0 @@
-<script setup>
-import { ref, computed, onMounted, watch } from 'vue';
-import { useVuelidate } from '@vuelidate/core';
-import { requiredIf } from '@vuelidate/validators';
-import { useI18n } from 'vue-i18n';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import {
-  buildTemplateParameters,
-  allKeysRequired,
-  replaceTemplateVariables,
-  DEFAULT_LANGUAGE,
-  DEFAULT_CATEGORY,
-  COMPONENT_TYPES,
-  MEDIA_FORMATS,
-  findComponentByType,
-} from 'dashboard/helper/templateHelper';
-
-const props = defineProps({
-  template: {
-    type: Object,
-    default: () => ({}),
-    validator: value => {
-      if (!value || typeof value !== 'object') return false;
-      if (!value.components || !Array.isArray(value.components)) return false;
-      return true;
-    },
-  },
-});
-
-const emit = defineEmits(['sendMessage', 'resetTemplate', 'back']);
-
-const { t } = useI18n();
-
-const processedParams = ref({});
-
-const languageLabel = computed(() => {
-  return `${t('WHATSAPP_TEMPLATES.PARSER.LANGUAGE')}: ${props.template.language || DEFAULT_LANGUAGE}`;
-});
-
-const categoryLabel = computed(() => {
-  return `${t('WHATSAPP_TEMPLATES.PARSER.CATEGORY')}: ${props.template.category || DEFAULT_CATEGORY}`;
-});
-
-const headerComponent = computed(() => {
-  return findComponentByType(props.template, COMPONENT_TYPES.HEADER);
-});
-
-const bodyComponent = computed(() => {
-  return findComponentByType(props.template, COMPONENT_TYPES.BODY);
-});
-
-const bodyText = computed(() => {
-  return bodyComponent.value?.text || '';
-});
-
-const hasMediaHeader = computed(() =>
-  MEDIA_FORMATS.includes(headerComponent.value?.format)
-);
-
-const formatType = computed(() => {
-  const format = headerComponent.value?.format;
-  return format ? format.charAt(0) + format.slice(1).toLowerCase() : '';
-});
-
-const hasVariables = computed(() => {
-  return bodyText.value?.match(/{{([^}]+)}}/g) !== null;
-});
-
-const renderedTemplate = computed(() => {
-  return replaceTemplateVariables(bodyText.value, processedParams.value);
-});
-
-const isFormInvalid = computed(() => {
-  if (!hasVariables.value && !hasMediaHeader.value) return false;
-
-  if (hasMediaHeader.value && !processedParams.value.header?.media_url) {
-    return true;
-  }
-
-  if (hasVariables.value && processedParams.value.body) {
-    const hasEmptyBodyVariable = Object.values(processedParams.value.body).some(
-      value => !value
-    );
-    if (hasEmptyBodyVariable) return true;
-  }
-
-  if (processedParams.value.buttons) {
-    const hasEmptyButtonParameter = processedParams.value.buttons.some(
-      button => !button.parameter
-    );
-    if (hasEmptyButtonParameter) return true;
-  }
-
-  return false;
-});
-
-const v$ = useVuelidate(
-  {
-    processedParams: {
-      requiredIfKeysPresent: requiredIf(hasVariables),
-      allKeysRequired,
-    },
-  },
-  { processedParams }
-);
-
-const initializeTemplateParameters = () => {
-  processedParams.value = buildTemplateParameters(
-    props.template,
-    hasMediaHeader.value
-  );
-};
-
-const updateMediaUrl = value => {
-  processedParams.value.header ??= {};
-  processedParams.value.header.media_url = value;
-};
-
-const sendMessage = () => {
-  v$.value.$touch();
-  if (v$.value.$invalid) return;
-
-  const { name, category, language, namespace } = props.template;
-
-  const payload = {
-    message: renderedTemplate.value,
-    templateParams: {
-      name,
-      category,
-      language,
-      namespace,
-      processed_params: processedParams.value,
-    },
-  };
-  emit('sendMessage', payload);
-};
-
-const resetTemplate = () => {
-  emit('resetTemplate');
-};
-
-const goBack = () => {
-  emit('back');
-};
-
-onMounted(initializeTemplateParameters);
-
-watch(
-  () => props.template,
-  () => {
-    initializeTemplateParameters();
-    v$.value.$reset();
-  },
-  { deep: true }
-);
-
-defineExpose({
-  processedParams,
-  hasVariables,
-  hasMediaHeader,
-  headerComponent,
-  renderedTemplate,
-  v$,
-  updateMediaUrl,
-  sendMessage,
-  resetTemplate,
-  goBack,
-});
-</script>
-
-<template>
-  <div>
-    <div class="flex flex-col gap-4 p-4 mb-4 rounded-lg bg-n-alpha-black2">
-      <div class="flex justify-between items-center">
-        <h3 class="text-sm font-medium text-n-slate-12">
-          {{ template.name }}
-        </h3>
-        <span class="text-xs text-n-slate-11">
-          {{ languageLabel }}
-        </span>
-      </div>
-
-      <div class="flex flex-col gap-2">
-        <div class="rounded-md">
-          <div class="text-sm whitespace-pre-wrap text-n-slate-12">
-            {{ renderedTemplate }}
-          </div>
-        </div>
-      </div>
-
-      <div class="text-xs text-n-slate-11">
-        {{ categoryLabel }}
-      </div>
-    </div>
-
-    <div v-if="hasVariables || hasMediaHeader">
-      <div v-if="hasMediaHeader" class="mb-4">
-        <p class="mb-2.5 text-sm font-semibold">
-          {{
-            $t('WHATSAPP_TEMPLATES.PARSER.MEDIA_HEADER_LABEL', {
-              type: formatType,
-            }) || `${formatType} Header`
-          }}
-        </p>
-        <div class="flex items-center mb-2.5">
-          <Input
-            :model-value="processedParams.header?.media_url || ''"
-            type="url"
-            class="flex-1"
-            :placeholder="
-              t('WHATSAPP_TEMPLATES.PARSER.MEDIA_URL_LABEL', {
-                type: formatType,
-              })
-            "
-            @update:model-value="updateMediaUrl"
-          />
-        </div>
-      </div>
-
-      <!-- Body Variables Section -->
-      <div v-if="processedParams.body">
-        <p class="mb-2.5 text-sm font-semibold">
-          {{ $t('WHATSAPP_TEMPLATES.PARSER.VARIABLES_LABEL') }}
-        </p>
-        <div
-          v-for="(variable, key) in processedParams.body"
-          :key="`body-${key}`"
-          class="flex items-center mb-2.5"
-        >
-          <Input
-            v-model="processedParams.body[key]"
-            type="text"
-            class="flex-1"
-            :placeholder="
-              t('WHATSAPP_TEMPLATES.PARSER.VARIABLE_PLACEHOLDER', {
-                variable: key,
-              })
-            "
-          />
-        </div>
-      </div>
-
-      <!-- Button Variables Section -->
-      <div v-if="processedParams.buttons">
-        <p class="mb-2.5 text-sm font-semibold">
-          {{ t('WHATSAPP_TEMPLATES.PARSER.BUTTON_PARAMETERS') }}
-        </p>
-        <div
-          v-for="(button, index) in processedParams.buttons"
-          :key="`button-${index}`"
-          class="flex items-center mb-2.5"
-        >
-          <Input
-            v-model="processedParams.buttons[index].parameter"
-            type="text"
-            class="flex-1"
-            :placeholder="t('WHATSAPP_TEMPLATES.PARSER.BUTTON_PARAMETER')"
-          />
-        </div>
-      </div>
-      <p
-        v-if="v$.$dirty && v$.$invalid"
-        class="p-2.5 text-center rounded-md bg-n-ruby-9/20 text-n-ruby-9"
-      >
-        {{ $t('WHATSAPP_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
-      </p>
-    </div>
-
-    <slot
-      name="actions"
-      :send-message="sendMessage"
-      :reset-template="resetTemplate"
-      :go-back="goBack"
-      :is-valid="!v$.$invalid"
-      :disabled="isFormInvalid"
-    />
-  </div>
-</template>

app/javascript/dashboard/components/ChatListHeader.vue

@@ -98,7 +98,7 @@ const toggleConversationLayout = () => {
           />
           <div
             id="saveFilterTeleportTarget"
-            class="absolute z-50 mt-2"
+            class="absolute z-40 mt-2"
             :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
           />
         </div>
@@ -124,7 +124,7 @@ const toggleConversationLayout = () => {
           />
           <div
             id="conversationFilterTeleportTarget"
-            class="absolute z-50 mt-2"
+            class="absolute z-40 mt-2"
             :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
           />
         </div>
@@ -150,7 +150,7 @@ const toggleConversationLayout = () => {
         />
         <div
           id="conversationFilterTeleportTarget"
-          class="absolute z-50 mt-2"
+          class="absolute z-40 mt-2"
           :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
         />
       </div>

app/javascript/dashboard/components/app/UpgradeBanner.vue

@@ -0,0 +1,94 @@
+<script>
+import Banner from 'dashboard/components/ui/Banner.vue';
+import { mapGetters } from 'vuex';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { differenceInDays } from 'date-fns';
+
+export default {
+  components: { Banner },
+  setup() {
+    const { accountId } = useAccount();
+    return {
+      accountId,
+    };
+  },
+  data() {
+    return { conversationMeta: {} };
+  },
+  computed: {
+    ...mapGetters({
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
+      getAccount: 'accounts/getAccount',
+    }),
+    bannerMessage() {
+      return this.$t('GENERAL_SETTINGS.LIMITS_UPGRADE');
+    },
+    actionButtonMessage() {
+      return this.$t('GENERAL_SETTINGS.OPEN_BILLING');
+    },
+    shouldShowBanner() {
+      if (!this.isOnChatwootCloud) {
+        return false;
+      }
+
+      if (this.isTrialAccount()) {
+        return false;
+      }
+
+      return this.isLimitExceeded();
+    },
+  },
+  mounted() {
+    if (this.isOnChatwootCloud) {
+      this.fetchLimits();
+    }
+  },
+  methods: {
+    fetchLimits() {
+      this.$store.dispatch('accounts/limits');
+    },
+    routeToBilling() {
+      this.$router.push({
+        name: 'billing_settings_index',
+        params: { accountId: this.accountId },
+      });
+    },
+    isTrialAccount() {
+      // check if account is less than 15 days old
+      const account = this.getAccount(this.accountId);
+      if (!account) return false;
+
+      const createdAt = new Date(account.created_at);
+
+      const diffDays = differenceInDays(new Date(), createdAt);
+
+      return diffDays <= 15;
+    },
+    isLimitExceeded() {
+      const account = this.getAccount(this.accountId);
+      if (!account) return false;
+
+      const { limits } = account;
+      if (!limits) return false;
+
+      const { conversation, non_web_inboxes: nonWebInboxes } = limits;
+      return this.testLimit(conversation) || this.testLimit(nonWebInboxes);
+    },
+    testLimit({ allowed, consumed }) {
+      return consumed > allowed;
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <Banner
+    v-if="shouldShowBanner"
+    color-scheme="alert"
+    :banner-message="bannerMessage"
+    :action-button-label="actionButtonMessage"
+    has-action-button
+    @primary-action="routeToBilling"
+  />
+</template>

app/javascript/dashboard/components/copilot/CopilotContainer.vue

@@ -4,12 +4,7 @@ import { useStore } from 'dashboard/composables/store';
 import Copilot from 'dashboard/components-next/copilot/Copilot.vue';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useUISettings } from 'dashboard/composables/useUISettings';
-import { useConfig } from 'dashboard/composables/useConfig';
-import { useWindowSize } from '@vueuse/core';
-import { vOnClickOutside } from '@vueuse/components';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import wootConstants from 'dashboard/constants/globals';
-
 defineProps({
   conversationInboxType: {
     type: String,
@@ -18,20 +13,12 @@ defineProps({
 });
 
 const store = useStore();
-const { uiSettings, updateUISettings } = useUISettings();
-const { isEnterprise } = useConfig();
-const { width: windowWidth } = useWindowSize();
-
 const currentUser = useMapGetter('getCurrentUser');
 const assistants = useMapGetter('captainAssistants/getRecords');
 const uiFlags = useMapGetter('captainAssistants/getUIFlags');
 const inboxAssistant = useMapGetter('getCopilotAssistant');
 const currentChat = useMapGetter('getSelectedChat');
 
-const isSmallScreen = computed(
-  () => windowWidth.value < wootConstants.SMALL_SCREEN_BREAKPOINT
-);
-
 const selectedCopilotThreadId = ref(null);
 const messages = computed(() =>
   store.getters['copilotMessages/getMessagesByThreadId'](
@@ -45,6 +32,7 @@ const isFeatureEnabledonAccount = useMapGetter(
 );
 
 const selectedAssistantId = ref(null);
+const { uiSettings, updateUISettings } = useUISettings();
 
 const activeAssistant = computed(() => {
   const preferredId = uiSettings.value.preferred_captain_assistant_id;
@@ -67,15 +55,6 @@ const activeAssistant = computed(() => {
   return assistants.value[0];
 });
 
-const closeCopilotPanel = () => {
-  if (isSmallScreen.value && uiSettings.value?.is_copilot_panel_open) {
-    updateUISettings({
-      is_contact_sidebar_open: false,
-      is_copilot_panel_open: false,
-    });
-  }
-};
-
 const setAssistant = async assistant => {
   selectedAssistantId.value = assistant.id;
   await updateUISettings({
@@ -84,9 +63,6 @@ const setAssistant = async assistant => {
 };
 
 const shouldShowCopilotPanel = computed(() => {
-  if (!isEnterprise) {
-    return false;
-  }
   const isCaptainEnabled = isFeatureEnabledonAccount.value(
     currentAccountId.value,
     FEATURE_FLAGS.CAPTAIN
@@ -118,23 +94,14 @@ const sendMessage = async message => {
 };
 
 onMounted(() => {
-  if (isEnterprise) {
-    store.dispatch('captainAssistants/get');
-  }
+  store.dispatch('captainAssistants/get');
 });
 </script>
 
 <template>
   <div
     v-if="shouldShowCopilotPanel"
-    v-on-click-outside="() => closeCopilotPanel()"
-    class="bg-n-background h-full overflow-hidden flex-col fixed top-0 ltr:right-0 rtl:left-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
-    :class="[
-      {
-        'md:flex': shouldShowCopilotPanel,
-        'md:hidden': !shouldShowCopilotPanel,
-      },
-    ]"
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-[320px] min-w-[320px] 2xl:min-w-[360px] 2xl:w-[360px] flex flex-col bg-n-background"
   >
     <Copilot
       :messages="messages"

app/javascript/dashboard/components/index.js

@@ -1,5 +1,6 @@
 // [NOTE][DEPRECATED] This method is to be deprecated, please do not add new components to this file.
 /* eslint no-plusplus: 0 */
+import AvatarUploader from './widgets/forms/AvatarUploader.vue';
 import Code from './Code.vue';
 import ColorPicker from './widgets/ColorPicker.vue';
 import ConfirmDeleteModal from './widgets/modal/ConfirmDeleteModal.vue';
@@ -17,9 +18,11 @@ import Modal from './Modal.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import Tabs from './ui/Tabs/Tabs.vue';
 import TabsItem from './ui/Tabs/TabsItem.vue';
+import Thumbnail from './widgets/Thumbnail.vue';
 import DatePicker from './ui/DatePicker/DatePicker.vue';
 
 const WootUIKit = {
+  AvatarUploader,
   Code,
   ColorPicker,
   ConfirmDeleteModal,
@@ -37,6 +40,7 @@ const WootUIKit = {
   Spinner,
   Tabs,
   TabsItem,
+  Thumbnail,
   DatePicker,
   install(Vue) {
     const keys = Object.keys(this);

app/javascript/dashboard/components/ui/Wizard.vue

@@ -1,5 +1,9 @@
 <script>
+/* eslint no-console: 0 */
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
 export default {
+  mixins: [globalConfigMixin],
   props: {
     items: {
       type: Array,

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

@@ -0,0 +1,55 @@
+<script>
+export default {
+  name: 'Avatar',
+  props: {
+    username: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: Number,
+      default: 40,
+    },
+  },
+  computed: {
+    style() {
+      return {
+        fontSize: `${Math.floor(this.size / 2.5)}px`,
+      };
+    },
+    userInitial() {
+      const parts = this.username.split(/[ -]/);
+      let initials = parts.reduce((acc, curr) => acc + curr.charAt(0), '');
+
+      if (initials.length > 2 && initials.search(/[A-Z]/) !== -1) {
+        initials = initials.replace(/[a-z]+/g, '');
+      }
+      initials = initials.substring(0, 2).toUpperCase();
+
+      return initials;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="avatar-container" :style="style" aria-hidden="true">
+    <slot>{{ userInitial }}</slot>
+  </div>
+</template>
+
+<style scoped>
+@tailwind components;
+@layer components {
+  .avatar-color {
+    background-image: linear-gradient(to top, #c2e1ff 0%, #d6ebff 100%);
+  }
+
+  .dark-avatar-color {
+    background-image: linear-gradient(to top, #135899 0%, #135899 100%);
+  }
+}
+.avatar-container {
+  @apply flex leading-[100%] font-medium items-center justify-center text-center cursor-default avatar-color dark:dark-avatar-color text-n-blue-text;
+}
+</style>

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

@@ -1,22 +1,32 @@
-<script setup>
-import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
+<script>
+import { getInboxClassByType } from 'dashboard/helper/inbox';
 
-defineProps({
-  inbox: {
-    type: Object,
-    default: () => {},
+export default {
+  props: {
+    inbox: {
+      type: Object,
+      default: () => {},
+    },
   },
-});
+  computed: {
+    computedInboxClass() {
+      const { phone_number: phoneNumber, channel_type: type } = this.inbox;
+      const classByType = getInboxClassByType(type, phoneNumber);
+      return classByType;
+    },
+  },
+};
 </script>
 
 <template>
-  <div class="flex items-center text-n-slate-11 text-xs min-w-0">
-    <ChannelIcon
-      :inbox="inbox"
-      class="size-3 ltr:mr-0.5 rtl:ml-0.5 flex-shrink-0"
+  <div
+    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap bg-none text-n-slate-11 text-xs my-0 mx-2.5"
+  >
+    <fluent-icon
+      class="mr-0.5 rtl:ml-0.5 rtl:mr-0"
+      :icon="computedInboxClass"
+      size="12"
     />
-    <span class="truncate">
-      {{ inbox.name }}
-    </span>
+    {{ inbox.name }}
   </div>
 </template>

app/javascript/dashboard/components/widgets/Thumbnail.spec.js

@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils';
+import Avatar from './Avatar.vue';
+import Thumbnail from './Thumbnail.vue';
+
+describe('Thumbnail.vue', () => {
+  it('should render the agent thumbnail if valid image is passed', () => {
+    const wrapper = mount(Thumbnail, {
+      propsData: {
+        src: 'https://some_valid_url.com',
+      },
+      data() {
+        return {
+          hasImageLoaded: true,
+          imgError: false,
+        };
+      },
+    });
+    expect(wrapper.find('.user-thumbnail').exists()).toBe(true);
+    const avatarComponent = wrapper.findComponent(Avatar);
+    expect(avatarComponent.isVisible()).toBe(false);
+  });
+
+  it('should render the avatar component if invalid image is passed', () => {
+    const wrapper = mount(Thumbnail, {
+      propsData: {
+        src: 'https://some_invalid_url.com',
+      },
+      data() {
+        return {
+          hasImageLoaded: true,
+          imgError: true,
+        };
+      },
+    });
+    expect(wrapper.find('#image').exists()).toBe(false);
+    const avatarComponent = wrapper.findComponent(Avatar);
+    expect(avatarComponent.isVisible()).toBe(true);
+  });
+
+  it('should the initial of the name if no image is passed', () => {
+    const wrapper = mount(Avatar, {
+      propsData: {
+        username: 'Angie Rojas',
+      },
+    });
+    expect(wrapper.find('div').text()).toBe('AR');
+  });
+});

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

@@ -0,0 +1,224 @@
+<script>
+/**
+ * Thumbnail Component
+ * Src - source for round image
+ * Size - Size of the thumbnail
+ * Badge - Chat source indication { fb / telegram }
+ * Username - Username for avatar
+ */
+import Avatar from './Avatar.vue';
+import { removeEmoji } from 'shared/helpers/emoji';
+
+export default {
+  components: {
+    Avatar,
+  },
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: String,
+      default: '40px',
+    },
+    badge: {
+      type: String,
+      default: '',
+    },
+    username: {
+      type: String,
+      default: '',
+    },
+    status: {
+      type: String,
+      default: '',
+    },
+    hasBorder: {
+      type: Boolean,
+      default: false,
+    },
+    shouldShowStatusAlways: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    variant: {
+      type: String,
+      default: 'circle',
+    },
+  },
+  data() {
+    return {
+      hasImageLoaded: false,
+      imgError: false,
+    };
+  },
+  computed: {
+    userNameWithoutEmoji() {
+      return removeEmoji(this.username);
+    },
+    showStatusIndicator() {
+      if (this.shouldShowStatusAlways) return true;
+      return this.status === 'online' || this.status === 'busy';
+    },
+    avatarSize() {
+      return Number(this.size.replace(/\D+/g, ''));
+    },
+    badgeSrc() {
+      return {
+        instagram_direct_message: 'instagram-dm',
+        facebook: 'messenger',
+        'twitter-tweet': 'twitter-tweet',
+        'twitter-dm': 'twitter-dm',
+        whatsapp: 'whatsapp',
+        sms: 'sms',
+        'Channel::Line': 'line',
+        'Channel::Telegram': 'telegram',
+        'Channel::WebWidget': '',
+      }[this.badge];
+    },
+    badgeStyle() {
+      const size = Math.floor(this.avatarSize / 3);
+      const badgeSize = `${size + 2}px`;
+      const borderRadius = `${size / 2}px`;
+      return { width: badgeSize, height: badgeSize, borderRadius };
+    },
+    statusStyle() {
+      const statusSize = `${this.avatarSize / 4}px`;
+      return { width: statusSize, height: statusSize };
+    },
+    thumbnailClass() {
+      const className = this.hasBorder
+        ? 'border border-solid border-white dark:border-n-weak'
+        : '';
+      const variant =
+        this.variant === 'circle' ? 'thumbnail-rounded' : 'thumbnail-square';
+      return `user-thumbnail ${className} ${variant}`;
+    },
+    thumbnailBoxClass() {
+      const boxClass = this.variant === 'circle' ? 'is-rounded' : '';
+      return `user-thumbnail-box ${boxClass}`;
+    },
+    shouldShowImage() {
+      if (!this.src) {
+        return false;
+      }
+      if (this.hasImageLoaded) {
+        return !this.imgError;
+      }
+      return false;
+    },
+  },
+  watch: {
+    src(value, oldValue) {
+      if (value !== oldValue && this.imgError) {
+        this.imgError = false;
+      }
+    },
+  },
+  methods: {
+    onImgError() {
+      this.imgError = true;
+    },
+    onImgLoad() {
+      this.hasImageLoaded = true;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    :class="thumbnailBoxClass"
+    :style="{ height: size, width: size }"
+    :title="title"
+  >
+    <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->
+    <slot>
+      <img
+        v-show="shouldShowImage"
+        :src="src"
+        draggable="false"
+        :class="thumbnailClass"
+        @load="onImgLoad"
+        @error="onImgError"
+      />
+      <Avatar
+        v-show="!shouldShowImage"
+        :username="userNameWithoutEmoji"
+        :class="thumbnailClass"
+        :size="avatarSize"
+      />
+    </slot>
+    <img
+      v-if="badgeSrc"
+      class="source-badge z-20"
+      :style="badgeStyle"
+      :src="`/integrations/channels/badges/${badgeSrc}.png`"
+      alt="Badge"
+    />
+    <div
+      v-if="showStatusIndicator"
+      class="z-20"
+      :class="`source-badge user-online-status user-online-status--${status}`"
+      :style="statusStyle"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.user-thumbnail-box {
+  flex: 0 0 auto;
+  max-width: 100%;
+  position: relative;
+
+  &.is-rounded {
+    border-radius: 50%;
+  }
+
+  .user-thumbnail {
+    border-radius: 50%;
+    &.thumbnail-square {
+      border-radius: 0.5625rem;
+    }
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    object-fit: cover;
+    vertical-align: initial;
+  }
+
+  .source-badge {
+    border-radius: 0.1875rem;
+    bottom: -0.125rem;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    position: absolute;
+    right: 0;
+    @apply bg-n-background p-0.5 size-3;
+  }
+
+  .user-online-status {
+    @apply bottom-0.5 rounded-full;
+
+    &:after {
+      content: ' ';
+    }
+  }
+
+  .user-online-status--online {
+    @apply bg-n-teal-10;
+  }
+
+  .user-online-status--busy {
+    @apply bg-n-amber-10;
+  }
+
+  .user-online-status--offline {
+    @apply bg-n-slate-10;
+  }
+}
+</style>

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

@@ -1,69 +1,78 @@
-<script setup>
-import { computed } from 'vue';
-import Avatar from 'next/avatar/Avatar.vue';
+<script>
+import Thumbnail from './Thumbnail.vue';
 
-const props = defineProps({
-  usersList: {
-    type: Array,
-    default: () => [],
+export default {
+  components: {
+    Thumbnail,
   },
-  size: {
-    type: Number,
-    default: 24,
-  },
-  showMoreThumbnailsCount: {
-    type: Boolean,
-    default: false,
-  },
-  moreThumbnailsText: {
-    type: String,
-    default: '',
-  },
-  gap: {
-    type: String,
-    default: 'normal',
-    validator(value) {
-      // The value must match one of these strings
-      return ['normal', 'tight'].includes(value);
+  props: {
+    usersList: {
+      type: Array,
+      default: () => [],
+    },
+    size: {
+      type: String,
+      default: '24px',
+    },
+    showMoreThumbnailsCount: {
+      type: Boolean,
+      default: false,
+    },
+    moreThumbnailsText: {
+      type: String,
+      default: '',
+    },
+    gap: {
+      type: String,
+      default: 'normal',
+      validator(value) {
+        // The value must match one of these strings
+        return ['normal', '', 'tight'].includes(value);
+      },
     },
   },
-});
-
-const gapClass = computed(() => {
-  if (props.gap === 'tight') {
-    return 'ltr:[&:not(:first-child)]:-ml-2 rtl:[&:not(:first-child)]:-mr-2';
-  }
-  return 'ltr:[&:not(:first-child)]:-ml-1 rtl:[&:not(:first-child)]:-mr-1';
-});
-
-const moreThumbnailsClass = computed(() => {
-  if (props.gap === 'tight') {
-    return 'ltr:-ml-2 rtl:-mr-2';
-  }
-  return 'ltr:-ml-1 rtl:-mr-1';
-});
+};
 </script>
 
 <template>
-  <div class="flex">
-    <Avatar
+  <div class="overlapping-thumbnails">
+    <Thumbnail
       v-for="user in usersList"
       :key="user.id"
       v-tooltip="user.name"
       :title="user.name"
       :src="user.thumbnail"
-      :name="user.name"
+      :username="user.name"
+      has-border
       :size="size"
-      class="[&>span]:outline [&>span]:outline-1 [&>span]:outline-n-background [&>span]:shadow"
-      :class="gapClass"
-      rounded-full
+      :class="`overlapping-thumbnail gap-${gap}`"
     />
-    <span
-      v-if="showMoreThumbnailsCount"
-      class="text-n-slate-11 bg-n-slate-4 outline outline-1 outline-n-background text-xs font-medium rounded-full px-2 inline-flex items-center shadow relative"
-      :class="moreThumbnailsClass"
-    >
+    <span v-if="showMoreThumbnailsCount" class="thumbnail-more-text">
       {{ moreThumbnailsText }}
     </span>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.overlapping-thumbnails {
+  display: flex;
+}
+
+.overlapping-thumbnail {
+  position: relative;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+  &:not(:first-child) {
+    margin-left: -0.25rem;
+  }
+
+  .gap-tight {
+    margin-left: -0.5rem;
+  }
+}
+
+.thumbnail-more-text {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  @apply text-n-slate-11 bg-n-slate-4 border border-n-weak text-xs font-medium rounded-full px-2 ltr:-ml-2 rtl:-mr-2 inline-flex items-center relative;
+}
+</style>

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

@@ -1,5 +1,5 @@
 <script setup>
-import Avatar from 'next/avatar/Avatar.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
 defineProps({
   user: {
@@ -7,8 +7,8 @@ defineProps({
     default: () => ({}),
   },
   size: {
-    type: Number,
-    default: 20,
+    type: String,
+    default: '20px',
   },
   textClass: {
     type: String,
@@ -19,13 +19,11 @@ defineProps({
 
 <template>
   <div class="flex items-center gap-1.5 text-left">
-    <Avatar
+    <Thumbnail
       :src="user.thumbnail"
       :size="size"
-      :name="user.name"
+      :username="user.name"
       :status="user.availability_status"
-      hide-offline-status
-      rounded-full
     />
     <span class="my-0 truncate text-capitalize" :class="textClass">
       {{ user.name }}

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

@@ -15,7 +15,6 @@ import CannedResponse from '../conversation/CannedResponse.vue';
 import KeyboardEmojiSelector from './keyboardEmojiSelector.vue';
 import TagAgents from '../conversation/TagAgents.vue';
 import VariableList from '../conversation/VariableList.vue';
-import TagTools from '../conversation/TagTools.vue';
 
 import { useEmitter } from 'dashboard/composables/emitter';
 import { useI18n } from 'vue-i18n';
@@ -73,7 +72,6 @@ const props = defineProps({
   updateSelectionWith: { type: String, default: '' },
   enableVariables: { type: Boolean, default: false },
   enableCannedResponses: { type: Boolean, default: true },
-  enableCaptainTools: { type: Boolean, default: false },
   variables: { type: Object, default: () => ({}) },
   enabledMenuOptions: { type: Array, default: () => [] },
   signature: { type: String, default: '' },
@@ -91,7 +89,6 @@ const emit = defineEmits([
   'toggleUserMention',
   'toggleCannedMenu',
   'toggleVariablesMenu',
-  'toggleToolsMenu',
   'clearSelection',
   'blur',
   'focus',
@@ -143,9 +140,7 @@ const showUserMentions = ref(false);
 const showCannedMenu = ref(false);
 const showVariables = ref(false);
 const showEmojiMenu = ref(false);
-const showToolsMenu = ref(false);
 const mentionSearchKey = ref('');
-const toolSearchKey = ref('');
 const cannedSearchTerm = ref('');
 const variableSearchTerm = ref('');
 const emojiSearchTerm = ref('');
@@ -221,17 +216,11 @@ const plugins = computed(() => {
   }
 
   return [
-    createSuggestionPlugin({
-      trigger: '@',
-      showMenu: showToolsMenu,
-      searchTerm: toolSearchKey,
-      isAllowed: () => props.enableCaptainTools,
-    }),
     createSuggestionPlugin({
       trigger: '@',
       showMenu: showUserMentions,
       searchTerm: mentionSearchKey,
-      isAllowed: () => props.isPrivate || !props.enableCaptainTools,
+      isAllowed: () => props.isPrivate,
     }),
     createSuggestionPlugin({
       trigger: '/',
@@ -273,9 +262,6 @@ watch(showCannedMenu, updatedValue => {
 watch(showVariables, updatedValue => {
   emit('toggleVariablesMenu', !props.isPrivate && updatedValue);
 });
-watch(showToolsMenu, updatedValue => {
-  emit('toggleToolsMenu', props.enableCaptainTools && updatedValue);
-});
 
 function focusEditorInputField(pos = 'end') {
   const { tr } = editorView.state;
@@ -552,7 +538,6 @@ function insertSpecialContent(type, content) {
     cannedResponse: CONVERSATION_EVENTS.INSERTED_A_CANNED_RESPONSE,
     variable: CONVERSATION_EVENTS.INSERTED_A_VARIABLE,
     emoji: CONVERSATION_EVENTS.INSERTED_AN_EMOJI,
-    tool: CONVERSATION_EVENTS.INSERTED_A_TOOL,
   };
 
   useTrack(event_map[type]);
@@ -714,11 +699,6 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
       :search-key="emojiSearchTerm"
       @select-emoji="emoji => insertSpecialContent('emoji', emoji)"
     />
-    <TagTools
-      v-if="showToolsMenu"
-      :search-key="toolSearchKey"
-      @select-tool="content => insertSpecialContent('tool', content)"
-    />
     <input
       ref="imageUpload"
       type="file"
@@ -832,10 +812,6 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
   }
 }
 
-.prosemirror-tools-node {
-  @apply font-medium text-n-slate-12 py-0;
-}
-
 .editor-wrap {
   @apply mb-4;
 }

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

@@ -1,12 +1,12 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
+<script>
+import { mapGetters } from 'vuex';
 import { getLastMessage } from 'dashboard/helper/conversationHelper';
-import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
-import Avatar from 'next/avatar/Avatar.vue';
+import Thumbnail from '../Thumbnail.vue';
 import MessagePreview from './MessagePreview.vue';
+import router from '../../../routes';
+import { frontendURL, conversationUrl } from '../../../helper/URLHelper';
 import InboxName from '../InboxName.vue';
+import inboxMixin from 'shared/mixins/inboxMixin';
 import ConversationContextMenu from './contextMenu/Index.vue';
 import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
 import CardLabels from './conversationCardComponents/CardLabels.vue';
@@ -14,227 +14,247 @@ import PriorityMark from './PriorityMark.vue';
 import SLACardLabel from './components/SLACardLabel.vue';
 import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
 
-const props = defineProps({
-  activeLabel: { type: String, default: '' },
-  chat: { type: Object, default: () => ({}) },
-  hideInboxName: { type: Boolean, default: false },
-  hideThumbnail: { type: Boolean, default: false },
-  teamId: { type: [String, Number], default: 0 },
-  foldersId: { type: [String, Number], default: 0 },
-  showAssignee: { type: Boolean, default: false },
-  conversationType: { type: String, default: '' },
-  selected: { type: Boolean, default: false },
-  compact: { type: Boolean, default: false },
-  enableContextMenu: { type: Boolean, default: false },
-  allowedContextMenuOptions: { type: Array, default: () => [] },
-});
+export default {
+  components: {
+    CardLabels,
+    InboxName,
+    Thumbnail,
+    ConversationContextMenu,
+    TimeAgo,
+    MessagePreview,
+    PriorityMark,
+    SLACardLabel,
+    ContextMenu,
+  },
+  mixins: [inboxMixin],
+  props: {
+    activeLabel: {
+      type: String,
+      default: '',
+    },
+    chat: {
+      type: Object,
+      default: () => {},
+    },
+    hideInboxName: {
+      type: Boolean,
+      default: false,
+    },
+    hideThumbnail: {
+      type: Boolean,
+      default: false,
+    },
+    teamId: {
+      type: [String, Number],
+      default: 0,
+    },
+    foldersId: {
+      type: [String, Number],
+      default: 0,
+    },
+    showAssignee: {
+      type: Boolean,
+      default: false,
+    },
+    conversationType: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+    enableContextMenu: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: [
+    'contextMenuToggle',
+    'assignAgent',
+    'assignLabel',
+    'assignTeam',
+    'markAsUnread',
+    'markAsRead',
+    'assignPriority',
+    'updateConversationStatus',
+    'deleteConversation',
+  ],
+  data() {
+    return {
+      hovered: false,
+      showContextMenu: false,
+      contextMenu: {
+        x: null,
+        y: null,
+      },
+    };
+  },
+  computed: {
+    ...mapGetters({
+      currentChat: 'getSelectedChat',
+      inboxesList: 'inboxes/getInboxes',
+      activeInbox: 'getSelectedInbox',
+      accountId: 'getCurrentAccountId',
+    }),
+    chatMetadata() {
+      return this.chat.meta || {};
+    },
 
-const emit = defineEmits([
-  'contextMenuToggle',
-  'assignAgent',
-  'assignLabel',
-  'assignTeam',
-  'markAsUnread',
-  'markAsRead',
-  'assignPriority',
-  'updateConversationStatus',
-  'deleteConversation',
-  'selectConversation',
-  'deSelectConversation',
-]);
+    assignee() {
+      return this.chatMetadata.assignee || {};
+    },
 
-const router = useRouter();
-const store = useStore();
+    currentContact() {
+      return this.$store.getters['contacts/getContact'](
+        this.chatMetadata.sender.id
+      );
+    },
 
-const hovered = ref(false);
-const showContextMenu = ref(false);
-const contextMenu = ref({
-  x: null,
-  y: null,
-});
+    isActiveChat() {
+      return this.currentChat.id === this.chat.id;
+    },
 
-const currentChat = useMapGetter('getSelectedChat');
-const inboxesList = useMapGetter('inboxes/getInboxes');
-const activeInbox = useMapGetter('getSelectedInbox');
-const accountId = useMapGetter('getCurrentAccountId');
+    unreadCount() {
+      return this.chat.unread_count;
+    },
 
-const chatMetadata = computed(() => props.chat.meta || {});
+    hasUnread() {
+      return this.unreadCount > 0;
+    },
 
-const assignee = computed(() => chatMetadata.value.assignee || {});
+    isInboxNameVisible() {
+      return !this.activeInbox;
+    },
 
-const senderId = computed(() => chatMetadata.value.sender?.id);
+    lastMessageInChat() {
+      return getLastMessage(this.chat);
+    },
 
-const currentContact = computed(() => {
-  return senderId.value
-    ? store.getters['contacts/getContact'](senderId.value)
-    : {};
-});
+    inbox() {
+      const { inbox_id: inboxId } = this.chat;
+      const stateInbox = this.$store.getters['inboxes/getInbox'](inboxId);
+      return stateInbox;
+    },
 
-const isActiveChat = computed(() => {
-  return currentChat.value.id === props.chat.id;
-});
+    showInboxName() {
+      return (
+        !this.hideInboxName &&
+        this.isInboxNameVisible &&
+        this.inboxesList.length > 1
+      );
+    },
+    inboxName() {
+      const stateInbox = this.inbox;
+      return stateInbox.name || '';
+    },
+    hasSlaPolicyId() {
+      return this.chat?.sla_policy_id;
+    },
+  },
+  methods: {
+    onCardClick(e) {
+      const { activeInbox, chat } = this;
+      const path = frontendURL(
+        conversationUrl({
+          accountId: this.accountId,
+          activeInbox,
+          id: chat.id,
+          label: this.activeLabel,
+          teamId: this.teamId,
+          foldersId: this.foldersId,
+          conversationType: this.conversationType,
+        })
+      );
 
-const unreadCount = computed(() => props.chat.unread_count);
+      if (e.metaKey || e.ctrlKey) {
+        window.open(
+          window.chatwootConfig.hostURL + path,
+          '_blank',
+          'noopener noreferrer nofollow'
+        );
+        return;
+      }
+      if (this.isActiveChat) {
+        return;
+      }
 
-const hasUnread = computed(() => unreadCount.value > 0);
-
-const isInboxNameVisible = computed(() => !activeInbox.value);
-
-const lastMessageInChat = computed(() => getLastMessage(props.chat));
-
-const inboxId = computed(() => props.chat.inbox_id);
-
-const inbox = computed(() => {
-  return inboxId.value ? store.getters['inboxes/getInbox'](inboxId.value) : {};
-});
-
-const showInboxName = computed(() => {
-  return (
-    !props.hideInboxName &&
-    isInboxNameVisible.value &&
-    inboxesList.value.length > 1
-  );
-});
-
-const showMetaSection = computed(() => {
-  return (
-    showInboxName.value ||
-    (props.showAssignee && assignee.value.name) ||
-    props.chat.priority
-  );
-});
-
-const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
-
-const showLabelsSection = computed(() => {
-  return props.chat.labels?.length > 0 || hasSlaPolicyId.value;
-});
-
-const messagePreviewClass = computed(() => {
-  return [
-    hasUnread.value ? 'font-medium text-n-slate-12' : 'text-n-slate-11',
-    !props.compact && hasUnread.value ? 'ltr:pr-4 rtl:pl-4' : '',
-    props.compact && hasUnread.value ? 'ltr:pr-6 rtl:pl-6' : '',
-  ];
-});
-
-const conversationPath = computed(() => {
-  return frontendURL(
-    conversationUrl({
-      accountId: accountId.value,
-      activeInbox: activeInbox.value,
-      id: props.chat.id,
-      label: props.activeLabel,
-      teamId: props.teamId,
-      conversationType: props.conversationType,
-      foldersId: props.foldersId,
-    })
-  );
-});
-
-const onCardClick = e => {
-  const path = conversationPath.value;
-  if (!path) return;
-
-  // Handle Ctrl/Cmd + Click for new tab
-  if (e.metaKey || e.ctrlKey) {
-    e.preventDefault();
-    window.open(
-      `${window.chatwootConfig.hostURL}${path}`,
-      '_blank',
-      'noopener,noreferrer'
-    );
-    return;
-  }
-
-  // Skip if already active
-  if (isActiveChat.value) return;
-
-  router.push({ path });
-};
-
-const onThumbnailHover = () => {
-  hovered.value = !props.hideThumbnail;
-};
-
-const onThumbnailLeave = () => {
-  hovered.value = false;
-};
-
-const onSelectConversation = checked => {
-  if (checked) {
-    emit('selectConversation', props.chat.id, inbox.value.id);
-  } else {
-    emit('deSelectConversation', props.chat.id, inbox.value.id);
-  }
-};
-
-const openContextMenu = e => {
-  if (!props.enableContextMenu) return;
-  e.preventDefault();
-  emit('contextMenuToggle', true);
-  contextMenu.value.x = e.pageX || e.clientX;
-  contextMenu.value.y = e.pageY || e.clientY;
-  showContextMenu.value = true;
-};
-
-const closeContextMenu = () => {
-  emit('contextMenuToggle', false);
-  showContextMenu.value = false;
-  contextMenu.value.x = null;
-  contextMenu.value.y = null;
-};
-
-const onUpdateConversation = (status, snoozedUntil) => {
-  closeContextMenu();
-  emit('updateConversationStatus', props.chat.id, status, snoozedUntil);
-};
-
-const onAssignAgent = agent => {
-  emit('assignAgent', agent, [props.chat.id]);
-  closeContextMenu();
-};
-
-const onAssignLabel = label => {
-  emit('assignLabel', [label.title], [props.chat.id]);
-  closeContextMenu();
-};
-
-const onAssignTeam = team => {
-  emit('assignTeam', team, props.chat.id);
-  closeContextMenu();
-};
-
-const markAsUnread = () => {
-  emit('markAsUnread', props.chat.id);
-  closeContextMenu();
-};
-
-const markAsRead = () => {
-  emit('markAsRead', props.chat.id);
-  closeContextMenu();
-};
-
-const assignPriority = priority => {
-  emit('assignPriority', priority, props.chat.id);
-  closeContextMenu();
-};
-
-const deleteConversation = () => {
-  emit('deleteConversation', props.chat.id);
-  closeContextMenu();
+      router.push({ path });
+    },
+    onThumbnailHover() {
+      this.hovered = !this.hideThumbnail;
+    },
+    onThumbnailLeave() {
+      this.hovered = false;
+    },
+    onSelectConversation(checked) {
+      const action = checked ? 'selectConversation' : 'deSelectConversation';
+      this.$emit(action, this.chat.id, this.inbox.id);
+    },
+    openContextMenu(e) {
+      if (!this.enableContextMenu) return;
+      e.preventDefault();
+      this.$emit('contextMenuToggle', true);
+      this.contextMenu.x = e.pageX || e.clientX;
+      this.contextMenu.y = e.pageY || e.clientY;
+      this.showContextMenu = true;
+    },
+    closeContextMenu() {
+      this.$emit('contextMenuToggle', false);
+      this.showContextMenu = false;
+      this.contextMenu.x = null;
+      this.contextMenu.y = null;
+    },
+    onUpdateConversation(status, snoozedUntil) {
+      this.closeContextMenu();
+      this.$emit(
+        'updateConversationStatus',
+        this.chat.id,
+        status,
+        snoozedUntil
+      );
+    },
+    async onAssignAgent(agent) {
+      this.$emit('assignAgent', agent, [this.chat.id]);
+      this.closeContextMenu();
+    },
+    async onAssignLabel(label) {
+      this.$emit('assignLabel', [label.title], [this.chat.id]);
+      this.closeContextMenu();
+    },
+    async onAssignTeam(team) {
+      this.$emit('assignTeam', team, this.chat.id);
+      this.closeContextMenu();
+    },
+    async markAsUnread() {
+      this.$emit('markAsUnread', this.chat.id);
+      this.closeContextMenu();
+    },
+    async markAsRead() {
+      this.$emit('markAsRead', this.chat.id);
+      this.closeContextMenu();
+    },
+    async assignPriority(priority) {
+      this.$emit('assignPriority', priority, this.chat.id);
+      this.closeContextMenu();
+    },
+    async deleteConversation() {
+      this.$emit('deleteConversation', this.chat.id);
+      this.closeContextMenu();
+    },
+  },
 };
 </script>
 
 <template>
   <div
-    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full py-0 border-t-0 border-b-0 border-l-0 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group"
+    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-3 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group"
     :class="{
       'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3 border-n-weak':
         isActiveChat,
-      'bg-n-slate-2 dark:bg-n-slate-3': selected,
-      'px-0': compact,
-      'px-3': !compact,
+      'unread-chat': hasUnread,
+      'has-inbox-name': showInboxName,
+      'conversation-selected': selected,
     }"
     @click="onCardClick"
     @contextmenu="openContextMenu($event)"
@@ -244,65 +264,46 @@ const deleteConversation = () => {
       @mouseenter="onThumbnailHover"
       @mouseleave="onThumbnailLeave"
     >
-      <Avatar
-        v-if="!hideThumbnail"
-        :name="currentContact.name"
-        :src="currentContact.thumbnail"
-        :size="32"
-        :status="currentContact.availability_status"
-        :inbox="inbox"
-        :class="!showInboxName ? 'mt-4' : 'mt-8'"
-        hide-offline-status
-        rounded-full
+      <label
+        v-if="hovered || selected"
+        class="checkbox-wrapper absolute inset-0 z-20 backdrop-blur-[2px]"
+        @click.stop
       >
-        <template #overlay="{ size }">
-          <label
-            v-if="hovered || selected"
-            class="flex items-center justify-center rounded-full cursor-pointer absolute inset-0 z-10 backdrop-blur-[2px]"
-            :style="{ width: `${size}px`, height: `${size}px` }"
-            @click.stop
-          >
-            <input
-              :value="selected"
-              :checked="selected"
-              class="!m-0 cursor-pointer"
-              type="checkbox"
-              @change="onSelectConversation($event.target.checked)"
-            />
-          </label>
-        </template>
-      </Avatar>
+        <input
+          :value="selected"
+          :checked="selected"
+          class="checkbox"
+          type="checkbox"
+          @change="onSelectConversation($event.target.checked)"
+        />
+      </label>
+      <Thumbnail
+        v-if="!hideThumbnail"
+        :src="currentContact.thumbnail"
+        :badge="inboxBadge"
+        :username="currentContact.name"
+        :status="currentContact.availability_status"
+        size="32px"
+      />
     </div>
     <div
-      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-n-slate-3 min-w-0"
+      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-n-slate-3 w-[calc(100%-40px)]"
     >
-      <div
-        v-if="showMetaSection"
-        class="flex items-center min-w-0 gap-1"
-        :class="{
-          'ltr:ml-2 rtl:mr-2': !compact,
-          'mx-2': compact,
-        }"
-      >
-        <InboxName v-if="showInboxName" :inbox="inbox" class="flex-1 min-w-0" />
-        <div
-          class="flex items-center gap-2 flex-shrink-0"
-          :class="{
-            'flex-1 justify-between': !showInboxName,
-          }"
-        >
+      <div class="flex justify-between conversation-card--meta">
+        <InboxName v-if="showInboxName" :inbox="inbox" />
+        <div class="flex gap-2 ml-2 rtl:mr-2 rtl:ml-0">
           <span
             v-if="showAssignee && assignee.name"
-            class="text-n-slate-11 text-xs font-medium leading-3 py-0.5 px-0 inline-flex items-center truncate"
+            class="text-n-slate-11 text-xs font-medium leading-3 py-0.5 px-0 inline-flex text-ellipsis overflow-hidden whitespace-nowrap"
           >
             <fluent-icon icon="person" size="12" class="text-n-slate-11" />
             {{ assignee.name }}
           </span>
-          <PriorityMark :priority="chat.priority" class="flex-shrink-0" />
+          <PriorityMark :priority="chat.priority" />
         </div>
       </div>
       <h4
-        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis overflow-hidden whitespace-nowrap flex-1 min-w-0 ltr:pr-16 rtl:pl-16 text-n-slate-12"
+        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis overflow-hidden whitespace-nowrap w-[calc(100%-70px)] text-n-slate-12"
         :class="hasUnread ? 'font-semibold' : 'font-medium'"
       >
         {{ currentContact.name }}
@@ -310,27 +311,24 @@ const deleteConversation = () => {
       <MessagePreview
         v-if="lastMessageInChat"
         :message="lastMessageInChat"
-        class="my-0 mx-2 leading-6 h-6 flex-1 min-w-0 text-sm"
-        :class="messagePreviewClass"
+        class="conversation--message my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] text-sm"
+        :class="hasUnread ? 'font-medium text-n-slate-12' : 'text-n-slate-11'"
       />
       <p
         v-else
-        class="text-n-slate-11 text-sm my-0 mx-2 leading-6 h-6 flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"
-        :class="messagePreviewClass"
+        class="conversation--message text-n-slate-11 text-sm my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] overflow-hidden text-ellipsis whitespace-nowrap"
+        :class="hasUnread ? 'font-medium text-n-slate-12' : 'text-n-slate-11'"
       >
         <fluent-icon
           size="16"
           class="-mt-0.5 align-middle inline-block text-n-slate-10"
           icon="info"
         />
-        <span class="mx-0.5">
+        <span>
           {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
         </span>
       </p>
-      <div
-        class="absolute flex flex-col ltr:right-3 rtl:left-3"
-        :class="showMetaSection ? 'top-8' : 'top-4'"
-      >
+      <div class="absolute flex flex-col mt-4 ltr:right-4 rtl:left-4 top-4">
         <span class="ml-auto font-normal leading-4 text-xxs">
           <TimeAgo
             :last-activity-timestamp="chat.timestamp"
@@ -338,17 +336,12 @@ const deleteConversation = () => {
           />
         </span>
         <span
-          class="shadow-lg rounded-full text-xxs font-semibold h-4 leading-4 ltr:ml-auto rtl:mr-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-n-teal-9"
-          :class="hasUnread ? 'block' : 'hidden'"
+          class="unread shadow-lg rounded-full hidden text-xxs font-semibold h-4 leading-4 ltr:ml-auto rtl:mr-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-n-teal-9"
         >
           {{ unreadCount > 9 ? '9+' : unreadCount }}
         </span>
       </div>
-      <CardLabels
-        v-if="showLabelsSection"
-        :conversation-labels="chat.labels"
-        class="mt-0.5 mx-2 mb-0"
-      >
+      <CardLabels :conversation-labels="chat.labels" class="mt-0.5 mx-2 mb-0">
         <template v-if="hasSlaPolicyId" #before>
           <SLACardLabel :chat="chat" class="ltr:mr-1 rtl:ml-1" />
         </template>
@@ -366,8 +359,6 @@ const deleteConversation = () => {
         :priority="chat.priority"
         :chat-id="chat.id"
         :has-unread-messages="hasUnread"
-        :conversation-url="conversationPath"
-        :allowed-options="allowedContextMenuOptions"
         @update-conversation="onUpdateConversation"
         @assign-agent="onAssignAgent"
         @assign-label="onAssignLabel"
@@ -376,8 +367,59 @@ const deleteConversation = () => {
         @mark-as-read="markAsRead"
         @assign-priority="assignPriority"
         @delete-conversation="deleteConversation"
-        @close="closeContextMenu"
       />
     </ContextMenu>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.conversation {
+  &.unread-chat {
+    .unread {
+      @apply block;
+    }
+  }
+
+  &.compact {
+    @apply pl-0;
+
+    .conversation-card--meta {
+      @apply ltr:pr-4 rtl:pl-4;
+    }
+
+    .conversation--details {
+      @apply rounded-sm ml-0 pl-5 pr-2;
+    }
+  }
+
+  &::v-deep .user-thumbnail-box {
+    @apply mt-4;
+  }
+
+  &.conversation-selected {
+    @apply bg-n-slate-2 dark:bg-n-slate-3;
+  }
+
+  &.has-inbox-name {
+    &::v-deep .user-thumbnail-box {
+      @apply mt-8;
+    }
+
+    .checkbox-wrapper {
+      @apply mt-8;
+    }
+
+    .conversation--meta {
+      @apply mt-4;
+    }
+  }
+
+  .checkbox-wrapper {
+    @apply flex items-center justify-center rounded-full cursor-pointer mt-4;
+
+    input[type='checkbox'] {
+      @apply m-0 cursor-pointer;
+    }
+  }
+}
+</style>

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

@@ -6,7 +6,7 @@ import { useElementSize } from '@vueuse/core';
 import BackButton from '../BackButton.vue';
 import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
-import Avatar from 'next/avatar/Avatar.vue';
+import Thumbnail from '../Thumbnail.vue';
 import SLACardLabel from './components/SLACardLabel.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
@@ -105,13 +105,12 @@ const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
         :back-url="backButtonUrl"
         class="ltr:mr-2 rtl:ml-2"
       />
-      <Avatar
-        :name="currentContact.name"
+      <Thumbnail
         :src="currentContact.thumbnail"
-        :size="32"
+        :username="currentContact.name"
         :status="currentContact.availability_status"
-        hide-offline-status
-        rounded-full
+        size="32px"
+        class="flex-shrink-0"
       />
       <div
         class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2"

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

@@ -2,9 +2,6 @@
 import { computed } from 'vue';
 import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
-import { useWindowSize } from '@vueuse/core';
-import { vOnClickOutside } from '@vueuse/components';
-import wootConstants from 'dashboard/constants/globals';
 
 defineProps({
   currentChat: {
@@ -13,8 +10,7 @@ defineProps({
   },
 });
 
-const { uiSettings, updateUISettings } = useUISettings();
-const { width: windowWidth } = useWindowSize();
+const { uiSettings } = useUISettings();
 
 const activeTab = computed(() => {
   const { is_contact_sidebar_open: isContactSidebarOpen } = uiSettings.value;
@@ -24,31 +20,11 @@ const activeTab = computed(() => {
   }
   return null;
 });
-
-const isSmallScreen = computed(
-  () => windowWidth.value < wootConstants.SMALL_SCREEN_BREAKPOINT
-);
-
-const closeContactPanel = () => {
-  if (isSmallScreen.value && uiSettings.value?.is_contact_sidebar_open) {
-    updateUISettings({
-      is_contact_sidebar_open: false,
-      is_copilot_panel_open: false,
-    });
-  }
-};
 </script>
 
 <template>
   <div
-    v-on-click-outside="() => closeContactPanel()"
-    class="bg-n-background h-full overflow-hidden flex flex-col fixed top-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out ltr:right-0 rtl:left-0 md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
-    :class="[
-      {
-        'md:flex': activeTab === 0,
-        'md:hidden': activeTab !== 0,
-      },
-    ]"
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-[320px] min-w-[320px] 2xl:min-w-[360px] 2xl:w-[360px] flex flex-col bg-n-background"
   >
     <div class="flex flex-1 overflow-auto">
       <ContactPanel

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

@@ -1,56 +0,0 @@
-<script setup>
-import { ref, computed, watch } from 'vue';
-import ToolsDropdown from 'dashboard/components-next/captain/assistant/ToolsDropdown.vue';
-import { useKeyboardNavigableList } from 'dashboard/composables/useKeyboardNavigableList';
-import { useMapGetter } from 'dashboard/composables/store.js';
-
-const props = defineProps({
-  searchKey: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['selectTool']);
-
-const tools = useMapGetter('captainTools/getRecords');
-
-const selectedIndex = ref(0);
-
-const filteredTools = computed(() => {
-  const search = props.searchKey?.trim().toLowerCase() || '';
-
-  return tools.value.filter(tool => tool.title.toLowerCase().includes(search));
-});
-
-const adjustScroll = () => {};
-
-const onSelect = idx => {
-  if (idx) selectedIndex.value = idx;
-  emit('selectTool', filteredTools.value[selectedIndex.value]);
-};
-
-useKeyboardNavigableList({
-  items: filteredTools,
-  onSelect,
-  adjustScroll,
-  selectedIndex,
-});
-
-watch(filteredTools, newListOfTools => {
-  if (newListOfTools.length < selectedIndex.value + 1) {
-    selectedIndex.value = 0;
-  }
-});
-</script>
-
-<template>
-  <ToolsDropdown
-    v-if="filteredTools.length"
-    :items="filteredTools"
-    :selected-index="selectedIndex"
-    class="bottom-20"
-    @select="onSelect"
-  />
-  <template v-else />
-</template>

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script>
 /**
  * This component handles parsing and sending WhatsApp message templates.
  * It works as follows:
@@ -8,51 +8,158 @@
  * 4. Replaces placeholders with user-provided values.
  * 5. Emits events to send the processed message or reset the template.
  */
-import WhatsAppTemplateParser from 'dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue';
+import { ref, computed, onMounted } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { requiredIf } from '@vuelidate/validators';
+
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
-defineProps({
-  template: {
-    type: Object,
-    default: () => ({}),
+export default {
+  components: {
+    NextButton,
   },
-});
+  props: {
+    template: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  emits: ['sendMessage', 'resetTemplate'],
+  setup(props, { emit }) {
+    const processVariable = str => {
+      return str.replace(/{{|}}/g, '');
+    };
 
-const emit = defineEmits(['sendMessage', 'resetTemplate']);
+    const allKeysRequired = value => {
+      const keys = Object.keys(value);
+      return keys.every(key => value[key]);
+    };
 
-const handleSendMessage = payload => {
-  emit('sendMessage', payload);
-};
+    const processedParams = ref({});
 
-const handleResetTemplate = () => {
-  emit('resetTemplate');
+    const templateString = computed(() => {
+      return props.template.components.find(
+        component => component.type === 'BODY'
+      ).text;
+    });
+
+    const variables = computed(() => {
+      return templateString.value.match(/{{([^}]+)}}/g);
+    });
+
+    const processedString = computed(() => {
+      return templateString.value.replace(/{{([^}]+)}}/g, (match, variable) => {
+        const variableKey = processVariable(variable);
+        return processedParams.value[variableKey] || `{{${variable}}}`;
+      });
+    });
+
+    const v$ = useVuelidate(
+      {
+        processedParams: {
+          requiredIfKeysPresent: requiredIf(variables),
+          allKeysRequired,
+        },
+      },
+      { processedParams }
+    );
+
+    const generateVariables = () => {
+      const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
+      if (!matchedVariables) return;
+
+      const finalVars = matchedVariables.map(i => processVariable(i));
+      processedParams.value = finalVars.reduce((acc, variable) => {
+        acc[variable] = '';
+        return acc;
+      }, {});
+    };
+
+    const resetTemplate = () => {
+      emit('resetTemplate');
+    };
+
+    const sendMessage = () => {
+      v$.value.$touch();
+      if (v$.value.$invalid) return;
+
+      const payload = {
+        message: processedString.value,
+        templateParams: {
+          name: props.template.name,
+          category: props.template.category,
+          language: props.template.language,
+          namespace: props.template.namespace,
+          processed_params: processedParams.value,
+        },
+      };
+      emit('sendMessage', payload);
+    };
+
+    onMounted(generateVariables);
+
+    return {
+      processedParams,
+      variables,
+      templateString,
+      processedString,
+      v$,
+      resetTemplate,
+      sendMessage,
+    };
+  },
 };
 </script>
 
 <template>
   <div class="w-full">
-    <WhatsAppTemplateParser
-      :template="template"
-      @send-message="handleSendMessage"
-      @reset-template="handleResetTemplate"
-    >
-      <template #actions="{ sendMessage, resetTemplate, disabled }">
-        <footer class="flex gap-2 justify-end">
-          <NextButton
-            faded
-            slate
-            type="reset"
-            :label="$t('WHATSAPP_TEMPLATES.PARSER.GO_BACK_LABEL')"
-            @click="resetTemplate"
-          />
-          <NextButton
-            type="button"
-            :label="$t('WHATSAPP_TEMPLATES.PARSER.SEND_MESSAGE_LABEL')"
-            :disabled="disabled"
-            @click="sendMessage"
-          />
-        </footer>
-      </template>
-    </WhatsAppTemplateParser>
+    <textarea
+      v-model="processedString"
+      rows="4"
+      readonly
+      class="template-input"
+    />
+    <div v-if="variables" class="p-2.5">
+      <p class="text-sm font-semibold mb-2.5">
+        {{ $t('WHATSAPP_TEMPLATES.PARSER.VARIABLES_LABEL') }}
+      </p>
+      <div
+        v-for="(variable, key) in processedParams"
+        :key="key"
+        class="items-center flex mb-2.5"
+      >
+        <span
+          class="bg-n-alpha-black2 text-n-slate-12 inline-block rounded-md text-xs py-2.5 px-6"
+        >
+          {{ key }}
+        </span>
+        <woot-input
+          v-model="processedParams[key]"
+          type="text"
+          class="flex-1 text-sm ml-2.5"
+          :styles="{ marginBottom: 0 }"
+        />
+      </div>
+      <p
+        v-if="v$.$dirty && v$.$invalid"
+        class="bg-n-ruby-9/20 rounded-md text-n-ruby-9 p-2.5 text-center"
+      >
+        {{ $t('WHATSAPP_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
+      </p>
+    </div>
+    <footer class="flex justify-end gap-2">
+      <NextButton
+        faded
+        slate
+        type="reset"
+        :label="$t('WHATSAPP_TEMPLATES.PARSER.GO_BACK_LABEL')"
+        @click="resetTemplate"
+      />
+      <NextButton
+        type="button"
+        :label="$t('WHATSAPP_TEMPLATES.PARSER.SEND_MESSAGE_LABEL')"
+        @click="sendMessage"
+      />
+    </footer>
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue

@@ -1,71 +1,60 @@
-<script setup>
-import { ref, computed, toRef } from 'vue';
+<script>
 import { useAlert } from 'dashboard/composables';
-import { useFunctionGetter, useStore } from 'dashboard/composables/store';
-import {
-  COMPONENT_TYPES,
-  MEDIA_FORMATS,
-  findComponentByType,
-} from 'dashboard/helper/templateHelper';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
-import { useI18n } from 'vue-i18n';
+// TODO: Remove this when we support all formats
+const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
 
-const props = defineProps({
-  inboxId: {
-    type: Number,
-    default: undefined,
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    inboxId: {
+      type: Number,
+      default: undefined,
+    },
+  },
+  emits: ['onSelect'],
+  data() {
+    return {
+      query: '',
+      isRefreshing: false,
+    };
+  },
+  computed: {
+    whatsAppTemplateMessages() {
+      // TODO: Remove the last filter when we support all formats
+      return this.$store.getters['inboxes/getWhatsAppTemplates'](this.inboxId)
+        .filter(template => template.status.toLowerCase() === 'approved')
+        .filter(template => {
+          return template.components.every(component => {
+            return !formatsToRemove.includes(component.format);
+          });
+        });
+    },
+    filteredTemplateMessages() {
+      return this.whatsAppTemplateMessages.filter(template =>
+        template.name.toLowerCase().includes(this.query.toLowerCase())
+      );
+    },
+  },
+  methods: {
+    getTemplatebody(template) {
+      return template.components.find(component => component.type === 'BODY')
+        .text;
+    },
+    async refreshTemplates() {
+      this.isRefreshing = true;
+      try {
+        await this.$store.dispatch('inboxes/syncTemplates', this.inboxId);
+        useAlert(this.$t('WHATSAPP_TEMPLATES.PICKER.REFRESH_SUCCESS'));
+      } catch (error) {
+        useAlert(this.$t('WHATSAPP_TEMPLATES.PICKER.REFRESH_ERROR'));
+      } finally {
+        this.isRefreshing = false;
+      }
+    },
   },
-});
-
-const emit = defineEmits(['onSelect']);
-
-const { t } = useI18n();
-const store = useStore();
-const query = ref('');
-const isRefreshing = ref(false);
-
-const whatsAppTemplateMessages = useFunctionGetter(
-  'inboxes/getFilteredWhatsAppTemplates',
-  toRef(props, 'inboxId')
-);
-
-const filteredTemplateMessages = computed(() =>
-  whatsAppTemplateMessages.value.filter(template =>
-    template.name.toLowerCase().includes(query.value.toLowerCase())
-  )
-);
-
-const getTemplateBody = template => {
-  return findComponentByType(template, COMPONENT_TYPES.BODY)?.text || '';
-};
-
-const getTemplateHeader = template => {
-  return findComponentByType(template, COMPONENT_TYPES.HEADER);
-};
-
-const getTemplateFooter = template => {
-  return findComponentByType(template, COMPONENT_TYPES.FOOTER);
-};
-
-const getTemplateButtons = template => {
-  return findComponentByType(template, COMPONENT_TYPES.BUTTONS);
-};
-
-const hasMediaContent = template => {
-  const header = getTemplateHeader(template);
-  return header && MEDIA_FORMATS.includes(header.format);
-};
-
-const refreshTemplates = async () => {
-  isRefreshing.value = true;
-  try {
-    await store.dispatch('inboxes/syncTemplates', props.inboxId);
-    useAlert(t('WHATSAPP_TEMPLATES.PICKER.REFRESH_SUCCESS'));
-  } catch (error) {
-    useAlert(t('WHATSAPP_TEMPLATES.PICKER.REFRESH_ERROR'));
-  } finally {
-    isRefreshing.value = false;
-  }
 };
 </script>
 
@@ -79,14 +68,14 @@ const refreshTemplates = async () => {
         <input
           v-model="query"
           type="search"
-          :placeholder="t('WHATSAPP_TEMPLATES.PICKER.SEARCH_PLACEHOLDER')"
+          :placeholder="$t('WHATSAPP_TEMPLATES.PICKER.SEARCH_PLACEHOLDER')"
           class="reset-base w-full h-9 bg-transparent text-n-slate-12 !text-sm !outline-0"
         />
       </div>
       <button
         :disabled="isRefreshing"
         class="flex justify-center items-center w-9 h-9 rounded-lg bg-n-alpha-black2 outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 hover:bg-n-alpha-2 dark:hover:bg-n-solid-2 disabled:opacity-50 disabled:cursor-not-allowed"
-        :title="t('WHATSAPP_TEMPLATES.PICKER.REFRESH_BUTTON')"
+        :title="$t('WHATSAPP_TEMPLATES.PICKER.REFRESH_BUTTON')"
         @click="refreshTemplates"
       >
         <Icon
@@ -102,7 +91,7 @@ const refreshTemplates = async () => {
       <div v-for="(template, i) in filteredTemplateMessages" :key="template.id">
         <button
           class="block p-2.5 w-full text-left rounded-lg cursor-pointer hover:bg-n-alpha-2 dark:hover:bg-n-solid-2"
-          @click="emit('onSelect', template)"
+          @click="$emit('onSelect', template)"
         >
           <div>
             <div class="flex justify-between items-center mb-2.5">
@@ -112,73 +101,21 @@ const refreshTemplates = async () => {
               <span
                 class="inline-block px-2 py-1 text-xs leading-none rounded-lg cursor-default bg-n-slate-3 text-n-slate-12"
               >
-                {{ t('WHATSAPP_TEMPLATES.PICKER.LABELS.LANGUAGE') }}:
+                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.LANGUAGE') }} :
                 {{ template.language }}
               </span>
             </div>
-            <!-- Header -->
-            <div v-if="getTemplateHeader(template)" class="mb-3">
-              <p class="text-xs font-medium text-n-slate-11">
-                {{ t('WHATSAPP_TEMPLATES.PICKER.HEADER') || 'HEADER' }}
-              </p>
-              <div
-                v-if="getTemplateHeader(template).format === 'TEXT'"
-                class="text-sm label-body"
-              >
-                {{ getTemplateHeader(template).text }}
-              </div>
-              <div
-                v-else-if="hasMediaContent(template)"
-                class="text-sm italic text-n-slate-11"
-              >
-                {{
-                  t('WHATSAPP_TEMPLATES.PICKER.MEDIA_CONTENT', {
-                    format: getTemplateHeader(template).format,
-                  }) ||
-                  `${getTemplateHeader(template).format} ${t('WHATSAPP_TEMPLATES.PICKER.MEDIA_CONTENT_FALLBACK')}`
-                }}
-              </div>
-            </div>
-
-            <!-- Body -->
             <div>
-              <p class="text-xs font-medium text-n-slate-11">
-                {{ t('WHATSAPP_TEMPLATES.PICKER.BODY') || 'BODY' }}
+              <p class="font-medium">
+                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.TEMPLATE_BODY') }}
               </p>
-              <p class="text-sm label-body">{{ getTemplateBody(template) }}</p>
+              <p class="label-body">{{ getTemplatebody(template) }}</p>
             </div>
-
-            <!-- Footer -->
-            <div v-if="getTemplateFooter(template)" class="mt-3">
-              <p class="text-xs font-medium text-n-slate-11">
-                {{ t('WHATSAPP_TEMPLATES.PICKER.FOOTER') || 'FOOTER' }}
+            <div class="mt-5">
+              <p class="font-medium">
+                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.CATEGORY') }}
               </p>
-              <p class="text-sm label-body">
-                {{ getTemplateFooter(template).text }}
-              </p>
-            </div>
-
-            <!-- Buttons -->
-            <div v-if="getTemplateButtons(template)" class="mt-3">
-              <p class="text-xs font-medium text-n-slate-11">
-                {{ t('WHATSAPP_TEMPLATES.PICKER.BUTTONS') || 'BUTTONS' }}
-              </p>
-              <div class="flex flex-wrap gap-1 mt-1">
-                <span
-                  v-for="button in getTemplateButtons(template).buttons"
-                  :key="button.text"
-                  class="px-2 py-1 text-xs rounded bg-n-slate-3 text-n-slate-12"
-                >
-                  {{ button.text }}
-                </span>
-              </div>
-            </div>
-
-            <div class="mt-3">
-              <p class="text-xs font-medium text-n-slate-11">
-                {{ t('WHATSAPP_TEMPLATES.PICKER.CATEGORY') || 'CATEGORY' }}
-              </p>
-              <p class="text-sm">{{ template.category }}</p>
+              <p>{{ template.category }}</p>
             </div>
           </div>
         </button>
@@ -191,13 +128,13 @@ const refreshTemplates = async () => {
       <div v-if="!filteredTemplateMessages.length" class="py-8 text-center">
         <div v-if="query && whatsAppTemplateMessages.length">
           <p>
-            {{ t('WHATSAPP_TEMPLATES.PICKER.NO_TEMPLATES_FOUND') }}
+            {{ $t('WHATSAPP_TEMPLATES.PICKER.NO_TEMPLATES_FOUND') }}
             <strong>{{ query }}</strong>
           </p>
         </div>
         <div v-else-if="!whatsAppTemplateMessages.length" class="space-y-4">
           <p class="text-n-slate-11">
-            {{ t('WHATSAPP_TEMPLATES.PICKER.NO_TEMPLATES_AVAILABLE') }}
+            {{ $t('WHATSAPP_TEMPLATES.PICKER.NO_TEMPLATES_AVAILABLE') }}
           </p>
         </div>
       </div>

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

@@ -10,7 +10,7 @@ import { messageTimestamp } from 'shared/helpers/timeHelper';
 import { downloadFile } from '@chatwoot/utils';
 
 import NextButton from 'dashboard/components-next/button/Button.vue';
-import Avatar from 'next/avatar/Avatar.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
 
 const props = defineProps({
@@ -186,12 +186,10 @@ onMounted(() => {
             v-if="senderDetails"
             class="flex items-center min-w-[15rem] shrink-0"
           >
-            <Avatar
+            <Thumbnail
               v-if="senderDetails.avatar"
-              :name="senderDetails.name"
+              :username="senderDetails.name"
               :src="senderDetails.avatar"
-              :size="40"
-              rounded-full
               class="flex-shrink-0"
             />
             <div class="flex flex-col ml-2 rtl:ml-0 rtl:mr-2 overflow-hidden">

app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue

@@ -1,8 +1,5 @@
 <script>
 import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-import { useAlert } from 'dashboard/composables';
-import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import {
   getSortedAgentsByAvailability,
   getAgentsByUpdatedPresence,
@@ -11,20 +8,7 @@ import MenuItem from './menuItem.vue';
 import MenuItemWithSubmenu from './menuItemWithSubmenu.vue';
 import wootConstants from 'dashboard/constants/globals';
 import AgentLoadingPlaceholder from './agentLoadingPlaceholder.vue';
-
-const MENU = {
-  MARK_AS_READ: 'mark-as-read',
-  MARK_AS_UNREAD: 'mark-as-unread',
-  PRIORITY: 'priority',
-  STATUS: 'status',
-  SNOOZE: 'snooze',
-  AGENT: 'agent',
-  TEAM: 'team',
-  LABEL: 'label',
-  DELETE: 'delete',
-  OPEN_NEW_TAB: 'open-new-tab',
-  COPY_LINK: 'copy-link',
-};
+import { useAdmin } from 'dashboard/composables/useAdmin';
 
 export default {
   components: {
@@ -53,14 +37,6 @@ export default {
       type: String,
       default: null,
     },
-    conversationUrl: {
-      type: String,
-      default: '',
-    },
-    allowedOptions: {
-      type: Array,
-      default: () => [],
-    },
   },
   emits: [
     'updateConversation',
@@ -71,7 +47,6 @@ export default {
     'assignTeam',
     'assignLabel',
     'deleteConversation',
-    'close',
   ],
   setup() {
     const { isAdmin } = useAdmin();
@@ -81,7 +56,6 @@ export default {
   },
   data() {
     return {
-      MENU,
       STATUS_TYPE: wootConstants.STATUS_TYPE,
       readOption: {
         label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.MARK_AS_READ'),
@@ -89,7 +63,7 @@ export default {
       },
       unreadOption: {
         label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.MARK_AS_UNREAD'),
-        icon: 'mail-unread',
+        icon: 'mail',
       },
       statusMenuConfig: [
         {
@@ -114,7 +88,7 @@ export default {
         icon: 'snooze',
       },
       priorityConfig: {
-        key: MENU.PRIORITY,
+        key: 'priority',
         label: this.$t('CONVERSATION.PRIORITY.TITLE'),
         icon: 'warning',
         options: [
@@ -141,35 +115,25 @@ export default {
         ].filter(item => item.key !== this.priority),
       },
       labelMenuConfig: {
-        key: MENU.LABEL,
+        key: 'label',
         icon: 'tag',
         label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.ASSIGN_LABEL'),
       },
       agentMenuConfig: {
-        key: MENU.AGENT,
+        key: 'agent',
         icon: 'person-add',
         label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.ASSIGN_AGENT'),
       },
       teamMenuConfig: {
-        key: MENU.TEAM,
+        key: 'team',
         icon: 'people-team-add',
         label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.ASSIGN_TEAM'),
       },
       deleteOption: {
-        key: MENU.DELETE,
+        key: 'delete',
         icon: 'delete',
         label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.DELETE'),
       },
-      openInNewTabOption: {
-        key: MENU.OPEN_NEW_TAB,
-        icon: 'open',
-        label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.OPEN_IN_NEW_TAB'),
-      },
-      copyLinkOption: {
-        key: MENU.COPY_LINK,
-        icon: 'copy',
-        label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.COPY_LINK'),
-      },
     };
   },
   computed: {
@@ -216,10 +180,6 @@ export default {
     this.$store.dispatch('inboxAssignableAgents/fetch', [this.inboxId]);
   },
   methods: {
-    isAllowed(keys) {
-      if (!this.allowedOptions.length) return true;
-      return keys.some(key => this.allowedOptions.includes(key));
-    },
     toggleStatus(status, snoozedUntil) {
       this.$emit('updateConversation', status, snoozedUntil);
     },
@@ -234,24 +194,6 @@ export default {
     deleteConversation() {
       this.$emit('deleteConversation', this.chatId);
     },
-    openInNewTab() {
-      if (!this.conversationUrl) return;
-
-      const url = `${window.chatwootConfig.hostURL}${this.conversationUrl}`;
-      window.open(url, '_blank', 'noopener,noreferrer');
-      this.$emit('close');
-    },
-    async copyConversationLink() {
-      if (!this.conversationUrl) return;
-      try {
-        const url = `${window.chatwootConfig.hostURL}${this.conversationUrl}`;
-        await copyTextToClipboard(url);
-        useAlert(this.$t('CONVERSATION.CARD_CONTEXT_MENU.COPY_LINK_SUCCESS'));
-        this.$emit('close');
-      } catch (error) {
-        // error
-      }
-    },
     show(key) {
       // If the conversation status is same as the action, then don't display the option
       // i.e.: Don't show an option to resolve if the conversation is already resolved.
@@ -275,114 +217,83 @@ export default {
 </script>
 
 <template>
-  <div
-    class="p-1 rounded-md shadow-xl bg-n-alpha-3/50 backdrop-blur-[100px] outline-1 outline outline-n-weak/50"
-  >
-    <template v-if="isAllowed([MENU.MARK_AS_READ, MENU.MARK_AS_UNREAD])">
+  <div class="p-1 rounded-md shadow-xl bg-n-alpha-3/50 backdrop-blur-[100px]">
+    <MenuItem
+      v-if="!hasUnreadMessages"
+      :option="unreadOption"
+      variant="icon"
+      @click.stop="$emit('markAsUnread')"
+    />
+    <MenuItem
+      v-else
+      :option="readOption"
+      variant="icon"
+      @click.stop="$emit('markAsRead')"
+    />
+    <hr class="m-1 rounded border-b border-n-weak dark:border-n-weak" />
+    <template v-for="option in statusMenuConfig">
       <MenuItem
-        v-if="!hasUnreadMessages"
-        :option="unreadOption"
+        v-if="show(option.key)"
+        :key="option.key"
+        :option="option"
         variant="icon"
-        @click.stop="$emit('markAsUnread')"
+        @click.stop="toggleStatus(option.key, null)"
       />
-      <MenuItem
-        v-else
-        :option="readOption"
-        variant="icon"
-        @click.stop="$emit('markAsRead')"
-      />
-      <hr class="m-1 rounded border-b border-n-weak dark:border-n-weak" />
     </template>
-    <template v-if="isAllowed([MENU.STATUS, MENU.SNOOZE])">
-      <template v-for="option in statusMenuConfig">
+    <MenuItem
+      v-if="showSnooze"
+      :option="snoozeOption"
+      variant="icon"
+      @click.stop="snoozeConversation()"
+    />
+    <hr class="m-1 rounded border-b border-n-weak dark:border-n-weak" />
+    <MenuItemWithSubmenu :option="priorityConfig">
+      <MenuItem
+        v-for="(option, i) in priorityConfig.options"
+        :key="i"
+        :option="option"
+        @click.stop="assignPriority(option.key)"
+      />
+    </MenuItemWithSubmenu>
+    <MenuItemWithSubmenu
+      :option="labelMenuConfig"
+      :sub-menu-available="!!labels.length"
+    >
+      <MenuItem
+        v-for="label in labels"
+        :key="label.id"
+        :option="generateMenuLabelConfig(label, 'label')"
+        variant="label"
+        @click.stop="$emit('assignLabel', label)"
+      />
+    </MenuItemWithSubmenu>
+    <MenuItemWithSubmenu
+      :option="agentMenuConfig"
+      :sub-menu-available="!!assignableAgents.length"
+    >
+      <AgentLoadingPlaceholder v-if="assignableAgentsUiFlags.isFetching" />
+      <template v-else>
         <MenuItem
-          v-if="show(option.key) && isAllowed([MENU.STATUS])"
-          :key="option.key"
-          :option="option"
-          variant="icon"
-          @click.stop="toggleStatus(option.key, null)"
+          v-for="agent in assignableAgents"
+          :key="agent.id"
+          :option="generateMenuLabelConfig(agent, 'agent')"
+          variant="agent"
+          @click.stop="$emit('assignAgent', agent)"
         />
       </template>
-      <MenuItem
-        v-if="showSnooze && isAllowed([MENU.SNOOZE])"
-        :option="snoozeOption"
-        variant="icon"
-        @click.stop="snoozeConversation()"
-      />
-      <hr class="m-1 rounded border-b border-n-weak dark:border-n-weak" />
-    </template>
-    <template
-      v-if="isAllowed([MENU.PRIORITY, MENU.LABEL, MENU.AGENT, MENU.TEAM])"
+    </MenuItemWithSubmenu>
+    <MenuItemWithSubmenu
+      :option="teamMenuConfig"
+      :sub-menu-available="!!teams.length"
     >
-      <MenuItemWithSubmenu
-        v-if="isAllowed([MENU.PRIORITY])"
-        :option="priorityConfig"
-      >
-        <MenuItem
-          v-for="(option, i) in priorityConfig.options"
-          :key="i"
-          :option="option"
-          @click.stop="assignPriority(option.key)"
-        />
-      </MenuItemWithSubmenu>
-      <MenuItemWithSubmenu
-        v-if="isAllowed([MENU.LABEL])"
-        :option="labelMenuConfig"
-        :sub-menu-available="!!labels.length"
-      >
-        <MenuItem
-          v-for="label in labels"
-          :key="label.id"
-          :option="generateMenuLabelConfig(label, 'label')"
-          variant="label"
-          @click.stop="$emit('assignLabel', label)"
-        />
-      </MenuItemWithSubmenu>
-      <MenuItemWithSubmenu
-        v-if="isAllowed([MENU.AGENT])"
-        :option="agentMenuConfig"
-        :sub-menu-available="!!assignableAgents.length"
-      >
-        <AgentLoadingPlaceholder v-if="assignableAgentsUiFlags.isFetching" />
-        <template v-else>
-          <MenuItem
-            v-for="agent in assignableAgents"
-            :key="agent.id"
-            :option="generateMenuLabelConfig(agent, 'agent')"
-            variant="agent"
-            @click.stop="$emit('assignAgent', agent)"
-          />
-        </template>
-      </MenuItemWithSubmenu>
-      <MenuItemWithSubmenu
-        v-if="isAllowed([MENU.TEAM])"
-        :option="teamMenuConfig"
-        :sub-menu-available="!!teams.length"
-      >
-        <MenuItem
-          v-for="team in teams"
-          :key="team.id"
-          :option="generateMenuLabelConfig(team, 'team')"
-          @click.stop="$emit('assignTeam', team)"
-        />
-      </MenuItemWithSubmenu>
-      <hr class="m-1 rounded border-b border-n-weak dark:border-n-weak" />
-    </template>
-    <template v-if="isAllowed([MENU.OPEN_NEW_TAB, MENU.COPY_LINK])">
       <MenuItem
-        v-if="isAllowed([MENU.OPEN_NEW_TAB])"
-        :option="openInNewTabOption"
-        variant="icon"
-        @click.stop="openInNewTab"
+        v-for="team in teams"
+        :key="team.id"
+        :option="generateMenuLabelConfig(team, 'team')"
+        @click.stop="$emit('assignTeam', team)"
       />
-      <MenuItem
-        v-if="isAllowed([MENU.COPY_LINK])"
-        :option="copyLinkOption"
-        variant="icon"
-        @click.stop="copyConversationLink"
-      />
-    </template>
-    <template v-if="isAdmin && isAllowed([MENU.DELETE])">
+    </MenuItemWithSubmenu>
+    <template v-if="isAdmin">
       <hr class="m-1 rounded border-b border-n-weak dark:border-n-weak" />
       <MenuItem
         :option="deleteOption"

app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue

@@ -1,16 +1,20 @@
-<script setup>
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-
-defineProps({
-  option: {
-    type: Object,
-    default: () => {},
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+export default {
+  components: {
+    Thumbnail,
   },
-  variant: {
-    type: String,
-    default: 'default',
+  props: {
+    option: {
+      type: Object,
+      default: () => {},
+    },
+    variant: {
+      type: String,
+      default: 'default',
+    },
   },
-});
+};
 </script>
 
 <template>
@@ -26,12 +30,12 @@ defineProps({
       class="label-pill flex-shrink-0"
       :style="{ backgroundColor: option.color }"
     />
-    <Avatar
+    <Thumbnail
       v-if="variant === 'agent'"
-      :name="option.label"
+      :username="option.label"
       :src="option.thumbnail"
-      :status="option.status === 'online' ? option.status : null"
-      :size="20"
+      :status="option.status"
+      size="20px"
       class="flex-shrink-0"
     />
     <p class="menu-label truncate min-w-0 flex-1">

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

@@ -1,7 +1,7 @@
 <script>
 // components
 import NextButton from 'dashboard/components-next/button/Button.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Avatar from '../../Avatar.vue';
 
 // composables
 import { useAI } from 'dashboard/composables/useAI';
@@ -226,16 +226,18 @@ export default {
         </div>
       </div>
       <div class="sender--info has-tooltip" data-original-title="null">
-        <Avatar
+        <woot-thumbnail
           v-tooltip.top="{
             content: $t('LABEL_MGMT.SUGGESTIONS.POWERED_BY'),
             delay: { show: 600, hide: 0 },
             hideOnClick: true,
           }"
-          :size="16"
-          name="chatwoot-ai"
-          icon-name="i-lucide-sparkles"
-        />
+          size="16px"
+        >
+          <Avatar class="user-thumbnail thumbnail-rounded">
+            <fluent-icon class="chatwoot-ai-icon" icon="chatwoot-ai" />
+          </Avatar>
+        </woot-thumbnail>
       </div>
     </div>
   </li>
@@ -266,6 +268,11 @@ export default {
     }
   }
 
+  .chatwoot-ai-icon {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+
   .label-suggestion--title {
     @apply text-n-slate-11 mt-0.5 text-xxs;
   }

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

@@ -1,12 +1,12 @@
 <script>
 import { mapGetters } from 'vuex';
-import Avatar from 'next/avatar/Avatar.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
-    Avatar,
+    Thumbnail,
     Spinner,
     NextButton,
   },
@@ -123,13 +123,11 @@ export default {
           </li>
           <li v-for="agent in filteredAgents" :key="agent.id">
             <div class="agent-list-item" @click="assignAgent(agent)">
-              <Avatar
-                :name="agent.name"
+              <Thumbnail
                 :src="agent.thumbnail"
                 :status="agent.availability_status"
-                :size="22"
-                hide-offline-status
-                rounded-full
+                :username="agent.name"
+                size="22px"
               />
               <span class="my-0 text-n-slate-12">
                 {{ agent.name }}

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

@@ -263,7 +263,7 @@ export default {
 
 <style scoped lang="scss">
 .bulk-action__container {
-  @apply p-3 relative border-b border-solid border-n-strong dark:border-n-weak;
+  @apply p-4 relative border-b border-solid border-n-strong dark:border-n-weak;
 }
 
 .bulk-action__panel {

app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue

@@ -0,0 +1,76 @@
+<script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+export default {
+  components: {
+    NextButton,
+  },
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    src: {
+      type: String,
+      default: '',
+    },
+    usernameAvatar: {
+      type: String,
+      default: '',
+    },
+    deleteAvatar: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['onAvatarSelect', 'onAvatarDelete'],
+  watch: {},
+  methods: {
+    handleImageUpload(event) {
+      const [file] = event.target.files;
+
+      this.$emit('onAvatarSelect', {
+        file,
+        url: file ? URL.createObjectURL(file) : null,
+      });
+    },
+    onAvatarDelete() {
+      this.$refs.file.value = null;
+      this.$emit('onAvatarDelete');
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <label>
+      <span v-if="label">{{ label }}</span>
+    </label>
+    <woot-thumbnail
+      v-if="src"
+      size="80px"
+      :src="src"
+      :username="usernameAvatar"
+    />
+    <div v-if="src && deleteAvatar" class="my-1">
+      <NextButton
+        outline
+        xs
+        ruby
+        :label="$t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT')"
+        @click="onAvatarDelete"
+      />
+    </div>
+    <label>
+      <input
+        id="file"
+        ref="file"
+        type="file"
+        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+        @change="handleImageUpload"
+      />
+      <slot />
+    </label>
+  </div>
+</template>

app/javascript/dashboard/composables/useCaptain.js

@@ -1,14 +1,12 @@
 import { computed } from 'vue';
 import { useStore } from 'dashboard/composables/store.js';
 import { useAccount } from 'dashboard/composables/useAccount';
-import { useConfig } from 'dashboard/composables/useConfig';
 import { useCamelCase } from 'dashboard/composables/useTransformKeys';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 export function useCaptain() {
   const store = useStore();
   const { isCloudFeatureEnabled, currentAccount } = useAccount();
-  const { isEnterprise } = useConfig();
 
   const captainEnabled = computed(() => {
     return isCloudFeatureEnabled(FEATURE_FLAGS.CAPTAIN);
@@ -35,9 +33,7 @@ export function useCaptain() {
   });
 
   const fetchLimits = () => {
-    if (isEnterprise) {
-      store.dispatch('accounts/limits');
-    }
+    store.dispatch('accounts/limits');
   };
 
   return {

app/javascript/dashboard/constants/globals.js

@@ -35,7 +35,7 @@ export default {
   HELP_CENTER_DOCS_URL:
     'https://www.chatwoot.com/docs/product/others/help-center',
   TESTIMONIAL_URL: 'https://testimonials.cdn.chatwoot.com/content.json',
-  SMALL_SCREEN_BREAKPOINT: 768,
+  SMALL_SCREEN_BREAKPOINT: 1200,
   AVAILABILITY_STATUS_KEYS: ['online', 'busy', 'offline'],
   SNOOZE_OPTIONS: {
     UNTIL_NEXT_REPLY: 'until_next_reply',

app/javascript/dashboard/helper/AnalyticsHelper/events.js

@@ -6,7 +6,6 @@ export const CONVERSATION_EVENTS = Object.freeze({
   TRANSLATE_A_MESSAGE: 'Translated a message',
   INSERTED_A_VARIABLE: 'Inserted a variable',
   INSERTED_AN_EMOJI: 'Inserted an emoji',
-  INSERTED_A_TOOL: 'Inserted a tool',
   USED_MENTIONS: 'Used mentions',
   SEARCH_CONVERSATION: 'Searched conversations',
   APPLY_FILTER: 'Applied filters in the conversation list',

app/javascript/dashboard/helper/editorHelper.js

@@ -319,12 +319,6 @@ const createNode = (editorView, nodeType, content) => {
       return state.schema.text(`{{${content}}}`);
     case 'emoji':
       return state.schema.text(content);
-    case 'tool': {
-      return state.schema.nodes.tools.create({
-        id: content.id,
-        name: content.title,
-      });
-    }
     default:
       return null;
   }
@@ -361,11 +355,6 @@ const nodeCreators = {
     from,
     to,
   }),
-  tool: (editorView, content, from, to) => ({
-    node: createNode(editorView, 'tool', content),
-    from,
-    to,
-  }),
 };
 
 /**

app/javascript/dashboard/helper/inbox.js

@@ -139,14 +139,14 @@ export const getInboxClassByType = (type, phoneNumber) => {
   }
 };
 
-export const getInboxIconByType = (type, medium, variant = 'fill') => {
+export const getInboxIconByType = (type, phoneNumber, variant = 'fill') => {
   const iconMap =
     variant === 'fill' ? INBOX_ICON_MAP_FILL : INBOX_ICON_MAP_LINE;
   const defaultIcon =
     variant === 'fill' ? DEFAULT_ICON_FILL : DEFAULT_ICON_LINE;
 
   // Special case for Twilio (whatsapp and sms)
-  if (type === INBOX_TYPES.TWILIO && medium === 'whatsapp') {
+  if (type === INBOX_TYPES.TWILIO && phoneNumber?.startsWith('whatsapp')) {
     return iconMap[INBOX_TYPES.WHATSAPP];
   }
 

app/javascript/dashboard/helper/specs/inbox.spec.js

@@ -112,13 +112,13 @@ describe('#Inbox Helpers', () => {
     describe('Twilio cases', () => {
       describe('fill variant', () => {
         it('returns WhatsApp icon for Twilio WhatsApp number', () => {
-          expect(getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp')).toBe(
-            'i-ri-whatsapp-fill'
-          );
+          expect(
+            getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp:+1234567890')
+          ).toBe('i-ri-whatsapp-fill');
         });
 
         it('returns SMS icon for regular Twilio number', () => {
-          expect(getInboxIconByType(INBOX_TYPES.TWILIO, 'sms')).toBe(
+          expect(getInboxIconByType(INBOX_TYPES.TWILIO, '+1234567890')).toBe(
             'i-ri-chat-1-fill'
           );
         });
@@ -133,14 +133,18 @@ describe('#Inbox Helpers', () => {
       describe('line variant', () => {
         it('returns WhatsApp line icon for Twilio WhatsApp number', () => {
           expect(
-            getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp', 'line')
+            getInboxIconByType(
+              INBOX_TYPES.TWILIO,
+              'whatsapp:+1234567890',
+              'line'
+            )
           ).toBe('i-ri-whatsapp-line');
         });
 
         it('returns SMS line icon for regular Twilio number', () => {
-          expect(getInboxIconByType(INBOX_TYPES.TWILIO, 'sms', 'line')).toBe(
-            'i-ri-chat-1-line'
-          );
+          expect(
+            getInboxIconByType(INBOX_TYPES.TWILIO, '+1234567890', 'line')
+          ).toBe('i-ri-chat-1-line');
         });
       });
     });

app/javascript/dashboard/helper/specs/templateHelper.spec.js

@@ -1,368 +0,0 @@
-import {
-  replaceTemplateVariables,
-  buildTemplateParameters,
-  processVariable,
-  allKeysRequired,
-} from '../templateHelper';
-import { templates } from '../../store/modules/specs/inboxes/templateFixtures';
-
-describe('templateHelper', () => {
-  const technicianTemplate = templates.find(t => t.name === 'technician_visit');
-
-  describe('processVariable', () => {
-    it('should remove curly braces from variables', () => {
-      expect(processVariable('{{name}}')).toBe('name');
-      expect(processVariable('{{1}}')).toBe('1');
-      expect(processVariable('{{customer_id}}')).toBe('customer_id');
-    });
-  });
-
-  describe('allKeysRequired', () => {
-    it('should return true when all keys have values', () => {
-      const obj = { name: 'John', age: '30' };
-      expect(allKeysRequired(obj)).toBe(true);
-    });
-
-    it('should return false when some keys are empty', () => {
-      const obj = { name: 'John', age: '' };
-      expect(allKeysRequired(obj)).toBe(false);
-    });
-
-    it('should return true for empty object', () => {
-      expect(allKeysRequired({})).toBe(true);
-    });
-  });
-
-  describe('replaceTemplateVariables', () => {
-    const templateText =
-      "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.";
-
-    it('should replace all variables with provided values', () => {
-      const processedParams = {
-        body: {
-          1: 'John',
-          2: '123 Main St',
-          3: '2025-01-15',
-          4: '10:00 AM',
-          5: '2:00 PM',
-        },
-      };
-
-      const result = replaceTemplateVariables(templateText, processedParams);
-      expect(result).toBe(
-        "Hi John, we're scheduling a technician visit to 123 Main St on 2025-01-15 between 10:00 AM and 2:00 PM. Please confirm if this time slot works for you."
-      );
-    });
-
-    it('should keep original variable format when no replacement value provided', () => {
-      const processedParams = {
-        body: {
-          1: 'John',
-          3: '2025-01-15',
-        },
-      };
-
-      const result = replaceTemplateVariables(templateText, processedParams);
-      expect(result).toContain('John');
-      expect(result).toContain('2025-01-15');
-      expect(result).toContain('{{2}}');
-      expect(result).toContain('{{4}}');
-      expect(result).toContain('{{5}}');
-    });
-
-    it('should handle empty processedParams', () => {
-      const result = replaceTemplateVariables(templateText, {});
-      expect(result).toBe(templateText);
-    });
-  });
-
-  describe('buildTemplateParameters', () => {
-    it('should build parameters for template with body variables', () => {
-      const result = buildTemplateParameters(technicianTemplate, false);
-
-      expect(result.body).toEqual({
-        1: '',
-        2: '',
-        3: '',
-        4: '',
-        5: '',
-      });
-    });
-
-    it('should include header parameters when hasMediaHeader is true', () => {
-      const imageTemplate = templates.find(
-        t => t.name === 'order_confirmation'
-      );
-      const result = buildTemplateParameters(imageTemplate, true);
-
-      expect(result.header).toEqual({
-        media_url: '',
-        media_type: 'image',
-      });
-    });
-
-    it('should not include header parameters when hasMediaHeader is false', () => {
-      const result = buildTemplateParameters(technicianTemplate, false);
-      expect(result.header).toBeUndefined();
-    });
-
-    it('should handle template with no body component', () => {
-      const templateWithoutBody = {
-        components: [{ type: 'HEADER', format: 'TEXT' }],
-      };
-
-      const result = buildTemplateParameters(templateWithoutBody, false);
-      expect(result).toEqual({});
-    });
-
-    it('should handle template with no variables', () => {
-      const templateWithoutVars = templates.find(
-        t => t.name === 'no_variable_template'
-      );
-      const result = buildTemplateParameters(templateWithoutVars, false);
-
-      expect(result.body).toBeUndefined();
-    });
-
-    it('should handle URL buttons with variables for non-authentication templates', () => {
-      const templateWithUrlButton = {
-        category: 'MARKETING',
-        components: [
-          {
-            type: 'BODY',
-            text: 'Check out our website at {{site_url}}',
-          },
-          {
-            type: 'BUTTONS',
-            buttons: [
-              {
-                type: 'URL',
-                url: 'https://example.com/{{campaign_id}}',
-                text: 'Visit Site',
-              },
-            ],
-          },
-        ],
-      };
-
-      const result = buildTemplateParameters(templateWithUrlButton, false);
-      expect(result.buttons).toEqual([
-        {
-          type: 'url',
-          parameter: '',
-          url: 'https://example.com/{{campaign_id}}',
-          variables: ['campaign_id'],
-        },
-      ]);
-    });
-
-    it('should handle templates with no variables', () => {
-      const emptyTemplate = templates.find(
-        t => t.name === 'no_variable_template'
-      );
-      const result = buildTemplateParameters(emptyTemplate, false);
-      expect(result).toEqual({});
-    });
-
-    it('should build parameters for templates with multiple component types', () => {
-      const complexTemplate = {
-        components: [
-          { type: 'HEADER', format: 'IMAGE' },
-          { type: 'BODY', text: 'Hi {{1}}, your order {{2}} is ready!' },
-          { type: 'FOOTER', text: 'Thank you for your business' },
-          {
-            type: 'BUTTONS',
-            buttons: [{ type: 'URL', url: 'https://example.com/{{3}}' }],
-          },
-        ],
-      };
-
-      const result = buildTemplateParameters(complexTemplate, true);
-
-      expect(result.header).toEqual({
-        media_url: '',
-        media_type: 'image',
-      });
-      expect(result.body).toEqual({ 1: '', 2: '' });
-      expect(result.buttons).toEqual([
-        {
-          type: 'url',
-          parameter: '',
-          url: 'https://example.com/{{3}}',
-          variables: ['3'],
-        },
-      ]);
-    });
-
-    it('should handle copy code buttons correctly', () => {
-      const copyCodeTemplate = templates.find(
-        t => t.name === 'discount_coupon'
-      );
-      const result = buildTemplateParameters(copyCodeTemplate, false);
-
-      expect(result.body).toBeDefined();
-      expect(result.buttons).toEqual([
-        {
-          type: 'copy_code',
-          parameter: '',
-        },
-      ]);
-    });
-
-    it('should handle templates with document headers', () => {
-      const documentTemplate = templates.find(
-        t => t.name === 'purchase_receipt'
-      );
-      const result = buildTemplateParameters(documentTemplate, true);
-
-      expect(result.header).toEqual({
-        media_url: '',
-        media_type: 'document',
-      });
-      expect(result.body).toEqual({
-        1: '',
-        2: '',
-        3: '',
-      });
-    });
-
-    it('should handle video header templates', () => {
-      const videoTemplate = templates.find(t => t.name === 'training_video');
-      const result = buildTemplateParameters(videoTemplate, true);
-
-      expect(result.header).toEqual({
-        media_url: '',
-        media_type: 'video',
-      });
-      expect(result.body).toEqual({
-        name: '',
-        date: '',
-      });
-    });
-  });
-
-  describe('enhanced format validation', () => {
-    it('should validate enhanced format structure', () => {
-      const processedParams = {
-        body: { 1: 'John', 2: 'Order123' },
-        header: {
-          media_url: 'https://example.com/image.jpg',
-          media_type: 'image',
-        },
-        buttons: [{ type: 'copy_code', parameter: 'SAVE20' }],
-      };
-
-      // Test that structure is properly formed
-      expect(processedParams.body).toBeDefined();
-      expect(typeof processedParams.body).toBe('object');
-      expect(processedParams.header).toBeDefined();
-      expect(Array.isArray(processedParams.buttons)).toBe(true);
-    });
-
-    it('should handle empty component sections', () => {
-      const processedParams = {
-        body: {},
-        header: {},
-        buttons: [],
-      };
-
-      expect(allKeysRequired(processedParams.body)).toBe(true);
-      expect(allKeysRequired(processedParams.header)).toBe(true);
-      expect(processedParams.buttons.length).toBe(0);
-    });
-
-    it('should validate parameter completeness', () => {
-      const incompleteParams = {
-        body: { 1: 'John', 2: '' },
-      };
-
-      expect(allKeysRequired(incompleteParams.body)).toBe(false);
-    });
-
-    it('should handle edge cases in processVariable', () => {
-      expect(processVariable('{{')).toBe('');
-      expect(processVariable('}}')).toBe('');
-      expect(processVariable('')).toBe('');
-      expect(processVariable('{{nested{{variable}}}}')).toBe('nestedvariable');
-    });
-
-    it('should handle special characters in template variables', () => {
-      /* eslint-disable no-template-curly-in-string */
-      const templateText =
-        'Welcome {{user_name}}, your order #{{order_id}} costs ${{amount}}';
-      /* eslint-enable no-template-curly-in-string */
-      const processedParams = {
-        body: {
-          user_name: 'John & Jane',
-          order_id: '12345',
-          amount: '99.99',
-        },
-      };
-
-      const result = replaceTemplateVariables(templateText, processedParams);
-      expect(result).toBe(
-        'Welcome John & Jane, your order #12345 costs $99.99'
-      );
-    });
-
-    it('should handle templates with mixed parameter types', () => {
-      const mixedTemplate = {
-        components: [
-          { type: 'HEADER', format: 'VIDEO' },
-          { type: 'BODY', text: 'Order {{order_id}} status: {{status}}' },
-          { type: 'FOOTER', text: 'Thank you' },
-          {
-            type: 'BUTTONS',
-            buttons: [
-              { type: 'URL', url: 'https://track.com/{{order_id}}' },
-              { type: 'COPY_CODE' },
-              { type: 'PHONE_NUMBER', phone_number: '+1234567890' },
-            ],
-          },
-        ],
-      };
-
-      const result = buildTemplateParameters(mixedTemplate, true);
-
-      expect(result.header).toEqual({
-        media_url: '',
-        media_type: 'video',
-      });
-      expect(result.body).toEqual({
-        order_id: '',
-        status: '',
-      });
-      expect(result.buttons).toHaveLength(2); // URL and COPY_CODE (PHONE_NUMBER doesn't need parameters)
-      expect(result.buttons[0].type).toBe('url');
-      expect(result.buttons[1].type).toBe('copy_code');
-    });
-
-    it('should handle templates with no processable components', () => {
-      const emptyTemplate = {
-        components: [
-          { type: 'HEADER', format: 'TEXT', text: 'Static Header' },
-          { type: 'BODY', text: 'Static body with no variables' },
-          { type: 'FOOTER', text: 'Static footer' },
-        ],
-      };
-
-      const result = buildTemplateParameters(emptyTemplate, false);
-      expect(result).toEqual({});
-    });
-
-    it('should validate that replaceTemplateVariables preserves unreplaced variables', () => {
-      const templateText = 'Hi {{name}}, order {{order_id}} is {{status}}';
-      const partialParams = {
-        body: {
-          name: 'John',
-          // order_id missing
-          status: 'ready',
-        },
-      };
-
-      const result = replaceTemplateVariables(templateText, partialParams);
-      expect(result).toBe('Hi John, order {{order_id}} is ready');
-      expect(result).toContain('{{order_id}}'); // Unreplaced variable preserved
-    });
-  });
-});

app/javascript/dashboard/helper/templateHelper.js

@@ -1,91 +0,0 @@
-// Constants
-export const DEFAULT_LANGUAGE = 'en';
-export const DEFAULT_CATEGORY = 'UTILITY';
-export const COMPONENT_TYPES = {
-  HEADER: 'HEADER',
-  BODY: 'BODY',
-  BUTTONS: 'BUTTONS',
-};
-export const MEDIA_FORMATS = ['IMAGE', 'VIDEO', 'DOCUMENT'];
-
-export const findComponentByType = (template, type) =>
-  template.components?.find(component => component.type === type);
-
-export const processVariable = str => {
-  return str.replace(/{{|}}/g, '');
-};
-
-export const allKeysRequired = value => {
-  const keys = Object.keys(value);
-  return keys.every(key => value[key]);
-};
-
-export const replaceTemplateVariables = (templateText, processedParams) => {
-  return templateText.replace(/{{([^}]+)}}/g, (match, variable) => {
-    const variableKey = processVariable(variable);
-    return processedParams.body?.[variableKey] || `{{${variable}}}`;
-  });
-};
-
-export const buildTemplateParameters = (template, hasMediaHeaderValue) => {
-  const allVariables = {};
-
-  const bodyComponent = findComponentByType(template, COMPONENT_TYPES.BODY);
-  const headerComponent = findComponentByType(template, COMPONENT_TYPES.HEADER);
-
-  if (!bodyComponent) return allVariables;
-
-  const templateString = bodyComponent.text;
-
-  // Process body variables
-  const matchedVariables = templateString.match(/{{([^}]+)}}/g);
-  if (matchedVariables) {
-    allVariables.body = {};
-    matchedVariables.forEach(variable => {
-      const key = processVariable(variable);
-      allVariables.body[key] = '';
-    });
-  }
-
-  if (hasMediaHeaderValue) {
-    if (!allVariables.header) allVariables.header = {};
-    allVariables.header.media_url = '';
-    allVariables.header.media_type = headerComponent.format.toLowerCase();
-  }
-
-  // Process button variables
-  const buttonComponents = template.components.filter(
-    component => component.type === COMPONENT_TYPES.BUTTONS
-  );
-
-  buttonComponents.forEach(buttonComponent => {
-    if (buttonComponent.buttons) {
-      buttonComponent.buttons.forEach((button, index) => {
-        // Handle URL buttons with variables
-        if (button.type === 'URL' && button.url && button.url.includes('{{')) {
-          const buttonVars = button.url.match(/{{([^}]+)}}/g) || [];
-          if (buttonVars.length > 0) {
-            if (!allVariables.buttons) allVariables.buttons = [];
-            allVariables.buttons[index] = {
-              type: 'url',
-              parameter: '',
-              url: button.url,
-              variables: buttonVars.map(v => processVariable(v)),
-            };
-          }
-        }
-
-        // Handle copy code buttons
-        if (button.type === 'COPY_CODE') {
-          if (!allVariables.buttons) allVariables.buttons = [];
-          allVariables.buttons[index] = {
-            type: 'copy_code',
-            parameter: '',
-          };
-        }
-      });
-    }
-  });
-
-  return allVariables;
-};

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

@@ -144,9 +144,6 @@
       "AGENTS_LOADING": "Loading agents...",
       "ASSIGN_TEAM": "Assign team",
       "DELETE": "Delete conversation",
-      "OPEN_IN_NEW_TAB": "Open in new tab",
-      "COPY_LINK": "Copy conversation link",
-      "COPY_LINK_SUCCESS": "Conversation link copied to clipboard",
       "API": {
         "AGENT_ASSIGNMENT": {
           "SUCCESFUL": "Conversation id {conversationId} assigned to \"{agentName}\"",

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

@@ -157,12 +157,6 @@
             "DELETE_SUCCESS": "Portal deleted successfully",
             "DELETE_ERROR": "Error while deleting portal"
           }
-        },
-        "SEND_CNAME_INSTRUCTIONS": {
-          "API": {
-            "SUCCESS_MESSAGE": "CNAME instructions sent successfully",
-            "ERROR_MESSAGE": "Error while sending CNAME instructions"
-          }
         }
       },
       "EDIT": {
@@ -732,7 +726,7 @@
         "HOME_PAGE_LINK": {
           "LABEL": "Home page link",
           "PLACEHOLDER": "Portal home page link",
-          "ERROR": "Enter a valid URL. The Home page link must start with 'http://' or 'https://'."
+          "ERROR": "Invalid URL. The Home page link must start with 'http://' or 'https://'."
         },
         "SLUG": {
           "LABEL": "Slug",
@@ -753,15 +747,9 @@
           "HEADER": "Custom domain",
           "LABEL": "Custom domain:",
           "DESCRIPTION": "You can host your portal on a custom domain. For instance, if your website is yourdomain.com and you want your portal available at docs.yourdomain.com, simply enter that in this field.",
-          "STATUS_DESCRIPTION": "Your custom portal will start working as soon as it is verified.",
           "PLACEHOLDER": "Portal custom domain",
-          "EDIT_BUTTON": "Edit",
+          "EDIT_BUTTON": "Edit custom domain",
           "ADD_BUTTON": "Add custom domain",
-          "STATUS": {
-            "LIVE": "Live",
-            "PENDING": "Awaiting verification",
-            "ERROR": "Verification failed"
-          },
           "DIALOG": {
             "ADD_HEADER": "Add custom domain",
             "EDIT_HEADER": "Edit custom domain",
@@ -769,20 +757,13 @@
             "EDIT_CONFIRM_BUTTON_LABEL": "Update domain",
             "LABEL": "Custom domain",
             "PLACEHOLDER": "Portal custom domain",
-            "ERROR": "Custom domain is required",
-            "FORMAT_ERROR": "Please enter a valid domain URL e.g. docs.yourdomain.com"
+            "ERROR": "Custom domain is required"
           },
           "DNS_CONFIGURATION_DIALOG": {
             "HEADER": "DNS configuration",
             "DESCRIPTION": "Log in to the account you have with your DNS provider, and add a CNAME record for subdomain pointing to chatwoot.help",
-            "COPY": "Successfully copied CNAME",
-            "SEND_INSTRUCTIONS": {
-              "HEADER": "Send instructions",
-              "DESCRIPTION": "If you would prefer to have someone from your development team to handle this step, you can enter email address below, and we will send them the required instructions.",
-              "PLACEHOLDER": "Enter their email",
-              "ERROR": "Enter a valid email address",
-              "SEND_BUTTON": "Send"
-            }
+            "HELP_TEXT": "Once this is done, you can reach out to our support to request for the auto-generated SSL certificate.",
+            "CONFIRM_BUTTON_LABEL": "Got it!"
           }
         },
         "DELETE_PORTAL": {

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

@@ -72,24 +72,6 @@
       "MARK_ALL_READ": "All notifications marked as read",
       "DELETE_ALL": "All notifications deleted",
       "DELETE_ALL_READ": "All read notifications deleted"
-    },
-    "REAUTHORIZE": {
-      "TITLE": "Reauthorization Required",
-      "DESCRIPTION": "Your WhatsApp connection has expired. Please reconnect to continue receiving and sending messages.",
-      "BUTTON_TEXT": "Reconnect WhatsApp",
-      "LOADING_FACEBOOK": "Loading Facebook SDK...",
-      "SUCCESS": "WhatsApp reconnected successfully",
-      "ERROR": "Failed to reconnect WhatsApp. Please try again.",
-      "WHATSAPP_APP_ID_MISSING": "WhatsApp App ID is not configured. Please contact your administrator.",
-      "WHATSAPP_CONFIG_ID_MISSING": "WhatsApp Configuration ID is not configured. Please contact your administrator.",
-      "CONFIGURATION_ERROR": "Configuration error occurred during reauthorization.",
-      "FACEBOOK_LOAD_ERROR": "Failed to load Facebook SDK. Please try again.",
-      "TROUBLESHOOTING": {
-        "TITLE": "Troubleshooting",
-        "POPUP_BLOCKED": "Ensure pop-ups are allowed for this site",
-        "COOKIES": "Third-party cookies must be enabled",
-        "ADMIN_ACCESS": "You need admin access to the WhatsApp Business Account"
-      }
     }
   }
 }

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

@@ -280,11 +280,6 @@
             "SECURE_AUTH": "Secure OAuth based authentication",
             "AUTO_CONFIG": "Automatic webhook and phone number configuration"
           },
-          "LEARN_MORE": {
-            "TEXT": "To learn more about integrated signup, pricing, and limitations, visit",
-            "LINK_TEXT": "this link.",
-            "LINK_URL": "https://developers.facebook.com/docs/whatsapp/embedded-signup/custom-flows/onboarding-business-app-users#limitations"
-          },
           "SUBMIT_BUTTON": "Connect with WhatsApp Business",
           "AUTH_PROCESSING": "Authenticating with Meta",
           "WAITING_FOR_BUSINESS_INFO": "Please complete business setup in the Meta window...",
@@ -603,21 +598,6 @@
       "WHATSAPP_SECTION_UPDATE_TITLE": "Update API Key",
       "WHATSAPP_SECTION_UPDATE_PLACEHOLDER": "Enter the new API Key here",
       "WHATSAPP_SECTION_UPDATE_BUTTON": "Update",
-      "WHATSAPP_EMBEDDED_SIGNUP_TITLE": "WhatsApp Embedded Signup",
-      "WHATSAPP_EMBEDDED_SIGNUP_SUBHEADER": "This inbox is connected through WhatsApp embedded signup.",
-      "WHATSAPP_EMBEDDED_SIGNUP_DESCRIPTION": "You can reconfigure this inbox to update your WhatsApp Business settings.",
-      "WHATSAPP_RECONFIGURE_BUTTON": "Reconfigure",
-      "WHATSAPP_CONNECT_TITLE": "Connect to WhatsApp Business",
-      "WHATSAPP_CONNECT_SUBHEADER": "Upgrade to WhatsApp embedded signup for easier management.",
-      "WHATSAPP_CONNECT_DESCRIPTION": "Connect this inbox to WhatsApp Business for enhanced features and easier management.",
-      "WHATSAPP_CONNECT_BUTTON": "Connect",
-      "WHATSAPP_CONNECT_SUCCESS": "Successfully connected to WhatsApp Business!",
-      "WHATSAPP_CONNECT_ERROR": "Failed to connect to WhatsApp Business. Please try again.",
-      "WHATSAPP_RECONFIGURE_SUCCESS": "Successfully reconfigured WhatsApp Business!",
-      "WHATSAPP_RECONFIGURE_ERROR": "Failed to reconfigure WhatsApp Business. Please try again.",
-      "WHATSAPP_APP_ID_MISSING": "WhatsApp App ID is not configured. Please contact your administrator.",
-      "WHATSAPP_CONFIG_ID_MISSING": "WhatsApp Configuration ID is not configured. Please contact your administrator.",
-      "WHATSAPP_LOGIN_CANCELLED": "WhatsApp login was cancelled. Please try again.",
       "WHATSAPP_WEBHOOK_TITLE": "Webhook Verification Token",
       "WHATSAPP_WEBHOOK_SUBHEADER": "This token is used to verify the authenticity of the webhook endpoint.",
       "WHATSAPP_TEMPLATES_SYNC_TITLE": "Sync Templates",

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

@@ -557,7 +557,6 @@
           "SEARCH_PLACEHOLDER": "Search..."
         },
         "EMPTY_MESSAGE": "No guardrails found. Create or add examples to begin.",
-        "SEARCH_EMPTY_MESSAGE": "No guardrails found for this search.",
         "API": {
           "ADD": {
             "SUCCESS": "Guardrails added successfully",
@@ -605,7 +604,6 @@
           "SEARCH_PLACEHOLDER": "Search..."
         },
         "EMPTY_MESSAGE": "No response guidelines found. Create or add examples to begin.",
-        "SEARCH_EMPTY_MESSAGE": "No response guidelines found for this search.",
         "API": {
           "ADD": {
             "SUCCESS": "Response Guidelines added successfully",
@@ -620,73 +618,6 @@
             "ERROR": "There was an error deleting response guidelines, please try again."
           }
         }
-      },
-      "SCENARIOS": {
-        "TITLE": "Scenarios",
-        "DESCRIPTION": "Give your assistant some context—like “what to do when a user is stuck,” or “how to act during a refund request.”",
-        "BREADCRUMB": {
-          "TITLE": "Scenarios"
-        },
-        "BULK_ACTION": {
-          "SELECTED": "{count} item selected | {count} items selected",
-          "SELECT_ALL": "Select all ({count})",
-          "UNSELECT_ALL": "Unselect all ({count})",
-          "BULK_DELETE_BUTTON": "Delete"
-        },
-        "ADD": {
-          "SUGGESTED": {
-            "TITLE": "Example scenarios",
-            "ADD": "Add all",
-            "ADD_SINGLE": "Add this",
-            "TOOLS_USED": "Tools used :"
-          },
-          "NEW": {
-            "CREATE": "Add a scenario",
-            "TITLE": "Create a scenario",
-            "FORM": {
-              "TITLE": {
-                "LABEL": "Title",
-                "PLACEHOLDER": "Enter a name for the scenario",
-                "ERROR": "Scenario name is required"
-              },
-              "DESCRIPTION": {
-                "LABEL": "Description",
-                "PLACEHOLDER": "Describe how and where this scenario will be used",
-                "ERROR": "Scenario description is required"
-              },
-              "INSTRUCTION": {
-                "LABEL": "How to handle",
-                "PLACEHOLDER": "Describe how and where this scenario will be handled",
-                "ERROR": "Scenario content is required"
-              },
-              "CREATE": "Create",
-              "CANCEL": "Cancel"
-            }
-          }
-        },
-        "UPDATE": {
-          "CANCEL": "Cancel",
-          "UPDATE": "Update changes"
-        },
-        "LIST": {
-          "SEARCH_PLACEHOLDER": "Search..."
-        },
-        "EMPTY_MESSAGE": "No scenarios found. Create or add examples to begin.",
-        "SEARCH_EMPTY_MESSAGE": "No scenarios found for this search.",
-        "API": {
-          "ADD": {
-            "SUCCESS": "Scenarios added successfully",
-            "ERROR": "There was an error adding scenarios, please try again."
-          },
-          "UPDATE": {
-            "SUCCESS": "Scenarios updated successfully",
-            "ERROR": "There was an error updating scenarios, please try again."
-          },
-          "DELETE": {
-            "SUCCESS": "Scenarios deleted successfully",
-            "ERROR": "There was an error deleting scenarios, please try again."
-          }
-        }
       }
     },
     "DOCUMENTS": {

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

@@ -144,9 +144,6 @@
       "AGENTS_LOADING": "جاري جلب الوكلاء...",
       "ASSIGN_TEAM": "تعيين فريق",
       "DELETE": "Delete conversation",
-      "OPEN_IN_NEW_TAB": "Open in new tab",
-      "COPY_LINK": "Copy conversation link",
-      "COPY_LINK_SUCCESS": "Conversation link copied to clipboard",
       "API": {
         "AGENT_ASSIGNMENT": {
           "SUCCESFUL": "معرف المحادثة {conversationId} تم تعيينه لـ \"{agentName}\"",

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

@@ -29,7 +29,7 @@
       "FAILURE": "Could not delete account, try again!",
       "SCHEDULED_DELETION": {
         "TITLE": "Account Scheduled for Deletion",
-        "MESSAGE_MANUAL": "هذا الحساب مجدول للحذف بتاريخ {deletionDate}. تم طلبه من قبل المسؤول. يمكنك إلغاء الحذف قبل هذا التاريخ.",
+        "MESSAGE_MANUAL": "This account is scheduled for deletion on {deletionDate}. This was requested by an administrator. You can cancel the deletion before this date.",
         "MESSAGE_INACTIVITY": "This account is scheduled for deletion on {deletionDate} due to account inactivity. You can cancel the deletion before this date.",
         "CLEAR_BUTTON": "Cancel Scheduled Deletion"
       }

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

@@ -157,12 +157,6 @@
             "DELETE_SUCCESS": "Portal deleted successfully",
             "DELETE_ERROR": "حدث خطأ أثناء حذف البوابة"
           }
-        },
-        "SEND_CNAME_INSTRUCTIONS": {
-          "API": {
-            "SUCCESS_MESSAGE": "CNAME instructions sent successfully",
-            "ERROR_MESSAGE": "Error while sending CNAME instructions"
-          }
         }
       },
       "EDIT": {
@@ -732,7 +726,7 @@
         "HOME_PAGE_LINK": {
           "LABEL": "Home page link",
           "PLACEHOLDER": "رابط الصفحة الرئيسية للبوابة",
-          "ERROR": "Enter a valid URL. The Home page link must start with 'http://' or 'https://'."
+          "ERROR": "Invalid URL. The Home page link must start with 'http://' or 'https://'."
         },
         "SLUG": {
           "LABEL": "Slug",
@@ -753,15 +747,9 @@
           "HEADER": "نطاق مخصص",
           "LABEL": "نطاق مخصص:",
           "DESCRIPTION": "You can host your portal on a custom domain. For instance, if your website is yourdomain.com and you want your portal available at docs.yourdomain.com, simply enter that in this field.",
-          "STATUS_DESCRIPTION": "Your custom portal will start working as soon as it is verified.",
           "PLACEHOLDER": "نطاق البوابة المخصص",
-          "EDIT_BUTTON": "تعديل",
+          "EDIT_BUTTON": "Edit custom domain",
           "ADD_BUTTON": "Add custom domain",
-          "STATUS": {
-            "LIVE": "مباشر",
-            "PENDING": "Awaiting verification",
-            "ERROR": "Verification failed"
-          },
           "DIALOG": {
             "ADD_HEADER": "Add custom domain",
             "EDIT_HEADER": "Edit custom domain",
@@ -769,20 +757,13 @@
             "EDIT_CONFIRM_BUTTON_LABEL": "Update domain",
             "LABEL": "نطاق مخصص",
             "PLACEHOLDER": "نطاق البوابة المخصص",
-            "ERROR": "Custom domain is required",
-            "FORMAT_ERROR": "Please enter a valid domain URL e.g. docs.yourdomain.com"
+            "ERROR": "Custom domain is required"
           },
           "DNS_CONFIGURATION_DIALOG": {
             "HEADER": "DNS configuration",
             "DESCRIPTION": "Log in to the account you have with your DNS provider, and add a CNAME record for subdomain pointing to chatwoot.help",
-            "COPY": "Successfully copied CNAME",
-            "SEND_INSTRUCTIONS": {
-              "HEADER": "Send instructions",
-              "DESCRIPTION": "If you would prefer to have someone from your development team to handle this step, you can enter email address below, and we will send them the required instructions.",
-              "PLACEHOLDER": "Enter their email",
-              "ERROR": "Enter a valid email address",
-              "SEND_BUTTON": "إرسال"
-            }
+            "HELP_TEXT": "Once this is done, you can reach out to our support to request for the auto-generated SSL certificate.",
+            "CONFIRM_BUTTON_LABEL": "Got it!"
           }
         },
         "DELETE_PORTAL": {

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

@@ -72,24 +72,6 @@
       "MARK_ALL_READ": "تم تحديد جميع الإشعارات كمقروءة",
       "DELETE_ALL": "تم حذف كل الإشعارات",
       "DELETE_ALL_READ": "تم حذف كل الإشعارات المقروءة"
-    },
-    "REAUTHORIZE": {
-      "TITLE": "Reauthorization Required",
-      "DESCRIPTION": "Your WhatsApp connection has expired. Please reconnect to continue receiving and sending messages.",
-      "BUTTON_TEXT": "Reconnect WhatsApp",
-      "LOADING_FACEBOOK": "Loading Facebook SDK...",
-      "SUCCESS": "WhatsApp reconnected successfully",
-      "ERROR": "Failed to reconnect WhatsApp. Please try again.",
-      "WHATSAPP_APP_ID_MISSING": "WhatsApp App ID is not configured. Please contact your administrator.",
-      "WHATSAPP_CONFIG_ID_MISSING": "WhatsApp Configuration ID is not configured. Please contact your administrator.",
-      "CONFIGURATION_ERROR": "Configuration error occurred during reauthorization.",
-      "FACEBOOK_LOAD_ERROR": "Failed to load Facebook SDK. Please try again.",
-      "TROUBLESHOOTING": {
-        "TITLE": "Troubleshooting",
-        "POPUP_BLOCKED": "Ensure pop-ups are allowed for this site",
-        "COOKIES": "Third-party cookies must be enabled",
-        "ADMIN_ACCESS": "You need admin access to the WhatsApp Business Account"
-      }
     }
   }
 }