Fix: Added styles for empty states on the page. #10703 (#11588)

### What problem does this PR solve?

Fix: Added styles for empty states on the page.
### Type of change

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

web/src/pages/agents/index.tsx

@@ -1,4 +1,6 @@
 import { CardContainer } from '@/components/card-container';
+import { EmptyCardType } from '@/components/empty/constant';
+import { EmptyAppCard } from '@/components/empty/empty';
 import ListFilterBar from '@/components/list-filter-bar';
 import { RenameDialog } from '@/components/rename-dialog';
 import { Button } from '@/components/ui/button';
@@ -14,7 +16,8 @@ import { useFetchAgentListByPage } from '@/hooks/use-agent-request';
 import { t } from 'i18next';
 import { pick } from 'lodash';
 import { Clipboard, ClipboardPlus, FileInput, Plus } from 'lucide-react';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
+import { useSearchParams } from 'umi';
 import { AgentCard } from './agent-card';
 import { CreateAgentDialog } from './create-agent-dialog';
 import { useCreateAgentOrPipeline } from './hooks/use-create-agent';
@@ -67,95 +70,120 @@ export default function Agents() {
     },
     [setPagination],
   );
-
+  const [searchUrl, setSearchUrl] = useSearchParams();
+  const isCreate = searchUrl.get('isCreate') === 'true';
+  useEffect(() => {
+    if (isCreate) {
+      showCreatingModal();
+      searchUrl.delete('isCreate');
+      setSearchUrl(searchUrl);
+    }
+  }, [isCreate, showCreatingModal, searchUrl, setSearchUrl]);
   return (
-    <section className="flex flex-col w-full flex-1">
-      <div className="px-8 pt-8 ">
-        <ListFilterBar
-          title={t('flow.agents')}
-          searchString={searchString}
-          onSearchChange={handleInputChange}
-          icon="agents"
-          filters={filters}
-          onChange={handleFilterSubmit}
-          value={filterValue}
-        >
-          <DropdownMenu>
-            <DropdownMenuTrigger>
-              <Button>
-                <Plus className="mr-2 h-4 w-4" />
-                {t('flow.createGraph')}
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuItem
-                justifyBetween={false}
-                onClick={showCreatingModal}
-              >
-                <Clipboard />
-                {t('flow.createFromBlank')}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                justifyBetween={false}
-                onClick={navigateToAgentTemplates}
-              >
-                <ClipboardPlus />
-                {t('flow.createFromTemplate')}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                justifyBetween={false}
-                onClick={handleImportJson}
-              >
-                <FileInput />
-                {t('flow.importJsonFile')}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </ListFilterBar>
-      </div>
-      <div className="flex-1 overflow-auto">
-        <CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
-          {data.map((x) => {
-            return (
-              <AgentCard
-                key={x.id}
-                data={x}
-                showAgentRenameModal={showAgentRenameModal}
-              ></AgentCard>
-            );
-          })}
-        </CardContainer>
-      </div>
-      <div className="mt-8 px-8 pb-8">
-        <RAGFlowPagination
-          {...pick(pagination, 'current', 'pageSize')}
-          total={pagination.total}
-          onChange={handlePageChange}
-        ></RAGFlowPagination>
-      </div>
-      {agentRenameVisible && (
-        <RenameDialog
-          hideModal={hideAgentRenameModal}
-          onOk={onAgentRenameOk}
-          initialName={initialAgentName}
-          loading={agentRenameLoading}
-        ></RenameDialog>
+    <>
+      {(!data?.length || data?.length <= 0) && (
+        <div className="flex w-full items-center justify-center h-[calc(100vh-164px)]">
+          <EmptyAppCard
+            showIcon
+            size="large"
+            className="w-[480px] p-14"
+            type={EmptyCardType.Agent}
+            onClick={() => showCreatingModal()}
+          />
+        </div>
       )}
-      {creatingVisible && (
-        <CreateAgentDialog
-          loading={loading}
-          visible={creatingVisible}
-          hideModal={hideCreatingModal}
-          shouldChooseAgent
-          onOk={handleCreateAgentOrPipeline}
-        ></CreateAgentDialog>
-      )}
-      {fileUploadVisible && (
-        <UploadAgentDialog
-          hideModal={hideFileUploadModal}
-          onOk={onFileUploadOk}
-        ></UploadAgentDialog>
-      )}
-    </section>
+      <section className="flex flex-col w-full flex-1">
+        {!!data?.length && (
+          <>
+            <div className="px-8 pt-8 ">
+              <ListFilterBar
+                title={t('flow.agents')}
+                searchString={searchString}
+                onSearchChange={handleInputChange}
+                icon="agents"
+                filters={filters}
+                onChange={handleFilterSubmit}
+                value={filterValue}
+              >
+                <DropdownMenu>
+                  <DropdownMenuTrigger>
+                    <Button>
+                      <Plus className="mr-2 h-4 w-4" />
+                      {t('flow.createGraph')}
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent>
+                    <DropdownMenuItem
+                      justifyBetween={false}
+                      onClick={showCreatingModal}
+                    >
+                      <Clipboard />
+                      {t('flow.createFromBlank')}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      justifyBetween={false}
+                      onClick={navigateToAgentTemplates}
+                    >
+                      <ClipboardPlus />
+                      {t('flow.createFromTemplate')}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      justifyBetween={false}
+                      onClick={handleImportJson}
+                    >
+                      <FileInput />
+                      {t('flow.importJsonFile')}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </ListFilterBar>
+            </div>
+            <div className="flex-1 overflow-auto">
+              <CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
+                {data.map((x) => {
+                  return (
+                    <AgentCard
+                      key={x.id}
+                      data={x}
+                      showAgentRenameModal={showAgentRenameModal}
+                    ></AgentCard>
+                  );
+                })}
+              </CardContainer>
+            </div>
+            <div className="mt-8 px-8 pb-8">
+              <RAGFlowPagination
+                {...pick(pagination, 'current', 'pageSize')}
+                total={pagination.total}
+                onChange={handlePageChange}
+              ></RAGFlowPagination>
+            </div>
+          </>
+        )}
+        {agentRenameVisible && (
+          <RenameDialog
+            hideModal={hideAgentRenameModal}
+            onOk={onAgentRenameOk}
+            initialName={initialAgentName}
+            loading={agentRenameLoading}
+          ></RenameDialog>
+        )}
+        {creatingVisible && (
+          <CreateAgentDialog
+            loading={loading}
+            visible={creatingVisible}
+            hideModal={hideCreatingModal}
+            shouldChooseAgent
+            onOk={handleCreateAgentOrPipeline}
+          ></CreateAgentDialog>
+        )}
+        {fileUploadVisible && (
+          <UploadAgentDialog
+            hideModal={hideFileUploadModal}
+            onOk={onFileUploadOk}
+          ></UploadAgentDialog>
+        )}
+      </section>
+    </>
   );
 }