UI コンポーネント
概要
Web コンソールが使う React コンポーネントとセッションブロック
Werft の Web コンソールの画面は二つのパッケージで作られている。同じパッケージを使えば、別の React アプリにセッション一覧とセッション画面を組み込める。
| パッケージ | 含まれるもの |
|---|---|
@werft-ai/ui | デザイントークン(tokens.css)、Tailwind との接続(theme.css)、primitive(Button, Card, Dialog, Tabs, Skeleton など)、状態表示(ErrorState, EmptyState) |
@werft-ai/react | サーバー状態を読み書きする hook(useSessions, useSession, useSessionEvents, useSendMessage, useAnswer など)と WerftProvider。@werft-ai/react/components には API の型を受け取って描画する部品(StatusLabel, Timeline, Composer, ApprovalCard, QuestionCard など)が、@werft-ai/react/blocks には、データの読み取りまで行って描画するセッションブロック SessionList, RecentSessions, WaitingSessions, SessionDetail, ApprovalInbox がある |
@werft-ai/ui は受け取った状態を描画するだけである。API を呼んだり、権限を判断したりはしない。API の呼び出しは @werft-ai/react の hook とブロックが担う。
二つのパッケージはレジストリに公開されていない(private、バージョン 0.0.0)。このリポジトリ内のアプリは workspace パッケージとして import し、そのときパッケージは TypeScript のソースをエクスポートするため、Vite のように TypeScript をコンパイルするバンドラーが必要である。リポジトリ外のアプリには、@werft-ai/ui だけをビルド済み JavaScript の tarball としてインストールできる(リポジトリ外のアプリにインストール)。@werft-ai/react はリポジトリ外にはインストールできない。
この節の順序
- インストール: リポジトリ内に Vite アプリを作り、パッケージを import する
- テーマの適用: CSS を三つ import し、ダークテーマを有効にする
- セッションブロックの組み込み: ローカルスタックのセッション一覧とセッション画面を描画する
- リポジトリ外のアプリにインストール:
@werft-ai/uiを tarball にまとめ、別の React アプリにインストールする