Feat: New search page components and features (#9344)

### What problem does this PR solve?

Feat: New search page components and features #3221

- Added search homepage, search settings, and ongoing search components
- Implemented features such as search app list, creating search apps,
and deleting search apps
- Optimized the multi-select component, adding disabled state and suffix
display
- Adjusted navigation hooks to support search page navigation

### Type of change

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

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

@@ -1,20 +1,65 @@
 import ListFilterBar from '@/components/list-filter-bar';
 import { Input } from '@/components/originui/input';
 import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
 import { Modal } from '@/components/ui/modal/modal';
+import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import { useTranslate } from '@/hooks/common-hooks';
-import { useFetchFlowList } from '@/hooks/flow-hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { pick } from 'lodash';
 import { Plus, Search } from 'lucide-react';
 import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useCreateSearch, useFetchSearchList } from './hooks';
 import { SearchCard } from './search-card';
+const searchFormSchema = z.object({
+  name: z.string().min(1, {
+    message: 'Name is required',
+  }),
+});
 
+type SearchFormValues = z.infer<typeof searchFormSchema>;
 export default function SearchList() {
-  const { data } = useFetchFlowList();
+  // const { data } = useFetchFlowList();
   const { t } = useTranslate('search');
-  const [searchName, setSearchName] = useState('');
+  const { isLoading, isError, createSearch } = useCreateSearch();
+  const {
+    data: list,
+    searchParams,
+    setSearchListParams,
+  } = useFetchSearchList();
+  const [openCreateModal, setOpenCreateModal] = useState(false);
+  const form = useForm<SearchFormValues>({
+    resolver: zodResolver(searchFormSchema),
+    defaultValues: {
+      name: '',
+    },
+  });
   const handleSearchChange = (value: string) => {
     console.log(value);
   };
+
+  const onSubmit = async (values: SearchFormValues) => {
+    await createSearch({ name: values.name });
+    if (!isLoading) {
+      setOpenCreateModal(false);
+    }
+    form.reset({ name: '' });
+  };
+  const openCreateModalFun = () => {
+    setOpenCreateModal(true);
+  };
+  const handlePageChange = (page: number, pageSize: number) => {
+    setSearchListParams({ ...searchParams, page, page_size: pageSize });
+  };
   return (
     <section>
       <div className="px-8 pt-8">
@@ -31,35 +76,7 @@ export default function SearchList() {
           <Button
             variant={'default'}
             onClick={() => {
-              Modal.show({
-                title: (
-                  <div className="rounded-sm bg-emerald-400 bg-gradient-to-t from-emerald-400 via-emerald-400 to-emerald-200 p-1 size-6 flex justify-center items-center">
-                    <Search size={14} className="font-bold m-auto" />
-                  </div>
-                ),
-                titleClassName: 'border-none',
-                footerClassName: 'border-none',
-                visible: true,
-                children: (
-                  <div>
-                    <div>{t('createSearch')}</div>
-                    <div>name:</div>
-                    <Input
-                      defaultValue={searchName}
-                      onChange={(e) => {
-                        console.log(e.target.value, e);
-                        setSearchName(e.target.value);
-                      }}
-                    />
-                  </div>
-                ),
-                onOk: () => {
-                  console.log('ok', searchName);
-                },
-                onVisibleChange: (e) => {
-                  Modal.hide();
-                },
-              });
+              openCreateModalFun();
             }}
           >
             <Plus className="mr-2 h-4 w-4" />
@@ -68,10 +85,72 @@ export default function SearchList() {
         </ListFilterBar>
       </div>
       <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 max-h-[84vh] overflow-auto px-8">
-        {data.map((x) => {
+        {list?.data.search_apps.map((x) => {
           return <SearchCard key={x.id} data={x}></SearchCard>;
         })}
+        {/* {data.map((x) => {
+          return <SearchCard key={x.id} data={x}></SearchCard>;
+        })} */}
       </div>
+      {list?.data.total && (
+        <RAGFlowPagination
+          {...pick(searchParams, 'current', 'pageSize')}
+          total={list?.data.total}
+          onChange={handlePageChange}
+          on
+        />
+      )}
+      <Modal
+        open={openCreateModal}
+        onOpenChange={(open) => {
+          setOpenCreateModal(open);
+        }}
+        title={
+          <div className="rounded-sm bg-emerald-400 bg-gradient-to-t from-emerald-400 via-emerald-400 to-emerald-200 p-1 size-6 flex justify-center items-center">
+            <Search size={14} className="font-bold m-auto" />
+          </div>
+        }
+        className="!w-[480px] rounded-xl"
+        titleClassName="border-none"
+        footerClassName="border-none"
+        showfooter={false}
+        maskClosable={false}
+      >
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="text-base mb-4">{t('createSearch')}</div>
+
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <span className="text-destructive mr-1"> *</span>Name
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end gap-2 mt-8 mb-6">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpenCreateModal(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isLoading}>
+                {isLoading ? 'Confirm...' : 'Confirm'}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </Modal>
     </section>
   );
 }