mirror of
https://github.com/langgenius/dify.git
synced 2026-05-04 17:38:04 +08:00
Merge remote-tracking branch 'myori/main' into feat/collaboration2
This commit is contained in:
hjlarry
@ -1,25 +1,25 @@
|
||||
import type { IChatItem } from '@/app/components/base/chat/chat/type'
|
||||
import type { ChatItem, ChatItemInTree } from '@/app/components/base/chat/types'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import { useStore as useAppStore } from '@/app/components/app/store'
|
||||
import Chat from '@/app/components/base/chat/chat'
|
||||
import { buildChatItemTree, getThreadMessages } from '@/app/components/base/chat/utils'
|
||||
import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
|
||||
import Loading from '@/app/components/base/loading'
|
||||
import { fetchConversationMessages } from '@/service/debug'
|
||||
import { useWorkflowRun } from '../../hooks'
|
||||
import {
|
||||
useStore,
|
||||
useWorkflowStore,
|
||||
} from '../../store'
|
||||
import { useWorkflowRun } from '../../hooks'
|
||||
import { formatWorkflowRunIdentifier } from '../../utils'
|
||||
import UserInput from './user-input'
|
||||
import Chat from '@/app/components/base/chat/chat'
|
||||
import type { ChatItem, ChatItemInTree } from '@/app/components/base/chat/types'
|
||||
import { fetchConversationMessages } from '@/service/debug'
|
||||
import { useStore as useAppStore } from '@/app/components/app/store'
|
||||
import Loading from '@/app/components/base/loading'
|
||||
import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
|
||||
import type { IChatItem } from '@/app/components/base/chat/chat/type'
|
||||
import { buildChatItemTree, getThreadMessages } from '@/app/components/base/chat/utils'
|
||||
|
||||
function getFormattedChatList(messages: any[]) {
|
||||
const res: ChatItem[] = []
|
||||
@ -87,48 +87,48 @@ const ChatRecord = () => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className='flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-chatbot-bg shadow-xl'
|
||||
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'>
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<Loading />
|
||||
</div>
|
||||
)}
|
||||
{fetched && (
|
||||
<>
|
||||
<div className='flex shrink-0 items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary'>
|
||||
<div className="flex shrink-0 items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary">
|
||||
{`TEST CHAT${formatWorkflowRunIdentifier(historyWorkflowData?.finished_at)}`}
|
||||
<div
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center'
|
||||
className="flex h-6 w-6 cursor-pointer items-center justify-center"
|
||||
onClick={() => {
|
||||
handleLoadBackupDraft()
|
||||
workflowStore.setState({ historyWorkflowData: undefined })
|
||||
}}
|
||||
>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-0 grow'>
|
||||
<div className="h-0 grow">
|
||||
<Chat
|
||||
config={{
|
||||
supportCitationHitInfo: true,
|
||||
questionEditEnable: false,
|
||||
} as any}
|
||||
chatList={threadChatItems}
|
||||
chatContainerClassName='px-3'
|
||||
chatContainerInnerClassName='pt-6 w-full max-w-full mx-auto'
|
||||
chatFooterClassName='px-4 rounded-b-2xl'
|
||||
chatFooterInnerClassName='pb-4 w-full max-w-full mx-auto'
|
||||
chatContainerClassName="px-3"
|
||||
chatContainerInnerClassName="pt-6 w-full max-w-full mx-auto"
|
||||
chatFooterClassName="px-4 rounded-b-2xl"
|
||||
chatFooterInnerClassName="pb-4 w-full max-w-full mx-auto"
|
||||
chatNode={<UserInput />}
|
||||
noChatInput
|
||||
allToolIcons={{}}
|
||||
showPromptLog
|
||||
switchSibling={switchSibling}
|
||||
noSpacing
|
||||
chatAnswerContainerInner='!pr-2'
|
||||
chatAnswerContainerInner="!pr-2"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { RiArrowDownSLine } from '@remixicon/react'
|
||||
import {
|
||||
memo,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiArrowDownSLine } from '@remixicon/react'
|
||||
|
||||
const UserInput = () => {
|
||||
const { t } = useTranslation()
|
||||
@ -30,17 +30,17 @@ const UserInput = () => {
|
||||
<RiArrowDownSLine
|
||||
className={`mr-1 h-3 w-3 ${!expanded ? '-rotate-90 text-text-accent' : 'text-text-tertiary'}`}
|
||||
/>
|
||||
{t('workflow.panel.userInputField').toLocaleUpperCase()}
|
||||
{t('panel.userInputField', { ns: 'workflow' }).toLocaleUpperCase()}
|
||||
</div>
|
||||
<div className='px-2 pb-3 pt-1'>
|
||||
<div className="px-2 pb-3 pt-1">
|
||||
{
|
||||
expanded && (
|
||||
<div className='py-2 text-[13px] text-text-primary'>
|
||||
<div className="py-2 text-[13px] text-text-primary">
|
||||
{
|
||||
variables.map((variable: any) => (
|
||||
<div
|
||||
key={variable.variable}
|
||||
className='mb-2 last-of-type:mb-0'
|
||||
className="mb-2 last-of-type:mb-0"
|
||||
>
|
||||
</div>
|
||||
))
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiAddLine } from '@remixicon/react'
|
||||
import { produce } from 'immer'
|
||||
import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
|
||||
import * as React from 'react'
|
||||
import { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/app/components/base/button'
|
||||
import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import BoolValue from './bool-value'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
@ -50,21 +51,21 @@ const ArrayValueList: FC<Props> = ({
|
||||
return (
|
||||
<div className={cn('w-full space-y-2', className)}>
|
||||
{list.map((item, index) => (
|
||||
<div className='flex items-center space-x-1' key={index}>
|
||||
<div className="flex items-center space-x-1" key={index}>
|
||||
<BoolValue
|
||||
value={item}
|
||||
onChange={handleChange(index)}
|
||||
/>
|
||||
|
||||
<RemoveButton
|
||||
className='!bg-gray-100 !p-2 hover:!bg-gray-200'
|
||||
className="!bg-gray-100 !p-2 hover:!bg-gray-200"
|
||||
onClick={handleItemRemove(index)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<Button variant='tertiary' className='w-full' onClick={handleItemAdd}>
|
||||
<RiAddLine className='mr-1 h-4 w-4' />
|
||||
<span>{t('workflow.chatVariable.modal.addArrayValue')}</span>
|
||||
<Button variant="tertiary" className="w-full" onClick={handleItemAdd}>
|
||||
<RiAddLine className="mr-1 h-4 w-4" />
|
||||
<span>{t('chatVariable.modal.addArrayValue', { ns: 'workflow' })}</span>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiAddLine } from '@remixicon/react'
|
||||
import { produce } from 'immer'
|
||||
import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
|
||||
import * as React from 'react'
|
||||
import { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Input from '@/app/components/base/input'
|
||||
import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
|
||||
|
||||
type Props = {
|
||||
isString: boolean
|
||||
@ -47,24 +48,24 @@ const ArrayValueList: FC<Props> = ({
|
||||
}, [list, onChange])
|
||||
|
||||
return (
|
||||
<div className='w-full space-y-2'>
|
||||
<div className="w-full space-y-2">
|
||||
{list.map((item, index) => (
|
||||
<div className='flex items-center space-x-1' key={index}>
|
||||
<div className="flex items-center space-x-1" key={index}>
|
||||
<Input
|
||||
placeholder={t('workflow.chatVariable.modal.arrayValue') || ''}
|
||||
placeholder={t('chatVariable.modal.arrayValue', { ns: 'workflow' }) || ''}
|
||||
value={list[index]}
|
||||
onChange={handleNameChange(index)}
|
||||
type={isString ? 'text' : 'number'}
|
||||
/>
|
||||
<RemoveButton
|
||||
className='!bg-gray-100 !p-2 hover:!bg-gray-200'
|
||||
className="!bg-gray-100 !p-2 hover:!bg-gray-200"
|
||||
onClick={handleItemRemove(index)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<Button variant='tertiary' className='w-full' onClick={handleItemAdd}>
|
||||
<RiAddLine className='mr-1 h-4 w-4' />
|
||||
<span>{t('workflow.chatVariable.modal.addArrayValue')}</span>
|
||||
<Button variant="tertiary" className="w-full" onClick={handleItemAdd}>
|
||||
<RiAddLine className="mr-1 h-4 w-4" />
|
||||
<span>{t('chatVariable.modal.addArrayValue', { ns: 'workflow' })}</span>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback } from 'react'
|
||||
import * as React from 'react'
|
||||
import { useCallback } from 'react'
|
||||
import OptionCard from '../../../nodes/_base/components/option-card'
|
||||
|
||||
type Props = {
|
||||
@ -20,15 +21,17 @@ const BoolValue: FC<Props> = ({
|
||||
}, [onChange])
|
||||
|
||||
return (
|
||||
<div className='flex w-full space-x-1'>
|
||||
<OptionCard className='grow'
|
||||
<div className="flex w-full space-x-1">
|
||||
<OptionCard
|
||||
className="grow"
|
||||
selected={booleanValue}
|
||||
title='True'
|
||||
title="True"
|
||||
onSelect={handleChange(true)}
|
||||
/>
|
||||
<OptionCard className='grow'
|
||||
<OptionCard
|
||||
className="grow"
|
||||
selected={!booleanValue}
|
||||
title='False'
|
||||
title="False"
|
||||
onSelect={handleChange(false)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { produce } from 'immer'
|
||||
import * as React from 'react'
|
||||
import { useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useContext } from 'use-context-selector'
|
||||
import { ToastContext } from '@/app/components/base/toast'
|
||||
import VariableTypeSelector from '@/app/components/workflow/panel/chat-variable-panel/components/variable-type-select'
|
||||
import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
|
||||
import VariableTypeSelector from '@/app/components/workflow/panel/chat-variable-panel/components/variable-type-select'
|
||||
import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
|
||||
|
||||
type Props = {
|
||||
@ -91,31 +92,31 @@ const ObjectValueItem: FC<Props> = ({
|
||||
}, [handleItemAdd, index, list.length])
|
||||
|
||||
return (
|
||||
<div className='group flex border-t border-gray-200'>
|
||||
<div className="group flex border-t border-gray-200">
|
||||
{/* Key */}
|
||||
<div className='w-[120px] border-r border-gray-200'>
|
||||
<div className="w-[120px] border-r border-gray-200">
|
||||
<input
|
||||
className='system-xs-regular placeholder:system-xs-regular block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:bg-state-base-hover focus:bg-components-input-bg-active'
|
||||
placeholder={t('workflow.chatVariable.modal.objectKey') || ''}
|
||||
className="system-xs-regular placeholder:system-xs-regular block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:bg-state-base-hover focus:bg-components-input-bg-active"
|
||||
placeholder={t('chatVariable.modal.objectKey', { ns: 'workflow' }) || ''}
|
||||
value={list[index].key}
|
||||
onChange={handleKeyChange(index)}
|
||||
/>
|
||||
</div>
|
||||
{/* Type */}
|
||||
<div className='w-[96px] border-r border-gray-200'>
|
||||
<div className="w-[96px] border-r border-gray-200">
|
||||
<VariableTypeSelector
|
||||
inCell
|
||||
value={list[index].type}
|
||||
list={typeList}
|
||||
onSelect={handleTypeChange(index)}
|
||||
popupClassName='w-[120px]'
|
||||
popupClassName="w-[120px]"
|
||||
/>
|
||||
</div>
|
||||
{/* Value */}
|
||||
<div className='relative w-[230px]'>
|
||||
<div className="relative w-[230px]">
|
||||
<input
|
||||
className='system-xs-regular placeholder:system-xs-regular block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:bg-state-base-hover focus:bg-components-input-bg-active'
|
||||
placeholder={t('workflow.chatVariable.modal.objectValue') || ''}
|
||||
className="system-xs-regular placeholder:system-xs-regular block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:bg-state-base-hover focus:bg-components-input-bg-active"
|
||||
placeholder={t('chatVariable.modal.objectValue', { ns: 'workflow' }) || ''}
|
||||
value={list[index].value}
|
||||
onChange={handleValueChange(index)}
|
||||
onFocus={() => handleFocusChange()}
|
||||
@ -124,7 +125,7 @@ const ObjectValueItem: FC<Props> = ({
|
||||
/>
|
||||
{list.length > 1 && !isFocus && (
|
||||
<RemoveButton
|
||||
className='absolute right-1 top-0.5 z-10 hidden group-hover:block'
|
||||
className="absolute right-1 top-0.5 z-10 hidden group-hover:block"
|
||||
onClick={handleItemRemove(index)}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import * as React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import ObjectValueItem from '@/app/components/workflow/panel/chat-variable-panel/components/object-value-item'
|
||||
|
||||
@ -16,11 +16,11 @@ const ObjectValueList: FC<Props> = ({
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='w-full overflow-hidden rounded-lg border border-gray-200'>
|
||||
<div className='system-xs-medium flex h-7 items-center uppercase text-text-tertiary'>
|
||||
<div className='flex h-full w-[120px] items-center border-r border-gray-200 pl-2'>{t('workflow.chatVariable.modal.objectKey')}</div>
|
||||
<div className='flex h-full w-[96px] items-center border-r border-gray-200 pl-2'>{t('workflow.chatVariable.modal.objectType')}</div>
|
||||
<div className='flex h-full w-[230px] items-center pl-2 pr-1'>{t('workflow.chatVariable.modal.objectValue')}</div>
|
||||
<div className="w-full overflow-hidden rounded-lg border border-gray-200">
|
||||
<div className="system-xs-medium flex h-7 items-center uppercase text-text-tertiary">
|
||||
<div className="flex h-full w-[120px] items-center border-r border-gray-200 pl-2">{t('chatVariable.modal.objectKey', { ns: 'workflow' })}</div>
|
||||
<div className="flex h-full w-[96px] items-center border-r border-gray-200 pl-2">{t('chatVariable.modal.objectType', { ns: 'workflow' })}</div>
|
||||
<div className="flex h-full w-[230px] items-center pl-2 pr-1">{t('chatVariable.modal.objectValue', { ns: 'workflow' })}</div>
|
||||
</div>
|
||||
{list.map((item, index) => (
|
||||
<ObjectValueItem
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { memo, useState } from 'react'
|
||||
import { capitalize } from 'lodash-es'
|
||||
import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
|
||||
import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
|
||||
import type { ConversationVariable } from '@/app/components/workflow/types'
|
||||
import cn from '@/utils/classnames'
|
||||
import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
|
||||
import { capitalize } from 'es-toolkit/string'
|
||||
import { memo, useState } from 'react'
|
||||
import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
|
||||
import { cn } from '@/utils/classnames'
|
||||
|
||||
type VariableItemProps = {
|
||||
item: ConversationVariable
|
||||
@ -21,27 +21,28 @@ const VariableItem = ({
|
||||
<div className={cn(
|
||||
'radius-md mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
|
||||
destructive && 'border-state-destructive-border hover:bg-state-destructive-hover',
|
||||
)}>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex grow items-center gap-1'>
|
||||
<BubbleX className='h-4 w-4 text-util-colors-teal-teal-700' />
|
||||
<div className='system-sm-medium text-text-primary'>{item.name}</div>
|
||||
<div className='system-xs-medium text-text-tertiary'>{capitalize(item.value_type)}</div>
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex grow items-center gap-1">
|
||||
<BubbleX className="h-4 w-4 text-util-colors-teal-teal-700" />
|
||||
<div className="system-sm-medium text-text-primary">{item.name}</div>
|
||||
<div className="system-xs-medium text-text-tertiary">{capitalize(item.value_type)}</div>
|
||||
</div>
|
||||
<div className='flex shrink-0 items-center gap-1 text-text-tertiary'>
|
||||
<div className='radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary'>
|
||||
<RiEditLine className='h-4 w-4' onClick={() => onEdit(item)}/>
|
||||
<div className="flex shrink-0 items-center gap-1 text-text-tertiary">
|
||||
<div className="radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary">
|
||||
<RiEditLine className="h-4 w-4" onClick={() => onEdit(item)} />
|
||||
</div>
|
||||
<div
|
||||
className='radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive'
|
||||
className="radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive"
|
||||
onMouseOver={() => setDestructive(true)}
|
||||
onMouseOut={() => setDestructive(false)}
|
||||
>
|
||||
<RiDeleteBinLine className='h-4 w-4' onClick={() => onDelete(item)}/>
|
||||
<RiDeleteBinLine className="h-4 w-4" onClick={() => onDelete(item)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='system-xs-regular truncate text-text-tertiary'>{item.description}</div>
|
||||
<div className="system-xs-regular truncate text-text-tertiary">{item.description}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
'use client'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { ConversationVariable } from '@/app/components/workflow/types'
|
||||
import { RiAddLine } from '@remixicon/react'
|
||||
import * as React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/app/components/base/button'
|
||||
import VariableModal from '@/app/components/workflow/panel/chat-variable-panel/components/variable-modal'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import type { ConversationVariable } from '@/app/components/workflow/types'
|
||||
import VariableModal from '@/app/components/workflow/panel/chat-variable-panel/components/variable-modal'
|
||||
|
||||
type Props = {
|
||||
open: boolean
|
||||
@ -38,7 +38,7 @@ const VariableModalTrigger = ({
|
||||
if (open)
|
||||
onClose()
|
||||
}}
|
||||
placement='left-start'
|
||||
placement="left-start"
|
||||
offset={{
|
||||
mainAxis: 8,
|
||||
alignmentAxis: showTip ? -278 : -48,
|
||||
@ -48,13 +48,14 @@ const VariableModalTrigger = ({
|
||||
setOpen(v => !v)
|
||||
if (open)
|
||||
onClose()
|
||||
}}>
|
||||
<Button variant='primary'>
|
||||
<RiAddLine className='mr-1 h-4 w-4' />
|
||||
<span className='system-sm-medium'>{t('workflow.chatVariable.button')}</span>
|
||||
}}
|
||||
>
|
||||
<Button variant="primary">
|
||||
<RiAddLine className="mr-1 h-4 w-4" />
|
||||
<span className="system-sm-medium">{t('chatVariable.button', { ns: 'workflow' })}</span>
|
||||
</Button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[11]'>
|
||||
<PortalToFollowElemContent className="z-[11]">
|
||||
<VariableModal
|
||||
chatVar={chatVar}
|
||||
onSave={onSave}
|
||||
|
||||
@ -1,23 +1,20 @@
|
||||
import React, { useCallback, useEffect, useMemo } from 'react'
|
||||
import type { ConversationVariable } from '@/app/components/workflow/types'
|
||||
import { RiCloseLine, RiDraftLine, RiInputField } from '@remixicon/react'
|
||||
import * as React from 'react'
|
||||
import { useCallback, useEffect, useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useContext } from 'use-context-selector'
|
||||
import { v4 as uuid4 } from 'uuid'
|
||||
import { RiCloseLine, RiDraftLine, RiInputField } from '@remixicon/react'
|
||||
import VariableTypeSelector from '@/app/components/workflow/panel/chat-variable-panel/components/variable-type-select'
|
||||
import ObjectValueList from '@/app/components/workflow/panel/chat-variable-panel/components/object-value-list'
|
||||
import { DEFAULT_OBJECT_VALUE } from '@/app/components/workflow/panel/chat-variable-panel/components/object-value-item'
|
||||
import ArrayValueList from '@/app/components/workflow/panel/chat-variable-panel/components/array-value-list'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Input from '@/app/components/base/input'
|
||||
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
|
||||
import { ToastContext } from '@/app/components/base/toast'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import type { ConversationVariable } from '@/app/components/workflow/types'
|
||||
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
|
||||
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
|
||||
import ArrayValueList from '@/app/components/workflow/panel/chat-variable-panel/components/array-value-list'
|
||||
import { DEFAULT_OBJECT_VALUE } from '@/app/components/workflow/panel/chat-variable-panel/components/object-value-item'
|
||||
import ObjectValueList from '@/app/components/workflow/panel/chat-variable-panel/components/object-value-list'
|
||||
import VariableTypeSelector from '@/app/components/workflow/panel/chat-variable-panel/components/variable-type-select'
|
||||
import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
|
||||
import cn from '@/utils/classnames'
|
||||
import BoolValue from './bool-value'
|
||||
import ArrayBoolList from './array-bool-list'
|
||||
import {
|
||||
arrayBoolPlaceholder,
|
||||
arrayNumberPlaceholder,
|
||||
@ -25,7 +22,11 @@ import {
|
||||
arrayStringPlaceholder,
|
||||
objectPlaceholder,
|
||||
} from '@/app/components/workflow/panel/chat-variable-panel/utils'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
|
||||
import ArrayBoolList from './array-bool-list'
|
||||
import BoolValue from './bool-value'
|
||||
|
||||
export type ModalPropsType = {
|
||||
chatVar?: ConversationVariable
|
||||
@ -126,7 +127,7 @@ const ChatVariableModal = ({
|
||||
if (!isValid) {
|
||||
notify({
|
||||
type: 'error',
|
||||
message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: t('workflow.env.modal.name') }),
|
||||
message: t(`varKeyError.${errorMessageKey}`, { ns: 'appDebug', key: t('env.modal.name', { ns: 'workflow' }) }),
|
||||
})
|
||||
return false
|
||||
}
|
||||
@ -147,7 +148,7 @@ const ChatVariableModal = ({
|
||||
setEditInJSON(true)
|
||||
if (v === ChatVarType.String || v === ChatVarType.Number || v === ChatVarType.Object)
|
||||
setEditInJSON(false)
|
||||
if(v === ChatVarType.Boolean)
|
||||
if (v === ChatVarType.Boolean)
|
||||
setValue(false)
|
||||
if (v === ChatVarType.ArrayBoolean)
|
||||
setValue([false])
|
||||
@ -197,8 +198,8 @@ const ChatVariableModal = ({
|
||||
}
|
||||
}
|
||||
|
||||
if(type === ChatVarType.ArrayBoolean) {
|
||||
if(editInJSON)
|
||||
if (type === ChatVarType.ArrayBoolean) {
|
||||
if (editInJSON)
|
||||
setEditorContent(JSON.stringify(value.map((item: boolean) => item ? 'True' : 'False')))
|
||||
}
|
||||
setEditInJSON(editInJSON)
|
||||
@ -213,7 +214,7 @@ const ChatVariableModal = ({
|
||||
setEditorContent(content)
|
||||
try {
|
||||
let newValue = JSON.parse(content)
|
||||
if(type === ChatVarType.ArrayBoolean) {
|
||||
if (type === ChatVarType.ArrayBoolean) {
|
||||
newValue = newValue.map((item: string | boolean) => {
|
||||
if (item === 'True' || item === 'true' || item === true)
|
||||
return true
|
||||
@ -271,86 +272,86 @@ const ChatVariableModal = ({
|
||||
<div
|
||||
className={cn('flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl', type === ChatVarType.Object && 'w-[480px]')}
|
||||
>
|
||||
<div className='system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
|
||||
{!chatVar ? t('workflow.chatVariable.modal.title') : t('workflow.chatVariable.modal.editTitle')}
|
||||
<div className='flex items-center'>
|
||||
<div className="system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary">
|
||||
{!chatVar ? t('chatVariable.modal.title', { ns: 'workflow' }) : t('chatVariable.modal.editTitle', { ns: 'workflow' })}
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center'
|
||||
className="flex h-6 w-6 cursor-pointer items-center justify-center"
|
||||
onClick={onClose}
|
||||
>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='max-h-[480px] overflow-y-auto px-4 py-2'>
|
||||
<div className="max-h-[480px] overflow-y-auto px-4 py-2">
|
||||
{/* name */}
|
||||
<div className='mb-4'>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.chatVariable.modal.name')}</div>
|
||||
<div className='flex'>
|
||||
<div className="mb-4">
|
||||
<div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('chatVariable.modal.name', { ns: 'workflow' })}</div>
|
||||
<div className="flex">
|
||||
<Input
|
||||
placeholder={t('workflow.chatVariable.modal.namePlaceholder') || ''}
|
||||
placeholder={t('chatVariable.modal.namePlaceholder', { ns: 'workflow' }) || ''}
|
||||
value={name}
|
||||
onChange={handleVarNameChange}
|
||||
onBlur={e => checkVariableName(e.target.value)}
|
||||
type='text'
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* type */}
|
||||
<div className='mb-4'>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.chatVariable.modal.type')}</div>
|
||||
<div className='flex'>
|
||||
<div className="mb-4">
|
||||
<div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('chatVariable.modal.type', { ns: 'workflow' })}</div>
|
||||
<div className="flex">
|
||||
<VariableTypeSelector
|
||||
value={type}
|
||||
list={typeList}
|
||||
onSelect={handleTypeChange}
|
||||
popupClassName='w-[327px]'
|
||||
popupClassName="w-[327px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* default value */}
|
||||
<div className='mb-4'>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center justify-between text-text-secondary'>
|
||||
<div>{t('workflow.chatVariable.modal.value')}</div>
|
||||
<div className="mb-4">
|
||||
<div className="system-sm-semibold mb-1 flex h-6 items-center justify-between text-text-secondary">
|
||||
<div>{t('chatVariable.modal.value', { ns: 'workflow' })}</div>
|
||||
{(type === ChatVarType.ArrayString || type === ChatVarType.ArrayNumber || type === ChatVarType.ArrayBoolean) && (
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='small'
|
||||
className='text-text-tertiary'
|
||||
variant="ghost"
|
||||
size="small"
|
||||
className="text-text-tertiary"
|
||||
onClick={() => handleEditorChange(!editInJSON)}
|
||||
>
|
||||
{editInJSON ? <RiInputField className='mr-1 h-3.5 w-3.5' /> : <RiDraftLine className='mr-1 h-3.5 w-3.5' />}
|
||||
{editInJSON ? t('workflow.chatVariable.modal.oneByOne') : t('workflow.chatVariable.modal.editInJSON')}
|
||||
{editInJSON ? <RiInputField className="mr-1 h-3.5 w-3.5" /> : <RiDraftLine className="mr-1 h-3.5 w-3.5" />}
|
||||
{editInJSON ? t('chatVariable.modal.oneByOne', { ns: 'workflow' }) : t('chatVariable.modal.editInJSON', { ns: 'workflow' })}
|
||||
</Button>
|
||||
)}
|
||||
{type === ChatVarType.Object && (
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='small'
|
||||
className='text-text-tertiary'
|
||||
variant="ghost"
|
||||
size="small"
|
||||
className="text-text-tertiary"
|
||||
onClick={() => handleEditorChange(!editInJSON)}
|
||||
>
|
||||
{editInJSON ? <RiInputField className='mr-1 h-3.5 w-3.5' /> : <RiDraftLine className='mr-1 h-3.5 w-3.5' />}
|
||||
{editInJSON ? t('workflow.chatVariable.modal.editInForm') : t('workflow.chatVariable.modal.editInJSON')}
|
||||
{editInJSON ? <RiInputField className="mr-1 h-3.5 w-3.5" /> : <RiDraftLine className="mr-1 h-3.5 w-3.5" />}
|
||||
{editInJSON ? t('chatVariable.modal.editInForm', { ns: 'workflow' }) : t('chatVariable.modal.editInJSON', { ns: 'workflow' })}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className="flex">
|
||||
{type === ChatVarType.String && (
|
||||
// Input will remove \n\r, so use Textarea just like description area
|
||||
<textarea
|
||||
className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
|
||||
className="system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
|
||||
value={value}
|
||||
placeholder={t('workflow.chatVariable.modal.valuePlaceholder') || ''}
|
||||
placeholder={t('chatVariable.modal.valuePlaceholder', { ns: 'workflow' }) || ''}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
/>
|
||||
)}
|
||||
{type === ChatVarType.Number && (
|
||||
<Input
|
||||
placeholder={t('workflow.chatVariable.modal.valuePlaceholder') || ''}
|
||||
placeholder={t('chatVariable.modal.valuePlaceholder', { ns: 'workflow' }) || ''}
|
||||
value={value}
|
||||
onChange={e => setValue(Number(e.target.value))}
|
||||
type='number'
|
||||
type="number"
|
||||
/>
|
||||
)}
|
||||
{type === ChatVarType.Boolean && (
|
||||
@ -387,13 +388,13 @@ const ChatVariableModal = ({
|
||||
)}
|
||||
|
||||
{editInJSON && (
|
||||
<div className='w-full rounded-[10px] bg-components-input-bg-normal py-2 pl-3 pr-1' style={{ height: editorMinHeight }}>
|
||||
<div className="w-full rounded-[10px] bg-components-input-bg-normal py-2 pl-3 pr-1" style={{ height: editorMinHeight }}>
|
||||
<CodeEditor
|
||||
isExpand
|
||||
noWrapper
|
||||
language={CodeLanguage.json}
|
||||
value={editorContent}
|
||||
placeholder={<div className='whitespace-pre'>{placeholder}</div>}
|
||||
placeholder={<div className="whitespace-pre">{placeholder}</div>}
|
||||
onChange={handleEditorValueChange}
|
||||
/>
|
||||
</div>
|
||||
@ -401,22 +402,22 @@ const ChatVariableModal = ({
|
||||
</div>
|
||||
</div>
|
||||
{/* description */}
|
||||
<div className=''>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.chatVariable.modal.description')}</div>
|
||||
<div className='flex'>
|
||||
<div className="">
|
||||
<div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('chatVariable.modal.description', { ns: 'workflow' })}</div>
|
||||
<div className="flex">
|
||||
<textarea
|
||||
className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
|
||||
className="system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
|
||||
value={description}
|
||||
placeholder={t('workflow.chatVariable.modal.descriptionPlaceholder') || ''}
|
||||
placeholder={t('chatVariable.modal.descriptionPlaceholder', { ns: 'workflow' }) || ''}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-row-reverse rounded-b-2xl p-4 pt-2'>
|
||||
<div className='flex gap-2'>
|
||||
<Button onClick={onClose}>{t('common.operation.cancel')}</Button>
|
||||
<Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
|
||||
<div className="flex flex-row-reverse rounded-b-2xl p-4 pt-2">
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
|
||||
<Button variant="primary" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
'use client'
|
||||
import React, { useState } from 'react'
|
||||
import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
|
||||
import * as React from 'react'
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import cn from '@/utils/classnames'
|
||||
import { cn } from '@/utils/classnames'
|
||||
|
||||
type Props = {
|
||||
inCell?: boolean
|
||||
@ -29,32 +30,40 @@ const VariableTypeSelector = ({
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={() => setOpen(v => !v)}
|
||||
placement='bottom'
|
||||
placement="bottom"
|
||||
>
|
||||
<PortalToFollowElemTrigger className='w-full' onClick={() => setOpen(v => !v)}>
|
||||
<PortalToFollowElemTrigger className="w-full" onClick={() => setOpen(v => !v)}>
|
||||
<div className={cn(
|
||||
'flex w-full cursor-pointer items-center px-2',
|
||||
!inCell && 'radius-md bg-components-input-bg-normal py-1 hover:bg-state-base-hover-alt',
|
||||
inCell && 'py-0.5 hover:bg-state-base-hover',
|
||||
open && !inCell && 'bg-state-base-hover-alt hover:bg-state-base-hover-alt',
|
||||
open && inCell && 'bg-state-base-hover hover:bg-state-base-hover',
|
||||
)}>
|
||||
)}
|
||||
>
|
||||
<div className={cn(
|
||||
'system-sm-regular grow truncate p-1 text-components-input-text-filled',
|
||||
inCell && 'system-xs-regular text-text-secondary',
|
||||
)}>{value}</div>
|
||||
<RiArrowDownSLine className='ml-0.5 h-4 w-4 text-text-quaternary' />
|
||||
)}
|
||||
>
|
||||
{value}
|
||||
</div>
|
||||
<RiArrowDownSLine className="ml-0.5 h-4 w-4 text-text-quaternary" />
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className={cn('z-[11] w-full', popupClassName)}>
|
||||
<div className='radius-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
|
||||
<div className="radius-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
|
||||
{list.map((item: any) => (
|
||||
<div key={item} className='radius-md flex cursor-pointer items-center gap-2 py-[6px] pl-3 pr-2 hover:bg-state-base-hover' onClick={() => {
|
||||
onSelect(item)
|
||||
setOpen(false)
|
||||
}}>
|
||||
<div className='system-md-regular grow truncate text-text-secondary'>{item}</div>
|
||||
{value === item && <RiCheckLine className='h-4 w-4 text-text-accent' />}
|
||||
<div
|
||||
key={item}
|
||||
className="radius-md flex cursor-pointer items-center gap-2 py-[6px] pl-3 pr-2 hover:bg-state-base-hover"
|
||||
onClick={() => {
|
||||
onSelect(item)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<div className="system-md-regular grow truncate text-text-secondary">{item}</div>
|
||||
{value === item && <RiCheckLine className="h-4 w-4 text-text-accent" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -1,28 +1,29 @@
|
||||
import type {
|
||||
ConversationVariable,
|
||||
} from '@/app/components/workflow/types'
|
||||
import { RiBookOpenLine, RiCloseLine } from '@remixicon/react'
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { RiBookOpenLine, RiCloseLine } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
|
||||
import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
|
||||
import { BubbleX, LongArrowLeft, LongArrowRight } from '@/app/components/base/icons/src/vender/line/others'
|
||||
import BlockIcon from '@/app/components/workflow/block-icon'
|
||||
import VariableModalTrigger from '@/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger'
|
||||
import VariableItem from '@/app/components/workflow/panel/chat-variable-panel/components/variable-item'
|
||||
import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
|
||||
import type {
|
||||
ConversationVariable,
|
||||
} from '@/app/components/workflow/types'
|
||||
import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
|
||||
import { BlockEnum } from '@/app/components/workflow/types'
|
||||
import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
|
||||
import { useDocLink } from '@/context/i18n'
|
||||
import cn from '@/utils/classnames'
|
||||
import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
|
||||
import { updateConversationVariables } from '@/service/workflow'
|
||||
import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
|
||||
import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
|
||||
import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
|
||||
import VariableItem from '@/app/components/workflow/panel/chat-variable-panel/components/variable-item'
|
||||
import VariableModalTrigger from '@/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import { BlockEnum } from '@/app/components/workflow/types'
|
||||
import { useDocLink } from '@/context/i18n'
|
||||
import { updateConversationVariables } from '@/service/workflow'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
|
||||
|
||||
const ChatVariablePanel = () => {
|
||||
const { t } = useTranslation()
|
||||
@ -188,64 +189,68 @@ const ChatVariablePanel = () => {
|
||||
'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
|
||||
)}
|
||||
>
|
||||
<div className='system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
|
||||
{t('workflow.chatVariable.panelTitle')}
|
||||
<div className='flex items-center gap-1'>
|
||||
<div className="system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary">
|
||||
{t('chatVariable.panelTitle', { ns: 'workflow' })}
|
||||
<div className="flex items-center gap-1">
|
||||
<ActionButton state={showTip ? ActionButtonState.Active : undefined} onClick={() => setShowTip(!showTip)}>
|
||||
<RiBookOpenLine className='h-4 w-4' />
|
||||
<RiBookOpenLine className="h-4 w-4" />
|
||||
</ActionButton>
|
||||
<div
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center'
|
||||
className="flex h-6 w-6 cursor-pointer items-center justify-center"
|
||||
onClick={() => setShowChatVariablePanel(false)}
|
||||
>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{showTip && (
|
||||
<div className='shrink-0 px-3 pb-2 pt-2.5'>
|
||||
<div className='radius-2xl relative bg-background-section-burn p-3'>
|
||||
<div className='system-2xs-medium-uppercase inline-block rounded-[5px] border border-divider-deep px-[5px] py-[3px] text-text-tertiary'>TIPS</div>
|
||||
<div className='system-sm-regular mb-4 mt-1 text-text-secondary'>
|
||||
{t('workflow.chatVariable.panelDescription')}
|
||||
<a target='_blank' rel='noopener noreferrer' className='text-text-accent'
|
||||
<div className="shrink-0 px-3 pb-2 pt-2.5">
|
||||
<div className="radius-2xl relative bg-background-section-burn p-3">
|
||||
<div className="system-2xs-medium-uppercase inline-block rounded-[5px] border border-divider-deep px-[5px] py-[3px] text-text-tertiary">TIPS</div>
|
||||
<div className="system-sm-regular mb-4 mt-1 text-text-secondary">
|
||||
{t('chatVariable.panelDescription', { ns: 'workflow' })}
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-text-accent"
|
||||
href={docLink('/guides/workflow/variables#conversation-variables', {
|
||||
'zh-Hans': '/guides/workflow/variables#会话变量',
|
||||
'ja-JP': '/guides/workflow/variables#会話変数',
|
||||
})}>
|
||||
{t('workflow.chatVariable.docLink')}
|
||||
})}
|
||||
>
|
||||
{t('chatVariable.docLink', { ns: 'workflow' })}
|
||||
</a>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className='radius-lg flex flex-col border border-workflow-block-border bg-workflow-block-bg p-3 pb-4 shadow-md'>
|
||||
<BubbleX className='mb-1 h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
|
||||
<div className='system-xs-semibold text-text-secondary'>conversation_var</div>
|
||||
<div className='system-2xs-regular text-text-tertiary'>String</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="radius-lg flex flex-col border border-workflow-block-border bg-workflow-block-bg p-3 pb-4 shadow-md">
|
||||
<BubbleX className="mb-1 h-4 w-4 shrink-0 text-util-colors-teal-teal-700" />
|
||||
<div className="system-xs-semibold text-text-secondary">conversation_var</div>
|
||||
<div className="system-2xs-regular text-text-tertiary">String</div>
|
||||
</div>
|
||||
<div className='grow'>
|
||||
<div className='mb-2 flex items-center gap-2 py-1'>
|
||||
<div className='flex h-3 w-16 shrink-0 items-center gap-1 px-1'>
|
||||
<LongArrowLeft className='h-2 grow text-text-quaternary' />
|
||||
<div className='system-2xs-medium shrink-0 text-text-tertiary'>WRITE</div>
|
||||
<div className="grow">
|
||||
<div className="mb-2 flex items-center gap-2 py-1">
|
||||
<div className="flex h-3 w-16 shrink-0 items-center gap-1 px-1">
|
||||
<LongArrowLeft className="h-2 grow text-text-quaternary" />
|
||||
<div className="system-2xs-medium shrink-0 text-text-tertiary">WRITE</div>
|
||||
</div>
|
||||
<BlockIcon className='shrink-0' type={BlockEnum.Assigner} />
|
||||
<div className='system-xs-semibold grow truncate text-text-secondary'>{t('workflow.blocks.assigner')}</div>
|
||||
<BlockIcon className="shrink-0" type={BlockEnum.Assigner} />
|
||||
<div className="system-xs-semibold grow truncate text-text-secondary">{t('blocks.assigner', { ns: 'workflow' })}</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-2 py-1'>
|
||||
<div className='flex h-3 w-16 shrink-0 items-center gap-1 px-1'>
|
||||
<div className='system-2xs-medium shrink-0 text-text-tertiary'>READ</div>
|
||||
<LongArrowRight className='h-2 grow text-text-quaternary' />
|
||||
<div className="flex items-center gap-2 py-1">
|
||||
<div className="flex h-3 w-16 shrink-0 items-center gap-1 px-1">
|
||||
<div className="system-2xs-medium shrink-0 text-text-tertiary">READ</div>
|
||||
<LongArrowRight className="h-2 grow text-text-quaternary" />
|
||||
</div>
|
||||
<BlockIcon className='shrink-0' type={BlockEnum.LLM} />
|
||||
<div className='system-xs-semibold grow truncate text-text-secondary'>{t('workflow.blocks.llm')}</div>
|
||||
<BlockIcon className="shrink-0" type={BlockEnum.LLM} />
|
||||
<div className="system-xs-semibold grow truncate text-text-secondary">{t('blocks.llm', { ns: 'workflow' })}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='absolute right-[38px] top-[-4px] z-10 h-3 w-3 rotate-45 bg-background-section-burn' />
|
||||
<div className="absolute right-[38px] top-[-4px] z-10 h-3 w-3 rotate-45 bg-background-section-burn" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className='shrink-0 px-4 pb-3 pt-2'>
|
||||
<div className="shrink-0 px-4 pb-3 pt-2">
|
||||
<VariableModalTrigger
|
||||
open={showVariableModal}
|
||||
setOpen={setShowVariableModal}
|
||||
@ -255,7 +260,7 @@ const ChatVariablePanel = () => {
|
||||
onClose={() => setCurrentVar(undefined)}
|
||||
/>
|
||||
</div>
|
||||
<div className='grow overflow-y-auto rounded-b-2xl px-4'>
|
||||
<div className="grow overflow-y-auto rounded-b-2xl px-4">
|
||||
{varList.map(chatVar => (
|
||||
<VariableItem
|
||||
key={chatVar.id}
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
import { memo, useCallback, useMemo, useState } from 'react'
|
||||
import { RiCheckLine, RiCheckboxCircleFill, RiCheckboxCircleLine, RiCloseLine, RiFilter3Line } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import type { WorkflowCommentList } from '@/service/workflow-comment'
|
||||
import { useWorkflowComment } from '@/app/components/workflow/hooks/use-workflow-comment'
|
||||
import { UserAvatarList } from '@/app/components/base/user-avatar-list'
|
||||
import cn from '@/utils/classnames'
|
||||
import { ControlMode } from '@/app/components/workflow/types'
|
||||
import { resolveWorkflowComment } from '@/service/workflow-comment'
|
||||
import { RiCheckboxCircleFill, RiCheckboxCircleLine, RiCheckLine, RiCloseLine, RiFilter3Line } from '@remixicon/react'
|
||||
import { useParams } from 'next/navigation'
|
||||
import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import { collaborationManager } from '@/app/components/workflow/collaboration'
|
||||
import { memo, useCallback, useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
import { UserAvatarList } from '@/app/components/base/user-avatar-list'
|
||||
import { collaborationManager } from '@/app/components/workflow/collaboration'
|
||||
import { useWorkflowComment } from '@/app/components/workflow/hooks/use-workflow-comment'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import { ControlMode } from '@/app/components/workflow/types'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
|
||||
import { resolveWorkflowComment } from '@/service/workflow-comment'
|
||||
import { cn } from '@/utils/classnames'
|
||||
|
||||
const CommentsPanel = () => {
|
||||
const { t } = useTranslation()
|
||||
@ -45,8 +45,10 @@ const CommentsPanel = () => {
|
||||
}, [comments, showOnlyMine, showOnlyUnresolved, userProfile?.id])
|
||||
|
||||
const handleResolve = useCallback(async (comment: WorkflowCommentList) => {
|
||||
if (comment.resolved) return
|
||||
if (!appId) return
|
||||
if (comment.resolved)
|
||||
return
|
||||
if (!appId)
|
||||
return
|
||||
try {
|
||||
await resolveWorkflowComment(appId, comment.id)
|
||||
|
||||
@ -64,24 +66,25 @@ const CommentsPanel = () => {
|
||||
|
||||
return (
|
||||
<div className={cn('relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg')}>
|
||||
<div className='flex items-center justify-between p-4 pb-2'>
|
||||
<div className='system-xl-semibold font-semibold leading-6 text-text-primary'>{t('workflow.comments.panelTitle')}</div>
|
||||
<div className='relative flex items-center gap-2'>
|
||||
<div className="flex items-center justify-between p-4 pb-2">
|
||||
<div className="system-xl-semibold font-semibold leading-6 text-text-primary">{t('comments.panelTitle', { ns: 'workflow' })}</div>
|
||||
<div className="relative flex items-center gap-2">
|
||||
<button
|
||||
className={cn(
|
||||
'group flex h-6 w-6 items-center justify-center rounded-md hover:bg-state-accent-active',
|
||||
hasActiveFilter && 'bg-state-accent-active',
|
||||
)}
|
||||
aria-label='Filter comments'
|
||||
aria-label="Filter comments"
|
||||
onClick={() => setShowFilter(v => !v)}
|
||||
>
|
||||
<RiFilter3Line className={cn(
|
||||
'h-4 w-4 text-text-secondary group-hover:text-text-accent',
|
||||
hasActiveFilter && 'text-text-accent',
|
||||
)} />
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
{showFilter && (
|
||||
<div className='absolute right-10 top-9 z-50 min-w-[184px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[10px]'>
|
||||
<div className="absolute right-10 top-9 z-50 min-w-[184px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[10px]">
|
||||
<button
|
||||
className={cn('flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm hover:bg-state-base-hover', !showOnlyMine && 'bg-components-panel-on-panel-item-bg')}
|
||||
onClick={() => {
|
||||
@ -89,8 +92,8 @@ const CommentsPanel = () => {
|
||||
setShowFilter(false)
|
||||
}}
|
||||
>
|
||||
<span className='text-text-secondary'>All</span>
|
||||
{!showOnlyMine && <RiCheckLine className='h-4 w-4 text-primary-600' />}
|
||||
<span className="text-text-secondary">All</span>
|
||||
{!showOnlyMine && <RiCheckLine className="h-4 w-4 text-primary-600" />}
|
||||
</button>
|
||||
<button
|
||||
className={cn('mt-1 flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm hover:bg-state-base-hover', showOnlyMine && 'bg-components-panel-on-panel-item-bg')}
|
||||
@ -99,19 +102,19 @@ const CommentsPanel = () => {
|
||||
setShowFilter(false)
|
||||
}}
|
||||
>
|
||||
<span className='text-text-secondary'>Only your threads</span>
|
||||
{showOnlyMine && <RiCheckLine className='h-4 w-4 text-primary-600' />}
|
||||
<span className="text-text-secondary">Only your threads</span>
|
||||
{showOnlyMine && <RiCheckLine className="h-4 w-4 text-primary-600" />}
|
||||
</button>
|
||||
<Divider type='horizontal' className='my-1' />
|
||||
<Divider type="horizontal" className="my-1" />
|
||||
<div
|
||||
className='flex w-full items-center justify-between rounded-md px-2 py-2'
|
||||
className="flex w-full items-center justify-between rounded-md px-2 py-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
}}
|
||||
>
|
||||
<span className='text-sm text-text-secondary'>Show resolved</span>
|
||||
<span className="text-sm text-text-secondary">Show resolved</span>
|
||||
<Switch
|
||||
size='md'
|
||||
size="md"
|
||||
defaultValue={!showOnlyUnresolved}
|
||||
onChange={(checked) => {
|
||||
setShowOnlyUnresolved(!checked)
|
||||
@ -120,19 +123,19 @@ const CommentsPanel = () => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Divider type='vertical' className='h-3.5' />
|
||||
<Divider type="vertical" className="h-3.5" />
|
||||
<div
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center'
|
||||
className="flex h-6 w-6 cursor-pointer items-center justify-center"
|
||||
onClick={() => {
|
||||
setControlMode(ControlMode.Pointer)
|
||||
setActiveCommentId(null)
|
||||
}}
|
||||
>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='grow overflow-y-auto px-1'>
|
||||
<div className="grow overflow-y-auto px-1">
|
||||
{filteredSorted.map((c) => {
|
||||
const isActive = activeCommentId === c.id
|
||||
return (
|
||||
@ -141,44 +144,48 @@ const CommentsPanel = () => {
|
||||
className={cn('group mb-2 cursor-pointer rounded-xl bg-components-panel-bg p-3 transition-colors hover:bg-components-panel-on-panel-item-bg-hover', isActive && 'bg-components-panel-on-panel-item-bg-hover')}
|
||||
onClick={() => handleSelect(c)}
|
||||
>
|
||||
<div className='min-w-0'>
|
||||
<div className='mb-1 flex items-center justify-between'>
|
||||
<div className="min-w-0">
|
||||
<div className="mb-1 flex items-center justify-between">
|
||||
<UserAvatarList
|
||||
users={c.participants}
|
||||
maxVisible={3}
|
||||
size={24}
|
||||
/>
|
||||
<div className='ml-2 flex items-center'>
|
||||
{c.resolved ? (
|
||||
<RiCheckboxCircleFill className='h-4 w-4 text-text-secondary'/>
|
||||
) : (
|
||||
<RiCheckboxCircleLine
|
||||
className='h-4 w-4 cursor-pointer text-text-tertiary hover:text-text-secondary'
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
handleResolve(c)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className="ml-2 flex items-center">
|
||||
{c.resolved
|
||||
? (
|
||||
<RiCheckboxCircleFill className="h-4 w-4 text-text-secondary" />
|
||||
)
|
||||
: (
|
||||
<RiCheckboxCircleLine
|
||||
className="h-4 w-4 cursor-pointer text-text-tertiary hover:text-text-secondary"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
handleResolve(c)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Header row: creator + time */}
|
||||
<div className='flex items-start'>
|
||||
<div className='flex min-w-0 items-center gap-2'>
|
||||
<div className='system-sm-medium truncate text-text-primary'>{c.created_by_account.name}</div>
|
||||
<div className='system-2xs-regular shrink-0 text-text-tertiary'>
|
||||
<div className="flex items-start">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<div className="system-sm-medium truncate text-text-primary">{c.created_by_account.name}</div>
|
||||
<div className="system-2xs-regular shrink-0 text-text-tertiary">
|
||||
{formatTimeFromNow(c.updated_at * 1000)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className='system-sm-regular mt-1 line-clamp-3 break-words text-text-secondary'>{c.content}</div>
|
||||
<div className="system-sm-regular mt-1 line-clamp-3 break-words text-text-secondary">{c.content}</div>
|
||||
{/* Footer */}
|
||||
{c.reply_count > 0 && (
|
||||
<div className='mt-2 flex items-center justify-between'>
|
||||
<div className='system-2xs-regular text-text-tertiary'>
|
||||
{c.reply_count} {t('workflow.comments.reply')}
|
||||
<div className="mt-2 flex items-center justify-between">
|
||||
<div className="system-2xs-regular text-text-tertiary">
|
||||
{c.reply_count}
|
||||
{' '}
|
||||
{t('comments.reply', { ns: 'workflow' })}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -187,7 +194,7 @@ const CommentsPanel = () => {
|
||||
)
|
||||
})}
|
||||
{!loading && filteredSorted.length === 0 && (
|
||||
<div className='system-sm-regular mt-6 text-center text-text-tertiary'>{t('workflow.comments.noComments')}</div>
|
||||
<div className="system-sm-regular mt-6 text-center text-text-tertiary">{t('comments.noComments', { ns: 'workflow' })}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,28 +1,28 @@
|
||||
import type { StartNodeType } from '../../nodes/start/types'
|
||||
import type { ChatWrapperRefType } from './index'
|
||||
import type { ChatItem, OnSend } from '@/app/components/base/chat/types'
|
||||
import type { FileEntity } from '@/app/components/base/file-uploader/types'
|
||||
import { memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react'
|
||||
import { useNodes } from 'reactflow'
|
||||
import { BlockEnum } from '../../types'
|
||||
import {
|
||||
useStore,
|
||||
useWorkflowStore,
|
||||
} from '../../store'
|
||||
import type { StartNodeType } from '../../nodes/start/types'
|
||||
import Empty from './empty'
|
||||
import UserInput from './user-input'
|
||||
import ConversationVariableModal from './conversation-variable-modal'
|
||||
import { useChat } from './hooks'
|
||||
import type { ChatWrapperRefType } from './index'
|
||||
import { useStore as useAppStore } from '@/app/components/app/store'
|
||||
import Chat from '@/app/components/base/chat/chat'
|
||||
import type { ChatItem, OnSend } from '@/app/components/base/chat/types'
|
||||
import { getLastAnswer, isValidGeneratedAnswer } from '@/app/components/base/chat/utils'
|
||||
import { useFeatures } from '@/app/components/base/features/hooks'
|
||||
import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
|
||||
import { useEventEmitterContextContext } from '@/context/event-emitter'
|
||||
import {
|
||||
fetchSuggestedQuestions,
|
||||
stopChatMessageResponding,
|
||||
} from '@/service/debug'
|
||||
import { useStore as useAppStore } from '@/app/components/app/store'
|
||||
import { getLastAnswer, isValidGeneratedAnswer } from '@/app/components/base/chat/utils'
|
||||
import type { FileEntity } from '@/app/components/base/file-uploader/types'
|
||||
import { useEventEmitterContextContext } from '@/context/event-emitter'
|
||||
import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
|
||||
import {
|
||||
useStore,
|
||||
useWorkflowStore,
|
||||
} from '../../store'
|
||||
import { BlockEnum } from '../../types'
|
||||
import ConversationVariableModal from './conversation-variable-modal'
|
||||
import Empty from './empty'
|
||||
import { useChat } from './hooks'
|
||||
import UserInput from './user-input'
|
||||
|
||||
type ChatWrapperProps = {
|
||||
showConversationVariableModal: boolean
|
||||
@ -39,7 +39,7 @@ const ChatWrapper = (
|
||||
showInputsFieldsPanel,
|
||||
onHide,
|
||||
}: ChatWrapperProps & {
|
||||
ref: React.RefObject<ChatWrapperRefType>;
|
||||
ref: React.RefObject<ChatWrapperRefType>
|
||||
},
|
||||
) => {
|
||||
const nodes = useNodes<StartNodeType>()
|
||||
@ -47,10 +47,8 @@ const ChatWrapper = (
|
||||
const startVariables = startNode?.data.variables
|
||||
const appDetail = useAppStore(s => s.appDetail)
|
||||
const workflowStore = useWorkflowStore()
|
||||
const { inputs, setInputs } = useStore(s => ({
|
||||
inputs: s.inputs,
|
||||
setInputs: s.setInputs,
|
||||
}))
|
||||
const inputs = useStore(s => s.inputs)
|
||||
const setInputs = useStore(s => s.setInputs)
|
||||
|
||||
const initialInputs = useMemo(() => {
|
||||
const initInputs: Record<string, any> = {}
|
||||
@ -120,11 +118,7 @@ const ChatWrapper = (
|
||||
const doRegenerate = useCallback((chatItem: ChatItem, editedQuestion?: { message: string, files?: FileEntity[] }) => {
|
||||
const question = editedQuestion ? chatItem : chatList.find(item => item.id === chatItem.parentMessageId)!
|
||||
const parentAnswer = chatList.find(item => item.id === question.parentMessageId)
|
||||
doSend(editedQuestion ? editedQuestion.message : question.content,
|
||||
editedQuestion ? editedQuestion.files : question.message_files,
|
||||
true,
|
||||
isValidGeneratedAnswer(parentAnswer) ? parentAnswer : null,
|
||||
)
|
||||
doSend(editedQuestion ? editedQuestion.message : question.content, editedQuestion ? editedQuestion.files : question.message_files, true, isValidGeneratedAnswer(parentAnswer) ? parentAnswer : null)
|
||||
}, [chatList, doSend])
|
||||
|
||||
const { eventEmitter } = useEventEmitterContextContext()
|
||||
@ -162,10 +156,10 @@ const ChatWrapper = (
|
||||
} as any}
|
||||
chatList={chatList}
|
||||
isResponding={isResponding}
|
||||
chatContainerClassName='px-3'
|
||||
chatContainerInnerClassName='pt-6 w-full max-w-full mx-auto'
|
||||
chatFooterClassName='px-4 rounded-bl-2xl'
|
||||
chatFooterInnerClassName='pb-0'
|
||||
chatContainerClassName="px-3"
|
||||
chatContainerInnerClassName="pt-6 w-full max-w-full mx-auto"
|
||||
chatFooterClassName="px-4 rounded-bl-2xl"
|
||||
chatFooterInnerClassName="pb-0"
|
||||
showFileUpload
|
||||
showFeatureBar
|
||||
onFeatureBarClick={setShowFeaturesPanel}
|
||||
@ -187,7 +181,7 @@ const ChatWrapper = (
|
||||
noSpacing
|
||||
suggestedQuestions={suggestedQuestions}
|
||||
showPromptLog
|
||||
chatAnswerContainerInner='!pr-2'
|
||||
chatAnswerContainerInner="!pr-2"
|
||||
switchSibling={setTargetMessageId}
|
||||
/>
|
||||
{showConversationVariableModal && (
|
||||
|
||||
@ -1,27 +1,28 @@
|
||||
'use client'
|
||||
import React, { useCallback } from 'react'
|
||||
import { useMount } from 'ahooks'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { capitalize } from 'lodash-es'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import type {
|
||||
ConversationVariable,
|
||||
} from '@/app/components/workflow/types'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
|
||||
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
|
||||
import { useMount } from 'ahooks'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import { noop } from 'es-toolkit/function'
|
||||
import { capitalize } from 'es-toolkit/string'
|
||||
import * as React from 'react'
|
||||
import { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
Copy,
|
||||
CopyCheck,
|
||||
} from '@/app/components/base/icons/src/vender/line/files'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import type {
|
||||
ConversationVariable,
|
||||
} from '@/app/components/workflow/types'
|
||||
import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
|
||||
import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
|
||||
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
|
||||
import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import useTimestamp from '@/hooks/use-timestamp'
|
||||
import { fetchCurrentValueOfConversationVariable } from '@/service/workflow'
|
||||
import cn from '@/utils/classnames'
|
||||
import { noop } from 'lodash-es'
|
||||
import { cn } from '@/utils/classnames'
|
||||
|
||||
export type Props = {
|
||||
conversationID: string
|
||||
@ -80,14 +81,14 @@ const ConversationVariableModal = ({
|
||||
onClose={noop}
|
||||
className={cn('h-[640px] w-[920px] max-w-[920px] p-0')}
|
||||
>
|
||||
<div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onHide}>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
<div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onHide}>
|
||||
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
|
||||
</div>
|
||||
<div className='flex h-full w-full'>
|
||||
<div className="flex h-full w-full">
|
||||
{/* LEFT */}
|
||||
<div className='flex h-full w-[224px] shrink-0 flex-col border-r border-divider-burn bg-background-sidenav-bg'>
|
||||
<div className='system-xl-semibold shrink-0 pb-3 pl-5 pr-4 pt-5 text-text-primary'>{t('workflow.chatVariable.panelTitle')}</div>
|
||||
<div className='grow overflow-y-auto px-3 py-2'>
|
||||
<div className="flex h-full w-[224px] shrink-0 flex-col border-r border-divider-burn bg-background-sidenav-bg">
|
||||
<div className="system-xl-semibold shrink-0 pb-3 pl-5 pr-4 pt-5 text-text-primary">{t('chatVariable.panelTitle', { ns: 'workflow' })}</div>
|
||||
<div className="grow overflow-y-auto px-3 py-2">
|
||||
{varList.map(chatVar => (
|
||||
<div key={chatVar.id} className={cn('radius-md group mb-0.5 flex cursor-pointer items-center p-2 hover:bg-state-base-hover', currentVar.id === chatVar.id && 'bg-state-base-hover')} onClick={() => setCurrentVar(chatVar)}>
|
||||
<BubbleX className={cn('mr-1 h-4 w-4 shrink-0 text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')} />
|
||||
@ -97,40 +98,46 @@ const ConversationVariableModal = ({
|
||||
</div>
|
||||
</div>
|
||||
{/* RIGHT */}
|
||||
<div className='flex h-full w-0 grow flex-col bg-components-panel-bg'>
|
||||
<div className='shrink-0 p-4 pb-2'>
|
||||
<div className='flex items-center gap-1 py-1'>
|
||||
<div className='system-xl-semibold text-text-primary'>{currentVar.name}</div>
|
||||
<div className='system-xs-medium text-text-tertiary'>{capitalize(currentVar.value_type)}</div>
|
||||
<div className="flex h-full w-0 grow flex-col bg-components-panel-bg">
|
||||
<div className="shrink-0 p-4 pb-2">
|
||||
<div className="flex items-center gap-1 py-1">
|
||||
<div className="system-xl-semibold text-text-primary">{currentVar.name}</div>
|
||||
<div className="system-xs-medium text-text-tertiary">{capitalize(currentVar.value_type)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex h-0 grow flex-col p-4 pt-2'>
|
||||
<div className='mb-2 flex shrink-0 items-center gap-2'>
|
||||
<div className='system-xs-medium-uppercase shrink-0 text-text-tertiary'>{t('workflow.chatVariable.storedContent').toLocaleUpperCase()}</div>
|
||||
<div className='h-px grow' style={{
|
||||
background: 'linear-gradient(to right, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255) 100%)',
|
||||
}}></div>
|
||||
<div className="flex h-0 grow flex-col p-4 pt-2">
|
||||
<div className="mb-2 flex shrink-0 items-center gap-2">
|
||||
<div className="system-xs-medium-uppercase shrink-0 text-text-tertiary">{t('chatVariable.storedContent', { ns: 'workflow' }).toLocaleUpperCase()}</div>
|
||||
<div
|
||||
className="h-px grow"
|
||||
style={{
|
||||
background: 'linear-gradient(to right, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255) 100%)',
|
||||
}}
|
||||
>
|
||||
</div>
|
||||
{latestValueTimestampMap[currentVar.id] && (
|
||||
<div className='system-xs-regular shrink-0 text-text-tertiary'>{t('workflow.chatVariable.updatedAt')}{formatTime(latestValueTimestampMap[currentVar.id], t('appLog.dateTimeFormat') as string)}</div>
|
||||
<div className="system-xs-regular shrink-0 text-text-tertiary">
|
||||
{t('chatVariable.updatedAt', { ns: 'workflow' })}
|
||||
{formatTime(latestValueTimestampMap[currentVar.id], t('dateTimeFormat', { ns: 'appLog' }) as string)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='grow overflow-y-auto'>
|
||||
<div className="grow overflow-y-auto">
|
||||
{currentVar.value_type !== ChatVarType.Number && currentVar.value_type !== ChatVarType.String && (
|
||||
<div className='flex h-full flex-col rounded-lg bg-components-input-bg-normal px-2 pb-2'>
|
||||
<div className='flex h-7 shrink-0 items-center justify-between pl-3 pr-2 pt-1'>
|
||||
<div className='system-xs-semibold text-text-secondary'>JSON</div>
|
||||
<div className='flex items-center p-1'>
|
||||
<div className="flex h-full flex-col rounded-lg bg-components-input-bg-normal px-2 pb-2">
|
||||
<div className="flex h-7 shrink-0 items-center justify-between pl-3 pr-2 pt-1">
|
||||
<div className="system-xs-semibold text-text-secondary">JSON</div>
|
||||
<div className="flex items-center p-1">
|
||||
{!isCopied
|
||||
? (
|
||||
<Copy className='h-4 w-4 cursor-pointer text-text-tertiary' onClick={handleCopy} />
|
||||
)
|
||||
<Copy className="h-4 w-4 cursor-pointer text-text-tertiary" onClick={handleCopy} />
|
||||
)
|
||||
: (
|
||||
<CopyCheck className='h-4 w-4 text-text-tertiary' />
|
||||
)
|
||||
}
|
||||
<CopyCheck className="h-4 w-4 text-text-tertiary" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='grow pl-4'>
|
||||
<div className="grow pl-4">
|
||||
<CodeEditor
|
||||
readOnly
|
||||
noWrapper
|
||||
@ -143,7 +150,7 @@ const ConversationVariableModal = ({
|
||||
</div>
|
||||
)}
|
||||
{(currentVar.value_type === ChatVarType.Number || currentVar.value_type === ChatVarType.String) && (
|
||||
<div className='system-md-regular h-full overflow-y-auto overflow-x-hidden rounded-lg bg-components-input-bg-normal px-4 py-3 text-components-input-text-filled'>{latestValueMap[currentVar.id] || ''}</div>
|
||||
<div className="system-md-regular h-full overflow-y-auto overflow-x-hidden rounded-lg bg-components-input-bg-normal px-4 py-3 text-components-input-text-filled">{latestValueMap[currentVar.id] || ''}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,12 +5,12 @@ const Empty = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
|
||||
<div className='mb-2 flex justify-center'>
|
||||
<ChatBotSlim className='h-12 w-12 text-gray-300' />
|
||||
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<div className="mb-2 flex justify-center">
|
||||
<ChatBotSlim className="h-12 w-12 text-gray-300" />
|
||||
</div>
|
||||
<div className='w-[256px] text-center text-[13px] text-gray-400'>
|
||||
{t('workflow.common.previewPlaceholder')}
|
||||
<div className="w-[256px] text-center text-[13px] text-gray-400">
|
||||
{t('common.previewPlaceholder', { ns: 'workflow' })}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
import type { InputForm } from '@/app/components/base/chat/chat/type'
|
||||
import type {
|
||||
ChatItem,
|
||||
ChatItemInTree,
|
||||
Inputs,
|
||||
} from '@/app/components/base/chat/types'
|
||||
import type { FileEntity } from '@/app/components/base/file-uploader/types'
|
||||
import { uniqBy } from 'es-toolkit/compat'
|
||||
import { produce, setAutoFreeze } from 'immer'
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
@ -6,35 +15,26 @@ import {
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { produce, setAutoFreeze } from 'immer'
|
||||
import { uniqBy } from 'lodash-es'
|
||||
import {
|
||||
useSetWorkflowVarsWithValue,
|
||||
useWorkflowRun,
|
||||
} from '../../hooks'
|
||||
import { NodeRunningStatus, WorkflowRunningStatus } from '../../types'
|
||||
import { useWorkflowStore } from '../../store'
|
||||
import { DEFAULT_ITER_TIMES, DEFAULT_LOOP_TIMES } from '../../constants'
|
||||
import type {
|
||||
ChatItem,
|
||||
ChatItemInTree,
|
||||
Inputs,
|
||||
} from '@/app/components/base/chat/types'
|
||||
import type { InputForm } from '@/app/components/base/chat/chat/type'
|
||||
import {
|
||||
getProcessedInputs,
|
||||
processOpeningStatement,
|
||||
} from '@/app/components/base/chat/chat/utils'
|
||||
import { useToastContext } from '@/app/components/base/toast'
|
||||
import { TransferMethod } from '@/types/app'
|
||||
import { getThreadMessages } from '@/app/components/base/chat/utils'
|
||||
import {
|
||||
getProcessedFiles,
|
||||
getProcessedFilesFromResponse,
|
||||
} from '@/app/components/base/file-uploader/utils'
|
||||
import type { FileEntity } from '@/app/components/base/file-uploader/types'
|
||||
import { getThreadMessages } from '@/app/components/base/chat/utils'
|
||||
import { useToastContext } from '@/app/components/base/toast'
|
||||
import { useInvalidAllLastRun } from '@/service/use-workflow'
|
||||
import { TransferMethod } from '@/types/app'
|
||||
import { DEFAULT_ITER_TIMES, DEFAULT_LOOP_TIMES } from '../../constants'
|
||||
import {
|
||||
useSetWorkflowVarsWithValue,
|
||||
useWorkflowRun,
|
||||
} from '../../hooks'
|
||||
import { useHooksStore } from '../../hooks-store'
|
||||
import { useWorkflowStore } from '../../store'
|
||||
import { NodeRunningStatus, WorkflowRunningStatus } from '../../types'
|
||||
|
||||
type GetAbortController = (abortController: AbortController) => void
|
||||
type SendCallback = {
|
||||
@ -202,7 +202,7 @@ export const useChat = (
|
||||
}: SendCallback,
|
||||
) => {
|
||||
if (isRespondingRef.current) {
|
||||
notify({ type: 'info', message: t('appDebug.errorMessage.waitForResponse') })
|
||||
notify({ type: 'info', message: t('errorMessage.waitForResponse', { ns: 'appDebug' }) })
|
||||
return false
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
* Tests for GitHub issue #22745: Panel width persistence bug fix
|
||||
*/
|
||||
|
||||
import '@testing-library/jest-dom'
|
||||
export {}
|
||||
|
||||
type PanelWidthSource = 'user' | 'system'
|
||||
|
||||
@ -11,14 +11,14 @@ type PanelWidthSource = 'user' | 'system'
|
||||
const createMockLocalStorage = () => {
|
||||
const storage: Record<string, string> = {}
|
||||
return {
|
||||
getItem: jest.fn((key: string) => storage[key] || null),
|
||||
setItem: jest.fn((key: string, value: string) => {
|
||||
getItem: vi.fn((key: string) => storage[key] || null),
|
||||
setItem: vi.fn((key: string, value: string) => {
|
||||
storage[key] = value
|
||||
}),
|
||||
removeItem: jest.fn((key: string) => {
|
||||
removeItem: vi.fn((key: string) => {
|
||||
delete storage[key]
|
||||
}),
|
||||
clear: jest.fn(() => {
|
||||
clear: vi.fn(() => {
|
||||
Object.keys(storage).forEach(key => delete storage[key])
|
||||
}),
|
||||
get storage() { return { ...storage } },
|
||||
@ -48,6 +48,7 @@ describe('Debug and Preview Panel Width Persistence', () => {
|
||||
let mockLocalStorage: ReturnType<typeof createMockLocalStorage>
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
mockLocalStorage = createMockLocalStorage()
|
||||
Object.defineProperty(globalThis, 'localStorage', {
|
||||
value: mockLocalStorage,
|
||||
@ -55,10 +56,6 @@ describe('Debug and Preview Panel Width Persistence', () => {
|
||||
})
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks()
|
||||
})
|
||||
|
||||
describe('Preview Panel Width Management', () => {
|
||||
it('should save user resize to localStorage', () => {
|
||||
const manager = createPreviewPanelManager()
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
import type { StartNodeType } from '../../nodes/start/types'
|
||||
|
||||
import { RiCloseLine, RiEqualizer2Line } from '@remixicon/react'
|
||||
import { debounce } from 'es-toolkit/compat'
|
||||
import { noop } from 'es-toolkit/function'
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
@ -5,25 +10,21 @@ import {
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react'
|
||||
|
||||
import { RiCloseLine, RiEqualizer2Line } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useNodes } from 'reactflow'
|
||||
import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
|
||||
import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import { useEdgesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-edges-interactions-without-sync'
|
||||
import { useNodesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-nodes-interactions-without-sync'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import {
|
||||
useWorkflowInteractions,
|
||||
} from '../../hooks'
|
||||
import { useEdgesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-edges-interactions-without-sync'
|
||||
import { useNodesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-nodes-interactions-without-sync'
|
||||
import { BlockEnum } from '../../types'
|
||||
import type { StartNodeType } from '../../nodes/start/types'
|
||||
import { useResizePanel } from '../../nodes/_base/hooks/use-resize-panel'
|
||||
import { BlockEnum } from '../../types'
|
||||
import ChatWrapper from './chat-wrapper'
|
||||
import cn from '@/utils/classnames'
|
||||
import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import { debounce, noop } from 'lodash-es'
|
||||
|
||||
export type ChatWrapperRefType = {
|
||||
handleRestart: () => void
|
||||
@ -81,11 +82,12 @@ const DebugAndPreview = () => {
|
||||
})
|
||||
|
||||
return (
|
||||
<div className='relative h-full'>
|
||||
<div className="relative h-full">
|
||||
<div
|
||||
ref={triggerRef}
|
||||
className='absolute -left-1 top-0 flex h-full w-1 cursor-col-resize resize-x items-center justify-center'>
|
||||
<div className='h-10 w-0.5 rounded-sm bg-state-base-handle hover:h-full hover:bg-state-accent-solid active:h-full active:bg-state-accent-solid'></div>
|
||||
className="absolute -left-1 top-0 flex h-full w-1 cursor-col-resize resize-x items-center justify-center"
|
||||
>
|
||||
<div className="h-10 w-0.5 rounded-sm bg-state-base-handle hover:h-full hover:bg-state-accent-solid active:h-full active:bg-state-accent-solid"></div>
|
||||
</div>
|
||||
<div
|
||||
ref={containerRef}
|
||||
@ -94,38 +96,38 @@ const DebugAndPreview = () => {
|
||||
)}
|
||||
style={{ width: `${panelWidth}px` }}
|
||||
>
|
||||
<div className='system-xl-semibold flex shrink-0 items-center justify-between px-4 pb-2 pt-3 text-text-primary'>
|
||||
<div className='h-8'>{t('workflow.common.debugAndPreview').toLocaleUpperCase()}</div>
|
||||
<div className='flex items-center gap-1'>
|
||||
<div className="system-xl-semibold flex shrink-0 items-center justify-between px-4 pb-2 pt-3 text-text-primary">
|
||||
<div className="h-8">{t('common.debugAndPreview', { ns: 'workflow' }).toLocaleUpperCase()}</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Tooltip
|
||||
popupContent={t('common.operation.refresh')}
|
||||
popupContent={t('operation.refresh', { ns: 'common' })}
|
||||
>
|
||||
<ActionButton onClick={() => handleRestartChat()}>
|
||||
<RefreshCcw01 className='h-4 w-4' />
|
||||
<RefreshCcw01 className="h-4 w-4" />
|
||||
</ActionButton>
|
||||
</Tooltip>
|
||||
{visibleVariables.length > 0 && (
|
||||
<div className='relative'>
|
||||
<div className="relative">
|
||||
<Tooltip
|
||||
popupContent={t('workflow.panel.userInputField')}
|
||||
popupContent={t('panel.userInputField', { ns: 'workflow' })}
|
||||
>
|
||||
<ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => setExpanded(!expanded)}>
|
||||
<RiEqualizer2Line className='h-4 w-4' />
|
||||
<RiEqualizer2Line className="h-4 w-4" />
|
||||
</ActionButton>
|
||||
</Tooltip>
|
||||
{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' />}
|
||||
{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-divider-regular'></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'
|
||||
className="flex h-6 w-6 cursor-pointer items-center justify-center"
|
||||
onClick={handleCancelDebugAndPreviewPanel}
|
||||
>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='grow overflow-y-auto rounded-b-2xl'>
|
||||
<div className="grow overflow-y-auto rounded-b-2xl">
|
||||
<ChatWrapper
|
||||
ref={chatRef}
|
||||
showConversationVariableModal={showConversationVariableModal}
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import type { StartNodeType } from '../../nodes/start/types'
|
||||
import {
|
||||
memo,
|
||||
} from 'react'
|
||||
import { useNodes } from 'reactflow'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import FormItem from '../../nodes/_base/components/before-run-form/form-item'
|
||||
import { BlockEnum } from '../../types'
|
||||
import {
|
||||
useStore,
|
||||
useWorkflowStore,
|
||||
} from '../../store'
|
||||
import type { StartNodeType } from '../../nodes/start/types'
|
||||
import cn from '@/utils/classnames'
|
||||
import { BlockEnum } from '../../types'
|
||||
|
||||
const UserInput = () => {
|
||||
const workflowStore = useWorkflowStore()
|
||||
@ -36,11 +36,11 @@ const UserInput = () => {
|
||||
|
||||
return (
|
||||
<div className={cn('relative z-[1] rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-xs')}>
|
||||
<div className='px-4 pb-4 pt-3'>
|
||||
<div className="px-4 pb-4 pt-3">
|
||||
{visibleVariables.map((variable, index) => (
|
||||
<div
|
||||
key={variable.variable}
|
||||
className='mb-4 last-of-type:mb-0'
|
||||
className="mb-4 last-of-type:mb-0"
|
||||
>
|
||||
<FormItem
|
||||
autoFocus={index === 0}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { memo, useState } from 'react'
|
||||
import { capitalize } from 'lodash-es'
|
||||
import type { EnvironmentVariable } from '@/app/components/workflow/types'
|
||||
import { RiDeleteBinLine, RiEditLine, RiLock2Line } from '@remixicon/react'
|
||||
import { capitalize } from 'es-toolkit/string'
|
||||
import { memo, useState } from 'react'
|
||||
import { Env } from '@/app/components/base/icons/src/vender/line/others'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import type { EnvironmentVariable } from '@/app/components/workflow/types'
|
||||
import cn from '@/utils/classnames'
|
||||
import { cn } from '@/utils/classnames'
|
||||
|
||||
type EnvItemProps = {
|
||||
env: EnvironmentVariable
|
||||
@ -24,37 +24,36 @@ const EnvItem = ({
|
||||
<div className={cn(
|
||||
'radius-md group mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
|
||||
destructive && 'border-state-destructive-border hover:bg-state-destructive-hover',
|
||||
)}>
|
||||
<div className='px-2.5 py-2'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex grow items-center gap-1'>
|
||||
<Env className='h-4 w-4 text-util-colors-violet-violet-600' />
|
||||
<div className='system-sm-medium text-text-primary'>{env.name}</div>
|
||||
<div className='system-xs-medium text-text-tertiary'>{capitalize(env.value_type)}</div>
|
||||
{env.value_type === 'secret' && <RiLock2Line className='h-3 w-3 text-text-tertiary' />}
|
||||
)}
|
||||
>
|
||||
<div className="px-2.5 py-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex grow items-center gap-1">
|
||||
<Env className="h-4 w-4 text-util-colors-violet-violet-600" />
|
||||
<div className="system-sm-medium text-text-primary">{env.name}</div>
|
||||
<div className="system-xs-medium text-text-tertiary">{capitalize(env.value_type)}</div>
|
||||
{env.value_type === 'secret' && <RiLock2Line className="h-3 w-3 text-text-tertiary" />}
|
||||
</div>
|
||||
<div className='flex shrink-0 items-center gap-1 text-text-tertiary'>
|
||||
<div className='radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary'>
|
||||
<RiEditLine className='h-4 w-4' onClick={() => onEdit(env)}/>
|
||||
<div className="flex shrink-0 items-center gap-1 text-text-tertiary">
|
||||
<div className="radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary">
|
||||
<RiEditLine className="h-4 w-4" onClick={() => onEdit(env)} />
|
||||
</div>
|
||||
<div
|
||||
className='radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive'
|
||||
className="radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive"
|
||||
onMouseOver={() => setDestructive(true)}
|
||||
onMouseOut={() => setDestructive(false)}
|
||||
>
|
||||
<RiDeleteBinLine className='h-4 w-4' onClick={() => onDelete(env)} />
|
||||
<RiDeleteBinLine className="h-4 w-4" onClick={() => onDelete(env)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='system-xs-regular truncate text-text-tertiary'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
|
||||
<div className="system-xs-regular truncate text-text-tertiary">{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
|
||||
</div>
|
||||
{env.description && (
|
||||
<>
|
||||
<div className={'h-[0.5px] bg-divider-subtle'} />
|
||||
<div className={cn('rounded-bl-[8px] rounded-br-[8px] bg-background-default-subtle px-2.5 py-2 group-hover:bg-transparent',
|
||||
destructive && 'bg-state-destructive-hover hover:bg-state-destructive-hover',
|
||||
)}>
|
||||
<div className='system-xs-regular truncate text-text-tertiary'>{env.description}</div>
|
||||
<div className="h-[0.5px] bg-divider-subtle" />
|
||||
<div className={cn('rounded-bl-[8px] rounded-br-[8px] bg-background-default-subtle px-2.5 py-2 group-hover:bg-transparent', destructive && 'bg-state-destructive-hover hover:bg-state-destructive-hover')}>
|
||||
<div className="system-xs-regular truncate text-text-tertiary">{env.description}</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -1,23 +1,22 @@
|
||||
import type {
|
||||
EnvironmentVariable,
|
||||
} from '@/app/components/workflow/types'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import VariableTrigger from '@/app/components/workflow/panel/env-panel/variable-trigger'
|
||||
import EnvItem from '@/app/components/workflow/panel/env-panel/env-item'
|
||||
import type {
|
||||
EnvironmentVariable,
|
||||
} from '@/app/components/workflow/types'
|
||||
import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
|
||||
import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
|
||||
import cn from '@/utils/classnames'
|
||||
import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
|
||||
import { useStore as useWorkflowStore } from '@/app/components/workflow/store'
|
||||
import { updateEnvironmentVariables } from '@/service/workflow'
|
||||
import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
|
||||
import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
|
||||
import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
|
||||
import EnvItem from '@/app/components/workflow/panel/env-panel/env-item'
|
||||
import VariableTrigger from '@/app/components/workflow/panel/env-panel/variable-trigger'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import { updateEnvironmentVariables } from '@/service/workflow'
|
||||
import { cn } from '@/utils/classnames'
|
||||
|
||||
const EnvPanel = () => {
|
||||
const { t } = useTranslation()
|
||||
@ -27,7 +26,7 @@ const EnvPanel = () => {
|
||||
const envSecrets = useStore(s => s.envSecrets)
|
||||
const updateEnvList = useStore(s => s.setEnvironmentVariables)
|
||||
const setEnvSecrets = useStore(s => s.setEnvSecrets)
|
||||
const appId = useWorkflowStore(s => s.appId) as string
|
||||
const appId = useStore(s => s.appId) as string
|
||||
|
||||
const [showVariableModal, setShowVariableModal] = useState(false)
|
||||
const [currentVar, setCurrentVar] = useState<EnvironmentVariable>()
|
||||
@ -223,19 +222,19 @@ const EnvPanel = () => {
|
||||
'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
|
||||
)}
|
||||
>
|
||||
<div className='system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
|
||||
{t('workflow.env.envPanelTitle')}
|
||||
<div className='flex items-center'>
|
||||
<div className="system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary">
|
||||
{t('env.envPanelTitle', { ns: 'workflow' })}
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center'
|
||||
className="flex h-6 w-6 cursor-pointer items-center justify-center"
|
||||
onClick={() => setShowEnvPanel(false)}
|
||||
>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='system-sm-regular shrink-0 px-4 py-1 text-text-tertiary'>{t('workflow.env.envDescription')}</div>
|
||||
<div className='shrink-0 px-4 pb-3 pt-2'>
|
||||
<div className="system-sm-regular shrink-0 px-4 py-1 text-text-tertiary">{t('env.envDescription', { ns: 'workflow' })}</div>
|
||||
<div className="shrink-0 px-4 pb-3 pt-2">
|
||||
<VariableTrigger
|
||||
open={showVariableModal}
|
||||
setOpen={setShowVariableModal}
|
||||
@ -244,7 +243,7 @@ const EnvPanel = () => {
|
||||
onClose={() => setCurrentVar(undefined)}
|
||||
/>
|
||||
</div>
|
||||
<div className='grow overflow-y-auto rounded-b-2xl px-4'>
|
||||
<div className="grow overflow-y-auto rounded-b-2xl px-4">
|
||||
{envList.map(env => (
|
||||
<EnvItem
|
||||
key={env.id}
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { v4 as uuid4 } from 'uuid'
|
||||
import type { EnvironmentVariable } from '@/app/components/workflow/types'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import * as React from 'react'
|
||||
import { useEffect } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useContext } from 'use-context-selector'
|
||||
import { v4 as uuid4 } from 'uuid'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Input from '@/app/components/base/input'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import { ToastContext } from '@/app/components/base/toast'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import type { EnvironmentVariable } from '@/app/components/workflow/types'
|
||||
import cn from '@/utils/classnames'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
|
||||
|
||||
export type ModalPropsType = {
|
||||
@ -36,7 +37,7 @@ const VariableModal = ({
|
||||
if (!isValid) {
|
||||
notify({
|
||||
type: 'error',
|
||||
message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: t('workflow.env.modal.name') }),
|
||||
message: t(`varKeyError.${errorMessageKey}`, { ns: 'appDebug', key: t('env.modal.name', { ns: 'workflow' }) }),
|
||||
})
|
||||
return false
|
||||
}
|
||||
@ -86,100 +87,118 @@ const VariableModal = ({
|
||||
<div
|
||||
className={cn('flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl')}
|
||||
>
|
||||
<div className='system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
|
||||
{!env ? t('workflow.env.modal.title') : t('workflow.env.modal.editTitle')}
|
||||
<div className='flex items-center'>
|
||||
<div className="system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary">
|
||||
{!env ? t('env.modal.title', { ns: 'workflow' }) : t('env.modal.editTitle', { ns: 'workflow' })}
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center'
|
||||
className="flex h-6 w-6 cursor-pointer items-center justify-center"
|
||||
onClick={onClose}
|
||||
>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-4 py-2'>
|
||||
<div className="px-4 py-2">
|
||||
{/* type */}
|
||||
<div className='mb-4'>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.type')}</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className={cn(
|
||||
'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
|
||||
type === 'string' && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
|
||||
)} onClick={() => setType('string')}>String</div>
|
||||
<div className={cn(
|
||||
'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
|
||||
type === 'number' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
|
||||
)} onClick={() => {
|
||||
setType('number')
|
||||
if (!(/^\d$/).test(value))
|
||||
setValue('')
|
||||
}}>Number</div>
|
||||
<div className={cn(
|
||||
'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
|
||||
type === 'secret' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
|
||||
)} onClick={() => setType('secret')}>
|
||||
<div className="mb-4">
|
||||
<div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('env.modal.type', { ns: 'workflow' })}</div>
|
||||
<div className="flex gap-2">
|
||||
<div
|
||||
className={cn(
|
||||
'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
|
||||
type === 'string' && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
|
||||
)}
|
||||
onClick={() => setType('string')}
|
||||
>
|
||||
String
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
|
||||
type === 'number' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
|
||||
)}
|
||||
onClick={() => {
|
||||
setType('number')
|
||||
if (!(/^\d$/).test(value))
|
||||
setValue('')
|
||||
}}
|
||||
>
|
||||
Number
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
|
||||
type === 'secret' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
|
||||
)}
|
||||
onClick={() => setType('secret')}
|
||||
>
|
||||
<span>Secret</span>
|
||||
<Tooltip
|
||||
popupContent={
|
||||
<div className='w-[240px]'>
|
||||
{t('workflow.env.modal.secretTip')}
|
||||
popupContent={(
|
||||
<div className="w-[240px]">
|
||||
{t('env.modal.secretTip', { ns: 'workflow' })}
|
||||
</div>
|
||||
}
|
||||
triggerClassName='ml-0.5 w-3.5 h-3.5'
|
||||
)}
|
||||
triggerClassName="ml-0.5 w-3.5 h-3.5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* name */}
|
||||
<div className='mb-4'>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.name')}</div>
|
||||
<div className='flex'>
|
||||
<div className="mb-4">
|
||||
<div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('env.modal.name', { ns: 'workflow' })}</div>
|
||||
<div className="flex">
|
||||
<Input
|
||||
placeholder={t('workflow.env.modal.namePlaceholder') || ''}
|
||||
placeholder={t('env.modal.namePlaceholder', { ns: 'workflow' }) || ''}
|
||||
value={name}
|
||||
onChange={handleVarNameChange}
|
||||
onBlur={e => checkVariableName(e.target.value)}
|
||||
type='text'
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* value */}
|
||||
<div className='mb-4'>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.value')}</div>
|
||||
<div className='flex'>
|
||||
<div className="mb-4">
|
||||
<div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('env.modal.value', { ns: 'workflow' })}</div>
|
||||
<div className="flex">
|
||||
{
|
||||
type !== 'number' ? <textarea
|
||||
className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
|
||||
value={value}
|
||||
placeholder={t('workflow.env.modal.valuePlaceholder') || ''}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
/>
|
||||
: <Input
|
||||
placeholder={t('workflow.env.modal.valuePlaceholder') || ''}
|
||||
value={value}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
type="number"
|
||||
/>
|
||||
type !== 'number'
|
||||
? (
|
||||
<textarea
|
||||
className="system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
|
||||
value={value}
|
||||
placeholder={t('env.modal.valuePlaceholder', { ns: 'workflow' }) || ''}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
/>
|
||||
)
|
||||
: (
|
||||
<Input
|
||||
placeholder={t('env.modal.valuePlaceholder', { ns: 'workflow' }) || ''}
|
||||
value={value}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
type="number"
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{/* description */}
|
||||
<div className=''>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.description')}</div>
|
||||
<div className='flex'>
|
||||
<div className="">
|
||||
<div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('env.modal.description', { ns: 'workflow' })}</div>
|
||||
<div className="flex">
|
||||
<textarea
|
||||
className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
|
||||
className="system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
|
||||
value={description}
|
||||
placeholder={t('workflow.env.modal.descriptionPlaceholder') || ''}
|
||||
placeholder={t('env.modal.descriptionPlaceholder', { ns: 'workflow' }) || ''}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-row-reverse rounded-b-2xl p-4 pt-2'>
|
||||
<div className='flex gap-2'>
|
||||
<Button onClick={onClose}>{t('common.operation.cancel')}</Button>
|
||||
<Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
|
||||
<div className="flex flex-row-reverse rounded-b-2xl p-4 pt-2">
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
|
||||
<Button variant="primary" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
'use client'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { EnvironmentVariable } from '@/app/components/workflow/types'
|
||||
import { RiAddLine } from '@remixicon/react'
|
||||
import * as React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/app/components/base/button'
|
||||
import VariableModal from '@/app/components/workflow/panel/env-panel/variable-modal'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import type { EnvironmentVariable } from '@/app/components/workflow/types'
|
||||
import VariableModal from '@/app/components/workflow/panel/env-panel/variable-modal'
|
||||
|
||||
type Props = {
|
||||
open: boolean
|
||||
@ -36,7 +36,7 @@ const VariableTrigger = ({
|
||||
if (open)
|
||||
onClose()
|
||||
}}
|
||||
placement='left-start'
|
||||
placement="left-start"
|
||||
offset={{
|
||||
mainAxis: 8,
|
||||
alignmentAxis: -104,
|
||||
@ -46,13 +46,14 @@ const VariableTrigger = ({
|
||||
setOpen(v => !v)
|
||||
if (open)
|
||||
onClose()
|
||||
}}>
|
||||
<Button variant='primary'>
|
||||
<RiAddLine className='mr-1 h-4 w-4' />
|
||||
<span className='system-sm-medium'>{t('workflow.env.envPanelButton')}</span>
|
||||
}}
|
||||
>
|
||||
<Button variant="primary">
|
||||
<RiAddLine className="mr-1 h-4 w-4" />
|
||||
<span className="system-sm-medium">{t('env.envPanelButton', { ns: 'workflow' })}</span>
|
||||
</Button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[11]'>
|
||||
<PortalToFollowElemContent className="z-[11]">
|
||||
<VariableModal
|
||||
env={env}
|
||||
onSave={onSave}
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
import type { GlobalVariable } from '../../types'
|
||||
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import {
|
||||
memo,
|
||||
} from 'react'
|
||||
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import type { GlobalVariable } from '../../types'
|
||||
import Item from './item'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
|
||||
import cn from '@/utils/classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useIsChatMode } from '../../hooks'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import { isInWorkflowPage } from '../../constants'
|
||||
import { useIsChatMode } from '../../hooks'
|
||||
import Item from './item'
|
||||
|
||||
const Panel = () => {
|
||||
const { t } = useTranslation()
|
||||
@ -19,42 +19,45 @@ const Panel = () => {
|
||||
const isWorkflowPage = isInWorkflowPage()
|
||||
|
||||
const globalVariableList: GlobalVariable[] = [
|
||||
...(isChatMode ? [{
|
||||
name: 'conversation_id',
|
||||
value_type: 'string' as const,
|
||||
description: t('workflow.globalVar.fieldsDescription.conversationId'),
|
||||
},
|
||||
{
|
||||
name: 'dialog_count',
|
||||
value_type: 'number' as const,
|
||||
description: t('workflow.globalVar.fieldsDescription.dialogCount'),
|
||||
}] : []),
|
||||
...(isChatMode
|
||||
? [{
|
||||
name: 'conversation_id',
|
||||
value_type: 'string' as const,
|
||||
description: t('globalVar.fieldsDescription.conversationId', { ns: 'workflow' }),
|
||||
}, {
|
||||
name: 'dialog_count',
|
||||
value_type: 'number' as const,
|
||||
description: t('globalVar.fieldsDescription.dialogCount', { ns: 'workflow' }),
|
||||
}]
|
||||
: []),
|
||||
{
|
||||
name: 'user_id',
|
||||
value_type: 'string',
|
||||
description: t('workflow.globalVar.fieldsDescription.userId'),
|
||||
description: t('globalVar.fieldsDescription.userId', { ns: 'workflow' }),
|
||||
},
|
||||
{
|
||||
name: 'app_id',
|
||||
value_type: 'string',
|
||||
description: t('workflow.globalVar.fieldsDescription.appId'),
|
||||
description: t('globalVar.fieldsDescription.appId', { ns: 'workflow' }),
|
||||
},
|
||||
{
|
||||
name: 'workflow_id',
|
||||
value_type: 'string',
|
||||
description: t('workflow.globalVar.fieldsDescription.workflowId'),
|
||||
description: t('globalVar.fieldsDescription.workflowId', { ns: 'workflow' }),
|
||||
},
|
||||
{
|
||||
name: 'workflow_run_id',
|
||||
value_type: 'string',
|
||||
description: t('workflow.globalVar.fieldsDescription.workflowRunId'),
|
||||
description: t('globalVar.fieldsDescription.workflowRunId', { ns: 'workflow' }),
|
||||
},
|
||||
// is workflow
|
||||
...((isWorkflowPage && !isChatMode) ? [{
|
||||
name: 'timestamp',
|
||||
value_type: 'number' as const,
|
||||
description: t('workflow.globalVar.fieldsDescription.triggerTimestamp'),
|
||||
}] : []),
|
||||
...((isWorkflowPage && !isChatMode)
|
||||
? [{
|
||||
name: 'timestamp',
|
||||
value_type: 'number' as const,
|
||||
description: t('globalVar.fieldsDescription.triggerTimestamp', { ns: 'workflow' }),
|
||||
}]
|
||||
: []),
|
||||
]
|
||||
|
||||
return (
|
||||
@ -63,20 +66,20 @@ const Panel = () => {
|
||||
'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
|
||||
)}
|
||||
>
|
||||
<div className='system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
|
||||
{t('workflow.globalVar.title')}
|
||||
<div className='flex items-center'>
|
||||
<div className="system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary">
|
||||
{t('globalVar.title', { ns: 'workflow' })}
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center'
|
||||
className="flex h-6 w-6 cursor-pointer items-center justify-center"
|
||||
onClick={() => setShowPanel(false)}
|
||||
>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='system-sm-regular shrink-0 px-4 py-1 text-text-tertiary'>{t('workflow.globalVar.description')}</div>
|
||||
<div className="system-sm-regular shrink-0 px-4 py-1 text-text-tertiary">{t('globalVar.description', { ns: 'workflow' })}</div>
|
||||
|
||||
<div className='mt-4 grow overflow-y-auto rounded-b-2xl px-4'>
|
||||
<div className="mt-4 grow overflow-y-auto rounded-b-2xl px-4">
|
||||
{globalVariableList.map(item => (
|
||||
<Item
|
||||
key={item.name}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { memo } from 'react'
|
||||
import { capitalize } from 'lodash-es'
|
||||
import { GlobalVariable as GlobalVariableIcon } from '@/app/components/base/icons/src/vender/line/others'
|
||||
|
||||
import type { GlobalVariable } from '@/app/components/workflow/types'
|
||||
import cn from '@/utils/classnames'
|
||||
import { capitalize } from 'es-toolkit/string'
|
||||
import { memo } from 'react'
|
||||
|
||||
import { GlobalVariable as GlobalVariableIcon } from '@/app/components/base/icons/src/vender/line/others'
|
||||
import { cn } from '@/utils/classnames'
|
||||
|
||||
type Props = {
|
||||
payload: GlobalVariable
|
||||
@ -15,18 +15,19 @@ const Item = ({
|
||||
return (
|
||||
<div className={cn(
|
||||
'radius-md mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
|
||||
)}>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex grow items-center gap-1'>
|
||||
<GlobalVariableIcon className='h-4 w-4 text-util-colors-orange-orange-600' />
|
||||
<div className='system-sm-medium text-text-primary'>
|
||||
<span className='text-text-tertiary'>sys.</span>
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex grow items-center gap-1">
|
||||
<GlobalVariableIcon className="h-4 w-4 text-util-colors-orange-orange-600" />
|
||||
<div className="system-sm-medium text-text-primary">
|
||||
<span className="text-text-tertiary">sys.</span>
|
||||
{payload.name}
|
||||
</div>
|
||||
<div className='system-xs-medium text-text-tertiary'>{capitalize(payload.value_type)}</div>
|
||||
<div className="system-xs-medium text-text-tertiary">{capitalize(payload.value_type)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='system-xs-regular mt-1.5 truncate text-text-tertiary'>{payload.description}</div>
|
||||
<div className="system-xs-regular mt-1.5 truncate text-text-tertiary">{payload.description}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import type { FC } from 'react'
|
||||
import { memo, useCallback, useEffect, useRef } from 'react'
|
||||
import type { VersionHistoryPanelProps } from '@/app/components/workflow/panel/version-history-panel'
|
||||
import { useShallow } from 'zustand/react/shallow'
|
||||
import dynamic from 'next/dynamic'
|
||||
import { memo, useCallback, useEffect, useRef } from 'react'
|
||||
import { useStore as useReactflow } from 'reactflow'
|
||||
import { useShallow } from 'zustand/react/shallow'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import { Panel as NodePanel } from '../nodes'
|
||||
import { useStore } from '../store'
|
||||
import EnvPanel from './env-panel'
|
||||
import cn from '@/utils/classnames'
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
const VersionHistoryPanel = dynamic(() => import('@/app/components/workflow/panel/version-history-panel'), {
|
||||
ssr: false,
|
||||
@ -44,7 +44,8 @@ const useResizeObserver = (
|
||||
|
||||
useEffect(() => {
|
||||
const element = elementRef.current
|
||||
if (!element) return
|
||||
if (!element)
|
||||
return
|
||||
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import type { StartNodeType } from '../nodes/start/types'
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
@ -5,25 +6,24 @@ import {
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useNodes } from 'reactflow'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { useCheckInputsForms } from '@/app/components/base/chat/chat/check-input-forms-hooks'
|
||||
import {
|
||||
getProcessedInputs,
|
||||
} from '@/app/components/base/chat/chat/utils'
|
||||
import { TransferMethod } from '../../base/text-generation/types'
|
||||
import { useWorkflowRun } from '../hooks'
|
||||
import { useHooksStore } from '../hooks-store'
|
||||
import FormItem from '../nodes/_base/components/before-run-form/form-item'
|
||||
import {
|
||||
useStore,
|
||||
useWorkflowStore,
|
||||
} from '../store'
|
||||
import {
|
||||
BlockEnum,
|
||||
InputVarType,
|
||||
WorkflowRunningStatus,
|
||||
} from '../types'
|
||||
import {
|
||||
useStore,
|
||||
useWorkflowStore,
|
||||
} from '../store'
|
||||
import { useWorkflowRun } from '../hooks'
|
||||
import type { StartNodeType } from '../nodes/start/types'
|
||||
import { TransferMethod } from '../../base/text-generation/types'
|
||||
import Button from '@/app/components/base/button'
|
||||
import {
|
||||
getProcessedInputs,
|
||||
} from '@/app/components/base/chat/chat/utils'
|
||||
import { useCheckInputsForms } from '@/app/components/base/chat/chat/check-input-forms-hooks'
|
||||
import { useHooksStore } from '../hooks-store'
|
||||
|
||||
type Props = {
|
||||
onRun: () => void
|
||||
@ -32,10 +32,7 @@ type Props = {
|
||||
const InputsPanel = ({ onRun }: Props) => {
|
||||
const { t } = useTranslation()
|
||||
const workflowStore = useWorkflowStore()
|
||||
const { inputs } = useStore(s => ({
|
||||
inputs: s.inputs,
|
||||
setInputs: s.setInputs,
|
||||
}))
|
||||
const inputs = useStore(s => s.inputs)
|
||||
const fileSettings = useHooksStore(s => s.configsMap?.fileSettings)
|
||||
const nodes = useNodes<StartNodeType>()
|
||||
const files = useStore(s => s.files)
|
||||
@ -108,16 +105,16 @@ const InputsPanel = ({ onRun }: Props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='px-4 pb-2 pt-3'>
|
||||
<div className="px-4 pb-2 pt-3">
|
||||
{
|
||||
variables.map((variable, index) => (
|
||||
<div
|
||||
key={variable.variable}
|
||||
className='mb-2 last-of-type:mb-0'
|
||||
className="mb-2 last-of-type:mb-0"
|
||||
>
|
||||
<FormItem
|
||||
autoFocus={index === 0}
|
||||
className='!block'
|
||||
className="!block"
|
||||
payload={variable}
|
||||
value={initialInputs[variable.variable]}
|
||||
onChange={v => handleValueChange(variable.variable, v)}
|
||||
@ -126,14 +123,14 @@ const InputsPanel = ({ onRun }: Props) => {
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className='flex items-center justify-between px-4 py-2'>
|
||||
<div className="flex items-center justify-between px-4 py-2">
|
||||
<Button
|
||||
variant='primary'
|
||||
variant="primary"
|
||||
disabled={!canRun || workflowRunningData?.result?.status === WorkflowRunningStatus.Running}
|
||||
className='w-full'
|
||||
className="w-full"
|
||||
onClick={doRun}
|
||||
>
|
||||
{t('workflow.singleRun.startRun')}
|
||||
{t('singleRun.startRun', { ns: 'workflow' })}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { memo, useCallback } from 'react'
|
||||
import type { WorkflowRunDetailResponse } from '@/models/log'
|
||||
import Run from '../run'
|
||||
import { useStore } from '../store'
|
||||
import { memo, useCallback } from 'react'
|
||||
import { useWorkflowUpdate } from '../hooks'
|
||||
import { useHooksStore } from '../hooks-store'
|
||||
import Run from '../run'
|
||||
import { useStore } from '../store'
|
||||
import { formatWorkflowRunIdentifier } from '../utils'
|
||||
|
||||
const Record = () => {
|
||||
@ -21,8 +21,8 @@ const Record = () => {
|
||||
}, [handleUpdateWorkflowCanvas])
|
||||
|
||||
return (
|
||||
<div className='flex h-full w-[400px] flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'>
|
||||
<div className='system-xl-semibold flex items-center justify-between p-4 pb-0 text-text-primary'>
|
||||
<div className="flex h-full w-[400px] flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl">
|
||||
<div className="system-xl-semibold flex items-center justify-between p-4 pb-0 text-text-primary">
|
||||
{`Test Run${formatWorkflowRunIdentifier(historyWorkflowData?.finished_at)}`}
|
||||
</div>
|
||||
<Run
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
import React, { type FC, useCallback } from 'react'
|
||||
import type { FC } from 'react'
|
||||
import { RiMoreFill } from '@remixicon/react'
|
||||
import { VersionHistoryContextMenuOptions } from '../../../types'
|
||||
import MenuItem from './menu-item'
|
||||
import useContextMenu from './use-context-menu'
|
||||
import * as React from 'react'
|
||||
import { useCallback } from 'react'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import { VersionHistoryContextMenuOptions } from '../../../types'
|
||||
import MenuItem from './menu-item'
|
||||
import useContextMenu from './use-context-menu'
|
||||
|
||||
export type ContextMenuProps = {
|
||||
isShowDelete: boolean
|
||||
@ -33,7 +35,7 @@ const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
placement={'bottom-end'}
|
||||
placement="bottom-end"
|
||||
offset={{
|
||||
mainAxis: 4,
|
||||
crossAxis: 0,
|
||||
@ -42,13 +44,13 @@ const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
<PortalToFollowElemTrigger>
|
||||
<Button size='small' className='px-1' onClick={handleClickTrigger}>
|
||||
<RiMoreFill className='h-4 w-4' />
|
||||
<Button size="small" className="px-1" onClick={handleClickTrigger}>
|
||||
<RiMoreFill className="h-4 w-4" />
|
||||
</Button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-10'>
|
||||
<div className='flex w-[184px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
|
||||
<div className='flex flex-col p-1'>
|
||||
<PortalToFollowElemContent className="z-10">
|
||||
<div className="flex w-[184px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
|
||||
<div className="flex flex-col p-1">
|
||||
{
|
||||
options.map((option) => {
|
||||
return (
|
||||
@ -64,8 +66,8 @@ const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {
|
||||
{
|
||||
isShowDelete && (
|
||||
<>
|
||||
<Divider type='horizontal' className='my-0 h-px bg-divider-subtle' />
|
||||
<div className='p-1'>
|
||||
<Divider type="horizontal" className="my-0 h-px bg-divider-subtle" />
|
||||
<div className="p-1">
|
||||
<MenuItem
|
||||
item={deleteOperation}
|
||||
isDestructive
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { type FC } from 'react'
|
||||
import type { FC } from 'react'
|
||||
import type { VersionHistoryContextMenuOptions } from '../../../types'
|
||||
import cn from '@/utils/classnames'
|
||||
import * as React from 'react'
|
||||
import { cn } from '@/utils/classnames'
|
||||
|
||||
type MenuItemProps = {
|
||||
item: {
|
||||
@ -29,7 +30,8 @@ const MenuItem: FC<MenuItemProps> = ({
|
||||
<div className={cn(
|
||||
'system-md-regular flex-1 text-text-primary',
|
||||
isDestructive && 'hover:text-text-destructive',
|
||||
)}>
|
||||
)}
|
||||
>
|
||||
{item.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import type { ContextMenuProps } from './index'
|
||||
import { useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { VersionHistoryContextMenuOptions } from '../../../types'
|
||||
import type { ContextMenuProps } from './index'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import { VersionHistoryContextMenuOptions } from '../../../types'
|
||||
|
||||
const useContextMenu = (props: ContextMenuProps) => {
|
||||
const {
|
||||
@ -13,32 +13,34 @@ const useContextMenu = (props: ContextMenuProps) => {
|
||||
|
||||
const deleteOperation = {
|
||||
key: VersionHistoryContextMenuOptions.delete,
|
||||
name: t('common.operation.delete'),
|
||||
name: t('operation.delete', { ns: 'common' }),
|
||||
}
|
||||
|
||||
const options = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
key: VersionHistoryContextMenuOptions.restore,
|
||||
name: t('workflow.common.restore'),
|
||||
name: t('common.restore', { ns: 'workflow' }),
|
||||
},
|
||||
isNamedVersion
|
||||
? {
|
||||
key: VersionHistoryContextMenuOptions.edit,
|
||||
name: t('workflow.versionHistory.editVersionInfo'),
|
||||
}
|
||||
key: VersionHistoryContextMenuOptions.edit,
|
||||
name: t('versionHistory.editVersionInfo', { ns: 'workflow' }),
|
||||
}
|
||||
: {
|
||||
key: VersionHistoryContextMenuOptions.edit,
|
||||
name: t('workflow.versionHistory.nameThisVersion'),
|
||||
},
|
||||
key: VersionHistoryContextMenuOptions.edit,
|
||||
name: t('versionHistory.nameThisVersion', { ns: 'workflow' }),
|
||||
},
|
||||
// todo: pipeline support export specific version DSL
|
||||
...(!pipelineId ? [{
|
||||
key: VersionHistoryContextMenuOptions.exportDSL,
|
||||
name: t('app.export'),
|
||||
}] : []),
|
||||
...(!pipelineId
|
||||
? [{
|
||||
key: VersionHistoryContextMenuOptions.exportDSL,
|
||||
name: t('export', { ns: 'app' }),
|
||||
}]
|
||||
: []),
|
||||
{
|
||||
key: VersionHistoryContextMenuOptions.copyId,
|
||||
name: t('workflow.versionHistory.copyId'),
|
||||
name: t('versionHistory.copyId', { ns: 'workflow' }),
|
||||
},
|
||||
]
|
||||
}, [isNamedVersion, t])
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import React, { type FC } from 'react'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import type { FC } from 'react'
|
||||
import type { VersionHistory } from '@/types/workflow'
|
||||
import * as React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
|
||||
type DeleteConfirmModalProps = {
|
||||
isOpen: boolean
|
||||
@ -19,24 +20,26 @@ const DeleteConfirmModal: FC<DeleteConfirmModalProps> = ({
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
|
||||
<div className='flex flex-col gap-y-2 p-6 pb-4 '>
|
||||
<div className='title-2xl-semi-bold text-text-primary'>
|
||||
{`${t('common.operation.delete')} ${versionInfo.marked_name || t('workflow.versionHistory.defaultName')}`}
|
||||
return (
|
||||
<Modal className="p-0" isShow={isOpen} onClose={onClose}>
|
||||
<div className="flex flex-col gap-y-2 p-6 pb-4 ">
|
||||
<div className="title-2xl-semi-bold text-text-primary">
|
||||
{`${t('operation.delete', { ns: 'common' })} ${versionInfo.marked_name || t('versionHistory.defaultName', { ns: 'workflow' })}`}
|
||||
</div>
|
||||
<p className="system-md-regular text-text-secondary">
|
||||
{t('versionHistory.deletionTip', { ns: 'workflow' })}
|
||||
</p>
|
||||
</div>
|
||||
<p className='system-md-regular text-text-secondary'>
|
||||
{t('workflow.versionHistory.deletionTip')}
|
||||
</p>
|
||||
</div>
|
||||
<div className='flex items-center justify-end gap-x-2 p-6'>
|
||||
<Button onClick={onClose}>
|
||||
{t('common.operation.cancel')}
|
||||
</Button>
|
||||
<Button variant='warning' onClick={onDelete.bind(null, versionInfo.id)}>
|
||||
{t('common.operation.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<div className="flex items-center justify-end gap-x-2 p-6">
|
||||
<Button onClick={onClose}>
|
||||
{t('operation.cancel', { ns: 'common' })}
|
||||
</Button>
|
||||
<Button variant="warning" onClick={onDelete.bind(null, versionInfo.id)}>
|
||||
{t('operation.delete', { ns: 'common' })}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default DeleteConfirmModal
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import Button from '@/app/components/base/button'
|
||||
import type { FC } from 'react'
|
||||
import { RiHistoryLine } from '@remixicon/react'
|
||||
import React, { type FC } from 'react'
|
||||
import * as React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/app/components/base/button'
|
||||
|
||||
type EmptyProps = {
|
||||
onResetFilter: () => void
|
||||
@ -12,19 +13,21 @@ const Empty: FC<EmptyProps> = ({
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return <div className='flex h-5/6 w-full flex-col justify-center gap-y-2'>
|
||||
<div className='flex justify-center'>
|
||||
<RiHistoryLine className='h-10 w-10 text-text-empty-state-icon' />
|
||||
return (
|
||||
<div className="flex h-5/6 w-full flex-col justify-center gap-y-2">
|
||||
<div className="flex justify-center">
|
||||
<RiHistoryLine className="h-10 w-10 text-text-empty-state-icon" />
|
||||
</div>
|
||||
<div className="system-xs-regular flex justify-center text-text-tertiary">
|
||||
{t('versionHistory.filter.empty', { ns: 'workflow' })}
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<Button size="small" onClick={onResetFilter}>
|
||||
{t('versionHistory.filter.reset', { ns: 'workflow' })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='system-xs-regular flex justify-center text-text-tertiary'>
|
||||
{t('workflow.versionHistory.filter.empty')}
|
||||
</div>
|
||||
<div className='flex justify-center'>
|
||||
<Button size='small' onClick={onResetFilter}>
|
||||
{t('workflow.versionHistory.filter.reset')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Empty)
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { RiCheckLine } from '@remixicon/react'
|
||||
import React, { type FC } from 'react'
|
||||
import type { FC } from 'react'
|
||||
import type { WorkflowVersionFilterOptions } from '../../../types'
|
||||
import { RiCheckLine } from '@remixicon/react'
|
||||
import * as React from 'react'
|
||||
|
||||
type FilterItemProps = {
|
||||
item: {
|
||||
@ -18,13 +19,13 @@ const FilterItem: FC<FilterItemProps> = ({
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className='flex cursor-pointer items-center justify-between gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
|
||||
className="flex cursor-pointer items-center justify-between gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover"
|
||||
onClick={() => {
|
||||
onClick(item.key)
|
||||
}}
|
||||
>
|
||||
<div className='system-md-regular flex-1 text-text-primary'>{item.name}</div>
|
||||
{isSelected && <RiCheckLine className='h-4 w-4 shrink-0 text-text-accent' />}
|
||||
<div className="system-md-regular flex-1 text-text-primary">{item.name}</div>
|
||||
{isSelected && <RiCheckLine className="h-4 w-4 shrink-0 text-text-accent" />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React, { type FC } from 'react'
|
||||
import type { FC } from 'react'
|
||||
import * as React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
|
||||
@ -14,16 +15,16 @@ const FilterSwitch: FC<FilterSwitchProps> = ({
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='flex items-center p-1'>
|
||||
<div className='flex w-full items-center gap-x-1 px-2 py-1.5'>
|
||||
<div className='system-md-regular flex-1 px-1 text-text-secondary'>
|
||||
{t('workflow.versionHistory.filter.onlyShowNamedVersions')}
|
||||
<div className="flex items-center p-1">
|
||||
<div className="flex w-full items-center gap-x-1 px-2 py-1.5">
|
||||
<div className="system-md-regular flex-1 px-1 text-text-secondary">
|
||||
{t('versionHistory.filter.onlyShowNamedVersions', { ns: 'workflow' })}
|
||||
</div>
|
||||
<Switch
|
||||
defaultValue={enabled}
|
||||
onChange={v => handleSwitch(v)}
|
||||
size='md'
|
||||
className='shrink-0'
|
||||
size="md"
|
||||
className="shrink-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
import React, { type FC, useCallback, useState } from 'react'
|
||||
import type { FC } from 'react'
|
||||
import { RiFilter3Line } from '@remixicon/react'
|
||||
import { WorkflowVersionFilterOptions } from '../../../types'
|
||||
import { useFilterOptions } from './use-filter'
|
||||
import FilterItem from './filter-item'
|
||||
import FilterSwitch from './filter-switch'
|
||||
import * as React from 'react'
|
||||
import { useCallback, useState } from 'react'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import cn from '@/utils/classnames'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import { WorkflowVersionFilterOptions } from '../../../types'
|
||||
import FilterItem from './filter-item'
|
||||
import FilterSwitch from './filter-switch'
|
||||
import { useFilterOptions } from './use-filter'
|
||||
|
||||
type FilterProps = {
|
||||
filterValue: WorkflowVersionFilterOptions
|
||||
@ -36,7 +38,7 @@ const Filter: FC<FilterProps> = ({
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
placement={'bottom-end'}
|
||||
placement="bottom-end"
|
||||
offset={{
|
||||
mainAxis: 4,
|
||||
crossAxis: 55,
|
||||
@ -54,9 +56,9 @@ const Filter: FC<FilterProps> = ({
|
||||
<RiFilter3Line className={cn('h-4 w-4', isFiltering ? 'text-text-accent' : ' text-text-tertiary')} />
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[12]'>
|
||||
<div className='flex w-[248px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
|
||||
<div className='flex flex-col p-1'>
|
||||
<PortalToFollowElemContent className="z-[12]">
|
||||
<div className="flex w-[248px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
|
||||
<div className="flex flex-col p-1">
|
||||
{
|
||||
options.map((option) => {
|
||||
return (
|
||||
@ -70,7 +72,7 @@ const Filter: FC<FilterProps> = ({
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<Divider type='horizontal' className='my-0 h-px bg-divider-subtle' />
|
||||
<Divider type="horizontal" className="my-0 h-px bg-divider-subtle" />
|
||||
<FilterSwitch enabled={isOnlyShowNamedVersions} handleSwitch={handleSwitch} />
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
|
||||
@ -7,11 +7,11 @@ export const useFilterOptions = () => {
|
||||
return [
|
||||
{
|
||||
key: WorkflowVersionFilterOptions.all,
|
||||
name: t('workflow.versionHistory.filter.all'),
|
||||
name: t('versionHistory.filter.all', { ns: 'workflow' }),
|
||||
},
|
||||
{
|
||||
key: WorkflowVersionFilterOptions.onlyYours,
|
||||
name: t('workflow.versionHistory.filter.onlyYours'),
|
||||
name: t('versionHistory.filter.onlyYours', { ns: 'workflow' }),
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
@ -0,0 +1,156 @@
|
||||
import { fireEvent, render, screen } from '@testing-library/react'
|
||||
import { WorkflowVersion } from '../../types'
|
||||
|
||||
const mockHandleRestoreFromPublishedWorkflow = vi.fn()
|
||||
const mockHandleLoadBackupDraft = vi.fn()
|
||||
const mockSetCurrentVersion = vi.fn()
|
||||
|
||||
vi.mock('@/context/app-context', () => ({
|
||||
useSelector: () => ({ id: 'test-user-id' }),
|
||||
}))
|
||||
|
||||
vi.mock('@/service/use-workflow', () => ({
|
||||
useDeleteWorkflow: () => ({ mutateAsync: vi.fn() }),
|
||||
useInvalidAllLastRun: () => vi.fn(),
|
||||
useResetWorkflowVersionHistory: () => vi.fn(),
|
||||
useUpdateWorkflow: () => ({ mutateAsync: vi.fn() }),
|
||||
useWorkflowVersionHistory: () => ({
|
||||
data: {
|
||||
pages: [
|
||||
{
|
||||
items: [
|
||||
{
|
||||
id: 'draft-version-id',
|
||||
version: WorkflowVersion.Draft,
|
||||
graph: { nodes: [], edges: [], viewport: null },
|
||||
features: {
|
||||
opening_statement: '',
|
||||
suggested_questions: [],
|
||||
suggested_questions_after_answer: { enabled: false },
|
||||
text_to_speech: { enabled: false },
|
||||
speech_to_text: { enabled: false },
|
||||
retriever_resource: { enabled: false },
|
||||
sensitive_word_avoidance: { enabled: false },
|
||||
file_upload: { image: { enabled: false } },
|
||||
},
|
||||
created_at: Date.now() / 1000,
|
||||
created_by: { id: 'user-1', name: 'User 1' },
|
||||
environment_variables: [],
|
||||
marked_name: '',
|
||||
marked_comment: '',
|
||||
},
|
||||
{
|
||||
id: 'published-version-id',
|
||||
version: '2024-01-01T00:00:00Z',
|
||||
graph: { nodes: [], edges: [], viewport: null },
|
||||
features: {
|
||||
opening_statement: '',
|
||||
suggested_questions: [],
|
||||
suggested_questions_after_answer: { enabled: false },
|
||||
text_to_speech: { enabled: false },
|
||||
speech_to_text: { enabled: false },
|
||||
retriever_resource: { enabled: false },
|
||||
sensitive_word_avoidance: { enabled: false },
|
||||
file_upload: { image: { enabled: false } },
|
||||
},
|
||||
created_at: Date.now() / 1000,
|
||||
created_by: { id: 'user-1', name: 'User 1' },
|
||||
environment_variables: [],
|
||||
marked_name: 'v1.0',
|
||||
marked_comment: 'First release',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
fetchNextPage: vi.fn(),
|
||||
hasNextPage: false,
|
||||
isFetching: false,
|
||||
}),
|
||||
}))
|
||||
|
||||
vi.mock('../../hooks', () => ({
|
||||
useDSL: () => ({ handleExportDSL: vi.fn() }),
|
||||
useNodesSyncDraft: () => ({ handleSyncWorkflowDraft: vi.fn() }),
|
||||
useWorkflowRun: () => ({
|
||||
handleRestoreFromPublishedWorkflow: mockHandleRestoreFromPublishedWorkflow,
|
||||
handleLoadBackupDraft: mockHandleLoadBackupDraft,
|
||||
}),
|
||||
}))
|
||||
|
||||
vi.mock('../../hooks-store', () => ({
|
||||
useHooksStore: () => ({
|
||||
flowId: 'test-flow-id',
|
||||
flowType: 'workflow',
|
||||
}),
|
||||
}))
|
||||
|
||||
vi.mock('../../store', () => ({
|
||||
useStore: (selector: (state: any) => any) => {
|
||||
const state = {
|
||||
setShowWorkflowVersionHistoryPanel: vi.fn(),
|
||||
currentVersion: null,
|
||||
setCurrentVersion: mockSetCurrentVersion,
|
||||
}
|
||||
return selector(state)
|
||||
},
|
||||
useWorkflowStore: () => ({
|
||||
getState: () => ({
|
||||
deleteAllInspectVars: vi.fn(),
|
||||
}),
|
||||
setState: vi.fn(),
|
||||
}),
|
||||
}))
|
||||
|
||||
vi.mock('./delete-confirm-modal', () => ({
|
||||
default: () => null,
|
||||
}))
|
||||
|
||||
vi.mock('./restore-confirm-modal', () => ({
|
||||
default: () => null,
|
||||
}))
|
||||
|
||||
vi.mock('@/app/components/app/app-publisher/version-info-modal', () => ({
|
||||
default: () => null,
|
||||
}))
|
||||
|
||||
describe('VersionHistoryPanel', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
describe('Version Click Behavior', () => {
|
||||
it('should call handleLoadBackupDraft when draft version is selected on mount', async () => {
|
||||
const { VersionHistoryPanel } = await import('./index')
|
||||
|
||||
render(
|
||||
<VersionHistoryPanel
|
||||
latestVersionId="published-version-id"
|
||||
/>,
|
||||
)
|
||||
|
||||
// Draft version auto-clicks on mount via useEffect in VersionHistoryItem
|
||||
expect(mockHandleLoadBackupDraft).toHaveBeenCalled()
|
||||
expect(mockHandleRestoreFromPublishedWorkflow).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should call handleRestoreFromPublishedWorkflow when clicking published version', async () => {
|
||||
const { VersionHistoryPanel } = await import('./index')
|
||||
|
||||
render(
|
||||
<VersionHistoryPanel
|
||||
latestVersionId="published-version-id"
|
||||
/>,
|
||||
)
|
||||
|
||||
// Clear mocks after initial render (draft version auto-clicks on mount)
|
||||
vi.clearAllMocks()
|
||||
|
||||
const publishedItem = screen.getByText('v1.0')
|
||||
fireEvent.click(publishedItem)
|
||||
|
||||
expect(mockHandleRestoreFromPublishedWorkflow).toHaveBeenCalled()
|
||||
expect(mockHandleLoadBackupDraft).not.toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -1,24 +1,25 @@
|
||||
'use client'
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { VersionHistory } from '@/types/workflow'
|
||||
import { RiArrowDownDoubleLine, RiCloseLine, RiLoader2Line } from '@remixicon/react'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import { useDSL, useNodesSyncDraft, useWorkflowRun } from '../../hooks'
|
||||
import { useStore, useWorkflowStore } from '../../store'
|
||||
import { VersionHistoryContextMenuOptions, WorkflowVersionFilterOptions } from '../../types'
|
||||
import VersionHistoryItem from './version-history-item'
|
||||
import Filter from './filter'
|
||||
import type { VersionHistory } from '@/types/workflow'
|
||||
import { useDeleteWorkflow, useInvalidAllLastRun, useResetWorkflowVersionHistory, useUpdateWorkflow, useWorkflowVersionHistory } from '@/service/use-workflow'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import Loading from './loading'
|
||||
import Empty from './empty'
|
||||
import { useSelector as useAppContextSelector } from '@/context/app-context'
|
||||
import RestoreConfirmModal from './restore-confirm-modal'
|
||||
import DeleteConfirmModal from './delete-confirm-modal'
|
||||
import * as React from 'react'
|
||||
import { useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import VersionInfoModal from '@/app/components/app/app-publisher/version-info-modal'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import { useSelector as useAppContextSelector } from '@/context/app-context'
|
||||
import { useDeleteWorkflow, useInvalidAllLastRun, useResetWorkflowVersionHistory, useUpdateWorkflow, useWorkflowVersionHistory } from '@/service/use-workflow'
|
||||
import { useDSL, useNodesSyncDraft, useWorkflowRun } from '../../hooks'
|
||||
import { useHooksStore } from '../../hooks-store'
|
||||
import { useStore, useWorkflowStore } from '../../store'
|
||||
import { VersionHistoryContextMenuOptions, WorkflowVersion, WorkflowVersionFilterOptions } from '../../types'
|
||||
import DeleteConfirmModal from './delete-confirm-modal'
|
||||
import Empty from './empty'
|
||||
import Filter from './filter'
|
||||
import Loading from './loading'
|
||||
import RestoreConfirmModal from './restore-confirm-modal'
|
||||
import VersionHistoryItem from './version-history-item'
|
||||
|
||||
const HISTORY_PER_PAGE = 10
|
||||
const INITIAL_PAGE = 1
|
||||
@ -72,9 +73,12 @@ export const VersionHistoryPanel = ({
|
||||
const handleVersionClick = useCallback((item: VersionHistory) => {
|
||||
if (item.id !== currentVersion?.id) {
|
||||
setCurrentVersion(item)
|
||||
handleRestoreFromPublishedWorkflow(item)
|
||||
if (item.version === WorkflowVersion.Draft)
|
||||
handleLoadBackupDraft()
|
||||
else
|
||||
handleRestoreFromPublishedWorkflow(item)
|
||||
}
|
||||
}, [currentVersion?.id, setCurrentVersion, handleRestoreFromPublishedWorkflow])
|
||||
}, [currentVersion?.id, setCurrentVersion, handleLoadBackupDraft, handleRestoreFromPublishedWorkflow])
|
||||
|
||||
const handleNextPage = () => {
|
||||
if (hasNextPage)
|
||||
@ -116,7 +120,7 @@ export const VersionHistoryPanel = ({
|
||||
copy(item.id)
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('workflow.versionHistory.action.copyIdSuccess'),
|
||||
message: t('versionHistory.action.copyIdSuccess', { ns: 'workflow' }),
|
||||
})
|
||||
break
|
||||
case VersionHistoryContextMenuOptions.exportDSL:
|
||||
@ -150,7 +154,7 @@ export const VersionHistoryPanel = ({
|
||||
onSuccess: () => {
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('workflow.versionHistory.action.restoreSuccess'),
|
||||
message: t('versionHistory.action.restoreSuccess', { ns: 'workflow' }),
|
||||
})
|
||||
deleteAllInspectVars()
|
||||
invalidAllLastRun()
|
||||
@ -158,7 +162,7 @@ export const VersionHistoryPanel = ({
|
||||
onError: () => {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('workflow.versionHistory.action.restoreFailure'),
|
||||
message: t('versionHistory.action.restoreFailure', { ns: 'workflow' }),
|
||||
})
|
||||
},
|
||||
onSettled: () => {
|
||||
@ -175,7 +179,7 @@ export const VersionHistoryPanel = ({
|
||||
setDeleteConfirmOpen(false)
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('workflow.versionHistory.action.deleteSuccess'),
|
||||
message: t('versionHistory.action.deleteSuccess', { ns: 'workflow' }),
|
||||
})
|
||||
resetWorkflowVersionHistory()
|
||||
deleteAllInspectVars()
|
||||
@ -184,7 +188,7 @@ export const VersionHistoryPanel = ({
|
||||
onError: () => {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('workflow.versionHistory.action.deleteFailure'),
|
||||
message: t('versionHistory.action.deleteFailure', { ns: 'workflow' }),
|
||||
})
|
||||
},
|
||||
onSettled: () => {
|
||||
@ -205,14 +209,14 @@ export const VersionHistoryPanel = ({
|
||||
setEditModalOpen(false)
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('workflow.versionHistory.action.updateSuccess'),
|
||||
message: t('versionHistory.action.updateSuccess', { ns: 'workflow' }),
|
||||
})
|
||||
resetWorkflowVersionHistory()
|
||||
},
|
||||
onError: () => {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('workflow.versionHistory.action.updateFailure'),
|
||||
message: t('versionHistory.action.updateFailure', { ns: 'workflow' }),
|
||||
})
|
||||
},
|
||||
onSettled: () => {
|
||||
@ -222,87 +226,95 @@ export const VersionHistoryPanel = ({
|
||||
}, [t, updateWorkflow, resetWorkflowVersionHistory, updateVersionUrl])
|
||||
|
||||
return (
|
||||
<div className='flex h-full w-[268px] flex-col rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5'>
|
||||
<div className='flex items-center gap-x-2 px-4 pt-3'>
|
||||
<div className='system-xl-semibold flex-1 py-1 text-text-primary'>{t('workflow.versionHistory.title')}</div>
|
||||
<div className="flex h-full w-[268px] flex-col rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5">
|
||||
<div className="flex items-center gap-x-2 px-4 pt-3">
|
||||
<div className="system-xl-semibold flex-1 py-1 text-text-primary">{t('versionHistory.title', { ns: 'workflow' })}</div>
|
||||
<Filter
|
||||
filterValue={filterValue}
|
||||
isOnlyShowNamedVersions={isOnlyShowNamedVersions}
|
||||
onClickFilterItem={handleClickFilterItem}
|
||||
handleSwitch={handleSwitch}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-1 h-3.5' />
|
||||
<Divider type="vertical" className="mx-1 h-3.5" />
|
||||
<div
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center p-0.5'
|
||||
className="flex h-6 w-6 cursor-pointer items-center justify-center p-0.5"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-0 flex-1 flex-col">
|
||||
<div className="flex-1 overflow-y-auto px-3 py-2">
|
||||
{(isFetching && !versionHistory?.pages?.length)
|
||||
? (
|
||||
<Loading />
|
||||
)
|
||||
<Loading />
|
||||
)
|
||||
: (
|
||||
<>
|
||||
{versionHistory?.pages?.map((page, pageNumber) => (
|
||||
page.items?.map((item, idx) => {
|
||||
const isLast = pageNumber === versionHistory.pages.length - 1 && idx === page.items.length - 1
|
||||
return <VersionHistoryItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
currentVersion={currentVersion}
|
||||
latestVersionId={latestVersionId || ''}
|
||||
onClick={handleVersionClick}
|
||||
handleClickMenuItem={handleClickMenuItem.bind(null, item)}
|
||||
isLast={isLast}
|
||||
/>
|
||||
})
|
||||
))}
|
||||
{!isFetching && (!versionHistory?.pages?.length || !versionHistory.pages[0].items.length) && (
|
||||
<Empty onResetFilter={handleResetFilter} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<>
|
||||
{versionHistory?.pages?.map((page, pageNumber) => (
|
||||
page.items?.map((item, idx) => {
|
||||
const isLast = pageNumber === versionHistory.pages.length - 1 && idx === page.items.length - 1
|
||||
return (
|
||||
<VersionHistoryItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
currentVersion={currentVersion}
|
||||
latestVersionId={latestVersionId || ''}
|
||||
onClick={handleVersionClick}
|
||||
handleClickMenuItem={handleClickMenuItem.bind(null, item)}
|
||||
isLast={isLast}
|
||||
/>
|
||||
)
|
||||
})
|
||||
))}
|
||||
{!isFetching && (!versionHistory?.pages?.length || !versionHistory.pages[0].items.length) && (
|
||||
<Empty onResetFilter={handleResetFilter} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{hasNextPage && (
|
||||
<div className='p-2'>
|
||||
<div className="p-2">
|
||||
<div
|
||||
className='flex cursor-pointer items-center gap-x-1'
|
||||
className="flex cursor-pointer items-center gap-x-1"
|
||||
onClick={handleNextPage}
|
||||
>
|
||||
<div className='item-center flex justify-center p-0.5'>
|
||||
<div className="item-center flex justify-center p-0.5">
|
||||
{isFetching
|
||||
? <RiLoader2Line className='h-3.5 w-3.5 animate-spin text-text-accent' />
|
||||
: <RiArrowDownDoubleLine className='h-3.5 w-3.5 text-text-accent' />}
|
||||
? <RiLoader2Line className="h-3.5 w-3.5 animate-spin text-text-accent" />
|
||||
: <RiArrowDownDoubleLine className="h-3.5 w-3.5 text-text-accent" />}
|
||||
</div>
|
||||
<div className='system-xs-medium-uppercase py-[1px] text-text-accent'>
|
||||
{t('workflow.common.loadMore')}
|
||||
<div className="system-xs-medium-uppercase py-[1px] text-text-accent">
|
||||
{t('common.loadMore', { ns: 'workflow' })}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{restoreConfirmOpen && (<RestoreConfirmModal
|
||||
isOpen={restoreConfirmOpen}
|
||||
versionInfo={operatedItem!}
|
||||
onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.restore)}
|
||||
onRestore={handleRestore}
|
||||
/>)}
|
||||
{deleteConfirmOpen && (<DeleteConfirmModal
|
||||
isOpen={deleteConfirmOpen}
|
||||
versionInfo={operatedItem!}
|
||||
onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.delete)}
|
||||
onDelete={handleDelete}
|
||||
/>)}
|
||||
{editModalOpen && (<VersionInfoModal
|
||||
isOpen={editModalOpen}
|
||||
versionInfo={operatedItem}
|
||||
onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.edit)}
|
||||
onPublish={handleUpdateWorkflow}
|
||||
/>)}
|
||||
{restoreConfirmOpen && (
|
||||
<RestoreConfirmModal
|
||||
isOpen={restoreConfirmOpen}
|
||||
versionInfo={operatedItem!}
|
||||
onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.restore)}
|
||||
onRestore={handleRestore}
|
||||
/>
|
||||
)}
|
||||
{deleteConfirmOpen && (
|
||||
<DeleteConfirmModal
|
||||
isOpen={deleteConfirmOpen}
|
||||
versionInfo={operatedItem!}
|
||||
onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.delete)}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
)}
|
||||
{editModalOpen && (
|
||||
<VersionInfoModal
|
||||
isOpen={editModalOpen}
|
||||
versionInfo={operatedItem}
|
||||
onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.edit)}
|
||||
onPublish={handleUpdateWorkflow}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -10,10 +10,12 @@ const itemConfig = Array.from({ length: 8 }).map((_, index) => {
|
||||
})
|
||||
|
||||
const Loading = () => {
|
||||
return <div className='relative w-full overflow-y-hidden'>
|
||||
<div className='absolute left-0 top-0 z-10 h-full w-full bg-dataset-chunk-list-mask-bg' />
|
||||
{itemConfig.map((config, index) => <Item key={index} {...config} />)}
|
||||
</div>
|
||||
return (
|
||||
<div className="relative w-full overflow-y-hidden">
|
||||
<div className="absolute left-0 top-0 z-10 h-full w-full bg-dataset-chunk-list-mask-bg" />
|
||||
{itemConfig.map((config, index) => <Item key={index} {...config} />)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Loading
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { type FC } from 'react'
|
||||
import cn from '@/utils/classnames'
|
||||
import type { FC } from 'react'
|
||||
import * as React from 'react'
|
||||
import { cn } from '@/utils/classnames'
|
||||
|
||||
type ItemProps = {
|
||||
titleWidth: string
|
||||
@ -15,18 +16,18 @@ const Item: FC<ItemProps> = ({
|
||||
isLast,
|
||||
}) => {
|
||||
return (
|
||||
<div className='relative flex gap-x-1 p-2' >
|
||||
{!isLast && <div className='absolute left-4 top-6 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle' />}
|
||||
<div className=' flex h-5 w-[18px] shrink-0 items-center justify-center'>
|
||||
<div className='h-2 w-2 rounded-lg border-[2px] border-text-quaternary' />
|
||||
<div className="relative flex gap-x-1 p-2">
|
||||
{!isLast && <div className="absolute left-4 top-6 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle" />}
|
||||
<div className=" flex h-5 w-[18px] shrink-0 items-center justify-center">
|
||||
<div className="h-2 w-2 rounded-lg border-[2px] border-text-quaternary" />
|
||||
</div>
|
||||
<div className='flex grow flex-col gap-y-0.5'>
|
||||
<div className='flex h-3.5 items-center'>
|
||||
<div className="flex grow flex-col gap-y-0.5">
|
||||
<div className="flex h-3.5 items-center">
|
||||
<div className={cn('h-2 w-full rounded-sm bg-text-quaternary opacity-20', titleWidth)} />
|
||||
</div>
|
||||
{
|
||||
!isFirst && (
|
||||
<div className='flex h-3 items-center'>
|
||||
<div className="flex h-3 items-center">
|
||||
<div className={cn('h-1.5 w-full rounded-sm bg-text-quaternary opacity-20', releaseNotesWidth)} />
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import React, { type FC } from 'react'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import type { FC } from 'react'
|
||||
import type { VersionHistory } from '@/types/workflow'
|
||||
import * as React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
|
||||
type RestoreConfirmModalProps = {
|
||||
isOpen: boolean
|
||||
@ -19,24 +20,26 @@ const RestoreConfirmModal: FC<RestoreConfirmModalProps> = ({
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
|
||||
<div className='flex flex-col gap-y-2 p-6 pb-4 '>
|
||||
<div className='title-2xl-semi-bold text-text-primary'>
|
||||
{`${t('workflow.common.restore')} ${versionInfo.marked_name || t('workflow.versionHistory.defaultName')}`}
|
||||
return (
|
||||
<Modal className="p-0" isShow={isOpen} onClose={onClose}>
|
||||
<div className="flex flex-col gap-y-2 p-6 pb-4 ">
|
||||
<div className="title-2xl-semi-bold text-text-primary">
|
||||
{`${t('common.restore', { ns: 'workflow' })} ${versionInfo.marked_name || t('versionHistory.defaultName', { ns: 'workflow' })}`}
|
||||
</div>
|
||||
<p className="system-md-regular text-text-secondary">
|
||||
{t('versionHistory.restorationTip', { ns: 'workflow' })}
|
||||
</p>
|
||||
</div>
|
||||
<p className='system-md-regular text-text-secondary'>
|
||||
{t('workflow.versionHistory.restorationTip')}
|
||||
</p>
|
||||
</div>
|
||||
<div className='flex items-center justify-end gap-x-2 p-6'>
|
||||
<Button onClick={onClose}>
|
||||
{t('common.operation.cancel')}
|
||||
</Button>
|
||||
<Button variant='primary' onClick={onRestore.bind(null, versionInfo)}>
|
||||
{t('workflow.common.restore')}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<div className="flex items-center justify-end gap-x-2 p-6">
|
||||
<Button onClick={onClose}>
|
||||
{t('operation.cancel', { ns: 'common' })}
|
||||
</Button>
|
||||
<Button variant="primary" onClick={onRestore.bind(null, versionInfo)}>
|
||||
{t('common.restore', { ns: 'workflow' })}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default RestoreConfirmModal
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import dayjs from 'dayjs'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import ContextMenu from './context-menu'
|
||||
import cn from '@/utils/classnames'
|
||||
import type { VersionHistoryContextMenuOptions } from '../../types'
|
||||
import type { VersionHistory } from '@/types/workflow'
|
||||
import { type VersionHistoryContextMenuOptions, WorkflowVersion } from '../../types'
|
||||
import dayjs from 'dayjs'
|
||||
import * as React from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import { WorkflowVersion } from '../../types'
|
||||
import ContextMenu from './context-menu'
|
||||
|
||||
type VersionHistoryItemProps = {
|
||||
item: VersionHistory
|
||||
@ -80,38 +82,41 @@ const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({
|
||||
setOpen(true)
|
||||
}}
|
||||
>
|
||||
{!isLast && <div className='absolute left-4 top-6 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle' />}
|
||||
<div className=' flex h-5 w-[18px] shrink-0 items-center justify-center'>
|
||||
{!isLast && <div className="absolute left-4 top-6 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle" />}
|
||||
<div className=" flex h-5 w-[18px] shrink-0 items-center justify-center">
|
||||
<div className={cn(
|
||||
'h-2 w-2 rounded-lg border-[2px]',
|
||||
isSelected ? 'border-text-accent' : 'border-text-quaternary',
|
||||
)}/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex grow flex-col gap-y-0.5 overflow-hidden'>
|
||||
<div className='mr-6 flex h-5 items-center gap-x-1'>
|
||||
<div className="flex grow flex-col gap-y-0.5 overflow-hidden">
|
||||
<div className="mr-6 flex h-5 items-center gap-x-1">
|
||||
<div className={cn(
|
||||
'system-sm-semibold truncate py-[1px]',
|
||||
isSelected ? 'text-text-accent' : 'text-text-secondary',
|
||||
)}>
|
||||
{isDraft ? t('workflow.versionHistory.currentDraft') : item.marked_name || t('workflow.versionHistory.defaultName')}
|
||||
)}
|
||||
>
|
||||
{isDraft ? t('versionHistory.currentDraft', { ns: 'workflow' }) : item.marked_name || t('versionHistory.defaultName', { ns: 'workflow' })}
|
||||
</div>
|
||||
{isLatest && (
|
||||
<div className='system-2xs-medium-uppercase flex h-5 shrink-0 items-center rounded-md border border-text-accent-secondary
|
||||
bg-components-badge-bg-dimm px-[5px] text-text-accent-secondary'>
|
||||
{t('workflow.versionHistory.latest')}
|
||||
<div className="system-2xs-medium-uppercase flex h-5 shrink-0 items-center rounded-md border border-text-accent-secondary
|
||||
bg-components-badge-bg-dimm px-[5px] text-text-accent-secondary"
|
||||
>
|
||||
{t('versionHistory.latest', { ns: 'workflow' })}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{
|
||||
!isDraft && (
|
||||
<div className='system-xs-regular break-words text-text-secondary'>
|
||||
<div className="system-xs-regular break-words text-text-secondary">
|
||||
{item.marked_comment || ''}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
!isDraft && (
|
||||
<div className='system-xs-regular truncate text-text-tertiary'>
|
||||
<div className="system-xs-regular truncate text-text-tertiary">
|
||||
{`${formatTime(item.created_at)} · ${item.created_by.name}`}
|
||||
</div>
|
||||
)
|
||||
@ -119,7 +124,7 @@ const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({
|
||||
</div>
|
||||
{/* Context Menu */}
|
||||
{!isDraft && isHovering && (
|
||||
<div className='absolute right-1 top-1'>
|
||||
<div className="absolute right-1 top-1">
|
||||
<ContextMenu
|
||||
isShowDelete={!isLatest}
|
||||
isNamedVersion={!!item.marked_name}
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
import {
|
||||
RiClipboardLine,
|
||||
RiCloseLine,
|
||||
} from '@remixicon/react'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react'
|
||||
import {
|
||||
RiClipboardLine,
|
||||
RiCloseLine,
|
||||
} from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import ResultText from '../run/result-text'
|
||||
import ResultPanel from '../run/result-panel'
|
||||
import TracingPanel from '../run/tracing-panel'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Loading from '@/app/components/base/loading'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import Toast from '../../base/toast'
|
||||
import {
|
||||
useWorkflowInteractions,
|
||||
} from '../hooks'
|
||||
import ResultPanel from '../run/result-panel'
|
||||
import ResultText from '../run/result-text'
|
||||
import TracingPanel from '../run/tracing-panel'
|
||||
import { useStore } from '../store'
|
||||
import {
|
||||
WorkflowRunningStatus,
|
||||
} from '../types'
|
||||
import { formatWorkflowRunIdentifier } from '../utils'
|
||||
import Toast from '../../base/toast'
|
||||
import InputsPanel from './inputs-panel'
|
||||
import cn from '@/utils/classnames'
|
||||
import Loading from '@/app/components/base/loading'
|
||||
import Button from '@/app/components/base/button'
|
||||
|
||||
const WorkflowPreview = () => {
|
||||
const { t } = useTranslation()
|
||||
@ -95,23 +95,22 @@ const WorkflowPreview = () => {
|
||||
}, [resize, stopResizing])
|
||||
|
||||
return (
|
||||
<div className={
|
||||
'relative flex h-full flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'
|
||||
}
|
||||
style={{ width: `${panelWidth}px` }}
|
||||
<div
|
||||
className="relative flex h-full flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl"
|
||||
style={{ width: `${panelWidth}px` }}
|
||||
>
|
||||
<div
|
||||
className="absolute bottom-0 left-[3px] top-1/2 z-50 h-6 w-[3px] cursor-col-resize rounded bg-gray-300"
|
||||
onMouseDown={startResizing}
|
||||
/>
|
||||
<div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary'>
|
||||
<div className="flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary">
|
||||
{`Test Run${formatWorkflowRunIdentifier(workflowRunningData?.result.finished_at)}`}
|
||||
<div className='cursor-pointer p-1' onClick={() => handleCancelDebugAndPreviewPanel()}>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
<div className="cursor-pointer p-1" onClick={() => handleCancelDebugAndPreviewPanel()}>
|
||||
<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-divider-subtle px-4'>
|
||||
<div className="relative flex grow flex-col">
|
||||
<div className="flex shrink-0 items-center border-b-[0.5px] border-divider-subtle px-4">
|
||||
{showInputsPanel && (
|
||||
<div
|
||||
className={cn(
|
||||
@ -119,7 +118,9 @@ const WorkflowPreview = () => {
|
||||
currentTab === 'INPUT' && '!border-[rgb(21,94,239)] text-text-secondary',
|
||||
)}
|
||||
onClick={() => switchTab('INPUT')}
|
||||
>{t('runLog.input')}</div>
|
||||
>
|
||||
{t('input', { ns: 'runLog' })}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
@ -132,7 +133,9 @@ const WorkflowPreview = () => {
|
||||
return
|
||||
switchTab('RESULT')
|
||||
}}
|
||||
>{t('runLog.result')}</div>
|
||||
>
|
||||
{t('result', { ns: 'runLog' })}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
|
||||
@ -144,7 +147,9 @@ const WorkflowPreview = () => {
|
||||
return
|
||||
switchTab('DETAIL')
|
||||
}}
|
||||
>{t('runLog.detail')}</div>
|
||||
>
|
||||
{t('detail', { ns: 'runLog' })}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
|
||||
@ -156,12 +161,15 @@ const WorkflowPreview = () => {
|
||||
return
|
||||
switchTab('TRACING')
|
||||
}}
|
||||
>{t('runLog.tracing')}</div>
|
||||
>
|
||||
{t('tracing', { ns: 'runLog' })}
|
||||
</div>
|
||||
</div>
|
||||
<div className={cn(
|
||||
'h-0 grow overflow-y-auto rounded-b-2xl bg-components-panel-bg',
|
||||
(currentTab === 'RESULT' || currentTab === 'TRACING') && '!bg-background-section-burn',
|
||||
)}>
|
||||
)}
|
||||
>
|
||||
{currentTab === 'INPUT' && showInputsPanel && (
|
||||
<InputsPanel onRun={() => switchTab('RESULT')} />
|
||||
)}
|
||||
@ -183,10 +191,11 @@ const WorkflowPreview = () => {
|
||||
copy(content)
|
||||
else
|
||||
copy(JSON.stringify(content))
|
||||
Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
|
||||
}}>
|
||||
<RiClipboardLine className='h-3.5 w-3.5' />
|
||||
<div>{t('common.operation.copy')}</div>
|
||||
Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
|
||||
}}
|
||||
>
|
||||
<RiClipboardLine className="h-3.5 w-3.5" />
|
||||
<div>{t('operation.copy', { ns: 'common' })}</div>
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
@ -211,18 +220,18 @@ const WorkflowPreview = () => {
|
||||
/>
|
||||
)}
|
||||
{currentTab === 'DETAIL' && !workflowRunningData?.result && (
|
||||
<div className='flex h-full items-center justify-center bg-components-panel-bg'>
|
||||
<div className="flex h-full items-center justify-center bg-components-panel-bg">
|
||||
<Loading />
|
||||
</div>
|
||||
)}
|
||||
{currentTab === 'TRACING' && (
|
||||
<TracingPanel
|
||||
className='bg-background-section-burn'
|
||||
className="bg-background-section-burn"
|
||||
list={workflowRunningData?.tracing || []}
|
||||
/>
|
||||
)}
|
||||
{currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
|
||||
<div className='flex h-full items-center justify-center !bg-background-section-burn'>
|
||||
<div className="flex h-full items-center justify-center !bg-background-section-burn">
|
||||
<Loading />
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user