myoperator-ui 0.0.208 → 0.0.209

package/dist/index.js

@@ -1127,41 +1127,84 @@ const SelectScrollDownButton = React.forwardRef<
 SelectScrollDownButton.displayName =
   SelectPrimitive.ScrollDownButton.displayName;
 
+/**
+ * Radix Select v2 wraps content in RemoveScroll which locks body scroll
+ * via both CSS (overflow:hidden) and JS (preventDefault on wheel/touchmove).
+ *
+ * CSS fix: react-remove-scroll-bar uses \`body[data-scroll-locked]\` with
+ * \`!important\`. We use a doubled attribute selector for higher specificity
+ * so our override always wins regardless of style injection order.
+ *
+ * JS fix: react-remove-scroll checks \`event.cancelable\` before calling
+ * \`preventDefault()\`. We override this property in a capture-phase listener
+ * so the library skips the preventDefault call.
+ */
+function useUnlockBodyScroll() {
+  React.useEffect(() => {
+    const style = document.createElement("style");
+    style.setAttribute("data-select-scroll-fix", "");
+    style.textContent =
+      "body[data-scroll-locked][data-scroll-locked] { overflow: auto !important; margin-right: 0 !important; overscroll-behavior: auto !important; }";
+    document.head.appendChild(style);
+
+    const preventScrollLock = (e: Event) => {
+      if (!document.body.hasAttribute("data-scroll-locked")) return;
+      Object.defineProperty(e, "cancelable", {
+        value: false,
+        configurable: true,
+      });
+    };
+
+    document.addEventListener("wheel", preventScrollLock, true);
+    document.addEventListener("touchmove", preventScrollLock, true);
+
+    return () => {
+      document.head.removeChild(style);
+      document.removeEventListener("wheel", preventScrollLock, true);
+      document.removeEventListener("touchmove", preventScrollLock, true);
+    };
+  }, []);
+}
+
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-[9999] max-h-96 min-w-[8rem] overflow-hidden rounded bg-semantic-bg-primary border border-semantic-border-layout shadow-md",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
+>(({ className, children, position = "popper", ...props }, ref) => {
+  useUnlockBodyScroll();
+
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
         className={cn(
-          "p-1",
+          "relative z-[9999] max-h-96 min-w-[8rem] overflow-hidden rounded bg-semantic-bg-primary border border-semantic-border-layout shadow-md",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+          "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
         )}
+        position={position}
+        {...props}
       >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+});
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
@@ -10939,6 +10982,8 @@ const PlanUpgradeSummaryModal = React.forwardRef<
       cancelLabel = "Cancel",
       primaryActionLabel,
       onPrimaryAction,
+      loading = false,
+      disabled = false,
       onCancel,
       onClose,
       closeAriaLabel = "Close plan summary modal",
@@ -11037,7 +11082,7 @@ const PlanUpgradeSummaryModal = React.forwardRef<
               <Button variant="outline" onClick={handleCancel}>
                 {cancelLabel}
               </Button>
-              <Button variant="primary" onClick={onPrimaryAction}>
+              <Button variant="primary" onClick={onPrimaryAction} loading={loading} disabled={disabled}>
                 {resolvedPrimaryActionLabel}
               </Button>
             </div>
@@ -11103,6 +11148,10 @@ export interface PlanUpgradeSummaryModalProps
   primaryActionLabel?: string;
   /** Called when the primary CTA is clicked */
   onPrimaryAction?: () => void;
+  /** Shows loading spinner on the primary CTA button */
+  loading?: boolean;
+  /** Disables the primary CTA button */
+  disabled?: boolean;
   /** Called when the cancel button is clicked */
   onCancel?: () => void;
   /** Called when the close icon is clicked */
@@ -11475,7 +11524,7 @@ export type { PowerUpCardProps } from "./types";
 import { cn } from "../../../lib/utils";
 import { Button } from "../button";
 import { Badge } from "../badge";
-import { CircleCheck } from "lucide-react";
+import { CircleCheck, Info } from "lucide-react";
 import type { PricingCardProps } from "./types";
 
 /**
@@ -11516,6 +11565,7 @@ const PricingCard = React.forwardRef<HTMLDivElement, PricingCardProps>(
       onFeatureDetails,
       addon,
       usageDetails,
+      infoText,
       className,
       ...props
     },
@@ -11608,6 +11658,16 @@ const PricingCard = React.forwardRef<HTMLDivElement, PricingCardProps>(
               {buttonText}
             </Button>
           </div>
+
+          {/* Info text */}
+          {infoText && (
+            <div className="flex items-start gap-1.5">
+              <Info className="size-3.5 text-semantic-info-primary shrink-0 mt-0.5" />
+              <p className="text-xs text-semantic-info-primary tracking-[0.035px] m-0">
+                {infoText}
+              </p>
+            </div>
+          )}
         </div>
 
         {/* Features */}
@@ -11899,6 +11959,8 @@ export interface PricingCardProps
   addon?: PricingCardAddon;
   /** Usage details displayed in a bulleted list at the bottom (e.g., AIO plan) */
   usageDetails?: UsageDetail[];
+  /** Informational text shown below the CTA button (e.g., "Your package change will be effective from 23-03-2026") */
+  infoText?: string;
 }
 `, prefix)
         },
@@ -13160,7 +13222,7 @@ const FileUploadModal = React.forwardRef<HTMLDivElement, FileUploadModalProps>(
       dropDescription = "or drag and drop file here",
       saveLabel = "Save",
       cancelLabel = "Cancel",
-      saving = false,
+      loading = false,
       className,
       ...props
     },
@@ -13442,7 +13504,7 @@ const FileUploadModal = React.forwardRef<HTMLDivElement, FileUploadModalProps>(
               className="w-full sm:w-auto"
               onClick={handleSave}
               disabled={!hasCompleted || hasUploading}
-              loading={saving}
+              loading={loading}
             >
               {saveLabel}
             </Button>
@@ -13495,7 +13557,8 @@ export interface FileUploadModalProps
   dropDescription?: string;
   saveLabel?: string;
   cancelLabel?: string;
-  saving?: boolean;
+  /** Shows a loading spinner on the save button (e.g. while processing files server-side) */
+  loading?: boolean;
 }
 `, prefix)
         },
@@ -13572,12 +13635,14 @@ function StyledTextarea({
   value,
   rows = 3,
   onChange,
+  disabled,
   className,
 }: {
   placeholder?: string;
   value?: string;
   rows?: number;
   onChange?: (v: string) => void;
+  disabled?: boolean;
   className?: string;
 }) {
   return (
@@ -13586,12 +13651,14 @@ function StyledTextarea({
       rows={rows}
       onChange={(e) => onChange?.(e.target.value)}
       placeholder={placeholder}
+      disabled={disabled}
       className={cn(
         "w-full px-4 py-2.5 text-base rounded border resize-none",
         "border-semantic-border-input bg-semantic-bg-primary",
         "text-semantic-text-primary placeholder:text-semantic-text-muted",
         "outline-none hover:border-semantic-border-input-focus",
         "focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+        disabled && "opacity-50 cursor-not-allowed",
         className
       )}
     />
@@ -13620,9 +13687,11 @@ function Field({
 function FallbackPromptsAccordion({
   data,
   onChange,
+  disabled,
 }: {
   data: Partial<IvrBotConfigData>;
   onChange: (patch: Partial<IvrBotConfigData>) => void;
+  disabled?: boolean;
 }) {
   return (
     <div className="bg-semantic-bg-primary border border-semantic-border-layout rounded-lg overflow-hidden">
@@ -13641,6 +13710,7 @@ function FallbackPromptsAccordion({
                   value={data.agentBusyPrompt ?? ""}
                   onChange={(v) => onChange({ agentBusyPrompt: v })}
                   placeholder="Executives are busy at the moment, we will connect you soon."
+                  disabled={disabled}
                 />
               </Field>
               <Field label="No Extension Found">
@@ -13648,6 +13718,7 @@ function FallbackPromptsAccordion({
                   value={data.noExtensionPrompt ?? ""}
                   onChange={(v) => onChange({ noExtensionPrompt: v })}
                   placeholder="Sorry, the requested extension is currently unavailable. Let me help you directly."
+                  disabled={disabled}
                 />
               </Field>
             </div>
@@ -13699,10 +13770,14 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
       onEditFunction,
       onDeleteFunction,
       onTestApi,
+      functionsInfoTooltip,
+      functionPromptMinLength,
+      functionPromptMaxLength,
       onBack,
       onPlayVoice,
       onPauseVoice,
       playingVoice,
+      disabled,
       roleOptions,
       toneOptions,
       voiceOptions,
@@ -13755,12 +13830,14 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
               <Button
                 variant="outline"
                 onClick={() => onSaveAsDraft?.(data)}
+                disabled={disabled}
               >
                 Save as Draft
               </Button>
               <Button
                 variant="default"
                 onClick={() => onPublish?.(data)}
+                disabled={disabled}
               >
                 Publish Bot
               </Button>
@@ -13782,13 +13859,15 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
               toneOptions={toneOptions}
               voiceOptions={voiceOptions}
               languageOptions={languageOptions}
+              disabled={disabled}
             />
             <BotBehaviorCard
               data={data}
               onChange={update}
               sessionVariables={sessionVariables}
+              disabled={disabled}
             />
-            <FallbackPromptsAccordion data={data} onChange={update} />
+            <FallbackPromptsAccordion data={data} onChange={update} disabled={disabled} />
           </div>
 
           {/* Right column \u2014 gray panel extending full height */}
@@ -13797,6 +13876,7 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
               files={data.knowledgeBaseFiles}
               onAdd={() => setUploadOpen(true)}
               onDownload={onDownloadKnowledgeFile}
+              disabled={disabled}
               onDelete={(id) => {
                 update({
                   knowledgeBaseFiles: data.knowledgeBaseFiles.filter(
@@ -13810,6 +13890,8 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
               functions={data.functions}
               onAddFunction={() => setCreateFnOpen(true)}
               onEditFunction={onEditFunction}
+              infoTooltip={functionsInfoTooltip}
+              disabled={disabled}
               onDeleteFunction={(id) => {
                 update({
                   functions: data.functions.filter((f) => f.id !== id),
@@ -13821,6 +13903,7 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
               data={data}
               onChange={update}
               departmentOptions={escalationDepartmentOptions}
+              disabled={disabled}
             />
             <AdvancedSettingsCard
               data={data}
@@ -13829,6 +13912,7 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
               silenceTimeoutMax={silenceTimeoutMax}
               callEndThresholdMin={callEndThresholdMin}
               callEndThresholdMax={callEndThresholdMax}
+              disabled={disabled}
             />
           </div>
         </div>
@@ -13839,6 +13923,8 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
           onOpenChange={setCreateFnOpen}
           onSubmit={handleCreateFunction}
           onTestApi={onTestApi}
+          promptMinLength={functionPromptMinLength}
+          promptMaxLength={functionPromptMaxLength}
         />
 
         {/* File Upload Modal */}
@@ -13878,6 +13964,7 @@ import type {
 } from "./types";
 
 const HTTP_METHODS: HttpMethod[] = ["GET", "POST", "PUT", "DELETE", "PATCH"];
+const METHODS_WITH_BODY: HttpMethod[] = ["POST", "PUT", "PATCH"];
 const FUNCTION_NAME_MAX = 30;
 const BODY_MAX = 4000;
 
@@ -14033,6 +14120,8 @@ export const CreateFunctionModal = React.forwardRef<
       onOpenChange,
       onSubmit,
       onTestApi,
+      promptMinLength = 100,
+      promptMaxLength = 5000,
       initialStep = 1,
       initialTab = "header",
       className,
@@ -14072,8 +14161,17 @@ export const CreateFunctionModal = React.forwardRef<
       onOpenChange(false);
     }, [reset, onOpenChange]);
 
+    const supportsBody = METHODS_WITH_BODY.includes(method);
+
+    // When switching to a method without body, reset to header tab if body was active
+    React.useEffect(() => {
+      if (!supportsBody && activeTab === "body") {
+        setActiveTab("header");
+      }
+    }, [supportsBody, activeTab]);
+
     const handleNext = () => {
-      if (name.trim() && prompt.trim()) setStep(2);
+      if (name.trim() && prompt.trim().length >= promptMinLength) setStep(2);
     };
 
     const handleSubmit = () => {
@@ -14109,7 +14207,7 @@ export const CreateFunctionModal = React.forwardRef<
     };
 
     const isStep1Valid =
-      name.trim().length > 0 && prompt.trim().length > 0;
+      name.trim().length > 0 && prompt.trim().length >= promptMinLength;
 
     const tabLabels: Record<FunctionTabType, string> = {
       header: \`Header (\${headers.length})\`,
@@ -14117,6 +14215,10 @@ export const CreateFunctionModal = React.forwardRef<
       body: "Body",
     };
 
+    const visibleTabs: FunctionTabType[] = supportsBody
+      ? ["header", "queryParams", "body"]
+      : ["header", "queryParams"];
+
     return (
       <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogContent
@@ -14181,14 +14283,25 @@ export const CreateFunctionModal = React.forwardRef<
                     Prompt{" "}
                     <span className="text-semantic-error-primary">*</span>
                   </label>
-                  <textarea
-                    id="fn-prompt"
-                    value={prompt}
-                    onChange={(e) => setPrompt(e.target.value)}
-                    placeholder="Enter the description of the function"
-                    rows={5}
-                    className={textareaCls}
-                  />
+                  <div className="relative">
+                    <textarea
+                      id="fn-prompt"
+                      value={prompt}
+                      maxLength={promptMaxLength}
+                      onChange={(e) => setPrompt(e.target.value)}
+                      placeholder="Enter the description of the function"
+                      rows={5}
+                      className={cn(textareaCls, "pb-7")}
+                    />
+                    <span className="absolute bottom-2 right-3 text-xs italic text-semantic-text-muted pointer-events-none">
+                      {prompt.length}/{promptMaxLength}
+                    </span>
+                  </div>
+                  {prompt.length > 0 && prompt.trim().length < promptMinLength && (
+                    <p className="m-0 text-xs text-semantic-error-primary">
+                      Minimum {promptMinLength} characters required
+                    </p>
+                  )}
                 </div>
               </div>
             )}
@@ -14250,9 +14363,7 @@ export const CreateFunctionModal = React.forwardRef<
                       "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
                     )}
                   >
-                    {(
-                      ["header", "queryParams", "body"] as FunctionTabType[]
-                    ).map((tab) => (
+                    {visibleTabs.map((tab) => (
                       <button
                         key={tab}
                         type="button"
@@ -14452,6 +14563,8 @@ export interface BotIdentityCardProps {
   onPauseVoice?: (voiceValue: string) => void;
   /** The voice value currently being played. Controls play/pause icon state. */
   playingVoice?: string;
+  /** Disables all fields in the card (view mode) */
+  disabled?: boolean;
   /** Additional className for the card */
   className?: string;
 }
@@ -14492,11 +14605,13 @@ function StyledInput({
   placeholder,
   value,
   onChange,
+  disabled,
   className,
 }: {
   placeholder?: string;
   value?: string;
   onChange?: (v: string) => void;
+  disabled?: boolean;
   className?: string;
 }) {
   return (
@@ -14505,12 +14620,14 @@ function StyledInput({
       value={value ?? ""}
       onChange={(e) => onChange?.(e.target.value)}
       placeholder={placeholder}
+      disabled={disabled}
       className={cn(
         "w-full h-[42px] px-4 text-base rounded border",
         "border-semantic-border-input bg-semantic-bg-primary",
         "text-semantic-text-primary placeholder:text-semantic-text-muted",
         "outline-none hover:border-semantic-border-input-focus",
         "focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+        disabled && "opacity-50 cursor-not-allowed",
         className
       )}
     />
@@ -14573,6 +14690,7 @@ const BotIdentityCard = React.forwardRef<HTMLDivElement, BotIdentityCardProps>(
       onPlayVoice,
       onPauseVoice,
       playingVoice,
+      disabled,
       className,
     },
     ref
@@ -14603,6 +14721,7 @@ const BotIdentityCard = React.forwardRef<HTMLDivElement, BotIdentityCardProps>(
                 placeholder="e.g., Rhea from CaratLane"
                 value={data.botName}
                 onChange={(v) => onChange({ botName: v })}
+                disabled={disabled}
               />
             </Field>
 
@@ -14613,6 +14732,7 @@ const BotIdentityCard = React.forwardRef<HTMLDivElement, BotIdentityCardProps>(
                 options={roleOptions}
                 placeholder="e.g., Customer Support Agent"
                 creatableHint="Type to create a custom role"
+                disabled={disabled}
               />
             </Field>
 
@@ -14623,6 +14743,7 @@ const BotIdentityCard = React.forwardRef<HTMLDivElement, BotIdentityCardProps>(
                 options={toneOptions}
                 placeholder="Enter or select tone"
                 creatableHint="Type to create a custom tone"
+                disabled={disabled}
               />
             </Field>
 
@@ -14634,6 +14755,7 @@ const BotIdentityCard = React.forwardRef<HTMLDivElement, BotIdentityCardProps>(
                     onChange({ voice: v });
                     onPauseVoice?.(v);
                   }}
+                  disabled={disabled}
                 >
                   <SelectTrigger>
                     <SelectValue placeholder="Select voice">
@@ -14688,6 +14810,7 @@ const BotIdentityCard = React.forwardRef<HTMLDivElement, BotIdentityCardProps>(
                 <Select
                   value={data.language || undefined}
                   onValueChange={(v) => onChange({ language: v })}
+                  disabled={disabled}
                 >
                   <SelectTrigger>
                     <SelectValue placeholder="Select language" />
@@ -14733,6 +14856,8 @@ export interface BotBehaviorCardProps {
   onChange: (patch: Partial<BotBehaviorData>) => void;
   /** Session variables shown as insertable chips */
   sessionVariables?: string[];
+  /** Disables all fields in the card (view mode) */
+  disabled?: boolean;
   /** Additional className for the card */
   className?: string;
 }
@@ -14778,12 +14903,14 @@ function StyledTextarea({
   value,
   rows = 3,
   onChange,
+  disabled,
   className,
 }: {
   placeholder?: string;
   value?: string;
   rows?: number;
   onChange?: (v: string) => void;
+  disabled?: boolean;
   className?: string;
 }) {
   return (
@@ -14792,12 +14919,14 @@ function StyledTextarea({
       rows={rows}
       onChange={(e) => onChange?.(e.target.value)}
       placeholder={placeholder}
+      disabled={disabled}
       className={cn(
         "w-full px-4 py-2.5 text-base rounded border resize-none",
         "border-semantic-border-input bg-semantic-bg-primary",
         "text-semantic-text-primary placeholder:text-semantic-text-muted",
         "outline-none hover:border-semantic-border-input-focus",
         "focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+        disabled && "opacity-50 cursor-not-allowed",
         className
       )}
     />
@@ -14812,6 +14941,7 @@ const BotBehaviorCard = React.forwardRef<HTMLDivElement, BotBehaviorCardProps>(
       data,
       onChange,
       sessionVariables = DEFAULT_SESSION_VARIABLES,
+      disabled,
       className,
     },
     ref
@@ -14838,6 +14968,7 @@ const BotBehaviorCard = React.forwardRef<HTMLDivElement, BotBehaviorCardProps>(
                   if (v.length <= MAX) onChange({ systemPrompt: v });
                 }}
                 placeholder="You are a helpful assistant. Always start by greeting the user politely: 'Hello! Welcome. How can I assist you today?'"
+                disabled={disabled}
                 className="pb-8"
               />
               <span className="absolute bottom-2.5 right-3 text-sm text-semantic-text-muted">
@@ -14856,7 +14987,8 @@ const BotBehaviorCard = React.forwardRef<HTMLDivElement, BotBehaviorCardProps>(
                   key={v}
                   type="button"
                   onClick={() => insertVariable(v)}
-                  className={cn(tagVariants(), "gap-1.5 cursor-pointer hover:opacity-80 transition-opacity")}
+                  disabled={disabled}
+                  className={cn(tagVariants(), "gap-1.5 cursor-pointer hover:opacity-80 transition-opacity", disabled && "opacity-50 cursor-not-allowed")}
                 >
                   <Plus className="size-3 shrink-0" />
                   {v}
@@ -14893,6 +15025,8 @@ export interface KnowledgeBaseCardProps {
   onDownload?: (id: string) => void;
   /** Called when user clicks the delete button on a file */
   onDelete?: (id: string) => void;
+  /** Disables all interactive elements in the card (view mode) */
+  disabled?: boolean;
   /** Additional className */
   className?: string;
 }
@@ -14916,6 +15050,7 @@ const KnowledgeBaseCard = React.forwardRef<HTMLDivElement, KnowledgeBaseCardProp
       onAdd,
       onDownload,
       onDelete,
+      disabled,
       className,
     },
     ref
@@ -14939,7 +15074,8 @@ const KnowledgeBaseCard = React.forwardRef<HTMLDivElement, KnowledgeBaseCardProp
             <button
               type="button"
               onClick={() => onAdd?.()}
-              className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded text-xs font-semibold text-semantic-text-secondary bg-semantic-primary-surface hover:bg-semantic-bg-hover transition-colors"
+              disabled={disabled}
+              className={cn("inline-flex items-center gap-1.5 px-4 py-1.5 rounded text-xs font-semibold text-semantic-text-secondary bg-semantic-primary-surface hover:bg-semantic-bg-hover transition-colors", disabled && "opacity-50 cursor-not-allowed")}
             >
               <Plus className="size-3.5" />
               Files
@@ -14976,7 +15112,8 @@ const KnowledgeBaseCard = React.forwardRef<HTMLDivElement, KnowledgeBaseCardProp
                         <button
                           type="button"
                           onClick={() => onDownload?.(file.id)}
-                          className="p-2 rounded text-semantic-text-muted hover:text-semantic-text-primary hover:bg-semantic-bg-hover transition-colors"
+                          disabled={disabled}
+                          className={cn("p-2 rounded text-semantic-text-muted hover:text-semantic-text-primary hover:bg-semantic-bg-hover transition-colors", disabled && "opacity-50 cursor-not-allowed")}
                           aria-label="Download file"
                         >
                           <Download className="size-4" />
@@ -14984,7 +15121,8 @@ const KnowledgeBaseCard = React.forwardRef<HTMLDivElement, KnowledgeBaseCardProp
                         <button
                           type="button"
                           onClick={() => onDelete?.(file.id)}
-                          className="p-2 rounded text-semantic-text-muted hover:text-semantic-error-primary hover:bg-semantic-error-surface transition-colors"
+                          disabled={disabled}
+                          className={cn("p-2 rounded text-semantic-text-muted hover:text-semantic-error-primary hover:bg-semantic-error-surface transition-colors", disabled && "opacity-50 cursor-not-allowed")}
                           aria-label="Delete file"
                         >
                           <Trash2 className="size-4" />
@@ -15011,6 +15149,12 @@ export { KnowledgeBaseCard };
 import { Info, Pencil, Plus, Trash2 } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import { Badge } from "../badge";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip";
 import type { FunctionItem } from "./types";
 
 // \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -15024,6 +15168,10 @@ export interface FunctionsCardProps {
   onEditFunction?: (id: string) => void;
   /** Called when user deletes a custom (non-built-in) function */
   onDeleteFunction?: (id: string) => void;
+  /** Hover text shown on the info icon next to the "Functions" title */
+  infoTooltip?: string;
+  /** Disables all interactive elements in the card (view mode) */
+  disabled?: boolean;
   /** Additional className */
   className?: string;
 }
@@ -15031,7 +15179,7 @@ export interface FunctionsCardProps {
 // \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 const FunctionsCard = React.forwardRef<HTMLDivElement, FunctionsCardProps>(
-  ({ functions, onAddFunction, onEditFunction, onDeleteFunction, className }, ref) => {
+  ({ functions, onAddFunction, onEditFunction, onDeleteFunction, infoTooltip, disabled, className }, ref) => {
     return (
       <div
         ref={ref}
@@ -15046,12 +15194,24 @@ const FunctionsCard = React.forwardRef<HTMLDivElement, FunctionsCardProps>(
             <h2 className="m-0 text-base font-semibold text-semantic-text-primary">
               Functions
             </h2>
-            <Info className="size-3.5 text-semantic-text-muted shrink-0" />
+            {infoTooltip ? (
+              <TooltipProvider delayDuration={200}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Info className="size-3.5 text-semantic-text-muted shrink-0 cursor-help" />
+                  </TooltipTrigger>
+                  <TooltipContent>{infoTooltip}</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            ) : (
+              <Info className="size-3.5 text-semantic-text-muted shrink-0" />
+            )}
           </div>
           <button
             type="button"
             onClick={onAddFunction}
-            className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded text-xs font-semibold text-semantic-text-secondary bg-semantic-primary-surface hover:bg-semantic-bg-hover transition-colors"
+            disabled={disabled}
+            className={cn("inline-flex items-center gap-1.5 px-4 py-1.5 rounded text-xs font-semibold text-semantic-text-secondary bg-semantic-primary-surface hover:bg-semantic-bg-hover transition-colors", disabled && "opacity-50 cursor-not-allowed")}
           >
             <Plus className="size-3.5" />
             Functions
@@ -15071,7 +15231,18 @@ const FunctionsCard = React.forwardRef<HTMLDivElement, FunctionsCardProps>(
                   className="flex items-center justify-between px-4 py-3 rounded border border-semantic-border-layout bg-semantic-bg-primary"
                 >
                   <div className="flex items-center gap-2 min-w-0">
-                    <Info className="size-4 text-semantic-text-muted shrink-0" />
+                    {fn.tooltip ? (
+                      <TooltipProvider delayDuration={200}>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Info className="size-4 text-semantic-text-muted shrink-0 cursor-help" />
+                          </TooltipTrigger>
+                          <TooltipContent>{fn.tooltip}</TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    ) : (
+                      <Info className="size-4 text-semantic-text-muted shrink-0" />
+                    )}
                     <span className="text-sm text-semantic-text-primary truncate">
                       {fn.name}
                     </span>
@@ -15086,7 +15257,8 @@ const FunctionsCard = React.forwardRef<HTMLDivElement, FunctionsCardProps>(
                         <button
                           type="button"
                           onClick={() => onEditFunction?.(fn.id)}
-                          className="p-1.5 rounded text-semantic-text-muted hover:text-semantic-text-primary hover:bg-semantic-bg-hover transition-colors"
+                          disabled={disabled}
+                          className={cn("p-1.5 rounded text-semantic-text-muted hover:text-semantic-text-primary hover:bg-semantic-bg-hover transition-colors", disabled && "opacity-50 cursor-not-allowed")}
                           aria-label={\`Edit \${fn.name}\`}
                         >
                           <Pencil className="size-4" />
@@ -15094,7 +15266,8 @@ const FunctionsCard = React.forwardRef<HTMLDivElement, FunctionsCardProps>(
                         <button
                           type="button"
                           onClick={() => onDeleteFunction?.(fn.id)}
-                          className="p-1.5 rounded text-semantic-text-muted hover:text-semantic-error-primary hover:bg-semantic-error-surface transition-colors"
+                          disabled={disabled}
+                          className={cn("p-1.5 rounded text-semantic-text-muted hover:text-semantic-error-primary hover:bg-semantic-error-surface transition-colors", disabled && "opacity-50 cursor-not-allowed")}
                           aria-label={\`Delete \${fn.name}\`}
                         >
                           <Trash2 className="size-4" />
@@ -15161,6 +15334,8 @@ export interface FrustrationHandoverCardProps {
   onChange: (patch: Partial<FrustrationHandoverData>) => void;
   /** Available escalation department options */
   departmentOptions?: DepartmentOption[];
+  /** Disables all fields in the card (view mode) */
+  disabled?: boolean;
   /** Additional className */
   className?: string;
 }
@@ -15187,7 +15362,7 @@ function Field({
 // \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 const FrustrationHandoverCard = React.forwardRef<HTMLDivElement, FrustrationHandoverCardProps>(
-  ({ data, onChange, departmentOptions = DEFAULT_DEPARTMENT_OPTIONS, className }, ref) => {
+  ({ data, onChange, departmentOptions = DEFAULT_DEPARTMENT_OPTIONS, disabled, className }, ref) => {
     return (
       <div
         ref={ref}
@@ -15215,6 +15390,7 @@ const FrustrationHandoverCard = React.forwardRef<HTMLDivElement, FrustrationHand
                     onCheckedChange={(v) =>
                       onChange({ frustrationHandoverEnabled: v })
                     }
+                    disabled={disabled}
                   />
                 </div>
                 <div className="px-4 pb-2 sm:px-6">
@@ -15222,7 +15398,7 @@ const FrustrationHandoverCard = React.forwardRef<HTMLDivElement, FrustrationHand
                     <Select
                       value={data.escalationDepartment || undefined}
                       onValueChange={(v) => onChange({ escalationDepartment: v })}
-                      disabled={!data.frustrationHandoverEnabled}
+                      disabled={disabled || !data.frustrationHandoverEnabled}
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Select a department" />
@@ -15284,6 +15460,8 @@ export interface AdvancedSettingsCardProps {
   callEndThresholdMin?: number;
   /** Max value for call end threshold spinner (default: 10) */
   callEndThresholdMax?: number;
+  /** Disables all fields in the card (view mode) */
+  disabled?: boolean;
   /** Additional className */
   className?: string;
 }
@@ -15312,27 +15490,31 @@ function NumberSpinner({
   onChange,
   min = 0,
   max = 999,
+  disabled,
 }: {
   value: number;
   onChange: (v: number) => void;
   min?: number;
   max?: number;
+  disabled?: boolean;
 }) {
   return (
-    <div className="flex w-full items-center gap-2.5 px-4 py-2.5 border border-semantic-border-layout bg-semantic-bg-primary rounded">
+    <div className={cn("flex w-full items-center gap-2.5 px-4 py-2.5 border border-semantic-border-layout bg-semantic-bg-primary rounded", disabled && "opacity-50 cursor-not-allowed")}>
       <input
         type="number"
         value={value}
         min={min}
         max={max}
+        disabled={disabled}
         onChange={(e) => onChange(Number(e.target.value))}
-        className="flex-1 min-w-0 text-base text-semantic-text-primary bg-transparent outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        className="flex-1 min-w-0 text-base text-semantic-text-primary bg-transparent outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none disabled:cursor-not-allowed"
       />
       <div className="flex flex-col items-center shrink-0 gap-0.5">
         <button
           type="button"
           onClick={() => onChange(Math.min(max, value + 1))}
-          className="flex items-center justify-center text-semantic-text-muted hover:text-semantic-text-primary transition-colors"
+          disabled={disabled}
+          className="flex items-center justify-center text-semantic-text-muted hover:text-semantic-text-primary transition-colors disabled:cursor-not-allowed"
           aria-label="Increase"
         >
           <ChevronUp className="size-3" />
@@ -15340,7 +15522,8 @@ function NumberSpinner({
         <button
           type="button"
           onClick={() => onChange(Math.max(min, value - 1))}
-          className="flex items-center justify-center text-semantic-text-muted hover:text-semantic-text-primary transition-colors"
+          disabled={disabled}
+          className="flex items-center justify-center text-semantic-text-muted hover:text-semantic-text-primary transition-colors disabled:cursor-not-allowed"
           aria-label="Decrease"
         >
           <ChevronDown className="size-3" />
@@ -15361,6 +15544,7 @@ const AdvancedSettingsCard = React.forwardRef<HTMLDivElement, AdvancedSettingsCa
       silenceTimeoutMax = 60,
       callEndThresholdMin = 1,
       callEndThresholdMax = 10,
+      disabled,
       className,
     },
     ref
@@ -15390,6 +15574,7 @@ const AdvancedSettingsCard = React.forwardRef<HTMLDivElement, AdvancedSettingsCa
                       onChange={(v) => onChange({ silenceTimeout: v })}
                       min={silenceTimeoutMin}
                       max={silenceTimeoutMax}
+                      disabled={disabled}
                     />
                     <p className="m-0 text-xs text-semantic-text-muted">
                       Default: 15 seconds
@@ -15402,6 +15587,7 @@ const AdvancedSettingsCard = React.forwardRef<HTMLDivElement, AdvancedSettingsCa
                       onChange={(v) => onChange({ callEndThreshold: v })}
                       min={callEndThresholdMin}
                       max={callEndThresholdMax}
+                      disabled={disabled}
                     />
                     <p className="m-0 text-xs text-semantic-text-muted">
                       Drop call after n consecutive silences. Default: 3
@@ -15424,6 +15610,7 @@ const AdvancedSettingsCard = React.forwardRef<HTMLDivElement, AdvancedSettingsCa
                     onCheckedChange={(v) =>
                       onChange({ interruptionHandling: v })
                     }
+                    disabled={disabled}
                   />
                 </div>
               </div>
@@ -15459,6 +15646,8 @@ export interface FunctionItem {
   id: string;
   name: string;
   isBuiltIn?: boolean;
+  /** Hover text shown on the info icon for this function */
+  tooltip?: string;
 }
 
 export interface KnowledgeBaseFile {
@@ -15489,6 +15678,10 @@ export interface CreateFunctionModalProps {
   onOpenChange: (open: boolean) => void;
   onSubmit?: (data: CreateFunctionData) => void;
   onTestApi?: (step2: CreateFunctionStep2Data) => Promise<string>;
+  /** Minimum character length for the prompt field (default: 100) */
+  promptMinLength?: number;
+  /** Maximum character length for the prompt field (default: 5000) */
+  promptMaxLength?: number;
   /** Storybook/testing: start at a specific step (1 or 2) */
   initialStep?: 1 | 2;
   /** Storybook/testing: start on a specific tab when initialStep=2 */
@@ -15522,6 +15715,8 @@ export interface SelectOption {
 export interface IvrBotConfigProps {
   botTitle?: string;
   botType?: string;
+  /** When true, disables all fields in all card components (view mode) */
+  disabled?: boolean;
   /** Optional "Last updated at HH:MM AM/PM" text shown in the page header */
   lastUpdatedAt?: string;
   initialData?: Partial<IvrBotConfigData>;
@@ -15539,6 +15734,12 @@ export interface IvrBotConfigProps {
   /** Called when user deletes a custom function */
   onDeleteFunction?: (id: string) => void;
   onTestApi?: (step2: CreateFunctionStep2Data) => Promise<string>;
+  /** Hover text for the info icon in the Functions card header */
+  functionsInfoTooltip?: string;
+  /** Minimum character length for the function prompt (default: 100) */
+  functionPromptMinLength?: number;
+  /** Maximum character length for the function prompt (default: 5000) */
+  functionPromptMaxLength?: number;
   onBack?: () => void;
   /** Called when the play icon is clicked on a voice option */
   onPlayVoice?: (voiceValue: string) => void;

package/package.json

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