fix: webapp variable input & app unavailable status (#2405)

web/app/components/base/chat/chat-with-history/config-panel/form-input.tsx

@@ -0,0 +1,46 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { memo } from 'react'
+
+type InputProps = {
+  form: any
+  value: string
+  onChange: (variable: string, value: string) => void
+}
+const FormInput: FC<InputProps> = ({
+  form,
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const {
+    type,
+    label,
+    required,
+    max_length,
+    variable,
+  } = form
+
+  if (type === 'paragraph') {
+    return (
+      <textarea
+        value={value}
+        className='grow h-[104px] rounded-lg bg-gray-100 px-2.5 py-2 outline-none appearance-none resize-none'
+        onChange={e => onChange(variable, e.target.value)}
+        placeholder={`${label}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+      />
+    )
+  }
+
+  return (
+    <input
+      className='grow h-9 rounded-lg bg-gray-100 px-2.5 outline-none appearance-none'
+      value={value || ''}
+      maxLength={max_length}
+      onChange={e => onChange(variable, e.target.value)}
+      placeholder={`${label}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+    />
+  )
+}
+
+export default memo(FormInput)

web/app/components/base/chat/chat-with-history/config-panel/form.tsx

@@ -1,5 +1,7 @@
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useChatWithHistoryContext } from '../context'
+import Input from './form-input'
 import { PortalSelect } from '@/app/components/base/select'
 
 const Form = () => {
@@ -11,43 +13,31 @@ const Form = () => {
     isMobile,
   } = useChatWithHistoryContext()
 
-  const handleFormChange = (variable: string, value: string) => {
+  const handleFormChange = useCallback((variable: string, value: string) => {
     handleNewConversationInputsChange({
       ...newConversationInputs,
       [variable]: value,
     })
-  }
+  }, [newConversationInputs, handleNewConversationInputsChange])
 
   const renderField = (form: any) => {
     const {
       label,
       required,
-      max_length,
       variable,
       options,
     } = form
 
-    if (form.type === 'text-input') {
+    if (form.type === 'text-input' || form.type === 'paragraph') {
       return (
-        <input
-          className='grow h-9 rounded-lg bg-gray-100 px-2.5 outline-none appearance-none'
-          value={newConversationInputs[variable] || ''}
-          maxLength={max_length}
-          onChange={e => handleFormChange(variable, e.target.value)}
-          placeholder={`${label}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
-        />
-      )
-    }
-    if (form.type === 'paragraph') {
-      return (
-        <textarea
+        <Input
+          form={form}
           value={newConversationInputs[variable]}
-          className='grow h-[104px] rounded-lg bg-gray-100 px-2.5 py-2 outline-none appearance-none resize-none'
-          onChange={e => handleFormChange(variable, e.target.value)}
-          placeholder={`${label}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+          onChange={handleFormChange}
         />
       )
     }
+
     return (
       <PortalSelect
         popupClassName='w-[200px]'