+
+
- {/*
- {formatTime(currentTime)}
-
*/}
-
-
{formatTime(duration)}
+
+ {formatTime(duration)}
-
{t('common.operation.audioSourceUnavailable')}
+
{t('common.operation.audioSourceUnavailable')}
)
}
diff --git a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
index 77259201ba..a4a76fbbf6 100644
--- a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
+++ b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
import Chat from '../chat'
import type {
ChatConfig,
@@ -9,14 +9,17 @@ import type {
import { useChat } from '../chat/hooks'
import { getLastAnswer, isValidGeneratedAnswer } from '../utils'
import { useChatWithHistoryContext } from './context'
-import Header from './header'
-import ConfigPanel from './config-panel'
+import { InputVarType } from '@/app/components/workflow/types'
+import { TransferMethod } from '@/types/app'
+import InputsForm from '@/app/components/base/chat/chat-with-history/inputs-form'
import {
fetchSuggestedQuestions,
getUrl,
stopChatMessageResponding,
} from '@/service/share'
+import AppIcon from '@/app/components/base/app-icon'
import AnswerIcon from '@/app/components/base/answer-icon'
+import cn from '@/utils/classnames'
const ChatWrapper = () => {
const {
@@ -26,6 +29,7 @@ const ChatWrapper = () => {
currentConversationItem,
inputsForms,
newConversationInputs,
+ newConversationInputsRef,
handleNewConversationCompleted,
isMobile,
isInstalledApp,
@@ -65,6 +69,38 @@ const ChatWrapper = () => {
appPrevChatTree,
taskId => stopChatMessageResponding('', taskId, isInstalledApp, appId),
)
+ const inputsFormValue = currentConversationId ? currentConversationItem?.inputs : newConversationInputsRef?.current
+ const inputDisabled = useMemo(() => {
+ let hasEmptyInput = ''
+ let fileIsUploading = false
+ const requiredVars = inputsForms.filter(({ required }) => required)
+ if (requiredVars.length) {
+ requiredVars.forEach(({ variable, label, type }) => {
+ if (hasEmptyInput)
+ return
+
+ if (fileIsUploading)
+ return
+
+ if (!inputsFormValue?.[variable])
+ hasEmptyInput = label as string
+
+ if ((type === InputVarType.singleFile || type === InputVarType.multiFiles) && inputsFormValue?.[variable]) {
+ const files = inputsFormValue[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
+ }
+ })
+ }
+ if (hasEmptyInput)
+ return true
+
+ if (fileIsUploading)
+ return true
+ return false
+ }, [inputsFormValue, inputsForms])
useEffect(() => {
if (currentChatInstanceRef.current)
@@ -107,42 +143,48 @@ const ChatWrapper = () => {
doSend(question.content, question.message_files, true, isValidGeneratedAnswer(parentAnswer) ? parentAnswer : null)
}, [chatList, doSend])
- const chatNode = useMemo(() => {
- if (inputsForms.length) {
- return (
- <>
-
- {
- !currentConversationId && (
-
- )
- }
-
- )
- }
+ const messageList = useMemo(() => {
+ if (currentConversationId)
+ return chatList
+ return chatList.filter(item => !item.isOpeningStatement)
+ }, [chatList, currentConversationId])
+ const [collapsed, setCollapsed] = useState(!!currentConversationId)
+
+ const chatNode = useMemo(() => {
+ if (!inputsForms.length)
+ return null
+ if (isMobile) {
+ if (!currentConversationId)
+ return
+ return null
+ }
+ else {
+ return
+ }
+ }, [inputsForms.length, isMobile, currentConversationId, collapsed])
+
+ const welcome = useMemo(() => {
+ const welcomeMessage = chatList.find(item => item.isOpeningStatement)
+ if (currentConversationId)
+ return null
+ if (!welcomeMessage)
+ return null
+ if (!collapsed && inputsForms.length > 0)
+ return null
return (
-
+
+
+
{welcomeMessage.content}
+
)
- }, [
- currentConversationId,
- inputsForms,
- currentConversationItem,
- isMobile,
- ])
+ }, [appData?.site.icon, appData?.site.icon_background, appData?.site.icon_type, appData?.site.icon_url, chatList, collapsed, currentConversationId, inputsForms.length])
const answerIcon = (appData?.site && appData.site.use_icon_as_answer_icon)
?
{
{
inputsForm={inputsForms}
onRegenerate={doRegenerate}
onStopResponding={handleStop}
- chatNode={chatNode}
+ chatNode={
+ <>
+ {chatNode}
+ {welcome}
+
+ }
allToolIcons={appMeta?.tool_icons || {}}
onFeedback={handleFeedback}
suggestedQuestions={suggestedQuestions}
@@ -178,6 +225,8 @@ const ChatWrapper = () => {
hideProcessDetail
themeBuilder={themeBuilder}
switchSibling={siblingMessageId => setTargetMessageId(siblingMessageId)}
+ inputDisabled={inputDisabled}
+ isMobile={isMobile}
/>
)
diff --git a/web/app/components/base/chat/chat-with-history/config-panel/form-input.tsx b/web/app/components/base/chat/chat-with-history/config-panel/form-input.tsx
deleted file mode 100644
index 2e6df72bfb..0000000000
--- a/web/app/components/base/chat/chat-with-history/config-panel/form-input.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import { memo } from 'react'
-import Textarea from '@/app/components/base/textarea'
-
-interface InputProps {
- form: any
- value: string
- onChange: (variable: string, value: string) => void
-}
-const FormInput: FC