Skip to content

D
dify
Commit 508ea8bc authored by Joel's avatar Joel
Browse files
Options

feat: add number type var

parent 077de17c
Show whitespace changes
Inline Side-by-side
Showing with 83 additions and 76 deletions
web/app/components/app/configuration/config-var/config-modal/index.tsx
View file @ 508ea8bc
...@@ -97,10 +97,10 @@ const ConfigModal: FC<IConfigModalProps> = ({ ...@@ -97,10 +97,10 @@ const ConfigModal: FC<IConfigModalProps> = ({
<Field title={t('appDebug.variableConig.fieldType')}> <Field title={t('appDebug.variableConig.fieldType')}>
<div className='flex space-x-2'> <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.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.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.select} selected={type === InputVarType.select} onClick={() => handlePayloadChange('type')(InputVarType.select)} />
<SelectTypeItem type={InputVarType.number} selected={type === InputVarType.number} onClick={() => handlePayloadChange('type')(InputVarType.number)} />
</div> </div>
</Field> </Field>
......
web/app/components/app/configuration/config-var/index.tsx
View file @ 508ea8bc
...@@ -262,7 +262,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar ...@@ -262,7 +262,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
const handleConfig = ({ key, type, index, name, config, icon, icon_background }: ExternalDataToolParams) => { const handleConfig = ({ key, type, index, name, config, icon, icon_background }: ExternalDataToolParams) => {
// setCurrKey(key) // setCurrKey(key)
setCurrIndex(index) 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) handleOpenExternalDataToolModal({ key, type, index, name, config, icon, icon_background }, promptVariables)
return return
} }
......
web/app/components/app/configuration/config-var/input-type-icon.tsx
View file @ 508ea8bc
'use client' 'use client'
import React from 'react' import React from 'react'
import type { FC } 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 { 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 = { export type IInputTypeIconProps = {
type: 'string' | 'select' type: 'string' | 'select'
...@@ -14,13 +14,16 @@ const IconMap = (type: IInputTypeIconProps['type'], className: string) => { ...@@ -14,13 +14,16 @@ const IconMap = (type: IInputTypeIconProps['type'], className: string) => {
const classNames = `w-3.5 h-3.5 ${className}` const classNames = `w-3.5 h-3.5 ${className}`
const icons = { const icons = {
string: ( string: (
<TypeSquare className={classNames} /> <InputVarTypeIcon type={InputVarType.textInput} className={classNames} />
), ),
paragraph: ( paragraph: (
<Paragraph className={classNames} /> <InputVarTypeIcon type={InputVarType.paragraph} className={classNames} />
), ),
select: ( select: (
<CheckDone01 className={classNames} /> <InputVarTypeIcon type={InputVarType.select} className={classNames} />
),
number: (
<InputVarTypeIcon type={InputVarType.number} className={classNames} />
), ),
api: ( api: (
<ApiConnection className={classNames} /> <ApiConnection className={classNames} />
......
web/app/components/app/configuration/config-var/select-type-item/index.tsx
View file @ 508ea8bc
...@@ -4,70 +4,14 @@ import React from 'react' ...@@ -4,70 +4,14 @@ import React from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import cn from 'classnames' import cn from 'classnames'
import s from './style.module.css' import s from './style.module.css'
import { InputVarType } from '@/app/components/workflow/types' import type { InputVarType } from '@/app/components/workflow/types'
import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
export type ISelectTypeItemProps = { export type ISelectTypeItemProps = {
type: InputVarType type: InputVarType
selected: boolean selected: boolean
onClick: () => void onClick: () => void
} }
const Icon = ({ type, selected }: Partial<ISelectTypeItemProps>) => {
switch (type) {
case InputVarType.select:
return selected
? (
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M8.89233 4.66669H3.77428C3.42285 4.66668 3.11966 4.66667 2.86995 4.68707C2.60639 4.7086 2.34424 4.75615 2.09199 4.88468C1.71567 5.07642 1.4097 5.38238 1.21796 5.75871C1.08943 6.01096 1.04188 6.27311 1.02035 6.53667C0.999949 6.78638 0.999959 7.08954 0.99997 7.44096V12.5591C0.999959 12.9105 0.999949 13.2137 1.02035 13.4634C1.04188 13.7269 1.08943 13.9891 1.21796 14.2413C1.4097 14.6177 1.71567 14.9236 2.09199 15.1154C2.34424 15.2439 2.60639 15.2914 2.86995 15.313C3.11965 15.3334 3.4228 15.3334 3.77421 15.3334H8.89232C9.24372 15.3334 9.54696 15.3334 9.79666 15.313C10.0602 15.2914 10.3224 15.2439 10.5746 15.1154C10.9509 14.9236 11.2569 14.6177 11.4487 14.2413C11.5772 13.9891 11.6247 13.7269 11.6463 13.4634C11.6667 13.2137 11.6667 12.9105 11.6666 12.559V7.44101C11.6667 7.08957 11.6667 6.78639 11.6463 6.53667C11.6247 6.27311 11.5772 6.01096 11.4487 5.75871C11.2569 5.38238 10.9509 5.07642 10.5746 4.88468C10.3224 4.75615 10.0602 4.7086 9.79666 4.68707C9.54695 4.66667 9.24376 4.66668 8.89233 4.66669ZM9.13804 8.80476C9.39839 8.54441 9.39839 8.1223 9.13804 7.86195C8.87769 7.6016 8.45558 7.6016 8.19523 7.86195L5.66664 10.3905L4.80471 9.52862C4.54436 9.26827 4.12225 9.26827 3.8619 9.52862C3.60155 9.78897 3.60155 10.2111 3.8619 10.4714L5.19523 11.8048C5.45558 12.0651 5.87769 12.0651 6.13804 11.8048L9.13804 8.80476Z" fill="#155EEF" />
<path d="M12.8923 0.666688H7.77427C7.42285 0.666676 7.11966 0.666666 6.86995 0.687068C6.60639 0.708602 6.34424 0.756146 6.09199 0.884676C5.71567 1.07642 5.40971 1.38238 5.21796 1.75871C5.08943 2.01096 5.04188 2.27311 5.02035 2.53667C5.00206 2.76053 5.00018 3.02734 4.99999 3.33337L8.92055 3.33336C9.2463 3.33329 9.59951 3.3332 9.90523 3.35818C10.2512 3.38645 10.7084 3.45642 11.1799 3.69668C11.8071 4.01626 12.3171 4.5262 12.6367 5.1534C12.8769 5.62495 12.9469 6.08209 12.9752 6.42811C13.0001 6.73384 13.0001 7.08704 13 7.4128L13 11.3333C13.306 11.3332 13.5728 11.3313 13.7967 11.313C14.0602 11.2914 14.3224 11.2439 14.5746 11.1154C14.9509 10.9236 15.2569 10.6177 15.4487 10.2413C15.5772 9.98908 15.6247 9.72694 15.6463 9.46338C15.6667 9.21368 15.6666 8.91052 15.6666 8.55912V3.44101C15.6666 3.0896 15.6667 2.78637 15.6463 2.53667C15.6247 2.27311 15.5772 2.01096 15.4487 1.75871C15.2569 1.38238 14.9509 1.07642 14.5746 0.884676C14.3224 0.756146 14.0602 0.708602 13.7967 0.687068C13.5469 0.666666 13.2438 0.666676 12.8923 0.666688Z" fill="#155EEF" />
</svg>
)
: (
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M8.89233 4.66667H3.77428C3.42285 4.66666 3.11966 4.66665 2.86995 4.68705C2.60639 4.70859 2.34424 4.75613 2.09199 4.88466C1.71567 5.07641 1.4097 5.38237 1.21796 5.75869C1.08943 6.01095 1.04188 6.27309 1.02035 6.53665C0.999949 6.78636 0.999959 7.08953 0.99997 7.44095V12.559C0.999959 12.9105 0.999949 13.2137 1.02035 13.4634C1.04188 13.7269 1.08943 13.9891 1.21796 14.2413C1.4097 14.6176 1.71567 14.9236 2.09199 15.1154C2.34424 15.2439 2.60639 15.2914 2.86995 15.313C3.11965 15.3334 3.4228 15.3334 3.77421 15.3333H8.89232C9.24372 15.3334 9.54696 15.3334 9.79666 15.313C10.0602 15.2914 10.3224 15.2439 10.5746 15.1154C10.9509 14.9236 11.2569 14.6176 11.4487 14.2413C11.5772 13.9891 11.6247 13.7269 11.6463 13.4634C11.6667 13.2136 11.6667 12.9105 11.6666 12.559V7.44099C11.6667 7.08955 11.6667 6.78637 11.6463 6.53665C11.6247 6.27309 11.5772 6.01095 11.4487 5.75869C11.2569 5.38237 10.9509 5.07641 10.5746 4.88466C10.3224 4.75613 10.0602 4.70859 9.79666 4.68705C9.54695 4.66665 9.24376 4.66666 8.89233 4.66667ZM9.13804 8.80474C9.39839 8.54439 9.39839 8.12228 9.13804 7.86193C8.87769 7.60159 8.45558 7.60159 8.19523 7.86193L5.66664 10.3905L4.80471 9.5286C4.54436 9.26825 4.12225 9.26825 3.8619 9.5286C3.60155 9.78895 3.60155 10.2111 3.8619 10.4714L5.19523 11.8047C5.45558 12.0651 5.87769 12.0651 6.13804 11.8047L9.13804 8.80474Z" fill="#667085" />
<path d="M12.8923 0.666672H7.77427C7.42285 0.666661 7.11966 0.666651 6.86995 0.687053C6.60639 0.708587 6.34424 0.756131 6.09199 0.884661C5.71567 1.07641 5.40971 1.38237 5.21796 1.75869C5.08943 2.01095 5.04188 2.27309 5.02035 2.53665C5.00206 2.76051 5.00018 3.02733 4.99999 3.33336L8.92055 3.33335C9.2463 3.33327 9.59951 3.33319 9.90523 3.35816C10.2512 3.38644 10.7084 3.4564 11.1799 3.69667C11.8071 4.01625 12.3171 4.52618 12.6367 5.15339C12.8769 5.62493 12.9469 6.08208 12.9752 6.42809C13.0001 6.73382 13.0001 7.08702 13 7.41279L13 11.3333C13.306 11.3331 13.5728 11.3313 13.7967 11.313C14.0602 11.2914 14.3224 11.2439 14.5746 11.1154C14.9509 10.9236 15.2569 10.6176 15.4487 10.2413C15.5772 9.98907 15.6247 9.72692 15.6463 9.46336C15.6667 9.21366 15.6666 8.91051 15.6666 8.5591V3.44099C15.6666 3.08959 15.6667 2.78635 15.6463 2.53665C15.6247 2.27309 15.5772 2.01095 15.4487 1.75869C15.2569 1.38237 14.9509 1.07641 14.5746 0.884661C14.3224 0.756131 14.0602 0.708587 13.7967 0.687053C13.5469 0.666651 13.2438 0.666661 12.8923 0.666672Z" fill="#667085" />
</svg>
)
case InputVarType.paragraph:
return selected
? (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="align-left">
<g id="Solid">
<path fillRule="evenodd" clipRule="evenodd" d="M1.33334 6.66665C1.33334 6.29846 1.63182 5.99998 2.00001 5.99998H10.6667C11.0349 5.99998 11.3333 6.29846 11.3333 6.66665C11.3333 7.03484 11.0349 7.33331 10.6667 7.33331H2.00001C1.63182 7.33331 1.33334 7.03484 1.33334 6.66665Z" fill="#155EEF" />
<path fillRule="evenodd" clipRule="evenodd" d="M1.33334 3.99998C1.33334 3.63179 1.63182 3.33331 2.00001 3.33331H13.3333C13.7015 3.33331 14 3.63179 14 3.99998C14 4.36817 13.7015 4.66665 13.3333 4.66665H2.00001C1.63182 4.66665 1.33334 4.36817 1.33334 3.99998Z" fill="#155EEF" />
<path fillRule="evenodd" clipRule="evenodd" d="M1.33334 9.33331C1.33334 8.96512 1.63182 8.66665 2.00001 8.66665H13.3333C13.7015 8.66665 14 8.96512 14 9.33331C14 9.7015 13.7015 9.99998 13.3333 9.99998H2.00001C1.63182 9.99998 1.33334 9.7015 1.33334 9.33331Z" fill="#155EEF" />
<path fillRule="evenodd" clipRule="evenodd" d="M1.33334 12C1.33334 11.6318 1.63182 11.3333 2.00001 11.3333H10.6667C11.0349 11.3333 11.3333 11.6318 11.3333 12C11.3333 12.3682 11.0349 12.6666 10.6667 12.6666H2.00001C1.63182 12.6666 1.33334 12.3682 1.33334 12Z" fill="#155EEF" />
</g>
</g>
</svg>
)
: (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="align-left">
<g id="Solid">
<path fillRule="evenodd" clipRule="evenodd" d="M1.33334 6.66666C1.33334 6.29847 1.63182 5.99999 2.00001 5.99999H10.6667C11.0349 5.99999 11.3333 6.29847 11.3333 6.66666C11.3333 7.03485 11.0349 7.33333 10.6667 7.33333H2.00001C1.63182 7.33333 1.33334 7.03485 1.33334 6.66666Z" fill="#667085" />
<path fillRule="evenodd" clipRule="evenodd" d="M1.33334 3.99999C1.33334 3.63181 1.63182 3.33333 2.00001 3.33333H13.3333C13.7015 3.33333 14 3.63181 14 3.99999C14 4.36818 13.7015 4.66666 13.3333 4.66666H2.00001C1.63182 4.66666 1.33334 4.36818 1.33334 3.99999Z" fill="#667085" />
<path fillRule="evenodd" clipRule="evenodd" d="M1.33334 9.33333C1.33334 8.96514 1.63182 8.66666 2.00001 8.66666H13.3333C13.7015 8.66666 14 8.96514 14 9.33333C14 9.70152 13.7015 10 13.3333 10H2.00001C1.63182 10 1.33334 9.70152 1.33334 9.33333Z" fill="#667085" />
<path fillRule="evenodd" clipRule="evenodd" d="M1.33334 12C1.33334 11.6318 1.63182 11.3333 2.00001 11.3333H10.6667C11.0349 11.3333 11.3333 11.6318 11.3333 12C11.3333 12.3682 11.0349 12.6667 10.6667 12.6667H2.00001C1.63182 12.6667 1.33334 12.3682 1.33334 12Z" fill="#667085" />
</g>
</g>
</svg>
)
case InputVarType.textInput:
default:
return selected
? (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.17246 1.33333H10.8275C11.3642 1.33332 11.8071 1.33331 12.1679 1.36279C12.5426 1.39341 12.8871 1.45912 13.2106 1.62398C13.7124 1.87964 14.1203 2.28759 14.376 2.78935C14.5409 3.11291 14.6066 3.45738 14.6372 3.83211C14.6667 4.19291 14.6667 4.63581 14.6667 5.17245V10.8275C14.6667 11.3642 14.6667 11.8071 14.6372 12.1679C14.6066 12.5426 14.5409 12.8871 14.376 13.2106C14.1203 13.7124 13.7124 14.1203 13.2106 14.376C12.8871 14.5409 12.5426 14.6066 12.1679 14.6372C11.8071 14.6667 11.3642 14.6667 10.8275 14.6667H5.17245C4.63581 14.6667 4.1929 14.6667 3.83211 14.6372C3.45738 14.6066 3.11291 14.5409 2.78935 14.376C2.28759 14.1203 1.87964 13.7124 1.62398 13.2106C1.45912 12.8871 1.39341 12.5426 1.36279 12.1679C1.33331 11.8071 1.33332 11.3642 1.33333 10.8275V5.17245C1.33332 4.63581 1.33331 4.1929 1.36279 3.83211C1.39341 3.45738 1.45912 3.11291 1.62398 2.78935C1.87964 2.28759 2.28759 1.87964 2.78935 1.62398C3.11291 1.45912 3.45738 1.39341 3.83211 1.36279C4.1929 1.33331 4.63583 1.33332 5.17246 1.33333ZM4.66666 4.66666C4.66666 4.29847 4.96514 3.99999 5.33333 3.99999H10.6667C11.0349 3.99999 11.3333 4.29847 11.3333 4.66666C11.3333 5.03485 11.0349 5.33333 10.6667 5.33333H8.66666V11.3333C8.66666 11.7015 8.36818 12 7.99999 12C7.6318 12 7.33333 11.7015 7.33333 11.3333V5.33333H5.33333C4.96514 5.33333 4.66666 5.03485 4.66666 4.66666Z" fill="#155EEF" />
</svg>
)
: (<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.17246 1.33331H10.8275C11.3642 1.33331 11.8071 1.3333 12.1679 1.36278C12.5426 1.39339 12.8871 1.4591 13.2106 1.62396C13.7124 1.87963 14.1203 2.28757 14.376 2.78934C14.5409 3.1129 14.6066 3.45737 14.6372 3.8321C14.6667 4.19289 14.6667 4.63579 14.6667 5.17243V10.8275C14.6667 11.3642 14.6667 11.8071 14.6372 12.1679C14.6066 12.5426 14.5409 12.8871 14.376 13.2106C14.1203 13.7124 13.7124 14.1203 13.2106 14.376C12.8871 14.5409 12.5426 14.6066 12.1679 14.6372C11.8071 14.6667 11.3642 14.6667 10.8275 14.6666H5.17245C4.63581 14.6667 4.1929 14.6667 3.83211 14.6372C3.45738 14.6066 3.11291 14.5409 2.78935 14.376C2.28759 14.1203 1.87964 13.7124 1.62398 13.2106C1.45912 12.8871 1.39341 12.5426 1.36279 12.1679C1.33331 11.8071 1.33332 11.3642 1.33333 10.8275V5.17244C1.33332 4.6358 1.33331 4.19289 1.36279 3.8321C1.39341 3.45737 1.45912 3.1129 1.62398 2.78934C1.87964 2.28757 2.28759 1.87963 2.78935 1.62396C3.11291 1.4591 3.45738 1.39339 3.83211 1.36278C4.1929 1.3333 4.63583 1.33331 5.17246 1.33331ZM4.66666 4.66665C4.66666 4.29846 4.96514 3.99998 5.33333 3.99998H10.6667C11.0349 3.99998 11.3333 4.29846 11.3333 4.66665C11.3333 5.03484 11.0349 5.33331 10.6667 5.33331H8.66666V11.3333C8.66666 11.7015 8.36818 12 7.99999 12C7.6318 12 7.33333 11.7015 7.33333 11.3333V5.33331H5.33333C4.96514 5.33331 4.66666 5.03484 4.66666 4.66665Z" fill="#667085" />
</svg>)
}
}
const SelectTypeItem: FC<ISelectTypeItemProps> = ({ const SelectTypeItem: FC<ISelectTypeItemProps> = ({
type, type,
selected, selected,
...@@ -82,7 +26,7 @@ const SelectTypeItem: FC<ISelectTypeItemProps> = ({ ...@@ -82,7 +26,7 @@ const SelectTypeItem: FC<ISelectTypeItemProps> = ({
onClick={onClick} onClick={onClick}
> >
<div className='shrink-0'> <div className='shrink-0'>
<Icon type={type} selected={selected} /> <InputVarTypeIcon type={type} className='w-5 h-5' />
</div> </div>
<span className={cn(s.text)}>{typeName}</span> <span className={cn(s.text)}>{typeName}</span>
</div> </div>
......
web/app/components/app/configuration/config-var/select-type-item/style.module.css
View file @ 508ea8bc
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
} }
.item.selected { .item.selected {
color: #155EEF;
border-color: #528BFF; border-color: #528BFF;
background-color: #F5F8FF; background-color: #F5F8FF;
box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
...@@ -30,7 +31,7 @@ ...@@ -30,7 +31,7 @@
font-weight: 500; font-weight: 500;
} }
.item.selected.text { .item.selected .text {
color: #155EEF; color: #155EEF;
} }
......
web/app/components/app/configuration/config-var/select-var-type.tsx
View file @ 508ea8bc
...@@ -9,9 +9,10 @@ import { ...@@ -9,9 +9,10 @@ import {
PortalToFollowElemContent, PortalToFollowElemContent,
PortalToFollowElemTrigger, PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem' } 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 { 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 = { type Props = {
onChange: (value: string) => void onChange: (value: string) => void
} }
...@@ -19,17 +20,18 @@ type Props = { ...@@ -19,17 +20,18 @@ type Props = {
type ItemProps = { type ItemProps = {
text: string text: string
value: string value: string
Icon: any Icon?: any
type?: InputVarType
onClick: (value: string) => void onClick: (value: string) => void
} }
const SelectItem: FC<ItemProps> = ({ text, value, Icon, onClick }) => { const SelectItem: FC<ItemProps> = ({ text, type, value, Icon, onClick }) => {
return ( return (
<div <div
className='flex items-center px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer' className='flex items-center px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
onClick={() => onClick(value)} 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 className='ml-2 text-xs text-gray-600 truncate'>{text}</div>
</div> </div>
) )
...@@ -60,9 +62,10 @@ const SelectVarType: FC<Props> = ({ ...@@ -60,9 +62,10 @@ const SelectVarType: FC<Props> = ({
<PortalToFollowElemContent style={{ zIndex: 1000 }}> <PortalToFollowElemContent style={{ zIndex: 1000 }}>
<div className='bg-white border border-gray-200 shadow-lg rounded-lg min-w-[192px]'> <div className='bg-white border border-gray-200 shadow-lg rounded-lg min-w-[192px]'>
<div className='p-1'> <div className='p-1'>
<SelectItem Icon={TypeSquare} value='string' text={t('appDebug.variableConig.string')} onClick={handleChange}></SelectItem> <SelectItem type={InputVarType.textInput} value='select' text={t('appDebug.variableConig.select')} onClick={handleChange}></SelectItem>
<SelectItem Icon={Paragraph} value='paragraph' text={t('appDebug.variableConig.paragraph')} onClick={handleChange}></SelectItem> <SelectItem type={InputVarType.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.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>
<div className='h-[1px] bg-gray-100'></div> <div className='h-[1px] bg-gray-100'></div>
<div className='p-1'> <div className='p-1'>
......
web/app/components/app/configuration/prompt-value-panel/index.tsx
View file @ 508ea8bc
...@@ -149,7 +149,15 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({ ...@@ -149,7 +149,15 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
onChange={(e) => { handleInputValueChange(key, e.target.value) }} 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>
))} ))}
</div> </div>
......
web/app/components/share/chat/welcome/index.tsx
View file @ 508ea8bc
...@@ -132,6 +132,15 @@ const Welcome: FC<IWelcomeProps> = ({ ...@@ -132,6 +132,15 @@ const Welcome: FC<IWelcomeProps> = ({
onChange={(e) => { setInputs({ ...inputs, [item.key]: e.target.value }) }} 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>
))} ))}
</div> </div>
......
web/app/components/share/chatbot/welcome/index.tsx
View file @ 508ea8bc
...@@ -133,6 +133,15 @@ const Welcome: FC<IWelcomeProps> = ({ ...@@ -133,6 +133,15 @@ const Welcome: FC<IWelcomeProps> = ({
onChange={(e) => { setInputs({ ...inputs, [item.key]: e.target.value }) }} 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>
))} ))}
</div> </div>
......
web/app/components/share/text-generation/run-once/index.tsx
View file @ 508ea8bc
...@@ -76,6 +76,15 @@ const RunOnce: FC<IRunOnceProps> = ({ ...@@ -76,6 +76,15 @@ const RunOnce: FC<IRunOnceProps> = ({
onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }} 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>
</div> </div>
))} ))}
......
web/i18n/lang/app-debug.en.ts
View file @ 508ea8bc
...@@ -274,6 +274,7 @@ const translation = { ...@@ -274,6 +274,7 @@ const translation = {
'text-input': 'Short Text', 'text-input': 'Short Text',
'paragraph': 'Paragraph', 'paragraph': 'Paragraph',
'select': 'Select', 'select': 'Select',
'number': 'Number',
'notSet': 'Not set, try typing {{input}} in the prefix prompt', 'notSet': 'Not set, try typing {{input}} in the prefix prompt',
'stringTitle': 'Form text box options', 'stringTitle': 'Form text box options',
'maxLength': 'Max length', 'maxLength': 'Max length',
......
web/i18n/lang/app-debug.zh.ts
View file @ 508ea8bc
...@@ -270,6 +270,7 @@ const translation = { ...@@ -270,6 +270,7 @@ const translation = {
'text-input': '文本', 'text-input': '文本',
'paragraph': '段落', 'paragraph': '段落',
'select': '下拉选项', 'select': '下拉选项',
'number': '数字',
'notSet': '未设置，在 Prompt 中输入 {{input}} 试试', 'notSet': '未设置，在 Prompt 中输入 {{input}} 试试',
'stringTitle': '文本框设置', 'stringTitle': '文本框设置',
'maxLength': '最大长度', 'maxLength': '最大长度',
......
web/utils/model-config.ts
View file @ 508ea8bc
...@@ -33,6 +33,15 @@ export const userInputsFormToPromptVariables = (useInputs: UserInputFormItem[] | ...@@ -33,6 +33,15 @@ export const userInputsFormToPromptVariables = (useInputs: UserInputFormItem[] |
is_context_var, is_context_var,
}) })
} }
else if (type === 'number') {
promptVariables.push({
key: content.variable,
name: content.label,
required: content.required,
type,
options: [],
})
}
else if (type === 'select') { else if (type === 'select') {
promptVariables.push({ promptVariables.push({
key: content.variable, key: content.variable,
...@@ -79,6 +88,16 @@ export const promptVariablesToUserInputsForm = (promptVariables: PromptVariable[ ...@@ -79,6 +88,16 @@ export const promptVariablesToUserInputsForm = (promptVariables: PromptVariable[
}, },
} as any) } 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') { else if (item.type === 'select') {
userInputs.push({ userInputs.push({
select: { select: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment