@nyaruka/temba-components 0.129.7 → 0.129.9

package/src/live/ContactChat.ts

@@ -20,6 +20,7 @@ import { ContactStoreElement } from './ContactStoreElement';
 import { Compose, ComposeValue } from '../form/Compose';
 import {
   AirtimeTransferredEvent,
+  CallEvent,
   ChannelEvent,
   ContactEvent,
   ContactGroupsEvent,
@@ -28,7 +29,8 @@ import {
   FlowEvent,
   MsgEvent,
   NameChangedEvent,
-  OptinRequestedEvent,
+  OptInEvent,
+  RunEvent,
   TicketEvent,
   UpdateFieldEvent,
   URNsChangedEvent
@@ -53,9 +55,8 @@ export enum Events {
   MESSAGE_RECEIVED = 'msg_received',
   BROADCAST_CREATED = 'broadcast_created',
   IVR_CREATED = 'ivr_created',
-  FLOW_ENTERED = 'flow_entered',
-
-  FLOW_EXITED = 'flow_exited',
+  CALL_CREATED = 'call_created',
+  CALL_RECEIVED = 'call_received',
   CONTACT_FIELD_CHANGED = 'contact_field_changed',
   CONTACT_GROUPS_CHANGED = 'contact_groups_changed',
   CONTACT_NAME_CHANGED = 'contact_name_changed',
@@ -63,7 +64,6 @@ export enum Events {
   CHANNEL_EVENT = 'channel_event',
   CONTACT_LANGUAGE_CHANGED = 'contact_language_changed',
   AIRTIME_TRANSFERRED = 'airtime_transferred',
-  CALL_STARTED = 'call_started',
   NOTE_CREATED = 'note_created',
   TICKET_ASSIGNED = 'ticket_assigned',
   TICKET_NOTE_ADDED = 'ticket_note_added',
@@ -71,7 +71,16 @@ export enum Events {
   TICKET_OPENED = 'ticket_opened',
   TICKET_REOPENED = 'ticket_reopened',
   TICKET_TOPIC_CHANGED = 'ticket_topic_changed',
-  OPTIN_REQUESTED = 'optin_requested'
+  OPTIN_STARTED = 'optin_started',
+  OPTIN_STOPPED = 'optin_stopped',
+  OPTIN_REQUESTED = 'optin_requested',
+  RUN_STARTED = 'run_started',
+  RUN_ENDED = 'run_ended',
+
+  // deprecated
+  CALL_STARTED = 'call_started',
+  FLOW_ENTERED = 'flow_entered',
+  FLOW_EXITED = 'flow_exited'
 }
 
 const renderInfoList = (singular: string, plural: string, items: any[]) => {
@@ -104,13 +113,13 @@ const renderChannelEvent = (event: ChannelEvent): string => {
   } else if (event.event.type === 'stop_contact') {
     return 'Stopped';
   } else if (event.event.type === 'mt_call') {
-    return 'Outgoing Phone Call';
+    return 'Outgoing Phone Call'; // deprecated
   } else if (event.event.type == 'mo_call') {
-    return 'Incoming Phone call';
+    return 'Incoming Phone call'; // deprecated
   } else if (event.event.type == 'optin') {
-    return `Opted in to **${event.event.optin?.name}**`;
+    return `Opted in to **${event.event.optin?.name}**`; // deprecated
   } else if (event.event.type == 'optout') {
-    return `Opted out of **${event.event.optin?.name}**`;
+    return `Opted out of **${event.event.optin?.name}**`; // deprecated
   }
 };
 
@@ -126,6 +135,21 @@ const renderFlowEvent = (event: FlowEvent): string => {
   return `${verb} [**${event.flow.name}**](/flow/editor/${event.flow.uuid}/)`;
 };
 
+const renderRunEvent = (event: RunEvent): string => {
+  let verb = 'Started';
+  if (event.type === Events.RUN_ENDED) {
+    if (event.status === 'completed') {
+      verb = 'Completed';
+    } else if (event.status === 'expired') {
+      verb = 'Expired from';
+    } else {
+      verb = 'Interrupted';
+    }
+  }
+
+  return `${verb} [**${event.flow.name}**](/flow/editor/${event.flow.uuid}/)`;
+};
+
 const renderUpdateEvent = (event: UpdateFieldEvent): string => {
   return event.value
     ? `Updated **${event.field.name}** to **${event.value.text}**`
@@ -195,18 +219,28 @@ export const renderAirtimeTransferredEvent = (
   return `Transferred **${event.amount}** ${event.currency} of airtime`;
 };
 
-export const renderCallStartedEvent = (): string => {
-  return `Call Started`;
-};
-
 export const renderContactLanguageChangedEvent = (
   event: ContactLanguageChangedEvent
 ): string => {
   return `Language updated to **${event.language}**`;
 };
 
-export const renderOptinRequested = (event: OptinRequestedEvent): string => {
-  return `Requested opt-in for ${event.optin.name}`;
+export const renderCallEvent = (event: CallEvent): string => {
+  if (event.type === Events.CALL_CREATED) {
+    return `Call Started`;
+  } else if (event.type === Events.CALL_RECEIVED) {
+    return `Call Answered`;
+  }
+};
+
+export const renderOptInEvent = (event: OptInEvent): string => {
+  if (event.type === Events.OPTIN_REQUESTED) {
+    return `Requested opt-in for ${event.optin.name}`;
+  } else if (event.type === Events.OPTIN_STARTED) {
+    return `Opted in to **${event.optin.name}**`;
+  } else if (event.type === Events.OPTIN_STOPPED) {
+    return `Opted out of **${event.optin.name}**`;
+  }
 };
 
 export class ContactChat extends ContactStoreElement {
@@ -638,6 +672,13 @@ export class ContactChat extends ContactStoreElement {
           text: renderFlowEvent(event as FlowEvent)
         };
         break;
+      case Events.RUN_STARTED:
+      case Events.RUN_ENDED:
+        message = {
+          type: MessageType.Inline,
+          text: renderRunEvent(event as RunEvent)
+        };
+        break;
       case Events.CONTACT_FIELD_CHANGED:
         message = {
           type: MessageType.Inline,
@@ -668,10 +709,17 @@ export class ContactChat extends ContactStoreElement {
           text: renderAirtimeTransferredEvent(event as AirtimeTransferredEvent)
         };
         break;
-      case Events.CALL_STARTED:
+      case Events.CALL_CREATED:
+      case Events.CALL_RECEIVED:
+        message = {
+          type: MessageType.Inline,
+          text: renderCallEvent(event as CallEvent)
+        };
+        break;
+      case Events.CALL_STARTED: // deprecated
         message = {
           type: MessageType.Inline,
-          text: renderCallStartedEvent()
+          text: `Started Call`
         };
         break;
       case Events.CHANNEL_EVENT:
@@ -689,9 +737,11 @@ export class ContactChat extends ContactStoreElement {
         };
         break;
       case Events.OPTIN_REQUESTED:
+      case Events.OPTIN_STARTED:
+      case Events.OPTIN_STOPPED:
         message = {
           type: MessageType.Inline,
-          text: renderOptinRequested(event as OptinRequestedEvent)
+          text: renderOptInEvent(event as OptInEvent)
         };
         break;
     }

package/src/markdown.ts

@@ -11,31 +11,39 @@ import { Remarkable } from 'remarkable';
 
 export const markdown = new Remarkable();
 
-// Class-based directive API
-export class RenderMarkdown extends Directive {
-  // State stored in class field
-  // value: string | undefined;
+// Base class for markdown rendering directives
+abstract class BaseMarkdownDirective extends Directive {
   constructor(partInfo: PartInfo) {
     super(partInfo);
     // When necessary, validate part in constructor using `part.type`
     if (partInfo.type !== PartType.CHILD) {
-      throw new Error('renderMarkdown only supports child expressions');
+      throw new Error('markdown directives only support child expressions');
     }
   }
+
   // Optional: override update to perform any direct DOM manipulation
-  // DirectiveParameters<this>
   update(part: Part, [initialValue]: any) {
     /* Any imperative updates to DOM/parts would go here */
     return this.render(initialValue);
   }
-  // Do SSR-compatible rendering (arguments are passed from call site)
+
+  // Abstract method to be implemented by subclasses
+  abstract render(initialValue: string): any;
+}
+
+// Class-based directive for block markdown rendering
+export class RenderMarkdown extends BaseMarkdownDirective {
   render(initialValue: string) {
-    // Previous state available on class field
-    //  if (this.value === undefined) {
-    // this.value = initialValue;
-    //}
     return html`${unsafeHTML(markdown.render(initialValue))}`;
   }
 }
 
+// Class-based directive for inline markdown rendering
+export class RenderMarkdownInline extends BaseMarkdownDirective {
+  render(initialValue: string) {
+    return html`${unsafeHTML(markdown.renderInline(initialValue))}`;
+  }
+}
+
 export const renderMarkdown = directive(RenderMarkdown);
+export const renderMarkdownInline = directive(RenderMarkdownInline);

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

@@ -44,6 +44,7 @@ export type ActionType =
   | 'split_by_subflow'
   | 'split_by_webhook'
   | 'split_by_llm'
+  | 'split_by_llm_categorize'
   | 'wait_for_response'
   | 'wait_for_menu'
   | 'wait_for_dial'
@@ -173,12 +174,14 @@ export interface CallResthook extends Action {
 export interface CallLLM extends Action {
   llm: NamedObject;
   instructions: string;
+  input: string;
   result_name: string;
 }
 
 export interface OpenTicket extends Action {
-  subject: string;
-  body: string;
+  subject?: string;
+  body?: string;
+  note?: string;
   assignee?: NamedObject;
   topic?: NamedObject;
 }

package/static/api/labels.json

@@ -0,0 +1,31 @@
+{
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "uuid": "61cae99b-56e1-4f3e-a2b9-07fb5cf2be9e",
+      "name": "Important",
+      "count": 234
+    },
+    {
+      "uuid": "f80ed7b6-5e6a-49eb-94b6-4631a9677cd8",
+      "name": "Spam",
+      "count": 0
+    },
+    {
+      "uuid": "76e7a094-22ea-441d-91c4-283d8168e8e3",
+      "name": "Follow Up",
+      "count": 128
+    },
+    {
+      "uuid": "66e7a094-22ea-441d-91c4-283d8168e8e4",
+      "name": "Customer Service",
+      "count": 89
+    },
+    {
+      "uuid": "a3f2990b-4096-452e-a586-dc06a9434dde",
+      "name": "Feedback",
+      "count": 42
+    }
+  ]
+}

package/static/api/topics.json

@@ -3,19 +3,34 @@
   "previous": null,
   "results": [
     {
-      "uuid": "topic-1",
-      "name": "General Support",
-      "created_on": "2024-01-01T00:00:00Z"
+      "uuid": "1b1cb507-e079-4b30-818c-1898edcbd178",
+      "name": "General",
+      "counts": {
+        "open": 2,
+        "closed": 12
+      },
+      "system": true,
+      "created_on": "2021-08-25T22:50:51.381947Z"
     },
     {
-      "uuid": "topic-2",
-      "name": "Technical Issues",
-      "created_on": "2024-01-01T00:00:00Z"
+      "uuid": "bf4b568d-97b8-4d20-aed5-ad8150270af8",
+      "name": "Technical Support",
+      "counts": {
+        "open": 5,
+        "closed": 23
+      },
+      "system": false,
+      "created_on": "2021-08-25T22:51:15.123456Z"
     },
     {
-      "uuid": "topic-3",
-      "name": "Billing Questions",
-      "created_on": "2024-01-01T00:00:00Z"
+      "uuid": "a3f7e9d2-1c8b-4e5f-9a6b-7d4c2e8f1a3b",
+      "name": "Billing",
+      "counts": {
+        "open": 1,
+        "closed": 8
+      },
+      "system": false,
+      "created_on": "2021-08-25T22:52:30.789012Z"
     }
   ]
 }

package/static/api/users.json

@@ -3,24 +3,43 @@
   "previous": null,
   "results": [
     {
-      "uuid": "user-1",
-      "email": "admin@example.com",
-      "first_name": "Admin",
-      "last_name": "User",
-      "username": "admin",
-      "is_active": true,
-      "is_staff": true,
-      "date_joined": "2024-01-01T00:00:00Z"
+      "uuid": "c0f5b431-35e9-429c-9d57-5fee2fac46a3",
+      "email": "eric+marion+berry@textit.com",
+      "first_name": "Marion",
+      "last_name": "Berry",
+      "name": "Marion Berry",
+      "role": "agent",
+      "team": {
+        "uuid": "15236c1e-9375-4f84-bb48-ec64283d1eb9",
+        "name": "All Topics"
+      },
+      "created_on": "2023-04-05T21:11:31.909765Z",
+      "avatar": null
     },
     {
-      "uuid": "user-2",
-      "email": "editor@example.com",
-      "first_name": "Editor",
-      "last_name": "User",
-      "username": "editor",
-      "is_active": true,
-      "is_staff": false,
-      "date_joined": "2024-01-01T00:00:00Z"
+      "uuid": "ae79dd5b-8c34-4602-a2c1-1e4db2419f0f",
+      "email": "eric@textit.com",
+      "first_name": "Eric",
+      "last_name": "Newcomer",
+      "name": "Eric Newcomer",
+      "role": "administrator",
+      "team": null,
+      "created_on": "2013-02-26T21:19:44Z",
+      "avatar": "https://dl-textit.s3.amazonaws.com/avatars/4/b6d756224c61435bb36b57ae03b83359.jpg"
+    },
+    {
+      "uuid": "f8e2a1b5-9c7d-4e6f-8a3b-1c5e9f2d4a6b",
+      "email": "sarah.smith@textit.com",
+      "first_name": "Sarah",
+      "last_name": "Smith",
+      "name": "Sarah Smith",
+      "role": "agent",
+      "team": {
+        "uuid": "15236c1e-9375-4f84-bb48-ec64283d1eb9",
+        "name": "All Topics"
+      },
+      "created_on": "2023-06-15T14:22:18.456789Z",
+      "avatar": null
     }
   ]
 }

package/static/css/temba-components.css

@@ -51,6 +51,8 @@
     --color-primary-light: #eee;
     --color-secondary-light: #ccc;
 
+    --color-label: #333;
+
     /* dark colors, nav bar, buttons, etc */
     --color-primary-dark: rgb(var(--primary-rgb));
     --color-secondary-dark: rgb(var(--secondary-rgb));
@@ -59,7 +61,7 @@
     --color-text-light: rgba(255, 255, 255, 1);
     --color-text-dark: rgba(0, 0, 0, 0.8);
     --color-text-dark-secondary: rgba(0, 0, 0, 0.25);
-    --color-text-help: rgba(0, 0, 0, 0.35);
+    --color-text-help: rgb(120, 120, 120);
     --color-tertiary: rgb(var(--tertiary-rgb));
 
     --help-text-size: 0.85em;
@@ -123,8 +125,8 @@
     --header-bg: var(--color-primary-dark);
     --header-text: var(--color-text-light);
 
-    --temba-textinput-padding: 9px;
-    --temba-textinput-font-size: 13px;
+    --temba-textinput-padding: 9px 14px;
+    --temba-textinput-font-size: 14px;
 
     --options-block-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
     --options-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);