From 922aeb7c21e97e1eba9b1fd9563d0ec80b16f057 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 6 Aug 2025 16:56:54 +0800
Subject: [PATCH] feat: node hitl render

---
 .../prompt-editor/plugins/hitl-input-block/component.tsx    | 2 +-
 .../hitl-input-block/hitl-input-block-replacement-block.tsx | 6 +++---
 .../base/prompt-editor/plugins/hitl-input-block/node.tsx    | 4 ++--
 web/config/index.ts                                         | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

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 71a1a4450a..acf2a8be03 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
@@ -21,7 +21,7 @@ const HITLInputComponent: FC<QueryBlockComponentProps> = ({
   return (
     <div
       className={`
-        inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#FFF6ED] pl-1 pr-0.5 hover:bg-[#FFEAD5]
+        flex h-6 items-center rounded-[5px] border-[1.5px] border-components-input-border-active bg-background-default-hover pl-1 pr-0.5 hover:bg-[#FFEAD5]
         ${isSelected && '!border-[#FD853A]'}
       `}
       ref={ref}
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/hitl-input-block-replacement-block.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/hitl-input-block-replacement-block.tsx
index 24cbe7c756..14e8f9dd19 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/hitl-input-block-replacement-block.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/hitl-input-block-replacement-block.tsx
@@ -18,7 +18,7 @@ import { HITL_INPUT_REG } from '@/config'
 
 const REGEX = new RegExp(HITL_INPUT_REG)
 
-const QueryBlockReplacementBlock = ({
+const HITLInputReplacementBlock = ({
   onInsert,
 }: QueryBlockType) => {
   const [editor] = useLexicalComposerContext()
@@ -31,7 +31,7 @@ const QueryBlockReplacementBlock = ({
   const createHITLInputBlockNode = useCallback((textNode: TextNode): QueryBlockNode => {
     if (onInsert)
       onInsert()
-    const varName = textNode.getTextContent().split('.')[1]
+    const varName = textNode.getTextContent().split('.')[1].replace(/#}}$/, '')
     return $applyNodeReplacement($createHITLInputNode(varName))
   }, [onInsert])
 
@@ -59,4 +59,4 @@ const QueryBlockReplacementBlock = ({
   return null
 }
 
-export default memo(QueryBlockReplacementBlock)
+export default memo(HITLInputReplacementBlock)
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/node.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/node.tsx
index 4f7ec1265b..552045735c 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/node.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/node.tsx
@@ -34,7 +34,7 @@ export class HITLInputNode extends DecoratorNode<React.JSX.Element> {
 
   createDOM(): HTMLElement {
     const div = document.createElement('div')
-    div.classList.add('inline-flex', 'items-center', 'align-middle')
+    div.classList.add('flex', 'w-full', 'items-center', 'align-middle')
     return div
   }
 
@@ -61,7 +61,7 @@ export class HITLInputNode extends DecoratorNode<React.JSX.Element> {
   }
 
   getTextContent(): string {
-    return `{{#$outputs.${this.getVariableName()}#}}`
+    return `{{#$output.${this.getVariableName()}#}}`
   }
 }
 
diff --git a/web/config/index.ts b/web/config/index.ts
index ca9bdc7db4..017a381fdc 100644
--- a/web/config/index.ts
+++ b/web/config/index.ts
@@ -255,7 +255,7 @@ export const VAR_REGEX = /\{\{(#[a-zA-Z0-9_-]{1,50}(\.[a-zA-Z_]\w{0,29}){1,10}#)
 
 export const resetReg = () => VAR_REGEX.lastIndex = 0
 
-export const HITL_INPUT_REG = /\{\{#$output\.([a-zA-Z_]\w{0,29}){1,10}#\}\}/gi
+export const HITL_INPUT_REG = /\{\{(#\$output\.([a-zA-Z_]\w{0,29}){1,10}#)\}\}/gi
 export const resetHITLInputReg = () => HITL_INPUT_REG.lastIndex = 0
 
 export const DISABLE_UPLOAD_IMAGE_AS_ICON = process.env.NEXT_PUBLIC_DISABLE_UPLOAD_IMAGE_AS_ICON === 'true'