feat: webapp botapi 9.0

Author: teidesu

src/components/browser.tsx

@@ -510,8 +510,9 @@ function Browser(props: {
       <div
         class={styles.BrowserBody}
         style={{
-          width: movableState().width + 'px',
-          height: movableState().height - additionalHeight + 'px'
+          'width': movableState().width + 'px',
+          '--browser-width': movableState().width + 'px',
+          'height': movableState().height - additionalHeight + 'px'
         }}
       >
         <For each={state.pages}>{(page) => {
@@ -608,7 +609,6 @@ export async function openWebAppInAppBrowser(options: WebAppLaunchOptions) {
     header: document.createElement('div'),
     title: document.createElement('div'),
     body: document.createElement('div'),
-    footer: document.createElement('div'),
     forceHide: () => setDestroy(true),
     onBackStatus: setNeedBackButton
   });
@@ -631,12 +631,7 @@ export async function openWebAppInAppBrowser(options: WebAppLaunchOptions) {
       menuButtons: webApp.getMenuButtons(),
       dispose,
       isConfirmationNeededOnClose: webApp.isConfirmationNeededOnClose,
-      content: (
-        <>
-          {webApp.body}
-          {webApp.footer}
-        </>
-      ),
+      content: webApp.body,
       get needBackButton() {
         return needBackButton();
       },
@@ -660,6 +655,10 @@ export async function openWebAppInAppBrowser(options: WebAppLaunchOptions) {
     } else {
       openInAppBrowser(initialState);
     }
+
+    createEffect(on(() => lastContext[0].collapsed, (collapsed) => {
+      webApp.notifyVisible(!collapsed);
+    }))
   });
 }
 

src/components/chat/bubbles/bubbleLayout.tsx

@@ -0,0 +1,131 @@
+import {createEffect, createResource, For, JSX, on} from 'solid-js';
+import classNames from '../../../helpers/string/classNames';
+import {MessageEntity, ReplyMarkup} from '../../../layer';
+import {generateTail} from '../bubbles';
+import {I18nTsx} from '../../../helpers/solid/i18n';
+import wrapRichText from '../../../lib/richTextProcessor/wrapRichText';
+import rootScope from '../../../lib/rootScope';
+import wrapKeyboardButton from '../../wrappers/keyboardButton';
+import ripple from '../../ripple';
+
+function ViaUsername(props: { botId: BotId }) {
+  const [resource, ctx] = createResource(async() => {
+    const via = document.createElement('span');
+    via.innerText = '@' + (await rootScope.managers.appPeersManager.getPeerUsername(props.botId.toPeerId()));
+    via.classList.add('peer-title');
+    return via
+  })
+
+  createEffect(on(() => props.botId, () => ctx.refetch()));
+
+  return <>{resource()}</>;
+}
+
+export function BubbleLayout(props: {
+  class?: string
+  contentStyle?: Record<string, string>
+  text?: string
+  textEntities?: MessageEntity[]
+  content?: JSX.Element
+  tail?: boolean
+  out?: boolean
+  justMedia?: boolean
+  group?: 'first' | 'last' | 'single'
+  via?: BotId
+  attachment?: JSX.Element
+  replyMarkup?: ReplyMarkup.replyInlineMarkup
+}) {
+  const renderVia = () => (
+    <span class="is-via">
+      <I18nTsx key="ViaBot" />
+      {' '}
+      <ViaUsername botId={props.via.toPeerId()} />
+    </span>
+  )
+
+  return (
+    <div
+      class={classNames(
+        'bubble',
+        props.tail && 'can-have-tail',
+        props.out && 'is-out',
+        (props.group === 'first' || props.group === 'single') && 'is-group-first',
+        (props.group === 'last' || props.group === 'single') && 'is-group-last',
+        props.via && 'must-have-name',
+        props.justMedia && 'just-media',
+        props.replyMarkup && 'with-reply-markup',
+        props.class
+      )}
+    >
+      <div class="bubble-content-wrapper">
+        <div class="bubble-content" style={props.contentStyle}>
+          {props.justMedia ? (
+            <div class="floating-part name-with-reply" dir="auto">
+              <div class="name">
+                {renderVia()}
+              </div>
+            </div>
+          ) : (
+            <div
+              class={classNames(
+                'name floating-part',
+                !props.attachment && 'next-is-message'
+              )}
+              dir="auto"
+            >
+              {renderVia()}
+            </div>
+          )}
+          {props.attachment}
+          {(props.text || props.content) && (
+            <div class={classNames('message spoilers-container', props.attachment && 'mt-shorter')}>
+              {props.content ?? wrapRichText(props.text, {entities: props.textEntities})}
+            </div>
+          )}
+          {props.tail && generateTail()}
+        </div>
+
+        {props.replyMarkup && (
+          <div class="reply-markup">
+            <For each={props.replyMarkup.rows}>
+              {(row, rowIdx) => {
+                return (
+                  <div class="reply-markup-row">
+                    <For each={row.buttons}>
+                      {(button, btnIdx) => {
+                        const element = () => {
+                          const {buttonEl, text, buttonIcon} = wrapKeyboardButton({
+                            button,
+                            chat: {} as any
+                          });
+
+                          if(rowIdx() === props.replyMarkup.rows.length - 1) {
+                            if(btnIdx() === 0) buttonEl.classList.add('is-first');
+                            if(btnIdx() === row.buttons.length - 1) buttonEl.classList.add('is-last');
+                          }
+
+                          buttonEl.classList.add('reply-markup-button', 'rp');
+
+                          const t = document.createElement('span');
+                          t.classList.add('reply-markup-button-text');
+                          t.append(text);
+
+                          ripple(buttonEl);
+                          buttonEl.append(...[buttonIcon, t]);
+
+                          return buttonEl
+                        }
+
+                        return <>{element()}</>;
+                      }}
+                    </For>
+                  </div>
+                );
+              }}
+            </For>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

src/components/chat/bubbles/fakeBubbles.module.scss

@@ -2,6 +2,9 @@
   position: relative;
   --message-highlighting-color: hsla(85.5319, 36.9171%, 40.402%, .4);
   --message-highlighting-hover-color: rgba(var(--message-highlighting-color-rgb), calc(var(--message-highlighting-alpha) + .24));
+  --message-status-color: var(--secondary-text-color);
+  --message-out-status-color: var(--message-out-primary-color);
+  --message-out-icon-text-color: var(--message-out-background-color);
 
   :global(.bubble-content-wrapper) {
     align-items: center;

src/components/chat/bubbles/fakeBubbles.tsx

@@ -1,18 +1,27 @@
-import {JSX} from 'solid-js';
+import {JSX, onMount} from 'solid-js';
 import {ChatBackground} from './chatBackground';
 import rootScope from '../../../lib/rootScope';
 import themeController from '../../../helpers/themeController';
 
 import classNames from '../../../helpers/string/classNames';
 import styles from './fakeBubbles.module.scss';
+import {subscribeOn} from '../../../helpers/solid/subscribeOn';
 
 export function FakeBubbles(props: {
   children: JSX.Element
   class?: string
+  contentClass?: string
   peerId?: PeerId
 }) {
   let container!: HTMLDivElement;
 
+  onMount(() => {
+    themeController.applyTheme(themeController.getTheme(), container);
+    subscribeOn(rootScope)('theme_changed', () => {
+      themeController.applyTheme(themeController.getTheme(), container);
+    })
+  })
+
   return (
     <div ref={container} class={classNames(styles.root, props.class)}>
       <ChatBackground
@@ -21,7 +30,7 @@ export function FakeBubbles(props: {
         peerId={props.peerId}
         onHighlightColor={hsla => themeController.applyHighlightingColor({hsla, element: container})}
       />
-      <div class={/* @once */ styles.content}>
+      <div class={classNames(styles.content, props.contentClass)}>
         {props.children}
       </div>
     </div>

src/components/peerProfile.ts

@@ -99,6 +99,10 @@ export default class PeerProfile {
   private personalChannel: Row;
   private personalChannelCounter: HTMLSpanElement;
 
+  private botPermissionsSection: SettingSection;
+  private botPermissionsEmojiStatus: Row;
+  private botPermissionsLocation: Row;
+
   private bioLanguage: Promise<TranslatableLanguageISO>;
   private bioText: string;
 
@@ -388,7 +392,47 @@ export default class PeerProfile {
       this.section.content.append(this.notifications.container);
     }
 
-    this.element.append(this.personalChannelSection.container, this.section.container);
+    this.botPermissionsSection = new SettingSection({
+      name: i18n('BotAllowAccessTo'),
+      noDelimiter: true
+    });
+    this.botPermissionsEmojiStatus = new Row({
+      checkboxField: new CheckboxField({toggle: true}),
+      titleLangKey: 'BotAllowAccessToEmojiStatus',
+      icon: 'smile',
+      listenerSetter: this.listenerSetter
+    })
+    this.botPermissionsLocation = new Row({
+      checkboxField: new CheckboxField({toggle: true}),
+      titleLangKey: 'BotAllowAccessToLocation',
+      icon: 'location',
+      listenerSetter: this.listenerSetter
+    })
+
+    listenerSetter.add(this.botPermissionsEmojiStatus.checkboxField.input)('change', (e) => {
+      if(!e.isTrusted) {
+        return;
+      }
+      this.managers.appBotsManager.toggleEmojiStatusPermission(this.peerId, this.botPermissionsEmojiStatus.checkboxField.checked);
+    });
+
+    listenerSetter.add(this.botPermissionsLocation.checkboxField.input)('change', (e) => {
+      if(!e.isTrusted) {
+        return;
+      }
+      this.managers.appBotsManager.writeBotInternalStorage(this.peerId, 'locationPermission', String(this.botPermissionsLocation.checkboxField.checked));
+    });
+
+    this.botPermissionsSection.content.append(
+      this.botPermissionsEmojiStatus.container,
+      this.botPermissionsLocation.container
+    );
+
+    this.element.append(
+      this.personalChannelSection.container,
+      this.section.container,
+      this.botPermissionsSection.container,
+    );
 
     if(IS_PARALLAX_SUPPORTED) {
       this.element.append(generateDelimiter());
@@ -544,7 +588,8 @@ export default class PeerProfile {
       this.link,
       this.businessHours,
       this.businessLocation,
-      this.personalChannelSection
+      this.personalChannelSection,
+      this.botPermissionsSection
     ].forEach((row) => {
       row.container.style.display = 'none';
     });
@@ -1005,6 +1050,21 @@ export default class PeerProfile {
       callbacks.push(await m(this.fillPinnedGifts()));
     }
 
+    if(peerFull._ === 'userFull' && peerFull.bot_info) {
+      const locationPermission = await m(this.managers.appBotsManager.readBotInternalStorage(peerId, 'locationPermission'));
+      if(peerFull.pFlags.bot_can_manage_emoji_status || locationPermission != null) {
+        callbacks.push(() => {
+          this.botPermissionsSection.container.style.display = '';
+
+          this.botPermissionsEmojiStatus.container.style.display = peerFull.pFlags.bot_can_manage_emoji_status ? '' : 'none';
+          this.botPermissionsEmojiStatus.checkboxField.checked = peerFull.pFlags.bot_can_manage_emoji_status;
+
+          this.botPermissionsLocation.container.style.display = locationPermission != null ? '' : 'none';
+          this.botPermissionsLocation.checkboxField.checked = locationPermission === 'true';
+        });
+      }
+    }
+
     return () => {
       callbacks.forEach((callback) => callback?.());
     };

src/components/popups/index.ts

@@ -446,6 +446,11 @@ export default class PopupElement<T extends EventListenerListeners = {}> extends
     this.addEventListener('closeAfterTimeout', dispose as any);
   }
 
+  protected appendSolidBody(callback: () => JSX.Element) {
+    const dispose = render(callback, this.body);
+    this.addEventListener('closeAfterTimeout', dispose as any);
+  }
+
   public static reAppend() {
     this.POPUPS.forEach((popup) => {
       const {element, container} = popup;

src/components/popups/sendGift.tsx

@@ -37,13 +37,13 @@ import maybe2x from '../../helpers/maybe2x';
 import {I18nTsx} from '../../helpers/solid/i18n';
 import {StarGiftBadge} from '../stargifts/stargiftBadge';
 import Scrollable from '../scrollable2';
-import {PeerTitleTsx} from '../wrappers/peerTitle';
 import {approxEquals} from '../../helpers/number/approxEquals';
 import getVisibleRect from '../../helpers/dom/getVisibleRect';
 import fastSmoothScroll from '../../helpers/fastSmoothScroll';
 import {useAppState} from '../../stores/appState';
 import PopupStarGiftUpgrade from './starGiftUpgrade';
 import anchorCallback from '../../helpers/dom/anchorCallback';
+import {PeerTitleTsx} from '../peerTitleTsx';
 
 type GiftOption = MyStarGift | MyPremiumGiftOption;
 

src/components/popups/starReaction.tsx

@@ -6,7 +6,7 @@
 
 import PopupElement from '.';
 import I18n, {i18n} from '../../lib/langPack';
-import wrapPeerTitle, {PeerTitleTsx} from '../wrappers/peerTitle';
+import wrapPeerTitle from '../wrappers/peerTitle';
 import {StarsBalance} from './stars';
 import {Accessor, createEffect, createMemo, createSignal, For, on, onCleanup, onMount, Show} from 'solid-js';
 import {easeOutCircApply} from '../../helpers/easing/easeOutCirc';
@@ -36,6 +36,7 @@ import {SEND_PAID_REACTION_ANONYMOUS_PEER_ID} from '../../lib/mtproto/mtproto_co
 import type Chat from '../chat/chat';
 import {PENDING_PAID_REACTIONS} from '../chat/reactions';
 import findAndSplice from '../../helpers/array/findAndSplice';
+import {PeerTitleTsx} from '../peerTitleTsx';
 
 export default class PopupStarReaction extends PopupElement {
   constructor(private peerId: PeerId, private mid: number, private chat: Chat) {

src/components/popups/webApp.ts

@@ -6,6 +6,7 @@
 
 import PopupElement from '.';
 import safeAssign from '../../helpers/object/safeAssign';
+import {fastRaf} from '../../helpers/schedulers';
 import {AttachMenuBot} from '../../layer';
 import ButtonMenuToggle from '../buttonMenuToggle';
 import WebApp from '../webApp';
@@ -22,7 +23,6 @@ export default class PopupWebApp extends PopupElement {
       closable: true,
       overlayClosable: true,
       body: true,
-      footer: true,
       title: true,
       onBackClick: () => this.webApp.onBackClick(),
       isConfirmationNeededOnClose: () => this.webApp.isConfirmationNeededOnClose()
@@ -35,7 +35,6 @@ export default class PopupWebApp extends PopupElement {
       header: this.header,
       title: this.title,
       body: this.body,
-      footer: this.footer,
       forceHide: this.forceHide,
       onBackStatus: (visible) => this.btnCloseAnimatedIcon.classList.toggle('state-back', visible)
     });
@@ -49,6 +48,9 @@ export default class PopupWebApp extends PopupElement {
 
     this.webApp.init(() => {
       this.show();
+      fastRaf(() => {
+        this.container.style.setProperty('--browser-width', `${this.container.clientWidth}px`);
+      })
     });
   }