feat(search): Added app embedding functionality and optimized search page #3221 (#9499)

### What problem does this PR solve?
feat(search): Added app embedding functionality and optimized search
page #3221

- Added an Embed App button and related functionality
- Optimized the layout and interaction of the search settings interface
- Adjusted the search result display method
- Refactored some code to support new features
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

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

@@ -5,7 +5,7 @@ import searchService from '@/services/search-service';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'umi';
+import { useParams, useSearchParams } from 'umi';
 
 interface CreateSearchProps {
   name: string;
@@ -156,13 +156,13 @@ export const useDeleteSearch = () => {
   return { data, isError, deleteSearch };
 };
 
-interface IllmSettingProps {
+export interface IllmSettingProps {
   llm_id: string;
   parameter: string;
-  temperature: number;
-  top_p: number;
-  frequency_penalty: number;
-  presence_penalty: number;
+  temperature?: number;
+  top_p?: number;
+  frequency_penalty?: number;
+  presence_penalty?: number;
 }
 interface IllmSettingEnableProps {
   temperatureEnabled?: boolean;
@@ -204,14 +204,29 @@ interface SearchDetailResponse {
   message: string;
 }
 
-export const useFetchSearchDetail = () => {
+export const useFetchSearchDetail = (tenantId?: string) => {
   const { id } = useParams();
+
+  const [searchParams] = useSearchParams();
+  const shared_id = searchParams.get('shared_id');
+  const searchId = id || shared_id;
+  let param: { search_id: string | null; tenant_id?: string } = {
+    search_id: searchId,
+  };
+  if (shared_id) {
+    param = {
+      search_id: searchId,
+      tenant_id: tenantId,
+    };
+  }
+  const fetchSearchDetailFunc = shared_id
+    ? searchService.getSearchDetailShare
+    : searchService.getSearchDetail;
   const { data, isLoading, isError } = useQuery<SearchDetailResponse, Error>({
-    queryKey: ['searchDetail', id],
+    queryKey: ['searchDetail', searchId],
+    enabled: !shared_id || !!tenantId,
     queryFn: async () => {
-      const { data: response } = await searchService.getSearchDetail({
-        search_id: id,
-      });
+      const { data: response } = await fetchSearchDetailFunc(param);
       if (response.code !== 0) {
         throw new Error(response.message || 'Failed to fetch search detail');
       }

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

@@ -66,7 +66,7 @@ export default function SearchList() {
     setSearchListParams({ ...searchParams, page, page_size: pageSize });
   };
   return (
-    <section>
+    <section className="w-full h-full flex flex-col">
       <div className="px-8 pt-8">
         <ListFilterBar
           icon={
@@ -89,18 +89,23 @@ export default function SearchList() {
           </Button>
         </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">
-        {list?.data.search_apps.map((x) => {
-          return <SearchCard key={x.id} data={x}></SearchCard>;
-        })}
+      <div className="flex-1">
+        <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">
+          {list?.data.search_apps.map((x) => {
+            return <SearchCard key={x.id} data={x}></SearchCard>;
+          })}
+        </div>
       </div>
-      {list?.data.total && (
-        <RAGFlowPagination
-          {...pick(searchParams, 'current', 'pageSize')}
-          total={list?.data.total}
-          onChange={handlePageChange}
-        />
+      {list?.data.total && list?.data.total > 0 && (
+        <div className="px-8 mb-4">
+          <RAGFlowPagination
+            {...pick(searchParams, 'current', 'pageSize')}
+            total={list?.data.total}
+            onChange={handlePageChange}
+          />
+        </div>
       )}
+
       <Modal
         open={openCreateModal}
         onOpenChange={(open) => {

web/src/pages/next-searches/search-card.tsx

@@ -19,7 +19,7 @@ export function SearchCard({ data }: IProps) {
         navigateToSearch(data?.id);
       }}
     >
-      <CardContent className="p-4 flex gap-2 items-start group">
+      <CardContent className="p-4 flex gap-2 items-start group h-full">
         <div className="flex justify-between mb-4">
           <RAGFlowAvatar
             className="w-[32px] h-[32px]"
@@ -27,7 +27,7 @@ export function SearchCard({ data }: IProps) {
             name={data.name}
           />
         </div>
-        <div className="flex flex-col gap-1 flex-1">
+        <div className="flex flex-col justify-between gap-1 flex-1 h-full">
           <section className="flex justify-between">
             <div className="text-[20px] font-bold w-80% leading-5">
               {data.name}
@@ -37,22 +37,13 @@ export function SearchCard({ data }: IProps) {
             </SearchDropdown>
           </section>
 
-          <div>{data.description}</div>
-          <section className="flex justify-between">
+          <section className="flex flex-col gap-1 mt-1">
+            <div>{data.description}</div>
             <div>
-              Search app
               <p className="text-sm opacity-80">
                 {formatDate(data.update_time)}
               </p>
             </div>
-            {/* <div className="space-x-2 invisible group-hover:visible">
-              <Button variant="icon" size="icon" onClick={navigateToSearch}>
-                <ChevronRight className="h-6 w-6" />
-              </Button>
-              <Button variant="icon" size="icon">
-                <Trash2 />
-              </Button>
-            </div> */}
           </section>
         </div>
       </CardContent>