500 Error when workflow uses a number variable #10

Closed
opened 2026-02-16 06:16:23 -05:00 by yindo · 1 comment
Owner

Originally created by @sonicviz on GitHub (Aug 7, 2024).

Originally assigned to: @iamjoel on GitHub.

ref: https://discord.com/channels/1082486657678311454/1269851206180929566

If you have an input field of type number
image
your API will result in a 500 error when trying to parse it
image

This is because the code only parses string, select, and paragraph type inputs.

Solution is two parts.

  • 1 utils\prompt.ts
    Add number check here
  useInputs.forEach((item: any) => {
    console.log('1 userInputsFormToPromptVariables item: ')
    console.log(item)
    const isParagraph = !!item.paragraph
    const [type, content] = (() => {
      if (isParagraph)
        return ['paragraph', item.paragraph]

      if (item['text-input'])
        return ['string', item['text-input']]

> if (item['number'])
>         return ['number', item['number']]

      return ['select', item.select]
    })()
  • 2 app\components\run-once\index.tsx
    Add input of type number here
          {promptConfig.prompt_variables.map(item => (
            <div className='w-full mt-4' key={item.key}>
              <label className='text-gray-900 text-sm font-medium'>{item.name}</label>
              <div className='mt-2'>
                {item.type === 'select' && (
                  <Select
                    className='w-full'
                    defaultValue={inputs[item.key]}
                    onSelect={(i) => { onInputsChange({ ...inputs, [item.key]: i.value }) }}
                    items={(item.options || []).map(i => ({ name: i, value: i }))}
                    allowSearch={false}
                    bgClassName='bg-gray-50'
                  />
                )}
                {item.type === 'string' && (
                  <input
                    type="text"
                    className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
                    placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
                    value={inputs[item.key]}
                    onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }}
                    maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN}
                  />
                )}

>                 {item.type === 'number' && (
>                   <input
>                     type="number"
>                     className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
>                     placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
>                     value={inputs[item.key]}
>                     onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }}
>                   />
>                 )}

                {item.type === 'paragraph' && (
Originally created by @sonicviz on GitHub (Aug 7, 2024). Originally assigned to: @iamjoel on GitHub. ref: https://discord.com/channels/1082486657678311454/1269851206180929566 If you have an input field of type number ![image](https://github.com/user-attachments/assets/7d6e723c-38de-4aa5-9fc6-acdb67e45f64) your API will result in a 500 error when trying to parse it ![image](https://github.com/user-attachments/assets/1c9d5815-d5d9-44c7-b80f-82e8de9b6c4a) This is because the code only parses string, select, and paragraph type inputs. Solution is two parts. - 1 utils\prompt.ts Add number check here ``` useInputs.forEach((item: any) => { console.log('1 userInputsFormToPromptVariables item: ') console.log(item) const isParagraph = !!item.paragraph const [type, content] = (() => { if (isParagraph) return ['paragraph', item.paragraph] if (item['text-input']) return ['string', item['text-input']] > if (item['number']) > return ['number', item['number']] return ['select', item.select] })() ``` - 2 app\components\run-once\index.tsx Add input of type number here ``` {promptConfig.prompt_variables.map(item => ( <div className='w-full mt-4' key={item.key}> <label className='text-gray-900 text-sm font-medium'>{item.name}</label> <div className='mt-2'> {item.type === 'select' && ( <Select className='w-full' defaultValue={inputs[item.key]} onSelect={(i) => { onInputsChange({ ...inputs, [item.key]: i.value }) }} items={(item.options || []).map(i => ({ name: i, value: i }))} allowSearch={false} bgClassName='bg-gray-50' /> )} {item.type === 'string' && ( <input type="text" className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 " placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`} value={inputs[item.key]} onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }} maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN} /> )} > {item.type === 'number' && ( > <input > type="number" > className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 " > placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`} > value={inputs[item.key]} > onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }} > /> > )} {item.type === 'paragraph' && ( ```
yindo closed this issue 2026-02-16 06:16:23 -05:00
Author
Owner

@iamjoel commented on GitHub (Aug 7, 2024):

Fixed by https://github.com/langgenius/webapp-text-generator/pull/28

@iamjoel commented on GitHub (Aug 7, 2024): Fixed by https://github.com/langgenius/webapp-text-generator/pull/28
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/webapp-text-generator#10