diff --git a/web/app/components/base/prompt-editor/plugins/draggable-plugin/icons/draggable-block-menu.svg b/web/app/components/base/prompt-editor/plugins/draggable-plugin/icons/draggable-block-menu.svg deleted file mode 100644 index 7086d2990a..0000000000 --- a/web/app/components/base/prompt-editor/plugins/draggable-plugin/icons/draggable-block-menu.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.css b/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.css deleted file mode 100644 index 159b3cac44..0000000000 --- a/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.css +++ /dev/null @@ -1,40 +0,0 @@ -.draggable-block-menu { - border-radius: 4px; - padding: 2px 1px; - cursor: grab; - opacity: 0; - position: absolute; - left: -20px; - top: 0; - will-change: transform; - display: flex; - gap: 2px; -} - -.draggable-block-menu .icon { - width: 16px; - height: 16px; - opacity: 0.3; - background-image: url(./icons/draggable-block-menu.svg); - background-repeat: no-repeat; -} - -.draggable-block-menu:active { - cursor: grabbing; -} - -.draggable-block-menu .icon:hover { - background-color: #efefef; -} - -.draggable-block-target-line { - pointer-events: none; - background: deepskyblue; - height: 4px; - position: absolute; - left: -21px; - right: 0; - top: 0; - opacity: 0; - will-change: transform; -} diff --git a/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx b/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx index 3747f0fdf1..d30dc2161e 100644 --- a/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx +++ b/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx @@ -1,10 +1,9 @@ import type { JSX } from 'react' - -import './index.css' - import { DraggableBlockPlugin_EXPERIMENTAL } from '@lexical/react/LexicalDraggableBlockPlugin' import { useEffect, useRef, useState } from 'react' import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext' +import { RiDraggable } from '@remixicon/react' +import cn from '@/utils/classnames' const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu' @@ -56,12 +55,12 @@ const [editor] = useLexicalComposerContext() menuRef={menuRef as any} targetLineRef={targetLineRef as any} menuComponent={ - isSupportDrag ?
-
+ isSupportDrag ?
+
: null } targetLineComponent={ -
+
} isOnMenu={isOnMenu} onElementChanged={setDraggableElement} diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx new file mode 100644 index 0000000000..8d8283eee8 --- /dev/null +++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx @@ -0,0 +1,50 @@ +'use client' +import type { FC } from 'react' +import React from 'react' +import { VariableX } from '../../../icons/src/vender/workflow' +import { VarBlockIcon } from '@/app/components/workflow/block-icon' +import { BlockEnum } from '@/app/components/workflow/types' +import { Variable02 } from '../../../icons/src/vender/solid/development' +import { useTranslation } from 'react-i18next' + +type Props = { + nodeName: string + varName: string + isSelected: boolean +} + +const ComponentUI: FC = ({ + nodeName, + varName, + // isSelected, +}) => { + const { t } = useTranslation() + + return ( +
+
+
+
+ +
notes
+
+
+ +
+
+ +
{nodeName}
+
+
/
+
+ +
{varName}
+
+
+
+ ) +} + +export default React.memo(ComponentUI) diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component.tsx index c7ab5a5307..8f1ce5da06 100644 --- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component.tsx +++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component.tsx @@ -1,9 +1,7 @@ import type { FC } from 'react' -import { useTranslation } from 'react-i18next' import { useSelectOrDelete } from '../../hooks' import { DELETE_HITL_INPUT_BLOCK_COMMAND } from './' -import { UserEdit02 } from '@/app/components/base/icons/src/vender/solid/users' -import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext' +import ComponentUi from './component-ui' type QueryBlockComponentProps = { nodeKey: string @@ -16,55 +14,17 @@ const HITLInputComponent: FC = ({ nodeName, varName, }) => { - const { t } = useTranslation() const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_HITL_INPUT_BLOCK_COMMAND) - const [editor] = useLexicalComposerContext() return (
{ - // e.dataTransfer.setData('application/x-lexical-drag', nodeKey) - // e.dataTransfer.effectAllowed = 'move' - // console.log(`dragging node with key: ${nodeKey}`) - // }} - // onDragOver={(e) => { - // e.preventDefault() - // e.dataTransfer.dropEffect = 'move' - // }} - // onDragEnter={(e) => { - // e.preventDefault() - // e.currentTarget.classList.add('bg-[#FFEAD5]') - // }} - // onDragLeave={(e) => { - // e.currentTarget.classList.remove('bg-[#FFEAD5]') - // }} - // onDrop={(e) => { - // e.preventDefault() - // e.currentTarget.classList.remove('bg-[#FFEAD5]') - - // const draggedNodeKey = e.dataTransfer.getData('application/x-lexical-drag') - // console.log('Drop event triggered with key:', draggedNodeKey) - - // if (draggedNodeKey) { - // editor.update(() => { - // const draggedNode = $getNodeByKey(draggedNodeKey) - // const dropTarget = $getNodeByKey(nodeKey) - - // if (draggedNode && dropTarget && draggedNode !== dropTarget) { - // console.log('Moving node in editor') - // dropTarget.insertAfter(draggedNode) - // } - // }) - // } - // }} ref={ref} + className='w-full pb-1 pt-3' > - - {nodeName}/{varName} +
) }