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

2024-12-27 13:57:54 +08:00 · 2024-12-27 13:57:54 +08:00 · ef3e904839
commit ef3e904839
parent 67019d128b
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' />
--- a/web/app/components/plugins/card/index.tsx
+++ b/web/app/components/plugins/card/index.tsx
@ -44,7 +44,7 @@ const Card = ({
  const locale = localeFromProps ? getLanguage(localeFromProps) : defaultLocale
  const { categoriesMap } = useCategories()
  const { category, type, name, org, label, brief, icon, verified } = payload
-  const isBundle = !['plugin', 'model', 'tool', 'extension', 'agent-strategy'].includes(type)
+  const isBundle = !['plugin', 'model', 'tool', 'extension', 'agent_strategy'].includes(type)
  const cornerMark = isBundle ? categoriesMap.bundle?.label : categoriesMap[category]?.label
  const getLocalizedText = (obj: Record<string, string> | undefined) =>
    obj?.[locale] || obj?.['en-US'] || obj?.en_US || ''
--- a/web/app/components/plugins/hooks.ts
+++ b/web/app/components/plugins/hooks.ts
@ -44,7 +44,7 @@ export const useCategories = (translateFromOut?: TFunction) => {
  const categories = categoryKeys.map((category) => {
    if (category === 'agent') {
      return {
-        name: 'agent-strategy',
+        name: 'agent_strategy',
        label: t(`plugin.category.${category}s`),
      }
    }
--- a/web/app/components/plugins/marketplace/utils.ts
+++ b/web/app/components/plugins/marketplace/utils.ts
@ -102,7 +102,7 @@ export const getMarketplaceListCondition = (pluginType: string) => {
    return 'category=tool'

  if (pluginType === PluginType.agent)
-    return 'category=agent-strategy'
+    return 'category=agent_strategy'

  if (pluginType === PluginType.model)
    return 'category=model'
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
@ -13,6 +13,7 @@ import ModelSelector from '@/app/components/header/account-setting/model-provide
 import {
  useModelList,
 } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import AgentModelTrigger from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger'
 import Trigger from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger'
 import type { TriggerProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger'
 import {
@ -34,6 +35,7 @@ export type ModelParameterModalProps = {
  renderTrigger?: (v: TriggerProps) => ReactNode
  readonly?: boolean
  isInWorkflow?: boolean
+  isAgentStrategy?: boolean
  scope?: string
 }

@ -46,6 +48,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
  renderTrigger,
  readonly,
  isInWorkflow,
+  isAgentStrategy,
  scope = ModelTypeEnum.textGeneration,
 }) => {
  const { t } = useTranslation()
@ -168,8 +171,16 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
                providerName: value?.provider,
                modelId: value?.model,
              })
-              : (
-                <Trigger
+              : (isAgentStrategy
+                ? <AgentModelTrigger
+                  disabled={disabled}
+                  hasDeprecated={hasDeprecated}
+                  currentProvider={currentProvider}
+                  currentModel={currentModel}
+                  providerName={value?.provider}
+                  modelId={value?.model}
+                />
+                : <Trigger
                  disabled={disabled}
                  isInWorkflow={isInWorkflow}
                  modelDisabled={modelDisabled}
--- a/web/app/components/plugins/types.ts
+++ b/web/app/components/plugins/types.ts
@ -6,7 +6,7 @@ export enum PluginType {
  tool = 'tool',
  model = 'model',
  extension = 'extension',
-  agent = 'agent-strategy',
+  agent = 'agent_strategy',
 }

 export enum PluginSource {
@ -109,7 +109,7 @@ export type PluginDetail = {
 }

 export type Plugin = {
-  type: 'plugin' | 'bundle' | 'model' | 'extension' | 'tool'
+  type: 'plugin' | 'bundle' | 'model' | 'extension' | 'tool' | 'agent_strategy'
  org: string
  author?: string
  name: string
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
@ -180,6 +180,7 @@ export const AgentStrategy = (props: AgentStrategyProps) => {
            validating={false}
            showOnVariableMap={{}}
            isEditMode={true}
+            isAgentStrategy={true}
            fieldLabelClassName='uppercase'
            customRenderField={renderField}
          />
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@ -714,6 +714,8 @@ const translation = {
        install: 'Install',
        installing: 'Installing',
      },
+      configureModel: 'Configure Model',
+      notAuthorized: 'Not Authorized',
      model: 'model',
      toolbox: 'toolbox',
      strategyNotSet: 'Agentic strategy Not Set',
@ -723,6 +725,9 @@ const translation = {
      toolNotInstallTooltip: '{{tool}} is not installed',
      toolNotAuthorizedTooltip: '{{tool}} Not Authorized',
      strategyNotInstallTooltip: '{{strategy}} is not installed',
+      modelSelectorTooltips: {
+        deprecated: 'This model is deprecated',
+      },
    },
  },
  tracing: {
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@ -717,12 +717,17 @@ const translation = {
      model: '模型',
      toolbox: '工具箱',
      strategyNotSet: '代理策略未设置',
+      configureModel: '配置模型',
+      notAuthorized: '未授权',
      tools: '工具',
      maxIterations: '最大迭代次数',
      modelNotInstallTooltip: '此模型未安装',
      toolNotInstallTooltip: '{{tool}} 未安装',
      toolNotAuthorizedTooltip: '{{tool}} 未授权',
      strategyNotInstallTooltip: '{{strategy}} 未安装',
+      modelSelectorTooltips: {
+        deprecated: '此模型已弃用',
+      },
    },
  },
  tracing: {
--- a/web/service/use-strategy.ts
+++ b/web/service/use-strategy.ts
@ -7,7 +7,7 @@ import {
  useQuery,
 } from '@tanstack/react-query'

-const NAME_SPACE = 'agent-strategy'
+const NAME_SPACE = 'agent_strategy'

 const useStrategyListKey = [NAME_SPACE, 'strategyList']
 export const useStrategyProviders = () => {