Feat/application config user input field collapse (#643)

web/app/components/app/configuration/prompt-value-panel/index.tsx

 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import {
@@ -13,6 +13,7 @@ import { AppType } from '@/types/app'
 import Select from '@/app/components/base/select'
 import { DEFAULT_VALUE_MAX_LEN } from '@/config'
 import Button from '@/app/components/base/button'
+import { ChevronDown, ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 
 export type IPromptValuePanelProps = {
   appType: AppType
@@ -37,6 +38,8 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
 }) => {
   const { t } = useTranslation()
   const { modelConfig, inputs, setInputs } = useContext(ConfigContext)
+  const [promptPreviewCollapse, setPromptPreviewCollapse] = useState(false)
+  const [userInputFieldCollapse, setUserInputFieldCollapse] = useState(false)
   const promptTemplate = modelConfig.configs.prompt_template
   const promptVariables = modelConfig.configs.prompt_variables.filter(({ key, name }) => {
     return key && key?.trim() && name && name?.trim()
@@ -63,12 +66,19 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
   }
 
   const promptPreview = (
-    <div className='pt-3 pb-4 rounded-t-xl bg-indigo-25'>
+    <div className='py-3 rounded-t-xl bg-indigo-25'>
       <div className="px-4">
-        <div className="flex items-center space-x-1">
+        <div className="flex items-center space-x-1 cursor-pointer" onClick={() => setPromptPreviewCollapse(!promptPreviewCollapse)}>
           {starIcon}
           <div className="text-xs font-medium text-indigo-600 uppercase">{t('appDebug.inputs.previewTitle')}</div>
+          {
+            promptPreviewCollapse
+              ? <ChevronRight className='w-3 h-3 text-gray-700' />
+              : <ChevronDown className='w-3 h-3 text-gray-700' />
+          }
         </div>
+        {
+          !promptPreviewCollapse && (
             <div className='mt-2  leading-normal'>
               {
                 (promptTemplate && promptTemplate?.trim())
@@ -86,26 +96,38 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                   )
               }
             </div>
+          )
+        }
       </div>
     </div>
   )
 
   return (
-    <div className="pb-5 border border-gray-200 bg-white rounded-xl" style={{
+    <div className="pb-3 border border-gray-200 bg-white rounded-xl" style={{
       boxShadow: '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
     }}>
       {promptPreview}
 
-      <div className="mt-5 px-4">
-        <div className='mb-4 '>
-          <div className='flex items-center space-x-1'>
+      <div className={'mt-3 px-4 bg-white'}>
+        <div className={
+          `${!userInputFieldCollapse && 'mb-2'}`
+        }>
+          <div className='flex items-center space-x-1 cursor-pointer' onClick={() => setUserInputFieldCollapse(!userInputFieldCollapse)}>
             <div className='flex items-center justify-center w-4 h-4'><VarIcon /></div>
-            <div className='text-sm font-semibold text-gray-800'>{t('appDebug.inputs.userInputField')}</div>
+            <div className='text-xs font-medium text-gray-800'>{t('appDebug.inputs.userInputField')}</div>
+            {
+              userInputFieldCollapse
+                ? <ChevronRight className='w-3 h-3 text-gray-700' />
+                : <ChevronDown className='w-3 h-3 text-gray-700' />
+            }
           </div>
-          {appType === AppType.completion && promptVariables.length > 0 && (
+          {appType === AppType.completion && promptVariables.length > 0 && !userInputFieldCollapse && (
             <div className="mt-1 text-xs leading-normal text-gray-500">{t('appDebug.inputs.completionVarTip')}</div>
           )}
         </div>
+        {
+          !userInputFieldCollapse && (
+            <>
               {
                 promptVariables.length > 0
                   ? (
@@ -144,12 +166,15 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                     <div className='text-xs text-gray-500'>{t('appDebug.inputs.noVar')}</div>
                   )
               }
+            </>
+          )
+        }
       </div>
 
       {
         appType === AppType.completion && (
           <div className='px-4'>
-            <div className="mt-5 border-b border-gray-100"></div>
+            <div className="mt-3 border-b border-gray-100"></div>
             <div className="mt-4">
               <div>
                 <div className="text-[13px] text-gray-900 font-medium">{t('appDebug.inputs.queryTitle')}</div>