Fixing the UI

main.py

@@ -4,7 +4,8 @@ import gradio as gr
 import base64
 from src.manager.manager import GeminiManager, Mode
 from enum import Enum
-import os, base64
+import os
+import base64
 from dotenv import load_dotenv
 from fastapi import FastAPI, Request, Depends
 from fastapi.responses import RedirectResponse, JSONResponse, FileResponse
@@ -13,14 +14,15 @@ from starlette.middleware.sessions import SessionMiddleware
 from authlib.integrations.starlette_client import OAuth
 import requests
 from src.manager.manager import GeminiManager
+import argparse
 
 # 1. Load environment --------------------------------------------------
 load_dotenv()
-AUTH0_DOMAIN        = os.getenv("AUTH0_DOMAIN")
-AUTH0_CLIENT_ID     = os.getenv("AUTH0_CLIENT_ID")
+AUTH0_DOMAIN = os.getenv("AUTH0_DOMAIN")
+AUTH0_CLIENT_ID = os.getenv("AUTH0_CLIENT_ID")
 AUTH0_CLIENT_SECRET = os.getenv("AUTH0_CLIENT_SECRET")
-AUTH0_AUDIENCE      = os.getenv("AUTH0_AUDIENCE")
-SESSION_SECRET_KEY  = os.getenv("SESSION_SECRET_KEY", "replace‑me")
+AUTH0_AUDIENCE = os.getenv("AUTH0_AUDIENCE")
+SESSION_SECRET_KEY = os.getenv("SESSION_SECRET_KEY", "replace-me")
 
 # 2. Auth0 client ------------------------------------------------------
 oauth = OAuth()
