Update app.py

app.py

@@ -139,7 +139,7 @@ label {
 }
 
 
-#chatbox .message.user {
+.arabic-chatbox .message.user {
     font-family: 'Cairo', sans-serif !important;
     background-color: #FFFBE6; /* Light gray background for user messages */
     border-radius: 10px;
@@ -147,7 +147,7 @@ label {
     margin-bottom: 10px;
 }
 
-#chatbox .message.bot {
+.arabic-chatbox .message.bot {
     font-family: 'Cairo', sans-serif !important;
     background-color: #E7FBE6; /* Light cyan background for bot messages */
     border-radius: 10px;
@@ -155,14 +155,13 @@ label {
     margin-bottom: 10px;
 }
 
-#chatbox .message.user img,
+.arabic-chatbox .message.user img,
 #chatbox .message.bot img {
     margin-right: 10px;
 }
 
 .custom-submit-button {
     background-color: #E68369 !important;
-    color: whit !important;
     border: none !important;
     border-radius: 5px !important;
     padding: 10px 20px !important;
@@ -227,6 +226,10 @@ def upload_pdf(pdf_file):
 def chat(user_input):
     global chathistory, vectorstore
 
+    if not user_input.strip():  # Check if the input is empty or contains only whitespace
+        return gr.update(value='<span style="color:red;">الرجاء إدخال سؤال.</span>'), "", None
+
+
    
     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.
@@ -253,7 +256,7 @@ def chat(user_input):
     tts.save(audio_file)
 
     history_display = [(msg["user_content"], msg["bot_content"]) for msg in chathistory]
-    return history_display, audio_file
+    return gr.update(value=''), history_display, audio_file
 
 with gr.Blocks(css=custom_css) as demo:
     with gr.Row():
@@ -267,7 +270,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='bubble', bubble_full_width=False)
+            chatbot = gr.Chatbot(label="الشات", elem_classes="arabic-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)
@@ -312,7 +315,7 @@ with gr.Blocks(css=custom_css) as demo:
     submit_button_pdf.click(process_pdf_and_enable_components, inputs=pdf_input, outputs=[output_label, submit_button_chat, submit_button_pdf, chatbot, chat_input, audio_output, clear_btn])
     clear_btn.click(clear_chat, outputs=[chat_input, audio_output])
     # Chat button connection
-    submit_button_chat.click(chat, inputs=chat_input, outputs=[chatbot, audio_output])
+    submit_button_chat.click(chat, inputs=chat_input, outputs=[output_label, chatbot, audio_output])
     
 
 # Launch the Gradio app