给消息key

components/SmartChatBox/MessageRenderer.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { motion } from "framer-motion";
-import { ChatMessage } from "./types";
+import { ChatMessage, MessageBlock } from "./types";
 import { bubbleVariants, hhmm } from "./utils";
 import { ProgressBar } from "./ProgressBar";
 import { Loader2, AlertCircle, CheckCircle2 } from "lucide-react";
@@ -8,9 +8,10 @@ import { Image } from 'antd';
 
 interface MessageRendererProps {
   msg: ChatMessage;
+  sendMessage: (blocks: MessageBlock[]) => Promise<void>;
 }
 
-export function MessageRenderer({ msg }: MessageRendererProps) {
+export function MessageRenderer({ msg, sendMessage }: MessageRendererProps) {
   // Decide bubble style
   const isUser = msg.role === "user";
   const isSystem = msg.role === "system";
@@ -75,6 +76,7 @@ export function MessageRenderer({ msg }: MessageRendererProps) {
       animate="visible"
       transition={{ duration: 0.25 }}
       data-alt="message-bubble"
+      key={msg.id}
     >
       <div className={`max-w-[75%] rounded-2xl shadow-md p-3 ${bubbleClass}`}>
         {/* Header */}
@@ -126,6 +128,11 @@ export function MessageRenderer({ msg }: MessageRendererProps) {
                 return <ProgressBar key={idx} value={b.value} total={b.total} label={b.label} />;
               case "link":
                 return <a key={idx} href={b.url} className="underline hover:underline text-[rgb(111 208 211)]">{b.text}</a>;
+              case "applyButton":
+                return <button key={idx} className="bg-[#6fd0d3] text-white px-2 py-1 rounded-md" onClick={() => {
+                  // 帮用户发送一条消息，消息内容是：confirm apply
+                  sendMessage([{ type: "text", text: "confirm apply" }]);
+                }}>{b.text}</button>;
               default:
                 return null;
             }

components/SmartChatBox/SmartChatBox.tsx

@@ -161,7 +161,7 @@ export default function SmartChatBox({
             <React.Fragment key={group.date}>
               <DateDivider timestamp={group.date} />
               {group.messages.map((message) => (
-                <MessageRenderer key={message.id} msg={message} />
+                <MessageRenderer key={message.id} msg={message} sendMessage={sendMessage} />
               ))}
             </React.Fragment>
           ))}

components/SmartChatBox/api.ts

@@ -239,6 +239,11 @@ function transformMessage(apiMessage: RealApiMessage): ChatMessage {
               message.blocks.push({ type: "link", text: c.content, url: c.url || '' });
             }
           });
+
+          // todo: 需要确认是否需要添加applyButton
+          // if (role === 'assistant' && function_name === 'modify_video_with_runway') {
+          //   message.blocks.push({ type: "applyButton", text: "Apply" });
+          // }
         } catch (error) {
           // 如果 JSON 解析失败，将整个 content 作为文本内容
           message.blocks.push({ type: "text", text: content });

components/SmartChatBox/types.ts

@@ -8,7 +8,8 @@ export type MessageBlock =
   | { type: "video"; url: string; poster?: string }
   | { type: "audio"; url: string }
   | { type: "progress"; value: number; total?: number; label?: string }
-  | { type: "link"; text: string; url: string };
+  | { type: "link"; text: string; url: string }
+  | { type: "applyButton"; text: string; }
 
 export interface ChatMessage {
   id: string;
@@ -80,7 +81,7 @@ export interface MessagesResponse {
 }
 
 type ContentType = "text" | "image" | "video" | "audio";
-export type FunctionName = "create_project" | "generate_script_summary" | "generate_character" | "generate_sketch" | "generate_shot_sketch" | "generate_video";
+export type FunctionName = "create_project" | "generate_script_summary" | "generate_character" | "generate_sketch" | "generate_shot_sketch" | "generate_video" | "modify_video_with_runway";
 
 // 项目创建
 export interface ProjectInit {

components/pages/work-flow/use-workflow-data.tsx

@@ -115,7 +115,7 @@ export function useWorkflowData() {
 
   const generateEditPlan = useCallback(async (isInit?: boolean) => {
     isInit && await getGenerateEditPlan({ project_id: episodeId });
-    window.open(`https://smartcut.huiying.video/ai-editor/${episodeId}?token=${token}&user_id=${useid}`, '_target');
+    window.open(`https://smartcut.movieflow.ai/editor/${episodeId}?token=${token}&user_id=${useid}`, '_target');
   }, [episodeId]);
 
   useEffect(() => {