{"id":39730543,"url":"https://github.com/starfall-org/web-bottelegram","last_synced_at":"2026-01-18T11:00:52.629Z","repository":{"id":272572854,"uuid":"917013076","full_name":"starfall-org/web-bottelegram","owner":"starfall-org","description":null,"archived":false,"fork":false,"pushed_at":"2026-01-17T14:02:35.000Z","size":753,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-17T22:33:45.774Z","etag":null,"topics":["bot","telegram","telegram-bot","web","website"],"latest_commit_sha":null,"homepage":"https://webtelegrambot.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/starfall-org.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-01-15T07:26:44.000Z","updated_at":"2026-01-17T14:02:38.000Z","dependencies_parsed_at":"2025-01-15T11:15:23.448Z","dependency_job_id":"26d9a03c-98e0-44bb-8f78-e414a0224369","html_url":"https://github.com/starfall-org/web-bottelegram","commit_stats":null,"previous_names":["chantroi/webbot-telegram","celestrial-org/web-bottelegram","celestial-org/web-bottelegram","starfall-org/web-bottelegram"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/starfall-org/web-bottelegram","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starfall-org%2Fweb-bottelegram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starfall-org%2Fweb-bottelegram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starfall-org%2Fweb-bottelegram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starfall-org%2Fweb-bottelegram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/starfall-org","download_url":"https://codeload.github.com/starfall-org/web-bottelegram/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starfall-org%2Fweb-bottelegram/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28535156,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T10:13:46.436Z","status":"ssl_error","status_checked_at":"2026-01-18T10:13:11.045Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bot","telegram","telegram-bot","web","website"],"created_at":"2026-01-18T11:00:30.285Z","updated_at":"2026-01-18T11:00:52.545Z","avatar_url":"https://github.com/starfall-org.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bottlegram - Modern Telegram Bot Client\n\nA modern, React-based Telegram bot client built with TypeScript, shadcn/ui, and Vite. Previously converted from Vanilla JavaScript to provide better developer experience and maintainability.\n\n## Features\n\n- **Modern React Architecture** with TypeScript and hooks\n- **Multi-language Support** (Vietnamese \u0026 English)\n- **Multi-chat interface** with sidebar and message history\n- **Real-time messaging** via Telegram Bot API polling with Grammy.js\n- **Media support** for photos, videos, audio, documents, and stickers\n- **Markdown \u0026 Code Highlighting** with syntax highlighting for code blocks\n- **Inline message replies** and message deletion\n- **Bot profile-based storage** using localStorage with Zustand persistence\n- **Local notifications** with visual toasts and browser notifications\n- **Responsive design** with Tailwind CSS\n- **Modern UI Components** powered by shadcn/ui and Radix UI\n- **CORS proxy support** for API access\n- **Comprehensive Settings** with tabbed configuration interface\n\n## Tech Stack\n\n- **React 18** with TypeScript\n- **Vite** for fast development and building\n- **shadcn/ui** components built on Radix UI\n- **Tailwind CSS** for styling\n- **Zustand** for state management\n- **Grammy.js** for Telegram Bot API\n- **Lucide React** for icons\n- **React Syntax Highlighter** for code block highlighting\n\n## Project Structure\n\n```\nsrc/\n├── main.tsx                   # Application entry point\n├── index.html                 # HTML template\n├── components/\n│   ├── App.tsx               # Main application component\n│   ├── Sidebar.tsx           # Chat list sidebar\n│   ├── ChatArea.tsx          # Main chat interface\n│   ├── ChatList.tsx          # Chat list with search\n│   ├── InputArea.tsx         # Message input area\n│   ├── MessageList.tsx       # Message display area\n│   ├── SettingsDialog.tsx    # Comprehensive settings\n│   ├── ThemeProvider.tsx     # Theme context provider\n│   └── ui/                   # shadcn/ui components\n├── hooks/\n│   └── useBotConnection.ts   # Bot connection \u0026 polling\n├── services/\n│   └── botService.ts         # Grammy.js bot service\n├── store/\n│   └── botStore.ts           # Zustand state management\n├── i18n/\n│   ├── translations.ts       # Translation definitions\n│   └── useTranslation.ts     # Translation hook\n├── lib/\n│   └── utils.ts              # Utility functions\n└── styles/\n    └── globals.css           # Global styles \u0026 Tailwind\n```\n\n## Getting Started\n\n### Development\n\n```bash\nnpm install\nnpm run dev\n```\n\nThis will start a development server with hot module reloading at `http://localhost:5173`.\n\n### Building\n\n```bash\nnpm run build\n```\n\nThe built application will be in the `dist/` directory.\n\n### Preview\n\n```bash\nnpm run preview\n```\n\nPreview the production build locally.\n\n## Usage\n\n1. Get a Telegram Bot Token from [BotFather](https://t.me/botfather)\n2. Open the application and click the Settings icon in the sidebar\n3. Go to the \"Connection\" tab and enter your Bot Token\n4. Optionally add a CORS proxy prefix if needed for API access\n5. Click \"Save \u0026 Connect\" or \"Test Connection\"\n6. The bot will start polling for updates and display incoming messages\n7. Use the \"Appearance\" tab to switch themes (Light/Dark/System) and languages (Vietnamese/English)\n\n### Markdown Support\n\nThe application supports Telegram's markdown formats:\n\n- **HTML Mode**: `\u003cb\u003ebold\u003c/b\u003e`, `\u003ci\u003eitalic\u003c/i\u003e`, `\u003ccode\u003ecode\u003c/code\u003e`, `\u003cpre\u003ecode block\u003c/pre\u003e`\n- **MarkdownV2**: `**bold**`, `__italic__`, `` `code` ``, ` ```language\\ncode\\n``` `\n- **Markdown (legacy)**: `*bold*`, `_italic_`, `` `code` ``\n\n#### Code Blocks with Syntax Highlighting\n\nSend code blocks with language specification for automatic syntax highlighting:\n\n```\n```python\ndef hello():\n    print(\"Hello, World!\")\n```\n```\n\nSupported languages include: python, javascript, typescript, java, c, cpp, go, rust, php, ruby, and many more.\n\nThe syntax highlighting automatically adapts to your selected theme (light/dark).\n\n## Storage\n\n- **Bot Token**: Stored in localStorage with Zustand persistence\n- **Chat History**: Stored in localStorage, organized by chat ID\n- **Settings**: Theme, language, and preferences persisted\n- **Update IDs**: Tracked for polling continuity\n- **Bot Info**: Cached for quick access\n\n## Internationalization\n\nThe application supports multiple languages:\n\n- **Vietnamese (vi)**: Default language with comprehensive translations\n- **English (en)**: Full English translation support\n\nLanguage can be switched in Settings \u003e Appearance \u003e Language.\n\n## Settings Features\n\n### Connection Tab\n\n- Bot token configuration\n- CORS proxy setup\n- Connection testing\n- Current bot information display\n- Webhook deletion\n- Data clearing\n\n### Appearance Tab\n\n- Theme selection (Light/Dark/System)\n- Language switching\n- Real-time theme preview\n\n### Preferences Tab\n\n- Auto-scroll behavior\n- Notification sounds\n- Push notifications\n- Application preferences\n\n### About Tab\n\n- Version information\n- Framework details\n- Polling status\n- Copyright information\n\n## State Management\n\nThe application uses Zustand for state management with the following features:\n\n- **Persistent Storage**: Automatic localStorage persistence\n- **Type Safety**: Full TypeScript support\n- **Chat Management**: Efficient chat and message handling\n- **Settings Sync**: Synchronized theme and language settings\n- **Connection State**: Real-time connection status tracking\n\n## Bot Integration\n\nBuilt with Grammy.js for robust Telegram Bot API integration:\n\n- **Real-time Polling**: Automatic message polling and processing\n- **File Handling**: Support for all Telegram media types\n- **Error Handling**: Comprehensive error management\n- **API Methods**: Full support for Telegram Bot API methods\n\n## Development Notes\n\nThis project was migrated from Vanilla JavaScript to React while maintaining all original functionality. The migration includes:\n\n- Modern component architecture\n- Type safety with TypeScript\n- Improved developer experience\n- Better code organization\n- Enhanced UI with shadcn/ui\n- Comprehensive internationalization\n\n## License\n\nThis project is released under the [GNU General Public License v3.0](LICENSE).\n\n[![License: GNU GPL v3](https://img.shields.io/badge/License-GNU%20GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstarfall-org%2Fweb-bottelegram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstarfall-org%2Fweb-bottelegram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstarfall-org%2Fweb-bottelegram/lists"}