Streamlit UI Frontend version 1.0.0

frontend/app.py

@@ -1,2 +1,27 @@
 # Path: frontend/app.py
-# Main application file for the frontend, setting up the app and routing.
+# Main application file for the frontend, setting up the app and routing.
+import streamlit as st
+from components import auth, sidebar, chat
+
+st.set_page_config(page_icon=":material/sql:", page_title="NL2SQL Assistant", layout="wide")
+
+# Initialize global session state variables
+if 'user_id' not in st.session_state:
+    st.session_state['user_id'] = None
+if 'guest_mode' not in st.session_state:
+    st.session_state['guest_mode'] = False
+if 'current_session_id' not in st.session_state:
+    st.session_state['current_session_id'] = None
+if 'messages' not in st.session_state:
+    st.session_state['messages'] = []
+
+def main():
+    if st.session_state['user_id'] is None and not st.session_state['guest_mode']:
+        # User not logged in, show authentication page
+        auth.render_auth()
+    else:
+        sidebar.render_sidebar()
+        chat.render_chat_interface()
+
+if __name__ == "__main__":
+    main()

frontend/components/auth.py

@@ -1,2 +1,33 @@
 # Path: frontend/components/auth.py
-# Authentication component for handling user login and registration.
+# Authentication component for handling user login and registration.
+import streamlit as st
+from utils import api
+
+def render_auth():
+    st.title("Welcome to NL2SQL Assistant Demo")
+    tab_login, tab_signup = st.tabs(["Login", "Sign Up"])
+
+    with tab_login:
+        with st.form("login_form"):
+            email = st.text_input("Email")
+            password = st.text_input("Password", type="password")
+            if st.form_submit_button("Login"):
+                response = api.user_login(email, password)
+                if response.get("success"):
+                    st.session_state['user_id'] = response.get("user_id")
+                    st.rerun()
+                else:
+                    st.error("Invalid email or password. Please try again.")
+    
+    with tab_signup:
+        with st.form("signup_form"):
+            email = st.text_input("Email")
+            new_password = st.text_input("Password", type="password")
+            if st.form_submit_button("Sign Up"):
+                st.success("Account created successfully! Plase login to continue.")
+    
+    st.divider()
+    st.markdown("Or continue as a guest:")
+    if st.button("Continue as Guest", use_container_width=True):
+        st.session_state['guest_mode'] = True
+        st.rerun()

frontend/components/chat.py

@@ -1,2 +1,51 @@
 # Path: frontend/components/chat.py
-# Chat component for handling user interactions and displaying chat history.
+# Chat component for handling user interactions and displaying chat history.
+import streamlit as st
+import pandas as pd
+from utils import api
+
+def render_chat_interface():
+    st.title(":material/sql: NL2SQL Assistant")
+    
+    # Render existing messages
+    for msg in st.session_state['messages']:
+        with st.chat_message(msg["role"]):
+            st.markdown(msg["content"])
+            if "sql" in msg and msg["sql"]:
+                st.code(msg["sql"], language="sql")
+            if "data" in msg and msg["data"]:
+                st.dataframe(pd.DataFrame(msg["data"]))
+    
+    # Input area for new messages
+    if prompt := st.chat_input("Ask a question about your database (e.g., 'Show me top revenue in 2020')"):
+        # Display user prompt
+        st.session_state['messages'].append({"role": "user", "content": prompt})
+        with st.chat_message("user"):
+            st.markdown(prompt)
+
+        # Process and get assistant response
+        with st.chat_message("assistant"):
+            with st.spinner("Executing LangChain pipeline for RAG-based schema retrieval..."):
+                response = api.send_chat_message(
+                    user_id = st.session_state['user_id'],
+                    session_id = st.session_state.get('current_session_id'),
+                    message = prompt
+                )
+
+                # Render results
+                st.markdown(response.get("answer", "Generated SQL based on the query:"))
+                st.code(response["sql"], language="sql")
+                if response.get("data"):
+                    st.dataframe(pd.DataFrame(response["data"]))
+
+                # Save conversations to session state
+                st.session_state['messages'].append({
+                    "role": "assistant",
+                    "content": response.get("answer", ""),
+                    "sql": response["sql"],
+                    "data": response.get("data")
+                })
+
+                # Save session ID automatically if user is authenticated and it's a new session
+                if not st.session_state['guest_mode'] and st.session_state['current_session_id'] is None:
+                    st.session_state['current_session_id'] = response.get("session_id")

frontend/components/sidebar.py

@@ -1,2 +1,49 @@
 # Path: frontend/components/sidebar.py
-# Sidebar component for navigation and additional options.
+# Sidebar component for navigation and additional options.
+import streamlit as st
+from utils import api
+
+def render_sidebar():
+    with st.sidebar:
+        if st.button(":material/add: New Chat", use_container_width=True):
+            st.session_state['current_session_id'] = None
+            st.session_state['messages'] = []
+            st.rerun()
+        st.divider()
+
+        # Guest View
+        if st.session_state['guest_mode']:
+            st.info("You are in Guest Mode. Your conversation history will not be saved.")
+            st.write("Create an account to save your queries.")
+            if st.button("Log In / Sign Up", use_container_width=True):
+                st.session_state['guest_mode'] = False
+                st.rerun()
+        # Authenticated User View
+        else:
+            st.header(":material/history: History")
+            # Fetch history
+            history = api.get_user_history(st.session_state['user_id'])
+
+            for time_label, sessions in history.items():
+                if sessions:
+                    st.caption(time_label)
+                    for session in sessions:
+                        col1, col2 = st.columns([5, 1])
+
+                        with col1:
+                            if st.button(f":material/chat_bubble: {session['title'][:20]}", key=f"sel_{session['id']}", use_container_width=True):
+                                st.session_state['current_session_id'] = session['id']
+                                st.session_state['messages'] = api.get_session_messages(session['id'])
+                                st.rerun()
+                        with col2:
+                            if st.button(":material/delete:", key=f"del_{session['id']}", help="Delete Chat History"):
+                                if api.del_conversation(session['id']):
+                                    if st.session_state['current_session_id'] == session['id']:
+                                        st.session_state['current_session_id'] = None
+                                        st.session_state['messages'] = []
+                                    st.rerun()
+            st.divider()
+            if st.button(":material/logout: Logout", use_container_width=True):
+                st.session_state['user_id'] = None
+                st.session_state['messages'] = []
+                st.rerun()