feat(chat): add load-more and search events to DuoChatThreads

What does this MR do?

Adds pagination support to DuoChatThreads (src/components/chat/components/duo_chat_threads/duo_chat_threads.vue).

GitLab's Duo Agentic Chat history tab is moving from loading every thread at once (first: 99999, clamped to 100 by GraphQL) to 20 threads per page. This component owns the scroll container, so the load-more trigger has to live inside the list. A trigger placed by the parent, below the list, would sit under the pinned "Inactive chats are deleted after 30 days." banner: always visible, loading every page right away.

Two new optional Boolean props, both default false. Nothing changes for existing consumers:

  • hasNextPage: renders a GlIntersectionObserver sentinel at the end of the thread list. When it scrolls into view, the component emits load-more.
  • loadingMore: shows a small GlLoadingIcon, labelled "Loading more chats", inside the sentinel, and suppresses load-more emits until it flips back to false.

Two new events:

  • load-more: no payload.
  • search: emits the trimmed, debounced search query string whenever it changes.

The sentinel is keyed by threads.length, so after a short page that leaves it in view, a fresh observer is created and appear fires again.

The sentinel is hidden while a search query is active. The built-in filter only covers threads already loaded, so an active search would otherwise chain through every page. Server-side search is left to the parent, which can now use the search event.

Spec additions in duo_chat_threads.spec.js cover: sentinel absent by default; present without a spinner when hasNextPage is set; load-more emitted on appear; spinner shown and no emit while loadingMore; sentinel hidden while searching; search emitted with the trimmed query. All 44 tests pass under Vue 2 and Vue 3.

The story template wires the new props and events. No new story was added, so there are no visual snapshot changes.

translations.js was regenerated with yarn translations:collect (the pre-commit hook does this). It adds the new DuoChat.loadingMoreChats key, and picks up several DuoChatMessage.tools.* keys that earlier merges missed. Reviewers can ignore those lines; they just bring the dictionary back in sync.

Related issue: gitlab#627320 (closed)

Screenshots or screen recordings

Integration merge requests

  • GitLab: gitlab!253207 (merged) (draft; it will bump @gitlab/duo-ui once this releases)
  • CustomersDot: not applicable
  • Status Page: not applicable

Does this MR meet the acceptance criteria?

The standard duo-ui acceptance checklist applies: conformance with guidelines, accessibility, and no visual regressions.

  • Unit tests added
  • Lint clean
  • Accessibility: the spinner has an accessible label
  • No new dependencies
Edited by Rafa Frederico

Merge request reports

Loading
Loading