Feat: Adjust the style of the toolbar at the bottom of the agent canvas #10703 (#10807)

### What problem does this PR solve?

Feat: Adjust the style of the toolbar at the bottom of the agent canvas
#10703
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/canvas/edge/index.tsx

@@ -93,7 +93,9 @@ function InnerButtonEdge({
   }, [data?.isHovered, isTargetPlaceholder, sourceHandleId, target]);
 
   const activeMarkerEnd =
-    selected || !isEmpty(showHighlight) ? 'url(#selected-marker)' : markerEnd;
+    selected || !isEmpty(showHighlight) || isTargetPlaceholder
+      ? 'url(#selected-marker)'
+      : markerEnd;
 
   return (
     <>

web/src/pages/agent/canvas/index.tsx

@@ -311,7 +311,11 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
         >
           <AgentBackground></AgentBackground>
           <Spotlight className="z-0" opcity={0.7} coverage={70} />
-          <Controls position={'bottom-center'} orientation="horizontal">
+          <Controls
+            position={'bottom-center'}
+            orientation="horizontal"
+            className="bg-bg-base px-4 py-2 h-auto w-auto [&>button]:bg-transparent [&>button]:border-0 [&>button]:text-text-primary [&>button]:hover:bg-bg-base-hover [&>button]:hover:text-text-primary [&>button]:active:bg-bg-base-active [&>button]:p-0 [&>button]:size-4 gap-2.5 rounded-md"
+          >
             <ControlButton>
               <Tooltip>
                 <TooltipTrigger asChild>

web/src/pages/agent/canvas/node/dropdown/accordion-operators.tsx

@@ -6,10 +6,18 @@ import {
 } from '@/components/ui/accordion';
 import { Operator } from '@/constants/agent';
 import useGraphStore from '@/pages/agent/store';
-import { useCallback, useMemo } from 'react';
+import { PropsWithChildren, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OperatorItemList } from './operator-item-list';
 
+function OperatorAccordionTrigger({ children }: PropsWithChildren) {
+  return (
+    <AccordionTrigger className="text-xs text-text-secondary hover:no-underline items-center">
+      <span className="h-4 translate-y-1"> {children}</span>
+    </AccordionTrigger>
+  );
+}
+
 export function AccordionOperators({
   isCustomDropdown = false,
   mousePosition,
@@ -26,10 +34,10 @@ export function AccordionOperators({
       defaultValue={['item-1', 'item-2', 'item-3', 'item-4', 'item-5']}
     >
       <AccordionItem value="item-1">
-        <AccordionTrigger className="text-xl">
+        <OperatorAccordionTrigger>
           {t('flow.foundation')}
-        </AccordionTrigger>
+        </OperatorAccordionTrigger>
-        <AccordionContent className="flex flex-col gap-4 text-balance">
+        <AccordionContent className="flex flex-col gap-4 text-text-primary">
           <OperatorItemList
             operators={[Operator.Agent, Operator.Retrieval]}
             isCustomDropdown={isCustomDropdown}
@@ -38,10 +46,8 @@ export function AccordionOperators({
         </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-2">
-        <AccordionTrigger className="text-xl">
+        <OperatorAccordionTrigger>{t('flow.dialog')}</OperatorAccordionTrigger>
-          {t('flow.dialog')}
+        <AccordionContent className="flex flex-col gap-4 text-text-primary">
-        </AccordionTrigger>
-        <AccordionContent className="flex flex-col gap-4 text-balance">
           <OperatorItemList
             operators={[Operator.Message, Operator.UserFillUp]}
             isCustomDropdown={isCustomDropdown}
@@ -50,10 +56,8 @@ export function AccordionOperators({
         </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-3">
-        <AccordionTrigger className="text-xl">
+        <OperatorAccordionTrigger>{t('flow.flow')}</OperatorAccordionTrigger>
-          {t('flow.flow')}
+        <AccordionContent className="flex flex-col gap-4 text-text-primary">
-        </AccordionTrigger>
-        <AccordionContent className="flex flex-col gap-4 text-balance">
           <OperatorItemList
             operators={[
               Operator.Switch,
@@ -66,10 +70,10 @@ export function AccordionOperators({
         </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-4">
-        <AccordionTrigger className="text-xl">
+        <OperatorAccordionTrigger>
           {t('flow.dataManipulation')}
-        </AccordionTrigger>
+        </OperatorAccordionTrigger>
-        <AccordionContent className="flex flex-col gap-4 text-balance">
+        <AccordionContent className="flex flex-col gap-4 text-text-primary">
           <OperatorItemList
             operators={[Operator.Code, Operator.StringTransform]}
             isCustomDropdown={isCustomDropdown}
@@ -78,10 +82,8 @@ export function AccordionOperators({
         </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-5">
-        <AccordionTrigger className="text-xl">
+        <OperatorAccordionTrigger>{t('flow.tools')}</OperatorAccordionTrigger>
-          {t('flow.tools')}
+        <AccordionContent className="flex flex-col gap-4 text-text-primary">
-        </AccordionTrigger>
-        <AccordionContent className="flex flex-col gap-4 text-balance">
           <OperatorItemList
             operators={[
               Operator.TavilySearch,
@@ -180,8 +182,10 @@ export function PipelineAccordionOperators({
           defaultValue="item-1"
         >
           <AccordionItem value="item-1">
-            <AccordionTrigger>Chunker</AccordionTrigger>
+            <AccordionTrigger className="translate-y-2 hover:no-underline text-text-primary font-normal">
-            <AccordionContent className="flex flex-col gap-4 text-balance">
+              Chunker
+            </AccordionTrigger>
+            <AccordionContent className="flex flex-col gap-4">
               <OperatorItemList
                 operators={chunkerOperators}
                 isCustomDropdown={isCustomDropdown}

web/src/pages/agent/canvas/node/dropdown/operator-item-list.tsx

@@ -96,5 +96,9 @@ export function OperatorItemList({
     );
   };
 
-  return <ul className="space-y-2">{operators.map(renderOperatorItem)}</ul>;
+  return (
+    <ul className="space-y-2 text-text-primary font-normal">
+      {operators.map(renderOperatorItem)}
+    </ul>
+  );
 }