opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-09 21:28:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into tp

Browse Source
This commit is contained in:
JzoNg 2026-05-08 18:02:14 +08:00
commit 62efb66a2f
39 changed files with 2693 additions and 347 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
api/core/app/apps/common/workflow_response_converter.py
View File

@ -842,24 +842,24 @@ class WorkflowResponseConverter:
return []
files: list[Mapping[str, Any]] = []
if isinstance(value, FileSegment):
files.append(value.value.to_dict())
elif isinstance(value, ArrayFileSegment):
files.extend([i.to_dict() for i in value.value])
elif isinstance(value, File):
files.append(value.to_dict())
elif isinstance(value, list):
for item in value:
file = cls._get_file_var_from_value(item)
match value:
case FileSegment():
files.append(value.value.to_dict())
case ArrayFileSegment():
files.extend([i.to_dict() for i in value.value])
case File():
files.append(value.to_dict())
case list():
for item in value:
file = cls._get_file_var_from_value(item)
if file:
files.append(file)
case dict():
file = cls._get_file_var_from_value(value)
if file:
files.append(file)
elif isinstance(
value,
dict,
):
file = cls._get_file_var_from_value(value)
if file:
files.append(file)
case _:
pass
return files

39
api/core/prompt/utils/prompt_message_util.py
View File

@ -53,24 +53,27 @@ class PromptMessageUtil:
files = []
if isinstance(prompt_message.content, list):
for content in prompt_message.content:
if isinstance(content, TextPromptMessageContent):
text += content.data
elif isinstance(content, ImagePromptMessageContent):
files.append(
{
"type": "image",
"data": content.data[:10] + "...[TRUNCATED]..." + content.data[-10:],
"detail": content.detail.value,
}
)
elif isinstance(content, AudioPromptMessageContent):
files.append(
{
"type": "audio",
"data": content.data[:10] + "...[TRUNCATED]..." + content.data[-10:],
"format": content.format,
}
)
match content:
case TextPromptMessageContent():
text += content.data
case ImagePromptMessageContent():
files.append(
{
"type": "image",
"data": content.data[:10] + "...[TRUNCATED]..." + content.data[-10:],
"detail": content.detail.value,
}
)
case AudioPromptMessageContent():
files.append(
{
"type": "audio",
"data": content.data[:10] + "...[TRUNCATED]..." + content.data[-10:],
"format": content.format,
}
)
case _:
continue
else:
text = cast(str, prompt_message.content)

61
api/core/tools/utils/message_transformer.py
View File

