myoperator-ui 0.0.206 → 0.0.207

package/dist/index.js

@@ -13041,9 +13041,9 @@ export type { BotListProps, Bot, BotType } from "./types";
         }
       ]
     },
-    "ivr-bot": {
-      name: "ivr-bot",
-      description: "IVR/Voicebot configuration page with Create Function modal (2-step wizard)",
+    "file-upload-modal": {
+      name: "file-upload-modal",
+      description: "A reusable file upload modal with drag-and-drop, progress tracking, and error handling",
       category: "custom",
       dependencies: [
         "clsx",
@@ -13051,1250 +13051,1333 @@ export type { BotListProps, Bot, BotType } from "./types";
         "lucide-react"
       ],
       internalDependencies: [
-        "button",
-        "badge",
-        "switch",
-        "accordion",
         "dialog",
-        "select",
-        "creatable-select",
-        "creatable-multi-select",
-        "page-header",
-        "tag"
+        "button"
       ],
       isMultiFile: true,
-      directory: "ivr-bot",
-      mainFile: "ivr-bot-config.tsx",
+      directory: "file-upload-modal",
+      mainFile: "file-upload-modal.tsx",
       files: [
         {
-          name: "ivr-bot-config.tsx",
+          name: "file-upload-modal.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
-import { Info } from "lucide-react";
+import { Download, Trash2, X, XCircle } 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";
-import { FunctionsCard } from "./functions-card";
-import { FrustrationHandoverCard } from "./frustration-handover-card";
-import { AdvancedSettingsCard } from "./advanced-settings-card";
-import { CreateFunctionModal } from "./create-function-modal";
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+} from "../dialog";
 import type {
-  IvrBotConfigProps,
-  IvrBotConfigData,
-  CreateFunctionData,
+  FileUploadModalProps,
+  UploadItem,
+  UploadStatus,
 } from "./types";
 
-// \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,
-  className,
-}: {
-  placeholder?: string;
-  value?: string;
-  rows?: number;
-  onChange?: (v: string) => void;
-  className?: string;
-}) {
-  return (
-    <textarea
-      value={value ?? ""}
-      rows={rows}
-      onChange={(e) => onChange?.(e.target.value)}
-      placeholder={placeholder}
-      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)]",
-        className
-      )}
-    />
-  );
-}
+const DEFAULT_ACCEPTED = ".doc,.docx,.pdf,.csv,.xls,.xlsx,.txt";
+const DEFAULT_FORMAT_DESC =
+  "Max file size 100 MB (Supported Format: .docs, .pdf, .csv, .xls, .xlxs, .txt)";
 
-// \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>
-  );
+function generateId() {
+  return Math.random().toString(36).slice(2, 9);
 }
 
-// \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,
-}: {
-  data: Partial<IvrBotConfigData>;
-  onChange: (patch: Partial<IvrBotConfigData>) => void;
-}) {
-  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."
-                />
-              </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."
-                />
-              </Field>
-            </div>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </div>
+function useFakeProgress() {
+  const intervalsRef = React.useRef<
+    Record<string, ReturnType<typeof setInterval>>
+  >({});
+
+  const start = React.useCallback(
+    (
+      id: string,
+      setItems: React.Dispatch<React.SetStateAction<UploadItem[]>>
+    ) => {
+      const interval = setInterval(() => {
+        setItems((prev) => {
+          let done = false;
+          const updated = prev.map((item) => {
+            if (item.id !== id || item.status !== "uploading") return item;
+            const next = Math.min(item.progress + 15, 100);
+            if (next === 100) done = true;
+            return {
+              ...item,
+              progress: next,
+              status: (next === 100 ? "done" : "uploading") as UploadStatus,
+            };
+          });
+          if (done) {
+            clearInterval(interval);
+            delete intervalsRef.current[id];
+          }
+          return updated;
+        });
+      }, 500);
+      intervalsRef.current[id] = interval;
+    },
+    []
   );
-}
 
-// \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 = {
-  botName: "",
-  primaryRole: "",
-  tone: [],
-  voice: "",
-  language: "",
-  systemPrompt: "",
-  agentBusyPrompt: "",
-  noExtensionPrompt: "",
-  knowledgeBaseFiles: [],
-  functions: [
-    { id: "fn-1", name: "transfer_to_extension (extension_number)", isBuiltIn: true },
-    { id: "fn-2", name: "end_call()", isBuiltIn: true },
-  ],
-  frustrationHandoverEnabled: false,
-  escalationDepartment: "",
-  silenceTimeout: 15,
-  callEndThreshold: 3,
-  interruptionHandling: true,
-};
+  const cancel = React.useCallback((id: string) => {
+    clearInterval(intervalsRef.current[id]);
+    delete intervalsRef.current[id];
+  }, []);
 
-// \u2500\u2500\u2500 Main IvrBotConfig \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
-  (
-    {
-      botTitle = "IVR bot",
-      botType = "Voicebot",
-      lastUpdatedAt,
-      initialData,
-      onSaveAsDraft,
-      onPublish,
-      onSaveKnowledgeFiles,
-      onUploadKnowledgeFile,
-      onSampleFileDownload,
-      onDownloadKnowledgeFile,
-      onDeleteKnowledgeFile,
-      onCreateFunction,
-      onEditFunction,
-      onDeleteFunction,
-      onTestApi,
-      onBack,
-      onPlayVoice,
-      onPauseVoice,
-      playingVoice,
-      roleOptions,
-      toneOptions,
-      voiceOptions,
-      languageOptions,
-      sessionVariables,
-      escalationDepartmentOptions,
-      silenceTimeoutMin,
-      silenceTimeoutMax,
-      callEndThresholdMin,
-      callEndThresholdMax,
-      className,
-    },
-    ref
-  ) => {
-    const [data, setData] = React.useState<IvrBotConfigData>({
-      ...DEFAULT_DATA,
-      ...initialData,
-    });
-    const [createFnOpen, setCreateFnOpen] = React.useState(false);
+  const cancelAll = React.useCallback(() => {
+    Object.values(intervalsRef.current).forEach(clearInterval);
+    intervalsRef.current = {};
+  }, []);
 
-    const update = (patch: Partial<IvrBotConfigData>) =>
-      setData((prev) => ({ ...prev, ...patch }));
+  return { start, cancel, cancelAll };
+}
 
-    const handleCreateFunction = (fnData: CreateFunctionData) => {
-      const newFn = { id: \`fn-\${Date.now()}\`, name: fnData.name };
-      update({ functions: [...data.functions, newFn] });
-      onCreateFunction?.(fnData);
-    };
+function getTimeRemaining(progress: number) {
+  const steps = Math.ceil((100 - progress) / 15);
+  const secs = steps * 3;
+  return secs > 60
+    ? \`\${Math.ceil(secs / 60)} minutes remaining\`
+    : \`\${secs} seconds remaining\`;
+}
 
-    return (
-      <div ref={ref} className={cn("flex flex-col min-h-screen bg-semantic-bg-primary", className)}>
-        {/* Page header */}
-        <PageHeader
-          showBackButton
-          onBackClick={onBack}
-          title={botTitle}
-          badge={
-            <Badge variant="outline" className="text-xs font-normal">
-              {botType}
-            </Badge>
-          }
-          actions={
-            <>
-              {lastUpdatedAt && (
-                <span className="hidden sm:inline text-sm text-semantic-text-muted mr-1">
-                  Last updated at: {lastUpdatedAt}
-                </span>
-              )}
-              <Button
-                variant="outline"
-                onClick={() => onSaveAsDraft?.(data)}
-              >
-                Save as Draft
-              </Button>
-              <Button
-                variant="default"
-                onClick={() => onPublish?.(data)}
-              >
-                Publish Bot
-              </Button>
-            </>
-          }
-        />
+const FileUploadModal = React.forwardRef<HTMLDivElement, FileUploadModalProps>(
+  (
+    {
+      open,
+      onOpenChange,
+      onUpload,
+      onSave,
+      onCancel,
+      onSampleDownload,
+      sampleDownloadLabel = "Download sample file",
+      showSampleDownload,
+      acceptedFormats = DEFAULT_ACCEPTED,
+      formatDescription = DEFAULT_FORMAT_DESC,
+      maxFileSizeMB = 100,
+      multiple = true,
+      title = "File Upload",
+      uploadButtonLabel = "Upload from device",
+      dropDescription = "or drag and drop file here",
+      saveLabel = "Save",
+      cancelLabel = "Cancel",
+      saving = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [items, setItems] = React.useState<UploadItem[]>([]);
+    const fileInputRef = React.useRef<HTMLInputElement>(null);
+    const fakeProgress = useFakeProgress();
 
-        {/* Body \u2014 two-column layout: left white, right gray panel */}
-        <div className="flex flex-col lg:flex-row lg:flex-1 min-h-0">
-          {/* Left column \u2014 white background */}
-          <div className="flex flex-col gap-6 px-4 py-4 sm:px-6 sm:py-6 lg:flex-[3] min-w-0 lg:max-w-[720px]">
-            <BotIdentityCard
-              data={data}
-              onChange={update}
-              onPlayVoice={onPlayVoice}
-              onPauseVoice={onPauseVoice}
-              playingVoice={playingVoice}
-              roleOptions={roleOptions}
-              toneOptions={toneOptions}
-              voiceOptions={voiceOptions}
-              languageOptions={languageOptions}
-            />
-            <BotBehaviorCard
-              data={data}
-              onChange={update}
-              sessionVariables={sessionVariables}
-            />
-            <FallbackPromptsAccordion data={data} onChange={update} />
-          </div>
+    const shouldShowSampleDownload =
+      showSampleDownload ?? !!onSampleDownload;
 
-          {/* Right column \u2014 gray panel extending full height */}
-          <div className="flex flex-col gap-6 px-4 py-4 sm:px-6 sm:py-6 lg:flex-[2] min-w-0 bg-semantic-bg-ui border-l border-semantic-border-layout">
-            <KnowledgeBaseCard
-              files={data.knowledgeBaseFiles}
-              onSaveFiles={onSaveKnowledgeFiles}
-              onUploadFile={onUploadKnowledgeFile}
-              onSampleDownload={onSampleFileDownload}
-              onDownload={onDownloadKnowledgeFile}
-              onDelete={(id) => {
-                update({
-                  knowledgeBaseFiles: data.knowledgeBaseFiles.filter(
-                    (f) => f.id !== id
-                  ),
-                });
-                onDeleteKnowledgeFile?.(id);
-              }}
-            />
-            <FunctionsCard
-              functions={data.functions}
-              onAddFunction={() => setCreateFnOpen(true)}
-              onEditFunction={onEditFunction}
-              onDeleteFunction={(id) => {
-                update({
-                  functions: data.functions.filter((f) => f.id !== id),
-                });
-                onDeleteFunction?.(id);
-              }}
-            />
-            <FrustrationHandoverCard
-              data={data}
-              onChange={update}
-              departmentOptions={escalationDepartmentOptions}
-            />
-            <AdvancedSettingsCard
-              data={data}
-              onChange={update}
-              silenceTimeoutMin={silenceTimeoutMin}
-              silenceTimeoutMax={silenceTimeoutMax}
-              callEndThresholdMin={callEndThresholdMin}
-              callEndThresholdMax={callEndThresholdMax}
-            />
-          </div>
-        </div>
+    const addFiles = React.useCallback(
+      (fileList: FileList | null) => {
+        if (!fileList) return;
 
-        {/* Create Function Modal */}
-        <CreateFunctionModal
-          open={createFnOpen}
-          onOpenChange={setCreateFnOpen}
-          onSubmit={handleCreateFunction}
-          onTestApi={onTestApi}
-        />
-      </div>
-    );
-  }
-);
+        Array.from(fileList).forEach((file) => {
+          if (file.size > maxFileSizeMB * 1024 * 1024) {
+            const id = generateId();
+            setItems((prev) => [
+              ...prev,
+              {
+                id,
+                file,
+                progress: 0,
+                status: "error",
+                errorMessage: \`File exceeds \${maxFileSizeMB} MB limit\`,
+              },
+            ]);
+            return;
+          }
 
-IvrBotConfig.displayName = "IvrBotConfig";
-`, prefix)
-        },
-        {
-          name: "create-function-modal.tsx",
-          content: prefixTailwindClasses(`import * as React from "react";
-import { Trash2, ChevronDown, X, Plus } from "lucide-react";
-import { cn } from "../../../lib/utils";
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-} from "../dialog";
-import { Button } from "../button";
-import type {
-  CreateFunctionModalProps,
-  CreateFunctionData,
-  CreateFunctionStep2Data,
-  FunctionTabType,
-  HttpMethod,
-  KeyValuePair,
-} from "./types";
+          const id = generateId();
+          setItems((prev) => [
+            ...prev,
+            { id, file, progress: 0, status: "uploading" },
+          ]);
 
-const HTTP_METHODS: HttpMethod[] = ["GET", "POST", "PUT", "DELETE", "PATCH"];
-const FUNCTION_NAME_MAX = 30;
-const BODY_MAX = 4000;
+          if (onUpload) {
+            onUpload(file, {
+              onProgress: (progress) => {
+                setItems((prev) =>
+                  prev.map((item) =>
+                    item.id === id
+                      ? {
+                          ...item,
+                          progress: Math.min(progress, 100),
+                          status:
+                            progress >= 100
+                              ? ("done" as UploadStatus)
+                              : ("uploading" as UploadStatus),
+                        }
+                      : item
+                  )
+                );
+              },
+              onError: (message) => {
+                setItems((prev) =>
+                  prev.map((item) =>
+                    item.id === id
+                      ? { ...item, status: "error" as UploadStatus, errorMessage: message }
+                      : item
+                  )
+                );
+              },
+            }).then(() => {
+              setItems((prev) =>
+                prev.map((item) =>
+                  item.id === id && item.status === "uploading"
+                    ? { ...item, progress: 100, status: "done" as UploadStatus }
+                    : item
+                )
+              );
+            }).catch((err) => {
+              setItems((prev) =>
+                prev.map((item) =>
+                  item.id === id && item.status !== "error"
+                    ? {
+                        ...item,
+                        status: "error" as UploadStatus,
+                        errorMessage:
+                          err instanceof Error
+                            ? err.message
+                            : "Upload failed",
+                      }
+                    : item
+                )
+              );
+            });
+          } else {
+            fakeProgress.start(id, setItems);
+          }
+        });
+      },
+      [onUpload, maxFileSizeMB, fakeProgress]
+    );
 
-function generateId() {
-  return Math.random().toString(36).slice(2, 9);
-}
+    const removeItem = (id: string) => {
+      fakeProgress.cancel(id);
+      setItems((prev) => prev.filter((i) => i.id !== id));
+    };
 
-// \u2500\u2500 Shared input/textarea styles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 inputCls = 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)]"
-);
-
-const textareaCls = 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)]"
-);
-
-// \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
-function KeyValueTable({
-  rows,
-  onChange,
-  label,
-}: {
-  rows: KeyValuePair[];
-  onChange: (rows: KeyValuePair[]) => void;
-  label: string;
-}) {
-  const update = (id: string, patch: Partial<KeyValuePair>) =>
-    onChange(rows.map((r) => (r.id === id ? { ...r, ...patch } : r)));
-
-  const remove = (id: string) => onChange(rows.filter((r) => r.id !== id));
-
-  const add = () =>
-    onChange([...rows, { id: generateId(), key: "", value: "" }]);
-
-  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 */}
-        <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">
-            Key
-          </div>
-          <div className="flex-[2] px-3 py-2 text-xs font-semibold text-semantic-text-muted">
-            Value
-          </div>
-          <div className="w-10 shrink-0" />
-        </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">
-                  Key
-                </span>
-                <input
-                  type="text"
-                  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"
-                />
-              </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
-                  type="button"
-                  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"
-                  aria-label="Delete row"
-                >
-                  <Trash2 className="size-3.5" />
-                </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
-          type="button"
-          onClick={add}
-          className="w-full flex items-center gap-2 px-3 py-2.5 text-sm text-semantic-text-muted hover:bg-semantic-bg-hover transition-colors"
-        >
-          <Plus className="size-3.5 shrink-0" />
-          <span>Add row</span>
-        </button>
-      </div>
-    </div>
-  );
-}
-
-// \u2500\u2500 Modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 const CreateFunctionModal = React.forwardRef<
-  HTMLDivElement,
-  CreateFunctionModalProps
->(
-  (
-    {
-      open,
-      onOpenChange,
-      onSubmit,
-      onTestApi,
-      initialStep = 1,
-      initialTab = "header",
-      className,
-    },
-    ref
-  ) => {
-    const [step, setStep] = React.useState<1 | 2>(initialStep);
-
-    const [name, setName] = React.useState("");
-    const [prompt, setPrompt] = React.useState("");
-
-    const [method, setMethod] = React.useState<HttpMethod>("GET");
-    const [url, setUrl] = React.useState("");
-    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 [apiResponse, setApiResponse] = React.useState("");
-    const [isTesting, setIsTesting] = React.useState(false);
-
-    const reset = React.useCallback(() => {
-      setStep(initialStep);
-      setName("");
-      setPrompt("");
-      setMethod("GET");
-      setUrl("");
-      setActiveTab(initialTab);
-      setHeaders([]);
-      setQueryParams([]);
-      setBody("");
-      setApiResponse("");
-    }, [initialStep, initialTab]);
-
-    const handleClose = React.useCallback(() => {
-      reset();
+    const handleClose = () => {
+      fakeProgress.cancelAll();
+      setItems([]);
+      onCancel?.();
       onOpenChange(false);
-    }, [reset, onOpenChange]);
-
-    const handleNext = () => {
-      if (name.trim() && prompt.trim()) setStep(2);
-    };
-
-    const handleSubmit = () => {
-      const data: CreateFunctionData = {
-        name: name.trim(),
-        prompt: prompt.trim(),
-        method,
-        url: url.trim(),
-        headers,
-        queryParams,
-        body,
-      };
-      onSubmit?.(data);
-      handleClose();
     };
 
-    const handleTestApi = async () => {
-      if (!onTestApi) return;
-      setIsTesting(true);
-      try {
-        const step2: CreateFunctionStep2Data = {
-          method,
-          url,
-          headers,
-          queryParams,
-          body,
-        };
-        const response = await onTestApi(step2);
-        setApiResponse(response);
-      } finally {
-        setIsTesting(false);
-      }
+    const handleSave = () => {
+      const completedFiles = items
+        .filter((i) => i.status === "done")
+        .map((i) => i.file);
+      onSave?.(completedFiles);
+      fakeProgress.cancelAll();
+      setItems([]);
+      onOpenChange(false);
     };
 
-    const isStep1Valid =
-      name.trim().length > 0 && prompt.trim().length > 0;
-
-    const tabLabels: Record<FunctionTabType, string> = {
-      header: \`Header (\${headers.length})\`,
-      queryParams: \`Query params (\${queryParams.length})\`,
-      body: "Body",
-    };
+    const hasCompleted = items.some((i) => i.status === "done");
+    const hasUploading = items.some((i) => i.status === "uploading");
 
     return (
       <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogContent
           ref={ref}
-          size="lg"
+          size="default"
           hideCloseButton
           className={cn(
-            "flex flex-col gap-0 p-0 w-[calc(100vw-2rem)] sm:w-full",
-            "max-h-[calc(100svh-2rem)] overflow-hidden",
+            "max-w-[min(660px,calc(100vw-2rem))] rounded-xl p-4 gap-0 sm:p-6",
             className
           )}
+          {...props}
         >
-          {/* \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
+          {/* Header */}
+          <div className="flex items-center justify-between mb-6">
+            <DialogTitle className="m-0 text-base font-semibold text-semantic-text-primary">
+              {title}
             </DialogTitle>
+            <DialogDescription className="sr-only">
+              Upload files by clicking the button or dragging and dropping.
+            </DialogDescription>
             <button
               type="button"
               onClick={handleClose}
-              className="rounded p-1.5 text-semantic-text-muted hover:text-semantic-text-primary hover:bg-semantic-bg-hover transition-colors"
-              aria-label="Close"
+              className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-semantic-text-primary"
+              aria-label="Close dialog"
             >
-              <X className="size-4" />
+              <X className="h-4 w-4" />
             </button>
           </div>
 
-          {/* \u2500\u2500 Scrollable body \u2500\u2500 */}
-          <div className="flex-1 overflow-y-auto min-h-0 px-4 py-5 sm:px-6">
-            {/* \u2500 Step 1 \u2500 */}
-            {step === 1 && (
-              <div className="flex flex-col gap-5">
-                <div className="flex flex-col gap-1.5">
-                  <label
-                    htmlFor="fn-name"
-                    className="text-sm font-semibold text-semantic-text-primary"
-                  >
-                    Function Name{" "}
-                    <span className="text-semantic-error-primary">*</span>
-                  </label>
-                  <div className={cn("relative")}>
-                    <input
-                      id="fn-name"
-                      type="text"
-                      value={name}
-                      maxLength={FUNCTION_NAME_MAX}
-                      onChange={(e) => setName(e.target.value)}
-                      placeholder="Enter name of the function"
-                      className={cn(inputCls, "pr-16")}
-                    />
-                    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs italic text-semantic-text-muted pointer-events-none">
-                      {name.length}/{FUNCTION_NAME_MAX}
-                    </span>
-                  </div>
-                </div>
-
-                <div className="flex flex-col gap-1.5">
-                  <label
-                    htmlFor="fn-prompt"
-                    className="text-sm font-semibold text-semantic-text-primary"
-                  >
-                    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>
-              </div>
+          {/* Body */}
+          <div className="flex flex-col gap-4 items-end w-full">
+            {shouldShowSampleDownload && (
+              <button
+                type="button"
+                onClick={onSampleDownload}
+                className="flex items-center gap-1.5 text-sm font-semibold text-semantic-text-link hover:opacity-80 transition-opacity"
+              >
+                <Download className="size-3.5" />
+                {sampleDownloadLabel}
+              </button>
             )}
 
-            {/* \u2500 Step 2 \u2500 */}
-            {step === 2 && (
-              <div className="flex flex-col gap-5">
-                {/* API URL \u2014 always a single combined row */}
-                <div className="flex flex-col gap-1.5">
-                  <span className="text-xs text-semantic-text-muted tracking-[0.048px]">
-                    API URL
-                  </span>
-                  <div
-                    className={cn(
-                      "flex h-[42px] rounded border border-semantic-border-input overflow-hidden bg-semantic-bg-primary",
-                      "hover:border-semantic-border-input-focus",
-                      "focus-within:border-semantic-border-input-focus focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
-                      "transition-shadow"
-                    )}
-                  >
-                    {/* Method selector */}
-                    <div className="relative shrink-0 border-r border-semantic-border-layout">
-                      <select
-                        value={method}
-                        onChange={(e) =>
-                          setMethod(e.target.value as HttpMethod)
-                        }
-                        className="h-full w-[80px] pl-3 pr-7 text-base text-semantic-text-primary bg-transparent outline-none cursor-pointer appearance-none sm:w-[100px]"
-                        aria-label="HTTP method"
-                      >
-                        {HTTP_METHODS.map((m) => (
-                          <option key={m} value={m}>
-                            {m}
-                          </option>
-                        ))}
-                      </select>
-                      <ChevronDown
-                        className="absolute right-2 top-1/2 -translate-y-1/2 size-3 text-semantic-text-muted pointer-events-none"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    {/* URL input */}
-                    <input
-                      type="text"
-                      value={url}
-                      onChange={(e) => setUrl(e.target.value)}
-                      placeholder="Enter URL or Type {{ to add variables"
-                      className="flex-1 min-w-0 px-3 text-base text-semantic-text-primary placeholder:text-semantic-text-muted bg-transparent outline-none"
-                    />
-                  </div>
+            {/* Drop zone */}
+            <div
+              className="w-full border border-dashed border-semantic-border-layout bg-semantic-bg-ui rounded p-4"
+              onDrop={(e) => {
+                e.preventDefault();
+                addFiles(e.dataTransfer.files);
+              }}
+              onDragOver={(e) => e.preventDefault()}
+            >
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
+                <button
+                  type="button"
+                  onClick={() => fileInputRef.current?.click()}
+                  className="h-[42px] px-4 rounded border border-semantic-border-layout bg-semantic-bg-primary text-base font-semibold text-semantic-text-secondary shrink-0 hover:bg-semantic-bg-hover transition-colors w-full sm:w-auto"
+                >
+                  {uploadButtonLabel}
+                </button>
+                <div className="flex flex-col gap-1">
+                  <p className="m-0 text-sm text-semantic-text-secondary tracking-[0.035px]">
+                    {dropDescription}
+                  </p>
+                  <p className="m-0 text-xs text-semantic-text-muted tracking-[0.048px]">
+                    {formatDescription}
+                  </p>
                 </div>
+              </div>
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple={multiple}
+                accept={acceptedFormats}
+                className="hidden"
+                onChange={(e) => {
+                  addFiles(e.target.files);
+                  e.target.value = "";
+                }}
+              />
+            </div>
 
-                {/* Tabs \u2014 scrollable, no visible scrollbar */}
-                <div className="flex flex-col gap-4">
+            {/* Upload item list */}
+            {items.length > 0 && (
+              <div className="flex flex-col gap-2.5 w-full">
+                {items.map((item) => (
                   <div
-                    className={cn(
-                      "flex border-b border-semantic-border-layout",
-                      "overflow-x-auto",
-                      "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
-                    )}
+                    key={item.id}
+                    className="bg-semantic-bg-primary border border-semantic-border-layout rounded px-4 py-3 flex flex-col gap-2"
                   >
-                    {(
-                      ["header", "queryParams", "body"] as FunctionTabType[]
-                    ).map((tab) => (
+                    <div className="flex items-start gap-3">
+                      <div className="flex flex-col gap-0.5 flex-1 min-w-0">
+                        <p className="m-0 text-sm text-semantic-text-primary tracking-[0.035px] truncate">
+                          {item.status === "uploading"
+                            ? "Uploading..."
+                            : item.file.name}
+                        </p>
+                        {item.status === "uploading" && (
+                          <p className="m-0 text-xs text-semantic-text-muted tracking-[0.048px]">
+                            {item.progress}%&nbsp;&bull;&nbsp;
+                            {getTimeRemaining(item.progress)}
+                          </p>
+                        )}
+                        {item.status === "error" && (
+                          <p className="m-0 text-xs text-semantic-error-primary tracking-[0.048px]">
+                            {item.errorMessage ??
+                              "Something went wrong, Upload Failed."}
+                          </p>
+                        )}
+                      </div>
                       <button
-                        key={tab}
                         type="button"
-                        onClick={() => setActiveTab(tab)}
+                        onClick={() => removeItem(item.id)}
+                        aria-label={
+                          item.status === "uploading"
+                            ? "Cancel upload"
+                            : "Remove file"
+                        }
                         className={cn(
-                          "px-3 py-2 text-sm font-semibold transition-colors whitespace-nowrap shrink-0",
-                          activeTab === tab
-                            ? "text-semantic-text-secondary border-b-2 border-semantic-text-secondary -mb-px"
-                            : "text-semantic-text-muted hover:text-semantic-text-primary"
+                          "shrink-0 mt-0.5 transition-colors",
+                          item.status === "uploading"
+                            ? "text-semantic-error-primary"
+                            : "text-semantic-text-muted hover:text-semantic-error-primary"
                         )}
                       >
-                        {tabLabels[tab]}
+                        {item.status === "uploading" ? (
+                          <XCircle className="size-5" />
+                        ) : (
+                          <Trash2 className="size-5" />
+                        )}
                       </button>
-                    ))}
-                  </div>
-
-                  {activeTab === "header" && (
-                    <KeyValueTable
-                      rows={headers}
-                      onChange={setHeaders}
-                      label="Header"
-                    />
-                  )}
-                  {activeTab === "queryParams" && (
-                    <KeyValueTable
-                      rows={queryParams}
-                      onChange={setQueryParams}
-                      label="Query parameter"
-                    />
-                  )}
-                  {activeTab === "body" && (
-                    <div className="flex flex-col gap-1.5">
-                      <span className="text-xs text-semantic-text-muted">
-                        Body
-                      </span>
-                      <div className={cn("relative")}>
-                        <textarea
-                          value={body}
-                          maxLength={BODY_MAX}
-                          onChange={(e) => setBody(e.target.value)}
-                          placeholder="Enter request body (JSON, XML etc). Type {{ to add variables"
-                          rows={6}
-                          className={cn(textareaCls, "pb-7")}
+                    </div>
+                    {item.status === "uploading" && (
+                      <div className="h-2 bg-semantic-bg-ui rounded-full overflow-hidden">
+                        <div
+                          className="h-full bg-semantic-success-primary rounded-full transition-all duration-300"
+                          style={{ width: \`\${item.progress}%\` }}
                         />
-                        <span className="absolute bottom-2 right-3 text-xs italic text-semantic-text-muted pointer-events-none">
-                          {body.length}/{BODY_MAX}
-                        </span>
                       </div>
-                    </div>
-                  )}
-                </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="flex flex-col-reverse gap-3 mt-4 sm:mt-6 sm:flex-row sm:justify-end sm:gap-2">
+            <Button
+              variant="outline"
+              className="w-full sm:w-auto"
+              onClick={handleClose}
+            >
+              {cancelLabel}
+            </Button>
+            <Button
+              className="w-full sm:w-auto"
+              onClick={handleSave}
+              disabled={!hasCompleted || hasUploading}
+              loading={saving}
+            >
+              {saveLabel}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+);
+
+FileUploadModal.displayName = "FileUploadModal";
+
+export { FileUploadModal };
+`, prefix)
+        },
+        {
+          name: "types.ts",
+          content: prefixTailwindClasses(`export type UploadStatus = "pending" | "uploading" | "done" | "error";
+
+export interface UploadItem {
+  id: string;
+  file: File;
+  progress: number;
+  status: UploadStatus;
+  errorMessage?: string;
+}
+
+export interface UploadProgressHandlers {
+  onProgress: (progress: number) => void;
+  onError: (message: string) => void;
+}
+
+export interface FileUploadModalProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSave"> {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Called for each file to handle the actual upload. If not provided, uses fake progress (demo mode). */
+  onUpload?: (file: File, handlers: UploadProgressHandlers) => Promise<void>;
+  onSave?: (files: File[]) => void;
+  onCancel?: () => void;
+  onSampleDownload?: () => void;
+  sampleDownloadLabel?: string;
+  showSampleDownload?: boolean;
+  acceptedFormats?: string;
+  formatDescription?: string;
+  maxFileSizeMB?: number;
+  multiple?: boolean;
+  title?: string;
+  uploadButtonLabel?: string;
+  dropDescription?: string;
+  saveLabel?: string;
+  cancelLabel?: string;
+  saving?: boolean;
+}
+`, prefix)
+        },
+        {
+          name: "index.ts",
+          content: prefixTailwindClasses(`export { FileUploadModal } from "./file-upload-modal";
+export type {
+  FileUploadModalProps,
+  UploadProgressHandlers,
+  UploadItem,
+  UploadStatus,
+} from "./types";
+`, prefix)
+        }
+      ]
+    },
+    "ivr-bot": {
+      name: "ivr-bot",
+      description: "IVR/Voicebot configuration page with Create Function modal (2-step wizard)",
+      category: "custom",
+      dependencies: [
+        "clsx",
+        "tailwind-merge",
+        "lucide-react"
+      ],
+      internalDependencies: [
+        "button",
+        "badge",
+        "switch",
+        "accordion",
+        "dialog",
+        "select",
+        "creatable-select",
+        "creatable-multi-select",
+        "page-header",
+        "tag",
+        "file-upload-modal"
+      ],
+      isMultiFile: true,
+      directory: "ivr-bot",
+      mainFile: "ivr-bot-config.tsx",
+      files: [
+        {
+          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";
+import { FunctionsCard } from "./functions-card";
+import { FrustrationHandoverCard } from "./frustration-handover-card";
+import { AdvancedSettingsCard } from "./advanced-settings-card";
+import { CreateFunctionModal } from "./create-function-modal";
+import { FileUploadModal } from "../file-upload-modal";
+import type {
+  IvrBotConfigProps,
+  IvrBotConfigData,
+  CreateFunctionData,
+} from "./types";
+
+// \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,
+  className,
+}: {
+  placeholder?: string;
+  value?: string;
+  rows?: number;
+  onChange?: (v: string) => void;
+  className?: string;
+}) {
+  return (
+    <textarea
+      value={value ?? ""}
+      rows={rows}
+      onChange={(e) => onChange?.(e.target.value)}
+      placeholder={placeholder}
+      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)]",
+        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,
+}: {
+  data: Partial<IvrBotConfigData>;
+  onChange: (patch: Partial<IvrBotConfigData>) => void;
+}) {
+  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."
+                />
+              </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."
+                />
+              </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 = {
+  botName: "",
+  primaryRole: "",
+  tone: [],
+  voice: "",
+  language: "",
+  systemPrompt: "",
+  agentBusyPrompt: "",
+  noExtensionPrompt: "",
+  knowledgeBaseFiles: [],
+  functions: [
+    { id: "fn-1", name: "transfer_to_extension (extension_number)", isBuiltIn: true },
+    { id: "fn-2", name: "end_call()", isBuiltIn: true },
+  ],
+  frustrationHandoverEnabled: false,
+  escalationDepartment: "",
+  silenceTimeout: 15,
+  callEndThreshold: 3,
+  interruptionHandling: true,
+};
+
+// \u2500\u2500\u2500 Main IvrBotConfig \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
+  (
+    {
+      botTitle = "IVR bot",
+      botType = "Voicebot",
+      lastUpdatedAt,
+      initialData,
+      onSaveAsDraft,
+      onPublish,
+      onSaveKnowledgeFiles,
+      onUploadKnowledgeFile,
+      onSampleFileDownload,
+      onDownloadKnowledgeFile,
+      onDeleteKnowledgeFile,
+      onCreateFunction,
+      onEditFunction,
+      onDeleteFunction,
+      onTestApi,
+      onBack,
+      onPlayVoice,
+      onPauseVoice,
+      playingVoice,
+      roleOptions,
+      toneOptions,
+      voiceOptions,
+      languageOptions,
+      sessionVariables,
+      escalationDepartmentOptions,
+      silenceTimeoutMin,
+      silenceTimeoutMax,
+      callEndThresholdMin,
+      callEndThresholdMax,
+      className,
+    },
+    ref
+  ) => {
+    const [data, setData] = React.useState<IvrBotConfigData>({
+      ...DEFAULT_DATA,
+      ...initialData,
+    });
+    const [createFnOpen, setCreateFnOpen] = React.useState(false);
+    const [uploadOpen, setUploadOpen] = React.useState(false);
 
-                {/* Test Your API */}
-                <div className="flex flex-col gap-4">
-                  <div className="flex flex-col gap-1.5">
-                    <span className="text-xs font-semibold text-semantic-text-muted tracking-[0.048px]">
-                      Test Your API
-                    </span>
-                    <div className="border-t border-semantic-border-layout" />
-                  </div>
+    const update = (patch: Partial<IvrBotConfigData>) =>
+      setData((prev) => ({ ...prev, ...patch }));
 
-                  <button
-                    type="button"
-                    onClick={handleTestApi}
-                    disabled={isTesting || !url.trim()}
-                    className="w-full h-[42px] rounded text-sm font-semibold text-semantic-text-secondary bg-semantic-primary-surface disabled:opacity-50 disabled:cursor-not-allowed transition-colors hover:bg-semantic-primary-surface/80 sm:w-auto sm:px-6 sm:self-end sm:ml-auto flex items-center justify-center"
-                  >
-                    {isTesting ? "Testing..." : "Test API"}
-                  </button>
+    const handleCreateFunction = (fnData: CreateFunctionData) => {
+      const newFn = { id: \`fn-\${Date.now()}\`, name: fnData.name };
+      update({ functions: [...data.functions, newFn] });
+      onCreateFunction?.(fnData);
+    };
 
-                  <div className="flex flex-col gap-1.5">
-                    <span className="text-xs text-semantic-text-muted">
-                      Response from API
-                    </span>
-                    <textarea
-                      readOnly
-                      value={apiResponse}
-                      rows={4}
-                      className="w-full px-3 py-2.5 text-base rounded border border-semantic-border-layout bg-semantic-bg-ui text-semantic-text-primary resize-none outline-none"
-                      placeholder=""
-                    />
-                  </div>
-                </div>
-              </div>
-            )}
+    return (
+      <div ref={ref} className={cn("flex flex-col min-h-screen bg-semantic-bg-primary", className)}>
+        {/* Page header */}
+        <PageHeader
+          showBackButton
+          onBackClick={onBack}
+          title={botTitle}
+          badge={
+            <Badge variant="outline" className="text-xs font-normal">
+              {botType}
+            </Badge>
+          }
+          actions={
+            <>
+              {lastUpdatedAt && (
+                <span className="hidden sm:inline text-sm text-semantic-text-muted mr-1">
+                  Last updated at: {lastUpdatedAt}
+                </span>
+              )}
+              <Button
+                variant="outline"
+                onClick={() => onSaveAsDraft?.(data)}
+              >
+                Save as Draft
+              </Button>
+              <Button
+                variant="default"
+                onClick={() => onPublish?.(data)}
+              >
+                Publish Bot
+              </Button>
+            </>
+          }
+        />
+
+        {/* Body \u2014 two-column layout: left white, right gray panel */}
+        <div className="flex flex-col lg:flex-row lg:flex-1 min-h-0">
+          {/* Left column \u2014 white background */}
+          <div className="flex flex-col gap-6 px-4 py-4 sm:px-6 sm:py-6 lg:flex-[3] min-w-0 lg:max-w-[720px]">
+            <BotIdentityCard
+              data={data}
+              onChange={update}
+              onPlayVoice={onPlayVoice}
+              onPauseVoice={onPauseVoice}
+              playingVoice={playingVoice}
+              roleOptions={roleOptions}
+              toneOptions={toneOptions}
+              voiceOptions={voiceOptions}
+              languageOptions={languageOptions}
+            />
+            <BotBehaviorCard
+              data={data}
+              onChange={update}
+              sessionVariables={sessionVariables}
+            />
+            <FallbackPromptsAccordion data={data} onChange={update} />
           </div>
 
-          {/* \u2500\u2500 Footer \u2500\u2500 */}
-          <div className="flex items-center justify-between gap-3 px-4 py-3 border-t border-semantic-border-layout shrink-0 sm:px-6 sm:py-4">
-            {step === 1 ? (
-              <>
-                <Button
-                  variant="outline"
-                  className="flex-1 sm:flex-none"
-                  onClick={handleClose}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  variant="default"
-                  className="flex-1 sm:flex-none"
-                  onClick={handleNext}
-                  disabled={!isStep1Valid}
-                >
-                  Next
-                </Button>
-              </>
-            ) : (
-              <>
-                <Button
-                  variant="outline"
-                  className="flex-1 sm:flex-none"
-                  onClick={() => setStep(1)}
-                >
-                  Back
-                </Button>
-                <Button
-                  variant="default"
-                  className="flex-1 sm:flex-none"
-                  onClick={handleSubmit}
-                >
-                  Submit
-                </Button>
-              </>
-            )}
+          {/* Right column \u2014 gray panel extending full height */}
+          <div className="flex flex-col gap-6 px-4 py-4 sm:px-6 sm:py-6 lg:flex-[2] min-w-0 bg-semantic-bg-ui border-l border-semantic-border-layout">
+            <KnowledgeBaseCard
+              files={data.knowledgeBaseFiles}
+              onAdd={() => setUploadOpen(true)}
+              onDownload={onDownloadKnowledgeFile}
+              onDelete={(id) => {
+                update({
+                  knowledgeBaseFiles: data.knowledgeBaseFiles.filter(
+                    (f) => f.id !== id
+                  ),
+                });
+                onDeleteKnowledgeFile?.(id);
+              }}
+            />
+            <FunctionsCard
+              functions={data.functions}
+              onAddFunction={() => setCreateFnOpen(true)}
+              onEditFunction={onEditFunction}
+              onDeleteFunction={(id) => {
+                update({
+                  functions: data.functions.filter((f) => f.id !== id),
+                });
+                onDeleteFunction?.(id);
+              }}
+            />
+            <FrustrationHandoverCard
+              data={data}
+              onChange={update}
+              departmentOptions={escalationDepartmentOptions}
+            />
+            <AdvancedSettingsCard
+              data={data}
+              onChange={update}
+              silenceTimeoutMin={silenceTimeoutMin}
+              silenceTimeoutMax={silenceTimeoutMax}
+              callEndThresholdMin={callEndThresholdMin}
+              callEndThresholdMax={callEndThresholdMax}
+            />
           </div>
-        </DialogContent>
-      </Dialog>
+        </div>
+
+        {/* Create Function Modal */}
+        <CreateFunctionModal
+          open={createFnOpen}
+          onOpenChange={setCreateFnOpen}
+          onSubmit={handleCreateFunction}
+          onTestApi={onTestApi}
+        />
+
+        {/* File Upload Modal */}
+        <FileUploadModal
+          open={uploadOpen}
+          onOpenChange={setUploadOpen}
+          onUpload={onUploadKnowledgeFile}
+          onSampleDownload={onSampleFileDownload}
+          onSave={onSaveKnowledgeFiles}
+        />
+      </div>
     );
   }
 );
 
-CreateFunctionModal.displayName = "CreateFunctionModal";
+IvrBotConfig.displayName = "IvrBotConfig";
 `, prefix)
         },
         {
-          name: "file-upload-modal.tsx",
+          name: "create-function-modal.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
-import { Download, Trash2, X, XCircle } from "lucide-react";
+import { Trash2, ChevronDown, X, Plus } from "lucide-react";
 import { cn } from "../../../lib/utils";
-import { Button } from "../button";
 import {
   Dialog,
   DialogContent,
   DialogTitle,
-  DialogDescription,
 } from "../dialog";
+import { Button } from "../button";
 import type {
-  FileUploadModalProps,
-  UploadItem,
-  UploadStatus,
+  CreateFunctionModalProps,
+  CreateFunctionData,
+  CreateFunctionStep2Data,
+  FunctionTabType,
+  HttpMethod,
+  KeyValuePair,
 } from "./types";
 
-const DEFAULT_ACCEPTED = ".doc,.docx,.pdf,.csv,.xls,.xlsx,.txt";
-const DEFAULT_FORMAT_DESC =
-  "Max file size 100 MB (Supported Format: .docs, .pdf, .csv, .xls, .xlxs, .txt)";
+const HTTP_METHODS: HttpMethod[] = ["GET", "POST", "PUT", "DELETE", "PATCH"];
+const FUNCTION_NAME_MAX = 30;
+const BODY_MAX = 4000;
 
 function generateId() {
   return Math.random().toString(36).slice(2, 9);
 }
 
-function useFakeProgress() {
-  const intervalsRef = React.useRef<
-    Record<string, ReturnType<typeof setInterval>>
-  >({});
+// \u2500\u2500 Shared input/textarea styles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 inputCls = 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)]"
+);
 
-  const start = React.useCallback(
-    (
-      id: string,
-      setItems: React.Dispatch<React.SetStateAction<UploadItem[]>>
-    ) => {
-      const interval = setInterval(() => {
-        setItems((prev) => {
-          let done = false;
-          const updated = prev.map((item) => {
-            if (item.id !== id || item.status !== "uploading") return item;
-            const next = Math.min(item.progress + 15, 100);
-            if (next === 100) done = true;
-            return {
-              ...item,
-              progress: next,
-              status: (next === 100 ? "done" : "uploading") as UploadStatus,
-            };
-          });
-          if (done) {
-            clearInterval(interval);
-            delete intervalsRef.current[id];
-          }
-          return updated;
-        });
-      }, 500);
-      intervalsRef.current[id] = interval;
-    },
-    []
-  );
+const textareaCls = 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)]"
+);
 
