Bot: Fix hover logic for bot keyboard menu (#6915)

src/components/common/Composer.tsx

@@ -2457,16 +2457,26 @@ const Composer = ({
                       />
                     )}
                     {Boolean(botKeyboardMessageId) && !activeVoiceRecording && !editingMessage && (
-                      <ResponsiveHoverButton
+                      <>
-                        className={buildClassName('composer-action-button', isBotKeyboardOpen && 'activated')}
+                        <ResponsiveHoverButton
-                        round
+                          className={buildClassName('composer-action-button', isBotKeyboardOpen && 'activated')}
-                        color="translucent"
+                          round
-                        noClickActivation
+                          color="translucent"
-                        onActivate={openBotKeyboard}
+                          noClickActivation
-                        ariaLabel={lang('AriaComposerBotKeyboard')}
+                          onActivate={openBotKeyboard}
-                      >
+                          ariaLabel={lang('AriaComposerBotKeyboard')}
-                        <Icon name="bot-command" />
+                        >
-                      </ResponsiveHoverButton>
+                          <Icon name="bot-command" />
+                        </ResponsiveHoverButton>
+                        {!isMobile && (
+                          <BotKeyboardMenu
+                            messageId={botKeyboardMessageId}
+                            threadId={threadId}
+                            isOpen={isBotKeyboardOpen}
+                            onClose={closeBotKeyboard}
+                          />
+                        )}
+                      </>
                     )}
                   </>
                 )}
@@ -2508,7 +2518,7 @@ const Composer = ({
               paidMessagesStars={paidMessagesStars}
             />
           )}
-          {isInMessageList && Boolean(botKeyboardMessageId) && (
+          {isMobile && isInMessageList && Boolean(botKeyboardMessageId) && (
             <BotKeyboardMenu
               messageId={botKeyboardMessageId}
               threadId={threadId}

src/components/middle/composer/BotKeyboardMenu.module.scss

@@ -2,9 +2,32 @@
 
 .root {
   :global(.bubble) {
-    width: 100% !important;
+    width: calc(100vw - 4rem) !important;
     max-width: 27rem;
     border-radius: var(--border-radius-default-small);
+
+    @media (max-width: 600px) {
+      width: calc(100vw - 3rem) !important;
+    }
+  }
+
+  :global(body.is-touch-env) & {
+    :global(.bubble) {
+      width: 100% !important;
+    }
+  }
+
+  :global(.is-pointer-env) & {
+    > :global(.backdrop) {
+      position: absolute;
+      top: -0.5rem;
+      right: 0;
+      bottom: auto;
+      left: auto;
+
+      width: 3.5rem;
+      height: 4.5rem;
+    }
   }
 }
 

src/components/middle/composer/BotKeyboardMenu.tsx

@@ -1,5 +1,5 @@
 import type { TeactNode } from '../../../lib/teact/teact';
-import { memo, useMemo } from '../../../lib/teact/teact';
+import { memo, useEffect, useMemo } from '../../../lib/teact/teact';
 import { getActions, withGlobal } from '../../../global';
 
 import type { ApiMessage } from '../../../api/types';
@@ -39,9 +39,15 @@ const BotKeyboardMenu = ({
 
   const lang = useLang();
 
-  const [handleMouseEnter, handleMouseLeave] = useMouseInside(isOpen, onClose);
+  const [handleMouseEnter, handleMouseLeave, markMouseInside] = useMouseInside(isOpen, onClose);
   const { isKeyboardSingleUse } = message || {};
 
+  useEffect(() => {
+    if (isOpen) {
+      markMouseInside();
+    }
+  }, [isOpen, markMouseInside]);
+
   const buttonTexts = useMemo(() => {
     const texts: TeactNode[][] = [];
     message?.keyboardButtons!.forEach((row) => {