Support for Collapsible Details in Markdown

[sawadogosalif]

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.

[thiswillbeyourgithub]

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.

[drorm]

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.