feat: frontend multi models support (#804)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: Joel <iamjoel007@gmail.com>

web/app/components/explore/universal-chat/config/model-config/index.tsx

@@ -1,60 +1,41 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
-import { useBoolean, useClickAway } from 'ahooks'
-import { ChevronDownIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
-import ModelIcon from '@/app/components/app/configuration/config-model/model-icon'
-import { UNIVERSAL_CHAT_MODEL_LIST as MODEL_LIST } from '@/config'
-import { Checked as CheckedIcon } from '@/app/components/base/icons/src/public/model'
+import { ModelType, type ProviderEnum } from '@/app/components/header/account-setting/model-page/declarations'
+import ModelSelector from '@/app/components/header/account-setting/model-page/model-selector'
 export type IModelConfigProps = {
   modelId: string
-  onChange?: (model: string) => void
+  providerName: ProviderEnum
+  onChange?: (modelId: string, providerName: ProviderEnum) => void
   readonly?: boolean
 }
 
 const ModelConfig: FC<IModelConfigProps> = ({
   modelId,
+  providerName,
   onChange,
   readonly,
 }) => {
   const { t } = useTranslation()
 
-  const currModel = MODEL_LIST.find(item => item.id === modelId)
-  const [isShowOption, { setFalse: hideOption, toggle: toogleOption }] = useBoolean(false)
-  const triggerRef = React.useRef(null)
-  useClickAway(() => {
-    hideOption()
-  }, triggerRef)
-
   return (
     <div className='flex items-center justify-between h-[52px] px-3 rounded-xl bg-gray-50'>
       <div className='text-sm font-semibold text-gray-800'>{t('explore.universalChat.model')}</div>
-      <div className="relative z-10">
-        <div
-          ref={triggerRef}
-          onClick={() => !readonly && toogleOption()}
-          className={cn(
-            readonly ? 'cursor-not-allowed' : 'cursor-pointer', 'flex items-center h-9 px-3 space-x-2 rounded-lg',
-            isShowOption && 'bg-gray-100',
-          )}>
-          <ModelIcon modelId={currModel?.id as string} />
-          <div className="text-sm gray-900">{currModel?.name}</div>
-          {!readonly && <ChevronDownIcon className={cn(isShowOption && 'rotate-180', 'w-[14px] h-[14px] text-gray-500')} />}
-        </div>
-        {isShowOption && (
-          <div className={cn('absolute top-10 right-0 bg-white rounded-lg shadow')}>
-            {MODEL_LIST.map(item => (
-              <div key={item.id} onClick={() => onChange?.(item.id)} className="w-[232px] flex items-center h-9 px-4 rounded-lg cursor-pointer hover:bg-gray-100">
-                <ModelIcon className='shrink-0 mr-2' modelId={item?.id} />
-                <div className="text-sm gray-900 whitespace-nowrap">{item.name}</div>
-                {(item.id === currModel?.id) && <CheckedIcon className='absolute right-4' />}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
+      <ModelSelector
+        popClassName="right-0"
+        triggerIconSmall
+        modelType={ModelType.textGeneration}
+        supportAgentThought
+        value={{
+          modelName: modelId,
+          providerName,
+        }}
+        onChange={(model) => {
+          onChange?.(model.model_name, model.model_provider.provider_name)
+        }}
+        readonly={readonly}
+      />
     </div>
   )
 }