Compare commits
23 Commits
main
...
feat/suppo
| Author | SHA1 | Date |
|---|---|---|
Joel
|
75d4e519fc | 6 months ago |
|
Joel
|
cf63926e16 | 6 months ago |
|
Joel
|
14eb5b7930 | 7 months ago |
|
Joel
|
544ebde054 | 7 months ago |
|
Joel
|
6012ad57ac | 7 months ago |
|
Joel
|
70f6d8b42a | 7 months ago |
|
Joel
|
1d738f3fa6 | 7 months ago |
|
Joel
|
912d68a148 | 7 months ago |
|
Joel
|
8c8c250570 | 7 months ago |
|
Joel
|
b5782fff8f | 7 months ago |
|
Joel
|
f2dfb5363f | 7 months ago |
|
Joel
|
fc0dea5647 | 7 months ago |
|
Joel
|
fcf0ae4c85 | 7 months ago |
|
Joel
|
9ac629bcf5 | 7 months ago |
|
Joel
|
79bdb22f79 | 7 months ago |
|
Joel
|
b72d977871 | 7 months ago |
|
Joel
|
657d3d1dae | 7 months ago |
|
Joel
|
3ba23238e5 | 7 months ago |
|
Joel
|
e1a7b59160 | 7 months ago |
|
Joel
|
18941beb34 | 7 months ago |
|
Joel
|
6ff18d13e6 | 7 months ago |
|
Joel
|
1094b3da23 | 7 months ago |
|
Joel
|
77aa35ff15 | 7 months ago |
@ -0,0 +1,99 @@
|
|||||||
|
'use client'
|
||||||
|
import type { FC } from 'react'
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import { ChevronDownIcon } from '@heroicons/react/20/solid'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import classNames from '@/utils/classnames'
|
||||||
|
import {
|
||||||
|
PortalToFollowElem,
|
||||||
|
PortalToFollowElemContent,
|
||||||
|
PortalToFollowElemTrigger,
|
||||||
|
} from '@/app/components/base/portal-to-follow-elem'
|
||||||
|
import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
|
||||||
|
import type { InputVarType } from '@/app/components/workflow/types'
|
||||||
|
import cn from '@/utils/classnames'
|
||||||
|
import Badge from '@/app/components/base/badge'
|
||||||
|
import { inputVarTypeToVarType } from '@/app/components/workflow/nodes/_base/components/variable/utils'
|
||||||
|
|
||||||
|
export type Item = {
|
||||||
|
value: InputVarType
|
||||||
|
name: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
value: string | number
|
||||||
|
onSelect: (value: Item) => void
|
||||||
|
items: Item[]
|
||||||
|
popupClassName?: string
|
||||||
|
popupInnerClassName?: string
|
||||||
|
readonly?: boolean
|
||||||
|
hideChecked?: boolean
|
||||||
|
}
|
||||||
|
const TypeSelector: FC<Props> = ({
|
||||||
|
value,
|
||||||
|
onSelect,
|
||||||
|
items,
|
||||||
|
popupInnerClassName,
|
||||||
|
readonly,
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [open, setOpen] = useState(false)
|
||||||
|
const selectedItem = value ? items.find(item => item.value === value) : undefined
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PortalToFollowElem
|
||||||
|
open={open}
|
||||||
|
onOpenChange={setOpen}
|
||||||
|
placement='bottom-start'
|
||||||
|
offset={4}
|
||||||
|
>
|
||||||
|
<PortalToFollowElemTrigger onClick={() => !readonly && setOpen(v => !v)} className='w-full'>
|
||||||
|
<div
|
||||||
|
className={classNames(`group flex h-9 items-center justify-between rounded-lg border-0 bg-components-input-bg-normal px-2 text-sm hover:bg-state-base-hover-alt ${readonly ? 'cursor-not-allowed' : 'cursor-pointer'}`)}
|
||||||
|
title={selectedItem?.name}
|
||||||
|
>
|
||||||
|
<div className='flex items-center'>
|
||||||
|
<InputVarTypeIcon type={selectedItem?.value as InputVarType} className='size-4 shrink-0 text-text-secondary' />
|
||||||
|
<span
|
||||||
|
className={`
|
||||||
|
ml-1.5 ${!selectedItem?.name && 'text-components-input-text-placeholder'}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{selectedItem?.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center space-x-1'>
|
||||||
|
<Badge uppercase={false}>{inputVarTypeToVarType(selectedItem?.value as InputVarType)}</Badge>
|
||||||
|
<ChevronDownIcon className={cn('h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</PortalToFollowElemTrigger>
|
||||||
|
<PortalToFollowElemContent className='z-[61]'>
|
||||||
|
<div
|
||||||
|
className={classNames('w-[432px] rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm', popupInnerClassName)}
|
||||||
|
>
|
||||||
|
{items.map((item: Item) => (
|
||||||
|
<div
|
||||||
|
key={item.value}
|
||||||
|
className={'flex h-9 cursor-pointer items-center justify-between rounded-lg px-2 text-text-secondary hover:bg-state-base-hover'}
|
||||||
|
title={item.name}
|
||||||
|
onClick={() => {
|
||||||
|
onSelect(item)
|
||||||
|
setOpen(false)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='flex items-center space-x-2'>
|
||||||
|
<InputVarTypeIcon type={item.value} className='size-4 shrink-0 text-text-secondary' />
|
||||||
|
<span title={item.name}>{item.name}</span>
|
||||||
|
</div>
|
||||||
|
<Badge uppercase={false}>{inputVarTypeToVarType(item.value)}</Badge>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</PortalToFollowElemContent>
|
||||||
|
</PortalToFollowElem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TypeSelector
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
'use client'
|
||||||
|
import Checkbox from '@/app/components/base/checkbox'
|
||||||
|
import type { FC } from 'react'
|
||||||
|
import React, { useCallback } from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
name: string
|
||||||
|
value: boolean
|
||||||
|
required?: boolean
|
||||||
|
onChange: (value: boolean) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const BoolInput: FC<Props> = ({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
name,
|
||||||
|
required,
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const handleChange = useCallback(() => {
|
||||||
|
onChange(!value)
|
||||||
|
}, [value, onChange])
|
||||||
|
return (
|
||||||
|
<div className='flex h-6 items-center gap-2'>
|
||||||
|
<Checkbox
|
||||||
|
className='!h-4 !w-4'
|
||||||
|
checked={!!value}
|
||||||
|
onCheck={handleChange}
|
||||||
|
/>
|
||||||
|
<div className='system-sm-medium flex items-center gap-1 text-text-secondary'>
|
||||||
|
{name}
|
||||||
|
{!required && <span className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</span>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default React.memo(BoolInput)
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
'use client'
|
||||||
|
import type { FC } from 'react'
|
||||||
|
import React, { useCallback } from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { RiAddLine } from '@remixicon/react'
|
||||||
|
import produce from 'immer'
|
||||||
|
import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
|
||||||
|
import Button from '@/app/components/base/button'
|
||||||
|
import BoolValue from './bool-value'
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
list: any[]
|
||||||
|
onChange: (list: any[]) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const ArrayValueList: FC<Props> = ({
|
||||||
|
list,
|
||||||
|
onChange,
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const handleChange = useCallback((index: number) => {
|
||||||
|
return (value: boolean) => {
|
||||||
|
const newList = produce(list, (draft: any[]) => {
|
||||||
|
draft[index] = value
|
||||||
|
})
|
||||||
|
onChange(newList)
|
||||||
|
}
|
||||||
|
}, [list, onChange])
|
||||||
|
|
||||||
|
const handleItemRemove = useCallback((index: number) => {
|
||||||
|
return () => {
|
||||||
|
const newList = produce(list, (draft) => {
|
||||||
|
draft.splice(index, 1)
|
||||||
|
})
|
||||||
|
onChange(newList)
|
||||||
|
}
|
||||||
|
}, [list, onChange])
|
||||||
|
|
||||||
|
const handleItemAdd = useCallback(() => {
|
||||||
|
const newList = produce(list, (draft: any[]) => {
|
||||||
|
draft.push(true)
|
||||||
|
})
|
||||||
|
onChange(newList)
|
||||||
|
}, [list, onChange])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='w-full space-y-2'>
|
||||||
|
{list.map((item, index) => (
|
||||||
|
<div className='flex items-center space-x-1' key={index}>
|
||||||
|
<BoolValue
|
||||||
|
value={item}
|
||||||
|
onChange={handleChange(index)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<RemoveButton
|
||||||
|
className='!bg-gray-100 !p-2 hover:!bg-gray-200'
|
||||||
|
onClick={handleItemRemove(index)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<Button variant='tertiary' className='w-full' onClick={handleItemAdd}>
|
||||||
|
<RiAddLine className='mr-1 h-4 w-4' />
|
||||||
|
<span>{t('workflow.chatVariable.modal.addArrayValue')}</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default React.memo(ArrayValueList)
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
'use client'
|
||||||
|
import type { FC } from 'react'
|
||||||
|
import React, { useCallback } from 'react'
|
||||||
|
import OptionCard from '../../../nodes/_base/components/option-card'
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
value: boolean
|
||||||
|
onChange: (value: boolean) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const BoolValue: FC<Props> = ({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
}) => {
|
||||||
|
const handleChange = useCallback((newValue: boolean) => {
|
||||||
|
return () => {
|
||||||
|
onChange(newValue)
|
||||||
|
}
|
||||||
|
}, [onChange])
|
||||||
|
return (
|
||||||
|
<div className='flex w-full space-x-1'>
|
||||||
|
<OptionCard className='grow'
|
||||||
|
selected={value}
|
||||||
|
title='True'
|
||||||
|
onSelect={handleChange(true)}
|
||||||
|
/>
|
||||||
|
<OptionCard className='grow'
|
||||||
|
selected={!value}
|
||||||
|
title='False'
|
||||||
|
onSelect={handleChange(false)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default React.memo(BoolValue)
|
||||||
@ -1,8 +1,10 @@
|
|||||||
export enum ChatVarType {
|
export enum ChatVarType {
|
||||||
Number = 'number',
|
Number = 'number',
|
||||||
String = 'string',
|
String = 'string',
|
||||||
|
Boolean = 'boolean',
|
||||||
Object = 'object',
|
Object = 'object',
|
||||||
ArrayString = 'array[string]',
|
ArrayString = 'array[string]',
|
||||||
ArrayNumber = 'array[number]',
|
ArrayNumber = 'array[number]',
|
||||||
|
ArrayBoolean = 'array[boolean]',
|
||||||
ArrayObject = 'array[object]',
|
ArrayObject = 'array[object]',
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,35 @@
|
|||||||
|
export const objectPlaceholder = `# example
|
||||||
|
# {
|
||||||
|
# "name": "ray",
|
||||||
|
# "age": 20
|
||||||
|
# }`
|
||||||
|
|
||||||
|
export const arrayStringPlaceholder = `# example
|
||||||
|
# [
|
||||||
|
# "value1",
|
||||||
|
# "value2"
|
||||||
|
# ]`
|
||||||
|
|
||||||
|
export const arrayNumberPlaceholder = `# example
|
||||||
|
# [
|
||||||
|
# 100,
|
||||||
|
# 200
|
||||||
|
# ]`
|
||||||
|
|
||||||
|
export const arrayObjectPlaceholder = `# example
|
||||||
|
# [
|
||||||
|
# {
|
||||||
|
# "name": "ray",
|
||||||
|
# "age": 20
|
||||||
|
# },
|
||||||
|
# {
|
||||||
|
# "name": "lily",
|
||||||
|
# "age": 18
|
||||||
|
# }
|
||||||
|
# ]`
|
||||||
|
|
||||||
|
export const arrayBoolPlaceholder = `# example
|
||||||
|
# [
|
||||||
|
# "True",
|
||||||
|
# "False"
|
||||||
|
# ]`
|
||||||
Loading…
Reference in New Issue