create-interview-cockpit 0.4.0 → 0.6.0

package/template/client/src/components/DocRefModal.tsx

@@ -0,0 +1,551 @@
+import { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import {
+  X,
+  GripVertical,
+  Maximize2,
+  Minimize2,
+  Loader2,
+  FileText,
+  Search,
+} from "lucide-react";
+
+interface Props {
+  fileId: string;
+  quote: string;
+  fileName: string;
+  onClose: () => void;
+}
+
+const MIN_W = 480;
+const MIN_H = 360;
+const DEFAULT_W = 820;
+const DEFAULT_H = 620;
+
+type ResizeDir = "e" | "s" | "se" | "sw" | "w" | "ne" | "nw" | "n" | null;
+
+const PDF_EXTS = new Set(["pdf"]);
+const IMAGE_EXTS = new Set(["png", "jpg", "jpeg", "gif", "webp", "svg"]);
+const MD_EXTS = new Set(["md", "mdx"]);
+
+function getFileType(name: string): "pdf" | "image" | "md" | "text" {
+  const ext = name.split(".").pop()?.toLowerCase() ?? "";
+  if (PDF_EXTS.has(ext)) return "pdf";
+  if (IMAGE_EXTS.has(ext)) return "image";
+  if (MD_EXTS.has(ext)) return "md";
+  return "text";
+}
+
+/** Split `text` around the first case-insensitive occurrence of `needle`. */
+function splitOnQuote(text: string, needle: string): [string, string, string] {
+  if (!needle) return [text, "", ""];
+  const idx = text.toLowerCase().indexOf(needle.toLowerCase());
+  if (idx === -1) return [text, "", ""];
+  return [
+    text.slice(0, idx),
+    text.slice(idx, idx + needle.length),
+    text.slice(idx + needle.length),
+  ];
+}
+
+function viewUrl(fileId: string, fileName: string) {
+  return `/api/context-files/${encodeURIComponent(fileId)}/view?name=${encodeURIComponent(fileName)}`;
+}
+
+export default function DocRefModal({
+  fileId,
+  quote,
+  fileName,
+  onClose,
+}: Props) {
+  const fileType = getFileType(fileName);
+  const baseViewUrl = viewUrl(fileId, fileName);
+
+  // Text mode state
+  const [content, setContent] = useState<string | null>(null);
+  const [loading, setLoading] = useState(
+    fileType === "text" || fileType === "md",
+  );
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const highlightRef = useRef<HTMLElement | null>(null);
+
+  // For PDF files: toggle between native viewer and extracted-text view
+  // Chrome's native PDF viewer doesn't support #search= URL fragments
+  const [pdfViewMode, setPdfViewMode] = useState<"pdf" | "text">("pdf");
+  // What the user is typing in the search bar
+  const [searchInput, setSearchInput] = useState(() =>
+    quote.slice(0, 200).trim(),
+  );
+  // Search term applied to the text view (shared by text-file mode and PDF text mode)
+  const [textSearch, setTextSearch] = useState(() =>
+    quote.slice(0, 200).trim(),
+  );
+
+  const [maximized, setMaximized] = useState(false);
+  const [pos, setPos] = useState(() => ({
+    x: Math.max(0, (window.innerWidth - DEFAULT_W) / 2),
+    y: Math.max(0, (window.innerHeight - DEFAULT_H) / 2),
+  }));
+  const [size, setSize] = useState({ w: DEFAULT_W, h: DEFAULT_H });
+
+  const dragStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+  } | null>(null);
+  const resizeDir = useRef<ResizeDir>(null);
+  const resizeStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+    ow: number;
+    oh: number;
+  } | null>(null);
+  const savedPos = useRef(pos);
+  const savedSize = useRef(size);
+
+  // Fetch extracted text — for text/md files on mount, or for PDFs when text view is activated
+  useEffect(() => {
+    const needsText =
+      fileType === "text" ||
+      fileType === "md" ||
+      (fileType === "pdf" && pdfViewMode === "text");
+    if (!needsText) return;
+    if (content !== null) return; // already loaded, skip re-fetch
+    setLoading(true);
+    setFetchError(null);
+    fetch(`/api/context-files/${encodeURIComponent(fileId)}/content`)
+      .then((r) => r.json())
+      .then((d) => {
+        if (d.error) setFetchError(d.error);
+        else setContent(d.content as string);
+      })
+      .catch(() => setFetchError("Failed to load document."))
+      .finally(() => setLoading(false));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fileId, fileType, pdfViewMode]);
+
+  // Auto-scroll to highlighted passage once text loads
+  useEffect(() => {
+    if (!content || !highlightRef.current) return;
+    const id = setTimeout(() => {
+      highlightRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }, 80);
+    return () => clearTimeout(id);
+  }, [content]);
+
+  // Text-mode rendered content with current search term highlighted
+  const renderedContent = useMemo(() => {
+    if (!content) return null;
+    const needle = textSearch.trim();
+    const [before, match, after] = splitOnQuote(content, needle);
+    if (!match) return <span>{content}</span>;
+    return (
+      <>
+        {before}
+        <mark
+          ref={(el) => {
+            highlightRef.current = el;
+          }}
+          className="bg-yellow-400/30 text-yellow-100 rounded-sm px-0.5 not-italic"
+        >
+          {match}
+        </mark>
+        {after}
+      </>
+    );
+  }, [content, textSearch]);
+
+  const handleSearchSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const term = searchInput.trim();
+    setTextSearch(term);
+    if (fileType === "pdf") {
+      // Switch to text view — Chrome's native PDF viewer doesn't support URL-fragment search
+      setPdfViewMode("text");
+    }
+  };
+
+  // ─── Drag ────────────────────────────────────────────────────
+
+  const onTitleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (maximized) return;
+      e.preventDefault();
+      dragStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: pos.x,
+        oy: pos.y,
+      };
+    },
+    [maximized, pos],
+  );
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      const drag = dragStart.current;
+      const resize = resizeStart.current;
+      const dir = resizeDir.current;
+      if (drag) {
+        setPos({
+          x: Math.max(0, drag.ox + e.clientX - drag.mx),
+          y: Math.max(0, drag.oy + e.clientY - drag.my),
+        });
+      }
+      if (resize && dir) {
+        const dx = e.clientX - resize.mx;
+        const dy = e.clientY - resize.my;
+        setSize((prev) => {
+          let w = prev.w;
+          let h = prev.h;
+          if (dir.includes("e")) w = Math.max(MIN_W, resize.ow + dx);
+          if (dir.includes("s")) h = Math.max(MIN_H, resize.oh + dy);
+          if (dir.includes("w")) w = Math.max(MIN_W, resize.ow - dx);
+          if (dir.includes("n")) h = Math.max(MIN_H, resize.oh - dy);
+          return { w, h };
+        });
+        if (dir.includes("w"))
+          setPos((prev) => ({
+            ...prev,
+            x: Math.min(resize.ox + resize.ow - MIN_W, resize.ox + dx),
+          }));
+        if (dir.includes("n"))
+          setPos((prev) => ({
+            ...prev,
+            y: Math.min(resize.oy + resize.oh - MIN_H, resize.oy + dy),
+          }));
+      }
+    };
+    const onUp = () => {
+      dragStart.current = null;
+      resizeStart.current = null;
+      resizeDir.current = null;
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    return () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+  }, []);
+
+  // ─── Resize handles ──────────────────────────────────────────
+
+  const startResize = useCallback(
+    (dir: ResizeDir) => (e: React.MouseEvent) => {
+      if (maximized) return;
+      e.preventDefault();
+      e.stopPropagation();
+      resizeDir.current = dir;
+      resizeStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: pos.x,
+        oy: pos.y,
+        ow: size.w,
+        oh: size.h,
+      };
+    },
+    [maximized, pos, size],
+  );
+
+  // ─── Maximise ────────────────────────────────────────────────
+
+  const toggleMax = useCallback(() => {
+    if (!maximized) {
+      savedPos.current = pos;
+      savedSize.current = size;
+      setMaximized(true);
+    } else {
+      setPos(savedPos.current);
+      setSize(savedSize.current);
+      setMaximized(false);
+    }
+  }, [maximized, pos, size]);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  const modalStyle: React.CSSProperties = maximized
+    ? {
+        position: "fixed",
+        inset: 0,
+        width: "100vw",
+        height: "100vh",
+        borderRadius: 0,
+      }
+    : {
+        position: "fixed",
+        left: pos.x,
+        top: pos.y,
+        width: size.w,
+        height: size.h,
+        minWidth: MIN_W,
+        minHeight: MIN_H,
+      };
+
+  return (
+    <>
+      <div
+        className="fixed z-50 flex flex-col bg-slate-900 border border-slate-700 rounded-xl shadow-2xl overflow-hidden select-none"
+        style={modalStyle}
+      >
+        {/* ── Title bar ── */}
+        <div
+          className="flex items-center gap-2 px-3 py-2 bg-slate-800 border-b border-slate-700 shrink-0"
+          onMouseDown={onTitleMouseDown}
+          style={{ cursor: maximized ? "default" : "grab" }}
+        >
+          <GripVertical className="w-3.5 h-3.5 text-slate-600 shrink-0" />
+          <FileText className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
+          <span
+            className="text-xs font-mono text-slate-300 truncate flex-1"
+            title={fileName}
+          >
+            {fileName}
+          </span>
+          <button
+            onClick={toggleMax}
+            className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors shrink-0"
+            title={maximized ? "Restore" : "Maximise"}
+          >
+            {maximized ? (
+              <Minimize2 className="w-3.5 h-3.5" />
+            ) : (
+              <Maximize2 className="w-3.5 h-3.5" />
+            )}
+          </button>
+          <button
+            onClick={onClose}
+            className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-red-400 transition-colors shrink-0"
+            title="Close (Esc)"
+          >
+            <X className="w-3.5 h-3.5" />
+          </button>
+        </div>
+
+        {/* ── Search bar (PDF + text; hidden for images and markdown) ── */}
+        {fileType !== "image" && fileType !== "md" && (
+          <form
+            onSubmit={handleSearchSubmit}
+            className="flex items-center gap-2 px-3 py-1.5 bg-slate-800/60 border-b border-slate-700/60 shrink-0"
+            onMouseDown={(e) => e.stopPropagation()}
+          >
+            <Search className="w-3.5 h-3.5 text-slate-500 shrink-0" />
+            <input
+              type="text"
+              value={searchInput}
+              onChange={(e) => {
+                setSearchInput(e.target.value);
+                // Text mode: update live so highlight follows typing
+                if (fileType === "text") setTextSearch(e.target.value);
+              }}
+              placeholder="Search in document…"
+              className="flex-1 bg-transparent text-xs text-slate-200 placeholder-slate-500 focus:outline-none min-w-0"
+            />
+            {fileType === "pdf" && (
+              <>
+                <button
+                  type="submit"
+                  className="px-2 py-0.5 text-[11px] rounded bg-slate-700 text-slate-300 hover:bg-slate-600 transition-colors shrink-0"
+                >
+                  Find
+                </button>
+                {/* PDF / Text view toggle */}
+                <div className="flex items-center gap-px ml-1 shrink-0">
+                  <button
+                    type="button"
+                    onClick={() => setPdfViewMode("pdf")}
+                    className={`px-2 py-0.5 text-[11px] rounded-l transition-colors ${
+                      pdfViewMode === "pdf"
+                        ? "bg-emerald-700 text-emerald-100"
+                        : "bg-slate-700 text-slate-400 hover:text-slate-200"
+                    }`}
+                  >
+                    PDF
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setPdfViewMode("text")}
+                    className={`px-2 py-0.5 text-[11px] rounded-r transition-colors ${
+                      pdfViewMode === "text"
+                        ? "bg-emerald-700 text-emerald-100"
+                        : "bg-slate-700 text-slate-400 hover:text-slate-200"
+                    }`}
+                  >
+                    Text
+                  </button>
+                </div>
+              </>
+            )}
+          </form>
+        )}
+
+        {/* ── Content area ── */}
+        <div className="flex-1 min-h-0 overflow-hidden">
+          {/* PDF — native viewer (default) */}
+          {fileType === "pdf" && pdfViewMode === "pdf" && (
+            <iframe
+              src={baseViewUrl}
+              className="w-full h-full border-0"
+              title={fileName}
+            />
+          )}
+
+          {/* PDF — extracted-text view with search highlight (Find button switches here) */}
+          {fileType === "pdf" && pdfViewMode === "text" && (
+            <>
+              {loading && (
+                <div className="flex items-center justify-center h-full">
+                  <Loader2 className="w-5 h-5 text-emerald-400 animate-spin" />
+                </div>
+              )}
+              {fetchError && (
+                <div className="flex items-center justify-center h-full p-4">
+                  <p className="text-sm text-red-400 text-center">
+                    {fetchError}
+                  </p>
+                </div>
+              )}
+              {!loading && !fetchError && content !== null && (
+                <div className="w-full h-full overflow-auto p-4">
+                  <pre className="whitespace-pre-wrap text-slate-300 text-xs font-mono leading-relaxed">
+                    {renderedContent}
+                  </pre>
+                </div>
+              )}
+            </>
+          )}
+
+          {/* Image ── served directly from the view endpoint */}
+          {fileType === "image" && (
+            <div className="w-full h-full overflow-auto flex items-start justify-center p-4 bg-slate-950/40">
+              <img
+                src={baseViewUrl}
+                alt={fileName}
+                className="max-w-full object-contain rounded"
+                draggable={false}
+              />
+            </div>
+          )}
+
+          {/* Markdown — rendered with react-markdown */}
+          {fileType === "md" && (
+            <>
+              {loading && (
+                <div className="flex items-center justify-center h-full">
+                  <Loader2 className="w-5 h-5 text-emerald-400 animate-spin" />
+                </div>
+              )}
+              {fetchError && (
+                <div className="flex items-center justify-center h-full p-4">
+                  <p className="text-sm text-red-400 text-center">
+                    {fetchError}
+                  </p>
+                </div>
+              )}
+              {!loading && !fetchError && content !== null && (
+                <div className="w-full h-full overflow-auto p-5">
+                  <div
+                    className="prose prose-invert prose-sm max-w-none
+                    prose-headings:text-slate-100 prose-headings:font-semibold
+                    prose-p:text-slate-300 prose-p:leading-relaxed
+                    prose-a:text-cyan-400 prose-a:no-underline hover:prose-a:underline
+                    prose-code:text-emerald-300 prose-code:bg-slate-800 prose-code:px-1 prose-code:rounded
+                    prose-pre:bg-slate-800/80 prose-pre:border prose-pre:border-slate-700
+                    prose-blockquote:border-l-violet-500 prose-blockquote:text-slate-400
+                    prose-strong:text-slate-100
+                    prose-li:text-slate-300
+                    prose-hr:border-slate-700
+                    prose-table:text-slate-300
+                    prose-th:text-slate-200 prose-th:border prose-th:border-slate-700 prose-th:bg-slate-800/60
+                    prose-td:border prose-td:border-slate-700/60"
+                  >
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                      {content}
+                    </ReactMarkdown>
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+
+          {/* Text / DOCX / other — extracted-text view with highlight */}
+          {fileType === "text" && (
+            <>
+              {loading && (
+                <div className="flex items-center justify-center h-full">
+                  <Loader2 className="w-5 h-5 text-emerald-400 animate-spin" />
+                </div>
+              )}
+              {fetchError && (
+                <div className="flex items-center justify-center h-full p-4">
+                  <p className="text-sm text-red-400 text-center">
+                    {fetchError}
+                  </p>
+                </div>
+              )}
+              {!loading && !fetchError && content !== null && (
+                <div className="w-full h-full overflow-auto p-4">
+                  <pre className="whitespace-pre-wrap text-slate-300 text-xs font-mono leading-relaxed">
+                    {renderedContent}
+                  </pre>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        {/* ── Resize handles ── */}
+        {!maximized && (
+          <>
+            <div
+              onMouseDown={startResize("e")}
+              className="absolute top-0 right-0 w-1.5 h-full cursor-ew-resize z-10"
+            />
+            <div
+              onMouseDown={startResize("s")}
+              className="absolute bottom-0 left-0 w-full h-1.5 cursor-ns-resize z-10"
+            />
+            <div
+              onMouseDown={startResize("w")}
+              className="absolute top-0 left-0 w-1.5 h-full cursor-ew-resize z-10"
+            />
+            <div
+              onMouseDown={startResize("n")}
+              className="absolute top-0 left-0 w-full h-1.5 cursor-ns-resize z-10"
+            />
+            <div
+              onMouseDown={startResize("se")}
+              className="absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20"
+            />
+            <div
+              onMouseDown={startResize("sw")}
+              className="absolute bottom-0 left-0  w-3 h-3 cursor-sw-resize z-20"
+            />
+            <div
+              onMouseDown={startResize("ne")}
+              className="absolute top-0 right-0    w-3 h-3 cursor-ne-resize z-20"
+            />
+            <div
+              onMouseDown={startResize("nw")}
+              className="absolute top-0 left-0     w-3 h-3 cursor-nw-resize z-20"
+            />
+          </>
+        )}
+      </div>
+    </>
+  );
+}