Skip to content

fix: improve VS Code LM API model name display #8444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

fix: improve VS Code LM API model name display #8444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion src/core/webview/webviewMessageHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -932,8 +932,16 @@ export const webviewMessageHandler = async (
break
case "requestVsCodeLmModels":
const vsCodeLmModels = await getVsCodeLmModels()
// Map the models to include all necessary properties for the UI
const mappedModels = vsCodeLmModels.map((model) => ({
Copy link
Contributor Author

@roomote roomote bot Oct 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P3] Preserve future selector fields via spread to reduce maintenance.\n\nsuggestion\n const mappedModels = vsCodeLmModels.map((model) => ({ ...model, name: model.name }))\n

vendor: model.vendor,
family: model.family,
version: model.version,
id: model.id,
name: model.name, // Include the name property for better display
}))
// TODO: Cache like we do for OpenRouter, etc?
provider.postMessageToWebview({ type: "vsCodeLmModels", vsCodeLmModels })
provider.postMessageToWebview({ type: "vsCodeLmModels", vsCodeLmModels: mappedModels })
break
case "requestHuggingFaceModels":
// TODO: Why isn't this handled by `requestRouterModels` above?
Expand Down
2 changes: 1 addition & 1 deletion src/shared/ExtensionMessage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export interface ExtensionMessage {
openAiModels?: string[]
ollamaModels?: ModelRecord
lmStudioModels?: ModelRecord
vsCodeLmModels?: { vendor?: string; family?: string; version?: string; id?: string }[]
vsCodeLmModels?: { vendor?: string; family?: string; version?: string; id?: string; name?: string }[]
Copy link
Contributor Author

@roomote roomote bot Oct 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P2] Reuse the exported LanguageModelChatSelector to avoid duplicate shapes and drift.\n\nsuggestion\n vsCodeLmModels?: Array<LanguageModelChatSelector & { name?: string }>\n

huggingFaceModels?: Array<{
id: string
object: string
Expand Down
29 changes: 19 additions & 10 deletions webview-ui/src/components/settings/providers/VSCodeLM.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { useState, useCallback } from "react"
import { useEvent } from "react-use"
import { LanguageModelChatSelector } from "vscode"

import type { ProviderSettings } from "@roo-code/types"

import { ExtensionMessage } from "@roo/ExtensionMessage"
import { ExtensionMessage, LanguageModelChatSelector } from "@roo/ExtensionMessage"

import { useAppTranslation } from "@src/i18n/TranslationContext"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@src/components/ui"
Expand All @@ -19,7 +18,7 @@ type VSCodeLMProps = {
export const VSCodeLM = ({ apiConfiguration, setApiConfigurationField }: VSCodeLMProps) => {
const { t } = useAppTranslation()

const [vsCodeLmModels, setVsCodeLmModels] = useState<LanguageModelChatSelector[]>([])
const [vsCodeLmModels, setVsCodeLmModels] = useState<Array<LanguageModelChatSelector & { name?: string }>>([])

const handleInputChange = useCallback(
<K extends keyof ProviderSettings, E>(
Expand Down Expand Up @@ -66,13 +65,23 @@ export const VSCodeLM = ({ apiConfiguration, setApiConfigurationField }: VSCodeL
<SelectValue placeholder={t("settings:common.select")} />
</SelectTrigger>
<SelectContent>
{vsCodeLmModels.map((model) => (
<SelectItem
key={`${model.vendor}/${model.family}`}
value={`${model.vendor}/${model.family}`}>
{`${model.vendor} - ${model.family}`}
</SelectItem>
))}
{vsCodeLmModels.map((model) => {
// Create a more user-friendly display name
// Use the model's name property if available, otherwise fall back to vendor/family
const displayName =
Copy link
Contributor Author

@roomote roomote bot Oct 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P3] Optional: disambiguate human-friendly names by appending version when present, e.g., "name (version)" to distinguish similarly named models.

model.name ||
(model.vendor && model.family
? `${model.vendor} - ${model.family}`
: model.id || "Unknown Model")

return (
<SelectItem
Copy link
Contributor Author

@roomote roomote bot Oct 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P2] Selection key/value rely on vendor/family even when displayName may fall back to id. If a model lacks vendor/family, the selector value becomes "undefined/undefined" and breaks parsing. Recommend using model.id as the primary key/value when available and adjusting onValueChange to resolve vendor/family by lookup when given an id.

key={`${model.vendor}/${model.family}`}
value={`${model.vendor}/${model.family}`}>
{displayName}
</SelectItem>
)
})}
</SelectContent>
</Select>
) : (
Expand Down
Loading