memory popup

web/app/components/base/prompt-editor/index.tsx

@@ -61,6 +61,8 @@ import { VariableValueBlockNode } from './plugins/variable-value-block/node'
 import { CustomTextNode } from './plugins/custom-text/node'
 import OnBlurBlock from './plugins/on-blur-or-focus-block'
 import UpdateBlock from './plugins/update-block'
+import MemoryPopupPlugin from './plugins/memory-popup-plugin'
+
 import { textToEditorState } from './utils'
 import type {
   ContextBlockType,
@@ -103,6 +105,7 @@ export type PromptEditorProps = {
   errorMessageBlock?: ErrorMessageBlockType
   lastRunBlock?: LastRunBlockType
   isSupportFileVar?: boolean
+  isMemorySupported?: boolean
 }
 
 const PromptEditor: FC<PromptEditorProps> = ({
@@ -128,6 +131,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
   errorMessageBlock,
   lastRunBlock,
   isSupportFileVar,
+  isMemorySupported,
 }) => {
   const { eventEmitter } = useEventEmitterContextContext()
   const initialConfig = {
@@ -198,6 +202,9 @@ const PromptEditor: FC<PromptEditorProps> = ({
           }
           ErrorBoundary={LexicalErrorBoundary}
         />
+        {isMemorySupported && (
+          <MemoryPopupPlugin instanceId={instanceId} />
+        )}
         <ComponentPickerBlock
           triggerString='/'
           contextBlock={contextBlock}

web/app/components/base/prompt-editor/plugins/memory-popup-plugin/index.tsx

@@ -0,0 +1,177 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { createPortal } from 'react-dom'
+import {
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  size,
+  useFloating,
+} from '@floating-ui/react'
+import {
+  $getSelection,
+  $isRangeSelection,
+} from 'lexical'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { MEMORY_POPUP_SHOW_BY_EVENT_EMITTER } from '@/app/components/workflow/nodes/_base/components/prompt/add-memory-button'
+
+import cn from '@/utils/classnames'
+
+export type MemoryPopupProps = {
+  className?: string
+  container?: Element | null
+  instanceId?: string
+}
+
+export default function MemoryPopupPlugin({
+  className,
+  container,
+  instanceId,
+}: MemoryPopupProps) {
+  const [editor] = useLexicalComposerContext()
+  const { eventEmitter } = useEventEmitterContextContext()
+
+  const [open, setOpen] = useState(false)
+  const portalRef = useRef<HTMLDivElement | null>(null)
+  const lastSelectionRef = useRef<Range | null>(null)
+
+  const containerEl = useMemo(() => container ?? (typeof document !== 'undefined' ? document.body : null), [container])
+
+  const useContainer = !!containerEl && containerEl !== document.body
+
+  const { refs, floatingStyles, isPositioned } = useFloating({
+    placement: 'bottom-start',
+    middleware: [
+      offset(0), // fix hide cursor
+      shift({
+        padding: 8,
+        altBoundary: true,
+      }),
+      flip(),
+      size({
+        apply({ availableWidth, availableHeight, elements }) {
+          Object.assign(elements.floating.style, {
+            maxWidth: `${Math.min(400, availableWidth)}px`,
+            maxHeight: `${Math.min(300, availableHeight)}px`,
+            overflow: 'auto',
+          })
+        },
+        padding: 8,
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+  })
+
+  const openPortal = useCallback(() => {
+    const domSelection = window.getSelection()
+    let range: Range | null = null
+    if (domSelection && domSelection.rangeCount > 0)
+      range = domSelection.getRangeAt(0).cloneRange()
+    else
+      range = lastSelectionRef.current
+
+    if (range) {
+      const rects = range.getClientRects()
+      let rect: DOMRect | null = null
+
+      if (rects && rects.length)
+        rect = rects[rects.length - 1]
+
+      else
+        rect = range.getBoundingClientRect()
+
+      if (rect.width === 0 && rect.height === 0) {
+        const root = editor.getRootElement()
+        if (root) {
+          const sc = range.startContainer
+          const node = sc.nodeType === Node.ELEMENT_NODE
+            ? sc as Element
+            : (sc.parentElement || root)
+
+          rect = node.getBoundingClientRect()
+
+          if (rect.width === 0 && rect.height === 0)
+            rect = root.getBoundingClientRect()
+        }
+      }
+
+      if (rect && !(rect.top === 0 && rect.left === 0 && rect.width === 0 && rect.height === 0)) {
+        const virtualEl = {
+          getBoundingClientRect() {
+            return rect!
+          },
+        }
+        refs.setReference(virtualEl as Element)
+      }
+    }
+
+    setOpen(true)
+  }, [setOpen])
+
+  const closePortal = useCallback(() => {
+    setOpen(false)
+  }, [setOpen])
+
+  eventEmitter?.useSubscription((v: any) => {
+    if (v.type === MEMORY_POPUP_SHOW_BY_EVENT_EMITTER && v.instanceId === instanceId)
+      openPortal()
+  })
+
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const selection = $getSelection()
+        if ($isRangeSelection(selection)) {
+          const domSelection = window.getSelection()
+          if (domSelection && domSelection.rangeCount > 0)
+            lastSelectionRef.current = domSelection.getRangeAt(0).cloneRange()
+        }
+      })
+    })
+  }, [editor])
+
+  useEffect(() => {
+    if (!open)
+      return
+
+    const onMouseDown = (e: MouseEvent) => {
+      if (!portalRef.current)
+        return
+      if (!portalRef.current.contains(e.target as Node))
+        closePortal()
+    }
+    document.addEventListener('mousedown', onMouseDown, false)
+    return () => document.removeEventListener('mousedown', onMouseDown, false)
+  }, [open, closePortal])
+
+  if (!open || !containerEl)
+    return null
+
+  return createPortal(
+    <div
+      ref={(node) => {
+        portalRef.current = node
+        refs.setFloating(node)
+      }}
+      className={cn(
+        useContainer ? '' : 'z-[999999]',
+        'absolute rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm',
+        className,
+      )}
+      style={{
+        ...floatingStyles,
+        visibility: isPositioned ? 'visible' : 'hidden',
+      }}
+    >
+      Memory Popup
+    </div>,
+    containerEl,
+  )
+}

web/app/components/base/prompt-editor/plugins/update-block.tsx

@@ -1,8 +1,11 @@
-import { $insertNodes } from 'lexical'
+import {
+  $insertNodes,
+} from 'lexical'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { textToEditorState } from '../utils'
 import { CustomTextNode } from './custom-text/node'
 import { CLEAR_HIDE_MENU_TIMEOUT } from './workflow-variable-block'
+import { MEMORY_POPUP_SHOW_BY_EVENT_EMITTER } from '../../../workflow/nodes/_base/components/prompt/add-memory-button'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 
 export const PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER = 'PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER'
@@ -36,6 +39,18 @@ const UpdateBlock = ({
     }
   })
 
