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

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
  *
@@ -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 },
@@ -69826,18 +69868,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 +69942,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 +69954,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 +70058,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 +70128,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 +70159,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" })
-        ] })
+        ] }) })
       ]
     }
   );
@@ -71925,6 +72160,8 @@ const MDEditor = forwardRef(
     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);
@@ -71994,6 +72231,21 @@ const MDEditor = forwardRef(
       (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 +72269,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) => {
@@ -72282,9 +72588,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 +72604,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 +72646,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 +72928,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
+                contentVariables,
+                allowCustomVariables: true,
+                editorControlled: !customInputMode && !editingVariableChip,
+                customInputMode,
+                isEditMode: !!editingVariableChip
               }
             ),
             isAIEnabled && mergedAIConfig.contextMenu && /* @__PURE__ */ jsxRuntimeExports.jsx(