Merge pull request langgenius#27 from langgenius/feat/support-paragraph-type

feat: support var type paragraph

Author: iamjoel

app/components/welcome/index.tsx

@@ -92,10 +92,10 @@ const Welcome: FC<IWelcomeProps> = ({
     return (
       <div className='space-y-3'>
         {promptConfig.prompt_variables.map(item => (
-          <div className='tablet:flex tablet:!h-9 mobile:space-y-2 tablet:space-y-0 mobile:text-xs tablet:text-sm' key={item.key}>
-            <label className={`flex-shrink-0 flex items-center mobile:text-gray-700 tablet:text-gray-900 mobile:font-medium pc:font-normal ${s.formLabel}`}>{item.name}</label>
+          <div className='tablet:flex items-start mobile:space-y-2 tablet:space-y-0 mobile:text-xs tablet:text-sm' key={item.key}>
+            <label className={`flex-shrink-0 flex items-center tablet:leading-9 mobile:text-gray-700 tablet:text-gray-900 mobile:font-medium pc:font-normal ${s.formLabel}`}>{item.name}</label>
             {item.type === 'select'
-              ? (
+              && (
                 <Select
                   className='w-full'
                   defaultValue={inputs?.[item.key]}
@@ -104,16 +104,24 @@ const Welcome: FC<IWelcomeProps> = ({
                   allowSearch={false}
                   bgClassName='bg-gray-50'
                 />
-              )
-              : (
-                <input
-                  placeholder={item.name}
-                  value={inputs?.[item.key] || ''}
-                  onChange={(e) => { setInputs({ ...inputs, [item.key]: e.target.value }) }}
-                  className={'w-full flex-grow py-2 pl-3 pr-3 box-border rounded-lg bg-gray-50'}
-                  maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN}
-                />
               )}
+            {item.type === 'string' && (
+              <input
+                placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+                value={inputs?.[item.key] || ''}
+                onChange={(e) => { setInputs({ ...inputs, [item.key]: e.target.value }) }}
+                className={'w-full flex-grow py-2 pl-3 pr-3 box-border rounded-lg bg-gray-50'}
+                maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN}
+              />
+            )}
+            {item.type === 'paragraph' && (
+              <textarea
+                className="w-full h-[104px] flex-grow py-2 pl-3 pr-3 box-border rounded-lg bg-gray-50"
+                placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+                value={inputs?.[item.key] || ''}
+                onChange={(e) => { setInputs({ ...inputs, [item.key]: e.target.value }) }}
+              />
+            )}
           </div>
         ))}
       </div>

types/app.ts

@@ -3,7 +3,7 @@ import type { Locale } from '@/i18n'
 export type PromptVariable = {
   key: string
   name: string
-  type: 'string' | 'number' | 'select'
+  type: string
   default?: string | number
   options?: string[]
   max_length?: number

utils/prompt.ts

@@ -16,14 +16,22 @@ export const userInputsFormToPromptVariables = (useInputs: UserInputFormItem[] |
     return []
   const promptVariables: PromptVariable[] = []
   useInputs.forEach((item: any) => {
-    const type = item['text-input'] ? 'string' : 'select'
-    const content = type === 'string' ? item['text-input'] : item.select
-    if (type === 'string') {
+    const isParagraph = !!item.paragraph
+    const [type, content] = (() => {
+      if (isParagraph)
+        return ['paragraph', item.paragraph]
+
+      if (item['text-input'])
+        return ['string', item['text-input']]
+
+      return ['select', item.select]
+    })()
+    if (type === 'string' || type === 'paragraph') {
       promptVariables.push({
         key: content.variable,
         name: content.label,
         required: content.required,
-        type: 'string',
+        type,
         max_length: content.max_length,
         options: [],
       })