From 5b2cd8d03a1343a6c311a25f0f5f3e878168388c Mon Sep 17 00:00:00 2001 From: zxhlyh Date: Thu, 30 May 2024 14:24:53 +0800 Subject: [PATCH] chore: node help link (#4795) --- .../vender/line/education/book-open-02.svg | 5 ++ .../src/vender/line/education/BookOpen02.json | 39 ++++++++++++++ .../src/vender/line/education/BookOpen02.tsx | 16 ++++++ .../icons/src/vender/line/education/index.ts | 1 + .../components/workflow/node-contextmenu.tsx | 1 + .../nodes/_base/components/help-link.tsx | 31 +++++++++++ .../_base/components/panel-operator/index.tsx | 3 ++ .../panel-operator/panel-operator-popup.tsx | 35 +++++++----- .../nodes/_base/hooks/use-node-help-link.ts | 54 +++++++++++++++++++ .../components/workflow/nodes/_base/panel.tsx | 4 +- 10 files changed, 174 insertions(+), 15 deletions(-) create mode 100644 web/app/components/base/icons/assets/vender/line/education/book-open-02.svg create mode 100644 web/app/components/base/icons/src/vender/line/education/BookOpen02.json create mode 100644 web/app/components/base/icons/src/vender/line/education/BookOpen02.tsx create mode 100644 web/app/components/workflow/nodes/_base/components/help-link.tsx create mode 100644 web/app/components/workflow/nodes/_base/hooks/use-node-help-link.ts diff --git a/web/app/components/base/icons/assets/vender/line/education/book-open-02.svg b/web/app/components/base/icons/assets/vender/line/education/book-open-02.svg new file mode 100644 index 000000000..7d2df058c --- /dev/null +++ b/web/app/components/base/icons/assets/vender/line/education/book-open-02.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/app/components/base/icons/src/vender/line/education/BookOpen02.json b/web/app/components/base/icons/src/vender/line/education/BookOpen02.json new file mode 100644 index 000000000..300b782c2 --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/education/BookOpen02.json @@ -0,0 +1,39 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "16", + "height": "16", + "viewBox": "0 0 16 16", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "book-open-01" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "id": "Icon", + "d": "M8.00065 14L7.93395 13.8999C7.47085 13.2053 7.23931 12.858 6.93339 12.6065C6.66256 12.3839 6.35049 12.2169 6.01505 12.1151C5.63615 12 5.21872 12 4.38387 12H3.46732C2.72058 12 2.34721 12 2.062 11.8547C1.81111 11.7268 1.60714 11.5229 1.47931 11.272C1.33398 10.9868 1.33398 10.6134 1.33398 9.86667V4.13333C1.33398 3.3866 1.33398 3.01323 1.47931 2.72801C1.60714 2.47713 1.81111 2.27316 2.062 2.14532C2.34721 2 2.72058 2 3.46732 2H3.73398C5.22746 2 5.97419 2 6.54463 2.29065C7.04639 2.54631 7.45434 2.95426 7.71 3.45603C8.00065 4.02646 8.00065 4.77319 8.00065 6.26667M8.00065 14V6.26667M8.00065 14L8.06735 13.8999C8.53045 13.2053 8.762 12.858 9.06792 12.6065C9.33875 12.3839 9.65081 12.2169 9.98625 12.1151C10.3652 12 10.7826 12 11.6174 12H12.534C13.2807 12 13.6541 12 13.9393 11.8547C14.1902 11.7268 14.3942 11.5229 14.522 11.272C14.6673 10.9868 14.6673 10.6134 14.6673 9.86667V4.13333C14.6673 3.3866 14.6673 3.01323 14.522 2.72801C14.3942 2.47713 14.1902 2.27316 13.9393 2.14532C13.6541 2 13.2807 2 12.534 2H12.2673C10.7738 2 10.0271 2 9.45668 2.29065C8.95491 2.54631 8.54696 2.95426 8.2913 3.45603C8.00065 4.02646 8.00065 4.77319 8.00065 6.26667", + "stroke": "currentColor", + "stroke-width": "1.5", + "stroke-linecap": "round", + "stroke-linejoin": "round" + }, + "children": [] + } + ] + } + ] + }, + "name": "BookOpen02" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/line/education/BookOpen02.tsx b/web/app/components/base/icons/src/vender/line/education/BookOpen02.tsx new file mode 100644 index 000000000..81a6d4221 --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/education/BookOpen02.tsx @@ -0,0 +1,16 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './BookOpen02.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 = 'BookOpen02' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/line/education/index.ts b/web/app/components/base/icons/src/vender/line/education/index.ts index db44daf71..d6837ba5f 100644 --- a/web/app/components/base/icons/src/vender/line/education/index.ts +++ b/web/app/components/base/icons/src/vender/line/education/index.ts @@ -1 +1,2 @@ export { default as BookOpen01 } from './BookOpen01' +export { default as BookOpen02 } from './BookOpen02' diff --git a/web/app/components/workflow/node-contextmenu.tsx b/web/app/components/workflow/node-contextmenu.tsx index b9600665d..adfed37b2 100644 --- a/web/app/components/workflow/node-contextmenu.tsx +++ b/web/app/components/workflow/node-contextmenu.tsx @@ -36,6 +36,7 @@ const PanelContextmenu = () => { id={currentNode.id} data={currentNode.data} onClosePopup={() => handleNodeContextmenuCancel()} + showHelpLink /> ) diff --git a/web/app/components/workflow/nodes/_base/components/help-link.tsx b/web/app/components/workflow/nodes/_base/components/help-link.tsx new file mode 100644 index 000000000..ab2f2368c --- /dev/null +++ b/web/app/components/workflow/nodes/_base/components/help-link.tsx @@ -0,0 +1,31 @@ +import { memo } from 'react' +import { useTranslation } from 'react-i18next' +import { useNodeHelpLink } from '../hooks/use-node-help-link' +import TooltipPlus from '@/app/components/base/tooltip-plus' +import { BookOpen02 } from '@/app/components/base/icons/src/vender/line/education' +import type { BlockEnum } from '@/app/components/workflow/types' + +type HelpLinkProps = { + nodeType: BlockEnum +} +const HelpLink = ({ + nodeType, +}: HelpLinkProps) => { + const { t } = useTranslation() + const link = useNodeHelpLink(nodeType) + + return ( + + + + + + + ) +} + +export default memo(HelpLink) diff --git a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx index d6913db52..a42acf25d 100644 --- a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx +++ b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx @@ -20,6 +20,7 @@ type PanelOperatorProps = { offset?: OffsetOptions onOpenChange?: (open: boolean) => void inNode?: boolean + showHelpLink?: boolean } const PanelOperator = ({ id, @@ -31,6 +32,7 @@ const PanelOperator = ({ }, onOpenChange, inNode, + showHelpLink = true, }: PanelOperatorProps) => { const [open, setOpen] = useState(false) @@ -65,6 +67,7 @@ const PanelOperator = ({ id={id} data={data} onClosePopup={() => setOpen(false)} + showHelpLink={showHelpLink} /> diff --git a/web/app/components/workflow/nodes/_base/components/panel-operator/panel-operator-popup.tsx b/web/app/components/workflow/nodes/_base/components/panel-operator/panel-operator-popup.tsx index 6f4ad867b..aade4d8be 100644 --- a/web/app/components/workflow/nodes/_base/components/panel-operator/panel-operator-popup.tsx +++ b/web/app/components/workflow/nodes/_base/components/panel-operator/panel-operator-popup.tsx @@ -4,6 +4,7 @@ import { } from 'react' import { useTranslation } from 'react-i18next' import { useEdges } from 'reactflow' +import { useNodeHelpLink } from '../../hooks/use-node-help-link' import ChangeBlock from './change-block' import { canRunBySingle, @@ -26,11 +27,13 @@ type PanelOperatorPopupProps = { id: string data: Node['data'] onClosePopup: () => void + showHelpLink?: boolean } const PanelOperatorPopup = ({ id, data, onClosePopup, + showHelpLink, }: PanelOperatorPopupProps) => { const { t } = useTranslation() const language = useGetLanguage() @@ -77,6 +80,8 @@ const PanelOperatorPopup = ({ const showChangeBlock = data.type !== BlockEnum.Start && !nodesReadOnly && data.type !== BlockEnum.Iteration + const link = useNodeHelpLink(data.type) + return (
{ @@ -157,20 +162,22 @@ const PanelOperatorPopup = ({ ) } - -
+ { + showHelpLink && ( + <> + +
+ + ) + }
diff --git a/web/app/components/workflow/nodes/_base/hooks/use-node-help-link.ts b/web/app/components/workflow/nodes/_base/hooks/use-node-help-link.ts new file mode 100644 index 000000000..68bf6b07b --- /dev/null +++ b/web/app/components/workflow/nodes/_base/hooks/use-node-help-link.ts @@ -0,0 +1,54 @@ +import { useMemo } from 'react' +import { useGetLanguage } from '@/context/i18n' +import { BlockEnum } from '@/app/components/workflow/types' + +export const useNodeHelpLink = (nodeType: BlockEnum) => { + const language = useGetLanguage() + const prefixLink = useMemo(() => { + if (language === 'zh_Hans') + return 'https://docs.dify.ai/v/zh-hans/guides/workflow/node/' + + return 'https://docs.dify.ai/features/workflow/node/' + }, [language]) + const linkMap = useMemo(() => { + if (language === 'zh_Hans') { + return { + [BlockEnum.Start]: 'start', + [BlockEnum.End]: 'end', + [BlockEnum.Answer]: 'answer', + [BlockEnum.LLM]: 'llm', + [BlockEnum.KnowledgeRetrieval]: 'knowledge_retrieval', + [BlockEnum.QuestionClassifier]: 'question_classifier', + [BlockEnum.IfElse]: 'ifelse', + [BlockEnum.Code]: 'code', + [BlockEnum.TemplateTransform]: 'template', + [BlockEnum.VariableAssigner]: 'variable_assigner', + [BlockEnum.VariableAggregator]: 'variable_assigner', + [BlockEnum.Iteration]: 'iteration', + [BlockEnum.ParameterExtractor]: 'parameter_extractor', + [BlockEnum.HttpRequest]: 'http_request', + [BlockEnum.Tool]: 'tools', + } + } + + return { + [BlockEnum.Start]: 'start', + [BlockEnum.End]: 'end', + [BlockEnum.Answer]: 'answer', + [BlockEnum.LLM]: 'llm', + [BlockEnum.KnowledgeRetrieval]: 'knowledge-retrieval', + [BlockEnum.QuestionClassifier]: 'question-classifier', + [BlockEnum.IfElse]: 'if-else', + [BlockEnum.Code]: 'code', + [BlockEnum.TemplateTransform]: 'template', + [BlockEnum.VariableAssigner]: 'variable-assigner', + [BlockEnum.VariableAggregator]: 'variable-assigner', + [BlockEnum.Iteration]: 'iteration', + [BlockEnum.ParameterExtractor]: 'parameter-extractor', + [BlockEnum.HttpRequest]: 'http-request', + [BlockEnum.Tool]: 'tools', + } + }, [language]) + + return `${prefixLink}${linkMap[nodeType]}` +} diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/panel.tsx index 44539a7f5..a6d3d6a2a 100644 --- a/web/app/components/workflow/nodes/_base/panel.tsx +++ b/web/app/components/workflow/nodes/_base/panel.tsx @@ -12,6 +12,7 @@ import { useShallow } from 'zustand/react/shallow' import { useTranslation } from 'react-i18next' import NextStep from './components/next-step' import PanelOperator from './components/panel-operator' +import HelpLink from './components/help-link' import { DescriptionInput, TitleInput, @@ -134,7 +135,8 @@ const BasePanel: FC = ({ ) } - + +