feat: add multi model credentials (#24451)

Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

web/app/components/plugins/plugin-auth/authorized-in-node.tsx

@@ -35,10 +35,13 @@ const AuthorizedInNode = ({
     credentials,
     disabled,
     invalidPluginCredentialInfo,
+    notAllowCustomCredential,
   } = usePluginAuth(pluginPayload, isOpen || !!credentialId)
   const renderTrigger = useCallback((open?: boolean) => {
     let label = ''
     let removed = false
+    let unavailable = false
+    let color = 'green'
     if (!credentialId) {
       label = t('plugin.auth.workspaceDefault')
     }
@@ -46,6 +49,12 @@ const AuthorizedInNode = ({
       const credential = credentials.find(c => c.id === credentialId)
       label = credential ? credential.name : t('plugin.auth.authRemoved')
       removed = !credential
+      unavailable = !!credential?.not_allowed_to_use && !credential?.from_enterprise
+
+      if (removed)
+        color = 'red'
+      else if (unavailable)
+        color = 'gray'
     }
     return (
       <Button
@@ -57,9 +66,12 @@ const AuthorizedInNode = ({
       >
         <Indicator
           className='mr-1.5'
-          color={removed ? 'red' : 'green'}
+          color={color as any}
         />
         {label}
+        {
+          unavailable && t('plugin.auth.unavailable')
+        }
         <RiArrowDownSLine
           className={cn(
             'h-3.5 w-3.5 text-components-button-ghost-text',
@@ -106,6 +118,7 @@ const AuthorizedInNode = ({
       showItemSelectedIcon
       selectedCredentialId={credentialId || '__workspace_default__'}
       onUpdate={invalidPluginCredentialInfo}
+      notAllowCustomCredential={notAllowCustomCredential}
     />
   )
 }