@spektra-cloudevents/application-copilot-widget 1.1.0 → 2.0.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;
@@ -96,7 +96,7 @@ var widgetStyles = `
 .acw-close { margin-left: auto; border: none; background: transparent; cursor: pointer; font-size: 22px; color: rgba(255,255,255,0.85); line-height: 1; }
 .acw-close:hover { color: #fff; }
 
-.acw-body { flex: 1; overflow-y: auto; padding: 16px; background: var(--acw-surface); }
+.acw-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px; background: var(--acw-surface); }
 .acw-hint { font-size: 12px; color: var(--acw-muted); margin: 0 0 10px; }
 
 .acw-chip {
@@ -116,28 +116,140 @@ var widgetStyles = `
 .acw-msg.acw-user span, .acw-msg.acw-user {
   display: inline-block;
 }
+.acw-msg.acw-user { display: block; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
 .acw-progress { font-size: 13px; color: var(--acw-muted); margin: 10px 0; }
 
 .acw-answer { background: var(--acw-bg); border: 1px solid var(--acw-border); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
-.acw-answer .acw-reason { font-size: 14px; line-height: 1.5; }
+.acw-answer .acw-reason, .acw-msg .acw-reason { font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
 .acw-answer.acw-blocked { border-left: 4px solid var(--acw-danger); }
 .acw-answer.acw-okstate { border-left: 4px solid var(--acw-ok); }
 .acw-role { font-size: 12px; color: var(--acw-muted); margin-top: 8px; }
 .acw-evidence { font-size: 12px; color: var(--acw-muted); margin-top: 10px; word-break: break-word; }
-.acw-error { font-size: 14px; color: var(--acw-danger); }
+.acw-error { font-size: 14px; color: var(--acw-danger); white-space: pre-wrap; overflow-wrap: anywhere; }
+
+/* Knowledge-base references */
+.acw-refs { margin-top: 10px; font-size: 12px; }
+.acw-refs-label { color: var(--acw-muted); font-weight: 600; margin-bottom: 4px; }
+.acw-refs-list { margin: 0; padding-left: 18px; }
+.acw-refs-list li { margin: 2px 0; }
+.acw-ref { color: var(--acw-accent); text-decoration: underline; overflow-wrap: anywhere; }
+.acw-ref:hover { color: var(--acw-accent-dark); }
+
+/* Support-ticket offer */
+.acw-offer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--acw-border); }
+.acw-offer-text { font-size: 13px; line-height: 1.5; color: var(--acw-fg); white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 8px; }
+.acw-offer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
+.acw-offer-actions .acw-chip { width: auto; margin-bottom: 0; }
+.acw-offer-actions .acw-link-btn { margin-top: 0; }
+.acw-chip:disabled, .acw-link-btn:disabled { opacity: .6; cursor: default; }
+.acw-nothelpful { display: block; margin-top: 10px; color: var(--acw-muted); }
 
 .acw-footer { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--acw-border); background: var(--acw-bg); }
 .acw-input {
-  flex: 1; padding: 10px 12px; font-size: 14px;
+  flex: 1; min-width: 0; padding: 10px 12px; font-size: 14px;
   border: 1px solid var(--acw-border); border-radius: 10px; color: var(--acw-fg); background: var(--acw-bg);
   font-family: inherit;
 }
 .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; flex-wrap: wrap; 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); }
