From 07f0140d10eefcd499f30b0ce91ae2df9c38b817 Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Fri, 6 Dec 2024 15:20:14 +0800
Subject: [PATCH] feat: preview parent child chunk in create step 2

---
 .../datasets/create/step-two/index.tsx        | 49 +++++++++++++++----
 .../datasets/create/step-two/option-card.tsx  |  8 ++-
 web/models/datasets.ts                        |  3 +-
 3 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index de35bb1f54..5dd7af33c9 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -20,6 +20,8 @@ import { PreviewContainer } from '../../preview/container'
 import { ChunkContainer, QAPreview } from '../../chunk'
 import { PreviewHeader } from '../../preview/header'
 import DocumentPicker from '../../common/document-picker'
+import { FormattedText } from '../../formatted-text/formatted'
+import { PreviewSlice } from '../../formatted-text/flavours/preview-slice'
 import s from './index.module.css'
 import unescape from './unescape'
 import escape from './escape'
@@ -171,6 +173,11 @@ const StepTwo = ({
   const [docForm, setDocForm] = useState<ChuckingMode>(
     (datasetId && documentDetail) ? documentDetail.doc_form as ChuckingMode : ChuckingMode.text,
   )
+  const handleChangeDocform = (value: ChuckingMode) => {
+    setDocForm(value)
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    currentEstimateMutation.reset()
+  }
 
   const [docLanguage, setDocLanguage] = useState<string>(
     (datasetId && documentDetail) ? documentDetail.doc_language : (locale !== LanguagesSupported[1] ? 'English' : 'Chinese'),
@@ -498,7 +505,8 @@ const StepTwo = ({
   const changeToEconomicalType = () => {
     if (!hasSetIndexType) {
       setIndexType(IndexingType.ECONOMICAL)
-      setDocForm(ChuckingMode.text)
+      if (docForm === ChuckingMode.qa)
+        handleChangeDocform(ChuckingMode.text)
     }
   }
 
@@ -514,11 +522,6 @@ const StepTwo = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  useEffect(() => {
-    if (indexingType === IndexingType.ECONOMICAL && docForm === ChuckingMode.qa)
-      setDocForm(ChuckingMode.text)
-  }, [indexingType, docForm])
-
   useEffect(() => {
     // get indexing type by props
     if (indexingType)
@@ -553,7 +556,7 @@ const StepTwo = ({
                 activeHeaderClassName='bg-gradient-to-r from-[#EFF0F9] to-[#F9FAFB]'
                 description={t('datasetCreation.stepTwo.generalTip')}
                 isActive={docForm === ChuckingMode.qa || docForm === ChuckingMode.text}
-                onClick={() => setDocForm(ChuckingMode.text)}
+                onSelect={() => handleChangeDocform(ChuckingMode.text)}
                 actions={
                   <>
                     <Button variant={'secondary-accent'} onClick={() => updatePreview()}>
@@ -605,9 +608,9 @@ const StepTwo = ({
                         checked={docForm === ChuckingMode.qa}
                         onCheck={() => {
                           if (docForm === ChuckingMode.qa)
-                            setDocForm(ChuckingMode.text)
+                            handleChangeDocform(ChuckingMode.text)
                           else
-                            setDocForm(ChuckingMode.qa)
+                            handleChangeDocform(ChuckingMode.qa)
                         }}
                         className='mr-2'
                       />
@@ -648,7 +651,7 @@ const StepTwo = ({
                 activeHeaderClassName='bg-gradient-to-r from-[#F9F1EE] to-[#F9FAFB]'
                 description={t('datasetCreation.stepTwo.parentChildTip')}
                 isActive={docForm === ChuckingMode.parentChild}
-                onClick={() => setDocForm(ChuckingMode.parentChild)}
+                onSelected={() => handleChangeDocform(ChuckingMode.parentChild)}
                 actions={
                   <>
                     <Button variant={'secondary-accent'} onClick={() => updatePreview()}>
@@ -937,6 +940,32 @@ const StepTwo = ({
               </ChunkContainer>
             ))
           )}
+          {docForm === ChuckingMode.parentChild && currentEstimateMutation.data?.preview && (
+            estimate?.preview?.map((item, index) => {
+              const indexForLabel = index + 1
+              return (
+                <ChunkContainer
+                  key={item.content}
+                  label={`Chunk-${indexForLabel}`}
+                  characterCount={item.content.length}
+                >
+                  <FormattedText>
+                    {item.child_chunks.map((child, index) => {
+                      const indexForLabel = index + 1
+                      return (
+                        <PreviewSlice
+                          key={child}
+                          label={`C-${indexForLabel}`}
+                          text={child}
+                          tooltip={`Child-chunk-${indexForLabel} · ${child.length} Characters`}
+                        />
+                      )
+                    })}
+                  </FormattedText>
+                </ChunkContainer>
+              )
+            })
+          )}
           {currentEstimateMutation.isIdle && (
             <div className='h-full w-full flex items-center justify-center'>
               <div className='flex flex-col items-center justify-center gap-3'>
diff --git a/web/app/components/datasets/create/step-two/option-card.tsx b/web/app/components/datasets/create/step-two/option-card.tsx
index 40be777b1c..e8462159b8 100644
--- a/web/app/components/datasets/create/step-two/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/option-card.tsx
@@ -50,10 +50,11 @@ type OptionCardProps = {
   isActive?: boolean
   actions?: ReactNode
   effectImg?: string
+  onSelected?: () => void
 } & Omit<ComponentProps<'div'>, 'title'>
 
 export const OptionCard: FC<OptionCardProps> = (props) => {
-  const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, ...rest } = props
+  const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSelected, onClick, ...rest } = props
   return <div
     className={classNames(
       'rounded-xl',
@@ -64,6 +65,11 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
       ...style,
       borderWidth: 1.5,
     }}
+    onClick={(e) => {
+      if (!isActive)
+        onSelected?.()
+      onClick?.(e)
+    }}
     {...rest}>
     <OptionCardHeader
       icon={icon}
diff --git a/web/models/datasets.ts b/web/models/datasets.ts
index 14ba9a5169..3bcea75a4a 100644
--- a/web/models/datasets.ts
+++ b/web/models/datasets.ts
@@ -151,8 +151,7 @@ export type IndexingEstimateResponse = {
   total_price: number
   currency: string
   total_segments: number
-  // TODO: change it
-  preview: Array<{ content: string; child_chunks: any }>
+  preview: Array<{ content: string; child_chunks: string[] }>
   qa_preview?: QA[]
 }