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

fix: run eslint-plugin-tailwindcss

Browse Source
pull/13892/head
NFish 1 year ago
parent 13d3430948
commit 52cfe80dcd
922 changed files with 5647 additions and 5647 deletions
Show Stats Download Patch File Download Diff File

4
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
Unescape Escape View File

@ -156,14 +156,14 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
if (!appDetail) {
return (
<div className='flex h-full items-center justify-center bg-background-body'>
<div className='bg-background-body flex h-full items-center justify-center'>
<Loading />
</div>
)
}
return (
<div className={cn(s.app, 'flex relative', 'overflow-hidden')}>
<div className={cn(s.app, 'relative flex', 'overflow-hidden')}>
{appDetail && (
<AppSideBar title={appDetail.name} icon={appDetail.icon} icon_background={appDetail.icon_background as string} desc={appDetail.mode} navigation={navigation} />
)}

2
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx
Unescape Escape View File

@ -122,7 +122,7 @@ const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
return <Loading />
return (
<div className={className || 'grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'}>
<div className={className || 'mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'}>
<AppCard
appInfo={appDetail}
cardType="webapp"

14
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
Unescape Escape View File

@ -46,7 +46,7 @@ export default function ChartView({ appId }: IChartViewProps) {
return (
<div>
<div className='flex flex-row items-center mt-8 mb-4 system-xl-semibold text-text-primary'>
<div className='system-xl-semibold text-text-primary mb-4 mt-8 flex flex-row items-center'>
<span className='mr-3'>{t('appOverview.analysis.title')}</span>
<SimpleSelect
items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
@ -61,13 +61,13 @@ export default function ChartView({ appId }: IChartViewProps) {
/>
</div>
{!isWorkflow && (
<div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
<div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
<ConversationsChart period={period} id={appId} />
<EndUsersChart period={period} id={appId} />
</div>
)}
{!isWorkflow && (
<div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
<div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
{isChatApp
? (
<AvgSessionInteractions period={period} id={appId} />
@ -79,24 +79,24 @@ export default function ChartView({ appId }: IChartViewProps) {
</div>
)}
{!isWorkflow && (
<div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
<div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
<UserSatisfactionRate period={period} id={appId} />
<CostChart period={period} id={appId} />
</div>
)}
{!isWorkflow && isChatApp && (
<div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
<div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
<MessagesChart period={period} id={appId} />
</div>
)}
{isWorkflow && (
<div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
<div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
<WorkflowMessagesChart period={period} id={appId} />
<WorkflowDailyTerminalsChart period={period} id={appId} />
</div>
)}
{isWorkflow && (
<div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
<div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
<WorkflowCostChart period={period} id={appId} />
<AvgUserInteractions period={period} id={appId} />
</div>

2
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx
Unescape Escape View File

@ -13,7 +13,7 @@ const Overview = async ({
}: IDevelopProps) => {
const { appId } = await params
return (
<div className="h-full px-4 sm:px-12 py-6 overflow-scroll bg-chatbot-bg">
<div className="bg-chatbot-bg h-full overflow-scroll px-4 py-6 sm:px-12">
<ApikeyInfoPanel />
<TracingPanel />
<CardView appId={appId} />

4
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
Unescape Escape View File

@ -58,8 +58,8 @@ const ConfigBtn: FC<Props> = ({
}}
>
<PortalToFollowElemTrigger onClick={handleTrigger}>
<div className={cn(className, 'p-1 rounded-md')}>
<RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
<div className={cn(className, 'rounded-md p-1')}>
<RiEqualizer2Line className='text-text-tertiary h-4 w-4' />
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[11]'>

10
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
Unescape Escape View File

@ -162,15 +162,15 @@ const ConfigPopup: FC<PopupProps> = ({
}
return (
<div className='w-[420px] p-4 rounded-2xl bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl'>
<div className='flex justify-between items-center'>
<div className='bg-components-panel-bg border-components-panel-border w-[420px] rounded-2xl border-[0.5px] p-4 shadow-xl'>
<div className='flex items-center justify-between'>
<div className='flex items-center'>
<TracingIcon size='md' className='mr-2' />
<div className='text-text-primary title-2xl-semibold'>{t(`${I18N_PREFIX}.tracing`)}</div>
</div>
<div className='flex items-center'>
<Indicator color={enabled ? 'green' : 'gray'} />
<div className={cn('ml-1 system-xs-semibold-uppercase text-text-tertiary', enabled && 'text-util-colors-green-green-600')}>
<div className={cn('system-xs-semibold-uppercase text-text-tertiary ml-1', enabled && 'text-util-colors-green-green-600')}>
{t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
</div>
{!readOnly && (
@ -189,7 +189,7 @@ const ConfigPopup: FC<PopupProps> = ({
</div>
</div>
<div className='mt-2 system-xs-regular text-text-tertiary'>
<div className='system-xs-regular text-text-tertiary mt-2'>
{t(`${I18N_PREFIX}.tracingDescription`)}
</div>
<Divider className='my-3' />
@ -211,7 +211,7 @@ const ConfigPopup: FC<PopupProps> = ({
<div className='mt-2 space-y-2'>
{configuredProviderPanel()}
</div>
<div className='mt-3 system-xs-medium-uppercase text-text-tertiary'>{t(`${I18N_PREFIX}.configProviderTitle.moreProvider`)}</div>
<div className='system-xs-medium-uppercase text-text-tertiary mt-3'>{t(`${I18N_PREFIX}.configProviderTitle.moreProvider`)}</div>
<div className='mt-2 space-y-2'>
{moreProviderPanel()}
</div>

2
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
Unescape Escape View File

@ -26,7 +26,7 @@ const Field: FC<Props> = ({
return (
<div className={cn(className)}>
<div className='flex py-[7px]'>
<div className={cn(labelClassName, 'flex items-center h-[18px] text-[13px] font-medium text-text-primary')}>{label} </div>
<div className={cn(labelClassName, 'text-text-primary flex h-[18px] items-center text-[13px] font-medium')}>{label} </div>
{isRequired && <span className='ml-0.5 text-xs font-semibold text-[#D92D20]'>*</span>}
</div>
<Input

16
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
Unescape Escape View File

@ -31,7 +31,7 @@ const Title = ({
const { t } = useTranslation()
return (
<div className={cn('flex items-center system-xl-semibold text-text-primary', className)}>
<div className={cn('system-xl-semibold text-text-primary flex items-center', className)}>
{t('common.appMenus.overview')}
</div>
)
@ -141,7 +141,7 @@ const Panel: FC = () => {
}, [setControlShowPopup])
if (!isLoaded) {
return (
<div className='flex items-center justify-between mb-3'>
<div className='mb-3 flex items-center justify-between'>
<Title className='h-[41px]' />
<div className='w-[200px]'>
<Loading />
@ -151,11 +151,11 @@ const Panel: FC = () => {
}
return (
<div className={cn('mb-3 flex justify-between items-center')}>
<div className={cn('mb-3 flex items-center justify-between')}>
<Title className='h-[41px]' />
<div
className={cn(
'flex items-center p-2 rounded-xl bg-background-default-dodge border-t border-l-[0.5px] border-effects-highlight shadow-xs cursor-pointer hover:bg-background-default-lighter hover:border-effects-highlight-lightmode-off',
'bg-background-default-dodge border-effects-highlight shadow-xs hover:bg-background-default-lighter hover:border-effects-highlight-lightmode-off flex cursor-pointer items-center rounded-xl border-l-[0.5px] border-t p-2',
controlShowPopup && 'bg-background-default-lighter border-effects-highlight-lightmode-off',
)}
onClick={showPopup}
@ -163,7 +163,7 @@ const Panel: FC = () => {
{!inUseTracingProvider && (
<>
<TracingIcon size='md' />
<div className='mx-2 system-sm-semibold text-text-secondary'>{t(`${I18N_PREFIX}.title`)}</div>
<div className='system-sm-semibold text-text-secondary mx-2'>{t(`${I18N_PREFIX}.title`)}</div>
<div className='flex items-center' onClick={e => e.stopPropagation()}>
<ConfigButton
appId={appId}
@ -182,8 +182,8 @@ const Panel: FC = () => {
/>
</div>
<Divider type='vertical' className='h-3.5' />
<div className='p-1 rounded-md'>
<RiArrowDownDoubleLine className='w-4 h-4 text-text-tertiary' />
<div className='rounded-md p-1'>
<RiArrowDownDoubleLine className='text-text-tertiary h-4 w-4' />
</div>
</>
)}
@ -191,7 +191,7 @@ const Panel: FC = () => {
<>
<div className='ml-4 mr-1 flex items-center'>
<Indicator color={enabled ? 'green' : 'gray'} />
<div className='ml-1.5 system-xs-semibold-uppercase text-text-tertiary'>
<div className='system-xs-semibold-uppercase text-text-tertiary ml-1.5'>
{t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
</div>
</div>

24
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
Unescape Escape View File

@ -167,11 +167,11 @@ const ProviderConfigModal: FC<Props> = ({
{!isShowRemoveConfirm
? (
<PortalToFollowElem open>
<PortalToFollowElemContent className='w-full h-full z-[60]'>
<div className='fixed inset-0 flex items-center justify-center bg-background-overlay'>
<div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-components-panel-bg shadow-xl rounded-2xl overflow-y-auto'>
<PortalToFollowElemContent className='z-[60] h-full w-full'>
<div className='bg-background-overlay fixed inset-0 flex items-center justify-center'>
<div className='bg-components-panel-bg mx-2 max-h-[calc(100vh-120px)] w-[640px] overflow-y-auto rounded-2xl shadow-xl'>
<div className='px-8 pt-8'>
<div className='flex justify-between items-center mb-4'>
<div className='mb-4 flex items-center justify-between'>
<div className='title-2xl-semibold text-text-primary'>{t(`${I18N_PREFIX}.title`)}{t(`app.tracing.${type}.title`)}</div>
</div>
@ -265,20 +265,20 @@ const ProviderConfigModal: FC<Props> = ({
)}
</div>
<div className='my-8 flex justify-between items-center h-8'>
<div className='my-8 flex h-8 items-center justify-between'>
<a
className='flex items-center space-x-1 leading-[18px] text-xs font-normal text-[#155EEF]'
className='flex items-center space-x-1 text-xs font-normal leading-[18px] text-[#155EEF]'
target='_blank'
href={docURL[type]}
>
<span>{t(`${I18N_PREFIX}.viewDocsLink`, { key: t(`app.tracing.${type}.title`) })}</span>
<LinkExternal02 className='w-3 h-3' />
<LinkExternal02 className='h-3 w-3' />
</a>
<div className='flex items-center'>
{isEdit && (
<>
<Button
className='h-9 text-sm font-medium text-text-secondary'
className='text-text-secondary h-9 text-sm font-medium'
onClick={showRemoveConfirm}
>
<span className='text-[#D92D20]'>{t('common.operation.remove')}</span>
@ -287,7 +287,7 @@ const ProviderConfigModal: FC<Props> = ({
</>
)}
<Button
className='mr-2 h-9 text-sm font-medium text-text-secondary'
className='text-text-secondary mr-2 h-9 text-sm font-medium'
onClick={onCancel}
>
{t('common.operation.cancel')}
@ -304,9 +304,9 @@ const ProviderConfigModal: FC<Props> = ({
</div>
</div>
<div className='border-t-[0.5px] border-divider-regular'>
<div className='flex justify-center items-center py-3 bg-background-section-burn text-xs text-text-tertiary'>
<Lock01 className='mr-1 w-3 h-3 text-text-tertiary' />
<div className='border-divider-regular border-t-[0.5px]'>
<div className='bg-background-section-burn text-text-tertiary flex items-center justify-center py-3 text-xs'>
<Lock01 className='text-text-tertiary mr-1 h-3 w-3' />
{t('common.modelProvider.encrypted.front')}
<a
className='text-primary-600 mx-1'

18
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
Unescape Escape View File

@ -65,36 +65,36 @@ const ProviderPanel: FC<Props> = ({
return (
<div
className={cn(
'px-4 py-3 rounded-xl border-[1.5px] bg-background-section-burn',
'bg-background-section-burn rounded-xl border-[1.5px] px-4 py-3',
isChosen ? 'bg-background-section border-components-option-card-option-selected-border' : 'border-transparent',
!isChosen && hasConfigured && !readOnly && 'cursor-pointer',
)}
onClick={handleChosen}
>
<div className={'flex justify-between items-center space-x-1'}>
<div className={'flex items-center justify-between space-x-1'}>
<div className='flex items-center'>
<Icon className='h-6' />
{isChosen && <div className='ml-1 flex items-center h-4 px-1 rounded-[4px] border border-text-accent-secondary system-2xs-medium-uppercase text-text-accent-secondary'>{t(`${I18N_PREFIX}.inUse`)}</div>}
{isChosen && <div className='border-text-accent-secondary system-2xs-medium-uppercase text-text-accent-secondary ml-1 flex h-4 items-center rounded-[4px] border px-1'>{t(`${I18N_PREFIX}.inUse`)}</div>}
</div>
{!readOnly && (
<div className={'flex justify-between items-center space-x-1'}>
<div className={'flex items-center justify-between space-x-1'}>
{hasConfigured && (
<div className='flex px-2 items-center h-6 bg-components-button-secondary-bg rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs cursor-pointer text-text-secondary space-x-1' onClick={viewBtnClick} >
<View className='w-3 h-3' />
<div className='bg-components-button-secondary-bg border-components-button-secondary-border shadow-xs text-text-secondary flex h-6 cursor-pointer items-center space-x-1 rounded-md border-[0.5px] px-2' onClick={viewBtnClick} >
<View className='h-3 w-3' />
<div className='text-xs font-medium'>{t(`${I18N_PREFIX}.view`)}</div>
</div>
)}
<div
className='flex px-2 items-center h-6 bg-components-button-secondary-bg rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs cursor-pointer text-text-secondary space-x-1'
className='bg-components-button-secondary-bg border-components-button-secondary-border shadow-xs text-text-secondary flex h-6 cursor-pointer items-center space-x-1 rounded-md border-[0.5px] px-2'
onClick={handleConfigBtnClick}
>
<RiEqualizer2Line className='w-3 h-3' />
<RiEqualizer2Line className='h-3 w-3' />
<div className='text-xs font-medium'>{t(`${I18N_PREFIX}.config`)}</div>
</div>
</div>
)}
</div>
<div className='mt-2 system-xs-regular text-text-tertiary'>
<div className='system-xs-regular text-text-tertiary mt-2'>
{t(`${I18N_PREFIX}.${type}.description`)}
</div>
</div>

2
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
Unescape Escape View File

@ -21,7 +21,7 @@ const TracingIcon: FC<Props> = ({
const sizeClass = sizeClassMap[size]
return (
<div className={cn(className, sizeClass, 'bg-primary-500 shadow-md')}>
<Icon className='w-full h-full' />
<Icon className='h-full w-full' />
</div>
)
}

2
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx
Unescape Escape View File

@ -4,7 +4,7 @@ import Workflow from '@/app/components/workflow'
const Page = () => {
return (
<div className='w-full h-full overflow-x-auto'>
<div className='h-full w-full overflow-x-auto'>
<Workflow />
</div>
)

36
web/app/(commonLayout)/apps/AppCard.tsx
Unescape Escape View File

@ -241,10 +241,10 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
<>
<Divider className="!my-1" />
<div
className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer'
className='mx-1 flex h-9 cursor-pointer items-center rounded-lg px-3 py-2 hover:bg-gray-50'
onClick={onClickSwitch}
>
<span className='text-gray-700 text-sm leading-5'>{t('app.switch')}</span>
<span className='text-sm leading-5 text-gray-700'>{t('app.switch')}</span>
</div>
</>
)}
@ -277,9 +277,9 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
e.preventDefault()
getRedirection(isCurrentWorkspaceEditor, app, push)
}}
className='relative h-[160px] group col-span-1 bg-components-card-bg border-[1px] border-solid border-components-card-border rounded-xl shadow-sm inline-flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'
className='bg-components-card-bg border-components-card-border group relative col-span-1 inline-flex h-[160px] cursor-pointer flex-col rounded-xl border-[1px] border-solid shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg'
>
<div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
<div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
<div className='relative shrink-0'>
<AppIcon
size="large"
@ -288,13 +288,13 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
background={app.icon_background}
imageUrl={app.icon_url}
/>
<AppTypeIcon type={app.mode} wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm' className='w-3 h-3' />
<AppTypeIcon type={app.mode} wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm' className='h-3 w-3' />
</div>
<div className='grow w-0 py-[1px]'>
<div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'>
<div className='w-0 grow py-[1px]'>
<div className='text-text-secondary flex items-center text-sm font-semibold leading-5'>
<div className='truncate' title={app.name}>{app.name}</div>
</div>
<div className='flex items-center text-[10px] leading-[18px] text-text-tertiary font-medium'>
<div className='text-text-tertiary flex items-center text-[10px] font-medium leading-[18px]'>
{app.mode === 'advanced-chat' && <div className='truncate'>{t('app.types.advanced').toUpperCase()}</div>}
{app.mode === 'chat' && <div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>}
{app.mode === 'agent-chat' && <div className='truncate'>{t('app.types.agent').toUpperCase()}</div>}
@ -303,7 +303,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
</div>
</div>
</div>
<div className='title-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary'>
<div className='title-wrapper text-text-tertiary h-[90px] px-[14px] text-xs leading-normal'>
<div
className={cn(tags.length ? 'line-clamp-2' : 'line-clamp-4', 'group-hover:line-clamp-2')}
title={app.description}
@ -312,17 +312,17 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
</div>
</div>
<div className={cn(
'absolute bottom-1 left-0 right-0 items-center shrink-0 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]',
'absolute bottom-1 left-0 right-0 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
tags.length ? 'flex' : '!hidden group-hover:!flex',
)}>
{isCurrentWorkspaceEditor && (
<>
<div className={cn('grow flex items-center gap-1 w-0')} onClick={(e) => {
<div className={cn('flex w-0 grow items-center gap-1')} onClick={(e) => {
e.stopPropagation()
e.preventDefault()
}}>
<div className={cn(
'group-hover:!block group-hover:!mr-0 mr-[41px] grow w-full',
'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
tags.length ? '!block' : '!hidden',
)}>
<TagSelector
@ -336,23 +336,23 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
/>
</div>
</div>
<div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px]' />
<div className='!hidden group-hover:!flex shrink-0'>
<div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 group-hover:!flex' />
<div className='!hidden shrink-0 group-hover:!flex'>
<CustomPopover
htmlContent={<Operations />}
position="br"
trigger="click"
btnElement={
<div
className='flex items-center justify-center w-8 h-8 cursor-pointer rounded-md'
className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-md'
>
<RiMoreFill className='w-4 h-4 text-text-tertiary' />
<RiMoreFill className='text-text-tertiary h-4 w-4' />
</div>
}
btnClassName={open =>
cn(
open ? '!bg-black/5 !shadow-none' : '!bg-transparent',
'h-8 w-8 !p-2 rounded-md border-none hover:!bg-black/5',
'h-8 w-8 rounded-md border-none !p-2 hover:!bg-black/5',
)
}
popupClassName={
@ -360,7 +360,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
? '!w-[256px] translate-x-[-224px]'
: '!w-[160px] translate-x-[-128px]'
}
className={'h-fit !z-20'}
className={'!z-20 h-fit'}
/>
</div>
</>

18
web/app/(commonLayout)/apps/Apps.tsx
Unescape Escape View File

@ -78,10 +78,10 @@ const Apps = () => {
const anchorRef = useRef<HTMLDivElement>(null)
const options = [
{ value: 'all', text: t('app.types.all'), icon: <RiApps2Line className='w-[14px] h-[14px] mr-1' /> },
{ value: 'chat', text: t('app.types.chatbot'), icon: <RiMessage3Line className='w-[14px] h-[14px] mr-1' /> },
{ value: 'agent-chat', text: t('app.types.agent'), icon: <RiRobot3Line className='w-[14px] h-[14px] mr-1' /> },
{ value: 'workflow', text: t('app.types.workflow'), icon: <RiExchange2Line className='w-[14px] h-[14px] mr-1' /> },
{ value: 'all', text: t('app.types.all'), icon: <RiApps2Line className='mr-1 h-[14px] w-[14px]' /> },
{ value: 'chat', text: t('app.types.chatbot'), icon: <RiMessage3Line className='mr-1 h-[14px] w-[14px]' /> },
{ value: 'agent-chat', text: t('app.types.agent'), icon: <RiRobot3Line className='mr-1 h-[14px] w-[14px]' /> },
{ value: 'workflow', text: t('app.types.workflow'), icon: <RiExchange2Line className='mr-1 h-[14px] w-[14px]' /> },
]
useEffect(() => {
@ -128,7 +128,7 @@ const Apps = () => {
return (
<>
<div className='sticky top-0 flex justify-between items-center pt-4 px-12 pb-2 leading-[56px] bg-background-body z-10 flex-wrap gap-y-2'>
<div className='bg-background-body sticky top-0 z-10 flex flex-wrap items-center justify-between gap-y-2 px-12 pb-2 pt-4 leading-[56px]'>
<TabSliderNew
value={activeTab}
onChange={setActiveTab}
@ -153,14 +153,14 @@ const Apps = () => {
</div>
</div>
{(data && data[0].total > 0)
? <div className='grid content-start grid-cols-1 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6 gap-4 px-12 pt-2 grow relative'>
? <div className='2k:grid-cols-6 relative grid grow grid-cols-1 content-start gap-4 px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5'>
{isCurrentWorkspaceEditor
&& <NewAppCard onSuccess={mutate} />}
{data.map(({ data: apps }) => apps.map(app => (
<AppCard key={app.id} app={app} onRefresh={mutate} />
)))}
</div>
: <div className='grid content-start grid-cols-1 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6 gap-4 px-12 pt-2 grow relative overflow-hidden'>
: <div className='2k:grid-cols-6 relative grid grow grid-cols-1 content-start gap-4 overflow-hidden px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5'>
{isCurrentWorkspaceEditor
&& <NewAppCard className='z-10' onSuccess={mutate} />}
<NoAppsFound />
@ -180,14 +180,14 @@ function NoAppsFound() {
const { t } = useTranslation()
function renderDefaultCard() {
const defaultCards = Array.from({ length: 36 }, (_, index) => (
<div key={index} className='h-[160px] inline-flex rounded-xl bg-background-default-lighter'></div>
<div key={index} className='bg-background-default-lighter inline-flex h-[160px] rounded-xl'></div>
))
return defaultCards
}
return (
<>
{renderDefaultCard()}
<div className='absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-gradient-to-t from-background-body to-transparent'>
<div className='from-background-body absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center bg-gradient-to-t to-transparent'>
<span className='system-md-medium text-text-tertiary'>{t('app.newApp.noAppsFound')}</span>
</div>
</>

18
web/app/(commonLayout)/apps/NewAppCard.tsx
Unescape Escape View File

@ -47,22 +47,22 @@ const CreateAppCard = (
return (
<div
ref={ref}
className={cn('relative col-span-1 inline-flex flex-col justify-between h-[160px] bg-components-card-bg rounded-xl border-[0.5px] border-components-card-border', className)}
className={cn('bg-components-card-bg border-components-card-border relative col-span-1 inline-flex h-[160px] flex-col justify-between rounded-xl border-[0.5px]', className)}
>
<div className='grow p-2 rounded-t-xl'>
<div className='px-6 pt-2 pb-1 text-xs font-medium leading-[18px] text-text-tertiary'>{t('app.createApp')}</div>
<button className='w-full flex items-center mb-1 px-6 py-[7px] rounded-lg text-[13px] font-medium leading-[18px] text-text-tertiary cursor-pointer hover:text-text-secondary hover:bg-state-base-hover' onClick={() => setShowNewAppModal(true)}>
<FilePlus01 className='shrink-0 mr-2 w-4 h-4' />
<div className='grow rounded-t-xl p-2'>
<div className='text-text-tertiary px-6 pb-1 pt-2 text-xs font-medium leading-[18px]'>{t('app.createApp')}</div>
<button className='text-text-tertiary hover:text-text-secondary hover:bg-state-base-hover mb-1 flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px]' onClick={() => setShowNewAppModal(true)}>
<FilePlus01 className='mr-2 h-4 w-4 shrink-0' />
{t('app.newApp.startFromBlank')}
</button>
<button className='w-full flex items-center px-6 py-[7px] rounded-lg text-[13px] font-medium leading-[18px] text-text-tertiary cursor-pointer hover:text-text-secondary hover:bg-state-base-hover' onClick={() => setShowNewAppTemplateDialog(true)}>
<FilePlus02 className='shrink-0 mr-2 w-4 h-4' />
<button className='text-text-tertiary hover:text-text-secondary hover:bg-state-base-hover flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px]' onClick={() => setShowNewAppTemplateDialog(true)}>
<FilePlus02 className='mr-2 h-4 w-4 shrink-0' />
{t('app.newApp.startFromTemplate')}
</button>
<button
onClick={() => setShowCreateFromDSLModal(true)}
className='w-full flex items-center px-6 py-[7px] rounded-lg text-[13px] font-medium leading-[18px] text-text-tertiary cursor-pointer hover:text-text-secondary hover:bg-state-base-hover'>
<FileArrow01 className='shrink-0 mr-2 w-4 h-4' />
className='text-text-tertiary hover:text-text-secondary hover:bg-state-base-hover flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px]'>
<FileArrow01 className='mr-2 h-4 w-4 shrink-0' />
{t('app.importDSL')}
</button>
</div>

14
web/app/(commonLayout)/apps/page.tsx
Unescape Escape View File

@ -13,17 +13,17 @@ const AppList = () => {
const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
return (
<div className='relative flex flex-col overflow-y-auto bg-background-body shrink-0 h-0 grow'>
<div className='bg-background-body relative flex h-0 shrink-0 grow flex-col overflow-y-auto'>
<Apps />
{systemFeatures.license.status === LicenseStatus.NONE && <footer className='px-12 py-6 grow-0 shrink-0'>
<h3 className='text-xl font-semibold leading-tight text-gradient'>{t('app.join')}</h3>
<p className='mt-1 system-sm-regular text-text-tertiary'>{t('app.communityIntro')}</p>
<div className='flex items-center gap-2 mt-3'>
{systemFeatures.license.status === LicenseStatus.NONE && <footer className='shrink-0 grow-0 px-12 py-6'>
<h3 className='text-gradient text-xl font-semibold leading-tight'>{t('app.join')}</h3>
<p className='system-sm-regular text-text-tertiary mt-1'>{t('app.communityIntro')}</p>
<div className='mt-3 flex items-center gap-2'>
<Link className={style.socialMediaLink} target='_blank' rel='noopener noreferrer' href='https://github.com/langgenius/dify'>
<RiGithubFill className='w-5 h-5 text-text-tertiary' />
<RiGithubFill className='text-text-tertiary h-5 w-5' />
</Link>
<Link className={style.socialMediaLink} target='_blank' rel='noopener noreferrer' href='https://discord.gg/FngNHpbcY7'>
<RiDiscordFill className='w-5 h-5 text-text-tertiary' />
<RiDiscordFill className='text-text-tertiary h-5 w-5' />
</Link>
</div>
</footer>}

16
web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
Unescape Escape View File

@ -98,7 +98,7 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
/>
}
>
<div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 text-text-secondary'>
<div className='system-xs-medium-uppercase text-text-secondary inline-flex cursor-pointer items-center space-x-1'>
<span>{relatedAppsTotal || '--'} {t('common.datasetMenus.relatedApp')}</span>
<RiInformation2Line className='h-4 w-4' />
</div>
@ -117,13 +117,13 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
noDecoration
needsDelay
popupContent={
<div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4'>
<div className='inline-flex rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle p-2'>
<RiApps2AddLine className='h-4 w-4 text-text-tertiary' />
<div className='border-components-panel-border bg-components-panel-bg-blur w-[240px] rounded-xl border-[0.5px] p-4'>
<div className='border-components-panel-border-subtle bg-background-default-subtle inline-flex rounded-lg border-[0.5px] p-2'>
<RiApps2AddLine className='text-text-tertiary h-4 w-4' />
</div>
<div className='my-2 text-xs text-text-tertiary'>{t('common.datasetMenus.emptyTip')}</div>
<div className='text-text-tertiary my-2 text-xs'>{t('common.datasetMenus.emptyTip')}</div>
<a
className='mt-2 inline-flex cursor-pointer items-center text-xs text-text-accent'
className='text-text-accent mt-2 inline-flex cursor-pointer items-center text-xs'
href={
locale === LanguagesSupported[1]
? 'https://docs.dify.ai/v/zh-hans/guides/knowledge-base/integrate-knowledge-within-application'
@ -137,7 +137,7 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
</div>
}
>
<div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 text-text-secondary'>
<div className='system-xs-medium-uppercase text-text-secondary inline-flex cursor-pointer items-center space-x-1'>
<span>{t('common.datasetMenus.noRelatedApp')}</span>
<RiInformation2Line className='h-4 w-4' />
</div>
@ -220,7 +220,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
dataset: datasetRes,
mutateDatasetRes: () => mutateDatasetRes(),
}}>
<div className="grow overflow-hidden bg-background-default-subtle">{children}</div>
<div className="bg-background-default-subtle grow overflow-hidden">{children}</div>
</DatasetDetailContext.Provider>
</div>
)

2
web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx
Unescape Escape View File

@ -9,7 +9,7 @@ const Settings = async () => {
return (
<div className='h-full overflow-y-auto'>
<div className='px-6 py-3'>
<div className='mb-1 system-xl-semibold text-text-primary'>{t('title')}</div>
<div className='system-xl-semibold text-text-primary mb-1'>{t('title')}</div>
<div className='system-sm-regular text-text-tertiary'>{t('desc')}</div>
</div>
<Form />

16
web/app/(commonLayout)/datasets/ApiServer.tsx
Unescape Escape View File

@ -15,22 +15,22 @@ const ApiServer: FC<ApiServerProps> = ({
const { t } = useTranslation()
return (
<div className='flex items-center flex-wrap gap-y-2'>
<div className='flex items-center mr-2 pl-1.5 pr-1 h-8 bg-white/80 border-[0.5px] border-white rounded-lg leading-5'>
<div className='mr-0.5 px-1.5 h-5 border border-gray-200 text-[11px] text-gray-500 rounded-md shrink-0'>{t('appApi.apiServer')}</div>
<div className='px-1 truncate w-fit sm:w-[248px] text-[13px] font-medium text-gray-800'>{apiBaseUrl}</div>
<div className='mx-1 w-[1px] h-[14px] bg-gray-200'></div>
<div className='flex flex-wrap items-center gap-y-2'>
<div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-white bg-white/80 pl-1.5 pr-1 leading-5'>
<div className='mr-0.5 h-5 shrink-0 rounded-md border border-gray-200 px-1.5 text-[11px] text-gray-500'>{t('appApi.apiServer')}</div>
<div className='w-fit truncate px-1 text-[13px] font-medium text-gray-800 sm:w-[248px]'>{apiBaseUrl}</div>
<div className='mx-1 h-[14px] w-[1px] bg-gray-200'></div>
<CopyFeedback
content={apiBaseUrl}
selectorId={randomString(8)}
className={'!w-6 !h-6 hover:bg-gray-200'}
className={'!h-6 !w-6 hover:bg-gray-200'}
/>
</div>
<div className='flex items-center mr-2 px-3 h-8 bg-[#ECFDF3] text-xs font-semibold text-[#039855] rounded-lg border-[0.5px] border-[#D1FADF]'>
<div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-[#D1FADF] bg-[#ECFDF3] px-3 text-xs font-semibold text-[#039855]'>
{t('appApi.ok')}
</div>
<SecretKeyButton
className='shrink-0 !h-8 bg-white'
className='!h-8 shrink-0 bg-white'
/>
</div>
)

12
web/app/(commonLayout)/datasets/Container.tsx
Unescape Escape View File

@ -82,8 +82,8 @@ const Container = () => {
}, [currentWorkspace, router])
return (
<div ref={containerRef} className='grow relative flex flex-col bg-background-body overflow-y-auto scroll-container'>
<div className='sticky top-0 flex justify-between pt-4 px-12 pb-2 leading-[56px] bg-background-body z-10 flex-wrap gap-y-2'>
<div ref={containerRef} className='bg-background-body scroll-container relative flex grow flex-col overflow-y-auto'>
<div className='bg-background-body sticky top-0 z-10 flex flex-wrap justify-between gap-y-2 px-12 pb-2 pt-4 leading-[56px]'>
<TabSliderNew
value={activeTab}
onChange={newActiveTab => setActiveTab(newActiveTab)}
@ -108,13 +108,13 @@ const Container = () => {
onChange={e => handleKeywordsChange(e.target.value)}
onClear={() => handleKeywordsChange('')}
/>
<div className="w-[1px] h-4 bg-divider-regular" />
<div className="bg-divider-regular h-4 w-[1px]" />
<Button
className='gap-0.5 shadows-shadow-xs'
className='shadows-shadow-xs gap-0.5'
onClick={() => setShowExternalApiPanel(true)}
>
<ApiConnectionMod className='w-4 h-4 text-components-button-secondary-text' />
<div className='flex px-0.5 justify-center items-center gap-1 text-components-button-secondary-text system-sm-medium'>{t('dataset.externalAPIPanelTitle')}</div>
<ApiConnectionMod className='text-components-button-secondary-text h-4 w-4' />
<div className='text-components-button-secondary-text system-sm-medium flex items-center justify-center gap-1 px-0.5'>{t('dataset.externalAPIPanelTitle')}</div>
</Button>
</div>
)}

50
web/app/(commonLayout)/datasets/DatasetCard.tsx
Unescape Escape View File

@ -84,17 +84,17 @@ const DatasetCard = ({
}
return (
<div className="relative w-full py-1" onMouseLeave={onMouseLeave}>
<div className='h-8 py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer' onClick={onClickRename}>
<span className='text-gray-700 text-sm'>{t('common.operation.settings')}</span>
<div className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-gray-100' onClick={onClickRename}>
<span className='text-sm text-gray-700'>{t('common.operation.settings')}</span>
</div>
{props.showDelete && (
<>
<Divider className="!my-1" />
<div
className='group h-8 py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-red-50 rounded-lg cursor-pointer'
className='group mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-red-50'
onClick={onClickDelete}
>
<span className={cn('text-gray-700 text-sm', 'group-hover:text-red-500')}>
<span className={cn('text-sm text-gray-700', 'group-hover:text-red-500')}>
{t('common.operation.delete')}
</span>
</div>
@ -111,7 +111,7 @@ const DatasetCard = ({
return (
<>
<div
className='group relative col-span-1 bg-components-card-bg border-[0.5px] border-solid border-components-card-border rounded-xl shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'
className='bg-components-card-bg border-components-card-border group relative col-span-1 flex min-h-[160px] cursor-pointer flex-col rounded-xl border-[0.5px] border-solid shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg'
data-disable-nprogress={true}
onClick={(e) => {
e.preventDefault()
@ -121,25 +121,25 @@ const DatasetCard = ({
}}
>
{isExternalProvider(dataset.provider) && <CornerLabel label='External' className='absolute right-0' labelClassName='rounded-tr-xl' />}
<div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
<div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
<div className={cn(
'shrink-0 flex items-center justify-center p-2.5 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#E0EAFF]',
'flex shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF] p-2.5',
!dataset.embedding_available && 'opacity-50 hover:opacity-100',
)}>
<Folder className='w-5 h-5 text-[#444CE7]' />
<Folder className='h-5 w-5 text-[#444CE7]' />
</div>
<div className='grow w-0 py-[1px]'>
<div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'>
<div className={cn('truncate', !dataset.embedding_available && 'opacity-50 hover:opacity-100 text-text-tertiary')} title={dataset.name}>{dataset.name}</div>
<div className='w-0 grow py-[1px]'>
<div className='text-text-secondary flex items-center text-sm font-semibold leading-5'>
<div className={cn('truncate', !dataset.embedding_available && 'text-text-tertiary opacity-50 hover:opacity-100')} title={dataset.name}>{dataset.name}</div>
{!dataset.embedding_available && (
<Tooltip
popupContent={t('dataset.unavailableTip')}
>
<span className='shrink-0 inline-flex w-max ml-1 px-1 border border-gray-200 rounded-md text-gray-500 text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
<span className='ml-1 inline-flex w-max shrink-0 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='flex items-center mt-[1px] text-xs leading-[18px] text-text-tertiary'>
<div className='text-text-tertiary mt-[1px] flex items-center text-xs leading-[18px]'>
<div
className={cn('truncate', (!dataset.embedding_available || !dataset.document_count) && 'opacity-50')}
title={dataset.provider === 'external' ? `${dataset.app_count}${t('dataset.appCount')}` : `${dataset.document_count}${t('dataset.documentCount')} · ${Math.round(dataset.word_count / 1000)}${t('dataset.wordCount')} · ${dataset.app_count}${t('dataset.appCount')}`}
@ -150,9 +150,9 @@ const DatasetCard = ({
</>
: <>
<span>{dataset.document_count}{t('dataset.documentCount')}</span>
<span className='shrink-0 mx-0.5 w-1 text-gray-400'>·</span>
<span className='mx-0.5 w-1 shrink-0 text-gray-400'>·</span>
<span>{Math.round(dataset.word_count / 1000)}{t('dataset.wordCount')}</span>
<span className='shrink-0 mx-0.5 w-1 text-gray-400'>·</span>
<span className='mx-0.5 w-1 shrink-0 text-gray-400'>·</span>
<span>{dataset.app_count}{t('dataset.appCount')}</span>
</>
}
@ -162,7 +162,7 @@ const DatasetCard = ({
</div>
<div
className={cn(
'grow mb-2 px-[14px] max-h-[72px] text-xs leading-normal text-text-tertiary group-hover:line-clamp-2 group-hover:max-h-[36px]',
'text-text-tertiary mb-2 max-h-[72px] grow px-[14px] text-xs leading-normal group-hover:line-clamp-2 group-hover:max-h-[36px]',
tags.length ? 'line-clamp-2' : 'line-clamp-4',
!dataset.embedding_available && 'opacity-50 hover:opacity-100',
)}
@ -170,15 +170,15 @@ const DatasetCard = ({
{dataset.description}
</div>
<div className={cn(
'items-center shrink-0 mt-1 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]',
'mt-1 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
tags.length ? 'flex' : '!hidden group-hover:!flex',
)}>
<div className={cn('grow flex items-center gap-1 w-0', !dataset.embedding_available && 'opacity-50 hover:opacity-100')} onClick={(e) => {
<div className={cn('flex w-0 grow items-center gap-1', !dataset.embedding_available && 'opacity-50 hover:opacity-100')} onClick={(e) => {
e.stopPropagation()
e.preventDefault()
}}>
<div className={cn(
'group-hover:!block group-hover:!mr-0 mr-[41px] grow w-full',
'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
tags.length ? '!block' : '!hidden',
)}>
<TagSelector
@ -192,26 +192,26 @@ const DatasetCard = ({
/>
</div>
</div>
<div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px] bg-gray-200' />
<div className='!hidden group-hover:!flex shrink-0'>
<div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 bg-gray-200 group-hover:!flex' />
<div className='!hidden shrink-0 group-hover:!flex'>
<CustomPopover
htmlContent={<Operations showDelete={!isCurrentWorkspaceDatasetOperator} />}
position="br"
trigger="click"
btnElement={
<div
className='flex items-center justify-center w-8 h-8 cursor-pointer rounded-md'
className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-md'
>
<RiMoreFill className='w-4 h-4 text-gray-700' />
<RiMoreFill className='h-4 w-4 text-gray-700' />
</div>
}
btnClassName={open =>
cn(
open ? '!bg-black/5 !shadow-none' : '!bg-transparent',
'h-8 w-8 !p-2 rounded-md border-none hover:!bg-black/5',
'h-8 w-8 rounded-md border-none !p-2 hover:!bg-black/5',
)
}
className={'!w-[128px] h-fit !z-20'}
className={'!z-20 h-fit !w-[128px]'}
/>
</div>
</div>

4
web/app/(commonLayout)/datasets/DatasetFooter.tsx
Unescape Escape View File

@ -6,8 +6,8 @@ const DatasetFooter = () => {
const { t } = useTranslation()
return (
<footer className='px-12 py-6 grow-0 shrink-0'>
<h3 className='text-xl font-semibold leading-tight text-gradient'>{t('dataset.didYouKnow')}</h3>
<footer className='shrink-0 grow-0 px-12 py-6'>
<h3 className='text-gradient text-xl font-semibold leading-tight'>{t('dataset.didYouKnow')}</h3>
<p className='mt-1 text-sm font-normal leading-tight text-gray-700'>
{t('dataset.intro1')}<span className='inline-flex items-center gap-1 text-blue-600'>{t('dataset.intro2')}</span>{t('dataset.intro3')}<br />
{t('dataset.intro4')}<span className='inline-flex items-center gap-1 text-blue-600'>{t('dataset.intro5')}</span>{t('dataset.intro6')}

12
web/app/(commonLayout)/datasets/Doc.tsx
Unescape Escape View File

@ -71,8 +71,8 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
<div className={`fixed right-16 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
{isTocExpanded
? (
<nav className="toc w-full bg-gray-50 p-4 rounded-lg shadow-md max-h-[calc(100vh-150px)] overflow-y-auto">
<div className="flex justify-between items-center mb-4">
<nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-gray-50 p-4 shadow-md">
<div className="mb-4 flex items-center justify-between">
<h3 className="text-lg font-semibold">{t('appApi.develop.toc')}</h3>
<button
onClick={() => setIsTocExpanded(false)}
@ -86,7 +86,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
<li key={index}>
<a
href={item.href}
className="text-gray-600 hover:text-gray-900 hover:underline transition-colors duration-200"
className="text-gray-600 transition-colors duration-200 hover:text-gray-900 hover:underline"
onClick={e => handleTocClick(e, item)}
>
{item.text}
@ -99,13 +99,13 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
: (
<button
onClick={() => setIsTocExpanded(true)}
className="w-10 h-10 bg-gray-50 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 transition-colors duration-200"
className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 shadow-md transition-colors duration-200 hover:bg-gray-100"
>
<RiListUnordered className="w-6 h-6" />
<RiListUnordered className="h-6 w-6" />
</button>
)}
</div>
<article className='mx-1 px-4 sm:mx-12 pt-16 bg-white rounded-t-xl prose prose-xl'>
<article className='prose prose-xl mx-1 rounded-t-xl bg-white px-4 pt-16 sm:mx-12'>
{locale !== LanguagesSupported[1]
? <TemplateEn apiBaseUrl={apiBaseUrl} />
: <TemplateZh apiBaseUrl={apiBaseUrl} />

18
web/app/(commonLayout)/datasets/NewDatasetCard.tsx
Unescape Escape View File

@ -14,23 +14,23 @@ const CreateAppCard = (
const { t } = useTranslation()
return (
<div className='flex flex-col bg-background-default-dimm border-[0.5px] border-components-panel-border rounded-xl
min-h-[160px] transition-all duration-200 ease-in-out'
<div className='bg-background-default-dimm border-components-panel-border flex min-h-[160px] flex-col rounded-xl
border-[0.5px] transition-all duration-200 ease-in-out'
>
<a ref={ref} className='group flex grow items-start p-4 cursor-pointer' href='/datasets/create'>
<a ref={ref} className='group flex grow cursor-pointer items-start p-4' href='/datasets/create'>
<div className='flex items-center gap-3'>
<div className='w-10 h-10 p-2 flex items-center justify-center border border-dashed border-divider-regular rounded-lg
bg-background-default-lighter group-hover:border-solid group-hover:border-effects-highlight group-hover:bg-background-default-dodge'
<div className='border-divider-regular bg-background-default-lighter group-hover:border-effects-highlight group-hover:bg-background-default-dodge flex h-10 w-10 items-center justify-center rounded-lg
border border-dashed p-2 group-hover:border-solid'
>
<RiAddLine className='w-4 h-4 text-text-tertiary group-hover:text-text-accent'/>
<RiAddLine className='text-text-tertiary group-hover:text-text-accent h-4 w-4'/>
</div>
<div className='system-md-semibold text-text-secondary group-hover:text-text-accent'>{t('dataset.createDataset')}</div>
</div>
</a>
<div className='p-4 pt-0 text-text-tertiary system-xs-regular'>{t('dataset.createDatasetIntro')}</div>
<a className='group flex p-4 items-center gap-1 border-t-[0.5px] border-divider-subtle rounded-b-xl cursor-pointer' href='/datasets/connect'>
<div className='text-text-tertiary system-xs-regular p-4 pt-0'>{t('dataset.createDatasetIntro')}</div>
<a className='border-divider-subtle group flex cursor-pointer items-center gap-1 rounded-b-xl border-t-[0.5px] p-4' href='/datasets/connect'>
<div className='system-xs-medium text-text-tertiary group-hover:text-text-accent'>{t('dataset.connectDataset')}</div>
<RiArrowRightLine className='w-3.5 h-3.5 text-text-tertiary group-hover:text-text-accent' />
<RiArrowRightLine className='text-text-tertiary group-hover:text-text-accent h-3.5 w-3.5' />
</a>
</div>
)

2
web/app/(shareLayout)/layout.tsx
Unescape Escape View File

@ -10,7 +10,7 @@ const Layout: FC<{
children: React.ReactNode
}> = ({ children }) => {
return (
<div className="min-w-[300px] h-full pb-[env(safe-area-inset-bottom)]">
<div className="h-full min-w-[300px] pb-[env(safe-area-inset-bottom)]">
{children}
</div>
)

4
web/app/(shareLayout)/webapp-signin/page.tsx
Unescape Escape View File

@ -92,8 +92,8 @@ const WebSSOForm: FC = () => {
}, [message, tokenFromUrl]) // Added dependencies to useEffect
return (
<div className="flex items-center justify-center h-full">
<div className={cn('flex flex-col items-center w-full grow justify-center', 'px-6', 'md:px-[108px]')}>
<div className="flex h-full items-center justify-center">
<div className={cn('flex w-full grow flex-col items-center justify-center', 'px-6', 'md:px-[108px]')}>
<Loading type='area' />
</div>
</div>

8
web/app/account/account-page/AvatarWithEdit.tsx
Unescape Escape View File

@ -83,13 +83,13 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
return (
<>
<div>
<div className="relative group">
<div className="group relative">
<Avatar {...props} />
<div
onClick={() => { setIsShowAvatarPicker(true) }}
className="absolute inset-0 bg-black bg-opacity-50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer flex items-center justify-center"
className="absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black bg-opacity-50 opacity-0 transition-opacity group-hover:opacity-100"
>
<span className="text-white text-xs">
<span className="text-xs text-white">
<RiPencilLine />
</span>
</div>
@ -105,7 +105,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
<ImageInput onImageInput={handleImageInput} cropShape='round' />
<Divider className='m-0' />
<div className='w-full flex items-center justify-center p-3 gap-2'>
<div className='flex w-full items-center justify-center gap-2 p-3'>
<Button className='w-full' onClick={() => setIsShowAvatarPicker(false)}>
{t('app.iconPicker.cancel')}
</Button>

36
web/app/account/account-page/index.tsx
Unescape Escape View File

@ -122,17 +122,17 @@ export default function AccountPage() {
<div className='mr-3'>
<AppIcon size='tiny' />
</div>
<div className='mt-[3px] system-sm-medium text-text-secondary'>{item.name}</div>
<div className='system-sm-medium text-text-secondary mt-[3px]'>{item.name}</div>
</div>
)
}
return (
<>
<div className='pt-2 pb-3'>
<div className='pb-3 pt-2'>
<h4 className='title-2xl-semi-bold text-text-primary'>{t('common.account.myAccount')}</h4>
</div>
<div className='mb-8 p-6 rounded-xl flex items-center bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1'>
<div className='from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 mb-8 flex items-center rounded-xl bg-gradient-to-r p-6'>
<AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={ mutateUserProfile } size={64} />
<div className='ml-4'>
<p className='system-xl-semibold text-text-primary'>{userProfile.name}</p>
@ -141,19 +141,19 @@ export default function AccountPage() {
</div>
<div className='mb-8'>
<div className={titleClassName}>{t('common.account.name')}</div>
<div className='flex items-center justify-between gap-2 w-full mt-2'>
<div className='flex-1 bg-components-input-bg-normal rounded-lg p-2 system-sm-regular text-components-input-text-filled '>
<div className='mt-2 flex w-full items-center justify-between gap-2'>
<div className='bg-components-input-bg-normal system-sm-regular text-components-input-text-filled flex-1 rounded-lg p-2 '>
<span className='pl-1'>{userProfile.name}</span>
</div>
<div className='bg-components-button-tertiary-bg rounded-lg py-2 px-3 cursor-pointer system-sm-medium text-components-button-tertiary-text' onClick={handleEditName}>
<div className='bg-components-button-tertiary-bg system-sm-medium text-components-button-tertiary-text cursor-pointer rounded-lg px-3 py-2' onClick={handleEditName}>
{t('common.operation.edit')}
</div>
</div>
</div>
<div className='mb-8'>
<div className={titleClassName}>{t('common.account.email')}</div>
<div className='flex items-center justify-between gap-2 w-full mt-2'>
<div className='flex-1 bg-components-input-bg-normal rounded-lg p-2 system-sm-regular text-components-input-text-filled '>
<div className='mt-2 flex w-full items-center justify-between gap-2'>
<div className='bg-components-input-bg-normal system-sm-regular text-components-input-text-filled flex-1 rounded-lg p-2 '>
<span className='pl-1'>{userProfile.email}</span>
</div>
</div>
@ -162,14 +162,14 @@ export default function AccountPage() {
systemFeatures.enable_email_password_login && (
<div className='mb-8 flex justify-between gap-2'>
<div>
<div className='mb-1 system-sm-semibold text-text-secondary'>{t('common.account.password')}</div>
<div className='mb-2 body-xs-regular text-text-tertiary'>{t('common.account.passwordTip')}</div>
<div className='system-sm-semibold text-text-secondary mb-1'>{t('common.account.password')}</div>
<div className='body-xs-regular text-text-tertiary mb-2'>{t('common.account.passwordTip')}</div>
</div>
<Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
</div>
)
}
<div className='mb-6 border-[1px] border-divider-subtle' />
<div className='border-divider-subtle mb-6 border-[1px]' />
<div className='mb-8'>
<div className={titleClassName}>{t('common.account.langGeniusAccount')}</div>
<div className={descriptionClassName}>{t('common.account.langGeniusAccountTip')}</div>
@ -181,7 +181,7 @@ export default function AccountPage() {
wrapperClassName='mt-2'
/>
)}
{!IS_CE_EDITION && <Button className='mt-2 text-components-button-destructive-secondary-text' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
{!IS_CE_EDITION && <Button className='text-components-button-destructive-secondary-text mt-2' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
</div>
{
editNameModalVisible && (
@ -190,13 +190,13 @@ export default function AccountPage() {
onClose={() => setEditNameModalVisible(false)}
className={s.modal}
>
<div className='mb-6 title-2xl-semi-bold text-text-primary'>{t('common.account.editName')}</div>
<div className='title-2xl-semi-bold text-text-primary mb-6'>{t('common.account.editName')}</div>
<div className={titleClassName}>{t('common.account.name')}</div>
<Input className='mt-2'
value={editName}
onChange={e => setEditName(e.target.value)}
/>
<div className='flex justify-end mt-10'>
<div className='mt-10 flex justify-end'>
<Button className='mr-2' onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
<Button
disabled={editing || !editName}
@ -219,7 +219,7 @@ export default function AccountPage() {
}}
className={s.modal}
>
<div className='mb-6 title-2xl-semi-bold text-text-primary'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
<div className='title-2xl-semi-bold text-text-primary mb-6'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
{userProfile.is_password_set && (
<>
<div className={titleClassName}>{t('common.account.currentPassword')}</div>
@ -242,7 +242,7 @@ export default function AccountPage() {
</div>
</>
)}
<div className='mt-8 system-sm-semibold text-text-secondary'>
<div className='system-sm-semibold text-text-secondary mt-8'>
{userProfile.is_password_set ? t('common.account.newPassword') : t('common.account.password')}
</div>
<div className='relative mt-2'>
@ -261,7 +261,7 @@ export default function AccountPage() {
</Button>
</div>
</div>
<div className='mt-8 system-sm-semibold text-text-secondary'>{t('common.account.confirmPassword')}</div>
<div className='system-sm-semibold text-text-secondary mt-8'>{t('common.account.confirmPassword')}</div>
<div className='relative mt-2'>
<Input
type={showConfirmPassword ? 'text' : 'password'}
@ -278,7 +278,7 @@ export default function AccountPage() {
</Button>
</div>
</div>
<div className='flex justify-end mt-10'>
<div className='mt-10 flex justify-end'>
<Button className='mr-2' onClick={() => {
setEditPasswordModalVisible(false)
resetPasswordForm()

18
web/app/account/avatar.tsx
Unescape Escape View File

@ -38,10 +38,10 @@ export default function AppSelector() {
<div>
<MenuButton
className={`
inline-flex items-center
rounded-[20px] p-1x text-sm
text-text-primary
mobile:px-1
p-1x text-text-primary
mobile:px-1 inline-flex items-center
rounded-[20px]
text-sm
${open && 'bg-components-panel-bg-blur'}
`}
>
@ -59,8 +59,8 @@ export default function AppSelector() {
>
<MenuItems
className="
absolute -right-2 -top-1 w-60 max-w-80
divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
divide-divider-subtle bg-components-panel-bg-blur absolute -right-2 -top-1
w-60 max-w-80 origin-top-right divide-y rounded-lg
shadow-lg
"
>
@ -78,10 +78,10 @@ export default function AppSelector() {
<MenuItem>
<div className='p-1' onClick={() => handleLogout()}>
<div
className='flex items-center justify-start h-9 px-3 rounded-lg cursor-pointer group hover:bg-state-base-hover'
className='hover:bg-state-base-hover group flex h-9 cursor-pointer items-center justify-start rounded-lg px-3'
>
<LogOut01 className='w-4 h-4 text-text-tertiary flex mr-1' />
<div className='font-normal text-[14px] text-text-secondary'>{t('common.userProfile.logout')}</div>
<LogOut01 className='text-text-tertiary mr-1 flex h-4 w-4' />
<div className='text-text-secondary text-[14px] font-normal'>{t('common.userProfile.logout')}</div>
</div>
</div>
</MenuItem>

8
web/app/account/delete-account/components/check-email.tsx
Unescape Escape View File

@ -29,18 +29,18 @@ export default function CheckEmail(props: DeleteAccountProps) {
}, [getDeleteEmailVerifyCode, props])
return <>
<div className='py-1 text-text-destructive body-md-medium'>
<div className='text-text-destructive body-md-medium py-1'>
{t('common.account.deleteTip')}
</div>
<div className='pt-1 pb-2 text-text-secondary body-md-regular'>
<div className='text-text-secondary body-md-regular pb-2 pt-1'>
{t('common.account.deletePrivacyLinkTip')}
<Link href='https://dify.ai/privacy' className='text-text-accent'>{t('common.account.deletePrivacyLink')}</Link>
</div>
<label className='mt-3 mb-1 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('common.account.deleteLabel')}</label>
<label className='system-sm-semibold text-text-secondary mb-1 mt-3 flex h-6 items-center'>{t('common.account.deleteLabel')}</label>
<Input placeholder={t('common.account.deletePlaceholder') as string} onChange={(e) => {
setUserInputEmail(e.target.value)
}} />
<div className='w-full flex flex-col mt-3 gap-2'>
<div className='mt-3 flex w-full flex-col gap-2'>
<Button className='w-full' disabled={userInputEmail !== userProfile.email || isSendingEmail} loading={isSendingEmail} variant='primary' onClick={handleConfirm}>{t('common.account.sendVerificationButton')}</Button>
<Button className='w-full' onClick={props.onCancel}>{t('common.operation.cancel')}</Button>
</div>

4
web/app/account/delete-account/components/feed-back.tsx
Unescape Escape View File

@ -56,11 +56,11 @@ export default function FeedBack(props: DeleteAccountProps) {
className="max-w-[480px]"
footer={false}
>
<label className='mt-3 mb-1 flex items-center system-sm-semibold text-text-secondary'>{t('common.account.feedbackLabel')}</label>
<label className='system-sm-semibold text-text-secondary mb-1 mt-3 flex items-center'>{t('common.account.feedbackLabel')}</label>
<Textarea rows={6} value={userFeedback} placeholder={t('common.account.feedbackPlaceholder') as string} onChange={(e) => {
setUserFeedback(e.target.value)
}} />
<div className='w-full flex flex-col mt-3 gap-2'>
<div className='mt-3 flex w-full flex-col gap-2'>
<Button className='w-full' loading={isPending} variant='primary' onClick={handleSubmit}>{t('common.operation.submit')}</Button>
<Button className='w-full' onClick={handleSkip}>{t('common.operation.skip')}</Button>
</div>

8
web/app/account/delete-account/components/verify-email.tsx
Unescape Escape View File

@ -35,18 +35,18 @@ export default function VerifyEmail(props: DeleteAccountProps) {
catch (error) { console.error(error) }
}, [emailToken, verificationCode, confirmDeleteAccount, props])
return <>
<div className='pt-1 text-text-destructive body-md-medium'>
<div className='text-text-destructive body-md-medium pt-1'>
{t('common.account.deleteTip')}
</div>
<div className='pt-1 pb-2 text-text-secondary body-md-regular'>
<div className='text-text-secondary body-md-regular pb-2 pt-1'>
{t('common.account.deletePrivacyLinkTip')}
<Link href='https://dify.ai/privacy' className='text-text-accent'>{t('common.account.deletePrivacyLink')}</Link>
</div>
<label className='mt-3 mb-1 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('common.account.verificationLabel')}</label>
<label className='system-sm-semibold text-text-secondary mb-1 mt-3 flex h-6 items-center'>{t('common.account.verificationLabel')}</label>
<Input minLength={6} maxLength={6} placeholder={t('common.account.verificationPlaceholder') as string} onChange={(e) => {
setVerificationCode(e.target.value)
}} />
<div className='w-full flex flex-col mt-3 gap-2'>
<div className='mt-3 flex w-full flex-col gap-2'>
<Button className='w-full' disabled={shouldButtonDisabled} loading={isDeleting} variant='warning' onClick={handleConfirm}>{t('common.account.permanentlyDeleteButton')}</Button>
<Button className='w-full' onClick={props.onCancel}>{t('common.operation.cancel')}</Button>
<Countdown onResend={sendEmail} />

14
web/app/account/header.tsx
Unescape Escape View File

@ -16,19 +16,19 @@ const Header = () => {
return (
<div className='flex flex-1 items-center justify-between px-4'>
<div className='flex items-center gap-3'>
<div className='flex items-center cursor-pointer' onClick={back}>
<div className='flex cursor-pointer items-center' onClick={back}>
<LogoSite className='object-contain' />
</div>
<div className='w-[1px] h-4 bg-divider-regular' />
<div className='bg-divider-regular h-4 w-[1px]' />
<p className='text-text-primary title-3xl-semi-bold'>{t('common.account.account')}</p>
</div>
<div className='flex items-center flex-shrink-0 gap-3'>
<Button className='gap-2 py-2 px-3 system-sm-medium' onClick={back}>
<RiRobot2Line className='w-4 h-4' />
<div className='flex shrink-0 items-center gap-3'>
<Button className='system-sm-medium gap-2 px-3 py-2' onClick={back}>
<RiRobot2Line className='h-4 w-4' />
<p>{t('common.account.studio')}</p>
<RiArrowRightUpLine className='w-4 h-4' />
<RiArrowRightUpLine className='h-4 w-4' />
</Button>
<div className='w-[1px] h-4 bg-divider-regular' />
<div className='bg-divider-regular h-4 w-[1px]' />
<Avatar />
</div>
</div>

2
web/app/account/layout.tsx
Unescape Escape View File

@ -21,7 +21,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
<HeaderWrapper>
<Header />
</HeaderWrapper>
<div className='relative flex flex-col overflow-y-auto bg-components-panel-bg shrink-0 h-0 grow'>
<div className='bg-components-panel-bg relative flex h-0 shrink-0 grow flex-col overflow-y-auto'>
{children}
</div>
</ModalContextProvider>

2
web/app/account/page.tsx
Unescape Escape View File

@ -1,7 +1,7 @@
import AccountPage from './account-page'
export default function Account() {
return <div className='max-w-[640px] w-full mx-auto pt-12 px-6'>
return <div className='mx-auto w-full max-w-[640px] px-6 pt-12'>
<AccountPage />
</div>
}

8
web/app/activate/activateForm.tsx
Unescape Escape View File

@ -41,7 +41,7 @@ const ActivateForm = () => {
return (
<div className={
cn(
'flex flex-col items-center w-full grow justify-center',
'flex w-full grow flex-col items-center justify-center',
'px-6',
'md:px-[108px]',
)
@ -49,11 +49,11 @@ const ActivateForm = () => {
{!checkRes && <Loading />}
{checkRes && !checkRes.is_valid && (
<div className="flex flex-col md:w-[400px]">
<div className="w-full mx-auto">
<div className="mb-3 flex justify-center items-center w-20 h-20 p-5 rounded-[20px] border border-gray-100 shadow-lg text-[40px] font-bold">🤷‍♂️</div>
<div className="mx-auto w-full">
<div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-gray-100 p-5 text-[40px] font-bold shadow-lg">🤷‍♂️</div>
<h2 className="text-[32px] font-bold text-gray-900">{t('login.invalid')}</h2>
</div>
<div className="w-full mx-auto mt-6">
<div className="mx-auto mt-6 w-full">
<Button variant='primary' className='w-full !text-sm'>
<a href="https://dify.ai">{t('login.explore')}</a>
</Button>

4
web/app/activate/page.tsx
Unescape Escape View File

@ -8,14 +8,14 @@ const Activate = () => {
return (
<div className={cn(
style.background,
'flex w-full min-h-screen',
'flex min-h-screen w-full',
'sm:p-4 lg:p-8',
'gap-x-20',
'justify-center lg:justify-start',
)}>
<div className={
cn(
'flex w-full flex-col bg-white shadow rounded-2xl shrink-0',
'flex w-full shrink-0 flex-col rounded-2xl bg-white shadow',
'space-between',
)
}>

30
web/app/components/app-sidebar/app-info.tsx
Unescape Escape View File

@ -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 && 'hover:bg-state-base-hover cursor-pointer')}>
<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='text-text-tertiary h-4 w-4' />
</div>
</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,8 +232,8 @@ 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='flex w-full grow flex-col items-start justify-center'>
<div className='text-text-secondary system-md-semibold w-full truncate'>{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>
</div>
@ -252,7 +252,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
setShowEditModal(true)
}}
>
<RiEditLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
<RiEditLine className='text-components-button-secondary-text h-3.5 w-3.5' />
<span className='text-components-button-secondary-text system-xs-medium'>{t('app.editApp')}</span>
</Button>
<Button
@ -264,7 +264,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
setShowDuplicateModal(true)
}}
>
<RiFileCopy2Line className='w-3.5 h-3.5 text-components-button-secondary-text' />
<RiFileCopy2Line className='text-components-button-secondary-text h-3.5 w-3.5' />
<span className='text-components-button-secondary-text system-xs-medium'>{t('app.duplicate')}</span>
</Button>
<Button
@ -273,7 +273,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
className='gap-[1px]'
onClick={exportCheck}
>
<RiFileDownloadLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
<RiFileDownloadLine className='text-components-button-secondary-text h-3.5 w-3.5' />
<span className='text-components-button-secondary-text system-xs-medium'>{t('app.export')}</span>
</Button>
{
@ -287,7 +287,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
setShowImportDSLModal(true)
}}
>
<RiFileUploadLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
<RiFileUploadLine className='text-components-button-secondary-text h-3.5 w-3.5' />
<span className='text-components-button-secondary-text system-xs-medium'>{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='border-divider-subtle flex min-h-fit shrink-0 flex-col items-start justify-center gap-3 self-stretch border-t-[0.5px] p-2'>
<Button
size={'medium'}
variant={'ghost'}
@ -311,7 +311,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
setShowConfirmDelete(true)
}}
>
<RiDeleteBinLine className='w-4 h-4 text-text-tertiary' />
<RiDeleteBinLine className='text-text-tertiary h-4 w-4' />
<span className='text-text-tertiary system-sm-medium'>{t('common.operation.deleteApp')}</span>
</Button>
</div>

14
web/app/components/app-sidebar/basic.tsx
Unescape Escape View File

@ -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' />,
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' />,
api: <AppIcon innerIcon={ApiSvg} className='border !border-purple-200 !bg-purple-50' />,
dataset: <AppIcon innerIcon={DatasetSvg} className='!bg-indigo-25 !border-[0.5px] !border-indigo-100' />,
webapp: <AppIcon innerIcon={WebappSvg} className='!bg-primary-100 !border-primary-200 border' />,
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 text-text-secondary group-hover:text-text-primary flex flex-row items-center ${textStyle?.main ?? ''}`}>
<div className="max-w-[180px] truncate">
{name}
</div>

8
web/app/components/app-sidebar/dataset-info.tsx
Unescape Escape View File

@ -26,16 +26,16 @@ const DatasetInfo: FC<Props> = ({
const { t } = useTranslation()
return (
<div className='pl-1 pt-1'>
<div className='flex-shrink-0 mr-3'>
<AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />
<div className='mr-3 shrink-0'>
<AppIcon innerIcon={DatasetSvg} className='!bg-indigo-25 !border-[0.5px] !border-indigo-100' />
</div>
{expand && (
<div className='mt-2'>
<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='text-text-tertiary system-2xs-medium-uppercase mt-1'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</div>
<div className='system-xs-regular text-text-tertiary my-3 first-letter:capitalize'>{description}</div>
</div>
)}
{extraInfo}

10
web/app/components/app-sidebar/index.tsx
Unescape Escape View File

@ -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
bg-background-default-subtle border-divider-burn flex shrink-0 flex-col border-r 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('bg-divider-subtle mx-auto mt-1 h-[1px]', !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='text-components-menu-item-text h-5 w-5' />
: <LayoutRight2LineMod className='text-components-menu-item-text h-5 w-5' />
}
</div>
</div>

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

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

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

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

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

@ -35,17 +35,17 @@ const CSVDownload: FC = () => {
<div className='mt-6'>
<div className='system-sm-medium text-text-primary'>{t('share.generation.csvStructureTitle')}</div>
<div className='mt-2 max-h-[500px] overflow-auto'>
<table className='table-fixed w-full border-separate border-spacing-0 border border-divider-regular rounded-lg text-xs'>
<table className='border-divider-regular w-full table-fixed border-separate border-spacing-0 rounded-lg border 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='border-divider-regular h-9 border-b pl-3 pr-2'>{t('appAnnotation.batchModal.question')}</td>
<td className='border-divider-regular h-9 border-b pl-3 pr-2'>{t('appAnnotation.batchModal.answer')}</td>
</tr>
</thead>
<tbody className='text-gray-700'>
<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='border-divider-subtle h-9 border-b pl-3 pr-2 text-[13px]'>{t('appAnnotation.batchModal.question')} 1</td>
<td className='border-divider-subtle h-9 border-b 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='text-text-accent system-xs-medium flex h-[18px] items-center space-x-1'>
<DownloadIcon className='mr-1 h-3 w-3' />
{t('appAnnotation.batchModal.template')}
</div>
</CSVDownloader>

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

@ -91,29 +91,29 @@ const CSVUploader: FC<Props> = ({
/>
<div ref={dropRef}>
{!file && (
<div className={cn('flex items-center h-20 rounded-xl bg-components-dropzone-bg border border-dashed border-components-dropzone-border system-sm-regular', dragging && 'bg-components-dropzone-bg-accent border border-components-dropzone-border-accent')}>
<div className='w-full flex items-center justify-center space-x-2'>
<div className={cn('bg-components-dropzone-bg border-components-dropzone-border system-sm-regular flex h-20 items-center rounded-xl border border-dashed', dragging && 'bg-components-dropzone-bg-accent border-components-dropzone-border-accent border')}>
<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>
</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('bg-components-panel-bg border-components-panel-border group flex h-20 items-center rounded-xl border px-6 text-sm font-normal', 'hover:bg-components-panel-bg-blur hover:border-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>
<span className='shrink-0 text-text-tertiary'>.csv</span>
<div className='ml-2 flex w-0 grow'>
<span className='text-text-primary max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap'>{file.name.replace(/.csv$/, '')}</span>
<span className='text-text-tertiary shrink-0'>.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='bg-divider-regular mx-2 h-4 w-px' />
<div className='cursor-pointer p-2' onClick={removeFile}>
<RiDeleteBinLine className='text-text-tertiary h-4 w-4' />
</div>
</div>
</div>

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

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

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

@ -20,11 +20,11 @@ type Props = {
}
export const EditTitle: FC<{ className?: string; title: string }> = ({ className, title }) => (
<div className={cn(className, 'flex items-center h-[18px] system-xs-medium text-text-tertiary')}>
<RiEditFill className='mr-1 w-3.5 h-3.5' />
<div className={cn(className, 'system-xs-medium text-text-tertiary flex h-[18px] items-center')}>
<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 text-text-primary mb-1'>{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 text-text-primary mt-1'>{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 text-text-accent flex cursor-pointer items-center space-x-1'
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 text-text-tertiary ml-2 flex items-center'>
<div className='mr-2'>·</div>
<div
className='flex items-center space-x-1 cursor-pointer'
className='flex cursor-pointer items-center space-x-1'
onClick={() => {
setNewContent(content)
onSave(content)
}}
>
<div className='w-3.5 h-3.5'>
<RiDeleteBinLine className='w-3.5 h-3.5' />
<div className='h-3.5 w-3.5'>
<RiDeleteBinLine className='h-3.5 w-3.5' />
</div>
<div>{t('common.operation.delete')}</div>
</div>

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

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

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

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

2
web/app/components/app/annotation/filter.tsx
Unescape Escape View File

@ -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

32
web/app/components/app/annotation/header-opts/index.tsx
Unescape Escape View File

@ -80,17 +80,17 @@ 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='hover:bg-components-panel-on-panel-item-bg-hover mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 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='text-text-tertiary h-4 w-4' />
<span className='text-text-secondary system-sm-regular grow text-left'>{t('appAnnotation.table.header.bulkImport')}</span>
</button>
<Menu as="div" className="relative w-full h-full">
<MenuButton 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 as="div" className="relative h-full w-full">
<MenuButton className='hover:bg-components-panel-on-panel-item-bg-hover mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 disabled:opacity-50'>
<FileDownload02 className='text-text-tertiary h-4 w-4' />
<span className='text-text-secondary system-sm-regular grow text-left'>{t('appAnnotation.table.header.bulkExport')}</span>
<ChevronRight className='text-text-tertiary h-[14px] w-[14px] shrink-0' />
</MenuButton>
<Transition
as={Fragment}
@ -103,7 +103,7 @@ const HeaderOptions: FC<Props> = ({
>
<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',
'bg-components-panel-bg border-components-panel-on-panel-item-bg shadow-xs absolute left-1 top-[1px] z-10 min-w-[100px] origin-top-right -translate-x-full rounded-xl border-[0.5px] py-1',
)}
>
<CSVDownloader
@ -115,12 +115,12 @@ 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='hover:bg-components-panel-on-panel-item-bg-hover mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 disabled:opacity-50'>
<span className='text-text-secondary system-sm-regular grow text-left'>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('hover:bg-components-panel-on-panel-item-bg-hover mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 disabled:opacity-50', '!border-0')} onClick={JSONLOutput}>
<span className='text-text-secondary system-sm-regular grow text-left'>JSONL</span>
</button>
</MenuItems>
</Transition>
@ -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
/>

16
web/app/components/app/annotation/index.tsx
Unescape Escape View File

@ -152,15 +152,15 @@ const Annotation: FC<Props> = ({
}
return (
<div className='flex flex-col h-full'>
<div className='flex h-full flex-col'>
<p className='text-text-tertiary system-sm-regular'>{t('appLog.description')}</p>
<div className='flex flex-col py-4 flex-1'>
<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', 'bg-components-panel-bg-blur border-components-panel-border flex h-7 items-center space-x-1 rounded-lg border pl-2')}>
<MessageFast className='text-util-colors-indigo-indigo-600 h-4 w-4' />
<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='bg-divider-subtle mr-1 h-3.5 w-[1px] shrink-0'></div>
<ActionButton onClick={() => setIsShowEdit(true)}>
<RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
<RiEqualizer2Line className='text-text-tertiary h-4 w-4' />
</ActionButton>
</div>
)}
</div>
<div className='shrink-0 mx-3 w-[1px] h-3.5 bg-divider-regular'></div>
<div className='bg-divider-regular mx-3 h-3.5 w-[1px] shrink-0'></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)

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

@ -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='bg-background-section-burn w-5 whitespace-nowrap rounded-l-lg pl-2 pr-1'>{t('appAnnotation.table.header.question')}</td>
<td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appAnnotation.table.header.answer')}</td>
<td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appAnnotation.table.header.createdAt')}</td>
<td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appAnnotation.table.header.hits')}</td>
<td className='bg-background-section-burn w-[96px] whitespace-nowrap rounded-r-lg py-1.5 pl-3'>{t('appAnnotation.table.header.actions')}</td>
</tr>
</thead>
<tbody className="text-text-secondary system-sm-regular">
{list.map(item => (
<tr
key={item.id}
className='border-b border-divider-subtle hover:bg-background-default-hover cursor-pointer'
className='border-divider-subtle hover:bg-background-default-hover cursor-pointer border-b'
onClick={
() => {
onView(item)
@ -48,20 +48,20 @@ 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>
<td className='p-3 pr-2'>{item.hit_count}</td>
<td className='w-[96px] p-3 pr-2' onClick={e => e.stopPropagation()}>
{/* Actions */}
<div className='flex space-x-1 text-text-tertiary'>
<div className='text-text-tertiary flex space-x-1'>
<ActionButton onClick={() => onView(item)}>
<RiEditLine className='w-4 h-4' />
<RiEditLine className='h-4 w-4' />
</ActionButton>
<ActionButton
onClick={() => {
@ -69,7 +69,7 @@ const List: FC<Props> = ({
setShowConfirmDelete(true)
}}
>
<RiDeleteBinLine className='w-4 h-4' />
<RiDeleteBinLine className='h-4 w-4' />
</ActionButton>
</div>
</td>

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

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

28
web/app/components/app/annotation/view-annotation-modal/index.tsx
Unescape Escape View File

@ -116,30 +116,30 @@ const ViewAnnotationModal: FC<Props> = ({
<table className={cn('w-full min-w-[440px] border-collapse border-0')} >
<thead className="system-xs-medium-uppercase text-text-tertiary">
<tr>
<td className='pl-2 pr-1 w-5 rounded-l-lg bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.query')}</td>
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.match')}</td>
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.response')}</td>
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.source')}</td>
<td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.score')}</td>
<td className='pl-3 py-1.5 rounded-r-lg bg-background-section-burn whitespace-nowrap w-[160px]'>{t('appAnnotation.hitHistoryTable.time')}</td>
<td className='bg-background-section-burn w-5 whitespace-nowrap rounded-l-lg pl-2 pr-1'>{t('appAnnotation.hitHistoryTable.query')}</td>
<td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.match')}</td>
<td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.response')}</td>
<td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.source')}</td>
<td className='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.score')}</td>
<td className='bg-background-section-burn w-[160px] whitespace-nowrap rounded-r-lg py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.time')}</td>
</tr>
</thead>
<tbody className="text-text-secondary system-sm-regular">
{hitHistoryList.map(item => (
<tr
key={item.id}
className={'border-b border-divider-subtle hover:bg-background-default-hover cursor-pointer'}
className={'border-divider-subtle hover:bg-background-default-hover cursor-pointer border-b'}
>
<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='border-divider-subtle bg-background-section-burn system-sm-medium text-text-tertiary flex h-16 items-center justify-between rounded-bl-xl rounded-br-xl border-t px-4'>
<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 />

24
web/app/components/app/app-publisher/index.tsx
Unescape Escape View File

@ -139,19 +139,19 @@ const AppPublisher = ({
disabled={disabled}
>
{t('workflow.common.publish')}
<RiArrowDownSLine className='w-4 h-4 ml-0.5' />
<RiArrowDownSLine className='ml-0.5 h-4 w-4' />
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[11]'>
<div className='w-[336px] bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl'>
<div className='bg-components-panel-bg border-components-panel-border w-[336px] rounded-2xl border-[0.5px] shadow-xl'>
<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 text-text-tertiary flex h-6 items-center'>
{publishedAt ? t('workflow.common.latestPublished') : t('workflow.common.currentDraftUnpublished')}
</div>
{publishedAt
? (
<div className='flex justify-between items-center h-[18px]'>
<div className='flex items-center mt-[3px] mb-[3px] leading-[18px] text-[13px] font-medium text-text-secondary'>
<div className='flex h-[18px] items-center justify-between'>
<div className='text-text-secondary mb-[3px] mt-[3px] flex items-center text-[13px] font-medium leading-[18px]'>
{t('workflow.common.publishedAt')} {formatTimeFromNow(publishedAt)}
</div>
<Button
@ -165,7 +165,7 @@ const AppPublisher = ({
</div>
)
: (
<div className='flex items-center h-[18px] leading-[18px] text-[13px] font-medium text-text-secondary'>
<div className='text-text-secondary flex h-[18px] items-center text-[13px] font-medium leading-[18px]'>
{t('workflow.common.autoSaved')} · {Boolean(draftUpdatedAt) && formatTimeFromNow(draftUpdatedAt!)}
</div>
)}
@ -180,7 +180,7 @@ const AppPublisher = ({
: (
<Button
variant='primary'
className='w-full mt-3'
className='mt-3 w-full'
onClick={() => handlePublish()}
disabled={publishDisabled || published}
>
@ -193,14 +193,14 @@ const AppPublisher = ({
)
}
</div>
<div className='p-4 pt-3 border-t-[0.5px] border-divider-regular'>
<div className='border-divider-regular border-t-[0.5px] p-4 pt-3'>
<SuggestedAction disabled={!publishedAt} link={appURL} icon={<PlayCircle />}>{t('workflow.common.runApp')}</SuggestedAction>
{appDetail?.mode === 'workflow'
? (
<SuggestedAction
disabled={!publishedAt}
link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
icon={<LeftIndent02 className='w-4 h-4' />}
icon={<LeftIndent02 className='h-4 w-4' />}
>
{t('workflow.common.batchRunApp')}
</SuggestedAction>
@ -212,7 +212,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>
@ -222,11 +222,11 @@ const AppPublisher = ({
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={<FileText className='w-4 h-4' />}>{t('workflow.common.accessAPIReference')}</SuggestedAction>
<SuggestedAction disabled={!publishedAt} link='./develop' icon={<FileText className='h-4 w-4' />}>{t('workflow.common.accessAPIReference')}</SuggestedAction>
{appDetail?.mode === 'workflow' && (
<WorkflowToolConfigureButton
disabled={!publishedAt}

14
web/app/components/app/app-publisher/publish-with-multiple-model.tsx
Unescape Escape View File

@ -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='border-components-panel-border bg-components-panel-bg rounded-lg border-[0.5px] p-1 shadow-lg'>
<div className='text-text-tertiary flex h-[22px] items-center px-3 text-xs font-medium'>
{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='text-text-tertiary hover:bg-state-base-hover flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm'
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='text-text-secondary ml-1 truncate'
title={item.modelItem.label[language]}
>
{item.modelItem.label[language]}

4
web/app/components/app/app-publisher/suggested-action.tsx
Unescape Escape View File

@ -20,8 +20,8 @@ const SuggestedAction = ({ icon, link, disabled, children, className, ...props }
)}
{...props}
>
<div className='relative w-4 h-4'>{icon}</div>
<div className='grow shrink basis-0 text-[13px] font-medium leading-[18px]'>{children}</div>
<div className='relative h-4 w-4'>{icon}</div>
<div className='shrink grow basis-0 text-[13px] font-medium leading-[18px]'>{children}</div>
<ArrowUpRight />
</a>
)

12
web/app/components/app/configuration/base/feature-panel/index.tsx
Unescape Escape View File

@ -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('border-effects-highlight bg-background-section-burn rounded-xl border-l-[0.5px] border-t-[0.5px] 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={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-divider-subtle border-b')}>
<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='text-text-secondary system-sm-semibold'>{title}</div>
</div>
<div className='flex gap-2 items-center'>
<div className='flex items-center gap-2'>
{headerRight && <div>{headerRight}</div>}
</div>
</div>

6
web/app/components/app/configuration/base/group-name/index.tsx
Unescape Escape View File

@ -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-gray-500 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-gray-500'>{name}</div>
<div className='h-[1px] grow'
style={{
background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, #F3F4F6 100%)',

2
web/app/components/app/configuration/base/icons/remove-icon/index.tsx
Unescape Escape View File

@ -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}

6
web/app/components/app/configuration/base/operation-btn/index.tsx
Unescape Escape View File

@ -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('text-text-secondary hover:bg-state-base-hover flex h-7 cursor-pointer select-none items-center space-x-1 rounded-md px-3', className)}
onClick={onClick}>
<div>
{iconMap[type]}

2
web/app/components/app/configuration/base/var-highlight/index.tsx
Unescape Escape View File

@ -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} text-primary-600 mb-2 flex h-5 items-center justify-center rounded-md px-1 text-xs font-medium`}
>
<span className='opacity-60'>{'{{'}</span>
<span>{name}</span>

2
web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx
Unescape Escape View File

@ -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>

6
web/app/components/app/configuration/base/warning-mask/index.tsx
Unescape Escape View File

@ -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'>

20
web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
Unescape Escape View File

@ -141,17 +141,17 @@ 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>
<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='shadow-xs text-primary-600 flex h-6 cursor-pointer items-center rounded-md border border-gray-200 bg-[#fff] px-2 text-xs font-medium'
onClick={onHideContextMissingTip}
>{t('common.operation.ok')}</div>
</div>
@ -162,7 +162,7 @@ const AdvancedPromptInput: FC<Props> = ({
{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-white hover:shadow-xs')}>
<div className={cn(s.boxHeader, 'hover:shadow-xs flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl bg-white pb-1 pl-4 pr-3 pt-2')}>
{isChatMode
? (
<MessageTypeSelector value={type} onChange={onTypeChange} />
@ -182,11 +182,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-gray-500 cursor-pointer' />
<RiDeleteBinLine onClick={onDelete} className='h-6 w-6 cursor-pointer p-1 text-gray-500' />
)}
{!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)
}} />
@ -199,13 +199,13 @@ const AdvancedPromptInput: FC<Props> = ({
)}
<PromptEditorHeightResizeWrap
className='px-4 min-h-[102px] overflow-y-auto text-sm text-gray-700'
className='min-h-[102px] overflow-y-auto px-4 text-sm text-gray-700'
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-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>
)}
hideResize={noResize}

4
web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
Unescape Escape View File

@ -46,7 +46,7 @@ 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 rounded-xl border border-gray-100'
className='flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-gray-100'
style={{
backgroundColor: 'rgba(255, 255, 255, 0.9)',
boxShadow: '0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)',
@ -54,7 +54,7 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
>{VarIcon}</div>
<div className='grow-1'>
<div className='text-sm font-medium text-gray-900'>{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} />
))}

8
web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
Unescape Escape View File

@ -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={'text-text-primary mt-6 text-sm font-medium leading-[21px]'}>{t('appDebug.feature.conversationHistory.editModal.userPrefix')}</div>
<input className={'bg-components-input-bg-normal mt-2 box-border h-10 w-full rounded-lg 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={'text-text-primary mt-6 text-sm font-medium leading-[21px]'}>{t('appDebug.feature.conversationHistory.editModal.assistantPrefix')}</div>
<input className={'bg-components-input-bg-normal mt-2 box-border h-10 w-full rounded-lg px-3 text-sm leading-10'}
value={tempData.assistant_prefix}
onChange={e => setTempData({
...tempData,

10
web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx
Unescape Escape View File

@ -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='shadow-xs rounded-md p-1'>
<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='text-text-tertiary text-xs'>{t('appDebug.feature.conversationHistory.description')}</div>
<div className='bg-divider-regular ml-3 h-[14px] w-[1px]'></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='bg-background-section-burn text-text-secondary flex justify-between rounded-b-xl px-3 py-2 text-xs'>
<div>{t('appDebug.feature.conversationHistory.tip')}
<a href={`${locale === LanguagesSupported[1]
? 'https://docs.dify.ai/v/zh-hans/guides/application-design/prompt-engineering'

4
web/app/components/app/configuration/config-prompt/index.tsx
Unescape Escape View File

@ -157,8 +157,8 @@ const Prompt: FC<IPromptProps> = ({
{(modelModeType === ModelModeType.chat && (currentAdvancedPrompt as PromptItem[]).length < MAX_PROMPT_MESSAGE_LENGTH) && (
<div
onClick={handleAddMessage}
className='mt-3 flex items-center h-8 justify-center bg-gray-50 rounded-lg cursor-pointer text-[13px] font-medium text-gray-700 space-x-2'>
<RiAddLine className='w-4 h-4' />
className='mt-3 flex h-8 cursor-pointer items-center justify-center space-x-2 rounded-lg bg-gray-50 text-[13px] font-medium text-gray-700'>
<RiAddLine className='h-4 w-4' />
<div>{t('appDebug.promptMode.operation.addMessage')}</div>
</div>
)}

8
web/app/components/app/configuration/config-prompt/message-type-selector.tsx
Unescape Escape View File

@ -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-gray-200 shadow-lg rounded-lg bg-white'>
<div className='absolute top-[30px] z-10 rounded-lg border border-gray-200 bg-white 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-gray-700 uppercase hover:bg-gray-50'
className='flex h-9 min-w-[44px] cursor-pointer items-center rounded-lg px-3 text-sm font-medium uppercase text-gray-700 hover:bg-gray-50'
>{type}</div>
))
}

4
web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx
Unescape Escape View File

@ -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>

8
web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
Unescape Escape View File

@ -164,7 +164,7 @@ const Prompt: FC<ISimplePromptInput> = ({
<div className={cn((!readonly || gradientBorder) ? `${s.gradientBorder}` : 'bg-gray-50', ' relative shadow-md')}>
<div className='rounded-xl bg-[#EEF4FF]'>
{!noTitle && (
<div className="flex justify-between items-center h-11 pl-3 pr-6">
<div className="flex h-11 items-center justify-between pl-3 pr-6">
<div className="flex items-center space-x-1">
<div className='h2'>{mode !== AppType.completion ? t('appDebug.chatSubTitle') : t('appDebug.completionSubTitle')}</div>
{!readonly && (
@ -186,14 +186,14 @@ const Prompt: FC<ISimplePromptInput> = ({
)}
<PromptEditorHeightResizeWrap
className='px-4 pt-2 min-h-[228px] bg-white rounded-t-xl text-sm text-gray-700'
className='min-h-[228px] rounded-t-xl bg-white px-4 pt-2 text-sm text-gray-700'
height={editorHeight}
minHeight={minHeight}
onHeightChange={setEditorHeight}
hideResize={noResize}
footer={(
<div className='pl-4 pb-2 flex bg-white rounded-b-xl'>
<div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{promptTemplate.length}</div>
<div className='flex rounded-b-xl bg-white pb-2 pl-4'>
<div className="h-[18px] rounded-md bg-gray-100 px-1 text-xs leading-[18px] text-gray-500">{promptTemplate.length}</div>
</div>
)}
>

2
web/app/components/app/configuration/config-var/config-modal/index.tsx
Unescape Escape View File

@ -233,7 +233,7 @@ 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>
</div>

10
web/app/components/app/configuration/config-var/config-select/index.tsx
Unescape Escape View File

@ -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>
)

4
web/app/components/app/configuration/config-var/index.tsx
Unescape Escape View File

@ -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='text-text-tertiary pb-1 pt-2 text-xs'>{t('appDebug.notSetVar')}</div>
</div>
)}
{hasVar && (
<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'>
{promptVariables.map(({ key, name, type, required, config, icon, icon_background }, index) => (
<VarItem
key={index}

6
web/app/components/app/configuration/config-var/select-type-item/index.tsx
Unescape Escape View File

@ -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')}
'border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary flex h-[58px] flex-col items-center justify-center space-y-1 rounded-lg border',
selected ? 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs system-xs-medium border-[1.5px]' : ' hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs system-xs-regular cursor-pointer')}
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>

8
web/app/components/app/configuration/config-var/select-var-type.tsx
Unescape Escape View File

@ -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>

22
web/app/components/app/configuration/config-var/var-item.tsx
Unescape Escape View File

@ -33,37 +33,37 @@ 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={cn('bg-components-panel-on-panel-item-bg border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover group relative mb-1 flex w-full items-center rounded-lg border-[0.5px] py-2 pl-2.5 pr-3 last-of-type:mb-0 hover:shadow-sm', isDeleting && 'hover:bg-state-destructive-hover border-state-destructive-border', readonly && 'cursor-not-allowed opacity-30')}>
<VarIcon className='text-text-accent mr-1 h-4 w-4 shrink-0' />
<div className='grow'>
<div className='flex items-center h-[18px]'>
<div className='flex h-[18px] items-center'>
<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-regular text-text-quaternary px-1'>·</span>
<span className='system-xs-medium text-text-tertiary'>{label}</span>
</div>
<div className='group-hover:hidden flex items-center'>
<div className='flex items-center group-hover:hidden'>
{required && <Badge text='required' />}
<span className='pl-2 pr-1 system-xs-regular text-text-tertiary'>{type}</span>
<span className='system-xs-regular text-text-tertiary pl-2 pr-1'>{type}</span>
<IconTypeIcon type={type as IInputTypeIconProps['type']} className='text-text-tertiary' />
</div>
</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='absolute bottom-0 right-0 top-0 hidden w-[124px] items-center justify-end rounded-lg pr-2 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='text-text-tertiary h-4 w-4' />
</div>
<div
className='flex items-center justify-center w-6 h-6 text-text-tertiary cursor-pointer hover:text-text-destructive'
className='text-text-tertiary hover:text-text-destructive flex h-6 w-6 cursor-pointer items-center justify-center'
onClick={onRemove}
onMouseOver={() => setIsDeleting(true)}
onMouseLeave={() => setIsDeleting(false)}
>
<RiDeleteBinLine className='w-4 h-4' />
<RiDeleteBinLine className='h-4 w-4' />
</div>
</div>
)}

14
web/app/components/app/configuration/config-vision/index.tsx
Unescape Escape View File

@ -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='border-effects-highlight bg-background-section-burn mt-2 flex items-center gap-2 rounded-xl border-l-[0.5px] border-t-[0.5px] 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='border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600 rounded-lg border-[0.5px] p-1'>
<Vision className='text-text-primary-on-surface h-4 w-4' />
</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='text-text-secondary system-sm-semibold mr-1'>{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='bg-divider-regular ml-1 mr-3 h-3.5 w-[1px]'></div>
<Switch
defaultValue={isImageEnabled}
onChange={handleChange}

8
web/app/components/app/configuration/config-vision/param-config-content.tsx
Unescape Escape View File

@ -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-text-primary text-base font-semibold leading-6'>{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-text-secondary text-[13px] font-semibold leading-[18px]'>{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='text-text-secondary mb-2 text-[13px] font-semibold leading-[18px]'>{t('appDebug.vision.visionSettings.uploadMethod')}</div>
<div className='flex items-center gap-1'>
<OptionCard
className='grow'

4
web/app/components/app/configuration/config-vision/param-config.tsx
Unescape Escape View File

@ -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='bg-components-panel-bg border-components-panel-border w-80 space-y-3 rounded-lg border-[0.5px] p-4 shadow-lg sm:w-[412px]'>
<ParamConfigContent />
</div>
</PortalToFollowElemContent>

4
web/app/components/app/configuration/config/agent-setting-button.tsx
Unescape Escape View File

@ -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='text-text-tertiary mr-1 h-4 w-4' />
{t('appDebug.agent.setting.name')}
</Button>
{isShowAgentSetting && (

32
web/app/components/app/configuration/config/agent/agent-setting/index.tsx
Unescape Escape View File

@ -36,47 +36,47 @@ 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
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='bg-components-panel-bg border-components-panel-border flex h-full w-[640px] flex-col overflow-hidden rounded-xl border-[0.5px] 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 flex-col text-base font-semibold text-text-primary'>
<div className='border-divider-regular flex h-14 shrink-0 items-center justify-between border-b pl-6 pr-5'>
<div className='text-text-primary flex flex-col text-base font-semibold'>
<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='text-text-tertiary h-4 w-4' />
</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-text-primary text-[13px] font-medium leading-[18px]'>{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')}
@ -99,7 +99,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="bg-components-input-bg-normal text-text-primary placeholder:text-text-tertiary focus:ring-primary-600 block h-7 w-11 rounded-lg border-0 px-1.5 pl-1 leading-7 focus:ring-1 focus:ring-inset"
value={tempPayload.max_iteration}
onChange={(e) => {
let value = Number.parseInt(e.target.value, 10)
@ -117,20 +117,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='bg-background-section-burn shadow-xs rounded-xl py-2'>
<div className='text-text-secondary flex h-8 items-center px-4 text-sm font-semibold leading-6'>{t('tools.builtInPromptTitle')}</div>
<div className='text-text-secondary h-[396px] overflow-y-auto whitespace-pre-line px-4 text-sm font-normal leading-5'>
{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='bg-components-input-bg-normal text-text-tertiary inline-flex h-5 items-center rounded-md px-1 text-xs font-medium leading-[18px]'>{(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='bg-background-section-burn border-divider-regular sticky bottom-0 z-[5] flex w-full justify-end border-t px-6 py-4'
>
<Button
onClick={onCancel}

4
web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
Unescape Escape View File

@ -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, 'bg-background-section-burn flex h-12 items-center justify-between rounded-lg 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='text-text-secondary ml-3 mr-1 text-sm font-semibold leading-6'>{name}</div>
<Tooltip
popupContent={
<div className='w-[180px]'>

48
web/app/components/app/configuration/config/agent/agent-tools/index.tsx
Unescape Escape View File

@ -121,10 +121,10 @@ 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}&nbsp;{t('appDebug.agent.tools.enabled')}</div>
<div className='text-text-tertiary text-xs font-normal leading-[18px]'>{tools.filter((item: any) => !!item.enabled).length}/{tools.length}&nbsp;{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>
<div className='bg-divider-regular ml-3 mr-1 h-3.5 w-px'></div>
<ToolPicker
trigger={<OperationBtn type="add" />}
isShow={isShowChooseTool}
@ -139,25 +139,25 @@ 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',
'bg-components-panel-on-panel-item-bg border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover cursor group relative flex w-full items-center justify-between rounded-lg border-[0.5px] p-1.5 pr-2 last-of-type:mb-0 hover:shadow-sm',
isDeleting === index && 'hover:bg-state-destructive-hover border-state-destructive-border',
)}
>
<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' : '',
)}
>
@ -168,34 +168,34 @@ const AgentTools: FC = () => {
needsDelay
popupContent={
<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-secondary mb-1.5'>{item.tool_name}</div>
<div className='text-text-tertiary mb-1.5'>{t('tools.toolNameUsageTip')}</div>
<div className='text-text-accent cursor-pointer' 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='text-text-tertiary h-4 w-4' />
</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='text-text-tertiary hover:text-text-destructive cursor-pointer rounded-md p-1'
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='text-text-tertiary h-4 w-4' />
</div>
</Tooltip>
)}
<div
className='p-1 rounded-md text-text-tertiary cursor-pointer hover:text-text-destructive'
className='text-text-tertiary hover:text-text-destructive cursor-pointer rounded-md p-1'
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>
)}

34
web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
Unescape Escape View File

@ -119,7 +119,7 @@ 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'>
@ -132,7 +132,7 @@ const SettingBuiltInTool: FC<Props> = ({
)}
</div>
{item.human_description && (
<div className='mt-0.5 text-text-tertiary system-xs-regular'>
<div className='text-text-tertiary system-xs-regular mt-0.5'>
{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('!bg-components-panel-bg border-components-panel-border mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] !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='border-divider-subtle relative border-b 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='text-text-accent-secondary system-xs-semibold-uppercase mb-2 flex cursor-pointer items-center gap-1'
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='text-text-primary system-md-semibold mt-1'>{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='text-text-primary system-sm-semibold-uppercase p-4 pb-1'>{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='bg-components-panel-bg border-divider-regular mt-2 flex shrink-0 justify-end space-x-2 rounded-b-[10px] border-t 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>

10
web/app/components/app/configuration/config/agent/prompt-editor.tsx
Unescape Escape View File

@ -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, 'hover:shadow-xs flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl bg-white pb-1 pl-4 pr-3 pt-2')}>
<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>

32
web/app/components/app/configuration/config/assistant-type-picker/index.tsx
Unescape Escape View File

@ -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', 'bg-gray-25 mb-2 rounded-xl 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 ? 'hover:bg-primary-50 group cursor-pointer' : '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='border-black/8 relative left-0.5 w-[480px] rounded-xl border 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'

4
web/app/components/app/configuration/config/automatic/automatic-btn.tsx
Unescape Escape View File

@ -13,10 +13,10 @@ const AutomaticBtn: FC<IAutomaticBtnProps> = ({
const { t } = useTranslation()
return (
<div className='flex space-x-1 items-center !h-8 cursor-pointer'
<div className='flex !h-8 cursor-pointer items-center space-x-1'
onClick={onClick}
>
<Generator className='w-3.5 h-3.5 text-indigo-600' />
<Generator className='h-3.5 w-3.5 text-indigo-600' />
<span className='text-xs font-semibold text-indigo-600'>{t('appDebug.operation.automatic')}</span>
</div>
)

46
web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
Unescape Escape View File

@ -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-gray-100 rounded-lg cursor-pointer'
className='mr-1 mt-2 flex h-7 shrink-0 cursor-pointer items-center rounded-lg bg-gray-100 px-2'
onClick={onClick}
>
<Icon className='w-4 h-4 text-gray-500'></Icon>
<Icon className='h-4 w-4 text-gray-500'></Icon>
<div className='ml-1 text-xs font-medium text-gray-700'>{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-gray-400'>{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-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.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-gray-100'>
<div className='h-full w-[570px] shrink-0 overflow-y-auto border-r border-gray-100 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-gray-500'>{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-gray-500 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-gray-500'>{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-gray-900'>{t('appDebug.generate.instruction')}</div>
<div className='mb-2 text-sm font-medium leading-5 text-gray-900'>{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-gray-800'>{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-gray-800'>{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='border-effects-highlight bg-background-section-burn mb-1 rounded-xl border-l-[0.5px] border-t-[0.5px] 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='border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500 shrink-0 rounded-lg border-[0.5px] p-1'>
<LoveMessage className='text-text-primary-on-surface h-4 w-4' />
</div>
<div className='grow flex items-center text-text-secondary system-sm-semibold'>
<div className='text-text-secondary system-sm-semibold flex grow items-center'>
{t('appDebug.feature.conversationOpener.title')}
</div>
</div>
<div className='min-h-8 text-text-tertiary system-xs-regular'>{res.opening_statement}</div>
<div className='text-text-tertiary system-xs-regular min-h-8'>{res.opening_statement}</div>
</div>
</div>
)}
@ -301,7 +301,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
)}
</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)

32
web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
Unescape Escape View File

@ -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)

14
web/app/components/app/configuration/config/config-document.tsx
Unescape Escape View File

@ -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='bg-background-section-burn mt-2 flex items-center gap-2 rounded-xl border-l-[0.5px] border-t-[0.5px] 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='border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600 rounded-lg border-[0.5px] p-1'>
<Document className='text-text-primary-on-surface h-4 w-4' />
</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='text-text-secondary system-sm-semibold mr-1'>{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='bg-divider-subtle ml-1 mr-3 h-3.5 w-[1px]'></div>
<Switch
defaultValue={isDocumentEnabled}
onChange={handleChange}

2
web/app/components/app/configuration/config/index.tsx
Unescape Escape View File

@ -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

4
web/app/components/app/configuration/ctrl-btn-group/index.tsx
Unescape Escape View File

@ -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>

10
web/app/components/app/configuration/dataset-config/card-item/index.tsx
Unescape Escape View File

@ -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>

28
web/app/components/app/configuration/dataset-config/card-item/item.tsx
Unescape Escape View File

@ -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('bg-components-panel-on-panel-item-bg border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover group relative mb-1 flex w-full items-center rounded-lg border-[0.5px] py-2 pl-2.5 pr-3 last-of-type:mb-0 hover:shadow-sm', isDeleting && 'hover:bg-state-destructive-hover border-state-destructive-border')}>
{
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='text-text-secondary grow truncate text-[13px] font-medium' 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='text-text-tertiary h-4 w-4' />
</div>
}
<div
className='flex items-center justify-center w-6 h-6 text-text-tertiary cursor-pointer hover:text-text-destructive'
className='text-text-tertiary hover:text-text-destructive flex h-6 w-6 cursor-pointer items-center justify-center'
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'>

8
web/app/components/app/configuration/dataset-config/context-var/index.tsx
Unescape Escape View File

@ -14,12 +14,12 @@ 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='text-text-accent h-4 w-4' />
</div>
<div className='mr-1 text-sm font-medium text-text-secondary'>{t('appDebug.feature.dataSet.queryVariable.title')}</div>
<div className='text-text-secondary mr-1 text-sm font-medium'>{t('appDebug.feature.dataSet.queryVariable.title')}</div>
<Tooltip
popupContent={
<div className='w-[180px]'>

18
web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
Unescape Escape View File

@ -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,10 +56,10 @@ 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]' : ' hover:bg-components-button-secondary-bg border-components-button-secondary-border text-text-accent',
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
shadow-xs flex h-8 cursor-pointer items-center justify-center space-x-1 rounded-lg border px-2
text-[13px] font-medium
`)}>
<div>
@ -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 && 'text-text-tertiary rotate-180', '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='bg-components-panel-bg border-components-panel-border max-h-[50vh] w-[240px] overflow-y-auto rounded-lg border 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='hover:bg-state-base-hover flex cursor-pointer rounded-lg px-3 py-1'
onClick={() => {
onChange(value)
setOpen(false)
@ -91,9 +91,9 @@ 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='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 className='bg-components-panel-bg border-components-panel-border w-[240px] rounded-lg border p-6 shadow-lg'>
<div className='text-text-secondary mb-1 text-sm font-medium'>{t('appDebug.feature.dataSet.queryVariable.noVar')}</div>
<div className='text-text-tertiary text-xs leading-normal'>{t('appDebug.feature.dataSet.queryVariable.noVarTip')}</div>
</div>
)}

4
web/app/components/app/configuration/dataset-config/index.tsx
Unescape Escape View File

@ -130,7 +130,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}
@ -144,7 +144,7 @@ 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='text-text-tertiary pb-1 pt-2 text-xs'>{t('appDebug.feature.dataSet.noData')}</div>
</div>
)}

Some files were not shown because too many files have changed in this diff Show More

Write Preview
Loading…
Cancel
Save