Feat: Q&A format segmentation support (#668)

Co-authored-by: jyong <718720800@qq.com>
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>

web/app/components/datasets/create/step-two/index.module.css

@@ -291,7 +291,7 @@
 }
 
 .source {
-  @apply flex justify-between items-center mt-8 px-6 py-4 rounded-xl bg-gray-50;
+  @apply flex justify-between items-center mt-8 px-6 py-4 rounded-xl bg-gray-50 border border-gray-100;
 }
 
 .source .divider {

web/app/components/datasets/create/step-two/index.tsx

@@ -7,7 +7,7 @@ import { XMarkIcon } from '@heroicons/react/20/solid'
 import cn from 'classnames'
 import Link from 'next/link'
 import { groupBy } from 'lodash-es'
-import PreviewItem from './preview-item'
+import PreviewItem, { PreviewType } from './preview-item'
 import s from './index.module.css'
 import type { CreateDocumentReq, File, FullDocumentDetail, FileIndexingEstimateResponse as IndexingEstimateResponse, NotionInfo, PreProcessingRule, Rules, createDocumentResponse } from '@/models/datasets'
 import {
@@ -24,6 +24,8 @@ import { formatNumber } from '@/utils/format'
 import type { DataSourceNotionPage } from '@/models/common'
 import { DataSourceType } from '@/models/datasets'
 import NotionIcon from '@/app/components/base/notion-icon'
+import Switch from '@/app/components/base/switch'
+import { MessageChatSquare } from '@/app/components/base/icons/src/public/common'
 import { useDatasetDetailContext } from '@/context/dataset-detail'
 
 type Page = DataSourceNotionPage & { workspace_id: string }
@@ -53,6 +55,10 @@ enum IndexingType {
   QUALIFIED = 'high_quality',
   ECONOMICAL = 'economy',
 }
+enum DocForm {
+  TEXT = 'text_model',
+  QA = 'qa_model',
+}
 
 const StepTwo = ({
   isSetting,
@@ -88,6 +94,10 @@ const StepTwo = ({
       ? IndexingType.QUALIFIED
       : IndexingType.ECONOMICAL,
   )
+  const [docForm, setDocForm] = useState<DocForm | string>(
+    datasetId && documentDetail ? documentDetail.doc_form : DocForm.TEXT,
+  )
+  const [previewSwitched, setPreviewSwitched] = useState(false)
   const [showPreview, { setTrue: setShowPreview, setFalse: hidePreview }] = useBoolean()
   const [customFileIndexingEstimate, setCustomFileIndexingEstimate] = useState<IndexingEstimateResponse | null>(null)
   const [automaticFileIndexingEstimate, setAutomaticFileIndexingEstimate] = useState<IndexingEstimateResponse | null>(null)
@@ -145,9 +155,9 @@ const StepTwo = ({
     }
   }
 
-  const fetchFileIndexingEstimate = async () => {
+  const fetchFileIndexingEstimate = async (docForm = DocForm.TEXT) => {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    const res = await didFetchFileIndexingEstimate(getFileIndexingEstimateParams())
+    const res = await didFetchFileIndexingEstimate(getFileIndexingEstimateParams(docForm))
     if (segmentationType === SegmentType.CUSTOM)
       setCustomFileIndexingEstimate(res)
 
@@ -155,10 +165,11 @@ const StepTwo = ({
       setAutomaticFileIndexingEstimate(res)
   }
 
-  const confirmChangeCustomConfig = async () => {
+  const confirmChangeCustomConfig = () => {
     setCustomFileIndexingEstimate(null)
     setShowPreview()
-    await fetchFileIndexingEstimate()
+    fetchFileIndexingEstimate()
+    setPreviewSwitched(false)
   }
 
   const getIndexing_technique = () => indexingType || indexType
@@ -205,7 +216,7 @@ const StepTwo = ({
     }) as NotionInfo[]
   }
 
-  const getFileIndexingEstimateParams = () => {
+  const getFileIndexingEstimateParams = (docForm: DocForm) => {
     let params
     if (dataSourceType === DataSourceType.FILE) {
       params = {
@@ -217,6 +228,7 @@ const StepTwo = ({
         },
         indexing_technique: getIndexing_technique(),
         process_rule: getProcessRule(),
+        doc_form: docForm,
       }
     }
     if (dataSourceType === DataSourceType.NOTION) {
@@ -227,6 +239,7 @@ const StepTwo = ({
         },
         indexing_technique: getIndexing_technique(),
         process_rule: getProcessRule(),
+        doc_form: docForm,
       }
     }
     return params
@@ -237,6 +250,7 @@ const StepTwo = ({
     if (isSetting) {
       params = {
         original_document_id: documentDetail?.id,
+        doc_form: docForm,
         process_rule: getProcessRule(),
       } as CreateDocumentReq
     }
@@ -250,6 +264,7 @@ const StepTwo = ({
         },
         indexing_technique: getIndexing_technique(),
         process_rule: getProcessRule(),
+        doc_form: docForm,
       } as CreateDocumentReq
       if (dataSourceType === DataSourceType.FILE) {
         params.data_source.info_list.file_info_list = {
@@ -325,6 +340,29 @@ const StepTwo = ({
     }
   }
 
+  const handleSwitch = (state: boolean) => {
+    if (state)
+      setDocForm(DocForm.QA)
+    else
+      setDocForm(DocForm.TEXT)
+  }
+
+  const changeToEconomicalType = () => {
+    if (!hasSetIndexType) {
+      setIndexType(IndexingType.ECONOMICAL)
+      setDocForm(DocForm.TEXT)
+    }
+  }
+
+  const previewSwitch = async () => {
+    setPreviewSwitched(true)
+    if (segmentationType === SegmentType.AUTO)
+      setAutomaticFileIndexingEstimate(null)
+    else
+      setCustomFileIndexingEstimate(null)
+    await fetchFileIndexingEstimate(DocForm.QA)
+  }
+
   useEffect(() => {
     // fetch rules
     if (!isSetting) {
@@ -352,6 +390,11 @@ const StepTwo = ({
     }
   }, [showPreview])
 
+  useEffect(() => {
+    if (indexingType === IndexingType.ECONOMICAL && docForm === DocForm.QA)
+      setDocForm(DocForm.TEXT)
+  }, [indexingType, docForm])
+
   useEffect(() => {
     // get indexing type by props
     if (indexingType)
@@ -366,10 +409,12 @@ const StepTwo = ({
       setAutomaticFileIndexingEstimate(null)
       setShowPreview()
       fetchFileIndexingEstimate()
+      setPreviewSwitched(false)
     }
     else {
       hidePreview()
       setCustomFileIndexingEstimate(null)
+      setPreviewSwitched(false)
     }
   }, [segmentationType, indexType])
 
@@ -508,7 +553,7 @@ const StepTwo = ({
                     hasSetIndexType && s.disabled,
                     hasSetIndexType && '!w-full',
                   )}
-                  onClick={() => !hasSetIndexType && setIndexType(IndexingType.ECONOMICAL)}
+                  onClick={changeToEconomicalType}
                 >
                   <span className={cn(s.typeIcon, s.economical)} />
                   {!hasSetIndexType && <span className={cn(s.radio)} />}
@@ -527,6 +572,24 @@ const StepTwo = ({
                 <Link className='text-[#155EEF]' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
               </div>
             )}
+            {indexType === IndexingType.QUALIFIED && (
+              <div className='flex justify-between items-center mt-3 px-5 py-4 rounded-xl bg-gray-50 border border-gray-100'>
+                <div className='flex justify-center items-center w-8 h-8 rounded-lg bg-indigo-50'>
+                  <MessageChatSquare className='w-4 h-4' />
+                </div>
+                <div className='grow mx-3'>
+                  <div className='mb-[2px] text-md font-medium text-gray-900'>{t('datasetCreation.stepTwo.QATitle')}</div>
+                  <div className='text-[13px] leading-[18px] text-gray-500'>{t('datasetCreation.stepTwo.QATip')}</div>
+                </div>
+                <div className='shrink-0'>
+                  <Switch
+                    defaultValue={docForm === DocForm.QA}
+                    onChange={handleSwitch}
+                    size='md'
+                  />
+                </div>
+              </div>
+            )}
             <div className={s.source}>
               <div className={s.sourceContent}>
                 {dataSourceType === DataSourceType.FILE && (
@@ -602,23 +665,50 @@ const StepTwo = ({
       {(showPreview)
         ? (
           <div ref={previewScrollRef} className={cn(s.previewWrap, 'relativeh-full overflow-y-scroll border-l border-[#F2F4F7]')}>
-            <div className={cn(s.previewHeader, previewScrolled && `${s.fixed} pb-3`, ' flex items-center justify-between px-8')}>
-              <span>{t('datasetCreation.stepTwo.previewTitle')}</span>
-              <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
-                <XMarkIcon className='h-4 w-4'></XMarkIcon>
+            <div className={cn(s.previewHeader, previewScrolled && `${s.fixed} pb-3`)}>
+              <div className='flex items-center justify-between px-8'>
+                <div className='grow flex items-center'>
+                  <div>{t('datasetCreation.stepTwo.previewTitle')}</div>
+                  {docForm === DocForm.QA && !previewSwitched && (
+                    <Button className='ml-2 !h-[26px] !py-[3px] !px-2 !text-xs !font-medium !text-primary-600' onClick={previewSwitch}>{t('datasetCreation.stepTwo.previewButton')}</Button>
+                  )}
+                </div>
+                <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
+                  <XMarkIcon className='h-4 w-4'></XMarkIcon>
+                </div>
               </div>
+              {docForm === DocForm.QA && !previewSwitched && (
+                <div className='px-8 pr-12 text-xs text-gray-500'>
+                  <span>{t('datasetCreation.stepTwo.previewSwitchTipStart')}</span>
+                  <span className='text-amber-600'>{t('datasetCreation.stepTwo.previewSwitchTipEnd')}</span>
+                </div>
+              )}
             </div>
             <div className='my-4 px-8 space-y-4'>
-              {fileIndexingEstimate?.preview
-                ? (
-                  <>
-                    {fileIndexingEstimate?.preview.map((item, index) => (
-                      <PreviewItem key={item} content={item} index={index + 1} />
-                    ))}
-                  </>
-                )
-                : <div className='flex items-center justify-center h-[200px]'><Loading type='area'></Loading></div>
-              }
+              {previewSwitched && docForm === DocForm.QA && fileIndexingEstimate?.qa_preview && (
+                <>
+                  {fileIndexingEstimate?.qa_preview.map((item, index) => (
+                    <PreviewItem type={PreviewType.QA} key={item.question} qa={item} index={index + 1} />
+                  ))}
+                </>
+              )}
+              {(docForm === DocForm.TEXT || !previewSwitched) && fileIndexingEstimate?.preview && (
+                <>
+                  {fileIndexingEstimate?.preview.map((item, index) => (
+                    <PreviewItem type={PreviewType.TEXT} key={item} content={item} index={index + 1} />
+                  ))}
+                </>
+              )}
+              {previewSwitched && docForm === DocForm.QA && !fileIndexingEstimate?.qa_preview && (
+                <div className='flex items-center justify-center h-[200px]'>
+                  <Loading type='area' />
+                </div>
+              )}
+              {!previewSwitched && !fileIndexingEstimate?.preview && (
+                <div className='flex items-center justify-center h-[200px]'>
+                  <Loading type='area' />
+                </div>
+              )}
             </div>
           </div>
         )

web/app/components/datasets/create/step-two/preview-item/index.tsx

@@ -1,10 +1,21 @@
 'use client'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-export interface IPreviewItemProps {
+export type IPreviewItemProps = {
+  type: string
   index: number
-  content: string
+  content?: string
+  qa?: {
+    answer: string
+    question: string
+  }
+}
+
+export enum PreviewType {
+  TEXT = 'text',
+  QA = 'QA',
 }
 
 const sharpIcon = (
@@ -21,12 +32,16 @@ const textIcon = (
 )
 
 const PreviewItem: FC<IPreviewItemProps> = ({
+  type = PreviewType.TEXT,
   index,
   content,
+  qa,
 }) => {
   const { t } = useTranslation()
-  const charNums = (content || '').length
-  const formatedIndex = (() => (index + '').padStart(3, '0'))()
+  const charNums = type === PreviewType.TEXT
+    ? (content || '').length
+    : (qa?.answer || '').length + (qa?.question || '').length
+  const formatedIndex = (() => String(index).padStart(3, '0'))()
 
   return (
     <div className='p-4 rounded-xl bg-gray-50'>
@@ -41,7 +56,21 @@ const PreviewItem: FC<IPreviewItemProps> = ({
         </div>
       </div>
       <div className='mt-2 max-h-[120px] line-clamp-6 overflow-hidden text-sm text-gray-800'>
-        <div style={{ whiteSpace: 'pre-line'}}>{content}</div>
+        {type === PreviewType.TEXT && (
+          <div style={{ whiteSpace: 'pre-line' }}>{content}</div>
+        )}
+        {type === PreviewType.QA && (
+          <div style={{ whiteSpace: 'pre-line' }}>
+            <div className='flex'>
+              <div className='shrink-0 mr-2 text-medium text-gray-400'>Q</div>
+              <div style={{ whiteSpace: 'pre-line' }}>{qa?.question}</div>
+            </div>
+            <div className='flex'>
+              <div className='shrink-0 mr-2 text-medium text-gray-400'>A</div>
+              <div style={{ whiteSpace: 'pre-line' }}>{qa?.answer}</div>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   )

web/app/components/datasets/documents/detail/completed/InfiniteVirtualList.tsx

@@ -1,18 +1,19 @@
-import React, { FC, CSSProperties } from "react";
-import { FixedSizeList as List } from "react-window";
-import InfiniteLoader from "react-window-infinite-loader";
-import type { SegmentDetailModel } from "@/models/datasets";
-import SegmentCard from "./SegmentCard";
-import s from "./style.module.css";
+import type { CSSProperties, FC } from 'react'
+import React from 'react'
+import { FixedSizeList as List } from 'react-window'
+import InfiniteLoader from 'react-window-infinite-loader'
+import SegmentCard from './SegmentCard'
+import s from './style.module.css'
+import type { SegmentDetailModel } from '@/models/datasets'
 
 type IInfiniteVirtualListProps = {
-  hasNextPage?: boolean; // Are there more items to load? (This information comes from the most recent API request.)
-  isNextPageLoading: boolean; // Are we currently loading a page of items? (This may be an in-flight flag in your Redux store for example.)
-  items: Array<SegmentDetailModel[]>; // Array of items loaded so far.
-  loadNextPage: () => Promise<any>; // Callback function responsible for loading the next page of items.
-  onClick: (detail: SegmentDetailModel) => void;
-  onChangeSwitch: (segId: string, enabled: boolean) => Promise<void>;
-};
+  hasNextPage?: boolean // Are there more items to load? (This information comes from the most recent API request.)
+  isNextPageLoading: boolean // Are we currently loading a page of items? (This may be an in-flight flag in your Redux store for example.)
+  items: Array<SegmentDetailModel[]> // Array of items loaded so far.
+  loadNextPage: () => Promise<any> // Callback function responsible for loading the next page of items.
+  onClick: (detail: SegmentDetailModel) => void
+  onChangeSwitch: (segId: string, enabled: boolean) => Promise<void>
+}
 
 const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
   hasNextPage,
@@ -23,28 +24,29 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
   onChangeSwitch,
 }) => {
   // If there are more items to be loaded then add an extra row to hold a loading indicator.
-  const itemCount = hasNextPage ? items.length + 1 : items.length;
+  const itemCount = hasNextPage ? items.length + 1 : items.length
 
   // Only load 1 page of items at a time.
   // Pass an empty callback to InfiniteLoader in case it asks us to load more than once.
-  const loadMoreItems = isNextPageLoading ? () => { } : loadNextPage;
+  const loadMoreItems = isNextPageLoading ? () => { } : loadNextPage
 
   // Every row is loaded except for our loading indicator row.
-  const isItemLoaded = (index: number) => !hasNextPage || index < items.length;
+  const isItemLoaded = (index: number) => !hasNextPage || index < items.length
 
   // Render an item or a loading indicator.
   const Item = ({ index, style }: { index: number; style: CSSProperties }) => {
-    let content;
+    let content
     if (!isItemLoaded(index)) {
       content = (
         <>
-          {[1, 2, 3].map((v) => (
+          {[1, 2, 3].map(v => (
             <SegmentCard loading={true} detail={{ position: v } as any} />
           ))}
         </>
-      );
-    } else {
-      content = items[index].map((segItem) => (
+      )
+    }
+    else {
+      content = items[index].map(segItem => (
         <SegmentCard
           key={segItem.id}
           detail={segItem}
@@ -52,15 +54,15 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
           onChangeSwitch={onChangeSwitch}
           loading={false}
         />
-      ));
+      ))
     }
 
     return (
       <div style={style} className={s.cardWrapper}>
         {content}
       </div>
-    );
-  };
+    )
+  }
 
   return (
     <InfiniteLoader
@@ -73,7 +75,7 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
           ref={ref}
           className="List"
           height={800}
-          width={"100%"}
+          width={'100%'}
           itemSize={200}
           itemCount={itemCount}
           onItemsRendered={onItemsRendered}
@@ -82,6 +84,6 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
         </List>
       )}
     </InfiniteLoader>
-  );
-};
-export default InfiniteVirtualList;
+  )
+}
+export default InfiniteVirtualList

web/app/components/datasets/documents/detail/completed/SegmentCard.tsx

@@ -1,17 +1,17 @@
-import type { FC } from "react";
-import React from "react";
-import cn from "classnames";
-import { ArrowUpRightIcon } from "@heroicons/react/24/outline";
-import Switch from "@/app/components/base/switch";
-import Divider from "@/app/components/base/divider";
-import Indicator from "@/app/components/header/indicator";
-import { formatNumber } from "@/utils/format";
-import type { SegmentDetailModel } from "@/models/datasets";
-import { StatusItem } from "../../list";
-import s from "./style.module.css";
-import { SegmentIndexTag } from "./index";
+import type { FC } from 'react'
+import React from 'react'
+import cn from 'classnames'
+import { ArrowUpRightIcon } from '@heroicons/react/24/outline'
+import { useTranslation } from 'react-i18next'
+import { StatusItem } from '../../list'
 import { DocumentTitle } from '../index'
-import { useTranslation } from "react-i18next";
+import s from './style.module.css'
+import { SegmentIndexTag } from './index'
+import Switch from '@/app/components/base/switch'
+import Divider from '@/app/components/base/divider'
+import Indicator from '@/app/components/header/indicator'
+import { formatNumber } from '@/utils/format'
+import type { SegmentDetailModel } from '@/models/datasets'
 
 const ProgressBar: FC<{ percent: number; loading: boolean }> = ({ percent, loading }) => {
   return (
@@ -30,14 +30,14 @@ const ProgressBar: FC<{ percent: number; loading: boolean }> = ({ percent, loadi
 export type UsageScene = 'doc' | 'hitTesting'
 
 type ISegmentCardProps = {
-  loading: boolean;
-  detail?: SegmentDetailModel & { document: { name: string } };
+  loading: boolean
+  detail?: SegmentDetailModel & { document: { name: string } }
   score?: number
-  onClick?: () => void;
-  onChangeSwitch?: (segId: string, enabled: boolean) => Promise<void>;
+  onClick?: () => void
+  onChangeSwitch?: (segId: string, enabled: boolean) => Promise<void>
   scene?: UsageScene
-  className?: string;
-};
+  className?: string
+}
 
 const SegmentCard: FC<ISegmentCardProps> = ({
   detail = {},
@@ -46,7 +46,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
   onChangeSwitch,
   loading = true,
   scene = 'doc',
-  className = ''
+  className = '',
 }) => {
   const { t } = useTranslation()
   const {
@@ -57,110 +57,138 @@ const SegmentCard: FC<ISegmentCardProps> = ({
     word_count,
     hit_count,
     index_node_hash,
-  } = detail as any;
+    answer,
+  } = detail as any
   const isDocScene = scene === 'doc'
 
+  const renderContent = () => {
+    if (answer) {
+      return (
+        <>
+          <div className='flex mb-2'>
+            <div className='mr-2 text-[13px] font-semibold text-gray-400'>Q</div>
+            <div className='text-[13px]'>{content}</div>
+          </div>
+          <div className='flex'>
+            <div className='mr-2 text-[13px] font-semibold text-gray-400'>A</div>
+            <div className='text-[13px]'>{answer}</div>
+          </div>
+        </>
+      )
+    }
+
+    return content
+  }
+
   return (
     <div
       className={cn(
         s.segWrapper,
-        isDocScene && !enabled ? "bg-gray-25" : "",
-        "group",
-        !loading ? "pb-4" : "",
+        (isDocScene && !enabled) ? 'bg-gray-25' : '',
+        'group',
+        !loading ? 'pb-4' : '',
         className,
       )}
       onClick={() => onClick?.()}
     >
       <div className={s.segTitleWrapper}>
-        {isDocScene ? <>
-          <SegmentIndexTag positionId={position} className={cn("w-fit group-hover:opacity-100", isDocScene && !enabled ? 'opacity-50' : '')} />
-          <div className={s.segStatusWrapper}>
-            {loading ? (
-              <Indicator
-                color="gray"
-                className="bg-gray-200 border-gray-300 shadow-none"
-              />
-            ) : (
-              <>
-                <StatusItem status={enabled ? "enabled" : "disabled"} reverse textCls="text-gray-500 text-xs" />
-                <div className="hidden group-hover:inline-flex items-center">
-                  <Divider type="vertical" className="!h-2" />
-                  <div
-                    onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
-                      e.stopPropagation()
-                    }
-                    className="inline-flex items-center"
-                  >
-                    <Switch
-                      size='md'
-                      defaultValue={enabled}
-                      onChange={async (val) => {
-                        await onChangeSwitch?.(id, val)
-                      }}
-                    />
+        {isDocScene
+          ? <>
+            <SegmentIndexTag positionId={position} className={cn('w-fit group-hover:opacity-100', (isDocScene && !enabled) ? 'opacity-50' : '')} />
+            <div className={s.segStatusWrapper}>
+              {loading
+                ? (
+                  <Indicator
+                    color="gray"
+                    className="bg-gray-200 border-gray-300 shadow-none"
+                  />
+                )
+                : (
+                  <>
+                    <StatusItem status={enabled ? 'enabled' : 'disabled'} reverse textCls="text-gray-500 text-xs" />
+                    <div className="hidden group-hover:inline-flex items-center">
+                      <Divider type="vertical" className="!h-2" />
+                      <div
+                        onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
+                          e.stopPropagation()
+                        }
+                        className="inline-flex items-center"
+                      >
+                        <Switch
+                          size='md'
+                          defaultValue={enabled}
+                          onChange={async (val) => {
+                            await onChangeSwitch?.(id, val)
+                          }}
+                        />
+                      </div>
+                    </div>
+                  </>
+                )}
+            </div>
+          </>
+          : <div className={s.hitTitleWrapper}>
+            <div className={cn(s.commonIcon, s.targetIcon, loading ? '!bg-gray-300' : '', '!w-3.5 !h-3.5')} />
+            <ProgressBar percent={score ?? 0} loading={loading} />
+          </div>}
+      </div>
+      {loading
+        ? (
+          <div className={cn(s.cardLoadingWrapper, s.cardLoadingIcon)}>
+            <div className={cn(s.cardLoadingBg)} />
+          </div>
+        )
+        : (
+          isDocScene
+            ? <>
+              <div
+                className={cn(
+                  s.segContent,
+                  enabled ? '' : 'opacity-50',
+                  'group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-b',
+                )}
+              >
+                {renderContent()}
+              </div>
+              <div className={cn('group-hover:flex', s.segData)}>
+                <div className="flex items-center mr-6">
+                  <div className={cn(s.commonIcon, s.typeSquareIcon)}></div>
+                  <div className={s.segDataText}>{formatNumber(word_count)}</div>
+                </div>
+                <div className="flex items-center mr-6">
+                  <div className={cn(s.commonIcon, s.targetIcon)} />
+                  <div className={s.segDataText}>{formatNumber(hit_count)}</div>
+                </div>
+                <div className="flex items-center">
+                  <div className={cn(s.commonIcon, s.bezierCurveIcon)} />
+                  <div className={s.segDataText}>{index_node_hash}</div>
+                </div>
+              </div>
+            </>
+            : <>
+              <div className="h-[140px] overflow-hidden text-ellipsis text-sm font-normal text-gray-800">
+                {renderContent()}
+              </div>
+              <div className={cn('w-full bg-gray-50 group-hover:bg-white')}>
+                <Divider />
+                <div className="relative flex items-center w-full">
+                  <DocumentTitle
+                    name={detail?.document?.name || ''}
+                    extension={(detail?.document?.name || '').split('.').pop() || 'txt'}
+                    wrapperCls='w-full'
+                    iconCls="!h-4 !w-4 !bg-contain"
+                    textCls="text-xs text-gray-700 !font-normal overflow-hidden whitespace-nowrap text-ellipsis"
+                  />
+                  <div className={cn(s.chartLinkText, 'group-hover:inline-flex')}>
+                    {t('datasetHitTesting.viewChart')}
+                    <ArrowUpRightIcon className="w-3 h-3 ml-1 stroke-current stroke-2" />
                   </div>
                 </div>
-              </>
-            )}
-          </div>
-        </> : <div className={s.hitTitleWrapper}>
-          <div className={cn(s.commonIcon, s.targetIcon, loading ? '!bg-gray-300' : '', '!w-3.5 !h-3.5')} />
-          <ProgressBar percent={score ?? 0} loading={loading} />
-        </div>}
-      </div>
-      {loading ? (
-        <div className={cn(s.cardLoadingWrapper, s.cardLoadingIcon)}>
-          <div className={cn(s.cardLoadingBg)} />
-        </div>
-      ) : (
-        isDocScene ? <>
-          <div
-            className={cn(
-              s.segContent,
-              enabled ? "" : "opacity-50",
-              "group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-b"
-            )}
-          >
-            {content}
-          </div>
-          <div className={cn('group-hover:flex', s.segData)}>
-            <div className="flex items-center mr-6">
-              <div className={cn(s.commonIcon, s.typeSquareIcon)}></div>
-              <div className={s.segDataText}>{formatNumber(word_count)}</div>
-            </div>
-            <div className="flex items-center mr-6">
-              <div className={cn(s.commonIcon, s.targetIcon)} />
-              <div className={s.segDataText}>{formatNumber(hit_count)}</div>
-            </div>
-            <div className="flex items-center">
-              <div className={cn(s.commonIcon, s.bezierCurveIcon)} />
-              <div className={s.segDataText}>{index_node_hash}</div>
-            </div>
-          </div>
-        </> : <>
-          <div className="h-[140px] overflow-hidden text-ellipsis text-sm font-normal text-gray-800">
-            {content}
-          </div>
-          <div className={cn("w-full bg-gray-50 group-hover:bg-white")}>
-            <Divider />
-            <div className="relative flex items-center w-full">
-              <DocumentTitle
-                name={detail?.document?.name || ''}
-                extension={(detail?.document?.name || '').split('.').pop() || 'txt'}
-                wrapperCls='w-full'
-                iconCls="!h-4 !w-4 !bg-contain"
-                textCls="text-xs text-gray-700 !font-normal overflow-hidden whitespace-nowrap text-ellipsis"
-              />
-              <div className={cn(s.chartLinkText, 'group-hover:inline-flex')}>
-                {t('datasetHitTesting.viewChart')}
-                <ArrowUpRightIcon className="w-3 h-3 ml-1 stroke-current stroke-2" />
               </div>
-            </div>
-          </div>
-        </>
-      )}
+            </>
+        )}
     </div>
-  );
-};
+  )
+}
 
-export default SegmentCard;
+export default SegmentCard

web/app/components/datasets/documents/detail/completed/index.tsx

@@ -1,27 +1,31 @@
 'use client'
 import type { FC } from 'react'
-import React, { memo, useState, useEffect, useMemo } from 'react'
+import React, { memo, useEffect, useMemo, useState } from 'react'
 import { HashtagIcon } from '@heroicons/react/24/solid'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import { omitBy, isNil, debounce } from 'lodash-es'
-import { formatNumber } from '@/utils/format'
+import { debounce, isNil, omitBy } from 'lodash-es'
+import cn from 'classnames'
 import { StatusItem } from '../../list'
 import { DocumentContext } from '../index'
 import s from './style.module.css'
+import InfiniteVirtualList from './InfiniteVirtualList'
+import { formatNumber } from '@/utils/format'
 import Modal from '@/app/components/base/modal'
 import Switch from '@/app/components/base/switch'
 import Divider from '@/app/components/base/divider'
 import Input from '@/app/components/base/input'
-import Loading from '@/app/components/base/loading'
 import { ToastContext } from '@/app/components/base/toast'
-import { SimpleSelect, Item } from '@/app/components/base/select'
-import { disableSegment, enableSegment, fetchSegments } from '@/service/datasets'
-import type { SegmentDetailModel, SegmentsResponse, SegmentsQuery } from '@/models/datasets'
+import type { Item } from '@/app/components/base/select'
+import { SimpleSelect } from '@/app/components/base/select'
+import { disableSegment, enableSegment, fetchSegments, updateSegment } from '@/service/datasets'
+import type { SegmentDetailModel, SegmentUpdator, SegmentsQuery, SegmentsResponse } from '@/models/datasets'
 import { asyncRunSafe } from '@/utils'
 import type { CommonResponse } from '@/models/common'
-import InfiniteVirtualList from "./InfiniteVirtualList";
-import cn from 'classnames'
+import { Edit03, XClose } from '@/app/components/base/icons/src/vender/line/general'
+import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common'
+import Button from '@/app/components/base/button'
+import NewSegmentModal from '@/app/components/datasets/documents/detail/new-segment-modal'
 
 export const SegmentIndexTag: FC<{ positionId: string | number; className?: string }> = ({ positionId, className }) => {
   const localPositionId = useMemo(() => {
@@ -41,19 +45,105 @@ export const SegmentIndexTag: FC<{ positionId: string | number; className?: stri
 type ISegmentDetailProps = {
   segInfo?: Partial<SegmentDetailModel> & { id: string }
   onChangeSwitch?: (segId: string, enabled: boolean) => Promise<void>
+  onUpdate: (segmentId: string, q: string, a: string) => void
+  onCancel: () => void
 }
 /**
  * Show all the contents of the segment
  */
 export const SegmentDetail: FC<ISegmentDetailProps> = memo(({
   segInfo,
-  onChangeSwitch }) => {
+  onChangeSwitch,
+  onUpdate,
+  onCancel,
+}) => {
   const { t } = useTranslation()
+  const [isEditing, setIsEditing] = useState(false)
+  const [question, setQuestion] = useState(segInfo?.content || '')
+  const [answer, setAnswer] = useState(segInfo?.answer || '')
+
+  const handleCancel = () => {
+    setIsEditing(false)
+    setQuestion(segInfo?.content || '')
+    setAnswer(segInfo?.answer || '')
+  }
+  const handleSave = () => {
+    onUpdate(segInfo?.id || '', question, answer)
+  }
+
+  const renderContent = () => {
+    if (segInfo?.answer) {
+      return (
+        <>
+          <div className='mb-1 text-xs font-medium text-gray-500'>QUESTION</div>
+          <AutoHeightTextarea
+            outerClassName='mb-4'
+            className='leading-6 text-md text-gray-800'
+            value={question}
+            placeholder={t('datasetDocuments.segment.questionPlaceholder') || ''}
+            onChange={e => setQuestion(e.target.value)}
+            disabled={!isEditing}
+          />
+          <div className='mb-1 text-xs font-medium text-gray-500'>ANSWER</div>
+          <AutoHeightTextarea
+            outerClassName='mb-4'
+            className='leading-6 text-md text-gray-800'
+            value={answer}
+            placeholder={t('datasetDocuments.segment.answerPlaceholder') || ''}
+            onChange={e => setAnswer(e.target.value)}
+            disabled={!isEditing}
+            autoFocus
+          />
+        </>
+      )
+    }
+
+    return (
+      <AutoHeightTextarea
+        className='leading-6 text-md text-gray-800'
+        value={question}
+        placeholder={t('datasetDocuments.segment.contentPlaceholder') || ''}
+        onChange={e => setQuestion(e.target.value)}
+        disabled={!isEditing}
+        autoFocus
+      />
+    )
+  }
 
   return (
-    <div className={'flex flex-col'}>
-      <SegmentIndexTag positionId={segInfo?.position || ''} className='w-fit mb-6' />
-      <div className={s.segModalContent}>{segInfo?.content}</div>
+    <div className={'flex flex-col relative'}>
+      <div className='absolute right-0 top-0 flex items-center h-7'>
+        {
+          isEditing
+            ? (
+              <>
+                <Button
+                  className='mr-2 !h-7 !px-3 !py-[5px] text-xs font-medium text-gray-700 !rounded-md'
+                  onClick={handleCancel}>
+                  {t('common.operation.cancel')}
+                </Button>
+                <Button
+                  type='primary'
+                  className='!h-7 !px-3 !py-[5px] text-xs font-medium !rounded-md'
+                  onClick={handleSave}>
+                  {t('common.operation.save')}
+                </Button>
+              </>
+            )
+            : (
+              <div className='group relative flex justify-center items-center w-6 h-6 hover:bg-gray-100 rounded-md cursor-pointer'>
+                <div className={cn(s.editTip, 'hidden items-center absolute -top-10 px-3 h-[34px] bg-white rounded-lg whitespace-nowrap text-xs font-semibold text-gray-700 group-hover:flex')}>{t('common.operation.edit')}</div>
+                <Edit03 className='w-4 h-4 text-gray-500' onClick={() => setIsEditing(true)} />
+              </div>
+            )
+        }
+        <div className='mx-3 w-[1px] h-3 bg-gray-200' />
+        <div className='flex justify-center items-center w-6 h-6 cursor-pointer' onClick={onCancel}>
+          <XClose className='w-4 h-4 text-gray-500' />
+        </div>
+      </div>
+      <SegmentIndexTag positionId={segInfo?.position || ''} className='w-fit mt-[2px] mb-6' />
+      <div className={s.segModalContent}>{renderContent()}</div>
       <div className={s.keywordTitle}>{t('datasetDocuments.segment.keywords')}</div>
       <div className={s.keywordWrapper}>
         {!segInfo?.keywords?.length
@@ -74,7 +164,7 @@ export const SegmentDetail: FC<ISegmentDetailProps> = memo(({
           <Switch
             size='md'
             defaultValue={segInfo?.enabled}
-            onChange={async val => {
+            onChange={async (val) => {
               await onChangeSwitch?.(segInfo?.id || '', val)
             }}
           />
@@ -94,16 +184,18 @@ export const splitArray = (arr: any[], size = 3) => {
 }
 
 type ICompletedProps = {
+  showNewSegmentModal: boolean
+  onNewSegmentModalChange: (state: boolean) => void
   // data: Array<{}> // all/part segments
 }
 /**
  * Embedding done, show list of all segments
  * Support search and filter
  */
-const Completed: FC<ICompletedProps> = () => {
+const Completed: FC<ICompletedProps> = ({ showNewSegmentModal, onNewSegmentModalChange }) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
-  const { datasetId = '', documentId = '' } = useContext(DocumentContext)
+  const { datasetId = '', documentId = '', docForm } = useContext(DocumentContext)
   // the current segment id and whether to show the modal
   const [currSegment, setCurrSegment] = useState<{ segInfo?: SegmentDetailModel; showModal: boolean }>({ showModal: false })
 
@@ -115,37 +207,45 @@ const Completed: FC<ICompletedProps> = () => {
   const [loading, setLoading] = useState(false)
   const [total, setTotal] = useState<number | undefined>()
 
-  useEffect(() => {
-    if (lastSegmentsRes !== undefined) {
-      getSegments(false)
-    }
-  }, [selectedStatus, searchValue])
-
   const onChangeStatus = ({ value }: Item) => {
     setSelectedStatus(value === 'all' ? 'all' : !!value)
   }
 
   const getSegments = async (needLastId?: boolean) => {
-    const finalLastId = lastSegmentsRes?.data?.[lastSegmentsRes.data.length - 1]?.id || '';
+    const finalLastId = lastSegmentsRes?.data?.[lastSegmentsRes.data.length - 1]?.id || ''
     setLoading(true)
     const [e, res] = await asyncRunSafe<SegmentsResponse>(fetchSegments({
       datasetId,
       documentId,
       params: omitBy({
         last_id: !needLastId ? undefined : finalLastId,
-        limit: 9,
+        limit: 12,
         keyword: searchValue,
         enabled: selectedStatus === 'all' ? 'all' : !!selectedStatus,
-      }, isNil) as SegmentsQuery
+      }, isNil) as SegmentsQuery,
     }) as Promise<SegmentsResponse>)
     if (!e) {
       setAllSegments([...(!needLastId ? [] : allSegments), ...splitArray(res.data || [])])
       setLastSegmentsRes(res)
-      if (!lastSegmentsRes) { setTotal(res?.total || 0) }
+      if (!lastSegmentsRes || !needLastId)
+        setTotal(res?.total || 0)
     }
     setLoading(false)
   }
 
+  const resetList = () => {
+    setLastSegmentsRes(undefined)
+    setAllSegments([])
+    setLoading(false)
+    setTotal(undefined)
+    getSegments(false)
+  }
+
+  useEffect(() => {
+    if (lastSegmentsRes !== undefined)
+      getSegments(false)
+  }, [selectedStatus, searchValue])
+
   const onClickCard = (detail: SegmentDetailModel) => {
     setCurrSegment({ segInfo: detail, showModal: true })
   }
@@ -161,17 +261,53 @@ const Completed: FC<ICompletedProps> = () => {
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
       for (const item of allSegments) {
         for (const seg of item) {
-          if (seg.id === segId) {
+          if (seg.id === segId)
             seg.enabled = enabled
-          }
         }
       }
       setAllSegments([...allSegments])
-    } else {
+    }
+    else {
       notify({ type: 'error', message: t('common.actionMsg.modificationFailed') })
     }
   }
 
+  const handleUpdateSegment = async (segmentId: string, question: string, answer: string) => {
+    const params: SegmentUpdator = { content: '' }
+    if (docForm === 'qa_model') {
+      if (!question.trim())
+        return notify({ type: 'error', message: t('datasetDocuments.segment.questionEmpty') })
+      if (!answer.trim())
+        return notify({ type: 'error', message: t('datasetDocuments.segment.answerEmpty') })
+
+      params.content = question
+      params.answer = answer
+    }
+    else {
+      if (!question.trim())
+        return notify({ type: 'error', message: t('datasetDocuments.segment.contentEmpty') })
+
+      params.content = question
+    }
+
+    const res = await updateSegment({ datasetId, documentId, segmentId, body: params })
+    notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+    onCloseModal()
+    for (const item of allSegments) {
+      for (const seg of item) {
+        if (seg.id === segmentId) {
+          seg.answer = res.data.answer
+          seg.content = res.data.content
+          seg.word_count = res.data.word_count
+          seg.hit_count = res.data.hit_count
+          seg.index_node_hash = res.data.index_node_hash
+          seg.enabled = res.data.enabled
+        }
+      }
+    }
+    setAllSegments([...allSegments])
+  }
+
   return (
     <>
       <div className={s.docSearchWrapper}>
@@ -196,9 +332,20 @@ const Completed: FC<ICompletedProps> = () => {
         onChangeSwitch={onChangeSwitch}
         onClick={onClickCard}
       />
-      <Modal isShow={currSegment.showModal} onClose={onCloseModal} className='!max-w-[640px]' closable>
-        <SegmentDetail segInfo={currSegment.segInfo ?? { id: '' }} onChangeSwitch={onChangeSwitch} />
+      <Modal isShow={currSegment.showModal} onClose={() => {}} className='!max-w-[640px] !overflow-visible'>
+        <SegmentDetail
+          segInfo={currSegment.segInfo ?? { id: '' }}
+          onChangeSwitch={onChangeSwitch}
+          onUpdate={handleUpdateSegment}
+          onCancel={onCloseModal}
+        />
       </Modal>
+      <NewSegmentModal
+        isShow={showNewSegmentModal}
+        docForm={docForm}
+        onCancel={() => onNewSegmentModalChange(false)}
+        onSave={resetList}
+      />
     </>
   )
 }

web/app/components/datasets/documents/detail/completed/style.module.css

@@ -129,3 +129,6 @@
   border-radius: 5px;
   @apply h-3.5 w-3.5 bg-[#EAECF0];
 }
+.editTip {
+  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
+}

web/app/components/datasets/documents/detail/embedding/index.tsx

@@ -30,6 +30,7 @@ type Props = {
   datasetId?: string
   documentId?: string
   indexingType?: string
+  detailUpdate: VoidFunction
 }
 
 const StopIcon: FC<{ className?: string }> = ({ className }) => {
@@ -108,7 +109,7 @@ const RuleDetail: FC<{ sourceData?: ProcessRuleResponse; docName?: string }> = (
   </div>
 }
 
-const EmbeddingDetail: FC<Props> = ({ detail, stopPosition = 'top', datasetId: dstId, documentId: docId, indexingType }) => {
+const EmbeddingDetail: FC<Props> = ({ detail, stopPosition = 'top', datasetId: dstId, documentId: docId, indexingType, detailUpdate }) => {
   const onTop = stopPosition === 'top'
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
@@ -145,6 +146,7 @@ const EmbeddingDetail: FC<Props> = ({ detail, stopPosition = 'top', datasetId: d
       const indexingStatusDetail = getIndexingStatusDetail()
       if (indexingStatusDetail?.indexing_status === 'completed') {
         stopQueryStatus()
+        detailUpdate()
         return
       }
       fetchIndexingStatus()

web/app/components/datasets/documents/detail/index.tsx

@@ -27,7 +27,7 @@ export const BackCircleBtn: FC<{ onClick: () => void }> = ({ onClick }) => {
   )
 }
 
-export const DocumentContext = createContext<{ datasetId?: string; documentId?: string }>({})
+export const DocumentContext = createContext<{ datasetId?: string; documentId?: string; docForm: string }>({ docForm: '' })
 
 type DocumentTitleProps = {
   extension?: string
@@ -54,6 +54,7 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
   const { t } = useTranslation()
   const router = useRouter()
   const [showMetadata, setShowMetadata] = useState(true)
+  const [showNewSegmentModal, setShowNewSegmentModal] = useState(false)
 
   const { data: documentDetail, error, mutate: detailMutate } = useSWR({
     action: 'fetchDocumentDetail',
@@ -87,7 +88,7 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
   }
 
   return (
-    <DocumentContext.Provider value={{ datasetId, documentId }}>
+    <DocumentContext.Provider value={{ datasetId, documentId, docForm: documentDetail?.doc_form || '' }}>
       <div className='flex flex-col h-full'>
         <div className='flex h-16 border-b-gray-100 border-b items-center p-4'>
           <BackCircleBtn onClick={backToPrev} />
@@ -100,10 +101,12 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
               enabled: documentDetail?.enabled || false,
               archived: documentDetail?.archived || false,
               id: documentId,
+              doc_form: documentDetail?.doc_form || '',
             }}
             datasetId={datasetId}
             onUpdate={handleOperate}
             className='!w-[216px]'
+            showNewSegmentModal={() => setShowNewSegmentModal(true)}
           />
           <button
             className={cn(style.layoutRightIcon, showMetadata ? style.iconShow : style.iconClose)}
@@ -114,7 +117,13 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
           {isDetailLoading
             ? <Loading type='app' />
             : <div className={`box-border h-full w-full overflow-y-scroll ${embedding ? 'py-12 px-16' : 'pb-[30px] pt-3 px-6'}`}>
-              {embedding ? <Embedding detail={documentDetail} /> : <Completed />}
+              {embedding
+                ? <Embedding detail={documentDetail} detailUpdate={detailMutate} />
+                : <Completed
+                  showNewSegmentModal={showNewSegmentModal}
+                  onNewSegmentModalChange={setShowNewSegmentModal}
+                />
+              }
             </div>
           }
           {showMetadata && <Metadata

web/app/components/datasets/documents/detail/new-segment-modal.tsx

@@ -0,0 +1,140 @@
+import { memo, useState } from 'react'
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { useParams } from 'next/navigation'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common'
+import { Hash02, XClose } from '@/app/components/base/icons/src/vender/line/general'
+import { ToastContext } from '@/app/components/base/toast'
+import type { SegmentUpdator } from '@/models/datasets'
+import { addSegment } from '@/service/datasets'
+
+type NewSegmentModalProps = {
+  isShow: boolean
+  onCancel: () => void
+  docForm: string
+  onSave: () => void
+}
+
+const NewSegmentModal: FC<NewSegmentModalProps> = memo(({
+  isShow,
+  onCancel,
+  docForm,
+  onSave,
+}) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const [question, setQuestion] = useState('')
+  const [answer, setAnswer] = useState('')
+  const { datasetId, documentId } = useParams()
+
+  const handleCancel = () => {
+    setQuestion('')
+    setAnswer('')
+    onCancel()
+  }
+
+  const handleSave = async () => {
+    const params: SegmentUpdator = { content: '' }
+    if (docForm === 'qa_model') {
+      if (!question.trim())
+        return notify({ type: 'error', message: t('datasetDocuments.segment.questionEmpty') })
+      if (!answer.trim())
+        return notify({ type: 'error', message: t('datasetDocuments.segment.answerEmpty') })
+
+      params.content = question
+      params.answer = answer
+    }
+    else {
+      if (!question.trim())
+        return notify({ type: 'error', message: t('datasetDocuments.segment.contentEmpty') })
+
+      params.content = question
+    }
+
+    await addSegment({ datasetId, documentId, body: params })
+    notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+    handleCancel()
+    onSave()
+  }
+
+  const renderContent = () => {
+    if (docForm === 'qa_model') {
+      return (
+        <>
+          <div className='mb-1 text-xs font-medium text-gray-500'>QUESTION</div>
+          <AutoHeightTextarea
+            outerClassName='mb-4'
+            className='leading-6 text-md text-gray-800'
+            value={question}
+            placeholder={t('datasetDocuments.segment.questionPlaceholder') || ''}
+            onChange={e => setQuestion(e.target.value)}
+            autoFocus
+          />
+          <div className='mb-1 text-xs font-medium text-gray-500'>ANSWER</div>
+          <AutoHeightTextarea
+            outerClassName='mb-4'
+            className='leading-6 text-md text-gray-800'
+            value={answer}
+            placeholder={t('datasetDocuments.segment.answerPlaceholder') || ''}
+            onChange={e => setAnswer(e.target.value)}
+          />
+        </>
+      )
+    }
+
+    return (
+      <AutoHeightTextarea
+        className='leading-6 text-md text-gray-800'
+        value={question}
+        placeholder={t('datasetDocuments.segment.contentPlaceholder') || ''}
+        onChange={e => setQuestion(e.target.value)}
+        autoFocus
+      />
+    )
+  }
+
+  return (
+    <Modal isShow={isShow} onClose={() => {}} className='pt-8 px-8 pb-6 !max-w-[640px] !rounded-xl'>
+      <div className={'flex flex-col relative'}>
+        <div className='absolute right-0 -top-0.5 flex items-center h-6'>
+          <div className='flex justify-center items-center w-6 h-6 cursor-pointer' onClick={handleCancel}>
+            <XClose className='w-4 h-4 text-gray-500' />
+          </div>
+        </div>
+        <div className='mb-[14px]'>
+          <span className='inline-flex items-center px-1.5 h-5 border border-gray-200 rounded-md'>
+            <Hash02 className='mr-0.5 w-3 h-3 text-gray-400' />
+            <span className='text-[11px] font-medium text-gray-500 italic'>
+              {
+                docForm === 'qa_model'
+                  ? t('datasetDocuments.segment.newQaSegment')
+                  : t('datasetDocuments.segment.newTextSegment')
+              }
+            </span>
+          </span>
+        </div>
+        <div className='mb-4 py-1.5 h-[420px] overflow-auto'>{renderContent()}</div>
+        <div className='mb-2 text-xs font-medium text-gray-500'>{t('datasetDocuments.segment.keywords')}</div>
+        <div className='mb-8'></div>
+        <div className='flex justify-end'>
+          <Button
+            className='mr-2 !h-9 !px-4 !py-2 text-sm font-medium text-gray-700 !rounded-lg'
+            onClick={handleCancel}>
+            {t('common.operation.cancel')}
+          </Button>
+          <Button
+            type='primary'
+            className='!h-9 !px-4 !py-2 text-sm font-medium !rounded-lg'
+            onClick={handleSave}>
+            {t('common.operation.save')}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+})
+
+export default NewSegmentModal

web/app/components/datasets/documents/list.tsx

@@ -27,6 +27,7 @@ import NotionIcon from '@/app/components/base/notion-icon'
 import ProgressBar from '@/app/components/base/progress-bar'
 import { DataSourceType, type DocumentDisplayStatus, type SimpleDocumentDetail } from '@/models/datasets'
 import type { CommonResponse } from '@/models/common'
+import { FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
 
 export const SettingsIcon: FC<{ className?: string }> = ({ className }) => {
   return <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
@@ -94,12 +95,14 @@ export const OperationAction: FC<{
     archived: boolean
     id: string
     data_source_type: string
+    doc_form: string
   }
   datasetId: string
   onUpdate: (operationName?: string) => void
   scene?: 'list' | 'detail'
   className?: string
-}> = ({ datasetId, detail, onUpdate, scene = 'list', className = '' }) => {
+  showNewSegmentModal?: () => void
+}> = ({ datasetId, detail, onUpdate, scene = 'list', className = '', showNewSegmentModal }) => {
   const { id, enabled = false, archived = false, data_source_type } = detail || {}
   const [showModal, setShowModal] = useState(false)
   const { notify } = useContext(ToastContext)
@@ -185,6 +188,14 @@ export const OperationAction: FC<{
                 <SettingsIcon />
                 <span className={s.actionName}>{t('datasetDocuments.list.action.settings')}</span>
               </div>
+              {
+                !isListScene && (
+                  <div className={s.actionItem} onClick={showNewSegmentModal}>
+                    <FilePlus02 className='w-4 h-4 text-gray-500' />
+                    <span className={s.actionName}>{t('datasetDocuments.list.action.add')}</span>
+                  </div>
+                )
+              }
               {
                 data_source_type === 'notion_import' && (
                   <div className={s.actionItem} onClick={() => onOperate('sync')}>
@@ -339,7 +350,7 @@ const DocumentList: FC<IDocumentListProps> = ({ documents = [], datasetId, onUpd
               <td>
                 <OperationAction
                   datasetId={datasetId}
-                  detail={pick(doc, ['enabled', 'archived', 'id', 'data_source_type'])}
+                  detail={pick(doc, ['enabled', 'archived', 'id', 'data_source_type', 'doc_form'])}
                   onUpdate={onUpdate}
                 />
               </td>

web/app/components/datasets/hit-testing/hit-detail.tsx

@@ -1,11 +1,12 @@
-import React, { FC } from "react";
-import cn from "classnames";
-import { SegmentDetailModel } from "@/models/datasets";
-import { useTranslation } from "react-i18next";
-import Divider from "@/app/components/base/divider";
-import { SegmentIndexTag } from "../documents/detail/completed";
-import s from "../documents/detail/completed/style.module.css";
-import ReactECharts from "echarts-for-react";
+import type { FC } from 'react'
+import React from 'react'
+import cn from 'classnames'
+import { useTranslation } from 'react-i18next'
+import ReactECharts from 'echarts-for-react'
+import { SegmentIndexTag } from '../documents/detail/completed'
+import s from '../documents/detail/completed/style.module.css'
+import type { SegmentDetailModel } from '@/models/datasets'
+import Divider from '@/app/components/base/divider'
 
 type IScatterChartProps = {
   data: Array<number[]>
@@ -19,8 +20,8 @@ const ScatterChart: FC<IScatterChartProps> = ({ data, curr }) => {
     tooltip: {
       trigger: 'item',
       axisPointer: {
-        type: 'cross'
-      }
+        type: 'cross',
+      },
     },
     series: [
       {
@@ -32,49 +33,64 @@ const ScatterChart: FC<IScatterChartProps> = ({ data, curr }) => {
         type: 'scatter',
         symbolSize: 5,
         data,
-      }
-    ]
-  };
+      },
+    ],
+  }
   return (
     <ReactECharts option={option} style={{ height: 380, width: 430 }} />
   )
 }
 
 type IHitDetailProps = {
-  segInfo?: Partial<SegmentDetailModel> & { id: string };
-  vectorInfo?: { curr: Array<number[]>; points: Array<number[]> };
-};
+  segInfo?: Partial<SegmentDetailModel> & { id: string }
+  vectorInfo?: { curr: Array<number[]>; points: Array<number[]> }
+}
 
 const HitDetail: FC<IHitDetailProps> = ({ segInfo, vectorInfo }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation()
+
+  const renderContent = () => {
+    if (segInfo?.answer) {
+      return (
+        <>
+          <div className='mt-2 mb-1 text-xs font-medium text-gray-500'>QUESTION</div>
+          <div className='mb-4 text-md text-gray-800'>{segInfo.content}</div>
+          <div className='mb-1 text-xs font-medium text-gray-500'>ANSWER</div>
+          <div className='text-md text-gray-800'>{segInfo.answer}</div>
+        </>
+      )
+    }
+
+    return segInfo?.content
+  }
 
   return (
-    <div className={"flex flex-row"}>
+    <div className={'flex flex-row'}>
       <div className="flex-1 bg-gray-25 p-6">
         <div className="flex items-center">
           <SegmentIndexTag
-            positionId={segInfo?.position || ""}
+            positionId={segInfo?.position || ''}
             className="w-fit mr-6"
           />
           <div className={cn(s.commonIcon, s.typeSquareIcon)} />
-          <span className={cn("mr-6", s.numberInfo)}>
-            {segInfo?.word_count} {t("datasetDocuments.segment.characters")}
+          <span className={cn('mr-6', s.numberInfo)}>
+            {segInfo?.word_count} {t('datasetDocuments.segment.characters')}
           </span>
           <div className={cn(s.commonIcon, s.targetIcon)} />
           <span className={s.numberInfo}>
-            {segInfo?.hit_count} {t("datasetDocuments.segment.hitCount")}
+            {segInfo?.hit_count} {t('datasetDocuments.segment.hitCount')}
           </span>
         </div>
         <Divider />
-        <div className={s.segModalContent}>{segInfo?.content}</div>
+        <div className={s.segModalContent}>{renderContent()}</div>
         <div className={s.keywordTitle}>
-          {t("datasetDocuments.segment.keywords")}
+          {t('datasetDocuments.segment.keywords')}
         </div>
         <div className={s.keywordWrapper}>
           {!segInfo?.keywords?.length
-            ? "-"
+            ? '-'
             : segInfo?.keywords?.map((word: any) => {
-              return <div className={s.keyword}>{word}</div>;
+              return <div className={s.keyword}>{word}</div>
             })}
         </div>
       </div>
@@ -82,18 +98,18 @@ const HitDetail: FC<IHitDetailProps> = ({ segInfo, vectorInfo }) => {
         <div className="flex items-center">
           <div className={cn(s.commonIcon, s.bezierCurveIcon)} />
           <span className={s.numberInfo}>
-            {t("datasetDocuments.segment.vectorHash")}
+            {t('datasetDocuments.segment.vectorHash')}
           </span>
         </div>
         <div
-          className={cn(s.numberInfo, "w-[400px] truncate text-gray-700 mt-1")}
+          className={cn(s.numberInfo, 'w-[400px] truncate text-gray-700 mt-1')}
         >
           {segInfo?.index_node_hash}
         </div>
         <ScatterChart data={vectorInfo?.points || []} curr={vectorInfo?.curr || []} />
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default HitDetail;
+export default HitDetail