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/next-chats/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';
@@ -6,8 +8,9 @@ import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import { useFetchDialogList } from '@/hooks/use-chat-request';
 import { pick } from 'lodash';
 import { Plus } from 'lucide-react';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'umi';
 import { ChatCard } from './chat-card';
 import { useRenameChat } from './hooks/use-rename-chat';
 
@@ -35,41 +38,66 @@ export default function ChatList() {
     showChatRenameModal();
   }, [showChatRenameModal]);
 
+  const [searchParams, setSearchParams] = useSearchParams();
+  const isCreate = searchParams.get('isCreate') === 'true';
+  useEffect(() => {
+    if (isCreate) {
+      handleShowCreateModal();
+      searchParams.delete('isCreate');
+      setSearchParams(searchParams);
+    }
+  }, [isCreate, handleShowCreateModal, searchParams, setSearchParams]);
+
   return (
     <section className="flex flex-col w-full flex-1">
-      <div className="px-8 pt-8">
-        <ListFilterBar
-          title={t('chat.chatApps')}
-          icon="chats"
-          onSearchChange={handleInputChange}
-          searchString={searchString}
-        >
-          <Button onClick={handleShowCreateModal}>
-            <Plus className="size-2.5" />
-            {t('chat.createChat')}
-          </Button>
-        </ListFilterBar>
-      </div>
-      <div className="flex-1 overflow-auto">
-        <CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
-          {data.dialogs.map((x) => {
-            return (
-              <ChatCard
-                key={x.id}
-                data={x}
-                showChatRenameModal={showChatRenameModal}
-              ></ChatCard>
-            );
-          })}
-        </CardContainer>
-      </div>
-      <div className="mt-8 px-8 pb-8">
-        <RAGFlowPagination
-          {...pick(pagination, 'current', 'pageSize')}
-          total={pagination.total}
-          onChange={handlePageChange}
-        ></RAGFlowPagination>
-      </div>
+      {data.dialogs?.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.Chat}
+            onClick={() => handleShowCreateModal()}
+          />
+        </div>
+      )}
+      {data.dialogs?.length > 0 && (
+        <>
+          <div className="px-8 pt-8">
+            <ListFilterBar
+              title={t('chat.chatApps')}
+              icon="chats"
+              onSearchChange={handleInputChange}
+              searchString={searchString}
+            >
+              <Button onClick={handleShowCreateModal}>
+                <Plus className="size-2.5" />
+                {t('chat.createChat')}
+              </Button>
+            </ListFilterBar>
+          </div>
+          <div className="flex-1 overflow-auto">
+            <CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
+              {data.dialogs.map((x) => {
+                return (
+                  <ChatCard
+                    key={x.id}
+                    data={x}
+                    showChatRenameModal={showChatRenameModal}
+                  ></ChatCard>
+                );
+              })}
+            </CardContainer>
+          </div>
+          <div className="mt-8 px-8 pb-8">
+            <RAGFlowPagination
+              {...pick(pagination, 'current', 'pageSize')}
+              total={pagination.total}
+              onChange={handlePageChange}
+            ></RAGFlowPagination>
+          </div>
+        </>
+      )}
       {chatRenameVisible && (
         <RenameDialog
           hideModal={hideChatRenameModal}