openclacky 1.5.13 → 1.5.14

data/lib/clacky/web/components/code-editor.js

@@ -17,24 +17,208 @@
   const LANG_MAP = {
     markdown: () => CM.markdown({ base: CM.markdownLanguage }),
     md:       () => CM.markdown({ base: CM.markdownLanguage }),
+    python:   () => CM.python(),
+    javascript: () => CM.javascript(),
+    jsx:      () => CM.jsx(),
+    typescript: () => CM.typescript(),
+    tsx:      () => CM.tsx(),
+    html:     () => CM.html(),
+    css:      () => CM.css(),
+    json:     () => CM.json(),
+    sql:      () => CM.sql(),
+    xml:      () => CM.xml(),
+    rust:     () => CM.rust(),
+    java:     () => CM.java(),
+    cpp:      () => CM.cpp(),
+    php:      () => CM.php(),
+    ruby:     () => CM.ruby(),
+    go:       () => CM.go(),
+    shell:    () => CM.shell(),
+    yaml:     () => CM.yaml(),
+    toml:     () => CM.toml(),
+    dockerfile: () => CM.dockerfile(),
+  };
+
+  // Extension → language id. Keyed by lowercase extension (no leading dot).
+  const EXT_LANG = {
+    md: "markdown", markdown: "markdown", mdx: "markdown",
+    py: "python", pyw: "python",
+    js: "javascript", mjs: "javascript", cjs: "javascript",
+    jsx: "jsx",
+    ts: "typescript", mts: "typescript", cts: "typescript",
+    tsx: "tsx",
+    html: "html", htm: "html",
+    css: "css",
+    json: "json", jsonc: "json",
+    sql: "sql",
+    xml: "xml", svg: "xml", xsd: "xml", xsl: "xml", plist: "xml",
+    rs: "rust",
+    java: "java",
+    c: "cpp", h: "cpp", cpp: "cpp", cc: "cpp", cxx: "cpp", hpp: "cpp", hxx: "cpp", hh: "cpp",
+    php: "php", php3: "php", php4: "php", php5: "php", phtml: "php",
+    rb: "ruby", rbw: "ruby", gemspec: "ruby", rake: "ruby", ru: "ruby",
+    go: "go",
+    sh: "shell", bash: "shell", zsh: "shell", ksh: "shell",
+    yaml: "yaml", yml: "yaml",
+    toml: "toml",
+    vue: "html", svelte: "html",
+  };
+
+  // Whole filename (no extension) → language id.
+  const FILENAME_LANG = {
+    dockerfile: "dockerfile",
+    gemfile: "ruby", rakefile: "ruby", vagrantfile: "ruby", guardfile: "ruby",
+    podfile: "ruby", berksfile: "ruby", brewfile: "ruby",
   };
 
   const IMAGE_EXTS  = new Set(["png","jpg","jpeg","gif","bmp","webp","svg","ico","tiff","tif","avif"]);
-  const BINARY_EXTS = new Set(["zip","gz","7z","tar","dmg","pdf","xls","xlsx","doc","docx","exe","rar","ttf","mov","mp4","mp3","db","db3","sqlite","sqlite3","dat","wasm","bin","so","dylib","dll"]);
+  const PDF_EXTS    = new Set(["pdf"]);
+  const BINARY_EXTS = new Set([
+    // archives
+    "zip","gz","7z","tar","dmg","rar","tgz","iso","jar","war",
+    // office docs (previewed via the "open with app" fallback instead)
+    "xls","xlsx","doc","docx","ppt","pptx","pot","pps","ppsx","dot",
+    "odt","ods","odp","wps","et","dps","key","numbers","pages",
+    // media
+    "mov","mp4","mp3","avi","mkv","wmv","weba","flac","wav","m4a","aac","aiff",
+    // fonts
+    "ttf","otf","woff","woff2","eot",
+    // system / misc
+    "exe","msi","db","db3","sqlite","sqlite3","dat","wasm","bin","so","dylib","dll",
+    "class","pyc","psd","ai","eps","indd","sketch","fig",
+  ]);
+
+  // Sample size matches the server-side 512-byte sniff; the ratio tolerates a
+  // few stray replacement chars in otherwise valid text.
+  const SNIFF_SAMPLE_CHARS = 512;
+  const SNIFF_REPLACEMENT_RATIO = 0.1;
+
+  const TABLE_EXTS = new Set(["csv","tsv"]);
+
+  // Rendering a full <table> forces the browser to lay out every cell to resolve
+  // column widths, so cost grows with cells rather than lines. Measured in Chrome:
+  // 1000x20 (20k cells) ~73ms, 3000x20 (60k cells) ~231ms.
+  const TABLE_MAX_ROWS = 1000;
+  const TABLE_MAX_CELLS = 50000;
 
   function _fileKind(filename) {
     if (!filename) return "text";
     const ext = filename.split(".").pop().toLowerCase();
     if (IMAGE_EXTS.has(ext))  return "image";
+    if (PDF_EXTS.has(ext))   return "pdf";
     if (BINARY_EXTS.has(ext)) return "binary";
+    if (TABLE_EXTS.has(ext))  return "table";
     return "text";
   }
 
