nntrivi2001
50ac0f0daf
- Every Copy goes through copyText: on http://<lan-ip> navigator.clipboard is undefined, so the push token (shown once), snapshot links, tool paths and hosts copied nothing, silently or with a TypeError. - Inputs that submit on Enter use isSubmitEnter, so committing an IME composition (Vietnamese) no longer saves a half-typed pet name, jumps the settings search, or submits a cut-off plugin/MCP/marketplace spec. - LaneChangesPanel, Workspace features/proof and AiToolConfig drop a reply that lands after the next request started: opening file B before file A's read returned showed (and let the editor save) A's text under B's header. - Error-state Retry buttons spin through useSpin; ImageLightbox uses useDialog. - react-router-dom 6.30 -> 7.18.4 (GHSA-wrjc-x8rr-h8h6, GHSA-337j-9hxr-rhxg); screen snapshots gain only Link's data-discover attribute. - StatusBar test follows v2.8.17's "Settings → AI tools → Profiles" text.
86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
/**
|
|
* @file SnapshotButton.tsx
|
|
* @description The session analysis page's **Snapshot** action: confirms with a
|
|
* "redact file paths" choice, freezes the session through `POST
|
|
* /api/snapshots`, copies the `/snapshot/<token>` link and offers it inline.
|
|
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
|
*/
|
|
|
|
import { useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Camera } from "lucide-react";
|
|
import { api } from "../lib/api";
|
|
import { ConfirmModal } from "./ConfirmModal";
|
|
import { Checkbox } from "./Checkbox";
|
|
import { CopyButton } from "./event-views/primitives";
|
|
import { copyText } from "../lib/clipboard";
|
|
|
|
export function snapshotUrl(token: string): string {
|
|
return `${window.location.origin}/snapshot/${token}`;
|
|
}
|
|
|
|
export function SnapshotButton({ sessionId }: { sessionId: string }) {
|
|
const { t } = useTranslation("sessions");
|
|
const [open, setOpen] = useState(false);
|
|
const [redact, setRedact] = useState(true);
|
|
const [busy, setBusy] = useState(false);
|
|
const [token, setToken] = useState<string | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const create = async () => {
|
|
setBusy(true);
|
|
setError(null);
|
|
try {
|
|
const { snapshot } = await api.snapshots.create(sessionId, { filePaths: redact });
|
|
setToken(snapshot.token);
|
|
void copyText(snapshotUrl(snapshot.token));
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : String(err));
|
|
} finally {
|
|
setBusy(false);
|
|
setOpen(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center justify-end gap-1">
|
|
{token && (
|
|
<span className="inline-flex items-center gap-1 text-xs text-fg-secondary">
|
|
<Link to={`/snapshot/${token}`} className="text-accent hover:underline">
|
|
{t("snapshot.open")}
|
|
</Link>
|
|
<CopyButton text={snapshotUrl(token)} />
|
|
</span>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(true)}
|
|
title={t("snapshot.hint")}
|
|
className="btn-ghost text-xs"
|
|
>
|
|
<Camera className="h-4 w-4" />
|
|
{t("snapshot.create")}
|
|
</button>
|
|
{error && (
|
|
<p role="alert" className="basis-full text-right text-[11px] text-status-danger">
|
|
{error}
|
|
</p>
|
|
)}
|
|
<ConfirmModal
|
|
open={open}
|
|
title={t("snapshot.title")}
|
|
message={t("snapshot.body")}
|
|
confirmLabel={t("snapshot.confirm")}
|
|
cancelLabel={t("snapshot.cancel")}
|
|
destructive={false}
|
|
busy={busy}
|
|
onConfirm={() => void create()}
|
|
onCancel={() => setOpen(false)}
|
|
>
|
|
<Checkbox checked={redact} onChange={setRedact} label={t("snapshot.redactPaths")} />
|
|
</ConfirmModal>
|
|
</div>
|
|
);
|
|
}
|