@spektra-cloudevents/application-copilot-widget 1.0.0 → 1.2.0

package/dist/index.cjs

@@ -77,7 +77,7 @@ var widgetStyles = `
 /* Panel */
 .acw-panel {
   position: fixed; right: 24px; bottom: 96px; z-index: 2147483000;
-  width: 410px; max-width: calc(100vw - 48px); height: 580px; max-height: calc(100vh - 130px);
+  width: 480px; max-width: calc(100vw - 48px); height: 660px; max-height: calc(100vh - 120px);
   display: none; flex-direction: column;
   background: var(--acw-bg); color: var(--acw-fg);
   border: 1px solid var(--acw-border); border-radius: 16px; overflow: hidden;
@@ -135,6 +135,26 @@ var widgetStyles = `
 .acw-input:focus { outline: 2px solid var(--acw-accent); outline-offset: 0; }
 .acw-send { border: none; border-radius: 10px; padding: 0 16px; background: var(--acw-accent); color: #fff; cursor: pointer; font-size: 14px; font-family: inherit; }
 .acw-send:hover { background: var(--acw-accent-dark); }
+
+/* Support-ticket draft card */
+.acw-ticket { background: var(--acw-bg); border: 1px solid var(--acw-border); border-radius: 12px; padding: 14px; margin: 12px 0; border-left: 4px solid var(--acw-accent); }
+.acw-ticket-title { font-size: 15px; font-weight: 600; color: var(--acw-fg); margin: 0 0 4px; }
+.acw-ticket-sub { font-size: 12px; color: var(--acw-muted); margin: 0 0 10px; }
+.acw-ticket-label { display: block; font-size: 12px; font-weight: 600; color: var(--acw-muted); margin: 12px 0 5px; }
+.acw-ticket-input, .acw-ticket-desc {
+  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px;
+  padding: 10px 12px; border: 1px solid var(--acw-border); border-radius: 10px;
+  color: var(--acw-fg); background: var(--acw-bg);
+}
+.acw-ticket-desc { resize: vertical; min-height: 170px; line-height: 1.5; }
+.acw-ticket-input:focus, .acw-ticket-desc:focus { outline: 2px solid var(--acw-accent); outline-offset: 0; }
+.acw-ticket-actions { display: flex; gap: 10px; margin-top: 14px; }
+.acw-btn-primary { border: none; border-radius: 10px; padding: 10px 20px; cursor: pointer; background: var(--acw-accent); color: #fff; font-size: 14px; font-weight: 600; font-family: inherit; }
+.acw-btn-primary:hover { background: var(--acw-accent-dark); }
+.acw-btn-ghost { border: 1px solid var(--acw-border); border-radius: 10px; padding: 10px 16px; cursor: pointer; background: var(--acw-bg); color: var(--acw-fg); font-size: 14px; font-family: inherit; }
+.acw-btn-ghost:hover { background: #f0eefe; }
+.acw-link-btn { margin-top: 8px; border: none; background: transparent; color: var(--acw-accent); font-size: 12px; font-family: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
+.acw-link-btn:hover { color: var(--acw-accent-dark); }
 `;
 
 // src/widget.ts
@@ -146,10 +166,15 @@ var PROGRESS_LABELS = {
 };
 var CopilotWidget = class {
   constructor() {
+    this.lastQuestion = "";
     this.mode = "explain";
   }
   init(config) {
     this.config = config;
+    try {
+      console.log("[ApplicationCopilot] widget loaded \u2014 support-ticket build v2");
+    } catch {
+    }
     this.mount();
     this.connectSignalR().catch(() => {
     });
@@ -161,6 +186,17 @@ var CopilotWidget = class {
   close() {
     this.panel?.classList.remove("acw-open");
   }
+  /** Show the launcher (widget host). No-op before init(). */
+  show() {
+    if (this.host) this.host.style.display = "";
+  }
+  /** Hide the launcher and close the panel. Used to gate the widget by route. */
+  hide() {
+    if (this.host) {
+      this.host.style.display = "none";
+    }
+    this.close();
+  }
   setContext(context) {
     this.contextOverride = context;
   }
@@ -168,6 +204,25 @@ var CopilotWidget = class {
     this.recentError = errorContext;
     this.open();
   }
+  /** Proactive nudge: show + open the panel with a message and an optional one-click suggested question. */
+  notify(text, suggestion) {
+    this.show();
+    this.open();
+    if (!this.body) return;
+    const el = document.createElement("div");
+    el.className = "acw-msg acw-assistant acw-nudge";
+    el.innerHTML = `<div class="acw-reason">${escapeHtml(text)}</div>`;
+    if (suggestion) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "acw-chip";
+      btn.textContent = suggestion;
+      btn.addEventListener("click", () => this.ask(suggestion));
+      el.appendChild(btn);
+    }
+    this.body.appendChild(el);
+    this.body.scrollTop = this.body.scrollHeight;
+  }
   ask(question) {
     if (this.mode === "intake") {
       void this.runIntakeAsk(question);
@@ -194,27 +249,79 @@ var CopilotWidget = class {
     wrap.querySelector(".acw-launch").addEventListener("click", () => this.panel?.classList.contains("acw-open") ? this.close() : this.open());
     const panel = document.createElement("div");
     panel.className = "acw-panel";
+    const uploadIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>';
     panel.innerHTML = `
       <div class="acw-header">
         ${sparkle}
         <span class="acw-title">Application Copilot</span>
+        <button class="acw-kb" type="button" aria-label="Add a document to the knowledge base" title="Add to knowledge base (admins)" style="background:none;border:none;color:inherit;cursor:pointer;padding:2px 6px;display:inline-flex;align-items:center;">${uploadIcon}</button>
         <button class="acw-close" type="button" aria-label="Close">&times;</button>
       </div>
       <div class="acw-body"></div>
       <div class="acw-footer">
         <input class="acw-input" type="text" placeholder="Ask a question\u2026" />
         <button class="acw-send" type="button">Send</button>
-      </div>`;
+      </div>
+      <input class="acw-file" type="file" accept=".pdf,.docx,.xlsx,.xlsm,.txt,.md,.markdown,.csv" style="display:none" />`;
     this.root.appendChild(panel);
     this.panel = panel;
     this.body = panel.querySelector(".acw-body");
     this.input = panel.querySelector(".acw-input");
+    this.fileInput = panel.querySelector(".acw-file");
     panel.querySelector(".acw-close").addEventListener("click", () => this.close());
     panel.querySelector(".acw-send").addEventListener("click", () => this.submitFromInput());
+    panel.querySelector(".acw-kb").addEventListener("click", () => this.promptUpload());
+    this.fileInput.addEventListener("change", () => {
+      const f = this.fileInput?.files?.[0];
+      if (f) {
+        void this.uploadDocument(f);
+        if (this.fileInput) this.fileInput.value = "";
+      }
+    });
     this.input.addEventListener("keydown", (e) => {
       if (e.key === "Enter") this.submitFromInput();
     });
   }
+  /** Open the file picker to add a document to the knowledge base (server enforces admin-only). */
+  promptUpload() {
+    this.open();
+    this.fileInput?.click();
+  }
+  async uploadDocument(file) {
+    this.open();
+    this.addMessage(`Uploading \u201C${file.name}\u201D to the knowledge base\u2026`, "user");
+    this.setProgress("Extracting and indexing\u2026");
+    try {
+      const form = new FormData();
+      form.append("file", file, file.name);
+      form.append("tenantUniqueName", this.config.tenantUniqueName);
+      form.append("environment", this.config.environment);
+      const h = {};
+      const token = this.config.getAuthToken?.();
+      const email = typeof this.config.devUserEmail === "function" ? this.config.devUserEmail() : this.config.devUserEmail;
+      if (token) h["Authorization"] = `Bearer ${token}`;
+      else if (email) h["X-User-Email"] = email;
+      const res = await fetch(`${this.config.apiBaseUrl}/api/knowledge/upload`, { method: "POST", headers: h, body: form });
+      this.setProgress("");
+      if (res.status === 403) {
+        this.renderAnswer({ status: "Forbidden", primaryReason: "Only Spektra Admins can add to the knowledge base." });
+        return;
+      }
+      if (!res.ok) {
+        this.renderAnswer({ status: "RequestFailed", primaryReason: `Upload failed (${res.status}).` });
+        return;
+      }
+      const data = await res.json();
+      if (data?.status === "Indexed") {
+        this.renderAnswer({ status: "Answered", disabled: false, primaryReason: `Added \u201C${data.title}\u201D to the knowledge base (${data.chunks} chunk${data.chunks === 1 ? "" : "s"}). I can now use it to answer questions.` });
+      } else {
+        this.renderAnswer({ status: "RequestFailed", primaryReason: data?.reason || "Could not add the document." });
+      }
+    } catch {
+      this.setProgress("");
+      this.renderAnswer({ status: "RequestFailed", primaryReason: "Could not reach the copilot service." });
+    }
+  }
   submitFromInput() {
     const q = this.input?.value.trim();
     if (q) {
@@ -341,8 +448,115 @@ var CopilotWidget = class {
       el.innerHTML = `<div class="acw-reason">${escapeHtml(answer.primaryReason || "")}</div>` + (answer.verifiedRoleLabel ? `<div class="acw-role">Verified role: ${escapeHtml(answer.verifiedRoleLabel)}</div>` : "") + (sourceLabel ? `<div class="acw-role">Source: ${sourceLabel}</div>` : "") + (evidence ? `<div class="acw-evidence">Evidence: ${evidence}</div>` : "");
     }
     this.body.appendChild(el);
+    const role = (answer.verifiedRoleLabel || "").toLowerCase();
+    const eligibleRole = role === "requestor" || role === "approver";
+    const looksBlocked = /lock(ed)?|can only be (changed|edited)|not editable|isn'?t permitted|not permitted|can'?t (change|edit|update)|cannot (change|edit|update)|read-only|don'?t have access|not allowed/i.test(answer.primaryReason || "");
+    const offerTicket = answer.supportTicketEligible === true || (answer.disabled === true || looksBlocked) && eligibleRole;
+    if (!isFailure && offerTicket) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "acw-chip";
+      btn.textContent = "Raise a support ticket";
+      btn.addEventListener("click", () => this.openTicketDraft(answer));
+      el.appendChild(btn);
+    }
     this.body.scrollTop = this.body.scrollHeight;
   }
+  currentRequestId() {
+    const ctx = this.currentContext();
+    const explicit = ctx.page?.requestId || ctx.page?.RequestId;
+    if (explicit) return String(explicit);
+    const route = ctx.page?.route || (typeof window !== "undefined" ? window.location.pathname : "");
+    const ms = /MS[A-Z0-9]{6,}/i.exec(route || "");
+    if (ms) return ms[0];
+    const guid = /[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/.exec(route || "");
+    return guid ? guid[0] : void 0;
+  }
+  /** Build a pre-filled, editable ticket draft and let the user review + Send (they trigger the API call). */
+  openTicketDraft(answer) {
+    const fromAnswer = /MS[A-Z0-9]{6,}/i.exec(answer.primaryReason || "");
+    const requestId = fromAnswer ? fromAnswer[0] : this.currentRequestId();
+    const role = answer.verifiedRoleLabel || "";
+    const reason = answer.primaryReason || "I am blocked from completing an action.";
+    const subject = requestId ? `[Cloud Events] Help needed on request ${requestId}` : "[Cloud Events] Help needed with an event request";
+    const description = `Raised from the Application Copilot.
+
+` + (role ? `Role: ${role}
+` : "") + `Request Id: ${requestId || "(not on a specific request)"}
+` + (this.lastQuestion ? `Question: ${this.lastQuestion}
+` : "") + `
+What the copilot reported:
+${reason}`;
+    const card = document.createElement("div");
+    card.className = "acw-ticket";
+    card.innerHTML = `<div class="acw-ticket-title">Raise a support ticket</div><div class="acw-ticket-sub">Review the details below and click Send. It goes to the support team as a Zoho Desk ticket.</div><label class="acw-ticket-label">Subject</label><input class="acw-ticket-subject acw-ticket-input" type="text" /><label class="acw-ticket-label">Description</label><textarea class="acw-ticket-desc" rows="8"></textarea><div class="acw-ticket-actions"><button class="acw-ticket-send acw-btn-primary" type="button">Send ticket</button><button class="acw-ticket-cancel acw-btn-ghost" type="button">Cancel</button></div>`;
+    card.querySelector(".acw-ticket-subject").value = subject;
+    card.querySelector(".acw-ticket-desc").value = description;
+    card.querySelector(".acw-ticket-cancel").addEventListener("click", () => card.remove());
+    card.querySelector(".acw-ticket-send").addEventListener("click", () => {
+      const subj = card.querySelector(".acw-ticket-subject").value.trim();
+      const desc = card.querySelector(".acw-ticket-desc").value.trim();
+      card.remove();
+      void this.submitTicket(subj, desc, requestId);
+    });
+    this.body.appendChild(card);
+    this.body.scrollTop = this.body.scrollHeight;
+  }
+  async submitTicket(subject, description, requestId) {
+    this.setProgress("Sending your support ticket\u2026");
+    try {
+      const sessionId = await this.ensureSession();
+      const res = await fetch(`${this.config.apiBaseUrl}/api/sessions/${sessionId}/support-ticket`, {
+        method: "POST",
+        headers: this.headers(),
+        body: JSON.stringify({
+          tenantUniqueName: this.config.tenantUniqueName,
+          environment: this.config.environment,
+          requestId,
+          subject,
+          description
+        })
+      });
+      this.setProgress("");
+      if (res.status === 403) {
+        this.renderAnswer({ status: "Forbidden", primaryReason: "Support tickets are available for Requestor/Approver roles." });
+        return;
+      }
+      if (!res.ok) {
+        this.renderAnswer({ status: "RequestFailed", primaryReason: `Could not send the ticket (${res.status}).` });
+        return;
+      }
+      const data = await res.json();
+      if (data?.status === "Created") {
+        const num = data.ticketNumber ? `#${data.ticketNumber}` : "";
+        const el = document.createElement("div");
+        el.className = "acw-answer acw-okstate";
+        el.innerHTML = `<div class="acw-reason">Support ticket ${escapeHtml(num)} has been created. The support team will follow up.</div>`;
+        if (data.webUrl || data.id || this.config.onOpenTicket) {
+          const open = document.createElement("button");
+          open.type = "button";
+          open.className = "acw-link-btn";
+          open.textContent = "Open the ticket";
+          open.addEventListener("click", () => {
+            const ticket = { id: data.id, number: data.ticketNumber, webUrl: data.webUrl };
+            if (this.config.onOpenTicket) {
+              this.config.onOpenTicket(ticket);
+            } else if (data.webUrl) {
+              window.open(data.webUrl, "_blank", "noopener");
+            }
+          });
+          el.appendChild(open);
+        }
+        this.body.appendChild(el);
+        this.body.scrollTop = this.body.scrollHeight;
+      } else {
+        this.renderAnswer({ status: "RequestFailed", primaryReason: data?.reason || "Could not create the ticket." });
+      }
+    } catch {
+      this.setProgress("");
+      this.renderAnswer({ status: "RequestFailed", primaryReason: "Could not reach the copilot service." });
+    }
+  }
   // ---- networking ----
   headers() {
     const h = { "Content-Type": "application/json" };
@@ -372,6 +586,7 @@ var CopilotWidget = class {
   }
   async runAsk(question) {
     this.open();
+    this.lastQuestion = question;
     this.addMessage(question, "user");
     this.setProgress("Reading your question\u2026");
     try {
@@ -389,7 +604,8 @@ var CopilotWidget = class {
       this.renderAnswer(await res.json());
     } catch (err) {
       this.setProgress("");
-      this.renderAnswer({ status: "RequestFailed", primaryReason: "Could not reach the copilot service." });
+      const msg = err?.message ? String(err.message) : "Could not reach the copilot service.";
+      this.renderAnswer({ status: "RequestFailed", primaryReason: msg });
     }
   }
   async connectSignalR() {
@@ -415,6 +631,10 @@ var ApplicationCopilotWidget = {
   init: (config) => instance.init(config),
   open: () => instance.open(),
   close: () => instance.close(),
+  show: () => instance.show(),
+  hide: () => instance.hide(),
+  notify: (text, suggestion) => instance.notify(text, suggestion),
+  promptUpload: () => instance.promptUpload(),
   ask: (question) => instance.ask(question),
   setContext: (context) => instance.setContext(context),
   captureError: (errorContext) => instance.captureError(errorContext)

package/dist/index.d.cts

@@ -46,6 +46,12 @@ interface WidgetConfig {
     buttonText?: string;
     /** Host navigation hook (e.g. Angular router). If omitted, the widget falls back to window.location. */
     onNavigate?: (path: string) => void;
+    /** Host hook to open a created support ticket (e.g. the embedded Zoho ASAP widget). If omitted, the widget opens webUrl in a new tab. */
+    onOpenTicket?: (ticket: {
+        id?: string;
+        number?: string;
+        webUrl?: string;
+    }) => void;
 }
 interface CopilotAnswer {
     status: string;
@@ -70,6 +76,10 @@ declare const ApplicationCopilotWidget: {
     init: (config: WidgetConfig) => void;
     open: () => void;
     close: () => void;
+    show: () => void;
+    hide: () => void;
+    notify: (text: string, suggestion?: string) => void;
+    promptUpload: () => void;
     ask: (question: string) => void;
     setContext: (context: ApplicationContext) => void;
     captureError: (errorContext: ApplicationContext["recentError"]) => void;

package/dist/index.d.ts

@@ -46,6 +46,12 @@ interface WidgetConfig {
     buttonText?: string;
     /** Host navigation hook (e.g. Angular router). If omitted, the widget falls back to window.location. */
     onNavigate?: (path: string) => void;
+    /** Host hook to open a created support ticket (e.g. the embedded Zoho ASAP widget). If omitted, the widget opens webUrl in a new tab. */
+    onOpenTicket?: (ticket: {
+        id?: string;
+        number?: string;
+        webUrl?: string;
+    }) => void;
 }
 interface CopilotAnswer {
     status: string;
@@ -70,6 +76,10 @@ declare const ApplicationCopilotWidget: {
     init: (config: WidgetConfig) => void;
     open: () => void;
     close: () => void;
+    show: () => void;
+    hide: () => void;
+    notify: (text: string, suggestion?: string) => void;
+    promptUpload: () => void;
     ask: (question: string) => void;
     setContext: (context: ApplicationContext) => void;
     captureError: (errorContext: ApplicationContext["recentError"]) => void;

package/dist/index.js

@@ -40,7 +40,7 @@ var widgetStyles = `
 /* Panel */
 .acw-panel {
   position: fixed; right: 24px; bottom: 96px; z-index: 2147483000;
-  width: 410px; max-width: calc(100vw - 48px); height: 580px; max-height: calc(100vh - 130px);
+  width: 480px; max-width: calc(100vw - 48px); height: 660px; max-height: calc(100vh - 120px);
   display: none; flex-direction: column;
   background: var(--acw-bg); color: var(--acw-fg);
   border: 1px solid var(--acw-border); border-radius: 16px; overflow: hidden;
@@ -98,6 +98,26 @@ var widgetStyles = `
 .acw-input:focus { outline: 2px solid var(--acw-accent); outline-offset: 0; }
 .acw-send { border: none; border-radius: 10px; padding: 0 16px; background: var(--acw-accent); color: #fff; cursor: pointer; font-size: 14px; font-family: inherit; }
 .acw-send:hover { background: var(--acw-accent-dark); }
+
+/* Support-ticket draft card */
+.acw-ticket { background: var(--acw-bg); border: 1px solid var(--acw-border); border-radius: 12px; padding: 14px; margin: 12px 0; border-left: 4px solid var(--acw-accent); }
+.acw-ticket-title { font-size: 15px; font-weight: 600; color: var(--acw-fg); margin: 0 0 4px; }
+.acw-ticket-sub { font-size: 12px; color: var(--acw-muted); margin: 0 0 10px; }
+.acw-ticket-label { display: block; font-size: 12px; font-weight: 600; color: var(--acw-muted); margin: 12px 0 5px; }
+.acw-ticket-input, .acw-ticket-desc {
+  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px;
+  padding: 10px 12px; border: 1px solid var(--acw-border); border-radius: 10px;
+  color: var(--acw-fg); background: var(--acw-bg);
+}
+.acw-ticket-desc { resize: vertical; min-height: 170px; line-height: 1.5; }
+.acw-ticket-input:focus, .acw-ticket-desc:focus { outline: 2px solid var(--acw-accent); outline-offset: 0; }
+.acw-ticket-actions { display: flex; gap: 10px; margin-top: 14px; }
+.acw-btn-primary { border: none; border-radius: 10px; padding: 10px 20px; cursor: pointer; background: var(--acw-accent); color: #fff; font-size: 14px; font-weight: 600; font-family: inherit; }
+.acw-btn-primary:hover { background: var(--acw-accent-dark); }
+.acw-btn-ghost { border: 1px solid var(--acw-border); border-radius: 10px; padding: 10px 16px; cursor: pointer; background: var(--acw-bg); color: var(--acw-fg); font-size: 14px; font-family: inherit; }
+.acw-btn-ghost:hover { background: #f0eefe; }
+.acw-link-btn { margin-top: 8px; border: none; background: transparent; color: var(--acw-accent); font-size: 12px; font-family: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
+.acw-link-btn:hover { color: var(--acw-accent-dark); }
 `;
 
 // src/widget.ts
@@ -109,10 +129,15 @@ var PROGRESS_LABELS = {
 };
 var CopilotWidget = class {
   constructor() {
+    this.lastQuestion = "";
     this.mode = "explain";
   }
   init(config) {
     this.config = config;
+    try {
+      console.log("[ApplicationCopilot] widget loaded \u2014 support-ticket build v2");
+    } catch {
+    }
     this.mount();
     this.connectSignalR().catch(() => {
     });
@@ -124,6 +149,17 @@ var CopilotWidget = class {
   close() {
     this.panel?.classList.remove("acw-open");
   }
+  /** Show the launcher (widget host). No-op before init(). */
+  show() {
+    if (this.host) this.host.style.display = "";
+  }
+  /** Hide the launcher and close the panel. Used to gate the widget by route. */
+  hide() {
+    if (this.host) {
+      this.host.style.display = "none";
+    }
+    this.close();
+  }
   setContext(context) {
     this.contextOverride = context;
   }
@@ -131,6 +167,25 @@ var CopilotWidget = class {
     this.recentError = errorContext;
     this.open();
   }
+  /** Proactive nudge: show + open the panel with a message and an optional one-click suggested question. */
+  notify(text, suggestion) {
+    this.show();
+    this.open();
+    if (!this.body) return;
+    const el = document.createElement("div");
+    el.className = "acw-msg acw-assistant acw-nudge";
+    el.innerHTML = `<div class="acw-reason">${escapeHtml(text)}</div>`;
+    if (suggestion) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "acw-chip";
+      btn.textContent = suggestion;
+      btn.addEventListener("click", () => this.ask(suggestion));
+      el.appendChild(btn);
+    }
+    this.body.appendChild(el);
+    this.body.scrollTop = this.body.scrollHeight;
+  }
   ask(question) {
     if (this.mode === "intake") {
       void this.runIntakeAsk(question);
@@ -157,27 +212,79 @@ var CopilotWidget = class {
     wrap.querySelector(".acw-launch").addEventListener("click", () => this.panel?.classList.contains("acw-open") ? this.close() : this.open());
     const panel = document.createElement("div");
     panel.className = "acw-panel";
+    const uploadIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>';
     panel.innerHTML = `
       <div class="acw-header">
         ${sparkle}
         <span class="acw-title">Application Copilot</span>
+        <button class="acw-kb" type="button" aria-label="Add a document to the knowledge base" title="Add to knowledge base (admins)" style="background:none;border:none;color:inherit;cursor:pointer;padding:2px 6px;display:inline-flex;align-items:center;">${uploadIcon}</button>
         <button class="acw-close" type="button" aria-label="Close">&times;</button>
       </div>
       <div class="acw-body"></div>
       <div class="acw-footer">
         <input class="acw-input" type="text" placeholder="Ask a question\u2026" />
         <button class="acw-send" type="button">Send</button>
-      </div>`;
+      </div>
+      <input class="acw-file" type="file" accept=".pdf,.docx,.xlsx,.xlsm,.txt,.md,.markdown,.csv" style="display:none" />`;
     this.root.appendChild(panel);
     this.panel = panel;
     this.body = panel.querySelector(".acw-body");
     this.input = panel.querySelector(".acw-input");
+    this.fileInput = panel.querySelector(".acw-file");
     panel.querySelector(".acw-close").addEventListener("click", () => this.close());
     panel.querySelector(".acw-send").addEventListener("click", () => this.submitFromInput());
+    panel.querySelector(".acw-kb").addEventListener("click", () => this.promptUpload());
+    this.fileInput.addEventListener("change", () => {
+      const f = this.fileInput?.files?.[0];
+      if (f) {
+        void this.uploadDocument(f);
+        if (this.fileInput) this.fileInput.value = "";
+      }
+    });
     this.input.addEventListener("keydown", (e) => {
       if (e.key === "Enter") this.submitFromInput();
     });
   }
+  /** Open the file picker to add a document to the knowledge base (server enforces admin-only). */
+  promptUpload() {
+    this.open();
+    this.fileInput?.click();
+  }
+  async uploadDocument(file) {
+    this.open();
+    this.addMessage(`Uploading \u201C${file.name}\u201D to the knowledge base\u2026`, "user");
+    this.setProgress("Extracting and indexing\u2026");
+    try {
+      const form = new FormData();
+      form.append("file", file, file.name);
+      form.append("tenantUniqueName", this.config.tenantUniqueName);
+      form.append("environment", this.config.environment);
+      const h = {};
+      const token = this.config.getAuthToken?.();
+      const email = typeof this.config.devUserEmail === "function" ? this.config.devUserEmail() : this.config.devUserEmail;
+      if (token) h["Authorization"] = `Bearer ${token}`;
+      else if (email) h["X-User-Email"] = email;
+      const res = await fetch(`${this.config.apiBaseUrl}/api/knowledge/upload`, { method: "POST", headers: h, body: form });
+      this.setProgress("");
+      if (res.status === 403) {
+        this.renderAnswer({ status: "Forbidden", primaryReason: "Only Spektra Admins can add to the knowledge base." });
+        return;
+      }
+      if (!res.ok) {
+        this.renderAnswer({ status: "RequestFailed", primaryReason: `Upload failed (${res.status}).` });
+        return;
+      }
+      const data = await res.json();
+      if (data?.status === "Indexed") {
+        this.renderAnswer({ status: "Answered", disabled: false, primaryReason: `Added \u201C${data.title}\u201D to the knowledge base (${data.chunks} chunk${data.chunks === 1 ? "" : "s"}). I can now use it to answer questions.` });
+      } else {
+        this.renderAnswer({ status: "RequestFailed", primaryReason: data?.reason || "Could not add the document." });
+      }
+    } catch {
+      this.setProgress("");
+      this.renderAnswer({ status: "RequestFailed", primaryReason: "Could not reach the copilot service." });
+    }
+  }
   submitFromInput() {
     const q = this.input?.value.trim();
     if (q) {
@@ -304,8 +411,115 @@ var CopilotWidget = class {
       el.innerHTML = `<div class="acw-reason">${escapeHtml(answer.primaryReason || "")}</div>` + (answer.verifiedRoleLabel ? `<div class="acw-role">Verified role: ${escapeHtml(answer.verifiedRoleLabel)}</div>` : "") + (sourceLabel ? `<div class="acw-role">Source: ${sourceLabel}</div>` : "") + (evidence ? `<div class="acw-evidence">Evidence: ${evidence}</div>` : "");
     }
     this.body.appendChild(el);
+    const role = (answer.verifiedRoleLabel || "").toLowerCase();
+    const eligibleRole = role === "requestor" || role === "approver";
+    const looksBlocked = /lock(ed)?|can only be (changed|edited)|not editable|isn'?t permitted|not permitted|can'?t (change|edit|update)|cannot (change|edit|update)|read-only|don'?t have access|not allowed/i.test(answer.primaryReason || "");
+    const offerTicket = answer.supportTicketEligible === true || (answer.disabled === true || looksBlocked) && eligibleRole;
+    if (!isFailure && offerTicket) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "acw-chip";
+      btn.textContent = "Raise a support ticket";
+      btn.addEventListener("click", () => this.openTicketDraft(answer));
+      el.appendChild(btn);
+    }
     this.body.scrollTop = this.body.scrollHeight;
   }
+  currentRequestId() {
+    const ctx = this.currentContext();
+    const explicit = ctx.page?.requestId || ctx.page?.RequestId;
+    if (explicit) return String(explicit);
+    const route = ctx.page?.route || (typeof window !== "undefined" ? window.location.pathname : "");
+    const ms = /MS[A-Z0-9]{6,}/i.exec(route || "");
+    if (ms) return ms[0];
+    const guid = /[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/.exec(route || "");
+    return guid ? guid[0] : void 0;
+  }
+  /** Build a pre-filled, editable ticket draft and let the user review + Send (they trigger the API call). */
+  openTicketDraft(answer) {
+    const fromAnswer = /MS[A-Z0-9]{6,}/i.exec(answer.primaryReason || "");
+    const requestId = fromAnswer ? fromAnswer[0] : this.currentRequestId();
+    const role = answer.verifiedRoleLabel || "";
+    const reason = answer.primaryReason || "I am blocked from completing an action.";
+    const subject = requestId ? `[Cloud Events] Help needed on request ${requestId}` : "[Cloud Events] Help needed with an event request";
+    const description = `Raised from the Application Copilot.
+
+` + (role ? `Role: ${role}
+` : "") + `Request Id: ${requestId || "(not on a specific request)"}
+` + (this.lastQuestion ? `Question: ${this.lastQuestion}
+` : "") + `
+What the copilot reported:
+${reason}`;
+    const card = document.createElement("div");
+    card.className = "acw-ticket";
+    card.innerHTML = `<div class="acw-ticket-title">Raise a support ticket</div><div class="acw-ticket-sub">Review the details below and click Send. It goes to the support team as a Zoho Desk ticket.</div><label class="acw-ticket-label">Subject</label><input class="acw-ticket-subject acw-ticket-input" type="text" /><label class="acw-ticket-label">Description</label><textarea class="acw-ticket-desc" rows="8"></textarea><div class="acw-ticket-actions"><button class="acw-ticket-send acw-btn-primary" type="button">Send ticket</button><button class="acw-ticket-cancel acw-btn-ghost" type="button">Cancel</button></div>`;
+    card.querySelector(".acw-ticket-subject").value = subject;
+    card.querySelector(".acw-ticket-desc").value = description;
+    card.querySelector(".acw-ticket-cancel").addEventListener("click", () => card.remove());
+    card.querySelector(".acw-ticket-send").addEventListener("click", () => {
+      const subj = card.querySelector(".acw-ticket-subject").value.trim();
+      const desc = card.querySelector(".acw-ticket-desc").value.trim();
+      card.remove();
+      void this.submitTicket(subj, desc, requestId);
+    });
+    this.body.appendChild(card);
+    this.body.scrollTop = this.body.scrollHeight;
+  }
+  async submitTicket(subject, description, requestId) {
+    this.setProgress("Sending your support ticket\u2026");
+    try {
+      const sessionId = await this.ensureSession();
+      const res = await fetch(`${this.config.apiBaseUrl}/api/sessions/${sessionId}/support-ticket`, {
+        method: "POST",
+        headers: this.headers(),
+        body: JSON.stringify({
+          tenantUniqueName: this.config.tenantUniqueName,
+          environment: this.config.environment,
+          requestId,
+          subject,
+          description
+        })
+      });
+      this.setProgress("");
+      if (res.status === 403) {
+        this.renderAnswer({ status: "Forbidden", primaryReason: "Support tickets are available for Requestor/Approver roles." });
+        return;
+      }
+      if (!res.ok) {
+        this.renderAnswer({ status: "RequestFailed", primaryReason: `Could not send the ticket (${res.status}).` });
+        return;
+      }
+      const data = await res.json();
+      if (data?.status === "Created") {
+        const num = data.ticketNumber ? `#${data.ticketNumber}` : "";
+        const el = document.createElement("div");
+        el.className = "acw-answer acw-okstate";
+        el.innerHTML = `<div class="acw-reason">Support ticket ${escapeHtml(num)} has been created. The support team will follow up.</div>`;
+        if (data.webUrl || data.id || this.config.onOpenTicket) {
+          const open = document.createElement("button");
+          open.type = "button";
+          open.className = "acw-link-btn";
+          open.textContent = "Open the ticket";
+          open.addEventListener("click", () => {
+            const ticket = { id: data.id, number: data.ticketNumber, webUrl: data.webUrl };
+            if (this.config.onOpenTicket) {
+              this.config.onOpenTicket(ticket);
+            } else if (data.webUrl) {
+              window.open(data.webUrl, "_blank", "noopener");
+            }
+          });
+          el.appendChild(open);
+        }
+        this.body.appendChild(el);
+        this.body.scrollTop = this.body.scrollHeight;
+      } else {
+        this.renderAnswer({ status: "RequestFailed", primaryReason: data?.reason || "Could not create the ticket." });
+      }
+    } catch {
+      this.setProgress("");
+      this.renderAnswer({ status: "RequestFailed", primaryReason: "Could not reach the copilot service." });
+    }
+  }
   // ---- networking ----
   headers() {
     const h = { "Content-Type": "application/json" };
@@ -335,6 +549,7 @@ var CopilotWidget = class {
   }
   async runAsk(question) {
     this.open();
+    this.lastQuestion = question;
     this.addMessage(question, "user");
     this.setProgress("Reading your question\u2026");
     try {
@@ -352,7 +567,8 @@ var CopilotWidget = class {
       this.renderAnswer(await res.json());
     } catch (err) {
       this.setProgress("");
-      this.renderAnswer({ status: "RequestFailed", primaryReason: "Could not reach the copilot service." });
+      const msg = err?.message ? String(err.message) : "Could not reach the copilot service.";
+      this.renderAnswer({ status: "RequestFailed", primaryReason: msg });
     }
   }
   async connectSignalR() {
@@ -378,6 +594,10 @@ var ApplicationCopilotWidget = {
   init: (config) => instance.init(config),
   open: () => instance.open(),
   close: () => instance.close(),
+  show: () => instance.show(),
+  hide: () => instance.hide(),
+  notify: (text, suggestion) => instance.notify(text, suggestion),
+  promptUpload: () => instance.promptUpload(),
   ask: (question) => instance.ask(question),
   setContext: (context) => instance.setContext(context),
   captureError: (errorContext) => instance.captureError(errorContext)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spektra-cloudevents/application-copilot-widget",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Spektra Application Copilot widget — framework-agnostic and CSS-library agnostic via Shadow DOM isolation.",
   "type": "module",
   "publishConfig": {