fix: slim help center search results (#13761)

Fixes help center public article search so query responses stay compact
and locale-scoped. Whitespace-only queries are now treated as empty in
both the portal UI and the server-side search path, and search
suggestions stay aligned with the trimmed query.

Fixes: https://github.com/chatwoot/chatwoot/issues/10402
Closes: https://github.com/chatwoot/chatwoot/issues/10402

## Why

The public help center search endpoint reused the full article
serializer for query responses, which returned much more data than the
search suggestions UI needed. That made responses heavier than necessary
and also surfaced nested portal and category data that made the results
look cross-locale.

Whitespace-only searches could also still reach the backend search path,
and in Enterprise that meant embedding search could be invoked for a
blank query.

## What changed

- return a compact search-specific payload for article query responses
- keep the existing full article serializer for normal article listing
responses
- preserve current-locale search behavior for the portal search flow
- trim whitespace-only search terms on the client so they do not open
suggestions or trigger a request
- reuse the normalized query on the backend so whitespace-only requests
are treated as empty searches in both OSS and Enterprise paths
- pass the trimmed search term into suggestions so highlighting matches
the actual query being sent
- add request and frontend regression coverage for compact payloads,
locale scoping, and whitespace-only search behavior

## Validation

1. Open `/hc/:portal/:locale` in the public help center.
2. Enter only spaces in the search box and confirm suggestions do not
open.
3. Search for a real term and confirm suggestions appear.
4. Verify the results are limited to the active locale.
5. Click a suggestion and confirm it opens the correct article page.
6. Inspect the query response and confirm it returns the compact search
payload instead of the full article serializer.

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/portal/components/PublicArticleSearch.vue

@@ -26,8 +26,11 @@ export default {
     localeCode() {
       return window.portalConfig.localeCode;
     },
+    normalizedSearchTerm() {
+      return this.searchTerm.trim();
+    },
     shouldShowSearchBox() {
-      return this.searchTerm !== '' && this.showSearchBox;
+      return this.normalizedSearchTerm !== '' && this.showSearchBox;
     },
     searchTranslations() {
       const { searchTranslations = {} } = window.portalConfig;
@@ -52,6 +55,13 @@ export default {
         clearTimeout(this.typingTimer);
       }
 
+      if (this.normalizedSearchTerm === '') {
+        this.searchResults = [];
+        this.isLoading = false;
+        this.closeSearch();
+        return;
+      }
+
       this.openSearch();
       this.isLoading = true;
       this.typingTimer = setTimeout(() => {
@@ -74,16 +84,21 @@ export default {
       this.searchTerm = '';
     },
     async fetchArticlesByQuery() {
+      const query = this.normalizedSearchTerm;
+      if (!query) {
+        this.isLoading = false;
+        return;
+      }
+
       try {
         this.isLoading = true;
         this.searchResults = [];
         const { data } = await ArticlesAPI.searchArticles(
           this.portalSlug,
           this.localeCode,
-          this.searchTerm
+          query
         );
         this.searchResults = data.payload;
-        this.isLoading = true;
       } catch (error) {
         // Show something wrong message
       } finally {
@@ -110,7 +125,7 @@ export default {
       <SearchSuggestions
         :items="searchResults"
         :is-loading="isLoading"
-        :search-term="searchTerm"
+        :search-term="normalizedSearchTerm"
         :empty-placeholder="searchTranslations.emptyPlaceholder"
         :results-title="searchTranslations.resultsTitle"
         :loading-placeholder="searchTranslations.loadingPlaceholder"

app/javascript/portal/components/SearchSuggestions.vue

@@ -66,9 +66,6 @@ export default {
   },
 
   methods: {
-    generateArticleUrl(article) {
-      return `/hc/${article.portal.slug}/articles/${article.slug}`;
-    },
     prepareContent(content) {
       return this.highlightContent(
         content,
@@ -107,10 +104,7 @@ export default {
         @mouse-enter="onHover(index)"
         @mouse-leave="onHover(-1)"
       >
-        <a
-          class="flex flex-col gap-1 overflow-y-hidden"
-          :href="generateArticleUrl(article)"
-        >
+        <a class="flex flex-col gap-1 overflow-y-hidden" :href="article.link">
           <span
             v-dompurify-html="prepareContent(article.title)"
             class="flex-auto w-full overflow-hidden text-base font-semibold leading-6 truncate text-ellipsis whitespace-nowrap"

app/javascript/portal/specs/PublicArticleSearch.spec.js

@@ -0,0 +1,90 @@
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import PublicArticleSearch from '../components/PublicArticleSearch.vue';
+import ArticlesAPI from '../api/article';
+
+vi.mock('../api/article', () => ({
+  default: {
+    searchArticles: vi.fn(),
+  },
+}));
+
+describe('PublicArticleSearch', () => {
+  let originalPortalConfig;
+  const SearchSuggestionsStub = {
+    name: 'SearchSuggestions',
+    template: '<div />',
+    props: ['searchTerm'],
+  };
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    originalPortalConfig = window.portalConfig;
+    window.portalConfig = {
+      portalSlug: 'test-portal',
+      localeCode: 'en',
+      searchTranslations: {},
+    };
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.useRealTimers();
+    window.portalConfig = originalPortalConfig;
+  });
+
+  const buildWrapper = () =>
+    shallowMount(PublicArticleSearch, {
+      global: {
+        directives: {
+          onClickaway: () => {},
+        },
+        stubs: {
+          SearchSuggestions: SearchSuggestionsStub,
+          PublicSearchInput: true,
+        },
+      },
+    });
+
+  it('does not fetch or show suggestions for whitespace-only search terms', async () => {
+    const wrapper = buildWrapper();
+    wrapper.vm.searchResults = [{ id: 1 }];
+    wrapper.vm.showSearchBox = true;
+
+    wrapper.vm.onUpdateSearchTerm('   ');
+    await wrapper.vm.$nextTick();
+    vi.runAllTimers();
+    await flushPromises();
+
+    expect(ArticlesAPI.searchArticles).not.toHaveBeenCalled();
+    expect(wrapper.vm.searchResults).toEqual([]);
+    expect(wrapper.vm.shouldShowSearchBox).toBe(false);
+    expect(wrapper.vm.isLoading).toBe(false);
+  });
+
+  it('trims the search term before requesting articles', async () => {
+    ArticlesAPI.searchArticles.mockResolvedValue({ data: { payload: [] } });
+    const wrapper = buildWrapper();
+
+    wrapper.vm.onUpdateSearchTerm('  chatwoot  ');
+    vi.runAllTimers();
+    await flushPromises();
+
+    expect(ArticlesAPI.searchArticles).toHaveBeenCalledWith(
+      'test-portal',
+      'en',
+      'chatwoot'
+    );
+  });
+
+  it('passes the trimmed search term to suggestions for highlighting', async () => {
+    const wrapper = buildWrapper();
+
+    wrapper.vm.onUpdateSearchTerm('  chatwoot  ');
+    await wrapper.vm.$nextTick();
+
+    expect(
+      wrapper.findComponent(SearchSuggestionsStub).props('searchTerm')
+    ).toBe('chatwoot');
+  });
+});

app/javascript/portal/specs/SearchSuggestions.spec.js

@@ -0,0 +1,43 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+import SearchSuggestions from '../components/SearchSuggestions.vue';
+
+vi.mock('dashboard/composables/useKeyboardNavigableList', () => ({
+  useKeyboardNavigableList: vi.fn(() => ({})),
+}));
+
+vi.mock('shared/composables/useMessageFormatter', () => ({
+  useMessageFormatter: () => ({
+    highlightContent: content => content,
+  }),
+}));
+
+describe('SearchSuggestions', () => {
+  it('renders suggestion links from the backend-provided link field', () => {
+    const wrapper = mount(SearchSuggestions, {
+      props: {
+        items: [
+          {
+            id: 1,
+            title: 'Chatwoot Glossary',
+            content: 'Access Token',
+            link: '/hc/user-guide/articles/1677141565-chatwoot-glossary',
+          },
+        ],
+        isLoading: false,
+        searchTerm: 'chatwoot',
+      },
+      global: {
+        directives: {
+          dompurifyHtml: (element, binding) => {
+            element.innerHTML = binding.value;
+          },
+        },
+      },
+    });
+
+    expect(wrapper.find('a').attributes('href')).toBe(
+      '/hc/user-guide/articles/1677141565-chatwoot-glossary'
+    );
+  });
+});