From a2076441e2cdc280bf055b805578c945c5818443 Mon Sep 17 00:00:00 2001 From: Dawood Khan Date: Mon, 6 Mar 2023 13:12:39 -0500 Subject: [PATCH] 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 Co-authored-by: aliabd * notebook * changelog * changelog * format --------- Co-authored-by: Abubakar Abid Co-authored-by: Freddy Boulton Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: abidlabs Co-authored-by: aliabd --- CHANGELOG.md | 3 +++ demo/chatbot_multimodal/run.ipynb | 2 +- demo/chatbot_multimodal/run.py | 5 ++--- gradio/components.py | 4 +++- ui/packages/app/src/components/Chatbot/Chatbot.svelte | 1 + ui/packages/chatbot/src/ChatBot.svelte | 8 +++++++- 6 files changed, 17 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 44009bd6a1..fc429efb39 100644 --- a/CHANGELOG.md +++ b/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: diff --git a/demo/chatbot_multimodal/run.ipynb b/demo/chatbot_multimodal/run.ipynb index efe0ebfcab..f1648b3889 100644 --- a/demo/chatbot_multimodal/run.ipynb +++ b/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} \ No newline at end of file +{"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} \ No newline at end of file diff --git a/demo/chatbot_multimodal/run.py b/demo/chatbot_multimodal/run.py index dc080f3294..5676274955 100644 --- a/demo/chatbot_multimodal/run.py +++ b/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): diff --git a/gradio/components.py b/gradio/components.py index 6304fb8c16..af4221c338 100644 --- a/gradio/components.py +++ b/gradio/components.py @@ -4004,10 +4004,12 @@ class Chatbot(Changeable, IOComponent, JSONSerializable): ) 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.") diff --git a/ui/packages/app/src/components/Chatbot/Chatbot.svelte b/ui/packages/app/src/components/Chatbot/Chatbot.svelte index 63b0bf4589..96e14f0bbd 100644 --- a/ui/packages/app/src/components/Chatbot/Chatbot.svelte +++ b/ui/packages/app/src/components/Chatbot/Chatbot.svelte @@ -31,6 +31,7 @@ /> {/if} | 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 @@ } -
+
{#each _value as message, i}