From cc4ca942c918abca4ce325cffb40611098f7fb3f Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 6 Mar 2024 15:38:45 +0800
Subject: [PATCH] feat: prompt editor blur and focus ui

---
 .../components/base/prompt-editor/index.tsx   | 22 ++++++++++---------
 ...r-block.tsx => on-blur-or-focus-block.tsx} | 12 ++++++++++
 .../nodes/_base/components/prompt/editor.tsx  | 19 +++++++++++-----
 3 files changed, 38 insertions(+), 15 deletions(-)
 rename web/app/components/base/prompt-editor/plugins/{on-blur-block.tsx => on-blur-or-focus-block.tsx} (75%)

diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index cadfce1440..149c8525ff 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -31,7 +31,7 @@ import VariableBlock from './plugins/variable-block'
 import VariableValueBlock from './plugins/variable-value-block'
 import { VariableValueBlockNode } from './plugins/variable-value-block/node'
 import { CustomTextNode } from './plugins/custom-text/node'
-import OnBlurBlock from './plugins/on-blur-block'
+import OnBlurBlock from './plugins/on-blur-or-focus-block'
 import { textToEditorState } from './utils'
 import type { Dataset } from './plugins/context-block'
 import type { RoleName } from './plugins/history-block'
@@ -48,6 +48,7 @@ export type PromptEditorProps = {
   editable?: boolean
   onChange?: (text: string) => void
   onBlur?: () => void
+  onFocus?: () => void
   contextBlock?: {
     show?: boolean
     selectable?: boolean
@@ -84,13 +85,14 @@ const PromptEditor: FC<PromptEditorProps> = ({
   editable = true,
   onChange,
   onBlur,
+  onFocus,
   contextBlock = {
     show: true,
     selectable: true,
     datasets: [],
-    onAddContext: () => {},
-    onInsert: () => {},
-    onDelete: () => {},
+    onAddContext: () => { },
+    onInsert: () => { },
+    onDelete: () => { },
   },
   historyBlock = {
     show: true,
@@ -99,9 +101,9 @@ const PromptEditor: FC<PromptEditorProps> = ({
       user: '',
       assistant: '',
     },
-    onEditRole: () => {},
-    onInsert: () => {},
-    onDelete: () => {},
+    onEditRole: () => { },
+    onInsert: () => { },
+    onDelete: () => { },
   },
   variableBlock = {
     variables: [],
@@ -109,8 +111,8 @@ const PromptEditor: FC<PromptEditorProps> = ({
   queryBlock = {
     show: true,
     selectable: true,
-    onInsert: () => {},
-    onDelete: () => {},
+    onInsert: () => { },
+    onDelete: () => { },
   },
 }) => {
   const { eventEmitter } = useEventEmitterContextContext()
@@ -221,7 +223,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
         }
         <VariableValueBlock />
         <OnChangePlugin onChange={handleEditorChange} />
-        <OnBlurBlock onBlur={onBlur} />
+        <OnBlurBlock onBlur={onBlur} onFocus={onFocus} />
         {/* <TreeView /> */}
       </div>
     </LexicalComposer>
diff --git a/web/app/components/base/prompt-editor/plugins/on-blur-block.tsx b/web/app/components/base/prompt-editor/plugins/on-blur-or-focus-block.tsx
similarity index 75%
rename from web/app/components/base/prompt-editor/plugins/on-blur-block.tsx
rename to web/app/components/base/prompt-editor/plugins/on-blur-or-focus-block.tsx
index e3867407d0..a443bee097 100644
--- a/web/app/components/base/prompt-editor/plugins/on-blur-block.tsx
+++ b/web/app/components/base/prompt-editor/plugins/on-blur-or-focus-block.tsx
@@ -3,15 +3,18 @@ import { useEffect } from 'react'
 import {
   BLUR_COMMAND,
   COMMAND_PRIORITY_EDITOR,
+  FOCUS_COMMAND,
 } from 'lexical'
 import { mergeRegister } from '@lexical/utils'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 
 type OnBlurBlockProps = {
   onBlur?: () => void
+  onFocus?: () => void
 }
 const OnBlurBlock: FC<OnBlurBlockProps> = ({
   onBlur,
+  onFocus,
 }) => {
   const [editor] = useLexicalComposerContext()
 
@@ -27,6 +30,15 @@ const OnBlurBlock: FC<OnBlurBlockProps> = ({
         },
         COMMAND_PRIORITY_EDITOR,
       ),
+      editor.registerCommand(
+        FOCUS_COMMAND,
+        () => {
+          if (onFocus)
+            onFocus()
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
     )
   }, [editor, onBlur])
 
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index cae1c0f0bd..fee69100c3 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -4,6 +4,7 @@ import React, { useCallback } from 'react'
 import cn from 'classnames'
 import copy from 'copy-to-clipboard'
 import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
 import PromptEditorHeightResizeWrap from '@/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
@@ -44,9 +45,14 @@ const Editor: FC<Props> = ({
     setIsExpanded(!isExpanded)
   }, [isExpanded])
 
+  const [isFocus, {
+    setTrue: setFocus,
+    setFalse: setBlur,
+  }] = useBoolean(false)
+
   return (
-    <div className={cn(s.gradientBorder, '!rounded-[9px] shadow-md')}>
-      <div className='rounded-lg bg-white'>
+    <div className={cn(isFocus && s.gradientBorder, '!rounded-[9px] shadow-md')}>
+      <div className={cn(isFocus ? 'bg-white' : 'bg-gray-100', 'rounded-lg')}>
         <div className='pt-1 pl-3 pr-2 flex justify-between h-6 items-center'>
           <div className='leading-4 text-xs font-semibold text-gray-700 uppercase'>{title}</div>
           <div className='flex items-center'>
@@ -76,8 +82,10 @@ const Editor: FC<Props> = ({
           minHeight={minHeight}
           onHeightChange={setEditorHeight}
           footer={(
-            <div className='pl-4 pb-2 flex'>
-              <div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{'{x} '}{t('workflow.nodes.common.insertVarTip')}</div>
+            <div className='pl-3 pb-2 flex'>
+              {isFocus
+                ? <div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{'{x} '}{t('workflow.nodes.common.insertVarTip')}</div>
+                : <div className='h-[18px]'></div>}
             </div>
           )}
         >
@@ -112,7 +120,8 @@ const Editor: FC<Props> = ({
               selectable: true,
             }}
             onChange={onChange}
-            onBlur={() => { }}
+            onBlur={setBlur}
+            onFocus={setFocus}
             editable={!readOnly}
           />
         </PromptEditorHeightResizeWrap>