+
+/* Responsive: full-width panel below 480px; never taller than the viewport; no horizontal scroll. */
+@media (max-width: 479.98px) {
+  .acw-launch-wrap { right: 16px; bottom: 16px; }
+  .acw-tip { display: none; }
+  .acw-panel {
+    left: 0; right: 0; bottom: 0;
+    width: 100%; max-width: 100%;
+    height: calc(100vh - 32px); max-height: calc(100vh - 32px);
+    border-radius: 16px 16px 0 0; border-left: none; border-right: none; border-bottom: none;
+  }
+  .acw-ticket-desc { min-height: 120px; }
+}
+/* Short desktop/tablet viewports: keep the panel inside the viewport (beside the launcher). */
+@media (max-height: 700px) and (min-width: 480px) {
+  .acw-panel { bottom: 16px; right: 96px; max-width: calc(100vw - 112px); max-height: calc(100vh - 32px); }
+}
 `;
 
+// src/internal.ts
+function escapeHtml(value) {
+  const s = value === null || value === void 0 ? "" : String(value);
+  return s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+}
+function safeHref(raw) {
+  if (typeof raw !== "string") return null;
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+  let url;
+  try {
+    url = new URL(trimmed);
+  } catch {
+    return null;
+  }
+  if (url.protocol !== "https:") return null;
+  if (url.username || url.password) return null;
+  if (!url.hostname) return null;
+  return url.href;
+}
+function normalizeReferences(refs, max = 10) {
+  if (!Array.isArray(refs)) return [];
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const r of refs) {
+    if (!r || typeof r !== "object") continue;
+    const href = safeHref(r.url);
+    if (!href || seen.has(href)) continue;
+    seen.add(href);
+    const rawTitle = r.title;
+    const title = typeof rawTitle === "string" && rawTitle.trim() ? rawTitle.trim() : new URL(href).hostname;
+    out.push({ title, href });
+    if (out.length >= max) break;
+  }
+  return out;
+}
+function isSessionInvalidStatus(status) {
+  return status === 403 || status === 404;
+}
+function tokenIdentity(token) {
+  if (!token || typeof token !== "string") return null;
+  const parts = token.split(".");
+  if (parts.length < 2 || !parts[1]) return null;
+  try {
+    const b64 = parts[1].replace(/-/g, "+").replace(/_/g, "/");
+    const padded = b64 + "=".repeat((4 - b64.length % 4) % 4);
+    const payload = JSON.parse(atob(padded));
+    const emails = Array.isArray(payload.emails) ? payload.emails[0] : void 0;
+    const id = payload.oid ?? payload.sub ?? emails ?? payload.email ?? payload.preferred_username;
+    return typeof id === "string" && id ? id.toLowerCase() : null;
+  } catch {
+    return null;
+  }
+}
+
 // src/widget.ts
+var TICKET_OFFER_TEXT = "I couldn\u2019t answer this confidently. Would you like to raise a support ticket? I\u2019ll pre-fill it with this conversation.";
+var SESSION_RESET_TEXT = "Your Copilot session has ended or is no longer valid, so a new one will be started. Please ask your question again.";
 var PROGRESS_LABELS = {
   QuestionAccepted: "Reading your question\u2026",
   PermissionsVerified: "Verifying your permissions\u2026",
@@ -148,18 +260,50 @@ var CopilotWidget = class {
   constructor() {
     this.lastQuestion = "";
     this.mode = "explain";
+    this.connecting = false;
+    /** Bumped by resetSession(); responses that belong to an older epoch are dropped. */
+    this.epoch = 0;
   }
   init(config) {
+    const previousTenant = this.config?.tenantUniqueName;
     this.config = config;
     try {
       console.log("[ApplicationCopilot] widget loaded \u2014 support-ticket build v2");
     } catch {
     }
+    if (previousTenant !== void 0 && previousTenant !== config.tenantUniqueName) this.resetSession();
     this.mount();
-    this.connectSignalR().catch(() => {
-    });
+    this.applyKnowledgeUploadVisibility();
+    if (!this.connection && !this.connecting) {
+      this.connecting = true;
+      this.connectSignalR().catch(() => {
+      }).finally(() => {
+        this.connecting = false;
+      });
+    }
+  }
+  /**
+   * Drop the current Copilot session and clear the conversation. The next question opens a new session
+   * for the current `tenantUniqueName` and signed-in user. Also called automatically when the tenant or the
+   * token's user changes and when the API answers 403/404 for the session.
+   */
+  resetSession() {
+    this.epoch++;
+    this.sessionId = void 0;
+    this.sessionTenant = void 0;
+    this.sessionIdentity = void 0;
+    this.lastQuestion = "";
+    this.contextOverride = void 0;
+    this.recentError = void 0;
+    this.mode = "explain";
+    if (this.input) this.input.placeholder = "Ask a question\u2026";
+    if (this.body) {
+      this.body.replaceChildren();
+      if (this.panel?.classList.contains("acw-open")) this.refreshChips();
+    }
   }
   open() {
+    this.syncSessionScope();
     this.panel?.classList.add("acw-open");
     this.refreshChips();
   }
@@ -204,6 +348,7 @@ var CopilotWidget = class {
     this.body.scrollTop = this.body.scrollHeight;
   }
   ask(question) {
+    this.syncSessionScope();
     if (this.mode === "intake") {
       void this.runIntakeAsk(question);
     } else {
@@ -221,7 +366,7 @@ var CopilotWidget = class {
     style.textContent = widgetStyles;
     this.root.appendChild(style);
     const sparkle = '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l1.7 4.6L18.3 8l-4.6 1.4L12 14l-1.7-4.6L5.7 8l4.6-1.4L12 2zm6.5 9l1 2.6 2.6 1-2.6 1-1 2.6-1-2.6-2.6-1 2.6-1 1-2.6zM6 13.5l.9 2.3 2.3.9-2.3.9L6 20l-.9-2.4L2.7 16.7l2.4-.9.9-2.3z"/></svg>';
-    const tip = this.config.buttonText ?? "Ask Application Copilot";
+    const tip = escapeHtml(this.config.buttonText ?? "Ask Application Copilot");
     const wrap = document.createElement("div");
     wrap.className = "acw-launch-wrap";
     wrap.innerHTML = `<span class="acw-tip">${tip}</span><button class="acw-launch" type="button" aria-label="${tip}">${sparkle}</button>`;
@@ -234,7 +379,7 @@ var CopilotWidget = class {
       <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-kb" type="button" aria-label="Add a document to the knowledge base" title="Add to knowledge base (admins)" hidden style="background:none;border:none;color:inherit;cursor:pointer;padding:2px 6px;align-items:center;">${uploadIcon}</button>
         <button class="acw-close" type="button" aria-label="Close">&times;</button>
       </div>
       <div class="acw-body"></div>
@@ -262,10 +407,21 @@ var CopilotWidget = class {
       if (e.key === "Enter") this.submitFromInput();
     });
   }
-  /** Open the file picker to add a document to the knowledge base (server enforces admin-only). */
+  /**
+   * Open the file picker to add a document to the knowledge base. Only when the host set `showKnowledgeUpload`;
+   * otherwise it just opens the panel. The Copilot API authorizes every upload either way.
+   */
   promptUpload() {
     this.open();
-    this.fileInput?.click();
+    if (this.config?.showKnowledgeUpload === true) this.fileInput?.click();
+  }
+  /** B5: the upload button is hidden unless the host opts in (re-applied on every init, e.g. after a tenant switch). */
+  applyKnowledgeUploadVisibility() {
+    const btn = this.panel?.querySelector(".acw-kb");
+    if (!btn) return;
+    const show = this.config?.showKnowledgeUpload === true;
+    btn.hidden = !show;
+    btn.style.display = show ? "inline-flex" : "none";
   }
   async uploadDocument(file) {
     this.open();
@@ -275,16 +431,14 @@ var CopilotWidget = class {
       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." });
+        if (await this.renderIfFeatureDisabled(res)) return;
+        this.renderAnswer({ status: "Forbidden", primaryReason: "Only System Admins and Partner Admins can add to the knowledge base." });
         return;
       }
       if (!res.ok) {
@@ -293,7 +447,7 @@ var CopilotWidget = class {
       }
       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.` });
