feat: set artifacts layout

frontend/src/app/workspace/chats/[thread_id]/layout.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { ArtifactsProvider } from "@/components/workspace/artifacts";
+
+export default function ChatLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <ArtifactsProvider>{children}</ArtifactsProvider>;
+}

frontend/src/app/workspace/chats/[thread_id]/page.tsx

@@ -1,41 +1,48 @@
 "use client";
 
-import type { UseStream } from "@langchain/langgraph-sdk/react";
+import { FilesIcon, XIcon } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
-import { BreadcrumbItem } from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable";
+import { useSidebar } from "@/components/ui/sidebar";
 import {
   ArtifactFileDetail,
-  ArtifactsProvider,
   useArtifacts,
 } from "@/components/workspace/artifacts";
+import { FlipDisplay } from "@/components/workspace/flip-display";
 import { InputBox } from "@/components/workspace/input-box";
 import { MessageList } from "@/components/workspace/messages";
-import {
-  WorkspaceContainer,
-  WorkspaceBody,
-  WorkspaceHeader,
-} from "@/components/workspace/workspace-container";
+import { Tooltip } from "@/components/workspace/tooltip";
 import { useLocalSettings } from "@/core/settings";
-import { type AgentThread, type AgentThreadState } from "@/core/threads";
+import { type AgentThread } from "@/core/threads";
 import { useSubmitThread, useThreadStream } from "@/core/threads/hooks";
 import { pathOfThread, titleOfThread } from "@/core/threads/utils";
 import { uuid } from "@/core/utils/uuid";
