From 6adb986167cc0ac1b6aad2444574115e1a96a77c Mon Sep 17 00:00:00 2001 From: Joel Date: Wed, 6 Mar 2024 16:56:18 +0800 Subject: [PATCH] feat: expend toggle --- .../prompt-editor-height-resize-wrap.tsx | 14 +- .../assets/vender/line/arrows/collapse-04.svg | 3 + .../src/vender/line/arrows/Collapse04.json | 29 ++++ .../src/vender/line/arrows/Collapse04.tsx | 16 ++ .../icons/src/vender/line/arrows/index.ts | 1 + .../components/base/prompt-editor/index.tsx | 4 +- .../nodes/_base/components/prompt/editor.tsx | 164 +++++++++--------- .../_base/components/toggle-expand-btn.tsx | 25 +++ 8 files changed, 172 insertions(+), 84 deletions(-) create mode 100644 web/app/components/base/icons/assets/vender/line/arrows/collapse-04.svg create mode 100644 web/app/components/base/icons/src/vender/line/arrows/Collapse04.json create mode 100644 web/app/components/base/icons/src/vender/line/arrows/Collapse04.tsx create mode 100644 web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx diff --git a/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx b/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx index cffc728593..5d696cfda2 100644 --- a/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx +++ b/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx @@ -11,6 +11,7 @@ type Props = { onHeightChange: (height: number) => void children: JSX.Element footer?: JSX.Element + hideResize?: boolean } const PromptEditorHeightResizeWrap: FC = ({ @@ -20,6 +21,7 @@ const PromptEditorHeightResizeWrap: FC = ({ onHeightChange, children, footer, + hideResize, }) => { const [clientY, setClientY] = useState(0) const [isResizing, setIsResizing] = useState(false) @@ -80,11 +82,13 @@ const PromptEditorHeightResizeWrap: FC = ({ {/* resize handler */} {footer} -
-
-
+ {!hideResize && ( +
+
+
+ )} ) } diff --git a/web/app/components/base/icons/assets/vender/line/arrows/collapse-04.svg b/web/app/components/base/icons/assets/vender/line/arrows/collapse-04.svg new file mode 100644 index 0000000000..b794eeaac6 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/line/arrows/collapse-04.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/app/components/base/icons/src/vender/line/arrows/Collapse04.json b/web/app/components/base/icons/src/vender/line/arrows/Collapse04.json new file mode 100644 index 0000000000..eb6d08c213 --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/arrows/Collapse04.json @@ -0,0 +1,29 @@ +{ + "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 diff --git a/web/app/components/base/icons/src/vender/line/arrows/Collapse04.tsx b/web/app/components/base/icons/src/vender/line/arrows/Collapse04.tsx new file mode 100644 index 0000000000..05c0f4901d --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/arrows/Collapse04.tsx @@ -0,0 +1,16 @@ +// 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, Omit>(( + props, + ref, +) => ) + +Icon.displayName = 'Collapse04' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/line/arrows/index.ts b/web/app/components/base/icons/src/vender/line/arrows/index.ts index e0b3aead10..b091430a10 100644 --- a/web/app/components/base/icons/src/vender/line/arrows/index.ts +++ b/web/app/components/base/icons/src/vender/line/arrows/index.ts @@ -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' diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx index 149c8525ff..b35b4c71f9 100644 --- a/web/app/components/base/prompt-editor/index.tsx +++ b/web/app/components/base/prompt-editor/index.tsx @@ -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 = ({ className, + style, value, editable = true, onChange, @@ -158,7 +160,7 @@ const PromptEditor: FC = ({
} + contentEditable={} placeholder={} ErrorBoundary={LexicalErrorBoundary} /> diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx index fee69100c3..e685886eb8 100644 --- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx +++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx @@ -1,14 +1,14 @@ '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,93 +40,101 @@ const Editor: FC = ({ 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(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 ( -
-
-
-
{title}
-
-
{value.length}
-
- {/* Operations */} -
- {showRemove && ( - - )} - {!isCopied - ? ( - - ) - : ( - - ) - } - -
+
+
+
+
+
{title}
+
+
{value.length}
+
+ {/* Operations */} +
+ {showRemove && ( + + )} + {!isCopied + ? ( + + ) + : ( + + ) + } + +
-
-
- - {isFocus - ?
{'{x} '}{t('workflow.nodes.common.insertVarTip')}
- :
}
- )} - > - { }, - }} - variableBlock={{ - variables: variables.map(item => ({ - name: item, - value: item, - })), - externalTools: [], - onAddExternalTool: () => { }, - }} - historyBlock={{ - show: true, - selectable: true, - history: { - user: 'user', - assistant: 'xxx', - }, - onEditRole: () => { }, - }} - queryBlock={{ - show: true, - selectable: true, - }} - onChange={onChange} - onBlur={setBlur} - onFocus={setFocus} - editable={!readOnly} - /> - +
+ + {isFocus + ?
{'{x} '}{t('workflow.nodes.common.insertVarTip')}
+ :
} +
+ )} + hideResize={isExpand} + > + { }, + }} + variableBlock={{ + variables: variables.map(item => ({ + name: item, + value: item, + })), + externalTools: [], + onAddExternalTool: () => { }, + }} + historyBlock={{ + show: true, + selectable: true, + history: { + user: 'user', + assistant: 'xxx', + }, + onEditRole: () => { }, + }} + queryBlock={{ + show: true, + selectable: true, + }} + onChange={onChange} + onBlur={setBlur} + onFocus={setFocus} + editable={!readOnly} + /> + +
+ ) } export default React.memo(Editor) diff --git a/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx b/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx new file mode 100644 index 0000000000..7e7b1b86c1 --- /dev/null +++ b/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx @@ -0,0 +1,25 @@ +'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 = ({ + isExpand, + onExpandChange, +}) => { + const handleToggle = useCallback(() => { + onExpandChange(!isExpand) + }, [isExpand]) + + const Icon = isExpand ? Collapse04 : Expand04 + return ( + + ) +} +export default React.memo(ExpandBtn)