hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-23 09:46:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

Chore: frontend infrastructure upgrade (#16420)

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

14
web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
View File

@@ -28,7 +28,7 @@ type ItemProps = {
const SelectItem: FC<ItemProps> = ({ text, value, isChecked, onClick }) => {
return (
<div
className={cn(isChecked ? 'border-[2px] border-util-colors-indigo-indigo-600 shadow-sm bg-components-panel-on-panel-item-bg' : 'border border-components-card-border', 'mb-2 flex items-center h-9 pl-3 w-[150px] rounded-xl bg-components-panel-on-panel-item-bg hover:bg-components-panel-on-panel-item-bg-hover cursor-pointer space-x-2')}
className={cn(isChecked ? 'border-[2px] border-util-colors-indigo-indigo-600 bg-components-panel-on-panel-item-bg shadow-sm' : 'border border-components-card-border', 'mb-2 flex h-9 w-[150px] cursor-pointer items-center space-x-2 rounded-xl bg-components-panel-on-panel-item-bg pl-3 hover:bg-components-panel-on-panel-item-bg-hover')}
onClick={() => onClick(value)}
>
<Radio isChecked={isChecked} />
@@ -57,10 +57,10 @@ const ConfigCredential: FC<Props> = ({
height={'fit-content'}
headerClassName='!border-b-divider-regular'
body={
<div className='pt-2 px-6'>
<div className='px-6 pt-2'>
<div className='space-y-4'>
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.authMethod.type')}</div>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.type')}</div>
<div className='flex space-x-3'>
<SelectItem
text={t('tools.createTool.authMethod.types.none')}
@@ -85,7 +85,7 @@ const ConfigCredential: FC<Props> = ({
{tempCredential.auth_type === AuthType.apiKey && (
<>
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.authHeaderPrefix.title')}</div>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authHeaderPrefix.title')}</div>
<div className='flex space-x-3'>
<SelectItem
text={t('tools.createTool.authHeaderPrefix.types.basic')}
@@ -108,7 +108,7 @@ const ConfigCredential: FC<Props> = ({
</div>
</div>
<div>
<div className='flex items-center py-2 system-sm-medium text-text-primary'>
<div className='system-sm-medium flex items-center py-2 text-text-primary'>
{t('tools.createTool.authMethod.key')}
<Tooltip
popupContent={
@@ -126,7 +126,7 @@ const ConfigCredential: FC<Props> = ({
/>
</div>
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.authMethod.value')}</div>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.value')}</div>
<Input
value={tempCredential.api_key_value}
onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
@@ -137,7 +137,7 @@ const ConfigCredential: FC<Props> = ({
</div>
<div className='mt-4 shrink-0 flex justify-end space-x-2 py-4'>
<div className='mt-4 flex shrink-0 justify-end space-x-2 py-4'>
<Button onClick={onHide}>{t('common.operation.cancel')}</Button>
<Button variant='primary' onClick={() => {
onChange(tempCredential)

14
web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
View File

@@ -56,18 +56,18 @@ const GetSchema: FC<Props> = ({
}, showExamplesRef)
return (
<div className='flex space-x-1 justify-end relative w-[224px]'>
<div className='relative flex w-[224px] justify-end space-x-1'>
<div ref={importURLRef}>
<Button
size='small'
className='space-x-1 '
onClick={() => { setShowImportFromUrl(!showImportFromUrl) }}
>
<RiAddLine className='w-3 h-3' />
<RiAddLine className='h-3 w-3' />
<div className='system-xs-medium text-text-secondary'>{t('tools.createTool.importFromUrl')}</div>
</Button>
{showImportFromUrl && (
<div className=' absolute left-[-35px] top-[26px] p-2 rounded-lg border border-components-panel-border bg-components-panel-bg shadow-lg'>
<div className=' absolute left-[-35px] top-[26px] rounded-lg border border-components-panel-border bg-components-panel-bg p-2 shadow-lg'>
<div className='relative'>
<Input
type='text'
@@ -77,7 +77,7 @@ const GetSchema: FC<Props> = ({
onChange={e => setImportUrl(e.target.value)}
/>
<Button
className='absolute top-1 right-1'
className='absolute right-1 top-1'
size='small'
variant='primary'
disabled={!importUrl}
@@ -97,10 +97,10 @@ const GetSchema: FC<Props> = ({
onClick={() => { setShowExamples(!showExamples) }}
>
<div className='system-xs-medium text-text-secondary'>{t('tools.createTool.examples')}</div>
<RiArrowDownSLine className='w-3 h-3' />
<RiArrowDownSLine className='h-3 w-3' />
</Button>
{showExamples && (
<div className='absolute top-7 right-0 p-1 rounded-lg bg-components-panel-bg shadow-sm'>
<div className='absolute right-0 top-7 rounded-lg bg-components-panel-bg p-1 shadow-sm'>
{examples.map(item => (
<div
key={item.key}
@@ -108,7 +108,7 @@ const GetSchema: FC<Props> = ({
onChange(item.content)
setShowExamples(false)
}}
className='px-3 py-1.5 rounded-lg hover:bg-components-panel-on-panel-item-bg-hover leading-5 system-sm-regular text-text-secondary cursor-pointer whitespace-nowrap'
className='system-sm-regular cursor-pointer whitespace-nowrap rounded-lg px-3 py-1.5 leading-5 text-text-secondary hover:bg-components-panel-on-panel-item-bg-hover'
>
{t(`tools.createTool.exampleOptions.${item.key}`)}
</div>

48
web/app/components/tools/edit-custom-collection-modal/index.tsx
View File

@@ -191,10 +191,10 @@ const EditCustomCollectionModal: FC<Props> = ({
height='calc(100vh - 16px)'
headerClassName='!border-b-divider-regular'
body={
<div className='flex flex-col h-full'>
<div className='grow h-0 overflow-y-auto px-6 py-3 space-y-4'>
<div className='flex h-full flex-col'>
<div className='h-0 grow space-y-4 overflow-y-auto px-6 py-3'>
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
<div className='flex items-center justify-between gap-3'>
<AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.content} background={emoji.background} />
<Input
@@ -212,17 +212,17 @@ const EditCustomCollectionModal: FC<Props> = ({
{/* Schema */}
<div className='select-none'>
<div className='flex justify-between items-center'>
<div className='flex items-center justify-between'>
<div className='flex items-center'>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.schema')}<span className='ml-1 text-red-500'>*</span></div>
<div className='mx-2 w-px h-3 bg-divider-regular'></div>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.schema')}<span className='ml-1 text-red-500'>*</span></div>
<div className='mx-2 h-3 w-px bg-divider-regular'></div>
<a
href="https://swagger.io/specification/"
target='_blank' rel='noopener noreferrer'
className='flex items-center h-[18px] space-x-1 text-text-accent'
className='flex h-[18px] items-center space-x-1 text-text-accent'
>
<div className='text-xs font-normal'>{t('tools.createTool.viewSchemaSpec')}</div>
<LinkExternal02 className='w-3 h-3' />
<LinkExternal02 className='h-3 w-3' />
</a>
</div>
<GetSchema onChange={setSchema} />
@@ -238,26 +238,26 @@ const EditCustomCollectionModal: FC<Props> = ({
{/* Available Tools */}
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.availableTools.title')}</div>
<div className='rounded-lg border border-divider-regular w-full overflow-x-auto'>
<table className='w-full system-xs-regular text-text-secondary'>
<thead className='text-text-tertiary uppercase'>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.availableTools.title')}</div>
<div className='w-full overflow-x-auto rounded-lg border border-divider-regular'>
<table className='system-xs-regular w-full text-text-secondary'>
<thead className='uppercase text-text-tertiary'>
<tr className={cn(paramsSchemas.length > 0 && 'border-b', 'border-divider-regular')}>
<th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.name')}</th>
<th className="p-2 pl-3 font-medium w-[236px]">{t('tools.createTool.availableTools.description')}</th>
<th className="w-[236px] p-2 pl-3 font-medium">{t('tools.createTool.availableTools.description')}</th>
<th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.method')}</th>
<th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.path')}</th>
<th className="p-2 pl-3 font-medium w-[54px]">{t('tools.createTool.availableTools.action')}</th>
<th className="w-[54px] p-2 pl-3 font-medium">{t('tools.createTool.availableTools.action')}</th>
</tr>
</thead>
<tbody>
{paramsSchemas.map((item, index) => (
<tr key={index} className='border-b last:border-0 border-divider-regular'>
<tr key={index} className='border-b border-divider-regular last:border-0'>
<td className="p-2 pl-3">{item.operation_id}</td>
<td className="p-2 pl-3 w-[236px]">{item.summary}</td>
<td className="w-[236px] p-2 pl-3">{item.summary}</td>
<td className="p-2 pl-3">{item.method}</td>
<td className="p-2 pl-3">{getPath(item.server_url)}</td>
<td className="p-2 pl-3 w-[62px]">
<td className="w-[62px] p-2 pl-3">
<Button
size='small'
onClick={() => {
@@ -277,22 +277,22 @@ const EditCustomCollectionModal: FC<Props> = ({
{/* Authorization method */}
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.authMethod.title')}</div>
<div className='flex items-center h-9 justify-between px-2.5 bg-components-input-bg-normal rounded-lg cursor-pointer' onClick={() => setCredentialsModalShow(true)}>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.title')}</div>
<div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5' onClick={() => setCredentialsModalShow(true)}>
<div className='system-xs-regular text-text-primary'>{t(`tools.createTool.authMethod.types.${credential.auth_type}`)}</div>
<RiSettings2Line className='w-4 h-4 text-text-secondary' />
<RiSettings2Line className='h-4 w-4 text-text-secondary' />
</div>
</div>
{/* Labels */}
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.toolInput.label')}</div>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.toolInput.label')}</div>
<LabelSelector value={labels} onChange={handleLabelSelect} />
</div>
{/* Privacy Policy */}
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.privacyPolicy')}</div>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.privacyPolicy')}</div>
<Input
value={customCollection.privacy_policy}
onChange={(e) => {
@@ -305,7 +305,7 @@ const EditCustomCollectionModal: FC<Props> = ({
</div>
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.customDisclaimer')}</div>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.customDisclaimer')}</div>
<Input
value={customCollection.custom_disclaimer}
onChange={(e) => {
@@ -318,7 +318,7 @@ const EditCustomCollectionModal: FC<Props> = ({
</div>
</div>
<div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 shrink-0 flex py-4 px-6 rounded-b-[10px] bg-background-section-burn border-t border-divider-regular')} >
<div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')} >
{
isEdit && (
<Button variant='warning' onClick={onRemove}>{t('common.operation.delete')}</Button>

50
web/app/components/tools/edit-custom-collection-modal/modal.tsx
View File

@@ -183,15 +183,15 @@ const EditCustomCollectionModal: FC<Props> = ({
isShow
onClose={onHide}
closable
className='!p-0 !max-w-[630px] !h-[calc(100vh-16px)]'
className='!h-[calc(100vh-16px)] !max-w-[630px] !p-0'
>
<div className='flex flex-col h-full'>
<div className='flex h-full flex-col'>
<div className='ml-6 mt-6 text-base font-semibold text-text-primary'>
{t('tools.createTool.title')}
</div>
<div className='grow h-0 overflow-y-auto px-6 py-3 space-y-4'>
<div className='h-0 grow space-y-4 overflow-y-auto px-6 py-3'>
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
<div className='flex items-center justify-between gap-3'>
<AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.content} background={emoji.background} />
<Input
@@ -209,17 +209,17 @@ const EditCustomCollectionModal: FC<Props> = ({
{/* Schema */}
<div className='select-none'>
<div className='flex justify-between items-center'>
<div className='flex items-center justify-between'>
<div className='flex items-center'>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.schema')}<span className='ml-1 text-red-500'>*</span></div>
<div className='mx-2 w-px h-3 bg-divider-regular'></div>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.schema')}<span className='ml-1 text-red-500'>*</span></div>
<div className='mx-2 h-3 w-px bg-divider-regular'></div>
<a
href="https://swagger.io/specification/"
target='_blank' rel='noopener noreferrer'
className='flex items-center h-[18px] space-x-1 text-text-accent'
className='flex h-[18px] items-center space-x-1 text-text-accent'
>
<div className='text-xs font-normal'>{t('tools.createTool.viewSchemaSpec')}</div>
<LinkExternal02 className='w-3 h-3' />
<LinkExternal02 className='h-3 w-3' />
</a>
</div>
<GetSchema onChange={setSchema} />
@@ -235,26 +235,26 @@ const EditCustomCollectionModal: FC<Props> = ({
{/* Available Tools */}
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.availableTools.title')}</div>
<div className='rounded-lg border border-divider-regular w-full overflow-x-auto'>
<table className='w-full system-xs-regular text-text-secondary'>
<thead className='text-text-tertiary uppercase'>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.availableTools.title')}</div>
<div className='w-full overflow-x-auto rounded-lg border border-divider-regular'>
<table className='system-xs-regular w-full text-text-secondary'>
<thead className='uppercase text-text-tertiary'>
<tr className={cn(paramsSchemas.length > 0 && 'border-b', 'border-divider-regular')}>
<th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.name')}</th>
<th className="p-2 pl-3 font-medium w-[236px]">{t('tools.createTool.availableTools.description')}</th>
<th className="w-[236px] p-2 pl-3 font-medium">{t('tools.createTool.availableTools.description')}</th>
<th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.method')}</th>
<th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.path')}</th>
<th className="p-2 pl-3 font-medium w-[54px]">{t('tools.createTool.availableTools.action')}</th>
<th className="w-[54px] p-2 pl-3 font-medium">{t('tools.createTool.availableTools.action')}</th>
</tr>
</thead>
<tbody>
{paramsSchemas.map((item, index) => (
<tr key={index} className='border-b last:border-0 border-divider-regular'>
<tr key={index} className='border-b border-divider-regular last:border-0'>
<td className="p-2 pl-3">{item.operation_id}</td>
<td className="p-2 pl-3 w-[236px]">{item.summary}</td>
<td className="w-[236px] p-2 pl-3">{item.summary}</td>
<td className="p-2 pl-3">{item.method}</td>
<td className="p-2 pl-3">{getPath(item.server_url)}</td>
<td className="p-2 pl-3 w-[62px]">
<td className="w-[62px] p-2 pl-3">
<Button
size='small'
onClick={() => {
@@ -274,22 +274,22 @@ const EditCustomCollectionModal: FC<Props> = ({
{/* Authorization method */}
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.authMethod.title')}</div>
<div className='flex items-center h-9 justify-between px-2.5 bg-components-input-bg-normal rounded-lg cursor-pointer' onClick={() => setCredentialsModalShow(true)}>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.title')}</div>
<div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5' onClick={() => setCredentialsModalShow(true)}>
<div className='system-xs-regular text-text-primary'>{t(`tools.createTool.authMethod.types.${credential.auth_type}`)}</div>
<Settings01 className='w-4 h-4 text-text-secondary' />
<Settings01 className='h-4 w-4 text-text-secondary' />
</div>
</div>
{/* Labels */}
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.toolInput.label')}</div>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.toolInput.label')}</div>
<LabelSelector value={labels} onChange={handleLabelSelect} />
</div>
{/* Privacy Policy */}
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.privacyPolicy')}</div>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.privacyPolicy')}</div>
<Input
value={customCollection.privacy_policy}
onChange={(e) => {
@@ -302,7 +302,7 @@ const EditCustomCollectionModal: FC<Props> = ({
</div>
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.customDisclaimer')}</div>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.customDisclaimer')}</div>
<Input
value={customCollection.custom_disclaimer}
onChange={(e) => {
@@ -315,7 +315,7 @@ const EditCustomCollectionModal: FC<Props> = ({
</div>
</div>
<div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 shrink-0 flex py-4 px-6 rounded-b-[10px] bg-background-section-burn border-t border-divider-regular')} >
<div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')} >
{
isEdit && (
<Button variant='warning' onClick={onRemove}>{t('common.operation.delete')}</Button>

24
web/app/components/tools/edit-custom-collection-modal/test-api.tsx
View File

@@ -66,21 +66,21 @@ const TestApi: FC<Props> = ({
height='calc(100vh - 16px)'
headerClassName='!border-b-divider-regular'
body={
<div className='pt-2 px-6 overflow-y-auto'>
<div className='overflow-y-auto px-6 pt-2'>
<div className='space-y-4'>
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.authMethod.title')}</div>
<div className='flex items-center h-9 justify-between px-2.5 bg-components-input-bg-normal rounded-lg cursor-pointer' onClick={() => setCredentialsModalShow(true)}>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.title')}</div>
<div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5' onClick={() => setCredentialsModalShow(true)}>
<div className='system-xs-regular text-text-primary'>{t(`tools.createTool.authMethod.types.${tempCredential.auth_type}`)}</div>
<RiSettings2Line className='w-4 h-4 text-text-secondary' />
<RiSettings2Line className='h-4 w-4 text-text-secondary' />
</div>
</div>
<div>
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.test.parametersValue')}</div>
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.test.parametersValue')}</div>
<div className='rounded-lg border border-divider-regular'>
<table className='w-full system-xs-regular text-text-secondary font-normal'>
<thead className='text-text-tertiary uppercase'>
<table className='system-xs-regular w-full font-normal text-text-secondary'>
<thead className='uppercase text-text-tertiary'>
<tr className='border-b border-divider-regular'>
<th className="p-2 pl-3 font-medium">{t('tools.test.parameters')}</th>
<th className="p-2 pl-3 font-medium">{t('tools.test.value')}</th>
@@ -88,7 +88,7 @@ const TestApi: FC<Props> = ({
</thead>
<tbody>
{parameters.map((item, index) => (
<tr key={index} className='border-b last:border-0 border-divider-regular'>
<tr key={index} className='border-b border-divider-regular last:border-0'>
<td className="py-2 pl-3 pr-2.5">
{item.label[language]}
</td>
@@ -97,7 +97,7 @@ const TestApi: FC<Props> = ({
value={parametersValue[item.name] || ''}
onChange={e => setParametersValue({ ...parametersValue, [item.name]: e.target.value })}
type='text'
className='!bg-transparent !border-transparent !hover:border-transparent !hover:bg-transparent !focus:border-transparent !focus:bg-transparent' />
className='!hover:border-transparent !hover:bg-transparent !focus:border-transparent !focus:bg-transparent !border-transparent !bg-transparent' />
</td>
</tr>
))}
@@ -107,13 +107,13 @@ const TestApi: FC<Props> = ({
</div>
</div>
<Button variant='primary' className=' mt-4 w-full h-10' onClick={handleTest}>{t('tools.test.title')}</Button>
<Button variant='primary' className=' mt-4 h-10 w-full' onClick={handleTest}>{t('tools.test.title')}</Button>
<div className='mt-6'>
<div className='flex items-center space-x-3'>
<div className='system-xs-semibold text-text-tertiary'>{t('tools.test.testResult')}</div>
<div className='grow w-0 h-px bg-[rgb(243, 244, 246)]'></div>
<div className='bg-[rgb(243, 244, 246)] h-px w-0 grow'></div>
</div>
<div className='mt-2 px-3 py-2 h-[200px] overflow-y-auto overflow-x-hidden rounded-lg bg-components-input-bg-normal system-xs-regular text-text-secondary'>
<div className='system-xs-regular mt-2 h-[200px] overflow-y-auto overflow-x-hidden rounded-lg bg-components-input-bg-normal px-3 py-2 text-text-secondary'>
{result || <span className='text-text-quaternary'>{t('tools.test.testResultPlaceholder')}</span>}
</div>
</div>