Model Runtime (#1858)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com> Co-authored-by: Garfield Dai <dai.hai@foxmail.com> Co-authored-by: chenhe <guchenhe@gmail.com> Co-authored-by: jyong <jyong@dify.ai> Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: Yeuoly <admin@srmxy.cn>
2025-12-16 06:16:53 +08:00 · 2024-01-02 23:42:00 +08:00
parent e91dd28a76
commit d069c668f8
807 changed files with 171310 additions and 23806 deletions
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
@@ -0,0 +1,39 @@
+import type { FC } from 'react'
+import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
+
+type ModelTriggerProps = {
+  open: boolean
+  className?: string
+}
+const ModelTrigger: FC<ModelTriggerProps> = ({
+  open,
+  className,
+}) => {
+  return (
+    <div
+      className={`
+        flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer
+        ${className}
+        ${open && '!bg-gray-200'}
+      `}
+    >
+      <div className='grow flex items-center'>
+        <div className='mr-1.5 flex items-center justify-center w-4 h-4 rounded-[5px] border border-dashed border-black/5'>
+          <CubeOutline className='w-3 h-3 text-gray-400' />
+        </div>
+        <div
+          className='text-[13px] text-gray-500 truncate'
+          title='Select model'
+        >
+          Select model
+        </div>
+      </div>
+      <div className='shrink-0 flex items-center justify-center w-4 h-4'>
+        <ChevronDown className='w-3.5 h-3.5 text-gray-500' />
+      </div>
+    </div>
+  )
+}
+
+export default ModelTrigger
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
@@ -0,0 +1,77 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import ModelBadge from '../model-badge'
+import {
+  ModelFeatureEnum,
+  ModelFeatureTextEnum,
+} from '../declarations'
+import {
+  MagicBox,
+  MagicEyes,
+  MagicWand,
+  Robot,
+} from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
+
+type FeatureIconProps = {
+  feature: ModelFeatureEnum
+  className?: string
+}
+const FeatureIcon: FC<FeatureIconProps> = ({
+  className,
+  feature,
+}) => {
+  const { t } = useTranslation()
+
+  if (feature === ModelFeatureEnum.agentThought) {
+    return (
+      <TooltipPlus
+        popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.agentThought })}
+      >
+        <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
+          <Robot className='w-3 h-3' />
+        </ModelBadge>
+      </TooltipPlus>
+    )
+  }
+
+  if (feature === ModelFeatureEnum.toolCall) {
+    return (
+      <TooltipPlus
+        popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.toolCall })}
+      >
+        <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
+          <MagicWand className='w-3 h-3' />
+        </ModelBadge>
+      </TooltipPlus>
+    )
+  }
+
+  if (feature === ModelFeatureEnum.multiToolCall) {
+    return (
+      <TooltipPlus
+        popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.multiToolCall })}
+      >
+        <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
+          <MagicBox className='w-3 h-3' />
+        </ModelBadge>
+      </TooltipPlus>
+    )
+  }
+
+  if (feature === ModelFeatureEnum.vision) {
+    return (
+      <TooltipPlus
+        popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.vision })}
+      >
+        <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
+          <MagicEyes className='w-3 h-3' />
+        </ModelBadge>
+      </TooltipPlus>
+    )
+  }
+
+  return null
+}
+
+export default FeatureIcon
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
@@ -0,0 +1,100 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import type {
+  DefaultModel,
+  Model,
+  ModelItem,
+} from '../declarations'
+import { useCurrentProviderAndModel } from '../hooks'
+import ModelTrigger from './model-trigger'
+import EmptyTrigger from './empty-trigger'
+import Popup from './popup'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+type ModelSelectorProps = {
+  defaultModel?: DefaultModel
+  modelList: Model[]
+  triggerClassName?: string
+  popupClassName?: string
+  onSelect?: (model: DefaultModel) => void
+  readonly?: boolean
+}
+const ModelSelector: FC<ModelSelectorProps> = ({
+  defaultModel,
+  modelList,
+  triggerClassName,
+  popupClassName,
+  onSelect,
+  readonly,
+}) => {
+  const [open, setOpen] = useState(false)
+  const {
+    currentProvider,
+    currentModel,
+  } = useCurrentProviderAndModel(
+    modelList,
+    defaultModel,
+  )
+
+  const handleSelect = (provider: string, model: ModelItem) => {
+    setOpen(false)
+
+    if (onSelect)
+      onSelect({ provider, model: model.model })
+  }
+
+  const handleToggle = () => {
+    if (readonly)
+      return
+
+    setOpen(v => !v)
+  }
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={4}
+    >
+      <div className='relative'>
+        <PortalToFollowElemTrigger
+          onClick={handleToggle}
+          className='block'
+        >
+          {
+            currentModel && currentProvider && (
+              <ModelTrigger
+                open={open}
+                provider={currentProvider}
+                model={currentModel}
+                className={triggerClassName}
+              />
+            )
+          }
+          {
+            !currentModel && (
+              <EmptyTrigger
+                open={open}
+                className={triggerClassName}
+              />
+            )
+          }
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className={`z-[60] ${popupClassName}`}>
+          <Popup
+            defaultModel={defaultModel}
+            modelList={modelList}
+            onSelect={handleSelect}
+          />
+        </PortalToFollowElemContent>
+      </div>
+    </PortalToFollowElem>
+  )
+}
+
+export default ModelSelector
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
@@ -0,0 +1,51 @@
+import type { FC } from 'react'
+import type {
+  Model,
+  ModelItem,
+} from '../declarations'
+import ModelIcon from '../model-icon'
+import ModelName from '../model-name'
+// import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+
+type ModelTriggerProps = {
+  open: boolean
+  provider: Model
+  model: ModelItem
+  className?: string
+}
+const ModelTrigger: FC<ModelTriggerProps> = ({
+  open,
+  provider,
+  model,
+  className,
+}) => {
+  return (
+    <div
+      className={`
+        group flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer
+        ${className}
+        ${open && '!bg-gray-200'}
+      `}
+    >
+      <ModelIcon
+        className='shrink-0 mr-1.5'
+        provider={provider}
+        modelName={model.model}
+      />
+      <ModelName
+        className='grow'
+        modelItem={model}
+        showMode
+        showFeatures
+      />
+      <div className='shrink-0 flex items-center justify-center w-4 h-4'>
+        <ChevronDown
+          className='w-3.5 h-3.5 text-gray-500'
+        />
+      </div>
+    </div>
+  )
+}
+
+export default ModelTrigger
--- 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
@@ -0,0 +1,127 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import type {
+  DefaultModel,
+  Model,
+  ModelItem,
+} from '../declarations'
+import {
+  useLanguage,
+  useUpdateModelList,
+  useUpdateModelProvidersAndModelList,
+} from '../hooks'
+import ModelIcon from '../model-icon'
+import ModelName from '../model-name'
+import {
+  ConfigurateMethodEnum,
+  MODEL_STATUS_TEXT,
+  ModelStatusEnum,
+  ModelTypeEnum,
+} from '../declarations'
+import { Check } from '@/app/components/base/icons/src/vender/line/general'
+import { useModalContext } from '@/context/modal-context'
+import { useProviderContext } from '@/context/provider-context'
+import Tooltip from '@/app/components/base/tooltip'
+
+type PopupItemProps = {
+  defaultModel?: DefaultModel
+  model: Model
+  onSelect: (provider: string, model: ModelItem) => void
+}
+const PopupItem: FC<PopupItemProps> = ({
+  defaultModel,
+  model,
+  onSelect,
+}) => {
+  const { t } = useTranslation()
+  const language = useLanguage()
+  const { setShowModelModal } = useModalContext()
+  const { modelProviders } = useProviderContext()
+  const updateModelList = useUpdateModelList()
+  const updateModelProvidersAndModelList = useUpdateModelProvidersAndModelList()
+  const currentProvider = modelProviders.find(provider => provider.provider === model.provider)!
+  const handleSelect = (provider: string, modelItem: ModelItem) => {
+    if (modelItem.status !== ModelStatusEnum.active)
+      return
+
+    onSelect(provider, modelItem)
+  }
+  const handleOpenModelModal = () => {
+    setShowModelModal({
+      payload: {
+        currentProvider,
+        currentConfigurateMethod: ConfigurateMethodEnum.predefinedModel,
+      },
+      onSaveCallback: () => {
+        updateModelProvidersAndModelList()
+
+        const modelType = model.models[0].model_type
+
+        if (modelType !== ModelTypeEnum.textGeneration)
+          updateModelList(modelType)
+      },
+    })
+  }
+
+  return (
+    <div className='mb-1'>
+      <div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>
+        {model.label[language]}
+      </div>
+      {
+        model.models.map(modelItem => (
+          <Tooltip
+            selector={`${modelItem.model}-${modelItem.status}`}
+            key={modelItem.model}
+            content={modelItem.status !== ModelStatusEnum.active ? MODEL_STATUS_TEXT[modelItem.status][language] : undefined}
+            position='right'
+          >
+            <div
+              key={modelItem.model}
+              className={`
+                group relative flex items-center px-3 py-1.5 h-8 rounded-lg
+                ${modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-gray-50' : 'cursor-not-allowed hover:bg-gray-50/60'}
+              `}
+              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-gray-900
+                  ${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
+                `}
+                modelItem={modelItem}
+                showMode
+                showFeatures
+              />
+              {
+                defaultModel?.model === modelItem.model && (
+                  <Check className='shrink-0 w-4 h-4 text-primary-600' />
+                )
+              }
+              {
+                modelItem.status === ModelStatusEnum.noConfigure && (
+                  <div
+                    className='hidden group-hover:block text-xs font-medium text-primary-600 cursor-pointer'
+                    onClick={handleOpenModelModal}
+                  >
+                    {t('common.operation.add').toLocaleUpperCase()}
+                  </div>
+                )
+              }
+            </div>
+          </Tooltip>
+        ))
+      }
+    </div>
+  )
+}
+
+export default PopupItem
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
@@ -0,0 +1,80 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import type {
+  DefaultModel,
+  Model,
+  ModelItem,
+} from '../declarations'
+import { useLanguage } from '../hooks'
+import PopupItem from './popup-item'
+import { SearchLg } from '@/app/components/base/icons/src/vender/line/general'
+import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
+
+type PopupProps = {
+  defaultModel?: DefaultModel
+  modelList: Model[]
+  onSelect: (provider: string, model: ModelItem) => void
+}
+const Popup: FC<PopupProps> = ({
+  defaultModel,
+  modelList,
+  onSelect,
+}) => {
+  const language = useLanguage()
+  const [searchText, setSearchText] = useState('')
+
+  const filteredModelList = modelList.filter(model => model.models.filter(modelItem => modelItem.label[language].includes(searchText)).length)
+
+  return (
+    <div className='w-[320px] max-h-[480px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg overflow-y-auto'>
+      <div className='sticky top-0 pl-3 pt-3 pr-2 pb-1 bg-white z-10'>
+        <div className={`
+          flex items-center pl-[9px] pr-[10px] h-8 rounded-lg border
+          ${searchText ? 'bg-white border-gray-300 shadow-xs' : 'bg-gray-100 border-transparent'}
+        `}>
+          <SearchLg
+            className={`
+              shrink-0 mr-[7px] w-[14px] h-[14px]
+              ${searchText ? 'text-gray-500' : 'text-gray-400'}
+            `}
+          />
+          <input
+            className='block grow h-[18px] text-[13px] appearance-none outline-none bg-transparent'
+            placeholder='Search model'
+            value={searchText}
+            onChange={e => setSearchText(e.target.value)}
+          />
+          {
+            searchText && (
+              <XCircle
+                className='shrink-0 ml-1.5 w-[14px] h-[14px] text-gray-400 cursor-pointer'
+                onClick={() => setSearchText('')}
+              />
+            )
+          }
+        </div>
+      </div>
+      <div className='p-1'>
+        {
+          filteredModelList.map(model => (
+            <PopupItem
+              key={model.provider}
+              defaultModel={defaultModel}
+              model={model}
+              onSelect={onSelect}
+            />
+          ))
+        }
+        {
+          !filteredModelList.length && (
+            <div className='px-3 py-1.5 leading-[18px] text-center text-xs text-gray-500 break-all'>
+              {`No model found for “${searchText}”`}
+            </div>
+          )
+        }
+      </div>
+    </div>
+  )
+}
+
+export default Popup
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/rerank-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/rerank-trigger.tsx
@@ -0,0 +1,25 @@
+import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
+import { LinkExternal01 } from '@/app/components/base/icons/src/vender/line/general'
+
+const ModelTrigger = () => {
+  return (
+    <div className='flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer'>
+      <div className='grow flex items-center'>
+        <div className='mr-1.5 flex items-center justify-center w-4 h-4 rounded-[5px] border-dashed border-black/5'>
+          <CubeOutline className='w-[11px] h-[11px] text-gray-400' />
+        </div>
+        <div
+          className='text-[13px] text-gray-500 truncate'
+          title='Select model'
+        >
+          Please setup the Rerank model
+        </div>
+      </div>
+      <div className='shrink-0 flex items-center justify-center w-4 h-4'>
+        <LinkExternal01 className='w-3.5 h-3.5 text-gray-500' />
+      </div>
+    </div>
+  )
+}
+
+export default ModelTrigger