ngskcloud
/
gcgj-dify-1.7.0
17
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) { if (!appDetail) {
return ( 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 /> <Loading />
</div> </div>
) )
} }
return ( return (
<div className={cn(s.app, 'flex relative', 'overflow-hidden')}> <div className={cn(s.app, 'relative flex', 'overflow-hidden')}>
{appDetail && ( {appDetail && (
<AppSideBar title={appDetail.name} icon={appDetail.icon} icon_background={appDetail.icon_background as string} desc={appDetail.mode} navigation={navigation} /> <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 <Loading />
return ( 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 <AppCard
appInfo={appDetail} appInfo={appDetail}
cardType="webapp" 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 ( return (
<div> <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> <span className='mr-3'>{t('appOverview.analysis.title')}</span>
<SimpleSelect <SimpleSelect
items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))} 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> </div>
{!isWorkflow && ( {!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} /> <ConversationsChart period={period} id={appId} />
<EndUsersChart period={period} id={appId} /> <EndUsersChart period={period} id={appId} />
</div> </div>
)} )}
{!isWorkflow && ( {!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 {isChatApp
? ( ? (
<AvgSessionInteractions period={period} id={appId} /> <AvgSessionInteractions period={period} id={appId} />
@ -79,24 +79,24 @@ export default function ChartView({ appId }: IChartViewProps) {
</div> </div>
)} )}
{!isWorkflow && ( {!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} /> <UserSatisfactionRate period={period} id={appId} />
<CostChart period={period} id={appId} /> <CostChart period={period} id={appId} />
</div> </div>
)} )}
{!isWorkflow && isChatApp && ( {!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} /> <MessagesChart period={period} id={appId} />
</div> </div>
)} )}
{isWorkflow && ( {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} /> <WorkflowMessagesChart period={period} id={appId} />
<WorkflowDailyTerminalsChart period={period} id={appId} /> <WorkflowDailyTerminalsChart period={period} id={appId} />
</div> </div>
)} )}
{isWorkflow && ( {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} /> <WorkflowCostChart period={period} id={appId} />
<AvgUserInteractions period={period} id={appId} /> <AvgUserInteractions period={period} id={appId} />
</div> </div>

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

@ -13,7 +13,7 @@ const Overview = async ({
}: IDevelopProps) => { }: IDevelopProps) => {
const { appId } = await params const { appId } = await params
return ( 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 /> <ApikeyInfoPanel />
<TracingPanel /> <TracingPanel />
<CardView appId={appId} /> <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}> <PortalToFollowElemTrigger onClick={handleTrigger}>
<div className={cn(className, 'p-1 rounded-md')}> <div className={cn(className, 'rounded-md p-1')}>
<RiEqualizer2Line className='w-4 h-4 text-text-tertiary' /> <RiEqualizer2Line className='text-text-tertiary h-4 w-4' />
</div> </div>
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[11]'> <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 ( return (
<div className='w-[420px] p-4 rounded-2xl bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl'> <div className='bg-components-panel-bg border-components-panel-border w-[420px] rounded-2xl border-[0.5px] p-4 shadow-xl'>
<div className='flex justify-between items-center'> <div className='flex items-center justify-between'>
<div className='flex items-center'> <div className='flex items-center'>
<TracingIcon size='md' className='mr-2' /> <TracingIcon size='md' className='mr-2' />
<div className='text-text-primary title-2xl-semibold'>{t(`${I18N_PREFIX}.tracing`)}</div> <div className='text-text-primary title-2xl-semibold'>{t(`${I18N_PREFIX}.tracing`)}</div>
</div> </div>
<div className='flex items-center'> <div className='flex items-center'>
<Indicator color={enabled ? 'green' : 'gray'} /> <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'}`)} {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
</div> </div>
{!readOnly && ( {!readOnly && (
@ -189,7 +189,7 @@ const ConfigPopup: FC<PopupProps> = ({
</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}.tracingDescription`)} {t(`${I18N_PREFIX}.tracingDescription`)}
</div> </div>
<Divider className='my-3' /> <Divider className='my-3' />
@ -211,7 +211,7 @@ const ConfigPopup: FC<PopupProps> = ({
<div className='mt-2 space-y-2'> <div className='mt-2 space-y-2'>
{configuredProviderPanel()} {configuredProviderPanel()}
</div> </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'> <div className='mt-2 space-y-2'>
{moreProviderPanel()} {moreProviderPanel()}
</div> </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 ( return (
<div className={cn(className)}> <div className={cn(className)}>
<div className='flex py-[7px]'> <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>} {isRequired && <span className='ml-0.5 text-xs font-semibold text-[#D92D20]'>*</span>}
</div> </div>
<Input <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() const { t } = useTranslation()
return ( 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')} {t('common.appMenus.overview')}
</div> </div>
) )
@ -141,7 +141,7 @@ const Panel: FC = () => {
}, [setControlShowPopup]) }, [setControlShowPopup])
if (!isLoaded) { if (!isLoaded) {
return ( return (
<div className='flex items-center justify-between mb-3'> <div className='mb-3 flex items-center justify-between'>
<Title className='h-[41px]' /> <Title className='h-[41px]' />
<div className='w-[200px]'> <div className='w-[200px]'>
<Loading /> <Loading />
@ -151,11 +151,11 @@ const Panel: FC = () => {
} }
return ( 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]' /> <Title className='h-[41px]' />
<div <div
className={cn( 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', controlShowPopup && 'bg-background-default-lighter border-effects-highlight-lightmode-off',
)} )}
onClick={showPopup} onClick={showPopup}
@ -163,7 +163,7 @@ const Panel: FC = () => {
{!inUseTracingProvider && ( {!inUseTracingProvider && (
<> <>
<TracingIcon size='md' /> <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()}> <div className='flex items-center' onClick={e => e.stopPropagation()}>
<ConfigButton <ConfigButton
appId={appId} appId={appId}
@ -182,8 +182,8 @@ const Panel: FC = () => {
/> />
</div> </div>
<Divider type='vertical' className='h-3.5' /> <Divider type='vertical' className='h-3.5' />
<div className='p-1 rounded-md'> <div className='rounded-md p-1'>
<RiArrowDownDoubleLine className='w-4 h-4 text-text-tertiary' /> <RiArrowDownDoubleLine className='text-text-tertiary h-4 w-4' />
</div> </div>
</> </>
)} )}
@ -191,7 +191,7 @@ const Panel: FC = () => {
<> <>
<div className='ml-4 mr-1 flex items-center'> <div className='ml-4 mr-1 flex items-center'>
<Indicator color={enabled ? 'green' : 'gray'} /> <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'}`)} {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
</div> </div>
</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 {!isShowRemoveConfirm
? ( ? (
<PortalToFollowElem open> <PortalToFollowElem open>
<PortalToFollowElemContent className='w-full h-full z-[60]'> <PortalToFollowElemContent className='z-[60] h-full w-full'>
<div className='fixed inset-0 flex items-center justify-center bg-background-overlay'> <div className='bg-background-overlay fixed inset-0 flex items-center justify-center'>
<div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-components-panel-bg shadow-xl rounded-2xl overflow-y-auto'> <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='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 className='title-2xl-semibold text-text-primary'>{t(`${I18N_PREFIX}.title`)}{t(`app.tracing.${type}.title`)}</div>
</div> </div>
@ -265,20 +265,20 @@ const ProviderConfigModal: FC<Props> = ({
)} )}
</div> </div>
<div className='my-8 flex justify-between items-center h-8'> <div className='my-8 flex h-8 items-center justify-between'>
<a <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' target='_blank'
href={docURL[type]} href={docURL[type]}
> >
<span>{t(`${I18N_PREFIX}.viewDocsLink`, { key: t(`app.tracing.${type}.title`) })}</span> <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> </a>
<div className='flex items-center'> <div className='flex items-center'>
{isEdit && ( {isEdit && (
<> <>
<Button <Button
className='h-9 text-sm font-medium text-text-secondary' className='text-text-secondary h-9 text-sm font-medium'
onClick={showRemoveConfirm} onClick={showRemoveConfirm}
> >
<span className='text-[#D92D20]'>{t('common.operation.remove')}</span> <span className='text-[#D92D20]'>{t('common.operation.remove')}</span>
@ -287,7 +287,7 @@ const ProviderConfigModal: FC<Props> = ({
</> </>
)} )}
<Button <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} onClick={onCancel}
> >
{t('common.operation.cancel')} {t('common.operation.cancel')}
@ -304,9 +304,9 @@ const ProviderConfigModal: FC<Props> = ({
</div> </div>
</div> </div>
<div className='border-t-[0.5px] border-divider-regular'> <div className='border-divider-regular border-t-[0.5px]'>
<div className='flex justify-center items-center py-3 bg-background-section-burn text-xs text-text-tertiary'> <div className='bg-background-section-burn text-text-tertiary flex items-center justify-center py-3 text-xs'>
<Lock01 className='mr-1 w-3 h-3 text-text-tertiary' /> <Lock01 className='text-text-tertiary mr-1 h-3 w-3' />
{t('common.modelProvider.encrypted.front')} {t('common.modelProvider.encrypted.front')}
<a <a
className='text-primary-600 mx-1' 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 ( return (
<div <div
className={cn( 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 ? 'bg-background-section border-components-option-card-option-selected-border' : 'border-transparent',
!isChosen && hasConfigured && !readOnly && 'cursor-pointer', !isChosen && hasConfigured && !readOnly && 'cursor-pointer',
)} )}
onClick={handleChosen} 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'> <div className='flex items-center'>
<Icon className='h-6' /> <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> </div>
{!readOnly && ( {!readOnly && (
<div className={'flex justify-between items-center space-x-1'}> <div className={'flex items-center justify-between space-x-1'}>
{hasConfigured && ( {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} > <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='w-3 h-3' /> <View className='h-3 w-3' />
<div className='text-xs font-medium'>{t(`${I18N_PREFIX}.view`)}</div> <div className='text-xs font-medium'>{t(`${I18N_PREFIX}.view`)}</div>
</div> </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} 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 className='text-xs font-medium'>{t(`${I18N_PREFIX}.config`)}</div>
</div> </div>
</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`)} {t(`${I18N_PREFIX}.${type}.description`)}
</div> </div>
</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] const sizeClass = sizeClassMap[size]
return ( return (
<div className={cn(className, sizeClass, 'bg-primary-500 shadow-md')}> <div className={cn(className, sizeClass, 'bg-primary-500 shadow-md')}>
<Icon className='w-full h-full' /> <Icon className='h-full w-full' />
</div> </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 = () => { const Page = () => {
return ( return (
<div className='w-full h-full overflow-x-auto'> <div className='h-full w-full overflow-x-auto'>
<Workflow /> <Workflow />
</div> </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" /> <Divider className="!my-1" />
<div <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} 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> </div>
</> </>
)} )}
@ -277,9 +277,9 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
e.preventDefault() e.preventDefault()
getRedirection(isCurrentWorkspaceEditor, app, push) 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'> <div className='relative shrink-0'>
<AppIcon <AppIcon
size="large" size="large"
@ -288,13 +288,13 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
background={app.icon_background} background={app.icon_background}
imageUrl={app.icon_url} 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>
<div className='grow w-0 py-[1px]'> <div className='w-0 grow py-[1px]'>
<div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'> <div className='text-text-secondary flex items-center text-sm font-semibold leading-5'>
<div className='truncate' title={app.name}>{app.name}</div> <div className='truncate' title={app.name}>{app.name}</div>
</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 === '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 === 'chat' && <div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>}
{app.mode === 'agent-chat' && <div className='truncate'>{t('app.types.agent').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>
</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 <div
className={cn(tags.length ? 'line-clamp-2' : 'line-clamp-4', 'group-hover:line-clamp-2')} className={cn(tags.length ? 'line-clamp-2' : 'line-clamp-4', 'group-hover:line-clamp-2')}
title={app.description} title={app.description}
@ -312,17 +312,17 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
</div> </div>
</div> </div>
<div className={cn( <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', tags.length ? 'flex' : '!hidden group-hover:!flex',
)}> )}>
{isCurrentWorkspaceEditor && ( {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.stopPropagation()
e.preventDefault() e.preventDefault()
}}> }}>
<div className={cn( <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', tags.length ? '!block' : '!hidden',
)}> )}>
<TagSelector <TagSelector
@ -336,23 +336,23 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
/> />
</div> </div>
</div> </div>
<div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px]' /> <div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 group-hover:!flex' />
<div className='!hidden group-hover:!flex shrink-0'> <div className='!hidden shrink-0 group-hover:!flex'>
<CustomPopover <CustomPopover
htmlContent={<Operations />} htmlContent={<Operations />}
position="br" position="br"
trigger="click" trigger="click"
btnElement={ btnElement={
<div <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> </div>
} }
btnClassName={open => btnClassName={open =>
cn( cn(
open ? '!bg-black/5 !shadow-none' : '!bg-transparent', 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={ popupClassName={
@ -360,7 +360,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
? '!w-[256px] translate-x-[-224px]' ? '!w-[256px] translate-x-[-224px]'
: '!w-[160px] translate-x-[-128px]' : '!w-[160px] translate-x-[-128px]'
} }
className={'h-fit !z-20'} className={'!z-20 h-fit'}
/> />
</div> </div>
</> </>

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

@ -78,10 +78,10 @@ const Apps = () => {
const anchorRef = useRef<HTMLDivElement>(null) const anchorRef = useRef<HTMLDivElement>(null)
const options = [ const options = [
{ value: 'all', text: t('app.types.all'), icon: <RiApps2Line 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='w-[14px] h-[14px] mr-1' /> }, { 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='w-[14px] h-[14px] mr-1' /> }, { 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='w-[14px] h-[14px] mr-1' /> }, { value: 'workflow', text: t('app.types.workflow'), icon: <RiExchange2Line className='mr-1 h-[14px] w-[14px]' /> },
] ]
useEffect(() => { useEffect(() => {
@ -128,7 +128,7 @@ const Apps = () => {
return ( 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 <TabSliderNew
value={activeTab} value={activeTab}
onChange={setActiveTab} onChange={setActiveTab}
@ -153,14 +153,14 @@ const Apps = () => {
</div> </div>
</div> </div>
{(data && data[0].total > 0) {(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 {isCurrentWorkspaceEditor
&& <NewAppCard onSuccess={mutate} />} && <NewAppCard onSuccess={mutate} />}
{data.map(({ data: apps }) => apps.map(app => ( {data.map(({ data: apps }) => apps.map(app => (
<AppCard key={app.id} app={app} onRefresh={mutate} /> <AppCard key={app.id} app={app} onRefresh={mutate} />
)))} )))}
</div> </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 {isCurrentWorkspaceEditor
&& <NewAppCard className='z-10' onSuccess={mutate} />} && <NewAppCard className='z-10' onSuccess={mutate} />}
<NoAppsFound /> <NoAppsFound />
@ -180,14 +180,14 @@ function NoAppsFound() {
const { t } = useTranslation() const { t } = useTranslation()
function renderDefaultCard() { function renderDefaultCard() {
const defaultCards = Array.from({ length: 36 }, (_, index) => ( 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 defaultCards
} }
return ( return (
<> <>
{renderDefaultCard()} {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> <span className='system-md-medium text-text-tertiary'>{t('app.newApp.noAppsFound')}</span>
</div> </div>
</> </>

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

@ -47,22 +47,22 @@ const CreateAppCard = (
return ( return (
<div <div
ref={ref} 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='grow rounded-t-xl p-2'>
<div className='px-6 pt-2 pb-1 text-xs font-medium leading-[18px] text-text-tertiary'>{t('app.createApp')}</div> <div className='text-text-tertiary px-6 pb-1 pt-2 text-xs font-medium leading-[18px]'>{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)}> <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='shrink-0 mr-2 w-4 h-4' /> <FilePlus01 className='mr-2 h-4 w-4 shrink-0' />
{t('app.newApp.startFromBlank')} {t('app.newApp.startFromBlank')}
</button> </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)}> <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='shrink-0 mr-2 w-4 h-4' /> <FilePlus02 className='mr-2 h-4 w-4 shrink-0' />
{t('app.newApp.startFromTemplate')} {t('app.newApp.startFromTemplate')}
</button> </button>
<button <button
onClick={() => setShowCreateFromDSLModal(true)} 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'> 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='shrink-0 mr-2 w-4 h-4' /> <FileArrow01 className='mr-2 h-4 w-4 shrink-0' />
{t('app.importDSL')} {t('app.importDSL')}
</button> </button>
</div> </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) const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
return ( 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 /> <Apps />
{systemFeatures.license.status === LicenseStatus.NONE && <footer className='px-12 py-6 grow-0 shrink-0'> {systemFeatures.license.status === LicenseStatus.NONE && <footer className='shrink-0 grow-0 px-12 py-6'>
<h3 className='text-xl font-semibold leading-tight text-gradient'>{t('app.join')}</h3> <h3 className='text-gradient text-xl font-semibold leading-tight'>{t('app.join')}</h3>
<p className='mt-1 system-sm-regular text-text-tertiary'>{t('app.communityIntro')}</p> <p className='system-sm-regular text-text-tertiary mt-1'>{t('app.communityIntro')}</p>
<div className='flex items-center gap-2 mt-3'> <div className='mt-3 flex items-center gap-2'>
<Link className={style.socialMediaLink} target='_blank' rel='noopener noreferrer' href='https://github.com/langgenius/dify'> <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>
<Link className={style.socialMediaLink} target='_blank' rel='noopener noreferrer' href='https://discord.gg/FngNHpbcY7'> <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> </Link>
</div> </div>
</footer>} </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> <span>{relatedAppsTotal || '--'} {t('common.datasetMenus.relatedApp')}</span>
<RiInformation2Line className='h-4 w-4' /> <RiInformation2Line className='h-4 w-4' />
</div> </div>
@ -117,13 +117,13 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
noDecoration noDecoration
needsDelay needsDelay
popupContent={ popupContent={
<div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4'> <div className='border-components-panel-border bg-components-panel-bg-blur w-[240px] rounded-xl border-[0.5px] p-4'>
<div className='inline-flex rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle p-2'> <div className='border-components-panel-border-subtle bg-background-default-subtle inline-flex rounded-lg border-[0.5px] p-2'>
<RiApps2AddLine className='h-4 w-4 text-text-tertiary' /> <RiApps2AddLine className='text-text-tertiary h-4 w-4' />
</div> </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 <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={ href={
locale === LanguagesSupported[1] locale === LanguagesSupported[1]
? 'https://docs.dify.ai/v/zh-hans/guides/knowledge-base/integrate-knowledge-within-application' ? '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>
} }
> >
<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> <span>{t('common.datasetMenus.noRelatedApp')}</span>
<RiInformation2Line className='h-4 w-4' /> <RiInformation2Line className='h-4 w-4' />
</div> </div>
@ -220,7 +220,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
dataset: datasetRes, dataset: datasetRes,
mutateDatasetRes: () => mutateDatasetRes(), 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> </DatasetDetailContext.Provider>
</div> </div>
) )

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

@ -9,7 +9,7 @@ const Settings = async () => {
return ( return (
<div className='h-full overflow-y-auto'> <div className='h-full overflow-y-auto'>
<div className='px-6 py-3'> <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 className='system-sm-regular text-text-tertiary'>{t('desc')}</div>
</div> </div>
<Form /> <Form />

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

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

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

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

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

@ -84,17 +84,17 @@ const DatasetCard = ({
} }
return ( return (
<div className="relative w-full py-1" onMouseLeave={onMouseLeave}> <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}> <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-gray-700 text-sm'>{t('common.operation.settings')}</span> <span className='text-sm text-gray-700'>{t('common.operation.settings')}</span>
</div> </div>
{props.showDelete && ( {props.showDelete && (
<> <>
<Divider className="!my-1" /> <Divider className="!my-1" />
<div <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} 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')} {t('common.operation.delete')}
</span> </span>
</div> </div>
@ -111,7 +111,7 @@ const DatasetCard = ({
return ( return (
<> <>
<div <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} data-disable-nprogress={true}
onClick={(e) => { onClick={(e) => {
e.preventDefault() e.preventDefault()
@ -121,25 +121,25 @@ const DatasetCard = ({
}} }}
> >
{isExternalProvider(dataset.provider) && <CornerLabel label='External' className='absolute right-0' labelClassName='rounded-tr-xl' />} {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( <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', !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>
<div className='grow w-0 py-[1px]'> <div className='w-0 grow py-[1px]'>
<div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'> <div className='text-text-secondary flex items-center text-sm font-semibold leading-5'>
<div className={cn('truncate', !dataset.embedding_available && 'opacity-50 hover:opacity-100 text-text-tertiary')} title={dataset.name}>{dataset.name}</div> <div className={cn('truncate', !dataset.embedding_available && 'text-text-tertiary opacity-50 hover:opacity-100')} title={dataset.name}>{dataset.name}</div>
{!dataset.embedding_available && ( {!dataset.embedding_available && (
<Tooltip <Tooltip
popupContent={t('dataset.unavailableTip')} 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> </Tooltip>
)} )}
</div> </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 <div
className={cn('truncate', (!dataset.embedding_available || !dataset.document_count) && 'opacity-50')} 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')}`} 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>{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>{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> <span>{dataset.app_count}{t('dataset.appCount')}</span>
</> </>
} }
@ -162,7 +162,7 @@ const DatasetCard = ({
</div> </div>
<div <div
className={cn( 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', tags.length ? 'line-clamp-2' : 'line-clamp-4',
!dataset.embedding_available && 'opacity-50 hover:opacity-100', !dataset.embedding_available && 'opacity-50 hover:opacity-100',
)} )}
@ -170,15 +170,15 @@ const DatasetCard = ({
{dataset.description} {dataset.description}
</div> </div>
<div className={cn( <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', 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.stopPropagation()
e.preventDefault() e.preventDefault()
}}> }}>
<div className={cn( <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', tags.length ? '!block' : '!hidden',
)}> )}>
<TagSelector <TagSelector
@ -192,26 +192,26 @@ const DatasetCard = ({
/> />
</div> </div>
</div> </div>
<div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px] bg-gray-200' /> <div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 bg-gray-200 group-hover:!flex' />
<div className='!hidden group-hover:!flex shrink-0'> <div className='!hidden shrink-0 group-hover:!flex'>
<CustomPopover <CustomPopover
htmlContent={<Operations showDelete={!isCurrentWorkspaceDatasetOperator} />} htmlContent={<Operations showDelete={!isCurrentWorkspaceDatasetOperator} />}
position="br" position="br"
trigger="click" trigger="click"
btnElement={ btnElement={
<div <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> </div>
} }
btnClassName={open => btnClassName={open =>
cn( cn(
open ? '!bg-black/5 !shadow-none' : '!bg-transparent', 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>
</div> </div>

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

@ -6,8 +6,8 @@ const DatasetFooter = () => {
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<footer className='px-12 py-6 grow-0 shrink-0'> <footer className='shrink-0 grow-0 px-12 py-6'>
<h3 className='text-xl font-semibold leading-tight text-gradient'>{t('dataset.didYouKnow')}</h3> <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'> <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.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')} {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'}`}> <div className={`fixed right-16 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
{isTocExpanded {isTocExpanded
? ( ? (
<nav className="toc w-full bg-gray-50 p-4 rounded-lg shadow-md max-h-[calc(100vh-150px)] overflow-y-auto"> <nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-gray-50 p-4 shadow-md">
<div className="flex justify-between items-center mb-4"> <div className="mb-4 flex items-center justify-between">
<h3 className="text-lg font-semibold">{t('appApi.develop.toc')}</h3> <h3 className="text-lg font-semibold">{t('appApi.develop.toc')}</h3>
<button <button
onClick={() => setIsTocExpanded(false)} onClick={() => setIsTocExpanded(false)}
@ -86,7 +86,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
<li key={index}> <li key={index}>
<a <a
href={item.href} 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)} onClick={e => handleTocClick(e, item)}
> >
{item.text} {item.text}
@ -99,13 +99,13 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
: ( : (
<button <button
onClick={() => setIsTocExpanded(true)} 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> </button>
)} )}
</div> </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] {locale !== LanguagesSupported[1]
? <TemplateEn apiBaseUrl={apiBaseUrl} /> ? <TemplateEn apiBaseUrl={apiBaseUrl} />
: <TemplateZh 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() const { t } = useTranslation()
return ( return (
<div className='flex flex-col bg-background-default-dimm border-[0.5px] border-components-panel-border rounded-xl <div className='bg-background-default-dimm border-components-panel-border flex min-h-[160px] flex-col rounded-xl
min-h-[160px] transition-all duration-200 ease-in-out' 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='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 <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
bg-background-default-lighter group-hover:border-solid group-hover:border-effects-highlight group-hover:bg-background-default-dodge' 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>
<div className='system-md-semibold text-text-secondary group-hover:text-text-accent'>{t('dataset.createDataset')}</div> <div className='system-md-semibold text-text-secondary group-hover:text-text-accent'>{t('dataset.createDataset')}</div>
</div> </div>
</a> </a>
<div className='p-4 pt-0 text-text-tertiary system-xs-regular'>{t('dataset.createDatasetIntro')}</div> <div className='text-text-tertiary system-xs-regular p-4 pt-0'>{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'> <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> <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> </a>
</div> </div>
) )

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

@ -10,7 +10,7 @@ const Layout: FC<{
children: React.ReactNode children: React.ReactNode
}> = ({ children }) => { }> = ({ children }) => {
return ( 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} {children}
</div> </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 }, [message, tokenFromUrl]) // Added dependencies to useEffect
return ( return (
<div className="flex items-center justify-center h-full"> <div className="flex h-full items-center justify-center">
<div className={cn('flex flex-col items-center w-full grow justify-center', 'px-6', 'md:px-[108px]')}> <div className={cn('flex w-full grow flex-col items-center justify-center', 'px-6', 'md:px-[108px]')}>
<Loading type='area' /> <Loading type='area' />
</div> </div>
</div> </div>

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

@ -83,13 +83,13 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
return ( return (
<> <>
<div> <div>
<div className="relative group"> <div className="group relative">
<Avatar {...props} /> <Avatar {...props} />
<div <div
onClick={() => { setIsShowAvatarPicker(true) }} 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 /> <RiPencilLine />
</span> </span>
</div> </div>
@ -105,7 +105,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
<ImageInput onImageInput={handleImageInput} cropShape='round' /> <ImageInput onImageInput={handleImageInput} cropShape='round' />
<Divider className='m-0' /> <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)}> <Button className='w-full' onClick={() => setIsShowAvatarPicker(false)}>
{t('app.iconPicker.cancel')} {t('app.iconPicker.cancel')}
</Button> </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'> <div className='mr-3'>
<AppIcon size='tiny' /> <AppIcon size='tiny' />
</div> </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> </div>
) )
} }
return ( 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> <h4 className='title-2xl-semi-bold text-text-primary'>{t('common.account.myAccount')}</h4>
</div> </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} /> <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={ mutateUserProfile } size={64} />
<div className='ml-4'> <div className='ml-4'>
<p className='system-xl-semibold text-text-primary'>{userProfile.name}</p> <p className='system-xl-semibold text-text-primary'>{userProfile.name}</p>
@ -141,19 +141,19 @@ export default function AccountPage() {
</div> </div>
<div className='mb-8'> <div className='mb-8'>
<div className={titleClassName}>{t('common.account.name')}</div> <div className={titleClassName}>{t('common.account.name')}</div>
<div className='flex items-center justify-between gap-2 w-full mt-2'> <div className='mt-2 flex w-full items-center justify-between gap-2'>
<div className='flex-1 bg-components-input-bg-normal rounded-lg p-2 system-sm-regular text-components-input-text-filled '> <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> <span className='pl-1'>{userProfile.name}</span>
</div> </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')} {t('common.operation.edit')}
</div> </div>
</div> </div>
</div> </div>
<div className='mb-8'> <div className='mb-8'>
<div className={titleClassName}>{t('common.account.email')}</div> <div className={titleClassName}>{t('common.account.email')}</div>
<div className='flex items-center justify-between gap-2 w-full mt-2'> <div className='mt-2 flex w-full items-center justify-between gap-2'>
<div className='flex-1 bg-components-input-bg-normal rounded-lg p-2 system-sm-regular text-components-input-text-filled '> <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> <span className='pl-1'>{userProfile.email}</span>
</div> </div>
</div> </div>
@ -162,14 +162,14 @@ export default function AccountPage() {
systemFeatures.enable_email_password_login && ( systemFeatures.enable_email_password_login && (
<div className='mb-8 flex justify-between gap-2'> <div className='mb-8 flex justify-between gap-2'>
<div> <div>
<div className='mb-1 system-sm-semibold text-text-secondary'>{t('common.account.password')}</div> <div className='system-sm-semibold text-text-secondary mb-1'>{t('common.account.password')}</div>
<div className='mb-2 body-xs-regular text-text-tertiary'>{t('common.account.passwordTip')}</div> <div className='body-xs-regular text-text-tertiary mb-2'>{t('common.account.passwordTip')}</div>
</div> </div>
<Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button> <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
</div> </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='mb-8'>
<div className={titleClassName}>{t('common.account.langGeniusAccount')}</div> <div className={titleClassName}>{t('common.account.langGeniusAccount')}</div>
<div className={descriptionClassName}>{t('common.account.langGeniusAccountTip')}</div> <div className={descriptionClassName}>{t('common.account.langGeniusAccountTip')}</div>
@ -181,7 +181,7 @@ export default function AccountPage() {
wrapperClassName='mt-2' 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> </div>
{ {
editNameModalVisible && ( editNameModalVisible && (
@ -190,13 +190,13 @@ export default function AccountPage() {
onClose={() => setEditNameModalVisible(false)} onClose={() => setEditNameModalVisible(false)}
className={s.modal} 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> <div className={titleClassName}>{t('common.account.name')}</div>
<Input className='mt-2' <Input className='mt-2'
value={editName} value={editName}
onChange={e => setEditName(e.target.value)} 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 className='mr-2' onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
<Button <Button
disabled={editing || !editName} disabled={editing || !editName}
@ -219,7 +219,7 @@ export default function AccountPage() {
}} }}
className={s.modal} 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 && ( {userProfile.is_password_set && (
<> <>
<div className={titleClassName}>{t('common.account.currentPassword')}</div> <div className={titleClassName}>{t('common.account.currentPassword')}</div>
@ -242,7 +242,7 @@ export default function AccountPage() {
</div> </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')} {userProfile.is_password_set ? t('common.account.newPassword') : t('common.account.password')}
</div> </div>
<div className='relative mt-2'> <div className='relative mt-2'>
@ -261,7 +261,7 @@ export default function AccountPage() {
</Button> </Button>
</div> </div>
</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'> <div className='relative mt-2'>
<Input <Input
type={showConfirmPassword ? 'text' : 'password'} type={showConfirmPassword ? 'text' : 'password'}
@ -278,7 +278,7 @@ export default function AccountPage() {
</Button> </Button>
</div> </div>
</div> </div>
<div className='flex justify-end mt-10'> <div className='mt-10 flex justify-end'>
<Button className='mr-2' onClick={() => { <Button className='mr-2' onClick={() => {
setEditPasswordModalVisible(false) setEditPasswordModalVisible(false)
resetPasswordForm() resetPasswordForm()

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

@ -38,10 +38,10 @@ export default function AppSelector() {
<div> <div>
<MenuButton <MenuButton
className={` className={`
inline-flex items-center p-1x text-text-primary
rounded-[20px] p-1x text-sm mobile:px-1 inline-flex items-center
text-text-primary rounded-[20px]
mobile:px-1 text-sm
${open && 'bg-components-panel-bg-blur'} ${open && 'bg-components-panel-bg-blur'}
`} `}
> >
@ -59,8 +59,8 @@ export default function AppSelector() {
> >
<MenuItems <MenuItems
className=" className="
absolute -right-2 -top-1 w-60 max-w-80 divide-divider-subtle bg-components-panel-bg-blur absolute -right-2 -top-1
divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur w-60 max-w-80 origin-top-right divide-y rounded-lg
shadow-lg shadow-lg
" "
> >
@ -78,10 +78,10 @@ export default function AppSelector() {
<MenuItem> <MenuItem>
<div className='p-1' onClick={() => handleLogout()}> <div className='p-1' onClick={() => handleLogout()}>
<div <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' /> <LogOut01 className='text-text-tertiary mr-1 flex h-4 w-4' />
<div className='font-normal text-[14px] text-text-secondary'>{t('common.userProfile.logout')}</div> <div className='text-text-secondary text-[14px] font-normal'>{t('common.userProfile.logout')}</div>
</div> </div>
</div> </div>
</MenuItem> </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]) }, [getDeleteEmailVerifyCode, props])
return <> 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')} {t('common.account.deleteTip')}
</div> </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')} {t('common.account.deletePrivacyLinkTip')}
<Link href='https://dify.ai/privacy' className='text-text-accent'>{t('common.account.deletePrivacyLink')}</Link> <Link href='https://dify.ai/privacy' className='text-text-accent'>{t('common.account.deletePrivacyLink')}</Link>
</div> </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) => { <Input placeholder={t('common.account.deletePlaceholder') as string} onChange={(e) => {
setUserInputEmail(e.target.value) 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' 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> <Button className='w-full' onClick={props.onCancel}>{t('common.operation.cancel')}</Button>
</div> </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]" className="max-w-[480px]"
footer={false} 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) => { <Textarea rows={6} value={userFeedback} placeholder={t('common.account.feedbackPlaceholder') as string} onChange={(e) => {
setUserFeedback(e.target.value) 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' loading={isPending} variant='primary' onClick={handleSubmit}>{t('common.operation.submit')}</Button>
<Button className='w-full' onClick={handleSkip}>{t('common.operation.skip')}</Button> <Button className='w-full' onClick={handleSkip}>{t('common.operation.skip')}</Button>
</div> </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) } catch (error) { console.error(error) }
}, [emailToken, verificationCode, confirmDeleteAccount, props]) }, [emailToken, verificationCode, confirmDeleteAccount, props])
return <> 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')} {t('common.account.deleteTip')}
</div> </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')} {t('common.account.deletePrivacyLinkTip')}
<Link href='https://dify.ai/privacy' className='text-text-accent'>{t('common.account.deletePrivacyLink')}</Link> <Link href='https://dify.ai/privacy' className='text-text-accent'>{t('common.account.deletePrivacyLink')}</Link>
</div> </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) => { <Input minLength={6} maxLength={6} placeholder={t('common.account.verificationPlaceholder') as string} onChange={(e) => {
setVerificationCode(e.target.value) 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' 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> <Button className='w-full' onClick={props.onCancel}>{t('common.operation.cancel')}</Button>
<Countdown onResend={sendEmail} /> <Countdown onResend={sendEmail} />

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

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

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

@ -21,7 +21,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
<HeaderWrapper> <HeaderWrapper>
<Header /> <Header />
</HeaderWrapper> </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} {children}
</div> </div>
</ModalContextProvider> </ModalContextProvider>

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

@ -1,7 +1,7 @@
import AccountPage from './account-page' import AccountPage from './account-page'
export default function Account() { 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 /> <AccountPage />
</div> </div>
} }

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

@ -41,7 +41,7 @@ const ActivateForm = () => {
return ( return (
<div className={ <div className={
cn( cn(
'flex flex-col items-center w-full grow justify-center', 'flex w-full grow flex-col items-center justify-center',
'px-6', 'px-6',
'md:px-[108px]', 'md:px-[108px]',
) )
@ -49,11 +49,11 @@ const ActivateForm = () => {
{!checkRes && <Loading />} {!checkRes && <Loading />}
{checkRes && !checkRes.is_valid && ( {checkRes && !checkRes.is_valid && (
<div className="flex flex-col md:w-[400px]"> <div className="flex flex-col md:w-[400px]">
<div className="w-full mx-auto"> <div className="mx-auto w-full">
<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="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> <h2 className="text-[32px] font-bold text-gray-900">{t('login.invalid')}</h2>
</div> </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'> <Button variant='primary' className='w-full !text-sm'>
<a href="https://dify.ai">{t('login.explore')}</a> <a href="https://dify.ai">{t('login.explore')}</a>
</Button> </Button>

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

@ -8,14 +8,14 @@ const Activate = () => {
return ( return (
<div className={cn( <div className={cn(
style.background, style.background,
'flex w-full min-h-screen', 'flex min-h-screen w-full',
'sm:p-4 lg:p-8', 'sm:p-4 lg:p-8',
'gap-x-20', 'gap-x-20',
'justify-center lg:justify-start', 'justify-center lg:justify-start',
)}> )}>
<div className={ <div className={
cn( 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', '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' 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'}`}> <div className={`flex items-center self-stretch ${expand ? 'justify-between' : 'flex-col gap-1'}`}>
<AppIcon <AppIcon
size={expand ? 'large' : 'small'} size={expand ? 'large' : 'small'}
@ -200,9 +200,9 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
background={appDetail.icon_background} background={appDetail.icon_background}
imageUrl={appDetail.icon_url} imageUrl={appDetail.icon_url}
/> />
<div className='flex p-0.5 justify-center items-center rounded-md'> <div className='flex items-center justify-center rounded-md p-0.5'>
<div className='flex w-5 h-5 justify-center items-center'> <div className='flex h-5 w-5 items-center justify-center'>
<RiEqualizer2Line className='w-4 h-4 text-text-tertiary' /> <RiEqualizer2Line className='text-text-tertiary h-4 w-4' />
</div> </div>
</div> </div>
</div> </div>
@ -221,9 +221,9 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
<ContentDialog <ContentDialog
show={open} show={open}
onClose={() => setOpen(false)} 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'> <div className='flex items-center gap-3 self-stretch'>
<AppIcon <AppIcon
size="large" size="large"
@ -232,8 +232,8 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
background={appDetail.icon_background} background={appDetail.icon_background}
imageUrl={appDetail.icon_url} imageUrl={appDetail.icon_url}
/> />
<div className='flex flex-col justify-center items-start grow w-full'> <div className='flex w-full grow flex-col items-start justify-center'>
<div className='text-text-secondary system-md-semibold truncate w-full'>{appDetail.name}</div> <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 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>
</div> </div>
@ -252,7 +252,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
setShowEditModal(true) 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> <span className='text-components-button-secondary-text system-xs-medium'>{t('app.editApp')}</span>
</Button> </Button>
<Button <Button
@ -264,7 +264,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
setShowDuplicateModal(true) 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> <span className='text-components-button-secondary-text system-xs-medium'>{t('app.duplicate')}</span>
</Button> </Button>
<Button <Button
@ -273,7 +273,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
className='gap-[1px]' className='gap-[1px]'
onClick={exportCheck} 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> <span className='text-components-button-secondary-text system-xs-medium'>{t('app.export')}</span>
</Button> </Button>
{ {
@ -287,7 +287,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
setShowImportDSLModal(true) 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> <span className='text-components-button-secondary-text system-xs-medium'>{t('workflow.common.importDSL')}</span>
</Button> </Button>
) )
@ -298,10 +298,10 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
<CardView <CardView
appId={appDetail.id} appId={appDetail.id}
isInPanel={true} 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>
<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 <Button
size={'medium'} size={'medium'}
variant={'ghost'} variant={'ghost'}
@ -311,7 +311,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
setShowConfirmDelete(true) 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> <span className='text-text-tertiary system-sm-medium'>{t('common.operation.deleteApp')}</span>
</Button> </Button>
</div> </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 = { const ICON_MAP = {
app: <AppIcon className='border !border-[rgba(0,0,0,0.05)]' />, app: <AppIcon className='border !border-[rgba(0,0,0,0.05)]' />,
api: <AppIcon innerIcon={ApiSvg} className='border !bg-purple-50 !border-purple-200' />, api: <AppIcon innerIcon={ApiSvg} className='border !border-purple-200 !bg-purple-50' />,
dataset: <AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />, dataset: <AppIcon innerIcon={DatasetSvg} className='!bg-indigo-25 !border-[0.5px] !border-indigo-100' />,
webapp: <AppIcon innerIcon={WebappSvg} className='border !bg-primary-100 !border-primary-200' />, 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' />, 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() const { t } = useTranslation()
return ( return (
<div className="flex items-center grow"> <div className="flex grow items-center">
{icon && icon_background && iconType === 'app' && ( {icon && icon_background && iconType === 'app' && (
<div className='shrink-0 mr-3'> <div className='mr-3 shrink-0'>
<AppIcon icon={icon} background={icon_background} /> <AppIcon icon={icon} background={icon_background} />
</div> </div>
)} )}
{iconType !== 'app' {iconType !== 'app'
&& <div className='shrink-0 mr-3'> && <div className='mr-3 shrink-0'>
{ICON_MAP[iconType]} {ICON_MAP[iconType]}
</div> </div>
} }
{mode === 'expand' && <div className="group"> {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"> <div className="max-w-[180px] truncate">
{name} {name}
</div> </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() const { t } = useTranslation()
return ( return (
<div className='pl-1 pt-1'> <div className='pl-1 pt-1'>
<div className='flex-shrink-0 mr-3'> <div className='mr-3 shrink-0'>
<AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' /> <AppIcon innerIcon={DatasetSvg} className='!bg-indigo-25 !border-[0.5px] !border-indigo-100' />
</div> </div>
{expand && ( {expand && (
<div className='mt-2'> <div className='mt-2'>
<div className='system-md-semibold text-text-secondary'> <div className='system-md-semibold text-text-secondary'>
{name} {name}
</div> </div>
<div className='mt-1 text-text-tertiary system-2xs-medium-uppercase'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</div> <div className='text-text-tertiary system-2xs-medium-uppercase mt-1'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</div>
<div className='my-3 system-xs-regular text-text-tertiary first-letter:capitalize'>{description}</div> <div className='system-xs-regular text-text-tertiary my-3 first-letter:capitalize'>{description}</div>
</div> </div>
)} )}
{extraInfo} {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 ( return (
<div <div
className={` 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'} ${expand ? 'w-[216px]' : 'w-14'}
`} `}
> >
@ -85,7 +85,7 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
)} )}
</div> </div>
<div className='px-4'> <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> </div>
<nav <nav
className={` className={`
@ -108,13 +108,13 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
`} `}
> >
<div <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)} onClick={() => handleToggle(appSidebarExpand)}
> >
{ {
expand expand
? <RiLayoutRight2Line className='w-5 h-5 text-components-menu-item-text' /> ? <RiLayoutRight2Line className='text-components-menu-item-text h-5 w-5' />
: <LayoutRight2LineMod className='w-5 h-5 text-components-menu-item-text' /> : <LayoutRight2LineMod className='text-components-menu-item-text h-5 w-5' />
} }
</div> </div>
</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, onChange,
}) => { }) => {
const { t } = useTranslation() 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 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') const placeholder = type === EditItemType.Query ? t('appAnnotation.addModal.queryPlaceholder') : t('appAnnotation.addModal.answerPlaceholder')
return ( return (
<div className='flex' onClick={e => e.stopPropagation()}> <div className='flex' onClick={e => e.stopPropagation()}>
<div className='shrink-0 mr-3'> <div className='mr-3 shrink-0'>
{avatar} {avatar}
</div> </div>
<div className='grow'> <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 <Textarea
value={content} value={content}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)} 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]' maxWidthClassName='!max-w-[480px]'
title={t('appAnnotation.addModal.title') as string} title={t('appAnnotation.addModal.title') as string}
body={( body={(
<div className='p-6 pb-4 space-y-6'> <div className='space-y-6 p-6 pb-4'>
<EditItem <EditItem
type={EditItemType.Query} type={EditItemType.Query}
content={question} content={question}
@ -93,11 +93,11 @@ const AddAnnotationModal: FC<Props> = ({
( (
<div> <div>
{isAnnotationFull && ( {isAnnotationFull && (
<div className='mt-6 mb-4 px-6'> <div className='mb-4 mt-6 px-6'>
<AnnotationFull /> <AnnotationFull />
</div> </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 <div
className='flex items-center space-x-2' 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='mt-6'>
<div className='system-sm-medium text-text-primary'>{t('share.generation.csvStructureTitle')}</div> <div className='system-sm-medium text-text-primary'>{t('share.generation.csvStructureTitle')}</div>
<div className='mt-2 max-h-[500px] overflow-auto'> <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'> <thead className='text-text-tertiary'>
<tr> <tr>
<td className='h-9 pl-3 pr-2 border-b border-divider-regular'>{t('appAnnotation.batchModal.question')}</td> <td className='border-divider-regular h-9 border-b pl-3 pr-2'>{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.answer')}</td>
</tr> </tr>
</thead> </thead>
<tbody className='text-gray-700'> <tbody className='text-gray-700'>
<tr> <tr>
<td className='h-9 pl-3 pr-2 border-b border-divider-subtle 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.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.answer')} 1</td>
</tr> </tr>
<tr> <tr>
<td className='h-9 pl-3 pr-2 text-[13px]'>{t('appAnnotation.batchModal.question')} 2</td> <td className='h-9 pl-3 pr-2 text-[13px]'>{t('appAnnotation.batchModal.question')} 2</td>
@ -55,14 +55,14 @@ const CSVDownload: FC = () => {
</table> </table>
</div> </div>
<CSVDownloader <CSVDownloader
className="block mt-2 cursor-pointer" className="mt-2 block cursor-pointer"
type={Type.Link} type={Type.Link}
filename={`template-${locale}`} filename={`template-${locale}`}
bom={true} bom={true}
data={getTemplate()} data={getTemplate()}
> >
<div className='flex items-center h-[18px] space-x-1 text-text-accent system-xs-medium'> <div className='text-text-accent system-xs-medium flex h-[18px] items-center space-x-1'>
<DownloadIcon className='w-3 h-3 mr-1' /> <DownloadIcon className='mr-1 h-3 w-3' />
{t('appAnnotation.batchModal.template')} {t('appAnnotation.batchModal.template')}
</div> </div>
</CSVDownloader> </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}> <div ref={dropRef}>
{!file && ( {!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={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='w-full flex items-center justify-center space-x-2'> <div className='flex w-full items-center justify-center space-x-2'>
<CSVIcon className="shrink-0" /> <CSVIcon className="shrink-0" />
<div className='text-text-tertiary'> <div className='text-text-tertiary'>
{t('appAnnotation.batchModal.csvUploadTitle')} {t('appAnnotation.batchModal.csvUploadTitle')}
<span className='text-text-accent cursor-pointer' onClick={selectHandle}>{t('appAnnotation.batchModal.browse')}</span> <span className='text-text-accent cursor-pointer' onClick={selectHandle}>{t('appAnnotation.batchModal.browse')}</span>
</div> </div>
</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> </div>
)} )}
{file && ( {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" /> <CSVIcon className="shrink-0" />
<div className='flex ml-2 w-0 grow'> <div className='ml-2 flex 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='text-text-primary max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap'>{file.name.replace(/.csv$/, '')}</span>
<span className='shrink-0 text-text-tertiary'>.csv</span> <span className='text-text-tertiary shrink-0'>.csv</span>
</div> </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> <Button variant='secondary' onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
<div className='mx-2 w-px h-4 bg-divider-regular' /> <div className='bg-divider-regular mx-2 h-4 w-px' />
<div className='p-2 cursor-pointer' onClick={removeFile}> <div className='cursor-pointer p-2' onClick={removeFile}>
<RiDeleteBinLine className='w-4 h-4 text-text-tertiary' /> <RiDeleteBinLine className='text-text-tertiary h-4 w-4' />
</div> </div>
</div> </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 ( return (
<Modal isShow={isShow} onClose={() => { }} className='px-8 py-6 !max-w-[520px] !rounded-xl'> <Modal isShow={isShow} onClose={() => { }} className='!max-w-[520px] !rounded-xl px-8 py-6'>
<div className='relative pb-1 system-xl-medium text-text-primary'>{t('appAnnotation.batchModal.title')}</div> <div className='system-xl-medium text-text-primary relative pb-1'>{t('appAnnotation.batchModal.title')}</div>
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onCancel}> <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onCancel}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' /> <RiCloseLine className='text-text-tertiary h-4 w-4' />
</div> </div>
<CSVUploader <CSVUploader
file={currentCSV} file={currentCSV}
@ -104,8 +104,8 @@ const BatchModal: FC<IBatchModalProps> = ({
</div> </div>
)} )}
<div className='mt-[28px] pt-6 flex justify-end'> <div className='mt-[28px] flex justify-end pt-6'>
<Button className='mr-2 text-text-tertiary system-sm-medium' onClick={onCancel}> <Button className='text-text-tertiary system-sm-medium mr-2' onClick={onCancel}>
{t('appAnnotation.batchModal.cancel')} {t('appAnnotation.batchModal.cancel')}
</Button> </Button>
<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 }) => ( 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')}> <div className={cn(className, 'system-xs-medium text-text-tertiary flex h-[18px] items-center')}>
<RiEditFill className='mr-1 w-3.5 h-3.5' /> <RiEditFill className='mr-1 h-3.5 w-3.5' />
<div>{title}</div> <div>{title}</div>
<div <div
className='ml-2 grow h-[1px]' className='ml-2 h-[1px] grow'
style={{ style={{
background: 'linear-gradient(90deg, rgba(0, 0, 0, 0.05) -1.65%, rgba(0, 0, 0, 0.00) 100%)', 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 { t } = useTranslation()
const [newContent, setNewContent] = useState('') const [newContent, setNewContent] = useState('')
const showNewContent = newContent && newContent !== content 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 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 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') const placeholder = type === EditItemType.Query ? t('appAnnotation.editModal.queryPlaceholder') : t('appAnnotation.editModal.answerPlaceholder')
@ -58,11 +58,11 @@ const EditItem: FC<Props> = ({
return ( return (
<div className='flex' onClick={e => e.stopPropagation()}> <div className='flex' onClick={e => e.stopPropagation()}>
<div className='shrink-0 mr-3'> <div className='mr-3 shrink-0'>
{avatar} {avatar}
</div> </div>
<div className='grow'> <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> <div className='system-sm-regular text-text-primary'>{content}</div>
{!isEdit {!isEdit
? ( ? (
@ -70,34 +70,34 @@ const EditItem: FC<Props> = ({
{showNewContent && ( {showNewContent && (
<div className='mt-3'> <div className='mt-3'>
<EditTitle title={editTitle} /> <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>
)} )}
<div className='mt-2 flex items-center'> <div className='mt-2 flex items-center'>
{!readonly && ( {!readonly && (
<div <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={() => { onClick={() => {
setIsEdit(true) 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>{t('common.operation.edit')}</div>
</div> </div>
)} )}
{showNewContent && ( {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='mr-2'>·</div>
<div <div
className='flex items-center space-x-1 cursor-pointer' className='flex cursor-pointer items-center space-x-1'
onClick={() => { onClick={() => {
setNewContent(content) setNewContent(content)
onSave(content) onSave(content)
}} }}
> >
<div className='w-3.5 h-3.5'> <div className='h-3.5 w-3.5'>
<RiDeleteBinLine className='w-3.5 h-3.5' /> <RiDeleteBinLine className='h-3.5 w-3.5' />
</div> </div>
<div>{t('common.operation.delete')}</div> <div>{t('common.operation.delete')}</div>
</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} title={t('appAnnotation.editModal.title') as string}
body={( body={(
<div> <div>
<div className='p-6 pb-4 space-y-6'> <div className='space-y-6 p-6 pb-4'>
<EditItem <EditItem
type={EditItemType.Query} type={EditItemType.Query}
content={query} content={query}
@ -115,7 +115,7 @@ const EditAnnotationModal: FC<Props> = ({
foot={ foot={
<div> <div>
{isAnnotationFull && ( {isAnnotationFull && (
<div className='mt-6 mb-4 px-6'> <div className='mb-4 mt-6 px-6'>
<AnnotationFull /> <AnnotationFull />
</div> </div>
)} )}
@ -123,9 +123,9 @@ const EditAnnotationModal: FC<Props> = ({
{ {
annotationId 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 <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)} onClick={() => setShowModal(true)}
> >
<MessageCheckRemove /> <MessageCheckRemove />

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

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

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

@ -29,7 +29,7 @@ const Filter: FC<IFilterProps> = ({
if (!data) if (!data)
return null return null
return ( 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 <Input
wrapperClassName='w-[200px]' wrapperClassName='w-[200px]'
showLeftIcon 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 = () => { const Operations = () => {
return ( return (
<div className="w-full py-1"> <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) setShowBulkImportModal(true)
}}> }}>
<FilePlus02 className='w-4 h-4 text-text-tertiary' /> <FilePlus02 className='text-text-tertiary h-4 w-4' />
<span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkImport')}</span> <span className='text-text-secondary system-sm-regular grow text-left'>{t('appAnnotation.table.header.bulkImport')}</span>
</button> </button>
<Menu as="div" className="relative w-full h-full"> <Menu as="div" className="relative h-full w-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)]'> <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='w-4 h-4 text-text-tertiary' /> <FileDownload02 className='text-text-tertiary h-4 w-4' />
<span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkExport')}</span> <span className='text-text-secondary system-sm-regular grow text-left'>{t('appAnnotation.table.header.bulkExport')}</span>
<ChevronRight className='shrink-0 w-[14px] h-[14px] text-text-tertiary' /> <ChevronRight className='text-text-tertiary h-[14px] w-[14px] shrink-0' />
</MenuButton> </MenuButton>
<Transition <Transition
as={Fragment} as={Fragment}
@ -103,7 +103,7 @@ const HeaderOptions: FC<Props> = ({
> >
<MenuItems <MenuItems
className={cn( 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 <CSVDownloader
@ -115,12 +115,12 @@ const HeaderOptions: FC<Props> = ({
...list.map(item => [item.question, item.answer]), ...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)]'> <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='grow text-text-secondary system-sm-regular text-left'>CSV</span> <span className='text-text-secondary system-sm-regular grow text-left'>CSV</span>
</button> </button>
</CSVDownloader> </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}> <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='grow text-text-secondary system-sm-regular text-left'>JSONL</span> <span className='text-text-secondary system-sm-regular grow text-left'>JSONL</span>
</button> </button>
</MenuItems> </MenuItems>
</Transition> </Transition>
@ -134,7 +134,7 @@ const HeaderOptions: FC<Props> = ({
return ( return (
<div className='flex space-x-2'> <div className='flex space-x-2'>
<Button variant='primary' onClick={() => setShowAddModal(true)}> <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> <div>{t('appAnnotation.table.header.addAnnotation')}</div>
</Button> </Button>
<CustomPopover <CustomPopover
@ -143,11 +143,11 @@ const HeaderOptions: FC<Props> = ({
trigger="click" trigger="click"
btnElement={ btnElement={
<Button variant='secondary' className='w-8 p-0'> <Button variant='secondary' className='w-8 p-0'>
<RiMoreFill className='w-4 h-4' /> <RiMoreFill className='h-4 w-4' />
</Button> </Button>
} }
btnClassName='p-0 border-0' btnClassName='p-0 border-0'
className={'!w-[155px] h-fit !z-20'} className={'!z-20 h-fit !w-[155px]'}
popupClassName='!w-full !overflow-visible' popupClassName='!w-full !overflow-visible'
manualClose manualClose
/> />

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

@ -152,15 +152,15 @@ const Annotation: FC<Props> = ({
} }
return ( 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> <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}> <Filter appId={appDetail.id} queryParams={queryParams} setQueryParams={setQueryParams}>
<div className='flex items-center space-x-2'> <div className='flex items-center space-x-2'>
{isChatApp && ( {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')}> <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='w-4 h-4 text-util-colors-indigo-indigo-600' /> <MessageFast className='text-util-colors-indigo-indigo-600 h-4 w-4' />
<div className='system-sm-medium text-text-primary'>{t('appAnnotation.name')}</div> <div className='system-sm-medium text-text-primary'>{t('appAnnotation.name')}</div>
<Switch <Switch
key={controlRefreshSwitch} key={controlRefreshSwitch}
@ -188,14 +188,14 @@ const Annotation: FC<Props> = ({
></Switch> ></Switch>
{annotationConfig?.enabled && ( {annotationConfig?.enabled && (
<div className='flex items-center pl-1.5'> <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)}> <ActionButton onClick={() => setIsShowEdit(true)}>
<RiEqualizer2Line className='w-4 h-4 text-text-tertiary' /> <RiEqualizer2Line className='text-text-tertiary h-4 w-4' />
</ActionButton> </ActionButton>
</div> </div>
)} )}
</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} onRemove={handleRemove}
onView={handleView} 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 */} {/* Show Pagination only if the total is more than the limit */}
{(total && total > APP_PAGE_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')}> <table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}>
<thead className='system-xs-medium-uppercase text-text-tertiary'> <thead className='system-xs-medium-uppercase text-text-tertiary'>
<tr> <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='bg-background-section-burn w-5 whitespace-nowrap rounded-l-lg pl-2 pr-1'>{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='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{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='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{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='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{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-[96px] whitespace-nowrap rounded-r-lg py-1.5 pl-3'>{t('appAnnotation.table.header.actions')}</td>
</tr> </tr>
</thead> </thead>
<tbody className="text-text-secondary system-sm-regular"> <tbody className="text-text-secondary system-sm-regular">
{list.map(item => ( {list.map(item => (
<tr <tr
key={item.id} 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={ onClick={
() => { () => {
onView(item) onView(item)
@ -48,20 +48,20 @@ const List: FC<Props> = ({
} }
> >
<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.question} title={item.question}
>{item.question}</td> >{item.question}</td>
<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} title={item.answer}
>{item.answer}</td> >{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'>{formatTime(item.created_at, t('appLog.dateTimeFormat') as string)}</td>
<td className='p-3 pr-2'>{item.hit_count}</td> <td className='p-3 pr-2'>{item.hit_count}</td>
<td className='w-[96px] p-3 pr-2' onClick={e => e.stopPropagation()}> <td className='w-[96px] p-3 pr-2' onClick={e => e.stopPropagation()}>
{/* Actions */} {/* Actions */}
<div className='flex space-x-1 text-text-tertiary'> <div className='text-text-tertiary flex space-x-1'>
<ActionButton onClick={() => onView(item)}> <ActionButton onClick={() => onView(item)}>
<RiEditLine className='w-4 h-4' /> <RiEditLine className='h-4 w-4' />
</ActionButton> </ActionButton>
<ActionButton <ActionButton
onClick={() => { onClick={() => {
@ -69,7 +69,7 @@ const List: FC<Props> = ({
setShowConfirmDelete(true) setShowConfirmDelete(true)
}} }}
> >
<RiDeleteBinLine className='w-4 h-4' /> <RiDeleteBinLine className='h-4 w-4' />
</ActionButton> </ActionButton>
</div> </div>
</td> </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 HitHistoryNoData: FC = () => {
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<div className='mx-auto mt-20 w-[480px] p-5 rounded-2xl bg-background-section-burn space-y-2'> <div className='bg-background-section-burn mx-auto mt-20 w-[480px] space-y-2 rounded-2xl p-5'>
<div className='inline-block p-3 rounded-lg border border-divider-subtle'> <div className='border-divider-subtle inline-block rounded-lg border p-3'>
<ClockFastForward className='w-5 h-5 text-text-tertiary' /> <ClockFastForward className='text-text-tertiary h-5 w-5' />
</div> </div>
<div className='system-sm-regular text-text-tertiary'>{t('appAnnotation.viewModal.noHitHistory')}</div> <div className='system-sm-regular text-text-tertiary'>{t('appAnnotation.viewModal.noHitHistory')}</div>
</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')} > <table className={cn('w-full min-w-[440px] border-collapse border-0')} >
<thead className="system-xs-medium-uppercase text-text-tertiary"> <thead className="system-xs-medium-uppercase text-text-tertiary">
<tr> <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='bg-background-section-burn w-5 whitespace-nowrap rounded-l-lg pl-2 pr-1'>{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='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{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='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{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='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{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='bg-background-section-burn whitespace-nowrap py-1.5 pl-3'>{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-[160px] whitespace-nowrap rounded-r-lg py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.time')}</td>
</tr> </tr>
</thead> </thead>
<tbody className="text-text-secondary system-sm-regular"> <tbody className="text-text-secondary system-sm-regular">
{hitHistoryList.map(item => ( {hitHistoryList.map(item => (
<tr <tr
key={item.id} 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 <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} title={item.question}
>{item.question}</td> >{item.question}</td>
<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} title={item.match}
>{item.match}</td> >{item.match}</td>
<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} title={item.response}
>{item.response}</td> >{item.response}</td>
<td className='p-3 pr-2'>{item.source}</td> <td className='p-3 pr-2'>{item.source}</td>
@ -168,7 +168,7 @@ const ViewAnnotationModal: FC<Props> = ({
maxWidthClassName='!max-w-[800px]' maxWidthClassName='!max-w-[800px]'
title={ title={
<TabSlider <TabSlider
className='shrink-0 relative top-[9px]' className='relative top-[9px] shrink-0'
value={activeTab} value={activeTab}
onChange={v => setActiveTab(v as TabType)} onChange={v => setActiveTab(v as TabType)}
options={tabs} options={tabs}
@ -178,7 +178,7 @@ const ViewAnnotationModal: FC<Props> = ({
} }
body={( body={(
<div> <div>
<div className='p-6 pb-4 space-y-6'> <div className='space-y-6 p-6 pb-4'>
{activeTab === TabType.annotation ? annotationTab : hitHistoryTab} {activeTab === TabType.annotation ? annotationTab : hitHistoryTab}
</div> </div>
<Confirm <Confirm
@ -195,9 +195,9 @@ const ViewAnnotationModal: FC<Props> = ({
)} )}
foot={id 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 <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)} onClick={() => setShowModal(true)}
> >
<MessageCheckRemove /> <MessageCheckRemove />

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

@ -139,19 +139,19 @@ const AppPublisher = ({
disabled={disabled} disabled={disabled}
> >
{t('workflow.common.publish')} {t('workflow.common.publish')}
<RiArrowDownSLine className='w-4 h-4 ml-0.5' /> <RiArrowDownSLine className='ml-0.5 h-4 w-4' />
</Button> </Button>
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[11]'> <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='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')} {publishedAt ? t('workflow.common.latestPublished') : t('workflow.common.currentDraftUnpublished')}
</div> </div>
{publishedAt {publishedAt
? ( ? (
<div className='flex justify-between items-center h-[18px]'> <div className='flex h-[18px] items-center justify-between'>
<div className='flex items-center mt-[3px] mb-[3px] leading-[18px] text-[13px] font-medium text-text-secondary'> <div className='text-text-secondary mb-[3px] mt-[3px] flex items-center text-[13px] font-medium leading-[18px]'>
{t('workflow.common.publishedAt')} {formatTimeFromNow(publishedAt)} {t('workflow.common.publishedAt')} {formatTimeFromNow(publishedAt)}
</div> </div>
<Button <Button
@ -165,7 +165,7 @@ const AppPublisher = ({
</div> </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!)} {t('workflow.common.autoSaved')} · {Boolean(draftUpdatedAt) && formatTimeFromNow(draftUpdatedAt!)}
</div> </div>
)} )}
@ -180,7 +180,7 @@ const AppPublisher = ({
: ( : (
<Button <Button
variant='primary' variant='primary'
className='w-full mt-3' className='mt-3 w-full'
onClick={() => handlePublish()} onClick={() => handlePublish()}
disabled={publishDisabled || published} disabled={publishDisabled || published}
> >
@ -193,14 +193,14 @@ const AppPublisher = ({
) )
} }
</div> </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> <SuggestedAction disabled={!publishedAt} link={appURL} icon={<PlayCircle />}>{t('workflow.common.runApp')}</SuggestedAction>
{appDetail?.mode === 'workflow' {appDetail?.mode === 'workflow'
? ( ? (
<SuggestedAction <SuggestedAction
disabled={!publishedAt} disabled={!publishedAt}
link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`} link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
icon={<LeftIndent02 className='w-4 h-4' />} icon={<LeftIndent02 className='h-4 w-4' />}
> >
{t('workflow.common.batchRunApp')} {t('workflow.common.batchRunApp')}
</SuggestedAction> </SuggestedAction>
@ -212,7 +212,7 @@ const AppPublisher = ({
handleTrigger() handleTrigger()
}} }}
disabled={!publishedAt} disabled={!publishedAt}
icon={<CodeBrowser className='w-4 h-4' />} icon={<CodeBrowser className='h-4 w-4' />}
> >
{t('workflow.common.embedIntoSite')} {t('workflow.common.embedIntoSite')}
</SuggestedAction> </SuggestedAction>
@ -222,11 +222,11 @@ const AppPublisher = ({
handleOpenInExplore() handleOpenInExplore()
}} }}
disabled={!publishedAt} disabled={!publishedAt}
icon={<RiPlanetLine className='w-4 h-4' />} icon={<RiPlanetLine className='h-4 w-4' />}
> >
{t('workflow.common.openInExplore')} {t('workflow.common.openInExplore')}
</SuggestedAction> </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' && ( {appDetail?.mode === 'workflow' && (
<WorkflowToolConfigureButton <WorkflowToolConfigureButton
disabled={!publishedAt} 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' className='mt-3 w-full'
> >
{t('appDebug.operation.applyConfig')} {t('appDebug.operation.applyConfig')}
<RiArrowDownSLine className='ml-0.5 w-3 h-3' /> <RiArrowDownSLine className='ml-0.5 h-3 w-3' />
</Button> </Button>
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent className='mt-1 w-[288px] z-50'> <PortalToFollowElemContent className='z-50 mt-1 w-[288px]'>
<div className='p-1 rounded-lg border-[0.5px] border-components-panel-border shadow-lg bg-components-panel-bg'> <div className='border-components-panel-border bg-components-panel-bg rounded-lg border-[0.5px] p-1 shadow-lg'>
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'> <div className='text-text-tertiary flex h-[22px] items-center px-3 text-xs font-medium'>
{t('appDebug.publishAs')} {t('appDebug.publishAs')}
</div> </div>
{ {
validModelConfigs.map((item, index) => ( validModelConfigs.map((item, index) => (
<div <div
key={item.id} 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)} 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' /> <ModelIcon modelName={item.model} provider={item.providerItem} className='ml-2' />
<div <div
className='ml-1 text-text-secondary truncate' className='text-text-secondary ml-1 truncate'
title={item.modelItem.label[language]} title={item.modelItem.label[language]}
> >
{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} {...props}
> >
<div className='relative w-4 h-4'>{icon}</div> <div className='relative h-4 w-4'>{icon}</div>
<div className='grow shrink basis-0 text-[13px] font-medium leading-[18px]'>{children}</div> <div className='shrink grow basis-0 text-[13px] font-medium leading-[18px]'>{children}</div>
<ArrowUpRight /> <ArrowUpRight />
</a> </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, children,
}) => { }) => {
return ( 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 */} {/* Header */}
<div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-b border-divider-subtle')}> <div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-divider-subtle border-b')}>
<div className='flex justify-between items-center h-8'> <div className='flex h-8 items-center justify-between'>
<div className='flex items-center space-x-1 shrink-0'> <div className='flex shrink-0 items-center space-x-1'>
{headerIcon && <div className='flex items-center justify-center w-6 h-6'>{headerIcon}</div>} {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 className='text-text-secondary system-sm-semibold'>{title}</div>
</div> </div>
<div className='flex gap-2 items-center'> <div className='flex items-center gap-2'>
{headerRight && <div>{headerRight}</div>} {headerRight && <div>{headerRight}</div>}
</div> </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, name,
}) => { }) => {
return ( return (
<div className='flex items-center mb-1'> <div className='mb-1 flex items-center'>
<div className='mr-3 leading-[18px] text-xs font-semibold text-gray-500 uppercase'>{name}</div> <div className='mr-3 text-xs font-semibold uppercase leading-[18px] text-gray-500'>{name}</div>
<div className='grow h-[1px]' <div className='h-[1px] grow'
style={{ style={{
background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, #F3F4F6 100%)', 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 const computedIsHovered = isHoverStatus || isHovered
return ( return (
<div <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)} onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)} onMouseLeave={() => setIsHovered(false)}
onClick={onClick} 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 = { const iconMap = {
add: <RiAddLine className='w-3.5 h-3.5' />, add: <RiAddLine className='h-3.5 w-3.5' />,
edit: <RiEditLine className='w-3.5 h-3.5' />, edit: <RiEditLine className='h-3.5 w-3.5' />,
} }
const OperationBtn: FC<IOperationBtnProps> = ({ const OperationBtn: FC<IOperationBtnProps> = ({
@ -29,7 +29,7 @@ const OperationBtn: FC<IOperationBtnProps> = ({
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<div <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}> onClick={onClick}>
<div> <div>
{iconMap[type]} {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 ( return (
<div <div
key={name} 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 className='opacity-60'>{'{{'}</span>
<span>{name}</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')} description={t('appDebug.feature.dataSet.queryVariable.unableToQueryDataSetTip')}
footer={ footer={
<div className='flex space-x-2'> <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> <span className='text-[13px] font-medium'>{t('appDebug.feature.dataSet.queryVariable.ok')}</span>
</Button> </Button>
</div> </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, footer,
}) => { }) => {
return ( 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='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={`${s.icon} flex h-11 w-11 items-center justify-center rounded-xl bg-white`}>{warningIcon}</div>
<div className='mt-4 text-[24px] leading-normal font-semibold text-gray-800'> <div className='mt-4 text-[24px] font-semibold leading-normal text-gray-800'>
{title} {title}
</div> </div>
<div className='mt-3 text-base text-gray-500'> <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 [editorHeight, setEditorHeight] = React.useState(isChatMode ? 200 : 508)
const contextMissing = ( const contextMissing = (
<div <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={{ style={{
background: 'linear-gradient(180deg, #FEF0C7 0%, rgba(254, 240, 199, 0) 100%)', background: 'linear-gradient(180deg, #FEF0C7 0%, rgba(254, 240, 199, 0) 100%)',
}} }}
> >
<div className='flex items-center pr-2' > <div className='flex items-center pr-2' >
<RiErrorWarningFill className='mr-1 w-4 h-4 text-[#F79009]' /> <RiErrorWarningFill className='mr-1 h-4 w-4 text-[#F79009]' />
<div className='leading-[18px] text-[13px] font-medium text-[#DC6803]'>{t('appDebug.promptMode.contextMissing')}</div> <div className='text-[13px] font-medium leading-[18px] text-[#DC6803]'>{t('appDebug.promptMode.contextMissing')}</div>
</div> </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} onClick={onHideContextMissingTip}
>{t('common.operation.ok')}</div> >{t('common.operation.ok')}</div>
</div> </div>
@ -162,7 +162,7 @@ const AdvancedPromptInput: FC<Props> = ({
{isContextMissing {isContextMissing
? contextMissing ? 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 {isChatMode
? ( ? (
<MessageTypeSelector value={type} onChange={onTypeChange} /> <MessageTypeSelector value={type} onChange={onTypeChange} />
@ -182,11 +182,11 @@ const AdvancedPromptInput: FC<Props> = ({
</div>)} </div>)}
<div className={cn(s.optionWrap, 'items-center space-x-1')}> <div className={cn(s.optionWrap, 'items-center space-x-1')}>
{canDelete && ( {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 {!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) copy(value)
setIsCopied(true) setIsCopied(true)
}} /> }} />
@ -199,13 +199,13 @@ const AdvancedPromptInput: FC<Props> = ({
)} )}
<PromptEditorHeightResizeWrap <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} height={editorHeight}
minHeight={minHeight} minHeight={minHeight}
onHeightChange={setEditorHeight} onHeightChange={setEditorHeight}
footer={( footer={(
<div className='pl-4 pb-2 flex'> <div className='flex pb-2 pl-4'>
<div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{value.length}</div> <div className="h-[18px] rounded-md bg-gray-100 px-1 text-xs leading-[18px] text-gray-500">{value.length}</div>
</div> </div>
)} )}
hideResize={noResize} 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='flex items-start space-x-3'>
<div <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={{ style={{
backgroundColor: 'rgba(255, 255, 255, 0.9)', 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)', 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> >{VarIcon}</div>
<div className='grow-1'> <div className='grow-1'>
<div className='text-sm font-medium text-gray-900'>{t('appDebug.autoAddVar')}</div> <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 => ( {varNameArr.map(name => (
<VarHighlight key={name} name={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} isShow={isShow}
onClose={onClose} onClose={onClose}
> >
<div className={'mt-6 font-medium text-sm leading-[21px] text-text-primary'}>{t('appDebug.feature.conversationHistory.editModal.userPrefix')}</div> <div className={'text-text-primary mt-6 text-sm font-medium leading-[21px]'}>{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'} <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} value={tempData.user_prefix}
onChange={e => setTempData({ onChange={e => setTempData({
...tempData, ...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> <div className={'text-text-primary mt-6 text-sm font-medium leading-[21px]'}>{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'} <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} value={tempData.assistant_prefix}
onChange={e => setTempData({ onChange={e => setTempData({
...tempData, ...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> </div>
} }
headerIcon={ headerIcon={
<div className='p-1 rounded-md shadow-xs'> <div className='shadow-xs rounded-md p-1'>
<MessageClockCircle className='w-4 h-4 text-[#DD2590]' /> <MessageClockCircle className='h-4 w-4 text-[#DD2590]' />
</div>} </div>}
headerRight={ headerRight={
<div className='flex items-center'> <div className='flex items-center'>
<div className='text-xs text-text-tertiary'>{t('appDebug.feature.conversationHistory.description')}</div> <div className='text-text-tertiary text-xs'>{t('appDebug.feature.conversationHistory.description')}</div>
<div className='ml-3 w-[1px] h-[14px] bg-divider-regular'></div> <div className='bg-divider-regular ml-3 h-[14px] w-[1px]'></div>
<OperationBtn type="edit" onClick={onShowEditModal} /> <OperationBtn type="edit" onClick={onShowEditModal} />
</div> </div>
} }
noBodySpacing noBodySpacing
> >
{showWarning && ( {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')} <div>{t('appDebug.feature.conversationHistory.tip')}
<a href={`${locale === LanguagesSupported[1] <a href={`${locale === LanguagesSupported[1]
? 'https://docs.dify.ai/v/zh-hans/guides/application-design/prompt-engineering' ? '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) && ( {(modelModeType === ModelModeType.chat && (currentAdvancedPrompt as PromptItem[]).length < MAX_PROMPT_MESSAGE_LENGTH) && (
<div <div
onClick={handleAddMessage} 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'> 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='w-4 h-4' /> <RiAddLine className='h-4 w-4' />
<div>{t('appDebug.promptMode.operation.addMessage')}</div> <div>{t('appDebug.promptMode.operation.addMessage')}</div>
</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 className='relative left-[-8px]' ref={ref}>
<div <div
onClick={toggleShow} 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> <div className='text-sm font-semibold uppercase'>{value}</div>
<ChevronSelectorVertical className='w-3 h-3 ' /> <ChevronSelectorVertical className='h-3 w-3 ' />
</div> </div>
{showOption && ( {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 => ( {allTypes.map(type => (
<div <div
key={type} key={type}
@ -37,7 +37,7 @@ const MessageTypeSelector: FC<Props> = ({
setHide() setHide()
onChange(type) 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> >{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} {footer}
{!hideResize && ( {!hideResize && (
<div <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}> 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>
)} )}
</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={cn((!readonly || gradientBorder) ? `${s.gradientBorder}` : 'bg-gray-50', ' relative shadow-md')}>
<div className='rounded-xl bg-[#EEF4FF]'> <div className='rounded-xl bg-[#EEF4FF]'>
{!noTitle && ( {!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="flex items-center space-x-1">
<div className='h2'>{mode !== AppType.completion ? t('appDebug.chatSubTitle') : t('appDebug.completionSubTitle')}</div> <div className='h2'>{mode !== AppType.completion ? t('appDebug.chatSubTitle') : t('appDebug.completionSubTitle')}</div>
{!readonly && ( {!readonly && (
@ -186,14 +186,14 @@ const Prompt: FC<ISimplePromptInput> = ({
)} )}
<PromptEditorHeightResizeWrap <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} height={editorHeight}
minHeight={minHeight} minHeight={minHeight}
onHeightChange={setEditorHeight} onHeightChange={setEditorHeight}
hideResize={noResize} hideResize={noResize}
footer={( footer={(
<div className='pl-4 pb-2 flex bg-white rounded-b-xl'> <div className='flex rounded-b-xl bg-white pb-2 pl-4'>
<div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{promptTemplate.length}</div> <div className="h-[18px] rounded-md bg-gray-100 px-1 text-xs leading-[18px] text-gray-500">{promptTemplate.length}</div>
</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)} /> <Checkbox checked={tempPayload.required} onCheck={() => handlePayloadChange('required')(!tempPayload.required)} />
<span className='text-text-secondary system-sm-semibold'>{t('appDebug.variableConfig.required')}</span> <span className='text-text-secondary system-sm-semibold'>{t('appDebug.variableConfig.required')}</span>
</div> </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) => ( {options.map((o, index) => (
<div className={`${s.inputWrap} relative`} key={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"> <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" /> <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> </svg>
@ -59,10 +59,10 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
return item 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 <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={() => { onClick={() => {
onChange(options.filter((_, i) => index !== i)) onChange(options.filter((_, i) => index !== i))
}} }}
@ -75,9 +75,9 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
<div <div
onClick={() => { onChange([...options, '']) }} 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> <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>
</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 && ( {!hasVar && (
<div className='mt-1 px-3 pb-3'> <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> </div>
)} )}
{hasVar && ( {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) => ( {promptVariables.map(({ key, name, type, required, config, icon, icon_background }, index) => (
<VarItem <VarItem
key={index} 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 ( return (
<div <div
className={cn( 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', '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-[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')} 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} onClick={onClick}
> >
<div className='shrink-0'> <div className='shrink-0'>
<InputVarTypeIcon type={type} className='w-5 h-5' /> <InputVarTypeIcon type={type} className='h-5 w-5' />
</div> </div>
<span>{typeName}</span> <span>{typeName}</span>
</div> </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 }) => { const SelectItem: FC<ItemProps> = ({ text, type, value, Icon, onClick }) => {
return ( return (
<div <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)} onClick={() => onClick(value)}
> >
{Icon ? <Icon className='w-4 h-4 text-gray-500' /> : <InputVarTypeIcon type={type!} className='w-4 h-4 text-gray-500' />} {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 text-xs text-gray-600 truncate'>{text}</div> <div className='ml-2 truncate text-xs text-gray-600'>{text}</div>
</div> </div>
) )
} }
@ -60,7 +60,7 @@ const SelectVarType: FC<Props> = ({
<OperationBtn type='add' className={cn(open && 'bg-gray-200')} /> <OperationBtn type='add' className={cn(open && 'bg-gray-200')} />
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 1000 }}> <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'> <div className='p-1'>
<SelectItem type={InputVarType.textInput} value='string' text={t('appDebug.variableConfig.string')} onClick={handleChange}></SelectItem> <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> <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) const [isDeleting, setIsDeleting] = useState(false)
return ( 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')}> <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='shrink-0 mr-1 w-4 h-4 text-text-accent' /> <VarIcon className='text-text-accent mr-1 h-4 w-4 shrink-0' />
<div className='grow'> <div className='grow'>
<div className='flex items-center h-[18px]'> <div className='flex h-[18px] items-center'>
<div className='grow truncate' title={name}> <div className='grow truncate' title={name}>
<span className='system-sm-medium text-text-secondary'>{name}</span> <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> <span className='system-xs-medium text-text-tertiary'>{label}</span>
</div> </div>
<div className='group-hover:hidden flex items-center'> <div className='flex items-center group-hover:hidden'>
{required && <Badge text='required' />} {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' /> <IconTypeIcon type={type as IInputTypeIconProps['type']} className='text-text-tertiary' />
</div> </div>
</div> </div>
</div> </div>
{!readonly && ( {!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 <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} onClick={onEdit}
> >
<RiEditLine className='w-4 h-4 text-text-tertiary' /> <RiEditLine className='text-text-tertiary h-4 w-4' />
</div> </div>
<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} onClick={onRemove}
onMouseOver={() => setIsDeleting(true)} onMouseOver={() => setIsDeleting(true)}
onMouseLeave={() => setIsDeleting(false)} onMouseLeave={() => setIsDeleting(false)}
> >
<RiDeleteBinLine className='w-4 h-4' /> <RiDeleteBinLine className='h-4 w-4' />
</div> </div>
</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 null
return ( 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='shrink-0 p-1'>
<div className='p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'> <div className='border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600 rounded-lg border-[0.5px] p-1'>
<Vision className='w-4 h-4 text-text-primary-on-surface' /> <Vision className='text-text-primary-on-surface h-4 w-4' />
</div> </div>
</div> </div>
<div className='grow flex items-center'> <div className='flex grow items-center'>
<div className='mr-1 text-text-secondary system-sm-semibold'>{t('appDebug.vision.name')}</div> <div className='text-text-secondary system-sm-semibold mr-1'>{t('appDebug.vision.name')}</div>
<Tooltip <Tooltip
popupContent={ popupContent={
<div className='w-[180px]' > <div className='w-[180px]' >
@ -73,7 +73,7 @@ const ConfigVision: FC = () => {
} }
/> />
</div> </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='mr-2 flex items-center gap-0.5'>
<div className='text-text-tertiary system-xs-medium-uppercase'>{t('appDebug.vision.visionSettings.resolution')}</div> <div className='text-text-tertiary system-xs-medium-uppercase'>{t('appDebug.vision.visionSettings.resolution')}</div>
<Tooltip <Tooltip
@ -99,7 +99,7 @@ const ConfigVision: FC = () => {
/> />
</div> */} </div> */}
<ParamConfig /> <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 <Switch
defaultValue={isImageEnabled} defaultValue={isImageEnabled}
onChange={handleChange} 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 ( return (
<div> <div>
<div className='leading-6 text-base font-semibold text-text-primary'>{t('appDebug.vision.visionSettings.title')}</div> <div className='text-text-primary text-base font-semibold leading-6'>{t('appDebug.vision.visionSettings.title')}</div>
<div className='pt-3 space-y-6'> <div className='space-y-6 pt-3'>
<div> <div>
<div className='mb-2 flex items-center space-x-1'> <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 <Tooltip
popupContent={ popupContent={
<div className='w-[180px]' > <div className='w-[180px]' >
@ -78,7 +78,7 @@ const ParamConfigContent: FC = () => {
</div> </div>
</div> </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'> <div className='flex items-center gap-1'>
<OptionCard <OptionCard
className='grow' 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)}> <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
<Button variant='ghost' size='small' className={cn('')}> <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> <div className='ml-1'>{t('appDebug.voice.settings')}</div>
</Button> </Button>
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 50 }}> <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 /> <ParamConfigContent />
</div> </div>
</PortalToFollowElemContent> </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 ( return (
<> <>
<Button onClick={() => setIsShowAgentSetting(true)} className='shrink-0 mr-2'> <Button onClick={() => setIsShowAgentSetting(true)} className='mr-2 shrink-0'>
<RiSettings2Line className='mr-1 w-4 h-4 text-text-tertiary' /> <RiSettings2Line className='text-text-tertiary mr-1 h-4 w-4' />
{t('appDebug.agent.setting.name')} {t('appDebug.agent.setting.name')}
</Button> </Button>
{isShowAgentSetting && ( {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 ( 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={{ style={{
backgroundColor: 'rgba(16, 24, 40, 0.20)', backgroundColor: 'rgba(16, 24, 40, 0.20)',
}} }}
> >
<div <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='border-divider-regular flex h-14 shrink-0 items-center justify-between border-b pl-6 pr-5'>
<div className='flex flex-col text-base font-semibold text-text-primary'> <div className='text-text-primary flex flex-col text-base font-semibold'>
<div className='leading-6'>{t('appDebug.agent.setting.name')}</div> <div className='leading-6'>{t('appDebug.agent.setting.name')}</div>
</div> </div>
<div className='flex items-center'> <div className='flex items-center'>
<div <div
onClick={onCancel} 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> </div>
</div> </div>
{/* Body */} {/* 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)', borderBottom: 'rgba(0, 0, 0, 0.05)',
}}> }}>
{/* Agent Mode */} {/* Agent Mode */}
<ItemPanel <ItemPanel
className='mb-4' className='mb-4'
icon={ icon={
<CuteRobot className='w-4 h-4 text-indigo-600' /> <CuteRobot className='h-4 w-4 text-indigo-600' />
} }
name={t('appDebug.agent.agentMode')} name={t('appDebug.agent.agentMode')}
description={t('appDebug.agent.agentModeDes')} 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>
<ItemPanel <ItemPanel
className='mb-4' className='mb-4'
icon={ icon={
<Unblur className='w-4 h-4 text-[#FB6514]' /> <Unblur className='h-4 w-4 text-[#FB6514]' />
} }
name={t('appDebug.agent.setting.maximumIterations.name')} name={t('appDebug.agent.setting.maximumIterations.name')}
description={t('appDebug.agent.setting.maximumIterations.description')} description={t('appDebug.agent.setting.maximumIterations.description')}
@ -99,7 +99,7 @@ const AgentSetting: FC<Props> = ({
type="number" type="number"
min={maxIterationsMin} min={maxIterationsMin}
max={maxIterationsMax} step={1} 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} value={tempPayload.max_iteration}
onChange={(e) => { onChange={(e) => {
let value = Number.parseInt(e.target.value, 10) let value = Number.parseInt(e.target.value, 10)
@ -117,20 +117,20 @@ const AgentSetting: FC<Props> = ({
</ItemPanel> </ItemPanel>
{!isFunctionCall && ( {!isFunctionCall && (
<div className='py-2 bg-background-section-burn rounded-xl shadow-xs'> <div className='bg-background-section-burn shadow-xs rounded-xl py-2'>
<div className='flex items-center h-8 px-4 leading-6 text-sm font-semibold text-text-secondary'>{t('tools.builtInPromptTitle')}</div> <div className='text-text-secondary flex h-8 items-center px-4 text-sm font-semibold leading-6'>{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='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} {isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion}
</div> </div>
<div className='px-4'> <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>
)} )}
</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 <Button
onClick={onCancel} 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, children,
}) => { }) => {
return ( 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'> <div className='flex items-center'>
{icon} {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 <Tooltip
popupContent={ popupContent={
<div className='w-[180px]'> <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={ headerRight={
<div className='flex items-center'> <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 && ( {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 <ToolPicker
trigger={<OperationBtn type="add" />} trigger={<OperationBtn type="add" />}
isShow={isShowChooseTool} isShow={isShowChooseTool}
@ -139,25 +139,25 @@ const AgentTools: FC = () => {
</div> </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) => ( {tools.map((item: AgentTool & { icon: any; collection?: Collection }, index) => (
<div key={index} <div key={index}
className={cn( 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', isDeleting === index && 'hover:bg-state-destructive-hover border-state-destructive-border',
)} )}
> >
<div className='grow w-0 flex items-center'> <div className='flex w-0 grow items-center'>
{item.isDeleted && <DefaultToolIcon className='w-5 h-5' />} {item.isDeleted && <DefaultToolIcon className='h-5 w-5' />}
{!item.isDeleted && ( {!item.isDeleted && (
<div className={cn((item.notAuthor || !item.enabled) && 'opacity-50')}> <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} />} {typeof item.icon !== 'string' && <AppIcon className='rounded-md' size='xs' icon={item.icon?.content} background={item.icon?.background} />}
</div> </div>
)} )}
<div <div
className={cn( 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' : '', (item.isDeleted || item.notAuthor || !item.enabled) ? 'opacity-50' : '',
)} )}
> >
@ -168,34 +168,34 @@ const AgentTools: FC = () => {
needsDelay needsDelay
popupContent={ popupContent={
<div className='w-[180px]'> <div className='w-[180px]'>
<div className='mb-1.5 text-text-secondary'>{item.tool_name}</div> <div className='text-text-secondary mb-1.5'>{item.tool_name}</div>
<div className='mb-1.5 text-text-tertiary'>{t('tools.toolNameUsageTip')}</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 className='text-text-accent cursor-pointer' onClick={() => copy(item.tool_name)}>{t('tools.copyToolName')}</div>
</div> </div>
} }
> >
<div className='w-4 h-4'> <div className='h-4 w-4'>
<div className='hidden group-hover:inline-block ml-0.5'> <div className='ml-0.5 hidden group-hover:inline-block'>
<RiInformation2Line className='w-4 h-4 text-text-tertiary' /> <RiInformation2Line className='text-text-tertiary h-4 w-4' />
</div> </div>
</div> </div>
</Tooltip> </Tooltip>
)} )}
</div> </div>
</div> </div>
<div className='shrink-0 ml-1 flex items-center'> <div className='ml-1 flex shrink-0 items-center'>
{item.isDeleted && ( {item.isDeleted && (
<div className='flex items-center mr-2'> <div className='mr-2 flex items-center'>
<Tooltip <Tooltip
popupContent={t('tools.toolRemoved')} popupContent={t('tools.toolRemoved')}
needsDelay needsDelay
> >
<div className='mr-1 p-1 rounded-md hover:bg-black/5 cursor-pointer'> <div className='mr-1 cursor-pointer rounded-md p-1 hover:bg-black/5'>
<AlertTriangle className='w-4 h-4 text-[#F79009]' /> <AlertTriangle className='h-4 w-4 text-[#F79009]' />
</div> </div>
</Tooltip> </Tooltip>
<div <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={() => { onClick={() => {
const newModelConfig = produce(modelConfig, (draft) => { const newModelConfig = produce(modelConfig, (draft) => {
draft.agentConfig.tools.splice(index, 1) draft.agentConfig.tools.splice(index, 1)
@ -206,27 +206,27 @@ const AgentTools: FC = () => {
onMouseOver={() => setIsDeleting(index)} onMouseOver={() => setIsDeleting(index)}
onMouseLeave={() => setIsDeleting(-1)} onMouseLeave={() => setIsDeleting(-1)}
> >
<RiDeleteBinLine className='w-4 h-4' /> <RiDeleteBinLine className='h-4 w-4' />
</div> </div>
</div> </div>
)} )}
{!item.isDeleted && ( {!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 && ( {!item.notAuthor && (
<Tooltip <Tooltip
popupContent={t('tools.setBuiltInTools.infoAndSetting')} popupContent={t('tools.setBuiltInTools.infoAndSetting')}
needsDelay 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) setCurrentTool(item)
setIsShowSettingTool(true) setIsShowSettingTool(true)
}}> }}>
<RiEqualizer2Line className='w-4 h-4 text-text-tertiary' /> <RiEqualizer2Line className='text-text-tertiary h-4 w-4' />
</div> </div>
</Tooltip> </Tooltip>
)} )}
<div <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={() => { onClick={() => {
const newModelConfig = produce(modelConfig, (draft) => { const newModelConfig = produce(modelConfig, (draft) => {
draft.agentConfig.tools.splice(index, 1) draft.agentConfig.tools.splice(index, 1)
@ -237,7 +237,7 @@ const AgentTools: FC = () => {
onMouseOver={() => setIsDeleting(index)} onMouseOver={() => setIsDeleting(index)}
onMouseLeave={() => setIsDeleting(-1)} onMouseLeave={() => setIsDeleting(-1)}
> >
<RiDeleteBinLine className='w-4 h-4' /> <RiDeleteBinLine className='h-4 w-4' />
</div> </div>
</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 = ( const infoUI = (
<div className=''> <div className=''>
{infoSchemas.length > 0 && ( {infoSchemas.length > 0 && (
<div className='py-2 space-y-1'> <div className='space-y-1 py-2'>
{infoSchemas.map((item: any, index) => ( {infoSchemas.map((item: any, index) => (
<div key={index} className='py-1'> <div key={index} className='py-1'>
<div className='flex items-center gap-2'> <div className='flex items-center gap-2'>
@ -132,7 +132,7 @@ const SettingBuiltInTool: FC<Props> = ({
)} )}
</div> </div>
{item.human_description && ( {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]} {item.human_description?.[language]}
</div> </div>
)} )}
@ -163,47 +163,47 @@ const SettingBuiltInTool: FC<Props> = ({
footer={null} footer={null}
mask={false} mask={false}
positionCenter={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 && <Loading type='app' />}
{!isLoading && ( {!isLoading && (
<> <>
{/* header */} {/* header */}
<div className='relative p-4 pb-3 border-b border-divider-subtle'> <div className='border-divider-subtle relative border-b p-4 pb-3'>
<div className='absolute top-3 right-3'> <div className='absolute right-3 top-3'>
<ActionButton onClick={onHide}> <ActionButton onClick={onHide}>
<RiCloseLine className='w-4 h-4' /> <RiCloseLine className='h-4 w-4' />
</ActionButton> </ActionButton>
</div> </div>
{showBackButton && ( {showBackButton && (
<div <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} onClick={onHide}
> >
<RiArrowLeftLine className='w-4 h-4' /> <RiArrowLeftLine className='h-4 w-4' />
BACK BACK
</div> </div>
)} )}
<div className='flex items-center gap-1'> <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 <OrgInfo
packageNameClassName='w-auto' packageNameClassName='w-auto'
orgName={collection.author} orgName={collection.author}
packageName={collection.name.split('/').pop() || ''} packageName={collection.name.split('/').pop() || ''}
/> />
</div> </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] && ( {!!currTool?.description[language] && (
<Description className='mt-3' text={currTool.description[language]} descriptionLineRows={2}></Description> <Description className='mt-3' text={currTool.description[language]} descriptionLineRows={2}></Description>
)} )}
</div> </div>
{/* form */} {/* form */}
<div className='h-full'> <div className='h-full'>
<div className='flex flex-col h-full'> <div className='flex h-full flex-col'>
{(hasSetting && !readonly) ? ( {(hasSetting && !readonly) ? (
<TabSlider <TabSlider
className='shrink-0 mt-1 px-4' className='mt-1 shrink-0 px-4'
itemClassName='py-3' itemClassName='py-3'
noBorderBottom noBorderBottom
value={currType} 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} {isInfoActive ? infoUI : settingUI}
</div> </div>
{!readonly && !isInfoActive && ( {!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'> <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 items-center h-8 !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 ' 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> <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>
)} )}
</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 ( return (
<div className={cn(className, s.gradientBorder, 'relative')}> <div className={cn(className, s.gradientBorder, 'relative')}>
<div className='rounded-xl bg-white'> <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='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')}> <div className={cn(s.optionWrap, 'items-center space-x-1')}>
{!isCopied {!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) copy(value)
setIsCopied(true) setIsCopied(true)
}} /> }} />
@ -90,7 +90,7 @@ const Editor: FC<Props> = ({
)} )}
</div> </div>
</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 <PromptEditor
className={editorHeight} className={editorHeight}
value={value} value={value}
@ -138,8 +138,8 @@ const Editor: FC<Props> = ({
onBlur={() => { }} onBlur={() => { }}
/> />
</div> </div>
<div className='pl-4 pb-2 flex'> <div className='flex pb-2 pl-4'>
<div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{value.length}</div> <div className="h-[18px] rounded-md bg-gray-100 px-1 text-xs leading-[18px] text-gray-500">{value.length}</div>
</div> </div>
</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 }) => { const SelectItem: FC<ItemProps> = ({ text, value, Icon, isChecked, description, onClick, disabled }) => {
return ( return (
<div <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)} onClick={() => !disabled && onClick(value)}
> >
<div className='flex items-center justify-between'> <div className='flex items-center justify-between'>
<div className='flex items-center '> <div className='flex items-center '>
<div className='mr-3 p-1 bg-indigo-50 rounded-lg'> <div className='mr-3 rounded-lg bg-indigo-50 p-1'>
<Icon className='w-4 h-4 text-indigo-600' /> <Icon className='h-4 w-4 text-indigo-600' />
</div> </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> </div>
<Radio isChecked={isChecked} /> <Radio isChecked={isChecked} />
</div> </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> </div>
) )
} }
@ -83,7 +83,7 @@ const AssistantTypePicker: FC<Props> = ({
<> <>
<div className='my-4 h-[1px] bg-gray-100'></div> <div className='my-4 h-[1px] bg-gray-100'></div>
<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={() => { onClick={() => {
if (isAgent) { if (isAgent) {
setOpen(false) setOpen(false)
@ -93,14 +93,14 @@ const AssistantTypePicker: FC<Props> = ({
> >
<div className='flex items-center justify-between'> <div className='flex items-center justify-between'>
<div className='flex items-center '> <div className='flex items-center '>
<div className='mr-3 p-1 bg-gray-200 group-hover:bg-white rounded-lg'> <div className='mr-3 rounded-lg bg-gray-200 p-1 group-hover:bg-white'>
<Settings04 className='w-4 h-4 text-gray-600 group-hover:text-[#155EEF]' /> <Settings04 className='h-4 w-4 text-gray-600 group-hover:text-[#155EEF]' />
</div> </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> </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>
<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> </div>
</> </>
) )
@ -116,15 +116,15 @@ const AssistantTypePicker: FC<Props> = ({
}} }}
> >
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}> <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')}> <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='w-3 h-3' /> : <CuteRobot className='w-3 h-3' />} {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> <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> </div>
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 1000 }}> <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='border-black/8 relative left-0.5 w-[480px] rounded-xl border bg-white p-6 shadow-lg'>
<div className='mb-2 leading-5 text-sm font-semibold text-gray-900'>{t('appDebug.assistantType.name')}</div> <div className='mb-2 text-sm font-semibold leading-5 text-gray-900'>{t('appDebug.assistantType.name')}</div>
<SelectItem <SelectItem
Icon={BubbleText} Icon={BubbleText}
value='chat' 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() const { t } = useTranslation()
return ( 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} 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> <span className='text-xs font-semibold text-indigo-600'>{t('appDebug.operation.automatic')}</span>
</div> </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 }) => { }> = ({ Icon, text, onClick }) => {
return ( return (
<div <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} 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 className='ml-1 text-xs font-medium text-gray-700'>{text}</div>
</div> </div>
) )
@ -138,16 +138,16 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
const [res, setRes] = React.useState<AutomaticRes | null>(null) const [res, setRes] = React.useState<AutomaticRes | null>(null)
const renderLoading = ( 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 /> <Loading />
<div className='text-[13px] text-gray-400'>{t('appDebug.generate.loading')}</div> <div className='text-[13px] text-gray-400'>{t('appDebug.generate.loading')}</div>
</div> </div>
) )
const renderNoData = ( const renderNoData = (
<div className='w-0 grow flex flex-col items-center px-8 justify-center h-full space-y-3'> <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8'>
<Generator className='w-14 h-14 text-gray-300' /> <Generator className='h-14 w-14 text-gray-300' />
<div className='leading-5 text-center text-[13px] font-normal text-gray-400'> <div className='text-center text-[13px] font-normal leading-5 text-gray-400'>
<div>{t('appDebug.generate.noDataLine1')}</div> <div>{t('appDebug.generate.noDataLine1')}</div>
<div>{t('appDebug.generate.noDataLine2')}</div> <div>{t('appDebug.generate.noDataLine2')}</div>
</div> </div>
@ -189,18 +189,18 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
<Modal <Modal
isShow={isShow} isShow={isShow}
onClose={onClose} onClose={onClose}
className='!p-0 min-w-[1140px]' className='min-w-[1140px] !p-0'
closable closable
> >
<div className='flex h-[680px] flex-wrap'> <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='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 className='mt-1 text-[13px] font-normal text-gray-500'>{t('appDebug.generate.description')}</div>
</div> </div>
<div className='flex items-center mb-8'> <div className='mb-8 flex items-center'>
<ModelIcon <ModelIcon
className='shrink-0 mr-1.5 ' className='mr-1.5 shrink-0 '
provider={currentProvider} provider={currentProvider}
modelName={currentModel?.model} modelName={currentModel?.model}
/> />
@ -213,8 +213,8 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
</div> </div>
<div > <div >
<div className='flex items-center'> <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='mr-3 shrink-0 text-xs font-semibold uppercase leading-[18px] text-gray-500'>{t('appDebug.generate.tryIt')}</div>
<div className='grow h-px' style={{ <div className='h-px grow' style={{
background: 'linear-gradient(to right, rgba(243, 244, 246, 1), rgba(243, 244, 246, 0))', background: 'linear-gradient(to right, rgba(243, 244, 246, 1), rgba(243, 244, 246, 0))',
}}></div> }}></div>
</div> </div>
@ -232,7 +232,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
{/* inputs */} {/* inputs */}
<div className='mt-6'> <div className='mt-6'>
<div className='text-[0px]'> <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 <Textarea
className="h-[200px] resize-none" className="h-[200px] resize-none"
placeholder={t('appDebug.generate.instructionPlaceHolder') as string} placeholder={t('appDebug.generate.instructionPlaceHolder') as string}
@ -247,7 +247,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
onClick={onGenerate} onClick={onGenerate}
disabled={isLoading} 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> <span className='text-xs font-semibold text-white'>{t('appDebug.generate.generate')}</span>
</Button> </Button>
</div> </div>
@ -255,8 +255,8 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
</div> </div>
{(!isLoading && res) && ( {(!isLoading && res) && (
<div className='w-0 grow p-6 pb-0 h-full'> <div className='h-full w-0 grow p-6 pb-0'>
<div className='shrink-0 mb-3 leading-[160%] text-base font-semibold text-gray-800'>{t('appDebug.generate.resTitle')}</div> <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')}> <div className={cn('max-h-[555px] overflow-y-auto', !isInLLMNode && 'pb-2')}>
<ConfigPrompt <ConfigPrompt
mode={mode} mode={mode}
@ -283,17 +283,17 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
<div className='mt-7'> <div className='mt-7'>
<GroupName name={t('appDebug.feature.groupChat.title')} /> <GroupName name={t('appDebug.feature.groupChat.title')} />
<div <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='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'> <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='w-4 h-4 text-text-primary-on-surface' /> <LoveMessage className='text-text-primary-on-surface h-4 w-4' />
</div> </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')} {t('appDebug.feature.conversationOpener.title')}
</div> </div>
</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>
</div> </div>
)} )}
@ -301,7 +301,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
)} )}
</div> </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 onClick={onClose}>{t('common.operation.cancel')}</Button>
<Button variant='primary' className='ml-2' onClick={() => { <Button variant='primary' className='ml-2' onClick={() => {
setShowConfirmOverwrite(true) 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 [showConfirmOverwrite, setShowConfirmOverwrite] = React.useState(false)
const renderLoading = ( 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 /> <Loading />
<div className='text-[13px] text-gray-400'>{t('appDebug.codegen.loading')}</div> <div className='text-[13px] text-gray-400'>{t('appDebug.codegen.loading')}</div>
</div> </div>
) )
const renderNoData = ( const renderNoData = (
<div className='w-0 grow flex flex-col items-center px-8 justify-center h-full space-y-3'> <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8'>
<Generator className='w-14 h-14 text-gray-300' /> <Generator className='h-14 w-14 text-gray-300' />
<div className='leading-5 text-center text-[13px] font-normal text-gray-400'> <div className='text-center text-[13px] font-normal leading-5 text-gray-400'>
<div>{t('appDebug.codegen.noDataLine1')}</div> <div>{t('appDebug.codegen.noDataLine1')}</div>
<div>{t('appDebug.codegen.noDataLine2')}</div> <div>{t('appDebug.codegen.noDataLine2')}</div>
</div> </div>
@ -119,18 +119,18 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
<Modal <Modal
isShow={isShow} isShow={isShow}
onClose={onClose} onClose={onClose}
className='!p-0 min-w-[1140px]' className='min-w-[1140px] !p-0'
closable closable
> >
<div className='relative flex h-[680px] flex-wrap'> <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='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 className='mt-1 text-[13px] font-normal text-gray-500'>{t('appDebug.codegen.description')}</div>
</div> </div>
<div className='flex items-center'> <div className='flex items-center'>
<ModelIcon <ModelIcon
className='shrink-0 mr-1.5' className='mr-1.5 shrink-0'
provider={currentProvider} provider={currentProvider}
modelName={currentModel?.model} modelName={currentModel?.model}
/> />
@ -143,9 +143,9 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
</div> </div>
<div className='mt-6'> <div className='mt-6'>
<div className='text-[0px]'> <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 <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') || ''} placeholder={t('appDebug.codegen.instructionPlaceholder') || ''}
value={instruction} value={instruction}
onChange={e => setInstruction(e.target.value)} onChange={e => setInstruction(e.target.value)}
@ -159,7 +159,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
onClick={onGenerate} onClick={onGenerate}
disabled={isLoading} 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> <span className='text-xs font-semibold text-white'>{t('appDebug.codegen.generate')}</span>
</Button> </Button>
</div> </div>
@ -168,8 +168,8 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
{isLoading && renderLoading} {isLoading && renderLoading}
{!isLoading && !res && renderNoData} {!isLoading && !res && renderNoData}
{(!isLoading && res) && ( {(!isLoading && res) && (
<div className='w-0 grow p-6 pb-0 h-full'> <div className='h-full w-0 grow p-6 pb-0'>
<div className='shrink-0 mb-3 leading-[160%] text-base font-semibold text-gray-800'>{t('appDebug.codegen.resTitle')}</div> <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')}> <div className={cn('max-h-[555px] overflow-y-auto', !isInLLMNode && 'pb-2')}>
<ConfigPrompt <ConfigPrompt
mode={mode} mode={mode}
@ -186,7 +186,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
{res?.code && ( {res?.code && (
<div className='mt-4'> <div className='mt-4'>
<h3 className='mb-2 text-sm font-medium text-gray-900'>{t('appDebug.codegen.generatedCode')}</h3> <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}`}> <code className={`language-${res.language}`}>
{res.code} {res.code}
</code> </code>
@ -194,7 +194,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
</div> </div>
)} )}
{res?.error && ( {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> <p className='text-sm text-red-600'>{res.error}</p>
</div> </div>
)} )}
@ -202,7 +202,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
)} )}
</div> </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 onClick={onClose}>{t('common.operation.cancel')}</Button>
<Button variant='primary' className='ml-2' onClick={() => { <Button variant='primary' className='ml-2' onClick={() => {
setShowConfirmOverwrite(true) 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 null
return ( 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='shrink-0 p-1'>
<div className='p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'> <div className='border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600 rounded-lg border-[0.5px] p-1'>
<Document className='w-4 h-4 text-text-primary-on-surface' /> <Document className='text-text-primary-on-surface h-4 w-4' />
</div> </div>
</div> </div>
<div className='grow flex items-center'> <div className='flex grow items-center'>
<div className='mr-1 text-text-secondary system-sm-semibold'>{t('appDebug.feature.documentUpload.title')}</div> <div className='text-text-secondary system-sm-semibold mr-1'>{t('appDebug.feature.documentUpload.title')}</div>
<Tooltip <Tooltip
popupContent={ popupContent={
<div className='w-[180px]' > <div className='w-[180px]' >
@ -64,8 +64,8 @@ const ConfigDocument: FC = () => {
} }
/> />
</div> </div>
<div className='shrink-0 flex items-center'> <div className='flex shrink-0 items-center'>
<div className='ml-1 mr-3 w-[1px] h-3.5 bg-divider-subtle'></div> <div className='bg-divider-subtle ml-1 mr-3 h-3.5 w-[1px]'></div>
<Switch <Switch
defaultValue={isDocumentEnabled} defaultValue={isDocumentEnabled}
onChange={handleChange} onChange={handleChange}

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

@ -57,7 +57,7 @@ const Config: FC = () => {
return ( return (
<> <>
<div <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 */} {/* Template */}
<ConfigPrompt <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 ContrlBtnGroup: FC<IContrlBtnGroupProps> = ({ onSave, onReset }) => {
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<div className="fixed left-[224px] bottom-0 w-[519px] h-[64px]"> <div className="fixed bottom-0 left-[224px] h-[64px] w-[519px]">
<div className={`${s.ctrlBtn} flex items-center h-full pl-4 gap-2 bg-white`}> <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 variant='primary' onClick={onSave}>{t('appDebug.operation.applyConfig')}</Button>
<Button onClick={onReset}>{t('appDebug.operation.resetConfig')}</Button> <Button onClick={onReset}>{t('appDebug.operation.resetConfig')}</Button>
</div> </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 <div
className={ className={
cn(className, s.card, 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='flex items-center space-x-2'>
<div className={cn(!config.embedding_available && 'opacity-50')}> <div className={cn(!config.embedding_available && 'opacity-50')}>
<TypeIcon type="upload_file" /> <TypeIcon type="upload_file" />
</div> </div>
<div> <div>
<div className='flex items-center w-[160px] mr-1'> <div className='mr-1 flex w-[160px] items-center'>
<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={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 && ( {!config.embedding_available && (
<Tooltip <Tooltip
popupContent={t('dataset.unavailableTip')} 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> </Tooltip>
)} )}
</div> </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')} {formatNumber(config.word_count)} {t('appDebug.feature.dataSet.words')} · {formatNumber(config.document_count)} {t('appDebug.feature.dataSet.textBlocks')}
</div> </div>
</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) const [isDeleting, setIsDeleting] = useState(false)
return ( 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 && ( 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]'> <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='w-4 h-4 text-[#444CE7]' /> <Folder className='h-4 w-4 text-[#444CE7]' />
</div> </div>
) )
} }
{ {
config.data_source_type === DataSourceType.NOTION && ( 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]'> <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='w-4 h-4' /> <FileIcon type='notion' className='h-4 w-4' />
</div> </div>
) )
} }
{ {
config.data_source_type === DataSourceType.WEB && ( 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'> <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='w-4 h-4 text-blue-600' /> <Globe06 className='h-4 w-4 text-blue-600' />
</div> </div>
) )
} }
<div className='grow'> <div className='grow'>
<div className='flex items-center h-[18px]'> <div className='flex h-[18px] items-center'>
<div className='grow text-[13px] font-medium text-text-secondary truncate' title={config.name}>{config.name}</div> <div className='text-text-secondary grow truncate text-[13px] font-medium' title={config.name}>{config.name}</div>
{config.provider === 'external' {config.provider === 'external'
? <Badge text={t('dataset.externalTag') as string} /> ? <Badge text={t('dataset.externalTag') as string} />
: <Badge : <Badge
@ -79,22 +79,22 @@ const Item: FC<ItemProps> = ({
/>} />}
</div> </div>
</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 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)} onClick={() => setShowSettingsModal(true)}
> >
<RiEditLine className='w-4 h-4 text-text-tertiary' /> <RiEditLine className='text-text-tertiary h-4 w-4' />
</div> </div>
} }
<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)} onClick={() => onRemove(config.id)}
onMouseOver={() => setIsDeleting(true)} onMouseOver={() => setIsDeleting(true)}
onMouseLeave={() => setIsDeleting(false)} onMouseLeave={() => setIsDeleting(false)}
> >
<RiDeleteBinLine className='w-4 h-4' /> <RiDeleteBinLine className='h-4 w-4' />
</div> </div>
</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'> <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 currItem = options.find(item => item.value === value)
const notSetVar = !currItem const notSetVar = !currItem
return ( 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={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 items-center space-x-1 shrink-0'> <div className='flex shrink-0 items-center space-x-1'>
<div className='p-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>
<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 <Tooltip
popupContent={ popupContent={
<div className='w-[180px]'> <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 }) => ( 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]' /> <IconTypeIcon type={item.type as IInputTypeIconProps['type']} className='text-[#1570EF]' />
<div className='flex text-xs font-medium text-[#1570EF]'> <div className='flex text-xs font-medium text-[#1570EF]'>
<span className='opacity-60'>{'{{'}</span> <span className='opacity-60'>{'{{'}</span>
@ -56,10 +56,10 @@ const VarPicker: FC<Props> = ({
<PortalToFollowElemTrigger className={cn(triggerClassName)} onClick={() => setOpen(v => !v)}> <PortalToFollowElemTrigger className={cn(triggerClassName)} onClick={() => setOpen(v => !v)}>
<div className={cn( <div className={cn(
className, 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', 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 text-[13px] font-medium
`)}> `)}>
<div> <div>
@ -71,16 +71,16 @@ const VarPicker: FC<Props> = ({
{notSelectedVarTip || t('appDebug.feature.dataSet.queryVariable.choosePlaceholder')} {notSelectedVarTip || t('appDebug.feature.dataSet.queryVariable.choosePlaceholder')}
</div>)} </div>)}
</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> </div>
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 1000 }}> <PortalToFollowElemContent style={{ zIndex: 1000 }}>
{options.length > 0 {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) => ( {options.map(({ name, value, type }, index) => (
<div <div
key={index} 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={() => { onClick={() => {
onChange(value) onChange(value)
setOpen(false) setOpen(false)
@ -91,9 +91,9 @@ const VarPicker: FC<Props> = ({
))} ))}
</div>) </div>)
: ( : (
<div className='w-[240px] p-6 bg-components-panel-bg border border-components-panel-border rounded-lg shadow-lg'> <div className='bg-components-panel-bg border-components-panel-border w-[240px] rounded-lg border p-6 shadow-lg'>
<div className='mb-1 text-sm font-medium text-text-secondary'>{t('appDebug.feature.dataSet.queryVariable.noVar')}</div> <div className='text-text-secondary mb-1 text-sm font-medium'>{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='text-text-tertiary text-xs leading-normal'>{t('appDebug.feature.dataSet.queryVariable.noVarTip')}</div>
</div> </div>
)} )}

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

@ -130,7 +130,7 @@ const DatasetConfig: FC = () => {
> >
{hasData {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 => ( {formattedDataset.map(item => (
<CardItem <CardItem
key={item.id} key={item.id}
@ -144,7 +144,7 @@ const DatasetConfig: FC = () => {
) )
: ( : (
<div className='mt-1 px-3 pb-3'> <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> </div>
)} )}

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

Write Preview
Loading…
Cancel
Save