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

package/dist/index.cjs

@@ -146,10 +146,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 +166,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 +184,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 +229,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 +428,99 @@ 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 m = /MS[A-Z0-9]{6,}/i.exec(route || "");
+    return m ? m[0] : void 0;
+  }
+  /** Build a pre-filled, editable ticket draft and let the user review + Send (they trigger the API call). */
+  openTicketDraft(answer) {
+    const requestId = 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-answer";
+    const lbl = "display:block;font-size:11px;color:var(--acw-muted);margin:8px 0 2px;";
+    const fld = "width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--acw-border);border-radius:8px;background:var(--acw-bg);color:var(--acw-fg);";
+    card.innerHTML = `<div class="acw-reason"><strong>Review your support ticket</strong></div><label style="${lbl}">Subject</label><input class="acw-ticket-subject" type="text" style="${fld}" /><label style="${lbl}">Description</label><textarea class="acw-ticket-desc" rows="6" style="${fld}resize:vertical;"></textarea><div style="display:flex;gap:8px;margin-top:10px;"><button class="acw-ticket-send" type="button" style="border:none;border-radius:8px;padding:6px 14px;cursor:pointer;background:var(--acw-accent);color:var(--acw-accent-fg);font-size:13px;">Send ticket</button><button class="acw-ticket-cancel" type="button" style="border:1px solid var(--acw-border);border-radius:8px;padding:6px 12px;cursor:pointer;background:var(--acw-bg);color:var(--acw-fg);font-size:13px;">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>` + (data.webUrl ? `<div class="acw-role"><a href="${escapeHtml(data.webUrl)}" target="_blank" rel="noopener">Open the ticket</a></div>` : "");
+        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 +550,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 +568,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 +595,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

@@ -70,6 +70,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

@@ -70,6 +70,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

@@ -109,10 +109,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 +129,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 +147,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 +192,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 +391,99 @@ 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 m = /MS[A-Z0-9]{6,}/i.exec(route || "");
+    return m ? m[0] : void 0;
+  }
+  /** Build a pre-filled, editable ticket draft and let the user review + Send (they trigger the API call). */
+  openTicketDraft(answer) {
+    const requestId = 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-answer";
+    const lbl = "display:block;font-size:11px;color:var(--acw-muted);margin:8px 0 2px;";
+    const fld = "width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--acw-border);border-radius:8px;background:var(--acw-bg);color:var(--acw-fg);";
+    card.innerHTML = `<div class="acw-reason"><strong>Review your support ticket</strong></div><label style="${lbl}">Subject</label><input class="acw-ticket-subject" type="text" style="${fld}" /><label style="${lbl}">Description</label><textarea class="acw-ticket-desc" rows="6" style="${fld}resize:vertical;"></textarea><div style="display:flex;gap:8px;margin-top:10px;"><button class="acw-ticket-send" type="button" style="border:none;border-radius:8px;padding:6px 14px;cursor:pointer;background:var(--acw-accent);color:var(--acw-accent-fg);font-size:13px;">Send ticket</button><button class="acw-ticket-cancel" type="button" style="border:1px solid var(--acw-border);border-radius:8px;padding:6px 12px;cursor:pointer;background:var(--acw-bg);color:var(--acw-fg);font-size:13px;">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>` + (data.webUrl ? `<div class="acw-role"><a href="${escapeHtml(data.webUrl)}" target="_blank" rel="noopener">Open the ticket</a></div>` : "");
+        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 +513,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 +531,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 +558,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.1.0",
   "description": "Spektra Application Copilot widget — framework-agnostic and CSS-library agnostic via Shadow DOM isolation.",
   "type": "module",
   "publishConfig": {