Updated frontend and cleaned imports

src/config.py

@@ -1,6 +1,4 @@
-import os
 from enum import Enum
-from typing import Dict, NamedTuple
 from dataclasses import dataclass
 
 class InfoSource(Enum):

src/query_rag.py

@@ -1,8 +1,6 @@
 import os
-import time
 import argparse
 import logging
-import re
 from typing import Dict, List, Optional, Generator, Tuple
 from openai import OpenAI
 from config import Config, InfoSource

src/search_engine.py

@@ -1,8 +1,5 @@
-import numpy as np
-import pandas as pd
 import voyageai
-from typing import List, Dict, Tuple, Optional
-from collections import defaultdict
+from typing import List
 import logging
 import os 
 from pinecone import Pinecone
@@ -18,7 +15,7 @@ class SearchEngine:
         self.pc = Pinecone(api_key=pinecone_api_key)
         self.index = self.pc.Index("nhs-conditions")
     
-    def similarity_search(self, query_text: str, namespace: str, top_k: int = 25) -> List[dict]:
+    def similarity_search(self, query_text: str, namespace: str, top_k: int = 5) -> List[dict]:
         """Perform similarity search using Pinecone"""
         try:
             # Embed the query using the same model - matches your example exactly

src/streamlit_app.py

@@ -1,5 +1,7 @@
 import streamlit as st
 from typing import Dict, List
+from pathlib import Path
+import os
 
 try:
     from query_rag import RAGSystem
@@ -8,9 +10,24 @@ except ImportError as e:
     st.stop()
 
 
-# --- Page Configuration and Initialization ---
-st.set_page_config(page_title="NHS Clinical Assistant", layout="wide")
+# --- assets / logo setup ---
 
+# Get the correct path to the logo file
+current_dir = Path(__file__).parent
+LOGO_PATH = current_dir.parent / "nhs_logo.png"
+
+# Check if logo exists, if not use a fallback
+if LOGO_PATH.exists():
+    logo_path_str = str(LOGO_PATH)
+else:
+    # Fallback if logo doesn't exist
+    logo_path_str = None
+
+LOGO_ALT = "NHS logo"
+
+# set a page icon (use emoji as fallback if logo file doesn't exist)
+page_icon = "🩺"  # Use emoji instead of file path for better compatibility
+st.set_page_config(page_title="NHS Clinical Assistant", layout="wide", page_icon=page_icon)
 
 # Initialize RAG System
 def get_rag_system():
@@ -43,13 +60,11 @@ def display_sources(sources_data: List[Dict]):
         clean_section = metadata.get('clean_section', 'Unknown Section')
         url = metadata.get('url', '')
         
-        source_text = f"**Source {idx+1}:** {clean_section}"
-        st.markdown(source_text)
-
+        source_text = f"<div class='source-item'><div class='source-title'>Source {idx+1}: {clean_section}</div>"
         if url:
-            st.markdown(f"   🔗 [View Online]({url})")
-
-        st.markdown("---")
+            source_text += f"<div class='source-link'>🔗 <a href='{url}' target='_blank'>View online</a></div>"
+        source_text += "</div>"
+        st.markdown(source_text, unsafe_allow_html=True)
 
 
 def initialize_session_state():
