Update app.py

app.py

@@ -143,7 +143,25 @@ body {
 
 label {
     font-size: 16px !important;
-    color: blue !important;
+    color: darkgray !important;
+}
+.message.user {
+    background-color: #FFFFFF;
+}
+
+.message.bot {
+    background-color: #F7EED3;
+}
+
+.message::before {
+    content: '';
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    margin-right: 10px;
+    vertical-align: middle;
 }
 
 """
@@ -183,7 +201,7 @@ def upload_pdf(pdf_file):
 def chat(user_input):
     global chain, chathistory 
 
-    chathistory.append({"role": "user", "content": user_input})
+    chathistory.append({"role": "👤", "content": 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.
@@ -198,7 +216,7 @@ def chat(user_input):
     response = chain({"question": prompt})
     assistant_response = response["answer"]
 
-    chathistory.append({"role": "assistant", "content": assistant_response})
+    chathistory.append({"role": "🤖", "content": assistant_response})
     # Generate a unique identifier for the audio file
     audio_id = str(uuid.uuid4())
 
@@ -222,18 +240,18 @@ 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='bubble', bubble_full_width=False)
+            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)
+        chat_input = gr.Textbox(label="💬", rtl=True, visible=False,  placeholder="أدخل سؤالك هنا ..", elem_id="inputbox", lines=2)
     #chat_output = gr.Textbox(label="الرد الآلي 🤖", rtl=True, visible=False)
     with gr.Row():
         audio_output = gr.Audio(label="🔊", visible=False)
-    with gr.Group():
-        with gr.Row():
-            submit_button_chat = gr.Button("إرسال", interactive=True, visible=False)
-        with gr.Row():
-            clear_btn = gr.Button("مسح", interactive=True, visible=False)
+    
+    with gr.Row():
+        submit_button_chat = gr.Button("إرسال", interactive=True, visible=False)
+    with gr.Row():
+        clear_btn = gr.Button("مسح", interactive=True, visible=False)
 
     def handle_file_upload(pdf):
         output_label.value=''