agentic-ui-libs 1.0.0-beta.6 → 1.0.0-beta.8

package/dist/index.js

@@ -1482,6 +1482,16 @@ const Minimize2 = createLucideIcon("Minimize2", [
  * See the LICENSE file in the root directory of this source tree.
  */
 const Minus = createLucideIcon("Minus", [["path", { d: "M5 12h14", key: "1ays0h" }]]);
+/**
+ * @license lucide-react v0.294.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Pencil = createLucideIcon("Pencil", [
+  ["path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z", key: "5qss01" }],
+  ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
+]);
 /**
  * @license lucide-react v0.294.0 - ISC
  *
@@ -67671,7 +67681,7 @@ function nodeToMarkdown(node) {
     case "paragraph":
       return inlineContentToMarkdown(node.content || []);
     case "heading":
-      const level = ((_a = node.attrs) == null ? void 0 : _a.level) || 1;
+      const level = ((_a = node.attrs) == null ? void 0 : _a["level"]) || 1;
       const headingPrefix = "#".repeat(level);
       return `${headingPrefix} ${inlineContentToMarkdown(node.content || [])}`;
     case "bulletList":
@@ -67687,11 +67697,11 @@ function nodeToMarkdown(node) {
     case "taskList":
       return (node.content || []).map((item) => {
         var _a2, _b2, _c2;
-        const checked = ((_a2 = item.attrs) == null ? void 0 : _a2.checked) ? "x" : " ";
+        const checked = ((_a2 = item.attrs) == null ? void 0 : _a2["checked"]) ? "x" : " ";
         return `- [${checked}] ${inlineContentToMarkdown(((_c2 = (_b2 = item.content) == null ? void 0 : _b2[0]) == null ? void 0 : _c2.content) || [])}`;
       }).join("\n");
     case "codeBlock":
-      const language = ((_b = node.attrs) == null ? void 0 : _b.language) || "";
+      const language = ((_b = node.attrs) == null ? void 0 : _b["language"]) || "";
       const code = ((_d = (_c = node.content) == null ? void 0 : _c[0]) == null ? void 0 : _d.text) || "";
       return `\`\`\`${language}
 ${code}
@@ -67754,7 +67764,7 @@ function inlineContentToMarkdown(content) {
             text = `<u>${text}</u>`;
             break;
           case "link":
-            const href = ((_a = mark.attrs) == null ? void 0 : _a.href) || "";
+            const href = ((_a = mark.attrs) == null ? void 0 : _a["href"]) || "";
             text = `[${text}](${href})`;
             break;
         }
@@ -68209,7 +68219,7 @@ function nodeToBlock(node) {
   const id = crypto.randomUUID ? crypto.randomUUID() : `block-${Date.now()}-${Math.random().toString(36).slice(2)}`;
   switch (node.type) {
     case "heading":
-      const level = ((_a = node.attrs) == null ? void 0 : _a.level) || 1;
+      const level = ((_a = node.attrs) == null ? void 0 : _a["level"]) || 1;
       return {
         id,
         type: `heading${level}`,
@@ -68248,7 +68258,7 @@ function nodeToBlock(node) {
         id,
         type: "code",
         content: [{ type: "text", text: ((_c = (_b = node.content) == null ? void 0 : _b[0]) == null ? void 0 : _c.text) || "" }],
-        meta: { language: (_d = node.attrs) == null ? void 0 : _d.language }
+        meta: { language: (_d = node.attrs) == null ? void 0 : _d["language"] }
       };
     case "blockquote":
       return {
@@ -68272,18 +68282,18 @@ function nodeContentToInline(content) {
     if (node.type === "variableChip") {
       return {
         type: "variable",
-        variableType: (_a = node.attrs) == null ? void 0 : _a.variableType,
-        path: (_b = node.attrs) == null ? void 0 : _b.path,
-        displayName: (_c = node.attrs) == null ? void 0 : _c.displayName
+        variableType: (_a = node.attrs) == null ? void 0 : _a["variableType"],
+        path: (_b = node.attrs) == null ? void 0 : _b["path"],
+        displayName: (_c = node.attrs) == null ? void 0 : _c["displayName"]
       };
     }
     if (node.type === "mentionChip") {
       return {
         type: "mention",
-        mentionType: (_d = node.attrs) == null ? void 0 : _d.mentionType,
-        id: (_e = node.attrs) == null ? void 0 : _e.id,
-        name: (_f = node.attrs) == null ? void 0 : _f.name,
-        icon: (_g = node.attrs) == null ? void 0 : _g.icon
+        mentionType: (_d = node.attrs) == null ? void 0 : _d["mentionType"],
+        id: (_e = node.attrs) == null ? void 0 : _e["id"],
+        name: (_f = node.attrs) == null ? void 0 : _f["name"],
+        icon: (_g = node.attrs) == null ? void 0 : _g["icon"]
       };
     }
     const styles = {};
@@ -68305,7 +68315,7 @@ function nodeContentToInline(content) {
           styles.code = true;
           break;
         case "link":
-          styles.link = (_h = mark.attrs) == null ? void 0 : _h.href;
+          styles.link = (_h = mark.attrs) == null ? void 0 : _h["href"];
           break;
       }
     }
@@ -68357,6 +68367,8 @@ const buildVariableSyntax = (variableType, path) => {
 const VariableChipComponent = ({
   node,
   deleteNode: deleteNode2,
+  editor,
+  getPos,
   selected
 }) => {
   const { variableType, path, displayName } = node.attrs;
@@ -68367,6 +68379,24 @@ const VariableChipComponent = ({
     e3.stopPropagation();
     deleteNode2();
   };
+  const handleEdit = (e3) => {
+    e3.preventDefault();
+    e3.stopPropagation();
+    const pos = typeof getPos === "function" ? getPos() : null;
+    if (pos !== null && editor) {
+      const event = new CustomEvent("variable-chip-edit", {
+        bubbles: true,
+        detail: {
+          variableType,
+          path,
+          displayName,
+          position: pos,
+          nodeSize: node.nodeSize
+        }
+      });
+      editor.view.dom.dispatchEvent(event);
+    }
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     NodeViewWrapper,
     {
@@ -68401,7 +68431,19 @@ const VariableChipComponent = ({
           "button",
           {
             type: "button",
-            className: "k-md-editor-variable-chip__remove inline-flex items-center justify-center w-3.5 h-3.5 p-0 border-0 bg-transparent cursor-pointer rounded-sm opacity-70 transition-opacity ml-0.5 shrink-0 hover:opacity-100",
+            className: "k-md-editor-variable-chip__edit inline-flex items-center justify-center w-3.5 h-3.5 p-0 border-0 bg-transparent cursor-pointer rounded-sm opacity-70 transition-opacity shrink-0 hover:opacity-100",
+            onClick: handleEdit,
+            onMouseDown: (e3) => e3.preventDefault(),
+            style: { color: config2.color },
+            "aria-label": "Edit variable",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Pencil, { size: 10 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            className: "k-md-editor-variable-chip__remove inline-flex items-center justify-center w-3.5 h-3.5 p-0 border-0 bg-transparent cursor-pointer rounded-sm opacity-70 transition-opacity shrink-0 hover:opacity-100",
             onClick: handleRemove,
             onMouseDown: (e3) => e3.preventDefault(),
             style: { color: config2.color },
@@ -68480,22 +68522,22 @@ const VariableChipExtension = Node$1.create({
         default: "env",
         parseHTML: (element) => element.getAttribute("data-variable-type"),
         renderHTML: (attributes) => ({
-          "data-variable-type": attributes.variableType
+          "data-variable-type": attributes["variableType"]
         })
       },
       path: {
         default: "",
         parseHTML: (element) => element.getAttribute("data-path"),
         renderHTML: (attributes) => ({
-          "data-path": attributes.path
+          "data-path": attributes["path"]
         })
       },
       displayName: {
         default: null,
         parseHTML: (element) => element.getAttribute("data-display-name"),
         renderHTML: (attributes) => {
-          if (!attributes.displayName) return {};
-          return { "data-display-name": attributes.displayName };
+          if (!attributes["displayName"]) return {};
+          return { "data-display-name": attributes["displayName"] };
         }
       }
     };
@@ -68655,29 +68697,29 @@ const MentionChipExtension = Node$1.create({
         default: "agent",
         parseHTML: (element) => element.getAttribute("data-mention-type"),
         renderHTML: (attributes) => ({
-          "data-mention-type": attributes.mentionType
+          "data-mention-type": attributes["mentionType"]
         })
       },
       id: {
         default: "",
         parseHTML: (element) => element.getAttribute("data-id"),
         renderHTML: (attributes) => ({
-          "data-id": attributes.id
+          "data-id": attributes["id"]
         })
       },
       name: {
         default: "",
         parseHTML: (element) => element.getAttribute("data-name"),
         renderHTML: (attributes) => ({
-          "data-name": attributes.name
+          "data-name": attributes["name"]
         })
       },
       icon: {
         default: null,
         parseHTML: (element) => element.getAttribute("data-icon"),
         renderHTML: (attributes) => {
-          if (!attributes.icon) return {};
-          return { "data-icon": attributes.icon };
+          if (!attributes["icon"]) return {};
+          return { "data-icon": attributes["icon"] };
         }
       }
     };
@@ -69089,8 +69131,10 @@ const SlashMenu = forwardRef(
     // Default: plain text
     range: range3,
     // The range of the slash command trigger (to delete it)
-    hiddenCategories = []
+    hiddenCategories = [],
     // Categories to hide
+    suggestionsLoading = false
+    // Loading state for suggestions
   }, ref) => {
     const [activeCategory, setActiveCategory] = useState(null);
     const [selectedIndex, setSelectedIndex] = useState(0);
@@ -69406,6 +69450,12 @@ const SlashMenu = forwardRef(
     const filteredCategoryItems = query ? visibleCategories.filter((cat) => cat.label.toLowerCase().includes(query.toLowerCase())) : visibleCategories;
     const hasBlockItems = !activeCategory && filteredBlockItems.length > 0;
     const hasCategoryItems = !activeCategory && filteredCategoryItems.length > 0;
+    if (suggestionsLoading && !activeCategory && !hasBlockItems && !hasCategoryItems) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "k-md-editor-slash-menu p-4 text-center text-gray-400 text-[13px] bg-white rounded-lg shadow-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Loading suggestions..." })
+      ] }) });
+    }
     if (!hasBlockItems && !hasCategoryItems && !activeCategory) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "k-md-editor-slash-menu p-4 text-center text-gray-400 text-[13px] bg-white rounded-lg shadow-lg", children: "No results found" });
     }
@@ -69550,8 +69600,10 @@ const SlashCommandExtension = Extension.create({
       systemVariables: [],
       contentVariables: [],
       onSelectItem: void 0,
-      highlightMentions: false
+      highlightMentions: false,
       // Default: insert as plain text
+      suggestionsLoading: false,
+      getSuggestions: void 0
     };
   },
   addProseMirrorPlugins() {
@@ -69576,19 +69628,46 @@ const SlashCommandExtension = Extension.create({
         render: () => {
           let component = null;
           let popup = null;
+          const getCurrentSuggestions = () => {
+            var _a, _b;
+            if (this.options.getSuggestions) {
+              const data = this.options.getSuggestions();
+              console.log("SlashCommand: getSuggestions() returned:", {
+                hasGetter: true,
+                agentsCount: ((_a = data.agents) == null ? void 0 : _a.length) || 0,
+                toolsCount: ((_b = data.tools) == null ? void 0 : _b.length) || 0,
+                data
+              });
+              return data;
+            }
+            console.log("SlashCommand: Using static options (no getter)");
+            return {
+              agents: this.options.agents || [],
+              tools: this.options.tools || [],
+              knowledge: this.options.knowledge || [],
+              envVariables: this.options.envVariables || [],
+              memoryVariables: this.options.memoryVariables || [],
+              systemVariables: this.options.systemVariables || [],
+              contentVariables: this.options.contentVariables || [],
+              loading: this.options.suggestionsLoading || false
+            };
+          };
           return {
             onStart: (props) => {
+              const suggestions = getCurrentSuggestions();
+              console.log("SlashCommand onStart: suggestions =", suggestions);
               component = new ReactRenderer(SlashMenu, {
                 props: {
                   ...props,
-                  agents: this.options.agents,
-                  tools: this.options.tools,
-                  knowledge: this.options.knowledge,
-                  envVariables: this.options.envVariables,
-                  memoryVariables: this.options.memoryVariables,
-                  systemVariables: this.options.systemVariables,
-                  contentVariables: this.options.contentVariables,
+                  agents: suggestions.agents,
+                  tools: suggestions.tools,
+                  knowledge: suggestions.knowledge,
+                  envVariables: suggestions.envVariables,
+                  memoryVariables: suggestions.memoryVariables,
+                  systemVariables: suggestions.systemVariables,
+                  contentVariables: suggestions.contentVariables,
                   highlightMentions: this.options.highlightMentions,
+                  suggestionsLoading: suggestions.loading,
                   range: props.range,
                   // Pass the range for deletion
                   command: (item) => {
@@ -69616,16 +69695,18 @@ const SlashCommandExtension = Extension.create({
             },
             onUpdate: (props) => {
               var _a;
+              const suggestions = getCurrentSuggestions();
               component == null ? void 0 : component.updateProps({
                 ...props,
-                agents: this.options.agents,
-                tools: this.options.tools,
-                knowledge: this.options.knowledge,
-                envVariables: this.options.envVariables,
-                memoryVariables: this.options.memoryVariables,
-                systemVariables: this.options.systemVariables,
-                contentVariables: this.options.contentVariables,
+                agents: suggestions.agents,
+                tools: suggestions.tools,
+                knowledge: suggestions.knowledge,
+                envVariables: suggestions.envVariables,
+                memoryVariables: suggestions.memoryVariables,
+                systemVariables: suggestions.systemVariables,
+                contentVariables: suggestions.contentVariables,
                 highlightMentions: this.options.highlightMentions,
+                suggestionsLoading: suggestions.loading,
                 range: props.range
                 // Update the range
               });
@@ -69679,7 +69760,9 @@ const MentionCommandExtension = Extension.create({
       agents: [],
       tools: [],
       knowledge: [],
-      onSelectItem: void 0
+      onSelectItem: void 0,
+      suggestionsLoading: false,
+      getSuggestions: void 0
     };
   },
   addProseMirrorPlugins() {
@@ -69701,14 +69784,26 @@ const MentionCommandExtension = Extension.create({
         render: () => {
           let component = null;
           let popup = null;
+          const getCurrentSuggestions = () => {
+            if (this.options.getSuggestions) {
+              return this.options.getSuggestions();
+            }
+            return {
+              agents: this.options.agents || [],
+              tools: this.options.tools || [],
+              knowledge: this.options.knowledge || [],
+              loading: this.options.suggestionsLoading || false
+            };
+          };
           return {
             onStart: (props) => {
+              const suggestions = getCurrentSuggestions();
               component = new ReactRenderer(SlashMenu, {
                 props: {
                   ...props,
-                  agents: this.options.agents,
-                  tools: this.options.tools,
-                  knowledge: this.options.knowledge,
+                  agents: suggestions.agents,
+                  tools: suggestions.tools,
+                  knowledge: suggestions.knowledge,
                   // No variables or blocks for @ mentions
                   envVariables: [],
                   memoryVariables: [],
@@ -69718,6 +69813,7 @@ const MentionCommandExtension = Extension.create({
                   // Insert as plain bold text
                   hiddenCategories: ["blocks"],
                   // Hide blocks category
+                  suggestionsLoading: suggestions.loading,
                   range: props.range,
                   command: (item) => {
                     props.editor.chain().focus().deleteRange(props.range).run();
@@ -69745,16 +69841,18 @@ const MentionCommandExtension = Extension.create({
             },
             onUpdate: (props) => {
               var _a;
+              const suggestions = getCurrentSuggestions();
               component == null ? void 0 : component.updateProps({
                 ...props,
-                agents: this.options.agents,
-                tools: this.options.tools,
-                knowledge: this.options.knowledge,
+                agents: suggestions.agents,
+                tools: suggestions.tools,
+                knowledge: suggestions.knowledge,
                 envVariables: [],
                 memoryVariables: [],
                 systemVariables: [],
                 contentVariables: [],
                 highlightMentions: false,
+                suggestionsLoading: suggestions.loading,
                 hiddenCategories: ["blocks"],
                 range: props.range
               });
@@ -69826,18 +69924,51 @@ const VariableMenu = ({
   query,
   onQueryChange,
   onSelect,
+  onCustomVariable,
   onClose,
   envVariables: envVariables2 = [],
   memoryVariables = [],
   systemVariables: systemVariables2 = [],
-  contentVariables = []
+  contentVariables = [],
+  allowCustomVariables = false,
+  editorControlled = false,
+  customInputMode = false,
+  isEditMode = false
 }) => {
+  const [customVariableInput, setCustomVariableInput] = useState("");
+  const customInputRef = useRef(null);
   const [activeCategory, setActiveCategory] = useState(null);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [currentPath, setCurrentPath] = useState([]);
   const [adjustedPosition, setAdjustedPosition] = useState(position);
   const menuRef = useRef(null);
   const inputRef = useRef(null);
+  const parsedQuery = useMemo(() => {
+    const parts = query.split(".");
+    if (parts.length > 1) {
+      const category = parts[0].toLowerCase();
+      if (["env", "memory", "system", "content"].includes(category)) {
+        return {
+          category,
+          path: parts.slice(1, -1),
+          searchTerm: parts[parts.length - 1],
+          fullPath: parts.slice(0, -1).join(".")
+        };
+      }
+    }
+    return {
+      category: null,
+      path: [],
+      searchTerm: query,
+      fullPath: ""
+    };
+  }, [query]);
+  useEffect(() => {
+    if (parsedQuery.category && parsedQuery.category !== activeCategory) {
+      setActiveCategory(parsedQuery.category);
+      setCurrentPath(parsedQuery.path);
+    }
+  }, [parsedQuery.category, parsedQuery.path, activeCategory]);
   useEffect(() => {
     if (!menuRef.current) return;
     const menuRect = menuRef.current.getBoundingClientRect();
@@ -69867,10 +69998,11 @@ const VariableMenu = ({
     { id: "content", label: "Content Variables", icon: FileText, variables: contentVariables }
   ].filter((cat) => cat.variables.length > 0);
   const getCurrentItems = useCallback(() => {
+    const searchTerm = parsedQuery.searchTerm.toLowerCase();
     if (!activeCategory) {
-      if (query) {
+      if (searchTerm) {
         return categories.filter(
-          (cat) => cat.label.toLowerCase().includes(query.toLowerCase())
+          (cat) => cat.label.toLowerCase().includes(searchTerm) || cat.id.toLowerCase().includes(searchTerm)
         );
       }
       return categories;
@@ -69878,29 +70010,99 @@ const VariableMenu = ({
     const category = categories.find((c3) => c3.id === activeCategory);
     if (!category) return [];
     let variables = category.variables;
-    for (const segment of currentPath) {
-      const parent = variables.find((v) => v.name === segment);
+    const pathToFollow = parsedQuery.path.length > 0 ? parsedQuery.path : currentPath;
+    for (const segment of pathToFollow) {
+      const parent = variables.find((v) => v.name.toLowerCase() === segment.toLowerCase());
       if (parent == null ? void 0 : parent.children) {
         variables = parent.children;
       } else {
         break;
       }
     }
-    if (query) {
+    if (searchTerm) {
       variables = variables.filter(
         (v) => {
           var _a;
-          return v.name.toLowerCase().includes(query.toLowerCase()) || ((_a = v.description) == null ? void 0 : _a.toLowerCase().includes(query.toLowerCase()));
+          return v.name.toLowerCase().includes(searchTerm) || ((_a = v.description) == null ? void 0 : _a.toLowerCase().includes(searchTerm));
         }
       );
     }
     return variables;
-  }, [activeCategory, categories, currentPath, query]);
+  }, [activeCategory, categories, currentPath, parsedQuery]);
+  const shouldShowCustomOption = useMemo(() => {
+    if (!allowCustomVariables || !query.trim()) return false;
+    const items2 = getCurrentItems();
+    const hasExactMatch = items2.some((item) => {
+      if ("variables" in item) return false;
+      return item.name.toLowerCase() === parsedQuery.searchTerm.toLowerCase();
+    });
+    return !hasExactMatch && query.length > 0;
+  }, [allowCustomVariables, query, getCurrentItems, parsedQuery.searchTerm]);
+  const getCustomVariablePath = useCallback(() => {
+    if (query.includes(".")) {
+      return query;
+    }
+    if (activeCategory) {
+      const pathParts = [activeCategory, ...currentPath, query].filter(Boolean);
+      return pathParts.join(".");
+    }
+    return query;
+  }, [query, activeCategory, currentPath]);
   const items = getCurrentItems();
+  const totalItems = items.length + (shouldShowCustomOption ? 1 : 0);
+  const handleBack = useCallback(() => {
+    if (currentPath.length > 0) {
+      setCurrentPath((prev) => prev.slice(0, -1));
+    } else {
+      setActiveCategory(null);
+    }
+    onQueryChange("");
+  }, [currentPath.length, onQueryChange]);
+  const handleItemClick = useCallback((item) => {
+    if (item === "custom") {
+      if (onCustomVariable) {
+        onCustomVariable(getCustomVariablePath());
+      }
+      return;
+    }
+    if ("variables" in item) {
+      setActiveCategory(item.id);
+      setCurrentPath([]);
+      onQueryChange(item.id + ".");
+    } else {
+      if (item.children && item.children.length > 0) {
+        setCurrentPath((prev) => [...prev, item.name]);
+        const newPath = activeCategory ? `${activeCategory}.${[...currentPath, item.name].join(".")}.` : `${item.name}.`;
+        onQueryChange(newPath);
+      } else {
+        const fullPath = activeCategory ? [...currentPath, item.name].join(".") : item.path;
+        onSelect({
+          ...item,
+          path: fullPath
+        });
+      }
+    }
+  }, [onCustomVariable, getCustomVariablePath, onQueryChange, activeCategory, currentPath, onSelect]);
   useEffect(() => {
     var _a;
-    (_a = inputRef.current) == null ? void 0 : _a.focus();
-  }, []);
+    if (!editorControlled && !customInputMode) {
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [editorControlled, customInputMode]);
+  useEffect(() => {
+    if (customInputMode) {
+      setTimeout(() => {
+        var _a;
+        (_a = customInputRef.current) == null ? void 0 : _a.focus();
+      }, 50);
+    }
+  }, [customInputMode]);
+  const handleCustomVariableSubmit = useCallback(() => {
+    if (customVariableInput.trim() && onCustomVariable) {
+      onCustomVariable(customVariableInput.trim());
+      setCustomVariableInput("");
+    }
+  }, [customVariableInput, onCustomVariable]);
   useEffect(() => {
     const handleClickOutside = (e3) => {
       if (menuRef.current && !menuRef.current.contains(e3.target)) {
@@ -69912,65 +70114,61 @@ const VariableMenu = ({
   }, [onClose]);
   useEffect(() => {
     const handleKeyDown2 = (e3) => {
+      if (customInputMode) return;
       switch (e3.key) {
         case "ArrowDown":
           e3.preventDefault();
-          setSelectedIndex((prev) => Math.min(prev + 1, items.length - 1));
+          e3.stopPropagation();
+          setSelectedIndex((prev) => Math.min(prev + 1, totalItems - 1));
           break;
         case "ArrowUp":
           e3.preventDefault();
+          e3.stopPropagation();
           setSelectedIndex((prev) => Math.max(prev - 1, 0));
           break;
         case "Enter":
           e3.preventDefault();
-          if (items[selectedIndex]) {
+          e3.stopPropagation();
+          if (shouldShowCustomOption && selectedIndex === items.length) {
+            handleItemClick("custom");
+          } else if (items[selectedIndex]) {
             handleItemClick(items[selectedIndex]);
+          } else if (items.length > 0) {
+            handleItemClick(items[0]);
+          } else if (shouldShowCustomOption) {
+            handleItemClick("custom");
+          }
+          if (items.length === 0 && !shouldShowCustomOption) {
+            onClose();
           }
           break;
         case "Escape":
           e3.preventDefault();
-          if (activeCategory) {
+          e3.stopPropagation();
+          if (activeCategory && !parsedQuery.category) {
             handleBack();
           } else {
             onClose();
           }
           break;
-        case "Backspace":
-          if (!query && activeCategory) {
-            e3.preventDefault();
-            handleBack();
+        case "Tab":
+          if (items.length > 0 && !("variables" in items[0])) {
+            const firstItem = items[0];
+            if (firstItem.children && firstItem.children.length > 0) {
+              e3.preventDefault();
+              e3.stopPropagation();
+              handleItemClick(firstItem);
+            }
           }
           break;
       }
     };
-    document.addEventListener("keydown", handleKeyDown2);
-    return () => document.removeEventListener("keydown", handleKeyDown2);
-  }, [items, selectedIndex, activeCategory, query, onClose]);
+    document.addEventListener("keydown", handleKeyDown2, true);
+    return () => document.removeEventListener("keydown", handleKeyDown2, true);
+  }, [customInputMode, items, selectedIndex, activeCategory, onClose, shouldShowCustomOption, totalItems, parsedQuery.category, handleItemClick, handleBack]);
   useEffect(() => {
     setSelectedIndex(0);
-  }, [items.length, activeCategory, query]);
-  const handleItemClick = (item) => {
-    if ("variables" in item) {
-      setActiveCategory(item.id);
-      setCurrentPath([]);
-      onQueryChange("");
-    } else {
-      if (item.children && item.children.length > 0) {
-        setCurrentPath((prev) => [...prev, item.name]);
-        onQueryChange("");
-      } else {
-        onSelect(item);
-      }
-    }
-  };
-  const handleBack = () => {
-    if (currentPath.length > 0) {
-      setCurrentPath((prev) => prev.slice(0, -1));
-    } else {
-      setActiveCategory(null);
-    }
-    onQueryChange("");
-  };
+  }, [totalItems, activeCategory, query]);
   const getIconForType = (type) => {
     switch (type) {
       case "env":
@@ -69986,10 +70184,12 @@ const VariableMenu = ({
     }
   };
   const getCurrentTitle = () => {
-    if (!activeCategory) return "Insert Variable";
+    const prefix2 = isEditMode ? "Edit Variable" : "Insert Variable";
+    if (!activeCategory) return prefix2;
     const category = categories.find((c3) => c3.id === activeCategory);
-    if (currentPath.length > 0) {
-      return currentPath.join(".");
+    const pathToShow = parsedQuery.path.length > 0 ? parsedQuery.path : currentPath;
+    if (pathToShow.length > 0) {
+      return `${activeCategory}.${pathToShow.join(".")}`;
     }
     return (category == null ? void 0 : category.label) || "Variables";
   };
@@ -70015,51 +70215,142 @@ const VariableMenu = ({
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[13px] font-medium text-gray-700 flex-1", children: getCurrentTitle() })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 py-2 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 px-2.5 py-1.5 bg-gray-50 rounded-md border border-gray-200", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { size: 14, className: "text-gray-400" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "input",
-            {
-              ref: inputRef,
-              type: "text",
-              value: query,
-              onChange: (e3) => onQueryChange(e3.target.value),
-              placeholder: "Search...",
-              className: "flex-1 border-0 bg-transparent outline-none text-[13px] text-gray-700",
-              "data-id": "md-editor-variable-search"
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto p-1", children: items.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-center text-gray-400 text-[13px]", children: "No items found" }) : items.map((item, index) => {
-          var _a;
-          const isCategory = "variables" in item;
-          const Icon = isCategory ? item.icon : getIconForType(item.type);
-          const hasChildren = !isCategory && ((_a = item.children) == null ? void 0 : _a.length);
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        customInputMode ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-3 py-3 border-b border-gray-200 bg-blue-50", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[12px] text-blue-600 mb-2 font-medium", children: "Type your custom variable:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[14px] font-mono text-gray-500", children: "{{" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "input",
+              {
+                ref: customInputRef,
+                type: "text",
+                value: customVariableInput,
+                onChange: (e3) => setCustomVariableInput(e3.target.value),
+                onKeyDown: (e3) => {
+                  if (e3.key === "Enter" && customVariableInput.trim()) {
+                    e3.preventDefault();
+                    handleCustomVariableSubmit();
+                  } else if (e3.key === "Escape") {
+                    e3.preventDefault();
+                    onClose();
+                  }
+                },
+                placeholder: "memory.store.field",
+                className: "flex-1 border border-blue-300 bg-white rounded px-2 py-1.5 outline-none text-[13px] text-gray-700 font-mono focus:border-blue-500 focus:ring-1 focus:ring-blue-500",
+                "data-id": "md-editor-custom-variable-input"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[14px] font-mono text-gray-500", children: "}}" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex gap-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleCustomVariableSubmit,
+                disabled: !customVariableInput.trim(),
+                className: "px-3 py-1 text-[12px] bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed",
+                children: "Insert"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "px-3 py-1 text-[12px] bg-gray-200 text-gray-700 rounded hover:bg-gray-300",
+                children: "Cancel"
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          !editorControlled && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 py-2 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 px-2.5 py-1.5 bg-gray-50 rounded-md border border-gray-200", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { size: 14, className: "text-gray-400" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                value: query,
+                onChange: (e3) => onQueryChange(e3.target.value),
+                placeholder: "Search...",
+                className: "flex-1 border-0 bg-transparent outline-none text-[13px] text-gray-700",
+                "data-id": "md-editor-variable-search"
+              }
+            )
+          ] }) }),
+          editorControlled && query && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-3 py-1.5 border-b border-gray-200 bg-gray-50", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] text-gray-500", children: "Typing: " }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] font-mono text-gray-700", children: `{{${query}` })
+          ] })
+        ] }),
+        !customInputMode && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto p-1", children: items.length === 0 && !shouldShowCustomOption ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-center text-gray-400 text-[13px]", children: "No items found" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          items.map((item, index) => {
+            var _a;
+            const isCategory = "variables" in item;
+            const Icon = isCategory ? item.icon : getIconForType(item.type);
+            const hasChildren = !isCategory && ((_a = item.children) == null ? void 0 : _a.length);
+            return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleItemClick(item),
+                className: `flex items-center gap-2.5 w-full py-2 px-2.5 border-0 rounded-md text-left cursor-pointer transition-colors duration-100 ${index === selectedIndex ? "bg-gray-100" : "bg-transparent hover:bg-gray-100"}`,
+                onMouseEnter: () => setSelectedIndex(index),
+                "data-id": `md-editor-variable-item-${isCategory ? item.id : item.id}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center justify-center w-7 h-7 rounded-md bg-gray-100 text-gray-500 shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { size: 16 }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[13px] font-medium text-gray-800 truncate", children: isCategory ? item.label : item.name }),
+                    !isCategory && item.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[11px] text-gray-400 truncate", children: item.description })
+                  ] }),
+                  (isCategory || hasChildren) && /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: "text-gray-400 shrink-0" })
+                ]
+              },
+              isCategory ? item.id : item.id
+            );
+          }),
+          shouldShowCustomOption && /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => handleItemClick(item),
-              className: `flex items-center gap-2.5 w-full py-2 px-2.5 border-0 rounded-md text-left cursor-pointer transition-colors duration-100 ${index === selectedIndex ? "bg-gray-100" : "bg-transparent hover:bg-gray-100"}`,
-              onMouseEnter: () => setSelectedIndex(index),
-              "data-id": `md-editor-variable-item-${isCategory ? item.id : item.id}`,
+              onClick: () => handleItemClick("custom"),
+              className: `flex items-center gap-2.5 w-full py-2 px-2.5 border-0 rounded-md text-left cursor-pointer transition-colors duration-100 border-t border-gray-100 mt-1 pt-2 ${selectedIndex === items.length ? "bg-blue-50" : "bg-transparent hover:bg-blue-50"}`,
+              onMouseEnter: () => setSelectedIndex(items.length),
+              "data-id": "md-editor-variable-custom",
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center justify-center w-7 h-7 rounded-md bg-gray-100 text-gray-500 shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { size: 16 }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center justify-center w-7 h-7 rounded-md bg-blue-100 text-blue-600 shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { size: 16 }) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[13px] font-medium text-gray-800 truncate", children: isCategory ? item.label : item.name }),
-                  !isCategory && item.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[11px] text-gray-400 truncate", children: item.description })
-                ] }),
-                (isCategory || hasChildren) && /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: "text-gray-400 shrink-0" })
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-[13px] font-medium text-blue-700 truncate", children: [
+                    'Use "',
+                    getCustomVariablePath(),
+                    '"'
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[11px] text-blue-500 truncate", children: "Insert as custom variable" })
+                ] })
               ]
-            },
-            isCategory ? item.id : item.id
-          );
-        }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-3 py-1.5 border-t border-gray-200 text-[11px] text-gray-400 flex gap-3", children: [
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 py-1.5 border-t border-gray-200 text-[11px] text-gray-400 flex gap-3 flex-wrap", children: customInputMode ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "↵ Insert" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Esc Cancel" })
+        ] }) : editorControlled ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Click to select" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-500 font-medium", children: [
+            "{{{",
+            " Custom input"
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+            "Type ",
+            "}}",
+            " to close"
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "↑↓ Navigate" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "↵ Select" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Esc Close" })
-        ] })
+        ] }) })
       ]
     }
   );
@@ -70185,7 +70476,7 @@ const InlineToolbar = ({
 }) => {
   const [showLinkEditor, setShowLinkEditor] = useState(false);
   const isLinkActive = editor.isActive("link");
-  const currentLinkUrl = isLinkActive ? editor.getAttributes("link").href : "";
+  const currentLinkUrl = isLinkActive ? editor.getAttributes("link")["href"] : "";
   const toolbarItems = [
     // Text style icons
     {
@@ -71914,7 +72205,9 @@ const MDEditor = forwardRef(
       readOnly = false,
       autoFocus = false,
       onFocus,
-      onBlur
+      onBlur,
+      onLoadSuggestions,
+      suggestionsLoading: propSuggestionsLoading = false
     } = props;
     const mergedSlashConfig = { ...DEFAULT_SLASH_COMMAND_CONFIG, ...slashCommandConfig };
     const mergedAIConfig = { ...DEFAULT_AI_CONFIG, ...aiConfig };
@@ -71922,17 +72215,67 @@ const MDEditor = forwardRef(
     const lastEmittedMarkdownRef = useRef("");
     const isInternalUpdateRef = useRef(false);
     const editorContainerRef = useRef(null);
+    const [asyncSuggestions, setAsyncSuggestions] = useState(null);
+    const [suggestionsLoading, setSuggestionsLoading] = useState(false);
     const [variableMenuOpen, setVariableMenuOpen] = useState(false);
     const [variableMenuPosition, setVariableMenuPosition] = useState({ top: 0, left: 0 });
     const [variableMenuQuery, setVariableMenuQuery] = useState("");
+    const [customInputMode, setCustomInputMode] = useState(false);
+    const [editingVariableChip, setEditingVariableChip] = useState(null);
     const [aiPanelOpen, setAIPanelOpen] = useState(mergedAIConfig.alwaysShowPanel ?? false);
     const [aiRefineContext, setAIRefineContext] = useState(null);
     const variableTriggerPosRef = useRef(null);
     const [isRawMode, setIsRawMode] = useState(false);
     const [rawMarkdown, setRawMarkdown] = useState("");
+    useEffect(() => {
+      if (onLoadSuggestions) {
+        setSuggestionsLoading(true);
+        onLoadSuggestions().then((data) => {
+          setAsyncSuggestions(data);
+          setSuggestionsLoading(false);
+        }).catch((error) => {
+          console.error("Failed to load suggestions:", error);
+          setSuggestionsLoading(false);
+        });
+      }
+    }, [onLoadSuggestions]);
+    const mergedAgents = (asyncSuggestions == null ? void 0 : asyncSuggestions.agents) ?? agents2;
+    const mergedTools = (asyncSuggestions == null ? void 0 : asyncSuggestions.tools) ?? tools2;
+    const mergedKnowledge = (asyncSuggestions == null ? void 0 : asyncSuggestions.knowledge) ?? knowledge2;
+    const mergedEnvVariables = (asyncSuggestions == null ? void 0 : asyncSuggestions.envVariables) ?? envVariables2;
+    const mergedMemoryVariables = (asyncSuggestions == null ? void 0 : asyncSuggestions.memoryVariables) ?? memoryVariables;
+    const mergedSystemVariables = (asyncSuggestions == null ? void 0 : asyncSuggestions.systemVariables) ?? systemVariables2;
+    const mergedContentVariables = (asyncSuggestions == null ? void 0 : asyncSuggestions.contentVariables) ?? contentVariables;
+    const finalSuggestionsLoading = propSuggestionsLoading || suggestionsLoading;
+    const suggestionsRef = useRef({
+      agents: mergedAgents,
+      tools: mergedTools,
+      knowledge: mergedKnowledge,
+      envVariables: mergedEnvVariables,
+      memoryVariables: mergedMemoryVariables,
+      systemVariables: mergedSystemVariables,
+      contentVariables: mergedContentVariables,
+      loading: finalSuggestionsLoading
+    });
+    suggestionsRef.current = {
+      agents: mergedAgents,
+      tools: mergedTools,
+      knowledge: mergedKnowledge,
+      envVariables: mergedEnvVariables,
+      memoryVariables: mergedMemoryVariables,
+      systemVariables: mergedSystemVariables,
+      contentVariables: mergedContentVariables,
+      loading: finalSuggestionsLoading
+    };
+    console.log("MDEditor render: suggestionsRef updated with:", {
+      agentsCount: mergedAgents.length,
+      toolsCount: mergedTools.length,
+      knowledgeCount: mergedKnowledge.length,
+      hasAsyncSuggestions: !!asyncSuggestions
+    });
     const defaultCategories = useMemo(() => {
       const categories = [];
-      if (agents2.length > 0) {
+      if (mergedAgents.length > 0) {
         categories.push({
           id: "agents",
           label: "Agents",
@@ -71940,7 +72283,7 @@ const MDEditor = forwardRef(
           hasSubmenu: true
         });
       }
-      if (knowledge2.length > 0) {
+      if (mergedKnowledge.length > 0) {
         categories.push({
           id: "knowledge",
           label: "Knowledge",
@@ -71948,7 +72291,7 @@ const MDEditor = forwardRef(
           hasSubmenu: true
         });
       }
-      if (tools2.length > 0) {
+      if (mergedTools.length > 0) {
         categories.push({
           id: "tools",
           label: "Tools",
@@ -71956,7 +72299,7 @@ const MDEditor = forwardRef(
           hasSubmenu: true
         });
       }
-      if (memoryVariables.length > 0) {
+      if (mergedMemoryVariables.length > 0) {
         categories.push({
           id: "memory",
           label: "Memory",
@@ -71964,7 +72307,7 @@ const MDEditor = forwardRef(
           hasSubmenu: true
         });
       }
-      if (envVariables2.length > 0) {
+      if (mergedEnvVariables.length > 0) {
         categories.push({
           id: "env",
           label: "Environment Variables",
@@ -71972,7 +72315,7 @@ const MDEditor = forwardRef(
           hasSubmenu: true
         });
       }
-      if (systemVariables2.length > 0) {
+      if (mergedSystemVariables.length > 0) {
         categories.push({
           id: "system",
           label: "System Variables",
@@ -71980,7 +72323,7 @@ const MDEditor = forwardRef(
           hasSubmenu: true
         });
       }
-      if (contentVariables.length > 0) {
+      if (mergedContentVariables.length > 0) {
         categories.push({
           id: "content",
           label: "Content Variables",
@@ -71989,11 +72332,26 @@ const MDEditor = forwardRef(
         });
       }
       return categories;
-    }, [agents2, tools2, knowledge2, memoryVariables, envVariables2, systemVariables2, contentVariables]);
+    }, [mergedAgents, mergedTools, mergedKnowledge, mergedMemoryVariables, mergedEnvVariables, mergedSystemVariables, mergedContentVariables]);
     const insertVariable = useCallback(
       (variable, triggerPos) => {
         if (!editorRef.current) return;
         const editor2 = editorRef.current;
+        if (editingVariableChip) {
+          const { position, nodeSize: nodeSize2 } = editingVariableChip;
+          editor2.chain().focus().deleteRange({ from: position, to: position + nodeSize2 }).insertContentAt(position, {
+            type: "variableChip",
+            attrs: {
+              variableType: variable.type,
+              path: variable.path,
+              displayName: variable.name
+            }
+          }).run();
+          setEditingVariableChip(null);
+          setVariableMenuOpen(false);
+          setVariableMenuQuery("");
+          return;
+        }
         const deleteFrom = triggerPos ?? variableTriggerPosRef.current;
         if (deleteFrom !== null) {
           const { from: from2 } = editor2.state.selection;
@@ -72017,9 +72375,63 @@ const MDEditor = forwardRef(
           }).insertContent(" ").run();
         }
         setVariableMenuOpen(false);
+        setVariableMenuQuery("");
         variableTriggerPosRef.current = null;
       },
-      []
+      [editingVariableChip]
+    );
+    const insertCustomVariable = useCallback(
+      (variablePath) => {
+        if (!editorRef.current) return;
+        const editor2 = editorRef.current;
+        let variableType = "custom";
+        let displayPath = variablePath;
+        if (variablePath.startsWith("env.")) {
+          variableType = "env";
+          displayPath = variablePath.substring(4);
+        } else if (variablePath.startsWith("memory.")) {
+          variableType = "memory";
+          displayPath = variablePath.substring(7);
+        } else if (variablePath.startsWith("content.")) {
+          variableType = "content";
+          displayPath = variablePath.substring(8);
+        } else if (variablePath.startsWith("system.")) {
+          variableType = "system";
+          displayPath = variablePath.substring(7);
+        }
+        if (editingVariableChip) {
+          const { position, nodeSize: nodeSize2 } = editingVariableChip;
+          editor2.chain().focus().deleteRange({ from: position, to: position + nodeSize2 }).insertContentAt(position, {
+            type: "variableChip",
+            attrs: {
+              variableType,
+              path: displayPath,
+              displayName: displayPath.split(".").pop() || displayPath
+            }
+          }).run();
+          setEditingVariableChip(null);
+          setVariableMenuOpen(false);
+          setVariableMenuQuery("");
+          return;
+        }
+        const deleteFrom = variableTriggerPosRef.current;
+        if (deleteFrom !== null) {
+          const { from: from2 } = editor2.state.selection;
+          const deleteRange2 = { from: deleteFrom, to: from2 };
+          editor2.chain().focus().deleteRange(deleteRange2).insertContent({
+            type: "variableChip",
+            attrs: {
+              variableType,
+              path: displayPath,
+              displayName: displayPath.split(".").pop() || displayPath
+            }
+          }).insertContent(" ").run();
+        }
+        setVariableMenuOpen(false);
+        setVariableMenuQuery("");
+        variableTriggerPosRef.current = null;
+      },
+      [editingVariableChip]
     );
     const insertMention = useCallback(
       (mention) => {
@@ -72165,7 +72577,7 @@ const MDEditor = forwardRef(
         Placeholder.configure({
           placeholder: ({ node }) => {
             if (node.type.name === "heading") {
-              const level = node.attrs.level;
+              const level = node.attrs["level"];
               return `Heading ${level}`;
             }
             if (node.type.name === "paragraph") {
@@ -72206,6 +72618,10 @@ const MDEditor = forwardRef(
         exts.push(MentionChipExtension);
       }
       if (mergedFeatures.slashCommands) {
+        const getSuggestionsCallback = () => {
+          console.log("MDEditor: getSuggestions callback invoked, ref.current =", suggestionsRef.current);
+          return suggestionsRef.current;
+        };
         exts.push(
           SlashCommandExtension.configure({
             suggestion: {
@@ -72213,24 +72629,18 @@ const MDEditor = forwardRef(
               startOfLine: false,
               items: () => defaultCategories
             },
-            agents: agents2,
-            tools: tools2,
-            knowledge: knowledge2,
-            envVariables: envVariables2,
-            memoryVariables,
-            systemVariables: systemVariables2,
-            contentVariables,
+            // Pass getter function to always get latest data from ref
+            getSuggestions: getSuggestionsCallback,
             onSelectItem: handleSlashCommandSelect,
             highlightMentions: mergedSlashConfig.highlightMentions
           })
         );
       }
-      if (mergedFeatures.mentions && (agents2.length > 0 || tools2.length > 0 || knowledge2.length > 0)) {
+      if (mergedFeatures.mentions) {
         exts.push(
           MentionCommandExtension.configure({
-            agents: agents2,
-            tools: tools2,
-            knowledge: knowledge2,
+            // Pass getter function to always get latest data from ref
+            getSuggestions: () => suggestionsRef.current,
             onSelectItem: handleSlashCommandSelect
           })
         );
@@ -72244,7 +72654,7 @@ const MDEditor = forwardRef(
         );
       }
       return exts;
-    }, [mergedFeatures, placeholder, defaultCategories, agents2, tools2, knowledge2, envVariables2, memoryVariables, systemVariables2, contentVariables, handleSlashCommandSelect, mergedSlashConfig.highlightMentions, mergedAIConfig.enabled, mergedAIConfig.keyboardShortcut, onAIRefine, handleAIRefineTrigger]);
+    }, [mergedFeatures, placeholder, defaultCategories, handleSlashCommandSelect, mergedSlashConfig.highlightMentions, mergedAIConfig.enabled, mergedAIConfig.keyboardShortcut, onAIRefine, handleAIRefineTrigger]);
     const editorRef = useRef(null);
     const editor = useEditor({
       extensions,
@@ -72282,9 +72692,14 @@ const MDEditor = forwardRef(
       const handleKeyDown2 = (event) => {
         if (event.key === "{") {
           const { from: from2 } = editor.state.selection;
-          const textBefore = editor.state.doc.textBetween(Math.max(0, from2 - 1), from2);
-          if (textBefore === "{") {
+          const textBefore = editor.state.doc.textBetween(Math.max(0, from2 - 2), from2);
+          const charBefore = editor.state.doc.textBetween(Math.max(0, from2 - 1), from2);
+          if (textBefore === "{{" && variableMenuOpen) {
             event.preventDefault();
+            setCustomInputMode(true);
+            return;
+          }
+          if (charBefore === "{") {
             variableTriggerPosRef.current = from2 - 1;
             const coords = editor.view.coordsAtPos(from2);
             setVariableMenuPosition({
@@ -72293,20 +72708,41 @@ const MDEditor = forwardRef(
             });
             setVariableMenuQuery("");
             setVariableMenuOpen(true);
+            setCustomInputMode(false);
           }
         }
       };
+      const handleInput = () => {
+        if (!variableMenuOpen || variableTriggerPosRef.current === null || customInputMode) return;
+        const { from: from2 } = editor.state.selection;
+        const triggerPos = variableTriggerPosRef.current;
+        const textAfterTrigger = editor.state.doc.textBetween(
+          triggerPos + 2,
+          // After {{
+          from2
+        );
+        if (textAfterTrigger.includes("}}")) {
+          setVariableMenuOpen(false);
+          setCustomInputMode(false);
+          variableTriggerPosRef.current = null;
+          return;
+        }
+        setVariableMenuQuery(textAfterTrigger);
+      };
       const editorElement = editor.view.dom;
       editorElement.addEventListener("keydown", handleKeyDown2);
+      editorElement.addEventListener("input", handleInput);
       return () => {
         editorElement.removeEventListener("keydown", handleKeyDown2);
+        editorElement.removeEventListener("input", handleInput);
       };
-    }, [editor, mergedFeatures.variableChips]);
+    }, [editor, mergedFeatures.variableChips, variableMenuOpen, customInputMode]);
     useEffect(() => {
       if (!variableMenuOpen) return;
       const handleKeyDown2 = (event) => {
         if (event.key === "Escape") {
           setVariableMenuOpen(false);
+          setEditingVariableChip(null);
           variableTriggerPosRef.current = null;
           editor == null ? void 0 : editor.chain().focus().run();
         }
@@ -72314,6 +72750,32 @@ const MDEditor = forwardRef(
       document.addEventListener("keydown", handleKeyDown2);
       return () => document.removeEventListener("keydown", handleKeyDown2);
     }, [variableMenuOpen, editor]);
+    useEffect(() => {
+      if (!editor) return;
+      const handleVariableChipEdit = (event) => {
+        const customEvent = event;
+        const { variableType, path, position, nodeSize: nodeSize2 } = customEvent.detail;
+        const coords = editor.view.coordsAtPos(position);
+        setEditingVariableChip({
+          position,
+          nodeSize: nodeSize2,
+          variableType,
+          path
+        });
+        setVariableMenuPosition({
+          top: coords.bottom + 8,
+          left: coords.left
+        });
+        setVariableMenuQuery("");
+        setCustomInputMode(false);
+        setVariableMenuOpen(true);
+      };
+      const editorElement = editor.view.dom;
+      editorElement.addEventListener("variable-chip-edit", handleVariableChipEdit);
+      return () => {
+        editorElement.removeEventListener("variable-chip-edit", handleVariableChipEdit);
+      };
+    }, [editor]);
     useEffect(() => {
       if (!editor || isInternalUpdateRef.current) {
         isInternalUpdateRef.current = false;
@@ -72570,14 +73032,22 @@ const MDEditor = forwardRef(
                 query: variableMenuQuery,
                 onQueryChange: setVariableMenuQuery,
                 onSelect: (variable) => insertVariable(variable),
+                onCustomVariable: insertCustomVariable,
                 onClose: () => {
                   setVariableMenuOpen(false);
+                  setVariableMenuQuery("");
+                  setCustomInputMode(false);
+                  setEditingVariableChip(null);
                   variableTriggerPosRef.current = null;
                 },
-                envVariables: envVariables2,
-                memoryVariables,
-                systemVariables: systemVariables2,
-                contentVariables
+                envVariables: mergedEnvVariables,
+                memoryVariables: mergedMemoryVariables,
+                systemVariables: mergedSystemVariables,
+                contentVariables: mergedContentVariables,
+                allowCustomVariables: true,
+                editorControlled: !customInputMode && !editingVariableChip,
+                customInputMode,
+                isEditMode: !!editingVariableChip
               }
             ),
             isAIEnabled && mergedAIConfig.contextMenu && /* @__PURE__ */ jsxRuntimeExports.jsx(