@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/voice-agent/components/VoiceEdgeRibbon.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { motion, useReducedMotion } from "motion/react";
 import { cn } from "@ai-matrx/design-system";
 const STOPS = {
@@ -19,7 +20,7 @@ function VoiceEdgeRibbon({ status, className }) {
   const visible = isActiveStatus(status);
   const palette = paletteForStatus(status);
   const stops = STOPS[palette];
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     motion.div,
     {
       className: cn(
@@ -28,67 +29,69 @@ function VoiceEdgeRibbon({ status, className }) {
         className
       ),
       style: { opacity: visible ? 1 : 0 },
-      "aria-hidden": "true"
-    },
-    /* @__PURE__ */ React.createElement(
-      motion.div,
-      {
-        className: "absolute inset-0 rounded-2xl",
-        style: {
-          // 6px stroke that's then blurred to ~16px of soft halo.
-          padding: "6px",
-          backgroundImage: `linear-gradient(110deg, ${stops})`,
-          backgroundSize: "300% 100%",
-          backgroundRepeat: "no-repeat",
-          backgroundPosition: "0% 50%",
-          WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
-          WebkitMaskComposite: "xor",
-          maskComposite: "exclude",
-          filter: "blur(10px)",
-          opacity: 0.55
-        },
-        animate: reduced ? void 0 : {
-          backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
-        },
-        transition: {
-          backgroundPosition: {
-            duration: 6,
-            repeat: Infinity,
-            ease: "easeInOut"
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "absolute inset-0 rounded-2xl",
+            style: {
+              // 6px stroke that's then blurred to ~16px of soft halo.
+              padding: "6px",
+              backgroundImage: `linear-gradient(110deg, ${stops})`,
+              backgroundSize: "300% 100%",
+              backgroundRepeat: "no-repeat",
+              backgroundPosition: "0% 50%",
+              WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+              WebkitMaskComposite: "xor",
+              maskComposite: "exclude",
+              filter: "blur(10px)",
+              opacity: 0.55
+            },
+            animate: reduced ? void 0 : {
+              backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
+            },
+            transition: {
+              backgroundPosition: {
+                duration: 6,
+                repeat: Infinity,
+                ease: "easeInOut"
+              }
+            }
           }
-        }
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      motion.div,
-      {
-        className: "absolute inset-0 rounded-2xl",
-        style: {
-          padding: "1.5px",
-          backgroundImage: `linear-gradient(110deg, ${stops})`,
-          backgroundSize: "300% 100%",
-          backgroundRepeat: "no-repeat",
-          backgroundPosition: "0% 50%",
-          WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
-          WebkitMaskComposite: "xor",
-          maskComposite: "exclude",
-          opacity: 0.85
-        },
-        animate: reduced ? void 0 : {
-          backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
-        },
-        transition: {
-          backgroundPosition: {
-            duration: 6,
-            repeat: Infinity,
-            ease: "easeInOut",
-            // Subtle 0.25 s offset from the halo creates the "follow-
-            // through" feel — Rauno's "Disney follow-through" rule.
-            delay: 0.25
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "absolute inset-0 rounded-2xl",
+            style: {
+              padding: "1.5px",
+              backgroundImage: `linear-gradient(110deg, ${stops})`,
+              backgroundSize: "300% 100%",
+              backgroundRepeat: "no-repeat",
+              backgroundPosition: "0% 50%",
+              WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+              WebkitMaskComposite: "xor",
+              maskComposite: "exclude",
+              opacity: 0.85
+            },
+            animate: reduced ? void 0 : {
+              backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
+            },
+            transition: {
+              backgroundPosition: {
+                duration: 6,
+                repeat: Infinity,
+                ease: "easeInOut",
+                // Subtle 0.25 s offset from the halo creates the "follow-
+                // through" feel — Rauno's "Disney follow-through" rule.
+                delay: 0.25
+              }
+            }
           }
-        }
-      }
-    )
+        )
+      ]
+    }
   );
 }
 export {

package/dist/voice-agent/components/VoiceErrorBanner.js

@@ -1,32 +1,35 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertCircle } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { ErrorBox } from "@ai-matrx/design-system";
 function VoiceErrorBanner({ error }) {
-  return /* @__PURE__ */ React.createElement(AnimatePresence, null, error ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: error ? /* @__PURE__ */ jsx(
     motion.div,
     {
-      key: error.code,
       initial: { opacity: 0, y: -6 },
       animate: { opacity: 1, y: 0 },
       exit: { opacity: 0, y: -6 },
       transition: { duration: 0.25 },
-      className: "mx-auto max-w-md"
+      className: "mx-auto max-w-md",
+      children: /* @__PURE__ */ jsxs(
+        ErrorBox,
+        {
+          as: "div",
+          className: "rounded-lg border border-destructive/40 bg-destructive/5 px-4 py-2 text-sm text-destructive-ink flex items-start gap-2",
+          message: error.message,
+          error,
+          operation: "Voice agent",
+          origin: "chat/VoiceErrorBanner",
+          children: [
+            /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 mt-0.5 shrink-0", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "leading-snug", children: error.message })
+          ]
+        }
+      )
     },
-    /* @__PURE__ */ React.createElement(
-      ErrorBox,
-      {
-        as: "div",
-        className: "rounded-lg border border-destructive/40 bg-destructive/5 px-4 py-2 text-sm text-destructive-ink flex items-start gap-2",
-        message: error.message,
-        error,
-        operation: "Voice agent",
-        origin: "chat/VoiceErrorBanner"
-      },
-      /* @__PURE__ */ React.createElement(AlertCircle, { className: "h-4 w-4 mt-0.5 shrink-0", "aria-hidden": "true" }),
-      /* @__PURE__ */ React.createElement("span", { className: "leading-snug" }, error.message)
-    )
-  ) : null);
+    error.code
+  ) : null });
 }
 export {
   VoiceErrorBanner

package/dist/voice-agent/components/VoiceMicButton.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { AudioLines, CircleStop, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { cn } from "@ai-matrx/design-system";
@@ -11,7 +12,7 @@ function VoiceMicButton({
   const isBusy = status === "requesting-mic" || status === "connecting";
   const isError = status === "error";
   const label = ariaForStatus(status, isActive);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     motion.button,
     {
       type: "button",
@@ -29,9 +30,9 @@ function VoiceMicButton({
         "disabled:cursor-not-allowed",
         isError ? "bg-destructive text-destructive-foreground border-destructive shadow-[0_0_28px_rgba(239,68,68,0.35)]" : isActive ? "bg-primary text-primary-foreground border-primary shadow-[0_0_36px_rgba(59,130,246,0.45)]" : "bg-card text-foreground border-border hover:border-primary hover:text-primary"
       ),
-      style: { width: size, height: size }
-    },
-    isBusy ? /* @__PURE__ */ React.createElement(Loader2, { className: "h-7 w-7 animate-spin", "aria-hidden": "true" }) : isActive ? /* @__PURE__ */ React.createElement(CircleStop, { className: "h-7 w-7", "aria-hidden": "true" }) : /* @__PURE__ */ React.createElement(AudioLines, { className: "h-7 w-7", "aria-hidden": "true" })
+      style: { width: size, height: size },
+      children: isBusy ? /* @__PURE__ */ jsx(Loader2, { className: "h-7 w-7 animate-spin", "aria-hidden": "true" }) : isActive ? /* @__PURE__ */ jsx(CircleStop, { className: "h-7 w-7", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(AudioLines, { className: "h-7 w-7", "aria-hidden": "true" })
+    }
   );
 }
 function ariaForStatus(status, isActive) {

package/dist/voice-agent/components/VoiceMuteButton.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { Mic, MicOff } from "lucide-react";
 import { motion } from "motion/react";
 import { cn } from "@ai-matrx/design-system";
@@ -9,7 +10,7 @@ function VoiceMuteButton({
   className
 }) {
   const label = muted ? "Unmute microphone" : "Mute microphone";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     motion.button,
     {
       type: "button",
@@ -26,9 +27,9 @@ function VoiceMuteButton({
         muted ? "bg-muted text-muted-foreground border-border" : "bg-card text-foreground border-border hover:border-primary hover:text-primary",
         className
       ),
-      style: { width: size, height: size }
-    },
-    muted ? /* @__PURE__ */ React.createElement(MicOff, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ React.createElement(Mic, { className: "h-5 w-5", "aria-hidden": "true" })
+      style: { width: size, height: size },
+      children: muted ? /* @__PURE__ */ jsx(MicOff, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Mic, { className: "h-5 w-5", "aria-hidden": "true" })
+    }
   );
 }
 export {

package/dist/voice-agent/components/VoiceOrb.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { motion, useReducedMotion, useTransform } from "motion/react";
 import { cn } from "@ai-matrx/design-system";
 import { useAudioAmplitude } from "../hooks/useAudioAmplitude.js";
@@ -67,7 +68,7 @@ function VoiceOrb({ status, size = 260, className }) {
     return 0;
   });
   const thinkHueShift = isThinking && !reduced ? "thinking-hue" : void 0;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
@@ -76,89 +77,91 @@ function VoiceOrb({ status, size = 260, className }) {
         className
       ),
       style: { width: size, height: size },
-      "aria-hidden": "true"
-    },
-    /* @__PURE__ */ React.createElement(
-      motion.div,
-      {
-        className: "absolute inset-0 rounded-full",
-        style: {
-          opacity: bloomOpacity,
-          scale: bloomScale,
-          background: `radial-gradient(circle, oklch(0.82 ${sat} ${hue}) 0%, oklch(0.62 ${sat * 1.1} ${hue} / 0.45) 35%, transparent 70%)`,
-          filter: "blur(14px)"
-        },
-        transition: {
-          scale: { type: "spring", stiffness: 240, damping: 26 }
-        }
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      motion.div,
-      {
-        className: "absolute inset-[18%] rounded-full",
-        style: {
-          opacity: coreOpacity,
-          scale: coreScale,
-          background: `radial-gradient(circle at 40% 35%, oklch(0.92 ${sat * 0.7} ${hue}) 0%, oklch(0.72 ${sat} ${hue}) 45%, oklch(0.55 ${sat * 1.2} ${hue}) 80%, transparent 100%)`,
-          filter: "blur(2px)"
-        },
-        transition: {
-          scale: { type: "spring", stiffness: 200, damping: 24 }
-        },
-        animate: isIdleish && !reduced ? { scale: [0.96, 1.02, 0.96] } : void 0,
-        ...isIdleish && !reduced ? {
-          transition: {
-            scale: {
-              duration: 4,
-              repeat: Infinity,
-              ease: "easeInOut"
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "absolute inset-0 rounded-full",
+            style: {
+              opacity: bloomOpacity,
+              scale: bloomScale,
+              background: `radial-gradient(circle, oklch(0.82 ${sat} ${hue}) 0%, oklch(0.62 ${sat * 1.1} ${hue} / 0.45) 35%, transparent 70%)`,
+              filter: "blur(14px)"
+            },
+            transition: {
+              scale: { type: "spring", stiffness: 240, damping: 26 }
             }
           }
-        } : {}
-      }
-    ),
-    thinkHueShift && /* @__PURE__ */ React.createElement(
-      motion.div,
-      {
-        key: "thinking-hue",
-        className: "absolute inset-[18%] rounded-full mix-blend-overlay",
-        style: {
-          background: "conic-gradient(from 0deg, oklch(0.78 0.18 260), oklch(0.78 0.18 290), oklch(0.78 0.18 320), oklch(0.78 0.18 260))",
-          filter: "blur(6px)",
-          opacity: 0.5
-        },
-        animate: { rotate: 360 },
-        transition: {
-          rotate: {
-            duration: 4.2,
-            repeat: Infinity,
-            ease: "linear"
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "absolute inset-[18%] rounded-full",
+            style: {
+              opacity: coreOpacity,
+              scale: coreScale,
+              background: `radial-gradient(circle at 40% 35%, oklch(0.92 ${sat * 0.7} ${hue}) 0%, oklch(0.72 ${sat} ${hue}) 45%, oklch(0.55 ${sat * 1.2} ${hue}) 80%, transparent 100%)`,
+              filter: "blur(2px)"
+            },
+            transition: {
+              scale: { type: "spring", stiffness: 200, damping: 24 }
+            },
+            animate: isIdleish && !reduced ? { scale: [0.96, 1.02, 0.96] } : void 0,
+            ...isIdleish && !reduced ? {
+              transition: {
+                scale: {
+                  duration: 4,
+                  repeat: Infinity,
+                  ease: "easeInOut"
+                }
+              }
+            } : {}
           }
-        }
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      motion.div,
-      {
-        className: "absolute inset-0 rounded-full mix-blend-soft-light",
-        style: {
-          background: "radial-gradient(circle, oklch(0.92 0.14 220 / 0.5) 0%, transparent 60%)",
-          opacity: isListening ? 0.6 : 0,
-          rotate: hueOffset
-        },
-        transition: { opacity: { duration: 0.4 } }
-      }
-    ),
-    isError && /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "absolute inset-[18%] rounded-full ring-2 ring-destructive/70",
-        style: {
-          boxShadow: "0 0 24px oklch(0.55 0.22 25 / 0.55)"
-        }
-      }
-    )
+        ),
+        thinkHueShift && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "absolute inset-[18%] rounded-full mix-blend-overlay",
+            style: {
+              background: "conic-gradient(from 0deg, oklch(0.78 0.18 260), oklch(0.78 0.18 290), oklch(0.78 0.18 320), oklch(0.78 0.18 260))",
+              filter: "blur(6px)",
+              opacity: 0.5
+            },
+            animate: { rotate: 360 },
+            transition: {
+              rotate: {
+                duration: 4.2,
+                repeat: Infinity,
+                ease: "linear"
+              }
+            }
+          },
+          "thinking-hue"
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "absolute inset-0 rounded-full mix-blend-soft-light",
+            style: {
+              background: "radial-gradient(circle, oklch(0.92 0.14 220 / 0.5) 0%, transparent 60%)",
+              opacity: isListening ? 0.6 : 0,
+              rotate: hueOffset
+            },
+            transition: { opacity: { duration: 0.4 } }
+          }
+        ),
+        isError && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-[18%] rounded-full ring-2 ring-destructive/70",
+            style: {
+              boxShadow: "0 0 24px oklch(0.55 0.22 25 / 0.55)"
+            }
+          }
+        )
+      ]
+    }
   );
 }
 export {

package/dist/voice-agent/components/VoiceStatusPill.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { cn } from "@ai-matrx/design-system";
 const LABELS = {
   idle: "Tap to begin",
@@ -16,7 +17,7 @@ function VoiceStatusPill({
   className
 }) {
   const text = micMuted && (status === "listening" || status === "thinking" || status === "speaking" || status === "interrupting") ? "Muted" : LABELS[status];
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
@@ -25,16 +26,16 @@ function VoiceStatusPill({
         status === "error" && "text-destructive",
         className
       ),
-      "aria-live": "polite"
-    },
-    /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        key: status,
-        className: "transition-opacity duration-200 ease-out motion-safe:animate-in motion-safe:fade-in"
-      },
-      text
-    )
+      "aria-live": "polite",
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "transition-opacity duration-200 ease-out motion-safe:animate-in motion-safe:fade-in",
+          children: text
+        },
+        status
+      )
+    }
   );
 }
 export {

package/dist/voice-agent/components/VoiceTranscriptStream.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { AnimatePresence } from "motion/react";
 import { cn } from "@ai-matrx/design-system";
@@ -11,17 +12,19 @@ function VoiceTranscriptStream({
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
   }, [turns]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "max-w-2xl mx-auto px-6 py-4 w-full",
         "text-pretty",
         className
-      )
-    },
-    /* @__PURE__ */ React.createElement(AnimatePresence, { initial: false }, turns.map((turn) => /* @__PURE__ */ React.createElement(VoiceTranscriptTurn, { key: turn.id, turn }))),
-    /* @__PURE__ */ React.createElement("div", { ref: bottomRef, className: "h-1", "aria-hidden": "true" })
+      ),
+      children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: turns.map((turn) => /* @__PURE__ */ jsx(VoiceTranscriptTurn, { turn }, turn.id)) }),
+        /* @__PURE__ */ jsx("div", { ref: bottomRef, className: "h-1", "aria-hidden": "true" })
+      ]
+    }
   );
 }
 export {

package/dist/voice-agent/components/VoiceTranscriptTurn.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "motion/react";
 import { cn } from "@ai-matrx/design-system";
 import { answerPreviewText } from "../../host/ui-slots.js";
@@ -6,7 +7,7 @@ function VoiceTranscriptTurn({ turn }) {
   const isUser = turn.role === "user";
   const isInterrupted = turn.status === "interrupted";
   const visibleText = isUser ? turn.text : turn.text.slice(0, turn.text_reveal_index);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     motion.div,
     {
       layout: true,
@@ -16,25 +17,27 @@ function VoiceTranscriptTurn({ turn }) {
       className: cn(
         "py-2 first:pt-0 last:pb-0",
         "transition-opacity duration-200"
-      )
-    },
-    /* @__PURE__ */ React.createElement(
-      "p",
-      {
-        className: cn(
-          "text-base leading-relaxed",
-          isUser ? "text-foreground" : "text-muted-foreground"
-        )
-      },
-      isUser ? visibleText : answerPreviewText(visibleText, turn.status === "pending"),
-      turn.status === "pending" && /* @__PURE__ */ React.createElement(
-        "span",
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "p",
         {
-          className: "ml-1 inline-block h-4 w-[2px] -mb-0.5 bg-current align-middle opacity-60 motion-safe:animate-pulse",
-          "aria-hidden": "true"
+          className: cn(
+            "text-base leading-relaxed",
+            isUser ? "text-foreground" : "text-muted-foreground"
+          ),
+          children: [
+            isUser ? visibleText : answerPreviewText(visibleText, turn.status === "pending"),
+            turn.status === "pending" && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "ml-1 inline-block h-4 w-[2px] -mb-0.5 bg-current align-middle opacity-60 motion-safe:animate-pulse",
+                "aria-hidden": "true"
+              }
+            )
+          ]
         }
       )
-    )
+    }
   );
 }
 export {

package/dist/voice-agent/components/playground/InstructionsEditor.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useAppDispatch, useAppSelector } from "../../../store/hooks.js";
 import { RotateCcw } from "lucide-react";
 import { Button } from "@ai-matrx/design-system/controls";
