docs/components/chat-ai/ChatWindow

ChatWindow

Full chat UI with messages and input.

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

#Playground

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

Live playground
Loading preview…

#Props

PropTypeDefaultDescription
messages *Message[]
connectionState *ConnectionState
streamingMessageIdstring
modelsModelOption[]
selectedModelstring
onSend(message: string) => void
onInterrupt() => void
onModelChange(modelId: string) => void
onCopyMessage(message: Message) => void
titlestring
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-bg-primary
  • --sk-bg-secondary
  • --sk-border
  • --sk-font-size-base
  • --sk-space-md
  • --sk-space-sm
  • --sk-text-primary