feat: integrated with artifacts in states

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

@@ -14,6 +14,7 @@ import {
 import { useSidebar } from "@/components/ui/sidebar";
 import {
   ArtifactFileDetail,
+  ArtifactFileList,
   useArtifacts,
 } from "@/components/workspace/artifacts";
 import { FlipDisplay } from "@/components/workspace/flip-display";
@@ -32,8 +33,10 @@ export default function ChatPage() {
   const [settings, setSettings] = useLocalSettings();
   const { setOpen: setSidebarOpen } = useSidebar();
   const {
+    artifacts,
     open: artifactsOpen,
     setOpen: setArtifactsOpen,
+    setArtifacts,
     selectedArtifact,
   } = useArtifacts();
 
@@ -65,6 +68,10 @@ export default function ChatPage() {
     return result;
   }, [thread, isNewThread]);
 
+  useEffect(() => {
+    setArtifacts(thread.values.artifacts);
+  }, [setArtifacts, thread.values.artifacts]);
+
   const handleSubmit = useSubmitThread({
     isNewThread,
     threadId,
@@ -96,17 +103,17 @@ export default function ChatPage() {
               </FlipDisplay>
             </div>
             <div>
-              {!artifactsOpen && (
+              {artifacts?.length && !artifactsOpen && (
-                <Tooltip content="Show artifacts">
+                <Tooltip content="Show artifacts of this conversation">
                   <Button
                     variant="ghost"
-                    size="icon"
                     onClick={() => {
                       setArtifactsOpen(true);
                       setSidebarOpen(false);
                     }}
                   >
                     <FilesIcon />
+                    Artifacts
                   </Button>
                 </Tooltip>
               )}
@@ -161,7 +168,7 @@ export default function ChatPage() {
               threadId={threadId!}
             />
           ) : (
-            <div className="relative flex size-full items-center justify-center">
+            <div className="relative flex size-full justify-center">
               <div className="absolute top-1 right-1 z-30">
                 <Button
                   size="icon-sm"
@@ -173,11 +180,26 @@ export default function ChatPage() {
                   <XIcon />
                 </Button>
               </div>
-              <ConversationEmptyState
+              {thread.values.artifacts?.length === 0 ? (
-                icon={<FilesIcon />}
+                <ConversationEmptyState
-                title="No artifact selected"
+                  icon={<FilesIcon />}
-                description="Select an artifact to view its details"
+                  title="No artifact selected"
-              />
+                  description="Select an artifact to view its details"
+                />
+              ) : (
+                <div className="flex size-full max-w-(--container-width-sm) flex-col justify-center p-4 pt-8">
+                  <header className="shrink-0">
+                    <h2 className="text-lg font-medium">Artifacts</h2>
+                  </header>
+                  <main className="min-h-0 grow">
+                    <ArtifactFileList
+                      className="max-w-(--container-width-sm) p-4 pt-12"
+                      files={thread.values.artifacts ?? []}
+                      threadId={threadId!}
+                    />
+                  </main>
+                </div>
+              )}
             </div>
           )}
         </div>

frontend/src/components/ai-elements/artifact.tsx

@@ -16,8 +16,8 @@ export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
 export const Artifact = ({ className, ...props }: ArtifactProps) => (
   <div
     className={cn(
-      "flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm",
+      "bg-background flex flex-col overflow-hidden rounded-lg border shadow-sm",
-      className
+      className,
     )}
     {...props}
   />
@@ -31,8 +31,8 @@ export const ArtifactHeader = ({
 }: ArtifactHeaderProps) => (
   <div
     className={cn(
-      "flex items-center justify-between border-b bg-muted/50 px-4 py-3",
+      "bg-muted/50 flex items-center justify-between border-b px-4 py-3",
-      className
+      className,
     )}
     {...props}
   />
@@ -49,8 +49,8 @@ export const ArtifactClose = ({
 }: ArtifactCloseProps) => (
   <Button
     className={cn(
-      "size-8 p-0 text-muted-foreground hover:text-foreground",
+      "text-muted-foreground hover:text-foreground size-8 p-0",
-      className
+      className,
     )}
     size={size}
     type="button"
@@ -65,8 +65,8 @@ export const ArtifactClose = ({
 export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
 
 export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (
-  <p
+  <div
-    className={cn("font-medium text-foreground text-sm", className)}
+    className={cn("text-foreground text-sm font-medium", className)}
     {...props}
   />
 );
@@ -108,8 +108,8 @@ export const ArtifactAction = ({
   const button = (
     <Button
       className={cn(
-        "size-8 p-0 text-muted-foreground hover:text-foreground",
+        "text-muted-foreground hover:text-foreground size-8 p-0",
-        className
+        className,
       )}
       size={size}
       type="button"

frontend/src/components/ui/select.tsx

@@ -1,27 +1,27 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select"
+import * as SelectPrimitive from "@radix-ui/react-select";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Select({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
 function SelectGroup({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
 function SelectValue({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
 function SelectTrigger({
@@ -30,15 +30,15 @@ function SelectTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
+  size?: "sm" | "default";
 }) {
   return (
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit cursor-pointer items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -47,7 +47,7 @@ function SelectTrigger({
         <ChevronDownIcon className="size-4 opacity-50" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
-  )
+  );
 }
 
 function SelectContent({
@@ -65,7 +65,7 @@ function SelectContent({
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
+          className,
         )}
         position={position}
         align={align}
@@ -76,7 +76,7 @@ function SelectContent({
           className={cn(
             "p-1",
             position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
           )}
         >
           {children}
@@ -84,7 +84,7 @@ function SelectContent({
         <SelectScrollDownButton />
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
-  )
+  );
 }
 
 function SelectLabel({
@@ -97,7 +97,7 @@ function SelectLabel({
       className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectItem({
@@ -109,8 +109,8 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
+        className,
       )}
       {...props}
     >
@@ -124,7 +124,7 @@ function SelectItem({
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
-  )
+  );
 }
 
 function SelectSeparator({
@@ -137,7 +137,7 @@ function SelectSeparator({
       className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectScrollUpButton({
@@ -149,13 +149,13 @@ function SelectScrollUpButton({
       data-slot="select-scroll-up-button"
       className={cn(
         "flex cursor-default items-center justify-center py-1",
-        className
+        className,
       )}
       {...props}
     >
       <ChevronUpIcon className="size-4" />
     </SelectPrimitive.ScrollUpButton>
-  )
+  );
 }
 
 function SelectScrollDownButton({
@@ -167,13 +167,13 @@ function SelectScrollDownButton({
       data-slot="select-scroll-down-button"
       className={cn(
         "flex cursor-default items-center justify-center py-1",
-        className
+        className,
       )}
       {...props}
     >
       <ChevronDownIcon className="size-4" />
     </SelectPrimitive.ScrollDownButton>
-  )
+  );
 }
 
 export {
@@ -187,4 +187,4 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-}
+};

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

@@ -12,17 +12,19 @@ import {
   ArtifactAction,
   ArtifactActions,
   ArtifactContent,
-  ArtifactDescription,
   ArtifactHeader,
   ArtifactTitle,
 } from "@/components/ai-elements/artifact";
+import { Select, SelectItem } from "@/components/ui/select";
+import {
+  SelectContent,
+  SelectGroup,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { useArtifactContent } from "@/core/artifacts/hooks";
 import { urlOfArtifact } from "@/core/artifacts/utils";
-import {
+import { checkCodeFile, getFileName } from "@/core/utils/files";
-  checkCodeFile,
-  getFileExtensionDisplayName,
-  getFileName,
-} from "@/core/utils/files";
 import { cn } from "@/lib/utils";
 
 import { useArtifacts } from "./context";
@@ -37,7 +39,7 @@ export function ArtifactFileDetail({
   filepath: string;
   threadId: string;
 }) {
-  const { setOpen } = useArtifacts();
+  const { artifacts, setOpen, select } = useArtifacts();
   const { isCodeFile } = useMemo(() => checkCodeFile(filepath), [filepath]);
   const { content } = useArtifactContent({
     threadId,
@@ -46,12 +48,24 @@ export function ArtifactFileDetail({
   });
   return (
     <Artifact className={cn("rounded-none", className)}>
-      <ArtifactHeader>
+      <ArtifactHeader className="px-2">
         <div>
-          <ArtifactTitle>{getFileName(filepath)}</ArtifactTitle>
+          <ArtifactTitle>
-          <ArtifactDescription className="mt-1 text-xs">
+            <Select value={filepath} onValueChange={select}>
-            {getFileExtensionDisplayName(filepath)} file
+              <SelectTrigger className="border-none bg-transparent! select-none focus:outline-0 active:outline-0">
-          </ArtifactDescription>
+                <SelectValue placeholder="Select a file" />
+              </SelectTrigger>
+              <SelectContent className="select-none">
+                <SelectGroup>
+                  {(artifacts ?? []).map((filepath) => (
+                    <SelectItem key={filepath} value={filepath}>
+                      {getFileName(filepath)}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </ArtifactTitle>
         </div>
         <div className="flex items-center gap-2">
           <ArtifactActions>

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

@@ -24,12 +24,13 @@ export function ArtifactFileList({
   files: string[];
   threadId: string;
 }) {
-  const { openArtifact } = useArtifacts();
+  const { select: selectArtifact, setOpen } = useArtifacts();
   const handleClick = useCallback(
     (filepath: string) => {
-      openArtifact(filepath);
+      selectArtifact(filepath);
+      setOpen(true);
     },
-    [openArtifact],
+    [selectArtifact, setOpen],
   );
   return (
     <ul className={cn("flex w-full flex-col gap-4", className)}>

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

@@ -4,13 +4,15 @@ import { useSidebar } from "@/components/ui/sidebar";
 
 export interface ArtifactsContextType {
   artifacts: string[];
+  setArtifacts: (artifacts: string[]) => void;
+
   selectedArtifact: string | null;
 
   open: boolean;
   setOpen: (open: boolean) => void;
+  deselect: () => void;
 
-  addArtifacts: (artifacts: string[]) => void;
+  select: (artifact: string) => void;
-  openArtifact: (artifact: string) => void;
 }
 
 const ArtifactsContext = createContext<ArtifactsContextType | undefined>(
@@ -27,23 +29,25 @@ export function ArtifactsProvider({ children }: ArtifactsProviderProps) {
   const [open, setOpen] = useState(false);
   const { setOpen: setSidebarOpen } = useSidebar();
 
-  const addArtifacts = (newArtifacts: string[]) => {
+  const select = (artifact: string) => {
-    setArtifacts((prev) => [...prev, ...newArtifacts]);
+    setSelectedArtifact(artifact);
+    setSidebarOpen(false);
   };
 
-  const openArtifact = (artifact: string) => {
+  const deselect = () => {
-    setSelectedArtifact(artifact);
+    setSelectedArtifact(null);
-    setOpen(true);
-    setSidebarOpen(false);
   };
 
   const value: ArtifactsContextType = {
     artifacts,
-    selectedArtifact,
+    setArtifacts,
+
     open,
     setOpen,
-    addArtifacts,
+
-    openArtifact,
+    selectedArtifact,
+    select,
+    deselect,
   };
 
   return (

frontend/src/core/artifacts/utils.ts

@@ -1,3 +1,5 @@
+import type { AgentThread } from "../threads";
+
 export function urlOfArtifact({
   filepath,
   threadId,
@@ -9,3 +11,7 @@ export function urlOfArtifact({
 }) {
   return `http://localhost:8000/api/threads/${threadId}/artifacts${filepath}${download ? "?download=true" : ""}`;
 }
+
+export function extractArtifactsFromThread(thread: AgentThread) {
+  return thread.values.artifacts ?? [];
+}

frontend/src/core/threads/types.ts

@@ -4,6 +4,7 @@ import type { Thread } from "@langchain/langgraph-sdk";
 export interface AgentThreadState extends Record<string, unknown> {
   title: string;
   messages: BaseMessage[];
+  artifacts: string[];
 }
 
 export interface AgentThread extends Thread<AgentThreadState> {}