Allows code block in chatbot to scroll horizontally (#5122)

* wrap * scroll * add changeset * fix copy button position --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
gradio-app · Aug 15, 2023 · 3b80534 · 3b80534
1 parent e8fd4e4
commit 3b80534
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/.changeset/kind-webs-watch.md b/.changeset/kind-webs-watch.md
@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": patch
+"gradio": patch
+---
+
+fix:Allows code block in chatbot to scroll horizontally
diff --git a/js/chatbot/static/ChatBot.svelte b/js/chatbot/static/ChatBot.svelte
@@ -333,17 +333,24 @@
 	/* Code blocks */
 	.message-wrap :global(pre[class*="language-"]),
 	.message-wrap :global(pre) {
+		position: relative;
+		direction: ltr;
+		white-space: no-wrap;
+		overflow-x: auto;
+	}
+	.message-wrap :global(code) {
+		font-size: var(--text-md);
+	}
+
+	.message-wrap :global(div[class*="code_wrap"]) {
+		position: relative;
 		margin-top: var(--spacing-sm);
 		margin-bottom: var(--spacing-sm);
 		box-shadow: none;
 		border: none;
 		border-radius: var(--radius-md);
 		background-color: var(--chatbot-code-background-color);
 		padding: var(--spacing-xl) 10px;
-		direction: ltr;
-	}
-	.message-wrap :global(code) {
-		font-size: var(--text-md);
 	}
 
 	/* Tables */
@@ -383,7 +390,7 @@
 	}
 
 	/* Copy button */
-	.message-wrap :global(code > button) {
+	.message-wrap :global(div[class*="code_wrap"] > button) {
 		position: absolute;
 		top: var(--spacing-md);
 		right: var(--spacing-md);
@@ -392,8 +399,8 @@
 		border-bottom-left-radius: var(--radius-sm);
 		padding: 5px;
 		padding: var(--spacing-md);
-		width: 22px;
-		height: 22px;
+		width: 25px;
+		height: 25px;
 	}
 
 	.message-wrap :global(code > button > span) {

diff --git a/js/chatbot/utils.ts b/js/chatbot/utils.ts
@@ -83,21 +83,19 @@ const renderer: Partial<
 
 		if (!lang) {
 			return (
-				"<pre><code>" +
-				COPY_BUTTON_CODE +
+				'<div class="code_wrap">' + COPY_BUTTON_CODE + "<pre><code>" +
 				(escaped ? code : escape(code, true)) +
-				"</code></pre>\n"
+				"</code></pre></div>\n"
 			);
 		}
 
 		return (
-			'<pre><code class="' +
+			'<div class="code_wrap">' + COPY_BUTTON_CODE + '<pre><code class="' +
 			this.options.langPrefix +
 			escape(lang) +
 			'">' +
-			COPY_BUTTON_CODE +
 			(escaped ? code : escape(code, true)) +
-			"</code></pre>\n"
+			"</code></pre></div>\n"
 		);
 	}
 };