Get rid of the onLoad signal

TODO

@@ -1,5 +1,4 @@
 * chat view
-  * synch panel size when switching chats in dashboard
   * show suggestions in blank chat view
 * entry
   * flash when sening empty message
@@ -12,3 +11,4 @@
   * save custom icon to smaller size
   * update yoga to use gap
   * lazy main view creation / reuse same type of view in dashboard
+  * load service history lazily

package.json

@@ -44,7 +44,7 @@
     "eventsource-parser": "0.1.0",
     "fetch-yode": "1.x",
     "fs-extra": "11.1.0",
-    "gui": "0.13.8",
+    "gui": "0.13.9",
     "highlight.js": "11.7.0",
     "html-escaper": "3.0.3",
     "marked": "4.3.0",

src/model/base-chat-service.ts

@@ -33,7 +33,6 @@ export default abstract class BaseChatService<T extends WebAPI = WebAPI, P exten
   static nextId = 0;
   static fromId = (id: number) => BaseChatService.services[id];
 
-  onLoad: Signal<() => void> = new Signal;
   onNewTitle: Signal<(title: string | null) => void> = new Signal;
   onUserMessage: Signal<(message: ChatMessage) => void> = new Signal;
   onClearError: Signal<() => void> = new Signal;
@@ -49,7 +48,7 @@ export default abstract class BaseChatService<T extends WebAPI = WebAPI, P exten
   id: number = ++BaseChatService.nextId;
 
   // Whether the chat messages have be recovered from disk.
-  isLoaded;
+  isLoaded = false;
 
   // ID of the chat history kept on disk.
   moment?: string;
@@ -69,6 +68,9 @@ export default abstract class BaseChatService<T extends WebAPI = WebAPI, P exten
   // The aborter that can be used to abort current call.
   aborter: AbortController;
 
+  // The promise of current load process.
+  protected loadPromise?: Promise<void>;
+
   // Title of the chat.
   protected customTitle?: string;
   protected title?: string;
@@ -84,20 +86,8 @@ export default abstract class BaseChatService<T extends WebAPI = WebAPI, P exten
 
   constructor(options: BaseChatServiceOptions<T, P>) {
     super(options);
+    this.moment = options.moment;
     BaseChatService.services[this.id] = this;
-    if (options.moment) {
-      // Load from saved history.
-      this.isLoaded = false;
-      this.moment = options.moment;
-      historyKeeper.remember(this.moment).then((data?: BaseChatHistoryData) => {
-        if (data)
-          this.deserializeHistory(data);
-        this.isLoaded = true;
-        this.onLoad.emit();
-      });
-    } else {
-      this.isLoaded = true;
-    }
   }
 
   serialize() {
@@ -115,6 +105,17 @@ export default abstract class BaseChatService<T extends WebAPI = WebAPI, P exten
     delete BaseChatService.services[this.id];
   }
 
+  // Load chat history.
+  async load() {
+    if (this.isLoaded)
+      return;
+    if (this.loadPromise)
+      return await this.loadPromise;
+    this.loadPromise = this.loadHistory();
+    await this.loadPromise;
+    this.isLoaded = true;
+  }
+
   // Restore from serialized history data.
   deserializeHistory(data: BaseChatHistoryData) {
     if (data.history)
@@ -383,6 +384,16 @@ export default abstract class BaseChatService<T extends WebAPI = WebAPI, P exten
     this.onMessage.emit(message);
   }
 
