@telia-ace/widget-conversation 1.0.34-experimental.18 → 1.0.34-experimental.19

package/dist/components/conversation/conversation.d.ts

@@ -1,8 +1,4 @@
 import { LitElement } from 'lit';
-import './ui/conversation-content';
-import './ui/conversation-input';
-import './ui/conversation-message';
-import './ui/message';
 declare const Conversation_base: (new (...args: any[]) => import("@telia-ace/widget-ui/dist/mixins/requester").RequesterInterface) & typeof LitElement;
 export default class Conversation extends Conversation_base {
     static styles: import("lit").CSSResult;

package/dist/conversation-wrapper.fa02c133.js

@@ -0,0 +1,475 @@
+var z = (a, e, s) => new Promise((r, t) => {
+  var n = (m) => {
+    try {
+      p(s.next(m));
+    } catch (x) {
+      t(x);
+    }
+  }, o = (m) => {
+    try {
+      p(s.throw(m));
+    } catch (x) {
+      t(x);
+    }
+  }, p = (m) => m.done ? r(m.value) : Promise.resolve(m.value).then(n, o);
+  p((s = s.apply(a, e)).next());
+});
+import { Requester as R, WidgetComponentMixin as T, NodeConnector as L } from "@telia-ace/widget-ui";
+import { ComponentPlatform as j, ComponentQuery as D } from "@telia-ace/widget-core";
+import { LitElement as v, html as c, nothing as u, css as M, unsafeCSS as A } from "lit";
+import { property as i, state as E } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { createRef as U, ref as I } from "lit/directives/ref.js";
+import { ConversationMessageType as b, ConversationMessageListItemType as g } from "./index.js";
+import { spread as q } from "@open-wc/lit-helpers";
+import { html as l, unsafeStatic as B } from "lit/static-html.js";
+import "@telia-ace/widget-services";
+import "@telia-ace/widget-utilities";
+import "@telia-ace/widget-forms";
+import "@telia-ace/widget-plugins";
+import "react";
+const K = `:host{--send-button-color: #a6a6a6}.wrapper{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;overflow-y:auto}.scrollable{display:flex;flex-direction:column;align-items:stretch;padding:0 var(--size-medium)}.scrollable:focus-visible{outline:var(--accessibility-border);color:var(--accessibility-colors-inactiveText);border-color:transparent}.message-container{display:flex}.message-container-left{justify-content:start}.message-container-center{justify-content:center}.message-container-right{justify-content:end}.conversation-entry{margin:0;margin-bottom:var(--size-medium)}.conversation-entry:first-of-type{margin-top:var(--size-medium)}.conversation-entry:last-of-type{padding-bottom:var(--size-medium)}.conversation-entry span,.conversation-entry p,.conversation-entry a,.conversation-entry div{font-weight:300}.conversation-entry b,.conversation-entry h1{font-weight:400}.conversation-entry .agent-message{display:grid;margin-right:10%;width:90%;grid-template-columns:1fr;grid-template-rows:1fr auto;grid-template-areas:"content" "info"}.conversation-entry .agent-message.has-avatar{grid-template-columns:auto 1fr;grid-template-rows:1fr auto;grid-template-areas:"avatar content" ". info"}.conversation-entry .user-message{margin-left:10%;width:90%;display:flex;flex-direction:column;align-items:flex-end}.conversation-entry .content-bundle{grid-area:content;max-width:100%;overflow:hidden}.conversation-entry .timestamp{font-size:var(--fonts-small);color:var(--colors-text);font-weight:300;margin:0;line-height:1.5em;grid-area:info}.content{display:inline-block;margin-top:var(--size-normal);max-width:100%}.content>*{overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;word-break:break-word;hyphens:auto}.content.full-width{width:100%}.content.padded{padding:var(--sized-medium)}.content.user.stacked{background-color:var(--colors-primary);color:var(--colors-accent);border-top-left-radius:var(--borderRadius);border-bottom-left-radius:var(--borderRadius)}.content.user.stacked.stacked-first{border-top-right-radius:var(--borderRadius)}.content.user.stacked.stacked-last{border-bottom-right-radius:var(--borderRadius)}.content.stacked:not(.user){background-color:var(--colors-accent);color:var(--colors-text);border:var(--border, "none");border-top-right-radius:var(--borderRadius);border-bottom-right-radius:var(--borderRadius)}.content.stacked:not(.user).stacked-first{border-top-left-radius:var(--borderRadius)}.content.stacked:not(.user).stacked-last{border-bottom-left-radius:var(--borderRadius)}.message-type-text{margin:var(--size-medium) 0;padding:0 var(--size-medium)}.message-type-html{font-size:var(--fonts-normal);font-weight:300;line-height:1.5em;color:var(--colors-text);margin:var(--size-medium) 0;padding:0 var(--size-medium);color:inherit}.message-type-html h1,.message-type-html h2,.message-type-html h3,.message-type-html h4,.message-type-html h5,.message-type-html h6{word-break:break-word}.message-type-html h1:first-child,.message-type-html h2:first-child,.message-type-html h3:first-child,.message-type-html h4:first-child,.message-type-html h5:first-child,.message-type-html h6:first-child{margin-top:0}.message-type-html h1:only-child,.message-type-html h2:only-child,.message-type-html h3:only-child,.message-type-html h4:only-child,.message-type-html h5:only-child,.message-type-html h6:only-child{margin:0}.message-type-html h1:last-child,.message-type-html h2:last-child,.message-type-html h3:last-child,.message-type-html h4:last-child,.message-type-html h5:last-child,.message-type-html h6:last-child{margin-bottom:0}.message-type-html a:focus-visible{outline:var(--accessibility-border);color:var(--accessibility-colors-inactiveText);border-color:transparent;text-decoration:underline}.message-type-html img{max-width:100%!important;height:auto!important}.message-type-html p{word-break:break-word;margin:var(--size-normal) 0}.message-type-html p:first-child{margin:0 0 var(--size-normal)}.message-type-html p:last-child{margin:var(--size-normal) 0 0}.message-type-html p:only-child{margin:0}.message-type-html a{color:var(--colors-link)}.message-type-html a:focus-visible{outline:var(--accessibility-border);color:var(--accessibility-colors-inactiveText);border-color:transparent}.message-type-separator{width:100%;border-bottom:var(--border)}.message-type-button-list{margin:var(--size-medium) 0;padding:0 var(--size-medium)}.message-type-button-list ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--size-normal)}.message-type-button-list ul>li{margin:0}.message-type-button-list-button{text-align:center;font-weight:300;border-radius:var(--borderRadius);font-family:inherit;font-size:var(--fonts-normal);display:block;padding:var(--size-normal);background-color:var(--colors-primary);width:100%;color:#fff;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-size:inherit;border:none}.message-type-button-list-button:focus-visible{outline:var(--accessibility-border);color:var(--accessibility-colors-inactiveText);border-color:transparent;background-color:transparent}.message-type-button-list-button i,.message-type-button-list-button svg{margin-right:var(--size-small)}.message-type-link-list{margin:var(--size-medium) 0;padding:0 var(--size-medium)}.message-type-link-list h1{white-space:normal;font-size:var(--fonts-medium);font-weight:400;margin:0 0 var(--size-normal);color:var(--colors-text);line-height:1.8em}.message-type-link-list ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--size-normal)}.message-type-link-list ul>li{margin:0}.message-type-link-list-button{display:block;text-align:left;font-weight:300;color:var(--colors-primary);max-width:100%;text-overflow:ellipsis;overflow:hidden;background-color:transparent;cursor:pointer;font-size:inherit;border:none}.message-list{list-style:none;padding:0;margin:0}.message-list .message-list-item p{padding:0;margin:0}.conversation-input{display:flex;align-items:center;background-color:var(--colors-accent);border-top:var(--inputBorder)}.conversation-input.has-content{--send-button-color: var(--colors-primary)}.conversation-input input{flex:1;border:none;background-color:transparent;font-weight:300;font-size:var(--fonts-normal);line-height:1.2em;outline:none;padding:var(--size-medium);color:var(--colors-text)}.conversation-input input::placeholder{color:var(--colors-textLight);font-style:italic}.conversation-input button{flex:0 0 50px;align-self:stretch;background-color:transparent;display:flex;align-items:center;justify-content:center;border:none;color:var(--send-button-color)}conversation-content{flex:0 1 100%;overflow-y:auto;overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:thin;scrollbar-color:transparent transparent;scrollbar-color:#7f7f7f transparent!important;scrollbar-width:thin!important;-ms-overflow-style:none!important}conversation-content::-webkit-scrollbar{width:3px!important;background-color:transparent;border-left:none}conversation-content::-webkit-scrollbar-thumb{background-color:#7f7f7f!important}conversation-content::-webkit-scrollbar-track{-webkit-box-shadow:none!important;background-color:transparent}conversation-content ::-webkit-scrollbar-thumb{background-color:#7f7f7f!important}conversation-input{flex:0 0 auto;min-height:50px;max-height:150px}
+`;
+var N = Object.defineProperty, W = Object.getOwnPropertyDescriptor, S = (a, e, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? W(e, s) : e, n = a.length - 1, o; n >= 0; n--)
+    (o = a[n]) && (t = (r ? o(e, s, t) : o(t)) || t);
+  return r && t && N(e, s, t), t;
+};
+class k extends v {
+  constructor() {
+    super(), this.userLabel = "", this.messages = [];
+  }
+  render() {
+    return c`
+            <div class="scrollable">
+                ${this.messages.map(
+      (e) => c`<div class="conversation-entry">
+                        <conversation-message
+                            .content=${e.content}
+                            .sender=${e.sender}
+                            .messageType=${e.type}
+                            .timestamp=${e.timestamp}
+                            .userLabel=${this.userLabel}
+                        />
+                    </div>`
+    )}
+            </div>
+        `;
+  }
+  createRenderRoot() {
+    return this;
+  }
+}
+S([
+  i({ type: Array })
+], k.prototype, "messages", 2);
+S([
+  i({ type: String })
+], k.prototype, "userLabel", 2);
+var H = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, O = (a, e, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? Q(e, s) : e, n = a.length - 1, o; n >= 0; n--)
+    (o = a[n]) && (t = (r ? o(e, s, t) : o(t)) || t);
+  return r && t && H(e, s, t), t;
+};
+class _ extends v {
+  constructor() {
+    super(), this.inputRef = U(), this.hasContent = !1;
+  }
+  onSubmit(e) {
+    e.shiftKey, e.preventDefault(), this.inputRef.value.value.length > 0 && (this.dispatchEvent(
+      new CustomEvent("user-submit", {
+        detail: {
+          text: this.inputRef.value.value
+        }
+      })
+    ), this.inputRef.value.value = "");
+  }
+  onChange(e) {
+    e.target.value.length > 0 ? this.hasContent = !0 : this.hasContent = !1, e.target.value && e.target.value.length > 0 && this.dispatchEvent(
+      new CustomEvent("user-typing", {
+        detail: {
+          textLength: e.target.value.length
+        }
+      })
+    );
+  }
+  render() {
+    return c`
+            <div
+                class=${f({
+      "conversation-input": !0,
+      "has-content": this.hasContent
+    })}
+            >
+                ${u}
+                ${c`
+                          <input
+                              ${I(this.inputRef)}
+                              @input=${this.onChange}
+                              placeholder=${this.placeholder}
+                          />
+                      `}
+
+                <button @click="${this.onSubmit}">
+                    <ui-symbol-badge
+                        size="22"
+                        .symbol=${{ type: "Svg", content: "send" }}
+                    ></ui-symbol-badge>
+                </button>
+            </div>
+        `;
+  }
+  createRenderRoot() {
+    return this;
+  }
+}
+O([
+  E()
+], _.prototype, "hasContent", 2);
+O([
+  i({ type: String })
+], _.prototype, "placeholder", 2);
+var F = Object.defineProperty, G = Object.getOwnPropertyDescriptor, y = (a, e, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? G(e, s) : e, n = a.length - 1, o; n >= 0; n--)
+    (o = a[n]) && (t = (r ? o(e, s, t) : o(t)) || t);
+  return r && t && F(e, s, t), t;
+};
+class d extends v {
+  constructor() {
+    super(), this.content = [], this.sender = null, this.messageType = b.System, this.userLabel = "";
+  }
+  getMessageStackPosition(e) {
+    let s = "first";
+    return this.content.length > 1 && (s = e === 0 ? "first" : e + 1 === this.content.length ? "last" : "middle"), s;
+  }
+  renderTimestamp(e, s) {
+    const r = (n) => new Date(n).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    if (!e && !s)
+      return u;
+    let t = "";
+    return e ? s ? t = `${e}: ${r(s)}` : t = e : s && (t = r(s)), c`<p class="timestamp">${t}</p>`;
+  }
+  render() {
+    const e = () => {
+      var t, n, o;
+      return c`
+                <div
+                    class=${f({
+        "conversation-entry": !0,
+        "agent-message": !0,
+        "has-avatar": !!((t = this.sender) != null && t.avatar)
+      })}
+                >
+                    ${(n = this.sender) != null && n.avatar ? c`` : c``}
+                    <div class="content-bundle">
+                        ${this.content.map((p, m) => c`
+                                <div class="message-container message-container-left">
+                                    <conversation-message-item
+                                        .content=${p}
+                                        .isUser=${this.messageType === "user"}
+                                        .stacked=${this.getMessageStackPosition(m)}
+                                    />
+                                </div>
+                            `)}
+                    </div>
+                    ${this.renderTimestamp(((o = this.sender) == null ? void 0 : o.name) || "", this.timestamp)}
+                </div>
+            `;
+    }, s = () => c`SystemMessage`, r = () => c`
+                <div
+                    class=${f({
+      "conversation-entry": !0,
+      "user-message": !0
+    })}
+                >
+                    <div class="content-bundle">
+                        ${this.content.map((t, n) => c`
+                                <div class="message-container message-container-right">
+                                    <conversation-message-item
+                                        .content=${t}
+                                        .isUser=${this.messageType === "user"}
+                                        .stacked=${this.getMessageStackPosition(n)}
+                                    />
+                                </div>
+                            `)}
+                    </div>
+                    ${this.renderTimestamp(this.userLabel || "", this.timestamp)}
+                </div>
+            `;
+    switch (this.messageType) {
+      case b.System:
+        return s();
+      case b.Agent:
+        return e();
+      case b.User:
+        return r();
+      default:
+        return u;
+    }
+  }
+  createRenderRoot() {
+    return this;
+  }
+}
+d.styles = [
+  M`
+            :host {
+                display: block;
+            }
+            .agent-message {
+                display: grid;
+                margin-right: 10%;
+                width: 90%;
+                grid-template-columns: 1fr;
+                grid-template-rows: 1fr auto;
+                grid-template-areas:
+                    'content'
+                    'info';
+            }
+            .agent-message.has-avatar {
+                grid-template-columns: auto 1fr;
+                grid-template-rows: 1fr auto;
+                grid-template-areas:
+                    'avatar content'
+                    '. info';
+            }
+            .content-bundle {
+                grid-area: content;
+                max-width: 100%;
+                overflow: hidden;
+            }
+            .timestamp {
+                font-size: var(--fonts-small);
+                color: var(--colors-text);
+                font-weight: 300;
+                margin: 0;
+                line-height: 1.5em;
+                grid-area: info;
+            }
+        `
+];
+y([
+  i({ type: Object })
+], d.prototype, "sender", 2);
+y([
+  i({ type: Array })
+], d.prototype, "content", 2);
+y([
+  i({ type: Number })
+], d.prototype, "timestamp", 2);
+y([
+  i({ type: String })
+], d.prototype, "messageType", 2);
+y([
+  i({ type: String })
+], d.prototype, "userLabel", 2);
+var J = Object.defineProperty, V = Object.getOwnPropertyDescriptor, C = (a, e, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? V(e, s) : e, n = a.length - 1, o; n >= 0; n--)
+    (o = a[n]) && (t = (r ? o(e, s, t) : o(t)) || t);
+  return r && t && J(e, s, t), t;
+};
+const P = (a) => Array.isArray(a) ? a : Object.keys(a).map((e) => ({
+  label: a[e],
+  actionKey: e
+}));
+class w extends v {
+  constructor() {
+    super(), this.isUser = !1, this.stacked = "first";
+  }
+  onActionClick(e) {
+    this.dispatchEvent(
+      new CustomEvent("action", {
+        detail: e,
+        composed: !0,
+        bubbles: !0,
+        cancelable: !0
+      })
+    );
+  }
+  renderItem(e) {
+    const [s, r] = e;
+    switch (s) {
+      case g.Text:
+        return l`<span class="message-type-text">${r}</span>`;
+      case g.HTML:
+        return l`<div class="message-type-html">
+                    <ui-html .html=${r.body}></ui-html>
+                </div>`;
+      case g.Separator:
+        return l`<div class="message-type-separator"></div>`;
+      case g.LinkList:
+        return l`
+                    <div class="message-type-link-list">
+                        ${r.header ? l`<h1>${r.header}</h1>` : u}
+                        <ul>
+                            ${P(r.actions).map((t) => l`<li>
+                                    <button
+                                        class="message-type-link-list-button"
+                                        aria-label=${t.label}
+                                        title=${t.label}
+                                        @click=${(n) => {
+          this.onActionClick(t);
+        }}
+                                    >
+                                        ${t.label}
+                                        ${t.actionKey === "help" ? l`
+                                                  <ui-symbol-badge
+                                                      .size=${14}
+                                                      .symbol=${{
+          type: "Svg",
+          content: "caret-down"
+        }}
+                                                  ></ui-symbol-badge>
+                                              ` : u}
+                                    </button>
+                                </li>`)}
+                        </ul>
+                    </div>
+                `;
+      case g.ButtonList:
+        return l`
+                    <div class="message-type-button-list">
+                        ${r.header ? l`<h1>${r.header}</h1>` : u}
+                        <ul>
+                            ${P(r.actions).map((t) => l`<li>
+                                    <button
+                                        class="message-type-button-list-button"
+                                        aria-label=${t.label}
+                                        title=${t.label}
+                                        @click=${(n) => {
+          this.onActionClick(t);
+        }}
+                                    >
+                                        <!-- <ui-symbol-badge /> -->
+                                        ${t.label}
+                                    </button>
+                                </li>`)}
+                        </ul>
+                    </div>
+                `;
+      default: {
+        let t = Object.entries(r).reduce(
+          (n, [o, p]) => (n[`.${o}`] = p, n),
+          {}
+        );
+        return l`<${B(s)} ${q(t)} />`;
+      }
+    }
+  }
+  render() {
+    return l`
+            <div
+                class=${f({
+      content: !0,
+      user: this.isUser,
+      stacked: !0,
+      "stacked-first": this.stacked === "first",
+      "stacked-middle": this.stacked === "middle",
+      "stacked-last": this.stacked === "last"
+    })}
+            >
+                <ul class="message-list">
+                    ${(this.content.items || []).map((e) => l`<li class="message-list-item">${this.renderItem(e)}</li>`)}
+                </ul>
+            </div>
+        `;
+  }
+  createRenderRoot() {
+    return this;
+  }
+}
+C([
+  i({ type: Object })
+], w.prototype, "content", 2);
+C([
+  i({ type: Boolean })
+], w.prototype, "isUser", 2);
+C([
+  i({ type: String })
+], w.prototype, "stacked", 2);
+var X = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, $ = (a, e, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? Y(e, s) : e, n = a.length - 1, o; n >= 0; n--)
+    (o = a[n]) && (t = (r ? o(e, s, t) : o(t)) || t);
+  return r && t && X(e, s, t), t;
+};
+customElements.define("conversation-content", k);
+customElements.define("conversation-input", _);
+customElements.define("conversation-message", d);
+customElements.define("conversation-message-item", w);
+class h extends R(v) {
+  constructor() {
+    super(), this._messages = [], this._userLabel = "", this._inputPlaceholder = "Type your message";
+  }
+  onUserSubmit(e) {
+    this.dispatch("user-submit", e.detail);
+  }
+  onUserTyping(e) {
+    this.dispatch("user-typing", e.detail);
+  }
+  onActionClick(e) {
+    this.dispatch("action", e.detail);
+  }
+  dispatch(e, s) {
+    return z(this, null, function* () {
+      const r = this.requestInstance("container"), t = this.getDescriptor();
+      if (!r || !t)
+        return;
+      const n = yield j.getInstance(r);
+      if (!n)
+        return;
+      const o = new D(n).withId(t.id);
+      n.actions(o, t.type).dispatch(e, s);
+    });
+  }
+  getDescriptor() {
+    const e = new CustomEvent(
+      "request-descriptor",
+      {
+        detail: {},
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      }
+    );
+    return this.dispatchEvent(e), e.detail.descriptor || null;
+  }
+  render() {
+    return c`
+            <div class="wrapper">
+                <conversation-content
+                    .messages=${this._messages}
+                    .userLabel=${this._userLabel}
+                    @action=${this.onActionClick}
+                ></conversation-content>
+                <conversation-input
+                    @user-submit=${this.onUserSubmit}
+                    @user-typing=${this.onUserTyping}
+                    .placeholder=${this._inputPlaceholder}
+                >
+                </conversation-input>
+            </div>
+        `;
+  }
+}
+h.styles = A(K);
+$([
+  i({ type: Array })
+], h.prototype, "_messages", 2);
+$([
+  i({ type: String })
+], h.prototype, "_inputPlaceholder", 2);
+$([
+  i({ type: String })
+], h.prototype, "_userLabel", 2);
+$([
+  i({ type: String })
+], h.prototype, "_conversationControllerId", 2);
+class he extends T(h) {
+  constructor() {
+    super(), this.connector = new L(this);
+  }
+}
+export {
+  he as default
+};
+//# sourceMappingURL=conversation-wrapper.fa02c133.js.map

