Repository: gradio-app/gradio
Pull request: Chatbot height kwarg
# Description
Adds `height` kwarg to chatbot style.

Please include: 
* relevant motivation
* a summary of the change 
* which issue is fixed. 
* any additional dependencies that are required for this change.

Closes: #3312

# Checklist:

- [ ] I have performed a self-review of my own code
- [ ] I have added a short summary of my change to the CHANGELOG.md
- [ ] My code follows the style guidelines of this project
- [ ] I have commented my code in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] I have added tests that prove my fix is effective or that my feature works
- [ ] New and existing unit tests pass locally with my changes


# A note about the CHANGELOG

Hello 👋 and thank you for contributing to Gradio!

All pull requests must update the change log located in CHANGELOG.md, unless the pull request is labeled with the "no-changelog-update" label.

Please add a brief summary of the change to the Upcoming Release > Full Changelog section of the CHANGELOG.md file and include
a link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by `[@myusername](link-to-your-github-profile)` in `[PR 11111](https://github.com/gradio-app/gradio/pull/11111)`".

If you would like to elaborate on your change further, feel free to include a longer explanation in the other sections.
If you would like an image/gif/video showcasing your feature, it may be best to edit the CHANGELOG file using the 
GitHub web UI since that lets you upload files directly via drag-and-drop.

Problem statement:
Add `height` kwarg to the `style` method of `Chatbot`
I think we support this on certain components, makes sense for the  Chatbot but might also make sense for other `blockish` components too.


- [ ] I have searched to see if a similar issue already exists.


**Is your feature request related to a problem? Please describe.**  
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

**Describe the solution you'd like**  
A clear and concise description of what you want to happen.

**Additional context**  
Add any other context or screenshots about the feature request here.

Hints from issue discussion:

Commit message: Merge branch 'main' into chatbot-height

