mirror of https://github.com/langgenius/dify.git
feat: add child segment response type and enhance dataset components with improved translations and UI updates
This commit is contained in:
twwu
parent
734659c873
commit
1546859bae
|
|
@ -19,6 +19,7 @@ export type IDrawerProps = {
|
|||
onClose: () => void
|
||||
onCancel?: () => void
|
||||
onOk?: () => void
|
||||
unmount?: boolean
|
||||
}
|
||||
|
||||
export default function Drawer({
|
||||
|
|
@ -35,11 +36,12 @@ export default function Drawer({
|
|||
onClose,
|
||||
onCancel,
|
||||
onOk,
|
||||
unmount = false,
|
||||
}: IDrawerProps) {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<Dialog
|
||||
unmount={false}
|
||||
unmount={unmount}
|
||||
open={isOpen}
|
||||
onClose={() => !clickOutsideNotOpen && onClose()}
|
||||
className="fixed z-30 inset-0 overflow-y-auto"
|
||||
|
|
@ -49,7 +51,7 @@ export default function Drawer({
|
|||
<Dialog.Overlay
|
||||
className={cn('z-40 fixed inset-0', mask && 'bg-black bg-opacity-30')}
|
||||
/>
|
||||
<div className={cn('relative z-50 flex flex-col justify-between bg-white w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl', panelClassname)}>
|
||||
<div className={cn('relative z-50 flex flex-col justify-between bg-components-panel-bg w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl shadow-shadow-shadow-5', panelClassname)}>
|
||||
<>
|
||||
{title && <Dialog.Title
|
||||
as="h3"
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import type { ChangeEvent, FC, KeyboardEvent } from 'react'
|
|||
import { } from 'use-context-selector'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import AutosizeInput from 'react-18-input-autosize'
|
||||
import { RiAddLine, RiCloseLine } from '@remixicon/react'
|
||||
import cn from '@/utils/classnames'
|
||||
import { X } from '@/app/components/base/icons/src/vender/line/general'
|
||||
import { useToastContext } from '@/app/components/base/toast'
|
||||
|
||||
type TagInputProps = {
|
||||
|
|
@ -75,14 +75,14 @@ const TagInput: FC<TagInputProps> = ({
|
|||
(items || []).map((item, index) => (
|
||||
<div
|
||||
key={item}
|
||||
className={cn('flex items-center mr-1 mt-1 px-2 py-1 text-sm text-gray-700 border border-gray-200', isSpecialMode ? 'bg-white rounded-md' : 'rounded-lg')}>
|
||||
className={cn('flex items-center mr-1 mt-1 pl-1.5 pr-1 py-1 system-xs-regular text-text-secondary border border-divider-deep bg-components-badge-white-to-dark rounded-md')}
|
||||
>
|
||||
{item}
|
||||
{
|
||||
!disableRemove && (
|
||||
<X
|
||||
className='ml-0.5 w-3 h-3 text-gray-500 cursor-pointer'
|
||||
onClick={() => handleRemove(index)}
|
||||
/>
|
||||
<div className='flex items-center justify-center w-4 h-4 cursor-pointer' onClick={() => handleRemove(index)}>
|
||||
<RiCloseLine className='ml-0.5 w-3.5 h-3.5 text-text-tertiary' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
|
@ -90,24 +90,27 @@ const TagInput: FC<TagInputProps> = ({
|
|||
}
|
||||
{
|
||||
!disableAdd && (
|
||||
<AutosizeInput
|
||||
inputClassName={cn('outline-none appearance-none placeholder:text-gray-300 caret-primary-600 hover:placeholder:text-gray-400', isSpecialMode ? 'bg-transparent' : '')}
|
||||
className={cn(
|
||||
!isInWorkflow && 'max-w-[300px]',
|
||||
isInWorkflow && 'max-w-[146px]',
|
||||
`
|
||||
mt-1 py-1 rounded-lg border border-transparent text-sm overflow-hidden
|
||||
${focused && 'px-2 border !border-dashed !border-gray-200'}
|
||||
`)}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={handleBlur}
|
||||
value={value}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => {
|
||||
setValue(e.target.value)
|
||||
}}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={t(placeholder || (isSpecialMode ? 'common.model.params.stop_sequencesPlaceholder' : 'datasetDocuments.segment.addKeyWord'))}
|
||||
/>
|
||||
<div className={cn('flex items-center gap-x-0.5 mt-1 group/tag-add', !isSpecialMode ? 'px-1.5 rounded-md border border-dashed border-divider-deep' : '')}>
|
||||
{!isSpecialMode && !focused && <RiAddLine className='w-3.5 h-3.5 text-text-placeholder group-hover/tag-add:text-text-secondary' />}
|
||||
<AutosizeInput
|
||||
inputClassName={cn('outline-none appearance-none placeholder:text-text-placeholder caret-[#295EFF] group-hover/tag-add:placeholder:text-text-secondary', isSpecialMode ? 'bg-transparent' : '')}
|
||||
className={cn(
|
||||
!isInWorkflow && 'max-w-[300px]',
|
||||
isInWorkflow && 'max-w-[146px]',
|
||||
`
|
||||
py-1 rounded-md overflow-hidden system-xs-regular
|
||||
${focused && isSpecialMode && 'px-1.5 border border-dashed border-divider-deep'}
|
||||
`)}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={handleBlur}
|
||||
value={value}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => {
|
||||
setValue(e.target.value)
|
||||
}}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={t(placeholder || (isSpecialMode ? 'common.model.params.stop_sequencesPlaceholder' : 'datasetDocuments.segment.addKeyWord'))}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,33 +11,37 @@ import SegmentList from './segment-list'
|
|||
import DisplayToggle from './display-toggle'
|
||||
import BatchAction from './batch-action'
|
||||
import SegmentDetail from './segment-detail'
|
||||
import { mockChildSegments, mockSegments } from './mock-data'
|
||||
import { mockChildSegments } from './mock-data'
|
||||
import SegmentCard from './segment-card'
|
||||
import ChildSegmentList from './child-segment-list'
|
||||
import cn from '@/utils/classnames'
|
||||
import { formatNumber } from '@/utils/format'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import Drawer from '@/app/components/base/drawer'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import Input from '@/app/components/base/input'
|
||||
import { ToastContext } from '@/app/components/base/toast'
|
||||
import type { Item } from '@/app/components/base/select'
|
||||
import { SimpleSelect } from '@/app/components/base/select'
|
||||
import { updateSegment } from '@/service/datasets'
|
||||
import type { SegmentDetailModel, SegmentUpdater } from '@/models/datasets'
|
||||
import type { ChildChunkDetail, SegmentDetailModel, SegmentUpdater } from '@/models/datasets'
|
||||
import NewSegmentModal from '@/app/components/datasets/documents/detail/new-segment-modal'
|
||||
import { useEventEmitterContextContext } from '@/context/event-emitter'
|
||||
import Checkbox from '@/app/components/base/checkbox'
|
||||
import { useDeleteSegment, useDisableSegment, useEnableSegment, useSegmentList } from '@/service/knowledge/use-segment'
|
||||
import { useChildSegmentList, useDeleteSegment, useDisableSegment, useEnableSegment, useSegmentList } from '@/service/knowledge/use-segment'
|
||||
import { Chunk } from '@/app/components/base/icons/src/public/knowledge'
|
||||
|
||||
type SegmentListContextValue = {
|
||||
isCollapsed: boolean
|
||||
toggleCollapsed: () => void
|
||||
fullScreen: boolean
|
||||
toggleFullScreen: () => void
|
||||
}
|
||||
|
||||
const SegmentListContext = createContext({
|
||||
isCollapsed: true,
|
||||
toggleCollapsed: () => {},
|
||||
fullScreen: false,
|
||||
toggleFullScreen: () => {},
|
||||
})
|
||||
|
||||
export const useSegmentListContext = (selector: (value: SegmentListContextValue) => any) => {
|
||||
|
|
@ -84,19 +88,21 @@ const Completed: FC<ICompletedProps> = ({
|
|||
const { notify } = useContext(ToastContext)
|
||||
const [datasetId = '', documentId = '', docForm, mode, parentMode] = useDocumentContext(s => [s.datasetId, s.documentId, s.docForm, s.mode, s.parentMode])
|
||||
// the current segment id and whether to show the modal
|
||||
const [currSegment, setCurrSegment] = useState<{ segInfo?: SegmentDetailModel; showModal: boolean; isEditing?: boolean }>({ showModal: false })
|
||||
const [currSegment, setCurrSegment] = useState<{ segInfo?: SegmentDetailModel; showModal: boolean; isEditMode?: boolean }>({ showModal: false })
|
||||
|
||||
const [inputValue, setInputValue] = useState<string>('') // the input value
|
||||
const [searchValue, setSearchValue] = useState<string>('') // the search value
|
||||
const [selectedStatus, setSelectedStatus] = useState<boolean | 'all'>('all') // the selected status, enabled/disabled/undefined
|
||||
|
||||
const [segments, setSegments] = useState<SegmentDetailModel[]>([]) // all segments data
|
||||
const [childSegments, setChildSegments] = useState<ChildChunkDetail[]>([]) // all child segments data
|
||||
const [selectedSegmentIds, setSelectedSegmentIds] = useState<string[]>([])
|
||||
const { eventEmitter } = useEventEmitterContextContext()
|
||||
const [isCollapsed, setIsCollapsed] = useState(true)
|
||||
// todo: pagination
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [limit, setLimit] = useState(10)
|
||||
const [fullScreen, setFullScreen] = useState(false)
|
||||
|
||||
const { run: handleSearch } = useDebounceFn(() => {
|
||||
setSearchValue(inputValue)
|
||||
|
|
@ -111,37 +117,63 @@ const Completed: FC<ICompletedProps> = ({
|
|||
setSelectedStatus(value === 'all' ? 'all' : !!value)
|
||||
}
|
||||
|
||||
const { isLoading: isLoadingSegmentList, data: segmentList, refetch: refreshSegmentList } = useSegmentList(
|
||||
const isFullDocMode = useMemo(() => {
|
||||
return mode === 'hierarchical' && parentMode === 'full-doc'
|
||||
}, [mode, parentMode])
|
||||
|
||||
const { isLoading: isLoadingSegmentList, data: segmentListData, refetch: refreshSegmentList } = useSegmentList(
|
||||
{
|
||||
datasetId,
|
||||
documentId,
|
||||
params: {
|
||||
page: currentPage,
|
||||
limit,
|
||||
keyword: searchValue,
|
||||
keyword: isFullDocMode ? '' : searchValue,
|
||||
enabled: selectedStatus === 'all' ? 'all' : !!selectedStatus,
|
||||
},
|
||||
},
|
||||
mode === 'hierarchical' && parentMode === 'full-doc',
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
setSegments(mockSegments.data)
|
||||
// if (segmentList)
|
||||
// setSegments(segmentList.data || [])
|
||||
}, [segmentList])
|
||||
// setSegments(mockSegments.data)
|
||||
// todo: remove mock data
|
||||
if (segmentListData)
|
||||
setSegments(segmentListData.data || [])
|
||||
}, [segmentListData])
|
||||
|
||||
const { data: childChunkListData, refetch: refreshChildSegmentList } = useChildSegmentList(
|
||||
{
|
||||
datasetId,
|
||||
documentId,
|
||||
segmentId: segments[0]?.id || '',
|
||||
params: {
|
||||
page: currentPage,
|
||||
limit,
|
||||
keyword: searchValue,
|
||||
},
|
||||
},
|
||||
!isFullDocMode || segments.length === 0,
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
setChildSegments(mockChildSegments.data)
|
||||
// todo: remove mock data
|
||||
// if (childChunkListData)
|
||||
// setChildSegments(childChunkListData.data || [])
|
||||
}, [childChunkListData])
|
||||
|
||||
const resetList = useCallback(() => {
|
||||
setSegments([])
|
||||
refreshSegmentList()
|
||||
}, [])
|
||||
|
||||
const onClickCard = (detail: SegmentDetailModel, isEditing = false) => {
|
||||
setCurrSegment({ segInfo: detail, showModal: true, isEditing })
|
||||
const onClickCard = (detail: SegmentDetailModel, isEditMode = false) => {
|
||||
setCurrSegment({ segInfo: detail, showModal: true, isEditMode })
|
||||
}
|
||||
|
||||
const onCloseModal = () => {
|
||||
const onCloseDrawer = () => {
|
||||
setCurrSegment({ ...currSegment, showModal: false })
|
||||
setFullScreen(false)
|
||||
}
|
||||
|
||||
const { mutateAsync: enableSegment } = useEnableSegment()
|
||||
|
|
@ -218,7 +250,7 @@ const Completed: FC<ICompletedProps> = ({
|
|||
eventEmitter?.emit('update-segment')
|
||||
const res = await updateSegment({ datasetId, documentId, segmentId, body: params })
|
||||
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
|
||||
onCloseModal()
|
||||
onCloseDrawer()
|
||||
for (const seg of segments) {
|
||||
if (seg.id === segmentId) {
|
||||
seg.answer = res.data.answer
|
||||
|
|
@ -243,7 +275,7 @@ const Completed: FC<ICompletedProps> = ({
|
|||
}, [importStatus, resetList])
|
||||
|
||||
const isAllSelected = useMemo(() => {
|
||||
return segments.every(seg => selectedSegmentIds.includes(seg.id))
|
||||
return segments.length > 0 && segments.every(seg => selectedSegmentIds.includes(seg.id))
|
||||
}, [segments, selectedSegmentIds])
|
||||
|
||||
const isSomeSelected = useMemo(() => {
|
||||
|
|
@ -259,17 +291,19 @@ const Completed: FC<ICompletedProps> = ({
|
|||
}, [segments, isAllSelected, selectedSegmentIds])
|
||||
|
||||
const totalText = useMemo(() => {
|
||||
return segmentList?.total ? formatNumber(segmentList.total) : '--'
|
||||
}, [segmentList?.total])
|
||||
return segmentListData?.total ? formatNumber(segmentListData.total) : '--'
|
||||
}, [segmentListData?.total])
|
||||
|
||||
const isFullDocMode = useMemo(() => {
|
||||
return mode === 'hierarchical' && parentMode === 'full-doc'
|
||||
}, [mode, parentMode])
|
||||
const toggleFullScreen = useCallback(() => {
|
||||
setFullScreen(!fullScreen)
|
||||
}, [fullScreen])
|
||||
|
||||
return (
|
||||
<SegmentListContext.Provider value={{
|
||||
isCollapsed,
|
||||
toggleCollapsed: () => setIsCollapsed(!isCollapsed),
|
||||
fullScreen,
|
||||
toggleFullScreen,
|
||||
}}>
|
||||
{!isFullDocMode && <div className={s.docSearchWrapper}>
|
||||
<Checkbox
|
||||
|
|
@ -309,7 +343,7 @@ const Completed: FC<ICompletedProps> = ({
|
|||
loading={false}
|
||||
/>
|
||||
<ChildSegmentList
|
||||
childChunks={mockChildSegments.data}
|
||||
childChunks={childSegments}
|
||||
handleInputChange={() => {}}
|
||||
enabled={!archived}
|
||||
/>
|
||||
|
|
@ -326,17 +360,24 @@ const Completed: FC<ICompletedProps> = ({
|
|||
archived={archived}
|
||||
/>
|
||||
}
|
||||
<Modal isShow={currSegment.showModal} onClose={() => {}} className='!max-w-[640px] !overflow-visible'>
|
||||
{/* Edit or view segment detail */}
|
||||
<Drawer
|
||||
isOpen={currSegment.showModal}
|
||||
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}
|
||||
>
|
||||
<SegmentDetail
|
||||
embeddingAvailable={embeddingAvailable}
|
||||
segInfo={currSegment.segInfo ?? { id: '' }}
|
||||
isEditing={currSegment.isEditing}
|
||||
onChangeSwitch={onChangeSwitch}
|
||||
isEditMode={currSegment.isEditMode}
|
||||
onUpdate={handleUpdateSegment}
|
||||
onCancel={onCloseModal}
|
||||
archived={archived}
|
||||
onCancel={onCloseDrawer}
|
||||
/>
|
||||
</Modal>
|
||||
</Drawer>
|
||||
<NewSegmentModal
|
||||
isShow={showNewSegmentModal}
|
||||
docForm={docForm}
|
||||
|
|
|
|||
|
|
@ -2,50 +2,43 @@ import React, { type FC, useState } from 'react'
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
RiCloseLine,
|
||||
RiEditLine,
|
||||
RiExpandDiagonalLine,
|
||||
} from '@remixicon/react'
|
||||
import { StatusItem } from '../../list'
|
||||
import s from './style.module.css'
|
||||
import { SegmentIndexTag } from '.'
|
||||
import { useKeyPress } from 'ahooks'
|
||||
import { SegmentIndexTag, useSegmentListContext } from './index'
|
||||
import type { SegmentDetailModel } from '@/models/datasets'
|
||||
import { useEventEmitterContextContext } from '@/context/event-emitter'
|
||||
import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
import Button from '@/app/components/base/button'
|
||||
import TagInput from '@/app/components/base/tag-input'
|
||||
import cn from '@/utils/classnames'
|
||||
import { formatNumber } from '@/utils/format'
|
||||
import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
|
||||
import classNames from '@/utils/classnames'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
|
||||
type ISegmentDetailProps = {
|
||||
embeddingAvailable: boolean
|
||||
segInfo?: Partial<SegmentDetailModel> & { id: string }
|
||||
onChangeSwitch?: (enabled: boolean, segId?: string) => Promise<void>
|
||||
onUpdate: (segmentId: string, q: string, a: string, k: string[]) => void
|
||||
onCancel: () => void
|
||||
archived?: boolean
|
||||
isEditing?: boolean
|
||||
isEditMode?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Show all the contents of the segment
|
||||
*/
|
||||
const SegmentDetail: FC<ISegmentDetailProps> = ({
|
||||
embeddingAvailable,
|
||||
segInfo,
|
||||
archived,
|
||||
onChangeSwitch,
|
||||
onUpdate,
|
||||
onCancel,
|
||||
isEditing: initialIsEditing,
|
||||
isEditMode,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [isEditing, setIsEditing] = useState(initialIsEditing)
|
||||
const [question, setQuestion] = useState(segInfo?.content || '')
|
||||
const [answer, setAnswer] = useState(segInfo?.answer || '')
|
||||
const [keywords, setKeywords] = useState<string[]>(segInfo?.keywords || [])
|
||||
const { eventEmitter } = useEventEmitterContextContext()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [fullScreen, toggleFullScreen] = useSegmentListContext(s => [s.fullScreen, s.toggleFullScreen])
|
||||
|
||||
eventEmitter?.useSubscription((v) => {
|
||||
if (v === 'update-segment')
|
||||
|
|
@ -55,7 +48,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
|
|||
})
|
||||
|
||||
const handleCancel = () => {
|
||||
setIsEditing(false)
|
||||
onCancel()
|
||||
setQuestion(segInfo?.content || '')
|
||||
setAnswer(segInfo?.answer || '')
|
||||
setKeywords(segInfo?.keywords || [])
|
||||
|
|
@ -64,6 +57,17 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
|
|||
onUpdate(segInfo?.id || '', question, answer, keywords)
|
||||
}
|
||||
|
||||
useKeyPress(['esc'], (e) => {
|
||||
e.preventDefault()
|
||||
handleCancel()
|
||||
})
|
||||
|
||||
useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.s`, (e) => {
|
||||
e.preventDefault()
|
||||
handleSave()
|
||||
}
|
||||
, { exactMatch: true, useCapture: true })
|
||||
|
||||
const renderContent = () => {
|
||||
if (segInfo?.answer) {
|
||||
return (
|
||||
|
|
@ -75,7 +79,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
|
|||
value={question}
|
||||
placeholder={t('datasetDocuments.segment.questionPlaceholder') || ''}
|
||||
onChange={e => setQuestion(e.target.value)}
|
||||
disabled={!isEditing}
|
||||
disabled={!isEditMode}
|
||||
/>
|
||||
<div className='mb-1 text-xs font-medium text-gray-500'>ANSWER</div>
|
||||
<AutoHeightTextarea
|
||||
|
|
@ -84,7 +88,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
|
|||
value={answer}
|
||||
placeholder={t('datasetDocuments.segment.answerPlaceholder') || ''}
|
||||
onChange={e => setAnswer(e.target.value)}
|
||||
disabled={!isEditing}
|
||||
disabled={!isEditMode}
|
||||
autoFocus
|
||||
/>
|
||||
</>
|
||||
|
|
@ -93,91 +97,104 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
|
|||
|
||||
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)}
|
||||
disabled={!isEditing}
|
||||
disabled={!isEditMode}
|
||||
autoFocus
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={'flex flex-col relative'}>
|
||||
<div className='absolute right-0 top-0 flex items-center h-7'>
|
||||
{isEditing && (
|
||||
<>
|
||||
<Button
|
||||
onClick={handleCancel}>
|
||||
{t('common.operation.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
variant='primary'
|
||||
className='ml-3'
|
||||
onClick={handleSave}
|
||||
disabled={loading}
|
||||
>
|
||||
{t('common.operation.save')}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{!isEditing && !archived && embeddingAvailable && (
|
||||
<>
|
||||
<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>
|
||||
<RiEditLine className='w-4 h-4 text-gray-500' onClick={() => setIsEditing(true)} />
|
||||
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>
|
||||
</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 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}>
|
||||
<RiCloseLine className='w-4 h-4 text-gray-500' />
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const renderKeywords = () => {
|
||||
return (
|
||||
<div className={classNames('flex flex-col', fullScreen ? 'max-w-[320px]' : '')}>
|
||||
<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
|
||||
? '-'
|
||||
: (
|
||||
<TagInput
|
||||
items={keywords}
|
||||
onChange={newKeywords => setKeywords(newKeywords)}
|
||||
disableAdd={!isEditMode}
|
||||
disableRemove={!isEditMode || (keywords.length === 1)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</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
|
||||
? '-'
|
||||
: (
|
||||
<TagInput
|
||||
items={keywords}
|
||||
onChange={newKeywords => setKeywords(newKeywords)}
|
||||
disableAdd={!isEditing}
|
||||
disableRemove={!isEditing || (keywords.length === 1)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div className={cn(s.footer, s.numberInfo)}>
|
||||
<div className='flex items-center flex-wrap gap-y-2'>
|
||||
<div className={cn(s.commonIcon, s.typeSquareIcon)} /><span className='mr-8'>{formatNumber(segInfo?.word_count as number)} {t('datasetDocuments.segment.characters')}</span>
|
||||
<div className={cn(s.commonIcon, s.targetIcon)} /><span className='mr-8'>{formatNumber(segInfo?.hit_count as number)} {t('datasetDocuments.segment.hitCount')}</span>
|
||||
<div className={cn(s.commonIcon, s.bezierCurveIcon)} /><span className={s.hashText}>{t('datasetDocuments.segment.vectorHash')}{segInfo?.index_node_hash}</span>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<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'>{isEditMode ? 'Edit Chunk' : 'Chunk Detail'}</div>
|
||||
<div className='flex items-center gap-x-2'>
|
||||
<SegmentIndexTag positionId={segInfo?.position || ''} className='w-fit' />
|
||||
<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>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<StatusItem status={segInfo?.enabled ? 'enabled' : 'disabled'} reverse textCls='text-gray-500 text-xs' />
|
||||
{embeddingAvailable && (
|
||||
{isEditMode && fullScreen && (
|
||||
<>
|
||||
<Divider type='vertical' className='!h-2' />
|
||||
<Switch
|
||||
size='md'
|
||||
defaultValue={segInfo?.enabled}
|
||||
onChange={async (val) => {
|
||||
await onChangeSwitch?.(val, segInfo?.id || '')
|
||||
}}
|
||||
disabled={archived}
|
||||
/>
|
||||
{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={onCancel}>
|
||||
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||
</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]' : '')}>
|
||||
{renderContent()}
|
||||
</div>
|
||||
{renderKeywords()}
|
||||
</div>
|
||||
{isEditMode && !fullScreen && (
|
||||
<div className='flex items-center justify-end p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
|
||||
{renderActionButtons()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
SegmentDetail.displayName = 'SegmentDetail'
|
||||
|
||||
export default React.memo(SegmentDetail)
|
||||
export default SegmentDetail
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ type ISegmentListProps = {
|
|||
items: SegmentDetailModel[]
|
||||
selectedSegmentIds: string[]
|
||||
onSelected: (segId: string) => void
|
||||
onClick: (detail: SegmentDetailModel, isEditing?: boolean) => void
|
||||
onClick: (detail: SegmentDetailModel, isEditMode?: boolean) => void
|
||||
onChangeSwitch: (enabled: boolean, segId?: string,) => Promise<void>
|
||||
onDelete: (segId: string) => Promise<void>
|
||||
archived?: boolean
|
||||
|
|
@ -49,7 +49,7 @@ const SegmentList: FC<ISegmentListProps> = ({
|
|||
<SegmentCard
|
||||
key={`${segItem.id}-card`}
|
||||
detail={segItem}
|
||||
onClick={() => onClickCard(segItem)}
|
||||
onClick={() => onClickCard(segItem, true)}
|
||||
onChangeSwitch={onChangeSwitch}
|
||||
onClickEdit={() => onClickCard(segItem, true)}
|
||||
onDelete={onDelete}
|
||||
|
|
|
|||
|
|
@ -334,8 +334,8 @@ const translation = {
|
|||
segment: {
|
||||
paragraphs: 'Paragraphs',
|
||||
chunks: 'CHUNKS',
|
||||
keywords: 'Key Words',
|
||||
addKeyWord: 'Add key word',
|
||||
keywords: 'KEYWORDS',
|
||||
addKeyWord: 'Add keyword',
|
||||
keywordError: 'The maximum length of keyword is 20',
|
||||
characters: 'characters',
|
||||
hitCount: 'Retrieval count',
|
||||
|
|
@ -344,7 +344,7 @@ const translation = {
|
|||
questionEmpty: 'Question can not be empty',
|
||||
answerPlaceholder: 'add answer here',
|
||||
answerEmpty: 'Answer can not be empty',
|
||||
contentPlaceholder: 'add content here',
|
||||
contentPlaceholder: 'Add content here',
|
||||
contentEmpty: 'Content can not be empty',
|
||||
newTextSegment: 'New Text Segment',
|
||||
newQaSegment: 'New Q&A Segment',
|
||||
|
|
|
|||
|
|
@ -459,6 +459,7 @@ export type SegmentsResponse = {
|
|||
limit: number
|
||||
total: number
|
||||
total_pages: number
|
||||
page: number
|
||||
}
|
||||
|
||||
export type HitTestingRecord = {
|
||||
|
|
@ -614,3 +615,11 @@ export type ChildChunkDetail = {
|
|||
created_at: number
|
||||
type: ChildChunkType
|
||||
}
|
||||
|
||||
export type ChildSegmentResponse = {
|
||||
data: ChildChunkDetail[]
|
||||
total: number
|
||||
total_pages: number
|
||||
page: number
|
||||
limit: number
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { useMutation, useQuery } from '@tanstack/react-query'
|
||||
import { del, get, patch } from '../base'
|
||||
import type { CommonResponse } from '@/models/common'
|
||||
import type { SegmentsResponse } from '@/models/datasets'
|
||||
import type { ChildSegmentResponse, SegmentsResponse } from '@/models/datasets'
|
||||
|
||||
const NAME_SPACE = 'segment'
|
||||
|
||||
const useSegmentListKey = [NAME_SPACE, 'list']
|
||||
const useSegmentListKey = [NAME_SPACE, 'chunkList']
|
||||
|
||||
export const useSegmentList = (
|
||||
payload: {
|
||||
|
|
@ -28,7 +28,7 @@ export const useSegmentList = (
|
|||
return get<SegmentsResponse>(`/datasets/${datasetId}/documents/${documentId}/segments`, { params })
|
||||
},
|
||||
enabled: !disable,
|
||||
initialData: disable ? { data: [], has_more: false, total: 0, total_pages: 0, limit: 10 } : undefined,
|
||||
initialData: disable ? { data: [], has_more: false, page: 1, total: 0, total_pages: 0, limit: 10 } : undefined,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -64,3 +64,30 @@ export const useDeleteSegment = () => {
|
|||
},
|
||||
})
|
||||
}
|
||||
|
||||
const useChildSegmentListKey = [NAME_SPACE, 'childChunkList']
|
||||
|
||||
export const useChildSegmentList = (
|
||||
payload: {
|
||||
datasetId: string
|
||||
documentId: string
|
||||
segmentId: string
|
||||
params: {
|
||||
page: number
|
||||
limit: number
|
||||
keyword: string
|
||||
}
|
||||
},
|
||||
disable?: boolean,
|
||||
) => {
|
||||
const { datasetId, documentId, segmentId, params } = payload
|
||||
const { page, limit, keyword } = params
|
||||
return useQuery({
|
||||
queryKey: [...useChildSegmentListKey, datasetId, documentId, segmentId, page, limit, keyword],
|
||||
queryFn: () => {
|
||||
return get<ChildSegmentResponse>(`/datasets/${datasetId}/documents/${documentId}/segment/${segmentId}/child_chunks`, { params })
|
||||
},
|
||||
enabled: !disable,
|
||||
initialData: disable ? { data: [], total: 0, page: 1, total_pages: 0, limit: 10 } : undefined,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue