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

chore(web): new lint setup (#30020)

Browse Source 
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
This commit is contained in:
Stephen Zhou
2025-12-23 16:58:55 +08:00
committed by GitHub
parent 9701a2994b
commit f2842da397
3356 changed files with 85046 additions and 81278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,3 @@
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { $insertNodes } from 'lexical'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import type {
ContextBlockType,
CurrentBlockType,
@ -13,24 +9,28 @@ import type {
VariableBlockType,
WorkflowVariableBlockType,
} from '../../types'
import { INSERT_CONTEXT_BLOCK_COMMAND } from '../context-block'
import { INSERT_HISTORY_BLOCK_COMMAND } from '../history-block'
import { INSERT_QUERY_BLOCK_COMMAND } from '../query-block'
import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '../variable-block'
import { $createCustomTextNode } from '../custom-text/node'
import { PromptMenuItem } from './prompt-option'
import { VariableMenuItem } from './variable-option'
import { PickerBlockMenuOption } from './menu'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { $insertNodes } from 'lexical'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import AppIcon from '@/app/components/base/app-icon'
import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
import { BracketsX } from '@/app/components/base/icons/src/vender/line/development'
import { File05 } from '@/app/components/base/icons/src/vender/solid/files'
import {
MessageClockCircle,
Tool03,
} from '@/app/components/base/icons/src/vender/solid/general'
import { BracketsX } from '@/app/components/base/icons/src/vender/line/development'
import { UserEdit02 } from '@/app/components/base/icons/src/vender/solid/users'
import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
import AppIcon from '@/app/components/base/app-icon'
import { VarType } from '@/app/components/workflow/types'
import { INSERT_CONTEXT_BLOCK_COMMAND } from '../context-block'
import { $createCustomTextNode } from '../custom-text/node'
import { INSERT_HISTORY_BLOCK_COMMAND } from '../history-block'
import { INSERT_QUERY_BLOCK_COMMAND } from '../query-block'
import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '../variable-block'
import { PickerBlockMenuOption } from './menu'
import { PromptMenuItem } from './prompt-option'
import { VariableMenuItem } from './variable-option'
export const usePromptOptions = (
contextBlock?: ContextBlockType,
@ -46,14 +46,16 @@ export const usePromptOptions = (
key: t('common.promptEditor.context.item.title'),
group: 'prompt context',
render: ({ isSelected, onSelect, onSetHighlight }) => {
return <PromptMenuItem
title={t('common.promptEditor.context.item.title')}
icon={<File05 className='h-4 w-4 text-[#6938EF]' />}
disabled={!contextBlock.selectable}
isSelected={isSelected}
onClick={onSelect}
onMouseEnter={onSetHighlight}
/>
return (
<PromptMenuItem
title={t('common.promptEditor.context.item.title')}
icon={<File05 className="h-4 w-4 text-[#6938EF]" />}
disabled={!contextBlock.selectable}
isSelected={isSelected}
onClick={onSelect}
onMouseEnter={onSetHighlight}
/>
)
},
onSelect: () => {
if (!contextBlock?.selectable)
@ -72,7 +74,7 @@ export const usePromptOptions = (
return (
<PromptMenuItem
title={t('common.promptEditor.query.item.title')}
icon={<UserEdit02 className='h-4 w-4 text-[#FD853A]' />}
icon={<UserEdit02 className="h-4 w-4 text-[#FD853A]" />}
disabled={!queryBlock.selectable}
isSelected={isSelected}
onClick={onSelect}
@ -98,9 +100,8 @@ export const usePromptOptions = (
return (
<PromptMenuItem
title={t('common.promptEditor.history.item.title')}
icon={<MessageClockCircle className='h-4 w-4 text-[#DD2590]' />}
disabled={!historyBlock.selectable
}
icon={<MessageClockCircle className="h-4 w-4 text-[#DD2590]" />}
disabled={!historyBlock.selectable}
isSelected={isSelected}
onClick={onSelect}
onMouseEnter={onSetHighlight}
@ -137,7 +138,7 @@ export const useVariableOptions = (
return (
<VariableMenuItem
title={item.value}
icon={<BracketsX className='h-[14px] w-[14px] text-text-accent' />}
icon={<BracketsX className="h-[14px] w-[14px] text-text-accent" />}
queryString={queryString}
isSelected={isSelected}
onClick={onSelect}
@ -166,7 +167,7 @@ export const useVariableOptions = (
return (
<VariableMenuItem
title={t('common.promptEditor.variable.modal.add')}
icon={<BracketsX className='h-[14px] w-[14px] text-text-accent' />}
icon={<BracketsX className="h-[14px] w-[14px] text-text-accent" />}
queryString={queryString}
isSelected={isSelected}
onClick={onSelect}
@ -208,14 +209,14 @@ export const useExternalToolOptions = (
return (
<VariableMenuItem
title={item.name}
icon={
icon={(
<AppIcon
className='!h-[14px] !w-[14px]'
className="!h-[14px] !w-[14px]"
icon={item.icon}
background={item.icon_background}
/>
}
extraElement={<div className='text-xs text-text-tertiary'>{item.variableName}</div>}
)}
extraElement={<div className="text-xs text-text-tertiary">{item.variableName}</div>}
queryString={queryString}
isSelected={isSelected}
onClick={onSelect}
@ -244,8 +245,8 @@ export const useExternalToolOptions = (
return (
<VariableMenuItem
title={t('common.promptEditor.variable.modal.addTool')}
icon={<Tool03 className='h-[14px] w-[14px] text-text-accent' />}
extraElement={< ArrowUpRight className='h-3 w-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}
@ -284,7 +285,7 @@ export const useOptions = (
if (!workflowVariableBlockType?.show)
return []
const res = workflowVariableBlockType.variables || []
if(errorMessageBlockType?.show && res.findIndex(v => v.nodeId === 'error_message') === -1) {
if (errorMessageBlockType?.show && res.findIndex(v => v.nodeId === 'error_message') === -1) {
res.unshift({
nodeId: 'error_message',
title: 'error_message',
@ -297,7 +298,7 @@ export const useOptions = (
],
})
}
if(lastRunBlockType?.show && res.findIndex(v => v.nodeId === 'last_run') === -1) {
if (lastRunBlockType?.show && res.findIndex(v => v.nodeId === 'last_run') === -1) {
res.unshift({
nodeId: 'last_run',
title: 'last_run',
@ -310,7 +311,7 @@ export const useOptions = (
],
})
}
if(currentBlockType?.show && res.findIndex(v => v.nodeId === 'current') === -1) {
if (currentBlockType?.show && res.findIndex(v => v.nodeId === 'current') === -1) {
const title = currentBlockType.generatorType === 'prompt' ? 'current_prompt' : 'current_code'
res.unshift({
nodeId: 'current',

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

@ -1,20 +1,5 @@
import {
Fragment,
memo,
useCallback,
useState,
} from 'react'
import ReactDOM from 'react-dom'
import {
flip,
offset,
shift,
useFloating,
} from '@floating-ui/react'
import type { TextNode } from 'lexical'
import type { MenuRenderFn } from '@lexical/react/LexicalTypeaheadMenuPlugin'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { LexicalTypeaheadMenuPlugin } from '@lexical/react/LexicalTypeaheadMenuPlugin'
import type { TextNode } from 'lexical'
import type {
ContextBlockType,
CurrentBlockType,
@ -26,19 +11,34 @@ import type {
VariableBlockType,
WorkflowVariableBlockType,
} from '../../types'
import { useBasicTypeaheadTriggerMatch } from '../../hooks'
import { INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND } from '../workflow-variable-block'
import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '../variable-block'
import { $splitNodeContainingQuery } from '../../utils'
import { useOptions } from './hooks'
import type { PickerBlockMenuOption } from './menu'
import {
flip,
offset,
shift,
useFloating,
} from '@floating-ui/react'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { LexicalTypeaheadMenuPlugin } from '@lexical/react/LexicalTypeaheadMenuPlugin'
import { KEY_ESCAPE_COMMAND } from 'lexical'
import {
Fragment,
memo,
useCallback,
useState,
} from 'react'
import ReactDOM from 'react-dom'
import { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
import { useEventEmitterContextContext } from '@/context/event-emitter'
import { KEY_ESCAPE_COMMAND } from 'lexical'
import { useBasicTypeaheadTriggerMatch } from '../../hooks'
import { $splitNodeContainingQuery } from '../../utils'
import { INSERT_CURRENT_BLOCK_COMMAND } from '../current-block'
import { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
import { INSERT_ERROR_MESSAGE_BLOCK_COMMAND } from '../error-message-block'
import { INSERT_LAST_RUN_BLOCK_COMMAND } from '../last-run-block'
import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '../variable-block'
import { INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND } from '../workflow-variable-block'
import { useOptions } from './hooks'
type ComponentPickerProps = {
triggerString: string
@ -170,9 +170,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='h-0 w-0'>
<div className="h-0 w-0">
<div
className='w-[260px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 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',
@ -181,14 +181,14 @@ const ComponentPicker = ({
>
{
workflowVariableBlock?.show && (
<div className='p-1'>
<div className="p-1">
<VarReferenceVars
searchBoxClassName='mt-1'
searchBoxClassName="mt-1"
vars={workflowVariableOptions}
onChange={(variables: string[]) => {
handleSelectWorkflowVariable(variables)
}}
maxHeightClass='max-h-[34vh]'
maxHeightClass="max-h-[34vh]"
isSupportFileVar={isSupportFileVar}
onClose={handleClose}
onBlur={handleClose}
@ -202,7 +202,7 @@ const ComponentPicker = ({
}
{
workflowVariableBlock?.show && !!options.length && (
<div className='my-1 h-px w-full -translate-x-1 bg-divider-subtle'></div>
<div className="my-1 h-px w-full -translate-x-1 bg-divider-subtle"></div>
)
}
<div>
@ -212,7 +212,7 @@ const ComponentPicker = ({
{
// Divider
index !== 0 && options.at(index - 1)?.group !== option.group && (
<div className='my-1 h-px w-full -translate-x-1 bg-divider-subtle'></div>
<div className="my-1 h-px w-full -translate-x-1 bg-divider-subtle"></div>
)
}
{option.renderMenuOption({
@ -248,7 +248,7 @@ const ComponentPicker = ({
//
// We no need the position function of the `LexicalTypeaheadMenuPlugin`,
// so the reference anchor should be positioned based on the range of the trigger string, and the menu will be positioned by the floating ui.
anchorClassName='z-[999999] translate-y-[calc(-100%-3px)]'
anchorClassName="z-[999999] translate-y-[calc(-100%-3px)]"
menuRenderFn={renderMenu}
triggerFn={checkForTriggerMatch}
/>

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

@ -40,9 +40,10 @@ export const PromptMenuItem = memo(({
if (disabled)
return
onClick()
}}>
}}
>
{icon}
<div className='ml-1 text-[13px] text-text-secondary'>{title}</div>
<div className="ml-1 text-[13px] text-text-secondary">{title}</div>
</div>
)
})

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

@ -48,13 +48,14 @@ export const VariableMenuItem = memo(({
e.preventDefault()
e.stopPropagation()
}}
onClick={onClick}>
<div className='mr-2'>
onClick={onClick}
>
<div className="mr-2">
{icon}
</div>
<div className='grow truncate text-[13px] text-text-secondary' title={title}>
<div className="grow truncate text-[13px] text-text-secondary" title={title}>
{before}
<span className='text-text-accent'>{middle}</span>
<span className="text-text-accent">{middle}</span>
{after}
</div>
{extraElement}