feat: set openai account

client/src/pages/account/components/OpenAIAccountModal.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { ModalBody, Box, Flex, Input, ModalFooter, Button } from '@chakra-ui/react';
+import MyModal from '@/components/MyModal';
+import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { useRequest } from '@/hooks/useRequest';
+import { UserType } from '@/types/user';
+
+const OpenAIAccountModal = ({
+  defaultData,
+  onSuccess,
+  onClose
+}: {
+  defaultData: UserType['openaiAccount'];
+  onSuccess: (e: UserType['openaiAccount']) => Promise<any>;
+  onClose: () => void;
+}) => {
+  const { t } = useTranslation();
+  const { register, handleSubmit } = useForm({
+    defaultValues: defaultData
+  });
+
+  const { mutate: onSubmit, isLoading } = useRequest({
+    mutationFn: async (data: UserType['openaiAccount']) => onSuccess(data),
+    onSuccess(res) {
+      onClose();
+    },
+    errorToast: t('user.Set OpenAI Account Failed')
+  });
+
+  return (
+    <MyModal isOpen onClose={onClose} title={t('user.OpenAI Account Setting')}>
+      <ModalBody>
+        <Box fontSize={'sm'} color={'myGray.500'}>
+          如果你填写了该内容，平台上的聊天不会计费（不包含知识库训练和 API 调用）
+        </Box>
+        <Flex alignItems={'center'} mt={5}>
+          <Box flex={'0 0 65px'}>API Key:</Box>
+          <Input flex={1} {...register('key')}></Input>
+        </Flex>
+        <Flex alignItems={'center'} mt={5}>
+          <Box flex={'0 0 65px'}>BaseUrl:</Box>
+          <Input
+            flex={1}
+            {...register('baseUrl')}
+            placeholder={'中转地址，未自动补全 "v1"'}
+          ></Input>
+        </Flex>
+      </ModalBody>
+      <ModalFooter>
+        <Button mr={3} variant={'base'} onClick={onClose}>
+          取消
+        </Button>
+        <Button isLoading={isLoading} onClick={handleSubmit((data) => onSubmit(data))}>
+          确认
+        </Button>
+      </ModalFooter>
+    </MyModal>
+  );
+};
+
+export default OpenAIAccountModal;