Chatbot height kwarg (#3369)

* height

* height

* changelog

* fixes

* merge

* Fix File updating (#3375)

* Fix

* Remove line

* Add unit test

* CHANGELOG

* Remove comment

* fixes

* Release 3.20.0 (#3374)

* release-3.20.0

* update changelog

* New Version Docs (#3376)

* [create-pull-request] automated change

* empty commit

* [create-pull-request] automated change

* empty commit

---------

Co-authored-by: abidlabs <[email protected]>
Co-authored-by: aliabd <[email protected]>

* notebook

* changelog

* changelog

* format

---------

Co-authored-by: Abubakar Abid <[email protected]>
Co-authored-by: Freddy Boulton <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: abidlabs <[email protected]>
Co-authored-by: aliabd <[email protected]>

CHANGELOG.md

@@ -4,6 +4,9 @@
 No changes to highlight.
 
 ## Bug Fixes:
+- Add `height` kwarg to style in `gr.Chatbot()` component by [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 3369](https://github.com/gradio-app/gradio/pull/3369)
+
+    ```chatbot = gr.Chatbot().style(height=500)```
 - Ensure uploaded images are always shown in the sketch tool by [@pngwn](https://github.com/pngwn) in [PR 3386](https://github.com/gradio-app/gradio/pull/3386)
 
 ## Documentation Changes:

demo/chatbot_multimodal/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: chatbot_multimodal"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from urllib.parse import quote\n", "\n", "def add_text(history, text):\n", "    history = history + [(text, text + \"?\")]\n", "    return history\n", "\n", "def add_image(history, image):\n", "    history = history + [(f\"![](/file={quote(image.name)})\", \"Cool pic!\")]\n", "    return history\n", "\n", "\n", "with gr.Blocks(css=\"#chatbot .overflow-y-auto{height:500px}\") as demo:\n", "    chatbot = gr.Chatbot(elem_id=\"chatbot\")\n", "    \n", "    with gr.Row():\n", "        with gr.Column(scale=0.85):\n", "            txt = gr.Textbox(show_label=False, placeholder=\"Enter text and press enter, or upload an image\").style(container=False)\n", "        with gr.Column(scale=0.15, min_width=0):\n", "            btn = gr.UploadButton(\"\ud83d\uddbc\ufe0f\", file_types=[\"image\"])\n", "            \n", "    txt.submit(add_text, [chatbot, txt], [chatbot])\n", "    txt.submit(lambda :\"\", None, txt, queue=False)\n", "    btn.upload(add_image, [chatbot, btn], [chatbot])\n", "            \n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: chatbot_multimodal"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from urllib.parse import quote\n", "\n", "def add_text(history, text):\n", "    history = history + [(text, text + \"?\")]\n", "    return history\n", "\n", "def add_image(history, image):\n", "    history = history + [(f\"![](/file={quote(image.name)})\", \"Cool pic!\")]\n", "    return history\n", "\n", "with gr.Blocks() as demo:\n", "    chatbot = gr.Chatbot(elem_id=\"chatbot\").style(height=500)\n", "    \n", "    with gr.Row():\n", "        with gr.Column(scale=0.85):\n", "            txt = gr.Textbox(show_label=False, placeholder=\"Enter text and press enter, or upload an image\").style(container=False)\n", "        with gr.Column(scale=0.15, min_width=0):\n", "            btn = gr.UploadButton(\"\ud83d\uddbc\ufe0f\", file_types=[\"image\"])\n", "            \n", "    txt.submit(add_text, [chatbot, txt], [chatbot])\n", "    txt.submit(lambda :\"\", None, txt, queue=False)\n", "    btn.upload(add_image, [chatbot, btn], [chatbot])\n", "            \n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/chatbot_multimodal/run.py

@@ -9,9 +9,8 @@ def add_image(history, image):
     history = history + [(f"![](/file={quote(image.name)})", "Cool pic!")]
     return history
 
-
-with gr.Blocks(css="#chatbot .overflow-y-auto{height:500px}") as demo:
-    chatbot = gr.Chatbot(elem_id="chatbot")
+with gr.Blocks() as demo:
+    chatbot = gr.Chatbot(elem_id="chatbot").style(height=500)
 
     with gr.Row():
         with gr.Column(scale=0.85):

gradio/components.py

@@ -4004,10 +4004,12 @@ def postprocess(
             )
         return y
 
-    def style(self, **kwargs):
+    def style(self, height: int | None = None, **kwargs):
         """
         This method can be used to change the appearance of the Chatbot component.
         """
+        if height is not None:
+            self._style["height"] = height
         if kwargs.get("color_map") is not None:
             warnings.warn("The 'color_map' parameter has been deprecated.")
 

ui/packages/app/src/components/Chatbot/Chatbot.svelte

@@ -31,6 +31,7 @@
 		/>
 	{/if}
 	<ChatBot
+		{style}
 		{root}
 		{value}
 		pending_message={loading_status?.status === "pending"}

ui/packages/chatbot/src/ChatBot.svelte

@@ -6,6 +6,7 @@
 	let old_value: Array<[string | null, string | null]> | null;
 	export let pending_message: boolean = false;
 	export let root: string;
+	export let style: Styles = {};
 
 	let div: HTMLDivElement;
 	let autoscroll: Boolean;
@@ -44,7 +45,12 @@
 	}
 </script>
 
-<div class="wrap" bind:this={div}>
+<div
+	class="wrap"
+	style:height={`${style.height}px`}
+	style:max-height={`${style.height}px`}
+	bind:this={div}
+>
 	<div class="message-wrap">
 		{#each _value as message, i}
 			<div