@telia-ace/widget-conversation 0.0.1

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@telia-ace/widget-conversation",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "dependencies": {
+    "@telia-ace/widget-core": "*",
+    "@telia-ace/widget-forms": "*",
+    "@telia-ace/widget-plugins": "*",
+    "@telia-ace/widget-routing": "*",
+    "@telia-ace/widget-services": "*",
+    "@telia-ace/widget-ui": "*",
+    "@telia-ace/widget-utilities": "*",
+    "@webprovisions/platform": "^1.1.4"
+  },
+  "peerDependencies": {
+    "@emotion/styled": "11.11.0",
+    "react": "18.2.0",
+    "@emotion/react": "11.11.1"
+  }
+}

package/return-button-3e542ab7.mjs

@@ -0,0 +1,154 @@
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import { keyframes as s, css as l } from "@emotion/react";
+import n from "@emotion/styled";
+import { useProperties as u, useDispatch as b, SymbolBadge as p, Button as y, borderTabStyle as $ } from "@telia-ace/widget-ui";
+const I = ({ className: e, ...t }) => {
+  const {
+    label: o,
+    active: r,
+    mode: c = "flat",
+    alert: d = {}
+  } = u(), { symbol: i, label: m, show: g } = d, f = b();
+  return r ? /* @__PURE__ */ h(
+    j,
+    {
+      className: e,
+      mode: c,
+      "aria-label": o,
+      onClick: () => {
+        f("toggle");
+      },
+      children: [
+        /* @__PURE__ */ a(A, { children: o }),
+        i && /* @__PURE__ */ a(w, { showAlert: g, children: /* @__PURE__ */ a(
+          p,
+          {
+            symbol: i,
+            title: m,
+            size: 20
+          }
+        ) })
+      ]
+    }
+  ) : null;
+}, k = (e) => {
+  var t, o, r;
+  return s`
+  0% {
+    background-color: ${(t = e.theme.colors) == null ? void 0 : t.primary};
+  }
+  50% {
+    background-color: ${(o = e.theme.colors) == null ? void 0 : o.accent};
+  }
+  100 {
+    background-color: ${(r = e.theme.colors) == null ? void 0 : r.primary};
+  }
+`;
+}, x = s`
+  0% {
+    background-position:0% 51%
+  }
+  50% {
+    background-position:100% 0%
+  }
+  100% {
+    background-position:0% 51%
+  }
+`, S = s`
+  0% {
+    transform: rotate(0deg) scale(1.00);
+  }
+  50% {
+    transform:  rotate(0deg) scale(1.00);
+  }
+  55% {
+    transform:  rotate(-3deg) scale(0.80);
+  }
+  60% {
+    transform:  rotate(-3deg) scale(0.80);
+  }
+  65% {
+    transform:  rotate(3deg) scale(1.20);
+  }
+  70% {
+    transform:  rotate(-3deg) scale(1.20);
+  }
+  75% {
+    transform:  rotate(3deg) scale(1.20);
+  }
+  80% {
+    transform:  rotate(-3deg) scale(1.20);
+  }
+  85% {
+    transform:  rotate(3deg) scale(1.20);
+  }
+  90% {
+    transform:  rotate(-3deg) scale(1.20);
+  }
+  95% {
+    transform:  rotate(3deg) scale(1.20);
+  }
+  100% {
+    transform:  rotate(0deg) scale(1);
+  }
+`, w = n.span`
+  flex-grow: 0;
+  transform: translateX(${(e) => e.showAlert ? "0px" : "50px"});
+  opacity: ${(e) => e.showAlert ? 1 : 0};
+  transition: transform 0.5s ease, opacity 0.3s ease;
+`, A = n.span`
+  flex: 1;
+  font-weight: 300;
+`, v = (e) => l`
+  animation: ${k(e)} 1s ease infinite;
+`, B = (e) => {
+  var t, o;
+  return l`
+  background: linear-gradient(
+    155deg,
+    ${(t = e.theme.colors) == null ? void 0 : t.primary},
+    ${(o = e.theme.colors) == null ? void 0 : o.accent}
+  );
+  background-position: 0px 0px;
+  background-size: 200% 200%;
+  animation: ${x} 1.5s ease infinite;
+`;
+}, j = n(y)`
+  overflow: hidden;
+  padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.large;
+}};
+  border-radius: ${(e) => e.theme.borderRadius};
+  color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+  ${(e) => e.mode === "flashing" ? v : e.mode === "flashingGradient" ? B : ""}
+  background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  i,
+  svg {
+    animation: ${S} 3s ease infinite;
+  }
+
+  &:focus-visible {
+    ${(e) => $(e)}
+    background: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+  }
+`;
+export {
+  I as default
+};

package/return-button-f1f43984.js

