Attach a webapp or url or image into answerInlineQuery doesn't work: BUTTON_TYPE_INVALID

[chillbert]

Node verison: v20.10.0
telegraf: "^4.15.3"

I try to response (or make the user himself send a message) after the user calls the bot inline and makes a query and selects an article.
I assume to be able to send a webapp button (or url):

bot.on("inline_query", async (ctx) => {
  const results = [
    {
      type: "article",
      id: "1",
      title: "Book a Slot",
      input_message_content: {
        message_text: "Click on 'Open Web App' to book a slot!",
      },
    },
  ];

  try {
    await ctx.answerInlineQuery(results);
  } catch (error) {
    console.error("Error responding to inline query:", error);
  }
});

// This handler will be triggered when the user sends the selected inline query result to the chat.
bot.on("message", async (ctx) => {
  // Check if the message matches the one we expect
  if (ctx.message.text === "Book your slot:") {
    // Send a message with the Web App button
    await ctx.reply("Click the button below to open the Web App:", {
      reply_markup: {
        inline_keyboard: [
          [
            {
              text: "Open Web App", // The text of the button
              web_app: { url: "https://t.me/xxx/shortAppName" }, // The URL of your Web App
            },
          ],
        ],
      },
    });
  }
});

no inline_keyboard button visible.

same with this:

  const results = [
    {
      type: "article",
      id: "1",
      title: "Book a Slot",
      input_message_content: {
        message_text: "👉 Tap to book a slot via the Web App!",
      },
      reply_markup: {
        inline_keyboard: [
          [
            {
              text: "Book a Slot", // Button text
              web_app: { url: "https://t.me/xxx/shortAppName?id=32" }, // Your Web App URL
            },
          ],
        ],
      },
      // Optionally, if you have a URL you want to display directly in the message:
      url: "https://t.me/xxx/shortAppName?id=32",
      hide_url: true, // Set to true if you want to hide the URL in the message
      description: "Tap the button to book a slot via the Web App!",
      // You can also include a thumbnail image if you have one:
      thumbnail_url: "https://placekitten.com/100/100",
      thumbnail_width: 100,
      thumbnail_height: 100,
    },
    // ... other inline query results if needed ...
  ];

Or this:

bot.on('inline_query', async (ctx) => {
    const results = [
        {
            type: 'article',
            id: '1',
            title: 'Open Web App',
            input_message_content: {
                message_text: 'Click the button below to open the web app:'
            },
            reply_markup: {
                inline_keyboard: [
                    [{
                        text: 'Open Web App',
                        web_app: { url: 'https://t.me/xxx/shortAppName' }
                    }]
                ]
            }
        }
    ];

    try {
        await ctx.answerInlineQuery(results);
    } catch (error) {
        console.error('Error responding to inline query:', error);
    }
});

this gives me the following error:

Error responding to inline query: TelegramError: 400: Bad Request: BUTTON_TYPE_INVALID
    at Telegram.callApi (/home/runner/TONAdorableDarkseagreenMapping/node_modules/telegraf/lib/core/network/client.js:302:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///home/runner/TONAdorableDarkseagreenMapping/index.js:31:5
    at async execute (/home/runner/TONAdorableDarkseagreenMapping/node_modules/telegraf/lib/composer.js:501:17)
    at async /home/runner/TONAdorableDarkseagreenMapping/node_modules/telegraf/lib/composer.js:502:21
    at async execute (/home/runner/TONAdorableDarkseagreenMapping/node_modules/telegraf/lib/composer.js:501:17)
    at async /home/runner/TONAdorableDarkseagreenMapping/node_modules/p-timeout/index.js:50:13 {
  response: {
    ok: false,
    error_code: 400,
    description: 'Bad Request: BUTTON_TYPE_INVALID'
  },
  on: {
    method: 'answerInlineQuery',
    payload: { inline_query_id: '114575293936607688', results: [Array] }
  }
}

[MKRhere]

The last two option looks fine. You have to use the real URL of your web app, and not the t.me URL.