From 0a825fde89a66ff03b2a97118c3058ef8fce499e Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Wed, 12 Aug 2026 19:14:59 +0800
Subject: [PATCH] Feat: Adjust the agent list style. (#18163)

---
 web/src/components/image/index.tsx                |  8 ++++++--
 web/src/pages/agents/agent-card.tsx               |  8 ++++----
 .../pages/agents/compilation-template-card.tsx    |  5 +++--
 web/src/pages/agents/constant.ts                  | 15 ++++++++++++---
 web/src/pages/next-search/expandable-content.tsx  |  2 +-
 5 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/web/src/components/image/index.tsx b/web/src/components/image/index.tsx
index cb9e2043ae..e8d71c85d2 100644
--- a/web/src/components/image/index.tsx
+++ b/web/src/components/image/index.tsx
@@ -213,11 +213,15 @@ export const AuthenticatedImg = ({
   );
 };
 
-const Image = ({ id, t, label, className, ...props }: IImage) => {
+const Image = React.forwardRef<HTMLImageElement, IImage>(function Image(
+  { id, t, label, className, ...props },
+  ref,
+) {
   const src = useDocumentImageUrl(id, t);
   const imageElement = (
     <img
       {...props}
+      ref={ref}
       src={src || undefined}
       className={classNames('max-w-[45vw] max-h-[40wh] block', className)}
     />
@@ -235,7 +239,7 @@ const Image = ({ id, t, label, className, ...props }: IImage) => {
       </div>
     </div>
   );
-};
+});
 
 export default Image;
 
diff --git a/web/src/pages/agents/agent-card.tsx b/web/src/pages/agents/agent-card.tsx
index 4f96472653..a77b69d24d 100644
--- a/web/src/pages/agents/agent-card.tsx
+++ b/web/src/pages/agents/agent-card.tsx
@@ -31,17 +31,17 @@ function AgentTypeIcon({
       ? FlowType.Compiler
       : CanvasCategoryToFlowType[data.canvas_category ?? ''];
 
-  const icon = flowType ? FlowTypeConfig[flowType].icon : null;
+  const config = flowType ? FlowTypeConfig[flowType] : null;
 
-  if (!icon) {
+  if (!config) {
     return null;
   }
 
-  const Icon = icon;
+  const Icon = config.icon;
 
   return (
     <Button variant={'ghost'} size={'sm'}>
-      <Icon />
+      <Icon style={{ color: config.color }} />
     </Button>
   );
 }
diff --git a/web/src/pages/agents/compilation-template-card.tsx b/web/src/pages/agents/compilation-template-card.tsx
index d650b8f26f..f93ad98f5e 100644
--- a/web/src/pages/agents/compilation-template-card.tsx
+++ b/web/src/pages/agents/compilation-template-card.tsx
@@ -19,7 +19,8 @@ type CompilationTemplateCardProps = {
   onDelete: (id: string) => void;
 };
 
-const CompilerIcon = FlowTypeConfig[FlowType.Compiler].icon;
+const CompilerConfig = FlowTypeConfig[FlowType.Compiler];
+const CompilerIcon = CompilerConfig.icon;
 
 export function CompilationTemplateCard({
   data,
@@ -52,7 +53,7 @@ export function CompilationTemplateCard({
             </TruncatedText>
 
             <Button variant="ghost" size="sm">
-              <CompilerIcon />
+              <CompilerIcon style={{ color: CompilerConfig.color }} />
             </Button>
 
             <CompilationTemplateDropdown data={data} onDelete={onDelete}>
diff --git a/web/src/pages/agents/constant.ts b/web/src/pages/agents/constant.ts
index 710e662fdc..b943fe0a88 100644
--- a/web/src/pages/agents/constant.ts
+++ b/web/src/pages/agents/constant.ts
@@ -9,14 +9,23 @@ export enum FlowType {
 
 export const FlowTypeConfig: Record<
   FlowType,
-  { icon: LucideIcon; labelKey: string }
+  { icon: LucideIcon; labelKey: string; color: string }
 > = {
-  [FlowType.Agent]: { icon: Network, labelKey: 'tabList.workflow' },
+  [FlowType.Agent]: {
+    icon: Network,
+    labelKey: 'tabList.workflow',
+    color: 'var(--team-member)',
+  },
   [FlowType.Compiler]: {
     icon: Shapes,
     labelKey: 'tabList.compilationOperator',
+    color: 'var(--team-department)',
+  },
+  [FlowType.Flow]: {
+    icon: Route,
+    labelKey: 'tabList.ingestionPipeline',
+    color: 'var(--team-group)',
   },
-  [FlowType.Flow]: { icon: Route, labelKey: 'tabList.ingestionPipeline' },
 };
 
 /**
diff --git a/web/src/pages/next-search/expandable-content.tsx b/web/src/pages/next-search/expandable-content.tsx
index e0076955fa..a6600b233e 100644
--- a/web/src/pages/next-search/expandable-content.tsx
+++ b/web/src/pages/next-search/expandable-content.tsx
@@ -78,7 +78,7 @@ export default function ExpandableContent({
       resizeObserver.disconnect();
       mutationObserver.disconnect();
     };
-  }, [maxHeight, children]);
+  }, [maxHeight]);
 
   const toggleExpand = () => {
     setIsExpanded(!isExpanded);