diff --git a/apps/web/package.json b/apps/web/package.json index 5127faf827..1bf5ff1afa 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -38,7 +38,9 @@ "react-dom": "^19.0.0", "react-markdown": "^10.1.0", "remark-gfm": "^4.0.1", + "remark-parse": "^11.0.0", "tailwind-merge": "^3.4.0", + "unified": "^11.0.5", "zustand": "^5.0.11" }, "devDependencies": { diff --git a/apps/web/src/components/ChatView.browser.tsx b/apps/web/src/components/ChatView.browser.tsx index 06cbf0efbd..6249cf5091 100644 --- a/apps/web/src/components/ChatView.browser.tsx +++ b/apps/web/src/components/ChatView.browser.tsx @@ -39,6 +39,7 @@ const PROJECT_ID = "project-1" as ProjectId; const NOW_ISO = "2026-03-04T12:00:00.000Z"; const BASE_TIME_MS = Date.parse(NOW_ISO); const ATTACHMENT_SVG = ""; +const CLIENT_SETTINGS_STORAGE_KEY = "t3code:client-settings:v1"; interface WsRequestEnvelope { id: string; @@ -86,7 +87,7 @@ const ATTACHMENT_VIEWPORT_MATRIX = [ { name: "narrow", width: 320, height: 700, textTolerancePx: 84, attachmentTolerancePx: 56 }, ] as const satisfies readonly ViewportSpec[]; -interface UserRowMeasurement { +interface MessageRowMeasurement { measuredRowHeightPx: number; timelineWidthMeasuredPx: number; renderedInVirtualizedRegion: boolean; @@ -95,7 +96,10 @@ interface UserRowMeasurement { interface MountedChatView { [Symbol.asyncDispose]: () => Promise; cleanup: () => Promise; - measureUserRow: (targetMessageId: MessageId) => Promise; + measureMessageRow: ( + targetMessageId: MessageId, + role: "user" | "assistant", + ) => Promise; setViewport: (viewport: ViewportSpec) => Promise; router: ReturnType; } @@ -279,6 +283,29 @@ function createSnapshotForTargetUser(options: { }; } +function createSnapshotForTargetAssistantMessage(options: { + targetAssistantId: MessageId; + targetText: string; +}): OrchestrationReadModel { + const snapshot = createSnapshotForTargetUser({ + targetMessageId: "msg-user-assistant-copy-target" as MessageId, + targetText: "assistant copy target", + }); + + return { + ...snapshot, + threads: snapshot.threads.map((thread) => + Object.assign({}, thread, { + messages: thread.messages.map((message) => + message.id === options.targetAssistantId + ? Object.assign({}, message, { text: options.targetText }) + : message, + ), + }), + ), + }; +} + function buildFixture(snapshot: OrchestrationReadModel): TestFixture { return { snapshot, @@ -621,6 +648,25 @@ async function waitForSendButton(): Promise { ); } +function installClipboardWriteTextSpy() { + const writeText = vi.fn<(value: string) => Promise>().mockResolvedValue(undefined); + Object.defineProperty(navigator, "clipboard", { + configurable: true, + value: { writeText }, + }); + return writeText; +} + +function setAssistantResponseCopyFormat(format: "markdown" | "plain-text"): void { + localStorage.setItem( + CLIENT_SETTINGS_STORAGE_KEY, + JSON.stringify({ + ...DEFAULT_CLIENT_SETTINGS, + assistantResponseCopyFormat: format, + }), + ); +} + async function waitForInteractionModeButton( expectedLabel: "Chat" | "Plan", ): Promise { @@ -706,12 +752,13 @@ async function waitForImagesToLoad(scope: ParentNode): Promise { await waitForLayout(); } -async function measureUserRow(options: { +async function measureMessageRow(options: { host: HTMLElement; targetMessageId: MessageId; -}): Promise { - const { host, targetMessageId } = options; - const rowSelector = `[data-message-id="${targetMessageId}"][data-message-role="user"]`; + role: "user" | "assistant"; +}): Promise { + const { host, targetMessageId, role } = options; + const rowSelector = `[data-message-id="${targetMessageId}"][data-message-role="${role}"]`; const scrollContainer = await waitForElement( () => host.querySelector("div.overflow-y-auto.overscroll-y-contain"), @@ -725,7 +772,7 @@ async function measureUserRow(options: { scrollContainer.dispatchEvent(new Event("scroll")); await waitForLayout(); row = host.querySelector(rowSelector); - expect(row, "Unable to locate targeted user message row.").toBeTruthy(); + expect(row, `Unable to locate targeted ${role} message row.`).toBeTruthy(); }, { timeout: 8_000, @@ -754,12 +801,14 @@ async function measureUserRow(options: { scrollContainer.dispatchEvent(new Event("scroll")); await nextFrame(); const measuredRow = host.querySelector(rowSelector); - expect(measuredRow, "Unable to measure targeted user row height.").toBeTruthy(); + expect(measuredRow, `Unable to measure targeted ${role} row height.`).toBeTruthy(); timelineWidthMeasuredPx = timelineRoot.getBoundingClientRect().width; measuredRowHeightPx = measuredRow!.getBoundingClientRect().height; renderedInVirtualizedRegion = measuredRow!.closest("[data-index]") instanceof HTMLElement; expect(timelineWidthMeasuredPx, "Unable to measure timeline width.").toBeGreaterThan(0); - expect(measuredRowHeightPx, "Unable to measure targeted user row height.").toBeGreaterThan(0); + expect(measuredRowHeightPx, `Unable to measure targeted ${role} row height.`).toBeGreaterThan( + 0, + ); }, { timeout: 4_000, @@ -812,7 +861,8 @@ async function mountChatView(options: { return { [Symbol.asyncDispose]: cleanup, cleanup, - measureUserRow: async (targetMessageId: MessageId) => measureUserRow({ host, targetMessageId }), + measureMessageRow: async (targetMessageId: MessageId, role: "user" | "assistant") => + measureMessageRow({ host, targetMessageId, role }), setViewport: async (viewport: ViewportSpec) => { await setViewport(viewport); await waitForProductionStyles(); @@ -825,14 +875,14 @@ async function measureUserRowAtViewport(options: { snapshot: OrchestrationReadModel; targetMessageId: MessageId; viewport: ViewportSpec; -}): Promise { +}): Promise { const mounted = await mountChatView({ viewport: options.viewport, snapshot: options.snapshot, }); try { - return await mounted.measureUserRow(options.targetMessageId); + return await mounted.measureMessageRow(options.targetMessageId, "user"); } finally { await mounted.cleanup(); } @@ -899,7 +949,7 @@ describe("ChatView timeline estimator parity (full app)", () => { try { const { measuredRowHeightPx, timelineWidthMeasuredPx, renderedInVirtualizedRegion } = - await mounted.measureUserRow(targetMessageId); + await mounted.measureMessageRow(targetMessageId, "user"); expect(renderedInVirtualizedRegion).toBe(true); @@ -930,12 +980,12 @@ describe("ChatView timeline estimator parity (full app)", () => { try { const measurements: Array< - UserRowMeasurement & { viewport: ViewportSpec; estimatedHeightPx: number } + MessageRowMeasurement & { viewport: ViewportSpec; estimatedHeightPx: number } > = []; for (const viewport of TEXT_VIEWPORT_MATRIX) { await mounted.setViewport(viewport); - const measurement = await mounted.measureUserRow(targetMessageId); + const measurement = await mounted.measureMessageRow(targetMessageId, "user"); const estimatedHeightPx = estimateTimelineMessageHeight( { role: "user", text: userText, attachments: [] }, { timelineWidthPx: measurement.timelineWidthMeasuredPx }, @@ -1019,7 +1069,7 @@ describe("ChatView timeline estimator parity (full app)", () => { try { const { measuredRowHeightPx, timelineWidthMeasuredPx, renderedInVirtualizedRegion } = - await mounted.measureUserRow(targetMessageId); + await mounted.measureMessageRow(targetMessageId, "user"); expect(renderedInVirtualizedRegion).toBe(true); @@ -1230,6 +1280,149 @@ describe("ChatView timeline estimator parity (full app)", () => { } }); + it("copies the raw assistant markdown by default", async () => { + const assistantMessageId = "msg-assistant-21" as MessageId; + const assistantText = [ + "# Copy me", + "", + "Paragraph with [docs](https://example.com/docs).", + "", + "```ts", + "const value = 1;", + "```", + ].join("\n"); + const writeText = installClipboardWriteTextSpy(); + const mounted = await mountChatView({ + viewport: DEFAULT_VIEWPORT, + snapshot: createSnapshotForTargetAssistantMessage({ + targetAssistantId: assistantMessageId, + targetText: assistantText, + }), + }); + + try { + const assistantRow = await waitForElement( + () => + document.querySelector( + `[data-message-id="${assistantMessageId}"][data-message-role="assistant"]`, + ), + "Unable to find assistant response row.", + ); + const copyButton = await waitForElement( + () => assistantRow.querySelector('button[aria-label="Copy response"]'), + "Unable to find assistant copy button.", + ); + + copyButton.click(); + + await vi.waitFor( + () => { + expect(writeText).toHaveBeenCalledWith(assistantText); + }, + { timeout: 8_000, interval: 16 }, + ); + } finally { + await mounted.cleanup(); + } + }); + + it("copies assistant responses as plain text when the setting is enabled", async () => { + const assistantMessageId = "msg-assistant-21" as MessageId; + const assistantText = [ + "# Copy me", + "", + "Paragraph with [docs](https://example.com/docs).", + "", + "```ts", + "const value = 1;", + "```", + ].join("\n"); + const writeText = installClipboardWriteTextSpy(); + setAssistantResponseCopyFormat("plain-text"); + const mounted = await mountChatView({ + viewport: DEFAULT_VIEWPORT, + snapshot: createSnapshotForTargetAssistantMessage({ + targetAssistantId: assistantMessageId, + targetText: assistantText, + }), + }); + + try { + const assistantRow = await waitForElement( + () => + document.querySelector( + `[data-message-id="${assistantMessageId}"][data-message-role="assistant"]`, + ), + "Unable to find assistant response row.", + ); + const copyButton = await waitForElement( + () => assistantRow.querySelector('button[aria-label="Copy response"]'), + "Unable to find assistant copy button.", + ); + + copyButton.click(); + + await vi.waitFor( + () => { + expect(writeText).toHaveBeenCalledWith( + ["Copy me", "", "Paragraph with docs.", "", "const value = 1;"].join("\n"), + ); + }, + { timeout: 8_000, interval: 16 }, + ); + } finally { + await mounted.cleanup(); + } + }); + + it("keeps markdown code-block copy scoped to the code block", async () => { + const assistantMessageId = "msg-assistant-21" as MessageId; + const assistantText = [ + "# Copy me", + "", + "Paragraph with [docs](https://example.com/docs).", + "", + "```ts", + "const value = 1;", + "```", + ].join("\n"); + const writeText = installClipboardWriteTextSpy(); + setAssistantResponseCopyFormat("plain-text"); + const mounted = await mountChatView({ + viewport: DEFAULT_VIEWPORT, + snapshot: createSnapshotForTargetAssistantMessage({ + targetAssistantId: assistantMessageId, + targetText: assistantText, + }), + }); + + try { + const assistantRow = await waitForElement( + () => + document.querySelector( + `[data-message-id="${assistantMessageId}"][data-message-role="assistant"]`, + ), + "Unable to find assistant response row.", + ); + const codeCopyButton = await waitForElement( + () => assistantRow.querySelector('button[aria-label="Copy code"]'), + "Unable to find code-block copy button.", + ); + + codeCopyButton.click(); + + await vi.waitFor( + () => { + expect(writeText).toHaveBeenCalled(); + expect(writeText.mock.calls.at(-1)?.[0].trim()).toBe("const value = 1;"); + }, + { timeout: 8_000, interval: 16 }, + ); + } finally { + await mounted.cleanup(); + } + }); + it("runs project scripts from local draft threads at the project cwd", async () => { useComposerDraftStore.setState({ draftThreadsByThreadId: { diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx index fbd332354a..dc3807002f 100644 --- a/apps/web/src/components/ChatView.tsx +++ b/apps/web/src/components/ChatView.tsx @@ -257,6 +257,7 @@ export default function ChatView({ threadId }: ChatViewProps) { (store) => store.setStickyModelSelection, ); const timestampFormat = settings.timestampFormat; + const assistantResponseCopyFormat = settings.assistantResponseCopyFormat; const navigate = useNavigate(); const rawSearch = useSearch({ strict: false, @@ -3655,6 +3656,7 @@ export default function ChatView({ threadId }: ChatViewProps) { onImageExpand={onExpandTimelineImage} markdownCwd={gitCwd ?? undefined} resolvedTheme={resolvedTheme} + assistantResponseCopyFormat={assistantResponseCopyFormat} timestampFormat={timestampFormat} workspaceRoot={activeProject?.cwd ?? undefined} /> diff --git a/apps/web/src/components/chat/MessageCopyButton.tsx b/apps/web/src/components/chat/MessageCopyButton.tsx index cf1e798912..42b9a4b087 100644 --- a/apps/web/src/components/chat/MessageCopyButton.tsx +++ b/apps/web/src/components/chat/MessageCopyButton.tsx @@ -3,7 +3,13 @@ import { CopyIcon, CheckIcon } from "lucide-react"; import { Button } from "../ui/button"; import { useCopyToClipboard } from "~/hooks/useCopyToClipboard"; -export const MessageCopyButton = memo(function MessageCopyButton({ text }: { text: string }) { +export const MessageCopyButton = memo(function MessageCopyButton({ + text, + label = "Copy message", +}: { + text: string | (() => string); + label?: string; +}) { const { copyToClipboard, isCopied } = useCopyToClipboard(); return ( @@ -11,8 +17,9 @@ export const MessageCopyButton = memo(function MessageCopyButton({ text }: { tex type="button" size="xs" variant="outline" - onClick={() => copyToClipboard(text)} - title="Copy message" + onClick={() => copyToClipboard(typeof text === "function" ? text() : text)} + title={isCopied ? label.replace(/^Copy\s+/i, "Copied ") : label} + aria-label={isCopied ? label.replace(/^Copy\s+/i, "Copied ") : label} > {isCopied ? : } diff --git a/apps/web/src/components/chat/MessagesTimeline.test.tsx b/apps/web/src/components/chat/MessagesTimeline.test.tsx index 692438c74a..d443bf3265 100644 --- a/apps/web/src/components/chat/MessagesTimeline.test.tsx +++ b/apps/web/src/components/chat/MessagesTimeline.test.tsx @@ -1,6 +1,15 @@ import { MessageId } from "@t3tools/contracts"; import { renderToStaticMarkup } from "react-dom/server"; import { beforeAll, describe, expect, it, vi } from "vitest"; +import { deriveTimelineEntries } from "../../session-logic"; + +vi.mock("../../hooks/useTheme", () => ({ + useTheme: () => ({ + theme: "light", + resolvedTheme: "light", + setTheme: () => {}, + }), +})); function matchMedia() { return { @@ -42,55 +51,63 @@ beforeAll(() => { }); }); +async function renderTimeline( + timelineEntries: ReturnType, + assistantResponseCopyFormat: "markdown" | "plain-text" = "markdown", +) { + const { MessagesTimeline } = await import("./MessagesTimeline"); + return renderToStaticMarkup( + {}} + onOpenTurnDiff={() => {}} + revertTurnCountByUserMessageId={new Map()} + onRevertUserMessage={() => {}} + isRevertingCheckpoint={false} + onImageExpand={() => {}} + markdownCwd={undefined} + resolvedTheme="light" + assistantResponseCopyFormat={assistantResponseCopyFormat} + timestampFormat="locale" + workspaceRoot={undefined} + />, + ); +} + describe("MessagesTimeline", () => { it("renders inline terminal labels with the composer chip UI", async () => { - const { MessagesTimeline } = await import("./MessagesTimeline"); - const markup = renderToStaticMarkup( - ", - "- Terminal 1 lines 1-5:", - " 1 | julius@mac effect-http-ws-cli % bun i", - " 2 | bun install v1.3.9 (cf6cdbbb)", - "", - ].join("\n"), - createdAt: "2026-03-17T19:12:28.000Z", - streaming: false, - }, - }, - ]} - completionDividerBeforeEntryId={null} - completionSummary={null} - turnDiffSummaryByAssistantMessageId={new Map()} - nowIso="2026-03-17T19:12:30.000Z" - expandedWorkGroups={{}} - onToggleWorkGroup={() => {}} - onOpenTurnDiff={() => {}} - revertTurnCountByUserMessageId={new Map()} - onRevertUserMessage={() => {}} - isRevertingCheckpoint={false} - onImageExpand={() => {}} - markdownCwd={undefined} - resolvedTheme="light" - timestampFormat="locale" - workspaceRoot={undefined} - />, - ); + const markup = await renderTimeline([ + { + id: "entry-1", + kind: "message", + createdAt: "2026-03-17T19:12:28.000Z", + message: { + id: MessageId.makeUnsafe("message-2"), + role: "user", + text: [ + "yoo what's @terminal-1:1-5 mean", + "", + "", + "- Terminal 1 lines 1-5:", + " 1 | julius@mac effect-http-ws-cli % bun i", + " 2 | bun install v1.3.9 (cf6cdbbb)", + "", + ].join("\n"), + createdAt: "2026-03-17T19:12:28.000Z", + streaming: false, + }, + }, + ]); expect(markup).toContain("Terminal 1 lines 1-5"); expect(markup).toContain("lucide-terminal"); @@ -98,46 +115,126 @@ describe("MessagesTimeline", () => { }); it("renders context compaction entries in the normal work log", async () => { - const { MessagesTimeline } = await import("./MessagesTimeline"); - const markup = renderToStaticMarkup( - { + const markup = await renderTimeline([ + { + id: "entry-1", + kind: "message", + createdAt: "2026-03-17T19:12:28.000Z", + message: { + id: MessageId.makeUnsafe("assistant-complete"), + role: "assistant", + text: "Completed response", + createdAt: "2026-03-17T19:12:28.000Z", + completedAt: "2026-03-17T19:12:30.000Z", + streaming: false, + }, + }, + ]); + + expect(markup).toContain("Copy response"); + }); + + it("does not render a copy control for streaming assistant messages", async () => { + const markup = await renderTimeline([ + { + id: "entry-1", + kind: "message", + createdAt: "2026-03-17T19:12:28.000Z", + message: { + id: MessageId.makeUnsafe("assistant-streaming"), + role: "assistant", + text: "Partial response", + createdAt: "2026-03-17T19:12:28.000Z", + streaming: true, + }, + }, + ]); + + expect(markup).not.toContain("Copy response"); + }); + + it("does not render a copy control for empty completed assistant messages", async () => { + const markup = await renderTimeline([ + { + id: "entry-1", + kind: "message", + createdAt: "2026-03-17T19:12:28.000Z", + message: { + id: MessageId.makeUnsafe("assistant-empty"), + role: "assistant", + text: " ", + createdAt: "2026-03-17T19:12:28.000Z", + completedAt: "2026-03-17T19:12:30.000Z", + streaming: false, + }, + }, + ]); + + expect(markup).not.toContain("Copy response"); + }); + + it("does not render a copy control when plain-text resolution is empty", async () => { + const markup = await renderTimeline( + [ + { + id: "entry-1", + kind: "message", + createdAt: "2026-03-17T19:12:28.000Z", + message: { + id: MessageId.makeUnsafe("assistant-plain-text-empty"), + role: "assistant", + text: "---", createdAt: "2026-03-17T19:12:28.000Z", - entry: { - id: "work-1", - createdAt: "2026-03-17T19:12:28.000Z", - label: "Context compacted", - tone: "info", - }, + completedAt: "2026-03-17T19:12:30.000Z", + streaming: false, }, - ]} - completionDividerBeforeEntryId={null} - completionSummary={null} - turnDiffSummaryByAssistantMessageId={new Map()} - nowIso="2026-03-17T19:12:30.000Z" - expandedWorkGroups={{}} - onToggleWorkGroup={() => {}} - onOpenTurnDiff={() => {}} - revertTurnCountByUserMessageId={new Map()} - onRevertUserMessage={() => {}} - isRevertingCheckpoint={false} - onImageExpand={() => {}} - markdownCwd={undefined} - resolvedTheme="light" - timestampFormat="locale" - workspaceRoot={undefined} - />, + }, + ], + "plain-text", ); - expect(markup).toContain("Context compacted"); - expect(markup).toContain("Work log"); + expect(markup).not.toContain("Copy response"); + }); + + it("renders a copy control for html-only assistant messages in plain-text mode", async () => { + const markup = await renderTimeline( + [ + { + id: "entry-1", + kind: "message", + createdAt: "2026-03-17T19:12:28.000Z", + message: { + id: MessageId.makeUnsafe("assistant-html-only"), + role: "assistant", + text: "
Example
", + createdAt: "2026-03-17T19:12:28.000Z", + completedAt: "2026-03-17T19:12:30.000Z", + streaming: false, + }, + }, + ], + "plain-text", + ); + + expect(markup).toContain("Copy response"); }); }); diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx index f3174030ef..6acb41f824 100644 --- a/apps/web/src/components/chat/MessagesTimeline.tsx +++ b/apps/web/src/components/chat/MessagesTimeline.tsx @@ -48,13 +48,20 @@ import { type ParsedTerminalContextEntry, } from "~/lib/terminalContext"; import { cn } from "~/lib/utils"; -import { type TimestampFormat } from "@t3tools/contracts/settings"; +import { + type AssistantResponseCopyFormat, + type TimestampFormat, +} from "@t3tools/contracts/settings"; import { formatTimestamp } from "../../timestampFormat"; import { buildInlineTerminalContextText, formatInlineTerminalContextLabel, textContainsInlineTerminalContextLabels, } from "./userMessageTerminalContexts"; +import { + hasAssistantResponseCopyText, + resolveAssistantMessageCopyText, +} from "../../lib/assistantMessageCopy"; const MAX_VISIBLE_WORK_LOG_ENTRIES = 6; const ALWAYS_UNVIRTUALIZED_TAIL_ROWS = 8; @@ -79,6 +86,7 @@ interface MessagesTimelineProps { onImageExpand: (preview: ExpandedImagePreview) => void; markdownCwd: string | undefined; resolvedTheme: "light" | "dark"; + assistantResponseCopyFormat: AssistantResponseCopyFormat; timestampFormat: TimestampFormat; workspaceRoot: string | undefined; } @@ -103,6 +111,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({ onImageExpand, markdownCwd, resolvedTheme, + assistantResponseCopyFormat, timestampFormat, workspaceRoot, }: MessagesTimelineProps) { @@ -253,7 +262,10 @@ export const MessagesTimeline = memo(function MessagesTimeline({ if (row.kind === "work") return 112; if (row.kind === "proposed-plan") return estimateTimelineProposedPlanHeight(row.proposedPlan); if (row.kind === "working") return 40; - return estimateTimelineMessageHeight(row.message, { timelineWidthPx }); + return estimateTimelineMessageHeight(row.message, { + timelineWidthPx, + assistantResponseCopyFormat, + }); }, measureElement: measureVirtualElement, useAnimationFrameWithResizeObserver: true, @@ -262,7 +274,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({ useEffect(() => { if (timelineWidthPx === null) return; rowVirtualizer.measure(); - }, [rowVirtualizer, timelineWidthPx]); + }, [assistantResponseCopyFormat, rowVirtualizer, timelineWidthPx]); useEffect(() => { rowVirtualizer.shouldAdjustScrollPositionOnItemSizeChange = (_item, _delta, instance) => { const viewportHeight = instance.scrollRect?.height ?? 0; @@ -437,6 +449,9 @@ export const MessagesTimeline = memo(function MessagesTimeline({ row.message.role === "assistant" && (() => { const messageText = row.message.text || (row.message.streaming ? "" : "(empty response)"); + const showAssistantCopyButton = + !row.message.streaming && + hasAssistantResponseCopyText(row.message.text, assistantResponseCopyFormat); return ( <> {row.showCompletionDivider && ( @@ -448,7 +463,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({ )} -
+
); })()} -

- {formatMessageMeta( - row.message.createdAt, - row.message.streaming - ? formatElapsed(row.durationStart, nowIso) - : formatElapsed(row.durationStart, row.message.completedAt), - timestampFormat, - )} -

+
+
+ {showAssistantCopyButton ? ( + + resolveAssistantMessageCopyText( + row.message.text, + assistantResponseCopyFormat, + ) + } + label="Copy response" + /> + ) : null} +
+

+ {formatMessageMeta( + row.message.createdAt, + row.message.streaming + ? formatElapsed(row.durationStart, nowIso) + : formatElapsed(row.durationStart, row.message.completedAt), + timestampFormat, + )} +

+
); diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx index bb149c00a4..a2fe303f6c 100644 --- a/apps/web/src/components/settings/SettingsPanels.tsx +++ b/apps/web/src/components/settings/SettingsPanels.tsx @@ -69,6 +69,11 @@ const TIMESTAMP_FORMAT_LABELS = { "24-hour": "24-hour", } as const; +const ASSISTANT_RESPONSE_COPY_FORMAT_LABELS = { + markdown: "Raw markdown", + "plain-text": "Rendered plain text", +} as const; + const EMPTY_SERVER_PROVIDERS: ReadonlyArray = []; type InstallProviderSettings = { @@ -317,6 +322,10 @@ export function useSettingsRestore(onRestored?: () => void) { const changedSettingLabels = useMemo( () => [ ...(theme !== "system" ? ["Theme"] : []), + ...(settings.assistantResponseCopyFormat !== + DEFAULT_UNIFIED_SETTINGS.assistantResponseCopyFormat + ? ["Assistant copy format"] + : []), ...(settings.timestampFormat !== DEFAULT_UNIFIED_SETTINGS.timestampFormat ? ["Time format"] : []), @@ -341,6 +350,7 @@ export function useSettingsRestore(onRestored?: () => void) { [ areProviderSettingsDirty, isGitWritingModelDirty, + settings.assistantResponseCopyFormat, settings.confirmThreadArchive, settings.confirmThreadDelete, settings.defaultThreadEnvMode, @@ -632,6 +642,53 @@ export function GeneralSettingsPanel() { } /> + + updateSettings({ + assistantResponseCopyFormat: + DEFAULT_UNIFIED_SETTINGS.assistantResponseCopyFormat, + }) + } + /> + ) : null + } + control={ + + } + /> + { estimateTimelineMessageHeight({ role: "assistant", text: "a".repeat(144), + streaming: false, + }), + ).toBe(140); + }); + + it("keeps the smaller assistant base height while streaming", () => { + expect( + estimateTimelineMessageHeight({ + role: "assistant", + text: "a".repeat(144), + streaming: true, }), ).toBe(122); }); + it("keeps the smaller assistant base height when plain-text copy resolves empty", () => { + expect( + estimateTimelineMessageHeight( + { + role: "assistant", + text: "---", + streaming: false, + }, + { timelineWidthPx: null, assistantResponseCopyFormat: "plain-text" }, + ), + ).toBe(100); + }); + it("uses assistant sizing rules for system messages", () => { expect( estimateTimelineMessageHeight({ @@ -130,9 +154,10 @@ describe("estimateTimelineMessageHeight", () => { const message = { role: "assistant" as const, text: "a".repeat(200), + streaming: false, }; - expect(estimateTimelineMessageHeight(message, { timelineWidthPx: 320 })).toBe(188); - expect(estimateTimelineMessageHeight(message, { timelineWidthPx: 768 })).toBe(122); + expect(estimateTimelineMessageHeight(message, { timelineWidthPx: 320 })).toBe(206); + expect(estimateTimelineMessageHeight(message, { timelineWidthPx: 768 })).toBe(140); }); }); diff --git a/apps/web/src/components/timelineHeight.ts b/apps/web/src/components/timelineHeight.ts index 998a2a0b7f..69dda9fb37 100644 --- a/apps/web/src/components/timelineHeight.ts +++ b/apps/web/src/components/timelineHeight.ts @@ -1,10 +1,13 @@ +import { type AssistantResponseCopyFormat } from "@t3tools/contracts/settings"; import { deriveDisplayedUserMessageState } from "../lib/terminalContext"; +import { hasAssistantResponseCopyText } from "../lib/assistantMessageCopy"; import { buildInlineTerminalContextText } from "./chat/userMessageTerminalContexts"; const ASSISTANT_CHARS_PER_LINE_FALLBACK = 72; const USER_CHARS_PER_LINE_FALLBACK = 56; const LINE_HEIGHT_PX = 22; const ASSISTANT_BASE_HEIGHT_PX = 78; +const ASSISTANT_COMPLETED_ACTION_BASE_HEIGHT_PX = 96; const USER_BASE_HEIGHT_PX = 96; const ATTACHMENTS_PER_ROW = 2; // Attachment thumbnails render with `max-h-[220px]` plus ~8px row gap. @@ -20,11 +23,13 @@ const MIN_ASSISTANT_CHARS_PER_LINE = 20; interface TimelineMessageHeightInput { role: "user" | "assistant" | "system"; text: string; + streaming?: boolean; attachments?: ReadonlyArray<{ id: string }>; } interface TimelineHeightEstimateLayout { timelineWidthPx: number | null; + assistantResponseCopyFormat?: AssistantResponseCopyFormat; } function estimateWrappedLineCount(text: string, charsPerLine: number): number { @@ -73,7 +78,12 @@ export function estimateTimelineMessageHeight( if (message.role === "assistant") { const charsPerLine = estimateCharsPerLineForAssistant(layout.timelineWidthPx); const estimatedLines = estimateWrappedLineCount(message.text, charsPerLine); - return ASSISTANT_BASE_HEIGHT_PX + estimatedLines * LINE_HEIGHT_PX; + const assistantBaseHeightPx = + message.streaming !== true && + hasAssistantResponseCopyText(message.text, layout.assistantResponseCopyFormat ?? "markdown") + ? ASSISTANT_COMPLETED_ACTION_BASE_HEIGHT_PX + : ASSISTANT_BASE_HEIGHT_PX; + return assistantBaseHeightPx + estimatedLines * LINE_HEIGHT_PX; } if (message.role === "user") { diff --git a/apps/web/src/hooks/useSettings.ts b/apps/web/src/hooks/useSettings.ts index 3f804bc48b..cd5b0ee1d2 100644 --- a/apps/web/src/hooks/useSettings.ts +++ b/apps/web/src/hooks/useSettings.ts @@ -20,6 +20,7 @@ import { } from "@t3tools/contracts"; import { DEFAULT_SERVER_SETTINGS } from "@t3tools/contracts"; import { + AssistantResponseCopyFormat, type ClientSettings, ClientSettingsSchema, DEFAULT_CLIENT_SETTINGS, @@ -202,6 +203,10 @@ export function buildLegacyClientSettingsMigrationPatch( ): Partial> { const patch: Partial> = {}; + if (Schema.is(AssistantResponseCopyFormat)(legacySettings.assistantResponseCopyFormat)) { + patch.assistantResponseCopyFormat = legacySettings.assistantResponseCopyFormat; + } + if (Predicate.isBoolean(legacySettings.confirmThreadArchive)) { patch.confirmThreadArchive = legacySettings.confirmThreadArchive; } diff --git a/apps/web/src/lib/assistantMessageCopy.test.ts b/apps/web/src/lib/assistantMessageCopy.test.ts new file mode 100644 index 0000000000..b7f0bcfaf4 --- /dev/null +++ b/apps/web/src/lib/assistantMessageCopy.test.ts @@ -0,0 +1,105 @@ +import { describe, expect, it } from "vitest"; + +import { + hasAssistantResponseCopyText, + markdownToPlainText, + resolveAssistantMessageCopyText, +} from "./assistantMessageCopy"; + +describe("assistantMessageCopy", () => { + it("returns the raw assistant markdown unchanged in markdown mode", () => { + const markdown = ["# Heading", "", "- item", "", "```ts", "console.log('hi');", "```"].join( + "\n", + ); + + expect(resolveAssistantMessageCopyText(markdown, "markdown")).toBe(markdown); + }); + + it("serializes markdown into stable plain text", () => { + const markdown = [ + "# Heading", + "", + "Paragraph with [docs](https://example.com/docs) and [](https://example.com/fallback).", + "", + "> Quoted **text**", + "", + "- first item", + "- second item", + "", + "1. ordered", + "2. next", + "", + "| Name | Value |", + "| --- | --- |", + "| One | 1 |", + "", + "```ts", + "const value = 1;", + "console.log(value);", + "```", + ].join("\n"); + + expect(markdownToPlainText(markdown)).toBe( + [ + "Heading", + "", + "Paragraph with docs and https://example.com/fallback.", + "", + "Quoted text", + "", + "- first item", + "- second item", + "", + "1. ordered", + "2. next", + "", + "Name | Value", + "One | 1", + "", + "const value = 1;", + "console.log(value);", + ].join("\n"), + ); + }); + + it("aligns continuation blocks for ordered lists with wide markers", () => { + const markdown = [ + "10. first paragraph", + "", + " ```ts", + " const value = 1;", + " ```", + ].join("\n"); + + expect(markdownToPlainText(markdown)).toBe( + ["10. first paragraph", " const value = 1;"].join("\n"), + ); + }); + + it("preserves gfm task state in copied plain text", () => { + const markdown = ["- [x] done", "- [ ] todo", "", "1. [x] ship it"].join("\n"); + + expect(markdownToPlainText(markdown)).toBe( + ["- [x] done", "- [ ] todo", "", "1. [x] ship it"].join("\n"), + ); + }); + + it("preserves visible raw html text in plain-text mode", () => { + const markdown = ["
", "Example", "
"].join("\n"); + + expect(markdownToPlainText(markdown)).toBe(markdown); + expect(hasAssistantResponseCopyText(markdown, "plain-text")).toBe(true); + }); + + it("preserves leading indentation for top-level code blocks", () => { + const markdown = ["```py", " print('hi')", "```"].join("\n"); + + expect(markdownToPlainText(markdown)).toBe(" print('hi')"); + }); + + it("collapses soft-wrapped paragraph newlines but preserves explicit breaks", () => { + const markdown = ["soft", "wrap", "", "hard ", "break"].join("\n"); + + expect(markdownToPlainText(markdown)).toBe(["soft wrap", "", "hard", "break"].join("\n")); + }); +}); diff --git a/apps/web/src/lib/assistantMessageCopy.ts b/apps/web/src/lib/assistantMessageCopy.ts new file mode 100644 index 0000000000..60927595e2 --- /dev/null +++ b/apps/web/src/lib/assistantMessageCopy.ts @@ -0,0 +1,203 @@ +import { type AssistantResponseCopyFormat } from "@t3tools/contracts/settings"; +import remarkGfm from "remark-gfm"; +import remarkParse from "remark-parse"; +import { unified } from "unified"; +import { LRUCache } from "./lruCache"; + +type MarkdownNode = { + type: string; + value?: string; + alt?: string; + url?: string; + ordered?: boolean; + start?: number | null; + checked?: boolean | null; + children?: MarkdownNode[]; +}; + +const markdownProcessor = unified().use(remarkParse).use(remarkGfm); +const MAX_PLAIN_TEXT_CACHE_ENTRIES = 500; +const MAX_PLAIN_TEXT_CACHE_MEMORY_BYTES = 5 * 1024 * 1024; +const plainTextCache = new LRUCache( + MAX_PLAIN_TEXT_CACHE_ENTRIES, + MAX_PLAIN_TEXT_CACHE_MEMORY_BYTES, +); + +export function resolveAssistantMessageCopyText( + messageText: string, + format: AssistantResponseCopyFormat, +): string { + if (format === "markdown") { + return messageText; + } + + return getCachedPlainText(messageText); +} + +export function hasAssistantResponseCopyText( + messageText: string, + format: AssistantResponseCopyFormat, +): boolean { + if (messageText.trim().length === 0) { + return false; + } + + return resolveAssistantMessageCopyText(messageText, format).trim().length > 0; +} + +export function markdownToPlainText(markdown: string): string { + const normalizedMarkdown = markdown.replace(/\r\n/g, "\n"); + if (normalizedMarkdown.trim().length === 0) { + return ""; + } + + const tree = markdownProcessor.parse(normalizedMarkdown) as MarkdownNode; + return normalizePlainText(renderBlockChildren(tree.children ?? [])); +} + +function renderBlockChildren(nodes: readonly MarkdownNode[]): string { + return nodes + .map((node) => renderBlock(node)) + .filter((block) => block.length > 0) + .join("\n\n"); +} + +function renderBlock(node: MarkdownNode): string { + switch (node.type) { + case "root": + case "blockquote": + return renderBlockChildren(node.children ?? []); + case "paragraph": + case "heading": + return normalizeInlineText(renderInlineChildren(node.children ?? [])); + case "code": + return normalizeCodeBlock(node.value ?? ""); + case "list": + return renderList(node); + case "table": + return renderTable(node); + case "html": + return normalizeCodeBlock(node.value ?? ""); + case "thematicBreak": + return ""; + default: + return normalizeInlineText(renderInline(node)); + } +} + +function renderList(node: MarkdownNode): string { + const items = node.children ?? []; + const ordered = Boolean(node.ordered); + const start = typeof node.start === "number" ? node.start : 1; + + return items + .map((item, index) => renderListItem(item, ordered ? `${start + index}. ` : "- ")) + .filter((item) => item.length > 0) + .join("\n"); +} + +function renderListItem(node: MarkdownNode, marker: string): string { + const blocks = (node.children ?? []) + .map((child) => renderBlock(child)) + .filter((block) => block.length > 0); + const taskPrefix = node.checked === true ? "[x] " : node.checked === false ? "[ ] " : ""; + const contentPrefix = `${marker}${taskPrefix}`; + + if (blocks.length === 0) { + return contentPrefix.trimEnd(); + } + + const continuationPrefix = " ".repeat(contentPrefix.length); + const firstBlock = blocks[0]!; + const remainingBlocks = blocks.slice(1); + const firstBlockLines = splitLines(firstBlock); + const lines = firstBlockLines.map((line, index) => + index === 0 ? `${contentPrefix}${line}` : `${continuationPrefix}${line}`, + ); + + for (const block of remainingBlocks) { + for (const line of splitLines(block)) { + lines.push(`${continuationPrefix}${line}`); + } + } + + return lines.join("\n"); +} + +function renderTable(node: MarkdownNode): string { + return (node.children ?? []) + .map((row) => + (row.children ?? []) + .map((cell) => normalizeInlineText(renderInlineChildren(cell.children ?? []))) + .join(" | "), + ) + .filter((row) => row.length > 0) + .join("\n"); +} + +function renderInlineChildren(nodes: readonly MarkdownNode[]): string { + return nodes.map((node) => renderInline(node)).join(""); +} + +function renderInline(node: MarkdownNode): string { + switch (node.type) { + case "text": + return (node.value ?? "").replace(/\r?\n+/g, " "); + case "inlineCode": + case "html": + return node.value ?? ""; + case "break": + return "\n"; + case "link": { + const label = normalizeInlineText(renderInlineChildren(node.children ?? [])); + if (label.length > 0) { + return label; + } + return typeof node.url === "string" ? node.url : ""; + } + case "image": + return node.alt?.trim() || node.url || ""; + case "delete": + case "emphasis": + case "strong": + case "paragraph": + case "heading": + return renderInlineChildren(node.children ?? []); + default: + return renderInlineChildren(node.children ?? []); + } +} + +function normalizeCodeBlock(value: string): string { + return value.replace(/\r\n/g, "\n").replace(/\n+$/g, ""); +} + +function normalizeInlineText(value: string): string { + return value + .replace(/[ \t]+\n/g, "\n") + .replace(/\n[ \t]+/g, "\n") + .replace(/[ \t]{2,}/g, " ") + .trim(); +} + +function normalizePlainText(value: string): string { + return value + .replace(/[ \t]+\n/g, "\n") + .replace(/\n{3,}/g, "\n\n") + .replace(/\n+$/g, ""); +} + +function splitLines(value: string): string[] { + return value.replace(/\r\n/g, "\n").split("\n"); +} + +function getCachedPlainText(markdown: string): string { + const cached = plainTextCache.get(markdown); + if (cached !== null) { + return cached; + } + + const plainText = markdownToPlainText(markdown); + plainTextCache.set(markdown, plainText, plainText.length * 2); + return plainText; +} diff --git a/bun.lock b/bun.lock index fa083cdc53..e4e3251cf1 100644 --- a/bun.lock +++ b/bun.lock @@ -99,7 +99,9 @@ "react-dom": "^19.0.0", "react-markdown": "^10.1.0", "remark-gfm": "^4.0.1", + "remark-parse": "^11.0.0", "tailwind-merge": "^3.4.0", + "unified": "^11.0.5", "zustand": "^5.0.11", }, "devDependencies": { diff --git a/packages/contracts/src/settings.test.ts b/packages/contracts/src/settings.test.ts index e7f638c7f3..2016fc735b 100644 --- a/packages/contracts/src/settings.test.ts +++ b/packages/contracts/src/settings.test.ts @@ -2,6 +2,10 @@ import { describe, expect, it } from "vitest"; import { DEFAULT_CLIENT_SETTINGS } from "./settings"; describe("DEFAULT_CLIENT_SETTINGS", () => { + it("includes assistant response copy format with a markdown default", () => { + expect(DEFAULT_CLIENT_SETTINGS.assistantResponseCopyFormat).toBe("markdown"); + }); + it("includes archive confirmation with a false default", () => { expect(DEFAULT_CLIENT_SETTINGS.confirmThreadArchive).toBe(false); }); diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts index 9cd8a5f251..abdffd3d67 100644 --- a/packages/contracts/src/settings.ts +++ b/packages/contracts/src/settings.ts @@ -15,6 +15,10 @@ export const TimestampFormat = Schema.Literals(["locale", "12-hour", "24-hour"]) export type TimestampFormat = typeof TimestampFormat.Type; export const DEFAULT_TIMESTAMP_FORMAT: TimestampFormat = "locale"; +export const AssistantResponseCopyFormat = Schema.Literals(["markdown", "plain-text"]); +export type AssistantResponseCopyFormat = typeof AssistantResponseCopyFormat.Type; +export const DEFAULT_ASSISTANT_RESPONSE_COPY_FORMAT: AssistantResponseCopyFormat = "markdown"; + export const SidebarProjectSortOrder = Schema.Literals(["updated_at", "created_at", "manual"]); export type SidebarProjectSortOrder = typeof SidebarProjectSortOrder.Type; export const DEFAULT_SIDEBAR_PROJECT_SORT_ORDER: SidebarProjectSortOrder = "updated_at"; @@ -24,6 +28,9 @@ export type SidebarThreadSortOrder = typeof SidebarThreadSortOrder.Type; export const DEFAULT_SIDEBAR_THREAD_SORT_ORDER: SidebarThreadSortOrder = "updated_at"; export const ClientSettingsSchema = Schema.Struct({ + assistantResponseCopyFormat: AssistantResponseCopyFormat.pipe( + Schema.withDecodingDefault(() => DEFAULT_ASSISTANT_RESPONSE_COPY_FORMAT), + ), confirmThreadArchive: Schema.Boolean.pipe(Schema.withDecodingDefault(() => false)), confirmThreadDelete: Schema.Boolean.pipe(Schema.withDecodingDefault(() => true)), diffWordWrap: Schema.Boolean.pipe(Schema.withDecodingDefault(() => false)), diff --git a/packages/shared/src/DrainableWorker.ts b/packages/shared/src/DrainableWorker.ts index 7eb311ca57..0289ef39ee 100644 --- a/packages/shared/src/DrainableWorker.ts +++ b/packages/shared/src/DrainableWorker.ts @@ -37,13 +37,13 @@ export const makeDrainableWorker = ( process: (item: A) => Effect.Effect, ): Effect.Effect, never, Scope.Scope | R> => Effect.gen(function* () { - const ref = yield* TxRef.make(0); + const ref = yield* Effect.transaction(TxRef.make(0)); - const queue = yield* Effect.acquireRelease(TxQueue.unbounded(), (queue) => - TxQueue.shutdown(queue), + const queue = yield* Effect.acquireRelease(Effect.transaction(TxQueue.unbounded()), (queue) => + Effect.asVoid(Effect.transaction(TxQueue.shutdown(queue))), ); - const takeItem = Effect.tx( + const takeItem = Effect.transaction( Effect.gen(function* () { const item = yield* TxQueue.take(queue); yield* TxRef.update(ref, (n) => n + 1); @@ -53,24 +53,26 @@ export const makeDrainableWorker = ( yield* takeItem.pipe( Effect.flatMap((item) => - process(item).pipe(Effect.ensuring(TxRef.update(ref, (n) => n - 1))), + process(item).pipe( + Effect.ensuring(Effect.transaction(TxRef.update(ref, (n) => n - 1))), + ), ), Effect.forever, Effect.forkScoped, ); - const drain: DrainableWorker["drain"] = Effect.tx( + const drain: DrainableWorker["drain"] = Effect.transaction( Effect.gen(function* () { const inFlight = yield* TxRef.get(ref); const isEmpty = yield* TxQueue.isEmpty(queue); if (inFlight > 0 || !isEmpty) { - return yield* Effect.txRetry; + return yield* Effect.retryTransaction; } }), ); return { - enqueue: (item) => TxQueue.offer(queue, item), + enqueue: (item) => Effect.asVoid(Effect.transaction(TxQueue.offer(queue, item))), drain, } satisfies DrainableWorker; });