Skip to content

Commit f8ced99

Browse files
clstaudtclstaudt
committed
Add logo and title to app header; enhance sidebar chat history styling
1 parent 179ecc4 commit f8ced99

File tree

4 files changed

+173
-44
lines changed

4 files changed

+173
-44
lines changed

‎assets/logo.png

57.7 KB
Loading

‎ragadoc/themes/darkstreaming.css

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,26 @@ h1 {
4242
font-size: 2.5rem !important;
4343
}
4444

45+
/* Logo Header Styling */
46+
.logo-header {
47+
text-align: center;
48+
margin-bottom: 2rem;
49+
}
50+
51+
.logo-header img {
52+
width: 80px;
53+
height: auto;
54+
margin-bottom: 1rem;
55+
border-radius: 12px;
56+
box-shadow: 0 4px 20px rgba(255, 176, 0, 0.2);
57+
transition: transform 0.3s ease, box-shadow 0.3s ease;
58+
}
59+
60+
.logo-header img:hover {
61+
transform: scale(1.05);
62+
box-shadow: 0 6px 30px rgba(255, 176, 0, 0.3);
63+
}
64+
4565
h2, h3, h4, h5, h6 {
4666
color: var(--text-primary) !important;
4767
font-weight: 600 !important;
@@ -70,6 +90,58 @@ h2, h3, h4, h5, h6 {
7090
filter: brightness(1.1) !important;
7191
}
7292

93+
/* Sidebar Chat History Styling */
94+
.css-1d391kg .stButton > button {
95+
/* Default chat item styling - secondary buttons */
96+
background: var(--elevated-bg) !important;
97+
color: var(--text-primary) !important;
98+
border: 1px solid var(--border-color) !important;
99+
border-radius: 8px !important;
100+
font-weight: 500 !important;
101+
text-align: left !important;
102+
padding: 0.75rem 1rem !important;
103+
transform: none !important;
104+
box-shadow: none !important;
105+
}
106+
107+
.css-1d391kg .stButton > button:hover {
108+
background: var(--hover-color) !important;
109+
border-color: var(--primary-gold) !important;
110+
transform: translateY(-1px) !important;
111+
box-shadow: 0 2px 8px rgba(255, 176, 0, 0.2) !important;
112+
}
113+
114+
/* New Chat Button - First primary button in Chat History section */
115+
.css-1d391kg .stButton:first-of-type > button[kind="primary"] {
116+
background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)) !important;
117+
color: var(--dark-bg) !important;
118+
font-weight: 700 !important;
119+
text-transform: uppercase !important;
120+
letter-spacing: 0.5px !important;
121+
border-radius: 25px !important;
122+
box-shadow: 0 4px 15px rgba(255, 176, 0, 0.3) !important;
123+
}
124+
125+
.css-1d391kg .stButton:first-of-type > button[kind="primary"]:hover {
126+
transform: translateY(-2px) !important;
127+
box-shadow: 0 8px 25px rgba(255, 176, 0, 0.4) !important;
128+
filter: brightness(1.1) !important;
129+
}
130+
131+
/* Selected Chat - Disabled primary button with golden highlight */
132+
.css-1d391kg .stButton > button[kind="primary"]:disabled {
133+
background: rgba(255, 176, 0, 0.2) !important;
134+
color: var(--accent-gold) !important;
135+
border: 1px solid var(--primary-gold) !important;
136+
border-radius: 8px !important;
137+
font-weight: 600 !important;
138+
text-transform: none !important;
139+
letter-spacing: normal !important;
140+
box-shadow: inset 0 0 0 1px rgba(255, 176, 0, 0.3) !important;
141+
cursor: default !important;
142+
opacity: 1 !important; /* Override disabled opacity */
143+
}
144+
73145
/* Input Elements */
74146
.stSelectbox > div > div,
75147
.stTextInput > div > div > input,

