1157 lines
42 KiB
JavaScript
1157 lines
42 KiB
JavaScript
// chatbot/ui/chatbot-model-config-modal.js
|
||
// Chatbot 独立模型配置弹窗 UI（无 Tailwind 依赖版本）
|
||
|
||
(function() {
|
||
'use strict';
|
||
|
||
// 预设模型列表
|
||
const PREDEFINED_MODELS = [
|
||
{ value: 'mistral', label: 'Mistral Large', description: 'Mistral AI 的旗舰模型', defaultModelId: 'mistral-large-latest' },
|
||
{ value: 'deepseek', label: 'DeepSeek', description: 'DeepSeek 对话模型', defaultModelId: 'deepseek-chat' },
|
||
{ value: 'gemini', label: 'Google Gemini', description: 'Google 的多模态模型', defaultModelId: 'gemini-1.5-flash' },
|
||
{ value: 'tongyi', label: '通义千问', description: '阿里云通义千问', defaultModelId: 'qwen-plus' },
|
||
{ value: 'volcano', label: '火山引擎', description: '字节跳动火山引擎', defaultModelId: 'doubao-pro-32k' }
|
||
];
|
||
|
||
/**
|
||
* 创建弹窗HTML
|
||
*/
|
||
function createModalHTML() {
|
||
return `
|
||
<div id="chatbot-model-config-modal" class="chatbot-config-modal">
|
||
<!-- 背景遮罩 -->
|
||
<div class="chatbot-config-overlay" id="chatbot-model-config-overlay"></div>
|
||
|
||
<!-- 弹窗内容 -->
|
||
<div class="chatbot-config-wrapper">
|
||
<div class="chatbot-config-content">
|
||
|
||
<!-- 头部 -->
|
||
<div class="chatbot-config-header">
|
||
<div class="chatbot-config-header-left">
|
||
<div class="chatbot-config-icon">
|
||
<i class="fa-solid fa-sliders"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="chatbot-config-title">AI智能助手 - 模型配置</h3>
|
||
<p class="chatbot-config-subtitle">独立于翻译模型的配置</p>
|
||
</div>
|
||
</div>
|
||
<button id="chatbot-model-config-close-btn" class="chatbot-config-close-btn">
|
||
<i class="fa-solid fa-xmark" style="font-size: 20px;"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 内容区域 -->
|
||
<div class="chatbot-config-body">
|
||
|
||
<!-- 模型来源选择 -->
|
||
<div class="chatbot-source-selector chatbot-config-section">
|
||
<label class="chatbot-source-label">
|
||
<i class="fa-solid fa-layer-group"></i>
|
||
模型来源
|
||
</label>
|
||
<div class="chatbot-source-buttons">
|
||
<button id="chatbot-source-predefined-btn" class="chatbot-source-btn active" data-source="predefined">
|
||
<i class="fa-solid fa-boxes-stacked"></i>
|
||
<span>预设模型</span>
|
||
</button>
|
||
<button id="chatbot-source-custom-btn" class="chatbot-source-btn" data-source="custom">
|
||
<i class="fa-solid fa-server"></i>
|
||
<span>自定义源站点</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 预设模型选择区域 -->
|
||
<div id="chatbot-predefined-model-section" class="chatbot-config-section">
|
||
<div class="chatbot-form-group">
|
||
<label class="chatbot-form-label">
|
||
<i class="fa-solid fa-robot"></i>
|
||
选择预设模型
|
||
</label>
|
||
<select id="chatbot-predefined-model-select" class="chatbot-form-select">
|
||
<option value="">-- 请选择模型 --</option>
|
||
</select>
|
||
<div id="chatbot-predefined-model-description" class="chatbot-form-description chatbot-hidden">
|
||
<!-- 模型描述将动态插入 -->
|
||
</div>
|
||
|
||
<!-- 预设模型信息显示 -->
|
||
<div id="chatbot-predefined-model-info" class="chatbot-source-info chatbot-hidden">
|
||
<div class="chatbot-source-info-item">
|
||
<i class="fa-solid fa-link"></i>
|
||
<span class="chatbot-source-info-label">API端点:</span>
|
||
<span id="chatbot-predefined-endpoint" class="chatbot-source-info-value"></span>
|
||
</div>
|
||
<div class="chatbot-source-info-item">
|
||
<i class="fa-solid fa-cog"></i>
|
||
<span class="chatbot-source-info-label">请求格式:</span>
|
||
<span id="chatbot-predefined-format" class="chatbot-source-info-value">OpenAI</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 获取模型列表按钮 -->
|
||
<button id="chatbot-fetch-predefined-models-btn" class="chatbot-fetch-models-btn chatbot-hidden" type="button">
|
||
<i class="fa-solid fa-rotate"></i>
|
||
<span>获取可用模型列表</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 自定义源站点选择区域 -->
|
||
<div id="chatbot-custom-source-section" class="chatbot-config-section chatbot-hidden">
|
||
<div class="chatbot-form-group">
|
||
<label class="chatbot-form-label">
|
||
<i class="fa-solid fa-server"></i>
|
||
选择源站点
|
||
</label>
|
||
<select id="chatbot-custom-source-select" class="chatbot-form-select">
|
||
<option value="">-- 请选择源站点 --</option>
|
||
</select>
|
||
|
||
<!-- 无源站点提示 -->
|
||
<div id="chatbot-no-custom-source-hint" class="chatbot-hint-box chatbot-hidden">
|
||
<div style="display: flex; align-items: flex-start; gap: 12px;">
|
||
<i class="fa-solid fa-circle-info" style="color: #3b82f6; font-size: 20px; margin-top: 2px;"></i>
|
||
<div style="flex: 1;">
|
||
<div style="font-weight: 600; margin-bottom: 6px; color: #1e293b;">未找到自定义源站点</div>
|
||
<div style="font-size: 14px; color: #475569; line-height: 1.6; margin-bottom: 10px;">
|
||
请先在【全局设置】→【自定义源站管理】中添加您的自定义源站点，然后即可在此选择使用。
|
||
</div>
|
||
<button id="chatbot-open-global-settings-btn" class="chatbot-hint-button" type="button">
|
||
<i class="fa-solid fa-gear"></i>
|
||
<span>打开全局设置</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 源站点信息 -->
|
||
<div id="chatbot-custom-source-info" class="chatbot-source-info chatbot-hidden">
|
||
<div class="chatbot-source-info-item">
|
||
<i class="fa-solid fa-link"></i>
|
||
<span class="chatbot-source-info-label">API端点:</span>
|
||
<span id="chatbot-source-endpoint" class="chatbot-source-info-value"></span>
|
||
</div>
|
||
<div class="chatbot-source-info-item">
|
||
<i class="fa-solid fa-cog"></i>
|
||
<span class="chatbot-source-info-label">请求格式:</span>
|
||
<span id="chatbot-source-format" class="chatbot-source-info-value"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模型ID选择 (支持搜索) -->
|
||
<div id="chatbot-model-id-section" class="chatbot-config-section">
|
||
<div class="chatbot-form-group">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
|
||
<label class="chatbot-form-label" style="margin-bottom: 0;">
|
||
<i class="fa-solid fa-microchip"></i>
|
||
模型ID
|
||
<span style="font-size: 12px; color: #64748b; font-weight: normal;">(可搜索)</span>
|
||
</label>
|
||
<button id="chatbot-refresh-models-btn" class="chatbot-refresh-btn chatbot-hidden" type="button" title="刷新模型列表">
|
||
<i class="fa-solid fa-rotate"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 搜索框 -->
|
||
<div class="chatbot-search-wrapper">
|
||
<input
|
||
type="text"
|
||
id="chatbot-model-id-search"
|
||
placeholder="搜索或输入模型ID..."
|
||
class="chatbot-form-input chatbot-search-input"
|
||
/>
|
||
<i class="fa-solid fa-magnifying-glass chatbot-search-icon"></i>
|
||
</div>
|
||
|
||
<!-- 可用模型列表 -->
|
||
<div id="chatbot-available-models-list" class="chatbot-model-list chatbot-hidden">
|
||
<!-- 模型列表将动态生成 -->
|
||
</div>
|
||
|
||
<!-- 或者手动输入 -->
|
||
<div class="chatbot-text-center" style="margin-top: 12px; font-size: 14px; color: #64748b;">
|
||
<span>或直接输入自定义模型ID</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 参数配置区域 -->
|
||
<div class="chatbot-params-section chatbot-config-section">
|
||
<h4 class="chatbot-params-title">
|
||
<i class="fa-solid fa-sliders"></i>
|
||
高级参数
|
||
</h4>
|
||
|
||
<!-- 温度 -->
|
||
<div class="chatbot-slider-group">
|
||
<div class="chatbot-slider-header">
|
||
<label class="chatbot-slider-label">温度 (Temperature)</label>
|
||
<span id="chatbot-temperature-value" class="chatbot-slider-value">0.5</span>
|
||
</div>
|
||
<input
|
||
type="range"
|
||
id="chatbot-temperature-slider"
|
||
min="0"
|
||
max="1"
|
||
step="0.01"
|
||
value="0.5"
|
||
class="chatbot-slider"
|
||
/>
|
||
<div class="chatbot-slider-labels">
|
||
<span>精确 (0)</span>
|
||
<span>平衡</span>
|
||
<span>创造 (1)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 最大Token -->
|
||
<div class="chatbot-form-group">
|
||
<label class="chatbot-form-label">最大Token</label>
|
||
<input
|
||
type="number"
|
||
id="chatbot-max-tokens-input"
|
||
min="100"
|
||
max="32000"
|
||
value="8000"
|
||
class="chatbot-form-input"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 并发数 -->
|
||
<div class="chatbot-form-group">
|
||
<label class="chatbot-form-label">并发上限</label>
|
||
<input
|
||
type="number"
|
||
id="chatbot-concurrency-input"
|
||
min="1"
|
||
max="50"
|
||
value="10"
|
||
class="chatbot-form-input"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 底部按钮 -->
|
||
<div class="chatbot-config-footer">
|
||
<button id="chatbot-model-config-cancel-btn" class="chatbot-btn chatbot-btn-cancel">
|
||
取消
|
||
</button>
|
||
<button id="chatbot-model-config-save-btn" class="chatbot-btn chatbot-btn-save">
|
||
<i class="fa-solid fa-save"></i>
|
||
保存配置
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
/**
|
||
* 初始化弹窗
|
||
*/
|
||
function initModal() {
|
||
// 检查是否已经存在弹窗
|
||
let modal = document.getElementById('chatbot-model-config-modal');
|
||
if (modal) {
|
||
console.log('[ChatbotModelConfigModal] 弹窗已存在，移除旧的');
|
||
modal.remove();
|
||
}
|
||
|
||
// 创建新弹窗
|
||
const modalHTML = createModalHTML();
|
||
document.body.insertAdjacentHTML('beforeend', modalHTML);
|
||
|
||
// 获取元素引用
|
||
modal = document.getElementById('chatbot-model-config-modal');
|
||
const overlay = document.getElementById('chatbot-model-config-overlay');
|
||
const closeBtn = document.getElementById('chatbot-model-config-close-btn');
|
||
const cancelBtn = document.getElementById('chatbot-model-config-cancel-btn');
|
||
const saveBtn = document.getElementById('chatbot-model-config-save-btn');
|
||
|
||
// 绑定关闭事件
|
||
const closeModal = () => {
|
||
modal.classList.remove('active');
|
||
};
|
||
|
||
closeBtn.addEventListener('click', closeModal);
|
||
cancelBtn.addEventListener('click', closeModal);
|
||
overlay.addEventListener('click', closeModal);
|
||
|
||
// 初始化预设模型列表
|
||
populatePredefinedModels();
|
||
|
||
// 初始化源类型切换
|
||
initSourceTypeSwitch();
|
||
|
||
// 初始化模型ID搜索
|
||
initModelIdSearch();
|
||
|
||
// 初始化参数控制
|
||
initParameterControls();
|
||
|
||
// 初始化保存按钮
|
||
saveBtn.addEventListener('click', saveConfig);
|
||
|
||
// 初始化刷新按钮
|
||
const refreshBtn = document.getElementById('chatbot-refresh-models-btn');
|
||
if (refreshBtn) {
|
||
refreshBtn.addEventListener('click', () => {
|
||
const sourceBtn = document.querySelector('.chatbot-source-btn.active');
|
||
const sourceType = sourceBtn ? sourceBtn.dataset.source : 'predefined';
|
||
|
||
if (sourceType === 'predefined') {
|
||
// 刷新预设模型列表
|
||
const modelSelect = document.getElementById('chatbot-predefined-model-select');
|
||
const selectedModel = modelSelect ? modelSelect.value : '';
|
||
if (selectedModel && ['mistral', 'deepseek', 'gemini', 'tongyi'].includes(selectedModel)) {
|
||
fetchPredefinedModels(selectedModel);
|
||
}
|
||
} else {
|
||
// 刷新自定义源站点模型列表
|
||
const sourceSelect = document.getElementById('chatbot-custom-source-select');
|
||
const selectedOption = sourceSelect ? sourceSelect.options[sourceSelect.selectedIndex] : null;
|
||
if (selectedOption && selectedOption.dataset && selectedOption.dataset.site) {
|
||
try {
|
||
const site = JSON.parse(selectedOption.dataset.site);
|
||
loadAvailableModels(site);
|
||
} catch (error) {
|
||
console.error('[ChatbotModelConfigModal] 刷新模型列表失败:', error);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 检查是否有全局设置弹窗
|
||
const modelKeyManagerModal = document.getElementById('modelKeyManagerModal');
|
||
const hasGlobalSettings = !!modelKeyManagerModal;
|
||
|
||
// 通用函数：打开全局设置弹窗
|
||
const openGlobalSettings = () => {
|
||
// 关闭当前弹窗
|
||
modal.classList.remove('active');
|
||
|
||
// 打开 index.html 的模型与Key管理弹窗
|
||
if (modelKeyManagerModal) {
|
||
modelKeyManagerModal.classList.remove('hidden');
|
||
} else {
|
||
console.warn('[ChatbotModelConfigModal] modelKeyManagerModal 元素未找到，可能在详情页面');
|
||
alert('请返回主页面进行设置配置');
|
||
}
|
||
};
|
||
|
||
// 初始化"打开全局设置"按钮（自定义源站点的）
|
||
const openSettingsBtn = document.getElementById('chatbot-open-global-settings-btn');
|
||
if (openSettingsBtn) {
|
||
if (hasGlobalSettings) {
|
||
openSettingsBtn.addEventListener('click', openGlobalSettings);
|
||
} else {
|
||
// 如果没有全局设置弹窗，隐藏提示中的按钮
|
||
openSettingsBtn.style.display = 'none';
|
||
// 修改提示文字
|
||
const hintBox = document.getElementById('chatbot-no-custom-source-hint');
|
||
if (hintBox) {
|
||
const hintText = hintBox.querySelector('div[style*="font-size: 14px"]');
|
||
if (hintText) {
|
||
hintText.textContent = '请在主页面的【全局设置】→【自定义源站管理】中添加您的自定义源站点，然后即可在此选择使用。';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
console.log('[ChatbotModelConfigModal] 弹窗初始化完成');
|
||
}
|
||
|
||
/**
|
||
* 填充预设模型列表
|
||
*/
|
||
function populatePredefinedModels() {
|
||
const select = document.getElementById('chatbot-predefined-model-select');
|
||
const fetchBtn = document.getElementById('chatbot-fetch-predefined-models-btn');
|
||
if (!select) return;
|
||
|
||
// 清空现有选项（保留第一个占位符）
|
||
select.innerHTML = '<option value="">-- 请选择模型 --</option>';
|
||
|
||
// 添加预设模型（始终显示所有模型，不管是否配置了API密钥）
|
||
PREDEFINED_MODELS.forEach(model => {
|
||
const option = document.createElement('option');
|
||
option.value = model.value;
|
||
option.textContent = model.label;
|
||
option.dataset.description = model.description;
|
||
select.appendChild(option);
|
||
});
|
||
|
||
// 监听选择变化
|
||
select.addEventListener('change', (e) => {
|
||
if (!e.target || !e.target.options) {
|
||
console.warn('[ChatbotModelConfigModal] select change: e.target.options 不可用');
|
||
return;
|
||
}
|
||
|
||
const selectedIndex = e.target.selectedIndex;
|
||
if (selectedIndex < 0 || selectedIndex >= e.target.options.length) {
|
||
const descEl = document.getElementById('chatbot-predefined-model-description');
|
||
if (descEl) descEl.classList.add('chatbot-hidden');
|
||
hidePredefinedModelInfo();
|
||
if (fetchBtn) fetchBtn.classList.add('chatbot-hidden');
|
||
return;
|
||
}
|
||
|
||
const selectedOption = e.target.options[selectedIndex];
|
||
const description = selectedOption && selectedOption.dataset ? selectedOption.dataset.description : null;
|
||
const descEl = document.getElementById('chatbot-predefined-model-description');
|
||
const modelValue = e.target.value;
|
||
|
||
if (description && modelValue) {
|
||
// 检查该模型是否配置了API密钥
|
||
let hasApiKey = false;
|
||
if (typeof loadModelKeys === 'function') {
|
||
const keys = loadModelKeys(modelValue);
|
||
if (keys && Array.isArray(keys) && keys.length > 0) {
|
||
const usableKeys = keys.filter(k => k.status === 'valid' || k.status === 'untested');
|
||
hasApiKey = usableKeys.length > 0;
|
||
}
|
||
}
|
||
|
||
// 如果没有配置API密钥，提示用户
|
||
if (!hasApiKey) {
|
||
const modelLabel = PREDEFINED_MODELS.find(m => m.value === modelValue)?.label || modelValue;
|
||
alert(`尚未配置 ${modelLabel} 的API密钥\n\n请到主页面的【全局设置】→【翻译模型设置】中配置 ${modelLabel} 的API密钥，配置完成后刷新本页面即可使用。`);
|
||
// 重置选择
|
||
e.target.selectedIndex = 0;
|
||
if (descEl) descEl.classList.add('chatbot-hidden');
|
||
hidePredefinedModelInfo();
|
||
if (fetchBtn) fetchBtn.classList.add('chatbot-hidden');
|
||
return;
|
||
}
|
||
|
||
if (descEl) {
|
||
descEl.textContent = description;
|
||
descEl.classList.remove('chatbot-hidden');
|
||
}
|
||
|
||
// 显示预设模型端点信息
|
||
displayPredefinedModelInfo(modelValue);
|
||
|
||
// 显示"获取模型列表"按钮（仅支持的模型）
|
||
if (fetchBtn && ['mistral', 'deepseek', 'gemini', 'tongyi'].includes(modelValue)) {
|
||
fetchBtn.classList.remove('chatbot-hidden');
|
||
} else if (fetchBtn) {
|
||
fetchBtn.classList.add('chatbot-hidden');
|
||
}
|
||
} else {
|
||
if (descEl) descEl.classList.add('chatbot-hidden');
|
||
hidePredefinedModelInfo();
|
||
if (fetchBtn) {
|
||
fetchBtn.classList.add('chatbot-hidden');
|
||
}
|
||
}
|
||
|
||
// 清空模型列表（统一使用 chatbot-available-models-list）
|
||
const listDiv = document.getElementById('chatbot-available-models-list');
|
||
if (listDiv) {
|
||
listDiv.innerHTML = '';
|
||
listDiv.classList.add('chatbot-hidden');
|
||
}
|
||
|
||
// 清空模型ID搜索框
|
||
const searchInput = document.getElementById('chatbot-model-id-search');
|
||
if (searchInput) {
|
||
searchInput.value = '';
|
||
}
|
||
|
||
// 隐藏刷新按钮
|
||
const refreshBtn = document.getElementById('chatbot-refresh-models-btn');
|
||
if (refreshBtn) {
|
||
refreshBtn.classList.add('chatbot-hidden');
|
||
}
|
||
});
|
||
|
||
// 绑定"获取模型列表"按钮事件
|
||
if (fetchBtn) {
|
||
fetchBtn.addEventListener('click', () => {
|
||
const selectedModel = select.value;
|
||
if (selectedModel) {
|
||
fetchPredefinedModels(selectedModel);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 初始化源类型切换
|
||
*/
|
||
function initSourceTypeSwitch() {
|
||
const predefinedBtn = document.getElementById('chatbot-source-predefined-btn');
|
||
const customBtn = document.getElementById('chatbot-source-custom-btn');
|
||
const predefinedSection = document.getElementById('chatbot-predefined-model-section');
|
||
const customSection = document.getElementById('chatbot-custom-source-section');
|
||
|
||
const switchToSource = (sourceType) => {
|
||
// 更新按钮样式
|
||
if (sourceType === 'predefined') {
|
||
predefinedBtn.classList.add('active');
|
||
customBtn.classList.remove('active');
|
||
|
||
// 显示/隐藏相应区域
|
||
predefinedSection.classList.remove('chatbot-hidden');
|
||
customSection.classList.add('chatbot-hidden');
|
||
} else {
|
||
customBtn.classList.add('active');
|
||
predefinedBtn.classList.remove('active');
|
||
|
||
// 显示/隐藏相应区域
|
||
predefinedSection.classList.add('chatbot-hidden');
|
||
customSection.classList.remove('chatbot-hidden');
|
||
|
||
// 加载自定义源站点列表
|
||
loadCustomSourceSites();
|
||
}
|
||
};
|
||
|
||
predefinedBtn.addEventListener('click', () => switchToSource('predefined'));
|
||
customBtn.addEventListener('click', () => switchToSource('custom'));
|
||
|
||
// 初始化为预设模型
|
||
switchToSource('predefined');
|
||
}
|
||
|
||
/**
|
||
* 加载自定义源站点列表
|
||
*/
|
||
function loadCustomSourceSites() {
|
||
const select = document.getElementById('chatbot-custom-source-select');
|
||
const hintBox = document.getElementById('chatbot-no-custom-source-hint');
|
||
if (!select) return;
|
||
|
||
// 清空现有选项
|
||
select.innerHTML = '<option value="">-- 请选择源站点 --</option>';
|
||
|
||
// 获取所有自定义源站点
|
||
const sites = (typeof loadAllCustomSourceSites === 'function')
|
||
? loadAllCustomSourceSites()
|
||
: {};
|
||
|
||
const siteIds = Object.keys(sites);
|
||
|
||
if (siteIds.length === 0) {
|
||
const option = document.createElement('option');
|
||
option.value = '';
|
||
option.textContent = '无自定义源站点（请先在设置中添加）';
|
||
select.appendChild(option);
|
||
select.disabled = true;
|
||
|
||
// 显示提示框
|
||
if (hintBox) {
|
||
hintBox.classList.remove('chatbot-hidden');
|
||
}
|
||
return;
|
||
}
|
||
|
||
select.disabled = false;
|
||
|
||
// 隐藏提示框（有源站点）
|
||
if (hintBox) {
|
||
hintBox.classList.add('chatbot-hidden');
|
||
}
|
||
|
||
// 添加源站点选项
|
||
siteIds.forEach(id => {
|
||
const site = sites[id];
|
||
const option = document.createElement('option');
|
||
option.value = id;
|
||
option.textContent = site.displayName || `源站点 ${id.substring(0, 8)}...`;
|
||
option.dataset.site = JSON.stringify(site);
|
||
select.appendChild(option);
|
||
});
|
||
|
||
// 监听选择变化（使用once: false确保可以重复绑定）
|
||
select.removeEventListener('change', handleCustomSourceChange);
|
||
select.addEventListener('change', handleCustomSourceChange);
|
||
}
|
||
|
||
/**
|
||
* 处理自定义源站点选择变化
|
||
*/
|
||
function handleCustomSourceChange(e) {
|
||
if (!e.target || !e.target.options) {
|
||
console.warn('[ChatbotModelConfigModal] handleCustomSourceChange: e.target.options 不可用');
|
||
return;
|
||
}
|
||
|
||
const selectedIndex = e.target.selectedIndex;
|
||
if (selectedIndex < 0 || selectedIndex >= e.target.options.length) {
|
||
hideSourceSiteInfo();
|
||
return;
|
||
}
|
||
|
||
const selectedOption = e.target.options[selectedIndex];
|
||
if (selectedOption && selectedOption.dataset && selectedOption.dataset.site) {
|
||
try {
|
||
const site = JSON.parse(selectedOption.dataset.site);
|
||
displaySourceSiteInfo(site);
|
||
loadAvailableModels(site);
|
||
} catch (error) {
|
||
console.error('[ChatbotModelConfigModal] 解析源站点数据失败:', error);
|
||
hideSourceSiteInfo();
|
||
}
|
||
} else {
|
||
hideSourceSiteInfo();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 显示源站点信息
|
||
*/
|
||
function displaySourceSiteInfo(site) {
|
||
const infoDiv = document.getElementById('chatbot-custom-source-info');
|
||
const endpointSpan = document.getElementById('chatbot-source-endpoint');
|
||
const formatSpan = document.getElementById('chatbot-source-format');
|
||
|
||
if (site && infoDiv) {
|
||
endpointSpan.textContent = site.apiEndpoint || site.apiBaseUrl || '未知';
|
||
formatSpan.textContent = site.requestFormat || 'OpenAI';
|
||
infoDiv.classList.remove('chatbot-hidden');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 隐藏源站点信息
|
||
*/
|
||
function hideSourceSiteInfo() {
|
||
const infoDiv = document.getElementById('chatbot-custom-source-info');
|
||
if (infoDiv) {
|
||
infoDiv.classList.add('chatbot-hidden');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 显示预设模型信息
|
||
*/
|
||
function displayPredefinedModelInfo(modelName) {
|
||
const infoDiv = document.getElementById('chatbot-predefined-model-info');
|
||
const endpointSpan = document.getElementById('chatbot-predefined-endpoint');
|
||
|
||
if (!infoDiv || !endpointSpan) return;
|
||
|
||
// 根据模型名称设置端点
|
||
const endpoints = {
|
||
'mistral': 'https://api.mistral.ai/v1',
|
||
'deepseek': 'https://api.deepseek.com/v1',
|
||
'gemini': 'https://generativelanguage.googleapis.com/v1beta',
|
||
'tongyi': 'https://dashscope.aliyuncs.com/compatible-mode/v1',
|
||
'volcano': '火山引擎 API 端点'
|
||
};
|
||
|
||
const endpoint = endpoints[modelName] || '未知';
|
||
endpointSpan.textContent = endpoint;
|
||
infoDiv.classList.remove('chatbot-hidden');
|
||
}
|
||
|
||
/**
|
||
* 隐藏预设模型信息
|
||
*/
|
||
function hidePredefinedModelInfo() {
|
||
const infoDiv = document.getElementById('chatbot-predefined-model-info');
|
||
if (infoDiv) {
|
||
infoDiv.classList.add('chatbot-hidden');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取预设模型的可用模型列表
|
||
*/
|
||
async function fetchPredefinedModels(modelName) {
|
||
const fetchBtn = document.getElementById('chatbot-fetch-predefined-models-btn');
|
||
const listDiv = document.getElementById('chatbot-available-models-list'); // 使用统一的列表区域
|
||
const searchInput = document.getElementById('chatbot-model-id-search');
|
||
const refreshBtn = document.getElementById('chatbot-refresh-models-btn');
|
||
|
||
if (!fetchBtn || !listDiv) return;
|
||
|
||
// 获取对应模型的API Key
|
||
let apiKey = '';
|
||
if (typeof loadModelKeys === 'function') {
|
||
const keys = loadModelKeys(modelName);
|
||
if (keys && Array.isArray(keys)) {
|
||
const usableKeys = keys.filter(k => k.status === 'valid' || k.status === 'untested');
|
||
if (usableKeys.length > 0) {
|
||
apiKey = usableKeys[0].value;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (!apiKey) {
|
||
alert(`请先为 ${modelName} 配置有效的 API Key`);
|
||
return;
|
||
}
|
||
|
||
// 禁用按钮，显示加载状态
|
||
fetchBtn.disabled = true;
|
||
const originalText = fetchBtn.querySelector('span').textContent;
|
||
fetchBtn.querySelector('span').textContent = '获取中...';
|
||
|
||
try {
|
||
let models = [];
|
||
|
||
if (modelName === 'mistral') {
|
||
const resp = await fetch('https://api.mistral.ai/v1/models', {
|
||
headers: { 'Authorization': `Bearer ${apiKey}` }
|
||
});
|
||
if (!resp.ok) throw new Error(`${resp.status} ${resp.statusText}`);
|
||
const data = await resp.json();
|
||
models = Array.isArray(data.data) ? data.data.map(m => m.id).filter(Boolean) : [];
|
||
} else if (modelName === 'deepseek') {
|
||
const resp = await fetch('https://api.deepseek.com/v1/models', {
|
||
headers: { 'Authorization': `Bearer ${apiKey}` }
|
||
});
|
||
if (!resp.ok) throw new Error(`${resp.status} ${resp.statusText}`);
|
||
const data = await resp.json();
|
||
models = Array.isArray(data.data) ? data.data.map(m => m.id).filter(Boolean) : [];
|
||
} else if (modelName === 'gemini') {
|
||
// Gemini API: 使用 Google AI Studio 的 models 端点
|
||
const resp = await fetch(`https://generativelanguage.googleapis.com/v1beta/models?key=${encodeURIComponent(apiKey)}`);
|
||
if (!resp.ok) throw new Error(`${resp.status} ${resp.statusText}`);
|
||
const data = await resp.json();
|
||
const items = Array.isArray(data.models || data.data) ? (data.models || data.data) : [];
|
||
// 从 name 字段提取模型 ID (e.g., "models/gemini-1.5-flash" -> "gemini-1.5-flash")
|
||
models = items.map(m => {
|
||
const id = m.name ? String(m.name).split('/').pop() : (m.id || '');
|
||
return id;
|
||
}).filter(Boolean);
|
||
} else if (modelName === 'tongyi') {
|
||
const resp = await fetch('https://dashscope.aliyuncs.com/compatible-mode/v1/models', {
|
||
headers: { 'Authorization': `Bearer ${apiKey}` }
|
||
});
|
||
if (!resp.ok) throw new Error(`${resp.status} ${resp.statusText}`);
|
||
const data = await resp.json();
|
||
const items = Array.isArray(data.data) ? data.data : (Array.isArray(data.models) ? data.models : (Array.isArray(data?.data?.models) ? data.data.models : []));
|
||
models = items.map(m => m.model || m.id || m.name).filter(Boolean);
|
||
}
|
||
|
||
if (models.length === 0) {
|
||
listDiv.innerHTML = '<div style="padding: 12px; text-align: center; color: #64748b;">未获取到模型列表</div>';
|
||
listDiv.classList.remove('chatbot-hidden');
|
||
if (refreshBtn) {
|
||
refreshBtn.classList.remove('chatbot-hidden');
|
||
}
|
||
return;
|
||
}
|
||
|
||
// 显示模型列表
|
||
loadPredefinedAvailableModels(models, searchInput, listDiv);
|
||
|
||
// 显示刷新按钮
|
||
if (refreshBtn) {
|
||
refreshBtn.classList.remove('chatbot-hidden');
|
||
}
|
||
|
||
// 自动选择第一个模型
|
||
if (searchInput && models.length > 0) {
|
||
searchInput.value = models[0];
|
||
}
|
||
|
||
console.log(`[ChatbotModelConfigModal] 获取到 ${modelName} 的 ${models.length} 个模型`);
|
||
} catch (error) {
|
||
console.error(`[ChatbotModelConfigModal] 获取 ${modelName} 模型列表失败:`, error);
|
||
alert(`获取模型列表失败: ${error.message}`);
|
||
listDiv.innerHTML = '';
|
||
listDiv.classList.add('chatbot-hidden');
|
||
if (refreshBtn) {
|
||
refreshBtn.classList.add('chatbot-hidden');
|
||
}
|
||
} finally {
|
||
fetchBtn.disabled = false;
|
||
fetchBtn.querySelector('span').textContent = originalText;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 加载预设模型的可用模型列表
|
||
*/
|
||
function loadPredefinedAvailableModels(models, searchInput, listDiv) {
|
||
if (!listDiv) return;
|
||
|
||
// 清空列表
|
||
listDiv.innerHTML = '';
|
||
|
||
if (!models || models.length === 0) {
|
||
listDiv.classList.add('chatbot-hidden');
|
||
return;
|
||
}
|
||
|
||
listDiv.classList.remove('chatbot-hidden');
|
||
|
||
// 生成模型列表项
|
||
models.forEach(modelId => {
|
||
const item = document.createElement('div');
|
||
item.className = 'chatbot-model-item';
|
||
item.textContent = modelId;
|
||
item.dataset.modelId = modelId;
|
||
|
||
item.addEventListener('click', () => {
|
||
if (searchInput) {
|
||
searchInput.value = modelId;
|
||
}
|
||
// 高亮选中项
|
||
listDiv.querySelectorAll('.chatbot-model-item').forEach(el => el.classList.remove('selected'));
|
||
item.classList.add('selected');
|
||
});
|
||
|
||
listDiv.appendChild(item);
|
||
});
|
||
|
||
// 搜索功能
|
||
if (searchInput) {
|
||
const handleSearch = (e) => {
|
||
const query = e.target.value.toLowerCase();
|
||
const items = listDiv.querySelectorAll('.chatbot-model-item');
|
||
|
||
let hasVisibleItem = false;
|
||
|
||
items.forEach(item => {
|
||
const modelId = (item.dataset.modelId || '').toLowerCase();
|
||
const modelName = (item.textContent || '').toLowerCase();
|
||
|
||
if (modelId.includes(query) || modelName.includes(query)) {
|
||
item.classList.remove('chatbot-hidden');
|
||
hasVisibleItem = true;
|
||
} else {
|
||
item.classList.add('chatbot-hidden');
|
||
}
|
||
});
|
||
|
||
// 如果有可见项，显示列表；否则隐藏
|
||
if (hasVisibleItem) {
|
||
listDiv.classList.remove('chatbot-hidden');
|
||
} else {
|
||
listDiv.classList.add('chatbot-hidden');
|
||
}
|
||
};
|
||
|
||
// 移除之前的监听器（如果有）
|
||
const newSearchInput = searchInput.cloneNode(true);
|
||
searchInput.parentNode.replaceChild(newSearchInput, searchInput);
|
||
newSearchInput.addEventListener('input', handleSearch);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 加载可用模型列表
|
||
*/
|
||
function loadAvailableModels(site) {
|
||
const listDiv = document.getElementById('chatbot-available-models-list');
|
||
const searchInput = document.getElementById('chatbot-model-id-search');
|
||
const refreshBtn = document.getElementById('chatbot-refresh-models-btn');
|
||
if (!listDiv) return;
|
||
|
||
// 清空现有列表
|
||
listDiv.innerHTML = '';
|
||
|
||
if (!site || !site.availableModels || site.availableModels.length === 0) {
|
||
listDiv.classList.add('chatbot-hidden');
|
||
if (refreshBtn) refreshBtn.classList.add('chatbot-hidden');
|
||
return;
|
||
}
|
||
|
||
listDiv.classList.remove('chatbot-hidden');
|
||
if (refreshBtn) refreshBtn.classList.remove('chatbot-hidden');
|
||
|
||
// 生成模型列表项
|
||
let firstModelId = null;
|
||
site.availableModels.forEach((model, index) => {
|
||
// 处理两种情况：字符串数组或对象数组
|
||
let modelId, modelName;
|
||
if (typeof model === 'string') {
|
||
modelId = model;
|
||
modelName = model;
|
||
} else if (typeof model === 'object' && model !== null) {
|
||
modelId = model.id || model.modelId || model.value || String(model);
|
||
modelName = model.name || model.label || modelId;
|
||
} else {
|
||
return; // 跳过无效项
|
||
}
|
||
|
||
// 记录第一个模型ID
|
||
if (index === 0 || firstModelId === null) {
|
||
firstModelId = modelId;
|
||
}
|
||
|
||
const item = document.createElement('div');
|
||
item.className = 'chatbot-model-item';
|
||
item.textContent = modelName;
|
||
item.dataset.modelId = modelId;
|
||
|
||
item.addEventListener('click', () => {
|
||
if (searchInput) {
|
||
searchInput.value = modelId;
|
||
}
|
||
// 高亮选中项
|
||
listDiv.querySelectorAll('.chatbot-model-item').forEach(d => d.classList.remove('selected'));
|
||
item.classList.add('selected');
|
||
});
|
||
|
||
listDiv.appendChild(item);
|
||
});
|
||
|
||
// 自动选择第一个模型
|
||
if (firstModelId && searchInput) {
|
||
searchInput.value = firstModelId;
|
||
// 高亮第一个项
|
||
const firstItem = listDiv.querySelector('.chatbot-model-item');
|
||
if (firstItem) {
|
||
firstItem.classList.add('selected');
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 初始化模型ID搜索
|
||
*/
|
||
function initModelIdSearch() {
|
||
const searchInput = document.getElementById('chatbot-model-id-search');
|
||
const listDiv = document.getElementById('chatbot-available-models-list');
|
||
|
||
if (!searchInput || !listDiv) return;
|
||
|
||
searchInput.addEventListener('input', (e) => {
|
||
const query = e.target.value.toLowerCase();
|
||
const items = listDiv.querySelectorAll('.chatbot-model-item');
|
||
|
||
let hasVisibleItem = false;
|
||
|
||
items.forEach(item => {
|
||
const modelId = (item.dataset.modelId || '').toLowerCase();
|
||
const modelName = (item.textContent || '').toLowerCase();
|
||
// 搜索模型ID和显示名称
|
||
if (modelId.includes(query) || modelName.includes(query)) {
|
||
item.classList.remove('chatbot-hidden');
|
||
hasVisibleItem = true;
|
||
} else {
|
||
item.classList.add('chatbot-hidden');
|
||
}
|
||
});
|
||
|
||
// 如果有可见项，显示列表；否则隐藏
|
||
if (hasVisibleItem && query) {
|
||
listDiv.classList.remove('chatbot-hidden');
|
||
} else if (!query) {
|
||
// 如果搜索框为空，显示所有项
|
||
items.forEach(item => item.classList.remove('chatbot-hidden'));
|
||
listDiv.classList.remove('chatbot-hidden');
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 初始化参数控制
|
||
*/
|
||
function initParameterControls() {
|
||
// 温度滑块
|
||
const tempSlider = document.getElementById('chatbot-temperature-slider');
|
||
const tempValue = document.getElementById('chatbot-temperature-value');
|
||
|
||
if (tempSlider && tempValue) {
|
||
tempSlider.addEventListener('input', (e) => {
|
||
tempValue.textContent = parseFloat(e.target.value).toFixed(2);
|
||
});
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 保存配置
|
||
*/
|
||
function saveConfig() {
|
||
const sourceBtn = document.querySelector('.chatbot-source-btn.active');
|
||
const sourceType = sourceBtn ? sourceBtn.dataset.source : 'predefined';
|
||
|
||
let config = {
|
||
sourceType: sourceType,
|
||
temperature: parseFloat(document.getElementById('chatbot-temperature-slider').value),
|
||
max_tokens: parseInt(document.getElementById('chatbot-max-tokens-input').value),
|
||
concurrency: parseInt(document.getElementById('chatbot-concurrency-input').value)
|
||
};
|
||
|
||
if (sourceType === 'predefined') {
|
||
const modelSelect = document.getElementById('chatbot-predefined-model-select');
|
||
config.model = modelSelect.value;
|
||
config.customSourceSiteId = null;
|
||
// 预设模型也可以有具体的modelId（如果用户获取了模型列表并选择了）
|
||
const modelIdInput = document.getElementById('chatbot-model-id-search');
|
||
config.selectedModelId = modelIdInput ? modelIdInput.value : '';
|
||
} else {
|
||
const sourceSelect = document.getElementById('chatbot-custom-source-select');
|
||
config.model = 'custom';
|
||
config.customSourceSiteId = sourceSelect.value;
|
||
config.selectedModelId = document.getElementById('chatbot-model-id-search').value;
|
||
}
|
||
|
||
// 验证配置
|
||
if (sourceType === 'predefined' && !config.model) {
|
||
alert('请选择一个预设模型');
|
||
return;
|
||
}
|
||
|
||
if (sourceType === 'custom' && !config.customSourceSiteId) {
|
||
alert('请选择一个自定义源站点');
|
||
return;
|
||
}
|
||
|
||
if (sourceType === 'custom' && !config.selectedModelId) {
|
||
alert('请选择或输入一个模型ID');
|
||
return;
|
||
}
|
||
|
||
// 保存配置
|
||
if (typeof window !== 'undefined' && window.ChatbotConfigManager) {
|
||
const success = window.ChatbotConfigManager.saveChatbotConfig(config);
|
||
if (success) {
|
||
alert('✓ 配置已保存！');
|
||
closeModalAndRefresh();
|
||
} else {
|
||
alert('× 保存配置失败');
|
||
}
|
||
} else {
|
||
console.error('[ChatbotModelConfigModal] ChatbotConfigManager 不可用');
|
||
alert('× 配置管理器不可用');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 关闭弹窗并刷新
|
||
*/
|
||
function closeModalAndRefresh() {
|
||
const modal = document.getElementById('chatbot-model-config-modal');
|
||
if (modal) {
|
||
modal.classList.remove('active');
|
||
}
|
||
|
||
// 触发配置更新事件（如果需要通知其他组件）
|
||
if (typeof window !== 'undefined') {
|
||
window.dispatchEvent(new CustomEvent('chatbot-config-updated'));
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 打开弹窗
|
||
*/
|
||
function openModal() {
|
||
const modal = document.getElementById('chatbot-model-config-modal');
|
||
if (!modal) {
|
||
initModal();
|
||
}
|
||
|
||
// 加载当前配置
|
||
loadCurrentConfig();
|
||
|
||
// 显示弹窗
|
||
const modalEl = document.getElementById('chatbot-model-config-modal');
|
||
if (modalEl) {
|
||
modalEl.classList.add('active');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 加载当前配置到UI
|
||
*/
|
||
function loadCurrentConfig() {
|
||
if (typeof window === 'undefined' || !window.ChatbotConfigManager) {
|
||
console.warn('[ChatbotModelConfigModal] ChatbotConfigManager 不可用');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const config = window.ChatbotConfigManager.getChatbotModelConfig();
|
||
|
||
// 设置源类型
|
||
const sourceType = config.sourceType || 'predefined';
|
||
const predefinedBtn = document.getElementById('chatbot-source-predefined-btn');
|
||
const customBtn = document.getElementById('chatbot-source-custom-btn');
|
||
|
||
if (sourceType === 'predefined') {
|
||
predefinedBtn?.click();
|
||
|
||
// 设置预设模型
|
||
const modelSelect = document.getElementById('chatbot-predefined-model-select');
|
||
if (modelSelect && config.model) {
|
||
modelSelect.value = config.model;
|
||
modelSelect.dispatchEvent(new Event('change'));
|
||
}
|
||
} else {
|
||
customBtn?.click();
|
||
|
||
// 设置自定义源站点
|
||
const sourceSelect = document.getElementById('chatbot-custom-source-select');
|
||
if (sourceSelect && config.customSourceSiteId) {
|
||
sourceSelect.value = config.customSourceSiteId;
|
||
sourceSelect.dispatchEvent(new Event('change'));
|
||
}
|
||
|
||
// 设置模型ID
|
||
const modelIdInput = document.getElementById('chatbot-model-id-search');
|
||
if (modelIdInput && config.selectedModelId) {
|
||
// 确保 selectedModelId 是字符串
|
||
const modelId = typeof config.selectedModelId === 'string'
|
||
? config.selectedModelId
|
||
: (config.selectedModelId.id || config.selectedModelId.modelId || config.selectedModelId.value || '');
|
||
modelIdInput.value = modelId;
|
||
}
|
||
}
|
||
|
||
// 设置参数
|
||
const tempSlider = document.getElementById('chatbot-temperature-slider');
|
||
const tempValue = document.getElementById('chatbot-temperature-value');
|
||
if (tempSlider && config.temperature !== undefined) {
|
||
tempSlider.value = config.temperature;
|
||
if (tempValue) {
|
||
tempValue.textContent = config.temperature.toFixed(2);
|
||
}
|
||
}
|
||
|
||
const maxTokensInput = document.getElementById('chatbot-max-tokens-input');
|
||
if (maxTokensInput && config.max_tokens) {
|
||
maxTokensInput.value = config.max_tokens;
|
||
}
|
||
|
||
const concurrencyInput = document.getElementById('chatbot-concurrency-input');
|
||
if (concurrencyInput && config.concurrency) {
|
||
concurrencyInput.value = config.concurrency;
|
||
}
|
||
|
||
console.log('[ChatbotModelConfigModal] 配置已加载到UI:', config);
|
||
} catch (error) {
|
||
console.error('[ChatbotModelConfigModal] 加载配置失败:', error);
|
||
}
|
||
}
|
||
|
||
// 导出到全局
|
||
if (typeof window !== 'undefined') {
|
||
window.ChatbotModelConfigModal = {
|
||
init: initModal,
|
||
open: openModal,
|
||
close: () => {
|
||
const modal = document.getElementById('chatbot-model-config-modal');
|
||
if (modal) modal.classList.remove('active');
|
||
}
|
||
};
|
||
}
|
||
|
||
// 页面加载时初始化
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', initModal);
|
||
} else {
|
||
initModal();
|
||
}
|
||
|
||
})();
|