Chat: a bot's keyboard fills its height unless it asks to fit its rows, says its placeholder in the field, shows a selective one to whom it is for, and is answered in a group as a reply

Four things the official clients do with a bot's reply keyboard that tweb did not, and a bug of the tab's mirror
found on the way.

- Height: a keyboard that does not ask to be sized by its rows (no `resize`, most bots') is as tall as it may be -
  the same 15rem, less on a short screen - its rows sharing that height and its buttons filling their row
  (`.is-stretched`; desktop's `_maximizeSize`, iOS and Android make it the device keyboard's height). Rows that need
  more are their own height and scroll as before; one with `resize` is sized by its rows as before.
- Placeholder: the markup's `placeholder` (a keyboard's or a force reply's) stands in the empty field instead of its
  own words while the keyboard is open, or while the field answers the message that brought it (Android's rule).
  The field's own wait under it in the IntlElement (`ChatInput.updateKeyboardPlaceholder`), and come back once it
  goes or a language is applied over it. Not while a message is edited, and not where the field says more than that
  it asks for a message (`yieldsToKeyboard`): it cannot send, a welcome template, an instruction, a story reply, or a
  paid message's price, which is said before it is sent (Android). The bot's words go in their own direction.
- Selective: a markup that is `selective` applies to those its message is `mentioned` for - mentioned, or the
  author of the message it answers (desktop's `mentionsMe`, Android's). Before, every one was dropped.
- A button pressed in a group sends its text as a reply to the keyboard's message, as desktop and Android do: a bot
  in privacy mode is told only of what is meant for it. The field's own reply stays for the next message; a private
  chat and an ephemeral keyboard are as they were.
- The tab's mirror of a history storage (`apiManagerProxy`) wrote the worker's value with a store setter, which merges
  an object into the one there: a force reply after a keyboard kept the keyboard's rows and opened as that keyboard,
  and a keyboard with no placeholder kept the one before's. An object now takes the place of the one there.
- Tests: the keyboard spec checks the stretched rows, the placeholder of a keyboard and of a force reply, and a
  markup handed over by the mirror in place of another; its helper writes `resize` by default and replaces the
  markup as the mirror now does. Unit tests for selective markups and the press in a group.

Left out on purpose: iOS closing the keyboard on a tap in the history (Android and desktop do not), and iOS putting
the reply into the field as a group's keyboard comes (desktop's reply on the press instead).

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

Author: morethanwords

e2e/replyKeyboardApp.spec.ts

@@ -370,25 +370,8 @@ test.describe('the bot keyboard under the field', () => {
 
   test('a keyboard that comes as the chat opens does not open over the draft on its way back', async({page}) => {
     // * the chat opened again with a saved draft, which the worker answers late; nothing is saved or sent
-    await page.evaluate(() => {
-      const w = window as any;
-      const proxy = w.apiManagerProxy;
-      const invoke = proxy.invoke.bind(proxy);
-      proxy.invoke = (type: string, payload: any, ack: boolean, ...rest: any[]) => {
-        if(type === 'manager' && /^(send|saveDraft|setDraft|clearDraft|syncDraft|read)/.test(payload.method)) {
-          return ack ? {cached: true, result: Promise.resolve()} : Promise.resolve();
-        }
-
-        if(type === 'manager' && payload.method === 'getDraft') {
-          const draft = {_: 'draftMessage', pFlags: {}, message: 'A saved draft', date: Math.floor(Date.now() / 1000)};
-          const result = new Promise((resolve) => setTimeout(() => resolve(draft), 300));
-          return ack ? {cached: false, result} : result;
-        }
-
-        return invoke(type, payload, ack, ...rest);
-      };
-      w.appImManager.setPeer({peerId: 0});
-    });
+    await holdWrites(page, 'A saved draft');
+    await page.evaluate(() => (window as any).appImManager.setPeer({peerId: 0}));
     await page.waitForTimeout(500);
     await page.evaluate(() => {
       const w = window as any;
@@ -602,6 +585,110 @@ test.describe('the bot keyboard under the field', () => {
     expect(opened.scroll.clientHeight - grown.scroll.clientHeight).toBeCloseTo(48, 0);
   });
 
+  test('one that does not ask to fit its rows is as tall as it may be, its rows sharing that height', async({page}) => {
+    const rows = () => page.evaluate(() => Array.from(document.querySelectorAll('.reply-keyboard .reply-markup-row'), (row) => {
+      const {top, bottom, height} = row.getBoundingClientRect();
+      return {top, bottom, height, button: row.firstElementChild.getBoundingClientRect().height};
+    }));
+    const rem = await page.evaluate(() => parseFloat(getComputedStyle(document.documentElement).fontSize));
+    await setKeyboard(page, 3);
+    const closed = await measure(page);
+    await page.locator('.chat-input-main .toggle-reply-markup').click();
+    await settled(page);
+    const [fitted] = await rows();
+
+    await setKeyboard(page, 3, {stretched: true, comes: true});
+    const opened = await settled(page);
+    expect(opened.scroll.clientHeight).toBeCloseTo(15 * rem, 0);
+    expect(opened.scroll.scrollHeight).toBe(opened.scroll.clientHeight);
+    expect(opened.keyboard.height).toBeCloseTo(15.375 * rem, 0);
+    // * the field and the history standing on it all the way
+    expect(closed.field.bottom - opened.field.bottom).toBeCloseTo(opened.keyboard.height, 0);
+    expect(opened.paddingBottom - closed.paddingBottom).toBeCloseTo(opened.keyboard.height, 0);
+    // * rows of one height, from its top to its bottom, as far apart as ever, their buttons as tall as they are
+    const stretched = await rows();
+    expect(stretched[0].height).toBeCloseTo((15 - 2 * .25) * rem / 3, 0);
+    for(const row of stretched) {
+      expect(row.height).toBeCloseTo(stretched[0].height, 0);
+      expect(row.button).toBeCloseTo(row.height, 0);
+    }
+    expect(stretched[0].top - opened.field.bottom).toBeCloseTo(.375 * rem, 0);
+    expect(stretched[2].bottom).toBeCloseTo(opened.keyboard.bottom, 0);
+    expect(stretched[1].top - stretched[0].bottom).toBeCloseTo(.25 * rem, 0);
+
+    // * more of them than fit: as tall as they are, scrolled
+    await setKeyboard(page, 12, {stretched: true, comes: true});
+    const scrolled = await settled(page);
+    expect(scrolled.scroll.clientHeight).toBeCloseTo(15 * rem, 0);
+    expect(scrolled.scroll.scrollHeight).toBeGreaterThan(scrolled.scroll.clientHeight);
+    expect((await rows())[0].height).toBeCloseTo(fitted.height, 0);
+  });
+
+  test('the field says what the keyboard asks it to while it is open, and what a force reply does while it answers it', async({page}) => {
+    await holdWrites(page);
+    const placeholder = () => page.evaluate(() => {
+      const element = (window as any).appImManager.chat.input.messageInputField.placeholder as HTMLElement;
+      return {text: element.textContent, dir: element.querySelector('[dir]')?.getAttribute('dir')};
+    });
+    const own = await placeholder();
+    expect(own.text).toBeTruthy();
+
+    await setKeyboard(page, 2, {placeholder: 'Pick a city'});
+    expect(await placeholder()).toEqual(own);
+    await page.locator('.chat-input-main .toggle-reply-markup').click();
+    await settled(page);
+    // * in the direction of the bot's words
+    expect(await placeholder()).toEqual({text: 'Pick a city', dir: 'auto'});
+    await page.keyboard.press('Escape');
+    await settled(page);
+    expect(await placeholder()).toEqual(own);
+
+    // * a force reply: the field answers its message, in its words, until that answer is dropped
+    const mid = await page.evaluate(() => {
+      const chat = (window as any).appImManager.chat;
+      const mid = Math.max(...Array.from(document.querySelectorAll<HTMLElement>('.bubbles-inner .bubble[data-mid]'), (bubble) => +bubble.dataset.mid));
+      const [, setStore] = Object.values((window as any).historyStorages).find(([candidate]: any) => candidate === chat.historyStorage) as [any, (key: string, value: any) => void];
+      setStore('replyMarkup', undefined);
+      setStore('replyMarkup', {_: 'replyKeyboardForceReply', pFlags: {}, mid, fromId: chat.peerId, placeholder: 'Your name'});
+      (window as any).rootScope.dispatchEventSingle('history_reply_markup', {peerId: chat.peerId});
+      return mid;
+    });
+    await expect.poll(placeholder).toEqual({text: 'Your name', dir: 'auto'});
+    expect(await page.evaluate(() => (window as any).appImManager.chat.input.replyToMsgId)).toBe(mid);
+    await page.evaluate(() => (window as any).appImManager.chat.input.clearHelper());
+    await expect.poll(placeholder).toEqual(own);
+  });
+
+  test('a markup the worker puts in place of another keeps nothing of the one before', async({page}) => {
+    await holdWrites(page);
+    // * as the worker's mirror hands the history's markup over to the tab
+    const mirror = (markup: any) => page.evaluate((markup) => {
+      const w = window as any;
+      const chat = w.appImManager.chat;
+      w.apiManagerProxy.processMirrorTaskMap.historyStorage({
+        key: [chat.historyStorage.key, 'replyMarkup'].join('\x01'),
+        value: {...markup, fromId: chat.peerId}
+      });
+      w.rootScope.dispatchEventSingle('history_reply_markup', {peerId: chat.peerId});
+    }, markup);
+    const placeholder = () => page.evaluate(() => (window as any).appImManager.chat.input.messageInputField.placeholder.textContent);
+    const own = await placeholder();
+    const rows = [{_: 'keyboardButtonRow', buttons: [{_: 'keyboardButton', text: 'Menu', type: {_: 'buttonTypeDefault'}}]}];
+
+    await mirror({_: 'replyKeyboardMarkup', pFlags: {resize: true}, mid: 1101, placeholder: 'Pick a city', rows});
+    expect((await settled(page)).active).toBe(true);
+    expect(await placeholder()).toBe('Pick a city');
+    // * another, with no words of its own: the field's
+    await mirror({_: 'replyKeyboardMarkup', pFlags: {resize: true}, mid: 1102, rows});
+    expect((await settled(page)).active).toBe(true);
+    expect(await placeholder()).toBe(own);
+    // * a force reply after it: no rows left of the keyboard to show
+    const mid = await page.evaluate(() => Math.max(...Array.from(document.querySelectorAll<HTMLElement>('.bubbles-inner .bubble[data-mid]'), (bubble) => +bubble.dataset.mid)));
+    await mirror({_: 'replyKeyboardForceReply', pFlags: {}, mid});
+    expect((await settled(page)).active).toBe(false);
+    await expect(page.locator('.chat-input-main .toggle-reply-markup')).toHaveClass(/\bhide\b/);
+  });
+
   test('scrolls past 15rem', async({page}) => {
     await setKeyboard(page, 12);
     await page.locator('.chat-input-main .toggle-reply-markup').click();
@@ -642,6 +729,10 @@ async function openSavedMessages(page: Page, query = '') {
 
 type KeyboardOptions = {
   singleUse?: boolean,
+  // * not asking to fit its rows (`resize`), as most bots' are
+  stretched?: boolean,
+  // * what it asks the empty field to say
+  placeholder?: string,
   // * a single-use one answered already
   hidden?: boolean,
   // * the message that brought it
@@ -653,7 +744,7 @@ type KeyboardOptions = {
 // * the keyboard a bot's last message would have left in the chat, `rows` rows of it (none: what there was, and the
 // * user's closing of it forgotten)
 async function setKeyboard(page: Page, rows: number, options: KeyboardOptions = {}) {
-  await page.evaluate(async([rows, {singleUse, hidden, mid = 1, comes}]) => {
+  await page.evaluate(async([rows, {singleUse, stretched, placeholder, hidden, mid = 1, comes}]) => {
     const chat = (window as any).appImManager.chat;
     // * the store and its setter, the app's own (`historyStorages`)
     const [, setStore] = Object.values((window as any).historyStorages).find(([candidate]: any) => candidate === chat.historyStorage) as [any, (key: string, value: any) => void];
@@ -668,9 +759,12 @@ async function setKeyboard(page: Page, rows: number, options: KeyboardOptions =
     }
 
     const button = (text: string) => ({_: 'keyboardButton', text, type: {_: 'buttonTypeDefault'}});
+    // * in place of the one there was, as the worker's mirror puts it (a store would merge the two)
+    setStore('replyMarkup', undefined);
     setStore('replyMarkup', {
       _: 'replyKeyboardMarkup',
-      pFlags: {...(singleUse && {single_use: true}), ...(hidden && {hidden: true})},
+      pFlags: {...(!stretched && {resize: true}), ...(singleUse && {single_use: true}), ...(hidden && {hidden: true})},
+      placeholder,
       mid,
       fromId: chat.peerId,
       rows: Array.from({length: rows}, (_, i) => ({
@@ -686,6 +780,28 @@ async function setKeyboard(page: Page, rows: number, options: KeyboardOptions =
   }, [rows, options] as const);
 }
 
+// * nothing of the chat is saved or sent from this tab - a draft, a read mark, a message - and a draft asked for is
+// * `draft`, answered late, if there is one
+async function holdWrites(page: Page, draft?: string) {
+  await page.evaluate((draft) => {
+    const proxy = (window as any).apiManagerProxy;
+    const invoke = proxy.invoke.bind(proxy);
+    proxy.invoke = (type: string, payload: any, ack: boolean, ...rest: any[]) => {
+      if(type === 'manager' && /^(send|saveDraft|setDraft|clearDraft|syncDraft|read)/.test(payload.method)) {
+        return ack ? {cached: true, result: Promise.resolve()} : Promise.resolve();
+      }
+
+      if(draft !== undefined && type === 'manager' && payload.method === 'getDraft') {
+        const message = {_: 'draftMessage', pFlags: {}, message: draft, date: Math.floor(Date.now() / 1000)};
+        const result = new Promise((resolve) => setTimeout(() => resolve(message), 300));
+        return ack ? {cached: false, result} : result;
+      }
+
+      return invoke(type, payload, ack, ...rest);
+    };
+  }, draft);
+}
+
 // * the same twice over, and nothing of the field or the history moving: a way that has not started yet (a busy machine
 // * holds its first frame) measures the same too
 async function settled(page: Page) {

src/components/chat/input.ts

@@ -641,6 +641,10 @@ export default class ChatInput {
   public suggestedPost: SuggestedPostPayload;
   private inputHelperNavigationItem: NavigationItem;
   private placeholderParamsMiddlewareHelper: MiddlewareHelper;
+  // * what the field says while empty (`getPlaceholderParams`), and a bot keyboard's words said instead
+  private placeholderParams: Parameters<ChatInput['updateMessageInputPlaceholder']>[0];
+  private keyboardPlaceholder: string;
+  private keyboardPlaceholderElement: HTMLElement;
 
   private savedReplyToPollOption?: {
     msgId: number;
@@ -1164,10 +1168,16 @@ export default class ChatInput {
       const element = this.emoticonsDropdown?.getElement();
       if(element?.classList.contains('is-under') && this.emoticonsDropdown.chatInput === this) element.style.display = 'none';
       this.updateReplyMarkupToggle();
+      this.updateKeyboardPlaceholder();
     });
     this.listenerSetter.add(this.replyKeyboard)('close', () => {
       this.btnToggleReplyMarkup.classList.remove('active');
       this.updateReplyMarkupToggle();
+      this.updateKeyboardPlaceholder();
+    });
+    // * a language applied over the bot's words puts the field's own back: the bot's go there again
+    this.listenerSetter.add(rootScope)('language_apply', () => {
+      if(this.keyboardPlaceholder) this.updateKeyboardPlaceholder();
     });
   }
 
@@ -3480,17 +3490,23 @@ export default class ChatInput {
     canSend ??= await this.chat.canSend('send_plain');
     const {peerId, threadId, isForum, type} = this.chat;
     let key: LangPackKey, args: FormatterArguments, inputStarsCountEl: HTMLElement;
+    // * where the field only asks for a message, a bot's keyboard may ask in its words (`updateKeyboardPlaceholder`) - not
+    // * over what it cannot take, what it is for instead (a template, a thread to choose) or what a message costs, which
+    // * is said before it is sent (Android)
+    let yieldsToKeyboard = false;
     if(!canSend) {
       key = 'Channel.Persmission.MessageBlock';
     } else if(type === ChatType.Welcome) {
       key = 'WelcomeMessages.Placeholder';
     } else if(threadId && !isForum && !peerId.isUser()) {
       key = 'Comment';
+      yieldsToKeyboard = true;
     } else if(
       (peerState ? peerState.isBroadcast : await this.managers.appPeersManager.isBroadcast(peerId)) ||
       (peerState ? peerState.isBroadcastGroup : await this.managers.appPeersManager.isBroadcastGroup(peerId))
     ) {
       key = 'ChannelBroadcast';
+      yieldsToKeyboard = true;
     } else if(this.chat.isMonoforum && this.chat.canManageDirectMessages) {
       key = this.inputState.store.isSuggestingUneditablePostChange ?
         'ChannelDirectMessages.CantChangeSuggestedPostMessage' :
@@ -3504,6 +3520,7 @@ export default class ChatInput {
       (peerState ? peerState.isAnonymousSending : await this.managers.appMessagesManager.isAnonymousSending(peerId))
     ) {
       key = 'SendAnonymously';
+      yieldsToKeyboard = true;
     } else if(type === ChatType.Stories && !this.chat.starsAmount) {
       // * a reply that costs Stars shows its price below instead, over the stealth mode countdown too:
       // * as Android has it, what a message costs is said before it is sent
@@ -3525,6 +3542,8 @@ export default class ChatInput {
       } else {
         key = 'Message';
       }
+
+      yieldsToKeyboard = true;
     } else if(this.chat.starsAmount) {
       key = 'PaidMessages.MessageForStars';
       const starsElement = document.createElement('span');
@@ -3534,19 +3553,17 @@ export default class ChatInput {
       args = [starsElement];
     } else {
       key = 'Message';
+      yieldsToKeyboard = true;
     }
 
-    return {key, args, inputStarsCountEl};
+    return {key, args, inputStarsCountEl, yieldsToKeyboard};
   }
 
-  public updateMessageInputPlaceholder({
-    key,
-    args = [],
-    inputStarsCountEl
-  }: {
+  public updateMessageInputPlaceholder(params: {
     key: LangPackKey,
     args?: FormatterArguments,
-    inputStarsCountEl?: HTMLElement
+    inputStarsCountEl?: HTMLElement,
+    yieldsToKeyboard?: boolean
   }) {
     // console.warn('[input] update placeholder');
     // const i = I18n.weakMap.get(this.messageInput) as I18n.IntlElement;
@@ -3557,12 +3574,47 @@ export default class ChatInput {
 
     const oldKey = i.key;
     const oldArgs = i.args;
-    i.compareAndUpdateBool({key, args}) &&
-    this.inputState.set({inputStarsCountEl});
+    this.placeholderParams = params;
+    this.updateKeyboardPlaceholder();
 
     return {oldKey, oldArgs};
   }
 
+  /**
+   * The field's placeholder: its own words, or a bot's keyboard's while they apply (`ReplyKeyboard.getPlaceholder`),
+   * as desktop and Android have them - not while a message is edited, nor where the field says more than that it asks
+   * for a message (`yieldsToKeyboard`). The field's own wait under the bot's as the placeholder's, put back once they go
+   */
+  public updateKeyboardPlaceholder() {
+    const element = this.messageInputField?.placeholder;
+    const i = element && I18n.weakMap.get(element) as I18n.IntlElement;
+    const params = this.placeholderParams;
+    if(!i || !params) {
+      return;
+    }
+
+    const {key, args = [], inputStarsCountEl, yieldsToKeyboard} = params;
+    const text = yieldsToKeyboard && !this.editMsgId ?
+      this.replyKeyboard?.getPlaceholder(this.replyToMsgId) :
+      undefined;
+    if(text) {
+      i.key = key;
+      i.args = args;
+      const span = this.keyboardPlaceholderElement ??= document.createElement('span');
+      // * the bot's words, in their own direction
+      span.dir = 'auto';
+      if(text !== this.keyboardPlaceholder) span.replaceChildren(wrapEmojiText(text));
+      if(span.parentElement !== element) element.replaceChildren(span);
+    } else if(this.keyboardPlaceholder) {
+      i.update({key, args});
+    } else if(!i.compareAndUpdateBool({key, args})) {
+      return;
+    }
+
+    this.keyboardPlaceholder = text;
+    this.inputState.set({inputStarsCountEl});
+  }
+
   private filterAttachMenuButtons() {
     if(!this.attachMenuButtons) return;
     return filterAsync(this.attachMenuButtons, (button) => {
@@ -5706,6 +5758,7 @@ export default class ChatInput {
         }
         this.editMsgId = mid;
         this.editMessage = message;
+        this.updateKeyboardPlaceholder();
         input = undefined;
         richMessage = undefined;
         // the limit plate steps aside for editing what is already there
@@ -6092,6 +6145,7 @@ export default class ChatInput {
       this.replyIsEphemeral = false;
     }
     this.updateEphemeralComposer();
+    this.updateKeyboardPlaceholder();
     this.center(true);
   }
 
@@ -6130,6 +6184,7 @@ export default class ChatInput {
 
     this.editMsgId = this.editMessage = undefined;
     this.helperType = this.helperFunc = undefined;
+    this.updateKeyboardPlaceholder();
     if(this.welcomeLimitReached) void this.center(true);
     this.setCurrentHover();
     this.saveDraftDebounced();