Update app.py

app.py

@@ -9,16 +9,15 @@ from langchain.schema import HumanMessage, SystemMessage, AIMessage
 warnings.filterwarnings("ignore")
 
 # Streamlit settings
-st.set_page_config(page_title="🌿 ArchanaCare 🧙‍♀️", page_icon="🧙‍♀️", layout="centered")
+st.set_page_config(page_title="🌿 ArchanaCare 🧙‍♀️", page_icon="🧙‍♀️", layout="wide")
+
+# Header
 st.markdown("<h1 style='text-align: center; color: #4B0082;'>Welcome to ArchanaCare 🌿✨</h1>", unsafe_allow_html=True)
 st.markdown("<h3 style='color: #003366;'>How can I assist with your ailments or worries today? 🧪💫</h3>", unsafe_allow_html=True)
 
-# Adding vertical space without streamlit_extras
-st.markdown("<br><br>", unsafe_allow_html=True)
-
-# Initialize session state for messages with an introductory message
+# Initialize session state for messages
 if "sessionMessages" not in st.session_state:
-    st.session_state["sessionMessages"] = [
+    st.session_state.sessionMessages = [
         SystemMessage(content="You are a medieval magical healer known for your peculiar sarcasm.")
     ]
 
@@ -32,29 +31,24 @@ llm = ChatGoogleGenerativeAI(
     convert_system_message_to_human=True
 )
 
-# Define a function to create chat bubbles
+# Function to create chat bubbles
 def chat_bubble(message, is_user=True):
     align = 'right' if is_user else 'left'
-    color = '#ADD8E6' if is_user else '#E6E6FA'
-    border_radius = '25px' if is_user else '25px'
+    color = '#E1F5FE' if is_user else '#FFEBEE'
     st.markdown(f"""
     <div style="text-align: {align}; padding: 10px;">
         <span style="display: inline-block; padding: 10px; background-color: {color}; color: black;
-                     border-radius: {border_radius}; max-width: 70%;">
+                     border-radius: 15px; max-width: 70%; word-wrap: break-word;">
             {message}
         </span>
     </div>
     """, unsafe_allow_html=True)
 
-# Response function
+# Function to load answer from the model
 def load_answer(question):
-    # Add user question to the message history
     st.session_state.sessionMessages.append(HumanMessage(content=question))
-    
-    # Get AI's response
     assistant_answer = llm.invoke(st.session_state.sessionMessages)
     
-    # Append AI's answer to the session messages
     if isinstance(assistant_answer, AIMessage):
         st.session_state.sessionMessages.append(assistant_answer)
         return assistant_answer.content
@@ -62,24 +56,24 @@ def load_answer(question):
         st.session_state.sessionMessages.append(AIMessage(content=assistant_answer))
         return assistant_answer
 
-# Capture user input
-def get_text():
-    input_text = st.text_input("You: ", key="input", placeholder="Type your question here...")
-    return str(input_text)
+# Chat history display
+for message in st.session_state.sessionMessages:
+    if isinstance(message, HumanMessage):
+        chat_bubble(message.content, is_user=True)
+    elif isinstance(message, AIMessage):
+        chat_bubble(message.content, is_user=False)
 
-# Main implementation
-user_input = get_text()
-submit = st.button("🌟 Get a Magical Answer 🌟")
+# Input area
+user_input = st.text_input("You: ", key="input", placeholder="Type your question here...")
 
-if submit and user_input:
-    # Display the user's question
-    chat_bubble(user_input, is_user=True)
-    
-    # Load the response and display it as a chat bubble
-    response = load_answer(user_input)
-    chat_bubble(response, is_user=False)
+# Button for submission
+if st.button("🌟 Get a Magical Answer 🌟"):
+    if user_input:
+        chat_bubble(user_input, is_user=True)  # Display user input
+        response = load_answer(user_input)      # Get response
+        chat_bubble(response, is_user=False)    # Display AI response
 
-# Background styling and layout enhancements
+# Background styling
 st.markdown("""
 <style>
     .stApp {
@@ -88,15 +82,17 @@ st.markdown("""
         font-family: Arial, sans-serif;
     }
     input[type="text"] {
-        padding: 8px;
+        padding: 10px;
         border: 2px solid #4B0082;
         border-radius: 15px;
         outline: none;
+        width: 100%;
     }
     button {
         background-color: #4B0082;
         color: white;
         border-radius: 15px;
+        margin-top: 10px;
     }
 </style>
 """, unsafe_allow_html=True)