src/ui/reasoning.py

#
# SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
# SPDX-License-Identifier: Apache-2.0
#

def styles(reasoning: str, content: str, expanded: bool = False) -> str:
    """
    Generate a clean, interactive HTML <details> block that displays reasoning text inside a collapsible container 
    with subtle styling and enhanced user experience, without applying any custom colors or shadows.

    This function creates a collapsible section using HTML and inline CSS that focuses on simplicity and readability.
    It avoids setting any custom text or background colors and does not include any box shadow effects, 
    allowing the block to inherit colors and styles from its surrounding environment. 
    The summary header includes a brain emoji represented by its HTML numeric character reference to symbolize reasoning.
    The collapsible block can be rendered initially expanded or collapsed based on the 'expanded' parameter.
    The 'content' parameter is unused but kept for compatibility with similar function signatures.

    Args:
        reasoning (str): The explanation or reasoning text to be displayed inside the collapsible block.
                         This text is wrapped in a styled <div> for clear presentation.
        content (str): An unused parameter retained for compatibility with other functions sharing this signature.
        expanded (bool): If True, the collapsible block is initially open; if False, it starts closed.

    Returns:
        str: A complete HTML snippet string containing a <details> element with inline CSS that styles it as 
             a simple, user-friendly collapsible container. The styling includes padding, rounded corners, 
             smooth transitions on the summary header's text color, and readable font sizing without any color overrides or shadows.
    """
    # Determine whether to include the 'open' attribute in the <details> tag.
    # If 'expanded' is True, the block will be rendered open by default in the browser.
    open_attr = "open" if expanded else ""

    # Define the brain emoji using its HTML numeric character reference to ensure consistent display
    # across different browsers and platforms, avoiding potential encoding issues.
    emoji = "&#129504;"  # Unicode code point U+1F9E0 representing the 🧠 emoji

    # Construct and return the full HTML string for the collapsible block.
    # The <details> element acts as a toggleable container with padding and rounded corners for a modern look.
    # The inline styles avoid setting explicit colors or shadows, allowing the block to inherit styles from its context.
    # The <summary> element serves as the clickable header, featuring the brain emoji and the label "Reasoning".
    # It includes styling for font weight, size, cursor, and smooth color transitions on hover.
    # The hover effect is implemented using inline JavaScript event handlers that maintain the inherited color,
    # ensuring no color changes occur but allowing for potential future customization.
    # The reasoning text is wrapped inside a <div> with spacing and a subtle top border to visually separate it from the summary.
    # Typography settings improve readability with increased line height and slight letter spacing.
    # The 'content' parameter is intentionally unused but present to maintain compatibility with similar function signatures.
    return f"""
<details {open_attr} style="
    padding: 16px;                /* Inner spacing for comfortable content layout */
    border-radius: 12px;         /* Rounded corners for a smooth, friendly appearance */
    margin: 12px 0;              /* Vertical spacing to separate from adjacent elements */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern, readable font stack */
    transition: box-shadow 0.3s ease-in-out; /* Transition effect retained though no shadow is applied */
">
  <summary style="
    font-weight: 700;            /* Bold text to highlight the summary header */
    font-size: 14px !important; /* Slightly larger font size for emphasis */
    cursor: pointer;             /* Cursor changes to pointer to indicate interactivity */
    user-select: none;           /* Prevents text selection on click for cleaner UX */
    transition: color 0.25s ease-in-out; /* Smooth transition for color changes on hover */
  " onmouseover="this.style.color='inherit';" onmouseout="this.style.color='inherit';">
    {emoji} Reasoning
  </summary>
  <div style="
    margin-top: 12px;            /* Space separating the summary from the content */
    padding-top: 8px;            /* Additional padding for comfortable reading */
    border-top: 1.5px solid;     /* Subtle top border to visually separate content */
    font-size: 11px !important; /* Slightly larger font size for better readability */
    line-height: 1.7;            /* Increased line height for easy text flow */
    letter-spacing: 0.02em;      /* Slight letter spacing to enhance legibility */
  ">
    {reasoning}
  </div>
</details>
"""