feat: webapp support change inputs after conversation started (#16901)

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

     appPrevChatTree,
     currentConversationId,
     currentConversationItem,
+    currentConversationInputs,
     inputsForms,
     newConversationInputs,
     newConversationInputsRef,
   } = useChat(
     appConfig,
     {
-      inputs: (currentConversationId ? currentConversationItem?.inputs : newConversationInputs) as any,
+      inputs: (currentConversationId ? currentConversationInputs : newConversationInputs) as any,
       inputsForm: inputsForms,
     },
     appPrevChatTree,
     clearChatList,
     setClearChatList,
   )
-  const inputsFormValue = currentConversationId ? currentConversationItem?.inputs : newConversationInputsRef?.current
+  const inputsFormValue = currentConversationId ? currentConversationInputs : newConversationInputsRef?.current
   const inputDisabled = useMemo(() => {
     let hasEmptyInput = ''
     let fileIsUploading = false
     const data: any = {
       query: message,
       files,
-      inputs: currentConversationId ? currentConversationItem?.inputs : newConversationInputs,
+      inputs: currentConversationId ? currentConversationInputs : newConversationInputs,
       conversation_id: currentConversationId,
       parent_message_id: (isRegenerate ? parentAnswer?.id : getLastAnswer(chatList)?.id) || null,
     }
     handleSend,
     currentConversationId,
     currentConversationItem,
+    currentConversationInputs,
     newConversationInputs,
     isInstalledApp,
     appId,
         chatFooterClassName='pb-4'
         chatFooterInnerClassName={`mx-auto w-full max-w-[768px] ${isMobile ? 'px-2' : 'px-4'}`}
         onSend={doSend}
-        inputs={currentConversationId ? currentConversationItem?.inputs as any : newConversationInputs}
+        inputs={currentConversationId ? currentConversationInputs as any : newConversationInputs}
         inputsForm={inputsForms}
         onRegenerate={doRegenerate}
         onStopResponding={handleStop}

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

   setClearChatList: (state: boolean) => void
   isResponding?: boolean
   setIsResponding: (state: boolean) => void,
+  currentConversationInputs: Record<string, any> | null,
+  setCurrentConversationInputs: (v: Record<string, any>) => void,
 }
 
 export const ChatWithHistoryContext = createContext<ChatWithHistoryContextValue>({
   setClearChatList: () => {},
   isResponding: false,
   setIsResponding: () => {},
+  currentConversationInputs: {},
+  setCurrentConversationInputs: () => {},
 })
 export const useChatWithHistoryContext = () => useContext(ChatWithHistoryContext)

web/app/components/base/chat/chat-with-history/header-in-mobile.tsx

               <div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
             </div>
             <div className='p-4'>
-              <InputsFormContent showTip />
+              <InputsFormContent />
             </div>
           </div>
         </div>

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

     return conversationItem
   }, [conversationList, currentConversationId, pinnedConversationList])
 
+  const currentConversationLatestInputs = useMemo(() => {
+    if (!currentConversationId || !appChatListData?.data.length)
+      return {}
+    return appChatListData.data.slice().pop().inputs || {}
+  }, [appChatListData, currentConversationId])
+  const [currentConversationInputs, setCurrentConversationInputs] = useState<Record<string, any>>(currentConversationLatestInputs || {})
+  useEffect(() => {
+    if (currentConversationItem)
+      setCurrentConversationInputs(currentConversationLatestInputs || {})
+  }, [currentConversationItem, currentConversationLatestInputs])
+
   const { notify } = useToastContext()
   const checkInputsRequired = useCallback((silent?: boolean) => {
     let hasEmptyInput = ''
     setClearChatList,
     isResponding,
     setIsResponding,
+    currentConversationInputs,
+    setCurrentConversationInputs,
   }
 }

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

     setClearChatList,
     isResponding,
     setIsResponding,
+    currentConversationInputs,
+    setCurrentConversationInputs,
   } = useChatWithHistory(installedAppInfo)
 
   return (
       setClearChatList,
       isResponding,
       setIsResponding,
+      currentConversationInputs,
+      setCurrentConversationInputs,
     }}>
       <ChatWithHistory className={className} />
     </ChatWithHistoryContext.Provider>

web/app/components/base/chat/chat-with-history/inputs-form/content.tsx

     appParams,
     inputsForms,
     currentConversationId,
-    currentConversationItem,
+    currentConversationInputs,
+    setCurrentConversationInputs,
     newConversationInputs,
     newConversationInputsRef,
     handleNewConversationInputsChange,
   } = useChatWithHistoryContext()
