setup(frontend): rename frontend-react

frontend-react/src/components/ProcessRehearsal/StepHistoryItem.tsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Divider, SxProps } from '@mui/material';
+import Box from '@mui/material/Box';
+import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import MarkdownBlock from '@/components/MarkdownBlock';
+import { globalStorage } from '@/storage';
+import type { IExecuteStepHistoryItem } from '@/apis/execute-plan';
+import AgentIcon from '@/components/AgentIcon';
+import { getAgentActionStyle } from '@/storage/plan';
+
+export interface IStepHistoryItemProps {
+  item: IExecuteStepHistoryItem;
+  actionRef: React.RefObject<HTMLDivElement | HTMLElement>;
+  style?: SxProps;
+  hoverCallback: (isHovered: boolean) => void;
+  handleExpand?: () => void;
+}
+
+export default observer(
+  ({
+    item,
+    actionRef,
+    hoverCallback,
+    handleExpand,
+    style = {},
+  }: IStepHistoryItemProps) => {
+    const [expand, setExpand] = React.useState(false);
+    const refDetail = React.useRef<HTMLDivElement>(null);
+    // 使用useEffect来更新detail容器的高度
+    React.useEffect(() => {
+      if (refDetail.current) {
+        refDetail.current.style.height = expand
+          ? `${refDetail.current.scrollHeight}px`
+          : '0px';
+      }
+      if (handleExpand) {
+        let count = 0;
+        const intervalId = setInterval(() => {
+          handleExpand();
+          count++;
+          if (count >= 20) {
+            clearInterval(intervalId);
+          }
+        }, 10);
+      }
+    }, [expand]);
+    const s = { ...getAgentActionStyle(item.type), ...style } as SxProps;
+    React.useEffect(() => {
+      console.log(item);
+    }, [item]);
+    return (
+      <Box
+        ref={actionRef}
+        className="step-history-item"
+        sx={{
+          userSelect: 'none',
+          borderRadius: '10px',
+          padding: '4px',
+          fontSize: '14px',
+          position: 'relative',
+          marginTop: '4px',
+          backgroundColor: (s as any).backgroundColor,
+          border: `2px solid ${(s as any).borderColor}`,
+        }}
+        onMouseOver={() => hoverCallback(true)}
+        onMouseOut={() => hoverCallback(false)}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <AgentIcon
+            name={globalStorage.agentIconMap.get(item.agent)}
+            style={{ height: '36px', width: 'auto', margin: '0px' }}
+            tooltipInfo={globalStorage.agentMap.get(item.agent)}
+          />
+          <Box component="span" sx={{ fontWeight: 500, marginLeft: '4px' }}>
+            {item.agent}
+          </Box>
+          <Box component="span" sx={{ fontWeight: 400 }}>
+            : {item.type}
+          </Box>
+        </Box>
+        {item.result ? (
+          <Box
+            ref={refDetail}
+            sx={{
+              overflow: 'hidden',
+              transition: 'height 200ms ease-out', // 添加过渡效果
+            }}
+          >
+            {expand ? (
+              <>
+                <Divider
+                  sx={{
+                    margin: '4px 0px',
+                    borderBottom: '2px dashed', // 设置为虚线
+                    borderColor: '#0003',
+                  }}
+                />
+                <Box
+                  sx={{
+                    marginLeft: '6px',
+                    marginBottom: '4px',
+                    color: '#0009',
+                    fontWeight: 400,
+                  }}
+                >
+                  {item.description}
+                </Box>
+                <MarkdownBlock
+                  text={item.result}
+                  style={{
+                    marginTop: '5px',
+                    borderRadius: '10px',
+                    padding: '6px',
+                    background: '#FFF9',
+                    fontSize: '12px',
+                    maxHeight: '240px',
+                    overflowY: 'auto',
+                    border: '1px solid #0003',
+                    whiteSpace: 'pre-wrap',
+                    wordWrap: 'break-word',
+                    marginBottom: '5px',
+                  }}
+                />
+              </>
+            ) : (
+              <></>
+            )}
+            <Box
+              onClick={e => {
+                setExpand(v => !v);
+                e.stopPropagation();
+              }}
+              sx={{
+                position: 'absolute',
+                right: '8px',
+                // bottom: '12px',
+                top: '24px',
+                cursor: 'pointer',
+                userSelect: 'none',
+                height: '14px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: '#0002',
+                borderRadius: '8px',
+                marginLeft: '4px',
+                padding: '0 4px',
+                '&:hover': {
+                  background: '#0003',
+                },
+              }}
+            >
+              {expand ? (
+                <UnfoldLessIcon
+                  sx={{ fontSize: '16px', transform: 'rotate(90deg)' }}
+                />
+              ) : (
+                <MoreHorizIcon sx={{ fontSize: '16px' }} />
+              )}
+            </Box>
+          </Box>
+        ) : (
+          <></>
+        )}
+      </Box>
+    );
+  },
+);