Support chat-specific hashtag and cashtag search

Author: morethanwords

src/lib/internalLinkProcessor.ts

@@ -52,10 +52,21 @@ import showAddBotToChat from '@components/popups/addBotToChat';
 import getBotAddToChatScope from '@appManagers/utils/bots/getBotAddToChatScope';
 import parseBotAdminRights from '@appManagers/utils/bots/parseBotAdminRights';
 import isEphemeralMessage from '@appManagers/utils/messages/isEphemeralMessage';
+import parseChatSpecificTag from '@lib/richTextProcessor/parseChatSpecificTag';
+import searchByTag from '@lib/richTextProcessor/searchByTag';
 
 export class InternalLinkProcessor {
   protected managers: AppManagers;
   private processingAddAiStyleSlugs: Set<string> = new Set();
+  private tagSearchVersion = 0;
+
+  private showUsernameResolveError(err: ApiError) {
+    if(err.type === 'USERNAME_NOT_OCCUPIED') {
+      toastNew({langPackKey: 'NoUsernameFound'});
+    } else if(err.type === 'USERNAME_INVALID') {
+      toastNew({langPackKey: 'Alert.UserDoesntExists'});
+    }
+  }
 
   public construct(managers: AppManagers) {
     this.managers = managers;
@@ -131,7 +142,22 @@ export class InternalLinkProcessor {
           return;
         }
 
-        return appImManager.chat.initSearch({query: '#' + hashtag + ' '});
+        const search = parseChatSpecificTag(hashtag);
+        const version = ++this.tagSearchVersion;
+        return searchByTag({
+          query: search.query + ' ',
+          username: search.username,
+          activateSearch: (query) => appImManager.chat.initSearch({query}),
+          resolveUsername: (username) => this.managers.appUsersManager.resolveUsername(username),
+          openPeer: (peer) => appImManager.setInnerPeer({
+            peerId: peer.id.toPeerId(peer._ !== 'user')
+          }),
+          isCurrent: () => version === this.tagSearchVersion,
+          onResolveError: (err) => {
+            appImManager.chat.resetSearch();
+            this.showUsernameResolveError(err as ApiError);
+          }
+        });
       }
     });
 
@@ -838,11 +864,7 @@ export class InternalLinkProcessor {
 
         await appImManager.openUsername({userName: link.domain});
       }, (err: ApiError) => {
-        if(err.type === 'USERNAME_NOT_OCCUPIED') {
-          toastNew({langPackKey: 'NoUsernameFound'});
-        } else if(err.type === 'USERNAME_INVALID') {
-          toastNew({langPackKey: 'Alert.UserDoesntExists'});
-        }
+        this.showUsernameResolveError(err);
       });
     }
 

src/lib/richTextProcessor/index.ts

@@ -61,7 +61,8 @@ export const USERNAME_REG_EXP = '[a-zA-Z\\d_]{5,32}';
 // export const TIMESTAMP_REG_EXP = '(?:\\s|^)((?:\\d{1,2}:)?(?:[0-5]?[0-9]):(?:[0-5][0-9]))(?:\\s|$)';
 export const TIMESTAMP_REG_EXP = '(?:\\s|^)((?:(\\d{1,2}):(?:[0-5]?[0-9])|(?:\\d{1,2}|\\d{3,})):(?:[0-5][0-9]))(?:\\s|$)';
 export const BOT_COMMAND_REG_EXP = '\\/([a-zA-Z\\d_]{1,32})(?:@(' + USERNAME_REG_EXP + '))?(\\b|$)';
