x-components

🎯 スキルの位置付け

このスキルでは、RICH インタラクションパラダイムに基づく AI 駆動のチャットインターフェースを構築する React コンポーネントライブラリ、@ant-design/x のすべての UI コンポーネントを扱います。

コンポーネントの選択、API の使用方法、組み合わせパターン、よくあるアンチパターンを扱います。

前提条件：このスキルで扱うのは UI のみです。データフローとストリーミングについては、use-x-chat、x-chat-provider、x-request の各スキルを参照してください。

目次

• 📦 パッケージの概要
• 🗂️ コンポーネントグループ
• 🚀 クイックスタートの選択ガイド
• 🛠 推奨ワークフロー
• 🚨 開発ルール
• 🤝 スキル間の連携
• 🔗 参考リソース

📦 パッケージの概要

パッケージ	役割
@ant-design/x	このスキルで扱うすべての UI コンポーネント
@ant-design/x-sdk	データプロバイダー、リクエスト、ストリーミング状態 — ここでは扱いません
@ant-design/x-markdown	Bubble 内での Markdown のレンダリング — x-markdown スキルを参照

npm install @ant-design/x

@ant-design/x は antd を拡張したものです。ConfigProvider を使用する場合は、XProvider に置き換えてください。

🗂️ コンポーネントグループ

RICH インタラクションパラダイムに基づいています。

ステージ	コンポーネント
一般	Bubble、Bubble.List、Conversations、Notification
起動	Welcome、Prompts
入力	Sender、Attachments、Suggestion
確認	Think、ThoughtChain
フィードバック	Actions、FileCard、Sources、CodeHighlighter、Mermaid、Folder
グローバル	XProvider

🚀 クイックスタートの選択ガイド

必要な機能	まず読むもの
チャットメッセージのバブルを表示する	COMPONENTS.md → Bubble
チャット入力ボックスを構築する	COMPONENTS.md → Sender
会話を一覧表示して切り替える	COMPONENTS.md → Conversations
AI の思考プロセスを表示する	COMPONENTS.md → ThoughtChain / Think
メッセージの下にアクションボタンを追加する	COMPONENTS.md → Actions
ウェルカム画面やオンボーディング画面を構築する	COMPONENTS.md → Welcome + Prompts
入力欄にファイル添付を表示する	COMPONENTS.md → Attachments
出典の引用を表示する	COMPONENTS.md → Sources
クイックコマンドの候補を追加する	COMPONENTS.md → Suggestion
階層構造のファイル／フォルダツリーを表示する	COMPONENTS.md → Folder
チャットページ全体を組み立てる	PATTERNS.md
特定のプロパティを調べる	API.md

🛠 推奨ワークフロー

1. 各インタラクションステージに合わせて、COMPONENTS.md からコンポーネントを選びます。
2. PATTERNS.md を参照し、コンポーネントを組み合わせてページ全体を構成する方法を確認します。
3. ロケール、テーマ、ショートカットキーを設定するため、アプリのルートを XProvider でラップします（antd の ConfigProvider を置き換えます）。
4. 正確なプロパティ名は API.md で確認してください。推測で指定しないでください。

ページ全体の最小例

import { XProvider, Welcome, Prompts, Bubble, Sender } from '@ant-design/x';

export default () => (
  <XProvider>
    <Welcome title="Hello!" description="How can I help you?" />
    <Prompts
      items={[{ key: '1', label: 'What can you do?' }]}
      onItemClick={(info) => console.log(info.data.label)}
    />
    <Bubble.List items={[{ key: '1', content: 'Hello World', placement: 'end' }]} />
    <Sender onSubmit={(msg) => console.log(msg)} />
  </XProvider>
);

🚨 開発ルール

• アプリのルートでは必ず XProvider を使用してください — antd の ConfigProvider に代わるもので、ロケール、方向、X 固有のショートカットキーを有効にします。
• ループでは Bubble ではなく Bubble.List を使用してください — Bubble.List はスクロール位置のアンカリング、自動スクロール、ロールベースのレイアウトを処理します。Bubble を手動でマッピングすると、これらの機能が失われます。
• Bubble と Bubble.List の components prop は安定した状態に保ってください — インラインでオブジェクトを作成すると再レンダリングが発生し、タイピングアニメーションがリセットされます。
• ストリーム中は streaming={true}、最後のチャンクでは streaming={false} に設定してください — true のままにすると、完了状態が正しく機能しません。
• ThoughtChain と Think の使い分け：複数ステップのツール／エージェント呼び出しチェーンには ThoughtChain を使用し、折りたたみ可能な単一ブロックの推論表示には Think を使用してください。
• Actions.Copy、Actions.Feedback、Actions.Audio はプリセットのサブコンポーネントです — 独自の同等機能を作成するより、これらを優先して使用してください。
• Sender の onSubmit と onChange の違い：onSubmit は送信ボタンまたは Enter キーで発火し、onChange はキー入力のたびに発火します — 混同しないでください。
• Bubble の content 文字列内には Mermaid や CodeHighlighter を絶対にレンダリングしないでください — 代わりに contentRender または components マップを使用してください。

🤝 スキルの連携

シナリオ	スキルの組み合わせ
AI チャットアプリ全体	x-chat-provider → x-request → use-x-chat → x-components → x-markdown
UI 構造の構築のみ	x-components のみ
バブルの返信内の Markdown	x-components + x-markdown
ストリーミングのデータフローのみ	use-x-chat + x-request

🔗 参考リソース

• COMPONENTS.md — 使用方法、主要な props、例を含むコンポーネント別ガイド
• PATTERNS.md — ページ全体の構成パターンと統合レシピ
• API.md — 公式コンポーネントドキュメントから自動生成された props リファレンス — 17 個すべてのコンポーネントを網羅

公式ドキュメント

• Ant Design X の概要
• Bubble
• Sender
• Conversations
• ThoughtChain
• Actions
• Welcome
• Prompts
• Attachments
• Sources
• Suggestion
• Think
• Folder
• XProvider