From 09fc676a35d3b028af2cbff9b79127491d32460c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=B7=E9=BE=99?= <inksnowhailong@gmail.com>
Date: Sun, 17 Aug 2025 11:43:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=88=9B=E5=BB=BA=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E7=9A=84=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/ChatInputBox.tsx | 107 ++++++++++++++++-------------
 1 file changed, 59 insertions(+), 48 deletions(-)

diff --git a/components/common/ChatInputBox.tsx b/components/common/ChatInputBox.tsx
index 87d9c95..0bd7966 100644
--- a/components/common/ChatInputBox.tsx
+++ b/components/common/ChatInputBox.tsx
@@ -31,6 +31,8 @@ import { useImageStoryServiceHook } from "@/app/service/Interaction/ImageStorySe
 import TemplateCard from "./templateCard";
 import { AudioRecorder } from "./AudioRecorder";
 import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService";
+import { createScriptEpisodeNew } from "@/api/script_episode";
+import { useRouter } from "next/navigation";
 
 // 自定义音频播放器样式
 const customAudioPlayerStyles = `
@@ -489,6 +491,7 @@ export function ChatInputBox() {
 
   // 共享状态 - 需要在不同渲染函数间共享
   const [script, setScript] = useState(""); // 用户输入的脚本内容
+  const router = useRouter();
 
   // 子组件引用，用于调用子组件方法
   const photoStoryModeRef = useRef<{
@@ -506,6 +509,8 @@ export function ChatInputBox() {
     }
   }, [isPhotoStoryMode]);
 
+
+
   const [loadingIdea, setLoadingIdea] = useState(false); // 获取创意建议时的加载状态
   const [isCreating, setIsCreating] = useState(false); // 视频创建过程中的加载状态
 
@@ -533,11 +538,7 @@ export function ChatInputBox() {
     }, 3000);
   };
 
-  // Handle editor content changes
-  const handleEditorChange = (e: React.FormEvent<HTMLDivElement>) => {
-    const newText = e.currentTarget.textContent || "";
-    setScript(newText);
-  };
+
 
   // 当进入图片故事模式时，调用子组件方法
   const enterPhotoStoryMode = () => {
@@ -550,21 +551,34 @@ export function ChatInputBox() {
   };
 
   // Handle creating video
+
   const handleCreateVideo = async () => {
     setIsCreating(true);
-    // 这里可以添加实际的创建逻辑
-    console.log("创建视频:", {
-      script,
-      ...configOptions,
-      ...(isPhotoStoryMode && {
-        // 从子组件获取图片故事相关信息
-        isPhotoStoryMode: true,
-      }),
-    });
-    setTimeout(() => {
-      setIsCreating(false);
-    }, 2000);
-  };
+    const User = JSON.parse(localStorage.getItem("currentUser") || "{}");
+
+    // 创建剧集数据
+    let episodeData: any = {
+      user_id: String(User.id),
+      script: script,
+      mode: configOptions.mode,
+      resolution: configOptions.resolution,
+      language: configOptions.language,
+      video_duration: configOptions.videoDuration
+    };
+
+    // 调用创建剧集API
+    const episodeResponse = await createScriptEpisodeNew(episodeData);
+    console.log('episodeResponse', episodeResponse);
+    if (episodeResponse.code !== 0) {
+      console.error(`创建剧集失败: ${episodeResponse.message}`);
+      alert(`创建剧集失败: ${episodeResponse.message}`);
+      return;
+    }
+    let episodeId = episodeResponse.data.project_id;
+    // let episodeId = '9c34fcc4-c8d8-44fc-879e-9bd56f608c76';
+    router.push(`/create/work-flow?episodeId=${episodeId}`);
+    setIsCreating(false);
+  }
 
   return (
     <div className="video-tool-component relative max-w-[1080px] w-full left-[50%] translate-x-[-50%]">
@@ -655,37 +669,34 @@ export function ChatInputBox() {
               />
 
               <div className="video-prompt-editor relative flex flex-1 items-center rounded-[6px]">
-                {/* 可编辑的脚本输入区域 */}
-                <div
-                  className="editor-content flex-1 w-0 max-h-[48px] min-h-[40px] h-auto pl-[10px] pr-[10px] py-[10px] rounded-[10px] leading-[20px] text-sm border-none overflow-y-auto cursor-text flex items-center"
-                  contentEditable={true}
-                  onInput={handleEditorChange}
-                  suppressContentEditableWarning
-                >
-                  {script}
-                </div>
+                                 {/* 简单的文本输入框 */}
+                 <input
+                   type="text"
+                   value={script}
+                   onChange={(e) => setScript(e.target.value)}
+                   placeholder="Describe the content you want to action..."
+                   className="flex-1 w-0 pl-[10px] pr-[10px] py-[10px] rounded-[10px] leading-[20px] text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none"
+                 />
 
-                {/* 占位符文本和获取创意按钮 */}
-                <div
-                  className={`custom-placeholder absolute top-[50%] left-[10px] z-10 translate-y-[-50%] flex items-center gap-1 pointer-events-none text-[14px] leading-[20px] text-white/[0.40] ${
-                    script ? "hidden" : "block"
-                  }`}
-                >
-                  <span>Describe the content you want to action. Get an </span>
-                  <b
-                    className="idea-link inline-flex items-center gap-0.5 text-white/[0.50] font-normal cursor-pointer pointer-events-auto underline"
-                    onClick={() => handleGetIdea()}
-                  >
-                    {loadingIdea ? (
-                      <Loader2 className="w-4 h-4 animate-spin" />
-                    ) : (
-                      <>
-                        <Lightbulb className="w-4 h-4" />
-                        idea
-                      </>
-                    )}
-                  </b>
-                </div>
+                                 {/* 获取创意按钮 */}
+                 {!script && (
+                   <div className="absolute top-[50%] right-[10px] z-10 translate-y-[-50%] flex items-center gap-1">
+                     <span className="text-[14px] leading-[20px] text-white/[0.40]">Get an </span>
+                     <button
+                       className="idea-link inline-flex items-center gap-0.5 text-white/[0.50] font-normal underline hover:text-white/[0.70] transition-colors"
+                       onClick={() => handleGetIdea()}
+                     >
+                       {loadingIdea ? (
+                         <Loader2 className="w-4 h-4 animate-spin" />
+                       ) : (
+                         <>
+                           <Lightbulb className="w-4 h-4" />
+                           idea
+                         </>
+                       )}
+                     </button>
+                   </div>
+                 )}
               </div>
 
               {/* Action按钮 */}