リファレンス

0.3.3 時点。パーツ名・プロパティ名・イベント名・スロット名・CSS カスタムプロパティ名は 公開 API として扱い、変更はメジャーバージョンでのみ行います。

エントリポイント

プロパティ

読み取り専用: renderedState、device （'pc' | 'mobile'）、hasUnseen、canSend、 currentTheme、currentLabels、resolvedLocale。

メソッド

イベント

すべて CustomEvent で、bubbles と composed が 立っているので document でも拾えます。trigger は 'user'（クリックや Esc）か 'api'（メソッドやプロパティ代入）です。

発言オブジェクト

{
  id: string,                       // 必須・安定していること
  role: 'user' | 'assistant' | 'system',
  name?: string | null,             // テーマの既定を打ち消すなら null
  avatar?: string | null,
  time?: Date | string | number,
  status?: 'sending' | 'sent' | 'error',
  streaming?: boolean,              // 末尾にカーソル、aria-busy
  meta?: unknown,                   // 自由欄。イベントでそのまま返る

  // 以下のいずれか 1 つ
  text?: string,
  html?: string,
  template?: TemplateResult,
  element?: HTMLElement,
  component?: (new () => HTMLElement) | string,
  props?: Record<string, unknown>,
}

テーマ

{
  breakpoint?: number,                       // 既定 768
  closed?: {
    // pc / mobile に分けて書ける。分けなければ両方に同じ設定
    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left',
    offset?: { x: number, y: number },
    size?: number | 'auto',
    radius?: number,
    image?: string | null,
    label?: string | null,
    component?: (new () => HTMLElement) | string,
    props?: Record<string, unknown>,
    colors?: { bg?, text?, shadow? },
    draggable?: boolean,                     // 既定 false
    animation?: { enter?, exit?, duration? },
  },
  open?: {
    width?: number, height?: number,         // スマホでは無視（常に全画面）
    position?: Position, offset?: { x, y },
    radius?: number,
    launcher?: 'hidden' | 'visible',
    draggable?: boolean,                     // 取っ手はタイトルバー。スマホでは無効
    header?: { visible?, title?, logo?, home? },
    bubble?: { radius?: number, tail?: 'none' | 'top' | 'bottom' },
    speaker?: { assistant?: { name?, avatar? }, user?: { name?, avatar? } },
    loading?: { auto?, style?: 'dots' | 'spinner' | 'text', text?, timeout? },
    input?: { maxRows?, placeholder?, attach?, accept?, multiple? },
    colors?: { bg?, text?, accent?, border?, userBubble?, userText?, assistantBubble?,
               assistantText?, systemText?, headerBg?, headerText?, inputBg?, inputText?,
               inputPlaceholder? },
    bgImage?: string | null,
    animation?: { enter?, exit?, duration?, scroll?: 'smooth' | 'instant' },
  },
  hidden?: { animation?: { exit?, duration? } },
}

animation の enter / exit は 'fade' / 'scale' / 'slide' / 'none'。長さは duration（ms）で、CSS 変数にはしていません （遷移の完了を JavaScript 側が知る必要があるためです）。

スロット

CSS パーツ

::part() で外からスタイルを当てられます。

launcher launcher-icon launcher-label panel header header-title header-heading header-logo header-actions home-button close-button messages messages-inner message message-user message-assistant message-system bubble message-content avatar name meta time status cursor typing loading loading-text to-latest composer input attach-button attach-input counter send-button spinner

CSS カスタムプロパティ

テーマの値はここに出ます。ページ側の指定のほうが優先されます。

色

--chit-color-bg --chit-color-text --chit-color-accent --chit-color-border --chit-color-user-bg --chit-color-user-text --chit-color-assistant-bg --chit-color-assistant-text --chit-color-system-text --chit-color-header-bg --chit-color-header-text --chit-color-input-bg --chit-color-input-text --chit-color-input-placeholder

ランチャー

--chit-launcher-size --chit-launcher-radius --chit-launcher-offset-x --chit-launcher-offset-y --chit-launcher-bg --chit-launcher-text --chit-launcher-shadow --chit-launcher-image

パネルと吹き出し

--chit-panel-width --chit-panel-height --chit-panel-radius --chit-panel-offset-x --chit-panel-offset-y --chit-panel-shadow --chit-panel-bg-image --chit-bubble-radius

全体

--chit-font-family --chit-font-size --chit-z-index

型

import type { Message, Theme, Position, Role, ChatState, Device } from '@hidemikimura/chit-ui';

chit-ui 要素と chat-* イベントの型も一緒に入るので、 document.querySelector('chit-ui') の戻り値や addEventListener('chat-submit', ...) の detail に型が付きます。