Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
D
dify
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
ai-tech
dify
Commits
20d5fdea
Commit
20d5fdea
authored
Feb 06, 2024
by
StyleZhang
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
init
parent
f5c08070
Changes
14
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
14 changed files
with
585 additions
and
23 deletions
+585
-23
page.tsx
web/app/(commonLayout)/workflow/page.tsx
+14
-0
context.tsx
web/app/components/workflow/context.tsx
+0
-0
custom-edge.tsx
web/app/components/workflow/custom-edge.tsx
+29
-0
header.tsx
web/app/components/workflow/header.tsx
+14
-0
hooks.ts
web/app/components/workflow/hooks.ts
+15
-0
index.tsx
web/app/components/workflow/index.tsx
+67
-0
node.tsx
web/app/components/workflow/nodes/_base/node.tsx
+42
-0
panel.tsx
web/app/components/workflow/nodes/_base/panel.tsx
+41
-0
index.tsx
web/app/components/workflow/nodes/index.tsx
+29
-0
node.tsx
web/app/components/workflow/nodes/start/node.tsx
+11
-0
panel.tsx
web/app/components/workflow/nodes/start/panel.tsx
+11
-0
types.ts
web/app/components/workflow/types.ts
+0
-0
package.json
web/package.json
+1
-0
yarn.lock
web/yarn.lock
+311
-23
No files found.
web/app/(commonLayout)/workflow/page.tsx
0 → 100644
View file @
20d5fdea
'use client'
import
type
{
FC
}
from
'react'
import
{
memo
}
from
'react'
import
Workflow
from
'@/app/components/workflow'
const
Page
:
FC
=
()
=>
{
return
(
<
div
className=
'min-w-[720px] w-full h-full overflow-x-auto'
>
<
Workflow
/>
</
div
>
)
}
export
default
memo
(
Page
)
web/app/components/workflow/context.tsx
0 → 100644
View file @
20d5fdea
web/app/components/workflow/custom-edge.tsx
0 → 100644
View file @
20d5fdea
import
type
{
EdgeProps
}
from
'reactflow'
import
{
BaseEdge
,
getBezierPath
,
}
from
'reactflow'
const
CustomEdge
=
({
id
,
sourceX
,
sourceY
,
targetX
,
targetY
,
}:
EdgeProps
)
=>
{
const
[
edgePath
]
=
getBezierPath
({
sourceX
,
sourceY
,
targetX
,
targetY
,
})
console
.
log
(
'edgePath'
,
edgePath
)
return
(
<>
<
BaseEdge
id=
{
id
}
path=
{
edgePath
}
/>
</>
)
}
export
default
CustomEdge
web/app/components/workflow/header.tsx
0 → 100644
View file @
20d5fdea
const
Header
=
()
=>
{
return
(
<
div
className=
'absolute top-0 left-0 w-full h-14 z-10'
style=
{
{
background
:
'linear-gradient(180deg, #F9FAFB 0%, rgba(249, 250, 251, 0.00) 100%)'
,
}
}
>
</
div
>
)
}
export
default
Header
web/app/components/workflow/hooks.ts
0 → 100644
View file @
20d5fdea
import
{
useCallback
,
useState
,
}
from
'react'
export
const
useWorkflow
=
()
=>
{
const
[
selectedNodeId
,
setSelectedNodeId
]
=
useState
(
''
)
const
handleSelectedNodeId
=
useCallback
((
nodeId
:
string
)
=>
setSelectedNodeId
(
nodeId
),
[])
return
{
selectedNodeId
,
handleSelectedNodeId
,
}
}
web/app/components/workflow/index.tsx
0 → 100644
View file @
20d5fdea
import
ReactFlow
,
{
Background
,
}
from
'reactflow'
import
'reactflow/dist/style.css'
import
Header
from
'./header'
import
CustomNode
from
'./nodes'
import
CustomEdge
from
'./custom-edge'
const
nodeTypes
=
{
custom
:
CustomNode
,
}
const
edgeTypes
=
{
custom
:
CustomEdge
,
}
const
Workflow
=
()
=>
{
return
(
<
div
className=
'relative w-full h-full'
>
<
Header
/>
<
ReactFlow
nodeTypes=
{
nodeTypes
}
edgeTypes=
{
edgeTypes
}
nodes=
{
[
{
id
:
'start'
,
type
:
'custom'
,
position
:
{
x
:
330
,
y
:
30
},
data
:
{
list
:
[]
},
},
{
id
:
'1'
,
type
:
'custom'
,
position
:
{
x
:
400
,
y
:
250
},
data
:
{
list
:
[]
},
},
{
id
:
'2'
,
type
:
'custom'
,
position
:
{
x
:
100
,
y
:
250
},
data
:
{
list
:
[]
},
},
]
}
edges=
{
[
{
id
:
'e1-2'
,
source
:
'start'
,
target
:
'1'
,
type
:
'custom'
,
},
{
id
:
'e1-3'
,
source
:
'start'
,
target
:
'2'
,
type
:
'custom'
,
},
]
}
>
<
Background
gap=
{
[
14
,
14
]
}
size=
{
1
}
/>
</
ReactFlow
>
</
div
>
)
}
export
default
Workflow
web/app/components/workflow/nodes/_base/node.tsx
0 → 100644
View file @
20d5fdea
import
type
{
FC
,
ReactNode
,
}
from
'react'
import
{
memo
}
from
'react'
import
{
Plus
}
from
'@/app/components/base/icons/src/vender/line/general'
type
BaseNodeProps
=
{
children
:
ReactNode
}
const
BaseNode
:
FC
<
BaseNodeProps
>
=
({
children
,
})
=>
{
return
(
<
div
className=
{
`
group relative pb-2 w-[296px] bg-[#fcfdff] border border-white rounded-2xl shadow-xs
hover:shadow-lg
`
}
>
<
div
className=
'flex items-center px-3 pt-3 pb-2'
>
<
div
className=
'mr-2'
></
div
>
<
div
className=
'text-[13px] font-semibold text-gray-700'
>
START
</
div
>
</
div
>
{
children
}
<
div
className=
'px-3 pt-1 pb-1 text-xs text-gray-500'
>
Define the initial parameters for launching a workflow
</
div
>
<
div
className=
{
`
hidden absolute -bottom-2 left-1/2 -translate-x-1/2 group-hover:flex items-center justify-center
w-4 h-4 rounded-full bg-primary-600 cursor-pointer z-10
`
}
>
<
Plus
className=
'w-2.5 h-2.5 text-white'
/>
</
div
>
</
div
>
)
}
export
default
memo
(
BaseNode
)
web/app/components/workflow/nodes/_base/panel.tsx
0 → 100644
View file @
20d5fdea
import
type
{
FC
,
ReactNode
,
}
from
'react'
type
BasePanelProps
=
{
defaultElement
?:
ReactNode
inputsElement
?:
ReactNode
ouputsElement
?:
ReactNode
}
const
BasePanel
:
FC
<
BasePanelProps
>
=
({
defaultElement
,
inputsElement
,
ouputsElement
,
})
=>
{
return
(
<
div
className=
'absolute top-2 right-2 bottom-2 w-[420px] shadow-lg border-[0.5px] border-gray-200 rounded-2xl'
>
<
div
className=
'flex items-center px-4 pt-3'
>
<
div
className=
'mr-2 w-6 h-6'
></
div
>
<
div
className=
'py-1 text-base text-gray-900 font-semibold '
>
LLM
</
div
>
</
div
>
<
div
className=
'p-2'
>
<
div
className=
'py-[5px] pl-1.5 pr-2 text-xs text-gray-400'
>
Add description...
</
div
>
</
div
>
<
div
className=
'flex items-center px-4 h-[42px]'
>
inputs
</
div
>
<
div
className=
'py-2 border-t-[0.5px] border-b-[0.5px] border-black/5'
>
{
defaultElement
}
{
inputsElement
}
{
ouputsElement
}
</
div
>
<
div
className=
'p-4'
></
div
>
</
div
>
)
}
export
default
BasePanel
web/app/components/workflow/nodes/index.tsx
0 → 100644
View file @
20d5fdea
import
{
Handle
,
Position
,
}
from
'reactflow'
import
StartNode
from
'./start/node'
const
NodeMap
=
{
'start-node'
:
StartNode
,
}
const
CustomNode
=
()
=>
{
return
(
<>
<
Handle
type=
'target'
position=
{
Position
.
Top
}
className=
'!-top-0.5 !w-2 !h-0.5 !bg-primary-500 !rounded-none !border-none !min-h-[2px]'
/>
<
StartNode
/>
<
Handle
type=
'source'
position=
{
Position
.
Bottom
}
className=
'!-bottom-0.5 !w-2 !h-0.5 !bg-primary-500 !rounded-none !border-none !min-h-[2px]'
/>
</>
)
}
export
default
CustomNode
web/app/components/workflow/nodes/start/node.tsx
0 → 100644
View file @
20d5fdea
import
BaseNode
from
'../_base/node'
const
Node
=
()
=>
{
return
(
<
BaseNode
>
start node
</
BaseNode
>
)
}
export
default
Node
web/app/components/workflow/nodes/start/panel.tsx
0 → 100644
View file @
20d5fdea
import
BasePanel
from
'../_base/panel'
const
Panel
=
()
=>
{
return
(
<
BasePanel
inputsElement=
{
<
div
>
start panel
</
div
>
}
/>
)
}
export
default
Panel
web/app/components/workflow/types.ts
0 → 100644
View file @
20d5fdea
web/package.json
View file @
20d5fdea
...
@@ -68,6 +68,7 @@
...
@@ -68,6 +68,7 @@
"react-tooltip"
:
"5.8.3"
,
"react-tooltip"
:
"5.8.3"
,
"react-window"
:
"^1.8.9"
,
"react-window"
:
"^1.8.9"
,
"react-window-infinite-loader"
:
"^1.0.9"
,
"react-window-infinite-loader"
:
"^1.0.9"
,
"reactflow"
:
"^11.10.3"
,
"recordrtc"
:
"^5.6.2"
,
"recordrtc"
:
"^5.6.2"
,
"rehype-katex"
:
"^6.0.2"
,
"rehype-katex"
:
"^6.0.2"
,
"remark-breaks"
:
"^3.0.2"
,
"remark-breaks"
:
"^3.0.2"
,
...
...
web/yarn.lock
View file @
20d5fdea
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment