@opensumi/ide-ai-native 3.8.3-next-1741752385.0 → 3.8.3-next-1741763229.0

package/lib/browser/components/mention-input/mention-input.js

@@ -0,0 +1,753 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MentionInput = exports.WHITE_SPACE_TEXT = void 0;
+const tslib_1 = require("tslib");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__importStar(require("react"));
+const components_1 = require("@opensumi/ide-core-browser/lib/components");
+const ai_native_1 = require("@opensumi/ide-core-browser/lib/components/ai-native");
+const ide_utils_1 = require("@opensumi/ide-utils");
+const mention_input_module_less_1 = tslib_1.__importDefault(require("./mention-input.module.less"));
+const mention_panel_1 = require("./mention-panel");
+const types_1 = require("./types");
+exports.WHITE_SPACE_TEXT = ' ';
+const MentionInput = ({ mentionItems = [], onSend, onStop, loading = false, mentionKeyword = types_1.MENTION_KEYWORD, onSelectionChange, labelService, placeholder = 'Ask anything, @ to mention', footerConfig = {
+    buttons: [],
+    showModelSelector: false,
+}, }) => {
+    const editorRef = React.useRef(null);
+    const [mentionState, setMentionState] = React.useState({
+        active: false,
+        startPos: null,
+        filter: '',
+        position: { top: 0, left: 0 },
+        activeIndex: 0,
+        level: 0, // 0: 一级菜单, 1: 二级菜单
+        parentType: null, // 二级菜单的父类型
+        secondLevelFilter: '', // 二级菜单的筛选文本
+        inlineSearchActive: false, // 是否在输入框中进行二级搜索
+        inlineSearchStartPos: null, // 内联搜索的起始位置
+        loading: false, // 添加加载状态
+    });
+    // 添加模型选择状态
+    const [selectedModel, setSelectedModel] = React.useState(footerConfig.defaultModel || '');
+    // 添加缓存状态，用于存储二级菜单项
+    const [secondLevelCache, setSecondLevelCache] = React.useState({});
+    // 添加历史记录状态
+    const [history, setHistory] = React.useState([]);
+    const [historyIndex, setHistoryIndex] = React.useState(-1);
+    const [currentInput, setCurrentInput] = React.useState('');
+    const [isNavigatingHistory, setIsNavigatingHistory] = React.useState(false);
+    // 获取当前菜单项
+    const getCurrentItems = () => {
+        if (mentionState.level === 0) {
+            return mentionItems;
+        }
+        else if (mentionState.parentType) {
+            // 如果正在加载，返回缓存的项目
+            if (mentionState.loading) {
+                return secondLevelCache[mentionState.parentType] || [];
+            }
+            // 返回缓存的项目
+            return secondLevelCache[mentionState.parentType] || [];
+        }
+        return [];
+    };
+    // 添加防抖函数
+    const useDebounce = (value, delay) => {
+        const [debouncedValue, setDebouncedValue] = React.useState(value);
+        React.useEffect(() => {
+            const handler = setTimeout(() => {
+                setDebouncedValue(value);
+            }, delay);
+            return () => {
+                clearTimeout(handler);
+            };
+        }, [value, delay]);
+        return debouncedValue;
+    };
+    // 使用防抖处理搜索文本
+    const debouncedSecondLevelFilter = useDebounce(mentionState.secondLevelFilter, 300);
+    // 监听搜索文本变化，实时更新二级菜单
+    React.useEffect(() => {
+        if (mentionState.level === 1 && mentionState.parentType && debouncedSecondLevelFilter !== undefined) {
+            // 查找父级菜单项
+            const parentItem = mentionItems.find((item) => item.id === mentionState.parentType);
+            if (!parentItem) {
+                return;
+            }
+            // 设置加载状态
+            setMentionState((prev) => ({ ...prev, loading: true }));
+            // 异步加载
+            const fetchItems = async () => {
+                try {
+                    // 首先显示高优先级项目（如果有）
+                    const items = [];
+                    if (parentItem.getHighestLevelItems) {
+                        const highestLevelItems = parentItem.getHighestLevelItems();
+                        for (const item of highestLevelItems) {
+                            if (!items.some((i) => i.id === item.id)) {
+                                items.push(item);
+                            }
+                        }
+                        // 立即更新缓存，显示高优先级项目
+                        setSecondLevelCache((prev) => ({
+                            ...prev,
+                            [mentionState.parentType]: highestLevelItems,
+                        }));
+                    }
+                    // 然后异步加载更多项目
+                    if (parentItem.getItems) {
+                        try {
+                            // 获取子菜单项
+                            const newItems = await parentItem.getItems(debouncedSecondLevelFilter);
+                            // 去重合并
+                            const combinedItems = [...items];
+                            for (const item of newItems) {
+                                if (!combinedItems.some((i) => i.id === item.id)) {
+                                    combinedItems.push(item);
+                                }
+                            }
+                            // 更新缓存
+                            setSecondLevelCache((prev) => ({
+                                ...prev,
+                                [mentionState.parentType]: combinedItems,
+                            }));
+                        }
+                        catch (error) {
+                            // 如果异步加载失败，至少保留高优先级项目
+                            setMentionState((prev) => ({ ...prev, loading: false }));
+                        }
+                    }
+                    // 最后清除加载状态
+                    setMentionState((prev) => ({ ...prev, loading: false }));
+                }
+                catch (error) {
+                    setMentionState((prev) => ({ ...prev, loading: false }));
+                }
+            };
+            fetchItems();
+        }
+    }, [debouncedSecondLevelFilter, mentionState.level, mentionState.parentType]);
+    // 获取光标位置
+    const getCursorPosition = (element) => {
+        const selection = window.getSelection();
+        if (!selection || !selection.rangeCount) {
+            return 0;
+        }
+        const range = selection.getRangeAt(0);
+        const preCaretRange = range.cloneRange();
+        preCaretRange.selectNodeContents(element);
+        preCaretRange.setEnd(range.endContainer, range.endOffset);
+        return preCaretRange.toString().length;
+    };
+    // 处理输入事件
+    const handleInput = () => {
+        // 如果用户开始输入，退出历史导航模式
+        if (isNavigatingHistory) {
+            setIsNavigatingHistory(false);
+            setHistoryIndex(-1);
+        }
+        const selection = window.getSelection();
+        if (!selection || !selection.rangeCount || !editorRef.current) {
+            return;
+        }
+        const text = editorRef.current.textContent || '';
+        const cursorPos = getCursorPosition(editorRef.current);
+        // 判断是否刚输入了 @
+        if (text[cursorPos - 1] === mentionKeyword && !mentionState.active && !mentionState.inlineSearchActive) {
+            setMentionState({
+                active: true,
+                startPos: cursorPos,
+                filter: mentionKeyword,
+                position: { top: 0, left: 0 }, // 固定位置，不再需要动态计算
+                activeIndex: 0,
+                level: 0,
+                parentType: null,
+                secondLevelFilter: '',
+                inlineSearchActive: false,
+                inlineSearchStartPos: null,
+                loading: false,
+            });
+        }
+        // 如果已激活提及面板且在一级菜单，更新过滤内容
+        if (mentionState.active && mentionState.level === 0 && mentionState.startPos !== null) {
+            if (cursorPos < mentionState.startPos) {
+                // 如果光标移到了 @ 之前，关闭面板
+                setMentionState((prev) => ({ ...prev, active: false }));
+            }
+            else {
+                const newFilter = text.substring(mentionState.startPos - 1, cursorPos);
+                setMentionState((prev) => ({
+                    ...prev,
+                    filter: newFilter,
+                    activeIndex: 0,
+                }));
+            }
+        }
+        // 如果在输入框中进行二级搜索
+        if (mentionState.inlineSearchActive && mentionState.inlineSearchStartPos !== null && mentionState.parentType) {
+            // 获取父级类型
+            const parentItem = mentionItems.find((i) => i.id === mentionState.parentType);
+            if (!parentItem) {
+                return;
+            }
+            // 检查光标是否在 @type: 之后
+            const typePrefix = `@${parentItem.type}:`;
+            const prefixPos = mentionState.inlineSearchStartPos - typePrefix.length;
+            if (prefixPos >= 0 && cursorPos > prefixPos + typePrefix.length) {
+                // 提取搜索文本
+                const searchText = text.substring(prefixPos + typePrefix.length, cursorPos);
+                // 只有当搜索文本变化时才更新状态
+                if (searchText !== mentionState.secondLevelFilter) {
+                    setMentionState((prev) => ({
+                        ...prev,
+                        secondLevelFilter: searchText,
+                        active: true,
+                        activeIndex: 0,
+                    }));
+                }
+            }
+            else if (cursorPos <= prefixPos) {
+                // 如果光标移到了 @type: 之前，关闭内联搜索
+                setMentionState((prev) => ({
+                    ...prev,
+                    inlineSearchActive: false,
+                    active: false,
+                }));
+            }
+        }
+        // 检查输入框高度，如果超过最大高度则添加滚动条
+        if (editorRef.current) {
+            const editorHeight = editorRef.current.scrollHeight;
+            if (editorHeight > 120) {
+                editorRef.current.style.overflowY = 'auto';
+            }
+            else {
+                editorRef.current.style.overflowY = 'hidden';
+            }
+        }
+        // 检查编辑器内容，处理只有 <br> 标签的情况
+        if (editorRef.current) {
+            const content = editorRef.current.innerHTML;
+            // 如果内容为空或只有 <br> 标签
+            if (content === '' || content === '<br>' || content === '<br/>') {
+                // 清空编辑器内容
+                editorRef.current.innerHTML = '';
+            }
+        }
+    };
+    // 处理键盘事件
+    const handleKeyDown = (e) => {
+        // 如果按下ESC键且提及面板处于活动状态或内联搜索处于活动状态
+        if (e.key === 'Escape' && (mentionState.active || mentionState.inlineSearchActive)) {
+            // 如果在二级菜单，返回一级菜单
+            if (mentionState.level > 0) {
+                setMentionState((prev) => ({
+                    ...prev,
+                    level: 0,
+                    activeIndex: 0,
+                    secondLevelFilter: '',
+                    inlineSearchActive: false,
+                }));
+            }
+            else {
+                // 如果在一级菜单，完全关闭面板
+                setMentionState((prev) => ({
+                    ...prev,
+                    active: false,
+                    inlineSearchActive: false,
+                }));
+            }
+            e.preventDefault();
+            return;
+        }
+        // 添加对 @ 键的监听，支持在任意位置触发菜单
+        if (e.key === types_1.MENTION_KEYWORD && !mentionState.active && !mentionState.inlineSearchActive && editorRef.current) {
+            const cursorPos = getCursorPosition(editorRef.current);
+            // 立即设置菜单状态，不等待 handleInput
+            setMentionState({
+                active: true,
+                startPos: cursorPos + 1, // +1 因为 @ 还没有被插入
+                filter: mentionKeyword,
+                position: { top: 0, left: 0 }, // 固定位置
+                activeIndex: 0,
+                level: 0,
+                parentType: null,
+                secondLevelFilter: '',
+                inlineSearchActive: false,
+                inlineSearchStartPos: null,
+                loading: false,
+            });
+            // 不要阻止默认行为，让 @ 正常输入到编辑器中
+        }
+        // 添加对 Enter 键的处理，只有在按下 Shift+Enter 时才允许换行
+        if (e.key === 'Enter') {
+            // 检查是否是输入法的回车键
+            // isComposing 属性表示是否正在进行输入法组合输入
+            if (e.nativeEvent.isComposing) {
+                return; // 如果是输入法组合输入过程中的回车，不做任何处理
+            }
+            if (!e.shiftKey) {
+                e.preventDefault();
+                if (!mentionState.active) {
+                    handleSend();
+                    return;
+                }
+            }
+        }
+        // 处理上下方向键导航历史记录
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            // 只有在非提及面板激活状态下才处理历史导航
+            if (!mentionState.active && !mentionState.inlineSearchActive && editorRef.current) {
+                e.preventDefault();
+                // 如果是第一次按上下键，保存当前输入
+                if (!isNavigatingHistory) {
+                    setCurrentInput(editorRef.current.innerHTML);
+                    setIsNavigatingHistory(true);
+                }
+                // 计算新的历史索引
+                let newIndex = historyIndex;
+                if (e.key === 'ArrowUp') {
+                    // 向上导航到较早的历史记录
+                    newIndex = Math.min(history.length - 1, historyIndex + 1);
+                }
+                else {
+                    // 向下导航到较新的历史记录
+                    newIndex = Math.max(-1, historyIndex - 1);
+                }
+                setHistoryIndex(newIndex);
+                // 更新编辑器内容
+                if (newIndex === -1) {
+                    // 恢复到当前输入
+                    editorRef.current.innerHTML = currentInput;
+                }
+                else {
+                    // 显示历史记录
+                    editorRef.current.innerHTML = history[history.length - 1 - newIndex];
+                }
+                // 将光标移到末尾
+                const range = document.createRange();
+                range.selectNodeContents(editorRef.current);
+                range.collapse(false);
+                const selection = window.getSelection();
+                if (selection) {
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+                return;
+            }
+        }
+        else if (isNavigatingHistory && e.key !== 'ArrowUp' && e.key !== 'ArrowDown') {
+            // 如果用户在浏览历史记录后开始输入，退出历史导航模式
+            setIsNavigatingHistory(false);
+            setHistoryIndex(-1);
+        }
+        // 如果提及面板未激活，不处理其他键盘事件
+        if (!mentionState.active) {
+            return;
+        }
+        // 获取当前过滤后的项目
+        let filteredItems = getCurrentItems();
+        // 一级菜单过滤
+        if (mentionState.level === 0 && mentionState.filter && mentionState.filter.length > 1) {
+            const searchText = mentionState.filter.substring(1).toLowerCase();
+            filteredItems = filteredItems.filter((item) => item.text.toLowerCase().includes(searchText));
+        }
+        // 二级菜单过滤已经在 getCurrentItems 中处理
+        if (filteredItems.length === 0) {
+            return;
+        }
+        if (e.key === 'ArrowDown') {
+            // 向下导航
+            setMentionState((prev) => ({
+                ...prev,
+                activeIndex: (prev.activeIndex + 1) % filteredItems.length,
+            }));
+            e.preventDefault();
+        }
+        else if (e.key === 'ArrowUp') {
+            // 向上导航
+            setMentionState((prev) => ({
+                ...prev,
+                activeIndex: (prev.activeIndex - 1 + filteredItems.length) % filteredItems.length,
+            }));
+            e.preventDefault();
+        }
+        else if (e.key === 'Enter' || e.key === 'Tab') {
+            // 确认选择
+            if (filteredItems.length > 0) {
+                handleSelectItem(filteredItems[mentionState.activeIndex]);
+                e.preventDefault();
+            }
+        }
+        // 处理 Backspace 键，检查是否需要清空编辑器
+        if (e.key === 'Backspace' && editorRef.current) {
+            const content = editorRef.current.innerHTML;
+            if (content === '<br>' || content === '<br/>') {
+                editorRef.current.innerHTML = '';
+            }
+        }
+    };
+    // 添加对输入法事件的处理
+    const handleCompositionEnd = () => {
+        // 输入法输入完成后的处理
+        // 这里可以添加额外的逻辑，如果需要的话
+    };
+    // 初始化编辑器
+    React.useEffect(() => {
+        if (editorRef.current) {
+            // 设置初始占位符
+            if (placeholder && !editorRef.current.textContent) {
+                editorRef.current.setAttribute('data-placeholder', placeholder);
+            }
+        }
+    }, [placeholder]);
+    // 处理点击事件
+    const handleDocumentClick = (e) => {
+        var _a;
+        if (mentionState.active && !((_a = document.querySelector(`.${mention_input_module_less_1.default.mention_panel}`)) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            setMentionState((prev) => ({
+                ...prev,
+                active: false,
+                inlineSearchActive: false,
+            }));
+        }
+    };
+    // 添加和移除全局点击事件监听器
+    React.useEffect(() => {
+        document.addEventListener('click', handleDocumentClick, true);
+        return () => {
+            document.removeEventListener('click', handleDocumentClick, true);
+        };
+    }, [mentionState.active]);
+    // 选择提及项目
+    const handleSelectItem = (item, isTriggerByClick = false) => {
+        var _a;
+        if (!editorRef.current) {
+            return;
+        }
+        // 如果项目有子菜单，进入二级菜单
+        if (item.getItems) {
+            const selection = window.getSelection();
+            if (!selection || !selection.rangeCount) {
+                return;
+            }
+            // 如果是从一级菜单选择了带子菜单的项目
+            if (mentionState.level === 0 && mentionState.startPos !== null) {
+                // 更安全地处理文本替换
+                let textNode;
+                let startOffset;
+                let endOffset;
+                // 找到包含 @ 符号的文本节点
+                const walker = document.createTreeWalker(editorRef.current, NodeFilter.SHOW_TEXT);
+                let charCount = 0;
+                let node;
+                while ((node = walker.nextNode())) {
+                    const nodeLength = ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.length) || 0;
+                    // 检查 @ 符号是否在这个节点中
+                    if (mentionState.startPos - 1 >= charCount && mentionState.startPos - 1 < charCount + nodeLength) {
+                        textNode = node;
+                        startOffset = mentionState.startPos - 1 - charCount;
+                        // 确保不会超出节点范围
+                        const cursorPos = isTriggerByClick
+                            ? mentionState.startPos + mentionState.filter.length - 1
+                            : getCursorPosition(editorRef.current);
+                        endOffset = Math.min(cursorPos - charCount, nodeLength);
+                        break;
+                    }
+                    charCount += nodeLength;
+                }
+                if (textNode) {
+                    // 创建一个新的范围来替换文本
+                    const tempRange = document.createRange();
+                    tempRange.setStart(textNode, startOffset);
+                    tempRange.setEnd(textNode, endOffset);
+                    // 替换为 @type:
+                    tempRange.deleteContents();
+                    const typePrefix = document.createTextNode(`${mentionKeyword}${item.type}:`);
+                    tempRange.insertNode(typePrefix);
+                    // 将光标移到 @type: 后面
+                    const newRange = document.createRange();
+                    newRange.setStartAfter(typePrefix);
+                    newRange.setEndAfter(typePrefix);
+                    selection.removeAllRanges();
+                    selection.addRange(newRange);
+                    // 激活内联搜索模式
+                    setMentionState((prev) => ({
+                        ...prev,
+                        active: true,
+                        level: 1,
+                        parentType: item.id,
+                        inlineSearchActive: true,
+                        inlineSearchStartPos: getCursorPosition(editorRef.current),
+                        secondLevelFilter: '',
+                        activeIndex: 0,
+                    }));
+                    editorRef.current.focus();
+                    return;
+                }
+            }
+            return;
+        }
+        const selection = window.getSelection();
+        if (!selection || !selection.rangeCount) {
+            return;
+        }
+        // 如果是在内联搜索模式下选择项目
+        if (mentionState.inlineSearchActive && mentionState.parentType && mentionState.inlineSearchStartPos !== null) {
+            // 找到 @type: 的位置
+            const parentItem = mentionItems.find((i) => i.id === mentionState.parentType);
+            if (!parentItem) {
+                return;
+            }
+            const typePrefix = `${mentionKeyword}${parentItem.type}:`;
+            const prefixPos = mentionState.inlineSearchStartPos - typePrefix.length;
+            if (prefixPos >= 0) {
+                // 创建一个带样式的提及标签
+                const mentionTag = document.createElement('span');
+                mentionTag.className = mention_input_module_less_1.default.mention_tag;
+                mentionTag.dataset.id = item.id;
+                mentionTag.dataset.type = item.type;
+                mentionTag.dataset.contextId = item.contextId || '';
+                mentionTag.contentEditable = 'false';
+                // 为 file 和 folder 类型添加图标
+                if (item.type === 'file' || item.type === 'folder') {
+                    // 创建图标容器
+                    const iconSpan = document.createElement('span');
+                    iconSpan.className = (0, classnames_1.default)(mention_input_module_less_1.default.mention_icon, item.type === 'file' ? labelService === null || labelService === void 0 ? void 0 : labelService.getIcon(new ide_utils_1.URI(item.text)) : (0, components_1.getIcon)('folder'));
+                    mentionTag.appendChild(iconSpan);
+                }
+                // 创建文本内容容器
+                const textSpan = document.createTextNode(item.text);
+                mentionTag.appendChild(textSpan);
+                // 创建一个范围从 @type: 开始到当前光标
+                const tempRange = document.createRange();
+                // 定位到 @type: 的位置
+                let charIndex = 0;
+                let foundStart = false;
+                const textNodes = [];
+                function findPosition(node) {
+                    if (node.nodeType === 3) {
+                        // 文本节点
+                        textNodes.push({
+                            node,
+                            start: charIndex,
+                            end: charIndex + node.textContent.length,
+                        });
+                        charIndex += node.textContent.length;
+                    }
+                    else if (node.nodeType === 1) {
+                        // 元素节点
+                        const children = node.childNodes || [];
+                        for (const child of Array.from(children)) {
+                            findPosition(child);
+                        }
+                    }
+                }
+                findPosition(editorRef.current);
+                for (const textNode of textNodes) {
+                    if (prefixPos >= textNode.start && prefixPos <= textNode.end) {
+                        const startOffset = prefixPos - textNode.start;
+                        tempRange.setStart(textNode.node, startOffset);
+                        foundStart = true;
+                    }
+                    if (foundStart) {
+                        // 如果是点击触发，使用过滤文本的长度来确定结束位置
+                        const cursorPos = isTriggerByClick
+                            ? prefixPos + typePrefix.length + mentionState.secondLevelFilter.length
+                            : getCursorPosition(editorRef.current);
+                        if (cursorPos >= textNode.start && cursorPos <= textNode.end) {
+                            const endOffset = cursorPos - textNode.start;
+                            tempRange.setEnd(textNode.node, endOffset);
+                            break;
+                        }
+                    }
+                }
+                if (foundStart) {
+                    tempRange.deleteContents();
+                    tempRange.insertNode(mentionTag);
+                    // 将光标移到提及标签后面
+                    const newRange = document.createRange();
+                    newRange.setStartAfter(mentionTag);
+                    newRange.setEndAfter(mentionTag);
+                    selection.removeAllRanges();
+                    selection.addRange(newRange);
+                    // 添加一个空格，增加间隔
+                    const spaceNode = document.createTextNode('\u00A0'); // 使用不间断空格
+                    newRange.insertNode(spaceNode);
+                    newRange.setStartAfter(spaceNode);
+                    newRange.setEndAfter(spaceNode);
+                    selection.removeAllRanges();
+                    selection.addRange(newRange);
+                }
+                setMentionState((prev) => ({
+                    ...prev,
+                    active: false,
+                    inlineSearchActive: false,
+                }));
+                editorRef.current.focus();
+                return;
+            }
+        }
+        // 原有的处理逻辑（用于非内联搜索情况）
+        // 创建一个带样式的提及标签
+        const mentionTag = document.createElement('span');
+        mentionTag.className = mention_input_module_less_1.default.mention_tag;
+        mentionTag.dataset.id = item.id;
+        mentionTag.dataset.type = item.type;
+        mentionTag.dataset.contextId = item.contextId || '';
+        mentionTag.contentEditable = 'false';
+        // 为 file 和 folder 类型添加图标
+        if (item.type === 'file' || item.type === 'folder') {
+            // 创建图标容器
+            const iconSpan = document.createElement('span');
+            iconSpan.className = (0, classnames_1.default)(mention_input_module_less_1.default.mention_icon, item.type === 'file' ? labelService === null || labelService === void 0 ? void 0 : labelService.getIcon(new ide_utils_1.URI(item.text)) : (0, components_1.getIcon)('folder'));
+            mentionTag.appendChild(iconSpan);
+        }
+        // 创建文本内容容器
+        const textSpan = document.createTextNode(item.text);
+        mentionTag.appendChild(textSpan);
+        // 定位到 @ 符号的位置
+        let charIndex = 0;
+        let foundStart = false;
+        const textNodes = [];
+        function findPosition(node) {
+            if (node.nodeType === 3) {
+                // 文本节点
+                textNodes.push({
+                    node,
+                    start: charIndex,
+                    end: charIndex + node.textContent.length,
+                });
+                charIndex += node.textContent.length;
+            }
+            else if (node.nodeType === 1) {
+                // 元素节点
+                const children = node.childNodes;
+                for (const child of Array.from(children)) {
+                    findPosition(child);
+                }
+            }
+        }
+        findPosition(editorRef.current);
+        const tempRange = document.createRange();
+        if (mentionState.startPos !== null) {
+            for (const textNode of textNodes) {
+                if (mentionState.startPos - 1 >= textNode.start && mentionState.startPos - 1 <= textNode.end) {
+                    const startOffset = mentionState.startPos - 1 - textNode.start;
+                    tempRange.setStart(textNode.node, startOffset);
+                    foundStart = true;
+                }
+                if (foundStart) {
+                    // 如果是点击触发，使用过滤文本的长度来确定结束位置
+                    const cursorPos = isTriggerByClick
+                        ? mentionState.startPos + mentionState.filter.length - 1
+                        : getCursorPosition(editorRef.current);
+                    if (cursorPos >= textNode.start && cursorPos <= textNode.end) {
+                        const endOffset = cursorPos - textNode.start;
+                        tempRange.setEnd(textNode.node, endOffset);
+                        break;
+                    }
+                }
+            }
+        }
+        if (foundStart) {
+            tempRange.deleteContents();
+            tempRange.insertNode(mentionTag);
+            // 将光标移到提及标签后面
+            const newRange = document.createRange();
+            newRange.setStartAfter(mentionTag);
+            newRange.setEndAfter(mentionTag);
+            selection.removeAllRanges();
+            selection.addRange(newRange);
+            // 添加一个空格，增加间隔
+            const spaceNode = document.createTextNode('\u00A0'); // 使用不间断空格
+            newRange.insertNode(spaceNode);
+            newRange.setStartAfter(spaceNode);
+            newRange.setEndAfter(spaceNode);
+            selection.removeAllRanges();
+            selection.addRange(newRange);
+        }
+        setMentionState((prev) => ({ ...prev, active: false }));
+        editorRef.current.focus();
+    };
+    // 处理模型选择变更
+    const handleModelChange = React.useCallback((value) => {
+        setSelectedModel(value);
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(value);
+    }, [selectedModel, onSelectionChange]);
+    // 修改 handleSend 函数
+    const handleSend = () => {
+        if (!editorRef.current) {
+            return;
+        }
+        // 获取原始HTML内容
+        const rawContent = editorRef.current.innerHTML;
+        if (!rawContent) {
+            return;
+        }
+        // 创建一个临时元素来处理内容
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = rawContent;
+        // 查找所有提及标签并替换为对应的contextId
+        const mentionTags = tempDiv.querySelectorAll(`.${mention_input_module_less_1.default.mention_tag}`);
+        mentionTags.forEach((tag) => {
+            var _a;
+            const contextId = tag.getAttribute('data-context-id');
+            if (contextId) {
+                // 替换为contextId
+                const replacement = document.createTextNode(`{{${mentionKeyword}${tag.getAttribute('data-type')}:${contextId}}}`);
+                // 替换内容
+                (_a = tag.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(replacement, tag);
+            }
+        });
+        // 获取处理后的内容
+        let processedContent = tempDiv.innerHTML;
+        processedContent = processedContent.trim().replaceAll(exports.WHITE_SPACE_TEXT, ' ');
+        // 添加到历史记录
+        if (rawContent) {
+            setHistory((prev) => [...prev, rawContent]);
+            // 重置历史导航状态
+            setHistoryIndex(-1);
+            setIsNavigatingHistory(false);
+        }
+        if (onSend) {
+            // 传递当前选择的模型和其他配置信息
+            onSend(processedContent, {
+                model: selectedModel,
+                ...footerConfig,
+            });
+        }
+        editorRef.current.innerHTML = '';
+        // 重置编辑器高度和滚动条
+        if (editorRef.current) {
+            editorRef.current.style.overflowY = 'hidden';
+            editorRef.current.style.height = 'auto';
+        }
+    };
+    const handleStop = React.useCallback(() => {
+        if (onStop) {
+            onStop();
+        }
+    }, [onStop]);
+    // 渲染自定义按钮
+    const renderButtons = React.useCallback((position) => (footerConfig.buttons || [])
+        .filter((button) => button.position === position)
+        .map((button) => (React.createElement(components_1.Popover, { key: button.id, overlayClassName: mention_input_module_less_1.default.popover_icon, id: `ai-chat-${button.id}`, position: components_1.PopoverPosition.top, title: button.title },
+        React.createElement(ai_native_1.EnhanceIcon, { className: (0, classnames_1.default)((0, components_1.getIcon)(button.icon), mention_input_module_less_1.default[`${button.id}_logo`]), tabIndex: 0, role: 'button', ariaLabel: button.title, onClick: button.onClick })))), [footerConfig.buttons]);
+    return (React.createElement("div", { className: mention_input_module_less_1.default.input_container },
+        mentionState.active && (React.createElement("div", { className: mention_input_module_less_1.default.mention_panel_container },
+            React.createElement(mention_panel_1.MentionPanel, { items: getCurrentItems(), activeIndex: mentionState.activeIndex, onSelectItem: (item) => handleSelectItem(item, true), position: { top: 0, left: 0 }, filter: mentionState.level === 0 ? mentionState.filter : mentionState.secondLevelFilter, visible: true, level: mentionState.level, loading: mentionState.loading }))),
+        React.createElement("div", { className: mention_input_module_less_1.default.editor_area },
+            React.createElement("div", { ref: editorRef, className: mention_input_module_less_1.default.editor, contentEditable: true, onInput: handleInput, onKeyDown: handleKeyDown, onCompositionEnd: handleCompositionEnd })),
+        React.createElement("div", { className: mention_input_module_less_1.default.footer },
+            React.createElement("div", { className: mention_input_module_less_1.default.left_control },
+                footerConfig.showModelSelector && (React.createElement(components_1.Select, { options: footerConfig.modelOptions || [], value: selectedModel, onChange: handleModelChange, className: mention_input_module_less_1.default.model_selector, size: 'small' })),
+                renderButtons(types_1.FooterButtonPosition.LEFT)),
+            React.createElement("div", { className: mention_input_module_less_1.default.right_control },
+                renderButtons(types_1.FooterButtonPosition.RIGHT),
+                React.createElement(components_1.Popover, { overlayClassName: mention_input_module_less_1.default.popover_icon, id: 'ai-chat-send', position: components_1.PopoverPosition.top, title: !loading ? 'Send' : 'Stop' }, !loading ? (React.createElement(ai_native_1.EnhanceIcon, { wrapperClassName: mention_input_module_less_1.default.send_logo, className: (0, classnames_1.default)((0, components_1.getIcon)('send-outlined'), mention_input_module_less_1.default.send_logo_icon), tabIndex: 0, role: 'button', onClick: handleSend, ariaLabel: 'Send' })) : (React.createElement(ai_native_1.EnhanceIcon, { wrapperClassName: mention_input_module_less_1.default.stop_logo, className: (0, classnames_1.default)((0, components_1.getIcon)('stop'), mention_input_module_less_1.default.stop_logo_icon), tabIndex: 0, role: 'button', ariaLabel: 'Stop', onClick: handleStop })))))));
+};
+exports.MentionInput = MentionInput;
+//# sourceMappingURL=mention-input.js.map