feat: add number type var

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

@@ -97,10 +97,10 @@ const ConfigModal: FC<IConfigModalProps> = ({
 
           <Field title={t('appDebug.variableConig.fieldType')}>
             <div className='flex space-x-2'>
-              {/* TODO handlePayloadChange(string)  */}
               <SelectTypeItem type={InputVarType.textInput} selected={type === InputVarType.textInput} onClick={() => handlePayloadChange('type')(InputVarType.textInput)} />
               <SelectTypeItem type={InputVarType.paragraph} selected={type === InputVarType.paragraph} onClick={() => handlePayloadChange('type')(InputVarType.paragraph)} />
               <SelectTypeItem type={InputVarType.select} selected={type === InputVarType.select} onClick={() => handlePayloadChange('type')(InputVarType.select)} />
+              <SelectTypeItem type={InputVarType.number} selected={type === InputVarType.number} onClick={() => handlePayloadChange('type')(InputVarType.number)} />
             </div>
           </Field>
 

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

@@ -262,7 +262,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
   const handleConfig = ({ key, type, index, name, config, icon, icon_background }: ExternalDataToolParams) => {
     // setCurrKey(key)
     setCurrIndex(index)
-    if (type !== 'string' && type !== 'paragraph' && type !== 'select') {
+    if (type !== 'string' && type !== 'paragraph' && type !== 'select' && type !== 'number') {
       handleOpenExternalDataToolModal({ key, type, index, name, config, icon, icon_background }, promptVariables)
       return
     }

web/app/components/app/configuration/config-var/input-type-icon.tsx

 'use client'
 import React from 'react'
 import type { FC } from 'react'
-import { Paragraph, TypeSquare } from '@/app/components/base/icons/src/vender/solid/editor'
-import { CheckDone01 } from '@/app/components/base/icons/src/vender/solid/general'
 import { ApiConnection } from '@/app/components/base/icons/src/vender/solid/development'
+import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
+import { InputVarType } from '@/app/components/workflow/types'
 
 export type IInputTypeIconProps = {
   type: 'string' | 'select'
@@ -14,13 +14,16 @@ const IconMap = (type: IInputTypeIconProps['type'], className: string) => {
   const classNames = `w-3.5 h-3.5 ${className}`
   const icons = {
     string: (
-      <TypeSquare className={classNames} />
+      <InputVarTypeIcon type={InputVarType.textInput} className={classNames} />
     ),
     paragraph: (
-      <Paragraph className={classNames} />
+      <InputVarTypeIcon type={InputVarType.paragraph} className={classNames} />
     ),
     select: (
-      <CheckDone01 className={classNames} />
+      <InputVarTypeIcon type={InputVarType.select} className={classNames} />
+    ),
+    number: (
+      <InputVarTypeIcon type={InputVarType.number} className={classNames} />
     ),
     api: (
       <ApiConnection className={classNames} />

web/app/components/app/configuration/config-var/select-type-item/style.module.css

@@ -19,6 +19,7 @@
 }
 
 .item.selected {
+  color: #155EEF;
   border-color: #528BFF;
   background-color: #F5F8FF;
   box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
@@ -30,7 +31,7 @@
   font-weight: 500;
 }
 
-.item.selected.text {
+.item.selected .text {
   color: #155EEF;
 }
 

web/app/components/app/configuration/config-var/select-var-type.tsx

@@ -9,9 +9,10 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Paragraph, TypeSquare } from '@/app/components/base/icons/src/vender/solid/editor'
-import { CheckDone01 } from '@/app/components/base/icons/src/vender/solid/general'
 import { ApiConnection } from '@/app/components/base/icons/src/vender/solid/development'
+import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
+import { InputVarType } from '@/app/components/workflow/types'
+
 type Props = {
   onChange: (value: string) => void
 }
@@ -19,17 +20,18 @@ type Props = {
 type ItemProps = {
   text: string
   value: string
-  Icon: any
+  Icon?: any
+  type?: InputVarType
   onClick: (value: string) => void
 }
 
-const SelectItem: FC<ItemProps> = ({ text, value, Icon, onClick }) => {
+const SelectItem: FC<ItemProps> = ({ text, type, value, Icon, onClick }) => {
   return (
     <div
       className='flex items-center px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
       onClick={() => onClick(value)}
     >
-      <Icon className='w-4 h-4 text-gray-500' />
+      {Icon ? <Icon className='w-4 h-4 text-gray-500' /> : <InputVarTypeIcon type={type!} className='w-4 h-4 text-gray-500' />}
       <div className='ml-2 text-xs text-gray-600 truncate'>{text}</div>
     </div>
   )
@@ -60,9 +62,10 @@ const SelectVarType: FC<Props> = ({
       <PortalToFollowElemContent style={{ zIndex: 1000 }}>
         <div className='bg-white border border-gray-200 shadow-lg rounded-lg min-w-[192px]'>
           <div className='p-1'>
-            <SelectItem Icon={TypeSquare} value='string' text={t('appDebug.variableConig.string')} onClick={handleChange}></SelectItem>
-            <SelectItem Icon={Paragraph} value='paragraph' text={t('appDebug.variableConig.paragraph')} onClick={handleChange}></SelectItem>
-            <SelectItem Icon={CheckDone01} value='select' text={t('appDebug.variableConig.select')} onClick={handleChange}></SelectItem>
+            <SelectItem type={InputVarType.textInput} value='select' text={t('appDebug.variableConig.select')} onClick={handleChange}></SelectItem>
+            <SelectItem type={InputVarType.paragraph} value='paragraph' text={t('appDebug.variableConig.paragraph')} onClick={handleChange}></SelectItem>
+            <SelectItem type={InputVarType.select} value='select' text={t('appDebug.variableConig.select')} onClick={handleChange}></SelectItem>
+            <SelectItem type={InputVarType.number} value='number' text={t('appDebug.variableConig.number')} onClick={handleChange}></SelectItem>
           </div>
           <div className='h-[1px] bg-gray-100'></div>
           <div className='p-1'>

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

@@ -149,7 +149,15 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                             onChange={(e) => { handleInputValueChange(key, e.target.value) }}
                           />
                         )}
-
+                        {type === 'number' && (
+                          <input
+                            className="w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+                            placeholder={`${name}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+                            type="number"
+                            value={inputs[key] ? `${inputs[key]}` : ''}
+                            onChange={(e) => { handleInputValueChange(key, e.target.value) }}
+                          />
+                        )}
                       </div>
                     ))}
                   </div>

web/app/components/share/chat/welcome/index.tsx

@@ -132,6 +132,15 @@ const Welcome: FC<IWelcomeProps> = ({
                 onChange={(e) => { setInputs({ ...inputs, [item.key]: e.target.value }) }}
               />
             )}
+            {item.type === 'number' && (
+              <input
+                type='number'
+                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'}
+              />
+            )}
           </div>
         ))}
       </div>

web/app/components/share/chatbot/welcome/index.tsx

@@ -133,6 +133,15 @@ const Welcome: FC<IWelcomeProps> = ({
                 onChange={(e) => { setInputs({ ...inputs, [item.key]: e.target.value }) }}
               />
             )}
+            {item.type === 'number' && (
+              <input
+                type='number'
+                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'}
+              />
+            )}
           </div>
         ))}
       </div>

web/app/components/share/text-generation/run-once/index.tsx

@@ -76,6 +76,15 @@ const RunOnce: FC<IRunOnceProps> = ({
                     onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }}
                   />
                 )}
