dishui 0.0.64 → 0.0.66

package/dist/components/pro/Flow/panels/AIPanel.js

@@ -1,498 +1,471 @@
-import C from "../../../Button/index.js";
-import E from "../../../Input/index.js";
-import O from "../../../Label/index.js";
-import le from "../../../Select/index.js";
-import { DEFAULT_EDGE_DATA as re, DEFAULT_NODE_DATA as ie, ROOT_CANVAS_ID as K } from "../constants.js";
-import { useFlowContext as ce } from "../context/FlowContext.js";
-import { useFlowAI as de } from "../context/FlowAIContext.js";
-import { completeAIChatStream as ue } from "../nodes/aiClient.js";
-import { useCallback as w, useEffect as W, useRef as A, useState as h } from "react";
-import { jsx as a, jsxs as c } from "react/jsx-runtime";
-var me = `You are a diagramming assistant for a flowchart editor. Convert the user's request (a description, or an uploaded diagram image to reproduce) into a flow document.
-
-Reply with ONE fenced \`\`\`json code block and nothing else. The JSON must match:
-{
-  "canvases": {
-    "root": {
-      "nodes": [
-        { "id": "n1", "type": "shapeRoundRect", "position": {"x": 80, "y": 80}, "width": 160, "height": 64,
-          "data": { "label": "Start" } }
-      ],
-      "edges": [
-        { "id": "e1", "source": "n1", "target": "n2", "type": "smoothstep",
-          "data": { "labelText": "yes" } }
-      ],
-      "lines": []
-    }
-  },
-  "stack": ["root"]
-}
-
-Rules:
-- Node "type" is one of: shapeRect, shapeRoundRect, shapeEllipse, shapeDiamond, shapeParallelogram, shapeDocument, shapeHexagon. Use shapeDiamond for decisions, shapeRoundRect for processes, shapeEllipse for start/end.
-- Give every node a unique "id". Every edge "source"/"target" must reference an existing node id.
-- Lay nodes out on a readable grid (top-to-bottom or left-to-right), spacing ~180px, no overlaps. Widths ~140-180, heights ~56-72 (diamonds ~120x100).
-- Put a short "label" on each node. Optional edge label goes in data.labelText.
-- Do NOT include colors; the editor themes them automatically.
-- Output ONLY the JSON code block.`;
-function pe(i) {
-  let o = i.trim();
-  const d = /```(?:json)?\s*([\s\S]*?)```/i.exec(o);
-  if (d) o = d[1].trim();
-  else {
-    const n = o.indexOf("{"), u = o.lastIndexOf("}");
-    n >= 0 && u > n && (o = o.slice(n, u + 1));
-  }
-  try {
-    const n = JSON.parse(o);
-    return !n || typeof n != "object" || !n.canvases ? null : n;
-  } catch {
-    return null;
-  }
+import e from "../../../Button/index.js";
+import t from "../../../Input/index.js";
+import n from "../../../Label/index.js";
+import r from "../../../Select/index.js";
+import { DEFAULT_EDGE_DATA as i, DEFAULT_NODE_DATA as a, ROOT_CANVAS_ID as o } from "../constants.js";
+import { useFlowContext as s } from "../context/FlowContext.js";
+import { useFlowAI as c } from "../context/FlowAIContext.js";
+import { completeAIChatStream as l } from "../nodes/aiClient.js";
+import { useCallback as u, useEffect as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/pro/Flow/panels/AIPanel.tsx
+var g = "You are a diagramming assistant for a flowchart editor. Convert the user's request (a description, or an uploaded diagram image to reproduce) into a flow document.\n\nReply with ONE fenced ```json code block and nothing else. The JSON must match:\n{\n  \"canvases\": {\n    \"root\": {\n      \"nodes\": [\n        { \"id\": \"n1\", \"type\": \"shapeRoundRect\", \"position\": {\"x\": 80, \"y\": 80}, \"width\": 160, \"height\": 64,\n          \"data\": { \"label\": \"Start\" } }\n      ],\n      \"edges\": [\n        { \"id\": \"e1\", \"source\": \"n1\", \"target\": \"n2\", \"type\": \"smoothstep\",\n          \"data\": { \"labelText\": \"yes\" } }\n      ],\n      \"lines\": []\n    }\n  },\n  \"stack\": [\"root\"]\n}\n\nRules:\n- Node \"type\" is one of: shapeRect, shapeRoundRect, shapeEllipse, shapeDiamond, shapeParallelogram, shapeDocument, shapeHexagon. Use shapeDiamond for decisions, shapeRoundRect for processes, shapeEllipse for start/end.\n- Give every node a unique \"id\". Every edge \"source\"/\"target\" must reference an existing node id.\n- Lay nodes out on a readable grid (top-to-bottom or left-to-right), spacing ~180px, no overlaps. Widths ~140-180, heights ~56-72 (diamonds ~120x100).\n- Put a short \"label\" on each node. Optional edge label goes in data.labelText.\n- Do NOT include colors; the editor themes them automatically.\n- Output ONLY the JSON code block.";
+function ee(e) {
+	let t = e.trim(), n = /```(?:json)?\s*([\s\S]*?)```/i.exec(t);
+	if (n) t = n[1].trim();
+	else {
+		let e = t.indexOf("{"), n = t.lastIndexOf("}");
+		e >= 0 && n > e && (t = t.slice(e, n + 1));
+	}
+	try {
+		let e = JSON.parse(t);
+		return !e || typeof e != "object" || !e.canvases ? null : e;
+	} catch {
+		return null;
+	}
 }
-function he(i) {
-  const o = i.canvases ?? {}, d = o[i.stack?.[i.stack.length - 1] ?? "root"] ?? o.root ?? {
-    nodes: [],
-    edges: [],
-    lines: []
-  }, n = (d.nodes ?? []).map((t, m) => ({
-    id: t.id ?? `n${m + 1}`,
-    type: t.type ?? "shapeRoundRect",
-    position: {
-      x: Number(t.position?.x ?? 80),
-      y: Number(t.position?.y ?? 80 + m * 120)
-    },
-    width: Number(t.width ?? 160),
-    height: Number(t.height ?? 64),
-    zIndex: t.zIndex ?? m,
-    data: {
-      ...ie,
-      ...t.data ?? {},
-      label: t.data?.label ?? t.label ?? "Node"
-    }
-  })), u = new Map(n.map((t) => [t.id, t])), v = (d.edges ?? []).map((t, m) => ({
-    id: t.id ?? `e${m + 1}`,
-    source: t.source,
-    target: t.target,
-    type: t.type ?? "smoothstep",
-    data: {
-      ...re,
-      ...t.data ?? {}
-    }
-  })).filter((t) => t.source && t.target).map((t) => fe(t, u));
-  return {
-    canvases: { [K]: {
-      nodes: n,
-      edges: v,
-      lines: []
-    } },
-    stack: [K]
-  };
+function _(e) {
+	let t = e.canvases ?? {}, n = t[e.stack?.[e.stack.length - 1] ?? "root"] ?? t.root ?? {
+		nodes: [],
+		edges: [],
+		lines: []
+	}, r = (n.nodes ?? []).map((e, t) => ({
+		id: e.id ?? `n${t + 1}`,
+		type: e.type ?? "shapeRoundRect",
+		position: {
+			x: Number(e.position?.x ?? 80),
+			y: Number(e.position?.y ?? 80 + t * 120)
+		},
+		width: Number(e.width ?? 160),
+		height: Number(e.height ?? 64),
+		zIndex: e.zIndex ?? t,
+		data: {
+			...a,
+			...e.data,
+			label: e.data?.label ?? e.label ?? "Node"
+		}
+	})), s = new Map(r.map((e) => [e.id, e])), c = (n.edges ?? []).map((e, t) => ({
+		id: e.id ?? `e${t + 1}`,
+		source: e.source,
+		target: e.target,
+		type: e.type ?? "smoothstep",
+		data: {
+			...i,
+			...e.data
+		}
+	})).filter((e) => e.source && e.target).map((e) => v(e, s));
+	return {
+		canvases: { [o]: {
+			nodes: r,
+			edges: c,
+			lines: []
+		} },
+		stack: [o]
+	};
 }
-function fe(i, o) {
-  const d = o.get(i.source), n = o.get(i.target);
-  if (!d || !n || d === n) return i;
-  const u = n.position.x + n.width / 2 - (d.position.x + d.width / 2), v = n.position.y + n.height / 2 - (d.position.y + d.height / 2);
-  if (Math.abs(u) >= Math.abs(v)) {
-    const m = u >= 0;
-    return {
-      ...i,
-      sourceHandle: m ? "r_0.5" : "l_0.5",
-      targetHandle: m ? "l_0.5" : "r_0.5"
-    };
-  }
-  const t = v >= 0;
-  return {
-    ...i,
-    sourceHandle: t ? "b_0.5" : "t_0.5",
-    targetHandle: t ? "t_0.5" : "b_0.5"
-  };
+function v(e, t) {
+	let n = t.get(e.source), r = t.get(e.target);
+	if (!n || !r || n === r) return e;
+	let i = r.position.x + r.width / 2 - (n.position.x + n.width / 2), a = r.position.y + r.height / 2 - (n.position.y + n.height / 2);
+	if (Math.abs(i) >= Math.abs(a)) {
+		let t = i >= 0;
+		return {
+			...e,
+			sourceHandle: t ? "r_0.5" : "l_0.5",
+			targetHandle: t ? "l_0.5" : "r_0.5"
+		};
+	}
+	let o = a >= 0;
+	return {
+		...e,
+		sourceHandle: o ? "b_0.5" : "t_0.5",
+		targetHandle: o ? "t_0.5" : "b_0.5"
+	};
 }
-var ge = [{
-  value: "openai",
-  label: "OpenAI 兼容"
+var y = [{
+	value: "openai",
+	label: "OpenAI 兼容"
 }, {
-  value: "anthropic",
-  label: "Anthropic"
-}], we = 2e4;
-function Oe() {
-  const { setDoc: i } = ce(), { aiConfig: o, setAIConfig: d, showAIConfig: n } = de(), [u, v] = h(""), [t, m] = h(null), [D, L] = h(!1), [S, R] = h(null), [M, y] = h(null), [_, Y] = h(!1), [q, F] = h(!1), [f, N] = h(null), [V, U] = h(0), T = A(null), H = A(null), $ = A(null), j = A(null), k = A(""), I = w((e) => {
-    d({
-      ...o,
-      ...e
-    });
-  }, [o, d]), Q = w((e) => {
-    const s = e.target.files?.[0];
-    if (e.target.value = "", !s) return;
-    const r = new FileReader();
-    r.onload = () => m(r.result), r.readAsDataURL(s);
-  }, []), J = w((e) => {
-    const s = e.clipboardData?.items;
-    if (s) {
-      for (const r of s) if (r.type.startsWith("image/")) {
-        const p = r.getAsFile();
-        if (p) {
-          e.preventDefault();
-          const x = new FileReader();
-          x.onload = () => m(x.result), x.readAsDataURL(p);
-          return;
-        }
-      }
-    }
-  }, []);
-  W(() => {
-    const e = window.setInterval(() => {
-      U((s) => {
-        const r = k.current.length;
-        return s >= r ? s : s + Math.max(8, Math.ceil((r - s) / 8));
-      });
-    }, 40);
-    return () => window.clearInterval(e);
-  }, []);
-  const b = k.current.slice(0, V);
-  W(() => {
-    const e = $.current;
-    e && (e.scrollTop = e.scrollHeight);
-    const s = j.current;
-    s && (s.scrollTop = s.scrollHeight);
-  }, [b, _]);
-  const X = w(async () => {
-    if (D) return;
-    if (!o.gateway || !o.model) {
-      R("请先配置 AI 接口地址与模型");
-      return;
-    }
-    if (!u.trim() && !t) {
-      R("请输入需求描述，或上传一张流程图");
-      return;
-    }
-    R(null), y("正在生成…"), k.current = "", U(0), F(!1), N(null), L(!0);
-    const e = new AbortController();
-    T.current = e;
-    try {
-      const s = await ue(o, u.trim() || "请根据这张图片复刻出对应的流程图。", {
-        imageDataUrl: t ?? void 0,
-        systemPrompt: me,
-        signal: e.signal,
-        onDelta: (p) => {
-          k.current = p;
-        }
-      });
-      F(!0);
-      const r = pe(s);
-      if (!r) {
-        R("AI 返回内容无法解析为流程图，请重试或调整描述"), y(null);
-        return;
-      }
-      N(he(r)), y(null);
-    } catch (s) {
-      s?.name !== "AbortError" && R(s?.message ?? "生成失败"), y(null);
-    } finally {
-      L(!1), T.current = null;
-    }
-  }, [
-    D,
-    o,
-    u,
-    t
-  ]), Z = w(() => T.current?.abort(), []), ee = w(() => {
-    if (!f) return;
-    const e = f.canvases.root ?? {
-      nodes: [],
-      edges: [],
-      lines: []
-    };
-    i((s) => {
-      const r = s.stack[s.stack.length - 1] ?? "root", p = s.canvases[r] ?? {
-        nodes: [],
-        edges: [],
-        lines: []
-      }, x = /* @__PURE__ */ new Set([
-        ...p.nodes.map((l) => l.id),
-        ...p.edges.map((l) => l.id),
-        ...p.lines.map((l) => l.id)
-      ]), G = (l) => {
-        let g = l, ne = 1;
-        for (; x.has(g); ) g = `${l}_${ne++}`;
-        return x.add(g), g;
-      }, P = /* @__PURE__ */ new Map(), se = e.nodes.map((l) => {
-        const g = G(l.id);
-        return P.set(l.id, g), {
-          ...l,
-          id: g
-        };
-      }), oe = e.edges.map((l) => ({
-        ...l,
-        id: G(l.id),
-        source: P.get(l.source) ?? l.source,
-        target: P.get(l.target) ?? l.target
-      }));
-      return {
-        ...s,
-        canvases: {
-          ...s.canvases,
-          [r]: {
-            nodes: [...p.nodes, ...se],
-            edges: [...p.edges, ...oe],
-            lines: p.lines
-          }
-        }
-      };
-    }), N(null), y("已插入流程图");
-  }, [f, i]), te = w(() => {
-    if (!f) return;
-    const e = f.canvases.root ?? {
-      nodes: [],
-      edges: [],
-      lines: []
-    };
-    i((s) => {
-      const r = s.stack[s.stack.length - 1] ?? "root";
-      return {
-        ...s,
-        canvases: {
-          ...s.canvases,
-          [r]: {
-            nodes: e.nodes,
-            edges: e.edges,
-            lines: []
-          }
-        }
-      };
-    }), N(null), y("已替换画布");
-  }, [f, i]), z = b.length, ae = z >= k.current.length, B = q && ae ? 100 : Math.min(99, Math.floor(z / we * 99));
-  return /* @__PURE__ */ c("div", {
-    className: "flow-ai-panel",
-    onPaste: J,
-    children: [
-      n && /* @__PURE__ */ c("div", {
-        className: "flow-ai-section",
-        children: [
-          /* @__PURE__ */ a("div", {
-            className: "flow-ai-section-title",
-            children: "模型配置"
-          }),
-          /* @__PURE__ */ c("div", {
-            className: "flow-inspector-row",
-            children: [/* @__PURE__ */ a(O, {
-              size: "xs",
-              className: "flow-inspector-label",
-              children: "协议"
-            }), /* @__PURE__ */ a(le, {
-              options: ge,
-              value: o.protocol,
-              onChange: (e) => I({ protocol: e }),
-              style: { fontSize: 12 }
-            })]
-          }),
-          /* @__PURE__ */ c("div", {
-            className: "flow-inspector-row",
-            children: [/* @__PURE__ */ a(O, {
-              size: "xs",
-              className: "flow-inspector-label",
-              children: "接口地址"
-            }), /* @__PURE__ */ a(E, {
-              size: "xs",
-              value: o.gateway,
-              placeholder: "https://api.moonshot.cn/v1",
-              onChange: (e) => I({ gateway: e.target.value })
-            })]
-          }),
-          /* @__PURE__ */ c("div", {
-            className: "flow-inspector-row",
-            children: [/* @__PURE__ */ a(O, {
-              size: "xs",
-              className: "flow-inspector-label",
-              children: "模型"
-            }), /* @__PURE__ */ a(E, {
-              size: "xs",
-              value: o.model,
-              placeholder: "gpt-4o-mini",
-              onChange: (e) => I({ model: e.target.value })
-            })]
-          }),
-          /* @__PURE__ */ c("div", {
-            className: "flow-inspector-row",
-            children: [/* @__PURE__ */ a(O, {
-              size: "xs",
-              className: "flow-inspector-label",
-              children: "API Key"
-            }), /* @__PURE__ */ a(E, {
-              size: "xs",
-              type: "password",
-              value: o.apiKey ?? "",
-              placeholder: "sk-…",
-              onChange: (e) => I({ apiKey: e.target.value })
-            })]
-          })
-        ]
-      }),
-      /* @__PURE__ */ c("div", {
-        className: "flow-ai-section",
-        children: [
-          /* @__PURE__ */ a("div", {
-            className: "flow-ai-section-title",
-            children: "生成流程图"
-          }),
-          /* @__PURE__ */ a("textarea", {
-            className: "flow-ai-textarea",
-            value: u,
-            placeholder: "描述你想要的流程，例如：用户注册流程，包含邮箱校验、发送验证码、创建账号等步骤（可直接粘贴图片）",
-            onChange: (e) => v(e.target.value),
-            onPaste: J,
-            onPointerDown: (e) => e.stopPropagation()
-          }),
-          /* @__PURE__ */ c("div", {
-            className: "flow-ai-image-row",
-            children: [
-              /* @__PURE__ */ a("input", {
-                ref: H,
-                type: "file",
-                accept: "image/*",
-                style: { display: "none" },
-                onChange: Q
-              }),
-              t ? /* @__PURE__ */ c("div", {
-                className: "flow-ai-image-preview",
-                children: [/* @__PURE__ */ a("img", {
-                  src: t,
-                  alt: "参考图"
-                }), /* @__PURE__ */ a("button", {
-                  type: "button",
-                  className: "flow-ai-image-remove",
-                  title: "移除图片",
-                  onClick: () => m(null),
-                  children: "×"
-                })]
-              }) : /* @__PURE__ */ a(C, {
-                size: "xs",
-                variant: "ghost",
-                onClick: () => H.current?.click(),
-                children: "上传流程图图片"
-              }),
-              /* @__PURE__ */ a("span", {
-                className: "flow-ai-hint",
-                children: "或粘贴图片 (Ctrl/⌘+V)"
-              })
-            ]
-          }),
-          /* @__PURE__ */ a("div", {
-            className: "flow-ai-actions",
-            children: D ? /* @__PURE__ */ a(C, {
-              size: "xs",
-              variant: "ghost",
-              onClick: Z,
-              children: "停止"
-            }) : /* @__PURE__ */ a(C, {
-              size: "xs",
-              variant: "primary",
-              onClick: X,
-              children: "生成流程图"
-            })
-          }),
-          (D || b) && /* @__PURE__ */ c("div", {
-            className: "flow-ai-stream",
-            children: [
-              /* @__PURE__ */ c("div", {
-                className: "flow-ai-progress",
-                children: [/* @__PURE__ */ a("div", {
-                  className: "flow-ai-progress-track",
-                  children: /* @__PURE__ */ a("div", {
-                    className: "flow-ai-progress-bar",
-                    style: { width: `${B}%` }
-                  })
-                }), /* @__PURE__ */ c("span", {
-                  className: "flow-ai-progress-label",
-                  children: [B, "%"]
-                })]
-              }),
-              /* @__PURE__ */ c("button", {
-                type: "button",
-                className: "flow-ai-stream-header",
-                onClick: () => Y((e) => !e),
-                children: [
-                  /* @__PURE__ */ a("span", {
-                    className: `flow-ai-stream-chevron${_ ? " flow-ai-stream-chevron--open" : ""}`,
-                    children: "▸"
-                  }),
-                  /* @__PURE__ */ a("span", { children: "返回内容" }),
-                  /* @__PURE__ */ c("span", {
-                    className: "flow-ai-stream-count",
-                    children: [z.toLocaleString(), " 字符"]
-                  })
-                ]
-              }),
-              _ ? /* @__PURE__ */ a("pre", {
-                ref: $,
-                className: "flow-ai-stream-body",
-                children: b || "等待返回…"
-              }) : b && /* @__PURE__ */ a("pre", {
-                ref: j,
-                className: "flow-ai-stream-tail",
-                children: b
-              })
-            ]
-          }),
-          M && !S && /* @__PURE__ */ a("div", {
-            className: "flow-ai-status",
-            children: M
-          }),
-          S && /* @__PURE__ */ a("div", {
-            className: "flow-media-error",
-            children: S
-          })
-        ]
-      }),
-      f && /* @__PURE__ */ a("div", {
-        className: "flow-ai-dialog-overlay",
-        onClick: () => N(null),
-        children: /* @__PURE__ */ c("div", {
-          className: "flow-ai-dialog",
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": "流程图已生成",
-          onClick: (e) => e.stopPropagation(),
-          children: [
-            /* @__PURE__ */ a("div", {
-              className: "flow-ai-dialog-title",
-              children: "流程图已生成"
-            }),
-            /* @__PURE__ */ a("div", {
-              className: "flow-ai-dialog-desc",
-              children: "插入：将生成内容追加到当前画布；替换：清空当前画布后再插入。"
-            }),
-            /* @__PURE__ */ c("div", {
-              className: "flow-ai-dialog-actions",
-              children: [
-                /* @__PURE__ */ a(C, {
-                  size: "xs",
-                  variant: "ghost",
-                  onClick: () => N(null),
-                  children: "取消"
-                }),
-                /* @__PURE__ */ a(C, {
-                  size: "xs",
-                  variant: "neutral",
-                  outline: !0,
-                  onClick: ee,
-                  children: "插入"
-                }),
-                /* @__PURE__ */ a(C, {
-                  size: "xs",
-                  variant: "primary",
-                  onClick: te,
-                  children: "替换"
-                })
-              ]
-            })
-          ]
-        })
-      })
-    ]
-  });
+	value: "anthropic",
+	label: "Anthropic"
+}], b = 2e4;
+function x() {
+	let { setDoc: i } = s(), { aiConfig: a, setAIConfig: o, showAIConfig: v } = c(), [x, S] = p(""), [C, w] = p(null), [T, E] = p(!1), [D, O] = p(null), [k, A] = p(null), [j, M] = p(!1), [N, P] = p(!1), [F, I] = p(null), [L, R] = p(0), z = f(null), B = f(null), V = f(null), H = f(null), U = f(""), W = u((e) => {
+		o({
+			...a,
+			...e
+		});
+	}, [a, o]), G = u((e) => {
+		let t = e.target.files?.[0];
+		if (e.target.value = "", !t) return;
+		let n = new FileReader();
+		n.onload = () => w(n.result), n.readAsDataURL(t);
+	}, []), K = u((e) => {
+		let t = e.clipboardData?.items;
+		if (t) {
+			for (let n of t) if (n.type.startsWith("image/")) {
+				let t = n.getAsFile();
+				if (t) {
+					e.preventDefault();
+					let n = new FileReader();
+					n.onload = () => w(n.result), n.readAsDataURL(t);
+					return;
+				}
+			}
+		}
+	}, []);
+	d(() => {
+		let e = window.setInterval(() => {
+			R((e) => {
+				let t = U.current.length;
+				return e >= t ? e : e + Math.max(8, Math.ceil((t - e) / 8));
+			});
+		}, 40);
+		return () => window.clearInterval(e);
+	}, []);
+	let q = U.current.slice(0, L);
+	d(() => {
+		let e = V.current;
+		e && (e.scrollTop = e.scrollHeight);
+		let t = H.current;
+		t && (t.scrollTop = t.scrollHeight);
+	}, [q, j]);
+	let J = u(async () => {
+		if (T) return;
+		if (!a.gateway || !a.model) {
+			O("请先配置 AI 接口地址与模型");
+			return;
+		}
+		if (!x.trim() && !C) {
+			O("请输入需求描述，或上传一张流程图");
+			return;
+		}
+		O(null), A("正在生成…"), U.current = "", R(0), P(!1), I(null), E(!0);
+		let e = new AbortController();
+		z.current = e;
+		try {
+			let t = await l(a, x.trim() || "请根据这张图片复刻出对应的流程图。", {
+				imageDataUrl: C ?? void 0,
+				systemPrompt: g,
+				signal: e.signal,
+				onDelta: (e) => {
+					U.current = e;
+				}
+			});
+			P(!0);
+			let n = ee(t);
+			if (!n) {
+				O("AI 返回内容无法解析为流程图，请重试或调整描述"), A(null);
+				return;
+			}
+			I(_(n)), A(null);
+		} catch (e) {
+			e?.name !== "AbortError" && O(e?.message ?? "生成失败"), A(null);
+		} finally {
+			E(!1), z.current = null;
+		}
+	}, [
+		T,
+		a,
+		x,
+		C
+	]), Y = u(() => z.current?.abort(), []), X = u(() => {
+		if (!F) return;
+		let e = F.canvases.root ?? {
+			nodes: [],
+			edges: [],
+			lines: []
+		};
+		i((t) => {
+			let n = t.stack[t.stack.length - 1] ?? "root", r = t.canvases[n] ?? {
+				nodes: [],
+				edges: [],
+				lines: []
+			}, i = /* @__PURE__ */ new Set([
+				...r.nodes.map((e) => e.id),
+				...r.edges.map((e) => e.id),
+				...r.lines.map((e) => e.id)
+			]), a = (e) => {
+				let t = e, n = 1;
+				for (; i.has(t);) t = `${e}_${n++}`;
+				return i.add(t), t;
+			}, o = /* @__PURE__ */ new Map(), s = e.nodes.map((e) => {
+				let t = a(e.id);
+				return o.set(e.id, t), {
+					...e,
+					id: t
+				};
+			}), c = e.edges.map((e) => ({
+				...e,
+				id: a(e.id),
+				source: o.get(e.source) ?? e.source,
+				target: o.get(e.target) ?? e.target
+			}));
+			return {
+				...t,
+				canvases: {
+					...t.canvases,
+					[n]: {
+						nodes: [...r.nodes, ...s],
+						edges: [...r.edges, ...c],
+						lines: r.lines
+					}
+				}
+			};
+		}), I(null), A("已插入流程图");
+	}, [F, i]), Z = u(() => {
+		if (!F) return;
+		let e = F.canvases.root ?? {
+			nodes: [],
+			edges: [],
+			lines: []
+		};
+		i((t) => {
+			let n = t.stack[t.stack.length - 1] ?? "root";
+			return {
+				...t,
+				canvases: {
+					...t.canvases,
+					[n]: {
+						nodes: e.nodes,
+						edges: e.edges,
+						lines: []
+					}
+				}
+			};
+		}), I(null), A("已替换画布");
+	}, [F, i]), Q = q.length, te = Q >= U.current.length, $ = N && te ? 100 : Math.min(99, Math.floor(Q / b * 99));
+	return /* @__PURE__ */ h("div", {
+		className: "flow-ai-panel",
+		onPaste: K,
+		children: [
+			v && /* @__PURE__ */ h("div", {
+				className: "flow-ai-section",
+				children: [
+					/* @__PURE__ */ m("div", {
+						className: "flow-ai-section-title",
+						children: "模型配置"
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "flow-inspector-row",
+						children: [/* @__PURE__ */ m(n, {
+							size: "xs",
+							className: "flow-inspector-label",
+							children: "协议"
+						}), /* @__PURE__ */ m(r, {
+							options: y,
+							value: a.protocol,
+							onChange: (e) => W({ protocol: e }),
+							style: { fontSize: 12 }
+						})]
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "flow-inspector-row",
+						children: [/* @__PURE__ */ m(n, {
+							size: "xs",
+							className: "flow-inspector-label",
+							children: "接口地址"
+						}), /* @__PURE__ */ m(t, {
+							size: "xs",
+							value: a.gateway,
+							placeholder: "https://api.moonshot.cn/v1",
+							onChange: (e) => W({ gateway: e.target.value })
+						})]
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "flow-inspector-row",
+						children: [/* @__PURE__ */ m(n, {
+							size: "xs",
+							className: "flow-inspector-label",
+							children: "模型"
+						}), /* @__PURE__ */ m(t, {
+							size: "xs",
+							value: a.model,
+							placeholder: "gpt-4o-mini",
+							onChange: (e) => W({ model: e.target.value })
+						})]
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "flow-inspector-row",
+						children: [/* @__PURE__ */ m(n, {
+							size: "xs",
+							className: "flow-inspector-label",
+							children: "API Key"
+						}), /* @__PURE__ */ m(t, {
+							size: "xs",
+							type: "password",
+							value: a.apiKey ?? "",
+							placeholder: "sk-…",
+							onChange: (e) => W({ apiKey: e.target.value })
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "flow-ai-section",
+				children: [
+					/* @__PURE__ */ m("div", {
+						className: "flow-ai-section-title",
+						children: "生成流程图"
+					}),
+					/* @__PURE__ */ m("textarea", {
+						className: "flow-ai-textarea",
+						value: x,
+						placeholder: "描述你想要的流程，例如：用户注册流程，包含邮箱校验、发送验证码、创建账号等步骤（可直接粘贴图片）",
+						onChange: (e) => S(e.target.value),
+						onPaste: K,
+						onPointerDown: (e) => e.stopPropagation()
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "flow-ai-image-row",
+						children: [
+							/* @__PURE__ */ m("input", {
+								ref: B,
+								type: "file",
+								accept: "image/*",
+								style: { display: "none" },
+								onChange: G
+							}),
+							C ? /* @__PURE__ */ h("div", {
+								className: "flow-ai-image-preview",
+								children: [/* @__PURE__ */ m("img", {
+									src: C,
+									alt: "参考图"
+								}), /* @__PURE__ */ m("button", {
+									type: "button",
+									className: "flow-ai-image-remove",
+									title: "移除图片",
+									onClick: () => w(null),
+									children: "×"
+								})]
+							}) : /* @__PURE__ */ m(e, {
+								size: "xs",
+								variant: "ghost",
+								onClick: () => B.current?.click(),
+								children: "上传流程图图片"
+							}),
+							/* @__PURE__ */ m("span", {
+								className: "flow-ai-hint",
+								children: "或粘贴图片 (Ctrl/⌘+V)"
+							})
+						]
+					}),
+					/* @__PURE__ */ m("div", {
+						className: "flow-ai-actions",
+						children: T ? /* @__PURE__ */ m(e, {
+							size: "xs",
+							variant: "ghost",
+							onClick: Y,
+							children: "停止"
+						}) : /* @__PURE__ */ m(e, {
+							size: "xs",
+							variant: "primary",
+							onClick: J,
+							children: "生成流程图"
+						})
+					}),
+					(T || q) && /* @__PURE__ */ h("div", {
+						className: "flow-ai-stream",
+						children: [
+							/* @__PURE__ */ h("div", {
+								className: "flow-ai-progress",
+								children: [/* @__PURE__ */ m("div", {
+									className: "flow-ai-progress-track",
+									children: /* @__PURE__ */ m("div", {
+										className: "flow-ai-progress-bar",
+										style: { width: `${$}%` }
+									})
+								}), /* @__PURE__ */ h("span", {
+									className: "flow-ai-progress-label",
+									children: [$, "%"]
+								})]
+							}),
+							/* @__PURE__ */ h("button", {
+								type: "button",
+								className: "flow-ai-stream-header",
+								onClick: () => M((e) => !e),
+								children: [
+									/* @__PURE__ */ m("span", {
+										className: `flow-ai-stream-chevron${j ? " flow-ai-stream-chevron--open" : ""}`,
+										children: "▸"
+									}),
+									/* @__PURE__ */ m("span", { children: "返回内容" }),
+									/* @__PURE__ */ h("span", {
+										className: "flow-ai-stream-count",
+										children: [Q.toLocaleString(), " 字符"]
+									})
+								]
+							}),
+							j ? /* @__PURE__ */ m("pre", {
+								ref: V,
+								className: "flow-ai-stream-body",
+								children: q || "等待返回…"
+							}) : q && /* @__PURE__ */ m("pre", {
+								ref: H,
+								className: "flow-ai-stream-tail",
+								children: q
+							})
+						]
+					}),
+					k && !D && /* @__PURE__ */ m("div", {
+						className: "flow-ai-status",
+						children: k
+					}),
+					D && /* @__PURE__ */ m("div", {
+						className: "flow-media-error",
+						children: D
+					})
+				]
+			}),
+			F && /* @__PURE__ */ m("div", {
+				className: "flow-ai-dialog-overlay",
+				onClick: () => I(null),
+				children: /* @__PURE__ */ h("div", {
+					className: "flow-ai-dialog",
+					role: "dialog",
+					"aria-modal": "true",
+					"aria-label": "流程图已生成",
+					onClick: (e) => e.stopPropagation(),
+					children: [
+						/* @__PURE__ */ m("div", {
+							className: "flow-ai-dialog-title",
+							children: "流程图已生成"
+						}),
+						/* @__PURE__ */ m("div", {
+							className: "flow-ai-dialog-desc",
+							children: "插入：将生成内容追加到当前画布；替换：清空当前画布后再插入。"
+						}),
+						/* @__PURE__ */ h("div", {
+							className: "flow-ai-dialog-actions",
+							children: [
+								/* @__PURE__ */ m(e, {
+									size: "xs",
+									variant: "ghost",
+									onClick: () => I(null),
+									children: "取消"
+								}),
+								/* @__PURE__ */ m(e, {
+									size: "xs",
+									variant: "neutral",
+									outline: !0,
+									onClick: X,
+									children: "插入"
+								}),
+								/* @__PURE__ */ m(e, {
+									size: "xs",
+									variant: "primary",
+									onClick: Z,
+									children: "替换"
+								})
+							]
+						})
+					]
+				})
+			})
+		]
+	});
 }
-export {
-  Oe as AIPanelContent
-};
+//#endregion
+export { x as AIPanelContent };
 
 //# sourceMappingURL=AIPanel.js.map