{{ modelStatusIcon }}
@@ -21,7 +19,7 @@
type="text"
:loading="state.checkingStatus"
@click.stop="checkCurrentModelStatus"
- :disabled="state.checkingStatus"
+ :disabled="props.disabled || state.checkingStatus"
class="status-check-button"
>
{{ state.checkingStatus ? '检查中...' : '检查' }}
@@ -34,16 +32,15 @@
@@ -91,7 +88,11 @@ const props = defineProps({
size: {
type: String,
default: 'small',
- validator: (value) => ['small', 'middle', 'large'].includes(value)
+ validator: (value) => ['nano', 'small', 'middle', 'large'].includes(value)
+ },
+ disabled: {
+ type: Boolean,
+ default: false
},
displayName: {
type: String,
@@ -151,13 +152,17 @@ const fetchV2Models = async () => {
// 下拉展开时触发实时刷新（仅在打开瞬间触发，关闭时忽略）
const handleOpenChange = (open) => {
+ if (props.disabled) {
+ dropdownOpen.value = false
+ return
+ }
dropdownOpen.value = open
if (open) fetchV2Models()
}
// 强制刷新缓存
const refreshCache = async () => {
- if (state.refreshingCache) return
+ if (props.disabled || state.refreshingCache) return
state.refreshingCache = true
try {
await modelProviderApi.refreshModelCache()
@@ -180,8 +185,10 @@ const state = reactive({
const resolvedSize = computed(() => props.size || 'small')
const modelSelectClasses = computed(() => ({
+ 'model-select--nano': resolvedSize.value === 'nano',
'model-select--middle': resolvedSize.value === 'middle',
- 'model-select--large': resolvedSize.value === 'large'
+ 'model-select--large': resolvedSize.value === 'large',
+ 'model-select--disabled': props.disabled
}))
const buttonSize = computed(() => {
if (resolvedSize.value === 'large') return 'large'
@@ -206,10 +213,11 @@ const displayModelText = computed(() => {
return spec
})
-const displayModelTooltip = computed(() => props.model_spec || props.placeholder)
+const displayModelTitle = computed(() => props.model_spec || props.placeholder)
// 检查当前模型状态
const checkCurrentModelStatus = async () => {
+ if (props.disabled) return
const spec = props.model_spec
if (!spec) return
@@ -238,7 +246,7 @@ const modelStatusIcon = computed(() => {
return '○'
})
-const getCurrentModelStatusTooltip = () => {
+const getCurrentModelStatusTitle = () => {
const status = state.currentModelStatus
if (!status) return '状态未知'
@@ -253,6 +261,7 @@ const getCurrentModelStatusTooltip = () => {
// 选择 v2 模型的方法
const handleSelectV2Model = (spec) => {
+ if (props.disabled) return
emit('select-model', spec)
dropdownOpen.value = false
}
@@ -282,6 +291,34 @@ const handleSelectV2Model = (spec) => {
cursor: pointer;
}
+.model-select--nano {
+ max-width: 100%;
+ height: 30px;
+ padding: 6px 8px;
+ border: none;
+ border-radius: 8px;
+ font-size: 13px;
+ line-height: 1;
+ color: var(--gray-600);
+ background: transparent;
+ transition: all 0.2s ease;
+ user-select: none;
+}
+
+.model-select--nano:hover {
+ color: var(--gray-900);
+ background: var(--gray-50);
+}
+
+.model-select--nano .model-text {
+ color: currentColor;
+}
+
+.model-select--disabled {
+ cursor: not-allowed;
+ opacity: 0.55;
+}
+
.model-dropdown {
min-width: 280px;
max-width: 420px;
@@ -302,5 +339,24 @@ const handleSelectV2Model = (spec) => {
overflow-y: auto;
box-shadow: none;
}
+
+ .ant-dropdown-menu-item,
+ .ant-dropdown-menu-submenu-title {
+ border-radius: 6px;
+ }
+
+ .ant-dropdown-menu-item:hover,
+ .ant-dropdown-menu-submenu-title:hover,
+ .ant-dropdown-menu-item-active,
+ .ant-dropdown-menu-submenu-title-active {
+ background: var(--gray-50);
+ }
+
+ .ant-dropdown-menu-item-selected,
+ .ant-dropdown-menu-item-selected:hover,
+ .ant-dropdown-menu-item-selected.ant-dropdown-menu-item-active {
+ color: var(--gray-1000);
+ background: var(--main-50);
+ }
}
diff --git a/web/src/views/AgentView.vue b/web/src/views/AgentView.vue
index 885b371a..744b5fd4 100644
--- a/web/src/views/AgentView.vue
+++ b/web/src/views/AgentView.vue
@@ -6,9 +6,22 @@
-
+
+
+
+
+
+
+
{
const value = route.params.thread_id
@@ -246,6 +262,42 @@ const currentAgentLabel = computed(() => {
const currentAgentIcon = computed(() => currentAgentOption.value?.icon || defaultAgentIcon)
+const inputModelKey = computed(() => {
+ if (configurableItems.value?.model?.kind === 'llm') return 'model'
+ return (
+ Object.entries(configurableItems.value || {}).find(
+ ([key, item]) => key !== 'subagents_model' && item?.kind === 'llm'
+ )?.[0] || ''
+ )
+})
+
+const currentInputModelSpec = computed(() => {
+ const key = inputModelKey.value
+ return key ? agentConfig.value?.[key] || '' : ''
+})
+
+const showInputModelSelector = computed(() => Boolean(selectedAgentId.value && inputModelKey.value))
+const isInputModelSelectorDisabled = computed(
+ () => isLoadingConfig.value || isSavingInputModel.value || !selectedAgent.value?.can_manage
+)
+
+const handleInputModelChange = async (spec) => {
+ const key = inputModelKey.value
+ if (!key || typeof spec !== 'string' || !spec || spec === currentInputModelSpec.value) return
+ if (isInputModelSelectorDisabled.value) return
+
+ const previousSpec = currentInputModelSpec.value
+ isSavingInputModel.value = true
+ try {
+ agentStore.updateAgentConfig({ [key]: spec })
+ await agentStore.saveAgentConfig()
+ } catch {
+ agentStore.updateAgentConfig({ [key]: previousSpec })
+ } finally {
+ isSavingInputModel.value = false
+ }
+}
+
const agentDropdownOpen = ref(false)
const handleAgentSwitch = async (agentId, hasActiveThread) => {
@@ -375,6 +427,14 @@ const handleFeedback = () => {
overflow: hidden;
}
+.input-model-selector {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 0;
+ max-width: min(168px, calc(100vw - 160px));
+}
+
.config-dropdown-trigger {
display: inline-flex;
align-items: center;
@@ -391,6 +451,7 @@ const handleFeedback = () => {
.config-dropdown-agent-icon {
width: 18px;
height: 18px;
+ border-radius: 3px;
flex-shrink: 0;
object-fit: contain;
}
@@ -585,6 +646,7 @@ const handleFeedback = () => {
width: 24px;
height: 24px;
object-fit: contain;
+ border-radius: 4px;
}
.config-dropdown-overlay .config-dropdown-item-badge {