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-search/retrieval-documents/index.tsx

@@ -17,26 +17,39 @@ import {
 import { Separator } from '@/components/ui/separator';
 import {
   useAllTestingResult,
+  useChunkIsTesting,
   useSelectTestingResult,
 } from '@/hooks/knowledge-hooks';
 import { cn } from '@/lib/utils';
 import { CheckIcon, ChevronDown, Files, XIcon } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 interface IProps {
   onTesting(documentIds: string[]): void;
   setSelectedDocumentIds(documentIds: string[]): void;
   selectedDocumentIds: string[];
+  setLoading?: (loading: boolean) => void;
 }
 
 const RetrievalDocuments = ({
   onTesting,
   selectedDocumentIds,
   setSelectedDocumentIds,
+  setLoading,
 }: IProps) => {
   const { documents: documentsAll } = useAllTestingResult();
   const { documents } = useSelectTestingResult();
+  const isTesting = useChunkIsTesting();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  useEffect(() => {
+    if (isTesting) {
+      setLoading?.(true);
+    } else {
+      setLoading?.(false);
+    }
+  }, [isTesting, setLoading]);
+
   const { documents: useDocuments } = {
     documents:
       documentsAll?.length > documents?.length ? documentsAll : documents,
@@ -45,6 +58,9 @@ const RetrievalDocuments = ({
     useState<string[]>(selectedDocumentIds);
 
   const multiOptions = useMemo(() => {
+    if (!useDocuments || !useDocuments.length) {
+      return [];
+    }
     return useDocuments?.map((item) => {
       return {
         label: item.doc_name,
@@ -97,36 +113,38 @@ const RetrievalDocuments = ({
   return (
     <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
       <PopoverTrigger asChild>
-        <Button
-          onClick={handleTogglePopover}
-          className={cn(
-            'flex w-full p-1 rounded-md text-base text-text-primary border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit [&_svg]:pointer-events-auto',
-          )}
-        >
-          <div className="flex justify-between items-center w-full">
-            <div className="flex flex-wrap items-center gap-2">
-              <Files />
-              <span>
-                {selectedDocumentIds?.length ?? 0}/{useDocuments?.length ?? 0}
-              </span>
-              Files
+        {useDocuments?.length && (
+          <Button
+            onClick={handleTogglePopover}
+            className={cn(
+              'flex w-full p-1 rounded-md text-base text-text-primary border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit [&_svg]:pointer-events-auto',
+            )}
+          >
+            <div className="flex justify-between items-center w-full">
+              <div className="flex flex-wrap items-center gap-2">
+                <Files />
+                <span>
+                  {selectedDocumentIds?.length ?? 0}/{useDocuments?.length ?? 0}
+                </span>
+                Files
+              </div>
+              <div className="flex items-center justify-between">
+                <XIcon
+                  className="h-4 mx-2 cursor-pointer text-muted-foreground"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    handleClear();
+                  }}
+                />
+                <Separator
+                  orientation="vertical"
+                  className="flex min-h-6 h-full"
+                />
+                <ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground" />
+              </div>
             </div>
-            <div className="flex items-center justify-between">
-              <XIcon
-                className="h-4 mx-2 cursor-pointer text-muted-foreground"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  handleClear();
-                }}
-              />
-              <Separator
-                orientation="vertical"
-                className="flex min-h-6 h-full"
-              />
-              <ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground" />
-            </div>
-          </div>
-        </Button>
+          </Button>
+        )}
       </PopoverTrigger>
       <PopoverContent
         className="w-auto p-0"

web/src/pages/next-search/search-view.tsx

@@ -1,3 +1,5 @@
+import { EmptyType } from '@/components/empty/constant';
+import Empty from '@/components/empty/empty';
 import { FileIcon } from '@/components/icon-font';
 import { ImageWithPopover } from '@/components/image';
 import { Input } from '@/components/originui/input';
@@ -65,6 +67,7 @@ export default function SearchingView({
   //   changeLanguage();
   // }, [i18n]);
   const [searchtext, setSearchtext] = useState<string>('');
+  const [retrievalLoading, setRetrievalLoading] = useState(false);
 
   useEffect(() => {
     setSearchtext(searchStr);
@@ -182,6 +185,9 @@ export default function SearchingView({
                     selectedDocumentIds={selectedDocumentIds}
                     setSelectedDocumentIds={setSelectedDocumentIds}
                     onTesting={handleTestChunk}
+                    setLoading={(loading: boolean) => {
+                      setRetrievalLoading(loading);
+                    }}
                   ></RetrievalDocuments>
                 </div>
                 {/* <div className="w-full border-b border-border-default/80 my-6"></div> */}
@@ -264,6 +270,17 @@ export default function SearchingView({
                   </>
                 )}
             </div>
+            {!isSearchStrEmpty &&
+              !retrievalLoading &&
+              !answer.answer &&
+              !sendingLoading &&
+              total <= 0 &&
+              chunks?.length <= 0 &&
+              relatedQuestions?.length <= 0 && (
+                <div className="h-2/5 flex items-center justify-center">
+                  <Empty type={EmptyType.SearchData} iconWidth={80} />
+                </div>
+              )}
           </div>
 
           {total > 0 && (