Compare commits
23 Commits
main
...
feat/suppo
| Author | SHA1 | Date |
|---|---|---|
Joel
|
75d4e519fc | 6 months ago |
|
Joel
|
cf63926e16 | 6 months ago |
|
Joel
|
14eb5b7930 | 6 months ago |
|
Joel
|
544ebde054 | 6 months ago |
|
Joel
|
6012ad57ac | 6 months ago |
|
Joel
|
70f6d8b42a | 6 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 {
|
||||
Number = 'number',
|
||||
String = 'string',
|
||||
Boolean = 'boolean',
|
||||
Object = 'object',
|
||||
ArrayString = 'array[string]',
|
||||
ArrayNumber = 'array[number]',
|
||||
ArrayBoolean = 'array[boolean]',
|
||||
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