fix: cannot update old message after rendering a new one (#275)

* fix: add test to reproduce the error

* fix: cannot update old message

Author: sirily11

.github/workflows/create-release.yaml

@@ -3,7 +3,7 @@ name: Create a new release
 
 jobs:
   create-release:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     permissions:
       contents: write
     if: ${{ (github.event.pusher.name != 'github action') && (github.ref == 'refs/heads/main') }}

.github/workflows/main.yaml

@@ -3,7 +3,7 @@ name: Test and Lint
 
 jobs:
   test:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/released.yaml

@@ -7,7 +7,7 @@ on:
 jobs:
   release-npm:
     name: Release npm packages
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     permissions:
       contents: write
     steps:

apps/example-bot/src/app/state/counter/counter.tsx

@@ -1,3 +1,4 @@
+import { CommandButton } from "@rx-lab/core";
 import { useState } from "@rx-lab/storage";
 
 export function Counter() {
@@ -37,6 +38,9 @@ export function Counter() {
         >
           Reset
         </button>
+        <CommandButton command={"/"} renderNewMessage>
+          Home
+        </CommandButton>
       </div>
     </div>
   );

packages/common/src/adapter.interface.ts

@@ -6,6 +6,8 @@ import {
   StoredRoute,
 } from "./router.interface";
 
+export type GetRouteKeyLevel = "message" | "chatroom" | "auto";
+
 export interface RedirectOptions {
   /**
    * Indicates whether the application should re-render after the redirect.
@@ -209,12 +211,12 @@ export interface AdapterInterface<
    *
    * @param container The container object representing the current state of the UI.
    * @param isUpdate Indicates whether this is an update to an existing UI or a new render.
-   * @returns A promise that resolves to the adapted UI element.
+   * @returns A promise that resolves to the adapted UI element. If the element is not rendered, return undefined.
    *
    * @example
    * const uiElement = await adapter.adapt(container, false);
    */
-  adapt: (container: C, isUpdate: boolean) => Promise<AdaptElement>;
+  adapt: (container: C, isUpdate: boolean) => Promise<C | undefined>;
 
   /**
    * Sets up the menu structure for the target platform.
@@ -269,7 +271,7 @@ export interface AdapterInterface<
    * @param container - The container object holding message context
    * @returns A unique string key identifying the route for the current message
    */
-  getRouteKey: (container: C) => string;
+  getRouteKey: (container: C, level?: GetRouteKeyLevel) => string;
 
   /**
    * Lifecycle method called when core is destroyed.

packages/core/src/core/core.tsx

@@ -62,7 +62,6 @@ export class Core<T extends Container<BaseChatroomInfo, BaseMessage>>
   extends Renderer<T>
   implements CoreInterface<any>
 {
-  private element: RenderedComponent | undefined;
   /**
    * Debounce timeout for commit updates.
    */
@@ -149,7 +148,7 @@ export class Core<T extends Container<BaseChatroomInfo, BaseMessage>>
         });
 
         const key = this.adapter.getRouteKey(container);
-        const storedRoute = await this.storage.restoreRoute(key);
+        const storedRoute = await this.router.getRouteFromKey(key);
         // if user click on a bot message, the message text itself will be erased.
         // we need to restore the text from the stored route from user.
         if (
@@ -202,7 +201,7 @@ export class Core<T extends Container<BaseChatroomInfo, BaseMessage>>
         });
         // get the current route
         const key = this.adapter.getRouteKey(container);
