opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: prompt editor

This commit is contained in:
StyleZhang 2024-03-29 16:08:10 +08:00
parent d7be9c0afc
commit b50e897aa0
10 changed files with 77 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/app/components/base/prompt-editor/index.tsx
View File

@ -35,6 +35,7 @@ import {
import {
WorkflowVariableBlock,
WorkflowVariableBlockNode,
WorkflowVariableBlockReplacementBlock,
} from './plugins/workflow-variable-block'
import VariableBlock from './plugins/variable-block'
import VariableValueBlock from './plugins/variable-value-block'
@ -156,6 +157,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
externalToolBlock={externalToolBlock}
workflowVariableBlock={workflowVariableBlock}
/>
<ContextBlockReplacementBlock {...contextBlock} />
{
contextBlock?.show && (
<>
@ -192,6 +194,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
workflowVariableBlock?.show && (
<>
<WorkflowVariableBlock {...workflowVariableBlock} />
<WorkflowVariableBlockReplacementBlock {...workflowVariableBlock} />
</>
)
}

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

@ -41,11 +41,11 @@ export const usePromptOptions = (
new PromptOption(t('common.promptEditor.context.item.title'), {
icon: <File05 className='w-4 h-4 text-[#6938EF]' />,
onSelect: () => {
if (contextBlock?.selectable)
if (!contextBlock?.selectable)
return
editor.dispatchCommand(INSERT_CONTEXT_BLOCK_COMMAND, undefined)
},
disabled: contextBlock?.selectable,
disabled: !contextBlock?.selectable,
}),
]
: [],
@ -54,11 +54,11 @@ export const usePromptOptions = (
new PromptOption(t('common.promptEditor.query.item.title'), {
icon: <UserEdit02 className='w-4 h-4 text-[#FD853A]' />,
onSelect: () => {
if (queryBlock?.selectable)
if (!queryBlock?.selectable)
return
editor.dispatchCommand(INSERT_QUERY_BLOCK_COMMAND, undefined)
},
disabled: queryBlock?.selectable,
disabled: !queryBlock?.selectable,
}),
]
: [],
@ -67,11 +67,11 @@ export const usePromptOptions = (
new PromptOption(t('common.promptEditor.history.item.title'), {
icon: <MessageClockCircle className='w-4 h-4 text-[#DD2590]' />,
onSelect: () => {
if (historyBlock?.selectable)
if (!historyBlock?.selectable)
return
editor.dispatchCommand(INSERT_HISTORY_BLOCK_COMMAND, undefined)
},
disabled: historyBlock?.selectable,
disabled: !historyBlock?.selectable,
}),
]
: [],

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

@ -49,7 +49,7 @@ export const PromptMenuItem = memo(({
<div
key={option.key}
className={`
flex items-center px-3 h-6 cursor-pointer hover:bg-gray-50
flex items-center px-3 h-6 cursor-pointer hover:bg-gray-50 rounded-md
${isSelected && !option.disabled && '!bg-gray-50'}
${option.disabled ? 'cursor-not-allowed opacity-30' : 'hover:bg-gray-50 cursor-pointer'}
`}

2
web/app/components/base/prompt-editor/plugins/context-block/context-block-replacement-block.tsx
View File

@ -54,7 +54,7 @@ const ContextBlockReplacementBlock = ({
return mergeRegister(
editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createContextBlockNode)),
)
}, [editor, getMatch, createContextBlockNode])
}, [])
return null
}

2
web/app/components/base/prompt-editor/plugins/history-block/history-block-replacement-block.tsx
View File

@ -52,7 +52,7 @@ const HistoryBlockReplacementBlock = ({
return mergeRegister(
editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createHistoryBlockNode)),
)
}, [editor, getMatch, createHistoryBlockNode])
}, [])
return null
}

2
web/app/components/base/prompt-editor/plugins/query-block/query-block-replacement-block.tsx
View File

