Spaces:
Running
Running
| # | |
| # 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 = "🧠" # 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> | |
| """ |