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

fix(web): fix merge

Browse Source
This commit is contained in:
JzoNg 2026-04-16 12:06:53 +08:00
parent 0d47750b15
commit 7aa700bf2b
25 changed files with 107 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/app/components/app-sidebar/snippet-info/dropdown.tsx
View File

@ -2,6 +2,7 @@
import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
import type { SnippetDetail } from '@/models/snippet'
import { cn } from '@langgenius/dify-ui/cn'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import {
@ -24,7 +25,7 @@ import { toast } from '@/app/components/base/ui/toast'
import CreateSnippetDialog from '@/app/components/workflow/create-snippet-dialog'
import { useRouter } from '@/next/navigation'
import { useDeleteSnippetMutation, useExportSnippetMutation, useUpdateSnippetMutation } from '@/service/use-snippets'
import { cn } from '@/utils/classnames'
import { downloadBlob } from '@/utils/download'
type SnippetInfoDropdownProps = {
@ -170,10 +171,10 @@ const SnippetInfoDropdown = ({ snippet }: SnippetInfoDropdownProps) => {
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
<AlertDialogContent className="w-[400px]">
<div className="space-y-2 p-6">
<AlertDialogTitle className="text-text-primary title-lg-semi-bold">
<AlertDialogTitle className="title-lg-semi-bold text-text-primary">
{t('deleteConfirmTitle')}
</AlertDialogTitle>
<AlertDialogDescription className="text-text-tertiary system-sm-regular">
<AlertDialogDescription className="system-sm-regular text-text-tertiary">
{t('deleteConfirmContent')}
</AlertDialogDescription>
</div>

10
web/app/components/app-sidebar/snippet-info/index.tsx
View File

@ -1,10 +1,10 @@
'use client'
import type { SnippetDetail } from '@/models/snippet'
import { cn } from '@langgenius/dify-ui/cn'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import AppIcon from '@/app/components/base/app-icon'
import { cn } from '@/utils/classnames'
import SnippetInfoDropdown from './dropdown'
type SnippetInfoProps = {
@ -19,7 +19,7 @@ const SnippetInfo = ({
const { t } = useTranslation('snippet')
return (
<div className={cn('flex flex-col', expand ? 'px-2 pb-1 pt-2' : 'p-1')}>
<div className={cn('flex flex-col', expand ? 'px-2 pt-2 pb-1' : 'p-1')}>
<div className={cn('flex flex-col', expand ? 'gap-2 rounded-xl p-2' : '')}>
<div className={cn('flex', expand ? 'items-center justify-between' : 'items-start gap-3')}>
<div className={cn('shrink-0', !expand && 'ml-1')}>
@ -34,16 +34,16 @@ const SnippetInfo = ({
</div>
{expand && (
<div className="min-w-0">
<div className="truncate text-text-secondary system-md-semibold">
<div className="system-md-semibold truncate text-text-secondary">
{snippet.name}
</div>
<div className="pt-1 text-text-tertiary system-2xs-medium-uppercase">
<div className="system-2xs-medium-uppercase pt-1 text-text-tertiary">
{t('typeLabel')}
</div>
</div>
)}
{expand && snippet.description && (
<p className="line-clamp-3 break-words text-text-tertiary system-xs-regular">
<p className="system-xs-regular line-clamp-3 break-words text-text-tertiary">
{snippet.description}
</p>
)}

10
web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx
View File

@ -2,6 +2,7 @@
import type { EvaluationWorkflowAssociatedTarget, EvaluationWorkflowAssociatedTargetType } from '@/types/evaluation'
import type { I18nKeysWithPrefix } from '@/types/i18n'
import { cn } from '@langgenius/dify-ui/cn'
import { useTranslation } from 'react-i18next'
import {
AlertDialog,
@ -13,7 +14,6 @@ import {
AlertDialogTitle,
} from '@/app/components/base/ui/alert-dialog'
import Link from '@/next/link'
import { cn } from '@/utils/classnames'
type EvaluationWorkflowSwitchConfirmDialogProps = {
open: boolean
@ -80,7 +80,7 @@ const DependentTargetItem = ({
<span className={cn(meta.icon, 'size-5')} />
</span>
<span className="flex min-w-0 flex-1 flex-col gap-1 py-px">
<span className="truncate system-md-semibold text-text-secondary">
<span className="system-md-semibold truncate text-text-secondary">
{targetName}
</span>
<span className="system-2xs-medium-uppercase text-text-tertiary">
@ -108,10 +108,10 @@ const EvaluationWorkflowSwitchConfirmDialog = ({
<AlertDialog open={open} onOpenChange={onOpenChange}>
<AlertDialogContent className="w-[480px]">
<div className="flex flex-col gap-2 px-6 pt-6 pb-4">
<AlertDialogTitle className="w-full title-2xl-semi-bold text-text-primary">
<AlertDialogTitle className="title-2xl-semi-bold w-full text-text-primary">
{t('common.switchToStandardWorkflowConfirm.title', { ns: 'workflow' })}
</AlertDialogTitle>
<AlertDialogDescription className="w-full system-md-regular text-text-secondary">
<AlertDialogDescription className="system-md-regular w-full text-text-secondary">
<span className="block">
{t('common.switchToStandardWorkflowConfirm.activeIn', { ns: 'workflow', count: targets.length })}
</span>
@ -123,7 +123,7 @@ const EvaluationWorkflowSwitchConfirmDialog = ({
<div className="flex flex-col gap-2 px-6 py-3">
<div className="flex items-center gap-2">
<span className="shrink-0 system-xs-medium-uppercase text-text-quaternary">
<span className="system-xs-medium-uppercase shrink-0 text-text-quaternary">
{t('common.switchToStandardWorkflowConfirm.dependentWorkflows', { ns: 'workflow' })}
</span>
<span className="h-px min-w-0 flex-1 bg-divider-subtle" />

10
web/app/components/app/workflow-log/evaluation-cell.tsx
View File

@ -1,6 +1,7 @@
'use client'
import type { EvaluationLogItem } from '@/models/log'
import { cn } from '@langgenius/dify-ui/cn'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
@ -9,7 +10,6 @@ import {
PopoverTrigger,
} from '@/app/components/base/ui/popover'
import { getNodeVisual, getToneClasses } from '@/app/components/evaluation/components/metric-selector/utils'
import { cn } from '@/utils/classnames'
type EvaluationCellProps = {
evaluation: EvaluationLogItem[]
@ -30,7 +30,7 @@ const EvaluationCell = ({
if (!evaluation.length) {
return (
<div className="flex items-center justify-center px-2 py-3 system-sm-regular text-text-quaternary">
<div className="system-sm-regular flex items-center justify-center px-2 py-3 text-text-quaternary">
-
</div>
)
@ -73,19 +73,19 @@ const EvaluationCell = ({
)}
>
<div className="min-w-0">
<div className="truncate system-sm-medium text-text-secondary">{item.name}</div>
<div className="system-sm-medium truncate text-text-secondary">{item.name}</div>
{item.nodeInfo && nodeVisual && nodeToneClasses && (
<div className="mt-1 flex min-w-0 items-center gap-1.5">
<div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
<span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
</div>
<span className="truncate system-xs-regular text-text-tertiary">
<span className="system-xs-regular truncate text-text-tertiary">
{item.nodeInfo.title}
</span>
</div>
)}
</div>
<div className="max-w-[120px] text-right system-sm-regular wrap-break-word text-text-secondary">
<div className="system-sm-regular max-w-[120px] text-right wrap-break-word text-text-secondary">
{formatEvaluationValue(item.value)}
</div>
</div>

2
web/app/components/apps/app-type-filter.tsx
View File

@ -1,6 +1,7 @@
'use client'
import type { AppListCategory } from './app-type-filter-shared'
import { cn } from '@langgenius/dify-ui/cn'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import {
@ -12,7 +13,6 @@ import {
DropdownMenuTrigger,
} from '@/app/components/base/ui/dropdown-menu'
import { AppModeEnum } from '@/types/app'
import { cn } from '@/utils/classnames'
import { isAppListCategory } from './app-type-filter-shared'
const chipClassName = 'flex h-8 items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 text-[13px] leading-[18px] text-text-secondary hover:bg-components-input-bg-hover'

2
web/app/components/apps/creators-filter.tsx
View File

@ -1,5 +1,6 @@
'use client'
import { cn } from '@langgenius/dify-ui/cn'
import { useCallback, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Checkbox from '@/app/components/base/checkbox'
@ -12,7 +13,6 @@ import {
} from '@/app/components/base/ui/dropdown-menu'
import { useAppContext } from '@/context/app-context'
import { useMembers } from '@/service/use-common'
import { cn } from '@/utils/classnames'
type CreatorsFilterProps = {
value: string[]

4
web/app/components/apps/studio-route-switch.tsx
View File

@ -1,8 +1,8 @@
'use client'
import type { StudioPageType } from '.'
import { cn } from '@langgenius/dify-ui/cn'
import Link from '@/next/link'
import { cn } from '@/utils/classnames'
type Props = {
pageType: StudioPageType
@ -18,7 +18,7 @@ const StudioRouteSwitch = ({
showSnippets = true,
}: Props) => {
return (
<div className="flex items-center rounded-lg border-[0.5px] border-divider-subtle bg-[rgba(200,206,218,0.2)] p-[1px]">
<div className="flex items-center rounded-lg border-[0.5px] border-divider-subtle bg-[rgba(200,206,218,0.2)] p-px">
<Link
href="/apps"
className={cn(

18
web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
View File

@ -1,5 +1,6 @@
import type { EvaluationResourceProps } from '../../types'
import type { EvaluationLog, EvaluationLogFile } from '@/types/evaluation'
import { cn } from '@langgenius/dify-ui/cn'
import { keepPreviousData, useMutation, useQuery } from '@tanstack/react-query'
import { useEffect, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -11,7 +12,6 @@ import {
DropdownMenuTrigger,
} from '@/app/components/base/ui/dropdown-menu'
import { consoleClient, consoleQuery } from '@/service/client'
import { cn } from '@/utils/classnames'
import { downloadUrl } from '@/utils/download'
import { useEvaluationResource, useEvaluationStore } from '../../store'
@ -92,15 +92,15 @@ const HistoryTab = ({
</colgroup>
<thead>
<tr className="border-b border-divider-regular">
<th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">
<th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">
<span className="inline-flex items-center gap-0.5">
{t('history.columns.time')}
<span aria-hidden="true" className="i-ri-arrow-down-line h-3.5 w-3.5" />
</span>
</th>
<th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('history.columns.creator')}</th>
<th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('history.columns.version')}</th>
<th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('history.columns.status')}</th>
<th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('history.columns.creator')}</th>
<th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('history.columns.version')}</th>
<th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('history.columns.status')}</th>
<th className="h-7 text-center text-text-tertiary">
<span aria-hidden="true" className="i-ri-download-2-line inline-block h-3.5 w-3.5" />
</th>
@ -128,9 +128,9 @@ const HistoryTab = ({
setSelectedRunId(resourceType, resourceId, runId)
}}
>
<td className="h-10 truncate px-3 system-sm-regular text-text-secondary">{formatCreatedAt(record.created_at)}</td>
<td className="h-10 truncate px-3 system-sm-regular text-text-secondary">{record.created_by}</td>
<td className="h-10 truncate px-3 system-sm-regular text-text-secondary">{record.version || '-'}</td>
<td className="system-sm-regular h-10 truncate px-3 text-text-secondary">{formatCreatedAt(record.created_at)}</td>
<td className="system-sm-regular h-10 truncate px-3 text-text-secondary">{record.created_by}</td>
<td className="system-sm-regular h-10 truncate px-3 text-text-secondary">{record.version || '-'}</td>
<td className="h-10 px-3 text-center">
{record.result_file
? <span aria-label={t('history.status.completed')} className="i-ri-checkbox-circle-fill inline-block h-4 w-4 text-util-colors-green-green-600" />
@ -181,7 +181,7 @@ const HistoryTab = ({
</tbody>
</table>
{!isInitialLoading && records.length === 0 && (
<div className="rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center system-sm-regular text-text-tertiary">
<div className="system-sm-regular rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center text-text-tertiary">
{t('history.empty')}
</div>
)}

4
web/app/components/evaluation/components/batch-test-panel/index.tsx
View File

@ -1,11 +1,11 @@
'use client'
import type { BatchTestTab, EvaluationResourceProps } from '../../types'
import { cn } from '@langgenius/dify-ui/cn'
import { useTranslation } from 'react-i18next'
import { Button } from '@/app/components/base/ui/button'
import { toast } from '@/app/components/base/ui/toast'
import { useSaveEvaluationConfigMutation } from '@/service/use-evaluation'
import { cn } from '@/utils/classnames'
import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../../store'
import { buildEvaluationConfigPayload } from '../../store-utils'
import { TAB_CLASS_NAME } from '../../utils'
@ -65,7 +65,7 @@ const BatchTestPanel = ({
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<div className="system-xl-semibold text-text-primary">{t('batch.title')}</div>
<div className="mt-1 system-sm-regular text-text-tertiary">{t('batch.description')}</div>
<div className="system-sm-regular mt-1 text-text-tertiary">{t('batch.description')}</div>
</div>
<Button
className="shrink-0"

12
web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
View File

@ -1,5 +1,6 @@
import type { ChangeEvent, DragEvent } from 'react'
import type { InputField } from './input-fields-utils'
import { cn } from '@langgenius/dify-ui/cn'
import { useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/app/components/base/ui/button'
@ -8,7 +9,6 @@ import {
PopoverContent,
PopoverTrigger,
} from '@/app/components/base/ui/popover'
import { cn } from '@/utils/classnames'
import { getExampleValue } from './input-fields-utils'
type UploadRunPopoverProps = {
@ -92,10 +92,10 @@ const UploadRunPopover = ({
<span aria-hidden="true" className="i-ri-file-excel-fill h-6 w-6 text-util-colors-green-green-600" />
</div>
<div className="min-w-0 flex-1 py-1 pr-2">
<div className="truncate system-xs-medium text-text-secondary">
<div className="system-xs-medium truncate text-text-secondary">
{currentFileName}
</div>
<div className="mt-0.5 flex h-3 items-center gap-1 system-2xs-medium text-text-tertiary">
<div className="system-2xs-medium mt-0.5 flex h-3 items-center gap-1 text-text-tertiary">
{!!currentFileExtension && <span className="uppercase">{currentFileExtension}</span>}
{!!currentFileExtension && !!currentFileSize && <span className="text-text-quaternary">·</span>}
{!!currentFileSize && <span>{currentFileSize}</span>}
@ -138,7 +138,7 @@ const UploadRunPopover = ({
{' '}
{t('batch.uploadDropzoneSuffix')}
</div>
<div className="mt-0.5 system-xs-regular text-text-tertiary">
<div className="system-xs-regular mt-0.5 text-text-tertiary">
{t('batch.uploadDropzoneDownloadPrefix')}
{' '}
<button
@ -159,10 +159,10 @@ const UploadRunPopover = ({
<div className="flex overflow-hidden rounded-lg border border-divider-regular">
{previewFields.map((field, index) => (
<div key={field.name} className={cn('min-w-0 flex-1', index < previewFields.length - 1 && 'border-r border-divider-subtle')}>
<div className="min-h-8 border-b border-divider-regular px-3 py-2 system-xs-medium-uppercase text-text-tertiary">
<div className="system-xs-medium-uppercase min-h-8 border-b border-divider-regular px-3 py-2 text-text-tertiary">
{field.name}
</div>
<div className="min-h-8 px-3 py-2 system-sm-regular text-text-secondary">
<div className="system-sm-regular min-h-8 px-3 py-2 text-text-secondary">
{getExampleValue(field, booleanExampleValue)}
</div>
</div>

8
web/app/components/evaluation/components/conditions-section/add-condition-select.tsx
View File

@ -1,6 +1,7 @@
'use client'
import type { ConditionMetricOptionGroup, EvaluationResourceProps } from '../../types'
import { cn } from '@langgenius/dify-ui/cn'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
@ -11,7 +12,6 @@ import {
SelectItem,
SelectTrigger,
} from '@/app/components/base/ui/select'
import { cn } from '@/utils/classnames'
import { useEvaluationStore } from '../../store'
import { getConditionMetricValueTypeTranslationKey } from '../../utils'
@ -46,7 +46,7 @@ const AddConditionSelect = ({
<SelectContent placement="bottom-start" popupClassName="w-[320px]">
{metricOptionGroups.map(group => (
<SelectGroup key={group.label}>
<SelectGroupLabel className="px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary">{group.label}</SelectGroupLabel>
<SelectGroupLabel className="system-xs-medium-uppercase px-3 pt-2 pb-1 text-text-tertiary">{group.label}</SelectGroupLabel>
{group.options.map(option => (
<SelectItem
key={option.id}
@ -58,8 +58,8 @@ const AddConditionSelect = ({
}}
>
<div className="flex min-w-0 flex-1 items-center gap-3">
<span className="truncate system-sm-medium text-text-secondary">{option.itemLabel}</span>
<span className="ml-auto shrink-0 system-xs-medium text-text-tertiary">
<span className="system-sm-medium truncate text-text-secondary">{option.itemLabel}</span>
<span className="system-xs-medium ml-auto shrink-0 text-text-tertiary">
{t(getConditionMetricValueTypeTranslationKey(option.valueType))}
</span>
</div>

18
web/app/components/evaluation/components/conditions-section/condition-group.tsx
View File

@ -6,10 +6,11 @@ import type {
EvaluationResourceProps,
JudgmentConditionItem,
} from '../../types'
import { cn } from '@langgenius/dify-ui/cn'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/app/components/base/ui/button'
import Input from '@/app/components/base/input'
import { Button } from '@/app/components/base/ui/button'
import {
Select,
SelectContent,
@ -19,7 +20,6 @@ import {
SelectTrigger,
SelectValue,
} from '@/app/components/base/ui/select'
import { cn } from '@/utils/classnames'
import { getAllowedOperators, requiresConditionValue, useEvaluationResource, useEvaluationStore } from '../../store'
import {
buildConditionMetricOptions,
@ -71,15 +71,15 @@ const ConditionMetricLabel = ({
placeholder,
}: ConditionMetricLabelProps) => {
if (!metric)
return <span className="px-1 system-sm-regular text-components-input-text-placeholder">{placeholder}</span>
return <span className="system-sm-regular px-1 text-components-input-text-placeholder">{placeholder}</span>
return (
<div className="flex min-w-0 items-center gap-2 px-1">
<div className="inline-flex h-6 min-w-0 items-center gap-1 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pr-1.5 pl-[5px] shadow-xs">
<span className={cn(getMetricValueTypeIconClassName(metric.valueType), 'h-3 w-3 shrink-0 text-text-secondary')} />
<span className="truncate system-xs-medium text-text-secondary">{metric.itemLabel}</span>
<span className="system-xs-medium truncate text-text-secondary">{metric.itemLabel}</span>
</div>
<span className="shrink-0 system-xs-regular text-text-tertiary">{metric.groupLabel}</span>
<span className="system-xs-regular shrink-0 text-text-tertiary">{metric.groupLabel}</span>
</div>
)
}
@ -110,13 +110,13 @@ const ConditionMetricSelect = ({
<SelectContent popupClassName="w-[360px]">
{groupedMetricOptions.map(group => (
<SelectGroup key={group.label}>
<SelectGroupLabel className="px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary">{group.label}</SelectGroupLabel>
<SelectGroupLabel className="system-xs-medium-uppercase px-3 pt-2 pb-1 text-text-tertiary">{group.label}</SelectGroupLabel>
{group.options.map(option => (
<SelectItem key={option.id} value={serializeVariableSelector(option.variableSelector)}>
<div className="flex min-w-0 flex-1 items-center gap-2">
<span className={cn(getMetricValueTypeIconClassName(option.valueType), 'h-3.5 w-3.5 shrink-0 text-text-tertiary')} />
<span className="truncate">{option.itemLabel}</span>
<span className="ml-auto shrink-0 system-xs-medium text-text-quaternary">
<span className="system-xs-medium ml-auto shrink-0 text-text-quaternary">
{t(getConditionMetricValueTypeTranslationKey(option.valueType))}
</span>
</div>
@ -139,7 +139,7 @@ const ConditionOperatorSelect = ({
return (
<Select value={operator} onValueChange={value => value && onChange(value as ComparisonOperator)}>
<SelectTrigger className="h-8 w-auto min-w-[88px] gap-1 rounded-md bg-transparent px-1.5 py-0 hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
<span className="truncate system-xs-medium text-text-secondary">{getComparisonOperatorLabel(operator, t)}</span>
<span className="system-xs-medium truncate text-text-secondary">{getComparisonOperatorLabel(operator, t)}</span>
</SelectTrigger>
<SelectContent className="z-[1002]" popupClassName="w-[240px] bg-components-panel-bg-blur backdrop-blur-[10px]">
{operators.map(nextOperator => (
@ -232,7 +232,7 @@ const ConditionGroup = ({
key={operator}
type="button"
className={cn(
'rounded-md px-3 py-1.5 system-xs-medium-uppercase',
'system-xs-medium-uppercase rounded-md px-3 py-1.5',
resource.judgmentConfig.logicalOperator === operator
? 'bg-components-card-bg text-text-primary shadow-xs'
: 'text-text-tertiary',

11
web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx
View File

@ -1,6 +1,7 @@
'use client'
import type { AvailableEvaluationWorkflow } from '@/types/evaluation'
import { cn } from '@langgenius/dify-ui/cn'
import { useInfiniteScroll } from 'ahooks'
import * as React from 'react'
import { useDeferredValue, useMemo, useRef, useState } from 'react'
@ -20,7 +21,6 @@ import {
ScrollAreaViewport,
} from '@/app/components/base/ui/scroll-area'
import { useAvailableEvaluationWorkflows } from '@/service/use-evaluation'
import { cn } from '@/utils/classnames'
type WorkflowSelectorProps = {
value: string | null
@ -119,9 +119,10 @@ const WorkflowSelector = ({
</div>
<div className="min-w-0 flex-1 px-1 py-1 text-left">
<div className={cn(
'truncate system-sm-regular',
'system-sm-regular truncate',
currentWorkflowName ? 'text-text-secondary' : 'text-components-input-text-placeholder',
)}>
)}
>
{currentWorkflowName ?? t('metrics.custom.workflowPlaceholder')}
</div>
</div>
@ -157,7 +158,7 @@ const WorkflowSelector = ({
)
: !workflows.length
? (
<div className="flex h-[120px] items-center justify-center text-text-tertiary system-sm-regular">
<div className="system-sm-regular flex h-[120px] items-center justify-center text-text-tertiary">
{t('noData', { ns: 'common' })}
</div>
)
@ -183,7 +184,7 @@ const WorkflowSelector = ({
<span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5 text-text-tertiary" />
</div>
</div>
<div className="min-w-0 flex-1 truncate px-1 py-1 text-text-secondary system-sm-medium">
<div className="system-sm-medium min-w-0 flex-1 truncate px-1 py-1 text-text-secondary">
{getWorkflowName(workflow)}
</div>
{workflow.id === value && (

16
web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
View File

@ -2,6 +2,7 @@
import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
import type { NodeInfo } from '@/types/evaluation'
import { cn } from '@langgenius/dify-ui/cn'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/app/components/base/ui/button'
@ -11,7 +12,6 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/app/components/base/ui/dropdown-menu'
import { cn } from '@/utils/classnames'
import { useEvaluationStore } from '../../store'
import { dedupeNodeInfoList, getMetricVisual, getNodeVisual, getToneClasses } from '../metric-selector/utils'
@ -41,7 +41,7 @@ const BuiltinMetricCard = ({
return (
<div className="group overflow-hidden rounded-xl border border-components-panel-border hover:bg-background-section">
<div className="flex items-center justify-between gap-3 px-3 pb-1 pt-3">
<div className="flex items-center justify-between gap-3 px-3 pt-3 pb-1">
<button
type="button"
className="flex min-w-0 flex-1 items-center gap-2 px-1 text-left"
@ -53,7 +53,7 @@ const BuiltinMetricCard = ({
<span aria-hidden="true" className={cn(metricVisual.icon, 'h-3.5 w-3.5')} />
</div>
<div className="flex min-w-0 items-center gap-0.5">
<div className="truncate text-text-secondary system-md-medium">{metric.label}</div>
<div className="system-md-medium truncate text-text-secondary">{metric.label}</div>
<span
aria-hidden="true"
className={cn('i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-quaternary transition-transform', !isExpanded && '-rotate-90')}
@ -65,7 +65,7 @@ const BuiltinMetricCard = ({
size="small"
variant="ghost"
aria-label={t('metrics.remove')}
className="h-6 w-6 shrink-0 rounded-md p-0 text-text-quaternary opacity-0 transition-opacity hover:text-text-secondary focus-visible:opacity-100 group-hover:opacity-100"
className="h-6 w-6 shrink-0 rounded-md p-0 text-text-quaternary opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-secondary focus-visible:opacity-100"
onClick={() => removeMetric(resourceType, resourceId, metric.id)}
>
<span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
@ -73,7 +73,7 @@ const BuiltinMetricCard = ({
</div>
{isExpanded && (
<div className="flex flex-wrap gap-1 px-3 pb-3 pt-1">
<div className="flex flex-wrap gap-1 px-3 pt-1 pb-3">
{selectedNodeInfoList.length
? selectedNodeInfoList.map((nodeInfo) => {
const nodeVisual = getNodeVisual(nodeInfo)
@ -87,7 +87,7 @@ const BuiltinMetricCard = ({
<div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
<span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
</div>
<span className="px-1 text-text-primary system-xs-regular">{nodeInfo.title}</span>
<span className="system-xs-regular px-1 text-text-primary">{nodeInfo.title}</span>
<button
type="button"
className="flex h-4 w-4 items-center justify-center rounded-sm text-text-quaternary transition-colors hover:text-text-secondary"
@ -105,7 +105,7 @@ const BuiltinMetricCard = ({
)
})
: (
<span className="px-1 text-text-tertiary system-xs-regular">{t('metrics.nodesAll')}</span>
<span className="system-xs-regular px-1 text-text-tertiary">{t('metrics.nodesAll')}</span>
)}
{shouldShowAddNode && (
@ -144,7 +144,7 @@ const BuiltinMetricCard = ({
<div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
<span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
</div>
<span className="truncate text-text-secondary system-sm-medium">{nodeInfo.title}</span>
<span className="system-sm-medium truncate text-text-secondary">{nodeInfo.title}</span>
</div>
</DropdownMenuItem>
)

4
web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
View File

@ -1,10 +1,10 @@
'use client'
import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
import { cn } from '@langgenius/dify-ui/cn'
import { useTranslation } from 'react-i18next'
import Badge from '@/app/components/base/badge'
import { Button } from '@/app/components/base/ui/button'
import { cn } from '@/utils/classnames'
import { isCustomMetricConfigured, useEvaluationStore } from '../../store'
import CustomMetricEditorCard from '../custom-metric-editor'
import { getToneClasses } from '../metric-selector/utils'
@ -30,7 +30,7 @@ const CustomMetricCard = ({
<div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px]', metricToneClasses.soft)}>
<span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5" />
</div>
<div className="truncate system-md-medium text-text-secondary">{metric.label}</div>
<div className="system-md-medium truncate text-text-secondary">{metric.label}</div>
</div>
<div className="flex shrink-0 items-center gap-1">

4
web/app/components/evaluation/components/metric-selector/index.tsx
View File

@ -2,6 +2,7 @@
import type { ChangeEvent } from 'react'
import type { MetricSelectorProps } from './types'
import { cn } from '@langgenius/dify-ui/cn'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '@/app/components/base/input'
@ -11,7 +12,6 @@ import {
PopoverContent,
PopoverTrigger,
} from '@/app/components/base/ui/popover'
import { cn } from '@/utils/classnames'
import { useEvaluationResource, useEvaluationStore } from '../../store'
import SelectorEmptyState from './selector-empty-state'
import SelectorFooter from './selector-footer'
@ -68,7 +68,7 @@ const MetricSelector = ({
render={(
triggerStyle === 'text'
? (
<button type="button" className={cn('inline-flex items-center system-sm-medium text-text-accent', triggerClassName)}>
<button type="button" className={cn('system-sm-medium inline-flex items-center text-text-accent', triggerClassName)}>
<span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
{t('metrics.add')}
</button>

14
web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx
View File

@ -1,7 +1,7 @@
import type { TFunction } from 'i18next'
import type { EvaluationMetric } from '../../types'
import type { MetricSelectorSection } from './types'
import { cn } from '@/utils/classnames'
import { cn } from '@langgenius/dify-ui/cn'
import { getMetricVisual, getNodeVisual, getToneClasses } from './utils'
type SelectorMetricSectionProps = {
@ -46,7 +46,7 @@ const SelectorMetricSection = ({
</div>
)}
<div className="flex items-center justify-between px-4 pb-1 pt-3">
<div className="flex items-center justify-between px-4 pt-3 pb-1">
<button
type="button"
className="flex min-w-0 items-center gap-2"
@ -56,7 +56,7 @@ const SelectorMetricSection = ({
<span aria-hidden="true" className={cn(metricVisual.icon, 'h-3.5 w-3.5')} />
</div>
<div className="flex items-center gap-1">
<span className="truncate text-text-secondary system-xs-medium-uppercase">{metric.label}</span>
<span className="system-xs-medium-uppercase truncate text-text-secondary">{metric.label}</span>
<span
aria-hidden="true"
className={cn('i-ri-arrow-down-s-line h-4 w-4 text-text-quaternary transition-transform', !isExpanded && '-rotate-90')}
@ -72,7 +72,7 @@ const SelectorMetricSection = ({
{isExpanded && (
<div className="px-1 py-1">
{hasNoNodeInfo && (
<div className="px-3 pb-2 pt-0.5 text-text-tertiary system-sm-regular">
<div className="system-sm-regular px-3 pt-0.5 pb-2 text-text-tertiary">
{t('metrics.noNodesInWorkflow')}
</div>
)}
@ -100,12 +100,12 @@ const SelectorMetricSection = ({
<div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
<span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
</div>
<span className="truncate text-[13px] font-medium leading-4 text-text-secondary">
<span className="truncate text-[13px] leading-4 font-medium text-text-secondary">
{nodeInfo.title}
</span>
</div>
{isAdded && (
<span className="shrink-0 px-1 text-text-quaternary system-xs-regular">{t('metrics.added')}</span>
<span className="system-xs-regular shrink-0 px-1 text-text-quaternary">{t('metrics.added')}</span>
)}
</button>
)
@ -120,7 +120,7 @@ const SelectorMetricSection = ({
<div className="flex items-center px-1 text-text-tertiary">
<span aria-hidden="true" className={cn(isShowingAllNodes ? 'i-ri-subtract-line' : 'i-ri-more-line', 'h-4 w-4')} />
</div>
<span className="truncate text-text-tertiary system-xs-regular">
<span className="system-xs-regular truncate text-text-tertiary">
{isShowingAllNodes ? t('metrics.showLess') : t('metrics.showMore')}
</span>
</div>

4
web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
View File

@ -1,11 +1,11 @@
'use client'
import type { MetricOption } from '../../types'
import { cn } from '@langgenius/dify-ui/cn'
import { useTranslation } from 'react-i18next'
import Checkbox from '@/app/components/base/checkbox'
import Input from '@/app/components/base/input'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
import { cn } from '@/utils/classnames'
import { getTranslatedMetricDescription } from '../../default-metric-descriptions'
import { DEFAULT_PIPELINE_METRIC_THRESHOLD } from '../../store-utils'
@ -37,7 +37,7 @@ const PipelineMetricItem = ({
onClick={onToggle}
>
<Checkbox checked={selected} />
<span className="truncate system-sm-medium text-text-secondary">{metric.label}</span>
<span className="system-sm-medium truncate text-text-secondary">{metric.label}</span>
<Tooltip>
<TooltipTrigger
render={(

18
web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
View File

@ -1,7 +1,7 @@
import type { MetricColumn } from './pipeline-results-utils'
import type { EvaluationRunItem } from '@/types/evaluation'
import { cn } from '@langgenius/dify-ui/cn'
import { useTranslation } from 'react-i18next'
import { cn } from '@/utils/classnames'
import {
formatValue,
getIsItemPassed,
@ -38,14 +38,14 @@ const PipelineResultsTable = ({
<thead>
<tr className="bg-background-section">
<th className="h-7 rounded-l-lg" />
<th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.query')}</th>
<th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.expected')}</th>
<th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.actual')}</th>
<th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.query')}</th>
<th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.expected')}</th>
<th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.actual')}</th>
{metricColumns.map((column, index) => (
<th
key={column.id}
className={cn(
'h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary',
'system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary',
index === metricColumns.length - 1 && 'rounded-r-lg',
)}
>
@ -79,14 +79,14 @@ const PipelineResultsTable = ({
)}
/>
</td>
<td className="h-10 px-3 py-3 align-top system-sm-regular text-text-secondary">
<td className="system-sm-regular h-10 px-3 py-3 align-top text-text-secondary">
<div className="line-clamp-2 break-words">{getQueryContent(item)}</div>
</td>
<td className="h-10 px-3 py-3 align-top system-sm-regular text-text-secondary">
<td className="system-sm-regular h-10 px-3 py-3 align-top text-text-secondary">
<div className="line-clamp-2 break-words">{formatValue(item.expected_output)}</div>
</td>
<td className={cn(
'h-10 px-3 py-3 align-top system-sm-regular',
'system-sm-regular h-10 px-3 py-3 align-top',
actualOutput ? 'text-text-secondary' : 'text-text-destructive',
)}
>
@ -100,7 +100,7 @@ const PipelineResultsTable = ({
return (
<td
key={column.id}
className={cn('h-10 px-3 py-3 align-top system-sm-regular', getMetricTextClassName(metricValue, column))}
className={cn('system-sm-regular h-10 px-3 py-3 align-top', getMetricTextClassName(metricValue, column))}
>
{formatValue(metricValue)}
</td>

8
web/app/components/evaluation/components/section-header.tsx
View File

@ -1,8 +1,8 @@
'use client'
import type { ReactNode } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
import { cn } from '@/utils/classnames'
type SectionHeaderProps = {
title: string
@ -31,8 +31,8 @@ const SectionHeader = ({
return (
<div className={cn('flex flex-wrap items-start justify-between gap-3', className)}>
<div>
<div className={cn('text-text-primary system-xl-semibold', titleClassName)}>{title}</div>
{description && <div className={cn('mt-1 text-text-tertiary system-sm-regular', descriptionClassName)}>{description}</div>}
<div className={cn('system-xl-semibold text-text-primary', titleClassName)}>{title}</div>
{description && <div className={cn('system-sm-regular mt-1 text-text-tertiary', descriptionClassName)}>{description}</div>}
</div>
{action}
</div>
@ -48,7 +48,7 @@ export const InlineSectionHeader = ({
return (
<div className={cn('flex flex-wrap items-center justify-between gap-3', className)}>
<div className="flex min-h-6 items-center gap-1">
<div className="text-text-primary system-md-semibold">{title}</div>
<div className="system-md-semibold text-text-primary">{title}</div>
{tooltip && (
<Tooltip>
<TooltipTrigger

4
web/app/components/snippets/components/input-field-editor.tsx
View File

@ -2,11 +2,11 @@
import type { FormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/types'
import type { SnippetInputField } from '@/models/snippet'
import { cn } from '@langgenius/dify-ui/cn'
import { useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { convertFormDataToINputField, convertToInputFieldFormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/utils'
import { useFloatingRight } from '@/app/components/rag-pipeline/components/panel/input-field/hooks'
import { cn } from '@/utils/classnames'
import InputFieldForm from './input-field-form'
type SnippetInputFieldEditorProps = {
@ -42,7 +42,7 @@ const SnippetInputFieldEditor = ({
width: `min(${floatingRightWidth}px, calc(100vw - 24px))`,
}}
>
<div className="flex items-center pt-3.5 pr-11 pb-1 pl-4 system-xl-semibold text-text-primary">
<div className="system-xl-semibold flex items-center pt-3.5 pr-11 pb-1 pl-4 text-text-primary">
{field ? t('inputFieldPanel.editInputField', { ns: 'datasetPipeline' }) : t('inputFieldPanel.addInputField', { ns: 'datasetPipeline' })}
</div>
<button

8
web/app/components/snippets/components/snippet-header/run-mode.tsx
View File

@ -1,5 +1,6 @@
'use client'
import { cn } from '@langgenius/dify-ui/cn'
import * as React from 'react'
import { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
@ -9,7 +10,6 @@ import { useStore } from '@/app/components/workflow/store'
import { WorkflowRunningStatus } from '@/app/components/workflow/types'
import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
import { useEventEmitterContextContext } from '@/context/event-emitter'
import { cn } from '@/utils/classnames'
type RunModeProps = {
text?: string
@ -40,7 +40,7 @@ const RunMode = ({
<button
type="button"
className={cn(
'flex h-7 items-center gap-x-1 rounded-md px-1.5 text-components-button-secondary-accent-text system-xs-medium hover:bg-state-accent-hover',
'system-xs-medium flex h-7 items-center gap-x-1 rounded-md px-1.5 text-components-button-secondary-accent-text hover:bg-state-accent-hover',
isRunning && 'cursor-not-allowed rounded-l-md bg-state-accent-hover',
)}
onClick={handleWorkflowStartRunInWorkflow}
@ -49,13 +49,13 @@ const RunMode = ({
{isRunning
? (
<>
<span aria-hidden className="i-ri-loader-2-line mr-1 size-4 animate-spin" />
<span aria-hidden className="mr-1 i-ri-loader-2-line size-4 animate-spin" />
{t('common.running', { ns: 'workflow' })}
</>
)
: (
<>
<span aria-hidden className="i-ri-play-large-line mr-1 size-4" />
<span aria-hidden className="mr-1 i-ri-play-large-line size-4" />
{text ?? t('common.run', { ns: 'workflow' })}
<ShortcutsName keys={['alt', 'R']} textColor="secondary" />
</>

9
web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
View File

@ -1,5 +1,5 @@
'use client'
import { cn } from '@langgenius/dify-ui/cn'
import { useDebounceFn, useKeyPress } from 'ahooks'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -16,7 +16,6 @@ import {
useConfirmSnippetImportMutation,
useImportSnippetDSLMutation,
} from '@/service/use-snippets'
import { cn } from '@/utils/classnames'
import ShortcutsName from '../../workflow/shortcuts-name'
type SnippetImportDSLDialogProps = {
@ -170,7 +169,7 @@ const SnippetImportDSLDialog = ({
<DialogCloseButton className="top-6 right-5 h-8 w-8" />
</div>
<div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 system-md-semibold text-text-tertiary">
<div className="system-md-semibold flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary">
{[
{ key: SnippetImportDSLTab.FromFile, label: t('importFromDSLFile', { ns: 'app' }) },
{ key: SnippetImportDSLTab.FromURL, label: t('importFromDSLUrl', { ns: 'app' }) },
@ -202,7 +201,7 @@ const SnippetImportDSLDialog = ({
)}
{currentTab === SnippetImportDSLTab.FromURL && (
<div>
<div className="mb-1 system-md-semibold text-text-secondary">DSL URL</div>
<div className="system-md-semibold mb-1 text-text-secondary">DSL URL</div>
<Input
placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
value={dslUrlValue}
@ -235,7 +234,7 @@ const SnippetImportDSLDialog = ({
<DialogTitle className="title-2xl-semi-bold text-text-primary">
{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}
</DialogTitle>
<div className="flex grow flex-col system-md-regular text-text-secondary">
<div className="system-md-regular flex grow flex-col text-text-secondary">
<div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
<div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
<br />

2
web/app/components/workflow/block-selector/snippets/index.tsx
View File

@ -1,3 +1,4 @@
import { cn } from '@langgenius/dify-ui/cn'
import { useInfiniteScroll } from 'ahooks'
import {
memo,
@ -20,7 +21,6 @@ import {
TooltipTrigger,
} from '@/app/components/base/ui/tooltip'
import { useInfiniteSnippetList } from '@/service/use-snippets'
import { cn } from '@/utils/classnames'
import CreateSnippetDialog from '../../create-snippet-dialog'
import SnippetDetailCard from './snippet-detail-card'
import SnippetEmptyState from './snippet-empty-state'

6
web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx
View File

@ -3,8 +3,8 @@ import type {
Ref,
} from 'react'
import type { PublishedSnippetListItem } from './snippet-detail-card'
import { cn } from '@langgenius/dify-ui/cn'
import AppIcon from '@/app/components/base/app-icon'
import { cn } from '@/utils/classnames'
type SnippetListItemProps = {
isHovered: boolean
@ -36,11 +36,11 @@ const SnippetListItem = ({
background={snippet.icon_info.icon_background}
imageUrl={snippet.icon_info.icon_url}
/>
<div className="min-w-0 text-text-secondary system-sm-medium">
<div className="system-sm-medium min-w-0 text-text-secondary">
{snippet.name}
</div>
{isHovered && snippet.author && (
<div className="ml-auto text-text-tertiary system-xs-regular">
<div className="system-xs-regular ml-auto text-text-tertiary">
{snippet.author}
</div>
)}