Chat Edge

"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>
  );
}