@nyaruka/temba-components 0.129.7 → 0.129.9

package/test/utils.test.ts

@@ -7,7 +7,7 @@ interface Clip {
   height: number;
 }
 
-import { expect, fixture, html, assert, waitUntil } from '@open-wc/testing';
+import { expect, fixture, html, assert } from '@open-wc/testing';
 import MouseHelper from './MouseHelper';
 import { Store } from '../src/store/Store';
 import { stub } from 'sinon';
@@ -200,18 +200,7 @@ export const waitForCondition = async (
   }
 };
 
-export const assertScreenshot = async (
-  filename: string,
-  clip: Clip,
-  waitFor?: { clock?: any; predicate?: () => boolean }
-) => {
-  if (waitFor) {
-    if (waitFor.clock) {
-      waitFor.clock.restore();
-    }
-    await waitUntil(waitFor.predicate);
-  }
-
+export const assertScreenshot = async (filename: string, clip: Clip) => {
   // detect if we're running in copilot's environment and use adaptive threshold
   const isCopilotEnvironment = (window as any).isCopilotEnvironment;
   const threshold = isCopilotEnvironment ? 1.0 : 0.1;

package/test-assets/contacts/history.json

@@ -217,6 +217,25 @@
       },
       "logs_url": null
     },
+    {
+      "type": "run_started",
+      "created_on": "2021-03-30T22:20:26.704467+00:00",
+      "run_uuid": "0198c846-2cf4-7992-9bd0-9b6581e42358",
+      "flow": {
+        "uuid": "d076d716-8071-417e-b188-d9746db223a1",
+        "name": "Favorites"
+      }
+    },
+    {
+      "type": "run_ended",
+      "created_on": "2021-03-30T22:20:26.704467+00:00",
+      "run_uuid": "0198c846-da2b-799f-8af9-aaf8857f947f",
+      "flow": {
+        "uuid": "d076d716-8071-417e-b188-d9746db223a1",
+        "name": "Favorites"
+      },
+      "status": "completed"
+    },
     {
       "uuid": "01988a77-979e-7768-a940-8d9c348e24fe",
       "type": "msg_received",

package/test-assets/select/llms.json

@@ -0,0 +1,18 @@
+{
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "uuid": "2399e7d6-fcdf-4e47-a835-f3bdb7f80938",
+      "name": "GPT 4.1",
+      "value": "2399e7d6-fcdf-4e47-a835-f3bdb7f80938",
+      "type": "openai"
+    },
+    {
+      "uuid": "4399e7d6-fcdf-4e47-a835-f3bdb7f80938", 
+      "name": "GPT 5",
+      "value": "4399e7d6-fcdf-4e47-a835-f3bdb7f80938",
+      "type": "openai"
+    }
+  ]
+}

package/test-assets/style.css

