youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 10:28:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into feat/support-agent-sandbox

Browse Source
This commit is contained in:
yyh
2026-02-09 18:43:04 +08:00
parent ef2fabc158 e0fcf33979
commit db0c527ce8
920 changed files with 4057 additions and 3430 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

@ -32,7 +32,7 @@ const SelectItem: FC<ItemProps> = ({ text, value, isChecked, onClick }) => {
onClick={() => onClick(value)}
>
<Radio isChecked={isChecked} />
<div className="system-sm-regular text-text-primary">{text}</div>
<div className="text-text-primary system-sm-regular">{text}</div>
</div>
)
}
@ -62,7 +62,7 @@ const ConfigCredential: FC<Props> = ({
<div className="px-6 pt-2">
<div className="space-y-4">
<div>
<div className="system-sm-medium py-2 text-text-primary">{t('createTool.authMethod.type', { ns: 'tools' })}</div>
<div className="py-2 text-text-primary system-sm-medium">{t('createTool.authMethod.type', { ns: 'tools' })}</div>
<div className="flex space-x-3">
<SelectItem
text={t('createTool.authMethod.types.none', { ns: 'tools' })}
@ -98,7 +98,7 @@ const ConfigCredential: FC<Props> = ({
{tempCredential.auth_type === AuthType.apiKeyHeader && (
<>
<div>
<div className="system-sm-medium py-2 text-text-primary">{t('createTool.authHeaderPrefix.title', { ns: 'tools' })}</div>
<div className="py-2 text-text-primary system-sm-medium">{t('createTool.authHeaderPrefix.title', { ns: 'tools' })}</div>
<div className="flex space-x-3">
<SelectItem
text={t('createTool.authHeaderPrefix.types.basic', { ns: 'tools' })}
@ -121,7 +121,7 @@ const ConfigCredential: FC<Props> = ({
</div>
</div>
<div>
<div className="system-sm-medium flex items-center py-2 text-text-primary">
<div className="flex items-center py-2 text-text-primary system-sm-medium">
{t('createTool.authMethod.key', { ns: 'tools' })}
<Tooltip
popupContent={(
@ -139,7 +139,7 @@ const ConfigCredential: FC<Props> = ({
/>
</div>
<div>
<div className="system-sm-medium py-2 text-text-primary">{t('createTool.authMethod.value', { ns: 'tools' })}</div>
<div className="py-2 text-text-primary system-sm-medium">{t('createTool.authMethod.value', { ns: 'tools' })}</div>
<Input
value={tempCredential.api_key_value}
onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
@ -151,7 +151,7 @@ const ConfigCredential: FC<Props> = ({
{tempCredential.auth_type === AuthType.apiKeyQuery && (
<>
<div>
<div className="system-sm-medium flex items-center py-2 text-text-primary">
<div className="flex items-center py-2 text-text-primary system-sm-medium">
{t('createTool.authMethod.queryParam', { ns: 'tools' })}
<Tooltip
popupContent={(
@ -169,7 +169,7 @@ const ConfigCredential: FC<Props> = ({
/>
</div>
<div>
<div className="system-sm-medium py-2 text-text-primary">{t('createTool.authMethod.value', { ns: 'tools' })}</div>
<div className="py-2 text-text-primary system-sm-medium">{t('createTool.authMethod.value', { ns: 'tools' })}</div>
<Input
value={tempCredential.api_key_value}
onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}

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

@ -65,7 +65,7 @@ const GetSchema: FC<Props> = ({
onClick={() => { setShowImportFromUrl(!showImportFromUrl) }}
>
<RiAddLine className="h-3 w-3" />
<div className="system-xs-medium text-text-secondary">{t('createTool.importFromUrl', { ns: 'tools' })}</div>
<div className="text-text-secondary system-xs-medium">{t('createTool.importFromUrl', { ns: 'tools' })}</div>
</Button>
{showImportFromUrl && (
<div className="absolute left-[-35px] top-[26px] rounded-lg border border-components-panel-border bg-components-panel-bg p-2 shadow-lg">
@ -97,7 +97,7 @@ const GetSchema: FC<Props> = ({
className="space-x-1"
onClick={() => { setShowExamples(!showExamples) }}
>
<div className="system-xs-medium text-text-secondary">{t('createTool.examples', { ns: 'tools' })}</div>
<div className="text-text-secondary system-xs-medium">{t('createTool.examples', { ns: 'tools' })}</div>
<RiArrowDownSLine className="h-3 w-3" />
</Button>
{showExamples && (
@ -109,7 +109,7 @@ const GetSchema: FC<Props> = ({
onChange(item.content)
setShowExamples(false)
}}
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"
className="cursor-pointer whitespace-nowrap rounded-lg px-3 py-1.5 leading-5 text-text-secondary system-sm-regular hover:bg-components-panel-on-panel-item-bg-hover"
>
{t(`createTool.exampleOptions.${item.key}`, { ns: 'tools' })}
</div>

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

@ -207,7 +207,7 @@ const EditCustomCollectionModal: FC<Props> = ({
<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="system-sm-medium py-2 text-text-primary">
<div className="py-2 text-text-primary system-sm-medium">
{t('createTool.name', { ns: 'tools' })}
{' '}
<span className="ml-1 text-red-500">*</span>
@ -232,7 +232,7 @@ const EditCustomCollectionModal: FC<Props> = ({
<div className="select-none">
<div className="flex items-center justify-between">
<div className="flex items-center">
<div className="system-sm-medium py-2 text-text-primary">
<div className="py-2 text-text-primary system-sm-medium">
{t('createTool.schema', { ns: 'tools' })}
<span className="ml-1 text-red-500">*</span>
</div>
@ -260,9 +260,9 @@ const EditCustomCollectionModal: FC<Props> = ({
{/* Available Tools */}
<div>
<div className="system-sm-medium py-2 text-text-primary">{t('createTool.availableTools.title', { ns: 'tools' })}</div>
<div className="py-2 text-text-primary system-sm-medium">{t('createTool.availableTools.title', { ns: 'tools' })}</div>
<div className="w-full overflow-x-auto rounded-lg border border-divider-regular">
<table className="system-xs-regular w-full text-text-secondary">
<table className="w-full text-text-secondary system-xs-regular">
<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('createTool.availableTools.name', { ns: 'tools' })}</th>
@ -299,22 +299,22 @@ const EditCustomCollectionModal: FC<Props> = ({
{/* Authorization method */}
<div>
<div className="system-sm-medium py-2 text-text-primary">{t('createTool.authMethod.title', { ns: 'tools' })}</div>
<div className="py-2 text-text-primary system-sm-medium">{t('createTool.authMethod.title', { ns: 'tools' })}</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(`createTool.authMethod.types.${credential.auth_type}`, { ns: 'tools' })}</div>
<div className="text-text-primary system-xs-regular">{t(`createTool.authMethod.types.${credential.auth_type}`, { ns: 'tools' })}</div>
<RiSettings2Line className="h-4 w-4 text-text-secondary" />
</div>
</div>
{/* Labels */}
<div>
<div className="system-sm-medium py-2 text-text-primary">{t('createTool.toolInput.label', { ns: 'tools' })}</div>
<div className="py-2 text-text-primary system-sm-medium">{t('createTool.toolInput.label', { ns: 'tools' })}</div>
<LabelSelector value={labels} onChange={handleLabelSelect} />
</div>
{/* Privacy Policy */}
<div>
<div className="system-sm-medium py-2 text-text-primary">{t('createTool.privacyPolicy', { ns: 'tools' })}</div>
<div className="py-2 text-text-primary system-sm-medium">{t('createTool.privacyPolicy', { ns: 'tools' })}</div>
<Input
value={customCollection.privacy_policy}
onChange={(e) => {
@ -329,7 +329,7 @@ const EditCustomCollectionModal: FC<Props> = ({
</div>
<div>
<div className="system-sm-medium py-2 text-text-primary">{t('createTool.customDisclaimer', { ns: 'tools' })}</div>
<div className="py-2 text-text-primary system-sm-medium">{t('createTool.customDisclaimer', { ns: 'tools' })}</div>
<Input
value={customCollection.custom_disclaimer}
onChange={(e) => {

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

@ -75,17 +75,17 @@ const TestApi: FC<Props> = ({
<div className="overflow-y-auto px-6 pt-2">
<div className="space-y-4">
<div>
<div className="system-sm-medium py-2 text-text-primary">{t('createTool.authMethod.title', { ns: 'tools' })}</div>
<div className="py-2 text-text-primary system-sm-medium">{t('createTool.authMethod.title', { ns: 'tools' })}</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(`createTool.authMethod.types.${tempCredential.auth_type}`, { ns: 'tools' })}</div>
<div className="text-text-primary system-xs-regular">{t(`createTool.authMethod.types.${tempCredential.auth_type}`, { ns: 'tools' })}</div>
<RiSettings2Line className="h-4 w-4 text-text-secondary" />
</div>
</div>
<div>
<div className="system-sm-medium py-2 text-text-primary">{t('test.parametersValue', { ns: 'tools' })}</div>
<div className="py-2 text-text-primary system-sm-medium">{t('test.parametersValue', { ns: 'tools' })}</div>
<div className="rounded-lg border border-divider-regular">
<table className="system-xs-regular w-full font-normal text-text-secondary">
<table className="w-full font-normal text-text-secondary system-xs-regular">
<thead className="uppercase text-text-tertiary">
<tr className="border-b border-divider-regular">
<th className="p-2 pl-3 font-medium">{t('test.parameters', { ns: 'tools' })}</th>
@ -117,10 +117,10 @@ const TestApi: FC<Props> = ({
<Button variant="primary" className="mt-4 h-10 w-full" loading={testing} disabled={testing} onClick={handleTest}>{t('test.title', { ns: 'tools' })}</Button>
<div className="mt-6">
<div className="flex items-center space-x-3">
<div className="system-xs-semibold text-text-tertiary">{t('test.testResult', { ns: 'tools' })}</div>
<div className="text-text-tertiary system-xs-semibold">{t('test.testResult', { ns: 'tools' })}</div>
<div className="bg-[rgb(243, 244, 246)] h-px w-0 grow"></div>
</div>
<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">
<div className="mt-2 h-[200px] overflow-y-auto overflow-x-hidden rounded-lg bg-components-input-bg-normal px-3 py-2 text-text-secondary system-xs-regular">
{result || <span className="text-text-quaternary">{t('test.testResultPlaceholder', { ns: 'tools' })}</span>}
</div>
</div>

20
web/app/components/tools/marketplace/index.tsx
View File

@ -45,42 +45,42 @@ const Marketplace = ({
/>
)}
<div className="pb-3 pt-4">
<div className="title-2xl-semi-bold bg-gradient-to-r from-[rgba(11,165,236,0.95)] to-[rgba(21,90,239,0.95)] bg-clip-text text-transparent">
<div className="bg-gradient-to-r from-[rgba(11,165,236,0.95)] to-[rgba(21,90,239,0.95)] bg-clip-text text-transparent title-2xl-semi-bold">
{t('marketplace.moreFrom', { ns: 'plugin' })}
</div>
<div className="body-md-regular flex items-center text-center text-text-tertiary">
<div className="flex items-center text-center text-text-tertiary body-md-regular">
{t('marketplace.discover', { ns: 'plugin' })}
<span className="body-md-medium relative ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
<span className="relative ml-1 text-text-secondary body-md-medium after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
{t('category.models', { ns: 'plugin' })}
</span>
,
<span className="body-md-medium relative ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
<span className="relative ml-1 text-text-secondary body-md-medium after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
{t('category.tools', { ns: 'plugin' })}
</span>
,
<span className="body-md-medium relative ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
<span className="relative ml-1 text-text-secondary body-md-medium after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
{t('category.datasources', { ns: 'plugin' })}
</span>
,
<span className="body-md-medium relative ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
<span className="relative ml-1 text-text-secondary body-md-medium after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
{t('category.triggers', { ns: 'plugin' })}
</span>
,
<span className="body-md-medium relative ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
<span className="relative ml-1 text-text-secondary body-md-medium after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
{t('category.agents', { ns: 'plugin' })}
</span>
,
<span className="body-md-medium relative ml-1 mr-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
<span className="relative ml-1 mr-1 text-text-secondary body-md-medium after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
{t('category.extensions', { ns: 'plugin' })}
</span>
{t('marketplace.and', { ns: 'plugin' })}
<span className="body-md-medium relative ml-1 mr-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
<span className="relative ml-1 mr-1 text-text-secondary body-md-medium after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
{t('category.bundles', { ns: 'plugin' })}
</span>
{t('operation.in', { ns: 'common' })}
<a
href={getMarketplaceUrl('', { language: locale, q: searchPluginText, tags: filterPluginTags.join(','), theme })}
className="system-sm-medium ml-1 flex items-center text-text-accent"
className="ml-1 flex items-center text-text-accent system-sm-medium"
target="_blank"
>
{t('marketplace.difyMarketplace', { ns: 'plugin' })}

4
web/app/components/tools/mcp/create-card.tsx
View File

@ -41,13 +41,13 @@ const NewMCPCard = ({ handleCreate }: Props) => {
<div className="flex h-10 w-10 items-center justify-center rounded-lg border border-dashed border-divider-deep group-hover:border-solid group-hover:border-state-accent-hover-alt group-hover:bg-state-accent-hover">
<RiAddCircleFill className="h-4 w-4 text-text-quaternary group-hover:text-text-accent" />
</div>
<div className="system-md-semibold ml-3 text-text-secondary group-hover:text-text-accent">{t('mcp.create.cardTitle', { ns: 'tools' })}</div>
<div className="ml-3 text-text-secondary system-md-semibold group-hover:text-text-accent">{t('mcp.create.cardTitle', { ns: 'tools' })}</div>
</div>
</div>
<div className="rounded-b-xl border-t-[0.5px] border-divider-subtle px-4 py-3 text-text-tertiary hover:text-text-accent">
<a href={linkUrl} target="_blank" rel="noopener noreferrer" className="flex items-center space-x-1">
<RiBookOpenLine className="h-3 w-3 shrink-0" />
<div className="system-xs-regular grow truncate" title={t('mcp.create.cardLink', { ns: 'tools' }) || ''}>{t('mcp.create.cardLink', { ns: 'tools' })}</div>
<div className="grow truncate system-xs-regular" title={t('mcp.create.cardLink', { ns: 'tools' }) || ''}>{t('mcp.create.cardLink', { ns: 'tools' })}</div>
<RiArrowRightUpLine className="h-3 w-3 shrink-0" />
</a>
</div>

24
web/app/components/tools/mcp/detail/content.tsx
View File

@ -163,15 +163,15 @@ const MCPDetailContent: FC<Props> = ({
</div>
<div className="ml-3 w-0 grow">
<div className="flex h-5 items-center">
<div className="system-md-semibold truncate text-text-primary" title={detail.name}>{detail.name}</div>
<div className="truncate text-text-primary system-md-semibold" title={detail.name}>{detail.name}</div>
</div>
<div className="mt-0.5 flex items-center gap-1">
<Tooltip popupContent={t('mcp.identifier', { ns: 'tools' })}>
<div className="system-xs-regular shrink-0 cursor-pointer text-text-secondary" onClick={() => copy(detail.server_identifier || '')}>{detail.server_identifier}</div>
<div className="shrink-0 cursor-pointer text-text-secondary system-xs-regular" onClick={() => copy(detail.server_identifier || '')}>{detail.server_identifier}</div>
</Tooltip>
<div className="system-xs-regular shrink-0 text-text-quaternary">·</div>
<div className="shrink-0 text-text-quaternary system-xs-regular">·</div>
<Tooltip popupContent={t('mcp.modal.serverUrl', { ns: 'tools' })}>
<div className="system-xs-regular truncate text-text-secondary">{detail.server_url}</div>
<div className="truncate text-text-secondary system-xs-regular">{detail.server_url}</div>
</Tooltip>
</div>
</div>
@ -224,8 +224,8 @@ const MCPDetailContent: FC<Props> = ({
<>
<div className="flex shrink-0 justify-between gap-2 px-4 pb-1 pt-2">
<div className="flex h-6 items-center">
{!isUpdating && <div className="system-sm-semibold-uppercase text-text-secondary">{t('mcp.gettingTools', { ns: 'tools' })}</div>}
{isUpdating && <div className="system-sm-semibold-uppercase text-text-secondary">{t('mcp.updateTools', { ns: 'tools' })}</div>}
{!isUpdating && <div className="text-text-secondary system-sm-semibold-uppercase">{t('mcp.gettingTools', { ns: 'tools' })}</div>}
{isUpdating && <div className="text-text-secondary system-sm-semibold-uppercase">{t('mcp.updateTools', { ns: 'tools' })}</div>}
</div>
<div></div>
</div>
@ -236,7 +236,7 @@ const MCPDetailContent: FC<Props> = ({
)}
{!isUpdating && detail.is_team_authorization && !isGettingTools && !toolList.length && (
<div className="flex h-full w-full flex-col items-center justify-center">
<div className="system-sm-regular mb-3 text-text-tertiary">{t('mcp.toolsEmpty', { ns: 'tools' })}</div>
<div className="mb-3 text-text-tertiary system-sm-regular">{t('mcp.toolsEmpty', { ns: 'tools' })}</div>
<Button
variant="primary"
onClick={handleUpdateTools}
@ -249,8 +249,8 @@ const MCPDetailContent: FC<Props> = ({
<>
<div className="flex shrink-0 justify-between gap-2 px-4 pb-1 pt-2">
<div className="flex h-6 items-center">
{toolList.length > 1 && <div className="system-sm-semibold-uppercase text-text-secondary">{t('mcp.toolsNum', { ns: 'tools', count: toolList.length })}</div>}
{toolList.length === 1 && <div className="system-sm-semibold-uppercase text-text-secondary">{t('mcp.onlyTool', { ns: 'tools' })}</div>}
{toolList.length > 1 && <div className="text-text-secondary system-sm-semibold-uppercase">{t('mcp.toolsNum', { ns: 'tools', count: toolList.length })}</div>}
{toolList.length === 1 && <div className="text-text-secondary system-sm-semibold-uppercase">{t('mcp.onlyTool', { ns: 'tools' })}</div>}
</div>
<div>
<Button size="small" onClick={showUpdateConfirm}>
@ -272,9 +272,9 @@ const MCPDetailContent: FC<Props> = ({
{!isUpdating && !detail.is_team_authorization && (
<div className="flex h-full w-full flex-col items-center justify-center">
{!isAuthorizing && <div className="system-md-medium mb-1 text-text-secondary">{t('mcp.authorizingRequired', { ns: 'tools' })}</div>}
{isAuthorizing && <div className="system-md-medium mb-1 text-text-secondary">{t('mcp.authorizing', { ns: 'tools' })}</div>}
<div className="system-sm-regular text-text-tertiary">{t('mcp.authorizeTip', { ns: 'tools' })}</div>
{!isAuthorizing && <div className="mb-1 text-text-secondary system-md-medium">{t('mcp.authorizingRequired', { ns: 'tools' })}</div>}
{isAuthorizing && <div className="mb-1 text-text-secondary system-md-medium">{t('mcp.authorizing', { ns: 'tools' })}</div>}
<div className="text-text-tertiary system-sm-regular">{t('mcp.authorizeTip', { ns: 'tools' })}</div>
</div>
)}
</div>

4
web/app/components/tools/mcp/detail/operation-dropdown.tsx
View File

@ -69,7 +69,7 @@ const OperationDropdown: FC<Props> = ({
}}
>
<RiEditLine className="h-4 w-4 text-text-tertiary" />
<div className="system-md-regular ml-2 text-text-secondary">{t('mcp.operation.edit', { ns: 'tools' })}</div>
<div className="ml-2 text-text-secondary system-md-regular">{t('mcp.operation.edit', { ns: 'tools' })}</div>
</div>
<div
className="group flex cursor-pointer items-center rounded-lg px-3 py-1.5 hover:bg-state-destructive-hover"
@ -79,7 +79,7 @@ const OperationDropdown: FC<Props> = ({
}}
>
<RiDeleteBinLine className="h-4 w-4 text-text-tertiary group-hover:text-text-destructive-secondary" />
<div className="system-md-regular ml-2 text-text-secondary group-hover:text-text-destructive">{t('mcp.operation.remove', { ns: 'tools' })}</div>
<div className="ml-2 text-text-secondary system-md-regular group-hover:text-text-destructive">{t('mcp.operation.remove', { ns: 'tools' })}</div>
</div>
</div>
</PortalToFollowElemContent>

16
web/app/components/tools/mcp/detail/tool-item.tsx
View File

@ -26,7 +26,7 @@ const MCPToolItem = ({
return (
<div className="mt-2">
<div className="title-xs-semi-bold mb-1 text-text-primary">
<div className="mb-1 text-text-primary title-xs-semi-bold">
{t('mcp.toolItem.parameters', { ns: 'tools' })}
:
</div>
@ -35,13 +35,13 @@ const MCPToolItem = ({
const descriptionContent = parameter.human_description[language] || t('mcp.toolItem.noDescription', { ns: 'tools' })
return (
<li key={parameter.name} className="pl-2">
<span className="system-xs-regular font-bold text-text-secondary">{parameter.name}</span>
<span className="system-xs-regular mr-1 text-text-tertiary">
<span className="font-bold text-text-secondary system-xs-regular">{parameter.name}</span>
<span className="mr-1 text-text-tertiary system-xs-regular">
(
{parameter.type}
):
</span>
<span className="system-xs-regular text-text-tertiary">{descriptionContent}</span>
<span className="text-text-tertiary system-xs-regular">{descriptionContent}</span>
</li>
)
})}
@ -57,8 +57,8 @@ const MCPToolItem = ({
popupClassName="!p-0 !px-4 !py-3.5 !w-[360px] !border-[0.5px] !border-components-panel-border !rounded-xl !shadow-lg"
popupContent={(
<div>
<div className="title-xs-semi-bold mb-1 text-text-primary">{tool.label[language]}</div>
<div className="body-xs-regular text-text-secondary">{tool.description[language]}</div>
<div className="mb-1 text-text-primary title-xs-semi-bold">{tool.label[language]}</div>
<div className="text-text-secondary body-xs-regular">{tool.description[language]}</div>
{renderParameters()}
</div>
)}
@ -66,8 +66,8 @@ const MCPToolItem = ({
<div
className={cn('bg-components-panel-item-bg cursor-pointer rounded-xl border-[0.5px] border-components-panel-border-subtle px-4 py-3 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover')}
>
<div className="system-md-semibold pb-0.5 text-text-secondary">{tool.label[language]}</div>
<div className="system-xs-regular line-clamp-2 text-text-tertiary" title={tool.description[language]}>{tool.description[language]}</div>
<div className="pb-0.5 text-text-secondary system-md-semibold">{tool.label[language]}</div>
<div className="line-clamp-2 text-text-tertiary system-xs-regular" title={tool.description[language]}>{tool.description[language]}</div>
</div>
</Tooltip>
)

6
web/app/components/tools/mcp/headers-input.tsx
View File

@ -51,7 +51,7 @@ const HeadersInput = ({
if (headersItems.length === 0) {
return (
<div className="space-y-2">
<div className="body-xs-regular text-text-tertiary">
<div className="text-text-tertiary body-xs-regular">
{t('mcp.modal.noHeaders', { ns: 'tools' })}
</div>
{!readonly && (
@ -72,12 +72,12 @@ const HeadersInput = ({
return (
<div className="space-y-2">
{isMasked && (
<div className="body-xs-regular text-text-tertiary">
<div className="text-text-tertiary body-xs-regular">
{t('mcp.modal.maskedHeadersTip', { ns: 'tools' })}
</div>
)}
<div className="overflow-hidden rounded-lg border border-divider-regular">
<div className="system-xs-medium-uppercase bg-background-secondary flex h-7 items-center leading-7 text-text-tertiary">
<div className="bg-background-secondary flex h-7 items-center leading-7 text-text-tertiary system-xs-medium-uppercase">
<div className="h-full w-1/2 border-r border-divider-regular pl-3">{t('mcp.modal.headerKey', { ns: 'tools' })}</div>
<div className="h-full w-1/2 pl-3 pr-1">{t('mcp.modal.headerValue', { ns: 'tools' })}</div>
</div>

10
web/app/components/tools/mcp/mcp-server-modal.tsx
View File

@ -116,14 +116,14 @@ const MCPServerModal = ({
<div className="absolute right-5 top-5 z-10 cursor-pointer p-1.5" onClick={onHide}>
<RiCloseLine className="h-5 w-5 text-text-tertiary" />
</div>
<div className="title-2xl-semi-bold relative p-6 pb-3 text-xl text-text-primary">
<div className="relative p-6 pb-3 text-xl text-text-primary title-2xl-semi-bold">
{!data ? t('mcp.server.modal.addTitle', { ns: 'tools' }) : t('mcp.server.modal.editTitle', { ns: 'tools' })}
</div>
<div className="space-y-5 px-6 py-3">
<div className="space-y-0.5">
<div className="flex h-6 items-center gap-1">
<div className="system-sm-medium text-text-secondary">{t('mcp.server.modal.description', { ns: 'tools' })}</div>
<div className="system-xs-regular text-text-destructive-secondary">*</div>
<div className="text-text-secondary system-sm-medium">{t('mcp.server.modal.description', { ns: 'tools' })}</div>
<div className="text-text-destructive-secondary system-xs-regular">*</div>
</div>
<Textarea
className="h-[96px] resize-none"
@ -136,10 +136,10 @@ const MCPServerModal = ({
{latestParams.length > 0 && (
<div>
<div className="mb-1 flex items-center gap-2">
<div className="system-xs-medium-uppercase shrink-0 text-text-primary">{t('mcp.server.modal.parameters', { ns: 'tools' })}</div>
<div className="shrink-0 text-text-primary system-xs-medium-uppercase">{t('mcp.server.modal.parameters', { ns: 'tools' })}</div>
<Divider type="horizontal" className="!m-0 !h-px grow bg-divider-subtle" />
</div>
<div className="body-xs-regular mb-2 text-text-tertiary">{t('mcp.server.modal.parametersTip', { ns: 'tools' })}</div>
<div className="mb-2 text-text-tertiary body-xs-regular">{t('mcp.server.modal.parametersTip', { ns: 'tools' })}</div>
<div className="space-y-3">
{latestParams.map(paramItem => (
<MCPServerParamItem

8
web/app/components/tools/mcp/mcp-server-param-item.tsx
View File

@ -19,10 +19,10 @@ const MCPServerParamItem = ({
return (
<div className="space-y-0.5">
<div className="flex h-6 items-center gap-2">
<div className="system-xs-medium text-text-secondary">{data.label}</div>
<div className="system-xs-medium text-text-quaternary">·</div>
<div className="system-xs-medium text-text-secondary">{data.variable}</div>
<div className="system-xs-medium text-text-tertiary">{data.type}</div>
<div className="text-text-secondary system-xs-medium">{data.label}</div>
<div className="text-text-quaternary system-xs-medium">·</div>
<div className="text-text-secondary system-xs-medium">{data.variable}</div>
<div className="text-text-tertiary system-xs-medium">{data.type}</div>
</div>
<Textarea
className="h-8 resize-none"

6
web/app/components/tools/mcp/mcp-service-card.tsx
View File

@ -60,7 +60,7 @@ const ServerURLSection: FC<ServerURLSectionProps> = ({
const { t } = useTranslation()
return (
<div className="flex flex-col items-start justify-center self-stretch">
<div className="system-xs-medium pb-1 text-text-tertiary">
<div className="pb-1 text-text-tertiary system-xs-medium">
{t('mcp.server.url', { ns: 'tools' })}
</div>
<div className="inline-flex h-9 w-full items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 pl-2">
@ -280,7 +280,7 @@ const MCPServiceCard: FC<IAppCardProps> = ({
<Mcp className="h-4 w-4 text-text-primary-on-surface" />
</div>
<div className="group w-full">
<div className="system-md-semibold min-w-0 overflow-hidden text-ellipsis break-normal text-text-secondary group-hover:text-text-primary">
<div className="min-w-0 overflow-hidden text-ellipsis break-normal text-text-secondary system-md-semibold group-hover:text-text-primary">
{t('mcp.server.title', { ns: 'tools' })}
</div>
</div>
@ -317,7 +317,7 @@ const MCPServiceCard: FC<IAppCardProps> = ({
>
<div className="flex items-center justify-center gap-[1px]">
<RiEditLine className="h-3.5 w-3.5" />
<div className="system-xs-medium px-[3px] text-text-tertiary">
<div className="px-[3px] text-text-tertiary system-xs-medium">
{serverPublished ? t('mcp.server.edit', { ns: 'tools' }) : t('mcp.server.addDescription', { ns: 'tools' })}
</div>
</div>

14
web/app/components/tools/mcp/modal.tsx
View File

@ -134,7 +134,7 @@ const MCPModalContent: FC<MCPModalContentProps> = ({
<div className="absolute right-5 top-5 z-10 cursor-pointer p-1.5" onClick={onHide}>
<RiCloseLine className="h-5 w-5 text-text-tertiary" />
</div>
<div className="title-2xl-semi-bold relative pb-3 text-xl text-text-primary">
<div className="relative pb-3 text-xl text-text-primary title-2xl-semi-bold">
{!isCreate ? t('mcp.modal.editTitle', { ns: 'tools' }) : t('mcp.modal.title', { ns: 'tools' })}
</div>
@ -142,7 +142,7 @@ const MCPModalContent: FC<MCPModalContentProps> = ({
{/* Server URL */}
<div>
<div className="mb-1 flex h-6 items-center">
<span className="system-sm-medium text-text-secondary">{t('mcp.modal.serverUrl', { ns: 'tools' })}</span>
<span className="text-text-secondary system-sm-medium">{t('mcp.modal.serverUrl', { ns: 'tools' })}</span>
</div>
<Input
value={state.url}
@ -152,7 +152,7 @@ const MCPModalContent: FC<MCPModalContentProps> = ({
/>
{originalServerUrl && originalServerUrl !== state.url && (
<div className="mt-1 flex h-5 items-center">
<span className="body-xs-regular text-text-warning">{t('mcp.modal.serverUrlWarning', { ns: 'tools' })}</span>
<span className="text-text-warning body-xs-regular">{t('mcp.modal.serverUrlWarning', { ns: 'tools' })}</span>
</div>
)}
</div>
@ -161,7 +161,7 @@ const MCPModalContent: FC<MCPModalContentProps> = ({
<div className="flex space-x-3">
<div className="grow pb-1">
<div className="mb-1 flex h-6 items-center">
<span className="system-sm-medium text-text-secondary">{t('mcp.modal.name', { ns: 'tools' })}</span>
<span className="text-text-secondary system-sm-medium">{t('mcp.modal.name', { ns: 'tools' })}</span>
</div>
<Input
value={state.name}
@ -195,9 +195,9 @@ const MCPModalContent: FC<MCPModalContentProps> = ({
{/* Server Identifier */}
<div>
<div className="flex h-6 items-center">
<span className="system-sm-medium text-text-secondary">{t('mcp.modal.serverIdentifier', { ns: 'tools' })}</span>
<span className="text-text-secondary system-sm-medium">{t('mcp.modal.serverIdentifier', { ns: 'tools' })}</span>
</div>
<div className="body-xs-regular mb-1 text-text-tertiary">{t('mcp.modal.serverIdentifierTip', { ns: 'tools' })}</div>
<div className="mb-1 text-text-tertiary body-xs-regular">{t('mcp.modal.serverIdentifierTip', { ns: 'tools' })}</div>
<Input
value={state.serverIdentifier}
onChange={e => actions.setServerIdentifier(e.target.value)}
@ -205,7 +205,7 @@ const MCPModalContent: FC<MCPModalContentProps> = ({
/>
{originalServerID && originalServerID !== state.serverIdentifier && (
<div className="mt-1 flex h-5 items-center">
<span className="body-xs-regular text-text-warning">{t('mcp.modal.serverIdentifierWarning', { ns: 'tools' })}</span>
<span className="text-text-warning body-xs-regular">{t('mcp.modal.serverIdentifierWarning', { ns: 'tools' })}</span>
</div>
)}
</div>

14
web/app/components/tools/mcp/provider-card.tsx
View File

@ -87,8 +87,8 @@ const MCPCard = ({
<Icon src={data.icon} />
</div>
<div className="grow">
<div className="system-md-semibold mb-1 truncate text-text-secondary" title={data.name}>{data.name}</div>
<div className="system-xs-regular text-text-tertiary">{data.server_identifier}</div>
<div className="mb-1 truncate text-text-secondary system-md-semibold" title={data.name}>{data.name}</div>
<div className="text-text-tertiary system-xs-regular">{data.server_identifier}</div>
</div>
</div>
<div className="flex items-center gap-1 rounded-b-xl pb-2.5 pl-4 pr-2.5 pt-1.5">
@ -96,18 +96,18 @@ const MCPCard = ({
<div className="flex items-center gap-1">
<RiHammerFill className="h-3 w-3 shrink-0 text-text-quaternary" />
{data.tools.length > 0 && (
<div className="system-xs-regular shrink-0 text-text-tertiary">{t('mcp.toolsCount', { ns: 'tools', count: data.tools.length })}</div>
<div className="shrink-0 text-text-tertiary system-xs-regular">{t('mcp.toolsCount', { ns: 'tools', count: data.tools.length })}</div>
)}
{!data.tools.length && (
<div className="system-xs-regular shrink-0 text-text-tertiary">{t('mcp.noTools', { ns: 'tools' })}</div>
<div className="shrink-0 text-text-tertiary system-xs-regular">{t('mcp.noTools', { ns: 'tools' })}</div>
)}
</div>
<div className={cn('system-xs-regular text-divider-deep', (!data.is_team_authorization || !data.tools.length) && 'sm:hidden')}>/</div>
<div className={cn('system-xs-regular truncate text-text-tertiary', (!data.is_team_authorization || !data.tools.length) && 'sm:hidden')} title={`${t('mcp.updateTime', { ns: 'tools' })} ${formatTimeFromNow(data.updated_at! * 1000)}`}>{`${t('mcp.updateTime', { ns: 'tools' })} ${formatTimeFromNow(data.updated_at! * 1000)}`}</div>
<div className={cn('text-divider-deep system-xs-regular', (!data.is_team_authorization || !data.tools.length) && 'sm:hidden')}>/</div>
<div className={cn('truncate text-text-tertiary system-xs-regular', (!data.is_team_authorization || !data.tools.length) && 'sm:hidden')} title={`${t('mcp.updateTime', { ns: 'tools' })} ${formatTimeFromNow(data.updated_at! * 1000)}`}>{`${t('mcp.updateTime', { ns: 'tools' })} ${formatTimeFromNow(data.updated_at! * 1000)}`}</div>
</div>
{data.is_team_authorization && data.tools.length > 0 && <Indicator color="green" className="shrink-0" />}
{(!data.is_team_authorization || !data.tools.length) && (
<div className="system-xs-medium flex shrink-0 items-center gap-1 rounded-md border border-util-colors-red-red-500 bg-components-badge-bg-red-soft px-1.5 py-0.5 text-util-colors-red-red-500">
<div className="flex shrink-0 items-center gap-1 rounded-md border border-util-colors-red-red-500 bg-components-badge-bg-red-soft px-1.5 py-0.5 text-util-colors-red-red-500 system-xs-medium">
{t('mcp.noConfigured', { ns: 'tools' })}
<Indicator color="red" />
</div>

10
web/app/components/tools/mcp/sections/authentication-section.tsx
View File

@ -35,14 +35,14 @@ const AuthenticationSection: FC<AuthenticationSectionProps> = ({
defaultValue={isDynamicRegistration}
onChange={onDynamicRegistrationChange}
/>
<span className="system-sm-medium text-text-secondary">{t('mcp.modal.useDynamicClientRegistration', { ns: 'tools' })}</span>
<span className="text-text-secondary system-sm-medium">{t('mcp.modal.useDynamicClientRegistration', { ns: 'tools' })}</span>
</div>
{!isDynamicRegistration && (
<div className="mt-2 flex gap-2 rounded-lg bg-state-warning-hover p-3">
<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-text-warning" />
<div className="system-xs-regular text-text-secondary">
<div className="text-text-secondary system-xs-regular">
<div className="mb-1">{t('mcp.modal.redirectUrlWarning', { ns: 'tools' })}</div>
<code className="system-xs-medium block break-all rounded bg-state-warning-active px-2 py-1 text-text-secondary">
<code className="block break-all rounded bg-state-warning-active px-2 py-1 text-text-secondary system-xs-medium">
{`${API_PREFIX}/mcp/oauth/callback`}
</code>
</div>
@ -51,7 +51,7 @@ const AuthenticationSection: FC<AuthenticationSectionProps> = ({
</div>
<div>
<div className={cn('mb-1 flex h-6 items-center', isDynamicRegistration && 'opacity-50')}>
<span className="system-sm-medium text-text-secondary">{t('mcp.modal.clientID', { ns: 'tools' })}</span>
<span className="text-text-secondary system-sm-medium">{t('mcp.modal.clientID', { ns: 'tools' })}</span>
</div>
<Input
value={clientID}
@ -62,7 +62,7 @@ const AuthenticationSection: FC<AuthenticationSectionProps> = ({
</div>
<div>
<div className={cn('mb-1 flex h-6 items-center', isDynamicRegistration && 'opacity-50')}>
<span className="system-sm-medium text-text-secondary">{t('mcp.modal.clientSecret', { ns: 'tools' })}</span>
<span className="text-text-secondary system-sm-medium">{t('mcp.modal.clientSecret', { ns: 'tools' })}</span>
</div>
<Input
value={credentials}

4
web/app/components/tools/mcp/sections/configurations-section.tsx
View File

@ -22,7 +22,7 @@ const ConfigurationsSection: FC<ConfigurationsSectionProps> = ({
<>
<div>
<div className="mb-1 flex h-6 items-center">
<span className="system-sm-medium text-text-secondary">{t('mcp.modal.timeout', { ns: 'tools' })}</span>
<span className="text-text-secondary system-sm-medium">{t('mcp.modal.timeout', { ns: 'tools' })}</span>
</div>
<Input
type="number"
@ -33,7 +33,7 @@ const ConfigurationsSection: FC<ConfigurationsSectionProps> = ({
</div>
<div>
<div className="mb-1 flex h-6 items-center">
<span className="system-sm-medium text-text-secondary">{t('mcp.modal.sseReadTimeout', { ns: 'tools' })}</span>
<span className="text-text-secondary system-sm-medium">{t('mcp.modal.sseReadTimeout', { ns: 'tools' })}</span>
</div>
<Input
type="number"

4
web/app/components/tools/mcp/sections/headers-section.tsx
View File

@ -20,9 +20,9 @@ const HeadersSection: FC<HeadersSectionProps> = ({
return (
<div>
<div className="mb-1 flex h-6 items-center">
<span className="system-sm-medium text-text-secondary">{t('mcp.modal.headers', { ns: 'tools' })}</span>
<span className="text-text-secondary system-sm-medium">{t('mcp.modal.headers', { ns: 'tools' })}</span>
</div>
<div className="body-xs-regular mb-2 text-text-tertiary">{t('mcp.modal.headersTip', { ns: 'tools' })}</div>
<div className="mb-2 text-text-tertiary body-xs-regular">{t('mcp.modal.headersTip', { ns: 'tools' })}</div>
<HeadersInput
headersItems={headers}
onChange={onHeadersChange}

2
web/app/components/tools/provider/custom-create-card.tsx
View File

@ -38,7 +38,7 @@ const Contribute = ({ onRefreshData }: Props) => {
<div className="flex h-10 w-10 items-center justify-center rounded-lg border border-dashed border-divider-deep group-hover:border-solid group-hover:border-state-accent-hover-alt group-hover:bg-state-accent-hover">
<RiAddCircleFill className="h-4 w-4 text-text-quaternary group-hover:text-text-accent" />
</div>
<div className="system-md-semibold ml-3 text-text-secondary group-hover:text-text-accent">{t('createCustomTool', { ns: 'tools' })}</div>
<div className="ml-3 text-text-secondary system-md-semibold group-hover:text-text-accent">{t('createCustomTool', { ns: 'tools' })}</div>
</div>
</div>
</div>

20
web/app/components/tools/provider/detail.tsx
View File

@ -275,7 +275,7 @@ const ProviderDetail = ({
onClick={() => setIsShowEditCustomCollectionModal(true)}
>
<Settings01 className="mr-1 h-4 w-4 text-text-tertiary" />
<div className="system-sm-medium text-text-secondary">{t('createTool.editAction', { ns: 'tools' })}</div>
<div className="text-text-secondary system-sm-medium">{t('createTool.editAction', { ns: 'tools' })}</div>
</Button>
)}
{collection.type === CollectionType.workflow && !isDetailLoading && customCollection && (
@ -294,7 +294,7 @@ const ProviderDetail = ({
onClick={() => setIsShowEditWorkflowToolModal(true)}
disabled={!isCurrentWorkspaceManager}
>
<div className="system-sm-medium text-text-secondary">{t('createTool.editAction', { ns: 'tools' })}</div>
<div className="text-text-secondary system-sm-medium">{t('createTool.editAction', { ns: 'tools' })}</div>
</Button>
</>
)}
@ -305,7 +305,7 @@ const ProviderDetail = ({
<>
<div className="shrink-0">
{(collection.type === CollectionType.builtIn || collection.type === CollectionType.model) && isAuthed && (
<div className="system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between text-text-secondary">
<div className="mb-1 flex h-6 items-center justify-between text-text-secondary system-sm-semibold-uppercase">
{t('detailPanel.actionNum', { ns: 'plugin', num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' })}
{needAuth && (
<Button
@ -325,7 +325,7 @@ const ProviderDetail = ({
)}
{(collection.type === CollectionType.builtIn || collection.type === CollectionType.model) && needAuth && !isAuthed && (
<>
<div className="system-sm-semibold-uppercase text-text-secondary">
<div className="text-text-secondary system-sm-semibold-uppercase">
<span className="">{t('includeToolNum', { ns: 'tools', num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span>
<span className="px-1">·</span>
<span className="text-util-colors-orange-orange-600">{t('auth.setup', { ns: 'tools' }).toLocaleUpperCase()}</span>
@ -344,12 +344,12 @@ const ProviderDetail = ({
</>
)}
{(collection.type === CollectionType.custom) && (
<div className="system-sm-semibold-uppercase text-text-secondary">
<div className="text-text-secondary system-sm-semibold-uppercase">
<span className="">{t('includeToolNum', { ns: 'tools', num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span>
</div>
)}
{(collection.type === CollectionType.workflow) && (
<div className="system-sm-semibold-uppercase text-text-secondary">
<div className="text-text-secondary system-sm-semibold-uppercase">
<span className="">{t('createTool.toolInput.title', { ns: 'tools' }).toLocaleUpperCase()}</span>
</div>
)}
@ -368,11 +368,11 @@ const ProviderDetail = ({
{collection.type === CollectionType.workflow && (customCollection as WorkflowToolProviderResponse)?.tool?.parameters.map(item => (
<div key={item.name} className="mb-1 py-1">
<div className="mb-1 flex items-center gap-2">
<span className="code-sm-semibold text-text-secondary">{item.name}</span>
<span className="system-xs-regular text-text-tertiary">{item.type}</span>
<span className="system-xs-medium text-text-warning-secondary">{item.required ? t('createTool.toolInput.required', { ns: 'tools' }) : ''}</span>
<span className="text-text-secondary code-sm-semibold">{item.name}</span>
<span className="text-text-tertiary system-xs-regular">{item.type}</span>
<span className="text-text-warning-secondary system-xs-medium">{item.required ? t('createTool.toolInput.required', { ns: 'tools' }) : ''}</span>
</div>
<div className="system-xs-regular text-text-tertiary">{item.llm_description}</div>
<div className="text-text-tertiary system-xs-regular">{item.llm_description}</div>
</div>
))}
</div>

4
web/app/components/tools/provider/tool-item.tsx
View File

@ -32,8 +32,8 @@ const ToolItem = ({
className={cn('bg-components-panel-item-bg cursor-pointer rounded-xl border-[0.5px] border-components-panel-border-subtle px-4 py-3 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover', disabled && '!cursor-not-allowed opacity-50')}
onClick={() => !disabled && setShowDetail(true)}
>
<div className="system-md-semibold pb-0.5 text-text-secondary">{tool.label[language]}</div>
<div className="system-xs-regular line-clamp-2 text-text-tertiary" title={tool.description[language]}>{tool.description[language]}</div>
<div className="pb-0.5 text-text-secondary system-md-semibold">{tool.label[language]}</div>
<div className="line-clamp-2 text-text-tertiary system-xs-regular" title={tool.description[language]}>{tool.description[language]}</div>
</div>
{showDetail && (
<SettingBuiltInTool

6
web/app/components/tools/workflow-tool/configure-button.tsx
View File

@ -215,12 +215,12 @@ const WorkflowToolConfigureButton = ({
<RiHammerLine className={cn('relative h-4 w-4 text-text-secondary', !disabled && !published && 'group-hover:text-text-accent')} />
<div
title={t('common.workflowAsTool', { ns: 'workflow' }) || ''}
className={cn('system-sm-medium shrink grow basis-0 truncate text-text-secondary', !disabled && !published && 'group-hover:text-text-accent')}
className={cn('shrink grow basis-0 truncate text-text-secondary system-sm-medium', !disabled && !published && 'group-hover:text-text-accent')}
>
{t('common.workflowAsTool', { ns: 'workflow' })}
</div>
{!published && (
<span className="system-2xs-medium-uppercase shrink-0 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 py-0.5 text-text-tertiary">
<span className="shrink-0 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 py-0.5 text-text-tertiary system-2xs-medium-uppercase">
{t('common.configureRequired', { ns: 'workflow' })}
</span>
)}
@ -233,7 +233,7 @@ const WorkflowToolConfigureButton = ({
<RiHammerLine className="h-4 w-4 text-text-tertiary" />
<div
title={t('common.workflowAsTool', { ns: 'workflow' }) || ''}
className="system-sm-medium shrink grow basis-0 truncate text-text-tertiary"
className="shrink grow basis-0 truncate text-text-tertiary system-sm-medium"
>
{t('common.workflowAsTool', { ns: 'workflow' })}
</div>

14
web/app/components/tools/workflow-tool/index.tsx
View File

@ -178,7 +178,7 @@ const WorkflowToolAsModal: FC<Props> = ({
<div className="h-0 grow space-y-4 overflow-y-auto px-6 py-3">
{/* name & icon */}
<div>
<div className="system-sm-medium py-2 text-text-primary">
<div className="py-2 text-text-primary system-sm-medium">
{t('createTool.name', { ns: 'tools' })}
{' '}
<span className="ml-1 text-red-500">*</span>
@ -195,7 +195,7 @@ const WorkflowToolAsModal: FC<Props> = ({
</div>
{/* name for tool call */}
<div>
<div className="system-sm-medium flex items-center py-2 text-text-primary">
<div className="flex items-center py-2 text-text-primary system-sm-medium">
{t('createTool.nameForToolCall', { ns: 'tools' })}
{' '}
<span className="ml-1 text-red-500">*</span>
@ -219,7 +219,7 @@ const WorkflowToolAsModal: FC<Props> = ({
</div>
{/* description */}
<div>
<div className="system-sm-medium py-2 text-text-primary">{t('createTool.description', { ns: 'tools' })}</div>
<div className="py-2 text-text-primary system-sm-medium">{t('createTool.description', { ns: 'tools' })}</div>
<Textarea
placeholder={t('createTool.descriptionPlaceholder', { ns: 'tools' }) || ''}
value={description}
@ -228,7 +228,7 @@ const WorkflowToolAsModal: FC<Props> = ({
</div>
{/* Tool Input */}
<div>
<div className="system-sm-medium py-2 text-text-primary">{t('createTool.toolInput.title', { ns: 'tools' })}</div>
<div className="py-2 text-text-primary system-sm-medium">{t('createTool.toolInput.title', { ns: 'tools' })}</div>
<div className="w-full overflow-x-auto rounded-lg border border-divider-regular">
<table className="w-full text-xs font-normal leading-[18px] text-text-secondary">
<thead className="uppercase text-text-tertiary">
@ -282,7 +282,7 @@ const WorkflowToolAsModal: FC<Props> = ({
</div>
{/* Tool Output */}
<div>
<div className="system-sm-medium py-2 text-text-primary">{t('createTool.toolOutput.title', { ns: 'tools' })}</div>
<div className="py-2 text-text-primary system-sm-medium">{t('createTool.toolOutput.title', { ns: 'tools' })}</div>
<div className="w-full overflow-x-auto rounded-lg border border-divider-regular">
<table className="w-full text-xs font-normal leading-[18px] text-text-secondary">
<thead className="uppercase text-text-tertiary">
@ -329,12 +329,12 @@ const WorkflowToolAsModal: FC<Props> = ({
</div>
{/* Tags */}
<div>
<div className="system-sm-medium py-2 text-text-primary">{t('createTool.toolInput.label', { ns: 'tools' })}</div>
<div className="py-2 text-text-primary system-sm-medium">{t('createTool.toolInput.label', { ns: 'tools' })}</div>
<LabelSelector value={labels} onChange={handleLabelSelect} />
</div>
{/* Privacy Policy */}
<div>
<div className="system-sm-medium py-2 text-text-primary">{t('createTool.privacyPolicy', { ns: 'tools' })}</div>
<div className="py-2 text-text-primary system-sm-medium">{t('createTool.privacyPolicy', { ns: 'tools' })}</div>
<Input
className="h-10"
value={privacyPolicy}