From 6f99a028ed0071e3f588076c059d19f3ff5d85f8 Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Tue, 18 Jun 2024 15:38:00 +0900
Subject: [PATCH 1/5] Upgrade pyodide 0.26 (#8569)

* Update Pyodide to 0.26.0

* Update Pyodide to 0.26.1

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/shaggy-hotels-end.md |  6 ++++++
 js/wasm/package.json            |  2 +-
 js/wasm/src/webworker/index.ts  |  2 +-
 pnpm-lock.yaml                  | 35 +++++++--------------------------
 4 files changed, 15 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/shaggy-hotels-end.md

diff --git a/.changeset/shaggy-hotels-end.md b/.changeset/shaggy-hotels-end.md
new file mode 100644
index 000000000000..1de533ddeb12
--- /dev/null
+++ b/.changeset/shaggy-hotels-end.md
@@ -0,0 +1,6 @@
+---
+"@gradio/wasm": minor
+"gradio": minor
+---
+
+feat:Upgrade pyodide 0.26
diff --git a/js/wasm/package.json b/js/wasm/package.json
index 8eacafdc8cbd..2995304c4332 100644
--- a/js/wasm/package.json
+++ b/js/wasm/package.json
@@ -23,7 +23,7 @@
 		"build": "run-s build:worker build:client"
 	},
 	"devDependencies": {
-		"pyodide": "^0.25.0"
+		"pyodide": "0.26.1"
 	},
 	"dependencies": {
 		"@types/path-browserify": "^1.0.0",
diff --git a/js/wasm/src/webworker/index.ts b/js/wasm/src/webworker/index.ts
index 7b012130d1b2..c94874750964 100644
--- a/js/wasm/src/webworker/index.ts
+++ b/js/wasm/src/webworker/index.ts
@@ -23,7 +23,7 @@ import { generateRandomString } from "./random";
 import scriptRunnerPySource from "./py/script_runner.py?raw";
 import unloadModulesPySource from "./py/unload_modules.py?raw";
 
-importScripts("https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js");
+importScripts("https://cdn.jsdelivr.net/pyodide/v0.26.1/full/pyodide.js");
 
 type MessageTransceiver = DedicatedWorkerGlobalScope | MessagePort;
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fca33ec6a03e..176284927150 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1943,8 +1943,8 @@ importers:
         version: 1.0.1
     devDependencies:
       pyodide:
-        specifier: ^0.25.0
-        version: 0.25.0(bufferutil@4.0.7)
+        specifier: 0.26.1
+        version: 0.26.1(bufferutil@4.0.7)
 
 packages:
 
@@ -4942,9 +4942,6 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  base-64@1.0.0:
-    resolution: {integrity: sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==}
-
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
@@ -8052,8 +8049,9 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  pyodide@0.25.0:
-    resolution: {integrity: sha512-RagtX3TfV2M0QAfThG2SMvwE31ikqAFDUXc5/4xhppEoVf4VbL7L0kbKOIdSNg7MbVsHELVxftk66WvT926GpA==}
+  pyodide@0.26.1:
+    resolution: {integrity: sha512-P+Gm88nwZqY7uBgjbQH8CqqU6Ei/rDn7pS1t02sNZsbyLJMyE2OVXjgNuqVT3KqYWnyGREUN0DbBUCJqk8R0ew==}
+    engines: {node: '>=18.0.0'}
 
   qs@6.11.0:
     resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==}
@@ -9539,18 +9537,6 @@ packages:
       utf-8-validate:
         optional: true
 
-  ws@8.16.0:
-    resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==}
-    engines: {node: '>=10.0.0'}
-    peerDependencies:
-      bufferutil: ^4.0.1
-      utf-8-validate: '>=5.0.2'
-    peerDependenciesMeta:
-      bufferutil:
-        optional: true
-      utf-8-validate:
-        optional: true
-
   ws@8.17.0:
     resolution: {integrity: sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==}
     engines: {node: '>=10.0.0'}
@@ -13280,8 +13266,6 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
-  base-64@1.0.0: {}
-
   base64-js@1.5.1: {}
 
   better-opn@3.0.2:
@@ -16654,10 +16638,9 @@ snapshots:
 
   punycode@2.3.1: {}
 
-  pyodide@0.25.0(bufferutil@4.0.7):
+  pyodide@0.26.1(bufferutil@4.0.7):
     dependencies:
-      base-64: 1.0.0
-      ws: 8.16.0(bufferutil@4.0.7)
+      ws: 8.17.0(bufferutil@4.0.7)
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
@@ -18487,10 +18470,6 @@ snapshots:
     optionalDependencies:
       bufferutil: 4.0.7
 
-  ws@8.16.0(bufferutil@4.0.7):
-    optionalDependencies:
-      bufferutil: 4.0.7
-
   ws@8.17.0(bufferutil@4.0.7):
     optionalDependencies:
       bufferutil: 4.0.7

