Create components/styled_response.py

components/styled_response.py

@@ -0,0 +1,143 @@
+# 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!")