docs/components/chat-ai/SessionIndicator

SessionIndicator

Active session badge.

import { SessionIndicator } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Live playground
Loading preview…

#More Examples

Streaming

<SessionIndicator status="streaming" name="Active Chat" model="Claude Sonnet" />

Error

<SessionIndicator status="error" name="Failed Session" />

#Props

PropTypeDefaultDescription
status *SessionStatus
name *string
modelstring
unreadCountnumber
classstring

* required prop.

#Design Tokens

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.

  • --sk-font-size-base
  • --sk-font-size-sm
  • --sk-space-sm
  • --sk-text-muted
  • --sk-text-primary