fix: fix dataset-page's bugs (#8786)

### What problem does this PR solve?

fix dataset-page's bugs,Input component supports icon, added Radio
component, and removed antd from chunk-result-bar page [#3221
](https://github.com/infiniflow/ragflow/issues/3221)

### Type of change

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

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/index.tsx

@@ -1,18 +1,26 @@
-import { ReactComponent as FilterIcon } from '@/assets/filter.svg';
-import { useTranslate } from '@/hooks/common-hooks';
-import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
+import { Input } from '@/components/originui/input';
+import { Button } from '@/components/ui/button';
 import {
-  Button,
-  Input,
   Popover,
-  Radio,
-  RadioChangeEvent,
-  Segmented,
-  SegmentedProps,
-  Space,
-} from 'antd';
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Radio } from '@/components/ui/radio';
+import { useTranslate } from '@/hooks/common-hooks';
+import { cn } from '@/lib/utils';
+import { SearchOutlined } from '@ant-design/icons';
+import { ListFilter, Plus } from 'lucide-react';
+import { useState } from 'react';
 import { ChunkTextMode } from '../../constant';
-
+interface ChunkResultBarProps {
+  changeChunkTextMode: React.Dispatch<React.SetStateAction<string | number>>;
+  available: number | undefined;
+  selectAllChunk: (value: boolean) => void;
+  handleSetAvailable: (value: number | undefined) => void;
+  createChunk: () => void;
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  searchString: string;
+}
 export default ({
   changeChunkTextMode,
   available,
@@ -21,52 +29,75 @@ export default ({
   createChunk,
   handleInputChange,
   searchString,
-}) => {
+}: ChunkResultBarProps) => {
   const { t } = useTranslate('chunk');
-
-  const handleFilterChange = (e: RadioChangeEvent) => {
+  const [textSelectValue, setTextSelectValue] = useState<string | number>(
+    ChunkTextMode.Full,
+  );
+  const handleFilterChange = (e: string | number) => {
+    const value = e === -1 ? undefined : (e as number);
     selectAllChunk(false);
-    handleSetAvailable(e.target.value);
+    handleSetAvailable(value);
   };
   const filterContent = (
-    <Radio.Group onChange={handleFilterChange} value={available}>
-      <Space direction="vertical">
-        <Radio value={undefined}>{t('all')}</Radio>
-        <Radio value={1}>{t('enabled')}</Radio>
-        <Radio value={0}>{t('disabled')}</Radio>
-      </Space>
-    </Radio.Group>
+    <div className="w-[200px]">
+      <Radio.Group onChange={handleFilterChange} value={available}>
+        <div className="flex flex-col gap-2 p-4">
+          <Radio value={-1}>{t('all')}</Radio>
+          <Radio value={1}>{t('enabled')}</Radio>
+          <Radio value={0}>{t('disabled')}</Radio>
+        </div>
+      </Radio.Group>
+    </div>
   );
+  const textSelectOptions = [
+    { label: t(ChunkTextMode.Full), value: ChunkTextMode.Full },
+    { label: t(ChunkTextMode.Ellipse), value: ChunkTextMode.Ellipse },
+  ];
 
+  const changeTextSelectValue = (value: string | number) => {
+    setTextSelectValue(value);
+    changeChunkTextMode(value);
+  };
   return (
     <div className="flex pr-[25px]">
-      <Segmented
-        options={[
-          { label: t(ChunkTextMode.Full), value: ChunkTextMode.Full },
-          { label: t(ChunkTextMode.Ellipse), value: ChunkTextMode.Ellipse },
-        ]}
-        onChange={changeChunkTextMode as SegmentedProps['onChange']}
-      />
+      <div className="flex items-center gap-4 bg-card text-muted-foreground w-fit h-[35px] rounded-md px-4 py-2 text-base">
+        {textSelectOptions.map((option) => (
+          <div
+            key={option.value}
+            className={cn('flex items-center cursor-pointer', {
+              'text-white': option.value === textSelectValue,
+            })}
+            onClick={() => changeTextSelectValue(option.value)}
+          >
+            {option.label}
+          </div>
+        ))}
+      </div>
       <div className="ml-auto"></div>
       <Input
+        className="bg-card text-muted-foreground"
         style={{ width: 200 }}
-        size="middle"
         placeholder={t('search')}
-        prefix={<SearchOutlined />}
-        allowClear
+        icon={<SearchOutlined />}
         onChange={handleInputChange}
         value={searchString}
       />
       <div className="w-[20px]"></div>
-      <Popover content={filterContent} placement="bottom" arrow={false}>
-        <Button icon={<FilterIcon />} />
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button className="bg-card text-muted-foreground hover:bg-card">
+            <ListFilter />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="p-0 w-[200px]">
+          {filterContent}
+        </PopoverContent>
       </Popover>
       <div className="w-[20px]"></div>
-      <Button
-        icon={<PlusOutlined />}
-        type="primary"
-        onClick={() => createChunk()}
-      />
+      <Button onClick={() => createChunk()}>
+        <Plus size={44} />
+      </Button>
     </div>
   );
 };

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx

@@ -20,12 +20,17 @@ import ChunkResultBar from './components/chunk-result-bar';
 import CheckboxSets from './components/chunk-result-bar/checkbox-sets';
 import DocumentHeader from './components/document-preview/document-header';
 
+import { PageHeader } from '@/components/page-header';
 import message from '@/components/ui/message';
 import {
   RAGFlowPagination,
   RAGFlowPaginationType,
 } from '@/components/ui/ragflow-pagination';
 import { Spin } from '@/components/ui/spin';
+import {
+  QueryStringMap,
+  useNavigatePage,
+} from '@/hooks/logic-hooks/navigate-hooks';
 import styles from './index.less';
 
 const Chunk = () => {
@@ -56,7 +61,7 @@ const Chunk = () => {
     chunkUpdatingVisible,
     documentId,
   } = useUpdateChunk();
-
+  const { navigateToDataset, getQueryString } = useNavigatePage();
   useEffect(() => {
     setChunkList(data);
   }, [data]);
@@ -159,6 +164,10 @@ const Chunk = () => {
 
   return (
     <>
+      <PageHeader
+        title="Back"
+        back={navigateToDataset(getQueryString(QueryStringMap.id) as string)}
+      ></PageHeader>
       <div className={styles.chunkPage}>
         <div className="flex flex-1 gap-8">
           <div className="w-2/5">

web/src/pages/dataset/dataset/use-bulk-operate-dataset.tsx

@@ -61,9 +61,7 @@ export function useBulkOperateDataset({
 
   const onChangeStatus = useCallback(
     (enabled: boolean) => {
-      selectedRowKeys.forEach((id) => {
-        setDocumentStatus({ status: enabled, documentId: id });
-      });
+      setDocumentStatus({ status: enabled, documentId: selectedRowKeys });
     },
     [selectedRowKeys, setDocumentStatus],
   );

web/src/pages/dataset/setting/chunk-method-learn-more.tsx

@@ -10,7 +10,7 @@ export default ({
   tab: 'generalForm' | 'chunkMethodForm';
   parserId: string;
 }) => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
 
   return (
     <div

web/src/pages/dataset/setting/configuration/naive.tsx

@@ -23,7 +23,7 @@ export function NaiveConfiguration() {
         <ChunkMethodItem></ChunkMethodItem>
         <LayoutRecognizeFormField></LayoutRecognizeFormField>
         <EmbeddingModelItem></EmbeddingModelItem>
-        <MaxTokenNumberFormField></MaxTokenNumberFormField>
+        <MaxTokenNumberFormField initialValue={512}></MaxTokenNumberFormField>
         <DelimiterFormField></DelimiterFormField>
       </ConfigurationFormContainer>
       <ConfigurationFormContainer>

web/src/pages/dataset/setting/general-form.tsx

@@ -22,7 +22,6 @@ export function GeneralForm() {
   const { t } = useTranslation();
   const [avatarFile, setAvatarFile] = useState<File | null>(null);
   const [avatarBase64Str, setAvatarBase64Str] = useState(''); // Avatar Image base64
-  // const [submitLoading, setSubmitLoading] = useState(false); // submit button loading
 
   const { saveKnowledgeConfiguration, loading: submitLoading } =
     useUpdateKnowledge();
@@ -94,7 +93,7 @@ export function GeneralForm() {
                         <div className="w-[64px] h-[64px] grid place-content-center border border-dashed	rounded-md">
                           <div className="flex flex-col items-center">
                             <Upload />
-                            <p>Upload</p>
+                            <p>{t('common.upload')}</p>
                           </div>
                         </div>
                       ) : (

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

@@ -131,22 +131,9 @@ export default function DatasetSettings() {
                 <ChunkMethodForm></ChunkMethodForm>
               </TabsContent>
             </Tabs>
-            {/* <div className="text-right">
-              <ButtonLoading type="submit">Submit</ButtonLoading>
-            </div> */}
           </form>
         </Form>
         <ChunkMethodLearnMore tab={currentTab} parserId={parserId} />
-        {/* <div
-          style={{
-            display: currentTab === 'chunkMethodForm' ? 'block' : 'none',
-          }}
-        >
-          <Button variant="outline">Learn More</Button>
-          <div className="bg-[#FFF]/10 p-[20px] rounded-[12px] mt-[10px]">
-            <CategoryPanel chunkMethod={parserId}></CategoryPanel>
-          </div>
-        </div> */}
       </div>
     </section>
   );