From adc12c13f9f5e08791c2996d07ea2f7e2255725e Mon Sep 17 00:00:00 2001
From: Huarch <huarch97@outlook.com>
Date: Mon, 30 Mar 2026 17:05:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=81=8A=E5=A4=A9=E6=A1=86?=
 =?UTF-8?q?=E5=8F=AF=E8=B0=83=E6=95=B4=E5=AE=BD=E5=BA=A6=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chat/GlobalChatbox.tsx | 64 ++++++++++++++++++++++++++-
 1 file changed, 62 insertions(+), 2 deletions(-)

diff --git a/src/components/chat/GlobalChatbox.tsx b/src/components/chat/GlobalChatbox.tsx
index 817da9c..e1cbed4 100644
--- a/src/components/chat/GlobalChatbox.tsx
+++ b/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} />