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="LUNA AI", page_icon="🤖", layout="wide")
+st.set_page_config(page_title="AI Chatbot", page_icon="🤖", layout="wide")
 
 # Add premium CSS styling with the new blue color palette
 st.markdown("""
@@ -90,28 +90,6 @@ 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 {
@@ -196,75 +174,11 @@ 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 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)
+# Header and container for chat messages
+st.markdown('<div class="header">✨Luna✨<br>Your Friendly Digital Assistant chatbot!😊</div>', unsafe_allow_html=True)
 
 # Container for chat messages and input area
 with st.container():
@@ -276,7 +190,8 @@ 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
@@ -285,50 +200,48 @@ 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://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
+            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
     if st.button("Send"):
         if user_input:
-            # Add the user's message to interactions
-            st.session_state.previous_interactions.append(Interaction("human", user_input))
-            
-            # Generate AI response
+            assistant = OpenAIPAF()
+            assistant.setup()
+
+            # Build prompt and get response
             prompt = build_prompt(user_input, st.session_state.previous_interactions)
-            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()
+            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:]
 
-# 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)
+        else:
+            st.warning("Please enter a message.")
 
-# 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)
+st.write("This chatbot uses GPT-4o-mini model to respond to your messages.")