Update app.py

app.py

@@ -1,30 +1,19 @@
 import streamlit as st
-from api_helper import call_api  # Import the updated API helper
+from api_helper import call_api  # Keep the original API logic
+
+# Sidebar Configuration
+with st.sidebar:
+    st.markdown("### DUBS Settings")
+    st.markdown("""[View the source code](https://github.com/streamlit/llm-examples/blob/main/Chatbot.py)""")
+    st.markdown("""[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/streamlit/llm-examples?quickstart=1)""")
 
 # Streamlit Configurations
-st.set_page_config(page_title="Chatbot", layout="centered")
+st.set_page_config(page_title="💬 DUBS Chatbot", layout="centered")
 
 # Chat History Initialization
 if "messages" not in st.session_state:
     st.session_state["messages"] = [{"role": "assistant", "content": "Hello! How can I assist you today?"}]
 
-# Function to Handle User Input
-def handle_input():
-    user_message = st.session_state.user_input
-    if user_message:
-        # Save User Message
-        st.session_state["messages"].append({"role": "user", "content": user_message})
-
-        # Display Bot Response Placeholder
-        with st.spinner("Fetching response..."):
-            bot_response = call_api(user_message)
-        
-        # Save Bot Response
-        st.session_state["messages"].append({"role": "assistant", "content": bot_response})
-
-        # Clear Input Field
-        st.session_state.user_input = ""  # Reset user input field
-
 # Main Chat UI
 st.title("DUBS v.0.0.3")
 st.markdown("Empowering you with a Sustainable AI")
@@ -32,20 +21,20 @@ st.markdown("Empowering you with a Sustainable AI")
 # Chat Display
 for message in st.session_state["messages"]:
     if message["role"] == "user":
-        st.markdown(
-            f"<div style='text-align: right; background-color: #f3e5f5; color: #6a1b9a; margin: 10px 0; padding: 10px; border-radius: 10px;'><b>You:</b> {message['content']}</div>",
-            unsafe_allow_html=True,
-        )
+        st.chat_message("user").write(message["content"])
     elif message["role"] == "assistant":
-        st.markdown(
-            f"<div style='text-align: left; background-color: #fffde7; color: #fbc02d; margin: 10px 0; padding: 10px; border-radius: 10px;'><b>Bot:</b> {message['content']}</div>",
-            unsafe_allow_html=True,
-        )
+        st.chat_message("assistant").write(message["content"])
 
 # User Input
-st.text_input(
-    "Your message",
-    placeholder="Type your message here...",
-    key="user_input",
-    on_change=handle_input,
-)
+if prompt := st.chat_input():
+    # Append the user's message to the chat history
+    st.session_state["messages"].append({"role": "user", "content": prompt})
+    st.chat_message("user").write(prompt)
+
+    with st.spinner("Fetching response..."):
+        # Call the original API logic to get the response
+        response = call_api(prompt)
+
+    # Append the assistant's response to the chat history
+    st.session_state["messages"].append({"role": "assistant", "content": response})
+    st.chat_message("assistant").write(response)