fix: add support for telegram link with search query (#261)

Author: sirily11

apps/example-bot/src/app/page.tsx

@@ -19,7 +19,6 @@ export default async function Page({
         <br />
         Click the menu button to see the available options.
       </p>
-      <code>Hello</code>
     </div>
   );
 }

packages/core/src/core/core.tsx

@@ -370,6 +370,14 @@ export class Core<T extends Container<BaseChatroomInfo, BaseMessage>>
         type: "page",
       },
     );
+    // if there is a parse search query, pass it to the component
+    if (component.queryString) {
+      component.queryString = {
+        ...component.queryString,
+        ...defaultRoute?.props?.searchQuery,
+      };
+    }
+
     await this.setComponent(component);
     return component;
   }

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

@@ -2,6 +2,7 @@ import { Menu } from "@rx-lab/common";
 import * as TelegramBot from "node-telegram-bot-api";
 import { TGContainer, TelegramAdapter } from "./adapter";
 import { renderElement } from "./renderer";
+import { DEFAULT_ROOT_PATH } from "./types";
 
 jest.mock("node-telegram-bot-api");
 jest.mock("./callbackParser");
@@ -306,4 +307,126 @@ describe("TelegramAdapter", () => {
       expect(mockBot.setMyCommands).toHaveBeenCalledWith([]);
     });
   });
+
+  describe("getCurrentRoute", () => {
+    let adapter: TelegramAdapter;
+
+    beforeEach(() => {
+      adapter = new TelegramAdapter({ token: "fake-token" });
+    });
+
+    it("should return undefined for messages without entities", async () => {
+      const message = {
+        message_id: 1,
+        chat: { id: 123 },
+        text: "hello world",
+      } as TelegramBot.Message;
+
+      const result = await adapter.getCurrentRoute(message);
+      expect(result).toBeUndefined();
+    });
+
+    it("should return undefined for non-command entities", async () => {
+      const message = {
+        message_id: 1,
+        chat: { id: 123 },
+        text: "hello @username",
+        entities: [
+          {
+            type: "mention",
+            offset: 6,
+            length: 9,
+          },
+        ],
+      } as TelegramBot.Message;
+
+      const result = await adapter.getCurrentRoute(message);
+      expect(result).toBeUndefined();
+    });
+
+    it("should handle /start command and return root path", async () => {
+      const message = {
+        message_id: 1,
+        chat: { id: 123 },
+        text: "/start",
+        entities: [
+          {
+            type: "bot_command",
+            offset: 0,
+            length: 6,
+          },
+        ],
+      } as TelegramBot.Message;
+
+      const result = await adapter.getCurrentRoute(message);
+      expect(result).toEqual({
+        route: DEFAULT_ROOT_PATH,
+        query: {},
+      });
+    });
+
+    it("should handle /start command with query parameters", async () => {
+      const message = {
+        message_id: 1,
+        chat: { id: 123 },
+        text: "/start param1=value1&param2=value2",
+        entities: [
+          {
+            type: "bot_command",
+            offset: 0,
+            length: 6,
+          },
+        ],
+      } as TelegramBot.Message;
+
+      const result = await adapter.getCurrentRoute(message);
+      expect(result).toEqual({
+        route: DEFAULT_ROOT_PATH,
+        query: {
+          param1: "value1",
+          param2: "value2",
+        },
+      });
+    });
+
+    it("should handle other bot commands", async () => {
+      const message = {
+        message_id: 1,
+        chat: { id: 123 },
+        text: "/help",
+        entities: [
+          {
+            type: "bot_command",
+            offset: 0,
+            length: 5,
+          },
+        ],
+      } as TelegramBot.Message;
+
+      const result = await adapter.getCurrentRoute(message);
+      expect(result).toEqual({
+        route: "/help",
+      });
+    });
+
+    it("should handle bot commands in group chats with bot mention", async () => {
+      const message = {
+        message_id: 1,
+        chat: { id: 123 },
+        text: "/help@mybot",
+        entities: [
+          {
+            type: "bot_command",
+            offset: 0,
+            length: 11,
+          },
+        ],
+      } as TelegramBot.Message;
+
+      const result = await adapter.getCurrentRoute(message);
+      expect(result).toEqual({
+        route: "/help",
+      });
+    });
+  });
 });

packages/telegram-adapter/src/adapter.ts

@@ -49,6 +49,16 @@ interface InternalTGContainer extends TGContainer {
   decodedData: DecodeType;
 }
 
+function parseQueryString(queryString: string) {
+  const urlParams = new URLSearchParams(queryString);
+  const entries = urlParams.entries();
+  const result: Record<string, string> = {};
+  for (const [key, value] of entries) {
+    result[key] = value;
+  }
+  return result;
+}
+
 export class TelegramAdapter
   implements
     AdapterInterface<
@@ -299,9 +309,13 @@ export class TelegramAdapter
     return route;
   }
 
-  async getCurrentRoute(
-    message: TelegramBot.Message,
-  ): Promise<string | undefined> {
+  async getCurrentRoute(message: TelegramBot.Message): Promise<
+    | {
+        route: string;
+        query?: Record<string, string>;
+      }
+    | undefined
+  > {
     if (!message.entities) {
       return;
     }
@@ -314,9 +328,16 @@ export class TelegramAdapter
         command = command?.split("@")[0];
 
         if (command === START_COMMAND) {
-          return DEFAULT_ROOT_PATH;
+          const query = message.text?.split(" ")[1];
+          const decodedQuery = parseQueryString(query ?? "");
+          return {
+            route: DEFAULT_ROOT_PATH,
+            query: decodedQuery as Record<string, string>,
+          };
         }
-        return command;
+        return {
+          route: command,
+        };
       }
     }
 
@@ -338,8 +359,11 @@ export class TelegramAdapter
       const currentRoute = await this.getCurrentRoute(route);
       if (currentRoute) {
         return {
-          route: await this.getCurrentRoute(route),
+          route: currentRoute.route,
           type: "page",
+          props: currentRoute.query
+            ? ({ searchQuery: currentRoute.query } as any)
+            : undefined,
         };
       }
     }

packages/telegram-adapter/src/renderer.ts

@@ -51,7 +51,7 @@ export const renderElementHelper = (
       return [`<code>${children.join("")}</code>`];
     case InstanceType.Command:
       if (element.props.variant === "button") {
-        if (element.props.command.startsWith("http")) {
+        if (element.props.webapp) {
           return {
             type: "button",
             text: children.join(""),
@@ -60,6 +60,15 @@ export const renderElementHelper = (
             },
           };
         }
+
+        if (element.props.command.startsWith("http")) {
+          return {
+            type: "button",
+            text: children.join(""),
+            url: element.props.command,
+          };
+        }
+
         const callbackData = {
           route: convertRouteToTGRoute(element.props.command),
           new: element.props.renderNewMessage,
@@ -169,10 +178,15 @@ export const renderElement = (
         text: res.text,
         callback_data: res.callback_data,
       };
+
       if (res.web_app) {
         button.web_app = res.web_app;
       }
 
+      if (res.url) {
+        button.url = res.url;
+      }
+
       if (level === 1) {
         inlineKeyboardButtons.push([button]);
       } else {

packages/telegram-adapter/src/utils.ts

@@ -55,6 +55,7 @@ export function convertTGRouteToRoute(route: StoredRoute): string {
 
   // Find the position of the first underscore
   const firstUnderscoreIndex = route.route.indexOf("_");
+  const startPayload = route.route.split(" ")[1];
 
   // If there's no underscore, return the route as is
   if (firstUnderscoreIndex === -1) {