@takagaki/cortex-decisions-viewer 0.4.14 → 0.4.16

package/dist/render.js

@@ -371,9 +371,26 @@ button.ops-card-btn:disabled { opacity: .6; cursor: default; }
 }
 .modal-cancel:hover { background: var(--bg); }
 .modal-ok { color: #047857; font-weight: 600; }
+.modal-status-error { color: #dc2626; font-weight: 600; }
 .modal-paths { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
 .modal-paths-label { font-size: 12px; color: var(--muted); }
 .modal-path { font-size: 12.5px; word-break: break-all; color: var(--accent); }
+/* ドラッグ&ドロップ */
+.modal-file-hidden { display: none; }
+.dropzone {
+  border: 2px dashed var(--border); border-radius: 10px; padding: 22px 16px; text-align: center;
+  cursor: pointer; color: var(--muted); font-size: 13px; background: var(--bg); transition: border-color .15s, background .15s, color .15s;
+}
+.dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-weak); color: var(--accent); }
+.dropzone-text { pointer-events: none; }
+.dropzone-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: center; }
+.file-chip {
+  display: inline-flex; align-items: center; gap: 6px; background: var(--surface);
+  border: 1px solid var(--border); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 12px; color: var(--text); max-width: 100%;
+}
+.file-chip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
+.file-chip-x { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 4px; }
+.file-chip-x:hover { color: #dc2626; }
 .summary-box { background: var(--accent-weak); border: 1px solid #dce6fb; border-radius: var(--radius); padding: 12px 16px; color: #1e3a8a; }
 .deciders { display: flex; flex-wrap: wrap; gap: 8px; }
 .refs { margin: 0; padding-left: 18px; }
@@ -664,40 +681,81 @@ const CLIENT_JS = `
     var modal = el("div", { class: "modal" });
     modal.appendChild(el("h2", { class: "modal-title", text: isT ? "会議の文字起こしを追加" : "共有資料を追加" }));
     modal.appendChild(el("p", { class: "modal-desc", text: isT
-      ? "文字起こしファイル（.txt / .docx 等）を選んで送信すると、議事録を自動生成します。"
-      : "資料ファイル（PDF / PPT / Excel 等）を選んで送信すると、Markdown 化して取り込みます。" }));
-    var fileInput = el("input", { type: "file", multiple: "multiple", class: "modal-file" });
+      ? "文字起こしファイル（テキスト・Word・PDF・字幕 等）を選んで送信してください。（送信後、数分で議事録が自動生成されます）"
+      : "資料ファイル（PDF・Word・PowerPoint・Excel・テキスト・画像 等）を選んで送信してください。（送信後、数分で内容が Markdown に変換されて取り込まれます）" }));
+
+    var selectedFiles = [];
+    var allowedExt = isT
+      ? { txt: 1, md: 1, docx: 1, doc: 1, rtf: 1, pdf: 1, vtt: 1, srt: 1 }
+      : { pdf: 1, docx: 1, doc: 1, pptx: 1, ppt: 1, xlsx: 1, xls: 1, csv: 1, txt: 1, md: 1, rtf: 1, png: 1, jpg: 1, jpeg: 1, gif: 1, webp: 1, svg: 1, bmp: 1, heic: 1, tiff: 1 };
+    var allowedLabel = isT ? "テキスト・Word・PDF・字幕(.vtt/.srt)" : "PDF・Word・PowerPoint・Excel・テキスト・画像";
+    function extOf(name) { var m = String(name).toLowerCase().match(/\.([a-z0-9]+)$/); return m ? m[1] : ""; }
+    var fileInput = el("input", { type: "file", multiple: "multiple", class: "modal-file-hidden" });
+    var fileListEl = el("div", { class: "dropzone-files" });
+    var dropzone = el("div", { class: "dropzone" }, [
+      el("div", { class: "dropzone-text", text: "📄 ファイルをドラッグ＆ドロップ、またはクリックして選択" }),
+      fileListEl,
+      fileInput,
+    ]);
     var nameInput = el("input", { type: "text", class: "modal-name", placeholder: "投入者として記録されます" });
-    modal.appendChild(fieldRow("ファイル（必須）", fileInput));
+    modal.appendChild(fieldRow("ファイル（必須）", dropzone));
     modal.appendChild(fieldRow("お名前（必須）", nameInput));
     var status = el("div", { class: "modal-status" });
     var cancelBtn = el("button", { class: "modal-cancel", text: "閉じる" });
     var submitBtn = el("button", { class: "ops-card-btn", text: "送信" });
+    submitBtn.disabled = true;
     modal.appendChild(status);
     modal.appendChild(el("div", { class: "modal-actions" }, [cancelBtn, submitBtn]));
     overlay.appendChild(modal);
     document.body.appendChild(overlay);
+
+    function showStatus(msg, isError) { status.className = "modal-status" + (isError ? " modal-status-error" : ""); status.textContent = msg; }
+    function update() { submitBtn.disabled = !(nameInput.value.trim() && selectedFiles.length); }
+    function renderFiles() {
+      fileListEl.textContent = "";
+      selectedFiles.forEach(function (f, idx) {
+        var x = el("button", { class: "file-chip-x", type: "button", text: "×" });
+        x.addEventListener("click", function (e) { e.stopPropagation(); selectedFiles.splice(idx, 1); renderFiles(); update(); });
+        fileListEl.appendChild(el("span", { class: "file-chip" }, [el("span", { text: f.name }), x]));
+      });
+    }
+    function addFiles(list) {
+      var rejected = [];
+      Array.prototype.slice.call(list || []).forEach(function (f) {
+        var ext = extOf(f.name);
+        if (!ext || !allowedExt[ext]) { rejected.push(f.name); return; }
+        selectedFiles.push(f);
+      });
+      renderFiles();
+      update();
+      if (rejected.length) showStatus("⚠ 対応していない形式のため追加できませんでした: " + rejected.join(", ") + "（対応形式: " + allowedLabel + "）", true);
+      else showStatus("", false);
+    }
+    dropzone.addEventListener("click", function () { fileInput.click(); });
+    fileInput.addEventListener("change", function () { addFiles(fileInput.files); fileInput.value = ""; });
+    dropzone.addEventListener("dragover", function (e) { e.preventDefault(); dropzone.classList.add("dragover"); });
+    dropzone.addEventListener("dragleave", function () { dropzone.classList.remove("dragover"); });
+    dropzone.addEventListener("drop", function (e) { e.preventDefault(); dropzone.classList.remove("dragover"); addFiles(e.dataTransfer.files); });
+    nameInput.addEventListener("input", update);
+
     function close() { if (overlay.parentNode) document.body.removeChild(overlay); }
     cancelBtn.addEventListener("click", close);
     overlay.addEventListener("click", function (e) { if (e.target === overlay) close(); });
-    submitBtn.addEventListener("click", function () {
-      submitIntake(kind, fileInput.files, nameInput.value, status, submitBtn);
-    });
+    submitBtn.addEventListener("click", function () { submitIntake(kind, selectedFiles, nameInput.value, status, submitBtn); });
   }
-  async function submitIntake(kind, fileList, submitter, status, submitBtn) {
+  async function submitIntake(kind, files, submitter, status, submitBtn) {
     var intake = SITE.intake;
-    var files = fileList ? Array.prototype.slice.call(fileList) : [];
-    // 必須: お名前 と ファイル
-    if (!submitter || !submitter.trim()) { status.textContent = "⚠ お名前を入力してください。"; return; }
-    if (!files.length) { status.textContent = "⚠ ファイルを選択してください。"; return; }
+    function setStatus(msg, isError) { status.className = "modal-status" + (isError ? " modal-status-error" : ""); status.textContent = msg; }
+    if (!submitter || !submitter.trim()) { setStatus("⚠ お名前を入力してください。", true); return; }
+    if (!files || !files.length) { setStatus("⚠ ファイルを選択してください。", true); return; }
     submitBtn.disabled = true;
     var pfx = intake.url + (intake.url.indexOf("?") === -1 ? "?" : "&");
-    function fail(msg) { status.textContent = "✗ " + msg; submitBtn.disabled = false; }
+    function fail(msg) { setStatus("✗ " + msg, true); submitBtn.disabled = false; }
     try {
       var uploaded = [];
       for (var i = 0; i < files.length; i++) {
         var f = files[i];
-        status.textContent = "アップロード中… (" + (i + 1) + "/" + files.length + ") " + f.name;
+        setStatus("アップロード中… (" + (i + 1) + "/" + files.length + ") " + f.name, false);
         var pres;
         try {
           pres = await fetch(pfx + "op=presign&t=" + encodeURIComponent(intake.token), {
@@ -713,7 +771,7 @@ const CLIENT_JS = `
         if (!put.ok) return fail("ファイルのアップロードに失敗しました（" + put.status + "）。ファイルのサイズ・形式をご確認ください。");
         uploaded.push({ key: pres.j.key, filename: f.name });
       }
-      status.textContent = "取り込み中…";
+      setStatus("取り込み中…", false);
       var sub;
       try {
         sub = await fetch(pfx + "op=submit&t=" + encodeURIComponent(intake.token), {
@@ -722,8 +780,9 @@ const CLIENT_JS = `
         }).then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); });
       } catch (net3) { return fail("サーバーに接続できませんでした。もう一度お試しください。"); }
       if (!sub.ok) return fail((sub.j && sub.j.message) || "取り込みに失敗しました。時間をおいて再度お試しください。");
+      status.className = "modal-status";
       status.textContent = "";
-      status.appendChild(el("div", { class: "modal-ok", text: "✓ 送信しました。数分後に" + (kind === "transcript" ? "議事録" : "資料") + "が反映されます。" }));
+      status.appendChild(el("div", { class: "modal-ok", text: "✓ 送信しました。数分後に" + (kind === "transcript" ? "議事録が自動生成され" : "内容がMarkdownに変換されて") + "反映されます。" }));
       var paths = (sub.j && sub.j.committed) || [];
       if (paths.length && sub.j.repo) {
         var br = SITE.branch || "main";
@@ -735,6 +794,7 @@ const CLIENT_JS = `
         status.appendChild(box);
       }
       submitBtn.textContent = "完了";
+      submitBtn.disabled = true;
     } catch (e) {
       fail(e && e.message ? e.message : "予期しないエラーが発生しました。");
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takagaki/cortex-decisions-viewer",
-  "version": "0.4.14",
+  "version": "0.4.16",
   "description": "Cortexの意思決定記録（Decisions/*.md）を静的サイトにビルドして閲覧する。各レコードに「Edit on GitHub」リンクを付与する。",
   "license": "UNLICENSED",
   "private": false,