chatbot adjustments

app_pages/chatbot.py

@@ -5,28 +5,146 @@ import requests
 RASA_URL = "http://localhost:5005/webhooks/rest/webhook"
 
 def app():
-    st.title("Chat with Job Assistance Bot")
-    st.subheader("Type your message below to interact with the bot:")
+    st.title("Job Assistance Chatbot")
 
-    # User input for the chatbot
-    user_input = st.text_input("You: ", placeholder="Ask about jobs, locations, or anything else.")
+    # Initialize session state for chat history
+    if "messages" not in st.session_state:
+        st.session_state.messages = []
 
-    if st.button("Send"):
+    # Custom CSS for layout and styling
+    st.markdown("""
+        <style>
+        body, .stApp {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            margin: 0;
+        }
+
+        .chat-container {
+            flex-grow: 1;
+            overflow-y: auto;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            background-color: #f5f5f5;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .message-wrapper {
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 10px;
+        }
+
+        .bot-message, .user-message {
+            max-width: 70%;
+            padding: 10px;
+            border-radius: 15px;
+            align-self: flex-start;
+        }
+
+        .bot-message {
+            background-color: #e2e3e5;
+            color: black;
+        }
+
+        .user-message {
+            background-color: #d1e7dd;
+            color: black;
+            align-self: flex-end;
+        }
+
+        .input-container {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            background-color: white;
+            box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
+            z-index: 1000;
+        }
+
+        .stTextInput {
+            flex-grow: 1;
+            margin-right: 10px;
+        }
+        </style>
+        """, unsafe_allow_html=True)
+
+    # Chat messages display area
+    chat_container = st.empty()
+    with chat_container.container():
+        for message in st.session_state.messages:
+            st.markdown(
+                f'<div class="message-wrapper">'
+                f'<div class="{"user" if message["sender"] == "user" else "bot"}-message">{message["text"]}</div>'
+                f'</div>', 
+                unsafe_allow_html=True
+            )
+
+    # Input container
+    with st.container():
+        # Create a form to handle enter key submission
+        with st.form(key='chat_form', clear_on_submit=True):
+            col1, col2 = st.columns([4, 1])
+            
+            with col1:
+                # Text input field
+                user_input = st.text_input(
+                    "Type your message here:", 
+                    "", 
+                    key="message_input",
+                    label_visibility="collapsed"
+                )
+            
+            with col2:
+                # Send button inside the form
+                submit_button = st.form_submit_button("Send")
+
+    # Message handling logic
+    if submit_button or st.session_state.get('submitted', False):
         if user_input.strip():
+            # Add user message
+            st.session_state.messages.append({"sender": "user", "text": user_input.strip()})
+
+            # Send message to Rasa chatbot
             try:
-                # Send user message to Rasa
                 response = requests.post(
                     RASA_URL,
-                    json={"sender": "user", "message": user_input.strip()}
+                    json={"sender": "user", "message": user_input.strip()},
                 )
-
                 if response.status_code == 200:
                     bot_responses = response.json()
                     for bot_response in bot_responses:
-                        st.write(f"Bot: {bot_response.get('text', '...')}")
+                        st.session_state.messages.append(
+                            {"sender": "bot", "text": bot_response.get("text", "...")}
+                        )
                 else:
-                    st.error("The chatbot is currently unavailable. Please try again later.")
+                    st.session_state.messages.append(
+                        {"sender": "bot", "text": "Sorry, I couldn't respond at this moment."}
+                    )
             except Exception as e:
-                st.error(f"Error connecting to the chatbot: {e}")
-        else:
-            st.warning("Please type a message to send to the bot.")
+                st.session_state.messages.append(
+                    {"sender": "bot", "text": f"Error: {e}"}
+                )
+
+            # Rerun to refresh the chat container and scroll to bottom
+            st.experimental_rerun()
+
+    # Auto-scroll script
+    st.markdown("""
+        <script>
+        const chatContainer = document.querySelector('.chat-container');
+        if (chatContainer) {
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+        </script>
+        """, unsafe_allow_html=True)
+        
+if __name__ == "__main__":
+    app()
\ No newline at end of file