1

src/pages/SkillPage/components/CreateAssistant.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { LoadIcon } from "../../../components/bs-icons/loading";
 import { Button } from "../../../components/bs-ui/button";
@@ -7,6 +7,10 @@ import { Input, Textarea } from "../../../components/bs-ui/input";
 import { createAssistantsApi } from "../../../controllers/API/assistant";
 import { captureAndAlertRequestErrorHoc } from "../../../controllers/request";
 import { useTranslation } from "react-i18next";
+import { TitleIconBg } from "@/components/bs-comp/cardComponent";
+import { uploadFileWithProgress, uploadNpcHeaderLibFileWithProgress } from "../../../modals/UploadModal/upload";
+import huifumoren from "../../../assets/npc/huifumoren.png";
+import npcIcon from "../../../assets/npc/npcIcon.png";
 
 export default function CreateAssistant() {
 
@@ -67,7 +71,13 @@ export default function CreateAssistant() {
         setErrors(formErrors);
         return isValid;
     };
-
+    const [avatar_img, setAvatar_img] = useState("")
+    const [avatar_color, setAvatar_color] = useState("")
+    const randomNum = Math.floor(Math.random()*(4-0+1)+0).toString();
+    useEffect(() => {
+        if (avatar_color != "") return
+        setAvatar_color(randomNum);
+    }, [avatar_color]);
     // Handle form submission
     const navigate = useNavigate()
     const handleSubmit = async (e) => {
@@ -77,7 +87,7 @@ export default function CreateAssistant() {
         if (isValid) {
             console.log('Form data:', formData);
             setLoading(true)
-            const res = await captureAndAlertRequestErrorHoc(createAssistantsApi(formData.name, formData.roleAndTasks))
+            const res = await captureAndAlertRequestErrorHoc(createAssistantsApi(formData.name, formData.roleAndTasks, avatar_img, avatar_color))
             if (res) {
                 window.assistantCreate = true // 标记新建助手
                 navigate('/assistant/' + res.id)
@@ -85,12 +95,46 @@ export default function CreateAssistant() {
             setLoading(false)
         }
     };
+    const handleButtonClick = () => {
+        // Create a file input element
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "image/*";
+        input.style.display = "none"; // Hidden from view
+        input.multiple = false; // Allow only one file selection
+    
+        input.onchange = (e: Event) => {
+          setLoading(true);
+          // Get the selected file
+          const file = (e.target as HTMLInputElement).files?.[0];
+          // Check if the file type is correct
+          // Upload the file
+          uploadNpcHeaderLibFileWithProgress(file, (progress) => { }).then(res => {
+            setLoading(false);
+            setAvatar_img(res);
+          })
+        };
+        // Trigger the file selection dialog
+        input.click();
+    };
 
-    return <DialogContent className="sm:max-w-[625px] bg-[#000000]">
+    return <DialogContent className="sm:max-w-[625px] bg-[#262626]">
         <DialogHeader>
             <DialogTitle className="text-[#fff]">创建NPC</DialogTitle>
         </DialogHeader>
         <div className="flex flex-col gap-8 py-6">
+            <div>
+                <label htmlFor="name" className="bisheng-label text-[#999999]"><span className="bisheng-tip text-[#FF6060]">* </span>NPC头像</label>
+                {/* <TitleIconBg className="w-[40px] h-[40px] min-w-[40px]" img={item.avatar_img} id={item.avatar_color ? item.avatar_color : item.id} ><img src={item.avatar_img ? item.avatar_img : npcIcon} alt="" /></TitleIconBg> */}
+                
+                <div className="flex items-center ml-[7px] mt-[6px]">
+                    <TitleIconBg className="w-[41px] h-[41px] min-w-[41px]" img={avatar_img} id={avatar_color} ><img onClick={handleButtonClick} src={avatar_img ? avatar_img : npcIcon} alt="" /></TitleIconBg>
+                    <div className="flex items-center justify-center ml-[20px] w-[95px] h-[27px] bg-[#333333] cursor-pointer" style={{borderRadius:"14px"}} onClick={() => setAvatar_img("")}>
+                        <img src={huifumoren} className="w-[12px] h-[11px]" alt="" />
+                        <span className="ml-[5px] text-[#999999] text-[12px] mt-[1px]">恢复默认</span>
+                    </div>
+                </div>
+            </div>
             <div className="">
                 <label htmlFor="name" className="bisheng-label text-[#999999]"><span className="bisheng-tip text-[#FF6060]">* </span>NPC名称</label>
                 <Input id="name" name="name" placeholder="给NPC取一个名字" className="mt-2 npcInput" value={formData.name} onChange={handleChange} />