fix: Optimized popups and the search page (#9297)

### What problem does this PR solve?

fix: Optimized popups and the search page #3221 
- Added a new PortalModal component
- Refactored the Modal component, adding show and hide methods to
support popups
- Updated the search page, adding a new query function and optimizing
the search card style
- Localized, added search-related translations

### Type of change

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

web/src/pages/agents/agent-log-detail-modal.tsx

@@ -1,5 +1,5 @@
 import MessageItem from '@/components/next-message-item';
-import { Modal } from '@/components/ui/modal';
+import { Modal } from '@/components/ui/modal/modal';
 import { useFetchAgent } from '@/hooks/use-agent-request';
 import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import { IAgentLogMessage } from '@/interfaces/database/agent';

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/index.tsx

@@ -13,7 +13,7 @@ import {
   HoverCardContent,
   HoverCardTrigger,
 } from '@/components/ui/hover-card';
-import { Modal } from '@/components/ui/modal';
+import { Modal } from '@/components/ui/modal/modal';
 import Space from '@/components/ui/space';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/index.tsx

@@ -61,7 +61,7 @@ export default ({
   };
   return (
     <div className="flex pr-[25px]">
-      <div className="flex items-center gap-4 bg-background-card text-muted w-fit h-[35px] rounded-md px-4 py-2 text-base">
+      <div className="flex items-center gap-4 bg-background-card text-muted-foreground w-fit h-[35px] rounded-md px-4 py-2">
         {textSelectOptions.map((option) => (
           <div
             key={option.value}

web/src/pages/dataset/setting/index.tsx

@@ -98,13 +98,13 @@ export default function DatasetSettings() {
                 setCurrentTab(val);
               }}
             >
-              <TabsList className="grid bg-background grid-cols-2 rounded-none bg-[#161618]">
+              <TabsList className="grid bg-transparent grid-cols-2 rounded-none text-foreground">
                 <TabsTrigger
                   value="generalForm"
                   className="group bg-transparent p-0 !border-transparent"
                 >
-                  <div className="flex w-full h-full justify-center	items-center	bg-[#161618]">
-                    <span className="h-full group-data-[state=active]:border-b-2 border-white	">
+                  <div className="flex w-full h-full justify-center	items-center">
+                    <span className="h-full group-data-[state=active]:border-b-2 border-foreground	">
                       General
                     </span>
                   </div>
@@ -113,8 +113,8 @@ export default function DatasetSettings() {
                   value="chunkMethodForm"
                   className="group bg-transparent p-0 !border-transparent"
                 >
-                  <div className="flex w-full h-full justify-center	items-center	bg-[#161618]">
-                    <span className="h-full group-data-[state=active]:border-b-2 border-white	">
+                  <div className="flex w-full h-full justify-center	items-center">
+                    <span className="h-full group-data-[state=active]:border-b-2 border-foreground	">
                       Chunk Method
                     </span>
                   </div>

web/src/pages/next-chats/share/parameter-dialog.tsx

@@ -1,4 +1,4 @@
-import { Modal } from '@/components/ui/modal';
+import { Modal } from '@/components/ui/modal/modal';
 import { IModalProps } from '@/interfaces/common';
 import DebugContent from '@/pages/agent/debug-content';
 import { buildBeginInputListFromObject } from '@/pages/agent/form/begin-form/utils';

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

@@ -1,23 +1,73 @@
 import ListFilterBar from '@/components/list-filter-bar';
+import { Input } from '@/components/originui/input';
 import { Button } from '@/components/ui/button';
+import { Modal } from '@/components/ui/modal/modal';
+import { useTranslate } from '@/hooks/common-hooks';
 import { useFetchFlowList } from '@/hooks/flow-hooks';
-import { Plus } from 'lucide-react';
+import { Plus, Search } from 'lucide-react';
+import { useState } from 'react';
 import { SearchCard } from './search-card';
 
 export default function SearchList() {
   const { data } = useFetchFlowList();
-
+  const { t } = useTranslate('search');
+  const [searchName, setSearchName] = useState('');
+  const handleSearchChange = (value: string) => {
+    console.log(value);
+  };
   return (
     <section>
       <div className="px-8 pt-8">
-        <ListFilterBar title="Search apps">
-          <Button variant={'tertiary'} size={'sm'}>
+        <ListFilterBar
+          icon={
+            <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>
+          }
+          title="Search apps"
+          showFilter={false}
+          onSearchChange={(e) => handleSearchChange(e.target.value)}
+        >
+          <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();
+                },
+              });
+            }}
+          >
             <Plus className="mr-2 h-4 w-4" />
-            Create app
+            {t('createSearch')}
           </Button>
         </ListFilterBar>
       </div>
-      <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 max-h-[84vh] overflow-auto px-8">
+      <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) => {
           return <SearchCard key={x.id} data={x}></SearchCard>;
         })}

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

@@ -1,4 +1,5 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { MoreButton } from '@/components/more-button';
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
@@ -15,38 +16,40 @@ export function SearchCard({ data }: IProps) {
 
   return (
     <Card className="bg-colors-background-inverse-weak  border-colors-outline-neutral-standard">
-      <CardContent className="p-4">
+      <CardContent className="p-4 flex gap-2 items-start group">
         <div className="flex justify-between mb-4">
-          {data.avatar ? (
-            <div
-              className="w-[70px] h-[70px] rounded-xl bg-cover"
-              style={{ backgroundImage: `url(${data.avatar})` }}
-            />
-          ) : (
-            <Avatar className="w-[70px] h-[70px]">
-              <AvatarImage src="https://github.com/shadcn.png" />
-              <AvatarFallback>CN</AvatarFallback>
-            </Avatar>
-          )}
+          <RAGFlowAvatar
+            className="w-[70px] h-[70px]"
+            avatar={data.avatar}
+            name={data.title}
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <section className="flex justify-between">
+            <div className="text-[20px] font-bold size-7 leading-5">
+              {data.title}
+            </div>
+            <MoreButton></MoreButton>
+          </section>
+
+          <div>An app that does things An app that does things</div>
+          <section className="flex justify-between">
+            <div>
+              Search app
+              <p className="text-sm opacity-80">
+                {formatPureDate(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>
-        <h3 className="text-xl font-bold mb-2">{data.title}</h3>
-        <p>An app that does things An app that does things</p>
-        <section className="flex justify-between pt-3">
-          <div>
-            Search app
-            <p className="text-sm opacity-80">
-              {formatPureDate(data.update_time)}
-            </p>
-          </div>
-          <div className="space-x-2">
-            <Button variant="icon" size="icon" onClick={navigateToSearch}>
-              <ChevronRight className="h-6 w-6" />
-            </Button>
-            <Button variant="icon" size="icon">
-              <Trash2 />
-            </Button>
-          </div>
-        </section>
       </CardContent>
     </Card>
   );