@@ -91,10 +81,10 @@ const HeadersInput = ({
{t('tools.mcp.modal.headerKey')}
{t('tools.mcp.modal.headerValue')}
- {headerItems.map((item, index) => (
-
(
+
- {!readonly && headerItems.length > 1 && (
+ {!readonly && !!headersItems.length && (
handleRemoveItem(index)}
className='mr-2'
diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx
index 1d888c57e8..987a517ef5 100644
--- a/web/app/components/tools/mcp/modal.tsx
+++ b/web/app/components/tools/mcp/modal.tsx
@@ -1,6 +1,7 @@
'use client'
-import React, { useRef, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
+import { v4 as uuid } from 'uuid'
import { getDomain } from 'tldts'
import { RiCloseLine, RiEditLine } from '@remixicon/react'
import { Mcp } from '@/app/components/base/icons/src/vender/other'
@@ -11,6 +12,7 @@ import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button'
import Input from '@/app/components/base/input'
import HeadersInput from './headers-input'
+import type { HeaderItem } from './headers-input'
import type { AppIconType } from '@/types/app'
import type { ToolWithProvider } from '@/app/components/workflow/types'
import { noop } from 'lodash-es'
@@ -19,6 +21,9 @@ import { uploadRemoteFileInfo } from '@/service/common'
import cn from '@/utils/classnames'
import { useHover } from 'ahooks'
import { shouldUseMcpIconForAppIcon } from '@/utils/mcp'
+import TabSlider from '@/app/components/base/tab-slider'
+import { MCPAuthMethod } from '@/app/components/tools/types'
+import Switch from '@/app/components/base/switch'
export type DuplicateAppModalProps = {
data?: ToolWithProvider
@@ -30,9 +35,17 @@ export type DuplicateAppModalProps = {
icon: string
icon_background?: string | null
server_identifier: string
- timeout: number
- sse_read_timeout: number
headers?: Record
+ is_dynamic_registration?: boolean
+ authentication?: {
+ client_id?: string
+ client_secret?: string
+ grant_type?: string
+ }
+ configuration: {
+ timeout: number
+ sse_read_timeout: number
+ }
}) => void
onHide: () => void
}
@@ -63,6 +76,20 @@ const MCPModal = ({
const { t } = useTranslation()
const isCreate = !data
+ const authMethods = [
+ {
+ text: t('tools.mcp.modal.authentication'),
+ value: MCPAuthMethod.authentication,
+ },
+ {
+ text: t('tools.mcp.modal.headers'),
+ value: MCPAuthMethod.headers,
+ },
+ {
+ text: t('tools.mcp.modal.configurations'),
+ value: MCPAuthMethod.configurations,
+ },
+ ]
const originalServerUrl = data?.server_url
const originalServerID = data?.server_identifier
const [url, setUrl] = React.useState(data?.server_url || '')
@@ -72,12 +99,16 @@ const MCPModal = ({
const [serverIdentifier, setServerIdentifier] = React.useState(data?.server_identifier || '')
const [timeout, setMcpTimeout] = React.useState(data?.timeout || 30)
const [sseReadTimeout, setSseReadTimeout] = React.useState(data?.sse_read_timeout || 300)
- const [headers, setHeaders] = React.useState>(
- data?.masked_headers || {},
+ const [headers, setHeaders] = React.useState(
+ Object.entries(data?.masked_headers || {}).map(([key, value]) => ({ id: uuid(), key, value })),
)
const [isFetchingIcon, setIsFetchingIcon] = useState(false)
const appIconRef = useRef(null)
const isHovering = useHover(appIconRef)
+ const [authMethod, setAuthMethod] = useState(MCPAuthMethod.authentication)
+ const [isDynamicRegistration, setIsDynamicRegistration] = useState(isCreate ? true : data?.is_dynamic_registration)
+ const [clientID, setClientID] = useState(data?.authentication?.client_id || '')
+ const [credentials, setCredentials] = useState(data?.authentication?.client_secret || '')
// Update states when data changes (for edit mode)
React.useEffect(() => {
@@ -87,8 +118,11 @@ const MCPModal = ({
setServerIdentifier(data.server_identifier || '')
setMcpTimeout(data.timeout || 30)
setSseReadTimeout(data.sse_read_timeout || 300)
- setHeaders(data.masked_headers || {})
+ setHeaders(Object.entries(data.masked_headers || {}).map(([key, value]) => ({ id: uuid(), key, value })))
setAppIcon(getIcon(data))
+ setIsDynamicRegistration(data.is_dynamic_registration)
+ setClientID(data.authentication?.client_id || '')
+ setCredentials(data.authentication?.client_secret || '')
}
else {
// Reset for create mode
@@ -97,8 +131,11 @@ const MCPModal = ({
setServerIdentifier('')
setMcpTimeout(30)
setSseReadTimeout(300)
- setHeaders({})
+ setHeaders([])
setAppIcon(DEFAULT_ICON as AppIconSelection)
+ setIsDynamicRegistration(true)
+ setClientID('')
+ setCredentials('')
}
}, [data])
@@ -150,6 +187,11 @@ const MCPModal = ({
Toast.notify({ type: 'error', message: 'invalid server identifier' })
return
}
+ const formattedHeaders = headers.reduce((acc, item) => {
+ if (item.key.trim())
+ acc[item.key.trim()] = item.value
+ return acc
+ }, {} as Record)
await onConfirm({
server_url: originalServerUrl === url ? '[__HIDDEN__]' : url.trim(),
name,
@@ -157,14 +199,25 @@ const MCPModal = ({
icon: appIcon.type === 'emoji' ? appIcon.icon : appIcon.fileId,
icon_background: appIcon.type === 'emoji' ? appIcon.background : undefined,
server_identifier: serverIdentifier.trim(),
- timeout: timeout || 30,
- sse_read_timeout: sseReadTimeout || 300,
- headers: Object.keys(headers).length > 0 ? headers : undefined,
+ headers: Object.keys(formattedHeaders).length > 0 ? formattedHeaders : undefined,
+ is_dynamic_registration: isDynamicRegistration,
+ authentication: {
+ client_id: clientID,
+ client_secret: credentials,
+ },
+ configuration: {
+ timeout: timeout || 30,
+ sse_read_timeout: sseReadTimeout || 300,
+ },
})
if(isCreate)
onHide()
}
+ const handleAuthMethodChange = useCallback((value: string) => {
+ setAuthMethod(value as MCPAuthMethod)
+ }, [])
+
return (
<>
)}
-
-
- {t('tools.mcp.modal.timeout')}
-
-
setMcpTimeout(Number(e.target.value))}
- onBlur={e => handleBlur(e.target.value.trim())}
- placeholder={t('tools.mcp.modal.timeoutPlaceholder')}
- />
-
-
-
- {t('tools.mcp.modal.sseReadTimeout')}
-
-
setSseReadTimeout(Number(e.target.value))}
- onBlur={e => handleBlur(e.target.value.trim())}
- placeholder={t('tools.mcp.modal.timeoutPlaceholder')}
- />
-
-
-
- {t('tools.mcp.modal.headers')}
-
-
{t('tools.mcp.modal.headersTip')}
-
0}
- />
-
+
{
+ return `flex-1 ${isActive && 'text-text-accent-light-mode-only'}`
+ }}
+ value={authMethod}
+ onChange={handleAuthMethodChange}
+ options={authMethods}
+ />
+ {
+ authMethod === MCPAuthMethod.authentication && (
+ <>
+
+
+
+ {t('tools.mcp.modal.useDynamicClientRegistration')}
+
+
+
+ {t('tools.mcp.modal.clientID')}
+
+
setClientID(e.target.value)}
+ onBlur={e => handleBlur(e.target.value.trim())}
+ placeholder={t('tools.mcp.modal.clientID')}
+ disabled={isDynamicRegistration}
+ />
+
+
+ {t('tools.mcp.modal.clientSecret')}
+
+
setCredentials(e.target.value)}
+ onBlur={e => handleBlur(e.target.value.trim())}
+ placeholder={t('tools.mcp.modal.clientSecretPlaceholder')}
+ disabled={isDynamicRegistration}
+ />
+
+
+ {t('tools.mcp.modal.headers')}
+
+
{t('tools.mcp.modal.headersTip')}
+
item.key.trim()).length > 0}
+ />
+
+
+ {t('tools.mcp.modal.timeout')}
+
+
setMcpTimeout(Number(e.target.value))}
+ onBlur={e => handleBlur(e.target.value.trim())}
+ placeholder={t('tools.mcp.modal.timeoutPlaceholder')}
+ />
+
+
+ {t('tools.mcp.modal.sseReadTimeout')}
+
+
setSseReadTimeout(Number(e.target.value))}
+ onBlur={e => handleBlur(e.target.value.trim())}
+ placeholder={t('tools.mcp.modal.timeoutPlaceholder')}
+ />
+
diff --git a/web/app/components/tools/types.ts b/web/app/components/tools/types.ts
index 623a7b6d8a..1bfccc04e5 100644
--- a/web/app/components/tools/types.ts
+++ b/web/app/components/tools/types.ts
@@ -65,6 +65,15 @@ export type Collection = {
masked_headers?: Record
is_authorized?: boolean
provider?: string
+ is_dynamic_registration?: boolean
+ authentication?: {
+ client_id?: string
+ client_secret?: string
+ }
+ configuration?: {
+ timeout?: number
+ sse_read_timeout?: number
+ }
}
export type ToolParameter = {
@@ -192,3 +201,9 @@ export type MCPServerDetail = {
parameters?: Record
headers?: Record
}
+
+export enum MCPAuthMethod {
+ authentication = 'authentication',
+ headers = 'headers',
+ configurations = 'configurations',
+}
diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index 6a2e07a411..7db8b9acf5 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -25,7 +25,7 @@ import PluginList, { type ListProps } from '@/app/components/workflow/block-sele
import { PluginType } from '../../plugins/types'
import { useMarketplacePlugins } from '../../plugins/marketplace/hooks'
import { useGlobalPublicStore } from '@/context/global-public-context'
-import RAGToolSuggestions from './rag-tool-suggestions'
+import RAGToolRecommendations from './rag-tool-recommendations'
type AllToolsProps = {
className?: string
@@ -148,7 +148,7 @@ const AllTools = ({
onScroll={pluginRef.current?.handleScroll}
>
{isShowRAGRecommendations && (
- >
}
-const RAGToolSuggestions: React.FC = ({
+const RAGToolRecommendations = ({
viewType,
onSelect,
onTagsChange,
-}) => {
+}: RAGToolRecommendationsProps) => {
const { t } = useTranslation()
const {
data: ragRecommendedPlugins,
+ isLoading: isLoadingRAGRecommendedPlugins,
isFetching: isFetchingRAGRecommendedPlugins,
} = useRAGRecommendedPlugins()
const recommendedPlugins = useMemo(() => {
if (ragRecommendedPlugins)
- return [...ragRecommendedPlugins.installed_recommended_plugins]
+ return ragRecommendedPlugins.installed_recommended_plugins
+ return []
+ }, [ragRecommendedPlugins])
+
+ const unInstalledPlugins = useMemo(() => {
+ if (ragRecommendedPlugins)
+ return (ragRecommendedPlugins.uninstalled_recommended_plugins).map(getFormattedPlugin)
return []
}, [ragRecommendedPlugins])
@@ -48,15 +55,16 @@ const RAGToolSuggestions: React.FC = ({
{t('pipeline.ragToolSuggestions.title')}
- {isFetchingRAGRecommendedPlugins && (
+ {/* For first time loading, show loading */}
+ {isLoadingRAGRecommendedPlugins && (
)}
- {!isFetchingRAGRecommendedPlugins && recommendedPlugins.length === 0 && (
+ {!isFetchingRAGRecommendedPlugins && recommendedPlugins.length === 0 && unInstalledPlugins.length === 0 && (
= ({
/>
)}
- {!isFetchingRAGRecommendedPlugins && recommendedPlugins.length > 0 && (
+ {(recommendedPlugins.length > 0 || unInstalledPlugins.length > 0) && (
<>
-
= ({
)
}
-export default React.memo(RAGToolSuggestions)
+export default React.memo(RAGToolRecommendations)
diff --git a/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx b/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx
new file mode 100644
index 0000000000..19378caf48
--- /dev/null
+++ b/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx
@@ -0,0 +1,102 @@
+import {
+ useMemo,
+ useRef,
+} from 'react'
+import type { BlockEnum, ToolWithProvider } from '../../types'
+import type { ToolDefaultValue } from '../types'
+import { ViewType } from '../view-type-select'
+import { useGetLanguage } from '@/context/i18n'
+import { groupItems } from '../index-bar'
+import cn from '@/utils/classnames'
+import ToolListTreeView from '../tool/tool-list-tree-view/list'
+import ToolListFlatView from '../tool/tool-list-flat-view/list'
+import UninstalledItem from './uninstalled-item'
+import type { Plugin } from '@/app/components/plugins/types'
+
+type ListProps = {
+ onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+ tools: ToolWithProvider[]
+ viewType: ViewType
+ unInstalledPlugins: Plugin[]
+ className?: string
+}
+
+const List = ({
+ onSelect,
+ tools,
+ viewType,
+ unInstalledPlugins,
+ className,
+}: ListProps) => {
+ const language = useGetLanguage()
+ const isFlatView = viewType === ViewType.flat
+
+ const { letters, groups: withLetterAndGroupViewToolsData } = groupItems(tools, tool => tool.label[language][0])
+ const treeViewToolsData = useMemo(() => {
+ const result: Record
= {}
+ Object.keys(withLetterAndGroupViewToolsData).forEach((letter) => {
+ Object.keys(withLetterAndGroupViewToolsData[letter]).forEach((groupName) => {
+ if (!result[groupName])
+ result[groupName] = []
+ result[groupName].push(...withLetterAndGroupViewToolsData[letter][groupName])
+ })
+ })
+ return result
+ }, [withLetterAndGroupViewToolsData])
+
+ const listViewToolData = useMemo(() => {
+ const result: ToolWithProvider[] = []
+ letters.forEach((letter) => {
+ Object.keys(withLetterAndGroupViewToolsData[letter]).forEach((groupName) => {
+ result.push(...withLetterAndGroupViewToolsData[letter][groupName].map((item) => {
+ return {
+ ...item,
+ letter,
+ }
+ }))
+ })
+ })
+
+ return result
+ }, [withLetterAndGroupViewToolsData, letters])
+
+ const toolRefs = useRef({})
+
+ return (
+
+ {!!tools.length && (
+ isFlatView ? (
+
+ ) : (
+
+ )
+ )}
+ {
+ unInstalledPlugins.map((item) => {
+ return (
+
+ )
+ })
+ }
+
+ )
+}
+
+export default List
diff --git a/web/app/components/workflow/block-selector/rag-tool-recommendations/uninstalled-item.tsx b/web/app/components/workflow/block-selector/rag-tool-recommendations/uninstalled-item.tsx
new file mode 100644
index 0000000000..98395ec25a
--- /dev/null
+++ b/web/app/components/workflow/block-selector/rag-tool-recommendations/uninstalled-item.tsx
@@ -0,0 +1,63 @@
+'use client'
+import React from 'react'
+import { useContext } from 'use-context-selector'
+import { useTranslation } from 'react-i18next'
+import type { Plugin } from '@/app/components/plugins/types'
+import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
+import I18n from '@/context/i18n'
+import { useBoolean } from 'ahooks'
+import { BlockEnum } from '../../types'
+import BlockIcon from '../../block-icon'
+
+type UninstalledItemProps = {
+ payload: Plugin
+}
+
+const UninstalledItem = ({
+ payload,
+}: UninstalledItemProps) => {
+ const { t } = useTranslation()
+ const { locale } = useContext(I18n)
+
+ const getLocalizedText = (obj: Record | undefined) =>
+ obj?.[locale] || obj?.['en-US'] || obj?.en_US || ''
+ const [isShowInstallModal, {
+ setTrue: showInstallModal,
+ setFalse: hideInstallModal,
+ }] = useBoolean(false)
+
+ return (
+
+
+
+
+
+ {getLocalizedText(payload.label)}
+
+
+ {payload.org}
+
+
+
+ {t('plugin.installAction')}
+
+ {isShowInstallModal && (
+
+ )}
+
+
+ {t(`${i18nPrefix}.flattenOutputDesc`)}
}
+ inline
+ >
+
+
+
)
}
diff --git a/web/app/components/workflow/nodes/iteration/types.ts b/web/app/components/workflow/nodes/iteration/types.ts
index 9a68050d6f..f35b838b83 100644
--- a/web/app/components/workflow/nodes/iteration/types.ts
+++ b/web/app/components/workflow/nodes/iteration/types.ts
@@ -17,5 +17,6 @@ export type IterationNodeType = CommonNodeType & {
is_parallel: boolean // open the parallel mode or not
parallel_nums: number // the numbers of parallel
error_handle_mode: ErrorHandleMode // how to handle error in the iteration
+ flatten_output: boolean // whether to flatten the output array if all elements are lists
_isShowTips: boolean // when answer node in parallel mode iteration show tips
}
diff --git a/web/app/components/workflow/nodes/iteration/use-config.ts b/web/app/components/workflow/nodes/iteration/use-config.ts
index 5d449a4756..2e47bb3740 100644
--- a/web/app/components/workflow/nodes/iteration/use-config.ts
+++ b/web/app/components/workflow/nodes/iteration/use-config.ts
@@ -15,6 +15,12 @@ import type { Item } from '@/app/components/base/select'
import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
import { isEqual } from 'lodash-es'
import { useStore } from '../../store'
+import {
+ useAllBuiltInTools,
+ useAllCustomTools,
+ useAllMCPTools,
+ useAllWorkflowTools,
+} from '@/service/use-tools'
const useConfig = (id: string, payload: IterationNodeType) => {
const {
@@ -40,17 +46,17 @@ const useConfig = (id: string, payload: IterationNodeType) => {
// output
const { getIterationNodeChildren } = useWorkflow()
const iterationChildrenNodes = getIterationNodeChildren(id)
- const buildInTools = useStore(s => s.buildInTools)
- const customTools = useStore(s => s.customTools)
- const workflowTools = useStore(s => s.workflowTools)
- const mcpTools = useStore(s => s.mcpTools)
+ const { data: buildInTools } = useAllBuiltInTools()
+ const { data: customTools } = useAllCustomTools()
+ const { data: workflowTools } = useAllWorkflowTools()
+ const { data: mcpTools } = useAllMCPTools()
const dataSourceList = useStore(s => s.dataSourceList)
const allPluginInfoList = {
- buildInTools,
- customTools,
- workflowTools,
- mcpTools,
- dataSourceList: dataSourceList ?? [],
+ buildInTools: buildInTools || [],
+ customTools: customTools || [],
+ workflowTools: workflowTools || [],
+ mcpTools: mcpTools || [],
+ dataSourceList: dataSourceList || [],
}
const childrenNodeVars = toNodeOutputVars(iterationChildrenNodes, isChatMode, undefined, [], [], [], allPluginInfoList)
@@ -98,6 +104,14 @@ const useConfig = (id: string, payload: IterationNodeType) => {
})
setInputs(newInputs)
}, [inputs, setInputs])
+
+ const changeFlattenOutput = useCallback((value: boolean) => {
+ const newInputs = produce(inputs, (draft) => {
+ draft.flatten_output = value
+ })
+ setInputs(newInputs)
+ }, [inputs, setInputs])
+
return {
readOnly,
inputs,
@@ -109,6 +123,7 @@ const useConfig = (id: string, payload: IterationNodeType) => {
changeParallel,
changeErrorResponseMode,
changeParallelNums,
+ changeFlattenOutput,
}
}
diff --git a/web/app/components/workflow/nodes/loop/use-config.ts b/web/app/components/workflow/nodes/loop/use-config.ts
index fcf437eb96..e8504fb5e9 100644
--- a/web/app/components/workflow/nodes/loop/use-config.ts
+++ b/web/app/components/workflow/nodes/loop/use-config.ts
@@ -15,9 +15,24 @@ import useNodeCrud from '../_base/hooks/use-node-crud'
import { toNodeOutputVars } from '../_base/components/variable/utils'
import { getOperators } from './utils'
import { LogicalOperator } from './types'
-import type { HandleAddCondition, HandleAddSubVariableCondition, HandleRemoveCondition, HandleToggleConditionLogicalOperator, HandleToggleSubVariableConditionLogicalOperator, HandleUpdateCondition, HandleUpdateSubVariableCondition, LoopNodeType } from './types'
+import type {
+ HandleAddCondition,
+ HandleAddSubVariableCondition,
+ HandleRemoveCondition,
+ HandleToggleConditionLogicalOperator,
+ HandleToggleSubVariableConditionLogicalOperator,
+ HandleUpdateCondition,
+ HandleUpdateSubVariableCondition,
+ LoopNodeType,
+} from './types'
import useIsVarFileAttribute from './use-is-var-file-attribute'
import { useStore } from '@/app/components/workflow/store'
+import {
+ useAllBuiltInTools,
+ useAllCustomTools,
+ useAllMCPTools,
+ useAllWorkflowTools,
+} from '@/service/use-tools'
const useConfig = (id: string, payload: LoopNodeType) => {
const { nodesReadOnly: readOnly } = useNodesReadOnly()
@@ -38,17 +53,17 @@ const useConfig = (id: string, payload: LoopNodeType) => {
// output
const { getLoopNodeChildren } = useWorkflow()
const loopChildrenNodes = [{ id, data: payload } as any, ...getLoopNodeChildren(id)]
- const buildInTools = useStore(s => s.buildInTools)
- const customTools = useStore(s => s.customTools)
- const workflowTools = useStore(s => s.workflowTools)
- const mcpTools = useStore(s => s.mcpTools)
+ const { data: buildInTools } = useAllBuiltInTools()
+ const { data: customTools } = useAllCustomTools()
+ const { data: workflowTools } = useAllWorkflowTools()
+ const { data: mcpTools } = useAllMCPTools()
const dataSourceList = useStore(s => s.dataSourceList)
const allPluginInfoList = {
- buildInTools,
- customTools,
- workflowTools,
- mcpTools,
- dataSourceList: dataSourceList ?? [],
+ buildInTools: buildInTools || [],
+ customTools: customTools || [],
+ workflowTools: workflowTools || [],
+ mcpTools: mcpTools || [],
+ dataSourceList: dataSourceList || [],
}
const childrenNodeVars = toNodeOutputVars(loopChildrenNodes, isChatMode, undefined, [], conversationVariables, [], allPluginInfoList)
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
index d93d08a0ac..9392f28736 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
@@ -8,7 +8,6 @@ import { useTranslation } from 'react-i18next'
import BlockSelector from '../../../../block-selector'
import type { Param, ParamType } from '../../types'
import cn from '@/utils/classnames'
-import { useStore } from '@/app/components/workflow/store'
import type {
DataSourceDefaultValue,
ToolDefaultValue,
@@ -18,6 +17,11 @@ import { CollectionType } from '@/app/components/tools/types'
import type { BlockEnum } from '@/app/components/workflow/types'
import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
import { canFindTool } from '@/utils'
+import {
+ useAllBuiltInTools,
+ useAllCustomTools,
+ useAllWorkflowTools,
+} from '@/service/use-tools'
const i18nPrefix = 'workflow.nodes.parameterExtractor'
@@ -42,9 +46,9 @@ const ImportFromTool: FC
= ({
const { t } = useTranslation()
const language = useLanguage()
- const buildInTools = useStore(s => s.buildInTools)
- const customTools = useStore(s => s.customTools)
- const workflowTools = useStore(s => s.workflowTools)
+ const { data: buildInTools } = useAllBuiltInTools()
+ const { data: customTools } = useAllCustomTools()
+ const { data: workflowTools } = useAllWorkflowTools()
const handleSelectTool = useCallback((_type: BlockEnum, toolInfo?: ToolDefaultValue | DataSourceDefaultValue) => {
if (!toolInfo || 'datasource_name' in toolInfo)
@@ -54,11 +58,11 @@ const ImportFromTool: FC = ({
const currentTools = (() => {
switch (provider_type) {
case CollectionType.builtIn:
- return buildInTools
+ return buildInTools || []
case CollectionType.custom:
- return customTools
+ return customTools || []
case CollectionType.workflow:
- return workflowTools
+ return workflowTools || []
default:
return []
}
diff --git a/web/app/components/workflow/nodes/tool/use-config.ts b/web/app/components/workflow/nodes/tool/use-config.ts
index 5b8827936c..fe3fe543e9 100644
--- a/web/app/components/workflow/nodes/tool/use-config.ts
+++ b/web/app/components/workflow/nodes/tool/use-config.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { produce } from 'immer'
import { useBoolean } from 'ahooks'
-import { useStore, useWorkflowStore } from '../../store'
+import { useWorkflowStore } from '../../store'
import type { ToolNodeType, ToolVarInputs } from './types'
import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
@@ -15,15 +15,20 @@ import {
import Toast from '@/app/components/base/toast'
import type { InputVar } from '@/app/components/workflow/types'
import {
- useFetchToolsData,
useNodesReadOnly,
} from '@/app/components/workflow/hooks'
import { canFindTool } from '@/utils'
+import {
+ useAllBuiltInTools,
+ useAllCustomTools,
+ useAllMCPTools,
+ useAllWorkflowTools,
+ useInvalidToolsByType,
+} from '@/service/use-tools'
const useConfig = (id: string, payload: ToolNodeType) => {
const workflowStore = useWorkflowStore()
const { nodesReadOnly: readOnly } = useNodesReadOnly()
- const { handleFetchAllTools } = useFetchToolsData()
const { t } = useTranslation()
const language = useLanguage()
@@ -43,21 +48,21 @@ const useConfig = (id: string, payload: ToolNodeType) => {
tool_parameters,
} = inputs
const isBuiltIn = provider_type === CollectionType.builtIn
- const buildInTools = useStore(s => s.buildInTools)
- const customTools = useStore(s => s.customTools)
- const workflowTools = useStore(s => s.workflowTools)
- const mcpTools = useStore(s => s.mcpTools)
+ const { data: buildInTools } = useAllBuiltInTools()
+ const { data: customTools } = useAllCustomTools()
+ const { data: workflowTools } = useAllWorkflowTools()
+ const { data: mcpTools } = useAllMCPTools()
const currentTools = useMemo(() => {
switch (provider_type) {
case CollectionType.builtIn:
- return buildInTools
+ return buildInTools || []
case CollectionType.custom:
- return customTools
+ return customTools || []
case CollectionType.workflow:
- return workflowTools
+ return workflowTools || []
case CollectionType.mcp:
- return mcpTools
+ return mcpTools || []
default:
return []
}
@@ -75,6 +80,7 @@ const useConfig = (id: string, payload: ToolNodeType) => {
{ setTrue: showSetAuthModal, setFalse: hideSetAuthModal },
] = useBoolean(false)
+ const invalidToolsByType = useInvalidToolsByType(provider_type)
const handleSaveAuth = useCallback(
async (value: any) => {
await updateBuiltInToolCredential(currCollection?.name as string, value)
@@ -83,14 +89,14 @@ const useConfig = (id: string, payload: ToolNodeType) => {
type: 'success',
message: t('common.api.actionSuccess'),
})
- handleFetchAllTools(provider_type)
+ invalidToolsByType()
hideSetAuthModal()
},
[
currCollection?.name,
hideSetAuthModal,
t,
- handleFetchAllTools,
+ invalidToolsByType,
provider_type,
],
)
@@ -241,17 +247,15 @@ const useConfig = (id: string, payload: ToolNodeType) => {
name: outputKey,
type:
output.type === 'array'
- ? `Array[${
- output.items?.type
- ? output.items.type.slice(0, 1).toLocaleUpperCase()
- + output.items.type.slice(1)
- : 'Unknown'
+ ? `Array[${output.items?.type
+ ? output.items.type.slice(0, 1).toLocaleUpperCase()
+ + output.items.type.slice(1)
+ : 'Unknown'
}]`
- : `${
- output.type
- ? output.type.slice(0, 1).toLocaleUpperCase()
- + output.type.slice(1)
- : 'Unknown'
+ : `${output.type
+ ? output.type.slice(0, 1).toLocaleUpperCase()
+ + output.type.slice(1)
+ : 'Unknown'
}`,
description: output.description,
})
diff --git a/web/app/components/workflow/note-node/index.tsx b/web/app/components/workflow/note-node/index.tsx
index 7f2cde42d6..5a0b2677c1 100644
--- a/web/app/components/workflow/note-node/index.tsx
+++ b/web/app/components/workflow/note-node/index.tsx
@@ -1,6 +1,5 @@
import {
memo,
- useCallback,
useRef,
} from 'react'
import { useTranslation } from 'react-i18next'
@@ -51,10 +50,6 @@ const NoteNode = ({
} = useNodesInteractions()
const { handleNodeDataUpdateWithSyncDraft } = useNodeDataUpdate()
- const handleDeleteNode = useCallback(() => {
- handleNodeDelete(id)
- }, [id, handleNodeDelete])
-
useClickAway(() => {
handleNodeDataUpdateWithSyncDraft({ id, data: { selected: false } })
}, ref)
@@ -102,9 +97,9 @@ const NoteNode = ({
handleNodesCopy(id)}
+ onDuplicate={() => handleNodesDuplicate(id)}
+ onDelete={() => handleNodeDelete(id)}
showAuthor={data.showAuthor}
onShowAuthorChange={handleShowAuthorChange}
/>
diff --git a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
index 1a97357da5..6fba10bf81 100644
--- a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
@@ -12,7 +12,7 @@ import ConversationVariableModal from './conversation-variable-modal'
import { useChat } from './hooks'
import type { ChatWrapperRefType } from './index'
import Chat from '@/app/components/base/chat/chat'
-import type { ChatItem, ChatItemInTree, OnSend } from '@/app/components/base/chat/types'
+import type { ChatItem, OnSend } from '@/app/components/base/chat/types'
import { useFeatures } from '@/app/components/base/features/hooks'
import {
fetchSuggestedQuestions,
@@ -117,7 +117,7 @@ const ChatWrapper = (
)
}, [handleSend, workflowStore, conversationId, chatList, appDetail])
- const doRegenerate = useCallback((chatItem: ChatItemInTree, editedQuestion?: { message: string, files?: FileEntity[] }) => {
+ const doRegenerate = useCallback((chatItem: ChatItem, editedQuestion?: { message: string, files?: FileEntity[] }) => {
const question = editedQuestion ? chatItem : chatList.find(item => item.id === chatItem.parentMessageId)!
const parentAnswer = chatList.find(item => item.id === question.parentMessageId)
doSend(editedQuestion ? editedQuestion.message : question.content,
diff --git a/web/app/components/workflow/store/workflow/tool-slice.ts b/web/app/components/workflow/store/workflow/tool-slice.ts
index d6d89abcf0..c5180022fc 100644
--- a/web/app/components/workflow/store/workflow/tool-slice.ts
+++ b/web/app/components/workflow/store/workflow/tool-slice.ts
@@ -1,30 +1,11 @@
import type { StateCreator } from 'zustand'
-import type {
- ToolWithProvider,
-} from '@/app/components/workflow/types'
export type ToolSliceShape = {
- buildInTools: ToolWithProvider[]
- setBuildInTools: (tools: ToolWithProvider[]) => void
- customTools: ToolWithProvider[]
- setCustomTools: (tools: ToolWithProvider[]) => void
- workflowTools: ToolWithProvider[]
- setWorkflowTools: (tools: ToolWithProvider[]) => void
- mcpTools: ToolWithProvider[]
- setMcpTools: (tools: ToolWithProvider[]) => void
toolPublished: boolean
setToolPublished: (toolPublished: boolean) => void
}
export const createToolSlice: StateCreator = set => ({
- buildInTools: [],
- setBuildInTools: buildInTools => set(() => ({ buildInTools })),
- customTools: [],
- setCustomTools: customTools => set(() => ({ customTools })),
- workflowTools: [],
- setWorkflowTools: workflowTools => set(() => ({ workflowTools })),
- mcpTools: [],
- setMcpTools: mcpTools => set(() => ({ mcpTools })),
toolPublished: false,
setToolPublished: toolPublished => set(() => ({ toolPublished })),
})
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index a39426df57..e517a8edaf 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -19,7 +19,7 @@ import type {
} from '@/app/components/workflow/nodes/_base/components/error-handle/types'
import type { WorkflowRetryConfig } from '@/app/components/workflow/nodes/_base/components/retry/types'
import type { StructuredOutput } from '@/app/components/workflow/nodes/llm/types'
-import type { PluginMeta } from '../plugins/types'
+import type { Plugin, PluginMeta } from '@/app/components/plugins/types'
import type { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
import type { SchemaTypeDefinition } from '@/service/use-common'
@@ -478,16 +478,9 @@ export type ToolWithProvider = Collection & {
meta: PluginMeta
}
-export type UninstalledRecommendedPlugin = {
- plugin_id: string
- name: string
- icon: string
- plugin_unique_identifier: string
-}
-
export type RAGRecommendedPlugins = {
installed_recommended_plugins: ToolWithProvider[]
- uninstalled_recommended_plugins: UninstalledRecommendedPlugin[]
+ uninstalled_recommended_plugins: Plugin[]
}
export enum SupportUploadFileTypes {
diff --git a/web/app/components/workflow/utils/layout.ts b/web/app/components/workflow/utils/elk-layout.ts
similarity index 97%
rename from web/app/components/workflow/utils/layout.ts
rename to web/app/components/workflow/utils/elk-layout.ts
index b3cf3b0d88..69acbf9aff 100644
--- a/web/app/components/workflow/utils/layout.ts
+++ b/web/app/components/workflow/utils/elk-layout.ts
@@ -4,18 +4,18 @@ import { cloneDeep } from 'lodash-es'
import type {
Edge,
Node,
-} from '../types'
+} from '@/app/components/workflow/types'
import {
BlockEnum,
-} from '../types'
+} from '@/app/components/workflow/types'
import {
CUSTOM_NODE,
NODE_LAYOUT_HORIZONTAL_PADDING,
NODE_LAYOUT_VERTICAL_PADDING,
-} from '../constants'
-import { CUSTOM_ITERATION_START_NODE } from '../nodes/iteration-start/constants'
-import { CUSTOM_LOOP_START_NODE } from '../nodes/loop-start/constants'
-import type { CaseItem, IfElseNodeType } from '../nodes/if-else/types'
+} from '@/app/components/workflow/constants'
+import { CUSTOM_ITERATION_START_NODE } from '@/app/components/workflow/nodes/iteration-start/constants'
+import { CUSTOM_LOOP_START_NODE } from '@/app/components/workflow/nodes/loop-start/constants'
+import type { CaseItem, IfElseNodeType } from '@/app/components/workflow/nodes/if-else/types'
// Although the file name refers to Dagre, the implementation now relies on ELK's layered algorithm.
// Keep the export signatures unchanged to minimise the blast radius while we migrate the layout stack.
diff --git a/web/app/components/workflow/utils/index.ts b/web/app/components/workflow/utils/index.ts
index e9ae2d1ef0..53a423de34 100644
--- a/web/app/components/workflow/utils/index.ts
+++ b/web/app/components/workflow/utils/index.ts
@@ -1,7 +1,7 @@
export * from './node'
export * from './edge'
export * from './workflow-init'
-export * from './layout'
+export * from './elk-layout'
export * from './common'
export * from './tool'
export * from './workflow'
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 1be802460b..c83ea7fd85 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -57,6 +57,7 @@ const LocaleLayout = async ({
[DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_JINAREADER]: process.env.NEXT_PUBLIC_ENABLE_WEBSITE_JINAREADER,
[DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_FIRECRAWL]: process.env.NEXT_PUBLIC_ENABLE_WEBSITE_FIRECRAWL,
[DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_WATERCRAWL]: process.env.NEXT_PUBLIC_ENABLE_WEBSITE_WATERCRAWL,
+ [DatasetAttr.DATA_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX]: process.env.NEXT_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX,
[DatasetAttr.NEXT_PUBLIC_ZENDESK_WIDGET_KEY]: process.env.NEXT_PUBLIC_ZENDESK_WIDGET_KEY,
[DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT,
[DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION,
diff --git a/web/app/signin/normal-form.tsx b/web/app/signin/normal-form.tsx
index 920a992b4f..29e21b8ba2 100644
--- a/web/app/signin/normal-form.tsx
+++ b/web/app/signin/normal-form.tsx
@@ -135,8 +135,8 @@ const NormalForm = () => {
{!systemFeatures.branding.enabled && {t('login.joinTipStart')}{workspaceName}{t('login.joinTipEnd')}
}
: