Merge pull request #2004 from Lanthoiba2022/AgentImageFix1

Fix #1983: Agent image fallback added

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"
           />