120 lines
3.0 KiB
TypeScript
120 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
|
|
import { styled, SxProps } from '@mui/material/styles';
|
|
// import Box from '@mui/material/Box';
|
|
import { Divider, Box } from '@mui/material';
|
|
import { IconName, IconUrl, IconMap } from './agents';
|
|
import { IAgent } from '@/apis/get-agents';
|
|
import { ActionType } from '@/storage/plan';
|
|
|
|
interface ITooltipInfo extends IAgent {
|
|
action?: { type: ActionType; description: string; style: SxProps };
|
|
}
|
|
export interface IAgentIconProps {
|
|
name?: IconName | string;
|
|
style?: React.CSSProperties;
|
|
tooltipInfo?: ITooltipInfo;
|
|
}
|
|
|
|
const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
|
|
<Tooltip {...props} classes={{ popper: className }} />
|
|
))(({ theme }) => ({
|
|
[`& .${tooltipClasses.tooltip}`]: {
|
|
backgroundColor: '#f2f2f2',
|
|
color: 'rgba(0, 0, 0, 0.87)',
|
|
width: 'fit-content',
|
|
fontSize: theme.typography.pxToRem(12),
|
|
border: '1px solid #0003',
|
|
boxShadow: '1px 1px 4px #0003',
|
|
},
|
|
}));
|
|
|
|
const generateTooltip = (info: ITooltipInfo) => {
|
|
return (
|
|
<Box sx={{ maxWidth: '20vh', padding: '4px 0px' }}>
|
|
<Box
|
|
sx={{
|
|
fontSize: '16px',
|
|
fontWeight: 600,
|
|
userSelect: 'none',
|
|
padding: '0 4px',
|
|
}}
|
|
>
|
|
{info.name}
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
margin: '4px 0',
|
|
fontSize: '14px',
|
|
padding: '0 4px',
|
|
borderRadius: '6px',
|
|
fontWeight: 400,
|
|
userSelect: 'none',
|
|
}}
|
|
>
|
|
{info.profile}
|
|
</Box>
|
|
{info.action && (
|
|
<Box
|
|
sx={{
|
|
borderRadius: '6px',
|
|
padding: '4px 4px',
|
|
border: '1px solid #333',
|
|
...info.action.style,
|
|
}}
|
|
>
|
|
<Box sx={{ fontWeight: 600 }}>{info.action.type}</Box>
|
|
<Divider
|
|
sx={{
|
|
margin: '1px 0px',
|
|
borderBottom: '1px dashed', // 设置为虚线
|
|
borderColor: '#888888',
|
|
}}
|
|
/>
|
|
<Box>{info.action.description}</Box>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default React.memo<IAgentIconProps>(
|
|
({ style = {}, name = 'Unknown', tooltipInfo }) => {
|
|
const _name = React.useMemo(() => IconMap[name], [name]);
|
|
|
|
return tooltipInfo ? (
|
|
<HtmlTooltip
|
|
title={generateTooltip(tooltipInfo)}
|
|
followCursor
|
|
placement="right-start"
|
|
>
|
|
<img
|
|
// title={_name}
|
|
alt={_name}
|
|
src={IconUrl[_name]}
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
imageRendering: 'pixelated',
|
|
...style,
|
|
}}
|
|
/>
|
|
</HtmlTooltip>
|
|
) : (
|
|
<img
|
|
// title={_name}
|
|
alt={_name}
|
|
src={IconUrl[_name]}
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
imageRendering: 'pixelated',
|
|
...style,
|
|
}}
|
|
/>
|
|
);
|
|
},
|
|
);
|
|
|
|
export { IconName, IconMap, IconUrl } from './agents';
|