mirror of
https://github.com/langgenius/dify.git
synced 2026-05-04 17:38:04 +08:00
chore(web): new lint setup (#30020)
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
This commit is contained in:
Stephen Zhou
GitHub
@ -1,13 +1,13 @@
|
||||
'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 React, { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/app/components/base/button'
|
||||
import BoolValue from './bool-value'
|
||||
import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import BoolValue from './bool-value'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
@ -50,20 +50,20 @@ const ArrayValueList: FC<Props> = ({
|
||||
return (
|
||||
<div className={cn('w-full space-y-2', className)}>
|
||||
{list.map((item, index) => (
|
||||
<div className='flex items-center space-x-1' key={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'
|
||||
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' />
|
||||
<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>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
'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 React, { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Input from '@/app/components/base/input'
|
||||
import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
|
||||
|
||||
type Props = {
|
||||
isString: boolean
|
||||
@ -47,9 +47,9 @@ const ArrayValueList: FC<Props> = ({
|
||||
}, [list, onChange])
|
||||
|
||||
return (
|
||||
<div className='w-full space-y-2'>
|
||||
<div className="w-full space-y-2">
|
||||
{list.map((item, index) => (
|
||||
<div className='flex items-center space-x-1' key={index}>
|
||||
<div className="flex items-center space-x-1" key={index}>
|
||||
<Input
|
||||
placeholder={t('workflow.chatVariable.modal.arrayValue') || ''}
|
||||
value={list[index]}
|
||||
@ -57,13 +57,13 @@ const ArrayValueList: FC<Props> = ({
|
||||
type={isString ? 'text' : 'number'}
|
||||
/>
|
||||
<RemoveButton
|
||||
className='!bg-gray-100 !p-2 hover:!bg-gray-200'
|
||||
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' />
|
||||
<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>
|
||||
|
||||
@ -20,15 +20,17 @@ const BoolValue: FC<Props> = ({
|
||||
}, [onChange])
|
||||
|
||||
return (
|
||||
<div className='flex w-full space-x-1'>
|
||||
<OptionCard className='grow'
|
||||
<div className="flex w-full space-x-1">
|
||||
<OptionCard
|
||||
className="grow"
|
||||
selected={booleanValue}
|
||||
title='True'
|
||||
title="True"
|
||||
onSelect={handleChange(true)}
|
||||
/>
|
||||
<OptionCard className='grow'
|
||||
<OptionCard
|
||||
className="grow"
|
||||
selected={!booleanValue}
|
||||
title='False'
|
||||
title="False"
|
||||
onSelect={handleChange(false)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import { produce } from 'immer'
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { produce } from 'immer'
|
||||
import { useContext } from 'use-context-selector'
|
||||
import { ToastContext } from '@/app/components/base/toast'
|
||||
import VariableTypeSelector from '@/app/components/workflow/panel/chat-variable-panel/components/variable-type-select'
|
||||
import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
|
||||
import VariableTypeSelector from '@/app/components/workflow/panel/chat-variable-panel/components/variable-type-select'
|
||||
import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
|
||||
|
||||
type Props = {
|
||||
@ -91,30 +91,30 @@ const ObjectValueItem: FC<Props> = ({
|
||||
}, [handleItemAdd, index, list.length])
|
||||
|
||||
return (
|
||||
<div className='group flex border-t border-gray-200'>
|
||||
<div className="group flex border-t border-gray-200">
|
||||
{/* Key */}
|
||||
<div className='w-[120px] border-r border-gray-200'>
|
||||
<div className="w-[120px] border-r border-gray-200">
|
||||
<input
|
||||
className='system-xs-regular placeholder:system-xs-regular block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:bg-state-base-hover focus:bg-components-input-bg-active'
|
||||
className="system-xs-regular placeholder:system-xs-regular block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:bg-state-base-hover focus:bg-components-input-bg-active"
|
||||
placeholder={t('workflow.chatVariable.modal.objectKey') || ''}
|
||||
value={list[index].key}
|
||||
onChange={handleKeyChange(index)}
|
||||
/>
|
||||
</div>
|
||||
{/* Type */}
|
||||
<div className='w-[96px] border-r border-gray-200'>
|
||||
<div className="w-[96px] border-r border-gray-200">
|
||||
<VariableTypeSelector
|
||||
inCell
|
||||
value={list[index].type}
|
||||
list={typeList}
|
||||
onSelect={handleTypeChange(index)}
|
||||
popupClassName='w-[120px]'
|
||||
popupClassName="w-[120px]"
|
||||
/>
|
||||
</div>
|
||||
{/* Value */}
|
||||
<div className='relative w-[230px]'>
|
||||
<div className="relative w-[230px]">
|
||||
<input
|
||||
className='system-xs-regular placeholder:system-xs-regular block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:bg-state-base-hover focus:bg-components-input-bg-active'
|
||||
className="system-xs-regular placeholder:system-xs-regular block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:bg-state-base-hover focus:bg-components-input-bg-active"
|
||||
placeholder={t('workflow.chatVariable.modal.objectValue') || ''}
|
||||
value={list[index].value}
|
||||
onChange={handleValueChange(index)}
|
||||
@ -124,7 +124,7 @@ const ObjectValueItem: FC<Props> = ({
|
||||
/>
|
||||
{list.length > 1 && !isFocus && (
|
||||
<RemoveButton
|
||||
className='absolute right-1 top-0.5 z-10 hidden group-hover:block'
|
||||
className="absolute right-1 top-0.5 z-10 hidden group-hover:block"
|
||||
onClick={handleItemRemove(index)}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -16,11 +16,11 @@ const ObjectValueList: FC<Props> = ({
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='w-full overflow-hidden rounded-lg border border-gray-200'>
|
||||
<div className='system-xs-medium flex h-7 items-center uppercase text-text-tertiary'>
|
||||
<div className='flex h-full w-[120px] items-center border-r border-gray-200 pl-2'>{t('workflow.chatVariable.modal.objectKey')}</div>
|
||||
<div className='flex h-full w-[96px] items-center border-r border-gray-200 pl-2'>{t('workflow.chatVariable.modal.objectType')}</div>
|
||||
<div className='flex h-full w-[230px] items-center pl-2 pr-1'>{t('workflow.chatVariable.modal.objectValue')}</div>
|
||||
<div className="w-full overflow-hidden rounded-lg border border-gray-200">
|
||||
<div className="system-xs-medium flex h-7 items-center uppercase text-text-tertiary">
|
||||
<div className="flex h-full w-[120px] items-center border-r border-gray-200 pl-2">{t('workflow.chatVariable.modal.objectKey')}</div>
|
||||
<div className="flex h-full w-[96px] items-center border-r border-gray-200 pl-2">{t('workflow.chatVariable.modal.objectType')}</div>
|
||||
<div className="flex h-full w-[230px] items-center pl-2 pr-1">{t('workflow.chatVariable.modal.objectValue')}</div>
|
||||
</div>
|
||||
{list.map((item, index) => (
|
||||
<ObjectValueItem
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { memo, useState } from 'react'
|
||||
import { capitalize } from 'lodash-es'
|
||||
import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
|
||||
import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
|
||||
import type { ConversationVariable } from '@/app/components/workflow/types'
|
||||
import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
|
||||
import { capitalize } from 'lodash-es'
|
||||
import { memo, useState } from 'react'
|
||||
import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
|
||||
import { cn } from '@/utils/classnames'
|
||||
|
||||
type VariableItemProps = {
|
||||
@ -21,27 +21,28 @@ const VariableItem = ({
|
||||
<div className={cn(
|
||||
'radius-md mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
|
||||
destructive && 'border-state-destructive-border hover:bg-state-destructive-hover',
|
||||
)}>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex grow items-center gap-1'>
|
||||
<BubbleX className='h-4 w-4 text-util-colors-teal-teal-700' />
|
||||
<div className='system-sm-medium text-text-primary'>{item.name}</div>
|
||||
<div className='system-xs-medium text-text-tertiary'>{capitalize(item.value_type)}</div>
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex grow items-center gap-1">
|
||||
<BubbleX className="h-4 w-4 text-util-colors-teal-teal-700" />
|
||||
<div className="system-sm-medium text-text-primary">{item.name}</div>
|
||||
<div className="system-xs-medium text-text-tertiary">{capitalize(item.value_type)}</div>
|
||||
</div>
|
||||
<div className='flex shrink-0 items-center gap-1 text-text-tertiary'>
|
||||
<div className='radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary'>
|
||||
<RiEditLine className='h-4 w-4' onClick={() => onEdit(item)}/>
|
||||
<div className="flex shrink-0 items-center gap-1 text-text-tertiary">
|
||||
<div className="radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary">
|
||||
<RiEditLine className="h-4 w-4" onClick={() => onEdit(item)} />
|
||||
</div>
|
||||
<div
|
||||
className='radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive'
|
||||
className="radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive"
|
||||
onMouseOver={() => setDestructive(true)}
|
||||
onMouseOut={() => setDestructive(false)}
|
||||
>
|
||||
<RiDeleteBinLine className='h-4 w-4' onClick={() => onDelete(item)}/>
|
||||
<RiDeleteBinLine className="h-4 w-4" onClick={() => onDelete(item)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='system-xs-regular truncate text-text-tertiary'>{item.description}</div>
|
||||
<div className="system-xs-regular truncate text-text-tertiary">{item.description}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
'use client'
|
||||
import type { ConversationVariable } from '@/app/components/workflow/types'
|
||||
import { RiAddLine } from '@remixicon/react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiAddLine } from '@remixicon/react'
|
||||
import Button from '@/app/components/base/button'
|
||||
import VariableModal from '@/app/components/workflow/panel/chat-variable-panel/components/variable-modal'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import type { ConversationVariable } from '@/app/components/workflow/types'
|
||||
import VariableModal from '@/app/components/workflow/panel/chat-variable-panel/components/variable-modal'
|
||||
|
||||
type Props = {
|
||||
open: boolean
|
||||
@ -38,7 +38,7 @@ const VariableModalTrigger = ({
|
||||
if (open)
|
||||
onClose()
|
||||
}}
|
||||
placement='left-start'
|
||||
placement="left-start"
|
||||
offset={{
|
||||
mainAxis: 8,
|
||||
alignmentAxis: showTip ? -278 : -48,
|
||||
@ -48,13 +48,14 @@ const VariableModalTrigger = ({
|
||||
setOpen(v => !v)
|
||||
if (open)
|
||||
onClose()
|
||||
}}>
|
||||
<Button variant='primary'>
|
||||
<RiAddLine className='mr-1 h-4 w-4' />
|
||||
<span className='system-sm-medium'>{t('workflow.chatVariable.button')}</span>
|
||||
}}
|
||||
>
|
||||
<Button variant="primary">
|
||||
<RiAddLine className="mr-1 h-4 w-4" />
|
||||
<span className="system-sm-medium">{t('workflow.chatVariable.button')}</span>
|
||||
</Button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[11]'>
|
||||
<PortalToFollowElemContent className="z-[11]">
|
||||
<VariableModal
|
||||
chatVar={chatVar}
|
||||
onSave={onSave}
|
||||
|
||||
@ -1,23 +1,19 @@
|
||||
import type { ConversationVariable } from '@/app/components/workflow/types'
|
||||
import { RiCloseLine, RiDraftLine, RiInputField } from '@remixicon/react'
|
||||
import React, { useCallback, useEffect, useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useContext } from 'use-context-selector'
|
||||
import { v4 as uuid4 } from 'uuid'
|
||||
import { RiCloseLine, RiDraftLine, RiInputField } from '@remixicon/react'
|
||||
import VariableTypeSelector from '@/app/components/workflow/panel/chat-variable-panel/components/variable-type-select'
|
||||
import ObjectValueList from '@/app/components/workflow/panel/chat-variable-panel/components/object-value-list'
|
||||
import { DEFAULT_OBJECT_VALUE } from '@/app/components/workflow/panel/chat-variable-panel/components/object-value-item'
|
||||
import ArrayValueList from '@/app/components/workflow/panel/chat-variable-panel/components/array-value-list'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Input from '@/app/components/base/input'
|
||||
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
|
||||
import { ToastContext } from '@/app/components/base/toast'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import type { ConversationVariable } from '@/app/components/workflow/types'
|
||||
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
|
||||
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
|
||||
import ArrayValueList from '@/app/components/workflow/panel/chat-variable-panel/components/array-value-list'
|
||||
import { DEFAULT_OBJECT_VALUE } from '@/app/components/workflow/panel/chat-variable-panel/components/object-value-item'
|
||||
import ObjectValueList from '@/app/components/workflow/panel/chat-variable-panel/components/object-value-list'
|
||||
import VariableTypeSelector from '@/app/components/workflow/panel/chat-variable-panel/components/variable-type-select'
|
||||
import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import BoolValue from './bool-value'
|
||||
import ArrayBoolList from './array-bool-list'
|
||||
import {
|
||||
arrayBoolPlaceholder,
|
||||
arrayNumberPlaceholder,
|
||||
@ -25,7 +21,11 @@ import {
|
||||
arrayStringPlaceholder,
|
||||
objectPlaceholder,
|
||||
} from '@/app/components/workflow/panel/chat-variable-panel/utils'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
|
||||
import ArrayBoolList from './array-bool-list'
|
||||
import BoolValue from './bool-value'
|
||||
|
||||
export type ModalPropsType = {
|
||||
chatVar?: ConversationVariable
|
||||
@ -147,7 +147,7 @@ const ChatVariableModal = ({
|
||||
setEditInJSON(true)
|
||||
if (v === ChatVarType.String || v === ChatVarType.Number || v === ChatVarType.Object)
|
||||
setEditInJSON(false)
|
||||
if(v === ChatVarType.Boolean)
|
||||
if (v === ChatVarType.Boolean)
|
||||
setValue(false)
|
||||
if (v === ChatVarType.ArrayBoolean)
|
||||
setValue([false])
|
||||
@ -197,8 +197,8 @@ const ChatVariableModal = ({
|
||||
}
|
||||
}
|
||||
|
||||
if(type === ChatVarType.ArrayBoolean) {
|
||||
if(editInJSON)
|
||||
if (type === ChatVarType.ArrayBoolean) {
|
||||
if (editInJSON)
|
||||
setEditorContent(JSON.stringify(value.map((item: boolean) => item ? 'True' : 'False')))
|
||||
}
|
||||
setEditInJSON(editInJSON)
|
||||
@ -213,7 +213,7 @@ const ChatVariableModal = ({
|
||||
setEditorContent(content)
|
||||
try {
|
||||
let newValue = JSON.parse(content)
|
||||
if(type === ChatVarType.ArrayBoolean) {
|
||||
if (type === ChatVarType.ArrayBoolean) {
|
||||
newValue = newValue.map((item: string | boolean) => {
|
||||
if (item === 'True' || item === 'true' || item === true)
|
||||
return true
|
||||
@ -271,75 +271,75 @@ const ChatVariableModal = ({
|
||||
<div
|
||||
className={cn('flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl', type === ChatVarType.Object && 'w-[480px]')}
|
||||
>
|
||||
<div className='system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
|
||||
<div className="system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary">
|
||||
{!chatVar ? t('workflow.chatVariable.modal.title') : t('workflow.chatVariable.modal.editTitle')}
|
||||
<div className='flex items-center'>
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center'
|
||||
className="flex h-6 w-6 cursor-pointer items-center justify-center"
|
||||
onClick={onClose}
|
||||
>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='max-h-[480px] overflow-y-auto px-4 py-2'>
|
||||
<div className="max-h-[480px] overflow-y-auto px-4 py-2">
|
||||
{/* name */}
|
||||
<div className='mb-4'>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.chatVariable.modal.name')}</div>
|
||||
<div className='flex'>
|
||||
<div className="mb-4">
|
||||
<div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('workflow.chatVariable.modal.name')}</div>
|
||||
<div className="flex">
|
||||
<Input
|
||||
placeholder={t('workflow.chatVariable.modal.namePlaceholder') || ''}
|
||||
value={name}
|
||||
onChange={handleVarNameChange}
|
||||
onBlur={e => checkVariableName(e.target.value)}
|
||||
type='text'
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* type */}
|
||||
<div className='mb-4'>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.chatVariable.modal.type')}</div>
|
||||
<div className='flex'>
|
||||
<div className="mb-4">
|
||||
<div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('workflow.chatVariable.modal.type')}</div>
|
||||
<div className="flex">
|
||||
<VariableTypeSelector
|
||||
value={type}
|
||||
list={typeList}
|
||||
onSelect={handleTypeChange}
|
||||
popupClassName='w-[327px]'
|
||||
popupClassName="w-[327px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* default value */}
|
||||
<div className='mb-4'>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center justify-between text-text-secondary'>
|
||||
<div className="mb-4">
|
||||
<div className="system-sm-semibold mb-1 flex h-6 items-center justify-between text-text-secondary">
|
||||
<div>{t('workflow.chatVariable.modal.value')}</div>
|
||||
{(type === ChatVarType.ArrayString || type === ChatVarType.ArrayNumber || type === ChatVarType.ArrayBoolean) && (
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='small'
|
||||
className='text-text-tertiary'
|
||||
variant="ghost"
|
||||
size="small"
|
||||
className="text-text-tertiary"
|
||||
onClick={() => handleEditorChange(!editInJSON)}
|
||||
>
|
||||
{editInJSON ? <RiInputField className='mr-1 h-3.5 w-3.5' /> : <RiDraftLine className='mr-1 h-3.5 w-3.5' />}
|
||||
{editInJSON ? <RiInputField className="mr-1 h-3.5 w-3.5" /> : <RiDraftLine className="mr-1 h-3.5 w-3.5" />}
|
||||
{editInJSON ? t('workflow.chatVariable.modal.oneByOne') : t('workflow.chatVariable.modal.editInJSON')}
|
||||
</Button>
|
||||
)}
|
||||
{type === ChatVarType.Object && (
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='small'
|
||||
className='text-text-tertiary'
|
||||
variant="ghost"
|
||||
size="small"
|
||||
className="text-text-tertiary"
|
||||
onClick={() => handleEditorChange(!editInJSON)}
|
||||
>
|
||||
{editInJSON ? <RiInputField className='mr-1 h-3.5 w-3.5' /> : <RiDraftLine className='mr-1 h-3.5 w-3.5' />}
|
||||
{editInJSON ? <RiInputField className="mr-1 h-3.5 w-3.5" /> : <RiDraftLine className="mr-1 h-3.5 w-3.5" />}
|
||||
{editInJSON ? t('workflow.chatVariable.modal.editInForm') : t('workflow.chatVariable.modal.editInJSON')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className="flex">
|
||||
{type === ChatVarType.String && (
|
||||
// Input will remove \n\r, so use Textarea just like description area
|
||||
<textarea
|
||||
className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
|
||||
className="system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
|
||||
value={value}
|
||||
placeholder={t('workflow.chatVariable.modal.valuePlaceholder') || ''}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
@ -350,7 +350,7 @@ const ChatVariableModal = ({
|
||||
placeholder={t('workflow.chatVariable.modal.valuePlaceholder') || ''}
|
||||
value={value}
|
||||
onChange={e => setValue(Number(e.target.value))}
|
||||
type='number'
|
||||
type="number"
|
||||
/>
|
||||
)}
|
||||
{type === ChatVarType.Boolean && (
|
||||
@ -387,13 +387,13 @@ const ChatVariableModal = ({
|
||||
)}
|
||||
|
||||
{editInJSON && (
|
||||
<div className='w-full rounded-[10px] bg-components-input-bg-normal py-2 pl-3 pr-1' style={{ height: editorMinHeight }}>
|
||||
<div className="w-full rounded-[10px] bg-components-input-bg-normal py-2 pl-3 pr-1" style={{ height: editorMinHeight }}>
|
||||
<CodeEditor
|
||||
isExpand
|
||||
noWrapper
|
||||
language={CodeLanguage.json}
|
||||
value={editorContent}
|
||||
placeholder={<div className='whitespace-pre'>{placeholder}</div>}
|
||||
placeholder={<div className="whitespace-pre">{placeholder}</div>}
|
||||
onChange={handleEditorValueChange}
|
||||
/>
|
||||
</div>
|
||||
@ -401,11 +401,11 @@ const ChatVariableModal = ({
|
||||
</div>
|
||||
</div>
|
||||
{/* description */}
|
||||
<div className=''>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.chatVariable.modal.description')}</div>
|
||||
<div className='flex'>
|
||||
<div className="">
|
||||
<div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('workflow.chatVariable.modal.description')}</div>
|
||||
<div className="flex">
|
||||
<textarea
|
||||
className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
|
||||
className="system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
|
||||
value={description}
|
||||
placeholder={t('workflow.chatVariable.modal.descriptionPlaceholder') || ''}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
@ -413,10 +413,10 @@ const ChatVariableModal = ({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-row-reverse rounded-b-2xl p-4 pt-2'>
|
||||
<div className='flex gap-2'>
|
||||
<div className="flex flex-row-reverse rounded-b-2xl p-4 pt-2">
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={onClose}>{t('common.operation.cancel')}</Button>
|
||||
<Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
|
||||
<Button variant="primary" onClick={handleSave}>{t('common.operation.save')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
import React, { useState } from 'react'
|
||||
import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
@ -29,32 +29,40 @@ const VariableTypeSelector = ({
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={() => setOpen(v => !v)}
|
||||
placement='bottom'
|
||||
placement="bottom"
|
||||
>
|
||||
<PortalToFollowElemTrigger className='w-full' onClick={() => setOpen(v => !v)}>
|
||||
<PortalToFollowElemTrigger className="w-full" onClick={() => setOpen(v => !v)}>
|
||||
<div className={cn(
|
||||
'flex w-full cursor-pointer items-center px-2',
|
||||
!inCell && 'radius-md bg-components-input-bg-normal py-1 hover:bg-state-base-hover-alt',
|
||||
inCell && 'py-0.5 hover:bg-state-base-hover',
|
||||
open && !inCell && 'bg-state-base-hover-alt hover:bg-state-base-hover-alt',
|
||||
open && inCell && 'bg-state-base-hover hover:bg-state-base-hover',
|
||||
)}>
|
||||
)}
|
||||
>
|
||||
<div className={cn(
|
||||
'system-sm-regular grow truncate p-1 text-components-input-text-filled',
|
||||
inCell && 'system-xs-regular text-text-secondary',
|
||||
)}>{value}</div>
|
||||
<RiArrowDownSLine className='ml-0.5 h-4 w-4 text-text-quaternary' />
|
||||
)}
|
||||
>
|
||||
{value}
|
||||
</div>
|
||||
<RiArrowDownSLine className="ml-0.5 h-4 w-4 text-text-quaternary" />
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className={cn('z-[11] w-full', popupClassName)}>
|
||||
<div className='radius-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
|
||||
<div className="radius-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
|
||||
{list.map((item: any) => (
|
||||
<div key={item} className='radius-md flex cursor-pointer items-center gap-2 py-[6px] pl-3 pr-2 hover:bg-state-base-hover' onClick={() => {
|
||||
onSelect(item)
|
||||
setOpen(false)
|
||||
}}>
|
||||
<div className='system-md-regular grow truncate text-text-secondary'>{item}</div>
|
||||
{value === item && <RiCheckLine className='h-4 w-4 text-text-accent' />}
|
||||
<div
|
||||
key={item}
|
||||
className="radius-md flex cursor-pointer items-center gap-2 py-[6px] pl-3 pr-2 hover:bg-state-base-hover"
|
||||
onClick={() => {
|
||||
onSelect(item)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<div className="system-md-regular grow truncate text-text-secondary">{item}</div>
|
||||
{value === item && <RiCheckLine className="h-4 w-4 text-text-accent" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user