-  const cancel = React.useCallback((id: string) => {
-    clearInterval(intervalsRef.current[id]);
-    delete intervalsRef.current[id];
-  }, []);
+// \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
+function KeyValueTable({
+  rows,
+  onChange,
+  label,
+}: {
+  rows: KeyValuePair[];
+  onChange: (rows: KeyValuePair[]) => void;
+  label: string;
+}) {
+  const update = (id: string, patch: Partial<KeyValuePair>) =>
+    onChange(rows.map((r) => (r.id === id ? { ...r, ...patch } : r)));
 
-  const cancelAll = React.useCallback(() => {
-    Object.values(intervalsRef.current).forEach(clearInterval);
-    intervalsRef.current = {};
-  }, []);
+  const remove = (id: string) => onChange(rows.filter((r) => r.id !== id));
 
-  return { start, cancel, cancelAll };
-}
+  const add = () =>
+    onChange([...rows, { id: generateId(), key: "", value: "" }]);
 
-function getTimeRemaining(progress: number) {
-  const steps = Math.ceil((100 - progress) / 15);
-  const secs = steps * 3;
-  return secs > 60
-    ? \`\${Math.ceil(secs / 60)} minutes remaining\`
-    : \`\${secs} seconds remaining\`;
+  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 */}
+        <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">
+            Key
+          </div>
+          <div className="flex-[2] px-3 py-2 text-xs font-semibold text-semantic-text-muted">
+            Value
+          </div>
+          <div className="w-10 shrink-0" />
+        </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">
+                  Key
+                </span>
+                <input
+                  type="text"
+                  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"
+                />
+              </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
+                  type="button"
+                  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"
+                  aria-label="Delete row"
+                >
+                  <Trash2 className="size-3.5" />
+                </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
+          type="button"
+          onClick={add}
+          className="w-full flex items-center gap-2 px-3 py-2.5 text-sm text-semantic-text-muted hover:bg-semantic-bg-hover transition-colors"
+        >
+          <Plus className="size-3.5 shrink-0" />
+          <span>Add row</span>
+        </button>
+      </div>
+    </div>
+  );
 }
 
-const FileUploadModal = React.forwardRef<HTMLDivElement, FileUploadModalProps>(
+// \u2500\u2500 Modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 const CreateFunctionModal = React.forwardRef<
+  HTMLDivElement,
+  CreateFunctionModalProps
+>(
   (
     {
       open,
       onOpenChange,
-      onUpload,
-      onSave,
-      onCancel,
-      onSampleDownload,
-      sampleDownloadLabel = "Download sample file",
-      showSampleDownload,
-      acceptedFormats = DEFAULT_ACCEPTED,
-      formatDescription = DEFAULT_FORMAT_DESC,
-      maxFileSizeMB = 100,
-      multiple = true,
-      title = "File Upload",
-      uploadButtonLabel = "Upload from device",
-      dropDescription = "or drag and drop file here",
-      saveLabel = "Save",
-      cancelLabel = "Cancel",
-      saving = false,
+      onSubmit,
+      onTestApi,
+      initialStep = 1,
+      initialTab = "header",
       className,
-      ...props
-    },
-    ref
-  ) => {
-    const [items, setItems] = React.useState<UploadItem[]>([]);
-    const fileInputRef = React.useRef<HTMLInputElement>(null);
-    const fakeProgress = useFakeProgress();
-
-    const shouldShowSampleDownload =
-      showSampleDownload ?? !!onSampleDownload;
-
-    const addFiles = React.useCallback(
-      (fileList: FileList | null) => {
-        if (!fileList) return;
-
-        Array.from(fileList).forEach((file) => {
-          if (file.size > maxFileSizeMB * 1024 * 1024) {
-            const id = generateId();
-            setItems((prev) => [
-              ...prev,
-              {
-                id,
-                file,
-                progress: 0,
-                status: "error",
-                errorMessage: \`File exceeds \${maxFileSizeMB} MB limit\`,
-              },
-            ]);
-            return;
-          }
-
-          const id = generateId();
-          setItems((prev) => [
-            ...prev,
-            { id, file, progress: 0, status: "uploading" },
-          ]);
-
-          if (onUpload) {
-            onUpload(file, {
-              onProgress: (progress) => {
-                setItems((prev) =>
-                  prev.map((item) =>
-                    item.id === id
-                      ? {
-                          ...item,
-                          progress: Math.min(progress, 100),
-                          status:
-                            progress >= 100
-                              ? ("done" as UploadStatus)
-                              : ("uploading" as UploadStatus),
-                        }
-                      : item
-                  )
-                );
-              },
-              onError: (message) => {
-                setItems((prev) =>
-                  prev.map((item) =>
-                    item.id === id
-                      ? { ...item, status: "error" as UploadStatus, errorMessage: message }
-                      : item
-                  )
-                );
-              },
-            }).then(() => {
-              setItems((prev) =>
-                prev.map((item) =>
-                  item.id === id && item.status === "uploading"
-                    ? { ...item, progress: 100, status: "done" as UploadStatus }
-                    : item
-                )
-              );
-            }).catch((err) => {
-              setItems((prev) =>
-                prev.map((item) =>
-                  item.id === id && item.status !== "error"
-                    ? {
-                        ...item,
-                        status: "error" as UploadStatus,
-                        errorMessage:
-                          err instanceof Error
-                            ? err.message
-                            : "Upload failed",
-                      }
-                    : item
-                )
-              );
-            });
-          } else {
-            fakeProgress.start(id, setItems);
-          }
-        });
-      },
-      [onUpload, maxFileSizeMB, fakeProgress]
-    );
+    },
+    ref
+  ) => {
+    const [step, setStep] = React.useState<1 | 2>(initialStep);
 
-    const removeItem = (id: string) => {
-      fakeProgress.cancel(id);
-      setItems((prev) => prev.filter((i) => i.id !== id));
-    };
+    const [name, setName] = React.useState("");
+    const [prompt, setPrompt] = React.useState("");
 
-    const handleClose = () => {
-      fakeProgress.cancelAll();
-      setItems([]);
-      onCancel?.();
+    const [method, setMethod] = React.useState<HttpMethod>("GET");
+    const [url, setUrl] = React.useState("");
+    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 [apiResponse, setApiResponse] = React.useState("");
+    const [isTesting, setIsTesting] = React.useState(false);
+
+    const reset = React.useCallback(() => {
+      setStep(initialStep);
+      setName("");
+      setPrompt("");
+      setMethod("GET");
+      setUrl("");
+      setActiveTab(initialTab);
+      setHeaders([]);
+      setQueryParams([]);
+      setBody("");
+      setApiResponse("");
+    }, [initialStep, initialTab]);
+
+    const handleClose = React.useCallback(() => {
+      reset();
       onOpenChange(false);
+    }, [reset, onOpenChange]);
+
+    const handleNext = () => {
+      if (name.trim() && prompt.trim()) setStep(2);
     };
 
-    const handleSave = () => {
-      const completedFiles = items
-        .filter((i) => i.status === "done")
-        .map((i) => i.file);
-      onSave?.(completedFiles);
-      fakeProgress.cancelAll();
-      setItems([]);
-      onOpenChange(false);
+    const handleSubmit = () => {
+      const data: CreateFunctionData = {
+        name: name.trim(),
+        prompt: prompt.trim(),
+        method,
+        url: url.trim(),
+        headers,
+        queryParams,
+        body,
+      };
+      onSubmit?.(data);
+      handleClose();
     };
 
-    const hasCompleted = items.some((i) => i.status === "done");
-    const hasUploading = items.some((i) => i.status === "uploading");
+    const handleTestApi = async () => {
+      if (!onTestApi) return;
+      setIsTesting(true);
+      try {
+        const step2: CreateFunctionStep2Data = {
+          method,
+          url,
+          headers,
+          queryParams,
+          body,
+        };
+        const response = await onTestApi(step2);
+        setApiResponse(response);
+      } finally {
+        setIsTesting(false);
+      }
+    };
+
+    const isStep1Valid =
+      name.trim().length > 0 && prompt.trim().length > 0;
+
+    const tabLabels: Record<FunctionTabType, string> = {
+      header: \`Header (\${headers.length})\`,
+      queryParams: \`Query params (\${queryParams.length})\`,
+      body: "Body",
+    };
 
     return (
       <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogContent
           ref={ref}
-          size="default"
+          size="lg"
           hideCloseButton
           className={cn(
-            "max-w-[min(660px,calc(100vw-2rem))] rounded-xl p-4 gap-0 sm:p-6",
+            "flex flex-col gap-0 p-0 w-[calc(100vw-2rem)] sm:w-full",
+            "max-h-[calc(100svh-2rem)] overflow-hidden",
             className
           )}
-          {...props}
         >
-          {/* Header */}
-          <div className="flex items-center justify-between mb-6">
-            <DialogTitle className="m-0 text-base font-semibold text-semantic-text-primary">
-              {title}
+          {/* \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
             </DialogTitle>
-            <DialogDescription className="sr-only">
-              Upload files by clicking the button or dragging and dropping.
-            </DialogDescription>
             <button
               type="button"
               onClick={handleClose}
-              className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-semantic-text-primary"
-              aria-label="Close dialog"
+              className="rounded p-1.5 text-semantic-text-muted hover:text-semantic-text-primary hover:bg-semantic-bg-hover transition-colors"
+              aria-label="Close"
             >
-              <X className="h-4 w-4" />
+              <X className="size-4" />
             </button>
           </div>
 
-          {/* Body */}
-          <div className="flex flex-col gap-4 items-end w-full">
-            {shouldShowSampleDownload && (
-              <button
-                type="button"
-                onClick={onSampleDownload}
-                className="flex items-center gap-1.5 text-sm font-semibold text-semantic-text-link hover:opacity-80 transition-opacity"
-              >
-                <Download className="size-3.5" />
-                {sampleDownloadLabel}
-              </button>
-            )}
+          {/* \u2500\u2500 Scrollable body \u2500\u2500 */}
+          <div className="flex-1 overflow-y-auto min-h-0 px-4 py-5 sm:px-6">
+            {/* \u2500 Step 1 \u2500 */}
+            {step === 1 && (
+              <div className="flex flex-col gap-5">
+                <div className="flex flex-col gap-1.5">
+                  <label
+                    htmlFor="fn-name"
+                    className="text-sm font-semibold text-semantic-text-primary"
+                  >
+                    Function Name{" "}
+                    <span className="text-semantic-error-primary">*</span>
+                  </label>
+                  <div className={cn("relative")}>
+                    <input
+                      id="fn-name"
+                      type="text"
+                      value={name}
+                      maxLength={FUNCTION_NAME_MAX}
+                      onChange={(e) => setName(e.target.value)}
+                      placeholder="Enter name of the function"
+                      className={cn(inputCls, "pr-16")}
+                    />
+                    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs italic text-semantic-text-muted pointer-events-none">
+                      {name.length}/{FUNCTION_NAME_MAX}
+                    </span>
+                  </div>
+                </div>
 
-            {/* Drop zone */}
-            <div
-              className="w-full border border-dashed border-semantic-border-layout bg-semantic-bg-ui rounded p-4"
-              onDrop={(e) => {
-                e.preventDefault();
-                addFiles(e.dataTransfer.files);
-              }}
-              onDragOver={(e) => e.preventDefault()}
-            >
-              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
-                <button
-                  type="button"
-                  onClick={() => fileInputRef.current?.click()}
-                  className="h-[42px] px-4 rounded border border-semantic-border-layout bg-semantic-bg-primary text-base font-semibold text-semantic-text-secondary shrink-0 hover:bg-semantic-bg-hover transition-colors w-full sm:w-auto"
-                >
-                  {uploadButtonLabel}
-                </button>
-                <div className="flex flex-col gap-1">
-                  <p className="m-0 text-sm text-semantic-text-secondary tracking-[0.035px]">
-                    {dropDescription}
-                  </p>
-                  <p className="m-0 text-xs text-semantic-text-muted tracking-[0.048px]">
-                    {formatDescription}
-                  </p>
+                <div className="flex flex-col gap-1.5">
+                  <label
+                    htmlFor="fn-prompt"
+                    className="text-sm font-semibold text-semantic-text-primary"
+                  >
+                    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>
               </div>
-              <input
-                ref={fileInputRef}
-                type="file"
-                multiple={multiple}
-                accept={acceptedFormats}
-                className="hidden"
-                onChange={(e) => {
-                  addFiles(e.target.files);
-                  e.target.value = "";
-                }}
-              />
-            </div>
+            )}
 
-            {/* Upload item list */}
-            {items.length > 0 && (
-              <div className="flex flex-col gap-2.5 w-full">
-                {items.map((item) => (
+            {/* \u2500 Step 2 \u2500 */}
+            {step === 2 && (
+              <div className="flex flex-col gap-5">
+                {/* API URL \u2014 always a single combined row */}
+                <div className="flex flex-col gap-1.5">
+                  <span className="text-xs text-semantic-text-muted tracking-[0.048px]">
+                    API URL
+                  </span>
+                  <div
+                    className={cn(
+                      "flex h-[42px] rounded border border-semantic-border-input overflow-hidden bg-semantic-bg-primary",
+                      "hover:border-semantic-border-input-focus",
+                      "focus-within:border-semantic-border-input-focus focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+                      "transition-shadow"
+                    )}
+                  >
+                    {/* Method selector */}
+                    <div className="relative shrink-0 border-r border-semantic-border-layout">
+                      <select
+                        value={method}
+                        onChange={(e) =>
+                          setMethod(e.target.value as HttpMethod)
+                        }
+                        className="h-full w-[80px] pl-3 pr-7 text-base text-semantic-text-primary bg-transparent outline-none cursor-pointer appearance-none sm:w-[100px]"
+                        aria-label="HTTP method"
+                      >
+                        {HTTP_METHODS.map((m) => (
+                          <option key={m} value={m}>
+                            {m}
+                          </option>
+                        ))}
+                      </select>
+                      <ChevronDown
+                        className="absolute right-2 top-1/2 -translate-y-1/2 size-3 text-semantic-text-muted pointer-events-none"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    {/* URL input */}
+                    <input
+                      type="text"
+                      value={url}
+                      onChange={(e) => setUrl(e.target.value)}
+                      placeholder="Enter URL or Type {{ to add variables"
+                      className="flex-1 min-w-0 px-3 text-base text-semantic-text-primary placeholder:text-semantic-text-muted bg-transparent outline-none"
+                    />
+                  </div>
+                </div>
+
+                {/* Tabs \u2014 scrollable, no visible scrollbar */}
+                <div className="flex flex-col gap-4">
                   <div
-                    key={item.id}
-                    className="bg-semantic-bg-primary border border-semantic-border-layout rounded px-4 py-3 flex flex-col gap-2"
+                    className={cn(
+                      "flex border-b border-semantic-border-layout",
+                      "overflow-x-auto",
+                      "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+                    )}
                   >
-                    <div className="flex items-start gap-3">
-                      <div className="flex flex-col gap-0.5 flex-1 min-w-0">
-                        <p className="m-0 text-sm text-semantic-text-primary tracking-[0.035px] truncate">
-                          {item.status === "uploading"
-                            ? "Uploading..."
-                            : item.file.name}
-                        </p>
-                        {item.status === "uploading" && (
-                          <p className="m-0 text-xs text-semantic-text-muted tracking-[0.048px]">
-                            {item.progress}%&nbsp;&bull;&nbsp;
-                            {getTimeRemaining(item.progress)}
-                          </p>
-                        )}
-                        {item.status === "error" && (
-                          <p className="m-0 text-xs text-semantic-error-primary tracking-[0.048px]">
-                            {item.errorMessage ??
-                              "Something went wrong, Upload Failed."}
-                          </p>
-                        )}
-                      </div>
+                    {(
+                      ["header", "queryParams", "body"] as FunctionTabType[]
+                    ).map((tab) => (
                       <button
+                        key={tab}
                         type="button"
-                        onClick={() => removeItem(item.id)}
-                        aria-label={
-                          item.status === "uploading"
-                            ? "Cancel upload"
-                            : "Remove file"
-                        }
+                        onClick={() => setActiveTab(tab)}
                         className={cn(
-                          "shrink-0 mt-0.5 transition-colors",
-                          item.status === "uploading"
-                            ? "text-semantic-error-primary"
-                            : "text-semantic-text-muted hover:text-semantic-error-primary"
+                          "px-3 py-2 text-sm font-semibold transition-colors whitespace-nowrap shrink-0",
+                          activeTab === tab
+                            ? "text-semantic-text-secondary border-b-2 border-semantic-text-secondary -mb-px"
+                            : "text-semantic-text-muted hover:text-semantic-text-primary"
                         )}
                       >
-                        {item.status === "uploading" ? (
-                          <XCircle className="size-5" />
-                        ) : (
-                          <Trash2 className="size-5" />
-                        )}
+                        {tabLabels[tab]}
                       </button>
-                    </div>
-                    {item.status === "uploading" && (
-                      <div className="h-2 bg-semantic-bg-ui rounded-full overflow-hidden">
-                        <div
-                          className="h-full bg-semantic-success-primary rounded-full transition-all duration-300"
-                          style={{ width: \`\${item.progress}%\` }}
+                    ))}
+                  </div>
+
+                  {activeTab === "header" && (
+                    <KeyValueTable
+                      rows={headers}
+                      onChange={setHeaders}
+                      label="Header"
+                    />
+                  )}
+                  {activeTab === "queryParams" && (
+                    <KeyValueTable
+                      rows={queryParams}
+                      onChange={setQueryParams}
+                      label="Query parameter"
+                    />
+                  )}
+                  {activeTab === "body" && (
+                    <div className="flex flex-col gap-1.5">
+                      <span className="text-xs text-semantic-text-muted">
+                        Body
+                      </span>
+                      <div className={cn("relative")}>
+                        <textarea
+                          value={body}
+                          maxLength={BODY_MAX}
+                          onChange={(e) => setBody(e.target.value)}
+                          placeholder="Enter request body (JSON, XML etc). Type {{ to add variables"
+                          rows={6}
+                          className={cn(textareaCls, "pb-7")}
                         />
+                        <span className="absolute bottom-2 right-3 text-xs italic text-semantic-text-muted pointer-events-none">
+                          {body.length}/{BODY_MAX}
+                        </span>
                       </div>
-                    )}
+                    </div>
+                  )}
+                </div>
+
+                {/* Test Your API */}
+                <div className="flex flex-col gap-4">
+                  <div className="flex flex-col gap-1.5">
+                    <span className="text-xs font-semibold text-semantic-text-muted tracking-[0.048px]">
+                      Test Your API
+                    </span>
+                    <div className="border-t border-semantic-border-layout" />
                   </div>
-                ))}
+
+                  <button
+                    type="button"
+                    onClick={handleTestApi}
+                    disabled={isTesting || !url.trim()}
+                    className="w-full h-[42px] rounded text-sm font-semibold text-semantic-text-secondary bg-semantic-primary-surface disabled:opacity-50 disabled:cursor-not-allowed transition-colors hover:bg-semantic-primary-surface/80 sm:w-auto sm:px-6 sm:self-end sm:ml-auto flex items-center justify-center"
+                  >
+                    {isTesting ? "Testing..." : "Test API"}
+                  </button>
+
+                  <div className="flex flex-col gap-1.5">
+                    <span className="text-xs text-semantic-text-muted">
+                      Response from API
+                    </span>
+                    <textarea
+                      readOnly
+                      value={apiResponse}
+                      rows={4}
+                      className="w-full px-3 py-2.5 text-base rounded border border-semantic-border-layout bg-semantic-bg-ui text-semantic-text-primary resize-none outline-none"
+                      placeholder=""
+                    />
+                  </div>
+                </div>
               </div>
             )}
           </div>
 
-          {/* Footer */}
-          <div className="flex flex-col-reverse gap-3 mt-4 sm:mt-6 sm:flex-row sm:justify-end sm:gap-2">
-            <Button
-              variant="outline"
-              className="w-full sm:w-auto"
-              onClick={handleClose}
-            >
-              {cancelLabel}
-            </Button>
-            <Button
-              className="w-full sm:w-auto"
-              onClick={handleSave}
-              disabled={!hasCompleted || hasUploading}
-              loading={saving}
-            >
-              {saveLabel}
-            </Button>
+          {/* \u2500\u2500 Footer \u2500\u2500 */}
+          <div className="flex items-center justify-between gap-3 px-4 py-3 border-t border-semantic-border-layout shrink-0 sm:px-6 sm:py-4">
+            {step === 1 ? (
+              <>
+                <Button
+                  variant="outline"
+                  className="flex-1 sm:flex-none"
+                  onClick={handleClose}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  variant="default"
+                  className="flex-1 sm:flex-none"
+                  onClick={handleNext}
+                  disabled={!isStep1Valid}
+                >
+                  Next
+                </Button>
+              </>
+            ) : (
+              <>
+                <Button
+                  variant="outline"
+                  className="flex-1 sm:flex-none"
+                  onClick={() => setStep(1)}
+                >
+                  Back
+                </Button>
+                <Button
+                  variant="default"
+                  className="flex-1 sm:flex-none"
+                  onClick={handleSubmit}
+                >
+                  Submit
+                </Button>
+              </>
+            )}
           </div>
         </DialogContent>
       </Dialog>
@@ -14302,9 +14385,7 @@ const FileUploadModal = React.forwardRef<HTMLDivElement, FileUploadModalProps>(
   }
 );
 
-FileUploadModal.displayName = "FileUploadModal";
-
-export { FileUploadModal };
+CreateFunctionModal.displayName = "CreateFunctionModal";
 `, prefix)
         },
         {
@@ -14799,8 +14880,6 @@ export { BotBehaviorCard };
 import { Download, Trash2, Plus, Info } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import { Badge } from "../badge";
-import { FileUploadModal } from "./file-upload-modal";
-import type { UploadProgressHandlers } 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
@@ -14808,12 +14887,8 @@ import type { KnowledgeBaseFile } from "./types";
 export interface KnowledgeBaseCardProps {
   /** List of knowledge base files */
   files: KnowledgeBaseFile[];
-  /** Called when files are uploaded and saved */
-  onSaveFiles?: (uploadedFiles: File[]) => void;
-  /** Called for each file to handle the actual upload. If not provided, uses fake progress. */
-  onUploadFile?: (file: File, handlers: UploadProgressHandlers) => Promise<void>;
-  /** Called when user clicks "Download sample file" */
-  onSampleDownload?: () => void;
+  /** Called when user clicks the "+ Files" button */
+  onAdd?: () => void;
   /** Called when user clicks the download button on a file */
   onDownload?: (id: string) => void;
   /** Called when user clicks the delete button on a file */
@@ -14838,26 +14913,21 @@ const KnowledgeBaseCard = React.forwardRef<HTMLDivElement, KnowledgeBaseCardProp
   (
     {
       files,
-      onSaveFiles,
-      onUploadFile,
-      onSampleDownload,
+      onAdd,
       onDownload,
       onDelete,
       className,
     },
     ref
   ) => {
-    const [uploadOpen, setUploadOpen] = React.useState(false);
-
     return (
-      <>
-        <div
-          ref={ref}
-          className={cn(
-            "bg-semantic-bg-primary border border-semantic-border-layout rounded-lg overflow-hidden",
-            className
-          )}
-        >
+      <div
+        ref={ref}
+        className={cn(
+          "bg-semantic-bg-primary border border-semantic-border-layout rounded-lg overflow-hidden",
+          className
+        )}
+      >
           {/* Header */}
           <div className="flex items-center justify-between px-4 py-4 border-b border-semantic-border-layout sm:px-6">
             <div className="flex items-center gap-1.5">
@@ -14868,7 +14938,7 @@ const KnowledgeBaseCard = React.forwardRef<HTMLDivElement, KnowledgeBaseCardProp
             </div>
             <button
               type="button"
-              onClick={() => setUploadOpen(true)}
+              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"
             >
               <Plus className="size-3.5" />
@@ -14926,15 +14996,7 @@ const KnowledgeBaseCard = React.forwardRef<HTMLDivElement, KnowledgeBaseCardProp
               </div>
             )}
           </div>
-        </div>
-        <FileUploadModal
-          open={uploadOpen}
-          onOpenChange={setUploadOpen}
-          onUpload={onUploadFile}
-          onSampleDownload={onSampleDownload}
-          onSave={onSaveFiles}
-        />
-      </>
+      </div>
     );
   }
 );
