@nyaruka/temba-components 0.129.8 → 0.129.10

package/src/form/select/Select.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { TemplateResult, html, css, CSSResult, CSSResultArray } from 'lit';
+import { TemplateResult, html, css } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import {
   getUrl,
@@ -11,7 +11,7 @@ import {
 import '../../display/Options';
 import '../../list/SortableList';
 import { EventHandler } from '../../RapidElement';
-import { FormElement } from '../../form/FormElement';
+import { FieldElement } from '../../form/FieldElement';
 
 import { lru } from 'tiny-lru';
 import { CompletionOption, CustomEventType, Position } from '../../interfaces';
@@ -35,11 +35,13 @@ export interface SelectOption {
   arbitrary?: boolean;
 }
 
-export class Select<T extends SelectOption> extends FormElement {
+export class Select<T extends SelectOption> extends FieldElement {
   private hiddenInputs: HTMLInputElement[] = [];
 
-  static get styles(): CSSResult | CSSResultArray {
+  static get styles() {
     return css`
+      ${super.styles}
+
       :host {
         --transition-speed: 0;
         font-family: var(--font-family);
@@ -222,6 +224,7 @@ export class Select<T extends SelectOption> extends FormElement {
 
       .multi temba-sortable-list {
         margin: 0 !important;
+        flex-grow: 1;
       }
 
       input {
@@ -255,6 +258,12 @@ export class Select<T extends SelectOption> extends FormElement {
 
       .multi .input-wrapper {
         margin-left: 2px !important;
+        margin-right: 2px !important;
+        margin-top: 2px;
+        margin-bottom: 2px;
+        flex-shrink: 0;
+        min-width: 100px;
+        align-self: center;
       }
 
       .input-wrapper:focus-within .placeholder {
@@ -290,11 +299,6 @@ export class Select<T extends SelectOption> extends FormElement {
         box-shadow: none !important;
       }
 
-      .multi .input-wrapper {
-        flex-shrink: 0;
-        min-width: 100px;
-      }
-
       .input-wrapper .searchbox {
       }
 
@@ -310,6 +314,17 @@ export class Select<T extends SelectOption> extends FormElement {
         margin-left: 6px;
       }
 
+      .empty .placeholder {
+        display: block;
+      }
+
+      .multi .placeholder {
+        display: block;
+        margin: 2px 2px;
+        padding: 2px 8px;
+        align-self: center;
+      }
+
       .footer {
         padding: 5px 10px;
         background: var(--color-primary-light);
@@ -322,7 +337,7 @@ export class Select<T extends SelectOption> extends FormElement {
       .small {
         --temba-select-selected-padding: 6px;
         --temba-select-selected-line-height: 12px;
-        --temba-select-selected-font-size: 12px;
+        --temba-select-selected-font-size: 14px;
         --temba-select-min-height: 2.28em;
       }
 
@@ -476,15 +491,26 @@ export class Select<T extends SelectOption> extends FormElement {
   @property({ type: String, attribute: 'info_text' })
   infoText = '';
 
+  // Override the setter to ensure values is always an array
   @property({ type: Array })
-  values: T[] = [];
+  set values(newValues: any) {
+    this._values = Array.isArray(newValues) ? newValues : [];
+    this.requestUpdate('values');
+  }
+
+  get values(): T[] {
+    return this._values || [];
+  }
+
+  private _values: T[] = [];
 
   @property({ type: Object })
   selection: any;
 
   @property({ attribute: false })
-  getName: (option: any) => string = (option: any) =>
-    option[this.nameKey || 'name'];
+  getName: (option: any) => string = (option: any) => {
+    return option[this.nameKey || 'name'];
+  };
 
   @property({ attribute: false })
   isMatch: (option: any, q: string) => boolean = this.isMatchDefault;
@@ -545,7 +571,7 @@ export class Select<T extends SelectOption> extends FormElement {
   private alphaSort = (a: any, b: any) => {
     // by default, all endpoint values are sorted by name
     if (this.endpoint) {
-      return this.getName(a).localeCompare(this.getName(b));
+      return this.getNameInternal(a).localeCompare(this.getNameInternal(b));
     }
     return 0;
   };
@@ -573,7 +599,7 @@ export class Select<T extends SelectOption> extends FormElement {
   }
 
   public isMatchDefault(option: T, q: string) {
-    const name = this.getName(option) || '';
+    const name = this.getNameInternal(option) || '';
     return name.toLowerCase().indexOf(q) > -1;
   }
 
@@ -963,7 +989,9 @@ export class Select<T extends SelectOption> extends FormElement {
   }
 
   protected getNameInternal: (option: T) => string = (option: T) => {
-    return this.getName(option);
+    return this.getName
+      ? this.getName(option)
+      : option[this.nameKey || 'name'] || '';
   };
 
   private getOptionsDefault(response: WebResponse): any[] {
@@ -1493,7 +1521,7 @@ export class Select<T extends SelectOption> extends FormElement {
               name="${icon}"
               style="margin-right:0.5em;"
             ></temba-icon>`
-          : null}<span>${this.getName(option)}</span>
+          : null}<span>${this.getNameInternal(option)}</span>
       </div>
     `;
   }
@@ -1634,11 +1662,15 @@ export class Select<T extends SelectOption> extends FormElement {
     }
   }
 
-  public render(): TemplateResult {
+  protected renderWidget(): TemplateResult {
     const placeholder = this.values.length === 0 ? this.placeholder : '';
-    const placeholderDiv = html`
-      <div class="placeholder">${placeholder}</div>
-    `;
+
+    // Single unified placeholder - shows when empty and (not focused OR not searchable)
+    const shouldShowPlaceholder =
+      this.values.length === 0 && (!this.focused || !this.searchable);
+    const placeholderElement = shouldShowPlaceholder
+      ? html`<div class="placeholder">${placeholder}</div>`
+      : null;
 
     const clear =
       this.clearable && this.values.length > 0 && !this.isMultiMode
@@ -1683,10 +1715,9 @@ export class Select<T extends SelectOption> extends FormElement {
               .value=${this.input}
             />
             <div id="anchor" style=${styleMap(anchorStyles)}></div>
-            ${placeholderDiv}
           </div>
         `
-      : placeholderDiv;
+      : null;
 
     const items = html`${!this.isMultiMode && !this.resolving ? input : null}
     ${this.isMultiMode && this.values.length > 1
@@ -1760,9 +1791,10 @@ export class Select<T extends SelectOption> extends FormElement {
                 </div>
               `
             )}
+            ${this.searchable && this.focused ? input : null}
           </temba-sortable-list>
         `
-      : this.values.map(
+      : html`${this.values.map(
           (selected: any, index: number) => html`
             <div
               class="selected-item ${index === this.selectedIndex
@@ -1811,19 +1843,10 @@ export class Select<T extends SelectOption> extends FormElement {
             </div>
           `
         )}
-    ${this.isMultiMode ? input : null}`;
+        ${this.isMultiMode && this.searchable && this.focused ? input : null}
+        ${placeholderElement}`}`;
 
     return html`
-            
-      <temba-field
-        name=${this.name}
-        .label=${this.label}
-        .helpText=${this.helpText}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .hideErrors=${this.hideErrors}
-        ?disabled=${this.disabled}
-      >
         <slot></slot>
         <div class="wrapper-bg">
         
@@ -1917,7 +1940,10 @@ export class Select<T extends SelectOption> extends FormElement {
           : null
       }
     </temba-options>
-  </temba-field>
-  `;
+    `;
+  }
+
+  public render(): TemplateResult {
+    return this.renderField();
   }
 }

