feat: frontend multi models support (#804)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com> Co-authored-by: Joel <iamjoel007@gmail.com>
2023-08-12 00:57:13 +08:00
parent 5fa2161b05
commit d10ef17f17
259 changed files with 9105 additions and 1392 deletions
--- a/web/app/components/header/account-setting/model-page/selector/index.tsx
+++ b/web/app/components/header/account-setting/model-page/selector/index.tsx
@@ -0,0 +1,97 @@
+import { Fragment } from 'react'
+import type { FC } from 'react'
+import { Popover, Transition } from '@headlessui/react'
+import { useTranslation } from 'react-i18next'
+import { Check, DotsHorizontal, Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+
+const itemClassName = `
+flex items-center px-3 h-9 text-sm text-gray-700 rounded-lg cursor-pointer
+`
+
+type SelectorProps = {
+  value?: string
+  onOperate: (v: Record<string, string>) => void
+  hiddenOptions?: boolean
+  className?: (v: boolean) => string
+  deleteText?: string
+}
+const Selector: FC<SelectorProps> = ({
+  value,
+  onOperate,
+  hiddenOptions,
+  className,
+  deleteText,
+}) => {
+  const { t } = useTranslation()
+  const options = [
+    {
+      key: 'custom',
+      text: 'API',
+    },
+    {
+      key: 'system',
+      text: t('common.modelProvider.quota'),
+    },
+  ]
+
+  return (
+    <Popover className='relative'>
+      <Popover.Button>
+        {
+          ({ open }) => (
+            <div className={`
+              flex justify-center items-center w-6 h-6 rounded-md hover:bg-gray-50 cursor-pointer
+              ${open && 'bg-gray-50'}
+              ${className && className(open)}
+            `}>
+              <DotsHorizontal className='w-3 h-3 text-gray-700' />
+            </div>
+          )
+        }
+      </Popover.Button>
+      <Transition
+        as={Fragment}
+        leave='transition ease-in duration-100'
+        leaveFrom='opacity-100'
+        leaveTo='opacity-0'
+      >
+        <Popover.Panel className='absolute top-7 right-0 w-[192px] bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg z-10'>
+          {
+            !hiddenOptions && (
+              <>
+                <div className='p-1'>
+                  <div className='px-3 pt-2 pb-1 text-sm font-medium text-gray-700'>{t('common.modelProvider.card.priorityUse')}</div>
+                  {
+                    options.map(option => (
+                      <Popover.Button as={Fragment} key={option.key}>
+                        <div
+                          className={`${itemClassName} hover:bg-gray-50`}
+                          onClick={() => onOperate({ type: 'priority', value: option.key })}>
+                          <div className='grow'>{option.text}</div>
+                          {value === option.key && <Check className='w-4 h-4 text-primary-600' />}
+                        </div>
+                      </Popover.Button>
+                    ))
+                  }
+                </div>
+                <div className='h-[1px] bg-gray-100' />
+              </>
+            )
+          }
+          <div className='p-1'>
+            <Popover.Button as={Fragment}>
+              <div
+                className={`group ${itemClassName} hover:bg-[#FEF3F2] hover:text-[#D92D20]`}
+                onClick={() => onOperate({ type: 'delete' })}>
+                <Trash03 className='mr-2 w-4 h-4 text-gray-500 group-hover:text-[#D92D20]' />
+                {deleteText || t('common.modelProvider.card.removeKey')}
+              </div>
+            </Popover.Button>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  )
+}
+
+export default Selector