pacnpal/Roo-Code
1
0
Fork 0
mirror of https://github.com/pacnpal/Roo-Code.git synced 2025-12-20 12:21:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix ui and some error my has

Browse Source
This commit is contained in:
sam hoang
2025-01-19 00:34:05 +07:00
parent d50e075c75
commit 9d5e6a2082
1 changed files with 126 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
webview-ui/src/components/settings/ApiOptions.tsx
View File

@@ -166,7 +166,11 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
onChange={(checked: boolean) => { onChange={(checked: boolean) => {
setAnthropicBaseUrlSelected(checked) setAnthropicBaseUrlSelected(checked)
if (!checked) { if (!checked) {
setApiConfiguration({ ...apiConfiguration, anthropicBaseUrl: "" }) handleInputChange("anthropicBaseUrl")({
target: {
value: "",
},
})
} }
}}> }}>
Use custom base URL Use custom base URL
@@ -537,7 +541,11 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
onChange={(checked: boolean) => { onChange={(checked: boolean) => {
setAzureApiVersionSelected(checked) setAzureApiVersionSelected(checked)
if (!checked) { if (!checked) {
setApiConfiguration({ ...apiConfiguration, azureApiVersion: "" }) handleInputChange("azureApiVersion")({
target: {
value: "",
},
})
} }
}}> }}>
Set Azure API version Set Azure API version
@@ -552,31 +560,47 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
)} )}
{/* Model Info Configuration */} {/* Model Info Configuration */}
<div style={{ marginTop: 15, padding: 10, border: '1px solid var(--vscode-input-border)', borderRadius: 4 }}> <div
style={{
marginTop: 15,
padding: 10,
border: "1px solid var(--vscode-input-border)",
borderRadius: 4,
}}>
<div style={{ marginBottom: 10 }}> <div style={{ marginBottom: 10 }}>
<span style={{ fontWeight: 500, fontSize: '14px' }}>Model Configuration</span> <span style={{ fontWeight: 500, fontSize: "14px" }}>Model Configuration</span>
<p style={{ fontSize: '12px', color: 'var(--vscode-descriptionForeground)', margin: '5px 0' }}> <p
style={{
fontSize: "12px",
color: "var(--vscode-descriptionForeground)",
margin: "5px 0",
}}>
Configure the capabilities and pricing for your custom OpenAI-compatible model Configure the capabilities and pricing for your custom OpenAI-compatible model
</p> </p>
</div> </div>
{/* Capabilities Section */} {/* Capabilities Section */}
<div style={{ marginBottom: 15 }}> <div style={{ marginBottom: 15 }}>
<span style={{ fontWeight: 500, fontSize: '12px', color: 'var(--vscode-descriptionForeground)' }}>Capabilities</span>
<div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 5 }}> <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 5 }}>
<VSCodeTextField <VSCodeTextField
value={apiConfiguration?.openAiCusModelInfo?.maxTokens?.toString() || openAiModelInfoSaneDefaults.maxTokens?.toString() || ""} value={
apiConfiguration?.openAiCusModelInfo?.maxTokens?.toString() ||
openAiModelInfoSaneDefaults.maxTokens?.toString() ||
""
}
type="text" type="text"
style={{ width: "100%" }} style={{ width: "100%" }}
title="Maximum number of tokens the model can generate in a single response" title="Maximum number of tokens the model can generate in a single response"
onInput={(e: any) => { onInput={(e: any) => {
const value = parseInt(e.target.value) const value = parseInt(e.target.value)
setApiConfiguration({ handleInputChange("openAiCusModelInfo")({
...apiConfiguration, target: {
openAiCusModelInfo: { value: {
...(apiConfiguration?.openAiCusModelInfo || openAiModelInfoSaneDefaults), ...(apiConfiguration?.openAiCusModelInfo ||
maxTokens: isNaN(value) ? undefined : value openAiModelInfoSaneDefaults),
} maxTokens: isNaN(value) ? undefined : value,
},
},
}) })
}} }}
placeholder="e.g. 4096"> placeholder="e.g. 4096">
@@ -584,18 +608,29 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
</VSCodeTextField> </VSCodeTextField>
<VSCodeTextField <VSCodeTextField
value={apiConfiguration?.openAiCusModelInfo?.contextWindow?.toString() || openAiModelInfoSaneDefaults.contextWindow?.toString() || ""} value={
apiConfiguration?.openAiCusModelInfo?.contextWindow?.toString() ||
openAiModelInfoSaneDefaults.contextWindow?.toString() ||
""
}
type="text" type="text"
style={{ width: "100%" }} style={{ width: "100%" }}
title="Total number of tokens (input + output) the model can process in a single request" title="Total number of tokens (input + output) the model can process in a single request"
onInput={(e: any) => { onInput={(e: any) => {
const parsed = parseInt(e.target.value) const parsed = parseInt(e.target.value)
setApiConfiguration({ handleInputChange("openAiCusModelInfo")({
...apiConfiguration, target: {
openAiCusModelInfo: { value: {
...(apiConfiguration?.openAiCusModelInfo || openAiModelInfoSaneDefaults), ...(apiConfiguration?.openAiCusModelInfo ||
contextWindow: e.target.value === "" ? undefined : (isNaN(parsed) ? openAiModelInfoSaneDefaults.contextWindow : parsed) openAiModelInfoSaneDefaults),
} contextWindow:
e.target.value === ""
? undefined
: isNaN(parsed)
? openAiModelInfoSaneDefaults.contextWindow
: parsed,
},
},
}) })
}} }}
placeholder="e.g. 128000"> placeholder="e.g. 128000">
@@ -603,58 +638,83 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
</VSCodeTextField> </VSCodeTextField>
<div style={{ display: "flex", gap: 20, marginTop: 5 }}> <div style={{ display: "flex", gap: 20, marginTop: 5 }}>
<VSCodeCheckbox <Checkbox
checked={apiConfiguration?.openAiCusModelInfo?.supportsImages ?? openAiModelInfoSaneDefaults.supportsImages} checked={
title="Enable if the model can process and understand images in the input" apiConfiguration?.openAiCusModelInfo?.supportsImages ??
onChange={(e: any) => { openAiModelInfoSaneDefaults.supportsImages
setApiConfiguration({
...apiConfiguration,
openAiCusModelInfo: {
...(apiConfiguration?.openAiCusModelInfo || openAiModelInfoSaneDefaults),
supportsImages: e.target.checked
} }
title="Enable if the model can process and understand images in the input"
onChange={(checked: boolean) => {
handleInputChange("openAiCusModelInfo")({
target: {
value: {
...(apiConfiguration?.openAiCusModelInfo ||
openAiModelInfoSaneDefaults),
supportsImages: checked,
},
},
}) })
}}> }}>
Supports Images Supports Images
</VSCodeCheckbox> </Checkbox>
<VSCodeCheckbox <Checkbox
checked={apiConfiguration?.openAiCusModelInfo?.supportsComputerUse ?? false} checked={apiConfiguration?.openAiCusModelInfo?.supportsComputerUse ?? false}
title="Enable if the model can interact with the computer (execute commands, modify files, etc.)" title="Enable if the model can interact with the computer (execute commands, modify files, etc.)"
onChange={(e: any) => { onChange={(checked: boolean) => {
setApiConfiguration({ handleInputChange("openAiCusModelInfo")({
...apiConfiguration, target: {
openAiCusModelInfo: { value: {
...(apiConfiguration?.openAiCusModelInfo || openAiModelInfoSaneDefaults), ...(apiConfiguration?.openAiCusModelInfo ||
supportsComputerUse: e.target.checked openAiModelInfoSaneDefaults),
} supportsComputerUse: checked,
},
},
}) })
}}> }}>
Supports Computer Use Supports Computer Use
</VSCodeCheckbox> </Checkbox>
</div> </div>
</div> </div>
</div> </div>
{/* Pricing Section */} {/* Pricing Section */}
<div> <div>
<span style={{ fontWeight: 500, fontSize: '12px', color: 'var(--vscode-descriptionForeground)' }}>Pricing (USD per million tokens)</span> <span
style={{
fontWeight: 500,
fontSize: "12px",
color: "var(--vscode-descriptionForeground)",
}}>
Pricing (USD per million tokens)
</span>
<div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 5 }}> <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 5 }}>
{/* Input/Output Prices */} {/* Input/Output Prices */}
<div style={{ display: "flex", gap: 10 }}> <div style={{ display: "flex", gap: 10 }}>
<VSCodeTextField <VSCodeTextField
value={apiConfiguration?.openAiCusModelInfo?.inputPrice?.toString() || openAiModelInfoSaneDefaults.inputPrice?.toString() || ""} value={
apiConfiguration?.openAiCusModelInfo?.inputPrice?.toString() ??
openAiModelInfoSaneDefaults.inputPrice?.toString() ??
""
}
type="text" type="text"
style={{ width: "100%" }} style={{ width: "100%" }}
title="Cost per million tokens in the input/prompt" title="Cost per million tokens in the input/prompt"
onChange={(e: any) => { onChange={(e: any) => {
const parsed = parseFloat(e.target.value) const parsed = parseFloat(e.target.value)
setApiConfiguration({ handleInputChange("openAiCusModelInfo")({
...apiConfiguration, target: {
openAiCusModelInfo: { value: {
...(apiConfiguration?.openAiCusModelInfo || openAiModelInfoSaneDefaults), ...(apiConfiguration?.openAiCusModelInfo ??
inputPrice: e.target.value === "" ? undefined : (isNaN(parsed) ? openAiModelInfoSaneDefaults.inputPrice : parsed) openAiModelInfoSaneDefaults),
} inputPrice:
e.target.value === ""
? undefined
: isNaN(parsed)
? openAiModelInfoSaneDefaults.inputPrice
: parsed,
},
},
}) })
}} }}
placeholder="e.g. 0.0001"> placeholder="e.g. 0.0001">
@@ -662,72 +722,41 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
</VSCodeTextField> </VSCodeTextField>
<VSCodeTextField <VSCodeTextField
value={apiConfiguration?.openAiCusModelInfo?.outputPrice?.toString() || openAiModelInfoSaneDefaults.outputPrice?.toString() || ""} value={
apiConfiguration?.openAiCusModelInfo?.outputPrice?.toString() ||
openAiModelInfoSaneDefaults.outputPrice?.toString() ||
""
}
type="text" type="text"
style={{ width: "100%" }} style={{ width: "100%" }}
title="Cost per million tokens in the model's response" title="Cost per million tokens in the model's response"
onChange={(e: any) => { onChange={(e: any) => {
const parsed = parseFloat(e.target.value) const parsed = parseFloat(e.target.value)
setApiConfiguration({ handleInputChange("openAiCusModelInfo")({
...apiConfiguration, target: {
openAiCusModelInfo: { value: {
...(apiConfiguration?.openAiCusModelInfo || openAiModelInfoSaneDefaults), ...(apiConfiguration?.openAiCusModelInfo ||
outputPrice: e.target.value === "" ? undefined : (isNaN(parsed) ? openAiModelInfoSaneDefaults.outputPrice : parsed) openAiModelInfoSaneDefaults),
} outputPrice:
e.target.value === ""
? undefined
: isNaN(parsed)
? openAiModelInfoSaneDefaults.outputPrice
: parsed,
},
},
}) })
}} }}
placeholder="e.g. 0.0002"> placeholder="e.g. 0.0002">
<span style={{ fontWeight: 500 }}>Output Price</span> <span style={{ fontWeight: 500 }}>Output Price</span>
</VSCodeTextField> </VSCodeTextField>
</div> </div>
{/* Cache Prices */}
<div style={{ display: "flex", gap: 10 }}>
<VSCodeTextField
value={apiConfiguration?.openAiCusModelInfo?.cacheWritesPrice?.toString() || openAiModelInfoSaneDefaults.cacheWritesPrice?.toString() || ""}
type="text"
style={{ width: "100%" }}
title="Cost per million tokens when writing to the prompt cache"
onChange={(e: any) => {
const parsed = parseFloat(e.target.value)
setApiConfiguration({
...apiConfiguration,
openAiCusModelInfo: {
...(apiConfiguration?.openAiCusModelInfo || openAiModelInfoSaneDefaults),
cacheWritesPrice: e.target.value === "" ? undefined : (isNaN(parsed) ? openAiModelInfoSaneDefaults.cacheWritesPrice : parsed)
}
})
}}
placeholder="e.g. 0.0001">
<span style={{ fontWeight: 500 }}>Cache Write Price</span>
</VSCodeTextField>
<VSCodeTextField
value={apiConfiguration?.openAiCusModelInfo?.cacheReadsPrice?.toString() || openAiModelInfoSaneDefaults.cacheReadsPrice?.toString() || ""}
type="text"
style={{ width: "100%" }}
title="Cost per million tokens when reading from the prompt cache"
onChange={(e: any) => {
const parsed = parseFloat(e.target.value)
setApiConfiguration({
...apiConfiguration,
openAiCusModelInfo: {
...(apiConfiguration?.openAiCusModelInfo || openAiModelInfoSaneDefaults),
cacheReadsPrice: e.target.value === "" ? undefined : (isNaN(parsed) ? openAiModelInfoSaneDefaults.cacheReadsPrice : parsed)
}
})
}}
placeholder="e.g. 0.00001">
<span style={{ fontWeight: 500 }}>Cache Read Price</span>
</VSCodeTextField>
</div>
</div> </div>
</div> </div>
</div> </div>
{/* TODO: model info here */} {/* TODO: model info here */}
<p <p
style={{ style={{
fontSize: "12px", fontSize: "12px",