Initial commit
This commit is contained in:
饺子大魔王
@@ -0,0 +1,140 @@
|
||||
import type { FC } from 'react'
|
||||
import { memo } from 'react'
|
||||
import { BlockEnum } from './types'
|
||||
import {
|
||||
Agent,
|
||||
Answer,
|
||||
Assigner,
|
||||
Code,
|
||||
DocsExtractor,
|
||||
End,
|
||||
Home,
|
||||
Http,
|
||||
IfElse,
|
||||
Iteration,
|
||||
KnowledgeRetrieval,
|
||||
ListFilter,
|
||||
Llm,
|
||||
ParameterExtractor,
|
||||
QuestionClassifier,
|
||||
TemplatingTransform,
|
||||
VariableX,
|
||||
} from '@/app/components/base/icons/src/vender/workflow'
|
||||
import AppIcon from '@/app/components/base/app-icon'
|
||||
|
||||
type BlockIconProps = {
|
||||
type: BlockEnum
|
||||
size?: string
|
||||
className?: string
|
||||
toolIcon?: string | { content: string; background: string }
|
||||
}
|
||||
const ICON_CONTAINER_CLASSNAME_SIZE_MAP: Record<string, string> = {
|
||||
xs: 'w-4 h-4 rounded-[5px] shadow-xs',
|
||||
sm: 'w-5 h-5 rounded-md shadow-xs',
|
||||
md: 'w-6 h-6 rounded-lg shadow-md',
|
||||
}
|
||||
const getIcon = (type: BlockEnum, className: string) => {
|
||||
return {
|
||||
[BlockEnum.Start]: <Home className={className} />,
|
||||
[BlockEnum.LLM]: <Llm className={className} />,
|
||||
[BlockEnum.Code]: <Code className={className} />,
|
||||
[BlockEnum.End]: <End className={className} />,
|
||||
[BlockEnum.IfElse]: <IfElse className={className} />,
|
||||
[BlockEnum.HttpRequest]: <Http className={className} />,
|
||||
[BlockEnum.Answer]: <Answer className={className} />,
|
||||
[BlockEnum.KnowledgeRetrieval]: <KnowledgeRetrieval className={className} />,
|
||||
[BlockEnum.QuestionClassifier]: <QuestionClassifier className={className} />,
|
||||
[BlockEnum.TemplateTransform]: <TemplatingTransform className={className} />,
|
||||
[BlockEnum.VariableAssigner]: <VariableX className={className} />,
|
||||
[BlockEnum.VariableAggregator]: <VariableX className={className} />,
|
||||
[BlockEnum.Assigner]: <Assigner className={className} />,
|
||||
[BlockEnum.Tool]: <VariableX className={className} />,
|
||||
[BlockEnum.IterationStart]: <VariableX className={className} />,
|
||||
[BlockEnum.Iteration]: <Iteration className={className} />,
|
||||
[BlockEnum.ParameterExtractor]: <ParameterExtractor className={className} />,
|
||||
[BlockEnum.DocExtractor]: <DocsExtractor className={className} />,
|
||||
[BlockEnum.ListFilter]: <ListFilter className={className} />,
|
||||
[BlockEnum.Agent]: <Agent className={className} />,
|
||||
}[type]
|
||||
}
|
||||
const ICON_CONTAINER_BG_COLOR_MAP: Record<string, string> = {
|
||||
[BlockEnum.Start]: 'bg-util-colors-blue-brand-blue-brand-500',
|
||||
[BlockEnum.LLM]: 'bg-util-colors-indigo-indigo-500',
|
||||
[BlockEnum.Code]: 'bg-util-colors-blue-blue-500',
|
||||
[BlockEnum.End]: 'bg-util-colors-warning-warning-500',
|
||||
[BlockEnum.IfElse]: 'bg-util-colors-cyan-cyan-500',
|
||||
[BlockEnum.Iteration]: 'bg-util-colors-cyan-cyan-500',
|
||||
[BlockEnum.HttpRequest]: 'bg-util-colors-violet-violet-500',
|
||||
[BlockEnum.Answer]: 'bg-util-colors-warning-warning-500',
|
||||
[BlockEnum.KnowledgeRetrieval]: 'bg-util-colors-green-green-500',
|
||||
[BlockEnum.QuestionClassifier]: 'bg-util-colors-green-green-500',
|
||||
[BlockEnum.TemplateTransform]: 'bg-util-colors-blue-blue-500',
|
||||
[BlockEnum.VariableAssigner]: 'bg-util-colors-blue-blue-500',
|
||||
[BlockEnum.VariableAggregator]: 'bg-util-colors-blue-blue-500',
|
||||
[BlockEnum.Assigner]: 'bg-util-colors-blue-blue-500',
|
||||
[BlockEnum.ParameterExtractor]: 'bg-util-colors-blue-blue-500',
|
||||
[BlockEnum.DocExtractor]: 'bg-util-colors-green-green-500',
|
||||
[BlockEnum.ListFilter]: 'bg-util-colors-cyan-cyan-500',
|
||||
[BlockEnum.Agent]: 'bg-util-colors-indigo-indigo-500',
|
||||
}
|
||||
const BlockIcon: FC<BlockIconProps> = ({
|
||||
type,
|
||||
size = 'sm',
|
||||
className,
|
||||
toolIcon,
|
||||
}) => {
|
||||
return (
|
||||
<div className={`
|
||||
flex items-center justify-center border-[0.5px] border-white/2 text-white
|
||||
${ICON_CONTAINER_CLASSNAME_SIZE_MAP[size]}
|
||||
${ICON_CONTAINER_BG_COLOR_MAP[type]}
|
||||
${toolIcon && '!shadow-none'}
|
||||
${className}
|
||||
`}
|
||||
>
|
||||
{
|
||||
type !== BlockEnum.Tool && (
|
||||
getIcon(type, size === 'xs' ? 'w-3 h-3' : 'w-3.5 h-3.5')
|
||||
)
|
||||
}
|
||||
{
|
||||
type === BlockEnum.Tool && toolIcon && (
|
||||
<>
|
||||
{
|
||||
typeof toolIcon === 'string'
|
||||
? (
|
||||
<div
|
||||
className='shrink-0 w-full h-full bg-cover bg-center rounded-md'
|
||||
style={{
|
||||
backgroundImage: `url(${toolIcon})`,
|
||||
}}
|
||||
></div>
|
||||
)
|
||||
: (
|
||||
<AppIcon
|
||||
className='shrink-0 !w-full !h-full'
|
||||
size='tiny'
|
||||
icon={toolIcon?.content}
|
||||
background={toolIcon?.background}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const VarBlockIcon: FC<BlockIconProps> = ({
|
||||
type,
|
||||
className,
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
{getIcon(type, `w-3 h-3 ${className}`)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(BlockIcon)
|
||||
@@ -0,0 +1,42 @@
|
||||
export enum TabsEnum {
|
||||
Blocks = 'blocks',
|
||||
Tools = 'tools',
|
||||
}
|
||||
|
||||
export enum ToolTypeEnum {
|
||||
All = 'all',
|
||||
BuiltIn = 'built-in',
|
||||
Custom = 'custom',
|
||||
Workflow = 'workflow',
|
||||
}
|
||||
|
||||
export enum BlockClassificationEnum {
|
||||
Default = '-',
|
||||
QuestionUnderstand = 'question-understand',
|
||||
Logic = 'logic',
|
||||
Transform = 'transform',
|
||||
Utilities = 'utilities',
|
||||
}
|
||||
|
||||
export type ToolDefaultValue = {
|
||||
provider_id: string
|
||||
provider_type: string
|
||||
provider_name: string
|
||||
tool_name: string
|
||||
tool_label: string
|
||||
title: string
|
||||
is_team_authorization: boolean
|
||||
params: Record<string, any>
|
||||
paramSchemas: Record<string, any>[]
|
||||
output_schema: Record<string, any>
|
||||
}
|
||||
|
||||
export type ToolValue = {
|
||||
provider_name: string
|
||||
tool_name: string
|
||||
tool_label: string
|
||||
settings?: Record<string, any>
|
||||
parameters?: Record<string, any>
|
||||
enabled?: boolean
|
||||
extra?: Record<string, any>
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
'use client'
|
||||
import type { FC, JSX } from 'react'
|
||||
import Editor, { loader } from '@monaco-editor/react'
|
||||
import React, { useRef } from 'react'
|
||||
import Base from '../editor/base'
|
||||
import { CodeLanguage } from '@/types/app'
|
||||
import './style.css'
|
||||
|
||||
// load file from local instead of cdn https://github.com/suren-atoyan/monaco-react/issues/482
|
||||
loader.config({ paths: { vs: '/vs' } })
|
||||
|
||||
type Props = {
|
||||
value?: string | object
|
||||
onChange?: (value: string) => void
|
||||
title: JSX.Element
|
||||
language: CodeLanguage
|
||||
headerRight?: JSX.Element
|
||||
readOnly?: boolean
|
||||
isJSONStringifyBeauty?: boolean
|
||||
height?: number
|
||||
}
|
||||
|
||||
const languageMap = {
|
||||
[CodeLanguage.javascript]: 'javascript',
|
||||
[CodeLanguage.python3]: 'python',
|
||||
[CodeLanguage.json]: 'json',
|
||||
}
|
||||
|
||||
const CodeEditor: FC<Props> = ({
|
||||
value = '',
|
||||
onChange = () => { },
|
||||
title,
|
||||
headerRight,
|
||||
language,
|
||||
readOnly,
|
||||
isJSONStringifyBeauty,
|
||||
height,
|
||||
}) => {
|
||||
const [isFocus, setIsFocus] = React.useState(false)
|
||||
|
||||
const handleEditorChange = (value: string | undefined) => {
|
||||
onChange(value || '')
|
||||
}
|
||||
|
||||
const editorRef = useRef(null)
|
||||
const handleEditorDidMount = (editor: any, monaco: any) => {
|
||||
editorRef.current = editor
|
||||
editor.onDidFocusEditorText(() => {
|
||||
setIsFocus(true)
|
||||
})
|
||||
editor.onDidBlurEditorText(() => {
|
||||
setIsFocus(false)
|
||||
})
|
||||
|
||||
monaco.editor.defineTheme('blur-theme', {
|
||||
base: 'vs',
|
||||
inherit: true,
|
||||
rules: [],
|
||||
colors: {
|
||||
'editor.background': '#F2F4F7',
|
||||
},
|
||||
})
|
||||
|
||||
monaco.editor.defineTheme('focus-theme', {
|
||||
base: 'vs',
|
||||
inherit: true,
|
||||
rules: [],
|
||||
colors: {
|
||||
'editor.background': '#ffffff',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const outPutValue = (() => {
|
||||
if (!isJSONStringifyBeauty)
|
||||
return value as string
|
||||
try {
|
||||
return JSON.stringify(value as object, null, 2)
|
||||
}
|
||||
catch (e) {
|
||||
return value as string
|
||||
}
|
||||
})()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Base
|
||||
title={title}
|
||||
value={outPutValue}
|
||||
headerRight={headerRight}
|
||||
isFocus={isFocus && !readOnly}
|
||||
minHeight={height || 200}
|
||||
>
|
||||
<>
|
||||
{/* https://www.npmjs.com/package/@monaco-editor/react */}
|
||||
<Editor
|
||||
className='h-full'
|
||||
// language={language === CodeLanguage.javascript ? 'javascript' : 'python'}
|
||||
language={languageMap[language] || 'javascript'}
|
||||
theme={isFocus ? 'focus-theme' : 'blur-theme'}
|
||||
value={outPutValue}
|
||||
onChange={handleEditorChange}
|
||||
// https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOptions.html
|
||||
options={{
|
||||
readOnly,
|
||||
domReadOnly: true,
|
||||
quickSuggestions: false,
|
||||
minimap: { enabled: false },
|
||||
lineNumbersMinChars: 1, // would change line num width
|
||||
wordWrap: 'on', // auto line wrap
|
||||
// lineNumbers: (num) => {
|
||||
// return <div>{num}</div>
|
||||
// }
|
||||
}}
|
||||
onMount={handleEditorDidMount}
|
||||
/>
|
||||
</>
|
||||
</Base>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(CodeEditor)
|
||||
@@ -0,0 +1,8 @@
|
||||
.margin-view-overlays {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* hide readonly tooltip */
|
||||
.monaco-editor-overlaymessage {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback, useRef, useState } from 'react'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import cn from 'classnames'
|
||||
import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
|
||||
import ToggleExpandBtn from './toggle-expand-btn'
|
||||
import useToggleExpend from './use-toggle-expend'
|
||||
import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/line/files'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
title: JSX.Element | string
|
||||
headerRight?: JSX.Element
|
||||
children: JSX.Element
|
||||
minHeight?: number
|
||||
value: string
|
||||
isFocus: boolean
|
||||
}
|
||||
|
||||
const Base: FC<Props> = ({
|
||||
className,
|
||||
title,
|
||||
headerRight,
|
||||
children,
|
||||
minHeight = 120,
|
||||
value,
|
||||
isFocus,
|
||||
}) => {
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
const {
|
||||
wrapClassName,
|
||||
isExpand,
|
||||
setIsExpand,
|
||||
editorExpandHeight,
|
||||
} = useToggleExpend({ ref, hasFooter: false })
|
||||
|
||||
const editorContentMinHeight = minHeight - 28
|
||||
const [editorContentHeight, setEditorContentHeight] = useState(editorContentMinHeight)
|
||||
|
||||
const [isCopied, setIsCopied] = React.useState(false)
|
||||
const handleCopy = useCallback(() => {
|
||||
copy(value)
|
||||
setIsCopied(true)
|
||||
}, [value])
|
||||
|
||||
return (
|
||||
<div className={cn(wrapClassName)}>
|
||||
<div ref={ref} className={cn(className, isExpand && 'h-full', 'rounded-lg border', isFocus ? 'bg-white border-gray-200' : 'bg-gray-100 border-gray-100 overflow-hidden')}>
|
||||
<div className='flex justify-between items-center h-7 pt-1 pl-3 pr-2'>
|
||||
<div className='text-xs font-semibold text-gray-700'>{title}</div>
|
||||
<div className='flex items-center'>
|
||||
{headerRight}
|
||||
{!isCopied
|
||||
? (
|
||||
<Clipboard className='mx-1 w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={handleCopy} />
|
||||
)
|
||||
: (
|
||||
<ClipboardCheck className='mx-1 w-3.5 h-3.5 text-gray-500' />
|
||||
)
|
||||
}
|
||||
<div className='ml-1'>
|
||||
<ToggleExpandBtn isExpand={isExpand} onExpandChange={setIsExpand} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PromptEditorHeightResizeWrap
|
||||
height={isExpand ? editorExpandHeight : editorContentHeight}
|
||||
minHeight={editorContentMinHeight}
|
||||
onHeightChange={setEditorContentHeight}
|
||||
hideResize={isExpand}
|
||||
>
|
||||
<div className='h-full pb-2'>
|
||||
{children}
|
||||
</div>
|
||||
</PromptEditorHeightResizeWrap>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(Base)
|
||||
@@ -0,0 +1,95 @@
|
||||
'use client'
|
||||
import React, { useCallback, useEffect, useState } from 'react'
|
||||
import type { FC } from 'react'
|
||||
import { useDebounceFn } from 'ahooks'
|
||||
import cn from 'classnames'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
height: number
|
||||
minHeight: number
|
||||
onHeightChange: (height: number) => void
|
||||
children: JSX.Element
|
||||
footer?: JSX.Element
|
||||
hideResize?: boolean
|
||||
}
|
||||
|
||||
const PromptEditorHeightResizeWrap: FC<Props> = ({
|
||||
className,
|
||||
height,
|
||||
minHeight,
|
||||
onHeightChange,
|
||||
children,
|
||||
footer,
|
||||
hideResize,
|
||||
}) => {
|
||||
const [clientY, setClientY] = useState(0)
|
||||
const [isResizing, setIsResizing] = useState(false)
|
||||
const [prevUserSelectStyle, setPrevUserSelectStyle] = useState(getComputedStyle(document.body).userSelect)
|
||||
|
||||
const handleStartResize = useCallback((e: React.MouseEvent<HTMLElement>) => {
|
||||
setClientY(e.clientY)
|
||||
setIsResizing(true)
|
||||
setPrevUserSelectStyle(getComputedStyle(document.body).userSelect)
|
||||
document.body.style.userSelect = 'none'
|
||||
}, [])
|
||||
|
||||
const handleStopResize = useCallback(() => {
|
||||
setIsResizing(false)
|
||||
document.body.style.userSelect = prevUserSelectStyle
|
||||
}, [prevUserSelectStyle])
|
||||
|
||||
const { run: didHandleResize } = useDebounceFn((e) => {
|
||||
if (!isResizing)
|
||||
return
|
||||
|
||||
const offset = e.clientY - clientY
|
||||
let newHeight = height + offset
|
||||
setClientY(e.clientY)
|
||||
if (newHeight < minHeight)
|
||||
newHeight = minHeight
|
||||
onHeightChange(newHeight)
|
||||
}, {
|
||||
wait: 0,
|
||||
})
|
||||
|
||||
const handleResize = useCallback(didHandleResize, [isResizing, height, minHeight, clientY])
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('mousemove', handleResize)
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', handleResize)
|
||||
}
|
||||
}, [handleResize])
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('mouseup', handleStopResize)
|
||||
return () => {
|
||||
document.removeEventListener('mouseup', handleStopResize)
|
||||
}
|
||||
}, [handleStopResize])
|
||||
|
||||
return (
|
||||
<div
|
||||
className='relative'
|
||||
>
|
||||
<div className={cn(className, 'overflow-y-auto')}
|
||||
style={{
|
||||
height,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
{/* resize handler */}
|
||||
{footer}
|
||||
{!hideResize && (
|
||||
<div
|
||||
className='absolute bottom-0 left-0 w-full flex justify-center h-2 cursor-row-resize'
|
||||
onMouseDown={handleStartResize}>
|
||||
<div className='w-5 h-[3px] rounded-sm bg-gray-300'></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(PromptEditorHeightResizeWrap)
|
||||
@@ -0,0 +1,25 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback } from 'react'
|
||||
import Expand04 from '@/app/components/base/icons/solid/expand-04'
|
||||
import Collapse04 from '@/app/components/base/icons/line/arrows/collapse-04'
|
||||
|
||||
type Props = {
|
||||
isExpand: boolean
|
||||
onExpandChange: (isExpand: boolean) => void
|
||||
}
|
||||
|
||||
const ExpandBtn: FC<Props> = ({
|
||||
isExpand,
|
||||
onExpandChange,
|
||||
}) => {
|
||||
const handleToggle = useCallback(() => {
|
||||
onExpandChange(!isExpand)
|
||||
}, [isExpand])
|
||||
|
||||
const Icon = isExpand ? Collapse04 : Expand04
|
||||
return (
|
||||
<Icon className='w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={handleToggle} />
|
||||
)
|
||||
}
|
||||
export default React.memo(ExpandBtn)
|
||||
@@ -0,0 +1,26 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
type Params = {
|
||||
ref: React.RefObject<HTMLDivElement>
|
||||
hasFooter?: boolean
|
||||
}
|
||||
|
||||
const useToggleExpend = ({ ref, hasFooter = true }: Params) => {
|
||||
const [isExpand, setIsExpand] = useState(false)
|
||||
const [wrapHeight, setWrapHeight] = useState(ref.current?.clientHeight)
|
||||
const editorExpandHeight = isExpand ? wrapHeight! - (hasFooter ? 56 : 29) : 0
|
||||
useEffect(() => {
|
||||
setWrapHeight(ref.current?.clientHeight)
|
||||
}, [isExpand])
|
||||
|
||||
const wrapClassName = isExpand && 'absolute z-10 left-4 right-6 top-[52px] bottom-0 pb-4 bg-white'
|
||||
|
||||
return {
|
||||
wrapClassName,
|
||||
editorExpandHeight,
|
||||
isExpand,
|
||||
setIsExpand,
|
||||
}
|
||||
}
|
||||
|
||||
export default useToggleExpend
|
||||
@@ -0,0 +1,81 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import cn from 'classnames'
|
||||
import BlockIcon from './block-icon'
|
||||
import AlertCircle from '@/app/components/base/icons/line/alert-circle'
|
||||
import AlertTriangle from '@/app/components/base/icons/line/alert-triangle'
|
||||
import Loading02 from '@/app/components/base/icons/line/loading-02'
|
||||
import CheckCircle from '@/app/components/base/icons/line/check-circle'
|
||||
import type { NodeTracing } from '@/types/app'
|
||||
|
||||
type Props = {
|
||||
nodeInfo: NodeTracing
|
||||
hideInfo?: boolean
|
||||
}
|
||||
|
||||
const NodePanel: FC<Props> = ({ nodeInfo, hideInfo = false }) => {
|
||||
const [collapseState, setCollapseState] = useState<boolean>(true)
|
||||
|
||||
const getTime = (time: number) => {
|
||||
if (time < 1)
|
||||
return `${(time * 1000).toFixed(3)} ms`
|
||||
if (time > 60)
|
||||
return `${parseInt(Math.round(time / 60).toString())} m ${(time % 60).toFixed(3)} s`
|
||||
return `${time.toFixed(3)} s`
|
||||
}
|
||||
|
||||
const getTokenCount = (tokens: number) => {
|
||||
if (tokens < 1000)
|
||||
return tokens
|
||||
if (tokens >= 1000 && tokens < 1000000)
|
||||
return `${parseFloat((tokens / 1000).toFixed(3))}K`
|
||||
if (tokens >= 1000000)
|
||||
return `${parseFloat((tokens / 1000000).toFixed(3))}M`
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setCollapseState(!nodeInfo.expand)
|
||||
}, [nodeInfo.expand])
|
||||
|
||||
return (
|
||||
<div className={cn('px-4 py-1', hideInfo && '!p-0')}>
|
||||
<div className={cn('group transition-all bg-white border border-gray-100 rounded-2xl shadow-xs hover:shadow-md', hideInfo && '!rounded-lg')}>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center pl-[6px] pr-3 cursor-pointer',
|
||||
hideInfo ? 'py-2' : 'py-3',
|
||||
!collapseState && (hideInfo ? '!pb-1' : '!pb-2'),
|
||||
)}
|
||||
onClick={() => setCollapseState(!collapseState)}
|
||||
>
|
||||
<BlockIcon size={hideInfo ? 'xs' : 'sm'} className={cn('shrink-0 mr-2', hideInfo && '!mr-1')} type={nodeInfo.node_type} toolIcon={nodeInfo.extras?.icon || nodeInfo.extras} />
|
||||
<div className={cn(
|
||||
'grow text-gray-700 text-[13px] leading-[16px] font-semibold truncate',
|
||||
hideInfo && '!text-xs',
|
||||
)} title={nodeInfo.title}>{nodeInfo.title}</div>
|
||||
{nodeInfo.status !== 'running' && !hideInfo && (
|
||||
<div className='shrink-0 text-gray-500 text-xs leading-[18px]'>{`${getTime(nodeInfo.elapsed_time || 0)} · ${getTokenCount(nodeInfo.execution_metadata?.total_tokens || 0)} tokens`}</div>
|
||||
)}
|
||||
{nodeInfo.status === 'succeeded' && (
|
||||
<CheckCircle className='shrink-0 ml-2 w-3.5 h-3.5 text-[#12B76A]' />
|
||||
)}
|
||||
{nodeInfo.status === 'failed' && (
|
||||
<AlertCircle className='shrink-0 ml-2 w-3.5 h-3.5 text-[#F04438]' />
|
||||
)}
|
||||
{nodeInfo.status === 'stopped' && (
|
||||
<AlertTriangle className='shrink-0 ml-2 w-3.5 h-3.5 text-[#F79009]' />
|
||||
)}
|
||||
{nodeInfo.status === 'running' && (
|
||||
<div className='shrink-0 flex items-center text-primary-600 text-[13px] leading-[16px] font-medium'>
|
||||
<Loading02 className='mr-1 w-3.5 h-3.5 animate-spin' />
|
||||
<span>Running</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NodePanel
|
||||
@@ -0,0 +1,13 @@
|
||||
import type { VarType } from '@/app/components/workflow/types'
|
||||
|
||||
export enum ErrorHandleTypeEnum {
|
||||
none = 'none',
|
||||
failBranch = 'fail-branch',
|
||||
defaultValue = 'default-value',
|
||||
}
|
||||
|
||||
export type DefaultValueForm = {
|
||||
key: string
|
||||
type: VarType
|
||||
value?: any
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export type WorkflowRetryConfig = {
|
||||
max_retries: number
|
||||
retry_interval: number
|
||||
retry_enabled: boolean
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import type { CollectionType } from '@/app/components/tools/types'
|
||||
import type { CommonNodeType, ValueSelector } from '@/app/components/workflow/types'
|
||||
|
||||
export enum VarType {
|
||||
variable = 'variable',
|
||||
constant = 'constant',
|
||||
mixed = 'mixed',
|
||||
}
|
||||
|
||||
export type ToolVarInputs = Record<string, {
|
||||
type: VarType
|
||||
value?: string | ValueSelector | any
|
||||
}>
|
||||
|
||||
export type ToolNodeType = CommonNodeType & {
|
||||
provider_id: string
|
||||
provider_type: CollectionType
|
||||
provider_name: string
|
||||
tool_name: string
|
||||
tool_label: string
|
||||
tool_parameters: ToolVarInputs
|
||||
tool_configurations: Record<string, any>
|
||||
output_schema: Record<string, any>
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export enum ChatVarType {
|
||||
Number = 'number',
|
||||
String = 'string',
|
||||
Object = 'object',
|
||||
ArrayString = 'array[string]',
|
||||
ArrayNumber = 'array[number]',
|
||||
ArrayObject = 'array[object]',
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="368" height="52" viewBox="0 0 368 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.5" d="M0 0H368M0 2H368M0 4H368M0 6H368M0 8H368M0 10H368M0 12H368M0 14H368M0 16H368M0 18H368M0 20H368M0 22H368M0 24H368M0 26H368M0 28H368M0 30H368M0 32H368M0 34H368M0 36H368M0 38H368M0 40H368M0 42H368M0 44H368M0 46H368M0 48H368M0 50H368M0 52H368M0 54H368M0 56H368M0 58H368M0 60H368M0 62H368M0 64H368M0 66H368M0 68H368M0 70H368M0 72H368M0 74H368M0 76H368M0 78H368M0 80H368M0 82H368M0 84H368M0 86H368M0 88H368M0 90H368M0 92H368M0 94H368M0 96H368M0 98H368M0 100H368M0 102H368M0 104H368M0 106H368M0 108H368M0 110H368M0 112H368M0 114H368M0 116H368M0 118H368M0 120H368M0 122H368M0 124H368M0 126H368M0 128H368M0 130H368M0 132H368M0 134H368M0 136H368M0 138H368M0 140H368M0 142H368M0 144H368M0 146H368M0 148H368M0 150H368M0 152H368M0 154H368M0 156H368M0 158H368M0 160H368M0 162H368M0 164H368M0 166H368M0 168H368M0 170H368M0 172H368M0 174H368M0 176H368M0 178H368M0 180H368M0 182H368M0 184H368M0 186H368M0 188H368M0 190H368M0 192H368M0 194H368M0 196H368M0 198H368M0 200H368M0 202H368M0 204H368M0 206H368M0 208H368M0 210H368M0 212H368M0 214H368M0 216H368M0 218H368M0 220H368M0 222H368M0 224H368M0 226H368" stroke="#F04438" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="368" height="52" viewBox="0 0 368 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.5" d="M0 0.5H368M0 2.5H368M0 4.5H368M0 6.5H368M0 8.5H368M0 10.5H368M0 12.5H368M0 14.5H368M0 16.5H368M0 18.5H368M0 20.5H368M0 22.5H368M0 24.5H368M0 26.5H368M0 28.5H368M0 30.5H368M0 32.5H368M0 34.5H368M0 36.5H368M0 38.5H368M0 40.5H368M0 42.5H368M0 44.5H368M0 46.5H368M0 48.5H368M0 50.5H368M0 52.5H368M0 54.5H368M0 56.5H368M0 58.5H368M0 60.5H368M0 62.5H368M0 64.5H368M0 66.5H368M0 68.5H368M0 70.5H368M0 72.5H368M0 74.5H368M0 76.5H368M0 78.5H368M0 80.5H368M0 82.5H368M0 84.5H368M0 86.5H368M0 88.5H368M0 90.5H368M0 92.5H368M0 94.5H368M0 96.5H368M0 98.5H368M0 100.5H368M0 102.5H368M0 104.5H368M0 106.5H368M0 108.5H368M0 110.5H368M0 112.5H368M0 114.5H368M0 116.5H368M0 118.5H368M0 120.5H368M0 122.5H368M0 124.5H368M0 126.5H368M0 128.5H368M0 130.5H368M0 132.5H368M0 134.5H368M0 136.5H368M0 138.5H368M0 140.5H368M0 142.5H368M0 144.5H368M0 146.5H368M0 148.5H368M0 150.5H368M0 152.5H368M0 154.5H368M0 156.5H368M0 158.5H368M0 160.5H368M0 162.5H368M0 164.5H368M0 166.5H368M0 168.5H368M0 170.5H368M0 172.5H368M0 174.5H368M0 176.5H368M0 178.5H368M0 180.5H368M0 182.5H368M0 184.5H368M0 186.5H368M0 188.5H368M0 190.5H368M0 192.5H368M0 194.5H368M0 196.5H368M0 198.5H368M0 200.5H368M0 202.5H368M0 204.5H368M0 206.5H368M0 208.5H368M0 210.5H368M0 212.5H368M0 214.5H368M0 216.5H368M0 218.5H368M0 220.5H368M0 222.5H368M0 224.5H368M0 226.5H368" stroke="#0BA5EC" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="368" height="52" viewBox="0 0 368 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.5" d="M0 0H368M0 2H368M0 4H368M0 6H368M0 8H368M0 10H368M0 12H368M0 14H368M0 16H368M0 18H368M0 20H368M0 22H368M0 24H368M0 26H368M0 28H368M0 30H368M0 32H368M0 34H368M0 36H368M0 38H368M0 40H368M0 42H368M0 44H368M0 46H368M0 48H368M0 50H368M0 52H368M0 54H368M0 56H368M0 58H368M0 60H368M0 62H368M0 64H368M0 66H368M0 68H368M0 70H368M0 72H368M0 74H368M0 76H368M0 78H368M0 80H368M0 82H368M0 84H368M0 86H368M0 88H368M0 90H368M0 92H368M0 94H368M0 96H368M0 98H368M0 100H368M0 102H368M0 104H368M0 106H368M0 108H368M0 110H368M0 112H368M0 114H368M0 116H368M0 118H368M0 120H368M0 122H368M0 124H368M0 126H368M0 128H368M0 130H368M0 132H368M0 134H368M0 136H368M0 138H368M0 140H368M0 142H368M0 144H368M0 146H368M0 148H368M0 150H368M0 152H368M0 154H368M0 156H368M0 158H368M0 160H368M0 162H368M0 164H368M0 166H368M0 168H368M0 170H368M0 172H368M0 174H368M0 176H368M0 178H368M0 180H368M0 182H368M0 184H368M0 186H368M0 188H368M0 190H368M0 192H368M0 194H368M0 196H368M0 198H368M0 200H368M0 202H368M0 204H368M0 206H368M0 208H368M0 210H368M0 212H368M0 214H368M0 216H368M0 218H368M0 220H368M0 222H368M0 224H368M0 226H368" stroke="#17B26A" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="368" height="52" viewBox="0 0 368 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.5" d="M0 0.5H368M0 2.5H368M0 4.5H368M0 6.5H368M0 8.5H368M0 10.5H368M0 12.5H368M0 14.5H368M0 16.5H368M0 18.5H368M0 20.5H368M0 22.5H368M0 24.5H368M0 26.5H368M0 28.5H368M0 30.5H368M0 32.5H368M0 34.5H368M0 36.5H368M0 38.5H368M0 40.5H368M0 42.5H368M0 44.5H368M0 46.5H368M0 48.5H368M0 50.5H368M0 52.5H368M0 54.5H368M0 56.5H368M0 58.5H368M0 60.5H368M0 62.5H368M0 64.5H368M0 66.5H368M0 68.5H368M0 70.5H368M0 72.5H368M0 74.5H368M0 76.5H368M0 78.5H368M0 80.5H368M0 82.5H368M0 84.5H368M0 86.5H368M0 88.5H368M0 90.5H368M0 92.5H368M0 94.5H368M0 96.5H368M0 98.5H368M0 100.5H368M0 102.5H368M0 104.5H368M0 106.5H368M0 108.5H368M0 110.5H368M0 112.5H368M0 114.5H368M0 116.5H368M0 118.5H368M0 120.5H368M0 122.5H368M0 124.5H368M0 126.5H368M0 128.5H368M0 130.5H368M0 132.5H368M0 134.5H368M0 136.5H368M0 138.5H368M0 140.5H368M0 142.5H368M0 144.5H368M0 146.5H368M0 148.5H368M0 150.5H368M0 152.5H368M0 154.5H368M0 156.5H368M0 158.5H368M0 160.5H368M0 162.5H368M0 164.5H368M0 166.5H368M0 168.5H368M0 170.5H368M0 172.5H368M0 174.5H368M0 176.5H368M0 178.5H368M0 180.5H368M0 182.5H368M0 184.5H368M0 186.5H368M0 188.5H368M0 190.5H368M0 192.5H368M0 194.5H368M0 196.5H368M0 198.5H368M0 200.5H368M0 202.5H368M0 204.5H368M0 206.5H368M0 208.5H368M0 210.5H368M0 212.5H368M0 214.5H368M0 216.5H368M0 218.5H368M0 220.5H368M0 222.5H368M0 224.5H368M0 226.5H368" stroke="#F79009" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,9 @@
|
||||
<svg width="237" height="50" viewBox="0 0 237 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.5" d="M0 8C0 3.58172 3.58172 0 8 0H237L215.033 50H8C3.58172 50 0 46.4183 0 42V8Z" fill="url(#paint0_linear_3552_29170)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_3552_29170" x1="-4.89158e-08" y1="4.62963" x2="168.013" y2="23.1752" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.03"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0.05"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 517 B |
@@ -0,0 +1,9 @@
|
||||
<svg width="237" height="50" viewBox="0 0 237 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.5" d="M0 8C0 3.58172 3.58172 0 8 0H237L215.033 50H8C3.58172 50 0 46.4183 0 42V8Z" fill="url(#paint0_linear_3552_29170)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_3552_29170" x1="-4.89158e-08" y1="4.62963" x2="168.013" y2="23.1752" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.12"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0.5"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 516 B |
@@ -0,0 +1,51 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import { Theme } from '@/types/app'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type Props = {
|
||||
status: string
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
const StatusContainer: FC<Props> = ({
|
||||
status,
|
||||
children,
|
||||
}) => {
|
||||
const { theme } = useAppContext()
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'relative px-3 py-2.5 rounded-lg border system-xs-regular break-all',
|
||||
status === 'succeeded' && 'border-[rgba(23,178,106,0.8)] bg-workflow-display-success-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-success.svg)] text-text-success',
|
||||
status === 'succeeded' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(23,178,106,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
|
||||
status === 'succeeded' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(23,178,106,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
|
||||
status === 'partial-succeeded' && 'border-[rgba(23,178,106,0.8)] bg-workflow-display-success-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-success.svg)] text-text-success',
|
||||
status === 'partial-succeeded' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(23,178,106,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
|
||||
status === 'partial-succeeded' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(23,178,106,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
|
||||
status === 'failed' && 'border-[rgba(240,68,56,0.8)] bg-workflow-display-error-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-error.svg)] text-text-warning',
|
||||
status === 'failed' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(240,68,56,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
|
||||
status === 'failed' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(240,68,56,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
|
||||
status === 'stopped' && 'border-[rgba(247,144,9,0.8)] bg-workflow-display-warning-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-warning.svg)] text-text-destructive',
|
||||
status === 'stopped' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(247,144,9,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
|
||||
status === 'stopped' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(247,144,9,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
|
||||
status === 'exception' && 'border-[rgba(247,144,9,0.8)] bg-workflow-display-warning-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-warning.svg)] text-text-destructive',
|
||||
status === 'exception' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(247,144,9,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
|
||||
status === 'exception' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(247,144,9,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
|
||||
status === 'running' && 'border-[rgba(11,165,236,0.8)] bg-workflow-display-normal-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-running.svg)] text-util-colors-blue-light-blue-light-600',
|
||||
status === 'running' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(11,165,236,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
|
||||
status === 'running' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(11,165,236,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
|
||||
)}
|
||||
>
|
||||
<div className={cn(
|
||||
'absolute top-0 left-0 w-[65%] h-[50px] bg-no-repeat',
|
||||
theme === Theme.light && 'bg-[url(~@/app/components/workflow/run/assets/highlight.svg)]',
|
||||
theme === Theme.dark && 'bg-[url(~@/app/components/workflow/run/assets/highlight-dark.svg)]',
|
||||
)}></div>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default StatusContainer
|
||||
@@ -0,0 +1,151 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import cn from '@/utils/classnames'
|
||||
import Indicator from '@/app/components/header/indicator'
|
||||
import StatusContainer from '@/app/components/workflow/run/status-container'
|
||||
|
||||
type ResultProps = {
|
||||
status: string
|
||||
time?: number
|
||||
tokens?: number
|
||||
error?: string
|
||||
exceptionCounts?: number
|
||||
}
|
||||
|
||||
const StatusPanel: FC<ResultProps> = ({
|
||||
status,
|
||||
time,
|
||||
tokens,
|
||||
error,
|
||||
exceptionCounts,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<StatusContainer status={status}>
|
||||
<div className='flex'>
|
||||
<div className={cn(
|
||||
'flex-[33%] max-w-[120px]',
|
||||
status === 'partial-succeeded' && 'min-w-[140px]',
|
||||
)}>
|
||||
<div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.status')}</div>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center gap-1 system-xs-semibold-uppercase',
|
||||
status === 'succeeded' && 'text-util-colors-green-green-600',
|
||||
status === 'partial-succeeded' && 'text-util-colors-green-green-600',
|
||||
status === 'failed' && 'text-util-colors-red-red-600',
|
||||
status === 'stopped' && 'text-util-colors-warning-warning-600',
|
||||
status === 'running' && 'text-util-colors-blue-light-blue-light-600',
|
||||
)}
|
||||
>
|
||||
{status === 'running' && (
|
||||
<>
|
||||
<Indicator color={'blue'} />
|
||||
<span>Running</span>
|
||||
</>
|
||||
)}
|
||||
{status === 'succeeded' && (
|
||||
<>
|
||||
<Indicator color={'green'} />
|
||||
<span>SUCCESS</span>
|
||||
</>
|
||||
)}
|
||||
{status === 'partial-succeeded' && (
|
||||
<>
|
||||
<Indicator color={'green'} />
|
||||
<span>PARTIAL SUCCESS</span>
|
||||
</>
|
||||
)}
|
||||
{status === 'exception' && (
|
||||
<>
|
||||
<Indicator color={'yellow'} />
|
||||
<span>EXCEPTION</span>
|
||||
</>
|
||||
)}
|
||||
{status === 'failed' && (
|
||||
<>
|
||||
<Indicator color={'red'} />
|
||||
<span>FAIL</span>
|
||||
</>
|
||||
)}
|
||||
{status === 'stopped' && (
|
||||
<>
|
||||
<Indicator color={'yellow'} />
|
||||
<span>STOP</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-[33%] max-w-[152px]'>
|
||||
<div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.time')}</div>
|
||||
<div className='flex items-center gap-1 system-sm-medium text-text-secondary'>
|
||||
{status === 'running' && (
|
||||
<div className='w-16 h-2 rounded-sm bg-text-quaternary' />
|
||||
)}
|
||||
{status !== 'running' && (
|
||||
<span>{time ? `${time?.toFixed(3)}s` : '-'}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-[33%]'>
|
||||
<div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.tokens')}</div>
|
||||
<div className='flex items-center gap-1 system-sm-medium text-text-secondary'>
|
||||
{status === 'running' && (
|
||||
<div className='w-20 h-2 rounded-sm bg-text-quaternary' />
|
||||
)}
|
||||
{status !== 'running' && (
|
||||
<span>{`${tokens || 0} Tokens`}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{status === 'failed' && error && (
|
||||
<>
|
||||
<div className='my-2 h-[0.5px] bg-divider-subtle' />
|
||||
<div className='system-xs-regular text-text-destructive'>{error}</div>
|
||||
{
|
||||
!!exceptionCounts && (
|
||||
<>
|
||||
<div className='my-2 h-[0.5px] bg-divider-subtle' />
|
||||
<div className='system-xs-regular text-text-destructive'>
|
||||
{t('workflow.nodes.common.errorHandle.partialSucceeded.tip', { num: exceptionCounts })}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)}
|
||||
{
|
||||
status === 'partial-succeeded' && !!exceptionCounts && (
|
||||
<>
|
||||
<div className='my-2 h-[0.5px] bg-divider-deep' />
|
||||
<div className='system-xs-medium text-text-warning'>
|
||||
{t('workflow.nodes.common.errorHandle.partialSucceeded.tip', { num: exceptionCounts })}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
status === 'exception' && (
|
||||
<>
|
||||
<div className='my-2 h-[0.5px] bg-divider-deep' />
|
||||
<div className='system-xs-medium text-text-warning'>
|
||||
{error}
|
||||
<a
|
||||
href='https://docs.dify.ai/guides/workflow/error-handling/error-type'
|
||||
target='_blank'
|
||||
className='text-text-accent'
|
||||
>
|
||||
{t('workflow.common.learnMore')}
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</StatusContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default StatusPanel
|
||||
@@ -0,0 +1,404 @@
|
||||
import type {
|
||||
Edge as ReactFlowEdge,
|
||||
Node as ReactFlowNode,
|
||||
Viewport,
|
||||
} from 'reactflow'
|
||||
import type { Resolution, TransferMethod } from '@/types/app'
|
||||
import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
|
||||
import type { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
|
||||
import type { FileResponse, NodeTracing } from '@/types/workflow'
|
||||
import type { Collection, Tool } from '@/app/components/tools/types'
|
||||
import type { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
|
||||
import type {
|
||||
DefaultValueForm,
|
||||
ErrorHandleTypeEnum,
|
||||
} from '@/app/components/workflow/nodes/_base/components/error-handle/types'
|
||||
import type { WorkflowRetryConfig } from '@/app/components/workflow/nodes/_base/components/retry/types'
|
||||
|
||||
export enum BlockEnum {
|
||||
Start = 'start',
|
||||
End = 'end',
|
||||
Answer = 'answer',
|
||||
LLM = 'llm',
|
||||
KnowledgeRetrieval = 'knowledge-retrieval',
|
||||
QuestionClassifier = 'question-classifier',
|
||||
IfElse = 'if-else',
|
||||
Code = 'code',
|
||||
TemplateTransform = 'template-transform',
|
||||
HttpRequest = 'http-request',
|
||||
VariableAssigner = 'variable-assigner',
|
||||
VariableAggregator = 'variable-aggregator',
|
||||
Tool = 'tool',
|
||||
ParameterExtractor = 'parameter-extractor',
|
||||
Iteration = 'iteration',
|
||||
DocExtractor = 'document-extractor',
|
||||
ListFilter = 'list-operator',
|
||||
IterationStart = 'iteration-start',
|
||||
Assigner = 'assigner', // is now named as VariableAssigner
|
||||
Agent = 'agent',
|
||||
}
|
||||
|
||||
export enum ControlMode {
|
||||
Pointer = 'pointer',
|
||||
Hand = 'hand',
|
||||
}
|
||||
export enum ErrorHandleMode {
|
||||
Terminated = 'terminated',
|
||||
ContinueOnError = 'continue-on-error',
|
||||
RemoveAbnormalOutput = 'remove-abnormal-output',
|
||||
}
|
||||
export type Branch = {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
|
||||
export type CommonNodeType<T = {}> = {
|
||||
_connectedSourceHandleIds?: string[]
|
||||
_connectedTargetHandleIds?: string[]
|
||||
_targetBranches?: Branch[]
|
||||
_isSingleRun?: boolean
|
||||
_runningStatus?: NodeRunningStatus
|
||||
_runningBranchId?: string
|
||||
_singleRunningStatus?: NodeRunningStatus
|
||||
_isCandidate?: boolean
|
||||
_isBundled?: boolean
|
||||
_children?: string[]
|
||||
_isEntering?: boolean
|
||||
_showAddVariablePopup?: boolean
|
||||
_holdAddVariablePopup?: boolean
|
||||
_iterationLength?: number
|
||||
_iterationIndex?: number
|
||||
_inParallelHovering?: boolean
|
||||
_waitingRun?: boolean
|
||||
_retryIndex?: number
|
||||
isInIteration?: boolean
|
||||
iteration_id?: string
|
||||
selected?: boolean
|
||||
title: string
|
||||
desc: string
|
||||
type: BlockEnum
|
||||
width?: number
|
||||
height?: number
|
||||
error_strategy?: ErrorHandleTypeEnum
|
||||
retry_config?: WorkflowRetryConfig
|
||||
default_value?: DefaultValueForm[]
|
||||
} & T & Partial<Pick<ToolDefaultValue, 'provider_id' | 'provider_type' | 'provider_name' | 'tool_name'>>
|
||||
|
||||
export type CommonEdgeType = {
|
||||
_hovering?: boolean
|
||||
_connectedNodeIsHovering?: boolean
|
||||
_connectedNodeIsSelected?: boolean
|
||||
_isBundled?: boolean
|
||||
_sourceRunningStatus?: NodeRunningStatus
|
||||
_targetRunningStatus?: NodeRunningStatus
|
||||
_waitingRun?: boolean
|
||||
isInIteration?: boolean
|
||||
iteration_id?: string
|
||||
sourceType: BlockEnum
|
||||
targetType: BlockEnum
|
||||
}
|
||||
|
||||
export type Node<T = {}> = ReactFlowNode<CommonNodeType<T>>
|
||||
export type SelectedNode = Pick<Node, 'id' | 'data'>
|
||||
export type NodeProps<T = unknown> = { id: string; data: CommonNodeType<T> }
|
||||
export type NodePanelProps<T> = {
|
||||
id: string
|
||||
data: CommonNodeType<T>
|
||||
}
|
||||
export type Edge = ReactFlowEdge<CommonEdgeType>
|
||||
|
||||
export type WorkflowDataUpdater = {
|
||||
nodes: Node[]
|
||||
edges: Edge[]
|
||||
viewport: Viewport
|
||||
}
|
||||
|
||||
export type ValueSelector = string[] // [nodeId, key | obj key path]
|
||||
|
||||
export type Variable = {
|
||||
variable: string
|
||||
label?: string | {
|
||||
nodeType: BlockEnum
|
||||
nodeName: string
|
||||
variable: string
|
||||
}
|
||||
value_selector: ValueSelector
|
||||
variable_type?: VarKindType
|
||||
value?: string
|
||||
options?: string[]
|
||||
required?: boolean
|
||||
isParagraph?: boolean
|
||||
}
|
||||
|
||||
export type EnvironmentVariable = {
|
||||
id: string
|
||||
name: string
|
||||
value: any
|
||||
value_type: 'string' | 'number' | 'secret'
|
||||
}
|
||||
|
||||
export type ConversationVariable = {
|
||||
id: string
|
||||
name: string
|
||||
value_type: ChatVarType
|
||||
value: any
|
||||
description: string
|
||||
}
|
||||
|
||||
export type GlobalVariable = {
|
||||
name: string
|
||||
value_type: 'string' | 'number'
|
||||
description: string
|
||||
}
|
||||
|
||||
export type VariableWithValue = {
|
||||
key: string
|
||||
value: string
|
||||
}
|
||||
|
||||
export enum InputVarType {
|
||||
textInput = 'text-input',
|
||||
paragraph = 'paragraph',
|
||||
select = 'select',
|
||||
number = 'number',
|
||||
url = 'url',
|
||||
files = 'files',
|
||||
json = 'json', // obj, array
|
||||
contexts = 'contexts', // knowledge retrieval
|
||||
iterator = 'iterator', // iteration input
|
||||
singleFile = 'file',
|
||||
multiFiles = 'file-list',
|
||||
}
|
||||
|
||||
export type InputVar = {
|
||||
type: InputVarType
|
||||
label: string | {
|
||||
nodeType: BlockEnum
|
||||
nodeName: string
|
||||
variable: string
|
||||
isChatVar?: boolean
|
||||
}
|
||||
variable: string
|
||||
max_length?: number
|
||||
default?: string
|
||||
required: boolean
|
||||
hint?: string
|
||||
options?: string[]
|
||||
value_selector?: ValueSelector
|
||||
} & Partial<UploadFileSetting>
|
||||
|
||||
export type ModelConfig = {
|
||||
provider: string
|
||||
name: string
|
||||
mode: string
|
||||
completion_params: Record<string, any>
|
||||
}
|
||||
|
||||
export enum PromptRole {
|
||||
system = 'system',
|
||||
user = 'user',
|
||||
assistant = 'assistant',
|
||||
}
|
||||
|
||||
export enum EditionType {
|
||||
basic = 'basic',
|
||||
jinja2 = 'jinja2',
|
||||
}
|
||||
|
||||
export type PromptItem = {
|
||||
id?: string
|
||||
role?: PromptRole
|
||||
text: string
|
||||
edition_type?: EditionType
|
||||
jinja2_text?: string
|
||||
}
|
||||
|
||||
export enum MemoryRole {
|
||||
user = 'user',
|
||||
assistant = 'assistant',
|
||||
}
|
||||
|
||||
export type RolePrefix = {
|
||||
user: string
|
||||
assistant: string
|
||||
}
|
||||
|
||||
export type Memory = {
|
||||
role_prefix?: RolePrefix
|
||||
window: {
|
||||
enabled: boolean
|
||||
size: number | string | null
|
||||
}
|
||||
query_prompt_template: string
|
||||
}
|
||||
|
||||
export enum VarType {
|
||||
string = 'string',
|
||||
number = 'number',
|
||||
secret = 'secret',
|
||||
boolean = 'boolean',
|
||||
object = 'object',
|
||||
file = 'file',
|
||||
array = 'array',
|
||||
arrayString = 'array[string]',
|
||||
arrayNumber = 'array[number]',
|
||||
arrayObject = 'array[object]',
|
||||
arrayFile = 'array[file]',
|
||||
any = 'any',
|
||||
}
|
||||
|
||||
export type Var = {
|
||||
variable: string
|
||||
type: VarType
|
||||
children?: Var[] // if type is obj, has the children struct
|
||||
isParagraph?: boolean
|
||||
isSelect?: boolean
|
||||
options?: string[]
|
||||
required?: boolean
|
||||
des?: string
|
||||
isException?: boolean
|
||||
}
|
||||
|
||||
export type NodeOutPutVar = {
|
||||
nodeId: string
|
||||
title: string
|
||||
vars: Var[]
|
||||
isStartNode?: boolean
|
||||
}
|
||||
|
||||
export type Block = {
|
||||
classification?: string
|
||||
type: BlockEnum
|
||||
title: string
|
||||
description?: string
|
||||
}
|
||||
|
||||
export type NodeDefault<T> = {
|
||||
defaultValue: Partial<T>
|
||||
getAvailablePrevNodes: (isChatMode: boolean) => BlockEnum[]
|
||||
getAvailableNextNodes: (isChatMode: boolean) => BlockEnum[]
|
||||
checkValid: (payload: T, t: any, moreDataForCheckValid?: any) => { isValid: boolean; errorMessage?: string }
|
||||
}
|
||||
|
||||
export type OnSelectBlock = (type: BlockEnum, toolDefaultValue?: ToolDefaultValue) => void
|
||||
|
||||
export enum WorkflowRunningStatus {
|
||||
Waiting = 'waiting',
|
||||
Running = 'running',
|
||||
Succeeded = 'succeeded',
|
||||
Failed = 'failed',
|
||||
Stopped = 'stopped',
|
||||
}
|
||||
|
||||
export enum WorkflowVersion {
|
||||
Draft = 'draft',
|
||||
Latest = 'latest',
|
||||
}
|
||||
|
||||
export enum NodeRunningStatus {
|
||||
NotStart = 'not-start',
|
||||
Waiting = 'waiting',
|
||||
Running = 'running',
|
||||
Succeeded = 'succeeded',
|
||||
Failed = 'failed',
|
||||
Exception = 'exception',
|
||||
Retry = 'retry',
|
||||
}
|
||||
|
||||
export type OnNodeAdd = (
|
||||
newNodePayload: {
|
||||
nodeType: BlockEnum
|
||||
sourceHandle?: string
|
||||
targetHandle?: string
|
||||
toolDefaultValue?: ToolDefaultValue
|
||||
},
|
||||
oldNodesPayload: {
|
||||
prevNodeId?: string
|
||||
prevNodeSourceHandle?: string
|
||||
nextNodeId?: string
|
||||
nextNodeTargetHandle?: string
|
||||
}
|
||||
) => void
|
||||
|
||||
export type CheckValidRes = {
|
||||
isValid: boolean
|
||||
errorMessage?: string
|
||||
}
|
||||
|
||||
export type RunFile = {
|
||||
type: string
|
||||
transfer_method: TransferMethod[]
|
||||
url?: string
|
||||
upload_file_id?: string
|
||||
}
|
||||
|
||||
export type WorkflowRunningData = {
|
||||
task_id?: string
|
||||
message_id?: string
|
||||
conversation_id?: string
|
||||
result: {
|
||||
sequence_number?: number
|
||||
workflow_id?: string
|
||||
inputs?: string
|
||||
process_data?: string
|
||||
outputs?: string
|
||||
status: string
|
||||
error?: string
|
||||
elapsed_time?: number
|
||||
total_tokens?: number
|
||||
created_at?: number
|
||||
created_by?: string
|
||||
finished_at?: number
|
||||
steps?: number
|
||||
showSteps?: boolean
|
||||
total_steps?: number
|
||||
files?: FileResponse[]
|
||||
exceptions_count?: number
|
||||
}
|
||||
tracing?: NodeTracing[]
|
||||
}
|
||||
|
||||
export type HistoryWorkflowData = {
|
||||
id: string
|
||||
sequence_number: number
|
||||
status: string
|
||||
conversation_id?: string
|
||||
}
|
||||
|
||||
export enum ChangeType {
|
||||
changeVarName = 'changeVarName',
|
||||
remove = 'remove',
|
||||
}
|
||||
|
||||
export type MoreInfo = {
|
||||
type: ChangeType
|
||||
payload?: {
|
||||
beforeKey: string
|
||||
afterKey?: string
|
||||
}
|
||||
}
|
||||
|
||||
export type ToolWithProvider = Collection & {
|
||||
tools: Tool[]
|
||||
}
|
||||
|
||||
export enum SupportUploadFileTypes {
|
||||
image = 'image',
|
||||
document = 'document',
|
||||
audio = 'audio',
|
||||
video = 'video',
|
||||
custom = 'custom',
|
||||
}
|
||||
|
||||
export type UploadFileSetting = {
|
||||
allowed_file_upload_methods: TransferMethod[]
|
||||
allowed_file_types: SupportUploadFileTypes[]
|
||||
allowed_file_extensions?: string[]
|
||||
max_length: number
|
||||
number_limits?: number
|
||||
}
|
||||
|
||||
export type VisionSetting = {
|
||||
variable_selector: ValueSelector
|
||||
detail: Resolution
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import {
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react'
|
||||
import cn from 'classnames'
|
||||
import NodePanel from './node'
|
||||
import type { WorkflowProcess } from '@/types/app'
|
||||
import CheckCircle from '@/app/components/base/icons/solid/general/check-circle'
|
||||
import AlertCircle from '@/app/components/base/icons/solid/alert-circle'
|
||||
import Loading02 from '@/app/components/base/icons/line/loading-02'
|
||||
import ChevronRight from '@/app/components/base/icons/line/chevron-right'
|
||||
import { WorkflowRunningStatus } from '@/types/app'
|
||||
|
||||
type WorkflowProcessProps = {
|
||||
data: WorkflowProcess
|
||||
grayBg?: boolean
|
||||
expand?: boolean
|
||||
hideInfo?: boolean
|
||||
}
|
||||
const WorkflowProcessItem = ({
|
||||
data,
|
||||
grayBg,
|
||||
expand = false,
|
||||
hideInfo = false,
|
||||
}: WorkflowProcessProps) => {
|
||||
const [collapse, setCollapse] = useState(!expand)
|
||||
const running = data.status === WorkflowRunningStatus.Running
|
||||
const succeeded = data.status === WorkflowRunningStatus.Succeeded
|
||||
const failed = data.status === WorkflowRunningStatus.Failed || data.status === WorkflowRunningStatus.Stopped
|
||||
|
||||
const background = useMemo(() => {
|
||||
if (running && !collapse)
|
||||
return 'linear-gradient(180deg, #E1E4EA 0%, #EAECF0 100%)'
|
||||
|
||||
if (succeeded && !collapse)
|
||||
return 'linear-gradient(180deg, #ECFDF3 0%, #F6FEF9 100%)'
|
||||
|
||||
if (failed && !collapse)
|
||||
return 'linear-gradient(180deg, #FEE4E2 0%, #FEF3F2 100%)'
|
||||
}, [running, succeeded, failed, collapse])
|
||||
|
||||
useEffect(() => {
|
||||
setCollapse(!expand)
|
||||
}, [expand])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'mb-2 rounded-xl border-[0.5px] border-black/[0.08]',
|
||||
collapse ? 'py-[7px]' : hideInfo ? 'pt-2 pb-1' : 'py-2',
|
||||
collapse && (!grayBg ? 'bg-white' : 'bg-gray-50'),
|
||||
hideInfo ? 'mx-[-8px] px-1' : 'w-full px-3',
|
||||
)}
|
||||
style={{
|
||||
background,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center h-[18px] cursor-pointer',
|
||||
hideInfo && 'px-[6px]',
|
||||
)}
|
||||
onClick={() => setCollapse(!collapse)}
|
||||
>
|
||||
{
|
||||
running && (
|
||||
<Loading02 className='shrink-0 mr-1 w-3 h-3 text-[#667085] animate-spin' />
|
||||
)
|
||||
}
|
||||
{
|
||||
succeeded && (
|
||||
<CheckCircle className='shrink-0 mr-1 w-3 h-3 text-[#12B76A]' />
|
||||
)
|
||||
}
|
||||
{
|
||||
failed && (
|
||||
<AlertCircle className='shrink-0 mr-1 w-3 h-3 text-[#F04438]' />
|
||||
)
|
||||
}
|
||||
<div className='grow text-xs font-medium text-gray-700 leading-[18px]'>Workflow Process</div>
|
||||
<ChevronRight className={`'ml-1 w-3 h-3 text-gray-500' ${collapse ? '' : 'rotate-90'}`} />
|
||||
</div>
|
||||
{
|
||||
!collapse && (
|
||||
<div className='mt-1.5'>
|
||||
{
|
||||
data.tracing.map(node => (
|
||||
<div key={node.id} className='mb-0.5 last-of-type:mb-0'>
|
||||
<NodePanel
|
||||
nodeInfo={node}
|
||||
hideInfo={hideInfo}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default WorkflowProcessItem
|
||||
Reference in New Issue
Block a user