Add backend and frontend

2024-04-07 15:04:00 +08:00
parent 49fdd9cc43
commit 84a7cb1b7e
233 changed files with 29927 additions and 0 deletions
--- a/frontend/src/components/AgentIcon/index.tsx
+++ b/frontend/src/components/AgentIcon/index.tsx
@@ -0,0 +1,119 @@
+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';