feat: chat slider support folder (#1759)

* feat: docker-compose version

* feat: chat slider support folder

* lazy behavior

* pref: code sandbox size

packages/web/components/common/Icon/constants.ts

@@ -51,6 +51,7 @@ export const iconPaths = {
   'common/routePushLight': () => import('./icons/common/routePushLight.svg'),
   'common/saveFill': () => import('./icons/common/saveFill.svg'),
   'common/searchLight': () => import('./icons/common/searchLight.svg'),
+  'common/select': () => import('./icons/common/select.svg'),
   'common/selectLight': () => import('./icons/common/selectLight.svg'),
   'common/settingLight': () => import('./icons/common/settingLight.svg'),
   'common/text/t': () => import('./icons/common/text/t.svg'),

packages/web/components/common/Icon/icons/common/select.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M5.42469 4.94872C5.16434 5.20906 5.16434 5.63117 5.42469 5.89152C5.68504 6.15187 6.10715 6.15187 6.3675 5.89152L8.00002 4.25901L9.63253 5.89152C9.89288 6.15187 10.315 6.15187 10.5753 5.89152C10.8357 5.63117 10.8357 5.20906 10.5753 4.94872L8.47142 2.8448C8.21107 2.58445 7.78896 2.58445 7.52861 2.8448L5.42469 4.94872ZM5.42469 10.8375C5.16434 11.0979 5.16434 11.52 5.42469 11.7803L7.52861 13.8843C7.56115 13.9168 7.59623 13.9453 7.63319 13.9697C7.89196 14.1405 8.24361 14.1121 8.47142 13.8843L10.5753 11.7803C10.8357 11.52 10.8357 11.0979 10.5753 10.8375C10.315 10.5772 9.89288 10.5772 9.63253 10.8375L8.00002 12.47L6.3675 10.8375C6.10715 10.5772 5.68504 10.5772 5.42469 10.8375Z" />
+</svg>

packages/web/components/common/MyMenu/index.tsx

@@ -81,7 +81,14 @@ const MyMenu = ({
   }, [offset]);
 
   return (
-    <Menu offset={computeOffset} isOpen={isOpen} autoSelect={false} direction={'ltr'} isLazy>
+    <Menu
+      offset={computeOffset}
+      isOpen={isOpen}
+      autoSelect={false}
+      direction={'ltr'}
+      isLazy
+      lazyBehavior={'keepMounted'}
+    >
       <Box
         ref={ref}
         onMouseEnter={() => {

packages/web/components/common/MyPopover/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  useDisclosure,
+  PlacementWithLogical
+} from '@chakra-ui/react';
+
+const MyPopover = ({
+  Trigger,
+  placement,
+  offset,
+  trigger,
+  children
+}: {
+  Trigger: React.ReactNode;
+  placement?: PlacementWithLogical;
+  offset?: [number, number];
+  trigger?: 'hover' | 'click';
+  children: (e: { onClose: () => void }) => React.ReactNode;
+}) => {
+  const firstFieldRef = React.useRef(null);
+
+  const { onOpen, onClose, isOpen } = useDisclosure();
+
+  return (
+    <Popover
+      isOpen={isOpen}
+      initialFocusRef={firstFieldRef}
+      onOpen={onOpen}
+      onClose={onClose}
+      placement={placement}
+      offset={offset}
+      closeOnBlur={false}
+      trigger={trigger}
+      openDelay={100}
+      closeDelay={100}
+      isLazy
+      lazyBehavior="keepMounted"
+    >
+      <PopoverTrigger>{Trigger}</PopoverTrigger>
+      <PopoverContent p={4}>{children({ onClose })}</PopoverContent>
+    </Popover>
+  );
+};
+
+export default MyPopover;