estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: revamp picker block (#4227)

Browse Source 
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
This commit is contained in:
Whitewater
2024-07-08 21:56:09 +08:00
committed by GitHub
parent 68b1d063f7
commit 0046ef7707
8 changed files with 319 additions and 483 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,11 @@
import {
Fragment,
memo,
useCallback,
useState,
} from 'react'
import ReactDOM from 'react-dom'
import {
FloatingPortal,
flip,
offset,
shift,
@@ -27,11 +27,8 @@ 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 type { PromptOption } from './prompt-option'
import PromptMenu from './prompt-menu'
import VariableMenu from './variable-menu'
import type { VariableOption } from './variable-option'
import { useOptions } from './hooks'
import type { PickerBlockMenuOption } from './menu'
import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
import { useEventEmitterContextContext } from '@/context/event-emitter'
@@ -54,11 +51,13 @@ const ComponentPicker = ({
workflowVariableBlock,
}: ComponentPickerProps) => {
const { eventEmitter } = useEventEmitterContextContext()
const { refs, floatingStyles, elements } = useFloating({
const { refs, floatingStyles, isPositioned } = useFloating({
placement: 'bottom-start',
middleware: [
offset(0), // fix hide cursor
shift(),
shift({
padding: 8,
}),
flip(),
],
})
@@ -76,10 +75,7 @@ const ComponentPicker = ({
})
const {
allOptions,
promptOptions,
variableOptions,
externalToolOptions,
allFlattenOptions,
workflowVariableOptions,
} = useOptions(
contextBlock,
@@ -92,18 +88,15 @@ const ComponentPicker = ({
const onSelectOption = useCallback(
(
selectedOption: PromptOption | VariableOption,
selectedOption: PickerBlockMenuOption,
nodeToRemove: TextNode | null,
closeMenu: () => void,
matchingString: string,
) => {
editor.update(() => {
if (nodeToRemove && selectedOption?.key)
nodeToRemove.remove()
if (selectedOption?.onSelect)
selectedOption.onSelect(matchingString)
selectedOption.onSelectMenuOption()
closeMenu()
})
},
@@ -123,157 +116,93 @@ const ComponentPicker = ({
editor.dispatchCommand(INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND, variables)
}, [editor, checkForTriggerMatch, triggerString])
const renderMenu = useCallback<MenuRenderFn<PromptOption | VariableOption>>((
const renderMenu = useCallback<MenuRenderFn<PickerBlockMenuOption>>((
anchorElementRef,
{ selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
{ options, selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
) => {
if (anchorElementRef.current && (allOptions.length || workflowVariableBlock?.show)) {
return (
<>
{
ReactDOM.createPortal(
<div ref={refs.setReference}></div>,
anchorElementRef.current,
)
}
{
elements.reference && (
<FloatingPortal id='typeahead-menu'>
<div
className='w-[260px] bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg overflow-y-auto'
style={{
...floatingStyles,
maxHeight: 'calc(1 / 3 * 100vh)',
}}
ref={refs.setFloating}
>
{
!!promptOptions.length && (
<>
<PromptMenu
startIndex={0}
selectedIndex={selectedIndex}
options={promptOptions}
onClick={(index, option) => {
if (option.disabled)
return
setHighlightedIndex(index)
selectOptionAndCleanUp(option)
}}
onMouseEnter={(index, option) => {
if (option.disabled)
return
setHighlightedIndex(index)
}}
/>
</>
)
}
{
!!variableOptions.length && (
<>
{
!!promptOptions.length && (
<div className='h-[1px] bg-gray-100'></div>
)
}
<VariableMenu
startIndex={promptOptions.length}
selectedIndex={selectedIndex}
options={variableOptions}
onClick={(index, option) => {
if (option.disabled)
return
setHighlightedIndex(index)
selectOptionAndCleanUp(option)
}}
onMouseEnter={(index, option) => {
if (option.disabled)
return
setHighlightedIndex(index)
}}
queryString={queryString}
/>
</>
)
}
{
!!externalToolOptions.length && (
<>
{
(!!promptOptions.length || !!variableOptions.length) && (
<div className='h-[1px] bg-gray-100'></div>
)
}
<VariableMenu
startIndex={promptOptions.length + variableOptions.length}
selectedIndex={selectedIndex}
options={externalToolOptions}
onClick={(index, option) => {
if (option.disabled)
return
setHighlightedIndex(index)
selectOptionAndCleanUp(option)
}}
onMouseEnter={(index, option) => {
if (option.disabled)
return
setHighlightedIndex(index)
}}
queryString={queryString}
/>
</>
)
}
{
workflowVariableBlock?.show && (
<>
{
(!!promptOptions.length || !!variableOptions.length || !!externalToolOptions.length) && (
<div className='h-[1px] bg-gray-100'></div>
)
}
<div className='p-1'>
<VarReferenceVars
hideSearch
vars={workflowVariableOptions}
onChange={(variables: string[]) => {
handleSelectWorkflowVariable(variables)
}}
/>
</div>
</>
)
}
</div>
</FloatingPortal>
)
}
</>
)
}
if (!(anchorElementRef.current && (allFlattenOptions.length || workflowVariableBlock?.show)))
return null
refs.setReference(anchorElementRef.current)
return null
}, [
allOptions,
promptOptions,
variableOptions,
externalToolOptions,
queryString,
workflowVariableBlock?.show,
workflowVariableOptions,
handleSelectWorkflowVariable,
elements,
floatingStyles,
refs,
])
return (
<>
{
ReactDOM.createPortal(
// 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='p-1 w-[260px] bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg overflow-y-auto overflow-x-hidden'
style={{
...floatingStyles,
visibility: isPositioned ? 'visible' : 'hidden',
maxHeight: 'calc(1 / 3 * 100vh)',
}}
ref={refs.setFloating}
>
{
options.map((option, index) => (
<Fragment key={option.key}>
{
// Divider
index !== 0 && options.at(index - 1)?.group !== option.group && (
<div className='h-px bg-gray-100 my-1 w-screen -translate-x-1'></div>
)
}
{option.renderMenuOption({
queryString,
isSelected: selectedIndex === index,
onSelect: () => {
selectOptionAndCleanUp(option)
},
onSetHighlight: () => {
setHighlightedIndex(index)
},
})}
</Fragment>
))
}
{
workflowVariableBlock?.show && (
<>
{
(!!options.length) && (
<div className='h-px bg-gray-100 my-1 w-screen -translate-x-1'></div>
)
}
<div className='p-1'>
<VarReferenceVars
hideSearch
vars={workflowVariableOptions}
onChange={(variables: string[]) => {
handleSelectWorkflowVariable(variables)
}}
/>
</div>
</>
)
}
</div>
</div>,
anchorElementRef.current,
)
}
</>
)
}, [allFlattenOptions.length, workflowVariableBlock?.show, refs, isPositioned, floatingStyles, queryString, workflowVariableOptions, handleSelectWorkflowVariable])
return (
<LexicalTypeaheadMenuPlugin
options={allOptions as any}
options={allFlattenOptions}
onQueryChange={setQueryString}
onSelectOption={onSelectOption}
anchorClassName='z-[999999]'
// The `translate` class is used to workaround the issue that the `typeahead-menu` menu is not positioned as expected.
// See also https://github.com/facebook/lexical/blob/772520509308e8ba7e4a82b6cd1996a78b3298d0/packages/lexical-react/src/shared/LexicalMenu.ts#L498
//
// 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)]'
menuRenderFn={renderMenu}
triggerFn={checkForTriggerMatch}
/>