Обзор
Компоненты
- 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 Canvas
Flow-граф для визуализации агентских топологий — обёртка над XYFlow с Oracul токенами.
Планировщик
разбивает задачи
done
Вызваны инструменты · 482 токена · последний вызов 4 с назад
Исследователь
вызывает web_search
running
Вызваны инструменты · 482 токена · последний вызов 4 с назад
Кодер
пишет патчи
idle
Вызваны инструменты · 482 токена · последний вызов 4 с назад
Рецензент
проверяет результат
idle
Вызваны инструменты · 482 токена · последний вызов 4 с назад
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
"use client";
import type { Edge, Node, NodeTypes } from "@xyflow/react";
import { Badge } from "@/components/ui/badge";
import { ChatCanvas } from "@/components/ui/chat-canvas";
import { ChatEdge } from "@/components/ui/chat-edge";
import {
ChatNode,
ChatNodeAction,
ChatNodeContent,
ChatNodeDescription,
ChatNodeHeader,
ChatNodeTitle,
} from "@/components/ui/chat-node";
type AgentNodeData = {
name: string;
role: string;
status: "idle" | "running" | "done";
};
const AgentNode = ({ data }: { data: AgentNodeData }) => (
<ChatNode handles={{ source: true, target: true }}>
<ChatNodeHeader>
<ChatNodeTitle>{data.name}</ChatNodeTitle>
<ChatNodeDescription>{data.role}</ChatNodeDescription>
<ChatNodeAction>
<Badge variant={data.status === "running" ? "default" : "secondary"}>
{data.status}
</Badge>
</ChatNodeAction>
</ChatNodeHeader>
<ChatNodeContent>
<p className="text-muted-foreground text-xs">
Вызваны инструменты · 482 токена · последний вызов 4 с назад
</p>
</ChatNodeContent>
</ChatNode>
);
const nodeTypes: NodeTypes = { agent: AgentNode };
const edgeTypes = {
animated: ChatEdge.Animated,
temporary: ChatEdge.Temporary,
};
const nodes: Node[] = [
{
id: "planner",
type: "agent",
position: { x: 0, y: 0 },
data: { name: "Планировщик", role: "разбивает задачи", status: "done" },
},
{
id: "researcher",
type: "agent",
position: { x: 360, y: -120 },
data: {
name: "Исследователь",
role: "вызывает web_search",
status: "running",
},
},
{
id: "coder",
type: "agent",
position: { x: 360, y: 120 },
data: { name: "Кодер", role: "пишет патчи", status: "idle" },
},
{
id: "reviewer",
type: "agent",
position: { x: 720, y: 0 },
data: { name: "Рецензент", role: "проверяет результат", status: "idle" },
},
];
const edges: Edge[] = [
{ id: "p-r", source: "planner", target: "researcher", type: "animated" },
{ id: "p-c", source: "planner", target: "coder", type: "temporary" },
{ id: "r-rv", source: "researcher", target: "reviewer", type: "temporary" },
{ id: "c-rv", source: "coder", target: "reviewer", type: "temporary" },
];
export default function Particle() {
return (
<div className="h-120 w-full p-4">
<ChatCanvas
edgeTypes={edgeTypes}
edges={edges}
nodeTypes={nodeTypes}
nodes={nodes}
/>
</div>
);
}
Установка
pnpm dlx shadcn@latest add @oracul/chat-canvas
Зависит от @xyflow/react. Bundle добавит ~70KB — оправдано если нужен flow-визуализатор.
Использование
import { type Node, type Edge } from "@xyflow/react";
import { ChatCanvas } from "@/components/ui/chat-canvas";
import { ChatEdge } from "@/components/ui/chat-edge";
import {
ChatNode,
ChatNodeContent,
ChatNodeHeader,
ChatNodeTitle,
} from "@/components/ui/chat-node";
const nodeTypes = {
agent: ({ data }: { data: { name: string; role: string } }) => (
<ChatNode handles={{ source: true, target: true }}>
<ChatNodeHeader>
<ChatNodeTitle>{data.name}</ChatNodeTitle>
</ChatNodeHeader>
<ChatNodeContent>{data.role}</ChatNodeContent>
</ChatNode>
),
};
const edgeTypes = {
animated: ChatEdge.Animated,
temporary: ChatEdge.Temporary,
};
const nodes: Node[] = [
{ id: "1", type: "agent", position: { x: 0, y: 0 }, data: { name: "Planner", role: "decomposes tasks" } },
{ id: "2", type: "agent", position: { x: 320, y: 0 }, data: { name: "Researcher", role: "calls web_search" } },
];
const edges: Edge[] = [
{ id: "e1-2", source: "1", target: "2", type: "animated" },
];
<ChatCanvas nodes={nodes} edges={edges} nodeTypes={nodeTypes} edgeTypes={edgeTypes} />Что в комплекте
ChatCanvas—<ReactFlow>сfitView,panOnScroll, background из Oracul токеновChatNode— card-style node с опциональными source/target handlesChatEdge.Animated— линия с движущейся точкой (data flow)ChatEdge.Temporary— пунктирная линия (pending connection)
Полная XYFlow API (nodes, edges, onNodesChange, controls, minimap и т.д.) прокидывается напрямую через props ChatCanvas.
На этой странице