@@ -70,13 +77,32 @@ const NavLink = ({
)
}
+ if (!href) {
+ return (
+
+ {renderIcon()}
+
+ {name}
+
+
+ )
+ }
+
return (
{renderIcon()}
diff --git a/web/app/components/app-sidebar/snippet-info/__tests__/dropdown.spec.tsx b/web/app/components/app-sidebar/snippet-info/__tests__/dropdown.spec.tsx
new file mode 100644
index 00000000000..51f1f0c341b
--- /dev/null
+++ b/web/app/components/app-sidebar/snippet-info/__tests__/dropdown.spec.tsx
@@ -0,0 +1,270 @@
+import type { CreateSnippetDialogPayload } from '@/app/components/snippets/create-snippet-dialog'
+import type { SnippetDetail } from '@/models/snippet'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import * as React from 'react'
+import SnippetInfoDropdown from '../dropdown'
+
+const mockReplace = vi.fn()
+const mockDownloadBlob = vi.fn()
+const mockToastSuccess = vi.fn()
+const mockToastError = vi.fn()
+const mockUpdateMutate = vi.fn()
+const mockExportMutateAsync = vi.fn()
+const mockDeleteMutate = vi.fn()
+let mockDropdownOpen = false
+let mockDropdownOnOpenChange: ((open: boolean) => void) | undefined
+
+vi.mock('@/next/navigation', () => ({
+ useRouter: () => ({
+ replace: mockReplace,
+ }),
+}))
+
+vi.mock('@/utils/download', () => ({
+ downloadBlob: (args: { data: Blob, fileName: string }) => mockDownloadBlob(args),
+}))
+
+vi.mock('@langgenius/dify-ui/toast', () => ({
+ toast: {
+ success: (...args: unknown[]) => mockToastSuccess(...args),
+ error: (...args: unknown[]) => mockToastError(...args),
+ },
+}))
+
+vi.mock('@langgenius/dify-ui/dropdown-menu', () => ({
+ DropdownMenu: ({
+ open,
+ onOpenChange,
+ children,
+ }: {
+ open?: boolean
+ onOpenChange?: (open: boolean) => void
+ children: React.ReactNode
+ }) => {
+ mockDropdownOpen = !!open
+ mockDropdownOnOpenChange = onOpenChange
+ return
{children}
+ },
+ DropdownMenuTrigger: ({
+ children,
+ className,
+ }: {
+ children: React.ReactNode
+ className?: string
+ }) => (
+
mockDropdownOnOpenChange?.(!mockDropdownOpen)}
+ >
+ {children}
+
+ ),
+ DropdownMenuContent: ({ children }: { children: React.ReactNode }) => (
+ mockDropdownOpen ?
{children}
: null
+ ),
+ DropdownMenuItem: ({
+ children,
+ onClick,
+ }: {
+ children: React.ReactNode
+ onClick?: () => void
+ }) => (
+
+ {children}
+
+ ),
+ DropdownMenuSeparator: () =>
,
+}))
+
+vi.mock('@/service/use-snippets', () => ({
+ useUpdateSnippetMutation: () => ({
+ mutate: mockUpdateMutate,
+ isPending: false,
+ }),
+ useExportSnippetMutation: () => ({
+ mutateAsync: mockExportMutateAsync,
+ isPending: false,
+ }),
+ useDeleteSnippetMutation: () => ({
+ mutate: mockDeleteMutate,
+ isPending: false,
+ }),
+}))
+
+type MockCreateSnippetDialogProps = {
+ isOpen: boolean
+ title?: string
+ confirmText?: string
+ initialValue?: {
+ name?: string
+ description?: string
+ }
+ onClose: () => void
+ onConfirm: (payload: CreateSnippetDialogPayload) => void
+}
+
+vi.mock('@/app/components/snippets/create-snippet-dialog', () => ({
+ default: ({
+ isOpen,
+ title,
+ confirmText,
+ initialValue,
+ onClose,
+ onConfirm,
+ }: MockCreateSnippetDialogProps) => {
+ if (!isOpen)
+ return null
+
+ return (
+
+
{title}
+
{confirmText}
+
{initialValue?.name}
+
{initialValue?.description}
+
onConfirm({
+ name: 'Updated snippet',
+ description: 'Updated description',
+ graph: {
+ nodes: [],
+ edges: [],
+ viewport: { x: 0, y: 0, zoom: 1 },
+ },
+ })}
+ >
+ submit-edit
+
+
close-edit
+
+ )
+ },
+}))
+
+const mockSnippet: SnippetDetail = {
+ id: 'snippet-1',
+ name: 'Social Media Repurposer',
+ description: 'Turn one blog post into multiple social media variations.',
+ updatedAt: '2026-03-25 10:00',
+ usage: '12',
+ tags: [],
+ status: undefined,
+}
+
+describe('SnippetInfoDropdown', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockDropdownOpen = false
+ mockDropdownOnOpenChange = undefined
+ })
+
+ // Rendering coverage for the menu trigger itself.
+ describe('Rendering', () => {
+ it('should render the dropdown trigger button', () => {
+ render(
)
+
+ expect(screen.getByRole('button')).toBeInTheDocument()
+ })
+ })
+
+ // Edit flow should seed the dialog with current snippet info and submit updates.
+ describe('Edit Snippet', () => {
+ it('should open the edit dialog and submit snippet updates', async () => {
+ const user = userEvent.setup()
+ mockUpdateMutate.mockImplementation((_variables: unknown, options?: { onSuccess?: () => void }) => {
+ options?.onSuccess?.()
+ })
+
+ render(
)
+ await user.click(screen.getByRole('button'))
+ await user.click(screen.getByText('snippet.menu.editInfo'))
+
+ expect(screen.getByTestId('create-snippet-dialog')).toBeInTheDocument()
+ expect(screen.getByText('snippet.editDialogTitle')).toBeInTheDocument()
+ expect(screen.getByText('common.operation.save')).toBeInTheDocument()
+ expect(screen.getByText(mockSnippet.name)).toBeInTheDocument()
+ expect(screen.getByText(mockSnippet.description)).toBeInTheDocument()
+
+ await user.click(screen.getByRole('button', { name: 'submit-edit' }))
+
+ expect(mockUpdateMutate).toHaveBeenCalledWith({
+ params: { snippetId: mockSnippet.id },
+ body: {
+ name: 'Updated snippet',
+ description: 'Updated description',
+ },
+ }, expect.objectContaining({
+ onSuccess: expect.any(Function),
+ onError: expect.any(Function),
+ }))
+ expect(mockToastSuccess).toHaveBeenCalledWith('snippet.editDone')
+ })
+ })
+
+ // Export should call the export hook and download the returned YAML blob.
+ describe('Export Snippet', () => {
+ it('should export and download the snippet yaml', async () => {
+ const user = userEvent.setup()
+ mockExportMutateAsync.mockResolvedValue('yaml: content')
+
+ render(
)
+
+ await user.click(screen.getByRole('button'))
+ await user.click(screen.getByText('snippet.menu.exportSnippet'))
+
+ await waitFor(() => {
+ expect(mockExportMutateAsync).toHaveBeenCalledWith({ snippetId: mockSnippet.id })
+ })
+
+ expect(mockDownloadBlob).toHaveBeenCalledWith({
+ data: expect.any(Blob),
+ fileName: `${mockSnippet.name}.yml`,
+ })
+ })
+
+ it('should show an error toast when export fails', async () => {
+ const user = userEvent.setup()
+ mockExportMutateAsync.mockRejectedValue(new Error('export failed'))
+
+ render(
)
+
+ await user.click(screen.getByRole('button'))
+ await user.click(screen.getByText('snippet.menu.exportSnippet'))
+
+ await waitFor(() => {
+ expect(mockToastError).toHaveBeenCalledWith('snippet.exportFailed')
+ })
+ })
+ })
+
+ // Delete should require confirmation and redirect after a successful mutation.
+ describe('Delete Snippet', () => {
+ it('should confirm deletion and redirect to the snippets list', async () => {
+ const user = userEvent.setup()
+ mockDeleteMutate.mockImplementation((_variables: unknown, options?: { onSuccess?: () => void }) => {
+ options?.onSuccess?.()
+ })
+
+ render(
)
+
+ await user.click(screen.getByRole('button'))
+ await user.click(screen.getByText('snippet.menu.deleteSnippet'))
+
+ expect(screen.getByText('snippet.deleteConfirmTitle')).toBeInTheDocument()
+ expect(screen.getByText('snippet.deleteConfirmContent')).toBeInTheDocument()
+
+ await user.click(screen.getByRole('button', { name: 'snippet.menu.deleteSnippet' }))
+
+ expect(mockDeleteMutate).toHaveBeenCalledWith({
+ params: { snippetId: mockSnippet.id },
+ }, expect.objectContaining({
+ onSuccess: expect.any(Function),
+ onError: expect.any(Function),
+ }))
+ expect(mockToastSuccess).toHaveBeenCalledWith('snippet.deleted')
+ expect(mockReplace).toHaveBeenCalledWith('/snippets')
+ })
+ })
+})
diff --git a/web/app/components/app-sidebar/snippet-info/__tests__/index.spec.tsx b/web/app/components/app-sidebar/snippet-info/__tests__/index.spec.tsx
new file mode 100644
index 00000000000..0c3925c901b
--- /dev/null
+++ b/web/app/components/app-sidebar/snippet-info/__tests__/index.spec.tsx
@@ -0,0 +1,60 @@
+import type { SnippetDetail } from '@/models/snippet'
+import { render, screen } from '@testing-library/react'
+import * as React from 'react'
+import SnippetInfo from '..'
+
+vi.mock('../dropdown', () => ({
+ default: () =>
,
+}))
+
+const mockSnippet: SnippetDetail = {
+ id: 'snippet-1',
+ name: 'Social Media Repurposer',
+ description: 'Turn one blog post into multiple social media variations.',
+ updatedAt: '2026-03-25 10:00',
+ usage: '12',
+ tags: [],
+ status: undefined,
+}
+
+describe('SnippetInfo', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ // Rendering tests for the collapsed and expanded sidebar header states.
+ describe('Rendering', () => {
+ it('should render the expanded snippet details and dropdown when expand is true', () => {
+ render(
)
+
+ expect(screen.getByText(mockSnippet.name)).toBeInTheDocument()
+ expect(screen.getByText('snippet.typeLabel')).toBeInTheDocument()
+ expect(screen.getByText(mockSnippet.description)).toBeInTheDocument()
+ expect(screen.getByTestId('snippet-info-dropdown')).toBeInTheDocument()
+ })
+
+ it('should hide the expanded-only content when expand is false', () => {
+ render(
)
+
+ expect(screen.queryByText(mockSnippet.name)).not.toBeInTheDocument()
+ expect(screen.queryByText('snippet.typeLabel')).not.toBeInTheDocument()
+ expect(screen.queryByText(mockSnippet.description)).not.toBeInTheDocument()
+ expect(screen.queryByTestId('snippet-info-dropdown')).not.toBeInTheDocument()
+ })
+ })
+
+ // Edge cases around optional snippet fields should not break the header layout.
+ describe('Edge Cases', () => {
+ it('should omit the description block when the snippet has no description', () => {
+ render(
+
,
+ )
+
+ expect(screen.getByText(mockSnippet.name)).toBeInTheDocument()
+ expect(screen.queryByText(mockSnippet.description)).not.toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/app-sidebar/snippet-info/dropdown.tsx b/web/app/components/app-sidebar/snippet-info/dropdown.tsx
new file mode 100644
index 00000000000..eb108fd2005
--- /dev/null
+++ b/web/app/components/app-sidebar/snippet-info/dropdown.tsx
@@ -0,0 +1,177 @@
+'use client'
+
+import type { SnippetDetail } from '@/models/snippet'
+import {
+ AlertDialog,
+ AlertDialogActions,
+ AlertDialogCancelButton,
+ AlertDialogConfirmButton,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
+import { cn } from '@langgenius/dify-ui/cn'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
+import { toast } from '@langgenius/dify-ui/toast'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import CreateSnippetDialog from '@/app/components/snippets/create-snippet-dialog'
+import { useRouter } from '@/next/navigation'
+import { useDeleteSnippetMutation, useExportSnippetMutation, useUpdateSnippetMutation } from '@/service/use-snippets'
+
+import { downloadBlob } from '@/utils/download'
+
+type SnippetInfoDropdownProps = {
+ snippet: SnippetDetail
+}
+
+const SnippetInfoDropdown = ({ snippet }: SnippetInfoDropdownProps) => {
+ const { t } = useTranslation('snippet')
+ const { replace } = useRouter()
+ const [open, setOpen] = React.useState(false)
+ const [isEditDialogOpen, setIsEditDialogOpen] = React.useState(false)
+ const [isDeleteDialogOpen, setIsDeleteDialogOpen] = React.useState(false)
+ const updateSnippetMutation = useUpdateSnippetMutation()
+ const exportSnippetMutation = useExportSnippetMutation()
+ const deleteSnippetMutation = useDeleteSnippetMutation()
+
+ const initialValue = React.useMemo(() => ({
+ name: snippet.name,
+ description: snippet.description,
+ }), [snippet.description, snippet.name])
+
+ const handleOpenEditDialog = React.useCallback(() => {
+ setOpen(false)
+ setIsEditDialogOpen(true)
+ }, [])
+
+ const handleExportSnippet = React.useCallback(async () => {
+ setOpen(false)
+ try {
+ const data = await exportSnippetMutation.mutateAsync({ snippetId: snippet.id })
+ const file = new Blob([data], { type: 'application/yaml' })
+ downloadBlob({ data: file, fileName: `${snippet.name}.yml` })
+ }
+ catch {
+ toast.error(t('exportFailed'))
+ }
+ }, [exportSnippetMutation, snippet.id, snippet.name, t])
+
+ const handleEditSnippet = React.useCallback(async ({ name, description }: {
+ name: string
+ description: string
+ }) => {
+ updateSnippetMutation.mutate({
+ params: { snippetId: snippet.id },
+ body: {
+ name,
+ description: description || undefined,
+ },
+ }, {
+ onSuccess: () => {
+ toast.success(t('editDone'))
+ setIsEditDialogOpen(false)
+ },
+ onError: (error) => {
+ toast.error(error instanceof Error ? error.message : t('editFailed'))
+ },
+ })
+ }, [snippet.id, t, updateSnippetMutation])
+
+ const handleDeleteSnippet = React.useCallback(() => {
+ deleteSnippetMutation.mutate({
+ params: { snippetId: snippet.id },
+ }, {
+ onSuccess: () => {
+ toast.success(t('deleted'))
+ setIsDeleteDialogOpen(false)
+ replace('/snippets')
+ },
+ onError: (error) => {
+ toast.error(error instanceof Error ? error.message : t('deleteFailed'))
+ },
+ })
+ }, [deleteSnippetMutation, replace, snippet.id, t])
+
+ return (
+ <>
+
+
+
+
+
+ {t('menu.editInfo')}
+
+
+ {t('menu.exportSnippet')}
+
+ {
+ setOpen(false)
+ setIsDeleteDialogOpen(true)
+ }}
+ >
+ {t('menu.deleteSnippet')}
+
+
+
+
+ {isEditDialogOpen && (
+
setIsEditDialogOpen(false)}
+ onConfirm={handleEditSnippet}
+ />
+ )}
+
+
+
+
+
+ {t('deleteConfirmTitle')}
+
+
+ {t('deleteConfirmContent')}
+
+
+
+ {t('operation.cancel', { ns: 'common' })}
+
+
+ {t('menu.deleteSnippet')}
+
+
+
+
+
+ )
+}
+
+export default React.memo(SnippetInfoDropdown)
diff --git a/web/app/components/app-sidebar/snippet-info/index.tsx b/web/app/components/app-sidebar/snippet-info/index.tsx
new file mode 100644
index 00000000000..417807cdae1
--- /dev/null
+++ b/web/app/components/app-sidebar/snippet-info/index.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import type { SnippetDetail } from '@/models/snippet'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import SnippetInfoDropdown from './dropdown'
+
+type SnippetInfoProps = {
+ expand: boolean
+ snippet: SnippetDetail
+}
+
+const SnippetInfo = ({
+ expand,
+ snippet,
+}: SnippetInfoProps) => {
+ const { t } = useTranslation('snippet')
+
+ if (!expand)
+ return null
+
+ return (
+
+
+
+
+
+
+ {snippet.name}
+
+
+ {t('typeLabel')}
+
+
+ {snippet.description && (
+
+ {snippet.description}
+
+ )}
+
+
= (props) => {
const [limit, setLimit] = useState(APP_PAGE_LIMIT)
const [list, setList] = useState([])
const [total, setTotal] = useState(0)
+ const totalPages = total ? Math.max(Math.ceil(total / limit), 1) : 1
const [isLoading, setIsLoading] = useState(false)
const [controlUpdateList, setControlUpdateList] = useState(() => Date.now())
const [currItem, setCurrItem] = useState(null)
@@ -217,11 +218,22 @@ const Annotation: FC = (props) => {
{(total && total > APP_PAGE_LIMIT)
? (
setCurrPage(page - 1)}
+ labels={{
+ previous: t('pagination.previous', { ns: 'common' }),
+ next: t('pagination.next', { ns: 'common' }),
+ editPageNumber: (page, totalPages) => t('pagination.editPageNumber', { ns: 'common', page, totalPages }),
+ pageNumberInput: t('pagination.pageNumber', { ns: 'common' }),
+ }}
+ pageSize={{
+ value: limit,
+ options: [10, 25, 50],
+ onValueChange: setLimit,
+ label: t('pagination.perPage', { ns: 'common' }),
+ ariaLabel: t('pagination.perPage', { ns: 'common' }),
+ }}
/>
)
: null}
diff --git a/web/app/components/app/annotation/view-annotation-modal/index.tsx b/web/app/components/app/annotation/view-annotation-modal/index.tsx
index c67b00709ab..839f4331015 100644
--- a/web/app/components/app/annotation/view-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/view-annotation-modal/index.tsx
@@ -20,12 +20,12 @@ import {
DrawerTitle,
DrawerViewport,
} from '@langgenius/dify-ui/drawer'
+import { Pagination } from '@langgenius/dify-ui/pagination'
import * as React from 'react'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Badge from '@/app/components/base/badge'
import { MessageCheckRemove } from '@/app/components/base/icons/src/vender/line/communication'
-import Pagination from '@/app/components/base/pagination'
import TabSlider from '@/app/components/base/tab-slider-plain'
import { APP_PAGE_LIMIT } from '@/config'
import useTimestamp from '@/hooks/use-timestamp'
@@ -62,6 +62,7 @@ const ViewAnnotationModal: FC = ({
const { formatTime } = useTimestamp()
const [currPage, setCurrPage] = React.useState(0)
const [total, setTotal] = useState(0)
+ const totalPages = total ? Math.max(Math.ceil(total / APP_PAGE_LIMIT), 1) : 1
const [hitHistoryList, setHitHistoryList] = useState([])
// Update local state when item prop changes (e.g., when modal is reopened with updated data)
@@ -197,10 +198,15 @@ const ViewAnnotationModal: FC = ({
{(total && total > APP_PAGE_LIMIT)
? (
setCurrPage(page - 1)}
+ labels={{
+ previous: t('pagination.previous', { ns: 'common' }),
+ next: t('pagination.next', { ns: 'common' }),
+ editPageNumber: (page, totalPages) => t('pagination.editPageNumber', { ns: 'common', page, totalPages }),
+ pageNumberInput: t('pagination.pageNumber', { ns: 'common' }),
+ }}
/>
)
: null}
diff --git a/web/app/components/app/app-publisher/features-wrapper.tsx b/web/app/components/app/app-publisher/features-wrapper.tsx
index 8679b2830dc..3189eb89908 100644
--- a/web/app/components/app/app-publisher/features-wrapper.tsx
+++ b/web/app/components/app/app-publisher/features-wrapper.tsx
@@ -1,7 +1,6 @@
-import type { AppPublisherProps } from '@/app/components/app/app-publisher'
-import type { ModelAndParameter } from '@/app/components/app/configuration/debug/types'
-import type { FileUpload } from '@/app/components/base/features/types'
-import type { PublishWorkflowParams } from '@/types/workflow'
+import type { AppPublisherProps, AppPublisherPublishParams } from '@/app/components/app/app-publisher'
+import type { Features, FileUpload } from '@/app/components/base/features/types'
+import type { ModelConfig } from '@/models/debug'
import {
AlertDialog,
AlertDialogActions,
@@ -21,9 +20,15 @@ import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
import { SupportUploadFileTypes } from '@/app/components/workflow/types'
import { Resolution } from '@/types/app'
+type PublishedModelConfig = ModelConfig & {
+ resetAppConfig?: () => void
+}
+
type Props = Omit & {
- onPublish?: (params?: ModelAndParameter | PublishWorkflowParams, features?: any) => Promise | any
- publishedConfig?: any
+ onPublish?: (params?: AppPublisherPublishParams, features?: Features) => Promise | unknown
+ publishedConfig: {
+ modelConfig: PublishedModelConfig
+ }
resetAppConfig?: () => void
}
@@ -71,7 +76,7 @@ const FeaturesWrappedAppPublisher = (props: Props) => {
setRestoreConfirmOpen(false)
}, [featuresStore, props])
- const handlePublish = useCallback((params?: ModelAndParameter | PublishWorkflowParams) => {
+ const handlePublish = useCallback((params?: AppPublisherPublishParams) => {
return props.onPublish?.(params, features)
}, [features, props])
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index 4b87081f041..1aad5e2adec 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -86,8 +86,10 @@ export type AppPublisherProps = {
const PUBLISH_SHORTCUT = ['ctrl', '⇧', 'P']
+export type AppPublisherPublishParams = ModelAndParameter | PublishWorkflowParams
+
type AppPublisherPublishHandler
- = | ((params?: ModelAndParameter | PublishWorkflowParams) => Promise | unknown)
+ = | ((params?: AppPublisherPublishParams) => Promise | unknown)
| ((params?: unknown) => Promise | unknown)
type AppPublisherRestoreHandler = () => Promise | unknown
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index 1b3e7119b3f..7041a11ee67 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -96,7 +96,7 @@ const GetAutomaticRes: FC = ({
const [model, setModel] = React.useState(localModel || {
name: '',
provider: '',
- mode: mode as unknown as ModelModeType.chat,
+ mode: mode as unknown as ModelModeType,
completion_params: {} as CompletionParams,
})
const {
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index 87b220a19f4..b5e0444510f 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -78,7 +78,7 @@ export const GetCodeGeneratorResModal: FC = (
const [model, setModel] = React.useState(localModel || {
name: '',
provider: '',
- mode: mode as unknown as ModelModeType.chat,
+ mode: mode as unknown as ModelModeType,
completion_params: defaultCompletionParams,
})
const {
diff --git a/web/app/components/app/configuration/hooks/use-configuration.ts b/web/app/components/app/configuration/hooks/use-configuration.ts
index 943642b5459..118e18ec218 100644
--- a/web/app/components/app/configuration/hooks/use-configuration.ts
+++ b/web/app/components/app/configuration/hooks/use-configuration.ts
@@ -1,5 +1,6 @@
'use client'
import type { ComponentProps } from 'react'
+import type { AppPublisherPublishParams } from '@/app/components/app/app-publisher'
import type AppPublisher from '@/app/components/app/app-publisher/features-wrapper'
import type { ModelAndParameter } from '@/app/components/app/configuration/debug/types'
import type { Features as FeaturesData, OnFeaturesChange } from '@/app/components/base/features/types'
@@ -21,7 +22,6 @@ import type {
TextToSpeechConfig,
} from '@/models/debug'
import type { VisionSettings } from '@/types/app'
-import type { PublishWorkflowParams } from '@/types/workflow'
import { useBoolean, useGetState } from 'ahooks'
import { clone } from 'es-toolkit/object'
import { produce } from 'immer'
@@ -481,7 +481,7 @@ export const useConfiguration = (): ConfigurationViewModel => {
resolvedModelModeType,
])
- const onPublish = useCallback(async (params?: ModelAndParameter | PublishWorkflowParams, features?: FeaturesData) => {
+ const onPublish = useCallback(async (params?: AppPublisherPublishParams, features?: FeaturesData) => {
const modelAndParameter = params && 'model' in params && 'provider' in params && 'parameters' in params
? params
: undefined
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index 7b42d7908b8..a13c1dd3320 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -337,29 +337,40 @@ function AppTypeCard({ icon, title, description, active, onClick }: AppTypeCardP
function AppPreview({ mode }: { mode: AppModeEnum }) {
const { t } = useTranslation()
- const modeToPreviewInfoMap = {
- [AppModeEnum.CHAT]: {
- title: t('types.chatbot', { ns: 'app' }),
- description: t('newApp.chatbotUserDescription', { ns: 'app' }),
- },
- [AppModeEnum.ADVANCED_CHAT]: {
- title: t('types.advanced', { ns: 'app' }),
- description: t('newApp.advancedUserDescription', { ns: 'app' }),
- },
- [AppModeEnum.AGENT_CHAT]: {
- title: t('types.agent', { ns: 'app' }),
- description: t('newApp.agentUserDescription', { ns: 'app' }),
- },
- [AppModeEnum.COMPLETION]: {
- title: t('newApp.completeApp', { ns: 'app' }),
- description: t('newApp.completionUserDescription', { ns: 'app' }),
- },
- [AppModeEnum.WORKFLOW]: {
- title: t('types.workflow', { ns: 'app' }),
- description: t('newApp.workflowUserDescription', { ns: 'app' }),
- },
- }
- const previewInfo = modeToPreviewInfoMap[mode]
+ const previewInfo = (() => {
+ switch (mode) {
+ case AppModeEnum.CHAT:
+ return {
+ title: t('types.chatbot', { ns: 'app' }),
+ description: t('newApp.chatbotUserDescription', { ns: 'app' }),
+ }
+ case AppModeEnum.ADVANCED_CHAT:
+ return {
+ title: t('types.advanced', { ns: 'app' }),
+ description: t('newApp.advancedUserDescription', { ns: 'app' }),
+ }
+ case AppModeEnum.AGENT_CHAT:
+ return {
+ title: t('types.agent', { ns: 'app' }),
+ description: t('newApp.agentUserDescription', { ns: 'app' }),
+ }
+ case AppModeEnum.COMPLETION:
+ return {
+ title: t('newApp.completeApp', { ns: 'app' }),
+ description: t('newApp.completionUserDescription', { ns: 'app' }),
+ }
+ case AppModeEnum.WORKFLOW:
+ return {
+ title: t('types.workflow', { ns: 'app' }),
+ description: t('newApp.workflowUserDescription', { ns: 'app' }),
+ }
+ default:
+ return {
+ title: t('types.workflow', { ns: 'app' }),
+ description: t('newApp.workflowUserDescription', { ns: 'app' }),
+ }
+ }
+ })()
return (
{previewInfo.title}
diff --git a/web/app/components/app/log/__tests__/index.spec.tsx b/web/app/components/app/log/__tests__/index.spec.tsx
index a9f597c5e84..f672925c1b2 100644
--- a/web/app/components/app/log/__tests__/index.spec.tsx
+++ b/web/app/components/app/log/__tests__/index.spec.tsx
@@ -67,9 +67,11 @@ vi.mock('@/app/components/base/loading', () => ({
default: () =>
loading-logs
,
}))
-vi.mock('@/app/components/base/pagination', () => ({
- default: ({ onChange }: { onChange: (page: number) => void }) => (
-
onChange(1)}>go-to-page-2
+vi.mock('@langgenius/dify-ui/pagination', () => ({
+ Pagination: ({ onPageChange }: { onPageChange: (page: number) => void }) => (
+
+ onPageChange(2)}>go-to-page-2
+
),
}))
diff --git a/web/app/components/app/log/index.tsx b/web/app/components/app/log/index.tsx
index 08991218387..b48980f12fc 100644
--- a/web/app/components/app/log/index.tsx
+++ b/web/app/components/app/log/index.tsx
@@ -1,6 +1,7 @@
'use client'
import type { FC } from 'react'
import type { App } from '@/types/app'
+import { Pagination } from '@langgenius/dify-ui/pagination'
import { useDebounce } from 'ahooks'
import dayjs from 'dayjs'
import { omit } from 'es-toolkit/object'
@@ -8,7 +9,6 @@ import * as React from 'react'
import { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Loading from '@/app/components/base/loading'
-import Pagination from '@/app/components/base/pagination'
import { APP_PAGE_LIMIT } from '@/config'
import { usePathname, useRouter, useSearchParams } from '@/next/navigation'
import { useChatConversations, useCompletionConversations } from '@/service/use-log'
@@ -98,6 +98,7 @@ const Logs: FC
= ({ appDetail }) => {
})
const total = isChatMode ? chatConversations?.total : completionConversations?.total
+ const totalPages = total ? Math.max(Math.ceil(total / limit), 1) : 1
const handleQueryParamsChange = useCallback((next: QueryParam) => {
setCurrPage(0)
@@ -130,11 +131,22 @@ const Logs: FC = ({ appDetail }) => {
{(total && total > APP_PAGE_LIMIT)
? (
handlePageChange(page - 1)}
+ labels={{
+ previous: t('pagination.previous', { ns: 'common' }),
+ next: t('pagination.next', { ns: 'common' }),
+ editPageNumber: (page, totalPages) => t('pagination.editPageNumber', { ns: 'common', page, totalPages }),
+ pageNumberInput: t('pagination.pageNumber', { ns: 'common' }),
+ }}
+ pageSize={{
+ value: limit,
+ options: [10, 25, 50],
+ onValueChange: setLimit,
+ label: t('pagination.perPage', { ns: 'common' }),
+ ariaLabel: t('pagination.perPage', { ns: 'common' }),
+ }}
/>
)
: null}
diff --git a/web/app/components/app/workflow-log/index.tsx b/web/app/components/app/workflow-log/index.tsx
index 242fd7d093d..762a9897d87 100644
--- a/web/app/components/app/workflow-log/index.tsx
+++ b/web/app/components/app/workflow-log/index.tsx
@@ -1,6 +1,7 @@
'use client'
import type { FC } from 'react'
import type { App } from '@/types/app'
+import { Pagination } from '@langgenius/dify-ui/pagination'
import { useDebounce } from 'ahooks'
import dayjs from 'dayjs'
import timezone from 'dayjs/plugin/timezone'
@@ -11,7 +12,6 @@ import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import EmptyElement from '@/app/components/app/log/empty-element'
import Loading from '@/app/components/base/loading'
-import Pagination from '@/app/components/base/pagination'
import { APP_PAGE_LIMIT } from '@/config'
import { useAppContext } from '@/context/app-context'
import { useWorkflowLogs } from '@/service/use-log'
@@ -59,6 +59,7 @@ const Logs: FC = ({ appDetail }) => {
params: query,
})
const total = workflowLogs?.total
+ const totalPages = total ? Math.max(Math.ceil(total / limit), 1) : 1
return (
@@ -76,11 +77,22 @@ const Logs: FC
= ({ appDetail }) => {
{(total && total > APP_PAGE_LIMIT)
? (
setCurrPage(page - 1)}
+ labels={{
+ previous: t('pagination.previous', { ns: 'common' }),
+ next: t('pagination.next', { ns: 'common' }),
+ editPageNumber: (page, totalPages) => t('pagination.editPageNumber', { ns: 'common', page, totalPages }),
+ pageNumberInput: t('pagination.pageNumber', { ns: 'common' }),
+ }}
+ pageSize={{
+ value: limit,
+ options: [10, 25, 50],
+ onValueChange: setLimit,
+ label: t('pagination.perPage', { ns: 'common' }),
+ ariaLabel: t('pagination.perPage', { ns: 'common' }),
+ }}
/>
)
: null}
diff --git a/web/app/components/apps/__tests__/empty.spec.tsx b/web/app/components/apps/__tests__/empty.spec.tsx
index 8dbbbc3ffb6..2536d610066 100644
--- a/web/app/components/apps/__tests__/empty.spec.tsx
+++ b/web/app/components/apps/__tests__/empty.spec.tsx
@@ -2,6 +2,8 @@ import { render, screen } from '@testing-library/react'
import * as React from 'react'
import Empty from '../empty'
+const defaultMessage = 'workflow.tabs.noSnippetsFound'
+
describe('Empty', () => {
beforeEach(() => {
vi.clearAllMocks()
@@ -9,32 +11,32 @@ describe('Empty', () => {
describe('Rendering', () => {
it('should render without crashing', () => {
- render() => {
- return React.createElement('div', { 'data-testid': 'new-app-card', 'role': 'button' }, 'New App Card')
- }),
+ default: ({ ref: _ref }: { ref?: React.Ref }) => {
+ return React.createElement('div', { 'data-testid': 'new-app-card', 'role': 'button', 'ref': _ref }, 'New App Card')
+ },
}))
vi.mock('../empty', () => ({
@@ -229,11 +241,15 @@ beforeAll(() => {
// Render helper wrapping with shared nuqs testing helper plus a seeded
// systemFeatures cache so List can resolve its useSuspenseQuery.
-const renderList = (searchParams = '') => {
+const renderList = (searchParams = '', pageType: 'apps' | 'snippets' = 'apps') => {
const { wrapper: SystemFeaturesWrapper } = createSystemFeaturesWrapper({
systemFeatures: { branding: { enabled: false } },
})
- return renderWithNuqs(
(APP_LIST_CATEGORY_VALUES)
+
+export const isAppListCategory = (value: string): value is AppListCategory => {
+ return appListCategorySet.has(value)
+}
+
+export const parseAsAppListCategory = parseAsStringLiteral(APP_LIST_CATEGORY_VALUES)
+ .withDefault('all')
+ .withOptions({ history: 'push' })
diff --git a/web/app/components/apps/app-type-filter.tsx b/web/app/components/apps/app-type-filter.tsx
new file mode 100644
index 00000000000..c51c7a7ca32
--- /dev/null
+++ b/web/app/components/apps/app-type-filter.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+import type { AppListCategory } from './app-type-filter-shared'
+import { cn } from '@langgenius/dify-ui/cn'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuRadioItemIndicator,
+ DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AppModeEnum } from '@/types/app'
+import { isAppListCategory } from './app-type-filter-shared'
+
+const chipClassName = 'flex h-8 items-center rounded-lg border-[0.5px] px-2 text-[13px] leading-4 transition-colors'
+
+type AppTypeFilterProps = {
+ value: AppListCategory
+ onChange: (value: AppListCategory) => void
+}
+
+export function AppTypeFilter({
+ value,
+ onChange,
+}: AppTypeFilterProps) {
+ const { t } = useTranslation()
+
+ const options = useMemo(() => ([
+ { value: 'all', text: t('types.all', { ns: 'app' }), iconClassName: 'i-ri-apps-2-line' },
+ { value: AppModeEnum.WORKFLOW, text: t('types.workflow', { ns: 'app' }), iconClassName: 'i-ri-exchange-2-line' },
+ { value: AppModeEnum.ADVANCED_CHAT, text: t('types.advanced', { ns: 'app' }), iconClassName: 'i-ri-message-3-line' },
+ { value: AppModeEnum.CHAT, text: t('types.chatbot', { ns: 'app' }), iconClassName: 'i-ri-message-3-line' },
+ { value: AppModeEnum.AGENT_CHAT, text: t('types.agent', { ns: 'app' }), iconClassName: 'i-ri-robot-3-line' },
+ { value: AppModeEnum.COMPLETION, text: t('types.completion', { ns: 'app' }), iconClassName: 'i-ri-file-4-line' },
+ ]), [t])
+
+ const activeOption = options.find(option => option.value === value)
+ const isSelected = value !== 'all'
+ const triggerLabel = isSelected ? activeOption?.text : t('studio.filters.types', { ns: 'app' })
+
+ return (
+
+ {triggerLabel}
+
+ isAppListCategory(nextValue) && onChange(nextValue)}>
+ {options.map(option => (
+
+ {option.text}
+
+ ))}
+
+
+
+ )
+}
diff --git a/web/app/components/apps/creators-filter.tsx b/web/app/components/apps/creators-filter.tsx
new file mode 100644
index 00000000000..bdbef0709fd
--- /dev/null
+++ b/web/app/components/apps/creators-filter.tsx
@@ -0,0 +1,230 @@
+'use client'
+
+import { Avatar } from '@langgenius/dify-ui/avatar'
+import { Checkbox } from '@langgenius/dify-ui/checkbox'
+import { cn } from '@langgenius/dify-ui/cn'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
+import { Input } from '@langgenius/dify-ui/input'
+import { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAppContext } from '@/context/app-context'
+import { useMembers } from '@/service/use-common'
+
+type CreatorsFilterProps = {
+ value: string[]
+ onChange: (value: string[]) => void
+}
+
+type CreatorOption = {
+ id: string
+ name: string
+ avatarUrl: string | null
+ isYou: boolean
+}
+
+const baseChipClassName = 'flex h-8 items-center rounded-lg border-[0.5px] px-2 text-[13px] leading-4 transition-colors'
+
+const CreatorsFilter = ({
+ value,
+ onChange,
+}: CreatorsFilterProps) => {
+ const { t } = useTranslation()
+ const { userProfile } = useAppContext()
+ const { data: membersData } = useMembers()
+ const [keywords, setKeywords] = useState('')
+
+ const creatorOptions = useMemo(() => {
+ const currentUserId = userProfile?.id
+ const members = membersData?.accounts ?? []
+
+ return [...members]
+ .filter(member => member.status !== 'pending')
+ .sort((left, right) => {
+ if (left.id === currentUserId)
+ return -1
+ if (right.id === currentUserId)
+ return 1
+ return left.name.localeCompare(right.name)
+ })
+ .map(member => ({
+ id: member.id,
+ name: member.name,
+ avatarUrl: member.avatar_url,
+ isYou: member.id === currentUserId,
+ }))
+ }, [membersData?.accounts, userProfile?.id])
+
+ const filteredCreators = useMemo(() => {
+ const normalizedKeywords = keywords.trim().toLowerCase()
+ if (!normalizedKeywords)
+ return creatorOptions
+
+ return creatorOptions.filter((creator) => {
+ const keyword = normalizedKeywords
+ return creator.name.toLowerCase().includes(keyword)
+ })
+ }, [creatorOptions, keywords])
+
+ const selectedCreators = useMemo(() => {
+ const creatorMap = new Map(creatorOptions.map(creator => [creator.id, creator]))
+ return value
+ .map(id => creatorMap.get(id))
+ .filter((creator): creator is CreatorOption => Boolean(creator))
+ }, [creatorOptions, value])
+
+ const toggleCreator = useCallback((creatorId: string) => {
+ if (value.includes(creatorId)) {
+ onChange(value.filter(id => id !== creatorId))
+ return
+ }
+
+ onChange([...value, creatorId])
+ }, [onChange, value])
+
+ const resetCreators = useCallback(() => {
+ onChange([])
+ setKeywords('')
+ }, [onChange])
+
+ const selectedCount = value.length
+ const selectedAvatarCreators = selectedCreators.slice(0, 3)
+ const isSelected = selectedCount > 0
+
+ return (
+
+ {t('studio.filters.allCreators', { ns: 'app' })}
+ {t('studio.filters.creators', { ns: 'app' })}
+
+ {selectedAvatarCreators.map((creator, index) => (
+ 0 && '-ml-1',
+ )}
+ />
+ ))}
+
+ {`+${selectedCount}`}
+ {
+ event.stopPropagation()
+ resetCreators()
+ }}
+ onKeyDown={(event) => {
+ if (event.key !== 'Enter' && event.key !== ' ')
+ return
+
+ event.preventDefault()
+ event.stopPropagation()
+ resetCreators()
+ }}
+ >
+
+
+ )}
+
+
+
+
+ setKeywords('')}
+ >
+
+ )}
+
+ {isSelected && (
+
+ {t('studio.filters.reset', { ns: 'app' })}
+
+ )}
+
+ {filteredCreators.map((creator) => {
+ const checked = value.includes(creator.id)
+
+ return (
+
toggleCreator(creator.id)}
+ >
+
+
+
+ {creator.name}
+ {creator.isYou && (
+ {t('studio.filters.you', { ns: 'app' })}
+ )}
+
+
+ )
+ })}
+
+
+ )
+}
+
+export default CreatorsFilter
diff --git a/web/app/components/apps/empty.tsx b/web/app/components/apps/empty.tsx
index 0dee3c908a7..6e7766e31ce 100644
--- a/web/app/components/apps/empty.tsx
+++ b/web/app/components/apps/empty.tsx
@@ -17,7 +17,11 @@ const DefaultCards = React.memo(() => {
)
})
-const Empty = () => {
+type EmptyProps = {
+ message?: string
+}
+
+const Empty = ({ message }: EmptyProps) => {
const { t } = useTranslation()
return (
@@ -25,7 +29,7 @@ const Empty = () => {
- {t('newApp.noAppsFound', { ns: 'app' })}
+ {message ?? t('newApp.noAppsFound', { ns: 'app' })}
diff --git a/web/app/components/apps/hooks/__tests__/use-apps-query-state.spec.tsx b/web/app/components/apps/hooks/__tests__/use-apps-query-state.spec.tsx
index 782f6ec3534..42e1617d643 100644
--- a/web/app/components/apps/hooks/__tests__/use-apps-query-state.spec.tsx
+++ b/web/app/components/apps/hooks/__tests__/use-apps-query-state.spec.tsx
@@ -5,6 +5,7 @@ import { APP_LIST_SEARCH_DEBOUNCE_MS } from '../../constants'
import { useAppsQueryState } from '../use-apps-query-state'
const renderWithAdapter = (searchParams = '') => {
+ // eslint-disable-next-line react/use-state -- testing a custom URL query hook, not React.useState
return renderHookWithNuqs(() => useAppsQueryState(), { searchParams })
}
@@ -20,24 +21,24 @@ describe('useAppsQueryState', () => {
category: 'all',
tagIDs: [],
keywords: '',
- isCreatedByMe: false,
+ creatorID: '',
})
expect(typeof result.current.setCategory).toBe('function')
expect(typeof result.current.setKeywords).toBe('function')
expect(typeof result.current.setTagIDs).toBe('function')
- expect(typeof result.current.setIsCreatedByMe).toBe('function')
+ expect(typeof result.current.setCreatorID).toBe('function')
})
it('should parse app list filters from URL', () => {
const { result } = renderWithAdapter(
- '?category=workflow&tagIDs=tag1;tag2&keywords=search+term&isCreatedByMe=true',
+ '?category=workflow&tagIDs=tag1;tag2&keywords=search+term&creatorID=creator-1',
)
expect(result.current.query).toEqual({
category: AppModeEnum.WORKFLOW,
tagIDs: ['tag1', 'tag2'],
keywords: 'search term',
- isCreatedByMe: true,
+ creatorID: 'creator-1',
})
})
@@ -144,30 +145,30 @@ describe('useAppsQueryState', () => {
expect(update.searchParams.has('tagIDs')).toBe(false)
})
- it('should update created-by-me URL state', async () => {
+ it('should update creator ID URL state', async () => {
const { result, onUrlUpdate } = renderWithAdapter()
act(() => {
- result.current.setIsCreatedByMe(true)
+ result.current.setCreatorID('creator-1')
})
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls.at(-1)![0]
- expect(result.current.query.isCreatedByMe).toBe(true)
- expect(update.searchParams.get('isCreatedByMe')).toBe('true')
+ expect(result.current.query.creatorID).toBe('creator-1')
+ expect(update.searchParams.get('creatorID')).toBe('creator-1')
expect(update.options.history).toBe('push')
})
- it('should remove isCreatedByMe from URL when disabled', async () => {
- const { result, onUrlUpdate } = renderWithAdapter('?isCreatedByMe=true')
+ it('should remove creatorID from URL when cleared', async () => {
+ const { result, onUrlUpdate } = renderWithAdapter('?creatorID=creator-1')
act(() => {
- result.current.setIsCreatedByMe(false)
+ result.current.setCreatorID('')
})
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls.at(-1)![0]
- expect(result.current.query.isCreatedByMe).toBe(false)
- expect(update.searchParams.has('isCreatedByMe')).toBe(false)
+ expect(result.current.query.creatorID).toBe('')
+ expect(update.searchParams.has('creatorID')).toBe(false)
})
})
diff --git a/web/app/components/apps/hooks/use-apps-query-state.ts b/web/app/components/apps/hooks/use-apps-query-state.ts
index a0109eb0618..04cd46adc3c 100644
--- a/web/app/components/apps/hooks/use-apps-query-state.ts
+++ b/web/app/components/apps/hooks/use-apps-query-state.ts
@@ -1,29 +1,19 @@
-import { debounce, parseAsArrayOf, parseAsBoolean, parseAsString, parseAsStringLiteral, useQueryStates } from 'nuqs'
+import type { AppListCategory } from '../app-type-filter-shared'
+import { debounce, parseAsArrayOf, parseAsString, useQueryStates } from 'nuqs'
import { useCallback, useMemo } from 'react'
-import { AppModes } from '@/types/app'
+import { parseAsAppListCategory } from '../app-type-filter-shared'
import { APP_LIST_SEARCH_DEBOUNCE_MS } from '../constants'
-const APP_LIST_CATEGORY_VALUES = ['all', ...AppModes] as const
-export type AppListCategory = typeof APP_LIST_CATEGORY_VALUES[number]
-
-const appListCategorySet = new Set(APP_LIST_CATEGORY_VALUES)
-
-export const isAppListCategory = (value: string): value is AppListCategory => {
- return appListCategorySet.has(value)
-}
-
const appListQueryParsers = {
- category: parseAsStringLiteral(APP_LIST_CATEGORY_VALUES)
- .withDefault('all')
- .withOptions({ history: 'push' }),
+ category: parseAsAppListCategory,
tagIDs: parseAsArrayOf(parseAsString, ';')
.withDefault([])
.withOptions({ history: 'push' }),
keywords: parseAsString.withDefault('').withOptions({
limitUrlUpdates: debounce(APP_LIST_SEARCH_DEBOUNCE_MS),
}),
- isCreatedByMe: parseAsBoolean
- .withDefault(false)
+ creatorID: parseAsString
+ .withDefault('')
.withOptions({ history: 'push' }),
}
@@ -42,8 +32,8 @@ export function useAppsQueryState() {
setQuery({ tagIDs })
}, [setQuery])
- const setIsCreatedByMe = useCallback((isCreatedByMe: boolean) => {
- setQuery({ isCreatedByMe })
+ const setCreatorID = useCallback((creatorID: string) => {
+ setQuery({ creatorID })
}, [setQuery])
return useMemo(() => ({
@@ -51,6 +41,6 @@ export function useAppsQueryState() {
setCategory,
setKeywords,
setTagIDs,
- setIsCreatedByMe,
- }), [query, setCategory, setKeywords, setTagIDs, setIsCreatedByMe])
+ setCreatorID,
+ }), [query, setCategory, setKeywords, setTagIDs, setCreatorID])
}
diff --git a/web/app/components/apps/index.tsx b/web/app/components/apps/index.tsx
index 9c994118839..4b7fe7dcdd4 100644
--- a/web/app/components/apps/index.tsx
+++ b/web/app/components/apps/index.tsx
@@ -15,19 +15,29 @@ import { fetchAppDetail } from '@/service/explore'
import { trackCreateApp } from '@/utils/create-app-tracking'
import List from './list'
+export type StudioPageType = 'apps' | 'snippets'
+
+type AppsProps = {
+ pageType?: StudioPageType
+}
+
const DSLConfirmModal = dynamic(() => import('../app/create-from-dsl-modal/dsl-confirm-modal'), { ssr: false })
const CreateAppModal = dynamic(() => import('../explore/create-app-modal'), { ssr: false })
const TryApp = dynamic(() => import('../explore/try-app'), { ssr: false })
const ImportFromMarketplaceTemplateModal = dynamic(() => import('./import-from-marketplace-template-modal'), { ssr: false })
-const Apps = () => {
+const Apps = ({
+ pageType = 'apps',
+}: AppsProps) => {
const { t } = useTranslation()
const searchParams = useSearchParams()
const { replace } = useRouter()
const templateId = searchParams.get('template-id')
const templateDismissedRef = useRef(false)
- useDocumentTitle(t('menus.apps', { ns: 'common' }))
+ useDocumentTitle(pageType === 'apps'
+ ? t('menus.apps', { ns: 'common' })
+ : t('tabs.snippets', { ns: 'workflow' }))
useEducationInit()
const [currentTryAppParams, setCurrentTryAppParams] = useState(undefined)
@@ -165,7 +175,7 @@ const Apps = () => {
}}
>
-
+
{isShowTryAppPanel && (
import('@/app/components/app/create-fro
type Props = {
controlRefreshList?: number
+ pageType?: StudioPageType
}
const List: FC = ({
controlRefreshList = 0,
+ pageType = 'apps',
}) => {
const { t } = useTranslation()
const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
@@ -47,11 +51,11 @@ const List: FC = ({
// eslint-disable-next-line react/use-state -- custom URL query hook, not React.useState
const {
- query: { category, tagIDs, keywords, isCreatedByMe },
+ query: { category, tagIDs, keywords, creatorID },
setCategory,
setKeywords,
setTagIDs,
- setIsCreatedByMe,
+ setCreatorID,
} = useAppsQueryState()
const debouncedKeywords = useDebounce(keywords, { wait: APP_LIST_SEARCH_DEBOUNCE_MS })
const newAppCardRef = useRef(null)
@@ -76,9 +80,9 @@ const List: FC = ({
limit: 30,
name: debouncedKeywords,
...(tagIDs.length ? { tag_ids: tagIDs } : {}),
- ...(isCreatedByMe ? { is_created_by_me: isCreatedByMe } : {}),
+ ...(creatorID ? { creator_id: creatorID } : {}),
...(category !== 'all' ? { mode: category } : {}),
- }), [category, debouncedKeywords, isCreatedByMe, tagIDs])
+ }), [category, creatorID, debouncedKeywords, tagIDs])
const {
data,
@@ -112,14 +116,6 @@ const List: FC = ({
}, [controlRefreshList, refetch])
const anchorRef = useRef(null)
- const options = [
- { value: 'all', text: t('types.all', { ns: 'app' }), icon: = ({
return () => observer?.disconnect()
}, [isLoading, isFetchingNextPage, fetchNextPage, error, hasNextPage, isCurrentWorkspaceDatasetOperator])
- const handleCreatedByMeChange = useCallback((checked: boolean) => {
- setIsCreatedByMe(checked)
- }, [setIsCreatedByMe])
+ const handleCreatorsChange = useCallback((creatorIDs: string[]) => {
+ setCreatorID(creatorIDs.at(-1) ?? '')
+ }, [setCreatorID])
const pages = useMemo(() => data?.pages ?? [], [data?.pages])
const apps = useMemo(() => pages.flatMap(({ data: pageApps }) => pageApps), [pages])
@@ -193,32 +189,45 @@ const List: FC = ({
-
{
- if (isAppListCategory(nextValue))
- setCategory(nextValue)
- }}
- options={options}
- />
-
-
-
- {t('showMyCreatedAppsOnly', { ns: 'app' })}
-
-
-
setShowTagManagementModal(true)} />
-
+
+
+
+
setShowTagManagementModal(true)} />
+
+ setKeywords('')}
+ >
+
+ )}
+
+ {pageType === 'apps' && (
+
+ {t('studio.viewSnippets', { ns: 'app' })}
+
+ )}
= ({
onOpenTagManagement={() => setShowTagManagementModal(true)}
/>
))
- :
}
+ :
}
{isFetchingNextPage && (
)}
diff --git a/web/app/components/base/logo/__tests__/dify-logo.spec.tsx b/web/app/components/base/logo/__tests__/dify-logo.spec.tsx
index f465c47e03b..b3b258c9a16 100644
--- a/web/app/components/base/logo/__tests__/dify-logo.spec.tsx
+++ b/web/app/components/base/logo/__tests__/dify-logo.spec.tsx
@@ -58,6 +58,12 @@ describe('DifyLogo', () => {
const img = screen.getByRole('img', { name: /dify logo/i })
expect(img).toHaveClass('custom-test-class')
})
+
+ it('applies custom alt text', () => {
+ const { container } = render(
)
+ const img = container.querySelector('img')
+ expect(img).toHaveAttribute('alt', '')
+ })
})
describe('Theme behavior', () => {
diff --git a/web/app/components/base/logo/dify-logo.tsx b/web/app/components/base/logo/dify-logo.tsx
index 0250e8c913b..f748044fc6e 100644
--- a/web/app/components/base/logo/dify-logo.tsx
+++ b/web/app/components/base/logo/dify-logo.tsx
@@ -23,12 +23,14 @@ type DifyLogoProps = {
style?: LogoStyle
size?: LogoSize
className?: string
+ alt?: string
}
const DifyLogo: FC
= ({
style = 'default',
size = 'medium',
className,
+ alt = 'Dify logo',
}) => {
const { theme } = useTheme()
const themedStyle = (theme === 'dark' && style === 'default') ? 'monochromeWhite' : style
@@ -37,7 +39,7 @@ const DifyLogo: FC = ({
- {children}
- ,
- )
-}
-
-describe('Pagination', () => {
- beforeEach(() => {
- vi.clearAllMocks()
- })
-
- describe('Rendering', () => {
- it('should render without crashing', () => {
- const { container } = renderPagination()
- expect(container).toBeInTheDocument()
- })
-
- it('should render children', () => {
- renderPagination({ children: child content })
- expect(screen.getByText(/child content/i)).toBeInTheDocument()
- })
-
- it('should apply className to wrapper div', () => {
- const { container } = render(
-
- test
- ,
- )
- expect(container.firstChild).toHaveClass('my-pagination')
- })
-
- it('should apply data-testid when provided', () => {
- render(
-
- test
- ,
- )
- expect(screen.getByTestId('my-pagination')).toBeInTheDocument()
- })
- })
-
- describe('PrevButton', () => {
- it('should render prev button', () => {
- renderPagination({
- currentPage: 3,
- children: Prev ,
- })
- expect(screen.getByText(/prev/i)).toBeInTheDocument()
- })
-
- it('should call setCurrentPage with previous page when clicked', () => {
- const setCurrentPage = vi.fn()
- renderPagination({
- currentPage: 3,
- setCurrentPage,
- children: Prev ,
- })
- fireEvent.click(screen.getByText(/prev/i))
- expect(setCurrentPage).toHaveBeenCalledWith(2)
- })
-
- it('should not navigate below page 0', () => {
- const setCurrentPage = vi.fn()
- renderPagination({
- currentPage: 0,
- setCurrentPage,
- children: Prev ,
- })
- fireEvent.click(screen.getByText(/prev/i))
- expect(setCurrentPage).not.toHaveBeenCalled()
- })
-
- it('should be disabled on first page', () => {
- renderPagination({
- currentPage: 0,
- children: Prev ,
- })
- expect(screen.getByText(/prev/i).closest('button')).toBeDisabled()
- })
-
- it('should navigate on Enter key press', () => {
- const setCurrentPage = vi.fn()
- renderPagination({
- currentPage: 3,
- setCurrentPage,
- children: Prev ,
- })
- fireEvent.keyDown(screen.getByText(/prev/i).closest('button')!, { key: 'Enter', code: 'Enter', keyCode: 13, which: 13 })
- expect(setCurrentPage).toHaveBeenCalledWith(2)
- })
-
- it('should not navigate on Enter when disabled', () => {
- const setCurrentPage = vi.fn()
- renderPagination({
- currentPage: 0,
- setCurrentPage,
- children: Prev ,
- })
- fireEvent.keyDown(screen.getByText(/prev/i).closest('button')!, { key: 'Enter', code: 'Enter', keyCode: 13, which: 13 })
- expect(setCurrentPage).not.toHaveBeenCalled()
- })
-
- it('should render with custom as element', () => {
- renderPagination({
- currentPage: 3,
- children: Prev ,
- })
- expect(screen.getByTestId('prev-btn')).toBeInTheDocument()
- })
- })
-
- describe('NextButton', () => {
- it('should render next button', () => {
- renderPagination({
- currentPage: 0,
- children: Next ,
- })
- expect(screen.getByText(/next/i)).toBeInTheDocument()
- })
-
- it('should call setCurrentPage with next page when clicked', () => {
- const setCurrentPage = vi.fn()
- renderPagination({
- currentPage: 0,
- totalPages: 10,
- setCurrentPage,
- children: Next ,
- })
- fireEvent.click(screen.getByText(/next/i))
- expect(setCurrentPage).toHaveBeenCalledWith(1)
- })
-
- it('should not navigate beyond last page', () => {
- const setCurrentPage = vi.fn()
- renderPagination({
- currentPage: 9,
- totalPages: 10,
- setCurrentPage,
- children: Next ,
- })
- fireEvent.click(screen.getByText(/next/i))
- expect(setCurrentPage).not.toHaveBeenCalled()
- })
-
- it('should be disabled on last page', () => {
- renderPagination({
- currentPage: 9,
- totalPages: 10,
- children: Next ,
- })
- expect(screen.getByText(/next/i).closest('button')).toBeDisabled()
- })
-
- it('should navigate on Enter key press', () => {
- const setCurrentPage = vi.fn()
- renderPagination({
- currentPage: 0,
- totalPages: 10,
- setCurrentPage,
- children: Next ,
- })
- fireEvent.keyDown(screen.getByText(/next/i).closest('button')!, { key: 'Enter', code: 'Enter', keyCode: 13, which: 13 })
- expect(setCurrentPage).toHaveBeenCalledWith(1)
- })
-
- it('should not navigate on Enter when disabled', () => {
- const setCurrentPage = vi.fn()
- renderPagination({
- currentPage: 9,
- totalPages: 10,
- setCurrentPage,
- children: Next ,
- })
- fireEvent.keyDown(screen.getByText(/next/i).closest('button')!, { key: 'Enter', code: 'Enter', keyCode: 13, which: 13 })
- expect(setCurrentPage).not.toHaveBeenCalled()
- })
-
- it('should apply dataTestId', () => {
- renderPagination({
- currentPage: 0,
- children: Next ,
- })
- expect(screen.getByTestId('next-btn')).toBeInTheDocument()
- })
- })
-
- describe('PageButton', () => {
- it('should render page number buttons', () => {
- renderPagination({
- currentPage: 0,
- totalPages: 5,
- children: (
- Prev
- Next
-
- ),
- })
- expect(screen.getByText(/prev/i).closest('button')).toBeDisabled()
- expect(screen.getByText(/next/i).closest('button')).toBeDisabled()
- expect(screen.getByText('1')).toBeInTheDocument()
- })
-
- it('should handle zero total pages', () => {
- const { container } = renderPagination({
- currentPage: 0,
- totalPages: 0,
- children: (
- ({ 'aria-label': `Page ${page}` })}
- />
- ),
- })
- expect(screen.getByText('2')).toHaveAttribute('aria-label', 'Page 2')
- })
-
- it('should cover nextPages when edge pages fall perfectly into middle Pages', () => {
- renderPagination({
- currentPage: 5,
- totalPages: 10,
- edgePageCount: 8, // Very large edge page count to hit the filter(!middlePages.includes) branches
- middlePagesSiblingCount: 1,
- children: (
- {truncableText} `
- renderPagination({
- currentPage: 5,
- totalPages: 10,
- truncableClassName: '',
- children: (
-
-
- Log pagination
-
- {pageSummary}
-
-
-
{
- setCurrent(0)
- setLimit(nextLimit)
- }}
- />
-
-
-export default meta
-type Story = StoryObj
-
-export const Playground: Story = {}
-
-export const StartAtMiddle: Story = {
- args: {
- initialPage: 4,
- },
-}
diff --git a/web/app/components/base/pagination/index.tsx b/web/app/components/base/pagination/index.tsx
deleted file mode 100644
index b17a8ff06e4..00000000000
--- a/web/app/components/base/pagination/index.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import type { FC } from 'react'
-import { Button } from '@langgenius/dify-ui/button'
-import { cn } from '@langgenius/dify-ui/cn'
-import { RiArrowLeftLine, RiArrowRightLine } from '@remixicon/react'
-import { useDebounceFn } from 'ahooks'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import Input from '@/app/components/base/input'
-import { Pagination } from './pagination'
-
-export type Props = {
- className?: string
- current: number
- onChange: (cur: number) => void
- total: number
- limit?: number
- onLimitChange?: (limit: number) => void
-}
-
-const CustomizedPagination: FC = ({
- className,
- current,
- onChange,
- total,
- limit = 10,
- onLimitChange,
-}) => {
- const { t } = useTranslation()
- const totalPages = Math.ceil(total / limit)
- const inputRef = React.useRef(null)
- const [showInput, setShowInput] = React.useState(false)
- const [inputValue, setInputValue] = React.useState(current + 1)
- const [showPerPageTip, setShowPerPageTip] = React.useState(false)
-
- const { run: handlePaging } = useDebounceFn((value: string) => {
- if (Number.parseInt(value) > totalPages) {
- setInputValue(totalPages)
- onChange(totalPages - 1)
- setShowInput(false)
- return
- }
- if (Number.parseInt(value) < 1) {
- setInputValue(1)
- onChange(0)
- setShowInput(false)
- return
- }
- onChange(Number.parseInt(value) - 1)
- setInputValue(Number.parseInt(value))
- setShowInput(false)
- }, { wait: 500 })
-
- const handleInputChange = (e: React.ChangeEvent) => {
- const value = e.target.value
- if (!value)
- return setInputValue('')
- if (isNaN(Number.parseInt(value)))
- return setInputValue('')
- setInputValue(Number.parseInt(value))
- }
-
- const handleInputConfirm = () => {
- if (inputValue !== '' && String(inputValue) !== String(current + 1)) {
- handlePaging(String(inputValue))
- return
- }
-
- if (inputValue === '')
- setInputValue(current + 1)
-
- setShowInput(false)
- }
-
- const handleInputKeyDown = (e: React.KeyboardEvent) => {
- if (e.key === 'Enter') {
- e.preventDefault()
- handleInputConfirm()
- }
- else if (e.key === 'Escape') {
- e.preventDefault()
- setInputValue(current + 1)
- setShowInput(false)
- }
- }
-
- const handleInputBlur = () => {
- handleInputConfirm()
- }
-
- return (
-
- }
- disabled={current === 0}
- >
-
-
-
- {!showInput && (
- setShowInput(true)}
- >
-
{current + 1}
-
/
-
{totalPages}
-
-
-
-
-
{showPerPageTip ? t('pagination.perPage', { ns: 'common' }) : ''}
-
setShowPerPageTip(true)}
- onMouseLeave={() => setShowPerPageTip(false)}
- >
-
onLimitChange?.(10)}
- >
- 10
-
-
onLimitChange?.(25)}
- >
- 25
-
-
onLimitChange?.(50)}
- >
- 50
-
-
-
= React.createContext(defaultState)
-
-const PrevButton = ({
- className,
- children,
- dataTestId,
- as = previous()}
- tabIndex={disabled ? '-1' : 0}
- disabled={disabled}
- data-testid={dataTestId}
- onKeyDown={(event: React.KeyboardEvent) => {
- event.preventDefault()
- if (event.key === 'Enter' && !disabled)
- previous()
- }}
- >
- {as.props.children ?? children}
-
- )
-}
-
-const NextButton = ({
- className,
- children,
- dataTestId,
- as = next()}
- tabIndex={disabled ? '-1' : 0}
- disabled={disabled}
- data-testid={dataTestId}
- onKeyDown={(event: React.KeyboardEvent) => {
- event.preventDefault()
- if (event.key === 'Enter' && !disabled)
- next()
- }}
- >
- {as.props.children ?? children}
-
- )
-}
-
-type ITruncableElementProps = {
- prev?: boolean
-}
-
-const TruncableElement = ({ prev }: ITruncableElementProps) => {
- const pagination: IPagination = React.useContext(PaginationContext)
-
- const {
- isPreviousTruncable,
- isNextTruncable,
- truncableText,
- truncableClassName,
- } = pagination
-
- return ((isPreviousTruncable && prev === true) || (isNextTruncable && !prev))
- ? (
- {truncableText}
- )
- : null
-}
-
-const PageButton = ({
- as =
- {
- if (event.key === 'Enter')
- pagination.setCurrentPage(page - 1)
- }}
- onClick={() => pagination.setCurrentPage(page - 1)}
- className={cn(
- className,
- pagination.currentPage + 1 === page
- ? activeClassName
- : inactiveClassName,
- )}
- {...as.props}
- {...(renderExtraProps ? renderExtraProps(page) : {})}
- >
- {page}
-
-
- )
-
- return (
- <>
- {pagination.previousPages.map(renderPageButton)}
-
-
- {paginationProps.children}
-
-
- )
-}
-
-Pagination.PrevButton = PrevButton
-Pagination.NextButton = NextButton
-Pagination.PageButton = PageButton
diff --git a/web/app/components/base/pagination/type.ts b/web/app/components/base/pagination/type.ts
deleted file mode 100644
index 76cffd30576..00000000000
--- a/web/app/components/base/pagination/type.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import type { ButtonHTMLAttributes } from 'react'
-
-type ElementProps = {
- className?: string
- children?: React.ReactNode
- [key: string]: unknown
-}
-
-type IBasePaginationProps = {
- currentPage: number
- setCurrentPage: (page: number) => void
- truncableText?: string
- truncableClassName?: string
-}
-
-type IPaginationProps = IBasePaginationProps & {
- totalPages: number
- edgePageCount: number
- middlePagesSiblingCount: number
- className?: string
- children?: React.ReactNode
-}
-
-type IUsePagination = IBasePaginationProps & {
- pages: number[]
- hasPreviousPage: boolean
- hasNextPage: boolean
- previousPages: number[]
- isPreviousTruncable: boolean
- middlePages: number[]
- isNextTruncable: boolean
- nextPages: number[]
-}
-
-type IPagination = IUsePagination & {
- setCurrentPage: (page: number) => void
-}
-
-type ButtonProps = ButtonHTMLAttributes & {
- as?: React.ReactElement
- children?: string | React.ReactNode
- className?: string
- dataTestId?: string
-}
-
-type PageButtonProps = ButtonProps & {
- /**
- * Provide a custom ReactElement (e.g. Next/Link)
- */
- as?: React.ReactElement
- activeClassName?: string
- inactiveClassName?: string
- dataTestIdActive?: string
- dataTestIdInactive?: string
- renderExtraProps?: (pageNum: number) => {}
-}
-
-export type {
- ButtonProps,
- IPagination,
- IPaginationProps,
- IUsePagination,
- PageButtonProps,
-}
diff --git a/web/app/components/create-app-attribution-bootstrap.tsx b/web/app/components/create-app-attribution-bootstrap.tsx
index fffc73f2606..dca95783280 100644
--- a/web/app/components/create-app-attribution-bootstrap.tsx
+++ b/web/app/components/create-app-attribution-bootstrap.tsx
@@ -1,23 +1,17 @@
-import { memo } from 'react'
import { IS_PROD } from '@/config'
import { headers } from '@/next/headers'
import Script from '@/next/script'
import { buildCreateAppAttributionBootstrapScript } from '@/utils/create-app-tracking'
-const CreateAppAttributionBootstrap = async () => {
- const nonce = IS_PROD ? (await headers()).get('x-nonce') ?? '' : ''
- /* v8 ignore next -- `nonce` is always a string (`''` or header value), so nullish fallback is unreachable in runtime. @preserve */
- const scriptNonce = nonce ?? undefined
-
+export async function CreateAppAttributionBootstrap() {
+ const nonce = IS_PROD ? (await headers()).get('x-nonce') ?? undefined : undefined
return (
)
}
-
-export default memo(CreateAppAttributionBootstrap)
diff --git a/web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx b/web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx
index a7f89c0d853..9002e29f01a 100644
--- a/web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx
@@ -1,5 +1,4 @@
import type { ReactNode } from 'react'
-import type { Props as PaginationProps } from '@/app/components/base/pagination'
import type { SimpleDocumentDetail } from '@/models/datasets'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { act, fireEvent, render, screen } from '@testing-library/react'
@@ -9,6 +8,14 @@ import DocumentList from '../../list'
const mockPush = vi.fn()
+type PaginationProps = {
+ current: number
+ onChange: (page: number) => void
+ total: number
+ limit?: number
+ onLimitChange?: (limit: number) => void
+}
+
vi.mock('@/next/navigation', () => ({
useRouter: () => ({
push: mockPush,
diff --git a/web/app/components/datasets/documents/components/list.tsx b/web/app/components/datasets/documents/components/list.tsx
index 8bcac95e978..4144cad169c 100644
--- a/web/app/components/datasets/documents/components/list.tsx
+++ b/web/app/components/datasets/documents/components/list.tsx
@@ -1,12 +1,11 @@
'use client'
-import type { Props as PaginationProps } from '@/app/components/base/pagination'
import type { SimpleDocumentDetail } from '@/models/datasets'
import { Checkbox } from '@langgenius/dify-ui/checkbox'
import { CheckboxGroup } from '@langgenius/dify-ui/checkbox-group'
+import { Pagination } from '@langgenius/dify-ui/pagination'
import { useBoolean } from 'ahooks'
import { useCallback, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
-import Pagination from '@/app/components/base/pagination'
import EditMetadataBatchModal from '@/app/components/datasets/metadata/edit-metadata-batch/modal'
import useBatchEditDocumentMetadata from '@/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata'
import { useDatasetDetailContextWithSelector as useDatasetDetailContext } from '@/context/dataset-detail'
@@ -19,6 +18,15 @@ import RenameModal from './rename-modal'
type LocalDoc = SimpleDocumentDetail & { percent?: number }
+type PaginationProps = {
+ className?: string
+ current: number
+ total: number
+ limit?: number
+ onChange: (page: number) => void
+ onLimitChange?: (limit: number) => void
+}
+
type DocumentListProps = {
embeddingAvailable: boolean
documents: LocalDoc[]
@@ -48,6 +56,8 @@ const DocumentList = ({
onSortChange,
}: DocumentListProps) => {
const { t } = useTranslation()
+ const pageSize = pagination.limit ?? 10
+ const totalPages = Math.max(Math.ceil(pagination.total / pageSize), 1)
const datasetConfig = useDatasetDetailContext(s => s.dataset)
const chunkingMode = datasetConfig?.doc_form
const isGeneralMode = chunkingMode !== ChunkingMode.parentChild
@@ -198,8 +208,25 @@ const DocumentList = ({
{!!pagination.total && (
pagination.onChange(page - 1)}
+ labels={{
+ previous: t('pagination.previous', { ns: 'common' }),
+ next: t('pagination.next', { ns: 'common' }),
+ editPageNumber: (page, totalPages) => t('pagination.editPageNumber', { ns: 'common', page, totalPages }),
+ pageNumberInput: t('pagination.pageNumber', { ns: 'common' }),
+ }}
+ pageSize={pagination.onLimitChange
+ ? {
+ value: pageSize,
+ options: [10, 25, 50],
+ onValueChange: pagination.onLimitChange,
+ label: t('pagination.perPage', { ns: 'common' }),
+ ariaLabel: t('pagination.perPage', { ns: 'common' }),
+ }
+ : undefined}
/>
)}
diff --git a/web/app/components/datasets/documents/detail/completed/__tests__/index.spec.tsx b/web/app/components/datasets/documents/detail/completed/__tests__/index.spec.tsx
index 0d6a37d64e6..55986304d44 100644
--- a/web/app/components/datasets/documents/detail/completed/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/__tests__/index.spec.tsx
@@ -203,18 +203,22 @@ vi.mock('@/app/components/base/divider', () => ({
default: () =>
- {current}
- {total}
- onChange(current + 1)}>Next
- onLimitChange(20)}>Change Limit
+ {page - 1}
+ {totalPages}
+ onPageChange(page + 1)}>Next
+ {pageSize && (
+ pageSize.onValueChange(20)}>Change Limit
+ )}
),
}))
@@ -1180,15 +1184,14 @@ describe('Inline callback and hook initialization coverage', () => {
})
})
- // Covers paginationTotal in full-doc mode
- it('should compute pagination total from child chunk data in full-doc mode', () => {
+ it('should compute pagination pages from child chunk data in full-doc mode', () => {
mockDocForm.current = ChunkingModeEnum.parentChild
mockParentMode.current = 'full-doc'
mockChildSegmentListData.total = 42
render( = ({
return childSegmentDataHook.childChunkListData?.total || 0
return segmentListDataHook.segmentListData?.total || 0
}, [segmentListDataHook.isFullDocMode, childSegmentDataHook.childChunkListData, segmentListDataHook.segmentListData])
+ const totalPages = Math.max(Math.ceil(paginationTotal / limit), 1)
// Handle page change
const handlePageChange = useCallback((page: number) => {
- setCurrentPage(page + 1)
+ setCurrentPage(page)
}, [])
// Context value
@@ -225,12 +226,22 @@ const Completed: FC = ({
{/* Pagination */}
t('pagination.editPageNumber', { ns: 'common', page, totalPages }),
+ pageNumberInput: t('pagination.pageNumber', { ns: 'common' }),
+ }}
+ pageSize={{
+ value: limit,
+ options: [10, 25, 50],
+ onValueChange: setLimit,
+ label: t('pagination.perPage', { ns: 'common' }),
+ ariaLabel: t('pagination.perPage', { ns: 'common' }),
+ }}
/>
{/* Drawer Group - only render when docForm is available */}
diff --git a/web/app/components/datasets/hit-testing/index.tsx b/web/app/components/datasets/hit-testing/index.tsx
index 8320629159c..f6106761332 100644
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -18,6 +18,7 @@ import {
DrawerPortal,
DrawerViewport,
} from '@langgenius/dify-ui/drawer'
+import { Pagination } from '@langgenius/dify-ui/pagination'
import { useBoolean } from 'ahooks'
import * as React from 'react'
import { useCallback, useEffect, useState } from 'react'
@@ -25,7 +26,6 @@ import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import FloatRightContainer from '@/app/components/base/float-right-container'
import Loading from '@/app/components/base/loading'
-import Pagination from '@/app/components/base/pagination'
import docStyle from '@/app/components/datasets/documents/detail/completed/style.module.css'
import DatasetDetailContext from '@/context/dataset-detail'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@@ -63,6 +63,7 @@ const HitTestingPage: FC = ({ datasetId }: Props) => {
const { data: recordsRes, refetch: recordsRefetch, isLoading: isRecordsLoading } = useDatasetTestingRecords(datasetId, { limit, page: currPage + 1 })
const total = recordsRes?.total || 0
+ const totalPages = total ? Math.max(Math.ceil(total / limit), 1) : 1
const { dataset: currentDataset } = useContext(DatasetDetailContext)
const isExternal = currentDataset?.provider === 'external'
@@ -151,7 +152,19 @@ const HitTestingPage: FC = ({ datasetId }: Props) => {
<>
setCurrPage(page - 1)}
+ labels={{
+ previous: t('pagination.previous', { ns: 'common' }),
+ next: t('pagination.next', { ns: 'common' }),
+ editPageNumber: (page, totalPages) => t('pagination.editPageNumber', { ns: 'common', page, totalPages }),
+ pageNumberInput: t('pagination.pageNumber', { ns: 'common' }),
+ }}
+ />
+ )
: null}
)}
diff --git a/web/app/components/header/__tests__/index.spec.tsx b/web/app/components/header/__tests__/index.spec.tsx
index 0e9ef6493d9..a5e388efe3a 100644
--- a/web/app/components/header/__tests__/index.spec.tsx
+++ b/web/app/components/header/__tests__/index.spec.tsx
@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react'
+import type { AnchorHTMLAttributes, ReactElement } from 'react'
import { fireEvent, screen } from '@testing-library/react'
import { vi } from 'vitest'
import { renderWithSystemFeatures } from '@/__tests__/utils/mock-system-features'
@@ -55,7 +55,7 @@ vi.mock('@/context/workspace-context-provider', () => ({
}))
vi.mock('@/next/link', () => ({
- default: ({ children, href }: { children?: React.ReactNode, href?: string }) => {children} ,
+ default: ({ children, href, ...props }: AnchorHTMLAttributes & { href?: string }) => {children} ,
}))
let mockIsWorkspaceEditor = false
@@ -122,7 +122,9 @@ describe('Header', () => {
it('should render header with main nav components', () => {
renderHeader()
- expect(screen.getByRole('img', { name: /dify logo/i })).toBeInTheDocument()
+ expect(screen.getByRole('link', { name: 'Dify' })).toHaveAttribute('href', '/apps')
+ expect(screen.queryByRole('heading', { level: 1 })).not.toBeInTheDocument()
+ expect(screen.queryByRole('img', { name: /dify logo/i })).not.toBeInTheDocument()
expect(screen.getByTestId('workplace-selector')).toBeInTheDocument()
expect(screen.getByTestId('app-nav')).toBeInTheDocument()
expect(screen.getByTestId('account-dropdown')).toBeInTheDocument()
@@ -166,7 +168,7 @@ describe('Header', () => {
mockMedia = 'mobile'
renderHeader()
- expect(screen.getByRole('img', { name: /dify logo/i })).toBeInTheDocument()
+ expect(screen.getByRole('link', { name: 'Dify' })).toHaveAttribute('href', '/apps')
expect(screen.queryByTestId('env-nav')).not.toBeInTheDocument()
})
@@ -177,8 +179,8 @@ describe('Header', () => {
renderHeader()
- expect(screen.getByText('Acme Workspace')).toBeInTheDocument()
- expect(screen.getByRole('img', { name: /logo/i })).toBeInTheDocument()
+ expect(screen.getByRole('link', { name: 'Acme Workspace' })).toHaveAttribute('href', '/apps')
+ expect(screen.queryByRole('img', { name: /logo/i })).not.toBeInTheDocument()
expect(screen.queryByRole('img', { name: /dify logo/i })).not.toBeInTheDocument()
})
@@ -189,18 +191,18 @@ describe('Header', () => {
renderHeader()
- expect(screen.getByText('Custom Title')).toBeInTheDocument()
- expect(screen.getByRole('img', { name: /dify logo/i })).toBeInTheDocument()
+ expect(screen.getByRole('link', { name: 'Custom Title' })).toHaveAttribute('href', '/apps')
+ expect(screen.queryByRole('img', { name: /dify logo/i })).not.toBeInTheDocument()
})
- it('should show default Dify text when branding enabled but no application_title', () => {
+ it('should use default Dify link label when branding enabled but no application_title', () => {
mockBrandingEnabled = true
mockBrandingTitle = null
mockBrandingLogo = null
renderHeader()
- expect(screen.getByText('Dify')).toBeInTheDocument()
+ expect(screen.getByRole('link', { name: 'Dify' })).toHaveAttribute('href', '/apps')
})
it('should show dataset nav for editor who is not dataset operator', () => {
diff --git a/web/app/components/header/app-nav/__tests__/index.spec.tsx b/web/app/components/header/app-nav/__tests__/index.spec.tsx
index c2b0207b83a..1fd30271ac9 100644
--- a/web/app/components/header/app-nav/__tests__/index.spec.tsx
+++ b/web/app/components/header/app-nav/__tests__/index.spec.tsx
@@ -104,12 +104,23 @@ vi.mock('../../nav', () => ({
onCreate,
onLoadMore,
navigationItems,
+ activeSegment,
+ activeLink,
+ text,
}: {
onCreate: (state: string) => void
onLoadMore?: () => void
navigationItems?: Array<{ id: string, name: string, link: string }>
+ activeSegment?: string | string[]
+ activeLink?: { segment: string, text: string, link: string }
+ text?: string
}) => (
+
{text}
+
{JSON.stringify(activeSegment)}
+ {activeLink && (
+
{`${activeLink.segment}:${activeLink.text}->${activeLink.link}`}
+ )}
{(navigationItems ?? []).map(item => (
{`${item.name} -> ${item.link}`}
@@ -201,6 +212,15 @@ describe('AppNav', () => {
expect(options.getNextPageParam({ has_more: false, page: 3 })).toBeUndefined()
})
+ it('should configure snippets as an active studio child link', () => {
+ setupDefaultMocks()
+ render(
-
+
{
(hovered && curNav)
- ?
+ ?
: isActivated
? activeIcon
: icon
@@ -87,6 +95,19 @@ const Nav = ({
)
}
+ {
+ !curNav && shouldShowActiveLink && (
+ <>
+
/
+
+ {activeLink.text}
+
+
+ )
+ }
,
+}))
+
+vi.mock('@/hooks/use-document-title', () => ({
+ default: vi.fn(),
+}))
+
+const mockObserve = vi.fn()
+const mockDisconnect = vi.fn()
+
+beforeAll(() => {
+ globalThis.IntersectionObserver = class MockIntersectionObserver {
+ constructor(_callback: IntersectionObserverCallback) {}
+
+ observe = mockObserve
+ disconnect = mockDisconnect
+ unobserve = vi.fn()
+ root = null
+ rootMargin = ''
+ thresholds = []
+ takeRecords = () => []
+ } as unknown as typeof IntersectionObserver
+})
+
+const mockRefetch = vi.fn()
+const mockFetchNextPage = vi.fn()
+
+const mockSnippetListState = {
+ data: {
+ pages: [{
+ data: [
+ {
+ id: 'snippet-1',
+ name: 'Sales Snippet',
+ description: 'Builds a sales follow-up.',
+ type: 'node',
+ is_published: true,
+ use_count: 12,
+ tags: [],
+ created_at: 1704067200,
+ created_by: 'creator-1',
+ updated_at: 1704153600,
+ updated_by: 'creator-2',
+ },
+ ],
+ page: 1,
+ limit: 30,
+ total: 1,
+ has_more: false,
+ }],
+ },
+ isLoading: false,
+ isFetching: false,
+ isFetchingNextPage: false,
+ hasNextPage: false,
+ error: null as Error | null,
+}
+
+const renderList = () => {
+ const { wrapper: SystemFeaturesWrapper } = createSystemFeaturesWrapper({
+ systemFeatures: { branding: { enabled: false } },
+ })
+
+ return renderWithNuqs(
+
+ ,
+ )
+}
+
+describe('SnippetList', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockQueryState.tagIDs = []
+ mockQueryState.keywords = ''
+ mockQueryState.creatorID = ''
+ mockIsCurrentWorkspaceEditor.mockReturnValue(true)
+ mockIsCurrentWorkspaceDatasetOperator.mockReturnValue(false)
+ mockUseInfiniteSnippetList.mockReturnValue({
+ ...mockSnippetListState,
+ refetch: mockRefetch,
+ fetchNextPage: mockFetchNextPage,
+ })
+ })
+
+ it('renders the dedicated snippets list layout', () => {
+ renderList()
+
+ expect(screen.getByText('app.studio.filters.allCreators')).toBeInTheDocument()
+ expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
+ expect(screen.getByPlaceholderText('workflow.tabs.searchSnippets')).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'snippet.create' })).toBeInTheDocument()
+ expect(screen.getByRole('link', { name: /Sales Snippet/ })).toHaveAttribute('href', '/snippets/snippet-1/orchestrate')
+ expect(screen.getByTestId('tag-management-modal')).toBeInTheDocument()
+ })
+
+ it('passes creator, tag, and search filters to the snippets list query', () => {
+ mockQueryState.tagIDs = ['tag-1', 'tag-2']
+ mockQueryState.keywords = 'sales'
+ mockQueryState.creatorID = 'creator-1'
+
+ renderList()
+
+ expect(mockUseInfiniteSnippetList).toHaveBeenCalledWith({
+ page: 1,
+ limit: 30,
+ keyword: 'sales',
+ tag_ids: ['tag-1', 'tag-2'],
+ creator_id: 'creator-1',
+ }, {
+ enabled: true,
+ })
+ })
+
+ it('updates the search query state from the search input', () => {
+ renderList()
+
+ fireEvent.change(screen.getByRole('textbox'), { target: { value: 'summary' } })
+
+ expect(mockSetKeywords).toHaveBeenCalledWith('summary')
+ })
+
+ it('clears the search query state', () => {
+ mockQueryState.keywords = 'summary'
+
+ renderList()
+
+ fireEvent.click(screen.getByRole('button', { name: 'common.operation.clear' }))
+
+ expect(mockSetKeywords).toHaveBeenCalledWith('')
+ })
+
+ it('updates the creator query state as a single creator filter', () => {
+ renderList()
+
+ fireEvent.click(screen.getByRole('button', { name: 'app.studio.filters.allCreators' }))
+ fireEvent.click(screen.getByRole('button', { name: /Bob/ }))
+
+ expect(mockSetCreatorID).toHaveBeenCalledWith('creator-2')
+ })
+
+ it('hides the create button for non-editors', () => {
+ mockIsCurrentWorkspaceEditor.mockReturnValue(false)
+
+ renderList()
+
+ expect(screen.queryByRole('button', { name: 'snippet.create' })).not.toBeInTheDocument()
+ })
+
+ it('shows an empty state when no snippets are returned', () => {
+ mockUseInfiniteSnippetList.mockReturnValue({
+ ...mockSnippetListState,
+ data: {
+ pages: [{
+ data: [],
+ page: 1,
+ limit: 30,
+ total: 0,
+ has_more: false,
+ }],
+ },
+ refetch: mockRefetch,
+ fetchNextPage: mockFetchNextPage,
+ })
+
+ renderList()
+
+ expect(screen.getByText('workflow.tabs.noSnippetsFound')).toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/snippet-list/components/__tests__/snippet-card.spec.tsx b/web/app/components/snippet-list/components/__tests__/snippet-card.spec.tsx
new file mode 100644
index 00000000000..e6ecbd4534d
--- /dev/null
+++ b/web/app/components/snippet-list/components/__tests__/snippet-card.spec.tsx
@@ -0,0 +1,196 @@
+import type { SnippetListItem } from '@/types/snippet'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import SnippetCard from '../snippet-card'
+
+const {
+ mockDeleteMutate,
+ mockDownloadBlob,
+ mockExportMutateAsync,
+ mockOnRefresh,
+ mockToastError,
+ mockToastSuccess,
+ mockUpdateMutate,
+} = vi.hoisted(() => ({
+ mockDeleteMutate: vi.fn(),
+ mockDownloadBlob: vi.fn(),
+ mockExportMutateAsync: vi.fn(),
+ mockOnRefresh: vi.fn(),
+ mockToastError: vi.fn(),
+ mockToastSuccess: vi.fn(),
+ mockUpdateMutate: vi.fn(),
+}))
+
+vi.mock('@/context/app-context', () => ({
+ useAppContext: () => ({
+ isCurrentWorkspaceEditor: true,
+ }),
+}))
+
+vi.mock('@/service/use-common', () => ({
+ useMembers: () => ({
+ data: {
+ accounts: [
+ { id: 'creator-id', name: 'Creator', email: 'creator@example.com', avatar: '', avatar_url: null, role: 'editor', last_login_at: '', created_at: '', status: 'active' },
+ { id: 'updater-id', name: 'Updater', email: 'updater@example.com', avatar: '', avatar_url: null, role: 'editor', last_login_at: '', created_at: '', status: 'active' },
+ ],
+ },
+ }),
+}))
+
+vi.mock('@/service/use-snippets', () => ({
+ useDeleteSnippetMutation: () => ({
+ mutate: mockDeleteMutate,
+ isPending: false,
+ }),
+ useExportSnippetMutation: () => ({
+ mutateAsync: mockExportMutateAsync,
+ }),
+ useUpdateSnippetMutation: () => ({
+ mutate: mockUpdateMutate,
+ isPending: false,
+ }),
+}))
+
+vi.mock('@/utils/time', () => ({
+ formatTime: () => 'formatted-time',
+}))
+
+vi.mock('@/utils/download', () => ({
+ downloadBlob: mockDownloadBlob,
+}))
+
+vi.mock('@langgenius/dify-ui/toast', () => ({
+ toast: {
+ success: mockToastSuccess,
+ error: mockToastError,
+ },
+}))
+
+vi.mock('@/features/tag-management/components/tag-selector', () => ({
+ TagSelector: ({ value }: { value: Array<{ name: string }> }) => (
+ {value.map(tag => tag.name).join(', ')}
+ ),
+}))
+
+const createSnippet = (overrides: Partial = {}): SnippetListItem => ({
+ id: 'snippet-1',
+ name: 'Tone Rewriter',
+ description: 'Rewrites rough drafts.',
+ type: 'node',
+ is_published: true,
+ use_count: 19,
+ tags: [],
+ created_at: 1_704_067_200,
+ created_by: 'creator-id',
+ updated_at: 1_704_153_600,
+ updated_by: 'updater-id',
+ ...overrides,
+})
+
+describe('SnippetCard', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('Rendering', () => {
+ it('should render updater name and updated time from member data', () => {
+ render(
+
+ {snippet.name}
+
+
+ {updatedText}
+
+
+
+ {snippet.description}
+
+
+
+ {isCurrentWorkspaceEditor && (
+
+
+ {
+ e.stopPropagation()
+ e.preventDefault()
+ }}
+ >
+
+
+
+ {t('menu.editInfo')}
+
+
+ {t('menu.exportSnippet')}
+
+ {
+ setIsOperationsMenuOpen(false)
+ setIsDeleteDialogOpen(true)
+ }}
+ >
+ {t('menu.deleteSnippet')}
+
+
+
+
+ )}
+
+ {isEditDialogOpen && (
+ setIsEditDialogOpen(false)}
+ onConfirm={handleUpdateSnippet}
+ />
+ )}
+
+
+
+
+ {t('deleteConfirmTitle')}
+
+
+ {t('deleteConfirmContent')}
+
+
+
+ {tCommon('operation.cancel', { ns: 'common' })}
+
+
+ {t('menu.deleteSnippet')}
+
+
+
+
+
+ )
+}
+
+export default SnippetCard
diff --git a/web/app/components/snippet-list/components/snippet-create-button.tsx b/web/app/components/snippet-list/components/snippet-create-button.tsx
new file mode 100644
index 00000000000..5fc7740f99b
--- /dev/null
+++ b/web/app/components/snippet-list/components/snippet-create-button.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import CreateSnippetDialog from '@/app/components/snippets/create-snippet-dialog'
+import { useRouter } from '@/next/navigation'
+import {
+ useCreateSnippetMutation,
+} from '@/service/use-snippets'
+
+const SnippetCreateButton = () => {
+ const { t } = useTranslation('snippet')
+ const { push } = useRouter()
+ const createSnippetMutation = useCreateSnippetMutation()
+ const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
+
+ const handleCreateSnippet = ({
+ name,
+ description,
+ }: {
+ name: string
+ description: string
+ }) => {
+ createSnippetMutation.mutate({
+ body: {
+ name,
+ description: description || undefined,
+ },
+ }, {
+ onSuccess: (snippet) => {
+ toast.success(t('snippet.createSuccess', { ns: 'workflow' }))
+ setIsCreateDialogOpen(false)
+ push(`/snippets/${snippet.id}/orchestrate`)
+ },
+ onError: (error) => {
+ toast.error(error instanceof Error ? error.message : t('createFailed'))
+ },
+ })
+ }
+
+ return (
+ <>
+ setIsCreateDialogOpen(true)}
+ >
+ {t('create')}
+
+
+ {isCreateDialogOpen && (
+ setIsCreateDialogOpen(false)}
+ onConfirm={handleCreateSnippet}
+ />
+ )}
+
+ )
+}
+
+export default SnippetCreateButton
diff --git a/web/app/components/snippet-list/constants.ts b/web/app/components/snippet-list/constants.ts
new file mode 100644
index 00000000000..287d7e231f7
--- /dev/null
+++ b/web/app/components/snippet-list/constants.ts
@@ -0,0 +1 @@
+export const SNIPPET_LIST_SEARCH_DEBOUNCE_MS = 500
diff --git a/web/app/components/snippet-list/hooks/use-snippets-query-state.ts b/web/app/components/snippet-list/hooks/use-snippets-query-state.ts
new file mode 100644
index 00000000000..c0e4ed89e16
--- /dev/null
+++ b/web/app/components/snippet-list/hooks/use-snippets-query-state.ts
@@ -0,0 +1,38 @@
+import { debounce, parseAsArrayOf, parseAsString, useQueryStates } from 'nuqs'
+import { useCallback, useMemo } from 'react'
+import { SNIPPET_LIST_SEARCH_DEBOUNCE_MS } from '../constants'
+
+const snippetListQueryParsers = {
+ tagIDs: parseAsArrayOf(parseAsString, ';')
+ .withDefault([])
+ .withOptions({ history: 'push' }),
+ keywords: parseAsString.withDefault('').withOptions({
+ limitUrlUpdates: debounce(SNIPPET_LIST_SEARCH_DEBOUNCE_MS),
+ }),
+ creatorID: parseAsString
+ .withDefault('')
+ .withOptions({ history: 'push' }),
+}
+
+export function useSnippetsQueryState() {
+ const [query, setQuery] = useQueryStates(snippetListQueryParsers)
+
+ const setKeywords = useCallback((keywords: string) => {
+ setQuery({ keywords })
+ }, [setQuery])
+
+ const setTagIDs = useCallback((tagIDs: string[]) => {
+ setQuery({ tagIDs })
+ }, [setQuery])
+
+ const setCreatorID = useCallback((creatorID: string) => {
+ setQuery({ creatorID })
+ }, [setQuery])
+
+ return useMemo(() => ({
+ query,
+ setKeywords,
+ setTagIDs,
+ setCreatorID,
+ }), [query, setCreatorID, setKeywords, setTagIDs])
+}
diff --git a/web/app/components/snippet-list/index.tsx b/web/app/components/snippet-list/index.tsx
new file mode 100644
index 00000000000..a278611aa94
--- /dev/null
+++ b/web/app/components/snippet-list/index.tsx
@@ -0,0 +1,195 @@
+'use client'
+
+import type { SnippetListItem } from '@/types/snippet'
+import { cn } from '@langgenius/dify-ui/cn'
+import { Input } from '@langgenius/dify-ui/input'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { useDebounce } from 'ahooks'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAppContext } from '@/context/app-context'
+import { TagFilter } from '@/features/tag-management/components/tag-filter'
+import useDocumentTitle from '@/hooks/use-document-title'
+import dynamic from '@/next/dynamic'
+import { systemFeaturesQueryOptions } from '@/service/system-features'
+import { useInfiniteSnippetList } from '@/service/use-snippets'
+import CreatorsFilter from '../apps/creators-filter'
+import Empty from '../apps/empty'
+import Footer from '../apps/footer'
+import SnippetCard from './components/snippet-card'
+import SnippetCreateButton from './components/snippet-create-button'
+import { SNIPPET_LIST_SEARCH_DEBOUNCE_MS } from './constants'
+import { useSnippetsQueryState } from './hooks/use-snippets-query-state'
+
+const TagManagementModal = dynamic(() => import('@/features/tag-management/components/tag-management-modal').then(mod => mod.TagManagementModal), {
+ ssr: false,
+})
+
+const SNIPPET_CARD_SKELETON_KEYS = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth']
+
+type SnippetCardSkeletonProps = {
+ count: number
+}
+
+const SnippetCardSkeleton = ({ count }: SnippetCardSkeletonProps) => {
+ return (
+ <>
+ {SNIPPET_CARD_SKELETON_KEYS.slice(0, count).map(key => (
+
+ ))}
+
+ )
+}
+
+const SnippetList = () => {
+ const { t } = useTranslation()
+ const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
+ const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator, isLoadingCurrentWorkspace } = useAppContext()
+ // eslint-disable-next-line react/use-state -- custom URL query hook, not React.useState
+ const {
+ query: { tagIDs, keywords, creatorID },
+ setKeywords,
+ setTagIDs,
+ setCreatorID,
+ } = useSnippetsQueryState()
+ const debouncedKeywords = useDebounce(keywords, { wait: SNIPPET_LIST_SEARCH_DEBOUNCE_MS })
+ const containerRef = useRef(null)
+ const anchorRef = useRef(null)
+ const [showTagManagementModal, setShowTagManagementModal] = useState(false)
+
+ useDocumentTitle(t('tabs.snippets', { ns: 'workflow' }))
+
+ const snippetListQuery = useMemo(() => ({
+ page: 1,
+ limit: 30,
+ keyword: debouncedKeywords,
+ ...(tagIDs.length ? { tag_ids: tagIDs } : {}),
+ ...(creatorID ? { creator_id: creatorID } : {}),
+ }), [creatorID, debouncedKeywords, tagIDs])
+
+ const {
+ data,
+ isLoading,
+ isFetching,
+ isFetchingNextPage,
+ fetchNextPage,
+ hasNextPage,
+ error,
+ refetch,
+ } = useInfiniteSnippetList(snippetListQuery, {
+ enabled: !isCurrentWorkspaceDatasetOperator,
+ })
+
+ useEffect(() => {
+ if (isCurrentWorkspaceDatasetOperator)
+ return
+
+ const hasMore = hasNextPage ?? true
+ let observer: IntersectionObserver | undefined
+
+ if (error) {
+ if (observer)
+ observer.disconnect()
+ return
+ }
+
+ if (anchorRef.current && containerRef.current) {
+ const containerHeight = containerRef.current.clientHeight
+ const dynamicMargin = Math.max(100, Math.min(containerHeight * 0.2, 200))
+
+ observer = new IntersectionObserver((entries) => {
+ if (entries[0]!.isIntersecting && !isLoading && !isFetchingNextPage && !error && hasMore)
+ fetchNextPage()
+ }, {
+ root: containerRef.current,
+ rootMargin: `${dynamicMargin}px`,
+ threshold: 0.1,
+ })
+ observer.observe(anchorRef.current)
+ }
+
+ return () => observer?.disconnect()
+ }, [error, fetchNextPage, hasNextPage, isCurrentWorkspaceDatasetOperator, isFetchingNextPage, isLoading])
+
+ const handleCreatorsChange = useCallback((creatorIDs: string[]) => {
+ setCreatorID(creatorIDs.at(-1) ?? '')
+ }, [setCreatorID])
+
+ const pages = useMemo(() => data?.pages ?? [], [data?.pages])
+ const snippets = useMemo(() => pages.flatMap(({ data: pageSnippets }) => pageSnippets), [pages])
+ const hasAnySnippet = (pages[0]?.total ?? 0) > 0
+ const showSkeleton = isLoading || (isFetching && pages.length === 0)
+
+ return (
+
+
+
+
+
setShowTagManagementModal(true)} />
+
+ setKeywords('')}
+ >
+
+ )}
+
+
+ {(isCurrentWorkspaceEditor || isLoadingCurrentWorkspace) && (
+
+ )}
+
+
+ {showSkeleton
+ ? setShowTagManagementModal(true)}
+ onRefresh={refetch}
+ onTagsChange={refetch}
+ />
+ ))
+ :
+ {!systemFeatures.branding.enabled && (
+
+ )}
+
+
setShowTagManagementModal(false)}
+ onTagsChange={refetch}
+ />
+ {snippetId}
,
+}))
+
+vi.mock('@/next/navigation', () => ({
+ useRouter: () => ({
+ replace: vi.fn(),
+ push: vi.fn(),
+ }),
+}))
+
+vi.mock('@/hooks/use-breakpoints', () => ({
+ default: () => 'desktop',
+ MediaType: { mobile: 'mobile', desktop: 'desktop' },
+}))
+
+vi.mock('@/hooks/use-document-title', () => ({
+ default: vi.fn(),
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+ useStore: (selector: (state: { setAppSidebarExpand: typeof mockSetAppSidebarExpand }) => unknown) => selector({
+ setAppSidebarExpand: mockSetAppSidebarExpand,
+ }),
+}))
+
+vi.mock('@/app/components/workflow', () => ({
+ default: ({ children }: { children: React.ReactNode }) => (
+ {children}
+ ),
+}))
+
+vi.mock('@/app/components/workflow/context', () => ({
+ WorkflowContextProvider: ({ children }: { children: React.ReactNode }) => (
+ {children}
+ ),
+}))
+
+vi.mock('@/app/components/workflow/utils', async (importOriginal) => {
+ const actual = await importOriginal()
+
+ return {
+ ...actual,
+ initialNodes: (nodes: unknown[]) => nodes,
+ initialEdges: (edges: unknown[]) => edges,
+ }
+})
+
+vi.mock('@/app/components/app-sidebar', () => ({
+ default: ({
+ renderHeader,
+ renderNavigation,
+ }: {
+ renderHeader?: (modeState: string) => React.ReactNode
+ renderNavigation?: (modeState: string) => React.ReactNode
+ }) => (
+
+
{renderHeader?.('expand')}
+
{renderNavigation?.('expand')}
+
{name}
+ ),
+}))
+
+vi.mock('@/app/components/app-sidebar/snippet-info', () => ({
+ default: () =>
,
+}))
+
+const mockSnippetDetail: SnippetDetailPayload = {
+ snippet: {
+ id: 'snippet-1',
+ name: 'Tone Rewriter',
+ description: 'A static snippet mock.',
+ updatedAt: 'Updated 2h ago',
+ usage: 'Used 19 times',
+ tags: [],
+ status: 'Draft',
+ },
+ graph: {
+ viewport: { x: 0, y: 0, zoom: 1 },
+ nodes: [],
+ edges: [],
+ },
+ inputFields: [],
+ uiMeta: {
+ inputFieldCount: 0,
+ checklistCount: 0,
+ autoSavedAt: 'Auto-saved · a few seconds ago',
+ },
+}
+
+describe('SnippetPage', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockUseSnippetInit.mockReturnValue({
+ data: mockSnippetDetail,
+ isLoading: false,
+ })
+ })
+
+ it('should render the orchestrate route shell with independent main content', () => {
+ render({isEditMode ? 'edit' : 'create'}
+ ),
+}))
+
+const createField = (overrides: Partial = {}): InputVar => ({
+ type: PipelineInputVarType.textInput,
+ label: 'Blog URL',
+ variable: 'blog_url',
+ required: true,
+ options: [],
+ placeholder: 'Paste a source article URL',
+ max_length: 256,
+ ...overrides,
+})
+
+describe('SnippetInputFieldEditor', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockUseFloatingRight.mockReturnValue({
+ floatingRight: false,
+ floatingRightWidth: 400,
+ })
+ })
+
+ // Verifies the default desktop layout keeps the editor inline with the panel.
+ describe('Rendering', () => {
+ it('should render the add title without floating positioning by default', () => {
+ render(
+ = {}): SnippetDetail => ({
+ id: 'snippet-1',
+ name: 'Snippet Title',
+ description: 'Snippet description',
+ updatedAt: '2026-04-15',
+ usage: '42',
+ tags: [],
+ is_published: true,
+ ...overrides,
+})
+
+describe('SnippetLayout', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ localStorage.clear()
+ })
+
+ describe('Document title', () => {
+ it('should set the document title to the snippet name when snippet detail is available', () => {
+ render(
+
+ content
+ ,
+ )
+
+ expect(mockUseDocumentTitle).toHaveBeenCalledWith('Snippet Title')
+ })
+ })
+
+ describe('Layout', () => {
+ it('should render the detail content without the app detail sidebar navigation', () => {
+ render(
+
+ content
+ ,
+ )
+
+ expect(screen.getByText('content')).toBeInTheDocument()
+ expect(screen.queryByRole('link', { name: 'snippet.sectionOrchestrate' })).not.toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx b/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
new file mode 100644
index 00000000000..5ae1a917b80
--- /dev/null
+++ b/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
@@ -0,0 +1,381 @@
+import type { ReactNode } from 'react'
+import type { WorkflowProps } from '@/app/components/workflow'
+import type { SnippetDetailPayload, SnippetInputField } from '@/models/snippet'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { renderWorkflowComponent } from '@/app/components/workflow/__tests__/workflow-test-env'
+import { PipelineInputVarType } from '@/models/pipeline'
+import SnippetMain from '../snippet-main'
+
+const mockSyncInputFieldsDraft = vi.fn()
+const mockCloseEditor = vi.fn()
+const mockOpenEditor = vi.fn()
+const mockReset = vi.fn()
+const mockSetFields = vi.fn()
+const mockSetInputPanelOpen = vi.fn()
+const mockSetPublishMenuOpen = vi.fn()
+const mockToggleInputPanel = vi.fn()
+const mockTogglePublishMenu = vi.fn()
+const mockPublishSnippetMutateAsync = vi.fn()
+const mockUseSnippetPublishedWorkflow = vi.fn()
+const mockFetchInspectVars = vi.fn()
+const mockHandleBackupDraft = vi.fn()
+const mockHandleLoadBackupDraft = vi.fn()
+const mockHandleRestoreFromPublishedWorkflow = vi.fn()
+const mockHandleRun = vi.fn()
+const mockHandleStartWorkflowRun = vi.fn()
+const mockHandleStopRun = vi.fn()
+const mockHandleWorkflowStartRunInWorkflow = vi.fn()
+const mockHandleCheckBeforePublish = vi.fn()
+const mockInspectVarsCrud = {
+ hasNodeInspectVars: vi.fn(),
+ hasSetInspectVar: vi.fn(),
+ fetchInspectVarValue: vi.fn(),
+ editInspectVarValue: vi.fn(),
+ renameInspectVarName: vi.fn(),
+ appendNodeInspectVars: vi.fn(),
+ deleteInspectVar: vi.fn(),
+ deleteNodeInspectorVars: vi.fn(),
+ deleteAllInspectorVars: vi.fn(),
+ isInspectVarEdited: vi.fn(),
+ resetToLastRunVar: vi.fn(),
+ invalidateSysVarValues: vi.fn(),
+ resetConversationVar: vi.fn(),
+ invalidateConversationVarValues: vi.fn(),
+}
+let capturedHooksStore: Record | undefined
+let snippetDetailStoreState: {
+ editingField: SnippetInputField | null
+ fields: SnippetInputField[]
+ isEditorOpen: boolean
+ isInputPanelOpen: boolean
+ isPublishMenuOpen: boolean
+ closeEditor: typeof mockCloseEditor
+ openEditor: typeof mockOpenEditor
+ reset: typeof mockReset
+ setFields: typeof mockSetFields
+ setInputPanelOpen: typeof mockSetInputPanelOpen
+ setPublishMenuOpen: typeof mockSetPublishMenuOpen
+ toggleInputPanel: typeof mockToggleInputPanel
+ togglePublishMenu: typeof mockTogglePublishMenu
+}
+
+vi.mock('@/app/components/snippets/store', () => ({
+ useSnippetDetailStore: (selector: (state: typeof snippetDetailStoreState) => unknown) => selector(snippetDetailStoreState),
+}))
+
+vi.mock('@/service/use-snippet-workflows', () => ({
+ usePublishSnippetWorkflowMutation: () => ({
+ mutateAsync: mockPublishSnippetMutateAsync,
+ isPending: false,
+ }),
+ useSnippetPublishedWorkflow: () => mockUseSnippetPublishedWorkflow(),
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-configs-map', () => ({
+ useConfigsMap: () => ({
+ flowId: 'snippet-1',
+ flowType: 'snippet',
+ fileSettings: {},
+ }),
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-fetch-workflow-inspect-vars', () => ({
+ useSetWorkflowVarsWithValue: () => ({
+ fetchInspectVars: mockFetchInspectVars,
+ }),
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-checklist', () => ({
+ useChecklistBeforePublish: () => ({
+ handleCheckBeforePublish: mockHandleCheckBeforePublish,
+ }),
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-inspect-vars-crud', () => ({
+ useInspectVarsCrud: () => mockInspectVarsCrud,
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-nodes-sync-draft', () => ({
+ useNodesSyncDraft: () => ({
+ doSyncWorkflowDraft: vi.fn(),
+ syncInputFieldsDraft: mockSyncInputFieldsDraft,
+ syncWorkflowDraftWhenPageClose: vi.fn(),
+ }),
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-snippet-refresh-draft', () => ({
+ useSnippetRefreshDraft: () => ({
+ handleRefreshWorkflowDraft: vi.fn(),
+ }),
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-snippet-run', () => ({
+ useSnippetRun: () => ({
+ handleBackupDraft: mockHandleBackupDraft,
+ handleLoadBackupDraft: mockHandleLoadBackupDraft,
+ handleRestoreFromPublishedWorkflow: mockHandleRestoreFromPublishedWorkflow,
+ handleRun: mockHandleRun,
+ handleStopRun: mockHandleStopRun,
+ }),
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-snippet-start-run', () => ({
+ useSnippetStartRun: () => ({
+ handleStartWorkflowRun: mockHandleStartWorkflowRun,
+ handleWorkflowStartRunInWorkflow: mockHandleWorkflowStartRunInWorkflow,
+ }),
+}))
+
+vi.mock('@/app/components/workflow', () => ({
+ WorkflowWithInnerContext: ({
+ children,
+ hooksStore,
+ }: {
+ children: ReactNode
+ hooksStore?: Record
+ }) => {
+ capturedHooksStore = hooksStore
+
+ return (
+ {children}
+ )
+ },
+}))
+
+vi.mock('@/app/components/snippets/components/snippet-children', () => ({
+ default: ({
+ onCancel,
+ onPublish,
+ }: {
+ onCancel: () => void
+ onPublish: () => void
+ }) => (
+
+ publish
+ cancel
+
+ ),
+}))
+
+vi.mock('@/app/components/snippets/components/snippet-sidebar', () => ({
+ default: ({
+ children,
+ onRemove,
+ }: {
+ children?: ReactNode
+ onRemove: (index: number) => void
+ }) => (
+
+ {children}
+ onRemove(0)}>remove
+
+ ),
+}))
+
+vi.mock('@/app/components/snippets/components/input-field-editor', () => ({
+ default: ({
+ onSubmit,
+ }: {
+ onSubmit: (field: SnippetInputField) => void
+ }) => (
+ onSubmit({
+ type: PipelineInputVarType.textInput,
+ label: 'New Field',
+ variable: 'new_field',
+ required: true,
+ })}
+ >
+ submit
+
+ ),
+}))
+
+const payload: SnippetDetailPayload = {
+ snippet: {
+ id: 'snippet-1',
+ name: 'Snippet',
+ description: 'desc',
+ updatedAt: '2026-03-29 10:00',
+ usage: '0',
+ tags: [],
+ },
+ graph: {
+ nodes: [],
+ edges: [],
+ viewport: { x: 0, y: 0, zoom: 1 },
+ },
+ inputFields: [
+ {
+ type: PipelineInputVarType.textInput,
+ label: 'Blog URL',
+ variable: 'blog_url',
+ required: true,
+ },
+ ],
+ uiMeta: {
+ inputFieldCount: 1,
+ checklistCount: 0,
+ autoSavedAt: '2026-03-29 10:00',
+ },
+}
+
+const renderSnippetMain = () => {
+ return renderWorkflowComponent(
+
+ },
+}))
+
+const defaultFields: SnippetInputField[] = []
+
+describe('SnippetWorkflowPanel', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ capturedPanelProps = null
+ })
+
+ // Verifies snippet panel wires version history support into the shared workflow panel.
+ describe('Rendering', () => {
+ it('should pass snippet version history panel props to the shared workflow panel', async () => {
+ render(
+ = {}): SnippetInputField => ({
+ type: PipelineInputVarType.textInput,
+ label: 'Blog URL',
+ variable: 'blog_url',
+ required: true,
+ ...overrides,
+})
+
+describe('useSnippetInputFieldActions', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ snippetDetailStoreState = {
+ editingField: null,
+ fields: [],
+ isEditorOpen: false,
+ isInputPanelOpen: true,
+ closeEditor: mockCloseEditor,
+ openEditor: mockOpenEditor,
+ setFields: mockSetFields,
+ setInputPanelOpen: mockSetInputPanelOpen,
+ toggleInputPanel: mockToggleInputPanel,
+ }
+ mockSetFields.mockImplementation((fields: SnippetInputField[]) => {
+ snippetDetailStoreState.fields = fields
+ })
+ mockSyncInputFieldsDraft.mockResolvedValue(undefined)
+ })
+
+ describe('Field sync', () => {
+ it('should remove a field and sync the draft', () => {
+ snippetDetailStoreState.fields = [createField()]
+ const { result } = renderHook(() => useSnippetInputFieldActions({
+ snippetId: 'snippet-1',
+ }))
+
+ act(() => {
+ result.current.handleRemoveField(0)
+ })
+
+ expect(mockSetFields).toHaveBeenCalledWith([])
+ expect(mockSyncInputFieldsDraft).toHaveBeenCalledWith([], {
+ onRefresh: expect.any(Function),
+ })
+ })
+
+ it('should append a new field and close the editor after syncing', () => {
+ snippetDetailStoreState.fields = [createField()]
+ const { result } = renderHook(() => useSnippetInputFieldActions({
+ snippetId: 'snippet-1',
+ }))
+
+ act(() => {
+ result.current.handleSubmitField(createField({
+ label: 'Topic',
+ variable: 'topic',
+ }))
+ })
+
+ expect(mockSetFields).toHaveBeenCalledWith([
+ createField(),
+ createField({
+ label: 'Topic',
+ variable: 'topic',
+ }),
+ ])
+ expect(mockSyncInputFieldsDraft).toHaveBeenCalledWith([
+ createField(),
+ createField({
+ label: 'Topic',
+ variable: 'topic',
+ }),
+ ], {
+ onRefresh: expect.any(Function),
+ })
+ expect(mockCloseEditor).toHaveBeenCalledTimes(1)
+ })
+
+ it('should reject duplicated variables without syncing', () => {
+ snippetDetailStoreState.fields = [createField()]
+ const { result } = renderHook(() => useSnippetInputFieldActions({
+ snippetId: 'snippet-1',
+ }))
+
+ act(() => {
+ result.current.handleSubmitField(createField({
+ label: 'Duplicated',
+ variable: 'blog_url',
+ }))
+ })
+
+ expect(toast.error).toHaveBeenCalledWith('datasetPipeline.inputFieldPanel.error.variableDuplicate')
+ expect(mockSyncInputFieldsDraft).not.toHaveBeenCalled()
+ expect(mockCloseEditor).not.toHaveBeenCalled()
+ expect(mockSetFields).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('Panel actions', () => {
+ it('should close the editor before toggling the input panel when the panel is open', () => {
+ snippetDetailStoreState.fields = [createField()]
+ const { result } = renderHook(() => useSnippetInputFieldActions({
+ snippetId: 'snippet-1',
+ }))
+
+ act(() => {
+ result.current.handleToggleInputPanel()
+ })
+
+ expect(mockCloseEditor).toHaveBeenCalledTimes(1)
+ expect(mockToggleInputPanel).toHaveBeenCalledTimes(1)
+ })
+
+ it('should close the input panel and clear the editor state', () => {
+ snippetDetailStoreState.fields = [createField()]
+ const { result } = renderHook(() => useSnippetInputFieldActions({
+ snippetId: 'snippet-1',
+ }))
+
+ act(() => {
+ result.current.handleCloseInputPanel()
+ })
+
+ expect(mockCloseEditor).toHaveBeenCalledTimes(1)
+ expect(mockSetInputPanelOpen).toHaveBeenCalledWith(false)
+ })
+ })
+})
diff --git a/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts b/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts
new file mode 100644
index 00000000000..82f33f2e440
--- /dev/null
+++ b/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts
@@ -0,0 +1,174 @@
+import { toast } from '@langgenius/dify-ui/toast'
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { useSnippetPublish } from '../use-snippet-publish'
+
+const mockMutateAsync = vi.fn()
+const mockSetPublishMenuOpen = vi.fn()
+const mockUseKeyPress = vi.fn()
+const mockSetPublishedAt = vi.fn()
+const mockSetQueryData = vi.fn()
+const mockHandleCheckBeforePublish = vi.fn<() => Promise>()
+
+let isPublishMenuOpen = false
+let isPending = false
+let shortcutHandler: ((event: KeyboardEvent) => void) | undefined
+
+vi.mock('ahooks', () => ({
+ useKeyPress: (...args: Parameters) => mockUseKeyPress(...args),
+}))
+
+vi.mock('@langgenius/dify-ui/toast', () => ({
+ toast: {
+ error: vi.fn(),
+ success: vi.fn(),
+ },
+}))
+
+vi.mock('@tanstack/react-query', () => ({
+ useQueryClient: () => ({
+ setQueryData: mockSetQueryData,
+ }),
+}))
+
+vi.mock('@/service/use-snippet-workflows', () => ({
+ usePublishSnippetWorkflowMutation: () => ({
+ mutateAsync: mockMutateAsync,
+ isPending,
+ }),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+ useWorkflowStore: () => ({
+ getState: () => ({
+ setPublishedAt: mockSetPublishedAt,
+ }),
+ }),
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-checklist', () => ({
+ useChecklistBeforePublish: () => ({
+ handleCheckBeforePublish: mockHandleCheckBeforePublish,
+ }),
+}))
+
+vi.mock('../../../store', () => ({
+ useSnippetDetailStore: (selector: (state: {
+ isPublishMenuOpen: boolean
+ setPublishMenuOpen: typeof mockSetPublishMenuOpen
+ }) => unknown) => selector({
+ isPublishMenuOpen,
+ setPublishMenuOpen: mockSetPublishMenuOpen,
+ }),
+}))
+
+describe('useSnippetPublish', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ isPublishMenuOpen = false
+ isPending = false
+ shortcutHandler = undefined
+ mockHandleCheckBeforePublish.mockResolvedValue(true)
+ mockMutateAsync.mockResolvedValue({ created_at: 1_712_345_678 })
+ mockUseKeyPress.mockImplementation((_key, handler) => {
+ shortcutHandler = handler
+ })
+ })
+
+ describe('Publish action', () => {
+ it('should publish the snippet, close the menu, and show success feedback', async () => {
+ const { result } = renderHook(() => useSnippetPublish({
+ snippetId: 'snippet-1',
+ }))
+
+ await act(async () => {
+ await result.current.handlePublish()
+ })
+
+ expect(mockHandleCheckBeforePublish).toHaveBeenCalledTimes(1)
+ expect(mockMutateAsync).toHaveBeenCalledWith({
+ params: { snippetId: 'snippet-1' },
+ })
+ expect(mockSetQueryData).toHaveBeenCalledTimes(1)
+ const setQueryDataCall = mockSetQueryData.mock.calls[0]
+ expect(setQueryDataCall).toBeDefined()
+ const updateSnippetDetail = setQueryDataCall![1] as (old: { is_published: boolean }) => { is_published: boolean }
+ expect(updateSnippetDetail({ is_published: false })).toEqual({ is_published: true })
+ expect(mockSetPublishedAt).toHaveBeenCalledWith(1_712_345_678)
+ expect(mockSetPublishMenuOpen).toHaveBeenCalledWith(false)
+ expect(toast.success).toHaveBeenCalledWith('snippet.publishSuccess')
+ })
+
+ it('should not publish the snippet when checklist validation fails', async () => {
+ mockHandleCheckBeforePublish.mockResolvedValue(false)
+
+ const { result } = renderHook(() => useSnippetPublish({
+ snippetId: 'snippet-1',
+ }))
+
+ await act(async () => {
+ await result.current.handlePublish()
+ })
+
+ expect(mockHandleCheckBeforePublish).toHaveBeenCalledTimes(1)
+ expect(mockMutateAsync).not.toHaveBeenCalled()
+ expect(mockSetQueryData).not.toHaveBeenCalled()
+ expect(mockSetPublishedAt).not.toHaveBeenCalled()
+ expect(mockSetPublishMenuOpen).not.toHaveBeenCalled()
+ expect(toast.success).not.toHaveBeenCalled()
+ })
+
+ it('should surface publish errors through toast feedback', async () => {
+ mockMutateAsync.mockRejectedValue(new Error('publish failed'))
+
+ const { result } = renderHook(() => useSnippetPublish({
+ snippetId: 'snippet-1',
+ }))
+
+ await act(async () => {
+ await result.current.handlePublish()
+ })
+
+ expect(toast.error).toHaveBeenCalledWith('publish failed')
+ expect(mockSetPublishMenuOpen).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('Keyboard shortcut', () => {
+ it('should trigger publish on ctrl+shift+p in the orchestrate section', async () => {
+ renderHook(() => useSnippetPublish({
+ snippetId: 'snippet-1',
+ }))
+
+ const event = new KeyboardEvent('keydown')
+ const preventDefault = vi.spyOn(event, 'preventDefault')
+
+ act(() => {
+ shortcutHandler?.(event)
+ })
+
+ await waitFor(() => {
+ expect(mockMutateAsync).toHaveBeenCalledWith({
+ params: { snippetId: 'snippet-1' },
+ })
+ })
+ expect(preventDefault).toHaveBeenCalledTimes(1)
+ })
+
+ it('should ignore the shortcut while publishing is pending', () => {
+ isPending = true
+ renderHook(() => useSnippetPublish({
+ snippetId: 'snippet-1',
+ }))
+
+ const event = new KeyboardEvent('keydown')
+ const preventDefault = vi.spyOn(event, 'preventDefault')
+
+ act(() => {
+ shortcutHandler?.(event)
+ })
+
+ expect(mockMutateAsync).not.toHaveBeenCalled()
+ expect(preventDefault).not.toHaveBeenCalled()
+ })
+ })
+})
diff --git a/web/app/components/snippets/components/hooks/use-snippet-input-field-actions.ts b/web/app/components/snippets/components/hooks/use-snippet-input-field-actions.ts
new file mode 100644
index 00000000000..6639806f63a
--- /dev/null
+++ b/web/app/components/snippets/components/hooks/use-snippet-input-field-actions.ts
@@ -0,0 +1,96 @@
+import type { SnippetInputField } from '@/models/snippet'
+import { toast } from '@langgenius/dify-ui/toast'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useShallow } from 'zustand/react/shallow'
+import { useNodesSyncDraft } from '../../hooks/use-nodes-sync-draft'
+import { useSnippetDetailStore } from '../../store'
+
+type UseSnippetInputFieldActionsOptions = {
+ snippetId: string
+}
+
+export const useSnippetInputFieldActions = ({
+ snippetId,
+}: UseSnippetInputFieldActionsOptions) => {
+ const { t } = useTranslation('snippet')
+ const { syncInputFieldsDraft } = useNodesSyncDraft(snippetId)
+ const {
+ editingField,
+ fields,
+ isEditorOpen,
+ isInputPanelOpen,
+ closeEditor,
+ openEditor,
+ setFields,
+ setInputPanelOpen,
+ toggleInputPanel,
+ } = useSnippetDetailStore(useShallow(state => ({
+ editingField: state.editingField,
+ fields: state.fields,
+ isEditorOpen: state.isEditorOpen,
+ isInputPanelOpen: state.isInputPanelOpen,
+ closeEditor: state.closeEditor,
+ openEditor: state.openEditor,
+ setFields: state.setFields,
+ setInputPanelOpen: state.setInputPanelOpen,
+ toggleInputPanel: state.toggleInputPanel,
+ })))
+
+ const handleSortChange = useCallback((newFields: SnippetInputField[]) => {
+ setFields(newFields)
+ }, [setFields])
+
+ const handleRemoveField = useCallback((index: number) => {
+ const nextFields = fields.filter((_, currentIndex) => currentIndex !== index)
+ setFields(nextFields)
+ void syncInputFieldsDraft(nextFields, {
+ onRefresh: setFields,
+ })
+ }, [fields, setFields, syncInputFieldsDraft])
+
+ const handleSubmitField = useCallback((field: SnippetInputField) => {
+ const originalVariable = editingField?.variable
+ const duplicated = fields.some(item => item.variable === field.variable && item.variable !== originalVariable)
+
+ if (duplicated) {
+ toast.error(t('inputFieldPanel.error.variableDuplicate', { ns: 'datasetPipeline' }))
+ return
+ }
+
+ const nextFields = originalVariable
+ ? fields.map(item => item.variable === originalVariable ? field : item)
+ : [...fields, field]
+
+ setFields(nextFields)
+ void syncInputFieldsDraft(nextFields, {
+ onRefresh: setFields,
+ })
+ closeEditor()
+ }, [closeEditor, editingField?.variable, fields, setFields, syncInputFieldsDraft, t])
+
+ const handleToggleInputPanel = useCallback(() => {
+ if (isInputPanelOpen)
+ closeEditor()
+ toggleInputPanel()
+ }, [closeEditor, isInputPanelOpen, toggleInputPanel])
+
+ const handleCloseInputPanel = useCallback(() => {
+ closeEditor()
+ setInputPanelOpen(false)
+ }, [closeEditor, setInputPanelOpen])
+
+ return {
+ editingField,
+ fields,
+ isEditorOpen,
+ isInputPanelOpen,
+ openEditor,
+ closeEditor,
+ handleCloseInputPanel,
+ handleRemoveField,
+ handleSortChange,
+ handleSubmitField,
+ handleToggleInputPanel,
+ }
+}
diff --git a/web/app/components/snippets/components/hooks/use-snippet-publish.ts b/web/app/components/snippets/components/hooks/use-snippet-publish.ts
new file mode 100644
index 00000000000..3133b9aaa26
--- /dev/null
+++ b/web/app/components/snippets/components/hooks/use-snippet-publish.ts
@@ -0,0 +1,75 @@
+import type { Snippet as SnippetContract } from '@/types/snippet'
+import { toast } from '@langgenius/dify-ui/toast'
+import { useQueryClient } from '@tanstack/react-query'
+import { useKeyPress } from 'ahooks'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useShallow } from 'zustand/react/shallow'
+import { useChecklistBeforePublish } from '@/app/components/workflow/hooks/use-checklist'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
+import { consoleQuery } from '@/service/client'
+import { usePublishSnippetWorkflowMutation } from '@/service/use-snippet-workflows'
+import { useSnippetDetailStore } from '../../store'
+
+type UseSnippetPublishOptions = {
+ snippetId: string
+}
+
+export const useSnippetPublish = ({
+ snippetId,
+}: UseSnippetPublishOptions) => {
+ const { t } = useTranslation('snippet')
+ const workflowStore = useWorkflowStore()
+ const queryClient = useQueryClient()
+ const publishSnippetMutation = usePublishSnippetWorkflowMutation(snippetId)
+ const { handleCheckBeforePublish } = useChecklistBeforePublish()
+ const {
+ isPublishMenuOpen,
+ setPublishMenuOpen,
+ } = useSnippetDetailStore(useShallow(state => ({
+ isPublishMenuOpen: state.isPublishMenuOpen,
+ setPublishMenuOpen: state.setPublishMenuOpen,
+ })))
+
+ const handlePublish = useCallback(async () => {
+ try {
+ const canPublish = await handleCheckBeforePublish()
+ if (!canPublish)
+ return
+
+ const publishedWorkflow = await publishSnippetMutation.mutateAsync({
+ params: { snippetId },
+ })
+ queryClient.setQueryData(
+ consoleQuery.snippets.detail.queryKey({
+ input: {
+ params: { snippetId },
+ },
+ }),
+ old => old ? { ...old, is_published: true } : old,
+ )
+ workflowStore.getState().setPublishedAt(publishedWorkflow.created_at)
+ setPublishMenuOpen(false)
+ toast.success(t('publishSuccess'))
+ }
+ catch (error) {
+ toast.error(error instanceof Error ? error.message : t('publishFailed'))
+ }
+ }, [handleCheckBeforePublish, publishSnippetMutation, queryClient, setPublishMenuOpen, snippetId, t, workflowStore])
+
+ useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (event) => {
+ if (publishSnippetMutation.isPending)
+ return
+
+ event.preventDefault()
+ void handlePublish()
+ }, { exactMatch: true, useCapture: true })
+
+ return {
+ handlePublish,
+ isPublishMenuOpen,
+ isPublishing: publishSnippetMutation.isPending,
+ setPublishMenuOpen,
+ }
+}
diff --git a/web/app/components/snippets/components/input-field-editor.tsx b/web/app/components/snippets/components/input-field-editor.tsx
new file mode 100644
index 00000000000..a50f7bd0a4e
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-editor.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import type { FormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/types'
+import type { SnippetInputField } from '@/models/snippet'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { convertFormDataToINputField, convertToInputFieldFormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/utils'
+import { useFloatingRight } from '@/app/components/rag-pipeline/components/panel/input-field/hooks'
+import InputFieldForm from './input-field-form'
+
+type SnippetInputFieldEditorProps = {
+ field?: SnippetInputField | null
+ onClose: () => void
+ onSubmit: (field: SnippetInputField) => void
+}
+
+const SnippetInputFieldEditor = ({
+ field,
+ onClose,
+ onSubmit,
+}: SnippetInputFieldEditorProps) => {
+ const { t } = useTranslation()
+ const { floatingRight, floatingRightWidth } = useFloatingRight(400)
+
+ const initialData = useMemo(() => {
+ return convertToInputFieldFormData(field || undefined)
+ }, [field])
+
+ const handleSubmit = useCallback((value: FormData) => {
+ onSubmit(convertFormDataToINputField(value))
+ }, [onSubmit])
+
+ return (
+
+
+ {field ? t('inputFieldPanel.editInputField', { ns: 'datasetPipeline' }) : t('inputFieldPanel.addInputField', { ns: 'datasetPipeline' })}
+
+
+
+
+
) => unknown
+ setFieldValue: (fieldName: DeepKeys, value: unknown) => void
+ supportFile: boolean
+}
+
+export const useSnippetInputFieldConfigurations = (props: UseSnippetInputFieldConfigurationsProps) => {
+ const configurations = useConfigurations(props)
+
+ return useMemo(() => {
+ return configurations.map((configuration) => {
+ const isTextMaxLengthField = configuration.variable === 'maxLength'
+ && configuration.showConditions?.some(condition => condition.value === PipelineInputVarType.textInput)
+
+ if (!isTextMaxLengthField)
+ return configuration
+
+ return {
+ ...configuration,
+ required: false,
+ }
+ })
+ }, [configurations])
+}
diff --git a/web/app/components/snippets/components/input-field-form/index.tsx b/web/app/components/snippets/components/input-field-form/index.tsx
new file mode 100644
index 00000000000..0d8dbdd8c3a
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-form/index.tsx
@@ -0,0 +1,95 @@
+/* eslint-disable react/static-components -- Mirrors the existing TanStack withForm factory pattern for input-field forms. */
+import type { FormData, InputFieldFormProps } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/types'
+import type { MoreInfo } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Divider from '@/app/components/base/divider'
+import { useFileSizeLimit } from '@/app/components/base/file-uploader/hooks'
+import { useAppForm } from '@/app/components/base/form'
+import HiddenFields from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/hidden-fields'
+import ShowAllSettings from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/show-all-settings'
+import { ChangeType } from '@/app/components/workflow/types'
+import { useFileUploadConfig } from '@/service/use-common'
+import InitialFields from './initial-fields'
+import { createSnippetInputFieldSchema } from './schema'
+
+const SnippetInputFieldForm = ({ initialData, supportFile = false, onCancel, onSubmit, isEditMode = true }: InputFieldFormProps) => {
+ const { t } = useTranslation()
+ const { data: fileUploadConfigResponse } = useFileUploadConfig()
+ const { maxFileUploadLimit } = useFileSizeLimit(fileUploadConfigResponse)
+ const inputFieldForm = useAppForm({
+ defaultValues: initialData,
+ validators: {
+ onSubmit: ({ value }) => {
+ const { type } = value
+ const schema = createSnippetInputFieldSchema(type, t, { maxFileUploadLimit })
+ const result = schema.safeParse(value)
+ if (!result.success) {
+ const issues = result.error.issues
+ const firstIssue = issues[0]
+ if (!firstIssue)
+ return t('errorMsg.fieldRequired', { ns: 'common' })
+ const errorMessage = `"${firstIssue.path.join('.')}" ${firstIssue.message}`
+ toast.error(errorMessage)
+ return errorMessage
+ }
+ return undefined
+ },
+ },
+ onSubmit: ({ value }) => {
+ let moreInfo: MoreInfo | undefined
+ if (isEditMode && value.variable !== initialData?.variable) {
+ moreInfo = {
+ type: ChangeType.changeVarName,
+ payload: { beforeKey: initialData?.variable || '', afterKey: value.variable },
+ }
+ }
+ onSubmit(value as FormData, moreInfo)
+ },
+ })
+ const [showAllSettings, setShowAllSettings] = useState(false)
+ const InitialFieldsComp = InitialFields({
+ initialData,
+ supportFile,
+ })
+ const HiddenFieldsComp = HiddenFields({
+ initialData,
+ })
+ const handleShowAllSettings = useCallback(() => {
+ setShowAllSettings(true)
+ }, [])
+ const ShowAllSettingComp = ShowAllSettings({
+ initialData,
+ handleShowAllSettings,
+ })
+
+ return (
+
+ )
+}
+
+export default SnippetInputFieldForm
diff --git a/web/app/components/snippets/components/input-field-form/initial-fields.tsx b/web/app/components/snippets/components/input-field-form/initial-fields.tsx
new file mode 100644
index 00000000000..0028995d761
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-form/initial-fields.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { useCallback } from 'react'
+import { withForm } from '@/app/components/base/form'
+import InputField from '@/app/components/base/form/form-scenarios/input-field/field'
+import { useSnippetInputFieldConfigurations } from './hooks'
+
+type InitialFieldsProps = {
+ initialData?: Record
+ supportFile: boolean
+}
+
+const InitialFields = ({
+ initialData,
+ supportFile,
+}: InitialFieldsProps) => withForm({
+ defaultValues: initialData,
+ // eslint-disable-next-line react/component-hook-factories
+ render: function Render({
+ form,
+ }) {
+ const getFieldValue = useCallback((fieldName: string) => {
+ return form.getFieldValue(fieldName)
+ }, [form])
+
+ const setFieldValue = useCallback((fieldName: string, value: unknown) => {
+ form.setFieldValue(fieldName, value)
+ }, [form])
+
+ const initialConfigurations = useSnippetInputFieldConfigurations({
+ getFieldValue,
+ setFieldValue,
+ supportFile,
+ })
+
+ return (
+ <>
+ {initialConfigurations.map((config) => {
+ const FieldComponent = InputField({
+ initialData,
+ config,
+ })
+ const key = `${config.variable}-${config.label}-${config.showConditions.map(condition => String(condition.value)).join('-') || 'default'}`
+ return
+
+
+
+ {t('panelTitle')}
+
+
+ {t('panelDescription')}
+
+
+
+
+
+
+
+
+
+
+
+
+ onSortChange(toInputFields(list))}
+ onRemoveField={handleRemove}
+ onEditField={handleEdit}
+ />
+
+
+
+
+ {hasPublishedVersion
+ ? t('common.latestPublished', { ns: 'workflow' })
+ : t('publishMenuCurrentDraft')}
+
+
+ {hasPublishedVersion
+ ? `${t('common.publishedAt', { ns: 'workflow' })} ${formatTimeFromNow(publishedAt)}`
+ : draftUpdatedAt
+ ? `${t('common.autoSaved', { ns: 'workflow' })} · ${formatTimeFromNow(draftUpdatedAt)}`
+ : uiMeta.autoSavedAt}
+
+
+
+ {t('publishButton')}
+
+
+
+
+
+ {children}
,
+ AlertDialogActions: ({ children }: { children: ReactNode }) => {children}
,
+ AlertDialogCancelButton: ({ children }: { children: ReactNode }) => {children} ,
+ AlertDialogConfirmButton: ({ children, onClick }: { children: ReactNode, onClick?: () => void }) => {children} ,
+ AlertDialogContent: ({ children }: { children: ReactNode }) => {children}
,
+ AlertDialogDescription: ({ children }: { children: ReactNode }) => {children}
,
+ AlertDialogTitle: ({ children }: { children: ReactNode }) => {children}
,
+ AlertDialogTrigger: ({ children }: { children: ReactNode }) => {children} ,
+}))
+
+vi.mock('@/app/components/workflow/header', () => ({
+ default: (props: HeaderProps) => {
+ return (
+
+ {props.normal?.components?.title}
+
+ {props.normal?.runAndHistoryProps?.runButtonText ?? 'snippet.testRunButton'}
+
+ {props.normal?.components?.middle}
+
+ )
+ },
+}))
+
+describe('SnippetHeader', () => {
+ const mockCancel = vi.fn()
+ const mockPublish = vi.fn()
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ // Verifies the wrapper passes the expected workflow header configuration.
+ describe('Rendering', () => {
+ it('should configure workflow header slots and hide workflow-only controls', () => {
+ render(
+
+
+
+ {t('cancel')}
+
+
+
+
+ {t('discardChangesTitle')}
+
+
+ {t('discardChangesDescription')}
+
+
+
+ {t('continueEditing')}
+
+
+ {t('discardChanges')}
+
+
+
+
+
·
+
{t('unsavedChanges')}
+
+ {t('inputFieldButton')}
+
+ {count}
+
+
+ )
+}
+
+export default memo(InputFieldButton)
diff --git a/web/app/components/snippets/components/snippet-header/publisher.tsx b/web/app/components/snippets/components/snippet-header/publisher.tsx
new file mode 100644
index 00000000000..cf254aa01c5
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-header/publisher.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { Button } from '@langgenius/dify-ui/button'
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+type PublisherProps = {
+ isPublishing: boolean
+ onPublish: () => void
+}
+
+const Publisher = ({
+ isPublishing,
+ onPublish,
+}: PublisherProps) => {
+ const { t } = useTranslation('snippet')
+
+ return (
+
+ {t('save')}
+
+ )
+}
+
+export default memo(Publisher)
diff --git a/web/app/components/snippets/components/snippet-header/run-mode.tsx b/web/app/components/snippets/components/snippet-header/run-mode.tsx
new file mode 100644
index 00000000000..c8a97053603
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-header/run-mode.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import { cn } from '@langgenius/dify-ui/cn'
+import * as React from 'react'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useWorkflowRun, useWorkflowStartRun } from '@/app/components/workflow/hooks'
+import ShortcutsName from '@/app/components/workflow/shortcuts-name'
+import { useStore } from '@/app/components/workflow/store'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+
+type RunModeProps = {
+ text?: string
+}
+
+const RunMode = ({
+ text,
+}: RunModeProps) => {
+ const { t } = useTranslation('snippet')
+ const { handleWorkflowStartRunInWorkflow } = useWorkflowStartRun()
+ const { handleStopRun } = useWorkflowRun()
+ const workflowRunningData = useStore(s => s.workflowRunningData)
+
+ const isRunning = workflowRunningData?.result.status === WorkflowRunningStatus.Running
+
+ const handleStop = useCallback(() => {
+ handleStopRun(workflowRunningData?.task_id || '')
+ }, [handleStopRun, workflowRunningData?.task_id])
+
+ const { eventEmitter } = useEventEmitterContextContext()
+ eventEmitter?.useSubscription((v) => {
+ if (typeof v !== 'string' && v.type === EVENT_WORKFLOW_STOP)
+ handleStop()
+ })
+
+ return (
+
+
+ {isRunning
+ ? (
+ <>
+
+
+ {isRunning && (
+
+
+ )}
+
+ )
+}
+
+export default React.memo(RunMode)
diff --git a/web/app/components/snippets/components/snippet-layout.tsx b/web/app/components/snippets/components/snippet-layout.tsx
new file mode 100644
index 00000000000..2dd6a8f4354
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-layout.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { SnippetDetail, SnippetSection } from '@/models/snippet'
+import { useTranslation } from 'react-i18next'
+import useDocumentTitle from '@/hooks/use-document-title'
+
+type SnippetLayoutProps = {
+ children: ReactNode
+ section: SnippetSection
+ snippet: SnippetDetail
+ snippetId: string
+}
+
+const SnippetLayout = ({
+ children,
+ snippet,
+}: SnippetLayoutProps) => {
+ const { t } = useTranslation('snippet')
+
+ useDocumentTitle(snippet.name || t('typeLabel'))
+
+ return (
+
+ )
+}
+
+export default SnippetLayout
diff --git a/web/app/components/snippets/components/snippet-main.tsx b/web/app/components/snippets/components/snippet-main.tsx
new file mode 100644
index 00000000000..61c2d45e7ed
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-main.tsx
@@ -0,0 +1,277 @@
+'use client'
+
+import type { WorkflowProps } from '@/app/components/workflow'
+import type { Shape as HooksStoreShape } from '@/app/components/workflow/hooks-store'
+import type { SnippetDetailPayload, SnippetInputField } from '@/models/snippet'
+import {
+ useCallback,
+ useEffect,
+ useMemo,
+} from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { WorkflowWithInnerContext } from '@/app/components/workflow'
+import { useAvailableNodesMetaData } from '@/app/components/workflow-app/hooks'
+import { useSetWorkflowVarsWithValue } from '@/app/components/workflow/hooks/use-fetch-workflow-inspect-vars'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { useSnippetPublishedWorkflow } from '@/service/use-snippet-workflows'
+import { useConfigsMap } from '../hooks/use-configs-map'
+import { useGetRunAndTraceUrl } from '../hooks/use-get-run-and-trace-url'
+import { useInspectVarsCrud } from '../hooks/use-inspect-vars-crud'
+import { useNodesSyncDraft } from '../hooks/use-nodes-sync-draft'
+import { useSnippetRefreshDraft } from '../hooks/use-snippet-refresh-draft'
+import { useSnippetRun } from '../hooks/use-snippet-run'
+import { useSnippetStartRun } from '../hooks/use-snippet-start-run'
+import { useSnippetDetailStore } from '../store'
+import { useSnippetInputFieldActions } from './hooks/use-snippet-input-field-actions'
+import { useSnippetPublish } from './hooks/use-snippet-publish'
+import SnippetInputFieldEditor from './input-field-editor'
+import SnippetChildren from './snippet-children'
+import SnippetSidebar from './snippet-sidebar'
+
+type SnippetMainProps = {
+ payload: SnippetDetailPayload
+ snippetId: string
+} & Pick
+
+type SnippetMainContentProps = {
+ snippetId: string
+ fields: SnippetInputField[]
+ onCancel: () => void
+}
+
+const SnippetMainContent = ({
+ snippetId,
+ fields,
+ onCancel,
+}: SnippetMainContentProps) => {
+ const {
+ handlePublish,
+ isPublishing,
+ } = useSnippetPublish({
+ snippetId,
+ })
+
+ return (
+
+
openEditor()}
+ onEdit={openEditor}
+ onRemove={handleRemoveField}
+ onSortChange={handleSortChange}
+ />
+
+ }
+ >
+
+
+ {isEditorOpen && (
+
+
+ )}
+ = {
+ [PipelineInputVarType.textInput]: InputVarType.textInput,
+ [PipelineInputVarType.paragraph]: InputVarType.paragraph,
+ [PipelineInputVarType.select]: InputVarType.select,
+ [PipelineInputVarType.number]: InputVarType.number,
+ [PipelineInputVarType.singleFile]: InputVarType.singleFile,
+ [PipelineInputVarType.multiFiles]: InputVarType.multiFiles,
+ [PipelineInputVarType.checkbox]: InputVarType.checkbox,
+}
+
+const buildPreviewFields = (fields: SnippetInputField[]): SnippetRunField[] => {
+ return fields.map(field => ({
+ type: PIPELINE_TO_WORKFLOW_INPUT_VAR_TYPE[field.type],
+ label: field.label,
+ variable: field.variable,
+ max_length: field.max_length,
+ default: field.default_value,
+ required: field.required,
+ options: field.options,
+ placeholder: field.placeholder,
+ unit: field.unit,
+ hide: false,
+ allowed_file_upload_methods: field.allowed_file_upload_methods,
+ allowed_file_types: field.allowed_file_types,
+ allowed_file_extensions: field.allowed_file_extensions,
+ }))
+}
+
+const buildInitialInputs = (fields: SnippetRunField[]) => {
+ return fields.reduce>((acc, field) => {
+ if (field.default !== undefined)
+ acc[field.variable] = field.default
+
+ return acc
+ }, {})
+}
+
+const SnippetRunPanel = ({
+ fields,
+}: SnippetRunPanelProps) => {
+ const { t } = useTranslation()
+ const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
+ const { handleRun } = useWorkflowRun()
+ const { checkInputsForm } = useCheckInputsForms()
+ const workflowRunningData = useStore(s => s.workflowRunningData)
+ const showInputsPanel = useStore(s => s.showInputsPanel)
+ const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
+ const panelWidth = useStore(s => s.previewPanelWidth)
+ const setPreviewPanelWidth = useStore(s => s.setPreviewPanelWidth)
+
+ const previewFields = useMemo(() => buildPreviewFields(fields), [fields])
+ const initialInputs = useMemo(() => buildInitialInputs(previewFields), [previewFields])
+ const [inputOverrides, setInputOverrides] = useState | null>(null)
+ const [selectedTab, setSelectedTab] = useState(null)
+ const [isResizing, setIsResizing] = useState(false)
+
+ const inputs = inputOverrides ?? initialInputs
+ const hasInputTab = showInputsPanel && previewFields.length > 0
+ const defaultTab = hasInputTab ? 'INPUT' : 'RESULT'
+ const shouldShowDetailByDefault = !!workflowRunningData
+ && (workflowRunningData.result.status === WorkflowRunningStatus.Succeeded || workflowRunningData.result.status === WorkflowRunningStatus.Failed)
+ && !workflowRunningData.resultText
+ && !workflowRunningData.result.files?.length
+ const currentTab = selectedTab ?? (shouldShowDetailByDefault ? 'DETAIL' : defaultTab)
+
+ const handleValueChange = useCallback((variable: string, value: unknown) => {
+ setInputOverrides(prev => ({
+ ...(prev ?? initialInputs),
+ [variable]: value,
+ }))
+ }, [initialInputs])
+
+ const handleSubmit = useCallback(() => {
+ if (!checkInputsForm(inputs, previewFields))
+ return
+
+ setSelectedTab('RESULT')
+ handleRun({
+ inputs: getProcessedInputs(inputs, previewFields),
+ })
+ }, [checkInputsForm, handleRun, inputs, previewFields])
+
+ const startResizing = useCallback((e: React.MouseEvent) => {
+ e.preventDefault()
+ setIsResizing(true)
+ }, [])
+
+ const stopResizing = useCallback(() => {
+ setIsResizing(false)
+ }, [])
+
+ const resize = useCallback((e: MouseEvent) => {
+ if (!isResizing)
+ return
+
+ const newWidth = window.innerWidth - e.clientX
+ const reservedCanvasWidth = 400
+ const maxAllowed = workflowCanvasWidth ? (workflowCanvasWidth - reservedCanvasWidth) : 1024
+
+ if (newWidth >= 400 && newWidth <= maxAllowed)
+ setPreviewPanelWidth(newWidth)
+ }, [isResizing, setPreviewPanelWidth, workflowCanvasWidth])
+
+ useEffect(() => {
+ window.addEventListener('mousemove', resize)
+ window.addEventListener('mouseup', stopResizing)
+ return () => {
+ window.removeEventListener('mousemove', resize)
+ window.removeEventListener('mouseup', stopResizing)
+ }
+ }, [resize, stopResizing])
+
+ return (
+
+
+
+ {`Test Run${formatWorkflowRunIdentifier(workflowRunningData?.result.finished_at, workflowRunningData?.result.status)}`}
+
+
+
+
+
+ {hasInputTab && (
+
setSelectedTab('INPUT')}
+ >
+ {t('input', { ns: 'runLog' })}
+
+ )}
+
workflowRunningData && setSelectedTab('RESULT')}
+ >
+ {t('result', { ns: 'runLog' })}
+
+
workflowRunningData && setSelectedTab('DETAIL')}
+ >
+ {t('detail', { ns: 'runLog' })}
+
+
workflowRunningData && setSelectedTab('TRACING')}
+ >
+ {t('tracing', { ns: 'runLog' })}
+
+
+
+ {currentTab === 'INPUT' && hasInputTab && (
+ <>
+
+ {previewFields.map((field, index) => (
+
+ handleValueChange(field.variable, value)}
+ />
+
+ ))}
+
+
+
+ {t('singleRun.startRun', { ns: 'workflow' })}
+
+
+
+ )}
+ {currentTab === 'RESULT' && (
+
+
setSelectedTab('DETAIL')}
+ />
+ {(workflowRunningData?.result.status === WorkflowRunningStatus.Succeeded && workflowRunningData?.resultText && typeof workflowRunningData.resultText === 'string') && (
+ {
+ copy(workflowRunningData?.resultText || '')
+ toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
+ }}
+ >
+ {t('operation.copy', { ns: 'common' })}
+
+ )}
+
+ )}
+ {currentTab === 'DETAIL' && workflowRunningData?.result && (
+
+ )}
+ {currentTab === 'DETAIL' && !workflowRunningData?.result && (
+
+
+ )}
+ {currentTab === 'TRACING' && (
+
+ )}
+ {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
+
+
+ )}
+
+
+
) => {
+ const historyWorkflowData = useStore(s => s.historyWorkflowData)
+ const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
+
+ return (
+ <>
+ {historyWorkflowData && !open && handleClose()}>
+
+
+
+ {title || t('snippet.createDialogTitle', { ns: 'workflow' })}
+
+
+
+
+
+
+ {t('snippet.nameLabel', { ns: 'workflow' })}
+
+
setName(e.target.value)}
+ placeholder={t('snippet.namePlaceholder', { ns: 'workflow' }) || ''}
+ disabled={isSubmitting}
+ autoFocus
+ />
+
+
+
+
+ {t('snippet.descriptionLabel', { ns: 'workflow' })}
+
+