@signalwire/web-components 1.0.0-dev-20260428141127 → 1.0.0-dev-20260428183200

package/dist/components/UI/layout/sw-ui-responsive-container.js

@@ -0,0 +1,78 @@
+import { LitElement as l, html as h, css as p } from "lit";
+import { customElement as c } from "lit/decorators.js";
+var d = Object.getOwnPropertyDescriptor, m = (i, n, s, o) => {
+  for (var e = o > 1 ? void 0 : o ? d(n, s) : n, t = i.length - 1, r; t >= 0; t--)
+    (r = i[t]) && (e = r(e) || e);
+  return e;
+};
+let a = class extends l {
+  render() {
+    return h`<div class="container"><slot></slot></div>`;
+  }
+};
+a.styles = p`
+    .container {
+      margin: 0 auto;
+
+      /* Default: small monitors */
+      width: 90vw;
+
+      /* Maintain 16:9 baseline */
+      aspect-ratio: 16 / 9;
+
+      /* Height cap: (16/9 height) + 300px */
+      max-height: calc((100vw * 9 / 16) + 300px);
+
+      /* Prevent overflow issues */
+      overflow: hidden;
+    }
+
+    /* 1. Larger monitors (MacBook Air 13" and up ~1280px+) */
+    @media (min-width: 1280px) {
+      .container {
+        width: 80vw;
+
+        /* Adjust cap relative to actual width */
+        max-height: calc((80vw * 9 / 16) + 300px);
+      }
+    }
+
+    /* 3. Mobile devices (portrait) */
+    @media (max-width: 600px) {
+      .container {
+        width: calc(100vw - 40px);
+
+        aspect-ratio: auto; /* let it flow naturally */
+        max-height: none;
+        height: 85svh;
+      }
+    }
+
+    /* 4. Edge cases: very small but not mobile (e.g., 500x400, landscape phones) */
+    @media (max-height: 500px) and (min-width: 600px) {
+      .container {
+        width: 90vw;
+
+        /* Cap height more aggressively */
+        max-height: 90vh;
+
+        /* Drop strict aspect ratio if needed */
+        aspect-ratio: auto;
+      }
+    }
+
+    /* Optional: landscape phones treated like small monitors */
+    @media (max-width: 900px) and (orientation: landscape) {
+      .container {
+        width: 90vw;
+        max-height: 90vh;
+      }
+    }
+  `;
+a = m([
+  c("sw-ui-responsive-container")
+], a);
+export {
+  a as SwUiResponsiveContainer
+};
+//# sourceMappingURL=sw-ui-responsive-container.js.map

