Feat: Adjust the agent list style. (#18163)

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;
 

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>
   );
 }

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}>

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' },
 };
 
 /**

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);