Improve boot time by implementing sliding sync

packages/host/app/components/ai-assistant/past-session-item.gts

@@ -206,10 +206,7 @@ export default class PastSessionItem extends Component<Signature> {
   }
 
   get isStreaming() {
-    if (!this.args.session.lastMessage) {
-      return false;
-    }
-    return !this.args.session.lastMessage.isStreamingFinished;
+    return this.args.session.lastMessage?.isStreamingFinished === false;
   }
 
   get hasUnseenMessage() {

packages/host/app/components/ai-assistant/past-sessions.gts

@@ -1,13 +1,18 @@
-import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
 
-import { IconButton } from '@cardstack/boxel-ui/components';
+import { modifier } from 'ember-modifier';
+
+import { IconButton, LoadingIndicator } from '@cardstack/boxel-ui/components';
 import { DropdownArrowFilled } from '@cardstack/boxel-ui/icons';
 
 import { SessionRoomData } from './panel';
 import AiAssistantPanelPopover from './panel-popover';
 import PastSessionItem, { type RoomActions } from './past-session-item';
 
+import type MatrixService from '../../services/matrix-service';
+
 interface Signature {
   Args: {
     sessions: SessionRoomData[];
@@ -17,51 +22,96 @@ interface Signature {
   Element: HTMLElement;
 }
 
-const AiAssistantPastSessionsList: TemplateOnlyComponent<Signature> = <template>
-  <AiAssistantPanelPopover
-    @onClose={{@onClose}}
-    data-test-past-sessions
-    ...attributes
-  >
-    <:header>
-      All Sessions
-      <IconButton
-        @icon={{DropdownArrowFilled}}
-        @width='12px'
-        @height='12px'
-        {{on 'click' @onClose}}
-        aria-label='Close Past Sessions'
-        data-test-close-past-sessions
-      />
-    </:header>
-    <:body>
-      {{#if @sessions}}
-        <ul class='past-sessions'>
-          {{#each @sessions key='roomId' as |session|}}
-            <PastSessionItem @session={{session}} @actions={{@roomActions}} />
-          {{/each}}
-        </ul>
-      {{else}}
-        <div class='empty-collection'>
-          No past sessions to show.
-        </div>
-      {{/if}}
-    </:body>
-  </AiAssistantPanelPopover>
+export default class AiAssistantPastSessionsList extends Component<Signature> {
+  @service declare matrixService: MatrixService;
+
+  checkScroll = modifier((element: HTMLElement) => {
+    let checkScrollPosition = () => {
+      let { scrollHeight, scrollTop, clientHeight } = element;
+      let isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 1;
+      let hasNoScroll = scrollHeight <= clientHeight;
+
+      if (isAtBottom || hasNoScroll) {
+        this.matrixService.loadMoreAIRooms();
+      }
+    };
 
-  <style scoped>
-    .past-sessions {
-      list-style-type: none;
-      padding: 0;
-      margin: 0;
-      margin-bottom: var(--boxel-sp-xs);
-    }
-    .empty-collection {
-      padding: var(--boxel-sp-sm);
-      text-align: center;
-      color: var(--boxel-450);
-    }
-  </style>
-</template>;
+    checkScrollPosition();
 
-export default AiAssistantPastSessionsList;
+    element.addEventListener('scroll', checkScrollPosition);
+
+    return () => {
+      element.removeEventListener('scroll', checkScrollPosition);
+    };
+  });
+
+  <template>
+    <AiAssistantPanelPopover
+      @onClose={{@onClose}}
+      data-test-past-sessions
+      ...attributes
+    >
+      <:header>
+        All Sessions
+        <IconButton
+          @icon={{DropdownArrowFilled}}
+          @width='12px'
+          @height='12px'
+          {{on 'click' @onClose}}
+          aria-label='Close Past Sessions'
+          data-test-close-past-sessions
+        />
+      </:header>
+      <:body>
+        {{#if @sessions}}
+          <ul class='past-sessions' {{this.checkScroll}}>
+            {{#each @sessions key='roomId' as |session|}}
+              <PastSessionItem @session={{session}} @actions={{@roomActions}} />
+            {{/each}}
+            {{#if this.matrixService.isLoadingMoreAIRooms}}
+              <li
+                class='loading-indicator-container'
+                data-test-loading-more-rooms
+              >
+                <LoadingIndicator
+                  @color='var(--boxel-dark)'
+                  class='loading-indicator'
+                />
+              </li>
+            {{/if}}
+          </ul>
+        {{else}}
+          <div class='empty-collection'>
+            No past sessions to show.
+          </div>
+        {{/if}}
+      </:body>
+    </AiAssistantPanelPopover>
+
+    <style scoped>
+      .past-sessions {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        margin-bottom: var(--boxel-sp-xs);
+        max-height: 400px;
+        overflow-y: auto;
+      }
+      .empty-collection {
+        padding: var(--boxel-sp-sm);
+        text-align: center;
+        color: var(--boxel-450);
+      }
+      .loading-indicator-container {
+        padding: var(--boxel-sp-sm);
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .loading-indicator {
+        margin: 0 auto;
+      }
+    </style>
+  </template>
+}

packages/host/app/components/matrix/room.gts

@@ -28,8 +28,8 @@ import { TrackedObject, TrackedSet } from 'tracked-built-ins';
 
 import { v4 as uuidv4 } from 'uuid';
 
-import { BoxelButton } from '@cardstack/boxel-ui/components';
-import { eq, not } from '@cardstack/boxel-ui/helpers';
+import { BoxelButton, LoadingIndicator } from '@cardstack/boxel-ui/components';
+import { and, eq, not } from '@cardstack/boxel-ui/helpers';
 
 import {
   type getCard,
@@ -87,8 +87,14 @@ export default class Room extends Component<Signature> {
     {{#if (not this.doMatrixEventFlush.isRunning)}}
       <section
         class='room'
-        data-room-settled={{this.doWhenRoomChanges.isIdle}}
-        data-test-room-settled={{this.doWhenRoomChanges.isIdle}}
+        data-room-settled={{(and
+          this.doWhenRoomChanges.isIdle
+          (not this.matrixService.isLoadingTimeline)
+        )}}
+        data-test-room-settled={{(and
+          this.doWhenRoomChanges.isIdle
+          (not this.matrixService.isLoadingTimeline)
+        )}}
         data-test-room-name={{@roomResource.name}}
         data-test-room={{@roomId}}
       >
@@ -109,7 +115,14 @@ export default class Room extends Component<Signature> {
               data-test-message-idx={{i}}
             />
           {{else}}
-            <NewSession @sendPrompt={{this.sendMessage}} />
+            {{#if this.matrixService.isLoadingTimeline}}
+              <LoadingIndicator
+                @color='var(--boxel-light)'
+                class='loading-indicator'
+              />
+            {{else}}
+              <NewSession @sendPrompt={{this.sendMessage}} />
+            {{/if}}
           {{/each}}
           {{#if this.room}}
             {{#if this.showUnreadIndicator}}
@@ -218,6 +231,12 @@ export default class Room extends Component<Signature> {
       :deep(.ai-assistant-conversation > *:nth-last-of-type(2)) {
         padding-bottom: var(--boxel-sp-xl);
       }
+      .loading-indicator {
+        margin-top: auto;
+        margin-bottom: auto;
+        margin-left: auto;
+        margin-right: auto;
+      }
     </style>
   </template>
 
@@ -805,7 +824,8 @@ export default class Room extends Component<Signature> {
           this.autoAttachedCards.size !== 0,
       ) &&
       !!this.room &&
-      !this.messages.some((m) => this.isPendingMessage(m))
+      !this.messages.some((m) => this.isPendingMessage(m)) &&
+      !this.matrixService.isLoadingTimeline
     );
   }
 

packages/host/app/services/matrix-sdk-loader.ts

@@ -3,6 +3,7 @@ import Service from '@ember/service';
 import { service } from '@ember/service';
 
 import * as MatrixSDK from 'matrix-js-sdk';
+import { SlidingSync } from 'matrix-js-sdk/lib/sliding-sync';
 
 import { RealmAuthClient } from '@cardstack/runtime-common/realm-auth-client';
 
@@ -23,6 +24,11 @@ export default class MatrixSDKLoader extends Service {
     }
     return this.#extended;
   }
+
+  // For testing purposes, we need to mock the SlidingSync class
+  get SlidingSync() {
+    return SlidingSync;
+  }
 }
 
 export class ExtendedMatrixSDK {