Обзор
Компоненты
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Auth Surface
- Avatar
- Badge
- Browse Catalog Dialog
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Command
- Connector Setup Dialog
- Cookie Banner
- Dialog
- Directory Card
- Directory Detail
- Directory Skeleton
- DrawerНовое
- Token Parts Input
- Empty
- Field
- Fieldset
- File Preview Modal
- File Preview Skeleton
- Form
- Frame
- Group
- Icon
- Input
- Input Group
- Kbd
- Label
- Legal Shell
- Menu
- Mermaid Diagram
- Mind Map Diagram
- Not Found Screen
- Onboarding Frame
- Popover
- PDF Thumbnail
- Personalization Landing
- Preview Card
- Pricing Page
- Progress
- Radio Group
- Ring Spinner
- Scroll Area
- Select
- Separator
- Settings Page
- Settings Skills
- Settings Connectors
- Settings Capabilities
- Settings Usage
- Settings Account
- Settings Billing
- Sheet
- Sidebar
- Skeleton
- Skill Create Dialog
- Slider
- Spinner
- Stat
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Tooltip
AI-компоненты
- Компоненты AI
- Chat Conversation
- Chat Message
- Chat Response
- Chat Suggestion
- Chat Prompt Input
- Slash Highlighted Textarea
- Chat Search Dialog
- Chat Skill Doc
- Chat Connector Detail
- Chat Attachments
- Chat File Card
- Chat Token Chip
- Chat Code Block
- Chat Image
- Chat Inline Citation
- Chat Sources
- Chat Web Search
- Chat Research
- Chat Source
- Chat Actions
- Chat Context
- Chat Loader
- Chat Compaction
- Chat Timeline
- Chat Snippet
- Chat Terminal
- Chat Stack Trace
- Chat Test Results
- Chat File Tree
- Chat Environment Variables
- Chat Audio Player
- Chat Transcription
- Chat Speech Input
- Chat Mic Selector
- Chat Voice Selector
- Chat Agent
- Chat Persona
- Chat Connection
- Chat Connector Suggestion
- Chat Queue
- Chat Checkpoint
- Chat Confirmation
- Chat Artifact
- Chat JSX Preview
- Chat Schema Display
- Chat Package Info
- Chat Commit
- Chat Plan
- Chat Open In Chat
- Chat Sandbox
- Chat Model Selector
- Chat Canvas
- Chat Node
- Chat Edge
Ресурсы
Chat Plan
Предварительный план шагов от агента в виде сворачиваемой карточки с мерцающей загрузкой.
Перейти на Cache Components
Заменить запросы на основе revalidate новой директивой `"use cache"` во всём приложении дашборда.
1
Изучить текущий слой получения данных
2
Найти все вызовы revalidate
3
Переписать на cacheTag + updateTag
4
Обновить тесты и CI
5
Открыть черновой 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 с теми же шагами в процессе.
На этой странице