Update app.py

app.py

@@ -146,23 +146,25 @@ label {
     color: #0C1844 !important;
     background-color: #FFF5E1;
 }
-.message.user {
-    background-color: #ECFFE6;
+
+
+#chatbox .message.user {
+    background-color: #f0f0f0; /* Light gray background for user messages */
+    border-radius: 10px;
+    padding: 10px;
+    margin-bottom: 10px;
 }
 
-.message.bot {
-    background-color: #FFF6EA;
+#chatbox .message.bot {
+    background-color: #e0f7fa; /* Light cyan background for bot messages */
+    border-radius: 10px;
+    padding: 10px;
+    margin-bottom: 10px;
 }
 
-.message::before {
-    content: '';
-    display: inline-block;
-    width: 24px;
-    height: 24px;
-    background-size: contain;
-    background-repeat: no-repeat;
+#chatbox .message.user img,
+#chatbox .message.bot img {
     margin-right: 10px;
-    vertical-align: middle;
 }
 
 """
@@ -198,11 +200,11 @@ def upload_pdf(pdf_file):
     chain = create_chain(vectorstore)
     return "تم تحميل الملف بنجاح !", True
 
-
+        
 def chat(user_input):
     global chain, chathistory 
 
-    chathistory.append({"role": "👤", "content": user_input})
+    chathistory.append({"role": "user", "content": f"👤 {user_input}"})
    
     prompt = f"""
         You are an expert Arabic-language assistant specialized in analyzing and responding to queries about Arabic PDF documents. Your responses should be precise, informative, and reflect the professional tone and structure expected in formal Arabic communication. Focus on extracting and presenting relevant information from the document clearly and systematically, while avoiding colloquial or informal language.
@@ -217,7 +219,9 @@ def chat(user_input):
     response = chain({"question": prompt})
     assistant_response = response["answer"]
 
-    chathistory.append({"role": "🤖", "content": assistant_response})
+    
+
+    chathistory.append({"role": "bot", "content": f"🤖 {assistant_response}"})
     # Generate a unique identifier for the audio file
     audio_id = str(uuid.uuid4())
 
@@ -226,7 +230,7 @@ def chat(user_input):
     audio_file = f"{audio_id}.mp3"
     tts.save(audio_file)
 
-    history_display = [(h["role"],h["content"]) for h in chathistory]
+    history_display = [(msg["content"], msg["role"]) for msg in chathistory]
     return history_display, audio_file
 
 with gr.Blocks(css=custom_css) as demo: