feat: integrated with artifacts in states

2026-04-03 14:22:13 +08:00 · 2026-01-17 17:21:37 +08:00
parent 384353d613
commit f1c6991194
8 changed files with 118 additions and 70 deletions
--- a/frontend/src/app/workspace/chats/[thread_id]/page.tsx
+++ b/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 && (
-                <Tooltip content="Show artifacts">
+              {artifacts?.length && !artifactsOpen && (
+                <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
-                icon={<FilesIcon />}
-                title="No artifact selected"
-                description="Select an artifact to view its details"
-              />
+              {thread.values.artifacts?.length === 0 ? (
+                <ConversationEmptyState
+                  icon={<FilesIcon />}
+                  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>
--- a/frontend/src/components/ai-elements/artifact.tsx
+++ b/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",
-      className
+      "bg-background flex flex-col overflow-hidden rounded-lg border shadow-sm",
+      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",
-      className
+      "bg-muted/50 flex items-center justify-between border-b px-4 py-3",
+      className,
    )}
    {...props}
  />
@@ -49,8 +49,8 @@ export const ArtifactClose = ({
 }: ArtifactCloseProps) => (
  <Button
    className={cn(
-      "size-8 p-0 text-muted-foreground hover:text-foreground",
-      className
+      "text-muted-foreground hover:text-foreground size-8 p-0",
+      className,
    )}
    size={size}
    type="button"
@@ -65,8 +65,8 @@ export const ArtifactClose = ({
 export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;

 export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (
-  <p
-    className={cn("font-medium text-foreground text-sm", className)}
+  <div
+    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",
-        className
+        "text-muted-foreground hover:text-foreground size-8 p-0",
+        className,
      )}
      size={size}
      type="button"
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -1,27 +1,27 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+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",
-        className
+        "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,
      )}
      {...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",
-        className
+        "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,
      )}
      {...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,
-}
+};
--- a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
+++ b/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 {
-  checkCodeFile,
-  getFileExtensionDisplayName,
-  getFileName,
-} from "@/core/utils/files";
+import { checkCodeFile, 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>
-          <ArtifactDescription className="mt-1 text-xs">
-            {getFileExtensionDisplayName(filepath)} file
-          </ArtifactDescription>
+          <ArtifactTitle>
+            <Select value={filepath} onValueChange={select}>
+              <SelectTrigger className="border-none bg-transparent! select-none focus:outline-0 active:outline-0">
+                <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>
--- a/frontend/src/components/workspace/artifacts/artifact-file-list.tsx
+++ b/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)}>
--- a/frontend/src/components/workspace/artifacts/context.tsx
+++ b/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;
-  openArtifact: (artifact: string) => void;
+  select: (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[]) => {
-    setArtifacts((prev) => [...prev, ...newArtifacts]);
+  const select = (artifact: string) => {
+    setSelectedArtifact(artifact);
+    setSidebarOpen(false);
  };

-  const openArtifact = (artifact: string) => {
-    setSelectedArtifact(artifact);
-    setOpen(true);
-    setSidebarOpen(false);
+  const deselect = () => {
+    setSelectedArtifact(null);
  };

  const value: ArtifactsContextType = {
    artifacts,
-    selectedArtifact,
+    setArtifacts,
+
    open,
    setOpen,
-    addArtifacts,
-    openArtifact,
+
+    selectedArtifact,
+    select,
+    deselect,
  };

  return (
--- a/frontend/src/core/artifacts/utils.ts
+++ b/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 ?? [];
+}
--- a/frontend/src/core/threads/types.ts
+++ b/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> {}