From dd9c52644785d64b02acd62586fb03e30eb78dd3 Mon Sep 17 00:00:00 2001
From: CodingOnStar <hanxujiang@dify.com>
Date: Thu, 5 Mar 2026 16:45:37 +0800
Subject: [PATCH] refactor: update model-selector popup-item to support
 collapsible items and improve icon color handling

---
 .../solid/general/arrow-down-round-fill.svg   |   2 +-
 .../model-selector/popup-item.tsx             | 170 +++++++++---------
 .../provider-added-card/quota-panel.tsx       |   4 +-
 web/eslint-suppressions.json                  |   6 -
 4 files changed, 90 insertions(+), 92 deletions(-)

diff --git a/web/app/components/base/icons/assets/vender/solid/general/arrow-down-round-fill.svg b/web/app/components/base/icons/assets/vender/solid/general/arrow-down-round-fill.svg
index 9566fcc0c3..ac9908a85a 100644
--- a/web/app/components/base/icons/assets/vender/solid/general/arrow-down-round-fill.svg
+++ b/web/app/components/base/icons/assets/vender/solid/general/arrow-down-round-fill.svg
@@ -1,5 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="arrow-down-round-fill">
-<path id="Vector" d="M6.02913 6.23572C5.08582 6.23572 4.56482 7.33027 5.15967 8.06239L7.13093 10.4885C7.57922 11.0403 8.42149 11.0403 8.86986 10.4885L10.8411 8.06239C11.4359 7.33027 10.9149 6.23572 9.97158 6.23572H6.02913Z" fill="#101828"/>
+<path id="Vector" d="M6.02913 6.23572C5.08582 6.23572 4.56482 7.33027 5.15967 8.06239L7.13093 10.4885C7.57922 11.0403 8.42149 11.0403 8.86986 10.4885L10.8411 8.06239C11.4359 7.33027 10.9149 6.23572 9.97158 6.23572H6.02913Z" fill="currentColor"/>
 </g>
 </svg>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
index 56c589e7bd..25415fe0d9 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
@@ -4,6 +4,7 @@ import type {
   Model,
   ModelItem,
 } from '../declarations'
+import { useState } from 'react'
 
 import { useTranslation } from 'react-i18next'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
