style changes

app.py

@@ -82,31 +82,25 @@ if "messages" not in st.session_state:
 if "question_input" not in st.session_state:
     st.session_state.question_input = ""
 
+# --- Initialize session state if not already present ---
+if "asked_ai" not in st.session_state:
+    st.session_state.asked_ai = False
 
-# --- Callback Functions ---
 def handle_ask_ai():
     """Callback function for the 'Ask AI' button."""
-    question = st.session_state.question_input # Get question from state
-    if question: # Proceed only if there is a question
-        # Append user question
+    question = st.session_state.question_input  # Get question from state
+    if question:
+
         st.session_state.messages.append({"role": "user", "content": question})
 
-        # Generate AI response
-        # Use a spinner *outside* the callback if needed, or understand
-        # the UI might briefly freeze if generation is long.
-        # For simplicity here, we generate directly.
         try:
             answer = chatbot.answer_question(question)
-            # Append AI response
             st.session_state.messages.append({"role": "assistant", "content": answer})
         except Exception as e:
             st.error(f"Error getting answer from chatbot: {e}")
-            # Optionally remove the user message if the AI failed
-            # st.session_state.messages.pop()
 
-        # ***** Clear the input state variable AFTER processing *****
-        st.session_state.question_input = ""
-    # No explicit st.rerun() needed here, on_click handles the rerun
+        st.session_state.question_input = ""  # Clear input after processing
+
 
 
 def handle_clear_chat():
@@ -157,24 +151,45 @@ def display_message(role, content):
 for message in st.session_state.messages:
     display_message(message["role"], message["content"])
 
-# --- User Input ---
-# This widget's value is controlled by st.session_state.question_input
-st.text_area(
-    "Ask a question about Zega AI:",
-    height=100,
-    key="question_input", # Links to st.session_state.question_input
-    on_change=handle_ask_ai
-)
-
-# --- Chat Actions ---
-col1, col2 = st.columns([3, 1])
-with col1:
-    # Attach the callback function to the button's on_click parameter
-    st.button("💬 Ask AI", on_click=handle_ask_ai)
-with col2:
-    # Attach the callback function to the button's on_click parameter
-    st.button("🗑️ Clear Chat", on_click=handle_clear_chat)
-
-# --- No processing logic needed here anymore ---
-# The callbacks handle the logic when the buttons are clicked.
-# Streamlit automatically reruns after a callback, updating the UI.
+# --- Chat Input using st.chat_input (Handles Enter automatically) ---
+prompt = st.chat_input("Ask a question about Zega AI:")
+if prompt:
+    # 1. Add user message to chat history immediately
+    st.session_state.messages.append({"role": "user", "content": prompt})
+
+    # 2. Display the user message (using your existing function)
+    display_message("user", prompt)
+
+    # 3. Get and display AI response
+    try:
+        with st.spinner("Thinking..."): # Optional: Add spinner for feedback
+            answer = chatbot.answer_question(prompt)
+        st.session_state.messages.append({"role": "assistant", "content": answer})
+        # Display the assistant message immediately after getting it
+        display_message("assistant", answer)
+    except Exception as e:
+        st.error(f"Error getting answer from chatbot: {e}")
+        # Optionally add an error message to the chat history
+        # st.session_state.messages.append({"role": "assistant", "content": f"Sorry, an error occurred: {e}"})
+        # display_message("assistant", f"Sorry, an error occurred: {e}")
+
+    # No need to manually clear st.session_state.question_input
+    # st.chat_input handles its state internally upon submission.
+    # Streamlit automatically reruns after processing the input block.
+
+# --- Clear Chat Button (Keep this separate) ---
+# Place it where you want it, maybe in the sidebar or below the chat input
+st.markdown("""
+    <style>
+    .stButton > button {
+        color: white !important;
+        background-color: #ff4b4b; /* optional: red background for the trash button */
+    }
+    </style>
+    """, unsafe_allow_html=True)
+if st.sidebar.button("🗑️ Clear Chat"):
+    st.session_state.messages = []
+    if 'chatbot' in globals() and hasattr(chatbot, 'clear_conv_history'):
+        chatbot.clear_conv_history()
+    # st.session_state.question_input is no longer used, so no need to clear it
+    st.rerun() # Rerun to reflect the cleared chat visually

style.css

@@ -73,4 +73,4 @@ button:focus,
 /* Other fonts */
 [class^="st-emotion-cache-"] {
   font-family: 'Inter Tight', Arial, Helvetica, sans-serif !important;
-}
+}