first commit

ui/app/workspace/providers/views/addProviderDropdown.tsx

@@ -0,0 +1,73 @@
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdownMenu";
+import { ProviderIconType, RenderProviderIcon } from "@/lib/constants/icons";
+import { ProviderLabels } from "@/lib/constants/logs";
+import { PlusIcon, Settings2Icon } from "lucide-react";
+
+export type ProviderOption = { name: string };
+
+interface AddProviderDropdownProps {
+	/** Provider names that are already in the sidebar (configured or added) */
+	existingInSidebar: Set<string>;
+	/** All known provider options to show (e.g. from ProviderNames / allProviders) */
+	knownProviders: ProviderOption[];
+	onSelectKnownProvider: (name: string) => void;
+	onAddCustomProvider: () => void;
+	disabled?: boolean;
+	/** Optional: use compact trigger for empty state */
+	variant?: "default" | "empty";
+}
+
+export function AddProviderDropdown({
+	existingInSidebar,
+	knownProviders,
+	onSelectKnownProvider,
+	onAddCustomProvider,
+	disabled = false,
+	variant = "default",
+}: AddProviderDropdownProps) {
+	const availableKnown = knownProviders.filter((p) => !existingInSidebar.has(p.name));
+	const hasKnown = availableKnown.length > 0;
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button
+					variant="outline"
+					size={variant === "empty" ? "default" : "sm"}
+					data-testid="add-provider-btn"
+					className={variant === "empty" ? "" : "w-full justify-start"}
+					aria-label="Add new provider"
+					disabled={disabled}
+				>
+					<PlusIcon className="h-4 w-4" />
+					{variant === "empty" ? <span>Add provider</span> : <div className="text-xs">Add New Provider</div>}
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent
+				align="start"
+				className="custom-scrollbar max-h-[min(70vh,24rem)] min-w-[var(--radix-dropdown-menu-trigger-width)] overflow-y-auto"
+				data-testid="add-provider-dropdown"
+			>
+				{availableKnown.map((p) => (
+					<DropdownMenuItem key={p.name} data-testid={`add-provider-option-${p.name}`} onSelect={() => onSelectKnownProvider(p.name)}>
+						<RenderProviderIcon provider={p.name as ProviderIconType} size="sm" className="h-4 w-4" />
+						<span>{ProviderLabels[p.name as keyof typeof ProviderLabels] ?? p.name}</span>
+					</DropdownMenuItem>
+				))}
+				{hasKnown && <DropdownMenuSeparator />}
+				{/* Add New Provider > Custom provider... — used by E2E (add-provider-option-custom) */}
+				<DropdownMenuItem data-testid="add-provider-option-custom" onSelect={onAddCustomProvider}>
+					<Settings2Icon className="h-4 w-4" />
+					<span>Custom provider...</span>
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}