mirror of
https://github.com/langgenius/dify.git
synced 2026-05-04 17:38:04 +08:00
Chore: frontend infrastructure upgrade (#16420)
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
GitHub
@ -191,7 +191,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
|
||||
}}
|
||||
className='block w-full'
|
||||
>
|
||||
<div className={cn('flex rounded-lg', expand ? 'p-2 pb-2.5 flex-col gap-2' : 'p-1 gap-1 justify-center items-start', open && 'bg-state-base-hover', isCurrentWorkspaceEditor && 'hover:bg-state-base-hover cursor-pointer')}>
|
||||
<div className={cn('flex rounded-lg', expand ? 'flex-col gap-2 p-2 pb-2.5' : 'items-start justify-center gap-1 p-1', open && 'bg-state-base-hover', isCurrentWorkspaceEditor && 'cursor-pointer hover:bg-state-base-hover')}>
|
||||
<div className={`flex items-center self-stretch ${expand ? 'justify-between' : 'flex-col gap-1'}`}>
|
||||
<AppIcon
|
||||
size={expand ? 'large' : 'small'}
|
||||
@ -200,9 +200,9 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
|
||||
background={appDetail.icon_background}
|
||||
imageUrl={appDetail.icon_url}
|
||||
/>
|
||||
<div className='flex p-0.5 justify-center items-center rounded-md'>
|
||||
<div className='flex w-5 h-5 justify-center items-center'>
|
||||
<RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
|
||||
<div className='flex items-center justify-center rounded-md p-0.5'>
|
||||
<div className='flex h-5 w-5 items-center justify-center'>
|
||||
<RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -210,9 +210,9 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
|
||||
expand && (
|
||||
<div className='flex flex-col items-start gap-1'>
|
||||
<div className='flex w-full'>
|
||||
<div className='text-text-secondary system-md-semibold truncate'>{appDetail.name}</div>
|
||||
<div className='system-md-semibold truncate text-text-secondary'>{appDetail.name}</div>
|
||||
</div>
|
||||
<div className='text-text-tertiary system-2xs-medium-uppercase'>{appDetail.mode === 'advanced-chat' ? t('app.types.chatbot') : appDetail.mode === 'agent-chat' ? t('app.types.agent') : appDetail.mode === 'chat' ? t('app.types.chatbot') : appDetail.mode === 'completion' ? t('app.types.completion') : t('app.types.workflow')}</div>
|
||||
<div className='system-2xs-medium-uppercase text-text-tertiary'>{appDetail.mode === 'advanced-chat' ? t('app.types.chatbot') : appDetail.mode === 'agent-chat' ? t('app.types.agent') : appDetail.mode === 'chat' ? t('app.types.chatbot') : appDetail.mode === 'completion' ? t('app.types.completion') : t('app.types.workflow')}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -221,9 +221,9 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
|
||||
<ContentDialog
|
||||
show={open}
|
||||
onClose={() => setOpen(false)}
|
||||
className='!p-0 flex flex-col absolute left-2 top-2 bottom-2 w-[420px] rounded-2xl'
|
||||
className='absolute bottom-2 left-2 top-2 flex w-[420px] flex-col rounded-2xl !p-0'
|
||||
>
|
||||
<div className='flex p-4 flex-col justify-center items-start gap-3 self-stretch shrink-0'>
|
||||
<div className='flex shrink-0 flex-col items-start justify-center gap-3 self-stretch p-4'>
|
||||
<div className='flex items-center gap-3 self-stretch'>
|
||||
<AppIcon
|
||||
size="large"
|
||||
@ -232,14 +232,14 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
|
||||
background={appDetail.icon_background}
|
||||
imageUrl={appDetail.icon_url}
|
||||
/>
|
||||
<div className='flex flex-col justify-center items-start grow w-full'>
|
||||
<div className='text-text-secondary system-md-semibold truncate w-full'>{appDetail.name}</div>
|
||||
<div className='text-text-tertiary system-2xs-medium-uppercase'>{appDetail.mode === 'advanced-chat' ? t('app.types.chatbot') : appDetail.mode === 'agent-chat' ? t('app.types.agent') : appDetail.mode === 'chat' ? t('app.types.chatbot') : appDetail.mode === 'completion' ? t('app.types.completion') : t('app.types.workflow')}</div>
|
||||
<div className='flex w-full grow flex-col items-start justify-center'>
|
||||
<div className='system-md-semibold w-full truncate text-text-secondary'>{appDetail.name}</div>
|
||||
<div className='system-2xs-medium-uppercase text-text-tertiary'>{appDetail.mode === 'advanced-chat' ? t('app.types.chatbot') : appDetail.mode === 'agent-chat' ? t('app.types.agent') : appDetail.mode === 'chat' ? t('app.types.chatbot') : appDetail.mode === 'completion' ? t('app.types.completion') : t('app.types.workflow')}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* description */}
|
||||
{appDetail.description && (
|
||||
<div className='text-text-tertiary system-xs-regular'>{appDetail.description}</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>{appDetail.description}</div>
|
||||
)}
|
||||
{/* operations */}
|
||||
<div className='flex items-center gap-1 self-stretch'>
|
||||
@ -252,8 +252,8 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
|
||||
setShowEditModal(true)
|
||||
}}
|
||||
>
|
||||
<RiEditLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
|
||||
<span className='text-components-button-secondary-text system-xs-medium'>{t('app.editApp')}</span>
|
||||
<RiEditLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
|
||||
<span className='system-xs-medium text-components-button-secondary-text'>{t('app.editApp')}</span>
|
||||
</Button>
|
||||
<Button
|
||||
size={'small'}
|
||||
@ -264,8 +264,8 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
|
||||
setShowDuplicateModal(true)
|
||||
}}
|
||||
>
|
||||
<RiFileCopy2Line className='w-3.5 h-3.5 text-components-button-secondary-text' />
|
||||
<span className='text-components-button-secondary-text system-xs-medium'>{t('app.duplicate')}</span>
|
||||
<RiFileCopy2Line className='h-3.5 w-3.5 text-components-button-secondary-text' />
|
||||
<span className='system-xs-medium text-components-button-secondary-text'>{t('app.duplicate')}</span>
|
||||
</Button>
|
||||
<Button
|
||||
size={'small'}
|
||||
@ -273,8 +273,8 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
|
||||
className='gap-[1px]'
|
||||
onClick={exportCheck}
|
||||
>
|
||||
<RiFileDownloadLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
|
||||
<span className='text-components-button-secondary-text system-xs-medium'>{t('app.export')}</span>
|
||||
<RiFileDownloadLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
|
||||
<span className='system-xs-medium text-components-button-secondary-text'>{t('app.export')}</span>
|
||||
</Button>
|
||||
{
|
||||
(appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow') && (
|
||||
@ -287,8 +287,8 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
|
||||
setShowImportDSLModal(true)
|
||||
}}
|
||||
>
|
||||
<RiFileUploadLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
|
||||
<span className='text-components-button-secondary-text system-xs-medium'>{t('workflow.common.importDSL')}</span>
|
||||
<RiFileUploadLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
|
||||
<span className='system-xs-medium text-components-button-secondary-text'>{t('workflow.common.importDSL')}</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
@ -298,10 +298,10 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
|
||||
<CardView
|
||||
appId={appDetail.id}
|
||||
isInPanel={true}
|
||||
className='flex flex-col px-2 py-1 gap-2 grow overflow-auto'
|
||||
className='flex grow flex-col gap-2 overflow-auto px-2 py-1'
|
||||
/>
|
||||
</div>
|
||||
<div className='flex p-2 flex-col justify-center items-start gap-3 self-stretch border-t-[0.5px] border-divider-subtle shrink-0 min-h-fit'>
|
||||
<div className='flex min-h-fit shrink-0 flex-col items-start justify-center gap-3 self-stretch border-t-[0.5px] border-divider-subtle p-2'>
|
||||
<Button
|
||||
size={'medium'}
|
||||
variant={'ghost'}
|
||||
@ -311,8 +311,8 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
|
||||
setShowConfirmDelete(true)
|
||||
}}
|
||||
>
|
||||
<RiDeleteBinLine className='w-4 h-4 text-text-tertiary' />
|
||||
<span className='text-text-tertiary system-sm-medium'>{t('common.operation.deleteApp')}</span>
|
||||
<RiDeleteBinLine className='h-4 w-4 text-text-tertiary' />
|
||||
<span className='system-sm-medium text-text-tertiary'>{t('common.operation.deleteApp')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</ContentDialog>
|
||||
|
||||
@ -48,9 +48,9 @@ const NotionSvg = <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xm
|
||||
|
||||
const ICON_MAP = {
|
||||
app: <AppIcon className='border !border-[rgba(0,0,0,0.05)]' />,
|
||||
api: <AppIcon innerIcon={ApiSvg} className='border !bg-purple-50 !border-purple-200' />,
|
||||
api: <AppIcon innerIcon={ApiSvg} className='border !border-purple-200 !bg-purple-50' />,
|
||||
dataset: <AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />,
|
||||
webapp: <AppIcon innerIcon={WebappSvg} className='border !bg-primary-100 !border-primary-200' />,
|
||||
webapp: <AppIcon innerIcon={WebappSvg} className='border !border-primary-200 !bg-primary-100' />,
|
||||
notion: <AppIcon innerIcon={NotionSvg} className='!border-[0.5px] !border-indigo-100 !bg-white' />,
|
||||
}
|
||||
|
||||
@ -58,20 +58,20 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className="flex items-center grow">
|
||||
<div className="flex grow items-center">
|
||||
{icon && icon_background && iconType === 'app' && (
|
||||
<div className='shrink-0 mr-3'>
|
||||
<div className='mr-3 shrink-0'>
|
||||
<AppIcon icon={icon} background={icon_background} />
|
||||
</div>
|
||||
)}
|
||||
{iconType !== 'app'
|
||||
&& <div className='shrink-0 mr-3'>
|
||||
&& <div className='mr-3 shrink-0'>
|
||||
{ICON_MAP[iconType]}
|
||||
</div>
|
||||
|
||||
}
|
||||
{mode === 'expand' && <div className="group">
|
||||
<div className={`flex flex-row items-center system-md-semibold text-text-secondary group-hover:text-text-primary ${textStyle?.main ?? ''}`}>
|
||||
<div className={`system-md-semibold flex flex-row items-center text-text-secondary group-hover:text-text-primary ${textStyle?.main ?? ''}`}>
|
||||
<div className="max-w-[180px] truncate">
|
||||
{name}
|
||||
</div>
|
||||
@ -88,7 +88,7 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
<div className='text-text-tertiary system-2xs-medium-uppercase'>{isExternal ? t('dataset.externalTag') : ''}</div>
|
||||
<div className='system-2xs-medium-uppercase text-text-tertiary'>{isExternal ? t('dataset.externalTag') : ''}</div>
|
||||
</div>}
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -26,7 +26,7 @@ const DatasetInfo: FC<Props> = ({
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className='pl-1 pt-1'>
|
||||
<div className='flex-shrink-0 mr-3'>
|
||||
<div className='mr-3 shrink-0'>
|
||||
<AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />
|
||||
</div>
|
||||
{expand && (
|
||||
@ -34,8 +34,8 @@ const DatasetInfo: FC<Props> = ({
|
||||
<div className='system-md-semibold text-text-secondary'>
|
||||
{name}
|
||||
</div>
|
||||
<div className='mt-1 text-text-tertiary system-2xs-medium-uppercase'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</div>
|
||||
<div className='my-3 system-xs-regular text-text-tertiary first-letter:capitalize'>{description}</div>
|
||||
<div className='system-2xs-medium-uppercase mt-1 text-text-tertiary'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</div>
|
||||
<div className='system-xs-regular my-3 text-text-tertiary first-letter:capitalize'>{description}</div>
|
||||
</div>
|
||||
)}
|
||||
{extraInfo}
|
||||
|
||||
@ -50,7 +50,7 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
shrink-0 flex flex-col bg-background-default-subtle border-r border-divider-burn transition-all
|
||||
flex shrink-0 flex-col border-r border-divider-burn bg-background-default-subtle transition-all
|
||||
${expand ? 'w-[216px]' : 'w-14'}
|
||||
`}
|
||||
>
|
||||
@ -85,7 +85,7 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
|
||||
)}
|
||||
</div>
|
||||
<div className='px-4'>
|
||||
<div className={cn('mt-1 mx-auto h-[1px] bg-divider-subtle', !expand && 'w-6')} />
|
||||
<div className={cn('mx-auto mt-1 h-[1px] bg-divider-subtle', !expand && 'w-6')} />
|
||||
</div>
|
||||
<nav
|
||||
className={`
|
||||
@ -108,13 +108,13 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className='flex items-center justify-center w-6 h-6 text-gray-500 cursor-pointer'
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center text-gray-500'
|
||||
onClick={() => handleToggle(appSidebarExpand)}
|
||||
>
|
||||
{
|
||||
expand
|
||||
? <RiLayoutRight2Line className='w-5 h-5 text-components-menu-item-text' />
|
||||
: <LayoutRight2LineMod className='w-5 h-5 text-components-menu-item-text' />
|
||||
? <RiLayoutRight2Line className='h-5 w-5 text-components-menu-item-text' />
|
||||
: <LayoutRight2LineMod className='h-5 w-5 text-components-menu-item-text' />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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)}
|
||||
|
||||
@ -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'
|
||||
>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 />
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
/>
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 />
|
||||
|
||||
@ -136,8 +136,8 @@ const AppPublisher = ({
|
||||
if (publishDisabled || published)
|
||||
return
|
||||
handlePublish()
|
||||
}
|
||||
, { exactMatch: true, useCapture: true })
|
||||
},
|
||||
{ exactMatch: true, useCapture: true })
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -157,19 +157,19 @@ const AppPublisher = ({
|
||||
disabled={disabled}
|
||||
>
|
||||
{t('workflow.common.publish')}
|
||||
<RiArrowDownSLine className='w-4 h-4 text-components-button-primary-text' />
|
||||
<RiArrowDownSLine className='h-4 w-4 text-components-button-primary-text' />
|
||||
</Button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[11]'>
|
||||
<div className='w-[320px] bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl shadow-shadow-shadow-5'>
|
||||
<div className='w-[320px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5'>
|
||||
<div className='p-4 pt-3'>
|
||||
<div className='flex items-center h-6 system-xs-medium-uppercase text-text-tertiary'>
|
||||
<div className='system-xs-medium-uppercase flex h-6 items-center text-text-tertiary'>
|
||||
{publishedAt ? t('workflow.common.latestPublished') : t('workflow.common.currentDraftUnpublished')}
|
||||
</div>
|
||||
{publishedAt
|
||||
? (
|
||||
<div className='flex justify-between items-center'>
|
||||
<div className='flex items-center system-sm-medium text-text-secondary'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='system-sm-medium flex items-center text-text-secondary'>
|
||||
{t('workflow.common.publishedAt')} {formatTimeFromNow(publishedAt)}
|
||||
</div>
|
||||
{isChatApp && <Button
|
||||
@ -183,7 +183,7 @@ const AppPublisher = ({
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<div className='flex items-center system-sm-medium text-text-secondary'>
|
||||
<div className='system-sm-medium flex items-center text-text-secondary'>
|
||||
{t('workflow.common.autoSaved')} · {Boolean(draftUpdatedAt) && formatTimeFromNow(draftUpdatedAt!)}
|
||||
</div>
|
||||
)}
|
||||
@ -198,7 +198,7 @@ const AppPublisher = ({
|
||||
: (
|
||||
<Button
|
||||
variant='primary'
|
||||
className='w-full mt-3'
|
||||
className='mt-3 w-full'
|
||||
onClick={() => handlePublish()}
|
||||
disabled={publishDisabled || published}
|
||||
>
|
||||
@ -210,7 +210,7 @@ const AppPublisher = ({
|
||||
<span>{t('workflow.common.publishUpdate')}</span>
|
||||
<div className='flex gap-0.5'>
|
||||
{PUBLISH_SHORTCUT.map(key => (
|
||||
<span key={key} className='w-4 h-4 text-text-primary-on-surface system-kbd rounded-[4px] bg-components-kbd-bg-white'>
|
||||
<span key={key} className='system-kbd h-4 w-4 rounded-[4px] bg-components-kbd-bg-white text-text-primary-on-surface'>
|
||||
{key}
|
||||
</span>
|
||||
))}
|
||||
@ -222,11 +222,11 @@ const AppPublisher = ({
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div className='p-4 pt-3 border-t-[0.5px] border-t-divider-regular'>
|
||||
<div className='border-t-[0.5px] border-t-divider-regular p-4 pt-3'>
|
||||
<SuggestedAction
|
||||
disabled={!publishedAt}
|
||||
link={appURL}
|
||||
icon={<RiPlayCircleLine className='w-4 h-4' />}
|
||||
icon={<RiPlayCircleLine className='h-4 w-4' />}
|
||||
>
|
||||
{t('workflow.common.runApp')}
|
||||
</SuggestedAction>
|
||||
@ -235,7 +235,7 @@ const AppPublisher = ({
|
||||
<SuggestedAction
|
||||
disabled={!publishedAt}
|
||||
link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
|
||||
icon={<RiPlayList2Line className='w-4 h-4' />}
|
||||
icon={<RiPlayList2Line className='h-4 w-4' />}
|
||||
>
|
||||
{t('workflow.common.batchRunApp')}
|
||||
</SuggestedAction>
|
||||
@ -247,7 +247,7 @@ const AppPublisher = ({
|
||||
handleTrigger()
|
||||
}}
|
||||
disabled={!publishedAt}
|
||||
icon={<CodeBrowser className='w-4 h-4' />}
|
||||
icon={<CodeBrowser className='h-4 w-4' />}
|
||||
>
|
||||
{t('workflow.common.embedIntoSite')}
|
||||
</SuggestedAction>
|
||||
@ -257,14 +257,14 @@ const AppPublisher = ({
|
||||
publishedAt && handleOpenInExplore()
|
||||
}}
|
||||
disabled={!publishedAt}
|
||||
icon={<RiPlanetLine className='w-4 h-4' />}
|
||||
icon={<RiPlanetLine className='h-4 w-4' />}
|
||||
>
|
||||
{t('workflow.common.openInExplore')}
|
||||
</SuggestedAction>
|
||||
<SuggestedAction
|
||||
disabled={!publishedAt}
|
||||
link='./develop'
|
||||
icon={<RiTerminalBoxLine className='w-4 h-4' />}
|
||||
icon={<RiTerminalBoxLine className='h-4 w-4' />}
|
||||
>
|
||||
{t('workflow.common.accessAPIReference')}
|
||||
</SuggestedAction>
|
||||
|
||||
@ -73,25 +73,25 @@ const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
|
||||
className='mt-3 w-full'
|
||||
>
|
||||
{t('appDebug.operation.applyConfig')}
|
||||
<RiArrowDownSLine className='ml-0.5 w-3 h-3' />
|
||||
<RiArrowDownSLine className='ml-0.5 h-3 w-3' />
|
||||
</Button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='mt-1 w-[288px] z-50'>
|
||||
<div className='p-1 rounded-lg border-[0.5px] border-components-panel-border shadow-lg bg-components-panel-bg'>
|
||||
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>
|
||||
<PortalToFollowElemContent className='z-50 mt-1 w-[288px]'>
|
||||
<div className='rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg'>
|
||||
<div className='flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary'>
|
||||
{t('appDebug.publishAs')}
|
||||
</div>
|
||||
{
|
||||
validModelConfigs.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className='flex items-center h-8 px-3 text-sm text-text-tertiary rounded-lg cursor-pointer hover:bg-state-base-hover'
|
||||
className='flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-text-tertiary hover:bg-state-base-hover'
|
||||
onClick={() => handleSelect(item)}
|
||||
>
|
||||
<span className='italic min-w-[18px]'>#{index + 1}</span>
|
||||
<span className='min-w-[18px] italic'>#{index + 1}</span>
|
||||
<ModelIcon modelName={item.model} provider={item.providerItem} className='ml-2' />
|
||||
<div
|
||||
className='ml-1 text-text-secondary truncate'
|
||||
className='ml-1 truncate text-text-secondary'
|
||||
title={item.modelItem.label[language]}
|
||||
>
|
||||
{item.modelItem.label[language]}
|
||||
|
||||
@ -20,9 +20,9 @@ const SuggestedAction = ({ icon, link, disabled, children, className, ...props }
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className='relative w-4 h-4'>{icon}</div>
|
||||
<div className='grow shrink basis-0 system-sm-medium'>{children}</div>
|
||||
<RiArrowRightUpLine className='w-3.5 h-3.5' />
|
||||
<div className='relative h-4 w-4'>{icon}</div>
|
||||
<div className='system-sm-medium shrink grow basis-0'>{children}</div>
|
||||
<RiArrowRightUpLine className='h-3.5 w-3.5' />
|
||||
</a>
|
||||
)
|
||||
|
||||
|
||||
@ -69,16 +69,16 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
|
||||
|
||||
return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
|
||||
<div className='relative w-full p-6 pb-4 pr-14'>
|
||||
<div className='text-text-primary title-2xl-semi-bold first-letter:capitalize'>
|
||||
<div className='title-2xl-semi-bold text-text-primary first-letter:capitalize'>
|
||||
{versionInfo?.marked_name ? t('workflow.versionHistory.editVersionInfo') : t('workflow.versionHistory.nameThisVersion')}
|
||||
</div>
|
||||
<div className='w-8 h-8 flex items-center justify-center p-1.5 absolute top-5 right-5 cursor-pointer' onClick={onClose}>
|
||||
<RiCloseLine className='w-[18px] h-[18px] text-text-tertiary' />
|
||||
<div className='absolute right-5 top-5 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={onClose}>
|
||||
<RiCloseLine className='h-[18px] w-[18px] text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-y-4 px-6 py-3'>
|
||||
<div className='flex flex-col gap-y-1'>
|
||||
<div className='flex items-center h-6 text-text-secondary system-sm-semibold'>
|
||||
<div className='system-sm-semibold flex h-6 items-center text-text-secondary'>
|
||||
{t('workflow.versionHistory.editField.title')}
|
||||
</div>
|
||||
<Input
|
||||
@ -89,7 +89,7 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col gap-y-1'>
|
||||
<div className='flex items-center h-6 text-text-secondary system-sm-semibold'>
|
||||
<div className='system-sm-semibold flex h-6 items-center text-text-secondary'>
|
||||
{t('workflow.versionHistory.editField.releaseNotes')}
|
||||
</div>
|
||||
<Textarea
|
||||
|
||||
@ -23,15 +23,15 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<div className={cn('rounded-xl border-t-[0.5px] border-l-[0.5px] border-effects-highlight bg-background-section-burn pb-3', noBodySpacing && 'pb-0', className)}>
|
||||
<div className={cn('rounded-xl border-l-[0.5px] border-t-[0.5px] border-effects-highlight bg-background-section-burn pb-3', noBodySpacing && 'pb-0', className)}>
|
||||
{/* Header */}
|
||||
<div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-b border-divider-subtle')}>
|
||||
<div className='flex justify-between items-center h-8'>
|
||||
<div className='flex items-center space-x-1 shrink-0'>
|
||||
{headerIcon && <div className='flex items-center justify-center w-6 h-6'>{headerIcon}</div>}
|
||||
<div className='text-text-secondary system-sm-semibold'>{title}</div>
|
||||
<div className='flex h-8 items-center justify-between'>
|
||||
<div className='flex shrink-0 items-center space-x-1'>
|
||||
{headerIcon && <div className='flex h-6 w-6 items-center justify-center'>{headerIcon}</div>}
|
||||
<div className='system-sm-semibold text-text-secondary'>{title}</div>
|
||||
</div>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<div className='flex items-center gap-2'>
|
||||
{headerRight && <div>{headerRight}</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,9 +10,9 @@ const GroupName: FC<IGroupNameProps> = ({
|
||||
name,
|
||||
}) => {
|
||||
return (
|
||||
<div className='flex items-center mb-1'>
|
||||
<div className='mr-3 leading-[18px] text-xs font-semibold text-text-tertiary uppercase'>{name}</div>
|
||||
<div className='grow h-[1px]'
|
||||
<div className='mb-1 flex items-center'>
|
||||
<div className='mr-3 text-xs font-semibold uppercase leading-[18px] text-text-tertiary'>{name}</div>
|
||||
<div className='h-[1px] grow'
|
||||
style={{
|
||||
background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, #F3F4F6 100%)',
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ const RemoveIcon = ({
|
||||
const computedIsHovered = isHoverStatus || isHovered
|
||||
return (
|
||||
<div
|
||||
className={cn(className, computedIsHovered && 'bg-[#FEE4E2]', 'flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-[#FEE4E2]')}
|
||||
className={cn(className, computedIsHovered && 'bg-[#FEE4E2]', 'flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-[#FEE4E2]')}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
onClick={onClick}
|
||||
|
||||
@ -16,8 +16,8 @@ export type IOperationBtnProps = {
|
||||
}
|
||||
|
||||
const iconMap = {
|
||||
add: <RiAddLine className='w-3.5 h-3.5' />,
|
||||
edit: <RiEditLine className='w-3.5 h-3.5' />,
|
||||
add: <RiAddLine className='h-3.5 w-3.5' />,
|
||||
edit: <RiEditLine className='h-3.5 w-3.5' />,
|
||||
}
|
||||
|
||||
const OperationBtn: FC<IOperationBtnProps> = ({
|
||||
@ -29,7 +29,7 @@ const OperationBtn: FC<IOperationBtnProps> = ({
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div
|
||||
className={cn('flex items-center rounded-md h-7 px-3 space-x-1 text-text-secondary cursor-pointer hover:bg-state-base-hover select-none', className)}
|
||||
className={cn('flex h-7 cursor-pointer select-none items-center space-x-1 rounded-md px-3 text-text-secondary hover:bg-state-base-hover', className)}
|
||||
onClick={onClick}>
|
||||
<div>
|
||||
{iconMap[type]}
|
||||
|
||||
@ -16,7 +16,7 @@ const VarHighlight: FC<IVarHighlightProps> = ({
|
||||
return (
|
||||
<div
|
||||
key={name}
|
||||
className={`${s.item} ${className} flex mb-2 items-center justify-center rounded-md px-1 h-5 text-xs font-medium text-primary-600`}
|
||||
className={`${s.item} ${className} mb-2 flex h-5 items-center justify-center rounded-md px-1 text-xs font-medium text-primary-600`}
|
||||
>
|
||||
<span className='opacity-60'>{'{{'}</span>
|
||||
<span>{name}</span>
|
||||
|
||||
@ -20,7 +20,7 @@ const FormattingChanged: FC<IFormattingChangedProps> = ({
|
||||
description={t('appDebug.feature.dataSet.queryVariable.unableToQueryDataSetTip')}
|
||||
footer={
|
||||
<div className='flex space-x-2'>
|
||||
<Button variant='primary' className='flex justify-start !w-[96px]' onClick={onConfirm}>
|
||||
<Button variant='primary' className='flex !w-[96px] justify-start' onClick={onConfirm}>
|
||||
<span className='text-[13px] font-medium'>{t('appDebug.feature.dataSet.queryVariable.ok')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -22,11 +22,11 @@ const WarningMask: FC<IWarningMaskProps> = ({
|
||||
footer,
|
||||
}) => {
|
||||
return (
|
||||
<div className={`${s.mask} absolute z-10 inset-0 pt-16`}
|
||||
<div className={`${s.mask} absolute inset-0 z-10 pt-16`}
|
||||
>
|
||||
<div className='mx-auto px-10'>
|
||||
<div className={`${s.icon} flex items-center justify-center w-11 h-11 rounded-xl bg-white`}>{warningIcon}</div>
|
||||
<div className='mt-4 text-[24px] leading-normal font-semibold text-gray-800'>
|
||||
<div className={`${s.icon} flex h-11 w-11 items-center justify-center rounded-xl bg-white`}>{warningIcon}</div>
|
||||
<div className='mt-4 text-[24px] font-semibold leading-normal text-gray-800'>
|
||||
{title}
|
||||
</div>
|
||||
<div className='mt-3 text-base text-gray-500'>
|
||||
|
||||
@ -142,14 +142,14 @@ const AdvancedPromptInput: FC<Props> = ({
|
||||
const [editorHeight, setEditorHeight] = React.useState(isChatMode ? 200 : 508)
|
||||
const contextMissing = (
|
||||
<div
|
||||
className='flex justify-between items-center h-11 pt-2 pr-3 pb-1 pl-4 rounded-tl-xl rounded-tr-xl'
|
||||
className='flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl pb-1 pl-4 pr-3 pt-2'
|
||||
style={{
|
||||
background: 'linear-gradient(180deg, #FEF0C7 0%, rgba(254, 240, 199, 0) 100%)',
|
||||
}}
|
||||
>
|
||||
<div className='flex items-center pr-2' >
|
||||
<RiErrorWarningFill className='mr-1 w-4 h-4 text-[#F79009]' />
|
||||
<div className='leading-[18px] text-[13px] font-medium text-[#DC6803]'>{t('appDebug.promptMode.contextMissing')}</div>
|
||||
<RiErrorWarningFill className='mr-1 h-4 w-4 text-[#F79009]' />
|
||||
<div className='text-[13px] font-medium leading-[18px] text-[#DC6803]'>{t('appDebug.promptMode.contextMissing')}</div>
|
||||
</div>
|
||||
<Button
|
||||
size='small'
|
||||
@ -159,12 +159,12 @@ const AdvancedPromptInput: FC<Props> = ({
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className={`bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 rounded-xl p-0.5 shadow-xs ${!isContextMissing ? '' : s.warningBorder}`}>
|
||||
<div className={`rounded-xl bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 p-0.5 shadow-xs ${!isContextMissing ? '' : s.warningBorder}`}>
|
||||
<div className='rounded-xl bg-background-default'>
|
||||
{isContextMissing
|
||||
? contextMissing
|
||||
: (
|
||||
<div className={cn(s.boxHeader, 'flex justify-between items-center h-11 pt-2 pr-3 pb-1 pl-4 rounded-tl-xl rounded-tr-xl bg-background-default hover:shadow-xs')}>
|
||||
<div className={cn(s.boxHeader, 'flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl bg-background-default pb-1 pl-4 pr-3 pt-2 hover:shadow-xs')}>
|
||||
{isChatMode
|
||||
? (
|
||||
<MessageTypeSelector value={type} onChange={onTypeChange} />
|
||||
@ -184,11 +184,11 @@ const AdvancedPromptInput: FC<Props> = ({
|
||||
</div>)}
|
||||
<div className={cn(s.optionWrap, 'items-center space-x-1')}>
|
||||
{canDelete && (
|
||||
<RiDeleteBinLine onClick={onDelete} className='h-6 w-6 p-1 text-text-tertiary cursor-pointer' />
|
||||
<RiDeleteBinLine onClick={onDelete} className='h-6 w-6 cursor-pointer p-1 text-text-tertiary' />
|
||||
)}
|
||||
{!isCopied
|
||||
? (
|
||||
<Clipboard className='h-6 w-6 p-1 text-text-tertiary cursor-pointer' onClick={() => {
|
||||
<Clipboard className='h-6 w-6 cursor-pointer p-1 text-text-tertiary' onClick={() => {
|
||||
copy(value)
|
||||
setIsCopied(true)
|
||||
}} />
|
||||
@ -201,13 +201,13 @@ const AdvancedPromptInput: FC<Props> = ({
|
||||
)}
|
||||
|
||||
<PromptEditorHeightResizeWrap
|
||||
className='px-4 min-h-[102px] overflow-y-auto text-sm text-text-secondary'
|
||||
className='min-h-[102px] overflow-y-auto px-4 text-sm text-text-secondary'
|
||||
height={editorHeight}
|
||||
minHeight={minHeight}
|
||||
onHeightChange={setEditorHeight}
|
||||
footer={(
|
||||
<div className='pl-4 pb-2 flex'>
|
||||
<div className="h-[18px] leading-[18px] px-1 rounded-md bg-divider-regular text-xs text-text-tertiary">{value.length}</div>
|
||||
<div className='flex pb-2 pl-4'>
|
||||
<div className="h-[18px] rounded-md bg-divider-regular px-1 text-xs leading-[18px] text-text-tertiary">{value.length}</div>
|
||||
</div>
|
||||
)}
|
||||
hideResize={noResize}
|
||||
|
||||
@ -46,11 +46,11 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
|
||||
>
|
||||
<div className='flex items-start space-x-3'>
|
||||
<div
|
||||
className='shrink-0 flex items-center justify-center h-10 w-10 bg-components-card-bg-alt rounded-xl border border-components-card-border shadow-lg'
|
||||
className='flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-components-card-border bg-components-card-bg-alt shadow-lg'
|
||||
>{VarIcon}</div>
|
||||
<div className='grow-1'>
|
||||
<div className='text-sm font-medium text-text-primary'>{t('appDebug.autoAddVar')}</div>
|
||||
<div className='flex flex-wrap mt-[15px] max-h-[66px] overflow-y-auto px-1 space-x-1'>
|
||||
<div className='mt-[15px] flex max-h-[66px] flex-wrap space-x-1 overflow-y-auto px-1'>
|
||||
{varNameArr.map(name => (
|
||||
<VarHighlight key={name} name={name} />
|
||||
))}
|
||||
|
||||
@ -28,8 +28,8 @@ const EditModal: FC<Props> = ({
|
||||
isShow={isShow}
|
||||
onClose={onClose}
|
||||
>
|
||||
<div className={'mt-6 font-medium text-sm leading-[21px] text-text-primary'}>{t('appDebug.feature.conversationHistory.editModal.userPrefix')}</div>
|
||||
<input className={'mt-2 w-full rounded-lg h-10 box-border px-3 text-sm leading-10 bg-components-input-bg-normal'}
|
||||
<div className={'mt-6 text-sm font-medium leading-[21px] text-text-primary'}>{t('appDebug.feature.conversationHistory.editModal.userPrefix')}</div>
|
||||
<input className={'mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10'}
|
||||
value={tempData.user_prefix}
|
||||
onChange={e => setTempData({
|
||||
...tempData,
|
||||
@ -37,8 +37,8 @@ const EditModal: FC<Props> = ({
|
||||
})}
|
||||
/>
|
||||
|
||||
<div className={'mt-6 font-medium text-sm leading-[21px] text-text-primary'}>{t('appDebug.feature.conversationHistory.editModal.assistantPrefix')}</div>
|
||||
<input className={'mt-2 w-full rounded-lg h-10 box-border px-3 text-sm leading-10 bg-components-input-bg-normal'}
|
||||
<div className={'mt-6 text-sm font-medium leading-[21px] text-text-primary'}>{t('appDebug.feature.conversationHistory.editModal.assistantPrefix')}</div>
|
||||
<input className={'mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10'}
|
||||
value={tempData.assistant_prefix}
|
||||
onChange={e => setTempData({
|
||||
...tempData,
|
||||
|
||||
@ -30,20 +30,20 @@ const HistoryPanel: FC<Props> = ({
|
||||
</div>
|
||||
}
|
||||
headerIcon={
|
||||
<div className='p-1 rounded-md shadow-xs'>
|
||||
<MessageClockCircle className='w-4 h-4 text-[#DD2590]' />
|
||||
<div className='rounded-md p-1 shadow-xs'>
|
||||
<MessageClockCircle className='h-4 w-4 text-[#DD2590]' />
|
||||
</div>}
|
||||
headerRight={
|
||||
<div className='flex items-center'>
|
||||
<div className='text-xs text-text-tertiary'>{t('appDebug.feature.conversationHistory.description')}</div>
|
||||
<div className='ml-3 w-[1px] h-[14px] bg-divider-regular'></div>
|
||||
<div className='ml-3 h-[14px] w-[1px] bg-divider-regular'></div>
|
||||
<OperationBtn type="edit" onClick={onShowEditModal} />
|
||||
</div>
|
||||
}
|
||||
noBodySpacing
|
||||
>
|
||||
{showWarning && (
|
||||
<div className='flex justify-between py-2 px-3 rounded-b-xl bg-background-section-burn text-xs text-text-secondary'>
|
||||
<div className='flex justify-between rounded-b-xl bg-background-section-burn px-3 py-2 text-xs text-text-secondary'>
|
||||
<div>{t('appDebug.feature.conversationHistory.tip')}
|
||||
<a href={`${locale === LanguagesSupported[1]
|
||||
? 'https://docs.dify.ai/v/zh-hans/guides/application-design/prompt-engineering'
|
||||
|
||||
@ -159,7 +159,7 @@ const Prompt: FC<IPromptProps> = ({
|
||||
<Button
|
||||
onClick={handleAddMessage}
|
||||
className='mt-3 w-full'>
|
||||
<RiAddLine className='w-4 h-4 mr-2' />
|
||||
<RiAddLine className='mr-2 h-4 w-4' />
|
||||
<div>{t('appDebug.promptMode.operation.addMessage')}</div>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@ -24,12 +24,12 @@ const MessageTypeSelector: FC<Props> = ({
|
||||
<div className='relative left-[-8px]' ref={ref}>
|
||||
<div
|
||||
onClick={toggleShow}
|
||||
className={cn(showOption && 'bg-indigo-100', 'flex items-center h-7 pl-1.5 pr-1 space-x-0.5 rounded-lg cursor-pointer text-indigo-800')}>
|
||||
className={cn(showOption && 'bg-indigo-100', 'flex h-7 cursor-pointer items-center space-x-0.5 rounded-lg pl-1.5 pr-1 text-indigo-800')}>
|
||||
<div className='text-sm font-semibold uppercase'>{value}</div>
|
||||
<ChevronSelectorVertical className='w-3 h-3 ' />
|
||||
<ChevronSelectorVertical className='h-3 w-3 ' />
|
||||
</div>
|
||||
{showOption && (
|
||||
<div className='absolute z-10 top-[30px] p-1 border border-components-panel-border shadow-lg rounded-lg bg-components-panel-bg'>
|
||||
<div className='absolute top-[30px] z-10 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg'>
|
||||
{allTypes.map(type => (
|
||||
<div
|
||||
key={type}
|
||||
@ -37,7 +37,7 @@ const MessageTypeSelector: FC<Props> = ({
|
||||
setHide()
|
||||
onChange(type)
|
||||
}}
|
||||
className='flex items-center h-9 min-w-[44px] px-3 rounded-lg cursor-pointer text-sm font-medium text-text-secondary uppercase hover:bg-state-base-hover'
|
||||
className='flex h-9 min-w-[44px] cursor-pointer items-center rounded-lg px-3 text-sm font-medium uppercase text-text-secondary hover:bg-state-base-hover'
|
||||
>{type}</div>
|
||||
))
|
||||
}
|
||||
|
||||
@ -9,8 +9,8 @@ type Props = {
|
||||
height: number
|
||||
minHeight: number
|
||||
onHeightChange: (height: number) => void
|
||||
children: JSX.Element
|
||||
footer?: JSX.Element
|
||||
children: React.JSX.Element
|
||||
footer?: React.JSX.Element
|
||||
hideResize?: boolean
|
||||
}
|
||||
|
||||
@ -85,9 +85,9 @@ const PromptEditorHeightResizeWrap: FC<Props> = ({
|
||||
{footer}
|
||||
{!hideResize && (
|
||||
<div
|
||||
className='absolute bottom-0 left-0 w-full flex justify-center h-2 cursor-row-resize'
|
||||
className='absolute bottom-0 left-0 flex h-2 w-full cursor-row-resize justify-center'
|
||||
onMouseDown={handleStartResize}>
|
||||
<div className='w-5 h-[3px] rounded-sm bg-gray-300'></div>
|
||||
<div className='h-[3px] w-5 rounded-sm bg-gray-300'></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -159,10 +159,10 @@ const Prompt: FC<ISimplePromptInput> = ({
|
||||
const [editorHeight, setEditorHeight] = useState(minHeight)
|
||||
|
||||
return (
|
||||
<div className={cn('relative bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 rounded-xl p-0.5 shadow-xs')}>
|
||||
<div className={cn('relative rounded-xl bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 p-0.5 shadow-xs')}>
|
||||
<div className='rounded-xl bg-background-section-burn'>
|
||||
{!noTitle && (
|
||||
<div className="flex justify-between items-center h-11 pl-3 pr-2.5">
|
||||
<div className="flex h-11 items-center justify-between pl-3 pr-2.5">
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className='h2 system-sm-semibold-uppercase text-text-secondary'>{mode !== AppType.completion ? t('appDebug.chatSubTitle') : t('appDebug.completionSubTitle')}</div>
|
||||
{!readonly && (
|
||||
@ -184,14 +184,14 @@ const Prompt: FC<ISimplePromptInput> = ({
|
||||
)}
|
||||
|
||||
<PromptEditorHeightResizeWrap
|
||||
className='px-4 pt-2 min-h-[228px] bg-background-default rounded-t-xl text-sm text-text-secondary'
|
||||
className='min-h-[228px] rounded-t-xl bg-background-default px-4 pt-2 text-sm text-text-secondary'
|
||||
height={editorHeight}
|
||||
minHeight={minHeight}
|
||||
onHeightChange={setEditorHeight}
|
||||
hideResize={noResize}
|
||||
footer={(
|
||||
<div className='pl-4 pb-2 flex bg-background-default rounded-b-xl'>
|
||||
<div className="h-[18px] leading-[18px] px-1 rounded-md bg-components-badge-bg-gray-soft text-xs text-text-tertiary">{promptTemplate.length}</div>
|
||||
<div className='flex rounded-b-xl bg-background-default pb-2 pl-4'>
|
||||
<div className="h-[18px] rounded-md bg-components-badge-bg-gray-soft px-1 text-xs leading-[18px] text-text-tertiary">{promptTemplate.length}</div>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
|
||||
@ -3,10 +3,10 @@ import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
interface Props {
|
||||
type Props = {
|
||||
className?: string
|
||||
title: string
|
||||
children: JSX.Element
|
||||
children: React.JSX.Element
|
||||
}
|
||||
|
||||
const Field: FC<Props> = ({
|
||||
@ -16,7 +16,7 @@ const Field: FC<Props> = ({
|
||||
}) => {
|
||||
return (
|
||||
<div className={cn(className)}>
|
||||
<div className='text-text-secondary system-sm-semibold leading-8'>{title}</div>
|
||||
<div className='system-sm-semibold leading-8 text-text-secondary'>{title}</div>
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -233,9 +233,9 @@ const ConfigModal: FC<IConfigModalProps> = ({
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className='!mt-5 flex items-center h-6 space-x-2'>
|
||||
<div className='!mt-5 flex h-6 items-center space-x-2'>
|
||||
<Checkbox checked={tempPayload.required} onCheck={() => handlePayloadChange('required')(!tempPayload.required)} />
|
||||
<span className='text-text-secondary system-sm-semibold'>{t('appDebug.variableConfig.required')}</span>
|
||||
<span className='system-sm-semibold text-text-secondary'>{t('appDebug.variableConfig.required')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -41,7 +41,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
|
||||
>
|
||||
{options.map((o, index) => (
|
||||
<div className={`${s.inputWrap} relative`} key={index}>
|
||||
<div className='handle flex items-center justify-center w-4 h-4 cursor-grab'>
|
||||
<div className='handle flex h-4 w-4 cursor-grab items-center justify-center'>
|
||||
<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2ZM1 6C1.55228 6 2 5.55228 2 5C2 4.44772 1.55228 4 1 4C0.447715 4 0 4.44772 0 5C0 5.55228 0.447715 6 1 6ZM6 1C6 1.55228 5.55228 2 5 2C4.44772 2 4 1.55228 4 1C4 0.447715 4.44772 0 5 0C5.55228 0 6 0.447715 6 1ZM5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6ZM2 9C2 9.55229 1.55228 10 1 10C0.447715 10 0 9.55229 0 9C0 8.44771 0.447715 8 1 8C1.55228 8 2 8.44771 2 9ZM5 10C5.55228 10 6 9.55229 6 9C6 8.44771 5.55228 8 5 8C4.44772 8 4 8.44771 4 9C4 9.55229 4.44772 10 5 10Z" fill="#98A2B3" />
|
||||
</svg>
|
||||
@ -59,10 +59,10 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
|
||||
return item
|
||||
}))
|
||||
}}
|
||||
className={'w-full pl-1.5 pr-8 text-sm leading-9 text-gray-900 border-0 grow h-9 bg-transparent focus:outline-none cursor-pointer'}
|
||||
className={'h-9 w-full grow cursor-pointer border-0 bg-transparent pl-1.5 pr-8 text-sm leading-9 text-gray-900 focus:outline-none'}
|
||||
/>
|
||||
<RemoveIcon
|
||||
className={`${s.deleteBtn} absolute top-1/2 translate-y-[-50%] right-1.5 items-center justify-center w-6 h-6 rounded-md cursor-pointer hover:bg-[#FEE4E2]`}
|
||||
className={`${s.deleteBtn} absolute right-1.5 top-1/2 h-6 w-6 translate-y-[-50%] cursor-pointer items-center justify-center rounded-md hover:bg-[#FEE4E2]`}
|
||||
onClick={() => {
|
||||
onChange(options.filter((_, i) => index !== i))
|
||||
}}
|
||||
@ -75,9 +75,9 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
|
||||
|
||||
<div
|
||||
onClick={() => { onChange([...options, '']) }}
|
||||
className='flex items-center h-9 px-3 gap-2 rounded-lg cursor-pointer text-gray-400 bg-gray-100'>
|
||||
className='flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-gray-100 px-3 text-gray-400'>
|
||||
<PlusIcon width={16} height={16}></PlusIcon>
|
||||
<div className='text-gray-500 text-[13px]'>{t('appDebug.variableConfig.addOption')}</div>
|
||||
<div className='text-[13px] text-gray-500'>{t('appDebug.variableConfig.addOption')}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -3,7 +3,7 @@ import type { FC } from 'react'
|
||||
import React, { useEffect } from 'react'
|
||||
import Input from '@/app/components/base/input'
|
||||
|
||||
export interface IConfigStringProps {
|
||||
export type IConfigStringProps = {
|
||||
value: number | undefined
|
||||
maxLength: number
|
||||
modelId: string
|
||||
|
||||
@ -219,11 +219,11 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
|
||||
>
|
||||
{!hasVar && (
|
||||
<div className='mt-1 px-3 pb-3'>
|
||||
<div className='pt-2 pb-1 text-xs text-text-tertiary'>{t('appDebug.notSetVar')}</div>
|
||||
<div className='pb-1 pt-2 text-xs text-text-tertiary'>{t('appDebug.notSetVar')}</div>
|
||||
</div>
|
||||
)}
|
||||
{hasVar && (
|
||||
<div className='flex flex-wrap mt-1 px-3 pb-3 justify-between'>
|
||||
<div className='mt-1 px-3 pb-3'>
|
||||
{promptVariables.map(({ key, name, type, required, config, icon, icon_background }, index) => (
|
||||
<VarItem
|
||||
key={index}
|
||||
|
||||
@ -27,12 +27,12 @@ const SelectTypeItem: FC<ISelectTypeItemProps> = ({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col justify-center items-center h-[58px] rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg space-y-1 text-text-secondary',
|
||||
selected ? 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs system-xs-medium' : ' hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs cursor-pointer system-xs-regular')}
|
||||
'flex h-[58px] flex-col items-center justify-center space-y-1 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary',
|
||||
selected ? 'system-xs-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs' : ' system-xs-regular cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs')}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className='shrink-0'>
|
||||
<InputVarTypeIcon type={type} className='w-5 h-5' />
|
||||
<InputVarTypeIcon type={type} className='h-5 w-5' />
|
||||
</div>
|
||||
<span>{typeName}</span>
|
||||
</div>
|
||||
|
||||
@ -28,11 +28,11 @@ type ItemProps = {
|
||||
const SelectItem: FC<ItemProps> = ({ text, type, value, Icon, onClick }) => {
|
||||
return (
|
||||
<div
|
||||
className='flex items-center px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
|
||||
className='flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-gray-50'
|
||||
onClick={() => onClick(value)}
|
||||
>
|
||||
{Icon ? <Icon className='w-4 h-4 text-gray-500' /> : <InputVarTypeIcon type={type!} className='w-4 h-4 text-gray-500' />}
|
||||
<div className='ml-2 text-xs text-gray-600 truncate'>{text}</div>
|
||||
{Icon ? <Icon className='h-4 w-4 text-gray-500' /> : <InputVarTypeIcon type={type!} className='h-4 w-4 text-gray-500' />}
|
||||
<div className='ml-2 truncate text-xs text-gray-600'>{text}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -60,7 +60,7 @@ const SelectVarType: FC<Props> = ({
|
||||
<OperationBtn type='add' className={cn(open && 'bg-gray-200')} />
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent style={{ zIndex: 1000 }}>
|
||||
<div className='bg-white border border-gray-200 shadow-lg rounded-lg min-w-[192px]'>
|
||||
<div className='min-w-[192px] rounded-lg border border-gray-200 bg-white shadow-lg'>
|
||||
<div className='p-1'>
|
||||
<SelectItem type={InputVarType.textInput} value='string' text={t('appDebug.variableConfig.string')} onClick={handleChange}></SelectItem>
|
||||
<SelectItem type={InputVarType.paragraph} value='paragraph' text={t('appDebug.variableConfig.paragraph')} onClick={handleChange}></SelectItem>
|
||||
|
||||
@ -33,40 +33,38 @@ const VarItem: FC<ItemProps> = ({
|
||||
const [isDeleting, setIsDeleting] = useState(false)
|
||||
|
||||
return (
|
||||
<div className={cn('group relative flex items-center mb-1 last-of-type:mb-0 pl-2.5 py-2 pr-3 w-full rounded-lg bg-components-panel-on-panel-item-bg border-components-panel-border-subtle border-[0.5px] shadow-xs hover:shadow-sm hover:bg-components-panel-on-panel-item-bg-hover', isDeleting && 'hover:bg-state-destructive-hover border-state-destructive-border', readonly && 'cursor-not-allowed opacity-30')}>
|
||||
<VarIcon className='shrink-0 mr-1 w-4 h-4 text-text-accent' />
|
||||
<div className='grow'>
|
||||
<div className='flex items-center h-[18px]'>
|
||||
<div className='grow truncate' title={name}>
|
||||
<span className='system-sm-medium text-text-secondary'>{name}</span>
|
||||
<span className='px-1 system-xs-regular text-text-quaternary'>·</span>
|
||||
<span className='system-xs-medium text-text-tertiary'>{label}</span>
|
||||
</div>
|
||||
<div className='group-hover:hidden flex items-center'>
|
||||
{required && <Badge text='required' />}
|
||||
<span className='pl-2 pr-1 system-xs-regular text-text-tertiary'>{type}</span>
|
||||
<IconTypeIcon type={type as IInputTypeIconProps['type']} className='text-text-tertiary' />
|
||||
</div>
|
||||
<div className={cn('group relative mb-1 flex h-[34px] w-full items-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-2.5 pr-3 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm', isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover', readonly && 'cursor-not-allowed opacity-30')}>
|
||||
<VarIcon className='mr-1 h-4 w-4 shrink-0 text-text-accent' />
|
||||
<div className='flex w-0 grow items-center'>
|
||||
<div className='truncate' title={`${name} · ${label}`}>
|
||||
<span className='system-sm-medium text-text-secondary'>{name}</span>
|
||||
<span className='system-xs-regular px-1 text-text-quaternary'>·</span>
|
||||
<span className='system-xs-medium text-text-tertiary'>{label}</span>
|
||||
</div>
|
||||
</div>
|
||||
{!readonly && (
|
||||
<div className='hidden rounded-lg group-hover:flex items-center justify-end absolute right-0 top-0 bottom-0 pr-2 w-[124px]'>
|
||||
<div className='shrink-0'>
|
||||
<div className={cn('flex items-center', !readonly && 'group-hover:hidden')}>
|
||||
{required && <Badge text='required' />}
|
||||
<span className='system-xs-regular pl-2 pr-1 text-text-tertiary'>{type}</span>
|
||||
<IconTypeIcon type={type as IInputTypeIconProps['type']} className='text-text-tertiary' />
|
||||
</div>
|
||||
<div className={cn('hidden items-center justify-end rounded-lg', !readonly && 'group-hover:flex')}>
|
||||
<div
|
||||
className='flex items-center justify-center mr-1 w-6 h-6 hover:bg-black/5 rounded-md cursor-pointer'
|
||||
className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5'
|
||||
onClick={onEdit}
|
||||
>
|
||||
<RiEditLine className='w-4 h-4 text-text-tertiary' />
|
||||
<RiEditLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
<div
|
||||
className='flex items-center justify-center w-6 h-6 text-text-tertiary cursor-pointer hover:text-text-destructive'
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center text-text-tertiary hover:text-text-destructive'
|
||||
onClick={onRemove}
|
||||
onMouseOver={() => setIsDeleting(true)}
|
||||
onMouseLeave={() => setIsDeleting(false)}
|
||||
>
|
||||
<RiDeleteBinLine className='w-4 h-4' />
|
||||
<RiDeleteBinLine className='h-4 w-4' />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -57,14 +57,14 @@ const ConfigVision: FC = () => {
|
||||
return null
|
||||
|
||||
return (
|
||||
<div className='mt-2 flex items-center gap-2 p-2 rounded-xl border-effects-highlight border-t-[0.5px] border-l-[0.5px] bg-background-section-burn'>
|
||||
<div className='mt-2 flex items-center gap-2 rounded-xl border-l-[0.5px] border-t-[0.5px] border-effects-highlight bg-background-section-burn p-2'>
|
||||
<div className='shrink-0 p-1'>
|
||||
<div className='p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
|
||||
<Vision className='w-4 h-4 text-text-primary-on-surface' />
|
||||
<div className='rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs'>
|
||||
<Vision className='h-4 w-4 text-text-primary-on-surface' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='grow flex items-center'>
|
||||
<div className='mr-1 text-text-secondary system-sm-semibold'>{t('appDebug.vision.name')}</div>
|
||||
<div className='flex grow items-center'>
|
||||
<div className='system-sm-semibold mr-1 text-text-secondary'>{t('appDebug.vision.name')}</div>
|
||||
<Tooltip
|
||||
popupContent={
|
||||
<div className='w-[180px]' >
|
||||
@ -73,7 +73,7 @@ const ConfigVision: FC = () => {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='shrink-0 flex items-center'>
|
||||
<div className='flex shrink-0 items-center'>
|
||||
{/* <div className='mr-2 flex items-center gap-0.5'>
|
||||
<div className='text-text-tertiary system-xs-medium-uppercase'>{t('appDebug.vision.visionSettings.resolution')}</div>
|
||||
<Tooltip
|
||||
@ -99,7 +99,7 @@ const ConfigVision: FC = () => {
|
||||
/>
|
||||
</div> */}
|
||||
<ParamConfig />
|
||||
<div className='ml-1 mr-3 w-[1px] h-3.5 bg-divider-regular'></div>
|
||||
<div className='ml-1 mr-3 h-3.5 w-[1px] bg-divider-regular'></div>
|
||||
<Switch
|
||||
defaultValue={isImageEnabled}
|
||||
onChange={handleChange}
|
||||
|
||||
@ -41,11 +41,11 @@ const ParamConfigContent: FC = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='leading-6 text-base font-semibold text-text-primary'>{t('appDebug.vision.visionSettings.title')}</div>
|
||||
<div className='pt-3 space-y-6'>
|
||||
<div className='text-base font-semibold leading-6 text-text-primary'>{t('appDebug.vision.visionSettings.title')}</div>
|
||||
<div className='space-y-6 pt-3'>
|
||||
<div>
|
||||
<div className='mb-2 flex items-center space-x-1'>
|
||||
<div className='leading-[18px] text-[13px] font-semibold text-text-secondary'>{t('appDebug.vision.visionSettings.resolution')}</div>
|
||||
<div className='text-[13px] font-semibold leading-[18px] text-text-secondary'>{t('appDebug.vision.visionSettings.resolution')}</div>
|
||||
<Tooltip
|
||||
popupContent={
|
||||
<div className='w-[180px]' >
|
||||
@ -78,7 +78,7 @@ const ParamConfigContent: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className='mb-2 leading-[18px] text-[13px] font-semibold text-text-secondary'>{t('appDebug.vision.visionSettings.uploadMethod')}</div>
|
||||
<div className='mb-2 text-[13px] font-semibold leading-[18px] text-text-secondary'>{t('appDebug.vision.visionSettings.uploadMethod')}</div>
|
||||
<div className='flex items-center gap-1'>
|
||||
<OptionCard
|
||||
className='grow'
|
||||
|
||||
@ -27,12 +27,12 @@ const ParamsConfig: FC = () => {
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
|
||||
<Button variant='ghost' size='small' className={cn('')}>
|
||||
<RiSettings2Line className='w-3.5 h-3.5' />
|
||||
<RiSettings2Line className='h-3.5 w-3.5' />
|
||||
<div className='ml-1'>{t('appDebug.voice.settings')}</div>
|
||||
</Button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent style={{ zIndex: 50 }}>
|
||||
<div className='w-80 sm:w-[412px] p-4 bg-components-panel-bg rounded-lg border-[0.5px] border-components-panel-border shadow-lg space-y-3'>
|
||||
<div className='w-80 space-y-3 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-lg sm:w-[412px]'>
|
||||
<ParamConfigContent />
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
|
||||
@ -25,8 +25,8 @@ const AgentSettingButton: FC<Props> = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={() => setIsShowAgentSetting(true)} className='shrink-0 mr-2'>
|
||||
<RiSettings2Line className='mr-1 w-4 h-4 text-text-tertiary' />
|
||||
<Button onClick={() => setIsShowAgentSetting(true)} className='mr-2 shrink-0'>
|
||||
<RiSettings2Line className='mr-1 h-4 w-4 text-text-tertiary' />
|
||||
{t('appDebug.agent.setting.name')}
|
||||
</Button>
|
||||
{isShowAgentSetting && (
|
||||
|
||||
@ -49,48 +49,48 @@ const AgentSetting: FC<Props> = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='fixed z-[100] inset-0 overflow-hidden flex justify-end p-2'
|
||||
<div className='fixed inset-0 z-[100] flex justify-end overflow-hidden p-2'
|
||||
style={{
|
||||
backgroundColor: 'rgba(16, 24, 40, 0.20)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={ref}
|
||||
className='w-[640px] flex flex-col h-full overflow-hidden bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xl'
|
||||
className='flex h-full w-[640px] flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'
|
||||
>
|
||||
<div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-divider-regular'>
|
||||
<div className='flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pl-6 pr-5'>
|
||||
<div className='flex flex-col text-base font-semibold text-text-primary'>
|
||||
<div className='leading-6'>{t('appDebug.agent.setting.name')}</div>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<div
|
||||
onClick={onCancel}
|
||||
className='flex justify-center items-center w-6 h-6 cursor-pointer'
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center'
|
||||
>
|
||||
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Body */}
|
||||
<div className='grow p-6 pt-5 border-b overflow-y-auto pb-[68px]' style={{
|
||||
<div className='grow overflow-y-auto border-b p-6 pb-[68px] pt-5' style={{
|
||||
borderBottom: 'rgba(0, 0, 0, 0.05)',
|
||||
}}>
|
||||
{/* Agent Mode */}
|
||||
<ItemPanel
|
||||
className='mb-4'
|
||||
icon={
|
||||
<CuteRobot className='w-4 h-4 text-indigo-600' />
|
||||
<CuteRobot className='h-4 w-4 text-indigo-600' />
|
||||
}
|
||||
name={t('appDebug.agent.agentMode')}
|
||||
description={t('appDebug.agent.agentModeDes')}
|
||||
>
|
||||
<div className='leading-[18px] text-[13px] font-medium text-text-primary'>{isFunctionCall ? t('appDebug.agent.agentModeType.functionCall') : t('appDebug.agent.agentModeType.ReACT')}</div>
|
||||
<div className='text-[13px] font-medium leading-[18px] text-text-primary'>{isFunctionCall ? t('appDebug.agent.agentModeType.functionCall') : t('appDebug.agent.agentModeType.ReACT')}</div>
|
||||
</ItemPanel>
|
||||
|
||||
<ItemPanel
|
||||
className='mb-4'
|
||||
icon={
|
||||
<Unblur className='w-4 h-4 text-[#FB6514]' />
|
||||
<Unblur className='h-4 w-4 text-[#FB6514]' />
|
||||
}
|
||||
name={t('appDebug.agent.setting.maximumIterations.name')}
|
||||
description={t('appDebug.agent.setting.maximumIterations.description')}
|
||||
@ -113,7 +113,7 @@ const AgentSetting: FC<Props> = ({
|
||||
type="number"
|
||||
min={maxIterationsMin}
|
||||
max={maxIterationsMax} step={1}
|
||||
className="block w-11 h-7 leading-7 rounded-lg border-0 pl-1 px-1.5 bg-components-input-bg-normal text-text-primary placeholder:text-text-tertiary focus:ring-1 focus:ring-inset focus:ring-primary-600"
|
||||
className="block h-7 w-11 rounded-lg border-0 bg-components-input-bg-normal px-1.5 pl-1 leading-7 text-text-primary placeholder:text-text-tertiary focus:ring-1 focus:ring-inset focus:ring-primary-600"
|
||||
value={tempPayload.max_iteration}
|
||||
onChange={(e) => {
|
||||
let value = Number.parseInt(e.target.value, 10)
|
||||
@ -131,20 +131,20 @@ const AgentSetting: FC<Props> = ({
|
||||
</ItemPanel>
|
||||
|
||||
{!isFunctionCall && (
|
||||
<div className='py-2 bg-background-section-burn rounded-xl shadow-xs'>
|
||||
<div className='flex items-center h-8 px-4 leading-6 text-sm font-semibold text-text-secondary'>{t('tools.builtInPromptTitle')}</div>
|
||||
<div className='h-[396px] px-4 overflow-y-auto leading-5 text-sm font-normal text-text-secondary whitespace-pre-line'>
|
||||
<div className='rounded-xl bg-background-section-burn py-2 shadow-xs'>
|
||||
<div className='flex h-8 items-center px-4 text-sm font-semibold leading-6 text-text-secondary'>{t('tools.builtInPromptTitle')}</div>
|
||||
<div className='h-[396px] overflow-y-auto whitespace-pre-line px-4 text-sm font-normal leading-5 text-text-secondary'>
|
||||
{isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion}
|
||||
</div>
|
||||
<div className='px-4'>
|
||||
<div className='inline-flex items-center h-5 px-1 bg-components-input-bg-normal rounded-md leading-[18px] text-xs font-medium text-text-tertiary'>{(isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion).length}</div>
|
||||
<div className='inline-flex h-5 items-center rounded-md bg-components-input-bg-normal px-1 text-xs font-medium leading-[18px] text-text-tertiary'>{(isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion).length}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
<div
|
||||
className='sticky z-[5] bottom-0 w-full flex justify-end py-4 px-6 border-t bg-background-section-burn border-divider-regular'
|
||||
className='sticky bottom-0 z-[5] flex w-full justify-end border-t border-divider-regular bg-background-section-burn px-6 py-4'
|
||||
>
|
||||
<Button
|
||||
onClick={onCancel}
|
||||
|
||||
@ -5,10 +5,10 @@ import cn from '@/utils/classnames'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
type Props = {
|
||||
className?: string
|
||||
icon: JSX.Element
|
||||
icon: React.JSX.Element
|
||||
name: string
|
||||
description: string
|
||||
children: JSX.Element
|
||||
children: React.JSX.Element
|
||||
}
|
||||
|
||||
const ItemPanel: FC<Props> = ({
|
||||
@ -19,10 +19,10 @@ const ItemPanel: FC<Props> = ({
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<div className={cn(className, 'flex justify-between items-center h-12 px-3 rounded-lg bg-background-section-burn')}>
|
||||
<div className={cn(className, 'flex h-12 items-center justify-between rounded-lg bg-background-section-burn px-3')}>
|
||||
<div className='flex items-center'>
|
||||
{icon}
|
||||
<div className='ml-3 mr-1 leading-6 text-sm font-semibold text-text-secondary'>{name}</div>
|
||||
<div className='ml-3 mr-1 text-sm font-semibold leading-6 text-text-secondary'>{name}</div>
|
||||
<Tooltip
|
||||
popupContent={
|
||||
<div className='w-[180px]'>
|
||||
|
||||
@ -121,7 +121,7 @@ const AgentTools: FC = () => {
|
||||
}
|
||||
headerRight={
|
||||
<div className='flex items-center'>
|
||||
<div className='leading-[18px] text-xs font-normal text-text-tertiary'>{tools.filter((item: any) => !!item.enabled).length}/{tools.length} {t('appDebug.agent.tools.enabled')}</div>
|
||||
<div className='text-xs font-normal leading-[18px] text-text-tertiary'>{tools.filter((item: any) => !!item.enabled).length}/{tools.length} {t('appDebug.agent.tools.enabled')}</div>
|
||||
{tools.length < MAX_TOOLS_NUM && (
|
||||
<>
|
||||
<div className='ml-3 mr-1 h-3.5 w-px bg-divider-regular'></div>
|
||||
@ -139,29 +139,29 @@ const AgentTools: FC = () => {
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className='grid gap-1 grid-cols-1 2xl:grid-cols-2 items-center flex-wrap justify-between'>
|
||||
<div className='grid grid-cols-1 flex-wrap items-center justify-between gap-1 2xl:grid-cols-2'>
|
||||
{tools.map((item: AgentTool & { icon: any; collection?: Collection }, index) => (
|
||||
<div key={index}
|
||||
className={cn(
|
||||
'group relative flex justify-between items-center last-of-type:mb-0 p-1.5 pr-2 w-full bg-components-panel-on-panel-item-bg rounded-lg border-[0.5px] border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm cursor',
|
||||
isDeleting === index && 'hover:bg-state-destructive-hover border-state-destructive-border',
|
||||
'cursor group relative flex w-full items-center justify-between rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg p-1.5 pr-2 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
|
||||
isDeleting === index && 'border-state-destructive-border hover:bg-state-destructive-hover',
|
||||
)}
|
||||
>
|
||||
<div className='grow w-0 flex items-center'>
|
||||
{item.isDeleted && <DefaultToolIcon className='w-5 h-5' />}
|
||||
<div className='flex w-0 grow items-center'>
|
||||
{item.isDeleted && <DefaultToolIcon className='h-5 w-5' />}
|
||||
{!item.isDeleted && (
|
||||
<div className={cn((item.notAuthor || !item.enabled) && 'opacity-50')}>
|
||||
{typeof item.icon === 'string' && <div className='w-5 h-5 bg-cover bg-center rounded-md' style={{ backgroundImage: `url(${item.icon})` }} />}
|
||||
{typeof item.icon === 'string' && <div className='h-5 w-5 rounded-md bg-cover bg-center' style={{ backgroundImage: `url(${item.icon})` }} />}
|
||||
{typeof item.icon !== 'string' && <AppIcon className='rounded-md' size='xs' icon={item.icon?.content} background={item.icon?.background} />}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
'grow w-0 ml-1.5 flex items-center system-xs-regular truncate',
|
||||
'system-xs-regular ml-1.5 flex w-0 grow items-center truncate',
|
||||
(item.isDeleted || item.notAuthor || !item.enabled) ? 'opacity-50' : '',
|
||||
)}
|
||||
>
|
||||
<span className='text-text-secondary system-xs-medium pr-1.5'>{item.provider_type === CollectionType.builtIn ? item.provider_name.split('/').pop() : item.tool_label}</span>
|
||||
<span className='system-xs-medium pr-1.5 text-text-secondary'>{item.provider_type === CollectionType.builtIn ? item.provider_name.split('/').pop() : item.tool_label}</span>
|
||||
<span className='text-text-tertiary'>{item.tool_label}</span>
|
||||
{!item.isDeleted && (
|
||||
<Tooltip
|
||||
@ -170,32 +170,32 @@ const AgentTools: FC = () => {
|
||||
<div className='w-[180px]'>
|
||||
<div className='mb-1.5 text-text-secondary'>{item.tool_name}</div>
|
||||
<div className='mb-1.5 text-text-tertiary'>{t('tools.toolNameUsageTip')}</div>
|
||||
<div className='text-text-accent cursor-pointer' onClick={() => copy(item.tool_name)}>{t('tools.copyToolName')}</div>
|
||||
<div className='cursor-pointer text-text-accent' onClick={() => copy(item.tool_name)}>{t('tools.copyToolName')}</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className='w-4 h-4'>
|
||||
<div className='hidden group-hover:inline-block ml-0.5'>
|
||||
<RiInformation2Line className='w-4 h-4 text-text-tertiary' />
|
||||
<div className='h-4 w-4'>
|
||||
<div className='ml-0.5 hidden group-hover:inline-block'>
|
||||
<RiInformation2Line className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='shrink-0 ml-1 flex items-center'>
|
||||
<div className='ml-1 flex shrink-0 items-center'>
|
||||
{item.isDeleted && (
|
||||
<div className='flex items-center mr-2'>
|
||||
<div className='mr-2 flex items-center'>
|
||||
<Tooltip
|
||||
popupContent={t('tools.toolRemoved')}
|
||||
needsDelay
|
||||
>
|
||||
<div className='mr-1 p-1 rounded-md hover:bg-black/5 cursor-pointer'>
|
||||
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
|
||||
<div className='mr-1 cursor-pointer rounded-md p-1 hover:bg-black/5'>
|
||||
<AlertTriangle className='h-4 w-4 text-[#F79009]' />
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div
|
||||
className='p-1 rounded-md text-text-tertiary cursor-pointer hover:text-text-destructive'
|
||||
className='cursor-pointer rounded-md p-1 text-text-tertiary hover:text-text-destructive'
|
||||
onClick={() => {
|
||||
const newModelConfig = produce(modelConfig, (draft) => {
|
||||
draft.agentConfig.tools.splice(index, 1)
|
||||
@ -206,27 +206,27 @@ const AgentTools: FC = () => {
|
||||
onMouseOver={() => setIsDeleting(index)}
|
||||
onMouseLeave={() => setIsDeleting(-1)}
|
||||
>
|
||||
<RiDeleteBinLine className='w-4 h-4' />
|
||||
<RiDeleteBinLine className='h-4 w-4' />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!item.isDeleted && (
|
||||
<div className='hidden group-hover:flex items-center gap-1 mr-2'>
|
||||
<div className='mr-2 hidden items-center gap-1 group-hover:flex'>
|
||||
{!item.notAuthor && (
|
||||
<Tooltip
|
||||
popupContent={t('tools.setBuiltInTools.infoAndSetting')}
|
||||
needsDelay
|
||||
>
|
||||
<div className='p-1 rounded-md hover:bg-black/5 cursor-pointer' onClick={() => {
|
||||
<div className='cursor-pointer rounded-md p-1 hover:bg-black/5' onClick={() => {
|
||||
setCurrentTool(item)
|
||||
setIsShowSettingTool(true)
|
||||
}}>
|
||||
<RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
|
||||
<RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
<div
|
||||
className='p-1 rounded-md text-text-tertiary cursor-pointer hover:text-text-destructive'
|
||||
className='cursor-pointer rounded-md p-1 text-text-tertiary hover:text-text-destructive'
|
||||
onClick={() => {
|
||||
const newModelConfig = produce(modelConfig, (draft) => {
|
||||
draft.agentConfig.tools.splice(index, 1)
|
||||
@ -237,7 +237,7 @@ const AgentTools: FC = () => {
|
||||
onMouseOver={() => setIsDeleting(index)}
|
||||
onMouseLeave={() => setIsDeleting(-1)}
|
||||
>
|
||||
<RiDeleteBinLine className='w-4 h-4' />
|
||||
<RiDeleteBinLine className='h-4 w-4' />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -119,20 +119,20 @@ const SettingBuiltInTool: FC<Props> = ({
|
||||
const infoUI = (
|
||||
<div className=''>
|
||||
{infoSchemas.length > 0 && (
|
||||
<div className='py-2 space-y-1'>
|
||||
<div className='space-y-1 py-2'>
|
||||
{infoSchemas.map((item: any, index) => (
|
||||
<div key={index} className='py-1'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className='text-text-secondary code-sm-semibold'>{item.label[language]}</div>
|
||||
<div className='text-text-tertiary system-xs-regular'>
|
||||
<div className='code-sm-semibold text-text-secondary'>{item.label[language]}</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>
|
||||
{getType(item.type)}
|
||||
</div>
|
||||
{item.required && (
|
||||
<div className='text-text-warning-secondary system-xs-medium'>{t('tools.setBuiltInTools.required')}</div>
|
||||
<div className='system-xs-medium text-text-warning-secondary'>{t('tools.setBuiltInTools.required')}</div>
|
||||
)}
|
||||
</div>
|
||||
{item.human_description && (
|
||||
<div className='mt-0.5 text-text-tertiary system-xs-regular'>
|
||||
<div className='system-xs-regular mt-0.5 text-text-tertiary'>
|
||||
{item.human_description?.[language]}
|
||||
</div>
|
||||
)}
|
||||
@ -163,47 +163,47 @@ const SettingBuiltInTool: FC<Props> = ({
|
||||
footer={null}
|
||||
mask={false}
|
||||
positionCenter={false}
|
||||
panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
|
||||
panelClassname={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
|
||||
>
|
||||
<>
|
||||
{isLoading && <Loading type='app' />}
|
||||
{!isLoading && (
|
||||
<>
|
||||
{/* header */}
|
||||
<div className='relative p-4 pb-3 border-b border-divider-subtle'>
|
||||
<div className='absolute top-3 right-3'>
|
||||
<div className='relative border-b border-divider-subtle p-4 pb-3'>
|
||||
<div className='absolute right-3 top-3'>
|
||||
<ActionButton onClick={onHide}>
|
||||
<RiCloseLine className='w-4 h-4' />
|
||||
<RiCloseLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
{showBackButton && (
|
||||
<div
|
||||
className='mb-2 flex items-center gap-1 text-text-accent-secondary system-xs-semibold-uppercase cursor-pointer'
|
||||
className='system-xs-semibold-uppercase mb-2 flex cursor-pointer items-center gap-1 text-text-accent-secondary'
|
||||
onClick={onHide}
|
||||
>
|
||||
<RiArrowLeftLine className='w-4 h-4' />
|
||||
<RiArrowLeftLine className='h-4 w-4' />
|
||||
BACK
|
||||
</div>
|
||||
)}
|
||||
<div className='flex items-center gap-1'>
|
||||
<Icon size='tiny' className='w-6 h-6' src={collection.icon} />
|
||||
<Icon size='tiny' className='h-6 w-6' src={collection.icon} />
|
||||
<OrgInfo
|
||||
packageNameClassName='w-auto'
|
||||
orgName={collection.author}
|
||||
packageName={collection.name.split('/').pop() || ''}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-1 text-text-primary system-md-semibold'>{currTool?.label[language]}</div>
|
||||
<div className='system-md-semibold mt-1 text-text-primary'>{currTool?.label[language]}</div>
|
||||
{!!currTool?.description[language] && (
|
||||
<Description className='mt-3' text={currTool.description[language]} descriptionLineRows={2}></Description>
|
||||
)}
|
||||
</div>
|
||||
{/* form */}
|
||||
<div className='h-full'>
|
||||
<div className='flex flex-col h-full'>
|
||||
<div className='flex h-full flex-col'>
|
||||
{(hasSetting && !readonly) ? (
|
||||
<TabSlider
|
||||
className='shrink-0 mt-1 px-4'
|
||||
className='mt-1 shrink-0 px-4'
|
||||
itemClassName='py-3'
|
||||
noBorderBottom
|
||||
value={currType}
|
||||
@ -216,15 +216,15 @@ const SettingBuiltInTool: FC<Props> = ({
|
||||
]}
|
||||
/>
|
||||
) : (
|
||||
<div className='p-4 pb-1 text-text-primary system-sm-semibold-uppercase'>{t('tools.setBuiltInTools.parameters')}</div>
|
||||
<div className='system-sm-semibold-uppercase p-4 pb-1 text-text-primary'>{t('tools.setBuiltInTools.parameters')}</div>
|
||||
)}
|
||||
<div className='grow h-0 overflow-y-auto px-4'>
|
||||
<div className='h-0 grow overflow-y-auto px-4'>
|
||||
{isInfoActive ? infoUI : settingUI}
|
||||
</div>
|
||||
{!readonly && !isInfoActive && (
|
||||
<div className='mt-2 shrink-0 flex justify-end py-4 px-6 space-x-2 rounded-b-[10px] bg-components-panel-bg border-t border-divider-regular'>
|
||||
<Button className='flex items-center h-8 !px-3 !text-[13px] font-medium ' onClick={onHide}>{t('common.operation.cancel')}</Button>
|
||||
<Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' disabled={!isValid} onClick={() => onSave?.(addDefaultValue(tempSetting, formSchemas))}>{t('common.operation.save')}</Button>
|
||||
<div className='mt-2 flex shrink-0 justify-end space-x-2 rounded-b-[10px] border-t border-divider-regular bg-components-panel-bg px-6 py-4'>
|
||||
<Button className='flex h-8 items-center !px-3 !text-[13px] font-medium ' onClick={onHide}>{t('common.operation.cancel')}</Button>
|
||||
<Button className='flex h-8 items-center !px-3 !text-[13px] font-medium' variant='primary' disabled={!isValid} onClick={() => onSave?.(addDefaultValue(tempSetting, formSchemas))}>{t('common.operation.save')}</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -75,12 +75,12 @@ const Editor: FC<Props> = ({
|
||||
return (
|
||||
<div className={cn(className, s.gradientBorder, 'relative')}>
|
||||
<div className='rounded-xl bg-white'>
|
||||
<div className={cn(s.boxHeader, 'flex justify-between items-center h-11 pt-2 pr-3 pb-1 pl-4 rounded-tl-xl rounded-tr-xl bg-white hover:shadow-xs')}>
|
||||
<div className={cn(s.boxHeader, 'flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl bg-white pb-1 pl-4 pr-3 pt-2 hover:shadow-xs')}>
|
||||
<div className='text-sm font-semibold uppercase text-indigo-800'>{t(`appDebug.agent.${isFirstPrompt ? 'firstPrompt' : 'nextIteration'}`)}</div>
|
||||
<div className={cn(s.optionWrap, 'items-center space-x-1')}>
|
||||
{!isCopied
|
||||
? (
|
||||
<Clipboard className='h-6 w-6 p-1 text-gray-500 cursor-pointer' onClick={() => {
|
||||
<Clipboard className='h-6 w-6 cursor-pointer p-1 text-gray-500' onClick={() => {
|
||||
copy(value)
|
||||
setIsCopied(true)
|
||||
}} />
|
||||
@ -90,7 +90,7 @@ const Editor: FC<Props> = ({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={cn(editorHeight, ' px-4 min-h-[102px] overflow-y-auto text-sm text-gray-700')}>
|
||||
<div className={cn(editorHeight, ' min-h-[102px] overflow-y-auto px-4 text-sm text-gray-700')}>
|
||||
<PromptEditor
|
||||
className={editorHeight}
|
||||
value={value}
|
||||
@ -138,8 +138,8 @@ const Editor: FC<Props> = ({
|
||||
onBlur={() => { }}
|
||||
/>
|
||||
</div>
|
||||
<div className='pl-4 pb-2 flex'>
|
||||
<div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{value.length}</div>
|
||||
<div className='flex pb-2 pl-4'>
|
||||
<div className="h-[18px] rounded-md bg-gray-100 px-1 text-xs leading-[18px] text-gray-500">{value.length}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -40,19 +40,19 @@ type ItemProps = {
|
||||
const SelectItem: FC<ItemProps> = ({ text, value, Icon, isChecked, description, onClick, disabled }) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(disabled ? 'opacity-50' : 'cursor-pointer', isChecked ? 'border-[2px] border-indigo-600 shadow-sm' : 'border border-gray-100', 'mb-2 p-3 pr-4 rounded-xl bg-gray-25 hover:bg-gray-50')}
|
||||
className={cn(disabled ? 'opacity-50' : 'cursor-pointer', isChecked ? 'border-[2px] border-indigo-600 shadow-sm' : 'border border-gray-100', 'mb-2 rounded-xl bg-gray-25 p-3 pr-4 hover:bg-gray-50')}
|
||||
onClick={() => !disabled && onClick(value)}
|
||||
>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center '>
|
||||
<div className='mr-3 p-1 bg-indigo-50 rounded-lg'>
|
||||
<Icon className='w-4 h-4 text-indigo-600' />
|
||||
<div className='mr-3 rounded-lg bg-indigo-50 p-1'>
|
||||
<Icon className='h-4 w-4 text-indigo-600' />
|
||||
</div>
|
||||
<div className='leading-5 text-sm font-medium text-gray-900'>{text}</div>
|
||||
<div className='text-sm font-medium leading-5 text-gray-900'>{text}</div>
|
||||
</div>
|
||||
<Radio isChecked={isChecked} />
|
||||
</div>
|
||||
<div className='ml-9 leading-[18px] text-xs font-normal text-gray-500'>{description}</div>
|
||||
<div className='ml-9 text-xs font-normal leading-[18px] text-gray-500'>{description}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -83,7 +83,7 @@ const AssistantTypePicker: FC<Props> = ({
|
||||
<>
|
||||
<div className='my-4 h-[1px] bg-gray-100'></div>
|
||||
<div
|
||||
className={cn(isAgent ? 'group cursor-pointer hover:bg-primary-50' : 'opacity-30', 'p-3 pr-4 rounded-xl bg-gray-50 ')}
|
||||
className={cn(isAgent ? 'group cursor-pointer hover:bg-primary-50' : 'opacity-30', 'rounded-xl bg-gray-50 p-3 pr-4 ')}
|
||||
onClick={() => {
|
||||
if (isAgent) {
|
||||
setOpen(false)
|
||||
@ -93,14 +93,14 @@ const AssistantTypePicker: FC<Props> = ({
|
||||
>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center '>
|
||||
<div className='mr-3 p-1 bg-gray-200 group-hover:bg-white rounded-lg'>
|
||||
<Settings04 className='w-4 h-4 text-gray-600 group-hover:text-[#155EEF]' />
|
||||
<div className='mr-3 rounded-lg bg-gray-200 p-1 group-hover:bg-white'>
|
||||
<Settings04 className='h-4 w-4 text-gray-600 group-hover:text-[#155EEF]' />
|
||||
</div>
|
||||
<div className='leading-5 text-sm font-medium text-gray-900 group-hover:text-[#155EEF]'>{t('appDebug.agent.setting.name')}</div>
|
||||
<div className='text-sm font-medium leading-5 text-gray-900 group-hover:text-[#155EEF]'>{t('appDebug.agent.setting.name')}</div>
|
||||
</div>
|
||||
<ArrowUpRight className='w-4 h-4 text-gray-500 group-hover:text-[#155EEF]' />
|
||||
<ArrowUpRight className='h-4 w-4 text-gray-500 group-hover:text-[#155EEF]' />
|
||||
</div>
|
||||
<div className='ml-9 leading-[18px] text-xs font-normal text-gray-500'>{t('appDebug.agent.setting.description')}</div>
|
||||
<div className='ml-9 text-xs font-normal leading-[18px] text-gray-500'>{t('appDebug.agent.setting.description')}</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
@ -116,15 +116,15 @@ const AssistantTypePicker: FC<Props> = ({
|
||||
}}
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
|
||||
<div className={cn(open && 'bg-gray-50', 'flex items-center h-8 px-3 border border-black/5 rounded-lg cursor-pointer select-none space-x-1 text-indigo-600')}>
|
||||
{isAgent ? <BubbleText className='w-3 h-3' /> : <CuteRobot className='w-3 h-3' />}
|
||||
<div className={cn(open && 'bg-gray-50', 'flex h-8 cursor-pointer select-none items-center space-x-1 rounded-lg border border-black/5 px-3 text-indigo-600')}>
|
||||
{isAgent ? <BubbleText className='h-3 w-3' /> : <CuteRobot className='h-3 w-3' />}
|
||||
<div className='text-xs font-medium'>{t(`appDebug.assistantType.${isAgent ? 'agentAssistant' : 'chatAssistant'}.name`)}</div>
|
||||
<RiArrowDownSLine className='w-3 h-3' />
|
||||
<RiArrowDownSLine className='h-3 w-3' />
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent style={{ zIndex: 1000 }}>
|
||||
<div className='relative left-0.5 p-6 bg-white border border-black/8 shadow-lg rounded-xl w-[480px]'>
|
||||
<div className='mb-2 leading-5 text-sm font-semibold text-gray-900'>{t('appDebug.assistantType.name')}</div>
|
||||
<div className='relative left-0.5 w-[480px] rounded-xl border border-black/8 bg-white p-6 shadow-lg'>
|
||||
<div className='mb-2 text-sm font-semibold leading-5 text-gray-900'>{t('appDebug.assistantType.name')}</div>
|
||||
<SelectItem
|
||||
Icon={BubbleText}
|
||||
value='chat'
|
||||
|
||||
@ -17,7 +17,7 @@ const AutomaticBtn: FC<IAutomaticBtnProps> = ({
|
||||
|
||||
return (
|
||||
<Button variant='secondary-accent' size='small' onClick={onClick}>
|
||||
<RiSparklingFill className='w-3.5 h-3.5 mr-1' />
|
||||
<RiSparklingFill className='mr-1 h-3.5 w-3.5' />
|
||||
<span className=''>{t('appDebug.operation.automatic')}</span>
|
||||
</Button>
|
||||
)
|
||||
|
||||
@ -54,10 +54,10 @@ const TryLabel: FC<{
|
||||
}> = ({ Icon, text, onClick }) => {
|
||||
return (
|
||||
<div
|
||||
className='mt-2 mr-1 shrink-0 flex h-7 items-center px-2 bg-components-button-secondary-bg rounded-lg cursor-pointer'
|
||||
className='mr-1 mt-2 flex h-7 shrink-0 cursor-pointer items-center rounded-lg bg-components-button-secondary-bg px-2'
|
||||
onClick={onClick}
|
||||
>
|
||||
<Icon className='w-4 h-4 text-text-tertiary'></Icon>
|
||||
<Icon className='h-4 w-4 text-text-tertiary'></Icon>
|
||||
<div className='ml-1 text-xs font-medium text-text-secondary'>{text}</div>
|
||||
</div>
|
||||
)
|
||||
@ -138,16 +138,16 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
|
||||
const [res, setRes] = React.useState<AutomaticRes | null>(null)
|
||||
|
||||
const renderLoading = (
|
||||
<div className='w-0 grow flex flex-col items-center justify-center h-full space-y-3'>
|
||||
<div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3'>
|
||||
<Loading />
|
||||
<div className='text-[13px] text-text-tertiary'>{t('appDebug.generate.loading')}</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
const renderNoData = (
|
||||
<div className='w-0 grow flex flex-col items-center px-8 justify-center h-full space-y-3'>
|
||||
<Generator className='w-14 h-14 text-text-tertiary' />
|
||||
<div className='leading-5 text-center text-[13px] font-normal text-text-tertiary'>
|
||||
<div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8'>
|
||||
<Generator className='h-14 w-14 text-text-tertiary' />
|
||||
<div className='text-center text-[13px] font-normal leading-5 text-text-tertiary'>
|
||||
<div>{t('appDebug.generate.noDataLine1')}</div>
|
||||
<div>{t('appDebug.generate.noDataLine2')}</div>
|
||||
</div>
|
||||
@ -189,18 +189,18 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
|
||||
<Modal
|
||||
isShow={isShow}
|
||||
onClose={onClose}
|
||||
className='!p-0 min-w-[1140px]'
|
||||
className='min-w-[1140px] !p-0'
|
||||
closable
|
||||
>
|
||||
<div className='flex h-[680px] flex-wrap'>
|
||||
<div className='w-[570px] shrink-0 p-6 h-full overflow-y-auto border-r border-divider-regular'>
|
||||
<div className='h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6'>
|
||||
<div className='mb-8'>
|
||||
<div className={`leading-[28px] text-lg font-bold ${s.textGradient}`}>{t('appDebug.generate.title')}</div>
|
||||
<div className={`text-lg font-bold leading-[28px] ${s.textGradient}`}>{t('appDebug.generate.title')}</div>
|
||||
<div className='mt-1 text-[13px] font-normal text-text-tertiary'>{t('appDebug.generate.description')}</div>
|
||||
</div>
|
||||
<div className='flex items-center mb-8'>
|
||||
<div className='mb-8 flex items-center'>
|
||||
<ModelIcon
|
||||
className='shrink-0 mr-1.5 '
|
||||
className='mr-1.5 shrink-0 '
|
||||
provider={currentProvider}
|
||||
modelName={currentModel?.model}
|
||||
/>
|
||||
@ -213,8 +213,8 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
|
||||
</div>
|
||||
<div >
|
||||
<div className='flex items-center'>
|
||||
<div className='mr-3 shrink-0 leading-[18px] text-xs font-semibold text-text-tertiary uppercase'>{t('appDebug.generate.tryIt')}</div>
|
||||
<div className='grow h-px' style={{
|
||||
<div className='mr-3 shrink-0 text-xs font-semibold uppercase leading-[18px] text-text-tertiary'>{t('appDebug.generate.tryIt')}</div>
|
||||
<div className='h-px grow' style={{
|
||||
background: 'linear-gradient(to right, rgba(243, 244, 246, 1), rgba(243, 244, 246, 0))',
|
||||
}}></div>
|
||||
</div>
|
||||
@ -232,7 +232,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
|
||||
{/* inputs */}
|
||||
<div className='mt-6'>
|
||||
<div className='text-[0px]'>
|
||||
<div className='mb-2 leading-5 text-sm font-medium text-text-primary'>{t('appDebug.generate.instruction')}</div>
|
||||
<div className='mb-2 text-sm font-medium leading-5 text-text-primary'>{t('appDebug.generate.instruction')}</div>
|
||||
<Textarea
|
||||
className="h-[200px] resize-none"
|
||||
placeholder={t('appDebug.generate.instructionPlaceHolder') as string}
|
||||
@ -247,7 +247,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
|
||||
onClick={onGenerate}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Generator className='w-4 h-4 text-white' />
|
||||
<Generator className='h-4 w-4 text-white' />
|
||||
<span className='text-xs font-semibold text-white'>{t('appDebug.generate.generate')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
@ -255,8 +255,8 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
|
||||
</div>
|
||||
|
||||
{(!isLoading && res) && (
|
||||
<div className='w-0 grow p-6 pb-0 h-full'>
|
||||
<div className='shrink-0 mb-3 leading-[160%] text-base font-semibold text-text-secondary'>{t('appDebug.generate.resTitle')}</div>
|
||||
<div className='h-full w-0 grow p-6 pb-0'>
|
||||
<div className='mb-3 shrink-0 text-base font-semibold leading-[160%] text-text-secondary'>{t('appDebug.generate.resTitle')}</div>
|
||||
<div className={cn('max-h-[555px] overflow-y-auto', !isInLLMNode && 'pb-2')}>
|
||||
<ConfigPrompt
|
||||
mode={mode}
|
||||
@ -283,17 +283,17 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
|
||||
<div className='mt-7'>
|
||||
<GroupName name={t('appDebug.feature.groupChat.title')} />
|
||||
<div
|
||||
className='mb-1 p-3 border-t-[0.5px] border-l-[0.5px] border-effects-highlight rounded-xl bg-background-section-burn'
|
||||
className='mb-1 rounded-xl border-l-[0.5px] border-t-[0.5px] border-effects-highlight bg-background-section-burn p-3'
|
||||
>
|
||||
<div className='mb-2 flex items-center gap-2'>
|
||||
<div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
|
||||
<LoveMessage className='w-4 h-4 text-text-primary-on-surface' />
|
||||
<div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'>
|
||||
<LoveMessage className='h-4 w-4 text-text-primary-on-surface' />
|
||||
</div>
|
||||
<div className='grow flex items-center text-text-secondary system-sm-semibold'>
|
||||
<div className='system-sm-semibold flex grow items-center text-text-secondary'>
|
||||
{t('appDebug.feature.conversationOpener.title')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='min-h-8 text-text-tertiary system-xs-regular'>{res.opening_statement}</div>
|
||||
<div className='system-xs-regular min-h-8 text-text-tertiary'>{res.opening_statement}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -301,7 +301,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='flex justify-end py-4 bg-background-default'>
|
||||
<div className='flex justify-end bg-background-default py-4'>
|
||||
<Button onClick={onClose}>{t('common.operation.cancel')}</Button>
|
||||
<Button variant='primary' className='ml-2' onClick={() => {
|
||||
setShowConfirmOverwrite(true)
|
||||
|
||||
@ -100,15 +100,15 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
|
||||
const [showConfirmOverwrite, setShowConfirmOverwrite] = React.useState(false)
|
||||
|
||||
const renderLoading = (
|
||||
<div className='w-0 grow flex flex-col items-center justify-center h-full space-y-3'>
|
||||
<div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3'>
|
||||
<Loading />
|
||||
<div className='text-[13px] text-gray-400'>{t('appDebug.codegen.loading')}</div>
|
||||
</div>
|
||||
)
|
||||
const renderNoData = (
|
||||
<div className='w-0 grow flex flex-col items-center px-8 justify-center h-full space-y-3'>
|
||||
<Generator className='w-14 h-14 text-gray-300' />
|
||||
<div className='leading-5 text-center text-[13px] font-normal text-gray-400'>
|
||||
<div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8'>
|
||||
<Generator className='h-14 w-14 text-gray-300' />
|
||||
<div className='text-center text-[13px] font-normal leading-5 text-gray-400'>
|
||||
<div>{t('appDebug.codegen.noDataLine1')}</div>
|
||||
<div>{t('appDebug.codegen.noDataLine2')}</div>
|
||||
</div>
|
||||
@ -119,18 +119,18 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
|
||||
<Modal
|
||||
isShow={isShow}
|
||||
onClose={onClose}
|
||||
className='!p-0 min-w-[1140px]'
|
||||
className='min-w-[1140px] !p-0'
|
||||
closable
|
||||
>
|
||||
<div className='relative flex h-[680px] flex-wrap'>
|
||||
<div className='w-[570px] shrink-0 p-8 h-full overflow-y-auto border-r border-gray-100'>
|
||||
<div className='h-full w-[570px] shrink-0 overflow-y-auto border-r border-gray-100 p-8'>
|
||||
<div className='mb-8'>
|
||||
<div className={'leading-[28px] text-lg font-bold'}>{t('appDebug.codegen.title')}</div>
|
||||
<div className={'text-lg font-bold leading-[28px]'}>{t('appDebug.codegen.title')}</div>
|
||||
<div className='mt-1 text-[13px] font-normal text-gray-500'>{t('appDebug.codegen.description')}</div>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<ModelIcon
|
||||
className='shrink-0 mr-1.5'
|
||||
className='mr-1.5 shrink-0'
|
||||
provider={currentProvider}
|
||||
modelName={currentModel?.model}
|
||||
/>
|
||||
@ -143,9 +143,9 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
|
||||
</div>
|
||||
<div className='mt-6'>
|
||||
<div className='text-[0px]'>
|
||||
<div className='mb-2 leading-5 text-sm font-medium text-gray-900'>{t('appDebug.codegen.instruction')}</div>
|
||||
<div className='mb-2 text-sm font-medium leading-5 text-gray-900'>{t('appDebug.codegen.instruction')}</div>
|
||||
<textarea
|
||||
className="w-full h-[200px] overflow-y-auto px-3 py-2 text-sm bg-gray-50 rounded-lg"
|
||||
className="h-[200px] w-full overflow-y-auto rounded-lg bg-gray-50 px-3 py-2 text-sm"
|
||||
placeholder={t('appDebug.codegen.instructionPlaceholder') || ''}
|
||||
value={instruction}
|
||||
onChange={e => setInstruction(e.target.value)}
|
||||
@ -159,7 +159,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
|
||||
onClick={onGenerate}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Generator className='w-4 h-4 text-white' />
|
||||
<Generator className='h-4 w-4 text-white' />
|
||||
<span className='text-xs font-semibold text-white'>{t('appDebug.codegen.generate')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
@ -168,8 +168,8 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
|
||||
{isLoading && renderLoading}
|
||||
{!isLoading && !res && renderNoData}
|
||||
{(!isLoading && res) && (
|
||||
<div className='w-0 grow p-6 pb-0 h-full'>
|
||||
<div className='shrink-0 mb-3 leading-[160%] text-base font-semibold text-gray-800'>{t('appDebug.codegen.resTitle')}</div>
|
||||
<div className='h-full w-0 grow p-6 pb-0'>
|
||||
<div className='mb-3 shrink-0 text-base font-semibold leading-[160%] text-gray-800'>{t('appDebug.codegen.resTitle')}</div>
|
||||
<div className={cn('max-h-[555px] overflow-y-auto', !isInLLMNode && 'pb-2')}>
|
||||
<ConfigPrompt
|
||||
mode={mode}
|
||||
@ -186,7 +186,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
|
||||
{res?.code && (
|
||||
<div className='mt-4'>
|
||||
<h3 className='mb-2 text-sm font-medium text-gray-900'>{t('appDebug.codegen.generatedCode')}</h3>
|
||||
<pre className='p-4 bg-gray-50 rounded-lg overflow-x-auto'>
|
||||
<pre className='overflow-x-auto rounded-lg bg-gray-50 p-4'>
|
||||
<code className={`language-${res.language}`}>
|
||||
{res.code}
|
||||
</code>
|
||||
@ -194,7 +194,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
|
||||
</div>
|
||||
)}
|
||||
{res?.error && (
|
||||
<div className='mt-4 p-4 bg-red-50 rounded-lg'>
|
||||
<div className='mt-4 rounded-lg bg-red-50 p-4'>
|
||||
<p className='text-sm text-red-600'>{res.error}</p>
|
||||
</div>
|
||||
)}
|
||||
@ -202,7 +202,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='flex justify-end py-4 bg-white'>
|
||||
<div className='flex justify-end bg-white py-4'>
|
||||
<Button onClick={onClose}>{t('common.operation.cancel')}</Button>
|
||||
<Button variant='primary' className='ml-2' onClick={() => {
|
||||
setShowConfirmOverwrite(true)
|
||||
|
||||
@ -48,14 +48,14 @@ const ConfigDocument: FC = () => {
|
||||
return null
|
||||
|
||||
return (
|
||||
<div className='mt-2 flex items-center gap-2 p-2 rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn'>
|
||||
<div className='mt-2 flex items-center gap-2 rounded-xl border-l-[0.5px] border-t-[0.5px] bg-background-section-burn p-2'>
|
||||
<div className='shrink-0 p-1'>
|
||||
<div className='p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
|
||||
<Document className='w-4 h-4 text-text-primary-on-surface' />
|
||||
<div className='rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs'>
|
||||
<Document className='h-4 w-4 text-text-primary-on-surface' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='grow flex items-center'>
|
||||
<div className='mr-1 text-text-secondary system-sm-semibold'>{t('appDebug.feature.documentUpload.title')}</div>
|
||||
<div className='flex grow items-center'>
|
||||
<div className='system-sm-semibold mr-1 text-text-secondary'>{t('appDebug.feature.documentUpload.title')}</div>
|
||||
<Tooltip
|
||||
popupContent={
|
||||
<div className='w-[180px]' >
|
||||
@ -64,8 +64,8 @@ const ConfigDocument: FC = () => {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='shrink-0 flex items-center'>
|
||||
<div className='ml-1 mr-3 w-[1px] h-3.5 bg-divider-subtle'></div>
|
||||
<div className='flex shrink-0 items-center'>
|
||||
<div className='ml-1 mr-3 h-3.5 w-[1px] bg-divider-subtle'></div>
|
||||
<Switch
|
||||
defaultValue={isDocumentEnabled}
|
||||
onChange={handleChange}
|
||||
|
||||
@ -57,7 +57,7 @@ const Config: FC = () => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="grow h-0 relative px-6 pb-[50px] overflow-y-auto"
|
||||
className="relative h-0 grow overflow-y-auto px-6 pb-[50px]"
|
||||
>
|
||||
{/* Template */}
|
||||
<ConfigPrompt
|
||||
|
||||
@ -13,8 +13,8 @@ export type IContrlBtnGroupProps = {
|
||||
const ContrlBtnGroup: FC<IContrlBtnGroupProps> = ({ onSave, onReset }) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className="fixed left-[224px] bottom-0 w-[519px] h-[64px]">
|
||||
<div className={`${s.ctrlBtn} flex items-center h-full pl-4 gap-2 bg-white`}>
|
||||
<div className="fixed bottom-0 left-[224px] h-[64px] w-[519px]">
|
||||
<div className={`${s.ctrlBtn} flex h-full items-center gap-2 bg-white pl-4`}>
|
||||
<Button variant='primary' onClick={onSave}>{t('appDebug.operation.applyConfig')}</Button>
|
||||
<Button onClick={onReset}>{t('appDebug.operation.resetConfig')}</Button>
|
||||
</div>
|
||||
|
||||
@ -28,24 +28,24 @@ const CardItem: FC<ICardItemProps> = ({
|
||||
<div
|
||||
className={
|
||||
cn(className, s.card,
|
||||
'relative flex items-center rounded-xl px-3 py-2.5 bg-white border border-gray-200 cursor-pointer')
|
||||
'relative flex cursor-pointer items-center rounded-xl border border-gray-200 bg-white px-3 py-2.5')
|
||||
}>
|
||||
<div className='flex items-center space-x-2'>
|
||||
<div className={cn(!config.embedding_available && 'opacity-50')}>
|
||||
<TypeIcon type="upload_file" />
|
||||
</div>
|
||||
<div>
|
||||
<div className='flex items-center w-[160px] mr-1'>
|
||||
<div className={cn('text-[13px] leading-[18px] font-medium text-gray-800 overflow-hidden text-ellipsis whitespace-nowrap', !config.embedding_available && 'opacity-50')}>{config.name}</div>
|
||||
<div className='mr-1 flex w-[160px] items-center'>
|
||||
<div className={cn('overflow-hidden text-ellipsis whitespace-nowrap text-[13px] font-medium leading-[18px] text-gray-800', !config.embedding_available && 'opacity-50')}>{config.name}</div>
|
||||
{!config.embedding_available && (
|
||||
<Tooltip
|
||||
popupContent={t('dataset.unavailableTip')}
|
||||
>
|
||||
<span className='shrink-0 inline-flex whitespace-nowrap px-1 border border-gray-200 rounded-md text-gray-500 text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
|
||||
<span className='inline-flex shrink-0 whitespace-nowrap rounded-md border border-gray-200 px-1 text-xs font-normal leading-[18px] text-gray-500'>{t('dataset.unavailable')}</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
<div className={cn('max-w-[150px] flex text-xs text-gray-500', !config.embedding_available && 'opacity-50')}>
|
||||
<div className={cn('flex max-w-[150px] text-xs text-gray-500', !config.embedding_available && 'opacity-50')}>
|
||||
{formatNumber(config.word_count)} {t('appDebug.feature.dataSet.words')} · {formatNumber(config.document_count)} {t('appDebug.feature.dataSet.textBlocks')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -47,31 +47,31 @@ const Item: FC<ItemProps> = ({
|
||||
const [isDeleting, setIsDeleting] = useState(false)
|
||||
|
||||
return (
|
||||
<div className={cn('group relative flex items-center mb-1 last-of-type:mb-0 pl-2.5 py-2 pr-3 w-full rounded-lg bg-components-panel-on-panel-item-bg border-components-panel-border-subtle border-[0.5px] shadow-xs hover:shadow-sm hover:bg-components-panel-on-panel-item-bg-hover', isDeleting && 'hover:bg-state-destructive-hover border-state-destructive-border')}>
|
||||
<div className={cn('group relative mb-1 flex w-full items-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg py-2 pl-2.5 pr-3 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm', isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover')}>
|
||||
{
|
||||
config.data_source_type === DataSourceType.FILE && (
|
||||
<div className='shrink-0 flex items-center justify-center mr-2 w-6 h-6 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#E0EAFF]'>
|
||||
<Folder className='w-4 h-4 text-[#444CE7]' />
|
||||
<div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF]'>
|
||||
<Folder className='h-4 w-4 text-[#444CE7]' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
config.data_source_type === DataSourceType.NOTION && (
|
||||
<div className='shrink-0 flex items-center justify-center mr-2 w-6 h-6 rounded-md border-[0.5px] border-[#EAECF5]'>
|
||||
<FileIcon type='notion' className='w-4 h-4' />
|
||||
<div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#EAECF5]'>
|
||||
<FileIcon type='notion' className='h-4 w-4' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
config.data_source_type === DataSourceType.WEB && (
|
||||
<div className='shrink-0 flex items-center justify-center mr-2 w-6 h-6 bg-[#F5FAFF] border-[0.5px] border-blue-100 rounded-md'>
|
||||
<Globe06 className='w-4 h-4 text-blue-600' />
|
||||
<div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-blue-100 bg-[#F5FAFF]'>
|
||||
<Globe06 className='h-4 w-4 text-blue-600' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className='grow'>
|
||||
<div className='flex items-center h-[18px]'>
|
||||
<div className='grow text-[13px] font-medium text-text-secondary truncate' title={config.name}>{config.name}</div>
|
||||
<div className='flex h-[18px] items-center'>
|
||||
<div className='grow truncate text-[13px] font-medium text-text-secondary' title={config.name}>{config.name}</div>
|
||||
{config.provider === 'external'
|
||||
? <Badge text={t('dataset.externalTag') as string} />
|
||||
: <Badge
|
||||
@ -79,22 +79,22 @@ const Item: FC<ItemProps> = ({
|
||||
/>}
|
||||
</div>
|
||||
</div >
|
||||
<div className='hidden rounded-lg group-hover:flex items-center justify-end absolute right-0 top-0 bottom-0 pr-2 w-[124px] bg-gradient-to-r from-white/50 to-white to-50%'>
|
||||
<div className='absolute bottom-0 right-0 top-0 hidden w-[124px] items-center justify-end rounded-lg bg-gradient-to-r from-white/50 to-white to-50% pr-2 group-hover:flex'>
|
||||
{
|
||||
editable && <div
|
||||
className='flex items-center justify-center mr-1 w-6 h-6 hover:bg-black/5 rounded-md cursor-pointer'
|
||||
className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5'
|
||||
onClick={() => setShowSettingsModal(true)}
|
||||
>
|
||||
<RiEditLine className='w-4 h-4 text-text-tertiary' />
|
||||
<RiEditLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
}
|
||||
<div
|
||||
className='flex items-center justify-center w-6 h-6 text-text-tertiary cursor-pointer hover:text-text-destructive'
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center text-text-tertiary hover:text-text-destructive'
|
||||
onClick={() => onRemove(config.id)}
|
||||
onMouseOver={() => setIsDeleting(true)}
|
||||
onMouseLeave={() => setIsDeleting(false)}
|
||||
>
|
||||
<RiDeleteBinLine className='w-4 h-4' />
|
||||
<RiDeleteBinLine className='h-4 w-4' />
|
||||
</div>
|
||||
</div>
|
||||
<Drawer isOpen={showSettingsModal} onClose={() => setShowSettingsModal(false)} footer={null} mask={isMobile} panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'>
|
||||
|
||||
@ -14,10 +14,10 @@ const ContextVar: FC<Props> = (props) => {
|
||||
const currItem = options.find(item => item.value === value)
|
||||
const notSetVar = !currItem
|
||||
return (
|
||||
<div className={cn(notSetVar ? 'rounded-bl-xl rounded-br-xl bg-[#FEF0C7] border-[#FEF0C7]' : 'border-components-panel-border-subtle', 'flex justify-between items-center h-12 px-3 border-t ')}>
|
||||
<div className='flex items-center space-x-1 shrink-0'>
|
||||
<div className={cn(notSetVar ? 'rounded-bl-xl rounded-br-xl border-[#FEF0C7] bg-[#FEF0C7]' : 'border-components-panel-border-subtle', 'flex h-12 items-center justify-between border-t px-3 ')}>
|
||||
<div className='flex shrink-0 items-center space-x-1'>
|
||||
<div className='p-1'>
|
||||
<BracketsX className='w-4 h-4 text-text-accent' />
|
||||
<BracketsX className='h-4 w-4 text-text-accent' />
|
||||
</div>
|
||||
<div className='mr-1 text-sm font-medium text-text-secondary'>{t('appDebug.feature.dataSet.queryVariable.title')}</div>
|
||||
<Tooltip
|
||||
|
||||
@ -23,7 +23,7 @@ export type Props = {
|
||||
}
|
||||
|
||||
const VarItem: FC<{ item: Option }> = ({ item }) => (
|
||||
<div className='flex items-center h-[18px] px-1 bg-[#EFF8FF] rounded space-x-1'>
|
||||
<div className='flex h-[18px] items-center space-x-1 rounded bg-[#EFF8FF] px-1'>
|
||||
<IconTypeIcon type={item.type as IInputTypeIconProps['type']} className='text-[#1570EF]' />
|
||||
<div className='flex text-xs font-medium text-[#1570EF]'>
|
||||
<span className='opacity-60'>{'{{'}</span>
|
||||
@ -56,11 +56,11 @@ const VarPicker: FC<Props> = ({
|
||||
<PortalToFollowElemTrigger className={cn(triggerClassName)} onClick={() => setOpen(v => !v)}>
|
||||
<div className={cn(
|
||||
className,
|
||||
notSetVar ? 'bg-[#FFFCF5] border-[#FEDF89] text-[#DC6803]' : ' hover:bg-components-button-secondary-bg border-components-button-secondary-border text-text-accent',
|
||||
notSetVar ? 'border-[#FEDF89] bg-[#FFFCF5] text-[#DC6803]' : ' border-components-button-secondary-border text-text-accent hover:bg-components-button-secondary-bg',
|
||||
open ? 'bg-components-button-secondary-bg' : 'bg-transparent',
|
||||
`
|
||||
flex items-center h-8 justify-center px-2 space-x-1 rounded-lg border shadow-xs cursor-pointer
|
||||
text-[13px] font-medium
|
||||
flex h-8 cursor-pointer items-center justify-center space-x-1 rounded-lg border px-2 text-[13px]
|
||||
font-medium shadow-xs
|
||||
`)}>
|
||||
<div>
|
||||
{value
|
||||
@ -71,16 +71,16 @@ const VarPicker: FC<Props> = ({
|
||||
{notSelectedVarTip || t('appDebug.feature.dataSet.queryVariable.choosePlaceholder')}
|
||||
</div>)}
|
||||
</div>
|
||||
<ChevronDownIcon className={cn(open && 'rotate-180 text-text-tertiary', 'w-3.5 h-3.5')} />
|
||||
<ChevronDownIcon className={cn(open && 'rotate-180 text-text-tertiary', 'h-3.5 w-3.5')} />
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent style={{ zIndex: 1000 }}>
|
||||
{options.length > 0
|
||||
? (<div className='w-[240px] max-h-[50vh] overflow-y-auto p-1 border bg-components-panel-bg border-components-panel-border rounded-lg shadow-lg'>
|
||||
? (<div className='max-h-[50vh] w-[240px] overflow-y-auto rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg'>
|
||||
{options.map(({ name, value, type }, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className='px-3 py-1 flex rounded-lg hover:bg-state-base-hover cursor-pointer'
|
||||
className='flex cursor-pointer rounded-lg px-3 py-1 hover:bg-state-base-hover'
|
||||
onClick={() => {
|
||||
onChange(value)
|
||||
setOpen(false)
|
||||
@ -91,7 +91,7 @@ const VarPicker: FC<Props> = ({
|
||||
))}
|
||||
</div>)
|
||||
: (
|
||||
<div className='w-[240px] p-6 bg-components-panel-bg border border-components-panel-border rounded-lg shadow-lg'>
|
||||
<div className='w-[240px] rounded-lg border border-components-panel-border bg-components-panel-bg p-6 shadow-lg'>
|
||||
<div className='mb-1 text-sm font-medium text-text-secondary'>{t('appDebug.feature.dataSet.queryVariable.noVar')}</div>
|
||||
<div className='text-xs leading-normal text-text-tertiary'>{t('appDebug.feature.dataSet.queryVariable.noVarTip')}</div>
|
||||
</div>
|
||||
|
||||
@ -238,7 +238,7 @@ const DatasetConfig: FC = () => {
|
||||
>
|
||||
{hasData
|
||||
? (
|
||||
<div className='flex flex-wrap mt-1 px-3 pb-3 justify-between'>
|
||||
<div className='mt-1 flex flex-wrap justify-between px-3 pb-3'>
|
||||
{formattedDataset.map(item => (
|
||||
<CardItem
|
||||
key={item.id}
|
||||
@ -252,11 +252,11 @@ const DatasetConfig: FC = () => {
|
||||
)
|
||||
: (
|
||||
<div className='mt-1 px-3 pb-3'>
|
||||
<div className='pt-2 pb-1 text-xs text-text-tertiary'>{t('appDebug.feature.dataSet.noData')}</div>
|
||||
<div className='pb-1 pt-2 text-xs text-text-tertiary'>{t('appDebug.feature.dataSet.noData')}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='py-2 border-t border-t-divider-subtle'>
|
||||
<div className='border-t border-t-divider-subtle py-2'>
|
||||
<MetadataFilter
|
||||
metadataList={metadataList}
|
||||
selectedDatasetsLoaded
|
||||
|
||||
@ -185,30 +185,30 @@ const ConfigContent: FC<Props> = ({
|
||||
</div>
|
||||
{type === RETRIEVE_TYPE.multiWay && (
|
||||
<>
|
||||
<div className='flex items-center my-2 py-1 h-6'>
|
||||
<div className='shrink-0 mr-2 system-xs-semibold-uppercase text-text-secondary'>
|
||||
<div className='my-2 flex h-6 items-center py-1'>
|
||||
<div className='system-xs-semibold-uppercase mr-2 shrink-0 text-text-secondary'>
|
||||
{t('dataset.rerankSettings')}
|
||||
</div>
|
||||
<Divider bgStyle='gradient' className='!h-px mx-0' />
|
||||
<Divider bgStyle='gradient' className='mx-0 !h-px' />
|
||||
</div>
|
||||
{
|
||||
selectedDatasetsMode.inconsistentEmbeddingModel
|
||||
&& (
|
||||
<div className='mt-4 system-xs-medium text-text-warning'>
|
||||
<div className='system-xs-medium mt-4 text-text-warning'>
|
||||
{t('dataset.inconsistentEmbeddingModelTip')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
selectedDatasetsMode.mixtureInternalAndExternal && (
|
||||
<div className='mt-4 system-xs-medium text-text-warning'>
|
||||
<div className='system-xs-medium mt-4 text-text-warning'>
|
||||
{t('dataset.mixtureInternalAndExternalTip')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
selectedDatasetsMode.allExternal && (
|
||||
<div className='mt-4 system-xs-medium text-text-warning'>
|
||||
<div className='system-xs-medium mt-4 text-text-warning'>
|
||||
{t('dataset.allExternalTip')}
|
||||
</div>
|
||||
)
|
||||
@ -216,7 +216,7 @@ const ConfigContent: FC<Props> = ({
|
||||
{
|
||||
selectedDatasetsMode.mixtureHighQualityAndEconomic
|
||||
&& (
|
||||
<div className='mt-4 system-xs-medium text-text-warning'>
|
||||
<div className='system-xs-medium mt-4 text-text-warning'>
|
||||
{t('dataset.mixtureHighQualityAndEconomicTip')}
|
||||
</div>
|
||||
)
|
||||
@ -229,7 +229,7 @@ const ConfigContent: FC<Props> = ({
|
||||
<div
|
||||
key={option.value}
|
||||
className={cn(
|
||||
'flex items-center justify-center w-[calc((100%-8px)/2)] h-8 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg cursor-pointer system-sm-medium text-text-secondary',
|
||||
'system-sm-medium flex h-8 w-[calc((100%-8px)/2)] cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary',
|
||||
selectedRerankMode === option.value && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary',
|
||||
)}
|
||||
onClick={() => handleRerankModeChange(option.value)}
|
||||
@ -264,7 +264,7 @@ const ConfigContent: FC<Props> = ({
|
||||
/>
|
||||
)
|
||||
}
|
||||
<div className='leading-[32px] ml-1 text-text-secondary system-sm-semibold'>{t('common.modelProvider.rerankModel.key')}</div>
|
||||
<div className='system-sm-semibold ml-1 leading-[32px] text-text-secondary'>{t('common.modelProvider.rerankModel.key')}</div>
|
||||
<Tooltip
|
||||
popupContent={
|
||||
<div className="w-[200px]">
|
||||
@ -353,7 +353,7 @@ const ConfigContent: FC<Props> = ({
|
||||
{isInWorkflow && type === RETRIEVE_TYPE.oneWay && (
|
||||
<div className='mt-4'>
|
||||
<div className='flex items-center space-x-0.5'>
|
||||
<div className='leading-[32px] text-[13px] font-medium text-text-primary'>{t('common.modelProvider.systemReasoningModel.key')}</div>
|
||||
<div className='text-[13px] font-medium leading-[32px] text-text-primary'>{t('common.modelProvider.systemReasoningModel.key')}</div>
|
||||
<Tooltip
|
||||
popupContent={t('common.modelProvider.systemReasoningModel.tip')}
|
||||
/>
|
||||
|
||||
@ -121,7 +121,7 @@ const ParamsConfig = ({
|
||||
}}
|
||||
disabled={disabled}
|
||||
>
|
||||
<RiEqualizer2Line className='mr-1 w-3.5 h-3.5' />
|
||||
<RiEqualizer2Line className='mr-1 h-3.5 w-3.5' />
|
||||
{t('dataset.retrievalSettings')}
|
||||
</Button>
|
||||
{
|
||||
|
||||
@ -29,9 +29,9 @@ const WeightedScore = ({
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='px-3 pt-5 pb-2 space-x-3 rounded-lg border border-components-panel-border'>
|
||||
<div className='space-x-3 rounded-lg border border-components-panel-border px-3 pb-2 pt-5'>
|
||||
<Slider
|
||||
className={cn('grow h-0.5 !bg-util-colors-teal-teal-500 rounded-full')}
|
||||
className={cn('h-0.5 grow rounded-full !bg-util-colors-teal-teal-500')}
|
||||
max={1.0}
|
||||
min={0}
|
||||
step={0.1}
|
||||
@ -39,14 +39,14 @@ const WeightedScore = ({
|
||||
onChange={v => onChange({ value: [v, (10 - v * 10) / 10] })}
|
||||
trackClassName='weightedScoreSliderTrack'
|
||||
/>
|
||||
<div className='flex justify-between mt-3'>
|
||||
<div className='shrink-0 flex items-center w-[90px] system-xs-semibold-uppercase text-util-colors-blue-light-blue-light-500'>
|
||||
<div className='mt-3 flex justify-between'>
|
||||
<div className='system-xs-semibold-uppercase flex w-[90px] shrink-0 items-center text-util-colors-blue-light-blue-light-500'>
|
||||
<div className='mr-1 truncate uppercase' title={t('dataset.weightedScore.semantic') || ''}>
|
||||
{t('dataset.weightedScore.semantic')}
|
||||
</div>
|
||||
{formatNumber(value.value[0])}
|
||||
</div>
|
||||
<div className='shrink-0 flex items-center justify-end w-[90px] system-xs-semibold-uppercase text-util-colors-teal-teal-500'>
|
||||
<div className='system-xs-semibold-uppercase flex w-[90px] shrink-0 items-center justify-end text-util-colors-teal-teal-500'>
|
||||
{formatNumber(value.value[1])}
|
||||
<div className='ml-1 truncate uppercase' title={t('dataset.weightedScore.keyword') || ''}>
|
||||
{t('dataset.weightedScore.keyword')}
|
||||
|
||||
@ -104,7 +104,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
|
||||
)}
|
||||
|
||||
{(loaded && hasNoData) && (
|
||||
<div className='flex items-center justify-center mt-6 rounded-lg space-x-1 h-[128px] text-[13px] border'
|
||||
<div className='mt-6 flex h-[128px] items-center justify-center space-x-1 rounded-lg border text-[13px]'
|
||||
style={{
|
||||
background: 'rgba(0, 0, 0, 0.02)',
|
||||
borderColor: 'rgba(0, 0, 0, 0.02',
|
||||
@ -117,13 +117,13 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
|
||||
|
||||
{datasets && datasets?.length > 0 && (
|
||||
<>
|
||||
<div ref={listRef} className='mt-7 space-y-1 max-h-[286px] overflow-y-auto'>
|
||||
<div ref={listRef} className='mt-7 max-h-[286px] space-y-1 overflow-y-auto'>
|
||||
{datasets.map(item => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={cn(
|
||||
'flex justify-between items-center h-10 px-2 rounded-lg bg-components-panel-on-panel-item-bg border-components-panel-border-subtle border-[0.5px] shadow-xs cursor-pointer hover:border-components-panel-border hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
|
||||
selected.some(i => i.id === item.id) && 'border-[1.5px] border-components-option-card-option-selected-border bg-state-accent-hover shadow-xs hover:shadow-xs hover:border-components-option-card-option-selected-border hover:bg-state-accent-hover',
|
||||
'flex h-10 cursor-pointer items-center justify-between rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2 shadow-xs hover:border-components-panel-border hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
|
||||
selected.some(i => i.id === item.id) && 'border-[1.5px] border-components-option-card-option-selected-border bg-state-accent-hover shadow-xs hover:border-components-option-card-option-selected-border hover:bg-state-accent-hover hover:shadow-xs',
|
||||
!item.embedding_available && 'hover:border-components-panel-border-subtle hover:bg-components-panel-on-panel-item-bg hover:shadow-xs',
|
||||
)}
|
||||
onClick={() => {
|
||||
@ -136,9 +136,9 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
|
||||
<div className={cn('mr-2', !item.embedding_available && 'opacity-30')}>
|
||||
<TypeIcon type="upload_file" size='md' />
|
||||
</div>
|
||||
<div className={cn('max-w-[200px] text-[13px] font-medium text-text-secondary truncate', !item.embedding_available && 'opacity-30 !max-w-[120px]')}>{item.name}</div>
|
||||
<div className={cn('max-w-[200px] truncate text-[13px] font-medium text-text-secondary', !item.embedding_available && '!max-w-[120px] opacity-30')}>{item.name}</div>
|
||||
{!item.embedding_available && (
|
||||
<span className='ml-1 shrink-0 px-1 border border-divider-deep rounded-md text-text-tertiary text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
|
||||
<span className='ml-1 shrink-0 rounded-md border border-divider-deep px-1 text-xs font-normal leading-[18px] text-text-tertiary'>{t('dataset.unavailable')}</span>
|
||||
)}
|
||||
</div>
|
||||
{
|
||||
@ -160,7 +160,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
|
||||
</>
|
||||
)}
|
||||
{loaded && (
|
||||
<div className='flex justify-between items-center mt-8'>
|
||||
<div className='mt-8 flex items-center justify-between'>
|
||||
<div className='text-sm font-medium text-text-secondary'>
|
||||
{selected.length > 0 && `${selected.length} ${t('appDebug.feature.dataSet.selected')}`}
|
||||
</div>
|
||||
|
||||
@ -172,30 +172,30 @@ const SettingsModal: FC<SettingsModalProps> = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
className='overflow-hidden w-full flex flex-col bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xl'
|
||||
className='flex w-full flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'
|
||||
style={{
|
||||
height: 'calc(100vh - 72px)',
|
||||
}}
|
||||
ref={ref}
|
||||
>
|
||||
<div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-divider-regular'>
|
||||
<div className='flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pl-6 pr-5'>
|
||||
<div className='flex flex-col text-base font-semibold text-text-primary'>
|
||||
<div className='leading-6'>{t('datasetSettings.title')}</div>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<div
|
||||
onClick={onCancel}
|
||||
className='flex justify-center items-center w-6 h-6 cursor-pointer'
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center'
|
||||
>
|
||||
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Body */}
|
||||
<div className='p-6 pt-5 border-b border-divider-regular overflow-y-auto pb-[68px]'>
|
||||
<div className='overflow-y-auto border-b border-divider-regular p-6 pb-[68px] pt-5'>
|
||||
<div className={cn(rowClass, 'items-center')}>
|
||||
<div className={labelClass}>
|
||||
<div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.name')}</div>
|
||||
<div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.name')}</div>
|
||||
</div>
|
||||
<Input
|
||||
value={localeCurrentDataset.name}
|
||||
@ -206,7 +206,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
|
||||
</div>
|
||||
<div className={cn(rowClass)}>
|
||||
<div className={labelClass}>
|
||||
<div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.desc')}</div>
|
||||
<div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.desc')}</div>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<Textarea
|
||||
@ -215,15 +215,15 @@ const SettingsModal: FC<SettingsModalProps> = ({
|
||||
className='resize-none'
|
||||
placeholder={t('datasetSettings.form.descPlaceholder') || ''}
|
||||
/>
|
||||
<a className='mt-2 flex items-center h-[18px] px-3 text-xs text-text-tertiary' href="https://docs.dify.ai/features/datasets#how-to-write-a-good-dataset-description" target='_blank' rel='noopener noreferrer'>
|
||||
<BookOpenIcon className='w-3 h-[18px] mr-1' />
|
||||
<a className='mt-2 flex h-[18px] items-center px-3 text-xs text-text-tertiary' href="https://docs.dify.ai/features/datasets#how-to-write-a-good-dataset-description" target='_blank' rel='noopener noreferrer'>
|
||||
<BookOpenIcon className='mr-1 h-[18px] w-3' />
|
||||
{t('datasetSettings.form.descWrite')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className={rowClass}>
|
||||
<div className={labelClass}>
|
||||
<div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.permissions')}</div>
|
||||
<div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.permissions')}</div>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<PermissionSelector
|
||||
@ -239,7 +239,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
|
||||
{currentDataset && currentDataset.indexing_technique && (
|
||||
<div className={cn(rowClass)}>
|
||||
<div className={labelClass}>
|
||||
<div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.indexMethod')}</div>
|
||||
<div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.indexMethod')}</div>
|
||||
</div>
|
||||
<div className='grow'>
|
||||
<IndexMethodRadio
|
||||
@ -255,10 +255,10 @@ const SettingsModal: FC<SettingsModalProps> = ({
|
||||
{indexMethod === 'high_quality' && (
|
||||
<div className={cn(rowClass)}>
|
||||
<div className={labelClass}>
|
||||
<div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.embeddingModel')}</div>
|
||||
<div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.embeddingModel')}</div>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<div className='w-full h-8 rounded-lg bg-components-input-bg-normal opacity-60'>
|
||||
<div className='h-8 w-full rounded-lg bg-components-input-bg-normal opacity-60'>
|
||||
<ModelSelector
|
||||
readonly
|
||||
defaultModel={{
|
||||
@ -270,7 +270,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
|
||||
</div>
|
||||
<div className='mt-2 w-full text-xs leading-6 text-text-tertiary'>
|
||||
{t('datasetSettings.form.embeddingModelTip')}
|
||||
<span className='text-text-accent cursor-pointer' onClick={() => setShowAccountSettingModal({ payload: 'provider' })}>{t('datasetSettings.form.embeddingModelTipLink')}</span>
|
||||
<span className='cursor-pointer text-text-accent' onClick={() => setShowAccountSettingModal({ payload: 'provider' })}>{t('datasetSettings.form.embeddingModelTipLink')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -282,7 +282,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
|
||||
<div className={rowClass}><Divider /></div>
|
||||
<div className={rowClass}>
|
||||
<div className={labelClass}>
|
||||
<div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.retrievalSetting.title')}</div>
|
||||
<div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.retrievalSetting.title')}</div>
|
||||
</div>
|
||||
<RetrievalSettings
|
||||
topK={topK}
|
||||
@ -295,26 +295,26 @@ const SettingsModal: FC<SettingsModalProps> = ({
|
||||
<div className={rowClass}><Divider /></div>
|
||||
<div className={rowClass}>
|
||||
<div className={labelClass}>
|
||||
<div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.externalKnowledgeAPI')}</div>
|
||||
<div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.externalKnowledgeAPI')}</div>
|
||||
</div>
|
||||
<div className='w-full max-w-[480px]'>
|
||||
<div className='flex h-full px-3 py-2 items-center gap-1 rounded-lg bg-components-input-bg-normal'>
|
||||
<ApiConnectionMod className='w-4 h-4 text-text-secondary' />
|
||||
<div className='overflow-hidden text-text-secondary text-ellipsis system-sm-medium'>
|
||||
<div className='flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2'>
|
||||
<ApiConnectionMod className='h-4 w-4 text-text-secondary' />
|
||||
<div className='system-sm-medium overflow-hidden text-ellipsis text-text-secondary'>
|
||||
{currentDataset?.external_knowledge_info.external_knowledge_api_name}
|
||||
</div>
|
||||
<div className='text-text-tertiary system-xs-regular'>·</div>
|
||||
<div className='text-text-tertiary system-xs-regular'>{currentDataset?.external_knowledge_info.external_knowledge_api_endpoint}</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>·</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>{currentDataset?.external_knowledge_info.external_knowledge_api_endpoint}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={rowClass}>
|
||||
<div className={labelClass}>
|
||||
<div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.externalKnowledgeID')}</div>
|
||||
<div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.externalKnowledgeID')}</div>
|
||||
</div>
|
||||
<div className='w-full max-w-[480px]'>
|
||||
<div className='flex h-full px-3 py-2 items-center gap-1 rounded-lg bg-components-input-bg-normal'>
|
||||
<div className='text-text-tertiary system-xs-regular'>{currentDataset?.external_knowledge_info.external_knowledge_id}</div>
|
||||
<div className='flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2'>
|
||||
<div className='system-xs-regular text-text-tertiary'>{currentDataset?.external_knowledge_info.external_knowledge_id}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -323,8 +323,8 @@ const SettingsModal: FC<SettingsModalProps> = ({
|
||||
: <div className={rowClass}>
|
||||
<div className={cn(labelClass, 'w-auto min-w-[168px]')}>
|
||||
<div>
|
||||
<div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.retrievalSetting.title')}</div>
|
||||
<div className='leading-[18px] text-xs font-normal text-text-tertiary'>
|
||||
<div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.retrievalSetting.title')}</div>
|
||||
<div className='text-xs font-normal leading-[18px] text-text-tertiary'>
|
||||
<a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
|
||||
{t('datasetSettings.form.retrievalSetting.description')}
|
||||
</div>
|
||||
@ -348,23 +348,23 @@ const SettingsModal: FC<SettingsModalProps> = ({
|
||||
</div>}
|
||||
</div>
|
||||
{isRetrievalChanged && !isHideChangedTip && (
|
||||
<div className='absolute z-10 left-[30px] right-[30px] bottom-[76px] flex h-10 items-center px-3 rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] shadow-lg justify-between'>
|
||||
<div className='absolute bottom-[76px] left-[30px] right-[30px] z-10 flex h-10 items-center justify-between rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 shadow-lg'>
|
||||
<div className='flex items-center'>
|
||||
<AlertTriangle className='mr-1 w-3 h-3 text-[#F79009]' />
|
||||
<div className='leading-[18px] text-xs font-medium text-gray-700'>{t('appDebug.datasetConfig.retrieveChangeTip')}</div>
|
||||
<AlertTriangle className='mr-1 h-3 w-3 text-[#F79009]' />
|
||||
<div className='text-xs font-medium leading-[18px] text-gray-700'>{t('appDebug.datasetConfig.retrieveChangeTip')}</div>
|
||||
</div>
|
||||
<div className='p-1 cursor-pointer' onClick={(e) => {
|
||||
<div className='cursor-pointer p-1' onClick={(e) => {
|
||||
setIsHideChangedTip(true)
|
||||
e.stopPropagation()
|
||||
e.nativeEvent.stopImmediatePropagation()
|
||||
}}>
|
||||
<RiCloseLine className='w-4 h-4 text-gray-500' />
|
||||
<RiCloseLine className='h-4 w-4 text-gray-500' />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className='sticky z-[5] bottom-0 w-full flex justify-end py-4 px-6 border-t border-divider-regular bg-background-section'
|
||||
className='sticky bottom-0 z-[5] flex w-full justify-end border-t border-divider-regular bg-background-section px-6 py-4'
|
||||
>
|
||||
<Button
|
||||
onClick={onCancel}
|
||||
|
||||
@ -47,17 +47,17 @@ const ChatUserInput = ({
|
||||
return null
|
||||
|
||||
return (
|
||||
<div className={cn('bg-components-panel-on-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs z-[1]')}>
|
||||
<div className='px-4 pt-3 pb-4'>
|
||||
<div className={cn('z-[1] rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-xs')}>
|
||||
<div className='px-4 pb-4 pt-3'>
|
||||
{promptVariables.map(({ key, name, type, options, max_length, required }, index) => (
|
||||
<div
|
||||
key={key}
|
||||
className='mb-4 last-of-type:mb-0'
|
||||
>
|
||||
<div>
|
||||
<div className='h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold'>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center gap-1 text-text-secondary'>
|
||||
<div className='truncate'>{name || key}</div>
|
||||
{!required && <span className='text-text-tertiary system-xs-regular'>{t('workflow.panel.optional')}</span>}
|
||||
{!required && <span className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</span>}
|
||||
</div>
|
||||
<div className='grow'>
|
||||
{type === 'string' && (
|
||||
@ -71,7 +71,7 @@ const ChatUserInput = ({
|
||||
)}
|
||||
{type === 'paragraph' && (
|
||||
<Textarea
|
||||
className='grow h-[120px]'
|
||||
className='h-[120px] grow'
|
||||
placeholder={name}
|
||||
value={inputs[key] ? `${inputs[key]}` : ''}
|
||||
onChange={(e) => { handleInputValueChange(key, e.target.value) }}
|
||||
|
||||
@ -64,11 +64,11 @@ const DebugItem: FC<DebugItemProps> = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col min-w-[320px] rounded-xl bg-background-section-burn ${className}`}
|
||||
className={`flex min-w-[320px] flex-col rounded-xl bg-background-section-burn ${className}`}
|
||||
style={style}
|
||||
>
|
||||
<div className='shrink-0 flex items-center justify-between h-10 px-3 border-b-[0.5px] border-divider-regular'>
|
||||
<div className='flex items-center justify-center w-6 h-5 font-medium italic text-text-tertiary'>
|
||||
<div className='flex h-10 shrink-0 items-center justify-between border-b-[0.5px] border-divider-regular px-3'>
|
||||
<div className='flex h-5 w-6 items-center justify-center font-medium italic text-text-tertiary'>
|
||||
#{index + 1}
|
||||
</div>
|
||||
<ModelParameterTrigger
|
||||
|
||||
@ -102,10 +102,10 @@ const DebugWithMultipleModel = () => {
|
||||
const inputsForm = modelConfig.configs.prompt_variables.filter(item => item.type !== 'api').map(item => ({ ...item, label: item.name, variable: item.key })) as InputForm[]
|
||||
|
||||
return (
|
||||
<div className='flex flex-col h-full'>
|
||||
<div className='flex h-full flex-col'>
|
||||
<div
|
||||
className={`
|
||||
grow mb-3 relative px-6 overflow-auto
|
||||
relative mb-3 grow overflow-auto px-6
|
||||
`}
|
||||
style={{ height: isChatMode ? 'calc(100% - 60px)' : '100%' }}
|
||||
>
|
||||
@ -131,7 +131,7 @@ const DebugWithMultipleModel = () => {
|
||||
}
|
||||
</div>
|
||||
{isChatMode && (
|
||||
<div className='shrink-0 pb-0 px-6'>
|
||||
<div className='shrink-0 px-6 pb-0'>
|
||||
<ChatInputArea
|
||||
showFeatureBar
|
||||
showFileUpload={false}
|
||||
|
||||
@ -72,7 +72,7 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
|
||||
}) => (
|
||||
<div
|
||||
className={`
|
||||
flex items-center max-w-[200px] h-8 px-2 rounded-lg cursor-pointer
|
||||
flex h-8 max-w-[200px] cursor-pointer items-center rounded-lg px-2
|
||||
${open && 'bg-state-base-hover'}
|
||||
${currentModel && currentModel.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]'}
|
||||
`}
|
||||
@ -80,7 +80,7 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
|
||||
{
|
||||
currentProvider && (
|
||||
<ModelIcon
|
||||
className='mr-1 !w-4 !h-4'
|
||||
className='mr-1 !h-4 !w-4'
|
||||
provider={currentProvider}
|
||||
modelName={currentModel?.model}
|
||||
/>
|
||||
@ -88,8 +88,8 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
|
||||
}
|
||||
{
|
||||
!currentProvider && (
|
||||
<div className='flex items-center justify-center mr-1 w-4 h-4 rounded'>
|
||||
<CubeOutline className='w-4 h-4 text-text-accent' />
|
||||
<div className='mr-1 flex h-4 w-4 items-center justify-center rounded'>
|
||||
<CubeOutline className='h-4 w-4 text-text-accent' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -103,16 +103,16 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
|
||||
}
|
||||
{
|
||||
!currentModel && (
|
||||
<div className='mr-0.5 text-[13px] font-medium text-text-accent truncate'>
|
||||
<div className='mr-0.5 truncate text-[13px] font-medium text-text-accent'>
|
||||
{t('common.modelProvider.selectModel')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<RiArrowDownSLine className={`w-3 h-3 ${(currentModel && currentProvider) ? 'text-text-tertiary' : 'text-text-accent'}`} />
|
||||
<RiArrowDownSLine className={`h-3 w-3 ${(currentModel && currentProvider) ? 'text-text-tertiary' : 'text-text-accent'}`} />
|
||||
{
|
||||
currentModel && currentModel.status !== ModelStatusEnum.active && (
|
||||
<Tooltip popupContent={MODEL_STATUS_TEXT[currentModel.status][language]}>
|
||||
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
|
||||
<AlertTriangle className='h-4 w-4 text-[#F79009]' />
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
@ -126,7 +126,7 @@ const TextGenerationItem: FC<TextGenerationItemProps> = ({
|
||||
|
||||
return (
|
||||
<TextGeneration
|
||||
className='flex flex-col h-full overflow-y-auto border-none'
|
||||
className='flex h-full flex-col overflow-y-auto border-none'
|
||||
content={completion}
|
||||
isLoading={!completion && isResponding}
|
||||
isResponding={isResponding}
|
||||
|
||||
@ -1,10 +1,4 @@
|
||||
import {
|
||||
forwardRef,
|
||||
memo,
|
||||
useCallback,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
} from 'react'
|
||||
import { memo, useCallback, useImperativeHandle, useMemo } from 'react'
|
||||
import {
|
||||
useConfigFromDebugContext,
|
||||
useFormattingChangedSubscription,
|
||||
@ -34,9 +28,14 @@ type DebugWithSingleModelProps = {
|
||||
export type DebugWithSingleModelRefType = {
|
||||
handleRestart: () => void
|
||||
}
|
||||
const DebugWithSingleModel = forwardRef<DebugWithSingleModelRefType, DebugWithSingleModelProps>(({
|
||||
checkCanSend,
|
||||
}, ref) => {
|
||||
const DebugWithSingleModel = (
|
||||
{
|
||||
ref,
|
||||
checkCanSend,
|
||||
}: DebugWithSingleModelProps & {
|
||||
ref: React.RefObject<DebugWithSingleModelRefType>;
|
||||
},
|
||||
) => {
|
||||
const { userProfile } = useAppContext()
|
||||
const {
|
||||
modelConfig,
|
||||
@ -174,7 +173,7 @@ const DebugWithSingleModel = forwardRef<DebugWithSingleModelRefType, DebugWithSi
|
||||
noSpacing
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
DebugWithSingleModel.displayName = 'DebugWithSingleModel'
|
||||
|
||||
|
||||
@ -391,8 +391,8 @@ const Debug: FC<IDebug> = ({
|
||||
return (
|
||||
<>
|
||||
<div className="shrink-0">
|
||||
<div className='flex items-center justify-between px-4 pt-3 pb-2'>
|
||||
<div className='text-text-primary system-xl-semibold'>{t('appDebug.inputs.title')}</div>
|
||||
<div className='flex items-center justify-between px-4 pb-2 pt-3'>
|
||||
<div className='system-xl-semibold text-text-primary'>{t('appDebug.inputs.title')}</div>
|
||||
<div className='flex items-center'>
|
||||
{
|
||||
debugWithMultipleModel
|
||||
@ -403,10 +403,10 @@ const Debug: FC<IDebug> = ({
|
||||
onClick={() => onMultipleModelConfigsChange(true, [...multipleModelConfigs, { id: `${Date.now()}`, model: '', provider: '', parameters: {} }])}
|
||||
disabled={multipleModelConfigs.length >= 4}
|
||||
>
|
||||
<RiAddLine className='mr-1 w-3.5 h-3.5' />
|
||||
<RiAddLine className='mr-1 h-3.5 w-3.5' />
|
||||
{t('common.modelProvider.addModel')}({multipleModelConfigs.length}/4)
|
||||
</Button>
|
||||
<div className='mx-2 w-[1px] h-[14px] bg-divider-regular' />
|
||||
<div className='mx-2 h-[14px] w-[1px] bg-divider-regular' />
|
||||
</>
|
||||
)
|
||||
: null
|
||||
@ -417,7 +417,7 @@ const Debug: FC<IDebug> = ({
|
||||
popupContent={t('common.operation.refresh')}
|
||||
>
|
||||
<ActionButton onClick={clearConversation}>
|
||||
<RefreshCcw01 className='w-4 h-4' />
|
||||
<RefreshCcw01 className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
</TooltipPlus>
|
||||
{varList.length > 0 && (
|
||||
@ -426,10 +426,10 @@ const Debug: FC<IDebug> = ({
|
||||
popupContent={t('workflow.panel.userInputField')}
|
||||
>
|
||||
<ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => setExpanded(!expanded)}>
|
||||
<RiEqualizer2Line className='w-4 h-4' />
|
||||
<RiEqualizer2Line className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
</TooltipPlus>
|
||||
{expanded && <div className='absolute z-10 bottom-[-14px] right-[5px] w-3 h-3 bg-components-panel-on-panel-item-bg border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle rotate-45' />}
|
||||
{expanded && <div className='absolute bottom-[-14px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg' />}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
@ -457,7 +457,7 @@ const Debug: FC<IDebug> = ({
|
||||
</div>
|
||||
{
|
||||
debugWithMultipleModel && (
|
||||
<div className='grow mt-3 overflow-hidden' ref={ref}>
|
||||
<div className='mt-3 grow overflow-hidden' ref={ref}>
|
||||
<DebugWithMultipleModel
|
||||
multipleModelConfigs={multipleModelConfigs}
|
||||
onMultipleModelConfigsChange={onMultipleModelConfigsChange}
|
||||
@ -489,10 +489,10 @@ const Debug: FC<IDebug> = ({
|
||||
}
|
||||
{
|
||||
!debugWithMultipleModel && (
|
||||
<div className="flex flex-col grow" ref={ref}>
|
||||
<div className="flex grow flex-col" ref={ref}>
|
||||
{/* Chat */}
|
||||
{mode !== AppType.completion && (
|
||||
<div className='grow h-0 overflow-hidden'>
|
||||
<div className='h-0 grow overflow-hidden'>
|
||||
<DebugWithSingleModel
|
||||
ref={debugWithSingleModelRef}
|
||||
checkCanSend={checkCanSend}
|
||||
@ -522,9 +522,9 @@ const Debug: FC<IDebug> = ({
|
||||
</>
|
||||
)}
|
||||
{!completionRes && !isResponding && (
|
||||
<div className='grow flex flex-col items-center justify-center gap-2'>
|
||||
<RiSparklingFill className='w-12 h-12 text-text-empty-state-icon' />
|
||||
<div className='text-text-quaternary system-sm-regular'>{t('appDebug.noResult')}</div>
|
||||
<div className='flex grow flex-col items-center justify-center gap-2'>
|
||||
<RiSparklingFill className='h-12 w-12 text-text-empty-state-icon' />
|
||||
<div className='system-sm-regular text-text-quaternary'>{t('appDebug.noResult')}</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -34,13 +34,13 @@ const MoreLikeThis: FC = () => {
|
||||
noBodySpacing
|
||||
>
|
||||
{!isHideTip && (
|
||||
<div className='flex justify-between items-center h-9 px-3 rounded-b-xl bg-[#FFFAEB] text-xs text-gray-700'>
|
||||
<div className='flex h-9 items-center justify-between rounded-b-xl bg-[#FFFAEB] px-3 text-xs text-gray-700'>
|
||||
<div className='flex items-center space-x-2'>
|
||||
<div>{warningIcon}</div>
|
||||
<div>{t('appDebug.feature.moreLikeThis.tip')}</div>
|
||||
</div>
|
||||
<div className='flex items-center justify-center w-4 h-4 cursor-pointer' onClick={() => setIsHideTip(true)}>
|
||||
<XMarkIcon className="w-3 h-3" />
|
||||
<div className='flex h-4 w-4 cursor-pointer items-center justify-center' onClick={() => setIsHideTip(true)}>
|
||||
<XMarkIcon className="h-3 w-3" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -820,7 +820,7 @@ const Configuration: FC = () => {
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <div className='flex items-center justify-center h-full'>
|
||||
return <div className='flex h-full items-center justify-center'>
|
||||
<Loading type='area' />
|
||||
</div>
|
||||
}
|
||||
@ -903,16 +903,16 @@ const Configuration: FC = () => {
|
||||
>
|
||||
<FeaturesProvider features={featuresData}>
|
||||
<>
|
||||
<div className="flex flex-col h-full">
|
||||
<div className='relative flex grow h-[200px] pt-14'>
|
||||
<div className="flex h-full flex-col">
|
||||
<div className='relative flex h-[200px] grow pt-14'>
|
||||
{/* Header */}
|
||||
<div className='absolute top-0 left-0 w-full bg-default-subtle h-14'>
|
||||
<div className='flex items-center justify-between px-6 h-14'>
|
||||
<div className='bg-default-subtle absolute left-0 top-0 h-14 w-full'>
|
||||
<div className='flex h-14 items-center justify-between px-6'>
|
||||
<div className='flex items-center'>
|
||||
<div className='system-xl-semibold text-text-primary'>{t('appDebug.orchestrate')}</div>
|
||||
<div className='flex items-center h-[14px] space-x-1 text-xs'>
|
||||
<div className='flex h-[14px] items-center space-x-1 text-xs'>
|
||||
{isAdvancedMode && (
|
||||
<div className='ml-1 flex items-center h-5 px-1.5 border border-components-button-secondary-border rounded-md system-xs-medium-uppercase text-text-tertiary uppercase'>{t('appDebug.promptMode.advanced')}</div>
|
||||
<div className='system-xs-medium-uppercase ml-1 flex h-5 items-center rounded-md border border-components-button-secondary-border px-1.5 uppercase text-text-tertiary'>{t('appDebug.promptMode.advanced')}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -954,7 +954,7 @@ const Configuration: FC = () => {
|
||||
{isMobile && (
|
||||
<Button className='mr-2 !h-8 !text-[13px] font-medium' onClick={showDebugPanel}>
|
||||
<span className='mr-1'>{t('appDebug.operation.debugConfig')}</span>
|
||||
<CodeBracketIcon className="w-4 h-4 text-text-tertiary" />
|
||||
<CodeBracketIcon className="h-4 w-4 text-text-tertiary" />
|
||||
</Button>
|
||||
)}
|
||||
<AppPublisher {...{
|
||||
@ -969,11 +969,11 @@ const Configuration: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`w-full sm:w-1/2 shrink-0 flex flex-col h-full ${debugWithMultipleModel && 'max-w-[560px]'}`}>
|
||||
<div className={`flex h-full w-full shrink-0 flex-col sm:w-1/2 ${debugWithMultipleModel && 'max-w-[560px]'}`}>
|
||||
<Config />
|
||||
</div>
|
||||
{!isMobile && <div className="relative flex flex-col w-1/2 h-full overflow-y-auto grow " style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
|
||||
<div className='grow flex flex-col border-t-[0.5px] border-l-[0.5px] rounded-tl-2xl border-components-panel-border bg-chatbot-bg '>
|
||||
{!isMobile && <div className="relative flex h-full w-1/2 grow flex-col overflow-y-auto " style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
|
||||
<div className='flex grow flex-col rounded-tl-2xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-chatbot-bg '>
|
||||
<Debug
|
||||
isAPIKeySet={isAPIKeySet}
|
||||
onSetting={() => setShowAccountSettingModal({ payload: 'provider' })}
|
||||
|
||||
@ -18,9 +18,9 @@ const AdvancedModeWarning: FC<Props> = ({
|
||||
if (!show)
|
||||
return null
|
||||
return (
|
||||
<div className='mb-3 py-3 px-4 border border-[#FEF0C7] rounded-xl bg-[#FFFAEB]' >
|
||||
<div className='mb-2 text-xs leading-[18px] font-bold text-[#DC6803]'>{t('appDebug.promptMode.advancedWarning.title')}</div>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div className='mb-3 rounded-xl border border-[#FEF0C7] bg-[#FFFAEB] px-4 py-3' >
|
||||
<div className='mb-2 text-xs font-bold leading-[18px] text-[#DC6803]'>{t('appDebug.promptMode.advancedWarning.title')}</div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='text-xs leading-[18px] '>
|
||||
<span className='text-gray-700'>{t('appDebug.promptMode.advancedWarning.description')}</span>
|
||||
<a
|
||||
@ -35,12 +35,12 @@ const AdvancedModeWarning: FC<Props> = ({
|
||||
<div className='flex items-center space-x-1'>
|
||||
<div
|
||||
onClick={onReturnToSimpleMode}
|
||||
className='shrink-0 flex items-center h-6 px-2 bg-indigo-600 shadow-xs border border-gray-200 rounded-lg text-white text-xs font-semibold cursor-pointer space-x-1'
|
||||
className='flex h-6 shrink-0 cursor-pointer items-center space-x-1 rounded-lg border border-gray-200 bg-indigo-600 px-2 text-xs font-semibold text-white shadow-xs'
|
||||
>
|
||||
<div className='text-xs font-semibold uppercase'>{t('appDebug.promptMode.switchBack')}</div>
|
||||
</div>
|
||||
<div
|
||||
className='flex items-center h-6 px-2 rounded-md bg-[#fff] border border-gray-200 shadow-xs text-xs font-medium text-primary-600 cursor-pointer'
|
||||
className='flex h-6 cursor-pointer items-center rounded-md border border-gray-200 bg-[#fff] px-2 text-xs font-medium text-primary-600 shadow-xs'
|
||||
onClick={() => setShow(false)}
|
||||
>{t('appDebug.promptMode.advancedWarning.ok')}</div>
|
||||
</div>
|
||||
|
||||
@ -90,28 +90,28 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='relative z-[1] mx-3 border-[0.5px] bg-components-panel-on-panel-item-bg border-components-panel-border-subtle rounded-xl shadow-md'>
|
||||
<div className='relative z-[1] mx-3 rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-md'>
|
||||
<div className={cn('px-4 pt-3', userInputFieldCollapse ? 'pb-3' : 'pb-1')}>
|
||||
<div className='flex items-center gap-0.5 py-0.5 cursor-pointer' onClick={() => setUserInputFieldCollapse(!userInputFieldCollapse)}>
|
||||
<div className='text-text-secondary system-md-semibold-uppercase'>{t('appDebug.inputs.userInputField')}</div>
|
||||
{userInputFieldCollapse && <RiArrowRightSLine className='w-4 h-4 text-text-secondary'/>}
|
||||
{!userInputFieldCollapse && <RiArrowDownSLine className='w-4 h-4 text-text-secondary'/>}
|
||||
<div className='flex cursor-pointer items-center gap-0.5 py-0.5' onClick={() => setUserInputFieldCollapse(!userInputFieldCollapse)}>
|
||||
<div className='system-md-semibold-uppercase text-text-secondary'>{t('appDebug.inputs.userInputField')}</div>
|
||||
{userInputFieldCollapse && <RiArrowRightSLine className='h-4 w-4 text-text-secondary'/>}
|
||||
{!userInputFieldCollapse && <RiArrowDownSLine className='h-4 w-4 text-text-secondary'/>}
|
||||
</div>
|
||||
{!userInputFieldCollapse && (
|
||||
<div className='mt-1 text-text-tertiary system-xs-regular'>{t('appDebug.inputs.completionVarTip')}</div>
|
||||
<div className='system-xs-regular mt-1 text-text-tertiary'>{t('appDebug.inputs.completionVarTip')}</div>
|
||||
)}
|
||||
</div>
|
||||
{!userInputFieldCollapse && promptVariables.length > 0 && (
|
||||
<div className='px-4 pt-3 pb-4'>
|
||||
<div className='px-4 pb-4 pt-3'>
|
||||
{promptVariables.map(({ key, name, type, options, max_length, required }, index) => (
|
||||
<div
|
||||
key={key}
|
||||
className='mb-4 last-of-type:mb-0'
|
||||
>
|
||||
<div>
|
||||
<div className='h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold'>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center gap-1 text-text-secondary'>
|
||||
<div className='truncate'>{name || key}</div>
|
||||
{!required && <span className='text-text-tertiary system-xs-regular'>{t('workflow.panel.optional')}</span>}
|
||||
{!required && <span className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</span>}
|
||||
</div>
|
||||
<div className='grow'>
|
||||
{type === 'string' && (
|
||||
@ -125,7 +125,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
|
||||
)}
|
||||
{type === 'paragraph' && (
|
||||
<Textarea
|
||||
className='grow h-[120px]'
|
||||
className='h-[120px] grow'
|
||||
placeholder={name}
|
||||
value={inputs[key] ? `${inputs[key]}` : ''}
|
||||
onChange={(e) => { handleInputValueChange(key, e.target.value) }}
|
||||
@ -156,8 +156,8 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
|
||||
</div>
|
||||
))}
|
||||
{visionConfig?.enabled && (
|
||||
<div className="mt-3 xl:flex justify-between">
|
||||
<div className="mr-1 py-2 shrink-0 w-[120px] text-sm text-text-primary">{t('common.imageUploader.imageUpload')}</div>
|
||||
<div className="mt-3 justify-between xl:flex">
|
||||
<div className="mr-1 w-[120px] shrink-0 py-2 text-sm text-text-primary">{t('common.imageUploader.imageUpload')}</div>
|
||||
<div className='grow'>
|
||||
<TextGenerationImageUploader
|
||||
settings={visionConfig}
|
||||
@ -174,7 +174,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
|
||||
</div>
|
||||
)}
|
||||
{!userInputFieldCollapse && (
|
||||
<div className='flex justify-between p-4 pt-3 border-t border-divider-subtle'>
|
||||
<div className='flex justify-between border-t border-divider-subtle p-4 pt-3'>
|
||||
<Button className='w-[72px]' onClick={onClear}>{t('common.operation.clear')}</Button>
|
||||
{canNotRun && (
|
||||
<Tooltip popupContent={t('appDebug.otherError.promptNoBeEmpty')} needsDelay>
|
||||
@ -183,7 +183,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
|
||||
disabled={canNotRun}
|
||||
onClick={() => onSend && onSend()}
|
||||
className="w-[96px]">
|
||||
<RiPlayLargeFill className="shrink-0 w-4 h-4 mr-0.5" aria-hidden="true" />
|
||||
<RiPlayLargeFill className="mr-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
|
||||
{t('appDebug.inputs.run')}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
@ -194,7 +194,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
|
||||
disabled={canNotRun}
|
||||
onClick={() => onSend && onSend()}
|
||||
className="w-[96px]">
|
||||
<RiPlayLargeFill className="shrink-0 w-4 h-4 mr-0.5" aria-hidden="true" />
|
||||
<RiPlayLargeFill className="mr-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
|
||||
{t('appDebug.inputs.run')}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@ -21,13 +21,13 @@ import { useToastContext } from '@/app/components/base/toast'
|
||||
import AppIcon from '@/app/components/base/app-icon'
|
||||
|
||||
const systemTypes = ['api']
|
||||
interface ExternalDataToolModalProps {
|
||||
type ExternalDataToolModalProps = {
|
||||
data: ExternalDataTool
|
||||
onCancel: () => void
|
||||
onSave: (externalDataTool: ExternalDataTool) => void
|
||||
onValidateBeforeSave?: (externalDataTool: ExternalDataTool) => boolean
|
||||
}
|
||||
interface Provider {
|
||||
type Provider = {
|
||||
key: string
|
||||
name: string
|
||||
form_schema?: CodeBasedExtensionItem['form_schema']
|
||||
@ -186,13 +186,13 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
|
||||
<Modal
|
||||
isShow
|
||||
onClose={() => { }}
|
||||
className='!p-8 !pb-6 !max-w-none !w-[640px]'
|
||||
className='!w-[640px] !max-w-none !p-8 !pb-6'
|
||||
>
|
||||
<div className='mb-2 text-xl font-semibold text-gray-900'>
|
||||
{`${action} ${t('appDebug.variableConfig.apiBasedVar')}`}
|
||||
</div>
|
||||
<div className='py-2'>
|
||||
<div className='leading-9 text-sm font-medium text-gray-900'>
|
||||
<div className='text-sm font-medium leading-9 text-gray-900'>
|
||||
{t('common.apiBasedExtension.type')}
|
||||
</div>
|
||||
<SimpleSelect
|
||||
@ -207,46 +207,46 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
|
||||
/>
|
||||
</div>
|
||||
<div className='py-2'>
|
||||
<div className='leading-9 text-sm font-medium text-gray-900'>
|
||||
<div className='text-sm font-medium leading-9 text-gray-900'>
|
||||
{t('appDebug.feature.tools.modal.name.title')}
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<input
|
||||
value={localeData.label || ''}
|
||||
onChange={e => handleValueChange({ label: e.target.value })}
|
||||
className='grow block mr-2 px-3 h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
|
||||
className='mr-2 block h-9 grow appearance-none rounded-lg bg-gray-100 px-3 text-sm text-gray-900 outline-none'
|
||||
placeholder={t('appDebug.feature.tools.modal.name.placeholder') || ''}
|
||||
/>
|
||||
<AppIcon size='large'
|
||||
onClick={() => { setShowEmojiPicker(true) }}
|
||||
className='!w-9 !h-9 rounded-lg border-[0.5px] border-black/5 cursor-pointer '
|
||||
className='!h-9 !w-9 cursor-pointer rounded-lg border-[0.5px] border-black/5 '
|
||||
icon={localeData.icon}
|
||||
background={localeData.icon_background}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='py-2'>
|
||||
<div className='leading-9 text-sm font-medium text-gray-900'>
|
||||
<div className='text-sm font-medium leading-9 text-gray-900'>
|
||||
{t('appDebug.feature.tools.modal.variableName.title')}
|
||||
</div>
|
||||
<input
|
||||
value={localeData.variable || ''}
|
||||
onChange={e => handleValueChange({ variable: e.target.value })}
|
||||
className='block px-3 w-full h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
|
||||
className='block h-9 w-full appearance-none rounded-lg bg-gray-100 px-3 text-sm text-gray-900 outline-none'
|
||||
placeholder={t('appDebug.feature.tools.modal.variableName.placeholder') || ''}
|
||||
/>
|
||||
</div>
|
||||
{
|
||||
localeData.type === 'api' && (
|
||||
<div className='py-2'>
|
||||
<div className='flex justify-between items-center h-9 text-sm font-medium text-gray-900'>
|
||||
<div className='flex h-9 items-center justify-between text-sm font-medium text-gray-900'>
|
||||
{t('common.apiBasedExtension.selector.title')}
|
||||
<a
|
||||
href={t('common.apiBasedExtension.linkUrl') || '/'}
|
||||
target='_blank' rel='noopener noreferrer'
|
||||
className='group flex items-center text-xs font-normal text-gray-500 hover:text-primary-600'
|
||||
>
|
||||
<BookOpen01 className='mr-1 w-3 h-3 text-gray-500 group-hover:text-primary-600' />
|
||||
<BookOpen01 className='mr-1 h-3 w-3 text-gray-500 group-hover:text-primary-600' />
|
||||
{t('common.apiBasedExtension.link')}
|
||||
</a>
|
||||
</div>
|
||||
@ -268,7 +268,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
|
||||
/>
|
||||
)
|
||||
}
|
||||
<div className='flex items-center justify-end mt-6'>
|
||||
<div className='mt-6 flex items-center justify-end'>
|
||||
<Button
|
||||
onClick={onCancel}
|
||||
className='mr-2'
|
||||
|
||||
@ -82,24 +82,24 @@ const Tools = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='mt-3 px-3 rounded-xl bg-gray-50'>
|
||||
<div className='flex items-center h-12'>
|
||||
<div className='grow flex items-center'>
|
||||
<div className='mt-3 rounded-xl bg-gray-50 px-3'>
|
||||
<div className='flex h-12 items-center'>
|
||||
<div className='flex grow items-center'>
|
||||
<div
|
||||
className={`
|
||||
group flex items-center justify-center mr-1 w-6 h-6 rounded-md
|
||||
${externalDataToolsConfig.length && 'hover:shadow-xs hover:bg-white'}
|
||||
group mr-1 flex h-6 w-6 items-center justify-center rounded-md
|
||||
${externalDataToolsConfig.length && 'hover:bg-white hover:shadow-xs'}
|
||||
`}
|
||||
onClick={() => setExpanded(v => !v)}
|
||||
>
|
||||
{
|
||||
externalDataToolsConfig.length
|
||||
? <Tool03 className='group-hover:hidden w-4 h-4 text-[#444CE7]' />
|
||||
: <Tool03 className='w-4 h-4 text-[#444CE7]' />
|
||||
? <Tool03 className='h-4 w-4 text-[#444CE7] group-hover:hidden' />
|
||||
: <Tool03 className='h-4 w-4 text-[#444CE7]' />
|
||||
}
|
||||
{
|
||||
!!externalDataToolsConfig.length && (
|
||||
<RiArrowDownSLine className={`hidden group-hover:block w-4 h-4 text-primary-600 cursor-pointer ${expanded ? 'rotate-180' : 'rotate-0'}`} />
|
||||
<RiArrowDownSLine className={`hidden h-4 w-4 cursor-pointer text-primary-600 group-hover:block ${expanded ? 'rotate-180' : 'rotate-0'}`} />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
@ -118,15 +118,15 @@ const Tools = () => {
|
||||
!expanded && !!externalDataToolsConfig.length && (
|
||||
<>
|
||||
<div className='mr-3 text-xs text-gray-500'>{t('appDebug.feature.tools.toolsInUse', { count: externalDataToolsConfig.length })}</div>
|
||||
<div className='mr-1 w-[1px] h-3.5 bg-gray-200' />
|
||||
<div className='mr-1 h-3.5 w-[1px] bg-gray-200' />
|
||||
</>
|
||||
)
|
||||
}
|
||||
<div
|
||||
className='flex items-center h-7 px-3 text-xs font-medium text-gray-700 cursor-pointer'
|
||||
className='flex h-7 cursor-pointer items-center px-3 text-xs font-medium text-gray-700'
|
||||
onClick={() => handleOpenExternalDataToolModal({}, -1)}
|
||||
>
|
||||
<RiAddLine className='mr-[5px] w-3.5 h-3.5 ' />
|
||||
<RiAddLine className='mr-[5px] h-3.5 w-3.5 ' />
|
||||
{t('common.operation.add')}
|
||||
</div>
|
||||
</div>
|
||||
@ -137,11 +137,11 @@ const Tools = () => {
|
||||
externalDataToolsConfig.map((item, index: number) => (
|
||||
<div
|
||||
key={`${index}-${item.type}-${item.label}-${item.variable}`}
|
||||
className='group flex items-center mb-1 last-of-type:mb-0 px-2.5 py-2 rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xs'
|
||||
className='group mb-1 flex items-center rounded-lg border-[0.5px] border-gray-200 bg-white px-2.5 py-2 shadow-xs last-of-type:mb-0'
|
||||
>
|
||||
<div className='grow flex items-center'>
|
||||
<div className='flex grow items-center'>
|
||||
<AppIcon size='large'
|
||||
className='mr-2 !w-6 !h-6 rounded-md border-[0.5px] border-black/5'
|
||||
className='mr-2 !h-6 !w-6 rounded-md border-[0.5px] border-black/5'
|
||||
icon={item.icon}
|
||||
background={item.icon_background}
|
||||
/>
|
||||
@ -161,18 +161,18 @@ const Tools = () => {
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
className='hidden group-hover:flex items-center justify-center mr-1 w-6 h-6 hover:bg-black/5 rounded-md cursor-pointer'
|
||||
className='mr-1 hidden h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5 group-hover:flex'
|
||||
onClick={() => handleOpenExternalDataToolModal(item, index)}
|
||||
>
|
||||
<Settings01 className='w-4 h-4 text-gray-500' />
|
||||
<Settings01 className='h-4 w-4 text-gray-500' />
|
||||
</div>
|
||||
<div
|
||||
className='hidden group/action group-hover:flex items-center justify-center w-6 h-6 hover:bg-[#FEE4E2] rounded-md cursor-pointer'
|
||||
className='group/action hidden h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-[#FEE4E2] group-hover:flex'
|
||||
onClick={() => setExternalDataToolsConfig([...externalDataToolsConfig.slice(0, index), ...externalDataToolsConfig.slice(index + 1)])}
|
||||
>
|
||||
<RiDeleteBinLine className='w-4 h-4 text-gray-500 group-hover/action:text-[#D92D20]' />
|
||||
<RiDeleteBinLine className='h-4 w-4 text-gray-500 group-hover/action:text-[#D92D20]' />
|
||||
</div>
|
||||
<div className='hidden group-hover:block ml-2 mr-3 w-[1px] h-3.5 bg-gray-200' />
|
||||
<div className='ml-2 mr-3 hidden h-3.5 w-[1px] bg-gray-200 group-hover:block' />
|
||||
<Switch
|
||||
size='l'
|
||||
defaultValue={item.enabled}
|
||||
|
||||
@ -20,8 +20,8 @@ const AppCard = ({
|
||||
const { t } = useTranslation()
|
||||
const { app: appBasicInfo } = app
|
||||
return (
|
||||
<div className={cn('p-4 h-[132px] relative overflow-hidden flex flex-col group bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xs hover:shadow-lg cursor-pointer')}>
|
||||
<div className='flex items-center gap-3 pb-2 grow-0 shrink-0'>
|
||||
<div className={cn('group relative flex h-[132px] cursor-pointer flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 shadow-xs hover:shadow-lg')}>
|
||||
<div className='flex shrink-0 grow-0 items-center gap-3 pb-2'>
|
||||
<div className='relative shrink-0'>
|
||||
<AppIcon
|
||||
size='large'
|
||||
@ -31,24 +31,24 @@ const AppCard = ({
|
||||
imageUrl={appBasicInfo.icon_url}
|
||||
/>
|
||||
<AppTypeIcon wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[4px] border border-divider-regular outline outline-components-panel-on-panel-item-bg'
|
||||
className='w-3 h-3' type={appBasicInfo.mode} />
|
||||
className='h-3 w-3' type={appBasicInfo.mode} />
|
||||
</div>
|
||||
<div className='grow flex flex-col gap-1'>
|
||||
<div className='flex grow flex-col gap-1'>
|
||||
<div className='line-clamp-1'>
|
||||
<span className='system-md-semibold text-text-secondary' title={appBasicInfo.name}>{appBasicInfo.name}</span>
|
||||
</div>
|
||||
<AppTypeLabel className='system-2xs-medium-uppercase text-text-tertiary' type={app.app.mode} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-1 system-xs-regular text-text-tertiary">
|
||||
<div className="system-xs-regular py-1 text-text-tertiary">
|
||||
<div className='line-clamp-3'>
|
||||
{app.description}
|
||||
</div>
|
||||
</div>
|
||||
<div className={cn('hidden absolute bottom-0 left-0 right-0 p-4 pt-8 group-hover:flex bg-gradient-to-t from-[60.27%] from-components-panel-gradient-2 to-transparent')}>
|
||||
<div className={cn('flex items-center w-full space-x-2 h-8')}>
|
||||
<div className={cn('absolute bottom-0 left-0 right-0 hidden bg-gradient-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
|
||||
<div className={cn('flex h-8 w-full items-center space-x-2')}>
|
||||
<Button variant='primary' className='grow' onClick={() => onCreate()}>
|
||||
<PlusIcon className='w-4 h-4 mr-1' />
|
||||
<PlusIcon className='mr-1 h-4 w-4' />
|
||||
<span className='text-xs'>{t('app.newApp.useTemplate')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -167,12 +167,12 @@ const Apps = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='h-full flex flex-col'>
|
||||
<div className='flex justify-between items-center py-3 border-b border-divider-burn'>
|
||||
<div className='flex h-full flex-col'>
|
||||
<div className='flex items-center justify-between border-b border-divider-burn py-3'>
|
||||
<div className='min-w-[180px] pl-5'>
|
||||
<span className='title-xl-semi-bold text-text-primary'>{t('app.newApp.startFromTemplate')}</span>
|
||||
</div>
|
||||
<div className='flex-1 max-w-[548px] p-1.5 flex items-center rounded-xl shadow-md bg-components-panel-bg-blur border border-components-panel-border'>
|
||||
<div className='flex max-w-[548px] flex-1 items-center rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-1.5 shadow-md'>
|
||||
<AppTypeSelector value={currentType} onChange={setCurrentType} />
|
||||
<div className='h-[14px]'>
|
||||
<Divider type='vertical' />
|
||||
@ -180,29 +180,29 @@ const Apps = ({
|
||||
<Input
|
||||
showClearIcon
|
||||
wrapperClassName='w-full flex-1'
|
||||
className='bg-transparent hover:bg-transparent focus:bg-transparent hover:border-transparent focus:border-transparent focus:shadow-none'
|
||||
className='bg-transparent hover:border-transparent hover:bg-transparent focus:border-transparent focus:bg-transparent focus:shadow-none'
|
||||
placeholder={t('app.newAppFromTemplate.searchAllTemplate') as string}
|
||||
value={keywords}
|
||||
onChange={e => handleKeywordsChange(e.target.value)}
|
||||
onClear={() => handleKeywordsChange('')}
|
||||
/>
|
||||
</div>
|
||||
<div className='w-[180px] h-8'></div>
|
||||
<div className='h-8 w-[180px]'></div>
|
||||
</div>
|
||||
<div className='relative flex flex-1 overflow-y-auto'>
|
||||
{!searchKeywords && <div className='w-[200px] h-full p-4'>
|
||||
{!searchKeywords && <div className='h-full w-[200px] p-4'>
|
||||
<Sidebar current={currCategory as AppCategories} onClick={(category) => { setCurrCategory(category) }} onCreateFromBlank={onCreateFromBlank} />
|
||||
</div>}
|
||||
<div className='flex-1 h-full overflow-auto shrink-0 grow p-6 pt-2 border-l border-divider-burn'>
|
||||
<div className='h-full flex-1 shrink-0 grow overflow-auto border-l border-divider-burn p-6 pt-2'>
|
||||
{searchFilteredList && searchFilteredList.length > 0 && <>
|
||||
<div className='pt-4 pb-1'>
|
||||
<div className='pb-1 pt-4'>
|
||||
{searchKeywords
|
||||
? <p className='title-md-semi-bold text-text-tertiary'>{searchFilteredList.length > 1 ? t('app.newApp.foundResults', { count: searchFilteredList.length }) : t('app.newApp.foundResult', { count: searchFilteredList.length })}</p>
|
||||
: <AppCategoryLabel category={currCategory as AppCategories} className='title-md-semi-bold text-text-primary' />}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
'grid content-start shrink-0 gap-3 grid-cols-1 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6',
|
||||
'grid shrink-0 grid-cols-1 content-start gap-3 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6',
|
||||
)}>
|
||||
{searchFilteredList.map(app => (
|
||||
<AppCard
|
||||
@ -241,9 +241,9 @@ export default React.memo(Apps)
|
||||
|
||||
function NoTemplateFound() {
|
||||
const { t } = useTranslation()
|
||||
return <div className='p-4 rounded-lg w-full bg-workflow-process-bg'>
|
||||
<div className='w-8 h-8 rounded-lg inline-flex items-center justify-center mb-2 shadow-lg bg-components-card-bg'>
|
||||
<RiRobot2Line className='w-5 h-5 text-text-tertiary' />
|
||||
return <div className='w-full rounded-lg bg-workflow-process-bg p-4'>
|
||||
<div className='mb-2 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-components-card-bg shadow-lg'>
|
||||
<RiRobot2Line className='h-5 w-5 text-text-tertiary' />
|
||||
</div>
|
||||
<p className='title-md-semi-bold text-text-primary'>{t('app.newApp.noTemplateFound')}</p>
|
||||
<p className='system-sm-regular text-text-tertiary'>{t('app.newApp.noTemplateFoundTip')}</p>
|
||||
|
||||
@ -22,12 +22,12 @@ type SidebarProps = {
|
||||
|
||||
export default function Sidebar({ current, onClick, onCreateFromBlank }: SidebarProps) {
|
||||
const { t } = useTranslation()
|
||||
return <div className="w-full h-full flex flex-col">
|
||||
return <div className="flex h-full w-full flex-col">
|
||||
<ul>
|
||||
<CategoryItem category={AppCategories.RECOMMENDED} active={current === AppCategories.RECOMMENDED} onClick={onClick} />
|
||||
</ul>
|
||||
<div className='px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary'>{t('app.newAppFromTemplate.byCategories')}</div>
|
||||
<ul className='flex-grow flex flex-col gap-0.5'>
|
||||
<div className='system-xs-medium-uppercase px-3 pb-1 pt-2 text-text-tertiary'>{t('app.newAppFromTemplate.byCategories')}</div>
|
||||
<ul className='flex grow flex-col gap-0.5'>
|
||||
<CategoryItem category={AppCategories.ASSISTANT} active={current === AppCategories.ASSISTANT} onClick={onClick} />
|
||||
<CategoryItem category={AppCategories.AGENT} active={current === AppCategories.AGENT} onClick={onClick} />
|
||||
<CategoryItem category={AppCategories.HR} active={current === AppCategories.HR} onClick={onClick} />
|
||||
@ -36,8 +36,8 @@ export default function Sidebar({ current, onClick, onCreateFromBlank }: Sidebar
|
||||
<CategoryItem category={AppCategories.WRITING} active={current === AppCategories.WRITING} onClick={onClick} />
|
||||
</ul>
|
||||
<Divider bgStyle='gradient' />
|
||||
<div className='px-3 py-1 flex items-center gap-1 text-text-tertiary cursor-pointer' onClick={onCreateFromBlank}>
|
||||
<RiStickyNoteAddLine className='w-3.5 h-3.5' />
|
||||
<div className='flex cursor-pointer items-center gap-1 px-3 py-1 text-text-tertiary' onClick={onCreateFromBlank}>
|
||||
<RiStickyNoteAddLine className='h-3.5 w-3.5' />
|
||||
<span className='system-xs-regular'>{t('app.newApp.startFromBlank')}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -52,7 +52,7 @@ function CategoryItem({ category, active, onClick }: CategoryItemProps) {
|
||||
return <li
|
||||
className={classNames('p-1 pl-3 rounded-lg flex items-center gap-2 group cursor-pointer hover:bg-state-base-hover [&.active]:bg-state-base-active', active && 'active')}
|
||||
onClick={() => { onClick?.(category) }}>
|
||||
<div className='w-5 h-5 inline-flex items-center justify-center rounded-md border border-divider-regular bg-components-icon-bg-midnight-solid group-[.active]:bg-components-icon-bg-blue-solid'>
|
||||
<div className='inline-flex h-5 w-5 items-center justify-center rounded-md border border-divider-regular bg-components-icon-bg-midnight-solid group-[.active]:bg-components-icon-bg-blue-solid'>
|
||||
<AppCategoryIcon category={category} />
|
||||
</div>
|
||||
<AppCategoryLabel category={category}
|
||||
@ -74,18 +74,18 @@ type AppCategoryIconProps = {
|
||||
}
|
||||
function AppCategoryIcon({ category }: AppCategoryIconProps) {
|
||||
if (category === AppCategories.AGENT)
|
||||
return <RiSpeakAiFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
|
||||
return <RiSpeakAiFill className='h-3.5 w-3.5 text-components-avatar-shape-fill-stop-100' />
|
||||
if (category === AppCategories.ASSISTANT)
|
||||
return <RiChatSmileAiFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
|
||||
return <RiChatSmileAiFill className='h-3.5 w-3.5 text-components-avatar-shape-fill-stop-100' />
|
||||
if (category === AppCategories.HR)
|
||||
return <RiPassPendingFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
|
||||
return <RiPassPendingFill className='h-3.5 w-3.5 text-components-avatar-shape-fill-stop-100' />
|
||||
if (category === AppCategories.PROGRAMMING)
|
||||
return <RiTerminalBoxFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
|
||||
return <RiTerminalBoxFill className='h-3.5 w-3.5 text-components-avatar-shape-fill-stop-100' />
|
||||
if (category === AppCategories.RECOMMENDED)
|
||||
return <RiThumbUpFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
|
||||
return <RiThumbUpFill className='h-3.5 w-3.5 text-components-avatar-shape-fill-stop-100' />
|
||||
if (category === AppCategories.WRITING)
|
||||
return <RiQuillPenAiFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
|
||||
return <RiQuillPenAiFill className='h-3.5 w-3.5 text-components-avatar-shape-fill-stop-100' />
|
||||
if (category === AppCategories.WORKFLOW)
|
||||
return <RiExchange2Fill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
|
||||
return <RiAppsFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
|
||||
return <RiExchange2Fill className='h-3.5 w-3.5 text-components-avatar-shape-fill-stop-100' />
|
||||
return <RiAppsFill className='h-3.5 w-3.5 text-components-avatar-shape-fill-stop-100' />
|
||||
}
|
||||
|
||||
@ -1,57 +0,0 @@
|
||||
import { Fragment, useCallback } from 'react'
|
||||
import type { ReactNode } from 'react'
|
||||
import { Dialog, Transition } from '@headlessui/react'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type DialogProps = {
|
||||
className?: string
|
||||
children: ReactNode
|
||||
show: boolean
|
||||
onClose?: () => void
|
||||
}
|
||||
|
||||
const NewAppDialog = ({
|
||||
className,
|
||||
children,
|
||||
show,
|
||||
onClose,
|
||||
}: DialogProps) => {
|
||||
const close = useCallback(() => onClose?.(), [onClose])
|
||||
return (
|
||||
<Transition appear show={show} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-40" onClose={close}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black bg-opacity-25" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0">
|
||||
<div className="flex flex-col items-center justify-center min-h-full pt-[56px]">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className={cn('grow relative w-full h-[calc(100vh-56px)] p-0 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-t-xl', className)}>
|
||||
{children}
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition >
|
||||
)
|
||||
}
|
||||
|
||||
export default NewAppDialog
|
||||
@ -94,17 +94,17 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
|
||||
handleCreateApp()
|
||||
})
|
||||
return <>
|
||||
<div className='flex justify-center h-full overflow-y-auto overflow-x-hidden'>
|
||||
<div className='flex-1 shrink-0 flex justify-end'>
|
||||
<div className='flex h-full justify-center overflow-y-auto overflow-x-hidden'>
|
||||
<div className='flex flex-1 shrink-0 justify-end'>
|
||||
<div className='px-10'>
|
||||
<div className='w-full h-6 2xl:h-[139px]' />
|
||||
<div className='pt-1 pb-6'>
|
||||
<div className='h-6 w-full 2xl:h-[139px]' />
|
||||
<div className='pb-6 pt-1'>
|
||||
<span className='title-2xl-semi-bold text-text-primary'>{t('app.newApp.startFromBlank')}</span>
|
||||
</div>
|
||||
<div className='leading-6 mb-2'>
|
||||
<div className='mb-2 leading-6'>
|
||||
<span className='system-sm-semibold text-text-secondary'>{t('app.newApp.chooseAppType')}</span>
|
||||
</div>
|
||||
<div className='flex flex-col w-[660px] gap-4'>
|
||||
<div className='flex w-[660px] flex-col gap-4'>
|
||||
<div>
|
||||
<div className='mb-2'>
|
||||
<span className='system-2xs-medium-uppercase text-text-tertiary'>{t('app.newApp.forBeginners')}</span>
|
||||
@ -114,8 +114,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
|
||||
active={appMode === 'chat'}
|
||||
title={t('app.types.chatbot')}
|
||||
description={t('app.newApp.chatbotShortDescription')}
|
||||
icon={<div className='w-6 h-6 bg-components-icon-bg-blue-solid rounded-md flex items-center justify-center'>
|
||||
<ChatBot className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
|
||||
icon={<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-solid'>
|
||||
<ChatBot className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
|
||||
</div>}
|
||||
onClick={() => {
|
||||
setAppMode('chat')
|
||||
@ -124,8 +124,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
|
||||
active={appMode === 'agent-chat'}
|
||||
title={t('app.types.agent')}
|
||||
description={t('app.newApp.agentShortDescription')}
|
||||
icon={<div className='w-6 h-6 bg-components-icon-bg-violet-solid rounded-md flex items-center justify-center'>
|
||||
<Logic className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
|
||||
icon={<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-violet-solid'>
|
||||
<Logic className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
|
||||
</div>}
|
||||
onClick={() => {
|
||||
setAppMode('agent-chat')
|
||||
@ -134,8 +134,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
|
||||
active={appMode === 'completion'}
|
||||
title={t('app.newApp.completeApp')}
|
||||
description={t('app.newApp.completionShortDescription')}
|
||||
icon={<div className='w-6 h-6 bg-components-icon-bg-teal-solid rounded-md flex items-center justify-center'>
|
||||
<ListSparkle className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
|
||||
icon={<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-teal-solid'>
|
||||
<ListSparkle className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
|
||||
</div>}
|
||||
onClick={() => {
|
||||
setAppMode('completion')
|
||||
@ -152,8 +152,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
|
||||
active={appMode === 'advanced-chat'}
|
||||
title={t('app.types.advanced')}
|
||||
description={t('app.newApp.advancedShortDescription')}
|
||||
icon={<div className='w-6 h-6 bg-components-icon-bg-blue-light-solid rounded-md flex items-center justify-center'>
|
||||
<BubbleTextMod className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
|
||||
icon={<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-light-solid'>
|
||||
<BubbleTextMod className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
|
||||
</div>}
|
||||
onClick={() => {
|
||||
setAppMode('advanced-chat')
|
||||
@ -163,8 +163,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
|
||||
active={appMode === 'workflow'}
|
||||
title={t('app.types.workflow')}
|
||||
description={t('app.newApp.workflowShortDescription')}
|
||||
icon={<div className='w-6 h-6 bg-components-icon-bg-indigo-solid rounded-md flex items-center justify-center'>
|
||||
<RiExchange2Fill className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
|
||||
icon={<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-indigo-solid'>
|
||||
<RiExchange2Fill className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
|
||||
</div>}
|
||||
onClick={() => {
|
||||
setAppMode('workflow')
|
||||
@ -172,9 +172,9 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
|
||||
</div>
|
||||
</div>
|
||||
<Divider style={{ margin: 0 }} />
|
||||
<div className='flex space-x-3 items-center'>
|
||||
<div className='flex items-center space-x-3'>
|
||||
<div className='flex-1'>
|
||||
<div className='h-6 flex items-center mb-1'>
|
||||
<div className='mb-1 flex h-6 items-center'>
|
||||
<label className='system-sm-semibold text-text-secondary'>{t('app.newApp.captionName')}</label>
|
||||
</div>
|
||||
<Input
|
||||
@ -202,9 +202,9 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
|
||||
/>}
|
||||
</div>
|
||||
<div>
|
||||
<div className='h-6 flex items-center mb-1'>
|
||||
<div className='mb-1 flex h-6 items-center'>
|
||||
<label className='system-sm-semibold text-text-secondary'>{t('app.newApp.captionDescription')}</label>
|
||||
<span className='system-xs-regular text-text-tertiary ml-1'>({t('app.newApp.optional')})</span>
|
||||
<span className='system-xs-regular ml-1 text-text-tertiary'>({t('app.newApp.optional')})</span>
|
||||
</div>
|
||||
<Textarea
|
||||
className='resize-none'
|
||||
@ -214,11 +214,11 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='pt-5 pb-10 flex justify-between items-center'>
|
||||
<div className='flex gap-1 items-center system-xs-regular text-text-tertiary cursor-pointer' onClick={onCreateFromTemplate}>
|
||||
<div className='flex items-center justify-between pb-10 pt-5'>
|
||||
<div className='system-xs-regular flex cursor-pointer items-center gap-1 text-text-tertiary' onClick={onCreateFromTemplate}>
|
||||
<span>{t('app.newApp.noIdeaTip')}</span>
|
||||
<div className='p-[1px]'>
|
||||
<RiArrowRightLine className='w-3.5 h-3.5' />
|
||||
<RiArrowRightLine className='h-3.5 w-3.5' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
@ -226,21 +226,21 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
|
||||
<Button disabled={isAppsFull || !name} className='gap-1' variant="primary" onClick={handleCreateApp}>
|
||||
<span>{t('app.newApp.Create')}</span>
|
||||
<div className='flex gap-0.5'>
|
||||
<RiCommandLine size={14} className='p-0.5 system-kbd bg-components-kbd-bg-white rounded-sm' />
|
||||
<RiCornerDownLeftLine size={14} className='p-0.5 system-kbd bg-components-kbd-bg-white rounded-sm' />
|
||||
<RiCommandLine size={14} className='system-kbd rounded-sm bg-components-kbd-bg-white p-0.5' />
|
||||
<RiCornerDownLeftLine size={14} className='system-kbd rounded-sm bg-components-kbd-bg-white p-0.5' />
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 shrink h-full flex justify-start relative overflow-hidden'>
|
||||
<div className='h-6 2xl:h-[139px] absolute left-0 top-0 right-0 border-b border-b-divider-subtle'></div>
|
||||
<div className='relative flex h-full flex-1 shrink justify-start overflow-hidden'>
|
||||
<div className='absolute left-0 right-0 top-0 h-6 border-b border-b-divider-subtle 2xl:h-[139px]'></div>
|
||||
<div className='max-w-[760px] border-x border-x-divider-subtle'>
|
||||
<div className='h-6 2xl:h-[139px]' />
|
||||
<AppPreview mode={appMode} />
|
||||
<div className='absolute left-0 right-0 border-b border-b-divider-subtle'></div>
|
||||
<div className='w-[664px] h-[448px] flex items-center justify-center' style={{ background: 'repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(16,24,40,0.04) 4px,transparent 3px, transparent 6px)' }}>
|
||||
<div className='flex h-[448px] w-[664px] items-center justify-center' style={{ background: 'repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(16,24,40,0.04) 4px,transparent 3px, transparent 6px)' }}>
|
||||
<AppScreenShot show={appMode === 'chat'} mode='chat' />
|
||||
<AppScreenShot show={appMode === 'advanced-chat'} mode='advanced-chat' />
|
||||
<AppScreenShot show={appMode === 'agent-chat'} mode='agent-chat' />
|
||||
@ -279,7 +279,7 @@ const CreateAppModal = ({ show, onClose, onSuccess, onCreateFromTemplate }: Crea
|
||||
export default CreateAppModal
|
||||
|
||||
type AppTypeCardProps = {
|
||||
icon: JSX.Element
|
||||
icon: React.JSX.Element
|
||||
beta?: boolean
|
||||
title: string
|
||||
description: string
|
||||
@ -290,19 +290,19 @@ function AppTypeCard({ icon, title, beta = false, description, active, onClick }
|
||||
const { t } = useTranslation()
|
||||
return <div
|
||||
className={
|
||||
cn(`w-[191px] h-[84px] p-3 border-[0.5px] relative box-content
|
||||
rounded-xl border-components-option-card-option-border
|
||||
bg-components-panel-on-panel-item-bg shadow-xs cursor-pointer hover:shadow-md`, active
|
||||
? 'outline outline-[1.5px] outline-components-option-card-option-selected-border shadow-md'
|
||||
cn(`relative box-content h-[84px] w-[191px] cursor-pointer rounded-xl
|
||||
border-[0.5px] border-components-option-card-option-border
|
||||
bg-components-panel-on-panel-item-bg p-3 shadow-xs hover:shadow-md`, active
|
||||
? 'shadow-md outline outline-[1.5px] outline-components-option-card-option-selected-border'
|
||||
: '')
|
||||
}
|
||||
onClick={onClick}
|
||||
>
|
||||
{beta && <div className='px-[5px] py-[3px]
|
||||
rounded-[5px] min-w-[18px] absolute top-3 right-3
|
||||
border border-divider-deep system-2xs-medium-uppercase text-text-tertiary'>{t('common.menus.status')}</div>}
|
||||
{beta && <div className='system-2xs-medium-uppercase absolute
|
||||
right-3 top-3 min-w-[18px] rounded-[5px] border
|
||||
border-divider-deep px-[5px] py-[3px] text-text-tertiary'>{t('common.menus.status')}</div>}
|
||||
{icon}
|
||||
<div className='system-sm-semibold text-text-secondary mt-2 mb-0.5'>{title}</div>
|
||||
<div className='system-sm-semibold mb-0.5 mt-2 text-text-secondary'>{title}</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>{description}</div>
|
||||
</div>
|
||||
}
|
||||
@ -339,9 +339,9 @@ function AppPreview({ mode }: { mode: AppMode }) {
|
||||
const previewInfo = modeToPreviewInfoMap[mode]
|
||||
return <div className='px-8 py-4'>
|
||||
<h4 className='system-sm-semibold-uppercase text-text-secondary'>{previewInfo.title}</h4>
|
||||
<div className='mt-1 system-xs-regular text-text-tertiary max-w-96 min-h-8'>
|
||||
<div className='system-xs-regular mt-1 min-h-8 max-w-96 text-text-tertiary'>
|
||||
<span>{previewInfo.description}</span>
|
||||
{previewInfo.link && <Link target='_blank' href={previewInfo.link} className='text-text-accent ml-1'>{t('app.newApp.learnMore')}</Link>}
|
||||
{previewInfo.link && <Link target='_blank' href={previewInfo.link} className='ml-1 text-text-accent'>{t('app.newApp.learnMore')}</Link>}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -201,26 +201,26 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
className='p-0 w-[520px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'
|
||||
className='w-[520px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl'
|
||||
isShow={show}
|
||||
onClose={() => { }}
|
||||
>
|
||||
<div className='flex items-center justify-between pt-6 pl-6 pr-5 pb-3 text-text-primary title-2xl-semi-bold'>
|
||||
<div className='title-2xl-semi-bold flex items-center justify-between pb-3 pl-6 pr-5 pt-6 text-text-primary'>
|
||||
{t('app.importFromDSL')}
|
||||
<div
|
||||
className='flex items-center w-8 h-8 cursor-pointer'
|
||||
className='flex h-8 w-8 cursor-pointer items-center'
|
||||
onClick={() => onClose()}
|
||||
>
|
||||
<RiCloseLine className='w-5 h-5 text-text-tertiary' />
|
||||
<RiCloseLine className='h-5 w-5 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-center px-6 h-9 space-x-6 system-md-semibold text-text-tertiary border-b border-divider-subtle'>
|
||||
<div className='system-md-semibold flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary'>
|
||||
{
|
||||
tabs.map(tab => (
|
||||
<div
|
||||
key={tab.key}
|
||||
className={cn(
|
||||
'relative flex items-center h-full cursor-pointer',
|
||||
'relative flex h-full cursor-pointer items-center',
|
||||
currentTab === tab.key && 'text-text-primary',
|
||||
)}
|
||||
onClick={() => setCurrentTab(tab.key)}
|
||||
@ -228,7 +228,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
|
||||
{tab.label}
|
||||
{
|
||||
currentTab === tab.key && (
|
||||
<div className='absolute bottom-0 w-full h-[2px] bg-util-colors-blue-brand-blue-brand-600'></div>
|
||||
<div className='absolute bottom-0 h-[2px] w-full bg-util-colors-blue-brand-blue-brand-600'></div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
@ -248,7 +248,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
|
||||
{
|
||||
currentTab === CreateFromDSLModalTab.FROM_URL && (
|
||||
<div>
|
||||
<div className='mb-1 system-md-semibold leading6'>DSL URL</div>
|
||||
<div className='system-md-semibold leading6 mb-1'>DSL URL</div>
|
||||
<Input
|
||||
placeholder={t('app.importFromDSLUrlPlaceholder') || ''}
|
||||
value={dslUrlValue}
|
||||
@ -273,9 +273,9 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
|
||||
onClose={() => setShowErrorModal(false)}
|
||||
className='w-[480px]'
|
||||
>
|
||||
<div className='flex pb-4 flex-col items-start gap-2 self-stretch'>
|
||||
<div className='text-text-primary title-2xl-semi-bold'>{t('app.newApp.appCreateDSLErrorTitle')}</div>
|
||||
<div className='flex grow flex-col text-text-secondary system-md-regular'>
|
||||
<div className='flex flex-col items-start gap-2 self-stretch pb-4'>
|
||||
<div className='title-2xl-semi-bold text-text-primary'>{t('app.newApp.appCreateDSLErrorTitle')}</div>
|
||||
<div className='system-md-regular flex grow flex-col text-text-secondary'>
|
||||
<div>{t('app.newApp.appCreateDSLErrorPart1')}</div>
|
||||
<div>{t('app.newApp.appCreateDSLErrorPart2')}</div>
|
||||
<br />
|
||||
@ -283,7 +283,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
|
||||
<div>{t('app.newApp.appCreateDSLErrorPart4')}<span className='system-md-medium'>{versions?.systemVersion}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex pt-6 justify-end items-start gap-2 self-stretch'>
|
||||
<div className='flex items-start justify-end gap-2 self-stretch pt-6'>
|
||||
<Button variant='secondary' onClick={() => setShowErrorModal(false)}>{t('app.newApp.Cancel')}</Button>
|
||||
<Button variant='primary' destructive onClick={onDSLConfirm}>{t('app.newApp.Confirm')}</Button>
|
||||
</div>
|
||||
|
||||
@ -102,35 +102,35 @@ const Uploader: FC<Props> = ({
|
||||
/>
|
||||
<div ref={dropRef}>
|
||||
{!file && (
|
||||
<div className={cn('flex items-center h-12 rounded-xl bg-gray-50 border border-dashed border-gray-200 text-sm font-normal', dragging && 'bg-[#F5F8FF] border border-[#B2CCFF]')}>
|
||||
<div className='w-full flex items-center justify-center space-x-2'>
|
||||
<UploadCloud01 className='w-6 h-6 mr-2' />
|
||||
<div className={cn('flex h-12 items-center rounded-xl border border-dashed border-gray-200 bg-gray-50 text-sm font-normal', dragging && 'border border-[#B2CCFF] bg-[#F5F8FF]')}>
|
||||
<div className='flex w-full items-center justify-center space-x-2'>
|
||||
<UploadCloud01 className='mr-2 h-6 w-6' />
|
||||
<div className='text-gray-500'>
|
||||
{t('datasetCreation.stepOne.uploader.button')}
|
||||
<span className='pl-1 text-[#155eef] cursor-pointer' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span>
|
||||
<span className='cursor-pointer pl-1 text-[#155eef]' onClick={selectHandle}>{t('datasetDocuments.list.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 rounded-lg bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border shadow-xs group', 'hover:bg-[#F5F8FF] hover:border-[#B2CCFF]')}>
|
||||
<div className='flex p-3 justify-center items-center'>
|
||||
<YamlIcon className="w-6 h-6 shrink-0" />
|
||||
<div className={cn('group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs', 'hover:border-[#B2CCFF] hover:bg-[#F5F8FF]')}>
|
||||
<div className='flex items-center justify-center p-3'>
|
||||
<YamlIcon className="h-6 w-6 shrink-0" />
|
||||
</div>
|
||||
<div className='flex py-1 pr-2 grow flex-col items-start gap-0.5'>
|
||||
<span className='max-w-[calc(100%_-_30px)] text-ellipsis whitespace-nowrap overflow-hidden text-text-secondary font-inter text-[12px] font-medium leading-4'>{file.name}</span>
|
||||
<div className='flex h-3 items-center gap-1 self-stretch text-text-tertiary font-inter text-[10px] font-medium leading-3 uppercase'>
|
||||
<div className='flex grow flex-col items-start gap-0.5 py-1 pr-2'>
|
||||
<span className='font-inter max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap text-[12px] font-medium leading-4 text-text-secondary'>{file.name}</span>
|
||||
<div className='font-inter flex h-3 items-center gap-1 self-stretch text-[10px] font-medium uppercase leading-3 text-text-tertiary'>
|
||||
<span>YAML</span>
|
||||
<span className='text-text-quaternary'>·</span>
|
||||
<span>{formatFileSize(file.size)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='hidden group-hover:flex items-center'>
|
||||
<div className='hidden items-center group-hover:flex'>
|
||||
<Button onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
|
||||
<div className='mx-2 w-px h-4 bg-gray-200' />
|
||||
<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-gray-200' />
|
||||
<div className='cursor-pointer p-2' onClick={removeFile}>
|
||||
<RiDeleteBinLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -74,12 +74,12 @@ const DuplicateAppModal = ({
|
||||
onClose={() => { }}
|
||||
className={cn('relative !max-w-[480px]', 'px-8')}
|
||||
>
|
||||
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onHide}>
|
||||
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||
<div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onHide}>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
<div className='relative mt-3 mb-9 text-xl font-semibold leading-[30px] text-text-primary'>{t('app.duplicateTitle')}</div>
|
||||
<div className='mb-9 system-sm-regular text-text-secondary'>
|
||||
<div className='mb-2 system-md-medium'>{t('explore.appCustomize.subTitle')}</div>
|
||||
<div className='relative mb-9 mt-3 text-xl font-semibold leading-[30px] text-text-primary'>{t('app.duplicateTitle')}</div>
|
||||
<div className='system-sm-regular mb-9 text-text-secondary'>
|
||||
<div className='system-md-medium mb-2'>{t('explore.appCustomize.subTitle')}</div>
|
||||
<div className='flex items-center justify-between space-x-2'>
|
||||
<AppIcon
|
||||
size='large'
|
||||
@ -99,7 +99,7 @@ const DuplicateAppModal = ({
|
||||
{isAppsFull && <AppsFull loc='app-duplicate-create' />}
|
||||
</div>
|
||||
<div className='flex flex-row-reverse'>
|
||||
<Button disabled={isAppsFull} className='w-24 ml-2' variant='primary' onClick={submit}>{t('app.duplicate')}</Button>
|
||||
<Button disabled={isAppsFull} className='ml-2 w-24' variant='primary' onClick={submit}>{t('app.duplicate')}</Button>
|
||||
<Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@ -41,7 +41,7 @@ const LogAnnotation: FC<Props> = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='pt-3 px-6 h-full flex flex-col'>
|
||||
<div className='flex h-full flex-col px-6 pt-3'>
|
||||
{appDetail.mode !== 'workflow' && (
|
||||
<TabSlider
|
||||
className='shrink-0'
|
||||
@ -52,7 +52,7 @@ const LogAnnotation: FC<Props> = ({
|
||||
options={options}
|
||||
/>
|
||||
)}
|
||||
<div className={cn('grow h-0', appDetail.mode !== 'workflow' && 'mt-3')}>
|
||||
<div className={cn('h-0 grow', appDetail.mode !== 'workflow' && 'mt-3')}>
|
||||
{pageType === PageType.log && appDetail.mode !== 'workflow' && (<Log appDetail={appDetail} />)}
|
||||
{pageType === PageType.annotation && (<Annotation appDetail={appDetail} />)}
|
||||
{pageType === PageType.log && appDetail.mode === 'workflow' && (<WorkflowLog appDetail={appDetail} />)}
|
||||
|
||||
@ -40,7 +40,7 @@ const Filter: FC<IFilterProps> = ({ isChatMode, appId, queryParams, setQueryPara
|
||||
if (!data)
|
||||
return null
|
||||
return (
|
||||
<div className='flex flex-row flex-wrap gap-2 items-center mb-2'>
|
||||
<div className='mb-2 flex flex-row flex-wrap items-center gap-2'>
|
||||
<Chip
|
||||
className='min-w-[150px]'
|
||||
panelClassName='w-[270px]'
|
||||
@ -80,7 +80,7 @@ const Filter: FC<IFilterProps> = ({ isChatMode, appId, queryParams, setQueryPara
|
||||
/>
|
||||
{isChatMode && (
|
||||
<>
|
||||
<div className='w-px h-3.5 bg-divider-regular'></div>
|
||||
<div className='h-3.5 w-px bg-divider-regular'></div>
|
||||
<Sort
|
||||
order={queryParams.sort_by?.startsWith('-') ? '-' : ''}
|
||||
value={queryParams.sort_by?.replace('-', '') || 'created_at'}
|
||||
|
||||
@ -37,10 +37,10 @@ const EmptyElement: FC<{ appUrl: string }> = ({ appUrl }) => {
|
||||
const pathname = usePathname()
|
||||
const pathSegments = pathname.split('/')
|
||||
pathSegments.pop()
|
||||
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('appLog.table.empty.element.title')}<ThreeDotsIcon className='inline relative -top-3 -left-1.5' /></span>
|
||||
<div className='mt-2 text-text-tertiary system-sm-regular'>
|
||||
return <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('appLog.table.empty.element.title')}<ThreeDotsIcon className='relative -left-1.5 -top-3 inline' /></span>
|
||||
<div className='system-sm-regular mt-2 text-text-tertiary'>
|
||||
<Trans
|
||||
i18nKey="appLog.table.empty.element.content"
|
||||
components={{ shareLink: <Link href={`${pathSegments.join('/')}/overview`} className='text-util-colors-blue-blue-600' />, testLink: <Link href={appUrl} className='text-util-colors-blue-blue-600' target='_blank' rel='noopener noreferrer' /> }}
|
||||
@ -101,9 +101,9 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
|
||||
const total = isChatMode ? chatConversations?.total : completionConversations?.total
|
||||
|
||||
return (
|
||||
<div className='grow flex flex-col h-full'>
|
||||
<p className='shrink-0 text-text-tertiary system-sm-regular'>{t('appLog.description')}</p>
|
||||
<div className='grow max-h-[calc(100%-16px)] flex flex-col py-4 flex-1'>
|
||||
<div className='flex h-full grow flex-col'>
|
||||
<p className='system-sm-regular shrink-0 text-text-tertiary'>{t('appLog.description')}</p>
|
||||
<div className='flex max-h-[calc(100%-16px)] flex-1 grow flex-col py-4'>
|
||||
<Filter isChatMode={isChatMode} appId={appDetail.id} queryParams={queryParams} setQueryParams={setQueryParams} />
|
||||
{total === undefined
|
||||
? <Loading type='app' />
|
||||
|
||||
@ -72,8 +72,8 @@ const DrawerContext = createContext<IDrawerContext>({} as IDrawerContext)
|
||||
const HandThumbIconWithCount: FC<{ count: number; iconType: 'up' | 'down' }> = ({ count, iconType }) => {
|
||||
const classname = iconType === 'up' ? 'text-primary-600 bg-primary-50' : 'text-red-600 bg-red-50'
|
||||
const Icon = iconType === 'up' ? HandThumbUpIcon : HandThumbDownIcon
|
||||
return <div className={`inline-flex items-center w-fit rounded-md p-1 text-xs ${classname} mr-1 last:mr-0`}>
|
||||
<Icon className={'h-3 w-3 mr-0.5 rounded-md'} />
|
||||
return <div className={`inline-flex w-fit items-center rounded-md p-1 text-xs ${classname} mr-1 last:mr-0`}>
|
||||
<Icon className={'mr-0.5 h-3 w-3 rounded-md'} />
|
||||
{count > 0 ? count : null}
|
||||
</div>
|
||||
}
|
||||
@ -84,7 +84,7 @@ const statusTdRender = (statusCount: StatusCount) => {
|
||||
|
||||
if (statusCount.partial_success + statusCount.failed === 0) {
|
||||
return (
|
||||
<div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'>
|
||||
<div className='system-xs-semibold-uppercase inline-flex items-center gap-1'>
|
||||
<Indicator color={'green'} />
|
||||
<span className='text-util-colors-green-green-600'>Success</span>
|
||||
</div>
|
||||
@ -92,7 +92,7 @@ const statusTdRender = (statusCount: StatusCount) => {
|
||||
}
|
||||
else if (statusCount.failed === 0) {
|
||||
return (
|
||||
<div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'>
|
||||
<div className='system-xs-semibold-uppercase inline-flex items-center gap-1'>
|
||||
<Indicator color={'green'} />
|
||||
<span className='text-util-colors-green-green-600'>Partial Success</span>
|
||||
</div>
|
||||
@ -100,7 +100,7 @@ const statusTdRender = (statusCount: StatusCount) => {
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'>
|
||||
<div className='system-xs-semibold-uppercase inline-flex items-center gap-1'>
|
||||
<Indicator color={'red'} />
|
||||
<span className='text-util-colors-red-red-600'>{statusCount.failed} {`${statusCount.failed > 1 ? 'Failures' : 'Failure'}`}</span>
|
||||
</div>
|
||||
@ -360,13 +360,13 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div ref={ref} className='rounded-xl border-[0.5px] border-components-panel-border h-full flex flex-col'>
|
||||
<div ref={ref} className='flex h-full flex-col rounded-xl border-[0.5px] border-components-panel-border'>
|
||||
{/* Panel Header */}
|
||||
<div className='shrink-0 pl-4 pt-3 pr-3 pb-2 flex items-center gap-2 bg-components-panel-bg rounded-t-xl'>
|
||||
<div className='flex shrink-0 items-center gap-2 rounded-t-xl bg-components-panel-bg pb-2 pl-4 pr-3 pt-3'>
|
||||
<div className='shrink-0'>
|
||||
<div className='mb-0.5 text-text-primary system-xs-semibold-uppercase'>{isChatMode ? t('appLog.detail.conversationId') : t('appLog.detail.time')}</div>
|
||||
<div className='system-xs-semibold-uppercase mb-0.5 text-text-primary'>{isChatMode ? t('appLog.detail.conversationId') : t('appLog.detail.time')}</div>
|
||||
{isChatMode && (
|
||||
<div className='flex items-center text-text-secondary system-2xs-regular-uppercase'>
|
||||
<div className='system-2xs-regular-uppercase flex items-center text-text-secondary'>
|
||||
<Tooltip
|
||||
popupContent={detail.id}
|
||||
>
|
||||
@ -376,19 +376,19 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
|
||||
</div>
|
||||
)}
|
||||
{!isChatMode && (
|
||||
<div className='text-text-secondary system-2xs-regular-uppercase'>{formatTime(detail.created_at, t('appLog.dateTimeFormat') as string)}</div>
|
||||
<div className='system-2xs-regular-uppercase text-text-secondary'>{formatTime(detail.created_at, t('appLog.dateTimeFormat') as string)}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='grow flex items-center flex-wrap gap-y-1 justify-end'>
|
||||
<div className='flex grow flex-wrap items-center justify-end gap-y-1'>
|
||||
{!isAdvanced && <ModelInfo model={detail.model_config.model} />}
|
||||
</div>
|
||||
<ActionButton size='l' onClick={onClose}>
|
||||
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
{/* Panel Body */}
|
||||
<div className='shrink-0 pt-1 px-1'>
|
||||
<div className='p-3 pb-2 rounded-t-xl bg-background-section-burn'>
|
||||
<div className='shrink-0 px-1 pt-1'>
|
||||
<div className='rounded-t-xl bg-background-section-burn p-3 pb-2'>
|
||||
{(varList.length > 0 || (!isChatMode && message_files.length > 0)) && (
|
||||
<VarPanel
|
||||
varList={varList}
|
||||
@ -397,12 +397,12 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='grow mx-1 mb-1 bg-background-section-burn rounded-b-xl overflow-auto'>
|
||||
<div className='mx-1 mb-1 grow overflow-auto rounded-b-xl bg-background-section-burn'>
|
||||
{!isChatMode
|
||||
? <div className="px-6 py-4">
|
||||
<div className='flex h-[18px] items-center space-x-3'>
|
||||
<div className='text-text-tertiary system-xs-semibold-uppercase'>{t('appLog.table.header.output')}</div>
|
||||
<div className='grow h-[1px]' style={{
|
||||
<div className='system-xs-semibold-uppercase text-text-tertiary'>{t('appLog.table.header.output')}</div>
|
||||
<div className='h-[1px] grow' style={{
|
||||
background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, rgb(243, 244, 246) 100%)',
|
||||
}}></div>
|
||||
</div>
|
||||
@ -421,7 +421,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
|
||||
/>
|
||||
</div>
|
||||
: threadChatItems.length < 8
|
||||
? <div className="pt-4 mb-4">
|
||||
? <div className="mb-4 pt-4">
|
||||
<Chat
|
||||
config={{
|
||||
appId: appDetail?.id,
|
||||
@ -461,7 +461,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
|
||||
dataLength={threadChatItems.length}
|
||||
next={fetchData}
|
||||
hasMore={hasMore}
|
||||
loader={<div className='text-center text-text-tertiary system-xs-regular'>{t('appLog.detail.loading')}...</div>}
|
||||
loader={<div className='system-xs-regular text-center text-text-tertiary'>{t('appLog.detail.loading')}...</div>}
|
||||
// endMessage={<div className='text-center'>Nothing more to show</div>}
|
||||
// below props only if you need pull down functionality
|
||||
refreshFunction={fetchData}
|
||||
@ -643,8 +643,8 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
|
||||
return (
|
||||
<Tooltip
|
||||
popupContent={
|
||||
<span className='text-xs text-text-tertiary inline-flex items-center'>
|
||||
<RiEditFill className='w-3 h-3 mr-1' />{`${t('appLog.detail.annotationTip', { user: annotation?.account?.name })} ${formatTime(annotation?.created_at || dayjs().unix(), 'MM-DD hh:mm A')}`}
|
||||
<span className='inline-flex items-center text-xs text-text-tertiary'>
|
||||
<RiEditFill className='mr-1 h-3 w-3' />{`${t('appLog.detail.annotationTip', { user: annotation?.account?.name })} ${formatTime(annotation?.created_at || dayjs().unix(), 'MM-DD hh:mm A')}`}
|
||||
</span>
|
||||
}
|
||||
popupClassName={(isHighlight && !isChatMode) ? '' : '!hidden'}
|
||||
@ -673,41 +673,41 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
|
||||
<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'></td>
|
||||
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{isChatMode ? t('appLog.table.header.summary') : t('appLog.table.header.input')}</td>
|
||||
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.endUser')}</td>
|
||||
{isChatflow && <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.status')}</td>}
|
||||
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{isChatMode ? t('appLog.table.header.messageCount') : t('appLog.table.header.output')}</td>
|
||||
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.userRate')}</td>
|
||||
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.adminRate')}</td>
|
||||
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.updatedTime')}</td>
|
||||
<td className='pl-3 py-1.5 rounded-r-lg bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.time')}</td>
|
||||
<td className='w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1'></td>
|
||||
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{isChatMode ? t('appLog.table.header.summary') : t('appLog.table.header.input')}</td>
|
||||
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appLog.table.header.endUser')}</td>
|
||||
{isChatflow && <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appLog.table.header.status')}</td>}
|
||||
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{isChatMode ? t('appLog.table.header.messageCount') : t('appLog.table.header.output')}</td>
|
||||
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appLog.table.header.userRate')}</td>
|
||||
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appLog.table.header.adminRate')}</td>
|
||||
<td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appLog.table.header.updatedTime')}</td>
|
||||
<td className='whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3'>{t('appLog.table.header.time')}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-text-secondary system-sm-regular">
|
||||
<tbody className="system-sm-regular text-text-secondary">
|
||||
{logs.data.map((log: any) => {
|
||||
const endUser = log.from_end_user_session_id || log.from_account_name
|
||||
const leftValue = get(log, isChatMode ? 'name' : 'message.inputs.query') || (!isChatMode ? (get(log, 'message.query') || get(log, 'message.inputs.default_input')) : '') || ''
|
||||
const rightValue = get(log, isChatMode ? 'message_count' : 'message.answer')
|
||||
return <tr
|
||||
key={log.id}
|
||||
className={cn('border-b border-divider-subtle hover:bg-background-default-hover cursor-pointer', currentConversation?.id !== log.id ? '' : 'bg-background-default-hover')}
|
||||
className={cn('cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover', currentConversation?.id !== log.id ? '' : 'bg-background-default-hover')}
|
||||
onClick={() => {
|
||||
setShowDrawer(true)
|
||||
setCurrentConversation(log)
|
||||
}}>
|
||||
<td className='h-4'>
|
||||
{!log.read_at && (
|
||||
<div className='p-3 pr-0.5 flex items-center'>
|
||||
<span className='inline-block bg-util-colors-blue-blue-500 h-1.5 w-1.5 rounded'></span>
|
||||
<div className='flex items-center p-3 pr-0.5'>
|
||||
<span className='inline-block h-1.5 w-1.5 rounded bg-util-colors-blue-blue-500'></span>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className='p-3 pr-2 w-[160px]' style={{ maxWidth: isChatMode ? 300 : 200 }}>
|
||||
<td className='w-[160px] p-3 pr-2' style={{ maxWidth: isChatMode ? 300 : 200 }}>
|
||||
{renderTdValue(leftValue || t('appLog.table.empty.noChat'), !leftValue, isChatMode && log.annotated)}
|
||||
</td>
|
||||
<td className='p-3 pr-2'>{renderTdValue(endUser || defaultValue, !endUser)}</td>
|
||||
{isChatflow && <td className='p-3 pr-2 w-[160px]' style={{ maxWidth: isChatMode ? 300 : 200 }}>
|
||||
{isChatflow && <td className='w-[160px] p-3 pr-2' style={{ maxWidth: isChatMode ? 300 : 200 }}>
|
||||
{statusTdRender(log.status_count)}
|
||||
</td>}
|
||||
<td className='p-3 pr-2' style={{ maxWidth: isChatMode ? 100 : 200 }}>
|
||||
|
||||
@ -57,9 +57,9 @@ const ModelInfo: FC<Props> = ({
|
||||
|
||||
return (
|
||||
<div className={cn('flex items-center rounded-lg')}>
|
||||
<div className='shrink-0 flex items-center gap-1 mr-px h-8 pl-1.5 pr-2 rounded-l-lg bg-components-input-bg-normal'>
|
||||
<div className='mr-px flex h-8 shrink-0 items-center gap-1 rounded-l-lg bg-components-input-bg-normal pl-1.5 pr-2'>
|
||||
<ModelIcon
|
||||
className='!w-5 !h-5'
|
||||
className='!h-5 !w-5'
|
||||
provider={currentProvider}
|
||||
modelName={currentModel?.model}
|
||||
/>
|
||||
@ -80,20 +80,20 @@ const ModelInfo: FC<Props> = ({
|
||||
className='block'
|
||||
>
|
||||
<div className={cn(
|
||||
'p-2 rounded-r-lg bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover cursor-pointer',
|
||||
'cursor-pointer rounded-r-lg bg-components-button-tertiary-bg p-2 hover:bg-components-button-tertiary-bg-hover',
|
||||
open && 'bg-components-button-tertiary-bg-hover',
|
||||
)}>
|
||||
<RiInformation2Line className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[1002]'>
|
||||
<div className='relative w-[280px] pt-3 px-4 pb-2 bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl overflow-hidden'>
|
||||
<div className='mb-1 h-6 text-text-secondary system-sm-semibold-uppercase'>{t('appLog.detail.modelParams')}</div>
|
||||
<div className='relative w-[280px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg px-4 pb-2 pt-3 shadow-xl'>
|
||||
<div className='system-sm-semibold-uppercase mb-1 h-6 text-text-secondary'>{t('appLog.detail.modelParams')}</div>
|
||||
<div className='py-1'>
|
||||
{['temperature', 'top_p', 'presence_penalty', 'max_tokens', 'stop'].map((param: string, index: number) => {
|
||||
return <div className='flex justify-between py-1.5' key={index}>
|
||||
<span className='text-text-tertiary system-xs-medium-uppercase'>{PARAM_MAP[param as keyof typeof PARAM_MAP]}</span>
|
||||
<span className='text-text-secondary system-xs-medium-uppercase'>{getParamValue(param)}</span>
|
||||
<span className='system-xs-medium-uppercase text-text-tertiary'>{PARAM_MAP[param as keyof typeof PARAM_MAP]}</span>
|
||||
<span className='system-xs-medium-uppercase text-text-secondary'>{getParamValue(param)}</span>
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
|
||||
@ -27,38 +27,38 @@ const VarPanel: FC<Props> = ({
|
||||
return (
|
||||
<div className='rounded-[10px] border border-divider-subtle bg-chat-bubble-bg'>
|
||||
<div
|
||||
className={cn('flex items-center gap-1 px-3 pt-2.5 pb-2 border-b border-divider-subtle text-text-secondary cursor-pointer', isCollapse && 'pb-2.5 border-0')}
|
||||
className={cn('flex cursor-pointer items-center gap-1 border-b border-divider-subtle px-3 pb-2 pt-2.5 text-text-secondary', isCollapse && 'border-0 pb-2.5')}
|
||||
onClick={toggleCollapse}
|
||||
>
|
||||
<Variable02 className='w-4 h-4' />
|
||||
<div className='grow system-md-medium'>{t('appLog.detail.variables')}</div>
|
||||
<Variable02 className='h-4 w-4' />
|
||||
<div className='system-md-medium grow'>{t('appLog.detail.variables')}</div>
|
||||
{
|
||||
isCollapse
|
||||
? <RiArrowRightSLine className='w-4 h-4' />
|
||||
: <RiArrowDownSLine className='w-4 h-4' />
|
||||
? <RiArrowRightSLine className='h-4 w-4' />
|
||||
: <RiArrowDownSLine className='h-4 w-4' />
|
||||
}
|
||||
</div>
|
||||
{!isCollapse && (
|
||||
<div className='p-3 flex flex-col gap-2 max-h-[500px] overflow-y-auto'>
|
||||
<div className='flex max-h-[500px] flex-col gap-2 overflow-y-auto p-3'>
|
||||
{varList.map(({ label, value }, index) => (
|
||||
<div key={index} className='flex py-2 system-xs-medium'>
|
||||
<div className='shrink-0 w-[128px] flex text-text-accent'>
|
||||
<div key={index} className='system-xs-medium flex py-2'>
|
||||
<div className='flex w-[128px] shrink-0 text-text-accent'>
|
||||
<span className='shrink-0 opacity-60'>{'{{'}</span>
|
||||
<span className='truncate'>{label}</span>
|
||||
<span className='shrink-0 opacity-60'>{'}}'}</span>
|
||||
</div>
|
||||
<div className='pl-2.5 whitespace-pre-wrap text-text-secondary'>{value}</div>
|
||||
<div className='whitespace-pre-wrap pl-2.5 text-text-secondary'>{value}</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{message_files.length > 0 && (
|
||||
<div className='mt-1 flex py-2'>
|
||||
<div className='shrink-0 w-[128px] system-xs-medium text-text-tertiary'>{t('appLog.detail.uploadImages')}</div>
|
||||
<div className='system-xs-medium w-[128px] shrink-0 text-text-tertiary'>{t('appLog.detail.uploadImages')}</div>
|
||||
<div className="flex space-x-2">
|
||||
{message_files.map((url, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="ml-2.5 w-16 h-16 rounded-lg bg-no-repeat bg-cover bg-center cursor-pointer"
|
||||
className="ml-2.5 h-16 w-16 cursor-pointer rounded-lg bg-cover bg-center bg-no-repeat"
|
||||
style={{ backgroundImage: `url(${url})` }}
|
||||
onClick={() => setImagePreviewUrl(url)}
|
||||
/>
|
||||
|
||||
@ -27,8 +27,8 @@ const APIKeyInfoPanel: FC = () => {
|
||||
return null
|
||||
|
||||
return (
|
||||
<div className={cn('bg-components-panel-bg border-components-panel-border', 'mb-6 relative rounded-2xl shadow-md border p-8 ')}>
|
||||
<div className={cn('text-[24px] text-text-primary font-semibold', isCloud ? 'flex items-center h-8 space-x-1' : 'leading-8 mb-6')}>
|
||||
<div className={cn('border-components-panel-border bg-components-panel-bg', 'relative mb-6 rounded-2xl border p-8 shadow-md ')}>
|
||||
<div className={cn('text-[24px] font-semibold text-text-primary', isCloud ? 'flex h-8 items-center space-x-1' : 'mb-6 leading-8')}>
|
||||
{isCloud && <em-emoji id={'😀'} />}
|
||||
{isCloud
|
||||
? (
|
||||
@ -42,7 +42,7 @@ const APIKeyInfoPanel: FC = () => {
|
||||
)}
|
||||
</div>
|
||||
{isCloud && (
|
||||
<div className='mt-1 text-sm text-text-tertiary font-normal'>{t(`appOverview.apiKeyInfo.cloud.${'trial'}.description`)}</div>
|
||||
<div className='mt-1 text-sm font-normal text-text-tertiary'>{t(`appOverview.apiKeyInfo.cloud.${'trial'}.description`)}</div>
|
||||
)}
|
||||
<Button
|
||||
variant='primary'
|
||||
@ -50,22 +50,22 @@ const APIKeyInfoPanel: FC = () => {
|
||||
onClick={() => setShowAccountSettingModal({ payload: 'provider' })}
|
||||
>
|
||||
<div className='text-sm font-medium'>{t('appOverview.apiKeyInfo.setAPIBtn')}</div>
|
||||
<LinkExternal02 className='w-4 h-4' />
|
||||
<LinkExternal02 className='h-4 w-4' />
|
||||
</Button>
|
||||
{!isCloud && (
|
||||
<a
|
||||
className='mt-2 flex items-center h-[26px] text-xs font-medium text-[#155EEF] p-1 space-x-1'
|
||||
className='mt-2 flex h-[26px] items-center space-x-1 p-1 text-xs font-medium text-[#155EEF]'
|
||||
href='https://cloud.dify.ai/apps'
|
||||
target='_blank' rel='noopener noreferrer'
|
||||
>
|
||||
<div>{t('appOverview.apiKeyInfo.tryCloud')}</div>
|
||||
<LinkExternal02 className='w-3 h-3' />
|
||||
<LinkExternal02 className='h-3 w-3' />
|
||||
</a>
|
||||
)}
|
||||
<div
|
||||
onClick={() => setIsShow(false)}
|
||||
className='absolute right-4 top-4 flex items-center justify-center w-8 h-8 cursor-pointer '>
|
||||
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||
className='absolute right-4 top-4 flex h-8 w-8 cursor-pointer items-center justify-center '>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -130,11 +130,11 @@ function AppCard({
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
`${isInPanel ? 'border-l-[0.5px] border-t' : 'shadow-xs border-[0.5px]'} rounded-xl border-effects-highlight w-full max-w-full ${className ?? ''}`}
|
||||
`${isInPanel ? 'border-l-[0.5px] border-t' : 'border-[0.5px] shadow-xs'} w-full max-w-full rounded-xl border-effects-highlight ${className ?? ''}`}
|
||||
>
|
||||
<div className={`${customBgColor ?? 'bg-background-default'} rounded-xl`}>
|
||||
<div className='flex flex-col p-3 justify-center items-start gap-3 self-stretch border-b-[0.5px] border-divider-subtle w-full'>
|
||||
<div className='flex items-center gap-3 self-stretch w-full'>
|
||||
<div className='flex w-full flex-col items-start justify-center gap-3 self-stretch border-b-[0.5px] border-divider-subtle p-3'>
|
||||
<div className='flex w-full items-center gap-3 self-stretch'>
|
||||
<AppBasic
|
||||
iconType={cardType}
|
||||
icon={appInfo.icon}
|
||||
@ -156,15 +156,15 @@ function AppCard({
|
||||
</div>
|
||||
<Switch defaultValue={runningStatus} onChange={onChangeStatus} disabled={toggleDisabled} />
|
||||
</div>
|
||||
<div className='flex flex-col justify-center items-start self-stretch'>
|
||||
<div className="pb-1 system-xs-medium text-text-tertiary">
|
||||
<div className='flex flex-col items-start justify-center self-stretch'>
|
||||
<div className="system-xs-medium pb-1 text-text-tertiary">
|
||||
{isApp
|
||||
? t('appOverview.overview.appInfo.accessibleAddress')
|
||||
: t('appOverview.overview.apiInfo.accessibleAddress')}
|
||||
</div>
|
||||
<div className="w-full h-9 pl-2 p-1 bg-components-input-bg-normal rounded-lg items-center inline-flex gap-0.5">
|
||||
<div className="h-4 px-1 justify-start items-start gap-2 flex flex-1 min-w-0">
|
||||
<div className="text-text-secondary text-xs font-medium text-ellipsis overflow-hidden whitespace-nowrap">
|
||||
<div className="inline-flex h-9 w-full items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 pl-2">
|
||||
<div className="flex h-4 min-w-0 flex-1 items-start justify-start gap-2 px-1">
|
||||
<div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium text-text-secondary">
|
||||
{isApp ? appUrl : apiUrl}
|
||||
</div>
|
||||
</div>
|
||||
@ -172,8 +172,8 @@ function AppCard({
|
||||
content={isApp ? appUrl : apiUrl}
|
||||
className={'!size-6'}
|
||||
/>
|
||||
{isApp && <ShareQRCode content={isApp ? appUrl : apiUrl} className='z-50 !size-6 hover:bg-state-base-hover rounded-md' selectorId={randomString(8)} />}
|
||||
{isApp && <Divider type="vertical" className="!h-3.5 shrink-0 !mx-0.5" />}
|
||||
{isApp && <ShareQRCode content={isApp ? appUrl : apiUrl} className='z-50 !size-6 rounded-md hover:bg-state-base-hover' selectorId={randomString(8)} />}
|
||||
{isApp && <Divider type="vertical" className="!mx-0.5 !h-3.5 shrink-0" />}
|
||||
{/* button copy link/ button regenerate */}
|
||||
{showConfirmDelete && (
|
||||
<Confirm
|
||||
@ -193,12 +193,12 @@ function AppCard({
|
||||
popupContent={t('appOverview.overview.appInfo.regenerate') || ''}
|
||||
>
|
||||
<div
|
||||
className="w-6 h-6 cursor-pointer hover:bg-state-base-hover rounded-md"
|
||||
className="h-6 w-6 cursor-pointer rounded-md hover:bg-state-base-hover"
|
||||
onClick={() => setShowConfirmDelete(true)}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
`w-full h-full ${style.refreshIcon} ${genLoading ? style.generateLogo : ''}`}
|
||||
`h-full w-full ${style.refreshIcon} ${genLoading ? style.generateLogo : ''}`}
|
||||
></div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
@ -206,7 +206,7 @@ function AppCard({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'flex p-3 items-center gap-1 self-stretch'}>
|
||||
<div className={'flex items-center gap-1 self-stretch p-3'}>
|
||||
{!isApp && <SecretKeyButton appId={appInfo.id} />}
|
||||
{OPERATIONS_MAP[cardType].map((op) => {
|
||||
const disabled
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user