Skip to content

D
dify
Commit 044ed624 authored by Joel's avatar Joel
Browse files
Options

feat: var picker trigger

parent 4dff0c5d
Hide whitespace changes
Inline Side-by-side
Showing with 185 additions and 17 deletions
web/app/components/base/icons/assets/public/common/line-3.svg 0 → 100644
View file @ 044ed624
<svg width="5" height="12" viewBox="0 0 5 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Line 3" d="M1 11.3545L3.94174 0.645781" stroke="#D0D5DD" stroke-linecap="round"/>
</svg>
web/app/components/base/icons/assets/vender/solid/development/variable-02.svg 0 → 100644
View file @ 044ed624
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="variable-02">
<g id="Vector">
<path d="M13.9986 8.76189C14.6132 8.04115 15.5117 7.625 16.459 7.625H16.5486C17.1009 7.625 17.5486 8.07272 17.5486 8.625C17.5486 9.17728 17.1009 9.625 16.5486 9.625H16.459C16.0994 9.625 15.7564 9.78289 15.5205 10.0595L13.1804 12.8039L13.9213 15.4107C13.9372 15.4666 13.9859 15.5 14.0355 15.5H15.4296C15.9819 15.5 16.4296 15.9477 16.4296 16.5C16.4296 17.0523 15.9819 17.5 15.4296 17.5H14.0355C13.0858 17.5 12.2562 16.8674 11.9975 15.9575L11.621 14.6328L10.1457 16.3631C9.5311 17.0839 8.63257 17.5 7.68532 17.5H7.59564C7.04336 17.5 6.59564 17.0523 6.59564 16.5C6.59564 15.9477 7.04336 15.5 7.59564 15.5H7.68532C8.04487 15.5 8.38789 15.3421 8.62379 15.0655L10.964 12.3209L10.2231 9.71433C10.2072 9.65839 10.1586 9.625 10.1089 9.625H8.71484C8.16256 9.625 7.71484 9.17728 7.71484 8.625C7.71484 8.07272 8.16256 7.625 8.71484 7.625H10.1089C11.0586 7.625 11.8883 8.25756 12.1469 9.16754L12.5234 10.4921L13.9986 8.76189Z" fill="black"/>
<path d="M5.429 3C3.61372 3 2.143 4.47071 2.143 6.286V10.4428L1.29289 11.2929C1.10536 11.4804 1 11.7348 1 12C1 12.2652 1.10536 12.5196 1.29289 12.7071L2.143 13.5572V17.714C2.143 19.5293 3.61372 21 5.429 21C5.98128 21 6.429 20.5523 6.429 20C6.429 19.4477 5.98128 19 5.429 19C4.71828 19 4.143 18.4247 4.143 17.714V13.143C4.143 12.8778 4.03764 12.6234 3.85011 12.4359L3.41421 12L3.85011 11.5641C4.03764 11.3766 4.143 11.1222 4.143 10.857V6.286C4.143 5.57528 4.71828 5 5.429 5C5.98128 5 6.429 4.55228 6.429 4C6.429 3.44772 5.98128 3 5.429 3Z" fill="black"/>
<path d="M18.5708 3C18.0185 3 17.5708 3.44772 17.5708 4C17.5708 4.55228 18.0185 5 18.5708 5C19.2815 5 19.8568 5.57529 19.8568 6.286V10.857C19.8568 11.1222 19.9622 11.3766 20.1497 11.5641L20.5856 12L20.1497 12.4359C19.9622 12.6234 19.8568 12.8778 19.8568 13.143V17.714C19.8568 18.4244 19.2808 19 18.5708 19C18.0185 19 17.5708 19.4477 17.5708 20C17.5708 20.5523 18.0185 21 18.5708 21C20.3848 21 21.8568 19.5296 21.8568 17.714V13.5572L22.7069 12.7071C23.0974 12.3166 23.0974 11.6834 22.7069 11.2929L21.8568 10.4428V6.286C21.8568 4.47071 20.3861 3 18.5708 3Z" fill="black"/>
</g>
</g>
</svg>
web/app/components/base/icons/src/public/common/Line3.json 0 → 100644
View file @ 044ed624
{
"icon": {
"type": "element",
"isRootNode": true,
"name": "svg",
"attributes": {
"width": "5",
"height": "12",
"viewBox": "0 0 5 12",
"fill": "none",
"xmlns": "http://www.w3.org/2000/svg"
},
"children": [
{
"type": "element",
"name": "path",
"attributes": {
"id": "Line 3",
"d": "M1 11.3545L3.94174 0.645781",
"stroke": "#D0D5DD",
"stroke-linecap": "round"
},
"children": []
}
]
},
"name": "Line3"
}
\ No newline at end of file
web/app/components/base/icons/src/public/common/Line3.tsx 0 → 100644
View file @ 044ed624
// GENERATE BY script
// DON NOT EDIT IT MANUALLY
import * as React from 'react'
import data from './Line3.json'
import IconBase from '@/app/components/base/icons/IconBase'
import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
props,
ref,
) => <IconBase {...props} ref={ref} data={data as IconData} />)
Icon.displayName = 'Line3'
export default Icon
web/app/components/base/icons/src/public/common/index.ts
View file @ 044ed624
export { default as DiagonalDividingLine } from './DiagonalDividingLine'
export { default as Dify } from './Dify'
export { default as Github } from './Github'
export { default as Line3 } from './Line3'
export { default as MessageChatSquare } from './MessageChatSquare'
export { default as MultiPathRetrieval } from './MultiPathRetrieval'
export { default as NTo1Retrieval } from './NTo1Retrieval'
......
web/app/components/base/icons/src/vender/solid/development/Variable02.json 0 → 100644
View file @ 044ed624
{
"icon": {
"type": "element",
"isRootNode": true,
"name": "svg",
"attributes": {
"width": "24",
"height": "24",
"viewBox": "0 0 24 24",
"fill": "none",
"xmlns": "http://www.w3.org/2000/svg"
},
"children": [
{
"type": "element",
"name": "g",
"attributes": {
"id": "variable-02"
},
"children": [
{
"type": "element",
"name": "g",
"attributes": {
"id": "Vector"
},
"children": [
{
"type": "element",
"name": "path",
"attributes": {
"d": "M13.9986 8.76189C14.6132 8.04115 15.5117 7.625 16.459 7.625H16.5486C17.1009 7.625 17.5486 8.07272 17.5486 8.625C17.5486 9.17728 17.1009 9.625 16.5486 9.625H16.459C16.0994 9.625 15.7564 9.78289 15.5205 10.0595L13.1804 12.8039L13.9213 15.4107C13.9372 15.4666 13.9859 15.5 14.0355 15.5H15.4296C15.9819 15.5 16.4296 15.9477 16.4296 16.5C16.4296 17.0523 15.9819 17.5 15.4296 17.5H14.0355C13.0858 17.5 12.2562 16.8674 11.9975 15.9575L11.621 14.6328L10.1457 16.3631C9.5311 17.0839 8.63257 17.5 7.68532 17.5H7.59564C7.04336 17.5 6.59564 17.0523 6.59564 16.5C6.59564 15.9477 7.04336 15.5 7.59564 15.5H7.68532C8.04487 15.5 8.38789 15.3421 8.62379 15.0655L10.964 12.3209L10.2231 9.71433C10.2072 9.65839 10.1586 9.625 10.1089 9.625H8.71484C8.16256 9.625 7.71484 9.17728 7.71484 8.625C7.71484 8.07272 8.16256 7.625 8.71484 7.625H10.1089C11.0586 7.625 11.8883 8.25756 12.1469 9.16754L12.5234 10.4921L13.9986 8.76189Z",
"fill": "currentColor"
},
"children": []
},
{
"type": "element",
"name": "path",
"attributes": {
"d": "M5.429 3C3.61372 3 2.143 4.47071 2.143 6.286V10.4428L1.29289 11.2929C1.10536 11.4804 1 11.7348 1 12C1 12.2652 1.10536 12.5196 1.29289 12.7071L2.143 13.5572V17.714C2.143 19.5293 3.61372 21 5.429 21C5.98128 21 6.429 20.5523 6.429 20C6.429 19.4477 5.98128 19 5.429 19C4.71828 19 4.143 18.4247 4.143 17.714V13.143C4.143 12.8778 4.03764 12.6234 3.85011 12.4359L3.41421 12L3.85011 11.5641C4.03764 11.3766 4.143 11.1222 4.143 10.857V6.286C4.143 5.57528 4.71828 5 5.429 5C5.98128 5 6.429 4.55228 6.429 4C6.429 3.44772 5.98128 3 5.429 3Z",
"fill": "currentColor"
},
"children": []
},
{
"type": "element",
"name": "path",
"attributes": {
"d": "M18.5708 3C18.0185 3 17.5708 3.44772 17.5708 4C17.5708 4.55228 18.0185 5 18.5708 5C19.2815 5 19.8568 5.57529 19.8568 6.286V10.857C19.8568 11.1222 19.9622 11.3766 20.1497 11.5641L20.5856 12L20.1497 12.4359C19.9622 12.6234 19.8568 12.8778 19.8568 13.143V17.714C19.8568 18.4244 19.2808 19 18.5708 19C18.0185 19 17.5708 19.4477 17.5708 20C17.5708 20.5523 18.0185 21 18.5708 21C20.3848 21 21.8568 19.5296 21.8568 17.714V13.5572L22.7069 12.7071C23.0974 12.3166 23.0974 11.6834 22.7069 11.2929L21.8568 10.4428V6.286C21.8568 4.47071 20.3861 3 18.5708 3Z",
"fill": "currentColor"
},
"children": []
}
]
}
]
}
]
},
"name": "Variable02"
}
\ No newline at end of file
web/app/components/base/icons/src/vender/solid/development/Variable02.tsx 0 → 100644
View file @ 044ed624
// GENERATE BY script
// DON NOT EDIT IT MANUALLY
import * as React from 'react'
import data from './Variable02.json'
import IconBase from '@/app/components/base/icons/IconBase'
import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
props,
ref,
) => <IconBase {...props} ref={ref} data={data as IconData} />)
Icon.displayName = 'Variable02'
export default Icon
web/app/components/base/icons/src/vender/solid/development/index.ts
View file @ 044ed624
......@@ -6,3 +6,4 @@ export { default as PatternRecognition } from './PatternRecognition'
export { default as PuzzlePiece01 } from './PuzzlePiece01'
export { default as Semantic } from './Semantic'
export { default as TerminalSquare } from './TerminalSquare'
export { default as Variable02 } from './Variable02'
web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
View file @ 044ed624
......@@ -2,9 +2,11 @@
import type { FC } from 'react'
import React from 'react'
import cn from 'classnames'
import { BlockEnum } from '@/app/components/workflow/types'
import { mockNodesData } from '../../../mock'
import type { ValueSelector } from '@/app/components/workflow/types'
import { VarBlockIcon } from '@/app/components/workflow/block-icon'
import { Line3 } from '@/app/components/base/icons/src/public/common'
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
type Props = {
className?: string
isShowNodeName: boolean
......@@ -13,32 +15,49 @@ type Props = {
onChange: (value: ValueSelector) => void
}
const getNodeInfoById = () => {
const getNodeInfoById = (id: string) => {
return mockNodesData[id]
}
const VarReferencePicker: FC<Props> = ({
readonly,
className,
isShowNodeName,
value,
}) => {
const valueNotSet = value.length === 0
const nodeName = !valueNotSet ? value[0] : ''
const varName = !valueNotSet ? value[value.length - 1] : ''
const hasValue = value.length > 0
const node = hasValue ? getNodeInfoById(value[0]) : null
const varName = hasValue ? value[value.length - 1] : ''
// TODO: get var type through node and value
const getVarType = () => {
return 'string'
}
return (
<div className={cn(className)}>
<div className='flex items-center'>
{isShowNodeName && (
<VarBlockIcon
className='!text-gray-900'
type={BlockEnum.Start}
/>
)} /
{!valueNotSet ? (`${varName} / ${getVarType()}`) : ''}
<div className={cn(className, !readonly && 'cursor-pointer')}>
<div className={cn('w-full h-8 p-1 rounded-lg bg-gray-100')}>
<div className={cn('inline-flex h-full items-center px-1.5 rounded-[5px]', hasValue && 'bg-white')}>
{hasValue && (
<>
{isShowNodeName && (
<div className='flex items-center'>
<div className='p-[1px]'>
<VarBlockIcon
className='!text-gray-900'
type={node?.type}
/>
</div>
<div className='mx-0.5 text-xs font-medium text-gray-700'>{node?.title}</div>
<Line3 className='mr-0.5'></Line3>
</div>
)}
<div className='flex items-center text-primary-600'>
<Variable02 className='w-3.5 h-3.5' />
<div className='ml-0.5 text-xs font-medium'>{varName}</div>
</div>
<div className='ml-0.5 text-xs font-normal text-gray-500'>{getVarType()}</div>
</>
)}
</div>
</div>
</div>
)
......
web/app/components/workflow/nodes/llm/mock.ts
View file @ 044ed624
......@@ -17,11 +17,11 @@ export const mockLLMNodeData: LLMNodeData = {
variables: [
{
variable: 'name',
value_selector: ['start', 'name'],
value_selector: ['aaa', 'name'],
},
{
variable: 'age',
value_selector: ['a', 'b', 'c'],
value_selector: ['bbb', 'b', 'c'],
},
],
prompt: [],
......
web/app/components/workflow/nodes/mock.ts
View file @ 044ed624
import { BlockEnum } from '@/app/components/workflow/types'
export const mockNodesData: Record<string, any> = {
aaa: {
title: 'Start',
type: BlockEnum.Start,
},
bbb: {
title: 'Knowledge',
type: BlockEnum.KnowledgeRetrieval,
},
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment