mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-23 09:07:46 +02:00
Revert raw transcript timestamp tooltips
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
1 parent
1fa83cbdd3
commit
97ea7e50f8
2 files changed
+5
-77
No files matched your search
@@ -1,32 +1,11 @@
|
||||
// @vitest-environment jsdom
|
||||
// @vitest-environment node
|
||||
|
||||
import { act, type ReactNode } from "react";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
import { createRoot, type Root } from "react-dom/client";
|
||||
import type { TranscriptEntry } from "../../adapters";
|
||||
import { ThemeProvider } from "../../context/ThemeContext";
|
||||
import { RunTranscriptView, normalizeTranscript } from "./RunTranscriptView";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
|
||||
function render(ui: ReactNode) {
|
||||
const container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
const root: Root = createRoot(container);
|
||||
act(() => {
|
||||
root.render(ui);
|
||||
});
|
||||
return {
|
||||
container,
|
||||
unmount: () => {
|
||||
act(() => root.unmount());
|
||||
container.remove();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
describe("RunTranscriptView", () => {
|
||||
it("keeps running command stdout inside the command fold instead of a standalone stdout block", () => {
|
||||
const entries: TranscriptEntry[] = [
|
||||
@@ -131,38 +110,4 @@ describe("RunTranscriptView", () => {
|
||||
expect(html).toMatch(/<li[^>]*>posted issue update<\/li>/);
|
||||
expect(html).not.toContain("result");
|
||||
});
|
||||
|
||||
it("adds timestamp and age tooltip to raw mode labels lazily on hover", () => {
|
||||
vi.useFakeTimers();
|
||||
vi.setSystemTime(new Date("2026-03-12T00:03:00.000Z"));
|
||||
const { container, unmount } = render(
|
||||
<ThemeProvider>
|
||||
<RunTranscriptView
|
||||
mode="raw"
|
||||
entries={[
|
||||
{
|
||||
kind: "stdout",
|
||||
ts: "2026-03-12T00:00:00.000Z",
|
||||
text: "hello",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ThemeProvider>,
|
||||
);
|
||||
try {
|
||||
const label = container.querySelector("span[data-timestamp]");
|
||||
expect(label?.textContent).toBe("stdout");
|
||||
expect(label?.getAttribute("title")).toBeNull();
|
||||
|
||||
act(() => {
|
||||
label?.dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
|
||||
});
|
||||
|
||||
expect(label?.getAttribute("title")).toContain("Timestamp:");
|
||||
expect(label?.getAttribute("title")).toContain("Ago: 3m ago");
|
||||
} finally {
|
||||
unmount();
|
||||
vi.useRealTimers();
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1,8 +1,7 @@
|
||||
import { useMemo, useState, type MouseEvent as ReactMouseEvent } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import type { TranscriptEntry } from "../../adapters";
|
||||
import { MarkdownBody } from "../MarkdownBody";
|
||||
import { timeAgo } from "../../lib/timeAgo";
|
||||
import { cn, formatDateTime, formatTokens } from "../../lib/utils";
|
||||
import { cn, formatTokens } from "../../lib/utils";
|
||||
import {
|
||||
Check,
|
||||
ChevronDown,
|
||||
@@ -137,18 +136,6 @@ function truncate(value: string, max: number): string {
|
||||
return value.length > max ? `${value.slice(0, Math.max(0, max - 1))}…` : value;
|
||||
}
|
||||
|
||||
function formatRawEntryTimestampTooltip(ts: string): string {
|
||||
if (Number.isNaN(new Date(ts).getTime())) return ts;
|
||||
return `Timestamp: ${formatDateTime(ts)}; Ago: ${timeAgo(ts)}`;
|
||||
}
|
||||
|
||||
function handleRawTimestampLabelHover(event: ReactMouseEvent<HTMLSpanElement>) {
|
||||
if (event.currentTarget.title) return;
|
||||
const ts = event.currentTarget.dataset.timestamp;
|
||||
if (!ts) return;
|
||||
event.currentTarget.title = formatRawEntryTimestampTooltip(ts);
|
||||
}
|
||||
|
||||
function humanizeLabel(value: string): string {
|
||||
return value
|
||||
.replace(/[_-]+/g, " ")
|
||||
@@ -1378,11 +1365,7 @@ function RawTranscriptView({
|
||||
"grid-cols-[auto_1fr]",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className="text-[10px] uppercase tracking-[0.18em] text-muted-foreground"
|
||||
data-timestamp={entry.ts}
|
||||
onMouseEnter={handleRawTimestampLabelHover}
|
||||
>
|
||||
<span className="text-[10px] uppercase tracking-[0.18em] text-muted-foreground">
|
||||
{entry.kind}
|
||||
</span>
|
||||
<pre className="min-w-0 whitespace-pre-wrap break-words text-foreground/80">
|
||||
|
||||
Reference in new issue
Block a user