Fixes (web): Optimized search page style and functionality #3221 (#9627)

### What problem does this PR solve?

Fixes (web): Optimized search page style and functionality #3221

- Updated search page and view title styles
- Modified dataset list and multi-select control styles
- Optimized text field and button styles
- Updated filter button icons
- Adjusted metadata filter styles
- Added default descriptions for the smart assistant

### Type of change

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

web/src/components/list-filter-bar/index.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@/lib/utils';
-import { ChevronDown } from 'lucide-react';
+import { Funnel } from 'lucide-react';
 import React, {
   ChangeEventHandler,
   PropsWithChildren,
@@ -25,20 +25,20 @@ export const FilterButton = React.forwardRef<
 >(({ count = 0, ...props }, ref) => {
   return (
     <Button variant="secondary" {...props} ref={ref}>
-      <span
+      {/* <span
         className={cn({
           'text-text-primary': count > 0,
           'text-text-sub-title-invert': count === 0,
         })}
       >
         Filter
-      </span>
+      </span> */}
       {count > 0 && (
         <span className="rounded-full bg-text-badge px-1 text-xs ">
           {count}
         </span>
       )}
-      <ChevronDown />
+      <Funnel />
     </Button>
   );
 });

web/src/components/metadata-filter/index.tsx

@@ -58,7 +58,10 @@ export function MetadataFilter({ prefix = '' }: MetadataFilterProps) {
           name={methodName}
           tooltip={t('metadataTip')}
         >
-          <SelectWithSearch options={MetadataOptions} />
+          <SelectWithSearch
+            options={MetadataOptions}
+            triggerClassName="!bg-bg-input"
+          />
         </RAGFlowFormItem>
       )}
       {hasKnowledge && metadata === DatasetMetadata.Manual && (

web/src/components/ui/button.tsx

@@ -17,7 +17,7 @@ const buttonVariants = cva(
         outline:
           'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         secondary:
-          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+          'bg-bg-input text-secondary-foreground shadow-xs hover:bg-bg-input/80',
         ghost:
           'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
         link: 'text-primary underline-offset-4 hover:underline',

web/src/components/ui/textarea.tsx

@@ -54,7 +54,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full bg-bg-card rounded-md border border-input px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm overflow-hidden',
+          'flex min-h-[80px] w-full bg-bg-input rounded-md border border-input px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm overflow-hidden',
           className,
         )}
         rows={autoSize?.minRows ?? props.rows ?? undefined}