タスクリスト
エージェントが実際に何をしたかのストリーミングログ。タスクは一度に1つのユニットを明らかにし、それぞれは短いブラーとリフトとともに独自の高さをアニメーション化します。そのため、スレッドはジャンプの代わりに作業方法が成長します。タスクは、すべてのステップが着陸するまで、その実行中のタイトルをシェマー化し、その後解決します。
チャットで
構築された表面。メッセージの送信は、実行を開始し、ログはユーザターンの下に流れ、応答は一度だけ到着します。 onComplete 火災。 ターン ID の一覧をキープすると、すべての新しい実行が送信されます。
const [phase, setPhase] = useState("idle");
// The log is keyed on the turn, so each send starts a fresh run.{phase !== "idle" && ( <TaskList key={turnId} tasks={tasks} onComplete={() => setPhase("answered")} />)}インストール
タスクリストはBoardUI Proに含まれています。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
リソースチップ
ステップは、タッチしたファイルやリソースの名前を付けることができます。 パス chips ラベルの後に各レンダーは、ファイルタイプのオプションのグリフでインライン化します。 長い名前は、行をラップするのではなく、トランク付けします。
import { RiReactjsLine } from "@remixicon/react";
const steps = [ { label: "Read", chips: [ { label: "page.tsx", icon: <RiReactjsLine className="size-3.5 text-[#61dafb]" /> }, { label: "layout.tsx", icon: <RiReactjsLine className="size-3.5 text-[#61dafb]" /> }, ], },];タイミングと崩壊
startDelay ログがユーザの回転と同じフレームに着陸しないので、最初の表示を保持します。 stepInterval 残りをペースアップ。セット collapseOnComplete ログがメインイベントではなく歴史であり、各タスクは自分のステップが着陸した瞬間を離れます。 パス "all" 実行が完了するまで、すべてのタスクを開いたまま保持し、1つのモーションとして閉じる代わりに、応答がログに従うスレッドに適します。 リーダーがヘッダーをクリックすることで、任意のタスクを開くことができます。
// Each task folds away as soon as its own steps land.<TaskList tasks={tasks} startDelay={320} stepInterval={850} collapseOnComplete/>
// Every task stays open until the whole run lands, then they close together.<TaskList tasks={tasks} collapseOnComplete="all" />実際のイベントからそれを運転する
間隔はスタンドインです。 実際の手順は等しい時間を取ることはありませんので、ライブストリームを持っている場合は、パス revealed ツールコールが解決するにつれて、それを進歩させます。内部タイマーが切り替わり、すべてのアニメーションが同じままになります。
// Each task contributes one unit for its header plus one per step, so// `revealed` counts units rather than steps. Drive it from real events// and the internal timer stays out of the way.<TaskList tasks={tasks} revealed={unitsSeen} />