feat(next-search): Implements document preview functionality #3221 (#9465)

### What problem does this PR solve?

feat(next-search): Implements document preview functionality

- Adds a new document preview modal component
- Implements document preview page logic
- Adds document preview-related hooks
- Optimizes document preview rendering logic
### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/next-search/mindmap-drawer.tsx

@@ -0,0 +1,47 @@
+import IndentedTree from '@/components/indented-tree/indented-tree';
+import { Progress } from '@/components/ui/progress';
+import { IModalProps } from '@/interfaces/common';
+import { X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { usePendingMindMap } from '../search/hooks';
+
+interface IProps extends IModalProps<any> {
+  data: any;
+}
+
+const MindMapDrawer = ({ data, hideModal, visible, loading }: IProps) => {
+  const { t } = useTranslation();
+  const percent = usePendingMindMap();
+  return (
+    <div className="w-[400px] h-[420px]">
+      <div className="flex w-full justify-between items-center mb-2">
+        <div className="text-text-primary font-medium text-base">
+          {t('chunk.mind')}
+        </div>
+        <X
+          className="text-text-primary cursor-pointer"
+          size={16}
+          onClick={() => {
+            hideModal?.();
+          }}
+        />
+      </div>
+      {loading && (
+        <div className="absolute top-48">
+          <Progress value={percent} className="h-1 flex-1 min-w-10" />
+        </div>
+      )}
+      {!loading && (
+        <div className="bg-bg-card rounded-lg p-4 w-[400px] h-[380px]">
+          <IndentedTree
+            data={data}
+            show
+            style={{ width: '100%', height: '100%' }}
+          ></IndentedTree>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MindMapDrawer;