From 7e65df87dd9896ad23b54ebbf13e828ea9fe5093 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 5 Sep 2024 12:12:44 +0800
Subject: [PATCH] feat: Add Sider to SearchPage #2247 (#2262)

### What problem does this PR solve?

feat: Add Sider to SearchPage #2247

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/hooks/knowledge-hooks.ts |  2 +-
 web/src/pages/search/index.less  | 24 ++++++++++++
 web/src/pages/search/index.tsx   | 66 +++++++++++++++++++++++++++++++-
 3 files changed, 90 insertions(+), 2 deletions(-)
 create mode 100644 web/src/pages/search/index.less

diff --git a/web/src/hooks/knowledge-hooks.ts b/web/src/hooks/knowledge-hooks.ts
index 80ae8fdea..f26bfa689 100644
--- a/web/src/hooks/knowledge-hooks.ts
+++ b/web/src/hooks/knowledge-hooks.ts
@@ -69,7 +69,7 @@ export const useFetchKnowledgeBaseConfiguration = () => {
 export const useNextFetchKnowledgeList = (
   shouldFilterListWithoutDocument: boolean = false,
 ): {
-  list: any[];
+  list: IKnowledge[];
   loading: boolean;
 } => {
   const { data, isFetching: loading } = useQuery({
diff --git a/web/src/pages/search/index.less b/web/src/pages/search/index.less
new file mode 100644
index 000000000..d92494e46
--- /dev/null
+++ b/web/src/pages/search/index.less
@@ -0,0 +1,24 @@
+.searchSide {
+  overflow: auto;
+  height: 100vh;
+  position: fixed !important;
+  inset-inline-start: 0;
+  top: 0;
+  bottom: 0;
+  scrollbar-width: thin;
+  scrollbar-color: unset;
+
+  .checkGroup {
+    width: 100%;
+    height: 100%;
+  }
+  .list {
+    width: 100%;
+  }
+  .checkbox {
+    width: 100%;
+  }
+  .knowledgeName {
+    width: 120px;
+  }
+}
diff --git a/web/src/pages/search/index.tsx b/web/src/pages/search/index.tsx
index 86fc54ef6..6c2e09e1d 100644
--- a/web/src/pages/search/index.tsx
+++ b/web/src/pages/search/index.tsx
@@ -1,5 +1,69 @@
+import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { Checkbox, Layout, List, Typography } from 'antd';
+import React, { useCallback } from 'react';
+
+import { CheckboxValueType } from 'antd/es/checkbox/Group';
+import styles from './index.less';
+
+const { Header, Content, Footer, Sider } = Layout;
+
 const SearchPage = () => {
-  return <div>SearchPage</div>;
+  const { list } = useNextFetchKnowledgeList();
+
+  const handleChange = useCallback((checkedValue: CheckboxValueType[]) => {
+    console.log('🚀 ~ handleChange ~ args:', checkedValue);
+  }, []);
+
+  return (
+    <Layout hasSider>
+      <Sider className={styles.searchSide} theme={'light'}>
+        <Checkbox.Group className={styles.checkGroup} onChange={handleChange}>
+          <List
+            bordered
+            dataSource={list}
+            className={styles.list}
+            renderItem={(item) => (
+              <List.Item>
+                <Checkbox value={item.id} className={styles.checkbox}>
+                  <Typography.Text
+                    ellipsis={{ tooltip: item.name }}
+                    className={styles.knowledgeName}
+                  >
+                    {item.name}
+                  </Typography.Text>
+                </Checkbox>
+              </List.Item>
+            )}
+          />
+        </Checkbox.Group>
+      </Sider>
+      <Layout style={{ marginInlineStart: 200 }}>
+        <Header style={{ padding: 0 }} />
+        <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
+          <div
+            style={{
+              padding: 24,
+              textAlign: 'center',
+            }}
+          >
+            <p>long content</p>
+            {
+              // indicates very long content
+              Array.from({ length: 100 }, (_, index) => (
+                <React.Fragment key={index}>
+                  {index % 20 === 0 && index ? 'more' : '...'}
+                  <br />
+                </React.Fragment>
+              ))
+            }
+          </div>
+        </Content>
+        <Footer style={{ textAlign: 'center' }}>
+          Ant Design ©{new Date().getFullYear()} Created by Ant UED
+        </Footer>
+      </Layout>
+    </Layout>
+  );
 };
 
 export default SearchPage;