feat: live refresh typing status

src/hooks/useTelegramBridge.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import type { AppStateStore } from '../state/AppState.js'
 import { telegramService } from '../services/telegram/TelegramService.js'
 import {
@@ -44,6 +44,8 @@ type ActiveTelegramTurn = {
   responseParts: string[]
 }
 
+const TELEGRAM_TYPING_REFRESH_MS = 4000
+
 function stripXmlTags(text: string): string {
   return text.replace(/<[^>]+>/g, '').trim()
 }
@@ -54,6 +56,55 @@ export function useTelegramBridge({ messages, isLoading, store }: Props): void {
   const lastProcessedMessageCountRef = useRef(messages.length)
   const previousLoadingRef = useRef(isLoading)
   const autoStartAttemptedRef = useRef(false)
+  const typingIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const typingChatIdRef = useRef<string | null>(null)
+
+  const stopTypingKeepAlive = useCallback(() => {
+    if (typingIntervalRef.current) {
+      clearInterval(typingIntervalRef.current)
+      typingIntervalRef.current = null
+    }
+    typingChatIdRef.current = null
+  }, [])
+
+  const sendTyping = useCallback(
+    (chatId: string) => {
+      void telegramService.sendChatAction(chatId, 'typing').catch(error => {
+        logTelegramDebug(
+          `[telegram] failed to send typing action: ${
+            error instanceof Error ? error.message : String(error)
+          }`,
+          'error',
+        )
+        if (
+          error instanceof Error &&
+          error.message === 'Telegram service is not running'
+        ) {
+          stopTypingKeepAlive()
+        }
+      })
+    },
+    [stopTypingKeepAlive],
+  )
+
+  const startTypingKeepAlive = useCallback(
+    (chatId: string) => {
+      if (
+        typingChatIdRef.current === chatId &&
+        typingIntervalRef.current !== null
+      ) {
+        return
+      }
+
+      stopTypingKeepAlive()
+      typingChatIdRef.current = chatId
+      sendTyping(chatId)
+      typingIntervalRef.current = setInterval(() => {
+        sendTyping(chatId)
+      }, TELEGRAM_TYPING_REFRESH_MS)
+    },
+    [sendTyping, stopTypingKeepAlive],
+  )
 
   useEffect(() => {
     if (autoStartAttemptedRef.current) return
@@ -65,6 +116,16 @@ export function useTelegramBridge({ messages, isLoading, store }: Props): void {
     })
   }, [])
 
+  useEffect(() => stopTypingKeepAlive, [stopTypingKeepAlive])
+
+  useEffect(() => {
+    return telegramService.subscribe(() => {
+      if (telegramService.getStateSnapshot().status !== 'running') {
+        stopTypingKeepAlive()
+      }
+    })
+  }, [stopTypingKeepAlive])
+
   useEffect(() => {
     return telegramService.subscribeToInbound(event => {
       void (async () => {
@@ -78,6 +139,8 @@ export function useTelegramBridge({ messages, isLoading, store }: Props): void {
           pendingInboundRef.current.push(event)
           logTelegramDebug(`[telegram] added to pendingInboundRef: chatId=${event.chatId}`)
 
+          sendTyping(event.chatId)
+
           enqueue({
             value: event.text,
             mode: 'prompt',
@@ -99,7 +162,7 @@ export function useTelegramBridge({ messages, isLoading, store }: Props): void {
         }
       })()
     })
-  }, [store])
+  }, [sendTyping, store])
 
   useEffect(() => {
     return telegramService.subscribeToCallbacks(event => {
@@ -142,6 +205,7 @@ export function useTelegramBridge({ messages, isLoading, store }: Props): void {
             chatId: inbound.chatId,
             responseParts: [],
           }
+          startTypingKeepAlive(inbound.chatId)
           logTelegramDebug(`[telegram] active turn started for chatId: ${inbound.chatId}`)
         }
         continue
@@ -171,7 +235,7 @@ export function useTelegramBridge({ messages, isLoading, store }: Props): void {
     }
 
     lastProcessedMessageCountRef.current = messages.length
-  }, [messages])
+  }, [messages, startTypingKeepAlive])
 
   useEffect(() => {
     const wasLoading = previousLoadingRef.current
@@ -183,28 +247,26 @@ export function useTelegramBridge({ messages, isLoading, store }: Props): void {
       return
     }
 
-    const { chatId, responseParts } = activeTurnRef.current
-    const messageToSend = responseParts.join('\n\n').trim() ||
-          '这一轮没有可回传的文本结果，请查看本地终端会话。'
-
-    logTelegramDebug(`[telegram] sending message to chatId: ${chatId}, parts count: ${responseParts.length}, total length: ${messageToSend.length}`)
-    logTelegramDebug(`[telegram] message content: ${JSON.stringify(messageToSend)}`)
-    logTelegramDebug(`[telegram] response parts: ${JSON.stringify(responseParts)}`)
-
+    const completedTurn = activeTurnRef.current
     activeTurnRef.current = null
 
-    void telegramService
-      .sendMessage(
-        chatId,
-        messageToSend,
-      )
-      .catch(error => {
+    void (async () => {
+      try {
+        await telegramService.sendMessage(
+          completedTurn.chatId,
+          completedTurn.responseParts.join('\n\n').trim() ||
+            '这一轮没有可回传的文本结果，请查看本地终端会话。',
+        )
+      } catch (error) {
         logTelegramDebug(
           `[telegram] failed to send outbound reply: ${
             error instanceof Error ? error.message : String(error)
           }`,
           'error',
         )
-      })
-  }, [isLoading])
+      } finally {
+        stopTypingKeepAlive()
+      }
+    })()
+  }, [isLoading, stopTypingKeepAlive])
 }

src/services/telegram/TelegramService.ts

@@ -3,6 +3,7 @@ import type {
   TelegramAnswerCallbackQueryResponse,
   TelegramBotCommand,
   TelegramCallbackEvent,
+  TelegramChatAction,
   TelegramEditMessageResponse,
   TelegramGetMeResponse,
   TelegramGetUpdatesResponse,
@@ -10,6 +11,7 @@ import type {
   TelegramInlineKeyboardMarkup,
   TelegramRuntimeConfig,
   TelegramSendMessageResponse,
+  TelegramSendChatActionResponse,
   TelegramSetMyCommandsResponse,
   TelegramServiceState,
   TelegramUpdate,
@@ -305,6 +307,24 @@ class TelegramService {
     )
   }
 
+  async sendChatAction(
+    chatId: string,
+    action: TelegramChatAction = 'typing',
+  ): Promise<void> {
+    if (!this.config) {
+      throw new Error('Telegram service is not running')
+    }
+
+    await this.callTelegram<TelegramSendChatActionResponse>(
+      this.config,
+      'sendChatAction',
+      {
+        chat_id: Number(chatId),
+        action,
+      },
+    )
+  }
+
 
   private setState(nextState: TelegramServiceState): void {
     this.state = nextState

src/services/telegram/telegramTypes.ts

@@ -124,3 +124,22 @@ export type TelegramCallbackEvent = {
 }
 
 export type TelegramConfigDraft = Partial<TelegramConfig>
+
+export type TelegramChatAction =
+  | 'typing'
+  | 'upload_photo'
+  | 'record_video'
+  | 'upload_video'
+  | 'record_voice'
+  | 'upload_voice'
+  | 'upload_document'
+  | 'choose_sticker'
+  | 'find_location'
+  | 'record_video_note'
+  | 'upload_video_note'
+
+export type TelegramSendChatActionResponse = {
+  ok: boolean
+  description?: string
+  result?: boolean
+}