+
@@ -100,10 +100,10 @@ const channelIcon = computed(() => {
{{ callInfo.location }}
@@ -112,7 +112,7 @@ const channelIcon = computed(() => {
{{ duration }}
@@ -132,7 +132,7 @@ const channelIcon = computed(() => {
slate
ghost
xs
- class="!rounded-full -my-1"
+ class="!rounded-full -my-1 -me-1 !text-n-call-widget-sub-text"
@click="$emit('dismiss')"
/>
@@ -149,13 +149,13 @@ const channelIcon = computed(() => {
{{ callInfo.contactName }}
{{ callInfo.phoneNumber }}
@@ -217,23 +217,23 @@ const channelIcon = computed(() => {
>
#{{ call.conversationId }}
{{ $t('CONVERSATION.VOICE_WIDGET.GO_TO_CONVERSATION') }}
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantSystemSettingsForm.vue b/app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantSystemSettingsForm.vue
index ee20fded5..c689065fb 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantSystemSettingsForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantSystemSettingsForm.vue
@@ -29,7 +29,6 @@ const initialState = {
handoffMessage: '',
resolutionMessage: '',
instructions: '',
- temperature: 1,
};
const state = reactive({ ...initialState });
@@ -57,7 +56,6 @@ const updateStateFromAssistant = assistant => {
state.handoffMessage = config.handoff_message;
state.resolutionMessage = config.resolution_message;
state.instructions = config.instructions;
- state.temperature = config.temperature || 1;
};
const handleSystemMessagesUpdate = async () => {
@@ -80,7 +78,6 @@ const handleSystemMessagesUpdate = async () => {
...props.assistant.config,
handoff_message: state.handoffMessage,
resolution_message: state.resolutionMessage,
- temperature: state.temperature || 1,
},
};
@@ -131,26 +128,6 @@ watch(
class="z-0"
/>
-
-
-
-
- {{ state.temperature }}
-
-
- {{ t('CAPTAIN.ASSISTANTS.FORM.TEMPERATURE.DESCRIPTION') }}
-
-
-
+
diff --git a/app/javascript/dashboard/modules/conversations/components/ReportCaptainMessageDialog.vue b/app/javascript/dashboard/modules/conversations/components/ReportCaptainMessageDialog.vue
new file mode 100644
index 000000000..4d36efe78
--- /dev/null
+++ b/app/javascript/dashboard/modules/conversations/components/ReportCaptainMessageDialog.vue
@@ -0,0 +1,119 @@
+
+
+
+
+
diff --git a/app/javascript/dashboard/modules/search/components/SearchHeader.vue b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
index 08d4c0c7a..1de642fbe 100644
--- a/app/javascript/dashboard/modules/search/components/SearchHeader.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
@@ -1,5 +1,5 @@
diff --git a/app/javascript/dashboard/modules/search/components/SearchInput.vue b/app/javascript/dashboard/modules/search/components/SearchInput.vue
index 3edd79fe0..de2db176f 100644
--- a/app/javascript/dashboard/modules/search/components/SearchInput.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchInput.vue
@@ -30,10 +30,13 @@ const debouncedEmit = debounce(
500
);
-const onInput = () => {
- debouncedEmit(searchQuery.value);
+const onInput = e => {
+ // Use the DOM value, not searchQuery.value: the defineModel ref updates a tick
+ // later, so reading it back here lags one character behind.
+ const value = e.target.value;
+ debouncedEmit(value);
- if (searchQuery.value.trim()) {
+ if (value.trim()) {
showRecentSearches.value = false;
} else if (isInputFocused.value) {
showRecentSearches.value = true;
diff --git a/app/javascript/dashboard/modules/search/components/SearchTabs.vue b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
index 86e40df57..1a0fea65c 100644
--- a/app/javascript/dashboard/modules/search/components/SearchTabs.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
@@ -1,8 +1,6 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('ONBOARDING_INBOX_SETUP.CHANNELS.HEADER') }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t(channel.labelKey) }}
+
+
+ {{ connectedName }}
+
+
+ {{ t('ONBOARDING_INBOX_SETUP.CHANNELS.CONNECTED') }}
+
+
+
+
+
+
+
+
+ {{ title }}
+
+
+ {{ description }}
+
+
{{ status }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('ONBOARDING_INBOX_SETUP.CHANNELS.MORE_CHANNELS_EMAIL') }}
+
+
+
+
+ {{ t('ONBOARDING_INBOX_SETUP.CHANNELS.MORE_CHANNELS_VOICE') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('ONBOARDING_INBOX_SETUP.CHANNELS_DIALOG.FACEBOOK_LOADING') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('ONBOARDING_INBOX_SETUP.CHANNELS_DIALOG.FACEBOOK_NO_PAGES') }}
+
+
+
+
+
+
+
+
+ {{ t('ONBOARDING_INBOX_SETUP.CHANNELS_DIALOG.FACEBOOK_ERROR') }}
+
+
+
+
+
+
+
+
-
- {{ continueLabel }}
-
+
+
+ {{ continueLabel }}
+
+
+ {{ skipLabel }}
+
+
-
diff --git a/app/javascript/dashboard/routes/dashboard/onboarding/constants.js b/app/javascript/dashboard/routes/dashboard/onboarding/shared/constants.js
similarity index 100%
rename from app/javascript/dashboard/routes/dashboard/onboarding/constants.js
rename to app/javascript/dashboard/routes/dashboard/onboarding/shared/constants.js
diff --git a/app/javascript/dashboard/routes/dashboard/onboarding/specs/account-details/useAccountEnrichment.spec.js b/app/javascript/dashboard/routes/dashboard/onboarding/specs/account-details/useAccountEnrichment.spec.js
new file mode 100644
index 000000000..a8d85010a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/onboarding/specs/account-details/useAccountEnrichment.spec.js
@@ -0,0 +1,186 @@
+import { defineComponent, h, ref } from 'vue';
+import { createStore } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { useRoute } from 'vue-router';
+import { useAccountEnrichment } from '../../account-details/useAccountEnrichment';
+
+vi.mock('vue-router');
+
+const ENABLED_LANGUAGES = [
+ { iso_639_1_code: 'en', name: 'English' },
+ { iso_639_1_code: 'fr', name: 'French' },
+];
+
+// Mounts the composable against a real store and the real useAccount/useConfig
+// (only useRoute and the underlying account getter / window config are faked),
+// so a change to how those resolve their data is exercised here too. `presets`
+// seeds form fields as if the user had already typed them.
+const mountComposable = ({
+ account = {},
+ enabledLanguages = ENABLED_LANGUAGES,
+ presets = {},
+} = {}) => {
+ window.chatwootConfig = { enabledLanguages };
+
+ const store = createStore({
+ modules: {
+ accounts: {
+ namespaced: true,
+ getters: { getAccount: () => () => account },
+ },
+ },
+ });
+
+ const fields = {
+ locale: ref(presets.locale || ''),
+ website: ref(presets.website || ''),
+ timezone: ref(presets.timezone || ''),
+ companySize: ref(presets.companySize || ''),
+ industry: ref(presets.industry || ''),
+ referralSource: ref(presets.referralSource || ''),
+ };
+
+ let api;
+ const Component = defineComponent({
+ setup() {
+ api = useAccountEnrichment(fields);
+ return () => h('div');
+ },
+ });
+ const wrapper = mount(Component, { global: { plugins: [store] } });
+ return { ...api, fields, wrapper };
+};
+
+beforeEach(() => {
+ useRoute.mockReturnValue({ params: { accountId: '1' } });
+});
+
+afterEach(() => {
+ delete window.chatwootConfig;
+});
+
+describe('useAccountEnrichment', () => {
+ describe('populateFormFields', () => {
+ it('fills empty fields from the enriched attributes on mount', () => {
+ const { fields } = mountComposable({
+ account: {
+ locale: 'en',
+ custom_attributes: {
+ website: 'https://acme.com',
+ timezone: 'America/New_York',
+ company_size: '11-50',
+ industry: 'Technology',
+ referral_source: 'google',
+ },
+ },
+ });
+
+ expect(fields.website.value).toBe('https://acme.com');
+ expect(fields.timezone.value).toBe('America/New_York');
+ expect(fields.companySize.value).toBe('11-50');
+ expect(fields.industry.value).toBe('Technology');
+ expect(fields.referralSource.value).toBe('google');
+ });
+
+ it('falls back to brand_info for website and industry', () => {
+ const { fields } = mountComposable({
+ account: {
+ custom_attributes: {
+ brand_info: {
+ domain: 'acme.com',
+ industries: [{ industry: 'Retail & E-commerce' }],
+ },
+ },
+ },
+ });
+
+ expect(fields.website.value).toBe('acme.com');
+ expect(fields.industry.value).toBe('Retail & E-commerce');
+ });
+
+ it('does not clobber fields the user already set', () => {
+ const { fields } = mountComposable({
+ presets: { website: 'mysite.com', industry: 'Finance' },
+ account: {
+ custom_attributes: {
+ website: 'https://enriched.com',
+ industry: 'Technology',
+ },
+ },
+ });
+
+ expect(fields.website.value).toBe('mysite.com');
+ expect(fields.industry.value).toBe('Finance');
+ });
+
+ it('detects the locale from the browser, else the account locale', () => {
+ // jsdom reports navigator.language as 'en-US' -> base 'en' is enabled.
+ const { fields } = mountComposable({ account: { locale: 'de' } });
+ expect(fields.locale.value).toBe('en');
+
+ // No enabled language matches the browser -> fall back to account locale.
+ const { fields: other } = mountComposable({
+ account: { locale: 'de' },
+ enabledLanguages: [{ iso_639_1_code: 'es', name: 'Spanish' }],
+ });
+ expect(other.locale.value).toBe('de');
+ });
+ });
+
+ describe('isEnriching', () => {
+ it('is true while the account is on the enrichment step', () => {
+ const { isEnriching } = mountComposable({
+ account: { custom_attributes: { onboarding_step: 'enrichment' } },
+ });
+ expect(isEnriching.value).toBe(true);
+ });
+
+ it('is false on any other step', () => {
+ const { isEnriching } = mountComposable({
+ account: { custom_attributes: { onboarding_step: 'account_details' } },
+ });
+ expect(isEnriching.value).toBe(false);
+ });
+
+ it('times out after 30s, flipping to false and populating', () => {
+ vi.useFakeTimers();
+ try {
+ const { isEnriching, fields } = mountComposable({
+ account: {
+ custom_attributes: {
+ onboarding_step: 'enrichment',
+ company_size: '51-200',
+ },
+ },
+ });
+ expect(isEnriching.value).toBe(true);
+
+ vi.advanceTimersByTime(30000);
+
+ expect(isEnriching.value).toBe(false);
+ expect(fields.companySize.value).toBe('51-200');
+ } finally {
+ vi.useRealTimers();
+ }
+ });
+ });
+
+ describe('getChangedFields', () => {
+ it('lists only enrichable fields edited after auto-fill', () => {
+ const { fields, getChangedFields } = mountComposable({
+ account: {
+ custom_attributes: {
+ website: 'https://acme.com',
+ company_size: '11-50',
+ industry: 'Technology',
+ },
+ },
+ });
+
+ expect(getChangedFields()).toEqual([]);
+
+ fields.industry.value = 'Finance';
+ expect(getChangedFields()).toEqual(['industry']);
+ });
+ });
+});
diff --git a/app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/HelpCenterCreationStatus.spec.js b/app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/HelpCenterCreationStatus.spec.js
new file mode 100644
index 000000000..68dca058a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/HelpCenterCreationStatus.spec.js
@@ -0,0 +1,123 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import HelpCenterCreationStatus from '../../inbox-setup/HelpCenterCreationStatus.vue';
+import OnboardingAPI from 'dashboard/api/onboarding';
+
+vi.mock('dashboard/api/onboarding', () => ({
+ default: {
+ getHelpCenterGeneration: vi.fn(),
+ },
+}));
+
+vi.mock('vue-i18n', () => ({
+ useI18n: () => ({
+ t: (key, params = {}) => {
+ if (key.endsWith('HELP_CENTER_CATEGORIES')) {
+ return `${params.count} categories`;
+ }
+ if (key.endsWith('HELP_CENTER_SUMMARY')) {
+ return `${params.count} articles across ${params.categories}`;
+ }
+ if (key.endsWith('HELP_CENTER_ARTICLES')) {
+ return `${params.count} articles`;
+ }
+ return key;
+ },
+ }),
+}));
+
+const mountStatus = () =>
+ mount(HelpCenterCreationStatus, {
+ global: {
+ stubs: {
+ CreationStatusRow: {
+ props: ['ready', 'title', 'description', 'status'],
+ template:
+ '
{{ status }}
',
+ },
+ },
+ },
+ });
+
+describe('HelpCenterCreationStatus', () => {
+ afterEach(() => {
+ vi.useRealTimers();
+ vi.clearAllMocks();
+ });
+
+ it('renders completed summary from the status endpoint', async () => {
+ OnboardingAPI.getHelpCenterGeneration.mockResolvedValue({
+ data: {
+ generation_id: 'generation-123',
+ state: { status: 'completed' },
+ articles_count: 3,
+ categories_count: 2,
+ },
+ });
+
+ const wrapper = mountStatus();
+ await flushPromises();
+
+ expect(wrapper.find('[data-test="row"]').attributes('data-ready')).toBe(
+ 'true'
+ );
+ expect(wrapper.find('[data-test="row"]').text()).toBe(
+ '3 articles across 2 categories'
+ );
+ });
+
+ it('hides the row when generation is skipped', async () => {
+ OnboardingAPI.getHelpCenterGeneration.mockResolvedValue({
+ data: {
+ generation_id: 'generation-123',
+ state: { status: 'skipped' },
+ },
+ });
+
+ const wrapper = mountStatus();
+ await flushPromises();
+
+ expect(wrapper.find('[data-test="row"]').exists()).toBe(false);
+ });
+
+ it('polls while generating and stops after completion', async () => {
+ vi.useFakeTimers();
+ OnboardingAPI.getHelpCenterGeneration
+ .mockResolvedValueOnce({
+ data: {
+ generation_id: 'generation-123',
+ state: { status: 'generating' },
+ articles_count: 1,
+ categories_count: 0,
+ },
+ })
+ .mockResolvedValueOnce({
+ data: {
+ generation_id: 'generation-123',
+ state: { status: 'completed' },
+ articles_count: 2,
+ categories_count: 1,
+ },
+ });
+
+ const wrapper = mountStatus();
+ await flushPromises();
+
+ expect(wrapper.find('[data-test="row"]').text()).toBe('1 articles');
+
+ vi.advanceTimersByTime(5000);
+ await flushPromises();
+
+ expect(OnboardingAPI.getHelpCenterGeneration).toHaveBeenCalledTimes(2);
+ expect(wrapper.find('[data-test="row"]').attributes('data-ready')).toBe(
+ 'true'
+ );
+ expect(wrapper.find('[data-test="row"]').text()).toBe(
+ '2 articles across 1 categories'
+ );
+
+ vi.advanceTimersByTime(5000);
+ await flushPromises();
+
+ expect(OnboardingAPI.getHelpCenterGeneration).toHaveBeenCalledTimes(2);
+ });
+});
diff --git a/app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/InboxChannelsDialog.spec.js b/app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/InboxChannelsDialog.spec.js
new file mode 100644
index 000000000..bf150f95d
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/InboxChannelsDialog.spec.js
@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import InboxChannelsDialog from '../../inbox-setup/InboxChannelsDialog.vue';
+
+vi.mock('vue-i18n', () => ({ useI18n: () => ({ t: key => key }) }));
+vi.mock('dashboard/composables/store', () => ({
+ useMapGetter: () => ({ value: {} }),
+}));
+vi.mock('../../inbox-setup/useChannelConnect', () => ({
+ useChannelConnect: () => ({
+ connectViaOAuth: vi.fn(),
+ connectWhatsapp: vi.fn(),
+ }),
+}));
+
+const mountDialog = () =>
+ mount(InboxChannelsDialog, {
+ props: { inboxes: [] },
+ global: {
+ stubs: {
+ Dialog: {
+ template: '
',
+ methods: { open() {}, close() {} },
+ },
+ InboxFacebookForm: { template: '
' },
+ InboxChannelForm: { template: '
' },
+ ChannelIcon: true,
+ Icon: true,
+ },
+ },
+ });
+
+describe('InboxChannelsDialog Facebook gating', () => {
+ afterEach(() => {
+ delete window.chatwootConfig;
+ });
+
+ it('opens the Facebook page picker when fbAppId is configured', async () => {
+ window.chatwootConfig = { fbAppId: 'fb-app' };
+ const wrapper = mountDialog();
+
+ wrapper.vm.open('facebook');
+ await nextTick();
+
+ expect(wrapper.find('[data-test="fb-form"]').exists()).toBe(true);
+ });
+
+ it('shows the grid (not the picker) when fbAppId is missing', async () => {
+ window.chatwootConfig = {};
+ const wrapper = mountDialog();
+
+ wrapper.vm.open('facebook');
+ await nextTick();
+
+ expect(wrapper.find('[data-test="fb-form"]').exists()).toBe(false);
+ // The channel grid renders its cards instead.
+ expect(wrapper.find('button').exists()).toBe(true);
+ });
+});
diff --git a/app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/InboxFacebookForm.spec.js b/app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/InboxFacebookForm.spec.js
new file mode 100644
index 000000000..888082f68
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/InboxFacebookForm.spec.js
@@ -0,0 +1,158 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { ref, nextTick } from 'vue';
+import InboxFacebookForm from '../../inbox-setup/InboxFacebookForm.vue';
+import { useFacebookPageConnect } from 'dashboard/composables/useFacebookPageConnect';
+
+vi.mock('vue-i18n', () => ({ useI18n: () => ({ t: key => key }) }));
+vi.mock('dashboard/composables', () => ({ useAlert: vi.fn() }));
+vi.mock('dashboard/store/utils/api', () => ({
+ parseAPIErrorResponse: vi.fn(),
+}));
+vi.mock('dashboard/composables/useFacebookPageConnect', () => ({
+ useFacebookPageConnect: vi.fn(),
+}));
+
+const { dispatch } = vi.hoisted(() => ({ dispatch: vi.fn() }));
+vi.mock('dashboard/composables/store', () => ({
+ useStore: () => ({ dispatch }),
+}));
+
+const NextButtonStub = {
+ props: ['label', 'disabled', 'isLoading'],
+ emits: ['click'],
+ template: `
`,
+};
+const ComboBoxStub = {
+ props: ['modelValue', 'options'],
+ emits: ['update:modelValue'],
+ template: '
',
+};
+
+const PAGES = [
+ { id: 'p1', name: 'Page One', access_token: 'pt1' },
+ { id: 'p2', name: 'Page Two', access_token: 'pt2', exists: true },
+];
+
+const LAUNCH = 'ONBOARDING_INBOX_SETUP.CHANNELS_DIALOG.FACEBOOK_LAUNCH';
+const CONNECT = 'ONBOARDING_INBOX_SETUP.CHANNELS_DIALOG.CONNECT';
+
+let loginAndFetchPages;
+let preloadSdk;
+
+const mountForm = () =>
+ mount(InboxFacebookForm, {
+ global: {
+ stubs: {
+ NextButton: NextButtonStub,
+ ComboBox: ComboBoxStub,
+ Spinner: true,
+ },
+ },
+ });
+
+const clickButton = (wrapper, label) =>
+ wrapper
+ .findAll('button')
+ .find(button => button.text() === label)
+ .trigger('click');
+
+beforeEach(() => {
+ vi.clearAllMocks();
+ preloadSdk = vi.fn();
+ loginAndFetchPages = vi.fn();
+ useFacebookPageConnect.mockReturnValue({
+ isAuthenticating: ref(false),
+ preloadSdk,
+ loginAndFetchPages,
+ });
+ dispatch.mockResolvedValue({ id: 1 });
+});
+
+describe('InboxFacebookForm', () => {
+ it('preloads the SDK on mount', () => {
+ mountForm();
+ expect(preloadSdk).toHaveBeenCalled();
+ });
+
+ it('lists only connectable pages and creates an inbox for the selected one', async () => {
+ loginAndFetchPages.mockResolvedValue({
+ userAccessToken: 'tok',
+ pages: PAGES,
+ });
+ const wrapper = mountForm();
+
+ await clickButton(wrapper, LAUNCH);
+ await flushPromises();
+ await nextTick();
+
+ // p2 is already connected (exists), so only p1 is offered.
+ const combobox = wrapper.findComponent(ComboBoxStub);
+ expect(combobox.props('options')).toEqual([
+ { value: 'p1', label: 'Page One' },
+ ]);
+
+ combobox.vm.$emit('update:modelValue', 'p1');
+ await nextTick();
+
+ await clickButton(wrapper, CONNECT);
+ await flushPromises();
+
+ expect(dispatch).toHaveBeenCalledWith('inboxes/createFBChannel', {
+ user_access_token: 'tok',
+ page_access_token: 'pt1',
+ page_id: 'p1',
+ inbox_name: 'Page One',
+ });
+ expect(wrapper.emitted('created')).toBeTruthy();
+ });
+
+ it('shows the empty state when every page is already connected', async () => {
+ loginAndFetchPages.mockResolvedValue({
+ userAccessToken: 'tok',
+ pages: [
+ { id: 'p2', name: 'Page Two', access_token: 'pt2', exists: true },
+ ],
+ });
+ const wrapper = mountForm();
+
+ await clickButton(wrapper, LAUNCH);
+ await flushPromises();
+ await nextTick();
+
+ expect(wrapper.text()).toContain(
+ 'ONBOARDING_INBOX_SETUP.CHANNELS_DIALOG.FACEBOOK_NO_PAGES'
+ );
+ expect(wrapper.find('[data-test="combobox"]').exists()).toBe(false);
+ });
+
+ it('shows an error when the connection fails', async () => {
+ loginAndFetchPages.mockRejectedValue(new Error('boom'));
+ const wrapper = mountForm();
+
+ await clickButton(wrapper, LAUNCH);
+ await flushPromises();
+ await nextTick();
+
+ expect(wrapper.text()).toContain(
+ 'ONBOARDING_INBOX_SETUP.CHANNELS_DIALOG.FACEBOOK_ERROR'
+ );
+ expect(dispatch).not.toHaveBeenCalled();
+ });
+
+ it('stays on the connect prompt without an error when cancelled', async () => {
+ loginAndFetchPages.mockResolvedValue(null);
+ const wrapper = mountForm();
+
+ await clickButton(wrapper, LAUNCH);
+ await flushPromises();
+ await nextTick();
+
+ expect(wrapper.text()).not.toContain(
+ 'ONBOARDING_INBOX_SETUP.CHANNELS_DIALOG.FACEBOOK_ERROR'
+ );
+ // Launch button is still available to retry.
+ expect(
+ wrapper.findAll('button').some(button => button.text() === LAUNCH)
+ ).toBe(true);
+ });
+});
diff --git a/app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/channelMatchers.spec.js b/app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/channelMatchers.spec.js
new file mode 100644
index 000000000..acde1159d
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/channelMatchers.spec.js
@@ -0,0 +1,62 @@
+import {
+ findConnectedInbox,
+ isChannelConnected,
+} from '../../inbox-setup/channelMatchers';
+
+const WHATSAPP = { id: 1, channel_type: 'Channel::Whatsapp' };
+const GMAIL = { id: 2, channel_type: 'Channel::Email', provider: 'google' };
+const OUTLOOK = {
+ id: 3,
+ channel_type: 'Channel::Email',
+ provider: 'microsoft',
+};
+
+describe('channelMatchers', () => {
+ describe('findConnectedInbox', () => {
+ it('returns the inbox sharing the channel type', () => {
+ expect(
+ findConnectedInbox([WHATSAPP], { channel_type: 'Channel::Whatsapp' })
+ ).toBe(WHATSAPP);
+ });
+
+ it('matches email inboxes on provider', () => {
+ expect(
+ findConnectedInbox([OUTLOOK, GMAIL], {
+ channel_type: 'Channel::Email',
+ provider: 'google',
+ })
+ ).toBe(GMAIL);
+ });
+
+ it('does not match a different email provider', () => {
+ expect(
+ findConnectedInbox([OUTLOOK], {
+ channel_type: 'Channel::Email',
+ provider: 'google',
+ })
+ ).toBeUndefined();
+ });
+
+ it('returns undefined when nothing matches', () => {
+ expect(
+ findConnectedInbox([WHATSAPP], { channel_type: 'Channel::Telegram' })
+ ).toBeUndefined();
+ });
+ });
+
+ describe('isChannelConnected', () => {
+ it('is true when a matching inbox exists', () => {
+ expect(
+ isChannelConnected([WHATSAPP], { channel_type: 'Channel::Whatsapp' })
+ ).toBe(true);
+ });
+
+ it('is false when no inbox matches', () => {
+ expect(isChannelConnected([WHATSAPP], GMAIL)).toBe(false);
+ });
+
+ it('is false for a channel without an inbox stub', () => {
+ expect(isChannelConnected([WHATSAPP], undefined)).toBe(false);
+ });
+ });
+});
diff --git a/app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/useDetectedChannels.spec.js b/app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/useDetectedChannels.spec.js
new file mode 100644
index 000000000..1134d4494
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/useDetectedChannels.spec.js
@@ -0,0 +1,300 @@
+import { defineComponent, h } from 'vue';
+import { createStore } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { useRoute } from 'vue-router';
+import { useDetectedChannels } from '../../inbox-setup/useDetectedChannels';
+
+vi.mock('vue-router');
+
+// Mounts the composable against a real store and the real useAccount (only
+// useRoute and the underlying getters are faked), so a change to how useAccount
+// resolves the current account is exercised here too. The real ./constants are
+// used, so assertions validate against the actual channel identity (label keys,
+// channel_type, social ordering) derived from CHANNEL_LIST.
+const mountComposable = ({ brandInfo, inboxes = [] } = {}) => {
+ const store = createStore({
+ modules: {
+ accounts: {
+ namespaced: true,
+ getters: {
+ getAccount: () => () => ({
+ id: 1,
+ custom_attributes: { brand_info: brandInfo },
+ }),
+ },
+ },
+ inboxes: {
+ namespaced: true,
+ getters: { getInboxes: () => inboxes },
+ },
+ },
+ });
+
+ let result;
+ const Component = defineComponent({
+ setup() {
+ result = useDetectedChannels();
+ return () => h('div');
+ },
+ });
+ mount(Component, { global: { plugins: [store] } });
+ return result;
+};
+
+beforeEach(() => {
+ useRoute.mockReturnValue({ params: { accountId: '1' } });
+ // Configure the installation OAuth credentials so detected channels aren't
+ // hidden by the config gate; individual tests clear this to assert hiding.
+ window.chatwootConfig = {
+ fbAppId: 'fb',
+ instagramAppId: 'ig',
+ tiktokAppId: 'tt',
+ whatsappAppId: 'wa',
+ whatsappConfigurationId: 'wa-config',
+ };
+});
+
+afterEach(() => {
+ delete window.chatwootConfig;
+});
+
+describe('useDetectedChannels', () => {
+ describe('displayedChannels', () => {
+ it('maps detected socials with a url to channel rows', () => {
+ const { displayedChannels } = mountComposable({
+ brandInfo: {
+ socials: [
+ { type: 'whatsapp', url: 'https://wa.me/1-415-555-2671' },
+ { type: 'instagram', url: 'https://instagram.com/acme' },
+ ],
+ },
+ });
+
+ expect(displayedChannels.value).toEqual([
+ {
+ type: 'whatsapp',
+ handle: '+14155552671',
+ labelKey: 'INBOX_MGMT.ADD.AUTH.CHANNEL.WHATSAPP.TITLE',
+ inbox: { channel_type: 'Channel::Whatsapp' },
+ },
+ {
+ type: 'instagram',
+ handle: '@acme',
+ labelKey: 'INBOX_MGMT.ADD.AUTH.CHANNEL.INSTAGRAM.TITLE',
+ inbox: { channel_type: 'Channel::Instagram' },
+ },
+ ]);
+ });
+
+ it('skips socials without a url or with an unknown type', () => {
+ const { displayedChannels } = mountComposable({
+ brandInfo: {
+ socials: [
+ { type: 'telegram' }, // no url
+ { type: 'mastodon', url: 'https://mastodon.social/@acme' }, // unknown
+ { type: 'tiktok', url: 'https://tiktok.com/@acme' },
+ ],
+ },
+ });
+
+ expect(displayedChannels.value.map(channel => channel.type)).toEqual([
+ 'tiktok',
+ ]);
+ });
+
+ it('uses the raw path for line and falls back to empty on a bad url', () => {
+ const { displayedChannels } = mountComposable({
+ brandInfo: {
+ socials: [
+ { type: 'line', url: 'https://line.me/acme' },
+ { type: 'facebook', url: 'not-a-url' },
+ ],
+ },
+ });
+
+ expect(displayedChannels.value).toEqual([
+ {
+ type: 'line',
+ handle: 'acme',
+ labelKey: 'INBOX_MGMT.ADD.AUTH.CHANNEL.LINE.TITLE',
+ inbox: { channel_type: 'Channel::Line' },
+ },
+ {
+ type: 'facebook',
+ handle: '',
+ labelKey: 'INBOX_MGMT.ADD.AUTH.CHANNEL.FACEBOOK.TITLE',
+ inbox: { channel_type: 'Channel::FacebookPage' },
+ },
+ ]);
+ });
+
+ it('omits the detected email channel while email is disabled for this phase', () => {
+ const { displayedChannels } = mountComposable({
+ brandInfo: {
+ email_provider: 'google',
+ email: 'support@acme.com',
+ socials: [{ type: 'whatsapp', url: 'https://wa.me/14155552671' }],
+ },
+ });
+
+ expect(displayedChannels.value.map(channel => channel.type)).toEqual([
+ 'whatsapp',
+ ]);
+ });
+
+ it('falls back to the default channel suggestions when nothing is detected', () => {
+ const { displayedChannels } = mountComposable({ brandInfo: undefined });
+
+ // The configured mainstream channels, with no detected handle.
+ expect(displayedChannels.value).toEqual([
+ {
+ type: 'whatsapp',
+ handle: '',
+ labelKey: 'INBOX_MGMT.ADD.AUTH.CHANNEL.WHATSAPP.TITLE',
+ inbox: { channel_type: 'Channel::Whatsapp' },
+ },
+ {
+ type: 'facebook',
+ handle: '',
+ labelKey: 'INBOX_MGMT.ADD.AUTH.CHANNEL.FACEBOOK.TITLE',
+ inbox: { channel_type: 'Channel::FacebookPage' },
+ },
+ {
+ type: 'instagram',
+ handle: '',
+ labelKey: 'INBOX_MGMT.ADD.AUTH.CHANNEL.INSTAGRAM.TITLE',
+ inbox: { channel_type: 'Channel::Instagram' },
+ },
+ ]);
+ });
+
+ it('gates the default suggestions by installation config, keeping the list non-empty', () => {
+ window.chatwootConfig = {}; // no OAuth credentials configured
+ const { displayedChannels } = mountComposable({ brandInfo: undefined });
+
+ // Only the credential-free defaults survive (Telegram, LINE).
+ expect(displayedChannels.value.map(channel => channel.type)).toEqual([
+ 'telegram',
+ 'line',
+ ]);
+ });
+
+ it('hides detected channels whose installation OAuth credentials are missing', () => {
+ window.chatwootConfig = {}; // nothing configured
+ const { displayedChannels } = mountComposable({
+ brandInfo: {
+ socials: [
+ { type: 'facebook', url: 'https://facebook.com/acme' },
+ { type: 'line', url: 'https://line.me/acme' },
+ ],
+ },
+ });
+
+ // Facebook needs fbAppId (absent → hidden); LINE needs no install credential.
+ expect(displayedChannels.value.map(channel => channel.type)).toEqual([
+ 'line',
+ ]);
+ });
+ });
+
+ describe('remainingChannels', () => {
+ it('returns the platforms not already shown as default rows', () => {
+ // Nothing detected → displayed falls back to the defaults (WhatsApp,
+ // Facebook, Instagram), so the footer previews the remaining platforms.
+ const { remainingChannels } = mountComposable({ brandInfo: {} });
+
+ expect(remainingChannels.value).toEqual([
+ {
+ type: 'line',
+ labelKey: 'INBOX_MGMT.ADD.AUTH.CHANNEL.LINE.TITLE',
+ inbox: { channel_type: 'Channel::Line' },
+ },
+ {
+ type: 'telegram',
+ labelKey: 'INBOX_MGMT.ADD.AUTH.CHANNEL.TELEGRAM.TITLE',
+ inbox: { channel_type: 'Channel::Telegram' },
+ },
+ {
+ type: 'tiktok',
+ labelKey: 'INBOX_MGMT.ADD.AUTH.CHANNEL.TIKTOK.TITLE',
+ inbox: { channel_type: 'Channel::Tiktok' },
+ },
+ ]);
+ });
+
+ it('excludes already-detected socials, preserving order', () => {
+ const { remainingChannels } = mountComposable({
+ brandInfo: {
+ socials: [{ type: 'whatsapp', url: 'https://wa.me/14155552671' }],
+ },
+ });
+
+ expect(remainingChannels.value.map(channel => channel.type)).toEqual([
+ 'facebook',
+ 'line',
+ 'instagram',
+ ]);
+ });
+
+ it('excludes channels whose installation OAuth credentials are missing', () => {
+ window.chatwootConfig = {}; // nothing configured
+ const { remainingChannels } = mountComposable({ brandInfo: {} });
+
+ // The only configured channels (Telegram, LINE) are shown as default rows,
+ // and every other platform is gated out — so nothing remains for the footer.
+ expect(remainingChannels.value).toEqual([]);
+ });
+ });
+
+ describe('connectedInbox', () => {
+ it('returns the real inbox sharing the channel type', () => {
+ const inbox = {
+ id: 1,
+ channel_type: 'Channel::Whatsapp',
+ name: 'WA Biz',
+ };
+ const { connectedInbox } = mountComposable({
+ brandInfo: {},
+ inboxes: [inbox],
+ });
+
+ expect(
+ connectedInbox({ inbox: { channel_type: 'Channel::Whatsapp' } })
+ ).toBe(inbox);
+ });
+
+ it('matches email inboxes on provider', () => {
+ const gmail = {
+ id: 1,
+ channel_type: 'Channel::Email',
+ provider: 'google',
+ };
+ const outlook = {
+ id: 2,
+ channel_type: 'Channel::Email',
+ provider: 'microsoft',
+ };
+ const { connectedInbox } = mountComposable({
+ brandInfo: {},
+ inboxes: [outlook, gmail],
+ });
+
+ expect(
+ connectedInbox({
+ inbox: { channel_type: 'Channel::Email', provider: 'google' },
+ })
+ ).toBe(gmail);
+ });
+
+ it('returns undefined when nothing matches', () => {
+ const { connectedInbox } = mountComposable({
+ brandInfo: {},
+ inboxes: [],
+ });
+
+ expect(
+ connectedInbox({ inbox: { channel_type: 'Channel::Telegram' } })
+ ).toBeUndefined();
+ });
+ });
+});
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/components/AutoResolve.vue b/app/javascript/dashboard/routes/dashboard/settings/account/components/AutoResolve.vue
index 034f40d35..54eafa59e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/components/AutoResolve.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/components/AutoResolve.vue
@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
import { useAccount } from 'dashboard/composables/useAccount';
import { useAlert } from 'dashboard/composables';
import WithLabel from 'v3/components/Form/WithLabel.vue';
-import TextArea from 'next/textarea/TextArea.vue';
+import Editor from 'next/Editor/Editor.vue';
import Switch from 'next/switch/Switch.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
import DurationInput from 'next/input/DurationInput.vue';
@@ -162,9 +162,13 @@ const toggleAutoResolve = async () => {
:label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.MESSAGE.LABEL')"
:help-message="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.MESSAGE.HELP')"
>
-