agentic-ui-libs 1.0.0-beta.4 → 1.0.0-beta.5

package/dist/index.js

@@ -1482,19 +1482,6 @@ 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 MousePointerClick = createLucideIcon("MousePointerClick", [
-  ["path", { d: "m9 9 5 12 1.8-5.2L21 14Z", key: "1b76lo" }],
-  ["path", { d: "M7.2 2.2 8 5.1", key: "1cfko1" }],
-  ["path", { d: "m5.1 8-2.9-.8", key: "1go3kf" }],
-  ["path", { d: "M14 4.1 12 6", key: "ita8i4" }],
-  ["path", { d: "m6 12-1.9 2", key: "mnht97" }]
-]);
 /**
  * @license lucide-react v0.294.0 - ISC
  *
@@ -69094,21 +69081,25 @@ const SlashMenu = forwardRef(
     agents: agents2 = [],
     tools: tools2 = [],
     knowledge: knowledge2 = [],
-    envVariables: _envVariables = [],
-    memoryVariables: _memoryVariables = [],
-    systemVariables: _systemVariables = [],
+    envVariables: envVariables2 = [],
+    memoryVariables = [],
+    systemVariables: systemVariables2 = [],
     contentVariables = [],
     highlightMentions = false,
     // Default: plain text
-    range: range3
+    range: range3,
     // The range of the slash command trigger (to delete it)
+    hiddenCategories = []
+    // Categories to hide
   }, ref) => {
     const [activeCategory, setActiveCategory] = useState(null);
     const [selectedIndex, setSelectedIndex] = useState(0);
+    const [subcategorySearch, setSubcategorySearch] = useState("");
     const menuRef = useRef(null);
     const blockItemsRef = useRef(null);
     const categoryListRef = useRef(null);
     const itemRefs = useRef(/* @__PURE__ */ new Map());
+    const searchInputRef = useRef(null);
     const allCategories = [
       {
         id: "agents",
@@ -69133,13 +69124,41 @@ const SlashMenu = forwardRef(
         hasSubmenu: true,
         disabled: knowledge2.length === 0,
         disabledReason: "No knowledge bases available"
+      },
+      {
+        id: "env",
+        label: "Environment Variables",
+        type: "env",
+        hasSubmenu: true,
+        disabled: envVariables2.length === 0,
+        disabledReason: "No environment variables available"
+      },
+      {
+        id: "memory",
+        label: "Memory Variables",
+        type: "memory",
+        hasSubmenu: true,
+        disabled: memoryVariables.length === 0,
+        disabledReason: "No memory variables available"
+      },
+      {
+        id: "system",
+        label: "System Variables",
+        type: "system",
+        hasSubmenu: true,
+        disabled: systemVariables2.length === 0,
+        disabledReason: "No system variables available"
       }
     ];
+    const showBlocks = !hiddenCategories.includes("blocks");
+    const visibleCategories = allCategories.filter((cat) => !hiddenCategories.includes(cat.id));
     const getCurrentItems = useCallback(() => {
       if (!activeCategory) {
         const result = [];
-        result.push(...BLOCK_ITEMS);
-        result.push(...allCategories);
+        if (showBlocks) {
+          result.push(...BLOCK_ITEMS);
+        }
+        result.push(...visibleCategories);
         if (query) {
           return result.filter((item) => {
             if ("label" in item) {
@@ -69166,29 +69185,43 @@ const SlashMenu = forwardRef(
         case "knowledge":
           items = knowledge2;
           break;
+        case "env":
+          items = envVariables2;
+          break;
+        case "memory":
+          items = memoryVariables;
+          break;
+        case "system":
+          items = systemVariables2;
+          break;
         case "content":
           items = contentVariables;
           break;
       }
-      if (query) {
+      const searchTerm = subcategorySearch.toLowerCase();
+      if (searchTerm) {
         items = items.filter((item) => {
           var _a;
           if ("label" in item) {
-            return item.label.toLowerCase().includes(query.toLowerCase()) || ((_a = item.keywords) == null ? void 0 : _a.some(
-              (k3) => k3.toLowerCase().includes(query.toLowerCase())
+            return item.label.toLowerCase().includes(searchTerm) || ((_a = item.keywords) == null ? void 0 : _a.some(
+              (k3) => k3.toLowerCase().includes(searchTerm)
             ));
           }
-          return item.name.toLowerCase().includes(query.toLowerCase());
+          const name = item.name.toLowerCase();
+          const description = "description" in item ? (item.description || "").toLowerCase() : "";
+          const path = "path" in item ? (item.path || "").toLowerCase() : "";
+          return name.includes(searchTerm) || description.includes(searchTerm) || path.includes(searchTerm);
         });
       }
       return items;
-    }, [activeCategory, query, agents2, tools2, knowledge2, contentVariables, allCategories]);
+    }, [activeCategory, subcategorySearch, agents2, tools2, knowledge2, envVariables2, memoryVariables, systemVariables2, contentVariables, allCategories]);
     const currentItems = getCurrentItems();
     const getAllNavigableItems = useCallback(() => {
       if (activeCategory) {
         return currentItems;
       }
-      const filteredBlocks = query ? BLOCK_ITEMS.filter((item) => {
+      const blocksToShow = showBlocks ? BLOCK_ITEMS : [];
+      const filteredBlocks = query ? blocksToShow.filter((item) => {
         const label = item.label.toLowerCase();
         const q2 = query.toLowerCase();
         if (label.includes(q2)) return true;
@@ -69196,14 +69229,14 @@ const SlashMenu = forwardRef(
           return item.keywords.some((k3) => k3.toLowerCase().includes(q2));
         }
         return false;
-      }) : BLOCK_ITEMS;
-      const filteredCats = query ? allCategories.filter((cat) => cat.label.toLowerCase().includes(query.toLowerCase())) : allCategories;
+      }) : blocksToShow;
+      const filteredCats = query ? visibleCategories.filter((cat) => cat.label.toLowerCase().includes(query.toLowerCase())) : visibleCategories;
       return [...filteredBlocks, ...filteredCats];
-    }, [activeCategory, currentItems, query, allCategories]);
+    }, [activeCategory, currentItems, query, showBlocks, visibleCategories]);
     const navigableItems = getAllNavigableItems();
     useEffect(() => {
       setSelectedIndex(0);
-    }, [navigableItems.length, activeCategory, query]);
+    }, [navigableItems.length, activeCategory, query, subcategorySearch]);
     useEffect(() => {
       const itemElement = itemRefs.current.get(selectedIndex);
       if (itemElement) {
@@ -69250,12 +69283,14 @@ const SlashMenu = forwardRef(
         if (event.key === "Escape") {
           if (activeCategory) {
             setActiveCategory(null);
+            setSubcategorySearch("");
             return true;
           }
           return false;
         }
-        if (event.key === "Backspace" && !query && activeCategory) {
+        if (event.key === "Backspace" && !query && !subcategorySearch && activeCategory) {
           setActiveCategory(null);
+          setSubcategorySearch("");
           return true;
         }
         return false;
@@ -69277,6 +69312,7 @@ const SlashMenu = forwardRef(
       if ("hasSubmenu" in item && item.hasSubmenu) {
         setActiveCategory(item.id);
         setSelectedIndex(0);
+        setSubcategorySearch("");
         return;
       }
       if ("action" in item && typeof item.action === "function") {
@@ -69301,11 +69337,25 @@ const SlashMenu = forwardRef(
         }
         return;
       }
+      if ("path" in item && "type" in item) {
+        const variable = item;
+        deleteSlashTrigger();
+        editor.chain().focus().insertContent({
+          type: "variableChip",
+          attrs: {
+            variableType: variable.type,
+            path: variable.path,
+            displayName: variable.name
+          }
+        }).insertContent(" ").run();
+        return;
+      }
       command2(item);
     };
     const handleBack = () => {
       setActiveCategory(null);
       setSelectedIndex(0);
+      setSubcategorySearch("");
     };
     const getIcon = (item) => {
       if ("action" in item && item.icon) {
@@ -69343,7 +69393,8 @@ const SlashMenu = forwardRef(
       const category = categories.find((c3) => c3.id === activeCategory);
       return (category == null ? void 0 : category.label) || activeCategory;
     };
-    const filteredBlockItems = query ? BLOCK_ITEMS.filter((item) => {
+    const blocksSource = showBlocks ? BLOCK_ITEMS : [];
+    const filteredBlockItems = query ? blocksSource.filter((item) => {
       const label = item.label.toLowerCase();
       const q2 = query.toLowerCase();
       if (label.includes(q2)) return true;
@@ -69351,8 +69402,8 @@ const SlashMenu = forwardRef(
         return item.keywords.some((k3) => k3.toLowerCase().includes(q2));
       }
       return false;
-    }) : BLOCK_ITEMS;
-    const filteredCategoryItems = query ? allCategories.filter((cat) => cat.label.toLowerCase().includes(query.toLowerCase())) : allCategories;
+    }) : blocksSource;
+    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 (!hasBlockItems && !hasCategoryItems && !activeCategory) {
@@ -69396,58 +69447,81 @@ const SlashMenu = forwardRef(
             )
           ] }),
           hasBlockItems && (hasCategoryItems || activeCategory) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-px bg-gray-200 mx-2" }),
-          activeCategory && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-3 py-2 border-b border-gray-200 flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: handleBack,
-                className: "flex items-center justify-center w-6 h-6 p-0 border-0 bg-gray-100 rounded cursor-pointer text-gray-500 hover:bg-gray-200",
-                "aria-label": "Go back",
-                "data-id": "md-editor-slash-back-btn",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { size: 16 })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium text-gray-500 flex-1", children: getTitle() })
+          activeCategory && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-b border-gray-200", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-3 py-2 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleBack,
+                  className: "flex items-center justify-center w-6 h-6 p-0 border-0 bg-gray-100 rounded cursor-pointer text-gray-500 hover:bg-gray-200",
+                  "aria-label": "Go back",
+                  "data-id": "md-editor-slash-back-btn",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { size: 16 })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium text-gray-500 flex-1", children: getTitle() })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-2 pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-gray-50", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { size: 14, className: "text-gray-400 shrink-0" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "input",
+                {
+                  ref: searchInputRef,
+                  type: "text",
+                  value: subcategorySearch,
+                  onChange: (e3) => {
+                    setSubcategorySearch(e3.target.value);
+                    setSelectedIndex(0);
+                  },
+                  placeholder: "Search...",
+                  className: "flex-1 bg-transparent text-sm border-0 outline-none text-gray-700 placeholder:text-gray-400",
+                  "data-id": "md-editor-slash-search"
+                }
+              )
+            ] }) })
           ] }),
           (hasCategoryItems || activeCategory) && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             !activeCategory && hasCategoryItems && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-2 pt-2 pb-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[11px] font-semibold text-gray-400 uppercase tracking-wide pl-1", children: "Insert" }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "div",
               {
                 ref: categoryListRef,
                 className: "flex-1 overflow-y-auto px-2 pb-2 pt-1",
-                children: (activeCategory ? currentItems : filteredCategoryItems).map((item, index) => {
-                  var _a;
-                  const adjustedIndex = activeCategory ? index : blockItemsCount + index;
-                  const isCategory = "hasSubmenu" in item && item.hasSubmenu;
-                  const hasSubmenu = isCategory || "children" in item && ((_a = item.children) == null ? void 0 : _a.length);
-                  const label = "label" in item ? item.label : item.name;
-                  const isSelected = selectedIndex === adjustedIndex;
-                  const isDisabled = "disabled" in item && item.disabled;
-                  const disabledReason = "disabledReason" in item ? item.disabledReason : void 0;
-                  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                    "button",
-                    {
-                      ref: (el) => {
-                        if (el) itemRefs.current.set(adjustedIndex, el);
+                children: [
+                  activeCategory && currentItems.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-4 text-center text-gray-400 text-sm", children: subcategorySearch ? `No results for "${subcategorySearch}"` : "No items available" }),
+                  (activeCategory ? currentItems : filteredCategoryItems).map((item, index) => {
+                    var _a;
+                    const adjustedIndex = activeCategory ? index : blockItemsCount + index;
+                    const isCategory = "hasSubmenu" in item && item.hasSubmenu;
+                    const hasSubmenu = isCategory || "children" in item && ((_a = item.children) == null ? void 0 : _a.length);
+                    const label = "label" in item ? item.label : item.name;
+                    const isSelected = selectedIndex === adjustedIndex;
+                    const isDisabled = "disabled" in item && item.disabled;
+                    const disabledReason = "disabledReason" in item ? item.disabledReason : void 0;
+                    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      "button",
+                      {
+                        ref: (el) => {
+                          if (el) itemRefs.current.set(adjustedIndex, el);
+                        },
+                        type: "button",
+                        onClick: () => handleItemClick(item),
+                        disabled: isDisabled,
+                        title: isDisabled ? disabledReason : void 0,
+                        className: `flex items-center gap-2.5 w-full py-2 px-2.5 border-0 rounded-md text-left transition-colors duration-100 ${isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"} ${isSelected && !isDisabled ? "bg-gray-100" : "bg-transparent hover:bg-gray-100"}`,
+                        onMouseEnter: () => !isDisabled && setSelectedIndex(adjustedIndex),
+                        "data-id": `md-editor-slash-item-${"id" in item ? item.id : label.toLowerCase().replace(/\s+/g, "-")}`,
+                        children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `flex items-center justify-center w-7 h-7 rounded-md bg-gray-100 shrink-0 ${isDisabled ? "text-gray-300" : "text-gray-500"}`, children: getIcon(item) }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-[13px] font-medium truncate ${isDisabled ? "text-gray-400" : "text-gray-800"}`, children: label }) }),
+                          hasSubmenu && /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: `shrink-0 ${isDisabled ? "text-gray-300" : "text-gray-400"}` })
+                        ]
                       },
-                      type: "button",
-                      onClick: () => handleItemClick(item),
-                      disabled: isDisabled,
-                      title: isDisabled ? disabledReason : void 0,
-                      className: `flex items-center gap-2.5 w-full py-2 px-2.5 border-0 rounded-md text-left transition-colors duration-100 ${isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"} ${isSelected && !isDisabled ? "bg-gray-100" : "bg-transparent hover:bg-gray-100"}`,
-                      onMouseEnter: () => !isDisabled && setSelectedIndex(adjustedIndex),
-                      "data-id": `md-editor-slash-item-${"id" in item ? item.id : label.toLowerCase().replace(/\s+/g, "-")}`,
-                      children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `flex items-center justify-center w-7 h-7 rounded-md bg-gray-100 shrink-0 ${isDisabled ? "text-gray-300" : "text-gray-500"}`, children: getIcon(item) }),
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-[13px] font-medium truncate ${isDisabled ? "text-gray-400" : "text-gray-800"}`, children: label }) }),
-                        hasSubmenu && /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: `shrink-0 ${isDisabled ? "text-gray-300" : "text-gray-400"}` })
-                      ]
-                    },
-                    "id" in item ? item.id : index
-                  );
-                })
+                      "id" in item ? item.id : index
+                    );
+                  })
+                ]
               }
             )
           ] })
@@ -69457,6 +69531,7 @@ const SlashMenu = forwardRef(
   }
 );
 SlashMenu.displayName = "SlashMenu";
+const SlashSuggestionPluginKey = new PluginKey("slashSuggestion");
 const SlashCommandExtension = Extension.create({
   name: "slashCommand",
   addOptions() {
@@ -69485,7 +69560,7 @@ const SlashCommandExtension = Extension.create({
         editor: this.editor,
         char: this.options.suggestion.char || "/",
         startOfLine: this.options.suggestion.startOfLine ?? false,
-        pluginKey: this.options.suggestion.pluginKey,
+        pluginKey: SlashSuggestionPluginKey,
         allow: ({ state, range: range3 }) => {
           const $from = state.doc.resolve(range3.from);
           const isInCode = $from.parent.type.name === "codeBlock";
@@ -69596,6 +69671,119 @@ function createSlashCommandSuggestion(categories, onCommand) {
     }
   };
 }
+const MentionSuggestionPluginKey = new PluginKey("mentionSuggestion");
+const MentionCommandExtension = Extension.create({
+  name: "mentionCommand",
+  addOptions() {
+    return {
+      agents: [],
+      tools: [],
+      knowledge: [],
+      onSelectItem: void 0
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        char: "@",
+        startOfLine: false,
+        pluginKey: MentionSuggestionPluginKey,
+        allow: ({ state, range: range3 }) => {
+          const $from = state.doc.resolve(range3.from);
+          const isInCode = $from.parent.type.name === "codeBlock";
+          return !isInCode;
+        },
+        items: () => [],
+        command: ({ editor, range: range3 }) => {
+          editor.chain().focus().deleteRange(range3).run();
+        },
+        render: () => {
+          let component = null;
+          let popup = null;
+          return {
+            onStart: (props) => {
+              component = new ReactRenderer(SlashMenu, {
+                props: {
+                  ...props,
+                  agents: this.options.agents,
+                  tools: this.options.tools,
+                  knowledge: this.options.knowledge,
+                  // No variables or blocks for @ mentions
+                  envVariables: [],
+                  memoryVariables: [],
+                  systemVariables: [],
+                  contentVariables: [],
+                  highlightMentions: false,
+                  // Insert as plain bold text
+                  hiddenCategories: ["blocks"],
+                  // Hide blocks category
+                  range: props.range,
+                  command: (item) => {
+                    props.editor.chain().focus().deleteRange(props.range).run();
+                    props.editor.chain().focus().insertContent(`**@${item.name}** `).run();
+                    if (this.options.onSelectItem) {
+                      this.options.onSelectItem(item);
+                    }
+                  }
+                },
+                editor: props.editor
+              });
+              if (!props.clientRect) {
+                return;
+              }
+              popup = tippy("body", {
+                getReferenceClientRect: props.clientRect,
+                appendTo: () => document.body,
+                content: component.element,
+                showOnCreate: true,
+                interactive: true,
+                trigger: "manual",
+                placement: "bottom-start",
+                maxWidth: "none"
+              });
+            },
+            onUpdate: (props) => {
+              var _a;
+              component == null ? void 0 : component.updateProps({
+                ...props,
+                agents: this.options.agents,
+                tools: this.options.tools,
+                knowledge: this.options.knowledge,
+                envVariables: [],
+                memoryVariables: [],
+                systemVariables: [],
+                contentVariables: [],
+                highlightMentions: false,
+                hiddenCategories: ["blocks"],
+                range: props.range
+              });
+              if (!props.clientRect) {
+                return;
+              }
+              (_a = popup == null ? void 0 : popup[0]) == null ? void 0 : _a.setProps({
+                getReferenceClientRect: props.clientRect
+              });
+            },
+            onKeyDown: (props) => {
+              var _a, _b;
+              if (props.event.key === "Escape") {
+                (_a = popup == null ? void 0 : popup[0]) == null ? void 0 : _a.hide();
+                return true;
+              }
+              return ((_b = component == null ? void 0 : component.ref) == null ? void 0 : _b.onKeyDown(props.event)) ?? false;
+            },
+            onExit: () => {
+              var _a;
+              (_a = popup == null ? void 0 : popup[0]) == null ? void 0 : _a.destroy();
+              component == null ? void 0 : component.destroy();
+            }
+          };
+        }
+      })
+    ];
+  }
+});
 const AIRefineExtension = Extension.create({
   name: "aiRefine",
   addOptions() {
@@ -69647,8 +69835,31 @@ const VariableMenu = ({
   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);
+  useEffect(() => {
+    if (!menuRef.current) return;
+    const menuRect = menuRef.current.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const padding = 8;
+    let newTop = position.top;
+    let newLeft = position.left;
+    if (position.left + menuRect.width > viewportWidth - padding) {
+      newLeft = Math.max(padding, viewportWidth - menuRect.width - padding);
+    }
+    if (position.top + menuRect.height > viewportHeight - padding) {
+      newTop = Math.max(padding, position.top - menuRect.height - 10);
+    }
+    if (newLeft < padding) {
+      newLeft = padding;
+    }
+    if (newTop < padding) {
+      newTop = padding;
+    }
+    setAdjustedPosition({ top: newTop, left: newLeft });
+  }, [position]);
   const categories = [
     { id: "env", label: "Environment Variables", icon: Settings, variables: envVariables2 },
     { id: "memory", label: "Memory", icon: Database, variables: memoryVariables },
@@ -69787,7 +69998,7 @@ const VariableMenu = ({
     {
       ref: menuRef,
       className: "k-md-editor-variable-menu fixed w-[280px] max-h-[320px] bg-white rounded-lg shadow-lg z-[9999] overflow-hidden flex flex-col",
-      style: { top: position.top, left: position.left },
+      style: { top: adjustedPosition.top, left: adjustedPosition.left },
       "data-id": "md-editor-variable-menu",
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-3 py-2 border-b border-gray-200 flex items-center gap-2", children: [
@@ -70651,7 +70862,10 @@ const QUICK_ACTIONS = [
   { id: "make-longer", label: "Expand", instruction: "", icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowRight, { size: 14 }) },
   { id: "convert-to-yaml", label: "YAML", instruction: "", icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FileText, { size: 14 }) }
 ];
-const VARIABLE_CATEGORIES = [
+const MENTION_CATEGORIES = [
+  { type: "agent", label: "Agents", icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Bot, { size: 14 }), isMention: true },
+  { type: "tool", label: "Tools", icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { size: 14 }), isMention: true },
+  { type: "knowledge", label: "Knowledge", icon: /* @__PURE__ */ jsxRuntimeExports.jsx(BookOpen, { size: 14 }), isMention: true },
   { type: "env", label: "Environment", icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Settings, { size: 14 }) },
   { type: "memory", label: "Memory", icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Database, { size: 14 }) },
   { type: "system", label: "System", icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Hash$2, { size: 14 }) },
@@ -70672,8 +70886,12 @@ const AIRefinePanel = ({
   envVariables: envVariables2 = [],
   memoryVariables = [],
   systemVariables: systemVariables2 = [],
-  contentVariables = []
+  contentVariables = [],
+  agents: agents2 = [],
+  tools: tools2 = [],
+  knowledge: knowledge2 = []
 }) => {
+  var _a;
   const [messages, setMessages] = useState([]);
   const [inputValue, setInputValue] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -70689,13 +70907,16 @@ const AIRefinePanel = ({
   const [mentionCursorPos, setMentionCursorPos] = useState(null);
   const [selectedCategory, setSelectedCategory] = useState(null);
   const [selectedMentionIndex, setSelectedMentionIndex] = useState(0);
+  const [mentionSearchQuery, setMentionSearchQuery] = useState("");
   const mentionMenuRef = useRef(null);
+  const searchInputRef = useRef(null);
   const originalContextRef = useRef({ originalText: context.originalText, selectionRange: context.selectionRange });
   const previousContextRef = useRef(null);
   const messagesEndRef = useRef(null);
   const inputRef = useRef(null);
   const [showSelectionHighlight, setShowSelectionHighlight] = useState(false);
   const [isContentExpanded, setIsContentExpanded] = useState(false);
+  const [isTipsExpanded, setIsTipsExpanded] = useState(true);
   const isDark = theme === "dark";
   const variablesByCategory = useMemo(() => ({
     env: envVariables2,
@@ -70703,38 +70924,67 @@ const AIRefinePanel = ({
     system: systemVariables2,
     content: contentVariables
   }), [envVariables2, memoryVariables, systemVariables2, contentVariables]);
+  const mentionsByCategory = useMemo(() => ({
+    agent: agents2,
+    tool: tools2,
+    knowledge: knowledge2
+  }), [agents2, tools2, knowledge2]);
   const availableCategories = useMemo(
-    () => VARIABLE_CATEGORIES.filter((cat) => {
-      var _a;
-      return ((_a = variablesByCategory[cat.type]) == null ? void 0 : _a.length) > 0;
+    () => MENTION_CATEGORIES.filter((cat) => {
+      var _a2, _b;
+      if (cat.isMention) {
+        return ((_a2 = mentionsByCategory[cat.type]) == null ? void 0 : _a2.length) > 0;
+      }
+      return ((_b = variablesByCategory[cat.type]) == null ? void 0 : _b.length) > 0;
     }),
-    [variablesByCategory]
+    [variablesByCategory, mentionsByCategory]
   );
-  const filteredVariables = useMemo(() => {
-    if (selectedCategory && selectedCategory !== "custom") {
+  const isMentionCategory = useMemo(() => {
+    if (!selectedCategory) return false;
+    return ["agent", "tool", "knowledge"].includes(selectedCategory);
+  }, [selectedCategory]);
+  const filteredItems = useMemo(() => {
+    if (!selectedCategory) return [];
+    const searchQuery = mentionSearchQuery.toLowerCase();
+    if (isMentionCategory) {
+      const items = mentionsByCategory[selectedCategory] || [];
+      if (!searchQuery) return items;
+      return items.filter(
+        (m3) => m3.name.toLowerCase().includes(searchQuery)
+      );
+    } else {
       const vars = variablesByCategory[selectedCategory] || [];
-      if (!mentionQuery) return vars;
+      if (!searchQuery) return vars;
       return vars.filter(
-        (v) => v.name.toLowerCase().includes(mentionQuery.toLowerCase()) || v.path.toLowerCase().includes(mentionQuery.toLowerCase())
+        (v) => v.name.toLowerCase().includes(searchQuery) || v.path.toLowerCase().includes(searchQuery)
       );
     }
-    return [];
-  }, [selectedCategory, variablesByCategory, mentionQuery]);
-  const allVariables = useMemo(() => {
+  }, [selectedCategory, variablesByCategory, mentionsByCategory, mentionSearchQuery, isMentionCategory]);
+  const allItems2 = useMemo(() => {
     const all = [];
+    for (const [type, items] of Object.entries(mentionsByCategory)) {
+      for (const m3 of items) {
+        all.push({ ...m3, category: type });
+      }
+    }
     for (const [type, vars] of Object.entries(variablesByCategory)) {
       for (const v of vars) {
         all.push({ ...v, category: type });
       }
     }
     return all;
-  }, [variablesByCategory]);
+  }, [variablesByCategory, mentionsByCategory]);
   const searchResults = useMemo(() => {
     if (!mentionQuery || selectedCategory) return [];
-    return allVariables.filter(
-      (v) => v.name.toLowerCase().includes(mentionQuery.toLowerCase()) || v.path.toLowerCase().includes(mentionQuery.toLowerCase())
-    ).slice(0, 10);
-  }, [allVariables, mentionQuery, selectedCategory]);
+    const query = mentionQuery.toLowerCase();
+    return allItems2.filter((item) => {
+      if ("path" in item) {
+        return item.name.toLowerCase().includes(query) || item.path.toLowerCase().includes(query);
+      } else {
+        return item.name.toLowerCase().includes(query);
+      }
+    }).slice(0, 10);
+  }, [allItems2, mentionQuery, selectedCategory]);
   useEffect(() => {
     if (!isOpen) {
       setMessages([]);
@@ -70746,6 +70996,7 @@ const AIRefinePanel = ({
       setSessionActionType(void 0);
       setIsNewSelectionInSession(false);
       previousContextRef.current = null;
+      setIsTipsExpanded(true);
     }
   }, [isOpen]);
   useEffect(() => {
@@ -70758,8 +71009,8 @@ const AIRefinePanel = ({
         setIsContentExpanded(false);
         setTimeout(() => setShowSelectionHighlight(false), 1500);
         setTimeout(() => {
-          var _a;
-          return (_a = inputRef.current) == null ? void 0 : _a.focus();
+          var _a2;
+          return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
         }, 150);
         if (messages.length > 0) {
           const systemMessage = {
@@ -70791,16 +71042,21 @@ const AIRefinePanel = ({
       setShowSelectionHighlight(true);
       setTimeout(() => setShowSelectionHighlight(false), 1500);
       setTimeout(() => {
-        var _a, _b;
-        (_a = inputRef.current) == null ? void 0 : _a.focus();
+        var _a2, _b;
+        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
         (_b = inputRef.current) == null ? void 0 : _b.scrollIntoView({ behavior: "smooth", block: "nearest" });
       }, 200);
     }
   }, [isOpen]);
   useEffect(() => {
-    var _a;
-    (_a = messagesEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+    var _a2;
+    (_a2 = messagesEndRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
+  useEffect(() => {
+    if (messages.length > 0) {
+      setIsTipsExpanded(false);
+    }
+  }, [messages.length]);
   const getCurrentTextToRefine = useCallback(() => {
     if (currentContentState) {
       return currentContentState.text;
@@ -70892,7 +71148,7 @@ const AIRefinePanel = ({
     handleRefine(action.instruction, action.id);
   };
   const handleInputChange = useCallback((e3) => {
-    var _a;
+    var _a2;
     const value = e3.target.value;
     const cursorPos = e3.target.selectionStart;
     setInputValue(value);
@@ -70901,7 +71157,7 @@ const AIRefinePanel = ({
     if (atMatch && availableCategories.length > 0) {
       setShowMentionMenu(true);
       setMentionQuery(atMatch[1] || "");
-      setMentionCursorPos(cursorPos - (((_a = atMatch[1]) == null ? void 0 : _a.length) || 0) - 1);
+      setMentionCursorPos(cursorPos - (((_a2 = atMatch[1]) == null ? void 0 : _a2.length) || 0) - 1);
       setSelectedMentionIndex(0);
       if (atMatch[1]) {
         setSelectedCategory(null);
@@ -70913,10 +71169,15 @@ const AIRefinePanel = ({
       setSelectedCategory(null);
     }
   }, [availableCategories.length]);
-  const insertMention = useCallback((variable, category) => {
+  const insertMentionItem = useCallback((item, category) => {
     if (mentionCursorPos === null) return;
-    const varType = category || variable.type;
-    const mentionText = `{{${varType}.${variable.path}}}`;
+    let mentionText;
+    if ("path" in item) {
+      const varType = category || item.type;
+      mentionText = `{{${varType}.${item.path}}}`;
+    } else {
+      mentionText = `@${item.name}`;
+    }
     const beforeMention = inputValue.slice(0, mentionCursorPos);
     const afterMention = inputValue.slice(mentionCursorPos + 1 + mentionQuery.length);
     const newValue = beforeMention + mentionText + " " + afterMention;
@@ -70926,6 +71187,7 @@ const AIRefinePanel = ({
     setMentionCursorPos(null);
     setSelectedCategory(null);
     setSelectedMentionIndex(0);
+    setMentionSearchQuery("");
     setTimeout(() => {
       if (inputRef.current) {
         inputRef.current.focus();
@@ -70937,11 +71199,17 @@ const AIRefinePanel = ({
   const handleCategorySelect = useCallback((category) => {
     setSelectedCategory(category);
     setSelectedMentionIndex(0);
+    setMentionSearchQuery("");
+    setTimeout(() => {
+      var _a2;
+      return (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+    }, 50);
   }, []);
   const handleBackToCategories = useCallback(() => {
     setSelectedCategory(null);
     setMentionQuery("");
     setSelectedMentionIndex(0);
+    setMentionSearchQuery("");
   }, []);
   const closeMentionMenu = useCallback(() => {
     setShowMentionMenu(false);
@@ -70949,10 +71217,11 @@ const AIRefinePanel = ({
     setMentionCursorPos(null);
     setSelectedCategory(null);
     setSelectedMentionIndex(0);
+    setMentionSearchQuery("");
   }, []);
   const handleKeyDown2 = (e3) => {
     if (showMentionMenu) {
-      const itemCount = selectedCategory ? filteredVariables.length : mentionQuery ? searchResults.length : availableCategories.length;
+      const itemCount = selectedCategory ? filteredItems.length : mentionQuery ? searchResults.length : availableCategories.length;
       if (e3.key === "ArrowDown") {
         e3.preventDefault();
         setSelectedMentionIndex((prev) => (prev + 1) % Math.max(itemCount, 1));
@@ -70966,13 +71235,13 @@ const AIRefinePanel = ({
       if (e3.key === "Enter") {
         e3.preventDefault();
         if (selectedCategory) {
-          if (filteredVariables[selectedMentionIndex]) {
-            insertMention(filteredVariables[selectedMentionIndex], selectedCategory);
+          if (filteredItems[selectedMentionIndex]) {
+            insertMentionItem(filteredItems[selectedMentionIndex], selectedCategory);
           }
         } else if (mentionQuery && searchResults.length > 0) {
           const result = searchResults[selectedMentionIndex];
           if (result) {
-            insertMention(result, result.category);
+            insertMentionItem(result, result.category);
           }
         } else if (availableCategories[selectedMentionIndex]) {
           handleCategorySelect(availableCategories[selectedMentionIndex].type);
@@ -70984,7 +71253,7 @@ const AIRefinePanel = ({
         closeMentionMenu();
         return;
       }
-      if (e3.key === "Backspace" && selectedCategory && !mentionQuery) {
+      if (e3.key === "Backspace" && selectedCategory && !mentionSearchQuery) {
         e3.preventDefault();
         handleBackToCategories();
         return;
@@ -71028,7 +71297,7 @@ const AIRefinePanel = ({
     }
   };
   const handleReset = () => {
-    var _a;
+    var _a2;
     setMessages([]);
     setConversationHistory([]);
     setCurrentRefinedText(null);
@@ -71040,21 +71309,72 @@ const AIRefinePanel = ({
       text: originalContextRef.current.originalText,
       selectionRange: originalContextRef.current.selectionRange
     });
-    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
   };
   if (!isOpen) return null;
+  const tipsContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: `shrink-0 rounded-xl mb-2 border overflow-hidden transition-all duration-300 ${isDark ? "bg-gray-800/80 border-white/10 backdrop-blur-sm" : "bg-white/90 border-black/[0.08] backdrop-blur-sm shadow-sm"}`,
+      "data-id": "md-editor-ai-tips-section",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setIsTipsExpanded(!isTipsExpanded),
+            className: `w-full flex items-center justify-between px-3.5 py-2 transition-colors ${isDark ? "hover:bg-white/5" : "hover:bg-black/[0.02]"}`,
+            "data-id": "md-editor-ai-tips-toggle",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex items-center justify-center w-5 h-5 rounded-md ${isDark ? "bg-amber-500/20 text-amber-400" : "bg-amber-500/15 text-amber-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { size: 12 }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs font-semibold ${isDark ? "text-gray-300" : "text-gray-600"}`, children: "Tips & Shortcuts" })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                ChevronDown,
+                {
+                  size: 14,
+                  className: `transition-transform duration-200 ${isDark ? "text-gray-500" : "text-gray-400"} ${isTipsExpanded ? "rotate-180" : ""}`
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `overflow-hidden transition-all duration-300 ease-in-out ${isTipsExpanded ? "max-h-[180px] opacity-100" : "max-h-0 opacity-0"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `px-3.5 pb-2.5 pt-0.5 flex flex-col gap-1 ${isDark ? "text-gray-400" : "text-gray-500"}`, children: [
+          [
+            { keys: ["⌘", "B"], desc: "Bold" },
+            { keys: ["⌘", "I"], desc: "Italic" },
+            { keys: ["/"], desc: "Slash menu" },
+            { keys: ["{", "{"], desc: "Variable" },
+            { keys: ["@"], desc: "Mention" },
+            { keys: ["⌘", "Z"], desc: "Undo (+⇧ Redo)" }
+          ].map((item, i2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-0.5", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center gap-1 text-[10px]", children: item.keys.map((k3, j) => /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("kbd", { className: `inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 text-[9px] font-medium rounded border ${isDark ? "text-gray-300 bg-white/5 border-white/10" : "text-gray-500 bg-black/[0.04] border-black/[0.08]"}`, children: k3 }),
+              j < item.keys.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[9px] text-gray-400", children: "+" })
+            ] }, j)) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-right", children: item.desc })
+          ] }, i2)),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-0.5", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-[10px]", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Type, { size: 10 }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Drag" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-right", children: "Reorder" })
+          ] })
+        ] }) })
+      ]
+    }
+  );
   const renderMessage = (message, index) => {
     if (message.isSystemMessage) {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
-          className: `flex flex-col gap-2 p-3 my-2 rounded-xl border animate-[ai-new-selection-in_0.3s_ease-out] ${isDark ? "bg-gradient-to-br from-violet-500/15 to-indigo-500/15 border-violet-500/30" : "bg-gradient-to-br from-violet-500/10 to-indigo-500/10 border-violet-500/20"}`,
+          className: `flex items-start gap-2 p-2.5 my-2 rounded-lg border animate-[ai-new-selection-in_0.3s_ease-out] ${isDark ? "bg-white/5 border-white/10" : "bg-black/[0.03] border-black/5"}`,
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide ${isDark ? "text-violet-400" : "text-violet-600"}`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(MousePointerClick, { size: 14 }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "New Selection" })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-[13px] leading-relaxed p-2.5 rounded-lg border-l-[3px] border-violet-500 whitespace-pre-wrap break-words ${isDark ? "text-gray-300 bg-black/20" : "text-gray-600 bg-white/60"}`, children: message.newSelectionText })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `shrink-0 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide rounded-md ${isDark ? "text-violet-400 bg-violet-500/20" : "text-violet-600 bg-violet-500/10"}`, children: "Selection" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs leading-relaxed whitespace-pre-wrap break-words line-clamp-4 ${isDark ? "text-gray-300" : "text-gray-600"}`, children: message.newSelectionText })
           ]
         },
         index
@@ -71069,7 +71389,7 @@ const AIRefinePanel = ({
         children: [
           message.role === "assistant" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center w-7 h-7 rounded-lg bg-gradient-to-br from-violet-500 to-indigo-500 text-white shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { size: 14 }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `max-w-[85%] px-4 py-3 rounded-2xl text-sm leading-relaxed ${message.role === "user" ? "bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-br-md" : isErrorMessage ? isDark ? "bg-red-900/30 text-red-200 border border-red-500/30 rounded-bl-md" : "bg-red-50 text-red-700 border border-red-200 rounded-bl-md" : isDark ? "bg-gray-700 text-gray-100 border border-white/5 rounded-bl-md" : "bg-gray-100 text-gray-800 border border-black/5 rounded-bl-md"}`, children: [
-            message.quotedText && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-2.5 p-2.5 bg-white/15 rounded-lg text-xs border-l-[3px] border-white/50", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "opacity-95 line-clamp-3", children: message.quotedText }) }),
+            message.quotedText && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-2.5 p-2.5 bg-white/20 rounded-lg text-xs border-l-[3px] border-white/60 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white/90 line-clamp-3", children: message.quotedText }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "whitespace-pre-wrap break-words", children: message.content }),
             isLastAssistant && !isErrorMessage && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex items-center gap-1.5 mt-2.5 pt-2.5 border-t ${isDark ? "border-white/10" : "border-black/5"}`, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -71151,8 +71471,8 @@ const AIRefinePanel = ({
             "data-id": "md-editor-ai-selection-box",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `shrink-0 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide rounded-md transition-all duration-300 ${showSelectionHighlight ? "text-white bg-gradient-to-r from-violet-500 to-indigo-500 scale-105 shadow-md" : isDark ? "text-violet-400 bg-violet-500/20" : "text-violet-600 bg-violet-500/10"}`, children: context.type === "selection" ? "Selection" : "Full" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs leading-snug break-words ${isDark ? "text-gray-400" : "text-gray-500"} ${isContentExpanded ? "" : "line-clamp-2"}`, children: isContentExpanded ? context.originalText.replace(/\n/g, " ") : context.originalText.length > 80 ? context.originalText.slice(0, 80).replace(/\n/g, " ") + "..." : context.originalText.replace(/\n/g, " ") }) }),
-              context.originalText.length > 80 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs leading-snug break-words whitespace-pre-wrap ${isDark ? "text-gray-300" : "text-gray-600"} ${isContentExpanded ? "" : "line-clamp-4"}`, children: context.originalText || "(No content selected)" }) }),
+              context.originalText && context.originalText.length > 100 && /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "button",
                 {
                   type: "button",
@@ -71171,32 +71491,7 @@ const AIRefinePanel = ({
               )
             ]
           }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex flex-col gap-3 w-full mt-3 px-4 py-3.5 rounded-lg border border-dashed text-left ${isDark ? "bg-white/[0.02] border-white/10" : "bg-black/[0.02] border-black/[0.08]"}`, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-[10px] font-semibold uppercase tracking-wide mb-0.5 ${isDark ? "text-gray-500" : "text-gray-400"}`, children: "Tips & Shortcuts" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", children: [
-            [
-              { keys: ["⌘", "B"], desc: "Bold text" },
-              { keys: ["⌘", "I"], desc: "Italic text" },
-              { keys: ["/"], desc: "Add block / slash menu" },
-              { keys: ["{", "{"], desc: "Insert variable" },
-              { keys: ["⌘", "Z"], desc: "Undo / Redo (+⇧)" }
-            ].map((item, i2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `flex items-center gap-1 text-[11px] ${isDark ? "text-gray-500" : "text-gray-400"}`, children: item.keys.map((k3, j) => /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("kbd", { className: `inline-flex items-center justify-center min-w-[18px] h-[18px] px-1.5 text-[10px] font-medium rounded border ${isDark ? "text-gray-300 bg-white/5 border-white/10" : "text-gray-500 bg-black/[0.04] border-black/[0.08]"}`, children: k3 }),
-                j < item.keys.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px]", children: "+" })
-              ] }, j)) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] text-right ${isDark ? "text-gray-500" : "text-gray-400"}`, children: item.desc })
-            ] }, i2)),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: `flex items-center gap-1 text-[11px] ${isDark ? "text-gray-500" : "text-gray-400"}`, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Type, { size: 11 }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Drag handle" })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] text-right ${isDark ? "text-gray-500" : "text-gray-400"}`, children: "Reorder blocks" })
-            ] })
-          ] })
-        ] })
+        )
       ] }),
       messages.map((message, index) => renderMessage(message, index)),
       isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2.5 max-w-full animate-[ai-message-in_0.3s_ease-out]", children: [
@@ -71227,35 +71522,39 @@ const AIRefinePanel = ({
         "div",
         {
           ref: mentionMenuRef,
-          className: `rounded-lg border shadow-lg overflow-hidden max-h-[200px] overflow-y-auto ${isDark ? "bg-gray-800 border-gray-600" : "bg-white border-gray-200"}`,
+          className: `rounded-lg border shadow-lg overflow-hidden max-h-[280px] flex flex-col ${isDark ? "bg-gray-800 border-gray-600" : "bg-white border-gray-200"}`,
           "data-id": "md-editor-ai-mention-menu",
           children: [
-            mentionQuery && !selectedCategory && searchResults.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `px-3 py-1.5 text-[10px] font-medium uppercase tracking-wide ${isDark ? "text-gray-500" : "text-gray-400"}`, children: "Variables" }),
-              searchResults.map((variable, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "button",
-                {
-                  className: `w-full flex items-center gap-2 px-3 py-2 text-left transition-colors ${index === selectedMentionIndex ? isDark ? "bg-violet-500/20 text-violet-300" : "bg-violet-50 text-violet-700" : isDark ? "text-gray-300 hover:bg-white/5" : "text-gray-700 hover:bg-gray-50"}`,
-                  onClick: () => insertMention(variable, variable.category),
-                  "data-id": `md-editor-ai-mention-${variable.path}`,
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs px-1.5 py-0.5 rounded ${isDark ? "bg-gray-700 text-gray-400" : "bg-gray-100 text-gray-500"}`, children: variable.category }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium truncate", children: variable.name }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs truncate ${isDark ? "text-gray-500" : "text-gray-400"}`, children: variable.path })
-                  ]
-                },
-                `${variable.category}-${variable.path}`
-              ))
+            mentionQuery && !selectedCategory && searchResults.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-1 overflow-y-auto", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `px-3 py-1.5 text-[10px] font-medium uppercase tracking-wide ${isDark ? "text-gray-500" : "text-gray-400"}`, children: "Results" }),
+              searchResults.map((item, index) => {
+                const isVariable = "path" in item;
+                return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "button",
+                  {
+                    className: `w-full flex items-center gap-2 px-3 py-2 text-left transition-colors ${index === selectedMentionIndex ? isDark ? "bg-violet-500/20 text-violet-300" : "bg-violet-50 text-violet-700" : isDark ? "text-gray-300 hover:bg-white/5" : "text-gray-700 hover:bg-gray-50"}`,
+                    onClick: () => insertMentionItem(item, item.category),
+                    "data-id": `md-editor-ai-mention-${isVariable ? item.path : item.id}`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs px-1.5 py-0.5 rounded ${isDark ? "bg-gray-700 text-gray-400" : "bg-gray-100 text-gray-500"}`, children: item.category }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium truncate", children: item.name }),
+                      isVariable && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs truncate ${isDark ? "text-gray-500" : "text-gray-400"}`, children: item.path })
+                    ]
+                  },
+                  isVariable ? `${item.category}-${item.path}` : `${item.category}-${item.id}`
+                );
+              })
             ] }),
             mentionQuery && !selectedCategory && searchResults.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `px-3 py-4 text-center text-sm ${isDark ? "text-gray-500" : "text-gray-400"}`, children: [
-              'No variables found for "',
+              'No results found for "',
               mentionQuery,
               '"'
             ] }),