From ed82a6237ec7873e2554c2ad0be438650cfebe8c Mon Sep 17 00:00:00 2001
From: Ali Abdalla <ali.si3luwa@gmail.com>
Date: Tue, 18 Jun 2024 23:59:43 -0700
Subject: [PATCH 2/5] Bring back embedded demos on component docs (#8557)

* add component demos

* formatting

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/swift-peas-allow.md                |  5 +++
 js/_website/src/lib/assets/style.css          |  7 ++++
 .../gradio/03_components/annotatedimage.svx   | 25 ++++++++++++
 .../templates/gradio/03_components/audio.svx  | 10 +++++
 .../gradio/03_components/barplot.svx          | 37 +++++++++++++++++
 .../templates/gradio/03_components/button.svx | 10 +++++
 .../gradio/03_components/chatbot.svx          | 10 +++++
 .../gradio/03_components/checkbox.svx         | 10 +++++
 .../gradio/03_components/checkboxgroup.svx    | 10 +++++
 .../gradio/03_components/clearbutton.svx      | 11 +++++
 .../templates/gradio/03_components/code.svx   | 16 ++++++++
 .../gradio/03_components/colorpicker.svx      | 15 +++++++
 .../gradio/03_components/dataframe.svx        | 15 +++++++
 .../gradio/03_components/dataset.svx          | 21 ++++++++++
 .../gradio/03_components/dropdown.svx         | 10 +++++
 .../gradio/03_components/duplicatebutton.svx  | 10 +++++
 .../templates/gradio/03_components/file.svx   | 10 +++++
 .../gradio/03_components/gallery.svx          | 17 ++++++++
 .../gradio/03_components/highlightedtext.svx  | 24 +++++++++++
 .../templates/gradio/03_components/html.svx   | 13 ++++++
 .../templates/gradio/03_components/image.svx  | 10 +++++
 .../gradio/03_components/imageeditor.svx      | 11 +++++
 .../templates/gradio/03_components/json.svx   | 25 ++++++++++++
 .../templates/gradio/03_components/label.svx  | 11 +++++
 .../gradio/03_components/lineplot.svx         | 40 +++++++++++++++++++
 .../gradio/03_components/markdown.svx         | 11 +++++
 .../gradio/03_components/model3d.svx          | 10 +++++
 .../03_components/multimodaltextbox.svx       | 10 +++++
 .../templates/gradio/03_components/number.svx | 10 +++++
 .../gradio/03_components/paramviewer.svx      | 25 ++++++++++++
 .../templates/gradio/03_components/plot.svx   | 22 ++++++++++
 .../templates/gradio/03_components/radio.svx  | 10 +++++
 .../gradio/03_components/scatterplot.svx      | 38 ++++++++++++++++++
 .../templates/gradio/03_components/slider.svx | 10 +++++
 .../gradio/03_components/textbox.svx          | 11 +++++
 .../gradio/03_components/uploadbutton.svx     | 16 ++++++++
 .../templates/gradio/03_components/video.svx  | 10 +++++
 37 files changed, 566 insertions(+)
 create mode 100644 .changeset/swift-peas-allow.md

diff --git a/.changeset/swift-peas-allow.md b/.changeset/swift-peas-allow.md
new file mode 100644
index 000000000000..4f2c19c1abf9
--- /dev/null
+++ b/.changeset/swift-peas-allow.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Bring back embedded demos on component docs
diff --git a/js/_website/src/lib/assets/style.css b/js/_website/src/lib/assets/style.css
index af22db89d2e0..36d50a3acaf6 100644
--- a/js/_website/src/lib/assets/style.css
+++ b/js/_website/src/lib/assets/style.css
@@ -295,3 +295,10 @@ strong {
 .obj ul {
 	padding-inline-start: 40px;
 }
+
+.embedded-component .gradio-container {
+	padding: var(--size-4) 0 0 0 !important;
+}
+.embedded-component .gradio-container footer {
+	display: none !important;
+}
diff --git a/js/_website/src/lib/templates/gradio/03_components/annotatedimage.svx b/js/_website/src/lib/templates/gradio/03_components/annotatedimage.svx
index 7c6457c52100..64b01d81133d 100644
--- a/js/_website/src/lib/templates/gradio/03_components/annotatedimage.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/annotatedimage.svx
@@ -20,6 +20,31 @@
 gradio.AnnotatedImage(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+import numpy as np 
+import requests 
+from io import BytesIO
+from PIL import Image
+base_image = "https://gradio-builds.s3.amazonaws.com/demo-files/base.png"
+building_image = requests.get("https://gradio-builds.s3.amazonaws.com/demo-files/buildings.png")
+building_image = np.asarray(Image.open(BytesIO(building_image.content)))[:, :, -1] > 0
+with gr.Blocks() as demo:
+    gr.AnnotatedImage(
+        value=(base_image, [(building_image, "buildings")]),
+        height=500,
+    )
+demo.launch()
+<gradio-requirements>
+requests
+pillow
+</gradio-requirements>
+</gradio-lite>
+</div>
+
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/audio.svx b/js/_website/src/lib/templates/gradio/03_components/audio.svx
index 59c9b986cc9c..195f9a8db487 100644
--- a/js/_website/src/lib/templates/gradio/03_components/audio.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/audio.svx
@@ -21,6 +21,16 @@
 gradio.Audio(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+    gr.Audio("https://file-examples.com/storage/fe3cb26995666504a8d6180/2017/11/file_example_MP3_700KB.mp3")
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/barplot.svx b/js/_website/src/lib/templates/gradio/03_components/barplot.svx
index 719a3c8db16e..00707ddd649c 100644
--- a/js/_website/src/lib/templates/gradio/03_components/barplot.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/barplot.svx
@@ -20,6 +20,43 @@
 gradio.BarPlot(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+import pandas as pd
+import numpy as np
+simple = pd.DataFrame(np.array(
+    [
+        ["A", 28],
+        ["B", 55],
+        ["C", 43],
+        ["D", 91],
+        ["E", 81],
+        ["F", 53],
+        ["G", 19],
+        ["H", 87],
+        ["I", 52],
+        
+    ]
+), columns=["item", "inventory"])
+with gr.Blocks() as demo:
+    gr.BarPlot(
+        value=simple,
+        x="item",
+        y="inventory",
+        title="Simple Bar Plot",
+        container=True,
+        width=400
+    )
+demo.launch()
+<gradio-requirements>
+pandas
+</gradio-requirements>
+</gradio-lite>
+
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/button.svx b/js/_website/src/lib/templates/gradio/03_components/button.svx
index 51932cf07ee2..6d470e184834 100644
--- a/js/_website/src/lib/templates/gradio/03_components/button.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/button.svx
@@ -20,6 +20,16 @@
 gradio.Button(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+   gr.Button()
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/chatbot.svx b/js/_website/src/lib/templates/gradio/03_components/chatbot.svx
index 443f7600a595..969a9a189edd 100644
--- a/js/_website/src/lib/templates/gradio/03_components/chatbot.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/chatbot.svx
@@ -20,6 +20,16 @@
 gradio.Chatbot(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+    gr.Chatbot(value=[["Hello World","Hey Gradio!"],["❤️","😍"],["🔥","🤗"]])
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/checkbox.svx b/js/_website/src/lib/templates/gradio/03_components/checkbox.svx
index de45e1e5b5b6..00263a13fc33 100644
--- a/js/_website/src/lib/templates/gradio/03_components/checkbox.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/checkbox.svx
@@ -20,6 +20,16 @@
 gradio.Checkbox(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.Checkbox()
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/checkboxgroup.svx b/js/_website/src/lib/templates/gradio/03_components/checkboxgroup.svx
index 83f9592bf099..1f0dc7f69eb1 100644
--- a/js/_website/src/lib/templates/gradio/03_components/checkboxgroup.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/checkboxgroup.svx
@@ -20,6 +20,16 @@
 gradio.CheckboxGroup(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.CheckboxGroup(["First Choice", "Second Choice", "Third Choice"])
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/clearbutton.svx b/js/_website/src/lib/templates/gradio/03_components/clearbutton.svx
index 1f42c13d3698..7381d61e6fa9 100644
--- a/js/_website/src/lib/templates/gradio/03_components/clearbutton.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/clearbutton.svx
@@ -20,6 +20,17 @@
 gradio.ClearButton(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+    textbox = gr.Textbox(value="This is some text")
+    gr.ClearButton(textbox)
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/code.svx b/js/_website/src/lib/templates/gradio/03_components/code.svx
index 97a43ef24221..0c6f399f6798 100644
--- a/js/_website/src/lib/templates/gradio/03_components/code.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/code.svx
@@ -20,6 +20,22 @@
 gradio.Code(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo: 
+    gr.Code(language="python", value="""
+import gradio as gr
+def hello(name): 
+    return "hello " + name
+interface = gr.Interface(hello, "text", "text")
+interface.launch()
+    """, interactive=True, lines=6)
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/colorpicker.svx b/js/_website/src/lib/templates/gradio/03_components/colorpicker.svx
index 9df8af7fbeae..7c9d3e5ef1e1 100644
--- a/js/_website/src/lib/templates/gradio/03_components/colorpicker.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/colorpicker.svx
@@ -20,6 +20,21 @@
 gradio.ColorPicker(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo: 
+    with gr.Column():
+        input = gr.ColorPicker(interactive=True)
+        output = gr.Markdown("You picked: **#000000**")
+    def pick(color):
+        return "You picked: **" + color + "**"
+    input.change(pick, input, output)
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/dataframe.svx b/js/_website/src/lib/templates/gradio/03_components/dataframe.svx
index 95fbb7020715..e0e33670e194 100644
--- a/js/_website/src/lib/templates/gradio/03_components/dataframe.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/dataframe.svx
@@ -20,6 +20,21 @@
 gradio.Dataframe(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+    gr.Dataframe(value=
+    [
+        [0, 1, True],
+        [1, 0, False]
+    ]
+    , interactive=True)
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/dataset.svx b/js/_website/src/lib/templates/gradio/03_components/dataset.svx
index e9851674ea9b..c2f9f2ce9ade 100644
--- a/js/_website/src/lib/templates/gradio/03_components/dataset.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/dataset.svx
@@ -20,6 +20,27 @@
 gradio.Dataset(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+    gr.Dataset(components=[gr.Textbox(visible=False)],
+        label="Text Dataset",
+        samples=[
+            ["The quick brown fox jumps over the lazy dog"],
+            ["Build & share delightful machine learning apps"],
+            ["She sells seashells by the seashore"],
+            ["Supercalifragilisticexpialidocious"],
+            ["Lorem ipsum"],
+            ["That's all folks!"]
+        ],
+    )
+demo.launch()
+</gradio-lite>
+</div>
+
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/dropdown.svx b/js/_website/src/lib/templates/gradio/03_components/dropdown.svx
index 42e6f5ca74e7..301a50342294 100644
--- a/js/_website/src/lib/templates/gradio/03_components/dropdown.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/dropdown.svx
@@ -20,6 +20,16 @@
 gradio.Dropdown(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.Dropdown(choices=["First Choice", "Second Choice", "Third Choice"])
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/duplicatebutton.svx b/js/_website/src/lib/templates/gradio/03_components/duplicatebutton.svx
index 9c7fc1e74b7b..e6671f05dbb8 100644
--- a/js/_website/src/lib/templates/gradio/03_components/duplicatebutton.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/duplicatebutton.svx
@@ -20,6 +20,16 @@
 gradio.DuplicateButton(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.DuplicateButton()
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/file.svx b/js/_website/src/lib/templates/gradio/03_components/file.svx
index 274cc2aadb0b..772fa4709778 100644
--- a/js/_website/src/lib/templates/gradio/03_components/file.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/file.svx
@@ -20,6 +20,16 @@
 gradio.File(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.File()
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/gallery.svx b/js/_website/src/lib/templates/gradio/03_components/gallery.svx
index b46a34cdbf53..475f5866b7f3 100644
--- a/js/_website/src/lib/templates/gradio/03_components/gallery.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/gallery.svx
@@ -20,6 +20,23 @@
 gradio.Gallery(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    cheetahs = [
+        "https://upload.wikimedia.org/wikipedia/commons/0/09/TheCheethcat.jpg",
+        "https://nationalzoo.si.edu/sites/default/files/animals/cheetah-003.jpg",
+        "https://img.etimg.com/thumb/msid-50159822,width-650,imgsize-129520,,resizemode-4,quality-100/.jpg",
+        "https://nationalzoo.si.edu/sites/default/files/animals/cheetah-002.jpg",
+        "https://images.theconversation.com/files/375893/original/file-20201218-13-a8h8uq.jpg?ixlib=rb-1.1.0&rect=16%2C407%2C5515%2C2924&q=45&auto=format&w=496&fit=clip",
+    ]
+    gr.Gallery(value=cheetahs, columns=4)
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/highlightedtext.svx b/js/_website/src/lib/templates/gradio/03_components/highlightedtext.svx
index c169724a2d48..ec134dbb16e6 100644
--- a/js/_website/src/lib/templates/gradio/03_components/highlightedtext.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/highlightedtext.svx
@@ -20,6 +20,30 @@
 gradio.HighlightedText(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+    gr.HighlightedText(
+        value=[
+            ("The ", "article"), 
+            ("quick ", "adjective"),
+            ("brown ", "adjective"), 
+            ("fox ", "noun"),
+            ("jumps ", "verb"), 
+            ("over ", "preposition"),
+            ("the ", "article"), 
+            ("lazy ", "adjective"),
+            ("dog", "noun"),
+        ],
+        combine_adjacent=True,
+    )
+demo.launch()
+
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/html.svx b/js/_website/src/lib/templates/gradio/03_components/html.svx
index d0dabb946544..e61aead6c42d 100644
--- a/js/_website/src/lib/templates/gradio/03_components/html.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/html.svx
@@ -10,6 +10,8 @@
     import { style_formatted_text } from "$lib/text";
 
     let obj = get_object("html");
+
+    let embedded_demo = "<p style='margin-top: 1rem, margin-bottom: 1rem'>This <em>example</em> was <strong>written</strong> in <a href='https://en.wikipedia.org/wiki/HTML' _target='blank'>HTML</a> </p>"
 </script>
 
 <!--- Title -->
@@ -20,6 +22,17 @@
 gradio.HTML(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    with gr.Group():
+        gr.HTML(value="{embedded_demo}")
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/image.svx b/js/_website/src/lib/templates/gradio/03_components/image.svx
index cdba4719277c..d432677684c1 100644
--- a/js/_website/src/lib/templates/gradio/03_components/image.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/image.svx
@@ -20,6 +20,16 @@
 gradio.Image(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.Image()
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/imageeditor.svx b/js/_website/src/lib/templates/gradio/03_components/imageeditor.svx
index 39bc5501def3..28587103018a 100644
--- a/js/_website/src/lib/templates/gradio/03_components/imageeditor.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/imageeditor.svx
@@ -22,6 +22,17 @@
 gradio.ImageEditor(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.ImageEditor()
+demo.launch()
+</gradio-lite>
+</div>
+
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/json.svx b/js/_website/src/lib/templates/gradio/03_components/json.svx
index 5f8b67acbba0..068748e89208 100644
--- a/js/_website/src/lib/templates/gradio/03_components/json.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/json.svx
@@ -10,6 +10,17 @@
     import { style_formatted_text } from "$lib/text";
 
     let obj = get_object("json");
+    let embedded_demo_obj = `{
+            "Key 1": "Value 1",
+            "Key 2": {"Key 3": "Value 2", "Key 4": "Value 3"},
+            "Key 5": ["Item 1", "Item 2", "Item 3"],
+            "Key 6": 123,
+            "Key 7": 123.456,
+            "Key 8": True,
+            "Key 9": False,
+            "Key 10": None,
+            "Key 11": np.array([1, 2, 3]),
+        }`
 </script>
 
 <!--- Title -->
@@ -20,6 +31,20 @@
 gradio.JSON(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+import numpy as np
+with gr.Blocks() as demo:
+    out = gr.JSON(value={embedded_demo_obj})
+demo.launch()
+<gradio-requirements>
+numpy
+</gradio-requirements>
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/label.svx b/js/_website/src/lib/templates/gradio/03_components/label.svx
index ce6e5af4cdaf..fc372394b9d1 100644
--- a/js/_website/src/lib/templates/gradio/03_components/label.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/label.svx
@@ -10,6 +10,7 @@
     import { style_formatted_text } from "$lib/text";
 
     let obj = get_object("label");
+    let embedded_demo_value = `{"First Label": 0.7, "Second Label": 0.2, "Third Label": 0.1}`
 </script>
 
 <!--- Title -->
@@ -20,6 +21,16 @@
 gradio.Label(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.Label(value={embedded_demo_value})
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/lineplot.svx b/js/_website/src/lib/templates/gradio/03_components/lineplot.svx
index 1636ec480110..658cb7b72076 100644
--- a/js/_website/src/lib/templates/gradio/03_components/lineplot.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/lineplot.svx
@@ -10,6 +10,10 @@
     import { style_formatted_text } from "$lib/text";
 
     let obj = get_object("lineplot");
+    let demo_code = `{
+            'week': x,
+            'price': y
+        }`
 </script>
 
 <!--- Title -->
@@ -20,6 +24,42 @@
 gradio.LinePlot(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+import pandas as pd
+import numpy as np
+simple = pd.DataFrame(np.array(
+    [
+        [1, 28],
+        [2, 55],
+        [3, 43],
+        [4, 91],
+        [5, 81],
+        [6, 53],
+        [7, 19],
+        [8, 87],
+        [9, 52],
+    ]
+), columns=["week", "price"])
+with gr.Blocks() as demo:
+    gr.LinePlot(
+        value=simple,
+        x="week",
+        y="price",
+        title="Stock Price Chart",
+        container=True,
+        width=400
+    )
+demo.launch()
+<gradio-requirements>
+pandas
+numpy
+</gradio-requirements>
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/markdown.svx b/js/_website/src/lib/templates/gradio/03_components/markdown.svx
index d57feb4244df..149b453c0ffc 100644
--- a/js/_website/src/lib/templates/gradio/03_components/markdown.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/markdown.svx
@@ -20,6 +20,17 @@
 gradio.Markdown(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+    with gr.Group():
+        gr.Markdown(value="This _example_ was **written** in [Markdown](https://en.wikipedia.org/wiki/Markdown)\n")
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/model3d.svx b/js/_website/src/lib/templates/gradio/03_components/model3d.svx
index 1daa784095c8..42e2a9246d0e 100644
--- a/js/_website/src/lib/templates/gradio/03_components/model3d.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/model3d.svx
@@ -20,6 +20,16 @@
 gradio.Model3D(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.Model3D()
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/multimodaltextbox.svx b/js/_website/src/lib/templates/gradio/03_components/multimodaltextbox.svx
index 8161e217cd95..0ea5f7b07f85 100644
--- a/js/_website/src/lib/templates/gradio/03_components/multimodaltextbox.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/multimodaltextbox.svx
@@ -20,6 +20,16 @@
 gradio.MultimodalTextbox(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+    gr.MultimodalTextbox(interactive=True)
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/number.svx b/js/_website/src/lib/templates/gradio/03_components/number.svx
index 2d8545149e8a..87a57e67828f 100644
--- a/js/_website/src/lib/templates/gradio/03_components/number.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/number.svx
@@ -20,6 +20,16 @@
 gradio.Number(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.Number()
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/paramviewer.svx b/js/_website/src/lib/templates/gradio/03_components/paramviewer.svx
index fcdd425b242e..8d6ba59fd1dc 100644
--- a/js/_website/src/lib/templates/gradio/03_components/paramviewer.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/paramviewer.svx
@@ -10,6 +10,18 @@
     import { style_formatted_text } from "$lib/text";
 
     let obj = get_object("paramviewer");
+    let demo_obj = `{
+           "number": { 
+             "type": "int | float", 
+             "description": "The number to round", 
+             "default": None
+            },
+            "ndigits": { 
+             "type": "int", 
+             "description": "The number of digits to round to", 
+             "default": "0"
+            }
+         }`
 </script>
 
 <!--- Title -->
@@ -20,6 +32,19 @@
 gradio.ParamViewer(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+    gr.Markdown("The `round()` function in Python takes two parameters")
+    gr.ParamViewer(
+        {demo_obj}
+    )
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/plot.svx b/js/_website/src/lib/templates/gradio/03_components/plot.svx
index 15076f2f5bf3..c42afdfacb9c 100644
--- a/js/_website/src/lib/templates/gradio/03_components/plot.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/plot.svx
@@ -20,6 +20,28 @@
 gradio.Plot(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+import matplotlib.pyplot as plt
+import numpy as np
+Fs = 8000
+f = 5
+sample = 8000
+x = np.arange(sample)
+y = np.sin(2 * np.pi * f * x / Fs)
+plt.plot(x, y)
+with gr.Blocks() as demo:
+    gr.Plot(value=plt, format="png")
+demo.launch()
+<gradio-requirements>
+matplotlib
+numpy
+</gradio-requirements>
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/radio.svx b/js/_website/src/lib/templates/gradio/03_components/radio.svx
index 2d7d3334c2e7..833b9ece4a76 100644
--- a/js/_website/src/lib/templates/gradio/03_components/radio.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/radio.svx
@@ -20,6 +20,16 @@
 gradio.Radio(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.Radio(choices=["First Choice", "Second Choice", "Third Choice"])
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/scatterplot.svx b/js/_website/src/lib/templates/gradio/03_components/scatterplot.svx
index 99aefd170b9b..68defd6eac90 100644
--- a/js/_website/src/lib/templates/gradio/03_components/scatterplot.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/scatterplot.svx
@@ -20,6 +20,44 @@
 gradio.ScatterPlot(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+import pandas as pd
+import numpy as np
+simple = pd.DataFrame(np.array(
+    [
+        [1, 23, "USA", "Ford Mustang"],
+        [2, 40, "USA", "Chrysler New Yorker Brougham"],
+        [3, 32, "Japan", "Toyota Corolla"],
+        [4, 32, "Europe", "Mercedes Benz"],
+        [5, 15, "USA", "AMC Matador"],
+        [6, 35, "Europe", "BMW X5"],
+        [7, 28, "Japan", "Honda Civic"],
+        [8, 15, "Japan", "Honda Accord"],
+        [9, 41, "Europe", "Peugeot 208"],
+    ]
+), columns=["Age", "Miles Per Gallon", "Origin of Car", "Name"])
+with gr.Blocks() as demo:
+    gr.ScatterPlot(
+        value=simple,
+        x="Age",
+        y="Miles Per Gallon",
+        title="Car Data",
+        container=True,
+        width=400,
+        color="Origin of Car",
+        tooltip="Name"
+    )
+demo.launch()
+<gradio-requirements>
+pandas
+numpy
+</gradio-requirements>
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/slider.svx b/js/_website/src/lib/templates/gradio/03_components/slider.svx
index 7e072066f1c7..ec6c0af0a925 100644
--- a/js/_website/src/lib/templates/gradio/03_components/slider.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/slider.svx
@@ -20,6 +20,16 @@
 gradio.Slider(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.Slider()
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/textbox.svx b/js/_website/src/lib/templates/gradio/03_components/textbox.svx
index 7163faa1117d..30e873f1faa8 100644
--- a/js/_website/src/lib/templates/gradio/03_components/textbox.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/textbox.svx
@@ -20,6 +20,17 @@
 gradio.Textbox(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.Textbox()
+demo.launch()
+</gradio-lite>
+</div>
+
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/uploadbutton.svx b/js/_website/src/lib/templates/gradio/03_components/uploadbutton.svx
index a460433623c9..03860fef574f 100644
--- a/js/_website/src/lib/templates/gradio/03_components/uploadbutton.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/uploadbutton.svx
@@ -20,6 +20,22 @@
 gradio.UploadButton(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+def upload_file(files):
+    file_paths = [file.name for file in files]
+    return file_paths
+with gr.Blocks() as demo:
+    file_output = gr.File()
+    upload_button = gr.UploadButton("Click to Upload an Image or Video File", file_types=["image", "video"], file_count="multiple")
+    upload_button.upload(upload_file, upload_button, file_output)
+demo.launch()
+</gradio-lite>
+</div>
+
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/video.svx b/js/_website/src/lib/templates/gradio/03_components/video.svx
index 0f0bb2ae68a0..4dbb5c2c1e02 100644
--- a/js/_website/src/lib/templates/gradio/03_components/video.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/video.svx
@@ -19,6 +19,16 @@
 ```python
 gradio.Video(···)
 ```
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.Video()
+demo.launch()
+</gradio-lite>
+</div>
+
 
 <!--- Description -->
 ### Description

From 56af40f5e3bc4ea98bcfe6838f7ffcda1f47b63f Mon Sep 17 00:00:00 2001
From: Shruti Agarwal <82811717+ShruAgarwal@users.noreply.github.com>
Date: Wed, 19 Jun 2024 20:59:59 +0530
Subject: [PATCH 3/5] Fixes the `favicon_path` working error (#8573)

* fixes  error

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/red-badgers-sip.md | 5 +++++
 gradio/routes.py              | 7 +++++++
 2 files changed, 12 insertions(+)
 create mode 100644 .changeset/red-badgers-sip.md

diff --git a/.changeset/red-badgers-sip.md b/.changeset/red-badgers-sip.md
new file mode 100644
index 000000000000..dd083626ba1d
--- /dev/null
+++ b/.changeset/red-badgers-sip.md
@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+fix:Fixes the `favicon_path` working error
diff --git a/gradio/routes.py b/gradio/routes.py
index fed9e98c4f67..0fc8f5b76289 100644
--- a/gradio/routes.py
+++ b/gradio/routes.py
@@ -7,6 +7,7 @@
 import contextlib
 import math
 import sys
+import warnings
 
 if sys.version_info >= (3, 9):
     from importlib.resources import files
@@ -1287,6 +1288,12 @@ def read_main():
         app = gr.mount_gradio_app(app, io, path="/gradio")
         # Then run `uvicorn run:app` from the terminal and navigate to http://localhost:8000/gradio.
     """
+    if favicon_path is not None and path != "/":
+        warnings.warn(
+            "The 'favicon_path' parameter is set but will be ignored because 'path' is not '/'. "
+            "Please add the favicon directly to your FastAPI app."
+        )
+
     blocks.dev_mode = False
     blocks.max_file_size = utils._parse_file_size(max_file_size)
     blocks.config = blocks.get_config_file()

From fd5aab10be53a4215b5eeca03cd1c99c5a30c21d Mon Sep 17 00:00:00 2001
From: Sadra Barikbin <sadraqazvin1@yahoo.com>
Date: Wed, 19 Jun 2024 17:39:10 +0200
Subject: [PATCH 4/5] Remove duplicated code in `routes.py` (#8565)

* Update routes.py

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/slick-dancers-lie.md | 5 +++++
 gradio/routes.py                | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/slick-dancers-lie.md

diff --git a/.changeset/slick-dancers-lie.md b/.changeset/slick-dancers-lie.md
new file mode 100644
index 000000000000..e877789e1a64
--- /dev/null
+++ b/.changeset/slick-dancers-lie.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Remove duplicated code in `routes.py`
diff --git a/gradio/routes.py b/gradio/routes.py
index 0fc8f5b76289..eaab3db1c863 100644
--- a/gradio/routes.py
+++ b/gradio/routes.py
@@ -382,7 +382,7 @@ def main(request: fastapi.Request, user: str = Depends(get_current_user)):
                 request=request, route_path="/", root_path=app.root_path
             )
             if (app.auth is None and app.auth_dependency is None) or user is not None:
-                config = app.get_blocks().config
+                config = blocks.config
                 config = route_utils.update_root_in_config(config, root)
             elif app.auth_dependency:
                 raise HTTPException(
@@ -392,7 +392,7 @@ def main(request: fastapi.Request, user: str = Depends(get_current_user)):
                 config = {
                     "auth_required": True,
                     "auth_message": blocks.auth_message,
-                    "space_id": app.get_blocks().space_id,
+                    "space_id": blocks.space_id,
                     "root": root,
                 }
 

From 2b0c1577b27fcf30920196f815ec7be604893b19 Mon Sep 17 00:00:00 2001
From: Shruti Agarwal <82811717+ShruAgarwal@users.noreply.github.com>
Date: Wed, 19 Jun 2024 23:37:21 +0530
Subject: [PATCH 5/5] Added an optional `height` and overflow scrollbar for the
 Markdown Component (#8528)

* scrollable-markdown-changes-added

* made suggested changes

* added a new story in Storybook

* add changeset

* add changeset

* tweaks

* changes

* changes

* revert example change

* tweaks

* demo changes

* more tweaks

* formatting

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/tasty-coins-share.md     |  6 ++++++
 demo/markdown_example/run.ipynb     |  2 +-
 demo/markdown_example/run.py        |  8 ++------
 gradio/components/markdown.py       |  3 +++
 js/markdown/Index.svelte            |  2 ++
 js/markdown/Markdown.stories.svelte | 14 ++++++++++++++
 js/markdown/shared/Markdown.svelte  |  8 ++++++++
 7 files changed, 36 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/tasty-coins-share.md

diff --git a/.changeset/tasty-coins-share.md b/.changeset/tasty-coins-share.md
new file mode 100644
index 000000000000..47c951354e2f
--- /dev/null
+++ b/.changeset/tasty-coins-share.md
@@ -0,0 +1,6 @@
+---
+"@gradio/markdown": minor
+"gradio": minor
+---
+
+feat:Added an optional `height` and overflow scrollbar for the Markdown Component
diff --git a/demo/markdown_example/run.ipynb b/demo/markdown_example/run.ipynb
index ce2c486049e9..973881ce8b92 100644
--- a/demo/markdown_example/run.ipynb
+++ b/demo/markdown_example/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: markdown_example"]}, {"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", "css = (\n", "    \"footer {display: none !important;} .gradio-container {min-height: 0px !important;}\"\n", ")\n", "\n", "# sample md stolen from https://dillinger.io/\n", "\n", "md = \"\"\"# Dillinger\n", "## _The Last Markdown Editor, Ever_\n", "\n", "This is some `inline code`, it is good.\n", "\n", "[![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://travis-ci.org/joemccann/dillinger)\n", "\n", "Dillinger is a cloud-enabled, mobile-ready, offline-storage compatible,\n", "AngularJS-powered HTML5 Markdown editor.\n", "\n", "- Type some Markdown on the left\n", "- See HTML in the right\n", "- \u2728Magic \u2728\n", "\n", "## Features\n", "\n", "- Import a HTML file and watch it magically convert to Markdown\n", "- Drag and drop images (requires your Dropbox account be linked)\n", "- Import and save files from GitHub, Dropbox, Google Drive and One Drive\n", "- Drag and drop markdown and HTML files into Dillinger\n", "- Export documents as Markdown, HTML and PDF\n", "\n", "Markdown is a lightweight markup language based on the formatting conventions\n", "that people naturally use in email.\n", "As [John Gruber] writes on the [Markdown site][df1]\n", "\n", "> The overriding design goal for Markdown's\n", "> formatting syntax is to make it as readable\n", "> as possible. The idea is that a\n", "> Markdown-formatted document should be\n", "> publishable as-is, as plain text, without\n", "> looking like it's been marked up with tags\n", "> or formatting instructions.\n", "\n", "This text you see here is *actually- written in Markdown! To get a feel\n", "for Markdown's syntax, type some text into the left window and\n", "watch the results in the right.\n", "\n", "## Tech\n", "\n", "Dillinger uses a number of open source projects to work properly:\n", "\n", "- [AngularJS] - HTML enhanced for web apps!\n", "- [Ace Editor] - awesome web-based text editor\n", "- [markdown-it] - Markdown parser done right. Fast and easy to extend.\n", "- [Twitter Bootstrap] - great UI boilerplate for modern web apps\n", "- [node.js] - evented I/O for the backend\n", "- [Express] - fast node.js network app framework [@tjholowaychuk]\n", "- [Gulp] - the streaming build system\n", "- [Breakdance](https://breakdance.github.io/breakdance/) - HTML\n", "to Markdown converter\n", "- [jQuery] - duh\n", "\n", "And of course Dillinger itself is open source with a [public repository][dill]\n", " on GitHub.\n", "\n", "## Installation\n", "\n", "Dillinger requires [Node.js](https://nodejs.org/) v10+ to run.\n", "\n", "Install the dependencies and devDependencies and start the server.\n", "\n", "```bash\n", "cd dillinger\n", "npm i\n", "node app\n", "```\n", "\n", "For production environments...\n", "\n", "```bash\n", "npm install --production\n", "NODE_ENV=production node app\n", "```\n", "\n", "## Plugins\n", "\n", "Dillinger is currently extended with the following plugins.\n", "Instructions on how to use them in your own application are linked below.\n", "\n", "| Plugin | README |\n", "| ------ | ------ |\n", "| Dropbox | [plugins/dropbox/README.md][PlDb] |\n", "| GitHub | [plugins/github/README.md][PlGh] |\n", "| Google Drive | [plugins/googledrive/README.md][PlGd] |\n", "| OneDrive | [plugins/onedrive/README.md][PlOd] |\n", "| Medium | [plugins/medium/README.md][PlMe] |\n", "| Google Analytics | [plugins/googleanalytics/README.md][PlGa] |\n", "\n", "## Development\n", "\n", "Want to contribute? Great!\n", "\n", "Dillinger uses Gulp + Webpack for fast developing.\n", "Make a change in your file and instantaneously see your updates!\n", "\n", "Open your favorite Terminal and run these commands.\n", "\n", "First Tab:\n", "\n", "```bash\n", "node app\n", "```\n", "\n", "Second Tab:\n", "\n", "```bash\n", "gulp watch\n", "```\n", "\n", "(optional) Third:\n", "\n", "```bash\n", "karma test\n", "```\n", "\n", "#### Building for source\n", "\n", "For production release:\n", "\n", "```bash\n", "gulp build --prod\n", "```\n", "\n", "Generating pre-built zip archives for distribution:\n", "\n", "```bash\n", "gulp build dist --prod\n", "```\n", "\n", "## Docker\n", "\n", "Dillinger is very easy to install and deploy in a Docker container.\n", "\n", "By default, the Docker will expose port 8080, so change this within the\n", "Dockerfile if necessary. When ready, simply use the Dockerfile to\n", "build the image.\n", "\n", "```bash\n", "cd dillinger\n", "docker build -t <youruser>/dillinger:${package.json.version} .\n", "```\n", "\n", "This will create the dillinger image and pull in the necessary dependencies.\n", "Be sure to swap out `${package.json.version}` with the actual\n", "version of Dillinger.\n", "\n", "Once done, run the Docker image and map the port to whatever you wish on\n", "your host. In this example, we simply map port 8000 of the host to\n", "port 8080 of the Docker (or whatever port was exposed in the Dockerfile):\n", "\n", "```bash\n", "docker run -d -p 8000:8080 --restart=always --cap-add=SYS_ADMIN --name=dillinger <youruser>/dillinger:${package.json.version}\n", "```\n", "\n", "> Note: `--capt-add=SYS-ADMIN` is required for PDF rendering.\n", "\n", "Verify the deployment by navigating to your server address in\n", "your preferred browser.\n", "\n", "```bash\n", "127.0.0.1:8000\n", "```\n", "\n", "```python\n", "import gradio as gr\n", "\n", "gr.Blocks() as demo:\n", "    gr.Markdown(value=md)\n", "\n", "demo.launch()\n", "```\n", "\n", "```js\n", "function fancyAlert(arg) {\n", "    if(arg) {\n", "        $.facebox({div:'#foo'})\n", "    }\n", "}\n", "```\n", "\n", "## License\n", "\n", "MIT\n", "\n", "**Free Software, Hell Yeah!**\n", "\n", "[//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job. There is no need to format nicely because it shouldn't be seen. Thanks SO - http://stackoverflow.com/questions/4823468/store-comments-in-markdown-syntax)\n", "\n", "   [dill]: <https://github.com/joemccann/dillinger>\n", "   [git-repo-url]: <https://github.com/joemccann/dillinger.git>\n", "   [john gruber]: <http://daringfireball.net>\n", "   [df1]: <http://daringfireball.net/projects/markdown/>\n", "   [markdown-it]: <https://github.com/markdown-it/markdown-it>\n", "   [Ace Editor]: <http://ace.ajax.org>\n", "   [node.js]: <http://nodejs.org>\n", "   [Twitter Bootstrap]: <http://twitter.github.com/bootstrap/>\n", "   [jQuery]: <http://jquery.com>\n", "   [@tjholowaychuk]: <http://twitter.com/tjholowaychuk>\n", "   [express]: <http://expressjs.com>\n", "   [AngularJS]: <http://angularjs.org>\n", "   [Gulp]: <http://gulpjs.com>\n", "\n", "   [PlDb]: <https://github.com/joemccann/dillinger/tree/master/plugins/dropbox/README.md>\n", "   [PlGh]: <https://github.com/joemccann/dillinger/tree/master/plugins/github/README.md>\n", "   [PlGd]: <https://github.com/joemccann/dillinger/tree/master/plugins/googledrive/README.md>\n", "   [PlOd]: <https://github.com/joemccann/dillinger/tree/master/plugins/onedrive/README.md>\n", "   [PlMe]: <https://github.com/joemccann/dillinger/tree/master/plugins/medium/README.md>\n", "   [PlGa]: <https://github.com/RahulHP/dillinger/blob/master/plugins/googleanalytics/README.md>\n", "\n", "\"\"\"\n", "with gr.Blocks(css=css) as demo:\n", "    gr.Markdown(value=md, header_links=True)\n", "\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: markdown_example"]}, {"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", "# sample md stolen from https://dillinger.io/\n", "\n", "md = \"\"\"# Dillinger\n", "## _The Last Markdown Editor, Ever_\n", "\n", "This is some `inline code`, it is good.\n", "\n", "[![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://travis-ci.org/joemccann/dillinger)\n", "\n", "Dillinger is a cloud-enabled, mobile-ready, offline-storage compatible,\n", "AngularJS-powered HTML5 Markdown editor.\n", "\n", "- Type some Markdown on the left\n", "- See HTML in the right\n", "- \u2728Magic \u2728\n", "\n", "## Features\n", "\n", "- Import a HTML file and watch it magically convert to Markdown\n", "- Drag and drop images (requires your Dropbox account be linked)\n", "- Import and save files from GitHub, Dropbox, Google Drive and One Drive\n", "- Drag and drop markdown and HTML files into Dillinger\n", "- Export documents as Markdown, HTML and PDF\n", "\n", "Markdown is a lightweight markup language based on the formatting conventions\n", "that people naturally use in email.\n", "As [John Gruber] writes on the [Markdown site][df1]\n", "\n", "> The overriding design goal for Markdown's\n", "> formatting syntax is to make it as readable\n", "> as possible. The idea is that a\n", "> Markdown-formatted document should be\n", "> publishable as-is, as plain text, without\n", "> looking like it's been marked up with tags\n", "> or formatting instructions.\n", "\n", "This text you see here is *actually- written in Markdown! To get a feel\n", "for Markdown's syntax, type some text into the left window and\n", "watch the results in the right.\n", "\n", "## Tech\n", "\n", "Dillinger uses a number of open source projects to work properly:\n", "\n", "- [AngularJS] - HTML enhanced for web apps!\n", "- [Ace Editor] - awesome web-based text editor\n", "- [markdown-it] - Markdown parser done right. Fast and easy to extend.\n", "- [Twitter Bootstrap] - great UI boilerplate for modern web apps\n", "- [node.js] - evented I/O for the backend\n", "- [Express] - fast node.js network app framework [@tjholowaychuk]\n", "- [Gulp] - the streaming build system\n", "- [Breakdance](https://breakdance.github.io/breakdance/) - HTML\n", "to Markdown converter\n", "- [jQuery] - duh\n", "\n", "And of course Dillinger itself is open source with a [public repository][dill]\n", " on GitHub.\n", "\n", "## Installation\n", "\n", "Dillinger requires [Node.js](https://nodejs.org/) v10+ to run.\n", "\n", "Install the dependencies and devDependencies and start the server.\n", "\n", "```bash\n", "cd dillinger\n", "npm i\n", "node app\n", "```\n", "\n", "For production environments...\n", "\n", "```bash\n", "npm install --production\n", "NODE_ENV=production node app\n", "```\n", "\n", "## Plugins\n", "\n", "Dillinger is currently extended with the following plugins.\n", "Instructions on how to use them in your own application are linked below.\n", "\n", "| Plugin | README |\n", "| ------ | ------ |\n", "| Dropbox | [plugins/dropbox/README.md][PlDb] |\n", "| GitHub | [plugins/github/README.md][PlGh] |\n", "| Google Drive | [plugins/googledrive/README.md][PlGd] |\n", "| OneDrive | [plugins/onedrive/README.md][PlOd] |\n", "| Medium | [plugins/medium/README.md][PlMe] |\n", "| Google Analytics | [plugins/googleanalytics/README.md][PlGa] |\n", "\n", "## Development\n", "\n", "Want to contribute? Great!\n", "\n", "Dillinger uses Gulp + Webpack for fast developing.\n", "Make a change in your file and instantaneously see your updates!\n", "\n", "Open your favorite Terminal and run these commands.\n", "\n", "First Tab:\n", "\n", "```bash\n", "node app\n", "```\n", "\n", "Second Tab:\n", "\n", "```bash\n", "gulp watch\n", "```\n", "\n", "(optional) Third:\n", "\n", "```bash\n", "karma test\n", "```\n", "\n", "#### Building for source\n", "\n", "For production release:\n", "\n", "```bash\n", "gulp build --prod\n", "```\n", "\n", "Generating pre-built zip archives for distribution:\n", "\n", "```bash\n", "gulp build dist --prod\n", "```\n", "\n", "## Docker\n", "\n", "Dillinger is very easy to install and deploy in a Docker container.\n", "\n", "By default, the Docker will expose port 8080, so change this within the\n", "Dockerfile if necessary. When ready, simply use the Dockerfile to\n", "build the image.\n", "\n", "```bash\n", "cd dillinger\n", "docker build -t <youruser>/dillinger:${package.json.version} .\n", "```\n", "\n", "This will create the dillinger image and pull in the necessary dependencies.\n", "Be sure to swap out `${package.json.version}` with the actual\n", "version of Dillinger.\n", "\n", "Once done, run the Docker image and map the port to whatever you wish on\n", "your host. In this example, we simply map port 8000 of the host to\n", "port 8080 of the Docker (or whatever port was exposed in the Dockerfile):\n", "\n", "```bash\n", "docker run -d -p 8000:8080 --restart=always --cap-add=SYS_ADMIN --name=dillinger <youruser>/dillinger:${package.json.version}\n", "```\n", "\n", "> Note: `--capt-add=SYS-ADMIN` is required for PDF rendering.\n", "\n", "Verify the deployment by navigating to your server address in\n", "your preferred browser.\n", "\n", "```bash\n", "127.0.0.1:8000\n", "```\n", "\n", "```python\n", "import gradio as gr\n", "\n", "gr.Blocks() as demo:\n", "    gr.Markdown(value=md)\n", "\n", "demo.launch()\n", "```\n", "\n", "```js\n", "function fancyAlert(arg) {\n", "    if(arg) {\n", "        $.facebox({div:'#foo'})\n", "    }\n", "}\n", "```\n", "\n", "## License\n", "\n", "MIT\n", "\n", "**Free Software, Hell Yeah!**\n", "\n", "[//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job. There is no need to format nicely because it shouldn't be seen. Thanks SO - http://stackoverflow.com/questions/4823468/store-comments-in-markdown-syntax)\n", "\n", "   [dill]: <https://github.com/joemccann/dillinger>\n", "   [git-repo-url]: <https://github.com/joemccann/dillinger.git>\n", "   [john gruber]: <http://daringfireball.net>\n", "   [df1]: <http://daringfireball.net/projects/markdown/>\n", "   [markdown-it]: <https://github.com/markdown-it/markdown-it>\n", "   [Ace Editor]: <http://ace.ajax.org>\n", "   [node.js]: <http://nodejs.org>\n", "   [Twitter Bootstrap]: <http://twitter.github.com/bootstrap/>\n", "   [jQuery]: <http://jquery.com>\n", "   [@tjholowaychuk]: <http://twitter.com/tjholowaychuk>\n", "   [express]: <http://expressjs.com>\n", "   [AngularJS]: <http://angularjs.org>\n", "   [Gulp]: <http://gulpjs.com>\n", "\n", "   [PlDb]: <https://github.com/joemccann/dillinger/tree/master/plugins/dropbox/README.md>\n", "   [PlGh]: <https://github.com/joemccann/dillinger/tree/master/plugins/github/README.md>\n", "   [PlGd]: <https://github.com/joemccann/dillinger/tree/master/plugins/googledrive/README.md>\n", "   [PlOd]: <https://github.com/joemccann/dillinger/tree/master/plugins/onedrive/README.md>\n", "   [PlMe]: <https://github.com/joemccann/dillinger/tree/master/plugins/medium/README.md>\n", "   [PlGa]: <https://github.com/RahulHP/dillinger/blob/master/plugins/googleanalytics/README.md>\n", "\n", "\"\"\"\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(value=md, header_links=True, height=400)\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/markdown_example/run.py b/demo/markdown_example/run.py
index b4c6108295a8..23084b35861a 100644
--- a/demo/markdown_example/run.py
+++ b/demo/markdown_example/run.py
@@ -1,9 +1,5 @@
 import gradio as gr
 
-css = (
-    "footer {display: none !important;} .gradio-container {min-height: 0px !important;}"
-)
-
 # sample md stolen from https://dillinger.io/
 
 md = """# Dillinger
@@ -217,7 +213,7 @@
    [PlGa]: <https://github.com/RahulHP/dillinger/blob/master/plugins/googleanalytics/README.md>
 
 """
-with gr.Blocks(css=css) as demo:
-    gr.Markdown(value=md, header_links=True)
+with gr.Blocks() as demo:
+    gr.Markdown(value=md, header_links=True, height=400)
 
 demo.launch()
diff --git a/gradio/components/markdown.py b/gradio/components/markdown.py
index 83a1274056ed..c5a2ee0f27e9 100644
--- a/gradio/components/markdown.py
+++ b/gradio/components/markdown.py
@@ -40,6 +40,7 @@ def __init__(
         sanitize_html: bool = True,
         line_breaks: bool = False,
         header_links: bool = False,
+        height: int | str | None = None,
     ):
         """
         Parameters:
@@ -57,6 +58,7 @@ def __init__(
             sanitize_html: If False, will disable HTML sanitization when converted from markdown. This is not recommended, as it can lead to security vulnerabilities.
             line_breaks: If True, will enable Github-flavored Markdown line breaks in chatbot messages. If False (default), single new lines will be ignored.
             header_links: If True, will automatically create anchors for headings, displaying a link icon on hover.
+            height: An optional maximum height of this component, specified in pixels if a number is passed, or in CSS units (e.g., '200px') if a stirng is passed in. If context exceeds this height, a scrollbar is added.
         """
         self.rtl = rtl
         if latex_delimiters is None:
@@ -65,6 +67,7 @@ def __init__(
         self.sanitize_html = sanitize_html
         self.line_breaks = line_breaks
         self.header_links = header_links
+        self.height = height
 
         super().__init__(
             label=label,
diff --git a/js/markdown/Index.svelte b/js/markdown/Index.svelte
index 78895470b23c..036557bad76a 100644
--- a/js/markdown/Index.svelte
+++ b/js/markdown/Index.svelte
@@ -31,6 +31,7 @@
 		display: boolean;
 	}[];
 	export let header_links = false;
+	export let height: number | string | undefined = undefined;
 
 	$: label, gradio.dispatch("change");
 </script>
@@ -61,6 +62,7 @@
 			{sanitize_html}
 			{line_breaks}
 			{header_links}
+			{height}
 		/>
 	</div>
 </Block>
diff --git a/js/markdown/Markdown.stories.svelte b/js/markdown/Markdown.stories.svelte
index 6913bb3cd346..5fa82a4c1734 100644
--- a/js/markdown/Markdown.stories.svelte
+++ b/js/markdown/Markdown.stories.svelte
@@ -12,6 +12,11 @@
 			description: "Whether to render right-to-left",
 			control: { type: "boolean" },
 			defaultValue: false
+		},
+		height: {
+			description: "Maximum height of the Markdown component",
+			control: { type: "text" },
+			defaultValue: "200px"
 		}
 	}}
 />
@@ -21,6 +26,7 @@
 		value="Here's some **bold** text. And some *italics* and some `code`"
 		latex_delimiters={[]}
 		{...args}
+		height={args.height}
 	/>
 </Template>
 
@@ -70,3 +76,11 @@ in two separate lines.`
 		header_links: true
 	}}
 />
+
+<Story
+	name="Markdown with Long Content (Vertical Scrolling)"
+	args={{
+		value: `# Heading\n${"This is some text.\n".repeat(100)}`,
+		height: "200px"
+	}}
+/>
diff --git a/js/markdown/shared/Markdown.svelte b/js/markdown/shared/Markdown.svelte
index f3efd31d52f8..4f9f9f5646f9 100644
--- a/js/markdown/shared/Markdown.svelte
+++ b/js/markdown/shared/Markdown.svelte
@@ -17,9 +17,16 @@
 		display: boolean;
 	}[];
 	export let header_links = false;
+	export let height: number | string | undefined = undefined;
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
+	const css_units = (dimension_value: string | number): string => {
+		return typeof dimension_value === "number"
+			? dimension_value + "px"
+			: dimension_value;
+	};
+
 	$: value, dispatch("change");
 </script>
 
@@ -30,6 +37,7 @@
 	data-testid="markdown"
 	dir={rtl ? "rtl" : "ltr"}
 	use:copy
+	style={height ? `max-height: ${css_units(height)}; overflow-y: auto;` : ""}
 >
 	<MarkdownCode
 		message={value}