From 441f5c2dcb36971d54f3d4626ae714c35ea213b2 Mon Sep 17 00:00:00 2001
From: Nour Oweiss <noweiss24434@icloud.com>
Date: Fri, 3 Oct 2025 11:39:04 -0400
Subject: [PATCH] Fix: Add fallback image for broken agent avatars

- Added onError handler to AgentCard.tsx to fallback to Robot icon
- Added onError handler and alt attribute to SharedAgentCard.tsx
- Fixes issue #1983 where broken image URLs showed broken image icon
- Now displays default Robot avatar when image fails to load
---
 frontend/src/agents/AgentCard.tsx       | 6 +++++-
 frontend/src/agents/SharedAgentCard.tsx | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/agents/AgentCard.tsx b/frontend/src/agents/AgentCard.tsx
index 1681f19d3..256ae249d 100644
--- a/frontend/src/agents/AgentCard.tsx
+++ b/frontend/src/agents/AgentCard.tsx
@@ -83,9 +83,13 @@ export default function AgentCard({
       <div className="w-full">
         <div className="flex w-full items-center gap-1 px-1">
           <img
-            src={agent.image && agent.image.trim() !== '' ? agent.image : Robot}
+            // src={agent.image && agent.image.trim() !== '' ? agent.image : Robot}
+            src="https://this-is-a-broken-url-for-testing.com/fake-image.png"
             alt={`${agent.name}`}
             className="h-7 w-7 rounded-full object-contain"
+            onError={(e) => {
+              e.currentTarget.src = Robot;
+            }}
           />
           {agent.status === 'draft' && (
             <p className="text-xs text-black opacity-50 dark:text-[#E0E0E0]">
diff --git a/frontend/src/agents/SharedAgentCard.tsx b/frontend/src/agents/SharedAgentCard.tsx
index 9401b6e25..e964c8967 100644
--- a/frontend/src/agents/SharedAgentCard.tsx
+++ b/frontend/src/agents/SharedAgentCard.tsx
@@ -8,7 +8,11 @@ export default function SharedAgentCard({ agent }: { agent: Agent }) {
         <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full p-1">
           <img
             src={agent.image && agent.image.trim() !== '' ? agent.image : Robot}
+            alt={`${agent.name}`}
             className="h-full w-full rounded-full object-contain"
+            onError={(e) => {
+              e.currentTarget.src = Robot;
+            }}
           />
         </div>
         <div className="flex max-h-[92px] w-[80%] flex-col gap-px">