feat: set artifacts layout

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) => {