Inline Bot Tooltip: Fix closing animation (#1313)

src/api/gramjs/methods/bots.ts

@@ -91,7 +91,7 @@ export async function fetchInlineBotResults({
   return {
     isGallery: Boolean(result.gallery),
     help: bot.botPlaceholder,
-    nextOffset: result.nextOffset,
+    nextOffset: getInlineBotResultsNextOffset(bot.username, result.nextOffset),
     switchPm: buildSwitchPm(result.switchPm),
     users: result.users.map(buildApiUser).filter<ApiUser>(Boolean as any),
     results: processInlineBotResult(String(result.queryId), result.results),
@@ -144,6 +144,10 @@ function processInlineBotResult(queryId: string, results: GramJs.TypeBotInlineRe
   });
 }
 
+function getInlineBotResultsNextOffset(username: string, nextOffset?: string) {
+  return username === 'gif' && nextOffset === '0' ? '' : nextOffset;
+}
+
 function addUserToLocalDb(user: GramJs.User) {
   localDb.users[user.id] = user;
 }

src/components/middle/composer/Composer.tsx

@@ -800,6 +800,17 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
         filteredUsers={mentionFilteredUsers}
         usersById={usersById}
       />
+      <InlineBotTooltip
+        isOpen={isInlineBotTooltipOpen}
+        botId={inlineBotId}
+        allowedAttachmentOptions={allowedAttachmentOptions}
+        isGallery={isInlineBotTooltipGallery}
+        inlineBotResults={inlineBotResults}
+        switchPm={inlineBotSwitchPm}
+        onSelectResult={handleInlineBotSelect}
+        loadMore={loadMoreForInlineBot}
+        onClose={closeInlineBotTooltip}
+      />
       <div id="message-compose">
         <div className="svg-appendix" ref={appendixRef} />
         <ComposerEmbeddedMessage />
@@ -917,17 +928,6 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
               onClose={closeBotKeyboard}
             />
           )}
-          <InlineBotTooltip
-            isOpen={isInlineBotTooltipOpen}
-            botId={inlineBotId}
-            allowedAttachmentOptions={allowedAttachmentOptions}
-            isGallery={isInlineBotTooltipGallery}
-            inlineBotResults={inlineBotResults}
-            switchPm={inlineBotSwitchPm}
-            onSelectResult={handleInlineBotSelect}
-            loadMore={loadMoreForInlineBot}
-            onClose={closeInlineBotTooltip}
-          />
           <SymbolMenu
             isOpen={isSymbolMenuOpen}
             allowedAttachmentOptions={allowedAttachmentOptions}

src/components/middle/composer/InlineBotTooltip.tsx

@@ -17,6 +17,7 @@ import useShowTransition from '../../../hooks/useShowTransition';
 import { throttle } from '../../../util/schedulers';
 import { pick } from '../../../util/iteratees';
 import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver';
+import usePrevious from '../../../hooks/usePrevious';
 
 import MediaResult from './inlineResults/MediaResult';
 import ArticleResult from './inlineResults/ArticleResult';
@@ -122,7 +123,18 @@ const InlineBotTooltip: FC<OwnProps & DispatchProps> = ({
     sendBotCommand({ chatId: botId, command: `/start ${switchPm!.startParam}` });
   }, [botId, openChat, sendBotCommand, switchPm]);
 
-  if (!shouldRender || !inlineBotResults || (!inlineBotResults.length && !switchPm)) {
+
+  const prevInlineBotResults = usePrevious(
+    inlineBotResults && inlineBotResults.length
+      ? inlineBotResults
+      : undefined,
+    shouldRender,
+  );
+  const renderedInlineBotResults = inlineBotResults && !inlineBotResults.length
+    ? prevInlineBotResults
+    : inlineBotResults;
+
+  if (!shouldRender || !renderedInlineBotResults || (!renderedInlineBotResults.length && !switchPm)) {
     return undefined;
   }
 
@@ -142,7 +154,7 @@ const InlineBotTooltip: FC<OwnProps & DispatchProps> = ({
   }
 
   function renderContent() {
-    return inlineBotResults!.map((inlineBotResult, index) => {
+    return renderedInlineBotResults!.map((inlineBotResult, index) => {
       switch (inlineBotResult.type) {
         case 'gif':
           return (
@@ -205,7 +217,7 @@ const InlineBotTooltip: FC<OwnProps & DispatchProps> = ({
     <InfiniteScroll
       ref={containerRef}
       className={className}
-      items={inlineBotResults}
+      items={renderedInlineBotResults}
       itemSelector=".chat-item-clickable"
       noFastList
       onLoadMore={handleLoadMore}

src/components/middle/composer/hooks/useInlineBotTooltip.ts

@@ -19,6 +19,7 @@ export default function useInlineBotTooltip(
   const { queryInlineBot, resetInlineBot } = getDispatch();
   const { username, query, canShowHelp } = parseStartWithUsernameString(text);
   const usernameLowered = username.toLowerCase();
+  const prevQuery = usePrevious(query);
   const prevUsername = usePrevious(username);
   const inlineBotData = inlineBots && inlineBots[usernameLowered];
   const {
@@ -30,6 +31,12 @@ export default function useInlineBotTooltip(
     help,
   } = inlineBotData || {};
 
+  useEffect(() => {
+    if (prevQuery !== query) {
+      unmarkIsOpen();
+    }
+  }, [prevQuery, query, unmarkIsOpen]);
+
   useEffect(() => {
     if (isAllowed && usernameLowered && chatId) {
       queryInlineBot({ chatId, username: usernameLowered, query });

src/modules/actions/api/bots.ts

@@ -249,7 +249,7 @@ async function searchInlineBot({
   global = replaceInlineBotSettings(global, username, {
     ...newInlineBotData,
     help: result.help,
-    isGallery: result.isGallery,
+    ...(newResults.length && { isGallery: result.isGallery }),
     ...(result.switchPm && { switchPm: result.switchPm }),
     canLoadMore: result.results.length > 0 && Boolean(result.nextOffset),
     results: newInlineBotData.offset === '' || newInlineBotData.offset === result.nextOffset