package/dist/conversation-wrapper.fa02c133.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-wrapper.fa02c133.js","sources":["../src/components/conversation/ui/conversation-content.ts","../src/components/conversation/ui/conversation-input.ts","../src/components/conversation/ui/conversation-message.ts","../src/components/conversation/ui/message.ts","../src/components/conversation/conversation.ts","../src/components/conversation/conversation-wrapper.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n// import styles from './conversation-content.scss?inline';\n\n// @customElement('conversation-content')\nexport class ConversationContent extends LitElement {\n    @property({ type: Array })\n    declare messages: any[];\n    @property({ type: String })\n    declare userLabel: string;\n\n    constructor() {\n        super();\n\n        this.userLabel = '';\n        this.messages = [];\n    }\n\n    // async dispatch(type: string, data: any) {\n    //     const container = this.requestInstance('container');\n    //     const descriptor = this.getDescriptor();\n\n    //     if (!container || !descriptor) {\n    //         return;\n    //     }\n    //     const platform = await ComponentPlatform.getInstance(container);\n    //     if (!platform) {\n    //         return;\n    //     }\n\n    //     const component = new ComponentQuery(platform).withId(descriptor.id);\n    //     const actions = platform.actions(component, descriptor.type /*|| uuid()*/);\n\n    //     actions.dispatch(type, data);\n    // }\n\n    // getDescriptor() {\n    //     const ev: CustomEvent<{ descriptor?: { [key: string]: any } }> = new CustomEvent(\n    //         'request-descriptor',\n    //         {\n    //             detail: {},\n    //             bubbles: true,\n    //             composed: true,\n    //             cancelable: true,\n    //         }\n    //     );\n    //     this.dispatchEvent(ev);\n    //     return ev.detail.descriptor || null;\n    // }\n\n    // onUserSubmit(event: CustomEvent<{ text: string }>) {\n    //     this.dispatch('user-submit', event.detail);\n    // }\n\n    // onUserTyping(event: CustomEvent<{ length: number }>) {\n    //     this.dispatch('user-typing', event.detail);\n    // }\n\n    render() {\n        return html`\n            <div class=\"scrollable\">\n                ${this.messages.map(\n                    (message) => html`<div class=\"conversation-entry\">\n                        <conversation-message\n                            .content=${message.content}\n                            .sender=${message.sender}\n                            .messageType=${message.type}\n                            .timestamp=${message.timestamp}\n                            .userLabel=${this.userLabel}\n                        />\n                    </div>`\n                )}\n            </div>\n        `;\n    }\n\n    protected createRenderRoot(): Element | ShadowRoot {\n        return this;\n    }\n}\n// <conversation-input\n//     @user-submit=${this.onUserSubmit}\n//     @user-typing=${this.onUserTyping}\n// />\n","import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { createRef, ref, Ref } from 'lit/directives/ref.js';\n\n// @customElement('conversation-input')\nexport class ConversationInput extends LitElement {\n    inputRef: Ref<HTMLInputElement> = createRef<HTMLInputElement>();\n\n    @state()\n    declare hasContent: boolean;\n\n    @property({ type: String })\n    declare placeholder: string;\n\n    constructor() {\n        super();\n        this.hasContent = false;\n        // this.inputText = '';\n    }\n\n    onSubmit(e: any) {\n        const multiline = false; // TODO:\n        if (!e.shiftKey || !multiline) {\n            e.preventDefault();\n            if (this.inputRef.value!.value.length > 0) {\n                this.dispatchEvent(\n                    new CustomEvent('user-submit', {\n                        detail: {\n                            // text: this.inputEl.value,\n                            text: this.inputRef.value!.value,\n                        },\n                    })\n                );\n                this.inputRef.value!.value = '';\n                // dispatch('user-submit', { text: inputText });\n                // setInputText('');\n                // onChange('');\n            }\n        } else if (this.inputRef.value!.value.length < 1) {\n            e.preventDefault();\n        }\n    }\n\n    onChange(e: any) {\n        if (e.target.value.length > 0) {\n            this.hasContent = true;\n        } else {\n            this.hasContent = false;\n        }\n        // calculateHeight(value);\n        if (e.target.value && e.target.value.length > 0) {\n            this.dispatchEvent(\n                new CustomEvent('user-typing', {\n                    detail: {\n                        textLength: e.target.value.length,\n                    },\n                })\n            );\n        }\n    }\n\n    render() {\n        const multiline = false; // TODO:\n        const secondaryAction = false; // TODO:\n\n        return html`\n            <div\n                class=${classMap({\n                    'conversation-input': true,\n                    'has-content': this.hasContent,\n                })}\n            >\n                ${secondaryAction ? html`Secondary` : nothing}\n                ${multiline\n                    ? html`Multiline`\n                    : html`\n                          <input\n                              ${ref(this.inputRef)}\n                              @input=${this.onChange}\n                              placeholder=${this.placeholder}\n                          />\n                      `}\n\n                <button @click=\"${this.onSubmit}\">\n                    <ui-symbol-badge\n                        size=\"22\"\n                        .symbol=${{ type: 'Svg', content: 'send' }}\n                    ></ui-symbol-badge>\n                </button>\n            </div>\n        `;\n    }\n\n    protected createRenderRoot(): Element | ShadowRoot {\n        return this;\n    }\n}\n","import { css, html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ConversationMessageType } from '../../../conversation-controller';\nimport { BundledConversationMessage } from '../plugin';\n\n// @customElement('conversation-message')\nexport class ConversationMessage extends LitElement {\n    static styles = [\n        css`\n            :host {\n                display: block;\n            }\n            .agent-message {\n                display: grid;\n                margin-right: 10%;\n                width: 90%;\n                grid-template-columns: 1fr;\n                grid-template-rows: 1fr auto;\n                grid-template-areas:\n                    'content'\n                    'info';\n            }\n            .agent-message.has-avatar {\n                grid-template-columns: auto 1fr;\n                grid-template-rows: 1fr auto;\n                grid-template-areas:\n                    'avatar content'\n                    '. info';\n            }\n            .content-bundle {\n                grid-area: content;\n                max-width: 100%;\n                overflow: hidden;\n            }\n            .timestamp {\n                font-size: var(--fonts-small);\n                color: var(--colors-text);\n                font-weight: 300;\n                margin: 0;\n                line-height: 1.5em;\n                grid-area: info;\n            }\n        `,\n    ];\n\n    @property({ type: Object })\n    declare sender: BundledConversationMessage['sender'] | null;\n\n    @property({ type: Array })\n    declare content: BundledConversationMessage['content'];\n\n    @property({ type: Number })\n    declare timestamp: number;\n\n    @property({ type: String })\n    declare messageType: ConversationMessageType;\n\n    @property({ type: String })\n    declare userLabel: string;\n\n    constructor() {\n        super();\n        this.content = [];\n        this.sender = null;\n        this.messageType = ConversationMessageType.System;\n        this.userLabel = '';\n    }\n\n    getMessageStackPosition(index: number) {\n        let messageOrder: 'first' | 'last' | 'middle' = 'first';\n        if (this.content.length > 1) {\n            messageOrder =\n                index === 0 ? 'first' : index + 1 === this.content.length ? 'last' : 'middle';\n        }\n        return messageOrder;\n    }\n\n    renderTimestamp(name: string, timestamp: number) {\n        const getTimestamp = (raw: number) => {\n            return new Date(raw).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n        };\n        if (!name && !timestamp) {\n            return nothing;\n        }\n        let output = '';\n        if (name) {\n            if (timestamp) {\n                output = `${name}: ${getTimestamp(timestamp)}`;\n            } else {\n                output = name;\n            }\n        } else if (timestamp) {\n            output = getTimestamp(timestamp);\n        }\n\n        return html`<p class=\"timestamp\">${output}</p>`;\n    }\n\n    render() {\n        const createAgentMessage = () => {\n            return html`\n                <div\n                    class=${classMap({\n                        'conversation-entry': true,\n                        'agent-message': true,\n                        'has-avatar': !!this.sender?.avatar,\n                    })}\n                >\n                    ${this.sender?.avatar ? html`` : html`` /* TODO: */}\n                    <div class=\"content-bundle\">\n                        ${this.content.map((item, index) => {\n                            return html`\n                                <div class=\"message-container message-container-left\">\n                                    <conversation-message-item\n                                        .content=${item}\n                                        .isUser=${this.messageType === 'user'}\n                                        .stacked=${this.getMessageStackPosition(index)}\n                                    />\n                                </div>\n                            `;\n                        })}\n                    </div>\n                    ${this.renderTimestamp(this.sender?.name || '', this.timestamp)}\n                </div>\n            `;\n        };\n\n        const createSystemMessage = () => {\n            return html`SystemMessage`;\n        };\n\n        const createUserMessage = () => {\n            return html`\n                <div\n                    class=${classMap({\n                        'conversation-entry': true,\n                        'user-message': true,\n                    })}\n                >\n                    <div class=\"content-bundle\">\n                        ${this.content.map((item, index) => {\n                            return html`\n                                <div class=\"message-container message-container-right\">\n                                    <conversation-message-item\n                                        .content=${item}\n                                        .isUser=${this.messageType === 'user'}\n                                        .stacked=${this.getMessageStackPosition(index)}\n                                    />\n                                </div>\n                            `;\n                        })}\n                    </div>\n                    ${this.renderTimestamp(this.userLabel || '', this.timestamp)}\n                </div>\n            `;\n        };\n\n        switch (this.messageType) {\n            case ConversationMessageType.System:\n                return createSystemMessage();\n            case ConversationMessageType.Agent:\n                return createAgentMessage();\n            case ConversationMessageType.User:\n                return createUserMessage();\n            default:\n                return nothing;\n        }\n    }\n\n    protected createRenderRoot(): Element | ShadowRoot {\n        return this;\n    }\n}\n","import { spread } from '@open-wc/lit-helpers';\nimport { LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html, unsafeStatic } from 'lit/static-html.js';\nimport { ConversationMessageListItemType, ItemPayload } from '../../../types';\nimport { BundledMessageContent } from '../plugin';\n\nconst mapActions = (actions: any) =>\n    Array.isArray(actions)\n        ? actions\n        : Object.keys(actions).map((i) => {\n              return {\n                  label: actions[i],\n                  actionKey: i,\n              };\n          });\n\n// @customElement('conversation-message-item')\nexport class Message extends LitElement {\n    @property({ type: Object })\n    declare content: BundledMessageContent;\n\n    @property({ type: Boolean })\n    declare isUser: boolean;\n\n    @property({ type: String })\n    declare stacked: 'first' | 'last' | 'middle';\n\n    constructor() {\n        super();\n        this.isUser = false;\n        this.stacked = 'first';\n    }\n\n    onActionClick(action: any) {\n        this.dispatchEvent(\n            new CustomEvent('action', {\n                detail: action,\n                composed: true,\n                bubbles: true,\n                cancelable: true,\n            })\n        );\n    }\n\n    renderItem(item: ItemPayload) {\n        const [type, content] = item;\n\n        switch (type) {\n            case ConversationMessageListItemType.Text:\n                return html`<span class=\"message-type-text\">${content}</span>`;\n            case ConversationMessageListItemType.HTML:\n                return html`<div class=\"message-type-html\">\n                    <ui-html .html=${content.body}></ui-html>\n                </div>`;\n            case ConversationMessageListItemType.Separator: {\n                return html`<div class=\"message-type-separator\"></div>`;\n            }\n            case ConversationMessageListItemType.LinkList: {\n                return html`\n                    <div class=\"message-type-link-list\">\n                        ${content.header ? html`<h1>${content.header}</h1>` : nothing}\n                        <ul>\n                            ${mapActions(content.actions).map((action) => {\n                                return html`<li>\n                                    <button\n                                        class=\"message-type-link-list-button\"\n                                        aria-label=${action.label}\n                                        title=${action.label}\n                                        @click=${(e: Event) => {\n                                            this.onActionClick(action);\n                                        }}\n                                    >\n                                        ${action.label}\n                                        ${action.actionKey === 'help'\n                                            ? html`\n                                                  <ui-symbol-badge\n                                                      .size=${14}\n                                                      .symbol=${{\n                                                          type: 'Svg',\n                                                          content: 'caret-down',\n                                                      }}\n                                                  ></ui-symbol-badge>\n                                              `\n                                            : nothing}\n                                    </button>\n                                </li>`;\n                            })}\n                        </ul>\n                    </div>\n                `;\n            }\n            case ConversationMessageListItemType.ButtonList: {\n                return html`\n                    <div class=\"message-type-button-list\">\n                        ${content.header ? html`<h1>${content.header}</h1>` : nothing}\n                        <ul>\n                            ${mapActions(content.actions).map((action) => {\n                                return html`<li>\n                                    <button\n                                        class=\"message-type-button-list-button\"\n                                        aria-label=${action.label}\n                                        title=${action.label}\n                                        @click=${(e: Event) => {\n                                            this.onActionClick(action);\n                                        }}\n                                    >\n                                        <!-- <ui-symbol-badge /> -->\n                                        ${action.label}\n                                    </button>\n                                </li>`;\n                            })}\n                        </ul>\n                    </div>\n                `;\n            }\n            // case ConversationMessageListItemType.VideoRequest: {\n            //     return <VideoRequest {...item.content} dispatch={dispatch} />;\n            // }\n            default: {\n                let itemProps = Object.entries(content).reduce<{ [key: string]: any }>(\n                    (acc, [key, value]) => {\n                        acc[`.${key}`] = value;\n                        return acc;\n                    },\n                    {}\n                );\n                return html`<${unsafeStatic(type)} ${spread(itemProps)} />`;\n            }\n        }\n    }\n\n    render() {\n        return html`\n            <div\n                class=${classMap({\n                    content: true,\n                    user: this.isUser,\n                    stacked: true,\n                    'stacked-first': this.stacked === 'first',\n                    'stacked-middle': this.stacked === 'middle',\n                    'stacked-last': this.stacked === 'last',\n                })}\n            >\n                <ul class=\"message-list\">\n                    ${(this.content.items || []).map((item) => {\n                        return html`<li class=\"message-list-item\">${this.renderItem(item)}</li>`;\n                    })}\n                </ul>\n            </div>\n        `;\n    }\n\n    protected createRenderRoot(): Element | ShadowRoot {\n        return this;\n    }\n}\n","import { ComponentPlatform, ComponentQuery } from '@telia-ace/widget-core';\nimport { Requester } from '@telia-ace/widget-ui';\nimport { html, LitElement, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './conversation.scss?inline';\n\nimport { ConversationContent } from './ui/conversation-content';\nimport { ConversationInput } from './ui/conversation-input';\nimport { ConversationMessage } from './ui/conversation-message';\nimport { Message } from './ui/message';\n\ncustomElements.define('conversation-content', ConversationContent);\ncustomElements.define('conversation-input', ConversationInput);\ncustomElements.define('conversation-message', ConversationMessage);\ncustomElements.define('conversation-message-item', Message);\n\nexport default class Conversation extends Requester(LitElement) {\n    static styles = unsafeCSS(styles);\n\n    @property({ type: Array })\n    declare _messages: any[];\n\n    @property({ type: String })\n    declare _inputPlaceholder: string;\n\n    @property({ type: String })\n    declare _userLabel: string;\n\n    @property({ type: String })\n    declare _conversationControllerId: string;\n\n    constructor() {\n        super();\n        this._messages = [];\n        this._userLabel = '';\n        this._inputPlaceholder = 'Type your message';\n    }\n\n    onUserSubmit(event: CustomEvent<{ text: string }>) {\n        this.dispatch('user-submit', event.detail);\n    }\n\n    onUserTyping(event: CustomEvent<{ length: number }>) {\n        this.dispatch('user-typing', event.detail);\n    }\n\n    onActionClick(event: CustomEvent<{ action: any }>) {\n        this.dispatch('action', event.detail);\n    }\n\n    async dispatch(type: string, data: any) {\n        const container = this.requestInstance('container');\n        const descriptor = this.getDescriptor();\n\n        if (!container || !descriptor) {\n            return;\n        }\n        const platform = await ComponentPlatform.getInstance(container);\n        if (!platform) {\n            return;\n        }\n\n        const component = new ComponentQuery(platform).withId(descriptor.id);\n        const actions = platform.actions(component, descriptor.type /*|| uuid()*/);\n\n        actions.dispatch(type, data);\n    }\n\n    getDescriptor() {\n        const ev: CustomEvent<{ descriptor?: { [key: string]: any } }> = new CustomEvent(\n            'request-descriptor',\n            {\n                detail: {},\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            }\n        );\n        this.dispatchEvent(ev);\n        return ev.detail.descriptor || null;\n    }\n\n    render() {\n        return html`\n            <div class=\"wrapper\">\n                <conversation-content\n                    .messages=${this._messages}\n                    .userLabel=${this._userLabel}\n                    @action=${this.onActionClick}\n                ></conversation-content>\n                <conversation-input\n                    @user-submit=${this.onUserSubmit}\n                    @user-typing=${this.onUserTyping}\n                    .placeholder=${this._inputPlaceholder}\n                >\n                </conversation-input>\n            </div>\n        `;\n    }\n}\n","import { NodeConnector, WidgetComponentMixin } from '@telia-ace/widget-ui';\nimport Conversation from './conversation';\n\nexport default class ConversationWrapper extends WidgetComponentMixin(Conversation) {\n    connector = new NodeConnector(this);\n\n    constructor() {\n        super();\n    }\n}\n"],"names":["ConversationContent","LitElement","html","message","__decorateClass","property","ConversationInput","createRef","classMap","nothing","ref","state","ConversationMessage","ConversationMessageType","index","messageOrder","name","timestamp","getTimestamp","raw","output","createAgentMessage","_a","_b","item","_c","createSystemMessage","createUserMessage","css","mapActions","actions","i","Message","action","type","content","ConversationMessageListItemType","e","itemProps","acc","key","value","unsafeStatic","spread","Conversation","Requester","event","data","__async","container","descriptor","platform","ComponentPlatform","component","ComponentQuery","ev","unsafeCSS","styles","ConversationWrapper","WidgetComponentMixin","NodeConnector"],"mappings":"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"}

