chore: node help link (#4795)

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'