diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx index d19443cf93..1e9d1a5d48 100644 --- a/webview-ui/src/components/settings/ApiOptions.tsx +++ b/webview-ui/src/components/settings/ApiOptions.tsx @@ -6,6 +6,7 @@ import { VSCodeRadio, VSCodeRadioGroup, VSCodeTextField, + VSCodeButton, } from "@vscode/webview-ui-toolkit/react" import { Fragment, memo, useCallback, useEffect, useMemo, useState } from "react" import { useEvent, useInterval } from "react-use" @@ -84,6 +85,10 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is const [azureApiVersionSelected, setAzureApiVersionSelected] = useState(!!apiConfiguration?.azureApiVersion) const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false) + const handleClineLogin = () => { + vscode.postMessage({ type: "accountLoginClicked" }) + } + const handleInputChange = (field: keyof ApiConfiguration) => (event: any) => { setApiConfiguration({ ...apiConfiguration, [field]: event.target.value }) } @@ -170,6 +175,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is value={selectedProvider} onChange={handleInputChange("apiProvider")} style={{ minWidth: 130, position: "relative", zIndex: OPENROUTER_MODEL_PICKER_Z_INDEX + 1 }}> + Cline OpenRouter Anthropic Google Gemini @@ -185,6 +191,40 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is + {selectedProvider === "cline" && ( +
+ {apiConfiguration?.clineApiKey && ( + + Cline API Key + + )} + + {apiConfiguration?.clineApiKey && ( +

+ {t("apiKeyInfo")} +

+ )} + + {!apiConfiguration?.clineApiKey && ( +
+ + Get Cline API Key + +
+ )} +
+ )} + {selectedProvider === "anthropic" && (
{
    -
  • Get $5 worth of free tokens
  • -
  • No processing fees
  • -
  • Seamless integration
  • +
  • Get 1 task worth of free tokens
  • +
  • No credit card required - just start using Cline immediately!