AI/orchai
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: make agent cards clickable

Browse source
This commit is contained in:
thibaud-lclr 2026-04-16 08:21:16 +02:00
parent c614796e5f
commit 1756e6e14a
1 changed files with 40 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
src/components/agents/AgentList.tsx
View file

@ -79,47 +79,49 @@ export default function AgentList() {
{agents.map((agent) => ( {agents.map((agent) => (
<div <div
key={agent.id} key={agent.id}
className="flex items-start justify-between gap-4 rounded-lg border border-gray-200 bg-white p-4" className="group relative rounded-lg border border-gray-200 bg-white p-4 transition hover:border-blue-300 hover:shadow-sm focus-within:border-blue-400 focus-within:ring-2 focus-within:ring-blue-100"
> >
<div className="min-w-0 flex-1"> <Link
<div className="flex items-center gap-2"> to={`/agents/${agent.id}/edit`}
<span className="text-sm font-medium">{agent.name}</span> aria-label={`Edit ${agent.name}`}
{agent.is_default && ( className="absolute inset-0 rounded-lg focus-visible:outline-none"
<span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs text-emerald-700"> />
Default
</span> <div className="pointer-events-none relative z-10 flex items-start justify-between gap-4">
)} <div className="min-w-0 flex-1">
<span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600"> <div className="flex items-center gap-2">
{roleLabel(agent.role)} <span className="text-sm font-medium">{agent.name}</span>
</span> {agent.is_default && (
<span className="rounded-full bg-blue-50 px-2 py-0.5 text-xs text-blue-700"> <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs text-emerald-700">
{toolLabel(agent.tool)} Default
</span> </span>
</div> )}
{agent.custom_prompt.trim() ? ( <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
<p className="mt-2 line-clamp-3 text-xs text-gray-500"> {roleLabel(agent.role)}
{agent.custom_prompt} </span>
</p> <span className="rounded-full bg-blue-50 px-2 py-0.5 text-xs text-blue-700">
) : ( {toolLabel(agent.tool)}
<p className="mt-2 text-xs text-gray-400">No custom prompt.</p> </span>
)} </div>
</div> {agent.custom_prompt.trim() ? (
<p className="mt-2 line-clamp-3 text-xs text-gray-500">
{agent.custom_prompt}
</p>
) : (
<p className="mt-2 text-xs text-gray-400">No custom prompt.</p>
)}
</div>
<div className="flex shrink-0 items-center gap-2">
<Link
to={`/agents/${agent.id}/edit`}
className="rounded bg-gray-200 px-3 py-1 text-xs text-gray-700 hover:bg-gray-300"
>
Edit
</Link>
{!agent.is_default && ( {!agent.is_default && (
<button <div className="pointer-events-auto shrink-0">
type="button" <button
onClick={() => setAgentToDelete(agent)} type="button"
className="rounded bg-red-100 px-3 py-1 text-xs text-red-700 hover:bg-red-200" onClick={() => setAgentToDelete(agent)}
> className="rounded bg-red-100 px-3 py-1 text-xs text-red-700 hover:bg-red-200"
Delete >
</button> Delete
</button>
</div>
)} )}
</div> </div>
</div> </div>