@@ -0,0 +1,97 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("@emotion/react"),i=require("@emotion/styled"),r=require("@telia-ace/widget-ui"),u=({className:e,...t})=>{const{label:o,active:s,mode:c="flat",alert:d={}}=r.useProperties(),{symbol:l,label:g,show:m}=d,f=r.useDispatch();return s?n.jsxs(S,{className:e,mode:c,"aria-label":o,onClick:()=>{f("toggle")},children:[n.jsx(p,{children:o}),l&&n.jsx($,{showAlert:m,children:n.jsx(r.SymbolBadge,{symbol:l,title:g,size:20})})]}):null},h=e=>{var t,o,s;return a.keyframes`
+  0% {
+    background-color: ${(t=e.theme.colors)==null?void 0:t.primary};
+  }
+  50% {
+    background-color: ${(o=e.theme.colors)==null?void 0:o.accent};
+  }
+  100 {
+    background-color: ${(s=e.theme.colors)==null?void 0:s.primary};
+  }
+`},b=a.keyframes`
+  0% {
+    background-position:0% 51%
+  }
+  50% {
+    background-position:100% 0%
+  }
+  100% {
+    background-position:0% 51%
+  }
+`,y=a.keyframes`
+  0% {
+    transform: rotate(0deg) scale(1.00);
+  }
+  50% {
+    transform:  rotate(0deg) scale(1.00);
+  }
+  55% {
+    transform:  rotate(-3deg) scale(0.80);
+  }
+  60% {
+    transform:  rotate(-3deg) scale(0.80);
+  }
+  65% {
+    transform:  rotate(3deg) scale(1.20);
+  }
+  70% {
+    transform:  rotate(-3deg) scale(1.20);
+  }
+  75% {
+    transform:  rotate(3deg) scale(1.20);
+  }
+  80% {
+    transform:  rotate(-3deg) scale(1.20);
+  }
+  85% {
+    transform:  rotate(3deg) scale(1.20);
+  }
+  90% {
+    transform:  rotate(-3deg) scale(1.20);
+  }
+  95% {
+    transform:  rotate(3deg) scale(1.20);
+  }
+  100% {
+    transform:  rotate(0deg) scale(1);
+  }
+`,$=i.span`
+  flex-grow: 0;
+  transform: translateX(${e=>e.showAlert?"0px":"50px"});
+  opacity: ${e=>e.showAlert?1:0};
+  transition: transform 0.5s ease, opacity 0.3s ease;
+`,p=i.span`
+  flex: 1;
+  font-weight: 300;
+`,k=e=>a.css`
+  animation: ${h(e)} 1s ease infinite;
+`,x=e=>{var t,o;return a.css`
+  background: linear-gradient(
+    155deg,
+    ${(t=e.theme.colors)==null?void 0:t.primary},
+    ${(o=e.theme.colors)==null?void 0:o.accent}
+  );
+  background-position: 0px 0px;
+  background-size: 200% 200%;
+  animation: ${b} 1.5s ease infinite;
+`},S=i(r.Button)`
+  overflow: hidden;
+  padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
+  border-radius: ${e=>e.theme.borderRadius};
+  color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+  ${e=>e.mode==="flashing"?k:e.mode==="flashingGradient"?x:""}
+  background-color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  i,
+  svg {
+    animation: ${y} 3s ease infinite;
+  }
+
+  &:focus-visible {
+    ${e=>r.borderTabStyle(e)}
+    background: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+    color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
+  }
+`;exports.default=u;

package/store.d.ts

@@ -0,0 +1,33 @@
+import { Container } from '@webprovisions/platform';
+import { AgentSettings } from './agent';
+import { ConversationController } from './conversation-controller';
+
+type StoredConversationAgent = {
+    id: string;
+    name: string;
+    avatar?: string;
+    providerName: string;
+};
+type StoredConversationMessage = any;
+type StoredConversation = {
+    agents: StoredConversationAgent[];
+    messages: StoredConversationMessage[];
+};
+export declare const createSessionStorageKey: (id: string) => string;
+declare class Store {
+    private container;
+    private conversation;
+    private enabled;
+    private sessionStorageKey;
+    private locker;
+    private initialStoredAgents;
+    constructor(container: Container, conversation: ConversationController, enabled: boolean);
+    setInitialData(data: {
+        agents: AgentSettings[];
+    }): void;
+    isRehydrated(): Promise<boolean>;
+    getStoredAgent(agentId: string): StoredConversationAgent | undefined;
+    write(data: any, type: 'messages' | 'agents', action?: 'add' | 'update'): Promise<void>;
+    read(): Promise<StoredConversation>;
+}
+export default Store;

package/types.d.ts