@@ -77,25 +92,132 @@ initialize_session_state()
 # --- STYLING ---
 st.markdown("""
 <style>
-    .main {background-color: #f9f9f9; font-family: Arial, sans-serif;}
-    h1, h2, h3, h4, h5, h6 {color: #2b6777;}
-    h1 {font-weight: bold;}
-    [data-testid="stSidebar"] {background-color: #e8f0fe; padding: 10px;}
-    .result-box {
-        border-left: 4px solid #4CAF50;
-        padding: 10px;
-        background-color: #fff;
-        margin-bottom: 10px;
-        border-radius: 4px;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-    }
-    div.stTextArea > div { border-radius: 8px; }
-    textarea { font-family: Arial, sans-serif; font-size: 16px; color: #333; resize: vertical; }
-    .stButton>button { border-radius: 5px; }
-    div.stSelectbox > label {
-        font-size: 16px !important;
-        font-weight: bold !important;
-    }
+  /* Import a modern font */
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
+
+  :root{
+    --bg:#f6f8fa;
+    --card:#ffffff;
+    --accent:#1f7a8c;    /* deep teal */
+    --accent-2:#2b6777;
+    --muted:#6b7280;
+    --green:#16a34a;
+  }
+
+  html, body, [class*="css"]  {
+    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+    color: #0f1724;
+    background: linear-gradient(180deg, var(--bg) 0%, #ffffff 100%);
+  }
+
+  /* Main container */
+  .main .block-container {
+    padding-top: 8px;
+    padding-left: 28px;
+    padding-right: 28px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  /* Header */
+  .app-header{
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    gap:12px;
+    margin-bottom:12px;
+  }
+  .app-title {
+    display:flex;
+    align-items:center;
+    gap:12px;
+  }
+  .logo {
+    background: linear-gradient(135deg, var(--accent), var(--accent-2));
+    color: white;
+    width:44px;
+    height:44px;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    font-weight:700;
+    border-radius:10px;
+    box-shadow: 0 6px 18px rgba(43,103,119,0.12);
+  }
+  .title-text { font-size:20px; font-weight:700; letter-spacing: -0.2px; }
+
+  /* Card-like chat area */
+  .chat-card {
+    background: var(--card);
+    border-radius: 12px;
+    padding: 18px;
+    box-shadow: 0 6px 20px rgba(20,23,30,0.04);
+  }
+
+  /* Chat bubbles */
+  .chat-bubble {
+    max-width:78%;
+    padding:12px 14px;
+    border-radius:12px;
+    margin-bottom:10px;
+    line-height:1.4;
+    box-shadow: 0 4px 12px rgba(15,23,36,0.04);
+  }
+  .chat-bubble.user {
+    background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,1));
+    border: 1px solid rgba(16,24,40,0.06);
+    margin-left:auto;
+    border-bottom-right-radius:6px;
+  }
+  .chat-bubble.assistant {
+    background: linear-gradient(180deg, rgba(31,122,140,0.06), rgba(43,103,119,0.03));
+    border-left: 4px solid var(--accent);
+    border-bottom-left-radius:6px;
+    margin-right:auto;
+  }
+
+  .chat-meta {
+    font-size:12px;
+    color:var(--muted);
+    margin-bottom:6px;
+  }
+
+  /* Sources */
+  .source-item { padding:10px 12px; border-radius:8px; background:#fbfcfd; margin-bottom:8px; border:1px solid rgba(16,24,40,0.03); }
+  .source-title { font-weight:600; color:var(--accent-2); margin-bottom:4px; }
+  .source-link a { color:var(--accent); text-decoration:none; font-weight:600; }
+  .source-link a:hover { text-decoration:underline; }
+
+  /* Buttons / chips */
+  .stButton>button {
+    border-radius:999px !important;
+    padding:8px 14px !important;
+    background: linear-gradient(90deg, #ffffff, #f7fafb) !important;
+    border: 1px solid rgba(16,24,40,0.06) !important;
+    color: #0f1724 !important;
+    box-shadow: 0 4px 10px rgba(12,18,28,0.04);
+  }
+  .stButton>button:active { transform: translateY(1px); }
+
+  /* Suggested chips */
+  .suggested-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
+  .chip {
+    display:inline-flex;
+    gap:8px;
+    align-items:center;
+    padding:8px 12px;
+    border-radius:999px;
+    background: rgba(47,128,237,0.06);
+    color: #164e63;
+    border:1px solid rgba(47,128,237,0.12);
+    cursor:pointer;
+    font-weight:600;
+    font-size:13px;
+  }
+
+  /* small helpers */
+  .muted { color:var(--muted); font-size:13px; }
+  hr.stDivider { border: none; height:1px; background: linear-gradient(90deg, transparent, rgba(15,23,36,0.06), transparent); margin: 16px 0; }
 </style>
 """, unsafe_allow_html=True)
 
@@ -132,8 +254,45 @@ with st.sidebar:
 
 
 # --- MAIN APPLICATION AREA ---
-st.title("🩺 NHS Clinical Assistant")
-st.markdown("Ask questions and get relevant information from trusted NHS health condition sources.")
+# Header area with logo, title and small info
+header_cols = st.columns([0.12, 0.76, 0.12])
+with header_cols[0]:
+    if logo_path_str and os.path.exists(logo_path_str):
+        # Use HTML to control sizing while preserving quality
+        import base64
+        with open(logo_path_str, "rb") as img_file:
+            img_base64 = base64.b64encode(img_file.read()).decode()
+        
+        st.markdown(f"""
+        <div style="display: flex; justify-content: center; align-items: center;">
+            <img src="data:image/png;base64,{img_base64}" 
+                 style="max-width: 100%; height: auto; max-height: 60px; object-fit: contain;" 
+                 alt="NHS Logo">
+        </div>
+        """, unsafe_allow_html=True)
+    else:
+        # Fallback: display emoji or text if logo not found
+        st.markdown('<div style="font-size:56px;">🩺</div>', unsafe_allow_html=True)
+
+
+
+with header_cols[1]:
+    st.markdown("""
+    <div style="display:flex; flex-direction:column; justify-content:center;">
+      <div class="title-text">NHS Clinical Assistant</div>
+      <div class="muted">Trusted NHS content · Evidence-backed summaries</div>
+    </div>
+    """, unsafe_allow_html=True)
+
+with header_cols[2]:
+    st.markdown(f"""
+    <div style="display:flex; gap:12px; align-items:center; justify-content:flex-end;">
+      <div style="font-size:13px; color:var(--muted);">Model:</div>
+      <div style="font-weight:700; color:var(--accent-2);">{st.session_state.llm_model}</div>
+    </div>
+    """, unsafe_allow_html=True)
+
+st.markdown('<div class="chat-card">', unsafe_allow_html=True)
 
 def submit_and_process_query(query_to_send: str, display_query_text: str):
     st.session_state.processing_query = True 
