langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 20:15:31 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

fix: frontend for <think> tags conflicting with original <details> tags #8422

New Issue
Closed
opened 2026-02-21 18:25:38 -05:00 by yindo · 1 comment
yindo commented 2026-02-21 18:25:38 -05:00
Owner
Copy Link
Copy Source

Originally created by @junjiem on GitHub (Feb 19, 2025).

Originally assigned to: @junjiem on GitHub.

Self Checks

  • This is only for bug report, if you would like to ask a question, please head to Discussions.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
  • [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
  • Please do not modify this template :) and fill in all the required fields.

Dify version

1.0

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

Image

Image

The original <details> tags is rendered as a reasoning mode output thinking display.

✔️ Expected Behavior

Distinguish between the rendering of the tags and the original <details> tags.

❌ Actual Behavior

No response

Originally created by @junjiem on GitHub (Feb 19, 2025). Originally assigned to: @junjiem on GitHub. ### Self Checks - [x] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [x] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [x] I confirm that I am using English to submit this report (我已阅读并同意 [Language Policy](https://github.com/langgenius/dify/issues/1542)). - [x] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:） - [x] Please do not modify this template :) and fill in all the required fields. ### Dify version 1.0 ### Cloud or Self Hosted Self Hosted (Docker) ### Steps to reproduce ![Image](https://github.com/user-attachments/assets/fb8f63e2-c628-4a02-bf3c-c451ac7aa45e) ![Image](https://github.com/user-attachments/assets/2c23251f-2244-49ce-a685-499d6a16caed) The original \<details\> tags is rendered as a reasoning mode output thinking display. ### ✔️ Expected Behavior Distinguish between the rendering of the <think> tags and the original \<details\> tags. ### ❌ Actual Behavior _No response_
yindo added the 🐞 bug label 2026-02-21 18:25:38 -05:00
yindo closed this issue 2026-02-21 18:25:38 -05:00
yindo commented 2026-02-21 18:25:38 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Feb 19, 2025):

Hey @junjiem, I'm here to help you with bug fixes, questions, and becoming a contributor. Let's squash those bugs together! 🤖

To address the conflict between <think> tags and original <details> tags in the frontend rendering for a self-hosted Dify version 1.0 setup, you can modify the preprocessThinkTag function to handle the conversion more accurately. The current implementation replaces both <think> and <details> tags with <details>, which can cause conflicts if both tags are used in the content.

Here's a possible solution:

  1. Modify the preprocessThinkTag function to differentiate between <think> and <details> tags:
const preprocessThinkTag = (content: string) => {
  if (!(content.trim().startsWith('<think>\n') || content.trim().startsWith('<details style=')))
    return content

  return flow([
    (str: string) => str.replaceAll('<think>\n', '<details class="think">\n'),
    (str: string) => str.replaceAll('\n</think>', '\n[ENDTHINKFLAG]</details>'),
    (str: string) => str.replaceAll('\n</details>', '\n[ENDTHINKFLAG]</details>'),
  ])(content)
}
  1. Update the Markdown component to handle the new class for <details> tags that originated from <think> tags:
components={{
  code: CodeBlock,
  img: Img,
  video: VideoBlock,
  audio: AudioBlock,
  a: Link,
  p: Paragraph,
  button: MarkdownButton,
  form: MarkdownForm,
  script: ScriptBlock,
  details: ({ node, ...props }) => {
    if (node.properties?.className?.includes('think')) {
      return <ThinkBlock {...props} />
    }
    return <details {...props} />
  },
}}

This approach ensures that <think> tags are converted to <details> with a specific class, allowing you to handle them separately from original <details> tags [1].

To continue talking to Dosu, mention @dosu.

Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other

@dosubot[bot] commented on GitHub (Feb 19, 2025): <!-- Greeting --> Hey @junjiem, I'm here to help you with bug fixes, questions, and becoming a contributor. Let's squash those bugs together! 🤖 <!-- Answer --> To address the conflict between `<think>` tags and original `<details>` tags in the frontend rendering for a self-hosted Dify version 1.0 setup, you can modify the `preprocessThinkTag` function to handle the conversion more accurately. The current implementation replaces both `<think>` and `<details>` tags with `<details>`, which can cause conflicts if both tags are used in the content. Here's a possible solution: 1. Modify the `preprocessThinkTag` function to differentiate between `<think>` and `<details>` tags: ```tsx const preprocessThinkTag = (content: string) => { if (!(content.trim().startsWith('<think>\n') || content.trim().startsWith('<details style='))) return content return flow([ (str: string) => str.replaceAll('<think>\n', '<details class="think">\n'), (str: string) => str.replaceAll('\n</think>', '\n[ENDTHINKFLAG]</details>'), (str: string) => str.replaceAll('\n</details>', '\n[ENDTHINKFLAG]</details>'), ])(content) } ``` 2. Update the `Markdown` component to handle the new class for `<details>` tags that originated from `<think>` tags: ```tsx components={{ code: CodeBlock, img: Img, video: VideoBlock, audio: AudioBlock, a: Link, p: Paragraph, button: MarkdownButton, form: MarkdownForm, script: ScriptBlock, details: ({ node, ...props }) => { if (node.properties?.className?.includes('think')) { return <ThinkBlock {...props} /> } return <details {...props} /> }, }} ``` This approach ensures that `<think>` tags are converted to `<details>` with a specific class, allowing you to handle them separately from original `<details>` tags <sup>[[1]](https://github.com/langgenius/dify/blob/main/web/app/components/base/markdown.tsx)</sup>. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.* --- <sup>Help Dosu learn! Give it feedback: [Great Response](https://app.dosu.dev/response-feedback/a72362a7-d63f-445d-8d8c-b871e4cd64ea?feedback_type=great_response) | [Irrelevant Answer](https://app.dosu.dev/response-feedback/a72362a7-d63f-445d-8d8c-b871e4cd64ea?feedback_type=irrelevant_answer) | [Incorrect Sources](https://app.dosu.dev/response-feedback/a72362a7-d63f-445d-8d8c-b871e4cd64ea?feedback_type=incorrect_sources) | [Too Verbose](https://app.dosu.dev/response-feedback/a72362a7-d63f-445d-8d8c-b871e4cd64ea?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/a72362a7-d63f-445d-8d8c-b871e4cd64ea?feedback_type=hallucination) | [Bug Report](https://app.dosu.dev/response-feedback/a72362a7-d63f-445d-8d8c-b871e4cd64ea?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/a72362a7-d63f-445d-8d8c-b871e4cd64ea?feedback_type=other)</sup>
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label 🐞 bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#8422
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?