Restore Markdown formatting for Chatbots, MarkdownCode (#7936)

* changes * add changeset * changes * add changeset * changes * changes * changes * changes * add changeset * chages --------- Co-authored-by: Ali Abid <aliabid94@gmail.com> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Apr 4, 2024 · b165193 · b165193
1 parent 9666854
commit b165193
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 9 deletions.
diff --git a/.changeset/eight-views-yawn.md b/.changeset/eight-views-yawn.md
@@ -0,0 +1,7 @@
+---
+"@gradio/markdown": patch
+"@gradio/theme": patch
+"gradio": patch
+---
+
+feat:Restore Markdown formatting for Chatbots, MarkdownCode
diff --git a/js/chatbot/Chatbot.stories.svelte b/js/chatbot/Chatbot.stories.svelte
@@ -141,3 +141,76 @@
 			"**Gradio Helper**\n\nThis Chatbot can help you on *any topic related to Gradio*."
 	}}
 />
+
+<Story
+	name="Chatbot with headers and lists"
+	args={{
+		value: [
+			[
+				`# Markdown Example
+
+This document is a showcase of various Markdown capabilities.`
+			],
+			[
+				`## Table of Contents
+
+1. [Text Formatting](#text-formating)
+2. [Code Blocks](#code-blocks)
+3. [Tables](#tables)
+4. [Lists](#lists)
+5. [Links and Images](#links-and-images)
+6. [Quotes](#quotes)`
+			]
+		]
+	}}
+/>
+
+<Story
+	name="Chatbot with headers and lists"
+	args={{
+		value: [
+			[
+				`# Markdown Example
+
+This document is a showcase of various Markdown capabilities.`,
+				`## Table of Contents
+
+1. [Text Formatting](#text-formating)
+2. [Code Blocks](#code-blocks)
+3. [Tables](#tables)`
+			]
+		]
+	}}
+/>
+
+<Story
+	name="Chatbot with tables and nested lists"
+	args={{
+		value: [
+			[
+				`Creating tables in Markdown is straightforward:
+
+| Header 1 | Header 2 | Header 3 |
+|----------|----------|----------|
+| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
+| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
+| Row 3, Cell 1 | Row 3, Cell 2 | Row 3, Cell 3 |`,
+				`### Unordered List
+
+- Item 1
+- Item 2
+  - Subitem 2.1
+  - Subitem 2.2
+- Item 3
+
+### Ordered List
+
+1. First Item
+2. Second Item
+   1. Subitem 2.1
+   2. Subitem 2.2
+3. Third Item`
+			]
+		]
+	}}
+/>
diff --git a/js/markdown/shared/MarkdownCode.svelte b/js/markdown/shared/MarkdownCode.svelte
@@ -76,7 +76,7 @@
 	afterUpdate(() => render_html(message));
 </script>
 
-<span class:chatbot bind:this={el} class="md">
+<span class:chatbot bind:this={el} class="md" class:prose={render_markdown}>
 	{#if render_markdown}
 		{@html html}
 	{:else}
@@ -177,4 +177,8 @@
 		align-items: center;
 		white-space-collapse: break-spaces;
 	}
+
+	.prose :global(:last-child) {
+		margin-bottom: 0;
+	}
 </style>
diff --git a/js/theme/src/typography.css b/js/theme/src/typography.css
@@ -91,14 +91,6 @@
 	padding: 12px 15px;
 	text-align: left;
 }
-.prose th:first-child,
-.prose td:first-child {
-	padding-left: 0;
-}
-.prose th:last-child,
-.prose td:last-child {
-	padding-right: 0;
-}
 
 /* spacing
 –––––––––––––––––––––––––––––––––––––––––––––––––– */