feat: enhance translations and UI components for segment management

2024-12-06 18:20:59 +08:00 · 2024-12-06 18:20:59 +08:00 · b0a4819ec1
parent c9114d171e
commit b0a4819ec1
7 changed files with 127 additions and 52 deletions
--- 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'
--- 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'>
--- 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()}
--- 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}
--- 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>
  )
 }

--- 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 ?',
  },
 }
--- 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: '删除这个分段？',
  },
 }