@nyaruka/temba-components 0.129.2 → 0.129.3

package/src/{contacts → live}/ContactChat.ts

@@ -1,11 +1,24 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
-import { Contact, CustomEventType, Ticket } from '../interfaces';
-import { fetchResults, oxford, oxfordFn, postJSON } from '../utils';
+import {
+  Contact,
+  CustomEventType,
+  NamedUser,
+  Ticket,
+  User
+} from '../interfaces';
+import {
+  fetchResults,
+  getUrl,
+  oxford,
+  oxfordFn,
+  postJSON,
+  postUrl,
+  WebResponse
+} from '../utils';
 import { ContactStoreElement } from './ContactStoreElement';
-import { Compose, ComposeValue } from '../compose/Compose';
-import { fetchContactHistory, getDisplayName } from './helpers';
+import { Compose, ComposeValue } from '../form/Compose';
 import {
   AirtimeTransferredEvent,
   CampaignFiredEvent,
@@ -26,12 +39,21 @@ import {
   UpdateResultEvent,
   URNsChangedEvent,
   WebhookEvent
-} from './events';
-import { Chat, ChatEvent, MessageType } from '../chat/Chat';
+} from '../events';
+import { Chat, ChatEvent, MessageType } from '../display/Chat';
 import { getUserDisplay } from '../webchat';
 import { DEFAULT_AVATAR } from '../webchat/assets';
