feat: annotation management frontend (#1764)

web/app/components/header/account-setting/model-page/model-selector/portal-select.tsx

@@ -0,0 +1,358 @@
+import type { FC } from 'react'
+import React, { Fragment, useEffect, useRef, useState } from 'react'
+import useSWR from 'swr'
+import { useTranslation } from 'react-i18next'
+import _ from 'lodash-es'
+import cn from 'classnames'
+import ModelModal from '../model-modal'
+import cohereConfig from '../configs/cohere'
+import s from './style.module.css'
+import type { BackendModel, FormValue, ProviderEnum } from '@/app/components/header/account-setting/model-page/declarations'
+import { ModelType } from '@/app/components/header/account-setting/model-page/declarations'
+import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+import { Check, LinkExternal01, SearchLg } from '@/app/components/base/icons/src/vender/line/general'
+import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
+import { AlertCircle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import Tooltip from '@/app/components/base/tooltip'
+import ModelIcon from '@/app/components/app/configuration/config-model/model-icon'
+import ModelName from '@/app/components/app/configuration/config-model/model-name'
+import ProviderName from '@/app/components/app/configuration/config-model/provider-name'
+import { useProviderContext } from '@/context/provider-context'
+import ModelModeTypeLabel from '@/app/components/app/configuration/config-model/model-mode-type-label'
+import type { ModelModeType } from '@/types/app'
+import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
+import { useModalContext } from '@/context/modal-context'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { fetchDefaultModal, setModelProvider } from '@/service/common'
+import { useToastContext } from '@/app/components/base/toast'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+type Props = {
+  value: {
+    providerName: ProviderEnum
+    modelName: string
+  } | undefined
+  modelType: ModelType
+  isShowModelModeType?: boolean
+  isShowAddModel?: boolean
+  supportAgentThought?: boolean
+  onChange: (value: BackendModel) => void
+  popClassName?: string
+  readonly?: boolean
+  triggerIconSmall?: boolean
+  whenEmptyGoToSetting?: boolean
+  onUpdate?: () => void
+  widthSameToTrigger?: boolean
+}
+
+type ModelOption = {
+  type: 'model'
+  value: string
+  providerName: ProviderEnum
+  modelDisplayName: string
+  model_mode: ModelModeType
+} | {
+  type: 'provider'
+  value: ProviderEnum
+}
+
+const ModelSelector: FC<Props> = ({
+  value,
+  modelType,
+  isShowModelModeType,
+  isShowAddModel,
+  supportAgentThought,
+  onChange,
+  popClassName,
+  readonly,
+  triggerIconSmall,
+  whenEmptyGoToSetting,
+  onUpdate,
+  widthSameToTrigger,
+}) => {
+  const { t } = useTranslation()
+  const { setShowAccountSettingModal } = useModalContext()
+  const {
+    textGenerationModelList,
+    embeddingsModelList,
+    speech2textModelList,
+    rerankModelList,
+    agentThoughtModelList,
+    updateModelList,
+  } = useProviderContext()
+  const [search, setSearch] = useState('')
+  const modelList = supportAgentThought
+    ? agentThoughtModelList
+    : ({
+      [ModelType.textGeneration]: textGenerationModelList,
+      [ModelType.embeddings]: embeddingsModelList,
+      [ModelType.speech2text]: speech2textModelList,
+      [ModelType.reranking]: rerankModelList,
+    })[modelType]
+  const currModel = modelList.find(item => item.model_name === value?.modelName && item.model_provider.provider_name === value.providerName)
+  const allModelNames = (() => {
+    if (!search)
+      return {}
+
+    const res: Record<string, string> = {}
+    modelList.forEach(({ model_name, model_display_name }) => {
+      res[model_name] = model_display_name
+    })
+    return res
+  })()
+  const filteredModelList = search
+    ? modelList.filter(({ model_name }) => {
+      if (allModelNames[model_name].includes(search))
+        return true
+
+      return false
+    })
+    : modelList
+
+  const hasRemoved = (value && value.modelName && value.providerName) && !modelList.find(({ model_name, model_provider }) => model_name === value.modelName && model_provider.provider_name === value.providerName)
+
+  const modelOptions: ModelOption[] = (() => {
+    const providers = _.uniq(filteredModelList.map(item => item.model_provider.provider_name))
+    const res: ModelOption[] = []
+    providers.forEach((providerName) => {
+      res.push({
+        type: 'provider',
+        value: providerName,
+      })
+      const models = filteredModelList.filter(m => m.model_provider.provider_name === providerName)
+      models.forEach(({ model_name, model_display_name, model_mode }) => {
+        res.push({
+          type: 'model',
+          providerName,
+          value: model_name,
+          modelDisplayName: model_display_name,
+          model_mode,
+        })
+      })
+    })
+    return res
+  })()
+  const { eventEmitter } = useEventEmitterContextContext()
+  const [showRerankModal, setShowRerankModal] = useState(false)
+  const [shouldFetchRerankDefaultModel, setShouldFetchRerankDefaultModel] = useState(false)
+  const { notify } = useToastContext()
+  const { data: rerankDefaultModel } = useSWR(shouldFetchRerankDefaultModel ? '/workspaces/current/default-model?model_type=reranking' : null, fetchDefaultModal)
+  const handleOpenRerankModal = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    setShowRerankModal(true)
+  }
+  const handleRerankModalSave = async (originValue?: FormValue) => {
+    if (originValue) {
+      try {
+        eventEmitter?.emit('provider-save')
+        const res = await setModelProvider({
+          url: `/workspaces/current/model-providers/${cohereConfig.modal.key}`,
+          body: {
+            config: originValue,
+          },
+        })
+        if (res.result === 'success') {
+          notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+          updateModelList(ModelType.reranking)
+          setShowRerankModal(false)
+          setShouldFetchRerankDefaultModel(true)
+          if (onUpdate)
+            onUpdate()
+        }
+        eventEmitter?.emit('')
+      }
+      catch (e) {
+        eventEmitter?.emit('')
+      }
+    }
+  }
+
+  const [open, setOpen] = useState(false)
+  const triggerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (rerankDefaultModel && whenEmptyGoToSetting)
+      onChange(rerankDefaultModel)
+  }, [rerankDefaultModel])
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={4}
+    >
+      <div className='relative'>
+        <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)} className={cn('flex items-center px-2.5 w-full h-9 rounded-lg', readonly ? '!cursor-auto bg-gray-100 opacity-50' : 'bg-gray-100', hasRemoved && '!bg-[#FEF3F2]')}>
+          {
+            <div ref={triggerRef} className='flex items-center w-full cursor-pointer'>
+              {
+                (value && value.modelName && value.providerName)
+                  ? (
+                    <>
+                      <ModelIcon
+                        className={cn('mr-1.5', !triggerIconSmall && 'w-5 h-5')}
+                        modelId={value.modelName}
+                        providerName={value.providerName}
+                      />
+                      <div className='mr-1.5 grow flex items-center text-left text-sm text-gray-900 truncate'>
+                        <ModelName modelId={value.modelName} modelDisplayName={currModel?.model_display_name || value.modelName} />
+                        {isShowModelModeType && (
+                          <ModelModeTypeLabel className='ml-2' type={currModel?.model_mode as ModelModeType} />
+                        )}
+                      </div>
+                    </>
+                  )
+                  : whenEmptyGoToSetting
+                    ? (
+                      <div className='grow flex items-center h-9 justify-between' onClick={handleOpenRerankModal}>
+                        <div className='flex items-center text-[13px] font-medium text-primary-500'>
+                          <CubeOutline className='mr-1.5 w-4 h-4' />
+                          {t('common.modelProvider.selector.rerankTip')}
+                        </div>
+                        <LinkExternal01 className='w-3 h-3 text-gray-500' />
+                      </div>
+                    )
+                    : (
+                      <div className='grow text-left text-sm text-gray-800 opacity-60'>{t('common.modelProvider.selectModel')}</div>
+                    )
+              }
+              {
+                hasRemoved && (
+                  <Tooltip
+                    selector='model-selector-remove-tip'
+                    htmlContent={
+                      <div className='w-[261px] text-gray-500'>{t('common.modelProvider.selector.tip')}</div>
+                    }
+                  >
+                    <AlertCircle className='mr-1 w-4 h-4 text-[#F04438]' />
+                  </Tooltip>
+                )
+              }
+              {
+                !readonly && !whenEmptyGoToSetting && (
+                  <ChevronDown className={`w-4 h-4 text-gray-700 ${open ? 'opacity-100' : 'opacity-60'}`} />
+                )
+              }
+              {
+                whenEmptyGoToSetting && (value && value.modelName && value.providerName) && (
+                  <ChevronDown className={`w-4 h-4 text-gray-700 ${open ? 'opacity-100' : 'opacity-60'}`} />
+                )
+              }
+            </div>
+          }
+        </PortalToFollowElemTrigger>
+        {!readonly && (
+          <PortalToFollowElemContent
+            className={cn(popClassName, !widthSameToTrigger && (isShowModelModeType ? 'max-w-[312px]' : 'max-w-[260px]'), 'absolute top-10 p-1 min-w-[232px] max-h-[366px] bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg overflow-auto z-[999]')}
+            style={{
+              width: (widthSameToTrigger && triggerRef.current?.offsetWidth) ? `${triggerRef.current?.offsetWidth}px` : 'auto',
+            }}
+          >
+            <div className='px-2 pt-2 pb-1'>
+              <div className='flex items-center px-2 h-8 bg-gray-100 rounded-lg'>
+                <div className='mr-1.5 p-[1px]'><SearchLg className='w-[14px] h-[14px] text-gray-400' /></div>
+                <div className='grow px-0.5'>
+                  <input
+                    value={search}
+                    onChange={e => setSearch(e.target.value)}
+                    className={`
+                      block w-full h-8 bg-transparent text-[13px] text-gray-700
+                      outline-none appearance-none border-none
+                    `}
+                    placeholder={t('common.modelProvider.searchModel') || ''}
+                  />
+                </div>
+                {
+                  search && (
+                    <div className='ml-1 p-0.5 cursor-pointer' onClick={() => setSearch('')}>
+                      <XCircle className='w-3 h-3 text-gray-400' />
+                    </div>
+                  )
+                }
+              </div>
+            </div>
+            {
+              modelOptions.map((model) => {
+                if (model.type === 'provider') {
+                  return (
+                    <div
+                      className='px-3 pt-2 pb-1 text-xs font-medium text-gray-500'
+                      key={`${model.type}-${model.value}`}
+                    >
+                      <ProviderName provideName={model.value} />
+                    </div>
+                  )
+                }
+
+                if (model.type === 'model') {
+                  return (
+                    <div
+                      key={`${model.providerName}-${model.value}`}
+                      className={`${s.optionItem}
+                        flex items-center px-3 w-full h-8 rounded-lg hover:bg-gray-50
+                        ${!readonly ? 'cursor-pointer' : 'cursor-auto'}
+                        ${(value?.providerName === model.providerName && value?.modelName === model.value) && 'bg-gray-50'}
+                      `}
+                      onClick={() => {
+                        const selectedModel = modelList.find((item) => {
+                          return item.model_name === model.value && item.model_provider.provider_name === model.providerName
+                        })
+                        onChange(selectedModel as BackendModel)
+                        setOpen(false)
+                      }}
+                    >
+                      <ModelIcon
+                        className='mr-2 shrink-0'
+                        modelId={model.value}
+                        providerName={model.providerName}
+                      />
+                      <div className='mr-2 grow flex items-center text-left text-sm text-gray-900 truncate'>
+                        <ModelName modelId={model.value} modelDisplayName={model.modelDisplayName} />
+                        {isShowModelModeType && (
+                          <ModelModeTypeLabel className={`${s.modelModeLabel} ml-2`} type={model.model_mode} />
+                        )}
+                      </div>
+                      {(value?.providerName === model.providerName && value?.modelName === model.value) && <Check className='shrink-0 w-4 h-4 text-primary-600' />}
+                    </div>
+                  )
+                }
+
+                return null
+              })
+            }
+            {modelList.length !== 0 && (search && filteredModelList.length === 0) && (
+              <div className='px-3 pt-1.5 h-[30px] text-center text-xs text-gray-500'>{t('common.modelProvider.noModelFound', { model: search })}</div>
+            )}
+
+            {isShowAddModel && (
+              <div
+                className='border-t flex items-center h-9 pl-3  text-xs text-[#155EEF] cursor-pointer'
+                style={{
+                  borderColor: 'rgba(0, 0, 0, 0.05)',
+                }}
+                onClick={() => setShowAccountSettingModal({ payload: 'provider' })}
+              >
+                <CubeOutline className='w-4 h-4 mr-2' />
+                <div>{t('common.model.addMoreModel')}</div>
+              </div>
+            )}
+          </PortalToFollowElemContent>
+        )}
+      </div>
+      <ModelModal
+        isShow={showRerankModal}
+        modelModal={cohereConfig.modal}
+        onCancel={() => setShowRerankModal(false)}
+        onSave={handleRerankModalSave}
+        mode={'add'}
+      />
+    </PortalToFollowElem>
+  )
+}
+
+export default ModelSelector