From 921f8844ebb9455dc3a677b0024228c02c29719d Mon Sep 17 00:00:00 2001 From: sam hoang Date: Wed, 8 Jan 2025 00:29:52 +0700 Subject: [PATCH] fix: config manager not update when model, key, another optionn... --- webview-ui/src/components/settings/ApiOptions.tsx | 14 ++++++-------- .../src/components/settings/GlamaModelPicker.tsx | 9 ++++++--- .../src/components/settings/OpenAiModelPicker.tsx | 9 ++++++--- .../components/settings/OpenRouterModelPicker.tsx | 9 ++++++--- .../src/components/settings/SettingsView.tsx | 10 ---------- webview-ui/src/components/welcome/WelcomeView.tsx | 2 +- webview-ui/src/context/ExtensionStateContext.tsx | 12 +++++++++++- 7 files changed, 36 insertions(+), 29 deletions(-) diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx index 3ddb55f..ff1535d 100644 --- a/webview-ui/src/components/settings/ApiOptions.tsx +++ b/webview-ui/src/components/settings/ApiOptions.tsx @@ -46,11 +46,10 @@ interface ApiOptionsProps { showModelOptions: boolean apiErrorMessage?: string modelIdErrorMessage?: string - onSelectProvider: (apiProvider: any) => void } -const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, onSelectProvider }: ApiOptionsProps) => { - const { apiConfiguration, setApiConfiguration, uriScheme } = useExtensionState() +const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) => { + const { apiConfiguration, setApiConfiguration, uriScheme, onUpdateApiConfig } = useExtensionState() const [ollamaModels, setOllamaModels] = useState([]) const [lmStudioModels, setLmStudioModels] = useState([]) const [anthropicBaseUrlSelected, setAnthropicBaseUrlSelected] = useState(!!apiConfiguration?.anthropicBaseUrl) @@ -58,7 +57,9 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, on const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false) const handleInputChange = (field: keyof ApiConfiguration) => (event: any) => { - setApiConfiguration({ ...apiConfiguration, [field]: event.target.value }) + const apiConfig = { ...apiConfiguration, [field]: event.target.value } + onUpdateApiConfig(apiConfig) + setApiConfiguration(apiConfig) } const { selectedProvider, selectedModelId, selectedModelInfo } = useMemo(() => { @@ -131,10 +132,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, on { - onSelectProvider(event.target.value); - handleInputChange("apiProvider")(event); - }} + onChange={handleInputChange("apiProvider")} style={{ minWidth: 130, position: "relative", zIndex: OPENROUTER_MODEL_PICKER_Z_INDEX + 1 }}> OpenRouter Anthropic diff --git a/webview-ui/src/components/settings/GlamaModelPicker.tsx b/webview-ui/src/components/settings/GlamaModelPicker.tsx index 6823cc0..1b6164d 100644 --- a/webview-ui/src/components/settings/GlamaModelPicker.tsx +++ b/webview-ui/src/components/settings/GlamaModelPicker.tsx @@ -11,7 +11,7 @@ import { highlight } from "../history/HistoryView" import { ModelInfoView, normalizeApiConfiguration } from "./ApiOptions" const GlamaModelPicker: React.FC = () => { - const { apiConfiguration, setApiConfiguration, glamaModels } = useExtensionState() + const { apiConfiguration, setApiConfiguration, glamaModels, onUpdateApiConfig } = useExtensionState() const [searchTerm, setSearchTerm] = useState(apiConfiguration?.glamaModelId || glamaDefaultModelId) const [isDropdownVisible, setIsDropdownVisible] = useState(false) const [selectedIndex, setSelectedIndex] = useState(-1) @@ -22,11 +22,14 @@ const GlamaModelPicker: React.FC = () => { const handleModelChange = (newModelId: string) => { // could be setting invalid model id/undefined info but validation will catch it - setApiConfiguration({ + const apiConfig = { ...apiConfiguration, glamaModelId: newModelId, glamaModelInfo: glamaModels[newModelId], - }) + } + setApiConfiguration(apiConfig) + onUpdateApiConfig(apiConfig) + setSearchTerm(newModelId) } diff --git a/webview-ui/src/components/settings/OpenAiModelPicker.tsx b/webview-ui/src/components/settings/OpenAiModelPicker.tsx index 31cbddc..7979244 100644 --- a/webview-ui/src/components/settings/OpenAiModelPicker.tsx +++ b/webview-ui/src/components/settings/OpenAiModelPicker.tsx @@ -8,7 +8,7 @@ import { vscode } from "../../utils/vscode" import { highlight } from "../history/HistoryView" const OpenAiModelPicker: React.FC = () => { - const { apiConfiguration, setApiConfiguration, openAiModels } = useExtensionState() + const { apiConfiguration, setApiConfiguration, openAiModels, onUpdateApiConfig } = useExtensionState() const [searchTerm, setSearchTerm] = useState(apiConfiguration?.openAiModelId || "") const [isDropdownVisible, setIsDropdownVisible] = useState(false) const [selectedIndex, setSelectedIndex] = useState(-1) @@ -18,10 +18,13 @@ const OpenAiModelPicker: React.FC = () => { const handleModelChange = (newModelId: string) => { // could be setting invalid model id/undefined info but validation will catch it - setApiConfiguration({ + const apiConfig = { ...apiConfiguration, openAiModelId: newModelId, - }) + } + setApiConfiguration(apiConfig) + onUpdateApiConfig(apiConfig) + setSearchTerm(newModelId) } diff --git a/webview-ui/src/components/settings/OpenRouterModelPicker.tsx b/webview-ui/src/components/settings/OpenRouterModelPicker.tsx index bd4efd8..10086e7 100644 --- a/webview-ui/src/components/settings/OpenRouterModelPicker.tsx +++ b/webview-ui/src/components/settings/OpenRouterModelPicker.tsx @@ -11,7 +11,7 @@ import { highlight } from "../history/HistoryView" import { ModelInfoView, normalizeApiConfiguration } from "./ApiOptions" const OpenRouterModelPicker: React.FC = () => { - const { apiConfiguration, setApiConfiguration, openRouterModels } = useExtensionState() + const { apiConfiguration, setApiConfiguration, openRouterModels, onUpdateApiConfig } = useExtensionState() const [searchTerm, setSearchTerm] = useState(apiConfiguration?.openRouterModelId || openRouterDefaultModelId) const [isDropdownVisible, setIsDropdownVisible] = useState(false) const [selectedIndex, setSelectedIndex] = useState(-1) @@ -22,11 +22,14 @@ const OpenRouterModelPicker: React.FC = () => { const handleModelChange = (newModelId: string) => { // could be setting invalid model id/undefined info but validation will catch it - setApiConfiguration({ + const apiConfig = { ...apiConfiguration, openRouterModelId: newModelId, openRouterModelInfo: openRouterModels[newModelId], - }) + } + + setApiConfiguration(apiConfig) + onUpdateApiConfig(apiConfig) setSearchTerm(newModelId) } diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx index 0567d92..2d2a04e 100644 --- a/webview-ui/src/components/settings/SettingsView.tsx +++ b/webview-ui/src/components/settings/SettingsView.tsx @@ -199,16 +199,6 @@ const SettingsView = ({ onDone }: SettingsViewProps) => { showModelOptions={true} apiErrorMessage={apiErrorMessage} modelIdErrorMessage={modelIdErrorMessage} - onSelectProvider={(apiProvider: any) => { - vscode.postMessage({ - type: "upsertApiConfiguration", - text: currentApiConfigName, - apiConfiguration: { - ...apiConfiguration, - apiProvider: apiProvider, - } - }) - }} /> diff --git a/webview-ui/src/components/welcome/WelcomeView.tsx b/webview-ui/src/components/welcome/WelcomeView.tsx index fdaedb9..ef15a4e 100644 --- a/webview-ui/src/components/welcome/WelcomeView.tsx +++ b/webview-ui/src/components/welcome/WelcomeView.tsx @@ -38,7 +38,7 @@ const WelcomeView = () => { To get started, this extension needs an API provider for Claude 3.5 Sonnet.
- {}} /> + Let's go! diff --git a/webview-ui/src/context/ExtensionStateContext.tsx b/webview-ui/src/context/ExtensionStateContext.tsx index 4aa874e..48a0757 100644 --- a/webview-ui/src/context/ExtensionStateContext.tsx +++ b/webview-ui/src/context/ExtensionStateContext.tsx @@ -55,6 +55,7 @@ export interface ExtensionStateContextType extends ExtensionState { setRequestDelaySeconds: (value: number) => void setCurrentApiConfigName: (value: string) => void setListApiConfigMeta: (value: ApiConfigMeta[]) => void + onUpdateApiConfig: (apiConfig: ApiConfiguration) => void } export const ExtensionStateContext = createContext(undefined) @@ -98,6 +99,14 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode const setListApiConfigMeta = useCallback((value: ApiConfigMeta[]) => setState((prevState) => ({ ...prevState, listApiConfigMeta: value })), [setState]) + const onUpdateApiConfig = useCallback((apiConfig: ApiConfiguration) => { + vscode.postMessage({ + type: "upsertApiConfiguration", + text: state.currentApiConfigName, + apiConfiguration: apiConfig, + }) + }, [state]) + const handleMessage = useCallback((event: MessageEvent) => { const message: ExtensionMessage = event.data switch (message.type) { @@ -210,7 +219,8 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode setAlwaysApproveResubmit: (value) => setState((prevState) => ({ ...prevState, alwaysApproveResubmit: value })), setRequestDelaySeconds: (value) => setState((prevState) => ({ ...prevState, requestDelaySeconds: value })), setCurrentApiConfigName: (value) => setState((prevState) => ({ ...prevState, currentApiConfigName: value })), - setListApiConfigMeta + setListApiConfigMeta, + onUpdateApiConfig } return {children}