Update app.py

app.py

@@ -55,24 +55,15 @@ st.markdown(
         font-size: 1.2rem;
         margin-top: 1rem;
     }
-    .stTextInput>div>div>input {
-        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;
-    }
     .chat-container {
-        padding-bottom: 50px;
+        padding-bottom: 100px;
     }
     .chat-input {
         position: fixed;
         bottom: 0;
         left: 50%;
         transform: translateX(-50%);
-        width: 50%;
+        width: 60%;
         background: linear-gradient(145deg, #5e5e87, #4a4a6c);
         box-shadow: inset 8px 8px 16px #29293f, inset -8px -8px 16px #3a3a56;
         border: none;
@@ -80,6 +71,25 @@ st.markdown(
         color: #e1e1e1;
         padding: 1rem;
         font-size: 1rem;
+        display: flex;
+        align-items: center;
+    }
+    .chat-input input {
+        flex: 1;
+        background: transparent;
+        border: none;
+        color: inherit;
+        font-size: inherit;
+        padding: 0;
+        margin: 0;
+    }
+    .chat-input button {
+        background: transparent;
+        border: none;
+        color: inherit;
+        font-size: inherit;
+        margin-left: 1rem;
+        cursor: pointer;
     }
     .previous-sessions {
         color: #e1e1e1;
@@ -90,6 +100,18 @@ st.markdown(
         text-align: right;
         margin-top: 2rem;
     }
+    .save-session {
+        position: fixed;
+        bottom: 10px;
+        right: 10px;
+        background: linear-gradient(145deg, #5e5e87, #4a4a6c);
+        box-shadow: 8px 8px 16px #29293f, -8px -8px 16px #3a3a56;
+        border: none;
+        border-radius: 12px;
+        color: #e1e1e1;
+        padding: 0.5rem 2rem;
+        font-size: 1rem;
+    }
     </style>
     """,
     unsafe_allow_html=True
@@ -115,35 +137,45 @@ for chat in st.session_state.chat_history:
         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", label_visibility='collapsed', placeholder='Type your message here...')
-
-# Button to trigger response
-if st.button("Get Response", key="get_response"):
-    if user_input:
-        # Fetch and display response
-        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
+# Custom input field
 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>
+        <button id="chat-submit-button" onclick="sendChat()">Send</button>
     </div>
+    <script>
+    function sendChat() {
+        const inputField = document.getElementById('chat-input-field');
+        const message = inputField.value;
+        if (message) {
+            inputField.value = '';
+            fetch('/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ 'user_input': message })
+            }).then(response => {
+                if (response.ok) {
+                    location.reload();
+                }
+            });
+        }
+    }
+    </script>
     """,
     unsafe_allow_html=True
 )
 
+# Save session button
+if st.button("Save Session", key="save_session", help="Save the current chat session", class_="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()
+
 # Footer
 st.markdown(
     """
@@ -156,3 +188,4 @@ st.markdown(
 
 
 
+