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):
infiniflow · Sep 13, 2024 · 8f2c017 · 8f2c017
1 parent b261b6a
commit 8f2c017
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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'}>