+        this.renderAnswer({ status: "Answered", disabled: false, primaryReason: `Uploaded \u201C${data.title}\u201D as a Draft (${data.chunks} chunk${data.chunks === 1 ? "" : "s"}). A System Admin or Partner Admin must publish it in Admin \u2192 Settings \u2192 Copilot Knowledge Base before I use it in answers.` });
       } else {
         this.renderAnswer({ status: "RequestFailed", primaryReason: data?.reason || "Could not add the document." });
       }
@@ -342,20 +496,30 @@ var CopilotWidget = class {
     this.open();
     this.addMessage(question, "user");
     this.setProgress("Finding the right offering\u2026");
+    const epoch = this.epoch;
     try {
       const sessionId = await this.ensureSession();
-      const res = await fetch(`${this.config.apiBaseUrl}/api/sessions/${sessionId}/intake/ask`, {
+      const res = await fetch(`${this.config.apiBaseUrl}/api/sessions/${encodeURIComponent(sessionId)}/intake/ask`, {
         method: "POST",
         headers: this.headers(),
         body: JSON.stringify({ question, tenantUniqueName: this.config.tenantUniqueName })
       });
+      if (epoch !== this.epoch) return;
+      if (isSessionInvalidStatus(res.status)) {
+        if (await this.renderIfFeatureDisabled(res)) return;
+        this.handleInvalidSession();
+        return;
+      }
       if (!res.ok) {
         this.setProgress("");
         this.renderAnswer({ status: "RequestFailed", primaryReason: `The copilot service returned ${res.status}.` });
         return;
       }
-      this.renderIntakeAnswer(await res.json());
+      const data = await res.json();
+      if (epoch !== this.epoch) return;
+      this.renderIntakeAnswer(data);
     } catch {
+      if (epoch !== this.epoch) return;
       this.setProgress("");
       this.renderAnswer({ status: "RequestFailed", primaryReason: "Could not reach the copilot service." });
     }
@@ -414,10 +578,10 @@ var CopilotWidget = class {
     p.textContent = text;
     this.body.scrollTop = this.body.scrollHeight;
   }
-  renderAnswer(answer) {
+  renderAnswer(answer, question, wasNotHelpful = false) {
     this.setProgress("");
     const el = document.createElement("div");
-    const isFailure = answer.status && answer.status !== "Answered";
+    const isFailure = !!answer.status && answer.status !== "Answered";
     if (isFailure) {
       el.className = "acw-answer";
       el.innerHTML = `<div class="acw-error">${escapeHtml(answer.primaryReason || answer.status)}</div>`;
@@ -427,32 +591,148 @@ var CopilotWidget = class {
       const sourceLabel = answer.source === "code" ? "App rules" : answer.source === "database" ? "Live data" : answer.source === "policy" ? "SharePoint docs" : "";
       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.appendReferences(el, answer);
     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);
+    let offerTicket;
+    if (typeof answer.supportTicketEligible === "boolean") {
+      offerTicket = answer.supportTicketEligible;
+    } else {
+      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 || "");
+      offerTicket = !isFailure && (answer.disabled === true || looksBlocked) && eligibleRole;
+    }
+    if (offerTicket) {
+      this.appendTicketOffer(el, answer);
+    } else if (!isFailure && question && !wasNotHelpful) {
+      const nh = document.createElement("button");
+      nh.type = "button";
+      nh.className = "acw-link-btn acw-nothelpful";
+      nh.textContent = "This didn\u2019t help";
+      nh.addEventListener("click", () => {
+        nh.remove();
+        void this.runAsk(question, true);
+      });
+      el.appendChild(nh);
     }
     this.body.scrollTop = this.body.scrollHeight;
   }
+  /** KB references as safe links: https only, built with DOM APIs (no innerHTML), new tab, no opener/referrer. */
+  appendReferences(container, answer) {
+    const refs = normalizeReferences(answer.references);
+    if (refs.length === 0) return;
+    const wrap = document.createElement("div");
+    wrap.className = "acw-refs";
+    const label = document.createElement("div");
+    label.className = "acw-refs-label";
+    label.textContent = "Learn more:";
+    wrap.appendChild(label);
+    const list = document.createElement("ul");
+    list.className = "acw-refs-list";
+    for (const ref of refs) {
+      const li = document.createElement("li");
+      const a = document.createElement("a");
+      a.className = "acw-ref";
+      a.setAttribute("href", ref.href);
+      a.setAttribute("target", "_blank");
+      a.setAttribute("rel", "noopener noreferrer");
+      a.textContent = ref.title;
+      li.appendChild(a);
+      list.appendChild(li);
+    }
+    wrap.appendChild(list);
+    container.appendChild(wrap);
+  }
+  appendTicketOffer(container, answer) {
+    const offer = document.createElement("div");
+    offer.className = "acw-offer";
+    const text = document.createElement("div");
+    text.className = "acw-offer-text";
+    text.textContent = answer.supportTicketPrompt?.trim() || TICKET_OFFER_TEXT;
+    offer.appendChild(text);
+    const actions = document.createElement("div");
+    actions.className = "acw-offer-actions";
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "acw-chip";
+    btn.textContent = "Raise a support ticket";
+    btn.addEventListener("click", () => {
+      btn.disabled = true;
+      void this.openTicketDraft(answer).finally(() => {
+        btn.disabled = false;
+      });
+    });
+    actions.appendChild(btn);
+    this.appendOpenSupport(actions);
+    offer.appendChild(actions);
+    container.appendChild(offer);
+  }
+  /** Adds an "Open support" action when the host supplied `onOpenSupport`. */
+  appendOpenSupport(container) {
+    if (!this.config.onOpenSupport) return;
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "acw-link-btn acw-open-support";
+    b.textContent = "Open support";
+    b.addEventListener("click", () => this.openSupport());
+    container.appendChild(b);
+  }
+  /** Close the panel first (synchronously), then hand over to the host so the two overlays never stack. */
+  openSupport() {
+    const cb = this.config.onOpenSupport;
+    if (!cb) return;
+    this.close();
+    cb();
+  }
   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;
+    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;
+  }
+  /** Fetch the server-built draft, then show it as an editable form; the user triggers Send. */
+  async openTicketDraft(answer) {
+    const fromAnswer = /MS[A-Z0-9]{6,}/i.exec(answer.primaryReason || "");
+    const requestId = fromAnswer ? fromAnswer[0] : this.currentRequestId();
+    const epoch = this.epoch;
+    this.setProgress("Preparing your support ticket\u2026");
+    let draft;
+    try {
+      const sessionId = await this.ensureSession();
+      const qs = requestId ? `?requestId=${encodeURIComponent(requestId)}` : "";
+      const res = await fetch(`${this.config.apiBaseUrl}/api/sessions/${encodeURIComponent(sessionId)}/support-ticket/draft${qs}`, {
+        method: "GET",
+        headers: this.headers()
+      });
+      if (epoch !== this.epoch) return;
+      if (isSessionInvalidStatus(res.status)) {
+        if (await this.renderIfFeatureDisabled(res)) return;
+        this.handleInvalidSession();
+        return;
+      }
+      if (res.ok) {
+        const data = await res.json();
+        if (epoch !== this.epoch) return;
+        if (data && typeof data.subject === "string" && typeof data.description === "string") draft = data;
+      }
+    } catch {
+    }
+    if (epoch !== this.epoch) return;
+    this.setProgress("");
+    const fallback = this.localDraft(answer, requestId);
+    this.showTicketForm(
+      draft?.subject || fallback.subject,
+      draft?.description || fallback.description,
+      draft?.fields?.requestId || requestId,
+      answer
+    );
   }
-  /** Build a pre-filled, editable ticket draft and let the user review + Send (they trigger the API call). */
-  openTicketDraft(answer) {
-    const requestId = this.currentRequestId();
+  /** Used only when the draft endpoint is unavailable (older server or a transient error). */
+  localDraft(answer, requestId) {
     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";
@@ -464,41 +744,57 @@ var CopilotWidget = class {
 ` : "") + `
 What the copilot reported:
 ${reason}`;
+    return { subject, description };
+  }
+  showTicketForm(subject, description, requestId, answer) {
     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.className = "acw-ticket";
+    card.innerHTML = `<div class="acw-ticket-title">Raise a support ticket</div><div class="acw-ticket-sub">Review and edit the details below, then 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>`;
+    const subjectInput = card.querySelector(".acw-ticket-subject");
+    const descInput = card.querySelector(".acw-ticket-desc");
+    subjectInput.value = subject;
+    descInput.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();
+      const subj = subjectInput.value.trim();
+      const desc = descInput.value.trim();
+      if (!subj) {
+        subjectInput.focus();
+        return;
+      }
+      if (!desc) {
+        descInput.focus();
+        return;
+      }
       card.remove();
-      void this.submitTicket(subj, desc, requestId);
+      void this.submitTicket(subj, desc, requestId, answer.primaryReason);
     });
     this.body.appendChild(card);
     this.body.scrollTop = this.body.scrollHeight;
+    subjectInput.focus();
   }
-  async submitTicket(subject, description, requestId) {
+  async submitTicket(subject, description, requestId, reason) {
     this.setProgress("Sending your support ticket\u2026");
+    const epoch = this.epoch;
     try {
       const sessionId = await this.ensureSession();
-      const res = await fetch(`${this.config.apiBaseUrl}/api/sessions/${sessionId}/support-ticket`, {
+      const res = await fetch(`${this.config.apiBaseUrl}/api/sessions/${encodeURIComponent(sessionId)}/support-ticket`, {
         method: "POST",
         headers: this.headers(),
         body: JSON.stringify({
           tenantUniqueName: this.config.tenantUniqueName,
-          environment: this.config.environment,
           requestId,
           subject,
-          description
+          description,
+          reason,
+          question: this.lastQuestion || void 0
         })
       });
+      if (epoch !== this.epoch) return;
       this.setProgress("");
-      if (res.status === 403) {
-        this.renderAnswer({ status: "Forbidden", primaryReason: "Support tickets are available for Requestor/Approver roles." });
+      if (isSessionInvalidStatus(res.status)) {
+        if (await this.renderIfFeatureDisabled(res)) return;
+        this.handleInvalidSession();
         return;
       }
       if (!res.ok) {
@@ -506,17 +802,42 @@ ${reason}`;
         return;
       }
       const data = await res.json();
+      if (epoch !== this.epoch) return;
       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>` : "");
+        const msg = document.createElement("div");
+        msg.className = "acw-reason";
+        msg.textContent = data.message?.trim() || (data.ticketNumber ? `Your support ticket ${data.ticketNumber} has been created.` : "Your support ticket has been created.");
+        el.appendChild(msg);
+        const actions = document.createElement("div");
+        actions.className = "acw-offer-actions";
+        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.close();
+              this.config.onOpenTicket(ticket);
+            } else {
+              const href = safeHref(data.webUrl);
+              if (href) window.open(href, "_blank", "noopener,noreferrer");
+            }
+          });
+          actions.appendChild(open);
+        }
+        this.appendOpenSupport(actions);
+        if (actions.childElementCount > 0) el.appendChild(actions);
         this.body.appendChild(el);
         this.body.scrollTop = this.body.scrollHeight;
       } else {
         this.renderAnswer({ status: "RequestFailed", primaryReason: data?.reason || "Could not create the ticket." });
       }
     } catch {
+      if (epoch !== this.epoch) return;
       this.setProgress("");
       this.renderAnswer({ status: "RequestFailed", primaryReason: "Could not reach the copilot service." });
     }
@@ -525,21 +846,62 @@ ${reason}`;
   headers() {
     const h = { "Content-Type": "application/json" };
     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;
     return h;
   }
+  /** Reset the session when the tenant or the token's user no longer match the ones it was opened for. */
+  syncSessionScope() {
+    if (!this.config || !this.sessionId) return;
+    const tenantChanged = this.sessionTenant !== this.config.tenantUniqueName;
+    const identity = tokenIdentity(this.config.getAuthToken?.());
+    const userChanged = !!identity && !!this.sessionIdentity && identity !== this.sessionIdentity;
+    if (tenantChanged || userChanged) this.resetSession();
+  }
+  /**
+   * B5 contract check (R1): a 403 {status:"FeatureDisabled"} means a capability is switched off, not that the session is
+   * invalid - keep the session and show the server's reason instead of resetting.
+   */
+  async renderIfFeatureDisabled(res) {
+    if (res.status !== 403) return false;
+    try {
+      const body = await res.clone().json();
+      if (body?.status !== "FeatureDisabled") return false;
+      this.setProgress("");
+      this.renderAnswer({ status: "FeatureDisabled", primaryReason: typeof body.reason === "string" ? body.reason : "That part of the Copilot is not enabled yet." });
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  /** 403/404 on a session-scoped call: drop the session and tell the user to ask again. */
+  handleInvalidSession() {
+    this.setProgress("");
+    this.resetSession();
+    if (!this.body) return;
+    const el = document.createElement("div");
+    el.className = "acw-answer";
+    el.innerHTML = `<div class="acw-error">${escapeHtml(SESSION_RESET_TEXT)}</div>`;
+    this.body.appendChild(el);
+    this.body.scrollTop = this.body.scrollHeight;
+  }
   async ensureSession() {
+    this.syncSessionScope();
     if (this.sessionId) return this.sessionId;
+    const tenant = this.config.tenantUniqueName;
+    const identity = tokenIdentity(this.config.getAuthToken?.());
+    const epoch = this.epoch;
     const res = await fetch(`${this.config.apiBaseUrl}/api/sessions`, {
       method: "POST",
       headers: this.headers(),
-      body: JSON.stringify({ projectKey: this.config.projectKey, environment: this.config.environment })
+      // The session is bound to the signed-in user and this tenant (verified server-side).
+      body: JSON.stringify({ projectKey: this.config.projectKey, tenantUniqueName: tenant })
     });
     if (!res.ok) throw new Error(`Session creation failed (${res.status})`);
     const session = await res.json();
+    if (epoch !== this.epoch) throw new Error("The Copilot session was reset.");
     this.sessionId = session.sessionId;
+    this.sessionTenant = tenant;
+    this.sessionIdentity = identity;
     if (this.connection && this.sessionId) {
       try {
         await this.connection.invoke("JoinSession", this.sessionId);
@@ -548,25 +910,37 @@ ${reason}`;
     }
     return this.sessionId;
   }
-  async runAsk(question) {
+  async runAsk(question, notHelpful = false) {
     this.open();
     this.lastQuestion = question;
-    this.addMessage(question, "user");
+    this.addMessage(notHelpful ? "This didn\u2019t help." : question, "user");
     this.setProgress("Reading your question\u2026");
+    const epoch = this.epoch;
     try {
       const sessionId = await this.ensureSession();
-      const res = await fetch(`${this.config.apiBaseUrl}/api/sessions/${sessionId}/messages`, {
+      const body = { question, tenantUniqueName: this.config.tenantUniqueName, context: this.currentContext() };
+      if (notHelpful) body.notHelpful = true;
+      const res = await fetch(`${this.config.apiBaseUrl}/api/sessions/${encodeURIComponent(sessionId)}/messages`, {
         method: "POST",
         headers: this.headers(),
-        body: JSON.stringify({ question, tenantUniqueName: this.config.tenantUniqueName, context: this.currentContext() })
+        body: JSON.stringify(body)
       });
+      if (epoch !== this.epoch) return;
+      if (isSessionInvalidStatus(res.status)) {
+        if (await this.renderIfFeatureDisabled(res)) return;
+        this.handleInvalidSession();
+        return;
+      }
       if (!res.ok) {
         this.setProgress("");
         this.renderAnswer({ status: "RequestFailed", primaryReason: `The copilot service returned ${res.status}.` });
         return;
       }
-      this.renderAnswer(await res.json());
+      const answer = await res.json();
+      if (epoch !== this.epoch) return;
+      this.renderAnswer(answer, question, notHelpful);
     } catch (err) {
+      if (epoch !== this.epoch) return;
       this.setProgress("");
       const msg = err?.message ? String(err.message) : "Could not reach the copilot service.";
       this.renderAnswer({ status: "RequestFailed", primaryReason: msg });
@@ -575,7 +949,7 @@ ${reason}`;
   async connectSignalR() {
     if (!this.config.signalRHubUrl) return;
     const signalR = await import("@microsoft/signalr");
-    const connection = new signalR.HubConnectionBuilder().withUrl(this.config.signalRHubUrl).withAutomaticReconnect().build();
+    const connection = new signalR.HubConnectionBuilder().withUrl(this.config.signalRHubUrl, { accessTokenFactory: () => this.config.getAuthToken?.() ?? "" }).withAutomaticReconnect().build();
     for (const event of Object.keys(PROGRESS_LABELS)) {
       connection.on(event, () => {
         if (event !== "AnswerCompleted") this.setProgress(PROGRESS_LABELS[event]);
@@ -585,9 +959,6 @@ ${reason}`;
     this.connection = connection;
   }
 };
-function escapeHtml(s) {
-  return s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
-}
 
 // src/index.ts
 var instance = new CopilotWidget();
@@ -601,7 +972,9 @@ var ApplicationCopilotWidget = {
   promptUpload: () => instance.promptUpload(),
   ask: (question) => instance.ask(question),
   setContext: (context) => instance.setContext(context),
-  captureError: (errorContext) => instance.captureError(errorContext)
+  captureError: (errorContext) => instance.captureError(errorContext),
+  /** Drop the current Copilot session and conversation (e.g. after a tenant switch or sign-out). */
+  resetSession: () => instance.resetSession()
 };
 if (typeof window !== "undefined") {
   window.ApplicationCopilotWidget = ApplicationCopilotWidget;