Skip to content
Kite Chat

Elements Reference

Kite Chat

Tag: <kite-chat></kite-chat>
Description: KiteChat is an embeddable livechat component
Attributes:
  • open (Type:Boolean) - opens chat dialog
    Default value: false
  • heading (Type:string) - Chat dialog heading
    Default value: "🪁Kite chat"
  • theme (Type:"light" | "dark") - defines kite chat theme, using prefers-color-scheme by default
Properties:
  • open (Type:Boolean) - opens chat dialog
    Default value: false
  • heading (Type:string) - Chat dialog heading
    Default value: "🪁Kite chat"
CSS variables:
  • --kite-primary-color - accent color, styles toggle button, title bar, text selection, cursor
  • --kite-secondary-color - accent contrast color, styles title, close button, toggle button icon color
Slots:
  • default - kite-chat component contains chat messages as nested subcomponents, allowing server-side rendering
CSS parts:
  • toggle - The toggle button TODO implement
Events:
  • kite-chat.show - Chat window opens
  • kite-chat.hide - Chat window closes
  • kite-chat.send - Outgoing message is sent

Kite Msg

Tag: <kite-msg></kite-msg>
Description: Styled chat message component. Presence of the <pre>status</pre> attribute means outgoing message.
Attributes:
  • messageId (Type:string) - Message id, optional, autogenerated with nanoid if not provided
    Default value: "randomStringId()"
  • status (Type:MsgStatus | undefined) - Status of the outgoing message; Optional, if present, must be one of 'sent' | 'delivered' | 'read'; in this case message is formatted as an outgoing message
  • timestamp (Type:Date) - Timestamp as an ISO formatted string; optional, defaults to current time
    Default value: "new Date()"
Properties:
  • messageId (Type:string) - Message id, optional, autogenerated with nanoid if not provided
    Default value: "randomStringId()"
  • status (Type:MsgStatus | undefined) - Status of the outgoing message; Optional, if present, must be one of 'sent' | 'delivered' | 'read'; in this case message is formatted as an outgoing message
  • timestamp (Type:Date) - Timestamp as an ISO formatted string; optional, defaults to current time
    Default value: "new Date()"
Slots:
  • default - kite-msg component contains message text (possibly formatted)

Kite File

Tag: <kite-file></kite-file>
Description: File component allows previewing and saving file message.
Attributes:
  • name (Type:string) - file, sent from the chat or received by the chat
    Default value: "File"
  • src (Type:File | undefined) - file, sent from the chat or received by the chat
Properties:
  • name (Type:string) - file, sent from the chat or received by the chat
    Default value: "File"
  • file (Type:File | undefined) - file, sent from the chat or received by the chat
Welcome to Kite Chat!