| @@ -1,12 +1,10 @@ | |||
| 'use client' | |||
| import type { FC } from 'react' | |||
| import React from 'react' | |||
| import React, { useState } from 'react' | |||
| import { RiAddLine, RiDeleteBinLine, RiDraggable } from '@remixicon/react' | |||
| import { useTranslation } from 'react-i18next' | |||
| import { PlusIcon } from '@heroicons/react/24/outline' | |||
| import { ReactSortable } from 'react-sortablejs' | |||
| import RemoveIcon from '../../base/icons/remove-icon' | |||
| import s from './style.module.css' | |||
| import cn from '@/utils/classnames' | |||
| export type Options = string[] | |||
| export type IConfigSelectProps = { | |||
| @@ -19,6 +17,8 @@ const ConfigSelect: FC<IConfigSelectProps> = ({ | |||
| onChange, | |||
| }) => { | |||
| const { t } = useTranslation() | |||
| const [focusID, setFocusID] = useState<number | null>(null) | |||
| const [deletingID, setDeletingID] = useState<number | null>(null) | |||
| const optionList = options.map((content, index) => { | |||
| return ({ | |||
| @@ -40,12 +40,15 @@ const ConfigSelect: FC<IConfigSelectProps> = ({ | |||
| animation={150} | |||
| > | |||
| {options.map((o, index) => ( | |||
| <div className={`${s.inputWrap} relative`} key={index}> | |||
| <div className='handle flex h-4 w-4 cursor-grab items-center justify-center'> | |||
| <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||
| <path fillRule="evenodd" clipRule="evenodd" d="M1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2ZM1 6C1.55228 6 2 5.55228 2 5C2 4.44772 1.55228 4 1 4C0.447715 4 0 4.44772 0 5C0 5.55228 0.447715 6 1 6ZM6 1C6 1.55228 5.55228 2 5 2C4.44772 2 4 1.55228 4 1C4 0.447715 4.44772 0 5 0C5.55228 0 6 0.447715 6 1ZM5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6ZM2 9C2 9.55229 1.55228 10 1 10C0.447715 10 0 9.55229 0 9C0 8.44771 0.447715 8 1 8C1.55228 8 2 8.44771 2 9ZM5 10C5.55228 10 6 9.55229 6 9C6 8.44771 5.55228 8 5 8C4.44772 8 4 8.44771 4 9C4 9.55229 4.44772 10 5 10Z" fill="#98A2B3" /> | |||
| </svg> | |||
| </div> | |||
| <div | |||
| className={cn( | |||
| 'group relative flex items-center rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-2.5 hover:bg-components-panel-on-panel-item-bg-hover', | |||
| focusID === index && 'border-components-input-border-active bg-components-input-bg-active hover:border-components-input-border-active hover:bg-components-input-bg-active', | |||
| deletingID === index && 'border-components-input-border-destructive bg-state-destructive-hover hover:border-components-input-border-destructive hover:bg-state-destructive-hover', | |||
| )} | |||
| key={index} | |||
| > | |||
| <RiDraggable className='handle h-4 w-4 cursor-grab text-text-quaternary' /> | |||
| <input | |||
| key={index} | |||
| type="input" | |||
| @@ -59,14 +62,20 @@ const ConfigSelect: FC<IConfigSelectProps> = ({ | |||
| return item | |||
| })) | |||
| }} | |||
| className={'h-9 w-full grow cursor-pointer border-0 bg-transparent pl-1.5 pr-8 text-sm leading-9 text-gray-900 focus:outline-none'} | |||
| className={'h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pl-1.5 pr-8 text-sm leading-9 text-text-secondary focus:outline-none'} | |||
| onFocus={() => setFocusID(index)} | |||
| onBlur={() => setFocusID(null)} | |||
| /> | |||
| <RemoveIcon | |||
| className={`${s.deleteBtn} absolute right-1.5 top-1/2 h-6 w-6 translate-y-[-50%] cursor-pointer items-center justify-center rounded-md hover:bg-[#FEE4E2]`} | |||
| <div | |||
| className='absolute right-1.5 top-1/2 block translate-y-[-50%] cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive' | |||
| onClick={() => { | |||
| onChange(options.filter((_, i) => index !== i)) | |||
| }} | |||
| /> | |||
| onMouseEnter={() => setDeletingID(index)} | |||
| onMouseLeave={() => setDeletingID(null)} | |||
| > | |||
| <RiDeleteBinLine className='h-3.5 w-3.5' /> | |||
| </div> | |||
| </div> | |||
| ))} | |||
| </ReactSortable> | |||
| @@ -75,9 +84,9 @@ const ConfigSelect: FC<IConfigSelectProps> = ({ | |||
| <div | |||
| onClick={() => { onChange([...options, '']) }} | |||
| className='flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-gray-100 px-3 text-gray-400'> | |||
| <PlusIcon width={16} height={16}></PlusIcon> | |||
| <div className='text-[13px] text-gray-500'>{t('appDebug.variableConfig.addOption')}</div> | |||
| className='mt-1 flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-components-button-tertiary-bg px-3 text-components-button-tertiary-text hover:bg-components-button-tertiary-bg-hover'> | |||
| <RiAddLine className='h-4 w-4' /> | |||
| <div className='system-sm-medium text-[13px]'>{t('appDebug.variableConfig.addOption')}</div> | |||
| </div> | |||
| </div> | |||
| ) | |||
| @@ -1,21 +0,0 @@ | |||
| .inputWrap { | |||
| display: flex; | |||
| align-items: center; | |||
| border-radius: 8px; | |||
| border: 1px solid #EAECF0; | |||
| padding-left: 10px; | |||
| cursor: pointer; | |||
| } | |||
| .deleteBtn { | |||
| display: none; | |||
| display: flex; | |||
| } | |||
| .inputWrap:hover { | |||
| box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); | |||
| } | |||
| .inputWrap:hover .deleteBtn { | |||
| display: flex; | |||
| } | |||
| @@ -70,7 +70,7 @@ const TagInput: FC<TagInputProps> = ({ | |||
| } | |||
| return ( | |||
| <div className={cn('flex flex-wrap', !isInWorkflow && 'min-w-[200px]', isSpecialMode ? 'rounded-lg bg-gray-100 pb-1 pl-1' : '')}> | |||
| <div className={cn('flex flex-wrap', !isInWorkflow && 'min-w-[200px]', isSpecialMode ? 'rounded-lg bg-components-input-bg-normal pb-1 pl-1' : '')}> | |||
| { | |||
| (items || []).map((item, index) => ( | |||
| <div | |||
| @@ -47,7 +47,7 @@ const Trigger: FC<TriggerProps> = ({ | |||
| 'relative flex h-8 cursor-pointer items-center rounded-lg px-2', | |||
| !isInWorkflow && 'border ring-inset hover:ring-[0.5px]', | |||
| !isInWorkflow && (disabled ? 'border-text-warning bg-state-warning-hover ring-text-warning' : 'border-util-colors-indigo-indigo-600 bg-state-accent-hover ring-util-colors-indigo-indigo-600'), | |||
| isInWorkflow && 'border border-workflow-block-parma-bg bg-workflow-block-parma-bg pr-[30px] hover:border-gray-200', | |||
| isInWorkflow && 'border border-workflow-block-parma-bg bg-workflow-block-parma-bg pr-[30px] hover:border-components-input-border-active', | |||
| )} | |||
| > | |||
| { | |||
| @@ -128,7 +128,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({ | |||
| } | |||
| </PortalToFollowElemTrigger> | |||
| <PortalToFollowElemContent className='z-[1000]'> | |||
| <div className={`rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg ${popupClassName}`}> | |||
| <div className={`rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg ${popupClassName}`}> | |||
| <div className='px-2 pt-2' onClick={e => e.stopPropagation()}> | |||
| {activeTab === TabsEnum.Blocks && ( | |||
| <Input | |||
| @@ -79,37 +79,37 @@ const WorkflowChecklist = ({ | |||
| </PortalToFollowElemTrigger> | |||
| <PortalToFollowElemContent className='z-[12]'> | |||
| <div | |||
| className='w-[420px] overflow-y-auto rounded-2xl border-[0.5px] border-black/5 bg-white shadow-lg' | |||
| className='w-[420px] overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg' | |||
| style={{ | |||
| maxHeight: 'calc(2 / 3 * 100vh)', | |||
| }} | |||
| > | |||
| <div className='text-md sticky top-0 z-[1] flex h-[44px] items-center bg-white pl-4 pr-3 pt-3 font-semibold text-gray-900'> | |||
| <div className='text-md sticky top-0 z-[1] flex h-[44px] items-center bg-components-panel-bg pl-4 pr-3 pt-3 font-semibold text-text-primary'> | |||
| <div className='grow'>{t('workflow.panel.checklist')}{needWarningNodes.length ? `(${needWarningNodes.length})` : ''}</div> | |||
| <div | |||
| className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center' | |||
| onClick={() => setOpen(false)} | |||
| > | |||
| <RiCloseLine className='h-4 w-4 text-gray-500' /> | |||
| <RiCloseLine className='h-4 w-4 text-text-tertiary' /> | |||
| </div> | |||
| </div> | |||
| <div className='py-2'> | |||
| { | |||
| !!needWarningNodes.length && ( | |||
| <> | |||
| <div className='px-4 text-xs text-gray-400'>{t('workflow.panel.checklistTip')}</div> | |||
| <div className='px-4 text-xs text-text-tertiary'>{t('workflow.panel.checklistTip')}</div> | |||
| <div className='px-4 py-2'> | |||
| { | |||
| needWarningNodes.map(node => ( | |||
| <div | |||
| key={node.id} | |||
| className='mb-2 cursor-pointer rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xs last-of-type:mb-0' | |||
| className='mb-2 cursor-pointer rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs last-of-type:mb-0' | |||
| onClick={() => { | |||
| handleNodeSelect(node.id) | |||
| setOpen(false) | |||
| }} | |||
| > | |||
| <div className='flex h-9 items-center p-2 text-xs font-medium text-gray-700'> | |||
| <div className='flex h-9 items-center p-2 text-xs font-medium text-text-secondary'> | |||
| <BlockIcon | |||
| type={node.type} | |||
| className='mr-1.5' | |||
| @@ -119,11 +119,11 @@ const WorkflowChecklist = ({ | |||
| {node.title} | |||
| </span> | |||
| </div> | |||
| <div className='border-t-[0.5px] border-t-black/2'> | |||
| <div className='border-t-[0.5px] border-divider-regular'> | |||
| { | |||
| node.unConnected && ( | |||
| <div className='rounded-b-lg bg-gray-25 px-3 py-2'> | |||
| <div className='flex text-xs leading-[18px] text-gray-500'> | |||
| <div className='px-3 py-2 last:rounded-b-lg'> | |||
| <div className='flex text-xs leading-[18px] text-text-tertiary'> | |||
| <AlertTriangle className='mr-2 mt-[3px] h-3 w-3 text-[#F79009]' /> | |||
| {t('workflow.common.needConnectTip')} | |||
| </div> | |||
| @@ -132,8 +132,8 @@ const WorkflowChecklist = ({ | |||
| } | |||
| { | |||
| node.errorMessage && ( | |||
| <div className='rounded-b-lg bg-gray-25 px-3 py-2'> | |||
| <div className='flex text-xs leading-[18px] text-gray-500'> | |||
| <div className='px-3 py-2 last:rounded-b-lg'> | |||
| <div className='flex text-xs leading-[18px] text-text-tertiary'> | |||
| <AlertTriangle className='mr-2 mt-[3px] h-3 w-3 text-[#F79009]' /> | |||
| {node.errorMessage} | |||
| </div> | |||
| @@ -150,8 +150,8 @@ const WorkflowChecklist = ({ | |||
| } | |||
| { | |||
| !needWarningNodes.length && ( | |||
| <div className='mx-4 mb-3 rounded-lg bg-gray-50 py-4 text-center text-xs text-gray-400'> | |||
| <ChecklistSquare className='mx-auto mb-[5px] h-8 w-8 text-gray-300' /> | |||
| <div className='mx-4 mb-3 rounded-lg bg-components-panel-bg py-4 text-center text-xs text-text-tertiary'> | |||
| <ChecklistSquare className='mx-auto mb-[5px] h-8 w-8 text-text-quaternary' /> | |||
| {t('workflow.panel.checklistResolved')} | |||
| </div> | |||
| ) | |||
| @@ -87,9 +87,9 @@ const ViewHistory = ({ | |||
| { | |||
| withText && ( | |||
| <div className={cn( | |||
| 'flex h-8 items-center rounded-lg border-[0.5px] border-gray-200 bg-white px-3 shadow-xs', | |||
| 'cursor-pointer text-[13px] font-medium text-primary-600', | |||
| open && '!bg-primary-50', | |||
| 'flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 shadow-xs', | |||
| 'cursor-pointer text-[13px] font-medium text-components-button-secondary-text hover:bg-components-button-secondary-bg-hover', | |||
| open && 'bg-components-button-secondary-bg-hover', | |||
| )}> | |||
| <ClockPlay | |||
| className={'mr-1 h-4 w-4'} | |||
| @@ -118,12 +118,12 @@ const ViewHistory = ({ | |||
| </PortalToFollowElemTrigger> | |||
| <PortalToFollowElemContent className='z-[12]'> | |||
| <div | |||
| className='ml-2 flex w-[240px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-gray-200 bg-white shadow-xl' | |||
| className='ml-2 flex w-[240px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl' | |||
| style={{ | |||
| maxHeight: 'calc(2 / 3 * 100vh)', | |||
| }} | |||
| > | |||
| <div className='sticky top-0 flex items-center justify-between bg-white px-4 pt-3 text-base font-semibold text-gray-900'> | |||
| <div className='sticky top-0 flex items-center justify-between bg-components-panel-bg px-4 pt-3 text-base font-semibold text-text-primary'> | |||
| <div className='grow'>{t('workflow.common.runHistory')}</div> | |||
| <div | |||
| className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center' | |||
| @@ -133,7 +133,7 @@ const ViewHistory = ({ | |||
| setOpen(false) | |||
| }} | |||
| > | |||
| <RiCloseLine className='h-4 w-4 text-gray-500' /> | |||
| <RiCloseLine className='h-4 w-4 text-text-tertiary' /> | |||
| </div> | |||
| </div> | |||
| { | |||
| @@ -149,8 +149,8 @@ const ViewHistory = ({ | |||
| { | |||
| !data?.data.length && ( | |||
| <div className='py-12'> | |||
| <ClockPlaySlim className='mx-auto mb-2 h-8 w-8 text-gray-300' /> | |||
| <div className='text-center text-[13px] text-gray-400'> | |||
| <ClockPlaySlim className='mx-auto mb-2 h-8 w-8 text-text-quaternary' /> | |||
| <div className='text-center text-[13px] text-text-quaternary'> | |||
| {t('workflow.common.notRunning')} | |||
| </div> | |||
| </div> | |||
| @@ -161,8 +161,8 @@ const ViewHistory = ({ | |||
| <div | |||
| key={item.id} | |||
| className={cn( | |||
| 'mb-0.5 flex cursor-pointer rounded-lg px-2 py-[7px] hover:bg-primary-50', | |||
| item.id === historyWorkflowData?.id && 'bg-primary-50', | |||
| 'mb-0.5 flex cursor-pointer rounded-lg px-2 py-[7px] hover:bg-state-base-hover', | |||
| item.id === historyWorkflowData?.id && 'bg-state-accent-hover hover:bg-state-accent-hover', | |||
| )} | |||
| onClick={() => { | |||
| workflowStore.setState({ | |||
| @@ -195,13 +195,13 @@ const ViewHistory = ({ | |||
| <div> | |||
| <div | |||
| className={cn( | |||
| 'flex items-center text-[13px] font-medium leading-[18px]', | |||
| item.id === historyWorkflowData?.id && 'text-primary-600', | |||
| 'flex items-center text-[13px] font-medium leading-[18px] text-text-primary', | |||
| item.id === historyWorkflowData?.id && 'text-text-accent', | |||
| )} | |||
| > | |||
| {`Test ${isChatMode ? 'Chat' : 'Run'} #${item.sequence_number}`} | |||
| </div> | |||
| <div className='flex items-center text-xs leading-[18px] text-gray-500'> | |||
| <div className='flex items-center text-xs leading-[18px] text-text-tertiary'> | |||
| {item.created_by_account?.name} · {formatTimeFromNow((item.finished_at || item.created_at) * 1000)} | |||
| </div> | |||
| </div> | |||
| @@ -18,8 +18,8 @@ export const AddVariablePopup = ({ | |||
| const { t } = useTranslation() | |||
| return ( | |||
| <div className='w-[240px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg'> | |||
| <div className='flex h-[34px] items-center border-b-[0.5px] border-b-gray-200 px-4 text-[13px] font-semibold text-gray-700'> | |||
| <div className='w-[240px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg'> | |||
| <div className='flex h-[34px] items-center border-b-[0.5px] border-b-divider-regular px-4 text-[13px] font-semibold text-text-secondary'> | |||
| {t('workflow.nodes.variableAssigner.setAssignVariable')} | |||
| </div> | |||
| <div className='p-1'> | |||
| @@ -139,18 +139,16 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({ | |||
| onRun(submitData) | |||
| }, [forms, onRun, t]) | |||
| return ( | |||
| <div className='absolute inset-0 z-10 rounded-2xl pt-10' style={{ | |||
| backgroundColor: 'rgba(16, 24, 40, 0.20)', | |||
| }}> | |||
| <div className='flex h-full flex-col rounded-2xl bg-white'> | |||
| <div className='absolute inset-0 z-10 rounded-2xl bg-background-overlay-alt pt-10'> | |||
| <div className='flex h-full flex-col rounded-2xl bg-components-panel-bg'> | |||
| <div className='flex h-8 shrink-0 items-center justify-between pl-4 pr-3 pt-3'> | |||
| <div className='truncate text-base font-semibold text-gray-900'> | |||
| <div className='truncate text-base font-semibold text-text-primary'> | |||
| {t(`${i18nPrefix}.testRun`)} {nodeName} | |||
| </div> | |||
| <div className='ml-2 shrink-0 cursor-pointer p-1' onClick={() => { | |||
| onHide() | |||
| }}> | |||
| <RiCloseLine className='h-4 w-4 text-gray-500 ' /> | |||
| <RiCloseLine className='h-4 w-4 text-text-tertiary ' /> | |||
| </div> | |||
| </div> | |||
| { | |||
| @@ -178,14 +176,14 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({ | |||
| <div className='mt-4 flex justify-between space-x-2 px-4' > | |||
| {isRunning && ( | |||
| <div | |||
| className='cursor-pointer rounded-lg border border-gray-200 bg-white p-2 shadow-xs' | |||
| className='cursor-pointer rounded-lg border border-divider-regular bg-components-button-secondary-bg p-2 shadow-xs' | |||
| onClick={onStop} | |||
| > | |||
| <StopCircle className='h-4 w-4 text-gray-500' /> | |||
| <StopCircle className='h-4 w-4 text-text-tertiary' /> | |||
| </div> | |||
| )} | |||
| <Button disabled={!isFileLoaded || isRunning} variant='primary' className='w-0 grow space-x-2' onClick={handleRun}> | |||
| {isRunning && <RiLoader2Line className='h-4 w-4 animate-spin text-white' />} | |||
| {isRunning && <RiLoader2Line className='h-4 w-4 animate-spin' />} | |||
| <div>{t(`${i18nPrefix}.${isRunning ? 'running' : 'startRun'}`)}</div> | |||
| </Button> | |||
| </div> | |||
| @@ -8,6 +8,8 @@ import { CodeLanguage } from '@/app/components/workflow/nodes/code/types' | |||
| import { | |||
| getFilesInLogs, | |||
| } from '@/app/components/base/file-uploader/utils' | |||
| import { Theme } from '@/types/app' | |||
| import useTheme from '@/hooks/use-theme' | |||
| import './style.css' | |||
| import { noop } from 'lodash-es' | |||
| @@ -43,15 +45,6 @@ export const languageMap = { | |||
| [CodeLanguage.json]: 'json', | |||
| } | |||
| const DEFAULT_THEME = { | |||
| base: 'vs', | |||
| inherit: true, | |||
| rules: [], | |||
| colors: { | |||
| 'editor.background': '#F2F4F7', // #00000000 transparent. But it will has a blue border | |||
| }, | |||
| } | |||
| const CodeEditor: FC<Props> = ({ | |||
| value = '', | |||
| placeholder = '', | |||
| @@ -76,7 +69,7 @@ const CodeEditor: FC<Props> = ({ | |||
| const [isMounted, setIsMounted] = React.useState(false) | |||
| const minHeight = height || 200 | |||
| const [editorContentHeight, setEditorContentHeight] = useState(56) | |||
| const { theme: appTheme } = useTheme() | |||
| const valueRef = useRef(value) | |||
| useEffect(() => { | |||
| valueRef.current = value | |||
| @@ -114,27 +107,7 @@ const CodeEditor: FC<Props> = ({ | |||
| setIsFocus(false) | |||
| }) | |||
| monaco.editor.defineTheme('default-theme', DEFAULT_THEME) | |||
| monaco.editor.defineTheme('blur-theme', { | |||
| base: 'vs', | |||
| inherit: true, | |||
| rules: [], | |||
| colors: { | |||
| 'editor.background': '#F2F4F7', | |||
| }, | |||
| }) | |||
| monaco.editor.defineTheme('focus-theme', { | |||
| base: 'vs', | |||
| inherit: true, | |||
| rules: [], | |||
| colors: { | |||
| 'editor.background': '#ffffff', | |||
| }, | |||
| }) | |||
| monaco.editor.setTheme('default-theme') // Fix: sometimes not load the default theme | |||
| monaco.editor.setTheme(appTheme === Theme.light ? 'light' : 'vs-dark') // Fix: sometimes not load the default theme | |||
| onMount?.(editor, monaco) | |||
| setIsMounted(true) | |||
| @@ -151,12 +124,11 @@ const CodeEditor: FC<Props> = ({ | |||
| } | |||
| })() | |||
| const theme = (() => { | |||
| if (noWrapper) | |||
| return 'default-theme' | |||
| return isFocus ? 'focus-theme' : 'blur-theme' | |||
| })() | |||
| const theme = useMemo(() => { | |||
| if (appTheme === Theme.light) | |||
| return 'light' | |||
| return 'vs-dark' | |||
| }, [appTheme]) | |||
| const main = ( | |||
| <> | |||
| @@ -6,6 +6,17 @@ | |||
| padding-left: 0; | |||
| } | |||
| .monaco-editor { | |||
| background-color: transparent !important; | |||
| outline: none !important; | |||
| } | |||
| .monaco-editor .monaco-editor-background { | |||
| background-color: transparent !important; | |||
| } | |||
| .monaco-editor .margin { | |||
| background-color: transparent !important; | |||
| } | |||
| /* hide readonly tooltip */ | |||
| .monaco-editor-overlaymessage { | |||
| display: none !important; | |||
| @@ -7,7 +7,7 @@ const FailBranchCard = () => { | |||
| return ( | |||
| <div className='px-4 pt-2'> | |||
| <div className='rounded-[10px] bg-workflow-process-bg p-4'> | |||
| <div className='mb-2 flex h-8 w-8 items-center justify-center rounded-[10px] border-[0.5px] bg-components-card-bg shadow-lg'> | |||
| <div className='mb-2 flex h-8 w-8 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg'> | |||
| <RiMindMap className='h-5 w-5 text-text-tertiary' /> | |||
| </div> | |||
| <div className='system-sm-medium mb-1 text-text-secondary'> | |||
| @@ -113,7 +113,7 @@ const Editor: FC<Props> = ({ | |||
| <Tooltip | |||
| popupContent={`${t('workflow.common.insertVarTip')}`} | |||
| > | |||
| <div className='cursor-pointer rounded-[5px] border-[0.5px] border-black/5 bg-white p-0.5 shadow-lg hover:bg-gray-100'> | |||
| <div className='cursor-pointer rounded-[5px] border-[0.5px] border-divider-regular bg-components-badge-white-to-dark p-0.5 shadow-lg'> | |||
| <Variable02 className='h-3.5 w-3.5 text-components-button-secondary-accent-text' /> | |||
| </div> | |||
| </Tooltip> | |||
| @@ -32,12 +32,12 @@ const RoleItem: FC<RoleItemProps> = ({ | |||
| }, [onChange]) | |||
| return ( | |||
| <div className='flex items-center justify-between'> | |||
| <div className='text-[13px] font-normal text-gray-700'>{title}</div> | |||
| <input | |||
| <div className='text-[13px] font-normal text-text-secondary'>{title}</div> | |||
| <Input | |||
| readOnly={readonly} | |||
| value={value} | |||
| onChange={handleChange} | |||
| className='h-8 w-[200px] rounded-lg border-0 bg-gray-100 px-2.5 text-[13px] leading-8 text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200' | |||
| className='h-8 w-[200px]' | |||
| type='text' /> | |||
| </div> | |||
| ) | |||
| @@ -180,7 +180,7 @@ const MemoryConfig: FC<Props> = ({ | |||
| </div> | |||
| {canSetRoleName && ( | |||
| <div className='mt-4'> | |||
| <div className='text-xs font-medium uppercase leading-6 text-gray-500'>{t(`${i18nPrefix}.conversationRoleName`)}</div> | |||
| <div className='text-xs font-medium uppercase leading-6 text-text-tertiary'>{t(`${i18nPrefix}.conversationRoleName`)}</div> | |||
| <div className='mt-1 space-y-2'> | |||
| <RoleItem | |||
| readonly={readonly} | |||
| @@ -47,7 +47,7 @@ export const VarItem: FC<VarItemProps> = ({ | |||
| <div className='system-xs-regular mt-0.5 text-text-tertiary'> | |||
| {description} | |||
| {subItems && ( | |||
| <div className='ml-2 border-l border-gray-200 pl-2'> | |||
| <div className='ml-2 border-l border-divider-regular pl-2'> | |||
| {subItems.map((item, index) => ( | |||
| <VarItem | |||
| key={index} | |||
| @@ -47,7 +47,7 @@ const ChangeBlock = ({ | |||
| const renderTrigger = useCallback(() => { | |||
| return ( | |||
| <div className='flex h-8 w-[232px] cursor-pointer items-center rounded-lg px-3 text-sm text-gray-700 hover:bg-gray-50'> | |||
| <div className='flex h-8 w-[232px] cursor-pointer items-center rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover'> | |||
| {t('workflow.panel.changeBlock')} | |||
| </div> | |||
| ) | |||
| @@ -84,7 +84,7 @@ const PanelOperatorPopup = ({ | |||
| const link = useNodeHelpLink(data.type) | |||
| return ( | |||
| <div className='w-[240px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xl'> | |||
| <div className='w-[240px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'> | |||
| { | |||
| (showChangeBlock || canRunBySingle(data.type)) && ( | |||
| <> | |||
| @@ -93,8 +93,8 @@ const PanelOperatorPopup = ({ | |||
| canRunBySingle(data.type) && ( | |||
| <div | |||
| className={` | |||
| flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-gray-700 | |||
| hover:bg-gray-50 | |||
| flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-text-secondary | |||
| hover:bg-state-base-hover | |||
| `} | |||
| onClick={() => { | |||
| handleNodeSelect(id) | |||
| @@ -117,7 +117,7 @@ const PanelOperatorPopup = ({ | |||
| ) | |||
| } | |||
| </div> | |||
| <div className='h-[1px] bg-gray-100'></div> | |||
| <div className='h-[1px] bg-divider-regular'></div> | |||
| </> | |||
| ) | |||
| } | |||
| @@ -126,7 +126,7 @@ const PanelOperatorPopup = ({ | |||
| <> | |||
| <div className='p-1'> | |||
| <div | |||
| className='flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-gray-700 hover:bg-gray-50' | |||
| className='flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover' | |||
| onClick={() => { | |||
| onClosePopup() | |||
| handleNodesCopy(id) | |||
| @@ -136,7 +136,7 @@ const PanelOperatorPopup = ({ | |||
| <ShortcutsName keys={['ctrl', 'c']} /> | |||
| </div> | |||
| <div | |||
| className='flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-gray-700 hover:bg-gray-50' | |||
| className='flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover' | |||
| onClick={() => { | |||
| onClosePopup() | |||
| handleNodesDuplicate(id) | |||
| @@ -146,12 +146,12 @@ const PanelOperatorPopup = ({ | |||
| <ShortcutsName keys={['ctrl', 'd']} /> | |||
| </div> | |||
| </div> | |||
| <div className='h-[1px] bg-gray-100'></div> | |||
| <div className='h-[1px] bg-divider-regular'></div> | |||
| <div className='p-1'> | |||
| <div | |||
| className={` | |||
| flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-gray-700 | |||
| hover:bg-rose-50 hover:text-red-500 | |||
| flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-text-secondary | |||
| hover:bg-state-destructive-hover hover:text-red-500 | |||
| `} | |||
| onClick={() => handleNodeDelete(id)} | |||
| > | |||
| @@ -159,7 +159,7 @@ const PanelOperatorPopup = ({ | |||
| <ShortcutsName keys={['del']} /> | |||
| </div> | |||
| </div> | |||
| <div className='h-[1px] bg-gray-100'></div> | |||
| <div className='h-[1px] bg-divider-regular'></div> | |||
| </> | |||
| ) | |||
| } | |||
| @@ -170,21 +170,21 @@ const PanelOperatorPopup = ({ | |||
| <a | |||
| href={link} | |||
| target='_blank' | |||
| className='flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-gray-700 hover:bg-gray-50' | |||
| className='flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover' | |||
| > | |||
| {t('workflow.panel.helpLink')} | |||
| </a> | |||
| </div> | |||
| <div className='h-[1px] bg-gray-100'></div> | |||
| <div className='h-[1px] bg-divider-regular'></div> | |||
| </> | |||
| ) | |||
| } | |||
| <div className='p-1'> | |||
| <div className='px-3 py-2 text-xs text-gray-500'> | |||
| <div className='px-3 py-2 text-xs text-text-tertiary'> | |||
| <div className='mb-1 flex h-[22px] items-center font-medium'> | |||
| {t('workflow.panel.about').toLocaleUpperCase()} | |||
| </div> | |||
| <div className='mb-1 leading-[18px] text-gray-700'>{about}</div> | |||
| <div className='mb-1 leading-[18px] text-text-secondary'>{about}</div> | |||
| <div className='leading-[18px]'> | |||
| {t('workflow.panel.createdBy')} {author} | |||
| </div> | |||
| @@ -26,7 +26,6 @@ import { | |||
| Clipboard, | |||
| ClipboardCheck, | |||
| } from '@/app/components/base/icons/src/vender/line/files' | |||
| import s from '@/app/components/app/configuration/config-prompt/style.module.css' | |||
| import { useEventEmitterContextContext } from '@/context/event-emitter' | |||
| import { PROMPT_EDITOR_INSERT_QUICKLY } from '@/app/components/base/prompt-editor/plugins/update-block' | |||
| import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development' | |||
| @@ -147,20 +146,20 @@ const Editor: FC<Props> = ({ | |||
| return ( | |||
| <Wrap className={cn(className, wrapClassName)} style={wrapStyle} isInNode isExpand={isExpand}> | |||
| <div ref={ref} className={cn(isFocus ? (gradientBorder && s.gradientBorder) : 'bg-gray-100', isExpand && 'h-full', '!rounded-[9px] p-0.5', containerClassName)}> | |||
| <div className={cn(isFocus ? 'bg-gray-50' : 'bg-gray-100', isExpand && 'flex h-full flex-col', 'rounded-lg', containerClassName)}> | |||
| <div ref={ref} className={cn(isFocus ? (gradientBorder && 'bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2') : 'bg-transparent', isExpand && 'h-full', '!rounded-[9px] p-0.5', containerClassName)}> | |||
| <div className={cn(isFocus ? 'bg-background-default' : 'bg-components-input-bg-normal', isExpand && 'flex h-full flex-col', 'rounded-lg', containerClassName)}> | |||
| <div className={cn('flex items-center justify-between pl-3 pr-2 pt-1', headerClassName)}> | |||
| <div className='flex gap-2'> | |||
| <div className={cn('text-xs font-semibold uppercase leading-4 text-gray-700', titleClassName)}>{title} {required && <span className='text-red-500'>*</span>}</div> | |||
| <div className={cn('text-xs font-semibold uppercase leading-4 text-text-secondary', titleClassName)}>{title} {required && <span className='text-text-destructive'>*</span>}</div> | |||
| {titleTooltip && <Tooltip popupContent={titleTooltip} />} | |||
| </div> | |||
| <div className='flex items-center'> | |||
| <div className='text-xs font-medium leading-[18px] text-gray-500'>{value?.length || 0}</div> | |||
| <div className='text-xs font-medium leading-[18px] text-text-tertiary'>{value?.length || 0}</div> | |||
| {isSupportPromptGenerator && ( | |||
| <PromptGeneratorBtn className='ml-[5px]' onGenerated={onGenerated} modelConfig={modelConfig} /> | |||
| )} | |||
| <div className='ml-2 mr-2 h-3 w-px bg-gray-200'></div> | |||
| <div className='ml-2 mr-2 h-3 w-px bg-divider-regular'></div> | |||
| {/* Operations */} | |||
| <div className='flex items-center space-x-[2px]'> | |||
| {isSupportJinja && ( | |||
| @@ -168,13 +167,13 @@ const Editor: FC<Props> = ({ | |||
| popupContent={ | |||
| <div> | |||
| <div>{t('workflow.common.enableJinja')}</div> | |||
| <a className='text-[#155EEF]' target='_blank' href='https://jinja.palletsprojects.com/en/2.10.x/'>{t('workflow.common.learnMore')}</a> | |||
| <a className='text-text-accent' target='_blank' href='https://jinja.palletsprojects.com/en/2.10.x/'>{t('workflow.common.learnMore')}</a> | |||
| </div> | |||
| } | |||
| needsDelay | |||
| > | |||
| <div className={cn(editionType === EditionType.jinja2 && 'border-black/5 bg-white', 'flex h-[22px] items-center space-x-0.5 rounded-[5px] border border-transparent px-1.5 hover:border-black/5')}> | |||
| <Jinja className='h-3 w-6 text-gray-300' /> | |||
| <div className={cn(editionType === EditionType.jinja2 && 'border-components-button-ghost-bg-hover bg-components-button-ghost-bg-hover', 'flex h-[22px] items-center space-x-0.5 rounded-[5px] border border-transparent px-1.5 hover:border-components-button-ghost-bg-hover')}> | |||
| <Jinja className='h-3 w-6 text-text-quaternary' /> | |||
| <Switch | |||
| size='sm' | |||
| defaultValue={editionType === EditionType.jinja2} | |||
| @@ -48,24 +48,24 @@ const ReadonlyInputWithSelectVar: FC<Props> = ({ | |||
| return (<span key={index}> | |||
| <span className='relative top-[-3px] leading-[16px]'>{str}</span> | |||
| <div className=' inline-flex h-[16px] items-center rounded-[5px] bg-white px-1.5'> | |||
| <div className=' inline-flex h-[16px] items-center rounded-[5px] bg-components-badge-white-to-dark px-1.5'> | |||
| {!isEnv && !isChatVar && ( | |||
| <div className='flex items-center'> | |||
| <div className='p-[1px]'> | |||
| <VarBlockIcon | |||
| className='!text-gray-900' | |||
| className='!text-text-primary' | |||
| type={node?.type || BlockEnum.Start} | |||
| /> | |||
| </div> | |||
| <div className='mx-0.5 max-w-[60px] truncate text-xs font-medium text-gray-700' title={node?.title}>{node?.title}</div> | |||
| <div className='mx-0.5 max-w-[60px] truncate text-xs font-medium text-text-secondary' title={node?.title}>{node?.title}</div> | |||
| <Line3 className='mr-0.5'></Line3> | |||
| </div> | |||
| )} | |||
| <div className='flex items-center text-primary-600'> | |||
| <div className='flex items-center text-text-accent'> | |||
| {!isEnv && !isChatVar && <Variable02 className='h-3.5 w-3.5 shrink-0' />} | |||
| {isEnv && <Env className='h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />} | |||
| {isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />} | |||
| <div className={cn('ml-0.5 max-w-[50px] truncate text-xs font-medium', (isEnv || isChatVar) && 'text-gray-900')} title={varName}>{varName}</div> | |||
| <div className={cn('ml-0.5 max-w-[50px] truncate text-xs font-medium', (isEnv || isChatVar) && 'text-text-primary')} title={varName}>{varName}</div> | |||
| </div> | |||
| </div> | |||
| </span>) | |||
| @@ -2,7 +2,7 @@ | |||
| import type { FC } from 'react' | |||
| import React from 'react' | |||
| import { RiDeleteBinLine } from '@remixicon/react' | |||
| import cn from '@/utils/classnames' | |||
| import ActionButton from '@/app/components/base/action-button' | |||
| type Props = { | |||
| className?: string | |||
| @@ -10,16 +10,12 @@ type Props = { | |||
| } | |||
| const Remove: FC<Props> = ({ | |||
| className, | |||
| onClick, | |||
| }) => { | |||
| return ( | |||
| <div | |||
| className={cn(className, 'cursor-pointer rounded-md p-1 text-gray-500 hover:bg-black/5 hover:text-gray-800')} | |||
| onClick={onClick} | |||
| > | |||
| <RiDeleteBinLine className='h-4 w-4' /> | |||
| </div> | |||
| <ActionButton size='l' className='group shrink-0 hover:!bg-state-destructive-hover' onClick={onClick}> | |||
| <RiDeleteBinLine className='h-4 w-4 text-text-tertiary group-hover:text-text-destructive' /> | |||
| </ActionButton> | |||
| ) | |||
| } | |||
| export default React.memo(Remove) | |||
| @@ -66,7 +66,7 @@ const RetryOnPanel = ({ | |||
| retry_config?.retry_enabled && ( | |||
| <div className='px-4 pb-2'> | |||
| <div className='mb-1 flex w-full items-center'> | |||
| <div className='system-xs-medium-uppercase mr-2 grow'>{t('workflow.nodes.common.retry.maxRetries')}</div> | |||
| <div className='system-xs-medium-uppercase mr-2 grow text-text-secondary'>{t('workflow.nodes.common.retry.maxRetries')}</div> | |||
| <Slider | |||
| className='mr-3 w-[108px]' | |||
| value={retry_config?.max_retries || 3} | |||
| @@ -86,7 +86,7 @@ const RetryOnPanel = ({ | |||
| /> | |||
| </div> | |||
| <div className='flex items-center'> | |||
| <div className='system-xs-medium-uppercase mr-2 grow'>{t('workflow.nodes.common.retry.retryInterval')}</div> | |||
| <div className='system-xs-medium-uppercase mr-2 grow text-text-secondary'>{t('workflow.nodes.common.retry.retryInterval')}</div> | |||
| <Slider | |||
| className='mr-3 w-[108px]' | |||
| value={retry_config?.retry_interval || 1000} | |||
| @@ -65,14 +65,14 @@ const TypeSelector: FC<Props> = ({ | |||
| : ( | |||
| <div | |||
| onClick={toggleShow} | |||
| className={cn(showOption && 'bg-black/5', 'flex h-5 cursor-pointer items-center rounded-md pl-1 pr-0.5 text-xs font-semibold text-gray-700 hover:bg-black/5')}> | |||
| <div className={cn('text-sm font-semibold', uppercase && 'uppercase', noValue && 'text-gray-400', triggerClassName)}>{!noValue ? item?.label : placeholder}</div> | |||
| className={cn(showOption && 'bg-state-base-hover', 'flex h-5 cursor-pointer items-center rounded-md pl-1 pr-0.5 text-xs font-semibold text-text-secondary hover:bg-state-base-hover')}> | |||
| <div className={cn('text-sm font-semibold', uppercase && 'uppercase', noValue && 'text-text-tertiary', triggerClassName)}>{!noValue ? item?.label : placeholder}</div> | |||
| {!readonly && <DropDownIcon className='h-3 w-3 ' />} | |||
| </div> | |||
| )} | |||
| {(showOption && !readonly) && ( | |||
| <div className={cn('absolute top-[24px] z-10 w-[120px] select-none rounded-lg border border-gray-200 bg-white p-1 shadow-lg', popupClassName)}> | |||
| <div className={cn('absolute top-[24px] z-10 w-[120px] select-none rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg', popupClassName)}> | |||
| {list.map(item => ( | |||
| <div | |||
| key={item.value} | |||
| @@ -80,10 +80,10 @@ const TypeSelector: FC<Props> = ({ | |||
| setHide() | |||
| onChange(item.value) | |||
| }} | |||
| className={cn(itemClassName, uppercase && 'uppercase', 'flex h-[30px] min-w-[44px] cursor-pointer items-center justify-between rounded-lg px-3 text-[13px] font-medium text-gray-700 hover:bg-gray-50')} | |||
| className={cn(itemClassName, uppercase && 'uppercase', 'flex h-[30px] min-w-[44px] cursor-pointer items-center justify-between rounded-lg px-3 text-[13px] font-medium text-text-secondary hover:bg-state-base-hover')} | |||
| > | |||
| <div>{item.label}</div> | |||
| {showChecked && item.value === value && <Check className='h-4 w-4 text-primary-600' />} | |||
| {showChecked && item.value === value && <Check className='h-4 w-4 text-text-primary' />} | |||
| </div> | |||
| )) | |||
| } | |||
| @@ -33,7 +33,7 @@ export const TitleInput = memo(({ | |||
| value={localValue} | |||
| onChange={e => setLocalValue(e.target.value)} | |||
| className={` | |||
| system-xl-semibold mr-2 h-7 min-w-0 grow appearance-none rounded-md border border-transparent px-1 text-text-primary | |||
| system-xl-semibold mr-2 h-7 min-w-0 grow appearance-none rounded-md border border-transparent bg-transparent px-1 text-text-primary | |||
| outline-none focus:shadow-xs | |||
| `} | |||
| placeholder={t('workflow.common.addTitle') || ''} | |||
| @@ -76,8 +76,8 @@ export const DescriptionInput = memo(({ | |||
| onBlur={handleBlur} | |||
| className={` | |||
| w-full resize-none appearance-none bg-transparent text-xs | |||
| leading-[18px] text-gray-900 caret-[#295EFF] | |||
| outline-none placeholder:text-gray-400 | |||
| leading-[18px] text-text-primary caret-[#295EFF] | |||
| outline-none placeholder:text-text-quaternary | |||
| `} | |||
| placeholder={t('workflow.common.addDescription') || ''} | |||
| /> | |||
| @@ -51,7 +51,7 @@ const VariableTag = ({ | |||
| const { t } = useTranslation() | |||
| return ( | |||
| <Tooltip popupContent={!isValid && t('workflow.errorMsg.invalidVariable')}> | |||
| <div className={cn('border-[rgba(16, 2440,0.08)] inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] bg-white px-1.5 text-xs shadow-xs', | |||
| <div className={cn('border-[rgba(16, 2440,0.08)] inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] border-divider-subtle bg-components-badge-white-to-dark px-1.5 text-xs shadow-xs', | |||
| !isValid && 'border-red-400 !bg-[#FEF3F2]', | |||
| )}> | |||
| {(!isEnv && !isChatVar && <> | |||
| @@ -59,7 +59,7 @@ const VariableTag = ({ | |||
| <> | |||
| <VarBlockIcon | |||
| type={node.data.type || BlockEnum.Start} | |||
| className='mr-0.5' | |||
| className='mr-0.5 !text-text-primary' | |||
| /> | |||
| <div | |||
| className='max-w-[60px] truncate font-medium text-text-secondary' | |||
| @@ -99,10 +99,7 @@ const VarList: FC<Props> = ({ | |||
| isSupportFileVar={isSupportFileVar} | |||
| /> | |||
| {!readonly && ( | |||
| <RemoveButton | |||
| className='!bg-gray-100 !p-2 hover:!bg-gray-200' | |||
| onClick={handleVarRemove(index)} | |||
| /> | |||
| <RemoveButton onClick={handleVarRemove(index)}/> | |||
| )} | |||
| </div> | |||
| ))} | |||
| @@ -333,9 +333,9 @@ const VarReferencePicker: FC<Props> = ({ | |||
| }} | |||
| className='h-full grow' | |||
| > | |||
| <div ref={isSupportConstantValue ? triggerRef : null} className={cn('h-full', isSupportConstantValue && 'flex items-center rounded-lg bg-gray-100 py-1 pl-1')}> | |||
| <div ref={isSupportConstantValue ? triggerRef : null} className={cn('h-full', isSupportConstantValue && 'flex items-center rounded-lg bg-components-panel-bg py-1 pl-1')}> | |||
| <Tooltip popupContent={!isValidVar && hasValue && t('workflow.errorMsg.invalidVariable')}> | |||
| <div className={cn('h-full items-center rounded-[5px] px-1.5', hasValue ? 'inline-flex bg-white' : 'flex')}> | |||
| <div className={cn('h-full items-center rounded-[5px] px-1.5', hasValue ? 'inline-flex bg-components-badge-white-to-dark' : 'flex')}> | |||
| {hasValue | |||
| ? ( | |||
| <> | |||
| @@ -343,17 +343,17 @@ const VarReferencePicker: FC<Props> = ({ | |||
| <div className='flex items-center'> | |||
| <div className='h-3 px-[1px]'> | |||
| {outputVarNode?.type && <VarBlockIcon | |||
| className='!text-gray-900' | |||
| className='!text-text-primary' | |||
| type={outputVarNode.type} | |||
| />} | |||
| </div> | |||
| <div className='mx-0.5 truncate text-xs font-medium text-gray-700' title={outputVarNode?.title} style={{ | |||
| <div className='mx-0.5 truncate text-xs font-medium text-text-secondary' title={outputVarNode?.title} style={{ | |||
| maxWidth: maxNodeNameWidth, | |||
| }}>{outputVarNode?.title}</div> | |||
| <Line3 className='mr-0.5'></Line3> | |||
| </div> | |||
| )} | |||
| <div className='flex items-center text-primary-600'> | |||
| <div className='flex items-center text-text-accent'> | |||
| {!hasValue && <Variable02 className='h-3.5 w-3.5' />} | |||
| {isEnv && <Env className='h-3.5 w-3.5 text-util-colors-violet-violet-600' />} | |||
| {isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />} | |||
| @@ -364,7 +364,7 @@ const VarReferencePicker: FC<Props> = ({ | |||
| <div className='system-xs-regular ml-0.5 truncate text-center capitalize text-text-tertiary' title={type} style={{ | |||
| maxWidth: maxTypeWidth, | |||
| }}>{type}</div> | |||
| {!isValidVar && <RiErrorWarningFill className='ml-0.5 h-3 w-3 text-[#D92D20]' />} | |||
| {!isValidVar && <RiErrorWarningFill className='ml-0.5 h-3 w-3 text-text-destructive' />} | |||
| </> | |||
| ) | |||
| : <div className={`overflow-hidden ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'} system-sm-regular text-ellipsis`}>{placeholder ?? t('workflow.common.setVarValuePlaceholder')}</div>} | |||
| @@ -375,10 +375,10 @@ const VarReferencePicker: FC<Props> = ({ | |||
| </VarPickerWrap> | |||
| )} | |||
| {(hasValue && !readonly && !isInTable) && (<div | |||
| className='group invisible absolute right-1 top-[50%] h-5 translate-y-[-50%] cursor-pointer rounded-md p-1 hover:bg-black/5 group-hover/wrap:visible' | |||
| className='group invisible absolute right-1 top-[50%] h-5 translate-y-[-50%] cursor-pointer rounded-md p-1 hover:bg-state-base-hover group-hover/wrap:visible' | |||
| onClick={handleClearVar} | |||
| > | |||
| <RiCloseLine className='h-3.5 w-3.5 text-gray-500 group-hover:text-gray-800' /> | |||
| <RiCloseLine className='h-3.5 w-3.5 text-text-tertiary group-hover:text-text-secondary' /> | |||
| </div>)} | |||
| {!hasValue && valueTypePlaceHolder && ( | |||
| <Badge | |||
| @@ -27,7 +27,7 @@ const VarReferencePopup: FC<Props> = ({ | |||
| const { locale } = useContext(I18n) | |||
| // max-h-[300px] overflow-y-auto todo: use portal to handle long list | |||
| return ( | |||
| <div className='space-y-1 rounded-lg border border-gray-200 bg-white p-1 shadow-lg' style={{ | |||
| <div className='space-y-1 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg' style={{ | |||
| width: itemWidth || 228, | |||
| }}> | |||
| {((!vars || vars.length === 0) && popupFor) | |||
| @@ -43,23 +43,23 @@ const VarReferencePicker: FC<Props> = ({ | |||
| offset={4} | |||
| > | |||
| <PortalToFollowElemTrigger onClick={() => setOpen(!open)} className='w-[120px] cursor-pointer'> | |||
| <div className='flex h-8 items-center justify-between rounded-lg border-0 bg-gray-100 px-2.5 text-[13px] text-gray-900'> | |||
| <div className='flex h-8 items-center justify-between rounded-lg border-0 bg-components-button-secondary-bg px-2.5 text-[13px] text-text-primary'> | |||
| <div className='w-0 grow truncate capitalize' title={value}>{value}</div> | |||
| <RiArrowDownSLine className='h-3.5 w-3.5 shrink-0 text-gray-700' /> | |||
| <RiArrowDownSLine className='h-3.5 w-3.5 shrink-0 text-text-secondary' /> | |||
| </div> | |||
| </PortalToFollowElemTrigger> | |||
| <PortalToFollowElemContent style={{ | |||
| zIndex: 100, | |||
| }}> | |||
| <div className='w-[120px] rounded-lg bg-white p-1 shadow-sm'> | |||
| <div className='w-[120px] rounded-lg bg-components-panel-bg p-1 shadow-sm'> | |||
| {TYPES.map(type => ( | |||
| <div | |||
| key={type} | |||
| className='flex h-[30px] cursor-pointer items-center justify-between rounded-lg pl-3 pr-2 text-[13px] text-gray-900 hover:bg-gray-100' | |||
| className='flex h-[30px] cursor-pointer items-center justify-between rounded-lg pl-3 pr-2 text-[13px] text-text-primary hover:bg-state-base-hover' | |||
| onClick={handleChange(type)} | |||
| > | |||
| <div className='w-0 grow truncate capitalize'>{type}</div> | |||
| {type === value && <Check className='h-4 w-4 shrink-0 text-primary-600' />} | |||
| {type === value && <Check className='h-4 w-4 shrink-0 text-text-accent' />} | |||
| </div> | |||
| ))} | |||
| </div> | |||
| @@ -20,9 +20,9 @@ const useToggleExpend = ({ ref, hasFooter = true, isInNode }: Params) => { | |||
| return '' | |||
| if (isInNode) | |||
| return 'fixed z-10 right-[9px] top-[166px] bottom-[8px] p-4 bg-white rounded-xl' | |||
| return 'fixed z-10 right-[9px] top-[166px] bottom-[8px] p-4 bg-components-panel-bg rounded-xl' | |||
| return 'absolute z-10 left-4 right-6 top-[52px] bottom-0 pb-4 bg-white' | |||
| return 'absolute z-10 left-4 right-6 top-[52px] bottom-0 pb-4 bg-components-panel-bg' | |||
| })() | |||
| const wrapStyle = isExpand | |||
| ? { | |||
| @@ -119,7 +119,7 @@ const BasePanel: FC<BasePanelProps> = ({ | |||
| width: `${panelWidth}px`, | |||
| }} | |||
| > | |||
| <div className='sticky top-0 z-10 border-b-[0.5px] border-black/5 bg-components-panel-bg'> | |||
| <div className='sticky top-0 z-10 border-b-[0.5px] border-divider-regular bg-components-panel-bg'> | |||
| <div className='flex items-center px-4 pb-1 pt-4'> | |||
| <BlockIcon | |||
| className='mr-1 shrink-0' | |||
| @@ -131,7 +131,7 @@ const BasePanel: FC<BasePanelProps> = ({ | |||
| value={data.title || ''} | |||
| onBlur={handleTitleBlur} | |||
| /> | |||
| <div className='flex shrink-0 items-center text-gray-500'> | |||
| <div className='flex shrink-0 items-center text-text-tertiary'> | |||
| { | |||
| canRunBySingle(data.type) && !nodesReadOnly && ( | |||
| <Tooltip | |||
| @@ -139,7 +139,7 @@ const BasePanel: FC<BasePanelProps> = ({ | |||
| popupClassName='mr-1' | |||
| > | |||
| <div | |||
| className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5' | |||
| className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-state-base-hover' | |||
| onClick={() => { | |||
| handleNodeDataUpdate({ id, data: { _isSingleRun: true } }) | |||
| handleSyncWorkflowDraft(true) | |||
| @@ -169,7 +169,7 @@ const BasePanel: FC<BasePanelProps> = ({ | |||
| </div> | |||
| </div> | |||
| <div> | |||
| {cloneElement(children, { id, data })} | |||
| {cloneElement(children as any, { id, data })} | |||
| </div> | |||
| <Split /> | |||
| { | |||
| @@ -190,7 +190,7 @@ const BasePanel: FC<BasePanelProps> = ({ | |||
| } | |||
| { | |||
| !!availableNextBlocks.length && ( | |||
| <div className='border-t-[0.5px] border-t-black/5 p-4'> | |||
| <div className='border-t-[0.5px] border-divider-regular p-4'> | |||
| <div className='system-sm-semibold-uppercase mb-1 flex items-center text-text-secondary'> | |||
| {t('workflow.panel.nextStep').toLocaleUpperCase()} | |||
| </div> | |||
| @@ -52,13 +52,13 @@ const Node: FC<NodeProps<EndNodeType>> = ({ | |||
| isChatMode, | |||
| }) | |||
| return ( | |||
| <div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md bg-gray-100 px-1 text-xs font-normal text-gray-700'> | |||
| <div className='flex items-center text-xs font-medium text-gray-500'> | |||
| <div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md bg-components-badge-white-to-dark px-1 text-xs font-normal text-text-secondary'> | |||
| <div className='flex items-center text-xs font-medium text-text-tertiary'> | |||
| {!isEnv && !isChatVar && ( | |||
| <> | |||
| <div className='p-[1px]'> | |||
| <VarBlockIcon | |||
| className='!text-gray-900' | |||
| className='!text-text-primary' | |||
| type={node?.data.type || BlockEnum.Start} | |||
| /> | |||
| </div> | |||
| @@ -66,16 +66,16 @@ const Node: FC<NodeProps<EndNodeType>> = ({ | |||
| <Line3 className='mr-0.5'></Line3> | |||
| </> | |||
| )} | |||
| <div className='flex items-center text-primary-600'> | |||
| {!isEnv && !isChatVar && <Variable02 className='h-3.5 w-3.5 shrink-0 text-primary-500' />} | |||
| <div className='flex items-center text-text-accent'> | |||
| {!isEnv && !isChatVar && <Variable02 className='h-3.5 w-3.5 shrink-0 text-text-accent' />} | |||
| {isEnv && <Env className='h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />} | |||
| {isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />} | |||
| <div className={cn('ml-0.5 max-w-[50px] truncate text-xs font-medium', (isEnv || isChatVar) && '!max-w-[70px] text-gray-900')}>{varName}</div> | |||
| <div className={cn('ml-0.5 max-w-[50px] truncate text-xs font-medium', (isEnv || isChatVar) && '!max-w-[70px] text-text-primary')}>{varName}</div> | |||
| </div> | |||
| </div> | |||
| <div className='text-xs font-normal text-gray-700'> | |||
| <div className='ml-0.5 max-w-[42px] truncate text-xs font-normal capitalize text-gray-500' title={varType}>{varType}</div> | |||
| <div className='text-xs font-normal text-text-secondary'> | |||
| <div className='ml-0.5 max-w-[42px] truncate text-xs font-normal capitalize text-text-tertiary' title={varType}>{varType}</div> | |||
| </div> | |||
| </div> | |||
| ) | |||
| @@ -53,9 +53,9 @@ const ApiInput: FC<Props> = ({ | |||
| onChange={onMethodChange} | |||
| options={MethodOptions} | |||
| trigger={ | |||
| <div className={cn(readonly && 'cursor-pointer', 'flex h-8 shrink-0 items-center rounded-lg border-black/5 bg-gray-100 px-2.5')} > | |||
| <div className='w-12 pl-0.5 text-xs font-medium uppercase leading-[18px] text-gray-900'>{method}</div> | |||
| {!readonly && <RiArrowDownSLine className='ml-1 h-3.5 w-3.5 text-gray-700' />} | |||
| <div className={cn(readonly && 'cursor-pointer', 'flex h-8 shrink-0 items-center rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-2.5')} > | |||
| <div className='w-12 pl-0.5 text-xs font-medium uppercase leading-[18px] text-text-primary'>{method}</div> | |||
| {!readonly && <RiArrowDownSLine className='ml-1 h-3.5 w-3.5 text-text-secondary' />} | |||
| </div> | |||
| } | |||
| popupClassName='top-[34px] w-[108px]' | |||
| @@ -65,7 +65,7 @@ const ApiInput: FC<Props> = ({ | |||
| <Input | |||
| instanceId='http-api-url' | |||
| className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')} | |||
| className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')} | |||
| value={url} | |||
| onChange={onUrlChange} | |||
| readOnly={readonly} | |||
| @@ -28,9 +28,9 @@ type Props = { | |||
| const Field = ({ title, isRequired, children }: { title: string; isRequired?: boolean; children: React.JSX.Element }) => { | |||
| return ( | |||
| <div> | |||
| <div className='text-[13px] font-medium leading-8 text-gray-700'> | |||
| <div className='text-[13px] font-medium leading-8 text-text-secondary'> | |||
| {title} | |||
| {isRequired && <span className='ml-0.5 text-[#D92D20]'>*</span>} | |||
| {isRequired && <span className='ml-0.5 text-text-destructive'>*</span>} | |||
| </div> | |||
| <div>{children}</div> | |||
| </div> | |||
| @@ -158,7 +158,7 @@ const Authorization: FC<Props> = ({ | |||
| <div className='flex'> | |||
| <Input | |||
| instanceId='http-api-key' | |||
| className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')} | |||
| className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')} | |||
| value={tempPayload.config?.api_key || ''} | |||
| onChange={handleAPIKeyChange} | |||
| nodesOutputVars={availableVars} | |||
| @@ -21,9 +21,10 @@ const Item: FC<ItemProps> = ({ | |||
| return ( | |||
| <div | |||
| className={cn( | |||
| isSelected ? 'border-[2px] border-primary-400 bg-white shadow-xs' : 'border border-gray-100 bg-gray-25', | |||
| 'flex h-8 w-0 grow cursor-pointer items-center justify-center rounded-lg text-[13px] font-normal text-gray-900') | |||
| } | |||
| 'system-sm-regular flex h-8 grow cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary', | |||
| !isSelected && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs', | |||
| isSelected && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs', | |||
| )} | |||
| onClick={onClick} | |||
| > | |||
| {title} | |||
| @@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next' | |||
| import { BodyType, type HttpNodeType, Method } from '../types' | |||
| import Modal from '@/app/components/base/modal' | |||
| import Button from '@/app/components/base/button' | |||
| import Textarea from '@/app/components/base/textarea' | |||
| import Toast from '@/app/components/base/toast' | |||
| import { useNodesInteractions } from '@/app/components/workflow/hooks' | |||
| @@ -141,9 +142,9 @@ const CurlPanel: FC<Props> = ({ nodeId, isShow, onHide, handleCurlImport }) => { | |||
| className='!w-[400px] !max-w-[400px] !p-4' | |||
| > | |||
| <div> | |||
| <textarea | |||
| <Textarea | |||
| value={inputString} | |||
| className='my-3 h-40 w-full grow rounded-lg border-0 bg-gray-100 p-3 text-sm text-gray-900 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200' | |||
| className='my-3 h-40 w-full grow' | |||
| onChange={e => setInputString(e.target.value)} | |||
| placeholder={t('workflow.nodes.http.curl.placeholder')!} | |||
| /> | |||
| @@ -144,7 +144,7 @@ const EditBody: FC<Props> = ({ | |||
| onChange={handleTypeChange} | |||
| disabled={readonly} | |||
| /> | |||
| <div className='text-[13px] font-normal leading-[18px] text-gray-700'>{bodyTextMap[t]}</div> | |||
| <div className='text-[13px] font-normal leading-[18px] text-text-secondary'>{bodyTextMap[t]}</div> | |||
| </label> | |||
| ))} | |||
| </div> | |||
| @@ -57,12 +57,12 @@ const InputItem: FC<Props> = ({ | |||
| }, [onRemove]) | |||
| return ( | |||
| <div className={cn(className, 'hover:cursor-text hover:bg-gray-50', 'relative flex h-full')}> | |||
| <div className={cn(className, 'hover:cursor-text hover:bg-state-base-hover', 'relative flex h-full')}> | |||
| {(!readOnly) | |||
| ? ( | |||
| <Input | |||
| instanceId={instanceId} | |||
| className={cn(isFocus ? 'bg-gray-100' : 'bg-width', 'w-0 grow px-3 py-1')} | |||
| className={cn(isFocus ? 'bg-components-input-bg-active' : 'bg-width', 'w-0 grow px-3 py-1')} | |||
| value={value} | |||
| onChange={onChange} | |||
| readOnly={readOnly} | |||
| @@ -78,11 +78,11 @@ const InputItem: FC<Props> = ({ | |||
| : <div | |||
| className="h-[18px] w-full pl-0.5 leading-[18px]" | |||
| > | |||
| {!hasValue && <div className='text-xs font-normal text-gray-300'>{placeholder}</div>} | |||
| {!hasValue && <div className='text-xs font-normal text-text-quaternary'>{placeholder}</div>} | |||
| {hasValue && ( | |||
| <Input | |||
| instanceId={instanceId} | |||
| className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')} | |||
| className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')} | |||
| value={value} | |||
| onChange={onChange} | |||
| readOnly={readOnly} | |||
| @@ -62,7 +62,7 @@ const KeyValueItem: FC<Props> = ({ | |||
| return ( | |||
| // group class name is for hover row show remove button | |||
| <div className={cn(className, 'h-min-7 group flex border-t border-gray-200')}> | |||
| <div className={cn(className, 'h-min-7 group flex border-t border-divider-regular')}> | |||
| <div className={cn('shrink-0 border-r border-divider-regular', isSupportFile ? 'w-[140px]' : 'w-1/2')}> | |||
| {!keyNotSupportVar | |||
| ? ( | |||
| @@ -79,7 +79,7 @@ const KeyValueItem: FC<Props> = ({ | |||
| ) | |||
| : ( | |||
| <input | |||
| className='system-sm-regular focus:bg-gray-100! appearance-none rounded-none border-none bg-white outline-none hover:bg-gray-50 focus:ring-0' | |||
| className='system-sm-regular focus:bg-gray-100! appearance-none rounded-none border-none bg-transparent outline-none hover:bg-components-input-bg-hover focus:ring-0' | |||
| value={payload.key} | |||
| onChange={e => handleChange('key')(e.target.value)} | |||
| /> | |||
| @@ -95,7 +95,7 @@ const KeyValueItem: FC<Props> = ({ | |||
| { name: 'file', value: 'file' }, | |||
| ]} | |||
| readonly={readonly} | |||
| triggerClassName='rounded-none h-7' | |||
| triggerClassName='rounded-none h-7 text-text-primary' | |||
| triggerClassNameFn={isOpen => isOpen ? 'bg-state-base-hover' : 'bg-transparent'} | |||
| popupClassName='w-[80px] h-7' | |||
| /> | |||
| @@ -28,8 +28,8 @@ const InputField: FC<{ | |||
| return ( | |||
| <div className="space-y-1"> | |||
| <div className="flex h-[18px] items-center space-x-2"> | |||
| <span className="text-[13px] font-medium text-gray-900">{title}</span> | |||
| <span className="text-xs font-normal text-gray-500">{description}</span> | |||
| <span className="text-[13px] font-medium text-text-primary">{title}</span> | |||
| <span className="text-xs font-normal text-text-tertiary">{description}</span> | |||
| </div> | |||
| <Input | |||
| type='number' | |||
| @@ -13,10 +13,11 @@ const Node: FC<NodeProps<HttpNodeType>> = ({ | |||
| return ( | |||
| <div className='mb-1 px-3 py-1'> | |||
| <div className='flex items-start rounded-md bg-gray-100 p-1'> | |||
| <div className='flex h-4 shrink-0 items-center rounded bg-gray-25 px-1 text-xs font-semibold uppercase text-gray-700'>{method}</div> | |||
| <div className='flex items-start rounded-md bg-workflow-block-parma-bg p-1'> | |||
| <div className='flex h-4 shrink-0 items-center rounded bg-components-badge-white-to-dark px-1 text-xs font-semibold uppercase text-text-secondary'>{method}</div> | |||
| <div className='pl-1 pt-1'> | |||
| <ReadonlyInputWithSelectVar | |||
| className='text-text-secondary' | |||
| value={url} | |||
| nodeId={id} | |||
| /> | |||
| @@ -73,20 +73,20 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({ | |||
| <div className='flex'> | |||
| <div | |||
| onClick={showAuthorization} | |||
| className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex h-6 items-center space-x-1 rounded-md px-2 ')} | |||
| className={cn(!readOnly && 'cursor-pointer hover:bg-state-base-hover', 'flex h-6 items-center space-x-1 rounded-md px-2 ')} | |||
| > | |||
| {!readOnly && <Settings01 className='h-3 w-3 text-gray-500' />} | |||
| <div className='text-xs font-medium text-gray-500'> | |||
| {!readOnly && <Settings01 className='h-3 w-3 text-text-tertiary' />} | |||
| <div className='text-xs font-medium text-text-tertiary'> | |||
| {t(`${i18nPrefix}.authorization.authorization`)} | |||
| <span className='ml-1 text-gray-700'>{t(`${i18nPrefix}.authorization.${inputs.authorization.type}`)}</span> | |||
| <span className='ml-1 text-text-secondary'>{t(`${i18nPrefix}.authorization.${inputs.authorization.type}`)}</span> | |||
| </div> | |||
| </div> | |||
| <div | |||
| onClick={showCurlPanel} | |||
| className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex h-6 items-center space-x-1 rounded-md px-2 ')} | |||
| className={cn(!readOnly && 'cursor-pointer hover:bg-state-base-hover', 'flex h-6 items-center space-x-1 rounded-md px-2 ')} | |||
| > | |||
| {!readOnly && <FileArrow01 className='h-3 w-3 text-gray-500' />} | |||
| <div className='text-xs font-medium text-gray-500'> | |||
| {!readOnly && <FileArrow01 className='h-3 w-3 text-text-tertiary' />} | |||
| <div className='text-xs font-medium text-text-tertiary'> | |||
| {t(`${i18nPrefix}.curl.title`)} | |||
| </div> | |||
| </div> | |||
| @@ -29,7 +29,7 @@ export const IterationStartNodeDumb = () => { | |||
| const { t } = useTranslation() | |||
| return ( | |||
| <div className='nodrag relative left-[17px] top-[21px] z-[11] flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-white'> | |||
| <div className='nodrag relative left-[17px] top-[21px] z-[11] flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg'> | |||
| <Tooltip popupContent={t('workflow.blocks.iteration-start')} asChild={false}> | |||
| <div className='flex h-6 w-6 items-center justify-center rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500'> | |||
| <RiHome5Fill className='h-3 w-3 text-text-primary-on-surface' /> | |||
| @@ -89,7 +89,7 @@ const DatasetItem: FC<Props> = ({ | |||
| } | |||
| <ActionButton | |||
| onClick={handleRemove} | |||
| state={ActionButtonState.Destructive} | |||
| state={isDeleteHovered ? ActionButtonState.Destructive : ActionButtonState.Default} | |||
| onMouseEnter={() => setIsDeleteHovered(true)} | |||
| onMouseLeave={() => setIsDeleteHovered(false)} | |||
| > | |||
| @@ -70,7 +70,7 @@ const DatasetList: FC<Props> = ({ | |||
| ) | |||
| }) | |||
| : ( | |||
| <div className='cursor-default select-none rounded-lg bg-gray-50 p-3 text-center text-xs text-gray-500'> | |||
| <div className='cursor-default select-none rounded-lg bg-background-section p-3 text-center text-xs text-text-tertiary'> | |||
| {t('appDebug.datasetConfig.knowledgeTip')} | |||
| </div> | |||
| ) | |||
| @@ -116,7 +116,7 @@ const RetrievalConfig: FC<Props> = ({ | |||
| </Button> | |||
| </PortalToFollowElemTrigger> | |||
| <PortalToFollowElemContent style={{ zIndex: 1001 }}> | |||
| <div className='w-[404px] rounded-2xl border border-gray-200 bg-white px-4 pb-4 pt-3 shadow-xl'> | |||
| <div className='w-[404px] rounded-2xl border border-components-panel-border bg-components-panel-bg px-4 pb-4 pt-3 shadow-xl'> | |||
| <ConfigRetrievalContent | |||
| datasetConfigs={ | |||
| { | |||
| @@ -112,7 +112,7 @@ const Panel: FC<NodePanelProps<KnowledgeRetrievalNodeType>> = ({ | |||
| onOpenFromPropsChange={handleOpenFromPropsChange} | |||
| selectedDatasets={selectedDatasets} | |||
| /> | |||
| {!readOnly && (<div className='h-3 w-px bg-gray-200'></div>)} | |||
| {!readOnly && (<div className='h-3 w-px bg-divider-regular'></div>)} | |||
| {!readOnly && ( | |||
| <AddKnowledge | |||
| selectedIds={inputs.dataset_ids} | |||
| @@ -35,7 +35,7 @@ const ExtractInput: FC<Props> = ({ | |||
| <div className='flex items-start space-x-1'> | |||
| <Input | |||
| instanceId='http-extract-number' | |||
| className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')} | |||
| className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')} | |||
| value={value} | |||
| onChange={onChange} | |||
| readOnly={readOnly} | |||
| @@ -103,7 +103,7 @@ const ConfigPromptItem: FC<Props> = ({ | |||
| title={ | |||
| <div className='relative left-1 flex items-center'> | |||
| {payload.role === PromptRole.system | |||
| ? (<div className='relative left-[-4px] text-xs font-semibold uppercase text-gray-700'> | |||
| ? (<div className='relative left-[-4px] text-xs font-semibold uppercase text-text-secondary'> | |||
| SYSTEM | |||
| </div>) | |||
| : ( | |||
| @@ -112,8 +112,8 @@ const ConfigPromptItem: FC<Props> = ({ | |||
| allOptions={roleOptions} | |||
| options={canNotChooseSystemRole ? roleOptionsWithoutSystemRole : roleOptions} | |||
| onChange={handleChatModeMessageRoleChange} | |||
| triggerClassName='text-xs font-semibold text-gray-700 uppercase' | |||
| itemClassName='text-[13px] font-medium text-gray-700' | |||
| triggerClassName='text-xs font-semibold text-text-secondary uppercase' | |||
| itemClassName='text-[13px] font-medium text-text-secondary' | |||
| /> | |||
| )} | |||
| @@ -180,7 +180,7 @@ const ConfigPrompt: FC<Props> = ({ | |||
| })() | |||
| return ( | |||
| <div key={item.id || index} className='group relative'> | |||
| {canDrag && <DragHandle className='absolute left-[-14px] top-2 hidden h-3.5 w-3.5 text-gray-400 group-hover:block' />} | |||
| {canDrag && <DragHandle className='absolute left-[-14px] top-2 hidden h-3.5 w-3.5 text-text-quaternary group-hover:block' />} | |||
| <ConfigPromptItem | |||
| className={cn(canDrag && 'handle')} | |||
| headerClassName={cn(canDrag && 'cursor-grab')} | |||
| @@ -25,7 +25,7 @@ const ResolutionPicker: FC<Props> = ({ | |||
| }, [onChange]) | |||
| return ( | |||
| <div className='flex items-center justify-between'> | |||
| <div className='mr-2 text-xs font-medium uppercase text-gray-500'>{t(`${i18nPrefix}.resolution.name`)}</div> | |||
| <div className='mr-2 text-xs font-medium uppercase text-text-secondary'>{t(`${i18nPrefix}.resolution.name`)}</div> | |||
| <div className='flex items-center space-x-1'> | |||
| <OptionCard | |||
| title={t(`${i18nPrefix}.resolution.high`)} | |||
| @@ -216,21 +216,21 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({ | |||
| {/* Memory put place examples. */} | |||
| {isChatMode && isChatModel && !!inputs.memory && ( | |||
| <div className='mt-4'> | |||
| <div className='flex h-8 items-center justify-between rounded-lg bg-gray-100 pl-3 pr-2'> | |||
| <div className='flex h-8 items-center justify-between rounded-lg bg-components-input-bg-normal pl-3 pr-2'> | |||
| <div className='flex items-center space-x-1'> | |||
| <div className='text-xs font-semibold uppercase text-gray-700'>{t('workflow.nodes.common.memories.title')}</div> | |||
| <div className='text-xs font-semibold uppercase text-text-secondary'>{t('workflow.nodes.common.memories.title')}</div> | |||
| <Tooltip | |||
| popupContent={t('workflow.nodes.common.memories.tip')} | |||
| triggerClassName='w-4 h-4' | |||
| /> | |||
| </div> | |||
| <div className='flex h-[18px] items-center rounded-[5px] border border-black/8 px-1 text-xs font-semibold uppercase text-gray-500'>{t('workflow.nodes.common.memories.builtIn')}</div> | |||
| <div className='flex h-[18px] items-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 text-xs font-semibold uppercase text-text-tertiary'>{t('workflow.nodes.common.memories.builtIn')}</div> | |||
| </div> | |||
| {/* Readonly User Query */} | |||
| <div className='mt-4'> | |||
| <Editor | |||
| title={<div className='flex items-center space-x-1'> | |||
| <div className='text-xs font-semibold uppercase text-gray-700'>user</div> | |||
| <div className='text-xs font-semibold uppercase text-text-secondary'>user</div> | |||
| <Tooltip | |||
| popupContent={ | |||
| <div className='max-w-[180px]'>{t('workflow.nodes.llm.roleDescription.user')}</div> | |||
| @@ -9,7 +9,7 @@ const LoopStartNode = ({ id, data }: NodeProps) => { | |||
| const { t } = useTranslation() | |||
| return ( | |||
| <div className='nodrag group mt-1 flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-white'> | |||
| <div className='nodrag group mt-1 flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg'> | |||
| <Tooltip popupContent={t('workflow.blocks.loop-start')} asChild={false}> | |||
| <div className='flex h-6 w-6 items-center justify-center rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500'> | |||
| <RiHome5Fill className='h-3 w-3 text-text-primary-on-surface' /> | |||
| @@ -29,7 +29,7 @@ export const LoopStartNodeDumb = () => { | |||
| const { t } = useTranslation() | |||
| return ( | |||
| <div className='nodrag relative left-[17px] top-[21px] z-[11] flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-white'> | |||
| <div className='nodrag relative left-[17px] top-[21px] z-[11] flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg'> | |||
| <Tooltip popupContent={t('workflow.blocks.loop-start')} asChild={false}> | |||
| <div className='flex h-6 w-6 items-center justify-center rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500'> | |||
| <RiHome5Fill className='h-3 w-3 text-text-primary-on-surface' /> | |||
| @@ -50,9 +50,9 @@ const AddBlock = ({ | |||
| const renderTriggerElement = useCallback((open: boolean) => { | |||
| return ( | |||
| <div className={cn( | |||
| 'relative inline-flex h-8 cursor-pointer items-center rounded-lg border-[0.5px] border-gray-50 bg-white px-3 text-[13px] font-medium text-gray-700 shadow-xs hover:bg-gray-200', | |||
| `${nodesReadOnly && '!cursor-not-allowed opacity-50'}`, | |||
| open && '!bg-gray-50', | |||
| 'system-sm-medium relative inline-flex h-8 cursor-pointer items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 text-components-button-secondary-text shadow-xs backdrop-blur-[5px] hover:bg-components-button-secondary-bg-hover', | |||
| `${nodesReadOnly && '!cursor-not-allowed bg-components-button-secondary-bg-disabled'}`, | |||
| open && 'bg-components-button-secondary-bg-hover', | |||
| )}> | |||
| <RiAddLine className='mr-1 h-4 w-4' /> | |||
| {t('workflow.common.addBlock')} | |||
| @@ -31,14 +31,14 @@ const Node: FC<NodeProps<LoopNodeType>> = ({ | |||
| return ( | |||
| <div className={cn( | |||
| 'relative h-full min-h-[90px] w-full min-w-[240px] rounded-2xl bg-[#F0F2F7]/90', | |||
| 'relative h-full min-h-[90px] w-full min-w-[240px] rounded-2xl bg-workflow-canvas-workflow-bg', | |||
| )}> | |||
| <Background | |||
| id={`loop-background-${id}`} | |||
| className='!z-0 rounded-2xl' | |||
| gap={[14 / zoom, 14 / zoom]} | |||
| size={2 / zoom} | |||
| color='#E4E5E7' | |||
| color='var(--color-workflow-canvas-workflow-dot-color)' | |||
| /> | |||
| { | |||
| data._isCandidate && ( | |||
| @@ -68,8 +68,8 @@ const ImportFromTool: FC<Props> = ({ | |||
| return ( | |||
| <div> | |||
| <div className={cn( | |||
| 'flex h-6 cursor-pointer items-center rounded-md px-2 text-xs font-medium text-gray-500 hover:bg-gray-100', | |||
| open && 'bg-gray-100', | |||
| 'flex h-6 cursor-pointer items-center rounded-md px-2 text-xs font-medium text-text-tertiary hover:bg-state-base-hover', | |||
| open && 'bg-state-base-hover', | |||
| )}> | |||
| {t(`${i18nPrefix}.importFromTool`)} | |||
| </div> | |||
| @@ -24,36 +24,33 @@ const Item: FC<Props> = ({ | |||
| const { t } = useTranslation() | |||
| return ( | |||
| <div className='group relative rounded-lg border-[0.5px] border-gray-200 bg-white px-2.5 py-2 hover:shadow-xs'> | |||
| <div className='group relative rounded-lg bg-components-input-bg-normal px-2.5 py-2 hover:shadow-xs'> | |||
| <div className='flex justify-between'> | |||
| <div className='flex items-center'> | |||
| <Variable02 className='h-3.5 w-3.5 text-primary-500' /> | |||
| <div className='ml-1 text-[13px] font-medium text-gray-900'>{payload.name}</div> | |||
| <div className='ml-2 text-xs font-normal capitalize text-gray-500'>{payload.type}</div> | |||
| <Variable02 className='h-3.5 w-3.5 text-text-accent-secondary' /> | |||
| <div className='ml-1 text-[13px] font-medium text-text-primary'>{payload.name}</div> | |||
| <div className='ml-2 text-xs font-normal capitalize text-text-tertiary'>{payload.type}</div> | |||
| </div> | |||
| {payload.required && ( | |||
| <div className='text-xs font-normal uppercase leading-4 text-gray-500'>{t(`${i18nPrefix}.addExtractParameterContent.required`)}</div> | |||
| <div className='text-xs font-normal uppercase leading-4 text-text-tertiary'>{t(`${i18nPrefix}.addExtractParameterContent.required`)}</div> | |||
| )} | |||
| </div> | |||
| <div className='mt-0.5 text-xs font-normal leading-[18px] text-gray-500'>{payload.description}</div> | |||
| <div className='mt-0.5 text-xs font-normal leading-[18px] text-text-tertiary'>{payload.description}</div> | |||
| <div | |||
| className='absolute right-1 top-0 hidden h-full w-[119px] items-center justify-end space-x-1 rounded-lg group-hover:flex' | |||
| style={{ | |||
| background: 'linear-gradient(270deg, #FFF 49.99%, rgba(255, 255, 255, 0.00) 98.1%)', | |||
| }} | |||
| className='absolute right-0 top-0 hidden h-full w-[119px] items-center justify-end space-x-1 rounded-lg bg-gradient-to-l from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent pr-1 group-hover:flex' | |||
| > | |||
| <div | |||
| className='cursor-pointer rounded-md p-1 hover:bg-black/5' | |||
| className='cursor-pointer rounded-md p-1 hover:bg-state-base-hover' | |||
| onClick={onEdit} | |||
| > | |||
| <RiEditLine className='h-4 w-4 text-gray-500' /> | |||
| <RiEditLine className='h-4 w-4 text-text-tertiary' /> | |||
| </div> | |||
| <div | |||
| className='cursor-pointer rounded-md p-1 hover:bg-black/5' | |||
| className='group shrink-0 cursor-pointer rounded-md p-1 hover:!bg-state-destructive-hover' | |||
| onClick={onDelete} | |||
| > | |||
| <RiDeleteBinLine className='h-4 w-4 text-gray-500' /> | |||
| <RiDeleteBinLine className='h-4 w-4 text-text-tertiary group-hover:text-text-destructive' /> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| @@ -146,7 +146,7 @@ const AddExtractParameter: FC<Props> = ({ | |||
| <Select | |||
| defaultValue={param.type} | |||
| allowSearch={false} | |||
| bgClassName='bg-gray-100' | |||
| // bgClassName='bg-gray-100' | |||
| onSelect={v => handleParamChange('type')(v.value)} | |||
| optionClassName='capitalize' | |||
| items={ | |||
| @@ -171,7 +171,7 @@ const AddExtractParameter: FC<Props> = ({ | |||
| </Field> | |||
| <Field title={t(`${i18nPrefix}.addExtractParameterContent.required`)}> | |||
| <> | |||
| <div className='mb-1.5 text-xs font-normal leading-[18px] text-gray-500'>{t(`${i18nPrefix}.addExtractParameterContent.requiredContent`)}</div> | |||
| <div className='mb-1.5 text-xs font-normal leading-[18px] text-text-tertiary'>{t(`${i18nPrefix}.addExtractParameterContent.requiredContent`)}</div> | |||
| <Switch size='l' defaultValue={param.required} onChange={handleParamChange('required')} /> | |||
| </> | |||
| </Field> | |||
| @@ -164,7 +164,7 @@ const Panel: FC<NodePanelProps<ParameterExtractorNodeType>> = ({ | |||
| {!readOnly && ( | |||
| <ImportFromTool onImport={handleImportFromTool} /> | |||
| )} | |||
| {!readOnly && (<div className='h-3 w-px bg-gray-200'></div>)} | |||
| {!readOnly && (<div className='h-3 w-px bg-divider-regular'></div>)} | |||
| <AddExtractParameter type='add' onSave={addExtractParameter} /> | |||
| </div> | |||
| ) | |||
| @@ -47,12 +47,12 @@ const VarItem: FC<Props> = ({ | |||
| hideEditVarModal() | |||
| }, [onChange, hideEditVarModal]) | |||
| return ( | |||
| <div ref={ref} className='flex h-8 cursor-pointer items-center justify-between rounded-lg border border-gray-200 bg-white px-2.5 shadow-xs hover:shadow-md'> | |||
| <div ref={ref} className='flex h-8 cursor-pointer items-center justify-between rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 shadow-xs hover:shadow-md'> | |||
| <div className='flex w-0 grow items-center space-x-1'> | |||
| <Variable02 className='h-3.5 w-3.5 text-primary-500' /> | |||
| <div title={payload.variable} className='max-w-[130px] shrink-0 truncate text-[13px] font-medium text-gray-700'>{payload.variable}</div> | |||
| {payload.label && (<><div className='shrink-0 text-xs font-medium text-gray-400'>·</div> | |||
| <div title={payload.label as string} className='max-w-[130px] truncate text-[13px] font-medium text-gray-500'>{payload.label as string}</div> | |||
| <Variable02 className='h-3.5 w-3.5 text-text-accent' /> | |||
| <div title={payload.variable} className='max-w-[130px] shrink-0 truncate text-[13px] font-medium text-text-secondary'>{payload.variable}</div> | |||
| {payload.label && (<><div className='shrink-0 text-xs font-medium text-text-quaternary'>·</div> | |||
| <div title={payload.label as string} className='max-w-[130px] truncate text-[13px] font-medium text-text-tertiary'>{payload.label as string}</div> | |||
| </>)} | |||
| {showLegacyBadge && ( | |||
| <Badge | |||
| @@ -67,18 +67,18 @@ const VarItem: FC<Props> = ({ | |||
| ? ( | |||
| <> | |||
| {payload.required && ( | |||
| <div className='mr-2 text-xs font-normal text-gray-500'>{t('workflow.nodes.start.required')}</div> | |||
| <div className='mr-2 text-xs font-normal text-text-tertiary'>{t('workflow.nodes.start.required')}</div> | |||
| )} | |||
| <InputVarTypeIcon type={payload.type} className='h-3.5 w-3.5 text-gray-500' /> | |||
| <InputVarTypeIcon type={payload.type} className='h-3.5 w-3.5 text-text-tertiary' /> | |||
| </> | |||
| ) | |||
| : (!readonly && ( | |||
| <> | |||
| <div onClick={showEditVarModal} className='mr-1 cursor-pointer rounded-md p-1 hover:bg-black/5'> | |||
| <Edit03 className='h-4 w-4 text-gray-500' /> | |||
| <div onClick={showEditVarModal} className='mr-1 cursor-pointer rounded-md p-1 hover:bg-state-base-hover'> | |||
| <Edit03 className='h-4 w-4 text-text-tertiary' /> | |||
| </div> | |||
| <div onClick={onRemove} className='cursor-pointer rounded-md p-1 hover:bg-black/5'> | |||
| <RiDeleteBinLine className='h-4 w-4 text-gray-500' /> | |||
| <div onClick={onRemove} className='group cursor-pointer rounded-md p-1 hover:bg-state-destructive-hover'> | |||
| <RiDeleteBinLine className='h-4 w-4 text-text-tertiary group-hover:text-text-destructive' /> | |||
| </div> | |||
| </> | |||
| ))} | |||
| @@ -46,7 +46,7 @@ const VarList: FC<Props> = ({ | |||
| if (list.length === 0) { | |||
| return ( | |||
| <div className='flex h-[42px] items-center justify-center rounded-md bg-gray-50 text-xs font-normal leading-[18px] text-gray-500'> | |||
| <div className='flex h-[42px] items-center justify-center rounded-md bg-components-panel-bg text-xs font-normal leading-[18px] text-text-tertiary'> | |||
| {t('workflow.nodes.start.noVarTip')} | |||
| </div> | |||
| ) | |||
| @@ -20,15 +20,15 @@ const Node: FC<NodeProps<StartNodeType>> = ({ | |||
| <div className='mb-1 px-3 py-1'> | |||
| <div className='space-y-0.5'> | |||
| {variables.map(variable => ( | |||
| <div key={variable.variable} className='flex h-6 items-center justify-between space-x-1 rounded-md bg-gray-100 px-1 text-xs font-normal text-gray-700'> | |||
| <div key={variable.variable} className='flex h-6 items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1'> | |||
| <div className='flex w-0 grow items-center space-x-1'> | |||
| <Variable02 className='h-3.5 w-3.5 shrink-0 text-primary-500' /> | |||
| <span className='w-0 grow truncate text-xs font-normal text-gray-700'>{variable.variable}</span> | |||
| <Variable02 className='h-3.5 w-3.5 shrink-0 text-text-accent' /> | |||
| <span className='system-xs-regular w-0 grow truncate text-text-secondary'>{variable.variable}</span> | |||
| </div> | |||
| <div className='ml-1 flex items-center space-x-1'> | |||
| {variable.required && <span className='text-xs font-normal uppercase text-gray-500'>{t(`${i18nPrefix}.required`)}</span>} | |||
| <InputVarTypeIcon type={variable.type} className='h-3 w-3 text-gray-500' /> | |||
| {variable.required && <span className='system-2xs-regular-uppercase text-text-tertiary'>{t(`${i18nPrefix}.required`)}</span>} | |||
| <InputVarTypeIcon type={variable.type} className='h-3 w-3 text-text-tertiary' /> | |||
| </div> | |||
| </div> | |||
| ))} | |||
| @@ -64,7 +64,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({ | |||
| variable: 'sys.query', | |||
| } as any} | |||
| rightContent={ | |||
| <div className='text-xs font-normal text-gray-500'> | |||
| <div className='text-xs font-normal text-text-tertiary'> | |||
| String | |||
| </div> | |||
| } | |||
| @@ -78,7 +78,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({ | |||
| variable: 'sys.files', | |||
| } as any} | |||
| rightContent={ | |||
| <div className='text-xs font-normal text-gray-500'> | |||
| <div className='text-xs font-normal text-text-tertiary'> | |||
| Array[File] | |||
| </div> | |||
| } | |||
| @@ -92,7 +92,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({ | |||
| variable: 'sys.dialogue_count', | |||
| } as any} | |||
| rightContent={ | |||
| <div className='text-xs font-normal text-gray-500'> | |||
| <div className='text-xs font-normal text-text-tertiary'> | |||
| Number | |||
| </div> | |||
| } | |||
| @@ -103,7 +103,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({ | |||
| variable: 'sys.conversation_id', | |||
| } as any} | |||
| rightContent={ | |||
| <div className='text-xs font-normal text-gray-500'> | |||
| <div className='text-xs font-normal text-text-tertiary'> | |||
| String | |||
| </div> | |||
| } | |||
| @@ -117,7 +117,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({ | |||
| variable: 'sys.user_id', | |||
| } as any} | |||
| rightContent={ | |||
| <div className='text-xs font-normal text-gray-500'> | |||
| <div className='text-xs font-normal text-text-tertiary'> | |||
| String | |||
| </div> | |||
| } | |||
| @@ -128,7 +128,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({ | |||
| variable: 'sys.app_id', | |||
| } as any} | |||
| rightContent={ | |||
| <div className='text-xs font-normal text-gray-500'> | |||
| <div className='text-xs font-normal text-text-tertiary'> | |||
| String | |||
| </div> | |||
| } | |||
| @@ -139,7 +139,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({ | |||
| variable: 'sys.workflow_id', | |||
| } as any} | |||
| rightContent={ | |||
| <div className='text-xs font-normal text-gray-500'> | |||
| <div className='text-xs font-normal text-text-tertiary'> | |||
| String | |||
| </div> | |||
| } | |||
| @@ -150,7 +150,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({ | |||
| variable: 'sys.workflow_run_id', | |||
| } as any} | |||
| rightContent={ | |||
| <div className='text-xs font-normal text-gray-500'> | |||
| <div className='text-xs font-normal text-text-tertiary'> | |||
| String | |||
| </div> | |||
| } | |||
| @@ -81,13 +81,13 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({ | |||
| headerRight={ | |||
| <div className='flex items-center'> | |||
| <a | |||
| className='flex h-[18px] items-center space-x-0.5 text-xs font-normal text-gray-500' | |||
| className='flex h-[18px] items-center space-x-0.5 text-xs font-normal text-text-tertiary' | |||
| href="https://jinja.palletsprojects.com/en/3.1.x/templates/" | |||
| target='_blank'> | |||
| <span>{t(`${i18nPrefix}.codeSupportTip`)}</span> | |||
| <RiQuestionLine className='h-3 w-3' /> | |||
| </a> | |||
| <div className='mx-1.5 h-3 w-px bg-gray-200'></div> | |||
| <div className='mx-1.5 h-3 w-px bg-divider-regular'></div> | |||
| </div> | |||
| } | |||
| value={inputs.template} | |||
| @@ -17,22 +17,22 @@ const Node: FC<NodeProps<ToolNodeType>> = ({ | |||
| <div className='mb-1 px-3 py-1'> | |||
| <div className='space-y-0.5'> | |||
| {toolConfigs.map((key, index) => ( | |||
| <div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md bg-gray-100 px-1 text-xs font-normal text-gray-700'> | |||
| <div title={key} className='max-w-[100px] shrink-0 truncate text-xs font-medium uppercase text-gray-500'> | |||
| <div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1 text-xs font-normal text-text-secondary'> | |||
| <div title={key} className='max-w-[100px] shrink-0 truncate text-xs font-medium uppercase text-text-tertiary'> | |||
| {key} | |||
| </div> | |||
| {typeof tool_configurations[key] === 'string' && ( | |||
| <div title={tool_configurations[key]} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-gray-700'> | |||
| <div title={tool_configurations[key]} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-text-secondary'> | |||
| {paramSchemas?.find(i => i.name === key)?.type === FormTypeEnum.secretInput ? '********' : tool_configurations[key]} | |||
| </div> | |||
| )} | |||
| {typeof tool_configurations[key] === 'number' && ( | |||
| <div title={tool_configurations[key].toString()} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-gray-700'> | |||
| <div title={tool_configurations[key].toString()} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-text-secondary'> | |||
| {tool_configurations[key]} | |||
| </div> | |||
| )} | |||
| {typeof tool_configurations[key] !== 'string' && tool_configurations[key]?.type === FormTypeEnum.modelSelector && ( | |||
| <div title={tool_configurations[key].model} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-gray-700'> | |||
| <div title={tool_configurations[key].model} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-text-secondary'> | |||
| {tool_configurations[key].model} | |||
| </div> | |||
| )} | |||
| @@ -107,14 +107,14 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({ | |||
| <Form | |||
| className='space-y-4' | |||
| itemClassName='!py-0' | |||
| fieldLabelClassName='!text-[13px] !font-semibold !text-gray-700 uppercase' | |||
| fieldLabelClassName='!text-[13px] !font-semibold !text-text-secondary uppercase' | |||
| value={toolSettingValue} | |||
| onChange={setToolSettingValue} | |||
| formSchemas={toolSettingSchema as any} | |||
| isEditMode={false} | |||
| showOnVariableMap={{}} | |||
| validating={false} | |||
| inputClassName='!bg-gray-50' | |||
| // inputClassName='!bg-gray-50' | |||
| readonly={readOnly} | |||
| /> | |||
| </div> | |||
| @@ -68,9 +68,9 @@ const AddVariable = ({ | |||
| > | |||
| <Plus02 | |||
| className={cn( | |||
| 'h-2.5 w-2.5 text-gray-500', | |||
| 'group-hover/addvariable:text-white', | |||
| open && '!text-white', | |||
| 'h-2.5 w-2.5 text-text-tertiary', | |||
| 'group-hover/addvariable:text-text-primary', | |||
| open && '!text-text-primary', | |||
| )} | |||
| /> | |||
| </div> | |||
| @@ -82,17 +82,17 @@ const NodeGroupItem = ({ | |||
| <div | |||
| className={cn( | |||
| 'relative rounded-lg border-[1.5px] border-transparent px-1.5 pb-1.5 pt-1', | |||
| showSelectionBorder && '!border-dashed !border-gray-300 bg-black/[0.02]', | |||
| showSelectedBorder && '!border-primary-600 !bg-primary-50', | |||
| showSelectionBorder && '!border-dashed !border-divider-subtle bg-state-base-hover', | |||
| showSelectedBorder && '!border-text-accent !bg-util-colors-blue-blue-50', | |||
| )} | |||
| onMouseEnter={() => groupEnabled && handleGroupItemMouseEnter(item.targetHandleId)} | |||
| onMouseLeave={handleGroupItemMouseLeave} | |||
| > | |||
| <div className='flex h-4 items-center justify-between text-[10px] font-medium text-gray-500'> | |||
| <div className='flex h-4 items-center justify-between text-[10px] font-medium text-text-tertiary'> | |||
| <span | |||
| className={cn( | |||
| 'grow truncate uppercase', | |||
| showSelectedBorder && 'text-primary-600', | |||
| showSelectedBorder && 'text-text-accent', | |||
| )} | |||
| title={item.title} | |||
| > | |||
| @@ -100,7 +100,7 @@ const NodeGroupItem = ({ | |||
| </span> | |||
| <div className='flex items-center'> | |||
| <span className='ml-2 shrink-0'>{item.type}</span> | |||
| <div className='ml-2 mr-1 h-2.5 w-[1px] bg-gray-200'></div> | |||
| <div className='ml-2 mr-1 h-2.5 w-[1px] bg-divider-regular'></div> | |||
| <AddVariable | |||
| availableVars={availableVars} | |||
| variableAssignerNodeId={item.variableAssignerNodeId} | |||
| @@ -113,7 +113,7 @@ const NodeGroupItem = ({ | |||
| !item.variables.length && ( | |||
| <div | |||
| className={cn( | |||
| 'relative flex h-[22px] items-center justify-between space-x-1 rounded-md bg-gray-100 px-1 text-[10px] font-normal uppercase text-gray-400', | |||
| 'relative flex h-[22px] items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1 text-[10px] font-normal uppercase text-text-tertiary', | |||
| (showSelectedBorder || showSelectionBorder) && '!bg-black/[0.02]', | |||
| )} | |||
| > | |||
| @@ -64,7 +64,7 @@ const NodeVariableItem = ({ | |||
| <div | |||
| className={cn( | |||
| 'system-xs-medium ml-0.5 shrink truncate text-text-accent', | |||
| isEnv && 'text-gray-900', | |||
| isEnv && 'text-text-primary', | |||
| isException && 'text-text-warning', | |||
| isChatVar && 'text-util-colors-teal-teal-700', | |||
| )} | |||
| @@ -77,7 +77,7 @@ const NodeVariableItem = ({ | |||
| return ( | |||
| <div className={cn( | |||
| 'relative flex items-center gap-1 self-stretch rounded-md bg-workflow-block-parma-bg p-[3px] pl-[5px]', | |||
| showBorder && '!bg-black/[0.02]', | |||
| showBorder && '!bg-state-base-hover', | |||
| className, | |||
| )}> | |||
| <div className='flex w-0 grow items-center'> | |||
| @@ -86,12 +86,12 @@ const NodeVariableItem = ({ | |||
| <> | |||
| <div className='shrink-0 p-[1px]'> | |||
| <VarBlockIcon | |||
| className='!text-gray-900' | |||
| className='!text-text-primary' | |||
| type={node.data.type} | |||
| /> | |||
| </div> | |||
| <div | |||
| className='mx-0.5 shrink-[1000] truncate text-xs font-medium text-gray-700' | |||
| className='mx-0.5 shrink-[1000] truncate text-xs font-medium text-text-secondary' | |||
| title={node?.data.title} | |||
| > | |||
| {node?.data.title} | |||
| @@ -132,7 +132,7 @@ const VarGroupItem: FC<Props> = ({ | |||
| </div> | |||
| {canRemove && ( | |||
| <div | |||
| className='ml-0.5 hidden cursor-pointer rounded-md p-1 text-gray-500 hover:bg-[#FEE4E2] hover:text-[#D92D20] group-hover:block' | |||
| className='ml-0.5 hidden cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive group-hover:block' | |||
| onClick={onRemove} | |||
| > | |||
| <RiDeleteBinLine | |||
| @@ -75,7 +75,6 @@ const VarList: FC<Props> = ({ | |||
| /> | |||
| {!readonly && ( | |||
| <RemoveButton | |||
| className='!bg-gray-100 !p-2 hover:!bg-gray-200' | |||
| onClick={handleVarRemove(index)} | |||
| /> | |||
| )} | |||
| @@ -99,22 +99,20 @@ const Panel: FC<NodePanelProps<VariableAssignerNodeType>> = ({ | |||
| {isEnableGroup && ( | |||
| <> | |||
| <Split /> | |||
| <div> | |||
| <OutputVars> | |||
| <> | |||
| {inputs.advanced_settings?.groups.map((item, index) => ( | |||
| <VarItem | |||
| key={index} | |||
| name={`${item.group_name}.output`} | |||
| type={item.output_type} | |||
| description={t(`${i18nPrefix}.outputVars.varDescribe`, { | |||
| groupName: item.group_name, | |||
| })} | |||
| /> | |||
| ))} | |||
| </> | |||
| </OutputVars> | |||
| </div> | |||
| <OutputVars> | |||
| <> | |||
| {inputs.advanced_settings?.groups.map((item, index) => ( | |||
| <VarItem | |||
| key={index} | |||
| name={`${item.group_name}.output`} | |||
| type={item.output_type} | |||
| description={t(`${i18nPrefix}.outputVars.varDescribe`, { | |||
| groupName: item.group_name, | |||
| })} | |||
| /> | |||
| ))} | |||
| </> | |||
| </OutputVars> | |||
| </> | |||
| )} | |||
| <RemoveEffectVarConfirm | |||
| @@ -86,12 +86,10 @@ const ChatRecord = () => { | |||
| return ( | |||
| <div | |||
| className={` | |||
| flex h-full w-[420px] flex-col rounded-l-2xl border border-black/2 shadow-xl | |||
| `} | |||
| style={{ | |||
| background: 'linear-gradient(156deg, rgba(242, 244, 247, 0.80) 0%, rgba(242, 244, 247, 0.00) 99.43%), var(--white, #FFF)', | |||
| }} | |||
| className='flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-chatbot-bg shadow-xl' | |||
| // style={{ | |||
| // background: 'linear-gradient(156deg, rgba(242, 244, 247, 0.80) 0%, rgba(242, 244, 247, 0.00) 99.43%), var(--white, #FFF)', | |||
| // }} | |||
| > | |||
| {!fetched && ( | |||
| <div className='flex h-full items-center justify-center'> | |||
| @@ -100,7 +98,7 @@ const ChatRecord = () => { | |||
| )} | |||
| {fetched && ( | |||
| <> | |||
| <div className='flex shrink-0 items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'> | |||
| <div className='flex shrink-0 items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary'> | |||
| {`TEST CHAT#${historyWorkflowData?.sequence_number}`} | |||
| <div | |||
| className='flex h-6 w-6 cursor-pointer items-center justify-center' | |||
| @@ -109,7 +107,7 @@ const ChatRecord = () => { | |||
| workflowStore.setState({ historyWorkflowData: undefined }) | |||
| }} | |||
| > | |||
| <RiCloseLine className='h-4 w-4 text-gray-500' /> | |||
| <RiCloseLine className='h-4 w-4 text-text-tertiary' /> | |||
| </div> | |||
| </div> | |||
| <div className='h-0 grow'> | |||
| @@ -17,25 +17,25 @@ const UserInput = () => { | |||
| <div | |||
| className={` | |||
| rounded-xl border | |||
| ${!expanded ? 'border-indigo-100 bg-indigo-25 shadow-none' : 'border-transparent bg-white shadow-xs'} | |||
| ${!expanded ? 'border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-none' : 'border-transparent bg-white shadow-xs'} | |||
| `} | |||
| > | |||
| <div | |||
| className={` | |||
| flex h-[18px] cursor-pointer items-center px-2 pt-4 text-[13px] font-semibold | |||
| ${!expanded ? 'text-indigo-800' : 'text-gray-800'} | |||
| ${!expanded ? 'text-text-accent-secondary' : 'text-text-secondary'} | |||
| `} | |||
| onClick={() => setExpanded(!expanded)} | |||
| > | |||
| <RiArrowDownSLine | |||
| className={`mr-1 h-3 w-3 ${!expanded ? '-rotate-90 text-indigo-600' : 'text-gray-300'}`} | |||
| className={`mr-1 h-3 w-3 ${!expanded ? '-rotate-90 text-text-accent' : 'text-text-tertiary'}`} | |||
| /> | |||
| {t('workflow.panel.userInputField').toLocaleUpperCase()} | |||
| </div> | |||
| <div className='px-2 pb-3 pt-1'> | |||
| { | |||
| expanded && ( | |||
| <div className='py-2 text-[13px] text-gray-900'> | |||
| <div className='py-2 text-[13px] text-text-primary'> | |||
| { | |||
| variables.map((variable: any) => ( | |||
| <div | |||
| @@ -125,12 +125,12 @@ const DebugAndPreview = () => { | |||
| {expanded && <div className='absolute bottom-[-17px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg'/>} | |||
| </div> | |||
| )} | |||
| <div className='mx-3 h-3.5 w-[1px] bg-gray-200'></div> | |||
| <div className='mx-3 h-3.5 w-[1px] bg-divider-regular'></div> | |||
| <div | |||
| className='flex h-6 w-6 cursor-pointer items-center justify-center' | |||
| onClick={handleCancelDebugAndPreviewPanel} | |||
| > | |||
| <RiCloseLine className='h-4 w-4 text-gray-500' /> | |||
| <RiCloseLine className='h-4 w-4 text-text-tertiary' /> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| @@ -49,29 +49,29 @@ const WorkflowPreview = () => { | |||
| return ( | |||
| <div className={` | |||
| flex h-full w-[420px] flex-col rounded-l-2xl border-[0.5px] border-gray-200 bg-white shadow-xl | |||
| flex h-full w-[420px] flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl | |||
| `}> | |||
| <div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'> | |||
| <div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary'> | |||
| {`Test Run${!workflowRunningData?.result.sequence_number ? '' : `#${workflowRunningData?.result.sequence_number}`}`} | |||
| <div className='cursor-pointer p-1' onClick={() => handleCancelDebugAndPreviewPanel()}> | |||
| <RiCloseLine className='h-4 w-4 text-gray-500' /> | |||
| <RiCloseLine className='h-4 w-4 text-text-tertiary' /> | |||
| </div> | |||
| </div> | |||
| <div className='relative flex grow flex-col'> | |||
| <div className='flex shrink-0 items-center border-b-[0.5px] border-[rgba(0,0,0,0.05)] px-4'> | |||
| <div className='flex shrink-0 items-center border-b-[0.5px] border-divider-subtle px-4'> | |||
| {showInputsPanel && ( | |||
| <div | |||
| className={cn( | |||
| 'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-gray-400', | |||
| currentTab === 'INPUT' && '!border-[rgb(21,94,239)] text-gray-700', | |||
| 'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary', | |||
| currentTab === 'INPUT' && '!border-[rgb(21,94,239)] text-text-secondary', | |||
| )} | |||
| onClick={() => switchTab('INPUT')} | |||
| >{t('runLog.input')}</div> | |||
| )} | |||
| <div | |||
| className={cn( | |||
| 'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-gray-400', | |||
| currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-gray-700', | |||
| 'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary', | |||
| currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-text-secondary', | |||
| !workflowRunningData && '!cursor-not-allowed opacity-30', | |||
| )} | |||
| onClick={() => { | |||
| @@ -82,8 +82,8 @@ const WorkflowPreview = () => { | |||
| >{t('runLog.result')}</div> | |||
| <div | |||
| className={cn( | |||
| 'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-gray-400', | |||
| currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-gray-700', | |||
| 'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary', | |||
| currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-text-secondary', | |||
| !workflowRunningData && '!cursor-not-allowed opacity-30', | |||
| )} | |||
| onClick={() => { | |||
| @@ -94,8 +94,8 @@ const WorkflowPreview = () => { | |||
| >{t('runLog.detail')}</div> | |||
| <div | |||
| className={cn( | |||
| 'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-gray-400', | |||
| currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-gray-700', | |||
| 'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary', | |||
| currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-text-secondary', | |||
| !workflowRunningData && '!cursor-not-allowed opacity-30', | |||
| )} | |||
| onClick={() => { | |||