-            !mentionQuery && !selectedCategory && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `px-3 py-1.5 text-[10px] font-medium uppercase tracking-wide ${isDark ? "text-gray-500" : "text-gray-400"}`, children: "Select category" }),
+            !mentionQuery && !selectedCategory && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-1 overflow-y-auto", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `px-3 py-1.5 text-[10px] font-medium uppercase tracking-wide ${isDark ? "text-gray-500" : "text-gray-400"}`, children: "Mention" }),
               availableCategories.map((category, index) => {
-                var _a;
+                var _a2, _b;
+                const count = category.isMention ? ((_a2 = mentionsByCategory[category.type]) == null ? void 0 : _a2.length) || 0 : ((_b = variablesByCategory[category.type]) == null ? void 0 : _b.length) || 0;
                 return /* @__PURE__ */ jsxRuntimeExports.jsxs(
                   "button",
                   {
@@ -71268,7 +71567,7 @@ const AIRefinePanel = ({
                         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: category.label }),
                         /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: `text-xs ${isDark ? "text-gray-500" : "text-gray-400"}`, children: [
                           "(",
-                          ((_a = variablesByCategory[category.type]) == null ? void 0 : _a.length) || 0,
+                          count,
                           ")"
                         ] })
                       ] }),
@@ -71279,32 +71578,66 @@ const AIRefinePanel = ({
                 );
               })
             ] }),
-            selectedCategory && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "button",
-                {
-                  className: `w-full flex items-center gap-2 px-3 py-1.5 text-left border-b transition-colors ${isDark ? "text-gray-400 hover:bg-white/5 border-gray-700" : "text-gray-500 hover:bg-gray-50 border-gray-100"}`,
-                  onClick: handleBackToCategories,
-                  "data-id": "md-editor-ai-mention-back",
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: "rotate-180" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: "Back" })
-                  ]
-                }
-              ),
-              filteredVariables.length > 0 ? filteredVariables.map((variable, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "button",
-                {
-                  className: `w-full flex flex-col gap-0.5 px-3 py-2 text-left transition-colors ${index === selectedMentionIndex ? isDark ? "bg-violet-500/20 text-violet-300" : "bg-violet-50 text-violet-700" : isDark ? "text-gray-300 hover:bg-white/5" : "text-gray-700 hover:bg-gray-50"}`,
-                  onClick: () => insertMention(variable, selectedCategory || void 0),
-                  "data-id": `md-editor-ai-mention-var-${variable.path}`,
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: variable.name }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs truncate ${isDark ? "text-gray-500" : "text-gray-400"}`, children: `{{${selectedCategory}.${variable.path}}}` })
-                  ]
-                },
-                variable.path
-              )) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `px-3 py-3 text-center text-sm ${isDark ? "text-gray-500" : "text-gray-400"}`, children: "No variables found" })
+            selectedCategory && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex items-center gap-2 px-3 py-1.5 border-b shrink-0 ${isDark ? "border-gray-700" : "border-gray-100"}`, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "button",
+                  {
+                    className: `flex items-center gap-1 text-xs transition-colors ${isDark ? "text-gray-400 hover:text-gray-200" : "text-gray-500 hover:text-gray-700"}`,
+                    onClick: handleBackToCategories,
+                    "data-id": "md-editor-ai-mention-back",
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: "rotate-180" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Back" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs font-medium ${isDark ? "text-gray-300" : "text-gray-600"}`, children: (_a = MENTION_CATEGORIES.find((c3) => c3.type === selectedCategory)) == null ? void 0 : _a.label })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `px-2 py-1.5 border-b shrink-0 ${isDark ? "border-gray-700" : "border-gray-100"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex items-center gap-2 px-2 py-1 rounded-md ${isDark ? "bg-gray-900" : "bg-gray-50"}`, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { size: 14, className: isDark ? "text-gray-500" : "text-gray-400" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "input",
+                  {
+                    ref: searchInputRef,
+                    type: "text",
+                    value: mentionSearchQuery,
+                    onChange: (e3) => {
+                      setMentionSearchQuery(e3.target.value);
+                      setSelectedMentionIndex(0);
+                    },
+                    placeholder: "Search...",
+                    className: `flex-1 bg-transparent text-xs border-0 outline-none ${isDark ? "text-gray-200 placeholder:text-gray-500" : "text-gray-700 placeholder:text-gray-400"}`,
+                    onKeyDown: (e3) => {
+                      var _a2;
+                      if (e3.key === "Escape") {
+                        e3.stopPropagation();
+                        closeMentionMenu();
+                      } else if (e3.key === "ArrowDown" || e3.key === "ArrowUp" || e3.key === "Enter") {
+                        e3.preventDefault();
+                        (_a2 = inputRef.current) == null ? void 0 : _a2.dispatchEvent(new KeyboardEvent("keydown", { key: e3.key, bubbles: true }));
+                      }
+                    },
+                    "data-id": "md-editor-ai-mention-search"
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-1 overflow-y-auto", children: filteredItems.length > 0 ? filteredItems.map((item, index) => {
+                const isVariable = "path" in item;
+                return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "button",
+                  {
+                    className: `w-full flex flex-col gap-0.5 px-3 py-2 text-left transition-colors ${index === selectedMentionIndex ? isDark ? "bg-violet-500/20 text-violet-300" : "bg-violet-50 text-violet-700" : isDark ? "text-gray-300 hover:bg-white/5" : "text-gray-700 hover:bg-gray-50"}`,
+                    onClick: () => insertMentionItem(item, selectedCategory || void 0),
+                    "data-id": `md-editor-ai-mention-item-${isVariable ? item.path : item.id}`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: item.name }),
+                      isVariable ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs truncate ${isDark ? "text-gray-500" : "text-gray-400"}`, children: `{{${selectedCategory}.${item.path}}}` }) : item.description ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs truncate ${isDark ? "text-gray-500" : "text-gray-400"}`, children: item.description }) : null
+                    ]
+                  },
+                  isVariable ? item.path : item.id
+                );
+              }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `px-3 py-3 text-center text-sm ${isDark ? "text-gray-500" : "text-gray-400"}`, children: mentionSearchQuery ? `No results for "${mentionSearchQuery}"` : "No items available" }) })
             ] })
           ]
         }
