components/styled_response.py

# components/styled_response.py

import streamlit as st
from utils.response_formatter import display_formatted_response

def add_custom_styles():
    """Add custom CSS styles for response formatting."""
    st.markdown("""
        <style>
        /* Section styling */
        h3 {
            color: #1f77b4;
            border-bottom: 2px solid #1f77b4;
            padding-bottom: 8px;
            margin-top: 20px;
        }
        
        /* Bullet points styling */
        .stMarkdown ul {
            list-style-type: none;
            padding-left: 20px;
        }
        
        .stMarkdown ul li:before {
            content: "•";
            color: #1f77b4;
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
        }
        
        /* Source section styling */
        .source-section {
            background-color: #f0f2f6;
            border-left: 4px solid #1f77b4;
            padding: 10px;
            margin-top: 20px;
        }
        
        /* Copy section styling */
        .copy-section {
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            padding: 15px;
            margin-top: 10px;
        }
        
        /* Important points highlighting */
        .highlight {
            background-color: #fff3cd;
            padding: 2px 5px;
            border-radius: 3px;
        }
        
        /* Metrics styling */
        .metric-container {
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            padding: 10px;
            margin: 10px 0;
            background-color: #f8f9fa;
        }
        
        .metric-value {
            font-size: 1.2em;
            font-weight: bold;
            color: #1f77b4;
        }
        
        /* Table styling */
        .styled-table {
            border-collapse: collapse;
            width: 100%;
            margin: 10px 0;
        }
        
        .styled-table th {
            background-color: #1f77b4;
            color: white;
            padding: 12px;
            text-align: left;
        }
        
        .styled-table td {
            padding: 8px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        /* Quote styling */
        blockquote {
            border-left: 4px solid #1f77b4;
            margin: 10px 0;
            padding-left: 15px;
            color: #666;
        }
        </style>
    """, unsafe_allow_html=True)

def display_styled_chat_message(message, is_user=False):
    """
    Display a styled chat message with formatting.
    
    Args:
        message: The chat message to display
        is_user (bool): Whether the message is from the user
    """
    # Add custom styles
    add_custom_styles()
    
    if is_user:
        st.chat_message("user").write(message)
    else:
        with st.chat_message("assistant"):
            display_formatted_response(
                message.content,
                metadata=getattr(message, 'metadata', None)
            )

def display_copyable_sections(content: str):
    """
    Display content in copyable sections.
    
    Args:
        content (str): The content to display
    """
    sections = content.split("###")[1:]  # Skip the first empty section
    
    for section in sections:
        if section.strip():
            lines = section.strip().split("\n")
            title = lines[0].strip()
            content = "\n".join(lines[1:]).strip()
            
            with st.expander(f"{title}", expanded=False):
                st.markdown(f"### {title}")
                st.markdown(content)
                
                # Add copy button
                if st.button(f"Copy {title}", key=f"copy_{title}"):
                    st.code(content, language="text")
                    st.success(f"{title} content copied to clipboard!")