Update app.py

app.py

@@ -37,6 +37,38 @@ You can change the LLM models in the **Additional Inputs** at the bottom of the
 
 """
 
+chatbot_css = """
+    .gradio-container {
+        font-family: 'Inter', sans-serif;
+        border-radius: 12px;
+        overflow: hidden;
+    }
+    .panel {
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    .gr-button {
+        border-radius: 8px;
+        padding: 10px 20px;
+        font-weight: bold;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        transition: all 0.2s ease-in-out;
+    }
+    .gr-button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    }
+    .gr-textbox textarea {
+        border-radius: 8px;
+    }
+    .gr-slider {
+        padding: 10px 0;
+    }
+    .gr-tabitem {
+        padding: 20px;
+    }
+"""
+
 sample_button = "Load User Guide and Installation Guide documents"
 
 
@@ -110,7 +142,7 @@ def format_docs(docs):
     return "\n\n".join(doc.page_content for doc in docs)
 
 def generate_response(query, history, model, temperature, max_tokens, top_p, seed):
-  
+
     if vector_store is None:
         return "Please upload and index a PDF at the Indexing tab."
 
@@ -145,7 +177,7 @@ additional_inputs = [
 
 
 # Create the Gradio interface
-with gr.Blocks(theme=gr.themes.Default()) as demo:
+with gr.Blocks(theme=gr.themes.Default(), css=chatbot_css) as demo:
     with gr.Tab("Indexing"):
         gr.Markdown(desc)
         # pdf_input = gr.File(label="Upload PDF", file_types=[".pdf"])
@@ -159,22 +191,88 @@ with gr.Blocks(theme=gr.themes.Default()) as demo:
     
     with gr.Tab("Chatbot"):
         with gr.Row():
-            with gr.Column():
-                gr.ChatInterface(
-                    fn=generate_response, 
-                    chatbot=gr.Chatbot(show_label=False, show_share_button=False, show_copy_button=True, likeable=True, layout="panel"),
+            with gr.Column(scale=2):
+                chatbot = gr.Chatbot(
+                    show_label=False,
+                    show_share_button=False,
+                    show_copy_button=True,
+                    layout="panel",
+                    height=500, # Set a fixed height for the chatbot
+                    avatar_images=(
+                        "https://placehold.co/60x60/FFD700/000000?text=U", # User avatar
+                        "https://placehold.co/60x60/6366F1/FFFFFF?text=AI" # Bot avatar
+                    )
+                )
+                msg = gr.Textbox(
+                    label="Your Message",
+                    placeholder="Type your message here...",
+                    show_copy_button=True,
+                    container=False # Prevent it from being wrapped in a default container
+                )
+                with gr.Row():
+                    submit_btn = gr.Button("Send", variant="primary")
+                    clear_btn = gr.ClearButton() # Will be configured below
+
+                gr.Examples(
                     examples=examples_questions,
-                    additional_inputs=additional_inputs,
+                    inputs=[msg],
+                    outputs=[msg], # Update the message input with the example
+                    label="Quick Examples",
                     cache_examples=False,
                 )
-            # with gr.Column():
-            #     retrieve_button = gr.Button("Retrieve Relevant Info")
-            #     relevant_info = gr.Textbox(
-            #         label="Retrieved Information",
-            #         interactive=False,
-            #         lines=20, 
-            #     )
 
+            with gr.Column(scale=1):
+                # Additional inputs as separate Gradio components (interactive but don't affect dummy fn)
+                model_name_textbox = gr.Textbox(label="Model Name", value="dummy-model", interactive=True)
+                temperature_slider = gr.Slider(minimum=0, maximum=1, value=0.7, step=0.01, label="Temperature", interactive=True)
+                max_tokens_slider = gr.Slider(minimum=10, maximum=2000, value=500, step=10, label="Max Tokens", interactive=True)
+                top_p_slider = gr.Slider(minimum=0, maximum=1, value=0.9, step=0.01, label="Top P", interactive=True)
+                seed_number = gr.Number(minimum=0, maximum=100000, value=0, step=1, label="Seed", precision=0, interactive=True)
+
+                gr.Markdown("### Retrieved Information")
+                # Textbox for relevant_info
+                relevant_info_textbox = gr.Textbox(
+                    label="Retrieved Information",
+                    interactive=False, # Not editable by the user
+                    lines=20,
+                    show_copy_button=True,
+                    autoscroll=True,
+                    container=True # Ensure it has a container for styling
+                )
+
+        # --- Event Handling ---
+        # This function acts as a wrapper to process inputs and distribute outputs
+        def process_chat_and_info(message, chat_history, model, temp, max_tok, top_p_val, seed_val):
+            # Call your generate_response function which returns two values
+            bot_message, retrieved_info = generate_response(
+                message, chat_history, model, temp, max_tok, top_p_val, seed_val
+            )
+            
+            # Update the chat history for the chatbot component
+            chat_history.append((message, bot_message))
             
+            # Return values in the order of the outputs list
+            return chat_history, retrieved_info, "" # Clear the message input after sending
+
+        # Bind the `process_chat_and_info` function to the submit event of the message textbox
+        msg.submit(
+            fn=process_chat_and_info,
+            inputs=[msg, chatbot, model_name_textbox, temperature_slider, max_tokens_slider, top_p_slider, seed_number],
+            outputs=[chatbot, relevant_info_textbox, msg], # Order matters here: chatbot, relevant_info, then msg
+            queue=False # Set to True if you expect heavy load
+        )
+
+        # Bind the `process_chat_and_info` function to the click event of the send button
+        submit_btn.click(
+            fn=process_chat_and_info,
+            inputs=[msg, chatbot, model_name_textbox, temperature_slider, max_tokens_slider, top_p_slider, seed_number],
+            outputs=[chatbot, relevant_info_textbox, msg], # Order matters here
+            queue=False # Set to True if you expect heavy load
+        )
+
+        # Configure the clear button to clear both the chatbot and the relevant_info_textbox
+        clear_btn.add([msg, chatbot, relevant_info_textbox])
+
+           
 # Launch the Gradio app
 demo.launch(share=True)