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}

web/src/locales/en.ts

@@ -1442,6 +1442,7 @@ This delimiter is used to split the input text into several text pieces echo of
       showQueryMindmap: 'Show Query Mindmap',
       embedApp: 'Embed App',
       relatedSearch: 'Related Search',
+      descriptionValue: 'You are an intelligent assistant.',
       okText: 'Save',
       cancelText: 'Cancel',
     },

web/src/locales/zh.ts

@@ -1345,6 +1345,7 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       showQueryMindmap: '显示查询思维导图',
       embedApp: '嵌入网站',
       relatedSearch: '相关搜索',
+      descriptionValue: '你是一位智能助手。',
       okText: '保存',
       cancelText: '返回',
     },

web/src/pages/dataset/dataset/parsing-status-cell.tsx

@@ -27,7 +27,7 @@ const IconMap = {
   [RunningStatus.UNSTART]: (
     <div className="w-0 h-0 border-l-[10px] border-l-accent-primary border-t-8 border-r-4 border-b-8 border-transparent"></div>
   ),
-  [RunningStatus.RUNNING]: <CircleX size={14} />,
+  [RunningStatus.RUNNING]: <CircleX size={14} color="var(--state-error)" />,
   [RunningStatus.CANCEL]: <RefreshCw size={14} color="var(--accent-primary)" />,
   [RunningStatus.DONE]: <RefreshCw size={14} color="var(--accent-primary)" />,
   [RunningStatus.FAIL]: <RefreshCw size={14} color="var(--accent-primary)" />,

web/src/pages/dataset/dataset/use-dataset-table-columns.tsx

@@ -65,7 +65,8 @@ export function useDatasetTableColumns({
       header: ({ column }) => {
         return (
           <Button
-            variant="ghost"
+            variant="transparent"
+            className="border-none"
             onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
           >
             {t('name')}
@@ -103,7 +104,8 @@ export function useDatasetTableColumns({
       header: ({ column }) => {
         return (
           <Button
-            variant="ghost"
+            variant="transparent"
+            className="border-none"
             onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
           >
             {t('uploadDate')}

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

@@ -27,7 +27,7 @@ export default function SearchPage({
       <div className="relative z-10 px-8 pt-8 flex  text-transparent flex-col justify-center items-center w-[780px]">
         <h1
           className={cn(
-            'text-4xl font-bold bg-gradient-to-r from-sky-600 from-30% via-sky-500 via-60% to-emerald-500 bg-clip-text',
+            'text-4xl font-bold bg-gradient-to-l from-[#40EBE3] to-[#4A51FF] bg-clip-text',
           )}
         >
           RAGFlow

web/src/pages/next-search/search-setting-aisummery-config.tsx

@@ -113,7 +113,7 @@ export function LlmSettingFieldItems({
             <FormControl>
               <SelectWithSearch
                 options={options || modelOptions}
-                triggerClassName="bg-bg-card"
+                triggerClassName="!bg-bg-input"
                 {...field}
               ></SelectWithSearch>
             </FormControl>

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

@@ -114,8 +114,8 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
   const [avatarBase64Str, setAvatarBase64Str] = useState(''); // Avatar Image base64
   const [datasetList, setDatasetList] = useState<MultiSelectOptionType[]>([]);
   const [datasetSelectEmbdId, setDatasetSelectEmbdId] = useState('');
-  const descriptionDefaultValue = 'You are an intelligent assistant.';
   const { t } = useTranslation();
+  const descriptionDefaultValue = t('search.descriptionValue');
   const resetForm = useCallback(() => {
     formMethods.reset({
       search_id: data?.id,
@@ -415,7 +415,7 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
                   <FormLabel>{t('search.description')}</FormLabel>
                   <FormControl>
                     <Textarea
-                      placeholder="You are an intelligent assistant."
+                      placeholder={descriptionDefaultValue}
                       {...field}
                       onFocus={() => {
                         if (field.value === descriptionDefaultValue) {
@@ -444,7 +444,7 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
                     <span className="text-destructive mr-1"> *</span>
                     {t('search.datasets')}
                   </FormLabel>
-                  <FormControl>
+                  <FormControl className="bg-bg-input">
                     <MultiSelect
                       options={datasetList}
                       onValueChange={(value) => {
@@ -452,7 +452,6 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
                       }}
                       showSelectAll={false}
                       placeholder={t('chat.knowledgeBasesMessage')}
-                      variant="inverted"
                       maxCount={10}
                       defaultValue={field.value}
                       {...field}
@@ -568,6 +567,7 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
                         <RAGFlowSelect
                           {...field}
                           options={rerankModelOptions}
+                          triggerClassName={'bg-bg-input'}
                           // disabled={disabled}
                           placeholder={'model'}
                         />

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

@@ -83,7 +83,7 @@ export default function SearchingView({
       >
         <h1
           className={cn(
-            'text-4xl font-bold bg-gradient-to-r from-sky-600 from-30% via-sky-500 via-60% to-emerald-500 bg-clip-text cursor-pointer',
+            'text-4xl font-bold bg-gradient-to-l from-[#40EBE3] to-[#4A51FF] bg-clip-text cursor-pointer',
           )}
           onClick={() => {
             setIsSearching?.(false);