Patch to review:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0108046f9c..6e6f7bc0b4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -40,6 +40,11 @@ By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3297](https://git
 - Added `info=` argument to form components to enable extra context provided to users, by [@aliabid94](https://github.com/aliabid94) in [PR 3291](https://github.com/gradio-app/gradio/pull/3291)
 - Allow developers to access the username of a logged-in user from the `gr.Request()` object using the `.username` attribute by [@abidlabs](https://github.com/abidlabs) in [PR 3296](https://github.com/gradio-app/gradio/pull/3296)
 - Add `preview` option to `Gallery.style` that launches the gallery in preview mode when first loaded by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3345](https://github.com/gradio-app/gradio/pull/3345) 
+- Support new embeds for huggingface spaces subdomains by [@pngwn](https://github.com/pngwn) in [PR 3367](https://github.com/gradio-app/gradio/pull/3367)
+- 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)```
+
 
 
 ## Bug Fixes:
@@ -60,7 +65,7 @@ By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3297](https://git
 - Ensure that the initial empty value for `gr.Dropdown(Multiselect=True)` is an empty list and the initial value for `gr.Dropdown(Multiselect=False)` is an empty string by [@pngwn](https://github.com/pngwn) in [PR 3338](https://github.com/gradio-app/gradio/pull/3338)
 - Ensure uploaded images respect the shape property when the canvas is also enabled by [@pngwn](https://github.com/pngwn) in [PR 3351](https://github.com/gradio-app/gradio/pull/3351)
 - Ensure that Google Analytics works correctly when gradio apps are created with `analytics_enabled=True` by [@abidlabs](https://github.com/abidlabs) in [PR 3349](https://github.com/gradio-app/gradio/pull/3349)
-- Support new embeds for huggingface spaces subdomains by [@pngwn](https://github.com/pngwn) in [PR 3367](https://github.com/gradio-app/gradio/pull/3367)
+
 
 ## Documentation Changes:
 - Added the `types` field to the dependency field in the config by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3315](https://github.com/gradio-app/gradio/pull/3315) 
diff --git a/demo/chatbot_multimodal/run.ipynb b/demo/chatbot_multimodal/run.ipynb
index 751ad31a3d..dfc59d1c79 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", "\n", "def add_text(state, text):\n", "    state = state + [(text, text + \"?\")]\n", "    return state, state\n", "\n", "def add_image(state, image):\n", "    state = state + [(f\"![](/file={image.name})\", \"Cool pic!\")]\n", "    return state, state\n", "\n", "\n", "with gr.Blocks(css=\"#chatbot .overflow-y-auto{height:500px}\") as demo:\n", "    chatbot = gr.Chatbot(elem_id=\"chatbot\")\n", "    state = gr.State([])\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, [state, txt], [state, chatbot])\n", "    txt.submit(lambda :\"\", None, txt)\n", "    btn.upload(add_image, [state, btn], [state, 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", "\n", "def add_text(state, text):\n", "    state = state + [(text, text + \"?\")]\n", "    return state, state\n", "\n", "def add_image(state, image):\n", "    state = state + [(f\"![](/file={image.name})\", \"Cool pic!\")]\n", "    return state, state\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    chatbot = gr.Chatbot(elem_id=\"chatbot\").style(height=500)\n", "    state = gr.State([])\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, [state, txt], [state, chatbot])\n", "    txt.submit(lambda :\"\", None, txt)\n", "    btn.upload(add_image, [state, btn], [state, 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 cf144ee70d..4b5fd7bce8 100644
--- a/demo/chatbot_multimodal/run.py
+++ b/demo/chatbot_multimodal/run.py
@@ -9,8 +9,8 @@ def add_image(state, image):
     return state, state
 
 
-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)
     state = gr.State([])
     
     with gr.Row():
diff --git a/gradio/components.py b/gradio/components.py
index 71ef07760d..96366f0f28 100644
--- a/gradio/components.py
+++ b/gradio/components.py
@@ -4004,16 +4004,25 @@ def postprocess(
             )
         return y
 
-    def style(self, *, color_map: Tuple[str, str] | None = None, **kwargs):
+    def style(
+        self,
+        *,
+        color_map: Tuple[str, str] | None = None,
+        height: int | None = None,
+        **kwargs,
+    ):
         """
         This method can be used to change the appearance of the Chatbot component.
         Parameters:
             color_map: Tuple containing colors to apply to user and response chat bubbles.
+            height: Height of the chatbot.
         Returns:
 
         """
         if color_map is not None:
             self._style["color_map"] = color_map
+        if height is not None:
+            self._style["height"] = height
 
         return Component.style(
             self,
diff --git a/ui/packages/chatbot/src/ChatBot.svelte b/ui/packages/chatbot/src/ChatBot.svelte
index eef200a6c4..ae3c5cbada 100644
--- a/ui/packages/chatbot/src/ChatBot.svelte
+++ b/ui/packages/chatbot/src/ChatBot.svelte
@@ -38,7 +38,6 @@
 	}
 
 	$: _colors = get_colors();
-
 	function get_color(c: string) {
 		if (c in colors) {
 			return colors[c as keyof typeof colors].primary;
@@ -56,7 +55,8 @@
 	}
 </script>
 
-<div class="wrap" bind:this={div}>
+<!-- style={"height:" + height} -->
+<div class="wrap" style:height={`${style.height}px` || `100%`} bind:this={div}>
 	<div class="message-wrap">
 		{#each _value as message, i}
 			<div
@@ -96,7 +96,6 @@
 
 <style>
 	.wrap {
-		height: 100%;
 		overflow-y: auto;
 	}
 


Code review comments:
diff_hunk: @@ -56,7 +55,8 @@
 	}
 </script>
 
-<div class="wrap" bind:this={div}>
+<!-- style={"height:" + height} -->
path: ui/packages/chatbot/src/ChatBot.svelte
text: @user1:
remove comment