@@ -54,18 +56,22 @@ app.add_middleware(
 
 # 4. Auth routes -------------------------------------------------------
 # Dependency to get the current user
+
+
 def get_user(request: Request):
     user = request.session.get('user')
     if user:
         return user['name']
     return None
 
+
 @app.get('/')
-def public(request: Request, user = Depends(get_user)):
+def public(request: Request, user=Depends(get_user)):
     if user:
-        return RedirectResponse("/gradio")
+        return RedirectResponse("/hashiru")
     else:
-        return RedirectResponse("/main")
+        return RedirectResponse("/login-page")
+
 
 @app.get("/login")
 async def login(request: Request):
@@ -73,6 +79,7 @@ async def login(request: Request):
     print("Session data:", dict(request.session))
     return await oauth.auth0.authorize_redirect(request, request.url_for("auth"), audience=AUTH0_AUDIENCE, prompt="login")
 
+
 @app.get("/auth")
 async def auth(request: Request):
     try:
@@ -82,6 +89,7 @@ async def auth(request: Request):
     except Exception as e:
         return JSONResponse({"error": str(e)}, status_code=500)
 
+
 @app.get("/logout")
 async def logout(request: Request):
     auth0_logout_url = (
@@ -91,11 +99,13 @@ async def logout(request: Request):
     )
     return RedirectResponse(auth0_logout_url)
 
+
 @app.get("/post-logout")
 async def post_logout(request: Request):
     request.session.clear()
     return RedirectResponse("/")
 
+
 @app.get("/manifest.json")
 async def manifest():
     return JSONResponse({
@@ -106,6 +116,7 @@ async def manifest():
         "display": "standalone"
     })
 
+
 @app.get("/api/login-status")
 async def api_login_status(request: Request):
     if "user" in request.session:
@@ -124,7 +135,6 @@ _header_html = f"""
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
-    width: 30%;
 ">
   <img src="data:image/png;base64,{_logo_b64}" width="40" class="logo"/>
   <h1>
@@ -136,121 +146,6 @@ css = """
 .logo {
     margin-right: 20px;
 }
-.login-status {
-    font-weight: bold;
-    margin-right: 20px;
-    padding: 8px;
-    border-radius: 4px;
-    background-color: #f0f0f0;
-}
-
-/* Profile style improvements */
-.profile-container {
-    position: relative;
-    display: inline-block;
-    float: right;
-    margin-right: 20px;
-    z-index: 9999; /* Ensure this is higher than any other elements */
-}
-
-#profile-name {
-    background-color: transparent; /* Transparent background */
-    color: #f97316; /* Orange text */
-    font-weight: bold;
-    padding: 10px 14px;
-    border-radius: 6px;
-    cursor: pointer;
-    user-select: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 40px;
-    min-height: 40px;
-    border: 2px solid #f97316; /* Add border */
-}
-
-#profile-menu {
-    position: fixed; /* Changed from absolute to fixed for better overlay */
-    right: auto; /* Let JS position it precisely */
-    top: auto; /* Let JS position it precisely */
-    background-color: transparent;
-    border: 1px solid transparent;
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-    z-index: 10000; /* Very high z-index to ensure it's on top */
-    overflow: visible;
-    width: 160px;
-}
-
-#profile-menu.hidden {
-    display: none;
-}
-
-#profile-menu button {
-    background-color: #f97316; /* Orange background */
-    border: none;
-    color: white; /* White text */
-    font-size: 16px;
-    border-radius: 8px;
-    text-align: left;
-    width: 100%;
-    padding: 12px 16px;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-    display: block;
-}
-
-#profile-menu button:hover {
-    background-color: #ea580c; /* Darker orange on hover */
-}
-
-#profile-menu button .icon {
-    margin-right: 8px;
-    color: white; /* White icon color */
-}
-
-/* Fix dropdown issues */
-input[type="text"], select {
-    color: black !important;
-}
-
-/* Optional: limit dropdown scroll if options are long */
-.gr-dropdown .gr-dropdown-options {
-    max-height: 200px;
-    overflow-y: auto;
-}
-
-/* User avatar styles */
-.user-avatar {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: bold;
-    text-transform: uppercase;
-    font-size: 20px; /* Larger font size */
-    color: #f97316; /* Orange color */
-}
-
-/* Fix for gradio interface */
-.gradio-container {
-    overflow: visible !important;
-}
-
-/* Fix other container issues that might cause scrolling */
-body, html {
-    overflow-x: hidden; /* Prevent horizontal scrolling */
-}
-
-#gradio-app, .gradio-container .overflow-hidden {
-    overflow: visible !important; /* Override any overflow hidden that might interfere */
-}
-
-/* Ensure dropdown appears above everything */
-.profile-container * {
-    z-index: 9999;
-}
 """
 
 
@@ -270,17 +165,16 @@ def run_model(message, history):
     for messages in model_manager.run(history):
         yield "", messages
 
+
 with gr.Blocks() as login:
-    btn = gr.Button("Login")
-    _js_redirect = """
-    () => {
-        url = '/login' + window.location.search;
-        window.open(url, '_blank');
-    }
-    """
-    btn.click(None, js=_js_redirect)
+    btn = gr.Button("Login", link="/login")
 
-app = gr.mount_gradio_app(app, login, path="/main")
+app = gr.mount_gradio_app(app, login, path="/login-page")
+
+parser = argparse.ArgumentParser()
+parser.add_argument('--no-auth', action='store_true')
+args, unknown = parser.parse_known_args()
+no_auth = args.no_auth
 
 with gr.Blocks(css=css, fill_width=True, fill_height=True) as demo:
     model_manager = GeminiManager(
@@ -293,30 +187,22 @@ with gr.Blocks(css=css, fill_width=True, fill_height=True) as demo:
 
     with gr.Column(scale=1):
         with gr.Row(scale=0):
-            gr.Markdown(_header_html)
+            with gr.Column(scale=0):
+                gr.Markdown(_header_html)
+                gr.Button("Logout", link="/logout")
             
-            with gr.Column(scale=1, min_width=250):
-                profile_html = gr.HTML(value="""
-                <div class="profile-container">
-                    <div id="profile-name" class="user-avatar">G</div>
-                    <div id="profile-menu" class="hidden">
-                        <button id="login-btn" onclick="window.location.href='/login'"><span class="icon">🔐</span> Login</button>
-                        <button id="logout-btn" onclick="window.location.href='/logout'"><span class="icon">🚪</span> Logout</button>
-                    </div>
-                </div>
-                """)
-        with gr.Column():    
-            model_dropdown = gr.Dropdown(
-                choices=[mode.name for mode in Mode],
-                value=model_manager.get_current_modes,
-                interactive=True,
-                type="index",
-                multiselect=True,
-                label="Select Modes",
-            )
-
-            model_dropdown.change(
-                fn=update_model, inputs=model_dropdown, outputs=[])
+            with gr.Column(scale=1):
+                model_dropdown = gr.Dropdown(
+                    choices=[mode.name for mode in Mode],
+                    value=model_manager.get_current_modes,
+                    interactive=True,
+                    type="index",
+                    multiselect=True,
+                    label="Select Modes",
+                )
+
+                model_dropdown.change(
+                    fn=update_model, inputs=model_dropdown, outputs=[])
         with gr.Row(scale=1):
             chatbot = gr.Chatbot(
                 avatar_images=("HASHIRU_2.png", "HASHIRU.png"),
@@ -335,92 +221,12 @@ with gr.Blocks(css=css, fill_width=True, fill_height=True) as demo:
                              editable=True,
                              multimodal=True,)
 
-    demo.load(None, None, None, js="""
-    async () => {
-        const profileBtn = document.getElementById("profile-name");
-        const profileMenu = document.getElementById("profile-menu");
-        const loginBtn = document.getElementById("login-btn");
-        const logoutBtn = document.getElementById("logout-btn");
-        
-        // Position menu and handle positioning
-        function positionMenu() {
-            const btnRect = profileBtn.getBoundingClientRect();
-            profileMenu.style.position = "fixed";
-            profileMenu.style.top = (btnRect.bottom + 5) + "px";
-            profileMenu.style.left = (btnRect.right - profileMenu.offsetWidth) + "px"; // Align with right edge
-        }
-        
-        // Close menu when clicking outside
-        document.addEventListener('click', (event) => {
-            if (!profileBtn.contains(event.target) && !profileMenu.contains(event.target)) {
-                profileMenu.classList.add("hidden");
-            }
-        });
-        
-        // Toggle menu
-        profileBtn.onclick = (e) => {
-            e.stopPropagation();
-            positionMenu(); // Position before showing
-            profileMenu.classList.toggle("hidden");
-            
-            // If showing menu, make sure it's positioned correctly
-            if (!profileMenu.classList.contains("hidden")) {
-                setTimeout(positionMenu, 0); // Reposition after render
-            }
-        }
-        
-        // Handle window resize
-        window.addEventListener('resize', () => {
-            if (!profileMenu.classList.contains("hidden")) {
-                positionMenu();
-            }
-        });
-        
-        // Get initial letter for avatar
-        function getInitial(name) {
-            if (name && name.length > 0) {
-                return name.charAt(0);
-            }
-            return "?";
-        }
-        
-        try {
-            const res = await fetch('/api/login-status', { credentials: 'include' });
-            const data = await res.json();
-            
-            if (!data.status.includes("Logged out")) {
-                const name = data.status.replace("Logged in: ", "");
-                profileBtn.innerHTML = `<div class="user-avatar">${getInitial(name)}</div>`;
-                profileBtn.title = name;
-                loginBtn.style.display = "none";
-                logoutBtn.style.display = "block";
-            } else {
-                profileBtn.innerHTML = `<div class="user-avatar">G</div>`;
-                profileBtn.title = "Guest";
-                loginBtn.style.display = "block";
-                logoutBtn.style.display = "none";
-            }
-        } catch (error) {
-            console.error("Error fetching login status:", error);
-            profileBtn.innerHTML = `<div class="user-avatar">?</div>`;
-            profileBtn.title = "Login status unknown";
-        }
-    }
-    """)
-
-app = gr.mount_gradio_app(app, demo, path="/gradio",auth_dependency=get_user)
+app = gr.mount_gradio_app(app, demo, path="/hashiru", auth_dependency=get_user)
 
 if __name__ == "__main__":
     import uvicorn
-    import argparse
-    
-    parser = argparse.ArgumentParser()
-    parser.add_argument('--no-auth', action='store_true')
-    args = parser.parse_args()
-    no_auth = args.no_auth
-    
+
     if no_auth:
         demo.launch()
     else:
         uvicorn.run(app, host="0.0.0.0", port=7860)
-        

src/manager/manager.py

@@ -305,12 +305,13 @@ class GeminiManager:
             yield messages
 
         # Attach the function call response to the messages
-        if response.candidates[0].content and response.candidates[0].content.parts:
-            # messages.append(response.candidates[0].content)
-            messages.append({
-                "role": "function_call",
-                "content": repr(response.candidates[0].content),
-            })
+        for candidate in response.candidates:
+            if candidate.content and candidate.content.parts:
+                # messages.append(response.candidates[0].content)
+                messages.append({
+                    "role": "function_call",
+                    "content": repr(candidate.content),
+                })
 
         # Invoke the function calls if any and attach the response to the messages
         if response.function_calls: