feat(web): Add reconnecting feedback when SSE connection is lost (#125)

- Add ReconnectingBanner component to show "Reconnecting..." status
- Track SSE connection state in App.tsx with onDisconnect handler
- Add onBlocked callback to useSendMessage for handling blocked send attempts
- Provide haptic feedback when send is blocked due to no API or session
- Show toast notification when message cannot be sent due to server disconnection
- Add translation keys for reconnecting message and send blocked feedback in en/zh-CN

close #125
This commit is contained in:
weishu
2026-02-01 19:40:43 +08:00
parent 8dfc8749eb
commit 5b27f6b41e
6 changed files with 87 additions and 5 deletions
+19
View File
@@ -0,0 +1,19 @@
import { useOnlineStatus } from '@/hooks/useOnlineStatus'
import { useTranslation } from '@/lib/use-translation'
export function ReconnectingBanner({ isReconnecting }: { isReconnecting: boolean }) {
const { t } = useTranslation()
const isOnline = useOnlineStatus()
// Don't show if offline (OfflineBanner takes precedence) or if not reconnecting
if (!isReconnecting || !isOnline) {
return null
}
return (
<div className="fixed top-0 left-0 right-0 bg-amber-500 text-white text-center py-2 text-sm font-medium z-50 flex items-center justify-center gap-2">
<span className="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full" />
{t('reconnecting.message')}
</div>
)
}