@@ -154,7 +313,7 @@ def submit_and_process_query(query_to_send: str, display_query_text: str):
                 sources_data = chunk_sources_data 
                 
                 temp_response_placeholder.markdown(
-                    f"<div style='border-left: 4px solid #4CAF50; padding-left: 10px;'>{''.join(response_chunks)}</div>",
+                    f"<div class='chat-bubble assistant'>{''.join(response_chunks)}</div>",
                     unsafe_allow_html=True
                 )
             
@@ -177,43 +336,40 @@ def submit_and_process_query(query_to_send: str, display_query_text: str):
 
 # Display chat history
 for i, chat_entry in enumerate(st.session_state.chat_history):
-    st.markdown(f"👤 **You:** {chat_entry['display_query']}")
+    # user
+    st.markdown(f"<div class='chat-bubble user'><div class='chat-meta'>You</div><div>{chat_entry['display_query']}</div></div>", unsafe_allow_html=True)
     
     response_info = f"(LLM: {chat_entry.get('llm_model', 'N/A')})"
     
-    st.markdown(f"🤖 **Assistant** {response_info}:")
-    st.markdown(
-        f"<div style='border-left: 4px solid #4CAF50; padding-left: 10px; margin-bottom: 10px;'>{chat_entry['response']}</div>",
-        unsafe_allow_html=True
-    )
+    st.markdown(f"<div class='chat-bubble assistant'><div class='chat-meta'>Assistant {response_info}</div><div>{chat_entry['response']}</div></div>", unsafe_allow_html=True)
 
-    st.subheader("📚 Sources:")
+    st.markdown("<div style='margin-top:8px; font-weight:600;'>📚 Sources</div>", unsafe_allow_html=True)
     with st.expander("View Sources", expanded=False):
         sources_data = chat_entry.get("sources_data", [])
         if sources_data:
             display_sources(sources_data)
         else:
             st.markdown("No sources available for this response.")
-    st.markdown("---")
+    st.markdown('<hr class="stDivider">', unsafe_allow_html=True)
 
-# Suggested queries
-st.markdown("<h6>�� Suggested Queries:</h6>", unsafe_allow_html=True)
+# Suggested queries - styled as chips
+st.markdown("<div style='margin-top:6px; margin-bottom:8px; font-weight:600;'>💡 Suggested Queries</div>", unsafe_allow_html=True)
 suggested_queries_list = [
     "What are the symptoms of ADHD in adults?",
     "How is type 2 diabetes diagnosed?",
     "What are the treatment options for depression?"
 ]
-sq_cols = st.columns(len(suggested_queries_list))
-for idx, sq_text_item in enumerate(suggested_queries_list):
-    if sq_cols[idx].button(
-        sq_text_item, 
-        key=f"suggested_{idx}", 
-        disabled=st.session_state.processing_query
-    ):
-        st.session_state.processing_query = True
-        st.session_state.query_to_run_next = sq_text_item
-        st.rerun()
 
+# Render chips in a row. Use buttons beneath for accessibility & state handling.
+chip_cols = st.columns([1,1,1])
+for idx, sq in enumerate(suggested_queries_list):
+    with chip_cols[idx]:
+        if st.button(sq, key=f"suggested_{idx}", disabled=st.session_state.processing_query):
+            st.session_state.processing_query = True
+            st.session_state.query_to_run_next = sq
+            st.rerun()
+
+st.markdown('<div style="height:8px"></div>', unsafe_allow_html=True)
 
 # User input section
 user_query = st.chat_input(
@@ -233,6 +389,8 @@ if st.session_state.get("query_to_run_next"):
     st.session_state.query_to_run_next = None  # Clear it so it doesn't run again
     submit_and_process_query(query_to_process, query_to_process)
 
+st.markdown('</div>', unsafe_allow_html=True)
+
 # --- Footer with Licensing Information ---
 st.markdown("---")
 st.caption("""