Merge pull request #1329 from RooVetGit/chat_custom_dropdown

Custom dropdowns for mode/api profile

Author: mrubens

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

@@ -15,8 +15,8 @@ import Thumbnails from "../common/Thumbnails"
 import { vscode } from "../../utils/vscode"
 import { WebviewMessage } from "../../../../src/shared/WebviewMessage"
 import { Mode, getAllModes } from "../../../../src/shared/modes"
-import { CaretIcon } from "../common/CaretIcon"
 import { convertToMentionPath } from "../../utils/path-mentions"
+import { SelectDropdown, DropdownOptionType } from "../ui"
 
 interface ChatTextAreaProps {
 	inputValue: string
@@ -541,35 +541,6 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			[updateCursorPosition],
 		)
 
-		const selectStyle = {
-			fontSize: "11px",
-			cursor: textAreaDisabled ? "not-allowed" : "pointer",
-			backgroundColor: "transparent",
-			border: "none",
-			color: "var(--vscode-foreground)",
-			opacity: textAreaDisabled ? 0.5 : 0.8,
-			outline: "none",
-			paddingLeft: "20px",
-			paddingRight: "6px",
-			WebkitAppearance: "none" as const,
-			MozAppearance: "none" as const,
-			appearance: "none" as const,
-		}
-
-		const optionStyle = {
-			backgroundColor: "var(--vscode-dropdown-background)",
-			color: "var(--vscode-dropdown-foreground)",
-		}
-
-		const caretContainerStyle = {
-			position: "absolute" as const,
-			left: 6,
-			top: "50%",
-			transform: "translateY(-45%)",
-			pointerEvents: "none" as const,
-			opacity: textAreaDisabled ? 0.5 : 0.8,
-		}
-
 		return (
 			<div
 				className="chat-text-area"
@@ -791,122 +762,110 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						marginTop: "auto",
 						paddingTop: "2px",
 					}}>
+					{/* Left side - dropdowns container */}
 					<div
 						style={{
 							display: "flex",
 							alignItems: "center",
+							gap: "4px",
+							overflow: "hidden",
+							minWidth: 0,
 						}}>
-						<div style={{ position: "relative", display: "inline-block" }}>
-							<select
+						{/* Mode selector - fixed width */}
+						<div style={{ flexShrink: 0 }}>
+							<SelectDropdown
 								value={mode}
 								disabled={textAreaDisabled}
 								title="Select mode for interaction"
-								onChange={(e) => {
-									const value = e.target.value
-									if (value === "prompts-action") {
-										window.postMessage({ type: "action", action: "promptsButtonClicked" })
-										return
-									}
+								options={[
+									// Add the shortcut text as a disabled option at the top
+									{
+										value: "shortcut",
+										label: modeShortcutText,
+										disabled: true,
+										type: DropdownOptionType.SHORTCUT,
+									},
+									// Add all modes
+									...getAllModes(customModes).map((mode) => ({
+										value: mode.slug,
+										label: mode.name,
+										type: DropdownOptionType.ITEM,
+									})),
+									// Add separator
+									{
+										value: "sep-1",
+										label: "Separator",
+										type: DropdownOptionType.SEPARATOR,
+									},
+									// Add Edit option
+									{
+										value: "promptsButtonClicked",
+										label: "Edit...",
+										type: DropdownOptionType.ACTION,
+									},
+								]}
+								onChange={(value) => {
 									setMode(value as Mode)
 									vscode.postMessage({
 										type: "mode",
 										text: value,
 									})
 								}}
-								style={{
-									...selectStyle,
-									minWidth: "70px",
-									flex: "0 0 auto",
-								}}>
-								<option
-									disabled
-									style={{ ...optionStyle, fontStyle: "italic", opacity: 0.6, padding: "2px 8px" }}>
-									{modeShortcutText}
-								</option>
-								{getAllModes(customModes).map((mode) => (
-									<option key={mode.slug} value={mode.slug} style={{ ...optionStyle }}>
-										{mode.name}
-									</option>
-								))}
-								<option
-									disabled
-									style={{
-										borderTop: "1px solid var(--vscode-dropdown-border)",
-										...optionStyle,
-									}}>
-									────
-								</option>
-								<option value="prompts-action" style={{ ...optionStyle }}>
-									Edit...
-								</option>
-							</select>
-							<div style={caretContainerStyle}>
-								<CaretIcon />
-							</div>
+								shortcutText={modeShortcutText}
+								triggerClassName="w-full"
+							/>
 						</div>
 
+						{/* API configuration selector - flexible width */}
 						<div
 							style={{
-								position: "relative",
-								display: "inline-block",
 								flex: "1 1 auto",
 								minWidth: 0,
-								maxWidth: "150px",
 								overflow: "hidden",
 							}}>
-							<select
+							<SelectDropdown
 								value={currentApiConfigName || ""}
 								disabled={textAreaDisabled}
 								title="Select API configuration"
-								onChange={(e) => {
-									const value = e.target.value
-									if (value === "settings-action") {
-										window.postMessage({ type: "action", action: "settingsButtonClicked" })
-										return
-									}
+								options={[
+									// Add all API configurations
+									...(listApiConfigMeta || []).map((config) => ({
+										value: config.name,
+										label: config.name,
+										type: DropdownOptionType.ITEM,
+									})),
+									// Add separator
+									{
+										value: "sep-2",
+										label: "Separator",
+										type: DropdownOptionType.SEPARATOR,
+									},
+									// Add Edit option
+									{
+										value: "settingsButtonClicked",
+										label: "Edit...",
+										type: DropdownOptionType.ACTION,
+									},
+								]}
+								onChange={(value) => {
 									vscode.postMessage({
 										type: "loadApiConfiguration",
 										text: value,
 									})
 								}}
-								style={{
-									...selectStyle,
-									width: "100%",
-									textOverflow: "ellipsis",
-								}}>
-								{(listApiConfigMeta || []).map((config) => (
-									<option
-										key={config.name}
-										value={config.name}
-										style={{
-											...optionStyle,
-										}}>
-										{config.name}
-									</option>
-								))}
-								<option
-									disabled
-									style={{
-										borderTop: "1px solid var(--vscode-dropdown-border)",
-										...optionStyle,
-									}}>
-									────
-								</option>
-								<option value="settings-action" style={{ ...optionStyle }}>
-									Edit...
-								</option>
-							</select>
-							<div style={caretContainerStyle}>
-								<CaretIcon />
-							</div>
+								contentClassName="max-h-[300px] overflow-y-auto"
+								triggerClassName="w-full text-ellipsis overflow-hidden"
+							/>
 						</div>
 					</div>
 
+					{/* Right side - action buttons */}
 					<div
 						style={{
 							display: "flex",
 							alignItems: "center",
-							gap: "12px",
+							gap: "8px",
+							flexShrink: 0,
 						}}>
 						<div style={{ display: "flex", alignItems: "center" }}>
 							{isEnhancingPrompt ? (
@@ -916,7 +875,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 										color: "var(--vscode-input-foreground)",
 										opacity: 0.5,
 										fontSize: 16.5,
-										marginRight: 10,
+										marginRight: 6,
 									}}
 								/>
 							) : (