@ -51,7 +51,7 @@ const QueryBlockReplacementBlock = ({
return mergeRegister(
editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createQueryBlockNode)),
)
}, [editor, getMatch, createQueryBlockNode])
}, [])
return null
}

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

@ -68,3 +68,4 @@ WorkflowVariableBlock.displayName = 'WorkflowVariableBlock'
export { WorkflowVariableBlock }
export { WorkflowVariableBlockNode } from './node'
export { default as WorkflowVariableBlockReplacementBlock } from './workflow-variable-block-replacement-block'

61
web/app/components/base/prompt-editor/plugins/workflow-variable-block/workflow-variable-block-replacement-block.tsx Normal file
View File

@ -0,0 +1,61 @@
import {
memo,
useCallback,
useEffect,
} from 'react'
import type { TextNode } from 'lexical'
import { $applyNodeReplacement } from 'lexical'
import { mergeRegister } from '@lexical/utils'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { decoratorTransform } from '../../utils'
import type { WorkflowVariableBlockType } from '../../types'
import { CustomTextNode } from '../custom-text/node'
import { $createWorkflowVariableBlockNode } from './node'
import { WorkflowVariableBlockNode } from './index'
const REGEX = /\{\{#(\d+|sys)(\.[a-zA-Z_][a-zA-Z0-9_]{0,29})+#\}\}/gi
const WorkflowVariableBlockReplacementBlock = ({
getWorkflowNode = () => undefined,
onInsert,
}: WorkflowVariableBlockType) => {
const [editor] = useLexicalComposerContext()
useEffect(() => {
if (!editor.hasNodes([WorkflowVariableBlockNode]))
throw new Error('WorkflowVariableBlockNodePlugin: WorkflowVariableBlockNode not registered on editor')
}, [editor])
const createWorkflowVariableBlockNode = useCallback((textNode: TextNode): WorkflowVariableBlockNode => {
if (onInsert)
onInsert()
const nodePathString = textNode.getTextContent().slice(3, -3)
return $applyNodeReplacement($createWorkflowVariableBlockNode(nodePathString.split('.'), getWorkflowNode))
}, [onInsert, getWorkflowNode])
const getMatch = useCallback((text: string) => {
const matchArr = REGEX.exec(text)
if (matchArr === null)
return null
console.log(matchArr, 'ma')
const startOffset = matchArr.index
const endOffset = startOffset + matchArr[0].length
return {
end: endOffset,
start: startOffset,
}
}, [])
useEffect(() => {
return mergeRegister(
editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createWorkflowVariableBlockNode)),
)
}, [])
return null
}
export default memo(WorkflowVariableBlockReplacementBlock)

4
web/app/components/base/prompt-editor/utils.ts
View File

@ -190,7 +190,7 @@ export function registerLexicalTextEntity<T extends TextNode>(
export const decoratorTransform = (
node: CustomTextNode,
getMatch: (text: string) => null | EntityMatch,
createNode: () => LexicalNode,
createNode: (textNode: TextNode) => LexicalNode,
) => {
if (!node.isSimpleText())
return
@ -241,7 +241,7 @@ export const decoratorTransform = (
else
[, nodeToReplace, currentNode] = currentNode.splitText(match.start, match.end)
const replacementNode = createNode()
const replacementNode = createNode(nodeToReplace)
nodeToReplace.replace(replacementNode)
if (currentNode == null)

3
web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
View File

@ -124,8 +124,6 @@ const Editor: FC<Props> = ({
contextBlock={{
show: justVar ? false : isShowContext,
selectable: !hasSetBlockStatus?.context,
datasets: [],
onAddContext: () => { },
canNotAddContext: true,
}}
historyBlock={{
@ -135,7 +133,6 @@ const Editor: FC<Props> = ({
user: 'Human',
assistant: 'Assistant',
},
onEditRole: () => { },
}}
queryBlock={{
show: justVar ? false : isShowQuery,