Fix: Optimized knowledge base file parsing and display #9869 (#10292)

### What problem does this PR solve?

Fix: Optimized knowledge base file parsing and display #9869

- Optimized the ChunkMethodDialog component logic and adjusted
FormSchema validation rules
- Updated the document information interface definition, adding
pipeline_id, pipeline_name, and suffix fields
- Refactored the ChunkResultBar component, removing filter-related logic
and simplifying the input box and chunk creation functionality
- Improved FormatPreserveEditor to support text mode switching
(full/omitted) display control
- Updated timeline node titles to more accurate semantic descriptions
(e.g., character splitters)
- Optimized the data flow result page structure and style, dynamically
adjusting height and content display
- Fixed the table sorting function on the dataset overview page and
enhanced the display of task type icons and status mapping.

### Type of change

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

web/src/pages/dataflow-result/parser.tsx

@@ -1,14 +1,16 @@
 import { TimelineNode } from '@/components/originui/timeline';
 import Spotlight from '@/components/spotlight';
 import { Spin } from '@/components/ui/spin';
+import { cn } from '@/lib/utils';
 import classNames from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import ChunkResultBar from './components/chunk-result-bar';
 import CheckboxSets from './components/chunk-result-bar/checkbox-sets';
 import FormatPreserEditor from './components/parse-editer';
 import RerunButton from './components/rerun-button';
 import { TimelineNodeType } from './constant';
-import { useFetchParserList } from './hooks';
+import { useChangeChunkTextMode, useFetchParserList } from './hooks';
 import { IDslComponent } from './interface';
 interface IProps {
   isChange: boolean;
@@ -23,6 +25,7 @@ const ParserContainer = (props: IProps) => {
   const { t } = useTranslation();
   const { loading } = useFetchParserList();
   const [selectedChunkIds, setSelectedChunkIds] = useState<string[]>([]);
+  const { changeChunkTextMode, textMode } = useChangeChunkTextMode();
   const initialValue = useMemo(() => {
     const outputs = data?.value?.obj?.params?.outputs;
     const key = outputs?.output_format?.value;
@@ -108,6 +111,19 @@ const ParserContainer = (props: IProps) => {
     step?.type === TimelineNodeType.characterSplitter ||
     step?.type === TimelineNodeType.titleSplitter ||
     step?.type === TimelineNodeType.splitter;
+
+  const handleCreateChunk = useCallback(
+    (text: string) => {
+      console.log('handleCreateChunk', text);
+      const newText = [...initialText.value, { text: text || ' ' }];
+      setInitialText({
+        ...initialText,
+        value: newText,
+      });
+      console.log('newText', newText, initialText);
+    },
+    [initialText],
+  );
   return (
     <>
       {isChange && (
@@ -122,28 +138,50 @@ const ParserContainer = (props: IProps) => {
       <div className={classNames('flex flex-col w-full')}>
         <Spin spinning={loading} className="" size="large">
           <div className="h-[50px] flex flex-col justify-end pb-[5px]">
-            <div>
-              <h2 className="text-[16px]">
-                {t('dataflowParser.parseSummary')}
-              </h2>
-              <div className="text-[12px] text-text-secondary italic ">
-                {t('dataflowParser.parseSummaryTip')}
+            {!isChunck && (
+              <div>
+                <h2 className="text-[16px]">
+                  {t('dataflowParser.parseSummary')}
+                </h2>
+                <div className="text-[12px] text-text-secondary italic ">
+                  {t('dataflowParser.parseSummaryTip')}
+                </div>
               </div>
-            </div>
+            )}
+            {isChunck && (
+              <div>
+                <h2 className="text-[16px]">{t('chunk.chunkResult')}</h2>
+                <div className="text-[12px] text-text-secondary italic">
+                  {t('chunk.chunkResultTip')}
+                </div>
+              </div>
+            )}
           </div>
 
           {isChunck && (
-            <div className="pt-[5px] pb-[5px]">
+            <div className="pt-[5px] pb-[5px] flex justify-between items-center">
               <CheckboxSets
                 selectAllChunk={selectAllChunk}
                 removeChunk={handleRemoveChunk}
                 checked={selectedChunkIds.length === initialText.value.length}
                 selectedChunkIds={selectedChunkIds}
               />
+              <ChunkResultBar
+                changeChunkTextMode={changeChunkTextMode}
+                createChunk={handleCreateChunk}
+              />
             </div>
           )}
 
-          <div className=" border rounded-lg p-[20px] box-border h-[calc(100vh-180px)] w-[calc(100%-20px)] overflow-auto scrollbar-none">
+          <div
+            className={cn(
+              ' border rounded-lg p-[20px] box-border w-[calc(100%-20px)] overflow-auto scrollbar-none',
+              {
+                'h-[calc(100vh-240px)]': isChunck,
+                'h-[calc(100vh-180px)]': !isChunck,
+              },
+            )}
+          >
             <FormatPreserEditor
               initialValue={initialText}
               onSave={handleSave}
@@ -151,6 +189,7 @@ const ParserContainer = (props: IProps) => {
                 initialText.key !== 'json' ? '!h-[calc(100vh-220px)]' : ''
               }
               isChunck={isChunck}
+              textMode={textMode}
               isDelete={
                 step?.type === TimelineNodeType.characterSplitter ||
                 step?.type === TimelineNodeType.titleSplitter ||