create-interview-cockpit 0.4.0 → 0.6.0

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

@@ -1,27 +1,49 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import type { ContextFile } from "../types";
-import { Paperclip, X, FileText } from "lucide-react";
+import { Paperclip, X, FileText, Download, Link, Eye } from "lucide-react";
+import FilePickerModal from "./FilePickerModal";
+import { useStore } from "../store";
 
 interface Props {
   files: ContextFile[];
   onUpload: (files: FileList) => Promise<void>;
   onRemove: (fileId: string) => Promise<void>;
+  onLink?: (fileId: string, originalName: string) => Promise<void>;
+  /** URL prefix for downloads, e.g. "/api/topics/abc/context-files" */
+  downloadBase?: string;
   label: string;
   compact?: boolean;
 }
 
+function downloadFile(url: string, filename: string) {
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+}
+
 export default function FileAttachments({
   files,
   onUpload,
   onRemove,
+  onLink,
+  downloadBase,
   label,
   compact,
 }: Props) {
   const inputRef = useRef<HTMLInputElement>(null);
+  const [showPicker, setShowPicker] = useState(false);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+  const openDocViewer = useStore((s) => s.openDocViewer);
 
   const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files?.length) {
-      await onUpload(e.target.files);
+      setUploadError(null);
+      try {
+        await onUpload(e.target.files);
+      } catch (err: any) {
+        setUploadError(err?.message ?? "Upload failed");
+      }
       e.target.value = "";
     }
   };
@@ -29,13 +51,23 @@ export default function FileAttachments({
   if (compact) {
     return (
       <div className="flex items-center gap-1 flex-wrap">
+        {showPicker && onLink && (
+          <FilePickerModal
+            currentFiles={files}
+            onLink={async (fileId, originalName) => {
+              await onLink(fileId, originalName);
+              setShowPicker(false);
+            }}
+            onClose={() => setShowPicker(false)}
+          />
+        )}
         <input
           ref={inputRef}
           type="file"
           multiple
           onChange={handleChange}
           className="hidden"
-          accept=".txt,.md,.ts,.tsx,.js,.jsx,.json,.css,.scss,.html,.xml,.yaml,.yml,.csv,.py,.java,.cs,.go,.rs,.sql,.sh,.toml,.ini,.log,.cfg,.conf,.env,.pdf,.docx"
+          accept="*"
         />
         {files.map((f) => (
           <span
@@ -44,6 +76,27 @@ export default function FileAttachments({
           >
             <FileText className="w-2.5 h-2.5" />
             {f.originalName}
+            <button
+              onClick={() => openDocViewer(f.id, "", f.originalName)}
+              className="hover:text-cyan-300 transition-colors"
+              title="View file"
+            >
+              <Eye className="w-2.5 h-2.5" />
+            </button>
+            {downloadBase && (
+              <button
+                onClick={() =>
+                  downloadFile(
+                    `${downloadBase}/${f.id}/download`,
+                    f.originalName,
+                  )
+                }
+                className="hover:text-cyan-300 transition-colors"
+                title="Download"
+              >
+                <Download className="w-2.5 h-2.5" />
+              </button>
+            )}
             <button
               onClick={() => onRemove(f.id)}
               className="hover:text-red-400 transition-colors"
@@ -60,19 +113,44 @@ export default function FileAttachments({
           <Paperclip className="w-2.5 h-2.5" />
           Attach
         </button>
+        {onLink && (
+          <button
+            onClick={() => setShowPicker(true)}
+            className="inline-flex items-center gap-0.5 text-[10px] text-slate-600 hover:text-cyan-400 transition-colors"
+            title="Link an already-uploaded file"
+          >
+            <Link className="w-2.5 h-2.5" />
+            Link
+          </button>
+        )}
+        {uploadError && (
+          <span className="text-[10px] text-red-400 ml-1" title={uploadError}>
+            ⚠ {uploadError}
+          </span>
+        )}
       </div>
     );
   }
 
   return (
     <div>
+      {showPicker && onLink && (
+        <FilePickerModal
+          currentFiles={files}
+          onLink={async (fileId, originalName) => {
+            await onLink(fileId, originalName);
+            setShowPicker(false);
+          }}
+          onClose={() => setShowPicker(false)}
+        />
+      )}
       <input
         ref={inputRef}
         type="file"
         multiple
         onChange={handleChange}
         className="hidden"
-        accept=".txt,.md,.ts,.tsx,.js,.jsx,.json,.css,.scss,.html,.xml,.yaml,.yml,.csv,.py,.java,.cs,.go,.rs,.sql,.sh,.toml,.ini,.log,.cfg,.conf,.env,.pdf,.docx"
+        accept="*"
       />
 
       {files.length > 0 && (
@@ -84,6 +162,27 @@ export default function FileAttachments({
             >
               <FileText className="w-3 h-3 shrink-0" />
               <span className="truncate flex-1">{f.originalName}</span>
+              <button
+                onClick={() => openDocViewer(f.id, "", f.originalName)}
+                className="shrink-0 hover:text-cyan-300 transition-colors"
+                title="View file"
+              >
+                <Eye className="w-3 h-3" />
+              </button>
+              {downloadBase && (
+                <button
+                  onClick={() =>
+                    downloadFile(
+                      `${downloadBase}/${f.id}/download`,
+                      f.originalName,
+                    )
+                  }
+                  className="shrink-0 hover:text-cyan-300 transition-colors"
+                  title="Download"
+                >
+                  <Download className="w-3 h-3" />
+                </button>
+              )}
               <button
                 onClick={() => onRemove(f.id)}
                 className="shrink-0 hover:text-red-400 transition-colors"
@@ -95,13 +194,30 @@ export default function FileAttachments({
         </div>
       )}
 
-      <button
-        onClick={() => inputRef.current?.click()}
-        className="flex items-center gap-1 text-xs text-slate-600 hover:text-violet-400 transition-colors w-full"
-      >
-        <Paperclip className="w-3 h-3" />
-        Attach files to {label}
-      </button>
+      <div className="flex items-center gap-3 flex-wrap">
+        <button
+          onClick={() => inputRef.current?.click()}
+          className="flex items-center gap-1 text-xs text-slate-600 hover:text-violet-400 transition-colors"
+        >
+          <Paperclip className="w-3 h-3" />
+          Attach files to {label}
+        </button>
+        {onLink && (
+          <button
+            onClick={() => setShowPicker(true)}
+            className="flex items-center gap-1 text-xs text-slate-600 hover:text-cyan-400 transition-colors"
+            title="Link an already-uploaded file"
+          >
+            <Link className="w-3 h-3" />
+            Link existing
+          </button>
+        )}
+        {uploadError && (
+          <span className="text-xs text-red-400" title={uploadError}>
+            ⚠ {uploadError}
+          </span>
+        )}
+      </div>
     </div>
   );
 }

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>
+  );
+}