form inputs hide handle

web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx

@@ -2,6 +2,7 @@ import {
   forwardRef,
   memo,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
 } from 'react'
@@ -30,9 +31,15 @@ type ChatWrapperProps = {
   showConversationVariableModal: boolean
   onConversationModalHide: () => void
   showInputsFieldsPanel: boolean
+  onHide: () => void
 }
 
-const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConversationVariableModal, onConversationModalHide, showInputsFieldsPanel }, ref) => {
+const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({
+  showConversationVariableModal,
+  onConversationModalHide,
+  showInputsFieldsPanel,
+  onHide,
+}, ref) => {
   const nodes = useNodes<StartNodeType>()
   const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
   const startVariables = startNode?.data.variables
@@ -92,6 +99,11 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConv
     }
   }, [handleRestart])
 
+  useEffect(() => {
+    if (isResponding)
+      onHide()
+  }, [isResponding, onHide])
+
   return (
     <>
       <Chat

web/app/components/workflow/panel/debug-and-preview/index.tsx

@@ -103,6 +103,7 @@ const DebugAndPreview = () => {
           showConversationVariableModal={showConversationVariableModal}
           onConversationModalHide={() => setShowConversationVariableModal(false)}
           showInputsFieldsPanel={expanded}
+          onHide={() => setExpanded(false)}
         />
       </div>
     </div>