feat: make artifact "floating"

This commit is contained in:
Henry Li
2026-01-21 08:50:15 +08:00
parent adfce3c79c
commit 28d724d55a
2 changed files with 5 additions and 4 deletions

View File

@@ -98,7 +98,7 @@ export default function ChatPage() {
<ResizablePanel <ResizablePanel
className="relative" className="relative"
defaultSize={artifactsOpen ? 46 : 100} defaultSize={artifactsOpen ? 46 : 100}
minSize={30} minSize={artifactsOpen ? 30 : 100}
> >
<div className="relative flex size-full min-h-0 justify-between"> <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"> <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> </ResizablePanel>
<ResizableHandle <ResizableHandle
className={cn( className={cn(
"transition-opacity duration-300", "opacity-33 hover:opacity-100",
!artifactsOpen && "pointer-events-none opacity-0", !artifactsOpen && "pointer-events-none opacity-0",
)} )}
/> />
@@ -179,10 +179,11 @@ export default function ChatPage() {
)} )}
defaultSize={artifactsOpen ? 64 : 0} defaultSize={artifactsOpen ? 64 : 0}
minSize={0} minSize={0}
maxSize={artifactsOpen ? undefined : 0}
> >
<div <div
className={cn( 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", artifactsOpen ? "translate-x-0" : "translate-x-full",
)} )}
> >

View File

@@ -79,7 +79,7 @@ export function ArtifactFileDetail({
} }
}, [previewable]); }, [previewable]);
return ( return (
<Artifact className={cn("rounded-none", className)}> <Artifact className={cn(className)}>
<ArtifactHeader className="px-2"> <ArtifactHeader className="px-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<ArtifactTitle> <ArtifactTitle>