diff --git a/components/SmartChatBox/SmartChatBox.tsx b/components/SmartChatBox/SmartChatBox.tsx index 7ba47fe..39cb4c9 100644 --- a/components/SmartChatBox/SmartChatBox.tsx +++ b/components/SmartChatBox/SmartChatBox.tsx @@ -19,6 +19,8 @@ interface SmartChatBoxProps { onClearPreview?: () => void; setIsFocusChatInput?: (v: boolean) => void; aiEditingResult?: any; + /** 新消息回调:用于外层处理未展开时的气泡提示 */ + onNewMessage?: (snippet: string) => void; } interface MessageGroup { @@ -47,7 +49,8 @@ export default function SmartChatBox({ previewVideoId, onClearPreview, setIsFocusChatInput, - aiEditingResult + aiEditingResult, + onNewMessage }: SmartChatBoxProps) { // 消息列表引用 const listRef = useRef(null); @@ -103,6 +106,23 @@ export default function SmartChatBox({ onMessagesUpdate: handleMessagesUpdate }); + // 监听消息新增,向外层抛出前10个字符的文本片段 + const prevLenRef = useRef(0); + useEffect(() => { + const len = messages.length; + if (len > prevLenRef.current && len > 0) { + const last = messages[len - 1]; + // 提取第一个文本块 + const textBlock = last.blocks.find(b => (b as any).type === 'text') as any; + const text = textBlock?.text || ''; + if (text && onNewMessage) { + const snippet = text.slice(0, 20); + onNewMessage(snippet); + } + } + prevLenRef.current = len; + }, [messages, onNewMessage]); + // 监听智能剪辑结果,自动发送消息到聊天框 // useEffect(() => { // if (aiEditingResult && isSmartChatBoxOpen) { diff --git a/components/pages/work-flow.tsx b/components/pages/work-flow.tsx index 95e5fa1..0114a13 100644 --- a/components/pages/work-flow.tsx +++ b/components/pages/work-flow.tsx @@ -10,7 +10,7 @@ import { MediaViewer } from "./work-flow/media-viewer"; import { ThumbnailGrid } from "./work-flow/thumbnail-grid"; import { useWorkflowData } from "./work-flow/use-workflow-data"; import { usePlaybackControls } from "./work-flow/use-playback-controls"; -import { Bot, TestTube } from "lucide-react"; +import { Bot, TestTube, MessageCircle } from "lucide-react"; import { GlassIconButton } from '@/components/ui/glass-icon-button'; import { SaveEditUseCase } from "@/app/service/usecase/SaveEditUseCase"; import { useSearchParams } from "next/navigation"; @@ -48,6 +48,8 @@ const WorkFlow = React.memo(function WorkFlow() { const [isEditModalOpen, setIsEditModalOpen] = React.useState(false); const [activeEditTab, setActiveEditTab] = React.useState('1'); const [isSmartChatBoxOpen, setIsSmartChatBoxOpen] = React.useState(true); + const [chatTip, setChatTip] = React.useState(null); + const [hasUnread, setHasUnread] = React.useState(false); const [previewVideoUrl, setPreviewVideoUrl] = React.useState(null); const [previewVideoId, setPreviewVideoId] = React.useState(null); const [isFocusChatInput, setIsFocusChatInput] = React.useState(false); @@ -617,15 +619,30 @@ Please process this video editing request.`; {/* 智能对话按钮 */}
{isMobile ? ( - setIsSmartChatBoxOpen(true)} - className="backdrop-blur-lg" - /> +
+ {(!isSmartChatBoxOpen && chatTip) && ( +
+ {chatTip} +
+ )} + {/* 红点徽标 */} + {(!isSmartChatBoxOpen && hasUnread) && ( + + )} + { + setIsSmartChatBoxOpen(true); + setChatTip(null); + setHasUnread(false); + }} + className="backdrop-blur-lg bg-custom-purple border-transparent hover:opacity-90" + /> +
) : ( { + if (!isSmartChatBoxOpen && snippet) { + setChatTip(snippet); + setHasUnread(true); + // 3秒后自动消失 + setTimeout(() => setChatTip(null), 3000); + } + }} onClearPreview={() => { setPreviewVideoUrl(null); setPreviewVideoId(null);