+  // Load history from disk.
+  protected async loadHistory() {
+    if (!this.moment)
+      return;
+    // Load from saved history.
+    const data = await historyKeeper.remember(this.moment);
+    if (data)
+      this.deserializeHistory(data);
+  }
+
   // Write history to disk.
   protected saveHistory() {
     if (!this.moment) {

src/view/base-view.ts

@@ -19,10 +19,16 @@ export default abstract class BaseView<T extends WebService<WebAPI> = WebService
     this.unload();
   }
 
-  loadService(service: T) {
+  // Load service, return false if there is nothing to do in sub-classes.
+  async loadService(service: T) {
+    if (this.service == service)
+      return false;
+    this.unload();
     this.service = service;
+    return true;
   }
 
+  // Disconnect from the service.
   unload() {
     this.service = null;
     this.serviceConnections.disconnectAll();

src/view/chat-list-item.ts

@@ -25,7 +25,7 @@ export default class ChatListItem extends Clickable {
   constructor(service: ChatService) {
     super();
     this.service = service;
-    this.connections.add(service.onNewTitle.connect(this.setTitle.bind(this)));
+
     this.view.setStyle({width: '100%', height: 32, marginBottom: 2});
     this.view.onMouseEnter = () => this.closeButton.view.setVisible(true);
     this.view.onMouseLeave = () => this.closeButton.view.setVisible(false);
@@ -44,12 +44,8 @@ export default class ChatListItem extends Clickable {
     this.closeButton.onClick = () => this.onClose.emit(this);
     this.view.addChildView(this.closeButton.view);
 
-    this.setTitle(service.getTitle());
-    if (!service.isLoaded) {
-      this.connections.add(service.onLoad.connect(() => {
-        this.setTitle(service.getTitle());
-      }));
-    }
+    this.service.load().then(() => this.setTitle(service.getTitle()));
+    this.connections.add(service.onNewTitle.connect(this.setTitle.bind(this)));
   }
 
   destructor() {
@@ -108,6 +104,8 @@ export default class ChatListItem extends Clickable {
   }
 
   onDraw(view, painter: gui.Painter) {
+    if (!this.#titleText)  // no title set yet
+      return;
     // Background color.
     const theme = this.darkMode ? style.dark : style.light;
     if (this.selected)
@@ -129,6 +127,8 @@ export default class ChatListItem extends Clickable {
   }
 
   #updateTooltip() {
+    if (!this.#titleText)  // no title set yet
+      return;
     const bounds = Object.assign(this.view.getBounds(), {x: 0, y: 0});
     // Always consider space for the close button since the tooltip only shows
     // when mouse is hovering on it.

src/view/chat-view.ts

@@ -155,22 +155,18 @@ export default class ChatView extends BaseView<BaseChatService> {
   }
 
   async loadService(service: BaseChatService) {
-    if (this.service == service)
-      return;
     if (!(service instanceof BaseChatService))
       throw new Error('ChatView can only be used with BaseChatService.');
-    // Clear previous load.
-    this.unload();
+    if (!await super.loadService(service))
+      return false;
+
     // Delay loading until the service is ready.
-    if (!service.isLoaded) {
-      this.serviceConnections.add(service.onLoad.connect(this.loadService.bind(this, service)));
-      return;
-    }
+    await service.load();
     // Load messages.
     this.messagesView.loadChatService(service);
-    super.loadService(service);
     this.onNewTitle.emit();
     this.#updateSwitchButton();
+
     // Connect signals.
     this.serviceConnections.add(service.onNewTitle.connect(
       this.onNewTitle.emit.bind(this.onNewTitle)));
@@ -211,6 +207,7 @@ export default class ChatView extends BaseView<BaseChatService> {
           this.service.history[this.service.history.length - 1].role == ChatRole.User)
         this.messagesView.setReplyActions(['resend']);
     }
+    return true;
   }
 
   unload() {

src/view/multi-chats-view.ts

@@ -126,13 +126,11 @@ export default class MultiChatsView extends SplitView<BaseMultiChatsService> {
       item.destructor();
   }
 
-  loadService(service: BaseMultiChatsService) {
-    if (this.service == service)
-      return;
+  async loadService(service: BaseMultiChatsService) {
     if (!(service instanceof BaseMultiChatsService))
       throw new Error('MultiChatsView can only be used with MultiChatsService');
-    this.unload();
-    super.loadService(service);
+    if (!await super.loadService(service))
+      return false;
 
     // Load existing chats.
     if (this.service.chats.length == 0)
@@ -146,6 +144,7 @@ export default class MultiChatsView extends SplitView<BaseMultiChatsService> {
     this.connections.add(service.onNewChat.connect(this.#onNewChat.bind(this)));
     this.connections.add(service.onRemoveChat.connect(this.#onRemoveChat.bind(this)));
     this.connections.add(service.onClearChats.connect(this.#onClearChats.bind(this)));
+    return true;
   }
 
   unload() {

test/chat-service-test.ts

@@ -46,7 +46,7 @@ describe('ChatService', () => {
     await historyKeeper.flush();
     assert.deepEqual(record, await historyKeeper.remember(moment));
     service = new ChatService({name: 'Test', api: service.api, moment});
-    await new Promise<void>((resolve) => service.onLoad.connect(resolve));
+    await service.load();
     assert.equal(record.title, service.getTitle());
     assert.deepEqual(record.history, service.history);
   });

test/multi-chats-service-test.ts

@@ -48,7 +48,7 @@ describe('MultiChatsService', () => {
       chats: [ {moment} ],
     };
     service = new MultiChatsService(MultiChatsService.deserialize(data));
-    await new Promise<void>((resolve) => service.chats[0].onLoad.connect(resolve));
+    await service.chats[0].load();
     assert.equal(service.chats[0].getTitle(), record.title);
     assert.deepEqual(service.chats[0].history, record.history);
     assert.deepEqual(service.serialize(), data);