‎ragadoc/ui_config.py

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,42 @@ def apply_basic_dark_theme():
8787
""", unsafe_allow_html=True)
8888

8989

90+
def add_logo_and_title():
91+
"""Add logo and title to the app header"""
92+
logo_path = Path(__file__).parent.parent / "assets" / "logo.png"
93+
94+
if logo_path.exists():
95+
# Create a centered header with logo and title
96+
col1, col2, col3 = st.columns([1, 2, 1])
97+
98+
with col2:
99+
# Logo and title in the center column
100+
st.markdown("""
101+
<div class="logo-header">
102+
<img src="data:image/png;base64,{}" alt="ragadoc logo">
103+
<h1 style="margin: 0; font-size: 2.5rem;">ragadoc - AI Document Assistant</h1>
104+
<p style="margin: 0.5rem 0 0 0; font-style: italic; color: #b3b3b3;">
105+
Ask questions about your documents - get grounded answers with citations and highlights.
106+
</p>
107+
</div>
108+
""".format(get_base64_logo(logo_path)), unsafe_allow_html=True)
109+
else:
110+
# Fallback to text-only title if logo not found
111+
st.title("ragadoc - AI Document Assistant")
112+
st.markdown("*Ask questions about your documents - get grounded answers with citations and highlights*", unsafe_allow_html=True)
113+
114+
115+
def get_base64_logo(logo_path):
116+
"""Convert logo to base64 for embedding in HTML"""
117+
import base64
118+
119+
try:
120+
with open(logo_path, "rb") as f:
121+
return base64.b64encode(f.read()).decode()
122+
except Exception:
123+
return ""
124+
125+
90126
def setup_streamlit_config(theme=None):
91127
"""Configure Streamlit page settings with customizable theme"""
92128
st.set_page_config(
@@ -103,6 +139,5 @@ def setup_streamlit_config(theme=None):
103139
# Apply the selected theme
104140
apply_theme(theme)
105141

106-
# Clean title
107-
st.title("ragadoc - AI Document Assistant")
108-
st.markdown("*Experience your documents like never before*", unsafe_allow_html=True)
142+
# Add logo and title
143+
add_logo_and_title()

‎ragadoc/ui_sidebar.py

Lines changed: 63 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -128,8 +128,8 @@ def render_sidebar():
128128

129129
st.header("Chat History")
130130

131-
# New chat button
132-
if st.button("New Chat", use_container_width=True, type="primary"):
131+
# New chat button - prominent golden button
132+
if st.button("➕ New Chat", use_container_width=True, type="primary"):
133133
# Stop any ongoing generation before creating new chat
134134
if st.session_state.get('generating', False):
135135
st.session_state.stop_generation = True
@@ -141,47 +141,69 @@ def render_sidebar():
141141

142142
st.divider()
143143

144-
# Chat history
144+
# Chat history using container with custom styling
145145
sorted_chats = st.session_state.chat_manager.get_sorted_chats()
146146
if sorted_chats:
147147
for chat_id, chat_session in sorted_chats:
148-
col1, col2 = st.columns([4, 1])
148+
is_current = chat_id == st.session_state.chat_manager.current_chat_id
149149

150-
with col1:
151-
is_current = chat_id == st.session_state.chat_manager.current_chat_id
152-
button_type = "primary" if is_current else "secondary"
150+
# Create a container for each chat item
151+
chat_container = st.container()
152+
with chat_container:
153+
col1, col2 = st.columns([4, 1])
153154

154-
if st.button(chat_session.title, key=f"chat-{chat_id}",
155-
use_container_width=True, type=button_type):
156-
# Stop any ongoing generation before switching
157-
if st.session_state.get('generating', False):
158-
st.session_state.stop_generation = True
159-
st.session_state.generating = False
160-
logger.info("Stopped ongoing generation due to chat switch")
161-
162-
# Switch to the chat
163-
st.session_state.chat_manager.switch_to_chat(chat_id)
164-
165-
# Load the appropriate document for this chat if it has one
166-
if chat_session.document_id and st.session_state.rag_system:
167-
try:
168-
success = st.session_state.rag_system.load_document(chat_session.document_id)
169-
if success:
170-
logger.info(f"Loaded document {chat_session.document_id} for chat {chat_id}")
171-
else:
172-
logger.warning(f"Could not load document {chat_session.document_id} for chat {chat_id}")
173-
except Exception as e:
174-
logger.error(f"Error loading document for chat {chat_id}: {e}")
175-
176-
st.rerun()
177-
178-
with col2:
179-
if st.button("×", key=f"del-{chat_id}", help="Delete"):
180-
# Stop any ongoing generation before deleting chat
181-
if st.session_state.get('generating', False):
182-
st.session_state.stop_generation = True
183-
st.session_state.generating = False
184-
logger.info("Stopped ongoing generation due to chat deletion")
185-
186-
st.session_state.chat_manager.delete_chat(chat_id)
187-
st.rerun()
155+
with col1:
156+
# All chats use the same emoji, different styling for selection
157+
if is_current:
158+
# Current chat - highlighted with primary styling
159+
st.button(
160+
f"💬 {chat_session.title}",
161+
key=f"chat-{chat_id}",
162+
use_container_width=True,
163+
type="primary",
164+
help="Current chat",
165+
disabled=True # Disabled to show it's selected
166+
)
167+
else:
168+
# Inactive chat - secondary styling
169+
if st.button(
170+
f"💬 {chat_session.title}",
171+
key=f"chat-{chat_id}",
172+
use_container_width=True,
173+
type="secondary",
174+
help="Click to switch to this chat"
175+
):
176+
# Stop any ongoing generation before switching
177+
if st.session_state.get('generating', False):
178+
st.session_state.stop_generation = True
179+
st.session_state.generating = False
180+
logger.info("Stopped ongoing generation due to chat switch")
181+
182+
# Switch to the chat
183+
st.session_state.chat_manager.switch_to_chat(chat_id)
184+
185+
# Load the appropriate document for this chat if it has one
186+
if chat_session.document_id and st.session_state.rag_system:
187+
try:
188+
success = st.session_state.rag_system.load_document(chat_session.document_id)
189+
if success:
190+
logger.info(f"Loaded document {chat_session.document_id} for chat {chat_id}")
191+
else:
192+
logger.warning(f"Could not load document {chat_session.document_id} for chat {chat_id}")
193+
except Exception as e:
194+
logger.error(f"Error loading document for chat {chat_id}: {e}")
195+
196+
st.rerun()
197+
198+
with col2:
199+
if st.button("×", key=f"del-{chat_id}", help="Delete", type="secondary"):
200+
# Stop any ongoing generation before deleting chat
201+
if st.session_state.get('generating', False):
202+
st.session_state.stop_generation = True
203+
st.session_state.generating = False
204+
logger.info("Stopped ongoing generation due to chat deletion")
205+
206+
st.session_state.chat_manager.delete_chat(chat_id)
207+
st.rerun()
208+
else:
209+
st.write("*No chat history yet*")

0 commit comments

Comments
 (0)