Single-Message Inline Navigation in Telegram bots How to create smooth navigation with AI

## Introduction

Single-message inline navigation (also known as “replace-in-place UX” or “on-site navigation”) is a user interface design pattern for Telegram bots that allows for a smoother and more compact experience. Instead of sending new messages for each navigation step, the bot edits an existing message by updating its text, media, or inline buttons. This is achieved using Telegram API methods such as editMessageText and editMessageMedia, instead of the standard sendMessage.

## What is single-message inline navigation?

In traditional Telegram bots, each user action (pressing a button, selecting an option) leads to a new message being sent from the bot. This can quickly fill the chat, make it less readable, and make it harder to navigate back.

Single-message inline navigation solves this problem by using one fixed message as a "canvas" for all navigation:

• The bot sends the original message with inline buttons (using sendMessage with reply_markup type InlineKeyboardMarkup).
• When the button is pressed, the bot receives a callback request and instead of sending a new message, edits the current one using editMessageText or editMessageMedia.
• This allows you to update text, images, video or keyboard in the same message, creating an “on-site rewrite” effect.

It is important to note that this pattern usually applies only to inline elements (menus and selection steps). To enter text from a user, reply keyboards, or chats (such as transactions or dialogs), it is better to use standard new messages to keep your interaction history.

### Example of scenario

Imagine a bot for an online store:

1. The user calls the menu: the bot sends the message "Select category" with the buttons "Electronics", "Clothing", "Books".
2. The user clicks "Electronics" - the bot edits the same message to "Electronics: Select a subcategory" with new buttons "Smartphones", "Laptops".
3. And so on, without creating new messages.

## Why is that necessary? Advantages

This pattern improves the user experience for several reasons:

• Compact chat: The chat remains clean, with no message flow. The user sees only relevant information, which is especially useful in group chats or on mobile devices.
• Smooth navigation: Switches between screens occur instantly, without waiting for new messages. This creates the feeling of “apps inside the chat.”.
• ** Improved accessibility**: It’s easier to go back (add a back button that edits the message to the previous step).
• Resource savings: Fewer API calls to send messages, which reduces server load and Telegram limits.
• Best conversion: In bots for business (surveys, forms, menus), this increases engagement, as the user is not distracted by scrolling.

However, there are also disadvantages:

• Not suitable for scripts that require a story (e.g. chat support).
• Requires state management to track the user’s current move.

This approach is ideal for bots with menu navigation, such as directories, polls, games or admin panels.

## How to implement through AI: Compilation of prompts

AI agents (such as the Codex App) are able to independently determine the programming language, libraries, and code structure based on the project description. If the bot already exists, the AI can analyze the existing code.

### Basic Principles of Compilation of Prompts

• Indicate the language and library: If known, specify (for example, Python with python-telegram-bot), otherwise the AI itself will determine based on context.
• Describe the pattern clearly: Specify that use editMessageText/editMessageMedia for inline navigation, not sendMessage for each step.
• Add script details: Describe the menu structure (options, submenu, back button), state processing (for multiple users) and limitations (only for inline, not for text entry).
• ** Demand full code**: Ask to enable import, handlers, bot launch and error handling.
• Clarify the generalization: Emphasize that the code should be universal, applicable to any bot.
• Add iterations: If the result is not perfect, check in subsequent prompts (for example, "Add FSM for states").
• Avoid ambiguity: Use terms like “replace-in-place UX” or “single-message navigation” to associate AI with known patterns.
• Existing code analysis: If the bot has already been created, include fragments or a description of the current project in the prompt - the AI itself will sort out the language and rework the handlers.

I propose two key prompts: the first for fixing a plan to implement handlers in documentation (so that AI documents the approach before code generation), the second for analyzing and adapting an existing project to a new pattern.

### Prompt 1: Fixing the plan for the implementation of processors in the documentation

This prompt forces the AI to first describe and record in “documentation” (e.g., markdown or comment) how it will implement handlers (handlers for callback, states, etc.) before generating code. This is useful for transparency and subsequent adjustments.

Analyze the task of creating a Telegram bot with a single-message inline navigation (replace-in-place UX) pattern. First, write down the implementation plan in the documentation (markdown format): describe how the handlers will work (command handlers, callback query), how to manage states (for example, through the chat id dictionary), how to use editMessageText instead of sendMessage for navigation, and how to handle errors (for example, old messages). Specify the intended language (Python, Node.js or other) and library (python-telegram-bot, telegraf, etc.), if not specified - choose yourself based on best practices.

Then, based on this plan, generate the full working code for the bot. Screenplay:
The /start command sends the original message with the text “Main menu” and inline buttons: “Option 1”, “Option 2”, “Help”.
When clicking Option 1 edit the message to "You have selected Option 1" with new buttons: "Subscription 1.1", "Subscription 1.2", "Back".
- When you press 'Podoption 1.1' edit to 'Option 1.1 Information' with the 'Back' button.
Similar to 'Option 2' (with sub-options) and 'Help' (just text with 'Back' button).
The Back button returns to the previous menu level by editing the same message.
Use callback data to process clicks.
Add state management for multiple users.
Don’t use new messages to navigate, just edit an existing one.
The code should be universal, with comments.
Import all the necessary modules, add the launch bot.
- Replace 'YOUR BOT TOKEN' with a placeholder

### Prompt 2: Analysis of the current project and reworking for new handlers

This is suitable if the bot has already been created. The AI will analyze the provided code (insert it into a prompt), determine the language, libraries and structure, then redesign the handlers for a single-message inline navigation pattern.

"Analyze the existing Telegram bot code. Determine the programming language, the libraries used (e.g., python-telegram-bot, telegraf) and the current handler structure (command handlers, callback, etc.).

Then, adapt the code to the single-message inline navigation (replace-in-place UX) pattern: modify the handlers so that editMessageText/editMessageMedia is used for the inline menu and navigation instead of sendMessage, saving one message for the entire navigation. Add state management (e.g. FSM or chat id dictionary) if you don’t have one. Save the functionality to enter text or reply keyboards through new messages.

First, describe changes in documentation (markdown): what exactly changes in handlers, how states are added, potential conflicts with current code.

Then, generate the updated full code. Make sure it’s versatile, works with multiple users, includes error handling (e.g., for old messages). If there are specific scenarios in the original (menu, polls), adapt them to the new pattern. Replace 'YOUR BOT TOKEN' with a placeholder

### Expected outcome from AI

AI will generate: first documentation/plan, then code. If the AI (e.g. Codex App) doesn’t perform perfectly the first time, specify: “In the generated code add integration with the database for storing states” or “Census Node.js with telegraf”.

### Additional tips for working with AI

• **Testing: After generation, ask the AI to start or restart the bot and check a few buttons.
• Difficult scenarios: For media bots, add to the prompt: "Enable editMessageMedia to update images in the menu.".
• Updates: If the pattern evolves, check the Telegram API version in the prompt.

## Conclusion

Single-message inline navigation is a powerful pattern for creating modern Telegram bots that makes interaction more intuitive and efficient. With AI, you can automate implementation by simply providing detailed prompts, as in the examples above. This allows you to quickly adapt the pattern for any bot, whether it is a product catalog, a survey or a game – even if the project already exists, the AI itself will analyze and rework the code. Experiment with prompts, test generated code, and improve UX based on user feedback.

**The most important thing is that there is no such thing as a perfect prompt, each project is unique, so you can always ask the same AI to adapt the prompt for your project, the purpose of this article is to tell you what such a pattern is and how it can be used.