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 0000000000..7d2df058c5 --- /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 0000000000..300b782c27 --- /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 0000000000..81a6d4221c --- /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 db44daf715..d6837ba5fb 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 b9600665df..adfed37b26 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 0000000000..ab2f2368cf --- /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 d6913db526..a42acf25d7 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 6f4ad867b6..aade4d8be8 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 = ({ ) } -
- - {t('workflow.panel.helpLink')} - -
-
+ { + showHelpLink && ( + <> +
+ + {t('workflow.panel.helpLink')} + +
+
+ + ) + }
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 0000000000..68bf6b07b0 --- /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 44539a7f56..a6d3d6a2aa 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 = ({ ) } - + +