feat: chat in explore support agent (#647)

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

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

@@ -0,0 +1,61 @@
+'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'
+export type IModelConfigProps = {
+  modelId: string
+  onChange?: (model: string) => void
+  readonly?: boolean
+}
+
+const ModelConfig: FC<IModelConfigProps> = ({
+  modelId,
+  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>
+    </div>
+  )
+}
+export default React.memo(ModelConfig)