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/components/skeleton-card.tsx

@@ -1,13 +1,16 @@
 import { Skeleton } from '@/components/ui/skeleton';
+import { cn } from '@/lib/utils';
 
-export function SkeletonCard() {
+type SkeletonCardProps = {
+  className?: string;
+};
+export function SkeletonCard(props: SkeletonCardProps) {
+  const { className } = props;
   return (
-    <div className="flex flex-col space-y-3 items-center">
+    <div className={cn('space-y-2', className)}>
-      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+      <Skeleton className="h-4 w-full bg-bg-card" />
-      <div className="space-y-2 w-[250px]">
+      <Skeleton className="h-4 w-full bg-bg-card" />
-        <Skeleton className="h-4 w-[250px]" />
+      <Skeleton className="h-4 w-2/3 bg-bg-card" />
-        <Skeleton className="h-4 w-[200px]" />
-      </div>
     </div>
   );
 }

web/src/components/ui/select.tsx

@@ -224,6 +224,7 @@ export const RAGFlowSelect = forwardRef<
     allowClear,
     placeholder,
     contentProps = {},
+    disabled = false,
     // defaultValue,
     triggerClassName,
     onlyShowSelectedIcon = false,
@@ -278,7 +279,12 @@ export const RAGFlowSelect = forwardRef<
   }, [onlyShowSelectedIcon, options, value]);
 
   return (
-    <Select onValueChange={handleChange} value={value} key={key}>
+    <Select
+      onValueChange={handleChange}
+      value={value}
+      key={key}
+      disabled={disabled}
+    >
       <FormControlWidget>
         <SelectTrigger
           value={value}

web/src/components/ui/tooltip.tsx

@@ -107,7 +107,7 @@ export const AntToolTip: React.FC<AntToolTipProps> = ({
       {visible && title && (
         <div
           className={cn(
-            'absolute z-50 px-2.5 py-1.5 text-xs text-white bg-gray-800 rounded-sm shadow-sm whitespace-nowrap',
+            'absolute z-50 px-2.5 py-2 text-xs text-text-primary bg-muted rounded-sm shadow-sm whitespace-wrap',
             getPlacementClasses(),
             className,
           )}
@@ -115,7 +115,7 @@ export const AntToolTip: React.FC<AntToolTipProps> = ({
           {title}
           <div
             className={cn(
-              'absolute w-2 h-2 bg-gray-800',
+              'absolute w-2 h-2  bg-muted ',
               placement === 'top' &&
                 'bottom-[-4px] left-1/2 transform -translate-x-1/2 rotate-45',
               placement === 'bottom' &&

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

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

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">
+                  <SkeletonCard className=" 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>
                 ) : (
                   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={index}>
-                        <div
+                        <div className="w-full flex flex-col">
-                          key={chunk.chunk_id}
+                          <div className="w-full highlightContent">
-                          className="w-full flex flex-col"
-                        >
-                          <div className="w-full">
                             <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">
+                              <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`}