4.6.8-alpha (#804)

* perf: redirect request and err log replace

perf: dataset openapi

feat: session

fix: retry input error

feat: 468 doc

sub page

feat: standard sub

perf: rerank tip

perf: rerank tip

perf: api sdk

perf: openapi

sub plan

perf: sub ui

fix: ts

* perf: init log

* fix: variable select

* sub page

* icon

* perf: llm model config

* perf: menu ux

* perf: system store

* perf: publish app name

* fix: init data

* perf: flow edit ux

* fix: value type format and ux

* fix prompt editor default value (#13)

* fix prompt editor default value

* fix prompt editor update when not focus

* add key with variable

---------

Co-authored-by: Archer <545436317@qq.com>

* fix: value type

* doc

* i18n

* import path

* home page

* perf: mongo session running

* fix: ts

* perf: use toast

* perf: flow edit

* perf: sse response

* slider ui

* fetch error

* fix prompt editor rerender when not focus by key defaultvalue (#14)

* perf: prompt editor

* feat: dataset search concat

* perf: doc

* fix:ts

* perf: doc

* fix json editor onblur value (#15)

* faq

* vector model default config

* ipv6

---------

Co-authored-by: heheer <71265218+newfish-cmyk@users.noreply.github.com>

projects/app/src/components/MyMenu/index.tsx

@@ -1,18 +1,27 @@
-import React from 'react';
-import { Menu, MenuList, MenuItem } from '@chakra-ui/react';
+import React, { useRef, useState } from 'react';
+import { Menu, MenuList, MenuItem, Box, useOutsideClick, MenuButton } from '@chakra-ui/react';
+import MyIcon from '@fastgpt/web/components/common/Icon';
 
 interface Props {
-  width: number;
+  width?: number | string;
   offset?: [number, number];
   Button: React.ReactNode;
+  trigger?: 'hover' | 'click';
   menuList: {
     isActive?: boolean;
-    child: React.ReactNode;
+    label: string | React.ReactNode;
+    icon?: string;
     onClick: () => any;
   }[];
 }
 
-const MyMenu = ({ width, offset = [0, 10], Button, menuList }: Props) => {
+const MyMenu = ({
+  width = 'auto',
+  trigger = 'hover',
+  offset = [0, 5],
+  Button,
+  menuList
+}: Props) => {
   const menuItemStyles = {
     borderRadius: 'sm',
     py: 3,
@@ -23,31 +32,80 @@ const MyMenu = ({ width, offset = [0, 10], Button, menuList }: Props) => {
       color: 'primary.600'
     }
   };
+  const ref = useRef<HTMLDivElement>(null);
+  const closeTimer = useRef<any>();
+  const [isOpen, setIsOpen] = useState(false);
+
+  useOutsideClick({
+    ref: ref,
+    handler: () => {
+      setIsOpen(false);
+    }
+  });
 
   return (
-    <Menu offset={offset} autoSelect={false} isLazy>
-      {Button}
-      <MenuList
-        minW={`${width}px !important`}
-        p={'6px'}
-        border={'1px solid #fff'}
-        boxShadow={'0px 2px 4px rgba(161, 167, 179, 0.25), 0px 0px 1px rgba(121, 141, 159, 0.25);'}
+    <Menu offset={offset} isOpen={isOpen} autoSelect={false} direction={'ltr'} isLazy>
+      <Box
+        ref={ref}
+        onMouseEnter={() => {
+          if (trigger === 'hover') {
+            setIsOpen(true);
+          }
+          clearTimeout(closeTimer.current);
+        }}
+        onMouseLeave={() => {
+          if (trigger === 'hover') {
+            closeTimer.current = setTimeout(() => {
+              setIsOpen(false);
+            }, 100);
+          }
+        }}
       >
-        {menuList.map((item, i) => (
-          <MenuItem
-            key={i}
-            {...menuItemStyles}
-            onClick={(e) => {
-              e.stopPropagation();
-              item.onClick && item.onClick();
-            }}
-            color={item.isActive ? 'primary.700' : 'myGray.600'}
-            whiteSpace={'pre-wrap'}
-          >
-            {item.child}
-          </MenuItem>
-        ))}
-      </MenuList>
+        <Box
+          position={'relative'}
+          onClickCapture={() => {
+            if (trigger === 'click') {
+              setIsOpen(!isOpen);
+            }
+          }}
+        >
+          <MenuButton
+            w={'100%'}
+            h={'100%'}
+            position={'absolute'}
+            top={0}
+            right={0}
+            bottom={0}
+            left={0}
+          />
+          <Box position={'relative'}>{Button}</Box>
+        </Box>
+        <MenuList
+          minW={isOpen ? `${width}px !important` : 0}
+          p={'6px'}
+          border={'1px solid #fff'}
+          boxShadow={
+            '0px 2px 4px rgba(161, 167, 179, 0.25), 0px 0px 1px rgba(121, 141, 159, 0.25);'
+          }
+        >
+          {menuList.map((item, i) => (
+            <MenuItem
+              key={i}
+              {...menuItemStyles}
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsOpen(false);
+                item.onClick && item.onClick();
+              }}
+              color={item.isActive ? 'primary.700' : 'myGray.600'}
+              whiteSpace={'pre-wrap'}
+            >
+              {!!item.icon && <MyIcon name={item.icon as any} w={'16px'} mr={2} />}
+              {item.label}
+            </MenuItem>
+          ))}
+        </MenuList>
+      </Box>
     </Menu>
   );
 };