Update ui_utils.py

ui_utils.py

@@ -10,227 +10,187 @@ from chatbot_new import IntelligentRAGChatbot, InitializationError
 BASE_PATH = os.path.dirname(os.path.abspath(__file__))
 VECTOR_STORE_PATH = os.path.join(BASE_PATH, "vector_stores")
 
-# Diese Funktionen müssen VOR der IntelligentRAGChatbot-Klasse platziert werden
 def apply_enhanced_custom_css():
-    dark_mode = st.checkbox("Dark Mode")  # Checkbox für Dark Mode
-
-    background_dark = "#0a1930"
-    background_light = "#f8fafc"  # Hintergrund für Light Mode
-    text_primary_dark = "#f8fafc"
-    text_primary_light = "#1e293b"  # Textfarbe für Light Mode
-    surface_dark = "rgba(30, 27, 75, 0.5)"
-    surface_light = "rgba(248, 250, 252, 0.5)" # Oberfläche für Light Mode
-
-
-    if dark_mode: # CSS basierend auf dem Dark Mode Status dynamisch erstellen
-        bg_color = background_dark
-        text_color = text_primary_dark
-        surface_color = surface_dark
-    else:
-        bg_color = background_light
-        text_color = text_primary_light
-        surface_color = surface_light
-
-
     st.markdown(
-        f"""
-        <style>
-        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
-
-        :root {{
-            --primary: #06b6d4;
-            --primary-light: #22d3ee;
-            --primary-dark: #0891b2;
-            --background-color: {bg_color}; /* Dynamische Hintergrundfarbe */
-            --surface: {surface_color}; /* Dynamische Oberflächenfarbe */
-            --text-primary: {text_color}; /* Dynamische Textfarbe */
-            --text-secondary: {'#cbd5e1' if dark_mode else '#475569'};
-        }}
-
-        .stApp {
-            background: linear-gradient(145deg, var(--background-color) 0%, {'#164e63' if dark_mode else '#e2e8f0'} 100%) !important;
-            color: var(--text-primary);
-            font-family: 'Plus Jakarta Sans', sans-serif;
-        }
-
-        /* Remove default header */
-        header[data-testid="stHeader"] {
-            display: none;
-        }
-
-        /* Clean up sidebar */
-        section[data-testid="stSidebar"] {
-            background: linear-gradient(180deg, var(--background-dark) 0%, #164e63 100%) !important;
-            border-right: 1px solid rgba(6, 182, 212, 0.1);
-        }
-
-        .stSidebar > div:first-child {
-            padding-top: 2rem;
-        }
-
-        /* Typography */
-        h1 {
-            color: var(--text-primary);
-            text-align: center;
-            font-size: 2.5rem;
-            font-weight: 700;
-            margin-bottom: 2.5rem;
-            letter-spacing: -0.02em;
-            background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 50%, #0891b2 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-
-        /* Chat Messages */
-        .stChatMessage {
-            background: rgba(30, 27, 75, 0.3) !important;
-            backdrop-filter: blur(12px);
-            border: 1px solid rgba(6, 182, 212, 0.1);
-            border-radius: 16px;
-            padding: 1.5rem;
-            margin: 1.5rem 0;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        /* User and Assistant Messages */
-        .stChatMessage[data-testid="user-message"],
-        .stChatMessage[data-testid="assistant-message"] {
-            color: var(--text-primary) !important; /* Weiß */
-        }
-        }
-
-        /* Anpassung der Nachrichtenhintergründe an den Modus */
-        .stChatMessage[data-testid="user-message"] {{
-            background: {'rgba(6, 182, 212, 0.1)' if dark_mode else 'rgba(6, 182, 212, 0.05)'} !important;
-        }}
-        .stChatMessage[data-testid="assistant-message"] {{
-            background: {'rgba(10, 25, 48, 0.7)' if dark_mode else 'rgba(248, 250, 252, 0.7)'} !important;
-            color: {'var(--text-primary)' if dark_mode else '#1e293b'};
-        }}
-
-        /* Enhanced Input Area */
-        .stChatInput {
-            background-color: transparent !important;
-        }
-
-        .stChatInput > div {
-            background-color: transparent !important;
-        }
-
-        div[data-testid="stChatInput"] {
-            background-color: transparent !important;
-        }
-
-        .stTextInput > div {
-            background-color: transparent !important;
-        }
-
-        div[data-testid="textInput"] {
-            background-color: transparent !important;
-        }
-
-        .stTextInput > div > div {
-            background-color: transparent !important;
-        }
-
-        .stTextInput > div > div > input {
-            background: rgba(10, 25, 48, 0.7) !important;
-            color: var(--text-primary);
-            border: 1px solid rgba(6, 182, 212, 0.3);
-            border-radius: 12px;
-            padding: 1rem 1.5rem;
-            font-size: 1rem;
-            font-weight: 500;
-            transition: all 0.2s ease;
-            margin-bottom: 1rem;
-            width: 100%;
-        }
-
-        .stTextInput > div > div > input:focus {
-            border-color: var(--primary);
-            box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
-        }
-
-        /* Chat Input Container Fix */
-        .stChatInputContainer {
-            background-color: transparent !important;
-            border: none !important;
-            padding: 0 !important;
-        }
-
-        section[data-testid="stChatInput"] {
-            background-color: transparent !important;
-            border: none !important;
-            padding: 0 !important;
-        }
-
-        /* Source Details */
-        .streamlit-expanderHeader {
-            background: rgba(6, 182, 212, 0.08);
-            border-radius: 10px;
-            padding: 1rem;
-            border: 1px solid rgba(6, 182, 212, 0.15);
-            transition: all 0.2s ease;
-        }
-
-        /* Copy Button */
-        button[data-testid="baseButton-secondary"] {
-            background: rgba(6, 182, 212, 0.1);
-            color: var(--primary-light);
-            border: 1px solid rgba(6, 182, 212, 0.2);
-            border-radius: 8px;
-            padding: 0.5rem 1rem;
-            font-weight: 500;
-            transition: all 0.2s ease;
-        }
-
-        button[data-testid="baseButton-secondary"]:hover {
-            background: rgba(6, 182, 212, 0.2);
-            border-color: var(--primary);
-        }
-
-        /* Footer Area */
-        footer {
-            visibility: hidden;
-        }
-
-        /* Sidebar Text Size Control */
-        .stSlider {
-            padding: 1rem;
-        }
-
-        .stSlider > div > div > div {
-            background-color: var(--primary) !important;
-        }
-
-        /* Remove Bottom Space */
-        .main .block-container {
-            padding-bottom: 2rem;
-            max-width: 1000px;
-        }
-
-        /* Custom Scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: rgba(10, 25, 48, 0.1);
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: var(--primary);
-            border-radius: 4px;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--primary-light);
-        }
-        </style>
-        """,
-        unsafe_allow_html=True
+    """
+    <style>
+    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
+    /* Color Variables */
+    :root {
+    --primary: #06b6d4;
+    --primary-light: #22d3ee;
+    --primary-dark: #0891b2;
+    --background-dark: #0a1930;
+    --background-light: #1a1f3c;
+    --surface: rgba(30, 27, 75, 0.5);
+    --text-primary: #f8fafc;
+    --text-secondary: #cbd5e1;
+    }
+    /* Base Styles & Navigation Bar Fix */
+    .stApp {
+    background: linear-gradient(145deg, var(--background-dark) 0%, #164e63 100%) !important;
+    color: var(--text-primary);
+    font-family: 'Plus Jakarta Sans', sans-serif;
+    line-height: 1.7;
+    }
+    /* Remove default header */
+    header[data-testid="stHeader"] {
+    display: none;
+    }
+    /* Clean up sidebar */
+    section[data-testid="stSidebar"] {
+    background: linear-gradient(180deg, var(--background-dark) 0%, #164e63 100%) !important;
+    border-right: 1px solid rgba(6, 182, 212, 0.1);
+    }
+    .stSidebar > div:first-child {
+    padding-top: 2rem;
+    }
+    /* Typography */
+    h1 {
+    color: var(--text-primary);
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 2.5rem;
+    letter-spacing: -0.02em;
+    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 50%, #0891b2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    }
+    /* Chat Messages */
+    .stChatMessage {
+    background: rgba(30, 27, 75, 0.3) !important;
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(6, 182, 212, 0.1);
+    border-radius: 16px;
+    padding: 1.5rem;
+    margin: 1.5rem 0;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    /* User and Assistant Messages */
+    .stChatMessage[data-testid="user-message"],
+    .stChatMessage[data-testid="assistant-message"] {
+    color: #ffffff !important; /* Weiß */
+    }
+    /* Message Layout */
+    .stChatMessage[data-testid="user-message"] {
+    background: rgba(6, 182, 212, 0.1) !important;
+    margin-left: 12%;
+    margin-right: 2%;
+    border-left: 3px solid var(--primary);
+    }
+    .stChatMessage[data-testid="assistant-message"] {
+    background: rgba(10, 25, 48, 0.7) !important;
+    margin-right: 12%;
+    margin-left: 2%;
+    border-right: 3px solid var(--primary);
+    }
+    /* Enhanced Input Area */
+    .stChatInput {
+    background-color: transparent !important;
+    }
+    .stChatInput > div {
+    background-color: transparent !important;
+    }
+    div[data-testid="stChatInput"] {
+    background-color: transparent !important;
+    }
+    .stTextInput > div {
+    background-color: transparent !important;
+    }
+    div[data-testid="textInput"] {
+    background-color: transparent !important;
+    }
+    .stTextInput > div > div {
+    background-color: transparent !important;
+    }
+    .stTextInput > div > div > input {
+    background: rgba(10, 25, 48, 0.7) !important;
+    color: var(--text-primary);
+    border: 1px solid rgba(6, 182, 212, 0.3);
+    border-radius: 12px;
+    padding: 1rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    margin-bottom: 1rem;
+    width: 100%;
+    }
+    .stTextInput > div > div > input:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
+    }
+    /* Chat Input Container Fix */
+    .stChatInputContainer {
+    background-color: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+    }
+    section[data-testid="stChatInput"] {
+    background-color: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+    }
+    /* Source Details */
+    .streamlit-expanderHeader {
+    background: rgba(6, 182, 212, 0.08);
+    border-radius: 10px;
+    padding: 1rem;
+    border: 1px solid rgba(6, 182, 212, 0.15);
+    transition: all 0.2s ease;
+    }
+    /* Copy Button */
+    button[data-testid="baseButton-secondary"] {
+    background: rgba(6, 182, 212, 0.1);
+    color: var(--primary-light);
+    border: 1px solid rgba(6, 182, 212, 0.2);
+    border-radius: 8px;
+    padding: 0.5rem 1rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    }
+    button[data-testid="baseButton-secondary"]:hover {
+    background: rgba(6, 182, 212, 0.2);
+    border-color: var(--primary);
+    }
+    /* Footer Area */
+    footer {
+    visibility: hidden;
+    }
+    /* Sidebar Text Size Control */
+    .stSlider {
+    padding: 1rem;
+    }
+    .stSlider > div > div > div {
+    background-color: var(--primary) !important;
+    }
+    /* Remove Bottom Space */
+    .main .block-container {
+    padding-bottom: 2rem;
+    max-width: 1000px;
+    }
+    /* Custom Scrollbar */
+    ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    }
+    ::-webkit-scrollbar-track {
+    background: rgba(10, 25, 48, 0.1);
+    }
+    ::-webkit-scrollbar-thumb {
+    background: var(--primary);
+    border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-light);
+    }
+    </style>
+    """,
+    unsafe_allow_html=True
     )
 
+
 def add_copy_button(text: str, key: str):
     if st.button("📋 Kopieren", key=f"copy_{key}"):
         st.session_state[f"copied_{key}"] = True