feat:update create content rewrite

components/form/content/audio-form.tsx

@@ -40,6 +40,7 @@ import { uploadThumbnailBlog } from "@/service/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
 import {
   generateDataArticle,
+  generateDataRewrite,
   getDetailArticle,
   getGenerateKeywords,
   getGenerateTitle,
@@ -55,6 +56,7 @@ import dynamic from "next/dynamic";
 import { getCsrfToken } from "@/service/auth";
 import { Link } from "@/i18n/routing";
 import { useTranslations } from "next-intl";
+import { useParams } from "next/navigation";
 
 interface FileWithPreview extends File {
   preview: string;
@@ -82,6 +84,10 @@ export default function FormAudio() {
   const router = useRouter();
   const editor = useRef(null);
   type AudioSchema = z.infer<typeof audioSchema>;
+  const params = useParams();
+  const locale = params?.locale;
+
+  const [selectedFileType, setSelectedFileType] = useState("original");
 
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const taskId = Cookies.get("taskId");
@@ -97,6 +103,11 @@ export default function FormAudio() {
   const [preview, setPreview] = useState<string | null>(null);
   const [selectedLanguage, setSelectedLanguage] = useState("");
 
+  const [selectedWritingStyle, setSelectedWritingStyle] =
+    useState("professional");
+  const [editorContent, setEditorContent] = useState(""); // Untuk original editor
+  const [rewriteEditorContent, setRewriteEditorContent] = useState("");
+
   const [selectedSEO, setSelectedSEO] = useState<string>("");
   const [title, setTitle] = useState<string>("");
   const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
@@ -111,7 +122,6 @@ export default function FormAudio() {
     null
   );
   const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
-  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
   const [selectedSize, setSelectedSize] = useState("");
   const [detailData, setDetailData] = useState<any>(null);
   const [articleImages, setArticleImages] = useState<string[]>([]);
@@ -133,6 +143,8 @@ export default function FormAudio() {
   const [isStartUpload, setIsStartUpload] = useState(false);
   const [counterProgress, setCounterProgress] = useState(0);
 
+  const [isContentRewriteClicked, setIsContentRewriteClicked] = useState(false);
+  const [showRewriteEditor, setShowRewriteEditor] = useState(false);
   const [files, setFiles] = useState<FileWithPreview[]>([]);
   const [publishedFor, setPublishedFor] = useState<string[]>([]);
 
@@ -155,15 +167,11 @@ export default function FormAudio() {
 
   const audioSchema = z.object({
     title: z.string().min(1, { message: "Judul diperlukan" }),
-    description: z
+    description: z.string().optional(),
-      .string()
+    descriptionOri: z.string().optional(), // Original editor
-      .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." })
+    rewriteDescription: z.string().optional(), // Rewrite editor
-      .or(
-        z.literal(articleBody || "").refine((val) => val.length > 0, {
-          message: "Deskripsi diperlukan.",
-        })
-      ),
     creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+
     // tags: z.string().min(1, { message: "Judul diperlukan" }),
   });
 
@@ -175,6 +183,11 @@ export default function FormAudio() {
     formState: { errors },
   } = useForm<AudioSchema>({
     resolver: zodResolver(audioSchema),
+    defaultValues: {
+      description: "",
+      descriptionOri: "",
+      rewriteDescription: "",
+    },
   });
 
   const doGenerateMainKeyword = async () => {
@@ -437,12 +450,24 @@ export default function FormAudio() {
     }
   };
 
+  useEffect(() => {
+    if (articleBody) {
+      // Set ke dua field jika rewrite juga aktif
+      setValue("description", articleBody);
+      setValue("rewriteDescription", articleBody);
+    }
+  }, [articleBody, setValue]);
+
   const save = async (data: AudioSchema) => {
     loading();
     const finalTags = tags.join(", ");
     const finalTitle = isSwitchOn ? title : data.title;
-    const finalDescription = articleBody || data.description;
+    const finalDescription = isSwitchOn
-    if (!finalDescription.trim()) {
+      ? data.description
+      : selectedFileType === "rewrite"
+      ? data.rewriteDescription
+      : data.descriptionOri;
+    if (!finalDescription?.trim()) {
       MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
       return;
     }
@@ -719,6 +744,45 @@ export default function FormAudio() {
     }
   }, [title, getValues, setValue]);
 
+  const handleRewriteClick = async () => {
+    setIsContentRewriteClicked(true);
+
+    const request = {
+      style: selectedWritingStyle,
+      lang: "id",
+      contextType: "text",
+      urlContext: null,
+      context: editorContent, // Ambil isi editor original
+      createdBy: roleId,
+      sentiment: "Humorous",
+      clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
+    };
+
+    const res = await generateDataRewrite(request);
+    close();
+
+    if (res?.error) {
+      console.error(res.message);
+      return false;
+    }
+
+    const newArticleId = res?.data?.data?.id;
+    setIsGeneratedArticle(true);
+
+    setArticleIds((prevIds: string[]) => {
+      if (prevIds.length < 3) {
+        return [...prevIds, newArticleId];
+      } else {
+        const updatedIds = [...prevIds];
+        updatedIds[2] = newArticleId;
+        return updatedIds;
+      }
+    });
+
+    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+    setShowRewriteEditor(true);
+  };
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex flex-col lg:flex-row gap-10">
@@ -861,7 +925,7 @@ export default function FormAudio() {
                         placeholder="Enter Main Keyword"
                       />
                       {/* )}
-                  /> */}
+                                /> */}
                     </div>
                   </div>
                   <div className="mt-5">
@@ -911,7 +975,7 @@ export default function FormAudio() {
                     </div>
                   </div>
                   <div className="mt-5">
-                    <Label>{t("special-instructions")} (Optional)</Label>
+                    <Label>{t("special-instructions")}(Optional)</Label>
                     <div className="mt-3">
                       <Controller
                         control={control}
@@ -940,7 +1004,7 @@ export default function FormAudio() {
                     </div>
 
                     {isGeneratedArticle && (
-                      <div className="mt-3 pb-0 flex flex-row ">
+                      <div className="mt-3 pb-0 flex flex-row">
                         {articleIds.map((id: string, index: number) => (
                           <p
                             key={index}
@@ -960,50 +1024,155 @@ export default function FormAudio() {
                     <div className="pt-3">
                       <div className="flex flex-row justify-between items-center">
                         {selectedArticleId && (
-                          <Link
+                          <Button
-                            href={`/contributor/content/audio/update-seo/${selectedArticleId}`}
+                            className="mb-2"
-                            target="_blank"
+                            size="sm"
-                            rel="noopener noreferrer"
+                            variant={"outline"}
+                            color="primary"
+                            onClick={() => {
+                              const url = `/${locale}/contributor/content/image/update-seo/${selectedArticleId}`;
+                              window.open(url, "_blank", "noopener,noreferrer");
+                            }}
                           >
-                            <Button
+                            {t("update")}
-                              className="mb-2"
+                          </Button>
-                              size="sm"
-                              variant={"outline"}
-                              color="primary"
-                            >
-                              {t("update")}
-                            </Button>
-                          </Link>
                         )}
                       </div>
                     </div>
                   </div>
+                  <div className="py-3 space-y-2">
+                    <Label>{t("description")}</Label>
+                    <Controller
+                      control={control}
+                      name="description"
+                      render={({ field: { onChange, value } }) =>
+                        isLoadingData ? (
+                          <div className="flex justify-center items-center h-40">
+                            <p className="text-gray-500">
+                              Loading Proses Data...
+                            </p>
+                          </div>
+                        ) : (
+                          <CustomEditor
+                            onChange={(value: any) => {
+                              onChange(value);
+                              setEditorContent(value);
+                            }}
+                            initialData={articleBody || value}
+                          />
+                        )
+                      }
+                    />
+                    {errors.description?.message && (
+                      <p className="text-red-400 text-sm">
+                        {errors.description.message}
+                      </p>
+                    )}
+                  </div>
                 </div>
               )}
-              <div className="space-y-2">
+              {!isSwitchOn && (
-                <Label>{t("description")}</Label>
+                <>
-                <Controller
+                  <RadioGroup
-                  control={control}
+                    onValueChange={(value) => setSelectedFileType(value)}
-                  name="description"
+                    value={selectedFileType}
-                  render={({ field: { onChange, value } }) =>
+                    className=" grid-cols-1"
-                    isLoadingData ? (
+                  >
-                      <div className="flex justify-center items-center h-40">
+                    <div className="">
-                        <p className="text-gray-500">Loading Proses Data...</p>
+                      <RadioGroupItem value="original" id="original-file" />
-                      </div>
+                      <Label htmlFor="original-file">
-                    ) : (
+                        Select Original Description
-                      <CustomEditor
+                      </Label>
-                        onChange={onChange}
+                    </div>
-                        initialData={articleBody || value}
+                    <div className="py-3 space-y-2">
+                      <Label>{t("description")}</Label>
+                      <Controller
+                        control={control}
+                        name="descriptionOri"
+                        render={({ field: { onChange, value } }) => (
+                          <CustomEditor
+                            onChange={(value: any) => {
+                              onChange(value);
+                              setEditorContent(value);
+                            }}
+                            initialData={value}
+                          />
+                        )}
                       />
-                    )
+                      {errors.description?.message && (
-                  }
+                        <p className="text-red-400 text-sm">
-                />
+                          {errors.description.message}
-                {errors.description?.message && (
+                        </p>
-                  <p className="text-red-400 text-sm">
+                      )}
-                    {errors.description.message}
+                    </div>
-                  </p>
+
-                )}
+                    <p className="text-sm font-semibold">Content Rewrite</p>
-              </div>
+                    <div className="my-2">
+                      <Button
+                        size="sm"
+                        type="button"
+                        onClick={handleRewriteClick}
+                        className="bg-blue-500 text-white py-2 px-4 rounded"
+                      >
+                        Content Rewrite
+                      </Button>
+                    </div>
+
+                    {showRewriteEditor && (
+                      <div>
+                        {isGeneratedArticle && (
+                          <div className="mt-3 pb-0 flex flex-row ">
+                            {articleIds.map((id: string, index: number) => (
+                              <Button
+                                type="button"
+                                key={index}
+                                className={`mr-3 px-3 py-2 rounded-md ${
+                                  selectedArticleId === id
+                                    ? "bg-green-500 text-white"
+                                    : "border-2 border-green-500 bg-white  text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500"
+                                }`}
+                                onClick={() => handleArticleIdClick(id)}
+                              >
+                                {"Narasi " + (index + 1)}
+                              </Button>
+                            ))}
+                          </div>
+                        )}
+                        <div className="flex items-center space-x-2 mt-3">
+                          <RadioGroupItem value="rewrite" id="rewrite-file" />
+                          <Label htmlFor="rewrite-file">
+                            Select Description Rewrite
+                          </Label>
+                        </div>
+                        <div className="py-3 space-y-2">
+                          <Label>{t("file-rewrite")}</Label>
+                          <Controller
+                            control={control}
+                            name="rewriteDescription"
+                            render={({ field: { onChange, value } }) =>
+                              isLoadingData ? (
+                                <div className="flex justify-center items-center h-40">
+                                  <p className="text-gray-500">
+                                    Loading Proses Data...
+                                  </p>
+                                </div>
+                              ) : (
+                                <CustomEditor
+                                  onChange={(value: any) => {
+                                    onChange(value);
+                                    setRewriteEditorContent(value);
+                                  }}
+                                  initialData={articleBody || value}
+                                />
+                              )
+                            }
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </RadioGroup>
+                </>
+              )}
               <div className="py-3 space-y-2">
                 <Label>{t("select-file")}</Label>
                 {/* <Input

components/form/content/image-form.tsx

@@ -40,6 +40,7 @@ import { uploadThumbnailBlog } from "@/service/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
 import {
   generateDataArticle,
+  generateDataRewrite,
   getDetailArticle,
   getGenerateKeywords,
   getGenerateTitle,
@@ -94,6 +95,7 @@ export default function FormImage() {
   const scheduleId = Cookies.get("scheduleId");
   const scheduleType = Cookies.get("scheduleType");
   const roleId = getCookiesDecrypt("urie");
+  const [selectedFileType, setSelectedFileType] = useState("original");
 
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategory, setSelectedCategory] = useState<any>();
@@ -116,7 +118,10 @@ export default function FormImage() {
     null
   );
   const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
-  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
+  const [selectedWritingStyle, setSelectedWritingStyle] =
+    useState("professional");
+  const [editorContent, setEditorContent] = useState(""); // Untuk original editor
+  const [rewriteEditorContent, setRewriteEditorContent] = useState("");
   const [selectedSize, setSelectedSize] = useState("");
   const [detailData, setDetailData] = useState<any>(null);
   const [articleImages, setArticleImages] = useState<string[]>([]);
@@ -125,6 +130,8 @@ export default function FormImage() {
 
   const [content, setContent] = useState("");
 
+  const [isContentRewriteClicked, setIsContentRewriteClicked] = useState(false);
+
   const [selectedTarget, setSelectedTarget] = useState("");
   const [unitSelection, setUnitSelection] = useState({
     allUnit: false,
@@ -140,6 +147,7 @@ export default function FormImage() {
   let uploadPersen = 0;
   const [isStartUpload, setIsStartUpload] = useState(false);
   const [counterProgress, setCounterProgress] = useState(0);
+  const [showRewriteEditor, setShowRewriteEditor] = useState(false);
 
   const [files, setFiles] = useState<FileWithPreview[]>([]);
   const [filesTemp, setFilesTemp] = useState<File[]>([]);
@@ -164,16 +172,10 @@ export default function FormImage() {
 
   const imageSchema = z.object({
     title: z.string().min(1, { message: "Judul diperlukan" }),
-    description: z
+    description: z.string().optional(),
-      .string()
+    descriptionOri: z.string().optional(),
-      .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." })
+    rewriteDescription: z.string().optional(),
-      .or(
-        z.literal(articleBody || "").refine((val) => val.length > 0, {
-          message: "Deskripsi diperlukan.",
-        })
-      ),
     creatorName: z.string().min(1, { message: "Creator diperlukan" }),
-    // tags: z.string().min(1, { message: "Judul diperlukan" }),
   });
 
   const {
@@ -184,6 +186,11 @@ export default function FormImage() {
     formState: { errors },
   } = useForm<ImageSchema>({
     resolver: zodResolver(imageSchema),
+    defaultValues: {
+      description: "",
+      descriptionOri: "",
+      rewriteDescription: "",
+    },
   });
 
   const doGenerateMainKeyword = async () => {
@@ -446,13 +453,25 @@ export default function FormImage() {
     }
   };
 
+  useEffect(() => {
+    if (articleBody) {
+      setValue("description", articleBody);
+      setValue("rewriteDescription", articleBody);
+    }
+  }, [articleBody, setValue]);
+
   const save = async (data: ImageSchema) => {
     loading();
     const finalTags = tags.join(", ");
     const finalTitle = isSwitchOn ? title : data.title;
-    const finalDescription = articleBody || data.description;
+    // const finalDescription = articleBody || data.description;
+    const finalDescription = isSwitchOn
+      ? data.description
+      : selectedFileType === "rewrite"
+      ? data.rewriteDescription
+      : data.descriptionOri;
 
-    if (!finalDescription.trim()) {
+    if (!finalDescription?.trim()) {
       MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
       return;
     }
@@ -716,6 +735,45 @@ export default function FormImage() {
     }
   }, [title, getValues, setValue]);
 
+  const handleRewriteClick = async () => {
+    setIsContentRewriteClicked(true);
+
+    const request = {
+      style: selectedWritingStyle,
+      lang: "id",
+      contextType: "text",
+      urlContext: null,
+      context: editorContent, // Ambil isi editor original
+      createdBy: roleId,
+      sentiment: "Humorous",
+      clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
+    };
+
+    const res = await generateDataRewrite(request);
+    close();
+
+    if (res?.error) {
+      console.error(res.message);
+      return false;
+    }
+
+    const newArticleId = res?.data?.data?.id;
+    setIsGeneratedArticle(true);
+
+    setArticleIds((prevIds: string[]) => {
+      if (prevIds.length < 3) {
+        return [...prevIds, newArticleId];
+      } else {
+        const updatedIds = [...prevIds];
+        updatedIds[2] = newArticleId;
+        return updatedIds;
+      }
+    });
+
+    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+    setShowRewriteEditor(true);
+  };
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex flex-col lg:flex-row gap-10">
@@ -930,6 +988,7 @@ export default function FormImage() {
                         color="primary"
                         onClick={handleGenerateArtikel}
                         size="sm"
+                        type="button"
                       >
                         Generate Article
                       </Button>
@@ -972,32 +1031,139 @@ export default function FormImage() {
                       </div>
                     </div>
                   </div>
+                  <div className="py-3 space-y-2">
+                    <Label>{t("description")}</Label>
+                    <Controller
+                      control={control}
+                      name="description"
+                      render={({ field: { onChange, value } }) =>
+                        isLoadingData ? (
+                          <div className="flex justify-center items-center h-40">
+                            <p className="text-gray-500">
+                              Loading Proses Data...
+                            </p>
+                          </div>
+                        ) : (
+                          <CustomEditor
+                            onChange={(value: any) => {
+                              onChange(value);
+                              setEditorContent(value);
+                            }}
+                            initialData={articleBody || value}
+                          />
+                        )
+                      }
+                    />
+                    {errors.description?.message && (
+                      <p className="text-red-400 text-sm">
+                        {errors.description.message}
+                      </p>
+                    )}
+                  </div>
                 </div>
               )}
-              <div className="py-3 space-y-2">
+              {!isSwitchOn && (
-                <Label>{t("description")}</Label>
+                <>
-                <Controller
+                  <RadioGroup
-                  control={control}
+                    onValueChange={(value) => setSelectedFileType(value)}
-                  name="description"
+                    value={selectedFileType}
-                  render={({ field: { onChange, value } }) =>
+                    className=" grid-cols-1"
-                    isLoadingData ? (
+                  >
-                      <div className="flex justify-center items-center h-40">
+                    <div className="">
-                        <p className="text-gray-500">Loading Proses Data...</p>
+                      <RadioGroupItem value="original" id="original-file" />
-                      </div>
+                      <Label htmlFor="original-file">
-                    ) : (
+                        Select Original Description
-                      <CustomEditor
+                      </Label>
-                        onChange={onChange}
+                    </div>
-                        initialData={articleBody || value}
+                    <div className="py-3 space-y-2">
+                      <Label>{t("description")}</Label>
+                      <Controller
+                        control={control}
+                        name="descriptionOri"
+                        render={({ field: { onChange, value } }) => (
+                          <CustomEditor
+                            onChange={(value: any) => {
+                              onChange(value);
+                              setEditorContent(value);
+                            }}
+                            initialData={value}
+                          />
+                        )}
                       />
-                    )
+                      {errors.description?.message && (
-                  }
+                        <p className="text-red-400 text-sm">
-                />
+                          {errors.description.message}
-                {errors.description?.message && (
+                        </p>
-                  <p className="text-red-400 text-sm">
+                      )}
-                    {errors.description.message}
+                    </div>
-                  </p>
+
-                )}
+                    <p className="text-sm font-semibold">Content Rewrite</p>
-              </div>
+                    <div className="my-2">
+                      <Button
+                        size="sm"
+                        type="button"
+                        onClick={handleRewriteClick}
+                        className="bg-blue-500 text-white py-2 px-4 rounded"
+                      >
+                        Content Rewrite
+                      </Button>
+                    </div>
+
+                    {showRewriteEditor && (
+                      <div>
+                        {isGeneratedArticle && (
+                          <div className="mt-3 pb-0 flex flex-row ">
+                            {articleIds.map((id: string, index: number) => (
+                              <Button
+                                type="button"
+                                key={index}
+                                className={`mr-3 px-3 py-2 rounded-md ${
+                                  selectedArticleId === id
+                                    ? "bg-green-500 text-white"
+                                    : "border-2 border-green-500 bg-white  text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500"
+                                }`}
+                                onClick={() => handleArticleIdClick(id)}
+                              >
+                                {"Narasi " + (index + 1)}
+                              </Button>
+                            ))}
+                          </div>
+                        )}
+                        <div className="flex items-center space-x-2 mt-3">
+                          <RadioGroupItem value="rewrite" id="rewrite-file" />
+                          <Label htmlFor="rewrite-file">
+                            Select Description Rewrite
+                          </Label>
+                        </div>
+                        <div className="py-3 space-y-2">
+                          <Label>{t("file-rewrite")}</Label>
+                          <Controller
+                            control={control}
+                            name="rewriteDescription"
+                            render={({ field: { onChange, value } }) =>
+                              isLoadingData ? (
+                                <div className="flex justify-center items-center h-40">
+                                  <p className="text-gray-500">
+                                    Loading Proses Data...
+                                  </p>
+                                </div>
+                              ) : (
+                                <CustomEditor
+                                  onChange={(value: any) => {
+                                    onChange(value);
+                                    setRewriteEditorContent(value);
+                                  }}
+                                  initialData={articleBody || value}
+                                />
+                              )
+                            }
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </RadioGroup>
+                </>
+              )}
               <div className="py-3 space-y-2">
                 <Label>{t("select-file")}</Label>
                 {/* <Input

components/form/content/teks-form.tsx

@@ -16,7 +16,7 @@ import * as z from "zod";
 import { Upload } from "tus-js-client";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { redirect, useRouter } from "next/navigation";
+import { redirect, useParams, useRouter } from "next/navigation";
 import {
   Select,
   SelectContent,
@@ -40,6 +40,7 @@ import { uploadThumbnailBlog } from "@/service/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
 import {
   generateDataArticle,
+  generateDataRewrite,
   getDetailArticle,
   getGenerateKeywords,
   getGenerateTitle,
@@ -83,11 +84,15 @@ export default function FormTeks() {
   const editor = useRef(null);
   type TeksSchema = z.infer<typeof teksSchema>;
 
+  const params = useParams();
+  const locale = params?.locale;
+
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const taskId = Cookies.get("taskId");
   const scheduleId = Cookies.get("scheduleId");
   const scheduleType = Cookies.get("scheduleType");
   const roleId = getCookiesDecrypt("urie");
+  const [selectedFileType, setSelectedFileType] = useState("original");
 
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategory, setSelectedCategory] = useState<any>();
@@ -102,6 +107,10 @@ export default function FormTeks() {
   const [editingArticleId, setEditingArticleId] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
+  const [selectedWritingStyle, setSelectedWritingStyle] =
+    useState("professional");
+  const [editorContent, setEditorContent] = useState(""); // Untuk original editor
+  const [rewriteEditorContent, setRewriteEditorContent] = useState("");
 
   const [articleIds, setArticleIds] = useState<string[]>([]);
   const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
@@ -109,8 +118,9 @@ export default function FormTeks() {
   const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
     null
   );
+  const [isContentRewriteClicked, setIsContentRewriteClicked] = useState(false);
+  const [showRewriteEditor, setShowRewriteEditor] = useState(false);
   const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
-  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
   const [selectedSize, setSelectedSize] = useState("");
   const [detailData, setDetailData] = useState<any>(null);
   const [articleImages, setArticleImages] = useState<string[]>([]);
@@ -157,14 +167,9 @@ export default function FormTeks() {
 
   const teksSchema = z.object({
     title: z.string().min(1, { message: "Judul diperlukan" }),
-    description: z
+    description: z.string().optional(),
-      .string()
+    descriptionOri: z.string().optional(), // Original editor
-      .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." })
+    rewriteDescription: z.string().optional(),
-      .or(
-        z.literal(articleBody || "").refine((val) => val.length > 0, {
-          message: "Deskripsi diperlukan.",
-        })
-      ),
     creatorName: z.string().min(1, { message: "Creator diperlukan" }),
     // tags: z.string().min(1, { message: "Judul diperlukan" }),
   });
@@ -177,6 +182,11 @@ export default function FormTeks() {
     formState: { errors },
   } = useForm<TeksSchema>({
     resolver: zodResolver(teksSchema),
+    defaultValues: {
+      description: "",
+      descriptionOri: "",
+      rewriteDescription: "",
+    },
   });
 
   const doGenerateMainKeyword = async () => {
@@ -439,12 +449,26 @@ export default function FormTeks() {
     }
   };
 
+  useEffect(() => {
+    if (articleBody) {
+      // Set ke dua field jika rewrite juga aktif
+      setValue("description", articleBody);
+      setValue("rewriteDescription", articleBody);
+    }
+  }, [articleBody, setValue]);
+
   const save = async (data: TeksSchema) => {
     loading();
     const finalTags = tags.join(", ");
     const finalTitle = isSwitchOn ? title : data.title;
-    const finalDescription = articleBody || data.description;
+
-    if (!finalDescription.trim()) {
+    const finalDescription = isSwitchOn
+      ? data.description
+      : selectedFileType === "rewrite"
+      ? data.rewriteDescription
+      : data.descriptionOri;
+
+    if (!finalDescription?.trim()) {
       MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
       return;
     }
@@ -709,6 +733,45 @@ export default function FormTeks() {
     }
   }, [title, getValues, setValue]);
 
+  const handleRewriteClick = async () => {
+    setIsContentRewriteClicked(true);
+
+    const request = {
+      style: selectedWritingStyle,
+      lang: "id",
+      contextType: "text",
+      urlContext: null,
+      context: editorContent, // Ambil isi editor original
+      createdBy: roleId,
+      sentiment: "Humorous",
+      clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
+    };
+
+    const res = await generateDataRewrite(request);
+    close();
+
+    if (res?.error) {
+      console.error(res.message);
+      return false;
+    }
+
+    const newArticleId = res?.data?.data?.id;
+    setIsGeneratedArticle(true);
+
+    setArticleIds((prevIds: string[]) => {
+      if (prevIds.length < 3) {
+        return [...prevIds, newArticleId];
+      } else {
+        const updatedIds = [...prevIds];
+        updatedIds[2] = newArticleId;
+        return updatedIds;
+      }
+    });
+
+    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+    setShowRewriteEditor(true);
+  };
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex flex-col lg:flex-row gap-10">
@@ -851,7 +914,7 @@ export default function FormTeks() {
                         placeholder="Enter Main Keyword"
                       />
                       {/* )}
-                  /> */}
+                               /> */}
                     </div>
                   </div>
                   <div className="mt-5">
@@ -901,7 +964,7 @@ export default function FormTeks() {
                     </div>
                   </div>
                   <div className="mt-5">
-                    <Label>{t("special-instructions")} (Optional)</Label>
+                    <Label>{t("special-instructions")}(Optional)</Label>
                     <div className="mt-3">
                       <Controller
                         control={control}
@@ -923,13 +986,14 @@ export default function FormTeks() {
                         color="primary"
                         onClick={handleGenerateArtikel}
                         size="sm"
+                        type="button"
                       >
                         Generate Article
                       </Button>
                     </div>
 
                     {isGeneratedArticle && (
-                      <div className="mt-3 pb-0 flex flex-row ">
+                      <div className="mt-3 pb-0 flex flex-row">
                         {articleIds.map((id: string, index: number) => (
                           <p
                             key={index}
@@ -949,50 +1013,155 @@ export default function FormTeks() {
                     <div className="pt-3">
                       <div className="flex flex-row justify-between items-center">
                         {selectedArticleId && (
-                          <Link
+                          <Button
-                            href={`/contributor/content/teks/update-seo/${selectedArticleId}`}
+                            className="mb-2"
-                            target="_blank"
+                            size="sm"
-                            rel="noopener noreferrer"
+                            variant={"outline"}
+                            color="primary"
+                            onClick={() => {
+                              const url = `/${locale}/contributor/content/image/update-seo/${selectedArticleId}`;
+                              window.open(url, "_blank", "noopener,noreferrer");
+                            }}
                           >
-                            <Button
+                            {t("update")}
-                              className="mb-2"
+                          </Button>
-                              size="sm"
-                              variant={"outline"}
-                              color="primary"
-                            >
-                              {t("update")}
-                            </Button>
-                          </Link>
                         )}
                       </div>
                     </div>
                   </div>
+                  <div className="py-3 space-y-2">
+                    <Label>{t("description")}</Label>
+                    <Controller
+                      control={control}
+                      name="description"
+                      render={({ field: { onChange, value } }) =>
+                        isLoadingData ? (
+                          <div className="flex justify-center items-center h-40">
+                            <p className="text-gray-500">
+                              Loading Proses Data...
+                            </p>
+                          </div>
+                        ) : (
+                          <CustomEditor
+                            onChange={(value: any) => {
+                              onChange(value);
+                              setEditorContent(value);
+                            }}
+                            initialData={articleBody || value}
+                          />
+                        )
+                      }
+                    />
+                    {errors.description?.message && (
+                      <p className="text-red-400 text-sm">
+                        {errors.description.message}
+                      </p>
+                    )}
+                  </div>
                 </div>
               )}
-              <div className="space-y-2">
+              {!isSwitchOn && (
-                <Label>{t("description")}</Label>
+                <>
-                <Controller
+                  <RadioGroup
-                  control={control}
+                    onValueChange={(value) => setSelectedFileType(value)}
-                  name="description"
+                    value={selectedFileType}
-                  render={({ field: { onChange, value } }) =>
+                    className=" grid-cols-1"
-                    isLoadingData ? (
+                  >
-                      <div className="flex justify-center items-center h-40">
+                    <div className="">
-                        <p className="text-gray-500">Loading Proses Data...</p>
+                      <RadioGroupItem value="original" id="original-file" />
-                      </div>
+                      <Label htmlFor="original-file">
-                    ) : (
+                        Select Original Description
-                      <CustomEditor
+                      </Label>
-                        onChange={onChange}
+                    </div>
-                        initialData={articleBody || value}
+                    <div className="py-3 space-y-2">
+                      <Label>{t("description")}</Label>
+                      <Controller
+                        control={control}
+                        name="descriptionOri"
+                        render={({ field: { onChange, value } }) => (
+                          <CustomEditor
+                            onChange={(value: any) => {
+                              onChange(value);
+                              setEditorContent(value);
+                            }}
+                            initialData={value}
+                          />
+                        )}
                       />
-                    )
+                      {errors.description?.message && (
-                  }
+                        <p className="text-red-400 text-sm">
-                />
+                          {errors.description.message}
-                {errors.description?.message && (
+                        </p>
-                  <p className="text-red-400 text-sm">
+                      )}
-                    {errors.description.message}
+                    </div>
-                  </p>
+
-                )}
+                    <p className="text-sm font-semibold">Content Rewrite</p>
-              </div>
+                    <div className="my-2">
+                      <Button
+                        size="sm"
+                        type="button"
+                        onClick={handleRewriteClick}
+                        className="bg-blue-500 text-white py-2 px-4 rounded"
+                      >
+                        Content Rewrite
+                      </Button>
+                    </div>
+
+                    {showRewriteEditor && (
+                      <div>
+                        {isGeneratedArticle && (
+                          <div className="mt-3 pb-0 flex flex-row ">
+                            {articleIds.map((id: string, index: number) => (
+                              <Button
+                                type="button"
+                                key={index}
+                                className={`mr-3 px-3 py-2 rounded-md ${
+                                  selectedArticleId === id
+                                    ? "bg-green-500 text-white"
+                                    : "border-2 border-green-500 bg-white  text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500"
+                                }`}
+                                onClick={() => handleArticleIdClick(id)}
+                              >
+                                {"Narasi " + (index + 1)}
+                              </Button>
+                            ))}
+                          </div>
+                        )}
+                        <div className="flex items-center space-x-2 mt-3">
+                          <RadioGroupItem value="rewrite" id="rewrite-file" />
+                          <Label htmlFor="rewrite-file">
+                            Select Description Rewrite
+                          </Label>
+                        </div>
+                        <div className="py-3 space-y-2">
+                          <Label>{t("file-rewrite")}</Label>
+                          <Controller
+                            control={control}
+                            name="rewriteDescription"
+                            render={({ field: { onChange, value } }) =>
+                              isLoadingData ? (
+                                <div className="flex justify-center items-center h-40">
+                                  <p className="text-gray-500">
+                                    Loading Proses Data...
+                                  </p>
+                                </div>
+                              ) : (
+                                <CustomEditor
+                                  onChange={(value: any) => {
+                                    onChange(value);
+                                    setRewriteEditorContent(value);
+                                  }}
+                                  initialData={articleBody || value}
+                                />
+                              )
+                            }
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </RadioGroup>
+                </>
+              )}
               <div className="py-3 space-y-2">
                 <Label>{t("select-file")}</Label>
                 {/* <Input

components/form/content/video-form.tsx

@@ -16,7 +16,7 @@ import * as z from "zod";
 import { Upload } from "tus-js-client";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { redirect, useRouter } from "next/navigation";
+import { redirect, useParams, useRouter } from "next/navigation";
 import {
   Select,
   SelectContent,
@@ -40,6 +40,7 @@ import { uploadThumbnailBlog } from "@/service/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
 import {
   generateDataArticle,
+  generateDataRewrite,
   getDetailArticle,
   getGenerateKeywords,
   getGenerateTitle,
@@ -82,12 +83,15 @@ export default function FormVideo() {
   const router = useRouter();
   const editor = useRef(null);
   type VideoSchema = z.infer<typeof videoSchema>;
+  const params = useParams();
+  const locale = params?.locale;
 
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const taskId = Cookies.get("taskId");
   const scheduleId = Cookies.get("scheduleId");
   const scheduleType = Cookies.get("scheduleType");
   const roleId = getCookiesDecrypt("urie");
+  const [selectedFileType, setSelectedFileType] = useState("original");
 
   const t = useTranslations("Form");
   const [categories, setCategories] = useState<Category[]>([]);
@@ -97,6 +101,11 @@ export default function FormVideo() {
   const [preview, setPreview] = useState<string | null>(null);
   const [selectedLanguage, setSelectedLanguage] = useState("");
 
+  const [selectedWritingStyle, setSelectedWritingStyle] =
+    useState("professional");
+  const [editorContent, setEditorContent] = useState(""); // Untuk original editor
+  const [rewriteEditorContent, setRewriteEditorContent] = useState("");
+
   const [selectedSEO, setSelectedSEO] = useState<string>("");
   const [title, setTitle] = useState<string>("");
   const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
@@ -111,13 +120,17 @@ export default function FormVideo() {
     null
   );
   const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
-  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
+  // const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
   const [selectedSize, setSelectedSize] = useState("");
   const [detailData, setDetailData] = useState<any>(null);
   const [articleImages, setArticleImages] = useState<string[]>([]);
   const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const [showRewriteEditor, setShowRewriteEditor] = useState(false);
+
+  const [isContentRewriteClicked, setIsContentRewriteClicked] = useState(false);
+
   const [selectedTarget, setSelectedTarget] = useState("");
   const [unitSelection, setUnitSelection] = useState({
     allUnit: false,
@@ -155,14 +168,9 @@ export default function FormVideo() {
 
   const videoSchema = z.object({
     title: z.string().min(1, { message: "Judul diperlukan" }),
-    description: z
+    description: z.string().optional(),
-      .string()
+    descriptionOri: z.string().optional(), // Original editor
-      .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." })
+    rewriteDescription: z.string().optional(),
-      .or(
-        z.literal(articleBody || "").refine((val) => val.length > 0, {
-          message: "Deskripsi diperlukan.",
-        })
-      ),
     creatorName: z.string().min(1, { message: "Creator diperlukan" }),
     // tags: z.string().min(1, { message: "Judul diperlukan" }),
   });
@@ -175,6 +183,11 @@ export default function FormVideo() {
     formState: { errors },
   } = useForm<VideoSchema>({
     resolver: zodResolver(videoSchema),
+    defaultValues: {
+      description: "",
+      descriptionOri: "",
+      rewriteDescription: "",
+    },
   });
 
   const doGenerateMainKeyword = async () => {
@@ -437,15 +450,30 @@ export default function FormVideo() {
     }
   };
 
+  useEffect(() => {
+    if (articleBody) {
+      // Set ke dua field jika rewrite juga aktif
+      setValue("description", articleBody);
+      setValue("rewriteDescription", articleBody);
+    }
+  }, [articleBody, setValue]);
+
   const save = async (data: VideoSchema) => {
     loading();
     const finalTags = tags.join(", ");
     const finalTitle = isSwitchOn ? title : data.title;
-    const finalDescription = articleBody || data.description;
+    // const finalDescription = articleBody || data.description;
-    if (!finalDescription.trim()) {
+    const finalDescription = isSwitchOn
+      ? data.description
+      : selectedFileType === "rewrite"
+      ? data.rewriteDescription
+      : data.descriptionOri;
+
+    if (!finalDescription?.trim()) {
       MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
       return;
     }
+
     let requestData: {
       title: string;
       description: string;
@@ -726,6 +754,45 @@ export default function FormVideo() {
     }
   }, [title, getValues, setValue]);
 
+  const handleRewriteClick = async () => {
+    setIsContentRewriteClicked(true);
+
+    const request = {
+      style: selectedWritingStyle,
+      lang: "id",
+      contextType: "text",
+      urlContext: null,
+      context: editorContent, // Ambil isi editor original
+      createdBy: roleId,
+      sentiment: "Humorous",
+      clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
+    };
+
+    const res = await generateDataRewrite(request);
+    close();
+
+    if (res?.error) {
+      console.error(res.message);
+      return false;
+    }
+
+    const newArticleId = res?.data?.data?.id;
+    setIsGeneratedArticle(true);
+
+    setArticleIds((prevIds: string[]) => {
+      if (prevIds.length < 3) {
+        return [...prevIds, newArticleId];
+      } else {
+        const updatedIds = [...prevIds];
+        updatedIds[2] = newArticleId;
+        return updatedIds;
+      }
+    });
+
+    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+    setShowRewriteEditor(true);
+  };
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex flex-col lg:flex-row gap-10">
@@ -867,7 +934,7 @@ export default function FormVideo() {
                         placeholder="Enter Main Keyword"
                       />
                       {/* )}
-                  /> */}
+                               /> */}
                     </div>
                   </div>
                   <div className="mt-5">
@@ -917,7 +984,7 @@ export default function FormVideo() {
                     </div>
                   </div>
                   <div className="mt-5">
-                    <Label>{t("special-instructions")} (Optional)</Label>
+                    <Label>{t("special-instructions")}(Optional)</Label>
                     <div className="mt-3">
                       <Controller
                         control={control}
@@ -939,13 +1006,14 @@ export default function FormVideo() {
                         color="primary"
                         onClick={handleGenerateArtikel}
                         size="sm"
+                        type="button"
                       >
                         Generate Article
                       </Button>
                     </div>
 
                     {isGeneratedArticle && (
-                      <div className="mt-3 pb-0 flex flex-row ">
+                      <div className="mt-3 pb-0 flex flex-row">
                         {articleIds.map((id: string, index: number) => (
                           <p
                             key={index}
@@ -965,50 +1033,155 @@ export default function FormVideo() {
                     <div className="pt-3">
                       <div className="flex flex-row justify-between items-center">
                         {selectedArticleId && (
-                          <Link
+                          <Button
-                            href={`/contributor/content/video/update-seo/${selectedArticleId}`}
+                            className="mb-2"
-                            target="_blank"
+                            size="sm"
-                            rel="noopener noreferrer"
+                            variant={"outline"}
+                            color="primary"
+                            onClick={() => {
+                              const url = `/${locale}/contributor/content/image/update-seo/${selectedArticleId}`;
+                              window.open(url, "_blank", "noopener,noreferrer");
+                            }}
                           >
-                            <Button
+                            {t("update")}
-                              className="mb-2"
+                          </Button>
-                              size="sm"
-                              variant={"outline"}
-                              color="primary"
-                            >
-                              {t("update")}
-                            </Button>
-                          </Link>
                         )}
                       </div>
                     </div>
                   </div>
+                  <div className="py-3 space-y-2">
+                    <Label>{t("description")}</Label>
+                    <Controller
+                      control={control}
+                      name="description"
+                      render={({ field: { onChange, value } }) =>
+                        isLoadingData ? (
+                          <div className="flex justify-center items-center h-40">
+                            <p className="text-gray-500">
+                              Loading Proses Data...
+                            </p>
+                          </div>
+                        ) : (
+                          <CustomEditor
+                            onChange={(value: any) => {
+                              onChange(value);
+                              setEditorContent(value);
+                            }}
+                            initialData={articleBody || value}
+                          />
+                        )
+                      }
+                    />
+                    {errors.description?.message && (
+                      <p className="text-red-400 text-sm">
+                        {errors.description.message}
+                      </p>
+                    )}
+                  </div>
                 </div>
               )}
-              <div className="space-y-2">
+              {!isSwitchOn && (
-                <Label>{t("description")}</Label>
+                <>
-                <Controller
+                  <RadioGroup
-                  control={control}
+                    onValueChange={(value) => setSelectedFileType(value)}
-                  name="description"
+                    value={selectedFileType}
-                  render={({ field: { onChange, value } }) =>
+                    className=" grid-cols-1"
-                    isLoadingData ? (
+                  >
-                      <div className="flex justify-center items-center h-40">
+                    <div className="">
-                        <p className="text-gray-500">Loading Proses Data...</p>
+                      <RadioGroupItem value="original" id="original-file" />
-                      </div>
+                      <Label htmlFor="original-file">
-                    ) : (
+                        Select Original Description
-                      <CustomEditor
+                      </Label>
-                        onChange={onChange}
+                    </div>
-                        initialData={articleBody || value}
+                    <div className="py-3 space-y-2">
+                      <Label>{t("description")}</Label>
+                      <Controller
+                        control={control}
+                        name="descriptionOri"
+                        render={({ field: { onChange, value } }) => (
+                          <CustomEditor
+                            onChange={(value: any) => {
+                              onChange(value);
+                              setEditorContent(value);
+                            }}
+                            initialData={value}
+                          />
+                        )}
                       />
-                    )
+                      {errors.description?.message && (
-                  }
+                        <p className="text-red-400 text-sm">
-                />
+                          {errors.description.message}
-                {errors.description?.message && (
+                        </p>
-                  <p className="text-red-400 text-sm">
+                      )}
-                    {errors.description.message}
+                    </div>
-                  </p>
+
-                )}
+                    <p className="text-sm font-semibold">Content Rewrite</p>
-              </div>
+                    <div className="my-2">
+                      <Button
+                        size="sm"
+                        type="button"
+                        onClick={handleRewriteClick}
+                        className="bg-blue-500 text-white py-2 px-4 rounded"
+                      >
+                        Content Rewrite
+                      </Button>
+                    </div>
+
+                    {showRewriteEditor && (
+                      <div>
+                        {isGeneratedArticle && (
+                          <div className="mt-3 pb-0 flex flex-row ">
+                            {articleIds.map((id: string, index: number) => (
+                              <Button
+                                type="button"
+                                key={index}
+                                className={`mr-3 px-3 py-2 rounded-md ${
+                                  selectedArticleId === id
+                                    ? "bg-green-500 text-white"
+                                    : "border-2 border-green-500 bg-white  text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500"
+                                }`}
+                                onClick={() => handleArticleIdClick(id)}
+                              >
+                                {"Narasi " + (index + 1)}
+                              </Button>
+                            ))}
+                          </div>
+                        )}
+                        <div className="flex items-center space-x-2 mt-3">
+                          <RadioGroupItem value="rewrite" id="rewrite-file" />
+                          <Label htmlFor="rewrite-file">
+                            Select Description Rewrite
+                          </Label>
+                        </div>
+                        <div className="py-3 space-y-2">
+                          <Label>{t("file-rewrite")}</Label>
+                          <Controller
+                            control={control}
+                            name="rewriteDescription"
+                            render={({ field: { onChange, value } }) =>
+                              isLoadingData ? (
+                                <div className="flex justify-center items-center h-40">
+                                  <p className="text-gray-500">
+                                    Loading Proses Data...
+                                  </p>
+                                </div>
+                              ) : (
+                                <CustomEditor
+                                  onChange={(value: any) => {
+                                    onChange(value);
+                                    setRewriteEditorContent(value);
+                                  }}
+                                  initialData={articleBody || value}
+                                />
+                              )
+                            }
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </RadioGroup>
+                </>
+              )}
               <div className="py-3 space-y-2">
                 <Label>{t("select-file")}</Label>
                 {/* <Input