m4
991 lines
34 KiB
TypeScript
991 lines
34 KiB
TypeScript
"use client";
|
|
|
|
import React, {
|
|
useMemo,
|
|
useState,
|
|
useEffect,
|
|
useRef,
|
|
useCallback,
|
|
} from "react";
|
|
import {
|
|
Download,
|
|
Loader2,
|
|
Maximize2,
|
|
Minimize2,
|
|
FileText,
|
|
Code,
|
|
Pencil,
|
|
Save,
|
|
Trash2,
|
|
Eye,
|
|
ZoomIn,
|
|
ZoomOut,
|
|
RotateCcw,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
} from "lucide-react";
|
|
import {
|
|
TransformWrapper,
|
|
TransformComponent,
|
|
} from "react-zoom-pan-pinch";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
|
import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
|
|
import { MarkdownContent } from "@/app/components/MarkdownContent";
|
|
import { DocxPreview } from "@/app/components/DocxPreview";
|
|
import { SpreadsheetPreview } from "@/app/components/SpreadsheetPreview";
|
|
import {
|
|
IMAGE_EXTS,
|
|
imageSiblings,
|
|
type ImageSiblingNav,
|
|
} from "@/lib/imageSiblings";
|
|
|
|
const LANGUAGE_MAP: Record<string, string> = {
|
|
js: "javascript",
|
|
jsx: "javascript",
|
|
ts: "typescript",
|
|
tsx: "typescript",
|
|
py: "python",
|
|
rb: "ruby",
|
|
go: "go",
|
|
rs: "rust",
|
|
java: "java",
|
|
cpp: "cpp",
|
|
c: "c",
|
|
cs: "csharp",
|
|
php: "php",
|
|
swift: "swift",
|
|
kt: "kotlin",
|
|
sh: "bash",
|
|
bash: "bash",
|
|
zsh: "bash",
|
|
json: "json",
|
|
jsonl: "json",
|
|
xml: "xml",
|
|
html: "html",
|
|
css: "css",
|
|
scss: "scss",
|
|
sql: "sql",
|
|
yaml: "yaml",
|
|
yml: "yaml",
|
|
toml: "toml",
|
|
ini: "ini",
|
|
tex: "latex",
|
|
bib: "latex",
|
|
r: "r",
|
|
};
|
|
|
|
const WORD_EXTS = new Set(["doc", "docx", "docm", "dotx", "dotm"]);
|
|
const SPREADSHEET_EXTS = new Set([
|
|
"xls",
|
|
"xlsx",
|
|
"xlsm",
|
|
"xlsb",
|
|
"xltx",
|
|
"xltm",
|
|
"ods",
|
|
]);
|
|
// Extensions we render as text. Anything not here and not an image/pdf is
|
|
// treated as a binary download.
|
|
const TEXT_EXTS = new Set([
|
|
...Object.keys(LANGUAGE_MAP),
|
|
"txt",
|
|
"md",
|
|
"markdown",
|
|
"log",
|
|
"csv",
|
|
"tsv",
|
|
"cfg",
|
|
"conf",
|
|
"env",
|
|
"gitignore",
|
|
]);
|
|
// Inline text preview is capped — bigger files are offered as a download so we
|
|
// never pull tens of MB into the browser just to render it.
|
|
const MAX_INLINE_TEXT_BYTES = 2 * 1024 * 1024;
|
|
const MAX_OFFICE_PREVIEW_BYTES = 25 * 1024 * 1024;
|
|
const SPREADJS_EXTS = new Set(["xlsx", "xlsm", "xltx", "xltm"]);
|
|
|
|
export function workspaceFileUrl(
|
|
threadId: string,
|
|
path: string,
|
|
download = false
|
|
): string {
|
|
const qs = new URLSearchParams({ threadId, path });
|
|
if (download) qs.set("download", "1");
|
|
return `/api/workspace/file?${qs.toString()}`;
|
|
}
|
|
|
|
function workspacePreviewUrl(threadId: string, path: string): string {
|
|
return `/api/workspace/preview?${new URLSearchParams({
|
|
threadId,
|
|
path,
|
|
}).toString()}`;
|
|
}
|
|
|
|
type Kind = "text" | "image" | "pdf" | "word" | "spreadsheet" | "binary";
|
|
|
|
type OfficePreview =
|
|
| { kind: "pdf"; url: string }
|
|
| { kind: "docx"; document: Blob }
|
|
| { kind: "spreadsheet"; document: Blob };
|
|
|
|
type OfficePreviewStatus =
|
|
| { status: "ready"; mode: "pdf"; previewUrl: string }
|
|
| { status: "processing"; retryAfterMs?: number }
|
|
| {
|
|
status: "fallback" | "failed";
|
|
reason: string;
|
|
message: string;
|
|
};
|
|
|
|
function kindOf(ext: string): Kind {
|
|
if (IMAGE_EXTS.has(ext)) return "image";
|
|
if (ext === "pdf") return "pdf";
|
|
if (WORD_EXTS.has(ext)) return "word";
|
|
if (SPREADSHEET_EXTS.has(ext)) return "spreadsheet";
|
|
if (TEXT_EXTS.has(ext)) return "text";
|
|
return "binary";
|
|
}
|
|
|
|
export const WorkspaceFileDialog = React.memo<{
|
|
/** Path relative to the workspace root, or null to close. */
|
|
path: string | null;
|
|
/** Owning conversation. Workspace files are never global in strict mode. */
|
|
threadId: string | null;
|
|
/** Byte size from the listing — used to gate inline text preview. */
|
|
size?: number;
|
|
onClose: () => void;
|
|
/** Called after a successful save or delete so the listing can refresh. */
|
|
onChanged?: () => void;
|
|
/** Switch the preview to another file (image prev/next within the directory). */
|
|
onNavigate?: (path: string, size?: number) => void;
|
|
}>(({ path, threadId, size, onClose, onChanged, onNavigate }) => {
|
|
const [content, setContent] = useState<string | null>(null);
|
|
const [officePreview, setOfficePreview] = useState<OfficePreview | null>(
|
|
null
|
|
);
|
|
const [docxPreviewFallbackKey, setDocxPreviewFallbackKey] = useState<
|
|
string | null
|
|
>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// Edit / save / delete state.
|
|
const [editing, setEditing] = useState(false);
|
|
const [draft, setDraft] = useState("");
|
|
const [saving, setSaving] = useState(false);
|
|
const [actionError, setActionError] = useState<string | null>(null);
|
|
const [deleting, setDeleting] = useState(false);
|
|
const [deleteOpen, setDeleteOpen] = useState(false);
|
|
// HTML files only: rendered preview vs syntax-highlighted source.
|
|
const [htmlView, setHtmlView] = useState<"preview" | "source">("preview");
|
|
// Bumped after a successful save so the preview iframe reloads new content.
|
|
const [savedTick, setSavedTick] = useState(0);
|
|
// Window-level maximize for the preview panel (toolbar stays usable).
|
|
const [isMaximized, setIsMaximized] = useState(false);
|
|
|
|
// Esc exits maximize; the dialog's own Esc close is suppressed while
|
|
// maximized via onEscapeKeyDown below.
|
|
useEffect(() => {
|
|
if (!isMaximized) return;
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") setIsMaximized(false);
|
|
};
|
|
document.addEventListener("keydown", onKey);
|
|
return () => document.removeEventListener("keydown", onKey);
|
|
}, [isMaximized]);
|
|
const [discardAction, setDiscardAction] = useState<
|
|
"close" | "cancel-edit" | null
|
|
>(null);
|
|
|
|
// Suppress state updates after unmount — closing the inspector panel mid
|
|
// save/delete unmounts this dialog while a request is still in flight.
|
|
const mountedRef = useRef(true);
|
|
useEffect(() => {
|
|
mountedRef.current = true;
|
|
return () => {
|
|
mountedRef.current = false;
|
|
};
|
|
}, []);
|
|
|
|
const name = path ? path.split("/").pop() || path : "";
|
|
const ext = useMemo(
|
|
() => (name.includes(".") ? name.split(".").pop()!.toLowerCase() : ""),
|
|
[name]
|
|
);
|
|
const kind = kindOf(ext);
|
|
const tooBigForText =
|
|
kind === "text" && size != null && size > MAX_INLINE_TEXT_BYTES;
|
|
const supportsOfficePreview = kind === "word" || kind === "spreadsheet";
|
|
const supportsSpreadJsPreview = SPREADJS_EXTS.has(ext);
|
|
const tooBigForOffice =
|
|
supportsOfficePreview && size != null && size > MAX_OFFICE_PREVIEW_BYTES;
|
|
const editable = kind === "text" && !tooBigForText;
|
|
const previewKey = `${threadId ?? ""}\0${path ?? ""}`;
|
|
const docxPreviewFallback = docxPreviewFallbackKey === previewKey;
|
|
const useDocxPreviewFallback = useCallback(() => {
|
|
setDocxPreviewFallbackKey(previewKey);
|
|
}, [previewKey]);
|
|
|
|
useEffect(() => {
|
|
setDocxPreviewFallbackKey(null);
|
|
setHtmlView("preview");
|
|
}, [path, threadId]);
|
|
|
|
// Prev/next image navigation within the current directory. Best-effort:
|
|
// a failed listing just leaves both buttons disabled.
|
|
const [siblingNav, setSiblingNav] = useState<ImageSiblingNav>({
|
|
prev: null,
|
|
next: null,
|
|
});
|
|
const siblingSizesRef = useRef<Map<string, number>>(new Map());
|
|
|
|
useEffect(() => {
|
|
setSiblingNav({ prev: null, next: null });
|
|
siblingSizesRef.current = new Map();
|
|
if (!path || !threadId || kind !== "image" || !onNavigate) return;
|
|
|
|
const dir = path.includes("/") ? path.slice(0, path.lastIndexOf("/")) : "";
|
|
let cancelled = false;
|
|
const controller = new AbortController();
|
|
|
|
const load = async () => {
|
|
const res = await fetch(
|
|
`/api/workspace?${new URLSearchParams({ threadId, path: dir })}`,
|
|
{ signal: controller.signal }
|
|
);
|
|
const body = await res.json().catch(() => null);
|
|
if (!res.ok || cancelled) return;
|
|
const entries = (body?.entries ?? []) as Array<{
|
|
path: string;
|
|
type: "dir" | "file";
|
|
ext: string;
|
|
size: number;
|
|
}>;
|
|
if (cancelled) return;
|
|
setSiblingNav(imageSiblings(entries, path));
|
|
siblingSizesRef.current = new Map(entries.map((e) => [e.path, e.size]));
|
|
};
|
|
|
|
load().catch(() => {});
|
|
return () => {
|
|
cancelled = true;
|
|
controller.abort();
|
|
};
|
|
}, [path, threadId, kind, onNavigate]);
|
|
|
|
const navigateTo = useCallback(
|
|
(target: string | null) => {
|
|
if (target && onNavigate) onNavigate(target, siblingSizesRef.current.get(target));
|
|
},
|
|
[onNavigate]
|
|
);
|
|
|
|
useEffect(() => {
|
|
const loadText = kind === "text" && !tooBigForText;
|
|
const loadOffice = supportsOfficePreview;
|
|
if (!path || !threadId || (!loadText && !loadOffice)) {
|
|
setContent(null);
|
|
setOfficePreview(null);
|
|
return;
|
|
}
|
|
|
|
let cancelled = false;
|
|
const controller = new AbortController();
|
|
setLoading(true);
|
|
setError(null);
|
|
setEditing(false);
|
|
setActionError(null);
|
|
setContent(null);
|
|
setOfficePreview(null);
|
|
|
|
const load = async () => {
|
|
if (loadText) {
|
|
const res = await fetch(workspaceFileUrl(threadId, path), {
|
|
signal: controller.signal,
|
|
});
|
|
if (!res.ok) {
|
|
const body = await res.json().catch(() => null);
|
|
throw new Error(body?.error || `Failed to load file (${res.status})`);
|
|
}
|
|
const text = await res.text();
|
|
if (!cancelled) setContent(text);
|
|
return;
|
|
}
|
|
|
|
if (tooBigForOffice) return;
|
|
|
|
if (ext === "docx" && !docxPreviewFallback) {
|
|
const res = await fetch(workspaceFileUrl(threadId, path), {
|
|
signal: controller.signal,
|
|
});
|
|
if (!res.ok) {
|
|
const body = await res.json().catch(() => null);
|
|
throw new Error(body?.error || `Failed to load file (${res.status})`);
|
|
}
|
|
const document = await res.blob();
|
|
if (!cancelled) setOfficePreview({ kind: "docx", document });
|
|
return;
|
|
}
|
|
|
|
if (supportsSpreadJsPreview) {
|
|
const res = await fetch(workspaceFileUrl(threadId, path), {
|
|
signal: controller.signal,
|
|
});
|
|
if (!res.ok) {
|
|
const body = await res.json().catch(() => null);
|
|
throw new Error(body?.error || `Failed to load file (${res.status})`);
|
|
}
|
|
const document = await res.blob();
|
|
if (!cancelled) setOfficePreview({ kind: "spreadsheet", document });
|
|
return;
|
|
}
|
|
|
|
let serverPreview: OfficePreviewStatus;
|
|
for (;;) {
|
|
const res = await fetch(workspacePreviewUrl(threadId, path), {
|
|
signal: controller.signal,
|
|
});
|
|
const body = (await res
|
|
.json()
|
|
.catch(() => null)) as OfficePreviewStatus | null;
|
|
if (
|
|
!body ||
|
|
(res.status !== 200 && res.status !== 202 && res.status !== 422)
|
|
) {
|
|
throw new Error(
|
|
(body as { error?: string } | null)?.error ||
|
|
`Failed to generate preview (${res.status})`
|
|
);
|
|
}
|
|
serverPreview = body;
|
|
if (serverPreview.status !== "processing") break;
|
|
const retryAfterMs = serverPreview.retryAfterMs ?? 1_000;
|
|
await new Promise((resolve) => setTimeout(resolve, retryAfterMs));
|
|
if (cancelled) return;
|
|
}
|
|
|
|
if (serverPreview.status === "ready") {
|
|
if (!cancelled)
|
|
setOfficePreview({ kind: "pdf", url: serverPreview.previewUrl });
|
|
return;
|
|
}
|
|
throw new Error(serverPreview.message);
|
|
};
|
|
|
|
void load()
|
|
.catch((err: unknown) => {
|
|
if (
|
|
!cancelled &&
|
|
!(err instanceof DOMException && err.name === "AbortError")
|
|
) {
|
|
setError(err instanceof Error ? err.message : "Failed to load file.");
|
|
}
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) setLoading(false);
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
controller.abort();
|
|
};
|
|
}, [
|
|
path,
|
|
threadId,
|
|
kind,
|
|
ext,
|
|
supportsOfficePreview,
|
|
supportsSpreadJsPreview,
|
|
tooBigForText,
|
|
tooBigForOffice,
|
|
docxPreviewFallback,
|
|
]);
|
|
|
|
if (!path || !threadId) return null;
|
|
|
|
const isMarkdown = ext === "md" || ext === "markdown";
|
|
const isHtml = ext === "html";
|
|
const showHtmlToggle = isHtml && kind === "text" && !tooBigForText && !editing;
|
|
const language = LANGUAGE_MAP[ext] || "text";
|
|
const dirty = editing && content !== null && draft !== content;
|
|
const runOrConfirmDiscard = (action: "close" | "cancel-edit") => {
|
|
if (!dirty) {
|
|
if (action === "close") onClose();
|
|
else setEditing(false);
|
|
return;
|
|
}
|
|
setDiscardAction(action);
|
|
};
|
|
|
|
const requestClose = () => {
|
|
runOrConfirmDiscard("close");
|
|
};
|
|
|
|
const startEdit = () => {
|
|
setDraft(content ?? "");
|
|
setActionError(null);
|
|
setEditing(true);
|
|
};
|
|
|
|
const save = async () => {
|
|
setSaving(true);
|
|
setActionError(null);
|
|
try {
|
|
const res = await fetch(workspaceFileUrl(threadId, path), {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ content: draft }),
|
|
});
|
|
const data = await res.json().catch(() => null);
|
|
if (!res.ok) throw new Error(data?.error || "Failed to save.");
|
|
if (!mountedRef.current) return;
|
|
setContent(draft);
|
|
setEditing(false);
|
|
setSavedTick((tick) => tick + 1);
|
|
setHtmlView("preview");
|
|
onChanged?.();
|
|
} catch (e) {
|
|
if (mountedRef.current) {
|
|
setActionError(e instanceof Error ? e.message : "Failed to save.");
|
|
}
|
|
} finally {
|
|
if (mountedRef.current) setSaving(false);
|
|
}
|
|
};
|
|
|
|
const remove = async () => {
|
|
setDeleting(true);
|
|
setActionError(null);
|
|
try {
|
|
const res = await fetch(workspaceFileUrl(threadId, path), {
|
|
method: "DELETE",
|
|
});
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => null);
|
|
throw new Error(data?.error || "Failed to delete.");
|
|
}
|
|
onChanged?.();
|
|
onClose();
|
|
} catch (e) {
|
|
if (mountedRef.current) {
|
|
// Close the confirm dialog so the error (rendered in the main dialog)
|
|
// isn't hidden behind the confirm overlay.
|
|
setDeleteOpen(false);
|
|
setActionError(e instanceof Error ? e.message : "Failed to delete.");
|
|
}
|
|
} finally {
|
|
if (mountedRef.current) setDeleting(false);
|
|
}
|
|
};
|
|
|
|
const confirmDiscardChanges = () => {
|
|
const action = discardAction;
|
|
setDiscardAction(null);
|
|
if (action === "close") onClose();
|
|
if (action === "cancel-edit") setEditing(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Dialog
|
|
open={true}
|
|
onOpenChange={(open) => {
|
|
if (!open) requestClose();
|
|
}}
|
|
>
|
|
<DialogContent
|
|
aria-describedby={undefined}
|
|
className={
|
|
isMaximized
|
|
? // Override the centered-dialog positioning (fixed 50%/50% +
|
|
// translate) so the whole dialog fills the browser window.
|
|
"fixed left-0 top-0 flex h-screen max-h-none w-screen max-w-none translate-x-0 translate-y-0 flex-col rounded-none p-6 sm:max-w-none"
|
|
: "flex h-[80vh] max-h-[80vh] min-w-[60vw] flex-col p-6"
|
|
}
|
|
onEscapeKeyDown={(e) => {
|
|
// While maximized, Esc only collapses the panel (handled by the
|
|
// keydown listener) — it must not close the whole dialog.
|
|
if (isMaximized) e.preventDefault();
|
|
}}
|
|
>
|
|
<DialogTitle className="sr-only">{path}</DialogTitle>
|
|
<div className="flex min-h-0 flex-1 flex-col">
|
|
<div className="mb-4 flex items-center justify-between gap-3 border-b border-border pb-4">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<FileText
|
|
className="h-5 w-5 shrink-0 text-[var(--color-text-tertiary)]"
|
|
aria-hidden="true"
|
|
/>
|
|
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-base font-medium text-primary">
|
|
{path}
|
|
</span>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-1">
|
|
{editing ? (
|
|
<>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-8 px-2"
|
|
onClick={() => {
|
|
runOrConfirmDiscard("cancel-edit");
|
|
}}
|
|
disabled={saving}
|
|
>
|
|
<Eye
|
|
size={16}
|
|
className="mr-1"
|
|
aria-hidden="true"
|
|
/>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
className="h-8 bg-[var(--brand-solid)] px-3 text-[var(--brand-foreground)] hover:opacity-90"
|
|
onClick={save}
|
|
disabled={saving || !dirty}
|
|
>
|
|
{saving ? (
|
|
<Loader2
|
|
size={16}
|
|
className="mr-1 animate-spin"
|
|
aria-hidden="true"
|
|
/>
|
|
) : (
|
|
<Save
|
|
size={16}
|
|
className="mr-1"
|
|
aria-hidden="true"
|
|
/>
|
|
)}
|
|
{saving ? "Saving…" : "Save"}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<>
|
|
{showHtmlToggle && (
|
|
<div
|
|
role="group"
|
|
aria-label="HTML view"
|
|
className="flex items-center rounded-md border border-border"
|
|
>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className={`h-8 rounded-r-none px-2 ${
|
|
htmlView === "preview" ? "bg-accent" : ""
|
|
}`}
|
|
onClick={() => setHtmlView("preview")}
|
|
aria-pressed={htmlView === "preview"}
|
|
>
|
|
<Eye size={16} className="mr-1" aria-hidden="true" />
|
|
Preview
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className={`h-8 rounded-l-none px-2 ${
|
|
htmlView === "source" ? "bg-accent" : ""
|
|
}`}
|
|
onClick={() => setHtmlView("source")}
|
|
aria-pressed={htmlView === "source"}
|
|
>
|
|
<Code size={16} className="mr-1" aria-hidden="true" />
|
|
Source
|
|
</Button>
|
|
</div>
|
|
)}
|
|
{showHtmlToggle && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-8 px-2"
|
|
onClick={() => setIsMaximized((v) => !v)}
|
|
aria-label="Toggle maximize"
|
|
aria-pressed={isMaximized}
|
|
title="Maximize"
|
|
>
|
|
{isMaximized ? (
|
|
<Minimize2 size={16} aria-hidden="true" />
|
|
) : (
|
|
<Maximize2 size={16} aria-hidden="true" />
|
|
)}
|
|
</Button>
|
|
)}
|
|
{editable && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-8 px-2"
|
|
onClick={startEdit}
|
|
disabled={loading || content === null}
|
|
aria-label="Edit file"
|
|
>
|
|
<Pencil
|
|
size={16}
|
|
className="mr-1"
|
|
aria-hidden="true"
|
|
/>
|
|
Edit
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-8 px-2"
|
|
asChild
|
|
>
|
|
<a
|
|
href={workspaceFileUrl(threadId, path, true)}
|
|
download={name}
|
|
>
|
|
<Download
|
|
size={16}
|
|
className="mr-1"
|
|
aria-hidden="true"
|
|
/>
|
|
Download
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-8 px-2 text-muted-foreground hover:text-destructive"
|
|
onClick={() => setDeleteOpen(true)}
|
|
disabled={deleting}
|
|
aria-label="Delete file"
|
|
title="Delete file"
|
|
>
|
|
{deleting ? (
|
|
<Loader2
|
|
size={16}
|
|
className="animate-spin"
|
|
aria-hidden="true"
|
|
/>
|
|
) : (
|
|
<Trash2
|
|
size={16}
|
|
aria-hidden="true"
|
|
/>
|
|
)}
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{actionError && (
|
|
<p
|
|
role="alert"
|
|
className="mb-2 text-sm text-destructive"
|
|
>
|
|
{actionError}
|
|
</p>
|
|
)}
|
|
|
|
<div className="min-h-0 flex-1 overflow-hidden">
|
|
{editing ? (
|
|
<textarea
|
|
value={draft}
|
|
onChange={(e) => setDraft(e.target.value)}
|
|
spellCheck={false}
|
|
aria-label="File content"
|
|
className="h-full w-full resize-none rounded-md border border-border bg-background p-4 font-mono text-sm leading-relaxed text-foreground outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
|
|
placeholder="File is empty…"
|
|
/>
|
|
) : kind === "image" ? (
|
|
<div className="relative h-full overflow-hidden rounded-md bg-[var(--color-surface)]">
|
|
{/* key on path: switching files resets the zoom state. */}
|
|
<TransformWrapper
|
|
key={path}
|
|
initialScale={1}
|
|
minScale={0.2}
|
|
maxScale={8}
|
|
centerOnInit
|
|
smooth={false}
|
|
wheel={{ step: 0.05 }}
|
|
doubleClick={{ mode: "reset" }}
|
|
>
|
|
{({ zoomIn, zoomOut, resetTransform }) => (
|
|
<>
|
|
<div className="absolute right-2 top-2 z-10 flex gap-0.5 rounded-md border border-border bg-background/90 p-1 shadow-sm">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-7"
|
|
onClick={() => zoomOut()}
|
|
aria-label="Zoom out"
|
|
title="Zoom out"
|
|
>
|
|
<ZoomOut className="size-4" />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-7"
|
|
onClick={() => zoomIn()}
|
|
aria-label="Zoom in"
|
|
title="Zoom in"
|
|
>
|
|
<ZoomIn className="size-4" />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-7"
|
|
onClick={() => resetTransform()}
|
|
aria-label="Reset zoom"
|
|
title="Fit to window"
|
|
>
|
|
<RotateCcw className="size-4" />
|
|
</Button>
|
|
</div>
|
|
<TransformComponent
|
|
wrapperClass="!h-full !w-full"
|
|
contentClass="!h-full !w-full flex items-center justify-center"
|
|
>
|
|
<img
|
|
src={workspaceFileUrl(threadId, path)}
|
|
alt={name}
|
|
className="max-h-full max-w-full select-none object-contain"
|
|
draggable={false}
|
|
/>
|
|
</TransformComponent>
|
|
{onNavigate && (siblingNav.prev || siblingNav.next) && (
|
|
<>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute left-2 top-1/2 z-10 size-8 -translate-y-1/2 rounded-md border border-border bg-background/90 shadow-sm disabled:opacity-30"
|
|
onClick={() => navigateTo(siblingNav.prev)}
|
|
disabled={!siblingNav.prev}
|
|
aria-label="Previous image"
|
|
title="Previous image"
|
|
>
|
|
<ChevronLeft className="size-5" />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute right-2 top-1/2 z-10 size-8 -translate-y-1/2 rounded-md border border-border bg-background/90 shadow-sm disabled:opacity-30"
|
|
onClick={() => navigateTo(siblingNav.next)}
|
|
disabled={!siblingNav.next}
|
|
aria-label="Next image"
|
|
title="Next image"
|
|
>
|
|
<ChevronRight className="size-5" />
|
|
</Button>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</TransformWrapper>
|
|
</div>
|
|
) : kind === "pdf" ? (
|
|
<iframe
|
|
src={workspaceFileUrl(threadId, path)}
|
|
title={name}
|
|
className="h-full w-full rounded-md border border-border"
|
|
/>
|
|
) : kind === "binary" || tooBigForText || tooBigForOffice ? (
|
|
<div className="flex h-full flex-col items-center justify-center gap-3 p-12 text-center">
|
|
<p className="text-sm text-muted-foreground">
|
|
{tooBigForText
|
|
? "This file is too large to preview inline."
|
|
: tooBigForOffice
|
|
? "Office files larger than 25 MB can't be previewed inline."
|
|
: "This file type can't be previewed."}
|
|
</p>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
asChild
|
|
>
|
|
<a
|
|
href={workspaceFileUrl(threadId, path, true)}
|
|
download={name}
|
|
>
|
|
<Download
|
|
size={16}
|
|
className="mr-1"
|
|
aria-hidden="true"
|
|
/>
|
|
Download file
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
) : loading ? (
|
|
<div className="flex h-full items-center justify-center">
|
|
<Loader2
|
|
className="size-5 animate-spin text-muted-foreground"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
) : error ? (
|
|
<div className="flex h-full flex-col items-center justify-center gap-3 p-12 text-center">
|
|
<p className="text-sm text-destructive">{error}</p>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
asChild
|
|
>
|
|
<a
|
|
href={workspaceFileUrl(threadId, path, true)}
|
|
download={name}
|
|
>
|
|
<Download
|
|
size={16}
|
|
className="mr-1"
|
|
aria-hidden="true"
|
|
/>
|
|
Download file
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
) : officePreview?.kind === "pdf" ? (
|
|
<iframe
|
|
src={officePreview.url}
|
|
title={`${name} preview`}
|
|
className="h-full w-full rounded-md border border-border"
|
|
/>
|
|
) : officePreview?.kind === "docx" ? (
|
|
<DocxPreview
|
|
document={officePreview.document}
|
|
onError={useDocxPreviewFallback}
|
|
/>
|
|
) : officePreview?.kind === "spreadsheet" ? (
|
|
<SpreadsheetPreview
|
|
document={officePreview.document}
|
|
onError={setError}
|
|
/>
|
|
) : isHtml && htmlView === "preview" && !tooBigForText ? (
|
|
<iframe
|
|
key={savedTick}
|
|
src={`${workspaceFileUrl(threadId, path)}&render=1`}
|
|
sandbox="allow-scripts"
|
|
title={name}
|
|
className="h-full w-full rounded-md border border-border bg-white"
|
|
/>
|
|
) : (
|
|
<ScrollArea className="h-full rounded-md bg-[var(--color-surface)]">
|
|
<div className="p-4">
|
|
{content && content.length > 0 ? (
|
|
isMarkdown ? (
|
|
<div className="rounded-md p-6">
|
|
<MarkdownContent content={content} />
|
|
</div>
|
|
) : (
|
|
<SyntaxHighlighter
|
|
language={language}
|
|
style={oneDark}
|
|
customStyle={{
|
|
margin: 0,
|
|
borderRadius: "0.5rem",
|
|
fontSize: "0.875rem",
|
|
}}
|
|
showLineNumbers
|
|
wrapLines={true}
|
|
lineProps={{ style: { whiteSpace: "pre-wrap" } }}
|
|
>
|
|
{content}
|
|
</SyntaxHighlighter>
|
|
)
|
|
) : (
|
|
<div className="flex items-center justify-center p-12">
|
|
<p className="text-sm text-muted-foreground">
|
|
File is empty
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog
|
|
open={discardAction !== null}
|
|
onOpenChange={(open) => {
|
|
if (!open) setDiscardAction(null);
|
|
}}
|
|
>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>Discard unsaved changes?</DialogTitle>
|
|
<DialogDescription>
|
|
Your edits to “{name}” have not been saved.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setDiscardAction(null)}
|
|
>
|
|
Keep Editing
|
|
</Button>
|
|
<Button
|
|
onClick={confirmDiscardChanges}
|
|
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
|
>
|
|
Discard
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog
|
|
open={deleteOpen}
|
|
onOpenChange={(open) => {
|
|
if (!deleting) setDeleteOpen(open);
|
|
}}
|
|
>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>Delete file?</DialogTitle>
|
|
<DialogDescription>
|
|
“{name}” will be permanently removed from the workspace. This
|
|
can't be undone.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setDeleteOpen(false)}
|
|
disabled={deleting}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={remove}
|
|
disabled={deleting}
|
|
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
|
>
|
|
{deleting ? "Deleting…" : "Delete"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
});
|
|
|
|
WorkspaceFileDialog.displayName = "WorkspaceFileDialog";
|