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 aGlIntersectionObserversentinel at the end of the thread list. When it scrolls into view, the component emitsload-more.loadingMore: shows a smallGlLoadingIcon, labelled "Loading more chats", inside the sentinel, and suppressesload-moreemits until it flips back tofalse.
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-uionce 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