From cd004dcc4f39cf5b16141c524ef8e46347014931 Mon Sep 17 00:00:00 2001
From: moux1024 <403053463@qq.com>
Date: Tue, 23 Sep 2025 13:23:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20chatbox=20h5=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SmartChatBox/InputBar.tsx        |  5 +++-
 components/SmartChatBox/MessageRenderer.tsx |  4 ++-
 components/SmartChatBox/SmartChatBox.tsx    | 17 +++++++------
 components/pages/work-flow.tsx              | 27 +++++++++++++++++----
 4 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/components/SmartChatBox/InputBar.tsx b/components/SmartChatBox/InputBar.tsx
index 5ff55b4..ecea67d 100644
--- a/components/SmartChatBox/InputBar.tsx
+++ b/components/SmartChatBox/InputBar.tsx
@@ -4,6 +4,8 @@ import { MessageBlock } from "./types";
 import { useUploadFile } from "@/app/service/domain/service";
 import { motion, AnimatePresence } from "framer-motion";
 import { QuickActionTags, QuickAction } from "./QuickActionTags";
+import { useDeviceType } from '@/hooks/useDeviceType';
+
 
 // 防抖函数
 function debounce<T extends (...args: any[]) => void>(func: T, wait: number) {
@@ -35,6 +37,7 @@ export function InputBar({ onSend, setVideoPreview, initialVideoUrl, initialVide
   const [videoUrl, setVideoUrl] = useState<string | null>(initialVideoUrl || null);
   const [videoId, setVideoId] = useState<string | null>(initialVideoId || null);
   const [isMultiline, setIsMultiline] = useState(false);
+const { isMobile, isTablet, isDesktop } = useDeviceType();
   
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const { uploadFile } = useUploadFile();
@@ -174,7 +177,7 @@ export function InputBar({ onSend, setVideoPreview, initialVideoUrl, initialVide
   };
 
   return (
-    <div data-alt="input-bar">
+    <div data-alt="input-bar" className={`${isMobile ? 'absolute bottom-0 left-0 right-0 bg-[#141414]' : ''}`}>
       {/* 媒体预览 */}
       <div className="px-3 pt-3 flex gap-2" data-alt="media-preview">
         {/* 图片预览 */}
diff --git a/components/SmartChatBox/MessageRenderer.tsx b/components/SmartChatBox/MessageRenderer.tsx
index cd99578..84a1715 100644
--- a/components/SmartChatBox/MessageRenderer.tsx
+++ b/components/SmartChatBox/MessageRenderer.tsx
@@ -5,6 +5,7 @@ import { bubbleVariants, hhmm } from "./utils";
 import { ProgressBar } from "./ProgressBar";
 import { Loader2, AlertCircle, CheckCircle2 } from "lucide-react";
 import { Image } from 'antd';
+import { useDeviceType } from '@/hooks/useDeviceType';
 
 interface MessageRendererProps {
   msg: ChatMessage;
@@ -15,6 +16,7 @@ export function MessageRenderer({ msg, sendMessage }: MessageRendererProps) {
   // Decide bubble style
   const isUser = msg.role === "user";
   const isSystem = msg.role === "system";
+  const { isMobile, isTablet, isDesktop } = useDeviceType();
 
   const bubbleClass = useMemo(() => {
     if (isSystem) return "bg-[#281c1459] text-white";
@@ -78,7 +80,7 @@ export function MessageRenderer({ msg, sendMessage }: MessageRendererProps) {
       data-alt="message-bubble"
       key={msg.id}
     >
-      <div className={`max-w-[75%] rounded-2xl shadow-md p-3 ${bubbleClass}`}>
+      <div className={`${isMobile ? 'max-w-full' : 'max-w-[75%]'} rounded-2xl shadow-md p-3 ${bubbleClass}`}>
         {/* Header */}
         {/* <div className="flex items-center gap-2 text-[11px] opacity-80 mb-1">
           {badge}
diff --git a/components/SmartChatBox/SmartChatBox.tsx b/components/SmartChatBox/SmartChatBox.tsx
index a8ec19e..7ba47fe 100644
--- a/components/SmartChatBox/SmartChatBox.tsx
+++ b/components/SmartChatBox/SmartChatBox.tsx
@@ -7,6 +7,7 @@ import { useMessages } from "./useMessages";
 import { DateDivider } from "./DateDivider";
 import { LoadMoreButton } from "./LoadMoreButton";
 import { ChatMessage } from "./types";
+import { useDeviceType } from '@/hooks/useDeviceType';
 
 interface SmartChatBoxProps {
   isSmartChatBoxOpen: boolean;
@@ -51,7 +52,7 @@ export default function SmartChatBox({
   // 消息列表引用
   const listRef = useRef<HTMLDivElement>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
-
+  const { isMobile, isTablet, isDesktop } = useDeviceType();
   // 检查是否滚动到底部
   const checkIfAtBottom = useCallback(() => {
     if (listRef.current) {
@@ -148,18 +149,18 @@ export default function SmartChatBox({
   }, [messages]);
 
   return (
-    <div className="h-full w-full text-gray-100 flex flex-col" data-alt="smart-chat-box">
+    <div className={`${isMobile ? 'z-[49]' : 'h-full'} w-full text-gray-100 flex flex-col`} data-alt="smart-chat-box">
       {/* Header */}
-      <div className="px-4 py-3 border-b border-white/10 flex items-center justify-between" data-alt="chat-header">
+      <div className={`px-4 py-3 border-b border-white/10 flex items-center justify-between ${isMobile ? 'sticky top-0 bg-[#141414] z-[1]' : ''}`} data-alt="chat-header">
         <div className="font-semibold flex items-center gap-2">
           <span>Chat</span>
           {/* System push toggle */}
           <Switch 
-            checkedChildren="On" 
-            unCheckedChildren="Off" 
-            checked={systemPush} 
-            onChange={toggleSystemPush} 
-            className="ml-2 " 
+            checkedChildren="On"
+            unCheckedChildren="Off"
+            checked={systemPush}
+            onChange={toggleSystemPush}
+            className="ml-2"
           />
         </div>
         <div className="text-xs opacity-70">
diff --git a/components/pages/work-flow.tsx b/components/pages/work-flow.tsx
index 6c2ecb9..8f66dc7 100644
--- a/components/pages/work-flow.tsx
+++ b/components/pages/work-flow.tsx
@@ -235,6 +235,11 @@ const WorkFlow = React.memo(function WorkFlow() {
     toggleVideoPlay,
   } = usePlaybackControls(taskObject.videos.data, taskObject.currentStage);
 
+  useEffect(() => {
+    if (isMobile) {
+      setIsSmartChatBoxOpen(false);
+    }
+  }, [isMobile]);
   useEffect(() => {
     console.log('changedIndex_work-flow', currentSketchIndex, taskObject);
   }, [currentSketchIndex, taskObject]);
@@ -613,6 +618,14 @@ Please process this video editing request.`;
       <div
         className="fixed right-[1rem] bottom-[10rem] z-[49]"
       >
+        {isMobile ? (
+          <GlassIconButton
+            icon={Bot}
+            size='md'
+            onClick={() => setIsSmartChatBoxOpen(true)}
+            className="backdrop-blur-lg"
+          />
+        ) : (
         <Tooltip title="Open chat" placement="left">
           <GlassIconButton
             icon={Bot}
@@ -621,12 +634,13 @@ Please process this video editing request.`;
             className="backdrop-blur-lg"
           />
         </Tooltip>
+        )}
       </div>
 
       {/* 智能对话弹窗 */}
       <Drawer
-        width="25%"
-        placement="right"
+        width={isMobile ? '100vw' : '25%'}
+        placement={isMobile ? 'bottom' : 'right'}
         closable={false}
         maskClosable={false}
         open={isSmartChatBoxOpen}
@@ -638,15 +652,18 @@ Please process this video editing request.`;
         className="backdrop-blur-lg bg-black/30 border border-white/20 shadow-xl"
         style={{
           backgroundColor: 'transparent',
-          borderBottomLeftRadius: 10,
-          borderTopLeftRadius: 10,
+          ...(isMobile
+            ? { borderTopLeftRadius: 10, borderTopRightRadius: 10 }
+            : { borderBottomLeftRadius: 10, borderTopLeftRadius: 10 }),
           overflow: 'hidden',
         }}
         styles={{
           body: {
             backgroundColor: 'transparent',
             padding: 0,
-          },
+            maxHeight: '100vh',
+            overflow: 'auto',
+          }
         }}
         onClose={() => setIsSmartChatBoxOpen(false)}
       >