Feat: Modify the style of the agent page bright theme #3221 (#9162)

### What problem does this PR solve?

Feat: Modify the style of the agent page bright theme #3221

### Type of change


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

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

@@ -1,3 +1,4 @@
+import { useIsDarkTheme, useTheme } from '@/components/theme-provider';
 import {
   Tooltip,
   TooltipContent,
@@ -144,6 +145,8 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
 
   const { ref, showImage, hideImage, imgVisible, mouse } = useMoveNote();
 
+  const { theme } = useTheme();
+
   const onPaneClick = useCallback(() => {
     hideFormDrawer();
     if (imgVisible) {
@@ -165,6 +168,8 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
     }
   };
 
+  const isDarkTheme = useIsDarkTheme();
+
   useHideFormSheetOnNodeDeletion({ hideFormDrawer });
 
   return (
@@ -211,13 +216,15 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
           onEdgeMouseEnter={onEdgeMouseEnter}
           onEdgeMouseLeave={onEdgeMouseLeave}
           className="h-full"
-          colorMode="dark"
+          colorMode={theme}
           defaultEdgeOptions={{
             type: 'buttonEdge',
             markerEnd: 'logo',
             style: {
               strokeWidth: 1,
-              stroke: 'rgba(91, 93, 106, 1)',
+              stroke: isDarkTheme
+                ? 'rgba(91, 93, 106, 1)'
+                : 'rgba(151, 154, 171, 1)',
             },
             zIndex: 1001, // https://github.com/xyflow/xyflow/discussions/3498
           }}

web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx

@@ -60,7 +60,7 @@ function AccordionOperators() {
       defaultValue={['item-1', 'item-2', 'item-3', 'item-4', 'item-5']}
     >
       <AccordionItem value="item-1">
-        <AccordionTrigger className="text-xl">AI</AccordionTrigger>
+        <AccordionTrigger className="text-xl">Foundation</AccordionTrigger>
         <AccordionContent className="flex flex-col gap-4 text-balance">
           <OperatorItemList
             operators={[Operator.Agent, Operator.Retrieval]}

web/src/pages/agent/canvas/node/handle.tsx

@@ -36,7 +36,7 @@ export function CommonHandle({
           showModal();
         }}
       >
-        <Plus className="size-3 pointer-events-none" />
+        <Plus className="size-3 pointer-events-none text-text-title-invert" />
         {visible && (
           <InnerNextStepDropdown hideModal={hideModal}>
             <span></span>