test/dify
1
0
Fork 0
mirror of https://gitee.com/dify_ai/dify.git synced 2024-11-30 18:27:53 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

chore: node help link (#4795)

Browse Source
This commit is contained in:
zxhlyh 2024-05-30 14:24:53 +08:00 committed by GitHub
parent b10e67be3b
commit 5b2cd8d03a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 174 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/app/components/base/icons/assets/vender/line/education/book-open-02.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

39
web/app/components/base/icons/src/vender/line/education/BookOpen02.json Normal file
View File

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

16
web/app/components/base/icons/src/vender/line/education/BookOpen02.tsx Normal file
View File

@ -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

1
web/app/components/base/icons/src/vender/line/education/index.ts
View File

@ -1 +1,2 @@
export { default as BookOpen01 } from './BookOpen01'
export { default as BookOpen02 } from './BookOpen02'

1
web/app/components/workflow/node-contextmenu.tsx
View File

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

31
web/app/components/workflow/nodes/_base/components/help-link.tsx Normal file
View File

@ -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)

3
web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
View File

@ -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>

35
web/app/components/workflow/nodes/_base/components/panel-operator/panel-operator-popup.tsx
View File

@ -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'>

54
web/app/components/workflow/nodes/_base/hooks/use-node-help-link.ts Normal file
View File

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

4
web/app/components/workflow/nodes/_base/panel.tsx
View File

@ -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'