@nyaruka/temba-components 0.156.12 → 0.156.14

package/src/flow/flow-utils.ts

@@ -15,3 +15,20 @@ export function shouldExcludeFlow(flow: any): boolean {
 
   return false;
 }
+
+export type LLMRole = 'engine' | 'editing';
+
+export interface LLMModel {
+  uuid: string;
+  name: string;
+  type?: string;
+  description?: string;
+  roles?: LLMRole[];
+}
+
+export function hasLLMRole(
+  model: { roles?: string[] } | null | undefined,
+  role: LLMRole
+): boolean {
+  return model?.roles?.includes(role) ?? false;
+}

package/src/flow/nodes/split_by_llm.ts

@@ -8,6 +8,7 @@ import {
   renderLineItem,
   getLlmIcon
 } from '../utils';
+import { LLMModel, hasLLMRole } from '../flow-utils';
 
 export const split_by_llm: NodeConfig = {
   type: 'split_by_llm',
@@ -47,7 +48,8 @@ export const split_by_llm: NodeConfig = {
       searchable: true,
       valueKey: 'uuid',
       nameKey: 'name',
-      placeholder: 'Select an LLM...'
+      placeholder: 'Select an LLM...',
+      shouldExclude: (option: LLMModel) => !hasLLMRole(option, 'engine')
     },
     input: {
       type: 'text',

package/src/flow/nodes/split_by_llm_categorize.ts

@@ -3,6 +3,7 @@ import { CallLLM, Node } from '../../store/flow-definition';
 import { generateUUID, createMultiCategoryRouter } from '../../utils';
 import { html } from 'lit';
 import { validateWith } from '../utils';
+import { LLMModel, hasLLMRole } from '../flow-utils';
 
 export const split_by_llm_categorize: NodeConfig = {
   type: 'split_by_llm_categorize',
@@ -19,7 +20,8 @@ export const split_by_llm_categorize: NodeConfig = {
       endpoint: '/api/internal/llms.json',
       valueKey: 'uuid',
       nameKey: 'name',
-      placeholder: 'Select an LLM...'
+      placeholder: 'Select an LLM...',
+      shouldExclude: (option: LLMModel) => !hasLLMRole(option, 'engine')
     },
     input: {
       type: 'text',

package/src/flow/types.ts

@@ -50,7 +50,8 @@ export const CONTEXT_MENU_SHORTCUTS: Record<FlowType, ContextMenuShortcut[]> = {
 export const Features = {
   AI: 'ai',
   AIRTIME: 'airtime',
-  LOCATIONS: 'locations'
+  LOCATIONS: 'locations',
+  AUTO_TRANSLATE: 'auto_translate'
 } as const;
 
 export type Feature = (typeof Features)[keyof typeof Features];

package/src/form/RichEditor.ts

@@ -434,7 +434,10 @@ export class RichEditor extends FieldElement {
   }
 
   private handleKeydown(e: KeyboardEvent): void {
-    const mod = e.metaKey || e.ctrlKey;
+    // On macOS, Cmd is the undo/redo modifier; leave Ctrl alone so Cocoa
+    // text bindings like Ctrl+K (kill) and Ctrl+Y (yank) keep working.
+    const isMac = /Mac|iPhone|iPad/.test(navigator.userAgent);
+    const mod = isMac ? e.metaKey : e.ctrlKey;
 
     // Undo/redo via keyboard: preventDefault here suppresses the subsequent
     // beforeinput event, avoiding double-handling

package/src/layout/Dialog.ts

@@ -142,11 +142,26 @@ export class Dialog extends ResizeElement {
         flex-direction: row;
         align-items: center;
         font-size: 20px;
-        padding: 12px 20px;
+        padding: 12px 20px var(--dialog-header-padding-bottom, 12px);
         color: var(--header-text);
         background: var(--header-bg);
       }
 
+      /* "flat" variant: header/footer share the body's white background
+         and lose their inner padding so the dialog reads as one
+         continuous surface. Use for content-focused dialogs that don't
+         need the tinted chrome. */
+      :host([variant='flat']) .header-text {
+        background: #fff;
+        color: var(--color-text);
+        padding-bottom: 0;
+      }
+
+      :host([variant='flat']) .dialog-footer {
+        background: #fff;
+        padding-top: 0;
+      }
+
       .header-text .title {
         flex-grow: 1;
       }
@@ -157,8 +172,11 @@ export class Dialog extends ResizeElement {
       }
 
       .dialog-footer {
-        background: var(--color-primary-light);
-        padding: 10px;
+        background: var(
+          --dialog-footer-background,
+          var(--color-primary-light)
+        );
+        padding: var(--dialog-footer-padding-top, 10px) 10px 10px;
         display: flex;
         flex-flow: row;
         align-items: center;
@@ -227,6 +245,9 @@ export class Dialog extends ResizeElement {
   @property({ type: Boolean })
   hideOnClick: boolean;
 
+  @property({ type: String, reflect: true })
+  variant: string;
+
   @property({ type: Boolean })
   noFocus: boolean;
 

package/static/api/llms.json

@@ -6,13 +6,22 @@
       "uuid": "2399e7d6-fcdf-4e47-a835-f3bdb7f80938",
       "name": "GPT 4.1",
       "type": "openai",
-      "description": "General-purpose reasoning model"
+      "description": "General-purpose reasoning model",
+      "roles": ["engine", "editing"]
     },
     {
       "uuid": "4399e7d6-fcdf-4e47-a835-f3bdb7f80938",
       "name": "GPT 5",
       "type": "openai",
-      "description": "Latest experimental model"
+      "description": "Latest experimental model",
+      "roles": ["engine"]
+    },
+    {
+      "uuid": "5499e7d6-fcdf-4e47-a835-f3bdb7f80938",
+      "name": "GPT 4.1 Mini",
+      "type": "openai",
+      "description": "Lightweight model for editing tasks",
+      "roles": ["editing"]
     }
   ]
 }

package/temba-modules.ts

@@ -85,6 +85,7 @@ import { Simulator } from './src/simulator/Simulator';
 import { FlowSearch } from './src/flow/FlowSearch';
 import { IssuesWindow } from './src/flow/IssuesWindow';
 import { RevisionsWindow } from './src/flow/RevisionsWindow';
+import { AutoTranslate } from './src/flow/AutoTranslate';
 import { MessageTable } from './src/flow/MessageTable';
 
 export function addCustomElement(name: string, comp: any) {
@@ -182,3 +183,4 @@ addCustomElement('temba-simulator', Simulator);
 addCustomElement('temba-flow-search', FlowSearch);
 addCustomElement('temba-issues-window', IssuesWindow);
 addCustomElement('temba-revisions-window', RevisionsWindow);
+addCustomElement('temba-auto-translate', AutoTranslate);