@@ -20,34 +21,40 @@ function InstructionsEditor({
     error
   } = useMandateAgentInstructions(VOICE_INTRO_MANDATE_KEY);
   const canReset = !disabled && !!defaultInstructions && value !== defaultInstructions;
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement(Label, { htmlFor: "instructions", className: "text-sm font-medium" }, "Instructions"), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      icon: /* @__PURE__ */ React.createElement(RotateCcw, null),
-      type: "button",
-      variant: "quiet",
-      disabled: !canReset,
-      title: error ? `Default unavailable \u2014 ${error}` : loading ? "Loading the default agent's instructions\u2026" : "Reset to the default voice agent's instructions",
-      onClick: () => {
-        if (!defaultInstructions) return;
-        dispatch(
-          updateConfig({ instanceId, instructions: defaultInstructions })
-        );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "instructions", className: "text-sm font-medium", children: "Instructions" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(RotateCcw, {}),
+          type: "button",
+          variant: "quiet",
+          disabled: !canReset,
+          title: error ? `Default unavailable \u2014 ${error}` : loading ? "Loading the default agent's instructions\u2026" : "Reset to the default voice agent's instructions",
+          onClick: () => {
+            if (!defaultInstructions) return;
+            dispatch(
+              updateConfig({ instanceId, instructions: defaultInstructions })
+            );
+          },
+          children: "Reset"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      ProTextarea,
+      {
+        id: "instructions",
+        value,
+        onChange: (e) => dispatch(updateConfig({ instanceId, instructions: e.target.value })),
+        disabled,
+        rows: 14,
+        className: "font-mono text-xs leading-relaxed resize-none",
+        spellCheck: false
       }
-    },
-    "Reset"
-  )), /* @__PURE__ */ React.createElement(
-    ProTextarea,
-    {
-      id: "instructions",
-      value,
-      onChange: (e) => dispatch(updateConfig({ instanceId, instructions: e.target.value })),
-      disabled,
-      rows: 14,
-      className: "font-mono text-xs leading-relaxed resize-none",
-      spellCheck: false
-    }
-  ));
+    )
+  ] });
 }
 export {
   InstructionsEditor