xyflow change to flowgraam

2026-06-27 21:27:57 +08:00
parent 228ad1902f
commit 689acc997c
32 changed files with 3154 additions and 5004 deletions
@@ -0,0 +1,63 @@
+import "@flowgram.ai/free-layout-editor/index.css"
+
+import {
+  useNodeRender,
+  WorkflowNodeRenderer,
+  type WorkflowNodeProps,
+} from "@flowgram.ai/free-layout-editor"
+import {
+  BotIcon,
+  CircleStopIcon,
+  DatabaseIcon,
+  GitBranchIcon,
+  MessageSquareTextIcon,
+  SendIcon,
+  UserRoundIcon,
+} from "lucide-react"
+import type { ComponentType } from "react"
+
+import { cn } from "@/lib/utils"
+
+const iconByType: Record<string, ComponentType<{ className?: string }>> = {
+  start: UserRoundIcon,
+  conversation_understanding: BotIcon,
+  reply_policy: MessageSquareTextIcon,
+  condition: GitBranchIcon,
+  knowledge_retrieve: DatabaseIcon,
+  answerability_gate: GitBranchIcon,
+  llm_reply: BotIcon,
+  human_confirm: UserRoundIcon,
+  create_ticket: MessageSquareTextIcon,
+  handoff_to_human: UserRoundIcon,
+  send_reply: SendIcon,
+  end: CircleStopIcon,
+}
+
+export function FlowgramNodeRenderer(props: WorkflowNodeProps) {
+  const { selected, node } = useNodeRender()
+  const nodeType = String(node.flowNodeType ?? "")
+  const Icon = iconByType[nodeType] ?? BotIcon
+  const nodeJSON = node.toJSON?.() as { data?: { title?: string }; title?: string } | undefined
+  const title = nodeJSON?.data?.title || nodeJSON?.title || nodeType || "节点"
+
+  return (
+    <WorkflowNodeRenderer
+      node={props.node}
+      className={cn(
+        "w-[260px] rounded-md border bg-background shadow-sm transition-colors",
+        selected ? "border-primary ring-2 ring-primary/15" : "border-border"
+      )}
+      style={{ padding: 0 }}
+    >
+      <div className="flex items-start gap-3 p-3">
+        <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border bg-muted">
+          <Icon className="size-4 text-muted-foreground" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-sm font-medium leading-5">{title}</div>
+          <div className="mt-1 truncate text-xs text-muted-foreground">{nodeType}</div>
+        </div>
+      </div>
+    </WorkflowNodeRenderer>
+  )
+}