diff --git a/static/css/chat.css b/static/css/chat.css index 9cda869..0b8cc91 100644 --- a/static/css/chat.css +++ b/static/css/chat.css @@ -225,7 +225,6 @@ body:not(.loading) #loading { display: block; height: 14px; flex-shrink: 0; - margin-bottom: -40px; } #messages:empty::before { @@ -233,7 +232,7 @@ body:not(.loading) #loading { color: var(--c-subtext); font-style: italic; align-self: center; - margin-top: 20px; + margin-top: 5px; } #message, @@ -446,7 +445,7 @@ body:not(.loading) #loading { .message .body { position: relative; border-radius: 6px; - overflow: hidden; + overflow: visible; padding: 14px 12px; display: flex; flex-direction: column; @@ -456,6 +455,7 @@ body:not(.loading) #loading { .message.collapsed .body { height: 32px; + overflow: hidden; } .message.collapsed .body>* { @@ -1182,6 +1182,7 @@ label[for="reasoning-tokens"] { height: 20px; background-image: url(icons/up.svg); transition: 150ms; + z-index: 15; } #bottom { diff --git a/static/css/markdown.css b/static/css/markdown.css index 4b441e2..ca086c4 100644 --- a/static/css/markdown.css +++ b/static/css/markdown.css @@ -2,7 +2,7 @@ font-size: 15px; line-height: 23px; color: var(--c-text); - overflow: hidden; + overflow: visible; word-wrap: break-word; } @@ -153,37 +153,38 @@ .markdown pre { background: var(--c-mantle); white-space: pre-wrap; - padding: 10px 12px; + padding: 0; border-radius: 6px; line-height: 18px; - overflow: hidden; tab-size: 4; + position: relative; } .markdown pre code { + display: block; background: transparent; - padding: 0; + padding: 10px 12px; margin: 0; } .markdown .pre-header { - position: relative; background: var(--c-surface0); padding: 8px 12px; - margin: -10px -12px; - margin-bottom: 10px; + margin: 0; font-size: 12px; line-height: 14px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; } .markdown .pre-copy { - position: absolute; - top: 6px; - right: 10px; - width: 18px; - height: 18px; - opacity: 0; - transition: 150ms; + position: sticky; + top: 34px; + float: right; + margin-top: -30px; + width: 30px; + height: 30px; + background-size: 20px; } .markdown pre:hover .pre-copy { @@ -200,22 +201,22 @@ padding-left: 28px; } -.markdown > :first-child { +.markdown> :first-child { margin-top: 0; } -.markdown blockquote > *, -.markdown td > *, -.markdown th > *, -.markdown > * { +.markdown blockquote>*, +.markdown td>*, +.markdown th>*, +.markdown>* { margin: 0; margin-bottom: 14px; } -.markdown blockquote > *:last-child, -.markdown td > *:last-child, -.markdown th > *:last-child, -.markdown > *:last-child { +.markdown blockquote>*:last-child, +.markdown td>*:last-child, +.markdown th>*:last-child, +.markdown>*:last-child { margin-bottom: 0; } @@ -274,4 +275,4 @@ opacity: 0.5; bottom: -1px; left: 0; -} +} \ No newline at end of file diff --git a/static/js/chat.js b/static/js/chat.js index 8c75039..9b5a449 100644 --- a/static/js/chat.js +++ b/static/js/chat.js @@ -258,6 +258,17 @@ this.#_message.appendChild(_header); + _header.addEventListener("auxclick", event => { + if (event.button !== 1) { + return; + } + + this.#_message.scrollIntoView({ + behavior: "smooth", + block: "start", + }); + }); + // message role (wrapper) const _wrapper = make("div", "role", this.#role); diff --git a/static/js/markdown.js b/static/js/markdown.js index 110e819..56000ca 100644 --- a/static/js/markdown.js +++ b/static/js/markdown.js @@ -50,9 +50,10 @@ renderer: { code: code => { - const header = `
${header}${code.text}`;
+ return `${header}${button}${code.text}`;
},
link: link => `${escapeHtml(link.text || link.href)}`,
@@ -140,9 +141,13 @@
}
addEventListener("click", event => {
- const button = event.target,
- header = button.closest(".pre-header"),
- pre = header?.closest("pre"),
+ const button = event.target;
+
+ if (!button.classList.contains("pre-copy")) {
+ return;
+ }
+
+ const pre = button.closest("pre"),
code = pre?.querySelector("code");
if (!code) {
@@ -256,4 +261,4 @@
.trim()
);
};
-})();
+})();
\ No newline at end of file