Merge branch 'feat/hitl-frontend' of https://github.com/langgenius/dify into feat/hitl-frontend

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

@@ -61,7 +61,7 @@ export default function DraggableBlockPlugin({
       menuComponent={
         isSupportDrag
           ? (
-              <div ref={menuRef} className={cn(DRAGGABLE_BLOCK_MENU_CLASSNAME, 'absolute right-6 top-4 cursor-grab opacity-0 will-change-transform active:cursor-move')}>
+              <div ref={menuRef} className={cn(DRAGGABLE_BLOCK_MENU_CLASSNAME, 'absolute right-2.5 top-4 cursor-grab opacity-0 will-change-transform active:cursor-move')}>
                 <RiDraggable className="size-3.5 text-text-tertiary" />
               </div>
             )

web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx

@@ -111,7 +111,7 @@ const HITLInputComponentUI: FC<HITLInputComponentUIProps> = ({
         </div>
       </div>
 
-      <div className="flex w-full items-center gap-x-0.5 pr-8">
+      <div className="flex w-full items-center gap-x-0.5 pr-5">
         <div className="min-w-0 grow">
           {/* Default Value Info */}
           {isDefaultValueVariable && (

web/app/components/base/prompt-editor/plugins/hitl-input-block/index.tsx

@@ -13,6 +13,7 @@ import {
   memo,
   useEffect,
 } from 'react'
+import { CustomTextNode } from '../custom-text/node'
 import {
   $createHITLInputNode,
   HITLInputNode,
@@ -70,9 +71,11 @@ const HITLInputBlock = memo(({
             undefined,
             readonly,
           )
-
+          const prev = new CustomTextNode('\n')
+          $insertNodes([prev])
           $insertNodes([currentHITLNode])
-
+          const next = new CustomTextNode('\n')
+          $insertNodes([next])
           if (onInsert)
             onInsert()
 

web/app/components/base/prompt-editor/plugins/hitl-input-block/node.tsx

@@ -164,7 +164,7 @@ export class HITLInputNode extends DecoratorNode<React.JSX.Element> {
 
   createDOM(): HTMLElement {
     const div = document.createElement('div')
-    div.classList.add('flex', 'items-center', 'align-middle', 'support-drag')
+    div.classList.add('inline-flex', 'w-[calc(100%-1px)]', 'items-center', 'align-middle', 'support-drag')
     return div
   }