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

@@ -0,0 +1,6 @@
+---
+"@gradio/markdown": minor
+"gradio": minor
+---
+
+feat:Use `container` param in `gr.Markdown`

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:

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}

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
 	}}
 />

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>