@@ -71315,7 +71648,7 @@ const AIRefinePanel = ({
           {
             ref: inputRef,
             className: `flex-1 min-h-[36px] max-h-[100px] px-2.5 py-2 border-0 bg-transparent text-sm resize-none outline-none ${isDark ? "text-gray-100 placeholder:text-gray-500" : "text-gray-800 placeholder:text-gray-400"}`,
-            placeholder: isNewSelectionInSession ? "Refine this new selection... (@ for variables)" : messages.length === 0 ? "Describe how to refine... (@ for variables)" : "Continue... (@ for variables)",
+            placeholder: isNewSelectionInSession ? "Refine this new selection... (@ to mention)" : messages.length === 0 ? "Describe how to refine... (@ to mention)" : "Continue... (@ to mention)",
             value: inputValue,
             onChange: handleInputChange,
             onKeyDown: handleKeyDown2,
@@ -71340,12 +71673,15 @@ const AIRefinePanel = ({
   ] });
   switch (position) {
     case "side-panel":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
-          className: `w-[400px] min-w-[340px] max-w-[500px] h-[calc(100%-24px)] m-3 mr-3 ml-0 border rounded-2xl shrink-0 overflow-hidden animate-[ai-panel-slide-in_0.3s_cubic-bezier(0.4,0,0.2,1)] ${isDark ? "border-white/10 shadow-[-4px_0_32px_rgba(0,0,0,0.4)]" : "border-black/[0.08] shadow-[-4px_0_32px_rgba(0,0,0,0.12)]"}`,
+          className: "flex flex-col w-[400px] min-w-[340px] max-w-[500px] h-[calc(100%-24px)] m-3 mr-3 ml-0 shrink-0 animate-[ai-panel-slide-in_0.3s_cubic-bezier(0.4,0,0.2,1)]",
           "data-id": "md-editor-ai-panel-side",
-          children: panelContent
+          children: [
+            tipsContent,
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex-1 min-h-0 border rounded-2xl overflow-hidden ${isDark ? "border-white/10 shadow-[-4px_0_32px_rgba(0,0,0,0.4)]" : "border-black/[0.08] shadow-[-4px_0_32px_rgba(0,0,0,0.12)]"}`, children: panelContent })
+          ]
         }
       );
     case "inline-popup":
@@ -71358,7 +71694,10 @@ const AIRefinePanel = ({
             "data-id": "md-editor-ai-panel-backdrop"
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[90%] max-w-[600px] max-h-[80vh] rounded-[20px] overflow-hidden shadow-[0_24px_48px_rgba(0,0,0,0.2)] animate-[ai-popup-scale-in_0.3s_cubic-bezier(0.4,0,0.2,1)]", children: panelContent })
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-[90%] max-w-[600px] max-h-[80vh] flex flex-col gap-2 animate-[ai-popup-scale-in_0.3s_cubic-bezier(0.4,0,0.2,1)]", children: [
+          tipsContent,
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0 rounded-[20px] overflow-hidden shadow-[0_24px_48px_rgba(0,0,0,0.2)]", children: panelContent })
+        ] })
       ] });
     case "bottom-drawer":
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-[9999] flex flex-col justify-end", "data-id": "md-editor-ai-panel-drawer", children: [
@@ -71370,18 +71709,24 @@ const AIRefinePanel = ({
             "data-id": "md-editor-ai-panel-backdrop"
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full max-h-[70vh] rounded-t-[24px] overflow-hidden shadow-[0_-10px_40px_rgba(0,0,0,0.2)] animate-[ai-drawer-slide-up_0.4s_cubic-bezier(0.4,0,0.2,1)]", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-1 rounded-full mx-auto mt-3 mb-2 ${isDark ? "bg-white/20" : "bg-black/20"}`, "data-id": "md-editor-ai-panel-drawer-handle" }),
-          panelContent
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full max-h-[70vh] flex flex-col gap-2 px-4 pb-4 animate-[ai-drawer-slide-up_0.4s_cubic-bezier(0.4,0,0.2,1)]", children: [
+          tipsContent,
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-h-0 rounded-t-[24px] overflow-hidden shadow-[0_-10px_40px_rgba(0,0,0,0.2)]", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-1 rounded-full mx-auto mt-3 mb-2 ${isDark ? "bg-white/20" : "bg-black/20"}`, "data-id": "md-editor-ai-panel-drawer-handle" }),
+            panelContent
+          ] })
         ] })
       ] });
     default:
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
-          className: `w-[400px] min-w-[340px] max-w-[500px] h-[calc(100%-24px)] m-3 mr-3 ml-0 border rounded-2xl shrink-0 overflow-hidden animate-[ai-panel-slide-in_0.3s_cubic-bezier(0.4,0,0.2,1)] ${isDark ? "border-white/10 shadow-[-4px_0_32px_rgba(0,0,0,0.4)]" : "border-black/[0.08] shadow-[-4px_0_32px_rgba(0,0,0,0.12)]"}`,
+          className: "flex flex-col w-[400px] min-w-[340px] max-w-[500px] h-[calc(100%-24px)] m-3 mr-3 ml-0 shrink-0 animate-[ai-panel-slide-in_0.3s_cubic-bezier(0.4,0,0.2,1)]",
           "data-id": "md-editor-ai-panel",
