ngskcloud
/
gcgj-dify-1.7.0
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add child segment response type and enhance dataset components with improved translations and UI updates

Browse Source
pull/12097/head
twwu 1 year ago
parent 734659c873
commit 1546859bae
8 changed files with 247 additions and 148 deletions
Show Stats Download Patch File Download Diff File

6
web/app/components/base/drawer/index.tsx
Unescape Escape View File

@ -19,6 +19,7 @@ export type IDrawerProps = {
onClose: () => void onClose: () => void
onCancel?: () => void onCancel?: () => void
onOk?: () => void onOk?: () => void
unmount?: boolean
} }
export default function Drawer({ export default function Drawer({
@ -35,11 +36,12 @@ export default function Drawer({
onClose, onClose,
onCancel, onCancel,
onOk, onOk,
unmount = false,
}: IDrawerProps) { }: IDrawerProps) {
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<Dialog <Dialog
unmount={false} unmount={unmount}
open={isOpen} open={isOpen}
onClose={() => !clickOutsideNotOpen && onClose()} onClose={() => !clickOutsideNotOpen && onClose()}
className="fixed z-30 inset-0 overflow-y-auto" className="fixed z-30 inset-0 overflow-y-auto"
@ -49,7 +51,7 @@ export default function Drawer({
<Dialog.Overlay <Dialog.Overlay
className={cn('z-40 fixed inset-0', mask && 'bg-black bg-opacity-30')} 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 {title && <Dialog.Title
as="h3" as="h3"

21
web/app/components/base/tag-input/index.tsx
Unescape Escape View File

@ -3,8 +3,8 @@ import type { ChangeEvent, FC, KeyboardEvent } from 'react'
import { } from 'use-context-selector' import { } from 'use-context-selector'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import AutosizeInput from 'react-18-input-autosize' import AutosizeInput from 'react-18-input-autosize'
import { RiAddLine, RiCloseLine } from '@remixicon/react'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import { X } from '@/app/components/base/icons/src/vender/line/general'
import { useToastContext } from '@/app/components/base/toast' import { useToastContext } from '@/app/components/base/toast'
type TagInputProps = { type TagInputProps = {
@ -75,14 +75,14 @@ const TagInput: FC<TagInputProps> = ({
(items || []).map((item, index) => ( (items || []).map((item, index) => (
<div <div
key={item} 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} {item}
{ {
!disableRemove && ( !disableRemove && (
<X <div className='flex items-center justify-center w-4 h-4 cursor-pointer' onClick={() => handleRemove(index)}>
className='ml-0.5 w-3 h-3 text-gray-500 cursor-pointer' <RiCloseLine className='ml-0.5 w-3.5 h-3.5 text-text-tertiary' />
onClick={() => handleRemove(index)} </div>
/>
) )
} }
</div> </div>
@ -90,14 +90,16 @@ const TagInput: FC<TagInputProps> = ({
} }
{ {
!disableAdd && ( !disableAdd && (
<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 <AutosizeInput
inputClassName={cn('outline-none appearance-none placeholder:text-gray-300 caret-primary-600 hover:placeholder:text-gray-400', isSpecialMode ? 'bg-transparent' : '')} 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( className={cn(
!isInWorkflow && 'max-w-[300px]', !isInWorkflow && 'max-w-[300px]',
isInWorkflow && 'max-w-[146px]', isInWorkflow && 'max-w-[146px]',
` `
mt-1 py-1 rounded-lg border border-transparent text-sm overflow-hidden py-1 rounded-md overflow-hidden system-xs-regular
${focused && 'px-2 border !border-dashed !border-gray-200'} ${focused && isSpecialMode && 'px-1.5 border border-dashed border-divider-deep'}
`)} `)}
onFocus={() => setFocused(true)} onFocus={() => setFocused(true)}
onBlur={handleBlur} onBlur={handleBlur}
@ -108,6 +110,7 @@ const TagInput: FC<TagInputProps> = ({
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
placeholder={t(placeholder || (isSpecialMode ? 'common.model.params.stop_sequencesPlaceholder' : 'datasetDocuments.segment.addKeyWord'))} placeholder={t(placeholder || (isSpecialMode ? 'common.model.params.stop_sequencesPlaceholder' : 'datasetDocuments.segment.addKeyWord'))}
/> />
</div>
) )
} }
</div> </div>

101
web/app/components/datasets/documents/detail/completed/index.tsx
Unescape Escape View File

@ -11,33 +11,37 @@ import SegmentList from './segment-list'
import DisplayToggle from './display-toggle' import DisplayToggle from './display-toggle'
import BatchAction from './batch-action' import BatchAction from './batch-action'
import SegmentDetail from './segment-detail' import SegmentDetail from './segment-detail'
import { mockChildSegments, mockSegments } from './mock-data' import { mockChildSegments } from './mock-data'
import SegmentCard from './segment-card' import SegmentCard from './segment-card'
import ChildSegmentList from './child-segment-list' import ChildSegmentList from './child-segment-list'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import { formatNumber } from '@/utils/format' 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 Divider from '@/app/components/base/divider'
import Input from '@/app/components/base/input' import Input from '@/app/components/base/input'
import { ToastContext } from '@/app/components/base/toast' import { ToastContext } from '@/app/components/base/toast'
import type { Item } from '@/app/components/base/select' import type { Item } from '@/app/components/base/select'
import { SimpleSelect } from '@/app/components/base/select' import { SimpleSelect } from '@/app/components/base/select'
import { updateSegment } from '@/service/datasets' 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 NewSegmentModal from '@/app/components/datasets/documents/detail/new-segment-modal'
import { useEventEmitterContextContext } from '@/context/event-emitter' import { useEventEmitterContextContext } from '@/context/event-emitter'
import Checkbox from '@/app/components/base/checkbox' 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' import { Chunk } from '@/app/components/base/icons/src/public/knowledge'
type SegmentListContextValue = { type SegmentListContextValue = {
isCollapsed: boolean isCollapsed: boolean
toggleCollapsed: () => void toggleCollapsed: () => void
fullScreen: boolean
toggleFullScreen: () => void
} }
const SegmentListContext = createContext({ const SegmentListContext = createContext({
isCollapsed: true, isCollapsed: true,
toggleCollapsed: () => {}, toggleCollapsed: () => {},
fullScreen: false,
toggleFullScreen: () => {},
}) })
export const useSegmentListContext = (selector: (value: SegmentListContextValue) => any) => { export const useSegmentListContext = (selector: (value: SegmentListContextValue) => any) => {
@ -84,19 +88,21 @@ const Completed: FC<ICompletedProps> = ({
const { notify } = useContext(ToastContext) const { notify } = useContext(ToastContext)
const [datasetId = '', documentId = '', docForm, mode, parentMode] = useDocumentContext(s => [s.datasetId, s.documentId, s.docForm, s.mode, s.parentMode]) 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 // 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 [inputValue, setInputValue] = useState<string>('') // the input value
const [searchValue, setSearchValue] = useState<string>('') // the search value const [searchValue, setSearchValue] = useState<string>('') // the search value
const [selectedStatus, setSelectedStatus] = useState<boolean | 'all'>('all') // the selected status, enabled/disabled/undefined const [selectedStatus, setSelectedStatus] = useState<boolean | 'all'>('all') // the selected status, enabled/disabled/undefined
const [segments, setSegments] = useState<SegmentDetailModel[]>([]) // all segments data const [segments, setSegments] = useState<SegmentDetailModel[]>([]) // all segments data
const [childSegments, setChildSegments] = useState<ChildChunkDetail[]>([]) // all child segments data
const [selectedSegmentIds, setSelectedSegmentIds] = useState<string[]>([]) const [selectedSegmentIds, setSelectedSegmentIds] = useState<string[]>([])
const { eventEmitter } = useEventEmitterContextContext() const { eventEmitter } = useEventEmitterContextContext()
const [isCollapsed, setIsCollapsed] = useState(true) const [isCollapsed, setIsCollapsed] = useState(true)
// todo: pagination // todo: pagination
const [currentPage, setCurrentPage] = useState(1) const [currentPage, setCurrentPage] = useState(1)
const [limit, setLimit] = useState(10) const [limit, setLimit] = useState(10)
const [fullScreen, setFullScreen] = useState(false)
const { run: handleSearch } = useDebounceFn(() => { const { run: handleSearch } = useDebounceFn(() => {
setSearchValue(inputValue) setSearchValue(inputValue)
@ -111,37 +117,63 @@ const Completed: FC<ICompletedProps> = ({
setSelectedStatus(value === 'all' ? 'all' : !!value) 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, datasetId,
documentId, documentId,
params: { params: {
page: currentPage, page: currentPage,
limit, limit,
keyword: searchValue, keyword: isFullDocMode ? '' : searchValue,
enabled: selectedStatus === 'all' ? 'all' : !!selectedStatus, enabled: selectedStatus === 'all' ? 'all' : !!selectedStatus,
}, },
}, },
mode === 'hierarchical' && parentMode === 'full-doc',
) )
useEffect(() => { useEffect(() => {
setSegments(mockSegments.data) // setSegments(mockSegments.data)
// if (segmentList) // todo: remove mock data
// setSegments(segmentList.data || []) if (segmentListData)
}, [segmentList]) 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(() => { const resetList = useCallback(() => {
setSegments([]) setSegments([])
refreshSegmentList() refreshSegmentList()
}, []) }, [])
const onClickCard = (detail: SegmentDetailModel, isEditing = false) => { const onClickCard = (detail: SegmentDetailModel, isEditMode = false) => {
setCurrSegment({ segInfo: detail, showModal: true, isEditing }) setCurrSegment({ segInfo: detail, showModal: true, isEditMode })
} }
const onCloseModal = () => { const onCloseDrawer = () => {
setCurrSegment({ ...currSegment, showModal: false }) setCurrSegment({ ...currSegment, showModal: false })
setFullScreen(false)
} }
const { mutateAsync: enableSegment } = useEnableSegment() const { mutateAsync: enableSegment } = useEnableSegment()
@ -218,7 +250,7 @@ const Completed: FC<ICompletedProps> = ({
eventEmitter?.emit('update-segment') eventEmitter?.emit('update-segment')
const res = await updateSegment({ datasetId, documentId, segmentId, body: params }) const res = await updateSegment({ datasetId, documentId, segmentId, body: params })
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') }) notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
onCloseModal() onCloseDrawer()
for (const seg of segments) { for (const seg of segments) {
if (seg.id === segmentId) { if (seg.id === segmentId) {
seg.answer = res.data.answer seg.answer = res.data.answer
@ -243,7 +275,7 @@ const Completed: FC<ICompletedProps> = ({
}, [importStatus, resetList]) }, [importStatus, resetList])
const isAllSelected = useMemo(() => { const isAllSelected = useMemo(() => {
return segments.every(seg => selectedSegmentIds.includes(seg.id)) return segments.length > 0 && segments.every(seg => selectedSegmentIds.includes(seg.id))
}, [segments, selectedSegmentIds]) }, [segments, selectedSegmentIds])
const isSomeSelected = useMemo(() => { const isSomeSelected = useMemo(() => {
@ -259,17 +291,19 @@ const Completed: FC<ICompletedProps> = ({
}, [segments, isAllSelected, selectedSegmentIds]) }, [segments, isAllSelected, selectedSegmentIds])
const totalText = useMemo(() => { const totalText = useMemo(() => {
return segmentList?.total ? formatNumber(segmentList.total) : '--' return segmentListData?.total ? formatNumber(segmentListData.total) : '--'
}, [segmentList?.total]) }, [segmentListData?.total])
const isFullDocMode = useMemo(() => { const toggleFullScreen = useCallback(() => {
return mode === 'hierarchical' && parentMode === 'full-doc' setFullScreen(!fullScreen)
}, [mode, parentMode]) }, [fullScreen])
return ( return (
<SegmentListContext.Provider value={{ <SegmentListContext.Provider value={{
isCollapsed, isCollapsed,
toggleCollapsed: () => setIsCollapsed(!isCollapsed), toggleCollapsed: () => setIsCollapsed(!isCollapsed),
fullScreen,
toggleFullScreen,
}}> }}>
{!isFullDocMode && <div className={s.docSearchWrapper}> {!isFullDocMode && <div className={s.docSearchWrapper}>
<Checkbox <Checkbox
@ -309,7 +343,7 @@ const Completed: FC<ICompletedProps> = ({
loading={false} loading={false}
/> />
<ChildSegmentList <ChildSegmentList
childChunks={mockChildSegments.data} childChunks={childSegments}
handleInputChange={() => {}} handleInputChange={() => {}}
enabled={!archived} enabled={!archived}
/> />
@ -326,17 +360,24 @@ const Completed: FC<ICompletedProps> = ({
archived={archived} 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 <SegmentDetail
embeddingAvailable={embeddingAvailable}
segInfo={currSegment.segInfo ?? { id: '' }} segInfo={currSegment.segInfo ?? { id: '' }}
isEditing={currSegment.isEditing} isEditMode={currSegment.isEditMode}
onChangeSwitch={onChangeSwitch}
onUpdate={handleUpdateSegment} onUpdate={handleUpdateSegment}
onCancel={onCloseModal} onCancel={onCloseDrawer}
archived={archived}
/> />
</Modal> </Drawer>
<NewSegmentModal <NewSegmentModal
isShow={showNewSegmentModal} isShow={showNewSegmentModal}
docForm={docForm} docForm={docForm}

149
web/app/components/datasets/documents/detail/completed/segment-detail.tsx
Unescape Escape View File

@ -2,50 +2,43 @@ import React, { type FC, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { import {
RiCloseLine, RiCloseLine,
RiEditLine, RiExpandDiagonalLine,
} from '@remixicon/react' } from '@remixicon/react'
import { StatusItem } from '../../list' import { useKeyPress } from 'ahooks'
import s from './style.module.css' import { SegmentIndexTag, useSegmentListContext } from './index'
import { SegmentIndexTag } from '.'
import type { SegmentDetailModel } from '@/models/datasets' import type { SegmentDetailModel } from '@/models/datasets'
import { useEventEmitterContextContext } from '@/context/event-emitter' import { useEventEmitterContextContext } from '@/context/event-emitter'
import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common' 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 Button from '@/app/components/base/button'
import TagInput from '@/app/components/base/tag-input' import TagInput from '@/app/components/base/tag-input'
import cn from '@/utils/classnames'
import { formatNumber } from '@/utils/format' 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' import Divider from '@/app/components/base/divider'
type ISegmentDetailProps = { type ISegmentDetailProps = {
embeddingAvailable: boolean
segInfo?: Partial<SegmentDetailModel> & { id: string } segInfo?: Partial<SegmentDetailModel> & { id: string }
onChangeSwitch?: (enabled: boolean, segId?: string) => Promise<void>
onUpdate: (segmentId: string, q: string, a: string, k: string[]) => void onUpdate: (segmentId: string, q: string, a: string, k: string[]) => void
onCancel: () => void onCancel: () => void
archived?: boolean isEditMode?: boolean
isEditing?: boolean
} }
/** /**
* Show all the contents of the segment * Show all the contents of the segment
*/ */
const SegmentDetail: FC<ISegmentDetailProps> = ({ const SegmentDetail: FC<ISegmentDetailProps> = ({
embeddingAvailable,
segInfo, segInfo,
archived,
onChangeSwitch,
onUpdate, onUpdate,
onCancel, onCancel,
isEditing: initialIsEditing, isEditMode,
}) => { }) => {
const { t } = useTranslation() const { t } = useTranslation()
const [isEditing, setIsEditing] = useState(initialIsEditing)
const [question, setQuestion] = useState(segInfo?.content || '') const [question, setQuestion] = useState(segInfo?.content || '')
const [answer, setAnswer] = useState(segInfo?.answer || '') const [answer, setAnswer] = useState(segInfo?.answer || '')
const [keywords, setKeywords] = useState<string[]>(segInfo?.keywords || []) const [keywords, setKeywords] = useState<string[]>(segInfo?.keywords || [])
const { eventEmitter } = useEventEmitterContextContext() const { eventEmitter } = useEventEmitterContextContext()
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [fullScreen, toggleFullScreen] = useSegmentListContext(s => [s.fullScreen, s.toggleFullScreen])
eventEmitter?.useSubscription((v) => { eventEmitter?.useSubscription((v) => {
if (v === 'update-segment') if (v === 'update-segment')
@ -55,7 +48,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
}) })
const handleCancel = () => { const handleCancel = () => {
setIsEditing(false) onCancel()
setQuestion(segInfo?.content || '') setQuestion(segInfo?.content || '')
setAnswer(segInfo?.answer || '') setAnswer(segInfo?.answer || '')
setKeywords(segInfo?.keywords || []) setKeywords(segInfo?.keywords || [])
@ -64,6 +57,17 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
onUpdate(segInfo?.id || '', question, answer, keywords) 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 = () => { const renderContent = () => {
if (segInfo?.answer) { if (segInfo?.answer) {
return ( return (
@ -75,7 +79,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
value={question} value={question}
placeholder={t('datasetDocuments.segment.questionPlaceholder') || ''} placeholder={t('datasetDocuments.segment.questionPlaceholder') || ''}
onChange={e => setQuestion(e.target.value)} onChange={e => setQuestion(e.target.value)}
disabled={!isEditing} disabled={!isEditMode}
/> />
<div className='mb-1 text-xs font-medium text-gray-500'>ANSWER</div> <div className='mb-1 text-xs font-medium text-gray-500'>ANSWER</div>
<AutoHeightTextarea <AutoHeightTextarea
@ -84,7 +88,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
value={answer} value={answer}
placeholder={t('datasetDocuments.segment.answerPlaceholder') || ''} placeholder={t('datasetDocuments.segment.answerPlaceholder') || ''}
onChange={e => setAnswer(e.target.value)} onChange={e => setAnswer(e.target.value)}
disabled={!isEditing} disabled={!isEditMode}
autoFocus autoFocus
/> />
</> </>
@ -93,91 +97,104 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
return ( return (
<AutoHeightTextarea <AutoHeightTextarea
className='leading-6 text-md text-gray-800' className='body-md-regular text-text-secondary tracking-[-0.07px] caret-[#295EFF]'
value={question} value={question}
placeholder={t('datasetDocuments.segment.contentPlaceholder') || ''} placeholder={t('datasetDocuments.segment.contentPlaceholder') || ''}
onChange={e => setQuestion(e.target.value)} onChange={e => setQuestion(e.target.value)}
disabled={!isEditing} disabled={!isEditMode}
autoFocus autoFocus
/> />
) )
} }
const renderActionButtons = () => {
return ( return (
<div className={'flex flex-col relative'}> <div className='flex items-center gap-x-2'>
<div className='absolute right-0 top-0 flex items-center h-7'>
{isEditing && (
<>
<Button <Button
onClick={handleCancel}> onClick={handleCancel}
{t('common.operation.cancel')} >
<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>
<Button <Button
variant='primary' variant='primary'
className='ml-3'
onClick={handleSave} onClick={handleSave}
disabled={loading} disabled={loading}
> >
{t('common.operation.save')} <div className='flex items-center gap-x-1'>
</Button> <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>
{!isEditing && !archived && embeddingAvailable && ( <span className='w-4 h-4 bg-components-kbd-bg-white rounded-[4px] text-text-primary-on-surface system-kbd'>S</span>
<>
<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)} />
</div> </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> </div>
</Button>
</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}> 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 {!segInfo?.keywords?.length
? '-' ? '-'
: ( : (
<TagInput <TagInput
items={keywords} items={keywords}
onChange={newKeywords => setKeywords(newKeywords)} onChange={newKeywords => setKeywords(newKeywords)}
disableAdd={!isEditing} disableAdd={!isEditMode}
disableRemove={!isEditing || (keywords.length === 1)} disableRemove={!isEditMode || (keywords.length === 1)}
/> />
) )
} }
</div> </div>
<div className={cn(s.footer, s.numberInfo)}> </div>
<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>
<div className='flex items-center'> <div className='flex items-center'>
<StatusItem status={segInfo?.enabled ? 'enabled' : 'disabled'} reverse textCls='text-gray-500 text-xs' /> {isEditMode && fullScreen && (
{embeddingAvailable && (
<> <>
<Divider type='vertical' className='!h-2' /> {renderActionButtons()}
<Switch <Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
size='md'
defaultValue={segInfo?.enabled}
onChange={async (val) => {
await onChangeSwitch?.(val, segInfo?.id || '')
}}
disabled={archived}
/>
</> </>
)} )}
<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>
<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> </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> </div>
) )
} }
SegmentDetail.displayName = 'SegmentDetail' export default SegmentDetail
export default React.memo(SegmentDetail)

4
web/app/components/datasets/documents/detail/completed/segment-list.tsx
Unescape Escape View File

@ -12,7 +12,7 @@ type ISegmentListProps = {
items: SegmentDetailModel[] items: SegmentDetailModel[]
selectedSegmentIds: string[] selectedSegmentIds: string[]
onSelected: (segId: string) => void onSelected: (segId: string) => void
onClick: (detail: SegmentDetailModel, isEditing?: boolean) => void onClick: (detail: SegmentDetailModel, isEditMode?: boolean) => void
onChangeSwitch: (enabled: boolean, segId?: string,) => Promise<void> onChangeSwitch: (enabled: boolean, segId?: string,) => Promise<void>
onDelete: (segId: string) => Promise<void> onDelete: (segId: string) => Promise<void>
archived?: boolean archived?: boolean
@ -49,7 +49,7 @@ const SegmentList: FC<ISegmentListProps> = ({
<SegmentCard <SegmentCard
key={`${segItem.id}-card`} key={`${segItem.id}-card`}
detail={segItem} detail={segItem}
onClick={() => onClickCard(segItem)} onClick={() => onClickCard(segItem, true)}
onChangeSwitch={onChangeSwitch} onChangeSwitch={onChangeSwitch}
onClickEdit={() => onClickCard(segItem, true)} onClickEdit={() => onClickCard(segItem, true)}
onDelete={onDelete} onDelete={onDelete}

6
web/i18n/en-US/dataset-documents.ts
Unescape Escape View File

@ -334,8 +334,8 @@ const translation = {
segment: { segment: {
paragraphs: 'Paragraphs', paragraphs: 'Paragraphs',
chunks: 'CHUNKS', chunks: 'CHUNKS',
keywords: 'Key Words', keywords: 'KEYWORDS',
addKeyWord: 'Add key word', addKeyWord: 'Add keyword',
keywordError: 'The maximum length of keyword is 20', keywordError: 'The maximum length of keyword is 20',
characters: 'characters', characters: 'characters',
hitCount: 'Retrieval count', hitCount: 'Retrieval count',
@ -344,7 +344,7 @@ const translation = {
questionEmpty: 'Question can not be empty', questionEmpty: 'Question can not be empty',
answerPlaceholder: 'add answer here', answerPlaceholder: 'add answer here',
answerEmpty: 'Answer can not be empty', answerEmpty: 'Answer can not be empty',
contentPlaceholder: 'add content here', contentPlaceholder: 'Add content here',
contentEmpty: 'Content can not be empty', contentEmpty: 'Content can not be empty',
newTextSegment: 'New Text Segment', newTextSegment: 'New Text Segment',
newQaSegment: 'New Q&A Segment', newQaSegment: 'New Q&A Segment',

9
web/models/datasets.ts
Unescape Escape View File

@ -459,6 +459,7 @@ export type SegmentsResponse = {
limit: number limit: number
total: number total: number
total_pages: number total_pages: number
page: number
} }
export type HitTestingRecord = { export type HitTestingRecord = {
@ -614,3 +615,11 @@ export type ChildChunkDetail = {
created_at: number created_at: number
type: ChildChunkType type: ChildChunkType
} }
export type ChildSegmentResponse = {
data: ChildChunkDetail[]
total: number
total_pages: number
page: number
limit: number
}

33
web/service/knowledge/use-segment.ts
Unescape Escape View File

@ -1,11 +1,11 @@
import { useMutation, useQuery } from '@tanstack/react-query' import { useMutation, useQuery } from '@tanstack/react-query'
import { del, get, patch } from '../base' import { del, get, patch } from '../base'
import type { CommonResponse } from '@/models/common' import type { CommonResponse } from '@/models/common'
import type { SegmentsResponse } from '@/models/datasets' import type { ChildSegmentResponse, SegmentsResponse } from '@/models/datasets'
const NAME_SPACE = 'segment' const NAME_SPACE = 'segment'
const useSegmentListKey = [NAME_SPACE, 'list'] const useSegmentListKey = [NAME_SPACE, 'chunkList']
export const useSegmentList = ( export const useSegmentList = (
payload: { payload: {
@ -28,7 +28,7 @@ export const useSegmentList = (
return get<SegmentsResponse>(`/datasets/${datasetId}/documents/${documentId}/segments`, { params }) return get<SegmentsResponse>(`/datasets/${datasetId}/documents/${documentId}/segments`, { params })
}, },
enabled: !disable, 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,
})
}

Write Preview
Loading…
Cancel
Save