lfg2025/archy
1
0
Fork 0
Code Issues 24 Pull Requests 4 Actions Packages Projects Releases 72 Wiki Activity

feat(chat): add model capabilities badges in selector (M9.8)

Browse Source 
Model selector shows capability badges per model: Vision, Tools,
Long context. Emoji indicators with tooltips. Capabilities defined
per model in a static map.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-03 23:37:48 +00:00
co-authored by Claude Opus 4.6
parent 55faf5043a
commit a3b80b5548
1 changed files with 35 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/chat/ChatHeader.vue
+35 -2
View File
@@ -149,13 +149,30 @@
<button
v-for="model in provider.models"
:key="model.id"
class="w-full text-left px-3 py-2 rounded-lg text-xs transition-all duration-200"
class="w-full text-left px-3 py-2 rounded-lg text-xs transition-all duration-200 flex items-center gap-2"
:class="model.id === activeModel && provider.id === activeProvider
? 'nav-tab-active'
: 'text-white/60 hover:text-white hover:bg-white/10'"
@click="selectModel(provider.id, model.id)"
>
{{ model.name }}
<span class="flex-1">{{ model.name }}</span>
<span class="flex gap-0.5 shrink-0">
<span
v-if="getModelCaps(model.id).vision"
class="text-[10px] opacity-60"
title="Supports vision input"
>👁</span>
<span
v-if="getModelCaps(model.id).tools"
class="text-[10px] opacity-60"
title="Supports tool use"
>🔧</span>
<span
v-if="getModelCaps(model.id).longContext"
class="text-[10px] opacity-60"
title="Long context window"
>📄</span>
</span>
</button>
</div>
</div>
@@ -265,6 +282,22 @@ defineEmits<{
const { activeProvider, activeModel, availableProviders, setProvider, setModel } = useAI()
const comparison = useComparisonMode()
// Model capabilities map
const MODEL_CAPS: Record<string, { vision: boolean; tools: boolean; longContext: boolean }> = {
'claude-haiku-4.5': { vision: true, tools: true, longContext: true },
'claude-sonnet-4': { vision: true, tools: true, longContext: true },
'claude-opus-4': { vision: true, tools: true, longContext: true },
'meta-llama/llama-4-maverick': { vision: true, tools: true, longContext: true },
'qwen/qwen3-235b-a22b-thinking-2507': { vision: false, tools: false, longContext: true },
'mistralai/mistral-small-3.1-24b-instruct:free': { vision: true, tools: true, longContext: false },
'google/gemma-3-27b-it:free': { vision: true, tools: false, longContext: false },
'echo': { vision: false, tools: false, longContext: false },
}
function getModelCaps(modelId: string) {
return MODEL_CAPS[modelId] ?? { vision: false, tools: false, longContext: false }
}
const chatStore = useChatStore()
const webSearchEnabled = computed(() => chatStore.webSearchEnabled)
const showModelPicker = ref(false)