Merge branch 'feat/parent-child-retrieval' into deploy/dev

langgenius · Dec 24, 2024 · e814597 · e814597
2 parents 2096fb0 + 785eda3
commit e814597
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 48 deletions.
diff --git a/web/app/components/base/input-number/index.tsx b/web/app/components/base/input-number/index.tsx
@@ -66,8 +66,8 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
           return
         onChange(parsed)
       }}
+      unit={unit}
     />
-    {unit && <div className='flex items-center bg-components-input-bg-normal text-[13px] text-text-placeholder pr-2'>{unit}</div>}
     <div className='flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs'>
       <button onClick={inc} className={classNames(
         size === 'sm' ? 'pt-1' : 'pt-1.5',

diff --git a/web/app/components/datasets/chunk.tsx b/web/app/components/datasets/chunk.tsx
@@ -41,13 +41,13 @@ export type QAPreviewProps = {
 
 export const QAPreview: FC<QAPreviewProps> = (props) => {
   const { qa } = props
-  return <div className='flex gap-y-2'>
-    <div className='flex gap-x-1 items-start'>
-      <label className='text-text-tertiary system-sm-medium'>Q</label>
+  return <div className='flex flex-col gap-y-2'>
+    <div className='flex gap-x-1'>
+      <label className='text-text-tertiary text-[13px] font-medium leading-[20px] shrink-0'>Q</label>
       <p className='text-text-secondary body-md-regular'>{qa.question}</p>
     </div>
-    <div className='flex gap-x-1 items-start'>
-      <label className='text-text-tertiary system-sm-medium'>A</label>
+    <div className='flex gap-x-1'>
+      <label className='text-text-tertiary text-[13px] font-medium leading-[20px] shrink-0'>A</label>
       <p className='text-text-secondary body-md-regular'>{qa.answer}</p>
     </div>
   </div>

diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
@@ -658,31 +658,32 @@ const StepTwo = ({
                     </div>
                   ))}
                   {IS_CE_EDITION && <>
-                    <div className='flex items-center'>
-                      <Checkbox
-                        checked={docForm === ChunkingMode.qa}
-                        onCheck={() => {
-                          if (docForm === ChunkingMode.qa)
-                            handleChangeDocform(ChunkingMode.text)
-                          else
-                            handleChangeDocform(ChunkingMode.qa)
-                        }}
-                      />
-                      <div className='flex items-center gap-1'>
+                    <Divider type='horizontal' className='my-4 bg-divider-subtle' />
+                    <div className='flex items-center py-0.5'>
+                      <div className='flex items-center' onClick={() => {
+                        if (currentDataset?.doc_form)
+                          return
+                        if (docForm === ChunkingMode.qa)
+                          handleChangeDocform(ChunkingMode.text)
+                        else
+                          handleChangeDocform(ChunkingMode.qa)
+                      }}>
+                        <Checkbox
+                          checked={currentDocForm === ChunkingMode.qa}
+                          disabled={!!currentDataset?.doc_form}
+                        />
                         <label className="ml-2 system-sm-regular cursor-pointer text-text-secondary">
                           {t('datasetCreation.stepTwo.useQALanguage')}
                         </label>
-                        <div className='z-50 relative'>
-                          <LanguageSelect
-                            currentLanguage={docLanguage || locale}
-                            onSelect={setDocLanguage}
-                            disabled={isLanguageSelectDisabled}
-                          />
-                        </div>
-                        <Tooltip popupContent={t('datasetCreation.stepTwo.QATip')} />
                       </div>
+                      <LanguageSelect
+                        currentLanguage={docLanguage || locale}
+                        onSelect={setDocLanguage}
+                        disabled={currentDocForm !== ChunkingMode.qa}
+                      />
+                      <Tooltip popupContent={t('datasetCreation.stepTwo.QATip')} />
                     </div>
-                    {docForm === ChunkingMode.qa && (
+                    {currentDocForm === ChunkingMode.qa && (
                       <div
                         style={{
                           background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.1) 0%, rgba(255, 255, 255, 0.00) 100%)',
@@ -924,7 +925,7 @@ const StepTwo = ({
               </PortalToFollowElem>
             </>)}
         </div>
-        {indexType === IndexingType.QUALIFIED && (
+        {!hasSetIndexType && indexType === IndexingType.QUALIFIED && (
           <div className='mt-2 h-10 p-2 flex items-center gap-x-0.5 rounded-xl border-[0.5px] border-components-panel-border overflow-hidden bg-components-panel-bg-blur backdrop-blur-[5px] shadow-xs'>
             <div className='absolute top-0 left-0 right-0 bottom-0 bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)] opacity-40'></div>
             <div className='p-1'>
@@ -1088,8 +1089,14 @@ const StepTwo = ({
           mainClassName='space-y-6'
         >
           {currentDocForm === ChunkingMode.qa && estimate?.qa_preview && (
-            estimate?.qa_preview.map(item => (
-              <QAPreview key={item.question} qa={item} />
+            estimate?.qa_preview.map((item, index) => (
+              <ChunkContainer
+                key={item.question}
+                label={`Chunk-${index + 1}`}
+                characterCount={item.question.length + item.answer.length}
+              >
+                <QAPreview qa={item} />
+              </ChunkContainer>
             ))
           )}
           {currentDocForm === ChunkingMode.text && estimate?.preview && (

diff --git a/web/app/components/datasets/create/step-two/language-select/index.tsx b/web/app/components/datasets/create/step-two/language-select/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import { RiArrowDownSLine } from '@remixicon/react'
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 import Popover from '@/app/components/base/popover'
 import { languages } from '@/i18n/language'
@@ -24,24 +24,38 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
       disabled={disabled}
       popupClassName='z-20'
       htmlContent={
-        <div className='w-full py-1'>
+        <div className='w-full p-1'>
           {languages.filter(language => language.supported).map(({ prompt_name }) => (
             <div
               key={prompt_name}
-              className='py-2 px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer text-text-secondary text-sm'
-              onClick={() => onSelect(prompt_name)}>{prompt_name}
+              className='w-full py-2 px-3 inline-flex items-center justify-between hover:bg-state-base-hover rounded-lg cursor-pointer'
+              onClick={() => onSelect(prompt_name)}
+            >
+              <span className='text-text-secondary system-sm-medium'>{prompt_name}</span>
+              {(currentLanguage === prompt_name) && <RiCheckLine className='size-4 text-text-accent' />}
             </div>
           ))}
         </div>
       }
       btnElement={
-        <div className='inline-flex items-center'>
-          <span className='pr-[2px] text-xs leading-[18px] font-medium'>{currentLanguage}</span>
-          <RiArrowDownSLine className='w-3 h-3 opacity-60' />
+        <div className={cn('inline-flex items-center gap-x-[1px]', disabled && 'cursor-not-allowed')}>
+          <span className={cn(
+            'px-[3px] system-xs-semibold text-components-button-tertiary-text',
+            disabled ? 'text-components-button-tertiary-text-disabled' : '',
+          )}>
+            {currentLanguage}
+          </span>
+          <RiArrowDownSLine className={cn(
+            'size-3.5 text-components-button-tertiary-text',
+            disabled ? 'text-components-button-tertiary-text-disabled' : '',
+          )} />
         </div>
       }
-      btnClassName={() => cn('!border-0 !px-0 !py-0 !bg-inherit !hover:bg-inherit text-components-button-tertiary-text')}
-      className='!w-[120px] h-fit !z-20 !translate-x-0 !left-[-16px]'
+      btnClassName={() => cn(
+        '!border-0 rounded-md !px-1.5 !py-1 !mx-1 !bg-components-button-tertiary-bg !hover:bg-components-button-tertiary-bg',
+        disabled ? 'bg-components-button-tertiary-bg-disabled' : '',
+      )}
+      className='!w-[140px] h-fit !z-20 !translate-x-0 !left-1'
     />
   )
 }

diff --git a/web/app/components/datasets/create/step-two/option-card.tsx b/web/app/components/datasets/create/step-two/option-card.tsx
@@ -59,7 +59,7 @@ export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
   const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, noHighlight, disabled, ...rest } = props
   return <div
     className={classNames(
-      'rounded-xl bg-components-option-card-option-bg shadow-xs overflow-hidden',
+      'rounded-xl bg-components-option-card-option-bg shadow-xs',
       (isActive && !noHighlight)
         ? 'border-[1.5px] border-components-option-card-option-selected-border'
         : 'border border-components-option-card-option-border',
@@ -85,7 +85,7 @@ export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
       effectImg={effectImg}
     />
     {/** Body */}
-    {isActive && (children || actions) && <div className='py-3 px-4 bg-components-panel-bg'>
+    {isActive && (children || actions) && <div className='py-3 px-4 bg-components-panel-bg rounded-b-xl'>
       {children}
       {actions && <div className='flex gap-2 mt-4'>
         {actions}

diff --git a/web/app/components/datasets/documents/detail/completed/segment-card.tsx b/web/app/components/datasets/documents/detail/completed/segment-card.tsx
@@ -104,7 +104,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
       return (
         <>
           <div className='flex gap-x-1'>
-            <div className='w-4 mr-2 text-[13px] font-medium leading-[20px] text-text-tertiary'>Q</div>
+            <div className='w-4 text-[13px] font-medium leading-[20px] text-text-tertiary shrink-0'>Q</div>
             <div
               className={cn('text-text-secondary body-md-regular',
                 isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
@@ -113,7 +113,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
             </div>
           </div>
           <div className='flex gap-x-1'>
-            <div className='w-4 mr-2 text-[13px] font-medium leading-[20px] text-text-tertiary'>A</div>
+            <div className='w-4 text-[13px] font-medium leading-[20px] text-text-tertiary shrink-0'>A</div>
             <div className={cn('text-text-secondary body-md-regular',
               isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
             )}>

diff --git a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
@@ -29,17 +29,17 @@ const ChunkDetailModal: FC<Props> = ({
   const { position, content, keywords, document } = segment
   const isParentChildRetrieval = !!(child_chunks && child_chunks.length > 0)
   const extension = document.name.split('.').slice(-1)[0] as FileAppearanceTypeEnum
-  const maxHeighClassName = 'max-h-[min(752px,_80vh)] overflow-y-auto'
+  const heighClassName = isParentChildRetrieval ? 'h-[min(627px,_80vh)] overflow-y-auto' : 'h-[min(539px,_80vh)] overflow-y-auto'
   return (
     <Modal
       title={t(`${i18nPrefix}.chunkDetail`)}
       isShow
       closable
       onClose={onHide}
-      className={cn(isParentChildRetrieval ? '!min-w-[1200px]' : '!min-w-[720px]')}
+      className={cn(isParentChildRetrieval ? '!min-w-[1200px]' : '!min-w-[800px]')}
     >
       <div className='mt-4 flex'>
-        <div className='w-full'>
+        <div className={cn('flex-1', isParentChildRetrieval && 'pr-6')}>
           {/* Meta info */}
           <div className='flex justify-between items-center'>
             <div className='grow flex items-center space-x-2'>
@@ -56,7 +56,7 @@ const ChunkDetailModal: FC<Props> = ({
             </div>
             <Score value={score} />
           </div>
-          <div className={cn('mt-2 body-md-regular text-text-secondary', maxHeighClassName)}>
+          <div className={cn('mt-2 body-md-regular text-text-secondary', heighClassName)}>
             {content}
           </div>
           {!isParentChildRetrieval && keywords && keywords.length > 0 && (
@@ -72,9 +72,9 @@ const ChunkDetailModal: FC<Props> = ({
         </div>
 
         {isParentChildRetrieval && (
-          <div className='shrink-0 w-[552px] px-6'>
+          <div className='flex-1 pl-6 pb-6'>
             <div className='system-xs-semibold-uppercase text-text-secondary'>{t(`${i18nPrefix}.hitChunks`, { num: child_chunks.length })}</div>
-            <div className={cn('mt-1 space-y-2', maxHeighClassName)}>
+            <div className={cn('mt-1 space-y-2', heighClassName)}>
               {child_chunks.map(item => (
                 <ChildChunksItem key={item.id} payload={item} isShowAll />
               ))}