package/src/form/select/UserSelect.ts

@@ -1,4 +1,4 @@
-import { css, CSSResultArray, html, TemplateResult } from 'lit';
+import { css, html, TemplateResult } from 'lit';
 import { Select, SelectOption } from './Select';
 import { property } from 'lit/decorators.js';
 import { getFullName } from '../../display/TembaUser';
@@ -10,16 +10,15 @@ export interface UserOption extends SelectOption {
 }
 
 export class UserSelect extends Select<UserOption> {
-  static get styles(): CSSResultArray {
-    return [
-      super.styles,
-      css`
-        :host {
-          width: 150px;
-          display: block;
-        }
-      `
-    ];
+  static get styles() {
+    return css`
+      ${super.styles}
+
+      :host {
+        width: 150px;
+        display: block;
+      }
+    `;
   }
 
   @property({ type: String })

package/src/form/select/WorkspaceSelect.ts

@@ -1,4 +1,4 @@
-import { css, CSSResultArray, html, TemplateResult } from 'lit';
+import { css, html, TemplateResult } from 'lit';
 import { Select, SelectOption } from './Select';
 import { property } from 'lit/decorators.js';
 import { getScrollParent } from '../../utils';
@@ -10,15 +10,14 @@ export interface WorkspaceOption extends SelectOption {
 }
 
 export class WorkspaceSelect extends Select<WorkspaceOption> {
-  static get styles(): CSSResultArray {
-    return [
-      super.styles,
-      css`
-        :host {
-          border: 0px solid blue;
-        }
-      `
-    ];
+  static get styles() {
+    return css`
+      ${super.styles}
+
+      :host {
+        border: 0px solid blue;
+      }
+    `;
   }
 
   @property({ type: String })

package/src/live/ContactChat.ts

@@ -20,15 +20,16 @@ import { ContactStoreElement } from './ContactStoreElement';
 import { Compose, ComposeValue } from '../form/Compose';
 import {
   AirtimeTransferredEvent,
+  CallEvent,
   ChannelEvent,
+  ChatStartedEvent,
   ContactEvent,
   ContactGroupsEvent,
   ContactHistoryPage,
   ContactLanguageChangedEvent,
-  FlowEvent,
   MsgEvent,
   NameChangedEvent,
-  OptinRequestedEvent,
+  OptInEvent,
   RunEvent,
   TicketEvent,
   UpdateFieldEvent,
@@ -50,32 +51,35 @@ export const BODY_SNIPPET_LENGTH = 250;
 */
 
 export enum Events {
-  MESSAGE_CREATED = 'msg_created',
-  MESSAGE_RECEIVED = 'msg_received',
+  AIRTIME_TRANSFERRED = 'airtime_transferred',
   BROADCAST_CREATED = 'broadcast_created',
-  IVR_CREATED = 'ivr_created',
+  CALL_CREATED = 'call_created',
+  CALL_MISSED = 'call_missed',
+  CALL_RECEIVED = 'call_received',
+  CHAT_STARTED = 'chat_started',
   CONTACT_FIELD_CHANGED = 'contact_field_changed',
   CONTACT_GROUPS_CHANGED = 'contact_groups_changed',
+  CONTACT_LANGUAGE_CHANGED = 'contact_language_changed',
   CONTACT_NAME_CHANGED = 'contact_name_changed',
   CONTACT_URNS_CHANGED = 'contact_urns_changed',
-  CHANNEL_EVENT = 'channel_event',
-  CONTACT_LANGUAGE_CHANGED = 'contact_language_changed',
-  AIRTIME_TRANSFERRED = 'airtime_transferred',
-  CALL_STARTED = 'call_started',
+  IVR_CREATED = 'ivr_created',
+  MSG_CREATED = 'msg_created',
+  MSG_RECEIVED = 'msg_received',
   NOTE_CREATED = 'note_created',
+  OPTIN_REQUESTED = 'optin_requested',
+  OPTIN_STARTED = 'optin_started',
+  OPTIN_STOPPED = 'optin_stopped',
+  RUN_ENDED = 'run_ended',
+  RUN_STARTED = 'run_started',
   TICKET_ASSIGNED = 'ticket_assigned',
-  TICKET_NOTE_ADDED = 'ticket_note_added',
   TICKET_CLOSED = 'ticket_closed',
+  TICKET_NOTE_ADDED = 'ticket_note_added',
   TICKET_OPENED = 'ticket_opened',
   TICKET_REOPENED = 'ticket_reopened',
   TICKET_TOPIC_CHANGED = 'ticket_topic_changed',
-  OPTIN_REQUESTED = 'optin_requested',
-  RUN_STARTED = 'run_started',
-  RUN_ENDED = 'run_ended',
 
   // deprecated
-  FLOW_ENTERED = 'flow_entered',
-  FLOW_EXITED = 'flow_exited'
+  CHANNEL_EVENT = 'channel_event'
 }
 
 const renderInfoList = (singular: string, plural: string, items: any[]) => {
@@ -108,28 +112,16 @@ 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
   }
 };
 
-const renderFlowEvent = (event: FlowEvent): string => {
-  let verb = 'Interrupted';
-  if (event.status !== 'I') {
-    if (event.type === Events.FLOW_ENTERED) {
-      verb = 'Started';
-    } else {
-      verb = 'Completed';
-    }
-  }
-  return `${verb} [**${event.flow.name}**](/flow/editor/${event.flow.uuid}/)`;
-};
-
 const renderRunEvent = (event: RunEvent): string => {
   let verb = 'Started';
   if (event.type === Events.RUN_ENDED) {
@@ -145,6 +137,14 @@ const renderRunEvent = (event: RunEvent): string => {
   return `${verb} [**${event.flow.name}**](/flow/editor/${event.flow.uuid}/)`;
 };
 
+const renderChatStartedEvent = (event: ChatStartedEvent): string => {
+  if (event.params) {
+    return `Chat referral`;
+  } else {
+    return `Chat started`;
+  }
+};
+
 const renderUpdateEvent = (event: UpdateFieldEvent): string => {
   return event.value
     ? `Updated **${event.field.name}** to **${event.value.text}**`
@@ -214,18 +214,30 @@ 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_MISSED) {
+    return `Call missed`;
+  } 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 {
@@ -650,13 +662,6 @@ export class ContactChat extends ContactStoreElement {
           text: `Topic changed to **${(event as TicketEvent).topic.name}**`
         };
         break;
-      case Events.FLOW_ENTERED:
-      case Events.FLOW_EXITED:
-        message = {
-          type: MessageType.Inline,
-          text: renderFlowEvent(event as FlowEvent)
-        };
-        break;
       case Events.RUN_STARTED:
       case Events.RUN_ENDED:
         message = {
@@ -694,10 +699,12 @@ export class ContactChat extends ContactStoreElement {
           text: renderAirtimeTransferredEvent(event as AirtimeTransferredEvent)
         };
         break;
-      case Events.CALL_STARTED:
+      case Events.CALL_CREATED:
+      case Events.CALL_MISSED:
+      case Events.CALL_RECEIVED:
         message = {
           type: MessageType.Inline,
-          text: renderCallStartedEvent()
+          text: renderCallEvent(event as CallEvent)
         };
         break;
       case Events.CHANNEL_EVENT:
@@ -706,6 +713,12 @@ export class ContactChat extends ContactStoreElement {
           text: renderChannelEvent(event as ChannelEvent)
         };
         break;
+      case Events.CHAT_STARTED:
+        message = {
+          type: MessageType.Inline,
+          text: renderChatStartedEvent(event as ChatStartedEvent)
+        };
+        break;
       case Events.CONTACT_LANGUAGE_CHANGED:
         message = {
           type: MessageType.Inline,
@@ -715,9 +728,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/live/ContactFieldEditor.ts

@@ -1,12 +1,12 @@
 import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
-import { FormElement } from '../form/FormElement';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { InputType, TextInput } from '../form/TextInput';
 import { Icon } from '../Icons';
 import { getClasses, WebResponse } from '../utils';
 import { Select } from '../form/select/Select';
+import { FieldElement } from '../form/FieldElement';
 
 enum Status {
   Success = 'success',
@@ -380,7 +380,7 @@ export class ContactFieldEditor extends RapidElement {
   public handleSubmit() {
     const input = this.shadowRoot.querySelector(
       'temba-textinput, temba-datepicker'
-    ) as FormElement;
+    ) as FieldElement;
 
     if (input.value !== this.value) {
       this.dirty = true;

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"
     }
   ]
 }