Merge pull request #2004 from Lanthoiba2022/AgentImageFix1

Fix #1983: Agent image fallback added

frontend/src/Navigation.tsx

@@ -14,7 +14,7 @@ import Github from './assets/git_nav.svg';
 import Hamburger from './assets/hamburger.svg';
 import openNewChat from './assets/openNewChat.svg';
 import Pin from './assets/pin.svg';
-import Robot from './assets/robot.svg';
+import AgentImage from './components/AgentImage';
 import SettingGear from './assets/settingGear.svg';
 import Spark from './assets/spark.svg';
 import SpinnerDark from './assets/spinner-dark.svg';
@@ -424,12 +424,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                     >
                       <div className="flex items-center gap-2">
                         <div className="flex w-6 justify-center">
-                          <img
-                            src={
-                              agent.image && agent.image.trim() !== ''
-                                ? agent.image
-                                : Robot
-                            }
+                          <AgentImage
+                            src={agent.image}
                             alt="agent-logo"
                             className="h-6 w-6 rounded-full object-contain"
                           />

frontend/src/agents/AgentCard.tsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
 import userService from '../api/services/userService';
-import Robot from '../assets/robot.svg';
+import AgentImage from '../components/AgentImage';
 import ThreeDots from '../assets/three-dots.svg';
 import ContextMenu, { MenuOption } from '../components/ContextMenu';
 import ConfirmationModal from '../modals/ConfirmationModal';
@@ -82,8 +82,8 @@ 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}
+          <AgentImage
+            src={agent.image}
             alt={`${agent.name}`}
             className="h-7 w-7 rounded-full object-contain"
           />

frontend/src/agents/SharedAgent.tsx

@@ -6,7 +6,7 @@ import { useParams } from 'react-router-dom';
 import userService from '../api/services/userService';
 import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
-import Robot from '../assets/robot.svg';
+import AgentImage from '../components/AgentImage';
 import MessageInput from '../components/MessageInput';
 import Spinner from '../components/Spinner';
 import ConversationMessages from '../conversation/ConversationMessages';
@@ -152,12 +152,8 @@ export default function SharedAgent() {
   return (
     <div className="relative h-full w-full">
       <div className="absolute top-5 left-4 hidden items-center gap-3 sm:flex">
-        <img
-          src={
-            sharedAgent.image && sharedAgent.image.trim() !== ''
-              ? sharedAgent.image
-              : Robot
-          }
+        <AgentImage
+          src={sharedAgent.image}
           alt="agent-logo"
           className="h-6 w-6 rounded-full object-contain"
         />

frontend/src/agents/SharedAgentCard.tsx

@@ -1,4 +1,4 @@
-import Robot from '../assets/robot.svg';
+import AgentImage from '../components/AgentImage';
 import { Agent } from './types';
 
 export default function SharedAgentCard({ agent }: { agent: Agent }) {
@@ -6,8 +6,8 @@ export default function SharedAgentCard({ agent }: { agent: Agent }) {
     <div className="border-dark-gray dark:border-grey flex w-full max-w-[720px] flex-col rounded-3xl border p-6 shadow-xs sm:w-fit sm:min-w-[480px]">
       <div className="flex items-center gap-3">
         <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}
+          <AgentImage
+            src={agent.image}
             className="h-full w-full rounded-full object-contain"
           />
         </div>

frontend/src/agents/index.tsx

@@ -8,7 +8,7 @@ import Link from '../assets/link-gray.svg';
 import Monitoring from '../assets/monitoring.svg';
 import Pin from '../assets/pin.svg';
 import Trash from '../assets/red-trash.svg';
-import Robot from '../assets/robot.svg';
+import AgentImage from '../components/AgentImage';
 import ThreeDots from '../assets/three-dots.svg';
 import UnPin from '../assets/unpin.svg';
 import ContextMenu, { MenuOption } from '../components/ContextMenu';
@@ -138,11 +138,7 @@ function AgentsList() {
               </button>
               <div className="w-full">
                 <div className="flex w-full items-center px-1">
-                  <img
-                    src={Robot}
-                    alt="agent-logo"
-                    className="h-7 w-7 rounded-full"
-                  />
+                  <AgentImage className="h-7 w-7 rounded-full" />
                 </div>
                 <div className="mt-2">
                   <p
@@ -436,8 +432,8 @@ function AgentCard({
       </div>
       <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}
+          <AgentImage
+            src={agent.image}
             alt={`${agent.name}`}
             className="h-7 w-7 rounded-full object-contain"
           />

frontend/src/components/AgentImage.tsx

@@ -0,0 +1,40 @@
+import { useState, useEffect } from 'react';
+import Robot from '../assets/robot.svg';
+
+type AgentImageProps = {
+  src?: string | null;
+  alt?: string;
+  className?: string;
+  fallbackSrc?: string;
+};
+
+export default function AgentImage({
+  src,
+  alt = 'agent',
+  className = '',
+  fallbackSrc = Robot,
+}: AgentImageProps) {
+  const [currentSrc, setCurrentSrc] = useState(
+    src && src.trim() !== '' ? src : fallbackSrc,
+  );
+
+  useEffect(() => {
+    const newSrc = src && src.trim() !== '' ? src : fallbackSrc;
+    if (newSrc !== currentSrc) {
+      setCurrentSrc(newSrc);
+    }
+  }, [src, fallbackSrc]);
+
+  return (
+    <img
+      src={currentSrc}
+      alt={alt}
+      className={className}
+      referrerPolicy="no-referrer"
+      crossOrigin="anonymous"
+      onError={() => {
+        if (currentSrc !== fallbackSrc) setCurrentSrc(fallbackSrc);
+      }}
+    />
+  );
+}