{item.isDeleted && (
-
-
-
+
+
+
+
+ )}
+ />
+
+ {t('toolRemoved', { ns: 'tools' })}
+
+
{
@@ -263,19 +299,25 @@ const AgentTools: FC = () => {
{!item.isDeleted && !readonly && (
{!item.notAuthor && (
-
- {
- setCurrentTool(item)
- setIsShowSettingTool(true)
- }}
- >
-
-
+
+ {
+ setCurrentTool(item)
+ setIsShowSettingTool(true)
+ }}
+ >
+
+
+ )}
+ />
+
+ {t('setBuiltInTools.infoAndSetting', { ns: 'tools' })}
+
)}
{
/>,
)
+ fireEvent.click(screen.getByRole('button', { name: 'overview.appInfo.enableTooltip.description' }))
fireEvent.click(screen.getByText('overview.appInfo.enableTooltip.learnMore'))
expect(mockWindowOpen).toHaveBeenCalledWith('https://docs.example.com/use-dify/nodes/user-input', '_blank')
diff --git a/web/app/components/app/overview/app-card.tsx b/web/app/components/app/overview/app-card.tsx
index f0502ae918..b7ec4a2d81 100644
--- a/web/app/components/app/overview/app-card.tsx
+++ b/web/app/components/app/overview/app-card.tsx
@@ -2,6 +2,7 @@
import type { ConfigParams } from './settings'
import type { AppDetailResponse } from '@/models/app'
import type { AppSSO } from '@/types/app'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import { Switch } from '@langgenius/dify-ui/switch'
import { useSuspenseQuery } from '@tanstack/react-query'
import * as React from 'react'
@@ -9,7 +10,6 @@ import { useCallback, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import AppBasic from '@/app/components/app-sidebar/basic'
import { useStore as useAppStore } from '@/app/components/app/store'
-import Tooltip from '@/app/components/base/tooltip'
import SecretKeyButton from '@/app/components/develop/secret-key/secret-key-button'
import Indicator from '@/app/components/header/indicator'
import { useAppContext } from '@/context/app-context'
@@ -179,6 +179,31 @@ function AppCard({
triggerModeDisabled,
])
+ const missingStartNodeContent = cardState.appUnpublished || cardState.missingStartNode
+ ? (
+ <>
+
+ {t('overview.appInfo.enableTooltip.description', { ns: 'appOverview' })}
+
+
+
+ )
+ : ''
+
+ const statusPopoverContent = cardState.toggleDisabled
+ ? (
+ triggerModeDisabled && triggerModeMessage
+ ? triggerModeMessage
+ : missingStartNodeContent
+ )
+ : ''
+
return (
-
-
+
+ }
+ />
+
+ {triggerModeMessage}
+
+
)
:
)}
@@ -219,38 +250,31 @@ function AppCard({
: t('overview.status.disable', { ns: 'appOverview' })}
- {t('overview.appInfo.enableTooltip.description', { ns: 'appOverview' })}
-
- window.open(docLink('/use-dify/nodes/user-input'), '_blank')}
- >
- {t('overview.appInfo.enableTooltip.learnMore', { ns: 'appOverview' })}
-
-
- )
- : ''
- )
- : ''
- }
- position="right"
- popupClassName="w-58 max-w-60 rounded-xl bg-components-panel-bg px-3.5 py-3 shadow-lg"
- offset={24}
- >
-
-
-
-
+ {cardState.toggleDisabled && statusPopoverContent
+ ? (
+
+
+
+
+ )}
+ />
+
+ {statusPopoverContent}
+
+
+ )
+ : (
+
+ )}
{!cardState.isMinimalState && (
= ({ data, onSave, onCancel, datasetBindings, isEditMode, onEdit }) => {
const { t } = useTranslation()
const [loading, setLoading] = useState(false)
const [showConfirm, setShowConfirm] = useState(false)
- const [formData, setFormData] = useState({ name: '', settings: { endpoint: '', api_key: '' } })
- useEffect(() => {
- if (isEditMode && data)
- setFormData(data)
- }, [isEditMode, data])
+ const [formData, setFormData] = useState(() => isEditMode && data ? data : emptyExternalAPIFormData)
const hasEmptyInputs = Object.values(formData).some(value => typeof value === 'string' ? value.trim() === '' : Object.values(value).some(v => v.trim() === ''))
const handleDataChange = (val: CreateExternalAPIReq) => {
setFormData(val)
@@ -108,106 +113,121 @@ const AddExternalAPIModal: FC = ({ data, onSave, onCan
}
}
return (
-
-
-
-
-
-
- {isEditMode ? t('editExternalAPIFormTitle', { ns: 'dataset' }) : t('createExternalAPI', { ns: 'dataset' })}
-
- {isEditMode && (datasetBindings?.length ?? 0) > 0 && (
-
- {t('editExternalAPIFormWarning.front', { ns: 'dataset' })}
-
-
- {datasetBindings?.length}
- {' '}
- {t('editExternalAPIFormWarning.end', { ns: 'dataset' })}
+
-
0}
- onOpenChange={open => !open && setShowConfirm(false)}
- >
-
-
-
- Warning
-
-
- {`${t('editExternalAPIConfirmWarningContent.front', { ns: 'dataset' })} ${datasetBindings?.length} ${t('editExternalAPIConfirmWarningContent.end', { ns: 'dataset' })}`}
-
+
+
+
{`${datasetBindings?.length} ${t('editExternalAPITooltipTitle', { ns: 'dataset' })}`}
+
+ {datasetBindings?.map(binding => (
+
+ ))}
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ {t('externalAPIForm.encrypted.front', { ns: 'dataset' })}
+
+ PKCS1_OAEP
+
+ {t('externalAPIForm.encrypted.end', { ns: 'dataset' })}
+
-
-
+
0}
+ onOpenChange={open => !open && setShowConfirm(false)}
+ >
+
+
+
+ Warning
+
+
+ {`${t('editExternalAPIConfirmWarningContent.front', { ns: 'dataset' })} ${datasetBindings?.length} ${t('editExternalAPIConfirmWarningContent.end', { ns: 'dataset' })}`}
+
+
+
+
)
}
export default memo(AddExternalAPIModal)
diff --git a/web/app/components/datasets/extra-info/statistics.tsx b/web/app/components/datasets/extra-info/statistics.tsx
index f02db4c5dc..4adf71cc57 100644
--- a/web/app/components/datasets/extra-info/statistics.tsx
+++ b/web/app/components/datasets/extra-info/statistics.tsx
@@ -1,10 +1,10 @@
import type { RelatedAppResponse } from '@/models/datasets'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import { RiInformation2Line } from '@remixicon/react'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import Divider from '@/app/components/base/divider'
import LinkedAppsPanel from '@/app/components/base/linked-apps-panel'
-import Tooltip from '@/app/components/base/tooltip'
import NoLinkedAppsPanel from '../no-linked-apps-panel'
type StatisticsProps = {
@@ -40,26 +40,34 @@ const Statistics = ({
{relatedAppsTotal ?? '--'}
-
+
+ {t('datasetMenus.relatedApp', { ns: 'common' })}
+
+
+ )}
+ />
+
+ {hasRelatedApps
? (
)
- :
- }
- >
-
- {t('datasetMenus.relatedApp', { ns: 'common' })}
-
-
-
+ :
}
+
+
)
diff --git a/web/app/components/header/nav/__tests__/index.spec.tsx b/web/app/components/header/nav/__tests__/index.spec.tsx
index 3dce8375b3..f4a1399638 100644
--- a/web/app/components/header/nav/__tests__/index.spec.tsx
+++ b/web/app/components/header/nav/__tests__/index.spec.tsx
@@ -298,11 +298,15 @@ describe('Nav Component', () => {
fireEvent.click(selectorButton)
})
- const createButton = await screen.findByText('Create New')
- await act(async () => {
- fireEvent.click(createButton)
- })
+ const openCreateMenu = async () => {
+ const createButton = await screen.findByText('Create New')
+ await act(async () => {
+ fireEvent.click(createButton)
+ })
+ return screen.findByText(/app\.newApp\.startFromBlank/i)
+ }
+ await openCreateMenu()
const blankOption = await screen.findByText(
/app\.newApp\.startFromBlank/i,
)
@@ -311,6 +315,7 @@ describe('Nav Component', () => {
})
expect(mockOnCreate).toHaveBeenCalledWith('blank')
+ await openCreateMenu()
const templateOption = await screen.findByText(
/app\.newApp\.startFromTemplate/i,
)
@@ -319,6 +324,7 @@ describe('Nav Component', () => {
})
expect(mockOnCreate).toHaveBeenCalledWith('template')
+ await openCreateMenu()
const dslOption = await screen.findByText(/app\.importDSL/i)
await act(async () => {
fireEvent.click(dslOption)
diff --git a/web/app/components/header/nav/nav-selector/__tests__/index.spec.tsx b/web/app/components/header/nav/nav-selector/__tests__/index.spec.tsx
index 97443bb759..b1de3ab5e3 100644
--- a/web/app/components/header/nav/nav-selector/__tests__/index.spec.tsx
+++ b/web/app/components/header/nav/nav-selector/__tests__/index.spec.tsx
@@ -203,23 +203,30 @@ describe('NavSelector Component', () => {
await act(async () => {
fireEvent.click(button)
})
- const createBtn = screen.getByText('Create New')
- await act(async () => {
- fireEvent.click(createBtn)
- })
+ const openCreateMenu = async () => {
+ const createBtn = screen.getByText('Create New')
+ await act(async () => {
+ fireEvent.click(createBtn)
+ })
+ return screen.findByText(/app\.newApp\.startFromBlank/i)
+ }
+
+ await openCreateMenu()
const blank = await screen.findByText(/app\.newApp\.startFromBlank/i)
await act(async () => {
fireEvent.click(blank)
})
expect(mockOnCreate).toHaveBeenCalledWith('blank')
+ await openCreateMenu()
const template = await screen.findByText(/app\.newApp\.startFromTemplate/i)
await act(async () => {
fireEvent.click(template)
})
expect(mockOnCreate).toHaveBeenCalledWith('template')
+ await openCreateMenu()
const dsl = await screen.findByText(/app\.importDSL/i)
await act(async () => {
fireEvent.click(dsl)
@@ -227,6 +234,21 @@ describe('NavSelector Component', () => {
expect(mockOnCreate).toHaveBeenCalledWith('dsl')
})
+ it('should open extended create menu on hover in app mode', async () => {
+ render(
)
+ const button = screen.getByRole('button')
+ await act(async () => {
+ fireEvent.click(button)
+ })
+
+ const createBtn = screen.getByText('Create New')
+ await act(async () => {
+ fireEvent.mouseEnter(createBtn)
+ })
+
+ expect(await screen.findByText(/app\.newApp\.startFromBlank/i))!.toBeInTheDocument()
+ })
+
it('should not show create button for non-editors', async () => {
vi.mocked(useAppContext).mockReturnValue({
isCurrentWorkspaceEditor: false,
diff --git a/web/app/components/header/nav/nav-selector/index.tsx b/web/app/components/header/nav/nav-selector/index.tsx
index 285639adf7..a46c200e3d 100644
--- a/web/app/components/header/nav/nav-selector/index.tsx
+++ b/web/app/components/header/nav/nav-selector/index.tsx
@@ -1,6 +1,6 @@
'use client'
import type { AppIconType, AppModeEnum } from '@/types/app'
-import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
import { cn } from '@langgenius/dify-ui/cn'
import {
RiAddLine,
@@ -8,7 +8,7 @@ import {
RiArrowRightSLine,
} from '@remixicon/react'
import { debounce } from 'es-toolkit/compat'
-import { Fragment, useCallback } from 'react'
+import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useStore as useAppStore } from '@/app/components/app/store'
import { AppTypeIcon } from '@/app/components/app/type-selector'
@@ -38,6 +38,75 @@ export type INavSelectorProps = {
isLoadingMore?: boolean
}
+type AppCreateMenuProps = {
+ createText: string
+ startFromBlankText: string
+ startFromTemplateText: string
+ importDSLText: string
+ onCreate: (state: string) => void
+}
+
+const AppCreateMenu = ({
+ createText,
+ startFromBlankText,
+ startFromTemplateText,
+ importDSLText,
+ onCreate,
+}: AppCreateMenuProps) => {
+ const [open, setOpen] = useState(false)
+
+ const handleCreate = (state: string) => {
+ setOpen(false)
+ onCreate(state)
+ }
+
+ return (
+
setOpen(false)}>
+
+ {open && (
+
setOpen(true)}
+ >
+
+
+
+
+
+
+
+
+ )}
+
+ )
+}
+
const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onLoadMore, isLoadingMore }: INavSelectorProps) => {
const { t } = useTranslation()
const router = useRouter()
@@ -72,7 +141,7 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
className="
absolute right-0 -left-11 mt-1.5 w-60 max-w-80
origin-top-right divide-y divide-divider-regular rounded-lg bg-components-panel-bg-blur
- shadow-lg
+ shadow-lg outline-none
"
>
@@ -130,56 +199,13 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
)}
{isApp && isCurrentWorkspaceEditor && (
-
+
)}
diff --git a/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-list.spec.tsx b/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-list.spec.tsx
index e31afc7cb2..ec9a8eeccf 100644
--- a/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-list.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-list.spec.tsx
@@ -76,6 +76,8 @@ const createPluginDetail = (): PluginDetail => ({
})
describe('EndpointList', () => {
+ const getAddButton = () => screen.getByRole('button', { name: 'plugin.detailPanel.endpointModalTitle' })
+
beforeEach(() => {
vi.clearAllMocks()
mockEndpointListData = { endpoints: mockEndpoints }
@@ -112,7 +114,7 @@ describe('EndpointList', () => {
it('should render add button', () => {
render(
)
- expect(screen.getAllByRole('button').length).toBeGreaterThan(0)
+ expect(getAddButton()).toBeInTheDocument()
})
})
@@ -120,8 +122,7 @@ describe('EndpointList', () => {
it('should show modal when add button clicked', () => {
render(
)
- const addButton = screen.getAllByRole('button')[0]
- fireEvent.click(addButton!)
+ fireEvent.click(getAddButton())
expect(screen.getByTestId('endpoint-modal'))!.toBeInTheDocument()
})
@@ -129,8 +130,7 @@ describe('EndpointList', () => {
it('should hide modal when cancel clicked', () => {
render(
)
- const addButton = screen.getAllByRole('button')[0]
- fireEvent.click(addButton!)
+ fireEvent.click(getAddButton())
expect(screen.getByTestId('endpoint-modal'))!.toBeInTheDocument()
fireEvent.click(screen.getByTestId('modal-cancel'))
@@ -140,8 +140,7 @@ describe('EndpointList', () => {
it('should call createEndpoint when save clicked', () => {
render(
)
- const addButton = screen.getAllByRole('button')[0]
- fireEvent.click(addButton!)
+ fireEvent.click(getAddButton())
fireEvent.click(screen.getByTestId('modal-save'))
expect(mockCreateEndpoint).toHaveBeenCalled()
@@ -176,8 +175,7 @@ describe('EndpointList', () => {
it('should invalidate endpoint list after successful create', () => {
render(
)
- const addButton = screen.getAllByRole('button')[0]
- fireEvent.click(addButton!)
+ fireEvent.click(getAddButton())
fireEvent.click(screen.getByTestId('modal-save'))
expect(mockInvalidateEndpointList).toHaveBeenCalledWith('test-plugin')
@@ -186,8 +184,7 @@ describe('EndpointList', () => {
it('should pass correct params to createEndpoint', () => {
render(
)
- const addButton = screen.getAllByRole('button')[0]
- fireEvent.click(addButton!)
+ fireEvent.click(getAddButton())
fireEvent.click(screen.getByTestId('modal-save'))
expect(mockCreateEndpoint).toHaveBeenCalledWith({
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
index 2d11305f6e..d50ab4c4ea 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
@@ -1,5 +1,6 @@
import type { PluginDetail } from '@/app/components/plugins/types'
import { cn } from '@langgenius/dify-ui/cn'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import { toast } from '@langgenius/dify-ui/toast'
import {
RiAddLine,
@@ -11,7 +12,6 @@ import * as React from 'react'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import ActionButton from '@/app/components/base/action-button'
-import Tooltip from '@/app/components/base/tooltip'
import { toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
import { useDocLink } from '@/context/i18n'
import {
@@ -67,10 +67,23 @@ const EndpointList = ({ detail }: Props) => {
{t('detailPanel.endpoints', { ns: 'plugin' })}
-
+
+
+
+ )}
+ />
+
@@ -80,17 +93,19 @@ const EndpointList = ({ detail }: Props) => {
href={docLink('/develop-plugin/getting-started/getting-started-dify-plugin')}
target="_blank"
rel="noopener noreferrer"
+ className="inline-flex cursor-pointer items-center gap-1 system-xs-regular text-text-accent"
>
-
-
- {t('detailPanel.endpointsDocLink', { ns: 'plugin' })}
-
+
+ {t('detailPanel.endpointsDocLink', { ns: 'plugin' })}
- )}
- />
+
+
-
+
diff --git a/web/app/components/tools/mcp/detail/tool-item.tsx b/web/app/components/tools/mcp/detail/tool-item.tsx
index 4101fa2078..f05890aee2 100644
--- a/web/app/components/tools/mcp/detail/tool-item.tsx
+++ b/web/app/components/tools/mcp/detail/tool-item.tsx
@@ -1,9 +1,9 @@
'use client'
import type { Tool } from '@/app/components/tools/types'
import { cn } from '@langgenius/dify-ui/cn'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
-import Tooltip from '@/app/components/base/tooltip'
import { useLocale } from '@/context/i18n'
import { getLanguage } from '@/i18n-config/language'
@@ -51,25 +51,31 @@ const MCPToolItem = ({
}
return (
-
+
+ {tool.label[language]}
+ {tool.description[language]}
+
+ )}
+ />
+
{tool.label[language]}
{tool.description[language]}
{renderParameters()}
- )}
- >
-
-
{tool.label[language]}
-
{tool.description[language]}
-
+
+
)
}
export default MCPToolItem
diff --git a/web/app/components/tools/mcp/mcp-service-card.tsx b/web/app/components/tools/mcp/mcp-service-card.tsx
index 67beb9b3ee..3810e5b4c2 100644
--- a/web/app/components/tools/mcp/mcp-service-card.tsx
+++ b/web/app/components/tools/mcp/mcp-service-card.tsx
@@ -15,14 +15,15 @@ import {
} from '@langgenius/dify-ui/alert-dialog'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import { Switch } from '@langgenius/dify-ui/switch'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
import { RiEditLine, RiLoopLeftLine } from '@remixicon/react'
import { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import CopyFeedback from '@/app/components/base/copy-feedback'
import Divider from '@/app/components/base/divider'
import { Mcp } from '@/app/components/base/icons/src/vender/other'
-import Tooltip from '@/app/components/base/tooltip'
import Indicator from '@/app/components/header/indicator'
import MCPServerModal from '@/app/components/tools/mcp/mcp-server-modal'
import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
@@ -81,13 +82,22 @@ const ServerURLSection: FC
= ({
{isCurrentWorkspaceManager && (
-
-
-
-
+
+
+
+
+ )}
+ />
+
+ {t('overview.appInfo.regenerate', { ns: 'appOverview' })}
+
)}
@@ -104,13 +114,19 @@ type TriggerModeOverlayProps = {
const TriggerModeOverlay: FC = ({ triggerModeMessage }) => {
if (triggerModeMessage) {
return (
-
-
-
+
+ }
+ />
+
+ {triggerModeMessage}
+
+
)
}
return
@@ -146,12 +162,13 @@ function getTooltipContent({
{t('overview.appInfo.enableTooltip.description', { ns: 'appOverview' })}
- window.open(docLink('/use-dify/nodes/user-input'), '_blank')}
>
{t('overview.appInfo.enableTooltip.learnMore', { ns: 'appOverview' })}
-
+
)
}
@@ -316,16 +333,31 @@ const MCPServiceCard: FC = ({
-
-
-
-
-
+ {toggleDisabled && tooltipContent
+ ? (
+
+
+
+