Feat: add filter in chat and search page (#16707)

web/src/hooks/use-chat-request.ts

@@ -1,4 +1,5 @@
 import { FileUploadProps } from '@/components/file-upload';
+import { useHandleFilterSubmit } from '@/components/list-filter-bar/use-handle-filter-submit';
 import message from '@/components/ui/message';
 import { ChatSearchParams } from '@/constants/chat';
 import {
@@ -65,6 +66,7 @@ export const useFetchChatList = () => {
   const { searchString, handleInputChange } = useHandleSearchChange();
   const { pagination, setPagination } = useGetPaginationWithRouter();
   const debouncedSearchString = useDebounce(searchString, { wait: 500 });
+  const { filterValue, handleFilterSubmit } = useHandleFilterSubmit();
 
   const {
     data,
@@ -75,6 +77,7 @@ export const useFetchChatList = () => {
       ChatApiAction.FetchChatList,
       {
         debouncedSearchString,
+        filterValue,
         ...pagination,
       },
     ],
@@ -88,8 +91,10 @@ export const useFetchChatList = () => {
             keywords: debouncedSearchString,
             page_size: pagination.pageSize,
             page: pagination.current,
+            owner_ids: filterValue.owner,
           },
           data: {},
+          paramsSerializer: { indexes: null },
         },
         true,
       );
@@ -113,6 +118,8 @@ export const useFetchChatList = () => {
     handleInputChange: onInputChange,
     pagination: { ...pagination, total: data?.total },
     setPagination,
+    filterValue,
+    handleFilterSubmit,
   };
 };
 

web/src/pages/next-chats/index.tsx

@@ -6,6 +6,7 @@ import { RenameDialog } from '@/components/rename-dialog';
 import { Button } from '@/components/ui/button';
 import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import { useFetchChatList } from '@/hooks/use-chat-request';
+import { buildOwnersFilter } from '@/utils/list-filter-util';
 import { pick } from 'lodash';
 import { Plus } from 'lucide-react';
 import { useCallback, useEffect, useMemo } from 'react';
@@ -16,9 +17,20 @@ import { useCreateChatDialog } from './hooks/use-create-chat';
 import { useRenameChat } from './hooks/use-rename-chat';
 
 export default function ChatList() {
-  const { data, setPagination, pagination, handleInputChange, searchString } =
-    useFetchChatList();
+  const {
+    data,
+    setPagination,
+    pagination,
+    handleInputChange,
+    searchString,
+    filterValue,
+    handleFilterSubmit,
+  } = useFetchChatList();
   const { t } = useTranslation();
+  const { t: tc } = useTranslation('common');
+  const owners = [
+    buildOwnersFilter(data?.chats ?? [], undefined, tc('owner')),
+  ];
   const {
     initialChatName,
     chatRenameVisible,
@@ -102,6 +114,9 @@ export default function ChatList() {
               icon="chats"
               onSearchChange={handleInputChange}
               searchString={searchString}
+              filters={owners}
+              value={filterValue}
+              onChange={handleFilterSubmit}
             >
               <Button data-testid="create-chat" onClick={handleShowCreateModal}>
                 <Plus className="size-[1em]" />

web/src/pages/next-searches/hooks.ts

@@ -1,5 +1,6 @@
 // src/pages/next-searches/hooks.ts
 
+import { useHandleFilterSubmit } from '@/components/list-filter-bar/use-handle-filter-submit';
 import message from '@/components/ui/message';
 import { useSetModalState } from '@/hooks/common-hooks';
 import { useHandleSearchChange } from '@/hooks/logic-hooks';
@@ -90,7 +91,7 @@ export const useFetchSearchList = () => {
   const { handleInputChange, searchString, pagination, setPagination } =
     useHandleSearchChange();
   const debouncedSearchString = useDebounce(searchString, { wait: 500 });
-
+  const { filterValue, handleFilterSubmit } = useHandleFilterSubmit();
   const { data, isLoading, isError, refetch } = useQuery<
     SearchListResponse,
     Error
@@ -99,6 +100,7 @@ export const useFetchSearchList = () => {
       'searchList',
       {
         debouncedSearchString,
+        filterValue,
         ...pagination,
       },
     ],
@@ -109,7 +111,9 @@ export const useFetchSearchList = () => {
             keywords: debouncedSearchString,
             page_size: pagination.pageSize,
             page: pagination.current,
+            owner_ids: filterValue.owner,
           },
+          paramsSerializer: { indexes: null },
         },
         true,
       );
@@ -129,6 +133,8 @@ export const useFetchSearchList = () => {
     handleInputChange,
     setPagination,
     refetch,
+    filterValue,
+    handleFilterSubmit,
   };
 };
 

web/src/pages/next-searches/index.tsx

@@ -6,6 +6,7 @@ import { RenameDialog } from '@/components/rename-dialog';
 import { Button } from '@/components/ui/button';
 import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import { useTranslate } from '@/hooks/common-hooks';
+import { buildOwnersFilter } from '@/utils/list-filter-util';
 import { pick } from 'lodash';
 import { Plus } from 'lucide-react';
 import { useCallback, useEffect } from 'react';
@@ -16,6 +17,7 @@ import { SearchCard } from './search-card';
 export default function SearchList() {
   // const { data } = useFetchFlowList();
   const { t } = useTranslate('search');
+  const { t: tc } = useTranslate('common');
   // const [isEdit, setIsEdit] = useState(false);
   const {
     data: list,
@@ -24,8 +26,12 @@ export default function SearchList() {
     handleInputChange,
     setPagination,
     refetch: refetchList,
+    filterValue,
+    handleFilterSubmit,
   } = useFetchSearchList();
-
+  const owners = [
+    buildOwnersFilter(list?.data?.search_apps ?? [], undefined, tc('owner')),
+  ];
   const {
     openCreateModal,
     showSearchRenameModal,
@@ -75,9 +81,11 @@ export default function SearchList() {
             <ListFilterBar
               icon="searches"
               title={t('searchApps')}
-              showFilter={false}
               searchString={searchString}
               onSearchChange={handleInputChange}
+              value={filterValue}
+              onChange={handleFilterSubmit}
+              filters={owners}
             >
               <Button
                 data-testid="create-search"