src/ui/reasoning.py

#
# SPDX-FileCopyrightText: Hadad <[email protected]>
# SPDX-License-Identifier: Apache-2.0
#

def styles(reasoning: str, content: str, expanded: bool = False) -> str:
    """
    Create a visually captivating and interactive HTML <details> block that elegantly presents reasoning text 
    inside a beautifully styled collapsible container with enhanced user experience features.

    This function generates a sophisticated collapsible section using HTML and inline CSS, designed to grab 
    attention with a modern, polished look. It leverages subtle shadows, smooth transitions, and vibrant styling 
    to make the reasoning content stand out while maintaining excellent readability on dark backgrounds. 
    The container uses the default background color to blend seamlessly with its surroundings, ensuring 
    versatility in different UI contexts. The summary header includes an engaging emoji and changes color on hover 
    to invite user interaction. The reasoning text is carefully spaced and styled with a clean font and 
    crisp white color for maximum clarity. The collapsible block can start expanded or collapsed based on the 
    'expanded' parameter. The 'content' parameter remains unused here to keep the function signature consistent 
    with similar functions.

    Args:
        reasoning (str): The main explanation or reasoning text to be displayed inside the collapsible block. 
                         This content 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): Determines if the collapsible block is initially open (True) or closed (False) when rendered.

    Returns:
        str: A complete HTML snippet string containing a <details> element with inline CSS that styles it as 
             a sleek, interactive collapsible container. The styling includes padding, rounded corners, 
             a subtle but dynamic shadow, smooth hover effects on the summary header, and carefully sized fonts 
             with white text for optimal contrast and readability.
    """
    # Conditionally add the 'open' attribute to the <details> element if expanded is True, 
    # so the block starts expanded when rendered in the browser.
    open_attr = "open" if expanded else ""

    # Return the full HTML string with inline CSS styles applied to create an eye-catching, user-friendly collapsible block.
    # The <details> element acts as a toggleable container with smooth rounded corners and a dynamic shadow that subtly intensifies on hover.
    # The <summary> element serves as the clickable header with a brain emoji to visually represent reasoning, 
    # featuring a color transition on hover to encourage user interaction.
    # The reasoning text is enclosed in a <div> with generous spacing, a delicate top border, and crisp white text for excellent readability.
    # The entire block uses a clean, modern sans-serif font and avoids any background color override to maintain design flexibility.
    return f"""
<details {open_attr} style="
    padding: 16px;                              /* Comfortable inner spacing for a spacious feel */
    border-radius: 12px;                       /* Smoothly rounded corners for a modern, friendly appearance */
    margin: 12px 0;                            /* Vertical margin to separate from other page elements */
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);  /* Deeper, softly diffused shadow to create a subtle floating effect */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Crisp, modern font stack for excellent readability */
    color: white;                              /* Bright white text to stand out clearly on dark or varied backgrounds */
    transition: box-shadow 0.3s ease-in-out;  /* Smooth shadow transition for dynamic visual feedback on hover */
">
  <summary style="
    font-weight: 700;                         /* Bold font weight to make the summary header prominent */
    color: white;                             /* White text color for consistent contrast */
    font-size: 14px !important;               /* Slightly larger font size for better emphasis */
    cursor: pointer;                          /* Pointer cursor to indicate the summary is clickable */
    user-select: none;                        /* Prevent text selection on click for cleaner interaction */
    transition: color 0.25s ease-in-out;     /* Smooth color transition when hovering */
  " onmouseover="this.style.color='#FFD700';" onmouseout="this.style.color='white';">
    🧠 Reasoning
  </summary>
  <div style="
    margin-top: 12px;                         /* Clear separation between summary and content */
    padding-top: 8px;                         /* Additional padding for comfortable reading space */
    border-top: 1.5px solid rgba(255, 255, 255, 0.25); /* Elegant translucent top border to visually separate content */
    font-size: 11px !important;               /* Slightly larger font size for improved readability */
    line-height: 1.7;                         /* Increased line height for comfortable text flow */
    color: white;                             /* Maintain white text color for clarity */
    letter-spacing: 0.02em;                   /* Slight letter spacing to enhance text legibility */
  ">
    {reasoning}                              <!-- Reasoning -->
  </div>
</details>
"""