@telia-ace/widget-conversation 1.0.34-experimental.15 → 1.0.34-experimental.16

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

@@ -0,0 +1,8 @@
+import { NodeConnector } from '@telia-ace/widget-ui';
+import Conversation from './conversation';
+declare const ConversationWrapper_base: import("@telia-ace/widget-ui").WidgetComponentConstructor<import("@telia-ace/widget-ui/dist/mixins/widget-component").WidgetComponentInterface> & typeof Conversation;
+export default class ConversationWrapper extends ConversationWrapper_base {
+    connector: NodeConnector;
+    constructor();
+}
+export {};

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

@@ -1,6 +1,12 @@
-import React from 'react';
-type Props = {
-    className: string;
-};
-declare const Conversation: React.FC<Props>;
-export default Conversation;
+import { LitElement } from 'lit';
+import './ui/conversation-content';
+import './ui/conversation-input';
+import './ui/conversation-message';
+import './ui/message';
+export default class Conversation extends LitElement {
+    static styles: import("lit").CSSResult;
+    _messages: any[];
+    _conversationControllerId: string;
+    constructor();
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -3,11 +3,11 @@ import { ConversationMessage, ConversationMessageType } from '../../conversation
 import { ConversationMessageContent, ConversationMessageSender } from '../../types';
 export type BundledConversationMessage = {
     timestamp: number;
-    content: [BundledMessageContent];
+    content: BundledMessageContent[];
     sender: ConversationMessageSender;
     type: ConversationMessageType;
 };
-type BundledMessageContent = {
+export type BundledMessageContent = {
     key: string;
 } & ConversationMessageContent;
 export type ConversationContent = {
@@ -42,4 +42,3 @@ export type ConversationComponentProperties = {
     };
 };
 export declare const ConversationComponent: (container: Container) => Promise<void>;
-export {};

package/dist/components/conversation/ui/conversation-content.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+declare const ConversationContent_base: (new (...args: any[]) => import("@telia-ace/widget-ui/dist/mixins/requester").RequesterInterface) & typeof LitElement;
+export declare class ConversationContent extends ConversationContent_base {
+    static styles: import("lit").CSSResult[];
+    messages: any[];
+    constructor();
+    dispatch(type: string, data: any): Promise<void>;
+    getDescriptor(): {
+        [key: string]: any;
+    } | null;
+    onUserSubmit(event: CustomEvent<{
+        text: string;
+    }>): void;
+    onUserTyping(event: CustomEvent<{
+        length: number;
+    }>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};

package/dist/components/conversation/ui/conversation-input.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+export declare class ConversationInput extends LitElement {
+    static styles: import("lit").CSSResult;
+    constructor();
+    onSubmit(e: any): void;
+    onChange(e: any): void;
+    private get inputEl();
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/conversation/ui/conversation-message.d.ts

@@ -0,0 +1,11 @@
+import { LitElement, nothing } from 'lit';
+import { BundledConversationMessage } from '../plugin';
+export declare class ConversationMessage extends LitElement {
+    static styles: import("lit").CSSResult[];
+    sender: BundledConversationMessage['sender'] | null;
+    content: BundledConversationMessage['content'];
+    timestamp: number;
+    constructor();
+    renderTimestamp(name: string, timestamp: number): import("lit").TemplateResult<1> | typeof nothing;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}

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

@@ -1,5 +1,9 @@
-import React from 'react';
-import { BundledConversationMessage } from '../plugin';
-export declare const ConversationMessage: React.ForwardRefExoticComponent<{
-    className?: string | undefined;
-} & BundledConversationMessage & React.RefAttributes<HTMLDivElement>>;
+import { LitElement } from 'lit';
+import { ItemPayload } from '../../../types';
+import { BundledMessageContent } from '../plugin';
+export declare class Message extends LitElement {
+    static styles: import("lit").CSSResult[];
+    content: BundledMessageContent;
+    renderItem(item: ItemPayload): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/conversation-wrapper.5c87b527.js

@@ -0,0 +1,47 @@
+import { WidgetComponentMixin as c, NodeConnector as m } from "@telia-ace/widget-ui";
+import { LitElement as f, html as v, css as d } from "lit";
+import { property as a } from "lit/decorators.js";
+var _ = Object.defineProperty, h = Object.getOwnPropertyDescriptor, l = (r, t, n, o) => {
+  for (var e = o > 1 ? void 0 : o ? h(t, n) : t, p = r.length - 1, i; p >= 0; p--)
+    (i = r[p]) && (e = (o ? i(t, n, e) : i(e)) || e);
+  return o && e && _(t, n, e), e;
+};
+class s extends f {
+  constructor() {
+    super(), this._messages = [];
+  }
+  render() {
+    return console.log("hej", this._messages), v`
+            <div class="wrapper">
+                <conversation-content .messages=${this._messages} />
+            </div>
+        `;
+  }
+}
+s.styles = d`
+        .wrapper {
+            position: absolute;
+            right: 0;
+            left: 0;
+            bottom: 0;
+            top: 0;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+    `;
+l([
+  a({ type: Array })
+], s.prototype, "_messages", 2);
+l([
+  a({ type: String })
+], s.prototype, "_conversationControllerId", 2);
+class w extends c(s) {
+  constructor() {
+    super(), this.connector = new m(this);
+  }
+}
+export {
+  w as default
+};
+//# sourceMappingURL=conversation-wrapper.5c87b527.js.map

package/dist/conversation-wrapper.5c87b527.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-wrapper.5c87b527.js","sources":["../src/components/conversation/conversation.ts","../src/components/conversation/conversation-wrapper.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport './ui/conversation-content';\nimport './ui/conversation-input';\nimport './ui/conversation-message';\nimport './ui/message';\n\nexport default class Conversation extends LitElement {\n    static styles = css`\n        .wrapper {\n            position: absolute;\n            right: 0;\n            left: 0;\n            bottom: 0;\n            top: 0;\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n        }\n    `;\n\n    @property({ type: Array })\n    declare _messages: any[];\n\n    @property({ type: String })\n    declare _conversationControllerId: string;\n\n    constructor() {\n        super();\n        this._messages = [];\n    }\n\n    render() {\n        console.log('hej', this._messages);\n        return html`\n            <div class=\"wrapper\">\n                <conversation-content .messages=${this._messages} />\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","LitElement","html","css","__decorateClass","property","ConversationWrapper","WidgetComponentMixin","NodeConnector"],"mappings":";;;;;;;;AAOA,MAAqBA,UAAqBC,EAAW;AAAA,EAoBjD,cAAc;AACJ,aACN,KAAK,YAAY;EACrB;AAAA,EAEA,SAAS;AACG,mBAAA,IAAI,OAAO,KAAK,SAAS,GAC1BC;AAAA;AAAA,kDAEmC,KAAK;AAAA;AAAA;AAAA,EAGnD;AACJ;AAjCqBF,EACV,SAASG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcRC,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,OAAO;AAAA,GAdRL,EAeT,WAAA,aAAA,CAAA;AAGAI,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,QAAQ;AAAA,GAjBTL,EAkBT,WAAA,6BAAA,CAAA;ACtBS,MAAAM,UAA4BC,EAAqBP,CAAY,EAAE;AAAA,EAGhF,cAAc;AACJ,aAHE,KAAA,YAAA,IAAIQ,EAAc,IAAI;AAAA,EAIlC;AACJ;"}

package/dist/index.js

@@ -1,15 +1,15 @@
-var F = Object.defineProperty, j = Object.defineProperties;
-var G = Object.getOwnPropertyDescriptors;
+var K = Object.defineProperty, F = Object.defineProperties;
+var j = Object.getOwnPropertyDescriptors;
 var S = Object.getOwnPropertySymbols;
 var _ = Object.prototype.hasOwnProperty, B = Object.prototype.propertyIsEnumerable;
-var O = (r, e, t) => e in r ? F(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, p = (r, e) => {
+var O = (r, e, t) => e in r ? K(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, p = (r, e) => {
   for (var t in e || (e = {}))
     _.call(e, t) && O(r, t, e[t]);
   if (S)
     for (var t of S(e))
       B.call(e, t) && O(r, t, e[t]);
   return r;
-}, g = (r, e) => j(r, G(e));
+}, g = (r, e) => F(r, j(e));
 var M = (r, e) => {
   var t = {};
   for (var s in r)
@@ -36,12 +36,12 @@ var u = (r, e, t) => new Promise((s, i) => {
   o((t = t.apply(r, e)).next());
 });
 import { ComponentPlatform as Q } from "@telia-ace/widget-core";
-import { createStorageWriter as x, StorageCategory as W, readStorage as y, StorageMedium as b, StorageScope as J } from "@telia-ace/widget-services";
-import { uuid as L, lock as V } from "@telia-ace/widget-utilities";
-import { FormBuilder as Y } from "@telia-ace/widget-forms";
+import { createStorageWriter as x, StorageCategory as W, readStorage as y, StorageMedium as b, StorageScope as G } from "@telia-ace/widget-services";
+import { uuid as L, lock as J } from "@telia-ace/widget-utilities";
+import { FormBuilder as V } from "@telia-ace/widget-forms";
 import { closeAllModals as $ } from "@telia-ace/widget-plugins";
-import { createReactComponent as U } from "@telia-ace/widget-ui";
-import { lazy as X } from "react";
+import { createWebComponent as Y, createReactComponent as X } from "@telia-ace/widget-ui";
+import { lazy as Z } from "react";
 class I {
   constructor(e, t) {
     this.provider = e, this.print = (s, i) => {
@@ -138,8 +138,8 @@ class N {
     }
   }
 }
-const q = (r) => `conversation-${r}`;
-class Z {
+const U = (r) => `conversation-${r}`;
+class ee {
   constructor() {
     this._locking = Promise.resolve(), this._locks = 0;
   }
@@ -156,9 +156,9 @@ class Z {
     return this._locking = this._locking.then(() => t), s;
   }
 }
-class ee {
+class te {
   constructor(e, t, s) {
-    this.container = e, this.conversation = t, this.enabled = s, this.locker = new Z(), this.initialStoredAgents = [], this.sessionStorageKey = q(t.id), t.onStarted(() => u(this, null, function* () {
+    this.container = e, this.conversation = t, this.enabled = s, this.locker = new ee(), this.initialStoredAgents = [], this.sessionStorageKey = U(t.id), t.onStarted(() => u(this, null, function* () {
       if (t.messages.length > 0)
         return;
       const { agents: i } = yield this.read(), n = [];
@@ -271,8 +271,8 @@ class ee {
     });
   }
 }
-const te = ee;
-class se {
+const se = te;
+class re {
   constructor(e) {
     this.controller = e, this.print = (t, s) => {
       const i = R(t, s);
@@ -304,7 +304,7 @@ const E = (r, e, t) => u(void 0, null, function* () {
     });
   }
 });
-class re {
+class ie {
   constructor(e) {
     this.writer = e;
   }
@@ -334,7 +334,7 @@ const R = (r, e) => {
       actions: r.actions,
       title: r.title
     }, r.key && (s = r.key), r.timestamp && (i = r.timestamp), typeof r.form == "function") {
-      const n = Y.create(s);
+      const n = V.create(s);
       r.form(n);
       const a = n.get();
       t.form = a;
@@ -349,9 +349,9 @@ const R = (r, e) => {
   if (s > -1)
     return r.splice(s, 1);
 };
-class ie {
+class ne {
   constructor(e, t, s) {
-    this.container = e, this.id = t, this.formHandlers = {}, this.user = new se(this), this.providers = [], this.active = !1, this.queuedProviders = [], this.registeredProviders = [], this.loaders = 0, this.componentMounted = !1, this.messages = [], this.typingActors = [], this.print = (n) => {
+    this.container = e, this.id = t, this.formHandlers = {}, this.user = new re(this), this.providers = [], this.active = !1, this.queuedProviders = [], this.registeredProviders = [], this.loaders = 0, this.componentMounted = !1, this.messages = [], this.typingActors = [], this.print = (n) => {
       const a = R(n);
       return this.createEntry(
         a.key,
@@ -362,7 +362,7 @@ class ie {
       );
     };
     const i = e.get("$widget");
-    this.events = i.events.createChild(this), this.store = new te(e, this, s.rehydrate);
+    this.events = i.events.createChild(this), this.store = new se(e, this, s.rehydrate);
   }
   setInitialStorage(e) {
     this.store.setInitialData(e);
@@ -444,7 +444,7 @@ class ie {
       timestamp: n || n === null ? n : Date.now()
     };
     this.messages.push(a), a.type === "agent" && z(this.typingActors, i);
-    const o = new re((c) => {
+    const o = new ie((c) => {
       if (c !== null) {
         const d = c, { timestamp: l = void 0 } = d, m = M(d, ["timestamp"]);
         a.content = m, l && (a.timestamp = l);
@@ -489,13 +489,13 @@ class ie {
     this.formHandlers[e] = g(p({}, this.formHandlers[e]), { validate: t });
   }
 }
-const ne = (r, e) => {
+const oe = (r, e) => {
   const t = r.split("_contact");
   return e.widgets.get(t[0]);
 }, T = (r) => {
-  const e = r.get("$widget"), { name: t, implementation: s } = r.get("$widget"), i = t.indexOf("_contact") > -1 ? ne(t, s) : e, { data: n } = r.get("$settings"), { trigger: a } = i.container.get("$settings"), o = `${t.replace("_contact-method", "").replace("_contact", "")}_contact-method`, c = s.widgets.get(o);
+  const e = r.get("$widget"), { name: t, implementation: s } = r.get("$widget"), i = t.indexOf("_contact") > -1 ? oe(t, s) : e, { data: n } = r.get("$settings"), { trigger: a } = i.container.get("$settings"), o = `${t.replace("_contact-method", "").replace("_contact", "")}_contact-method`, c = s.widgets.get(o);
   return c && !a ? { chatWidget: c, mainWidget: i, data: n } : { mainWidget: i, data: n };
-}, oe = (r) => {
+}, ae = (r) => {
   const { chatWidget: e } = T(r);
   return !!e;
 }, H = (r, e, t) => {
@@ -543,12 +543,12 @@ const ne = (r, e) => {
     W.Necessary,
     {
       medium: b.Local,
-      scope: J.Implementation
+      scope: G.Implementation
     }
   ).then((a) => a(n.name)), n.container.getAsync("conversation").then((a) => {
     a.setConversationEndedBehavior(A.Deactivate);
   }).then(() => $(r)).then(() => !1))) : (s.container.getAsync("conversation").then((a) => a.navigateToConversationIfActive(e.id).then(() => a.setConversationEndedBehavior(A.Navigate))), !n);
-}, ae = (r, e, t = "conversation") => {
+}, ce = (r, e, t = "conversation") => {
   const { mainWidget: s, chatWidget: i } = T(r);
   return i ? i.container.getAsync("router").then((n) => {
     n.navigate(t, { id: e.id });
@@ -603,7 +603,7 @@ class P {
     this.subscriptions.push(e);
   }
   static getInstance(e, t = "conversation") {
-    return V(e)(() => e.getAsync(t).then((s) => {
+    return J(e)(() => e.getAsync(t).then((s) => {
       let i = s;
       return i || Q.getInstance(e).then((n) => (i = new P(e, n), i.initialize(), e.registerAsync(t, () => i), i));
     }));
@@ -629,12 +629,12 @@ class P {
   }
   createController(e, t) {
     return u(this, null, function* () {
-      const s = q(e), { agents: i } = (yield y(
+      const s = U(e), { agents: i } = (yield y(
         this.container,
         s
       )) || { agents: [] }, n = this.controllers.findIndex((o) => o.conversation.id === e);
       let a;
-      return n > -1 ? a = this.controllers[n].conversation : a = new ie(this.container, e, t), a.setInitialStorage({ agents: i || [] }), a;
+      return n > -1 ? a = this.controllers[n].conversation : a = new ne(this.container, e, t), a.setInitialStorage({ agents: i || [] }), a;
     });
   }
   registerProvider(e, t) {
@@ -719,7 +719,7 @@ class P {
   }
   static handleContactMethodClick(e, t, s, i) {
     return u(this, null, function* () {
-      if (oe(t)) {
+      if (ae(t)) {
         e.preventDefault();
         let n = document.getElementById("humany-dynamic-anchor");
         n || (n = document.createElement("a"), n.setAttribute("href", "#"), n.id = "humany-dynamic-anchor", document.body.appendChild(n)), H(t, s, n);
@@ -734,11 +734,11 @@ class P {
         e,
         t.body.form.meta.conversation.id,
         t.clientName
-      ) : ae(e, t);
+      ) : ce(e, t);
     });
   }
 }
-const ce = (r, e) => r.reduce((t, s, i) => {
+const de = (r, e) => r.reduce((t, s, i) => {
   var a, o;
   const n = g(p({}, s), {
     content: [g(p({}, s.content), { key: s.key })]
@@ -749,13 +749,13 @@ const ce = (r, e) => r.reduce((t, s, i) => {
       return c.timestamp = s.timestamp, c.content.push(g(p({}, s.content), { key: s.key })), t;
   }
   return t.push(n), t;
-}, []), ye = (r) => Promise.all([
+}, []), be = (r) => Promise.all([
   P.getInstance(r),
   r.getAsync("router")
-]).then(([e, t]) => U(
+]).then(([e, t]) => Y(
   r,
   "conversation",
-  import("./conversation.dc33621d.js"),
+  import("./conversation-wrapper.5c87b527.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;
@@ -770,7 +770,7 @@ const ce = (r, e) => r.reduce((t, s, i) => {
       s.writeProperties({
         loading: h,
         typingActors: f,
-        messages: ce(k, d)
+        messages: de(k, d)
       });
     };
     m(o.getMessageStream()), c && (s.writeProperties({ conversationControllerId: o.id }), s.actions.create("user-submit", (v, h) => {
@@ -805,23 +805,23 @@ const ce = (r, e) => r.reduce((t, s, i) => {
         overlay: { conversation: !1, secondary: !1 }
       });
     }));
-    const K = o.events.subscribe(
+    const q = o.events.subscribe(
       "conversation:updated",
       (v, h) => {
         m(h);
       }
     );
     return () => {
-      o.setComponentMountedState(!1), K(), o.active || m({ messages: [], typingActors: [], loading: !1 });
+      o.setComponentMountedState(!1), q(), o.active || m({ messages: [], typingActors: [], loading: !1 });
     };
   }),
   { reuseController: !0 }
-)), be = (r) => Promise.all([
+)), we = (r) => Promise.all([
   Q.getInstance(r),
   P.getInstance(r),
   r.getAsync("router")
 ]).then(
-  ([e, t, s]) => U(
+  ([e, t, s]) => X(
     r,
     "conversation-return-button",
     import("./return-button.fb63a16e.js"),
@@ -835,24 +835,24 @@ const ce = (r, e) => r.reduce((t, s, i) => {
     }
   )
 );
-var de = /* @__PURE__ */ ((r) => (r.LinkList = "link-list", r.Separator = "separator", r.ButtonList = "button-list", r.Text = "text", r.HTML = "html", r.VideoRequest = "video-request", r))(de || {});
-const we = (r, e, t) => r.getAsync("componentResolver").then((s) => u(void 0, null, function* () {
+var he = /* @__PURE__ */ ((r) => (r.LinkList = "link-list", r.Separator = "separator", r.ButtonList = "button-list", r.Text = "text", r.HTML = "html", r.VideoRequest = "video-request", r))(he || {});
+const Pe = (r, e, t) => r.getAsync("componentResolver").then((s) => u(void 0, null, function* () {
   (yield P.getInstance(r)).addSubscription(
     s.registerComponent(
       e,
-      X(() => t)
+      Z(() => t)
     )
   );
 }));
 export {
-  ye as ConversationComponent,
-  ie as ConversationController,
+  be as ConversationComponent,
+  ne as ConversationController,
   A as ConversationEndedBehavior,
-  re as ConversationEntry,
-  de as ConversationMessageListItemType,
+  ie as ConversationEntry,
+  he as ConversationMessageListItemType,
   C as ConversationMessageType,
   P as ConversationPlatform,
-  be as ConversationReturnButtonComponent,
-  we as registerCustomMessageComponent
+  we as ConversationReturnButtonComponent,
+  Pe as registerCustomMessageComponent
 };
 //# sourceMappingURL=index.js.map