-  const inputsFormValue = currentConversationId ? currentConversationItem?.inputs : newConversationInputs
-  const readonly = !!currentConversationId
+  const inputsFormValue = currentConversationId ? currentConversationInputs : newConversationInputs
 
   const handleFormChange = useCallback((variable: string, value: any) => {
+    setCurrentConversationInputs({
+      ...currentConversationInputs,
+      [variable]: value,
+    })
     handleNewConversationInputsChange({
       ...newConversationInputsRef.current,
       [variable]: value,
     })
-  }, [newConversationInputsRef, handleNewConversationInputsChange])
+  }, [newConversationInputsRef, handleNewConversationInputsChange, currentConversationInputs, setCurrentConversationInputs])
 
   return (
     <div className='space-y-4'>
               value={inputsFormValue?.[form.variable] || ''}
               onChange={e => handleFormChange(form.variable, e.target.value)}
               placeholder={form.label}
-              readOnly={readonly}
-              disabled={readonly}
             />
           )}
           {form.type === InputVarType.number && (
               value={inputsFormValue?.[form.variable] || ''}
               onChange={e => handleFormChange(form.variable, e.target.value)}
               placeholder={form.label}
-              readOnly={readonly}
-              disabled={readonly}
             />
           )}
           {form.type === InputVarType.paragraph && (
               value={inputsFormValue?.[form.variable] || ''}
               onChange={e => handleFormChange(form.variable, e.target.value)}
               placeholder={form.label}
-              readOnly={readonly}
-              disabled={readonly}
             />
           )}
           {form.type === InputVarType.select && (
               items={form.options.map((option: string) => ({ value: option, name: option }))}
               onSelect={item => handleFormChange(form.variable, item.value as string)}
               placeholder={form.label}
-              readonly={readonly}
             />
           )}
           {form.type === InputVarType.singleFile && (

web/app/components/base/chat/chat-with-history/inputs-form/index.tsx

           <Message3Fill className='h-6 w-6 shrink-0' />
           <div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
           {collapsed && (
-            <Button className='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(false)}>{currentConversationId ? t('common.operation.view') : t('common.operation.edit')}</Button>
+            <Button className='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(false)}>{t('common.operation.edit')}</Button>
           )}
           {!collapsed && currentConversationId && (
             <Button className='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(true)}>{t('common.operation.close')}</Button>
         </div>
         {!collapsed && (
           <div className={cn('p-6', isMobile && 'p-4')}>
-            <InputsFormContent showTip={!!currentConversationId} />
+            <InputsFormContent />
           </div>
         )}
         {!collapsed && !currentConversationId && (

web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx

             <div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
           </div>
           <div className='p-6'>
-            <InputsFormContent showTip />
+            <InputsFormContent />
           </div>
         </div>
       </PortalToFollowElemContent>

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

     appPrevChatList,
     currentConversationId,
     currentConversationItem,
+    currentConversationInputs,
     inputsForms,
     newConversationInputs,
     newConversationInputsRef,
   } = useChat(
     appConfig,
     {
-      inputs: (currentConversationId ? currentConversationItem?.inputs : newConversationInputs) as any,
+      inputs: (currentConversationId ? currentConversationInputs : newConversationInputs) as any,
       inputsForm: inputsForms,
     },
     appPrevChatList,
     clearChatList,
     setClearChatList,
   )
-  const inputsFormValue = currentConversationId ? currentConversationItem?.inputs : newConversationInputsRef?.current
+  const inputsFormValue = currentConversationId ? currentConversationInputs : newConversationInputsRef?.current
   const inputDisabled = useMemo(() => {
     let hasEmptyInput = ''
     let fileIsUploading = false
     const data: any = {
       query: message,
       files,
-      inputs: currentConversationId ? currentConversationItem?.inputs : newConversationInputs,
+      inputs: currentConversationId ? currentConversationInputs : newConversationInputs,
       conversation_id: currentConversationId,
       parent_message_id: (isRegenerate ? parentAnswer?.id : getLastAnswer(chatList)?.id) || null,
     }
       chatFooterClassName={cn('pb-4', !isMobile && 'rounded-b-2xl')}
       chatFooterInnerClassName={cn('mx-auto w-full max-w-full px-4', isMobile && 'px-2')}
       onSend={doSend}
-      inputs={currentConversationId ? currentConversationItem?.inputs as any : newConversationInputs}
+      inputs={currentConversationId ? currentConversationInputs as any : newConversationInputs}
       inputsForm={inputsForms}
       onRegenerate={doRegenerate}
       onStopResponding={handleStop}

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

   setClearChatList: (state: boolean) => void
   isResponding?: boolean
   setIsResponding: (state: boolean) => void,
+  currentConversationInputs: Record<string, any> | null,
+  setCurrentConversationInputs: (v: Record<string, any>) => void,
 }
 
 export const EmbeddedChatbotContext = createContext<EmbeddedChatbotContextValue>({
   setClearChatList: () => {},
   isResponding: false,
   setIsResponding: () => {},
+  currentConversationInputs: {},
+  setCurrentConversationInputs: () => {},
 })
 export const useEmbeddedChatbotContext = () => useContext(EmbeddedChatbotContext)

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

     return conversationItem
   }, [conversationList, currentConversationId, pinnedConversationList])
 
+  const currentConversationLatestInputs = useMemo(() => {
+    if (!currentConversationId || !appChatListData?.data.length)
+      return {}
+    return appChatListData.data.slice().pop().inputs || {}
+  }, [appChatListData, currentConversationId])
+  const [currentConversationInputs, setCurrentConversationInputs] = useState<Record<string, any>>(currentConversationLatestInputs || {})
+  useEffect(() => {
+    if (currentConversationItem)
+      setCurrentConversationInputs(currentConversationLatestInputs || {})
+  }, [currentConversationItem, currentConversationLatestInputs])
+
   const { notify } = useToastContext()
   const checkInputsRequired = useCallback((silent?: boolean) => {
     let hasEmptyInput = ''
     setClearChatList,
     isResponding,
     setIsResponding,
+    currentConversationInputs,
+    setCurrentConversationInputs,
   }
 }

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

     setClearChatList,
     isResponding,
     setIsResponding,
+    currentConversationInputs,
+    setCurrentConversationInputs,
   } = useEmbeddedChatbot()
 
   return <EmbeddedChatbotContext.Provider value={{
     setClearChatList,
     isResponding,
     setIsResponding,
+    currentConversationInputs,
+    setCurrentConversationInputs,
   }}>
     <Chatbot />
   </EmbeddedChatbotContext.Provider>

web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx

     appParams,
     inputsForms,
     currentConversationId,
-    currentConversationItem,
+    currentConversationInputs,
+    setCurrentConversationInputs,
     newConversationInputs,
     newConversationInputsRef,
     handleNewConversationInputsChange,
   } = useEmbeddedChatbotContext()
-  const inputsFormValue = currentConversationId ? currentConversationItem?.inputs : newConversationInputs
+  const inputsFormValue = currentConversationId ? currentConversationInputs : newConversationInputs
   const readonly = !!currentConversationId
 
   const handleFormChange = useCallback((variable: string, value: any) => {
+    setCurrentConversationInputs({
+      ...currentConversationInputs,
+      [variable]: value,
+    })
     handleNewConversationInputsChange({
       ...newConversationInputsRef.current,
       [variable]: value,
     })
-  }, [newConversationInputsRef, handleNewConversationInputsChange])
+  }, [newConversationInputsRef, handleNewConversationInputsChange, currentConversationInputs, setCurrentConversationInputs])
 
   return (
     <div className='space-y-4'>
               value={inputsFormValue?.[form.variable] || ''}
               onChange={e => handleFormChange(form.variable, e.target.value)}
               placeholder={form.label}
-              readOnly={readonly}
-              disabled={readonly}
             />
           )}
           {form.type === InputVarType.number && (
               value={inputsFormValue?.[form.variable] || ''}
               onChange={e => handleFormChange(form.variable, e.target.value)}
               placeholder={form.label}
-              readOnly={readonly}
-              disabled={readonly}
             />
           )}
           {form.type === InputVarType.paragraph && (
               value={inputsFormValue?.[form.variable] || ''}
               onChange={e => handleFormChange(form.variable, e.target.value)}
               placeholder={form.label}
-              readOnly={readonly}
-              disabled={readonly}
             />
           )}
           {form.type === InputVarType.select && (
               items={form.options.map((option: string) => ({ value: option, name: option }))}
               onSelect={item => handleFormChange(form.variable, item.value as string)}
               placeholder={form.label}
-              readonly={readonly}
             />
           )}
           {form.type === InputVarType.singleFile && (

web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx

           <Message3Fill className='h-6 w-6 shrink-0' />
           <div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
           {collapsed && (
-            <Button className='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(false)}>{currentConversationId ? t('common.operation.view') : t('common.operation.edit')}</Button>
+            <Button className='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(false)}>{t('common.operation.edit')}</Button>
           )}
           {!collapsed && currentConversationId && (
             <Button className='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(true)}>{t('common.operation.close')}</Button>
         </div>
         {!collapsed && (
           <div className={cn('p-6', isMobile && 'p-4')}>
-            <InputsFormContent showTip={!!currentConversationId} />
+            <InputsFormContent />
           </div>
         )}
         {!collapsed && !currentConversationId && (

web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx

             <div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
           </div>
           <div className='p-6'>
-            <InputsFormContent showTip />
+            <InputsFormContent />
           </div>
         </div>
       </PortalToFollowElemContent>