myoperator-ui 0.0.204-beta.3 → 0.0.204-beta.4

package/dist/index.js

@@ -1053,7 +1053,17 @@ const Select = SelectPrimitive.Root;
 
 const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value;
+const SelectValue = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Value>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Value
+    ref={ref}
+    className={cn("[&[data-placeholder]]:text-semantic-text-muted", className)}
+    {...props}
+  />
+));
+SelectValue.displayName = SelectPrimitive.Value.displayName;
 
 export interface SelectTriggerProps
   extends
@@ -12100,7 +12110,7 @@ export const CreateBotModal = React.forwardRef<
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent ref={ref} size="sm" className={cn(className)}>
+      <DialogContent ref={ref} size="sm" className={cn("mx-4 sm:mx-auto", className)}>
         <DialogHeader>
           <DialogTitle>Create AI bot</DialogTitle>
         </DialogHeader>
@@ -12136,7 +12146,7 @@ export const CreateBotModal = React.forwardRef<
             <span className="text-sm font-semibold text-semantic-text-secondary tracking-[0.014px]">
               Select Bot Type
             </span>
-            <div className="flex gap-3">
+            <div className="flex flex-col gap-3 sm:flex-row">
               {BOT_TYPE_OPTIONS.map(({ id, label, description }) => {
                 const isSelected = selectedType === id;
                 return (
@@ -12145,7 +12155,7 @@ export const CreateBotModal = React.forwardRef<
                     type="button"
                     onClick={() => setSelectedType(id)}
                     className={cn(
-                      "flex flex-col gap-2.5 p-3 rounded-lg border text-left flex-1 h-[134px] justify-center",
+                      "flex flex-row items-center gap-3 p-3 rounded-lg border text-left sm:flex-col sm:gap-2.5 sm:flex-1 sm:h-[134px] sm:justify-center",
                       "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-focus",
                       isSelected
                         ? "bg-semantic-info-surface border-semantic-border-focus shadow-sm"
@@ -12191,12 +12201,13 @@ export const CreateBotModal = React.forwardRef<
         </div>
 
         {/* Footer actions */}
-        <div className="flex justify-end gap-4 mt-2">
-          <Button variant="outline" onClick={handleClose}>
+        <div className="flex flex-col-reverse gap-3 mt-2 sm:flex-row sm:justify-end sm:gap-4">
+          <Button variant="outline" className="w-full sm:w-auto" onClick={handleClose}>
             Cancel
           </Button>
           <Button
             variant="default"
+            className="w-full sm:w-auto"
             onClick={handleSubmit}
             disabled={!name.trim()}
           >
@@ -12247,7 +12258,7 @@ export const BotList = React.forwardRef<HTMLDivElement, BotListProps>(
     return (
       <div ref={ref} className={cn("flex flex-col w-full", className)}>
         {/* Page header */}
-        <div className="flex items-center justify-between pb-5 mb-6 border-b border-semantic-border-layout">
+        <div className="flex flex-col gap-4 pb-5 mb-6 border-b border-semantic-border-layout sm:flex-row sm:items-center sm:justify-between">
           <div className="flex flex-col gap-1.5">
             <h1 className="m-0 text-base font-semibold text-semantic-text-primary tracking-[0.064px]">
               {title}
@@ -12258,20 +12269,20 @@ export const BotList = React.forwardRef<HTMLDivElement, BotListProps>(
           </div>
 
           {/* Search bar */}
-          <div className="flex items-center gap-2 h-10 px-2.5 border border-semantic-border-input rounded 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)]">
+          <div className="flex items-center gap-2 h-10 px-2.5 border border-semantic-border-input rounded 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)] w-full sm:w-auto">
             <Search className="size-[14px] text-semantic-text-muted shrink-0" />
             <input
               type="text"
               value={searchQuery}
               onChange={(e) => handleSearch(e.target.value)}
               placeholder="Search bot..."
-              className="text-sm text-semantic-text-primary placeholder:text-semantic-text-muted bg-transparent outline-none w-[180px]"
+              className="text-sm text-semantic-text-primary placeholder:text-semantic-text-muted bg-transparent outline-none w-full sm:w-[180px]"
             />
           </div>
         </div>
 
         {/* Bot grid */}
-        <div className="grid grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3">
           {/* Create new bot card */}
           <button
             type="button"
@@ -12408,6 +12419,7 @@ import {
   ChevronLeft,
   ChevronDown,
   ChevronRight,
+  ChevronUp,
   Plus,
   Download,
   Trash2,
@@ -12418,6 +12430,13 @@ import {
 import { cn } from "../../../lib/utils";
 import { Button } from "../button";
 import { Badge } from "../badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../select";
 import { tagVariants } from "../tag";
 import { Switch } from "../switch";
 import {
@@ -12459,13 +12478,13 @@ function SectionCard({
         className
       )}
     >
-      <div className="flex items-center justify-between px-6 py-4 border-b border-semantic-border-layout">
+      <div className="flex items-center justify-between px-4 py-4 border-b border-semantic-border-layout sm:px-6">
         <h2 className="m-0 text-base font-semibold text-semantic-text-primary">
           {title}
         </h2>
         {action}
       </div>
-      <div className="px-6 py-5">{children}</div>
+      <div className="px-4 py-4 sm:px-6 sm:py-5">{children}</div>
     </div>
   );
 }
@@ -12563,8 +12582,20 @@ function StyledTextarea({
   );
 }
 
-// \u2500\u2500\u2500 Tone Multi-Select \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 TONE_OPTIONS = [
+// \u2500\u2500\u2500 Primary Role options \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 PRIMARY_ROLE_OPTIONS = [
+  { value: "customer-support", label: "Customer Support Agent" },
+  { value: "sales", label: "Sales Representative" },
+  { value: "technical-support", label: "Technical Support" },
+  { value: "billing-support", label: "Billing Support" },
+  { value: "appointment-scheduling", label: "Appointment Scheduling" },
+  { value: "order-status", label: "Order Status & Tracking" },
+  { value: "lead-qualification", label: "Lead Qualification" },
+  { value: "general-inquiries", label: "General Inquiries" },
+];
+
+// \u2500\u2500\u2500 Tone Input \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 PRESET_TONES = [
   "Professional and highly concise",
   "Friendly and conversational",
   "Calm and reassuring",
@@ -12578,86 +12609,93 @@ const TONE_OPTIONS = [
   "Direct and efficient",
 ];
 
-function ToneMultiSelect({
-  values,
+function ToneInput({
+  value,
   onChange,
 }: {
-  values: string[];
-  onChange: (values: string[]) => void;
+  value: string[];
+  onChange: (v: string[]) => void;
 }) {
+  const [isOpen, setIsOpen] = React.useState(false);
   const [inputValue, setInputValue] = React.useState("");
-  const [open, setOpen] = React.useState(false);
   const containerRef = React.useRef<HTMLDivElement>(null);
   const inputRef = React.useRef<HTMLInputElement>(null);
 
-  const filteredOptions = TONE_OPTIONS.filter(
-    (opt) =>
-      !values.includes(opt) &&
-      opt.toLowerCase().includes(inputValue.toLowerCase())
-  );
+  React.useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+        setInputValue("");
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
 
   const addTone = (tone: string) => {
     const trimmed = tone.trim();
-    if (trimmed && !values.includes(trimmed)) {
-      onChange([...values, trimmed]);
+    if (trimmed && !value.includes(trimmed)) {
+      onChange([...value, trimmed]);
+      setInputValue("");
     }
-    setInputValue("");
-    inputRef.current?.focus();
   };
 
   const removeTone = (tone: string) => {
-    onChange(values.filter((t) => t !== tone));
+    onChange(value.filter((t) => t !== tone));
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter" && inputValue.trim()) {
+    if (e.key === "Enter") {
       e.preventDefault();
-      addTone(inputValue);
-    } else if (e.key === "Backspace" && !inputValue && values.length > 0) {
-      onChange(values.slice(0, -1));
+      if (inputValue.trim()) addTone(inputValue);
+    } else if (e.key === "Backspace" && !inputValue && value.length > 0) {
+      removeTone(value[value.length - 1]);
     } else if (e.key === "Escape") {
-      setOpen(false);
+      setIsOpen(false);
+      setInputValue("");
     }
   };
 
-  React.useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  const hasContent = values.length > 0 || inputValue.length > 0;
+  const availablePresets = PRESET_TONES.filter((t) => !value.includes(t));
+  const canAddCustom =
+    Boolean(inputValue.trim()) && !value.includes(inputValue.trim());
 
   return (
-    <div ref={containerRef} className="relative w-full">
-      {/* Trigger \u2014 same border/bg/focus as StyledInput */}
+    <div className="relative" ref={containerRef}>
+      {/* Trigger */}
       <div
         className={cn(
-          "min-h-10 w-full pl-4 pr-3 py-1.5 text-sm rounded border flex flex-wrap items-center gap-1.5 cursor-text",
-          "border-semantic-border-input bg-semantic-bg-primary",
-          "outline-none hover:border-semantic-border-input-focus",
-          open && "border-semantic-border-input-focus shadow-[0_0_0_1px_rgba(43,188,202,0.15)]"
+          "flex items-center gap-2 flex-wrap min-h-10 px-4 py-2 rounded border bg-semantic-bg-primary cursor-text transition-shadow",
+          isOpen
+            ? "border-semantic-border-focus shadow-[0_0_0_1px_rgba(43,188,202,0.15)]"
+            : "border-semantic-border-input hover:border-semantic-border-input-focus"
         )}
-        onClick={() => { setOpen(true); inputRef.current?.focus(); }}
+        onClick={() => {
+          setIsOpen(true);
+          inputRef.current?.focus();
+        }}
       >
-        {/* Selected chips \u2014 info-surface blue tint as per Figma */}
-        {values.map((tone) => (
+        {/* Selected chips */}
+        {value.map((tone) => (
           <span
             key={tone}
-            className="inline-flex items-center gap-1.5 px-2 py-1 rounded bg-semantic-info-surface text-xs text-semantic-text-primary shrink-0 max-w-[220px]"
+            className="inline-flex items-center gap-2 bg-semantic-info-surface px-2 py-1 rounded text-sm text-semantic-text-primary whitespace-nowrap"
           >
-            <span className="truncate">{tone}</span>
+            {tone}
             <button
               type="button"
-              onClick={(e) => { e.stopPropagation(); removeTone(tone); }}
-              className="shrink-0 text-semantic-text-muted hover:text-semantic-text-primary transition-colors"
+              onMouseDown={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                removeTone(tone);
+              }}
+              className="shrink-0 flex items-center justify-center text-semantic-text-muted hover:text-semantic-text-primary transition-colors"
               aria-label={\`Remove \${tone}\`}
             >
-              <X className="size-3" />
+              <X className="size-2.5" />
             </button>
           </span>
         ))}
@@ -12667,110 +12705,75 @@ function ToneMultiSelect({
           ref={inputRef}
           type="text"
           value={inputValue}
-          onChange={(e) => { setInputValue(e.target.value); setOpen(true); }}
-          onFocus={() => setOpen(true)}
+          onChange={(e) => {
+            setInputValue(e.target.value);
+            if (!isOpen) setIsOpen(true);
+          }}
+          onFocus={() => setIsOpen(true)}
           onKeyDown={handleKeyDown}
-          placeholder={values.length === 0 ? "Enter or select tone" : ""}
-          className="flex-1 min-w-[100px] bg-transparent outline-none text-semantic-text-primary placeholder:text-semantic-text-muted"
+          placeholder={value.length === 0 ? "Enter or select tone" : ""}
+          className="flex-1 min-w-[100px] text-sm bg-transparent outline-none text-semantic-text-primary placeholder:text-semantic-text-muted"
         />
 
-        {/* Chevron: right (\u2192) when has content, down (\u2193) when empty */}
-        <button
-          type="button"
-          onClick={(e) => { e.stopPropagation(); setOpen((o) => !o); }}
-          className="shrink-0 ml-1 text-semantic-text-muted hover:text-semantic-text-primary transition-colors"
-          aria-label="Toggle tone options"
-          tabIndex={-1}
-        >
-          {hasContent
-            ? <ChevronRight className="size-4" />
-            : <ChevronDown className={cn("size-4 transition-transform duration-150", open && "rotate-180")} />
-          }
-        </button>
+        {/* Chevron \u2014 right when open, down when closed */}
+        {isOpen ? (
+          <ChevronRight className="size-5 text-semantic-text-muted shrink-0 ml-auto" />
+        ) : (
+          <ChevronDown className="size-5 text-semantic-text-muted shrink-0 ml-auto" />
+        )}
       </div>
 
-      {/* "Press Enter to add..." hint shown below trigger */}
-      {inputValue.trim() && (
-        <div className="flex items-center gap-1.5 mt-1">
-          <Info className="size-3.5 shrink-0 text-semantic-text-muted" />
-          <p className="m-0 text-xs text-semantic-text-muted">
-            Press Enter to add &ldquo;{inputValue.trim()}&rdquo; \u21B5
-          </p>
+      {/* Dropdown panel */}
+      {isOpen && (
+        <div className="absolute z-50 top-full mt-1 w-full bg-semantic-bg-primary border border-semantic-border-layout rounded shadow-sm">
+          {/* Preset option chips */}
+          <div className="px-2.5 py-1.5 flex flex-wrap gap-1.5">
+            {availablePresets.length > 0 ? (
+              availablePresets.map((option) => (
+                <button
+                  key={option}
+                  type="button"
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    addTone(option);
+                  }}
+                  className="inline-flex items-center gap-2 bg-semantic-bg-ui px-2 py-1 rounded text-sm text-semantic-text-primary hover:bg-semantic-bg-hover transition-colors whitespace-nowrap"
+                >
+                  <Plus className="size-2.5 shrink-0 text-semantic-text-muted" />
+                  {option}
+                </button>
+              ))
+            ) : (
+              <p className="m-0 text-sm text-semantic-text-muted px-1 py-0.5">
+                All preset tones selected
+              </p>
+            )}
+          </div>
+
+          {/* "Press enter to add" hint when typing a custom value */}
+          {canAddCustom && (
+            <div className="border-t border-semantic-border-layout px-4 py-3 text-center">
+              <span className="text-sm font-semibold text-semantic-text-primary">
+                Press enter to add &ldquo;{inputValue}&rdquo; \u21B5
+              </span>
+            </div>
+          )}
         </div>
       )}
 
-      {/* Dropdown \u2014 options as wrapping chips with + icon, exactly as Figma */}
-      {open && filteredOptions.length > 0 && (
-        <div className="absolute z-50 w-full mt-1 rounded border border-semantic-border-layout bg-semantic-bg-primary shadow-sm overflow-hidden">
-          <div className="flex flex-wrap gap-1.5 p-2.5">
-            {filteredOptions.map((opt) => (
-              <button
-                key={opt}
-                type="button"
-                onMouseDown={(e) => { e.preventDefault(); addTone(opt); }}
-                className="inline-flex items-center gap-1.5 px-2 py-1 rounded bg-semantic-bg-ui text-xs text-semantic-text-primary hover:bg-semantic-bg-hover transition-colors shrink-0"
-              >
-                <Plus className="size-2.5 shrink-0 text-semantic-text-muted" />
-                {opt}
-              </button>
-            ))}
-          </div>
+      {/* Helper text shown below when dropdown is closed */}
+      {!isOpen && (
+        <div className="flex items-center gap-1.5 mt-1.5">
+          <Info className="size-[18px] shrink-0 text-semantic-text-muted" />
+          <p className="m-0 text-sm text-semantic-text-muted">
+            Press Enter to add &ldquo;Conversational&rdquo; \u21B5
+          </p>
         </div>
       )}
     </div>
   );
 }
 
-// \u2500\u2500\u2500 Styled Select \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 StyledSelect({
-  placeholder,
-  value,
-  onChange,
-  options,
-  disabled,
-  className,
-}: {
-  placeholder?: string;
-  value?: string;
-  onChange?: (v: string) => void;
-  options?: { label: string; value: string }[];
-  disabled?: boolean;
-  className?: string;
-}) {
-  return (
-    <div className={cn("relative w-full", className)}>
-      <select
-        value={value ?? ""}
-        onChange={(e) => onChange?.(e.target.value)}
-        disabled={disabled}
-        className={cn(
-          "w-full h-10 pl-4 pr-10 text-sm rounded border appearance-none cursor-pointer",
-          "border-semantic-border-input bg-semantic-bg-primary",
-          value ? "text-semantic-text-primary" : "text-semantic-text-muted",
-          "outline-none hover:border-semantic-border-input-focus",
-          "focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
-          "disabled:opacity-50 disabled:cursor-not-allowed"
-        )}
-      >
-        {placeholder && (
-          <option value="" disabled>
-            {placeholder}
-          </option>
-        )}
-        {options?.map((opt) => (
-          <option key={opt.value} value={opt.value}>
-            {opt.label}
-          </option>
-        ))}
-      </select>
-      <ChevronDown
-        className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-semantic-text-muted pointer-events-none shrink-0"
-        aria-hidden="true"
-      />
-    </div>
-  );
-}
-
 // \u2500\u2500\u2500 Who The Bot Is \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 WhoTheBotIs({
   data,
@@ -12794,44 +12797,60 @@ function WhoTheBotIs({
         </Field>
 
         <Field label="Primary Role">
-          <StyledInput
-            placeholder="e.g., Customer Support Agent"
-            value={data.primaryRole}
-            onChange={(v) => onChange({ primaryRole: v })}
-          />
+          <Select
+            value={data.primaryRole || undefined}
+            onValueChange={(v) => onChange({ primaryRole: v })}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="e.g., Customer Support Agent" />
+            </SelectTrigger>
+            <SelectContent>
+              {PRIMARY_ROLE_OPTIONS.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </Field>
 
         <Field label="Tone">
-          <ToneMultiSelect
-            values={data.tones ?? []}
-            onChange={(v) => onChange({ tones: v })}
+          <ToneInput
+            value={Array.isArray(data.tone) ? data.tone : []}
+            onChange={(v) => onChange({ tone: v })}
           />
         </Field>
 
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
           <Field label="How It Sounds">
-            <StyledSelect
-              placeholder="Rhea - Female"
-              value={data.voice}
-              onChange={(v) => onChange({ voice: v })}
-              options={[
-                { value: "rhea-female", label: "Rhea - Female" },
-                { value: "james-male", label: "James - Male" },
-                { value: "aria-female", label: "Aria - Female" },
-              ]}
-            />
+            <Select
+              value={data.voice || undefined}
+              onValueChange={(v) => onChange({ voice: v })}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Rhea - Female" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="rhea-female">Rhea - Female</SelectItem>
+                <SelectItem value="james-male">James - Male</SelectItem>
+                <SelectItem value="aria-female">Aria - Female</SelectItem>
+              </SelectContent>
+            </Select>
           </Field>
           <Field label="What Language It Speaks">
-            <StyledSelect
-              placeholder="Select Language Mode"
-              value={data.language}
-              onChange={(v) => onChange({ language: v })}
-              options={[
-                { value: "en-in", label: "English (India)" },
-                { value: "en-us", label: "English (US)" },
-                { value: "hi-in", label: "Hindi" },
-              ]}
-            />
+            <Select
+              value={data.language || undefined}
+              onValueChange={(v) => onChange({ language: v })}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select Language Mode" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="en-in">English (India)</SelectItem>
+                <SelectItem value="en-us">English (US)</SelectItem>
+                <SelectItem value="hi-in">Hindi</SelectItem>
+              </SelectContent>
+            </Select>
           </Field>
         </div>
       </div>
@@ -12916,14 +12935,14 @@ function FallbackPromptsAccordion({
     <div className="bg-semantic-bg-primary border border-semantic-border-layout rounded-lg overflow-hidden">
       <Accordion type="single">
         <AccordionItem value="fallback">
-          <AccordionTrigger className="px-6 py-5 border-b border-semantic-border-layout hover:no-underline">
+          <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-6 pt-6 pb-2 flex flex-col gap-6">
+            <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 ?? ""}
@@ -13035,7 +13054,7 @@ function FileUploadModal({
       <DialogContent
         size="default"
         hideCloseButton
-        className="max-w-[660px] rounded-xl p-6 gap-0"
+        className="mx-4 max-w-[660px] rounded-xl p-4 gap-0 sm:mx-auto sm:p-6"
       >
         {/* Header */}
         <div className="flex items-center justify-between mb-6">
@@ -13074,11 +13093,11 @@ function FileUploadModal({
             }}
             onDragOver={(e) => e.preventDefault()}
           >
-            <div className="flex items-center gap-4">
+            <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-10 px-4 rounded border border-semantic-border-layout bg-semantic-bg-primary text-sm font-semibold text-semantic-text-secondary shrink-0 hover:bg-semantic-bg-hover transition-colors"
+                className="h-10 px-4 rounded border border-semantic-border-layout bg-semantic-bg-primary text-sm font-semibold text-semantic-text-secondary shrink-0 hover:bg-semantic-bg-hover transition-colors w-full sm:w-auto"
               >
                 Upload from device
               </button>
@@ -13170,11 +13189,11 @@ function FileUploadModal({
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-end gap-2 mt-6">
-          <Button variant="outline" onClick={handleClose}>
+        <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}>
             Cancel
           </Button>
-          <Button onClick={handleSave}>
+          <Button className="w-full sm:w-auto" onClick={handleSave}>
             Save
           </Button>
         </div>
@@ -13211,7 +13230,7 @@ function KnowledgeBase({
     <>
     <div className="bg-semantic-bg-primary border border-semantic-border-layout rounded-lg overflow-hidden">
       {/* Header */}
-      <div className="flex items-center justify-between px-6 py-4 border-b border-semantic-border-layout">
+      <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">
           <h2 className="m-0 text-base font-semibold text-semantic-text-primary">
             Knowledge Base
@@ -13228,7 +13247,7 @@ function KnowledgeBase({
         </button>
       </div>
       {/* File list */}
-      <div className="px-6">
+      <div className="px-4 sm:px-6">
         {files.length === 0 ? (
           <p className="m-0 text-sm text-semantic-text-muted text-center py-5">
             No files added yet. Click &ldquo;+ Files&rdquo; to upload.
@@ -13300,7 +13319,7 @@ function FunctionsSection({
   return (
     <div className="bg-semantic-bg-primary border border-semantic-border-layout rounded-lg overflow-hidden">
       {/* Header */}
-      <div className="flex items-center justify-between px-6 py-4 border-b border-semantic-border-layout">
+      <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">
           <h2 className="m-0 text-base font-semibold text-semantic-text-primary">
             Functions
@@ -13317,7 +13336,7 @@ function FunctionsSection({
         </button>
       </div>
       {/* Function list */}
-      <div className="px-6 py-4">
+      <div className="px-4 py-4 sm:px-6">
         {functions.length === 0 ? (
           <p className="m-0 text-sm text-semantic-text-muted text-center py-2">
             No functions added yet.
@@ -13361,7 +13380,7 @@ function FrustrationHandoverAccordion({
     <div className="bg-semantic-bg-primary border border-semantic-border-layout rounded-lg overflow-hidden">
       <Accordion type="single">
         <AccordionItem value="frustration">
-          <AccordionTrigger className="px-6 py-5 border-b border-semantic-border-layout hover:no-underline">
+          <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">
               Frustration Handover
               <Info className="size-3.5 text-semantic-text-muted shrink-0" />
@@ -13369,7 +13388,7 @@ function FrustrationHandoverAccordion({
           </AccordionTrigger>
           <AccordionContent>
             <div className="flex flex-col gap-6 pt-0 pb-2">
-              <div className="flex items-center justify-between px-6 py-2.5">
+              <div className="flex items-center justify-between px-4 py-2.5 sm:px-6">
                 <span className="text-sm text-semantic-text-primary">
                   Enable frustration-based escalation
                 </span>
@@ -13380,19 +13399,22 @@ function FrustrationHandoverAccordion({
                   }
                 />
               </div>
-              <div className="px-6 pb-2">
+              <div className="px-4 pb-2 sm:px-6">
                 <Field label="Escalation Department">
-                  <StyledSelect
-                    placeholder="Select department/user"
-                    value={data.escalationDepartment}
-                    onChange={(v) => onChange({ escalationDepartment: v })}
+                  <Select
+                    value={data.escalationDepartment || undefined}
+                    onValueChange={(v) => onChange({ escalationDepartment: v })}
                     disabled={!data.frustrationHandoverEnabled}
-                    options={[
-                      { value: "support", label: "Support" },
-                      { value: "sales", label: "Sales" },
-                      { value: "billing", label: "Billing" },
-                    ]}
-                  />
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a department" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="support">Support</SelectItem>
+                      <SelectItem value="sales">Sales</SelectItem>
+                      <SelectItem value="billing">Billing</SelectItem>
+                    </SelectContent>
+                  </Select>
                 </Field>
               </div>
             </div>
@@ -13416,31 +13438,31 @@ function NumberSpinner({
   max?: number;
 }) {
   return (
-    <div className="flex h-10 w-full border border-semantic-border-input rounded overflow-hidden">
+    <div className="flex w-full items-center gap-2.5 px-4 py-2.5 border border-semantic-border-layout bg-semantic-bg-primary rounded">
       <input
         type="number"
         value={value}
         min={min}
         max={max}
         onChange={(e) => onChange(Number(e.target.value))}
-        className="flex-1 px-4 text-sm text-semantic-text-primary bg-semantic-bg-primary outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        className="flex-1 min-w-0 text-sm text-semantic-text-primary bg-transparent outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
       />
-      <div className="flex flex-col shrink-0 border-l border-semantic-border-layout">
+      <div className="flex flex-col items-center shrink-0 gap-0.5">
         <button
           type="button"
           onClick={() => onChange(Math.min(max, value + 1))}
-          className="flex-1 flex items-center justify-center px-2.5 text-xs text-semantic-text-muted hover:bg-semantic-bg-hover leading-none border-b border-semantic-border-layout"
+          className="flex items-center justify-center text-semantic-text-muted hover:text-semantic-text-primary transition-colors"
           aria-label="Increase"
         >
-          \u25B2
+          <ChevronUp className="size-3" />
         </button>
         <button
           type="button"
           onClick={() => onChange(Math.max(min, value - 1))}
-          className="flex-1 flex items-center justify-center px-2.5 text-xs text-semantic-text-muted hover:bg-semantic-bg-hover leading-none"
+          className="flex items-center justify-center text-semantic-text-muted hover:text-semantic-text-primary transition-colors"
           aria-label="Decrease"
         >
-          \u25BC
+          <ChevronDown className="size-3" />
         </button>
       </div>
     </div>
@@ -13458,7 +13480,7 @@ function AdvancedSettingsAccordion({
     <div className="bg-semantic-bg-primary border border-semantic-border-layout rounded-lg overflow-hidden">
       <Accordion type="single">
         <AccordionItem value="advanced">
-          <AccordionTrigger className="px-6 py-5 border-b border-semantic-border-layout hover:no-underline">
+          <AccordionTrigger className="px-4 py-4 border-b border-semantic-border-layout hover:no-underline sm:px-6 sm:py-5">
             <span className="text-base font-semibold text-semantic-text-primary">
               Advanced Settings
             </span>
@@ -13466,7 +13488,7 @@ function AdvancedSettingsAccordion({
           <AccordionContent>
             <div className="flex flex-col">
               {/* Number fields section */}
-              <div className="px-6 pt-5 pb-6 flex flex-col gap-5 border-b border-semantic-border-layout">
+              <div className="px-4 pt-4 pb-4 flex flex-col gap-5 border-b border-semantic-border-layout sm:px-6 sm:pt-5 sm:pb-6">
                 <Field label="Silence Timeout (seconds)">
                   <NumberSpinner
                     value={data.silenceTimeout ?? 15}
@@ -13493,7 +13515,7 @@ function AdvancedSettingsAccordion({
               </div>
 
               {/* Interruption Handling \u2014 separated by divider */}
-              <div className="px-6 py-5 flex items-center gap-3">
+              <div className="px-4 py-4 flex items-center gap-3 sm:px-6 sm:py-5">
                 <div className="flex flex-col gap-0.5 flex-1 min-w-0">
                   <span className="text-sm font-semibold text-semantic-text-primary">
                     Interruption Handling
@@ -13521,7 +13543,7 @@ function AdvancedSettingsAccordion({
 const DEFAULT_DATA: IvrBotConfigData = {
   botName: "",
   primaryRole: "",
-  tones: [],
+  tone: [],
   voice: "",
   language: "",
   systemPrompt: "",
@@ -13578,32 +13600,33 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
     return (
       <div ref={ref} className={cn("flex flex-col min-h-screen bg-semantic-bg-ui", className)}>
         {/* Page header */}
-        <header className="flex items-center justify-between px-6 h-[76px] bg-semantic-bg-primary border-b border-semantic-border-layout shrink-0">
+        <header className="flex flex-col gap-3 px-4 py-4 bg-semantic-bg-primary border-b border-semantic-border-layout shrink-0 sm:flex-row sm:items-center sm:justify-between sm:px-6 sm:py-0 sm:h-[76px]">
           <div className="flex items-center gap-3">
             <button
               type="button"
               onClick={onBack}
-              className="p-1 rounded text-semantic-text-muted hover:text-semantic-text-primary hover:bg-semantic-bg-hover transition-colors"
+              className="p-1 rounded text-semantic-text-muted hover:text-semantic-text-primary hover:bg-semantic-bg-hover transition-colors shrink-0"
               aria-label="Go back"
             >
               <ChevronLeft className="size-5" />
             </button>
-            <h1 className="m-0 text-base font-semibold text-semantic-text-primary">
+            <h1 className="m-0 text-base font-semibold text-semantic-text-primary truncate">
               {botTitle}
             </h1>
-            <Badge variant="outline" className="text-xs font-normal">
+            <Badge variant="outline" className="text-xs font-normal shrink-0">
               {botType}
             </Badge>
           </div>
           <div className="flex items-center gap-3">
             {lastUpdatedAt && (
-              <span className="text-sm text-semantic-text-muted">
+              <span className="hidden sm:inline text-sm text-semantic-text-muted">
                 Last updated at: {lastUpdatedAt}
               </span>
             )}
             <Button
               variant="outline"
               size="sm"
+              className="flex-1 sm:flex-none"
               onClick={() => onSaveAsDraft?.(data)}
             >
               Save as Draft
@@ -13611,6 +13634,7 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
             <Button
               variant="default"
               size="sm"
+              className="flex-1 sm:flex-none"
               onClick={() => onPublish?.(data)}
             >
               Publish Bot
@@ -13618,17 +13642,17 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
           </div>
         </header>
 
-        {/* Body \u2014 two-column layout */}
-        <div className="flex flex-1 gap-6 px-6 py-6 max-w-[1220px] mx-auto w-full">
+        {/* Body \u2014 responsive layout: stacked on mobile, two-column on lg+ */}
+        <div className="flex flex-col gap-6 px-4 py-4 max-w-[1220px] mx-auto w-full sm:px-6 sm:py-6 lg:flex-row lg:flex-1">
           {/* Left column */}
-          <div className="flex flex-col gap-6 flex-[3] min-w-0">
+          <div className="flex flex-col gap-6 lg:flex-[3] min-w-0">
             <WhoTheBotIs data={data} onChange={update} />
             <HowItBehaves data={data} onChange={update} />
             <FallbackPromptsAccordion data={data} onChange={update} />
           </div>
 
           {/* Right column */}
-          <div className="flex flex-col gap-6 flex-[2] min-w-0">
+          <div className="flex flex-col gap-6 lg:flex-[2] min-w-0">
             <KnowledgeBase
               files={data.knowledgeBaseFiles}
               onSaveFiles={onSaveKnowledgeFiles}
@@ -13670,12 +13694,11 @@ IvrBotConfig.displayName = "IvrBotConfig";
         {
           name: "create-function-modal.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
-import { Trash2, ChevronDown } from "lucide-react";
+import { Trash2, ChevronDown, X, Plus } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import {
   Dialog,
   DialogContent,
-  DialogHeader,
   DialogTitle,
 } from "../dialog";
 import { Button } from "../button";
@@ -13696,6 +13719,24 @@ function generateId() {
   return Math.random().toString(36).slice(2, 9);
 }
 
+// \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-10 px-4 text-sm 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-sm 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,
@@ -13705,394 +13746,478 @@ function KeyValueTable({
   onChange: (rows: KeyValuePair[]) => void;
   label: string;
 }) {
-  const handleKeyChange = (id: string, key: string) =>
-    onChange(rows.map((r) => (r.id === id ? { ...r, key } : r)));
+  const update = (id: string, patch: Partial<KeyValuePair>) =>
+    onChange(rows.map((r) => (r.id === id ? { ...r, ...patch } : r)));
 
-  const handleValueChange = (id: string, value: string) =>
-    onChange(rows.map((r) => (r.id === id ? { ...r, value } : r)));
+  const remove = (id: string) => onChange(rows.filter((r) => r.id !== id));
 
-  const handleDelete = (id: string) =>
-    onChange(rows.filter((r) => r.id !== id));
-
-  const handleAdd = () =>
+  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">
-        {/* Header row */}
-        <div className="flex bg-semantic-bg-primary border-b border-semantic-border-layout">
-          <div className="flex-1 px-3 py-2.5 text-sm font-semibold text-semantic-text-muted border-r border-semantic-border-layout">
+        {/* 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.5 text-sm font-semibold text-semantic-text-muted">
+          <div className="flex-[2] px-3 py-2 text-xs font-semibold text-semantic-text-muted">
             Value
           </div>
-          <div className="w-10" />
+          <div className="w-10 shrink-0" />
         </div>
-        {/* Data rows */}
+
+        {/* Filled rows */}
         {rows.map((row) => (
           <div
             key={row.id}
-            className="flex border-b border-semantic-border-layout last:border-b-0"
+            className="border-b border-semantic-border-layout last:border-b-0"
           >
-            <input
-              type="text"
-              value={row.key}
-              onChange={(e) => handleKeyChange(row.id, e.target.value)}
-              placeholder="Key"
-              className="flex-1 px-3 py-2.5 text-sm 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) => handleValueChange(row.id, e.target.value)}
-              placeholder="Type {{ to add variables"
-              className="flex-[2] px-3 py-2.5 text-sm text-semantic-text-primary placeholder:text-semantic-text-muted bg-semantic-bg-primary outline-none focus:bg-semantic-bg-hover"
-            />
-            <button
-              type="button"
-              onClick={() => handleDelete(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"
-              aria-label="Delete row"
-            >
-              <Trash2 className="size-3.5" />
-            </button>
+            {/* 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-sm 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-sm 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-sm 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-sm 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>
         ))}
-        {/* Empty input row */}
-        <div className="flex">
-          <input
-            type="text"
-            placeholder="Key"
-            readOnly
-            onClick={handleAdd}
-            className="flex-1 px-3 py-2.5 text-sm placeholder:text-semantic-text-muted bg-semantic-bg-primary border-r border-semantic-border-layout outline-none cursor-pointer"
-          />
-          <input
-            type="text"
-            placeholder="Type {{ to add variables"
-            readOnly
-            onClick={handleAdd}
-            className="flex-[2] px-3 py-2.5 text-sm placeholder:text-semantic-text-muted bg-semantic-bg-primary outline-none cursor-pointer"
-          />
-          <div className="w-10" />
-        </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);
-
-  // Step 1 state
-  const [name, setName] = React.useState("");
-  const [prompt, setPrompt] = React.useState("");
-
-  // Step 2 state
-  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);
-  };
+>(
+  (
+    {
+      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 handleBack = () => setStep(1);
+    const handleClose = React.useCallback(() => {
+      reset();
+      onOpenChange(false);
+    }, [reset, onOpenChange]);
 
-  const handleSubmit = () => {
-    const data: CreateFunctionData = {
-      name: name.trim(),
-      prompt: prompt.trim(),
-      method,
-      url: url.trim(),
-      headers,
-      queryParams,
-      body,
+    const handleNext = () => {
+      if (name.trim() && prompt.trim()) setStep(2);
     };
-    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 isStep1Valid = name.trim().length > 0 && prompt.trim().length > 0;
-  const tabCount = {
-    header: headers.length,
-    queryParams: queryParams.length,
-    body: 0,
-  };
+    const handleSubmit = () => {
+      const data: CreateFunctionData = {
+        name: name.trim(),
+        prompt: prompt.trim(),
+        method,
+        url: url.trim(),
+        headers,
+        queryParams,
+        body,
+      };
+      onSubmit?.(data);
+      handleClose();
+    };
 
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent ref={ref} size="lg" className={cn(className)}>
-        <DialogHeader>
-          <DialogTitle>Create Function</DialogTitle>
-        </DialogHeader>
+    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);
+      }
+    };
 
-        {step === 1 && (
-          <div className="flex flex-col gap-6">
-            {/* Function Name */}
-            <div className="flex flex-col gap-1">
-              <label
-                htmlFor="fn-name"
-                className="text-sm font-semibold text-semantic-text-primary"
-              >
-                Functions Name{" "}
-                <span className="text-semantic-error-primary font-semibold">*</span>
-              </label>
-              <div className="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(
-                    "w-full h-10 px-4 py-2.5 pr-16 text-sm 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)]"
-                  )}
-                />
-                <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs italic text-semantic-text-muted">
-                  {name.length}/{FUNCTION_NAME_MAX}
-                </span>
-              </div>
-            </div>
+    const isStep1Valid =
+      name.trim().length > 0 && prompt.trim().length > 0;
 
-            {/* Prompt */}
-            <div className="flex flex-col gap-1">
-              <label
-                htmlFor="fn-prompt"
-                className="text-sm font-semibold text-semantic-text-primary"
-              >
-                Prompt{" "}
-                <span className="text-semantic-error-primary font-semibold">*</span>
-              </label>
-              <textarea
-                id="fn-prompt"
-                value={prompt}
-                onChange={(e) => setPrompt(e.target.value)}
-                placeholder="Enter the Description of the functions"
-                rows={5}
-                className={cn(
-                  "w-full px-4 py-2.5 text-sm rounded border",
-                  "border-semantic-border-input bg-semantic-bg-primary resize-none",
-                  "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)]"
-                )}
-              />
-            </div>
+    const tabLabels: Record<FunctionTabType, string> = {
+      header: \`Header (\${headers.length})\`,
+      queryParams: \`Query params (\${queryParams.length})\`,
+      body: "Body",
+    };
 
-            <div className="flex justify-end">
-              <Button
-                variant="default"
-                onClick={handleNext}
-                disabled={!isStep1Valid}
-              >
-                Next
-              </Button>
-            </div>
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent
+          ref={ref}
+          size="lg"
+          hideCloseButton
+          className={cn(
+            "mx-4 sm:mx-auto flex flex-col gap-0 p-0",
+            "max-h-[calc(100svh-2rem)] overflow-hidden",
+            className
+          )}
+        >
+          {/* \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>
+            <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"
+            >
+              <X className="size-4" />
+            </button>
           </div>
-        )}
 
-        {step === 2 && (
-          <div className="flex flex-col gap-6">
-            {/* API URL */}
-            <div className="flex flex-col gap-1">
-              <span className="text-xs text-semantic-text-muted tracking-[0.048px]">API url</span>
-              <div className="flex h-10 border border-semantic-border-input rounded overflow-hidden 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">
-                  <select
-                    value={method}
-                    onChange={(e) => setMethod(e.target.value as HttpMethod)}
-                    className="h-full pl-4 pr-9 text-sm text-semantic-text-primary bg-semantic-bg-primary border-r border-semantic-border-input outline-none cursor-pointer appearance-none w-[104px]"
-                    aria-label="HTTP method"
+          {/* \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"
                   >
-                    {HTTP_METHODS.map((m) => (
-                      <option key={m} value={m}>
-                        {m}
-                      </option>
-                    ))}
-                  </select>
-                  <ChevronDown
-                    className="absolute right-3 top-1/2 -translate-y-1/2 size-3.5 text-semantic-text-muted pointer-events-none shrink-0"
-                    aria-hidden="true"
+                    Function Name{" "}
+                    <span className="text-semantic-error-primary">*</span>
+                  </label>
+                  <div className="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>
-                <input
-                  type="text"
-                  value={url}
-                  onChange={(e) => setUrl(e.target.value)}
-                  placeholder="Enter URL or Type {{ to add variables"
-                  className="flex-1 px-4 text-sm text-semantic-text-primary placeholder:text-semantic-text-muted bg-semantic-bg-primary outline-none"
-                />
               </div>
-            </div>
+            )}
 
-            {/* Tabs */}
-            <div className="flex flex-col gap-4">
-              <div className="flex gap-0 border-b border-semantic-border-layout">
-                {(["header", "queryParams", "body"] as FunctionTabType[]).map(
-                  (tab) => {
-                    const labels: Record<FunctionTabType, string> = {
-                      header: \`Header(\${tabCount.header})\`,
-                      queryParams: \`Query parameter(\${tabCount.queryParams})\`,
-                      body: "Body",
-                    };
-                    return (
+            {/* \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-10 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-sm 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-sm 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
+                    className={cn(
+                      "flex border-b border-semantic-border-layout",
+                      "overflow-x-auto",
+                      "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+                    )}
+                  >
+                    {(
+                      ["header", "queryParams", "body"] as FunctionTabType[]
+                    ).map((tab) => (
                       <button
                         key={tab}
                         type="button"
                         onClick={() => setActiveTab(tab)}
                         className={cn(
-                          "px-2.5 py-1.5 text-sm font-semibold transition-colors whitespace-nowrap",
+                          "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"
+                            : "text-semantic-text-muted hover:text-semantic-text-primary"
                         )}
                       >
-                        {labels[tab]}
+                        {tabLabels[tab]}
                       </button>
-                    );
-                  }
-                )}
-              </div>
+                    ))}
+                  </div>
 
-              {/* Tab Content */}
-              {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">
-                  <span className="text-xs text-semantic-text-muted">Body</span>
-                  <div className="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(
-                        "w-full px-4 py-2.5 pb-7 text-sm 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)]"
-                      )}
+                  {activeTab === "header" && (
+                    <KeyValueTable
+                      rows={headers}
+                      onChange={setHeaders}
+                      label="Header"
+                    />
+                  )}
+                  {activeTab === "queryParams" && (
+                    <KeyValueTable
+                      rows={queryParams}
+                      onChange={setQueryParams}
+                      label="Query parameter"
                     />
-                    <span className="absolute bottom-2 right-3 text-xs italic text-semantic-text-muted">
-                      {body.length}/{BODY_MAX}
+                  )}
+                  {activeTab === "body" && (
+                    <div className="flex flex-col gap-1.5">
+                      <span className="text-xs text-semantic-text-muted">
+                        Body
+                      </span>
+                      <div className="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>
-                </div>
-              )}
-            </div>
 
-            {/* Test Your API */}
-            <div className="flex flex-col gap-6">
-              {/* Label stacked above full-width divider */}
-              <div className="flex flex-col gap-1.5">
-                <span className="text-xs text-semantic-text-muted tracking-[0.048px]">
-                  Test Your API
-                </span>
-                <div className="border-t border-semantic-border-layout w-full" />
-              </div>
-              {/* Test API button right-aligned */}
-              <div className="flex justify-end">
-                <button
-                  type="button"
-                  onClick={handleTestApi}
-                  disabled={isTesting || !url.trim()}
-                  className="h-10 px-6 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"
-                >
-                  {isTesting ? "Testing..." : "Test API"}
-                </button>
-              </div>
-              {/* Row 3: Response from API */}
-              <div className="flex flex-col gap-1">
-                <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-sm rounded border border-semantic-border-layout bg-semantic-bg-ui text-semantic-text-primary resize-none outline-none"
-                  placeholder=""
-                />
+                  <button
+                    type="button"
+                    onClick={handleTestApi}
+                    disabled={isTesting || !url.trim()}
+                    className="w-full h-10 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-sm rounded border border-semantic-border-layout bg-semantic-bg-ui text-semantic-text-primary resize-none outline-none"
+                      placeholder=""
+                    />
+                  </div>
+                </div>
               </div>
-            </div>
+            )}
+          </div>
 
-            {/* Footer */}
-            <div className="flex justify-end gap-3">
-              <Button variant="outline" onClick={handleBack}>
-                Back
-              </Button>
-              <Button variant="default" onClick={handleSubmit}>
-                Submit
-              </Button>
-            </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>
+              </>
+            )}
           </div>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-});
+        </DialogContent>
+      </Dialog>
+    );
+  }
+);
 
 CreateFunctionModal.displayName = "CreateFunctionModal";
 `, prefix)
@@ -14155,7 +14280,7 @@ export interface CreateFunctionModalProps {
 export interface IvrBotConfigData {
   botName: string;
   primaryRole: string;
-  tones: string[];
+  tone: string[];
   voice: string;
   language: string;
   systemPrompt: string;