mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-06 12:30:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Dawood Khan 2023-08-15 10:26:54 -04:00 committed by GitHub
parent e8fd4e4ec6
commit 3b8053469a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/kind-webs-watch.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/chatbot": patch
"gradio": patch
---
fix:Allows code block in chatbot to scroll horizontally

21
js/chatbot/static/ChatBot.svelte
View File

@ -333,6 +333,17 @@
/* 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;
@ -340,10 +351,6 @@
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) {

10
js/chatbot/utils.ts
View File

@ -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"
);
}
};