From 8f2c0176b4a3c46c780fc9145ebcaf4ad4c6a9fd Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Fri, 13 Sep 2024 11:38:09 +0800
Subject: [PATCH] feat: Use Spin to wrap the chunk list on the search page
 #2247 (#2409)

### What problem does this PR solve?

feat: Use Spin to wrap the chunk list on the search page #2247
### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):
---
 web/src/pages/search/hooks.ts   | 21 ++++++++--
 web/src/pages/search/index.less |  1 +
 web/src/pages/search/index.tsx  | 72 +++++++++++++++++----------------
 3 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/web/src/pages/search/hooks.ts b/web/src/pages/search/hooks.ts
index 9a7de76d3b..57441fe3d5 100644
--- a/web/src/pages/search/hooks.ts
+++ b/web/src/pages/search/hooks.ts
@@ -25,24 +25,39 @@ export const useSendQuestion = (kbIds: string[]) => {
   const [isFirstRender, setIsFirstRender] = useState(true);
   const [selectedDocumentIds, setSelectedDocumentIds] = useState<string[]>([]);
 
-  const { pagination } = useGetPaginationWithRouter();
+  const { pagination, setPagination } = useGetPaginationWithRouter();
 
   const sendQuestion = useCallback(
     (question: string) => {
       const q = trim(question);
       if (isEmpty(q)) return;
+      setPagination({ page: 1 });
       setIsFirstRender(false);
       setCurrentAnswer({} as IAnswer);
       setSendingLoading(true);
       send({ kb_ids: kbIds, question: q });
-      testChunk({ kb_id: kbIds, highlight: true, question: q });
+      testChunk({
+        kb_id: kbIds,
+        highlight: true,
+        question: q,
+        page: 1,
+        size: pagination.pageSize,
+      });
       fetchMindMap({
         question: q,
         kb_ids: kbIds,
       });
       fetchRelatedQuestions(q);
     },
-    [send, testChunk, kbIds, fetchRelatedQuestions, fetchMindMap],
+    [
+      send,
+      testChunk,
+      kbIds,
+      fetchRelatedQuestions,
+      fetchMindMap,
+      setPagination,
+      pagination.pageSize,
+    ],
   );
 
   const handleSearchStrChange: ChangeEventHandler<HTMLInputElement> =
diff --git a/web/src/pages/search/index.less b/web/src/pages/search/index.less
index 1b0bd51340..a36ce9734c 100644
--- a/web/src/pages/search/index.less
+++ b/web/src/pages/search/index.less
@@ -3,6 +3,7 @@
   background-size: cover;
   .card {
     width: 100%;
+    cursor: pointer;
     :global(.ant-card-body) {
       padding: 14px;
     }
diff --git a/web/src/pages/search/index.tsx b/web/src/pages/search/index.tsx
index 4eec7601be..f236c8c705 100644
--- a/web/src/pages/search/index.tsx
+++ b/web/src/pages/search/index.tsx
@@ -22,6 +22,7 @@ import {
   Popover,
   Skeleton,
   Space,
+  Spin,
   Tag,
 } from 'antd';
 import { useMemo, useState } from 'react';
@@ -139,44 +140,45 @@ const SearchPage = () => {
                     onTesting={handleTestChunk}
                   ></RetrievalDocuments>
                   <Divider></Divider>
-                  {chunks.length > 0 && (
-                    <List
-                      dataSource={chunks}
-                      loading={loading}
-                      className={styles.chunks}
-                      renderItem={(item) => (
-                        <List.Item>
-                          <Card
-                            className={styles.card}
-                            onClick={() =>
-                              clickDocumentButton(item.doc_id, item as any)
-                            }
-                          >
-                            <Space>
-                              <ImageWithPopover
-                                id={item.img_id}
-                              ></ImageWithPopover>
-                              <Popover
-                                content={
-                                  <div className={styles.popupMarkdown}>
+                  <Spin spinning={loading}>
+                    {chunks.length > 0 && (
+                      <List
+                        dataSource={chunks}
+                        className={styles.chunks}
+                        renderItem={(item) => (
+                          <List.Item>
+                            <Card
+                              className={styles.card}
+                              onClick={() =>
+                                clickDocumentButton(item.doc_id, item as any)
+                              }
+                            >
+                              <Space>
+                                <ImageWithPopover
+                                  id={item.img_id}
+                                ></ImageWithPopover>
+                                <Popover
+                                  content={
+                                    <div className={styles.popupMarkdown}>
+                                      <HightLightMarkdown>
+                                        {item.content_with_weight}
+                                      </HightLightMarkdown>
+                                    </div>
+                                  }
+                                >
+                                  <div>
                                     <HightLightMarkdown>
-                                      {item.content_with_weight}
+                                      {item.highlight}
                                     </HightLightMarkdown>
                                   </div>
-                                }
-                              >
-                                <div>
-                                  <HightLightMarkdown>
-                                    {item.highlight}
-                                  </HightLightMarkdown>
-                                </div>
-                              </Popover>
-                            </Space>
-                          </Card>
-                        </List.Item>
-                      )}
-                    />
-                  )}
+                                </Popover>
+                              </Space>
+                            </Card>
+                          </List.Item>
+                        )}
+                      />
+                    )}
+                  </Spin>
                   {relatedQuestions?.length > 0 && (
                     <Card title={t('chat.relatedQuestion')}>
                       <Flex wrap="wrap" gap={'10px 0'}>