Feat/attachments (#9526)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>

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

@@ -2,6 +2,7 @@ import {
   forwardRef,
   memo,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
 } from 'react'
@@ -19,7 +20,7 @@ import { useChat } from './hooks'
 import type { ChatWrapperRefType } from './index'
 import Chat from '@/app/components/base/chat/chat'
 import type { ChatItem, OnSend } from '@/app/components/base/chat/types'
-import { useFeaturesStore } from '@/app/components/base/features/hooks'
+import { useFeatures } from '@/app/components/base/features/hooks'
 import {
   fetchSuggestedQuestions,
   stopChatMessageResponding,
@@ -31,22 +32,26 @@ 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
   const appDetail = useAppStore(s => s.appDetail)
   const workflowStore = useWorkflowStore()
-  const featuresStore = useFeaturesStore()
   const inputs = useStore(s => s.inputs)
-  const features = featuresStore!.getState().features
-
+  const features = useFeatures(s => s.features)
   const config = useMemo(() => {
     return {
-      opening_statement: features.opening?.opening_statement || '',
-      suggested_questions: features.opening?.suggested_questions || [],
+      opening_statement: features.opening?.enabled ? (features.opening?.opening_statement || '') : '',
+      suggested_questions: features.opening?.enabled ? (features.opening?.suggested_questions || []) : [],
       suggested_questions_after_answer: features.suggested,
       text_to_speech: features.text2speech,
       speech_to_text: features.speech2text,
@@ -54,7 +59,8 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConv
       sensitive_word_avoidance: features.moderation,
       file_upload: features.file,
     }
-  }, [features])
+  }, [features.opening, features.suggested, features.text2speech, features.speech2text, features.citation, features.moderation, features.file])
+  const setShowFeaturesPanel = useStore(s => s.setShowFeaturesPanel)
 
   const {
     conversationId,
@@ -70,7 +76,7 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConv
     config,
     {
       inputs,
-      promptVariables: (startVariables as any) || [],
+      inputsForm: (startVariables || []) as any,
     },
     [],
     taskId => stopChatMessageResponding(appDetail!.id, taskId),
@@ -113,6 +119,11 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConv
     }
   }, [handleRestart])
 
+  useEffect(() => {
+    if (isResponding)
+      onHide()
+  }, [isResponding, onHide])
+
   return (
     <>
       <Chat
@@ -125,8 +136,13 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConv
         chatContainerClassName='px-3'
         chatContainerInnerClassName='pt-6 w-full max-w-full mx-auto'
         chatFooterClassName='px-4 rounded-bl-2xl'
-        chatFooterInnerClassName='pb-4 w-full max-w-full mx-auto'
+        chatFooterInnerClassName='pb-0'
+        showFileUpload
+        showFeatureBar
+        onFeatureBarClick={setShowFeaturesPanel}
         onSend={doSend}
+        inputs={inputs}
+        inputsForm={(startVariables || []) as any}
         onRegenerate={doRegenerate}
         onStopResponding={handleStop}
         chatNode={(