opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

replace input in workflow blocks

This commit is contained in:
JzoNg 2024-08-09 16:19:10 +08:00
parent baed068231
commit ade385c9c1
9 changed files with 38 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -147,7 +147,6 @@ const ConfigModal: FC<IConfigModalProps> = ({
<Field title={t('appDebug.variableConig.varName')}>
<Input
className='h-9'
value={variable}
onChange={e => handlePayloadChange('variable')(e.target.value)}
onBlur={handleVarKeyBlur}
@ -156,7 +155,6 @@ const ConfigModal: FC<IConfigModalProps> = ({
</Field>
<Field title={t('appDebug.variableConig.labelName')}>
<Input
className='h-9'
value={label as string}
onChange={e => handlePayloadChange('label')(e.target.value)}
placeholder={t('appDebug.variableConig.inputPlaceholder')!}

1
web/app/components/app/configuration/config-var/config-string/index.tsx
View File

@ -37,7 +37,6 @@ const ConfigString: FC<IConfigStringProps> = ({
onChange(value)
}}
className='h-9'
/>
</div>
)

7
web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
View File

@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
import type { OutputVar } from '../../../code/types'
import RemoveButton from '../remove-button'
import VarTypePicker from './var-type-picker'
import Input from '@/app/components/base/input'
import type { VarType } from '@/app/components/workflow/types'
import { checkKeys } from '@/utils/var'
import Toast from '@/app/components/base/toast'
@ -85,12 +86,12 @@ const OutputVarList: FC<Props> = ({
<div className='space-y-2'>
{list.map((item, index) => (
<div className='flex items-center space-x-1' key={index}>
<input
<Input
readOnly={readonly}
value={item.variable}
onChange={handleVarNameChange(index)}
className='w-0 grow h-8 leading-8 px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px] placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
type='text' />
wrapperClassName='grow'
/>
<VarTypePicker
readonly={readonly}
value={item.variable_type}

8
web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
View File

@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
import produce from 'immer'
import RemoveButton from '../remove-button'
import VarReferencePicker from './var-reference-picker'
import Input from '@/app/components/base/input'
import type { ValueSelector, Var, Variable } from '@/app/components/workflow/types'
import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
@ -75,13 +76,12 @@ const VarList: FC<Props> = ({
<div className='space-y-2'>
{list.map((item, index) => (
<div className='flex items-center space-x-1' key={index}>
<input
readOnly={readonly}
<Input
wrapperClassName='w-[120px]'
disabled={readonly}
value={list[index].variable}
onChange={handleVarNameChange(index)}
placeholder={t('workflow.common.variableNamePlaceholder')!}
className='w-[120px] h-8 leading-8 px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px] placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
type='text'
/>
<VarReferencePicker
nodeId={nodeId}

36
web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
View File

@ -1,10 +1,7 @@
'use client'
import type { FC } from 'react'
import React, { useEffect, useRef, useState } from 'react'
import { useBoolean, useHover } from 'ahooks'
import {
RiSearchLine,
} from '@remixicon/react'
import { useHover } from 'ahooks'
import { useTranslation } from 'react-i18next'
import cn from '@/utils/classnames'
import { type NodeOutPutVar, type ValueSelector, type Var, VarType } from '@/app/components/workflow/types'
@ -15,7 +12,7 @@ import {
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
import Input from '@/app/components/base/input'
import { Env } from '@/app/components/base/icons/src/vender/line/others'
import { checkKeys } from '@/utils/var'
@ -235,40 +232,21 @@ const VarReferenceVars: FC<Props> = ({
}
})
const [isFocus, {
setFalse: setBlur,
setTrue: setFocus,
}] = useBoolean(false)
return (
<>
{
!hideSearch && (
<>
<div
className={cn(searchBoxClassName, isFocus && 'shadow-sm bg-white', 'mb-2 mx-1 flex items-center px-2 rounded-lg bg-gray-100 ')}
onClick={e => e.stopPropagation()}
>
<RiSearchLine className='shrink-0 ml-[1px] mr-[5px] w-3.5 h-3.5 text-gray-400' />
<input
<div className={cn('mb-2 mx-1', searchBoxClassName)} onClick={e => e.stopPropagation()}>
<Input
showLeftIcon
showClearIcon
value={searchText}
className='grow px-0.5 py-[7px] text-[13px] text-gray-700 bg-transparent appearance-none outline-none caret-primary-600 placeholder:text-gray-400'
placeholder={t('workflow.common.searchVar') || ''}
onChange={e => setSearchText(e.target.value)}
onFocus={setFocus}
onBlur={setBlur}
onClear={() => setSearchText('')}
autoFocus
/>
{
searchText && (
<div
className='flex items-center justify-center ml-[5px] w-[18px] h-[18px] cursor-pointer'
onClick={() => setSearchText('')}
>
<XCircle className='w-[14px] h-[14px] text-gray-400' />
</div>
)
}
</div>
<div className='h-[0.5px] bg-black/5 relative left-[-4px]' style={{
width: 'calc(100% + 8px)',

24
web/app/components/workflow/nodes/code/dependency-picker.tsx
View File

@ -3,12 +3,11 @@ import React, { useCallback, useState } from 'react'
import { t } from 'i18next'
import {
RiArrowDownSLine,
RiSearchLine,
} from '@remixicon/react'
import type { CodeDependency } from './types'
import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
import Input from '@/app/components/base/input'
import { Check } from '@/app/components/base/icons/src/vender/line/general'
import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
type Props = {
value: CodeDependency
@ -50,27 +49,16 @@ const DependencyPicker: FC<Props> = ({
<div className='p-1 bg-white rounded-lg shadow-sm' style={{
width: 350,
}}>
<div
className='shadow-sm bg-white mb-2 mx-1 flex items-center px-2 rounded-lg bg-gray-100'
>
<RiSearchLine className='shrink-0 ml-[1px] mr-[5px] w-3.5 h-3.5 text-gray-400' />
<input
<div className='mb-2 mx-1'>
<Input
showLeftIcon
showClearIcon
value={searchText}
className='grow px-0.5 py-[7px] text-[13px] text-gray-700 bg-transparent appearance-none outline-none caret-primary-600 placeholder:text-gray-400'
placeholder={t('workflow.nodes.code.searchDependencies') || ''}
onChange={e => setSearchText(e.target.value)}
onClear={() => setSearchText('')}
autoFocus
/>
{
searchText && (
<div
className='flex items-center justify-center ml-[5px] w-[18px] h-[18px] cursor-pointer'
onClick={() => setSearchText('')}
>
<XCircle className='w-[14px] h-[14px] text-gray-400' />
</div>
)
}
</div>
<div className='max-h-[30vh] overflow-y-auto'>
{available_dependencies.filter((v) => {

5
web/app/components/workflow/nodes/http/components/authorization/index.tsx
View File

@ -12,6 +12,7 @@ import type { Var } from '@/app/components/workflow/types'
import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button'
import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
import BaseInput from '@/app/components/base/input'
import cn from '@/utils/classnames'
const i18nPrefix = 'workflow.nodes.http.authorization'
@ -146,9 +147,7 @@ const Authorization: FC<Props> = ({
</Field>
{tempPayload.config?.type === APIType.custom && (
<Field title={t(`${i18nPrefix}.header`)} isRequired>
<input
type='text'
className='w-full h-8 leading-8 px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px] placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
<BaseInput
value={tempPayload.config?.header || ''}
onChange={handleAPIKeyOrHeaderChange('header')}
/>

17
web/app/components/workflow/nodes/http/components/timeout/index.tsx
View File

@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
import { useBoolean } from 'ahooks'
import type { Timeout as TimeoutPayloadType } from '../../types'
import cn from '@/utils/classnames'
import Input from '@/app/components/base/input'
import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
type Props = {
@ -32,10 +33,18 @@ const InputField: FC<{
<span className="text-[13px] font-medium text-gray-900">{title}</span>
<span className="text-xs font-normal text-gray-500">{description}</span>
</div>
<input className="w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" value={value} onChange={(e) => {
const value = Math.max(min, Math.min(max, parseInt(e.target.value, 10)))
onChange(value)
}} placeholder={placeholder} type='number' readOnly={readOnly} min={min} max={max} />
<Input
type='number'
value={value}
onChange={(e) => {
const value = Math.max(min, Math.min(max, parseInt(e.target.value, 10)))
onChange(value)
}}
placeholder={placeholder}
readOnly={readOnly}
min={min}
max={max}
/>
</div>
)
}

6
web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
View File

@ -9,6 +9,7 @@ import AddButton from '@/app/components/base/button/add-button'
import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button'
import Field from '@/app/components/app/configuration/config-var/config-modal/field'
import Input from '@/app/components/base/input'
import Textarea from '@/app/components/base/textarea'
import Select from '@/app/components/base/select'
import Switch from '@/app/components/base/switch'
@ -19,7 +20,6 @@ import { checkKeys } from '@/utils/var'
const i18nPrefix = 'workflow.nodes.parameterExtractor'
const errorI18nPrefix = 'workflow.errorMsg'
const inputClassName = 'w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
const DEFAULT_PARAM: Param = {
name: '',
@ -136,9 +136,7 @@ const AddExtractParameter: FC<Props> = ({
<div>
<div className='space-y-2'>
<Field title={t(`${i18nPrefix}.addExtractParameterContent.name`)}>
<input
type='text'
className={inputClassName}
<Input
value={param.name}
onChange={e => handleParamChange('name')(e.target.value)}
placeholder={t(`${i18nPrefix}.addExtractParameterContent.namePlaceholder`)!}