feat: Add model selector feature to chat interface #82
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| // SPDX-FileCopyrightText: 2025 Weibo, Inc. | ||
| // | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| 'use client'; | ||
|
|
||
| import React, { useEffect, useState, useMemo } from 'react'; | ||
| import { Select, theme } from 'antd'; | ||
| import { CpuChipIcon } from '@heroicons/react/24/outline'; | ||
| import { apiClient } from '@/apis/client'; | ||
| import { useTranslation } from '@/hooks/useTranslation'; | ||
| import { useMediaQuery } from '@/hooks/useMediaQuery'; | ||
|
|
||
| interface ModelSelectorProps { | ||
| selectedModel: string | null; | ||
| setSelectedModel: (model: string | null) => void; | ||
| disabled?: boolean; | ||
| isLoading?: boolean; | ||
| } | ||
|
|
||
| interface ModelOption { | ||
| name: string; | ||
| } | ||
|
|
||
| export default function ModelSelector({ | ||
| selectedModel, | ||
| setSelectedModel, | ||
| disabled = false, | ||
| isLoading = false, | ||
| }: ModelSelectorProps) { | ||
| const { t } = useTranslation('common'); | ||
| const { token } = theme.useToken(); | ||
| const isMobile = useMediaQuery('(max-width: 767px)'); | ||
| const [models, setModels] = useState<ModelOption[]>([]); | ||
| const [modelsLoading, setModelsLoading] = useState(false); | ||
| const [error, setError] = useState<string | null>(null); | ||
|
|
||
| // Fetch models from API | ||
| useEffect(() => { | ||
| const fetchModels = async () => { | ||
| setModelsLoading(true); | ||
| setError(null); | ||
| try { | ||
| const response = await apiClient.get<{ data: ModelOption[] }>('/models/names', { | ||
| agent_name: 'ClaudeCode', | ||
| }); | ||
| setModels(response.data || []); | ||
| } catch (err) { | ||
| console.error('Failed to fetch models:', err); | ||
| setError('Failed to load models'); | ||
| setModels([]); | ||
| } finally { | ||
| setModelsLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| fetchModels(); | ||
| }, []); | ||
|
|
||
| // Validate selectedModel exists in models list | ||
| useEffect(() => { | ||
| if (selectedModel && models.length > 0) { | ||
| const exists = models.some(m => m.name === selectedModel); | ||
| if (!exists) { | ||
| console.warn( | ||
| `Selected model "${selectedModel}" not found in models list, clearing selection` | ||
| ); | ||
| setSelectedModel(null); | ||
| } | ||
| } | ||
| }, [selectedModel, models, setSelectedModel]); | ||
|
|
||
| const handleChange = (value: string | null) => { | ||
| setSelectedModel(value); | ||
| }; | ||
|
|
||
| const modelOptions = useMemo(() => { | ||
| return models.map(model => ({ | ||
| label: ( | ||
| <span className="font-medium text-xs text-text-primary truncate" title={model.name}> | ||
| {model.name} | ||
| </span> | ||
| ), | ||
| value: model.name, | ||
| })); | ||
| }, [models]); | ||
|
|
||
| const filterOption = (input: string, option?: { label: React.ReactNode; value: string }) => { | ||
| if (!option) return false; | ||
| return option.value.toLowerCase().includes(input.toLowerCase()); | ||
| }; | ||
|
|
||
| if (error) { | ||
| return null; // Hide selector if models failed to load | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flex items-baseline space-x-1 min-w-0"> | ||
| <CpuChipIcon | ||
| className={`w-3 h-3 text-text-muted flex-shrink-0 ${modelsLoading || isLoading ? 'animate-pulse' : ''}`} | ||
| /> | ||
| <Select | ||
| showSearch | ||
| allowClear | ||
| value={selectedModel} | ||
| placeholder={ | ||
| <span className="text-sx truncate h-2"> | ||
| {modelsLoading ? t('chat.model_loading') || 'Loading...' : t('chat.select_model') || 'Select Model'} | ||
| </span> | ||
| } | ||
| className="repository-selector min-w-0 truncate" | ||
| style={{ | ||
| width: 'auto', | ||
| maxWidth: isMobile ? 150 : 200, | ||
| display: 'inline-block', | ||
| paddingRight: 20, | ||
| }} | ||
| popupMatchSelectWidth={false} | ||
| styles={{ popup: { root: { maxWidth: 280 } } }} | ||
| classNames={{ popup: { root: 'repository-selector-dropdown custom-scrollbar' } }} | ||
| disabled={disabled || modelsLoading} | ||
| loading={modelsLoading} | ||
| size="small" | ||
| filterOption={filterOption} | ||
| onChange={handleChange} | ||
| notFoundContent={ | ||
| <div className="px-3 py-2 text-sm text-text-muted"> | ||
| {t('chat.no_model_found') || 'No model found'} | ||
| </div> | ||
| } | ||
| options={modelOptions} | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Override replaces entire agent_config instead of merging.
Line 446 replaces the entire
agent_configwithoverride_model_config:This means if the original
agent_confighad other important fields (e.g.,temperature,max_tokens,top_p), they will be lost. Onlyprivate_modelwill remain.Consider merging the override config with the existing config:
if bot_id in bots: bot_dict = bots[bot_id].copy() # If subtask has override_model_config, use it to override agent_config if subtask.override_model_config: - bot_dict["agent_config"] = subtask.override_model_config + # Merge override config with existing config to preserve other settings + if bot_dict.get("agent_config"): + bot_dict["agent_config"] = {**bot_dict["agent_config"], **subtask.override_model_config} + else: + bot_dict["agent_config"] = subtask.override_model_config logger.info(f"Applied override_model_config to bot {bot_id} in subtask {subtask.id}: {subtask.override_model_config}") subtask_bots.append(bot_dict)This preserves other configuration parameters while overriding only the
private_modelfield.🤖 Prompt for AI Agents