Update Gradio_UI.py

Gradio_UI.py

@@ -265,15 +265,16 @@ class GradioUI:
             stored_messages = gr.State([])
             file_uploads_log = gr.State([])
             chatbot = gr.Chatbot(
-                label="Agent",
+                label="💬 Chat Window",
                 type="messages",
                 avatar_images=(
                     None,
                     "https://huggingface.co/datasets/agents-course/course-images/resolve/main/en/communication/Alfred.png",
                 ),
-                resizeable=True,
-                scale=1,
+                scale=5,  # Expands chat window
+                show_copy_button=True
             )
+
             # If an upload folder is provided, enable the upload feature
             if self.file_upload_folder is not None:
                 upload_file = gr.File(label="Upload a file")
@@ -283,14 +284,91 @@ class GradioUI:
                     [upload_file, file_uploads_log],
                     [upload_status, file_uploads_log],
                 )
-            text_input = gr.Textbox(lines=1, label="Chat Message")
+
+            # ====== Chat Input with Placeholder Text & Enter Key Submission ====== #
+            text_input = gr.Textbox(
+                lines=1,
+                label="💬 Chat Message",
+                placeholder="Type your message and press Enter to send...",
+                interactive=True,
+            )
+
+            # Submit text when "Enter" is pressed
             text_input.submit(
                 self.log_user_message,
                 [text_input, file_uploads_log],
                 [stored_messages, text_input],
             ).then(self.interact_with_agent, [stored_messages, chatbot], [chatbot])
 
+            # ====== Sample Prompt Buttons Inside the Chat Window ====== #
+            with gr.Column(visible=True) as startup_buttons:
+                gr.Markdown("### 🤖 Get Started with a Quick Prompt")
+                with gr.Row():
+                    btn1 = gr.Button("✈️ Plan a Trip")
+                    btn2 = gr.Button("🍽️ Find a Restaurant")
+                    btn3 = gr.Button("💱 Convert Currency")
+
+            # When a button is clicked, fill input box and hide buttons
+            def set_prompt(prompt):
+                return prompt, gr.update(visible=False)  # Hide buttons
+
+            btn1.click(lambda: set_prompt("I want to plan a trip from Toronto to Paris in May 2025. Can you find flights and suggest an itinerary?"), 
+                       inputs=[], outputs=[text_input, startup_buttons])
+            btn2.click(lambda: set_prompt("I'm visiting New York next weekend. Can you recommend some top-rated restaurants for dinner?"), 
+                       inputs=[], outputs=[text_input, startup_buttons])
+            btn3.click(lambda: set_prompt("Convert 500 USD to EUR and show me the exchange rate."), 
+                       inputs=[], outputs=[text_input, startup_buttons])
+
+            # ====== Additional Sample Prompts (Dropdown or Grid) ====== #
+            with gr.Accordion("📌 Default Prompts", open=False):
+                with gr.Row():
+                    pbtn1 = gr.Button("🏨 Find Hotels in Tokyo")
+                    pbtn2 = gr.Button("🌦️ Check Weather in Paris")
+                    pbtn3 = gr.Button("🚗 Find Car Rentals")
+                    pbtn4 = gr.Button("🎟️ Get Event Info")
+
+                # Button Clicks - Additional Prompts
+                pbtn1.click(lambda: "I need budget-friendly hotels in Tokyo for 5 nights. My budget is $100 per night.", inputs=[], outputs=text_input)
+                pbtn2.click(lambda: "What is the weather forecast for Paris next week?", inputs=[], outputs=text_input)
+                pbtn3.click(lambda: "Find me a car rental in Los Angeles for 3 days.", inputs=[], outputs=text_input)
+                pbtn4.click(lambda: "What major events are happening in Berlin this month?", inputs=[], outputs=text_input)
+
+            # ====== Toggle Checkboxes for Extra Info ====== #
+            with gr.Row():
+                show_smolagents_info = gr.Checkbox(label="What is SmolAgents?", value=False)
+                show_agent_capabilities = gr.Checkbox(label="Capabilities & Limitations", value=False)
+
+            # Expanding sections based on checkbox state
+            smolagents_info = gr.Markdown("""
+                ## 🌍 **What is SmolAgents?**
+                Unlike a basic chat AI that provides single-step answers, **SmolAgents** enable dynamic, multi-step **reasoning and decision-making**.  
+
+                - 🛠 **Modular & Flexible:** SmolAgents **call different tools** when needed, giving you **step-by-step insights** rather than just final answers.
+                - 🤖 **Real-time Adaptability:** The AI **adjusts its approach based on intermediate results**, making it **more powerful than standard chatbots**.
+                - 🚀 **Build Quickly & Expand Easily:** SmolAgents provide a foundation for building **custom AI-powered workflows**, making it easy to **scale and adapt**.
+
+                🔹 *Use this space to explore what’s possible! This AI isn't just answering—you can see how it reasons between steps and improves results.*  
+            """, visible=False)
+
+            agent_capabilities = gr.Markdown("""
+                ## 🤖 **Capabilities & Limitations**
+                
+                | **Tool Name**                         | **Function & API Used**                                         | **Limitations** | **Possible Improvements** |
+                |--------------------------------------|----------------------------------------------------------------|----------------|---------------------------|
+                | `search_flights(departure, destination, date)` ✈️ | **Finds flights** using DuckDuckGo. Queries available flights from departure to destination on a given date. | May not have real-time pricing | Integrate a flight API like Skyscanner |
+                | `web_search(query)` 🔍               | **Searches the web** using DuckDuckGo. Retrieves live data including news, events, and real-time updates. | Limited search results | Expand to use multiple search engines |
+                | `visit_webpage(url)` 🌐              | **Scrapes web content**. Extracts ingredients and instructions from a recipe URL. | May not work on all websites | Add more scraping logic for better accuracy |
+                | `convert_currency(amount, from_currency, to_currency)` 💱 | **Converts currency** via FreeCurrencyAPI. Fetches exchange rates and calculates conversions. | Requires API key, may have rate limits | Use a backup API in case of failures |
+                | `get_current_time_in_timezone(timezone)` ⏰ | **Gets local time** in a specified timezone using the `pytz` library. | No offline functionality | Allow local fallback for time retrieval |
+                | `chat_with_ai(message)` 💬           | **Maintains conversation memory**. Stores and retrieves chat history to provide context-aware responses. | Limited to 16,000 tokens | Implement memory chunking for longer conversations |
+            """, visible=False)
+
+            # Show/Hide sections based on checkbox state
+            show_smolagents_info.change(lambda x: gr.update(visible=x), show_smolagents_info, smolagents_info)
+            show_agent_capabilities.change(lambda x: gr.update(visible=x), show_agent_capabilities, agent_capabilities)
+
         demo.launch(debug=True, share=False, **kwargs)
 
 
+
 __all__ = ["stream_to_gradio", "GradioUI"]