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

Merge branch 'feat/parent-child-retrieval' of https://github.com/langgenius/dify into feat/parent-child-retrieval

Browse Source
pull/12097/head
AkaraChen 1 year ago
parent cc2a9cdf37 b7472c7ab0
commit 3d283a11b6
13 changed files with 382 additions and 208 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"

51
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,24 +90,27 @@ const TagInput: FC<TagInputProps> = ({
} }
{ {
!disableAdd && ( !disableAdd && (
<AutosizeInput <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' : '')}>
inputClassName={cn('outline-none appearance-none placeholder:text-gray-300 caret-primary-600 hover:placeholder:text-gray-400', isSpecialMode ? 'bg-transparent' : '')} {!isSpecialMode && !focused && <RiAddLine className='w-3.5 h-3.5 text-text-placeholder group-hover/tag-add:text-text-secondary' />}
className={cn( <AutosizeInput
!isInWorkflow && 'max-w-[300px]', inputClassName={cn('outline-none appearance-none placeholder:text-text-placeholder caret-[#295EFF] group-hover/tag-add:placeholder:text-text-secondary', isSpecialMode ? 'bg-transparent' : '')}
isInWorkflow && 'max-w-[146px]', className={cn(
` !isInWorkflow && 'max-w-[300px]',
mt-1 py-1 rounded-lg border border-transparent text-sm overflow-hidden isInWorkflow && 'max-w-[146px]',
${focused && 'px-2 border !border-dashed !border-gray-200'} `
`)} py-1 rounded-md overflow-hidden system-xs-regular
onFocus={() => setFocused(true)} ${focused && isSpecialMode && 'px-1.5 border border-dashed border-divider-deep'}
onBlur={handleBlur} `)}
value={value} onFocus={() => setFocused(true)}
onChange={(e: ChangeEvent<HTMLInputElement>) => { onBlur={handleBlur}
setValue(e.target.value) value={value}
}} onChange={(e: ChangeEvent<HTMLInputElement>) => {
onKeyDown={handleKeyDown} setValue(e.target.value)
placeholder={t(placeholder || (isSpecialMode ? 'common.model.params.stop_sequencesPlaceholder' : 'datasetDocuments.segment.addKeyWord'))} }}
/> onKeyDown={handleKeyDown}
placeholder={t(placeholder || (isSpecialMode ? 'common.model.params.stop_sequencesPlaceholder' : 'datasetDocuments.segment.addKeyWord'))}
/>
</div>
) )
} }
</div> </div>

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

@ -11,40 +11,44 @@ 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) => {
return useContextSelector(SegmentListContext, selector) 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 localPositionId = useMemo(() => {
const positionIdStr = String(positionId) const positionIdStr = String(positionId)
if (positionIdStr.length >= 3) if (positionIdStr.length >= 3)
@ -55,7 +59,7 @@ export const SegmentIndexTag: FC<{ positionId: string | number; className?: stri
<div className={cn('flex items-center', className)}> <div className={cn('flex items-center', className)}>
<Chunk className='w-3 h-3 p-[1px] text-text-tertiary mr-0.5' /> <Chunk className='w-3 h-3 p-[1px] text-text-tertiary mr-0.5' />
<div className='text-text-tertiary system-xs-medium'> <div className='text-text-tertiary system-xs-medium'>
{localPositionId} {label || localPositionId}
</div> </div>
</div> </div>
) )
@ -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,18 +291,21 @@ 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,
}}> }}>
{/* Menu Bar */}
{!isFullDocMode && <div className={s.docSearchWrapper}> {!isFullDocMode && <div className={s.docSearchWrapper}>
<Checkbox <Checkbox
className='shrink-0' className='shrink-0'
@ -300,6 +335,7 @@ const Completed: FC<ICompletedProps> = ({
<Divider type='vertical' className='h-3.5 mx-3' /> <Divider type='vertical' className='h-3.5 mx-3' />
<DisplayToggle /> <DisplayToggle />
</div>} </div>}
{/* Segment list */}
{ {
isFullDocMode isFullDocMode
? <div className='h-full flex flex-col'> ? <div className='h-full flex flex-col'>
@ -309,7 +345,7 @@ const Completed: FC<ICompletedProps> = ({
loading={false} loading={false}
/> />
<ChildSegmentList <ChildSegmentList
childChunks={mockChildSegments.data} childChunks={childSegments}
handleInputChange={() => {}} handleInputChange={() => {}}
enabled={!archived} enabled={!archived}
/> />
@ -326,23 +362,32 @@ 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>
{/* Create New Segment */}
<NewSegmentModal <NewSegmentModal
isShow={showNewSegmentModal} isShow={showNewSegmentModal}
docForm={docForm} docForm={docForm}
onCancel={() => onNewSegmentModalChange(false)} onCancel={() => onNewSegmentModalChange(false)}
onSave={resetList} onSave={resetList}
/> />
{/* Batch Action Buttons */}
{selectedSegmentIds.length > 0 {selectedSegmentIds.length > 0
&& <BatchAction && <BatchAction
className='absolute left-0 bottom-16 z-20' className='absolute left-0 bottom-16 z-20'

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

@ -170,7 +170,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
return ( return (
<div <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} onClick={handleClickCard}
> >
<div className='h-5 relative flex items-center justify-between'> <div className='h-5 relative flex items-center justify-between'>

185
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
/> />
) )
} }
return ( const renderActionButtons = () => {
<div className={'flex flex-col relative'}> return (
<div className='absolute right-0 top-0 flex items-center h-7'> <div className='flex items-center gap-x-2'>
{isEditing && ( <Button
<> onClick={handleCancel}
<Button >
onClick={handleCancel}> <div className='flex items-center gap-x-1'>
{t('common.operation.cancel')} <span className='text-components-button-secondary-text system-sm-medium'>{t('common.operation.cancel')}</span>
</Button> <span className='px-[1px] bg-components-kbd-bg-gray rounded-[4px] text-text-tertiary system-kbd'>ESC</span>
<Button </div>
variant='primary' </Button>
className='ml-3' <Button
onClick={handleSave} variant='primary'
disabled={loading} onClick={handleSave}
> disabled={loading}
{t('common.operation.save')} >
</Button> <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'>
{!isEditing && !archived && embeddingAvailable && ( <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 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>
</> </Button>
)}
<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> </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 = () => {
{!segInfo?.keywords?.length 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>
<TagInput <div className='text-text-tertiary w-full max-h-[200px] overflow-auto flex flex-wrap gap-1'>
items={keywords} {!segInfo?.keywords?.length
onChange={newKeywords => setKeywords(newKeywords)} ? '-'
disableAdd={!isEditing} : (
disableRemove={!isEditing || (keywords.length === 1)} <TagInput
/> items={keywords}
) onChange={newKeywords => setKeywords(newKeywords)}
} disableAdd={!isEditMode}
disableRemove={!isEditMode || (keywords.length === 1)}
/>
)
}
</div>
</div> </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> return (
<div className={cn(s.commonIcon, s.bezierCurveIcon)} /><span className={s.hashText}>{t('datasetDocuments.segment.vectorHash')}{segInfo?.index_node_hash}</span> <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 || ''} />
<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 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> </div>
{renderKeywords()}
</div> </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)

6
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
@ -45,11 +45,11 @@ const SegmentList: FC<ISegmentListProps> = ({
checked={selectedSegmentIds.includes(segItem.id)} checked={selectedSegmentIds.includes(segItem.id)}
onCheck={() => onSelected(segItem.id)} onCheck={() => onSelected(segItem.id)}
/> />
<div> <div className='grow'>
<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}

151
web/app/components/datasets/documents/detail/new-segment-modal.tsx
Unescape Escape View File

@ -3,15 +3,20 @@ import type { FC } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector' import { useContext } from 'use-context-selector'
import { useParams } from 'next/navigation' import { useParams } from 'next/navigation'
import { RiCloseLine } from '@remixicon/react' import { RiCloseLine, RiExpandDiagonalLine } from '@remixicon/react'
import Modal from '@/app/components/base/modal' import { useKeyPress } from 'ahooks'
import { SegmentIndexTag, useSegmentListContext } from './completed'
import Drawer from '@/app/components/base/drawer'
import Button from '@/app/components/base/button' import Button from '@/app/components/base/button'
import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common' 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 { ToastContext } from '@/app/components/base/toast'
import type { SegmentUpdater } from '@/models/datasets' import type { SegmentUpdater } from '@/models/datasets'
import { addSegment } from '@/service/datasets' import { addSegment } from '@/service/datasets'
import TagInput from '@/app/components/base/tag-input' 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 = { type NewSegmentModalProps = {
isShow: boolean isShow: boolean
@ -30,14 +35,15 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
const { notify } = useContext(ToastContext) const { notify } = useContext(ToastContext)
const [question, setQuestion] = useState('') const [question, setQuestion] = useState('')
const [answer, setAnswer] = useState('') const [answer, setAnswer] = useState('')
const { datasetId, documentId } = useParams() const { datasetId, documentId } = useParams<{ datasetId: string; documentId: string }>()
const [keywords, setKeywords] = useState<string[]>([]) const [keywords, setKeywords] = useState<string[]>([])
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [fullScreen, toggleFullScreen] = useSegmentListContext(s => [s.fullScreen, s.toggleFullScreen])
const handleCancel = () => { const handleCancel = () => {
onCancel()
setQuestion('') setQuestion('')
setAnswer('') setAnswer('')
onCancel()
setKeywords([]) 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 = () => { const renderContent = () => {
if (docForm === 'qa_model') { if (docForm === 'qa_model') {
return ( return (
@ -101,7 +118,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
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)}
@ -110,46 +127,98 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
) )
} }
return ( const renderActionButtons = () => {
<Modal isShow={isShow} onClose={() => { }} className='pt-8 px-8 pb-6 !max-w-[640px] !rounded-xl'> return (
<div className={'flex flex-col relative'}> <div className='flex items-center gap-x-2'>
<div className='absolute right-0 -top-0.5 flex items-center h-6'> <Button
<div className='flex justify-center items-center w-6 h-6 cursor-pointer' onClick={handleCancel}> onClick={handleCancel}
<RiCloseLine className='w-4 h-4 text-gray-500' /> >
<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> </Button>
<div className='mb-[14px]'> <Button
<span className='inline-flex items-center px-1.5 h-5 border border-gray-200 rounded-md'> variant='primary'
<Hash02 className='mr-0.5 w-3 h-3 text-gray-400' /> onClick={handleSave}
<span className='text-[11px] font-medium text-gray-500 italic'> disabled={loading}
{ >
docForm === 'qa_model' <div className='flex items-center gap-x-1'>
? t('datasetDocuments.segment.newQaSegment') <span className='text-components-button-primary-text'>{t('common.operation.save')}</span>
: t('datasetDocuments.segment.newTextSegment') <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> <span className='w-4 h-4 bg-components-kbd-bg-white rounded-[4px] text-text-primary-on-surface system-kbd'>S</span>
</span> </div>
</div> </div>
<div className='mb-4 py-1.5 h-[420px] overflow-auto'>{renderContent()}</div> </Button>
<div className='text-xs font-medium text-gray-500'>{t('datasetDocuments.segment.keywords')}</div> </div>
<div className='mb-8'> )
}
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)} /> <TagInput items={keywords} onChange={newKeywords => setKeywords(newKeywords)} />
</div> </div>
<div className='flex justify-end'> </div>
<Button )
onClick={handleCancel}> }
{t('common.operation.cancel')}
</Button> return (
<Button <Drawer
variant='primary' isOpen={isShow}
onClick={handleSave} onClose={() => {}}
disabled={loading} panelClassname={`!p-0 ${fullScreen
> ? '!max-w-full !w-full'
{t('common.operation.save')} : 'mt-16 mr-2 mb-2 !max-w-[560px] !w-[560px] border-[0.5px] border-components-panel-border rounded-xl'}`}
</Button> 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> </div>
{!fullScreen && (
<div className='flex items-center justify-end p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
{renderActionButtons()}
</div>
)}
</div> </div>
</Modal> </Drawer>
) )
} }

22
web/app/components/datasets/documents/list.tsx
Unescape Escape View File

@ -338,7 +338,7 @@ export const OperationAction: FC<{
<RiMoreFill className='w-4 h-4 text-text-components-button-secondary-text' /> <RiMoreFill className='w-4 h-4 text-text-components-button-secondary-text' />
</div> </div>
} }
btnClassName={open => cn(isListScene ? s.actionIconWrapperList : s.actionIconWrapperDetail, open ? '!bg-gray-100 !shadow-none' : '!bg-transparent')} btnClassName={open => cn(isListScene ? s.actionIconWrapperList : s.actionIconWrapperDetail, open ? '!hover:bg-state-base-hover !shadow-none' : '!bg-transparent')}
popupClassName='!w-full' popupClassName='!w-full'
className={`flex justify-end !w-[200px] h-fit !z-20 ${className}`} className={`flex justify-end !w-[200px] h-fit !z-20 ${className}`}
/> />
@ -371,7 +371,7 @@ export const OperationAction: FC<{
export const renderTdValue = (value: string | number | null, isEmptyStyle = false) => { export const renderTdValue = (value: string | number | null, isEmptyStyle = false) => {
return ( return (
<div className={cn(isEmptyStyle ? 'text-gray-400' : 'text-gray-700', s.tdValue)}> <div className={cn(isEmptyStyle ? 'text-text-tertiary' : 'text-text-secondary', s.tdValue)}>
{value ?? '-'} {value ?? '-'}
</div> </div>
) )
@ -418,7 +418,7 @@ const DocumentList: FC<IDocumentListProps> = ({
const isGeneralMode = chunkingMode !== ChuckingMode.parentChild const isGeneralMode = chunkingMode !== ChuckingMode.parentChild
const isQAMode = chunkingMode === ChuckingMode.qa const isQAMode = chunkingMode === ChuckingMode.qa
const [localDocs, setLocalDocs] = useState<LocalDoc[]>(documents) const [localDocs, setLocalDocs] = useState<LocalDoc[]>(documents)
const [enableSort, setEnableSort] = useState(false) const [enableSort, setEnableSort] = useState(true)
useEffect(() => { useEffect(() => {
setLocalDocs(documents) setLocalDocs(documents)
@ -426,7 +426,7 @@ const DocumentList: FC<IDocumentListProps> = ({
const onClickSort = () => { const onClickSort = () => {
setEnableSort(!enableSort) setEnableSort(!enableSort)
if (!enableSort) { if (enableSort) {
const sortedDocs = [...localDocs].sort((a, b) => dayjs(a.created_at).isBefore(dayjs(b.created_at)) ? -1 : 1) const sortedDocs = [...localDocs].sort((a, b) => dayjs(a.created_at).isBefore(dayjs(b.created_at)) ? -1 : 1)
setLocalDocs(sortedDocs) setLocalDocs(sortedDocs)
} }
@ -497,7 +497,7 @@ const DocumentList: FC<IDocumentListProps> = ({
return ( return (
<div className='relative w-full h-full overflow-x-auto'> <div className='relative w-full h-full overflow-x-auto'>
<table className={`min-w-[700px] max-w-full w-full border-collapse border-0 text-sm mt-3 ${s.documentTable}`}> <table className={`min-w-[700px] max-w-full w-full border-collapse border-0 text-sm mt-3 ${s.documentTable}`}>
<thead className="h-8 leading-8 border-b border-gray-200 text-gray-500 font-medium text-xs uppercase"> <thead className="h-8 leading-8 border-b border-divider-subtle text-text-tertiary font-medium text-xs uppercase">
<tr> <tr>
<td className='w-12'> <td className='w-12'>
<div className='flex items-center' onClick={e => e.stopPropagation()}> <div className='flex items-center' onClick={e => e.stopPropagation()}>
@ -519,22 +519,22 @@ const DocumentList: FC<IDocumentListProps> = ({
<td className='w-24'>{t('datasetDocuments.list.table.header.words')}</td> <td className='w-24'>{t('datasetDocuments.list.table.header.words')}</td>
<td className='w-44'>{t('datasetDocuments.list.table.header.hitCount')}</td> <td className='w-44'>{t('datasetDocuments.list.table.header.hitCount')}</td>
<td className='w-44'> <td className='w-44'>
<div className='flex justify-between items-center'> <div className='flex items-center' onClick={onClickSort}>
{t('datasetDocuments.list.table.header.uploadTime')} {t('datasetDocuments.list.table.header.uploadTime')}
<ArrowDownIcon className={cn('h-3 w-3 stroke-current stroke-2 cursor-pointer', enableSort ? 'text-gray-500' : 'text-gray-300')} onClick={onClickSort} /> <ArrowDownIcon className={cn('ml-0.5 h-3 w-3 stroke-current stroke-2 cursor-pointer', enableSort ? 'text-text-tertiary' : 'text-gray-300')} />
</div> </div>
</td> </td>
<td className='w-40'>{t('datasetDocuments.list.table.header.status')}</td> <td className='w-40'>{t('datasetDocuments.list.table.header.status')}</td>
<td className='w-20'>{t('datasetDocuments.list.table.header.action')}</td> <td className='w-20'>{t('datasetDocuments.list.table.header.action')}</td>
</tr> </tr>
</thead> </thead>
<tbody className="text-gray-700"> <tbody className="text-text-secondary">
{localDocs.map((doc, index) => { {localDocs.map((doc, index) => {
const isFile = doc.data_source_type === DataSourceType.FILE const isFile = doc.data_source_type === DataSourceType.FILE
const fileType = isFile ? doc.data_source_detail_dict?.upload_file?.extension : '' const fileType = isFile ? doc.data_source_detail_dict?.upload_file?.extension : ''
return <tr return <tr
key={doc.id} key={doc.id}
className={'border-b border-gray-200 h-8 hover:bg-gray-50 cursor-pointer'} className={'border-b border-divider-subtle h-8 hover:bg-background-default-hover cursor-pointer'}
onClick={() => { onClick={() => {
router.push(`/datasets/${datasetId}/documents/${doc.id}`) router.push(`/datasets/${datasetId}/documents/${doc.id}`)
}}> }}>
@ -573,13 +573,13 @@ const DocumentList: FC<IDocumentListProps> = ({
popupContent={t('datasetDocuments.list.table.rename')} popupContent={t('datasetDocuments.list.table.rename')}
> >
<div <div
className='p-1 rounded-md cursor-pointer hover:bg-black/5' className='p-1 rounded-md cursor-pointer hover:bg-state-base-hover'
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
handleShowRenameModal(doc) handleShowRenameModal(doc)
}} }}
> >
<Edit03 className='w-4 h-4 text-gray-500' /> <Edit03 className='w-4 h-4 text-text-tertiary' />
</div> </div>
</Tooltip> </Tooltip>
</div> </div>

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

@ -334,20 +334,21 @@ 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',
vectorHash: 'Vector hash: ', vectorHash: 'Vector hash: ',
questionPlaceholder: 'add question here', questionPlaceholder: 'Add question here',
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',
addChunk: 'Add Chunk',
delete: 'Delete this chunk ?', delete: 'Delete this chunk ?',
}, },
} }

1
web/i18n/zh-Hans/dataset-documents.ts
Unescape Escape View File

@ -346,6 +346,7 @@ const translation = {
contentEmpty: '内容不能为空', contentEmpty: '内容不能为空',
newTextSegment: '新文本分段', newTextSegment: '新文本分段',
newQaSegment: '新问答分段', newQaSegment: '新问答分段',
addChunk: '新增分段',
delete: '删除这个分段？', delete: '删除这个分段？',
}, },
} }

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 = {
@ -615,6 +616,14 @@ export type ChildChunkDetail = {
type: ChildChunkType type: ChildChunkType
} }
export type ChildSegmentResponse = {
data: ChildChunkDetail[]
total: number
total_pages: number
page: number
limit: number
}
export type UpdateDocumentParams = { export type UpdateDocumentParams = {
datasetId: string datasetId: string
documentId: string documentId: string

4
web/service/knowledge/use-document.ts
Unescape Escape View File

@ -35,7 +35,7 @@ const toBatchDocumentsIdParams = (documentIds: string[] | string) => {
export const useDocumentBatchAction = (action: DocumentActionType) => { export const useDocumentBatchAction = (action: DocumentActionType) => {
return useMutation({ return useMutation({
mutationFn: ({ datasetId, documentIds, documentId }: UpdateDocumentBatchParams) => { mutationFn: ({ datasetId, documentIds, documentId }: UpdateDocumentBatchParams) => {
return patch<CommonResponse>(`/datasets/${datasetId}/documents/status/${action}?${toBatchDocumentsIdParams(documentId || documentIds!)}`) return patch<CommonResponse>(`/datasets/${datasetId}/documents/status/${action}/batch?${toBatchDocumentsIdParams(documentId || documentIds!)}`)
}, },
}) })
} }
@ -59,7 +59,7 @@ export const useDocumentUnArchive = () => {
export const useDocumentDelete = () => { export const useDocumentDelete = () => {
return useMutation({ return useMutation({
mutationFn: ({ datasetId, documentIds, documentId }: UpdateDocumentBatchParams) => { mutationFn: ({ datasetId, documentIds, documentId }: UpdateDocumentBatchParams) => {
return del<CommonResponse>(`/datasets/${datasetId}/documents?${toBatchDocumentsIdParams(documentId || documentIds!)}`) return del<CommonResponse>(`/datasets/${datasetId}/documents/batch?${toBatchDocumentsIdParams(documentId || documentIds!)}`)
}, },
}) })
} }

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