estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 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

16
web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
View File

@@ -44,7 +44,7 @@ export const usePromptOptions = (
render: ({ isSelected, onSelect, onSetHighlight }) => {
return <PromptMenuItem
title={t('common.promptEditor.context.item.title')}
icon={<File05 className='w-4 h-4 text-[#6938EF]' />}
icon={<File05 className='h-4 w-4 text-[#6938EF]' />}
disabled={!contextBlock.selectable}
isSelected={isSelected}
onClick={onSelect}
@@ -68,7 +68,7 @@ export const usePromptOptions = (
return (
<PromptMenuItem
title={t('common.promptEditor.query.item.title')}
icon={<UserEdit02 className='w-4 h-4 text-[#FD853A]' />}
icon={<UserEdit02 className='h-4 w-4 text-[#FD853A]' />}
disabled={!queryBlock.selectable}
isSelected={isSelected}
onClick={onSelect}
@@ -94,7 +94,7 @@ export const usePromptOptions = (
return (
<PromptMenuItem
title={t('common.promptEditor.history.item.title')}
icon={<MessageClockCircle className='w-4 h-4 text-[#DD2590]' />}
icon={<MessageClockCircle className='h-4 w-4 text-[#DD2590]' />}
disabled={!historyBlock.selectable
}
isSelected={isSelected}
@@ -133,7 +133,7 @@ export const useVariableOptions = (
return (
<VariableMenuItem
title={item.value}
icon={<BracketsX className='w-[14px] h-[14px] text-text-accent' />}
icon={<BracketsX className='h-[14px] w-[14px] text-text-accent' />}
queryString={queryString}
isSelected={isSelected}
onClick={onSelect}
@@ -162,7 +162,7 @@ export const useVariableOptions = (
return (
<VariableMenuItem
title={t('common.promptEditor.variable.modal.add')}
icon={<BracketsX className='w-[14px] h-[14px] text-text-accent' />}
icon={<BracketsX className='h-[14px] w-[14px] text-text-accent' />}
queryString={queryString}
isSelected={isSelected}
onClick={onSelect}
@@ -206,7 +206,7 @@ export const useExternalToolOptions = (
title={item.name}
icon={
<AppIcon
className='!w-[14px] !h-[14px]'
className='!h-[14px] !w-[14px]'
icon={item.icon}
background={item.icon_background}
/>
@@ -240,8 +240,8 @@ export const useExternalToolOptions = (
return (
<VariableMenuItem
title={t('common.promptEditor.variable.modal.addTool')}
icon={<Tool03 className='w-[14px] h-[14px] text-text-accent' />}
extraElement={< ArrowUpRight className='w-3 h-3 text-text-tertiary' />}
icon={<Tool03 className='h-[14px] w-[14px] text-text-accent' />}
extraElement={< ArrowUpRight className='h-3 w-3 text-text-tertiary' />}
queryString={queryString}
isSelected={isSelected}
onClick={onSelect}

8
web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
View File

@@ -133,9 +133,9 @@ const ComponentPicker = ({
// The `LexicalMenu` will try to calculate the position of the floating menu based on the first child.
// Since we use floating ui, we need to wrap it with a div to prevent the position calculation being affected.
// See https://github.com/facebook/lexical/blob/ac97dfa9e14a73ea2d6934ff566282d7f758e8bb/packages/lexical-react/src/shared/LexicalMenu.ts#L493
<div className='w-0 h-0'>
<div className='h-0 w-0'>
<div
className='p-1 w-[260px] bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg'
className='w-[260px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'
style={{
...floatingStyles,
visibility: isPositioned ? 'visible' : 'hidden',
@@ -148,7 +148,7 @@ const ComponentPicker = ({
{
// Divider
index !== 0 && options.at(index - 1)?.group !== option.group && (
<div className='h-px bg-divider-subtle my-1 w-full -translate-x-1'></div>
<div className='my-1 h-px w-full -translate-x-1 bg-divider-subtle'></div>
)
}
{option.renderMenuOption({
@@ -169,7 +169,7 @@ const ComponentPicker = ({
<>
{
(!!options.length) && (
<div className='h-px bg-divider-subtle my-1 w-full -translate-x-1'></div>
<div className='my-1 h-px w-full -translate-x-1 bg-divider-subtle'></div>
)
}
<div className='p-1'>

2
web/app/components/base/prompt-editor/plugins/component-picker-block/menu.tsx
View File

@@ -19,7 +19,7 @@ export class PickerBlockMenuOption extends MenuOption {
key: string
group?: string
onSelect?: () => void
render: (menuRenderProps: MenuOptionRenderProps) => JSX.Element
render: (menuRenderProps: MenuOptionRenderProps) => React.JSX.Element
},
) {
super(data.key)

6
web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx
View File

@@ -1,7 +1,7 @@
import { memo } from 'react'
type PromptMenuItemMenuItemProps = {
icon: JSX.Element
icon: React.JSX.Element
title: string
disabled?: boolean
isSelected: boolean
@@ -21,9 +21,9 @@ export const PromptMenuItem = memo(({
return (
<div
className={`
flex items-center px-3 h-6 cursor-pointer hover:bg-state-base-hover rounded-md
flex h-6 cursor-pointer items-center rounded-md px-3 hover:bg-state-base-hover
${isSelected && !disabled && '!bg-state-base-hover'}
${disabled ? 'cursor-not-allowed opacity-30' : 'hover:bg-state-base-hover cursor-pointer'}
${disabled ? 'cursor-not-allowed opacity-30' : 'cursor-pointer hover:bg-state-base-hover'}
`}
tabIndex={-1}
ref={setRefElement}

8
web/app/components/base/prompt-editor/plugins/component-picker-block/variable-option.tsx
View File

@@ -2,8 +2,8 @@ import { memo } from 'react'
type VariableMenuItemProps = {
title: string
icon?: JSX.Element
extraElement?: JSX.Element
icon?: React.JSX.Element
extraElement?: React.JSX.Element
isSelected: boolean
queryString: string | null
onClick: () => void
@@ -38,7 +38,7 @@ export const VariableMenuItem = memo(({
return (
<div
className={`
flex items-center px-3 h-6 rounded-md hover:bg-state-base-hover cursor-pointer
flex h-6 cursor-pointer items-center rounded-md px-3 hover:bg-state-base-hover
${isSelected && 'bg-state-base-hover'}
`}
tabIndex={-1}
@@ -48,7 +48,7 @@ export const VariableMenuItem = memo(({
<div className='mr-2'>
{icon}
</div>
<div className='grow text-[13px] text-text-secondary truncate' title={title}>
<div className='grow truncate text-[13px] text-text-secondary' title={title}>
{before}
<span className='text-text-accent'>{middle}</span>
{after}

24
web/app/components/base/prompt-editor/plugins/context-block/component.tsx
View File

@@ -42,11 +42,11 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
return (
<div className={`
group inline-flex items-center pl-1 pr-0.5 h-6 border border-transparent bg-[#F4F3FF] text-[#6938EF] rounded-[5px] hover:bg-[#EBE9FE]
group inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#F4F3FF] pl-1 pr-0.5 text-[#6938EF] hover:bg-[#EBE9FE]
${open ? 'bg-[#EBE9FE]' : 'bg-[#F4F3FF]'}
${isSelected && '!border-[#9B8AFB]'}
`} ref={ref}>
<File05 className='mr-1 w-[14px] h-[14px]' />
<File05 className='mr-1 h-[14px] w-[14px]' />
<div className='mr-1 text-xs font-medium'>{t('common.promptEditor.context.item.title')}</div>
{!canNotAddContext && (
<PortalToFollowElem
@@ -60,12 +60,12 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
>
<PortalToFollowElemTrigger ref={triggerRef}>
<div className={`
flex items-center justify-center w-[18px] h-[18px] text-[11px] font-semibold rounded cursor-pointer
flex h-[18px] w-[18px] cursor-pointer items-center justify-center rounded text-[11px] font-semibold
${open ? 'bg-[#6938EF] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'}
`}>{localDatasets.length}</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 100 }}>
<div className='w-[360px] bg-white rounded-xl shadow-lg'>
<div className='w-[360px] rounded-xl bg-white shadow-lg'>
<div className='p-4'>
<div className='mb-2 text-xs font-medium text-gray-500'>
{t('common.promptEditor.context.modal.title', { num: localDatasets.length })}
@@ -73,23 +73,23 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
<div className='max-h-[270px] overflow-y-auto'>
{
localDatasets.map(dataset => (
<div key={dataset.id} className='flex items-center h-8'>
<div className='flex items-center justify-center shrink-0 mr-2 w-6 h-6 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#EAECF5]'>
<Folder className='w-4 h-4 text-[#444CE7]' />
<div key={dataset.id} className='flex h-8 items-center'>
<div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#EAECF5] bg-[#F5F8FF]'>
<Folder className='h-4 w-4 text-[#444CE7]' />
</div>
<div className='text-sm text-gray-800 truncate' title=''>{dataset.name}</div>
<div className='truncate text-sm text-gray-800' title=''>{dataset.name}</div>
</div>
))
}
</div>
<div className='flex items-center h-8 text-[#155EEF] cursor-pointer' onClick={onAddContext}>
<div className='shrink-0 flex justify-center items-center mr-2 w-6 h-6 rounded-md border-[0.5px] border-gray-100'>
<RiAddLine className='w-[14px] h-[14px]' />
<div className='flex h-8 cursor-pointer items-center text-[#155EEF]' onClick={onAddContext}>
<div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-gray-100'>
<RiAddLine className='h-[14px] w-[14px]' />
</div>
<div className='text-[13px] font-medium' title=''>{t('common.promptEditor.context.modal.add')}</div>
</div>
</div>
<div className='px-4 py-3 text-xs text-gray-500 bg-gray-50 border-t-[0.5px] border-gray-50 rounded-b-xl'>
<div className='rounded-b-xl border-t-[0.5px] border-gray-50 bg-gray-50 px-4 py-3 text-xs text-gray-500'>
{t('common.promptEditor.context.modal.footer')}
</div>
</div>

4
web/app/components/base/prompt-editor/plugins/context-block/node.tsx
View File

@@ -5,7 +5,7 @@ import type { Dataset } from './index'
export type SerializedNode = SerializedLexicalNode & { datasets: Dataset[]; onAddContext: () => void; canNotAddContext: boolean }
export class ContextBlockNode extends DecoratorNode<JSX.Element> {
export class ContextBlockNode extends DecoratorNode<React.JSX.Element> {
__datasets: Dataset[]
__onAddContext: () => void
__canNotAddContext: boolean
@@ -40,7 +40,7 @@ export class ContextBlockNode extends DecoratorNode<JSX.Element> {
return false
}
decorate(): JSX.Element {
decorate(): React.JSX.Element {
return (
<ContextBlockComponent
nodeKey={this.getKey()}

12
web/app/components/base/prompt-editor/plugins/history-block/component.tsx
View File

@@ -40,11 +40,11 @@ const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
return (
<div className={`
group inline-flex items-center pl-1 pr-0.5 h-6 border border-transparent text-[#DD2590] rounded-[5px] hover:bg-[#FCE7F6]
group inline-flex h-6 items-center rounded-[5px] border border-transparent pl-1 pr-0.5 text-[#DD2590] hover:bg-[#FCE7F6]
${open ? 'bg-[#FCE7F6]' : 'bg-[#FDF2FA]'}
${isSelected && '!border-[#F670C7]'}
`} ref={ref}>
<MessageClockCircle className='mr-1 w-[14px] h-[14px]' />
<MessageClockCircle className='mr-1 h-[14px] w-[14px]' />
<div className='mr-1 text-xs font-medium'>{t('common.promptEditor.history.item.title')}</div>
<PortalToFollowElem
open={open}
@@ -57,14 +57,14 @@ const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
>
<PortalToFollowElemTrigger ref={triggerRef}>
<div className={`
flex items-center justify-center w-[18px] h-[18px] rounded cursor-pointer
flex h-[18px] w-[18px] cursor-pointer items-center justify-center rounded
${open ? 'bg-[#DD2590] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'}
`}>
<RiMoreFill className='w-3 h-3' />
<RiMoreFill className='h-3 w-3' />
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 100 }}>
<div className='w-[360px] bg-white rounded-xl shadow-lg'>
<div className='w-[360px] rounded-xl bg-white shadow-lg'>
<div className='p-4'>
<div className='mb-2 text-xs font-medium text-gray-500'>{t('common.promptEditor.history.modal.title')}</div>
<div className='flex items-center text-sm text-gray-700'>
@@ -77,7 +77,7 @@ const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
</div>
</div>
<div
className='px-4 py-3 text-xs text-[#155EEF] border-t border-black/5 rounded-b-xl cursor-pointer'
className='cursor-pointer rounded-b-xl border-t border-black/5 px-4 py-3 text-xs text-[#155EEF]'
onClick={onEditRole}
>
{t('common.promptEditor.history.modal.edit')}

4
web/app/components/base/prompt-editor/plugins/history-block/node.tsx
View File

@@ -5,7 +5,7 @@ import type { RoleName } from './index'
export type SerializedNode = SerializedLexicalNode & { roleName: RoleName; onEditRole: () => void }
export class HistoryBlockNode extends DecoratorNode<JSX.Element> {
export class HistoryBlockNode extends DecoratorNode<React.JSX.Element> {
__roleName: RoleName
__onEditRole: () => void
@@ -38,7 +38,7 @@ export class HistoryBlockNode extends DecoratorNode<JSX.Element> {
return false
}
decorate(): JSX.Element {
decorate(): React.JSX.Element {
return (
<HistoryBlockComponent
nodeKey={this.getKey()}

4
web/app/components/base/prompt-editor/plugins/placeholder.tsx
View File

@@ -16,8 +16,8 @@ const Placeholder = ({
return (
<div className={cn(
className,
'absolute top-0 left-0 h-full w-full text-sm text-components-input-text-placeholder select-none pointer-events-none',
compact ? 'leading-5 text-[13px]' : 'leading-6 text-sm',
'pointer-events-none absolute left-0 top-0 h-full w-full select-none text-sm text-components-input-text-placeholder',
compact ? 'text-[13px] leading-5' : 'text-sm leading-6',
)}>
{value || t('common.promptEditor.placeholder')}
</div>

4
web/app/components/base/prompt-editor/plugins/query-block/component.tsx
View File

@@ -17,12 +17,12 @@ const QueryBlockComponent: FC<QueryBlockComponentProps> = ({
return (
<div
className={`
inline-flex items-center pl-1 pr-0.5 h-6 bg-[#FFF6ED] border border-transparent rounded-[5px] hover:bg-[#FFEAD5]
inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#FFF6ED] pl-1 pr-0.5 hover:bg-[#FFEAD5]
${isSelected && '!border-[#FD853A]'}
`}
ref={ref}
>
<UserEdit02 className='mr-1 w-[14px] h-[14px] text-[#FD853A]' />
<UserEdit02 className='mr-1 h-[14px] w-[14px] text-[#FD853A]' />
<div className='text-xs font-medium text-[#EC4A0A] opacity-60'>{'{{'}</div>
<div className='text-xs font-medium text-[#EC4A0A]'>{t('common.promptEditor.query.item.title')}</div>
<div className='text-xs font-medium text-[#EC4A0A] opacity-60'>{'}}'}</div>

4
web/app/components/base/prompt-editor/plugins/query-block/node.tsx
View File

@@ -4,7 +4,7 @@ import QueryBlockComponent from './component'
export type SerializedNode = SerializedLexicalNode
export class QueryBlockNode extends DecoratorNode<JSX.Element> {
export class QueryBlockNode extends DecoratorNode<React.JSX.Element> {
static getType(): string {
return 'query-block'
}
@@ -27,7 +27,7 @@ export class QueryBlockNode extends DecoratorNode<JSX.Element> {
return false
}
decorate(): JSX.Element {
decorate(): React.JSX.Element {
return <QueryBlockComponent nodeKey={this.getKey()} />
}

14
web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
View File

@@ -76,7 +76,7 @@ const WorkflowVariableBlockComponent = ({
const Item = (
<div
className={cn(
'mx-0.5 relative group/wrap flex items-center h-[18px] pl-0.5 pr-[3px] rounded-[5px] border select-none',
'group/wrap relative mx-0.5 flex h-[18px] select-none items-center rounded-[5px] border pl-0.5 pr-[3px]',
isSelected ? ' border-state-accent-solid bg-state-accent-hover' : ' border-components-panel-border-subtle bg-components-badge-white-to-dark',
!node && !isEnv && !isChatVar && '!border-state-destructive-solid !bg-state-destructive-hover',
)}
@@ -94,24 +94,24 @@ const WorkflowVariableBlockComponent = ({
</div>
)
}
<div className='shrink-0 mx-0.5 max-w-[60px] text-xs font-medium text-text-secondary truncate' title={node?.title} style={{
<div className='mx-0.5 max-w-[60px] shrink-0 truncate text-xs font-medium text-text-secondary' title={node?.title} style={{
}}>{node?.title}</div>
<Line3 className='mr-0.5 text-divider-deep'></Line3>
</div>
)}
<div className='flex items-center text-text-accent'>
{!isEnv && !isChatVar && <Variable02 className={cn('shrink-0 w-3.5 h-3.5', isException && 'text-text-warning')} />}
{isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
{isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
{!isEnv && !isChatVar && <Variable02 className={cn('h-3.5 w-3.5 shrink-0', isException && 'text-text-warning')} />}
{isEnv && <Env className='h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
{isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
<div className={cn(
'shrink-0 ml-0.5 text-xs font-medium truncate',
'ml-0.5 shrink-0 truncate text-xs font-medium',
isEnv && 'text-util-colors-violet-violet-600',
isChatVar && 'text-util-colors-teal-teal-700',
isException && 'text-text-warning',
)} title={varName}>{varName}</div>
{
!node && !isEnv && !isChatVar && (
<RiErrorWarningFill className='ml-0.5 w-3 h-3 text-text-destructive' />
<RiErrorWarningFill className='ml-0.5 h-3 w-3 text-text-destructive' />
)
}
</div>

4
web/app/components/base/prompt-editor/plugins/workflow-variable-block/node.tsx
View File

@@ -9,7 +9,7 @@ export type SerializedNode = SerializedLexicalNode & {
workflowNodesMap: WorkflowNodesMap
}
export class WorkflowVariableBlockNode extends DecoratorNode<JSX.Element> {
export class WorkflowVariableBlockNode extends DecoratorNode<React.JSX.Element> {
__variables: string[]
__workflowNodesMap: WorkflowNodesMap
@@ -42,7 +42,7 @@ export class WorkflowVariableBlockNode extends DecoratorNode<JSX.Element> {
return false
}
decorate(): JSX.Element {
decorate(): React.JSX.Element {
return (
<WorkflowVariableBlockComponent
nodeKey={this.getKey()}