@acorex/components 22.0.0-next.10 → 22.0.0-next.13

package/fesm2022/acorex-components-conversation.mjs

@@ -3841,16 +3841,17 @@ class AXConversationService {
     }
     /**
      * Get available users for conversation creation
-     * @param query - Optional search query
-     * @returns List of users
+     * @param filters - Optional search filters (e.g. `query`)
+     * @param pagination - Pagination parameters
+     * @returns Paginated list of users
      */
-    async getUsers(query) {
+    async getUsers(filters, pagination = { page: 0, pageSize: 50 }) {
         try {
-            return await this.userApi.getUsers({ query });
+            return await this.userApi.getUsers(pagination, filters);
         }
         catch (error) {
-            this.errorHandler.handle(error, 'getUsers', { query });
-            return [];
+            this.errorHandler.handle(error, 'getUsers', { filters, pagination });
+            return { items: [], total: 0, hasMore: false, page: pagination.page };
         }
     }
     /**
@@ -7017,7 +7018,7 @@ class AXConversationInfoBarComponent {
                   [inputs]="getInlineComponentInputs()"
                 />
               } @else {
-                <ax-button class="action-button" (onClick)="onInlineActionClick(action.id)">
+                <ax-button class="action-button" (onClick)="onInlineActionClick(action.id)" look="ghost">
                   <ax-icon [icon]="registry.infoBarActions.getActionIcon(action, activeConversation()!)"></ax-icon>
                 </ax-button>
               }
@@ -7154,7 +7155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                   [inputs]="getInlineComponentInputs()"
                 />
               } @else {
-                <ax-button class="action-button" (onClick)="onInlineActionClick(action.id)">
+                <ax-button class="action-button" (onClick)="onInlineActionClick(action.id)" look="ghost">
                   <ax-icon [icon]="registry.infoBarActions.getActionIcon(action, activeConversation()!)"></ax-icon>
                 </ax-button>
               }
@@ -10284,17 +10285,20 @@ class AXConversationNewDialogComponent extends AXBasePageComponent {
         this.usersList = viewChild('usersList', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "usersList" }] : /* istanbul ignore next */ []));
         this.usersListDataSource = new AXDataSource({
-            pageSize: 100,
+            pageSize: 10,
             key: 'id',
             load: async (e) => {
-                if (this.availableUsers().length === 0) {
-                    const users = await this.conversationService.getUsers();
-                    this.availableUsers.set(users);
-                }
-                const filtered = this.filteredUsers();
+                const query = this.searchQuery().trim();
+                const filters = query ? { query } : undefined;
+                const page = e.take > 0 ? Math.floor(e.skip / e.take) : 0;
+                const result = await this.conversationService.getUsers(filters, {
+                    page,
+                    pageSize: e.take,
+                });
+                this.mergeUsersCache(result.items);
                 return {
-                    items: filtered.slice(e.skip, e.skip + e.take),
-                    total: filtered.length,
+                    items: result.items,
+                    total: result.total ?? result.items.length,
                 };
             },
             byKey: (key) => Promise.resolve(this.availableUsers().find((u) => u.id === key) ?? null),
@@ -10329,14 +10333,16 @@ class AXConversationNewDialogComponent extends AXBasePageComponent {
             return null;
         return item.data ?? null;
     }
-    filteredUsers() {
-        const q = this.searchQuery().toLowerCase().trim();
-        if (!q)
-            return this.availableUsers();
-        return this.availableUsers().filter((u) => {
-            const name = u.name.toLowerCase();
-            const desc = (u.description ?? '').toLowerCase();
-            return name.includes(q) || desc.includes(q);
+    mergeUsersCache(users) {
+        if (users.length === 0) {
+            return;
+        }
+        this.availableUsers.update((existing) => {
+            const byId = new Map(existing.map((user) => [user.id, user]));
+            for (const user of users) {
+                byId.set(user.id, user);
+            }
+            return Array.from(byId.values());
         });
     }
     async onCreateConversation() {
@@ -10386,6 +10392,14 @@ class AXConversationNewDialogComponent extends AXBasePageComponent {
         @if (showUserPickerStep()) {
           <div class="form-field form-field--grow">
             <div class="users-list-wrap">
+              <div class="users-list-search">
+                <ax-search-box
+                  [value]="searchQuery()"
+                  (valueChange)="onSearchChange($event)"
+                  [disabled]="creating()"
+                  [placeholder]="'@acorex:chat.placeholders.search-users' | translate | async"
+                ></ax-search-box>
+              </div>
               <ax-list
                 #usersList
                 class="users-list"
@@ -10395,23 +10409,12 @@ class AXConversationNewDialogComponent extends AXBasePageComponent {
                 [disabled]="creating()"
                 [valueField]="'id'"
                 [textField]="'name'"
-                [itemHeight]="52"
+                [itemHeight]="60"
                 [ngModel]="selectedUserIds()"
                 (ngModelChange)="onSelectedUsersChange($event ?? [])"
                 [emptyTemplate]="usersListEmptyTpl()"
                 [itemTemplate]="userItemTpl"
-              >
-                <ax-header class="users-list-header">
-                  <div class="users-list-header-inner">
-                    <ax-search-box
-                      [value]="searchQuery()"
-                      (valueChange)="onSearchChange($event)"
-                      [disabled]="creating()"
-                      [placeholder]="'@acorex:chat.placeholders.search-users' | translate | async"
-                    ></ax-search-box>
-                  </div>
-                </ax-header>
-              </ax-list>
+              ></ax-list>
             </div>
           </div>
         }
@@ -10503,7 +10506,7 @@ class AXConversationNewDialogComponent extends AXBasePageComponent {
         </div>
       }
     </ng-template>
-  `, isInline: true, styles: [":host{display:block}.new-conversation-panel{display:flex;flex-direction:column;width:100%;overflow:hidden}.new-conversation-dialog-content{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:.75rem}.form-field--grow{flex:1;min-height:0;display:flex;flex-direction:column}.group-details-step{flex:1;min-height:0;padding:.5rem .75rem;display:flex;flex-direction:column;gap:.75rem}.form-field{display:flex;flex-direction:column;gap:.35rem}.field-label{font-size:.875rem;font-weight:500;color:var(--ax-text-secondary, #6b7280)}.title-input{height:2.25rem;border-radius:.5rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-lighter-surface));padding:0 .7rem;color:rgb(var(--ax-sys-color-on-surface));font:inherit}.title-input:focus{outline:2px solid rgba(var(--ax-sys-color-primary-500),.25);outline-offset:0}.users-list-wrap{height:min(50vh,36rem);overflow:hidden}.users-list{display:block;height:100%}.users-list-header{display:block;position:sticky;top:0;z-index:1;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.users-list-header-inner{padding:.5rem .75rem}.user-item-content{display:flex;align-items:center;gap:.75rem;height:100%;padding:.5rem .75rem;min-width:0}.user-item-text{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1;gap:.125rem}.user-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface))}.user-description-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:400;opacity:.72;color:rgb(var(--ax-sys-color-on-surface))}.users-list-empty{padding:1rem;text-align:center;font-size:.85rem;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXConversationAvatarPickerComponent, selector: "ax-conversation-avatar-picker", inputs: ["showClearButton", "avatarUrl"], outputs: ["avatarUrlChange", "onFileSelected"] }, { kind: "component", type: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }] }); }
+  `, isInline: true, styles: [":host{display:block}.new-conversation-panel{display:flex;flex-direction:column;width:100%;overflow:hidden}.new-conversation-dialog-content{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:.75rem}.form-field--grow{flex:1;min-height:0;display:flex;flex-direction:column}.group-details-step{flex:1;min-height:0;padding:.5rem .75rem;display:flex;flex-direction:column;gap:.75rem}.form-field{display:flex;flex-direction:column;gap:.35rem}.field-label{font-size:.875rem;font-weight:500;color:var(--ax-text-secondary, #6b7280)}.title-input{height:2.25rem;border-radius:.5rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-lighter-surface));padding:0 .7rem;color:rgb(var(--ax-sys-color-on-surface));font:inherit}.title-input:focus{outline:2px solid rgba(var(--ax-sys-color-primary-500),.25);outline-offset:0}.users-list-wrap{display:flex;flex-direction:column;height:min(50vh,36rem);overflow:hidden}.users-list-search{flex:0 0 auto;padding:.5rem .75rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-lighter-surface))}.users-list{display:block;flex:1 1 auto;min-height:0}.user-item-content{display:flex;align-items:center;gap:.75rem;height:100%;padding:.5rem .75rem;min-width:0}.user-item-text{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1;gap:.125rem}.user-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface))}.user-description-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:400;opacity:.72;color:rgb(var(--ax-sys-color-on-surface))}.users-list-empty{padding:1rem;text-align:center;font-size:.85rem;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXConversationAvatarPickerComponent, selector: "ax-conversation-avatar-picker", inputs: ["showClearButton", "avatarUrl"], outputs: ["avatarUrlChange", "onFileSelected"] }, { kind: "component", type: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationNewDialogComponent, decorators: [{
             type: Component,
@@ -10523,6 +10526,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         @if (showUserPickerStep()) {
           <div class="form-field form-field--grow">
             <div class="users-list-wrap">
+              <div class="users-list-search">
+                <ax-search-box
+                  [value]="searchQuery()"
+                  (valueChange)="onSearchChange($event)"
+                  [disabled]="creating()"
+                  [placeholder]="'@acorex:chat.placeholders.search-users' | translate | async"
+                ></ax-search-box>
+              </div>
               <ax-list
                 #usersList
                 class="users-list"
@@ -10532,23 +10543,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 [disabled]="creating()"
                 [valueField]="'id'"
                 [textField]="'name'"
-                [itemHeight]="52"
+                [itemHeight]="60"
                 [ngModel]="selectedUserIds()"
                 (ngModelChange)="onSelectedUsersChange($event ?? [])"
                 [emptyTemplate]="usersListEmptyTpl()"
                 [itemTemplate]="userItemTpl"
-              >
-                <ax-header class="users-list-header">
-                  <div class="users-list-header-inner">
-                    <ax-search-box
-                      [value]="searchQuery()"
-                      (valueChange)="onSearchChange($event)"
-                      [disabled]="creating()"
-                      [placeholder]="'@acorex:chat.placeholders.search-users' | translate | async"
-                    ></ax-search-box>
-                  </div>
-                </ax-header>
-              </ax-list>
+              ></ax-list>
             </div>
           </div>
         }
@@ -10640,7 +10640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         </div>
       }
     </ng-template>
-  `, styles: [":host{display:block}.new-conversation-panel{display:flex;flex-direction:column;width:100%;overflow:hidden}.new-conversation-dialog-content{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:.75rem}.form-field--grow{flex:1;min-height:0;display:flex;flex-direction:column}.group-details-step{flex:1;min-height:0;padding:.5rem .75rem;display:flex;flex-direction:column;gap:.75rem}.form-field{display:flex;flex-direction:column;gap:.35rem}.field-label{font-size:.875rem;font-weight:500;color:var(--ax-text-secondary, #6b7280)}.title-input{height:2.25rem;border-radius:.5rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-lighter-surface));padding:0 .7rem;color:rgb(var(--ax-sys-color-on-surface));font:inherit}.title-input:focus{outline:2px solid rgba(var(--ax-sys-color-primary-500),.25);outline-offset:0}.users-list-wrap{height:min(50vh,36rem);overflow:hidden}.users-list{display:block;height:100%}.users-list-header{display:block;position:sticky;top:0;z-index:1;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.users-list-header-inner{padding:.5rem .75rem}.user-item-content{display:flex;align-items:center;gap:.75rem;height:100%;padding:.5rem .75rem;min-width:0}.user-item-text{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1;gap:.125rem}.user-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface))}.user-description-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:400;opacity:.72;color:rgb(var(--ax-sys-color-on-surface))}.users-list-empty{padding:1rem;text-align:center;font-size:.85rem;opacity:.7}\n"] }]
+  `, styles: [":host{display:block}.new-conversation-panel{display:flex;flex-direction:column;width:100%;overflow:hidden}.new-conversation-dialog-content{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:.75rem}.form-field--grow{flex:1;min-height:0;display:flex;flex-direction:column}.group-details-step{flex:1;min-height:0;padding:.5rem .75rem;display:flex;flex-direction:column;gap:.75rem}.form-field{display:flex;flex-direction:column;gap:.35rem}.field-label{font-size:.875rem;font-weight:500;color:var(--ax-text-secondary, #6b7280)}.title-input{height:2.25rem;border-radius:.5rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-lighter-surface));padding:0 .7rem;color:rgb(var(--ax-sys-color-on-surface));font:inherit}.title-input:focus{outline:2px solid rgba(var(--ax-sys-color-primary-500),.25);outline-offset:0}.users-list-wrap{display:flex;flex-direction:column;height:min(50vh,36rem);overflow:hidden}.users-list-search{flex:0 0 auto;padding:.5rem .75rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-lighter-surface))}.users-list{display:block;flex:1 1 auto;min-height:0}.user-item-content{display:flex;align-items:center;gap:.75rem;height:100%;padding:.5rem .75rem;min-width:0}.user-item-text{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1;gap:.125rem}.user-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface))}.user-description-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:400;opacity:.72;color:rgb(var(--ax-sys-color-on-surface))}.users-list-empty{padding:1rem;text-align:center;font-size:.85rem;opacity:.7}\n"] }]
         }], propDecorators: { __popup__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__popup__", required: false }] }], usersListEmptyTpl: [{ type: i0.ViewChild, args: ['usersListEmpty', { isSignal: true }] }], usersList: [{ type: i0.ViewChild, args: ['usersList', { isSignal: true }] }] } });
 
 var newConversationDialog_component = /*#__PURE__*/Object.freeze({
@@ -11305,14 +11305,47 @@ var sharedStorage = /*#__PURE__*/Object.freeze({
 });
 
 /**
- * Extra seed data so sidebar and message-list pagination can be exercised in the demo.
+ * Extra seed data so sidebar, message-list, and user-picker pagination can be exercised in the demo.
  */
 const AX_CONVERSATION_MIN_CONVERSATIONS_FOR_PAGINATION = 200;
 const AX_CONVERSATION_MIN_MESSAGES_CONV_1 = 500;
+const AX_CONVERSATION_MIN_USERS_FOR_PAGINATION = 50;
+/**
+ * Append demo users when the participant list is too small for the new-conversation picker (page size 10).
+ */
+async function ensureUsersPaginationDemoData() {
+    const users = Array.from(axConversationSharedStorage.participants.values()).filter((user) => user.id !== axConversationSharedStorage.currentUserId);
+    if (users.length >= AX_CONVERSATION_MIN_USERS_FOR_PAGINATION) {
+        return;
+    }
+    const toCreate = AX_CONVERSATION_MIN_USERS_FOR_PAGINATION - users.length;
+    const statuses = ['online', 'offline', 'away'];
+    const titles = ['Developer', 'Designer', 'Manager', 'Analyst', 'Engineer', 'QA', 'DevOps', 'Support'];
+    for (let i = 0; i < toCreate; i++) {
+        const index = users.length + i + 1;
+        const participant = {
+            id: `user-pag-${index}`,
+            name: `Demo User ${String(index).padStart(2, '0')}`,
+            description: `${titles[i % titles.length]} · Pagination demo`,
+            avatar: `https://i.pravatar.cc/150?img=${(index % 70) + 1}`,
+            status: statuses[i % statuses.length],
+            lastSeen: new Date(Date.now() - i * 300_000),
+            profile: {
+                bio: `Mock user #${index} for new-conversation list pagination`,
+                email: `demo.user.${index}@example.com`,
+                title: titles[i % titles.length],
+            },
+            metadata: { tags: ['demo', 'pagination'] },
+        };
+        axConversationSharedStorage.participants.set(participant.id, participant);
+        await axConversationIndexedDbStorage.putParticipant(participant);
+    }
+}
 /**
  * Append demo chats/messages when the DB is too small for default page sizes (30 / 50).
  */
 async function ensurePaginationDemoData() {
+    await ensureUsersPaginationDemoData();
     const conversationCount = axConversationSharedStorage.conversations.size;
     const conv1Messages = axConversationSharedStorage.messagesByConversation.get('conv-1')?.length ?? 0;
     if (conversationCount >= AX_CONVERSATION_MIN_CONVERSATIONS_FOR_PAGINATION && conv1Messages >= AX_CONVERSATION_MIN_MESSAGES_CONV_1) {
@@ -12266,20 +12299,23 @@ class AXConversationIndexedDbUserApi extends AXConversationUserApi {
     // =====================
     // User Discovery
     // =====================
-    async getUsers(filters) {
+    async getUsers(pagination = { page: 0, pageSize: 50 }, filters) {
         const users = Array.from(axConversationSharedStorage.participants.values());
-        const filtered = users.filter((u) => u.id !== axConversationSharedStorage.currentUserId);
-        if (!filters?.query)
-            return filtered;
-        const q = filters.query.toLowerCase();
-        return filtered.filter((u) => {
-            const name = u.name.toLowerCase();
-            const desc = (u.description ?? '').toLowerCase();
-            return name.includes(q) || desc.includes(q);
-        });
+        let filtered = users.filter((u) => u.id !== axConversationSharedStorage.currentUserId);
+        if (filters?.query) {
+            const q = filters.query.toLowerCase();
+            filtered = filtered.filter((u) => {
+                const name = u.name.toLowerCase();
+                const desc = (u.description ?? '').toLowerCase();
+                return name.includes(q) || desc.includes(q);
+            });
+        }
+        filtered.sort((a, b) => a.name.localeCompare(b.name));
+        return paginateChatOldestFirst(filtered, pagination);
     }
     async searchUsers(query) {
-        return this.getUsers({ query });
+        const result = await this.getUsers({ page: 0, pageSize: 1000 }, { query });
+        return result.items;
     }
     async getUserById(userId) {
         const user = axConversationSharedStorage.participants.get(userId);