feat(frontend): add credential type selector for multi-auth providers

autogpt_platform/frontend/src/components/contextual/CredentialsInput/CredentialsInput.tsx

@@ -9,6 +9,7 @@ import { cn } from "@/lib/utils";
 import { toDisplayName } from "@/providers/agent-credentials/helper";
 import { APIKeyCredentialsModal } from "./components/APIKeyCredentialsModal/APIKeyCredentialsModal";
 import { CredentialsFlatView } from "./components/CredentialsFlatView/CredentialsFlatView";
+import { CredentialTypeSelector } from "./components/CredentialTypeSelector/CredentialTypeSelector";
 import { HostScopedCredentialsModal } from "./components/HotScopedCredentialsModal/HotScopedCredentialsModal";
 import { OAuthFlowWaitingModal } from "./components/OAuthWaitingModal/OAuthWaitingModal";
 import { PasswordCredentialsModal } from "./components/PasswordCredentialsModal/PasswordCredentialsModal";
@@ -70,20 +71,25 @@ export function CredentialsInput({
     supportsOAuth2,
     supportsUserPassword,
     supportsHostScoped,
+    hasMultipleCredentialTypes,
+    supportedTypes,
     userCredentials,
     systemCredentials,
     oAuthError,
     isAPICredentialsModalOpen,
     isUserPasswordCredentialsModalOpen,
     isHostScopedCredentialsModalOpen,
+    isCredentialTypeSelectorOpen,
     isOAuth2FlowInProgress,
     oAuthPopupController,
     actionButtonText,
     setAPICredentialsModalOpen,
     setUserPasswordCredentialsModalOpen,
     setHostScopedCredentialsModalOpen,
+    setCredentialTypeSelectorOpen,
     handleActionButtonClick,
     handleCredentialSelect,
+    handleOAuthLogin,
   } = hookData;
 
   const displayName = toDisplayName(provider);
@@ -116,7 +122,28 @@ export function CredentialsInput({
 
       {!readOnly && (
         <>
-          {supportsApiKey && (
+          {hasMultipleCredentialTypes && (
+            <CredentialTypeSelector
+              schema={schema}
+              open={isCredentialTypeSelectorOpen}
+              onClose={() => setCredentialTypeSelectorOpen(false)}
+              provider={provider}
+              providerName={providerName}
+              supportedTypes={supportedTypes}
+              onCredentialsCreate={(creds) => {
+                onSelectCredential(creds);
+              }}
+              onOAuthLogin={handleOAuthLogin}
+              onOpenPasswordModal={() =>
+                setUserPasswordCredentialsModalOpen(true)
+              }
+              onOpenHostScopedModal={() =>
+                setHostScopedCredentialsModalOpen(true)
+              }
+              siblingInputs={siblingInputs}
+            />
+          )}
+          {supportsApiKey && !hasMultipleCredentialTypes && (
             <APIKeyCredentialsModal
               schema={schema}
               open={isAPICredentialsModalOpen}

autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx

@@ -1,4 +1,3 @@
-import { IconKey } from "@/components/__legacy__/ui/icons";
 import { Text } from "@/components/atoms/Text/Text";
 import {
   DropdownMenu,
@@ -9,9 +8,12 @@ import {
 import { cn } from "@/lib/utils";
 import { CaretDownIcon, DotsThreeVertical } from "@phosphor-icons/react";
 import { useEffect, useRef, useState } from "react";
+import { CredentialsType } from "@/lib/autogpt-server-api/types";
 import {
   fallbackIcon,
   getCredentialDisplayName,
+  getCredentialTypeIcon,
+  getCredentialTypeLabel,
   MASKED_KEY_LENGTH,
   providerIcons,
 } from "../../helpers";
@@ -47,6 +49,16 @@ export function CredentialRow({
   variant = "default",
 }: CredentialRowProps) {
   const ProviderIcon = providerIcons[provider] || fallbackIcon;
+  const isRealCredentialType = [
+    "api_key",
+    "oauth2",
+    "user_password",
+    "host_scoped",
+  ].includes(credential.type);
+  const credType = credential.type as CredentialsType;
+  const TypeIcon = isRealCredentialType
+    ? getCredentialTypeIcon(credType, provider)
+    : fallbackIcon;
   const isNodeVariant = variant === "node";
   const containerRef = useRef<HTMLDivElement>(null);
   const [showMaskedKey, setShowMaskedKey] = useState(true);
@@ -92,22 +104,29 @@ export function CredentialRow({
       <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-900">
         <ProviderIcon className="h-3 w-3 text-white" />
       </div>
-      <IconKey className="h-5 w-5 shrink-0 text-zinc-800" />
+      <TypeIcon className="h-5 w-5 shrink-0 text-zinc-800" />
       <div
         className={cn(
           "relative flex min-w-0 flex-1 flex-nowrap items-center gap-4",
           isNodeVariant && "overflow-hidden",
         )}
       >
-        <Text
-          variant="body"
-          className={cn(
-            "min-w-0 flex-1 tracking-tight",
-            isNodeVariant ? "truncate" : "line-clamp-1 text-ellipsis",
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <Text
+            variant="body"
+            className={cn(
+              "min-w-0 shrink tracking-tight",
+              isNodeVariant ? "truncate" : "line-clamp-1 text-ellipsis",
+            )}
+          >
+            {getCredentialDisplayName(credential, displayName)}
+          </Text>
+          {isRealCredentialType && (
+            <span className="shrink-0 rounded bg-zinc-100 px-1.5 py-0.5 text-[0.625rem] font-medium leading-tight text-zinc-500">
+              {getCredentialTypeLabel(credType)}
+            </span>
           )}
-        >
-          {getCredentialDisplayName(credential, displayName)}
-        </Text>
+        </div>
         {!(asSelectTrigger && isNodeVariant) && showMaskedKey && (
           <Text
             variant="large"