added a placeholder to the chatbot

Gradio now supports the use of `Placeholder`. This is a small Quality of Life improvement that enhances the user experience by displaying a placeholder in the chatbot. With this new feature, you can add any information or logo to be displayed when the chat is blank or cleared.

I have attached an image of how it will look on your chatbot demo so that you can see for yourself. The best part is that you can easily modify the image or messaging to meet your needs, just like you would when using markdown.


app.py

@@ -74,6 +74,14 @@ custom_css = """
 }
 """
 
+PLACEHOLDER = """
+<div style="padding: 30px; text-align: center; display: flex; flex-direction: column; align-items: center;">
+   <img src="https://txt.cohere.com/content/images/size/w2000/2024/04/r--Blog-Header.png" style="width: 80%; max-width: 450px; height: auto; opacity: 0.55; margin-bottom: 10px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"> 
+   <h1 style="font-size: 28px; margin-bottom: 2px; color: #000; opacity: 0.55;">Command R+ Chatbot</h1>
+   <p style="font-size: 18px; margin-bottom: 2px; color: #000; opacity: 0.65;">Ask me anything...</p>
+</div>
+"""
+
 with gr.Blocks(analytics_enabled=False, css=custom_css) as demo:
     cid = gr.State("")
 
@@ -93,7 +101,7 @@ with gr.Blocks(analytics_enabled=False, css=custom_css) as demo:
             
     with gr.Column():
         with gr.Row():
-            chatbot = gr.Chatbot(show_label=False, show_share_button=False, show_copy_button=True)
+            chatbot = gr.Chatbot(show_label=False, show_share_button=False, show_copy_button=True, placeholder=PLACEHOLDER)
         
         with gr.Row():
             user_message = gr.Textbox(lines=1, placeholder="Ask anything ...", label="Input", show_label=False)