+import { cn } from "@/lib/utils";
+import { ConversationEmptyState } from "@/components/ai-elements/conversation";
 
 export default function ChatPage() {
+  const router = useRouter();
+  const [settings, setSettings] = useLocalSettings();
+  const { setOpen: setSidebarOpen } = useSidebar();
+  const {
+    open: artifactsOpen,
+    setOpen: setArtifactsOpen,
+    selectedArtifact,
+  } = useArtifacts();
+
   const { thread_id: threadIdFromPath } = useParams<{ thread_id: string }>();
   const isNewThread = useMemo(
     () => threadIdFromPath === "new",
     [threadIdFromPath],
   );
   const [threadId, setThreadId] = useState<string | null>(null);
-
   useEffect(() => {
     if (threadIdFromPath !== "new") {
       setThreadId(threadIdFromPath);
@@ -43,44 +50,16 @@ export default function ChatPage() {
       setThreadId(uuid());
     }
   }, [threadIdFromPath]);
+
   const thread = useThreadStream({
     isNewThread,
     threadId,
   });
-  return (
-    <WorkspaceContainer>
-      <WorkspaceHeader>
-        <BreadcrumbItem className="hidden md:block">
-          {isNewThread
-            ? "New"
-            : titleOfThread(thread as unknown as AgentThread)}
-        </BreadcrumbItem>
-      </WorkspaceHeader>
-      <WorkspaceBody>
-        <ArtifactsProvider>
-          <ThreadDetail
-            threadId={threadId}
-            thread={thread}
-            isNewThread={isNewThread}
-          />
-        </ArtifactsProvider>
-      </WorkspaceBody>
-    </WorkspaceContainer>
+  const title = useMemo(
+    () => (isNewThread ? "" : titleOfThread(thread as unknown as AgentThread)),
+    [thread, isNewThread],
   );
-}
 
-function ThreadDetail({
-  threadId,
-  thread,
-  isNewThread,
-}: {
-  threadId?: string | null;
-  thread: UseStream<AgentThreadState>;
-  isNewThread: boolean;
-}) {
-  const router = useRouter();
-  const [settings, setSettings] = useLocalSettings();
-  const { open, selectedArtifact } = useArtifacts();
   const handleSubmit = useSubmitThread({
     isNewThread,
     threadId,
@@ -93,34 +72,106 @@ function ThreadDetail({
   const handleStop = useCallback(async () => {
     await thread.stop();
   }, [thread]);
+
   return (
     <ResizablePanelGroup orientation="horizontal">
-      <ResizablePanel className="relative" defaultSize={46}>
-        <div className="flex size-full justify-center">
-          <MessageList className="size-full" thread={thread} />
-        </div>
-        <div className="absolute right-0 bottom-0 left-0 flex justify-center px-4">
-          <InputBox
-            className="w-full max-w-(--container-width-md)"
-            autoFocus={isNewThread}
-            status={thread.isLoading ? "streaming" : "ready"}
-            context={settings.context}
-            onContextChange={(context) => setSettings("context", context)}
-            onSubmit={handleSubmit}
-            onStop={handleStop}
-          />
+      <ResizablePanel
+        className="relative"
+        defaultSize={artifactsOpen ? 46 : 100}
+        minSize={30}
+      >
+        <div className="relative flex size-full min-h-0 justify-between">
+          <header className="absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center px-4 drop-shadow-2xl backdrop-blur">
+            <div className="flex w-full items-center text-sm font-medium">
+              <FlipDisplay
+                uniqueKey={title}
+                className="w-fit overflow-hidden text-ellipsis whitespace-nowrap"
+              >
+                {title}
+              </FlipDisplay>
+            </div>
+            <div>
+              {!artifactsOpen && (
+                <Tooltip content="Show artifacts">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => {
+                      setArtifactsOpen(true);
+                      setSidebarOpen(false);
+                    }}
+                  >
+                    <FilesIcon />
+                  </Button>
+                </Tooltip>
+              )}
+            </div>
+          </header>
+          <main className="flex min-h-0 grow flex-col">
+            <div className="flex size-full justify-center">
+              <MessageList className="size-full" thread={thread} />
+            </div>
+            <div className="absolute right-0 bottom-0 left-0 flex justify-center px-4">
+              <InputBox
+                className="w-full max-w-(--container-width-md)"
+                autoFocus={isNewThread}
+                status={thread.isLoading ? "streaming" : "ready"}
+                context={settings.context}
+                onContextChange={(context) => setSettings("context", context)}
+                onSubmit={handleSubmit}
+                onStop={handleStop}
+              />
+            </div>
+          </main>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle
+        className={cn(
+          "transition-opacity duration-300",
+          !artifactsOpen && "pointer-events-none opacity-0",
+        )}
+      />
+      <ResizablePanel
+        className={cn(
+          "transition-all duration-300 ease-in-out",
+          !artifactsOpen && "opacity-0",
+        )}
+        defaultSize={artifactsOpen ? 64 : 0}
+        minSize={0}
+      >
+        <div className="absolute top-1 right-1 z-30">
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            onClick={() => {
+              setArtifactsOpen(false);
+            }}
+          >
+            <XIcon />
+          </Button>
+        </div>
+        <div
+          className={cn(
+            "h-full transition-transform duration-300 ease-in-out",
+            artifactsOpen ? "translate-x-0" : "translate-x-full",
+          )}
+        >
+          {selectedArtifact ? (
+            <ArtifactFileDetail
+              className="size-full"
+              filepath={selectedArtifact}
+            />
+          ) : (
+            <div className="flex size-full items-center justify-center">
+              <ConversationEmptyState
+                icon={<FilesIcon />}
+                title="No artifact selected"
+                description="Select an artifact to view its details"
+              />
+            </div>
+          )}
         </div>
       </ResizablePanel>
-      {open && (
-        <>
-          <ResizableHandle />
-          <ResizablePanel defaultSize={64}>
-            {selectedArtifact && (
-              <ArtifactFileDetail filepath={selectedArtifact} />
-            )}
-          </ResizablePanel>
-        </>
-      )}
     </ResizablePanelGroup>
   );
 }

frontend/src/app/workspace/layout.tsx

@@ -28,6 +28,7 @@ export default function WorkspaceLayout({
   return (
     <QueryClientProvider client={queryClient}>
       <SidebarProvider
+        className="h-screen"
         style={
           {
             "--sidebar-width": "calc(var(--spacing) * 72)",

frontend/src/components/workspace/artifacts/artifact-file-detail.tsx

@@ -1,23 +1,22 @@
-import { FileIcon, XIcon } from "lucide-react";
-import { useCallback } from "react";
+import { FileIcon } from "lucide-react";
 
-import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
-import { useArtifacts } from "./context";
-
-export function ArtifactFileDetail({ filepath }: { filepath: string }) {
-  const { setOpen } = useArtifacts();
-  const handleClose = useCallback(() => {
-    setOpen(false);
-  }, [setOpen]);
+export function ArtifactFileDetail({
+  className,
+  filepath,
+}: {
+  className?: string;
+  filepath: string;
+}) {
   return (
-    <div className="relative flex size-full items-center justify-center">
-      <div className="absolute top-1 right-1">
-        <Button size="icon-sm" variant="ghost" onClick={handleClose}>
-          <XIcon />
-        </Button>
-      </div>
-      <div className="flex items-center gap-2">
+    <div
+      className={cn(
+        "relative flex size-full items-center justify-center",
+        className,
+      )}
+    >
+      <div className="flex size-fit items-center gap-2">
         <div>
           <FileIcon />
         </div>

frontend/src/components/workspace/artifacts/context.tsx

@@ -1,5 +1,7 @@
 import { createContext, useContext, useState, type ReactNode } from "react";
 
+import { useSidebar } from "@/components/ui/sidebar";
+
 export interface ArtifactsContextType {
   artifacts: string[];
   selectedArtifact: string | null;
@@ -23,6 +25,7 @@ export function ArtifactsProvider({ children }: ArtifactsProviderProps) {
   const [artifacts, setArtifacts] = useState<string[]>([]);
   const [selectedArtifact, setSelectedArtifact] = useState<string | null>(null);
   const [open, setOpen] = useState(false);
+  const { setOpen: setSidebarOpen } = useSidebar();
 
   const addArtifacts = (newArtifacts: string[]) => {
     setArtifacts((prev) => [...prev, ...newArtifacts]);
@@ -31,6 +34,7 @@ export function ArtifactsProvider({ children }: ArtifactsProviderProps) {
   const openArtifact = (artifact: string) => {
     setSelectedArtifact(artifact);
     setOpen(true);
+    setSidebarOpen(false);
   };
 
   const value: ArtifactsContextType = {

frontend/src/components/workspace/messages/message-list.tsx

@@ -32,9 +32,9 @@ export function MessageList({
   }
   return (
     <Conversation
-      className={cn("flex size-full flex-col justify-center pt-2", className)}
+      className={cn("flex size-full flex-col justify-center", className)}
     >
-      <ConversationContent className="mx-auto w-full max-w-(--container-width-md) gap-10">
+      <ConversationContent className="mx-auto w-full max-w-(--container-width-md) gap-10 pt-12">
         {groupMessages(
           thread.messages,
           (groupedMessages) => {