@ -23,36 +23,37 @@ _TOOL_FILE_URL_PATTERN = re.compile(r"(?:^|/+)files/tools/(?P<tool_file_id>[^/?#
def safe_json_value(v):
if isinstance(v, datetime):
tz_name = "UTC"
if isinstance(current_user, Account) and current_user.timezone is not None:
tz_name = current_user.timezone
return v.astimezone(pytz.timezone(tz_name)).isoformat()
elif isinstance(v, date):
return v.isoformat()
elif isinstance(v, UUID):
return str(v)
elif isinstance(v, Decimal):
return float(v)
elif isinstance(v, bytes):
try:
return v.decode("utf-8")
except UnicodeDecodeError:
return v.hex()
elif isinstance(v, memoryview):
return v.tobytes().hex()
elif isinstance(v, np.integer):
return int(v)
elif isinstance(v, np.floating):
return float(v)
elif isinstance(v, np.ndarray):
return v.tolist()
elif isinstance(v, dict):
return safe_json_dict(v)
elif isinstance(v, list | tuple | set):
return [safe_json_value(i) for i in v]
else:
return v
match v:
case datetime():
tz_name = "UTC"
if isinstance(current_user, Account) and current_user.timezone is not None:
tz_name = current_user.timezone
return v.astimezone(pytz.timezone(tz_name)).isoformat()
case date():
return v.isoformat()
case UUID():
return str(v)
case Decimal():
return float(v)
case bytes():
try:
return v.decode("utf-8")
except UnicodeDecodeError:
return v.hex()
case memoryview():
return v.tobytes().hex()
case np.integer():
return int(v)
case np.floating():
return float(v)
case np.ndarray():
return v.tolist()
case dict():
return safe_json_dict(v)
case list() | tuple() | set():
return [safe_json_value(i) for i in v]
case _:
return v
def safe_json_dict(d: dict[str, Any]):

119
api/services/variable_truncator.py
View File

@ -194,14 +194,15 @@ class VariableTruncator(BaseTruncator):
result: _PartResult[Any]
# Apply type-specific truncation with target size
if isinstance(segment, ArraySegment):
result = self._truncate_array(segment.value, target_size)
elif isinstance(segment, StringSegment):
result = self._truncate_string(segment.value, target_size)
elif isinstance(segment, ObjectSegment):
result = self._truncate_object(segment.value, target_size)
else:
raise AssertionError("this should be unreachable.")
match segment:
case ArraySegment():
result = self._truncate_array(segment.value, target_size)
case StringSegment():
result = self._truncate_string(segment.value, target_size)
case ObjectSegment():
result = self._truncate_object(segment.value, target_size)
case _:
raise AssertionError("this should be unreachable.")
return _PartResult(
value=segment.model_copy(update={"value": result.value}),
@ -219,40 +220,41 @@ class VariableTruncator(BaseTruncator):
return VariableTruncator.calculate_json_size(value.model_dump(), depth=depth + 1)
if depth > _MAX_DEPTH:
raise MaxDepthExceededError()
if isinstance(value, str):
# Ideally, the size of strings should be calculated based on their utf-8 encoded length.
# However, this adds complexity as we would need to compute encoded sizes consistently
# throughout the code. Therefore, we approximate the size using the string's length.
# Rough estimate: number of characters, plus 2 for quotes
return len(value) + 2
elif isinstance(value, (int, float)):
return len(str(value))
elif isinstance(value, bool):
return 4 if value else 5 # "true" or "false"
elif value is None:
return 4 # "null"
elif isinstance(value, list):
# Size = sum of elements + separators + brackets
total = 2 # "[]"
for i, item in enumerate(value):
if i > 0:
total += 1 # ","
total += VariableTruncator.calculate_json_size(item, depth=depth + 1)
return total
elif isinstance(value, dict):
# Size = sum of keys + values + separators + brackets
total = 2 # "{}"
for index, key in enumerate(value.keys()):
if index > 0:
total += 1 # ","
total += VariableTruncator.calculate_json_size(str(key), depth=depth + 1) # Key as string
total += 1 # ":"
total += VariableTruncator.calculate_json_size(value[key], depth=depth + 1)
return total
elif isinstance(value, File):
return VariableTruncator.calculate_json_size(value.model_dump(), depth=depth + 1)
else:
raise UnknownTypeError(f"got unknown type {type(value)}")
match value:
case str():
# Ideally, the size of strings should be calculated based on their utf-8 encoded length.
# However, this adds complexity as we would need to compute encoded sizes consistently
# throughout the code. Therefore, we approximate the size using the string's length.
# Rough estimate: number of characters, plus 2 for quotes
return len(value) + 2
case bool():
return 4 if value else 5 # "true" or "false"
case int() | float():
return len(str(value))
case None:
return 4 # "null"
case list():
# Size = sum of elements + separators + brackets
total = 2 # "[]"
for i, item in enumerate(value):
if i > 0:
total += 1 # ","
total += VariableTruncator.calculate_json_size(item, depth=depth + 1)
return total
case dict():
# Size = sum of keys + values + separators + brackets
total = 2 # "{}"
for index, key in enumerate(value.keys()):
if index > 0:
total += 1 # ","
total += VariableTruncator.calculate_json_size(str(key), depth=depth + 1) # Key as string
total += 1 # ":"
total += VariableTruncator.calculate_json_size(value[key], depth=depth + 1)
return total
case File():
return VariableTruncator.calculate_json_size(value.model_dump(), depth=depth + 1)
case _:
raise UnknownTypeError(f"got unknown type {type(value)}")
def _truncate_string(self, value: str, target_size: int) -> _PartResult[str]:
if (size := self.calculate_json_size(value)) < target_size:
@ -419,22 +421,23 @@ class VariableTruncator(BaseTruncator):
target_size: int,
) -> _PartResult[Any]:
"""Truncate a value within an object to fit within budget."""
if isinstance(val, UpdatedVariable):
# TODO(Workflow): push UpdatedVariable normalization closer to its producer.
return self._truncate_object(val.model_dump(), target_size)
elif isinstance(val, str):
return self._truncate_string(val, target_size)
elif isinstance(val, list):
return self._truncate_array(val, target_size)
elif isinstance(val, dict):
return self._truncate_object(val, target_size)
elif isinstance(val, File):
# File objects should not be truncated, return as-is
return _PartResult(val, self.calculate_json_size(val), False)
elif val is None or isinstance(val, (bool, int, float)):
return _PartResult(val, self.calculate_json_size(val), False)
else:
raise AssertionError("this statement should be unreachable.")
match val:
case UpdatedVariable():
# TODO(Workflow): push UpdatedVariable normalization closer to its producer.
return self._truncate_object(val.model_dump(), target_size)
case str():
return self._truncate_string(val, target_size)
case list():
return self._truncate_array(val, target_size)
case dict():
return self._truncate_object(val, target_size)
case File():
# File objects should not be truncated, return as-is
return _PartResult(val, self.calculate_json_size(val), False)
case None | bool() | int() | float():
return _PartResult(val, self.calculate_json_size(val), False)
case _:
raise AssertionError("this statement should be unreachable.")
class DummyVariableTruncator(BaseTruncator):

4
web/app/(shareLayout)/components/authenticated-layout.tsx
View File

@ -39,7 +39,9 @@ const AuthenticatedLayout = ({ children }: { children: React.ReactNode }) => {
const getSigninUrl = useCallback(() => {
const params = new URLSearchParams(searchParams)
params.delete('message')
params.set('redirect_url', pathname)
const query = params.toString()
const fullPath = query ? `${pathname}?${query}` : pathname
params.set('redirect_url', fullPath)
return `/webapp-signin?${params.toString()}`
}, [searchParams, pathname])

2
web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
View File

@ -97,7 +97,7 @@ const AppInfoDetailPanel = ({
<ContentDialog
show={show}
onClose={onClose}
className="absolute top-2 bottom-2 left-2 flex w-[420px] flex-col rounded-2xl p-0!"
className="absolute top-2 bottom-2 left-2 flex w-[452px] max-w-[calc(100vw-1rem)] flex-col rounded-2xl p-0!"
>
<div className="flex shrink-0 flex-col items-start justify-center gap-3 self-stretch p-4">
<div className="flex items-center gap-3 self-stretch">

81
web/app/components/app/app-publisher/__tests__/index.spec.tsx
View File

@ -20,6 +20,7 @@ const mockOpenAsyncWindow = vi.fn()
const mockFetchInstalledAppList = vi.fn()
const mockFetchAppDetailDirect = vi.fn()
const mockToastError = vi.fn()
const mockWindowOpen = vi.fn()
const mockInvalidateAppWorkflow = vi.fn()
const sectionProps = vi.hoisted(() => ({
@ -37,6 +38,7 @@ vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => key,
}),
Trans: ({ i18nKey }: { i18nKey?: string }) => i18nKey ?? null,
}))
vi.mock('ahooks', async () => {
@ -167,6 +169,12 @@ vi.mock('../sections', () => ({
<div>
<button onClick={props.handleEmbed}>publisher-embed</button>
<button onClick={() => void props.handleOpenInExplore()}>publisher-open-in-explore</button>
{props.handleOpenRunConfig && (
<>
<button onClick={() => props.handleOpenRunConfig(props.appURL)}>publisher-run-config</button>
<button onClick={() => props.handleOpenRunConfig(`${props.appURL}?mode=batch`)}>publisher-batch-run-config</button>
</>
)}
<button onClick={props.onConfigureWorkflowTool}>publisher-workflow-tool</button>
</div>
)
@ -200,6 +208,10 @@ describe('AppPublisher', () => {
mockOpenAsyncWindow.mockImplementation(async (resolver: () => Promise<string>) => {
await resolver()
})
Object.defineProperty(window, 'open', {
writable: true,
value: mockWindowOpen,
})
})
it('should open the publish popover and refetch access permission data', async () => {
@ -256,6 +268,75 @@ describe('AppPublisher', () => {
expect(screen.getByTestId('embedded-modal'))!.toBeInTheDocument()
})
it('should collect hidden inputs before opening published run links from config actions', async () => {
render(
<AppPublisher
publishedAt={Date.now()}
inputs={[{
variable: 'secret',
label: 'Secret',
type: 'text-input',
required: true,
hide: true,
default: '',
} as any]}
/>,
)
fireEvent.click(screen.getByText('common.publish'))
fireEvent.click(screen.getByText('publisher-run-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}/chat/token-1?secret=${encodeURIComponent('top-secret')}`,
'_blank',
)
})
})
it('should open batch run config links with the configured hidden inputs', async () => {
mockAppDetail = {
...mockAppDetail,
mode: AppModeEnum.WORKFLOW,
}
render(
<AppPublisher
publishedAt={Date.now()}
inputs={[{
variable: 'batch_secret',
label: 'Batch Secret',
type: 'text-input',
required: true,
hide: true,
default: '',
} as any]}
/>,
)
fireEvent.click(screen.getByText('common.publish'))
fireEvent.click(screen.getByText('publisher-batch-run-config'))
fireEvent.change(screen.getByLabelText('Batch Secret'), {
target: { value: 'batch-value' },
})
fireEvent.click(screen.getByRole('button', { name: 'overview.appInfo.launch' }))
await waitFor(() => {
expect(mockWindowOpen).toHaveBeenCalledWith(
`https://example.com${basePath}/workflow/token-1?mode=batch&batch_secret=${encodeURIComponent('batch-value')}`,
'_blank',
)
})
})
it('should keep workflow tool drawer mounted after closing the publish popover', () => {
mockAppDetail = {
...mockAppDetail,

59
web/app/components/app/app-publisher/__tests__/sections.spec.tsx
View File

@ -18,8 +18,32 @@ vi.mock('../publish-with-multiple-model', () => ({
}))
vi.mock('../suggested-action', () => ({
default: ({ children, onClick, link, disabled }: { children: ReactNode, onClick?: () => void, link?: string, disabled?: boolean }) => (
<button type="button" data-link={link} disabled={disabled} onClick={onClick}>{children}</button>
default: ({
children,
onClick,
link,
disabled,
actionButton,
}: {
children: ReactNode
onClick?: () => void
link?: string
disabled?: boolean
actionButton?: { ariaLabel: string, onClick: () => void }
}) => (
<div>
<button type="button" data-link={link} disabled={disabled} onClick={onClick}>{children}</button>
{actionButton && (
<button
type="button"
aria-label={actionButton.ariaLabel}
disabled={disabled}
onClick={actionButton.onClick}
>
{actionButton.ariaLabel}
</button>
)}
</div>
),
}))
@ -170,9 +194,25 @@ describe('app-publisher sections', () => {
expect(render(<AccessModeDisplay />).container).toBeEmptyDOMElement()
})
it('should hide access control content when enabled is false', () => {
render(
<PublisherAccessSection
enabled={false}
isAppAccessSet
isLoading={false}
accessMode={AccessMode.PUBLIC}
onClick={vi.fn()}
/>,
)
expect(screen.queryByText('publishApp.title')).not.toBeInTheDocument()
expect(screen.queryByText('accessControlDialog.accessItems.anyone')).not.toBeInTheDocument()
})
it('should render workflow actions, batch run links, and workflow tool configuration', () => {
const handleOpenInExplore = vi.fn()
const handleEmbed = vi.fn()
const handleOpenRunConfig = vi.fn()
const { rerender } = render(
<PublisherActionsSection
@ -190,10 +230,15 @@ describe('app-publisher sections', () => {
disabledFunctionTooltip="disabled"
handleEmbed={handleEmbed}
handleOpenInExplore={handleOpenInExplore}
handleOpenRunConfig={handleOpenRunConfig}
handlePublish={vi.fn()}
hasHumanInputNode={false}
hasTriggerNode={false}
missingStartNode={false}
published={false}
publishedAt={Date.now()}
showBatchRunConfig
showRunConfig
toolPublished
workflowToolAvailable={false}
workflowToolIsLoading={false}
@ -205,6 +250,10 @@ describe('app-publisher sections', () => {
)
expect(screen.getByText('common.batchRunApp')).toHaveAttribute('data-link', 'https://example.com/app?mode=batch')
fireEvent.click(screen.getAllByRole('button', { name: 'operation.config' })[0]!)
expect(handleOpenRunConfig).toHaveBeenCalledWith('https://example.com/app')
fireEvent.click(screen.getAllByRole('button', { name: 'operation.config' })[1]!)
expect(handleOpenRunConfig).toHaveBeenCalledWith('https://example.com/app?mode=batch')
fireEvent.click(screen.getByText('common.openInExplore'))
expect(handleOpenInExplore).toHaveBeenCalled()
expect(screen.getByText('workflow-tool-configure')).toBeInTheDocument()
@ -222,9 +271,12 @@ describe('app-publisher sections', () => {
disabledFunctionTooltip="disabled"
handleEmbed={handleEmbed}
handleOpenInExplore={handleOpenInExplore}
handleOpenRunConfig={handleOpenRunConfig}
handlePublish={vi.fn()}
hasHumanInputNode={false}
hasTriggerNode={false}
missingStartNode
published={false}
publishedAt={Date.now()}
toolPublished={false}
workflowToolAvailable
@ -246,9 +298,12 @@ describe('app-publisher sections', () => {
disabledFunctionButton={false}
handleEmbed={handleEmbed}
handleOpenInExplore={handleOpenInExplore}
handleOpenRunConfig={handleOpenRunConfig}
handlePublish={vi.fn()}
hasHumanInputNode={false}
hasTriggerNode
missingStartNode={false}
published={false}
publishedAt={undefined}
toolPublished={false}
workflowToolAvailable

43
web/app/components/app/app-publisher/__tests__/suggested-action.spec.tsx
View File

@ -46,4 +46,47 @@ describe('SuggestedAction', () => {
expect(handleClick).toHaveBeenCalledTimes(1)
})
it('should render and trigger the trailing action button when configured', () => {
const handleActionClick = vi.fn()
render(
<SuggestedAction
link="https://example.com/docs"
actionButton={{
ariaLabel: 'Configure action',
icon: <span>config</span>,
onClick: handleActionClick,
}}
>
Configurable action
</SuggestedAction>,
)
fireEvent.click(screen.getByRole('button', { name: 'Configure action' }))
expect(screen.getByRole('link', { name: 'Configurable action' })).toHaveAttribute('href', 'https://example.com/docs')
expect(handleActionClick).toHaveBeenCalledTimes(1)
})
it('should block action button clicks when disabled', () => {
const handleActionClick = vi.fn()
render(
<SuggestedAction
link="https://example.com/docs"
disabled
actionButton={{
ariaLabel: 'Configure action',
icon: <span>config</span>,
onClick: handleActionClick,
}}
>
Disabled with action
</SuggestedAction>,
)
fireEvent.click(screen.getByRole('button', { name: 'Configure action' }))
expect(handleActionClick).not.toHaveBeenCalled()
})
})

70
web/app/components/app/app-publisher/index.tsx
View File

@ -1,4 +1,6 @@
import type { FormEvent } from 'react'
import type { ModelAndParameter } from '../configuration/debug/types'
import type { WorkflowHiddenStartVariable, WorkflowLaunchInputValue } from '@/app/components/app/overview/app-card-utils'
import type { CollaborationUpdate } from '@/app/components/workflow/collaboration/types/collaboration'
import type { InputVar, Variable } from '@/app/components/workflow/types'
import type { PublishWorkflowParams } from '@/types/workflow'
@ -8,6 +10,7 @@ import { toast } from '@langgenius/dify-ui/toast'
import { useSuspenseQuery } from '@tanstack/react-query'
import { useKeyPress } from 'ahooks'
import {
memo,
use,
useCallback,
@ -16,6 +19,13 @@ import {
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import { WorkflowLaunchDialog } from '@/app/components/app/overview/app-card-sections'
import {
buildWorkflowLaunchUrl,
createWorkflowLaunchInitialValues,
isWorkflowLaunchInputSupported,
} from '@/app/components/app/overview/app-card-utils'
import EmbeddedModal from '@/app/components/app/overview/embedded'
import { useStore as useAppStore } from '@/app/components/app/store'
import { trackEvent } from '@/app/components/base/amplitude'
@ -111,6 +121,9 @@ const AppPublisher = ({
const [workflowToolDrawerOpen, setWorkflowToolDrawerOpen] = useState(false)
const [embeddingModalOpen, setEmbeddingModalOpen] = useState(false)
const [workflowLaunchDialogOpen, setWorkflowLaunchDialogOpen] = useState(false)
const [workflowLaunchTargetUrl, setWorkflowLaunchTargetUrl] = useState('')
const [workflowLaunchValues, setWorkflowLaunchValues] = useState<Record<string, WorkflowLaunchInputValue>>({})
const [publishingToMarketplace, setPublishingToMarketplace] = useState(false)
const workflowStore = use(WorkflowContext)
@ -122,6 +135,22 @@ const AppPublisher = ({
const appURL = getPublisherAppUrl({ appBaseUrl: appBaseURL, accessToken, mode: appDetail?.mode })
const isChatApp = [AppModeEnum.CHAT, AppModeEnum.AGENT_CHAT, AppModeEnum.COMPLETION].includes(appDetail?.mode || AppModeEnum.CHAT)
const hiddenLaunchVariables = useMemo<WorkflowHiddenStartVariable[]>(
() => (inputs ?? []).filter(input => input.hide === true),
[inputs],
)
const supportedWorkflowLaunchVariables = useMemo(
() => hiddenLaunchVariables.filter(isWorkflowLaunchInputSupported),
[hiddenLaunchVariables],
)
const unsupportedWorkflowLaunchVariables = useMemo(
() => hiddenLaunchVariables.filter(variable => !isWorkflowLaunchInputSupported(variable)),
[hiddenLaunchVariables],
)
const initialWorkflowLaunchValues = useMemo(
() => createWorkflowLaunchInitialValues(supportedWorkflowLaunchVariables),
[supportedWorkflowLaunchVariables],
)
const { data: userCanAccessApp, isLoading: isGettingUserCanAccessApp, refetch } = useGetUserCanAccessApp({ appId: appDetail?.id, enabled: false })
const { data: appAccessSubjects, isLoading: isGettingAppWhiteListSubjects } = useAppWhiteListSubjects(appDetail?.id, open && systemFeatures.webapp_auth.enabled && appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS)
@ -231,6 +260,31 @@ const AppPublisher = ({
}
}, [appDetail, setAppDetail])
const handleOpenWorkflowLaunchDialog = useCallback((targetUrl: string) => {
setWorkflowLaunchValues(initialWorkflowLaunchValues)
setWorkflowLaunchTargetUrl(targetUrl)
setWorkflowLaunchDialogOpen(true)
}, [initialWorkflowLaunchValues])
const handleWorkflowLaunchValueChange = useCallback((variable: string, value: WorkflowLaunchInputValue) => {
setWorkflowLaunchValues(prev => ({
...prev,
[variable]: value,
}))
}, [])
const handleWorkflowLaunchConfirm = useCallback(async (event: FormEvent<HTMLFormElement>) => {
event.preventDefault()
const targetUrl = await buildWorkflowLaunchUrl({
accessibleUrl: workflowLaunchTargetUrl,
variables: supportedWorkflowLaunchVariables,
values: workflowLaunchValues,
})
window.open(targetUrl, '_blank')
setWorkflowLaunchDialogOpen(false)
}, [supportedWorkflowLaunchVariables, workflowLaunchTargetUrl, workflowLaunchValues])
const handlePublishToMarketplace = useCallback(async () => {
if (!appDetail?.id || publishingToMarketplace)
return
@ -377,10 +431,15 @@ const AppPublisher = ({
handleOpenChange(false)
handleOpenInExplore()
}}
handleOpenRunConfig={handleOpenWorkflowLaunchDialog}
handlePublish={handlePublish}
hasHumanInputNode={hasHumanInputNode}
hasTriggerNode={hasTriggerNode}
missingStartNode={missingStartNode}
published={published}
publishedAt={publishedAt}
showBatchRunConfig={hiddenLaunchVariables.length > 0 && (appDetail?.mode === AppModeEnum.WORKFLOW || appDetail?.mode === AppModeEnum.COMPLETION)}
showRunConfig={hiddenLaunchVariables.length > 0}
toolPublished={toolPublished}
workflowToolAvailable={workflowToolAvailable}
workflowToolIsLoading={workflowTool.isLoading}
@ -410,8 +469,19 @@ const AppPublisher = ({
onClose={() => setEmbeddingModalOpen(false)}
appBaseUrl={appBaseURL}
accessToken={accessToken}
hiddenInputs={hiddenLaunchVariables}
/>
{showAppAccessControl && <AccessControl app={appDetail!} onConfirm={handleAccessControlUpdate} onClose={() => { setShowAppAccessControl(false) }} />}
<WorkflowLaunchDialog
t={t}
open={workflowLaunchDialogOpen}
hiddenVariables={supportedWorkflowLaunchVariables}
unsupportedVariables={unsupportedWorkflowLaunchVariables}
values={workflowLaunchValues}
onOpenChange={setWorkflowLaunchDialogOpen}
onValueChange={handleWorkflowLaunchValueChange}
onSubmit={handleWorkflowLaunchConfirm}
/>
</Popover>
{workflowToolDrawerOpen && (
<WorkflowToolDrawer

23
web/app/components/app/app-publisher/sections.tsx
View File

@ -8,6 +8,7 @@ import {
TooltipContent,
TooltipTrigger,
} from '@langgenius/dify-ui/tooltip'
import { RiSettings2Line } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import Divider from '@/app/components/base/divider'
import Loading from '@/app/components/base/loading'
@ -62,6 +63,11 @@ type ActionsSectionProps = Pick<AppPublisherProps, | 'hasHumanInputNode'
disabledFunctionTooltip?: string
handleEmbed: () => void
handleOpenInExplore: () => void
handleOpenRunConfig?: (url: string) => void
handlePublish: (params?: ModelAndParameter | PublishWorkflowParams) => Promise<void>
published: boolean
showBatchRunConfig?: boolean
showRunConfig?: boolean
workflowToolIsLoading: boolean
workflowToolOutdated: boolean
workflowToolIsCurrentWorkspaceManager: boolean
@ -253,10 +259,13 @@ export const PublisherActionsSection = ({
disabledFunctionTooltip,
handleEmbed,
handleOpenInExplore,
handleOpenRunConfig,
hasHumanInputNode = false,
hasTriggerNode = false,
missingStartNode = false,
publishedAt,
showBatchRunConfig = false,
showRunConfig = false,
toolPublished,
workflowToolAvailable = true,
workflowToolIsLoading,
@ -280,6 +289,13 @@ export const PublisherActionsSection = ({
disabled={disabledFunctionButton}
link={appURL}
icon={<span className="i-ri-play-circle-line h-4 w-4" />}
actionButton={showRunConfig
? {
ariaLabel: t('operation.config', { ns: 'common' }),
icon: <RiSettings2Line className="h-4 w-4" />,
onClick: () => handleOpenRunConfig?.(appURL),
}
: undefined}
>
{t('common.runApp', { ns: 'workflow' })}
</SuggestedAction>
@ -292,6 +308,13 @@ export const PublisherActionsSection = ({
disabled={disabledFunctionButton}
link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
icon={<span className="i-ri-play-list-2-line h-4 w-4" />}
actionButton={showBatchRunConfig
? {
ariaLabel: t('operation.config', { ns: 'common' }),
icon: <RiSettings2Line className="h-4 w-4" />,
onClick: () => handleOpenRunConfig?.(`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`),
}
: undefined}
>
{t('common.batchRunApp', { ns: 'workflow' })}
</SuggestedAction>

78
web/app/components/app/app-publisher/suggested-action.tsx
View File

@ -1,33 +1,93 @@
import type { HTMLProps, PropsWithChildren } from 'react'
import type { HTMLProps, PropsWithChildren, MouseEvent as ReactMouseEvent } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import { RiArrowRightUpLine } from '@remixicon/react'
type SuggestedActionButton = {
ariaLabel: string
icon: React.ReactNode
onClick: (event: ReactMouseEvent<HTMLButtonElement>) => void
}
type SuggestedActionProps = PropsWithChildren<HTMLProps<HTMLAnchorElement> & {
icon?: React.ReactNode
link?: string
disabled?: boolean
actionButton?: SuggestedActionButton
}>
const SuggestedAction = ({ icon, link, disabled, children, className, onClick, ...props }: SuggestedActionProps) => {
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
if (disabled)
const SuggestedAction = ({
icon,
link,
disabled,
children,
className,
onClick,
actionButton,
...props
}: SuggestedActionProps) => {
const handleClick = (event: ReactMouseEvent<HTMLAnchorElement>) => {
if (disabled) {
event.preventDefault()
return
onClick?.(e)
}
onClick?.(event)
}
return (
const handleActionClick = (event: ReactMouseEvent<HTMLButtonElement>) => {
if (disabled) {
event.preventDefault()
return
}
actionButton?.onClick(event)
}
const mainAction = (
<a
href={disabled ? undefined : link}
target="_blank"
rel="noreferrer"
className={cn('flex items-center justify-start gap-2 rounded-lg bg-background-section-burn px-2.5 py-2 text-text-secondary transition-colors not-first:mt-1', disabled ? 'cursor-not-allowed opacity-30 shadow-xs' : 'cursor-pointer text-text-secondary hover:bg-state-accent-hover hover:text-text-accent', className)}
className={cn(
'flex min-w-0 items-center justify-start gap-2 px-2.5 py-2 text-text-secondary transition-colors',
actionButton ? 'flex-1 rounded-l-lg' : 'rounded-lg bg-background-section-burn not-first:mt-1',
disabled ? 'cursor-not-allowed opacity-30 shadow-xs' : 'cursor-pointer hover:bg-state-accent-hover hover:text-text-accent',
)}
onClick={handleClick}
{...props}
>
<div className="relative h-4 w-4">{icon}</div>
<div className="relative h-4 w-4 shrink-0">{icon}</div>
<div className="shrink grow basis-0 system-sm-medium">{children}</div>
<RiArrowRightUpLine className="h-3.5 w-3.5" />
<RiArrowRightUpLine className="h-3.5 w-3.5 shrink-0" />
</a>
)
if (!actionButton)
return mainAction
return (
<div
className={cn(
'flex items-stretch rounded-lg bg-background-section-burn not-first:mt-1',
disabled ? 'opacity-30 shadow-xs' : '',
className,
)}
>
{mainAction}
<button
type="button"
aria-label={actionButton.ariaLabel}
disabled={disabled}
className={cn(
'flex w-9 shrink-0 items-center justify-center rounded-r-lg border-l-[0.5px] border-divider-subtle text-text-tertiary transition-colors',
disabled ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-state-accent-hover hover:text-text-accent',
)}
onClick={handleActionClick}
>
{actionButton.icon}
</button>
</div>
)
}
export default SuggestedAction

72
web/app/components/app/configuration/config-var/config-modal/__tests__/form-fields.spec.tsx
View File

@ -4,6 +4,29 @@ import { fireEvent, render, screen } from '@testing-library/react'
import { InputVarType } from '@/app/components/workflow/types'
import ConfigModalFormFields from '../form-fields'
vi.mock('react-i18next', async () => {
const React = await import('react')
return {
useTranslation: () => ({
t: (key: string, options?: Record<string, unknown>) => {
const ns = options?.ns as string | undefined
return ns ? `${ns}.${key}` : key
},
i18n: { language: 'en', changeLanguage: vi.fn() },
}),
Trans: ({ i18nKey, components }: { i18nKey: string, components?: Record<string, ReactNode> }) => (
<span data-i18n-key={i18nKey}>
{i18nKey}
{components?.docLink}
</span>
),
}
})
vi.mock('@/context/i18n', () => ({
useDocLink: () => (path?: string) => `https://docs.example.com${path || ''}`,
}))
vi.mock('@/app/components/base/file-uploader', () => ({
FileUploaderInAttachmentWrapper: ({
onChange,
@ -74,6 +97,12 @@ vi.mock('@langgenius/dify-ui/select', async (importOriginal) => {
}
})
vi.mock('@langgenius/dify-ui/tooltip', () => ({
Tooltip: ({ children }: { children: ReactNode }) => <div>{children}</div>,
TooltipTrigger: ({ children }: { children: ReactNode }) => <div>{children}</div>,
TooltipContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
}))
vi.mock('../field', () => ({
default: ({ children, title }: { children: ReactNode, title: string }) => (
<div>
@ -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(<ConfigModalFormFields {...textInputProps} />)
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(<ConfigModalFormFields {...singleFileProps} />)
const singleFileView = render(<ConfigModalFormFields {...singleFileProps} />)
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(<ConfigModalFormFields {...multiFileProps} />)
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(<ConfigModalFormFields {...requiredProps} />)
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(<ConfigModalFormFields {...hideProps} />)
const allButtons = screen.getAllByRole('button')
const checkedHideButton = allButtons.find(btn => btn.textContent === 'checked')
expect(checkedHideButton).toBeDefined()
})
})

4
web/app/components/app/configuration/config-var/config-modal/__tests__/index-logic.spec.tsx
View File

@ -25,6 +25,7 @@ vi.mock('../form-fields', () => ({
return (
<div data-testid="config-form-fields">
<div data-testid="payload-type">{String(props.tempPayload.type)}</div>
<div data-testid="payload-hide">{String(props.tempPayload.hide)}</div>
<div data-testid="payload-label">{String(props.tempPayload.label ?? '')}</div>
<div data-testid="payload-schema">{String(props.tempPayload.json_schema ?? '')}</div>
<div data-testid="payload-default">{String(props.tempPayload.default ?? '')}</div>
@ -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'))

20
web/app/components/app/configuration/config-var/config-modal/__tests__/utils.spec.ts
View File

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

45
web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
View File

@ -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<ConfigModalFormFieldsProps> = ({
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 (
<div className="space-y-2">
@ -105,7 +111,7 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
{type === InputVarType.textInput && (
<Field title={t('variableConfig.defaultValue', { ns: 'appDebug' })}>
<Input
value={tempPayload.default || ''}
value={typeof tempPayload.default === 'string' ? tempPayload.default : ''}
onChange={e => onPayloadChange('default')(e.target.value || undefined)}
placeholder={t('variableConfig.inputPlaceholder', { ns: 'appDebug' })}
/>
@ -126,7 +132,7 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
<Field title={t('variableConfig.defaultValue', { ns: 'appDebug' })}>
<Input
type="number"
value={tempPayload.default || ''}
value={typeof tempPayload.default === 'number' || typeof tempPayload.default === 'string' ? tempPayload.default : ''}
onChange={e => onPayloadChange('default')(e.target.value || undefined)}
placeholder={t('variableConfig.inputPlaceholder', { ns: 'appDebug' })}
/>
@ -186,7 +192,7 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
</>
)}
{[InputVarType.singleFile, InputVarType.multiFiles].includes(type) && (
{isFileInput && (
<>
<FileUploadSetting
payload={tempPayload as UploadFileSetting}
@ -227,14 +233,37 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
)}
<div className="mt-5! flex h-6 items-center space-x-2">
<Checkbox checked={tempPayload.required} disabled={tempPayload.hide} onCheck={() => onPayloadChange('required')(!tempPayload.required)} />
<Checkbox checked={tempPayload.required} disabled={!isFileInput && tempPayload.hide} onCheck={() => onPayloadChange('required')(!tempPayload.required)} />
<span className="system-sm-semibold text-text-secondary">{t('variableConfig.required', { ns: 'appDebug' })}</span>
</div>
<div className="mt-5! flex h-6 items-center space-x-2">
<Checkbox checked={tempPayload.hide} disabled={tempPayload.required} onCheck={() => onPayloadChange('hide')(!tempPayload.hide)} />
<span className="system-sm-semibold text-text-secondary">{t('variableConfig.hide', { ns: 'appDebug' })}</span>
</div>
{!isFileInput && (
<div className="mt-5! flex h-6 items-center space-x-2">
<Checkbox checked={tempPayload.hide} disabled={tempPayload.required} onCheck={() => onPayloadChange('hide')(!tempPayload.hide)} />
<div className="flex items-center gap-1">
<span className="system-sm-semibold text-text-secondary">{t('variableConfig.hidden', { ns: 'appDebug' })}</span>
<Infotip
aria-label={hiddenDescriptionAriaLabel}
popupClassName="max-w-[300px]"
>
<Trans
i18nKey="variableConfig.hiddenDescription"
ns="appDebug"
components={{
docLink: (
<a
href={docLink('/use-dify/nodes/user-input#hide-and-pre-fill-input-fields')}
target="_blank"
rel="noopener noreferrer"
className="text-text-accent hover:underline"
/>
),
}}
/>
</Infotip>
</div>
</div>
)}
</div>
)
}

35
web/app/components/app/configuration/config-var/config-modal/utils.ts
View File

@ -88,7 +88,9 @@ export const createPayloadForType = (payload: InputVar, type: InputVarType) => {
draft.default = undefined
if ([InputVarType.singleFile, InputVarType.multiFiles].includes(type)) {
(Object.keys(DEFAULT_FILE_UPLOAD_SETTING) as Array<keyof typeof DEFAULT_FILE_UPLOAD_SETTING>).forEach((key) => {
draft.hide = false
const fileUploadSettingKeys = Object.keys(DEFAULT_FILE_UPLOAD_SETTING) as Array<keyof typeof DEFAULT_FILE_UPLOAD_SETTING>
fileUploadSettingKeys.forEach((key) => {
if (key !== 'max_length')
draft[key] = DEFAULT_FILE_UPLOAD_SETTING[key] as never
})
@ -158,38 +160,41 @@ export const validateConfigModalPayload = ({
checkVariableName,
t,
}: ValidateConfigModalPayloadOptions): ValidateConfigModalPayloadResult => {
const normalizedTempPayload = [InputVarType.singleFile, InputVarType.multiFiles].includes(tempPayload.type)
? { ...tempPayload, hide: false }
: tempPayload
const jsonSchemaValue = tempPayload.json_schema
const schemaEmpty = isJsonSchemaEmpty(jsonSchemaValue)
const normalizedJsonSchema = schemaEmpty ? undefined : jsonSchemaValue
const payloadToSave = tempPayload.type === InputVarType.jsonObject && schemaEmpty
? { ...tempPayload, json_schema: undefined }
: tempPayload
const payloadToSave = normalizedTempPayload.type === InputVarType.jsonObject && schemaEmpty
? { ...normalizedTempPayload, json_schema: undefined }
: normalizedTempPayload
const moreInfo = tempPayload.variable === payload?.variable
const moreInfo = normalizedTempPayload.variable === payload?.variable
? undefined
: {
type: ChangeType.changeVarName,
payload: { beforeKey: payload?.variable || '', afterKey: tempPayload.variable },
payload: { beforeKey: payload?.variable || '', afterKey: normalizedTempPayload.variable },
}
if (!checkVariableName(tempPayload.variable))
if (!checkVariableName(normalizedTempPayload.variable))
return {}
if (!tempPayload.label) {
if (!normalizedTempPayload.label) {
return {
errorMessage: t('variableConfig.errorMsg.labelNameRequired', { ns: 'appDebug' }),
}
}
if (tempPayload.type === InputVarType.select) {
if (!tempPayload.options?.length) {
if (normalizedTempPayload.type === InputVarType.select) {
if (!normalizedTempPayload.options?.length) {
return {
errorMessage: t('variableConfig.errorMsg.atLeastOneOption', { ns: 'appDebug' }),
}
}
const duplicated = new Set<string>()
const hasRepeatedItem = tempPayload.options.some((option) => {
const hasRepeatedItem = normalizedTempPayload.options.some((option) => {
if (duplicated.has(option))
return true
@ -204,8 +209,8 @@ export const validateConfigModalPayload = ({
}
}
if ([InputVarType.singleFile, InputVarType.multiFiles].includes(tempPayload.type)) {
if (!tempPayload.allowed_file_types?.length) {
if ([InputVarType.singleFile, InputVarType.multiFiles].includes(normalizedTempPayload.type)) {
if (!normalizedTempPayload.allowed_file_types?.length) {
return {
errorMessage: t('errorMsg.fieldRequired', {
ns: 'workflow',
@ -214,7 +219,7 @@ export const validateConfigModalPayload = ({
}
}
if (tempPayload.allowed_file_types.includes(SupportUploadFileTypes.custom) && !tempPayload.allowed_file_extensions?.length) {
if (normalizedTempPayload.allowed_file_types.includes(SupportUploadFileTypes.custom) && !normalizedTempPayload.allowed_file_extensions?.length) {
return {
errorMessage: t('errorMsg.fieldRequired', {
ns: 'workflow',
@ -224,7 +229,7 @@ export const validateConfigModalPayload = ({
}
}
if (tempPayload.type === InputVarType.jsonObject && !schemaEmpty && typeof normalizedJsonSchema === 'string') {
if (normalizedTempPayload.type === InputVarType.jsonObject && !schemaEmpty && typeof normalizedJsonSchema === 'string') {
try {
const schema = JSON.parse(normalizedJsonSchema)
if (schema?.type !== 'object') {

163
web/app/components/app/overview/__tests__/app-card-sections.spec.tsx
View File

@ -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 }) => <span>{i18nKey}</span>,
}))
vi.mock('../settings', () => ({
default: () => <div data-testid="settings-modal" />,
}))
vi.mock('../embedded', () => ({
default: () => <div data-testid="embedded-modal" />,
}))
vi.mock('../customize', () => ({
default: () => <div data-testid="customize-modal" />,
}))
vi.mock('../../app-access-control', () => ({
default: ({ onClose, onConfirm }: { onClose: () => void, onConfirm: () => void }) => (
<div data-testid="access-control">
<button type="button" onClick={onClose}>close-access</button>
<button type="button" onClick={onConfirm}>confirm-access</button>
</div>
),
}))
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', () => {
<AppCardOperations
t={t as never}
operations={operations}
launchConfigAction={{
label: 'operation.config',
disabled: false,
onClick: onLaunchConfig,
}}
/>,
)
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<HTMLFormElement>) => {
event.preventDefault()
})
render(
<WorkflowLaunchDialog
t={t as never}
open
hiddenVariables={[{
variable: 'secret',
label: 'Secret',
type: InputVarType.textInput,
hide: true,
required: true,
}]}
unsupportedVariables={[]}
values={{ secret: 'hello' }}
onOpenChange={onOpenChange}
onValueChange={onValueChange}
onSubmit={onSubmit}
/>,
)
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(
<WorkflowLaunchDialog
t={t as never}
open
hiddenVariables={[]}
unsupportedVariables={[]}
values={{}}
onOpenChange={vi.fn()}
onValueChange={vi.fn()}
onSubmit={vi.fn()}
/>,
)
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(
<AppCardDialogs
isApp
appInfo={appInfo}
appMode={AppModeEnum.CHAT}
showSettingsModal
showEmbedded
showCustomizeModal
showAccessControl
appDetail={{ id: 'app-1', access_mode: AccessMode.PUBLIC } as AppDetailResponse}
onCloseSettings={vi.fn()}
onCloseEmbedded={vi.fn()}
onCloseCustomize={vi.fn()}
onCloseAccessControl={vi.fn()}
onSaveSiteConfig={vi.fn()}
onConfirmAccessControl={vi.fn()}
/>,
)
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(
<AppCardDialogs
isApp={false}
appInfo={{} as never}
appMode={AppModeEnum.CHAT}
showSettingsModal={false}
showEmbedded={false}
showCustomizeModal={false}
showAccessControl={false}
appDetail={null}
onCloseSettings={vi.fn()}
onCloseEmbedded={vi.fn()}
onCloseCustomize={vi.fn()}
onCloseAccessControl={vi.fn()}
onSaveSiteConfig={vi.fn()}
onConfirmAccessControl={vi.fn()}
/>,
)
expect(container).toBeEmptyDOMElement()
})
})

223
web/app/components/app/overview/__tests__/app-card-utils.spec.ts
View File

@ -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: '' })
})
})

182
web/app/components/app/overview/__tests__/app-card.spec.tsx
View File

@ -2,6 +2,7 @@ import type { ReactElement, ReactNode } 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<Record<string, unknown>> } }> } } | 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', () => ({
@ -164,6 +166,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(
<AppCard
appInfo={{
...appInfo,
mode: AppModeEnum.WORKFLOW,
}}
onChangeStatus={mockOnChangeStatus}
/>,
)
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(
<AppCard
appInfo={{
...appInfo,
mode: AppModeEnum.WORKFLOW,
}}
onChangeStatus={mockOnChangeStatus}
/>,
)
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(
<AppCard
appInfo={{
...appInfo,
mode: AppModeEnum.ADVANCED_CHAT,
} as AppDetailResponse}
onChangeStatus={mockOnChangeStatus}
/>,
)
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(
<AppCard
appInfo={{
...appInfo,
mode: AppModeEnum.ADVANCED_CHAT,
} as AppDetailResponse}
onChangeStatus={mockOnChangeStatus}
/>,
)
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(
<AppCard
@ -302,7 +480,7 @@ describe('AppCard', () => {
})
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(

214
web/app/components/app/overview/__tests__/workflow-hidden-input-fields.spec.tsx Normal file
View File

@ -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(
<WorkflowHiddenInputFields
hiddenVariables={[{
variable: 'name',
label: 'Full Name',
type: InputVarType.textInput,
hide: true,
required: true,
}]}
values={{ name: 'Alice' }}
onValueChange={onValueChange}
/>,
)
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(
<WorkflowHiddenInputFields
hiddenVariables={[{
variable: 'count',
label: 'Count',
type: InputVarType.number,
hide: true,
required: false,
}]}
values={{ count: '5' }}
onValueChange={onValueChange}
/>,
)
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(
<WorkflowHiddenInputFields
hiddenVariables={[{
variable: 'enabled',
label: 'Enable Feature',
type: InputVarType.checkbox,
hide: true,
required: false,
}]}
values={{ enabled: true }}
onValueChange={onValueChange}
/>,
)
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(
<WorkflowHiddenInputFields
hiddenVariables={[{
variable: 'color',
label: 'Color',
type: InputVarType.select,
hide: true,
required: false,
options: ['red', 'green', 'blue'],
}]}
values={{ color: 'red' }}
onValueChange={onValueChange}
/>,
)
expect(screen.getByRole('combobox', { name: 'Color' })).toBeInTheDocument()
})
it('should render a textarea for paragraph-typed variables', () => {
render(
<WorkflowHiddenInputFields
hiddenVariables={[{
variable: 'description',
label: 'Description',
type: InputVarType.paragraph,
hide: true,
required: false,
max_length: 500,
}]}
values={{ description: 'Hello world' }}
onValueChange={onValueChange}
/>,
)
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(
<WorkflowHiddenInputFields
hiddenVariables={[{
variable: 'config',
label: 'Config JSON',
type: InputVarType.json,
hide: true,
required: false,
}]}
values={{ config: '{"key": "value"}' }}
onValueChange={onValueChange}
/>,
)
const textarea = screen.getByPlaceholderText('Config JSON')
expect(textarea).toHaveValue('{"key": "value"}')
})
it('should render a textarea for jsonObject-typed variables', () => {
render(
<WorkflowHiddenInputFields
hiddenVariables={[{
variable: 'schema',
label: 'Schema',
type: InputVarType.jsonObject,
hide: true,
required: false,
}]}
values={{ schema: '{}' }}
onValueChange={onValueChange}
/>,
)
const textarea = screen.getByPlaceholderText('Schema')
expect(textarea).toHaveValue('{}')
})
it('should use the variable key as label when label is not a string', () => {
render(
<WorkflowHiddenInputFields
hiddenVariables={[{
variable: 'my_var',
label: { nodeType: 'start' as never, nodeName: 'Start', variable: 'my_var' },
type: InputVarType.textInput,
hide: true,
required: false,
}]}
values={{ my_var: '' }}
onValueChange={onValueChange}
/>,
)
expect(screen.getByText('my_var')).toBeInTheDocument()
})
it('should use the custom fieldIdPrefix for element ids', () => {
const { container } = render(
<WorkflowHiddenInputFields
hiddenVariables={[{
variable: 'token',
label: 'Token',
type: InputVarType.textInput,
hide: true,
required: false,
}]}
values={{ token: 'abc' }}
onValueChange={onValueChange}
fieldIdPrefix="custom-prefix"
/>,
)
expect(container.querySelector('#custom-prefix-token')).toBeInTheDocument()
})
it('should render empty string for non-string fieldValue in text inputs', () => {
render(
<WorkflowHiddenInputFields
hiddenVariables={[{
variable: 'flag',
label: 'Flag',
type: InputVarType.textInput,
hide: true,
required: false,
}]}
values={{ flag: true as never }}
onValueChange={onValueChange}
/>,
)
const input = screen.getByLabelText('Flag')
expect(input).toHaveValue('')
})
})

167
web/app/components/app/overview/app-card-sections.tsx
View File

@ -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<AppSSO>
@ -50,6 +62,12 @@ type AppCardOperation = {
onClick: () => void
}
type LaunchConfigAction = {
label: string
disabled: boolean
onClick: () => void
}
const OPERATION_ICON_MAP: Record<OverviewOperationKey, OperationIcon> = {
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<string, WorkflowLaunchInputValue>
onOpenChange: (open: boolean) => void
onValueChange: (variable: string, value: WorkflowLaunchInputValue) => void
onSubmit: (event: FormEvent<HTMLFormElement>) => void
}) => {
if (!hiddenVariables.length && !unsupportedVariables.length)
return null
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="w-[560px]! max-w-[calc(100vw-2rem)]! p-0!">
<div className="flex flex-col gap-2 px-6 pt-6 pb-4">
<DialogTitle className="title-2xl-semi-bold text-text-primary">
{t('overview.appInfo.workflowLaunchHiddenInputs.title', { ns: 'appOverview' })}
</DialogTitle>
<DialogDescription className="system-md-regular text-text-tertiary">
<Trans
i18nKey="overview.appInfo.workflowLaunchHiddenInputs.description"
ns="appOverview"
components={{ bold: <span className="system-md-medium" /> }}
/>
</DialogDescription>
</div>
<form onSubmit={onSubmit}>
<div className="space-y-4 px-6 pb-4">
<WorkflowHiddenInputFields
hiddenVariables={hiddenVariables}
values={values}
onValueChange={onValueChange}
/>
</div>
<div className="flex items-center justify-end gap-2 border-t-[0.5px] border-divider-subtle px-6 py-4">
<Button onClick={() => onOpenChange(false)}>
{t('operation.cancel', { ns: 'common' })}
</Button>
<Button type="submit" variant="primary">
{t('overview.appInfo.launch', { ns: 'appOverview' })}
</Button>
</div>
</form>
</DialogContent>
</Dialog>
)
}
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 }) => (
<Button
className="mr-1 min-w-[88px]"
size="small"
variant="ghost"
key={key}
onClick={onClick}
disabled={disabled}
>
{operations.map(({ key, label, Icon, disabled, onClick }) => {
const buttonContent = (
<MaybeTooltip
content={t('overview.appInfo.preUseReminder', { ns: 'appOverview' }) ?? ''}
tooltipClassName="mt-[-8px]"
@ -275,8 +347,72 @@ export const AppCardOperations = ({
<div className={`${disabled ? 'text-components-button-ghost-text-disabled' : 'text-text-tertiary'} px-[3px] system-xs-medium`}>{label}</div>
</div>
</MaybeTooltip>
</Button>
))}
)
if (key === 'launch' && launchConfigAction) {
return (
<MaybeTooltip
key={key}
content={t('overview.appInfo.preUseReminder', { ns: 'appOverview' }) ?? ''}
tooltipClassName="mt-[-8px]"
show={disabled}
>
<Button
className="mr-1 border-0 px-0 py-0 shadow-none backdrop-blur-none hover:bg-components-button-secondary-bg"
size="small"
variant="secondary"
onClick={onClick}
disabled={disabled}
>
<div className="flex h-full min-w-[88px] items-center justify-center rounded-l-md px-2 hover:bg-components-button-secondary-bg-hover">
<div className="flex items-center justify-center gap-px">
<Icon className="h-3.5 w-3.5" />
<div className="px-[3px] system-xs-medium">{label}</div>
</div>
</div>
<div
aria-hidden="true"
className="h-4 w-px shrink-0 bg-divider-regular opacity-100"
/>
<div
className="flex h-full w-8 shrink-0 items-center justify-center rounded-r-md hover:bg-components-button-secondary-bg-hover"
onClick={(event) => {
event.stopPropagation()
launchConfigAction.onClick()
}}
aria-label={launchConfigAction.label}
role="button"
tabIndex={disabled ? -1 : 0}
onKeyDown={(event) => {
if (disabled)
return
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault()
event.stopPropagation()
launchConfigAction.onClick()
}
}}
>
<RiSettings2Line className="h-3.5 w-3.5" />
</div>
</Button>
</MaybeTooltip>
)
}
return (
<Button
className="mr-1 min-w-[88px]"
size="small"
variant="ghost"
key={key}
onClick={onClick}
disabled={disabled}
>
{buttonContent}
</Button>
)
})}
</>
)
@ -295,6 +431,7 @@ export const AppCardDialogs = ({
onCloseAccessControl,
onSaveSiteConfig,
onConfirmAccessControl,
hiddenInputs,
}: {
isApp: boolean
appInfo: AppInfo
@ -310,6 +447,7 @@ export const AppCardDialogs = ({
onCloseAccessControl: () => void
onSaveSiteConfig?: (params: ConfigParams) => Promise<void>
onConfirmAccessControl: () => Promise<void>
hiddenInputs?: WorkflowHiddenStartVariable[]
}) => {
if (!isApp)
return null
@ -329,6 +467,7 @@ export const AppCardDialogs = ({
onClose={onCloseEmbedded}
appBaseUrl={appInfo.site?.app_base_url}
accessToken={appInfo.site?.access_token}
hiddenInputs={hiddenInputs}
/>
<CustomizeModal
isShow={showCustomizeModal}

173
web/app/components/app/overview/app-card-utils.ts
View File

@ -1,6 +1,8 @@
import type { InputVar } from '@/app/components/workflow/types'
import type { AppDetailResponse } from '@/models/app'
import type { AppSSO } from '@/types/app'
import { BlockEnum } from '@/app/components/workflow/types'
import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
import { IS_CE_EDITION } from '@/config'
import { AccessMode } from '@/models/access-control'
import { AppModeEnum } from '@/types/app'
import { basePath } from '@/utils/var'
@ -8,6 +10,11 @@ import { basePath } from '@/utils/var'
type OverviewCardType = 'api' | 'webapp'
export type OverviewOperationKey = 'launch' | 'embedded' | 'customize' | 'settings' | 'develop'
export type WorkflowLaunchInputValue = string | boolean
export type WorkflowHiddenStartVariable = Pick<
InputVar,
'default' | 'hide' | 'label' | 'max_length' | 'options' | 'required' | 'type' | 'variable'
>
type AppInfo = AppDetailResponse & Partial<AppSSO>
@ -16,6 +23,7 @@ type WorkflowLike = {
nodes?: Array<{
data?: {
type?: string
variables?: InputVar[]
}
}>
}
@ -42,10 +50,173 @@ const getCardAppMode = (mode: AppModeEnum) => {
return (mode !== AppModeEnum.COMPLETION && mode !== AppModeEnum.WORKFLOW) ? AppModeEnum.CHAT : mode
}
const SUPPORTED_WORKFLOW_LAUNCH_INPUT_TYPES = new Set<InputVarType>([
InputVarType.textInput,
InputVarType.paragraph,
InputVarType.select,
InputVarType.number,
InputVarType.checkbox,
InputVarType.json,
InputVarType.jsonObject,
InputVarType.url,
])
const coerceWorkflowLaunchDefaultValue = (variable: WorkflowHiddenStartVariable): WorkflowLaunchInputValue => {
if (variable.type === InputVarType.checkbox) {
if (typeof variable.default === 'boolean')
return variable.default
return String(variable.default).toLowerCase() === 'true'
}
if (typeof variable.default === 'number')
return String(variable.default)
return String(variable.default ?? '')
}
export const hasWorkflowStartNode = (currentWorkflow: WorkflowLike) => {
return currentWorkflow?.graph?.nodes?.some(node => node.data?.type === BlockEnum.Start) ?? false
}
export const getWorkflowHiddenStartVariables = (currentWorkflow: WorkflowLike): WorkflowHiddenStartVariable[] => {
const startNode = currentWorkflow?.graph?.nodes?.find(node => node.data?.type === BlockEnum.Start)
return (startNode?.data?.variables ?? []).filter(variable => variable.hide === true)
}
export const getAppHiddenLaunchVariables = ({
appInfo,
currentWorkflow,
}: {
appInfo: AppInfo
currentWorkflow: WorkflowLike
}) => {
if ([AppModeEnum.WORKFLOW, AppModeEnum.ADVANCED_CHAT].includes(appInfo.mode))
return getWorkflowHiddenStartVariables(currentWorkflow)
}
export const isWorkflowLaunchInputSupported = (variable: WorkflowHiddenStartVariable) => {
return SUPPORTED_WORKFLOW_LAUNCH_INPUT_TYPES.has(variable.type)
}
export const createWorkflowLaunchInitialValues = (variables: WorkflowHiddenStartVariable[]) => {
return variables.reduce<Record<string, WorkflowLaunchInputValue>>((acc, variable) => {
acc[variable.variable] = coerceWorkflowLaunchDefaultValue(variable)
return acc
}, {})
}
export const buildWorkflowLaunchUrl = async ({
accessibleUrl,
variables,
values,
}: {
accessibleUrl: string
variables: WorkflowHiddenStartVariable[]
values: Record<string, WorkflowLaunchInputValue>
}) => {
const targetUrl = new URL(accessibleUrl, window.location.origin)
variables.forEach((variable) => {
const rawValue = values[variable.variable]
const serializedValue = variable.type === InputVarType.checkbox
? String(Boolean(rawValue))
: String(rawValue ?? '')
targetUrl.searchParams.set(variable.variable, serializedValue)
})
return targetUrl.toString()
}
export const getEmbeddedIframeSnippet = (iframeUrl: string) =>
`<iframe
src="${iframeUrl}"
style="width: 100%; height: 100%; min-height: 700px"
frameborder="0"
allow="microphone">
</iframe>`
const getScriptInputsContent = (values: Record<string, WorkflowLaunchInputValue>) => {
const entries = Object.entries(values)
if (!entries.length) {
return `{
// You can define the inputs from the Start node here
// key is the variable name
// e.g.
// name: "NAME"
}`
}
return `{
${entries.map(([key, value]) => ` ${key}: ${JSON.stringify(value)},`).join('\n')}
}`
}
export const getEmbeddedScriptSnippet = ({
url,
token,
primaryColor,
isTestEnv,
inputValues,
}: {
url: string
token: string
primaryColor: string
isTestEnv?: boolean
inputValues: Record<string, WorkflowLaunchInputValue>
}) =>
`<script>
window.difyChatbotConfig = {
token: '${token}'${isTestEnv
? `,
isDev: true`
: ''}${IS_CE_EDITION
? `,
baseUrl: '${url}${basePath}'`
: ''},
inputs: ${getScriptInputsContent(inputValues)},
systemVariables: {
// user_id: 'YOU CAN DEFINE USER ID HERE',
// conversation_id: 'YOU CAN DEFINE CONVERSATION ID HERE, IT MUST BE A VALID UUID',
},
userVariables: {
// avatar_url: 'YOU CAN DEFINE USER AVATAR URL HERE',
// name: 'YOU CAN DEFINE USER NAME HERE',
},
}
</script>
<script
src="${url}${basePath}/embed.min.js"
id="${token}"
defer>
</script>
<style>
#dify-chatbot-bubble-button {
background-color: ${primaryColor} !important;
}
#dify-chatbot-bubble-window {
width: 24rem !important;
height: 40rem !important;
}
</style>`
export const getChromePluginContent = (iframeUrl: string) => `ChatBot URL: ${iframeUrl}`
export const compressAndEncodeBase64 = async (input: string) => {
const uint8Array = new TextEncoder().encode(input)
if (typeof CompressionStream === 'undefined')
return btoa(String.fromCharCode(...uint8Array))
const compressedStream = new Response(
new Blob([uint8Array])
.stream()
.pipeThrough(new CompressionStream('gzip')),
).arrayBuffer()
const compressedUint8Array = new Uint8Array(await compressedStream)
return btoa(String.fromCharCode(...compressedUint8Array))
}
export const getAppCardDisplayState = ({
appInfo,
cardType,

78
web/app/components/app/overview/app-card.tsx
View File

@ -1,4 +1,5 @@
'use client'
import type { WorkflowLaunchInputValue } from './app-card-utils'
import type { ConfigParams } from './settings'
import type { AppDetailResponse } from '@/models/app'
import type { AppSSO } from '@/types/app'
@ -28,11 +29,16 @@ import {
AppCardOperations,
AppCardUrlSection,
createAppCardOperations,
WorkflowLaunchDialog,
} from './app-card-sections'
import {
buildWorkflowLaunchUrl,
createWorkflowLaunchInitialValues,
getAppCardDisplayState,
getAppCardOperationKeys,
getAppHiddenLaunchVariables,
isAppAccessConfigured,
isWorkflowLaunchInputSupported,
} from './app-card-utils'
export type IAppCardProps = {
@ -63,7 +69,8 @@ function AppCard({
const router = useRouter()
const pathname = usePathname()
const { isCurrentWorkspaceManager, isCurrentWorkspaceEditor } = useAppContext()
const { data: currentWorkflow } = useAppWorkflow(appInfo.mode === AppModeEnum.WORKFLOW ? appInfo.id : '')
const shouldFetchWorkflow = appInfo.mode === AppModeEnum.WORKFLOW || appInfo.mode === AppModeEnum.ADVANCED_CHAT
const { data: currentWorkflow } = useAppWorkflow(shouldFetchWorkflow ? appInfo.id : '')
const docLink = useDocLink()
const appDetail = useAppStore(state => state.appDetail)
const setAppDetail = useAppStore(state => state.setAppDetail)
@ -73,6 +80,8 @@ function AppCard({
const [genLoading, setGenLoading] = useState(false)
const [showConfirmDelete, setShowConfirmDelete] = useState(false)
const [showAccessControl, setShowAccessControl] = useState(false)
const [showWorkflowLaunchDialog, setShowWorkflowLaunchDialog] = useState(false)
const [workflowLaunchValues, setWorkflowLaunchValues] = useState<Record<string, WorkflowLaunchInputValue>>({})
const { t } = useTranslation()
const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
const { data: appAccessSubjects } = useAppWhiteListSubjects(
@ -98,6 +107,25 @@ function AppCard({
() => isAppAccessConfigured(appDetail, appAccessSubjects),
[appAccessSubjects, appDetail],
)
const hiddenLaunchVariables = useMemo(
() => getAppHiddenLaunchVariables({
appInfo,
currentWorkflow,
}) || [],
[appInfo, currentWorkflow],
)
const supportedWorkflowLaunchVariables = useMemo(
() => hiddenLaunchVariables.filter(isWorkflowLaunchInputSupported),
[hiddenLaunchVariables],
)
const unsupportedWorkflowLaunchVariables = useMemo(
() => hiddenLaunchVariables.filter(variable => !isWorkflowLaunchInputSupported(variable)),
[hiddenLaunchVariables],
)
const initialWorkflowLaunchValues = useMemo(
() => createWorkflowLaunchInitialValues(supportedWorkflowLaunchVariables),
[supportedWorkflowLaunchVariables],
)
const onGenCode = async () => {
if (!onGenerateCode)
@ -139,6 +167,31 @@ function AppCard({
window.open(cardState.accessibleUrl, '_blank')
}, [cardState.accessibleUrl])
const handleOpenWorkflowLaunchDialog = useCallback(() => {
setWorkflowLaunchValues(initialWorkflowLaunchValues)
setShowWorkflowLaunchDialog(true)
}, [initialWorkflowLaunchValues])
const handleWorkflowLaunchValueChange = useCallback((variable: string, value: WorkflowLaunchInputValue) => {
setWorkflowLaunchValues(prev => ({
...prev,
[variable]: value,
}))
}, [])
const handleWorkflowLaunchConfirm = useCallback(async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault()
const targetUrl = await buildWorkflowLaunchUrl({
accessibleUrl: cardState.accessibleUrl,
variables: supportedWorkflowLaunchVariables,
values: workflowLaunchValues,
})
window.open(targetUrl, '_blank')
setShowWorkflowLaunchDialog(false)
}, [cardState.accessibleUrl, supportedWorkflowLaunchVariables, workflowLaunchValues])
const handleOpenCustomize = useCallback(() => {
setShowCustomizeModal(true)
}, [])
@ -304,7 +357,17 @@ function AppCard({
{!cardState.isMinimalState && (
<div className="flex items-center gap-1 self-stretch p-3">
{!isApp && <SecretKeyButton appId={appInfo.id} />}
<AppCardOperations t={t} operations={operations} />
<AppCardOperations
t={t}
operations={operations}
launchConfigAction={hiddenLaunchVariables.length > 0
? {
label: t('operation.config', { ns: 'common' }),
disabled: triggerModeDisabled || !cardState.runningStatus,
onClick: handleOpenWorkflowLaunchDialog,
}
: undefined}
/>
</div>
)}
</div>
@ -323,6 +386,17 @@ function AppCard({
onCloseAccessControl={() => setShowAccessControl(false)}
onSaveSiteConfig={onSaveSiteConfig}
onConfirmAccessControl={handleAccessControlUpdate}
hiddenInputs={hiddenLaunchVariables}
/>
<WorkflowLaunchDialog
t={t}
open={showWorkflowLaunchDialog}
hiddenVariables={supportedWorkflowLaunchVariables}
unsupportedVariables={unsupportedWorkflowLaunchVariables}
values={workflowLaunchValues}
onOpenChange={setShowWorkflowLaunchDialog}
onValueChange={handleWorkflowLaunchValueChange}
onSubmit={handleWorkflowLaunchConfirm}
/>
</div>
)

137
web/app/components/app/overview/embedded/__tests__/index.spec.tsx
View File

@ -1,10 +1,11 @@
import type { SiteInfo } from '@/models/share'
import { fireEvent, render, screen } from '@testing-library/react'
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import copy from 'copy-to-clipboard'
import * as React from 'react'
import { act } from 'react'
import { afterAll, afterEach, describe, expect, it, vi } from 'vitest'
import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
import { InputVarType } from '@/app/components/workflow/types'
import Embedded from '../index'
vi.mock('../style.module.css', () => ({
@ -46,6 +47,7 @@ vi.mock('@/context/app-context', () => ({
}))
const mockWindowOpen = vi.spyOn(window, 'open').mockImplementation(() => null)
const mockedCopy = vi.mocked(copy)
const originalCompressionStream = globalThis.CompressionStream
const siteInfo: SiteInfo = {
title: 'test site',
@ -70,6 +72,22 @@ const getCopyButton = () => {
}
describe('Embedded', () => {
beforeAll(() => {
class MockCompressionStream {
readable: ReadableStream<Uint8Array>
writable: WritableStream<Uint8Array>
constructor() {
const transformStream = new TransformStream<Uint8Array, Uint8Array>()
this.readable = transformStream.readable
this.writable = transformStream.writable
}
}
// @ts-expect-error test polyfill
globalThis.CompressionStream = MockCompressionStream
})
afterEach(() => {
vi.clearAllMocks()
mockWindowOpen.mockClear()
@ -77,6 +95,7 @@ describe('Embedded', () => {
afterAll(() => {
mockWindowOpen.mockRestore()
globalThis.CompressionStream = originalCompressionStream
})
it('builds theme and copies iframe snippet', async () => {
@ -84,14 +103,20 @@ describe('Embedded', () => {
render(<Embedded {...baseProps} />)
})
await waitFor(() => {
expect(screen.getByText((content, node) => node?.tagName.toLowerCase() === 'pre' && content.includes('/chatbot/token'))).toBeInTheDocument()
})
const actionButton = getCopyButton()
const innerDiv = actionButton.querySelector('div')
act(() => {
await act(async () => {
fireEvent.click(innerDiv ?? actionButton)
})
expect(mockThemeBuilder.buildTheme).toHaveBeenCalledWith(siteInfo.chat_color_theme, siteInfo.chat_color_theme_inverted)
expect(mockedCopy).toHaveBeenCalledWith(expect.stringContaining('/chatbot/token'))
await waitFor(() => {
expect(mockedCopy).toHaveBeenCalledWith(expect.stringContaining('/chatbot/token'))
})
})
it('opens chrome plugin store link when chrome option selected', async () => {
@ -116,4 +141,106 @@ describe('Embedded', () => {
'noopener,noreferrer',
)
})
it('keeps hidden inputs collapsed by default and updates iframe and script content when values change', async () => {
render(
<Embedded
{...baseProps}
hiddenInputs={[{
variable: 'secret',
label: 'Secret',
type: InputVarType.textInput,
hide: true,
required: true,
default: '',
}]}
/>,
)
expect(screen.queryByLabelText('Secret')).not.toBeInTheDocument()
await act(async () => {
fireEvent.click(screen.getByText('appOverview.overview.appInfo.embedded.hiddenInputs.title').closest('button')!)
})
await waitFor(() => {
expect(screen.getByLabelText('Secret')).toBeInTheDocument()
})
await act(async () => {
fireEvent.change(screen.getByLabelText('Secret'), {
target: { value: 'top-secret' },
})
})
expect(document.querySelector('pre')?.textContent ?? '').toContain('/chatbot/token')
await waitFor(() => {
const codeBlock = document.querySelector('pre')
expect(codeBlock?.textContent ?? '').toContain('/chatbot/token?secret=dG9wLXNlY3JldA%3D%3D')
})
const optionButtons = document.body.querySelectorAll('[class*="option"]')
act(() => {
fireEvent.click(optionButtons[1]!)
})
await waitFor(() => {
const codeBlock = document.querySelector('pre')
expect(codeBlock?.textContent ?? '').toContain('secret: "top-secret"')
})
})
it('copies script content when scripts option is selected', async () => {
await act(async () => {
render(<Embedded {...baseProps} />)
})
const optionButtons = document.body.querySelectorAll('[class*="option"]')
act(() => {
fireEvent.click(optionButtons[1]!)
})
await waitFor(() => {
const codeBlock = document.querySelector('pre')
expect(codeBlock?.textContent ?? '').toContain('token: \'token\'')
})
const actionButton = getCopyButton()
const innerDiv = actionButton.querySelector('div')
await act(async () => {
fireEvent.click(innerDiv ?? actionButton)
})
await waitFor(() => {
expect(mockedCopy).toHaveBeenCalledWith(expect.stringContaining('token: \'token\''))
})
})
it('copies chrome plugin URL (without prefix) when chromePlugin option is selected', async () => {
await act(async () => {
render(<Embedded {...baseProps} />)
})
const optionButtons = document.body.querySelectorAll('[class*="option"]')
act(() => {
fireEvent.click(optionButtons[2]!)
})
await waitFor(() => {
const codeBlock = document.querySelector('pre')
expect(codeBlock?.textContent ?? '').toContain('ChatBot URL:')
})
const actionButton = getCopyButton()
const innerDiv = actionButton.querySelector('div')
await act(async () => {
fireEvent.click(innerDiv ?? actionButton)
})
await waitFor(() => {
expect(mockedCopy).toHaveBeenCalledWith(expect.stringContaining('/chatbot/token'))
expect(mockedCopy).not.toHaveBeenCalledWith(expect.stringContaining('ChatBot URL:'))
})
})
})

411
web/app/components/app/overview/embedded/index.tsx
View File

@ -1,88 +1,46 @@
import type { MutableRefObject } from 'react'
import type { WorkflowHiddenStartVariable, WorkflowLaunchInputValue } from '../app-card-utils'
import type { SiteInfo } from '@/models/share'
import { cn } from '@langgenius/dify-ui/cn'
import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
import {
RiArrowDownSLine,
RiArrowRightSLine,
} from '@remixicon/react'
import copy from 'copy-to-clipboard'
import * as React from 'react'
import { useState } from 'react'
import { Suspense, use, useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import ActionButton from '@/app/components/base/action-button'
import { useThemeContext } from '@/app/components/base/chat/embedded-chatbot/theme/theme-context'
import { IS_CE_EDITION } from '@/config'
import { InputVarType } from '@/app/components/workflow/types'
import { useAppContext } from '@/context/app-context'
import { basePath } from '@/utils/var'
import {
compressAndEncodeBase64,
createWorkflowLaunchInitialValues,
getChromePluginContent,
getEmbeddedIframeSnippet,
getEmbeddedScriptSnippet,
isWorkflowLaunchInputSupported,
} from '../app-card-utils'
import WorkflowHiddenInputFields from '../workflow-hidden-input-fields'
import style from './style.module.css'
type Props = {
siteInfo?: SiteInfo
isShow: boolean
onClose: () => void
accessToken: string
appBaseUrl: string
accessToken?: string
appBaseUrl?: string
hiddenInputs?: WorkflowHiddenStartVariable[]
className?: string
}
const OPTION_MAP = {
iframe: {
getContent: (url: string, token: string) =>
`<iframe
src="${url}${basePath}/chatbot/${token}"
style="width: 100%; height: 100%; min-height: 700px"
frameborder="0"
allow="microphone">
</iframe>`,
},
scripts: {
getContent: (url: string, token: string, primaryColor: string, isTestEnv?: boolean) =>
`<script>
window.difyChatbotConfig = {
token: '${token}'${isTestEnv
? `,
isDev: true`
: ''}${IS_CE_EDITION
? `,
baseUrl: '${url}${basePath}'`
: ''},
inputs: {
// You can define the inputs from the Start node here
// key is the variable name
// e.g.
// name: "NAME"
},
systemVariables: {
// user_id: 'YOU CAN DEFINE USER ID HERE',
// conversation_id: 'YOU CAN DEFINE CONVERSATION ID HERE, IT MUST BE A VALID UUID',
},
userVariables: {
// avatar_url: 'YOU CAN DEFINE USER AVATAR URL HERE',
// name: 'YOU CAN DEFINE USER NAME HERE',
},
}
</script>
<script
src="${url}${basePath}/embed.min.js"
id="${token}"
defer>
</script>
<style>
#dify-chatbot-bubble-button {
background-color: ${primaryColor} !important;
}
#dify-chatbot-bubble-window {
width: 24rem !important;
height: 40rem !important;
}
</style>`,
},
chromePlugin: {
getContent: (url: string, token: string) => `ChatBot URL: ${url}${basePath}/chatbot/${token}`,
},
}
const OPTION_KEYS = ['iframe', 'scripts', 'chromePlugin'] as const
const prefixEmbedded = 'overview.appInfo.embedded'
type Option = keyof typeof OPTION_MAP
const OPTIONS: Option[] = ['iframe', 'scripts', 'chromePlugin']
type Option = typeof OPTION_KEYS[number]
const optionIconClassName: Record<Option, string> = {
iframe: style.iframeIcon!,
@ -90,38 +48,274 @@ const optionIconClassName: Record<Option, string> = {
chromePlugin: style.chromePluginIcon!,
}
const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, className }: Props) => {
const getSerializedHiddenInputValue = (
variable: WorkflowHiddenStartVariable,
values: Record<string, WorkflowLaunchInputValue>,
) => {
const rawValue = values[variable.variable]
if (variable.type === InputVarType.checkbox)
return String(Boolean(rawValue))
return String(rawValue ?? '')
}
const buildEmbeddedIframeUrl = async ({
appBaseUrl,
accessToken,
variables,
values,
}: {
appBaseUrl: string
accessToken: string
variables: WorkflowHiddenStartVariable[]
values: Record<string, WorkflowLaunchInputValue>
}) => {
const iframeUrl = new URL(`${appBaseUrl}${basePath}/chatbot/${accessToken}`, window.location.origin)
await Promise.all(variables.map(async (variable) => {
iframeUrl.searchParams.set(variable.variable, await compressAndEncodeBase64(getSerializedHiddenInputValue(variable, values)))
}))
return iframeUrl.toString()
}
const AsyncEmbeddedOptionContent = ({
option,
iframeUrlPromise,
latestResolvedIframeUrlRef,
}: {
option: Option
iframeUrlPromise: Promise<string>
latestResolvedIframeUrlRef: MutableRefObject<string>
}) => {
const iframeUrl = use(iframeUrlPromise)
latestResolvedIframeUrlRef.current = iframeUrl
if (option === 'chromePlugin')
return getChromePluginContent(iframeUrl)
return getEmbeddedIframeSnippet(iframeUrl)
}
const EmbeddedContent = ({
siteInfo,
appBaseUrl,
accessToken,
hiddenInputs,
}: Required<Pick<Props, 'accessToken' | 'appBaseUrl'>> & Pick<Props, 'siteInfo' | 'hiddenInputs'>) => {
const { t } = useTranslation()
const supportedHiddenInputs = useMemo<WorkflowHiddenStartVariable[]>(
() => (hiddenInputs ?? []).filter(isWorkflowLaunchInputSupported),
[hiddenInputs],
)
const initialHiddenInputValues = useMemo(
() => createWorkflowLaunchInitialValues(supportedHiddenInputs),
[supportedHiddenInputs],
)
const [option, setOption] = useState<Option>('iframe')
const [copiedOption, setCopiedOption] = useState<Option | null>(null)
const [hiddenInputsCollapsed, setHiddenInputsCollapsed] = useState(true)
const [hiddenInputValues, setHiddenInputValues] = useState<Record<string, WorkflowLaunchInputValue>>(
() => initialHiddenInputValues,
)
const [previewIframeUrlPromise, setPreviewIframeUrlPromise] = useState<Promise<string>>(
() => buildEmbeddedIframeUrl({
appBaseUrl,
accessToken,
variables: supportedHiddenInputs,
values: initialHiddenInputValues,
}),
)
const latestResolvedIframeUrlRef = useRef('')
const { langGeniusVersionInfo } = useAppContext()
const themeBuilder = useThemeContext()
themeBuilder.buildTheme(siteInfo?.chat_color_theme ?? null, siteInfo?.chat_color_theme_inverted ?? false)
const isTestEnv = langGeniusVersionInfo.current_env === 'TESTING' || langGeniusVersionInfo.current_env === 'DEVELOPMENT'
const onClickCopy = () => {
const handleHiddenInputValueChange = (variable: string, value: WorkflowLaunchInputValue) => {
const nextHiddenInputValues = {
...hiddenInputValues,
[variable]: value,
}
setCopiedOption(null)
setHiddenInputValues(nextHiddenInputValues)
setPreviewIframeUrlPromise(buildEmbeddedIframeUrl({
appBaseUrl,
accessToken,
variables: supportedHiddenInputs,
values: nextHiddenInputValues,
}))
}
const scriptsContent = useMemo(() => getEmbeddedScriptSnippet({
url: appBaseUrl,
token: accessToken,
primaryColor: themeBuilder.theme?.primaryColor ?? '#1C64F2',
isTestEnv,
inputValues: hiddenInputValues,
}), [accessToken, appBaseUrl, hiddenInputValues, isTestEnv, themeBuilder.theme?.primaryColor])
const onClickCopy = async () => {
const latestIframeUrl = await buildEmbeddedIframeUrl({
appBaseUrl,
accessToken,
variables: supportedHiddenInputs,
values: hiddenInputValues,
})
if (option === 'chromePlugin') {
const splitUrl = OPTION_MAP[option].getContent(appBaseUrl, accessToken).split(': ')
const splitUrl = getChromePluginContent(latestIframeUrl).split(': ')
if (splitUrl.length > 1)
copy(splitUrl[1]!)
}
else if (option === 'iframe') {
copy(getEmbeddedIframeSnippet(latestIframeUrl))
}
else {
copy(OPTION_MAP[option].getContent(appBaseUrl, accessToken, themeBuilder.theme?.primaryColor ?? '#1C64F2', isTestEnv))
copy(scriptsContent)
}
setCopiedOption(option)
}
const previewFallback = latestResolvedIframeUrlRef.current
? (option === 'chromePlugin'
? getChromePluginContent(latestResolvedIframeUrlRef.current)
: getEmbeddedIframeSnippet(latestResolvedIframeUrlRef.current))
: ''
const navigateToChromeUrl = () => {
window.open('https://chrome.google.com/webstore/detail/dify-chatbot/ceehdapohffmjmkdcifjofadiaoeggaf', '_blank', 'noopener,noreferrer')
}
useEffect(() => {
themeBuilder.buildTheme(siteInfo?.chat_color_theme ?? null, siteInfo?.chat_color_theme_inverted ?? false)
}, [siteInfo?.chat_color_theme, siteInfo?.chat_color_theme_inverted, themeBuilder])
return (
<>
<div className="mt-8 mb-4 system-sm-medium text-text-primary">
{t(`${prefixEmbedded}.explanation`, { ns: 'appOverview' })}
</div>
{supportedHiddenInputs.length > 0 && (
<div className="mb-6 rounded-xl border-[0.5px] border-components-panel-border bg-background-section">
<button
type="button"
className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left"
onClick={() => setHiddenInputsCollapsed(prev => !prev)}
>
<div>
<div className="system-sm-medium text-text-primary">
{t(`${prefixEmbedded}.hiddenInputs.title`, { ns: 'appOverview' })}
</div>
<div className="mt-1 system-xs-regular text-text-tertiary">
{t(`${prefixEmbedded}.hiddenInputs.description`, { ns: 'appOverview' })}
</div>
</div>
{hiddenInputsCollapsed
? <RiArrowRightSLine className="h-4 w-4 shrink-0 text-text-tertiary" />
: <RiArrowDownSLine className="h-4 w-4 shrink-0 text-text-tertiary" />}
</button>
{!hiddenInputsCollapsed && (
<div className="max-h-72 space-y-4 overflow-y-auto border-t-[0.5px] border-divider-subtle px-4 py-4">
<WorkflowHiddenInputFields
hiddenVariables={supportedHiddenInputs}
values={hiddenInputValues}
onValueChange={handleHiddenInputValueChange}
fieldIdPrefix="embedded-hidden-input"
/>
</div>
)}
</div>
)}
<div className="flex flex-wrap items-center justify-between gap-y-2">
{OPTION_KEYS.map((v) => {
return (
<button
type="button"
key={v}
aria-label={t(`${prefixEmbedded}.${v}`, { ns: 'appOverview' }) || v}
className={cn(
style.option,
optionIconClassName[v],
option === v && style.active,
)}
onClick={() => {
setOption(v)
setCopiedOption(null)
}}
>
</button>
)
})}
</div>
{option === 'chromePlugin' && (
<div className="mt-6 w-full">
<button
type="button"
className={cn('inline-flex w-full items-center justify-center gap-2 rounded-lg py-3', 'shrink-0 bg-primary-600 text-white hover:bg-primary-600/75 hover:shadow-sm')}
onClick={navigateToChromeUrl}
>
<div className={`relative h-4 w-4 ${style.pluginInstallIcon}`}></div>
<div className="font-['Inter'] text-sm leading-tight font-medium text-white">{t(`${prefixEmbedded}.chromePlugin`, { ns: 'appOverview' })}</div>
</button>
</div>
)}
<div className={cn('inline-flex w-full flex-col items-start justify-start rounded-lg border-[0.5px] border-components-panel-border bg-background-section', 'mt-6')}>
<div className="inline-flex items-center justify-start gap-2 self-stretch rounded-t-lg bg-background-section-burn py-1 pr-1 pl-3">
<div className="shrink-0 grow system-sm-medium text-text-secondary">
{t(`${prefixEmbedded}.${option}`, { ns: 'appOverview' })}
</div>
<Tooltip>
<TooltipTrigger
render={(
<ActionButton
aria-label={(copiedOption === option
? t(`${prefixEmbedded}.copied`, { ns: 'appOverview' })
: t(`${prefixEmbedded}.copy`, { ns: 'appOverview' })) || ''}
onClick={() => void onClickCopy()}
>
{copiedOption === option && <span aria-hidden="true" className="i-ri-clipboard-fill h-4 w-4" />}
{copiedOption !== option && <span aria-hidden="true" className="i-ri-clipboard-line h-4 w-4" />}
</ActionButton>
)}
/>
<TooltipContent>
{(copiedOption === option
? t(`${prefixEmbedded}.copied`, { ns: 'appOverview' })
: t(`${prefixEmbedded}.copy`, { ns: 'appOverview' })) || ''}
</TooltipContent>
</Tooltip>
</div>
<div className="flex max-h-[clamp(180px,calc(100dvh-320px),360px)] w-full items-start justify-start gap-2 overflow-auto p-3">
<div className="shrink grow basis-0 font-mono text-[13px] leading-tight text-text-secondary">
<pre className="select-text">
{option === 'scripts'
? scriptsContent
: (
<Suspense fallback={previewFallback}>
<AsyncEmbeddedOptionContent
option={option}
iframeUrlPromise={previewIframeUrlPromise}
latestResolvedIframeUrlRef={latestResolvedIframeUrlRef}
/>
</Suspense>
)}
</pre>
</div>
</div>
</div>
</>
)
}
const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, hiddenInputs, className }: Props) => {
const { t } = useTranslation()
return (
<Dialog
open={isShow}
onOpenChange={(open) => {
if (open)
return
setCopiedOption(null)
onClose()
}}
>
@ -130,73 +324,16 @@ const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, classNam
{t(`${prefixEmbedded}.title`, { ns: 'appOverview' })}
</DialogTitle>
<DialogCloseButton />
<div className="mt-8 mb-4 system-sm-medium text-text-primary">
{t(`${prefixEmbedded}.explanation`, { ns: 'appOverview' })}
</div>
<div className="flex flex-wrap items-center justify-between gap-y-2">
{OPTIONS.map((v) => {
return (
<button
type="button"
key={v}
aria-label={t(`${prefixEmbedded}.${v}`, { ns: 'appOverview' }) || v}
className={cn(
style.option,
optionIconClassName[v],
option === v && style.active,
)}
onClick={() => {
setOption(v)
setCopiedOption(null)
}}
>
</button>
)
})}
</div>
{option === 'chromePlugin' && (
<div className="mt-6 w-full">
<button
type="button"
className={cn('inline-flex w-full items-center justify-center gap-2 rounded-lg py-3', 'shrink-0 bg-primary-600 text-white hover:bg-primary-600/75 hover:shadow-sm')}
onClick={navigateToChromeUrl}
>
<div className={`relative h-4 w-4 ${style.pluginInstallIcon}`}></div>
<div className="font-['Inter'] text-sm leading-tight font-medium text-white">{t(`${prefixEmbedded}.chromePlugin`, { ns: 'appOverview' })}</div>
</button>
</div>
)}
<div className={cn('inline-flex w-full flex-col items-start justify-start rounded-lg border-[0.5px] border-components-panel-border bg-background-section', 'mt-6')}>
<div className="inline-flex items-center justify-start gap-2 self-stretch rounded-t-lg bg-background-section-burn py-1 pr-1 pl-3">
<div className="shrink-0 grow system-sm-medium text-text-secondary">
{t(`${prefixEmbedded}.${option}`, { ns: 'appOverview' })}
</div>
<Tooltip>
<TooltipTrigger
render={(
<ActionButton
aria-label={(copiedOption === option
? t(`${prefixEmbedded}.copied`, { ns: 'appOverview' })
: t(`${prefixEmbedded}.copy`, { ns: 'appOverview' })) || ''}
onClick={onClickCopy}
>
{copiedOption === option && <span aria-hidden="true" className="i-ri-clipboard-fill h-4 w-4" />}
{copiedOption !== option && <span aria-hidden="true" className="i-ri-clipboard-line h-4 w-4" />}
</ActionButton>
)}
/>
<TooltipContent>
{(copiedOption === option
? t(`${prefixEmbedded}.copied`, { ns: 'appOverview' })
: t(`${prefixEmbedded}.copy`, { ns: 'appOverview' })) || ''}
</TooltipContent>
</Tooltip>
</div>
<div className="flex max-h-[clamp(180px,calc(100dvh-320px),360px)] w-full items-start justify-start gap-2 overflow-auto p-3">
<div className="shrink grow basis-0 font-mono text-[13px] leading-tight text-text-secondary">
<pre className="select-text">{OPTION_MAP[option].getContent(appBaseUrl, accessToken, themeBuilder.theme?.primaryColor ?? '#1C64F2', isTestEnv)}</pre>
</div>
</div>
<div className="max-h-[calc(90vh-88px)] overflow-y-auto">
{isShow && (
<EmbeddedContent
key={`${appBaseUrl ?? ''}:${accessToken ?? ''}:${JSON.stringify(hiddenInputs ?? [])}`}
siteInfo={siteInfo}
appBaseUrl={appBaseUrl ?? ''}
accessToken={accessToken ?? ''}
hiddenInputs={hiddenInputs}
/>
)}
</div>
</DialogContent>
</Dialog>

116
web/app/components/app/overview/workflow-hidden-input-fields.tsx Normal file
View File

@ -0,0 +1,116 @@
import type { ChangeEvent } from 'react'
import type { WorkflowHiddenStartVariable, WorkflowLaunchInputValue } from './app-card-utils'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@langgenius/dify-ui/select'
import Input from '@/app/components/base/input'
import Textarea from '@/app/components/base/textarea'
import { InputVarType } from '@/app/components/workflow/types'
type WorkflowHiddenInputFieldsProps = {
hiddenVariables: WorkflowHiddenStartVariable[]
values: Record<string, WorkflowLaunchInputValue>
onValueChange: (variable: string, value: WorkflowLaunchInputValue) => void
fieldIdPrefix?: string
}
const WorkflowHiddenInputFields = ({
hiddenVariables,
values,
onValueChange,
fieldIdPrefix = 'workflow-launch-hidden-input',
}: WorkflowHiddenInputFieldsProps) => {
const renderField = (variable: WorkflowHiddenStartVariable) => {
const fieldId = `${fieldIdPrefix}-${variable.variable}`
const fieldValue = values[variable.variable]
const label = typeof variable.label === 'string' ? variable.label : variable.variable
if (variable.type === InputVarType.select) {
return (
<Select
value={typeof fieldValue === 'string' ? fieldValue : ''}
onValueChange={value => onValueChange(variable.variable, value ?? '')}
>
<SelectTrigger className="w-full" aria-label={label}>
<SelectValue placeholder={label} />
</SelectTrigger>
<SelectContent>
{(variable.options ?? []).map(option => (
<SelectItem key={option} value={option}>
{option}
</SelectItem>
))}
</SelectContent>
</Select>
)
}
if (variable.type === InputVarType.checkbox) {
return (
<label className="flex min-h-10 w-full cursor-pointer items-center gap-3 rounded-lg bg-components-input-bg-normal px-3 py-2">
<input
id={fieldId}
type="checkbox"
checked={Boolean(fieldValue)}
onChange={(event: ChangeEvent<HTMLInputElement>) => onValueChange(variable.variable, event.target.checked)}
className="h-4 w-4 rounded border-divider-subtle"
/>
<span className="system-sm-regular text-text-secondary">{label}</span>
</label>
)
}
if (
variable.type === InputVarType.paragraph
|| variable.type === InputVarType.json
|| variable.type === InputVarType.jsonObject
) {
return (
<Textarea
id={fieldId}
value={typeof fieldValue === 'string' ? fieldValue : ''}
onChange={(event: ChangeEvent<HTMLTextAreaElement>) => onValueChange(variable.variable, event.target.value)}
placeholder={label}
maxLength={variable.max_length}
className="min-h-24"
/>
)
}
return (
<Input
id={fieldId}
type={variable.type === InputVarType.number ? 'number' : 'text'}
value={typeof fieldValue === 'string' ? fieldValue : ''}
onChange={(event: ChangeEvent<HTMLInputElement>) => onValueChange(variable.variable, event.target.value)}
placeholder={label}
maxLength={variable.max_length}
/>
)
}
return (
<>
{hiddenVariables.map(variable => (
<div key={variable.variable} className="space-y-1.5">
{variable.type !== InputVarType.checkbox && (
<label
htmlFor={`${fieldIdPrefix}-${variable.variable}`}
className="block system-sm-medium text-text-secondary"
>
{typeof variable.label === 'string' ? variable.label : variable.variable}
</label>
)}
{renderField(variable)}
</div>
))}
</>
)
}
export default WorkflowHiddenInputFields

51
web/app/components/base/chat/__tests__/utils.spec.ts
View File

@ -321,47 +321,86 @@ describe('chat utils - url params and answer helpers', () => {
expect(res).toEqual({ custom: '123', encoded: 'a b' })
})
it('getRawInputsFromUrlParams keeps encoded launch params as decoded plain values', async () => {
setSearch(`?custom=${encodeURIComponent('YWJjZA==')}`)
const res = await getRawInputsFromUrlParams()
expect(res).toEqual({ custom: 'YWJjZA==' })
})
it('getRawUserVariablesFromUrlParams extracts only user. prefixed params', async () => {
setSearch('?custom=123&sys.param=456&user.param=789&user.encoded=a%20b')
const res = await getRawUserVariablesFromUrlParams()
expect(res).toEqual({ param: '789', encoded: 'a b' })
})
it('getRawUserVariablesFromUrlParams keeps encoded user values as decoded plain values', async () => {
setSearch(`?user.param=${encodeURIComponent('YWJjZA==')}`)
const res = await getRawUserVariablesFromUrlParams()
expect(res).toEqual({ param: 'YWJjZA==' })
})
it('getProcessedInputsFromUrlParams decompresses base64 inputs', async () => {
setSearch('?custom=123&sys.param=456&user.param=789')
setSearch(`?custom=${encodeURIComponent('YWJjZA==')}&sys.param=456&user.param=789`)
const res = await getProcessedInputsFromUrlParams()
expect(res).toEqual({ custom: 'decompressed_text' })
})
it('getProcessedInputsFromUrlParams returns undefined for plain decoded values', async () => {
vi.stubGlobal('atob', () => {
throw new Error('invalid')
})
setSearch('?custom=a%20b')
const res = await getProcessedInputsFromUrlParams()
expect(res).toEqual({ custom: undefined })
})
it('getProcessedSystemVariablesFromUrlParams decompresses sys. prefixed params', async () => {
setSearch('?custom=123&sys.param=456&user.param=789')
setSearch(`?custom=123&sys.param=${encodeURIComponent('YWJjZA==')}&user.param=789`)
const res = await getProcessedSystemVariablesFromUrlParams()
expect(res).toEqual({ param: 'decompressed_text' })
})
it('getProcessedSystemVariablesFromUrlParams returns undefined for plain decoded values', async () => {
vi.stubGlobal('atob', () => {
throw new Error('invalid')
})
setSearch('?sys.param=a%20b')
const res = await getProcessedSystemVariablesFromUrlParams()
expect(res).toEqual({ param: undefined })
})
it('getProcessedSystemVariablesFromUrlParams parses redirect_url without query string', async () => {
setSearch(`?redirect_url=${encodeURIComponent('http://example.com')}&sys.param=456`)
setSearch(`?redirect_url=${encodeURIComponent('http://example.com')}&sys.param=${encodeURIComponent('YWJjZA==')}`)
const res = await getProcessedSystemVariablesFromUrlParams()
expect(res).toEqual({ param: 'decompressed_text' })
})
it('getProcessedSystemVariablesFromUrlParams parses redirect_url', async () => {
setSearch(`?redirect_url=${encodeURIComponent('http://example.com?sys.redirected=abc')}&sys.param=456`)
setSearch(`?redirect_url=${encodeURIComponent(`http://example.com?sys.redirected=${encodeURIComponent('YWJjZA==')}`)}&sys.param=${encodeURIComponent('YWJjZA==')}`)
const res = await getProcessedSystemVariablesFromUrlParams()
expect(res).toEqual({ param: 'decompressed_text', redirected: 'decompressed_text' })
})
it('getProcessedUserVariablesFromUrlParams decompresses user. prefixed params', async () => {
setSearch('?custom=123&sys.param=456&user.param=789')
setSearch(`?custom=123&sys.param=456&user.param=${encodeURIComponent('YWJjZA==')}`)
const res = await getProcessedUserVariablesFromUrlParams()
expect(res).toEqual({ param: 'decompressed_text' })
})
it('getProcessedUserVariablesFromUrlParams returns undefined for plain decoded values', async () => {
vi.stubGlobal('atob', () => {
throw new Error('invalid')
})
setSearch('?user.param=a%20b')
const res = await getProcessedUserVariablesFromUrlParams()
expect(res).toEqual({ param: undefined })
})
it('decodeBase64AndDecompress failure returns undefined softly', async () => {
vi.stubGlobal('atob', () => {
throw new Error('invalid')
})
setSearch('?custom=invalid_base64')
setSearch(`?custom=${encodeURIComponent('YWJjZA==')}`)
const res = await getProcessedInputsFromUrlParams()
expect(res).toEqual({ custom: undefined })
})

20
web/app/components/base/chat/utils.ts
View File

@ -19,11 +19,13 @@ async function getRawInputsFromUrlParams(): Promise<Record<string, any>> {
const urlParams = new URLSearchParams(window.location.search)
const inputs: Record<string, any> = {}
const entriesArray = Array.from(urlParams.entries())
entriesArray.forEach(([key, value]) => {
await Promise.all(entriesArray.map(async ([key, value]) => {
const prefixArray = ['sys.', 'user.']
if (!prefixArray.some(prefix => key.startsWith(prefix)))
inputs[key] = decodeURIComponent(value)
})
if (prefixArray.some(prefix => key.startsWith(prefix)))
return
inputs[key] = decodeURIComponent(value)
}))
return inputs
}
@ -81,10 +83,12 @@ async function getRawUserVariablesFromUrlParams(): Promise<Record<string, any>>
const urlParams = new URLSearchParams(window.location.search)
const userVariables: Record<string, any> = {}
const entriesArray = Array.from(urlParams.entries())
entriesArray.forEach(([key, value]) => {
if (key.startsWith('user.'))
userVariables[key.slice(5)] = decodeURIComponent(value)
})
await Promise.all(entriesArray.map(async ([key, value]) => {
if (!key.startsWith('user.'))
return
userVariables[key.slice(5)] = decodeURIComponent(value)
}))
return userVariables
}

244
web/app/components/share/text-generation/hooks/__tests__/use-text-generation-app-state.spec.ts
View File

@ -11,6 +11,7 @@ const renderHook = <Result, Props = void>(callback: (props: Props) => Result) =>
const {
changeLanguageMock,
fetchSavedMessageMock,
getRawInputsFromUrlParamsMock,
notifyMock,
removeMessageMock,
saveMessageMock,
@ -19,6 +20,7 @@ const {
} = vi.hoisted(() => ({
changeLanguageMock: vi.fn(() => Promise.resolve()),
fetchSavedMessageMock: vi.fn(),
getRawInputsFromUrlParamsMock: vi.fn(),
notifyMock: vi.fn(),
removeMessageMock: vi.fn(),
saveMessageMock: vi.fn(),
@ -50,6 +52,10 @@ vi.mock('@/i18n-config/client', () => ({
changeLanguage: changeLanguageMock,
}))
vi.mock('@/app/components/base/chat/utils', () => ({
getRawInputsFromUrlParams: getRawInputsFromUrlParamsMock,
}))
vi.mock('@/service/share', async () => {
const actual = await vi.importActual<typeof import('@/service/share')>('@/service/share')
return {
@ -102,7 +108,7 @@ const defaultAppParams = {
hide: false,
},
},
],
] as Record<string, Record<string, unknown>>[],
more_like_this: {
enabled: true,
},
@ -175,6 +181,7 @@ describe('useTextGenerationAppState', () => {
})
removeMessageMock.mockResolvedValue(undefined)
saveMessageMock.mockResolvedValue(undefined)
getRawInputsFromUrlParamsMock.mockResolvedValue({})
})
it('should initialize app state and fetch saved messages for non-workflow web apps', async () => {
@ -295,4 +302,239 @@ describe('useTextGenerationAppState', () => {
enable: false,
}))
})
it('should apply workflow launch inputs from the url to hidden prompt variables', async () => {
mockWebAppState.appParams = {
...defaultAppParams,
user_input_form: [
{
'text-input': {
label: 'Visible',
variable: 'visible',
required: true,
max_length: 48,
default: 'Shown',
hide: false,
},
},
{
'text-input': {
label: 'Hidden Secret',
variable: 'secret',
required: true,
max_length: 48,
default: '',
hide: true,
},
},
],
}
getRawInputsFromUrlParamsMock.mockResolvedValue({
secret: 'prefilled-secret',
})
const { result } = renderHook(() => useTextGenerationAppState({
isInstalledApp: false,
isWorkflow: true,
}))
await waitFor(() => {
expect(result.current.promptConfig?.prompt_variables).toEqual(expect.arrayContaining([
expect.objectContaining({
key: 'visible',
default: 'Shown',
}),
expect.objectContaining({
key: 'secret',
hide: true,
default: 'prefilled-secret',
}),
]))
})
expect(getRawInputsFromUrlParamsMock).toHaveBeenCalled()
expect(fetchSavedMessageMock).not.toHaveBeenCalled()
})
it('should coerce checkbox url defaults from string and boolean values', async () => {
mockWebAppState.appParams = {
...defaultAppParams,
user_input_form: [
{
checkbox: {
label: 'Bool True',
variable: 'bool_true',
required: false,
default: false,
hide: true,
},
},
{
checkbox: {
label: 'String True',
variable: 'str_true',
required: false,
default: false,
hide: true,
},
},
{
checkbox: {
label: 'String False',
variable: 'str_false',
required: false,
default: true,
hide: true,
},
},
{
checkbox: {
label: 'Invalid',
variable: 'invalid_cb',
required: false,
default: false,
hide: true,
},
},
],
}
getRawInputsFromUrlParamsMock.mockResolvedValue({
bool_true: true,
str_true: 'true',
str_false: 'false',
invalid_cb: 'invalid',
})
const { result } = renderHook(() => useTextGenerationAppState({
isInstalledApp: false,
isWorkflow: true,
}))
await waitFor(() => {
expect(result.current.promptConfig?.prompt_variables).toEqual(expect.arrayContaining([
expect.objectContaining({ key: 'bool_true', default: true }),
expect.objectContaining({ key: 'str_true', default: true }),
expect.objectContaining({ key: 'str_false', default: false }),
expect.objectContaining({ key: 'invalid_cb', default: false }),
]))
})
})
it('should coerce number url defaults and ignore NaN values', async () => {
mockWebAppState.appParams = {
...defaultAppParams,
user_input_form: [
{
number: {
label: 'Valid Number',
variable: 'num_valid',
required: false,
default: 0,
hide: true,
},
},
{
number: {
label: 'NaN Number',
variable: 'num_nan',
required: false,
default: 0,
hide: true,
},
},
],
}
getRawInputsFromUrlParamsMock.mockResolvedValue({
num_valid: '42',
num_nan: 'not-a-number',
})
const { result } = renderHook(() => useTextGenerationAppState({
isInstalledApp: false,
isWorkflow: true,
}))
await waitFor(() => {
expect(result.current.promptConfig?.prompt_variables).toEqual(expect.arrayContaining([
expect.objectContaining({ key: 'num_valid', default: 42 }),
expect.objectContaining({ key: 'num_nan', default: 0 }),
]))
})
})
it('should coerce select url defaults and ignore invalid options', async () => {
mockWebAppState.appParams = {
...defaultAppParams,
user_input_form: [
{
select: {
label: 'Valid Option',
variable: 'sel_valid',
required: false,
default: '',
options: ['alpha', 'beta'],
hide: true,
},
},
{
select: {
label: 'Invalid Option',
variable: 'sel_invalid',
required: false,
default: 'alpha',
options: ['alpha', 'beta'],
hide: true,
},
},
],
}
getRawInputsFromUrlParamsMock.mockResolvedValue({
sel_valid: 'beta',
sel_invalid: 'gamma',
})
const { result } = renderHook(() => useTextGenerationAppState({
isInstalledApp: false,
isWorkflow: true,
}))
await waitFor(() => {
expect(result.current.promptConfig?.prompt_variables).toEqual(expect.arrayContaining([
expect.objectContaining({ key: 'sel_valid', default: 'beta' }),
expect.objectContaining({ key: 'sel_invalid', default: 'alpha' }),
]))
})
})
it('should ignore non-string url values for text inputs', async () => {
mockWebAppState.appParams = {
...defaultAppParams,
user_input_form: [
{
'text-input': {
label: 'Text Field',
variable: 'text_field',
required: false,
max_length: 48,
default: 'original',
hide: true,
},
},
],
}
getRawInputsFromUrlParamsMock.mockResolvedValue({
text_field: 12345,
})
const { result } = renderHook(() => useTextGenerationAppState({
isInstalledApp: false,
isWorkflow: true,
}))
await waitFor(() => {
expect(result.current.promptConfig?.prompt_variables).toEqual(expect.arrayContaining([
expect.objectContaining({ key: 'text_field', default: 'original' }),
]))
})
})
})

52
web/app/components/share/text-generation/hooks/use-text-generation-app-state.ts
View File

@ -6,6 +6,7 @@ import { toast } from '@langgenius/dify-ui/toast'
import { useSuspenseQuery } from '@tanstack/react-query'
import { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { getRawInputsFromUrlParams } from '@/app/components/base/chat/utils'
import { useWebAppStore } from '@/context/web-app-context'
import { useAppFavicon } from '@/hooks/use-app-favicon'
import useDocumentTitle from '@/hooks/use-document-title'
@ -31,6 +32,44 @@ type ShareAppParams = {
image_file_size_limit?: number
}
}
const coerceWorkflowUrlDefault = (
promptVariable: NonNullable<PromptConfig['prompt_variables']>[number],
rawValue: unknown,
) => {
if (rawValue === undefined || rawValue === null)
return undefined
if (promptVariable.type === 'checkbox') {
if (typeof rawValue === 'boolean')
return rawValue
const normalized = String(rawValue).toLowerCase()
if (normalized === 'true')
return true
if (normalized === 'false')
return false
return undefined
}
if (promptVariable.type === 'number') {
const numericValue = Number(rawValue)
return Number.isNaN(numericValue) ? undefined : numericValue
}
if (typeof rawValue !== 'string')
return undefined
if (promptVariable.type === 'select')
return promptVariable.options?.includes(rawValue) ? rawValue : undefined
if (promptVariable.max_length)
return rawValue.slice(0, promptVariable.max_length)
return rawValue
}
export const useTextGenerationAppState = ({ isInstalledApp, isWorkflow }: UseTextGenerationAppStateOptions) => {
const { t } = useTranslation()
const appSourceType = isInstalledApp ? AppSourceType.installedApp : AppSourceType.webApp
@ -84,6 +123,15 @@ export const useTextGenerationAppState = ({ isInstalledApp, isWorkflow }: UseTex
setCustomConfig((custom_config || null) as TextGenerationCustomConfig | null)
await changeLanguage(site.default_language)
const { user_input_form, more_like_this, file_upload, text_to_speech } = appParams as unknown as ShareAppParams
const promptVariables = userInputsFormToPromptVariables(user_input_form)
if (isWorkflow && !isInstalledApp) {
const workflowUrlInputs = await getRawInputsFromUrlParams()
promptVariables.forEach((promptVariable) => {
const workflowDefault = coerceWorkflowUrlDefault(promptVariable, workflowUrlInputs[promptVariable.key])
if (workflowDefault !== undefined)
promptVariable.default = workflowDefault
})
}
if (cancelled)
return
setVisionConfig({
@ -94,7 +142,7 @@ export const useTextGenerationAppState = ({ isInstalledApp, isWorkflow }: UseTex
} as VisionSettings)
setPromptConfig({
prompt_template: '',
prompt_variables: userInputsFormToPromptVariables(user_input_form),
prompt_variables: promptVariables,
} as PromptConfig)
setMoreLikeThisConfig(more_like_this)
setTextToSpeechConfig(text_to_speech)
@ -105,7 +153,7 @@ export const useTextGenerationAppState = ({ isInstalledApp, isWorkflow }: UseTex
return () => {
cancelled = true
}
}, [appData, appParams, fetchSavedMessages, isWorkflow])
}, [appData, appParams, fetchSavedMessages, isInstalledApp, isWorkflow])
useDocumentTitle(siteInfo?.title || t('generation.title', { ns: 'share' }))
useAppFavicon({
enable: !isInstalledApp,

2
web/app/components/workflow/types.ts
View File

@ -214,7 +214,7 @@ export type InputVar = {
}
variable: string
max_length?: number
default?: string | number
default?: string | number | boolean
required: boolean
hint?: string
options?: string[]

2
web/i18n/en-US/app-debug.json
View File

@ -337,6 +337,8 @@
"variableConfig.file.image.name": "Image",
"variableConfig.file.supportFileTypes": "Support File Types",
"variableConfig.file.video.name": "Video",
"variableConfig.hidden": "Hidden & Pre-Filled",
"variableConfig.hiddenDescription": "Hide this field from end users and supply its value yourself. Mutually exclusive with Required. <docLink>Learn more</docLink>",
"variableConfig.hide": "Hide",
"variableConfig.inputPlaceholder": "Please input",
"variableConfig.json": "JSON Code",

4
web/i18n/en-US/app-overview.json
View File

@ -56,6 +56,8 @@
"overview.appInfo.embedded.copy": "Copy",
"overview.appInfo.embedded.entry": "Embedded",
"overview.appInfo.embedded.explanation": "Choose the way to embed chat app to your website",
"overview.appInfo.embedded.hiddenInputs.description": "Enter values for the hidden fields. The values are added to the iframe URL or the script's inputs object.",
"overview.appInfo.embedded.hiddenInputs.title": "Pre-Fill Hidden Fields",
"overview.appInfo.embedded.iframe": "To add the chat app any where on your website, add this iframe to your html code.",
"overview.appInfo.embedded.scripts": "To add a chat app to the bottom right of your website add this code to your html.",
"overview.appInfo.embedded.title": "Embed on website",
@ -104,6 +106,8 @@
"overview.appInfo.settings.workflow.subTitle": "Workflow Details",
"overview.appInfo.settings.workflow.title": "Workflow",
"overview.appInfo.title": "Web App",
"overview.appInfo.workflowLaunchHiddenInputs.description": "Enter values for the hidden fields, then click <bold>Launch</bold> to open the WebApp with the values.",
"overview.appInfo.workflowLaunchHiddenInputs.title": "Pre-Fill Hidden Fields",
"overview.disableTooltip.triggerMode": "The {{feature}} feature is not supported in Trigger Node mode.",
"overview.status.disable": "Disabled",
"overview.status.running": "In Service",

2
web/i18n/ja-JP/app-debug.json
View File

@ -337,6 +337,8 @@
"variableConfig.file.image.name": "画像",
"variableConfig.file.supportFileTypes": "サポートされたファイルタイプ",
"variableConfig.file.video.name": "映像",
"variableConfig.hidden": "非表示・事前入力",
"variableConfig.hiddenDescription": "エンドユーザーには非表示にし、値はご自身で入力します。必須 とは併用できません。<docLink>詳細はこちら</docLink>",
"variableConfig.hide": "非表示",
"variableConfig.inputPlaceholder": "入力してください",
"variableConfig.json": "JSONコード",

4
web/i18n/ja-JP/app-overview.json
View File

@ -56,6 +56,8 @@
"overview.appInfo.embedded.copy": "コピー",
"overview.appInfo.embedded.entry": "埋め込み",
"overview.appInfo.embedded.explanation": "チャットアプリをウェブサイトに埋め込む方法を選択します。",
"overview.appInfo.embedded.hiddenInputs.description": "非表示フィールドに値を入力します。これらの値は iframe の URL または埋め込みスクリプトの inputs オブジェクトに追加されます。",
"overview.appInfo.embedded.hiddenInputs.title": "非表示フィールドを事前入力",
"overview.appInfo.embedded.iframe": "ウェブサイトの任意の場所にチャットアプリを追加するには、この iframe を HTML コードに追加してください。",
"overview.appInfo.embedded.scripts": "ウェブサイトの右下にチャットアプリを追加するには、このコードを HTML に追加してください。",
"overview.appInfo.embedded.title": "ウェブサイトに埋め込む",
@ -104,6 +106,8 @@
"overview.appInfo.settings.workflow.subTitle": "ワークフローの詳細",
"overview.appInfo.settings.workflow.title": "ワークフローステップ",
"overview.appInfo.title": "Web App",
"overview.appInfo.workflowLaunchHiddenInputs.description": "非表示フィールドに値を入力後、<bold>起動</bold>をクリックすると、事前入力された値が適用された WebApp が開きます。",
"overview.appInfo.workflowLaunchHiddenInputs.title": "非表示フィールドを事前入力",
"overview.disableTooltip.triggerMode": "トリガーノードモードでは{{feature}}機能を使用できません。",
"overview.status.disable": "無効",
"overview.status.running": "稼働中",

2
web/i18n/zh-Hans/app-debug.json
View File

@ -337,6 +337,8 @@
"variableConfig.file.image.name": "图片",
"variableConfig.file.supportFileTypes": "支持的文件类型",
"variableConfig.file.video.name": "视频",
"variableConfig.hidden": "隐藏并预填",
"variableConfig.hiddenDescription": "对终端用户隐藏此字段，并由你预填字段值。与 必填 互斥。<docLink>了解更多</docLink>",
"variableConfig.hide": "隐藏",
"variableConfig.inputPlaceholder": "请输入",
"variableConfig.json": "JSON",

4
web/i18n/zh-Hans/app-overview.json
View File

@ -56,6 +56,8 @@
"overview.appInfo.embedded.copy": "复制",
"overview.appInfo.embedded.entry": "嵌入",
"overview.appInfo.embedded.explanation": "选择一种方式将聊天应用嵌入到你的网站中",
"overview.appInfo.embedded.hiddenInputs.description": "为隐藏字段输入值。这些值将被添加到 iframe URL 或嵌入脚本的 inputs 对象中。",
"overview.appInfo.embedded.hiddenInputs.title": "预填隐藏字段",
"overview.appInfo.embedded.iframe": "将以下 iframe 嵌入到你的网站中的目标位置",
"overview.appInfo.embedded.scripts": "将以下代码嵌入到你的网站中",
"overview.appInfo.embedded.title": "嵌入到网站中",
@ -104,6 +106,8 @@
"overview.appInfo.settings.workflow.subTitle": "工作流详情",
"overview.appInfo.settings.workflow.title": "工作流",
"overview.appInfo.title": "Web App",
"overview.appInfo.workflowLaunchHiddenInputs.description": "为隐藏字段输入值后，点击 <bold>启动</bold> 即可打开已应用这些值的 WebApp。",
"overview.appInfo.workflowLaunchHiddenInputs.title": "预填隐藏字段",
"overview.disableTooltip.triggerMode": "触发节点模式下不支持{{feature}}功能。",
"overview.status.disable": "已停用",
"overview.status.running": "运行中",

2
web/models/debug.ts
View File

@ -52,7 +52,7 @@ export type PromptVariable = {
key: string
name: string
type: string // "string" | "number" | "select",
default?: string | number
default?: string | number | boolean
required?: boolean
options?: string[]
max_length?: number