Update app.py

app.py

@@ -4,23 +4,85 @@ from groq import Groq
 # Define the API key here
 GROQ_API_KEY = "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"
 
+# Initialize session state for chat history
+if "chat_history" not in st.session_state:
+    st.session_state.chat_history = [
+        {"role": "system", "content": "you are a helpful assistant. Take the input from the users and try to provide as detailed response as possible. Provide proper examples to help the user. Try to mention references or provide citations to make it more detail-oriented."}
+    ]
+
 # Define function to fetch response
 def fetch_response(user_input):
     client = Groq(api_key=GROQ_API_KEY)
+    st.session_state.chat_history.append({"role": "user", "content": user_input})
     chat_completion = client.chat.completions.create(
-        messages=[
-            {"role": "system", "content": "you are a helpful assistant. Take the input from the users and try to provide as detailed response as possible. Provide proper expamples to help the user. Try to mention references or provide citations to make it more detail oriented. "},
-            {"role": "user", "content": user_input},
-        ],
+        messages=st.session_state.chat_history,
         model="mixtral-8x7b-32768",
         stream=False
     )
-    return chat_completion.choices[0].message.content
+    response = chat_completion.choices[0].message.content
+    st.session_state.chat_history.append({"role": "assistant", "content": response})
+    return response
 
 # Streamlit app
+st.set_page_config(page_title="Fastest AI Chatbot", page_icon="🤖", layout="wide")
+
+st.markdown(
+    """
+    <style>
+    body {
+        background-color: #2a2a2a;
+        color: #e1e1e1;
+        font-family: 'Courier New', Courier, monospace;
+    }
+    .css-18e3th9 {
+        padding: 2rem;
+    }
+    .css-1d391kg {
+        background: linear-gradient(145deg, #3e3e3e, #2a2a2a);
+        box-shadow: 20px 20px 60px #232323, -20px -20px 60px #323232;
+        border-radius: 15px;
+        padding: 2rem;
+    }
+    .stButton>button {
+        background: linear-gradient(145deg, #5e5e5e, #3a3a3a);
+        box-shadow: 8px 8px 16px #232323, -8px -8px 16px #323232;
+        color: #e1e1e1;
+        border: none;
+        border-radius: 12px;
+        padding: 0.5rem 2rem;
+        font-size: 1.2rem;
+        margin-top: 1rem;
+    }
+    .stTextInput>div>div>input {
+        background: linear-gradient(145deg, #5e5e5e, #3a3a3a);
+        box-shadow: inset 8px 8px 16px #232323, inset -8px -8px 16px #323232;
+        border: none;
+        border-radius: 12px;
+        color: #e1e1e1;
+        padding: 1rem;
+        font-size: 1rem;
+    }
+    footer {
+        color: #e1e1e1;
+        font-size: small;
+        text-align: right;
+        margin-top: 2rem;
+    }
+    </style>
+    """,
+    unsafe_allow_html=True
+)
+
 st.title("Fastest AI Chatbot")
 st.write("Ask a question and get a response.")
 
+# Display chat history
+for chat in st.session_state.chat_history:
+    if chat["role"] == "user":
+        st.markdown(f"**You:** {chat['content']}")
+    elif chat["role"] == "assistant":
+        st.markdown(f"**AI:** {chat['content']}")
+
 # Text input for user's question
 user_input = st.text_input("Enter your question here:")
 
@@ -33,7 +95,7 @@ if st.button("Get Response"):
 # Footer
 st.markdown(
     """
-    <footer style="color: blue; font-size: small; text-align: right;">
+    <footer>
         By DL TITANS
     </footer>
     """,