{language.t("settings.general.section.notifications")}
@@ -490,6 +560,8 @@ export const SettingsGeneral: Component = () => {Hello world
") + expect(html).toContain(``)
+ expect(html).toContain("
')
+ expect(html).toContain(" {
+ expect(serializeMarkdownClipboardHTML(" ")).toBe("")
+ })
+})
+
+describe("markdown clipboard payload", () => {
+ test("writes both plain text and html mime types", async () => {
+ const originalNavigator = globalThis.navigator
+ const originalClipboardItem = globalThis.ClipboardItem
+
+ const writes: unknown[][] = []
+ class FakeClipboardItem {
+ constructor(public data: Record) {}
+ }
+
+ Object.defineProperty(globalThis, "navigator", {
+ value: {
+ clipboard: {
+ write: async (items: unknown[]) => {
+ writes.push(items)
+ },
+ writeText: async () => {},
+ },
+ },
+ configurable: true,
+ })
+ Object.defineProperty(globalThis, "ClipboardItem", { value: FakeClipboardItem, configurable: true })
+
+ await writeClipboardPayload({ text: "hello", html: ") {}
+ }
+
+ Object.defineProperty(globalThis, "navigator", {
+ value: {
+ clipboard: {
+ write: async (items: unknown[]) => {
+ writes.push(items)
+ },
+ writeText: async () => {},
+ },
+ },
+ configurable: true,
+ })
+ Object.defineProperty(globalThis, "ClipboardItem", { value: FakeClipboardItem, configurable: true })
+
+ await writeMarkdownClipboard({ text: "hello", html: "
Hello world
") + expect(html).not.toContain("var(--font-family-sans)") + }) + + test("inlines link and code styles", () => { + if (typeof DOMParser === "undefined") return + const html = serializeMarkdownClipboardHTML( + 'echo testHello
')
+ expect(html).toContain("Hello
") + expect(html).not.toContain("hello
" }) + + expect(writes.length).toBe(1) + const item = writes[0]?.[0] as FakeClipboardItem + expect(item.data["text/plain"]).toBeInstanceOf(Blob) + expect(item.data["text/html"]).toBeInstanceOf(Blob) + expect(await item.data["text/plain"]?.text()).toBe("hello") + expect(await item.data["text/html"]?.text()).toBe("hello
") + + Object.defineProperty(globalThis, "navigator", { value: originalNavigator, configurable: true }) + Object.defineProperty(globalThis, "ClipboardItem", { value: originalClipboardItem, configurable: true }) + }) + + test("falls back to writeText when html is missing", async () => { + const originalNavigator = globalThis.navigator + const originalClipboardItem = globalThis.ClipboardItem + + const textWrites: string[] = [] + Object.defineProperty(globalThis, "navigator", { + value: { + clipboard: { + write: async () => {}, + writeText: async (value: string) => { + textWrites.push(value) + }, + }, + }, + configurable: true, + }) + Object.defineProperty(globalThis, "ClipboardItem", { value: undefined, configurable: true }) + + await writeClipboardPayload({ text: "plain" }) + + expect(textWrites).toEqual(["plain"]) + + Object.defineProperty(globalThis, "navigator", { value: originalNavigator, configurable: true }) + Object.defineProperty(globalThis, "ClipboardItem", { value: originalClipboardItem, configurable: true }) + }) + + test("serializes markdown html before writing clipboard payload", async () => { + const originalNavigator = globalThis.navigator + const originalClipboardItem = globalThis.ClipboardItem + + const writes: unknown[][] = [] + class FakeClipboardItem { + constructor(public data: Recordecho test`)
+ expect(await item.data["text/html"]?.text()).toContain("]*>[\s\S]*?<\/style>/gi, "")
+ .replace(/]*>[\s\S]*?<\/script>/gi, "")
+ .replace(/<(?:img|video|audio|iframe)\b[^>]*>/gi, "")
+ .replace(/<\/(?:video|audio|iframe)>/gi, "")
+ .trim()
+ }
+ const doc = new DOMParser().parseFromString(` | undefined
let copyCleanup: (() => void) | undefined
+ let selectionCleanup: (() => void) | undefined
createEffect(() => {
const container = root()
@@ -280,6 +320,10 @@ export function Markdown(
if (!container) return
if (isServer) return
+ if (!selectionCleanup) {
+ selectionCleanup = setupSelectionCopy(container)
+ }
+
if (!content) {
container.innerHTML = ""
return
@@ -313,6 +357,7 @@ export function Markdown(
onCleanup(() => {
if (copySetupTimer) clearTimeout(copySetupTimer)
if (copyCleanup) copyCleanup()
+ if (selectionCleanup) selectionCleanup()
})
return (
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index e8c9dcf9505b..820d21c06503 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -49,11 +49,14 @@ import { getDirectory as _getDirectory, getFilename } from "@opencode-ai/util/pa
import { checksum } from "@opencode-ai/util/encode"
import { Tooltip } from "./tooltip"
import { IconButton } from "./icon-button"
+import { DropdownMenu } from "./dropdown-menu"
import { TextShimmer } from "./text-shimmer"
import { AnimatedCountList } from "./tool-count-summary"
import { ToolStatusTitle } from "./tool-status-title"
import { animate } from "motion"
import { useLocation } from "@solidjs/router"
+import type { MarkdownCopyMode } from "./markdown-copy"
+import { TextPartCopyControl } from "./text-part-copy-control"
import { attached, inline, kind } from "./message-file"
function ShellSubmessage(props: { text: string; animate?: boolean }) {
@@ -133,6 +136,7 @@ export interface MessageProps {
parts: PartType[]
actions?: UserActions
showAssistantCopyPartID?: string | null
+ assistantCopyMode?: MarkdownCopyMode
showReasoningSummaries?: boolean
}
@@ -149,6 +153,7 @@ export interface MessagePartProps {
hideDetails?: boolean
defaultOpen?: boolean
showAssistantCopyPartID?: string | null
+ assistantCopyMode?: MarkdownCopyMode
turnDurationMs?: number
}
@@ -484,6 +489,7 @@ function partDefaultOpen(part: PartType, shell = false, edit = false) {
export function AssistantParts(props: {
messages: AssistantMessage[]
showAssistantCopyPartID?: string | null
+ assistantCopyMode?: MarkdownCopyMode
turnDurationMs?: number
working?: boolean
showReasoningSummaries?: boolean
@@ -562,16 +568,15 @@ export function AssistantParts(props: {
})
return (
-
-
-
+
+
)
})()}
@@ -701,6 +706,7 @@ export function Message(props: MessageProps) {
message={assistantMessage() as AssistantMessage}
parts={props.parts}
showAssistantCopyPartID={props.showAssistantCopyPartID}
+ assistantCopyMode={props.assistantCopyMode}
showReasoningSummaries={props.showReasoningSummaries}
/>
)}
@@ -713,6 +719,7 @@ export function AssistantMessageDisplay(props: {
message: AssistantMessage
parts: PartType[]
showAssistantCopyPartID?: string | null
+ assistantCopyMode?: MarkdownCopyMode
showReasoningSummaries?: boolean
}) {
const emptyTools: ToolPart[] = []
@@ -773,6 +780,7 @@ export function AssistantMessageDisplay(props: {
part={item()!}
message={props.message}
showAssistantCopyPartID={props.showAssistantCopyPartID}
+ assistantCopyMode={props.assistantCopyMode}
/>
)
@@ -1128,6 +1136,7 @@ export function Part(props: MessagePartProps) {
hideDetails={props.hideDetails}
defaultOpen={props.defaultOpen}
showAssistantCopyPartID={props.showAssistantCopyPartID}
+ assistantCopyMode={props.assistantCopyMode}
turnDurationMs={props.turnDurationMs}
/>
@@ -1369,44 +1378,23 @@ PART_MAPPING["text"] = function TextPartDisplay(props) {
if (typeof props.showAssistantCopyPartID === "string") return props.showAssistantCopyPartID === part().id
return isLastTextPart()
})
- const [copied, setCopied] = createSignal(false)
-
- const handleCopy = async () => {
- const content = displayText()
- if (!content) return
- await navigator.clipboard.writeText(content)
- setCopied(true)
- setTimeout(() => setCopied(false), 2000)
- }
+ const copyMode = createMemo(() => props.assistantCopyMode ?? "plain")
+ let root: HTMLDivElement | undefined
return (
-
echo test${html}
`, "text/html")
+ const root = doc.body.firstElementChild
+ if (!root) return html
+ for (const el of root.querySelectorAll(banned)) {
+ el.remove()
+ }
+ return root.innerHTML.trim()
+}
+
+function sanitize(value: string) {
+ if (!DOMPurify.isSupported) return strip(value)
+ return DOMPurify.sanitize(value, config).trim()
+}
+
+function addStyle(el: Element, value: string) {
+ const style = el.getAttribute("style")
+ if (!style) {
+ el.setAttribute("style", value)
+ return
+ }
+ el.setAttribute("style", `${style} ${value}`)
+}
+
+function secureLink(el: Element) {
+ if (!(el instanceof HTMLAnchorElement)) return
+ if (el.target !== "_blank") return
+ const rel = el.getAttribute("rel") ?? ""
+ const set = new Set(rel.split(/\s+/).filter(Boolean))
+ set.add("noopener")
+ set.add("noreferrer")
+ el.setAttribute("rel", Array.from(set).join(" "))
+}
+
+function inlineClipboardStyles(value: string) {
+ const html = strip(sanitize(value))
+ if (!html || typeof DOMParser === "undefined") return html
+ const doc = new DOMParser().parseFromString(`${html}
`, "text/html")
+ const root = doc.body.firstElementChild
+ if (!root) return html
+ for (const link of root.querySelectorAll("a")) {
+ secureLink(link)
+ addStyle(link, "color: #0b66d2; text-decoration: underline; text-underline-offset: 2px;")
+ }
+ for (const block of root.querySelectorAll("pre")) {
+ addStyle(
+ block,
+ `font-family: ${markdownClipboardMonoFont}; font-size: 13px; line-height: 1.45; background: #f6f8fa; border-radius: 6px; padding: 8px 12px;`,
+ )
+ }
+ for (const code of root.querySelectorAll("code")) {
+ addStyle(code, `font-family: ${markdownClipboardMonoFont}; font-size: 13px;`)
+ }
+ return root.innerHTML
+}
+
+export function serializeMarkdownClipboardHTML(value: string) {
+ const html = inlineClipboardStyles(value)
+ if (!html) return ""
+ return `${html}
`
+}
+
+export async function writeClipboardPayload(input: { text: string; html?: string }) {
+ const clipboard = navigator.clipboard
+ if (!clipboard) return
+ if (!input.html || typeof ClipboardItem === "undefined" || typeof clipboard.write !== "function") {
+ await clipboard.writeText(input.text)
+ return
+ }
+ await clipboard.write([
+ new ClipboardItem({
+ "text/plain": new Blob([input.text], { type: "text/plain" }),
+ "text/html": new Blob([input.html], { type: "text/html" }),
+ }),
+ ])
+}
+
+export async function writeMarkdownClipboard(input: { text: string; html?: string }) {
+ if (!input.text) return
+ const html = serializeMarkdownClipboardHTML(input.html ?? "")
+ await writeClipboardPayload({ text: input.text, html: html || undefined })
+}
diff --git a/packages/ui/src/components/markdown.tsx b/packages/ui/src/components/markdown.tsx
index 01254f118951..575bc2fa5891 100644
--- a/packages/ui/src/components/markdown.tsx
+++ b/packages/ui/src/components/markdown.tsx
@@ -3,6 +3,7 @@ import { useI18n } from "../context/i18n"
import DOMPurify from "dompurify"
import morphdom from "morphdom"
import { checksum } from "@opencode-ai/util/encode"
+import { serializeMarkdownClipboardHTML } from "./markdown-copy"
import { ComponentProps, createEffect, createResource, createSignal, onCleanup, splitProps } from "solid-js"
import { isServer } from "solid-js/web"
@@ -224,6 +225,44 @@ function setupCodeCopy(root: HTMLDivElement, labels: CopyLabels) {
}
}
+function setupSelectionCopy(root: HTMLDivElement) {
+ const handleCopy = (event: ClipboardEvent) => {
+ const clip = event.clipboardData
+ if (!clip) return
+
+ const selection = window.getSelection()
+ if (!selection) return
+ if (selection.rangeCount === 0 || selection.isCollapsed) return
+ const anchor = selection.anchorNode
+ const focus = selection.focusNode
+ if (!anchor || !focus) return
+ if (!root.contains(anchor) || !root.contains(focus)) return
+
+ const text = selection.toString()
+ if (!text) return
+
+ const range = selection.getRangeAt(0)
+ const wrap = document.createElement("div")
+ wrap.appendChild(range.cloneContents())
+ for (const item of wrap.querySelectorAll('[data-slot="markdown-copy-button"]')) {
+ item.remove()
+ }
+
+ const html = serializeMarkdownClipboardHTML(wrap.innerHTML)
+ if (!html) return
+
+ clip.setData("text/plain", text)
+ clip.setData("text/html", html)
+ event.preventDefault()
+ }
+
+ root.addEventListener("copy", handleCopy)
+
+ return () => {
+ root.removeEventListener("copy", handleCopy)
+ }
+}
+
function touch(key: string, value: Entry) {
cache.delete(key)
cache.set(key, value)
@@ -273,6 +312,7 @@ export function Markdown(
let copySetupTimer: ReturnType
+
-
diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx
index 8c9c1ffe4030..428e6f483a54 100644
--- a/packages/ui/src/components/session-turn.tsx
+++ b/packages/ui/src/components/session-turn.tsx
@@ -20,6 +20,7 @@ import { SessionRetry } from "./session-retry"
import { TextReveal } from "./text-reveal"
import { createAutoScroll } from "../hooks"
import { useI18n } from "../context/i18n"
+import { MarkdownCopyMode } from "./markdown-copy"
function record(value: unknown): value is Record {
return !!value && typeof value === "object" && !Array.isArray(value)
@@ -144,9 +145,11 @@ export function SessionTurn(
messageID: string
actions?: UserActions
showReasoningSummaries?: boolean
+ assistantCopyMode?: MarkdownCopyMode
shellToolDefaultOpen?: boolean
editToolDefaultOpen?: boolean
active?: boolean
+ queued?: boolean
status?: SessionStatus
onUserInteracted?: () => void
classes?: {
@@ -193,7 +196,7 @@ export function SessionTurn(
})
const pending = createMemo(() => {
- if (typeof props.active === "boolean") return
+ if (typeof props.active === "boolean" && typeof props.queued === "boolean") return
const messages = allMessages() ?? emptyMessages
return messages.findLast(
(item): item is AssistantMessage => item.role === "assistant" && typeof item.time.completed !== "number",
@@ -218,6 +221,16 @@ export function SessionTurn(
return parent.id === msg.id
})
+ const queued = createMemo(() => {
+ if (typeof props.queued === "boolean") return props.queued
+ const id = message()?.id
+ if (!id) return false
+ if (!pendingUser()) return false
+ const item = pending()
+ if (!item) return false
+ return id > item.id
+ })
+
const parts = createMemo(() => {
const msg = message()
if (!msg) return emptyParts
@@ -366,6 +379,7 @@ export function SessionTurn(
)
const showThinking = createMemo(() => {
if (!working() || !!error()) return false
+ if (queued()) return false
if (status().type === "retry") return false
if (showReasoningSummaries()) return assistantVisible() === 0
return true
@@ -406,6 +420,7 @@ export function SessionTurn(
- {`\u202A${getDirectory(diff.file)}\u202C`}
+ {`${getDirectory(diff.file)}`}
{getFilename(diff.file)}
diff --git a/packages/ui/src/components/text-part-copy-control.tsx b/packages/ui/src/components/text-part-copy-control.tsx
new file mode 100644
index 000000000000..37b12931d674
--- /dev/null
+++ b/packages/ui/src/components/text-part-copy-control.tsx
@@ -0,0 +1,81 @@
+import { Show, createSignal } from "solid-js"
+import { useI18n } from "../context/i18n"
+import type { MarkdownCopyMode } from "./markdown-copy"
+import { copyMarkdownElement } from "../lib/clipboard/markdown"
+import { DropdownMenu } from "./dropdown-menu"
+import { IconButton } from "./icon-button"
+import { Tooltip } from "./tooltip"
+
+export function TextPartCopyControl(props: {
+ root: HTMLDivElement | undefined
+ displayText: () => string
+ interrupted: boolean
+ copyMode: MarkdownCopyMode
+ meta: string
+}) {
+ const i18n = useI18n()
+ const [copied, setCopied] = createSignal(false)
+
+ const copyLabel = () =>
+ props.copyMode === "rich" ? i18n.t("ui.message.copyResponseRich") : i18n.t("ui.message.copyResponse")
+
+ const copy = async (mode: "plain" | "rich") => {
+ const text = props.displayText()
+ if (!text) return
+
+ if (mode === "rich") {
+ await copyMarkdownElement(props.root?.querySelector('[data-slot="text-part-body"]') ?? props.root, text)
+ }
+ if (mode === "plain") await navigator.clipboard.writeText(text)
+ setCopied(true)
+ setTimeout(() => setCopied(false), 2000)
+ }
+
+ return (
+ = {
"ui.message.forkMessage": "Fork to new session",
"ui.message.revertMessage": "Revert message",
"ui.message.copyResponse": "Copy response",
+ "ui.message.copyResponsePlain": "Copy plain text",
+ "ui.message.copyResponseRich": "Copy rich text",
+ "ui.message.copyOptions": "Copy options",
"ui.message.copied": "Copied",
"ui.message.duration.seconds": "{{count}}s",
"ui.message.duration.minutesSeconds": "{{minutes}}m {{seconds}}s",
diff --git a/packages/ui/src/lib/clipboard/markdown.test.ts b/packages/ui/src/lib/clipboard/markdown.test.ts
new file mode 100644
index 000000000000..b81bb885338f
--- /dev/null
+++ b/packages/ui/src/lib/clipboard/markdown.test.ts
@@ -0,0 +1,15 @@
+import { describe, expect, test } from "bun:test"
+import { cleanMarkdownHTML } from "./markdown"
+
+describe("markdown rich copy", () => {
+ test("removes markdown copy buttons from html", () => {
+ const html = cleanMarkdownHTML(
+ ']*data-slot=["']markdown-copy-button["'][^>]*>[\s\S]*?<\/button>/g, "")
+ }
+
+ const doc = new DOMParser().parseFromString(`
-
- e.preventDefault()}
- onClick={handleCopy}
- aria-label={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copyResponse")}
- />
-
-
-
- {meta()}
-
-
-
+
+
+
+ e.preventDefault()}
+ onClick={() => void copy(props.copyMode === "rich" ? "rich" : "plain")}
+ aria-label={copied() ? i18n.t("ui.message.copied") : copyLabel()}
+ />
+
+
+
+
+
+
+ e.preventDefault()}
+ aria-label={i18n.t("ui.message.copyOptions")}
+ />
+
+
+
+ void copy("plain")}>
+ {i18n.t("ui.message.copyResponsePlain")}
+
+ void copy("rich")}>
+ {i18n.t("ui.message.copyResponseRich")}
+
+
+
+
+
+
+
+
+ {props.meta}
+
+
+
+ )
+}
diff --git a/packages/ui/src/i18n/en.ts b/packages/ui/src/i18n/en.ts
index 18823aeaa19b..a45a1f973f6c 100644
--- a/packages/ui/src/i18n/en.ts
+++ b/packages/ui/src/i18n/en.ts
@@ -141,6 +141,9 @@ export const dict: RecordHello
echo testHello
") + expect(html).toContain("echo test${value}
`, "text/html")
+ const root = doc.body.firstElementChild
+ if (!root) return value
+ for (const item of root.querySelectorAll('[data-slot="markdown-copy-button"]')) {
+ item.remove()
+ }
+ return root.innerHTML
+}
+
+export async function copyMarkdownElement(root: Root | undefined, text: string) {
+ if (!text) return
+ const markdown = root?.querySelector('[data-component="markdown"]')
+ if (!(markdown instanceof HTMLDivElement)) {
+ await navigator.clipboard.writeText(text)
+ return
+ }
+
+ const wrap = document.createElement("div")
+ wrap.innerHTML = markdown.innerHTML
+ await writeMarkdownClipboard({ text, html: cleanMarkdownHTML(wrap.innerHTML) })
+}