Update index.tsx

To address bug langgenius#12308, adding a scrolling div to make it able to scroll
PStarH · Jan 6, 2025 · 620b361 · 620b361
1 parent 34519de
commit 620b361
Showing 1 changed file with 52 additions and 50 deletions.
diff --git a/web/app/components/app/configuration/prompt-value-panel/index.tsx b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -103,58 +103,60 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
         </div>
         {!userInputFieldCollapse && promptVariables.length > 0 && (
           <div className='px-4 pt-3 pb-4'>
-            {promptVariables.map(({ key, name, type, options, max_length, required }, index) => (
-              <div
-                key={key}
-                className='mb-4 last-of-type:mb-0'
-              >
-                <div>
-                  <div className='h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold'>
-                    <div className='truncate'>{name || key}</div>
-                    {!required && <span className='text-text-tertiary system-xs-regular'>{t('workflow.panel.optional')}</span>}
-                  </div>
-                  <div className='grow'>
-                    {type === 'string' && (
-                      <Input
-                        value={inputs[key] ? `${inputs[key]}` : ''}
-                        onChange={(e) => { handleInputValueChange(key, e.target.value) }}
-                        placeholder={name}
-                        autoFocus={index === 0}
-                        maxLength={max_length || DEFAULT_VALUE_MAX_LEN}
-                      />
-                    )}
-                    {type === 'paragraph' && (
-                      <Textarea
-                        className='grow h-[120px]'
-                        placeholder={name}
-                        value={inputs[key] ? `${inputs[key]}` : ''}
-                        onChange={(e) => { handleInputValueChange(key, e.target.value) }}
-                      />
-                    )}
-                    {type === 'select' && (
-                      <Select
-                        className='w-full'
-                        defaultValue={inputs[key] as string}
-                        onSelect={(i) => { handleInputValueChange(key, i.value as string) }}
-                        items={(options || []).map(i => ({ name: i, value: i }))}
-                        allowSearch={false}
-                        bgClassName='bg-gray-50'
-                      />
-                    )}
-                    {type === 'number' && (
-                      <Input
-                        type='number'
-                        value={inputs[key] ? `${inputs[key]}` : ''}
-                        onChange={(e) => { handleInputValueChange(key, e.target.value) }}
-                        placeholder={name}
-                        autoFocus={index === 0}
-                        maxLength={max_length || DEFAULT_VALUE_MAX_LEN}
-                      />
-                    )}
+            <div className='overflow-y-auto' style={{ maxHeight: '200px' }}>
+              {promptVariables.map(({ key, name, type, options, max_length, required }, index) => (
+                <div
+                  key={key}
+                  className='mb-4 last-of-type:mb-0'
+                >
+                  <div>
+                    <div className='h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold'>
+                      <div className='truncate'>{name || key}</div>
+                      {!required && <span className='text-text-tertiary system-xs-regular'>{t('workflow.panel.optional')}</span>}
+                    </div>
+                    <div className='grow'>
+                      {type === 'string' && (
+                        <Input
+                          value={inputs[key] ? `${inputs[key]}` : ''}
+                          onChange={(e) => { handleInputValueChange(key, e.target.value) }}
+                          placeholder={name}
+                          autoFocus={index === 0}
+                          maxLength={max_length || DEFAULT_VALUE_MAX_LEN}
+                        />
+                      )}
+                      {type === 'paragraph' && (
+                        <Textarea
+                          className='grow h-[120px]'
+                          placeholder={name}
+                          value={inputs[key] ? `${inputs[key]}` : ''}
+                          onChange={(e) => { handleInputValueChange(key, e.target.value) }}
+                        />
+                      )}
+                      {type === 'select' && (
+                        <Select
+                          className='w-full'
+                          defaultValue={inputs[key] as string}
+                          onSelect={(i) => { handleInputValueChange(key, i.value as string) }}
+                          items={(options || []).map(i => ({ name: i, value: i }))}
+                          allowSearch={false}
+                          bgClassName='bg-gray-50'
+                        />
+                      )}
+                      {type === 'number' && (
+                        <Input
+                          type='number'
+                          value={inputs[key] ? `${inputs[key]}` : ''}
+                          onChange={(e) => { handleInputValueChange(key, e.target.value) }}
+                          placeholder={name}
+                          autoFocus={index === 0}
+                          maxLength={max_length || DEFAULT_VALUE_MAX_LEN}
+                        />
+                      )}
+                    </div>
                   </div>
                 </div>
-              </div>
-            ))}
+              ))}
+            </div>
             {visionConfig?.enabled && (
               <div className="mt-3 xl:flex justify-between">
                 <div className="mr-1 py-2 shrink-0 w-[120px] text-sm text-gray-900">{t('common.imageUploader.imageUpload')}</div>