create-interview-cockpit 0.5.0 → 0.7.0

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

@@ -1,4 +1,6 @@
 import { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import {
   X,
   GripVertical,
@@ -25,11 +27,13 @@ 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" | "text" {
+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";
 }
 
@@ -60,7 +64,9 @@ export default function DocRefModal({
 
   // Text mode state
   const [content, setContent] = useState<string | null>(null);
-  const [loading, setLoading] = useState(fileType === "text");
+  const [loading, setLoading] = useState(
+    fileType === "text" || fileType === "md",
+  );
   const [fetchError, setFetchError] = useState<string | null>(null);
   const highlightRef = useRef<HTMLElement | null>(null);
 
@@ -101,10 +107,12 @@ export default function DocRefModal({
   const savedPos = useRef(pos);
   const savedSize = useRef(size);
 
-  // Fetch extracted text — for text files on mount, or for PDFs when text view is activated
+  // Fetch extracted text — for text/md files on mount, or for PDFs when text view is activated
   useEffect(() => {
     const needsText =
-      fileType === "text" || (fileType === "pdf" && pdfViewMode === "text");
+      fileType === "text" ||
+      fileType === "md" ||
+      (fileType === "pdf" && pdfViewMode === "text");
     if (!needsText) return;
     if (content !== null) return; // already loaded, skip re-fetch
     setLoading(true);
@@ -328,8 +336,8 @@ export default function DocRefModal({
           </button>
         </div>
 
-        {/* ── Search bar (PDF + text; hidden for plain images) ── */}
-        {fileType !== "image" && (
+        {/* ── 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"
@@ -433,6 +441,47 @@ export default function DocRefModal({
             </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" && (
             <>

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

@@ -33,11 +33,17 @@ export default function FileAttachments({
 }: 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 = "";
     }
   };
@@ -61,7 +67,7 @@ export default function FileAttachments({
           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
@@ -117,6 +123,11 @@ export default function FileAttachments({
             Link
           </button>
         )}
+        {uploadError && (
+          <span className="text-[10px] text-red-400 ml-1" title={uploadError}>
+            ⚠ {uploadError}
+          </span>
+        )}
       </div>
     );
   }
@@ -139,7 +150,7 @@ export default function FileAttachments({
         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 && (
@@ -183,7 +194,7 @@ export default function FileAttachments({
         </div>
       )}
 
-      <div className="flex items-center gap-3">
+      <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"
@@ -201,6 +212,11 @@ export default function FileAttachments({
             Link existing
           </button>
         )}
+        {uploadError && (
+          <span className="text-xs text-red-400" title={uploadError}>
+            ⚠ {uploadError}
+          </span>
+        )}
       </div>
     </div>
   );