Add hint to user prompt

Gradio_UI.py

@@ -258,37 +258,90 @@ class GradioUI:
             "",
         )
 
-    def launch(self, **kwargs):
-        import gradio as gr
+    # def launch(self, **kwargs):
+    #     import gradio as gr
+
+    #     with gr.Blocks(fill_height=True) as demo:
+    #         stored_messages = gr.State([])
+    #         file_uploads_log = gr.State([])
+    #         chatbot = gr.Chatbot(
+    #             label="Agent",
+    #             type="messages",
+    #             avatar_images=(
+    #                 None,
+    #                 "https://huggingface.co/datasets/agents-course/course-images/resolve/main/en/communication/Alfred.png",
+    #             ),
+    #             resizeable=True,
+    #             scale=1,
+    #         )
+    #         # 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")
+    #             upload_status = gr.Textbox(label="Upload Status", interactive=False, visible=False)
+    #             upload_file.change(
+    #                 self.upload_file,
+    #                 [upload_file, file_uploads_log],
+    #                 [upload_status, file_uploads_log],
+    #             )
+    #         text_input = gr.Textbox(lines=1, label="Chat Message")
+    #         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])
+        def launch(self, **kwargs):
+    import gradio as gr
+
+    with gr.Blocks(fill_height=True) as demo:
+        stored_messages = gr.State([])
+        file_uploads_log = gr.State([])
+        
+        chatbot = gr.Chatbot(
+            label="Agent",
+            type="messages",
+            avatar_images=(
+                None,
+                "https://huggingface.co/datasets/agents-course/course-images/resolve/main/en/communication/Alfred.png",
+            ),
+            resizeable=True,
+            scale=1,
+        )
+
+        # Show temporary hint when chat loads
+        demo.load(
+            lambda: [{"role": "assistant", "content": "Draw me...", "temp_hint": True}],
+            inputs=None,
+            outputs=chatbot,
+        )
+
+        # When any message is added, clear the temporary hint
+        def update_chat_display(messages):
+            if messages and isinstance(messages[-1], dict) and messages[-1].get("temp_hint"):
+                return []
+            return messages
+
+        chatbot.change(
+            update_chat_display,
+            stored_messages,
+            chatbot,
+        )
 
-        with gr.Blocks(fill_height=True) as demo:
-            stored_messages = gr.State([])
-            file_uploads_log = gr.State([])
-            chatbot = gr.Chatbot(
-                label="Agent",
-                type="messages",
-                avatar_images=(
-                    None,
-                    "https://huggingface.co/datasets/agents-course/course-images/resolve/main/en/communication/Alfred.png",
-                ),
-                resizeable=True,
-                scale=1,
+        # Rest of your existing code
+        if self.file_upload_folder is not None:
+            upload_file = gr.File(label="Upload a file")
+            upload_status = gr.Textbox(label="Upload Status", interactive=False, visible=False)
+            upload_file.change(
+                self.upload_file,
+                [upload_file, file_uploads_log],
+                [upload_status, file_uploads_log],
             )
-            # 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")
-                upload_status = gr.Textbox(label="Upload Status", interactive=False, visible=False)
-                upload_file.change(
-                    self.upload_file,
-                    [upload_file, file_uploads_log],
-                    [upload_status, file_uploads_log],
-                )
-            text_input = gr.Textbox(lines=1, label="Chat Message")
-            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])
+            
+        text_input = gr.Textbox(lines=1, label="Chat Message", placeholder="Type 'Draw me...' to get started")
+        text_input.submit(
+            self.log_user_message,
+            [text_input, file_uploads_log],
+            [stored_messages, text_input],
+        ).then(self.interact_with_agent, stored_messages, chatbot)
 
         demo.launch(debug=True, share=True, **kwargs)