+  // BINARY_EXTS can only list what we thought of, so unlisted binaries still
+  // reach the text branch and render as noise. Mirrors the server-side sniff in
+  // Utils::FileProcessor.binary_file_path?: a NUL byte means "not text". Decoding
+  // already turned invalid sequences into U+FFFD, so a high density of those is
+  // the same signal for encodings that carry no NUL.
+  function _looksBinary(text) {
+    if (!text) return false;
+    const head = text.slice(0, SNIFF_SAMPLE_CHARS);
+    if (head.indexOf("\u0000") >= 0) return true;
+    let replacements = 0;
+    for (let i = 0; i < head.length; i++) {
+      if (head.charCodeAt(i) === 0xFFFD) replacements++;
+    }
+    return replacements / head.length > SNIFF_REPLACEMENT_RATIO;
+  }
+
+  function _tableDelimiter(filename) {
+    const ext = (filename || "").split(".").pop().toLowerCase();
+    return ext === "tsv" ? "\t" : ",";
+  }
+
+  // RFC 4180: quoted fields may contain the delimiter, newlines and "" escapes.
+  function _parseDelimited(text, delimiter, maxRows) {
+    const rows = [];
+    let row = [];
+    let field = "";
+    let quoted = false;
+    let i = 0;
+    const limit = typeof maxRows === "number" ? maxRows : Infinity;
+
+    const endRow = () => {
+      row.push(field);
+      field = "";
+      rows.push(row);
+      row = [];
+    };
+
+    while (i < text.length) {
+      const ch = text[i];
+      if (quoted) {
+        if (ch === '"') {
+          if (text[i + 1] === '"') { field += '"'; i += 2; continue; }
+          quoted = false; i++; continue;
+        }
+        field += ch; i++; continue;
+      }
+      if (ch === '"' && field === "") { quoted = true; i++; continue; }
+      if (ch === delimiter) { row.push(field); field = ""; i++; continue; }
+      if (ch === "\r") { i += text[i + 1] === "\n" ? 2 : 1; endRow(); if (rows.length >= limit) return rows; continue; }
+      if (ch === "\n") { i++; endRow(); if (rows.length >= limit) return rows; continue; }
+      field += ch; i++;
+    }
+    if (field !== "" || row.length) endRow();
+    return rows;
+  }
+
+  // Returns { table, rows, cols, truncated }. Cells are set via textContent so
+  // untrusted file data can never be interpreted as markup.
+  function _renderTable(text, filename) {
+    const delimiter = _tableDelimiter(filename);
+    const rows = _parseDelimited(text, delimiter, TABLE_MAX_ROWS + 1);
+
+    let truncated = rows.length > TABLE_MAX_ROWS;
+    if (truncated) rows.length = TABLE_MAX_ROWS;
+
+    const cols = rows.reduce((max, r) => (r.length > max ? r.length : max), 0);
+    if (cols > 0) {
+      const maxRowsByCells = Math.max(1, Math.floor(TABLE_MAX_CELLS / cols));
+      if (rows.length > maxRowsByCells) {
+        rows.length = maxRowsByCells;
+        truncated = true;
+      }
+    }
+
+    const table = document.createElement("table");
+    if (rows.length) {
+      const thead = document.createElement("thead");
+      const headTr = document.createElement("tr");
+      rows[0].forEach((cell) => {
+        const th = document.createElement("th");
+        th.textContent = cell;
+        headTr.appendChild(th);
+      });
+      thead.appendChild(headTr);
+      table.appendChild(thead);
+
+      const tbody = document.createElement("tbody");
+      for (let r = 1; r < rows.length; r++) {
+        const tr = document.createElement("tr");
+        for (let c = 0; c < cols; c++) {
+          const td = document.createElement("td");
+          td.textContent = rows[r][c] == null ? "" : rows[r][c];
+          tr.appendChild(td);
+        }
+        tbody.appendChild(tr);
+      }
+      table.appendChild(tbody);
+    }
+    return { table: table, rows: rows.length, cols: cols, truncated: truncated };
+  }
+
   function _detectLanguage(filename) {
     if (!filename) return null;
-    const ext = filename.split(".").pop().toLowerCase();
-    const map = { md: "markdown", markdown: "markdown" };
-    return map[ext] || null;
+    const base = filename.split(/[\\/]/).pop().toLowerCase();
+    if (FILENAME_LANG[base]) return FILENAME_LANG[base];
+    const dot = base.lastIndexOf(".");
+    if (dot < 0) return null;
+    return EXT_LANG[base.slice(dot + 1)] || null;
   }
 
   function _isDark() {
@@ -76,7 +260,7 @@
       extensions.push(CM.oneDark);
     }
 
