refactor: simplify error handling

.gitignore

@@ -94,6 +94,3 @@ yarn-debug.log*
 .vscode
 .claude/settings.local.json
 .cursor
-
-# react component
-dist

Makefile

@@ -44,12 +44,6 @@ force_run:
 	rm -f tmp/pids/*.pid
 	overmind start -f Procfile.dev
 
-force_run_tunnel:
-	lsof -ti:3000 | xargs kill -9 2>/dev/null || true
-	rm -f ./.overmind.sock
-	rm -f tmp/pids/*.pid
-	overmind start -f Procfile.tunnel
-
 debug:
 	overmind connect backend
 
@@ -59,4 +53,4 @@ debug_worker:
 docker: 
 	docker build -t $(APP_NAME) -f ./docker/Dockerfile .
 
-.PHONY: setup db_create db_migrate db_seed db_reset db console server burn docker run force_run force_run_tunnel debug debug_worker
+.PHONY: setup db_create db_migrate db_seed db_reset db console server burn docker run force_run debug debug_worker

Procfile.tunnel

@@ -1,4 +0,0 @@
-backend: DISABLE_MINI_PROFILER=true bin/rails s -p 3000
-# https://github.com/mperham/sidekiq/issues/3090#issuecomment-389748695
-worker: dotenv bundle exec sidekiq -C config/sidekiq.yml
-vite: bin/vite build --watch

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

@@ -14,7 +14,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   before_action :check_authorization
   before_action :set_current_page, only: [:index, :active, :search, :filter]
   before_action :fetch_contact, only: [:show, :update, :destroy, :avatar, :contactable_inboxes, :destroy_custom_attributes]
-  before_action :set_include_contact_inboxes, only: [:index, :active, :search, :filter, :show, :update]
+  before_action :set_include_contact_inboxes, only: [:index, :search, :filter, :show, :update]
 
   def index
     @contacts_count = resolved_contacts.count
@@ -56,7 +56,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
     contacts = Current.account.contacts.where(id: ::OnlineStatusTracker
                   .get_available_contact_ids(Current.account.id))
     @contacts_count = contacts.count
-    @contacts = fetch_contacts(contacts)
+    @contacts = contacts.page(@current_page)
   end
 
   def show; end

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

@@ -124,12 +124,6 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     @conversation.save!
   end
 
-  def destroy
-    authorize @conversation, :destroy?
-    ::DeleteObjectJob.perform_later(@conversation, Current.user, request.ip)
-    head :ok
-  end
-
   private
 
   def permitted_update_params

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

@@ -1,32 +1,23 @@
-class Api::V1::Accounts::Google::AuthorizationsController < Api::V1::Accounts::BaseController
+class Api::V1::Accounts::Google::AuthorizationsController < Api::V1::Accounts::OauthAuthorizationController
   include GoogleConcern
-  before_action :check_authorization
 
   def create
-    email = params[:authorization][:email]
     redirect_url = google_client.auth_code.authorize_url(
       {
         redirect_uri: "#{base_url}/google/callback",
-        scope: 'email profile https://mail.google.com/',
+        scope: scope,
         response_type: 'code',
         prompt: 'consent', # the oauth flow does not return a refresh token, this is supposed to fix it
         access_type: 'offline', # the default is 'online'
+        state: state,
         client_id: GlobalConfigService.load('GOOGLE_OAUTH_CLIENT_ID', nil)
       }
     )
 
     if redirect_url
-      cache_key = "google::#{email.downcase}"
-      ::Redis::Alfred.setex(cache_key, Current.account.id, 5.minutes)
       render json: { success: true, url: redirect_url }
     else
       render json: { success: false }, status: :unprocessable_entity
     end
   end
-
-  private
-
-  def check_authorization
-    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
-  end
 end

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

@@ -1,7 +1,6 @@
-class Api::V1::Accounts::Instagram::AuthorizationsController < Api::V1::Accounts::BaseController
+class Api::V1::Accounts::Instagram::AuthorizationsController < Api::V1::Accounts::OauthAuthorizationController
   include InstagramConcern
   include Instagram::IntegrationHelper
-  before_action :check_authorization
 
   def create
     # https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/business-login#step-1--get-authorization
@@ -21,10 +20,4 @@ class Api::V1::Accounts::Instagram::AuthorizationsController < Api::V1::Accounts
       render json: { success: false }, status: :unprocessable_entity
     end
   end
-
-  private
-
-  def check_authorization
-    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
-  end
 end

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

@@ -1,28 +1,19 @@
-class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts::BaseController
+class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts::OauthAuthorizationController
   include MicrosoftConcern
-  before_action :check_authorization
 
   def create
-    email = params[:authorization][:email]
     redirect_url = microsoft_client.auth_code.authorize_url(
       {
         redirect_uri: "#{base_url}/microsoft/callback",
-        scope: 'offline_access https://outlook.office.com/IMAP.AccessAsUser.All https://outlook.office.com/SMTP.Send openid profile',
+        scope: scope,
+        state: state,
         prompt: 'consent'
       }
     )
     if redirect_url
-      cache_key = "microsoft::#{email.downcase}"
-      ::Redis::Alfred.setex(cache_key, Current.account.id, 5.minutes)
       render json: { success: true, url: redirect_url }
     else
       render json: { success: false }, status: :unprocessable_entity
     end
   end
-
-  private
-
-  def check_authorization
-    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
-  end
 end

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

@@ -0,0 +1,23 @@
+class Api::V1::Accounts::OauthAuthorizationController < Api::V1::Accounts::BaseController
+  before_action :check_authorization
+
+  protected
+
+  def scope
+    ''
+  end
+
+  def state
+    Current.account.to_sgid(expires_in: 15.minutes).to_s
+  end
+
+  def base_url
+    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
+  end
+
+  private
+
+  def check_authorization
+    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
+  end
+end

app/controllers/api/v1/accounts_controller.rb

@@ -92,7 +92,7 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def settings_params
-    params.permit(:auto_resolve_after, :auto_resolve_message, :auto_resolve_ignore_waiting, :audio_transcriptions, :auto_resolve_label)
+    params.permit(:auto_resolve_after, :auto_resolve_message, :auto_resolve_ignore_waiting)
   end
 
   def check_signup_enabled

app/controllers/concerns/google_concern.rb

@@ -14,7 +14,7 @@ module GoogleConcern
 
   private
 
-  def base_url
-    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
+  def scope
+    'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://mail.google.com/'
   end
 end

app/controllers/concerns/microsoft_concern.rb

@@ -15,7 +15,7 @@ module MicrosoftConcern
 
   private
 
-  def base_url
-    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
+  def scope
+    'offline_access https://outlook.office.com/IMAP.AccessAsUser.All https://outlook.office.com/SMTP.Send openid profile'
   end
 end

app/controllers/google/callbacks_controller.rb

@@ -12,6 +12,16 @@ class Google::CallbacksController < OauthCallbackController
 
   private
 
+  def verify_scopes
+    granted_scopes = parsed_body['scope']&.split || []
+    required_scopes = scope.split
+
+    missing_scopes = required_scopes - granted_scopes
+    return if missing_scopes.empty?
+
+    raise StandardError, I18n.t('errors.oauth.insufficient_scopes', scopes: missing_scopes.join(', '))
+  end
+
   def provider_name
     'google'
   end
@@ -24,4 +34,13 @@ class Google::CallbacksController < OauthCallbackController
     # from GoogleConcern
     google_client
   end
+
+  def handle_error(exception)
+    ChatwootExceptionTracker.new(exception).capture_exception
+
+    error_message = exception.message || I18n.t('errors.oauth.authorization_failed')
+    redirect_url = "#{ENV.fetch('FRONTEND_URL', 'http://localhost:3000')}/app/accounts/#{account.id}/settings/inboxes/new/email"
+
+    redirect_to "#{redirect_url}?error=#{CGI.escape(error_message)}"
+  end
 end

app/controllers/oauth_callback_controller.rb

@@ -5,11 +5,10 @@ class OauthCallbackController < ApplicationController
       redirect_uri: "#{base_url}/#{provider_name}/callback"
     )
 
+    verify_scopes
     handle_response
-    ::Redis::Alfred.delete(cache_key)
   rescue StandardError => e
-    ChatwootExceptionTracker.new(e).capture_exception
-    redirect_to '/'
+    handle_error(e)
   end
 
   private
@@ -64,14 +63,22 @@ class OauthCallbackController < ApplicationController
     raise NotImplementedError
   end
 
-  def cache_key
-    "#{provider_name}::#{users_data['email'].downcase}"
+  def verify_scopes
+    true
+  end
+
+  def failure_redirect_url
+    '/'
+  end
+
+  def handle_error(exception)
+    ChatwootExceptionTracker.new(exception).capture_exception
+    redirect_to failure_redirect_url
   end
 
   def create_channel_with_inbox
     ActiveRecord::Base.transaction do
       channel_email = Channel::Email.create!(email: users_data['email'], account: account)
-
       account.inboxes.create!(
         account: account,
         channel: channel_email,
@@ -86,12 +93,14 @@ class OauthCallbackController < ApplicationController
     decoded_token[0]
   end
 
-  def account_id
-    ::Redis::Alfred.get(cache_key)
+  def account_from_signed_id
+    raise 'Missing state variable' if params[:state].blank?
+
+    GlobalID::Locator.locate_signed(params[:state])
   end
 
   def account
-    @account ||= Account.find(account_id)
+    @account ||= account_from_signed_id
   end
 
   # Fallback name, for when name field is missing from users_data

app/controllers/super_admin/account_users_controller.rb

@@ -2,13 +2,6 @@ class SuperAdmin::AccountUsersController < SuperAdmin::ApplicationController
   # Overwrite any of the RESTful controller actions to implement custom behavior
   # For example, you may want to send an email after a foo is updated.
   #
-
-  # Since account/user page - account user role attribute links to the show page
-  # Handle with a redirect to the user show page
-  def show
-    redirect_to super_admin_user_path(requested_resource.user)
-  end
-
   def create
     resource = resource_class.new(resource_params)
     authorize_resource(resource)

app/javascript/dashboard/api/ApiClient.js

@@ -15,12 +15,6 @@ class ApiClient {
 
   // eslint-disable-next-line class-methods-use-this
   get accountIdFromRoute() {
-    // eslint-disable-next-line no-underscore-dangle
-    if (window.__WOOT_ACCOUNT_ID__) {
-      // eslint-disable-next-line no-underscore-dangle
-      return window.__WOOT_ACCOUNT_ID__;
-    }
-
     const isInsideAccountScopedURLs =
       window.location.pathname.includes('/app/accounts');
 

app/javascript/dashboard/api/auth.js

@@ -8,14 +8,7 @@ import {
 } from '../store/utils/api';
 
 export default {
-  async validityCheck() {
-    if (this.hasAuthToken()) {
-      const urlData = endPoints('profileUpdate');
-      const response = await axios.get(urlData.url);
-      // to match the response signature of the validityCheck endpoint
-      return Promise.resolve({ data: { payload: response } });
-    }
-
+  validityCheck() {
     const urlData = endPoints('validityCheck');
     return axios.get(urlData.url);
   },
@@ -38,10 +31,6 @@ export default {
   hasAuthCookie() {
     return !!Cookies.get('cw_d_session_info');
   },
-  hasAuthToken() {
-    // eslint-disable-next-line no-underscore-dangle
-    return !!window.__WOOT_ACCESS_TOKEN__;
-  },
   getAuthData() {
     if (this.hasAuthCookie()) {
       const savedAuthInfo = Cookies.get('cw_d_session_info');

app/javascript/dashboard/api/contacts.js

@@ -61,11 +61,6 @@ class ContactAPI extends ApiClient {
     return axios.get(requestURL);
   }
 
-  active(page = 1, sortAttr = 'name') {
-    let requestURL = `${this.url}/active?${buildContactParams(page, sortAttr)}`;
-    return axios.get(requestURL);
-  }
-
   // eslint-disable-next-line default-param-last
   filter(page = 1, sortAttr = 'name', queryPayload) {
     let requestURL = `${this.url}/filter?${buildContactParams(page, sortAttr)}`;

app/javascript/dashboard/api/inbox/conversation.js

@@ -134,12 +134,12 @@ class ConversationApi extends ApiClient {
     return axios.get(`${this.url}/${conversationId}/attachments`);
   }
 
-  getInboxAssistant(conversationId) {
-    return axios.get(`${this.url}/${conversationId}/inbox_assistant`);
+  requestCopilot(conversationId, body) {
+    return axios.post(`${this.url}/${conversationId}/copilot`, body);
   }
 
-  delete(conversationId) {
-    return axios.delete(`${this.url}/${conversationId}`);
+  getInboxAssistant(conversationId) {
+    return axios.get(`${this.url}/${conversationId}/inbox_assistant`);
   }
 }
 

app/javascript/dashboard/api/inboxes.js

@@ -1,14 +1,7 @@
 /* global axios */
 import CacheEnabledApiClient from './CacheEnabledApiClient';
-// import ApiClient from './ApiClient';
-import ApiClient from './ApiClient';
 