package/dist/components/UI/layout/sw-ui-responsive-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-responsive-container.js","sources":["../../../../src/components/UI/layout/sw-ui-responsive-container.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n/**\n * Resizes itself to an appropriate modal size based on viewport size\n * @slot items to hold inside responsive modal\n */\n@customElement('sw-ui-responsive-container')\nexport class SwUiResponsiveContainer extends LitElement {\n  static styles = css`\n    .container {\n      margin: 0 auto;\n\n      /* Default: small monitors */\n      width: 90vw;\n\n      /* Maintain 16:9 baseline */\n      aspect-ratio: 16 / 9;\n\n      /* Height cap: (16/9 height) + 300px */\n      max-height: calc((100vw * 9 / 16) + 300px);\n\n      /* Prevent overflow issues */\n      overflow: hidden;\n    }\n\n    /* 1. Larger monitors (MacBook Air 13\" and up ~1280px+) */\n    @media (min-width: 1280px) {\n      .container {\n        width: 80vw;\n\n        /* Adjust cap relative to actual width */\n        max-height: calc((80vw * 9 / 16) + 300px);\n      }\n    }\n\n    /* 3. Mobile devices (portrait) */\n    @media (max-width: 600px) {\n      .container {\n        width: calc(100vw - 40px);\n\n        aspect-ratio: auto; /* let it flow naturally */\n        max-height: none;\n        height: 85svh;\n      }\n    }\n\n    /* 4. Edge cases: very small but not mobile (e.g., 500x400, landscape phones) */\n    @media (max-height: 500px) and (min-width: 600px) {\n      .container {\n        width: 90vw;\n\n        /* Cap height more aggressively */\n        max-height: 90vh;\n\n        /* Drop strict aspect ratio if needed */\n        aspect-ratio: auto;\n      }\n    }\n\n    /* Optional: landscape phones treated like small monitors */\n    @media (max-width: 900px) and (orientation: landscape) {\n      .container {\n        width: 90vw;\n        max-height: 90vh;\n      }\n    }\n  `;\n\n  render() {\n    return html`<div class=\"container\"><slot></slot></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-ui-responsive-container': SwUiResponsiveContainer;\n  }\n}\n"],"names":["SwUiResponsiveContainer","LitElement","html","css","__decorateClass","customElement"],"mappings":";;;;;;;AAQO,IAAMA,IAAN,cAAsCC,EAAW;AAAA,EA6DtD,SAAS;AACP,WAAOC;AAAA,EACT;AACF;AAhEaF,EACJ,SAASG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADLH,IAANI,EAAA;AAAA,EADNC,EAAc,4BAA4B;AAAA,GAC9BL,CAAA;"}

package/dist/components/UI/sw-ui-alert.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+export type PromptType = 'confirm' | 'alert';
+/**
+ * Confirmation/alert prompt dialog
+ *
+ * @slot description content (falls back to the `description` property)
+ */
+export declare class SwUiAlert extends LitElement {
+    static styles: import("lit").CSSResult;
+    title: string;
+    description: string;
+    type: PromptType;
+    private _dialog;
+    private _resolve;
+    /** Opens the prompt and returns a promise that resolves with the user's choice. */
+    show(): Promise<boolean>;
+    private _close;
+    render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * Programmatically show a prompt and await the user's response.
+ *
+ * @example
+ * const confirmed = await showPrompt({ title: "Delete item?", type: "confirm" });
+ * const ack = await showPrompt({ title: "Done!", type: "alert" });
+ */
+export declare function showPrompt(options: {
+    title: string;
+    description?: string;
+    type?: PromptType;
+}): Promise<boolean>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-ui-alert': SwUiAlert;
+    }
+}
+//# sourceMappingURL=sw-ui-alert.d.ts.map

package/dist/components/UI/sw-ui-alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-alert.d.ts","sourceRoot":"","sources":["../../../src/components/UI/sw-ui-alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7C;;;;GAIG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BA6DX;IAEkB,KAAK,EAAE,MAAM,CAAC;IACtB,WAAW,SAAM;IACA,IAAI,EAAE,UAAU,CAAa;IAEzC,OAAO,CAAC,OAAO,CAAqB;IAErD,OAAO,CAAC,QAAQ,CAA2C;IAE3D,mFAAmF;IACnF,IAAI,IAAI,OAAO,CAAC,OAAO,CAAC;IAOxB,OAAO,CAAC,MAAM;IAMd,MAAM;CAkBP;AAED;;;;;;GAMG;AACH,wBAAsB,UAAU,CAAC,OAAO,EAAE;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,GAAG,OAAO,CAAC,OAAO,CAAC,CAUnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}

package/dist/components/UI/sw-ui-alert.js

@@ -0,0 +1,126 @@
+import { LitElement as p, html as n, css as u } from "lit";
+import { property as d, query as h, customElement as m } from "lit/decorators.js";
+var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (e, t, i, c) => {
+  for (var r = c > 1 ? void 0 : c ? f(t, i) : t, l = e.length - 1, a; l >= 0; l--)
+    (a = e[l]) && (r = (c ? a(t, i, r) : a(r)) || r);
+  return c && r && b(t, i, r), r;
+};
+let o = class extends p {
+  constructor() {
+    super(...arguments), this.description = "", this.type = "confirm", this._resolve = null;
+  }
+  /** Opens the prompt and returns a promise that resolves with the user's choice. */
+  show() {
+    return this._dialog.showModal(), new Promise((e) => {
+      this._resolve = e;
+    });
+  }
+  _close(e) {
+    var t;
+    (t = this._resolve) == null || t.call(this, e), this._resolve = null, this._dialog.close();
+  }
+  render() {
+    return n`
+      <dialog>
+        <h2 class="title">${this.title}</h2>
+        <div class="body">
+          <slot>${this.description}</slot>
+        </div>
+        <div class="actions">
+          ${this.type === "confirm" ? n`
+                <button class="reject" @click=${() => this._close(!1)}>Reject</button>
+                <button class="accept" @click=${() => this._close(!0)}>Accept</button>
+              ` : n` <button class="accept" @click=${() => this._close(!0)}>OK</button> `}
+        </div>
+      </dialog>
+    `;
+  }
+};
+o.styles = u`
+    :host {
+      font-family: var(--type-family-body);
+    }
+
+    dialog {
+      border: none;
+      border-radius: var(--radius-md);
+      padding: 24px;
+      min-width: 280px;
+      max-width: 400px;
+      box-shadow: var(--shadow-md);
+    }
+
+    dialog::backdrop {
+      background: rgba(0, 0, 0, 0.4);
+    }
+
+    .title {
+      margin: 0 0 12px;
+      font-size: 1.125rem;
+      font-weight: 600;
+    }
+
+    .body {
+      margin: 0 0 20px;
+      line-height: 1.5;
+    }
+
+    .actions {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+    }
+
+    button {
+      padding: 8px 16px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 0.875rem;
+      font-family: inherit;
+    }
+
+    .accept {
+      background: var(--interactive-button-primary-bg);
+      color: white;
+    }
+
+    .accept:hover {
+      background: var(--interactive-button-primary-hover);
+    }
+
+    .reject {
+      background: #f3f4f6;
+      color: #374151;
+    }
+
+    .reject:hover {
+      background: #e5e7eb;
+    }
+  `;
+s([
+  d()
+], o.prototype, "title", 2);
+s([
+  d()
+], o.prototype, "description", 2);
+s([
+  d({ reflect: !0 })
+], o.prototype, "type", 2);
+s([
+  h("dialog")
+], o.prototype, "_dialog", 2);
+o = s([
+  m("sw-ui-alert")
+], o);
+async function g(e) {
+  const t = document.createElement("sw-ui-alert");
+  t.title = e.title, e.description !== void 0 && (t.description = e.description), e.type !== void 0 && (t.type = e.type), document.body.appendChild(t), await t.updateComplete;
+  const i = await t.show();
+  return t.remove(), i;
+}
+export {
+  o as SwUiAlert,
+  g as showPrompt
+};
+//# sourceMappingURL=sw-ui-alert.js.map

package/dist/components/UI/sw-ui-alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-alert.js","sources":["../../../src/components/UI/sw-ui-alert.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nexport type PromptType = 'confirm' | 'alert';\n\n/**\n * Confirmation/alert prompt dialog\n *\n * @slot description content (falls back to the `description` property)\n */\n@customElement('sw-ui-alert')\nexport class SwUiAlert extends LitElement {\n  static styles = css`\n    :host {\n      font-family: var(--type-family-body);\n    }\n\n    dialog {\n      border: none;\n      border-radius: var(--radius-md);\n      padding: 24px;\n      min-width: 280px;\n      max-width: 400px;\n      box-shadow: var(--shadow-md);\n    }\n\n    dialog::backdrop {\n      background: rgba(0, 0, 0, 0.4);\n    }\n\n    .title {\n      margin: 0 0 12px;\n      font-size: 1.125rem;\n      font-weight: 600;\n    }\n\n    .body {\n      margin: 0 0 20px;\n      line-height: 1.5;\n    }\n\n    .actions {\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n    }\n\n    button {\n      padding: 8px 16px;\n      border: none;\n      border-radius: 4px;\n      cursor: pointer;\n      font-size: 0.875rem;\n      font-family: inherit;\n    }\n\n    .accept {\n      background: var(--interactive-button-primary-bg);\n      color: white;\n    }\n\n    .accept:hover {\n      background: var(--interactive-button-primary-hover);\n    }\n\n    .reject {\n      background: #f3f4f6;\n      color: #374151;\n    }\n\n    .reject:hover {\n      background: #e5e7eb;\n    }\n  `;\n\n  @property() declare title: string;\n  @property() description = '';\n  @property({ reflect: true }) type: PromptType = 'confirm';\n\n  @query('dialog') private _dialog!: HTMLDialogElement;\n\n  private _resolve: ((value: boolean) => void) | null = null;\n\n  /** Opens the prompt and returns a promise that resolves with the user's choice. */\n  show(): Promise<boolean> {\n    this._dialog.showModal();\n    return new Promise((resolve) => {\n      this._resolve = resolve;\n    });\n  }\n\n  private _close(value: boolean) {\n    this._resolve?.(value);\n    this._resolve = null;\n    this._dialog.close();\n  }\n\n  render() {\n    return html`\n      <dialog>\n        <h2 class=\"title\">${this.title}</h2>\n        <div class=\"body\">\n          <slot>${this.description}</slot>\n        </div>\n        <div class=\"actions\">\n          ${this.type === 'confirm'\n            ? html`\n                <button class=\"reject\" @click=${() => this._close(false)}>Reject</button>\n                <button class=\"accept\" @click=${() => this._close(true)}>Accept</button>\n              `\n            : html` <button class=\"accept\" @click=${() => this._close(true)}>OK</button> `}\n        </div>\n      </dialog>\n    `;\n  }\n}\n\n/**\n * Programmatically show a prompt and await the user's response.\n *\n * @example\n * const confirmed = await showPrompt({ title: \"Delete item?\", type: \"confirm\" });\n * const ack = await showPrompt({ title: \"Done!\", type: \"alert\" });\n */\nexport async function showPrompt(options: {\n  title: string;\n  description?: string;\n  type?: PromptType;\n}): Promise<boolean> {\n  const el = document.createElement('sw-ui-alert') as SwUiAlert;\n  el.title = options.title;\n  if (options.description !== undefined) el.description = options.description;\n  if (options.type !== undefined) el.type = options.type;\n  document.body.appendChild(el);\n  await el.updateComplete;\n  const result = await el.show();\n  el.remove();\n  return result;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-ui-alert': SwUiAlert;\n  }\n}\n"],"names":["SwUiAlert","LitElement","resolve","value","_a","html","css","__decorateClass","property","query","customElement","showPrompt","options","el","result"],"mappings":";;;;;;;AAWO,IAAMA,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAiEO,KAAA,cAAc,IACG,KAAA,OAAmB,WAIhD,KAAQ,WAA8C;AAAA,EAAA;AAAA;AAAA,EAGtD,OAAyB;AACvB,gBAAK,QAAQ,UAAA,GACN,IAAI,QAAQ,CAACC,MAAY;AAC9B,WAAK,WAAWA;AAAA,IAClB,CAAC;AAAA,EACH;AAAA,EAEQ,OAAOC,GAAgB;;AAC7B,KAAAC,IAAA,KAAK,aAAL,QAAAA,EAAA,WAAgBD,IAChB,KAAK,WAAW,MAChB,KAAK,QAAQ,MAAA;AAAA,EACf;AAAA,EAEA,SAAS;AACP,WAAOE;AAAA;AAAA,4BAEiB,KAAK,KAAK;AAAA;AAAA,kBAEpB,KAAK,WAAW;AAAA;AAAA;AAAA,YAGtB,KAAK,SAAS,YACZA;AAAA,gDACkC,MAAM,KAAK,OAAO,EAAK,CAAC;AAAA,gDACxB,MAAM,KAAK,OAAO,EAAI,CAAC;AAAA,kBAEzDA,mCAAsC,MAAM,KAAK,OAAO,EAAI,CAAC,eAAe;AAAA;AAAA;AAAA;AAAA,EAIxF;AACF;AAxGaL,EACJ,SAASM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+DIC,EAAA;AAAA,EAAnBC,EAAA;AAAS,GAhECR,EAgES,WAAA,SAAA,CAAA;AACRO,EAAA;AAAA,EAAXC,EAAA;AAAS,GAjECR,EAiEC,WAAA,eAAA,CAAA;AACiBO,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAlEhBR,EAkEkB,WAAA,QAAA,CAAA;AAEJO,EAAA;AAAA,EAAxBE,EAAM,QAAQ;AAAA,GApEJT,EAoEc,WAAA,WAAA,CAAA;AApEdA,IAANO,EAAA;AAAA,EADNG,EAAc,aAAa;AAAA,GACfV,CAAA;AAiHb,eAAsBW,EAAWC,GAIZ;AACnB,QAAMC,IAAK,SAAS,cAAc,aAAa;AAC/C,EAAAA,EAAG,QAAQD,EAAQ,OACfA,EAAQ,gBAAgB,WAAWC,EAAG,cAAcD,EAAQ,cAC5DA,EAAQ,SAAS,WAAWC,EAAG,OAAOD,EAAQ,OAClD,SAAS,KAAK,YAAYC,CAAE,GAC5B,MAAMA,EAAG;AACT,QAAMC,IAAS,MAAMD,EAAG,KAAA;AACxB,SAAAA,EAAG,OAAA,GACIC;AACT;"}

package/dist/components/UI/sw-ui-transcript-view.d.ts

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+/**
+ * A single transcript entry rendered as a chat bubble.
+ *
+ * The optional `meta` field carries rich content from the AI.
+ */
+export interface TranscriptEntry {
+    id: string;
+    type: 'user' | 'agent' | 'system';
+    state: 'partial' | 'complete';
+    text: string;
+    meta?: TranscriptEntryMeta;
+}
+/** Rich content attached to a transcript entry. */
+export interface TranscriptEntryMeta {
+    /** Clickable links. */
+    links?: {
+        label: string;
+        url: string;
+    }[];
+    /** Code snippet. */
+    code?: {
+        language?: string;
+        content: string;
+    };
+    /**
+     * Content that the agent pushed via a `display_content` user_event.
+     * Stored here so the download serializer can include the full payload.
+     */
+    displayContent?: {
+        title?: string;
+        content: string;
+        format: 'text' | 'markdown' | 'code' | 'html';
+        language?: string;
+    };
+}
+export declare class SwUiTranscriptView extends LitElement {
+    static styles: import("lit").CSSResult;
+    entries: TranscriptEntry[];
+    header: string;
+    emptyText: string;
+    private _codeCache;
+    private _lastEntryCount;
+    protected updated(changed: Map<string, unknown>): void;
+    private _highlightNewEntries;
+    private _downloadTranscript;
+    private _autoScroll;
+    private _renderCode;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-ui-transcript-view': SwUiTranscriptView;
+    }
+}
+//# sourceMappingURL=sw-ui-transcript-view.d.ts.map

package/dist/components/UI/sw-ui-transcript-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-transcript-view.d.ts","sourceRoot":"","sources":["../../../src/components/UI/sw-ui-transcript-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAMrD;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAClC,KAAK,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED,mDAAmD;AACnD,MAAM,WAAW,mBAAmB;IAClC,uBAAuB;IACvB,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACzC,oBAAoB;IACpB,IAAI,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C;;;OAGG;IACH,cAAc,CAAC,EAAE;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;QAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED,qBACa,kBAAmB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,0BAqOT;IAE4B,OAAO,EAAE,eAAe,EAAE,CAAM;IACpC,MAAM,SAAgB;IACG,SAAS,SAAM;IAG3D,OAAO,CAAC,UAAU,CAA6B;IAExD,OAAO,CAAC,eAAe,CAAK;IAE5B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;YAWxC,oBAAoB;IAkBlC,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,WAAW;IAWnB,MAAM;CA4CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,kBAAkB,CAAC;KAC7C;CACF"}

package/dist/components/UI/sw-ui-transcript-view.js

@@ -0,0 +1,341 @@
+import { LitElement as f, nothing as p, html as n, css as m } from "lit";
+import { property as d, state as h, customElement as u } from "lit/decorators.js";
+import { unsafeHTML as b } from "lit/directives/unsafe-html.js";
+import { highlight as g } from "../../utils/prism.js";
+import { transcriptToMarkdown as x } from "../../utils/transcriptToMarkdown.js";
+var k = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (e, t, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? v(t, o) : t, l = e.length - 1, c; l >= 0; l--)
+    (c = e[l]) && (a = (r ? c(t, o, a) : c(a)) || a);
+  return r && a && k(t, o, a), a;
+};
+let i = class extends f {
+  constructor() {
+    super(...arguments), this.entries = [], this.header = "Transcript", this.emptyText = "", this._codeCache = /* @__PURE__ */ new Map(), this._lastEntryCount = 0;
+  }
+  updated(e) {
+    super.updated(e), this.entries.length !== this._lastEntryCount && (this._lastEntryCount = this.entries.length, this._autoScroll()), e.has("entries") && this._highlightNewEntries();
+  }
+  async _highlightNewEntries() {
+    const e = this.entries.filter((t) => {
+      var o;
+      return ((o = t.meta) == null ? void 0 : o.code) && !this._codeCache.has(t.id);
+    });
+    e.length !== 0 && (await Promise.all(
+      e.map(async (t) => {
+        const { content: o, language: r = "" } = t.meta.code, a = await g(o, r);
+        this._codeCache = new Map(this._codeCache).set(t.id, a);
+      })
+    ), await this.updateComplete, this._autoScroll());
+  }
+  _downloadTranscript() {
+    const e = x(this.entries), t = new Blob([e], { type: "text/markdown;charset=utf-8" }), o = URL.createObjectURL(t), r = document.createElement("a");
+    r.href = o, r.download = `transcript-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.md`, r.click(), URL.revokeObjectURL(o);
+  }
+  _autoScroll() {
+    var o;
+    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".messages");
+    if (!e) return;
+    e.scrollHeight - e.scrollTop - e.clientHeight < 120 && e.scrollTo({ top: e.scrollHeight, behavior: "smooth" });
+  }
+  _renderCode(e) {
+    var r;
+    const t = (r = e.meta) == null ? void 0 : r.code;
+    if (!t) return p;
+    const o = this._codeCache.get(e.id);
+    return n`
+      <div class="meta-code" part="code">
+        <pre><code>${o ? b(o) : t.content}</code></pre>
+      </div>
+    `;
+  }
+  render() {
+    const e = this.entries.some((t) => t.state === "complete");
+    return n`
+      <div class="header" part="header">
+        <span>${this.header}</span>
+        <button
+          class="download-btn"
+          part="download-btn"
+          title="Download transcript as Markdown"
+          ?disabled=${!e}
+          @click=${this._downloadTranscript}
+        >
+          <sw-ui-icon name="download" size="15"></sw-ui-icon>
+        </button>
+      </div>
+
+      ${this.entries.length === 0 ? n`<div class="empty" part="empty">${this.emptyText}</div>` : n`
+            <div class="messages" part="messages">
+              ${this.entries.map(
+      (t) => {
+        var o, r;
+        return n`
+                  <div
+                    class="bubble ${t.type} ${t.state === "partial" ? "partial" : ""}"
+                    part="bubble bubble-${t.type}"
+                  >
+                    ${t.text}
+                    ${(r = (o = t.meta) == null ? void 0 : o.links) != null && r.length ? n`<div class="meta-links">
+                          ${t.meta.links.map(
+          (a) => n`<a href=${a.url} target="_blank" rel="noopener">${a.label}</a>`
+        )}
+                        </div>` : p}
+                    ${this._renderCode(t)}
+                  </div>
+                `;
+      }
+    )}
+            </div>
+          `}
+    `;
+  }
+};
+i.styles = m`
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        background: var(--bg-page);
+        color: var(--fg-default);
+        font-family: var(--type-family-body);
+        font-size: var(--type-size-small);
+        overflow: hidden;
+      }
+
+      .header {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 10px 8px 14px;
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: color-mix(in srgb, var(--fg-default) 40%, transparent);
+        border-bottom: 1px solid var(--border-default);
+        user-select: none;
+      }
+
+      .download-btn {
+        all: unset;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 26px;
+        height: 26px;
+        border-radius: 5px;
+        cursor: pointer;
+        color: color-mix(in srgb, var(--fg-default) 50%, transparent);
+        transition:
+          background var(--transition-fast),
+          color var(--transition-fast);
+      }
+
+      .download-btn:hover {
+        background: var(--bg-surface-raised);
+        color: var(--fg-default);
+      }
+
+
+      .messages {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 10px 12px 14px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        scroll-behavior: smooth;
+      }
+
+      .messages::-webkit-scrollbar {
+        width: 4px;
+      }
+      .messages::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      .messages::-webkit-scrollbar-thumb {
+        background: var(--bg-surface-raised);
+        border-radius: 2px;
+      }
+
+      .empty {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 13px;
+        color: rgba(255, 255, 255, 0.25);
+        padding: 20px;
+        text-align: center;
+      }
+
+      .bubble {
+        max-width: 85%;
+        padding: 8px 12px;
+        border-radius: 14px;
+        font-size: 0.8125rem;
+        line-height: 1.45;
+        word-break: break-word;
+        animation: pop-in 0.15s ease-out;
+      }
+
+      @keyframes pop-in {
+        from {
+          opacity: 0;
+          transform: scale(0.94) translateY(4px);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1) translateY(0);
+        }
+      }
+
+      .user {
+        align-self: flex-end;
+        background: var(--interactive-button-primary-bg);
+        color: #fff;
+        border-bottom-right-radius: 4px;
+      }
+      .agent {
+        align-self: flex-start;
+        background: var(--bg-surface);
+        color: var(--fg-default);
+        border-bottom-left-radius: 4px;
+      }
+      .system {
+        align-self: center;
+        background: transparent;
+        border: 1px solid var(--border-default);
+        color: var(--fg-default);
+        font-size: 0.75rem;
+        max-width: 95%;
+      }
+
+      .partial {
+        opacity: 0.55;
+      }
+
+      /* ── Links ── */
+      .meta-links {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        margin-top: 6px;
+      }
+
+      .meta-links a {
+        color: var(--interactive-button-primary-bg);
+        text-decoration: none;
+        font-size: 0.75rem;
+        padding: 2px 8px;
+        border: 1px solid var(--interactive-button-primary-bg);
+        border-radius: 4px;
+        transition: background var(--transition-fast);
+      }
+
+      .meta-links a:hover {
+        background: var(--interactive-button-primary-bg);
+        color: #fff;
+      }
+
+      /* ── Code block ── */
+      .meta-code {
+        margin-top: 8px;
+        border-radius: 6px;
+        overflow: hidden;
+      }
+
+      .meta-code pre {
+        margin: 0;
+        padding: 10px 12px;
+        background: #1a1b26;
+        overflow-x: auto;
+        font-size: 0.72rem;
+        line-height: 1.5;
+      }
+
+      .meta-code code {
+        font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+        color: #f8f8f2;
+      }
+
+      /* ── Prism Okaidia theme ── */
+      .token.comment,
+      .token.prolog,
+      .token.doctype,
+      .token.cdata {
+        color: #8292a2;
+      }
+      .token.punctuation {
+        color: #f8f8f2;
+      }
+      .token.namespace {
+        opacity: 0.7;
+      }
+      .token.property,
+      .token.tag,
+      .token.constant,
+      .token.symbol,
+      .token.deleted {
+        color: #f92672;
+      }
+      .token.boolean,
+      .token.number {
+        color: #ae81ff;
+      }
+      .token.selector,
+      .token.attr-name,
+      .token.string,
+      .token.char,
+      .token.builtin,
+      .token.inserted {
+        color: #a6e22e;
+      }
+      .token.operator,
+      .token.entity,
+      .token.url,
+      .token.variable {
+        color: #f8f8f2;
+      }
+      .token.atrule,
+      .token.attr-value,
+      .token.function,
+      .token.class-name {
+        color: #e6db74;
+      }
+      .token.keyword {
+        color: #66d9ef;
+      }
+      .token.regex,
+      .token.important {
+        color: #fd971f;
+      }
+      .token.important,
+      .token.bold {
+        font-weight: bold;
+      }
+      .token.italic {
+        font-style: italic;
+      }
+    `;
+s([
+  d({ attribute: !1 })
+], i.prototype, "entries", 2);
+s([
+  d({ type: String })
+], i.prototype, "header", 2);
+s([
+  d({ type: String, attribute: "empty-text" })
+], i.prototype, "emptyText", 2);
+s([
+  h()
+], i.prototype, "_codeCache", 2);
+i = s([
+  u("sw-ui-transcript-view")
+], i);
+export {
+  i as SwUiTranscriptView
+};
+//# sourceMappingURL=sw-ui-transcript-view.js.map