feat: model-selector in Agent node (case: installed models)

2026-05-05 01:48:04 +08:00 · 2024-12-27 13:57:54 +08:00
parent 67019d128b
commit ef3e904839
15 changed files with 285 additions and 67 deletions
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@ -36,6 +36,10 @@ const iconClassName = `
  w-5 h-5 mr-2
 `

+const scrolledClassName = `
+  border-b shadow-xs bg-white/[.98]
+`
+
 type IAccountSettingProps = {
  onCancel: () => void
  activeTab?: string
--- a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
@ -5,32 +5,37 @@ import type {
 } from '../declarations'
 import { useLanguage } from '../hooks'
 import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
-import { OpenaiViolet } from '@/app/components/base/icons/src/public/llm'
+import { OpenaiBlue, OpenaiViolet } from '@/app/components/base/icons/src/public/llm'
 import cn from '@/utils/classnames'

 type ModelIconProps = {
  provider?: Model | ModelProvider
  modelName?: string
  className?: string
+  isDeprecated?: boolean
 }
 const ModelIcon: FC<ModelIconProps> = ({
  provider,
  className,
  modelName,
+  isDeprecated = false,
 }) => {
  const language = useLanguage()
-
-  if (provider?.provider.includes('openai') && (modelName?.startsWith('gpt-4') || modelName?.includes('4o')))
-    return <OpenaiViolet className={cn('w-4 h-4', className)}/>
+  if (provider?.provider.includes('openai') && modelName?.includes('gpt-4o'))
+    return <OpenaiBlue className={cn('w-5 h-5', className)}/>
+  if (provider?.provider.includes('openai') && modelName?.startsWith('gpt-4'))
+    return <OpenaiViolet className={cn('w-5 h-5', className)}/>

  if (provider?.icon_small) {
    return (
-      // eslint-disable-next-line @next/next/no-img-element
-      <img
-        alt='model-icon'
-        src={`${provider.icon_small[language] || provider.icon_small.en_US}`}
-        className={cn('w-4 h-4', className)}
-      />
+
+      <div className={isDeprecated ? 'opacity-50' : ''}>
+        <img
+          alt='model-icon'
+          src={`${provider.icon_small[language] || provider.icon_small.en_US}`}
+          className={cn('w-4 h-4', className)}
+        />
+      </div>
    )
  }

--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@ -35,6 +35,7 @@ type FormProps<
  validatedSuccess?: boolean
  showOnVariableMap: Record<string, string[]>
  isEditMode: boolean
+  isAgentStrategy?: boolean
  readonly?: boolean
  inputClassName?: string
  isShowDefaultValue?: boolean
@ -60,6 +61,7 @@ function Form<
  validatedSuccess,
  showOnVariableMap,
  isEditMode,
+  isAgentStrategy = false,
  readonly,
  inputClassName,
  isShowDefaultValue = false,
@ -278,6 +280,7 @@ function Form<
            popupClassName='!w-[387px]'
            isAdvancedMode
            isInWorkflow
+            isAgentStrategy={isAgentStrategy}
            value={value[variable]}
            setModel={model => handleModelChanged(variable, model)}
            readonly={readonly}
--- a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
@ -37,43 +37,45 @@ const ModelName: FC<ModelNameProps> = ({
  if (!modelItem)
    return null
  return (
-    <div className={cn('flex items-center truncate text-components-input-text-filled system-sm-regular', className)}>
+    <div className={cn('flex items-center overflow-hidden text-ellipsis truncate text-components-input-text-filled system-sm-regular', className)}>
      <div
        className='truncate'
        title={modelItem.label[language] || modelItem.label.en_US}
      >
        {modelItem.label[language] || modelItem.label.en_US}
      </div>
-      {
-        showModelType && modelItem.model_type && (
-          <ModelBadge className={cn('ml-1', modelTypeClassName)}>
-            {modelTypeFormat(modelItem.model_type)}
-          </ModelBadge>
-        )
-      }
-      {
-        modelItem.model_properties.mode && showMode && (
-          <ModelBadge className={cn('ml-1', modeClassName)}>
-            {(modelItem.model_properties.mode as string).toLocaleUpperCase()}
-          </ModelBadge>
-        )
-      }
-      {
-        showFeatures && modelItem.features?.map(feature => (
-          <FeatureIcon
-            key={feature}
-            feature={feature}
-            className={cn('ml-1', featuresClassName)}
-          />
-        ))
-      }
-      {
-        showContextSize && modelItem.model_properties.context_size && (
-          <ModelBadge className='ml-1'>
-            {sizeFormat(modelItem.model_properties.context_size as number)}
-          </ModelBadge>
-        )
-      }
+      <div className='flex items-center gap-0.5'>
+        {
+          showModelType && modelItem.model_type && (
+            <ModelBadge className={modelTypeClassName}>
+              {modelTypeFormat(modelItem.model_type)}
+            </ModelBadge>
+          )
+        }
+        {
+          modelItem.model_properties.mode && showMode && (
+            <ModelBadge className={modeClassName}>
+              {(modelItem.model_properties.mode as string).toLocaleUpperCase()}
+            </ModelBadge>
+          )
+        }
+        {
+          showFeatures && modelItem.features?.map(feature => (
+            <FeatureIcon
+              key={feature}
+              feature={feature}
+              className={featuresClassName}
+            />
+          ))
+        }
+        {
+          showContextSize && modelItem.model_properties.context_size && (
+            <ModelBadge>
+              {sizeFormat(modelItem.model_properties.context_size as number)}
+            </ModelBadge>
+          )
+        }
+      </div>
      {children}
    </div>
  )
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
@ -0,0 +1,180 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import type {
+  CustomConfigurationModelFixedFields,
+  ModelItem,
+  ModelProvider,
+} from '../declarations'
+import {
+  ConfigurationMethodEnum,
+  CustomConfigurationStatusEnum,
+} from '../declarations'
+import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from '../provider-added-card'
+import { ModelStatusEnum } from '../declarations'
+import {
+  useUpdateModelList,
+  useUpdateModelProviders,
+} from '../hooks'
+import ModelIcon from '../model-icon'
+import ModelName from '../model-name'
+import Button from '@/app/components/base/button'
+import cn from '@/utils/classnames'
+import { useProviderContext } from '@/context/provider-context'
+import { useModalContextSelector } from '@/context/modal-context'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import Tooltip from '@/app/components/base/tooltip'
+import { RiEqualizer2Line, RiErrorWarningFill } from '@remixicon/react'
+
+export type AgentModelTriggerProps = {
+  open?: boolean
+  disabled?: boolean
+  currentProvider?: ModelProvider
+  currentModel?: ModelItem
+  providerName?: string
+  modelId?: string
+  hasDeprecated?: boolean
+}
+
+const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
+  disabled,
+  currentProvider,
+  currentModel,
+  providerName,
+  modelId,
+  hasDeprecated,
+}) => {
+  const { t } = useTranslation()
+  const { modelProviders } = useProviderContext()
+  const setShowModelModal = useModalContextSelector(state => state.setShowModelModal)
+  const updateModelProviders = useUpdateModelProviders()
+  const updateModelList = useUpdateModelList()
+  const { eventEmitter } = useEventEmitterContextContext()
+  const modelProvider = modelProviders.find(item => item.provider === providerName)
+  const needsConfiguration = modelProvider?.custom_configuration.status === CustomConfigurationStatusEnum.noConfigure && !(
+    modelProvider.system_configuration.enabled === true
+    && modelProvider.system_configuration.quota_configurations.find(
+      item => item.quota_type === modelProvider.system_configuration.current_quota_type,
+    )
+  )
+
+  const handleOpenModal = (
+    provider: ModelProvider,
+    configurationMethod: ConfigurationMethodEnum,
+    CustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields,
+  ) => {
+    setShowModelModal({
+      payload: {
+        currentProvider: provider,
+        currentConfigurationMethod: configurationMethod,
+        currentCustomConfigurationModelFixedFields: CustomConfigurationModelFixedFields,
+      },
+      onSaveCallback: () => {
+        updateModelProviders()
+
+        provider.supported_model_types.forEach((type) => {
+          updateModelList(type)
+        })
+
+        if (configurationMethod === ConfigurationMethodEnum.customizableModel
+            && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) {
+          eventEmitter?.emit({
+            type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
+            payload: provider.provider,
+          } as any)
+
+          if (CustomConfigurationModelFixedFields?.__model_type)
+            updateModelList(CustomConfigurationModelFixedFields.__model_type)
+        }
+      },
+    })
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative group flex items-center p-1 gap-[2px] flex-grow rounded-lg bg-components-input-bg-normal cursor-pointer hover:bg-state-base-hover-alt',
+      )}
+    >
+      {modelId ? (
+        <>
+          {currentProvider && (
+            <ModelIcon
+              className="m-0.5"
+              provider={currentProvider}
+              modelName={currentModel?.model}
+              isDeprecated={hasDeprecated}
+            />
+          )}
+          {!currentProvider && (
+            <ModelIcon
+              className="m-0.5"
+              provider={modelProvider}
+              modelName={modelId}
+              isDeprecated={hasDeprecated}
+            />
+          )}
+          {currentModel && (
+            <ModelName
+              className="flex px-1 py-[3px] items-center gap-1 grow"
+              modelItem={currentModel}
+              showMode
+              showFeatures
+            />
+          )}
+          {!currentModel && (
+            <div className="flex py-[3px] px-1 items-center gap-1 grow opacity-50 truncate">
+              <div className="text-components-input-text-filled text-ellipsis overflow-hidden system-sm-regular">
+                {modelId}
+              </div>
+            </div>
+          )}
+          {needsConfiguration && (
+            <Button
+              size="small"
+              className="z-[100]"
+              onClick={(e) => {
+                e.stopPropagation()
+                handleOpenModal(modelProvider, ConfigurationMethodEnum.predefinedModel, undefined)
+              }}
+            >
+              <div className="flex px-[3px] justify-center items-center gap-1">
+                {t('workflow.nodes.agent.notAuthorized')}
+              </div>
+              <div className="flex w-[14px] h-[14px] justify-center items-center">
+                <div className="w-2 h-2 shrink-0 rounded-[3px] border border-components-badge-status-light-warning-border-inner
+                  bg-components-badge-status-light-warning-bg shadow-components-badge-status-light-warning-halo" />
+              </div>
+            </Button>
+          )}
+          {!needsConfiguration && disabled && (
+            <Tooltip
+              popupContent={t('workflow.nodes.agent.modelSelectorTooltips.deprecated')}
+              asChild={false}
+            >
+              <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
+            </Tooltip>
+          )
+          }
+        </>
+      ) : (
+        <>
+          <div className="flex p-1 pl-2 items-center gap-1 grow">
+            <span className="overflow-hidden text-ellipsis whitespace-nowrap system-sm-regular text-components-input-text-placeholder">
+              {t('workflow.nodes.agent.configureModel')}
+            </span>
+          </div>
+          <div className="flex pr-1 items-center">
+            <RiEqualizer2Line className="w-4 h-4 text-text-tertiary group-hover:text-text-secondary" />
+          </div>
+        </>
+      )}
+      {currentProvider && currentModel && currentModel.status === ModelStatusEnum.active && (
+        <div className="flex pr-1 items-center">
+          <RiEqualizer2Line className="w-4 h-4 text-text-tertiary group-hover:text-text-secondary" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AgentModelTrigger
--- 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
@ -77,28 +77,30 @@ const PopupItem: FC<PopupItemProps> = ({
            <div
              key={modelItem.model}
              className={`
-                group relative flex items-center px-3 py-1.5 h-8 rounded-lg
+                group relative flex items-center px-3 py-1.5 h-8 rounded-lg gap-1
                ${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)}
            >
-              <ModelIcon
-                className={`
-                  shrink-0 mr-2 w-4 h-4
-                  ${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
-                `}
-                provider={model}
-                modelName={modelItem.model}
-              />
-              <ModelName
-                className={`
-                  grow text-sm font-normal text-text-primary
-                  ${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
-                `}
-                modelItem={modelItem}
-                showMode
-                showFeatures
-              />
+              <div className='flex items-center gap-2'>
+                <ModelIcon
+                  className={`
+                    shrink-0 w-4 h-4
+                    ${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
+                  `}
+                  provider={model}
+                  modelName={modelItem.model}
+                />
+                <ModelName
+                  className={`
+                    text-text-secondary system-sm-medium
+                    ${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
+                  `}
+                  modelItem={modelItem}
+                  showMode
+                  showFeatures
+                />
+              </div>
              {
                defaultModel?.model === modelItem.model && defaultModel.provider === currentProvider.provider && (
                  <Check className='shrink-0 w-4 h-4 text-text-accent' />