@nyaruka/temba-components 0.129.9 → 0.129.11

package/src/events.ts

@@ -30,8 +30,10 @@ export interface ChannelEvent extends ContactEvent {
 
 export interface ContactLanguageChangedEvent extends ContactEvent {
   language: string;
-  step_uuid: string;
-  session_uuid: string;
+}
+
+export interface ContactStatusChangedEvent extends ContactEvent {
+  status: string;
 }
 
 export interface OptInEvent extends ContactEvent {
@@ -42,12 +44,16 @@ export interface OptInEvent extends ContactEvent {
 }
 
 export interface CallEvent extends ContactEvent {
-  call: {
+  call?: {
     uuid: string;
     urn: string;
   };
 }
 
+export interface ChatStartedEvent extends ContactEvent {
+  params?: object;
+}
+
 export interface MsgEvent extends ContactEvent {
   msg: Msg;
   status: string;
@@ -59,11 +65,6 @@ export interface MsgEvent extends ContactEvent {
   optin?: ObjectReference;
 }
 
-export interface FlowEvent extends ContactEvent {
-  flow: ObjectReference;
-  status: string;
-}
-
 export interface RunEvent extends ContactEvent {
   flow: ObjectReference;
   status: string;

package/src/flow/Editor.ts

@@ -653,7 +653,7 @@ export class Editor extends RapidElement {
     this.definition?.nodes.forEach((node) => {
       const nodeElement = this.querySelector(`[id="${node.uuid}"]`);
       if (nodeElement) {
-        const position = this.definition._ui.nodes[node.uuid]?.position;
+        const position = this.definition._ui?.nodes[node.uuid]?.position;
         if (position) {
           const rect = nodeElement.getBoundingClientRect();
           const canvasRect =
@@ -1085,8 +1085,11 @@ export class Editor extends RapidElement {
                   this.definition.nodes,
                   (node) => node.uuid,
                   (node) => {
-                    const position =
-                      this.definition._ui.nodes[node.uuid].position;
+                    const position = this.definition._ui?.nodes[node.uuid]
+                      ?.position || {
+                      left: 0,
+                      top: 0
+                    };
 
                     const dragging =
                       this.isDragging &&

package/src/flow/actions/set_contact_channel.ts

@@ -3,7 +3,7 @@ import { ActionConfig, COLORS } from '../types';
 import { Node, SetContactChannel } from '../../store/flow-definition';
 
 export const set_contact_channel: ActionConfig = {
-  name: 'Update Contact Channel',
+  name: 'Update Contact',
   color: COLORS.update,
   render: (_node: Node, action: SetContactChannel) => {
     return html`<div>

package/src/flow/actions/set_contact_field.ts

@@ -3,7 +3,7 @@ import { ActionConfig, COLORS } from '../types';
 import { Node, SetContactField } from '../../store/flow-definition';
 
 export const set_contact_field: ActionConfig = {
-  name: 'Update Contact Field',
+  name: 'Update Contact',
   color: COLORS.update,
   render: (_node: Node, action: SetContactField) => {
     return html`<div>

package/src/flow/actions/set_contact_language.ts

@@ -3,7 +3,7 @@ import { ActionConfig, COLORS } from '../types';
 import { Node, SetContactLanguage } from '../../store/flow-definition';
 
 export const set_contact_language: ActionConfig = {
-  name: 'Update Contact Language',
+  name: 'Update Contact',
   color: COLORS.update,
   render: (_node: Node, action: SetContactLanguage) => {
     return html`<div>Set contact language to <b>${action.language}</b></div>`;

package/src/flow/actions/set_contact_status.ts

@@ -3,7 +3,7 @@ import { ActionConfig, COLORS } from '../types';
 import { Node, SetContactStatus } from '../../store/flow-definition';
 
 export const set_contact_status: ActionConfig = {
-  name: 'Update Contact Status',
+  name: 'Update Contact',
   color: COLORS.update,
   render: (_node: Node, action: SetContactStatus) => {
     return html`<div>Set contact status to <b>${action.status}</b></div>`;

package/src/flow/config.ts

@@ -14,11 +14,8 @@ import { set_run_result } from './actions/set_run_result';
 import { send_msg } from './actions/send_msg';
 import { send_email } from './actions/send_email';
 import { start_session } from './actions/start_session';
-import { open_ticket } from './actions/open_ticket';
-import { call_webhook } from './actions/call_webhook';
 import { call_classifier } from './actions/call_classifier';
 import { call_resthook } from './actions/call_resthook';
-import { call_llm } from './actions/call_llm';
 import { transfer_airtime } from './actions/transfer_airtime';
 import { set_contact_name } from './actions/set_contact_name';
 import { add_contact_groups } from './actions/add_contact_groups';
@@ -26,7 +23,6 @@ import { remove_contact_groups } from './actions/remove_contact_groups';
 import { request_optin } from './actions/request_optin';
 import { say_msg } from './actions/say_msg';
 import { play_audio } from './actions/play_audio';
-import { enter_flow } from './actions/enter_flow';
 
 // Import all node configurations
 import { execute_actions } from './nodes/execute_actions';
@@ -40,6 +36,7 @@ import { split_by_scheme } from './nodes/split_by_scheme';
 import { split_by_subflow } from './nodes/split_by_subflow';
 import { split_by_ticket } from './nodes/split_by_ticket';
 import { split_by_webhook } from './nodes/split_by_webhook';
+import { split_by_llm } from './nodes/split_by_llm';
 import { split_by_llm_categorize } from './nodes/split_by_llm_categorize';
 import { wait_for_audio } from './nodes/wait_for_audio';
 import { wait_for_digits } from './nodes/wait_for_digits';
@@ -63,12 +60,8 @@ export const ACTION_CONFIG: {
   send_msg,
   send_email,
   start_session,
-  open_ticket,
-  call_webhook,
   call_classifier,
   call_resthook,
-  call_llm,
-  enter_flow,
   transfer_airtime,
   set_contact_name,
   add_contact_groups,
@@ -86,6 +79,7 @@ export const NODE_CONFIG: {
   split_by_contact_field,
   split_by_expression,
   split_by_groups,
+  split_by_llm,
   split_by_llm_categorize,
   split_by_random,
   split_by_run_result,

package/src/flow/nodes/split_by_llm.ts

@@ -0,0 +1,119 @@
+import { COLORS, NodeConfig } from '../types';
+import { CallLLM, Node } from '../../store/flow-definition';
+import { generateUUID, createSuccessFailureRouter } from '../../utils';
+import { html } from 'lit';
+
+export const split_by_llm: NodeConfig = {
+  type: 'split_by_llm',
+  name: 'Call AI',
+  color: COLORS.call,
+  form: {
+    llm: {
+      type: 'select',
+      label: 'LLM',
+      required: true,
+      options: [],
+      endpoint: '/test-assets/select/llms.json',
+      searchable: true,
+      valueKey: 'uuid',
+      nameKey: 'name',
+      placeholder: 'Select an LLM...'
+    },
+    input: {
+      type: 'text',
+      label: 'Input',
+      helpText: 'The input the AI will process',
+      required: true,
+      evaluated: true,
+      placeholder: '@input'
+    },
+    instructions: {
+      type: 'textarea',
+      label: 'Instructions',
+      helpText:
+        'Tell the AI what to do with the input. The result can be referenced as **`@locals._llm_output`**',
+      required: true,
+      evaluated: true,
+      placeholder: 'Enter instructions for the AI model...',
+      minHeight: 130
+    }
+  },
+  layout: ['llm', 'input', 'instructions'],
+  render: (node: Node) => {
+    const callLlmAction = node.actions?.find(
+      (action) => action.type === 'call_llm'
+    ) as CallLLM;
+    return html`
+      <div
+        class="body"
+        style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; max-width: 180px; max-height: 90px; margin-bottom:10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;"
+      >
+        ${callLlmAction?.instructions || 'Configure AI instructions'}
+      </div>
+    `;
+  },
+  toFormData: (node: Node) => {
+    // Extract data from the existing node structure
+    const callLlmAction = node.actions?.find(
+      (action) => action.type === 'call_llm'
+    ) as CallLLM;
+
+    return {
+      uuid: node.uuid,
+      llm: callLlmAction?.llm
+        ? [{ value: callLlmAction.llm.uuid, name: callLlmAction.llm.name }]
+        : [],
+      input: callLlmAction?.input || '@input',
+      instructions: callLlmAction?.instructions || ''
+    };
+  },
+  fromFormData: (formData: any, originalNode: Node): Node => {
+    // Get LLM selection
+    const llmSelection =
+      Array.isArray(formData.llm) && formData.llm.length > 0
+        ? formData.llm[0]
+        : null;
+
+    // Find existing call_llm action to preserve its UUID
+    const existingCallLlmAction = originalNode.actions?.find(
+      (action) => action.type === 'call_llm'
+    );
+    const callLlmUuid = existingCallLlmAction?.uuid || generateUUID();
+
+    // Create call_llm action
+    const callLlmAction: CallLLM = {
+      type: 'call_llm',
+      uuid: callLlmUuid,
+      llm: llmSelection
+        ? { uuid: llmSelection.value, name: llmSelection.name }
+        : { uuid: '', name: '' },
+      input: formData.input || '@input',
+      instructions: formData.instructions || '',
+      output_local: '_llm_output'
+    };
+
+    // Create categories and exits for Success and Failure
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+    const existingCases = originalNode.router?.cases || [];
+
+    const { router, exits } = createSuccessFailureRouter(
+      '@locals._llm_output',
+      {
+        type: 'has_text',
+        arguments: []
+      },
+      existingCategories,
+      existingExits,
+      existingCases
+    );
+
+    // Return the complete node
+    return {
+      uuid: originalNode.uuid,
+      actions: [callLlmAction],
+      router: router,
+      exits: exits
+    };
+  }
+};