Fix: Optimized the style and functionality of multiple components #3221 (#9824)

### What problem does this PR solve?

Fix: Optimized the style and functionality of multiple components #3221

- Modified the SkeletonCard component, adding a className attribute and
adjusting the style
- Updated the RAGFlowSelect component, adding a disabled attribute
- Adjusted the style of the Tooltip component
- Optimized the layout of the RetrievalTesting and TestingResult pages
- Updated the style and loading status display of NextSearch-related
pages
- Removed unnecessary logs from the Spotlight component

### Type of change

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

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

@@ -40,11 +40,13 @@ export default function RetrievalTesting() {
                 <Plus /> Add New Test
               </Button> */}
             </div>
-            <TestingForm
-              loading={loading}
-              setValues={setValues}
-              refetch={refetch}
-            ></TestingForm>
+            <div className="h-[calc(100vh-241px)] overflow-auto scrollbar-thin">
+              <TestingForm
+                loading={loading}
+                setValues={setValues}
+                refetch={refetch}
+              ></TestingForm>
+            </div>
           </div>
           <TestingResult
             data={data}

web/src/pages/dataset/testing/testing-result.tsx

@@ -77,7 +77,7 @@ export function TestingResult({
           <FilterButton></FilterButton>
         </FilterPopover>
       </div>
-      <section className="flex flex-col gap-5 overflow-auto h-[76vh] mb-5">
+      <section className="flex flex-col gap-5 overflow-auto h-[calc(100vh-241px)] scrollbar-thin mb-5">
         {data.chunks?.map((x) => (
           <FormContainer key={x.chunk_id} className="px-5 py-2.5">
             <ChunkTitle item={x}></ChunkTitle>

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

@@ -1,6 +1,7 @@
 import { FileIcon } from '@/components/icon-font';
 import { ImageWithPopover } from '@/components/image';
 import { Input } from '@/components/originui/input';
+import { SkeletonCard } from '@/components/skeleton-card';
 import { Button } from '@/components/ui/button';
 import {
   Popover,
@@ -8,7 +9,6 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
-import { Skeleton } from '@/components/ui/skeleton';
 import { IReference } from '@/interfaces/database/chat';
 import { cn } from '@/lib/utils';
 import DOMPurify from 'dompurify';
@@ -157,11 +157,7 @@ export default function SearchingView({
                   {t('search.AISummary')}
                 </div>
                 {isEmpty(answer) && sendingLoading ? (
-                  <div className="space-y-2 mt-2">
-                    <Skeleton className="h-4 w-full bg-bg-card" />
-                    <Skeleton className="h-4 w-full bg-bg-card" />
-                    <Skeleton className="h-4 w-2/3 bg-bg-card" />
-                  </div>
+                  <SkeletonCard className=" mt-2" />
                 ) : (
                   answer.answer && (
                     <div className="border rounded-lg p-4 mt-3 max-h-52 overflow-auto scrollbar-none">
@@ -195,12 +191,9 @@ export default function SearchingView({
                 <>
                   {chunks.map((chunk, index) => {
                     return (
-                      <>
-                        <div
-                          key={chunk.chunk_id}
-                          className="w-full flex flex-col"
-                        >
-                          <div className="w-full">
+                      <div key={index}>
+                        <div className="w-full flex flex-col">
+                          <div className="w-full highlightContent">
                             <ImageWithPopover
                               id={chunk.img_id}
                             ></ImageWithPopover>
@@ -215,10 +208,12 @@ export default function SearchingView({
                                   className="text-sm text-text-primary mb-1"
                                 ></div>
                               </PopoverTrigger>
-                              <PopoverContent className="text-text-primary">
-                                <HightLightMarkdown>
-                                  {chunk.content_with_weight}
-                                </HightLightMarkdown>
+                              <PopoverContent className="text-text-primary !w-full max-w-lg ">
+                                <div className="max-h-96 overflow-auto scrollbar-thin">
+                                  <HightLightMarkdown>
+                                    {chunk.content_with_weight}
+                                  </HightLightMarkdown>
+                                </div>
                               </PopoverContent>
                             </Popover>
                           </div>
@@ -235,7 +230,7 @@ export default function SearchingView({
                         {index < chunks.length - 1 && (
                           <div className="w-full border-b border-border-default/80 mt-6"></div>
                         )}
-                      </>
+                      </div>
                     );
                   })}
                 </>

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

@@ -7,7 +7,6 @@ interface SpotlightProps {
 
 const Spotlight: React.FC<SpotlightProps> = ({ className }) => {
   const isDark = useIsDarkTheme();
-  console.log('isDark', isDark);
   return (
     <div
       className={`absolute inset-0  opacity-80 ${className} rounded-lg`}