feat(frontend): add inline version changelog to marketplace agent pages

Add version history display directly to marketplace agent pages showing
all available versions with visual indicators for the current version.

This provides users with immediate visibility into agent version history
without needing to click a separate button, similar to the library page
changelog functionality but rendered inline.

Features:
- Fetches agentGraphVersions from store API
- Displays versions in descending order (newest first)
- Highlights current version with blue styling and 'Current' badge
- Shows 'Published marketplace version' description for each version
- Gracefully falls back to basic version display if data unavailable
- Maintains existing 'Last updated' information

This enhances marketplace discoverability by making version information
immediately visible to users browsing agent details.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Zamil Majdy
2025-12-18 08:48:08 +01:00
parent fc0d0903f2
commit c5acb0d4cc
2 changed files with 79 additions and 4 deletions

View File

@@ -6,6 +6,8 @@ import Link from "next/link";
import { User } from "@supabase/supabase-js";
import { cn } from "@/lib/utils";
import { useAgentInfo } from "./useAgentInfo";
import { useGetV2GetSpecificAgent } from "@/app/api/__generated__/endpoints/store/store";
import { Text } from "@/components/atoms/Text/Text";
interface AgentInfoProps {
user: User | null;
@@ -21,6 +23,8 @@ interface AgentInfoProps {
version: string;
storeListingVersionId: string;
isAgentAddedToLibrary: boolean;
creatorSlug?: string;
agentSlug?: string;
}
export const AgentInfo = ({
@@ -37,6 +41,8 @@ export const AgentInfo = ({
version,
storeListingVersionId,
isAgentAddedToLibrary,
creatorSlug,
agentSlug,
}: AgentInfoProps) => {
const {
handleDownload,
@@ -45,6 +51,65 @@ export const AgentInfo = ({
isAddingAgentToLibrary,
} = useAgentInfo({ storeListingVersionId });
// Get store agent data for version history
const { data: storeAgentData } = useGetV2GetSpecificAgent(
creatorSlug || "",
agentSlug || "",
{
query: {
enabled: !!(creatorSlug && agentSlug),
},
},
);
// Process version data for display
const agentVersions =
storeAgentData?.status === 200 && storeAgentData.data.agentGraphVersions
? storeAgentData.data.agentGraphVersions
.map((versionStr: string) => parseInt(versionStr, 10))
.sort((a: number, b: number) => b - a)
.map((versionNum: number) => ({
version: versionNum,
isCurrentVersion: versionNum.toString() === version,
}))
: [];
const renderVersionItem = (versionInfo: {
version: number;
isCurrentVersion: boolean;
}) => {
return (
<div
key={versionInfo.version}
className={`rounded-lg border p-3 ${
versionInfo.isCurrentVersion
? "border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950"
: "border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800"
}`}
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Text variant="body" className="font-semibold">
v{versionInfo.version}
</Text>
{versionInfo.isCurrentVersion && (
<span className="rounded-full bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-100">
Current
</span>
)}
</div>
</div>
<Text
variant="small"
className="mt-1 text-neutral-600 dark:text-neutral-400"
>
Published marketplace version
</Text>
</div>
);
};
return (
<div className="w-full max-w-[396px] px-4 sm:px-6 lg:w-[396px] lg:px-0">
{/* Title */}
@@ -159,16 +224,24 @@ export const AgentInfo = ({
</div>
{/* Version History */}
<div className="flex w-full flex-col gap-0.5 sm:gap-1">
<div className="flex w-full flex-col gap-1.5 sm:gap-2">
<div className="decoration-skip-ink-none mb-1.5 text-base font-medium leading-6 text-neutral-800 dark:text-neutral-200 sm:mb-2">
Version history
</div>
<div className="decoration-skip-ink-none text-base font-normal leading-6 text-neutral-600 underline-offset-[from-font] dark:text-neutral-400">
Last updated {lastUpdated}
</div>
<div className="text-xs text-neutral-600 dark:text-neutral-400 sm:text-sm">
Version {version}
</div>
{/* Version List */}
{agentVersions.length > 0 ? (
<div className="space-y-2">
{agentVersions.map(renderVersionItem)}
</div>
) : (
<div className="text-xs text-neutral-600 dark:text-neutral-400 sm:text-sm">
Version {version}
</div>
)}
</div>
</div>
</div>

View File

@@ -94,6 +94,8 @@ export const MainAgentPage = ({ params }: MainAgentPageProps) => {
version={agent.versions[agent.versions.length - 1]}
storeListingVersionId={agent.store_listing_version_id}
isAgentAddedToLibrary={Boolean(libraryAgent)}
creatorSlug={params.creator}
agentSlug={params.slug}
/>
</div>
<AgentImages