From d77b9922a608ff5b554415e3b8f0af42b04b595c Mon Sep 17 00:00:00 2001
From: Henry Li <henry1943@163.com>
Date: Wed, 21 Jan 2026 08:50:15 +0800
Subject: [PATCH] feat: make artifact "floating"

---
 frontend/src/app/workspace/chats/[thread_id]/page.tsx      | 7 ++++---
 .../workspace/artifacts/artifact-file-detail.tsx           | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/workspace/chats/[thread_id]/page.tsx b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
index 88237ab..4af06a3 100644
--- a/frontend/src/app/workspace/chats/[thread_id]/page.tsx
+++ b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
@@ -98,7 +98,7 @@ export default function ChatPage() {
         <ResizablePanel
           className="relative"
           defaultSize={artifactsOpen ? 46 : 100}
-          minSize={30}
+          minSize={artifactsOpen ? 30 : 100}
         >
           <div className="relative flex size-full min-h-0 justify-between">
             <header className="bg-background/80 absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center px-4 backdrop-blur">
@@ -168,7 +168,7 @@ export default function ChatPage() {
         </ResizablePanel>
         <ResizableHandle
           className={cn(
-            "transition-opacity duration-300",
+            "opacity-33 hover:opacity-100",
             !artifactsOpen && "pointer-events-none opacity-0",
           )}
         />
@@ -179,10 +179,11 @@ export default function ChatPage() {
           )}
           defaultSize={artifactsOpen ? 64 : 0}
           minSize={0}
+          maxSize={artifactsOpen ? undefined : 0}
         >
           <div
             className={cn(
-              "h-full transition-transform duration-300 ease-in-out",
+              "h-full p-4 transition-transform duration-300 ease-in-out",
               artifactsOpen ? "translate-x-0" : "translate-x-full",
             )}
           >
diff --git a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
index 16716a0..37b5efc 100644
--- a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
+++ b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
@@ -79,7 +79,7 @@ export function ArtifactFileDetail({
     }
   }, [previewable]);
   return (
-    <Artifact className={cn("rounded-none", className)}>
+    <Artifact className={cn(className)}>
       <ArtifactHeader className="px-2">
         <div className="flex items-center gap-2">
           <ArtifactTitle>