|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
def styles(reasoning: str, expanded: bool = False) -> str: |
|
|
""" |
|
|
Generates a styled HTML collapsible section using |
|
|
<details> and <summary> tags. |
|
|
|
|
|
Parameters: |
|
|
* reasoning (str): The explanatory or descriptive text to |
|
|
display inside the section. |
|
|
|
|
|
* expanded (bool): If True, the section is expanded by default. |
|
|
Otherwise, it remains collapsed. |
|
|
|
|
|
Returns: |
|
|
str: A string containing HTML and inline CSS to render |
|
|
the styled collapsible block. |
|
|
""" |
|
|
open_attr = "open" if expanded else "" |
|
|
emoji = "🧠" |
|
|
return f""" |
|
|
<details {open_attr} style=" |
|
|
/* Sans-serif font stack for clean modern look */ |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
"> |
|
|
<summary style=" |
|
|
font-weight: 700; /* Bold summary title */ |
|
|
font-size: 14px !important; /* Fixed font size */ |
|
|
cursor: pointer; /* Pointer on hover */ |
|
|
user-select: none; /* Prevent text selection */ |
|
|
"> |
|
|
{emoji} Reasoning |
|
|
</summary> |
|
|
<div style=" |
|
|
margin-top: 6px; /* Space above content */ |
|
|
padding-top: 6px; /* Inner top padding */ |
|
|
font-size: 11px !important; /* Smaller text */ |
|
|
line-height: 1.7; /* Improve readability */ |
|
|
letter-spacing: 0.02em; /* Slight spacing */ |
|
|
"> |
|
|
{reasoning} |
|
|
</div> |
|
|
</details> |
|
|
""" |
