ajaxy / telegram-tt

Telegram Web A, GPL v3

Telegram Web A

This project won the first prize 🥇 at Telegram Lightweight Client Contest and now is an official Telegram client available to anyone at web.telegram.org/a.

According to the original contest rules, it has nearly zero dependencies and is fully based on its own Teact framework (which re-implements React paradigm). It also uses a custom version of GramJS as an MTProto implementation.

The project incorporates lots of technologically advanced features, modern Web APIs and techniques: WebSockets, Web Workers and WebAssembly, multi-level caching and PWA, voice recording and media streaming, cryptography and raw binary data operations, optimistic and progressive interfaces, complicated CSS/Canvas/SVG animations, reactive data streams, and so much more.

Feel free to explore, provide feedback and contribute.

Local setup

mv .env.example .env

npm i

Obtain API ID and API hash on my.telegram.org and populate the .env file.

Dev mode

npm run dev

Invoking API from console

Start your dev server and locate GramJS worker in console context.

All constructors and functions available in global GramJs variable.

Run npm run gramjs:tl full to get access to all available Telegram requests.

Example usage:

await invoke(new GramJs.help.GetAppConfig())

Electron

Electron allows building a native application that can be installed on Windows, macOS, and Linux.

NPM scripts

• npm run dev:electron

Run Electron in development mode, concurrently starts 3 processes with watch for changes: main (main Electron process), renderer (FE code) and Webpack for Electron (compiles main Electron process from TypeScript).

• npm run electron:webpack

The main process code for Electron, which includes preload functionality, is written in TypeScript and is compiled using the webpack-electron.config.js configuration to generate JavaScript code.

• npm run electron:build

Prepare renderer (FE code) build, compile Electron main process code, install and build native dependencies, is used before packaging or publishing.

• npm run electron:staging

Create packages for macOS, Windows and Linux in dist-electron folders with APP_ENV as staging (allows to open DevTools, includes sourcemaps and does not minify built JavaScript code), can be used for manual distribution and testing packaged application.

• npm run electron:production

Create packages for macOS, Windows and Linux in dist-electron folders with APP_ENV as production (disabled DevTools, minified built JavaScript code), can be used for manual distribution and testing packaged application.

• npm run deploy:electron

Create packages for macOS, Windows and Linux in dist-electron folder and publish release to GitHub, which allows supporting autoupdates. See GitHub release workflow for more info.

Code signing on MacOS

To sign the code of your application, follow these steps:

• Install certificates from /certs folder to login folder of your Keychain.
• Download and install Developer ID - G2 certificate from the Apple PKI page.
• Under the Keychain application, go to the private key associated with your developer certificate. Then do key > Get Info > Access Control. Down there, make sure your application (Xcode) is in the list Always allow access by these applications and make sure Confirm before allowing access is turned on.
• A valid and appropriate identity from your keychain will be automatically used when you publish your application.

More info in the official documentation.

Notarize on MacOS

Application notarization is done automatically in electron-builder module, which requires APPLE_ID and APPLE_APP_SPECIFIC_PASSWORD environment variables to be passed.

How to obtain app-specific password:

• Sign in to appleid.apple.com.
• In the "Sign-In and Security" section, select "App-Specific Passwords".
• Select "Generate an app-specific password" or select the Add button, then follow the steps on your screen.

GitHub release

GitHub access token

In order to publish new release, you need to add GitHub access token to .env. Generate a GitHub access token by going to https://github.com/settings/tokens/new. The access token should have the repo scope/permission. Once you have the token, assign it to an environment variable:

# .env
GH_TOKEN="{YOUR_TOKEN_HERE}"

Publish settings

Publish configuration in src/electron/config.yml config file allows to set GitHub repository owner/name.

Release workflow

• Run npm run electron:publish, which will create new draft release and upload build artefacts to newly reated release. Version of created release will be the same as in package.json.
• Once you are done, publish the release. GitHub will tag the latest commit.

Dependencies

• GramJS (MIT License)
• pako (MIT License)
• cryptography (Apache License 2.0)
• emoji-data (MIT License)
• twemoji-parser (MIT License)
• rlottie (MIT License)
• opus-recorder (Various Licenses)
• qr-code-styling (MIT License)
• croppie (MIT License)
• mp4box (BSD-3-Clause license)
• music-metadata-browser (MIT License)
• lowlight (MIT License)
• idb-keyval (Apache License 2.0)
• fasttextweb
• webp-wasm
• fastblur

Bug reports and Suggestions

If you find an issue with this app, let Telegram know using the Suggestions Platform.

telegram-tt's Issues

Opening website from notification asks to login every time

Hello there,

Thank you for this cool web version!
Notification works fine but when clicking on them it ask to do a login every time.

Versions

OS: Ubuntu 20.04
Browser: Firefox 88.0.1

I'll try do some tests on other browsers

Update

on Chrome Version 90.0.4430.212 works fine

