Merge branch 'feat/multi-models' into deploy/dev

web/app/components/base/confirm/common.module.css

+.wrapper {
+  background: linear-gradient(180deg, rgba(217, 45, 32, 0.05) 0%, rgba(217, 45, 32, 0.00) 24.02%), #F9FAFB;
+}
\ No newline at end of file

web/app/components/base/confirm/common.tsx

+import type { FC, ReactElement } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import s from './common.module.css'
+import Modal from '@/app/components/base/modal'
+import { XClose } from '@/app/components/base/icons/src/vender/line/general'
+import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import Button from '@/app/components/base/button'
+
+type ConfirmCommonProps = {
+  type?: string
+  isShow: boolean
+  onCancel: () => void
+  title: string
+  desc?: string
+}
+
+const ConfirmCommon: FC<ConfirmCommonProps> = ({
+  type = 'danger',
+  isShow,
+  onCancel,
+  title,
+  desc,
+}) => {
+  const { t } = useTranslation()
+
+  const CONFIRM_MAP: Record<string, { icon: ReactElement; confirmText: string }> = {
+    danger: {
+      icon: <AlertCircle className='w-6 h-6 text-[#D92D20]' />,
+      confirmText: t('common.operation.remove'),
+    },
+  }
+
+  return (
+    <Modal isShow={isShow} onClose={() => {}} className='!w-[480px] !max-w-[480px] !p-0 !rounded-2xl'>
+      <div className={cn(s.wrapper, 'relative p-8')}>
+        <div className='flex items-center justify-center absolute top-4 right-4 w-8 h-8 cursor-pointer' onClick={onCancel}>
+          <XClose className='w-4 h-4 text-gray-500' />
+        </div>
+        <div className='flex items-center justify-center mb-3 w-12 h-12 bg-white shadow-xl rounded-xl'>
+          {CONFIRM_MAP[type].icon}
+        </div>
+        <div className='text-xl font-semibold text-gray-900'>{title}</div>
+        {
+          desc && <div className='mt-1 text-sm text-gray-500'>{desc}</div>
+        }
+        <div className='flex items-center justify-end mt-10'>
+          <Button
+            className='mr-2 min-w-24 text-sm font-medium !text-gray-700'
+            onClick={onCancel}
+          >
+            {t('common.operation.cancel')}
+          </Button>
+          <Button type='primary' className=''>{CONFIRM_MAP[type].confirmText}</Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default ConfirmCommon

web/app/components/header/account-setting/model-page/model-item/Operation.tsx

+import type { FC } from 'react'
 import { Fragment } from 'react'
 import { Popover, Transition } from '@headlessui/react'
 import { useTranslation } from 'react-i18next'
@@ -7,7 +8,13 @@ const itemClassName = `
 flex items-center px-3 h-9 text-sm text-gray-700 rounded-lg cursor-pointer
 `
 
-const Operation = () => {
+type OperationProps = {
+  onOperate: (action: string) => void
+}
+
+const Operation: FC<OperationProps> = ({
+  onOperate,
+}) => {
   const { t } = useTranslation()
 
   return (
@@ -33,7 +40,7 @@ const Operation = () => {
         <Popover.Panel className='absolute top-8 right-0 w-[144px] bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg z-10'>
           <div className='p-1'>
             <Popover.Button as={Fragment}>
-              <div className={`group ${itemClassName} hover:bg-[#FEF3F2] hover:text-[#D92D20]`}>
+              <div className={`group ${itemClassName} hover:bg-[#FEF3F2] hover:text-[#D92D20]`} onClick={() => onOperate('delete')}>
                 <Trash03 className='mr-2 w-4 h-4 text-gray-500 group-hover:text-[#D92D20]' />
                 {t('common.operation.remove')}
               </div>

web/app/components/header/account-setting/model-page/model-item/index.tsx

+import { useState } from 'react'
 import type { FC, ReactElement } from 'react'
 import { useTranslation } from 'react-i18next'
 import Indicator from '../../../indicator'
 import Operation from './Operation'
 import Button from '@/app/components/base/button'
+import Confirm from '@/app/components/base/confirm/common'
 
 type ModelItemProps = {
   provider: { key: string; type: string; icon: ReactElement }
@@ -14,26 +16,75 @@ const ModelItem: FC<ModelItemProps> = ({
   onOpenModal,
 }) => {
   const { t } = useTranslation()
+  const [confirmShow, setConfirmShow] = useState(false)
 
   return (
-    <div className='flex justify-between items-center mb-2 px-4 h-14 bg-gray-50 rounded-xl'>
-      {provider.icon}
-      <Button
-        className='!px-3 !h-7 rounded-md bg-white !text-xs font-medium text-gray-700'
-        onClick={onOpenModal}
-      >
-        {t(`common.operation.${provider.type}`)}
-      </Button>
-      <div className='flex items-center'>
-        <Indicator className='mr-3' />
+    <div className='mb-2 bg-gray-50 rounded-xl'>
+      <div className='flex justify-between items-center px-4 h-14'>
+        {provider.icon}
         <Button
-          className='mr-1 !px-3 !h-7 rounded-md bg-white !text-xs font-medium text-gray-700'
+          className='!px-3 !h-7 rounded-md bg-white !text-xs font-medium text-gray-700'
           onClick={onOpenModal}
         >
-          {t('common.operation.edit')}
+          {t(`common.operation.${provider.type}`)}
         </Button>
-        <Operation />
+        <div className='flex items-center'>
+          <Indicator className='mr-3' />
+          <Button
+            className='mr-1 !px-3 !h-7 rounded-md bg-white !text-xs font-medium text-gray-700'
+            onClick={onOpenModal}
+          >
+            {t('common.operation.edit')}
+          </Button>
+          <Operation onOperate={() => setConfirmShow(true)} />
+        </div>
       </div>
+      <div className='px-3 pb-3'>
+        <div className='flex mb-1 px-3 py-2 bg-white rounded-lg shadow-xs last:mb-0'>
+          <div className='grow'>
+            <div className='flex items-center mb-0.5 h-[18px] text-[13px] font-medium text-gray-700'>
+              al6z-infra/llama136-v2-chat
+              <div className='ml-2 px-1.5 rounded-md border border-[rgba(0,0,0,0.08)] text-xs text-gray-600'>Embeddings</div>
+            </div>
+            <div className='text-xs text-gray-500'>version: d7769041994d94e96ad9d568eac12laecf50684a060963625a41c4006126985</div>
+          </div>
+          <div className='flex items-center'>
+            <Indicator className='mr-3' />
+            <Button
+              className='mr-1 !px-3 !h-7 rounded-md bg-white !text-xs font-medium text-gray-700'
+              onClick={onOpenModal}
+            >
+              {t('common.operation.edit')}
+            </Button>
+            <Operation onOperate={() => setConfirmShow(true)} />
+          </div>
+        </div>
+        <div className='flex mb-1 px-3 py-2 bg-white rounded-lg shadow-xs last:mb-0'>
+          <div className='grow'>
+            <div className='flex items-center mb-0.5 h-[18px] text-[13px] font-medium text-gray-700'>
+              al6z-infra/llama136-v2-chat
+              <div className='ml-2 px-1.5 rounded-md border border-[rgba(0,0,0,0.08)] text-xs text-gray-600'>Embeddings</div>
+            </div>
+            <div className='text-xs text-gray-500'>version: d7769041994d94e96ad9d568eac12laecf50684a060963625a41c4006126985</div>
+          </div>
+          <div className='flex items-center'>
+            <Indicator className='mr-3' />
+            <Button
+              className='mr-1 !px-3 !h-7 rounded-md bg-white !text-xs font-medium text-gray-700'
+              onClick={onOpenModal}
+            >
+              {t('common.operation.edit')}
+            </Button>
+            <Operation onOperate={() => setConfirmShow(true)} />
+          </div>
+        </div>
+      </div>
+      <Confirm
+        isShow={confirmShow}
+        onCancel={() => setConfirmShow(false)}
+        title='xxxx-xxx'
+        desc='xxxxx'
+      />
     </div>
   )
 }

web/i18n/lang/common.en.ts

@@ -224,12 +224,6 @@ const translation = {
     models: 'Models',
     showMoreModelProvider: 'Show more model provider',
     card: {
-      openai: {
-        desc: 'Models provided by OpenAI, such as GPT-3.5-Turbo and GPT-4.',
-      },
-      anthropic: {
-        desc: 'Anthropic’s powerful models, such as Claude 2 and Claude Instant.',
-      },
       quota: 'QUOTA',
       onTrial: 'On Trial',
       paid: 'Paid',

web/i18n/lang/common.zh.ts

@@ -220,12 +220,6 @@ const translation = {
     models: 'Models',
     showMoreModelProvider: 'Show more model provider',
     card: {
-      openai: {
-        desc: 'Models provided by OpenAI, such as GPT-3.5-Turbo and GPT-4.',
-      },
-      anthropic: {
-        desc: 'Anthropic’s powerful models, such as Claude 2 and Claude Instant.',
-      },
       quota: 'QUOTA',
       onTrial: 'On Trial',
       paid: 'Paid',