@@ -41,6 +42,7 @@ const PopupItem: FC<PopupItemProps> = ({
   model,
   onSelect,
 }) => {
+  const [collapsed, setCollapsed] = useState(false)
   const { t } = useTranslation()
   const language = useLanguage()
   const { setShowModelModal } = useModalContext()
@@ -73,99 +75,101 @@ const PopupItem: FC<PopupItemProps> = ({
 
   return (
     <div className="mb-1">
-      <div className="flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary">
+      <div
+        className="flex h-[22px] cursor-pointer items-center px-3 text-xs font-medium text-text-tertiary"
+        onClick={() => setCollapsed(prev => !prev)}
+      >
         {model.label[language] || model.label.en_US}
+        <span className={cn('i-custom-vender-solid-general-arrow-down-round-fill h-4 w-4 text-text-quaternary', collapsed && '-rotate-90')} />
       </div>
-      {
-        model.models.map(modelItem => (
-          <Tooltip
-            key={modelItem.model}
-            position="right"
-            popupClassName="p-3 !w-[206px] bg-components-panel-bg-blur backdrop-blur-sm border-[0.5px] border-components-panel-border rounded-xl"
-            popupContent={(
-              <div className="flex flex-col gap-1">
-                <div className="flex flex-col items-start gap-2">
-                  <ModelIcon
-                    className={cn('h-5 w-5 shrink-0')}
-                    provider={model}
-                    modelName={modelItem.model}
-                  />
-                  <div className="system-md-medium text-wrap break-words text-text-primary">{modelItem.label[language] || modelItem.label.en_US}</div>
-                </div>
-                {/* {currentProvider?.description && (
-                  <div className='text-text-tertiary system-xs-regular'>{currentProvider?.description?.[language] || currentProvider?.description?.en_US}</div>
-                )} */}
-                <div className="flex flex-wrap gap-1">
-                  {!!modelItem.model_type && (
-                    <ModelBadge>
-                      {modelTypeFormat(modelItem.model_type)}
-                    </ModelBadge>
-                  )}
-                  {!!modelItem.model_properties.mode && (
-                    <ModelBadge>
-                      {(modelItem.model_properties.mode as string).toLocaleUpperCase()}
-                    </ModelBadge>
-                  )}
-                  {!!modelItem.model_properties.context_size && (
-                    <ModelBadge>
-                      {sizeFormat(modelItem.model_properties.context_size as number)}
-                    </ModelBadge>
-                  )}
-                </div>
-                {[ModelTypeEnum.textGeneration, ModelTypeEnum.textEmbedding, ModelTypeEnum.rerank].includes(modelItem.model_type as ModelTypeEnum)
-                  && modelItem.features?.some(feature => [ModelFeatureEnum.vision, ModelFeatureEnum.audio, ModelFeatureEnum.video, ModelFeatureEnum.document].includes(feature))
-                  && (
-                    <div className="pt-2">
-                      <div className="system-2xs-medium-uppercase mb-1 text-text-tertiary">{t('model.capabilities', { ns: 'common' })}</div>
-                      <div className="flex flex-wrap gap-1">
-                        {modelItem.features?.map(feature => (
-                          <FeatureIcon
-                            key={feature}
-                            feature={feature}
-                            showFeaturesLabel
-                          />
-                        ))}
-                      </div>
-                    </div>
-                  )}
-              </div>
-            )}
-          >
-            <div
-              key={modelItem.model}
-              className={cn('group relative flex h-8 items-center gap-1 rounded-lg px-3 py-1.5', modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-state-base-hover' : 'cursor-not-allowed hover:bg-state-base-hover-alt')}
-              onClick={() => handleSelect(model.provider, modelItem)}
-            >
-              <div className="flex items-center gap-2">
+      {!collapsed && model.models.map(modelItem => (
+        <Tooltip
+          key={modelItem.model}
+          position="right"
+          popupClassName="p-3 !w-[206px] bg-components-panel-bg-blur backdrop-blur-sm border-[0.5px] border-components-panel-border rounded-xl"
+          popupContent={(
+            <div className="flex flex-col gap-1">
+              <div className="flex flex-col items-start gap-2">
                 <ModelIcon
                   className={cn('h-5 w-5 shrink-0')}
                   provider={model}
                   modelName={modelItem.model}
                 />
-                <ModelName
-                  className={cn('system-sm-medium text-text-secondary', modelItem.status !== ModelStatusEnum.active && 'opacity-60')}
-                  modelItem={modelItem}
-                />
+                <div className="text-wrap break-words text-text-primary system-md-medium">{modelItem.label[language] || modelItem.label.en_US}</div>
               </div>
-              {
-                defaultModel?.model === modelItem.model && defaultModel.provider === currentProvider.provider && (
-                  <Check className="h-4 w-4 shrink-0 text-text-accent" />
-                )
-              }
-              {
-                modelItem.status === ModelStatusEnum.noConfigure && (
-                  <div
-                    className="hidden cursor-pointer text-xs font-medium text-text-accent group-hover:block"
-                    onClick={handleOpenModelModal}
-                  >
-                    {t('operation.add', { ns: 'common' }).toLocaleUpperCase()}
+              {/* {currentProvider?.description && (
+                <div className='text-text-tertiary system-xs-regular'>{currentProvider?.description?.[language] || currentProvider?.description?.en_US}</div>
+              )} */}
+              <div className="flex flex-wrap gap-1">
+                {!!modelItem.model_type && (
+                  <ModelBadge>
+                    {modelTypeFormat(modelItem.model_type)}
+                  </ModelBadge>
+                )}
+                {!!modelItem.model_properties.mode && (
+                  <ModelBadge>
+                    {(modelItem.model_properties.mode as string).toLocaleUpperCase()}
+                  </ModelBadge>
+                )}
+                {!!modelItem.model_properties.context_size && (
+                  <ModelBadge>
+                    {sizeFormat(modelItem.model_properties.context_size as number)}
+                  </ModelBadge>
+                )}
+              </div>
+              {[ModelTypeEnum.textGeneration, ModelTypeEnum.textEmbedding, ModelTypeEnum.rerank].includes(modelItem.model_type as ModelTypeEnum)
+                && modelItem.features?.some(feature => [ModelFeatureEnum.vision, ModelFeatureEnum.audio, ModelFeatureEnum.video, ModelFeatureEnum.document].includes(feature))
+                && (
+                  <div className="pt-2">
+                    <div className="mb-1 text-text-tertiary system-2xs-medium-uppercase">{t('model.capabilities', { ns: 'common' })}</div>
+                    <div className="flex flex-wrap gap-1">
+                      {modelItem.features?.map(feature => (
+                        <FeatureIcon
+                          key={feature}
+                          feature={feature}
+                          showFeaturesLabel
+                        />
+                      ))}
+                    </div>
                   </div>
-                )
-              }
+                )}
             </div>
-          </Tooltip>
-        ))
-      }
+          )}
+        >
+          <div
+            key={modelItem.model}
+            className={cn('group relative flex h-8 items-center gap-1 rounded-lg px-3 py-1.5', modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-state-base-hover' : 'cursor-not-allowed hover:bg-state-base-hover-alt')}
+            onClick={() => handleSelect(model.provider, modelItem)}
+          >
+            <div className="flex items-center gap-2">
+              <ModelIcon
+                className={cn('h-5 w-5 shrink-0')}
+                provider={model}
+                modelName={modelItem.model}
+              />
+              <ModelName
+                className={cn('text-text-secondary system-sm-medium', modelItem.status !== ModelStatusEnum.active && 'opacity-60')}
+                modelItem={modelItem}
+              />
+            </div>
+            {
+              defaultModel?.model === modelItem.model && defaultModel.provider === currentProvider.provider && (
+                <Check className="h-4 w-4 shrink-0 text-text-accent" />
+              )
+            }
+            {
+              modelItem.status === ModelStatusEnum.noConfigure && (
+                <div
+                  className="hidden cursor-pointer text-xs font-medium text-text-accent group-hover:block"
+                  onClick={handleOpenModelModal}
+                >
+                  {t('operation.add', { ns: 'common' }).toLocaleUpperCase()}
+                </div>
+              )
+            }
+          </div>
+        </Tooltip>
+      ))}
     </div>
   )
 }
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
index d44c201e0e..36a15b2a42 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
@@ -108,13 +108,13 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
 
   return (
     <div className={cn('my-2 min-w-[72px] shrink-0 rounded-xl border-[0.5px] pb-2.5 pl-4 pr-2.5 pt-3 shadow-xs', credits <= 0 ? 'border-state-destructive-border hover:bg-state-destructive-hover' : 'border-components-panel-border bg-third-party-model-bg-default')}>
-      <div className="system-xs-medium-uppercase mb-2 flex h-4 items-center text-text-tertiary">
+      <div className="mb-2 flex h-4 items-center text-text-tertiary system-xs-medium-uppercase">
         {t('modelProvider.quota', { ns: 'common' })}
         <Tooltip popupContent={t('modelProvider.card.tip', { ns: 'common', modelNames: trial_models.map(key => modelNameMap[key as keyof typeof modelNameMap]).filter(Boolean).join(', ') })} />
       </div>
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-1 text-xs text-text-tertiary">
-          <span className="system-md-semibold-uppercase mr-0.5 text-text-secondary">{formatNumber(credits)}</span>
+          <span className="mr-0.5 text-text-secondary system-md-semibold-uppercase">{formatNumber(credits)}</span>
           <span>{t('modelProvider.credits', { ns: 'common' })}</span>
           {currentWorkspace.next_credit_reset_date
             ? (
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 0880084320..6bf15e5788 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -4899,9 +4899,6 @@
   "app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/header/account-setting/model-provider-page/model-selector/popup.tsx": {
@@ -4978,9 +4975,6 @@
   "app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/header/account-setting/model-provider-page/provider-icon/index.tsx": {