From 1daf259b52d0b1ce16d916ff25a15d322b51ecf5 Mon Sep 17 00:00:00 2001
From: Hannah <hannahblair@users.noreply.github.com>
Date: Tue, 17 Sep 2024 00:26:12 +0200
Subject: [PATCH] Use `container` param in `gr.Markdown` (#9356)

* * add param
* add story

* add changeset

* Use IconButton for copy btn

* fix test

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/chatty-houses-do.md      |  6 +++++
 gradio/components/markdown.py       |  3 +++
 js/markdown/Index.svelte            |  3 ++-
 js/markdown/Markdown.stories.svelte |  5 ++--
 js/markdown/shared/Markdown.svelte  | 41 +++++------------------------
 5 files changed, 21 insertions(+), 37 deletions(-)
 create mode 100644 .changeset/chatty-houses-do.md

diff --git a/.changeset/chatty-houses-do.md b/.changeset/chatty-houses-do.md
new file mode 100644
index 0000000000000..73b4a7af4ff92
--- /dev/null
+++ b/.changeset/chatty-houses-do.md
@@ -0,0 +1,6 @@
+---
+"@gradio/markdown": minor
+"gradio": minor
+---
+
+feat:Use `container` param in `gr.Markdown`
diff --git a/gradio/components/markdown.py b/gradio/components/markdown.py
index bea5a93abc195..09e6580df6822 100644
--- a/gradio/components/markdown.py
+++ b/gradio/components/markdown.py
@@ -49,6 +49,7 @@ def __init__(
         max_height: int | str | None = None,
         min_height: int | str | None = None,
         show_copy_button: bool = False,
+        container: bool = False,
     ):
         """
         Parameters:
@@ -71,6 +72,7 @@ def __init__(
             max_height: The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If markdown content exceeds the height, the component will scroll. If markdown content is shorter than the height, the component will shrink to fit the content. Will not have any effect if `height` is set and is smaller than `max_height`.
             min_height: The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If markdown content exceeds the height, the component will expand to fit the content. Will not have any effect if `height` is set and is larger than `min_height`.
             show_copy_button: If True, includes a copy button to copy the text in the Markdown component. Default is False.
+            container: If True, the Markdown component will be displayed in a container. Default is False.
         """
         self.rtl = rtl
         if latex_delimiters is None:
@@ -95,6 +97,7 @@ def __init__(
             render=render,
             key=key,
             value=value,
+            container=container,
         )
 
     def preprocess(self, payload: str | None) -> str | None:
diff --git a/js/markdown/Index.svelte b/js/markdown/Index.svelte
index 5b044624da44a..0e2db2228eb95 100644
--- a/js/markdown/Index.svelte
+++ b/js/markdown/Index.svelte
@@ -35,6 +35,7 @@
 	export let min_height: number | string | undefined;
 	export let max_height: number | string | undefined;
 	export let show_copy_button = false;
+	export let container = false;
 
 	$: label, gradio.dispatch("change");
 </script>
@@ -43,7 +44,7 @@
 	{visible}
 	{elem_id}
 	{elem_classes}
-	container={false}
+	{container}
 	allow_overflow={true}
 	overflow_behavior="auto"
 	{height}
diff --git a/js/markdown/Markdown.stories.svelte b/js/markdown/Markdown.stories.svelte
index 3684bdaf46013..97bc7fe1c8398 100644
--- a/js/markdown/Markdown.stories.svelte
+++ b/js/markdown/Markdown.stories.svelte
@@ -86,10 +86,11 @@ in two separate lines.`
 />
 
 <Story
-	name="Markdown with Copy Button"
+	name="Markdown with Copy Button and Container"
 	args={{
 		value:
 			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.",
-		show_copy_button: true
+		show_copy_button: true,
+		container: true
 	}}
 />
diff --git a/js/markdown/shared/Markdown.svelte b/js/markdown/shared/Markdown.svelte
index ee8d7ed98ab91..f28219f5fb3c7 100644
--- a/js/markdown/shared/Markdown.svelte
+++ b/js/markdown/shared/Markdown.svelte
@@ -2,9 +2,9 @@
 	import { createEventDispatcher } from "svelte";
 	import { copy } from "@gradio/utils";
 	import { Copy, Check } from "@gradio/icons";
+	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
 
 	import MarkdownCode from "./MarkdownCode.svelte";
-	import { fade } from "svelte/transition";
 
 	export let elem_classes: string[] = [];
 	export let visible = true;
@@ -62,19 +62,13 @@
 	style={height ? `max-height: ${css_units(height)}; overflow-y: auto;` : ""}
 >
 	{#if show_copy_button}
-		{#if copied}
-			<button
-				in:fade={{ duration: 300 }}
-				aria-label="Copied"
-				aria-roledescription="Text copied"><Check /></button
-			>
-		{:else}
-			<button
+		<IconButtonWrapper>
+			<IconButton
+				Icon={copied ? Check : Copy}
 				on:click={handle_copy}
-				aria-label="Copy"
-				aria-roledescription="Copy text"><Copy /></button
-			>
-		{/if}
+				label={copied ? "Copied conversation" : "Copy conversation"}
+			></IconButton>
+		</IconButtonWrapper>
 	{/if}
 	<MarkdownCode
 		message={value}
@@ -111,25 +105,4 @@
 	.hide {
 		display: none;
 	}
-
-	button {
-		display: flex;
-		position: absolute;
-		top: -10px;
-		right: -10px;
-		align-items: center;
-		box-shadow: var(--shadow-drop);
-		border: 1px solid var(--color-border-primary);
-		border-top: none;
-		border-right: none;
-		border-radius: var(--block-label-right-radius);
-		background: var(--block-label-background-fill);
-		padding: 5px;
-		width: 22px;
-		height: 22px;
-		overflow: hidden;
-		color: var(--block-label-color);
-		font: var(--font-sans);
-		font-size: var(--button-small-text-size);
-	}
 </style>