-export const FULL_REG_EXP = new RegExp('(^| )(@)(' + USERNAME_REG_EXP + ')|(' + URL_REG_EXP + ')|(\\n)|(' + emojiRegExp + ')|(^|[\\s\\(\\]])(#[' + ALPHA_NUMERIC_REG_EXP + ']{2,64})|(^|\\s)' + BOT_COMMAND_REG_EXP + '|' + TIMESTAMP_REG_EXP + '', 'i');
+const TAG_REG_EXP = '(?:#[' + ALPHA_NUMERIC_REG_EXP + ']{2,64}|\\$[A-Z]{1,8}(?![A-Z\\d_]))(?:@' + USERNAME_REG_EXP + ')?';
+export const FULL_REG_EXP = new RegExp('(^| )(@)(' + USERNAME_REG_EXP + ')|(' + URL_REG_EXP + ')|(\\n)|(' + emojiRegExp + ')|(^|[\\s\\(\\]])(' + TAG_REG_EXP + ')|(^|\\s)' + BOT_COMMAND_REG_EXP + '|' + TIMESTAMP_REG_EXP + '', 'i');
 export const EMAIL_REG_EXP = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 // const markdownTestRegExp = /[`_*@~]/;
 export const MARKDOWN_REG_EXP = /(^|\s|\n)(````?)([\s\S]+?)(````?)([\s\n\.,:?!;]|$)|(^|\s|\x01)(`|~~|\*\*|__|_-_|\|\|)([^\n]+?)\7([\x01\s\.,:?!;]|$)|@(\d+)\s*\((.+?)\)|(\[(.+?)\]\((.+?)\))/m;

src/lib/richTextProcessor/parseChatSpecificTag.ts

@@ -0,0 +1,17 @@
+import {isUsernameValid} from '@lib/richTextProcessor/validators';
+
+export default function parseChatSpecificTag(value: string) {
+  const prefix = value[0] === '$' ? '$' : '#';
+  const tag = prefix === '$' ? value.slice(1) : value;
+  const separatorIndex = tag.indexOf('@');
+  const username = separatorIndex > 0 ? tag.slice(separatorIndex + 1) : undefined;
+
+  if(!username || !isUsernameValid(username)) {
+    return {query: prefix + tag};
+  }
+
+  return {
+    query: prefix + tag.slice(0, separatorIndex),
+    username
+  };
+}

src/lib/richTextProcessor/parseEntities.ts

@@ -84,12 +84,17 @@ export default function parseEntities(text: string) {
           unicode: unified
         });
       }
-    } else if(match[11]) { // Hashtag
-      entities.push({
-        _: 'messageEntityHashtag',
-        offset: matchIndex + (match[10] ? match[10].length : 0),
-        length: match[11].length
-      });
+    } else if(match[11]) { // Hashtag or cashtag
+      const isCashtag = match[11][0] === '$';
+      const cashtag = isCashtag ? match[11].split('@', 1)[0] : undefined;
+
+      if(!cashtag || cashtag === cashtag.toUpperCase()) {
+        entities.push({
+          _: isCashtag ? 'messageEntityCashtag' : 'messageEntityHashtag',
+          offset: matchIndex + (match[10] ? match[10].length : 0),
+          length: match[11].length
+        });
+      }
     } else if(match[13]) { // Bot command
       entities.push({
         _: 'messageEntityBotCommand',

src/lib/richTextProcessor/searchByTag.ts

@@ -0,0 +1,34 @@
+export default async function searchByTag<T>(options: {
+  query: string,
+  username?: string,
+  activateSearch: (query: string) => void,
+  resolveUsername: (username: string) => MaybePromise<T>,
+  openPeer: (peer: T) => MaybePromise<unknown>,
+  isCurrent: () => boolean,
+  onResolveError: (err: unknown) => void
+}) {
+  options.activateSearch(options.query);
+  if(!options.username) {
+    return;
+  }
+
+  let peer: T;
+  try {
+    peer = await options.resolveUsername(options.username);
+  } catch(err) {
+    if(options.isCurrent()) {
+      options.onResolveError(err);
+    }
+
+    return;
+  }
+
+  if(!options.isCurrent()) {
+    return;
+  }
+
+  await options.openPeer(peer);
+  if(options.isCurrent()) {
+    options.activateSearch(options.query);
+  }
+}

src/lib/richTextProcessor/wrapRichText.ts

@@ -621,13 +621,15 @@ export default function wrapRichText(text: string, options: WrapRichTextOptions
         break;
       }
 
+      case 'messageEntityCashtag':
       case 'messageEntityHashtag': {
         const contextUrl = !options.noLinks && SITE_HASHTAGS[contextSite];
         if(contextUrl) {
-          const hashtag = fullEntityText.slice(1);
+          const tag = fullEntityText.slice(1);
+          const linkTag = entity._ === 'messageEntityCashtag' ? '$' + tag : tag;
           element = document.createElement('a');
           element.className = 'anchor-hashtag';
-          (element as HTMLAnchorElement).href = contextUrl.replace('{1}', encodeURIComponent(hashtag));
+          (element as HTMLAnchorElement).href = contextUrl.replace('{1}', encodeURIComponent(linkTag));
           if(contextExternal) {
             setBlankToAnchor(element as HTMLAnchorElement);
           } else {

src/tests/parseChatSpecificTag.test.ts

@@ -0,0 +1,33 @@
+import {describe, expect, test} from 'vitest';
+import parseChatSpecificTag from '@lib/richTextProcessor/parseChatSpecificTag';
+
+describe('parseChatSpecificTag', () => {
+  test('keeps a regular tag unchanged', () => {
+    expect(parseChatSpecificTag('tag')).toEqual({query: '#tag'});
+    expect(parseChatSpecificTag('$TON')).toEqual({query: '$TON'});
+  });
+
+  test('separates the target chat username', () => {
+    expect(parseChatSpecificTag('tag@public_channel')).toEqual({
+      query: '#tag',
+      username: 'public_channel'
+    });
+    expect(parseChatSpecificTag('$TON@public_channel')).toEqual({
+      query: '$TON',
+      username: 'public_channel'
+    });
+  });
+
+  test('supports unicode tags', () => {
+    expect(parseChatSpecificTag('телеграм@тест')).toEqual({query: '#телеграм@тест'});
+    expect(parseChatSpecificTag('телеграм@telegram')).toEqual({
+      query: '#телеграм',
+      username: 'telegram'
+    });
+  });
+
+  test('does not treat an invalid username suffix as a chat target', () => {
+    expect(parseChatSpecificTag('tag@invalid_')).toEqual({query: '#tag@invalid_'});
+    expect(parseChatSpecificTag('$TON@valid@extra')).toEqual({query: '$TON@valid@extra'});
+  });
+});

src/tests/parseEntitiesTags.test.ts

@@ -0,0 +1,40 @@
+import {describe, expect, test} from 'vitest';
+import parseEntities from '@lib/richTextProcessor/parseEntities';
+
+describe('parseEntities tags', () => {
+  test('keeps a chat-specific hashtag in one entity', () => {
+    const text = '#test@username';
+
+    expect(parseEntities(text)).toEqual([{
+      _: 'messageEntityHashtag',
+      offset: 0,
+      length: text.length
+    }]);
+  });
+
+  test('keeps a chat-specific cashtag in one entity', () => {
+    const text = '$TON@public_channel';
+
+    expect(parseEntities(text)).toEqual([{
+      _: 'messageEntityCashtag',
+      offset: 0,
+      length: text.length
+    }]);
+  });
+
+  test('keeps an adjacent mention separate when it is not part of the tag', () => {
+    expect(parseEntities('#test @username')).toEqual([{
+      _: 'messageEntityHashtag',
+      offset: 0,
+      length: 5
+    }, {
+      _: 'messageEntityMention',
+      offset: 6,
+      length: 9
+    }]);
+  });
+
+  test('only recognizes uppercase cashtags', () => {
+    expect(parseEntities('$ton@username')).toEqual([]);
+  });
+});

src/tests/searchByTag.test.ts

@@ -0,0 +1,66 @@
+import {describe, expect, test, vi} from 'vitest';
+import searchByTag from '@lib/richTextProcessor/searchByTag';
+
+describe('searchByTag', () => {
+  test('activates a regular tag search synchronously', async() => {
+    const activateSearch = vi.fn();
+    const promise = searchByTag({
+      query: '$TON ',
+      activateSearch,
+      resolveUsername: vi.fn(),
+      openPeer: vi.fn(),
+      isCurrent: () => true,
+      onResolveError: vi.fn()
+    });
+
+    expect(activateSearch).toHaveBeenCalledWith('$TON ');
+    await promise;
+    expect(activateSearch).toHaveBeenCalledTimes(1);
+  });
+
+  test('activates before resolving and reactivates after opening the target peer', async() => {
+    const calls: string[] = [];
+    let finishResolving: (peer: {id: number}) => void;
+    const resolving = new Promise<{id: number}>((resolve) => {
+      finishResolving = resolve;
+    });
+    const promise = searchByTag({
+      query: '#news ',
+      username: 'telegram',
+      activateSearch: (query) => calls.push('activate:' + query),
+      resolveUsername: () => {
+        calls.push('resolve');
+        return resolving;
+      },
+      openPeer: async() => {
+        calls.push('open');
+      },
+      isCurrent: () => true,
+      onResolveError: vi.fn()
+    });
+
+    expect(calls).toEqual(['activate:#news ', 'resolve']);
+    finishResolving({id: 1});
+    await promise;
+    expect(calls).toEqual(['activate:#news ', 'resolve', 'open', 'activate:#news ']);
+  });
+
+  test('does not open a peer for a stale resolution', async() => {
+    let current = true;
+    const openPeer = vi.fn();
+    await searchByTag({
+      query: '#news ',
+      username: 'telegram',
+      activateSearch: vi.fn(),
+      resolveUsername: async() => {
+        current = false;
+        return {id: 1};
+      },
+      openPeer,
+      isCurrent: () => current,
+      onResolveError: vi.fn()
+    });
+
+    expect(openPeer).not.toHaveBeenCalled();
+  });
+});

src/tests/wrapRichTextTags.test.ts

@@ -0,0 +1,46 @@
+import {describe, expect, test, vi} from 'vitest';
+import {MessageEntity} from '@layer';
+import wrapRichText from '@lib/richTextProcessor/wrapRichText';
+
+vi.mock('@lib/apiManagerProxy', () => ({default: {addEventListener: () => {}, getState: () => Promise.resolve({})}}));
+
+vi.hoisted(() => {
+  class IntersectionObserverMock {
+    public observe() {}
+    public unobserve() {}
+    public disconnect() {}
+    public takeRecords(): IntersectionObserverEntry[] { return []; }
+  }
+
+  Object.defineProperty(globalThis, 'IntersectionObserver', {
+    configurable: true,
+    value: IntersectionObserverMock
+  });
+
+  HTMLCanvasElement.prototype.toDataURL = () => 'data:image/png;base64,';
+  Object.defineProperty(globalThis, 'Worker', {configurable: true, writable: true, value: class Worker {}});
+  Object.defineProperty(globalThis, 'CSS', {configurable: true, value: {supports: () => true}});
+});
+
+function wrapTag(text: string, type: 'messageEntityHashtag' | 'messageEntityCashtag') {
+  const entities: MessageEntity[] = [{_: type, offset: 0, length: text.length}];
+  return wrapRichText(text, {entities}).querySelector('a.anchor-hashtag');
+}
+
+describe('wrapRichText tags', () => {
+  test('wraps chat-specific hashtags', () => {
+    const anchor = wrapTag('#news@telegram', 'messageEntityHashtag');
+
+    expect(anchor.textContent).toBe('#news@telegram');
+    expect(anchor.getAttribute('href')).toBe('tg://search_hashtag?hashtag=news%40telegram');
+    expect(anchor.getAttribute('onclick')).toBe('searchByHashtag(this)');
+  });
+
+  test('wraps chat-specific cashtags without losing the dollar prefix', () => {
+    const anchor = wrapTag('$TON@telegram', 'messageEntityCashtag');
+
+    expect(anchor.textContent).toBe('$TON@telegram');
+    expect(anchor.getAttribute('href')).toBe('tg://search_hashtag?hashtag=%24TON%40telegram');
+    expect(anchor.getAttribute('onclick')).toBe('searchByHashtag(this)');
+  });
+});