@@ -0,0 +1,130 @@
+import { Form, FormBuilder } from '../../forms/src/index.ts';
+import { Symbol } from '../../ui/src/index.ts';
+
+export type ConversationMessageSettings = {
+    key?: string;
+    timestamp?: number;
+    title?: string;
+    body?: string;
+    actions?: {
+        [actionKey: string]: any;
+    };
+    form?: (builder: FormBuilder) => void;
+    type?: string;
+    items?: ConversationMessageList[];
+    [key: string]: any;
+};
+export type NormalizedMessageSettings = {
+    content: ConversationMessageContent;
+    key: string;
+    timestamp: number | null;
+};
+export type ConversationMessageList = {
+    header?: string;
+    itemKey: string;
+    type?: ConversationMessageListType;
+    items: ConversationMessageListItem[];
+};
+export type ConversationMessageListItem = {
+    icon?: string;
+    type?: ConversationMessageListItemType;
+    actions?: {
+        [actionKey: string]: any;
+    };
+    form?: Form;
+    body?: string;
+    key: string;
+    [key: string]: any;
+};
+export type ConversationMessageContent = {
+    title?: string;
+    body?: string;
+    actions?: {
+        [actionKey: string]: any;
+    };
+    items?: ConverstationMessageItem<any>[];
+    form?: Form;
+    [key: string]: any;
+};
+export type ConverstationMessageItem<T, R = ItemPayload> = R extends [T, any] ? R : never;
+export type ConversationMessageUpdateSettings = ConversationMessageContent & {
+    timestamp?: number;
+};
+export type ConversationMessageSender = {
+    name?: string;
+    avatar?: string | Symbol;
+    id?: string;
+};
+export declare enum ConversationMessageListType {
+    Ordinary = "ordinary",
+    Seperator = "seperator"
+}
+export declare enum ConversationMessageListItemType {
+    LinkList = "link-list",
+    Separator = "separator",
+    ButtonList = "button-list",
+    ItemList = "item-list",
+    Text = "text",
+    HTML = "html",
+    VideoRequest = "video-request"
+}
+export type LinkListProperties = {
+    header?: string;
+    actions: {
+        [key: string]: string;
+    } | {
+        label: string;
+        actionKey: string;
+        data: any;
+    }[];
+};
+type LinkListItem = [
+    ConversationMessageListItemType.LinkList,
+    LinkListProperties
+];
+type TextItem = [ConversationMessageListItemType.Text, string];
+type SeparatorItem = [ConversationMessageListItemType.Separator, undefined];
+export type ButtonListProperties = {
+    header?: string;
+    actions: {
+        [key: string]: string;
+    } | {
+        label: string;
+        actionKey: string;
+        data: any;
+    }[];
+    tags?: string[];
+};
+type ButtonListItem = [
+    ConversationMessageListItemType.ButtonList,
+    ButtonListProperties
+];
+export type ItemListProperties = {
+    header?: string;
+    actions: {
+        [key: string]: string;
+    } | {
+        label: string;
+        actionKey: string;
+        data: any;
+    }[];
+};
+type ItemListItem = [
+    ConversationMessageListItemType.ItemList,
+    ItemListProperties
+];
+export type VideoRequestProperties = {
+    header?: string;
+    acceptLabel: string;
+    declineLabel: string;
+};
+type VideoRequestItem = [
+    ConversationMessageListItemType.VideoRequest,
+    VideoRequestProperties
+];
+export type HtmlProperties = {
+    body: string;
+};
+type HtmlItem = [ConversationMessageListItemType.HTML, HtmlProperties];
+type ItemPayload = LinkListItem | TextItem | SeparatorItem | ButtonListItem | HtmlItem | VideoRequestItem | ItemListItem;
+export {};

package/user.d.ts

@@ -0,0 +1,10 @@
+import { ConversationController, ConversationEntry } from './conversation-controller';
+import { ConversationMessageSettings } from './types';
+
+export declare class User {
+    private controller;
+    constructor(controller: ConversationController);
+    print: (settings: string | ConversationMessageSettings, options?: {
+        key?: string;
+    }, timestamp?: number | null) => ConversationEntry;
+}

package/utils/custom-message.d.ts

@@ -0,0 +1,4 @@
+import { ReactComponent } from '../../../core/src/index.ts';
+import { Container } from '@webprovisions/platform';
+
+export declare const registerCustomMessageComponent: (container: Container, type: string, component: ReactComponent) => Promise<void>;

package/utils/index.d.ts

@@ -0,0 +1 @@
+export { navigateToConversation, openChatWidget, shouldPreventDefault, } from './open-chat-widget';

package/utils/map-actions.d.ts

@@ -0,0 +1 @@
+export declare const mapActions: (actions: any) => any[];

package/utils/open-chat-widget.d.ts

@@ -0,0 +1,5 @@
+import { Container } from '@webprovisions/platform';
+
+export declare const shouldPreventDefault: (container: Container) => boolean;
+export declare const openChatWidget: (container: Container, contactMethod: any, triggerDOMTarget?: HTMLElement) => boolean | Promise<void> | Promise<boolean>;
+export declare const navigateToConversation: (container: Container, contactMethod: any, routeName?: string) => any;

package/utils/swap-provider.d.ts

@@ -0,0 +1,9 @@
+import { Container } from '@webprovisions/platform';
+
+/**
+ * This will put the current provider(s) in a queue and
+ * swap current provider to another one based on the providerName.
+ * When ConversationProvider.complete() is called, the provider(s) in the
+ * queue will become active again
+ */
+export declare const swapProvider: (container: Container, conversationId: string, providerName: string) => Promise<void>;