admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Chore: frontend infrastructure upgrade (#16420)

Browse Source 
Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
2025-03-21 17:41:03 +08:00
committed by GitHub
parent e61415223b
commit 7709d9df20
1435 changed files with 13372 additions and 11612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx
View File

@@ -21,17 +21,17 @@ const EditItem: FC<Props> = ({
onChange,
}) => {
const { t } = useTranslation()
const avatar = type === EditItemType.Query ? <User className='w-6 h-6' /> : <Robot className='w-6 h-6' />
const avatar = type === EditItemType.Query ? <User className='h-6 w-6' /> : <Robot className='h-6 w-6' />
const name = type === EditItemType.Query ? t('appAnnotation.addModal.queryName') : t('appAnnotation.addModal.answerName')
const placeholder = type === EditItemType.Query ? t('appAnnotation.addModal.queryPlaceholder') : t('appAnnotation.addModal.answerPlaceholder')
return (
<div className='flex' onClick={e => e.stopPropagation()}>
<div className='shrink-0 mr-3'>
<div className='mr-3 shrink-0'>
{avatar}
</div>
<div className='grow'>
<div className='mb-1 system-xs-semibold text-text-primary'>{name}</div>
<div className='system-xs-semibold mb-1 text-text-primary'>{name}</div>
<Textarea
value={content}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}

6
web/app/components/app/annotation/add-annotation-modal/index.tsx
View File

@@ -76,7 +76,7 @@ const AddAnnotationModal: FC<Props> = ({
maxWidthClassName='!max-w-[480px]'
title={t('appAnnotation.addModal.title') as string}
body={(
<div className='p-6 pb-4 space-y-6'>
<div className='space-y-6 p-6 pb-4'>
<EditItem
type={EditItemType.Query}
content={question}
@@ -93,11 +93,11 @@ const AddAnnotationModal: FC<Props> = ({
(
<div>
{isAnnotationFull && (
<div className='mt-6 mb-4 px-6'>
<div className='mb-4 mt-6 px-6'>
<AnnotationFull />
</div>
)}
<div className='px-4 flex h-16 items-center justify-between border-t border-divider-subtle bg-background-section-burn rounded-bl-xl rounded-br-xl system-sm-medium text-text-tertiary'>
<div className='system-sm-medium flex h-16 items-center justify-between rounded-bl-xl rounded-br-xl border-t border-divider-subtle bg-background-section-burn px-4 text-text-tertiary'>
<div
className='flex items-center space-x-2'
>

16
web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.tsx
View File

@@ -35,17 +35,17 @@ const CSVDownload: FC = () => {
<div className='mt-6'>
<div className='system-sm-medium text-text-primary'>{t('share.generation.csvStructureTitle')}</div>
<div className='mt-2 max-h-[500px] overflow-auto'>
<table className='table-fixed w-full border-separate border-spacing-0 border border-divider-regular rounded-lg text-xs'>
<table className='w-full table-fixed border-separate border-spacing-0 rounded-lg border border-divider-regular text-xs'>
<thead className='text-text-tertiary'>
<tr>
<td className='h-9 pl-3 pr-2 border-b border-divider-regular'>{t('appAnnotation.batchModal.question')}</td>
<td className='h-9 pl-3 pr-2 border-b border-divider-regular'>{t('appAnnotation.batchModal.answer')}</td>
<td className='h-9 border-b border-divider-regular pl-3 pr-2'>{t('appAnnotation.batchModal.question')}</td>
<td className='h-9 border-b border-divider-regular pl-3 pr-2'>{t('appAnnotation.batchModal.answer')}</td>
</tr>
</thead>
<tbody className='text-text-secondary'>
<tr>
<td className='h-9 pl-3 pr-2 border-b border-divider-subtle text-[13px]'>{t('appAnnotation.batchModal.question')} 1</td>
<td className='h-9 pl-3 pr-2 border-b border-divider-subtle text-[13px]'>{t('appAnnotation.batchModal.answer')} 1</td>
<td className='h-9 border-b border-divider-subtle pl-3 pr-2 text-[13px]'>{t('appAnnotation.batchModal.question')} 1</td>
<td className='h-9 border-b border-divider-subtle pl-3 pr-2 text-[13px]'>{t('appAnnotation.batchModal.answer')} 1</td>
</tr>
<tr>
<td className='h-9 pl-3 pr-2 text-[13px]'>{t('appAnnotation.batchModal.question')} 2</td>
@@ -55,14 +55,14 @@ const CSVDownload: FC = () => {
</table>
</div>
<CSVDownloader
className="block mt-2 cursor-pointer"
className="mt-2 block cursor-pointer"
type={Type.Link}
filename={`template-${locale}`}
bom={true}
data={getTemplate()}
>
<div className='flex items-center h-[18px] space-x-1 text-text-accent system-xs-medium'>
<DownloadIcon className='w-3 h-3 mr-1' />
<div className='system-xs-medium flex h-[18px] items-center space-x-1 text-text-accent'>
<DownloadIcon className='mr-1 h-3 w-3' />
{t('appAnnotation.batchModal.template')}
</div>
</CSVDownloader>

22
web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
View File

@@ -91,29 +91,29 @@ const CSVUploader: FC<Props> = ({
/>
<div ref={dropRef}>
{!file && (
<div className={cn('flex items-center h-20 rounded-xl bg-components-dropzone-bg border border-dashed border-components-dropzone-border system-sm-regular', dragging && 'bg-components-dropzone-bg-accent border border-components-dropzone-border-accent')}>
<div className='w-full flex items-center justify-center space-x-2'>
<div className={cn('system-sm-regular flex h-20 items-center rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg', dragging && 'border border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
<div className='flex w-full items-center justify-center space-x-2'>
<CSVIcon className="shrink-0" />
<div className='text-text-tertiary'>
{t('appAnnotation.batchModal.csvUploadTitle')}
<span className='text-text-accent cursor-pointer' onClick={selectHandle}>{t('appAnnotation.batchModal.browse')}</span>
<span className='cursor-pointer text-text-accent' onClick={selectHandle}>{t('appAnnotation.batchModal.browse')}</span>
</div>
</div>
{dragging && <div ref={dragRef} className='absolute w-full h-full top-0 left-0' />}
{dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />}
</div>
)}
{file && (
<div className={cn('flex items-center h-20 px-6 rounded-xl bg-components-panel-bg border border-components-panel-border text-sm font-normal group', 'hover:bg-components-panel-bg-blur hover:border-components-panel-bg-blur')}>
<div className={cn('group flex h-20 items-center rounded-xl border border-components-panel-border bg-components-panel-bg px-6 text-sm font-normal', 'hover:border-components-panel-bg-blur hover:bg-components-panel-bg-blur')}>
<CSVIcon className="shrink-0" />
<div className='flex ml-2 w-0 grow'>
<span className='max-w-[calc(100%_-_30px)] text-ellipsis whitespace-nowrap overflow-hidden text-text-primary'>{file.name.replace(/.csv$/, '')}</span>
<div className='ml-2 flex w-0 grow'>
<span className='max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap text-text-primary'>{file.name.replace(/.csv$/, '')}</span>
<span className='shrink-0 text-text-tertiary'>.csv</span>
</div>
<div className='hidden group-hover:flex items-center'>
<div className='hidden items-center group-hover:flex'>
<Button variant='secondary' onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
<div className='mx-2 w-px h-4 bg-divider-regular' />
<div className='p-2 cursor-pointer' onClick={removeFile}>
<RiDeleteBinLine className='w-4 h-4 text-text-tertiary' />
<div className='mx-2 h-4 w-px bg-divider-regular' />
<div className='cursor-pointer p-2' onClick={removeFile}>
<RiDeleteBinLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
</div>

12
web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
View File

@@ -87,10 +87,10 @@ const BatchModal: FC<IBatchModalProps> = ({
}
return (
<Modal isShow={isShow} onClose={() => { }} className='px-8 py-6 !max-w-[520px] !rounded-xl'>
<div className='relative pb-1 system-xl-medium text-text-primary'>{t('appAnnotation.batchModal.title')}</div>
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onCancel}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<Modal isShow={isShow} onClose={() => { }} className='!max-w-[520px] !rounded-xl px-8 py-6'>
<div className='system-xl-medium relative pb-1 text-text-primary'>{t('appAnnotation.batchModal.title')}</div>
<div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onCancel}>
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
<CSVUploader
file={currentCSV}
@@ -104,8 +104,8 @@ const BatchModal: FC<IBatchModalProps> = ({
</div>
)}
<div className='mt-[28px] pt-6 flex justify-end'>
<Button className='mr-2 text-text-tertiary system-sm-medium' onClick={onCancel}>
<div className='mt-[28px] flex justify-end pt-6'>
<Button className='system-sm-medium mr-2 text-text-tertiary' onClick={onCancel}>
{t('appAnnotation.batchModal.cancel')}
</Button>
<Button

26
web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
View File

@@ -20,11 +20,11 @@ type Props = {
}
export const EditTitle: FC<{ className?: string; title: string }> = ({ className, title }) => (
<div className={cn(className, 'flex items-center h-[18px] system-xs-medium text-text-tertiary')}>
<RiEditFill className='mr-1 w-3.5 h-3.5' />
<div className={cn(className, 'system-xs-medium flex h-[18px] items-center text-text-tertiary')}>
<RiEditFill className='mr-1 h-3.5 w-3.5' />
<div>{title}</div>
<div
className='ml-2 grow h-[1px]'
className='ml-2 h-[1px] grow'
style={{
background: 'linear-gradient(90deg, rgba(0, 0, 0, 0.05) -1.65%, rgba(0, 0, 0, 0.00) 100%)',
}}
@@ -40,7 +40,7 @@ const EditItem: FC<Props> = ({
const { t } = useTranslation()
const [newContent, setNewContent] = useState('')
const showNewContent = newContent && newContent !== content
const avatar = type === EditItemType.Query ? <User className='w-6 h-6' /> : <Robot className='w-6 h-6' />
const avatar = type === EditItemType.Query ? <User className='h-6 w-6' /> : <Robot className='h-6 w-6' />
const name = type === EditItemType.Query ? t('appAnnotation.editModal.queryName') : t('appAnnotation.editModal.answerName')
const editTitle = type === EditItemType.Query ? t('appAnnotation.editModal.yourQuery') : t('appAnnotation.editModal.yourAnswer')
const placeholder = type === EditItemType.Query ? t('appAnnotation.editModal.queryPlaceholder') : t('appAnnotation.editModal.answerPlaceholder')
@@ -58,11 +58,11 @@ const EditItem: FC<Props> = ({
return (
<div className='flex' onClick={e => e.stopPropagation()}>
<div className='shrink-0 mr-3'>
<div className='mr-3 shrink-0'>
{avatar}
</div>
<div className='grow'>
<div className='mb-1 system-xs-semibold text-text-primary'>{name}</div>
<div className='system-xs-semibold mb-1 text-text-primary'>{name}</div>
<div className='system-sm-regular text-text-primary'>{content}</div>
{!isEdit
? (
@@ -70,34 +70,34 @@ const EditItem: FC<Props> = ({
{showNewContent && (
<div className='mt-3'>
<EditTitle title={editTitle} />
<div className='mt-1 system-sm-regular text-text-primary'>{newContent}</div>
<div className='system-sm-regular mt-1 text-text-primary'>{newContent}</div>
</div>
)}
<div className='mt-2 flex items-center'>
{!readonly && (
<div
className='flex items-center space-x-1 system-xs-medium text-text-accent cursor-pointer'
className='system-xs-medium flex cursor-pointer items-center space-x-1 text-text-accent'
onClick={() => {
setIsEdit(true)
}}
>
<RiEditLine className='mr-1 w-3.5 h-3.5' />
<RiEditLine className='mr-1 h-3.5 w-3.5' />
<div>{t('common.operation.edit')}</div>
</div>
)}
{showNewContent && (
<div className='ml-2 flex items-center system-xs-medium text-text-tertiary'>
<div className='system-xs-medium ml-2 flex items-center text-text-tertiary'>
<div className='mr-2'>·</div>
<div
className='flex items-center space-x-1 cursor-pointer'
className='flex cursor-pointer items-center space-x-1'
onClick={() => {
setNewContent(content)
onSave(content)
}}
>
<div className='w-3.5 h-3.5'>
<RiDeleteBinLine className='w-3.5 h-3.5' />
<div className='h-3.5 w-3.5'>
<RiDeleteBinLine className='h-3.5 w-3.5' />
</div>
<div>{t('common.operation.delete')}</div>
</div>

8
web/app/components/app/annotation/edit-annotation-modal/index.tsx
View File

@@ -86,7 +86,7 @@ const EditAnnotationModal: FC<Props> = ({
title={t('appAnnotation.editModal.title') as string}
body={(
<div>
<div className='p-6 pb-4 space-y-6'>
<div className='space-y-6 p-6 pb-4'>
<EditItem
type={EditItemType.Query}
content={query}
@@ -115,7 +115,7 @@ const EditAnnotationModal: FC<Props> = ({
foot={
<div>
{isAnnotationFull && (
<div className='mt-6 mb-4 px-6'>
<div className='mb-4 mt-6 px-6'>
<AnnotationFull />
</div>
)}
@@ -123,9 +123,9 @@ const EditAnnotationModal: FC<Props> = ({
{
annotationId
? (
<div className='px-4 flex h-16 items-center justify-between border-t border-divider-subtle bg-background-section-burn rounded-bl-xl rounded-br-xl system-sm-medium text-text-tertiary'>
<div className='system-sm-medium flex h-16 items-center justify-between rounded-bl-xl rounded-br-xl border-t border-divider-subtle bg-background-section-burn px-4 text-text-tertiary'>
<div
className='flex items-center pl-3 space-x-2 cursor-pointer'
className='flex cursor-pointer items-center space-x-2 pl-3'
onClick={() => setShowModal(true)}
>
<MessageCheckRemove />

8
web/app/components/app/annotation/empty-element.tsx
View File

@@ -13,10 +13,10 @@ const EmptyElement: FC = () => {
const { t } = useTranslation()
return (
<div className='flex items-center justify-center h-full'>
<div className='bg-background-section-burn w-[560px] h-fit box-border px-5 py-4 rounded-2xl'>
<span className='text-text-secondary system-md-semibold'>{t('appAnnotation.noData.title')}<ThreeDotsIcon className='inline relative -top-3 -left-1.5' /></span>
<div className='mt-2 text-text-tertiary system-sm-regular'>
<div className='flex h-full items-center justify-center'>
<div className='box-border h-fit w-[560px] rounded-2xl bg-background-section-burn px-5 py-4'>
<span className='system-md-semibold text-text-secondary'>{t('appAnnotation.noData.title')}<ThreeDotsIcon className='relative -left-1.5 -top-3 inline' /></span>
<div className='system-sm-regular mt-2 text-text-tertiary'>
{t('appAnnotation.noData.description')}
</div>
</div>

8
web/app/components/app/annotation/filter.tsx
View File

@@ -6,15 +6,15 @@ import useSWR from 'swr'
import Input from '@/app/components/base/input'
import { fetchAnnotationsCount } from '@/service/log'
export interface QueryParam {
export type QueryParam = {
keyword?: string
}
interface IFilterProps {
type IFilterProps = {
appId: string
queryParams: QueryParam
setQueryParams: (v: QueryParam) => void
children: JSX.Element
children: React.JSX.Element
}
const Filter: FC<IFilterProps> = ({
@@ -29,7 +29,7 @@ const Filter: FC<IFilterProps> = ({
if (!data)
return null
return (
<div className='flex justify-between flex-row flex-wrap gap-2 items-center mb-2'>
<div className='mb-2 flex flex-row flex-wrap items-center justify-between gap-2'>
<Input
wrapperClassName='w-[200px]'
showLeftIcon

40
web/app/components/app/annotation/header-opts/index.tsx
View File

@@ -10,7 +10,7 @@ import { useContext } from 'use-context-selector'
import {
useCSVDownloader,
} from 'react-papaparse'
import { Menu, Transition } from '@headlessui/react'
import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
import Button from '../../../base/button'
import AddAnnotationModal from '../add-annotation-modal'
import type { AnnotationItemBasic } from '../type'
@@ -80,18 +80,18 @@ const HeaderOptions: FC<Props> = ({
const Operations = () => {
return (
<div className="w-full py-1">
<button className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]' onClick={() => {
<button className='mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 hover:bg-components-panel-on-panel-item-bg-hover disabled:opacity-50' onClick={() => {
setShowBulkImportModal(true)
}}>
<FilePlus02 className='w-4 h-4 text-text-tertiary' />
<span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkImport')}</span>
<FilePlus02 className='h-4 w-4 text-text-tertiary' />
<span className='system-sm-regular grow text-left text-text-secondary'>{t('appAnnotation.table.header.bulkImport')}</span>
</button>
<Menu as="div" className="relative w-full h-full">
<Menu.Button className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]'>
<FileDownload02 className='w-4 h-4 text-text-tertiary' />
<span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkExport')}</span>
<ChevronRight className='shrink-0 w-[14px] h-[14px] text-text-tertiary' />
</Menu.Button>
<Menu as="div" className="relative h-full w-full">
<MenuButton className='mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 hover:bg-components-panel-on-panel-item-bg-hover disabled:opacity-50'>
<FileDownload02 className='h-4 w-4 text-text-tertiary' />
<span className='system-sm-regular grow text-left text-text-secondary'>{t('appAnnotation.table.header.bulkExport')}</span>
<ChevronRight className='h-[14px] w-[14px] shrink-0 text-text-tertiary' />
</MenuButton>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
@@ -101,9 +101,9 @@ const HeaderOptions: FC<Props> = ({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
<MenuItems
className={cn(
'absolute top-[1px] left-1 -translate-x-full py-1 min-w-[100px] z-10 bg-components-panel-bg border-[0.5px] border-components-panel-on-panel-item-bg origin-top-right rounded-xl shadow-xs',
'absolute left-1 top-[1px] z-10 min-w-[100px] origin-top-right -translate-x-full rounded-xl border-[0.5px] border-components-panel-on-panel-item-bg bg-components-panel-bg py-1 shadow-xs',
)}
>
<CSVDownloader
@@ -115,14 +115,14 @@ const HeaderOptions: FC<Props> = ({
...list.map(item => [item.question, item.answer]),
]}
>
<button disabled={annotationUnavailable} className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]'>
<span className='grow text-text-secondary system-sm-regular text-left'>CSV</span>
<button disabled={annotationUnavailable} className='mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 hover:bg-components-panel-on-panel-item-bg-hover disabled:opacity-50'>
<span className='system-sm-regular grow text-left text-text-secondary'>CSV</span>
</button>
</CSVDownloader>
<button disabled={annotationUnavailable} className={cn('h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]', '!border-0')} onClick={JSONLOutput}>
<span className='grow text-text-secondary system-sm-regular text-left'>JSONL</span>
<button disabled={annotationUnavailable} className={cn('mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 hover:bg-components-panel-on-panel-item-bg-hover disabled:opacity-50', '!border-0')} onClick={JSONLOutput}>
<span className='system-sm-regular grow text-left text-text-secondary'>JSONL</span>
</button>
</Menu.Items>
</MenuItems>
</Transition>
</Menu>
</div>
@@ -134,7 +134,7 @@ const HeaderOptions: FC<Props> = ({
return (
<div className='flex space-x-2'>
<Button variant='primary' onClick={() => setShowAddModal(true)}>
<RiAddLine className='w-4 h-4 mr-0.5' />
<RiAddLine className='mr-0.5 h-4 w-4' />
<div>{t('appAnnotation.table.header.addAnnotation')}</div>
</Button>
<CustomPopover
@@ -143,11 +143,11 @@ const HeaderOptions: FC<Props> = ({
trigger="click"
btnElement={
<Button variant='secondary' className='w-8 p-0'>
<RiMoreFill className='w-4 h-4' />
<RiMoreFill className='h-4 w-4' />
</Button>
}
btnClassName='p-0 border-0'
className={'!w-[155px] h-fit !z-20'}
className={'!z-20 h-fit !w-[155px]'}
popupClassName='!w-full !overflow-visible'
manualClose
/>

18
web/app/components/app/annotation/index.tsx
View File

@@ -152,15 +152,15 @@ const Annotation: FC<Props> = ({
}
return (
<div className='flex flex-col h-full'>
<p className='text-text-tertiary system-sm-regular'>{t('appLog.description')}</p>
<div className='flex flex-col py-4 flex-1'>
<div className='flex h-full flex-col'>
<p className='system-sm-regular text-text-tertiary'>{t('appLog.description')}</p>
<div className='flex flex-1 flex-col py-4'>
<Filter appId={appDetail.id} queryParams={queryParams} setQueryParams={setQueryParams}>
<div className='flex items-center space-x-2'>
{isChatApp && (
<>
<div className={cn(!annotationConfig?.enabled && 'pr-2', 'flex items-center h-7 rounded-lg bg-components-panel-bg-blur border border-components-panel-border pl-2 space-x-1')}>
<MessageFast className='w-4 h-4 text-util-colors-indigo-indigo-600' />
<div className={cn(!annotationConfig?.enabled && 'pr-2', 'flex h-7 items-center space-x-1 rounded-lg border border-components-panel-border bg-components-panel-bg-blur pl-2')}>
<MessageFast className='h-4 w-4 text-util-colors-indigo-indigo-600' />
<div className='system-sm-medium text-text-primary'>{t('appAnnotation.name')}</div>
<Switch
key={controlRefreshSwitch}
@@ -188,14 +188,14 @@ const Annotation: FC<Props> = ({
></Switch>
{annotationConfig?.enabled && (
<div className='flex items-center pl-1.5'>
<div className='shrink-0 mr-1 w-[1px] h-3.5 bg-divider-subtle'></div>
<div className='mr-1 h-3.5 w-[1px] shrink-0 bg-divider-subtle'></div>
<ActionButton onClick={() => setIsShowEdit(true)}>
<RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
<RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
</ActionButton>
</div>
)}
</div>
<div className='shrink-0 mx-3 w-[1px] h-3.5 bg-divider-regular'></div>
<div className='mx-3 h-3.5 w-[1px] shrink-0 bg-divider-regular'></div>
</>
)}
@@ -217,7 +217,7 @@ const Annotation: FC<Props> = ({
onRemove={handleRemove}
onView={handleView}
/>
: <div className='grow flex h-full items-center justify-center'><EmptyElement /></div>
: <div className='flex h-full grow items-center justify-center'><EmptyElement /></div>
}
{/* Show Pagination only if the total is more than the limit */}
{(total && total > APP_PAGE_LIMIT)

24
web/app/components/app/annotation/list.tsx
View File

@@ -9,7 +9,7 @@ import ActionButton from '@/app/components/base/action-button'
import useTimestamp from '@/hooks/use-timestamp'
import cn from '@/utils/classnames'
interface Props {
type Props = {
list: AnnotationItem[]
onRemove: (id: string) => void
onView: (item: AnnotationItem) => void
@@ -29,18 +29,18 @@ const List: FC<Props> = ({
<table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}>
<thead className='system-xs-medium-uppercase text-text-tertiary'>
<tr>
<td className='pl-2 pr-1 w-5 rounded-l-lg bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.table.header.question')}</td>
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.table.header.answer')}</td>
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.table.header.createdAt')}</td>
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.table.header.hits')}</td>
<td className='pl-3 py-1.5 rounded-r-lg bg-background-section-burn whitespace-nowrap w-[96px]'>{t('appAnnotation.table.header.actions')}</td>
<td className='w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1'>{t('appAnnotation.table.header.question')}</td>
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.answer')}</td>
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.createdAt')}</td>
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.hits')}</td>
<td className='w-[96px] whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.actions')}</td>
</tr>
</thead>
<tbody className="text-text-secondary system-sm-regular">
<tbody className="system-sm-regular text-text-secondary">
{list.map(item => (
<tr
key={item.id}
className='border-b border-divider-subtle hover:bg-background-default-hover cursor-pointer'
className='cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover'
onClick={
() => {
onView(item)
@@ -48,11 +48,11 @@ const List: FC<Props> = ({
}
>
<td
className='p-3 pr-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-[250px]'
className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
title={item.question}
>{item.question}</td>
<td
className='p-3 pr-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-[250px]'
className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
title={item.answer}
>{item.answer}</td>
<td className='p-3 pr-2'>{formatTime(item.created_at, t('appLog.dateTimeFormat') as string)}</td>
@@ -61,7 +61,7 @@ const List: FC<Props> = ({
{/* Actions */}
<div className='flex space-x-1 text-text-tertiary'>
<ActionButton onClick={() => onView(item)}>
<RiEditLine className='w-4 h-4' />
<RiEditLine className='h-4 w-4' />
</ActionButton>
<ActionButton
onClick={() => {
@@ -69,7 +69,7 @@ const List: FC<Props> = ({
setShowConfirmDelete(true)
}}
>
<RiDeleteBinLine className='w-4 h-4' />
<RiDeleteBinLine className='h-4 w-4' />
</ActionButton>
</div>
</td>

6
web/app/components/app/annotation/view-annotation-modal/hit-history-no-data.tsx
View File

@@ -7,9 +7,9 @@ import { ClockFastForward } from '@/app/components/base/icons/src/vender/line/ti
const HitHistoryNoData: FC = () => {
const { t } = useTranslation()
return (
<div className='mx-auto mt-20 w-[480px] p-5 rounded-2xl bg-background-section-burn space-y-2'>
<div className='inline-block p-3 rounded-lg border border-divider-subtle'>
<ClockFastForward className='w-5 h-5 text-text-tertiary' />
<div className='mx-auto mt-20 w-[480px] space-y-2 rounded-2xl bg-background-section-burn p-5'>
<div className='inline-block rounded-lg border border-divider-subtle p-3'>
<ClockFastForward className='h-5 w-5 text-text-tertiary' />
</div>
<div className='system-sm-regular text-text-tertiary'>{t('appAnnotation.viewModal.noHitHistory')}</div>
</div>

30
web/app/components/app/annotation/view-annotation-modal/index.tsx
View File

@@ -116,30 +116,30 @@ const ViewAnnotationModal: FC<Props> = ({
<table className={cn('w-full min-w-[440px] border-collapse border-0')} >
<thead className="system-xs-medium-uppercase text-text-tertiary">
<tr>
<td className='pl-2 pr-1 w-5 rounded-l-lg bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.query')}</td>
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.match')}</td>
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.response')}</td>
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.source')}</td>
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.score')}</td>
<td className='pl-3 py-1.5 rounded-r-lg bg-background-section-burn whitespace-nowrap w-[160px]'>{t('appAnnotation.hitHistoryTable.time')}</td>
<td className='w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1'>{t('appAnnotation.hitHistoryTable.query')}</td>
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.match')}</td>
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.response')}</td>
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.source')}</td>
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.score')}</td>
<td className='w-[160px] whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.time')}</td>
</tr>
</thead>
<tbody className="text-text-secondary system-sm-regular">
<tbody className="system-sm-regular text-text-secondary">
{hitHistoryList.map(item => (
<tr
key={item.id}
className={'border-b border-divider-subtle hover:bg-background-default-hover cursor-pointer'}
className={'cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover'}
>
<td
className='p-3 pr-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-[250px]'
className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
title={item.question}
>{item.question}</td>
<td
className='p-3 pr-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-[250px]'
className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
title={item.match}
>{item.match}</td>
<td
className='p-3 pr-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-[250px]'
className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
title={item.response}
>{item.response}</td>
<td className='p-3 pr-2'>{item.source}</td>
@@ -168,7 +168,7 @@ const ViewAnnotationModal: FC<Props> = ({
maxWidthClassName='!max-w-[800px]'
title={
<TabSlider
className='shrink-0 relative top-[9px]'
className='relative top-[9px] shrink-0'
value={activeTab}
onChange={v => setActiveTab(v as TabType)}
options={tabs}
@@ -178,7 +178,7 @@ const ViewAnnotationModal: FC<Props> = ({
}
body={(
<div>
<div className='p-6 pb-4 space-y-6'>
<div className='space-y-6 p-6 pb-4'>
{activeTab === TabType.annotation ? annotationTab : hitHistoryTab}
</div>
<Confirm
@@ -195,9 +195,9 @@ const ViewAnnotationModal: FC<Props> = ({
)}
foot={id
? (
<div className='px-4 flex h-16 items-center justify-between border-t border-divider-subtle bg-background-section-burn rounded-bl-xl rounded-br-xl system-sm-medium text-text-tertiary'>
<div className='system-sm-medium flex h-16 items-center justify-between rounded-bl-xl rounded-br-xl border-t border-divider-subtle bg-background-section-burn px-4 text-text-tertiary'>
<div
className='flex items-center pl-3 space-x-2 cursor-pointer'
className='flex cursor-pointer items-center space-x-2 pl-3'
onClick={() => setShowModal(true)}
>
<MessageCheckRemove />