From b0a4819ec1f1632e9df1c3098948ff3a0ab6d4de Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Fri, 6 Dec 2024 18:20:59 +0800
Subject: [PATCH] feat: enhance translations and UI components for segment
 management

---
 .../documents/detail/completed/index.tsx      |   8 +-
 .../detail/completed/segment-card.tsx         |   2 +-
 .../detail/completed/segment-detail.tsx       |   8 +-
 .../detail/completed/segment-list.tsx         |   2 +-
 .../documents/detail/new-segment-modal.tsx    | 153 +++++++++++++-----
 web/i18n/en-US/dataset-documents.ts           |   5 +-
 web/i18n/zh-Hans/dataset-documents.ts         |   1 +
 7 files changed, 127 insertions(+), 52 deletions(-)

diff --git a/web/app/components/datasets/documents/detail/completed/index.tsx b/web/app/components/datasets/documents/detail/completed/index.tsx
index a117367468..713b421398 100644
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -48,7 +48,7 @@ export const useSegmentListContext = (selector: (value: SegmentListContextValue)
   return useContextSelector(SegmentListContext, selector)
 }
 
-export const SegmentIndexTag: FC<{ positionId: string | number; className?: string }> = ({ positionId, className }) => {
+export const SegmentIndexTag: FC<{ positionId?: string | number; label?: string; className?: string }> = ({ positionId, label, className }) => {
   const localPositionId = useMemo(() => {
     const positionIdStr = String(positionId)
     if (positionIdStr.length >= 3)
@@ -59,7 +59,7 @@ export const SegmentIndexTag: FC<{ positionId: string | number; className?: stri
     <div className={cn('flex items-center', className)}>
       <Chunk className='w-3 h-3 p-[1px] text-text-tertiary mr-0.5' />
       <div className='text-text-tertiary system-xs-medium'>
-        {localPositionId}
+        {label || localPositionId}
       </div>
     </div>
   )
@@ -305,6 +305,7 @@ const Completed: FC<ICompletedProps> = ({
       fullScreen,
       toggleFullScreen,
     }}>
+      {/* Menu Bar */}
       {!isFullDocMode && <div className={s.docSearchWrapper}>
         <Checkbox
           className='shrink-0'
@@ -334,6 +335,7 @@ const Completed: FC<ICompletedProps> = ({
         <Divider type='vertical' className='h-3.5 mx-3' />
         <DisplayToggle />
       </div>}
+      {/* Segment list */}
       {
         isFullDocMode
           ? <div className='h-full flex flex-col'>
@@ -378,12 +380,14 @@ const Completed: FC<ICompletedProps> = ({
           onCancel={onCloseDrawer}
         />
       </Drawer>
+      {/* Create New Segment */}
       <NewSegmentModal
         isShow={showNewSegmentModal}
         docForm={docForm}
         onCancel={() => onNewSegmentModalChange(false)}
         onSave={resetList}
       />
+      {/* Batch Action Buttons */}
       {selectedSegmentIds.length > 0
       && <BatchAction
         className='absolute left-0 bottom-16 z-20'
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card.tsx b/web/app/components/datasets/documents/detail/completed/segment-card.tsx
index 48d13e0d11..4a2e9a95f1 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card.tsx
@@ -170,7 +170,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
 
   return (
     <div
-      className={cn('px-3 rounded-xl group/card', isFullDocMode ? '' : 'pt-2.5 pb-2 hover:bg-dataset-chunk-detail-card-hover-bg', className)}
+      className={cn('w-full px-3 rounded-xl group/card', isFullDocMode ? '' : 'pt-2.5 pb-2 hover:bg-dataset-chunk-detail-card-hover-bg', className)}
       onClick={handleClickCard}
     >
       <div className='h-5 relative flex items-center justify-between'>
diff --git a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
index 80c7c0077d..03d0b499d5 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
@@ -137,7 +137,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
 
   const renderKeywords = () => {
     return (
-      <div className={classNames('flex flex-col', fullScreen ? 'max-w-[320px]' : '')}>
+      <div className={classNames('flex flex-col', fullScreen ? 'w-1/5' : '')}>
         <div className='text-text-tertiary system-xs-medium-uppercase'>{t('datasetDocuments.segment.keywords')}</div>
         <div className='text-text-tertiary w-full max-h-[200px] overflow-auto flex flex-wrap gap-1'>
           {!segInfo?.keywords?.length
@@ -162,7 +162,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
         <div className='flex flex-col'>
           <div className='text-text-primary system-xl-semibold'>{isEditMode ? 'Edit Chunk' : 'Chunk Detail'}</div>
           <div className='flex items-center gap-x-2'>
-            <SegmentIndexTag positionId={segInfo?.position || ''} className='w-fit' />
+            <SegmentIndexTag positionId={segInfo?.position || ''} />
             <span className='text-text-quaternary system-xs-medium'>·</span>
             <span className='text-text-tertiary system-xs-medium'>{formatNumber(segInfo?.word_count as number)} {t('datasetDocuments.segment.characters')}</span>
           </div>
@@ -182,8 +182,8 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
           </div>
         </div>
       </div>
-      <div className={classNames('flex grow overflow-hidden', fullScreen ? 'flex-row px-6 pt-6 gap-x-8 mx-auto' : 'flex-col gap-y-1 py-3 px-4')}>
-        <div className={classNames('grow break-all overflow-y-auto whitespace-pre-line', fullScreen ? 'max-w-[800px]' : '')}>
+      <div className={classNames('flex grow overflow-hidden', fullScreen ? 'w-full flex-row justify-center px-6 pt-6 gap-x-8 mx-auto' : 'flex-col gap-y-1 py-3 px-4')}>
+        <div className={classNames('break-all overflow-y-auto whitespace-pre-line', fullScreen ? 'w-1/2' : 'grow')}>
           {renderContent()}
         </div>
         {renderKeywords()}
diff --git a/web/app/components/datasets/documents/detail/completed/segment-list.tsx b/web/app/components/datasets/documents/detail/completed/segment-list.tsx
index e305841191..485f70ea8e 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-list.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-list.tsx
@@ -45,7 +45,7 @@ const SegmentList: FC<ISegmentListProps> = ({
                 checked={selectedSegmentIds.includes(segItem.id)}
                 onCheck={() => onSelected(segItem.id)}
               />
-              <div>
+              <div className='grow'>
                 <SegmentCard
                   key={`${segItem.id}-card`}
                   detail={segItem}
diff --git a/web/app/components/datasets/documents/detail/new-segment-modal.tsx b/web/app/components/datasets/documents/detail/new-segment-modal.tsx
index dae9cf19fb..12b58b8658 100644
--- a/web/app/components/datasets/documents/detail/new-segment-modal.tsx
+++ b/web/app/components/datasets/documents/detail/new-segment-modal.tsx
@@ -3,15 +3,20 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useParams } from 'next/navigation'
-import { RiCloseLine } from '@remixicon/react'
-import Modal from '@/app/components/base/modal'
+import { RiCloseLine, RiExpandDiagonalLine } from '@remixicon/react'
+import { useKeyPress } from 'ahooks'
+import { SegmentIndexTag, useSegmentListContext } from './completed'
+import Drawer from '@/app/components/base/drawer'
 import Button from '@/app/components/base/button'
 import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common'
-import { Hash02 } from '@/app/components/base/icons/src/vender/line/general'
 import { ToastContext } from '@/app/components/base/toast'
 import type { SegmentUpdater } from '@/models/datasets'
 import { addSegment } from '@/service/datasets'
 import TagInput from '@/app/components/base/tag-input'
+import classNames from '@/utils/classnames'
+import { formatNumber } from '@/utils/format'
+import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
+import Divider from '@/app/components/base/divider'
 
 type NewSegmentModalProps = {
   isShow: boolean
@@ -30,14 +35,15 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
   const { notify } = useContext(ToastContext)
   const [question, setQuestion] = useState('')
   const [answer, setAnswer] = useState('')
-  const { datasetId, documentId } = useParams()
+  const { datasetId, documentId } = useParams<{ datasetId: string; documentId: string }>()
   const [keywords, setKeywords] = useState<string[]>([])
   const [loading, setLoading] = useState(false)
+  const [fullScreen, toggleFullScreen] = useSegmentListContext(s => [s.fullScreen, s.toggleFullScreen])
 
   const handleCancel = () => {
+    onCancel()
     setQuestion('')
     setAnswer('')
-    onCancel()
     setKeywords([])
   }
 
@@ -74,6 +80,17 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
     }
   }
 
+  useKeyPress(['esc'], (e) => {
+    e.preventDefault()
+    handleCancel()
+  })
+
+  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.s`, (e) => {
+    e.preventDefault()
+    handleSave()
+  }
+  , { exactMatch: true, useCapture: true })
+
   const renderContent = () => {
     if (docForm === 'qa_model') {
       return (
@@ -101,7 +118,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
 
     return (
       <AutoHeightTextarea
-        className='leading-6 text-md text-gray-800'
+        className='body-md-regular text-text-secondary tracking-[-0.07px] caret-[#295EFF]'
         value={question}
         placeholder={t('datasetDocuments.segment.contentPlaceholder') || ''}
         onChange={e => setQuestion(e.target.value)}
@@ -110,46 +127,98 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
     )
   }
 
-  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}>
-            <RiCloseLine className='w-4 h-4 text-gray-500' />
+  const renderActionButtons = () => {
+    return (
+      <div className='flex items-center gap-x-2'>
+        <Button
+          onClick={handleCancel}
+        >
+          <div className='flex items-center gap-x-1'>
+            <span className='text-components-button-secondary-text system-sm-medium'>{t('common.operation.cancel')}</span>
+            <span className='px-[1px] bg-components-kbd-bg-gray rounded-[4px] text-text-tertiary system-kbd'>ESC</span>
           </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='text-xs font-medium text-gray-500'>{t('datasetDocuments.segment.keywords')}</div>
-        <div className='mb-8'>
+        </Button>
+        <Button
+          variant='primary'
+          onClick={handleSave}
+          disabled={loading}
+        >
+          <div className='flex items-center gap-x-1'>
+            <span className='text-components-button-primary-text'>{t('common.operation.save')}</span>
+            <div className='flex items-center gap-x-0.5'>
+              <span className='w-4 h-4 bg-components-kbd-bg-white rounded-[4px] text-text-primary-on-surface system-kbd capitalize'>{getKeyboardKeyNameBySystem('ctrl')}</span>
+              <span className='w-4 h-4 bg-components-kbd-bg-white rounded-[4px] text-text-primary-on-surface system-kbd'>S</span>
+            </div>
+          </div>
+        </Button>
+      </div>
+    )
+  }
+
+  const renderKeywords = () => {
+    return (
+      <div className={classNames('flex flex-col', fullScreen ? 'w-1/5' : '')}>
+        <div className='text-text-tertiary system-xs-medium-uppercase'>{t('datasetDocuments.segment.keywords')}</div>
+        <div className='text-text-tertiary w-full max-h-[200px] overflow-auto flex flex-wrap gap-1'>
           <TagInput items={keywords} onChange={newKeywords => setKeywords(newKeywords)} />
         </div>
-        <div className='flex justify-end'>
-          <Button
-            onClick={handleCancel}>
-            {t('common.operation.cancel')}
-          </Button>
-          <Button
-            variant='primary'
-            onClick={handleSave}
-            disabled={loading}
-          >
-            {t('common.operation.save')}
-          </Button>
-        </div>
       </div>
-    </Modal>
+    )
+  }
+
+  return (
+    <Drawer
+      isOpen={isShow}
+      onClose={() => {}}
+      panelClassname={`!p-0 ${fullScreen
+        ? '!max-w-full !w-full'
+        : 'mt-16 mr-2 mb-2 !max-w-[560px] !w-[560px] border-[0.5px] border-components-panel-border rounded-xl'}`}
+      mask={false}
+      unmount
+      footer={null}
+    >
+      <div className={'flex flex-col h-full'}>
+        <div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
+          <div className='flex flex-col'>
+            <div className='text-text-primary system-xl-semibold'>{
+              docForm === 'qa_model'
+                ? t('datasetDocuments.segment.newQaSegment')
+                : t('datasetDocuments.segment.addChunk')
+            }</div>
+            <div className='flex items-center gap-x-2'>
+              <SegmentIndexTag label={'New Chunk'} />
+              <span className='text-text-quaternary system-xs-medium'>·</span>
+              <span className='text-text-tertiary system-xs-medium'>{formatNumber(question.length)} {t('datasetDocuments.segment.characters')}</span>
+            </div>
+          </div>
+          <div className='flex items-center'>
+            {fullScreen && (
+              <>
+                {renderActionButtons()}
+                <Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
+              </>
+            )}
+            <div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
+              <RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />
+            </div>
+            <div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={handleCancel}>
+              <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+            </div>
+          </div>
+        </div>
+        <div className={classNames('flex grow overflow-hidden', fullScreen ? 'w-full flex-row justify-center px-6 pt-6 gap-x-8' : 'flex-col gap-y-1 py-3 px-4')}>
+          <div className={classNames('break-all overflow-y-auto whitespace-pre-line', fullScreen ? 'w-1/2' : 'grow')}>
+            {renderContent()}
+          </div>
+          {renderKeywords()}
+        </div>
+        {!fullScreen && (
+          <div className='flex items-center justify-end p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
+            {renderActionButtons()}
+          </div>
+        )}
+      </div>
+    </Drawer>
   )
 }
 
diff --git a/web/i18n/en-US/dataset-documents.ts b/web/i18n/en-US/dataset-documents.ts
index df26449dc3..a0bcb5bba0 100644
--- a/web/i18n/en-US/dataset-documents.ts
+++ b/web/i18n/en-US/dataset-documents.ts
@@ -340,14 +340,15 @@ const translation = {
     characters: 'characters',
     hitCount: 'Retrieval count',
     vectorHash: 'Vector hash: ',
-    questionPlaceholder: 'add question here',
+    questionPlaceholder: 'Add question here',
     questionEmpty: 'Question can not be empty',
-    answerPlaceholder: 'add answer here',
+    answerPlaceholder: 'Add answer here',
     answerEmpty: 'Answer can not be empty',
     contentPlaceholder: 'Add content here',
     contentEmpty: 'Content can not be empty',
     newTextSegment: 'New Text Segment',
     newQaSegment: 'New Q&A Segment',
+    addChunk: 'Add Chunk',
     delete: 'Delete this chunk ?',
   },
 }
diff --git a/web/i18n/zh-Hans/dataset-documents.ts b/web/i18n/zh-Hans/dataset-documents.ts
index 35288c04d6..355c4bee7f 100644
--- a/web/i18n/zh-Hans/dataset-documents.ts
+++ b/web/i18n/zh-Hans/dataset-documents.ts
@@ -346,6 +346,7 @@ const translation = {
     contentEmpty: '内容不能为空',
     newTextSegment: '新文本分段',
     newQaSegment: '新问答分段',
+    addChunk: '新增分段',
     delete: '删除这个分段？',
   },
 }