f341dc03b8
### 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>
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { NodeProps, Position } from '@xyflow/react';
|
|
import { Skeleton } from 'antd';
|
|
import { memo } from 'react';
|
|
import { NodeHandleId } from '../../constant';
|
|
import { CommonHandle } from './handle';
|
|
import { LeftHandleStyle } from './handle-icon';
|
|
import { NodeWrapper } from './node-wrapper';
|
|
|
|
function InnerPlaceholderNode({ id, selected }: NodeProps) {
|
|
return (
|
|
<NodeWrapper selected={selected}>
|
|
<CommonHandle
|
|
type="target"
|
|
position={Position.Left}
|
|
isConnectable
|
|
style={LeftHandleStyle}
|
|
nodeId={id}
|
|
id={NodeHandleId.End}
|
|
></CommonHandle>
|
|
|
|
<section className="flex items-center gap-2">
|
|
<Skeleton.Avatar
|
|
active
|
|
size={24}
|
|
shape="square"
|
|
style={{ backgroundColor: 'rgba(255,255,255,0.05)' }}
|
|
/>
|
|
</section>
|
|
|
|
<section className={'flex gap-2 flex-col'} style={{ marginTop: 10 }}>
|
|
<Skeleton.Input active style={{ width: '100%', height: 30 }} />
|
|
</section>
|
|
</NodeWrapper>
|
|
);
|
|
}
|
|
|
|
export const PlaceholderNode = memo(InnerPlaceholderNode);
|