@catandbox/schrodinger-web-adapter 0.1.12 → 0.1.13

package/dist/client/file-upload.d.ts

@@ -0,0 +1,16 @@
+import type { SupportApiClient } from "@catandbox/schrodinger-shopify-adapter/client";
+interface SelectedFile {
+    file: File;
+    id: string;
+}
+interface FileUploadState {
+    files: SelectedFile[];
+    addFiles(fileList: FileList): string | null;
+    removeFile(id: string): void;
+    render(): string;
+    attachListeners(container: HTMLElement): void;
+    hasFiles(): boolean;
+    uploadAll(client: SupportApiClient, ticketId: string, messageId?: string | null): Promise<void>;
+}
+export declare function createFileUpload(): FileUploadState;
+export {};

package/dist/client/file-upload.js

@@ -0,0 +1,166 @@
+const MAX_FILES = 5;
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5 MB
+async function computeSha256(file) {
+    const buffer = await file.arrayBuffer();
+    const hash = await crypto.subtle.digest("SHA-256", buffer);
+    return Array.from(new Uint8Array(hash))
+        .map((b) => b.toString(16).padStart(2, "0"))
+        .join("");
+}
+function formatFileSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+export function createFileUpload() {
+    const files = [];
+    function addFiles(fileList) {
+        for (const file of Array.from(fileList)) {
+            if (files.length >= MAX_FILES) {
+                return `Maximum ${MAX_FILES} files allowed.`;
+            }
+            if (file.size > MAX_FILE_SIZE) {
+                return `"${file.name}" exceeds 5 MB limit.`;
+            }
+            files.push({ file, id: crypto.randomUUID() });
+        }
+        return null;
+    }
+    function removeFile(id) {
+        const idx = files.findIndex((f) => f.id === id);
+        if (idx !== -1)
+            files.splice(idx, 1);
+    }
+    function render() {
+        return `
+      <div>
+        <label style="display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--p-color-text, #202223);">
+          Attachments <span style="font-weight:400; color:var(--p-color-text-subdued, #6d7175);">(optional, up to ${MAX_FILES} files, 5 MB each)</span>
+        </label>
+        <div id="sch-file-list" style="display:flex; flex-direction:column; gap:6px; margin-bottom:8px;">
+          ${files
+            .map((f) => `
+            <div style="display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--p-color-bg-surface-secondary, #f6f6f7); border-radius:6px; font-size:13px;" data-file-id="${f.id}">
+              <svg width="14" height="14" viewBox="0 0 20 20" fill="var(--p-color-icon-subdued, #8c9196)"><path d="M12 4a1 1 0 0 1 1 1v1h2a1 1 0 0 1 1 1v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a1 1 0 0 1 1-1h2V5a1 1 0 0 1 1-1h4zm-1 2H9v1h2V6z"/></svg>
+              <span style="flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">${escapeHtml(f.file.name)}</span>
+              <span style="color:var(--p-color-text-subdued, #6d7175); flex-shrink:0;">${formatFileSize(f.file.size)}</span>
+              <button type="button" class="sch-remove-file" data-file-id="${f.id}"
+                style="background:none; border:none; cursor:pointer; padding:2px; color:var(--p-color-icon-subdued, #8c9196); line-height:0;"
+                title="Remove">
+                <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor"><path d="M6.707 5.293a1 1 0 0 0-1.414 1.414L8.586 10l-3.293 3.293a1 1 0 1 0 1.414 1.414L10 11.414l3.293 3.293a1 1 0 0 0 1.414-1.414L11.414 10l3.293-3.293a1 1 0 0 0-1.414-1.414L10 8.586 6.707 5.293z"/></svg>
+              </button>
+            </div>
+          `)
+            .join("")}
+        </div>
+        ${files.length < MAX_FILES
+            ? `
+          <label for="sch-file-input" style="display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px dashed var(--p-color-border, #c9cccf); border-radius:8px; cursor:pointer; font-size:13px; color:var(--p-color-text-subdued, #6d7175); transition:border-color 0.15s ease, color 0.15s ease;"
+            onmouseover="this.style.borderColor='var(--p-color-border-focus, #2c6ecb)'; this.style.color='var(--p-color-text, #202223)'"
+            onmouseout="this.style.borderColor='var(--p-color-border, #c9cccf)'; this.style.color='var(--p-color-text-subdued, #6d7175)'"
+          >
+            <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M9 12V7.414l-2.293 2.293a1 1 0 0 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L11 7.414V12a1 1 0 1 1-2 0z"/><path d="M4 14a1 1 0 0 1 1 1v1h10v-1a1 1 0 1 1 2 0v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1a1 1 0 0 1 1-1z"/></svg>
+            Add files
+          </label>
+          <input type="file" id="sch-file-input" multiple style="display:none;" />`
+            : ""}
+        <div id="sch-file-error" style="margin-top:6px;"></div>
+        <div id="sch-upload-progress" style="margin-top:6px; display:none;">
+          <div style="display:flex; align-items:center; gap:8px;">
+            <s-spinner size="small"></s-spinner>
+            <s-text variant="bodySm" tone="subdued" id="sch-upload-status">Uploading files...</s-text>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    function attachListeners(container) {
+        const input = container.querySelector("#sch-file-input");
+        if (input) {
+            input.addEventListener("change", () => {
+                if (!input.files || input.files.length === 0)
+                    return;
+                const errorEl = container.querySelector("#sch-file-error");
+                const err = addFiles(input.files);
+                if (err) {
+                    errorEl.innerHTML = `<s-text variant="bodySm" tone="critical">${escapeHtml(err)}</s-text>`;
+                }
+                else {
+                    errorEl.innerHTML = "";
+                }
+                input.value = "";
+                rerender(container);
+            });
+        }
+        container.querySelectorAll(".sch-remove-file").forEach((btn) => {
+            btn.addEventListener("click", () => {
+                const fileId = btn.dataset.fileId;
+                if (fileId) {
+                    removeFile(fileId);
+                    rerender(container);
+                }
+            });
+        });
+    }
+    function rerender(container) {
+        const wrapper = container.querySelector("#sch-file-list")?.parentElement;
+        if (!wrapper)
+            return;
+        wrapper.outerHTML = render();
+        attachListeners(container);
+    }
+    function hasFiles() {
+        return files.length > 0;
+    }
+    async function uploadAll(client, ticketId, messageId) {
+        if (files.length === 0)
+            return;
+        const hashes = await Promise.all(files.map(async (f) => ({
+            file: f.file,
+            sha256: await computeSha256(f.file)
+        })));
+        const initResult = await client.initUploads({
+            ticketId,
+            files: hashes.map((h) => ({
+                filename: h.file.name,
+                mime: h.file.type || "application/octet-stream",
+                sizeBytes: h.file.size,
+                sha256: h.sha256
+            }))
+        });
+        await Promise.all(initResult.uploads.map(async (upload, index) => {
+            const fileData = hashes[index];
+            if (fileData) {
+                await client.putUpload(upload.putUrl, fileData.file);
+            }
+        }));
+        await client.completeUploads({
+            ticketId,
+            uploads: initResult.uploads.map((upload, index) => {
+                const fileData = hashes[index];
+                return {
+                    uploadId: upload.uploadId,
+                    sizeBytes: fileData.file.size,
+                    sha256: fileData.sha256
+                };
+            }),
+            messageId: messageId ?? null
+        });
+    }
+    return {
+        files,
+        addFiles,
+        removeFile,
+        render,
+        attachListeners,
+        hasFiles,
+        uploadAll
+    };
+}
+function escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+}

package/dist/client/new-ticket-form.js

@@ -1,3 +1,4 @@
+import { createFileUpload } from "./file-upload";
 const FIELD_STYLE = [
     "width:100%",
     "padding:10px 12px",
@@ -16,6 +17,7 @@ export function renderNewTicketForm(container, client, categories, emitter) {
     const categoryOptions = categories
         .map((cat) => `<option value="${cat.id}">${escapeHtml(cat.name)}</option>`)
         .join("");
+    const fileUpload = createFileUpload();
     container.innerHTML = `
     <s-card>
       <s-box padding="large">
@@ -67,6 +69,8 @@ export function renderNewTicketForm(container, client, categories, emitter) {
                   placeholder="Tell us what happened, what you expected, and any steps to reproduce..."></textarea>
               </div>
 
+              ${fileUpload.render()}
+
               <div id="sch-form-error"></div>
 
               <div style="display:flex; justify-content:flex-end; gap:8px; padding-top:4px;">
@@ -79,6 +83,7 @@ export function renderNewTicketForm(container, client, categories, emitter) {
       </s-box>
     </s-card>
   `;
+    fileUpload.attachListeners(container);
     const form = container.querySelector("#sch-new-ticket-form");
     container.querySelector("#sch-cancel-btn")?.addEventListener("click", () => {
         emitter.emit("ticket:cancel", undefined);
@@ -105,12 +110,24 @@ export function renderNewTicketForm(container, client, categories, emitter) {
         const submitBtn = container.querySelector("#sch-submit-btn");
         submitBtn.setAttribute("disabled", "true");
         try {
+            const clientMessageId = crypto.randomUUID();
             const ticket = await client.createTicket({
                 title,
                 body,
                 categoryId: categoryId || null,
-                clientMessageId: crypto.randomUUID()
+                clientMessageId
             });
+            if (fileUpload.hasFiles()) {
+                const progressEl = container.querySelector("#sch-upload-progress");
+                if (progressEl)
+                    progressEl.style.display = "block";
+                try {
+                    await fileUpload.uploadAll(client, ticket.id);
+                }
+                catch {
+                    // Ticket was created but uploads failed — still navigate to detail
+                }
+            }
             emitter.emit("ticket:created", ticket.id);
         }
         catch (error) {

package/dist/client/ticket-detail.js

@@ -1,4 +1,5 @@
 import { renderStatusBadge } from "./status-badge";
+import { createFileUpload } from "./file-upload";
 function formatTimestamp(timestamp) {
     const date = new Date(timestamp * 1000);
     const now = new Date();
@@ -94,6 +95,7 @@ export async function renderTicketDetail(container, client, ticketId, emitter) {
                   onfocus="this.style.borderColor='var(--p-color-border-focus, #2c6ecb)'; this.style.outline='none'; this.style.boxShadow='0 0 0 1px var(--p-color-border-focus, #2c6ecb)'"
                   onblur="this.style.borderColor='var(--p-color-border, #c9cccf)'; this.style.boxShadow='none'"
                   placeholder="Write your reply..."></textarea>
+                <div id="sch-reply-files"></div>
                 <div style="display:flex; justify-content:space-between; align-items:center;">
                   <s-button id="sch-close-ticket-btn">Close Ticket</s-button>
                   <s-button variant="primary" id="sch-send-reply-btn">Send Reply</s-button>
@@ -108,6 +110,14 @@ export async function renderTicketDetail(container, client, ticketId, emitter) {
         container.querySelector("#sch-back-btn")?.addEventListener("click", () => {
             emitter.emit("ticket:back", undefined);
         });
+        // Mount file upload for replies
+        let replyFileUpload = null;
+        const replyFilesContainer = container.querySelector("#sch-reply-files");
+        if (replyFilesContainer) {
+            replyFileUpload = createFileUpload();
+            replyFilesContainer.innerHTML = replyFileUpload.render();
+            replyFileUpload.attachListeners(replyFilesContainer);
+        }
         // Send reply
         container.querySelector("#sch-send-reply-btn")?.addEventListener("click", async () => {
             const textarea = container.querySelector("#sch-reply-body");
@@ -118,7 +128,16 @@ export async function renderTicketDetail(container, client, ticketId, emitter) {
             if (btn)
                 btn.setAttribute("disabled", "true");
             try {
-                await client.createReply(ticketId, { body, clientMessageId: crypto.randomUUID() });
+                const clientMessageId = crypto.randomUUID();
+                const message = await client.createReply(ticketId, { body, clientMessageId });
+                if (replyFileUpload?.hasFiles()) {
+                    try {
+                        await replyFileUpload.uploadAll(client, ticketId, message.id);
+                    }
+                    catch {
+                        // Reply created but uploads failed — still re-render
+                    }
+                }
                 await renderTicketDetail(container, client, ticketId, emitter);
             }
             catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catandbox/schrodinger-web-adapter",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",