@monaco-ai-editor/react 0.1.0

package/dist/index.js

@@ -0,0 +1,870 @@
+// src/components/EditorPanel.tsx
+import { useRef, useEffect, useState, useMemo } from "react";
+import Editor, { loader } from "@monaco-editor/react";
+import {
+  EditorController,
+  registerSqlCompletion,
+  registerAiInlineCompletion,
+  registerAiCompletionCommand
+} from "@monaco-ai-editor/core";
+
+// src/hooks/useOptionalCoordinator.ts
+import { useContext } from "react";
+
+// src/context/internal.ts
+import { createContext } from "react";
+var EditorCoordinatorContext = createContext(null);
+
+// src/hooks/useOptionalCoordinator.ts
+function useOptionalCoordinator() {
+  return useContext(EditorCoordinatorContext);
+}
+
+// src/components/EditorPanel.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var EditorPanel = ({
+  value,
+  onChange,
+  language,
+  theme,
+  vsPath,
+  sqlSchema,
+  builtinSqlExcludeLabels,
+  apiConfig: apiConfigProp,
+  completionProviders,
+  onMount,
+  minimap,
+  editorOptions,
+  onAiError,
+  className,
+  loading
+}) => {
+  const coordinator = useOptionalCoordinator();
+  const effectiveLanguage = language ?? coordinator?.editorState.language ?? "typescript";
+  const effectiveTheme = theme ?? coordinator?.editorState.theme ?? "vs-dark";
+  const effectiveApiConfig = apiConfigProp ?? coordinator?.apiConfig ?? null;
+  const effectiveSqlSchema = sqlSchema ?? coordinator?.sqlSchema ?? {};
+  const effectiveProviders = completionProviders ?? coordinator?.completionProviders ?? [];
+  const controllerRef = useRef(null);
+  const apiConfigRef = useRef(effectiveApiConfig);
+  const pendingRef = useRef(null);
+  const [aiLoading, setAiLoading] = useState(false);
+  const [aiError, setAiError] = useState(null);
+  const errorTimerRef = useRef(null);
+  useEffect(() => {
+    if (vsPath) {
+      loader.config({ paths: { vs: vsPath } });
+    }
+  }, [vsPath]);
+  useEffect(() => {
+    apiConfigRef.current = effectiveApiConfig;
+  }, [effectiveApiConfig]);
+  const showAiError = (msg) => {
+    if (errorTimerRef.current) clearTimeout(errorTimerRef.current);
+    setAiError(msg);
+    onAiError?.(msg);
+    errorTimerRef.current = setTimeout(() => setAiError(null), 4e3);
+  };
+  const schemaRef = useRef(effectiveSqlSchema);
+  useEffect(() => {
+    schemaRef.current = effectiveSqlSchema;
+  }, [effectiveSqlSchema]);
+  const excludeLabelsRef = useRef(
+    new Set((builtinSqlExcludeLabels ?? []).map((l) => l.toUpperCase()))
+  );
+  useEffect(() => {
+    excludeLabelsRef.current = new Set((builtinSqlExcludeLabels ?? []).map((l) => l.toUpperCase()));
+  }, [builtinSqlExcludeLabels]);
+  const handleBeforeMount = (monaco) => {
+    window.__monaco_ai_monaco = monaco;
+  };
+  const handleMount = (editor, monaco) => {
+    registerSqlCompletion(monaco, schemaRef, excludeLabelsRef);
+    registerAiInlineCompletion(monaco, pendingRef);
+    for (const provider of effectiveProviders) {
+      const langs = provider.languages ?? ["*"];
+      for (const lang of langs) {
+        monaco.languages.registerCompletionItemProvider(lang, {
+          triggerCharacters: provider.triggerCharacters,
+          provideCompletionItems: async (model, position, context) => {
+            const ctx = {
+              monaco,
+              model,
+              position,
+              lineText: model.getLineContent(position.lineNumber),
+              currentWord: model.getWordUntilPosition(position).word,
+              fullText: model.getValue(),
+              triggerCharacter: context.triggerCharacter
+            };
+            if (provider.shouldTrigger && !provider.shouldTrigger(ctx)) {
+              return { suggestions: [] };
+            }
+            return { suggestions: await provider.provide(ctx) };
+          }
+        });
+      }
+    }
+    registerAiCompletionCommand(
+      editor,
+      () => apiConfigRef.current,
+      pendingRef,
+      setAiLoading,
+      showAiError
+    );
+    const controller = createControllerFromEditor(editor, monaco);
+    controllerRef.current = controller;
+    if (coordinator) {
+      coordinator.setEditor(controller);
+      coordinator.bus.registerEditor(controller);
+      editor.onDidChangeCursorPosition((e) => {
+        coordinator.patchEditorState({
+          cursorLine: e.position.lineNumber,
+          cursorColumn: e.position.column
+        });
+      });
+      editor.onDidChangeModelContent(() => {
+        coordinator.patchEditorState({ value: editor.getValue() });
+      });
+    }
+    onMount?.(controller);
+  };
+  useEffect(() => {
+    return () => {
+      if (errorTimerRef.current) clearTimeout(errorTimerRef.current);
+      if (coordinator && controllerRef.current) {
+        coordinator.setEditor(null);
+      }
+    };
+  }, []);
+  const mergedOptions = useMemo(
+    () => {
+      const defaultMinimap = {
+        enabled: true,
+        side: "right",
+        showSlider: "mouseover",
+        renderCharacters: true,
+        maxColumn: 120
+      };
+      const minimapFromProp = typeof minimap === "boolean" ? { enabled: minimap } : minimap;
+      const mergedMinimap = {
+        ...defaultMinimap,
+        ...minimapFromProp,
+        ...editorOptions?.minimap
+      };
+      return {
+        fontSize: 14,
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+        // 让 suggest/hover/find 等溢出浮层以 fixed 定位渲染到 body 层级，
+        // 避免被祖先的 overflow:hidden 裁剪（如 tooltip 贴边被遮挡）
+        fixedOverflowWidgets: true,
+        lineNumbers: "on",
+        renderLineHighlight: "all",
+        smoothScrolling: true,
+        cursorBlinking: "smooth",
+        bracketPairColorization: { enabled: true },
+        tabSize: 2,
+        wordWrap: "on",
+        folding: true,
+        formatOnPaste: true,
+        formatOnType: false,
+        suggestOnTriggerCharacters: true,
+        quickSuggestions: { other: true, comments: false, strings: false },
+        acceptSuggestionOnCommitCharacter: true,
+        acceptSuggestionOnEnter: "on",
+        inlineSuggest: { enabled: true },
+        tabCompletion: "on",
+        ...editorOptions,
+        minimap: mergedMinimap
+      };
+    },
+    [minimap, editorOptions]
+  );
+  return /* @__PURE__ */ jsxs("div", { className, style: { position: "relative", flex: 1, height: "100%" }, children: [
+    aiLoading && /* @__PURE__ */ jsxs("div", { className: "mae-ai-loading", style: loadingStyle, children: [
+      /* @__PURE__ */ jsx("span", { className: "mae-spinner", style: spinnerStyle }),
+      " AI \u8865\u5168\u4E2D\u2026"
+    ] }),
+    aiError && /* @__PURE__ */ jsx("div", { onClick: () => setAiError(null), style: errorStyle, title: "\u70B9\u51FB\u5173\u95ED", children: aiError }),
+    /* @__PURE__ */ jsx(
+      Editor,
+      {
+        height: "100%",
+        language: effectiveLanguage,
+        theme: effectiveTheme,
+        value,
+        loading,
+        onChange: (val) => onChange?.(val ?? ""),
+        beforeMount: handleBeforeMount,
+        onMount: handleMount,
+        options: mergedOptions
+      }
+    )
+  ] });
+};
+function createControllerFromEditor(editor, monaco) {
+  const fake = Object.create(EditorController.prototype);
+  fake.editor = editor;
+  fake.monaco = monaco;
+  fake.disposables = [];
+  fake.pendingCompletionRef = { current: null };
+  fake.customProviders = [];
+  fake.listeners = {};
+  return fake;
+}
+var loadingStyle = {
+  position: "absolute",
+  bottom: 32,
+  right: 16,
+  zIndex: 10,
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  borderRadius: 9999,
+  border: "1px solid rgba(59,130,246,0.3)",
+  background: "rgba(17,24,39,0.9)",
+  padding: "4px 12px",
+  fontSize: 12,
+  color: "#60a5fa"
+};
+var spinnerStyle = {
+  display: "inline-block",
+  width: 12,
+  height: 12,
+  border: "2px solid rgba(96,165,250,0.3)",
+  borderTopColor: "#60a5fa",
+  borderRadius: "50%",
+  animation: "mae-spin 0.8s linear infinite"
+};
+var errorStyle = {
+  position: "absolute",
+  bottom: 32,
+  right: 16,
+  zIndex: 10,
+  maxWidth: 320,
+  cursor: "pointer",
+  borderRadius: 8,
+  border: "1px solid rgba(239,68,68,0.4)",
+  background: "rgba(17,24,39,0.95)",
+  padding: "8px 12px",
+  fontSize: 12,
+  color: "#f87171",
+  lineHeight: 1.5
+};
+
+// src/components/AiChatPanel.tsx
+import {
+  useState as useState2,
+  useRef as useRef2,
+  useEffect as useEffect2,
+  useCallback
+} from "react";
+import { DiffEditor } from "@monaco-editor/react";
+import {
+  AiChatController
+} from "@monaco-ai-editor/core";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function parseContent(raw, isStreaming) {
+  const parts = [];
+  const blockRe = /```(\w*)\n?([\s\S]*?)```/g;
+  let last = 0;
+  let m;
+  while ((m = blockRe.exec(raw)) !== null) {
+    if (m.index > last) parts.push({ type: "text", content: raw.slice(last, m.index) });
+    parts.push({ type: "code", lang: m[1] || "code", content: m[2].trimEnd() });
+    last = m.index + m[0].length;
+  }
+  const remaining = raw.slice(last);
+  if (remaining) {
+    const idx = remaining.indexOf("```");
+    if (idx !== -1) {
+      if (idx > 0) parts.push({ type: "text", content: remaining.slice(0, idx) });
+      const block = remaining.slice(idx + 3);
+      const lm = block.match(/^(\w*)\n?/);
+      parts.push({ type: "code", lang: lm?.[1] ?? "", content: block.slice(lm?.[0]?.length ?? 0) + (isStreaming ? "\u258B" : "") });
+    } else {
+      parts.push({ type: "text", content: remaining + (isStreaming ? "\u258B" : "") });
+    }
+  } else if (isStreaming && raw.length > 0 && !raw.endsWith("```")) {
+    parts.push({ type: "text", content: "\u258B" });
+  }
+  return parts;
+}
+var MessageContent = ({ content, isStreaming, onInsertCode, onShowDiff }) => {
+  const parts = parseContent(content, isStreaming);
+  if (isStreaming && content === "") return /* @__PURE__ */ jsx2("span", { style: { animation: "pulse 1s infinite", color: "#9ca3af" }, children: "\u258B" });
+  return /* @__PURE__ */ jsx2(Fragment, { children: parts.map(
+    (p, i) => p.type === "code" ? /* @__PURE__ */ jsxs2("div", { style: { margin: "8px 0", borderRadius: 8, overflow: "hidden", border: "1px solid rgb(75,85,99)" }, children: [
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "4px 12px", background: "rgb(55,65,71)" }, children: [
+        /* @__PURE__ */ jsx2("span", { style: { fontSize: 11, color: "rgb(156,163,175)" }, children: p.lang }),
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8 }, children: [
+          /* @__PURE__ */ jsx2("button", { onClick: () => navigator.clipboard.writeText(p.content), style: codeBtnStyle, children: "\u590D\u5236" }),
+          onShowDiff && /* @__PURE__ */ jsx2("button", { onClick: () => onShowDiff(p.content, p.lang), style: { ...codeBtnStyle, color: "#fbbf24" }, children: "\u5DEE\u5F02" }),
+          onInsertCode && /* @__PURE__ */ jsx2("button", { onClick: () => onInsertCode(p.content), style: { ...codeBtnStyle, color: "#60a5fa" }, children: "\u63D2\u5165" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx2("pre", { style: { margin: 0, padding: 12, overflowX: "auto", background: "rgb(3,7,18)", fontSize: 12, lineHeight: 1.6, color: "rgb(229,231,235)" }, children: /* @__PURE__ */ jsx2("code", { children: p.content }) })
+    ] }, i) : /* @__PURE__ */ jsx2("span", { style: { whiteSpace: "pre-wrap", lineHeight: 1.6 }, children: p.content }, i)
+  ) });
+};
+var codeBtnStyle = {
+  fontSize: 11,
+  color: "rgb(156,163,175)",
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  padding: 0
+};
+var MIN_WIDTH = 260;
+var MAX_WIDTH = 720;
+var AiChatPanel = (props) => {
+  const coordinator = useOptionalCoordinator();
+  const [width, setWidth] = useState2(props.defaultWidth ?? 320);
+  const [messages, setMessages] = useState2([]);
+  const [input, setInput] = useState2("");
+  const [loading, setLoading] = useState2(false);
+  const [showSettings, setShowSettings] = useState2(false);
+  const [configDraft, setConfigDraft] = useState2(props.apiConfig ?? coordinator?.apiConfig ?? { baseUrl: "", apiKey: "", model: "" });
+  const [diffState, setDiffState] = useState2(null);
+  const messagesEndRef = useRef2(null);
+  const abortRef = useRef2(null);
+  const ctrlRef = useRef2(null);
+  const isDragging = useRef2(false);
+  const dragStartX = useRef2(0);
+  const dragStartW = useRef2(0);
+  const editorContent = props.editorContent ?? coordinator?.editor?.getValue() ?? "";
+  const language = props.language ?? coordinator?.editorState.language;
+  const effectiveApiConfig = props.apiConfig ?? coordinator?.apiConfig ?? configDraft;
+  useEffect2(() => {
+    const ctrl = new AiChatController(effectiveApiConfig);
+    ctrlRef.current = ctrl;
+    const offAdd = ctrl.on("messageAdded", (msg) => setMessages((prev) => [...prev, msg]));
+    const offUpd = ctrl.on("messageUpdated", (msg) => setMessages((prev) => prev.map((m) => m.id === msg.id ? msg : m)));
+    const offClear = ctrl.on("cleared", () => setMessages([]));
+    const offLoad = ctrl.on("loadingChange", ({ loading: l }) => setLoading(l));
+    if (coordinator) coordinator.setChat(ctrl);
+    return () => {
+      offAdd();
+      offUpd();
+      offClear();
+      offLoad();
+      ctrl.dispose();
+    };
+  }, []);
+  useEffect2(() => {
+    if (ctrlRef.current) ctrlRef.current.setApiConfig(effectiveApiConfig);
+    setConfigDraft(effectiveApiConfig);
+  }, [effectiveApiConfig]);
+  useEffect2(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  const handleSend = useCallback(() => {
+    ctrlRef.current?.send(input, { editorContent, language });
+    setInput("");
+  }, [input, editorContent, language]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  const handleStop = () => ctrlRef.current?.stop();
+  const handleClear = () => ctrlRef.current?.clear();
+  const handleSaveConfig = () => {
+    if (coordinator?.onApiConfigChange) {
+      coordinator.onApiConfigChange(configDraft);
+    }
+    if (props.onApiConfigChange) {
+      props.onApiConfigChange(configDraft);
+    }
+    setShowSettings(false);
+  };
+  const handleAddEditorContext = () => {
+    if (!editorContent) return;
+    const snippet = `\u4EE5\u4E0B\u662F\u5F53\u524D\u7F16\u8F91\u5668\u4E2D\u7684${language ? ` ${language} ` : ""}\u4EE3\u7801\uFF1A
+\`\`\`${language}
+${editorContent}
+\`\`\``;
+    setInput((prev) => prev.trim() ? `${prev}
+
+${snippet}` : snippet);
+  };
+  const handleInsert = props.onInsertCode ? props.onInsertCode : (code) => coordinator?.bus?.insertToEditor(code);
+  const handleReplace = props.onReplaceCode ? props.onReplaceCode : (code) => coordinator?.bus?.replaceEditor(code);
+  const handleShowDiff = useCallback((aiCode, codeLang) => {
+    setDiffState({ original: editorContent ?? "", modified: aiCode, language: codeLang || language || "plaintext" });
+  }, [editorContent, language]);
+  const handleApplyDiff = () => {
+    if (!diffState) return;
+    if (handleReplace) handleReplace(diffState.modified);
+    else if (handleInsert) handleInsert(diffState.modified);
+    setDiffState(null);
+  };
+  const handleResizeMouseDown = (e) => {
+    e.preventDefault();
+    isDragging.current = true;
+    dragStartX.current = e.clientX;
+    dragStartW.current = width;
+    const onMove = (ev) => {
+      const next = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, dragStartW.current + (dragStartX.current - ev.clientX)));
+      setWidth(next);
+    };
+    const onUp = () => {
+      isDragging.current = false;
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      document.body.style.cursor = "";
+    };
+    document.body.style.cursor = "col-resize";
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  };
+  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative", display: "flex", flexDirection: "column", borderLeft: "1px solid rgb(55,65,81)", background: "rgb(17,24,39)", width, height: "100%" }, children: [
+    /* @__PURE__ */ jsx2("div", { onMouseDown: handleResizeMouseDown, style: { position: "absolute", left: 0, top: 0, width: 4, height: "100%", cursor: "col-resize", zIndex: 10 } }),
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", padding: "8px 12px", borderBottom: "1px solid rgb(55,65,81)" }, children: [
+      /* @__PURE__ */ jsxs2("svg", { style: { width: 16, height: 16, color: "#60a5fa", marginRight: 8 }, viewBox: "0 0 20 20", fill: "currentColor", children: [
+        /* @__PURE__ */ jsx2("path", { d: "M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" }),
+        /* @__PURE__ */ jsx2("path", { d: "M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" })
+      ] }),
+      /* @__PURE__ */ jsx2("span", { style: { flex: 1, fontSize: 13, fontWeight: 500, color: "#fff" }, children: "AI \u5BF9\u8BDD" }),
+      /* @__PURE__ */ jsx2("button", { onClick: () => {
+        setConfigDraft(effectiveApiConfig);
+        setShowSettings((v) => !v);
+      }, style: { ...iconBtnStyle, color: showSettings ? "#60a5fa" : "#9ca3af" }, title: "\u8BBE\u7F6E", children: /* @__PURE__ */ jsxs2("svg", { style: { width: 16, height: 16 }, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+        /* @__PURE__ */ jsx2("path", { d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }),
+        /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3" })
+      ] }) }),
+      /* @__PURE__ */ jsx2("button", { onClick: handleClear, style: iconBtnStyle, title: "\u6E05\u7A7A", children: /* @__PURE__ */ jsx2("svg", { style: { width: 16, height: 16 }, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx2("path", { d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }) }),
+      props.onClose && /* @__PURE__ */ jsx2("button", { onClick: props.onClose, style: iconBtnStyle, title: "\u5173\u95ED", children: /* @__PURE__ */ jsx2("svg", { style: { width: 16, height: 16 }, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx2("path", { d: "M6 18L18 6M6 6l12 12" }) }) })
+    ] }),
+    showSettings && /* @__PURE__ */ jsxs2("div", { style: { padding: 12, borderBottom: "1px solid rgb(55,65,81)", background: "rgb(31,41,55)" }, children: [
+      /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, fontWeight: 600, color: "#d1d5db", marginBottom: 12 }, children: "API \u914D\u7F6E" }),
+      ["baseUrl", "apiKey", "model"].map((field) => /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2("label", { style: { display: "block", fontSize: 11, color: "#9ca3af", marginBottom: 4 }, children: field === "baseUrl" ? "Base URL" : field === "apiKey" ? "API Key" : "\u6A21\u578B" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: field === "apiKey" ? "password" : "text",
+            value: configDraft[field],
+            onChange: (e) => setConfigDraft((p) => ({ ...p, [field]: e.target.value })),
+            placeholder: field === "baseUrl" ? "https://api.openai.com/v1" : field === "model" ? "gpt-4o-mini" : "",
+            style: inputStyle
+          }
+        )
+      ] }, field)),
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, marginTop: 12 }, children: [
+        /* @__PURE__ */ jsx2("button", { onClick: handleSaveConfig, style: { flex: 1, padding: "6px 0", fontSize: 12, background: "rgb(37,99,235)", color: "#fff", border: "none", borderRadius: 4, cursor: "pointer" }, children: "\u4FDD\u5B58" }),
+        /* @__PURE__ */ jsx2("button", { onClick: () => setShowSettings(false), style: { flex: 1, padding: "6px 0", fontSize: 12, background: "rgb(75,85,99)", color: "#fff", border: "none", borderRadius: 4, cursor: "pointer" }, children: "\u53D6\u6D88" })
+      ] })
+    ] }),
+    diffState && /* @__PURE__ */ jsxs2("div", { style: { flex: 1, display: "flex", flexDirection: "column", background: "rgb(17,24,39)" }, children: [
+      /* @__PURE__ */ jsxs2("div", { style: { padding: "4px 8px", borderBottom: "1px solid rgb(55,65,81)", background: "rgb(31,41,55)", display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx2("span", { style: { fontSize: 12, color: "#fff" }, children: "Diff \u5BF9\u6BD4" }),
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8 }, children: [
+          /* @__PURE__ */ jsx2("button", { onClick: handleApplyDiff, style: { fontSize: 11, color: "#60a5fa", background: "transparent", border: "none", cursor: "pointer" }, children: "\u5E94\u7528\u66F4\u6539" }),
+          /* @__PURE__ */ jsx2("button", { onClick: () => setDiffState(null), style: { fontSize: 11, color: "#9ca3af", background: "transparent", border: "none", cursor: "pointer" }, children: "\u5173\u95ED" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx2(
+        DiffEditor,
+        {
+          height: "100%",
+          language: diffState.language,
+          original: diffState.original,
+          modified: diffState.modified,
+          theme: "vs-dark"
+        }
+      )
+    ] }),
+    !diffState && /* @__PURE__ */ jsxs2("div", { style: { flex: 1, overflowY: "auto", padding: 12 }, children: [
+      messages.length === 0 && /* @__PURE__ */ jsxs2("div", { style: { display: "flex", height: "100%", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center" }, children: [
+        !effectiveApiConfig.apiKey.trim() && /* @__PURE__ */ jsxs2("div", { style: { width: "100%", marginBottom: 16, padding: "8px 12px", borderRadius: 8, border: "1px solid rgba(250,204,21,0.4)", background: "rgba(250,204,21,0.1)", textAlign: "left" }, children: [
+          /* @__PURE__ */ jsx2("p", { style: { marginBottom: 4, fontSize: 11, fontWeight: 600, color: "#fbbf24" }, children: "\u26A0\uFE0F \u672A\u914D\u7F6E API Key" }),
+          /* @__PURE__ */ jsx2("p", { style: { fontSize: 11, color: "rgba(251,191,36,0.8)", lineHeight: 1.5 }, children: "\u8BF7\u70B9\u51FB\u53F3\u4E0A\u89D2 \u2699\uFE0F \u6309\u94AE\u586B\u5199\u914D\u7F6E\u540E\u5F00\u59CB\u5BF9\u8BDD" })
+        ] }),
+        /* @__PURE__ */ jsx2("svg", { style: { width: 40, height: 40, color: "rgb(75,85,99)", marginBottom: 12 }, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx2("path", { d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
+        !loading && /* @__PURE__ */ jsx2("p", { style: { fontSize: 12, color: "#6b7280" }, children: "\u5F00\u59CB\u4F60\u7684 AI \u7F16\u7A0B\u5BF9\u8BDD\u5427" })
+      ] }),
+      messages.map((msg) => /* @__PURE__ */ jsx2("div", { style: { marginBottom: 12, display: "flex", flexDirection: "column", alignItems: msg.role === "user" ? "flex-end" : "flex-start" }, children: /* @__PURE__ */ jsx2("div", { style: { maxWidth: "90%", padding: "8px 12px", borderRadius: 8, fontSize: 12, color: "#e5e7eb", background: msg.role === "user" ? "rgb(55,65,81)" : "rgb(31,41,55)", lineHeight: 1.5 }, children: msg.role === "assistant" ? /* @__PURE__ */ jsx2(MessageContent, { content: msg.content, isStreaming: msg.isStreaming, onInsertCode: handleInsert, onShowDiff: handleShowDiff }) : /* @__PURE__ */ jsx2("span", { style: { whiteSpace: "pre-wrap" }, children: msg.content }) }) }, msg.id)),
+      /* @__PURE__ */ jsx2("div", { ref: messagesEndRef })
+    ] }),
+    !diffState && /* @__PURE__ */ jsxs2("div", { style: { padding: "8px 12px", borderTop: "1px solid rgb(55,65,81)" }, children: [
+      /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 4, marginBottom: 4 }, children: /* @__PURE__ */ jsx2("button", { onClick: handleAddEditorContext, style: { fontSize: 11, color: "#9ca3af", background: "transparent", border: "none", cursor: "pointer" }, title: "\u5F15\u7528\u7F16\u8F91\u5668\u4EE3\u7801", children: "+ \u5F15\u7528\u4EE3\u7801" }) }),
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ jsx2(
+          "textarea",
+          {
+            value: input,
+            onChange: (e) => setInput(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder: "\u8F93\u5165\u6D88\u606F\uFF0CCtrl+Enter \u53D1\u9001...",
+            style: { flex: 1, padding: "6px 8px", fontSize: 12, background: "rgb(31,41,55)", color: "#e5e7eb", border: "1px solid rgb(75,85,99)", borderRadius: 4, outline: "none", resize: "none", minHeight: 32 },
+            rows: 2
+          }
+        ),
+        loading ? /* @__PURE__ */ jsx2("button", { onClick: handleStop, style: { padding: "6px 12px", fontSize: 12, background: "rgb(220,38,38)", color: "#fff", border: "none", borderRadius: 4, cursor: "pointer", whiteSpace: "nowrap" }, children: "\u505C\u6B62" }) : /* @__PURE__ */ jsx2("button", { onClick: handleSend, style: { padding: "6px 12px", fontSize: 12, background: "rgb(37,99,235)", color: "#fff", border: "none", borderRadius: 4, cursor: "pointer", whiteSpace: "nowrap" }, children: "\u53D1\u9001" })
+      ] })
+    ] })
+  ] });
+};
+var iconBtnStyle = {
+  padding: 4,
+  color: "#9ca3af",
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  display: "flex",
+  borderRadius: 4
+};
+var inputStyle = {
+  width: "100%",
+  padding: "4px 8px",
+  fontSize: 12,
+  background: "rgb(55,65,81)",
+  color: "rgb(229,231,235)",
+  border: "1px solid rgb(75,85,99)",
+  borderRadius: 4,
+  outline: "none",
+  marginBottom: 8,
+  boxSizing: "border-box"
+};
+
+// src/components/Toolbar.tsx
+import { LANGUAGES, THEMES } from "@monaco-ai-editor/core";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Toolbar = ({
+  language,
+  theme,
+  onLanguageChange,
+  onThemeChange,
+  onFormat,
+  onToggleAiChat,
+  aiChatVisible,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className,
+      style: toolbarStyle,
+      children: [
+        /* @__PURE__ */ jsx3("div", { style: labelStyle, children: "\u8BED\u8A00" }),
+        /* @__PURE__ */ jsx3(
+          "select",
+          {
+            value: language ?? "typescript",
+            onChange: (e) => onLanguageChange?.(e.target.value),
+            style: selectStyle,
+            children: LANGUAGES.map((lang) => /* @__PURE__ */ jsx3("option", { value: lang, children: lang }, lang))
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { style: { ...labelStyle, marginLeft: 16 }, children: "\u4E3B\u9898" }),
+        /* @__PURE__ */ jsx3(
+          "select",
+          {
+            value: theme ?? "vs-dark",
+            onChange: (e) => onThemeChange?.(e.target.value),
+            style: selectStyle,
+            children: THEMES.map((t) => /* @__PURE__ */ jsx3("option", { value: t.value, children: t.label }, t.value))
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { style: { flex: 1 } }),
+        onToggleAiChat && /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            onClick: onToggleAiChat,
+            style: {
+              ...buttonStyle,
+              background: aiChatVisible ? "rgb(37,99,235)" : "rgb(55,65,81)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs3(
+                "svg",
+                {
+                  style: { width: 16, height: 16, marginRight: 4 },
+                  viewBox: "0 0 20 20",
+                  fill: "currentColor",
+                  children: [
+                    /* @__PURE__ */ jsx3("path", { d: "M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" }),
+                    /* @__PURE__ */ jsx3("path", { d: "M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" })
+                  ]
+                }
+              ),
+              "AI"
+            ]
+          }
+        ),
+        onFormat && /* @__PURE__ */ jsx3("button", { onClick: onFormat, style: { ...buttonStyle, marginLeft: 8 }, children: "\u683C\u5F0F\u5316" })
+      ]
+    }
+  );
+};
+var toolbarStyle = {
+  display: "flex",
+  alignItems: "center",
+  padding: "8px 16px",
+  background: "rgb(31,41,55)",
+  borderBottom: "1px solid rgb(55,65,81)"
+};
+var labelStyle = {
+  fontSize: 13,
+  color: "rgb(156,163,175)"
+};
+var selectStyle = {
+  marginLeft: 8,
+  padding: "4px 8px",
+  fontSize: 13,
+  background: "rgb(55,65,81)",
+  color: "rgb(229,231,235)",
+  border: "1px solid rgb(75,85,99)",
+  borderRadius: 4,
+  outline: "none"
+};
+var buttonStyle = {
+  padding: "4px 12px",
+  fontSize: 13,
+  color: "#fff",
+  background: "rgb(55,65,81)",
+  border: "none",
+  borderRadius: 4,
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center"
+};
+
+// src/components/StatusBar.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var StatusBar = ({
+  language,
+  lineCount = 0,
+  charCount = 0,
+  cursorLine = 1,
+  cursorColumn = 1,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs4("div", { className, style: statusBarStyle, children: [
+    /* @__PURE__ */ jsxs4("span", { style: itemStyle, children: [
+      "Ln ",
+      cursorLine,
+      ", Col ",
+      cursorColumn
+    ] }),
+    /* @__PURE__ */ jsx4("span", { style: dividerStyle, children: "|" }),
+    /* @__PURE__ */ jsxs4("span", { style: itemStyle, children: [
+      lineCount,
+      " \u884C"
+    ] }),
+    /* @__PURE__ */ jsx4("span", { style: dividerStyle, children: "|" }),
+    /* @__PURE__ */ jsxs4("span", { style: itemStyle, children: [
+      charCount,
+      " \u5B57\u7B26"
+    ] }),
+    /* @__PURE__ */ jsx4("div", { style: { flex: 1 } }),
+    /* @__PURE__ */ jsx4("span", { style: itemStyle, children: language?.toUpperCase() ?? "" }),
+    /* @__PURE__ */ jsx4("span", { style: dividerStyle, children: "|" }),
+    /* @__PURE__ */ jsx4("span", { style: itemStyle, children: "UTF-8" })
+  ] });
+};
+var statusBarStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  padding: "0 16px",
+  height: 22,
+  fontSize: 11,
+  color: "#fff",
+  background: "rgb(29,78,216)"
+};
+var itemStyle = {
+  display: "flex",
+  alignItems: "center"
+};
+var dividerStyle = {
+  color: "rgba(255,255,255,0.5)"
+};
+
+// src/components/MonacoAiEditor.tsx
+import { useCallback as useCallback3, useState as useState4 } from "react";
+
+// src/context/EditorCoordinator.tsx
+import { useContext as useContext2, useCallback as useCallback2, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+import { EditorBus } from "@monaco-ai-editor/core";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function EditorCoordinator({
+  children,
+  language: initialLang,
+  theme: initialTheme,
+  apiConfig: initialApiConfig,
+  sqlSchema,
+  completionProviders = [],
+  onApiConfigChange
+}) {
+  const busRef = useRef3(new EditorBus());
+  const [editor, setEditor] = useState3(null);
+  const [chat, setChat] = useState3(null);
+  const [editorState, setEditorState] = useState3({
+    value: "",
+    language: initialLang ?? "typescript",
+    theme: initialTheme ?? "vs-dark",
+    cursorLine: 1,
+    cursorColumn: 1
+  });
+  const patchEditorState = useCallback2((patch) => {
+    setEditorState((prev) => ({ ...prev, ...patch }));
+  }, []);
+  const value = useMemo2(
+    () => ({
+      editor,
+      chat,
+      editorState,
+      patchEditorState,
+      setEditor,
+      setChat,
+      bus: busRef.current,
+      apiConfig: initialApiConfig ?? null,
+      sqlSchema: sqlSchema ?? {},
+      completionProviders,
+      onApiConfigChange
+    }),
+    [editor, chat, editorState, patchEditorState, initialApiConfig, sqlSchema, completionProviders, onApiConfigChange]
+  );
+  return /* @__PURE__ */ jsx5(EditorCoordinatorContext.Provider, { value, children });
+}
+function useEditorCoordinator() {
+  const ctx = useContext2(EditorCoordinatorContext);
+  if (!ctx) throw new Error("useEditorCoordinator must be used within <EditorCoordinator>");
+  return ctx;
+}
+
+// src/components/MonacoAiEditor.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var MonacoAiEditor = ({
+  language = "typescript",
+  theme = "vs-dark",
+  apiConfig,
+  onApiConfigChange,
+  sqlSchema,
+  completionProviders,
+  showAiChat: showAiChatProp = true,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx6(
+    EditorCoordinator,
+    {
+      language,
+      theme,
+      apiConfig,
+      sqlSchema,
+      completionProviders,
+      onApiConfigChange,
+      children: /* @__PURE__ */ jsx6(MonacoAiEditorInner, { ...rest, showAiChat: showAiChatProp })
+    }
+  );
+};
+var MonacoAiEditorInner = ({ value, onChange, vsPath, showToolbar = true, showStatusBar = true, showAiChat = true, className }) => {
+  const coordinator = useEditorCoordinator();
+  const [aiVisible, setAiVisible] = useState4(showAiChat);
+  const onLangChange = useCallback3((lang) => {
+    coordinator.editor?.setLanguage(lang);
+    coordinator.patchEditorState({ language: lang });
+  }, [coordinator]);
+  const onThemeChange = useCallback3((theme) => {
+    coordinator.editor?.setTheme(theme);
+    coordinator.patchEditorState({ theme });
+  }, [coordinator]);
+  const onFormat = useCallback3(() => coordinator.editor?.format(), [coordinator]);
+  const onEditorMount = useCallback3((controller) => {
+    coordinator.setEditor(controller);
+  }, [coordinator]);
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className,
+      style: { display: "flex", flexDirection: "column", height: "100%", background: "rgb(17,24,39)" },
+      children: [
+        showToolbar && /* @__PURE__ */ jsx6(
+          Toolbar,
+          {
+            language: coordinator.editorState.language,
+            theme: coordinator.editorState.theme,
+            onLanguageChange: onLangChange,
+            onThemeChange,
+            onFormat,
+            onToggleAiChat: () => setAiVisible((v) => !v),
+            aiChatVisible: aiVisible
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+          /* @__PURE__ */ jsx6(
+            EditorPanel,
+            {
+              value,
+              onChange: (v) => {
+                onChange?.(v);
+                coordinator.patchEditorState({ value: v });
+              },
+              language: coordinator.editorState.language,
+              theme: coordinator.editorState.theme,
+              vsPath,
+              onMount: onEditorMount
+            }
+          ),
+          aiVisible && /* @__PURE__ */ jsx6(AiChatPanel, { onClose: () => setAiVisible(false) })
+        ] }),
+        showStatusBar && /* @__PURE__ */ jsx6(
+          StatusBar,
+          {
+            language: coordinator.editorState.language,
+            lineCount: coordinator.editorState.value.split("\n").length,
+            charCount: coordinator.editorState.value.length,
+            cursorLine: coordinator.editorState.cursorLine,
+            cursorColumn: coordinator.editorState.cursorColumn
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/utils/configureMonaco.ts
+import { loader as loader2 } from "@monaco-editor/react";
+import { LOCALES } from "@monaco-ai-editor/core";
+function configureMonaco(options = {}) {
+  const { locale = LOCALES.ZH_CN, vsPath } = options;
+  const baseUrl = (import.meta.env?.BASE_URL ?? "/").replace(/\/$/, "");
+  const effectiveVsPath = vsPath ?? `${baseUrl}/vs`;
+  const config = {
+    paths: { vs: effectiveVsPath },
+    "vs/nls": {
+      availableLanguages: { "*": locale }
+    }
+  };
+  loader2.config(config);
+}
+
+// src/index.ts
+import {
+  LANGUAGES as LANGUAGES2,
+  THEMES as THEMES2,
+  LOCALES as LOCALES2,
+  SQL_KEYWORDS,
+  SQL_FUNCTIONS,
+  SQL_DATA_TYPES
+} from "@monaco-ai-editor/core";
+export {
+  AiChatPanel,
+  EditorCoordinator,
+  EditorPanel,
+  LANGUAGES2 as LANGUAGES,
+  LOCALES2 as LOCALES,
+  MonacoAiEditor,
+  SQL_DATA_TYPES,
+  SQL_FUNCTIONS,
+  SQL_KEYWORDS,
+  StatusBar,
+  THEMES2 as THEMES,
+  Toolbar,
+  configureMonaco,
+  useEditorCoordinator
+};
+//# sourceMappingURL=index.js.map