[GH-ISSUE #270] Support for Collapsible Details in Markdown #128

New issue

Closed

opened 2026-10-18 21:02:55 +00:00 by bsakaguchi · 3 comments

bsakaguchi commented

2026-10-18 21:02:55 +00:00

Owner

Originally created by @sawallesalfo on GitHub (Sep 24, 2024).
Original GitHub issue: https://github.com/open-webui/pipelines/issues/270

While OpenWebUI claims to support full Markdown and LaTeX, collapsible elements like <details> and <summary> do not render properly. This limitation restricts our ability to present additional information in a clean and organized manner. Here is a code example showcasing the intended functionality(main part in the method pipe):

Here is an example of pipeline that I execute

import os
from typing import List, Union
from pydantic import BaseModel

class Pipeline:
    def __init__(self):
        self.name = "litellm testing rendering"
        self.valves = self.Valves(OPENAI_API_KEY=os.getenv("OPENAI_API_KEY", "keys"))

    class Valves(BaseModel):
        """
        Configuration settings for the pipeline, including API keys.
        """
        OPENAI_API_KEY: str

    async def on_startup(self):
        """
        Actions to perform when the server starts.
        """
        print(f"Pipeline starting: {self.name}")

    async def on_shutdown(self):
        """
        Actions to perform when the server stops.
        """
        print(f"Pipeline stopping: {self.name}")

    def pipe(self, user_message: str, model_id: str, messages: List[dict], body: dict) -> Union[str, None]:
        """
        Process user messages and return a formatted response with collapsible details.
        """
        print(f"Processing request with model: {model_id}")
        print("Messages:", messages)

        api_key = self.valves.OPENAI_API_KEY
        model_name = "gpt-3.5-turbo"

        # Simulate getting results
        results_data = "total_rows: {4200}"
        results_code = "SELECT COUNT(*) AS total_rows FROM my_table;"
        
        # Constructing the Markdown with collapsible details
        details_markdown = f"""
        <details>
          <summary>Click to expand for SQL Details</summary>
          **SQL Code**: `{results_code}`\n\n
          
          **Results**: `{results_data}`\n\n
        </details>
        """

        # Combine the response text with the collapsible details
        answer_text_with_details = f"There are 4200 rows in the table.\n\n{details_markdown}"
        return answer_text_with_details

When lauch pipelines, I got the output below that I got unexpected format
Would it be possible to enable support for collapsible details within Markdown? This feature would greatly enhance the user experience in chat conversions.

Originally created by @sawallesalfo on GitHub (Sep 24, 2024). Original GitHub issue: https://github.com/open-webui/pipelines/issues/270 While OpenWebUI claims to support full Markdown and LaTeX, collapsible elements like `<details>` and `<summary>` do not render properly. This limitation restricts our ability to present additional information in a clean and organized manner. Here is a code example showcasing the intended functionality(main part in the method pipe): Here is an example of pipeline that I execute ```python import os from typing import List, Union from pydantic import BaseModel class Pipeline: def __init__(self): self.name = "litellm testing rendering" self.valves = self.Valves(OPENAI_API_KEY=os.getenv("OPENAI_API_KEY", "keys")) class Valves(BaseModel): """ Configuration settings for the pipeline, including API keys. """ OPENAI_API_KEY: str async def on_startup(self): """ Actions to perform when the server starts. """ print(f"Pipeline starting: {self.name}") async def on_shutdown(self): """ Actions to perform when the server stops. """ print(f"Pipeline stopping: {self.name}") def pipe(self, user_message: str, model_id: str, messages: List[dict], body: dict) -> Union[str, None]: """ Process user messages and return a formatted response with collapsible details. """ print(f"Processing request with model: {model_id}") print("Messages:", messages) api_key = self.valves.OPENAI_API_KEY model_name = "gpt-3.5-turbo" # Simulate getting results results_data = "total_rows: {4200}" results_code = "SELECT COUNT(*) AS total_rows FROM my_table;" # Constructing the Markdown with collapsible details details_markdown = f""" <details> <summary>Click to expand for SQL Details</summary> **SQL Code**: `{results_code}`\n\n **Results**: `{results_data}`\n\n </details> """ # Combine the response text with the collapsible details answer_text_with_details = f"There are 4200 rows in the table.\n\n{details_markdown}" return answer_text_with_details ``` When lauch pipelines, I got the output below that I got unexpected format Would it be possible to enable support for collapsible details within Markdown? This feature would greatly enhance the user experience in chat conversions.

bsakaguchi closed this issue

2026-10-18 21:02:55 +00:00

bsakaguchi commented

2026-10-18 21:02:56 +00:00

Author

Owner

@thiswillbeyourgithub commented on GitHub (Sep 24, 2024):

On a somewhat similar line, but a tad more technical, I asked for persistence of emitters. Basically the UI change would be that the latest received status emitter would have an arrow that when clicked would display the list of emitters received.

Here's the link : https://github.com/open-webui/open-webui/discussions/5026

But to stay on topic: I too think it would be good to support collapsible details. I could use this to automatically hide the "thinking" xml tags of my claude sonnet output for example.

@thiswillbeyourgithub commented on GitHub (Sep 24, 2024): On a somewhat similar line, but a tad more technical, I asked for persistence of emitters. Basically the UI change would be that the latest received status emitter would have an arrow that when clicked would display the list of emitters received. Here's the link : https://github.com/open-webui/open-webui/discussions/5026 But to stay on topic: I too think it would be good to support collapsible details. I could use this to automatically hide the "thinking" xml tags of my claude sonnet output for example.

bsakaguchi commented

2026-10-18 21:02:56 +00:00

Author

Owner

@drorm commented on GitHub (Nov 29, 2024):

And even better would be a solution where the details are not in the dom, but in local storage. There are 2 issues here:

The user sees too much info.
The client/browser starts getting overwhelmed/slower when there's too much info in a page.
Previous comments solves the first, and this approach solves the second.

@drorm commented on GitHub (Nov 29, 2024): And even better would be a solution where the details are not in the dom, but in local storage. There are 2 issues here: 1. The user sees too much info. 2. The client/browser starts getting overwhelmed/slower when there's too much info in a page. Previous comments solves the first, and this approach solves the second.

bsakaguchi commented

2026-10-18 21:02:56 +00:00

Author

Owner

@sawallesalfo commented on GitHub (Feb 20, 2025):

Possible with OpenWebUI version 0.5.10.

The details section should be before the output. It works like a reasoning block. For more details on different possibilities, refer to this link.

Here is a simple echo pipeline that works

-----Class Pipelines------------


  def pipe(self, user_message: str, model_id: str, messages: List[dict], body: dict) -> Union[str, None]:
          """
          Process user messages and return a formatted response with collapsible details.
          """
          api_key = self.valves.OPENAI_API_KEY
          model_name = "gpt-3.5-turbo"
          # Simulate getting results
          results_data = "total_rows: {4200}"
          results_code = "SELECT COUNT(*) AS total_rows FROM my_table;"
          # Constructing the Markdown with collapsible details
          details_markdown = f"""
          <details >
            <summary>Click to expand for SQL Details</summary>
            **SQL Code**: `{results_code}`\n\n
            **Results**: `{results_data}`\n\n
          </details>
          """
          # Combine the response text with the collapsible details
          answer_text_with_details = f"{details_markdown} There are 4200 rows in the table.\n\n"
          return answer_text_with_details

@sawallesalfo commented on GitHub (Feb 20, 2025): Possible with OpenWebUI version 0.5.10. The details section should be before the output. It works like a reasoning block. For more details on different possibilities, refer to [this link](https://github.com/open-webui/open-webui/blob/main/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte). Here is a simple echo pipeline that works ```python -----Class Pipelines------------ def pipe(self, user_message: str, model_id: str, messages: List[dict], body: dict) -> Union[str, None]: """ Process user messages and return a formatted response with collapsible details. """ api_key = self.valves.OPENAI_API_KEY model_name = "gpt-3.5-turbo" # Simulate getting results results_data = "total_rows: {4200}" results_code = "SELECT COUNT(*) AS total_rows FROM my_table;" # Constructing the Markdown with collapsible details details_markdown = f""" <details > <summary>Click to expand for SQL Details</summary> **SQL Code**: `{results_code}`\n\n **Results**: `{results_data}`\n\n </details> """ # Combine the response text with the collapsible details answer_text_with_details = f"{details_markdown} There are 4200 rows in the table.\n\n" return answer_text_with_details ``` ![Image](https://github.com/user-attachments/assets/82e56dd2-1e74-47a8-b17b-f7311504f26a)

bsakaguchi referenced this issue

2026-10-18 21:05:02 +00:00

[PR #128] [MERGED] Fix: Add proper exception handling to langfuse filter pipeline #324