LINEのMessage APIには、回答を生成するまでの間に表示できるローディングアニメーションをよびだすAPIがあります。このAPIを呼び出す処理が、Node.jsのSDKになさそうでしたので、自前で実装してみました。

秒数を型でしばっておく

TypeScriptを使う場合は、次のような型を用意しておくと良さそうです。というのも指定できる秒数は決まっているためです。意図しない数字が入らないようにする仕組みとして使えます。

/**
 * タイピング表示の秒数として有効な値
 */
export type LoadingSeconds = 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60;

Fetchで直接APIを呼び出す

SDKに処理がないので、Fetchで直接よびだしましょう。とはいえチャンネルのアクセストークンやIDと、秒数の3つをリクエストヘッダーやBodyに入れるだけですので、そこまで複雑なものではありません。

  const url = 'https://api.line.me/v2/bot/chat/loading/start';
  const headers = {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${channelAccessToken}`
  };
  const data = {
    chatId,
    loadingSeconds
  };

  const res = await fetch(url, {
    method: 'POST',
    headers,
    body: JSON.stringify(data)
  });

関数にするなら、こんな感じ？

ということで、ざっくり仕上げたのがこちらです。

/**
 * タイピング表示の秒数として有効な値
 */
export type LoadingSeconds = 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60;


/**
 * タイピング表示を開始する
 * @param channelAccessToken チャンネルアクセストークン
 * @param chatId Chat ID
 * @param loadingSeconds タイピング表示を表示する秒数（有効値: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60）
 */
async function startChatLoading(channelAccessToken: string, chatId: string, loadingSeconds: LoadingSeconds): Promise<any> {
  const url = 'https://api.line.me/v2/bot/chat/loading/start';
  const headers = {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${channelAccessToken}`
  };
  const data = {
    chatId,
    loadingSeconds
  };

  const res = await fetch(url, {
    method: 'POST',
    headers,
    body: JSON.stringify(data)
  });

  if (!res.ok) {
    throw new Error(`Failed to start chat loading: ${res.status} ${res.statusText}`);
  }

  return res.json();
}

これを次のような形でよびだしてやりましょう。

startChatLoading(event.source.userId, 10);

実際にはevent.sourceのuserId / groupId / roomIdの判定がいるかもしれません。このあたりについても、ヘルパー関数などがあると良さそうとは思います。

Document

• https://developers.line.biz/ja/docs/messaging-api/use-loading-indicator/#display-a-loading-animation