-        const storedRoute = await this.storage.restoreRoute(key);
+        const storedRoute = await this.router.getRouteFromKey(key);
         if (storedRoute) {
           await this.redirect(container, storedRoute, {
             shouldRender: true,
@@ -301,6 +300,29 @@ export class Core<T extends Container<BaseChatroomInfo, BaseMessage>>
     let component: RenderedComponent | undefined;
     if (options?.shouldRender) {
       component = await this.loadAndRenderStoredRoute(key, route);
+      this.once("onRendered", async (renderedContainer) => {
+        const key = this.adapter.getRouteKey(renderedContainer, "message");
+        // means this is newly sent message
+        // we didn't store the route yet
+        if (options?.shouldAddToHistory) {
+          Logger.log("Adding initial message to history", "bgBlue");
+          await Promise.all([
+            this.storage.saveRoute(
+              key,
+              route ?? {
+                route: DEFAULT_ROOT_ROUTE,
+                type: "page",
+              },
+            ),
+            this.storage.addHistory(key, {
+              route: route?.route ?? DEFAULT_ROOT_ROUTE,
+              props: this.renderedPageProps,
+              type: "page",
+            }),
+          ]);
+        }
+      });
+
       try {
         await this.render(
           container,
@@ -310,11 +332,18 @@ export class Core<T extends Container<BaseChatroomInfo, BaseMessage>>
         // Important: Do not store the route if the page is redirecting, as redirected pages already have a stored route.
         if (component?.isError !== true) {
           if (options.shouldAddToHistory) {
-            await this.storage.saveRoute(key, {
-              route: route?.route ?? DEFAULT_ROOT_ROUTE,
-              props: this.renderedPageProps,
-              type: "page",
-            });
+            const globalKey = this.adapter.getRouteKey(container, "chatroom");
+
+            // save the message level route and the chatroom level route
+            await Promise.all(
+              Array.from(new Set([key, globalKey])).map(async (key) =>
+                this.storage.saveRoute(key, {
+                  route: route?.route ?? DEFAULT_ROOT_ROUTE,
+                  props: this.renderedPageProps,
+                  type: "page",
+                }),
+              ),
+            );
           }
 
           if (options?.shouldAddToHistory && route) {
@@ -355,14 +384,24 @@ export class Core<T extends Container<BaseChatroomInfo, BaseMessage>>
       if (!route) return;
       // handles the cases while not rendering but still want to add the route to the history
       if (options?.shouldAddToHistory) {
-        await Promise.all([
-          this.storage.saveRoute(key, route),
-          this.storage.addHistory(key, {
-            route: route.route,
-            props: this.renderedPageProps,
-            type: "page",
-          }),
-        ]);
+        const globalKey = this.adapter.getRouteKey(container, "chatroom");
+        await Promise.all(
+          [
+            this.storage.addHistory(key, {
+              route: route.route,
+              props: this.renderedPageProps,
+              type: "page",
+            }),
+          ].concat(
+            Array.from(new Set([key, globalKey])).map(async (key) =>
+              this.storage.saveRoute(key, {
+                route: route?.route ?? DEFAULT_ROOT_ROUTE,
+                props: this.renderedPageProps,
+                type: "page",
+              }),
+            ),
+          ),
+        );
       }
     }
   }
@@ -429,6 +468,8 @@ export class Core<T extends Container<BaseChatroomInfo, BaseMessage>>
       isInGroup: container.isInGroup,
       groupId: container.groupId,
       hasBeenMentioned: container.hasBeenMentioned,
+      ...this.element.props,
+      ...oldProps,
       storage: {
         saveState: async (key: string, state: any, opt?: SetStateOptions) => {
           const storedKey = encodeStateKey(
@@ -458,8 +499,6 @@ export class Core<T extends Container<BaseChatroomInfo, BaseMessage>>
           );
         },
       },
-      ...this.element.props,
-      ...oldProps,
     };
 
     try {

packages/core/src/core/renderer.ts

@@ -7,6 +7,7 @@ import {
   InstanceType,
   Logger,
   type ReactInstanceType,
+  RenderedComponent,
   StorageInterface,
 } from "@rx-lab/common";
 import { Router } from "@rx-lab/router";
@@ -43,6 +44,7 @@ type ServerEvents = {
   ) => void;
   startRenderCallback: () => void;
   endRenderCallback: () => void;
+  onRendered: (container: Container<BaseChatroomInfo, BaseMessage>) => void;
 };
 
 export class Renderer<
@@ -81,6 +83,8 @@ export class Renderer<
    */
   private currentHasUpdates = false;
 
+  protected element: RenderedComponent | undefined;
+
   constructor({ adapter, storage }: RendererOptions) {
     super();
     const builder = new ComponentBuilder();
@@ -251,7 +255,11 @@ export class Renderer<
       "bgCyan",
     );
     this.currentHasUpdates = false;
-    await this.adapter.adapt(container, true);
+    const adaptedContainer = await this.adapter.adapt(container, true);
+    if (adaptedContainer) {
+      Logger.log("onRendered event emitted", "bgCyan");
+      this.emit("onRendered", adaptedContainer);
+    }
   }
 
   async onUpdate(container: T) {

packages/storage/src/memory/memory.ts

@@ -63,7 +63,9 @@ export class MemoryStorage extends Storage {
   }
 
   async saveRoute(key: string, path: StoredRoute): Promise<void> {
-    this.routeMap.set(`${ROUTE_KEY}-${key}`, path);
+    this.routeMap.set(`${ROUTE_KEY}-${key}`, {
+      ...path,
+    });
     if (this.delaySimulation) {
       await this.delaySimulation();
     }
@@ -75,7 +77,7 @@ export class MemoryStorage extends Storage {
     if (this.delaySimulation) {
       await this.delaySimulation();
     }
-    this.historyMap.set(key, route);
+    this.historyMap.set(key, JSON.stringify(route) as any);
   }
 
   async deleteHistory(key: string): Promise<void> {
@@ -89,6 +91,7 @@ export class MemoryStorage extends Storage {
     if (this.delaySimulation) {
       await this.delaySimulation();
     }
-    return this.historyMap.get(key);
+    const value = this.historyMap.get(key);
+    return value !== undefined ? JSON.parse(value as any) : undefined;
   }
 }

packages/telegram-adapter/src/adapter.spec.ts

@@ -37,12 +37,12 @@ describe("TelegramAdapter", () => {
 
       const result = await adapter.adapt(container as any, false);
 
-      expect(result).toEqual([]);
+      expect(result).toEqual(undefined);
       expect(mockBot.sendMessage).not.toHaveBeenCalled();
       expect(mockBot.editMessageText).not.toHaveBeenCalled();
     });
 
-    it("should not send a message if there are no children", async () => {
+    it.only("should not send a message if there are no children", async () => {
       const container: TGContainer = {
         type: "ROOT",
         children: [],
@@ -55,7 +55,7 @@ describe("TelegramAdapter", () => {
 
       const result = await adapter.adapt(container as any, false);
 
-      expect(result).toEqual([]);
+      expect(result).toEqual(undefined);
       expect(mockBot.sendMessage).not.toHaveBeenCalled();
       expect(mockBot.editMessageText).not.toHaveBeenCalled();
     });