-import { UserSelect } from '../select/UserSelect';
-import { Select } from '../select/Select';
+import { UserSelect } from '../form/select/UserSelect';
+import { Select } from '../form/select/Select';
+import { Store } from '../store/Store';
+
+/*
+export const SCROLL_THRESHOLD = 100;
+export const SIMULATED_WEB_SLOWNESS = 0;
+export const MAX_CHAT_REFRESH = 10000;
+export const MIN_CHAT_REFRESH = 500;
+export const BODY_SNIPPET_LENGTH = 250;
+*/
 
 export enum Events {
   MESSAGE_CREATED = 'msg_created',
@@ -1196,3 +1218,91 @@ export class ContactChat extends ContactStoreElement {
     </div>`;
   }
 }
+export const closeTicket = (uuid: string): Promise<WebResponse> => {
+  const formData = new FormData();
+  formData.append('status', 'C');
+  return postUrl(`/ticket/update/${uuid}/?_format=json`, formData);
+};
+export const fetchContact = (endpoint: string): Promise<Contact> => {
+  return new Promise<Contact>((resolve, reject) => {
+    fetchResults(endpoint).then((contacts: Contact[]) => {
+      if (contacts && contacts.length === 1) {
+        resolve(contacts[0]);
+      } else {
+        reject('No contact found');
+      }
+    });
+  });
+};
+export const fetchContactHistory = (
+  reset: boolean,
+  endpoint: string,
+  ticket: string,
+  before: number = undefined,
+  after: number = undefined
+): Promise<ContactHistoryPage> => {
+  if (reset) {
+    pendingRequests.forEach((controller) => {
+      controller.abort();
+    });
+    pendingRequests = [];
+  }
+
+  return new Promise<ContactHistoryPage>((resolve) => {
+    const controller = new AbortController();
+    pendingRequests.push(controller);
+
+    let url = endpoint;
+    if (before) {
+      url += `&before=${before}`;
+    }
+
+    if (after) {
+      url += `&after=${after}`;
+    }
+
+    if (ticket) {
+      url += `&ticket=${ticket}`;
+    }
+
+    const store = document.querySelector('temba-store') as Store;
+
+    getUrl(url, controller)
+      .then((response: WebResponse) => {
+        // on success, remove our abort controller
+        pendingRequests = pendingRequests.filter(
+          (controller: AbortController) => {
+            return response.controller === controller;
+          }
+        );
+
+        const page = response.json as ContactHistoryPage;
+        store.resolveUsers(page.events, ['created_by']).then(() => {
+          resolve(page);
+        });
+      })
+      .catch(() => {
+        // canceled
+      });
+  });
+};
+export const getDisplayName = (user: User) => {
+  if (!user) {
+    return 'Somebody';
+  }
+
+  if ((user as NamedUser).name) {
+    return (user as NamedUser).name;
+  }
+
+  if (user.first_name && user.last_name) {
+    return `${user.first_name} ${user.last_name}`;
+  }
+
+  if (user.first_name) {
+    return user.first_name;
+  }
+
+  return user.email;
+};
+export let pendingRequests: AbortController[] = [];

package/src/{contacts → live}/ContactDetails.ts

@@ -1,6 +1,6 @@
 import { css, html, TemplateResult } from 'lit';
 import { ContactStoreElement } from './ContactStoreElement';
-import { Icon } from '../vectoricon';
+import { Icon } from '../Icons';
 import { capitalize } from '../utils';
 
 const STATUS = {

package/src/{contacts → live}/ContactFieldEditor.ts

@@ -1,12 +1,12 @@
 import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
-import { FormElement } from '../FormElement';
+import { FormElement } from '../form/FormElement';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
-import { InputType, TextInput } from '../textinput/TextInput';
-import { Icon } from '../vectoricon';
+import { InputType, TextInput } from '../form/TextInput';
+import { Icon } from '../Icons';
 import { getClasses, WebResponse } from '../utils';
-import { Select } from '../select/Select';
+import { Select } from '../form/select/Select';
 
 enum Status {
   Success = 'success',

package/src/{contacts → live}/ContactFields.ts

@@ -3,7 +3,7 @@ import { property } from 'lit/decorators.js';
 import { getClasses, postJSON } from '../utils';
 import { ContactFieldEditor } from './ContactFieldEditor';
 import { ContactStoreElement } from './ContactStoreElement';
-import { Checkbox } from '../checkbox/Checkbox';
+import { Checkbox } from '../form/Checkbox';
 import { CustomEventType } from '../interfaces';
 
 const MIN_FOR_FILTER = 10;

package/src/{contacts → live}/ContactNotepad.ts

@@ -1,7 +1,7 @@
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ContactStoreElement } from './ContactStoreElement';
-import { getDisplayName } from './helpers';
+import { getDisplayName } from './ContactChat';
 import { ContactNote, CustomEventType } from '../interfaces';
 
 export class ContactNotepad extends ContactStoreElement {

package/src/{contacts → live}/ContactPending.ts

@@ -6,7 +6,7 @@ import {
   ScheduledEventType
 } from '../interfaces';
 import { EndpointMonitorElement } from '../store/EndpointMonitorElement';
-import { Icon } from '../vectoricon';
+import { Icon } from '../Icons';
 
 const ICONS = {
   [ScheduledEventType.CampaignEvent]: Icon.campaign,

package/src/{chart → live}/TembaChart.ts

@@ -2,7 +2,7 @@ import { RapidElement } from '../RapidElement';
 import { property, state } from 'lit/decorators.js';
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 
-import { Select, SelectOption } from '../select/Select';
+import { Select, SelectOption } from '../form/select/Select';
 import { darkenColor, getClasses } from '../utils';
 import { getStore } from '../store/Store';
 

package/src/store/AppState.ts

@@ -1,5 +1,5 @@
 import { createStore, StoreApi } from 'zustand/vanilla';
-import { fetchResults } from '../utils';
+import { fetchResults, generateUUID } from '../utils';
 import {
   Action,
   Exit,
@@ -12,6 +12,7 @@ import {
 import { immer } from 'zustand/middleware/immer';
 import { subscribeWithSelector } from 'zustand/middleware';
 import { property } from 'lit/decorators.js';
+import { produce } from 'immer';
 
 export const FLOW_SPEC_VERSION = '14.3';
 const CANVAS_PADDING = 800;
@@ -94,12 +95,16 @@ export interface AppState {
     uuid: string,
     node: { actions: Action[]; uuid: string; exits: Exit[]; router?: Router }
   ): unknown;
+  updateConnection(
+    nodeUuid: string,
+    exitUuid: string,
+    destinationNodeUuid: string
+  ): unknown;
   updateCanvasPositions: (positions: CanvasPositions) => void;
-  updateNodePosition(uuid: string, newPosition: FlowPosition): void;
   removeNodes: (uuids: string[]) => void;
-
-  updateStickyPosition(uuid: string, newPosition: FlowPosition): void;
+  removeStickyNotes: (uuids: string[]) => void;
   updateStickyNote(uuid: string, sticky: StickyNote): void;
+  createStickyNote(position: FlowPosition): string;
 }
 
 export const zustand = createStore<AppState>()(
@@ -226,23 +231,13 @@ export const zustand = createStore<AppState>()(
             if (state.flowDefinition._ui.nodes[uuid]) {
               state.flowDefinition._ui.nodes[uuid].position = positions[uuid];
             }
-          }
-        });
-      },
 
-      updateNodePosition: (uuid: string, newPosition: FlowPosition) => {
-        set((state: AppState) => {
-          if (state.flowDefinition._ui.nodes[uuid]) {
-            state.flowDefinition._ui.nodes[uuid].position = newPosition;
-          } else {
-            // If the node doesn't exist in _ui, we can add it
-            state.flowDefinition._ui.nodes[uuid] = {
-              position: newPosition,
-              type: null,
-              config: {}
-            };
+            // otherwise, it might be a sticky
+            else if (state.flowDefinition._ui.stickies[uuid]) {
+              state.flowDefinition._ui.stickies[uuid].position =
+                positions[uuid];
+            }
           }
-
           state.dirtyDate = new Date();
         });
       },
@@ -253,21 +248,32 @@ export const zustand = createStore<AppState>()(
             delete state.flowDefinition._ui.nodes[uuid];
           }
 
-          state.flowDefinition.nodes = state.flowDefinition.nodes.filter(
-            (node) => !uuids.includes(node.uuid)
-          );
+          state.flowDefinition = produce(state.flowDefinition, (draft) => {
+            draft.nodes = draft.nodes.filter(
+              (node) => !uuids.includes(node.uuid)
+            );
+
+            draft.nodes.forEach((node) => {
+              node.exits.forEach((exit) => {
+                if (uuids.includes(exit.destination_uuid)) {
+                  exit.destination_uuid = null;
+                }
+              });
+            });
+          });
+
+          state.dirtyDate = new Date();
         });
       },
 
-      updateStickyPosition: (uuid: string, newPosition: FlowPosition) => {
+      removeStickyNotes: (uuids: string[]) => {
         set((state: AppState) => {
-          if (!state.flowDefinition._ui.stickies) {
-            state.flowDefinition._ui.stickies = {};
-          }
-          if (state.flowDefinition._ui.stickies[uuid]) {
-            state.flowDefinition._ui.stickies[uuid].position = newPosition;
-            state.dirtyDate = new Date();
+          if (state.flowDefinition._ui?.stickies) {
+            for (const uuid of uuids) {
+              delete state.flowDefinition._ui.stickies[uuid];
+            }
           }
+          state.dirtyDate = new Date();
         });
       },
 
@@ -284,6 +290,26 @@ export const zustand = createStore<AppState>()(
         });
       },
 
+      updateConnection: (
+        nodeUuid: string,
+        exitUuid: string,
+        destinationNodeUuid: string
+      ) => {
+        set((state: AppState) => {
+          // Find the exit with this UUID
+          const node = state.flowDefinition.nodes.find(
+            (node) => node.uuid === nodeUuid
+          );
+
+          const exit = node?.exits.find((e) => e.uuid === exitUuid);
+          if (exit) {
+            // Update the destination
+            exit.destination_uuid = destinationNodeUuid;
+            state.dirtyDate = new Date();
+          }
+        });
+      },
+
       updateStickyNote: (uuid: string, sticky: StickyNote) => {
         set((state: AppState) => {
           if (!state.flowDefinition._ui.stickies) {
@@ -292,6 +318,26 @@ export const zustand = createStore<AppState>()(
           state.flowDefinition._ui.stickies[uuid] = sticky;
           state.dirtyDate = new Date();
         });
+      },
+
+      createStickyNote: (position: FlowPosition): string => {
+        const uuid = generateUUID();
+        set((state: AppState) => {
+          if (!state.flowDefinition._ui.stickies) {
+            state.flowDefinition._ui.stickies = {};
+          }
+
+          const newSticky: StickyNote = {
+            position,
+            title: '',
+            body: '',
+            color: 'yellow'
+          };
+
+          state.flowDefinition._ui.stickies[uuid] = newSticky;
+          state.dirtyDate = new Date();
+        });
+        return uuid;
       }
     }))
   )

package/src/store/Store.ts

@@ -27,7 +27,7 @@ import { css, html } from 'lit';
 import { configureLocalization } from '@lit/localize';
 import { sourceLocale, targetLocales } from '../locales/locale-codes';
 import { StoreMonitorElement } from './StoreMonitorElement';
-import { getFullName } from '../user/TembaUser';
+import { getFullName } from '../display/TembaUser';
 import { AppState, zustand } from './AppState';
 import { StoreApi } from 'zustand/vanilla';
 

package/src/store/flow-definition.d.ts

@@ -97,6 +97,131 @@ export interface AddToGroup extends Action {
   groups: Group[];
 }
 
+export interface RemoveFromGroup extends Action {
+  groups: Group[];
+}
+
+export interface SetContactField extends Action {
+  field: NamedObject;
+  value: string;
+}
+
+export interface SetContactLanguage extends Action {
+  language: string;
+}
+
+export interface SetContactStatus extends Action {
+  status: 'active' | 'blocked' | 'stopped' | 'archived';
+}
+
+export interface SetContactChannel extends Action {
+  channel: NamedObject;
+}
+
+export interface AddContactUrn extends Action {
+  scheme: string;
+  path: string;
+}
+
+export interface SendEmail extends Action {
+  subject: string;
+  body: string;
+  addresses: string[];
+}
+
+export interface SendBroadcast extends Action {
+  text: string;
+  groups: Group[];
+  contacts: NamedObject[];
+}
+
+export interface EnterFlow extends Action {
+  flow: NamedObject;
+}
+
+export interface StartSession extends Action {
+  flow: NamedObject;
+  groups: Group[];
+  contacts: NamedObject[];
+  create_contact?: boolean;
+}
+
+export interface TransferAirtime extends Action {
+  amounts: number[];
+  result_name: string;
+}
+
+export interface CallClassifier extends Action {
+  classifier: NamedObject;
+  input: string;
+  result_name: string;
+}
+
+export interface CallResthook extends Action {
+  resthook: string;
+  result_name: string;
+}
+
+export interface CallLLM extends Action {
+  llm: NamedObject;
+  instructions: string;
+  result_name: string;
+}
+
+export interface OpenTicket extends Action {
+  subject: string;
+  body: string;
+  assignee?: NamedObject;
+  topic?: NamedObject;
+}
+
+export interface RequestOptin extends Action {
+  optin: NamedObject;
+}
+
+export interface AddInputLabels extends Action {
+  labels: NamedObject[];
+}
+
+export interface SayMsg extends Action {
+  text: string;
+  audio_url?: string;
+}
+
+export interface PlayAudio extends Action {
+  audio_url: string;
+}
+
+export interface WaitForResponse extends Action {
+  timeout?: number;
+}
+
+export interface WaitForMenu extends Action {
+  menu: NamedObject;
+  timeout?: number;
+}
+
+export interface WaitForDigits extends Action {
+  count: number;
+  timeout?: number;
+}
+
+export interface WaitForAudio extends Action {
+  timeout?: number;
+}
+
+export interface WaitForVideo extends Action {
+  timeout?: number;
+}
+
+export interface WaitForImage extends Action {
+  timeout?: number;
+}
+
+export interface WaitForLocation extends Action {
+  timeout?: number;
+}
+
 export interface Exit {
   uuid: string;
   destination_uuid?: string;

package/src/{utils/index.ts → utils.ts}

@@ -1,16 +1,11 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
 import { html, TemplateResult } from 'lit-html';
-import { Button } from '../button/Button';
-import { Dialog } from '../dialog/Dialog';
-import {
-  Attachment,
-  ContactField,
-  Shortcut,
-  Ticket,
-  User
-} from '../interfaces';
+import { Button } from './display/Button';
+import { Dialog } from './layout/Dialog';
+import { Attachment, ContactField, Shortcut, Ticket, User } from './interfaces';
 import ColorHash from 'color-hash';
-import { Toast } from '../toast/Toast';
+import { Toast } from './display/Toast';
+import { v4 as generateUUID } from 'uuid';
 
 export const DEFAULT_MEDIA_ENDPOINT = '/api/v2/media.json';
 
@@ -582,6 +577,7 @@ export const isDate = (value: any): boolean => {
   if (toString.call(value) === '[object Date]') {
     return true;
   }
+  /* c8 ignore next 3 */
   if (typeof value.replace === 'function') {
     value.replace(/^\s+|\s+$/gm, '');
   }
@@ -916,3 +912,23 @@ export const hashCode = (s) => {
 export const showModax = (title: string, endpoint: string) => {
   (window as any).showModax(title, endpoint);
 };
+export const sanitizeUnintendedUnicode = (text: string): string => {
+  if (text) {
+    return text
+      .replace(/[\u2018\u2019]/g, "'") // Smart single quotes
+      .replace(/[\u201C\u201D]/g, '"') // Smart double quotes
+      .replace(/[\u2013\u2014]/g, '-') // En/em dash
+      .replace(/\u2026/g, '...') // Horizontal ellipsis
+      .replace(/\u2002/g, ' '); // En space
+  }
+  return text;
+};
+export const getCenter = (a: DOMRect, b: DOMRect) => {
+  return a.left + a.width / 2 - b.width / 2;
+};
+export const getMiddle = (a: DOMRect, b: DOMRect) => {
+  return a.top + a.height / 2 - b.height / 2;
+};
+
+// Export the UUID function from the uuid package
+export { generateUUID };

package/src/webchat/WebChat.ts

@@ -3,7 +3,7 @@ import { LitElement, TemplateResult, html, css, PropertyValueMap } from 'lit';
 import { property } from 'lit/decorators.js';
 import { getCookie, setCookie } from '../utils';
 import { DEFAULT_AVATAR } from './assets';
-import { Chat, ChatEvent, Message, MessageType } from '../chat/Chat';
+import { Chat, ChatEvent, Message, MessageType } from '../display/Chat';
 
 interface User {
   avatar?: string;

package/static/css/temba-components.css

@@ -33,6 +33,7 @@
     /* primary colors, should be dark */
     --color-selection: #f0f6ff;
 
+    --color-success: #3ca96a;
 
     --widget-box-shadow: rgba(-1, -1, 0, .15) 0px 1px 7px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
     --widget-box-shadow-focused: 0 0 0 3px rgba(164, 202, 254, .45);

package/svg.js

@@ -90,11 +90,8 @@ function modifyFileContent(filePath, regexPattern, groupNumber, replacement) {
 }
 
 async function main() {
-  // const OUTPUT_FILE_NAME = cwd + "/static/svg/index.svg";
-  //const USAGE_FILE = './src/vectoricon/index.ts';
-
   const OUTPUT_FILE_NAME = argv.output || cwd + '/static/svg/index.svg';
-  const USAGE_FILE = argv.usage || './src/vectoricon/index.ts';
+  const USAGE_FILE = argv.usage || './src/Icons.ts';
 
   let packs = sh.ls(PACK_DIR);
   packs.sort();

package/temba-components.ts

@@ -3,8 +3,8 @@ import { addCustomElement } from './temba-modules';
 
 // we import and declare the alias editor seperately since
 // leaflet-map doesn't work in dev mode
-import { AliasEditor } from './src/aliaseditor/AliasEditor';
-import { LeafletMap } from './src/leafletmap/LeafletMap';
+import { AliasEditor } from './src/live/AliasEditor';
+import { LeafletMap } from './src/display/LeafletMap';
 
 addCustomElement('leaflet-map', LeafletMap);
 addCustomElement('alias-editor', AliasEditor);