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
6adb9861
Commit
6adb9861
authored
Mar 06, 2024
by
Joel
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: expend toggle
parent
cc4ca942
Changes
8
Show whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
171 additions
and
83 deletions
+171
-83
prompt-editor-height-resize-wrap.tsx
...ration/config-prompt/prompt-editor-height-resize-wrap.tsx
+9
-5
collapse-04.svg
...ents/base/icons/assets/vender/line/arrows/collapse-04.svg
+3
-0
Collapse04.json
...ponents/base/icons/src/vender/line/arrows/Collapse04.json
+29
-0
Collapse04.tsx
...mponents/base/icons/src/vender/line/arrows/Collapse04.tsx
+16
-0
index.ts
...app/components/base/icons/src/vender/line/arrows/index.ts
+1
-0
index.tsx
web/app/components/base/prompt-editor/index.tsx
+3
-1
editor.tsx
...ponents/workflow/nodes/_base/components/prompt/editor.tsx
+85
-77
toggle-expand-btn.tsx
...nts/workflow/nodes/_base/components/toggle-expand-btn.tsx
+25
-0
No files found.
web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx
View file @
6adb9861
...
...
@@ -11,6 +11,7 @@ type Props = {
onHeightChange
:
(
height
:
number
)
=>
void
children
:
JSX
.
Element
footer
?:
JSX
.
Element
hideResize
?:
boolean
}
const
PromptEditorHeightResizeWrap
:
FC
<
Props
>
=
({
...
...
@@ -20,6 +21,7 @@ const PromptEditorHeightResizeWrap: FC<Props> = ({
onHeightChange
,
children
,
footer
,
hideResize
,
})
=>
{
const
[
clientY
,
setClientY
]
=
useState
(
0
)
const
[
isResizing
,
setIsResizing
]
=
useState
(
false
)
...
...
@@ -80,11 +82,13 @@ const PromptEditorHeightResizeWrap: FC<Props> = ({
</
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
>
)
}
...
...
web/app/components/base/icons/assets/vender/line/arrows/collapse-04.svg
0 → 100644
View file @
6adb9861
<svg
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
fill=
"none"
xmlns=
"http://www.w3.org/2000/svg"
>
<path
d=
"M4 14H10M10 14V20M10 14L3 21M20 10H14M14 10V4M14 10L21 3M20 14V16.8C20 17.9201 20 18.4802 19.782 18.908C19.5903 19.2843 19.2843 19.5903 18.908 19.782C18.4802 20 17.9201 20 16.8 20H14M10 4H7.2C6.0799 4 5.51984 4 5.09202 4.21799C4.71569 4.40973 4.40973 4.71569 4.21799 5.09202C4 5.51984 4 6.07989 4 7.2V10"
stroke=
"black"
stroke-width=
"2"
stroke-linecap=
"round"
stroke-linejoin=
"round"
/>
</svg>
web/app/components/base/icons/src/vender/line/arrows/Collapse04.json
0 → 100644
View file @
6adb9861
{
"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"
:
"path"
,
"attributes"
:
{
"d"
:
"M4 14H10M10 14V20M10 14L3 21M20 10H14M14 10V4M14 10L21 3M20 14V16.8C20 17.9201 20 18.4802 19.782 18.908C19.5903 19.2843 19.2843 19.5903 18.908 19.782C18.4802 20 17.9201 20 16.8 20H14M10 4H7.2C6.0799 4 5.51984 4 5.09202 4.21799C4.71569 4.40973 4.40973 4.71569 4.21799 5.09202C4 5.51984 4 6.07989 4 7.2V10"
,
"stroke"
:
"currentColor"
,
"stroke-width"
:
"2"
,
"stroke-linecap"
:
"round"
,
"stroke-linejoin"
:
"round"
},
"children"
:
[]
}
]
},
"name"
:
"Collapse04"
}
\ No newline at end of file
web/app/components/base/icons/src/vender/line/arrows/Collapse04.tsx
0 → 100644
View file @
6adb9861
// GENERATE BY script
// DON NOT EDIT IT MANUALLY
import
*
as
React
from
'react'
import
data
from
'./Collapse04.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
=
'Collapse04'
export
default
Icon
web/app/components/base/icons/src/vender/line/arrows/index.ts
View file @
6adb9861
...
...
@@ -5,6 +5,7 @@ export { default as ChevronDownDouble } from './ChevronDownDouble'
export
{
default
as
ChevronDown
}
from
'./ChevronDown'
export
{
default
as
ChevronRight
}
from
'./ChevronRight'
export
{
default
as
ChevronSelectorVertical
}
from
'./ChevronSelectorVertical'
export
{
default
as
Collapse04
}
from
'./Collapse04'
export
{
default
as
FlipBackward
}
from
'./FlipBackward'
export
{
default
as
RefreshCcw01
}
from
'./RefreshCcw01'
export
{
default
as
RefreshCw05
}
from
'./RefreshCw05'
web/app/components/base/prompt-editor/index.tsx
View file @
6adb9861
...
...
@@ -44,6 +44,7 @@ import { useEventEmitterContextContext } from '@/context/event-emitter'
export
type
PromptEditorProps
=
{
className
?:
string
style
?:
React
.
CSSProperties
value
?:
string
editable
?:
boolean
onChange
?:
(
text
:
string
)
=>
void
...
...
@@ -81,6 +82,7 @@ export type PromptEditorProps = {
const
PromptEditor
:
FC
<
PromptEditorProps
>
=
({
className
,
style
,
value
,
editable
=
true
,
onChange
,
...
...
@@ -158,7 +160,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
<
LexicalComposer
initialConfig=
{
{
...
initialConfig
,
editable
}
}
>
<
div
className=
'relative'
>
<
RichTextPlugin
contentEditable=
{
<
ContentEditable
className=
{
`${className} outline-none text-sm text-gray-700 leading-6`
}
/>
}
contentEditable=
{
<
ContentEditable
className=
{
`${className} outline-none text-sm text-gray-700 leading-6`
}
style=
{
style
||
{}
}
/>
}
placeholder=
{
<
Placeholder
/>
}
ErrorBoundary=
{
LexicalErrorBoundary
}
/>
...
...
web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
View file @
6adb9861
'use client'
import
type
{
FC
}
from
'react'
import
React
,
{
useCallback
}
from
'react'
import
React
,
{
useCallback
,
useEffect
,
useRef
,
useState
}
from
'react'
import
cn
from
'classnames'
import
copy
from
'copy-to-clipboard'
import
{
useTranslation
}
from
'react-i18next'
import
{
useBoolean
}
from
'ahooks'
import
ToggleExpandBtn
from
'../toggle-expand-btn'
import
PromptEditorHeightResizeWrap
from
'@/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap'
import
PromptEditor
from
'@/app/components/base/prompt-editor'
import
{
Clipboard
,
ClipboardCheck
}
from
'@/app/components/base/icons/src/vender/line/files'
import
{
Expand04
}
from
'@/app/components/base/icons/src/vender/solid/arrows'
import
s
from
'@/app/components/app/configuration/config-prompt/style.module.css'
import
{
Trash03
}
from
'@/app/components/base/icons/src/vender/line/general'
...
...
@@ -40,19 +40,23 @@ const Editor: FC<Props> = ({
copy
(
value
)
setIsCopied
(
true
)
},
[
value
])
const
[
isExpanded
,
setIsExpanded
]
=
React
.
useState
(
false
)
const
toggleExpand
=
useCallback
(()
=>
{
setIsExpanded
(
!
isExpanded
)
},
[
isExpanded
])
const
[
isFocus
,
{
setTrue
:
setFocus
,
setFalse
:
setBlur
,
}]
=
useBoolean
(
false
)
const
ref
=
useRef
<
HTMLDivElement
>
(
null
)
const
[
isExpand
,
setIsExpand
]
=
useState
(
false
)
const
[
wrapHeight
,
setWrapHeight
]
=
useState
(
ref
.
current
?.
clientHeight
)
const
editorExpandHeight
=
isExpand
?
wrapHeight
!
-
56
:
0
useEffect
(()
=>
{
setWrapHeight
(
ref
.
current
?.
clientHeight
)
},
[
isExpand
])
return
(
<
div
className=
{
cn
(
isFocus
&&
s
.
gradientBorder
,
'!rounded-[9px] shadow-md'
)
}
>
<
div
className=
{
cn
(
isFocus
?
'bg-white'
:
'bg-gray-100'
,
'rounded-lg'
)
}
>
<
div
className=
{
cn
(
isExpand
&&
'absolute z-10 left-4 right-6 top-[52px] bottom-0 pb-4 bg-white'
)
}
>
<
div
ref=
{
ref
}
className=
{
cn
(
isFocus
&&
s
.
gradientBorder
,
isExpand
&&
'h-full'
,
'!rounded-[9px] shadow-md'
)
}
>
<
div
className=
{
cn
(
isFocus
?
'bg-white'
:
'bg-gray-100'
,
isExpand
&&
'h-full flex flex-col'
,
'rounded-lg'
)
}
>
<
div
className=
'pt-1 pl-3 pr-2 flex justify-between h-6 items-center'
>
<
div
className=
'leading-4 text-xs font-semibold text-gray-700 uppercase'
>
{
title
}
</
div
>
<
div
className=
'flex items-center'
>
...
...
@@ -71,14 +75,14 @@ const Editor: FC<Props> = ({
<
ClipboardCheck
className=
'mx-1 w-3.5 h-3.5 text-gray-500'
/>
)
}
<
Expand04
className=
'w-3.5 h-3.5 text-gray-500 cursor-pointer'
onClick=
{
toggle
Expand
}
/>
<
ToggleExpandBtn
isExpand=
{
isExpand
}
onExpandChange=
{
setIs
Expand
}
/>
</
div
>
</
div
>
</
div
>
<
PromptEditorHeightResizeWrap
className=
'px-3 min-h-[102px] overflow-y-auto text-sm text-gray-700'
height=
{
editorHeight
}
className=
{
cn
(
isExpand
&&
'h-0 grow'
,
'px-3 min-h-[102px] overflow-y-auto text-sm text-gray-700'
)
}
height=
{
isExpand
?
editorExpandHeight
:
editorHeight
}
minHeight=
{
minHeight
}
onHeightChange=
{
setEditorHeight
}
footer=
{
(
...
...
@@ -88,9 +92,11 @@ const Editor: FC<Props> = ({
:
<
div
className=
'h-[18px]'
></
div
>
}
</
div
>
)
}
hideResize=
{
isExpand
}
>
<
PromptEditor
className=
'min-h-[84px]'
className=
{
cn
(
'min-h-[84px]'
)
}
style=
{
isExpand
?
{
height
:
editorExpandHeight
-
5
}
:
{}
}
value=
{
value
}
contextBlock=
{
{
show
:
true
,
...
...
@@ -127,6 +133,8 @@ const Editor: FC<Props> = ({
</
PromptEditorHeightResizeWrap
>
</
div
>
</
div
>
</
div
>
)
}
export
default
React
.
memo
(
Editor
)
web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx
0 → 100644
View file @
6adb9861
'use client'
import
type
{
FC
}
from
'react'
import
React
,
{
useCallback
}
from
'react'
import
{
Expand04
}
from
'@/app/components/base/icons/src/vender/solid/arrows'
import
{
Collapse04
}
from
'@/app/components/base/icons/src/vender/line/arrows'
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
)
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