chore: node help link (#4795)

web/app/components/base/icons/assets/vender/line/education/book-open-02.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="book-open-01">
+<path 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="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

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"
+}

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<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'BookOpen02'
+
+export default Icon

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'

web/app/components/workflow/node-contextmenu.tsx

@@ -36,6 +36,7 @@ const PanelContextmenu = () => {
         id={currentNode.id}
         data={currentNode.data}
         onClosePopup={() => handleNodeContextmenuCancel()}
+        showHelpLink
       />
     </div>
   )

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 (
+    <TooltipPlus popupContent={t('common.userProfile.helpCenter')}>
+      <a
+        href={link}
+        target='_blank'
+        className='flex items-center justify-center mr-1 w-6 h-6'
+      >
+        <BookOpen02 className='w-4 h-4 text-gray-500' />
+      </a>
+    </TooltipPlus>
+
+  )
+}
+
+export default memo(HelpLink)

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}
         />
       </PortalToFollowElemContent>
     </PortalToFollowElem>

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 (
     <div className='w-[240px] border-[0.5px] border-gray-200 rounded-lg shadow-xl bg-white'>
       {
@@ -157,20 +162,22 @@ const PanelOperatorPopup = ({
           </>
         )
       }
-      <div className='p-1'>
-        <a
-          href={
-            language === 'zh_Hans'
-              ? 'https://docs.dify.ai/v/zh-hans/guides/workflow'
-              : 'https://docs.dify.ai/features/workflow'
-          }
-          target='_blank'
-          className='flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
-        >
-          {t('workflow.panel.helpLink')}
-        </a>
-      </div>
-      <div className='h-[1px] bg-gray-100'></div>
+      {
+        showHelpLink && (
+          <>
+            <div className='p-1'>
+              <a
+                href={link}
+                target='_blank'
+                className='flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
+              >
+                {t('workflow.panel.helpLink')}
+              </a>
+            </div>
+            <div className='h-[1px] bg-gray-100'></div>
+          </>
+        )
+      }
       <div className='p-1'>
         <div className='px-3 py-2 text-xs text-gray-500'>
           <div className='flex items-center mb-1 h-[22px] font-medium'>

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]}`
+}

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<BasePanelProps> = ({
                   </TooltipPlus>
                 )
               }
-              <PanelOperator id={id} data={data} />
+              <HelpLink nodeType={data.type} />
+              <PanelOperator id={id} data={data} showHelpLink={false} />
               <div className='mx-3 w-[1px] h-3.5 bg-gray-200' />
               <div
                 className='flex items-center justify-center w-6 h-6 cursor-pointer'