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

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

@@ -17,20 +17,25 @@ const InputsFormContent = ({ showTip }: Props) => {
     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'>
@@ -47,8 +52,6 @@ const InputsFormContent = ({ showTip }: Props) => {
               value={inputsFormValue?.[form.variable] || ''}
               onChange={e => handleFormChange(form.variable, e.target.value)}
               placeholder={form.label}
-              readOnly={readonly}
-              disabled={readonly}
             />
           )}
           {form.type === InputVarType.number && (
@@ -57,8 +60,6 @@ const InputsFormContent = ({ showTip }: Props) => {
               value={inputsFormValue?.[form.variable] || ''}
               onChange={e => handleFormChange(form.variable, e.target.value)}
               placeholder={form.label}
-              readOnly={readonly}
-              disabled={readonly}
             />
           )}
           {form.type === InputVarType.paragraph && (
@@ -66,8 +67,6 @@ const InputsFormContent = ({ showTip }: Props) => {
               value={inputsFormValue?.[form.variable] || ''}
               onChange={e => handleFormChange(form.variable, e.target.value)}
               placeholder={form.label}
-              readOnly={readonly}
-              disabled={readonly}
             />
           )}
           {form.type === InputVarType.select && (
@@ -77,7 +76,6 @@ const InputsFormContent = ({ showTip }: Props) => {
               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

@@ -38,7 +38,7 @@ const InputsFormNode = ({
           <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>
@@ -46,7 +46,7 @@ const InputsFormNode = ({
         </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

@@ -40,7 +40,7 @@ const ViewFormDropdown = ({ iconColor }: Props) => {
             <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>