feat(artifacts): enhance ArtifactsLibrary UI and add artifacts page detection

- Introduced a new state for detecting the artifacts page in LayoutDataProvider.
- Simplified the EmptyState component in ArtifactsLibrary for a cleaner presentation.
- Improved header layout in ArtifactsLibrary for better responsiveness and visual clarity.
This commit is contained in:
Anish Sarkar 2026-07-06 14:05:53 +05:30
parent a94a2976f6
commit 2a020629c5
3 changed files with 15 additions and 23 deletions

View file

@ -698,6 +698,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
const isSearchSpaceSettingsPage = pathname?.includes("/workspace-settings") === true;
const isTeamPage = pathname?.endsWith("/team") === true;
const isAutomationsPage = pathname?.includes("/automations") === true;
const isArtifactsPage = pathname?.endsWith("/artifacts") === true;
const isAllChatsPage = pathname?.endsWith("/chats") === true;
const handleViewAllChats = useCallback(() => {
setActiveSlideoutPanel(null);
@ -713,6 +714,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
isSearchSpaceSettingsPage ||
isTeamPage ||
isAutomationsPage ||
isArtifactsPage ||
isAllChatsPage;
return (
@ -757,6 +759,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
isSearchSpaceSettingsPage ||
isTeamPage ||
isAutomationsPage ||
isArtifactsPage ||
isAllChatsPage
? "items-start justify-center px-6 py-8 md:px-10 md:pb-10 md:pt-16"
: undefined
@ -766,7 +769,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
? "max-w-none select-none"
: isAllChatsPage
? "max-w-5xl"
: isUserSettingsPage || isSearchSpaceSettingsPage || isTeamPage
: isUserSettingsPage || isSearchSpaceSettingsPage || isTeamPage || isArtifactsPage
? "max-w-5xl"
: undefined
}

View file

@ -249,7 +249,7 @@ function AllChatsContent({ searchSpaceId, className }: AllChatsContentProps) {
variant="secondary"
className="h-7 gap-1.5 rounded-md px-2.5 text-xs font-medium"
>
<span className="text-muted-foreground">Filter by</span>
<span className="font-semibold text-muted-foreground">Filter by</span>
<span>{selectedFilterLabel}</span>
<ChevronDown className="h-3 w-3 text-muted-foreground" />
</Button>

View file

@ -1,7 +1,7 @@
"use client";
import { useSetAtom } from "jotai";
import { Boxes, RefreshCw, TriangleAlert } from "lucide-react";
import { RefreshCw, TriangleAlert } from "lucide-react";
import { useMemo, useState } from "react";
import { openReportPanelAtom } from "@/atoms/chat/report-panel.atom";
import { MobileReportPanel } from "@/components/report-panel/report-panel";
@ -46,16 +46,8 @@ function ErrorState({ onRetry }: { onRetry: () => void }) {
function EmptyState() {
return (
<div className="flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed py-20 text-center">
<span className="flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground">
<Boxes className="size-6" />
</span>
<div>
<p className="font-medium text-foreground">No artifacts yet</p>
<p className="mt-1 text-sm text-muted-foreground">
Reports, resumes, podcasts, presentations, and images you generate appear here.
</p>
</div>
<div className="flex items-center justify-center py-20 text-center">
<p className="font-medium text-foreground">No artifacts yet</p>
</div>
);
}
@ -90,17 +82,14 @@ export function ArtifactsLibrary({ workspaceId }: { workspaceId: number }) {
};
return (
<div className="mx-auto w-full max-w-5xl px-6 py-8">
<header className="mb-6 flex items-center justify-between gap-4">
<div>
<h1 className="text-xl font-semibold text-foreground">Artifacts</h1>
<p className="mt-1 text-sm text-muted-foreground">
Every deliverable created across this search space.
</p>
<div className="w-full space-y-6">
<header className="flex items-center justify-between gap-4 flex-wrap">
<div className="flex items-baseline gap-3">
<h1 className="text-xl md:text-2xl font-semibold text-foreground">Artifacts</h1>
{!loading && artifacts.length > 0 ? (
<span className="text-sm text-muted-foreground">{artifacts.length} total</span>
) : null}
</div>
{!loading && artifacts.length > 0 ? (
<span className="shrink-0 text-sm text-muted-foreground">{artifacts.length} total</span>
) : null}
</header>
{loading ? (