fix: webapp chat embedded chat

This commit is contained in:
StyleZhang 2024-09-26 15:26:53 +08:00
parent 2a0b30de5c
commit c6691bd297
11 changed files with 49 additions and 12 deletions

View File

@ -70,14 +70,12 @@ const ChatWrapper = () => {
const doSend: OnSend = useCallback((message, files, last_answer) => { const doSend: OnSend = useCallback((message, files, last_answer) => {
const data: any = { const data: any = {
query: message, query: message,
files,
inputs: currentConversationId ? currentConversationItem?.inputs : newConversationInputs, inputs: currentConversationId ? currentConversationItem?.inputs : newConversationInputs,
conversation_id: currentConversationId, conversation_id: currentConversationId,
parent_message_id: last_answer?.id || getLastAnswer(chatListRef.current)?.id || null, parent_message_id: last_answer?.id || getLastAnswer(chatListRef.current)?.id || null,
} }
if (appConfig?.file_upload?.image?.enabled && files?.length)
data.files = files
handleSend( handleSend(
getUrl('chat-messages', isInstalledApp, appId || ''), getUrl('chat-messages', isInstalledApp, appId || ''),
data, data,

View File

@ -1,4 +1,3 @@
import { useCallback } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useChatWithHistoryContext } from '../context' import { useChatWithHistoryContext } from '../context'
import Input from './form-input' import Input from './form-input'
@ -12,16 +11,17 @@ const Form = () => {
appParams, appParams,
inputsForms, inputsForms,
newConversationInputs, newConversationInputs,
newConversationInputsRef,
handleNewConversationInputsChange, handleNewConversationInputsChange,
isMobile, isMobile,
} = useChatWithHistoryContext() } = useChatWithHistoryContext()
const handleFormChange = useCallback((variable: string, value: any) => { const handleFormChange = (variable: string, value: any) => {
handleNewConversationInputsChange({ handleNewConversationInputsChange({
...newConversationInputs, ...newConversationInputsRef.current,
[variable]: value, [variable]: value,
}) })
}, [newConversationInputs, handleNewConversationInputsChange]) }
const renderField = (form: any) => { const renderField = (form: any) => {
const { const {
@ -51,6 +51,20 @@ const Form = () => {
/> />
) )
} }
if (form.type === InputVarType.singleFile) {
return (
<FileUploaderInAttachmentWrapper
value={newConversationInputs[variable] ? [newConversationInputs[variable]] : []}
onChange={files => handleFormChange(variable, files[0])}
fileConfig={{
allowed_file_types: appParams?.file_upload?.allowed_file_types,
allowed_file_extensions: appParams?.file_upload?.allowed_file_extensions,
allowed_file_upload_methods: appParams?.file_upload?.allowed_file_upload_methods,
number_limits: 1,
}}
/>
)
}
if (form.type === InputVarType.multiFiles) { if (form.type === InputVarType.multiFiles) {
return ( return (
<FileUploaderInAttachmentWrapper <FileUploaderInAttachmentWrapper

View File

@ -30,6 +30,7 @@ export type ChatWithHistoryContextValue = {
conversationList: AppConversationData['data'] conversationList: AppConversationData['data']
showConfigPanelBeforeChat: boolean showConfigPanelBeforeChat: boolean
newConversationInputs: Record<string, any> newConversationInputs: Record<string, any>
newConversationInputsRef: RefObject<Record<string, any>>
handleNewConversationInputsChange: (v: Record<string, any>) => void handleNewConversationInputsChange: (v: Record<string, any>) => void
inputsForms: any[] inputsForms: any[]
handleNewConversation: () => void handleNewConversation: () => void
@ -57,6 +58,7 @@ export const ChatWithHistoryContext = createContext<ChatWithHistoryContextValue>
conversationList: [], conversationList: [],
showConfigPanelBeforeChat: false, showConfigPanelBeforeChat: false,
newConversationInputs: {}, newConversationInputs: {},
newConversationInputsRef: { current: {} },
handleNewConversationInputsChange: () => {}, handleNewConversationInputsChange: () => {},
inputsForms: [], inputsForms: [],
handleNewConversation: () => {}, handleNewConversation: () => {},

View File

@ -391,6 +391,7 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
setShowConfigPanelBeforeChat, setShowConfigPanelBeforeChat,
setShowNewConversationItemInList, setShowNewConversationItemInList,
newConversationInputs, newConversationInputs,
newConversationInputsRef,
handleNewConversationInputsChange, handleNewConversationInputsChange,
inputsForms, inputsForms,
handleNewConversation, handleNewConversation,

View File

@ -125,6 +125,7 @@ const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
conversationList, conversationList,
showConfigPanelBeforeChat, showConfigPanelBeforeChat,
newConversationInputs, newConversationInputs,
newConversationInputsRef,
handleNewConversationInputsChange, handleNewConversationInputsChange,
inputsForms, inputsForms,
handleNewConversation, handleNewConversation,
@ -158,6 +159,7 @@ const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
conversationList, conversationList,
showConfigPanelBeforeChat, showConfigPanelBeforeChat,
newConversationInputs, newConversationInputs,
newConversationInputsRef,
handleNewConversationInputsChange, handleNewConversationInputsChange,
inputsForms, inputsForms,
handleNewConversation, handleNewConversation,

View File

@ -14,6 +14,8 @@ export const useCheckInputsForms = () => {
let fileIsUploading = false let fileIsUploading = false
const requiredVars = inputsForm.filter(({ required }) => required) const requiredVars = inputsForm.filter(({ required }) => required)
console.log(inputs, inputsForm, 'inputs, inputsForm')
if (requiredVars?.length) { if (requiredVars?.length) {
requiredVars.forEach(({ variable, label, type }) => { requiredVars.forEach(({ variable, label, type }) => {
if (hasEmptyInput) if (hasEmptyInput)
@ -42,7 +44,7 @@ export const useCheckInputsForms = () => {
return return
} }
return true return false
}, [notify, t]) }, [notify, t])
return { return {

View File

@ -72,14 +72,12 @@ const ChatWrapper = () => {
const doSend: OnSend = useCallback((message, files, last_answer) => { const doSend: OnSend = useCallback((message, files, last_answer) => {
const data: any = { const data: any = {
query: message, query: message,
files,
inputs: currentConversationId ? currentConversationItem?.inputs : newConversationInputs, inputs: currentConversationId ? currentConversationItem?.inputs : newConversationInputs,
conversation_id: currentConversationId, conversation_id: currentConversationId,
parent_message_id: last_answer?.id || getLastAnswer(chatListRef.current)?.id || null, parent_message_id: last_answer?.id || getLastAnswer(chatListRef.current)?.id || null,
} }
if (appConfig?.file_upload?.image?.enabled && files?.length)
data.files = files
handleSend( handleSend(
getUrl('chat-messages', isInstalledApp, appId || ''), getUrl('chat-messages', isInstalledApp, appId || ''),
data, data,

View File

@ -12,13 +12,14 @@ const Form = () => {
appParams, appParams,
inputsForms, inputsForms,
newConversationInputs, newConversationInputs,
newConversationInputsRef,
handleNewConversationInputsChange, handleNewConversationInputsChange,
isMobile, isMobile,
} = useEmbeddedChatbotContext() } = useEmbeddedChatbotContext()
const handleFormChange = useCallback((variable: string, value: any) => { const handleFormChange = useCallback((variable: string, value: any) => {
handleNewConversationInputsChange({ handleNewConversationInputsChange({
...newConversationInputs, ...newConversationInputsRef.current,
[variable]: value, [variable]: value,
}) })
}, [newConversationInputs, handleNewConversationInputsChange]) }, [newConversationInputs, handleNewConversationInputsChange])
@ -63,6 +64,20 @@ const Form = () => {
/> />
) )
} }
if (form.type === InputVarType.singleFile) {
return (
<FileUploaderInAttachmentWrapper
value={newConversationInputs[variable] ? [newConversationInputs[variable]] : []}
onChange={files => handleFormChange(variable, files[0])}
fileConfig={{
allowed_file_types: appParams?.file_upload?.allowed_file_types,
allowed_file_extensions: appParams?.file_upload?.allowed_file_extensions,
allowed_file_upload_methods: appParams?.file_upload?.allowed_file_upload_methods,
number_limits: 1,
}}
/>
)
}
if (form.type === InputVarType.multiFiles) { if (form.type === InputVarType.multiFiles) {
return ( return (
<FileUploaderInAttachmentWrapper <FileUploaderInAttachmentWrapper

View File

@ -29,6 +29,7 @@ export type EmbeddedChatbotContextValue = {
conversationList: AppConversationData['data'] conversationList: AppConversationData['data']
showConfigPanelBeforeChat: boolean showConfigPanelBeforeChat: boolean
newConversationInputs: Record<string, any> newConversationInputs: Record<string, any>
newConversationInputsRef: RefObject<Record<string, any>>
handleNewConversationInputsChange: (v: Record<string, any>) => void handleNewConversationInputsChange: (v: Record<string, any>) => void
inputsForms: any[] inputsForms: any[]
handleNewConversation: () => void handleNewConversation: () => void
@ -51,6 +52,7 @@ export const EmbeddedChatbotContext = createContext<EmbeddedChatbotContextValue>
conversationList: [], conversationList: [],
showConfigPanelBeforeChat: false, showConfigPanelBeforeChat: false,
newConversationInputs: {}, newConversationInputs: {},
newConversationInputsRef: { current: {} },
handleNewConversationInputsChange: () => {}, handleNewConversationInputsChange: () => {},
inputsForms: [], inputsForms: [],
handleNewConversation: () => {}, handleNewConversation: () => {},

View File

@ -292,6 +292,7 @@ export const useEmbeddedChatbot = () => {
setShowConfigPanelBeforeChat, setShowConfigPanelBeforeChat,
setShowNewConversationItemInList, setShowNewConversationItemInList,
newConversationInputs, newConversationInputs,
newConversationInputsRef,
handleNewConversationInputsChange, handleNewConversationInputsChange,
inputsForms, inputsForms,
handleNewConversation, handleNewConversation,

View File

@ -124,6 +124,7 @@ const EmbeddedChatbotWrapper = () => {
conversationList, conversationList,
showConfigPanelBeforeChat, showConfigPanelBeforeChat,
newConversationInputs, newConversationInputs,
newConversationInputsRef,
handleNewConversationInputsChange, handleNewConversationInputsChange,
inputsForms, inputsForms,
handleNewConversation, handleNewConversation,
@ -151,6 +152,7 @@ const EmbeddedChatbotWrapper = () => {
conversationList, conversationList,
showConfigPanelBeforeChat, showConfigPanelBeforeChat,
newConversationInputs, newConversationInputs,
newConversationInputsRef,
handleNewConversationInputsChange, handleNewConversationInputsChange,
inputsForms, inputsForms,
handleNewConversation, handleNewConversation,