Update app.py

app.py

@@ -71,7 +71,7 @@ def build_prompt(latest_input: str, previous_interactions: List[Interaction]) ->
     return prepared_prompt
 
 # Set the page config for Streamlit
-st.set_page_config(page_title="AI Chatbot", page_icon="🤖", layout="wide")
+st.set_page_config(page_title="LUNA AI", page_icon="🤖", layout="wide")
 
 # Add premium CSS styling with the new blue color palette
 st.markdown("""
@@ -90,6 +90,28 @@ st.markdown("""
         font-size: 28px;
         font-weight: bold;
         border-bottom: 1px solid #0FA4AF; /* Lighter blue border */
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .header .title {
+        margin-left: 20px;
+    }
+
+    .header .nav-buttons {
+        margin-right: 20px;
+    }
+
+    .header .nav-buttons a {
+        color: #AFDDE5;
+        text-decoration: none;
+        font-size: 16px;
+        margin: 0 10px;
+    }
+
+    .header .nav-buttons a:hover {
+        text-decoration: underline;
     }
 
     .chat-box {
@@ -174,11 +196,75 @@ st.markdown("""
         font-size: 20px;
         font-weight: bold;
     }
+
+    .footer {
+        background-color: #024950;  /* Medium blue background for footer */
+        padding: 20px;
+        text-align: center;
+        color: #AFDDE5;             /* Light blue text in the footer */
+        border-top: 1px solid #0FA4AF; /* Lighter blue border */
+    }
+
+    .feedback-button {
+        background-color: #0FA4AF;  /* Aqua blue button color */
+        color: #003135;            /* Dark blue text on button */
+        border: none;
+        border-radius: 20px;
+        padding: 10px 20px;
+        cursor: pointer;
+        font-size: 16px;
+        margin: 10px;
+    }
+
+    .feedback-popup {
+        display: none;
+        position: fixed;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: #024950;
+        border: 1px solid #0FA4AF;
+        border-radius: 8px;
+        padding: 20px;
+        width: 300px;
+        z-index: 1000;
+    }
+
+    .feedback-popup button {
+        background-color: #0FA4AF;
+        color: #003135;
+        border: none;
+        border-radius: 20px;
+        padding: 10px 20px;
+        cursor: pointer;
+        font-size: 16px;
+        margin-top: 10px;
+    }
+
+    .feedback-popup button:hover {
+        background-color: #024950;
+    }
+
+    .feedback-popup textarea {
+        width: 100%;
+        border-radius: 8px;
+        border: 1px solid #0FA4AF;
+        padding: 10px;
+        margin-bottom: 10px;
+    }
 </style>
 """, unsafe_allow_html=True)
 
-# Header and container for chat messages
-st.markdown('<div class="header">✨Luna✨<br>Your Friendly Digital Assistant chatbot!😊</div>', unsafe_allow_html=True)
+# Header with title and navigation buttons
+st.markdown("""
+<div class="header">
+    <div class="title">✨LUNA AI✨</div>
+    <div class="nav-buttons">
+        <a href="#home">Home</a>
+        <a href="#about">About</a>
+    </div>
+</div>
+""", unsafe_allow_html=True)
 
 # Container for chat messages and input area
 with st.container():
@@ -190,8 +276,7 @@ with st.container():
     st.markdown(
         '''
         <div class="subheader">
-            Meet Luna,your friendly Ai assistant ready to help you in any language! 🌐💬 
-            
+            Meet Luna, your friendly AI assistant ready to help you in any language! 🌐💬 
         </div>
         ''',
         unsafe_allow_html=True
@@ -200,48 +285,50 @@ with st.container():
         if interaction.role == "human":
             st.markdown(f'<div class="chat-box user-message message"><strong>You:</strong> {interaction.content}</div>', unsafe_allow_html=True)
         else:
-            st.markdown(f"""
-            <div class="chat-box assistant-message message">
-                <div class="assistant-logo">
-                    <img src="https://avatar-prod-us-east-2.webexcontent.com/Avtr~V1~1eb65fdf-9643-417f-9974-ad72cae0e10f/V1~1a08968daf428f4f5d1ce0f04de95eb40bf8d6d8cb5a0463a6f858f52e3a9df9~49713ad2dabe4cb2a6f83a05c6d6e4f5"" alt="AI Assistant">
-                </div>
-                <div><strong>Assistant:</strong> {interaction.content}</div>
-            </div>
-            """, unsafe_allow_html=True)
-
-    # Text input field
-    user_input = st.text_area("Enter your message:", height=100, placeholder="Type your message here...")
-
-    # Submit button
+            st.markdown(f'<div class="chat-box assistant-message message"><div class="assistant-logo"><img src="https://example.com/your-logo.png" alt="LUNA AI"></div><strong>LUNA AI:</strong> {interaction.content}</div>', unsafe_allow_html=True)
+
+    # Input area for user to type messages
+    user_input = st.text_area("Your message:", "", key="user_input")
+
+    # Button to send the message
     if st.button("Send"):
         if user_input:
-            assistant = OpenAIPAF()
-            assistant.setup()
-
-            # Build prompt and get response
+            # Add the user's message to interactions
+            st.session_state.previous_interactions.append(Interaction("human", user_input))
+            
+            # Generate AI response
             prompt = build_prompt(user_input, st.session_state.previous_interactions)
-            response = assistant.think(prompt)
-
-            # Update interactions
-            st.session_state.previous_interactions.append(Interaction(role="human", content=user_input))
-            st.session_state.previous_interactions.append(Interaction(role="assistant", content=response))
-
-            # Display response
-            st.markdown(f'<div class="chat-box user-message message"><strong>You:</strong> {user_input}</div>', unsafe_allow_html=True)
-            st.markdown(f"""
-            <div class="chat-box assistant-message message">
-                <div class="assistant-logo">
-                    <img src="https://avatar-prod-us-east-2.webexcontent.com/Avtr~V1~1eb65fdf-9643-417f-9974-ad72cae0e10f/V1~1a08968daf428f4f5d1ce0f04de95eb40bf8d6d8cb5a0463a6f858f52e3a9df9~49713ad2dabe4cb2a6f83a05c6d6e4f5" alt="AI Assistant">
-                </div>
-                <div><strong>Assistant:</strong> {response}</div>
-            </div>
-            """, unsafe_allow_html=True)
-
-            # Keep only the last CONVO_TRAIL_CUTOFF interactions
-            if len(st.session_state.previous_interactions) > CONVO_TRAIL_CUTOFF:
-                st.session_state.previous_interactions = st.session_state.previous_interactions[-CONVO_TRAIL_CUTOFF:]
+            ai_response = OpenAIPAF().think(prompt)
+            
+            # Add the assistant's response to interactions
+            st.session_state.previous_interactions.append(Interaction("assistant", ai_response))
+            
+            # Clear the input area
+            st.session_state.user_input = ""
+            
+            # Re-render the chat
+            st.experimental_rerun()
 
-        else:
-            st.warning("Please enter a message.")
+# Footer with feedback button and emoji options
+st.markdown("""
+<div class="footer">
+    <button class="feedback-button" onclick="document.getElementById('feedback-popup').style.display='block'">💬 Give Feedback</button>
+    <div id="feedback-popup" class="feedback-popup">
+        <h3>We value your feedback! 📝</h3>
+        <textarea placeholder="Share your thoughts..."></textarea>
+        <button onclick="document.getElementById('feedback-popup').style.display='none'">Submit</button>
+    </div>
+</div>
+""", unsafe_allow_html=True)
 
-st.write("This chatbot uses GPT-4o-mini model to respond to your messages.")
+# JavaScript to handle the feedback popup
+st.markdown("""
+<script>
+    // Close the feedback popup when clicking outside of it
+    window.onclick = function(event) {
+        if (event.target === document.getElementById('feedback-popup')) {
+            document.getElementById('feedback-popup').style.display = 'none';
+        }
+    }
+</script>
+""", unsafe_allow_html=True)