Fix: Restore the sidebar description of DP slicing method #9869 (#10633)

### What problem does this PR solve?

Fix: Restore the sidebar description of DP slicing method #9869

### Type of change

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

web/src/pages/dataset/dataset-setting/category-panel.tsx

@@ -0,0 +1,72 @@
+import SvgIcon from '@/components/svg-icon';
+import { useTranslate } from '@/hooks/common-hooks';
+import { useSelectParserList } from '@/hooks/user-setting-hooks';
+import { Col, Divider, Empty, Row, Typography } from 'antd';
+import DOMPurify from 'dompurify';
+import camelCase from 'lodash/camelCase';
+import { useMemo } from 'react';
+import { TagTabs } from './tag-tabs';
+import { ImageMap } from './utils';
+
+const { Text } = Typography;
+
+const CategoryPanel = ({ chunkMethod }: { chunkMethod: string }) => {
+  const parserList = useSelectParserList();
+  const { t } = useTranslate('knowledgeConfiguration');
+
+  const item = useMemo(() => {
+    const item = parserList.find((x) => x.value === chunkMethod);
+    if (item) {
+      return {
+        title: item.label,
+        description: t(camelCase(item.value)),
+      };
+    }
+    return { title: '', description: '' };
+  }, [parserList, chunkMethod, t]);
+
+  const imageList = useMemo(() => {
+    if (chunkMethod in ImageMap) {
+      return ImageMap[chunkMethod as keyof typeof ImageMap];
+    }
+    return [];
+  }, [chunkMethod]);
+
+  return (
+    <section>
+      {imageList.length > 0 ? (
+        <>
+          <h5 className="font-semibold text-base mt-0 mb-1">
+            {`"${item.title}" ${t('methodTitle')}`}
+          </h5>
+          <p
+            dangerouslySetInnerHTML={{
+              __html: DOMPurify.sanitize(item.description),
+            }}
+          ></p>
+          <h5 className="font-semibold text-base mt-4 mb-1">{`"${item.title}" ${t('methodExamples')}`}</h5>
+          <Text>{t('methodExamplesDescription')}</Text>
+          <Row gutter={[10, 10]} className="mt-4">
+            {imageList.map((x) => (
+              <Col span={12} key={x}>
+                <SvgIcon name={x} width={'100%'} className="w-full"></SvgIcon>
+              </Col>
+            ))}
+          </Row>
+          <h5 className="font-semibold text-base mt-4 mb-1">
+            {item.title} {t('dialogueExamplesTitle')}
+          </h5>
+          <Divider></Divider>
+        </>
+      ) : (
+        <Empty description={''} image={null}>
+          <p>{t('methodEmpty')}</p>
+          <SvgIcon name={'chunk-method/chunk-empty'} width={'100%'}></SvgIcon>
+        </Empty>
+      )}
+      {chunkMethod === 'tag' && <TagTabs></TagTabs>}
+    </section>
+  );
+};
+
+export default CategoryPanel;