feat(web): implement conditional Telegram SDK loading

Add lazy loading of Telegram SDK only when running inside Telegram Mini App
environment instead of unconditionally loading in all browsers. Includes:

- New environment detection functions: isTelegramEnvironment(), isTelegramApp()
- Dynamic SDK loading with 3s timeout via loadTelegramSdk()
- Removed static script tag from index.html
- Made haptic feedback lazy (SDK check on each call)
- Made theme listeners lazy (attached in initializeTheme())
- Updated all components to use unified detection functions

This prevents SDK load time overhead in regular browser environments while
ensuring the app works correctly both in Telegram and browser contexts.
This commit is contained in:
weishu
2025-12-18 22:54:40 +08:00
parent 2a097d0cdf
commit 4606ba23d9
8 changed files with 167 additions and 105 deletions
+2 -3
View File
@@ -1,6 +1,6 @@
import { useMemo } from 'react'
import type { Session } from '@/types/api'
import { getTelegramWebApp } from '@/hooks/useTelegram'
import { isTelegramApp } from '@/hooks/useTelegram'
function getSessionTitle(session: Session): string {
if (session.metadata?.name) {
@@ -20,11 +20,10 @@ export function SessionHeader(props: {
session: Session
onBack: () => void
}) {
const isTelegram = getTelegramWebApp() !== null
const title = useMemo(() => getSessionTitle(props.session), [props.session])
// In Telegram, don't render header (Telegram provides its own)
if (isTelegram) {
if (isTelegramApp()) {
return null
}