Feat: Add dataset sidebar #3221 (#3683)

### What problem does this PR solve?

Feat: Add dataset sidebar #3221

### Type of change


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

web/src/pages/dataset/dataset/index.tsx

@@ -0,0 +1,3 @@
+export default function Dataset() {
+  return <div>Outset</div>;
+}

web/src/pages/dataset/index.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from 'umi';
+import { SideBar } from './sidebar';
+
+export default function DatasetWrapper() {
+  return (
+    <div className="text-foreground flex">
+      <SideBar></SideBar>
+      <div className="p-6">
+        <Outlet />
+      </div>
+    </div>
+  );
+}

web/src/pages/dataset/settings/index.tsx

@@ -0,0 +1,3 @@
+export default function DatasetSettings() {
+  return <div>DatasetSettings</div>;
+}

web/src/pages/dataset/sidebar/hooks.tsx

@@ -0,0 +1,16 @@
+import { DatasetBaseKey, KnowledgeRouteKey } from '@/constants/knowledge';
+import { useCallback } from 'react';
+import { useNavigate } from 'umi';
+
+export const useHandleMenuClick = () => {
+  const navigate = useNavigate();
+
+  const handleMenuClick = useCallback(
+    (key: KnowledgeRouteKey) => () => {
+      navigate(`/${DatasetBaseKey}/${key}`);
+    },
+    [navigate],
+  );
+
+  return { handleMenuClick };
+};

web/src/pages/dataset/sidebar/index.tsx

@@ -0,0 +1,66 @@
+import { Button } from '@/components/ui/button';
+import { KnowledgeRouteKey } from '@/constants/knowledge';
+import { useSecondPathName } from '@/hooks/route-hook';
+import { cn } from '@/lib/utils';
+import { Banknote, LayoutGrid, User } from 'lucide-react';
+import { useHandleMenuClick } from './hooks';
+
+const items = [
+  { icon: User, label: 'Dataset', key: KnowledgeRouteKey.Dataset },
+  {
+    icon: LayoutGrid,
+    label: 'Retrieval testing',
+    key: KnowledgeRouteKey.Testing,
+  },
+  { icon: Banknote, label: 'Settings', key: KnowledgeRouteKey.Configuration },
+];
+
+const dataset = {
+  id: 1,
+  title: 'Legal knowledge base',
+  files: '1,242 files',
+  size: '152 MB',
+  created: '12.02.2024',
+  image: 'https://github.com/shadcn.png',
+};
+
+export function SideBar() {
+  const pathName = useSecondPathName();
+  const { handleMenuClick } = useHandleMenuClick();
+
+  return (
+    <aside className="w-[303px]">
+      <div className="p-6 space-y-2 border-b">
+        <div
+          className="w-[70px] h-[70px] rounded-xl bg-cover"
+          style={{ backgroundImage: `url(${dataset.image})` }}
+        />
+
+        <h3 className="text-lg font-semibold mb-2">{dataset.title}</h3>
+        <div className="text-sm opacity-80">
+          {dataset.files} | {dataset.size}
+        </div>
+        <div className="text-sm opacity-80">Created {dataset.created}</div>
+      </div>
+      <div className="mt-4">
+        {items.map((item, itemIdx) => {
+          const active = pathName === item.key;
+          return (
+            <Button
+              key={itemIdx}
+              variant={active ? 'secondary' : 'ghost'}
+              className={cn('w-full justify-start gap-2.5 p-6 relative')}
+              onClick={handleMenuClick(item.key)}
+            >
+              <item.icon className="w-6 h-6" />
+              <span>{item.label}</span>
+              {active && (
+                <div className="absolute right-0 w-[5px] h-[66px] bg-primary rounded-l-xl shadow-[0_0_5.94px_#7561ff,0_0_11.88px_#7561ff,0_0_41.58px_#7561ff,0_0_83.16px_#7561ff,0_0_142.56px_#7561ff,0_0_249.48px_#7561ff]" />
+              )}
+            </Button>
+          );
+        })}
+      </div>
+    </aside>
+  );
+}

web/src/pages/dataset/testing/index.tsx

@@ -0,0 +1,3 @@
+export default function RetrievalTesting() {
+  return <div>Retrieval testing</div>;
+}