This commit is contained in:
Joel
2026-03-09 10:14:23 +08:00
1301 changed files with 30844 additions and 12184 deletions

View File

@ -5,7 +5,7 @@ import * as React from 'react'
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import { ToastContext } from '@/app/components/base/toast'
import { ToastContext } from '@/app/components/base/toast/context'
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'
@ -96,7 +96,7 @@ const ObjectValueItem: FC<Props> = ({
{/* Key */}
<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="block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none system-xs-regular placeholder:text-components-input-text-placeholder placeholder:system-xs-regular hover:bg-state-base-hover focus:bg-components-input-bg-active"
placeholder={t('chatVariable.modal.objectKey', { ns: 'workflow' }) || ''}
value={list[index].key}
onChange={handleKeyChange(index)}
@ -115,7 +115,7 @@ const ObjectValueItem: FC<Props> = ({
{/* Value */}
<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="block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none system-xs-regular placeholder:text-components-input-text-placeholder placeholder:system-xs-regular hover:bg-state-base-hover focus:bg-components-input-bg-active"
placeholder={t('chatVariable.modal.objectValue', { ns: 'workflow' }) || ''}
value={list[index].value}
onChange={handleValueChange(index)}

View File

@ -17,7 +17,7 @@ const ObjectValueList: FC<Props> = ({
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-7 items-center uppercase text-text-tertiary system-xs-medium">
<div className="flex h-full w-[120px] items-center border-r border-gray-200 pl-2">{t('chatVariable.modal.objectKey', { ns: 'workflow' })}</div>
<div className="flex h-full w-[96px] items-center border-r border-gray-200 pl-2">{t('chatVariable.modal.objectType', { ns: 'workflow' })}</div>
<div className="flex h-full w-[230px] items-center pl-2 pr-1">{t('chatVariable.modal.objectValue', { ns: 'workflow' })}</div>

View File

@ -19,22 +19,22 @@ const VariableItem = ({
const [destructive, setDestructive] = useState(false)
return (
<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',
'mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs radius-md 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="text-text-primary system-sm-medium">{item.name}</div>
<div className="text-text-tertiary system-xs-medium">{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">
<div className="cursor-pointer p-1 radius-md 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="cursor-pointer p-1 radius-md hover:bg-state-destructive-hover hover:text-text-destructive"
onMouseOver={() => setDestructive(true)}
onMouseOut={() => setDestructive(false)}
>
@ -42,7 +42,7 @@ const VariableItem = ({
</div>
</div>
</div>
<div className="system-xs-regular truncate text-text-tertiary">{item.description}</div>
<div className="truncate text-text-tertiary system-xs-regular">{item.description}</div>
</div>
)
}

View File

@ -7,7 +7,7 @@ import { useContext } from 'use-context-selector'
import { v4 as uuid4 } from 'uuid'
import Button from '@/app/components/base/button'
import Input from '@/app/components/base/input'
import { ToastContext } from '@/app/components/base/toast'
import { ToastContext } from '@/app/components/base/toast/context'
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'
@ -273,7 +273,7 @@ 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="mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold">
{!chatVar ? t('chatVariable.modal.title', { ns: 'workflow' }) : t('chatVariable.modal.editTitle', { ns: 'workflow' })}
<div className="flex items-center">
<div
@ -287,7 +287,7 @@ const ChatVariableModal = ({
<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('chatVariable.modal.name', { ns: 'workflow' })}</div>
<div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">{t('chatVariable.modal.name', { ns: 'workflow' })}</div>
<div className="flex">
<Input
placeholder={t('chatVariable.modal.namePlaceholder', { ns: 'workflow' }) || ''}
@ -300,7 +300,7 @@ const ChatVariableModal = ({
</div>
{/* type */}
<div className="mb-4">
<div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('chatVariable.modal.type', { ns: 'workflow' })}</div>
<div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">{t('chatVariable.modal.type', { ns: 'workflow' })}</div>
<div className="flex">
<VariableTypeSelector
value={type}
@ -312,7 +312,7 @@ const ChatVariableModal = ({
</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-1 flex h-6 items-center justify-between text-text-secondary system-sm-semibold">
<div>{t('chatVariable.modal.value', { ns: 'workflow' })}</div>
{(type === ChatVarType.ArrayString || type === ChatVarType.ArrayNumber || type === ChatVarType.ArrayBoolean) && (
<Button
@ -341,7 +341,7 @@ const ChatVariableModal = ({
{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="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 system-sm-regular placeholder:text-components-input-text-placeholder placeholder:system-sm-regular 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('chatVariable.modal.valuePlaceholder', { ns: 'workflow' }) || ''}
onChange={e => setValue(e.target.value)}
@ -404,10 +404,10 @@ const ChatVariableModal = ({
</div>
{/* description */}
<div className="">
<div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('chatVariable.modal.description', { ns: 'workflow' })}</div>
<div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">{t('chatVariable.modal.description', { ns: 'workflow' })}</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="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 system-sm-regular placeholder:text-components-input-text-placeholder placeholder:system-sm-regular 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('chatVariable.modal.descriptionPlaceholder', { ns: 'workflow' }) || ''}
onChange={e => setDescription(e.target.value)}

View File

@ -35,15 +35,15 @@ const VariableTypeSelector = ({
<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 && 'bg-components-input-bg-normal py-1 radius-md 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',
'grow truncate p-1 text-components-input-text-filled system-sm-regular',
inCell && 'text-text-secondary system-xs-regular',
)}
>
{value}
@ -52,17 +52,17 @@ const VariableTypeSelector = ({
</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="border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg radius-xl">
{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"
className="flex cursor-pointer items-center gap-2 py-[6px] pl-3 pr-2 radius-md hover:bg-state-base-hover"
onClick={() => {
onSelect(item)
setOpen(false)
}}
>
<div className="system-md-regular grow truncate text-text-secondary">{item}</div>
<div className="grow truncate text-text-secondary system-md-regular">{item}</div>
{value === item && <RiCheckLine className="h-4 w-4 text-text-accent" />}
</div>
))}

View File

@ -126,7 +126,7 @@ const ChatVariablePanel = () => {
'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
)}
>
<div className="system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary">
<div className="flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold">
{t('chatVariable.panelTitle', { ns: 'workflow' })}
<div className="flex items-center gap-1">
<ActionButton state={showTip ? ActionButtonState.Active : undefined} onClick={() => setShowTip(!showTip)}>
@ -142,33 +142,33 @@ const ChatVariablePanel = () => {
</div>
{showTip && (
<div className="shrink-0 px-3 pb-2 pt-2.5">
<div className="radius-2xl relative bg-background-section-burn p-3">
<div className="system-2xs-medium-uppercase inline-block rounded-[5px] border border-divider-deep px-[5px] py-[3px] text-text-tertiary">TIPS</div>
<div className="system-sm-regular mb-4 mt-1 text-text-secondary">
<div className="relative bg-background-section-burn p-3 radius-2xl">
<div className="inline-block rounded-[5px] border border-divider-deep px-[5px] py-[3px] text-text-tertiary system-2xs-medium-uppercase">TIPS</div>
<div className="mb-4 mt-1 text-text-secondary system-sm-regular">
{t('chatVariable.panelDescription', { ns: 'workflow' })}
</div>
<div className="flex items-center gap-2">
<div className="radius-lg flex flex-col border border-workflow-block-border bg-workflow-block-bg p-3 pb-4 shadow-md">
<div className="flex flex-col border border-workflow-block-border bg-workflow-block-bg p-3 pb-4 shadow-md radius-lg">
<BubbleX className="mb-1 h-4 w-4 shrink-0 text-util-colors-teal-teal-700" />
<div className="system-xs-semibold text-text-secondary">conversation_var</div>
<div className="system-2xs-regular text-text-tertiary">String</div>
<div className="text-text-secondary system-xs-semibold">conversation_var</div>
<div className="text-text-tertiary system-2xs-regular">String</div>
</div>
<div className="grow">
<div className="mb-2 flex items-center gap-2 py-1">
<div className="flex h-3 w-16 shrink-0 items-center gap-1 px-1">
<LongArrowLeft className="h-2 grow text-text-quaternary" />
<div className="system-2xs-medium shrink-0 text-text-tertiary">WRITE</div>
<div className="shrink-0 text-text-tertiary system-2xs-medium">WRITE</div>
</div>
<BlockIcon className="shrink-0" type={BlockEnum.Assigner} />
<div className="system-xs-semibold grow truncate text-text-secondary">{t('blocks.assigner', { ns: 'workflow' })}</div>
<div className="grow truncate text-text-secondary system-xs-semibold">{t('blocks.assigner', { ns: 'workflow' })}</div>
</div>
<div className="flex items-center gap-2 py-1">
<div className="flex h-3 w-16 shrink-0 items-center gap-1 px-1">
<div className="system-2xs-medium shrink-0 text-text-tertiary">READ</div>
<div className="shrink-0 text-text-tertiary system-2xs-medium">READ</div>
<LongArrowRight className="h-2 grow text-text-quaternary" />
</div>
<BlockIcon className="shrink-0" type={BlockEnum.LLM} />
<div className="system-xs-semibold grow truncate text-text-secondary">{t('blocks.llm', { ns: 'workflow' })}</div>
<div className="grow truncate text-text-secondary system-xs-semibold">{t('blocks.llm', { ns: 'workflow' })}</div>
</div>
</div>
</div>