Chat Canvas

Flow-граф для визуализации агентских топологий — обёртка над XYFlow с Oracul токенами.

Планировщик

разбивает задачи

done

Вызваны инструменты · 482 токена · последний вызов 4 с назад

Исследователь

вызывает web_search

running

Вызваны инструменты · 482 токена · последний вызов 4 с назад

Кодер

пишет патчи

idle

Вызваны инструменты · 482 токена · последний вызов 4 с назад

Рецензент

проверяет результат

idle

Вызваны инструменты · 482 токена · последний вызов 4 с назад

React Flow

"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 handles
ChatEdge.Animated — линия с движущейся точкой (data flow)
ChatEdge.Temporary — пунктирная линия (pending connection)

Полная XYFlow API (nodes, edges, onNodesChange, controls, minimap и т.д.) прокидывается напрямую через props ChatCanvas.

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

Установка Использование Что в комплекте