Update app.py

app.py

@@ -45,7 +45,7 @@ Do not make any attempt to tell a guest that you will email them. I do not have
 # 🎨 Streamlit UI Customization
 st.set_page_config(page_title="Eau Claire AI Chatbot", page_icon="🤖", layout="centered")
 
-# ✅ Custom Styling for Better Readability
+# ✅ Custom Styling
 st.markdown(
     """
     <style>
@@ -92,12 +92,19 @@ st.markdown(
             color: #0077cc; /* Eau Claire AI brand color */
             margin-bottom: 15px;
         }
+
+        .typing-indicator {
+            font-style: italic;
+            color: #999;
+            text-align: left;
+            margin-top: 5px;
+        }
     </style>
     """,
     unsafe_allow_html=True
 )
 
-# ✅ Display Eau Cl•AI•re Logo (Change URL if needed)
+# ✅ Display Eau Cl•AI•re Logo
 logo_url = "https://huggingface.co/spaces/EauClaireAI/Chatbot/resolve/main/Eau%20Cl•AI•re.png"
 st.markdown(f'<div class="logo-container"><img src="{logo_url}" width="200"></div>', unsafe_allow_html=True)
 
@@ -108,7 +115,7 @@ st.markdown('<div class="chat-title">Eau Claire AI - AI Consulting Chatbot</div>
 if "messages" not in st.session_state:
     st.session_state.messages = []
 
-# ✅ Display chat history with formatting
+# ✅ Display chat history
 st.markdown('<div class="chat-container">', unsafe_allow_html=True)
 for message in st.session_state.messages:
     if message["role"] == "user":
@@ -117,33 +124,45 @@ for message in st.session_state.messages:
         st.markdown(f'<div class="ai-message">{message["content"]}</div>', unsafe_allow_html=True)
 st.markdown('</div>', unsafe_allow_html=True)
 
-# ✅ User Input with "Enter" Key to Send
-if "input_text" not in st.session_state:
-    st.session_state["input_text"] = ""
+# ✅ AI Typing Indicator (Only shown if processing)
+if "is_typing" in st.session_state and st.session_state.is_typing:
+    st.markdown('<div class="typing-indicator">AI is typing...</div>', unsafe_allow_html=True)
+
+# ✅ User Input - Works with "Enter" Key & Button
+def handle_message():
+    if st.session_state["input_text"]:
+        user_input = st.session_state["input_text"]
 
-user_input = st.text_input("Type your message here:", value=st.session_state["input_text"], key="input")
+        # ✅ Append user input to chat history
+        st.session_state.messages.append({"role": "user", "content": user_input})
 
-if st.button("Send") and user_input:
-    # ✅ Append user input to chat history
-    st.session_state.messages.append({"role": "user", "content": user_input})
+        # ✅ Show AI is typing indicator
+        st.session_state.is_typing = True
+        st.rerun()
 
-    try:
-        # ✅ Generate AI response with full chat history
-        response = client.chat.completions.create(
-            model="gpt-3.5-turbo",
-            messages=[{"role": "system", "content": system_prompt}] + st.session_state.messages
-        )
+        try:
+            # ✅ Generate AI response
+            response = client.chat.completions.create(
+                model="gpt-3.5-turbo",
+                messages=[{"role": "system", "content": system_prompt}] + st.session_state.messages
+            )
 
-        bot_reply = response.choices[0].message.content.strip()
+            bot_reply = response.choices[0].message.content.strip()
 
-        # ✅ Append AI response to chat history
-        st.session_state.messages.append({"role": "assistant", "content": bot_reply})
+            # ✅ Append AI response to chat history
+            st.session_state.messages.append({"role": "assistant", "content": bot_reply})
 
-        # ✅ Clear the input field by resetting session state
-        st.session_state["input_text"] = ""
+        except Exception as e:
+            st.session_state.messages.append({"role": "assistant", "content": f"Error: {str(e)}"})
 
-        # ✅ Refresh UI
+        # ✅ Reset input field and remove typing indicator
+        st.session_state["input_text"] = ""
+        st.session_state.is_typing = False
         st.rerun()
 
-    except Exception as e:
-        st.error(f"Error: {str(e)}")
+# ✅ Input Field
+user_input = st.text_input("Type your message here:", key="input_text", on_change=handle_message)
+
+# ✅ Send Button (Optional)
+if st.button("Send"):
+    handle_message()