Enable an option for sticky sticker panel

On desktop brwosers with legacy telegram web, the sticker panel will still be hovered after a sticker is sent.
This behaviour is not possible on telegram web z, please consider adding an option to do so.

When language is Right-To-Left language, WebZ should show chat-list in the right, Not left.

At first, Thank you for supporting Right-To-Left (RTL) Partially.

I suggest moving chat-list to right, If the app language is an RTL language.

Expected Style

Actual Style

Linked issues:

• #12
• #25

Let user disable background notifications

In the legacy webapp, there was a switch to disable background notifications (i.e. desktop notifications when telegram's tab is not open). In the new webapps, it does not appear to be implemented yet.

Is there a workaround by playing with Chrome/Firefox permissions?

Fix GitHub Actions in this repo

I have two pull requests of fixing translations, All of them not passed in the CI, But I could run it successfully!

@Ajaxy

Links don't work in profile info

Hi, i think i found a small bug.

.ripple-container overlaps links in .ChatExtra

zoom button in mobile media viewer

tabbar Ripple effect missing

fast options for left menu

I would like that the buttons of contacts, saved messages and archived chats to be put like the image below.

With this, you could also remove these buttons from the dropdown menu and save some space for future options.

Add full RTL support

Hebrew, Arabic, Persian, Urdu and several others use scripts written from right to left.

This is a blog post about adjusting Spotify to support these languages:
https://engineering.atspotify.com/2019/04/15/right-to-left-the-mirror-world/

I will start testing it myself and see if I can contribute without breaking the UI completely.

Currently the most important thing is to add dir=auto to the input boxes so typing in these languages will be more coherent.

Thank you.

I see [OBJECT OBJECT] on delete

Taiwan is missing

Connection is extremely unstable

"Waiting for network..."
and in the console says "WebSocket connection to 'wss://flora.web.telegram.org/apiws' failed: "
The connection is extremely unstable on UTC -4 09:00 onwards.

Add memeber to group is missing

[Feature Request] Allow option to edit messages

With the android application there is the option to edit sended messages. It would be cool to implement such feature on the web client.

Some text isn't translated in WebZ but it has translations in Translations platform

Hi,
I converted the language to Arabic (ar), But there's some text still in English!!
Note that text has translations in Translations platform.

Screenshots

Steps to reproduce

1. Open Telegram WebZ
2. Sign in
3. Change the language to Arabic (ar)
4. Open the menu
5. You'll find Dark Mode, Telegram features untranslated!!
6. Open settings
7. You'll find General Settings, Edit Profile untranslated!!

Web page preview text overflows compose container

Web pages with long summaries overflow the compose container

Animation and theme toggle does not saves after app reload

Disable animation, enable dark mode, reload - and you will see again animations and white theme.

Bugs in emoji input

1. After I paste or delete an emoji, the cursor position is resetted to the beginning:

RecApp-2021-08-29-02.16.19.mp4

2. Emojis in the beginning of the message are not deleted on backspace key press and hold:

RecApp-2021-08-28-22.42.02.mp4

3. Emojis selected from quick selection menu are not displayed correctly (default system font is used) and don't trigger sticker popover:

RecApp-2021-08-29-02.08.48.mp4

[Feature Request] Resize left column with chats

In the macOS version of Telegram, there is a great opportunity to collapse the chat window to the size of icons, so that a window with groups appears on the left (with a large number, this is more convenient than using tabs)

Not able to view old profile photo

Downloading large attachments does not work

Downloading ~70 MB attachment does not seem to work for me. it gets stuck halfway

Writing a colon ":" followed by "D" results in an unexpected behaviour

Hello,

Nice project!

When I am writing a message, which starts with a colon ":", I got a pop-up with emojis:

This would be probably OK for a colon, but when I am writing ":D" smiley, it offers as a first emoji the 💯 (100) or a 👗 (dress):

This results into situation, when I can either press ESC and close the pop-up, or I will mistakenly send the 💯 / 👗 emoji:, while I wanted to send classical ":D" or 😃 :

Is there a way how to disable this functionality?

EDIT: Just found that Telegram has own bug site, and found a user with similar question resolved to fixed: https://bugs.telegram.org/c/5838

Push notifications not working

Notifications do not work, I use edge chromium

Tabbar animation glitch when switching tab

Screen.Recording.2021-04-17.at.5.12.11.PM.mov

App refreshes on launching keyboard

Device: Mi A2
Aspect Ratio: 18:9
Android: 10
Chrome: v90.0.4430.91
Keyboard: Gboard

App reloads when screen dimensions change due to soft keyboard launch, making the app unusable.

Might have been triggered by changes in baffa92 @Ajaxy

For example, on the login screen, on tapping the phone number text box, the soft keyboard launches. As soon as the keyboard launches, src/util/windowSize.ts::handleResize() refreshes the window and takes the focus off the text box. On tapping the phone number text box, the problem repeats.

Chat list right padding is too small if scrollbar is not present

No scrollbar (chat list is small and fits into the screen). White space on the right is too narrow:

With scrollbar (chat list is long):

Couldn't load QR login

I got this bug when running server, and QR login couldn't show
[2021-07-21T13:31:47.172Z] [ERROR] - [WebSocket connection failed attempt: 6. Cause: Cannot read property 'digest' of undefined]

Cannot read property 'digest' of undefined]