-    const langFn = LANG_MAP[opts.language || "markdown"];
+    const langFn = opts.language ? LANG_MAP[opts.language] : null;
     if (langFn) extensions.push(langFn());
 
     if (opts.readOnly) {
@@ -261,7 +445,9 @@
     open,
     createInline,
     fileKind: _fileKind,
+    looksBinary: _looksBinary,
     detectLanguage: _detectLanguage,
     renderMarkdown: _renderMarkdownHtml,
+    renderTable: _renderTable,
   };
 })(window);

data/lib/clacky/web/components/model-picker.js

@@ -36,7 +36,8 @@ const ModelPicker = (() => {
       svg: '<path d="M16.5376 0.0307374L14.3326 3.13223C14.1617 3.37577 13.9331 3.57415 13.6667 3.71001C13.4004 3.84586 13.1045 3.91504 12.8048 3.9115H0.787598V0.015152H16.5376V0.0307374Z"/><path d="M31.5 0.0321655L12.6 26.5273H0L18.9 0.0321655H31.5Z"/><path d="M14.9624 26.5272L17.1832 23.4101C17.3564 23.1689 17.5856 22.9723 17.8513 22.8368C18.1171 22.7012 18.4119 22.6306 18.7109 22.6308H30.7124V26.5272H14.9624Z"/>' },
     { re: /gemini/i,             label: "G", color: "#3B78E7",
       svg: '<path d="M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81"/>' },
-    { re: /gpt|openai/i,         label: "O", color: "#10A37F" },
+    { re: /gpt|openai/i,         label: "G", color: "#000",
+      svg: '<path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"/>' },
     { re: /minimax/i,            label: "M", color: "#F2402A",
       svg: '<path style="fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round" d="M4 9.5V14.5M8 6V18M12 3V21M16 6V18M20 9.5V14.5"/>' },
     { re: /qwen|tongyi/i,        label: "Q", color: "#615CED" },

data/lib/clacky/web/components/quote-select.js

@@ -0,0 +1,235 @@
+// ── quote-select.js — Quote-on-selection ────────────────────────────────────
+//
+// Drag-select text inside any user or assistant message bubble; a floating
+// "Quote" pill appears above the selection. Clicking it appends the selected
+// text to the composer as a markdown blockquote with a provenance line:
+//
+//   > [Assistant · #3]
+//   > selected text…
+//
+// Pure frontend: the quote is plain text in the composer and rides the
+// existing WS message pipeline unchanged (no backend/protocol changes).
+//
+// Event bindings are delegation-style on document, so they survive history
+// lazy-loading and streaming DOM rebuilds. The button itself is a single
+// recycled element, created lazily and hidden when any selection dies.
+
+const QuoteSelect = (() => {
+  let _btn = null;     // floating quote button (lazily created, recycled)
+  let _snap = null;    // selection snapshot captured when the button appears
+  let _pending = null; // mouseup validation timer
+
+  // ── DOM helpers ──────────────────────────────────────────────────────────
+  // Nearest message root: .msg-user-wrap (user) or .msg-assistant. Returns
+  // null when the node is outside any quotable message (e.g. composer, modal).
+  function _msgRoot(node) {
+    if (!node || node.nodeType === Node.DOCUMENT_NODE) return null;
+    const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+    if (!el) return null;
+    return el.closest(".msg-user-wrap, .msg-assistant");
+  }
+
+  // Message role + 1-based chat index, counted among quoted messages only
+  // (user / assistant), so index stays consistent with rendered history.
+  function _msgMeta(root) {
+    const items = root.parentElement.querySelectorAll(
+      ":scope > .msg-user-wrap, :scope > .msg-assistant"
+    );
+    return {
+      role:  root.classList.contains("msg-user-wrap") ? "user" : "assistant",
+      index: Array.prototype.indexOf.call(items, root) + 1,
+    };
+  }
+
+  // ── Text cleaning ────────────────────────────────────────────────────────
+  // Normalize raw selection text into quote lines: strip leading/trailing
+  // blank lines, collapse consecutive blanks inside, keep each line's
+  // trailing whitespace trimmed.
+  function _cleanLines(raw) {
+    const lines = String(raw || "").replace(/\r\n/g, "\n").split("\n");
+    while (lines.length && !lines[0].trim()) lines.shift();
+    while (lines.length && !lines[lines.length - 1].trim()) lines.pop();
+    const out = [];
+    for (const line of lines) {
+      if (!line.trim()) {
+        if (!out.length || out[out.length - 1] !== "") out.push("");
+      } else {
+        out.push(line.replace(/\s+$/, ""));
+      }
+    }
+    return out;
+  }
+
+  // Build the markdown blockquote inserted into the composer (方案 B).
+  function _buildBlock(snap) {
+    const roleWord = snap.role === "user"
+      ? I18n.t("chat.quote.roleUser")
+      : I18n.t("chat.quote.roleAssistant");
+    const sig = I18n.t("chat.quote.sig", { role: roleWord, index: snap.index });
+    const body = _cleanLines(snap.text).map(line => {
+      if (!line) return ">";                 // keep paragraph gaps inside the quote
+      return line.startsWith(">") ? line : "> " + line;
+    });
+    if (!body.length) return "";
+    return "> [" + sig + "]\n" + body.join("\n");
+  }
+
+  // ── Button lifecycle ─────────────────────────────────────────────────────
+  function _createBtn() {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "quote-select-btn";
+    btn.disabled = false;
+    btn.innerHTML =
+      `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6H3"/><path d="M21 12H8"/><path d="M21 18H8"/><path d="M3 12v6"/></svg>` +
+      `<span>${escapeHtml(I18n.t("chat.quote.btn"))}</span>`;
+    // Keep the textarea focus / selection alive: a bare mousedown on a button
+    // collapses the selection before click fires.
+    btn.addEventListener("mousedown", e => e.preventDefault());
+    btn.addEventListener("click", _onQuoteClick);
+    document.body.appendChild(btn);
+    return btn;
+  }
+
+  function _show(rect) {
+    if (!_btn) _btn = _createBtn();
+    // The button is a single recycled element — when it was first created it
+    // baked in the language of that moment. Sync the label with the current
+    // language on every show so switching en/zh mid-session stays consistent.
+    // (textContent assignment, no escaping needed.)
+    const labelQ = _btn.querySelector("span");
+    if (labelQ) labelQ.textContent = I18n.t("chat.quote.btn");
+    // The button is display:none until visible — measuring its rect while
+    // hidden returns 0×0, which would misplace it by its own height. Make it
+    // visible first, then measure and position (all synchronous, no flicker).
+    _btn.classList.add("visible");
+    const btnRect = _btn.getBoundingClientRect();
+    let top = rect.top - btnRect.height - 10;   // 10px above the selection
+    if (top < 8) top = rect.bottom + 10;        // flip below when clipped at top
+    _btn.style.top = top + "px";
+    // Horizontal center of the selection; CSS translateX(-50%) finishes it.
+    _btn.style.left = (rect.left + rect.width / 2) + "px";
+  }
+
+  function _hide() {
+    if (_pending) { clearTimeout(_pending); _pending = null; }
+    if (_btn) _btn.classList.remove("visible");
+    _snap = null;
+  }
+
+  // ── Quote action ─────────────────────────────────────────────────────────
+  function _onQuoteClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!_snap) return _hide();
+    const block = _buildBlock(_snap);
+    _hide();
+    if (block) _insert(block);
+  }
+
+  // Append the blockquote to the composer: keep any existing draft and
+  // mention chips (we append — never overwrite), ensure a blank line separates
+  // it, leave the caret on a fresh line after the quote.
+  // Composer is a contenteditable div since v1.5.13 (Clacky.Composer); the
+  // textarea branch is a fallback for older builds / custom templates.
+  // Append plain text to the composer's end, after any existing content and
+  // mention chips (chips are contenteditable=false nodes — appending at the
+  // very end naturally preserves them). Newlines become <br>. Works without a
+  // focused caret, so it is deterministic in headless environments where
+  // execCommand / focus-based insertion silently no-ops.
+  function _appendToComposer(el, str) {
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    range.collapse(false);
+    const frag = document.createDocumentFragment();
+    String(str).split("\n").forEach((line, i) => {
+      if (i > 0) frag.appendChild(document.createElement("br"));
+      if (line !== "") frag.appendChild(document.createTextNode(line));
+    });
+    range.insertNode(frag);
+  }
+
+  function _insert(block) {
+    const el = document.getElementById("user-input");
+    if (!el) return;
+    const api = (typeof Clacky !== "undefined" && Clacky.Composer) || null;
+
+    if (api) {
+      const cur = api.text(el);
+      let prefix = "";
+      if (cur.length > 0 && !cur.endsWith("\n\n")) {
+        prefix = cur.endsWith("\n") ? "\n" : "\n\n";
+      }
+      _appendToComposer(el, prefix + block + "\n");
+      api.focusEnd(el);
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+      return;
+    }
+
+    if (el.tagName === "TEXTAREA") {
+      let v = el.value || "";
+      if (v.length > 0 && !v.endsWith("\n\n")) {
+        v += v.endsWith("\n") ? "\n" : "\n\n";
+      }
+      v += block + "\n";
+      el.value = v;
+      el.focus();
+      el.setSelectionRange(v.length, v.length);
+    }
+  }
+
+  // ── Selection validation ─────────────────────────────────────────────────
+  // Runs 60ms after mouseup/touchend so the browser has finished updating the
+  // selection (dbl-click word selection, drag end, etc.).
+  function _onMouseUp() {
+    if (_pending) clearTimeout(_pending);
+    _pending = setTimeout(_validate, 60);
+  }
+
+  function _validate() {
+    _pending = null;
+    const sel = window.getSelection();
+    if (!sel || sel.isCollapsed || sel.rangeCount < 1) return _hide();
+    const range = sel.getRangeAt(0);
+    const r1 = _msgRoot(range.startContainer);
+    const r2 = _msgRoot(range.endContainer);
+    if (!r1 || r1 !== r2) return _hide();          // cross-message selection: no unique provenance
+    const messages = document.getElementById("messages");
+    if (!messages || !messages.contains(r1)) return _hide();
+
+    const text = sel.toString().trim();
+    if (!text) return _hide();
+
+    _snap = Object.assign({ text }, _msgMeta(r1), { rect: range.getBoundingClientRect() });
+    _show(_snap.rect);
+  }
+
+  function _onDocMouseDown(e) {
+    if (_btn && e.target !== _btn && !_btn.contains(e.target)) _hide();
+  }
+
+  // ── Init ─────────────────────────────────────────────────────────────────
+  let _inited = false; // guard against double init (listener stacking)
+  function init() {
+    if (_inited) return;
+    _inited = true;
+    document.addEventListener("mouseup", _onMouseUp);
+    document.addEventListener("touchend", _onMouseUp);
+    document.addEventListener("mousedown", _onDocMouseDown);
+    document.addEventListener("scroll", _hide, true); // any scroll collides with the anchor
+    document.addEventListener("keydown", e => { if (e.key === "Escape") _hide(); });
+    window.addEventListener("resize", _hide);
+
+    // Streaming rewrites message DOM wholesale; a detached selection cannot
+    // anchor the button anymore, so hide whenever the message list mutates.
+    const messages = document.getElementById("messages");
+    if (messages && typeof MutationObserver !== "undefined") {
+      new MutationObserver(() => { if (_snap) _hide(); }).observe(messages, {
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+
+  return { init };
+})();