opensource/cline
3
0
Fork 0
mirror of https://github.com/cline/cline.git synced 2026-09-11 16:42:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor request and fireworks provider ui (#4499)

Browse Source 
* requesty

* fireworks
This commit is contained in:
Toshii
2025-06-30 20:51:36 -07:00
committed by nighttrek
parent 4ba2acdaf1
commit 988b1bf316
3 changed files with 131 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webview-ui/src/components/settings/ApiOptions.tsx
+17 -102
View File
@@ -54,6 +54,8 @@ import { GeminiProvider } from "./providers/GeminiProvider"
import { DoubaoProvider } from "./providers/DoubaoProvider"
import { VertexProvider } from "./providers/VertexProvider"
import GeminiCliProvider from "./providers/GeminiCliProvider"
import { RequestyProvider } from "./providers/RequestyProvider"
import { FireworksProvider } from "./providers/FireworksProvider"
interface ApiOptionsProps {
showModelOptions: boolean
@@ -758,109 +760,22 @@ const ApiOptions = ({
/>
)}
{selectedProvider === "requesty" && (
<div>
<VSCodeTextField
value={apiConfiguration?.requestyApiKey || ""}
style={{ width: "100%" }}
type="password"
onInput={handleInputChange("requestyApiKey")}
placeholder="Enter API Key...">
<span style={{ fontWeight: 500 }}>API Key</span>
</VSCodeTextField>
{!apiConfiguration?.requestyApiKey && <a href="https://app.requesty.ai/manage-api">Get API Key</a>}
</div>
{apiConfiguration && selectedProvider === "requesty" && (
<RequestyProvider
apiConfiguration={apiConfiguration}
handleInputChange={handleInputChange}
showModelOptions={showModelOptions}
isPopup={isPopup}
/>
)}
{selectedProvider === "fireworks" && (
<div>
<VSCodeTextField
value={apiConfiguration?.fireworksApiKey || ""}
style={{ width: "100%" }}
type="password"
onInput={handleInputChange("fireworksApiKey")}
placeholder="Enter API Key...">
<span style={{ fontWeight: 500 }}>Fireworks API Key</span>
</VSCodeTextField>
<p
style={{
fontSize: "12px",
marginTop: 3,
color: "var(--vscode-descriptionForeground)",
}}>
This key is stored locally and only used to make API requests from this extension.
{!apiConfiguration?.fireworksApiKey && (
<VSCodeLink
href="https://fireworks.ai/settings/users/api-keys"
style={{
display: "inline",
fontSize: "inherit",
}}>
You can get a Fireworks API key by signing up here.
</VSCodeLink>
)}
</p>
<VSCodeTextField
value={apiConfiguration?.fireworksModelId || ""}
style={{ width: "100%" }}
onInput={handleInputChange("fireworksModelId")}
placeholder={"Enter Model ID..."}>
<span style={{ fontWeight: 500 }}>Model ID</span>
</VSCodeTextField>
<p
style={{
fontSize: "12px",
marginTop: 3,
color: "var(--vscode-descriptionForeground)",
}}>
<span style={{ color: "var(--vscode-errorForeground)" }}>
(<span style={{ fontWeight: 500 }}>Note:</span> Cline uses complex prompts and works best with Claude
models. Less capable models may not work as expected.)
</span>
</p>
<VSCodeTextField
value={apiConfiguration?.fireworksModelMaxCompletionTokens?.toString() || ""}
style={{ width: "100%", marginBottom: 8 }}
onInput={(e) => {
const value = (e.target as HTMLInputElement).value
if (!value) {
return
}
const num = parseInt(value, 10)
if (isNaN(num)) {
return
}
handleInputChange("fireworksModelMaxCompletionTokens")({
target: {
value: num,
},
})
}}
placeholder={"2000"}>
<span style={{ fontWeight: 500 }}>Max Completion Tokens</span>
</VSCodeTextField>
<VSCodeTextField
value={apiConfiguration?.fireworksModelMaxTokens?.toString() || ""}
style={{ width: "100%", marginBottom: 8 }}
onInput={(e) => {
const value = (e.target as HTMLInputElement).value
if (!value) {
return
}
const num = parseInt(value)
if (isNaN(num)) {
return
}
handleInputChange("fireworksModelMaxTokens")({
target: {
value: num,
},
})
}}
placeholder={"4000"}>
<span style={{ fontWeight: 500 }}>Max Context Tokens</span>
</VSCodeTextField>
</div>
{apiConfiguration && selectedProvider === "fireworks" && (
<FireworksProvider
apiConfiguration={apiConfiguration}
handleInputChange={handleInputChange}
showModelOptions={showModelOptions}
isPopup={isPopup}
/>
)}
{selectedProvider === "vscode-lm" && (
@@ -1531,6 +1446,7 @@ const ApiOptions = ({
selectedProvider !== "doubao" &&
selectedProvider !== "vertex" &&
selectedProvider !== "gemini-cli" &&
selectedProvider !== "fireworks" &&
showModelOptions && (
<>
<DropdownContainer zIndex={DROPDOWN_Z_INDEX - 2} className="dropdown-container">
@@ -1618,7 +1534,6 @@ const ApiOptions = ({
)}
{selectedProvider === "cline" && showModelOptions && <OpenRouterModelPicker isPopup={isPopup} />}
{selectedProvider === "requesty" && showModelOptions && <RequestyModelPicker isPopup={isPopup} />}
{modelIdErrorMessage && (
<p
webview-ui/src/components/settings/providers/FireworksProvider.tsx
+83
View File
@@ -0,0 +1,83 @@
import { ApiConfiguration } from "@shared/api"
import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
import { ApiKeyField } from "../common/ApiKeyField"
/**
* Props for the FireworksProvider component
*/
interface FireworksProviderProps {
apiConfiguration: ApiConfiguration
handleInputChange: (field: keyof ApiConfiguration) => (event: any) => void
showModelOptions: boolean
isPopup?: boolean
}
/**
* The Fireworks provider configuration component
*/
export const FireworksProvider = ({ apiConfiguration, handleInputChange, showModelOptions, isPopup }: FireworksProviderProps) => {
// Handler for number input fields with validation
const handleNumberInputChange = (field: keyof ApiConfiguration) => (e: any) => {
const value = (e.target as HTMLInputElement).value
if (!value) {
return
}
const num = parseInt(value, 10)
if (isNaN(num)) {
return
}
handleInputChange(field)({
target: {
value: num,
},
})
}
return (
<div>
<ApiKeyField
value={apiConfiguration?.fireworksApiKey || ""}
onChange={handleInputChange("fireworksApiKey")}
providerName="Fireworks"
signupUrl="https://fireworks.ai/settings/users/api-keys"
/>
{showModelOptions && (
<>
<VSCodeTextField
value={apiConfiguration?.fireworksModelId || ""}
style={{ width: "100%" }}
onInput={handleInputChange("fireworksModelId")}
placeholder={"Enter Model ID..."}>
<span style={{ fontWeight: 500 }}>Model ID</span>
</VSCodeTextField>
<p
style={{
fontSize: "12px",
marginTop: 3,
color: "var(--vscode-descriptionForeground)",
}}>
<span style={{ color: "var(--vscode-errorForeground)" }}>
(<span style={{ fontWeight: 500 }}>Note:</span> Cline uses complex prompts and works best with Claude
models. Less capable models may not work as expected.)
</span>
</p>
<VSCodeTextField
value={apiConfiguration?.fireworksModelMaxCompletionTokens?.toString() || ""}
style={{ width: "100%", marginBottom: 8 }}
onInput={handleNumberInputChange("fireworksModelMaxCompletionTokens")}
placeholder={"2000"}>
<span style={{ fontWeight: 500 }}>Max Completion Tokens</span>
</VSCodeTextField>
<VSCodeTextField
value={apiConfiguration?.fireworksModelMaxTokens?.toString() || ""}
style={{ width: "100%", marginBottom: 8 }}
onInput={handleNumberInputChange("fireworksModelMaxTokens")}
placeholder={"4000"}>
<span style={{ fontWeight: 500 }}>Max Context Tokens</span>
</VSCodeTextField>
</>
)}
</div>
)
}
webview-ui/src/components/settings/providers/RequestyProvider.tsx
+31
View File
@@ -0,0 +1,31 @@
import { ApiConfiguration } from "@shared/api"
import { ApiKeyField } from "../common/ApiKeyField"
import RequestyModelPicker from "../RequestyModelPicker"
/**
* Props for the RequestyProvider component
*/
interface RequestyProviderProps {
apiConfiguration: ApiConfiguration
handleInputChange: (field: keyof ApiConfiguration) => (event: any) => void
showModelOptions: boolean
isPopup?: boolean
}
/**
* The Requesty provider configuration component
*/
export const RequestyProvider = ({ apiConfiguration, handleInputChange, showModelOptions, isPopup }: RequestyProviderProps) => {
return (
<div>
<ApiKeyField
value={apiConfiguration?.requestyApiKey || ""}
onChange={handleInputChange("requestyApiKey")}
providerName="Requesty"
signupUrl="https://app.requesty.ai/manage-api"
/>
{showModelOptions && <RequestyModelPicker isPopup={isPopup} />}
</div>
)
}