create-interview-cockpit 0.4.0 → 0.5.0

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

@@ -0,0 +1,181 @@
+import { useState, useEffect } from "react";
+import {
+  X,
+  FileText,
+  Search,
+  Globe,
+  BookOpen,
+  MessageSquare,
+  Link,
+} from "lucide-react";
+import * as api from "../api";
+import type { PickableFile } from "../api";
+import type { ContextFile } from "../types";
+
+interface Props {
+  /** Files already attached to the target — shown as already linked */
+  currentFiles: ContextFile[];
+  onLink: (fileId: string, originalName: string) => Promise<void>;
+  onClose: () => void;
+}
+
+const SOURCE_ICON = {
+  workspace: <Globe className="w-3 h-3 text-violet-400 shrink-0" />,
+  topic: <BookOpen className="w-3 h-3 text-cyan-400 shrink-0" />,
+  question: <MessageSquare className="w-3 h-3 text-slate-400 shrink-0" />,
+};
+
+const SOURCE_LABEL = {
+  workspace: "Workspace",
+  topic: "Topic",
+  question: "Question",
+};
+
+export default function FilePickerModal({
+  currentFiles,
+  onLink,
+  onClose,
+}: Props) {
+  const [files, setFiles] = useState<PickableFile[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [query, setQuery] = useState("");
+  const [linking, setLinking] = useState<string | null>(null);
+
+  const linkedIds = new Set(currentFiles.map((f) => f.id));
+
+  useEffect(() => {
+    api.fetchAllContextFiles().then((f) => {
+      setFiles(f);
+      setLoading(false);
+    });
+  }, []);
+
+  const filtered = files.filter(
+    (f) =>
+      f.originalName.toLowerCase().includes(query.toLowerCase()) ||
+      f.sourceName.toLowerCase().includes(query.toLowerCase()),
+  );
+
+  // Group by source type → source name
+  const groups = new Map<string, PickableFile[]>();
+  for (const f of filtered) {
+    const key = `${f.source}:${f.sourceName}`;
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key)!.push(f);
+  }
+
+  const handleLink = async (f: PickableFile) => {
+    if (linkedIds.has(f.fileId) || linking) return;
+    setLinking(f.fileId);
+    try {
+      await onLink(f.fileId, f.originalName);
+    } finally {
+      setLinking(null);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      onClick={(e) => e.target === e.currentTarget && onClose()}
+    >
+      <div className="bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-full max-w-md max-h-[80vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-slate-800">
+          <div className="flex items-center gap-2">
+            <Link className="w-4 h-4 text-cyan-400" />
+            <span className="text-sm font-semibold text-slate-200">
+              Link Existing File
+            </span>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-slate-500 hover:text-slate-300 transition-colors"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Search */}
+        <div className="px-4 py-2 border-b border-slate-800">
+          <div className="flex items-center gap-2 bg-slate-800 rounded-lg px-2 py-1.5">
+            <Search className="w-3.5 h-3.5 text-slate-500 shrink-0" />
+            <input
+              autoFocus
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search files…"
+              className="flex-1 bg-transparent text-sm text-slate-200 placeholder-slate-600 focus:outline-none"
+            />
+          </div>
+        </div>
+
+        {/* File list */}
+        <div className="overflow-y-auto flex-1 px-2 py-2">
+          {loading && (
+            <p className="text-xs text-slate-500 text-center py-6">Loading…</p>
+          )}
+          {!loading && groups.size === 0 && (
+            <p className="text-xs text-slate-500 text-center py-6">
+              No files found.
+            </p>
+          )}
+          {!loading &&
+            Array.from(groups.entries()).map(([key, items]) => {
+              const [sourceType, sourceName] = key.split(":") as [
+                PickableFile["source"],
+                string,
+              ];
+              return (
+                <div key={key} className="mb-3">
+                  <div className="flex items-center gap-1.5 px-2 py-0.5 mb-1">
+                    {SOURCE_ICON[sourceType]}
+                    <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-500">
+                      {SOURCE_LABEL[sourceType]}: {sourceName}
+                    </span>
+                  </div>
+                  {items.map((f) => {
+                    const alreadyLinked = linkedIds.has(f.fileId);
+                    const isLinking = linking === f.fileId;
+                    return (
+                      <button
+                        key={f.fileId}
+                        onClick={() => handleLink(f)}
+                        disabled={alreadyLinked || !!linking}
+                        className={`w-full flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors ${
+                          alreadyLinked
+                            ? "text-slate-600 cursor-default"
+                            : "text-slate-300 hover:bg-slate-800 cursor-pointer"
+                        }`}
+                      >
+                        <FileText className="w-3.5 h-3.5 shrink-0 text-violet-400" />
+                        <span className="truncate flex-1 text-left">
+                          {f.originalName}
+                        </span>
+                        {alreadyLinked && (
+                          <span className="text-[10px] text-slate-600 shrink-0">
+                            linked
+                          </span>
+                        )}
+                        {isLinking && (
+                          <span className="text-[10px] text-cyan-500 shrink-0">
+                            linking…
+                          </span>
+                        )}
+                      </button>
+                    );
+                  })}
+                </div>
+              );
+            })}
+        </div>
+
+        <div className="px-4 py-2 border-t border-slate-800">
+          <p className="text-[10px] text-slate-600">
+            Linked files share content with the original — no re-upload needed.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}