Update app.py

app.py

@@ -149,14 +149,14 @@ label {
 
 
 #chatbox .message.user {
-    background-color: #f0f0f0; /* Light gray background for user messages */
+    background-color: #FFFBE6; /* Light gray background for user messages */
     border-radius: 10px;
     padding: 10px;
     margin-bottom: 10px;
 }
 
 #chatbox .message.bot {
-    background-color: #e0f7fa; /* Light cyan background for bot messages */
+    background-color: #E7FBE6; /* Light cyan background for bot messages */
     border-radius: 10px;
     padding: 10px;
     margin-bottom: 10px;
@@ -204,7 +204,6 @@ def upload_pdf(pdf_file):
 def chat(user_input):
     global chain, chathistory 
 
-    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.
@@ -212,8 +211,8 @@ def chat(user_input):
            - Your answer directly reflects the content of the document.
            - If the requested information is not available in the document, clearly state that in Arabic.
            - Keep your response concise yet comprehensive, addressing the question fully.
-           - Always respond only in a professional and well-versed Arabic Language.\n
-        Question: {user_input}\n
+           - Always respond only in a professional and well-versed Arabic Language.
+        Question: {user_input}.
         """
 
     response = chain({"question": prompt})
@@ -221,7 +220,7 @@ def chat(user_input):
 
     
 
-    chathistory.append({"role": "bot", "content": f"🤖 {assistant_response}"})
+    chathistory.append({"user_content":  f"👤 {user_input}", "bot_content": f"🤖 {assistant_response}"})
     # Generate a unique identifier for the audio file
     audio_id = str(uuid.uuid4())
 
@@ -230,7 +229,7 @@ def chat(user_input):
     audio_file = f"{audio_id}.mp3"
     tts.save(audio_file)
 
-    history_display = [(msg["content"], msg["role"]) for msg in chathistory]
+    history_display = [(msg["user_content"], msg["bot_content"]) for msg in chathistory]
     return history_display, audio_file
 
 with gr.Blocks(css=custom_css) as demo:
@@ -245,7 +244,7 @@ with gr.Blocks(css=custom_css) as demo:
         submit_button_pdf = gr.Button("ارفع الملف", interactive=False)
     with gr.Row():
         with gr.Column(scale=3):
-            chatbot = gr.Chatbot(label="الشات", elem_id="chatbox", height=400, rtl=True, layout='panel')
+            chatbot = gr.Chatbot(label="الشات", elem_id="chatbox", height=400, rtl=True, layout='bubble', bubble_full_width=False)
     
     with gr.Row():
         chat_input = gr.Textbox(label="💬", rtl=True, visible=False,  placeholder="أدخل سؤالك هنا ..", elem_id="inputbox", lines=2)