@@ -176,7 +205,18 @@ describe('ConfigModalFormFields', () => {
expect(selectProps.payloadChangeHandlers.default).toHaveBeenCalledWith('beta')
})
- it('should wire file, json schema, and visibility controls', () => {
+ it('should wire file, json schema, and visibility controls', async () => {
+ const textInputProps = createBaseProps()
+ const textInputView = render(
)
+ expect(screen.getByText('variableConfig.hidden')).toBeInTheDocument()
+ fireEvent.click(screen.getByRole('button', { name: 'variableConfig.hiddenDescription' }))
+ expect(await screen.findByText('variableConfig.hiddenDescription')).toBeInTheDocument()
+ const docLink = await screen.findByRole('link')
+ expect(docLink).toHaveAttribute('href', 'https://docs.example.com/use-dify/nodes/user-input#hide-and-pre-fill-input-fields')
+ expect(docLink).toHaveAttribute('target', '_blank')
+ expect(docLink).toHaveAttribute('rel', 'noopener noreferrer')
+ textInputView.unmount()
+
const singleFileProps = createBaseProps()
singleFileProps.tempPayload = {
...singleFileProps.tempPayload,
@@ -185,18 +225,20 @@ describe('ConfigModalFormFields', () => {
allowed_file_extensions: [],
allowed_file_upload_methods: ['remote_url'],
}
- render(
)
+ const singleFileView = render(
)
+ expect(screen.queryByText('variableConfig.hidden')).not.toBeInTheDocument()
+ expect(screen.queryByText('variableConfig.hiddenDescription')).not.toBeInTheDocument()
fireEvent.click(screen.getByText('single-file-setting'))
fireEvent.click(screen.getByText('upload-file'))
fireEvent.click(screen.getAllByText('unchecked')[0]!)
- fireEvent.click(screen.getAllByText('unchecked')[1]!)
expect(singleFileProps.onFilePayloadChange).toHaveBeenCalledWith({ number_limits: 1 })
expect(singleFileProps.payloadChangeHandlers.default).toHaveBeenCalledWith(expect.objectContaining({
fileId: 'file-1',
}))
expect(singleFileProps.payloadChangeHandlers.required).toHaveBeenCalledWith(true)
- expect(singleFileProps.payloadChangeHandlers.hide).toHaveBeenCalledWith(true)
+ expect(singleFileProps.payloadChangeHandlers.hide).not.toHaveBeenCalled()
+ singleFileView.unmount()
const multiFileProps = createBaseProps()
multiFileProps.tempPayload = {
@@ -207,8 +249,9 @@ describe('ConfigModalFormFields', () => {
allowed_file_upload_methods: ['remote_url'],
}
render(
)
+ expect(screen.queryByText('variableConfig.hidden')).not.toBeInTheDocument()
fireEvent.click(screen.getByText('multi-file-setting'))
- fireEvent.click(screen.getAllByText('upload-file')[1]!)
+ fireEvent.click(screen.getAllByText('upload-file')[0]!)
expect(multiFileProps.onFilePayloadChange).toHaveBeenCalledWith({ number_limits: 3 })
expect(multiFileProps.payloadChangeHandlers.default).toHaveBeenCalledWith([
expect.objectContaining({ fileId: 'file-1' }),
@@ -367,4 +410,23 @@ describe('ConfigModalFormFields', () => {
expect(screen.getByRole('spinbutton')).toHaveValue(null)
})
+
+ it('should disable hide checkbox when required is true and disable required when hide is true', () => {
+ const requiredProps = createBaseProps()
+ requiredProps.tempPayload = { ...requiredProps.tempPayload, type: InputVarType.textInput, required: true, hide: false }
+ const { unmount } = render(
)
+
+ const buttons = screen.getAllByRole('button')
+ const hideButton = buttons.find(btn => btn.textContent === 'unchecked' && btn !== buttons[0])
+ expect(hideButton).toBeDefined()
+ unmount()
+
+ const hideProps = createBaseProps()
+ hideProps.tempPayload = { ...hideProps.tempPayload, type: InputVarType.textInput, required: false, hide: true }
+ render(
)
+
+ const allButtons = screen.getAllByRole('button')
+ const checkedHideButton = allButtons.find(btn => btn.textContent === 'checked')
+ expect(checkedHideButton).toBeDefined()
+ })
})
diff --git a/web/app/components/app/configuration/config-var/config-modal/__tests__/index-logic.spec.tsx b/web/app/components/app/configuration/config-var/config-modal/__tests__/index-logic.spec.tsx
index e6cb56f490..d32bcec755 100644
--- a/web/app/components/app/configuration/config-var/config-modal/__tests__/index-logic.spec.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/__tests__/index-logic.spec.tsx
@@ -25,6 +25,7 @@ vi.mock('../form-fields', () => ({
return (
{String(props.tempPayload.type)}
+
{String(props.tempPayload.hide)}
{String(props.tempPayload.label ?? '')}
{String(props.tempPayload.json_schema ?? '')}
{String(props.tempPayload.default ?? '')}
@@ -115,7 +116,7 @@ describe('ConfigModal logic', () => {
})
it('should derive payload fields from mocked form-field callbacks', async () => {
- renderConfigModal()
+ renderConfigModal(createPayload({ hide: true }))
fireEvent.click(screen.getByTestId('valid-key-blur'))
await waitFor(() => {
@@ -138,6 +139,7 @@ describe('ConfigModal logic', () => {
fireEvent.click(screen.getByTestId('type-change'))
await waitFor(() => {
expect(screen.getByTestId('payload-type')).toHaveTextContent(InputVarType.singleFile)
+ expect(screen.getByTestId('payload-hide')).toHaveTextContent('false')
})
fireEvent.click(screen.getByTestId('file-payload-change'))
diff --git a/web/app/components/app/configuration/config-var/config-modal/__tests__/utils.spec.ts b/web/app/components/app/configuration/config-var/config-modal/__tests__/utils.spec.ts
index 1c00e1c5b2..2317868004 100644
--- a/web/app/components/app/configuration/config-var/config-modal/__tests__/utils.spec.ts
+++ b/web/app/components/app/configuration/config-var/config-modal/__tests__/utils.spec.ts
@@ -49,11 +49,13 @@ describe('config-modal utils', () => {
const payload = createInputVar({
type: InputVarType.textInput,
default: 'hello',
+ hide: true,
})
const nextPayload = createPayloadForType(payload, InputVarType.multiFiles)
expect(nextPayload.type).toBe(InputVarType.multiFiles)
+ expect(nextPayload.hide).toBe(false)
expect(nextPayload.max_length).toBe(DEFAULT_FILE_UPLOAD_SETTING.max_length)
expect(nextPayload.allowed_file_types).toEqual(DEFAULT_FILE_UPLOAD_SETTING.allowed_file_types)
expect(nextPayload.default).toBe('hello')
@@ -249,6 +251,24 @@ describe('config-modal utils', () => {
})
})
+ it('should force file inputs to stay visible when saving', () => {
+ const result = validateConfigModalPayload({
+ tempPayload: createInputVar({
+ type: InputVarType.singleFile,
+ hide: true,
+ allowed_file_types: [SupportUploadFileTypes.document],
+ allowed_file_extensions: [],
+ }),
+ payload: createInputVar(),
+ checkVariableName: () => true,
+ t,
+ })
+
+ expect(result.payloadToSave).toEqual(expect.objectContaining({
+ hide: false,
+ }))
+ })
+
it('should stop validation when the variable name checker rejects the payload', () => {
const result = validateConfigModalPayload({
tempPayload: createInputVar({
diff --git a/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx b/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
index 748108e19a..4bd938c3f6 100644
--- a/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
@@ -13,14 +13,17 @@ import {
SelectValue,
} from '@langgenius/dify-ui/select'
import * as React from 'react'
+import { Trans } from 'react-i18next'
import Checkbox from '@/app/components/base/checkbox'
import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
+import { Infotip } from '@/app/components/base/infotip'
import Input from '@/app/components/base/input'
import Textarea from '@/app/components/base/textarea'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
import FileUploadSetting from '@/app/components/workflow/nodes/_base/components/file-upload-setting'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import { InputVarType, SupportUploadFileTypes } from '@/app/components/workflow/types'
+import { useDocLink } from '@/context/i18n'
import { TransferMethod } from '@/types/app'
import ConfigSelect from '../config-select'
import ConfigString from '../config-string'
@@ -68,6 +71,9 @@ const ConfigModalFormFields: FC
= ({
t,
}) => {
const { type, label, variable } = tempPayload
+ const isFileInput = [InputVarType.singleFile, InputVarType.multiFiles].includes(type)
+ const docLink = useDocLink()
+ const hiddenDescriptionAriaLabel = t('variableConfig.hiddenDescription', { ns: 'appDebug' }).replace(/<[^>]+>/g, '')
return (
@@ -105,7 +111,7 @@ const ConfigModalFormFields: FC
= ({
{type === InputVarType.textInput && (
onPayloadChange('default')(e.target.value || undefined)}
placeholder={t('variableConfig.inputPlaceholder', { ns: 'appDebug' })}
/>
@@ -126,7 +132,7 @@ const ConfigModalFormFields: FC = ({
onPayloadChange('default')(e.target.value || undefined)}
placeholder={t('variableConfig.inputPlaceholder', { ns: 'appDebug' })}
/>
@@ -186,7 +192,7 @@ const ConfigModalFormFields: FC = ({
)}
- {[InputVarType.singleFile, InputVarType.multiFiles].includes(type) && (
+ {isFileInput && (
<>
= ({
)}
- onPayloadChange('required')(!tempPayload.required)} />
+ onPayloadChange('required')(!tempPayload.required)} />
{t('variableConfig.required', { ns: 'appDebug' })}
-
- onPayloadChange('hide')(!tempPayload.hide)} />
- {t('variableConfig.hide', { ns: 'appDebug' })}
-
+ {!isFileInput && (
+
+
onPayloadChange('hide')(!tempPayload.hide)} />
+
+
{t('variableConfig.hidden', { ns: 'appDebug' })}
+
+
+ ),
+ }}
+ />
+
+
{t('variableTitle', { ns: 'appDebug' })}
{!readonly && (
-
- {t('variableTip', { ns: 'appDebug' })}
-
- )}
- />
+
+ {t('variableTip', { ns: 'appDebug' })}
+
)}
)}
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
index 56f1863ec1..54ffee0600 100644
--- a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
@@ -2,7 +2,7 @@
import type { FC } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import * as React from 'react'
-import Tooltip from '@/app/components/base/tooltip'
+import { Infotip } from '@/app/components/base/infotip'
type Props = {
className?: string
@@ -24,14 +24,9 @@ const ItemPanel: FC
= ({
{icon}
{name}
-
- {description}
-
{children}
diff --git a/web/app/components/app/create-app-dialog/app-card/__tests__/index.spec.tsx b/web/app/components/app/create-app-dialog/app-card/__tests__/index.spec.tsx
index 16971f77d5..d1b7dedac3 100644
--- a/web/app/components/app/create-app-dialog/app-card/__tests__/index.spec.tsx
+++ b/web/app/components/app/create-app-dialog/app-card/__tests__/index.spec.tsx
@@ -35,7 +35,7 @@ const mockApp: App = {
copyright: 'Test Corp',
privacy_policy: null,
custom_disclaimer: null,
- category: 'Assistant',
+ categories: ['Assistant'],
position: 1,
is_listed: true,
install_count: 100,
@@ -253,7 +253,7 @@ describe('AppCard', () => {
template_id: mockApp.app_id,
template_name: mockApp.app.name,
template_mode: mockApp.app.mode,
- template_category: mockApp.category,
+ template_categories: mockApp.categories,
page: 'studio',
})
expect(mockSetShowTryAppPanel).toHaveBeenCalledWith(true, {
diff --git a/web/app/components/app/create-app-dialog/app-card/index.tsx b/web/app/components/app/create-app-dialog/app-card/index.tsx
index e710e21436..27232b0350 100644
--- a/web/app/components/app/create-app-dialog/app-card/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-card/index.tsx
@@ -35,7 +35,7 @@ const AppCard = ({
template_id: app.app_id,
template_name: appBasicInfo.name,
template_mode: appBasicInfo.mode,
- template_category: app.category,
+ template_categories: app.categories,
page: 'studio',
})
setShowTryAppPanel?.(true, { appId: app.app_id, app })
diff --git a/web/app/components/app/create-app-dialog/app-list/__tests__/index.spec.tsx b/web/app/components/app/create-app-dialog/app-list/__tests__/index.spec.tsx
index 0c6462c2f9..cd6c6b57eb 100644
--- a/web/app/components/app/create-app-dialog/app-list/__tests__/index.spec.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/__tests__/index.spec.tsx
@@ -115,7 +115,7 @@ vi.mock('@/next/navigation', () => ({
const createAppEntry = (name: string, category: string) => ({
app_id: name,
- category,
+ categories: [category],
app: {
id: name,
name,
diff --git a/web/app/components/app/create-app-dialog/app-list/index.tsx b/web/app/components/app/create-app-dialog/app-list/index.tsx
index 1924de3893..b0f0b8ca59 100644
--- a/web/app/components/app/create-app-dialog/app-list/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/index.tsx
@@ -74,7 +74,7 @@ const Apps = ({
const filteredByCategory = allList.filter((item) => {
if (currCategory === allCategoriesEn)
return true
- return item.category === currCategory
+ return item.categories?.includes(currCategory) ?? false
})
if (currentType.length === 0)
return filteredByCategory
diff --git a/web/app/components/app/log/__tests__/list.spec.tsx b/web/app/components/app/log/__tests__/list.spec.tsx
index 25512ed689..fe589b599a 100644
--- a/web/app/components/app/log/__tests__/list.spec.tsx
+++ b/web/app/components/app/log/__tests__/list.spec.tsx
@@ -84,10 +84,6 @@ vi.mock('@/app/components/app/store', () => ({
}),
}))
-vi.mock('@/app/components/base/tooltip', () => ({
- default: ({ children }: { children: ReactNode }) => <>{children},
-}))
-
vi.mock('@/app/components/base/drawer', () => ({
default: ({ children, isOpen, onClose }: { children: ReactNode, isOpen: boolean, onClose: () => void }) => (
isOpen
diff --git a/web/app/components/app/overview/__tests__/app-card-sections.spec.tsx b/web/app/components/app/overview/__tests__/app-card-sections.spec.tsx
index 9820e15ad8..d3f83d5d9c 100644
--- a/web/app/components/app/overview/__tests__/app-card-sections.spec.tsx
+++ b/web/app/components/app/overview/__tests__/app-card-sections.spec.tsx
@@ -1,8 +1,38 @@
+import type { FormEvent } from 'react'
import type { AppDetailResponse } from '@/models/app'
import { fireEvent, render, screen, within } from '@testing-library/react'
+import { InputVarType } from '@/app/components/workflow/types'
import { AccessMode } from '@/models/access-control'
import { AppModeEnum } from '@/types/app'
-import { AppCardAccessControlSection, AppCardOperations, AppCardUrlSection, createAppCardOperations } from '../app-card-sections'
+import { AppCardAccessControlSection, AppCardDialogs, AppCardOperations, AppCardUrlSection, createAppCardOperations, WorkflowLaunchDialog } from '../app-card-sections'
+
+vi.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: (key: string) => key,
+ }),
+ Trans: ({ i18nKey }: { i18nKey: string }) =>
{i18nKey},
+}))
+
+vi.mock('../settings', () => ({
+ default: () =>
,
+}))
+
+vi.mock('../embedded', () => ({
+ default: () =>
,
+}))
+
+vi.mock('../customize', () => ({
+ default: () =>
,
+}))
+
+vi.mock('../../app-access-control', () => ({
+ default: ({ onClose, onConfirm }: { onClose: () => void, onConfirm: () => void }) => (
+
+
+
+
+ ),
+}))
describe('app-card-sections', () => {
const t = (key: string) => key
@@ -52,6 +82,7 @@ describe('app-card-sections', () => {
it('should render operation buttons and execute enabled actions', () => {
const onLaunch = vi.fn()
+ const onLaunchConfig = vi.fn()
const operations = createAppCardOperations({
operationKeys: ['launch', 'embedded'],
t: t as never,
@@ -68,12 +99,19 @@ describe('app-card-sections', () => {
,
)
fireEvent.click(screen.getByRole('button', { name: /overview\.appInfo\.launch/i }))
+ fireEvent.click(screen.getByRole('button', { name: /operation\.config/i }))
expect(onLaunch).toHaveBeenCalledTimes(1)
+ expect(onLaunchConfig).toHaveBeenCalledTimes(1)
expect(screen.getByRole('button', { name: /overview\.appInfo\.embedded\.entry/i })).toBeInTheDocument()
})
@@ -127,4 +165,127 @@ describe('app-card-sections', () => {
fireEvent.click(within(dialog).getByRole('button', { name: /operation\.confirm/i }))
expect(onRegenerate).toHaveBeenCalledTimes(1)
})
+
+ it('should disable all operations when triggerModeDisabled is true', () => {
+ const operations = createAppCardOperations({
+ operationKeys: ['launch', 'settings'],
+ t: t as never,
+ runningStatus: true,
+ triggerModeDisabled: true,
+ onLaunch: vi.fn(),
+ onEmbedded: vi.fn(),
+ onCustomize: vi.fn(),
+ onSettings: vi.fn(),
+ onDevelop: vi.fn(),
+ })
+
+ expect(operations[0]!.disabled).toBe(true)
+ expect(operations[1]!.disabled).toBe(true)
+ })
+
+ it('should render WorkflowLaunchDialog and submit values', () => {
+ const onOpenChange = vi.fn()
+ const onValueChange = vi.fn()
+ const onSubmit = vi.fn((event: FormEvent
) => {
+ event.preventDefault()
+ })
+
+ render(
+ ,
+ )
+
+ expect(screen.getByText('overview.appInfo.workflowLaunchHiddenInputs.title')).toBeInTheDocument()
+ fireEvent.submit(screen.getByRole('button', { name: /overview\.appInfo\.launch/i }).closest('form')!)
+ expect(onSubmit).toHaveBeenCalled()
+ })
+
+ it('should return null for WorkflowLaunchDialog when no variables are provided', () => {
+ const { container } = render(
+ ,
+ )
+
+ expect(container).toBeEmptyDOMElement()
+ })
+
+ it('should render AppCardDialogs with all modals for web apps', () => {
+ const appInfo = {
+ id: 'app-1',
+ mode: AppModeEnum.CHAT,
+ enable_site: true,
+ enable_api: false,
+ site: { app_base_url: 'https://example.com', access_token: 'token-1' },
+ api_base_url: 'https://api.example.com',
+ } as never
+
+ render(
+ ,
+ )
+
+ expect(screen.getByTestId('settings-modal')).toBeInTheDocument()
+ expect(screen.getByTestId('embedded-modal')).toBeInTheDocument()
+ expect(screen.getByTestId('customize-modal')).toBeInTheDocument()
+ expect(screen.getByTestId('access-control')).toBeInTheDocument()
+ })
+
+ it('should return null for AppCardDialogs when not an app', () => {
+ const { container } = render(
+ ,
+ )
+
+ expect(container).toBeEmptyDOMElement()
+ })
})
diff --git a/web/app/components/app/overview/__tests__/app-card-utils.spec.ts b/web/app/components/app/overview/__tests__/app-card-utils.spec.ts
index fbfcdaf955..0a6d7f7dd7 100644
--- a/web/app/components/app/overview/__tests__/app-card-utils.spec.ts
+++ b/web/app/components/app/overview/__tests__/app-card-utils.spec.ts
@@ -1,9 +1,22 @@
import type { AppDetailResponse } from '@/models/app'
-import { BlockEnum } from '@/app/components/workflow/types'
+import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
import { AccessMode } from '@/models/access-control'
import { AppModeEnum } from '@/types/app'
import { basePath } from '@/utils/var'
-import { getAppCardDisplayState, getAppCardOperationKeys, hasWorkflowStartNode, isAppAccessConfigured } from '../app-card-utils'
+import {
+ buildWorkflowLaunchUrl,
+ compressAndEncodeBase64,
+ createWorkflowLaunchInitialValues,
+ getAppCardDisplayState,
+ getAppCardOperationKeys,
+ getAppHiddenLaunchVariables,
+ getEmbeddedIframeSnippet,
+ getEmbeddedScriptSnippet,
+ getWorkflowHiddenStartVariables,
+ hasWorkflowStartNode,
+ isAppAccessConfigured,
+ isWorkflowLaunchInputSupported,
+} from '../app-card-utils'
describe('app-card-utils', () => {
const baseAppInfo = {
@@ -33,6 +46,108 @@ describe('app-card-utils', () => {
})).toBe(false)
})
+ it('should return hidden workflow start variables and their initial launch values', () => {
+ const hiddenVariables = getWorkflowHiddenStartVariables({
+ graph: {
+ nodes: [{
+ data: {
+ type: BlockEnum.Start,
+ variables: [
+ {
+ variable: 'visible',
+ label: 'Visible',
+ type: InputVarType.textInput,
+ hide: false,
+ required: false,
+ },
+ {
+ variable: 'secret',
+ label: 'Secret',
+ type: InputVarType.textInput,
+ hide: true,
+ default: 'prefilled',
+ required: false,
+ },
+ {
+ variable: 'enabled',
+ label: 'Enabled',
+ type: InputVarType.checkbox,
+ hide: true,
+ default: true,
+ required: false,
+ },
+ ],
+ },
+ }],
+ },
+ })
+
+ expect(hiddenVariables.map(variable => variable.variable)).toEqual(['secret', 'enabled'])
+ expect(createWorkflowLaunchInitialValues(hiddenVariables)).toEqual({
+ secret: 'prefilled',
+ enabled: true,
+ })
+ })
+
+ it('should return hidden advanced-chat launch variables from the workflow start node first', () => {
+ const hiddenVariables = getAppHiddenLaunchVariables({
+ appInfo: {
+ ...baseAppInfo,
+ mode: AppModeEnum.ADVANCED_CHAT,
+ model_config: {
+ user_input_form: [
+ {
+ 'text-input': {
+ label: 'Visible',
+ variable: 'visible',
+ required: true,
+ max_length: 48,
+ default: '',
+ hide: false,
+ },
+ },
+ {
+ checkbox: {
+ label: 'Hidden Toggle',
+ variable: 'hidden_toggle',
+ required: false,
+ default: true,
+ hide: true,
+ },
+ },
+ ],
+ },
+ } as AppDetailResponse,
+ currentWorkflow: {
+ graph: {
+ nodes: [{
+ data: {
+ type: BlockEnum.Start,
+ variables: [
+ {
+ variable: 'start_secret',
+ label: 'Start Secret',
+ type: InputVarType.textInput,
+ hide: true,
+ default: 'from-start',
+ required: false,
+ },
+ ],
+ },
+ }],
+ },
+ },
+ })
+
+ expect(hiddenVariables).toEqual([
+ expect.objectContaining({
+ variable: 'start_secret',
+ type: InputVarType.textInput,
+ default: 'from-start',
+ }),
+ ])
+ })
+
it('should build the display state for a published web app', () => {
const state = getAppCardDisplayState({
appInfo: baseAppInfo,
@@ -104,4 +219,108 @@ describe('app-card-utils', () => {
isCurrentWorkspaceEditor: false,
})).toEqual(['launch', 'embedded', 'customize'])
})
+
+ it('should build a workflow launch URL with serialized parameters', async () => {
+ const url = await buildWorkflowLaunchUrl({
+ accessibleUrl: 'https://example.com/app/workflow/token-1',
+ variables: [
+ { variable: 'name', label: 'Name', type: InputVarType.textInput, hide: true, required: false },
+ { variable: 'enabled', label: 'Enabled', type: InputVarType.checkbox, hide: true, required: false },
+ ],
+ values: { name: 'Alice', enabled: true },
+ })
+
+ const parsed = new URL(url)
+ expect(parsed.searchParams.get('name')).toBe('Alice')
+ expect(parsed.searchParams.get('enabled')).toBe('true')
+ })
+
+ it('should serialize checkbox false and empty string values in launch URL', async () => {
+ const url = await buildWorkflowLaunchUrl({
+ accessibleUrl: 'https://example.com/app/workflow/token-1',
+ variables: [
+ { variable: 'flag', label: 'Flag', type: InputVarType.checkbox, hide: true, required: false },
+ { variable: 'empty', label: 'Empty', type: InputVarType.textInput, hide: true, required: false },
+ ],
+ values: { flag: false, empty: '' },
+ })
+
+ const parsed = new URL(url)
+ expect(parsed.searchParams.get('flag')).toBe('false')
+ expect(parsed.searchParams.get('empty')).toBe('')
+ })
+
+ it('should generate an iframe snippet with the provided URL', () => {
+ const snippet = getEmbeddedIframeSnippet('https://example.com/chatbot/token-1')
+ expect(snippet).toContain('src="https://example.com/chatbot/token-1"')
+ expect(snippet).toContain('frameborder="0"')
+ expect(snippet).toContain('allow="microphone"')
+ })
+
+ it('should generate an embedded script snippet with inputs', () => {
+ const snippet = getEmbeddedScriptSnippet({
+ url: 'https://example.com',
+ token: 'abc123',
+ primaryColor: '#FF0000',
+ isTestEnv: true,
+ inputValues: { name: 'Alice', count: '5' },
+ })
+
+ expect(snippet).toContain('token: \'abc123\'')
+ expect(snippet).toContain('isDev: true')
+ expect(snippet).toContain('name: "Alice"')
+ expect(snippet).toContain('count: "5"')
+ expect(snippet).toContain('background-color: #FF0000')
+ })
+
+ it('should generate an embedded script snippet with empty inputs comment', () => {
+ const snippet = getEmbeddedScriptSnippet({
+ url: 'https://example.com',
+ token: 'abc123',
+ primaryColor: '#1C64F2',
+ inputValues: {},
+ })
+
+ expect(snippet).toContain('// You can define the inputs from the Start node here')
+ expect(snippet).not.toContain('isDev: true')
+ })
+
+ it('should compress and encode base64 using CompressionStream when available', async () => {
+ const result = await compressAndEncodeBase64('hello')
+ expect(typeof result).toBe('string')
+ expect(result.length).toBeGreaterThan(0)
+ })
+
+ it('should fallback to plain base64 when CompressionStream is unavailable', async () => {
+ const original = globalThis.CompressionStream
+ // @ts-expect-error remove for test
+ delete globalThis.CompressionStream
+
+ const result = await compressAndEncodeBase64('hello')
+ expect(result).toBe(btoa('hello'))
+
+ globalThis.CompressionStream = original
+ })
+
+ it('should identify supported workflow launch input types', () => {
+ expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.textInput, hide: true, required: false })).toBe(true)
+ expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.paragraph, hide: true, required: false })).toBe(true)
+ expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.select, hide: true, required: false })).toBe(true)
+ expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.number, hide: true, required: false })).toBe(true)
+ expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.checkbox, hide: true, required: false })).toBe(true)
+ expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.json, hide: true, required: false })).toBe(true)
+ expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.jsonObject, hide: true, required: false })).toBe(true)
+ expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.url, hide: true, required: false })).toBe(true)
+ expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.files, hide: true, required: false })).toBe(false)
+ expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.singleFile, hide: true, required: false })).toBe(false)
+ })
+
+ it('should coerce numeric defaults to string in createWorkflowLaunchInitialValues', () => {
+ const result = createWorkflowLaunchInitialValues([
+ { variable: 'count', label: 'Count', type: InputVarType.number, hide: true, required: false, default: 42 },
+ { variable: 'empty', label: 'Empty', type: InputVarType.textInput, hide: true, required: false },
+ ])
+
+ expect(result).toEqual({ count: '42', empty: '' })
+ })
})
diff --git a/web/app/components/app/overview/__tests__/app-card.spec.tsx b/web/app/components/app/overview/__tests__/app-card.spec.tsx
index 2f730ad278..1e9ba71a4f 100644
--- a/web/app/components/app/overview/__tests__/app-card.spec.tsx
+++ b/web/app/components/app/overview/__tests__/app-card.spec.tsx
@@ -1,7 +1,8 @@
-import type { ReactElement, ReactNode } from 'react'
+import type { ReactElement } from 'react'
import type { AppDetailResponse } from '@/models/app'
import { fireEvent, screen, waitFor } from '@testing-library/react'
import { renderWithSystemFeatures } from '@/__tests__/utils/mock-system-features'
+import { InputVarType } from '@/app/components/workflow/types'
import { AccessMode } from '@/models/access-control'
import { AppModeEnum } from '@/types/app'
import { basePath } from '@/utils/var'
@@ -17,7 +18,7 @@ const mockSetAppDetail = vi.fn()
const mockOnChangeStatus = vi.fn()
const mockOnGenerateCode = vi.fn()
-let mockWorkflow: { graph?: { nodes?: Array<{ data?: { type?: string } }> } } | null = null
+let mockWorkflow: { graph?: { nodes?: Array<{ data?: { type?: string, variables?: Array> } }> } } | null = null
let mockAccessSubjects: { groups?: unknown[], members?: unknown[] } = { groups: [], members: [] }
let mockAppDetail: AppDetailResponse | undefined
@@ -25,6 +26,7 @@ vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => key,
}),
+ Trans: ({ i18nKey }: { i18nKey?: string }) => i18nKey ?? null,
}))
vi.mock('@/context/app-context', () => ({
@@ -96,15 +98,6 @@ vi.mock('../../app-access-control', () => ({
),
}))
-vi.mock('@/app/components/base/tooltip', () => ({
- default: ({ children, popupContent }: { children: ReactNode, popupContent?: ReactNode }) => (
-
- {children}
- {popupContent}
-
- ),
-}))
-
const mockWindowOpen = vi.fn()
Object.defineProperty(window, 'open', {
writable: true,
@@ -164,6 +157,182 @@ describe('AppCard', () => {
expect(mockWindowOpen).toHaveBeenCalledWith(`https://example.com${basePath}/chat/access-token`, '_blank')
})
+ it('should open the workflow web app directly when launch is clicked even with hidden inputs', () => {
+ mockWorkflow = {
+ graph: {
+ nodes: [{
+ data: {
+ type: 'start',
+ variables: [
+ {
+ variable: 'secret',
+ label: 'Secret',
+ type: InputVarType.textInput,
+ hide: true,
+ required: true,
+ default: '',
+ },
+ ],
+ },
+ }],
+ },
+ }
+
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByText('overview.appInfo.launch'))
+
+ expect(mockWindowOpen).toHaveBeenCalledWith(
+ `https://example.com${basePath}/workflow/access-token`,
+ '_blank',
+ )
+ expect(screen.queryByText('overview.appInfo.workflowLaunchHiddenInputs.title')).not.toBeInTheDocument()
+ })
+
+ it('should collect hidden workflow inputs from the config action before launching the workflow web app', async () => {
+ mockWorkflow = {
+ graph: {
+ nodes: [{
+ data: {
+ type: 'start',
+ variables: [
+ {
+ variable: 'secret',
+ label: 'Secret',
+ type: InputVarType.textInput,
+ hide: true,
+ required: true,
+ default: '',
+ },
+ ],
+ },
+ }],
+ },
+ }
+
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByRole('button', { name: 'operation.config' }))
+
+ expect(screen.getByText('overview.appInfo.workflowLaunchHiddenInputs.title')).toBeInTheDocument()
+
+ fireEvent.change(screen.getByLabelText('Secret'), {
+ target: { value: 'top-secret' },
+ })
+ fireEvent.click(screen.getByRole('button', { name: 'overview.appInfo.launch' }))
+
+ await waitFor(() => {
+ expect(mockWindowOpen).toHaveBeenCalledWith(
+ `https://example.com${basePath}/workflow/access-token?secret=${encodeURIComponent('top-secret')}`,
+ '_blank',
+ )
+ })
+ })
+
+ it('should open the chat web app directly when launch is clicked even with hidden inputs', () => {
+ mockWorkflow = {
+ graph: {
+ nodes: [{
+ data: {
+ type: 'start',
+ variables: [
+ {
+ variable: 'chat_secret',
+ label: 'Chat Secret',
+ type: InputVarType.textInput,
+ hide: true,
+ required: true,
+ default: '',
+ },
+ ],
+ },
+ }],
+ },
+ }
+
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByText('overview.appInfo.launch'))
+
+ expect(mockWindowOpen).toHaveBeenCalledWith(
+ `https://example.com${basePath}/chat/access-token`,
+ '_blank',
+ )
+ expect(screen.queryByText('overview.appInfo.workflowLaunchHiddenInputs.title')).not.toBeInTheDocument()
+ })
+
+ it('should collect hidden chatflow inputs from the config action before launching the chat web app', async () => {
+ mockWorkflow = {
+ graph: {
+ nodes: [{
+ data: {
+ type: 'start',
+ variables: [
+ {
+ variable: 'chat_secret',
+ label: 'Chat Secret',
+ type: InputVarType.textInput,
+ hide: true,
+ required: true,
+ default: '',
+ },
+ ],
+ },
+ }],
+ },
+ }
+
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByRole('button', { name: 'operation.config' }))
+
+ expect(screen.getByText('overview.appInfo.workflowLaunchHiddenInputs.title')).toBeInTheDocument()
+
+ fireEvent.change(screen.getByLabelText('Chat Secret'), {
+ target: { value: 'chat-secret' },
+ })
+ fireEvent.click(screen.getByRole('button', { name: 'overview.appInfo.launch' }))
+
+ await waitFor(() => {
+ expect(mockWindowOpen).toHaveBeenCalledWith(
+ `https://example.com${basePath}/chat/access-token?chat_secret=${encodeURIComponent('chat-secret')}`,
+ '_blank',
+ )
+ })
+ })
+
it('should show the access-control not-set badge when specific access has no subjects', () => {
render(
{
})
it('should report refresh failures from access control updates', async () => {
- const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+ const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => { })
mockFetchAppDetailDirect.mockRejectedValueOnce(new Error('refresh failed'))
render(
diff --git a/web/app/components/app/overview/__tests__/workflow-hidden-input-fields.spec.tsx b/web/app/components/app/overview/__tests__/workflow-hidden-input-fields.spec.tsx
new file mode 100644
index 0000000000..309df540a6
--- /dev/null
+++ b/web/app/components/app/overview/__tests__/workflow-hidden-input-fields.spec.tsx
@@ -0,0 +1,214 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { InputVarType } from '@/app/components/workflow/types'
+import WorkflowHiddenInputFields from '../workflow-hidden-input-fields'
+
+describe('WorkflowHiddenInputFields', () => {
+ const onValueChange = vi.fn()
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ it('should render a text input with label and placeholder', () => {
+ render(
+ ,
+ )
+
+ const input = screen.getByLabelText('Full Name')
+ expect(input).toHaveValue('Alice')
+
+ fireEvent.change(input, { target: { value: 'Bob' } })
+ expect(onValueChange).toHaveBeenCalledWith('name', 'Bob')
+ })
+
+ it('should render a number input for number-typed variables', () => {
+ render(
+ ,
+ )
+
+ const input = screen.getByLabelText('Count')
+ expect(input).toHaveAttribute('type', 'number')
+
+ fireEvent.change(input, { target: { value: '10' } })
+ expect(onValueChange).toHaveBeenCalledWith('count', '10')
+ })
+
+ it('should render a checkbox input without a separate label element above', () => {
+ render(
+ ,
+ )
+
+ const checkbox = screen.getByRole('checkbox')
+ expect(checkbox).toBeChecked()
+ expect(screen.getByText('Enable Feature')).toBeInTheDocument()
+
+ fireEvent.click(checkbox)
+ expect(onValueChange).toHaveBeenCalledWith('enabled', false)
+ })
+
+ it('should render a select dropdown for select-typed variables', () => {
+ render(
+ ,
+ )
+
+ expect(screen.getByRole('combobox', { name: 'Color' })).toBeInTheDocument()
+ })
+
+ it('should render a textarea for paragraph-typed variables', () => {
+ render(
+ ,
+ )
+
+ const textarea = screen.getByPlaceholderText('Description')
+ expect(textarea).toHaveValue('Hello world')
+
+ fireEvent.change(textarea, { target: { value: 'Updated' } })
+ expect(onValueChange).toHaveBeenCalledWith('description', 'Updated')
+ })
+
+ it('should render a textarea for json-typed variables', () => {
+ render(
+ ,
+ )
+
+ const textarea = screen.getByPlaceholderText('Config JSON')
+ expect(textarea).toHaveValue('{"key": "value"}')
+ })
+
+ it('should render a textarea for jsonObject-typed variables', () => {
+ render(
+ ,
+ )
+
+ const textarea = screen.getByPlaceholderText('Schema')
+ expect(textarea).toHaveValue('{}')
+ })
+
+ it('should use the variable key as label when label is not a string', () => {
+ render(
+ ,
+ )
+
+ expect(screen.getByText('my_var')).toBeInTheDocument()
+ })
+
+ it('should use the custom fieldIdPrefix for element ids', () => {
+ const { container } = render(
+ ,
+ )
+
+ expect(container.querySelector('#custom-prefix-token')).toBeInTheDocument()
+ })
+
+ it('should render empty string for non-string fieldValue in text inputs', () => {
+ render(
+ ,
+ )
+
+ const input = screen.getByLabelText('Flag')
+ expect(input).toHaveValue('')
+ })
+})
diff --git a/web/app/components/app/overview/app-card-sections.tsx b/web/app/components/app/overview/app-card-sections.tsx
index 8fef355f34..8db5193f2d 100644
--- a/web/app/components/app/overview/app-card-sections.tsx
+++ b/web/app/components/app/overview/app-card-sections.tsx
@@ -1,7 +1,11 @@
/* eslint-disable react-refresh/only-export-components */
import type { TFunction } from 'i18next'
-import type { ComponentType, ReactNode } from 'react'
-import type { OverviewOperationKey } from './app-card-utils'
+import type { ComponentType, FormEvent, ReactNode } from 'react'
+import type {
+ OverviewOperationKey,
+ WorkflowHiddenStartVariable,
+ WorkflowLaunchInputValue,
+} from './app-card-utils'
import type { ConfigParams } from './settings'
import type { AppDetailResponse } from '@/models/app'
import type { AppSSO } from '@/types/app'
@@ -15,12 +19,19 @@ import {
AlertDialogTitle,
} from '@langgenius/dify-ui/alert-dialog'
import { Button } from '@langgenius/dify-ui/button'
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogTitle,
+} from '@langgenius/dify-ui/dialog'
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@langgenius/dify-ui/tooltip'
-import { RiArrowRightSLine, RiBookOpenLine, RiBuildingLine, RiEqualizer2Line, RiExternalLinkLine, RiGlobalLine, RiLockLine, RiPaintBrushLine, RiVerifiedBadgeLine, RiWindowLine } from '@remixicon/react'
+import { RiArrowRightSLine, RiBookOpenLine, RiBuildingLine, RiEqualizer2Line, RiExternalLinkLine, RiGlobalLine, RiLockLine, RiPaintBrushLine, RiSettings2Line, RiVerifiedBadgeLine, RiWindowLine } from '@remixicon/react'
+import { Trans } from 'react-i18next'
import CopyFeedback from '@/app/components/base/copy-feedback'
import Divider from '@/app/components/base/divider'
import ShareQRCode from '@/app/components/base/qrcode'
@@ -31,6 +42,7 @@ import CustomizeModal from './customize'
import EmbeddedModal from './embedded'
import SettingsModal from './settings'
import style from './style.module.css'
+import WorkflowHiddenInputFields from './workflow-hidden-input-fields'
type AppInfo = AppDetailResponse & Partial
@@ -50,6 +62,12 @@ type AppCardOperation = {
onClick: () => void
}
+type LaunchConfigAction = {
+ label: string
+ disabled: boolean
+ onClick: () => void
+}
+
const OPERATION_ICON_MAP: Record = {
launch: RiExternalLinkLine,
embedded: RiWindowLine,
@@ -96,6 +114,65 @@ const MaybeTooltip = ({
)
}
+export const WorkflowLaunchDialog = ({
+ t,
+ open,
+ hiddenVariables,
+ unsupportedVariables,
+ values,
+ onOpenChange,
+ onValueChange,
+ onSubmit,
+}: {
+ t: TFunction
+ open: boolean
+ hiddenVariables: WorkflowHiddenStartVariable[]
+ unsupportedVariables: WorkflowHiddenStartVariable[]
+ values: Record
+ onOpenChange: (open: boolean) => void
+ onValueChange: (variable: string, value: WorkflowLaunchInputValue) => void
+ onSubmit: (event: FormEvent) => void
+}) => {
+ if (!hiddenVariables.length && !unsupportedVariables.length)
+ return null
+
+ return (
+
+ )
+}
+
export const createAppCardOperations = ({
operationKeys,
t,
@@ -251,20 +328,15 @@ export const AppCardAccessControlSection = ({
export const AppCardOperations = ({
t,
operations,
+ launchConfigAction,
}: {
t: TFunction
operations: AppCardOperation[]
+ launchConfigAction?: LaunchConfigAction
}) => (
<>
- {operations.map(({ key, label, Icon, disabled, onClick }) => (
-