sticky markdown copy

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 {

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;
-}
+}

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);
 

static/js/markdown.js

@@ -50,9 +50,10 @@
 
 		renderer: {
 			code: code => {
-				const header = `<div class="pre-header">${escapeHtml(code.lang)}<button class="pre-copy" title="Copy code contents"></button></div>`;
+				const header = `<div class="pre-header">${escapeHtml(code.lang)}</div>`;
+				const button = `<button class="pre-copy" title="Copy code contents"></button>`;
 
-				return `<pre class="l-${escapeHtml(code.lang)}">${header}<code>${code.text}</code></pre>`;
+				return `<pre class="l-${escapeHtml(code.lang)}">${header}${button}<code>${code.text}</code></pre>`;
 			},
 
 			link: link => `<a href="${link.href}" target="_blank">${escapeHtml(link.text || link.href)}</a>`,
@@ -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()
 		);
 	};
-})();
+})();