feat: webapp support json field

web/app/components/app/configuration/config-var/config-modal/index.tsx

@@ -25,6 +25,7 @@ import { SimpleSelect } from '@/app/components/base/select'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { jsonConfigPlaceHolder, jsonObjectWrap } from './config'
+import { useStore as useAppStore } from '@/app/components/app/store'
 
 const TEXT_MAX_LENGTH = 256
 
@@ -51,6 +52,9 @@ const ConfigModal: FC<IConfigModalProps> = ({
   const [tempPayload, setTempPayload] = useState<InputVar>(payload || getNewVarInWorkflow('') as any)
   const { type, label, variable, options, max_length } = tempPayload
   const modalRef = useRef<HTMLDivElement>(null)
+  const appDetail = useAppStore(state => state.appDetail)
+  const isBasicApp = appDetail?.mode !== 'advanced-chat' && appDetail?.mode !== 'workflow'
+
   const jsonSchemaStr = useMemo(() => {
     const isJsonObject = type === InputVarType.jsonObject
     if (!isJsonObject || !tempPayload.json_schema)
@@ -138,10 +142,10 @@ const ConfigModal: FC<IConfigModalProps> = ({
         value: InputVarType.multiFiles,
       },
     ] : []),
-    {
+    ...(!isBasicApp ? [{
       name: t('appDebug.variableConfig.json'),
       value: InputVarType.jsonObject,
-    },
+    }] : []),
   ]
 
   const handleTypeChange = useCallback((item: SelectItem) => {

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

@@ -253,6 +253,13 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
         }
       }
 
+      if (item.json_object) {
+        return {
+          ...item.json_object,
+          type: 'json_object',
+        }
+      }
+
       let value = initInputs[item['text-input'].variable]
       if (value && item['text-input'].max_length && value.length > item['text-input'].max_length)
         value = value.slice(0, item['text-input'].max_length)

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

@@ -7,6 +7,8 @@ import { PortalSelect } from '@/app/components/base/select'
 import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
 import { InputVarType } from '@/app/components/workflow/types'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 
 type Props = {
   showTip?: boolean
@@ -116,6 +118,18 @@ const InputsFormContent = ({ showTip }: Props) => {
               }}
             />
           )}
+          {form.type === InputVarType.jsonObject && (
+            <CodeEditor
+              language={CodeLanguage.json}
+              value={inputsFormValue?.[form.variable] || ''}
+              onChange={v => handleFormChange(form.variable, v)}
+              noWrapper
+              className='bg h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1'
+              placeholder={
+                <div className='whitespace-pre'>{form.json_schema}</div>
+              }
+            />
+          )}
         </div>
       ))}
       {showTip && (

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

@@ -225,6 +225,13 @@ export const useEmbeddedChatbot = () => {
         }
       }
 
+      if (item.json_object) {
+        return {
+          ...item.json_object,
+          type: 'json_object',
+        }
+      }
+
       let value = initInputs[item['text-input'].variable]
       if (value && item['text-input'].max_length && value.length > item['text-input'].max_length)
         value = value.slice(0, item['text-input'].max_length)

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

@@ -7,6 +7,8 @@ import { PortalSelect } from '@/app/components/base/select'
 import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
 import { InputVarType } from '@/app/components/workflow/types'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 
 type Props = {
   showTip?: boolean
@@ -116,6 +118,18 @@ const InputsFormContent = ({ showTip }: Props) => {
               }}
             />
           )}
+          {form.type === InputVarType.jsonObject && (
+            <CodeEditor
+              language={CodeLanguage.json}
+              value={inputsFormValue?.[form.variable] || ''}
+              onChange={v => handleFormChange(form.variable, v)}
+              noWrapper
+              className='bg h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1'
+              placeholder={
+                <div className='whitespace-pre'>{form.json_schema}</div>
+              }
+            />
+          )}
         </div>
       ))}
       {showTip && (

web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx

@@ -110,6 +110,13 @@ const AppInputsPanel = ({
           }
         }
 
+        if (item.json_object) {
+          return {
+            ...item.json_object,
+            type: 'json_object',
+          }
+        }
+
         return {
           ...item['text-input'],
           type: 'text-input',