Update app.py

app.py

@@ -9,8 +9,10 @@ if "chat_history" not in st.session_state:
     st.session_state.chat_history = [
         {"role": "system", "content": "you are a helpful assistant. Take the input from the users and try to provide as detailed response as possible. Provide proper examples to help the user. Try to mention references or provide citations to make it more detail-oriented."}
     ]
+if "previous_sessions" not in st.session_state:
+    st.session_state.previous_sessions = []
 
-# Define function to fetch response
+# Function to fetch response
 def fetch_response(user_input):
     client = Groq(api_key=GROQ_API_KEY)
     st.session_state.chat_history.append({"role": "user", "content": user_input})
@@ -62,6 +64,26 @@ st.markdown(
         padding: 1rem;
         font-size: 1rem;
     }
+    .chat-container {
+        padding-bottom: 50px;
+    }
+    .chat-input {
+        position: fixed;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 50%;
+        background: linear-gradient(145deg, #5e5e87, #4a4a6c);
+        box-shadow: inset 8px 8px 16px #29293f, inset -8px -8px 16px #3a3a56;
+        border: none;
+        border-radius: 12px;
+        color: #e1e1e1;
+        padding: 1rem;
+        font-size: 1rem;
+    }
+    .previous-sessions {
+        color: #e1e1e1;
+    }
     footer {
         color: #e1e1e1;
         font-size: small;
@@ -73,30 +95,55 @@ st.markdown(
     unsafe_allow_html=True
 )
 
+# Sidebar for previous sessions
+st.sidebar.title("Previous Sessions")
+st.sidebar.markdown("<div class='previous-sessions'>", unsafe_allow_html=True)
+for i, session in enumerate(st.session_state.previous_sessions):
+    if st.sidebar.button(f"Session {i + 1}"):
+        st.session_state.chat_history = session
+st.sidebar.markdown("</div>", unsafe_allow_html=True)
+
 st.title("Fastest AI Chatbot")
 st.write("Ask a question and get a response.")
 
-# Function to display chat history
-def display_chat_history():
-    for chat in st.session_state.chat_history:
-        if chat["role"] == "user":
-            st.markdown(f"**You:** {chat['content']}")
-        elif chat["role"] == "assistant":
-            st.markdown(f"**AI:** {chat['content']}")
-
 # Display chat history
-display_chat_history()
+st.markdown("<div class='chat-container'>", unsafe_allow_html=True)
+for chat in st.session_state.chat_history:
+    if chat["role"] == "user":
+        st.markdown(f"**You:** {chat['content']}")
+    elif chat["role"] == "assistant":
+        st.markdown(f"**AI:** {chat['content']}")
+st.markdown("</div>", unsafe_allow_html=True)
 
 # Text input for user's question
-user_input = st.text_input("Enter your question here:", key="input")
+user_input = st.text_input("Enter your question here:", key="input", label_visibility='collapsed', placeholder='Type your message here...')
 
 # Button to trigger response
-if st.button("Get Response"):
+if st.button("Get Response", key="get_response"):
     if user_input:
         # Fetch and display response
-        response = fetch_response(user_input)
+        fetch_response(user_input)
         st.experimental_rerun()
 
+# Save session state when user leaves
+if st.button("Save Session"):
+    st.session_state.previous_sessions.append(st.session_state.chat_history)
+    st.session_state.chat_history = [
+        {"role": "system", "content": "you are a helpful assistant. Take the input from the users and try to provide as detailed response as possible. Provide proper examples to help the user. Try to mention references or provide citations to make it more detail-oriented."}
+    ]
+    st.experimental_rerun()
+
+# Display the permanent input field at the bottom center
+st.markdown(
+    """
+    <div class="chat-input">
+        <input type="text" id="chat-input-field" placeholder="Type your message here..." onkeydown="if(event.key === 'Enter'){document.getElementById('chat-submit-button').click();}">
+        <button id="chat-submit-button" onclick="document.querySelector('button[kind=primary][key=get_response]').click();">Send</button>
+    </div>
+    """,
+    unsafe_allow_html=True
+)
+
 # Footer
 st.markdown(
     """