myoperator-ui 0.0.221 → 0.0.222

package/dist/index.js

@@ -17765,6 +17765,101 @@ export const IvrBotConfig = React.forwardRef(
 );
 
 IvrBotConfig.displayName = "IvrBotConfig";
+`, prefix)
+        },
+        {
+          name: "create-function-validation.ts",
+          content: prefixTailwindClasses(`import type { KeyValuePair } from "./types";
+
+/** HTTP(S) URL prefix check \u2014 used for Create Function API URL field. */
+export const URL_REGEX = /^https?:\\/\\//;
+
+export const HEADER_KEY_REGEX = /^[!#$%&'*+\\-.^_\`|~0-9a-zA-Z]+$/;
+
+/** Single message for invalid header keys (KeyValueTable + submit validation). */
+export const HEADER_KEY_INVALID_MESSAGE =
+  "Invalid header key. Use only alphanumeric and !#$%&'*+-.^_\`|~ characters.";
+
+// Query parameter validation (aligned with apiIntegrationSchema.queryParams)
+export const QUERY_PARAM_KEY_MAX = 512;
+export const QUERY_PARAM_VALUE_MAX = 2048;
+export const QUERY_PARAM_KEY_PATTERN = /^[a-zA-Z0-9_.\\-~]+$/;
+
+export function validateQueryParamKey(key: string): string | undefined {
+  if (!key.trim()) return "Query param key is required";
+  if (key.length > QUERY_PARAM_KEY_MAX) return "key cannot exceed 512 characters.";
+  if (!QUERY_PARAM_KEY_PATTERN.test(key)) return "Invalid query parameter key.";
+  return undefined;
+}
+
+export function validateQueryParamValue(value: string): string | undefined {
+  if (!value.trim()) return "Query param value is required";
+  if (value.length > QUERY_PARAM_VALUE_MAX) return "value cannot exceed 2048 characters.";
+  return undefined;
+}
+
+export function queryParamsHaveErrors(rows: KeyValuePair[]): boolean {
+  return rows.some((row) => {
+    const hasInput = row.key.trim() !== "" || row.value.trim() !== "";
+    if (!hasInput) return false;
+    return (
+      validateQueryParamKey(row.key) !== undefined ||
+      validateQueryParamValue(row.value) !== undefined
+    );
+  });
+}
+
+export const URL_REQUIRED_MESSAGE = "API URL is required";
+export const URL_FORMAT_MESSAGE = "URL must start with http:// or https://";
+
+/** On save: URL is required and must start with http:// or https:// */
+export function getUrlSubmitValidationError(value: string): string {
+  const t = value.trim();
+  if (!t) return URL_REQUIRED_MESSAGE;
+  if (!URL_REGEX.test(t)) return URL_FORMAT_MESSAGE;
+  return "";
+}
+
+/** On blur while typing: empty clears; non-empty must match URL_REGEX. */
+export function getUrlBlurValidationError(value: string): string {
+  if (value.trim() && !URL_REGEX.test(value.trim())) return URL_FORMAT_MESSAGE;
+  return "";
+}
+
+export const BODY_JSON_ERROR_MESSAGE = "Body must be valid JSON";
+
+/** Empty body is valid; non-empty must parse as JSON. */
+export function getBodyJsonValidationError(value: string): string {
+  if (!value.trim()) return "";
+  try {
+    JSON.parse(value.trim());
+    return "";
+  } catch {
+    return BODY_JSON_ERROR_MESSAGE;
+  }
+}
+
+export type HeaderRowFieldErrors = { key?: string; value?: string };
+
+/** When either key or value has text, both are required; key must match HEADER_KEY_REGEX. */
+export function getHeaderRowSubmitErrors(row: KeyValuePair): HeaderRowFieldErrors {
+  const hasInput = row.key.trim() !== "" || row.value.trim() !== "";
+  if (!hasInput) return {};
+  const errors: HeaderRowFieldErrors = {};
+  if (!row.key.trim()) errors.key = "Header key is required";
+  else if (!HEADER_KEY_REGEX.test(row.key)) {
+    errors.key = HEADER_KEY_INVALID_MESSAGE;
+  }
+  if (!row.value.trim()) errors.value = "Header value is required";
+  return errors;
+}
+
+export function headerRowsHaveSubmitErrors(rows: KeyValuePair[]): boolean {
+  return rows.some((row) => {
+    const e = getHeaderRowSubmitErrors(row);
+    return Boolean(e.key || e.value);
+  });
+}
 `, prefix)
         },
         {
@@ -17792,6 +17887,20 @@ import type {
   VariableItem,
   VariableFormData,
 } from "./types";
+import {
+  HEADER_KEY_INVALID_MESSAGE,
+  HEADER_KEY_REGEX,
+  QUERY_PARAM_KEY_MAX,
+  QUERY_PARAM_VALUE_MAX,
+  getBodyJsonValidationError,
+  getHeaderRowSubmitErrors,
+  getUrlBlurValidationError,
+  getUrlSubmitValidationError,
+  headerRowsHaveSubmitErrors,
+  queryParamsHaveErrors,
+  validateQueryParamKey,
+  validateQueryParamValue,
+} from "./create-function-validation";
 
 const HTTP_METHODS: HttpMethod[] = ["GET", "POST", "PUT", "DELETE", "PATCH"];
 const FUNCTION_NAME_MAX = 100;
@@ -17801,14 +17910,13 @@ const HEADER_KEY_MAX = 512;
 const HEADER_VALUE_MAX = 2048;
 
 const FUNCTION_NAME_REGEX = /^(?!_+$)(?=.*[a-zA-Z])[a-zA-Z][a-zA-Z0-9_]*$/;
+
+/** Spaces \u2192 underscores so users can type natural phrases without invalid-name errors. */
+function normalizeFunctionNameInput(value: string): string {
+  return value.replace(/ /g, "_");
+}
 const VARIABLE_NAME_MAX = 30;
 const VARIABLE_NAME_REGEX = /^[a-zA-Z][a-zA-Z0-9_]*$/;
-const URL_REGEX = /^https?:\\/\\//;
-const HEADER_KEY_REGEX = /^[!#$%&'*+\\-.^_\`|~0-9a-zA-Z]+$/;
-// Query parameter validation (aligned with apiIntegrationSchema.queryParams)
-const QUERY_PARAM_KEY_MAX = 512;
-const QUERY_PARAM_VALUE_MAX = 2048;
-const QUERY_PARAM_KEY_PATTERN = /^[a-zA-Z0-9_.\\-~]+$/;
 
 const DEFAULT_SESSION_VARIABLES = [
   "{{Caller number}}",
@@ -17816,19 +17924,6 @@ const DEFAULT_SESSION_VARIABLES = [
   "{{Contact Details}}",
 ];
 
-function validateQueryParamKey(key: string): string | undefined {
-  if (!key.trim()) return "Query param key is required";
-  if (key.length > QUERY_PARAM_KEY_MAX) return "key cannot exceed 512 characters.";
-  if (!QUERY_PARAM_KEY_PATTERN.test(key)) return "Invalid query parameter key.";
-  return undefined;
-}
-
-function validateQueryParamValue(value: string): string | undefined {
-  if (!value.trim()) return "Query param value is required";
-  if (value.length > QUERY_PARAM_VALUE_MAX) return "value cannot exceed 2048 characters.";
-  return undefined;
-}
-
 function generateId() {
   return Math.random().toString(36).slice(2, 9);
 }
@@ -17841,6 +17936,13 @@ interface TriggerState {
   to: number;
 }
 
+/** Where to insert \`{{name}}\` after the user saves "Create new variable" */
+type VarInsertContext =
+  | { kind: "url"; from: number; to: number }
+  | { kind: "body"; from: number; to: number }
+  | { kind: "header"; rowId: string; from: number; to: number }
+  | { kind: "query"; rowId: string; from: number; to: number };
+
 function detectVarTrigger(value: string, cursor: number): TriggerState | null {
   const before = value.slice(0, cursor);
   const match = /\\{\\{([^}]*)$/.exec(before);
@@ -18210,7 +18312,7 @@ function VariableInput({
   onChange: (v: string) => void;
   sessionVariables: string[];
   variableGroups?: VariableGroup[];
-  onAddVariable?: () => void;
+  onAddVariable?: (range: { from: number; to: number }) => void;
   onEditVariable?: (variable: string) => void;
   placeholder?: string;
   maxLength?: number;
@@ -18373,7 +18475,11 @@ function VariableInput({
         variableGroups={trigger ? variableGroups : undefined}
         filterQuery={trigger?.query ?? ""}
         onSelect={handleSelect}
-        onAddVariable={onAddVariable}
+        onAddVariable={
+          onAddVariable && trigger
+            ? () => onAddVariable({ from: trigger.from, to: trigger.to })
+            : undefined
+        }
         onEditVariable={onEditVariable}
         style={popupStyle}
       />
@@ -18428,7 +18534,7 @@ function KeyValueTable({
   keyRegexError?: string;
   sessionVariables?: string[];
   variableGroups?: VariableGroup[];
-  onAddVariable?: () => void;
+  onAddVariable?: (ctx: { rowId: string; from: number; to: number }) => void;
   onEditVariable?: (variable: string) => void;
   disabled?: boolean;
 }) {
@@ -18513,7 +18619,11 @@ function KeyValueTable({
                   onChange={(v) => update(row.id, { value: v })}
                   sessionVariables={sessionVariables}
                   variableGroups={variableGroups}
-                  onAddVariable={onAddVariable}
+                  onAddVariable={
+                    onAddVariable
+                      ? (range) => onAddVariable({ rowId: row.id, ...range })
+                      : undefined
+                  }
                   onEditVariable={onEditVariable}
                   placeholder="Type {{ to add variables"
                   maxLength={valueMaxLength}
@@ -18632,14 +18742,38 @@ export const CreateFunctionModal = React.forwardRef(
     const [varModalOpen, setVarModalOpen] = React.useState(false);
     const [varModalMode, setVarModalMode] = React.useState<"create" | "edit">("create");
     const [varModalInitialData, setVarModalInitialData] = React.useState<VariableItem | undefined>();
+    /** Field + \`{{\u2026\` range to replace with \`{{name}}\` after create saves */
+    const [varInsertContext, setVarInsertContext] = React.useState<VarInsertContext | null>(null);
 
-    const handleAddVariableClick = () => {
+    const openVariableCreateModal = React.useCallback(() => {
       setVarModalMode("create");
       setVarModalInitialData(undefined);
       setVarModalOpen(true);
-    };
+    }, []);
+
+    const handleVarModalOpenChange = React.useCallback((next: boolean) => {
+      setVarModalOpen(next);
+      if (!next) setVarInsertContext(null);
+    }, []);
+
+    const handleAddVariableFromHeader = React.useCallback(
+      (ctx: { rowId: string; from: number; to: number }) => {
+        setVarInsertContext({ kind: "header", ...ctx });
+        openVariableCreateModal();
+      },
+      [openVariableCreateModal]
+    );
+
+    const handleAddVariableFromQuery = React.useCallback(
+      (ctx: { rowId: string; from: number; to: number }) => {
+        setVarInsertContext({ kind: "query", ...ctx });
+        openVariableCreateModal();
+      },
+      [openVariableCreateModal]
+    );
 
     const handleEditVariableClick = (variableName: string) => {
+      setVarInsertContext(null);
       const variable = variableGroups
         ?.flatMap((g) => g.items)
         .find((item) => item.name === variableName);
@@ -18649,6 +18783,35 @@ export const CreateFunctionModal = React.forwardRef(
     };
 
     const handleVariableSave = (data: VariableFormData) => {
+      const trimmedName = data.name.trim();
+      const insertToken = \`{{\${trimmedName}}}\`;
+
+      if (varModalMode === "create" && varInsertContext) {
+        const ctx = varInsertContext;
+        if (ctx.kind === "url") {
+          setUrl((u) => insertVar(u, insertToken, ctx.from, ctx.to));
+        } else if (ctx.kind === "body") {
+          setBody((b) => insertVar(b, insertToken, ctx.from, ctx.to));
+        } else if (ctx.kind === "header") {
+          setHeaders((rows) =>
+            rows.map((r) =>
+              r.id === ctx.rowId
+                ? { ...r, value: insertVar(r.value, insertToken, ctx.from, ctx.to) }
+                : r
+            )
+          );
+        } else if (ctx.kind === "query") {
+          setQueryParams((rows) =>
+            rows.map((r) =>
+              r.id === ctx.rowId
+                ? { ...r, value: insertVar(r.value, insertToken, ctx.from, ctx.to) }
+                : r
+            )
+          );
+        }
+        setVarInsertContext(null);
+      }
+
       if (varModalMode === "create") {
         onAddVariable?.(data);
       } else {
@@ -18672,6 +18835,28 @@ export const CreateFunctionModal = React.forwardRef(
       ? sessionVariables.filter((v) => v.toLowerCase().includes(bodyTrigger.query))
       : [];
 
+    const handleAddVariableFromUrl = React.useCallback(() => {
+      if (urlTrigger) {
+        setVarInsertContext({
+          kind: "url",
+          from: urlTrigger.from,
+          to: urlTrigger.to,
+        });
+      }
+      openVariableCreateModal();
+    }, [urlTrigger, openVariableCreateModal]);
+
+    const handleAddVariableFromBody = React.useCallback(() => {
+      if (bodyTrigger) {
+        setVarInsertContext({
+          kind: "body",
+          from: bodyTrigger.from,
+          to: bodyTrigger.to,
+        });
+      }
+      openVariableCreateModal();
+    }, [bodyTrigger, openVariableCreateModal]);
+
     const computePopupStyle = (
       el: HTMLTextAreaElement | HTMLInputElement,
       cursor: number
@@ -18719,6 +18904,7 @@ export const CreateFunctionModal = React.forwardRef(
         setUrlPopupStyle(undefined);
         setBodyPopupStyle(undefined);
         setTestVarValues({});
+        setVarInsertContext(null);
       }
     // Re-run only when modal opens; intentionally exclude deep deps to avoid mid-session resets
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -18744,6 +18930,7 @@ export const CreateFunctionModal = React.forwardRef(
       setUrlPopupStyle(undefined);
       setBodyPopupStyle(undefined);
       setTestVarValues({});
+      setVarInsertContext(null);
     }, [initialData, initialStep, initialTab]);
 
     const handleClose = React.useCallback(() => {
@@ -18762,45 +18949,33 @@ export const CreateFunctionModal = React.forwardRef(
     };
 
     const validateUrl = (value: string) => {
-      if (value.trim() && !URL_REGEX.test(value.trim())) {
-        setUrlError("URL must start with http:// or https://");
-      } else {
-        setUrlError("");
-      }
+      setUrlError(getUrlBlurValidationError(value));
     };
 
     const validateBody = (value: string) => {
-      if (value.trim()) {
-        try {
-          JSON.parse(value.trim());
-          setBodyError("");
-        } catch {
-          setBodyError("Body must be valid JSON");
-        }
-      } else {
-        setBodyError("");
-      }
+      setBodyError(getBodyJsonValidationError(value));
     };
 
     const handleNext = () => {
       if (disabled || (name.trim() && prompt.trim().length >= promptMinLength)) setStep(2);
     };
 
-    const queryParamsHaveErrors = (rows: KeyValuePair[]): boolean =>
-      rows.some((row) => {
-        const hasInput = row.key.trim() !== "" || row.value.trim() !== "";
-        if (!hasInput) return false;
-        return (
-          validateQueryParamKey(row.key) !== undefined ||
-          validateQueryParamValue(row.value) !== undefined
-        );
-      });
-
     const handleSubmit = () => {
-      if (step === 2) {
-        setStep2SubmitAttempted(true);
-        if (queryParamsHaveErrors(queryParams)) return;
-      }
+      if (step !== 2) return;
+
+      setStep2SubmitAttempted(true);
+
+      const urlErr = getUrlSubmitValidationError(url);
+      setUrlError(urlErr);
+
+      const bodyErr = getBodyJsonValidationError(body);
+      setBodyError(bodyErr);
+
+      if (queryParamsHaveErrors(queryParams)) return;
+      if (urlErr || bodyErr) return;
+
+      if (headerRowsHaveSubmitErrors(headers)) return;
+
       const data: CreateFunctionData = {
         name: name.trim(),
         prompt: prompt.trim(),
@@ -18829,7 +19004,7 @@ export const CreateFunctionModal = React.forwardRef(
           queryParams: queryParams.map((q) => ({ ...q, value: substituteVars(q.value) })),
           body: substituteVars(body),
         };
-        const response = await onTestApi(step2);
+        const response = await onTestApi(step2, { ...testVarValues });
         setApiResponse(response);
       } finally {
         setIsTesting(false);
@@ -18868,18 +19043,11 @@ export const CreateFunctionModal = React.forwardRef(
       });
     };
 
-    const headersHaveKeyErrors = headers.some(
-      (row) => row.key.trim() && HEADER_KEY_REGEX && !HEADER_KEY_REGEX.test(row.key)
-    );
-
     const isStep1Valid =
       name.trim().length > 0 &&
       FUNCTION_NAME_REGEX.test(name.trim()) &&
       prompt.trim().length >= promptMinLength;
 
-    const isStep2Valid =
-      !urlError && !bodyError && !headersHaveKeyErrors && !queryParamsHaveErrors(queryParams);
-
     const tabLabels: Record<FunctionTabType, string> = {
       header: \`Header (\${headers.length})\`,
       queryParams: \`Query params (\${queryParams.length})\`,
@@ -18937,10 +19105,15 @@ export const CreateFunctionModal = React.forwardRef(
                       maxLength={FUNCTION_NAME_MAX}
                       disabled={disabled}
                       onChange={(e) => {
-                        setName(e.target.value);
-                        if (nameError) validateName(e.target.value);
+                        const normalized = normalizeFunctionNameInput(
+                          e.target.value
+                        );
+                        setName(normalized);
+                        if (nameError) validateName(normalized);
                       }}
-                      onBlur={(e) => validateName(e.target.value)}
+                      onBlur={(e) =>
+                        validateName(normalizeFunctionNameInput(e.target.value))
+                      }
                       placeholder="Enter name of the function"
                       className={cn(inputCls, "pr-16")}
                     />
@@ -18982,11 +19155,13 @@ export const CreateFunctionModal = React.forwardRef(
                   <span className="text-sm text-semantic-text-muted tracking-[0.048px]">
                     API URL
                   </span>
-                  <div
+                    <div
                     className={cn(
-                      "flex h-[42px] rounded border border-solid border-semantic-border-input overflow-visible bg-semantic-bg-primary",
-                      "focus-within:border-semantic-border-input-focus focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
-                      "transition-shadow"
+                      "flex h-[42px] rounded border border-solid overflow-visible bg-semantic-bg-primary",
+                      "transition-shadow",
+                      urlError
+                        ? "border-semantic-error-primary focus-within:border-semantic-error-primary"
+                        : "border-semantic-border-input focus-within:border-semantic-border-input-focus focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]"
                     )}
                   >
                     {/* Method selector */}
@@ -19040,6 +19215,8 @@ export const CreateFunctionModal = React.forwardRef(
                           setUrlPopupStyle(undefined);
                         }}
                         placeholder="Enter URL or Type {{ to add variables"
+                        aria-invalid={Boolean(urlError)}
+                        aria-describedby={urlError ? "fn-api-url-error" : undefined}
                         className={cn(
                           "h-full w-full px-3 text-base text-semantic-text-primary placeholder:text-semantic-text-muted bg-transparent outline-none",
                           disabled && "opacity-50 cursor-not-allowed"
@@ -19050,14 +19227,16 @@ export const CreateFunctionModal = React.forwardRef(
                         variableGroups={urlTrigger ? variableGroups : undefined}
                         filterQuery={urlTrigger?.query ?? ""}
                         onSelect={handleUrlVarSelect}
-                        onAddVariable={onAddVariable ? handleAddVariableClick : undefined}
+                        onAddVariable={onAddVariable ? handleAddVariableFromUrl : undefined}
                         onEditVariable={onEditVariable ? handleEditVariableClick : undefined}
                         style={urlPopupStyle}
                       />
                     </div>
                   </div>
                   {urlError && (
-                    <p className="m-0 text-sm text-semantic-error-primary">{urlError}</p>
+                    <p id="fn-api-url-error" className="m-0 text-sm text-semantic-error-primary">
+                      {urlError}
+                    </p>
                   )}
                 </div>
 
@@ -19095,10 +19274,20 @@ export const CreateFunctionModal = React.forwardRef(
                       keyMaxLength={HEADER_KEY_MAX}
                       valueMaxLength={HEADER_VALUE_MAX}
                       keyRegex={HEADER_KEY_REGEX}
-                      keyRegexError="Invalid header key. Use only alphanumeric and !#$%&'*+-.^_\`|~ characters."
+                      keyRegexError={HEADER_KEY_INVALID_MESSAGE}
+                      getRowErrors={(row) => {
+                        if (!step2SubmitAttempted) {
+                          const errors: RowErrors = {};
+                          if (row.key.trim() && !HEADER_KEY_REGEX.test(row.key)) {
+                            errors.key = HEADER_KEY_INVALID_MESSAGE;
+                          }
+                          return errors;
+                        }
+                        return getHeaderRowSubmitErrors(row);
+                      }}
                       sessionVariables={sessionVariables}
                       variableGroups={variableGroups}
-                      onAddVariable={handleAddVariableClick}
+                      onAddVariable={handleAddVariableFromHeader}
                       onEditVariable={handleEditVariableClick}
                       disabled={disabled}
                     />
@@ -19120,7 +19309,7 @@ export const CreateFunctionModal = React.forwardRef(
                       }}
                       sessionVariables={sessionVariables}
                       variableGroups={variableGroups}
-                      onAddVariable={handleAddVariableClick}
+                      onAddVariable={handleAddVariableFromQuery}
                       onEditVariable={handleEditVariableClick}
                       disabled={disabled}
                     />
@@ -19136,6 +19325,8 @@ export const CreateFunctionModal = React.forwardRef(
                           value={body}
                           maxLength={BODY_MAX}
                           disabled={disabled}
+                          aria-invalid={Boolean(bodyError)}
+                          aria-describedby={bodyError ? "fn-body-error" : undefined}
                           onChange={(e) => {
                             setBody(e.target.value);
                             if (bodyError) validateBody(e.target.value);
@@ -19165,13 +19356,15 @@ export const CreateFunctionModal = React.forwardRef(
                           variableGroups={bodyTrigger ? variableGroups : undefined}
                           filterQuery={bodyTrigger?.query ?? ""}
                           onSelect={handleBodyVarSelect}
-                          onAddVariable={onAddVariable ? handleAddVariableClick : undefined}
+                          onAddVariable={onAddVariable ? handleAddVariableFromBody : undefined}
                           onEditVariable={onEditVariable ? handleEditVariableClick : undefined}
                           style={bodyPopupStyle}
                         />
                       </div>
                       {bodyError && (
-                        <p className="m-0 text-sm text-semantic-error-primary">{bodyError}</p>
+                        <p id="fn-body-error" className="m-0 text-sm text-semantic-error-primary">
+                          {bodyError}
+                        </p>
                       )}
                     </div>
                   )}
@@ -19270,10 +19463,11 @@ export const CreateFunctionModal = React.forwardRef(
                   Back
                 </Button>
                 <Button
+                  type="button"
                   variant="default"
                   className="flex-1 sm:flex-none"
                   onClick={handleSubmit}
-                  disabled={!isStep2Valid || disabled}
+                  disabled={disabled}
                 >
                   Submit
                 </Button>
@@ -19285,7 +19479,7 @@ export const CreateFunctionModal = React.forwardRef(
 
       <VariableFormModal
         open={varModalOpen}
-        onOpenChange={setVarModalOpen}
+        onOpenChange={handleVarModalOpenChange}
         mode={varModalMode}
         initialData={varModalInitialData}
         onSave={handleVariableSave}
@@ -20956,11 +21150,20 @@ export interface CreateFunctionData
   extends CreateFunctionStep1Data,
     CreateFunctionStep2Data {}
 
+/**
+ * Test values for "Test Your API": keys are full placeholders as in the form
+ * (e.g. \`"{{Caller number}}"\`), values are the strings the user entered.
+ */
+export type CreateFunctionTestValues = Record<string, string>;
+
 export interface CreateFunctionModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onSubmit?: (data: CreateFunctionData) => void;
-  onTestApi?: (step2: CreateFunctionStep2Data) => Promise<string>;
+  onTestApi?: (
+    step2: CreateFunctionStep2Data,
+    testValues?: CreateFunctionTestValues
+  ) => Promise<string>;
   /** Pre-fills all fields \u2014 use when opening the modal to edit an existing function */
   initialData?: Partial<CreateFunctionData>;
   /** When true, changes the modal title to "Edit Function" */
@@ -20977,7 +21180,12 @@ export interface CreateFunctionModalProps {
   sessionVariables?: string[];
   /** Grouped variables shown in the {{ autocomplete popup (overrides flat list display when provided) */
   variableGroups?: VariableGroup[];
-  /** Called when user saves a new variable from the autocomplete popup */
+  /**
+   * Called when user saves a new variable from the autocomplete popup.
+   * The modal replaces the open \`{{\u2026\` fragment in the focused field with \`{{name}}\`.
+   * When using \`variableGroups\`, merge the new item into the matching group in your state
+   * so it appears in the dropdown on the next open.
+   */
   onAddVariable?: (data: VariableFormData) => void;
   /** Called when user edits a variable from the autocomplete popup */
   onEditVariable?: (originalName: string, data: VariableFormData) => void;
@@ -21040,7 +21248,10 @@ export interface IvrBotConfigProps {
   functionEditDisabled?: boolean;
   /** Independently disables the function delete button */
   functionDeleteDisabled?: boolean;
-  onTestApi?: (step2: CreateFunctionStep2Data) => Promise<string>;
+  onTestApi?: (
+    step2: CreateFunctionStep2Data,
+    testValues?: CreateFunctionTestValues
+  ) => Promise<string>;
   /** Hover text for the info icon in the Functions card header */
   functionsInfoTooltip?: string;
   /** Hover text for the info icon in the Knowledge Base card header */
@@ -21132,6 +21343,7 @@ export type {
   IvrBotConfigProps,
   IvrBotConfigData,
   CreateFunctionData,
+  CreateFunctionTestValues,
   CreateFunctionStep1Data,
   CreateFunctionStep2Data,
   FunctionItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.221",
+  "version": "0.0.222",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",