File size: 3,922 Bytes
1acbe05 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 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!") |