Chat Plan

Предварительный план шагов от агента в виде сворачиваемой карточки с мерцающей загрузкой.

Перейти на Cache Components

Заменить запросы на основе revalidate новой директивой `"use cache"` во всём приложении дашборда.

Изучить текущий слой получения данных

Найти все вызовы revalidate

Переписать на cacheTag + updateTag

Обновить тесты и CI

Открыть черновой PR

"use client";

import { useEffect, useState } from "react";
import {
  ChatPlan,
  ChatPlanAction,
  ChatPlanContent,
  ChatPlanDescription,
  ChatPlanHeader,
  ChatPlanStep,
  ChatPlanTitle,
  ChatPlanTrigger,
} from "@/components/ui/chat-plan";

const steps = [
  "Изучить текущий слой получения данных",
  "Найти все вызовы revalidate",
  "Переписать на cacheTag + updateTag",
  "Обновить тесты и CI",
  "Открыть черновой PR",
];

export default function Particle() {
  const [streaming, setStreaming] = useState(true);

  useEffect(() => {
    const id = setTimeout(() => setStreaming(false), 2200);
    return () => clearTimeout(id);
  }, []);

  return (
    <div className="w-full max-w-2xl p-4">
      <ChatPlan defaultOpen isStreaming={streaming}>
        <ChatPlanHeader>
          <div className="flex min-w-0 flex-col gap-1">
            <ChatPlanTitle>Перейти на Cache Components</ChatPlanTitle>
            <ChatPlanDescription>
              Заменить запросы на основе revalidate новой директивой `"use
              cache"` во всём приложении дашборда.
            </ChatPlanDescription>
          </div>
          <ChatPlanAction>
            <ChatPlanTrigger />
          </ChatPlanAction>
        </ChatPlanHeader>
        <ChatPlanContent>
          {steps.map((step, i) => (
            <ChatPlanStep index={i} key={step}>
              {step}
            </ChatPlanStep>
          ))}
        </ChatPlanContent>
      </ChatPlan>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-plan

Использование

import {
  ChatPlan,
  ChatPlanAction,
  ChatPlanContent,
  ChatPlanDescription,
  ChatPlanFooter,
  ChatPlanHeader,
  ChatPlanStep,
  ChatPlanTitle,
  ChatPlanTrigger,
} from "@/components/ui/chat-plan";
 
<ChatPlan defaultOpen isStreaming={isPlanning}>
  <ChatPlanHeader>
    <div>
      <ChatPlanTitle>Implement Cache Components migration</ChatPlanTitle>
      <ChatPlanDescription>
        Replace revalidate-based fetches with the new `"use cache"` directive.
      </ChatPlanDescription>
    </div>
    <ChatPlanAction>
      <ChatPlanTrigger />
    </ChatPlanAction>
  </ChatPlanHeader>
  <ChatPlanContent>
    <ChatPlanStep index={0}>Read existing data-fetching layer</ChatPlanStep>
    <ChatPlanStep index={1}>Identify revalidate call sites</ChatPlanStep>
    <ChatPlanStep index={2}>Rewrite with cacheTag + updateTag</ChatPlanStep>
    <ChatPlanStep index={3}>Update tests</ChatPlanStep>
  </ChatPlanContent>
</ChatPlan>

Когда выбирать vs `chat-timeline`

chat-plan — предварительный план, выданный до начала работ. Заголовок и описание мерцают через ChatLoader, пока isStreaming = true.
chat-timeline — лента на этапе выполнения со статусами шагов — для отслеживания того, что агент уже делает.

Часто связаны: сначала покажите ChatPlan → затем ChatTimeline с теми же шагами в процессе.

На этой странице

Установка Использование Когда выбирать vs chat-timeline

Chat Plan

Установка

Использование

Когда выбирать vs chat-timeline

Когда выбирать vs `chat-timeline`