grammY Inline Menu

In version 9, MenuTemplate methods were updated to accept arguments within an options object instead of as separate positional arguments. This change improves readability and allows for easier inlining of functions.

Key changes:

• .interact(): The text is now a property inside the options object.
• .url(): All parameters are moved into a single options object.
• .choose(): The choices are moved into a choices key within the options object.

-// Version 8 style
-menuTemplate.interact((ctx) => ctx.i18n.t('button'), 'unique', { 
- 
+// Version 9 style
+menuTemplate.interact('unique', {
+  text: (ctx) => ctx.i18n.t('button'),
+  do: async (ctx) => { ... }
+});

-// Version 8 style
-menuTemplate.url('Text', 'https://edjopato.de', { joinLastRow: true });
+// Version 9 style
+menuTemplate.url({ text: 'Text', url: 'https://edjopato.de', joinLastRow: true });

-// Version 8 style
-menuTemplate.choose('unique', ['walk', 'swim'], { 
-
+// Version 9 style
+menuTemplate.choose('unique', {
+  choices: ['walk', 'swim'],
+  do: async (ctx, key) => { ... }
+});

To create a menu, define a MenuTemplate that specifies the message body (often using a function to access context), define button interactions using .interact(), and then register the MenuMiddleware with your bot. Use menuMiddleware.replyToContext(ctx) to send the menu to the user.

import { Bot } from "grammy";
import { MenuMiddleware, MenuTemplate } from "grammy-inline-menu";

// Define the template with a function for the message body
const menuTemplate = new MenuTemplate<MyContext>((ctx) =>
	`Hey ${ctx.from.first_name}!`
);

// Define an interaction with a unique ID
menuTemplate.interact("unique", {
	text: "I am excited!",
	do: async (ctx) => {
		await ctx.reply("As am I!");
		return false;
	},
});

const bot = new Bot(process.env.BOT_TOKEN);

// Initialize middleware with a root path (e.g., "/")
const menuMiddleware = new MenuMiddleware("/", menuTemplate);

// Use the middleware and trigger the menu via a command
bot.command("start", (ctx) => menuMiddleware.replyToContext(ctx));
bot.use(menuMiddleware);

await bot.start();

Use menuTemplate.select(id, options) to allow users to pick one option from a list. This automatically updates the menu to show the currently selected item.

• choices: An array of strings or a Record<string, string> (where keys are IDs and values are display text).
• isSet: Determines if a specific key is currently selected.
• set: Updates the state with the selected key.

// Using an array of choices
menuTemplate.select("unique", {
	choices: ["human", "bird"],
	isSet: (ctx, key) => ctx.session.choice === key,
	set: (ctx, key) => {
		ctx.session.choice = key;
		return true;
	},
});

// Using a Record for dynamic text
const choices: Record<string, string> = {
	a: 'Alphabet',
	b: 'Beta',
	c: 'Canada'
};

menuTemplate.select('unique', {
    choices,
    isSet: (ctx, key) => ctx.session.choice === key,
    set: (ctx, key) => {
        ctx.session.choice = key;
        return true;
    }
});

You can send a menu outside of the standard middleware flow using several methods:

1. Via Middleware: Use menuMiddleware.replyToContext(ctx, [path]) to reply to a context with a specific menu or submenu.
2. Via Helper Functions: Use replyMenuToContext(menuTemplate, ctx, path) to send a specific menu template to a context.
3. Via External Events: Use generateSendMenuToChatFunction(bot.telegram, menu, rootPath) to create a function that can be called from anywhere (e.g., an external event handler), provided you pass the user's context.

// 1. Reply via middleware
const menuMiddleware = new MenuMiddleware("/", menuTemplate);
bot.command("start", (ctx) => menuMiddleware.replyToContext(ctx));

// 2. Reply via helper
import { replyMenuToContext } from "grammy-inline-menu";
bot.command("settings", async (ctx) => {
    await replyMenuToContext(settingsMenu, ctx, "/settings/");
});

// 3. Send from external event
const sendMenuFunction = generateSendMenuToChatFunction(
    bot.telegram,
    menu,
    "/settings/",
);

async function externalEventOccurred() {
    await sendMenuFunction(userId, context);
}