+  eventEmitter?.useSubscription((v: any) => {
+    if (v.type === MEMORY_POPUP_SHOW_BY_EVENT_EMITTER && v.instanceId === instanceId) {
+      editor.focus()
+      editor.update(() => {
+        const textNode = new CustomTextNode('')
+        $insertNodes([textNode])
+
+        editor.dispatchCommand(CLEAR_HIDE_MENU_TIMEOUT, undefined)
+      })
+    }
+  })
+
   return null
 }
 

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

@@ -66,7 +66,7 @@ const WorkflowVariableBlockComponent = ({
   const [localWorkflowNodesMap, setLocalWorkflowNodesMap] = useState<WorkflowNodesMap>(workflowNodesMap)
   const node = localWorkflowNodesMap![variables[isRagVar ? 1 : 0]]
   const isEnv = isENV(variables)
-  const isChatVar = isConversationVar(variables) && conversationVariables?.some(v => v.variable === `${variables?.[0] ?? ''}.${variables?.[1] ?? ''}` && v.type !== 'memory')
+  // const isChatVar = isConversationVar(variables) && conversationVariables?.some(v => v.variable === `${variables?.[0] ?? ''}.${variables?.[1] ?? ''}` && v.type !== 'memory')
   const isMemoryVar = isConversationVar(variables) && conversationVariables?.some(v => v.variable === `${variables?.[0] ?? ''}.${variables?.[1] ?? ''}` && v.type === 'memory')
   const isException = isExceptionVariable(varName, node?.type)
   let variableValid = true
@@ -74,7 +74,7 @@ const WorkflowVariableBlockComponent = ({
     if (environmentVariables)
       variableValid = environmentVariables.some(v => v.variable === `${variables?.[0] ?? ''}.${variables?.[1] ?? ''}`)
   }
-  else if (isChatVar) {
+  else if (isConversationVar(variables)) {
     if (conversationVariables)
       variableValid = conversationVariables.some(v => v.variable === `${variables?.[0] ?? ''}.${variables?.[1] ?? ''}`)
   }