-          children: panelContent
+          children: [
+            tipsContent,
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex-1 min-h-0 border rounded-2xl overflow-hidden ${isDark ? "border-white/10 shadow-[-4px_0_32px_rgba(0,0,0,0.4)]" : "border-black/[0.08] shadow-[-4px_0_32px_rgba(0,0,0,0.12)]"}`, children: panelContent })
+          ]
         }
       );
   }
@@ -71583,6 +71928,8 @@ const MDEditor = forwardRef(
     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("");
     const defaultCategories = useMemo(() => {
       const categories = [];
       if (agents2.length > 0) {
@@ -71710,12 +72057,20 @@ const MDEditor = forwardRef(
         let originalText;
         let selectionRange;
         if (actualType === "selection" && hasSelection2) {
-          originalText = editor2.state.doc.textBetween(from2, to);
+          const selectedSlice = editor2.state.doc.slice(from2, to);
+          const selectedContent = { content: selectedSlice.content.toJSON() };
+          originalText = editorJsonToMarkdown(selectedContent);
+          if (!originalText || originalText.trim() === "") {
+            originalText = editor2.state.doc.textBetween(from2, to, "\n");
+          }
           selectionRange = { from: from2, to };
         } else {
-          originalText = editor2.getText();
+          originalText = editorJsonToMarkdown(editor2.getJSON());
+          if (!originalText || originalText.trim() === "") {
+            originalText = editor2.getText();
+          }
         }
-        const fullContent = editor2.getText();
+        const fullContent = editorJsonToMarkdown(editor2.getJSON());
         setAIRefineContext({
           type: actualType,
           originalText,
@@ -71738,6 +72093,22 @@ const MDEditor = forwardRef(
       setAIPanelOpen(false);
       setAIRefineContext(null);
     }, [mergedAIConfig.alwaysShowPanel]);
+    const toggleRawMode = useCallback(() => {
+      if (!editorRef.current) return;
+      if (isRawMode) {
+        const parsedContent = markdownToEditorJson(rawMarkdown);
+        editorRef.current.commands.setContent(parsedContent);
+        lastEmittedMarkdownRef.current = rawMarkdown;
+      } else {
+        const json = editorRef.current.getJSON();
+        const markdown = editorJsonToMarkdown(json);
+        setRawMarkdown(markdown);
+      }
+      setIsRawMode(!isRawMode);
+    }, [isRawMode, rawMarkdown]);
+    const handleRawMarkdownChange = useCallback((newValue) => {
+      setRawMarkdown(newValue);
+    }, []);
     const handleAIRefineTrigger = useCallback(
       (type) => {
         openAIRefine(type);
@@ -71854,6 +72225,16 @@ const MDEditor = forwardRef(
           })
         );
       }
+      if (mergedFeatures.mentions && (agents2.length > 0 || tools2.length > 0 || knowledge2.length > 0)) {
+        exts.push(
+          MentionCommandExtension.configure({
+            agents: agents2,
+            tools: tools2,
+            knowledge: knowledge2,
+            onSelectItem: handleSlashCommandSelect
+          })
+        );
+      }
       if (mergedAIConfig.enabled && onAIRefine) {
         exts.push(
           AIRefineExtension.configure({
@@ -71956,6 +72337,28 @@ const MDEditor = forwardRef(
         });
       }
     }, [editor, mergedAIConfig.alwaysShowPanel, mergedAIConfig.enabled, onAIRefine, aiRefineContext]);
+    useEffect(() => {
+      if (!isRawMode) return;
+      const timer = setTimeout(() => {
+        if (rawMarkdown !== lastEmittedMarkdownRef.current) {
+          lastEmittedMarkdownRef.current = rawMarkdown;
+          if (onMarkdownChange) {
+            onMarkdownChange(rawMarkdown);
+          }
+          if (onChange) {
+            const parsedContent = markdownToEditorJson(rawMarkdown);
+            const doc2 = editorJsonToDocument(parsedContent);
+            onChange(doc2, rawMarkdown);
+          }
+        }
+      }, 300);
+      return () => clearTimeout(timer);
+    }, [rawMarkdown, isRawMode, onMarkdownChange, onChange]);
+    useEffect(() => {
+      if (isRawMode && markdownValue !== void 0 && markdownValue !== lastEmittedMarkdownRef.current) {
+        setRawMarkdown(markdownValue);
+      }
+    }, [markdownValue, isRawMode]);
     useImperativeHandle(
       ref,
       () => ({
@@ -72002,9 +72405,12 @@ const MDEditor = forwardRef(
         },
         // AI Refinement methods
         openAIRefine: (type) => openAIRefine(type),
-        closeAIRefine
+        closeAIRefine,
+        // Raw mode methods
+        toggleRawMode,
+        isRawMode: () => isRawMode
       }),
-      [editor, insertVariable, insertMention, openAIRefine, closeAIRefine]
+      [editor, insertVariable, insertMention, openAIRefine, closeAIRefine, toggleRawMode, isRawMode]
     );
     if (!editor) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `k-md-editor k-md-editor--${theme} flex items-center justify-center min-h-[200px] ${className}`, "data-id": "md-editor-loading", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full min-h-[200px] rounded bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 bg-[length:200%_100%] animate-pulse" }) });
@@ -72112,16 +72518,51 @@ const MDEditor = forwardRef(
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableToolbar, { editor, theme })
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "k-md-editor__wrapper relative w-full h-full", children: [
-              mergedFeatures.dragDrop && !readOnly && /* @__PURE__ */ jsxRuntimeExports.jsx(DragHandle, { editor }),
+            !readOnly && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                onClick: toggleRawMode,
+                className: "absolute top-2 right-2 p-1.5 rounded-md z-10 transition-all duration-200\n                         bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm\n                         border border-gray-200 dark:border-gray-700\n                         hover:bg-gray-100 dark:hover:bg-gray-700\n                         hover:border-gray-300 dark:hover:border-gray-600\n                         text-gray-600 dark:text-gray-400\n                         hover:text-gray-900 dark:hover:text-gray-100\n                         shadow-sm hover:shadow",
+                title: isRawMode ? "Switch to rich editor" : "Switch to raw markdown",
+                "data-id": "md-editor-raw-toggle",
+                children: isRawMode ? (
+                  // Eye icon (switch to rich/preview mode)
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })
+                  ] })
+                ) : (
+                  // Code icon (switch to raw markdown)
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" }) })
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "k-md-editor__wrapper relative w-full h-full", children: isRawMode ? (
+              // Raw Markdown Textarea
               /* @__PURE__ */ jsxRuntimeExports.jsx(
-                EditorContent,
+                "textarea",
                 {
-                  editor,
-                  className: "k-md-editor__content w-full h-full overflow-y-auto"
+                  value: rawMarkdown,
+                  onChange: (e3) => handleRawMarkdownChange(e3.target.value),
+                  className: "k-md-editor__raw-textarea w-full h-full min-h-[200px] p-4 pr-12\n                           font-mono text-sm leading-relaxed resize-none\n                           bg-gray-50 dark:bg-gray-900\n                           text-gray-900 dark:text-gray-100\n                           border-0 focus:outline-none focus:ring-0\n                           placeholder:text-gray-400 dark:placeholder:text-gray-600",
+                  placeholder: "Write your markdown here...\n\n# Heading\n## Subheading\n- Bullet point\n1. Numbered list\n**bold** _italic_ `code`",
+                  "data-id": "md-editor-raw-textarea",
+                  spellCheck: false
                 }
               )
-            ] }),
+            ) : (
+              // Rich Editor
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                mergedFeatures.dragDrop && !readOnly && /* @__PURE__ */ jsxRuntimeExports.jsx(DragHandle, { editor }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  EditorContent,
+                  {
+                    editor,
+                    className: "k-md-editor__content w-full h-full overflow-y-auto"
+                  }
+                )
+              ] })
+            ) }),
             variableMenuOpen && /* @__PURE__ */ jsxRuntimeExports.jsx(
               VariableMenu,
               {
@@ -72165,7 +72606,10 @@ const MDEditor = forwardRef(
               envVariables: envVariables2,
               memoryVariables,
               systemVariables: systemVariables2,
-              contentVariables
+              contentVariables,
+              agents: agents2,
+              tools: tools2,
+              knowledge: knowledge2
             }
           )
         ]