From 9295739dc0376119caf96cff387cbfaeff161b3e Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 21 Mar 2024 17:45:34 +0800
Subject: [PATCH] fix: model trigger ui

---
 .../model-parameter-modal/index.tsx           |  3 +++
 .../model-parameter-modal/trigger.tsx         | 21 ++++++++++++-------
 .../components/workflow/nodes/llm/panel.tsx   |  1 +
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
index 79e00170fa..47ee156078 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
@@ -48,6 +48,7 @@ export type ModelParameterModalProps = {
   onDebugWithMultipleModelChange?: () => void
   renderTrigger?: (v: TriggerProps) => ReactNode
   readonly?: boolean
+  isInWorkflow?: boolean
 }
 const stopParameerRule: ModelParameterRule = {
   default: [],
@@ -83,6 +84,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
   onDebugWithMultipleModelChange,
   renderTrigger,
   readonly,
+  isInWorkflow,
 }) => {
   const { t } = useTranslation()
   const { hasSettedApiKey } = useProviderContext()
@@ -198,6 +200,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
               : (
                 <Trigger
                   disabled={disabled}
+                  isInWorkflow={isInWorkflow}
                   modelDisabled={modelDisabled}
                   hasDeprecated={hasDeprecated}
                   currentProvider={currentProvider}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
index c7788a014a..949fb33a99 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
 import type {
   Model,
   ModelItem,
@@ -13,6 +14,7 @@ import { useProviderContext } from '@/context/provider-context'
 import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
+import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 
 export type TriggerProps = {
   open?: boolean
@@ -23,6 +25,7 @@ export type TriggerProps = {
   modelId?: string
   hasDeprecated?: boolean
   modelDisabled?: boolean
+  isInWorkflow?: boolean
 }
 const Trigger: FC<TriggerProps> = ({
   disabled,
@@ -32,6 +35,7 @@ const Trigger: FC<TriggerProps> = ({
   modelId,
   hasDeprecated,
   modelDisabled,
+  isInWorkflow,
 }) => {
   const { t } = useTranslation()
   const language = useLanguage()
@@ -39,10 +43,12 @@ const Trigger: FC<TriggerProps> = ({
 
   return (
     <div
-      className={`
-        flex items-center px-2 h-8 rounded-lg border cursor-pointer hover:border-[1.5px]
-        ${disabled ? 'border-[#F79009] bg-[#FFFAEB]' : 'border-[#444CE7] bg-primary-50'}
-      `}
+      className={cn(
+        'relative flex items-center px-2 h-8 rounded-lg  cursor-pointer',
+        !isInWorkflow && 'border hover:border-[1.5px]',
+        !isInWorkflow && (disabled ? 'border-[#F79009] bg-[#FFFAEB]' : 'border-[#444CE7] bg-primary-50'),
+        isInWorkflow && 'bg-gray-100 border border-gray-100  hover:border-gray-200',
+      )}
     >
       {
         currentProvider && (
@@ -68,9 +74,9 @@ const Trigger: FC<TriggerProps> = ({
             className='mr-1.5 text-gray-900'
             modelItem={currentModel}
             showMode
-            modeClassName='!text-[#444CE7] !border-[#A4BCFD]'
+            modeClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
             showFeatures
-            featuresClassName='!text-[#444CE7] !border-[#A4BCFD]'
+            featuresClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
           />
         )
       }
@@ -97,9 +103,10 @@ const Trigger: FC<TriggerProps> = ({
             </TooltipPlus>
           )
           : (
-            <SlidersH className='w-4 h-4 text-indigo-600' />
+            <SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-gray-500', 'w-4 h-4')} />
           )
       }
+      {isInWorkflow && (<ChevronDown className='absolute top-[9px] right-2 w-3.5 h-3.5 text-gray-500' />)}
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index ee280ac05d..161d64b682 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -119,6 +119,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
         >
           <ModelParameterModal
             popupClassName='!w-[387px]'
+            isInWorkflow
             isAdvancedMode={true}
             mode={model?.mode}
             provider={model?.provider}