@@ -15379,7 +15441,9 @@ export { AdvancedSettingsCard };
         },
         {
           name: "types.ts",
-          content: prefixTailwindClasses(`export type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
+          content: prefixTailwindClasses(`import type { UploadProgressHandlers } from "../file-upload-modal";
+
+export type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
 
 export type FunctionTabType = "header" | "queryParams" | "body";
 
@@ -15503,45 +15567,14 @@ export interface IvrBotConfigProps {
   className?: string;
 }
 
-// \u2500\u2500\u2500 File Upload Modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 type UploadStatus = "pending" | "uploading" | "done" | "error";
-
-export interface UploadItem {
-  id: string;
-  file: File;
-  progress: number;
-  status: UploadStatus;
-  errorMessage?: string;
-}
-
-export interface UploadProgressHandlers {
-  onProgress: (progress: number) => void;
-  onError: (message: string) => void;
-}
+// \u2500\u2500\u2500 File Upload Modal (re-exported from shared module) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
-export interface FileUploadModalProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSave"> {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  /** Called for each file to handle the actual upload. If not provided, uses fake progress (demo mode). */
-  onUpload?: (file: File, handlers: UploadProgressHandlers) => Promise<void>;
-  onSave?: (files: File[]) => void;
-  onCancel?: () => void;
-  onSampleDownload?: () => void;
-  sampleDownloadLabel?: string;
-  showSampleDownload?: boolean;
-  acceptedFormats?: string;
-  formatDescription?: string;
-  maxFileSizeMB?: number;
-  multiple?: boolean;
-  title?: string;
-  uploadButtonLabel?: string;
-  dropDescription?: string;
-  saveLabel?: string;
-  cancelLabel?: string;
-  saving?: boolean;
-}
+export type {
+  UploadStatus,
+  UploadItem,
+  UploadProgressHandlers,
+  FileUploadModalProps,
+} from "../file-upload-modal";
 `, prefix)
         },
         {
@@ -15553,7 +15586,7 @@ export { FunctionsCard } from "./functions-card";
 export { FrustrationHandoverCard } from "./frustration-handover-card";
 export { AdvancedSettingsCard } from "./advanced-settings-card";
 export { CreateFunctionModal } from "./create-function-modal";
-export { FileUploadModal } from "./file-upload-modal";
+export { FileUploadModal } from "../file-upload-modal";
 export { IvrBotConfig } from "./ivr-bot-config";
 
 export type {