myoperator-ui 0.0.210-beta.0 → 0.0.210-beta.10

package/dist/index.js

@@ -2194,172 +2194,6 @@ export const ReadableField = React.forwardRef<HTMLDivElement, ReadableFieldProps
 );
 
 ReadableField.displayName = "ReadableField";
-`, prefix)
-        }
-      ]
-    },
-    "textarea": {
-      name: "textarea",
-      description: "A multi-line text area with label, helper text, error state, and character count support",
-      category: "form",
-      dependencies: [
-        "class-variance-authority",
-        "clsx",
-        "tailwind-merge"
-      ],
-      files: [
-        {
-          name: "textarea.tsx",
-          content: prefixTailwindClasses(`import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../lib/utils";
-
-const textAreaVariants = cva(
-  "w-full rounded bg-semantic-bg-primary px-4 py-3 text-base text-semantic-text-primary outline-none transition-all resize-y placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]",
-  {
-    variants: {
-      state: {
-        default:
-          "border border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
-        error:
-          "border border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
-      },
-    },
-    defaultVariants: {
-      state: "default",
-    },
-  }
-);
-
-export interface TextAreaProps
-  extends React.ComponentProps<"textarea">,
-    VariantProps<typeof textAreaVariants> {
-  /** Label text displayed above the textarea */
-  label?: string;
-  /** Shows red asterisk next to label when true */
-  required?: boolean;
-  /** Helper text displayed below the textarea */
-  helperText?: string;
-  /** Error message - shows error state with red styling */
-  error?: string;
-  /** Shows character count when maxLength is set */
-  showCount?: boolean;
-  /** Additional class for the wrapper container */
-  wrapperClassName?: string;
-  /** Additional class for the label */
-  labelClassName?: string;
-}
-
-const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  (
-    {
-      className,
-      wrapperClassName,
-      labelClassName,
-      state,
-      label,
-      required,
-      helperText,
-      error,
-      showCount,
-      maxLength,
-      value,
-      defaultValue,
-      onChange,
-      disabled,
-      id,
-      rows = 4,
-      ...props
-    },
-    ref
-  ) => {
-    const [internalValue, setInternalValue] = React.useState(
-      defaultValue ?? ""
-    );
-
-    const isControlled = value !== undefined;
-    const currentValue = isControlled ? value : internalValue;
-    const derivedState = error ? "error" : (state ?? "default");
-
-    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      if (!isControlled) setInternalValue(e.target.value);
-      onChange?.(e);
-    };
-
-    const generatedId = React.useId();
-    const textAreaId = id || generatedId;
-    const helperId = \`\${textAreaId}-helper\`;
-    const errorId = \`\${textAreaId}-error\`;
-    const ariaDescribedBy = error ? errorId : helperText ? helperId : undefined;
-    const charCount = String(currentValue).length;
-
-    return (
-      <div className={cn("flex flex-col gap-1.5", wrapperClassName)}>
-        {label && (
-          <label
-            htmlFor={textAreaId}
-            className={cn(
-              "text-sm font-semibold text-semantic-text-secondary tracking-[0.014px]",
-              labelClassName
-            )}
-          >
-            {label}
-            {required && (
-              <span className="text-semantic-error-primary ml-0.5">*</span>
-            )}
-          </label>
-        )}
-
-        <textarea
-          ref={ref}
-          id={textAreaId}
-          rows={rows}
-          className={cn(textAreaVariants({ state: derivedState, className }))}
-          disabled={disabled}
-          maxLength={maxLength}
-          value={isControlled ? value : undefined}
-          defaultValue={!isControlled ? defaultValue : undefined}
-          onChange={handleChange}
-          aria-invalid={!!error}
-          aria-describedby={ariaDescribedBy}
-          {...props}
-        />
-
-        {(error || helperText || (showCount && maxLength)) && (
-          <div className="flex justify-between items-start gap-2">
-            {error ? (
-              <span id={errorId} className="text-xs text-semantic-error-primary">
-                {error}
-              </span>
-            ) : helperText ? (
-              <span id={helperId} className="text-xs text-semantic-text-muted">
-                {helperText}
-              </span>
-            ) : (
-              <span />
-            )}
-            {showCount && maxLength && (
-              <span
-                className={cn(
-                  "text-xs",
-                  charCount > maxLength
-                    ? "text-semantic-error-primary"
-                    : "text-semantic-text-muted"
-                )}
-              >
-                {charCount}/{maxLength}
-              </span>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-TextArea.displayName = "TextArea";
-
-export { TextArea, textAreaVariants };
 `, prefix)
         }
       ]
@@ -13770,17 +13604,10 @@ export type {
         {
           name: "ivr-bot-config.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
-import { Info } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import { Button } from "../button";
 import { Badge } from "../badge";
 import { PageHeader } from "../page-header";
-import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-} from "../accordion";
 import { BotIdentityCard } from "./bot-identity-card";
 import { BotBehaviorCard } from "./bot-behavior-card";
 import { KnowledgeBaseCard } from "./knowledge-base-card";
@@ -13794,106 +13621,8 @@ import type {
   IvrBotConfigData,
   CreateFunctionData,
 } from "./types";
+import { FallbackPromptsCard } from "./fallback-prompts-card";
 
-// \u2500\u2500\u2500 Styled Textarea (still used by FallbackPromptsAccordion) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-function StyledTextarea({
-  placeholder,
-  value,
-  rows = 3,
-  onChange,
-  disabled,
-  className,
-}: {
-  placeholder?: string;
-  value?: string;
-  rows?: number;
-  onChange?: (v: string) => void;
-  disabled?: boolean;
-  className?: string;
-}) {
-  return (
-    <textarea
-      value={value ?? ""}
-      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
-      )}
-    />
-  );
-}
-
-// \u2500\u2500\u2500 Field wrapper (still used by FallbackPromptsAccordion) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-function Field({
-  label,
-  children,
-}: {
-  label: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="flex flex-col gap-1.5">
-      <label className="text-sm font-semibold text-semantic-text-secondary tracking-[0.014px]">
-        {label}
-      </label>
-      {children}
-    </div>
-  );
-}
-
-// \u2500\u2500\u2500 Fallback Prompts (accordion) \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
-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">
-      <Accordion type="single">
-        <AccordionItem value="fallback">
-          <AccordionTrigger className="px-4 py-4 border-b border-semantic-border-layout hover:no-underline sm:px-6 sm:py-5">
-            <span className="flex items-center gap-1.5 text-base font-semibold text-semantic-text-primary">
-              Fallback Prompts
-              <Info className="size-3.5 text-semantic-text-muted shrink-0" />
-            </span>
-          </AccordionTrigger>
-          <AccordionContent>
-            <div className="px-4 pt-4 pb-2 flex flex-col gap-6 sm:px-6 sm:pt-6">
-              <Field label="Agent Busy Prompt">
-                <StyledTextarea
-                  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">
-                <StyledTextarea
-                  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>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  );
-}
 
 // \u2500\u2500\u2500 Default data \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 DEFAULT_DATA: IvrBotConfigData = {
@@ -13937,8 +13666,14 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
       onDeleteFunction,
       onTestApi,
       functionsInfoTooltip,
+      knowledgeBaseInfoTooltip,
       functionPromptMinLength,
       functionPromptMaxLength,
+      functionEditData,
+      systemPromptMaxLength,
+      onSystemPromptBlur,
+      onAgentBusyPromptBlur,
+      onNoExtensionFoundPromptBlur,
       onBack,
       onPlayVoice,
       onPauseVoice,
@@ -13963,6 +13698,7 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
       ...initialData,
     });
     const [createFnOpen, setCreateFnOpen] = React.useState(false);
+    const [editFnOpen, setEditFnOpen] = React.useState(false);
     const [uploadOpen, setUploadOpen] = React.useState(false);
 
     const update = (patch: Partial<IvrBotConfigData>) =>
@@ -13974,6 +13710,16 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
       onCreateFunction?.(fnData);
     };
 
+    const handleEditFunction = (id: string) => {
+      onEditFunction?.(id);
+      setEditFnOpen(true);
+    };
+
+    const handleEditFunctionSubmit = (fnData: CreateFunctionData) => {
+      onCreateFunction?.(fnData);
+      setEditFnOpen(false);
+    };
+
     return (
       <div ref={ref} className={cn("flex flex-col min-h-screen bg-semantic-bg-primary", className)}>
         {/* Page header */}
@@ -14030,10 +13776,26 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
             <BotBehaviorCard
               data={data}
               onChange={update}
+              onSystemPromptBlur={onSystemPromptBlur}
               sessionVariables={sessionVariables}
+              maxLength={systemPromptMaxLength}
+              disabled={disabled}
+            />
+            <FallbackPromptsCard
+              data={{
+                agentBusyPrompt: data.agentBusyPrompt,
+                noExtensionFoundPrompt: data.noExtensionPrompt,
+              }}
+              onChange={(patch) =>
+                update({
+                  ...(patch.agentBusyPrompt !== undefined && { agentBusyPrompt: patch.agentBusyPrompt }),
+                  ...(patch.noExtensionFoundPrompt !== undefined && { noExtensionPrompt: patch.noExtensionFoundPrompt }),
+                })
+              }
+              onAgentBusyPromptBlur={onAgentBusyPromptBlur}
+              onNoExtensionFoundPromptBlur={onNoExtensionFoundPromptBlur}
               disabled={disabled}
             />
-            <FallbackPromptsAccordion data={data} onChange={update} disabled={disabled} />
           </div>
 
           {/* Right column \u2014 gray panel extending full height */}
@@ -14042,6 +13804,7 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
               files={data.knowledgeBaseFiles}
               onAdd={() => setUploadOpen(true)}
               onDownload={onDownloadKnowledgeFile}
+              infoTooltip={knowledgeBaseInfoTooltip}
               disabled={disabled}
               onDelete={(id) => {
                 update({
@@ -14055,7 +13818,7 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
             <FunctionsCard
               functions={data.functions}
               onAddFunction={() => setCreateFnOpen(true)}
-              onEditFunction={onEditFunction}
+              onEditFunction={handleEditFunction}
               infoTooltip={functionsInfoTooltip}
               disabled={disabled}
               onDeleteFunction={(id) => {
@@ -14093,6 +13856,18 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
           promptMaxLength={functionPromptMaxLength}
         />
 
+        {/* Edit Function Modal */}
+        <CreateFunctionModal
+          open={editFnOpen}
+          onOpenChange={setEditFnOpen}
+          onSubmit={handleEditFunctionSubmit}
+          onTestApi={onTestApi}
+          initialData={functionEditData}
+          isEditing
+          promptMinLength={functionPromptMinLength}
+          promptMaxLength={functionPromptMaxLength}
+        />
+
         {/* File Upload Modal */}
         <FileUploadModal
           open={uploadOpen}
@@ -14134,6 +13909,24 @@ const METHODS_WITH_BODY: HttpMethod[] = ["POST", "PUT", "PATCH"];
 const FUNCTION_NAME_MAX = 30;
 const BODY_MAX = 4000;
 
+// 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_.\\-~]+$/;
+
+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);
 }
@@ -14156,14 +13949,18 @@ const textareaCls = cn(
 );
 
 // \u2500\u2500 KeyValueTable \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
+type RowErrors = { key?: string; value?: string };
+
 function KeyValueTable({
   rows,
   onChange,
   label,
+  getRowErrors,
 }: {
   rows: KeyValuePair[];
   onChange: (rows: KeyValuePair[]) => void;
   label: string;
+  getRowErrors?: (row: KeyValuePair) => RowErrors;
 }) {
   const update = (id: string, patch: Partial<KeyValuePair>) =>
     onChange(rows.map((r) => (r.id === id ? { ...r, ...patch } : r)));
@@ -14173,31 +13970,39 @@ function KeyValueTable({
   const add = () =>
     onChange([...rows, { id: generateId(), key: "", value: "" }]);
 
+  const getErrors = (row: KeyValuePair): RowErrors =>
+    getRowErrors?.(row) ?? {};
+
+  // Reusable delete row action \u2014 same placement and styling as KeyValueRow / knowledge-base-card
+  const deleteRowButtonClass =
+    "text-semantic-text-muted hover:text-semantic-error-primary hover:bg-semantic-error-surface transition-colors shrink-0";
+
   return (
     <div className="flex flex-col gap-1.5">
       <span className="text-xs text-semantic-text-muted">{label}</span>
       <div className="border border-semantic-border-layout rounded overflow-hidden">
-        {/* Column headers \u2014 desktop only */}
+        {/* Column headers \u2014 desktop only; border-r on Key cell defines column boundary */}
         <div className="hidden sm:flex bg-semantic-bg-ui border-b border-semantic-border-layout">
-          <div className="flex-1 px-3 py-2 text-xs font-semibold text-semantic-text-muted border-r border-semantic-border-layout">
+          <div className="flex-1 min-w-0 px-3 py-2 text-xs font-semibold text-semantic-text-muted border-r border-semantic-border-layout">
             Key
           </div>
-          <div className="flex-[2] px-3 py-2 text-xs font-semibold text-semantic-text-muted">
+          <div className="flex-[2] min-w-0 px-3 py-2 text-xs font-semibold text-semantic-text-muted">
             Value
           </div>
-          <div className="w-10 shrink-0" />
+          <div className="w-10 shrink-0" aria-hidden="true" />
         </div>
 
-        {/* Filled rows */}
-        {rows.map((row) => (
-          <div
-            key={row.id}
-            className="border-b border-semantic-border-layout last:border-b-0"
-          >
-            {/* Mobile: label + input pairs stacked */}
-            <div className="flex sm:hidden flex-col">
-              <div className="flex flex-col px-3 pt-2.5 pb-1 gap-0.5">
-                <span className="text-[10px] font-semibold text-semantic-text-muted uppercase tracking-wide">
+        {/* Filled rows \u2014 same flex ratio (flex-1 / flex-2 / w-10) so middle border aligns with header */}
+        {rows.map((row) => {
+          const errors = getErrors(row);
+          return (
+            <div
+              key={row.id}
+              className="border-b border-semantic-border-layout last:border-b-0 flex items-center min-h-0"
+            >
+              {/* Key column \u2014 border-r on column (not input) so it aligns with header */}
+              <div className="flex-1 flex flex-col min-w-0 sm:border-r sm:border-semantic-border-layout">
+                <span className="sm:hidden px-3 pt-2.5 pb-0.5 text-[10px] font-semibold text-semantic-text-muted uppercase tracking-wide">
                   Key
                 </span>
                 <input
@@ -14205,61 +14010,62 @@ function KeyValueTable({
                   value={row.key}
                   onChange={(e) => update(row.id, { key: e.target.value })}
                   placeholder="Key"
-                  className="w-full text-base text-semantic-text-primary placeholder:text-semantic-text-muted bg-transparent outline-none"
+                  maxLength={getRowErrors ? QUERY_PARAM_KEY_MAX : undefined}
+                  className={cn(
+                    "w-full px-3 py-2.5 text-base text-semantic-text-primary placeholder:text-semantic-text-muted bg-semantic-bg-primary outline-none focus:bg-semantic-bg-hover",
+                    errors.key && "border-semantic-error-primary"
+                  )}
+                  aria-invalid={Boolean(errors.key)}
+                  aria-describedby={errors.key ? \`err-key-\${row.id}\` : undefined}
                 />
+                {errors.key && (
+                  <p id={\`err-key-\${row.id}\`} className="m-0 px-3 pt-0.5 text-xs text-semantic-error-primary">
+                    {errors.key}
+                  </p>
+                )}
               </div>
-              <div className="h-px bg-semantic-border-layout mx-3" />
-              <div className="flex items-start gap-2 px-3 py-2.5">
-                <div className="flex flex-col flex-1 gap-0.5">
-                  <span className="text-[10px] font-semibold text-semantic-text-muted uppercase tracking-wide">
-                    Value
-                  </span>
-                  <input
-                    type="text"
-                    value={row.value}
-                    onChange={(e) => update(row.id, { value: e.target.value })}
-                    placeholder="Type {{ to add variables"
-                    className="w-full text-base text-semantic-text-primary placeholder:text-semantic-text-muted bg-transparent outline-none"
-                  />
-                </div>
-                <button
+
+              {/* Value column */}
+              <div className="flex-[2] flex flex-col min-w-0">
+                <span className="sm:hidden px-3 pt-2.5 pb-0.5 text-[10px] font-semibold text-semantic-text-muted uppercase tracking-wide">
+                  Value
+                </span>
+                <input
+                  type="text"
+                  value={row.value}
+                  onChange={(e) => update(row.id, { value: e.target.value })}
+                  placeholder="Type {{ to add variables"
+                  maxLength={getRowErrors ? QUERY_PARAM_VALUE_MAX : undefined}
+                  className={cn(
+                    "w-full px-3 py-2.5 text-base text-semantic-text-primary placeholder:text-semantic-text-muted bg-semantic-bg-primary outline-none focus:bg-semantic-bg-hover",
+                    errors.value && "border-semantic-error-primary"
+                  )}
+                  aria-invalid={Boolean(errors.value)}
+                  aria-describedby={errors.value ? \`err-value-\${row.id}\` : undefined}
+                />
+                {errors.value && (
+                  <p id={\`err-value-\${row.id}\`} className="m-0 px-3 pt-0.5 text-xs text-semantic-error-primary">
+                    {errors.value}
+                  </p>
+                )}
+              </div>
+
+              {/* Action column \u2014 delete aligned with row (same as KeyValueRow / knowledge-base-card) */}
+              <div className="w-10 sm:w-10 flex items-center justify-center shrink-0 self-stretch border-l border-semantic-border-layout sm:border-l-0">
+                <Button
                   type="button"
+                  variant="ghost"
+                  size="icon"
                   onClick={() => remove(row.id)}
-                  className="mt-4 size-8 flex items-center justify-center text-semantic-text-muted hover:text-semantic-error-primary hover:bg-semantic-error-surface rounded transition-colors shrink-0"
+                  className={cn("rounded-md", deleteRowButtonClass)}
                   aria-label="Delete row"
                 >
-                  <Trash2 className="size-3.5" />
-                </button>
+                  <Trash2 className="size-4" />
+                </Button>
               </div>
             </div>
-
-            {/* Desktop: side-by-side */}
-            <div className="hidden sm:flex">
-              <input
-                type="text"
-                value={row.key}
-                onChange={(e) => update(row.id, { key: e.target.value })}
-                placeholder="Key"
-                className="flex-1 px-3 py-2.5 text-base text-semantic-text-primary placeholder:text-semantic-text-muted bg-semantic-bg-primary border-r border-semantic-border-layout outline-none focus:bg-semantic-bg-hover"
-              />
-              <input
-                type="text"
-                value={row.value}
-                onChange={(e) => update(row.id, { value: e.target.value })}
-                placeholder="Type {{ to add variables"
-                className="flex-[2] px-3 py-2.5 text-base text-semantic-text-primary placeholder:text-semantic-text-muted bg-semantic-bg-primary outline-none focus:bg-semantic-bg-hover"
-              />
-              <button
-                type="button"
-                onClick={() => remove(row.id)}
-                className="w-10 flex items-center justify-center text-semantic-text-muted hover:text-semantic-error-primary hover:bg-semantic-error-surface transition-colors shrink-0"
-                aria-label="Delete row"
-              >
-                <Trash2 className="size-3.5" />
-              </button>
-            </div>
-          </div>
-        ))}
+          );
+        })}
 
         {/* Add row \u2014 always visible */}
         <button
@@ -14286,6 +14092,8 @@ export const CreateFunctionModal = React.forwardRef<
       onOpenChange,
       onSubmit,
       onTestApi,
+      initialData,
+      isEditing = false,
       promptMinLength = 100,
       promptMaxLength = 5000,
       initialStep = 1,
@@ -14296,31 +14104,52 @@ export const CreateFunctionModal = React.forwardRef<
   ) => {
     const [step, setStep] = React.useState<1 | 2>(initialStep);
 
-    const [name, setName] = React.useState("");
-    const [prompt, setPrompt] = React.useState("");
+    const [name, setName] = React.useState(initialData?.name ?? "");
+    const [prompt, setPrompt] = React.useState(initialData?.prompt ?? "");
 
-    const [method, setMethod] = React.useState<HttpMethod>("GET");
-    const [url, setUrl] = React.useState("");
+    const [method, setMethod] = React.useState<HttpMethod>(initialData?.method ?? "GET");
+    const [url, setUrl] = React.useState(initialData?.url ?? "");
     const [activeTab, setActiveTab] =
       React.useState<FunctionTabType>(initialTab);
-    const [headers, setHeaders] = React.useState<KeyValuePair[]>([]);
-    const [queryParams, setQueryParams] = React.useState<KeyValuePair[]>([]);
-    const [body, setBody] = React.useState("");
+    const [headers, setHeaders] = React.useState<KeyValuePair[]>(initialData?.headers ?? []);
+    const [queryParams, setQueryParams] = React.useState<KeyValuePair[]>(initialData?.queryParams ?? []);
+    const [body, setBody] = React.useState(initialData?.body ?? "");
     const [apiResponse, setApiResponse] = React.useState("");
     const [isTesting, setIsTesting] = React.useState(false);
+    const [step2SubmitAttempted, setStep2SubmitAttempted] = React.useState(false);
+
+    // Sync form state from initialData each time the modal opens
+    React.useEffect(() => {
+      if (open) {
+        setStep(initialStep);
+        setName(initialData?.name ?? "");
+        setPrompt(initialData?.prompt ?? "");
+        setMethod(initialData?.method ?? "GET");
+        setUrl(initialData?.url ?? "");
+        setActiveTab(initialTab);
+        setHeaders(initialData?.headers ?? []);
+        setQueryParams(initialData?.queryParams ?? []);
+        setBody(initialData?.body ?? "");
+        setApiResponse("");
+        setStep2SubmitAttempted(false);
+      }
+    // Re-run only when modal opens; intentionally exclude deep deps to avoid mid-session resets
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
 
     const reset = React.useCallback(() => {
       setStep(initialStep);
-      setName("");
-      setPrompt("");
-      setMethod("GET");
-      setUrl("");
+      setName(initialData?.name ?? "");
+      setPrompt(initialData?.prompt ?? "");
+      setMethod(initialData?.method ?? "GET");
+      setUrl(initialData?.url ?? "");
       setActiveTab(initialTab);
-      setHeaders([]);
-      setQueryParams([]);
-      setBody("");
+      setHeaders(initialData?.headers ?? []);
+      setQueryParams(initialData?.queryParams ?? []);
+      setBody(initialData?.body ?? "");
       setApiResponse("");
-    }, [initialStep, initialTab]);
+      setStep2SubmitAttempted(false);
+    }, [initialData, initialStep, initialTab]);
 
     const handleClose = React.useCallback(() => {
       reset();
@@ -14340,7 +14169,21 @@ export const CreateFunctionModal = React.forwardRef<
       if (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;
+      }
       const data: CreateFunctionData = {
         name: name.trim(),
         prompt: prompt.trim(),
@@ -14400,7 +14243,7 @@ export const CreateFunctionModal = React.forwardRef<
           {/* \u2500\u2500 Header \u2500\u2500 */}
           <div className="flex items-center justify-between px-4 py-4 border-b border-semantic-border-layout shrink-0 sm:px-6">
             <DialogTitle className="text-base font-semibold text-semantic-text-primary">
-              Create Function
+              {isEditing ? "Edit Function" : "Create Function"}
             </DialogTitle>
             <button
               type="button"
@@ -14558,6 +14401,14 @@ export const CreateFunctionModal = React.forwardRef<
                       rows={queryParams}
                       onChange={setQueryParams}
                       label="Query parameter"
+                      getRowErrors={(row) => {
+                        const hasInput = row.key.trim() !== "" || row.value.trim() !== "";
+                        if (!hasInput && !step2SubmitAttempted) return {};
+                        return {
+                          key: validateQueryParamKey(row.key),
+                          value: validateQueryParamValue(row.value),
+                        };
+                      }}
                     />
                   )}
                   {activeTab === "body" && (
@@ -15020,8 +14871,12 @@ export interface BotBehaviorCardProps {
   data: Partial<BotBehaviorData>;
   /** Callback when any field changes */
   onChange: (patch: Partial<BotBehaviorData>) => void;
+  /** Called when the system prompt textarea loses focus */
+  onSystemPromptBlur?: (value: string) => void;
   /** Session variables shown as insertable chips */
   sessionVariables?: string[];
+  /** Maximum character length for the system prompt textarea (default: 25000) */
+  maxLength?: number;
   /** Disables all fields in the card (view mode) */
   disabled?: boolean;
   /** Additional className for the card */
@@ -15069,6 +14924,7 @@ function StyledTextarea({
   value,
   rows = 3,
   onChange,
+  onBlur,
   disabled,
   className,
 }: {
@@ -15076,6 +14932,7 @@ function StyledTextarea({
   value?: string;
   rows?: number;
   onChange?: (v: string) => void;
+  onBlur?: (v: string) => void;
   disabled?: boolean;
   className?: string;
 }) {
@@ -15084,6 +14941,7 @@ function StyledTextarea({
       value={value ?? ""}
       rows={rows}
       onChange={(e) => onChange?.(e.target.value)}
+      onBlur={(e) => onBlur?.(e.target.value)}
       placeholder={placeholder}
       disabled={disabled}
       className={cn(
@@ -15106,14 +14964,16 @@ const BotBehaviorCard = React.forwardRef<HTMLDivElement, BotBehaviorCardProps>(
     {
       data,
       onChange,
+      onSystemPromptBlur,
       sessionVariables = DEFAULT_SESSION_VARIABLES,
+      maxLength = 25000,
       disabled,
       className,
     },
     ref
   ) => {
     const prompt = data.systemPrompt ?? "";
-    const MAX = 25000;
+    const MAX = maxLength;
 
     const insertVariable = (variable: string) => {
       onChange({ systemPrompt: prompt + variable });
@@ -15133,6 +14993,7 @@ const BotBehaviorCard = React.forwardRef<HTMLDivElement, BotBehaviorCardProps>(
                 onChange={(v) => {
                   if (v.length <= MAX) onChange({ systemPrompt: v });
                 }}
+                onBlur={onSystemPromptBlur}
                 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"
@@ -15178,6 +15039,13 @@ export { BotBehaviorCard };
 import { Download, Trash2, Plus, Info } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import { Badge } from "../badge";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip";
+import { BOT_KNOWLEDGE_STATUS } from "./types";
 import type { KnowledgeBaseFile } 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
@@ -15191,6 +15059,8 @@ export interface KnowledgeBaseCardProps {
   onDownload?: (id: string) => void;
   /** Called when user clicks the delete button on a file */
   onDelete?: (id: string) => void;
+  /** Hover text shown on the info icon next to the "Knowledge Base" title */
+  infoTooltip?: string;
   /** Disables all interactive elements in the card (view mode) */
   disabled?: boolean;
   /** Additional className */
@@ -15199,13 +15069,13 @@ export interface KnowledgeBaseCardProps {
 
 // \u2500\u2500\u2500 Status config \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
 
-type BadgeVariant = "active" | "destructive";
-const STATUS_CONFIG: Record<string, { label: string; variant: BadgeVariant }> =
-  {
-    training: { label: "Training", variant: "active" },
-    trained: { label: "Trained", variant: "active" },
-    error: { label: "Error", variant: "destructive" },
-  };
+type BadgeVariant = "default" | "active" | "destructive";
+const STATUS_CONFIG: Record<BOT_KNOWLEDGE_STATUS, { label: string; variant: BadgeVariant }> = {
+  [BOT_KNOWLEDGE_STATUS.PENDING]:    { label: "Pending",    variant: "default"      },
+  [BOT_KNOWLEDGE_STATUS.READY]:      { label: "Ready",      variant: "active"       },
+  [BOT_KNOWLEDGE_STATUS.PROCESSING]: { label: "Processing", variant: "active"       },
+  [BOT_KNOWLEDGE_STATUS.FAILED]:     { label: "Failed",     variant: "destructive"  },
+};
 
 // \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
 
@@ -15216,6 +15086,7 @@ const KnowledgeBaseCard = React.forwardRef<HTMLDivElement, KnowledgeBaseCardProp
       onAdd,
       onDownload,
       onDelete,
+      infoTooltip,
       disabled,
       className,
     },
@@ -15235,7 +15106,18 @@ const KnowledgeBaseCard = React.forwardRef<HTMLDivElement, KnowledgeBaseCardProp
               <h2 className="m-0 text-base font-semibold text-semantic-text-primary">
                 Knowledge Base
               </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"
@@ -15256,7 +15138,7 @@ const KnowledgeBaseCard = React.forwardRef<HTMLDivElement, KnowledgeBaseCardProp
             ) : (
               <div className="flex flex-col divide-y divide-semantic-border-layout">
                 {files.map((file) => {
-                  const status = STATUS_CONFIG[file.status] ?? STATUS_CONFIG.training;
+                  const status = STATUS_CONFIG[file.status] ?? STATUS_CONFIG[BOT_KNOWLEDGE_STATUS.PENDING];
                   return (
                     <div
                       key={file.id}
@@ -15790,6 +15672,164 @@ const AdvancedSettingsCard = React.forwardRef<HTMLDivElement, AdvancedSettingsCa
 AdvancedSettingsCard.displayName = "AdvancedSettingsCard";
 
 export { AdvancedSettingsCard };
+`, prefix)
+        },
+        {
+          name: "fallback-prompts-card.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { Info } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "../accordion";
+
+// \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
+
+export interface FallbackPromptsData {
+  agentBusyPrompt: string;
+  noExtensionFoundPrompt: string;
+}
+
+export interface FallbackPromptsCardProps {
+  /** Current prompt text values */
+  data: Partial<FallbackPromptsData>;
+  /** Callback when any field changes */
+  onChange: (patch: Partial<FallbackPromptsData>) => void;
+  /** Called when the Agent Busy Prompt textarea loses focus */
+  onAgentBusyPromptBlur?: (value: string) => void;
+  /** Called when the No Extension Found textarea loses focus */
+  onNoExtensionFoundPromptBlur?: (value: string) => void;
+  /** Maximum character length for each prompt field (default: 25000) */
+  maxLength?: number;
+  /** Disables all fields in the card (view mode) */
+  disabled?: boolean;
+  /** Opens the accordion by default (default: false) */
+  defaultOpen?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+// \u2500\u2500\u2500 Internal helpers \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
+
+function PromptField({
+  label,
+  value,
+  placeholder,
+  maxLength,
+  disabled,
+  onChange,
+  onBlur,
+  rows = 2,
+}: {
+  label: string;
+  value: string;
+  placeholder?: string;
+  maxLength: number;
+  disabled?: boolean;
+  onChange: (value: string) => void;
+  onBlur?: (value: string) => void;
+  rows?: number;
+}) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label className="text-sm font-semibold text-semantic-text-secondary tracking-[0.014px]">
+        {label}
+      </label>
+      <textarea
+        value={value}
+        placeholder={placeholder}
+        maxLength={maxLength}
+        disabled={disabled}
+        rows={rows}
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={(e) => onBlur?.(e.target.value)}
+        className={cn(
+          "w-full resize-none rounded border border-semantic-border-layout bg-semantic-bg-primary px-3 py-2.5 text-base text-semantic-text-primary placeholder:text-semantic-text-muted outline-none transition-all",
+          "focus:outline-none focus:border-semantic-border-input-focus/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+          disabled && "cursor-not-allowed opacity-50"
+        )}
+      />
+      <p className="m-0 text-xs text-semantic-text-muted text-right">
+        {value.length}/{maxLength}
+      </p>
+    </div>
+  );
+}
+
+// \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 FallbackPromptsCard = React.forwardRef<
+  HTMLDivElement,
+  FallbackPromptsCardProps
+>(
+  (
+    {
+      data,
+      onChange,
+      onAgentBusyPromptBlur,
+      onNoExtensionFoundPromptBlur,
+      maxLength = 25000,
+      disabled,
+      defaultOpen = false,
+      className,
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "bg-semantic-bg-primary border border-semantic-border-layout rounded-lg overflow-hidden",
+          className
+        )}
+      >
+        <Accordion
+          type="single"
+          defaultValue={defaultOpen ? ["fallback"] : []}
+        >
+          <AccordionItem value="fallback">
+            <AccordionTrigger className="px-4 py-4 border-b border-semantic-border-layout hover:no-underline sm:px-6 sm:py-5">
+              <span className="flex items-center gap-1.5 text-base font-semibold text-semantic-text-primary">
+                Fallback Prompts
+                <Info className="size-3.5 text-semantic-text-muted shrink-0" />
+              </span>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col gap-6 px-4 pt-4 sm:px-6 sm:pt-5">
+                <PromptField
+                  label="Agent Busy Prompt"
+                  value={data.agentBusyPrompt ?? ""}
+                  placeholder="Executives are busy at the moment, we will connect you soon."
+                  maxLength={maxLength}
+                  disabled={disabled}
+                  onChange={(v) => onChange({ agentBusyPrompt: v })}
+                  onBlur={onAgentBusyPromptBlur}
+                  rows={2}
+                />
+                <PromptField
+                  label="No Extension Found"
+                  value={data.noExtensionFoundPrompt ?? ""}
+                  placeholder="Sorry, the requested extension is currently unavailable. Let me help you directly."
+                  maxLength={maxLength}
+                  disabled={disabled}
+                  onChange={(v) => onChange({ noExtensionFoundPrompt: v })}
+                  onBlur={onNoExtensionFoundPromptBlur}
+                  rows={4}
+                />
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    );
+  }
+);
+FallbackPromptsCard.displayName = "FallbackPromptsCard";
+
+export { FallbackPromptsCard };
 `, prefix)
         },
         {
@@ -15800,7 +15840,16 @@ export type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
 
 export type FunctionTabType = "header" | "queryParams" | "body";
 
-export type KnowledgeFileStatus = "training" | "trained" | "error";
+export const BOT_KNOWLEDGE_STATUS = {
+  PENDING: "pending",
+  READY: "ready",
+  PROCESSING: "processing",
+  FAILED: "failed",
+} as const;
+
+export type BOT_KNOWLEDGE_STATUS = typeof BOT_KNOWLEDGE_STATUS[keyof typeof BOT_KNOWLEDGE_STATUS];
+
+export type KnowledgeFileStatus = BOT_KNOWLEDGE_STATUS;
 
 export interface KeyValuePair {
   id: string;
@@ -15844,6 +15893,10 @@ export interface CreateFunctionModalProps {
   onOpenChange: (open: boolean) => void;
   onSubmit?: (data: CreateFunctionData) => void;
   onTestApi?: (step2: CreateFunctionStep2Data) => 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" */
+  isEditing?: boolean;
   /** Minimum character length for the prompt field (default: 100) */
   promptMinLength?: number;
   /** Maximum character length for the prompt field (default: 5000) */
@@ -15895,17 +15948,32 @@ export interface IvrBotConfigProps {
   onDownloadKnowledgeFile?: (fileId: string) => void;
   onDeleteKnowledgeFile?: (fileId: string) => void;
   onCreateFunction?: (data: CreateFunctionData) => void;
-  /** Called when user edits a custom function */
+  /** Called when user edits a custom function. Receives the function id. */
   onEditFunction?: (id: string) => void;
   /** 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;
+  /** Hover text for the info icon in the Knowledge Base card header */
+  knowledgeBaseInfoTooltip?: string;
   /** Minimum character length for the function prompt (default: 100) */
   functionPromptMinLength?: number;
   /** Maximum character length for the function prompt (default: 5000) */
   functionPromptMaxLength?: number;
+  /**
+   * Pre-filled data shown when the edit function modal opens.
+   * Pass when your app fetches full function data after onEditFunction fires.
+   */
+  functionEditData?: Partial<CreateFunctionData>;
+  /** Max character length for the "How It Behaves" system prompt (default: 25000) */
+  systemPromptMaxLength?: number;
+  /** Called when the system prompt textarea loses focus */
+  onSystemPromptBlur?: (value: string) => void;
+  /** Called when the Agent Busy Prompt textarea loses focus */
+  onAgentBusyPromptBlur?: (value: string) => void;
+  /** Called when the No Extension Found textarea loses focus */
+  onNoExtensionFoundPromptBlur?: (value: string) => void;
   onBack?: () => void;
   /** Called when the play icon is clicked on a voice option */
   onPlayVoice?: (voiceValue: string) => void;
@@ -15952,6 +16020,12 @@ export { KnowledgeBaseCard } from "./knowledge-base-card";
 export { FunctionsCard } from "./functions-card";
 export { FrustrationHandoverCard } from "./frustration-handover-card";
 export { AdvancedSettingsCard } from "./advanced-settings-card";
+export { FallbackPromptsCard } from "./fallback-prompts-card";
+export type {
+  FallbackPromptsData,
+  FallbackPromptsCardProps,
+} from "./fallback-prompts-card";
+export { BOT_KNOWLEDGE_STATUS } from "./types";
 export { CreateFunctionModal } from "./create-function-modal";
 export { FileUploadModal } from "../file-upload-modal";
 export { IvrBotConfig } from "./ivr-bot-config";
@@ -16631,159 +16705,6 @@ export interface WalletTopupProps {
           name: "index.ts",
           content: prefixTailwindClasses(`export { WalletTopup } from "./wallet-topup";
 export type { WalletTopupProps, AmountOption } from "./types";
-`, prefix)
-        }
-      ]
-    },
-    "fallback-prompts-panel": {
-      name: "fallback-prompts-panel",
-      description: "An accordion card for configuring IVR bot fallback prompt messages (agent busy and no extension found)",
-      category: "custom",
-      dependencies: [
-        "clsx",
-        "tailwind-merge",
-        "lucide-react"
-      ],
-      internalDependencies: [
-        "accordion",
-        "textarea"
-      ],
-      isMultiFile: true,
-      directory: "fallback-prompts-panel",
-      mainFile: "fallback-prompts-panel.tsx",
-      files: [
-        {
-          name: "fallback-prompts-panel.tsx",
-          content: prefixTailwindClasses(`import * as React from "react";
-import { Info } from "lucide-react";
-import { cn } from "../../../lib/utils";
-import { TextArea } from "../textarea";
-import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-} from "../accordion";
-import type { FallbackPromptsBaseProps } from "./types";
-
-export interface FallbackPromptsPanelProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">,
-    FallbackPromptsBaseProps {}
-
-const AGENT_BUSY_PLACEHOLDER =
-  "Executives are busy at the moment, we will connect you soon.";
-const NO_EXTENSION_PLACEHOLDER =
-  "Sorry, the requested extension is currently unavailable. Let me help you directly.";
-
-const FallbackPromptsPanel = React.forwardRef<
-  HTMLDivElement,
-  FallbackPromptsPanelProps
->(
-  (
-    {
-      data,
-      onChange,
-      tooltipContent = "Configure the messages your bot speaks when it cannot reach an agent or extension.",
-      defaultOpen = true,
-      disabled,
-      className,
-      ...rest
-    },
-    ref
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "bg-semantic-bg-primary border border-semantic-border-layout rounded-lg overflow-hidden",
-          className
-        )}
-        {...rest}
-      >
-        <Accordion
-          type="single"
-          defaultValue={defaultOpen ? ["fallback-prompts"] : []}
-        >
-          <AccordionItem value="fallback-prompts">
-            <AccordionTrigger className="px-4 py-4 border-b border-semantic-border-layout hover:no-underline hover:bg-transparent sm:px-6 sm:py-5">
-              <div className="flex items-center gap-1.5">
-                <span className="text-base font-semibold text-semantic-text-primary">
-                  Fallback Prompts
-                </span>
-                <span
-                  title={tooltipContent}
-                  className="flex items-center text-semantic-text-muted cursor-default"
-                  aria-label={tooltipContent}
-                >
-                  <Info className="size-3.5" />
-                </span>
-              </div>
-            </AccordionTrigger>
-
-            <AccordionContent>
-              <div className="flex flex-col gap-4 px-4 pt-4 sm:gap-6 sm:px-6 sm:pt-6">
-                <TextArea
-                  label="Agent Busy Prompt"
-                  placeholder={AGENT_BUSY_PLACEHOLDER}
-                  value={data.agentBusyPrompt ?? ""}
-                  onChange={(e) =>
-                    onChange({ agentBusyPrompt: e.target.value })
-                  }
-                  rows={3}
-                  disabled={disabled}
-                />
-
-                <TextArea
-                  label="No Extension Found"
-                  placeholder={NO_EXTENSION_PLACEHOLDER}
-                  value={data.noExtensionFound ?? ""}
-                  onChange={(e) =>
-                    onChange({ noExtensionFound: e.target.value })
-                  }
-                  rows={3}
-                  disabled={disabled}
-                />
-              </div>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      </div>
-    );
-  }
-);
-FallbackPromptsPanel.displayName = "FallbackPromptsPanel";
-
-export { FallbackPromptsPanel };
-`, prefix)
-        },
-        {
-          name: "types.ts",
-          content: prefixTailwindClasses(`export interface FallbackPromptsData {
-  /** Text spoken when all agents are busy */
-  agentBusyPrompt: string;
-  /** Text spoken when a dialed extension is not found */
-  noExtensionFound: string;
-}
-
-export interface FallbackPromptsBaseProps {
-  /** Current prompt values */
-  data: Partial<FallbackPromptsData>;
-  /** Callback fired when any prompt value changes */
-  onChange: (patch: Partial<FallbackPromptsData>) => void;
-  /** Tooltip content shown next to the title */
-  tooltipContent?: string;
-  /** Opens the panel expanded by default */
-  defaultOpen?: boolean;
-  /** Disables all textareas */
-  disabled?: boolean;
-}
-`, prefix)
-        },
-        {
-          name: "index.ts",
-          content: prefixTailwindClasses(`export { FallbackPromptsPanel } from "./fallback-prompts-panel";
-export type { FallbackPromptsPanelProps } from "./fallback-prompts-panel";
-export type { FallbackPromptsData, FallbackPromptsBaseProps } from "./types";
 `, prefix)
         }
       ]

package/package.json

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