From c13e749eed30bab0518438e9ae4a8875379590c7 Mon Sep 17 00:00:00 2001 From: celestial-vault <58194240+celestial-vault@users.noreply.github.com> Date: Thu, 26 Jun 2025 21:05:29 -0700 Subject: [PATCH] refactor out sap ai core settings (#4508) --- .../src/components/settings/ApiOptions.tsx | 79 ++----------- .../settings/providers/SapAiCoreProvider.tsx | 105 ++++++++++++++++++ 2 files changed, 116 insertions(+), 68 deletions(-) create mode 100644 webview-ui/src/components/settings/providers/SapAiCoreProvider.tsx diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx index 32cbaa45a1..aff3627d0f 100644 --- a/webview-ui/src/components/settings/ApiOptions.tsx +++ b/webview-ui/src/components/settings/ApiOptions.tsx @@ -12,13 +12,11 @@ import { mainlandQwenModels, ModelInfo, nebiusModels, - sapAiCoreModels, } from "@shared/api" import { EmptyRequest, StringRequest } from "@shared/proto/common" -import { OpenAiModelsRequest, UpdateApiConfigurationRequest } from "@shared/proto/models" +import { UpdateApiConfigurationRequest } from "@shared/proto/models" import { convertApiConfigurationToProto } from "@shared/proto-conversions/models/api-configuration-conversion" import { - VSCodeButton, VSCodeCheckbox, VSCodeDropdown, VSCodeLink, @@ -27,7 +25,7 @@ import { VSCodeRadioGroup, VSCodeTextField, } from "@vscode/webview-ui-toolkit/react" -import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from "react" +import { Fragment, memo, useCallback, useEffect, useMemo, useState } from "react" import { useInterval } from "react-use" import styled from "styled-components" import * as vscodemodels from "vscode" @@ -56,6 +54,7 @@ import { FireworksProvider } from "./providers/FireworksProvider" import { XaiProvider } from "./providers/XaiProvider" import { CerebrasProvider } from "./providers/CerebrasProvider" import { OllamaProvider } from "./providers/OllamaProvider" +import { SapAiCoreProvider } from "./providers/SapAiCoreProvider" interface ApiOptionsProps { showModelOptions: boolean @@ -1174,69 +1173,13 @@ const ApiOptions = ({ /> )} - {selectedProvider === "sapaicore" && ( -
- - AI Core Client Id - - {apiConfiguration?.sapAiCoreClientId && ( -

- Client Id is set. To change it, please re-enter the value. -

- )} - - AI Core Client Secret - - {apiConfiguration?.sapAiCoreClientSecret && ( -

- Client Secret is set. To change it, please re-enter the value. -

- )} - - AI Core Base URL - - - AI Core Auth URL - - - AI Core Resource Group - -

- These credentials are stored locally and only used to make API requests from this extension. - - You can find more information about SAP AI Core API access here. - -

-
+ {apiConfiguration && selectedProvider === "sapaicore" && ( + )} {apiErrorMessage && ( @@ -1323,6 +1266,7 @@ const ApiOptions = ({ selectedProvider !== "fireworks" && selectedProvider !== "xai" && selectedProvider !== "cerebras" && + selectedProvider !== "sapaicore" && showModelOptions && ( <> @@ -1335,7 +1279,6 @@ const ApiOptions = ({ apiConfiguration?.qwenApiLine === "china" ? mainlandQwenModels : internationalQwenModels, )} {selectedProvider === "nebius" && createDropdown(nebiusModels)} - {selectedProvider === "sapaicore" && createDropdown(sapAiCoreModels)} {SUPPORTED_THINKING_MODELS[selectedProvider]?.includes(selectedModelId) && ( diff --git a/webview-ui/src/components/settings/providers/SapAiCoreProvider.tsx b/webview-ui/src/components/settings/providers/SapAiCoreProvider.tsx new file mode 100644 index 0000000000..1dd195b92b --- /dev/null +++ b/webview-ui/src/components/settings/providers/SapAiCoreProvider.tsx @@ -0,0 +1,105 @@ +import { ApiConfiguration, sapAiCoreModels } from "@shared/api" +import { VSCodeTextField, VSCodeLink } from "@vscode/webview-ui-toolkit/react" +import { ModelSelector } from "../common/ModelSelector" +import { ModelInfoView } from "../common/ModelInfoView" +import { normalizeApiConfiguration } from "../utils/providerUtils" + +/** + * Props for the SapAiCoreProvider component + */ +interface SapAiCoreProviderProps { + apiConfiguration: ApiConfiguration + handleInputChange: (field: keyof ApiConfiguration) => (event: any) => void + showModelOptions: boolean + isPopup?: boolean +} + +/** + * The SAP AI Core provider configuration component + */ +export const SapAiCoreProvider = ({ apiConfiguration, handleInputChange, showModelOptions, isPopup }: SapAiCoreProviderProps) => { + const { selectedModelId, selectedModelInfo } = normalizeApiConfiguration(apiConfiguration) + + return ( +
+ + AI Core Client Id + + {apiConfiguration?.sapAiCoreClientId && ( +

+ Client Id is set. To change it, please re-enter the value. +

+ )} + + + AI Core Client Secret + + {apiConfiguration?.sapAiCoreClientSecret && ( +

+ Client Secret is set. To change it, please re-enter the value. +

+ )} + + + AI Core Base URL + + + + AI Core Auth URL + + + + AI Core Resource Group + + +

+ These credentials are stored locally and only used to make API requests from this extension. + + You can find more information about SAP AI Core API access here. + +

+ + {showModelOptions && ( + <> + + + + + )} +
+ ) +}