refactor: enhance document processing UI and functionality with new components and translations

web/app/components/datasets/documents/create-from-pipeline/process-documents/actions.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Button from '@/app/components/base/button'
 import { useTranslation } from 'react-i18next'
+import { RiArrowLeftLine } from '@remixicon/react'
 
 type ActionsProps = {
   onBack: () => void
@@ -18,8 +19,10 @@ const Actions = ({
       <Button
         variant='secondary'
         onClick={onBack}
+        className='gap-x-0.5'
       >
-        {t('datasetPipeline.operations.dataSource')}
+        <RiArrowLeftLine className='size-4' />
+        <span className='px-0.5'>{t('datasetPipeline.operations.dataSource')}</span>
       </Button>
       <Button
         variant='primary'

web/app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Button from '@/app/components/base/button'
 import { useTranslation } from 'react-i18next'
+import { RiSearchEyeLine } from '@remixicon/react'
 
 type HeaderProps = {
   onReset: () => void
@@ -21,10 +22,15 @@ const Header = ({
         {t('datasetPipeline.addDocuments.stepTwo.chunkSettings')}
       </div>
       <Button variant='ghost' disabled={disableReset} onClick={onReset}>
-        {t('common.operations.reset')}
+        {t('common.operation.reset')}
       </Button>
-      <Button variant='primary' onClick={onPreview}>
-        {t('common.operations.reset')}
+      <Button
+        variant='secondary-accent'
+        onClick={onPreview}
+        className='gap-x-0.5'
+      >
+        <RiSearchEyeLine className='size-4' />
+        <span className='px-0.5'>{t('datasetPipeline.addDocuments.stepTwo.previewChunks')}</span>
       </Button>
     </div>
   )

web/app/components/datasets/documents/create-from-pipeline/process-documents/hooks.ts

@@ -1,8 +1,8 @@
 import { useMemo } from 'react'
 import { BaseFieldType } from '@/app/components/base/form/form-scenarios/base/types'
-import { useStore } from '@/app/components/workflow/store'
 import { usePublishedPipelineProcessingParams } from '@/service/use-pipeline'
 import { PipelineInputVarType } from '@/models/pipeline'
+import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 
 type PartialInputVarType = PipelineInputVarType.textInput | PipelineInputVarType.number | PipelineInputVarType.select | PipelineInputVarType.checkbox
 
@@ -14,7 +14,7 @@ const VAR_TYPE_MAP: Record<PartialInputVarType, BaseFieldType> = {
 }
 
 export const useConfigurations = (datasourceNodeId: string) => {
-  const pipelineId = useStore(state => state.pipelineId)
+  const pipelineId = useDatasetDetailContextWithSelector(state => state.dataset?.pipeline_id)
   const { data: paramsConfig } = usePublishedPipelineProcessingParams({
     pipeline_id: pipelineId!,
     node_id: datasourceNodeId,

web/app/components/datasets/documents/create-from-pipeline/process-documents/index.tsx

@@ -8,36 +8,45 @@ import Header from './header'
 type ProcessDocumentsProps = {
   dataSourceNodeId: string
   onProcess: (data: Record<string, any>) => void
+  onPreview: (data: Record<string, any>) => void
   onBack: () => void
 }
 
 const ProcessDocuments = ({
   dataSourceNodeId,
   onProcess,
+  onPreview,
   onBack,
 }: ProcessDocumentsProps) => {
   const formRef = useRef<any>(null)
+  const isPreview = useRef(false)
   const { initialData, configurations } = useConfigurations(dataSourceNodeId)
   const schema = generateZodSchema(configurations)
 
   const handleProcess = useCallback(() => {
+    isPreview.current = false
     formRef.current?.submit()
   }, [])
 
   const handlePreview = useCallback(() => {
+    isPreview.current = true
     formRef.current?.submit()
   }, [])
 
+  const handleSubmit = useCallback((data: Record<string, any>) => {
+    isPreview.current ? onPreview(data) : onProcess(data)
+  }, [onPreview, onProcess])
+
   const handleReset = useCallback(() => {
     formRef.current?.reset()
   }, [])
 
   return (
     <div className='flex flex-col gap-y-4 pt-4'>
-      <div className='flex flex-col rounded-lg border-components-panel-border bg-components-panel-bg'>
+      <div className='flex flex-col rounded-lg border border-components-panel-border bg-components-panel-bg'>
         <Header
           onReset={handleReset}
-          disableReset={formRef.current.isDirty()}
+          disableReset={!formRef.current?.isDirty()}
           onPreview={handlePreview}
         />
         <Options
@@ -45,7 +54,7 @@ const ProcessDocuments = ({
           initialData={initialData}
           configurations={configurations}
           schema={schema}
-          onSubmit={onProcess}
+          onSubmit={handleSubmit}
         />
       </div>
       <Actions onBack={onBack} onProcess={handleProcess} />

web/app/components/datasets/documents/create-from-pipeline/process-documents/options.tsx

@@ -66,7 +66,7 @@ const Options = ({
         form.handleSubmit()
       }}
     >
-      <div className='flex flex-col gap-3 px-4 py-3'>
+      <div className='flex flex-col gap-3 border-t border-divider-subtle px-4 py-3'>
         {configurations.map((config, index) => {
           const FieldComponent = BaseField({
             initialData,