1

2024-06-05 14:27:06 +08:00
commit b825dcd4d5
730 changed files with 100244 additions and 0 deletions
--- a/src/pages/SkillPage/components/CreateAssistant.tsx
+++ b/src/pages/SkillPage/components/CreateAssistant.tsx
@@ -0,0 +1,122 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { LoadIcon } from "../../../components/bs-icons/loading";
+import { Button } from "../../../components/bs-ui/button";
+import { DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../../../components/bs-ui/dialog";
+import { Input, Textarea } from "../../../components/bs-ui/input";
+import { createAssistantsApi } from "../../../controllers/API/assistant";
+import { captureAndAlertRequestErrorHoc } from "../../../controllers/request";
+import { useTranslation } from "react-i18next";
+
+export default function CreateAssistant() {
+
+    const { t } = useTranslation()
+
+    // State for form fields
+    const [formData, setFormData] = useState({
+        name: '',
+        roleAndTasks: `${t('build.example')}：
+${t('build.exampleOne')}
+${t('build.exampleTwo')}
+1. XX
+2. XX
+3. …`
+    });
+
+    const [loading, setLoading] = useState(false);
+    // State for errors
+    const [errors, setErrors] = useState<any>({});
+
+    // Validate form fields
+    const validateField = (name, value) => {
+        switch (name) {
+            case 'name':
+                if (!value) return t('build.nameRequired');
+                if (value.length > 50) return t('build.nameMaxLength');
+                return '';
+            case 'roleAndTasks':
+                if (value.length < 20) return t('build.forBetter');
+                return '';
+            default:
+                return '';
+        }
+    };
+
+    // Handle field change
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        const error = validateField(name, value);
+
+        setFormData(prev => ({ ...prev, [name]: value }));
+        setErrors(prev => ({ ...prev, [name]: error }));
+    };
+
+    // Validate entire form
+    const validateForm = () => {
+        const formErrors = {};
+        let isValid = true;
+
+        Object.keys(formData).forEach(key => {
+            const error = validateField(key, formData[key]);
+            if (error) {
+                formErrors[key] = error;
+                isValid = false;
+            }
+        });
+
+        setErrors(formErrors);
+        return isValid;
+    };
+
+    // Handle form submission
+    const navigate = useNavigate()
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        const isValid = validateForm();
+
+        if (isValid) {
+            console.log('Form data:', formData);
+            setLoading(true)
+            const res = await captureAndAlertRequestErrorHoc(createAssistantsApi(formData.name, formData.roleAndTasks))
+            if (res) {
+                window.assistantCreate = true // 标记新建助手
+                navigate('/assistant/' + res.id)
+            }
+            setLoading(false)
+        }
+    };
+
+    return <DialogContent className="sm:max-w-[625px]">
+        <DialogHeader>
+            <DialogTitle>{t('build.establishAssistant')}</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-8 py-6">
+            <div className="">
+                <label htmlFor="name" className="bisheng-label">{t('build.assistantName')}<span className="bisheng-tip">*</span></label>
+                <Input id="name" name="name" placeholder={t('build.giveAssistantName')} className="mt-2" value={formData.name} onChange={handleChange} />
+                {errors.name && <p className="bisheng-tip mt-1">{errors.name}</p>}
+            </div>
+            <div className="">
+                <label htmlFor="roleAndTasks" className="bisheng-label">{t('build.whatWant')}</label>
+                <Textarea
+                    id="roleAndTasks"
+                    name="roleAndTasks"
+                    placeholder={t('build.forExample')}
+                    maxLength={1000}
+                    className="mt-2 min-h-32"
+                    value={formData.roleAndTasks}
+                    onChange={handleChange}
+                />
+                {errors.roleAndTasks && <p className="bisheng-tip mt-1">{errors.roleAndTasks}</p>}
+            </div>
+        </div>
+        <DialogFooter>
+            <DialogClose>
+                <Button variant="outline" className="px-11" type="button" onClick={() => setFormData({ name: '', roleAndTasks: '' })}>{t('cancle')}</Button>
+            </DialogClose>
+            <Button disabled={loading} type="submit" className="px-11" onClick={handleSubmit}>
+                {loading && <LoadIcon className="mr-2" />}
+                {t('build.create')}</Button>
+        </DialogFooter>
+    </DialogContent>
+};