package/dist/index.js

@@ -755,7 +755,7 @@ const de = (r, e) => r.reduce((t, s, i) => {
 ]).then(([e, t]) => Y(
   r,
   "conversation",
-  import("./conversation-wrapper.f45db73f.js"),
+  import("./conversation-wrapper.fa02c133.js"),
   (s) => u(void 0, null, function* () {
     const { rehydrate: i = !1 } = s.properties(), a = t.getRouteData().params.id || s.node.name || "component", o = yield e.createController(a, { rehydrate: i }), c = e.registerController(o, s), d = 3 * 60 * 1e3, l = (v) => {
       const { providers: h = [] } = v;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-conversation",
-  "version": "1.0.34-experimental.18",
+  "version": "1.0.34-experimental.19",
   "description": "ACE Widget Conversation Platform",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "Telia Company AB",
@@ -22,19 +22,19 @@
   "sideEffects": false,
   "dependencies": {
     "@open-wc/lit-helpers": "^0.5.1",
-    "@telia-ace/widget-core": "1.0.21-experimental.18",
-    "@telia-ace/widget-forms": "1.0.28-experimental.18",
-    "@telia-ace/widget-plugins": "1.0.22-experimental.18",
-    "@telia-ace/widget-routing": "1.0.22-experimental.18",
-    "@telia-ace/widget-services": "1.0.21-experimental.18",
-    "@telia-ace/widget-ui": "1.0.28-experimental.18",
-    "@telia-ace/widget-utilities": "1.0.10-experimental.18",
+    "@telia-ace/widget-core": "1.0.21-experimental.19",
+    "@telia-ace/widget-forms": "1.0.28-experimental.19",
+    "@telia-ace/widget-plugins": "1.0.22-experimental.19",
+    "@telia-ace/widget-routing": "1.0.22-experimental.19",
+    "@telia-ace/widget-services": "1.0.21-experimental.19",
+    "@telia-ace/widget-ui": "1.0.28-experimental.19",
+    "@telia-ace/widget-utilities": "1.0.10-experimental.19",
     "@webprovisions/platform": "^1.1.2"
   },
   "devDependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@telia-ace/widget-developer-tools": "1.0.16-experimental.18",
+    "@telia-ace/widget-developer-tools": "1.0.16-experimental.19",
     "@types/react": "^18.0.26",
     "lit": "^2.6.1",
     "react": "^18.2.0",

package/dist/conversation-wrapper.f45db73f.js

@@ -1,104 +0,0 @@
-var h = (i, e, r) => new Promise((o, t) => {
-  var s = (a) => {
-    try {
-      c(r.next(a));
-    } catch (p) {
-      t(p);
-    }
-  }, n = (a) => {
-    try {
-      c(r.throw(a));
-    } catch (p) {
-      t(p);
-    }
-  }, c = (a) => a.done ? o(a.value) : Promise.resolve(a.value).then(s, n);
-  c((r = r.apply(i, e)).next());
-});
-import { Requester as g, WidgetComponentMixin as u, NodeConnector as b } from "@telia-ace/widget-ui";
-import { ComponentPlatform as v, ComponentQuery as y } from "@telia-ace/widget-core";
-import { LitElement as f, html as w, unsafeCSS as x } from "lit";
-import { property as m } from "lit/decorators.js";
-const k = `:host{--send-button-color: #a6a6a6}.wrapper{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;overflow-y:auto}.scrollable{display:flex;flex-direction:column;align-items:stretch;padding:0 var(--size-medium)}.scrollable:focus-visible{outline:var(--accessibility-border);color:var(--accessibility-colors-inactiveText);border-color:transparent}.message-container{display:flex}.message-container-left{justify-content:start}.message-container-center{justify-content:center}.message-container-right{justify-content:end}.conversation-entry{margin:0;margin-bottom:var(--size-medium)}.conversation-entry:first-of-type{margin-top:var(--size-medium)}.conversation-entry:last-of-type{padding-bottom:var(--size-medium)}.conversation-entry span,.conversation-entry p,.conversation-entry a,.conversation-entry div{font-weight:300}.conversation-entry b,.conversation-entry h1{font-weight:400}.conversation-entry .agent-message{display:grid;margin-right:10%;width:90%;grid-template-columns:1fr;grid-template-rows:1fr auto;grid-template-areas:"content" "info"}.conversation-entry .agent-message.has-avatar{grid-template-columns:auto 1fr;grid-template-rows:1fr auto;grid-template-areas:"avatar content" ". info"}.conversation-entry .user-message{margin-left:10%;width:90%;display:flex;flex-direction:column;align-items:flex-end}.conversation-entry .content-bundle{grid-area:content;max-width:100%;overflow:hidden}.conversation-entry .timestamp{font-size:var(--fonts-small);color:var(--colors-text);font-weight:300;margin:0;line-height:1.5em;grid-area:info}.content{display:inline-block;margin-top:var(--size-normal);max-width:100%}.content>*{overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;word-break:break-word;hyphens:auto}.content.full-width{width:100%}.content.padded{padding:var(--sized-medium)}.content.user.stacked{background-color:var(--colors-primary);color:var(--colors-accent);border-top-left-radius:var(--borderRadius);border-bottom-left-radius:var(--borderRadius)}.content.user.stacked.stacked-first{border-top-right-radius:var(--borderRadius)}.content.user.stacked.stacked-last{border-bottom-right-radius:var(--borderRadius)}.content.stacked:not(.user){background-color:var(--colors-accent);color:var(--colors-text);border:var(--border, "none");border-top-right-radius:var(--borderRadius);border-bottom-right-radius:var(--borderRadius)}.content.stacked:not(.user).stacked-first{border-top-left-radius:var(--borderRadius)}.content.stacked:not(.user).stacked-last{border-bottom-left-radius:var(--borderRadius)}.message-type-text{margin:var(--size-medium) 0;padding:0 var(--size-medium)}.message-type-html{font-size:var(--fonts-normal);font-weight:300;line-height:1.5em;color:var(--colors-text);margin:var(--size-medium) 0;padding:0 var(--size-medium);color:inherit}.message-type-html h1,.message-type-html h2,.message-type-html h3,.message-type-html h4,.message-type-html h5,.message-type-html h6{word-break:break-word}.message-type-html h1:first-child,.message-type-html h2:first-child,.message-type-html h3:first-child,.message-type-html h4:first-child,.message-type-html h5:first-child,.message-type-html h6:first-child{margin-top:0}.message-type-html h1:only-child,.message-type-html h2:only-child,.message-type-html h3:only-child,.message-type-html h4:only-child,.message-type-html h5:only-child,.message-type-html h6:only-child{margin:0}.message-type-html h1:last-child,.message-type-html h2:last-child,.message-type-html h3:last-child,.message-type-html h4:last-child,.message-type-html h5:last-child,.message-type-html h6:last-child{margin-bottom:0}.message-type-html a:focus-visible{outline:var(--accessibility-border);color:var(--accessibility-colors-inactiveText);border-color:transparent;text-decoration:underline}.message-type-html img{max-width:100%!important;height:auto!important}.message-type-html p{word-break:break-word;margin:var(--size-normal) 0}.message-type-html p:first-child{margin:0 0 var(--size-normal)}.message-type-html p:last-child{margin:var(--size-normal) 0 0}.message-type-html p:only-child{margin:0}.message-type-html a{color:var(--colors-link)}.message-type-html a:focus-visible{outline:var(--accessibility-border);color:var(--accessibility-colors-inactiveText);border-color:transparent}.message-type-separator{width:100%;border-bottom:var(--border)}.message-type-button-list{margin:var(--size-medium) 0;padding:0 var(--size-medium)}.message-type-button-list ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--size-normal)}.message-type-button-list ul>li{margin:0}.message-type-button-list-button{text-align:center;font-weight:300;border-radius:var(--borderRadius);font-family:inherit;font-size:var(--fonts-normal);display:block;padding:var(--size-normal);background-color:var(--colors-primary);width:100%;color:#fff;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-size:inherit;border:none}.message-type-button-list-button:focus-visible{outline:var(--accessibility-border);color:var(--accessibility-colors-inactiveText);border-color:transparent;background-color:transparent}.message-type-button-list-button i,.message-type-button-list-button svg{margin-right:var(--size-small)}.message-type-link-list{margin:var(--size-medium) 0;padding:0 var(--size-medium)}.message-type-link-list h1{white-space:normal;font-size:var(--fonts-medium);font-weight:400;margin:0 0 var(--size-normal);color:var(--colors-text);line-height:1.8em}.message-type-link-list ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--size-normal)}.message-type-link-list ul>li{margin:0}.message-type-link-list-button{display:block;text-align:left;font-weight:300;color:var(--colors-primary);max-width:100%;text-overflow:ellipsis;overflow:hidden;background-color:transparent;cursor:pointer;font-size:inherit;border:none}.message-list{list-style:none;padding:0;margin:0}.message-list .message-list-item p{padding:0;margin:0}.conversation-input{display:flex;align-items:center;background-color:var(--colors-accent);border-top:var(--inputBorder)}.conversation-input.has-content{--send-button-color: var(--colors-primary)}.conversation-input input{flex:1;border:none;background-color:transparent;font-weight:300;font-size:var(--fonts-normal);line-height:1.2em;outline:none;padding:var(--size-medium);color:var(--colors-text)}.conversation-input input::placeholder{color:var(--colors-textLight);font-style:italic}.conversation-input button{flex:0 0 50px;align-self:stretch;background-color:transparent;display:flex;align-items:center;justify-content:center;border:none;color:var(--send-button-color)}conversation-content{flex:0 1 100%;overflow-y:auto;overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:thin;scrollbar-color:transparent transparent;scrollbar-color:#7f7f7f transparent!important;scrollbar-width:thin!important;-ms-overflow-style:none!important}conversation-content::-webkit-scrollbar{width:3px!important;background-color:transparent;border-left:none}conversation-content::-webkit-scrollbar-thumb{background-color:#7f7f7f!important}conversation-content::-webkit-scrollbar-track{-webkit-box-shadow:none!important;background-color:transparent}conversation-content ::-webkit-scrollbar-thumb{background-color:#7f7f7f!important}conversation-input{flex:0 0 auto;min-height:50px;max-height:150px}
-`;
-var z = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, d = (i, e, r, o) => {
-  for (var t = o > 1 ? void 0 : o ? _(e, r) : e, s = i.length - 1, n; s >= 0; s--)
-    (n = i[s]) && (t = (o ? n(e, r, t) : n(t)) || t);
-  return o && t && z(e, r, t), t;
-};
-class l extends g(f) {
-  constructor() {
-    super(), this._messages = [], this._userLabel = "", this._inputPlaceholder = "Type your message";
-  }
-  onUserSubmit(e) {
-    this.dispatch("user-submit", e.detail);
-  }
-  onUserTyping(e) {
-    this.dispatch("user-typing", e.detail);
-  }
-  onActionClick(e) {
-    this.dispatch("action", e.detail);
-  }
-  dispatch(e, r) {
-    return h(this, null, function* () {
-      const o = this.requestInstance("container"), t = this.getDescriptor();
-      if (!o || !t)
-        return;
-      const s = yield v.getInstance(o);
-      if (!s)
-        return;
-      const n = new y(s).withId(t.id);
-      s.actions(n, t.type).dispatch(e, r);
-    });
-  }
-  getDescriptor() {
-    const e = new CustomEvent(
-      "request-descriptor",
-      {
-        detail: {},
-        bubbles: !0,
-        composed: !0,
-        cancelable: !0
-      }
-    );
-    return this.dispatchEvent(e), e.detail.descriptor || null;
-  }
-  render() {
-    return w`
-            <div class="wrapper">
-                <conversation-content
-                    .messages=${this._messages}
-                    .userLabel=${this._userLabel}
-                    @action=${this.onActionClick}
-                ></conversation-content>
-                <conversation-input
-                    @user-submit=${this.onUserSubmit}
-                    @user-typing=${this.onUserTyping}
-                    .placeholder=${this._inputPlaceholder}
-                >
-                </conversation-input>
-            </div>
-        `;
-  }
-}
-l.styles = x(k);
-d([
-  m({ type: Array })
-], l.prototype, "_messages", 2);
-d([
-  m({ type: String })
-], l.prototype, "_inputPlaceholder", 2);
-d([
-  m({ type: String })
-], l.prototype, "_userLabel", 2);
-d([
-  m({ type: String })
-], l.prototype, "_conversationControllerId", 2);
-class j extends u(l) {
-  constructor() {
-    super(), this.connector = new b(this);
-  }
-}
-export {
-  j as default
-};
-//# sourceMappingURL=conversation-wrapper.f45db73f.js.map

package/dist/conversation-wrapper.f45db73f.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"conversation-wrapper.f45db73f.js","sources":["../src/components/conversation/conversation.ts","../src/components/conversation/conversation-wrapper.ts"],"sourcesContent":["import { ComponentPlatform, ComponentQuery } from '@telia-ace/widget-core';\nimport { Requester } from '@telia-ace/widget-ui';\nimport { html, LitElement, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './conversation.scss?inline';\n\nimport './ui/conversation-content';\nimport './ui/conversation-input';\nimport './ui/conversation-message';\nimport './ui/message';\n\nexport default class Conversation extends Requester(LitElement) {\n    static styles = unsafeCSS(styles);\n\n    @property({ type: Array })\n    declare _messages: any[];\n\n    @property({ type: String })\n    declare _inputPlaceholder: string;\n\n    @property({ type: String })\n    declare _userLabel: string;\n\n    @property({ type: String })\n    declare _conversationControllerId: string;\n\n    constructor() {\n        super();\n        this._messages = [];\n        this._userLabel = '';\n        this._inputPlaceholder = 'Type your message';\n    }\n\n    onUserSubmit(event: CustomEvent<{ text: string }>) {\n        this.dispatch('user-submit', event.detail);\n    }\n\n    onUserTyping(event: CustomEvent<{ length: number }>) {\n        this.dispatch('user-typing', event.detail);\n    }\n\n    onActionClick(event: CustomEvent<{ action: any }>) {\n        this.dispatch('action', event.detail);\n    }\n\n    async dispatch(type: string, data: any) {\n        const container = this.requestInstance('container');\n        const descriptor = this.getDescriptor();\n\n        if (!container || !descriptor) {\n            return;\n        }\n        const platform = await ComponentPlatform.getInstance(container);\n        if (!platform) {\n            return;\n        }\n\n        const component = new ComponentQuery(platform).withId(descriptor.id);\n        const actions = platform.actions(component, descriptor.type /*|| uuid()*/);\n\n        actions.dispatch(type, data);\n    }\n\n    getDescriptor() {\n        const ev: CustomEvent<{ descriptor?: { [key: string]: any } }> = new CustomEvent(\n            'request-descriptor',\n            {\n                detail: {},\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            }\n        );\n        this.dispatchEvent(ev);\n        return ev.detail.descriptor || null;\n    }\n\n    render() {\n        return html`\n            <div class=\"wrapper\">\n                <conversation-content\n                    .messages=${this._messages}\n                    .userLabel=${this._userLabel}\n                    @action=${this.onActionClick}\n                ></conversation-content>\n                <conversation-input\n                    @user-submit=${this.onUserSubmit}\n                    @user-typing=${this.onUserTyping}\n                    .placeholder=${this._inputPlaceholder}\n                >\n                </conversation-input>\n            </div>\n        `;\n    }\n}\n","import { NodeConnector, WidgetComponentMixin } from '@telia-ace/widget-ui';\nimport Conversation from './conversation';\n\nexport default class ConversationWrapper extends WidgetComponentMixin(Conversation) {\n    connector = new NodeConnector(this);\n\n    constructor() {\n        super();\n    }\n}\n"],"names":["Conversation","Requester","LitElement","event","type","data","__async","container","descriptor","platform","ComponentPlatform","component","ComponentQuery","ev","html","unsafeCSS","styles","__decorateClass","property","ConversationWrapper","WidgetComponentMixin","NodeConnector"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAWqB,MAAAA,UAAqBC,EAAUC,CAAU,EAAE;AAAA,EAe5D,cAAc;AACJ,aACN,KAAK,YAAY,IACjB,KAAK,aAAa,IAClB,KAAK,oBAAoB;AAAA,EAC7B;AAAA,EAEA,aAAaC,GAAsC;AAC1C,SAAA,SAAS,eAAeA,EAAM,MAAM;AAAA,EAC7C;AAAA,EAEA,aAAaA,GAAwC;AAC5C,SAAA,SAAS,eAAeA,EAAM,MAAM;AAAA,EAC7C;AAAA,EAEA,cAAcA,GAAqC;AAC1C,SAAA,SAAS,UAAUA,EAAM,MAAM;AAAA,EACxC;AAAA,EAEM,SAASC,GAAcC,GAAW;AAAA,WAAAC,EAAA;AAC9B,YAAAC,IAAY,KAAK,gBAAgB,WAAW,GAC5CC,IAAa,KAAK;AAEpB,UAAA,CAACD,KAAa,CAACC;AACf;AAEJ,YAAMC,IAAW,MAAMC,EAAkB,YAAYH,CAAS;AAC9D,UAAI,CAACE;AACD;AAGJ,YAAME,IAAY,IAAIC,EAAeH,CAAQ,EAAE,OAAOD,EAAW,EAAE;AAG3D,MAFQC,EAAS,QAAQE,GAAWH,EAAW,IAAkB,EAEjE,SAASJ,GAAMC,CAAI;AAAA,IAC/B;AAAA;AAAA,EAEA,gBAAgB;AACZ,UAAMQ,IAA2D,IAAI;AAAA,MACjE;AAAA,MACA;AAAA,QACI,QAAQ,CAAC;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MAChB;AAAA,IAAA;AAEJ,gBAAK,cAAcA,CAAE,GACdA,EAAG,OAAO,cAAc;AAAA,EACnC;AAAA,EAEA,SAAS;AACE,WAAAC;AAAA;AAAA;AAAA,gCAGiB,KAAK;AAAA,iCACJ,KAAK;AAAA,8BACR,KAAK;AAAA;AAAA;AAAA,mCAGA,KAAK;AAAA,mCACL,KAAK;AAAA,mCACL,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpC;AACJ;AAnFqBd,EACV,SAASe,EAAUC,CAAM;AAGxBC,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,OAAO;AAAA,GAHRlB,EAIT,WAAA,aAAA,CAAA;AAGAiB,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,QAAQ;AAAA,GANTlB,EAOT,WAAA,qBAAA,CAAA;AAGAiB,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,QAAQ;AAAA,GATTlB,EAUT,WAAA,cAAA,CAAA;AAGAiB,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,QAAQ;AAAA,GAZTlB,EAaT,WAAA,6BAAA,CAAA;ACrBS,MAAAmB,UAA4BC,EAAqBpB,CAAY,EAAE;AAAA,EAGhF,cAAc;AACJ,aAHE,KAAA,YAAA,IAAIqB,EAAc,IAAI;AAAA,EAIlC;AACJ;"}