Feature/agent UI style optimization (#10385)

### What problem does this PR solve?

Hi team,  @ZhenhangTung @KevinHuSh  @cike8899 
About #10384 , I've completed the UI optimization adjustments for the
Agent page according to our previous discussions and the design draft
sketches provided by @Naomi. The main modifications include:

1. Adjusted the style and content of placeholder-node.
2. Adjusted the location of the dropdown (to the right of the
placeholder-node) .
3. Adjusted the tooltip position spacing when the mouse hovers in the
dropdown menu.
4. Hides the thick scroll bar on the dropdown component.
5. Highlight the connection line when dragging to generate a
placeholder-node

<img width="1323" height="509" alt="Image"
src="https://github.com/user-attachments/assets/0d366f7f-477d-4c00-bb58-d5d58b3a745f"
/>

Please review the related code modifications when you have time. Let me
know if further adjustments are needed!
Thanks！

### Type of change

- [x] Other (please describe): UI Enhancement

---------

Co-authored-by: leonlai <leonlai@futurefab.ai>

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

@@ -107,7 +107,7 @@ function OperatorItemList({
             </DropdownMenuItem>
           )}
         </TooltipTrigger>
-        <TooltipContent side="right">
+        <TooltipContent side="right" sideOffset={24}>
           <p>{t(`flow.${lowerFirst(operator)}Description`)}</p>
         </TooltipContent>
       </Tooltip>
@@ -127,7 +127,7 @@ function AccordionOperators({
   return (
     <Accordion
       type="multiple"
-      className="px-2 text-text-title max-h-[45vh] overflow-auto"
+      className="px-2 text-text-title max-h-[45vh] overflow-auto scrollbar-none"
       defaultValue={['item-1', 'item-2', 'item-3', 'item-4', 'item-5']}
     >
       <AccordionItem value="item-1">
@@ -249,7 +249,7 @@ export function InnerNextStepDropdown({
         style={{
           position: 'fixed',
           left: position.x,
-          top: position.y + 10,
+          top: position.y,
           zIndex: 1000,
         }}
         onClick={(e) => e.stopPropagation()}

web/src/pages/agent/canvas/node/index.less

@@ -283,3 +283,16 @@
     transform: translateY(0);
   }
 }
+
+.hideScrollbar {
+  /* Webkit browsers (Chrome, Safari, Edge) */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Firefox */
+  scrollbar-width: none;
+
+  /* IE和Edge */
+  -ms-overflow-style: none;
+}

web/src/pages/agent/canvas/node/placeholder-node.tsx

@@ -1,18 +1,12 @@
-import { cn } from '@/lib/utils';
 import { NodeProps, Position } from '@xyflow/react';
 import { Skeleton } from 'antd';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { NodeHandleId, Operator } from '../../constant';
-import OperatorIcon from '../../operator-icon';
+import { NodeHandleId } from '../../constant';
 import { CommonHandle } from './handle';
 import { LeftHandleStyle } from './handle-icon';
-import styles from './index.less';
 import { NodeWrapper } from './node-wrapper';
 
-function InnerPlaceholderNode({ data, id, selected }: NodeProps) {
-  const { t } = useTranslation();
-
+function InnerPlaceholderNode({ id, selected }: NodeProps) {
   return (
     <NodeWrapper selected={selected}>
       <CommonHandle
@@ -25,20 +19,16 @@ function InnerPlaceholderNode({ data, id, selected }: NodeProps) {
       ></CommonHandle>
 
       <section className="flex items-center gap-2">
-        <OperatorIcon name={data.label as Operator}></OperatorIcon>
-        <div className="truncate text-center font-semibold text-sm">
-          {t(`flow.placeholder`, 'Placeholder')}
-        </div>
+        <Skeleton.Avatar
+          active
+          size={24}
+          shape="square"
+          style={{ backgroundColor: 'rgba(255,255,255,0.05)' }}
+        />
       </section>
 
-      <section
-        className={cn(styles.generateParameters, 'flex gap-2 flex-col mt-2')}
-      >
-        <Skeleton active paragraph={{ rows: 2 }} title={false} />
-        <div className="flex gap-2">
-          <Skeleton.Button active size="small" />
-          <Skeleton.Button active size="small" />
-        </div>
+      <section className={'flex gap-2 flex-col'} style={{ marginTop: 10 }}>
+        <Skeleton.Input active style={{ width: '100%', height: 30 }} />
       </section>
     </NodeWrapper>
   );