diff --git a/src/views/agentModeSelector.ts b/src/views/agentModeSelector.ts new file mode 100644 index 0000000..04a3841 --- /dev/null +++ b/src/views/agentModeSelector.ts @@ -0,0 +1,162 @@ +/** + * 模式选择器组件 + * 提供 Agent/Ask/Auto 三种模式的选择功能 + */ + +/** + * 获取模式选择器的 HTML 内容 + */ +export function getModeSelectorContent(): string { + return ` +
+
+
+ Agent + + + +
+
+
Agent
+
Ask
+
Auto
+
+
+ 切换模式 +
+ `; +} + +/** + * 获取模式选择器的样式 + */ +export function getModeSelectorStyles(): string { + return ` + /* 模式选择器样式 */ + .mode-select { + position: relative; + user-select: none; + } + .mode-trigger { + display: flex; + align-items: center; + gap: 6px; + padding: 4px 8px; + background: var(--vscode-input-background); + color: var(--vscode-foreground); + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 12px; + transition: background 0.2s ease; + } + .mode-trigger:hover { + background: var(--vscode-list-hoverBackground); + } + .mode-value { + white-space: nowrap; + } + .mode-arrow { + width: 12px; + height: 12px; + flex-shrink: 0; + transition: transform 0.2s ease; + } + .mode-select.active .mode-arrow { + transform: rotate(180deg); + } + .mode-dropdown { + position: absolute; + bottom: calc(100% + 2px); + left: 0; + min-width: 100%; + background: var(--vscode-dropdown-background); + border: 1px solid var(--vscode-dropdown-border); + border-radius: 4px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + z-index: 1100; + display: none; + overflow: hidden; + } + .mode-select.active .mode-dropdown { + display: block; + } + /* 模式选择器的选项样式 */ + .mode-option { + padding: 6px 12px; + font-size: 12px; + cursor: pointer; + transition: background 0.2s ease; + white-space: nowrap; + } + .mode-option:hover { + background: rgba(128, 128, 128, 0.3); + } + .mode-option.selected { + background: rgba(128, 128, 128, 0.5); + color: var(--vscode-foreground); + } + `; +} + +/** + * 获取模式选择器的脚本 + */ +export function getModeSelectorScript(): string { + return ` + // 模式选择器相关变量 + let currentMode = 'agent'; + + // 切换模式下拉框显示/隐藏 + function toggleModeDropdown() { + const modeSelect = document.getElementById('modeSelect'); + const modelSelect = document.getElementById('modelSelect'); + if (modeSelect) { + modeSelect.classList.toggle('active'); + // 关闭模型下拉框 + if (modelSelect) { + modelSelect.classList.remove('active'); + } + } + } + + // 选择模式 + function selectMode(value, label) { + currentMode = value; + const modeValue = document.getElementById('modeValue'); + if (modeValue) { + modeValue.textContent = label; + } + + // 更新选中状态 + const options = document.querySelectorAll('.mode-option'); + options.forEach(option => { + if (option.getAttribute('data-value') === value) { + option.classList.add('selected'); + } else { + option.classList.remove('selected'); + } + }); + + // 关闭下拉框 + const modeSelect = document.getElementById('modeSelect'); + if (modeSelect) { + modeSelect.classList.remove('active'); + } + } + + // 获取当前模式 + function getCurrentMode() { + return currentMode; + } + + // 点击外部关闭模式下拉框 + document.addEventListener('click', (event) => { + const modeSelect = document.getElementById('modeSelect'); + + if (modeSelect && !modeSelect.contains(event.target)) { + modeSelect.classList.remove('active'); + } + }); + `; +} diff --git a/src/views/inputArea.ts b/src/views/inputArea.ts index f7646e3..bfa1fc1 100644 --- a/src/views/inputArea.ts +++ b/src/views/inputArea.ts @@ -4,6 +4,11 @@ import { getModelSelectorStyles, getModelSelectorScript } from "./modelSelector"; +import { + getModeSelectorContent, + getModeSelectorStyles, + getModeSelectorScript +} from "./agentModeSelector"; import { getContextButtonContent, getContextButtonStyles, @@ -44,24 +49,7 @@ export function getInputAreaContent(): string { >
- -
-
-
- Agent - - - -
-
-
Agent
-
Ask
-
Auto
-
-
- 切换模式 -
- + ${getModeSelectorContent()} ${getModelSelectorContent()}
@@ -89,6 +77,7 @@ export function getInputAreaContent(): string { */ export function getInputAreaStyles(): string { return ` + ${getModeSelectorStyles()} ${getModelSelectorStyles()} ${getContextButtonStyles()} ${getContextCompressStyles()} @@ -185,70 +174,6 @@ export function getInputAreaStyles(): string { gap: 8px; position: relative; } - /* 自定义下拉框样式（用于模式选择） */ - .custom-select { - position: relative; - user-select: none; - } - .select-trigger { - display: flex; - align-items: center; - gap: 6px; - padding: 4px 8px; - background: var(--vscode-input-background); - color: var(--vscode-foreground); - border: none; - border-radius: 4px; - cursor: pointer; - font-size: 12px; - transition: background 0.2s ease; - } - .select-trigger:hover { - background: var(--vscode-list-hoverBackground); - } - .select-value { - white-space: nowrap; - } - .select-arrow { - width: 12px; - height: 12px; - flex-shrink: 0; - transition: transform 0.2s ease; - } - .custom-select.active .select-arrow { - transform: rotate(180deg); - } - .select-dropdown { - position: absolute; - bottom: calc(100% + 2px); - left: 0; - min-width: 100%; - background: var(--vscode-dropdown-background); - border: 1px solid var(--vscode-dropdown-border); - border-radius: 4px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - z-index: 1100; - display: none; - overflow: hidden; - } - .custom-select.active .select-dropdown { - display: block; - } - /* 模式选择器的选项样式 */ - #selectDropdown .select-option { - padding: 6px 12px; - font-size: 12px; - cursor: pointer; - transition: background 0.2s ease; - white-space: nowrap; - } - #selectDropdown .select-option:hover { - background: rgba(128, 128, 128, 0.3); - } - #selectDropdown .select-option.selected { - background: rgba(128, 128, 128, 0.5); - color: var(--vscode-foreground); - } .input-actions { display: flex; align-items: center; @@ -377,6 +302,7 @@ export function getInputAreaStyles(): string { */ export function getInputAreaScript(): string { return ` + ${getModeSelectorScript()} ${getModelSelectorScript()} ${getContextButtonScript()} ${getContextCompressScript()} @@ -400,61 +326,11 @@ export function getInputAreaScript(): string { messageInput.focus(); } - // 自定义下拉框相关变量 - let currentMode = 'agent'; - - // 切换模式下拉框显示/隐藏 - function toggleModeDropdown() { - const customSelect = document.getElementById('customSelect'); - const modelSelect = document.getElementById('modelSelect'); - if (customSelect) { - customSelect.classList.toggle('active'); - // 关闭模型下拉框 - if (modelSelect) { - modelSelect.classList.remove('active'); - } - } - } - - // 选择模式 - function selectMode(value, label) { - currentMode = value; - const selectValue = document.getElementById('selectValue'); - if (selectValue) { - selectValue.textContent = label; - } - - // 更新选中状态 - const options = document.querySelectorAll('#selectDropdown .select-option'); - options.forEach(option => { - if (option.getAttribute('data-value') === value) { - option.classList.add('selected'); - } else { - option.classList.remove('selected'); - } - }); - - // 关闭下拉框 - const customSelect = document.getElementById('customSelect'); - if (customSelect) { - customSelect.classList.remove('active'); - } - } - - // 点击外部关闭下拉框 - document.addEventListener('click', (event) => { - const customSelect = document.getElementById('customSelect'); - - if (customSelect && !customSelect.contains(event.target)) { - customSelect.classList.remove('active'); - } - }); - function sendMessage() { const text = messageInput.value.trim(); if (!text) return; - const mode = currentMode; + const mode = getCurrentMode(); // 从模式选择器组件获取当前模式 const model = getCurrentModel(); // 从模型选择器组件获取当前模型 addMessage(text, 'user');