feat: add pinning functionality for API configurations

Added the ability to pin/unpin API configurations, enabling prioritized appearance in dropdown menus.
- modified state management to support storing pinned configurations persistently.
- Updated UI components to display and toggle pin states
- Adjusted backend handling for syncing pinned configuration states across sessions.

Author: jc-systemslogiq

src/core/webview/ClineProvider.ts

@@ -1675,6 +1675,25 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 						await this.updateGlobalState("maxReadFileLine", message.value)
 						await this.postStateToWebview()
 						break
+					case "toggleApiConfigPin":
+						if (message.text) {
+							const currentPinned = ((await this.getGlobalState("pinnedApiConfigs")) || {}) as Record<
+								string,
+								boolean
+							>
+							const updatedPinned: Record<string, boolean> = { ...currentPinned }
+
+							// Toggle the pinned state
+							if (currentPinned[message.text]) {
+								delete updatedPinned[message.text]
+							} else {
+								updatedPinned[message.text] = true
+							}
+
+							await this.updateGlobalState("pinnedApiConfigs", updatedPinned)
+							await this.postStateToWebview()
+						}
+						break
 					case "enhancementApiConfigId":
 						await this.updateGlobalState("enhancementApiConfigId", message.text)
 						await this.postStateToWebview()
@@ -2610,6 +2629,9 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			language,
 			renderContext: this.renderContext,
 			maxReadFileLine: maxReadFileLine ?? 500,
+			pinnedApiConfigs:
+				((await this.getGlobalState("pinnedApiConfigs")) as Record<string, boolean>) ??
+				({} as Record<string, boolean>),
 		}
 	}
 

src/exports/roo-code.d.ts

@@ -259,6 +259,7 @@ export type GlobalStateKey =
 	| "language"
 	| "maxReadFileLine"
 	| "fakeAi"
+	| "pinnedApiConfigs" // Record of API config names that should be pinned to the top of the API provides dropdown
 
 export type ConfigurationKey = GlobalStateKey | SecretKey
 

src/shared/ExtensionMessage.ts