-// eslint-disable-next-line no-underscore-dangle
-const BaseClass = window.__WOOT_ISOLATED_SHELL__
-  ? ApiClient
-  : CacheEnabledApiClient;
-
-class Inboxes extends BaseClass {
+class Inboxes extends CacheEnabledApiClient {
   constructor() {
     super('inboxes', { accountScoped: true });
   }

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

@@ -17,7 +17,6 @@ const props = defineProps({
   additionalAttributes: { type: Object, default: () => ({}) },
   phoneNumber: { type: String, default: '' },
   thumbnail: { type: String, default: '' },
-  availabilityStatus: { type: String, default: null },
   isExpanded: { type: Boolean, default: false },
   isUpdating: { type: Boolean, default: false },
 });
@@ -93,13 +92,7 @@ const onClickViewDetails = () => emit('showContact', props.id);
 <template>
   <CardLayout :key="id" layout="row">
     <div class="flex items-center justify-start flex-1 gap-4">
-      <Avatar
-        :name="name"
-        :src="thumbnail"
-        :size="48"
-        :status="availabilityStatus"
-        rounded-full
-      />
+      <Avatar :name="name" :src="thumbnail" :size="48" rounded-full />
       <div class="flex flex-col gap-0.5 flex-1">
         <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
           <span class="text-base font-medium truncate text-n-slate-12">

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

@@ -7,16 +7,42 @@ import ContactMoreActions from './components/ContactMoreActions.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
 
 defineProps({
-  showSearch: { type: Boolean, default: true },
-  searchValue: { type: String, default: '' },
-  headerTitle: { type: String, required: true },
-  buttonLabel: { type: String, default: '' },
-  activeSort: { type: String, default: 'last_activity_at' },
-  activeOrdering: { type: String, default: '' },
-  isSegmentsView: { type: Boolean, default: false },
-  hasActiveFilters: { type: Boolean, default: false },
-  isLabelView: { type: Boolean, default: false },
-  isActiveView: { type: Boolean, default: false },
+  showSearch: {
+    type: Boolean,
+    default: true,
+  },
+  searchValue: {
+    type: String,
+    default: '',
+  },
+  headerTitle: {
+    type: String,
+    required: true,
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+  activeSort: {
+    type: String,
+    default: 'last_activity_at',
+  },
+  activeOrdering: {
+    type: String,
+    default: '',
+  },
+  isSegmentsView: {
+    type: Boolean,
+    default: false,
+  },
+  hasActiveFilters: {
+    type: Boolean,
+    default: false,
+  },
+  isLabelView: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits([
@@ -59,7 +85,7 @@ const emit = defineEmits([
           </Input>
         </div>
         <div class="flex items-center gap-2">
-          <div v-if="!isLabelView && !isActiveView" class="relative">
+          <div v-if="!isLabelView" class="relative">
             <Button
               id="toggleContactsFilterButton"
               :icon="
@@ -79,12 +105,7 @@ const emit = defineEmits([
             <slot name="filter" />
           </div>
           <Button
-            v-if="
-              hasActiveFilters &&
-              !isSegmentsView &&
-              !isLabelView &&
-              !isActiveView
-            "
+            v-if="hasActiveFilters && !isSegmentsView && !isLabelView"
             icon="i-lucide-save"
             color="slate"
             size="sm"
@@ -92,7 +113,7 @@ const emit = defineEmits([
             @click="emit('createSegment')"
           />
           <Button
-            v-if="isSegmentsView && !isLabelView && !isActiveView"
+            v-if="isSegmentsView && !isLabelView"
             icon="i-lucide-trash"
             color="slate"
             size="sm"

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

@@ -36,7 +36,6 @@ const props = defineProps({
   activeSegment: { type: Object, default: null },
   hasAppliedFilters: { type: Boolean, default: false },
   isLabelView: { type: Boolean, default: false },
-  isActiveView: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -278,7 +277,6 @@ defineExpose({
     :header-title="headerTitle"
     :is-segments-view="hasActiveSegments"
     :is-label-view="isLabelView"
-    :is-active-view="isActiveView"
     :has-active-filters="hasAppliedFilters"
     :button-label="t('CONTACTS_LAYOUT.HEADER.MESSAGE_BUTTON')"
     @search="emit('search', $event)"

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

@@ -6,7 +6,7 @@ import ContactListHeaderWrapper from 'dashboard/components-next/Contacts/Contact
 import ContactsActiveFiltersPreview from 'dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 
-const props = defineProps({
+defineProps({
   searchValue: { type: String, default: '' },
   headerTitle: { type: String, default: '' },
   showPaginationFooter: { type: Boolean, default: true },
@@ -37,23 +37,10 @@ const isNotSegmentView = computed(() => {
   return route.name !== 'contacts_dashboard_segments_index';
 });
 
-const isActiveView = computed(() => {
-  return route.name === 'contacts_dashboard_active';
-});
-
 const isLabelView = computed(
   () => route.name === 'contacts_dashboard_labels_index'
 );
 
-const showActiveFiltersPreview = computed(() => {
-  return (
-    (props.hasAppliedFilters || !isNotSegmentView.value) &&
-    !props.isFetchingList &&
-    !isLabelView.value &&
-    !isActiveView.value
-  );
-});
-
 const updateCurrentPage = page => {
   emit('update:currentPage', page);
 };
@@ -70,7 +57,7 @@ const openFilter = () => {
     <div class="flex flex-col w-full h-full transition-all duration-300">
       <ContactListHeaderWrapper
         ref="contactListHeaderWrapper"
-        :show-search="isNotSegmentView && !isActiveView"
+        :show-search="isNotSegmentView"
         :search-value="searchValue"
         :active-sort="activeSort"
         :active-ordering="activeOrdering"
@@ -79,7 +66,6 @@ const openFilter = () => {
         :segments-id="segmentsId"
         :has-applied-filters="hasAppliedFilters"
         :is-label-view="isLabelView"
-        :is-active-view="isActiveView"
         @update:sort="emit('update:sort', $event)"
         @search="emit('search', $event)"
         @apply-filter="emit('applyFilter', $event)"
@@ -88,7 +74,11 @@ const openFilter = () => {
       <main class="flex-1 overflow-y-auto">
         <div class="w-full mx-auto max-w-[60rem]">
           <ContactsActiveFiltersPreview
-            v-if="showActiveFiltersPreview"
+            v-if="
+              (hasAppliedFilters || !isNotSegmentView) &&
+              !isFetchingList &&
+              !isLabelView
+            "
             :active-segment="activeSegment"
             @clear-filters="emit('clearFilters')"
             @open-filter="openFilter"

app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue

@@ -71,7 +71,6 @@ const toggleExpanded = id => {
       :thumbnail="contact.thumbnail"
       :phone-number="contact.phoneNumber"
       :additional-attributes="contact.additionalAttributes"
-      :availability-status="contact.availabilityStatus"
       :is-expanded="expandedCardId === contact.id"
       :is-updating="isUpdating"
       @toggle="toggleExpanded(contact.id)"

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

@@ -56,7 +56,7 @@ useKeyboardEvents(keyboardEvents);
 
 <template>
   <div
-    class="flex flex-col justify-center items-center absolute top-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2 border border-n-weak rounded-full gap-2 p-1"
+    class="flex flex-col justify-center items-center absolute top-24 ltr:right-2 rtl:left-2 bg-n-solid-2 border border-n-weak rounded-full gap-2 p-1"
   >
     <Button
       v-tooltip.top="$t('CONVERSATION.SIDEBAR.CONTACT')"

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

@@ -4,14 +4,38 @@ import { computed, ref, watch, useSlots } from 'vue';
 import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 
 const props = defineProps({
-  modelValue: { type: String, default: '' },
-  label: { type: String, default: '' },
-  placeholder: { type: String, default: '' },
-  focusOnMount: { type: Boolean, default: false },
-  maxLength: { type: Number, default: 200 },
-  showCharacterCount: { type: Boolean, default: true },
-  disabled: { type: Boolean, default: false },
-  message: { type: String, default: '' },
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  focusOnMount: {
+    type: Boolean,
+    default: false,
+  },
+  maxLength: {
+    type: Number,
+    default: 200,
+  },
+  showCharacterCount: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  message: {
+    type: String,
+    default: '',
+  },
   messageType: {
     type: String,
     default: 'info',
@@ -19,7 +43,6 @@ const props = defineProps({
   },
   enableVariables: { type: Boolean, default: false },
   enableCannedResponses: { type: Boolean, default: true },
-  enabledMenuOptions: { type: Array, default: () => [] },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -97,7 +120,6 @@ watch(
         :disabled="disabled"
         :enable-variables="enableVariables"
         :enable-canned-responses="enableCannedResponses"
-        :enabled-menu-options="enabledMenuOptions"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"

app/javascript/dashboard/components-next/captain/PageLayout.vue

@@ -76,7 +76,7 @@ const handlePageChange = event => {
 
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
-    <header class="sticky top-0 z-10 px-6">
+    <header class="sticky top-0 z-10 px-6 xl:px-0">
       <div class="w-full max-w-[60rem] mx-auto">
         <div
           class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
@@ -116,7 +116,7 @@ const handlePageChange = event => {
         </div>
       </div>
     </header>
-    <main class="flex-1 px-6 overflow-y-auto">
+    <main class="flex-1 px-6 overflow-y-auto xl:px-0">
       <div class="w-full max-w-[60rem] h-full mx-auto py-4">
         <slot v-if="!showPaywall" name="controls" />
         <div

app/javascript/dashboard/components-next/copilot/Copilot.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { nextTick, ref, watch, computed } from 'vue';
+import { nextTick, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useTrack } from 'dashboard/composables';
 import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -8,17 +9,23 @@ import CopilotInput from './CopilotInput.vue';
 import CopilotLoader from './CopilotLoader.vue';
 import CopilotAgentMessage from './CopilotAgentMessage.vue';
 import CopilotAssistantMessage from './CopilotAssistantMessage.vue';
-import CopilotThinkingGroup from './CopilotThinkingGroup.vue';
 import ToggleCopilotAssistant from './ToggleCopilotAssistant.vue';
-import CopilotEmptyState from './CopilotEmptyState.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 import SidebarActionsHeader from 'dashboard/components-next/SidebarActionsHeader.vue';
-import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
+  supportAgent: {
+    type: Object,
+    default: () => ({}),
+  },
   messages: {
     type: Array,
     default: () => [],
   },
+  isCaptainTyping: {
+    type: Boolean,
+    default: false,
+  },
   conversationInboxType: {
     type: String,
     required: true,
@@ -37,11 +44,18 @@ const emit = defineEmits(['sendMessage', 'reset', 'setAssistant']);
 
 const { t } = useI18n();
 
+const COPILOT_USER_ROLES = ['assistant', 'system'];
+
 const sendMessage = message => {
   emit('sendMessage', message);
   useTrack(COPILOT_EVENTS.SEND_MESSAGE);
 };
 
+const useSuggestion = opt => {
+  emit('sendMessage', t(opt.prompt));
+  useTrack(COPILOT_EVENTS.SEND_SUGGESTED);
+};
+
 const chatContainer = ref(null);
 
 const scrollToBottom = async () => {
@@ -51,40 +65,20 @@ const scrollToBottom = async () => {
   }
 };
 
-const groupedMessages = computed(() => {
-  const result = [];
-  let thinkingGroup = [];
-  props.messages.forEach(message => {
-    if (message.message_type === 'assistant_thinking') {
-      thinkingGroup.push(message);
-    } else {
-      if (thinkingGroup.length > 0) {
-        result.push({
-          id: thinkingGroup[0].id,
-          message_type: 'thinking_group',
-          messages: thinkingGroup,
-        });
-        thinkingGroup = [];
-      }
-      result.push(message);
-    }
-  });
-  if (thinkingGroup.length > 0) {
-    result.push({
-      id: thinkingGroup[0].id,
-      message_type: 'thinking_group',
-      messages: thinkingGroup,
-    });
-  }
-  return result;
-});
-
-const isLastMessageFromAssistant = computed(() => {
-  return (
-    groupedMessages.value[groupedMessages.value.length - 1].message_type ===
-    'assistant'
-  );
-});
+const promptOptions = [
+  {
+    label: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.LABEL',
+    prompt: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.CONTENT',
+  },
+  {
+    label: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.LABEL',
+    prompt: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.CONTENT',
+  },
+  {
+    label: 'CAPTAIN.COPILOT.PROMPTS.RATE.LABEL',
+    prompt: 'CAPTAIN.COPILOT.PROMPTS.RATE.CONTENT',
+  },
+];
 
 const { updateUISettings } = useUISettings();
 
@@ -101,22 +95,8 @@ const handleSidebarAction = action => {
   }
 };
 
-const hasAssistants = computed(() => props.assistants.length > 0);
-const hasMessages = computed(() => props.messages.length > 0);
-const copilotButtons = computed(() => {
-  if (hasMessages.value) {
-    return [
-      {
-        key: 'reset',
-        icon: 'i-lucide-refresh-ccw',
-        tooltip: t('CAPTAIN.COPILOT.RESET'),
-      },
-    ];
-  }
-  return [];
-});
 watch(
-  [() => props.messages],
+  [() => props.messages, () => props.isCaptainTyping],
   () => {
     scrollToBottom();
   },
@@ -128,57 +108,64 @@ watch(
   <div class="flex flex-col h-full text-sm leading-6 tracking-tight w-full">
     <SidebarActionsHeader
       :title="$t('CAPTAIN.COPILOT.TITLE')"
-      :buttons="copilotButtons"
+      :buttons="[
+        {
+          key: 'reset',
+          icon: 'i-lucide-refresh-ccw',
+          tooltip: $t('CAPTAIN.COPILOT.RESET'),
+        },
+      ]"
       @click="handleSidebarAction"
       @close="closeCopilotPanel"
     />
-    <div
-      ref="chatContainer"
-      class="flex-1 flex px-4 py-4 overflow-y-auto items-start"
-    >
-      <div v-if="hasMessages" class="space-y-6 flex-1 flex flex-col w-full">
-        <template v-for="(item, index) in groupedMessages" :key="item.id">
-          <CopilotAgentMessage
-            v-if="item.message_type === 'user'"
-            :message="item.message"
-          />
-          <CopilotAssistantMessage
-            v-else-if="item.message_type === 'assistant'"
-            :message="item.message"
-            :is-last-message="index === groupedMessages.length - 1"
-            :conversation-inbox-type="conversationInboxType"
-          />
-          <CopilotThinkingGroup
-            v-else
-            :messages="item.messages"
-            :default-collapsed="isLastMessageFromAssistant"
-          />
-        </template>
+    <div ref="chatContainer" class="flex-1 px-4 py-4 space-y-6 overflow-y-auto">
+      <template v-for="message in messages" :key="message.id">
+        <CopilotAgentMessage
+          v-if="message.role === 'user'"
+          :support-agent="supportAgent"
+          :message="message"
+        />
+        <CopilotAssistantMessage
+          v-else-if="COPILOT_USER_ROLES.includes(message.role)"
+          :message="message"
+          :conversation-inbox-type="conversationInboxType"
+        />
+      </template>
 
-        <CopilotLoader v-if="!isLastMessageFromAssistant" />
+      <CopilotLoader v-if="isCaptainTyping" />
+    </div>
+
+    <div
+      v-if="!messages.length"
+      class="h-full w-full flex items-center justify-center"
+    >
+      <div class="h-fit px-3 py-3 space-y-1">
+        <span class="text-xs text-n-slate-10">
+          {{ $t('COPILOT.TRY_THESE_PROMPTS') }}
+        </span>
+        <button
+          v-for="prompt in promptOptions"
+          :key="prompt.label"
+          class="px-2 py-1 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center gap-1"
+          @click="() => useSuggestion(prompt)"
+        >
+          <span>{{ t(prompt.label) }}</span>
+          <Icon icon="i-lucide-chevron-right" />
+        </button>
       </div>
-      <CopilotEmptyState
-        v-else
-        :has-assistants="hasAssistants"
-        @use-suggestion="sendMessage"
-      />
     </div>
 
     <div class="mx-3 mt-px mb-2">
       <div class="flex items-center gap-2 justify-between w-full mb-1">
         <ToggleCopilotAssistant
-          v-if="assistants.length > 1"
+          v-if="assistants.length"
           :assistants="assistants"
           :active-assistant="activeAssistant"
           @set-assistant="$event => emit('setAssistant', $event)"
         />
         <div v-else />
       </div>
-      <CopilotInput
-        v-if="hasAssistants"
-        class="mb-1 w-full"
-        @send="sendMessage"
-      />
+      <CopilotInput class="mb-1 w-full" @send="sendMessage" />
     </div>
   </div>
 </template>

app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue

@@ -11,10 +11,6 @@ import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
-  isLastMessage: {
-    type: Boolean,
-    default: false,
-  },
   message: {
     type: Object,
     required: true,
@@ -24,15 +20,6 @@ const props = defineProps({
     required: true,
   },
 });
-const hasEmptyMessageContent = computed(() => !props.message?.content);
-
-const showUseButton = computed(() => {
-  return (
-    !hasEmptyMessageContent.value &&
-    props.message.reply_suggestion &&
-    props.isLastMessage
-  );
-});
 
 const messageContent = computed(() => {
   const formatter = new MessageFormatter(props.message.content);
@@ -45,6 +32,8 @@ const insertIntoRichEditor = computed(() => {
   );
 });
 
+const hasEmptyMessageContent = computed(() => !props.message?.content);
+
 const useCopilotResponse = () => {
   if (insertIntoRichEditor.value) {
     emitter.emit(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, props.message?.content);
@@ -68,7 +57,7 @@ const useCopilotResponse = () => {
     />
     <div class="flex flex-row mt-1">
       <Button
-        v-if="showUseButton"
+        v-if="!hasEmptyMessageContent"
         :label="$t('CAPTAIN.COPILOT.USE')"
         faded
         sm

app/javascript/dashboard/components-next/copilot/CopilotEmptyState.vue

@@ -1,106 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import Icon from '../icon/Icon.vue';
-
-defineProps({
-  hasAssistants: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['useSuggestion']);
-const { t } = useI18n();
-const route = useRoute();
-
-const routePromptMap = {
-  conversations: [
-    {
-      label: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.LABEL',
-      prompt: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.CONTENT',
-    },
-    {
-      label: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.LABEL',
-      prompt: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.CONTENT',
-    },
-    {
-      label: 'CAPTAIN.COPILOT.PROMPTS.RATE.LABEL',
-      prompt: 'CAPTAIN.COPILOT.PROMPTS.RATE.CONTENT',
-    },
-  ],
-  dashboard: [
-    {
-      label: 'CAPTAIN.COPILOT.PROMPTS.HIGH_PRIORITY.LABEL',
-      prompt: 'CAPTAIN.COPILOT.PROMPTS.HIGH_PRIORITY.CONTENT',
-    },
-    {
-      label: 'CAPTAIN.COPILOT.PROMPTS.LIST_CONTACTS.LABEL',
-      prompt: 'CAPTAIN.COPILOT.PROMPTS.LIST_CONTACTS.CONTENT',
-    },
-  ],
-};
-
-const getCurrentRoute = () => {
-  const path = route.path;
-  if (path.includes('/conversations')) return 'conversations';
-  if (path.includes('/dashboard')) return 'dashboard';
-  return 'dashboard';
-};
-
-const promptOptions = computed(() => {
-  const currentRoute = getCurrentRoute();
-  return routePromptMap[currentRoute] || routePromptMap.conversations;
-});
-
-const handleSuggestion = opt => {
-  emit('useSuggestion', t(opt.prompt));
-};
-</script>
-
-<template>
-  <div class="flex-1 flex flex-col gap-6 px-2">
-    <div class="flex flex-col space-y-4 py-4">
-      <Icon icon="i-woot-captain" class="text-n-slate-9 text-4xl" />
-      <div class="space-y-1">
-        <h3 class="text-base font-medium text-n-slate-12 leading-8">
-          {{ $t('CAPTAIN.COPILOT.PANEL_TITLE') }}
-        </h3>
-        <p class="text-sm text-n-slate-11 leading-6">
-          {{ $t('CAPTAIN.COPILOT.KICK_OFF_MESSAGE') }}
-        </p>
-      </div>
-    </div>
-    <div v-if="!hasAssistants" class="w-full space-y-2">
-      <p class="text-sm text-n-slate-11 leading-6">
-        {{ $t('CAPTAIN.ASSISTANTS.NO_ASSISTANTS_AVAILABLE') }}
-      </p>
-      <router-link
-        :to="{
-          name: 'captain_assistants_index',
-          params: { accountId: route.params.accountId },
-        }"
-        class="text-n-slate-11 underline hover:text-n-slate-12"
-      >
-        {{ $t('CAPTAIN.ASSISTANTS.ADD_NEW') }}
-      </router-link>
-    </div>
-    <div v-else class="w-full space-y-2">
-      <span class="text-xs text-n-slate-10 block">
-        {{ $t('CAPTAIN.COPILOT.TRY_THESE_PROMPTS') }}
-      </span>
-      <div class="space-y-1">
-        <button
-          v-for="prompt in promptOptions"
-          :key="prompt.label"
-          class="w-full px-3 py-2 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center justify-between hover:bg-n-slate-3 transition-colors"
-          @click="handleSuggestion(prompt)"
-        >
-          <span>{{ t(prompt.label) }}</span>
-          <Icon icon="i-lucide-chevron-right" />
-        </button>
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/copilot/CopilotLauncher.vue

@@ -1,62 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import Button from 'dashboard/components-next/button/Button.vue';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import { useMapGetter } from 'dashboard/composables/store';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-const route = useRoute();
-
-const { uiSettings, updateUISettings } = useUISettings();
-
-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',
-  ];
-  return CONVERSATION_ROUTES.includes(route.name);
-});
-
-const currentAccountId = useMapGetter('getCurrentAccountId');
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
-
-const showCopilotLauncher = computed(() => {
-  const isCaptainEnabled = isFeatureEnabledonAccount.value(
-    currentAccountId.value,
-    FEATURE_FLAGS.CAPTAIN
-  );
-  return (
-    isCaptainEnabled &&
-    !uiSettings.value.is_copilot_panel_open &&
-    !isConversationRoute.value
-  );
-});
-const toggleSidebar = () => {
-  updateUISettings({
-    is_copilot_panel_open: !uiSettings.value.is_copilot_panel_open,
-    is_contact_sidebar_open: false,
-  });
-};
-</script>
-
-<template>
-  <div v-if="showCopilotLauncher" class="fixed bottom-4 right-4 z-50">
-    <div class="rounded-full bg-n-alpha-2 p-1">
-      <Button
-        icon="i-woot-captain"
-        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/copilot/CopilotThinkingBlock.vue

@@ -17,7 +17,7 @@ defineProps({
         icon="i-lucide-sparkles"
         class="w-4 h-4 mt-0.5 flex-shrink-0 text-n-slate-9"
       />
-      <div class="text-sm text-n-slate-12">
+      <div class="text-sm text-n-slate-11">
         {{ content }}
       </div>
     </div>

app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.vue

@@ -51,10 +51,10 @@ watch(
       }"
     >
       <CopilotThinkingBlock
-        v-for="copilotMessage in messages"
-        :key="copilotMessage.id"
-        :content="copilotMessage.message.content"
-        :reasoning="copilotMessage.message.reasoning"
+        v-for="message in messages"
+        :key="message.id"
+        :content="message.content"
+        :reasoning="message.reasoning"
       />
     </div>
   </div>

app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue

@@ -74,7 +74,6 @@ const updateSelected = newValue => {
       <slot name="trigger" :toggle="toggle">
         <Button
           ref="triggerRef"
-          type="button"
           sm
           slate
           :variant

app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue

@@ -9,14 +9,7 @@ import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
 import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
 import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
 
-const {
-  options,
-  disableSearch,
-  placeholderIcon,
-  placeholder,
-  placeholderTrailingIcon,
-  searchPlaceholder,
-} = defineProps({
+const { options } = defineProps({
   options: {
     type: Array,
     required: true,
@@ -25,22 +18,6 @@ const {
     type: Boolean,
     default: false,
   },
-  placeholderIcon: {
-    type: String,
-    default: 'i-lucide-plus',
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  placeholderTrailingIcon: {
-    type: Boolean,
-    default: false,
-  },
-  searchPlaceholder: {
-    type: String,
-    default: '',
-  },
 });
 
 const { t } = useI18n();
@@ -92,26 +69,15 @@ const toggleSelected = option => {
         sm
         slate
         faded
-        type="button"
         :icon="selectedItem.icon"
         :label="selectedItem.name"
         @click="toggle"
       />
-      <Button
-        v-else
-        sm
-        slate
-        faded
-        type="button"
-        :trailing-icon="placeholderTrailingIcon"
-        @click="toggle"
-      >
+      <Button v-else sm slate faded @click="toggle">
         <template #icon>
-          <Icon :icon="placeholderIcon" class="text-n-slate-11" />
+          <Icon icon="i-lucide-plus" class="text-n-slate-11" />
         </template>
-        <span class="text-n-slate-11">{{
-          placeholder || t('COMBOBOX.PLACEHOLDER')
-        }}</span>
+        <span class="text-n-slate-11">{{ t('COMBOBOX.PLACEHOLDER') }}</span>
       </Button>
     </template>
     <DropdownBody class="top-0 min-w-56 z-50" strong>
@@ -121,7 +87,7 @@ const toggleSelected = option => {
           v-model="searchTerm"
           autofocus
           class="p-1.5 pl-8 text-n-slate-11 bg-n-alpha-1 rounded-lg w-full"
-          :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
+          :placeholder="t('COMBOBOX.SEARCH_PLACEHOLDER')"
         />
       </div>
       <DropdownSection class="max-h-80 overflow-scroll">

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

@@ -1,8 +1,7 @@
 <script setup>
-import { computed, watch } from 'vue';
+import { computed, ref } from 'vue';
 import Input from './Input.vue';
 import { useI18n } from 'vue-i18n';
-import { DURATION_UNITS } from './constants';
 
 const props = defineProps({
   min: { type: Number, default: 0 },
@@ -12,50 +11,36 @@ const props = defineProps({
 
 const { t } = useI18n();
 const duration = defineModel('modelValue', { type: Number, default: null });
-const unit = defineModel('unit', {
-  type: String,
-  default: DURATION_UNITS.MINUTES,
-  validate(value) {
-    return Object.values(DURATION_UNITS).includes(value);
-  },
-});
 
-const convertToMinutes = newValue => {
-  if (unit.value === DURATION_UNITS.MINUTES) {
-    return Math.floor(newValue);
-  }
-  if (unit.value === DURATION_UNITS.HOURS) {
-    return Math.floor(newValue) * 60;
-  }
-  return Math.floor(newValue) * 24 * 60;
+const UNIT_TYPES = {
+  MINUTES: 'minutes',
+  HOURS: 'hours',
+  DAYS: 'days',
 };
+const unit = ref(UNIT_TYPES.MINUTES);
 
 const transformedValue = computed({
   get() {
-    if (unit.value === DURATION_UNITS.MINUTES) return duration.value;
-    if (unit.value === DURATION_UNITS.HOURS)
-      return Math.floor(duration.value / 60);
-    if (unit.value === DURATION_UNITS.DAYS)
+    if (unit.value === UNIT_TYPES.MINUTES) return duration.value;
+    if (unit.value === UNIT_TYPES.HOURS) return Math.floor(duration.value / 60);
+    if (unit.value === UNIT_TYPES.DAYS)
       return Math.floor(duration.value / 24 / 60);
 
     return 0;
   },
   set(newValue) {
-    let minuteValue = convertToMinutes(newValue);
+    let minuteValue;
+    if (unit.value === UNIT_TYPES.MINUTES) {
+      minuteValue = Math.floor(newValue);
+    } else if (unit.value === UNIT_TYPES.HOURS) {
+      minuteValue = Math.floor(newValue * 60);
+    } else if (unit.value === UNIT_TYPES.DAYS) {
+      minuteValue = Math.floor(newValue * 24 * 60);
+    }
 
     duration.value = Math.min(Math.max(minuteValue, props.min), props.max);
   },
 });
-
-// when unit is changed set the nearest value to that unit
-// so if the minute is set to 900, and the user changes the unit to "days"
-// the transformed value will show 0, but the real value will still be 900
-// this might create some confusion, especially when saving
-// this watcher fixes it by rounding the duration basically, to the nearest unit value
-watch(unit, () => {
-  let adjustedValue = convertToMinutes(transformedValue.value);
-  duration.value = Math.min(Math.max(adjustedValue, props.min), props.max);
-});
 </script>
 
 <template>
@@ -72,12 +57,10 @@ watch(unit, () => {
     :disabled="disabled"
     class="mb-0 text-sm disabled:outline-n-weak disabled:opacity-40"
   >
-    <option :value="DURATION_UNITS.MINUTES">
+    <option :value="UNIT_TYPES.MINUTES">
       {{ t('DURATION_INPUT.MINUTES') }}
     </option>
-    <option :value="DURATION_UNITS.HOURS">
-      {{ t('DURATION_INPUT.HOURS') }}
-    </option>
-    <option :value="DURATION_UNITS.DAYS">{{ t('DURATION_INPUT.DAYS') }}</option>
+    <option :value="UNIT_TYPES.HOURS">{{ t('DURATION_INPUT.HOURS') }}</option>
+    <option :value="UNIT_TYPES.DAYS">{{ t('DURATION_INPUT.DAYS') }}</option>
   </select>
 </template>

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

@@ -1,5 +0,0 @@
-export const DURATION_UNITS = {
-  MINUTES: 'minutes',
-  HOURS: 'hours',
-  DAYS: 'days',
-};

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

@@ -315,9 +315,6 @@ const componentToRender = computed(() => {
 });
 
 const shouldShowContextMenu = computed(() => {
-  // eslint-disable-next-line no-underscore-dangle
-  if (window.__WOOT_ISOLATED_SHELL__) return false;
-
   return !props.contentAttributes?.isUnsupported;
 });
 
@@ -444,7 +441,7 @@ const avatarTooltip = computed(() => {
 });
 
 const setupHighlightTimer = () => {
-  if (Number(route?.query?.messageId) !== Number(props.id)) {
+  if (Number(route.query.messageId) !== Number(props.id)) {
     return;
   }
 

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

@@ -1,45 +0,0 @@
-<template>
-  <svg
-    class="w-8 h-4"
-    viewBox="0 0 120 30"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-  >
-    <circle cx="15" cy="15" r="12">
-      <animate
-        attributeName="cy"
-        from="15"
-        to="5"
-        begin="0s"
-        dur="0.9s"
-        values="15;5;15;15;15;15"
-        calcMode="linear"
-        repeatCount="indefinite"
-      />
-    </circle>
-    <circle cx="55" cy="15" r="12">
-      <animate
-        attributeName="cy"
-        from="15"
-        to="5"
-        begin="0.1s"
-        dur="0.9s"
-        values="15;5;15;15;15;15"
-        calcMode="linear"
-        repeatCount="indefinite"
-      />
-    </circle>
-    <circle cx="95" cy="15" r="12">
-      <animate
-        attributeName="cy"
-        from="15"
-        to="5"
-        begin="0.2s"
-        dur="0.9s"
-        values="15;5;15;15;15;15"
-        calcMode="linear"
-        repeatCount="indefinite"
-      />
-    </circle>
-  </svg>
-</template>

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

@@ -5,7 +5,6 @@ import { useAlert } from 'dashboard/composables';
 import BaseBubble from './Base.vue';
 import Button from 'next/button/Button.vue';
 import Icon from 'next/icon/Icon.vue';
-import { useGallery } from '../useGallery';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 import { useMessageContext } from '../provider.js';
 import { downloadFile } from '@chatwoot/utils';
@@ -22,8 +21,8 @@ const attachment = computed(() => {
 });
 
 const hasError = ref(false);
+const showGallery = ref(false);
 const isDownloading = ref(false);
-const { showGallery, isGalleryAllowed, toggleGallery } = useGallery();
 
 const handleError = () => {
   hasError.value = true;
@@ -47,7 +46,7 @@ const downloadAttachment = async () => {
   <BaseBubble
     class="overflow-hidden p-3"
     data-bubble-name="image"
-    @click="toggleGallery(true)"
+    @click="showGallery = true"
   >
     <div v-if="hasError" class="flex items-center gap-1 text-center rounded-lg">
       <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
@@ -83,7 +82,7 @@ const downloadAttachment = async () => {
     </div>
   </BaseBubble>
   <GalleryView
-    v-if="showGallery && isGalleryAllowed"
+    v-if="showGallery"
     v-model:show="showGallery"
     :attachment="useSnakeCase(attachment)"
     :all-attachments="filteredCurrentChatAttachments"

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

@@ -2,7 +2,6 @@
 import { ref, computed } from 'vue';
 import BaseBubble from './Base.vue';
 import Icon from 'next/icon/Icon.vue';
-import { useGallery } from '../useGallery';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 import { useMessageContext } from '../provider.js';
 import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
@@ -10,7 +9,7 @@ import { ATTACHMENT_TYPES } from '../constants';
 
 const emit = defineEmits(['error']);
 const hasError = ref(false);
-const { showGallery, isGalleryAllowed, toggleGallery } = useGallery();
+const showGallery = ref(false);
 const { filteredCurrentChatAttachments, attachments } = useMessageContext();
 
 const handleError = () => {
@@ -31,7 +30,7 @@ const isReel = computed(() => {
   <BaseBubble
     class="overflow-hidden p-3"
     data-bubble-name="video"
-    @click="toggleGallery(true)"
+    @click="showGallery = true"
   >
     <div class="relative group rounded-lg overflow-hidden">
       <div
@@ -53,7 +52,7 @@ const isReel = computed(() => {
     </div>
   </BaseBubble>
   <GalleryView
-    v-if="showGallery && isGalleryAllowed"
+    v-if="showGallery"
     v-model:show="showGallery"
     :attachment="useSnakeCase(attachment)"
     :all-attachments="filteredCurrentChatAttachments"

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

@@ -109,58 +109,49 @@ const downloadAudio = async () => {
   </audio>
   <div
     v-bind="$attrs"
-    class="rounded-xl w-full gap-2 p-1.5 bg-n-alpha-white flex flex-col items-center border border-n-container shadow-[0px_2px_8px_0px_rgba(94,94,94,0.06)]"
+    class="rounded-xl w-full gap-1 p-1.5 bg-n-alpha-white flex items-center border border-n-container shadow-[0px_2px_8px_0px_rgba(94,94,94,0.06)]"
   >
-    <div class="flex gap-1 w-full flex-1 items-center justify-start">
-      <button class="p-0 border-0 size-8" @click="playOrPause">
-        <Icon
-          v-if="isPlaying"
-          class="size-8"
-          icon="i-teenyicons-pause-small-solid"
-        />
-        <Icon v-else class="size-8" icon="i-teenyicons-play-small-solid" />
-      </button>
-      <div class="tabular-nums text-xs">
-        {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
-      </div>
-      <div class="flex-1 items-center flex px-2">
-        <input
-          type="range"
-          min="0"
-          :max="duration"
-          :value="currentTime"
-          class="w-full h-1 bg-n-slate-12/40 rounded-lg appearance-none cursor-pointer accent-current"
-          @input="seek"
-        />
-      </div>
-      <button
-        class="border-0 w-10 h-6 grid place-content-center bg-n-alpha-2 hover:bg-alpha-3 rounded-2xl"
-        @click="changePlaybackSpeed"
-      >
-        <span class="text-xs text-n-slate-11 font-medium">
-          {{ playbackSpeedLabel }}
-        </span>
-      </button>
-      <button
-        class="p-0 border-0 size-8 grid place-content-center"
-        @click="toggleMute"
-      >
-        <Icon v-if="isMuted" class="size-4" icon="i-lucide-volume-off" />
-        <Icon v-else class="size-4" icon="i-lucide-volume-2" />
-      </button>
-      <button
-        class="p-0 border-0 size-8 grid place-content-center"
-        @click="downloadAudio"
-      >
-        <Icon class="size-4" icon="i-lucide-download" />
-      </button>
+    <button class="p-0 border-0 size-8" @click="playOrPause">
+      <Icon
+        v-if="isPlaying"
+        class="size-8"
+        icon="i-teenyicons-pause-small-solid"
+      />
+      <Icon v-else class="size-8" icon="i-teenyicons-play-small-solid" />
+    </button>
+    <div class="tabular-nums text-xs">
+      {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
     </div>
-
-    <div
-      v-if="attachment.transcribedText"
-      class="text-n-slate-12 p-3 text-sm bg-n-alpha-1 rounded-lg w-full break-words"
+    <div class="flex-1 items-center flex px-2">
+      <input
+        type="range"
+        min="0"
+        :max="duration"
+        :value="currentTime"
+        class="w-full h-1 bg-n-slate-12/40 rounded-lg appearance-none cursor-pointer accent-current"
+        @input="seek"
+      />
+    </div>
+    <button
+      class="border-0 w-10 h-6 grid place-content-center bg-n-alpha-2 hover:bg-alpha-3 rounded-2xl"
+      @click="changePlaybackSpeed"
     >
-      {{ attachment.transcribedText }}
-    </div>
+      <span class="text-xs text-n-slate-11 font-medium">
+        {{ playbackSpeedLabel }}
+      </span>
+    </button>
+    <button
+      class="p-0 border-0 size-8 grid place-content-center"
+      @click="toggleMute"
+    >
+      <Icon v-if="isMuted" class="size-4" icon="i-lucide-volume-off" />
+      <Icon v-else class="size-4" icon="i-lucide-volume-2" />
+    </button>
+    <button
+      class="p-0 border-0 size-8 grid place-content-center"
+      @click="downloadAudio"
+    >
+      <Icon class="size-4" icon="i-lucide-download" />
+    </button>
   </div>
 </template>

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

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue';
 import Icon from 'next/icon/Icon.vue';
-import { useGallery } from '../useGallery';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 import { useMessageContext } from '../provider.js';
 
@@ -14,7 +13,7 @@ defineProps({
   },
 });
 const hasError = ref(false);
-const { showGallery, toggleGallery, isGalleryAllowed } = useGallery();
+const showGallery = ref(false);
 
 const { filteredCurrentChatAttachments } = useMessageContext();
 
@@ -26,7 +25,7 @@ const handleError = () => {
 <template>
   <div
     class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer"
-    @click="toggleGallery(true)"
+    @click="showGallery = true"
   >
     <div
       v-if="hasError"
@@ -43,7 +42,7 @@ const handleError = () => {
     />
   </div>
   <GalleryView
-    v-if="showGallery && isGalleryAllowed"
+    v-if="showGallery"
     v-model:show="showGallery"
     :attachment="useSnakeCase(attachment)"
     :all-attachments="filteredCurrentChatAttachments"

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

@@ -1,6 +1,6 @@
 <script setup>
+import { ref } from 'vue';
 import Icon from 'next/icon/Icon.vue';
-import { useGallery } from '../useGallery';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 import { useMessageContext } from '../provider.js';
 import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
@@ -12,7 +12,7 @@ defineProps({
   },
 });
 
-const { showGallery, isGalleryAllowed, toggleGallery } = useGallery();
+const showGallery = ref(false);
 
 const { filteredCurrentChatAttachments } = useMessageContext();
 </script>
@@ -20,7 +20,7 @@ const { filteredCurrentChatAttachments } = useMessageContext();
 <template>
   <div
     class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer relative group"
-    @click="toggleGallery(true)"
+    @click="showGallery = true"
   >
     <video
       :src="attachment.dataUrl"
@@ -42,7 +42,7 @@ const { filteredCurrentChatAttachments } = useMessageContext();
     </div>
   </div>
   <GalleryView
-    v-if="showGallery && isGalleryAllowed"
+    v-if="showGallery"
     v-model:show="showGallery"
     :attachment="useSnakeCase(attachment)"
     :all-attachments="filteredCurrentChatAttachments"

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

@@ -1,23 +0,0 @@
-import { computed } from 'vue';
-import { useToggle } from '@vueuse/core';
-
-export function useGallery() {
-  const [showGallery] = useToggle(false);
-
-  const isGalleryAllowed = computed(() => {
-    return true;
-    // return !window.__WOOT_ISOLATED_SHELL__;
-  });
-
-  const toggleGallery = value => {
-    if (!isGalleryAllowed.value) return;
-
-    showGallery.value = value;
-  };
-
-  return {
-    showGallery,
-    isGalleryAllowed,
-    toggleGallery,
-  };
-}

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

@@ -235,12 +235,6 @@ const menuItems = computed(() => {
           ),
           activeOn: ['contacts_dashboard_index', 'contacts_edit'],
         },
-        {
-          name: 'Active',
-          label: t('SIDEBAR.ACTIVE'),
-          to: accountScopedRoute('contacts_dashboard_active'),
-          activeOn: ['contacts_dashboard_active'],
-        },
         {
           name: 'Segments',
           icon: 'i-lucide-group',

app/javascript/dashboard/components/ChatList.vue

@@ -22,7 +22,6 @@ import {
 // https://tanstack.com/virtual/latest/docs/framework/vue/examples/variable
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
 import ChatListHeader from './ChatListHeader.vue';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import ConversationFilter from 'next/filter/ConversationFilter.vue';
 import SaveCustomView from 'next/filter/SaveCustomView.vue';
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
@@ -83,7 +82,6 @@ const emit = defineEmits(['conversationLoad']);
 const { uiSettings } = useUISettings();
 const { t } = useI18n();
 const router = useRouter();
-const route = useRoute();
 const store = useStore();
 
 const conversationListRef = ref(null);
@@ -648,30 +646,6 @@ function openLastItemAfterDeleteInFolder() {
   }
 }
 
-function redirectToConversationList() {
-  const {
-    params: { accountId, inbox_id: inboxId, label, teamId },
-    name,
-  } = route;
-
-  let conversationType = '';
-  if (isOnMentionsView({ route: { name } })) {
-    conversationType = 'mention';
-  } else if (isOnUnattendedView({ route: { name } })) {
-    conversationType = 'unattended';
-  }
-  router.push(
-    conversationListPageURL({
-      accountId,
-      conversationType: conversationType,
-      customViewId: props.foldersId,
-      inboxId,
-      label,
-      teamId,
-    })
-  );
-}
-
 async function assignPriority(priority, conversationId = null) {
   store.dispatch('setCurrentChatPriority', {
     priority,
@@ -696,7 +670,26 @@ async function markAsUnread(conversationId) {
     await store.dispatch('markMessagesUnread', {
       id: conversationId,
     });
-    redirectToConversationList();
+    const {
+      params: { accountId, inbox_id: inboxId, label, teamId },
+      name,
+    } = useRoute();
+    let conversationType = '';
+    if (isOnMentionsView({ route: { name } })) {
+      conversationType = 'mention';
+    } else if (isOnUnattendedView({ route: { name } })) {
+      conversationType = 'unattended';
+    }
+    router.push(
+      conversationListPageURL({
+        accountId,
+        conversationType: conversationType,
+        customViewId: props.foldersId,
+        inboxId,
+        label,
+        teamId,
+      })
+    );
   } catch (error) {
     // Ignore error
   }
@@ -710,7 +703,6 @@ async function markAsRead(conversationId) {
     // Ignore error
   }
 }
-
 async function onAssignTeam(team, conversationId = null) {
   try {
     await store.dispatch('assignTeam', {
@@ -772,26 +764,6 @@ onMounted(() => {
   }
 });
 
-const deleteConversationDialogRef = ref(null);
-const selectedConversationId = ref(null);
-
-async function deleteConversation() {
-  try {
-    await store.dispatch('deleteConversation', selectedConversationId.value);
-    redirectToConversationList();
-    selectedConversationId.value = null;
-    deleteConversationDialogRef.value.close();
-    useAlert(t('CONVERSATION.SUCCESS_DELETE_CONVERSATION'));
-  } catch (error) {
-    useAlert(t('CONVERSATION.FAIL_DELETE_CONVERSATION'));
-  }
-}
-
-const handleDelete = conversationId => {
-  selectedConversationId.value = conversationId;
-  deleteConversationDialogRef.value.open();
-};
-
 provide('selectConversation', selectConversation);
 provide('deSelectConversation', deSelectConversation);
 provide('assignAgent', onAssignAgent);
@@ -803,7 +775,6 @@ provide('markAsUnread', markAsUnread);
 provide('markAsRead', markAsRead);
 provide('assignPriority', assignPriority);
 provide('isConversationSelected', isConversationSelected);
-provide('deleteConversation', handleDelete);
 
 watch(activeTeam, () => resetAndFetchData());
 
@@ -967,19 +938,6 @@ watch(conversationFilters, (newVal, oldVal) => {
         </template>
       </DynamicScroller>
     </div>
-    <Dialog
-      ref="deleteConversationDialogRef"
-      type="alert"
-      :title="
-        $t('CONVERSATION.DELETE_CONVERSATION.TITLE', {
-          conversationId: selectedConversationId,
-        })
-      "
-      :description="$t('CONVERSATION.DELETE_CONVERSATION.DESCRIPTION')"
-      :confirm-button-label="$t('CONVERSATION.DELETE_CONVERSATION.CONFIRM')"
-      @confirm="deleteConversation"
-      @close="selectedConversationId = null"
-    />
     <TeleportWithDirection
       v-if="showAdvancedFilters"
       to="#conversationFilterTeleportTarget"

app/javascript/dashboard/components/ConversationItem.vue

@@ -16,7 +16,6 @@ export default {
     'markAsRead',
     'assignPriority',
     'isConversationSelected',
-    'deleteConversation',
   ],
   props: {
     source: {
@@ -68,6 +67,5 @@ export default {
     @mark-as-unread="markAsUnread"
     @mark-as-read="markAsRead"
     @assign-priority="assignPriority"
-    @delete-conversation="deleteConversation"
   />
 </template>

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -134,7 +134,7 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
 <template>
   <div class="relative flex items-center justify-end resolve-actions">
     <div
-      class="rounded-lg shadow outline-1 outline flex-shrink-0"
+      class="rounded-lg shadow outline-1 outline"
       :class="!showOpenButton ? 'outline-n-container' : 'outline-transparent'"
     >
       <Button
@@ -178,7 +178,7 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="dropdown-pane dropdown-pane--open left-auto top-full mt-0.5 start-0 xl:start-auto xl:end-0 max-w-[12.5rem] min-w-[9.75rem]"
+      class="dropdown-pane dropdown-pane--open left-auto top-full mt-0.5 ltr:right-0 rtl:left-0 max-w-[12.5rem] min-w-[9.75rem]"
     >
       <WootDropdownMenu class="mb-0">
         <WootDropdownItem v-if="!isPending">

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

@@ -1,11 +1,16 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watchEffect } from 'vue';
 import { useStore } from 'dashboard/composables/store';
 import Copilot from 'dashboard/components-next/copilot/Copilot.vue';
+import ConversationAPI from 'dashboard/api/inbox/conversation';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useUISettings } from 'dashboard/composables/useUISettings';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-defineProps({
+
+const props = defineProps({
+  conversationId: {
+    type: [Number, String],
+    required: true,
+  },
   conversationInboxType: {
     type: String,
     required: true,
@@ -15,25 +20,13 @@ defineProps({
 const store = useStore();
 const currentUser = useMapGetter('getCurrentUser');
 const assistants = useMapGetter('captainAssistants/getRecords');
-const uiFlags = useMapGetter('captainAssistants/getUIFlags');
 const inboxAssistant = useMapGetter('getCopilotAssistant');
-const currentChat = useMapGetter('getSelectedChat');
-
-const selectedCopilotThreadId = ref(null);
-const messages = computed(() =>
-  store.getters['copilotMessages/getMessagesByThreadId'](
-    selectedCopilotThreadId.value
-  )
-);
-
-const currentAccountId = useMapGetter('getCurrentAccountId');
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
-
-const selectedAssistantId = ref(null);
 const { uiSettings, updateUISettings } = useUISettings();
 
+const messages = ref([]);
+const isCaptainTyping = ref(false);
+const selectedAssistantId = ref(null);
+
 const activeAssistant = computed(() => {
   const preferredId = uiSettings.value.preferred_captain_assistant_id;
 
@@ -62,57 +55,68 @@ const setAssistant = async assistant => {
   });
 };
 
-const shouldShowCopilotPanel = computed(() => {
-  const isCaptainEnabled = isFeatureEnabledonAccount.value(
-    currentAccountId.value,
-    FEATURE_FLAGS.CAPTAIN
-  );
-  const { is_copilot_panel_open: isCopilotPanelOpen } = uiSettings.value;
-  return isCaptainEnabled && isCopilotPanelOpen && !uiFlags.value.fetchingList;
-});
-
 const handleReset = () => {
-  selectedCopilotThreadId.value = null;
+  messages.value = [];
 };
 
 const sendMessage = async message => {
-  if (selectedCopilotThreadId.value) {
-    await store.dispatch('copilotMessages/create', {
-      assistant_id: activeAssistant.value.id,
-      conversation_id: currentChat.value?.id,
-      threadId: selectedCopilotThreadId.value,
-      message,
+  // Add user message
+  messages.value.push({
+    id: messages.value.length + 1,
+    role: 'user',
+    content: message,
+  });
+  isCaptainTyping.value = true;
+
+  try {
+    const { data } = await ConversationAPI.requestCopilot(
+      props.conversationId,
+      {
+        previous_history: messages.value
+          .map(m => ({
+            role: m.role,
+            content: m.content,
+          }))
+          .slice(0, -1),
+        message,
+        assistant_id: selectedAssistantId.value,
+      }
+    );
+    messages.value.push({
+      id: new Date().getTime(),
+      role: 'assistant',
+      content: data.message,
     });
-  } else {
-    const response = await store.dispatch('copilotThreads/create', {
-      assistant_id: activeAssistant.value.id,
-      conversation_id: currentChat.value?.id,
-      message,
-    });
-    selectedCopilotThreadId.value = response.id;
+  } catch (error) {
+    // eslint-disable-next-line
+    console.log(error);
+  } finally {
+    isCaptainTyping.value = false;
   }
 };
 
 onMounted(() => {
   store.dispatch('captainAssistants/get');
 });
+
+watchEffect(() => {
+  if (props.conversationId) {
+    store.dispatch('getInboxCaptainAssistantById', props.conversationId);
+    selectedAssistantId.value = activeAssistant.value?.id;
+  }
+});
 </script>
 
 <template>
-  <div
-    v-if="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"
-      :support-agent="currentUser"
-      :conversation-inbox-type="conversationInboxType"
-      :assistants="assistants"
-      :active-assistant="activeAssistant"
-      @set-assistant="setAssistant"
-      @send-message="sendMessage"
-      @reset="handleReset"
-    />
-  </div>
-  <template v-else />
+  <Copilot
+    :messages="messages"
+    :support-agent="currentUser"
+    :is-captain-typing="isCaptainTyping"
+    :conversation-inbox-type="conversationInboxType"
+    :assistants="assistants"
+    :active-assistant="activeAssistant"
+    @set-assistant="setAssistant"
+    @send-message="sendMessage"
+    @reset="handleReset"
+  />
 </template>

app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js

@@ -9,7 +9,6 @@ const contacts = accountId => ({
     'contacts_edit',
     'contacts_edit_segment',
     'contacts_edit_label',
-    'contacts_dashboard_active',
   ],
   menuItems: [
     {
@@ -19,13 +18,6 @@ const contacts = accountId => ({
       toState: frontendURL(`accounts/${accountId}/contacts?page=1`),
       toStateName: 'contacts_dashboard_index',
     },
-    {
-      icon: 'visitor-contacts',
-      label: 'ACTIVE',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/contacts/active`),
-      toStateName: 'contacts_dashboard_active',
-    },
   ],
 });
 

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

@@ -170,10 +170,6 @@ const shouldShowCannedResponses = computed(() => {
 });
 
 const editorMenuOptions = computed(() => {
-  // eslint-disable-next-line no-underscore-dangle
-  if (window.__WOOT_ISOLATED_SHELL__) {
-    return [];
-  }
   return props.enabledMenuOptions.length
     ? props.enabledMenuOptions
     : MESSAGE_EDITOR_MENU_OPTIONS;
@@ -426,14 +422,10 @@ function updateImgToolbarOnDelete() {
 }
 
 function isEnterToSendEnabled() {
-  // eslint-disable-next-line no-underscore-dangle
-  if (window.__WOOT_ISOLATED_SHELL__) return false;
   return isEditorHotKeyEnabled('enter');
 }
 
 function isCmdPlusEnterToSendEnabled() {
-  // eslint-disable-next-line no-underscore-dangle
-  if (window.__WOOT_ISOLATED_SHELL__) return true;
   return isEditorHotKeyEnabled('cmd_enter');
 }
 
@@ -661,7 +653,7 @@ watch(sendWithSignature, newValue => {
   }
 });
 
-onMounted(async () => {
+onMounted(() => {
   // [VITE] state assignment was done in created before
   state = createState(
     props.modelValue,
@@ -742,10 +734,6 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
 .ProseMirror-menubar-wrapper {
   @apply flex flex-col;
 
-  .ProseMirror-menubar:empty {
-    display: none;
-  }
-
   .ProseMirror-menubar {
     min-height: var(--space-two) !important;
     @apply -ml-2.5 pb-0 bg-transparent text-n-slate-11;

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

@@ -55,16 +55,10 @@ const translateValue = computed(() => {
     class="flex items-center w-auto h-8 p-1 transition-all border rounded-full bg-n-alpha-2 group relative duration-300 ease-in-out z-0"
     @click="$emit('toggleMode')"
   >
-    <div
-      ref="wootEditorReplyMode"
-      class="flex items-center gap-1 px-2 z-20 text-n-slate-11"
-    >
+    <div ref="wootEditorReplyMode" class="flex items-center gap-1 px-2 z-20">
       {{ $t('CONVERSATION.REPLYBOX.REPLY') }}
     </div>
-    <div
-      ref="wootEditorPrivateMode"
-      class="flex items-center gap-1 px-2 z-20 text-n-slate-11"
-    >
+    <div ref="wootEditorPrivateMode" class="flex items-center gap-1 px-2 z-20">
       {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
     </div>
     <div

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

@@ -118,12 +118,6 @@ export default {
       type: String,
       default: '',
     },
-    allowSignature: { type: Boolean, default: false },
-    allowEmoji: { type: Boolean, default: false },
-    allowAiAssist: { type: Boolean, default: false },
-    allowVideoCall: { type: Boolean, default: false },
-    allowFileUpload: { type: Boolean, default: false },
-    allowAudioRecorder: { type: Boolean, default: false },
   },
   emits: [
     'replaceText',
@@ -270,7 +264,6 @@ export default {
   <div class="flex justify-between p-3" :class="wrapClass">
     <div class="left-wrap">
       <NextButton
-        v-if="allowEmoji"
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
         icon="i-ph-smiley-sticker"
         slate
@@ -279,7 +272,6 @@ export default {
         @click="toggleEmojiPicker"
       />
       <FileUpload
-        v-if="allowFileUpload"
         ref="uploadRef"
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
         input-id="conversationAttachment"
@@ -303,40 +295,36 @@ export default {
           sm
         />
       </FileUpload>
-      <template v-if="allowAudioRecorder">
-        <NextButton
-          v-if="showAudioRecorderButton"
-          v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ICON')"
-          :icon="
-            !isRecordingAudio ? 'i-ph-microphone' : 'i-ph-microphone-slash'
-          "
-          slate
-          faded
-          sm
-          @click="toggleAudioRecorder"
-        />
-        <NextButton
-          v-if="showEditorToggle"
-          v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
-          icon="i-ph-quotes"
-          slate
-          faded
-          sm
-          @click="$emit('toggleEditor')"
-        />
-        <NextButton
-          v-if="showAudioPlayStopButton"
-          v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
-          :icon="audioRecorderPlayStopIcon"
-          slate
-          faded
-          sm
-          :label="recordingAudioDurationText"
-          @click="toggleAudioRecorderPlayPause"
-        />
-      </template>
       <NextButton
-        v-if="allowSignature && showMessageSignatureButton"
+        v-if="showAudioRecorderButton"
+        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ICON')"
+        :icon="!isRecordingAudio ? 'i-ph-microphone' : 'i-ph-microphone-slash'"
+        slate
+        faded
+        sm
+        @click="toggleAudioRecorder"
+      />
+      <NextButton
+        v-if="showEditorToggle"
+        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
+        icon="i-ph-quotes"
+        slate
+        faded
+        sm
+        @click="$emit('toggleEditor')"
+      />
+      <NextButton
+        v-if="showAudioPlayStopButton"
+        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
+        :icon="audioRecorderPlayStopIcon"
+        slate
+        faded
+        sm
+        :label="recordingAudioDurationText"
+        @click="toggleAudioRecorderPlayPause"
+      />
+      <NextButton
+        v-if="showMessageSignatureButton"
         v-tooltip.top-end="signatureToggleTooltip"
         icon="i-ph-signature"
         slate
@@ -354,15 +342,11 @@ export default {
         @click="$emit('selectWhatsappTemplate')"
       />
       <VideoCallButton
-        v-if="
-          allowVideoCall &&
-          (isAWebWidgetInbox || isAPIInbox) &&
-          !isOnPrivateNote
-        "
+        v-if="(isAWebWidgetInbox || isAPIInbox) && !isOnPrivateNote"
         :conversation-id="conversationId"
       />
       <AIAssistanceButton
-        v-if="allowAiAssist && !isFetchingAppIntegrations"
+        v-if="!isFetchingAppIntegrations"
         :conversation-id="conversationId"
         :is-private-note="isOnPrivateNote"
         :message="message"

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

@@ -15,10 +15,6 @@ export default {
       type: String,
       default: REPLY_EDITOR_MODES.REPLY,
     },
-    disablePopout: {
-      type: Boolean,
-      default: false,
-    },
     isMessageLengthReachingThreshold: {
       type: Boolean,
       default: () => false,
@@ -89,7 +85,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex justify-between h-[3.25rem] gap-2 ms-3">
+  <div class="flex justify-between h-[3.25rem] gap-2 ltr:pl-3 rtl:pr-3">
     <EditorModeToggle
       :mode="mode"
       class="mt-3"
@@ -103,7 +99,6 @@ export default {
       </div>
     </div>
     <NextButton
-      v-if="!disablePopout"
       ghost
       class="ltr:rounded-bl-md rtl:rounded-br-md ltr:rounded-br-none rtl:rounded-bl-none ltr:rounded-tl-none rtl:rounded-tr-none text-n-slate-11 ltr:rounded-tr-[11px] rtl:rounded-tl-[11px]"
       icon="i-lucide-maximize-2"

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

@@ -78,7 +78,6 @@ export default {
     'markAsRead',
     'assignPriority',
     'updateConversationStatus',
-    'deleteConversation',
   ],
   data() {
     return {
@@ -238,10 +237,6 @@ export default {
       this.$emit('assignPriority', priority, this.chat.id);
       this.closeContextMenu();
     },
-    async deleteConversation() {
-      this.$emit('deleteConversation', this.chat.id);
-      this.closeContextMenu();
-    },
   },
 };
 </script>
@@ -368,7 +363,6 @@ export default {
         @mark-as-unread="markAsUnread"
         @mark-as-read="markAsRead"
         @assign-priority="assignPriority"
-        @delete-conversation="deleteConversation"
       />
     </ContextMenu>
   </div>

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

@@ -107,10 +107,10 @@ const isLinearFeatureEnabled = computed(() =>
 <template>
   <div
     ref="conversationHeader"
-    class="flex flex-col gap-3 items-center justify-between flex-1 w-full min-w-0 xl:flex-row px-3 py-2 border-b bg-n-background border-n-weak h-24 xl:h-12"
+    class="flex flex-col items-center justify-center flex-1 w-full min-w-0 xl:flex-row px-3 py-2 border-b bg-n-background border-n-weak h-24 xl:h-12"
   >
     <div
-      class="flex items-center justify-start w-full xl:w-auto max-w-full min-w-0 xl:flex-1"
+      class="flex items-center justify-start w-full xl:w-auto max-w-full min-w-0"
     >
       <BackButton
         v-if="showBackButton"
@@ -122,12 +122,11 @@ const isLinearFeatureEnabled = computed(() =>
         :username="currentContact.name"
         :status="currentContact.availability_status"
         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"
+        class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2 w-fit"
       >
-        <div class="flex flex-row items-center max-w-full gap-1 p-0 m-0">
+        <div class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit">
           <span
             class="text-sm font-medium truncate leading-tight text-n-slate-12"
           >
@@ -137,7 +136,7 @@ const isLinearFeatureEnabled = computed(() =>
             v-if="!isHMACVerified"
             v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
             size="14"
-            class="text-n-amber-10 my-0 mx-0 min-w-[14px] flex-shrink-0"
+            class="text-n-amber-10 my-0 mx-0 min-w-[14px]"
             icon="warning"
           />
         </div>
@@ -153,20 +152,20 @@ const isLinearFeatureEnabled = computed(() =>
       </div>
     </div>
     <div
-      class="flex flex-row items-center justify-start xl:justify-end flex-shrink-0 gap-2 w-full xl:w-auto header-actions-wrap"
+      class="flex flex-row items-center justify-start xl:justify-end flex-grow gap-2 w-full xl:w-auto mt-3 header-actions-wrap xl:mt-0"
     >
       <SLACardLabel
         v-if="hasSlaPolicyId"
         :chat="chat"
         show-extended-info
         :parent-width="width"
-        class="hidden md:flex"
+        class="hidden lg:flex"
       />
       <Linear
         v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
         :conversation-id="currentChat.id"
         :parent-width="width"
-        class="hidden md:flex"
+        class="hidden lg:flex"
       />
       <MoreActions :conversation-id="currentChat.id" />
     </div>

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

@@ -1,23 +1,43 @@
 <script setup>
 import { computed } from 'vue';
+import CopilotContainer from '../../copilot/CopilotContainer.vue';
 import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { FEATURE_FLAGS } from '../../../featureFlags';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 
-defineProps({
+const props = defineProps({
   currentChat: {
     required: true,
     type: Object,
   },
 });
 
+const channelType = computed(() => props.currentChat?.meta?.channel || '');
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
+const showCopilotTab = computed(() =>
+  isFeatureEnabledonAccount.value(currentAccountId.value, FEATURE_FLAGS.CAPTAIN)
+);
+
 const { uiSettings } = useUISettings();
 
 const activeTab = computed(() => {
-  const { is_contact_sidebar_open: isContactSidebarOpen } = uiSettings.value;
+  const {
+    is_contact_sidebar_open: isContactSidebarOpen,
+    is_copilot_panel_open: isCopilotPanelOpen,
+  } = uiSettings.value;
 
   if (isContactSidebarOpen) {
     return 0;
   }
+  if (isCopilotPanelOpen) {
+    return 1;
+  }
   return null;
 });
 </script>
@@ -32,6 +52,13 @@ const activeTab = computed(() => {
         :conversation-id="currentChat.id"
         :inbox-id="currentChat.inbox_id"
       />
+      <CopilotContainer
+        v-show="activeTab === 1 && showCopilotTab"
+        :key="currentChat.id"
+        :conversation-inbox-type="channelType"
+        :conversation-id="currentChat.id"
+        class="flex-1"
+      />
     </div>
   </div>
 </template>

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

@@ -1240,12 +1240,6 @@ export default {
       :message="message"
       :portal-slug="connectedPortalSlug"
       :new-conversation-modal-active="newConversationModalActive"
-      allow-signature
-      allow-emoji
-      allow-ai-assist
-      allow-video-call
-      allow-audio-recorder
-      allow-file-upload
       @select-whatsapp-template="openWhatsappTemplateModal"
       @toggle-editor="toggleRichContentEditor"
       @replace-text="replaceText"

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

@@ -209,7 +209,7 @@ onMounted(() => {
           </div>
 
           <div
-            class="flex-1 mx-2 px-2 truncate text-sm font-medium text-center text-n-slate-12 hidden sm:block"
+            class="flex-1 mx-2 px-2 truncate text-sm font-medium text-center text-n-slate-12"
           >
             <span v-dompurify-html="fileNameFromDataUrl" class="truncate" />
           </div>

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

@@ -134,7 +134,7 @@ onUnmounted(() => {
     <SLAPopoverCard
       v-if="showSlaPopoverCard"
       :sla-missed-events="slaEvents"
-      class="start-0 xl:start-auto xl:end-0 top-7 hidden group-hover:flex"
+      class="rtl:left-0 ltr:right-0 top-7 hidden group-hover:flex"
     />
   </div>
 </template>

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

@@ -8,7 +8,6 @@ import MenuItem from './menuItem.vue';
 import MenuItemWithSubmenu from './menuItemWithSubmenu.vue';
 import wootConstants from 'dashboard/constants/globals';
 import AgentLoadingPlaceholder from './agentLoadingPlaceholder.vue';
-import { useAdmin } from 'dashboard/composables/useAdmin';
 
 export default {
   components: {
@@ -46,14 +45,7 @@ export default {
     'assignAgent',
     'assignTeam',
     'assignLabel',
-    'deleteConversation',
   ],
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
   data() {
     return {
       STATUS_TYPE: wootConstants.STATUS_TYPE,
@@ -129,11 +121,6 @@ export default {
         icon: 'people-team-add',
         label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.ASSIGN_TEAM'),
       },
-      deleteOption: {
-        key: 'delete',
-        icon: 'delete',
-        label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.DELETE'),
-      },
     };
   },
   computed: {
@@ -191,9 +178,6 @@ export default {
     assignPriority(priority) {
       this.$emit('assignPriority', priority);
     },
-    deleteConversation() {
-      this.$emit('deleteConversation', this.chatId);
-    },
     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.
@@ -293,13 +277,5 @@ export default {
         @click.stop="$emit('assignTeam', team)"
       />
     </MenuItemWithSubmenu>
-    <template v-if="isAdmin">
-      <hr class="m-1 rounded border-b border-n-weak dark:border-n-weak" />
-      <MenuItem
-        :option="deleteOption"
-        variant="icon"
-        @click.stop="deleteConversation"
-      />
-    </template>
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/linear/index.vue

@@ -142,7 +142,7 @@ onMounted(() => {
       v-if="linkedIssue"
       :issue="linkedIssue.issue"
       :link-id="linkedIssue.id"
-      class="absolute start-0 xl:start-auto xl:end-0 top-9 invisible group-hover:visible"
+      class="absolute rtl:left-0 ltr:right-0 top-9 invisible group-hover:visible"
       @unlink-issue="unlinkIssue"
     />
     <woot-modal

app/javascript/dashboard/composables/store.js

@@ -2,12 +2,6 @@ import { computed, unref } from 'vue';
 import { getCurrentInstance } from 'vue';
 
 export const useStore = () => {
-  // eslint-disable-next-line no-underscore-dangle
-  if (window.__CHATWOOT_STORE__) {
-    // eslint-disable-next-line no-underscore-dangle
-    return window.__CHATWOOT_STORE__;
-  }
-
   const vm = getCurrentInstance();
   if (!vm) throw new Error('must be called in setup');
   return vm.proxy.$store;

app/javascript/dashboard/composables/useAccount.js

@@ -45,10 +45,9 @@ export function useAccount() {
     };
   };
 
-  const updateAccount = async (data, options) => {
+  const updateAccount = async data => {
     await store.dispatch('accounts/update', {
       ...data,
-      options,
     });
   };
 

app/javascript/dashboard/constants/editor.js

@@ -33,14 +33,6 @@ export const ARTICLE_EDITOR_MENU_OPTIONS = [
   'code',
 ];
 
-export const WIDGET_BUILDER_EDITOR_MENU_OPTIONS = [
-  'strong',
-  'em',
-  'link',
-  'undo',
-  'redo',
-];
-
 export const MESSAGE_EDITOR_IMAGE_RESIZES = [
   {
     name: 'Small',

app/javascript/dashboard/helper/actionCable.js

@@ -10,10 +10,7 @@ const { isImpersonating } = useImpersonation();
 class ActionCableConnector extends BaseActionCableConnector {
   constructor(app, pubsubToken) {
     const { websocketURL = '' } = window.chatwootConfig || {};
-
-    // eslint-disable-next-line no-underscore-dangle
-    const wsURL = websocketURL || window.__WEBSOCKET_URL__ || '';
-    super(app, pubsubToken, wsURL);
+    super(app, pubsubToken, websocketURL);
     this.CancelTyping = [];
     this.events = {
       'message.created': this.onMessageCreated,
@@ -51,9 +48,7 @@ class ActionCableConnector extends BaseActionCableConnector {
   };
 
   isAValidEvent = data => {
-    // eslint-disable-next-line no-underscore-dangle
-    const currentAccountId = this.app.$store.getters.getCurrentAccountId;
-    return currentAccountId === data.account_id;
+    return this.app.$store.getters.getCurrentAccountId === data.account_id;
   };
 
   onMessageUpdated = data => {
@@ -103,10 +98,7 @@ class ActionCableConnector extends BaseActionCableConnector {
       conversation: { last_activity_at: lastActivityAt },
       conversation_id: conversationId,
     } = data;
-    // eslint-disable-next-line no-underscore-dangle
-    if (!window.__WOOT_ISOLATED_SHELL__) {
-      DashboardAudioNotificationHelper.onNewMessage(data);
-    }
+    DashboardAudioNotificationHelper.onNewMessage(data);
     this.app.$store.dispatch('addMessage', data);
     this.app.$store.dispatch('updateConversationLastActivity', {
       lastActivityAt,

app/javascript/dashboard/helper/auditlogHelper.js

@@ -36,7 +36,6 @@ const translationKeys = {
   'teammember:create': `AUDIT_LOGS.TEAM_MEMBER.ADD`,
   'teammember:destroy': `AUDIT_LOGS.TEAM_MEMBER.REMOVE`,
   'account:update': `AUDIT_LOGS.ACCOUNT.EDIT`,
-  'conversation:destroy': `AUDIT_LOGS.CONVERSATION.DELETE`,
 };
 
 function extractAttrChange(attrChange) {
@@ -169,11 +168,6 @@ export function generateTranslationPayload(auditLogItem, agentList) {
   const auditableType = auditLogItem.auditable_type.toLowerCase();
   const action = auditLogItem.action.toLowerCase();
 
-  if (auditableType === 'conversation' && action === 'destroy') {
-    translationPayload.id =
-      auditLogItem.audited_changes?.display_id || auditLogItem.auditable_id;
-  }
-
   if (auditableType === 'accountuser') {
     translationPayload = handleAccountUser(
       auditLogItem,

app/javascript/dashboard/i18n/locale/en/auditLogs.json

@@ -69,9 +69,6 @@
     },
     "ACCOUNT": {
       "EDIT": "{agentName} updated the account configuration (#{id})"
-    },
-    "CONVERSATION": {
-      "DELETE": "{agentName} deleted conversation #{id}"
     }
   }
 }

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

@@ -286,7 +286,6 @@
     "HEADER": {
       "TITLE": "Contacts",
       "SEARCH_TITLE": "Search contacts",
-      "ACTIVE_TITLE": "Active contacts",
       "SEARCH_PLACEHOLDER": "Search...",
       "MESSAGE_BUTTON": "Message",
       "SEND_MESSAGE": "Send message",
@@ -561,8 +560,7 @@
       "SUBTITLE": "Start adding new contacts by clicking on the button below",
       "BUTTON_LABEL": "Add contact",
       "SEARCH_EMPTY_STATE_TITLE": "No contacts matches your search 🔍",
-      "LIST_EMPTY_STATE_TITLE": "No contacts available in this view 📋",
-      "ACTIVE_EMPTY_STATE_TITLE": "No contacts are active at the moment 🌙"
+      "LIST_EMPTY_STATE_TITLE": "No contacts available in this view 📋"
     }
   },
 

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

@@ -118,11 +118,6 @@
         "FAILED": "Couldn't change priority. Please try again."
       }
     },
-    "DELETE_CONVERSATION": {
-      "TITLE": "Delete conversation #{conversationId}",
-      "DESCRIPTION": "Are you sure you want to delete this conversation?",
-      "CONFIRM": "Delete"
-    },
     "CARD_CONTEXT_MENU": {
       "PENDING": "Mark as pending",
       "RESOLVED": "Mark as resolved",
@@ -139,7 +134,6 @@
       "ASSIGN_LABEL": "Assign label",
       "AGENTS_LOADING": "Loading agents...",
       "ASSIGN_TEAM": "Assign team",
-      "DELETE": "Delete conversation",
       "API": {
         "AGENT_ASSIGNMENT": {
           "SUCCESFUL": "Conversation id {conversationId} assigned to \"{agentName}\"",
@@ -214,8 +208,6 @@
     "ASSIGN_LABEL_SUCCESFUL": "Label assigned successfully",
     "ASSIGN_LABEL_FAILED": "Label assignment failed",
     "CHANGE_TEAM": "Conversation team changed",
-    "SUCCESS_DELETE_CONVERSATION": "Conversation deleted successfully",
-    "FAIL_DELETE_CONVERSATION": "Couldn't delete conversation! Try again",
     "FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE} MB attachment limit",
     "MESSAGE_ERROR": "Unable to send this message, please try again later",
     "SENT_BY": "Sent by:",

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

@@ -46,31 +46,7 @@
       },
       "AUTO_RESOLVE": {
         "TITLE": "Auto-resolve conversations",
-        "NOTE": "This configuration would allow you to automatically resolve the conversation after a certain period of inactivity.",
-        "DURATION": {
-          "LABEL": "Inactivity duration",
-          "HELP": "Time period of inactivity after which conversation is auto-resolved",
-          "PLACEHOLDER": "30",
-          "ERROR": "Auto resolve duration should be between 10 minutes and 999 days",
-          "API": {
-            "SUCCESS": "Auto resolve settings updated successfully",
-            "ERROR": "Failed to update auto resolve settings"
-          }
-        },
-        "MESSAGE": {
-          "LABEL": "Custom auto-resolution message",
-          "PLACEHOLDER": "Conversation was marked resolved by system due to 15 days of inactivity",
-          "HELP": "Message sent to the customer after conversation is auto-resolved"
-        },
-        "PREFERENCES": "Preferences",
-        "LABEL": {
-          "LABEL": "Add label after auto-resolution",
-          "PLACEHOLDER": "Select a label"
-        },
-        "IGNORE_WAITING": {
-          "LABEL": "Skip conversations waiting for agent’s reply"
-        },
-        "UPDATE_BUTTON": "Save Changes"
+        "NOTE": "This configuration would allow you to automatically resolve the conversation after a certain period. Set the duration and customize the message to the user below."
       },
       "NAME": {
         "LABEL": "Account name",
@@ -94,15 +70,7 @@
       },
       "AUTO_RESOLVE_IGNORE_WAITING": {
         "LABEL": "Exclude unattended conversations",
-        "HELP": "When enabled, the system will skip resolving conversations that are still waiting for an agent's reply."
-      },
-      "AUDIO_TRANSCRIPTION": {
-        "TITLE": "Transcribe Audio Messages",
-        "NOTE": "Automatically transcribe audio messages in conversations. Generate a text transcript whenever an audio message is sent or received, and display it alongside the message.",
-        "API": {
-          "SUCCESS": "Audio transcription setting updated successfully",
-          "ERROR": "Failed to update audio transcription setting"
-        }
+        "HELP": "When enabled, the system will skip resolving conversations that are still waiting for an agent’s reply."
       },
       "AUTO_RESOLVE_DURATION": {
         "LABEL": "Inactivity duration for resolution",

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

@@ -328,9 +328,6 @@
     "HEADER_KNOW_MORE": "Know more",
     "COPILOT": {
       "TITLE": "Copilot",
-      "TRY_THESE_PROMPTS": "Try these prompts",
-      "PANEL_TITLE": "Get started with Copilot",
-      "KICK_OFF_MESSAGE": "Need a quick summary, want to check past conversations, or draft a better reply? Copilot’s here to speed things up.",
       "SEND_MESSAGE": "Send message...",
       "EMPTY_MESSAGE": "There was an error generating the response. Please try again.",
       "LOADER": "Captain is thinking",
@@ -351,14 +348,6 @@
         "RATE": {
           "LABEL": "Rate this conversation",
           "CONTENT": "Review the conversation to see how well it meets the customer's needs. Share a rating out of 5 based on tone, clarity, and effectiveness."
-        },
-        "HIGH_PRIORITY": {
-          "LABEL": "High priority conversations",
-          "CONTENT": "Give me a summary of all high priority open conversations. Include the conversation ID, customer name (if available), last message content, and assigned agent. Group by status if relevant."
-        },
-        "LIST_CONTACTS": {
-          "LABEL": "List contacts",
-          "CONTENT": "Show me the list of top 10 contacts. Include name, email or phone number (if available), last seen time, tags (if any)."
         }
       }
     },
@@ -392,7 +381,6 @@
     },
     "ASSISTANTS": {
       "HEADER": "Assistants",
-      "NO_ASSISTANTS_AVAILABLE": "There are no assistants available in your account.",
       "ADD_NEW": "Create a new assistant",
       "DELETE": {
         "TITLE": "Are you sure to delete the assistant?",

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -286,7 +286,6 @@
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",
-    "ACTIVE": "Active",
     "CAPTAIN": "Captain",
     "CAPTAIN_ASSISTANTS": "Assistants",
     "CAPTAIN_DOCUMENTS": "Documents",

app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { computed } from 'vue';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 const props = defineProps({
   config: {
@@ -9,8 +8,6 @@ const props = defineProps({
   },
 });
 
-const { formatMessage } = useMessageFormatter();
-
 const isDefaultScreen = computed(() => {
   return (
     props.config.isDefaultScreen &&
@@ -56,13 +53,12 @@ const isDefaultScreen = computed(() => {
         </div>
       </div>
       <div v-if="isDefaultScreen" class="overflow-auto max-h-60">
-        <h2 class="mb-2 text-2xl break-words text-n-slate-12">
+        <h2 class="mb-2 text-2xl break-words text-slate-900 dark:text-white">
           {{ config.welcomeHeading }}
         </h2>
-        <p
-          v-dompurify-html="formatMessage(config.welcomeTagline)"
-          class="text-sm break-words text-n-slate-11 [&_a]:!text-n-slate-11 [&_a]:underline"
-        />
+        <p class="text-sm break-words text-slate-600 dark:text-slate-100">
+          {{ config.welcomeTagline }}
+        </p>
       </div>
     </div>
   </div>

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -25,8 +25,6 @@ const Sidebar = defineAsyncComponent(
   () => import('../../components/layout/Sidebar.vue')
 );
 import { emitter } from 'shared/helpers/mitt';
-import CopilotLauncher from 'dashboard/components-next/copilot/CopilotLauncher.vue';
-import CopilotContainer from 'dashboard/components/copilot/CopilotContainer.vue';
 
 export default {
   components: {
@@ -39,8 +37,6 @@ export default {
     AddLabelModal,
     NotificationPanel,
     UpgradePage,
-    CopilotLauncher,
-    CopilotContainer,
   },
   setup() {
     const upgradePageRef = ref(null);
@@ -223,9 +219,6 @@ export default {
       <template v-if="!showUpgradePage">
         <router-view />
         <CommandBar />
-        <CopilotLauncher />
-        <CopilotContainer />
-
         <NotificationPanel
           v-if="isNotificationPanel"
           @close="closeNotificationPanel"

app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue

@@ -16,7 +16,7 @@ onMounted(() => {
 
 <template>
   <div
-    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background px-6"
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
   >
     <router-view v-slot="{ Component }">
       <keep-alive v-if="keepAlive">

app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue

@@ -67,11 +67,9 @@ const hasContacts = computed(() => contacts.value.length > 0);
 const isContactIndexView = computed(
   () => route.name === 'contacts_dashboard_index' && pageNumber.value === 1
 );
-const isActiveView = computed(() => route.name === 'contacts_dashboard_active');
 const hasAppliedFilters = computed(() => {
   return appliedFilters.value.length > 0;
 });
-
 const showEmptyStateLayout = computed(() => {
   return (
     !searchQuery.value &&
@@ -91,20 +89,11 @@ const showEmptyText = computed(() => {
 
 const headerTitle = computed(() => {
   if (searchQuery.value) return t('CONTACTS_LAYOUT.HEADER.SEARCH_TITLE');
-  if (isActiveView.value) return t('CONTACTS_LAYOUT.HEADER.ACTIVE_TITLE');
   if (activeSegmentId.value) return activeSegment.value?.name;
   if (activeLabel.value) return `#${activeLabel.value}`;
   return t('CONTACTS_LAYOUT.HEADER.TITLE');
 });
 
-const emptyStateMessage = computed(() => {
-  if (isActiveView.value)
-    return t('CONTACTS_LAYOUT.EMPTY_STATE.ACTIVE_EMPTY_STATE_TITLE');
-  if (!searchQuery.value || hasAppliedFilters.value)
-    return t('CONTACTS_LAYOUT.EMPTY_STATE.LIST_EMPTY_STATE_TITLE');
-  return t('CONTACTS_LAYOUT.EMPTY_STATE.SEARCH_EMPTY_STATE_TITLE');
-});
-
 const updatePageParam = (page, search = '') => {
   const query = {
     ...route.query,
@@ -143,15 +132,6 @@ const fetchSavedOrAppliedFilteredContact = async (payload, page = 1) => {
   updatePageParam(page);
 };
 
-const fetchActiveContacts = async (page = 1) => {
-  await store.dispatch('contacts/clearContactFilters');
-  await store.dispatch('contacts/active', {
-    page,
-    sortAttr: buildSortAttr(),
-  });
-  updatePageParam(page);
-};
-
 const searchContacts = debounce(async (value, page = 1) => {
   await store.dispatch('contacts/clearContactFilters');
   searchValue.value = value;
@@ -178,11 +158,6 @@ const fetchContactsBasedOnContext = async page => {
   }
   // Reset the search value when we change the view
   searchValue.value = '';
-  // If we're on the active route, fetch active contacts
-  if (isActiveView.value) {
-    await fetchActiveContacts(page);
-    return;
-  }
   // If there are applied filters or active segment with query
   if (
     (hasAppliedFilters.value || activeSegment.value?.query) &&
@@ -209,11 +184,6 @@ const handleSort = async ({ sort, order }) => {
     return;
   }
 
-  if (isActiveView.value) {
-    await fetchActiveContacts();
-    return;
-  }
-
   await (activeSegmentId.value || hasAppliedFilters.value
     ? fetchSavedOrAppliedFilteredContact(
         activeSegmentId.value
@@ -240,7 +210,7 @@ watch(
 );
 
 watch(
-  [activeLabel, activeSegment, isActiveView],
+  [activeLabel, activeSegment],
   () => {
     fetchContactsBasedOnContext(pageNumber.value);
   },
@@ -252,13 +222,6 @@ watch(searchQuery, value => {
   searchValue.value = value || '';
   // Reset the view if there is search query when we click on the sidebar group
   if (value === undefined) {
-    if (
-      isActiveView.value ||
-      activeLabel.value ||
-      activeSegment.value ||
-      hasAppliedFilters.value
-    )
-      return;
     fetchContacts();
   }
 });
@@ -269,10 +232,6 @@ onMounted(async () => {
       await searchContacts(searchQuery.value, pageNumber.value);
       return;
     }
-    if (isActiveView.value) {
-      await fetchActiveContacts(pageNumber.value);
-      return;
-    }
     await fetchContacts(pageNumber.value);
   } else if (activeSegment.value && activeSegmentId.value) {
     await fetchSavedOrAppliedFilteredContact(
@@ -327,7 +286,11 @@ onMounted(async () => {
           class="flex items-center justify-center py-10"
         >
           <span class="text-base text-n-slate-11">
-            {{ emptyStateMessage }}
+            {{
+              searchQuery || !hasAppliedFilters
+                ? t('CONTACTS_LAYOUT.EMPTY_STATE.SEARCH_EMPTY_STATE_TITLE')
+                : t('CONTACTS_LAYOUT.EMPTY_STATE.LIST_EMPTY_STATE_TITLE')
+            }}
           </span>
         </div>
 

app/javascript/dashboard/routes/dashboard/contacts/routes.js

@@ -32,12 +32,6 @@ export const routes = [
         component: ContactsIndex,
         meta: commonMeta,
       },
-      {
-        path: 'active',
-        name: 'contacts_dashboard_active',
-        component: ContactsIndex,
-        meta: commonMeta,
-      },
     ],
   },
   {

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -97,8 +97,11 @@ export default {
         return false;
       }
 
-      const { is_contact_sidebar_open: isContactSidebarOpen } = this.uiSettings;
-      return isContactSidebarOpen;
+      const {
+        is_contact_sidebar_open: isContactSidebarOpen,
+        is_copilot_panel_open: isCopilotPanelOpen,
+      } = this.uiSettings;
+      return isContactSidebarOpen || isCopilotPanelOpen;
     },
     showPopOverSearch() {
       return !this.isFeatureEnabledonAccount(
@@ -205,7 +208,7 @@ export default {
 </script>
 
 <template>
-  <section class="flex w-full h-full min-w-0">
+  <section class="flex w-full h-full">
     <ChatList
       :show-conversation-list="showConversationList"
       :conversation-inbox="inboxId"

app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue

@@ -183,6 +183,7 @@ export default {
     </div>
     <div v-else class="flex flex-col w-full h-full">
       <InboxItemHeader
+        class="flex-1"
         :total-length="totalNotificationCount"
         :current-index="activeNotificationIndex"
         :active-notification="activeNotification"

app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue

@@ -109,7 +109,7 @@ export default {
 
 <template>
   <div
-    class="flex items-center justify-between w-full gap-2 border-b ltr:pl-4 rtl:pl-2 h-12 ltr:pr-2 rtl:pr-4 rtl:border-r border-n-weak"
+    class="flex items-center justify-between w-full gap-2 py-2 border-b ltr:pl-4 rtl:pl-2 h-14 ltr:pr-2 rtl:pr-4 rtl:border-r border-n-weak"
   >
     <div class="flex items-center gap-4">
       <BackButton

app/javascript/dashboard/routes/dashboard/settings/account/Index.vue

@@ -16,7 +16,6 @@ import AccountId from './components/AccountId.vue';
 import BuildInfo from './components/BuildInfo.vue';
 import AccountDelete from './components/AccountDelete.vue';
 import AutoResolve from './components/AutoResolve.vue';
-import AudioTranscription from './components/AudioTranscription.vue';
 import SectionLayout from './components/SectionLayout.vue';
 
 export default {
@@ -27,7 +26,6 @@ export default {
     BuildInfo,
     AccountDelete,
     AutoResolve,
-    AudioTranscription,
     SectionLayout,
     WithLabel,
     NextInput,
@@ -237,7 +235,6 @@ export default {
       <woot-loading-state v-if="uiFlags.isFetchingItem" />
     </div>
     <AutoResolve v-if="showAutoResolutionConfig" />
-    <AudioTranscription v-if="isOnChatwootCloud" />
     <AccountId />
     <div v-if="!uiFlags.isFetchingItem && isOnChatwootCloud">
       <AccountDelete />

app/javascript/dashboard/routes/dashboard/settings/account/components/AudioTranscription.vue

@@ -1,51 +0,0 @@
-<script setup>
-import { ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useAccount } from 'dashboard/composables/useAccount';
-import { useAlert } from 'dashboard/composables';
-import SectionLayout from './SectionLayout.vue';
-import Switch from 'next/switch/Switch.vue';
-
-const { t } = useI18n();
-const isEnabled = ref(false);
-
-const { currentAccount, updateAccount } = useAccount();
-
-watch(
-  currentAccount,
-  () => {
-    const { audio_transcriptions } = currentAccount.value?.settings || {};
-    isEnabled.value = !!audio_transcriptions;
-  },
-  { deep: true, immediate: true }
-);
-
-const updateAccountSettings = async settings => {
-  try {
-    await updateAccount(settings);
-    useAlert(t('GENERAL_SETTINGS.FORM.AUDIO_TRANSCRIPTION.API.SUCCESS'));
-  } catch (error) {
-    useAlert(t('GENERAL_SETTINGS.FORM.AUDIO_TRANSCRIPTION.API.ERROR'));
-  }
-};
-
-const toggleAudioTranscription = async () => {
-  return updateAccountSettings({
-    audio_transcriptions: isEnabled.value,
-  });
-};
-</script>
-
-<template>
-  <SectionLayout
-    :title="t('GENERAL_SETTINGS.FORM.AUDIO_TRANSCRIPTION.TITLE')"
-    :description="t('GENERAL_SETTINGS.FORM.AUDIO_TRANSCRIPTION.NOTE')"
-    with-border
-  >
-    <template #headerActions>
-      <div class="flex justify-end">
-        <Switch v-model="isEnabled" @change="toggleAudioTranscription" />
-      </div>
-    </template>
-  </SectionLayout>
-</template>

app/javascript/dashboard/routes/dashboard/settings/account/components/AutoResolve.vue

@@ -1,78 +1,35 @@
 <script setup>
-import { h, ref, watch, computed } from 'vue';
-import { useMapGetter } from 'dashboard/composables/store';
+import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useAlert } from 'dashboard/composables';
 import SectionLayout from './SectionLayout.vue';
 import WithLabel from 'v3/components/Form/WithLabel.vue';
+import DurationInput from 'next/input/DurationInput.vue';
 import TextArea from 'next/textarea/TextArea.vue';
 import Switch from 'next/switch/Switch.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
-import DurationInput from 'next/input/DurationInput.vue';
-import SingleSelect from 'dashboard/components-next/filter/inputs/SingleSelect.vue';
-import { DURATION_UNITS } from 'dashboard/components-next/input/constants';
 
 const { t } = useI18n();
 const duration = ref(0);
-const unit = ref(DURATION_UNITS.MINUTES);
 const message = ref('');
-const labelToApply = ref({});
 const ignoreWaiting = ref(false);
 const isEnabled = ref(false);
-const isSubmitting = ref(false);
 
 const { currentAccount, updateAccount } = useAccount();
 
-const labels = useMapGetter('labels/getLabels');
-
-const labelOptions = computed(() =>
-  labels.value?.length
-    ? labels.value.map(label => ({
-        id: label.title,
-        name: label.title,
-        icon: h('span', {
-          class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
-          style: { backgroundColor: label.color },
-        }),
-      }))
-    : []
-);
-
-const selectedLabelName = computed(() => {
-  return labelToApply.value?.name ?? null;
-});
-
 watch(
-  [currentAccount, labelOptions],
+  currentAccount,
   () => {
     const {
       auto_resolve_after,
       auto_resolve_message,
       auto_resolve_ignore_waiting,
-      auto_resolve_label,
     } = currentAccount.value?.settings || {};
 
     duration.value = auto_resolve_after;
     message.value = auto_resolve_message;
     ignoreWaiting.value = auto_resolve_ignore_waiting;
-    // find the correct label option from the list
-    // the single select component expects the full label object
-    // in our case, the label id and name are both the same
-    labelToApply.value = labelOptions.value.find(
-      option => option.name === auto_resolve_label
-    );
-
-    // Set unit based on duration and its divisibility
-    if (duration.value) {
-      if (duration.value % (24 * 60) === 0) {
-        unit.value = DURATION_UNITS.DAYS;
-      } else if (duration.value % 60 === 0) {
-        unit.value = DURATION_UNITS.HOURS;
-      } else {
-        unit.value = DURATION_UNITS.MINUTES;
-      }
-    }
 
     if (duration.value) {
       isEnabled.value = true;
@@ -83,19 +40,16 @@ watch(
 
 const updateAccountSettings = async settings => {
   try {
-    isSubmitting.value = true;
-    await updateAccount(settings, { silent: true });
-    useAlert(t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.DURATION.API.SUCCESS'));
+    await updateAccount(settings);
+    useAlert(t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.API.SUCCESS'));
   } catch (error) {
-    useAlert(t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.DURATION.API.ERROR'));
-  } finally {
-    isSubmitting.value = false;
+    useAlert(t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.API.ERROR'));
   }
 };
 
 const handleSubmit = async () => {
   if (duration.value < 10) {
-    useAlert(t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.DURATION.ERROR'));
+    useAlert(t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.ERROR'));
     return Promise.resolve();
   }
 
@@ -103,7 +57,6 @@ const handleSubmit = async () => {
     auto_resolve_after: duration.value,
     auto_resolve_message: message.value,
     auto_resolve_ignore_waiting: ignoreWaiting.value,
-    auto_resolve_label: selectedLabelName.value,
   });
 };
 
@@ -115,7 +68,6 @@ const handleDisable = async () => {
     auto_resolve_after: null,
     auto_resolve_message: '',
     auto_resolve_ignore_waiting: false,
-    auto_resolve_label: null,
   });
 };
 
@@ -128,7 +80,6 @@ const toggleAutoResolve = async () => {
   <SectionLayout
     :title="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.TITLE')"
     :description="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.NOTE')"
-    :hide-content="!isEnabled"
     with-border
   >
     <template #headerActions>
@@ -139,65 +90,50 @@ const toggleAutoResolve = async () => {
 
     <form class="grid gap-5" @submit.prevent="handleSubmit">
       <WithLabel
-        :label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.DURATION.LABEL')"
-        :help-message="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.DURATION.HELP')"
+        :label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.LABEL')"
+        :help-message="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.HELP')"
       >
         <div class="gap-2 w-full grid grid-cols-[3fr_1fr]">
           <!-- allow 10 mins to 999 days -->
           <DurationInput
             v-model="duration"
-            v-model:unit="unit"
             min="0"
-            max="1438560"
+            max="1439856"
             class="w-full"
           />
         </div>
       </WithLabel>
       <WithLabel
-        :label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.MESSAGE.LABEL')"
-        :help-message="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.MESSAGE.HELP')"
+        :label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.MESSAGE_LABEL')"
+        :help-message="
+          t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.MESSAGE_HELP')
+        "
       >
         <TextArea
           v-model="message"
           class="w-full"
           :placeholder="
-            t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.MESSAGE.PLACEHOLDER')
+            t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.MESSAGE_PLACEHOLDER')
           "
         />
       </WithLabel>
-      <WithLabel :label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.PREFERENCES')">
-        <div
-          class="rounded-xl border border-n-weak bg-n-solid-1 w-full text-sm text-n-slate-12 divide-y divide-n-weak"
-        >
-          <div class="p-3 h-12 flex items-center justify-between">
-            <span>
-              {{ t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.IGNORE_WAITING.LABEL') }}
-            </span>
-            <Switch v-model="ignoreWaiting" />
-          </div>
-          <div class="p-3 h-12 flex items-center justify-between">
-            <span>
-              {{ t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.LABEL.LABEL') }}
-            </span>
-            <SingleSelect
-              v-model="labelToApply"
-              :options="labelOptions"
-              :placeholder="
-                $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.LABEL.PLACEHOLDER')
-              "
-              placeholder-icon="i-lucide-chevron-down"
-              placeholder-trailing-icon
-              variant="faded"
-            />
-          </div>
-        </div>
+      <WithLabel
+        :label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_IGNORE_WAITING.LABEL')"
+      >
+        <template #rightOfLabel>
+          <Switch v-model="ignoreWaiting" />
+        </template>
+        <p class="text-sm ml-px text-n-slate-10 max-w-lg">
+          {{ t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_IGNORE_WAITING.HELP') }}
+        </p>
       </WithLabel>
       <div class="flex gap-2">
         <NextButton
           blue
           type="submit"
-          :is-loading="isSubmitting"
-          :label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.UPDATE_BUTTON')"
+          :label="
+            t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.UPDATE_BUTTON')
+          "
         />
       </div>
     </form>

app/javascript/dashboard/routes/dashboard/settings/account/components/SectionLayout.vue

@@ -1,19 +1,24 @@
 <script setup>
 defineProps({
-  title: { type: String, required: true },
-  description: { type: String, required: true },
-  withBorder: { type: Boolean, default: false },
-  hideContent: { type: Boolean, default: false },
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  withBorder: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
 <template>
   <section
-    class="grid grid-cols-1 pt-8 gap-5 [interpolate-size:allow-keywords]"
-    :class="{
-      'border-t border-n-weak': withBorder,
-      'pb-8': !hideContent,
-    }"
+    class="grid grid-cols-1 py-8 gap-8"
+    :class="{ 'border-t border-n-weak': withBorder }"
   >
     <header class="grid grid-cols-4">
       <div class="col-span-3">
@@ -28,10 +33,7 @@ defineProps({
         <slot name="headerActions" />
       </div>
     </header>
-    <div
-      class="transition-[height] duration-300 ease-in-out text-n-slate-12"
-      :class="{ 'overflow-hidden h-0': hideContent, 'h-auto': !hideContent }"
-    >
+    <div class="text-n-slate-12">
       <slot />
     </div>
   </section>

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -23,8 +23,6 @@ import { FEATURE_FLAGS } from '../../../../featureFlags';
 import SenderNameExamplePreview from './components/SenderNameExamplePreview.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
-import { WIDGET_BUILDER_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
-import Editor from 'dashboard/components-next/Editor/Editor.vue';
 
 export default {
   components: {
@@ -45,7 +43,6 @@ export default {
     NextButton,
     InstagramReauthorize,
     DuplicateInboxBanner,
-    Editor,
   },
   mixins: [inboxMixin],
   setup() {
@@ -73,7 +70,6 @@ export default {
       selectedTabIndex: 0,
       selectedPortalSlug: '',
       showBusinessNameInput: false,
-      welcomeTaglineEditorMenuOptions: WIDGET_BUILDER_EDITOR_MENU_OPTIONS,
     };
   },
   computed: {
@@ -484,10 +480,10 @@ export default {
             "
           />
 
-          <Editor
+          <woot-input
             v-if="isAWebWidgetInbox"
             v-model="channelWelcomeTagline"
-            class="mb-4"
+            class="pb-4"
             :label="
               $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
             "
@@ -496,8 +492,6 @@ export default {
                 'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
               )
             "
-            :max-length="255"
-            :enabled-menu-options="welcomeTaglineEditorMenuOptions"
           />
 
           <label v-if="isAWebWidgetInbox" class="pb-4">

app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue

@@ -7,16 +7,13 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
-import { WIDGET_BUILDER_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
 import NextButton from 'dashboard/components-next/button/Button.vue';
-import Editor from 'dashboard/components-next/Editor/Editor.vue';
 
 export default {
   components: {
     Widget,
     InputRadioGroup,
     NextButton,
-    Editor,
   },
   props: {
     inbox: {
@@ -74,7 +71,6 @@ export default {
           checked: false,
         },
       ],
-      welcomeTaglineEditorMenuOptions: WIDGET_BUILDER_EDITOR_MENU_OPTIONS,
     };
   },
   computed: {
@@ -314,7 +310,7 @@ export default {
                 )
               "
             />
-            <Editor
+            <woot-input
               v-model="welcomeTagline"
               :label="
                 $t(
@@ -326,9 +322,6 @@ export default {
                   'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_TAGLINE.PLACE_HOLDER'
                 )
               "
-              :max-length="255"
-              :enabled-menu-options="welcomeTaglineEditorMenuOptions"
-              class="mb-4"
             />
             <label>
               {{

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue

@@ -1,17 +1,21 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import ForwardToOption from './emailChannels/ForwardToOption.vue';
 import Microsoft from './emailChannels/Microsoft.vue';
 import Google from './emailChannels/Google.vue';
 import ChannelSelector from 'dashboard/components/ChannelSelector.vue';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 
+import { useAlert } from 'dashboard/composables';
 import { useStoreGetters } from 'dashboard/composables/store';
+
+import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
 const provider = ref('');
 
 const getters = useStoreGetters();
+const route = useRoute();
 const { t } = useI18n();
 
 const globalConfig = getters['globalConfig/get'];
@@ -45,6 +49,15 @@ const emailProviderList = computed(() => {
   });
 });
 
+const checkForOAuthError = () => {
+  const { error } = route.query;
+  if (error) {
+    useAlert(decodeURIComponent(error));
+  }
+};
+
+onMounted(checkForOAuthError);
+
 function onClick(emailProvider) {
   if (emailProvider.isEnabled) {
     provider.value = emailProvider.key;

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue

@@ -5,15 +5,12 @@ import router from '../../../../index';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
-import { WIDGET_BUILDER_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
-import Editor from 'dashboard/components-next/Editor/Editor.vue';
 
 export default {
   components: {
     PageHeader,
     GreetingsEditor,
     NextButton,
-    Editor,
   },
   data() {
     return {
@@ -24,7 +21,6 @@ export default {
       channelWelcomeTagline: '',
       greetingEnabled: false,
       greetingMessage: '',
-      welcomeTaglineEditorMenuOptions: WIDGET_BUILDER_EDITOR_MENU_OPTIONS,
     };
   },
   computed: {
@@ -138,21 +134,22 @@ export default {
           />
         </label>
       </div>
-      <Editor
-        v-model="channelWelcomeTagline"
-        :label="
-          $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
-        "
-        :placeholder="
-          $t(
-            'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
-          )
-        "
-        :max-length="255"
-        :enabled-menu-options="welcomeTaglineEditorMenuOptions"
-        class="mb-4"
-      />
-
+      <div class="w-full">
+        <label>
+          {{
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
+          }}
+          <input
+            v-model="channelWelcomeTagline"
+            type="text"
+            :placeholder="
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
+              )
+            "
+          />
+        </label>
+      </div>
       <label class="w-full">
         {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL') }}
         <select v-model="greetingEnabled">

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue

@@ -12,7 +12,6 @@ defineOptions({
     provider="google"
     :title="$t('INBOX_MGMT.ADD.GOOGLE.TITLE')"
     :description="$t('INBOX_MGMT.ADD.GOOGLE.DESCRIPTION')"
-    :input-placeholder="$t('INBOX_MGMT.ADD.GOOGLE.EMAIL_PLACEHOLDER')"
     :submit-button-text="$t('INBOX_MGMT.ADD.GOOGLE.SIGN_IN')"
     :error-message="$t('INBOX_MGMT.ADD.GOOGLE.ERROR_MESSAGE')"
   />

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue

@@ -12,7 +12,6 @@ defineOptions({
     provider="microsoft"
     :title="$t('INBOX_MGMT.ADD.MICROSOFT.TITLE')"
     :description="$t('INBOX_MGMT.ADD.MICROSOFT.DESCRIPTION')"
-    :input-placeholder="$t('INBOX_MGMT.ADD.MICROSOFT.EMAIL_PLACEHOLDER')"
     :submit-button-text="$t('INBOX_MGMT.ADD.MICROSOFT.SIGN_IN')"
     :error-message="$t('INBOX_MGMT.ADD.MICROSOFT.ERROR_MESSAGE')"
   />

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue

@@ -30,14 +30,9 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  inputPlaceholder: {
-    type: String,
-    required: true,
-  },
 });
 
 const isRequestingAuthorization = ref(false);
-const email = ref('');
 
 const client = computed(() => {
   if (props.provider === 'microsoft') {
@@ -50,9 +45,7 @@ const client = computed(() => {
 async function requestAuthorization() {
   try {
     isRequestingAuthorization.value = true;
-    const response = await client.value.generateAuthorization({
-      email: email.value,
-    });
+    const response = await client.value.generateAuthorization();
     const {
       data: { url },
     } = response;
@@ -75,11 +68,6 @@ async function requestAuthorization() {
       :header-content="description"
     />
     <form class="mt-6" @submit.prevent="requestAuthorization">
-      <woot-input
-        v-model="email"
-        type="email"
-        :placeholder="inputPlaceholder"
-      />
       <NextButton
         :is-loading="isRequestingAuthorization"
         type="submit"

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/google/Reauthorize.vue

@@ -1,35 +1,19 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import InboxReconnectionRequired from '../../components/InboxReconnectionRequired.vue';
 import googleClient from 'dashboard/api/channel/googleClient';
 
 import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
 
-const props = defineProps({
-  inbox: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
 const { t } = useI18n();
 
 const isRequestingAuthorization = ref(false);
 
-const inboxEmail = computed(() => {
-  if (props.inbox.imap_login && props.inbox.imap_enabled) {
-    return props.inbox.imap_login;
-  }
-  return props.inbox.email;
-});
-
 async function requestAuthorization() {
   try {
     isRequestingAuthorization.value = true;
-    const response = await googleClient.generateAuthorization({
-      email: inboxEmail.value,
-    });
+    const response = await googleClient.generateAuthorization();
 
     const {
       data: { url },

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue

@@ -6,13 +6,6 @@ import microsoftClient from 'dashboard/api/channel/microsoftClient';
 import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
 
-const props = defineProps({
-  inbox: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
 const { t } = useI18n();
 
 const isRequestingAuthorization = ref(false);
@@ -20,9 +13,7 @@ const isRequestingAuthorization = ref(false);
 async function requestAuthorization() {
   try {
     isRequestingAuthorization.value = true;
-    const response = await microsoftClient.generateAuthorization({
-      email: props.inbox.email,
-    });
+    const response = await microsoftClient.generateAuthorization();
 
     const {
       data: { url },

app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="reports--wrapper overflow-auto bg-n-background w-full px-6">
+  <div
+    class="reports--wrapper overflow-auto bg-n-background w-full px-8 xl:px-0"
+  >
     <div class="max-w-[60rem] mx-auto pb-12">
       <router-view />
     </div>

app/javascript/dashboard/store/captain/copilotMessages.js

@@ -6,9 +6,9 @@ export default createStore({
   API: CopilotMessagesAPI,
   getters: {
     getMessagesByThreadId: state => copilotThreadId => {
-      return state.records
-        .filter(record => record.copilot_thread?.id === Number(copilotThreadId))
-        .sort((a, b) => a.id - b.id);
+      return state.records.filter(
+        record => record.copilot_thread?.id === Number(copilotThreadId)
+      );
     },
   },
   actions: mutationTypes => ({

app/javascript/dashboard/store/modules/accounts.js

@@ -63,11 +63,8 @@ export const actions = {
       });
     }
   },
-  update: async ({ commit }, { options, ...updateObj }) => {
-    if (options?.silent !== true) {
-      commit(types.default.SET_ACCOUNT_UI_FLAG, { isUpdating: true });
-    }
-
+  update: async ({ commit }, updateObj) => {
+    commit(types.default.SET_ACCOUNT_UI_FLAG, { isUpdating: true });
     try {
       const response = await AccountAPI.update('', updateObj);
       commit(types.default.EDIT_ACCOUNT, response.data);

app/javascript/dashboard/store/modules/auth.js

@@ -53,9 +53,6 @@ export const getters = {
   },
 
   getCurrentAccountId(_, __, rootState) {
-    // eslint-disable-next-line no-underscore-dangle
-    if (window.__WOOT_ACCOUNT_ID__) return window.__WOOT_ACCOUNT_ID__;
-
     if (rootState.route.params && rootState.route.params.accountId) {
       return Number(rootState.route.params.accountId);
     }
@@ -117,7 +114,7 @@ export const actions = {
     }
   },
   async setUser({ commit, dispatch }) {
-    if (authAPI.hasAuthCookie() || authAPI.hasAuthToken()) {
+    if (authAPI.hasAuthCookie()) {
       await dispatch('validityCheck');
     } else {
       commit(types.CLEAR_USER);