@@ -60,6 +60,8 @@ html {
   --error-rgb: 255, 99, 71;
   --success-rgb: 102, 186, 104;
 
+  --color-label: #333;
+
   --selection-light-rgb: 240, 240, 240;
   --selection-dark-rgb: 180, 180, 180;
 

package/web-dev-mock.mjs

@@ -0,0 +1,523 @@
+import { Client as MinioClient } from 'minio';
+import busboy from 'busboy';
+import { v4 as uuidv4 } from 'uuid';
+import fs from 'fs';
+
+/**
+ * Generates FlowInfo dynamically from a FlowDefinition
+ * This is a plain JavaScript version that can be imported by the web-dev-server
+ */
+export function generateFlowInfo(definition) {
+  const dependencies = [];
+  const results = [];
+  const locals = [];
+
+  // Track unique dependencies by key/uuid to avoid duplicates
+  const dependencyMap = new Map();
+  // Track results by name to collect node_uuids
+  const resultMap = new Map();
+
+  // Process all nodes
+  definition.nodes.forEach((node) => {
+    // Process actions
+    node.actions.forEach((action) => {
+      extractDependenciesFromAction(action, dependencyMap, resultMap, node.uuid);
+    });
+
+    // Process router
+    if (node.router) {
+      extractDependenciesFromRouter(
+        node.router,
+        dependencyMap,
+        resultMap,
+        node.uuid
+      );
+    }
+  });
+
+  // Extract unique dependencies from map
+  dependencies.push(...Array.from(dependencyMap.values()));
+
+  // Extract results from map
+  results.push(...Array.from(resultMap.values()));
+
+  // Count languages from localization
+  const languageCount = Object.keys(definition.localization || {}).length;
+
+  return {
+    results,
+    dependencies,
+    counts: {
+      nodes: definition.nodes.length,
+      languages: languageCount
+    },
+    locals
+  };
+}
+
+function extractDependenciesFromAction(action, dependencyMap, resultMap, nodeUuid) {
+  switch (action.type) {
+    case 'set_contact_field':
+      if (action.field?.name) {
+        const key = `field:${action.field.name}`;
+        dependencyMap.set(key, {
+          uuid: action.field.uuid || '',
+          name: action.field.name,
+          type: 'field'
+        });
+      }
+      break;
+
+    case 'call_webhook':
+      if (action.url) {
+        const key = `webhook:${action.url}`;
+        dependencyMap.set(key, {
+          uuid: action.uuid,
+          name: action.url,
+          type: 'webhook'
+        });
+      }
+      break;
+
+    case 'add_contact_groups':
+      action.groups?.forEach((group) => {
+        if (group.name) {
+          const key = `group:${group.uuid || group.name}`;
+          dependencyMap.set(key, {
+            uuid: group.uuid || '',
+            name: group.name,
+            type: 'group'
+          });
+        }
+      });
+      break;
+
+    case 'remove_contact_groups':
+      action.groups?.forEach((group) => {
+        if (group.name) {
+          const key = `group:${group.uuid || group.name}`;
+          dependencyMap.set(key, {
+            uuid: group.uuid || '',
+            name: group.name,
+            type: 'group'
+          });
+        }
+      });
+      break;
+
+    case 'set_contact_channel':
+      if (action.channel?.name) {
+        const key = `channel:${action.channel.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.channel.uuid,
+          name: action.channel.name,
+          type: 'channel'
+        });
+      }
+      break;
+
+    case 'send_broadcast':
+      action.groups?.forEach((group) => {
+        if (group.name) {
+          const key = `group:${group.uuid || group.name}`;
+          dependencyMap.set(key, {
+            uuid: group.uuid || '',
+            name: group.name,
+            type: 'group'
+          });
+        }
+      });
+      action.contacts?.forEach((contact) => {
+        if (contact.name) {
+          const key = `contact:${contact.uuid}`;
+          dependencyMap.set(key, {
+            uuid: contact.uuid,
+            name: contact.name,
+            type: 'contact'
+          });
+        }
+      });
+      break;
+
+    case 'enter_flow':
+      if (action.flow?.name) {
+        const key = `flow:${action.flow.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.flow.uuid,
+          name: action.flow.name,
+          type: 'flow'
+        });
+      }
+      break;
+
+    case 'start_session':
+      if (action.flow?.name) {
+        const key = `flow:${action.flow.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.flow.uuid,
+          name: action.flow.name,
+          type: 'flow'
+        });
+      }
+      action.groups?.forEach((group) => {
+        if (group.name) {
+          const key = `group:${group.uuid || group.name}`;
+          dependencyMap.set(key, {
+            uuid: group.uuid || '',
+            name: group.name,
+            type: 'group'
+          });
+        }
+      });
+      break;
+
+    case 'call_classifier':
+      if (action.classifier?.name) {
+        const key = `classifier:${action.classifier.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.classifier.uuid,
+          name: action.classifier.name,
+          type: 'classifier'
+        });
+      }
+      break;
+
+    case 'call_resthook':
+      if (action.resthook) {
+        const key = `resthook:${action.resthook}`;
+        dependencyMap.set(key, {
+          uuid: action.uuid,
+          name: action.resthook,
+          type: 'resthook'
+        });
+      }
+      break;
+
+    case 'call_llm':
+      if (action.llm?.name) {
+        const key = `llm:${action.llm.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.llm.uuid,
+          name: action.llm.name,
+          type: 'llm'
+        });
+      }
+      break;
+
+    case 'open_ticket':
+      if (action.assignee?.name) {
+        const key = `user:${action.assignee.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.assignee.uuid,
+          name: action.assignee.name,
+          type: 'user'
+        });
+      }
+      if (action.topic?.name) {
+        const key = `topic:${action.topic.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.topic.uuid,
+          name: action.topic.name,
+          type: 'topic'
+        });
+      }
+      break;
+
+    case 'request_optin':
+      if (action.optin?.name) {
+        const key = `optin:${action.optin.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.optin.uuid,
+          name: action.optin.name,
+          type: 'optin'
+        });
+      }
+      break;
+
+    case 'add_input_labels':
+      action.labels?.forEach((label) => {
+        if (label.name) {
+          const key = `label:${label.uuid}`;
+          dependencyMap.set(key, {
+            uuid: label.uuid,
+            name: label.name,
+            type: 'label'
+          });
+        }
+      });
+      break;
+
+    case 'send_msg':
+      if (action.template?.name) {
+        const key = `template:${action.template.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.template.uuid,
+          name: action.template.name,
+          type: 'template'
+        });
+      }
+      break;
+
+    case 'set_run_result':
+      if (action.name) {
+        const existingResult = resultMap.get(action.name);
+        if (existingResult) {
+          // Add this node to existing result if not already present
+          if (!existingResult.node_uuids.includes(nodeUuid)) {
+            existingResult.node_uuids.push(nodeUuid);
+          }
+          // Add category if specified and not already present
+          if (action.category && !existingResult.categories.includes(action.category)) {
+            existingResult.categories.push(action.category);
+          }
+        } else {
+          // Create new result
+          const categories = action.category ? [action.category] : ['All Responses'];
+          resultMap.set(action.name, {
+            key: action.name.toLowerCase().replace(/[^a-z0-9_]/g, '_'),
+            name: action.name,
+            categories: categories,
+            node_uuids: [nodeUuid]
+          });
+        }
+      }
+      break;
+  }
+}
+
+function extractDependenciesFromRouter(router, dependencyMap, resultMap, nodeUuid) {
+  // Extract result information
+  if (router.result_name && router.categories) {
+    const existingResult = resultMap.get(router.result_name);
+    if (existingResult) {
+      // Add this node to existing result if not already present
+      if (!existingResult.node_uuids.includes(nodeUuid)) {
+        existingResult.node_uuids.push(nodeUuid);
+      }
+    } else {
+      // Create new result
+      const categories = router.categories.length > 0 
+        ? router.categories.map((cat) => cat.name)
+        : ['All Responses'];
+      
+      const result = {
+        key: router.result_name.toLowerCase().replace(/[^a-z0-9_]/g, '_'),
+        name: router.result_name,
+        categories: categories,
+        node_uuids: [nodeUuid]
+      };
+      resultMap.set(router.result_name, result);
+    }
+  }
+
+  // Process cases for potential dependencies
+  router.cases?.forEach((case_) => {
+    if (case_.type === 'has_group' && case_.arguments?.length >= 2) {
+      // Group dependency from split_by_groups
+      const groupUuid = case_.arguments[0];
+      const groupName = case_.arguments[1];
+      if (groupName) {
+        const key = `group:${groupUuid}`;
+        dependencyMap.set(key, {
+          uuid: groupUuid,
+          name: groupName,
+          type: 'group'
+        });
+      }
+    }
+  });
+}
+
+// Initialize Minio client for file uploads
+export const minioClient = new MinioClient({
+  endPoint: 'minio',
+  port: 9000,
+  useSSL: false,
+  accessKey: 'root',
+  secretKey: 'tembatemba'
+});
+
+// Helper function to generate the correct public URL for uploaded files
+export function getPublicUrl(bucketName, fileName, request) {
+  // Check if request is coming from localhost/127.0.0.1 (host machine)
+  // or from within docker network
+  const host = request.headers.host;
+  const userAgent = request.headers['user-agent'] || '';
+  
+  // If accessing from host machine (localhost:3010), use localhost for minio too
+  if (host && host.startsWith('localhost:')) {
+    return `http://localhost:9000/${bucketName}/${fileName}`;
+  }
+  
+  // If accessing from docker network, use internal hostname
+  return `http://minio:9000/${bucketName}/${fileName}`;
+}
+
+// Handle minio file uploads for media
+export function handleMinioUpload(context) {
+  return new Promise((resolve) => {
+    try {
+      const bb = busboy({ headers: context.request.headers });
+      let fileInfo = null;
+      let fileBuffer = null;
+      
+      bb.on('file', (name, file, info) => {
+        fileInfo = info;
+        const chunks = [];
+        
+        file.on('data', (chunk) => {
+          chunks.push(chunk);
+        });
+        
+        file.on('end', () => {
+          fileBuffer = Buffer.concat(chunks);
+        });
+      });
+      
+      bb.on('finish', async () => {
+        if (!fileBuffer || !fileInfo) {
+          context.status = 400;
+          context.body = JSON.stringify({ error: 'No file uploaded' });
+          resolve();
+          return;
+        }
+        
+        try {
+          const fileUuid = uuidv4();
+          const fileName = `${fileUuid}-${fileInfo.filename}`;
+          const bucketName = 'temba-attachments';
+          
+          // Upload to minio
+          await minioClient.putObject(bucketName, fileName, fileBuffer, {
+            'Content-Type': fileInfo.mimeType
+          });
+          
+          // Return success response with appropriate URL based on request source
+          const publicUrl = getPublicUrl(bucketName, fileName, context.request);
+          
+          // Debug logging
+          console.log('🔧 Upload Debug:', {
+            fileUuid,
+            fileName,
+            bucketName,
+            publicUrl,
+            contentType: fileInfo.mimeType,
+            host: context.request.headers.host
+          });
+          
+          context.contentType = 'application/json';
+          context.body = JSON.stringify({
+            uuid: fileUuid,
+            content_type: fileInfo.mimeType,
+            url: publicUrl,
+            filename: fileInfo.filename,
+            size: fileBuffer.length
+          });
+          
+        } catch (uploadError) {
+          console.error('Minio upload error:', uploadError);
+          context.status = 500;
+          context.body = JSON.stringify({ 
+            error: 'Upload failed',
+            details: uploadError.message 
+          });
+        }
+        
+        resolve();
+      });
+      
+      context.req.pipe(bb);
+      
+    } catch (error) {
+      console.error('File upload processing error:', error);
+      context.status = 500;
+      context.body = JSON.stringify({ 
+        error: 'Upload processing failed',
+        details: error.message 
+      });
+      resolve();
+    }
+  });
+}
+
+// Handle label creation for the labels API
+export function handleLabelCreation(context) {
+  return new Promise((resolve) => {
+    let body = '';
+    
+    context.req.on('data', chunk => {
+      body += chunk.toString();
+    });
+    
+    context.req.on('end', () => {
+      try {
+        const requestData = JSON.parse(body);
+        const labelName = requestData.name || '';
+        
+        if (!labelName.trim()) {
+          context.status = 400;
+          context.body = JSON.stringify({ error: 'Label name is required' });
+          resolve();
+          return;
+        }
+        
+        // Read existing labels file
+        const labelsPath = './static/api/labels.json';
+        let labelsData;
+        
+        try {
+          labelsData = JSON.parse(fs.readFileSync(labelsPath, 'utf-8'));
+        } catch (error) {
+          // If file doesn't exist, create basic structure
+          labelsData = {
+            next: null,
+            previous: null,
+            results: []
+          };
+        }
+        
+        // Check if label already exists
+        const existingLabel = labelsData.results.find(
+          label => label.name.toLowerCase() === labelName.trim().toLowerCase()
+        );
+        
+        if (existingLabel) {
+          // Return existing label
+          context.contentType = 'application/json';
+          context.body = JSON.stringify(existingLabel);
+          resolve();
+          return;
+        }
+        
+        // Create new label with UUID
+        const newLabel = {
+          uuid: uuidv4(),
+          name: labelName.trim(),
+          count: 0
+        };
+        
+        // Add to labels data
+        labelsData.results.push(newLabel);
+        
+        // Write back to file
+        fs.writeFileSync(labelsPath, JSON.stringify(labelsData, null, 2));
+        
+        // Return the new label
+        context.contentType = 'application/json';
+        context.body = JSON.stringify(newLabel);
+        
+        console.log('📝 Label created:', newLabel);
+        
+      } catch (error) {
+        console.error('Label creation error:', error);
+        context.status = 500;
+        context.body = JSON.stringify({ 
+          error: 'Label creation failed',
+          details: error.message 
+        });
+      }
+      
+      resolve();
+    });
+  });
+}