feat: integrated with artifacts

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

@@ -1,10 +1,20 @@
 "use client";
 
+import type { UseStream } from "@langchain/langgraph-sdk/react";
 import { useParams, useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { BreadcrumbItem } from "@/components/ui/breadcrumb";
-import { ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { ArtifactFileDetail } from "@/components/workspace/artifacts";
+import {
+  ArtifactsProvider,
+  useArtifacts,
+} from "@/components/workspace/artifacts/context";
 import { InputBox } from "@/components/workspace/input-box";
 import { MessageList } from "@/components/workspace/message-list/message-list";
 import {
@@ -13,20 +23,18 @@ import {
   WorkspaceHeader,
 } from "@/components/workspace/workspace-container";
 import { useLocalSettings } from "@/core/settings";
-import { type AgentThread } from "@/core/threads";
+import { type AgentThread, type AgentThreadState } from "@/core/threads";
 import { useSubmitThread, useThreadStream } from "@/core/threads/hooks";
 import { pathOfThread, titleOfThread } from "@/core/threads/utils";
 import { uuid } from "@/core/utils/uuid";
 
 export default function ChatPage() {
-  const router = useRouter();
   const { thread_id: threadIdFromPath } = useParams<{ thread_id: string }>();
   const isNewThread = useMemo(
     () => threadIdFromPath === "new",
     [threadIdFromPath],
   );
   const [threadId, setThreadId] = useState<string | null>(null);
-  const [settings, setSettings] = useLocalSettings();
 
   useEffect(() => {
     if (threadIdFromPath !== "new") {
@@ -39,6 +47,40 @@ export default function ChatPage() {
     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>
+  );
+}
+
+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,
@@ -52,36 +94,33 @@ export default function ChatPage() {
     await thread.stop();
   }, [thread]);
   return (
-    <WorkspaceContainer>
-      <WorkspaceHeader>
-        <BreadcrumbItem className="hidden md:block">
-          {isNewThread
-            ? "New"
-            : titleOfThread(thread as unknown as AgentThread)}
-        </BreadcrumbItem>
-      </WorkspaceHeader>
-      <WorkspaceBody>
-        <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}
-              />
-            </div>
+    <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}
+          />
+        </div>
+      </ResizablePanel>
+      {open && (
+        <>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={64}>
+            {selectedArtifact && (
+              <ArtifactFileDetail filepath={selectedArtifact} />
+            )}
           </ResizablePanel>
-          {/* <ResizableHandle />
-          <ResizablePanel defaultSize={64}></ResizablePanel> */}
-        </ResizablePanelGroup>
-      </WorkspaceBody>
-    </WorkspaceContainer>
+        </>
+      )}
+    </ResizablePanelGroup>
   );
 }

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

@@ -1,4 +1,5 @@
 import { DownloadIcon } from "lucide-react";
+import { useCallback } from "react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -9,12 +10,32 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { getFileExtension, getFileName } from "@/core/utils/files";
+import { cn } from "@/lib/utils";
 
-export function PresentFileList({ files }: { files: string[] }) {
+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="flex w-full flex-col gap-4">
+    <ul className={cn("flex w-full flex-col gap-4", className)}>
       {files.map((file) => (
-        <Card key={file}>
+        <Card
+          className="cursor-pointer"
+          key={file}
+          onClick={() => handleClick(file)}
+        >
           <CardHeader>
             <CardTitle>{getFileName(file)}</CardTitle>
             <CardDescription>{getFileExtension(file)} file</CardDescription>

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";

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

@@ -13,11 +13,11 @@ import {
 import type { AgentThreadState } from "@/core/threads";
 import { cn } from "@/lib/utils";
 
+import { ArtifactFileList } from "../artifacts/artifact-file-list";
 import { StreamingIndicator } from "../streaming-indicator";
 
 import { MessageGroup } from "./message-group";
 import { MessageListItem } from "./message-list-item";
-import { PresentFileList } from "./present-file-list";
 import { MessageListSkeleton } from "./skeleton";
 
 export function MessageList({
@@ -57,7 +57,7 @@ export function MessageList({
                 }
               }
               return (
-                <PresentFileList key={groupedMessages[0].id} files={files} />
+                <ArtifactFileList key={groupedMessages[0].id} files={files} />
               );
             }
             return (