feat: integrated with artifacts

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

@@ -0,0 +1,14 @@
+import { FileIcon } from "lucide-react";
+
+export function ArtifactFileDetail({ filepath }: { filepath: string }) {
+  return (
+    <div className="flex size-full items-center justify-center">
+      <div className="flex items-center gap-2">
+        <div>
+          <FileIcon />
+        </div>
+        <div>{filepath}</div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,53 @@
+import { DownloadIcon } from "lucide-react";
+import { useCallback } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { getFileExtension, getFileName } from "@/core/utils/files";
+import { cn } from "@/lib/utils";
+
+import { useArtifacts } from "./context";
+
+export function ArtifactFileList({
+  className,
+  files,
+}: {
+  className?: string;
+  files: string[];
+}) {
+  const { openArtifact } = useArtifacts();
+  const handleClick = useCallback(
+    (filepath: string) => {
+      openArtifact(filepath);
+    },
+    [openArtifact],
+  );
+  return (
+    <ul className={cn("flex w-full flex-col gap-4", className)}>
+      {files.map((file) => (
+        <Card
+          className="cursor-pointer"
+          key={file}
+          onClick={() => handleClick(file)}
+        >
+          <CardHeader>
+            <CardTitle>{getFileName(file)}</CardTitle>
+            <CardDescription>{getFileExtension(file)} file</CardDescription>
+            <CardAction>
+              <Button variant="ghost">
+                <DownloadIcon className="size-4" />
+                Download
+              </Button>
+            </CardAction>
+          </CardHeader>
+        </Card>
+      ))}
+    </ul>
+  );
+}

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

@@ -0,0 +1,58 @@
+import { createContext, useContext, useState, type ReactNode } from "react";
+
+export interface ArtifactsContextType {
+  artifacts: string[];
+  selectedArtifact: string | null;
+
+  open: boolean;
+  setOpen: (open: boolean) => void;
+
+  addArtifacts: (artifacts: string[]) => void;
+  openArtifact: (artifact: string) => void;
+}
+
+const ArtifactsContext = createContext<ArtifactsContextType | undefined>(
+  undefined,
+);
+
+interface ArtifactsProviderProps {
+  children: ReactNode;
+}
+
+export function ArtifactsProvider({ children }: ArtifactsProviderProps) {
+  const [artifacts, setArtifacts] = useState<string[]>([]);
+  const [selectedArtifact, setSelectedArtifact] = useState<string | null>(null);
+  const [open, setOpen] = useState(false);
+
+  const addArtifacts = (newArtifacts: string[]) => {
+    setArtifacts((prev) => [...prev, ...newArtifacts]);
+  };
+
+  const openArtifact = (artifact: string) => {
+    setSelectedArtifact(artifact);
+    setOpen(true);
+  };
+
+  const value: ArtifactsContextType = {
+    artifacts,
+    selectedArtifact,
+    open,
+    setOpen,
+    addArtifacts,
+    openArtifact,
+  };
+
+  return (
+    <ArtifactsContext.Provider value={value}>
+      {children}
+    </ArtifactsContext.Provider>
+  );
+}
+
+export function useArtifacts() {
+  const context = useContext(ArtifactsContext);
+  if (context === undefined) {
+    throw new Error("useArtifacts must be used within an ArtifactsProvider");
+  }
+  return context;
+}

frontend/src/components/workspace/artifacts/index.ts

@@ -0,0 +1,3 @@
+export * from "./artifact-file-detail";
+export * from "./artifact-file-list";
+export * from "./context";