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/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;