Wrong colors in dark theme

Some colors are taken from the hardcoded -rgb variables in _variables.scss. For example, button hover color:

Also some elements in Composer, Audio, etc.

.JPEG has no "send in a quick way" option but .JPG has

When I'm trying to attach picture with .JPG suffix I see these 2 options (and most of the time choose the last one)

but Firefox 89.0.2 (64-bit) on macOS saves images as .JPEG and I don't have the second option while trying to attach them and that's odd.

Parameters for bot commands (e.g. /alert 30min Check groceries list) are not passed when pressing ENTER key

As in a185fd9 there's a new tooltip for bot commands. However, if I type the message box like this (e.g. in a group chat) and press the ENTER key:

/command@bot parameters

The app will only send the

/command@bot

message instead.

Some bots such as @AlertBot require parameters to be passed along the command, such as /alert 30min Check groceries list, so this could distract the workflow for some Telegram users.

This issue does not occur on WebK and mobile apps as well.

Extra: Appbar darktheme not changing

Nginx reverse proxy API error: WebSocket connection to'wss://...' failed: Error during WebSocket handshake: Unexpected response code: 404

When I want to reverse proxy the website, I cannot reverse proxy the WSS:// link, and the browser prompts the following error:

WebSocket connection to'wss://pluto.web.telegram.org/apiws' failed: Error during WebSocket handshake: Unexpected response code: 404

Nginx has added the following:

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';

Hope you can help me!

Error: Could not find a matching Constructor ID

[ERROR] - [Unhandled error while receiving data]
[ERROR] - [Error: Could not find a matching Constructor ID for the TLObject that was supposed to be
        read with ID 253890367. Most likely, a TLObject was trying to be read when
         it should not be read. Remaining bytes: 480]

This error needs to be handled, because it can cause very serious problems in some places (e.g. chat list or message history not being loaded).

Fun fact: this error also often happens in Telethon, which GramJS is based on.

React devtools not working

Hi
I have a problem with devtools.
React extension can't dedicate I'm running a react project therefore react devtools is not working.
How should I enable devtools ?

Add memeber to group is missing

Cannot play audio: 404

Not staying logged in on Firefox

I'm trying to use https://webz.telegram.org/ with Firefox 88.0 on Arch Linux, but whenever the page is refreshed (or restarting the browser), I get logged out and need to enter the login manually again. This issue doesn't occur on Chromium.

Can not remove chat from folder

There is no option to remove chat from folder.

I use chrome browser on PC

[Question] What is the purpose of teact?

What is the purpose of teact and what problems does it solve?

Can't access on private mode in Firefox

the web crashes

Copy Paste image

When copying and pasting an image, it is pasted into the input message

On Firefox Nightly sometimes https://webz.telegram.org/ goes into "Waiting for network..." state and never recovers

Platform:

Firefox Nightly on Windows 10 Pro Insider Dev Channel Build 21387

Steps:

• Log into https://webz.telegram.org/
  

• Use Telegram as per normal
  

Result:
After some time https://webz.telegram.org/ goes into a "Waiting for network..." state and never recovers

Expected result:
https://webz.telegram.org/ works normally

No other program nor tabs show signs of any networking issue.

Profile:
https://share.firefox.dev/3y7k8p8

Filing here as requested on https://bugzilla.mozilla.org/show_bug.cgi?id=1711335#c2

"Telegram features" doesn't open (Localized Telegram Tips channel) when app language is not English

"Telegram features" button, Should show localized Telegram tips channel, But it shows only "Telegram tips in English".

No Hint For Bot Commands

In old web telegram and webk version, when you type / there will be some hints for the available bot commands in the channel. It would be nice to see this feature gets added 😄

[Feature Request] Change time format from 24h to 12h

Telegram mobile app and desktop app use 12h time format. So it makes sense that the web app will also use 12h format instead of 24h format

Why create treact instead of using react?

This is more of a discussion than a gh issue tbh, but I didn't know where to ask this and I'm very curious about this choice. Reading the codebase of treact I found that it only supports function components with hooks, but apart from that I didn't understand the choice; why go through the hassle of maintaining a UI library when React works perfectly fine.

P.S: Web Z is frickin' awesome!

RTL the input when the user is writing Persian

like this picture (version k) :

but in your version :

Adding ability to connect to Test Servers

I suggest add ability connecting to Test servers when adding ?test=1 like old Telegram Web Client.

Unpin all messages button shouldn't be shown for non-admin members