A resumable stream status with a retry countdown, attempt count, Retry now, and a collapsible connection log.
import * as React from 'react'
import {
ConnectionState,
type ConnectionEvent,
type ConnectionStatus,
} from '@/components/ui/connection-state'
const delay = 4
interface Frame {
attempt?: number
event?: Omit<ConnectionEvent, 'id'>
retryIn?: number
state: ConnectionStatus
wait: number
}
const frames: Frame[] = [
{
state: 'connected',
wait: 1600,
event: { label: 'Streaming response', state: 'connected', time: '14:02:11' },
},
{
state: 'offline',
wait: 1400,
event: { label: 'Socket closed by network', state: 'offline', time: '14:02:13' },
},
...Array.from({ length: delay }, (_, index) => ({
state: 'reconnecting' as const,
attempt: 1,
retryIn: delay - index,
wait: 1000,
event:
index === 0
? { label: 'Retrying with backoff', state: 'reconnecting' as const, time: '14:02:14' }
: undefined,
})),
{ state: 'reconnecting', attempt: 2, wait: 1400 },
{
state: 'reconnected',
wait: 3200,
event: { label: 'Resumed from token 1,284', state: 'reconnected', time: '14:02:19' },
},
]
export default function Demo() {
const [index, setIndex] = React.useState(3)
const frame = frames[index]
const events = frames
.slice(0, index + 1)
.flatMap((item, position) => (item.event ? [{ ...item.event, id: String(position) }] : []))
.reverse()
React.useEffect(() => {
const timer = setTimeout(() => setIndex((value) => (value + 1) % frames.length), frame.wait)
return () => clearTimeout(timer)
}, [frame.wait])
return (
<ConnectionState
attempt={frame.attempt}
className="w-full max-w-md"
defaultLogOpen
detail={
frame.state === 'reconnected'
? 'No messages were lost'
: 'The run continues safely on the server'
}
events={events}
maxAttempts={5}
onRetry={() => setIndex(frames.length - 2)}
retryDelay={delay}
retryIn={frame.retryIn}
state={frame.state}
/>
)
}
Part of Pasta UI — browse the full library on 21st.dev.