fix(dify-ui): support data-tone styling for Answer node buttons

[snowmint]

Important

1. Make sure you have read our contribution guidelines
2. Ensure there is an associated issue and you have been assigned to it
3. Use the correct syntax to link this PR: Fixes #<issue number>.

Summary

Fixes #38895

This PR adds support for the data-tone attribute on buttons rendered from Answer node Markdown/HTML content.

Previously, the following button was rendered using the default primary styling instead of the destructive styling:

<button
  data-message="stop"
  data-variant="primary"
  data-tone="destructive"
>
  ❌ Stop this task
</button>

The underlying Dify UI Button component already supports destructive styling through:

<Button
  variant="primary"
  tone="destructive"
>
  ❌ Stop this task
</Button>

However, the Answer node Markdown rendering pipeline did not preserve or forward data-tone to the tone prop.

The issue occurred in two places:

1. dataTone was not included in the Streamdown sanitizer allowlist, so data-tone could be removed during HTML sanitization.
2. MarkdownButton read dataVariant and dataSize, but did not read dataTone or pass it to the Dify UI Button component.

This PR:

• Adds dataTone to the allowed attributes for Markdown <button> elements.
• Reads and validates node.properties.dataTone in MarkdownButton.
• Passes the validated value to the Dify UI Button through the tone prop.
• Adds equivalent tone support for buttons rendered inside Markdown forms.
• Supports the existing valid tone values:
  • default
  • destructive
• Adds test coverage for destructive and unsupported tone values.
• Keeps the existing styling unchanged when data-tone is omitted.
• Introduces no new dependencies.

data-variant="warning" behavior

During investigation, data-variant="warning" was also tested as a possible way to render a destructive or warning-style button.

This approach is outdated and is not supported by the current Dify UI Button component.

The currently supported variants are:

• primary
• secondary
• secondary-accent
• tertiary
• ghost
• ghost-accent

Destructive styling is implemented by combining a supported variant with the destructive tone:

<Button
  variant="primary"
  tone="destructive"
/>

Therefore, this PR does not add or restore a warning variant. The supported Answer node syntax is:

<button
  data-message="stop"
  data-variant="primary"
  data-tone="destructive"
>
  ❌ Stop this task
</button>

Documentation

The current supported-tags documentation still lists behavior that no longer fully matches the current implementation:

https://docs.dify.ai/en/cloud/use-dify/nodes/template#supported-tags

A related documentation update may be required to clarify:

• The supported data-variant values.
• That data-variant="warning" is unsupported.
• The supported data-tone values.
• How to define destructive Answer node buttons.

Screenshots

Before	After
data-tone="destructive" was ignored, and the button was rendered using the normal primary style. Before: data-tone ignored	The existing destructive tone is applied when data-variant="primary" and data-tone="destructive" are provided. After: destructive tone applied

Additional verification

The UI test page verifies the supported Button tone combinations:

• Primary/default
• Primary/destructive
• Secondary/destructive
• Tertiary/destructive

Test plan

Automated tests

cd web

pnpm exec vitest run \
  app/components/base/markdown-blocks/__tests__/button.spec.tsx

pnpm exec vitest run \
  app/components/base/markdown-blocks/__tests__/form.spec.tsx

Frontend validation

cd web
pnpm exec vp staged

Manual verification

1. Add the following content to an Answer node:

   <button
     data-message="stop"
     data-variant="primary"
     data-tone="destructive"
   >
     ❌ Stop this task
   </button>

2. Run the app in Preview.

3. Verify that:

   • The button is rendered using the destructive primary style.
   • Clicking the button sends stop.
   • Buttons without data-tone retain their existing appearance.
   • Unsupported tone values do not break rendering.
   • data-variant="warning" is not required and does not act as a supported variant.

Checklist

• This change requires a documentation update, included: Dify Document
• I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
• I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
• I've updated the documentation accordingly.
• I ran make lint && make type-check (backend) and cd web && pnpm exec vp staged (frontend) to appease the lint goods.
• On Windows, running pnpm exec vp staged resulted in an error. I manually verified that the changes follow the existing code style and ran the relevant spec tests to validate the logic.