Skip to content

Update AgentCard.tsx #964

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
peterj merged 3 commits into from
Oct 9, 2025
Merged

Update AgentCard.tsx #964

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
13a54f3
Update AgentCard.tsx
killjoycircuit Sep 29, 2025
a53bf37
Update AgentCard.tsx
killjoycircuit Sep 29, 2025
6cbbe19
Update AgentCard.tsx
killjoycircuit Sep 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 32 additions & 27 deletions ui/src/components/AgentCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ export function AgentCard({ agentResponse: { agent, model, modelProvider, deploy
const router = useRouter();
const agentRef = k8sRefUtils.toRef(
agent.metadata.namespace || '',
agent.metadata.name || '');
agent.metadata.name || ''
);
const isBYO = agent.spec?.type === "BYO";
const byoImage = isBYO ? agent.spec?.byo?.deployment?.image : undefined;

Expand All @@ -29,48 +30,52 @@ export function AgentCard({ agentResponse: { agent, model, modelProvider, deploy
const cardContent = (
<Card className={`group transition-colors ${
deploymentReady && accepted
? 'cursor-pointer hover:border-violet-500'
? 'cursor-pointer hover:border-violet-500'
: 'border-gray-300'
}`}>
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2">
<CardTitle className="flex items-center gap-2">
<KagentLogo className="h-5 w-5" />
{agentRef}
{!accepted && (
<span className="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">
Not Accepted
</span>
)}
{!deploymentReady && (
<span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">
Not Ready
</span>
)}
<CardTitle className="flex items-center gap-2 flex-1 min-w-0">
<KagentLogo className="h-5 w-5 flex-shrink-0" />
<span className="truncate">{agentRef}</span>
</CardTitle>
<div className="flex items-center space-x-2 invisible group-hover:visible">
Copy link
Collaborator

@peterj peterj Sep 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we want to hide the edit/delete buttons unless the user hovers over the card

<Button
variant="ghost"
size="icon"
onClick={handleEditClick}
<div className="flex items-center space-x-2 flex-shrink-0 ml-2">
<Button
variant="ghost"
size="icon"
onClick={handleEditClick}
aria-label="Edit Agent"
className="h-8 w-8"
>
<Pencil className="h-4 w-4" />
</Button>
<DeleteButton
agentName={agent.metadata.name}
namespace={agent.metadata.namespace || ''}
<DeleteButton
agentName={agent.metadata.name}
namespace={agent.metadata.namespace || ''}
/>
</div>
</CardHeader>
<CardContent className="flex flex-col justify-between h-32">
<p className="text-sm text-muted-foreground line-clamp-3 overflow-hidden">{agent.spec.description}</p>
<CardContent className="flex flex-col justify-between h-32 pt-2 relative">
<p className="text-sm text-muted-foreground line-clamp-3 overflow-hidden flex-1">
{agent.spec.description}
</p>
<div className="mt-4 flex items-center text-xs text-muted-foreground">
{isBYO ? (
<span title={byoImage}>Image: {byoImage}</span>
<span title={byoImage} className="truncate">
Image: {byoImage}
</span>
) : (
<span>{modelProvider} ({model})</span>
<span className="truncate">
{modelProvider} ({model})
</span>
)}

{/* this handles the ribbon part to edit it change the py to change height and bg-yellow-400/30 to change transparency levels*/}
</div>
{!deploymentReady && (
Copy link
Collaborator

@peterj peterj Sep 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should display both messages - Not accepted if the yaml/agent was not accepted and Not ready if the pod is still coming up

<div className="absolute bottom-0 left-0 right-0 bg-yellow-400/30 text-yellow-900 text-xs px-3 py-1 rounded-b-lg flex justify-end items-center">
<span className="font-bold whitespace-nowrap">Agent not Ready</span>
</div>
)}
</CardContent>
</Card>
);
Expand Down
Loading