fix: start chat check & chat send button theme

web/app/components/base/chat/chat-with-history/hooks.tsx

@@ -37,6 +37,8 @@ import type {
 import { useToastContext } from '@/app/components/base/toast'
 import { changeLanguage } from '@/i18n/i18next-config'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
+import { InputVarType } from '@/app/components/workflow/types'
+import { TransferMethod } from '@/types/app'
 
 export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
   const isInstalledApp = useMemo(() => !!installedAppInfo, [installedAppInfo])
@@ -220,21 +222,38 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
 
   const { notify } = useToastContext()
   const checkInputsRequired = useCallback((silent?: boolean) => {
-    if (inputsForms.length) {
+    let hasEmptyInput = ''
-      for (let i = 0; i < inputsForms.length; i += 1) {
+    let fileIsUploading = false
-        const item = inputsForms[i]
+    const requiredVars = inputsForms.filter(({ required }) => required)
-
+    if (requiredVars.length) {
-        if (item.required && !newConversationInputsRef.current[item.variable]) {
+      requiredVars.forEach(({ variable, label, type }) => {
-          if (!silent) {
+        if (hasEmptyInput)
-            notify({
-              type: 'error',
-              message: t('appDebug.errorMessage.valueOfVarRequired', { key: item.variable }),
-            })
-          }
           return
+
+        if (fileIsUploading)
+          return
+
+        if (!newConversationInputsRef.current[variable] && !silent)
+          hasEmptyInput = label as string
+
+        if ((type === InputVarType.singleFile || type === InputVarType.multiFiles) && newConversationInputsRef.current[variable] && !silent) {
+          const files = newConversationInputsRef.current[variable]
+          if (Array.isArray(files))
+            fileIsUploading = files.find(item => item.transferMethod === TransferMethod.local_file && !item.uploadedId)
+          else
+            fileIsUploading = files.transferMethod === TransferMethod.local_file && !files.uploadedId
         }
-      }
+      })
-      return true
+    }
+
+    if (hasEmptyInput) {
+      notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: hasEmptyInput }) })
+      return false
+    }
+
+    if (fileIsUploading) {
+      notify({ type: 'info', message: t('appDebug.errorMessage.waitForFileUpload') })
+      return
     }
 
     return true

web/app/components/base/chat/chat/chat-input-area/index.tsx

@@ -50,7 +50,7 @@ const ChatInputArea = ({
   onSend,
   inputs = {},
   inputsForm = [],
-  // theme,
+  theme,
 }: ChatInputAreaProps) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
@@ -127,6 +127,7 @@ const ChatInputArea = ({
       speechToTextConfig={speechToTextConfig}
       onShowVoiceInput={handleShowVoiceInput}
       onSend={handleSend}
+      theme={theme}
     />
   )
 

web/app/components/base/chat/chat/chat-input-area/operation.tsx

@@ -9,6 +9,7 @@ import {
 import type {
   EnableType,
 } from '../../types'
+import type { Theme } from '../../embedded-chatbot/theme/theme-context'
 import Button from '@/app/components/base/button'
 import ActionButton from '@/app/components/base/action-button'
 import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
@@ -20,12 +21,14 @@ type OperationProps = {
   speechToTextConfig?: EnableType
   onShowVoiceInput?: () => void
   onSend: () => void
+  theme?: Theme | null
 }
 const Operation = forwardRef<HTMLDivElement, OperationProps>(({
   fileConfig,
   speechToTextConfig,
   onShowVoiceInput,
   onSend,
+  theme,
 }, ref) => {
   return (
     <div
@@ -54,6 +57,13 @@ const Operation = forwardRef<HTMLDivElement, OperationProps>(({
           className='ml-3 px-0 w-8'
           variant='primary'
           onClick={onSend}
+          style={
+            theme
+              ? {
+                backgroundColor: theme.primaryColor,
+              }
+              : {}
+          }
         >
           <RiSendPlane2Fill className='w-4 h-4' />
         </Button>

web/app/components/base/chat/embedded-chatbot/hooks.tsx

@@ -30,6 +30,8 @@ import type {
 } from '@/models/share'
 import { useToastContext } from '@/app/components/base/toast'
 import { changeLanguage } from '@/i18n/i18next-config'
+import { InputVarType } from '@/app/components/workflow/types'
+import { TransferMethod } from '@/types/app'
 
 export const useEmbeddedChatbot = () => {
   const isInstalledApp = false
@@ -206,21 +208,38 @@ export const useEmbeddedChatbot = () => {
 
   const { notify } = useToastContext()
   const checkInputsRequired = useCallback((silent?: boolean) => {
-    if (inputsForms.length) {
+    let hasEmptyInput = ''
-      for (let i = 0; i < inputsForms.length; i += 1) {
+    let fileIsUploading = false
-        const item = inputsForms[i]
+    const requiredVars = inputsForms.filter(({ required }) => required)
-
+    if (requiredVars.length) {
-        if (item.required && !newConversationInputsRef.current[item.variable]) {
+      requiredVars.forEach(({ variable, label, type }) => {
-          if (!silent) {
+        if (hasEmptyInput)
-            notify({
-              type: 'error',
-              message: t('appDebug.errorMessage.valueOfVarRequired', { key: item.variable }),
-            })
-          }
           return
+
+        if (fileIsUploading)
+          return
+
+        if (!newConversationInputsRef.current[variable] && !silent)
+          hasEmptyInput = label as string
+
+        if ((type === InputVarType.singleFile || type === InputVarType.multiFiles) && newConversationInputsRef.current[variable] && !silent) {
+          const files = newConversationInputsRef.current[variable]
+          if (Array.isArray(files))
+            fileIsUploading = files.find(item => item.transferMethod === TransferMethod.local_file && !item.uploadedId)
+          else
+            fileIsUploading = files.transferMethod === TransferMethod.local_file && !files.uploadedId
         }
-      }
+      })
-      return true
+    }
+
+    if (hasEmptyInput) {
+      notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: hasEmptyInput }) })
+      return false
+    }
+
+    if (fileIsUploading) {
+      notify({ type: 'info', message: t('appDebug.errorMessage.waitForFileUpload') })
+      return
     }
 
     return true