+                {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 }) }}
+                  />
+                )}
               </div>
             </div>
           ))}

web/i18n/lang/app-debug.en.ts

@@ -274,6 +274,7 @@ const translation = {
     'text-input': 'Short Text',
     'paragraph': 'Paragraph',
     'select': 'Select',
+    'number': 'Number',
     'notSet': 'Not set, try typing {{input}} in the prefix prompt',
     'stringTitle': 'Form text box options',
     'maxLength': 'Max length',

web/i18n/lang/app-debug.zh.ts

@@ -270,6 +270,7 @@ const translation = {
     'text-input': '文本',
     'paragraph': '段落',
     'select': '下拉选项',
+    'number': '数字',
     'notSet': '未设置，在 Prompt 中输入 {{input}} 试试',
     'stringTitle': '文本框设置',
     'maxLength': '最大长度',

web/utils/model-config.ts

@@ -33,6 +33,15 @@ export const userInputsFormToPromptVariables = (useInputs: UserInputFormItem[] |
         is_context_var,
       })
     }
+    else if (type === 'number') {
+      promptVariables.push({
+        key: content.variable,
+        name: content.label,
+        required: content.required,
+        type,
+        options: [],
+      })
+    }
     else if (type === 'select') {
       promptVariables.push({
         key: content.variable,
@@ -79,6 +88,16 @@ export const promptVariablesToUserInputsForm = (promptVariables: PromptVariable[
         },
       } as any)
     }
+    if (item.type === 'number') {
+      userInputs.push({
+        number: {
+          label: item.name,
+          variable: item.key,
+          required: item.required !== false, // default true
+          default: '',
+        },
+      } as any)
+    }
     else if (item.type === 'select') {
       userInputs.push({
         select: {