@@ -58,6 +58,7 @@ export interface ExtensionMessage {
 		| "ttsStop"
 		| "maxReadFileLine"
 		| "fileSearchResults"
+		| "toggleApiConfigPin"
 	text?: string
 	action?:
 		| "chatButtonClicked"
@@ -168,6 +169,7 @@ export interface ExtensionState {
 	machineId?: string
 	showRooIgnoredFiles: boolean // Whether to show .rooignore'd files in listings
 	renderContext: "sidebar" | "editor"
+	pinnedApiConfigs?: Record<string, boolean> // Map of API config names to pinned state
 	maxReadFileLine: number // Maximum number of lines to read from a file before truncating
 }
 

src/shared/WebviewMessage.ts

@@ -117,6 +117,7 @@ export interface WebviewMessage {
 		| "language"
 		| "maxReadFileLine"
 		| "searchFiles"
+		| "toggleApiConfigPin"
 	text?: string
 	disabled?: boolean
 	askResponse?: ClineAskResponse

src/shared/globalState.ts

@@ -126,6 +126,7 @@ export const GLOBAL_STATE_KEYS = [
 	"maxWorkspaceFiles",
 	"maxReadFileLine",
 	"fakeAi",
+	"pinnedApiConfigs",
 ] as const
 
 export const PASS_THROUGH_STATE_KEYS = ["taskHistory"] as const

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -24,7 +24,7 @@ import { SelectDropdown, DropdownOptionType, Button } from "@/components/ui"
 import Thumbnails from "../common/Thumbnails"
 import { MAX_IMAGES_PER_MESSAGE } from "./ChatView"
 import ContextMenu from "./ContextMenu"
-import { VolumeX } from "lucide-react"
+import { VolumeX, Pin, Check } from "lucide-react"
 import { IconButton } from "./IconButton"
 import { cn } from "@/lib/utils"
 
@@ -64,7 +64,16 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 		ref,
 	) => {
 		const { t } = useAppTranslation()
-		const { filePaths, openedTabs, currentApiConfigName, listApiConfigMeta, customModes, cwd } = useExtensionState()
+		const {
+			filePaths,
+			openedTabs,
+			currentApiConfigName,
+			listApiConfigMeta,
+			customModes,
+			cwd,
+			pinnedApiConfigs,
+			togglePinnedApiConfig,
+		} = useExtensionState()
 		const [gitCommits, setGitCommits] = useState<any[]>([])
 		const [showDropdown, setShowDropdown] = useState(false)
 		const [fileSearchResults, setFileSearchResults] = useState<SearchResult[]>([])
@@ -959,11 +968,37 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								disabled={textAreaDisabled}
 								title={t("chat:selectApiConfig")}
 								options={[
-									...(listApiConfigMeta || []).map((config) => ({
-										value: config.name,
-										label: config.name,
-										type: DropdownOptionType.ITEM,
-									})),
+									// Pinned items first
+									...(listApiConfigMeta || [])
+										.filter((config) => pinnedApiConfigs && pinnedApiConfigs[config.name])
+										.map((config) => ({
+											value: config.name,
+											label: config.name,
+											type: DropdownOptionType.ITEM,
+											pinned: true,
+										})),
+									// If we have pinned items and unpinned items, add a separator
+									...(pinnedApiConfigs &&
+									Object.keys(pinnedApiConfigs).length > 0 &&
+									(listApiConfigMeta || []).some((config) => !pinnedApiConfigs[config.name])
+										? [
+												{
+													value: "sep-pinned",
+													label: t("chat:separator"),
+													type: DropdownOptionType.SEPARATOR,
+												},
+											]
+										: []),
+									// Unpinned items sorted alphabetically
+									...(listApiConfigMeta || [])
+										.filter((config) => !pinnedApiConfigs || !pinnedApiConfigs[config.name])
+										.map((config) => ({
+											value: config.name,
+											label: config.name,
+											type: DropdownOptionType.ITEM,
+											pinned: false,
+										}))
+										.sort((a, b) => a.label.localeCompare(b.label)),
 									{
 										value: "sep-2",
 										label: t("chat:separator"),
@@ -978,6 +1013,38 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								onChange={(value) => vscode.postMessage({ type: "loadApiConfiguration", text: value })}
 								contentClassName="max-h-[300px] overflow-y-auto"
 								triggerClassName="w-full text-ellipsis overflow-hidden"
+								renderItem={(option) => {
+									if (option.type !== DropdownOptionType.ITEM) {
+										return option.label
+									}
+
+									return (
+										<div className="flex items-center justify-between w-full">
+											<span>{option.label}</span>
+											<div
+												className={cn(
+													"ml-2 p-1 rounded-sm cursor-pointer hover:bg-[rgba(255,255,255,0.1)]",
+													option.pinned
+														? "text-vscode-focusBorder"
+														: "text-vscode-descriptionForeground opacity-50 hover:opacity-100",
+												)}
+												onClick={(e) => {
+													e.stopPropagation()
+													togglePinnedApiConfig(option.value)
+													vscode.postMessage({
+														type: "toggleApiConfigPin",
+														text: option.value,
+													})
+												}}
+												title={option.pinned ? t("chat:unpin") : t("chat:pin")}>
+												<Pin className="size-3" />
+											</div>
+											{option.value === currentApiConfigName && (
+												<Check className="size-4 p-0.5 ml-1" />
+											)}
+										</div>
+									)
+								}}
 							/>
 						</div>
 					</div>

webview-ui/src/components/ui/select-dropdown.tsx

@@ -25,6 +25,7 @@ export interface DropdownOption {
 	label: string
 	disabled?: boolean
 	type?: DropdownOptionType
+	pinned?: boolean
 }
 
 export interface SelectDropdownProps {
@@ -39,6 +40,7 @@ export interface SelectDropdownProps {
 	align?: "start" | "center" | "end"
 	placeholder?: string
 	shortcutText?: string
+	renderItem?: (option: DropdownOption) => React.ReactNode
 }
 
 export const SelectDropdown = React.forwardRef<React.ElementRef<typeof DropdownMenuTrigger>, SelectDropdownProps>(
@@ -55,6 +57,7 @@ export const SelectDropdown = React.forwardRef<React.ElementRef<typeof DropdownM
 			align = "start",
 			placeholder = "",
 			shortcutText = "",
+			renderItem,
 		},
 		ref,
 	) => {
@@ -121,11 +124,17 @@ export const SelectDropdown = React.forwardRef<React.ElementRef<typeof DropdownM
 								key={`item-${option.value}`}
 								disabled={option.disabled}
 								onClick={() => handleSelect(option)}>
-								{option.label}
-								{option.value === value && (
-									<DropdownMenuShortcut>
-										<Check className="size-4 p-0.5" />
-									</DropdownMenuShortcut>
+								{renderItem ? (
+									renderItem(option)
+								) : (
+									<>
+										{option.label}
+										{option.value === value && (
+											<DropdownMenuShortcut>
+												<Check className="size-4 p-0.5" />
+											</DropdownMenuShortcut>
+										)}
+									</>
 								)}
 							</DropdownMenuItem>
 						)

webview-ui/src/context/ExtensionStateContext.tsx

@@ -81,6 +81,9 @@ export interface ExtensionStateContextType extends ExtensionState {
 	maxReadFileLine: number
 	setMaxReadFileLine: (value: number) => void
 	machineId?: string
+	pinnedApiConfigs?: Record<string, boolean>
+	setPinnedApiConfigs: (value: Record<string, boolean>) => void
+	togglePinnedApiConfig: (configName: string) => void
 }
 
 export const ExtensionStateContext = createContext<ExtensionStateContextType | undefined>(undefined)
@@ -155,6 +158,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		showRooIgnoredFiles: true, // Default to showing .rooignore'd files with lock symbol (current behavior).
 		renderContext: "sidebar",
 		maxReadFileLine: 500, // Default max read file line limit
+		pinnedApiConfigs: {}, // Empty object for pinned API configs
 	})
 
 	const [didHydrateState, setDidHydrateState] = useState(false)
@@ -221,6 +225,27 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 					setListApiConfigMeta(message.listApiConfig ?? [])
 					break
 				}
+				case "toggleApiConfigPin": {
+					if (message.text) {
+						setState((prevState) => {
+							const currentPinned = prevState.pinnedApiConfigs || {}
+							const newPinned = { ...currentPinned }
+
+							// Toggle the pinned state
+							if (currentPinned[message.text!]) {
+								delete newPinned[message.text!]
+							} else {
+								newPinned[message.text!] = true
+							}
+
+							return {
+								...prevState,
+								pinnedApiConfigs: newPinned,
+							}
+						})
+					}
+					break
+				}
 			}
 		},
 		[setListApiConfigMeta],
@@ -307,6 +332,22 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		setShowRooIgnoredFiles: (value) => setState((prevState) => ({ ...prevState, showRooIgnoredFiles: value })),
 		setRemoteBrowserEnabled: (value) => setState((prevState) => ({ ...prevState, remoteBrowserEnabled: value })),
 		setMaxReadFileLine: (value) => setState((prevState) => ({ ...prevState, maxReadFileLine: value })),
+		setPinnedApiConfigs: (value) => setState((prevState) => ({ ...prevState, pinnedApiConfigs: value })),
+		togglePinnedApiConfig: (configName) =>
+			setState((prevState) => {
+				const currentPinned = prevState.pinnedApiConfigs || {}
+				const newPinned = {
+					...currentPinned,
+					[configName]: !currentPinned[configName],
+				}
+
+				// If the config is now unpinned, remove it from the object
+				if (!newPinned[configName]) {
+					delete newPinned[configName]
+				}
+
+				return { ...prevState, pinnedApiConfigs: newPinned }
+			}),
 	}
 
 	return <ExtensionStateContext.Provider value={contextValue}>{children}</ExtensionStateContext.Provider>