添加聊天框可调整宽度功能，优化用户体验

src/components/chat/GlobalChatbox.tsx

@@ -293,6 +293,8 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
   const [messages, setMessages] = useState<Message[]>(initialChatStateRef.current.messages);
   const [input, setInput] = useState("");
   const [isStreaming, setIsStreaming] = useState(false);
+  const [width, setWidth] = useState(480);
+  const [isResizing, setIsResizing] = useState(false);
   const [conversationId, setConversationId] = useState<string | undefined>(
     initialChatStateRef.current.conversationId
   );
@@ -431,6 +433,35 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
     }, 0);
   }, [handleHeaderMenuClose]);
 
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsResizing(true);
+  }, []);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isResizing) return;
+      const newWidth = window.innerWidth - e.clientX;
+      if (newWidth > 320 && newWidth < 1200) {
+        setWidth(newWidth);
+      }
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    if (isResizing) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    }
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isResizing]);
+
   const renderedMessages = useMemo(
     () =>
       messages.map((message) => (
@@ -454,11 +485,12 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
       sx={{ zIndex: (muiTheme) => muiTheme.zIndex.modal + 100 }}
       PaperProps={{
         sx: {
-          width: { xs: "100%", sm: 480 },
+          width: { xs: "100%", sm: width },
           background: "transparent",
           boxShadow: "none",
-          overflow: "hidden", // Clip blobs
+          overflow: "visible", // Changed from "hidden" to show resizer handle if needed, though handle is inside.
           zIndex: (muiTheme) => muiTheme.zIndex.modal + 100,
+          transition: isResizing ? "none" : "width 0.2s cubic-bezier(0, 0, 0.2, 1)", // Disable transition during resize
         },
       }}
     >
@@ -472,6 +504,34 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
           position: "relative",
         }}
       >
+        {/* Resize Handle */}
+        <Box
+          onMouseDown={handleMouseDown}
+          sx={{
+            position: "absolute",
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: "6px",
+            cursor: "col-resize",
+            zIndex: 200,
+            "&:hover": {
+              bgcolor: alpha(theme.palette.primary.main, 0.2),
+            },
+            "&::after": {
+              content: '""',
+              position: "absolute",
+              left: "50%",
+              top: "50%",
+              transform: "translate(-50%, -50%)",
+              width: "2px",
+              height: "40px",
+              bgcolor: alpha(theme.palette.divider, 0.4),
+              borderRadius: "1px",
+            }
+          }}
+        />
+
         {/* Ambient Blobs */}
         <Blob color={alpha(theme.palette.primary.main, 0.3)} size={300} top="-10%" left="-20%" delay={0} />
         <Blob color={alpha(theme.palette.secondary.main, 0.3)} size={250} top="40%" left="60%" delay={2} />