From 90d6ab7e2e2ecbf126a5da8f574295896aca12e9 Mon Sep 17 00:00:00 2001
From: Matt Rubens <mrubens@users.noreply.github.com>
Date: Sat, 25 Jan 2025 22:16:05 -0500
Subject: [PATCH] Add configuration picker on the modes page

---
 .changeset/healthy-oranges-drum.md            |  5 +++
 .../src/components/prompts/PromptsView.tsx    | 31 +++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 .changeset/healthy-oranges-drum.md

diff --git a/.changeset/healthy-oranges-drum.md b/.changeset/healthy-oranges-drum.md
new file mode 100644
index 0000000..1305bc4
--- /dev/null
+++ b/.changeset/healthy-oranges-drum.md
@@ -0,0 +1,5 @@
+---
+"roo-cline": patch
+---
+
+Add a dropdown to select the API configuration for a mode in the Prompts tab
diff --git a/webview-ui/src/components/prompts/PromptsView.tsx b/webview-ui/src/components/prompts/PromptsView.tsx
index 56f4809..6827878 100644
--- a/webview-ui/src/components/prompts/PromptsView.tsx
+++ b/webview-ui/src/components/prompts/PromptsView.tsx
@@ -43,6 +43,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 		customModePrompts,
 		customSupportPrompts,
 		listApiConfigMeta,
+		currentApiConfigName,
 		enhancementApiConfigId,
 		setEnhancementApiConfigId,
 		mode,
@@ -609,6 +610,36 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 					</div>
 					{/* Mode settings */}
 					<>
+						<div style={{ marginBottom: "12px" }}>
+							<div style={{ fontWeight: "bold", marginBottom: "4px" }}>API Configuration</div>
+							<div style={{ marginBottom: "8px" }}>
+								<VSCodeDropdown
+									value={currentApiConfigName || ""}
+									onChange={(e: any) => {
+										const value = e.detail?.target?.value || e.target?.value
+										vscode.postMessage({
+											type: "loadApiConfiguration",
+											text: value,
+										})
+									}}
+									style={{ width: "100%" }}>
+									{(listApiConfigMeta || []).map((config) => (
+										<VSCodeOption key={config.id} value={config.name}>
+											{config.name}
+										</VSCodeOption>
+									))}
+								</VSCodeDropdown>
+								<div
+									style={{
+										fontSize: "12px",
+										marginTop: "5px",
+										color: "var(--vscode-descriptionForeground)",
+									}}>
+									Select which API configuration to use for this mode
+								</div>
+							</div>
+						</div>
+
 						{/* Show tools for all modes */}
 						<div style={{ marginBottom: "16px" }}>
 							<div