Repository: gradio-app/gradio
Pull request: chatbot component tweaks
## Description

Please include a concise summary, in clear English, of the changes in this pull request. If it closes an issue, please mention it here.

Closes #8544 

## 🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is [an existing issue](https://github.com/gradio-app/gradio/issues) for this change. If not, please create an issue before you create this PR, unless the fix is very small. 

Not adhering to this guideline will result in the PR being closed. 

## Tests

1. PRs will only be merged if tests pass on CI. To run the tests locally, please set up [your Gradio environment locally](https://github.com/gradio-app/gradio/blob/main/CONTRIBUTING.md) and run the tests: `bash scripts/run_all_tests.sh`

2. You may need to run the linters: `bash scripts/format_backend.sh` and `bash scripts/format_frontend.sh`
  


Problem statement:
chatbot components
### Describe the bug

- if you make the screen small, you can't see the plots properly
- the gallery has a gap at the bottom
- you can't select a different gallery image, it just full screens everything
- the thumb up/ down buttons overlap some of the components
- the autoscrolling sometimes doesn't work

### Have you searched existing issues?  🔎

- [X] I have searched and found no existing issues

### Reproduction

```python
import gradio as gr

```


### Screenshot

_No response_

### Logs

_No response_

### System Info

```shell
asd
```


### Severity

I can work around it

Hints from issue discussion:

Commit message: remove comment

Patch to review:
diff --git a/.changeset/clear-cloths-dream.md b/.changeset/clear-cloths-dream.md
new file mode 100644
index 0000000000..f0a8c644c4
--- /dev/null
+++ b/.changeset/clear-cloths-dream.md
@@ -0,0 +1,13 @@
+---
+"@gradio/audio": patch
+"@gradio/chatbot": patch
+"@gradio/gallery": patch
+"@gradio/icons": patch
+"@gradio/image": patch
+"@gradio/plot": patch
+"@gradio/video": patch
+"@gradio/wasm": patch
+"gradio": patch
+---
+
+fix:chatbot component tweaks
diff --git a/.config/playwright.config.js b/.config/playwright.config.js
index 59a26b78f3..68334b214f 100644
--- a/.config/playwright.config.js
+++ b/.config/playwright.config.js
@@ -19,7 +19,7 @@ const base = defineConfig({
 	timeout: 30000,
 	testMatch: /.*\.spec\.ts/,
 	testDir: "..",
-	workers: process.env.CI ? 1 : undefined,
+	workers: 1,
 	retries: 3
 });
 
diff --git a/demo/chatbot_core_components/run.ipynb b/demo/chatbot_core_components/run.ipynb
index fd5b028a72..e98fde938f 100644
--- a/demo/chatbot_core_components/run.ipynb
+++ b/demo/chatbot_core_components/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_core_components"]}, {"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": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/audio.wav https://github.com/gradio-app/gradio/raw/main/demo/chatbot_core_components/files/audio.wav\n", "!wget -q -O files/avatar.png https://github.com/gradio-app/gradio/raw/main/demo/chatbot_core_components/files/avatar.png\n", "!wget -q -O files/sample.txt https://github.com/gradio-app/gradio/raw/main/demo/chatbot_core_components/files/sample.txt\n", "!wget -q -O files/world.mp4 https://github.com/gradio-app/gradio/raw/main/demo/chatbot_core_components/files/world.mp4"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "import plotly.express as px\n", "import random\n", "\n", "# Chatbot demo with multimodal input (text, markdown, LaTeX, code blocks, image, audio, & video). Plus shows support for streaming text.\n", "\n", "\n", "def random_plot():\n", "    df = px.data.iris()\n", "    fig = px.scatter(\n", "        df,\n", "        x=\"sepal_width\",\n", "        y=\"sepal_length\",\n", "        color=\"species\",\n", "        size=\"petal_length\",\n", "        hover_data=[\"petal_width\"],\n", "    )\n", "    return fig\n", "\n", "\n", "color_map = {\n", "    \"harmful\": \"crimson\",\n", "    \"neutral\": \"gray\",\n", "    \"beneficial\": \"green\",\n", "}\n", "\n", "\n", "def html_src(harm_level):\n", "    return f\"\"\"\n", "<div style=\"display: flex; gap: 5px;padding: 2px 4px;margin-top: -40px\">\n", "  <div style=\"background-color: {color_map[harm_level]}; padding: 2px; border-radius: 5px;\">\n", "  {harm_level}\n", "  </div>\n", "</div>\n", "\"\"\"\n", "\n", "\n", "def print_like_dislike(x: gr.LikeData):\n", "    print(x.index, x.value, x.liked)\n", "\n", "\n", "def random_bokeh_plot():\n", "    from bokeh.models import ColumnDataSource, Whisker\n", "    from bokeh.plotting import figure\n", "    from bokeh.sampledata.autompg2 import autompg2 as df\n", "    from bokeh.transform import factor_cmap, jitter, factor_mark\n", "\n", "    classes = list(sorted(df[\"class\"].unique()))\n", "\n", "    p = figure(\n", "        height=400,\n", "        x_range=classes,\n", "        background_fill_color=\"#efefef\",\n", "        title=\"Car class vs HWY mpg with quintile ranges\",\n", "    )\n", "    p.xgrid.grid_line_color = None\n", "\n", "    g = df.groupby(\"class\")\n", "    upper = g.hwy.quantile(0.80)\n", "    lower = g.hwy.quantile(0.20)\n", "    source = ColumnDataSource(data=dict(base=classes, upper=upper, lower=lower))\n", "\n", "    error = Whisker(\n", "        base=\"base\",\n", "        upper=\"upper\",\n", "        lower=\"lower\",\n", "        source=source,\n", "        level=\"annotation\",\n", "        line_width=2,\n", "    )\n", "    error.upper_head.size = 20\n", "    error.lower_head.size = 20\n", "    p.add_layout(error)\n", "\n", "    p.circle(\n", "        jitter(\"class\", 0.3, range=p.x_range),\n", "        \"hwy\",\n", "        source=df,\n", "        alpha=0.5,\n", "        size=13,\n", "        line_color=\"white\",\n", "        color=factor_cmap(\"class\", \"Light6\", classes),\n", "    )\n", "    return p\n", "\n", "\n", "def random_matplotlib_plot():\n", "    import numpy as np\n", "    import pandas as pd\n", "    import matplotlib.pyplot as plt\n", "\n", "    countries = [\"USA\", \"Canada\", \"Mexico\", \"UK\"]\n", "    months = [\"January\", \"February\", \"March\", \"April\", \"May\"]\n", "    m = months.index(\"January\")\n", "    r = 3.2\n", "    start_day = 30 * m\n", "    final_day = 30 * (m + 1)\n", "    x = np.arange(start_day, final_day + 1)\n", "    pop_count = {\"USA\": 350, \"Canada\": 40, \"Mexico\": 300, \"UK\": 120}\n", "    df = pd.DataFrame({\"day\": x})\n", "    for country in countries:\n", "        df[country] = x ** (r) * (pop_count[country] + 1)\n", "\n", "    fig = plt.figure()\n", "    plt.plot(df[\"day\"], df[countries].to_numpy())\n", "    plt.title(\"Outbreak in \" + \"January\")\n", "    plt.ylabel(\"Cases\")\n", "    plt.xlabel(\"Days since Day 0\")\n", "    plt.legend(countries)\n", "    return fig\n", "\n", "\n", "def add_message(history, message):\n", "    for x in message[\"files\"]:\n", "        history.append(((x,), None))\n", "    if message[\"text\"] is not None:\n", "        history.append((message[\"text\"], None))\n", "    return history, gr.MultimodalTextbox(value=None, interactive=False)\n", "\n", "\n", "def bot(history, response_type):\n", "    if response_type == \"plot\":\n", "        history[-1][1] = gr.Plot(random_plot())\n", "    elif response_type == \"bokeh_plot\":\n", "        history[-1][1] = gr.Plot(random_bokeh_plot())\n", "    elif response_type == \"matplotlib_plot\":\n", "        history[-1][1] = gr.Plot(random_matplotlib_plot())\n", "    elif response_type == \"gallery\":\n", "        history[-1][1] = gr.Gallery(\n", "            [os.path.join(\"files\", \"avatar.png\"), os.path.join(\"files\", \"avatar.png\")]\n", "        )\n", "    elif response_type == \"image\":\n", "        history[-1][1] = gr.Image(os.path.join(\"files\", \"avatar.png\"))\n", "    elif response_type == \"video\":\n", "        history[-1][1] = gr.Video(os.path.join(\"files\", \"world.mp4\"))\n", "    elif response_type == \"audio\":\n", "        history[-1][1] = gr.Audio(os.path.join(\"files\", \"audio.wav\"))\n", "    elif response_type == \"audio_file\":\n", "        history[-1][1] = (os.path.join(\"files\", \"audio.wav\"), \"description\")\n", "    elif response_type == \"image_file\":\n", "        history[-1][1] = (os.path.join(\"files\", \"avatar.png\"), \"description\")\n", "    elif response_type == \"video_file\":\n", "        history[-1][1] = (os.path.join(\"files\", \"world.mp4\"), \"description\")\n", "    elif response_type == \"txt_file\":\n", "        history[-1][1] = (os.path.join(\"files\", \"sample.txt\"), \"description\")\n", "    elif response_type == \"html\":\n", "        history[-1][1] = gr.HTML(\n", "            html_src(random.choice([\"harmful\", \"neutral\", \"beneficial\"]))\n", "        )\n", "    else:\n", "        history[-1][1] = \"Cool!\"\n", "    return history\n", "\n", "\n", "fig = random_plot()\n", "\n", "with gr.Blocks(fill_height=True) as demo:\n", "    chatbot = gr.Chatbot(\n", "        elem_id=\"chatbot\",\n", "        bubble_full_width=False,\n", "        scale=1,\n", "    )\n", "    response_type = gr.Radio(\n", "        [\n", "            \"audio_file\",\n", "            \"image_file\",\n", "            \"video_file\",\n", "            \"txt_file\",\n", "            \"plot\",\n", "            \"matplotlib_plot\",\n", "            \"bokeh_plot\",\n", "            \"image\",\n", "            \"text\",\n", "            \"gallery\",\n", "            \"video\",\n", "            \"audio\",\n", "            \"html\",\n", "        ],\n", "        value=\"text\",\n", "        label=\"Response Type\",\n", "    )\n", "\n", "    chat_input = gr.MultimodalTextbox(\n", "        interactive=True,\n", "        placeholder=\"Enter message or upload file...\",\n", "        show_label=False,\n", "    )\n", "\n", "    chat_msg = chat_input.submit(\n", "        add_message, [chatbot, chat_input], [chatbot, chat_input]\n", "    )\n", "    bot_msg = chat_msg.then(\n", "        bot, [chatbot, response_type], chatbot, api_name=\"bot_response\"\n", "    )\n", "    bot_msg.then(lambda: gr.MultimodalTextbox(interactive=True), None, [chat_input])\n", "\n", "    chatbot.like(print_like_dislike, None, None)\n", "\n", "demo.queue()\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_core_components"]}, {"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": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/audio.wav https://github.com/gradio-app/gradio/raw/main/demo/chatbot_core_components/files/audio.wav\n", "!wget -q -O files/avatar.png https://github.com/gradio-app/gradio/raw/main/demo/chatbot_core_components/files/avatar.png\n", "!wget -q -O files/sample.txt https://github.com/gradio-app/gradio/raw/main/demo/chatbot_core_components/files/sample.txt\n", "!wget -q -O files/world.mp4 https://github.com/gradio-app/gradio/raw/main/demo/chatbot_core_components/files/world.mp4"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "import plotly.express as px\n", "import random\n", "\n", "# Chatbot demo with multimodal input (text, markdown, LaTeX, code blocks, image, audio, & video). Plus shows support for streaming text.\n", "\n", "txt = \"\"\"\n", "Absolutely! The mycorrhizal network, often referred to as the \"Wood Wide Web,\" is a symbiotic association between fungi and the roots of most plant species. Here\u2019s a deeper dive into how it works and its implications:\n", "\n", "### How It Works\n", "\n", "1. **Symbiosis**: Mycorrhizal fungi attach to plant roots, extending far into the soil. The plant provides the fungi with carbohydrates produced via photosynthesis. In return, the fungi help the plant absorb water and essential nutrients like phosphorus and nitrogen from the soil.\n", "\n", "2. **Network Formation**: The fungal hyphae (thread-like structures) connect individual plants, creating an extensive underground network. This network can link many plants together, sometimes spanning entire forests.\n", "\n", "3. **Communication**: Trees and plants use this network to communicate and share resources. For example, a tree under attack by pests can send chemical signals through the mycorrhizal network to warn neighboring trees. These trees can then produce defensive chemicals to prepare for the impending threat.\n", "\n", "### Benefits and Functions\n", "\n", "1. **Resource Sharing**: The network allows for the redistribution of resources among plants. For instance, a large, established tree might share excess nutrients and water with smaller, younger trees, promoting overall forest health.\n", "\n", "2. **Defense Mechanism**: The ability to share information about pests and diseases enhances the resilience of plant communities. This early warning system helps plants activate their defenses before they are directly affected.\n", "\n", "3. **Support for Seedlings**: Young seedlings, which have limited root systems, benefit immensely from the mycorrhizal network. They receive nutrients and water from larger plants, increasing their chances of survival and growth.\n", "\n", "### Ecological Impact\n", "\n", "1. **Biodiversity**: The mycorrhizal network supports biodiversity by fostering a cooperative environment. Plants of different species can coexist and thrive because of the shared resources and information.\n", "\n", "2. **Forest Health**: The network enhances the overall health of forests. By enabling efficient nutrient cycling and supporting plant defenses, it contributes to the stability and longevity of forest ecosystems.\n", "\n", "3. **Climate Change Mitigation**: Healthy forests act as significant carbon sinks, absorbing carbon dioxide from the atmosphere. The mycorrhizal network plays a critical role in maintaining forest health and, consequently, in mitigating climate change.\n", "\n", "### Research and Discoveries\n", "\n", "1. **Suzanne Simard's Work**: Ecologist Suzanne Simard\u2019s research has been pivotal in uncovering the complexities of the mycorrhizal network. She demonstrated that trees of different species can share resources and that \"mother trees\" (large, older trees) play a crucial role in nurturing younger plants.\n", "\n", "2. **Implications for Conservation**: Understanding the mycorrhizal network has significant implications for conservation efforts. It highlights the importance of preserving not just individual trees but entire ecosystems, including the fungal networks that sustain them.\n", "\n", "### Practical Applications\n", "\n", "1. **Agriculture**: Farmers and horticulturists are exploring the use of mycorrhizal fungi to improve crop yields and soil health. By incorporating these fungi into agricultural practices, they can reduce the need for chemical fertilizers and enhance plant resilience.\n", "\n", "2. **Reforestation**: In reforestation projects, introducing mycorrhizal fungi can accelerate the recovery of degraded lands. The fungi help establish healthy plant communities, ensuring the success of newly planted trees.\n", "\n", "The \"Wood Wide Web\" exemplifies the intricate and often hidden connections that sustain life on Earth. It\u2019s a reminder of the profound interdependence within natural systems and the importance of preserving these delicate relationships.\n", "\"\"\"\n", "\n", "\n", "def random_plot():\n", "    df = px.data.iris()\n", "    fig = px.scatter(\n", "        df,\n", "        x=\"sepal_width\",\n", "        y=\"sepal_length\",\n", "        color=\"species\",\n", "        size=\"petal_length\",\n", "        hover_data=[\"petal_width\"],\n", "    )\n", "    return fig\n", "\n", "\n", "color_map = {\n", "    \"harmful\": \"crimson\",\n", "    \"neutral\": \"gray\",\n", "    \"beneficial\": \"green\",\n", "}\n", "\n", "\n", "def html_src(harm_level):\n", "    return f\"\"\"\n", "<div style=\"display: flex; gap: 5px;\">\n", "  <div style=\"background-color: {color_map[harm_level]}; padding: 2px; border-radius: 5px;\">\n", "  {harm_level}\n", "  </div>\n", "</div>\n", "\"\"\"\n", "\n", "\n", "def print_like_dislike(x: gr.LikeData):\n", "    print(x.index, x.value, x.liked)\n", "\n", "\n", "def random_bokeh_plot():\n", "    from bokeh.models import ColumnDataSource, Whisker\n", "    from bokeh.plotting import figure\n", "    from bokeh.sampledata.autompg2 import autompg2 as df\n", "    from bokeh.transform import factor_cmap, jitter, factor_mark\n", "\n", "    classes = list(sorted(df[\"class\"].unique()))\n", "\n", "    p = figure(\n", "        height=400,\n", "        x_range=classes,\n", "        background_fill_color=\"#efefef\",\n", "        title=\"Car class vs HWY mpg with quintile ranges\",\n", "    )\n", "    p.xgrid.grid_line_color = None\n", "\n", "    g = df.groupby(\"class\")\n", "    upper = g.hwy.quantile(0.80)\n", "    lower = g.hwy.quantile(0.20)\n", "    source = ColumnDataSource(data=dict(base=classes, upper=upper, lower=lower))\n", "\n", "    error = Whisker(\n", "        base=\"base\",\n", "        upper=\"upper\",\n", "        lower=\"lower\",\n", "        source=source,\n", "        level=\"annotation\",\n", "        line_width=2,\n", "    )\n", "    error.upper_head.size = 20\n", "    error.lower_head.size = 20\n", "    p.add_layout(error)\n", "\n", "    p.circle(\n", "        jitter(\"class\", 0.3, range=p.x_range),\n", "        \"hwy\",\n", "        source=df,\n", "        alpha=0.5,\n", "        size=13,\n", "        line_color=\"white\",\n", "        color=factor_cmap(\"class\", \"Light6\", classes),\n", "    )\n", "    return p\n", "\n", "\n", "def random_matplotlib_plot():\n", "    import numpy as np\n", "    import pandas as pd\n", "    import matplotlib.pyplot as plt\n", "\n", "    countries = [\"USA\", \"Canada\", \"Mexico\", \"UK\"]\n", "    months = [\"January\", \"February\", \"March\", \"April\", \"May\"]\n", "    m = months.index(\"January\")\n", "    r = 3.2\n", "    start_day = 30 * m\n", "    final_day = 30 * (m + 1)\n", "    x = np.arange(start_day, final_day + 1)\n", "    pop_count = {\"USA\": 350, \"Canada\": 40, \"Mexico\": 300, \"UK\": 120}\n", "    df = pd.DataFrame({\"day\": x})\n", "    for country in countries:\n", "        df[country] = x ** (r) * (pop_count[country] + 1)\n", "\n", "    fig = plt.figure()\n", "    plt.plot(df[\"day\"], df[countries].to_numpy())\n", "    plt.title(\"Outbreak in \" + \"January\")\n", "    plt.ylabel(\"Cases\")\n", "    plt.xlabel(\"Days since Day 0\")\n", "    plt.legend(countries)\n", "    return fig\n", "\n", "\n", "def add_message(history, message):\n", "    for x in message[\"files\"]:\n", "        history.append(((x,), None))\n", "    if message[\"text\"] is not None:\n", "        history.append((message[\"text\"], None))\n", "    return history, gr.MultimodalTextbox(value=None, interactive=False)\n", "\n", "\n", "def bot(history, response_type):\n", "    if response_type == \"plot\":\n", "        history[-1][1] = gr.Plot(random_plot())\n", "    elif response_type == \"bokeh_plot\":\n", "        history[-1][1] = gr.Plot(random_bokeh_plot())\n", "    elif response_type == \"matplotlib_plot\":\n", "        history[-1][1] = gr.Plot(random_matplotlib_plot())\n", "    elif response_type == \"gallery\":\n", "        history[-1][1] = gr.Gallery(\n", "            [os.path.join(\"files\", \"avatar.png\"), os.path.join(\"files\", \"avatar.png\")]\n", "        )\n", "    elif response_type == \"image\":\n", "        history[-1][1] = gr.Image(os.path.join(\"files\", \"avatar.png\"))\n", "    elif response_type == \"video\":\n", "        history[-1][1] = gr.Video(os.path.join(\"files\", \"world.mp4\"))\n", "    elif response_type == \"audio\":\n", "        history[-1][1] = gr.Audio(os.path.join(\"files\", \"audio.wav\"))\n", "    elif response_type == \"audio_file\":\n", "        history[-1][1] = (os.path.join(\"files\", \"audio.wav\"), \"description\")\n", "    elif response_type == \"image_file\":\n", "        history[-1][1] = (os.path.join(\"files\", \"avatar.png\"), \"description\")\n", "    elif response_type == \"video_file\":\n", "        history[-1][1] = (os.path.join(\"files\", \"world.mp4\"), \"description\")\n", "    elif response_type == \"txt_file\":\n", "        history[-1][1] = (os.path.join(\"files\", \"sample.txt\"), \"description\")\n", "    elif response_type == \"html\":\n", "        history[-1][1] = gr.HTML(\n", "            html_src(random.choice([\"harmful\", \"neutral\", \"beneficial\"]))\n", "        )\n", "    else:\n", "        history[-1][1] = txt\n", "    return history\n", "\n", "\n", "fig = random_plot()\n", "\n", "with gr.Blocks(fill_height=True) as demo:\n", "    chatbot = gr.Chatbot(\n", "        elem_id=\"chatbot\",\n", "        bubble_full_width=False,\n", "        scale=1,\n", "        show_copy_button=True,\n", "        avatar_images=(\n", "            None,  # os.path.join(\"files\", \"avatar.png\"),\n", "            os.path.join(\"files\", \"avatar.png\"),\n", "        ),\n", "        # layout=\"panel\",\n", "    )\n", "    response_type = gr.Radio(\n", "        [\n", "            \"audio_file\",\n", "            \"image_file\",\n", "            \"video_file\",\n", "            \"txt_file\",\n", "            \"plot\",\n", "            \"matplotlib_plot\",\n", "            \"bokeh_plot\",\n", "            \"image\",\n", "            \"text\",\n", "            \"gallery\",\n", "            \"video\",\n", "            \"audio\",\n", "            \"html\",\n", "        ],\n", "        value=\"text\",\n", "        label=\"Response Type\",\n", "    )\n", "\n", "    chat_input = gr.MultimodalTextbox(\n", "        interactive=True,\n", "        placeholder=\"Enter message or upload file...\",\n", "        show_label=False,\n", "    )\n", "\n", "    chat_msg = chat_input.submit(\n", "        add_message, [chatbot, chat_input], [chatbot, chat_input]\n", "    )\n", "    bot_msg = chat_msg.then(\n", "        bot, [chatbot, response_type], chatbot, api_name=\"bot_response\"\n", "    )\n", "    bot_msg.then(lambda: gr.MultimodalTextbox(interactive=True), None, [chat_input])\n", "\n", "    chatbot.like(print_like_dislike, None, None)\n", "\n", "demo.queue()\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/chatbot_core_components/run.py b/demo/chatbot_core_components/run.py
index 8462f41f92..e60e2d58d1 100644
--- a/demo/chatbot_core_components/run.py
+++ b/demo/chatbot_core_components/run.py
@@ -5,6 +5,48 @@
 
 # Chatbot demo with multimodal input (text, markdown, LaTeX, code blocks, image, audio, & video). Plus shows support for streaming text.
 
+txt = """
+Absolutely! The mycorrhizal network, often referred to as the "Wood Wide Web," is a symbiotic association between fungi and the roots of most plant species. Here’s a deeper dive into how it works and its implications:
+
+### How It Works
+
+1. **Symbiosis**: Mycorrhizal fungi attach to plant roots, extending far into the soil. The plant provides the fungi with carbohydrates produced via photosynthesis. In return, the fungi help the plant absorb water and essential nutrients like phosphorus and nitrogen from the soil.
+
+2. **Network Formation**: The fungal hyphae (thread-like structures) connect individual plants, creating an extensive underground network. This network can link many plants together, sometimes spanning entire forests.
+
+3. **Communication**: Trees and plants use this network to communicate and share resources. For example, a tree under attack by pests can send chemical signals through the mycorrhizal network to warn neighboring trees. These trees can then produce defensive chemicals to prepare for the impending threat.
+
+### Benefits and Functions
+
+1. **Resource Sharing**: The network allows for the redistribution of resources among plants. For instance, a large, established tree might share excess nutrients and water with smaller, younger trees, promoting overall forest health.
+
+2. **Defense Mechanism**: The ability to share information about pests and diseases enhances the resilience of plant communities. This early warning system helps plants activate their defenses before they are directly affected.
+
+3. **Support for Seedlings**: Young seedlings, which have limited root systems, benefit immensely from the mycorrhizal network. They receive nutrients and water from larger plants, increasing their chances of survival and growth.
+
+### Ecological Impact
+
+1. **Biodiversity**: The mycorrhizal network supports biodiversity by fostering a cooperative environment. Plants of different species can coexist and thrive because of the shared resources and information.
+
+2. **Forest Health**: The network enhances the overall health of forests. By enabling efficient nutrient cycling and supporting plant defenses, it contributes to the stability and longevity of forest ecosystems.
+
+3. **Climate Change Mitigation**: Healthy forests act as significant carbon sinks, absorbing carbon dioxide from the atmosphere. The mycorrhizal network plays a critical role in maintaining forest health and, consequently, in mitigating climate change.
+
+### Research and Discoveries
+
+1. **Suzanne Simard's Work**: Ecologist Suzanne Simard’s research has been pivotal in uncovering the complexities of the mycorrhizal network. She demonstrated that trees of different species can share resources and that "mother trees" (large, older trees) play a crucial role in nurturing younger plants.
+
+2. **Implications for Conservation**: Understanding the mycorrhizal network has significant implications for conservation efforts. It highlights the importance of preserving not just individual trees but entire ecosystems, including the fungal networks that sustain them.
+
+### Practical Applications
+
+1. **Agriculture**: Farmers and horticulturists are exploring the use of mycorrhizal fungi to improve crop yields and soil health. By incorporating these fungi into agricultural practices, they can reduce the need for chemical fertilizers and enhance plant resilience.
+
+2. **Reforestation**: In reforestation projects, introducing mycorrhizal fungi can accelerate the recovery of degraded lands. The fungi help establish healthy plant communities, ensuring the success of newly planted trees.
+
+The "Wood Wide Web" exemplifies the intricate and often hidden connections that sustain life on Earth. It’s a reminder of the profound interdependence within natural systems and the importance of preserving these delicate relationships.
+"""
+
 
 def random_plot():
     df = px.data.iris()
@@ -28,7 +70,7 @@ def random_plot():
 
 def html_src(harm_level):
     return f"""
-<div style="display: flex; gap: 5px;padding: 2px 4px;margin-top: -40px">
+<div style="display: flex; gap: 5px;">
   <div style="background-color: {color_map[harm_level]}; padding: 2px; border-radius: 5px;">
   {harm_level}
   </div>
@@ -149,7 +191,7 @@ def bot(history, response_type):
             html_src(random.choice(["harmful", "neutral", "beneficial"]))
         )
     else:
-        history[-1][1] = "Cool!"
+        history[-1][1] = txt
     return history
 
 
@@ -160,6 +202,12 @@ def bot(history, response_type):
         elem_id="chatbot",
         bubble_full_width=False,
         scale=1,
+        show_copy_button=True,
+        avatar_images=(
+            None,  # os.path.join("files", "avatar.png"),
+            os.path.join("files", "avatar.png"),
+        ),
+        # layout="panel",
     )
     response_type = gr.Radio(
         [
diff --git a/js/audio/player/AudioPlayer.svelte b/js/audio/player/AudioPlayer.svelte
index ea5e0f6e4f..0cd9156c1f 100644
--- a/js/audio/player/AudioPlayer.svelte
+++ b/js/audio/player/AudioPlayer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from "svelte";
+	import { onMount, tick } from "svelte";
 	import { Music } from "@gradio/icons";
 	import { format_time, type I18nFormatter } from "@gradio/utils";
 	import WaveSurfer from "wavesurfer.js";
@@ -45,6 +45,7 @@
 		pause: undefined;
 		edit: undefined;
 		end: undefined;
+		load: undefined;
 	}>();
 
 	const create_waveform = (): void => {
@@ -98,6 +99,10 @@
 		dispatch("play");
 	});
 
+	$: waveform?.on("load", () => {
+		dispatch("load");
+	});
+
 	const handle_trim_audio = async (
 		start: number,
 		end: number
@@ -149,6 +154,7 @@
 		src={value.url}
 		controls
 		autoplay={waveform_settings.autoplay}
+		on:load
 	/>
 {:else}
 	<div
diff --git a/js/audio/static/StaticAudio.svelte b/js/audio/static/StaticAudio.svelte
index fd3a5b9acd..ba6fa7fc44 100644
--- a/js/audio/static/StaticAudio.svelte
+++ b/js/audio/static/StaticAudio.svelte
@@ -70,6 +70,7 @@
 		on:pause
 		on:play
 		on:stop
+		on:load
 	/>
 {:else}
 	<Empty size="small">
diff --git a/js/chatbot/Index.svelte b/js/chatbot/Index.svelte
index e62736403e..94bf71cb60 100644
--- a/js/chatbot/Index.svelte
+++ b/js/chatbot/Index.svelte
@@ -31,7 +31,7 @@
 	export let likeable = false;
 	export let show_share_button = false;
 	export let rtl = false;
-	export let show_copy_button = false;
+	export let show_copy_button = true;
 	export let sanitize_html = true;
 	export let bubble_full_width = true;
 	export let layout: "bubble" | "panel" = "bubble";
@@ -88,7 +88,7 @@
 			<BlockLabel
 				{show_label}
 				Icon={Chat}
-				float={false}
+				float={true}
 				label={label || "Chatbot"}
 			/>
 		{/if}
diff --git a/js/chatbot/package.json b/js/chatbot/package.json
index 8a22df63b2..ccb6bff809 100644
--- a/js/chatbot/package.json
+++ b/js/chatbot/package.json
@@ -17,6 +17,7 @@
 		"@gradio/theme": "workspace:^",
 		"@gradio/upload": "workspace:^",
 		"@gradio/utils": "workspace:^",
+		"@gradio/wasm": "workspace:^",
 		"@types/dompurify": "^3.0.2",
 		"@types/katex": "^0.16.0",
 		"@types/prismjs": "1.26.4",
diff --git a/js/chatbot/shared/ButtonPanel.svelte b/js/chatbot/shared/ButtonPanel.svelte
new file mode 100644
index 0000000000..cf97d9d8f5
--- /dev/null
+++ b/js/chatbot/shared/ButtonPanel.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+	import LikeDislike from "./LikeDislike.svelte";
+	import Copy from "./Copy.svelte";
+	import type { FileData } from "@gradio/client";
+	import DownloadIcon from "./Download.svelte";
+	import { DownloadLink } from "@gradio/wasm/svelte";
+
+	export let likeable: boolean;
+	export let show_copy_button: boolean;
+	export let show: boolean;
+	export let message: Record<string, any>;
+	export let position: "right" | "left";
+	export let avatar: FileData | null;
+	export let show_download = false;
+	export let handle_action: (selected: string | null) => void;
+	export let layout: "bubble" | "panel";
+
+	$: show_copy = show_copy_button && message && message?.type === "text";
+	$: show_download =
+		(show_download && message?.value?.video?.url) || message?.value?.url;
+</script>
+
+{#if show}
+	<div
+		class="message-buttons-{position} {layout}  message-buttons {avatar !==
+			null && 'with-avatar'}"
+	>
+		{#if show_copy}
+			<Copy value={message.value} />
+		{/if}
+		{#if show_download}
+			<DownloadLink
+				href={message?.value?.video?.url || message?.value?.url}
+				download={message?.value?.video?.orig_name ||
+					message.value.orig_name ||
+					"image"}
+			>
+				<span class="icon-wrap">
+					<DownloadIcon />
+				</span>
+			</DownloadLink>
+		{/if}
+		{#if likeable && position === "left"}
+			<LikeDislike {handle_action} padded={show_copy || show_download} />
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.icon-wrap {
+		display: block;
+		color: var(--body-text-color-subdued);
+	}
+
+	.icon-wrap:hover {
+		color: var(--body-text-color);
+	}
+	.message-buttons-right,
+	.message-buttons-left {
+		border-radius: var(--radius-md);
+		display: flex;
+		align-items: center;
+		bottom: 0;
+		height: var(--size-7);
+		align-self: self-end;
+		/* position: absolute; */
+		bottom: -15px;
+		margin: 2px;
+		padding-left: 5px;
+		z-index: 1;
+		padding-bottom: var(--spacing-xl);
+		padding: var(--spacing-md) 2px;
+	}
+	.message-buttons-left {
+		align-self: start;
+		left: 0px;
+	}
+	.message-buttons-right {
+		right: 5px;
+	}
+
+	.panel.message-buttons-left,
+	.panel.message-buttons-right {
+		margin: 10px 0 2px 0;
+	}
+
+	.message-buttons {
+		left: 0px;
+		right: 0px;
+		top: unset;
+		bottom: calc(-30px - var(--spacing-xl));
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		gap: 0px;
+	}
+
+	.message-buttons :global(> *) {
+		margin-right: 7px;
+	}
+</style>
diff --git a/js/chatbot/shared/ChatBot.svelte b/js/chatbot/shared/ChatBot.svelte
index f8e0d1e918..0c66560dd1 100644
--- a/js/chatbot/shared/ChatBot.svelte
+++ b/js/chatbot/shared/ChatBot.svelte
@@ -8,7 +8,8 @@
 		afterUpdate,
 		createEventDispatcher,
 		type SvelteComponent,
-		type ComponentType
+		type ComponentType,
+		tick
 	} from "svelte";
 	import { ShareButton } from "@gradio/atoms";
 	import { Image } from "@gradio/image/shared";
@@ -17,10 +18,10 @@
 	import type { SelectData, LikeData } from "@gradio/utils";
 	import { MarkdownCode as Markdown } from "@gradio/markdown";
 	import { type FileData, type Client } from "@gradio/client";
-	import Copy from "./Copy.svelte";
 	import type { I18nFormatter } from "js/app/src/gradio_helper";
-	import LikeDislike from "./LikeDislike.svelte";
 	import Pending from "./Pending.svelte";
+	import Component from "./Component.svelte";
+	import LikeButtons from "./ButtonPanel.svelte";
 
 	export let _fetch: typeof fetch;
 	export let load_component: Gradio["load_component"];
@@ -135,25 +136,22 @@
 			div && div.offsetHeight + div.scrollTop > div.scrollHeight - 100;
 	});
 
-	const scroll = (): void => {
-		if (autoscroll) {
-			div.scrollTo(0, div.scrollHeight);
-		}
-	};
+	async function scroll(): Promise<void> {
+		await tick();
+		requestAnimationFrame(() => {
+			if (autoscroll) {
+				div?.scrollTo(0, div.scrollHeight);
+			}
+		});
+	}
 
 	let image_preview_source: string;
 	let image_preview_source_alt: string;
 	let is_image_preview_open = false;
-	let image_preview_close_button: HTMLButtonElement;
 
 	afterUpdate(() => {
 		if (autoscroll || _components) {
 			scroll();
-			div.querySelectorAll("img").forEach((n) => {
-				n.addEventListener("load", () => {
-					scroll();
-				});
-			});
 		}
 		div.querySelectorAll("img").forEach((n) => {
 			n.addEventListener("click", (e) => {
@@ -219,7 +217,7 @@
 	aria-label="chatbot conversation"
 	aria-live="polite"
 >
-	<div class="message-wrap" class:bubble-gap={layout === "bubble"} use:copy>
+	<div class="message-wrap" use:copy>
 		{#if value !== null && value.length > 0}
 			{#each value as message_pair, i}
 				{#each message_pair as message, j}
@@ -231,7 +229,6 @@
 									alt={image_preview_source_alt}
 								/>
 								<button
-									bind:this={image_preview_close_button}
 									class="image-preview-close-button"
 									on:click={() => {
 										is_image_preview_open = false;
@@ -239,7 +236,12 @@
 								>
 							</div>
 						{/if}
-						<div class="message-row {layout} {j == 0 ? 'user-row' : 'bot-row'}">
+						<div
+							class="message-row {layout} {j == 0 ? 'user-row' : 'bot-row'}"
+							class:with_avatar={avatar_images[j] !== null}
+							class:with_opposite_avatar={avatar_images[j === 0 ? 1 : 0] !==
+								null}
+						>
 							{#if avatar_images[j] !== null}
 								<div class="avatar-container">
 									<Image
@@ -249,160 +251,111 @@
 									/>
 								</div>
 							{/if}
-
-							<div
-								class="message {j == 0 ? 'user' : 'bot'}"
-								class:message-fit={layout === "bubble" && !bubble_full_width}
-								class:panel-full-width={layout === "panel"}
-								class:message-bubble-border={layout === "bubble"}
-								class:message-markdown-disabled={!render_markdown}
-								style:text-align={rtl && j == 0 ? "left" : "right"}
-								class:component={typeof message === "object" &&
-									message !== null &&
-									"component" in message}
-								class:html={typeof message === "object" &&
+							<div class="flex-wrap">
+								<div
+									class="message {j == 0 ? 'user' : 'bot'} {typeof message ===
+										'object' &&
 									message !== null &&
-									"component" in message &&
-									message.component === "html"}
-							>
-								<button
-									data-testid={j == 0 ? "user" : "bot"}
-									class:latest={i === value.length - 1}
+									'component' in message
+										? message?.component
+										: ''}"
+									class:message-fit={!bubble_full_width}
+									class:panel-full-width={true}
 									class:message-markdown-disabled={!render_markdown}
-									style:user-select="text"
-									class:selectable
-									style:text-align={rtl ? "right" : "left"}
-									on:click={() => handle_select(i, j, message)}
-									on:keydown={(e) => {
-										if (e.key === "Enter") {
-											handle_select(i, j, message);
-										}
-									}}
-									dir={rtl ? "rtl" : "ltr"}
-									aria-label={(j == 0 ? "user" : "bot") +
-										"'s message: " +
-										(typeof message === "string"
-											? message
-											: "file" in message &&
-												  message.file !== undefined &&
-												  !Array.isArray(message.file)
-												? `a file of type ${message.file?.mime_type}, ${
-														message.file?.alt_text ??
-														message.file?.orig_name ??
-														""
-													}`
-												: "")}
+									style:text-align={rtl && j == 0 ? "left" : "right"}
+									class:component={typeof message === "object" &&
+										message !== null &&
+										"component" in message}
+									class:html={typeof message === "object" &&
+										message !== null &&
+										"component" in message &&
+										message.component === "html"}
 								>
-									{#if message.type === "text"}
-										<Markdown
-											message={message.value}
-											{latex_delimiters}
-											{sanitize_html}
-											{render_markdown}
-											{line_breaks}
-											on:load={scroll}
-										/>
-									{:else if message.type === "component" && message.component in _components}
-										{#if message.component === "gallery"}
-											<svelte:component
-												this={_components[message.component]}
-												value={message.value}
-												show_label={false}
-												{i18n}
-												label=""
-												{_fetch}
-												preview={true}
-												interactive={true}
+									<button
+										data-testid={j == 0 ? "user" : "bot"}
+										class:latest={i === value.length - 1}
+										class:message-markdown-disabled={!render_markdown}
+										style:user-select="text"
+										class:selectable
+										style:text-align={rtl ? "right" : "left"}
+										on:click={() => handle_select(i, j, message)}
+										on:keydown={(e) => {
+											if (e.key === "Enter") {
+												handle_select(i, j, message);
+											}
+										}}
+										dir={rtl ? "rtl" : "ltr"}
+										aria-label={(j == 0 ? "user" : "bot") +
+											"'s message: " +
+											(typeof message === "string"
+												? message
+												: "file" in message &&
+													  message.file !== undefined &&
+													  !Array.isArray(message.file)
+													? `a file of type ${message.file?.mime_type}, ${
+															message.file?.alt_text ??
+															message.file?.orig_name ??
+															""
+														}`
+													: "")}
+									>
+										{#if message.type === "text"}
+											<Markdown
+												message={message.value}
+												{latex_delimiters}
+												{sanitize_html}
+												{render_markdown}
+												{line_breaks}
+												on:load={scroll}
 											/>
-										{:else if message.component === "plot"}
-											<svelte:component
-												this={_components[message.component]}
-												value={message.value}
+										{:else if message.type === "component" && message.component in _components}
+											<Component
 												{target}
 												{theme_mode}
-												bokeh_version={message.props.bokeh_version}
-												caption=""
-												show_actions_button={true}
-											/>
-										{:else if message.component === "audio"}
-											<svelte:component
-												this={_components[message.component]}
+												props={message.props}
+												type={message.component}
+												components={_components}
 												value={message.value}
-												show_label={false}
-												show_share_button={true}
-												{i18n}
-												label=""
-												waveform_settings={{}}
-												waveform_options={{}}
-											/>
-										{:else if message.component === "video"}
-											<svelte:component
-												this={_components[message.component]}
-												autoplay={true}
-												value={message.value.video || message.value}
-												show_label={false}
-												show_share_button={true}
 												{i18n}
 												{upload}
-											>
-												<track kind="captions" />
-											</svelte:component>
-										{:else if message.component === "image"}
-											<svelte:component
-												this={_components[message.component]}
-												value={message.value}
-												show_label={false}
-												label="chatbot-image"
-												show_share_button={true}
-												{i18n}
-											/>
-										{:else if message.component === "html"}
-											<svelte:component
-												this={_components[message.component]}
-												value={message.value}
-												show_label={false}
-												label="chatbot-image"
-												show_share_button={true}
-												{i18n}
-												gradio={{ dispatch: () => {} }}
+												{_fetch}
+												on:load={scroll}
 											/>
+										{:else if message.type === "component" && message.component === "file"}
+											<a
+												data-testid="chatbot-file"
+												class="file-pil"
+												href={message.value.url}
+												target="_blank"
+												download={window.__is_colab__
+													? null
+													: message.value?.orig_name ||
+														message.value?.path.split("/").pop() ||
+														"file"}
+											>
+												{message.value?.orig_name ||
+													message.value?.path.split("/").pop() ||
+													"file"}
+											</a>
 										{/if}
-									{:else if message.type === "component" && message.component === "file"}
-										<a
-											data-testid="chatbot-file"
-											class="file-pil"
-											href={message.value.url}
-											target="_blank"
-											download={window.__is_colab__
-												? null
-												: message.value?.orig_name || message.value?.path}
-										>
-											{message.value?.orig_name || message.value?.path}
-										</a>
-									{/if}
-								</button>
-							</div>
-							{#if (likeable && j !== 0) || (show_copy_button && message && typeof message === "string")}
-								<div
-									class="message-buttons-{j == 0
-										? 'user'
-										: 'bot'} message-buttons-{layout} {avatar_images[j] !==
-										null && 'with-avatar'}"
-									class:message-buttons-fit={layout === "bubble" &&
-										!bubble_full_width}
-									class:bubble-buttons-user={layout === "bubble"}
-								>
-									{#if likeable && j == 1}
-										<LikeDislike
-											handle_action={(selected) =>
-												handle_like(i, j, message, selected)}
-										/>
-									{/if}
-									{#if show_copy_button && message && typeof message === "string"}
-										<Copy value={message} />
-									{/if}
+									</button>
 								</div>
-							{/if}
+								<LikeButtons
+									show={(likeable && j === 1) ||
+										(show_copy_button &&
+											message &&
+											typeof message === "string")}
+									handle_action={(selected) =>
+										handle_like(i, j, message, selected)}
+									{likeable}
+									{show_copy_button}
+									{message}
+									position={j === 0 ? "right" : "left"}
+									avatar={avatar_images[j]}
+									show_download={true}
+									{layout}
+								/>
+							</div>
 						</div>
 					{/if}
 				{/each}
@@ -425,28 +378,39 @@
 		align-items: center;
 		height: 100%;
 	}
-	.bubble-wrap {
-		padding: var(--block-padding);
+	.panel-wrap {
+		/* padding: var(--block-padding); */
+
 		width: 100%;
 		overflow-y: auto;
+		/* background: var(--background-fill-secondary); */
 	}
 
-	.panel-wrap {
+	.flex-wrap {
+		width: 100%;
+		height: 100%;
+	}
+
+	.bubble-wrap {
 		width: 100%;
 		overflow-y: auto;
+		background: var(--background-fill-secondary);
+		height: 100%;
+		padding-top: var(--spacing-xxl);
 	}
 
 	.message-wrap {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
+		margin-bottom: var(--spacing-xxl);
 	}
 
 	.bubble-gap {
 		gap: calc(var(--spacing-xxl) + var(--spacing-lg));
 	}
 
-	.message-wrap
+	/* .message-wrap
 		> div
 		:not(.avatar-container)
 		div
@@ -457,7 +421,7 @@
 		width: 400px;
 		max-width: 30vw;
 		max-height: auto;
-	}
+	} */
 
 	.message-wrap > div :global(p:not(:first-child)) {
 		margin-top: var(--spacing-xxl);
@@ -467,22 +431,33 @@
 		position: relative;
 		display: flex;
 		flex-direction: column;
-		align-self: flex-end;
-		background: var(--background-fill-secondary);
+
 		width: calc(100% - var(--spacing-xxl));
 		color: var(--body-text-color);
 		font-size: var(--chatbot-body-text-size);
 		overflow-wrap: break-word;
-		padding-right: calc(var(--spacing-xxl) + var(--spacing-md));
-		padding: calc(var(--spacing-xxl) + var(--spacing-sm));
 	}
+
 	.message :global(.prose) {
 		font-size: var(--chatbot-body-text-size);
 	}
 
 	.message-bubble-border {
 		border-width: 1px;
-		border-radius: var(--radius-xxl);
+		border-radius: var(--radius-lg);
+	}
+
+	.bubble .user {
+		border-width: 1px;
+		border-radius: var(--radius-xl);
+		align-self: flex-start;
+		border-bottom-right-radius: 0;
+
+		box-shadow: var(--shadow-drop-lg);
+	}
+
+	.user {
+		align-self: flex-end;
 	}
 
 	.message-fit {
@@ -490,55 +465,89 @@
 	}
 
 	.panel-full-width {
-		padding: calc(var(--spacing-xxl) * 2);
 		width: 100%;
 	}
 	.message-markdown-disabled {
 		white-space: pre-line;
 	}
 
-	@media (max-width: 480px) {
-		.panel-full-width {
-			padding: calc(var(--spacing-xxl) * 2);
-		}
-	}
-
-	.user {
+	.bubble .user {
 		align-self: flex-start;
 		border-bottom-right-radius: 0;
 		text-align: right;
+		padding: var(--spacing-sm) var(--spacing-xl);
 	}
-	.bot {
-		border-bottom-left-radius: 0;
-		text-align: left;
+
+	.panel .user :global(*) {
+		text-align: right;
 	}
 
 	/* Colors */
-	.bot {
+	.bubble .bot {
 		border-color: var(--border-color-primary);
 		background: var(--background-fill-secondary);
 	}
 
-	.user {
+	.bubble .user {
 		border-color: var(--border-color-accent-subdued);
 		background-color: var(--color-accent-soft);
 	}
+
 	.message-row {
 		display: flex;
-		flex-direction: row;
+		/* flex-direction: column; */
 		position: relative;
 	}
 
-	.message-row.panel.user-row {
-		background: var(--color-accent-soft);
+	.message-row.user-row {
+		align-self: flex-end;
+	}
+	.message-row.bubble {
+		margin: calc(var(--spacing-xl) * 3);
+	}
+
+	.with_avatar.message-row.panel {
+		padding-left: calc(var(--spacing-xl) * 2) !important;
+		padding-right: calc(var(--spacing-xl) * 2) !important;
+	}
+
+	.with_avatar.message-row.bubble.user-row {
+		/* margin-left: calc(var(--spacing-xl) * 2) !important; */
+		margin-right: calc(var(--spacing-xl) * 2) !important;
+	}
+
+	.with_avatar.message-row.bubble.bot-row {
+		margin-left: calc(var(--spacing-xl) * 2) !important;
+		/* margin-right: calc(var(--spacing-xl) * 2) !important; */
+	}
+
+	.with_opposite_avatar.message-row.bubble.user-row {
+		margin-left: calc(var(--spacing-xxl) + 35px + var(--spacing-xxl));
+	}
+
+	.message-row.panel {
+		margin: 0;
+		padding: calc(var(--spacing-xl) * 3) calc(var(--spacing-xxl) * 2);
 	}
 
 	.message-row.panel.bot-row {
 		background: var(--background-fill-secondary);
+		/* text-align: right; */
+	}
+
+	.message-row.panel.user-row {
+		/* background: var(--color-accent-soft); */
+		align-self: flex-end;
+	}
+
+	.message-row.bubble.bot-row {
+		align-self: flex-start;
+		background: var(--background-fill-secondary);
+		width: calc(100% - var(--spacing-xl) * 6);
 	}
 
 	.message-row:last-of-type {
-		margin-bottom: var(--spacing-xxl);
+		margin-bottom: calc(var(--spacing-xxl) * 2);
 	}
 
 	.user-row.bubble {
@@ -554,75 +563,39 @@
 			align-self: flex-start;
 		}
 		.message {
-			width: auto;
+			width: 100%;
 		}
 	}
+
 	.avatar-container {
-		align-self: flex-end;
+		align-self: flex-start;
 		position: relative;
-		justify-content: center;
+		display: flex;
+		justify-content: flex-start;
+		align-items: flex-start;
 		width: 35px;
 		height: 35px;
 		flex-shrink: 0;
 		bottom: 0;
+		border-radius: 50%;
+		border: 1px solid var(--border-color-primary);
 	}
-	.user-row.bubble > .avatar-container {
+	.user-row > .avatar-container {
 		order: 2;
-		margin-left: 10px;
-	}
-	.bot-row.bubble > .avatar-container {
-		margin-right: 10px;
+		margin-left: var(--spacing-xxl);
 	}
-
-	.panel > .avatar-container {
-		margin-left: 25px;
-		align-self: center;
+	.bot-row > .avatar-container {
+		margin-right: var(--spacing-xxl);
+		margin-left: 0;
+		margin-top: -5px;
 	}
 
-	.avatar-container :not(.thumbnail-item) :global(img) {
+	.avatar-container:not(.thumbnail-item) :global(img) {
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
 		border-radius: 50%;
-	}
-
-	.message-buttons-user,
-	.message-buttons-bot {
-		border-radius: var(--radius-md);
-		display: flex;
-		align-items: center;
-		bottom: 0;
-		height: var(--size-7);
-		align-self: self-end;
-		position: absolute;
-		bottom: -15px;
-		margin: 2px;
-		padding-left: 5px;
-		z-index: 1;
-	}
-	.message-buttons-bot {
-		left: 10px;
-	}
-	.message-buttons-user {
-		right: 5px;
-	}
-
-	.message-buttons-bot.message-buttons-bubble.with-avatar {
-		left: 50px;
-	}
-	.message-buttons-user.message-buttons-bubble.with-avatar {
-		right: 50px;
-	}
-
-	.message-buttons-bubble {
-		border: 1px solid var(--border-color-accent);
-		background: var(--background-fill-secondary);
-	}
-
-	.message-buttons-panel {
-		left: unset;
-		right: 0px;
-		top: 0px;
+		padding: 6px;
 	}
 
 	.share-button {
@@ -659,7 +632,7 @@
 		z-index: 1;
 		cursor: pointer;
 		border-bottom-left-radius: var(--radius-sm);
-		padding: 5px;
+
 		padding: var(--spacing-md);
 		width: 25px;
 		height: 25px;
@@ -711,12 +684,11 @@
 		height: 100%;
 		overflow: auto;
 		background-color: rgba(0, 0, 0, 0.9);
+		display: flex;
+		justify-content: center;
+		align-items: center;
 	}
-	.image-preview :global(img) {
-		width: 100%;
-		height: 100%;
-		object-fit: contain;
-	}
+
 	.image-preview :global(svg) {
 		stroke: white;
 	}
@@ -740,18 +712,50 @@
 	.component {
 		padding: 0;
 		border-radius: var(--radius-md);
+		width: fit-content;
+		max-width: 80%;
+		max-height: 80%;
+		border: 1px solid var(--border-color-primary);
+		/* margin: var(--spacing-md) var(--spacing-xxl); */
+		overflow: hidden;
+	}
+
+	.component.gallery {
+		border: none;
 	}
 
 	.file-pil {
-		display: inline-block;
-		padding: var(--spacing-sm) var(--spacing-md);
+		display: block;
+		width: fit-content;
+		padding: var(--spacing-sm) var(--spacing-lg);
 		border-radius: var(--radius-md);
 		background: var(--background-fill-secondary);
 		color: var(--body-text-color);
 		text-decoration: none;
-		margin: var(--spacing-md);
+		margin: 0;
+		font-family: var(--font-mono);
+		font-size: var(--text-sm);
 	}
 
+	.file {
+		width: auto !important;
+		max-width: fit-content !important;
+	}
+
+	@media (max-width: 600px) or (max-width: 480px) {
+		.component {
+			max-width: calc(100% - var(--spacing-xl) * 3);
+			width: 100%;
+		}
+	}
+
+	:global(.prose.chatbot.md) {
+		opacity: 0.8;
+	}
+
+	.message > button {
+		width: 100%;
+	}
 	.html {
 		padding: 0;
 		border: none;
diff --git a/js/chatbot/shared/Component.svelte b/js/chatbot/shared/Component.svelte
new file mode 100644
index 0000000000..31d248fddc
--- /dev/null
+++ b/js/chatbot/shared/Component.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+	export let type: "gallery" | "plot" | "audio" | "video" | "image" | string;
+	export let components;
+	export let value;
+	export let target;
+	export let theme_mode;
+	export let props;
+	export let i18n;
+	export let upload;
+	export let _fetch;
+</script>
+
+{#if type === "gallery"}
+	<svelte:component
+		this={components[type]}
+		{value}
+		show_label={false}
+		{i18n}
+		label=""
+		{_fetch}
+		allow_preview={false}
+		interactive={false}
+		mode="minimal"
+		fixed_height={1}
+		on:load
+	/>
+{:else if type === "plot"}
+	<svelte:component
+		this={components[type]}
+		{value}
+		{target}
+		{theme_mode}
+		bokeh_version={props.bokeh_version}
+		caption=""
+		show_actions_button={true}
+		on:load
+	/>
+{:else if type === "audio"}
+	<svelte:component
+		this={components[type]}
+		{value}
+		show_label={false}
+		show_share_button={true}
+		{i18n}
+		label=""
+		waveform_settings={{}}
+		waveform_options={{}}
+		show_download_button={false}
+		on:load
+	/>
+{:else if type === "video"}
+	<svelte:component
+		this={components[type]}
+		autoplay={true}
+		value={value.video || value}
+		show_label={false}
+		show_share_button={true}
+		{i18n}
+		{upload}
+		show_download_button={false}
+		on:load
+	>
+		<track kind="captions" />
+	</svelte:component>
+{:else if type === "image"}
+	<svelte:component
+		this={components[type]}
+		{value}
+		show_label={false}
+		label="chatbot-image"
+		show_download_button={false}
+		on:load
+		{i18n}
+	/>
+{:else if type === "html"}
+	<svelte:component
+		this={components[type]}
+		{value}
+		show_label={false}
+		label="chatbot-image"
+		show_share_button={true}
+		{i18n}
+		gradio={{ dispatch: () => {} }}
+		on:load
+	/>
+{/if}
diff --git a/js/chatbot/shared/Copy.svelte b/js/chatbot/shared/Copy.svelte
index 45aec21732..3f21b209d5 100644
--- a/js/chatbot/shared/Copy.svelte
+++ b/js/chatbot/shared/Copy.svelte
@@ -73,7 +73,7 @@
 	}
 
 	.action {
-		width: 15px;
-		height: 14px;
+		width: var(--size-4);
+		height: var(--size-4);
 	}
 </style>
diff --git a/js/chatbot/shared/Download.svelte b/js/chatbot/shared/Download.svelte
new file mode 100644
index 0000000000..4b5d1602f0
--- /dev/null
+++ b/js/chatbot/shared/Download.svelte
@@ -0,0 +1,16 @@
+<svg
+	width="16"
+	height="16"
+	viewBox="0 0 12 12"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M6.27701 8.253C6.24187 8.29143 6.19912 8.32212 6.15147 8.34311C6.10383 8.36411 6.05233 8.37495 6.00026 8.37495C5.94819 8.37495 5.89669 8.36411 5.84905 8.34311C5.8014 8.32212 5.75865 8.29143 5.72351 8.253L3.72351 6.0655C3.65798 5.99185 3.62408 5.89536 3.62916 5.79691C3.63424 5.69846 3.67788 5.60596 3.75064 5.53945C3.8234 5.47293 3.91943 5.43774 4.01794 5.44149C4.11645 5.44525 4.20952 5.48764 4.27701 5.5595L5.62501 7.0345V1.5C5.62501 1.40054 5.66452 1.30516 5.73485 1.23483C5.80517 1.16451 5.90055 1.125 6.00001 1.125C6.09947 1.125 6.19485 1.16451 6.26517 1.23483C6.3355 1.30516 6.37501 1.40054 6.37501 1.5V7.034L7.72351 5.559C7.79068 5.4856 7.88425 5.44189 7.98364 5.43748C8.08304 5.43308 8.18011 5.46833 8.25351 5.5355C8.32691 5.60267 8.37062 5.69624 8.37503 5.79563C8.37943 5.89503 8.34418 5.9921 8.27701 6.0655L6.27701 8.253Z"
+		fill="currentColor"
+	/>
+	<path
+		d="M1.875 7.39258C1.875 7.29312 1.83549 7.19774 1.76517 7.12741C1.69484 7.05709 1.59946 7.01758 1.5 7.01758C1.40054 7.01758 1.30516 7.05709 1.23483 7.12741C1.16451 7.19774 1.125 7.29312 1.125 7.39258V7.42008C1.125 8.10358 1.125 8.65508 1.1835 9.08858C1.2435 9.53858 1.3735 9.91758 1.674 10.2186C1.975 10.5196 2.354 10.6486 2.804 10.7096C3.2375 10.7676 3.789 10.7676 4.4725 10.7676H7.5275C8.211 10.7676 8.7625 10.7676 9.196 10.7096C9.646 10.6486 10.025 10.5196 10.326 10.2186C10.627 9.91758 10.756 9.53858 10.817 9.08858C10.875 8.65508 10.875 8.10358 10.875 7.42008V7.39258C10.875 7.29312 10.8355 7.19774 10.7652 7.12741C10.6948 7.05709 10.5995 7.01758 10.5 7.01758C10.4005 7.01758 10.3052 7.05709 10.2348 7.12741C10.1645 7.19774 10.125 7.29312 10.125 7.39258C10.125 8.11008 10.124 8.61058 10.0735 8.98858C10.024 9.35558 9.9335 9.54958 9.7955 9.68808C9.657 9.82658 9.463 9.91658 9.0955 9.96608C8.718 10.0166 8.2175 10.0176 7.5 10.0176H4.5C3.7825 10.0176 3.2815 10.0166 2.904 9.96608C2.537 9.91658 2.343 9.82608 2.2045 9.68808C2.066 9.54958 1.976 9.35558 1.9265 8.98808C1.876 8.61058 1.875 8.11008 1.875 7.39258Z"
+		fill="currentColor"
+	/>
+</svg>
diff --git a/js/chatbot/shared/LikeDislike.svelte b/js/chatbot/shared/LikeDislike.svelte
index 46843a40bd..28cef04425 100644
--- a/js/chatbot/shared/LikeDislike.svelte
+++ b/js/chatbot/shared/LikeDislike.svelte
@@ -1,46 +1,79 @@
 <script lang="ts">
-	import { Like } from "@gradio/icons";
-	import { Dislike } from "@gradio/icons";
+	import ThumbDownActive from "./ThumbDownActive.svelte";
+	import ThumbDownDefault from "./ThumbDownDefault.svelte";
+	import ThumbUpActive from "./ThumbUpActive.svelte";
+	import ThumbUpDefault from "./ThumbUpDefault.svelte";
 
 	export let handle_action: (selected: string | null) => void;
+	export let padded = false;
 
 	let selected: "like" | "dislike" | null = null;
 </script>
 
 <button
 	on:click={() => {
-		selected = "like";
+		selected = "dislike";
 		handle_action(selected);
 	}}
-	aria-label={selected === "like" ? "clicked like" : "like"}
+	aria-label={selected === "dislike" ? "clicked dislike" : "dislike"}
+	class:padded
+	class:selected={selected === "dislike"}
+	class="dislike-button"
 >
-	<Like selected={selected === "like"} />
+	<span>
+		{#if selected === "dislike"}
+			<ThumbDownActive />
+		{:else}
+			<ThumbDownDefault />
+		{/if}
+	</span>
 </button>
 
 <button
+	class="like-button"
+	class:padded
 	on:click={() => {
-		selected = "dislike";
+		selected = "like";
 		handle_action(selected);
 	}}
-	aria-label={selected === "dislike" ? "clicked dislike" : "dislike"}
+	aria-label={selected === "like" ? "clicked like" : "like"}
+	class:selected={selected === "like"}
 >
-	<Dislike selected={selected === "dislike"} />
+	<span>
+		{#if selected === "like"}
+			<ThumbUpActive />
+		{:else}
+			<ThumbUpDefault />
+		{/if}
+	</span>
 </button>
 
 <style>
 	button {
-		position: relative;
-		top: 0;
-		right: 0;
 		cursor: pointer;
 		color: var(--body-text-color-subdued);
-		width: 17px;
-		height: 17px;
-		margin-right: 5px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: 7px !important;
+	}
+
+	span {
+		display: inline-block;
 	}
 
 	button:hover,
 	button:focus {
 		color: var(--body-text-color);
 	}
+
+	.selected,
+	.selected:focus,
+	.selected:hover {
+		color: var(--color-accent);
+	}
+
+	.like-button {
+		transform: translateY(0px);
+	}
 </style>
diff --git a/js/chatbot/shared/ThumbDownActive.svelte b/js/chatbot/shared/ThumbDownActive.svelte
new file mode 100644
index 0000000000..eb7fb9bfad
--- /dev/null
+++ b/js/chatbot/shared/ThumbDownActive.svelte
@@ -0,0 +1,12 @@
+<svg
+	width="16"
+	height="16"
+	viewBox="0 0 12 12"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M11.25 6.61523H9.375V1.36523H11.25V6.61523ZM3.375 1.36523H8.625V6.91636L7.48425 8.62748L7.16737 10.8464C7.14108 11.0248 7.05166 11.1879 6.91535 11.3061C6.77904 11.4242 6.60488 11.4896 6.4245 11.4902H6.375C6.07672 11.4899 5.79075 11.3713 5.57983 11.1604C5.36892 10.9495 5.2503 10.6635 5.25 10.3652V8.11523H2.25C1.85233 8.11474 1.47109 7.95654 1.18989 7.67535C0.908691 7.39415 0.750496 7.01291 0.75 6.61523V3.99023C0.750992 3.29435 1.02787 2.62724 1.51994 2.13517C2.01201 1.64311 2.67911 1.36623 3.375 1.36523Z"
+		fill="currentColor"
+	/>
+</svg>
diff --git a/js/chatbot/shared/ThumbDownDefault.svelte b/js/chatbot/shared/ThumbDownDefault.svelte
new file mode 100644
index 0000000000..23fb11f2bf
--- /dev/null
+++ b/js/chatbot/shared/ThumbDownDefault.svelte
@@ -0,0 +1,12 @@
+<svg
+	width="16"
+	height="16"
+	viewBox="0 0 12 12"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M2.25 8.11523H4.5V10.3652C4.5003 10.6635 4.61892 10.9495 4.82983 11.1604C5.04075 11.3713 5.32672 11.4899 5.625 11.4902H6.42488C6.60519 11.4895 6.77926 11.4241 6.91549 11.3059C7.05172 11.1878 7.14109 11.0248 7.16737 10.8464L7.48425 8.62748L8.82562 6.61523H11.25V1.36523H3.375C2.67911 1.36623 2.01201 1.64311 1.51994 2.13517C1.02787 2.62724 0.750992 3.29435 0.75 3.99023V6.61523C0.750496 7.01291 0.908691 7.39415 1.18989 7.67535C1.47109 7.95654 1.85233 8.11474 2.25 8.11523ZM9 2.11523H10.5V5.86523H9V2.11523ZM1.5 3.99023C1.5006 3.49314 1.69833 3.01657 2.04983 2.66507C2.40133 2.31356 2.8779 2.11583 3.375 2.11523H8.25V6.12661L6.76575 8.35298L6.4245 10.7402H5.625C5.52554 10.7402 5.43016 10.7007 5.35983 10.6304C5.28951 10.5601 5.25 10.4647 5.25 10.3652V7.36523H2.25C2.05118 7.36494 1.86059 7.28582 1.72 7.14524C1.57941 7.00465 1.5003 6.81406 1.5 6.61523V3.99023Z"
+		fill="currentColor"
+	/>
+</svg>
diff --git a/js/chatbot/shared/ThumbUpActive.svelte b/js/chatbot/shared/ThumbUpActive.svelte
new file mode 100644
index 0000000000..8b183a71f2
--- /dev/null
+++ b/js/chatbot/shared/ThumbUpActive.svelte
@@ -0,0 +1,12 @@
+<svg
+	width="16"
+	height="16"
+	viewBox="0 0 12 12"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M0.75 6.24023H2.625V11.4902H0.75V6.24023ZM8.625 11.4902H3.375V5.93911L4.51575 4.22798L4.83263 2.00911C4.85892 1.83065 4.94834 1.66754 5.08465 1.5494C5.22096 1.43125 5.39512 1.36591 5.5755 1.36523H5.625C5.92328 1.36553 6.20925 1.48415 6.42017 1.69507C6.63108 1.90598 6.7497 2.19196 6.75 2.49023V4.74023H9.75C10.1477 4.74073 10.5289 4.89893 10.8101 5.18012C11.0913 5.46132 11.2495 5.84256 11.25 6.24023V8.86523C11.249 9.56112 10.9721 10.2282 10.4801 10.7203C9.98799 11.2124 9.32089 11.4892 8.625 11.4902Z"
+		fill="currentColor"
+	/>
+</svg>
diff --git a/js/chatbot/shared/ThumbUpDefault.svelte b/js/chatbot/shared/ThumbUpDefault.svelte
new file mode 100644
index 0000000000..c06a0acb99
--- /dev/null
+++ b/js/chatbot/shared/ThumbUpDefault.svelte
@@ -0,0 +1,12 @@
+<svg
+	width="16"
+	height="16"
+	viewBox="0 0 12 12"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M9.75 4.74023H7.5V2.49023C7.4997 2.19196 7.38108 1.90598 7.17017 1.69507C6.95925 1.48415 6.67328 1.36553 6.375 1.36523H5.57512C5.39481 1.366 5.22074 1.43138 5.08451 1.54952C4.94828 1.66766 4.85891 1.83072 4.83262 2.00911L4.51575 4.22798L3.17438 6.24023H0.75V11.4902H8.625C9.32089 11.4892 9.98799 11.2124 10.4801 10.7203C10.9721 10.2282 11.249 9.56112 11.25 8.86523V6.24023C11.2495 5.84256 11.0913 5.46132 10.8101 5.18012C10.5289 4.89893 10.1477 4.74073 9.75 4.74023ZM3 10.7402H1.5V6.99023H3V10.7402ZM10.5 8.86523C10.4994 9.36233 10.3017 9.8389 9.95017 10.1904C9.59867 10.5419 9.1221 10.7396 8.625 10.7402H3.75V6.72886L5.23425 4.50248L5.5755 2.11523H6.375C6.47446 2.11523 6.56984 2.15474 6.64017 2.22507C6.71049 2.2954 6.75 2.39078 6.75 2.49023V5.49023H9.75C9.94882 5.49053 10.1394 5.56965 10.28 5.71023C10.4206 5.85082 10.4997 6.04141 10.5 6.24023V8.86523Z"
+		fill="currentColor"
+	/>
+</svg>
diff --git a/js/gallery/shared/Gallery.svelte b/js/gallery/shared/Gallery.svelte
index 2e394b7de6..78512e22de 100644
--- a/js/gallery/shared/Gallery.svelte
+++ b/js/gallery/shared/Gallery.svelte
@@ -32,6 +32,7 @@
 	export let selected_index: number | null = null;
 	export let interactive: boolean;
 	export let _fetch: typeof fetch;
+	export let mode: "normal" | "minimal" = "normal";
 
 	const dispatch = createEventDispatcher<{
 		change: undefined;
@@ -205,7 +206,11 @@
 	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
 {:else}
 	{#if selected_image && allow_preview}
-		<button on:keydown={on_keydown} class="preview">
+		<button
+			on:keydown={on_keydown}
+			class="preview"
+			class:minimal={mode === "minimal"}
+		>
 			<div class="icon-buttons">
 				{#if show_download_button}
 					<div class="download-button-container">
@@ -262,7 +267,7 @@
 						bind:this={el[i]}
 						on:click={() => (selected_index = i)}
 						class="thumbnail-item thumbnail-small"
-						class:selected={selected_index === i}
+						class:selected={selected_index === i && mode !== "minimal"}
 						aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length}
 					>
 						<Image
@@ -278,7 +283,11 @@
 		</button>
 	{/if}
 
-	<div class="grid-wrap" class:fixed-height={!height || height == "auto"}>
+	<div
+		class="grid-wrap"
+		class:minimal={mode === "minimal"}
+		class:fixed-height={mode !== "minimal" && (!height || height == "auto")}
+	>
 		<div
 			class="grid-container"
 			style="--grid-cols:{columns}; --grid-rows:{rows}; --object-fit: {object_fit}; height: {height};"
@@ -342,6 +351,11 @@
 		height: var(--size-full);
 	}
 
+	.preview.minimal {
+		width: fit-content;
+		height: fit-content;
+	}
+
 	.preview::before {
 		content: "";
 		position: absolute;
@@ -382,6 +396,10 @@
 		height: var(--size-full);
 	}
 
+	.preview.minimal :global(img.with-caption) {
+		height: auto;
+	}
+
 	.caption {
 		padding: var(--size-2) var(--size-3);
 		overflow: hidden;
@@ -409,7 +427,7 @@
 		--ring-color: transparent;
 		position: relative;
 		box-shadow:
-			0 0 0 2px var(--ring-color),
+			inset 0 0 0 1px var(--ring-color),
 			var(--shadow-drop);
 		border: 1px solid var(--border-color-primary);
 		border-radius: var(--button-small-radius);
@@ -422,11 +440,13 @@
 
 	.thumbnail-item:hover {
 		--ring-color: var(--color-accent);
+		border-color: var(--color-accent);
 		filter: brightness(1.1);
 	}
 
 	.thumbnail-item.selected {
 		--ring-color: var(--color-accent);
+		border-color: var(--color-accent);
 	}
 
 	.thumbnail-small {
@@ -511,4 +531,8 @@
 	.icon-buttons .download-button-container {
 		margin: var(--size-1) 0;
 	}
+
+	.grid-wrap.minimal {
+		padding: 0;
+	}
 </style>
diff --git a/js/icons/src/Dislike.svelte b/js/icons/src/Dislike.svelte
deleted file mode 100644
index ed7ade0073..0000000000
--- a/js/icons/src/Dislike.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-	export let selected: boolean;
-</script>
-
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 24 24"
-	fill={selected ? "currentColor" : "none"}
-	stroke-width="1.5"
-	color="currentColor"
-	><path
-		stroke="currentColor"
-		stroke-width="1.5"
-		stroke-linecap="round"
-		d="M16.472 3.5H4.1a.6.6 0 0 0-.6.6v9.8a.6.6 0 0 0 .6.6h2.768a2 2 0 0 1 1.715.971l2.71 4.517a1.631 1.631 0 0 0 2.961-1.308l-1.022-3.408a.6.6 0 0 1 .574-.772h4.575a2 2 0 0 0 1.93-2.526l-1.91-7A2 2 0 0 0 16.473 3.5Z"
-	/><path
-		stroke="currentColor"
-		stroke-width="1.5"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		d="M7 14.5v-11"
-	/></svg
->
diff --git a/js/icons/src/Like.svelte b/js/icons/src/Like.svelte
deleted file mode 100644
index 7a5f955079..0000000000
--- a/js/icons/src/Like.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-	export let selected: boolean;
-</script>
-
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 24 24"
-	fill={selected ? "currentColor" : "none"}
-	stroke-width="1.5"
-	color="currentColor"
-	><path
-		stroke="currentColor"
-		stroke-width="1.5"
-		stroke-linecap="round"
-		d="M16.472 20H4.1a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6h2.768a2 2 0 0 0 1.715-.971l2.71-4.517a1.631 1.631 0 0 1 2.961 1.308l-1.022 3.408a.6.6 0 0 0 .574.772h4.575a2 2 0 0 1 1.93 2.526l-1.91 7A2 2 0 0 1 16.473 20Z"
-	/><path
-		stroke="currentColor"
-		stroke-width="1.5"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		d="M7 20V9"
-	/></svg
->
diff --git a/js/icons/src/index.ts b/js/icons/src/index.ts
index cbace02745..9cdb438451 100644
--- a/js/icons/src/index.ts
+++ b/js/icons/src/index.ts
@@ -12,7 +12,6 @@ export { default as Color } from "./Color.svelte";
 export { default as Community } from "./Community.svelte";
 export { default as Copy } from "./Copy.svelte";
 export { default as Crop } from "./Crop.svelte";
-export { default as Dislike } from "./Dislike.svelte";
 export { default as Download } from "./Download.svelte";
 export { default as DropdownArrow } from "./DropdownArrow.svelte";
 export { default as Edit } from "./Edit.svelte";
@@ -26,7 +25,6 @@ export { default as Image } from "./Image.svelte";
 export { default as ImagePaste } from "./ImagePaste.svelte";
 export { default as JSON } from "./JSON.svelte";
 export { default as Layers } from "./Layers.svelte";
-export { default as Like } from "./Like.svelte";
 export { default as LineChart } from "./LineChart.svelte";
 export { default as Maximise } from "./Maximise.svelte";
 export { default as Microphone } from "./Microphone.svelte";
diff --git a/js/image/shared/Image.svelte b/js/image/shared/Image.svelte
index 6284cef568..40b32d928f 100644
--- a/js/image/shared/Image.svelte
+++ b/js/image/shared/Image.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
 	import type { HTMLImgAttributes } from "svelte/elements";
+	import { createEventDispatcher } from "svelte";
+
+	const dispatch = createEventDispatcher<{ load?: void }>();
 	interface Props extends HTMLImgAttributes {
 		"data-testid"?: string;
 	}
@@ -34,7 +37,7 @@
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->
-<img src={resolved_src} {...$$restProps} />
+<img src={resolved_src} {...$$restProps} on:load={() => dispatch("load")} />
 
 <style>
 	img {
diff --git a/js/image/shared/ImagePreview.svelte b/js/image/shared/ImagePreview.svelte
index 75a1876ae0..27570e65b0 100644
--- a/js/image/shared/ImagePreview.svelte
+++ b/js/image/shared/ImagePreview.svelte
@@ -63,7 +63,7 @@
 	</div>
 	<button on:click={handle_click}>
 		<div class:selectable class="image-container">
-			<Image src={value.url} alt="" loading="lazy" />
+			<Image src={value.url} alt="" loading="lazy" on:load />
 		</div>
 	</button>
 {/if}
diff --git a/js/plot/shared/Plot.svelte b/js/plot/shared/Plot.svelte
index ca5e1c41f3..402afcbeb4 100644
--- a/js/plot/shared/Plot.svelte
+++ b/js/plot/shared/Plot.svelte
@@ -45,6 +45,7 @@
 		{caption}
 		{bokeh_version}
 		{show_actions_button}
+		on:load
 	/>
 {:else}
 	<Empty unpadded_box={true} size="large"><PlotIcon /></Empty>
diff --git a/js/plot/shared/plot_types/BokehPlot.svelte b/js/plot/shared/plot_types/BokehPlot.svelte
index c05d721939..7843c3216f 100644
--- a/js/plot/shared/plot_types/BokehPlot.svelte
+++ b/js/plot/shared/plot_types/BokehPlot.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
 	//@ts-nocheck
-	import { onDestroy } from "svelte";
+	import { onDestroy, createEventDispatcher } from "svelte";
 
 	export let value;
 	export let bokeh_version: string | null;
 	const div_id = `bokehDiv-${Math.random().toString(5).substring(2)}`;
-
+	const dispatch = createEventDispatcher<{ load: undefined }>();
 	$: plot = value?.plot;
 
-	function embed_bokeh(_plot: Record<string, any>): void {
+	async function embed_bokeh(_plot: Record<string, any>): void {
 		if (document) {
 			if (document.getElementById(div_id)) {
 				document.getElementById(div_id).innerHTML = "";
@@ -17,11 +17,15 @@
 		if (window.Bokeh) {
 			load_bokeh();
 			let plotObj = JSON.parse(_plot);
-			window.Bokeh.embed.embed_item(plotObj, div_id);
+			const y = await window.Bokeh.embed.embed_item(plotObj, div_id);
+			y._roots.forEach(async (p) => {
+				await p.ready;
+				dispatch("load");
+			});
 		}
 	}
 
-	$: embed_bokeh(plot);
+	$: loaded && embed_bokeh(plot);
 
 	const main_src = `https://cdn.bokeh.org/bokeh/release/bokeh-${bokeh_version}.min.js`;
 
@@ -32,14 +36,27 @@
 		`https://cdn.pydata.org/bokeh/release/bokeh-api-${bokeh_version}.min.js`
 	];
 
-	function load_plugins(): HTMLScriptElement[] {
-		return plugins_src.map((src, i) => {
-			const script = document.createElement("script");
-			script.src = src;
-			document.head.appendChild(script);
+	let loaded = false;
+	async function load_plugins(): HTMLScriptElement[] {
+		await Promise.all(
+			plugins_src.map((src, i) => {
+				return new Promise((resolve) => {
+					const script = document.createElement("script");
+					script.onload = resolve;
+					script.src = src;
+					document.head.appendChild(script);
+					return script;
+				});
+			})
+		);
 
-			return script;
-		});
+		loaded = true;
+	}
+
+	let plugin_scripts = [];
+
+	function handle_bokeh_loaded(): void {
+		plugin_scripts = load_plugins();
 	}
 
 	function load_bokeh(): HTMLScriptElement {
@@ -51,18 +68,14 @@
 		);
 		if (!is_bokeh_script_present) {
 			document.head.appendChild(script);
+		} else {
+			handle_bokeh_loaded();
 		}
 		return script;
 	}
 
 	const main_script = bokeh_version ? load_bokeh() : null;
 
-	let plugin_scripts = [];
-
-	function handle_bokeh_loaded(): void {
-		plugin_scripts = load_plugins();
-	}
-
 	onDestroy(() => {
 		if (main_script in document.children) {
 			document.removeChild(main_script);
diff --git a/js/plot/shared/plot_types/MatplotlibPlot.svelte b/js/plot/shared/plot_types/MatplotlibPlot.svelte
index 861f1c5999..5941e411f4 100644
--- a/js/plot/shared/plot_types/MatplotlibPlot.svelte
+++ b/js/plot/shared/plot_types/MatplotlibPlot.svelte
@@ -5,7 +5,11 @@
 </script>
 
 <div data-testid={"matplotlib"} class="matplotlib layout">
-	<img src={plot} alt={`${value.chart} plot visualising provided data`} />
+	<img
+		src={plot}
+		alt={`${value.chart} plot visualising provided data`}
+		on:load
+	/>
 </div>
 
 <style>
diff --git a/js/plot/shared/plot_types/PlotlyPlot.svelte b/js/plot/shared/plot_types/PlotlyPlot.svelte
index f2a1069936..7c5da9f7c1 100644
--- a/js/plot/shared/plot_types/PlotlyPlot.svelte
+++ b/js/plot/shared/plot_types/PlotlyPlot.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	//@ts-nocheck
 	import Plotly from "plotly.js-dist-min";
-	import { afterUpdate } from "svelte";
+	import { afterUpdate, onMount, createEventDispatcher } from "svelte";
 
 	export let value;
 	export let target;
@@ -11,6 +11,8 @@
 	let plot_div;
 	let plotly_global_style;
 
+	const dispatch = createEventDispatcher<{ load: undefined }>();
+
 	function load_plotly_css(): void {
 		if (!plotly_global_style) {
 			plotly_global_style = document.getElementById("plotly.js-style-global");
@@ -22,14 +24,35 @@
 		}
 	}
 
-	afterUpdate(() => {
+	afterUpdate(async () => {
 		load_plotly_css();
+
 		let plotObj = JSON.parse(plot);
+
+		// the docs aren't very good but this works
+		plotObj.config = plotObj.config || {};
+		plotObj.config.responsive = true;
+		plotObj.responsive = true;
+		plotObj.layout.autosize = true;
+
 		plotObj.layout.title
 			? (plotObj.layout.margin = { autoexpand: true })
 			: (plotObj.layout.margin = { l: 0, r: 0, b: 0, t: 0 });
-		Plotly.react(plot_div, plotObj);
+		const _plot = Plotly.react(
+			plot_div,
+			plotObj.data,
+			plotObj.layout,
+			plotObj.config
+		);
+
+		Plotly.Plots.resize(plot_div);
+
+		plot_div.on("plotly_afterplot", () => {
+			dispatch("load");
+		});
 	});
+
+	onMount(() => {});
 </script>
 
 <div data-testid={"plotly"} bind:this={plot_div} />
diff --git a/js/storybook/design-tokens/Icons.stories.svelte b/js/storybook/design-tokens/Icons.stories.svelte
index c18de6ccd6..af8f03064e 100644
--- a/js/storybook/design-tokens/Icons.stories.svelte
+++ b/js/storybook/design-tokens/Icons.stories.svelte
@@ -15,7 +15,6 @@
 		Color,
 		Community,
 		Copy,
-		Dislike,
 		Download,
 		DropdownArrow,
 		Edit,
@@ -24,7 +23,6 @@
 		Info,
 		Image,
 		JSON,
-		Like,
 		LineChart,
 		Maximise,
 		Music,
@@ -56,7 +54,6 @@
 		{ name: "Color", value: Color },
 		{ name: "Community", value: Community },
 		{ name: "Copy", value: Copy },
-		{ name: "Dislike", value: Dislike },
 		{ name: "Download", value: Download },
 		{ name: "DropdownArrow", value: DropdownArrow },
 		{ name: "Edit", value: Edit },
@@ -65,7 +62,6 @@
 		{ name: "Info", value: Info },
 		{ name: "Image", value: Image },
 		{ name: "JSON", value: JSON },
-		{ name: "Like", value: Like },
 		{ name: "LineChart", value: LineChart },
 		{ name: "Maximise", value: Maximise },
 		{ name: "Music", value: Music },
diff --git a/js/video/shared/Player.svelte b/js/video/shared/Player.svelte
index f3c09d4059..c9959b5831 100644
--- a/js/video/shared/Player.svelte
+++ b/js/video/shared/Player.svelte
@@ -106,6 +106,7 @@
 			bind:node={video}
 			data-testid={`${label}-player`}
 			{processingVideo}
+			on:load
 		>
 			<track kind="captions" src={subtitle} default />
 		</Video>
diff --git a/js/video/shared/Video.svelte b/js/video/shared/Video.svelte
index 1070d05ef2..8318934a3a 100644
--- a/js/video/shared/Video.svelte
+++ b/js/video/shared/Video.svelte
@@ -75,6 +75,7 @@ Then, even when `controls` is false, the compiled DOM would be `<video controls=
 	on:mouseout={dispatch.bind(null, "mouseout")}
 	on:focus={dispatch.bind(null, "focus")}
 	on:blur={dispatch.bind(null, "blur")}
+	on:load
 	bind:currentTime
 	bind:duration
 	bind:paused
diff --git a/js/video/shared/VideoPreview.svelte b/js/video/shared/VideoPreview.svelte
index 3cab89e5b2..cd8fd3760f 100644
--- a/js/video/shared/VideoPreview.svelte
+++ b/js/video/shared/VideoPreview.svelte
@@ -62,6 +62,7 @@
 			on:pause
 			on:stop
 			on:end
+			on:load
 			mirror={false}
 			{label}
 			interactive={false}
diff --git a/js/wasm/svelte/file-url.ts b/js/wasm/svelte/file-url.ts
index 493e96e280..b33bffb7d0 100644
--- a/js/wasm/svelte/file-url.ts
+++ b/js/wasm/svelte/file-url.ts
@@ -1,6 +1,7 @@
 import { getWorkerProxyContext } from "./context";
 import { is_self_host } from "../network/host";
 import { getHeaderValue } from "../src/http";
+import type { WorkerProxy } from "../dist";
 
 type MediaSrc = string | undefined | null;
 
@@ -22,12 +23,22 @@ export function should_proxy_wasm_src(src: MediaSrc): boolean {
 	return true;
 }
 
+let maybeWorkerProxy: WorkerProxy | undefined;
+
 export async function resolve_wasm_src(src: MediaSrc): Promise<MediaSrc> {
 	if (src == null || !should_proxy_wasm_src(src)) {
 		return src;
 	}
 
-	const maybeWorkerProxy = getWorkerProxyContext();
+	if (maybeWorkerProxy == null) {
+		try {
+			maybeWorkerProxy = getWorkerProxyContext();
+		} catch (e) {
+			// We are not in the Wasm env. Just use the src as is.
+			return src;
+		}
+	}
+
 	if (maybeWorkerProxy == null) {
 		// We are not in the Wasm env. Just use the src as is.
 		return src;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e0b78e741b..75808d97cb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -804,6 +804,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      '@gradio/wasm':
+        specifier: workspace:^
+        version: link:../wasm
       '@types/dompurify':
         specifier: ^3.0.2
         version: 3.0.2


Code review comments:
diff_hunk: @@ -22,14 +24,35 @@
 		}
 	}
 
-	afterUpdate(() => {
+	afterUpdate(async () => {
 		load_plotly_css();
+
 		let plotObj = JSON.parse(plot);
+
+		// the docs aren't very good but this works
+		plotObj.config = plotObj.config || {};
+		plotObj.config.responsive = true;
+		plotObj.responsive = true;
+		plotObj.layout.autosize = true;
+
 		plotObj.layout.title
 			? (plotObj.layout.margin = { autoexpand: true })
 			: (plotObj.layout.margin = { l: 0, r: 0, b: 0, t: 0 });
-		Plotly.react(plot_div, plotObj);
+		const _plot = Plotly.react(
+			plot_div,
+			plotObj.data,
+			plotObj.layout,
+			plotObj.config
+		);
+
+		Plotly.Plots.resize(plot_div);
+
+		plot_div.on("plotly_afterplot", () => {
+			dispatch("load");
+		});
 	});
+
+	onMount(() => {});
path: js/plot/shared/plot_types/PlotlyPlot.svelte
text: @user1:
do we need this line?

@user1:
i assume not so i'll remove :D

@author:
Nyet! Leftover.

diff_hunk: @@ -22,14 +24,35 @@
 		}
 	}
 
-	afterUpdate(() => {
+	afterUpdate(async () => {
 		load_plotly_css();
+
 		let plotObj = JSON.parse(plot);
+
+		// the docs aren't very good but this works
+		plotObj.config = plotObj.config || {};
+		plotObj.config.responsive = true;
+		plotObj.responsive = true;
+		plotObj.layout.autosize = true;
+
 		plotObj.layout.title
 			? (plotObj.layout.margin = { autoexpand: true })
 			: (plotObj.layout.margin = { l: 0, r: 0, b: 0, t: 0 });
-		Plotly.react(plot_div, plotObj);
+		const _plot = Plotly.react(
+			plot_div,
+			plotObj.data,
+			plotObj.layout,
+			plotObj.config
path: js/plot/shared/plot_types/PlotlyPlot.svelte
text: @user1:
is `_plot` being used?

@author:
No. This was from when I was trying to figure something out I think.