mirror of
https://github.com/wu736139669/hapi.git
synced 2026-08-05 06:24:37 +00:00
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:
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user