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/home/agent-list.tsx

@@ -3,11 +3,18 @@ import { MoreButton } from '@/components/more-button';
 import { RenameDialog } from '@/components/rename-dialog';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchAgentListByPage } from '@/hooks/use-agent-request';
+import { useEffect } from 'react';
 import { AgentDropdown } from '../agents/agent-dropdown';
 import { useRenameAgent } from '../agents/use-rename-agent';
 
-export function Agents() {
-  const { data } = useFetchAgentListByPage();
+export function Agents({
+  setListLength,
+  setLoading,
+}: {
+  setListLength: (length: number) => void;
+  setLoading?: (loading: boolean) => void;
+}) {
+  const { data, loading } = useFetchAgentListByPage();
   const { navigateToAgent } = useNavigatePage();
   const {
     agentRenameLoading,
@@ -18,6 +25,11 @@ export function Agents() {
     showAgentRenameModal,
   } = useRenameAgent();
 
+  useEffect(() => {
+    setListLength(data?.length || 0);
+    setLoading?.(loading || false);
+  }, [data, setListLength, loading, setLoading]);
+
   return (
     <>
       {data.slice(0, 10).map((x) => (

web/src/pages/home/applications.tsx

@@ -1,4 +1,6 @@
 import { CardSineLineContainer } from '@/components/card-singleline-container';
+import { EmptyCardType } from '@/components/empty/constant';
+import { EmptyAppCard } from '@/components/empty/empty';
 import { HomeIcon } from '@/components/svg-icon';
 import { Segmented, SegmentedValue } from '@/components/ui/segmented';
 import { Routes } from '@/routes';
@@ -16,14 +18,29 @@ const IconMap = {
   [Routes.Agents]: 'agents',
 };
 
+const EmptyTypeMap = {
+  [Routes.Chats]: EmptyCardType.Chat,
+  [Routes.Searches]: EmptyCardType.Search,
+  [Routes.Agents]: EmptyCardType.Agent,
+};
+
 export function Applications() {
   const [val, setVal] = useState(Routes.Chats);
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const [listLength, setListLength] = useState(0);
+  const [loading, setLoading] = useState(false);
 
-  const handleNavigate = useCallback(() => {
-    navigate(val);
-  }, [navigate, val]);
+  const handleNavigate = useCallback(
+    ({ isCreate }: { isCreate?: boolean }) => {
+      if (isCreate) {
+        navigate(val + '?isCreate=true');
+      } else {
+        navigate(val);
+      }
+    },
+    [navigate, val],
+  );
 
   const options = useMemo(
     () => [
@@ -36,16 +53,14 @@ export function Applications() {
 
   const handleChange = (path: SegmentedValue) => {
     setVal(path as Routes);
+    setListLength(0);
+    setLoading(true);
   };
 
   return (
     <section className="mt-12">
       <div className="flex justify-between items-center mb-5">
         <h2 className="text-2xl font-semibold flex gap-2.5">
-          {/* <IconFont
-            name={IconMap[val as keyof typeof IconMap]}
-            className="size-8"
-          ></IconFont> */}
           <HomeIcon
             name={`${IconMap[val as keyof typeof IconMap]}`}
             width={'32'}
@@ -63,11 +78,36 @@ export function Applications() {
       </div>
       {/* <div className="flex flex-wrap gap-4"> */}
       <CardSineLineContainer>
-        {val === Routes.Agents && <Agents></Agents>}
-        {val === Routes.Chats && <ChatList></ChatList>}
-        {val === Routes.Searches && <SearchList></SearchList>}
-        {<SeeAllAppCard click={handleNavigate}></SeeAllAppCard>}
+        {val === Routes.Agents && (
+          <Agents
+            setListLength={(length: number) => setListLength(length)}
+            setLoading={(loading: boolean) => setLoading(loading)}
+          ></Agents>
+        )}
+        {val === Routes.Chats && (
+          <ChatList
+            setListLength={(length: number) => setListLength(length)}
+            setLoading={(loading: boolean) => setLoading(loading)}
+          ></ChatList>
+        )}
+        {val === Routes.Searches && (
+          <SearchList
+            setListLength={(length: number) => setListLength(length)}
+            setLoading={(loading: boolean) => setLoading(loading)}
+          ></SearchList>
+        )}
+        {listLength > 0 && (
+          <SeeAllAppCard
+            click={() => handleNavigate({ isCreate: false })}
+          ></SeeAllAppCard>
+        )}
       </CardSineLineContainer>
+      {listLength <= 0 && !loading && (
+        <EmptyAppCard
+          type={EmptyTypeMap[val as keyof typeof EmptyTypeMap]}
+          onClick={() => handleNavigate({ isCreate: true })}
+        />
+      )}
       {/* </div> */}
     </section>
   );

web/src/pages/home/chat-list.tsx

@@ -3,13 +3,20 @@ import { MoreButton } from '@/components/more-button';
 import { RenameDialog } from '@/components/rename-dialog';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchDialogList } from '@/hooks/use-chat-request';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChatDropdown } from '../next-chats/chat-dropdown';
 import { useRenameChat } from '../next-chats/hooks/use-rename-chat';
 
-export function ChatList() {
+export function ChatList({
+  setListLength,
+  setLoading,
+}: {
+  setListLength: (length: number) => void;
+  setLoading?: (loading: boolean) => void;
+}) {
   const { t } = useTranslation();
-  const { data } = useFetchDialogList();
+  const { data, loading } = useFetchDialogList();
   const { navigateToChat } = useNavigatePage();
 
   const {
@@ -20,7 +27,10 @@ export function ChatList() {
     onChatRenameOk,
     chatRenameLoading,
   } = useRenameChat();
-
+  useEffect(() => {
+    setListLength(data?.dialogs?.length || 0);
+    setLoading?.(loading || false);
+  }, [data, setListLength, loading, setLoading]);
   return (
     <>
       {data.dialogs.slice(0, 10).map((x) => (

web/src/pages/home/datasets.tsx

@@ -1,4 +1,6 @@
 import { CardSineLineContainer } from '@/components/card-singleline-container';
+import { EmptyCardType } from '@/components/empty/constant';
+import { EmptyAppCard } from '@/components/empty/empty';
 import { RenameDialog } from '@/components/rename-dialog';
 import { HomeIcon } from '@/components/svg-icon';
 import { CardSkeleton } from '@/components/ui/skeleton';
@@ -35,18 +37,32 @@ export function Datasets() {
             <CardSkeleton />
           </div>
         ) : (
-          <CardSineLineContainer>
-            {kbs
-              ?.slice(0, 6)
-              .map((dataset) => (
-                <DatasetCard
-                  key={dataset.id}
-                  dataset={dataset}
-                  showDatasetRenameModal={showDatasetRenameModal}
-                ></DatasetCard>
-              ))}
-            {<SeeAllAppCard click={navigateToDatasetList}></SeeAllAppCard>}
-          </CardSineLineContainer>
+          <>
+            {kbs?.length > 0 && (
+              <CardSineLineContainer>
+                {kbs
+                  ?.slice(0, 6)
+                  .map((dataset) => (
+                    <DatasetCard
+                      key={dataset.id}
+                      dataset={dataset}
+                      showDatasetRenameModal={showDatasetRenameModal}
+                    ></DatasetCard>
+                  ))}
+                {
+                  <SeeAllAppCard
+                    click={() => navigateToDatasetList({ isCreate: false })}
+                  ></SeeAllAppCard>
+                }
+              </CardSineLineContainer>
+            )}
+            {kbs?.length <= 0 && (
+              <EmptyAppCard
+                type={EmptyCardType.Dataset}
+                onClick={() => navigateToDatasetList({ isCreate: true })}
+              />
+            )}
+          </>
           // </div>
         )}
       </div>

web/src/pages/home/search-list.tsx

@@ -3,11 +3,18 @@ import { IconFont } from '@/components/icon-font';
 import { MoreButton } from '@/components/more-button';
 import { RenameDialog } from '@/components/rename-dialog';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
+import { useEffect } from 'react';
 import { useFetchSearchList, useRenameSearch } from '../next-searches/hooks';
 import { SearchDropdown } from '../next-searches/search-dropdown';
 
-export function SearchList() {
-  const { data, refetch: refetchList } = useFetchSearchList();
+export function SearchList({
+  setListLength,
+  setLoading,
+}: {
+  setListLength: (length: number) => void;
+  setLoading?: (loading: boolean) => void;
+}) {
+  const { data, refetch: refetchList, isLoading } = useFetchSearchList();
   const { navigateToSearch } = useNavigatePage();
   const {
     openCreateModal,
@@ -22,6 +29,11 @@ export function SearchList() {
       refetchList();
     });
   };
+
+  useEffect(() => {
+    setListLength(data?.data?.search_apps?.length || 0);
+    setLoading?.(isLoading || false);
+  }, [data, setListLength, isLoading, setLoading]);
   return (
     <>
       {data?.data.search_apps.slice(0, 10).map((x) => (