mirror of https://github.com/lockin-bot/react-telegram.git synced 2026-04-29 01:45:26 +08:00

Files

Kyle Fang 9729c1a829 feat: add message persistence support to MtcuteAdapter

- Add MessagePersistenceOptions interface with getPreviousMessageId/setPreviousMessageId callbacks
- Add optional MtcuteAdapterOptions parameter to constructor
- Make containerId stable using chatId and optional key instead of timestamp
- Implement message ID persistence logic to edit existing messages after bot restarts
- Handle MESSAGE_ID_INVALID errors gracefully by creating new messages
- Simplify initialization by removing unnecessary messageIdInitialized flag

feat: implement message persistence in persist-todo-bot example

- Create MessageIdStorage class for managing message IDs on disk
- Store message IDs in separate file (message-ids.json)
- Wire up message persistence callbacks in the adapter
- Update documentation to reflect message persistence feature

BREAKING CHANGE: sendReactMessage now strictly accepts chatId as number (not number | string)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-07-08 00:36:03 +08:00

3.4 KiB

Raw Blame History

Persistent Todo Bot Example

This example demonstrates how to build a Telegram bot with persistent state using React, MobX, and custom storage adapters.

Features

State Persistence: Todos are automatically saved to disk and restored on bot restart
Message Persistence: Bot messages are edited instead of recreated after restarts
MobX Integration: Reactive state management with MobX
Custom Storage: Flexible storage layer with file-based and memory implementations
Full CRUD Operations: Add, complete, edit, and delete todos
Statistics View: Track your productivity with todo statistics
Comprehensive Tests: Unit and integration tests with Vitest

Running the Bot

Set up environment variables:

export API_ID=your_api_id
export API_HASH=your_api_hash
export BOT_TOKEN=your_bot_token

Run the bot:

bun run persist

Send /start to your bot on Telegram

Bot Commands

The bot now uses a single /start command with an interactive interface:

Type /help or click the Help button to see available commands
Type /todo or click Manage Todos to access your todo list
Commands can be typed anywhere in the interface when input is available

Architecture

Adapter Configuration

Uses the new MtcuteAdapter API that accepts a TelegramClient instance
Message persistence to edit existing messages after bot restarts
Single /start command with all functionality in one React component
Interactive navigation between views using buttons and text commands

State Management

MobX Store: Manages todo state with reactive updates
mobx-persist-store: Automatically persists state changes
Custom Storage Adapter: Saves to ./storage/todos.json

Components

TodoApp: Root component with navigation
TodoList: Displays active and completed todos
TodoItem: Individual todo with actions
TodoInput: Handles user input for new todos

Storage

IStorage: Abstract storage interface
FileStorage: JSON file-based storage
MemoryStorage: In-memory storage for testing
MessageIdStorage: Manages Telegram message IDs for persistence

Testing

Run tests with:

bun test

View test UI:

bun test:ui

File Structure

src/
├── persist-todo-bot.tsx      # Main bot entry point
├── components/
│   ├── TodoApp.tsx          # Root component
│   ├── TodoList.tsx         # List view
│   ├── TodoItem.tsx         # Item component
│   └── TodoInput.tsx        # Input handler
├── stores/
│   ├── TodoStore.ts         # MobX store
│   └── RootStore.ts         # Root store
└── storage/
    ├── IStorage.ts          # Storage interface
    ├── FileStorage.ts       # File storage
    └── MemoryStorage.ts     # Memory storage

How It Works

State Persistence: Every state change is automatically saved to disk
Message Persistence: Message IDs are saved so bot can edit existing messages after restart
Restoration: On bot restart, todos and message IDs are loaded from storage
Reactive UI: MobX ensures UI updates when state changes
Input Handling: User messages are captured as todo input

Future Enhancements

Multi-user support with separate storage
Todo categories and tags
Due dates and reminders
Export/import functionality
Backup to cloud storage

3.4 KiB Raw Blame History