@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/utils/resource-picker/ResourcePickerSubViewHeader.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useEffect } from "react";
 import { ChevronDown, ChevronLeft, ChevronRight, Link2, Loader2, Search, X } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
@@ -21,27 +22,41 @@ function ResourcePickerSubViewHeader({
   }, [registerBack, onBack, disabled]);
   if (registerBack) {
     if (!search && !actions) return null;
-    return /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-center gap-1.5 pb-2" }, search ? /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, search) : /* @__PURE__ */ React.createElement("div", { className: "flex-1" }), actions);
+    return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5 pb-2", children: [
+      search ? /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: search }) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      actions
+    ] });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-center gap-1.5 border-b border-border p-1.5" }, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(ChevronLeft, null), onClick: onBack, disabled, "aria-label": "Back", className: "shrink-0" }), search ? /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, search) : /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 flex-1 items-center gap-2" }, icon, /* @__PURE__ */ React.createElement("span", { className: "truncate text-sm font-medium text-foreground" }, title)), actions);
+  return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5 border-b border-border p-1.5", children: [
+    /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(ChevronLeft, {}), onClick: onBack, disabled, "aria-label": "Back", className: "shrink-0" }),
+    search ? /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: search }) : /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+      icon,
+      /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: title })
+    ] }),
+    actions
+  ] });
 }
 const PickerSearchField = forwardRef(function PickerSearchField2({ value, onChange, placeholder, loading, onKeyDown, type = "text", disabled }, ref) {
-  return /* @__PURE__ */ React.createElement("div", { className: "relative" }, loading ? /* @__PURE__ */ React.createElement(Loader2, { className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-muted-foreground" }) : /* @__PURE__ */ (() => {
-    const Lead = type === "url" ? Link2 : Search;
-    return /* @__PURE__ */ React.createElement(Lead, { className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" });
-  })(), /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      ref,
-      type,
-      value,
-      placeholder,
-      onChange: (e) => onChange(e.target.value),
-      onKeyDown,
-      disabled,
-      className: "h-9 w-full disabled:opacity-60 rounded-lg border border-border bg-muted/40 pl-8 pr-8 text-sm text-foreground outline-none placeholder:text-muted-foreground focus:border-primary/40 focus:bg-background pointer-coarse:h-11"
-    }
-  ), value ? /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(X, null), "aria-label": "Clear", onClick: () => onChange(""), className: "absolute right-1.5 top-1/2" }) : null);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    loading ? /* @__PURE__ */ jsx(Loader2, { className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-muted-foreground" }) : /* @__PURE__ */ (() => {
+      const Lead = type === "url" ? Link2 : Search;
+      return /* @__PURE__ */ jsx(Lead, { className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" });
+    })(),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type,
+        value,
+        placeholder,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown,
+        disabled,
+        className: "h-9 w-full disabled:opacity-60 rounded-lg border border-border bg-muted/40 pl-8 pr-8 text-sm text-foreground outline-none placeholder:text-muted-foreground focus:border-primary/40 focus:bg-background pointer-coarse:h-11"
+      }
+    ),
+    value ? /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(X, {}), "aria-label": "Clear", onClick: () => onChange(""), className: "absolute right-1.5 top-1/2" }) : null
+  ] });
 });
 function PickerSelect({
   value,
@@ -50,28 +65,34 @@ function PickerSelect({
   label,
   className
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: cn("relative min-w-0", className) }, /* @__PURE__ */ React.createElement(
-    "select",
-    {
-      "aria-label": label,
-      value,
-      onChange: (e) => onChange(e.target.value),
-      className: "h-9 w-full min-w-0 appearance-none truncate rounded-lg border border-border bg-background pl-2.5 pr-8 text-sm text-foreground outline-none focus:border-primary/40 pointer-coarse:h-11"
-    },
-    options.map((option) => /* @__PURE__ */ React.createElement("option", { key: option.value, value: option.value }, option.label))
-  ), /* @__PURE__ */ React.createElement(ChevronDown, { className: "pointer-events-none absolute right-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }));
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative min-w-0", className), children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        "aria-label": label,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        className: "h-9 w-full min-w-0 appearance-none truncate rounded-lg border border-border bg-background pl-2.5 pr-8 text-sm text-foreground outline-none focus:border-primary/40 pointer-coarse:h-11",
+        children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+      }
+    ),
+    /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute right-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" })
+  ] });
 }
 function PickerViewBody({ children, className }) {
-  return /* @__PURE__ */ React.createElement("div", { className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain p-1.5", className) }, children);
+  return /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain p-1.5", className), children });
 }
 function PickerView({ children, className }) {
-  return /* @__PURE__ */ React.createElement("div", { className: cn("flex h-full max-h-[min(600px,80dvh)] min-h-0 flex-col", className) }, children);
+  return /* @__PURE__ */ jsx("div", { className: cn("flex h-full max-h-[min(600px,80dvh)] min-h-0 flex-col", className), children });
 }
 function PickerSectionLabel({ children, action }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 px-2 pb-1 pt-2" }, /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate text-xs font-medium text-muted-foreground" }, children), action);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 pb-1 pt-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-xs font-medium text-muted-foreground", children }),
+    action
+  ] });
 }
 function PickerEmpty({ children }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "px-3 py-10 text-center text-sm text-muted-foreground" }, children);
+  return /* @__PURE__ */ jsx("div", { className: "px-3 py-10 text-center text-sm text-muted-foreground", children });
 }
 function PickerRow({
   icon: Icon,
@@ -88,7 +109,7 @@ function PickerRow({
   title,
   onClick
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -100,13 +121,18 @@ function PickerRow({
         "group flex w-full min-w-0 items-center gap-2.5 rounded-lg px-1.5 text-left transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-60",
         secondary ? "min-h-11 py-1.5 pointer-coarse:min-h-14" : "h-9 pointer-coarse:h-11",
         selected && "bg-primary/5"
-      )
-    },
-    leading ?? (Icon ? /* @__PURE__ */ React.createElement("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted" }, /* @__PURE__ */ React.createElement(Icon, { className: cn("h-4 w-4", iconClassName ?? "text-muted-foreground") })) : null),
-    /* @__PURE__ */ React.createElement("span", { className: "flex min-w-0 flex-1 flex-col" }, /* @__PURE__ */ React.createElement("span", { className: "truncate text-sm text-foreground" }, label), secondary ? /* @__PURE__ */ React.createElement("span", { className: "truncate text-xs text-muted-foreground" }, secondary) : null),
-    busy ? /* @__PURE__ */ React.createElement(Loader2, { className: "h-4 w-4 shrink-0 animate-spin text-muted-foreground" }) : null,
-    trailing,
-    chevron ? /* @__PURE__ */ React.createElement(ChevronRight, { className: "h-4 w-4 shrink-0 text-muted-foreground/60 group-hover:text-muted-foreground" }) : null
+      ),
+      children: [
+        leading ?? (Icon ? /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted", children: /* @__PURE__ */ jsx(Icon, { className: cn("h-4 w-4", iconClassName ?? "text-muted-foreground") }) }) : null),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-foreground", children: label }),
+          secondary ? /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: secondary }) : null
+        ] }),
+        busy ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 shrink-0 animate-spin text-muted-foreground" }) : null,
+        trailing,
+        chevron ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0 text-muted-foreground/60 group-hover:text-muted-foreground" }) : null
+      ]
+    }
   );
 }
 const RESOURCE_PICKER_RUN_CONTROL_HEIGHT_CLASS = "max-h-[min(480px,68dvh)]";

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

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Link } from "../../host/navigation.js";
 import { useState } from "react";
 import { ArrowLeft, Music2 } from "lucide-react";
@@ -17,97 +18,133 @@ function GoogleLiveSurface() {
     responseModalities: [responseMode]
   });
   const active = session.status !== "idle" && session.status !== "error";
-  return /* @__PURE__ */ React.createElement("div", { className: "flex h-dvh flex-col overflow-hidden bg-background text-foreground" }, /* @__PURE__ */ React.createElement("header", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border/50 px-4 py-3 pr-14" }, /* @__PURE__ */ React.createElement(
-    Link,
-    {
-      href: "/chat/voice/playground",
-      className: "inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
-    },
-    /* @__PURE__ */ React.createElement(ArrowLeft, { className: "h-4 w-4" }),
-    "Voice playground"
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 items-center gap-2" }, /* @__PURE__ */ React.createElement(
-    "select",
-    {
-      "aria-label": "Thinking level",
-      value: thinkingLevel,
-      disabled: active,
-      onChange: (event) => setThinkingLevel(
-        event.target.value
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-dvh flex-col overflow-hidden bg-background text-foreground", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border/50 px-4 py-3 pr-14", children: [
+      /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: "/chat/voice/playground",
+          className: "inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground",
+          children: [
+            /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }),
+            "Voice playground"
+          ]
+        }
       ),
-      className: "h-8 rounded-md border border-border bg-background px-2 text-xs disabled:opacity-60"
-    },
-    /* @__PURE__ */ React.createElement("option", { value: "minimal" }, "Minimal thinking"),
-    /* @__PURE__ */ React.createElement("option", { value: "low" }, "Low thinking"),
-    /* @__PURE__ */ React.createElement("option", { value: "medium" }, "Medium thinking"),
-    /* @__PURE__ */ React.createElement("option", { value: "high" }, "High thinking")
-  ), /* @__PURE__ */ React.createElement(
-    "select",
-    {
-      "aria-label": "Turn coverage",
-      value: turnCoverage,
-      disabled: active,
-      onChange: (event) => setTurnCoverage(
-        event.target.value
-      ),
-      className: "hidden h-8 rounded-md border border-border bg-background px-2 text-xs disabled:opacity-60 sm:block"
-    },
-    /* @__PURE__ */ React.createElement("option", { value: "TURN_INCLUDES_ONLY_ACTIVITY" }, "Activity only"),
-    /* @__PURE__ */ React.createElement("option", { value: "TURN_INCLUDES_ALL_INPUT" }, "All input")
-  ), /* @__PURE__ */ React.createElement(
-    "select",
-    {
-      "aria-label": "Response modality",
-      value: responseMode,
-      disabled: active,
-      onChange: (event) => setResponseMode(event.target.value),
-      className: "hidden h-8 rounded-md border border-border bg-background px-2 text-xs disabled:opacity-60 md:block"
-    },
-    /* @__PURE__ */ React.createElement("option", { value: "AUDIO" }, "Audio response"),
-    /* @__PURE__ */ React.createElement("option", { value: "TEXT" }, "Text response")
-  )), /* @__PURE__ */ React.createElement(
-    Link,
-    {
-      href: "/chat/voice/music",
-      className: "inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
-    },
-    /* @__PURE__ */ React.createElement(Music2, { className: "h-4 w-4" }),
-    "Music"
-  )), /* @__PURE__ */ React.createElement("main", { className: "grid min-h-0 flex-1 lg:grid-cols-[minmax(0,1fr)_23rem]" }, /* @__PURE__ */ React.createElement("section", { className: "relative flex min-h-[28rem] items-center justify-center overflow-hidden border-b border-border/40 lg:border-b-0 lg:border-r" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center gap-5" }, /* @__PURE__ */ React.createElement(
-    VoiceStatusPill,
-    {
-      status: session.status,
-      micMuted: session.micMuted
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "relative size-[260px]" }, /* @__PURE__ */ React.createElement(VoiceOrb, { status: session.status }), /* @__PURE__ */ React.createElement("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" }, /* @__PURE__ */ React.createElement(
-    VoiceControlCluster,
-    {
-      status: session.status,
-      micMuted: session.micMuted,
-      onToggleSession: session.toggle,
-      onToggleMute: session.toggleMute
-    }
-  ))), /* @__PURE__ */ React.createElement("p", { className: "max-w-md px-6 text-center text-sm text-muted-foreground" }, "Speak naturally. Audio is streamed at Google Live's native 16 kHz input rate; responses play as 24 kHz PCM. Interrupted connections resume with the provider's session handle."), /* @__PURE__ */ React.createElement("div", { className: "w-full max-w-md px-4" }, /* @__PURE__ */ React.createElement(
-    VoiceErrorBanner,
-    {
-      error: session.error ? { code: "google-live", message: session.error } : null
-    }
-  )))), /* @__PURE__ */ React.createElement(
-    "aside",
-    {
-      className: "min-h-0 overflow-y-auto p-4",
-      "aria-label": "Live transcript"
-    },
-    /* @__PURE__ */ React.createElement("h2", { className: "mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground" }, "Live transcript"),
-    session.turns.length === 0 ? /* @__PURE__ */ React.createElement("p", { className: "rounded-lg border border-dashed p-4 text-sm text-muted-foreground" }, "Transcript updates will appear here while you speak and while Gemini responds.") : /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, session.turns.map((turn) => /* @__PURE__ */ React.createElement(
-      "article",
-      {
-        key: turn.id,
-        className: "rounded-lg border border-border/60 bg-card p-3"
-      },
-      /* @__PURE__ */ React.createElement("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground" }, turn.role === "user" ? "You" : "Gemini"),
-      /* @__PURE__ */ React.createElement("p", { className: "whitespace-pre-wrap text-sm leading-relaxed" }, turn.text)
-    )))
-  )));
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            "aria-label": "Thinking level",
+            value: thinkingLevel,
+            disabled: active,
+            onChange: (event) => setThinkingLevel(
+              event.target.value
+            ),
+            className: "h-8 rounded-md border border-border bg-background px-2 text-xs disabled:opacity-60",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "minimal", children: "Minimal thinking" }),
+              /* @__PURE__ */ jsx("option", { value: "low", children: "Low thinking" }),
+              /* @__PURE__ */ jsx("option", { value: "medium", children: "Medium thinking" }),
+              /* @__PURE__ */ jsx("option", { value: "high", children: "High thinking" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            "aria-label": "Turn coverage",
+            value: turnCoverage,
+            disabled: active,
+            onChange: (event) => setTurnCoverage(
+              event.target.value
+            ),
+            className: "hidden h-8 rounded-md border border-border bg-background px-2 text-xs disabled:opacity-60 sm:block",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "TURN_INCLUDES_ONLY_ACTIVITY", children: "Activity only" }),
+              /* @__PURE__ */ jsx("option", { value: "TURN_INCLUDES_ALL_INPUT", children: "All input" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            "aria-label": "Response modality",
+            value: responseMode,
+            disabled: active,
+            onChange: (event) => setResponseMode(event.target.value),
+            className: "hidden h-8 rounded-md border border-border bg-background px-2 text-xs disabled:opacity-60 md:block",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "AUDIO", children: "Audio response" }),
+              /* @__PURE__ */ jsx("option", { value: "TEXT", children: "Text response" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: "/chat/voice/music",
+          className: "inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground",
+          children: [
+            /* @__PURE__ */ jsx(Music2, { className: "h-4 w-4" }),
+            "Music"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("main", { className: "grid min-h-0 flex-1 lg:grid-cols-[minmax(0,1fr)_23rem]", children: [
+      /* @__PURE__ */ jsx("section", { className: "relative flex min-h-[28rem] items-center justify-center overflow-hidden border-b border-border/40 lg:border-b-0 lg:border-r", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-5", children: [
+        /* @__PURE__ */ jsx(
+          VoiceStatusPill,
+          {
+            status: session.status,
+            micMuted: session.micMuted
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative size-[260px]", children: [
+          /* @__PURE__ */ jsx(VoiceOrb, { status: session.status }),
+          /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(
+            VoiceControlCluster,
+            {
+              status: session.status,
+              micMuted: session.micMuted,
+              onToggleSession: session.toggle,
+              onToggleMute: session.toggleMute
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "max-w-md px-6 text-center text-sm text-muted-foreground", children: "Speak naturally. Audio is streamed at Google Live's native 16 kHz input rate; responses play as 24 kHz PCM. Interrupted connections resume with the provider's session handle." }),
+        /* @__PURE__ */ jsx("div", { className: "w-full max-w-md px-4", children: /* @__PURE__ */ jsx(
+          VoiceErrorBanner,
+          {
+            error: session.error ? { code: "google-live", message: session.error } : null
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ jsxs(
+        "aside",
+        {
+          className: "min-h-0 overflow-y-auto p-4",
+          "aria-label": "Live transcript",
+          children: [
+            /* @__PURE__ */ jsx("h2", { className: "mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Live transcript" }),
+            session.turns.length === 0 ? /* @__PURE__ */ jsx("p", { className: "rounded-lg border border-dashed p-4 text-sm text-muted-foreground", children: "Transcript updates will appear here while you speak and while Gemini responds." }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: session.turns.map((turn) => /* @__PURE__ */ jsxs(
+              "article",
+              {
+                className: "rounded-lg border border-border/60 bg-card p-3",
+                children: [
+                  /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: turn.role === "user" ? "You" : "Gemini" }),
+                  /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-sm leading-relaxed", children: turn.text })
+                ]
+              },
+              turn.id
+            )) })
+          ]
+        }
+      )
+    ] })
+  ] });
 }
 export {
   GoogleLiveSurface

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

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { SettingDoor } from "../../host/prefs-react.js";
 import { useAppSelector } from "../../store/hooks.js";
 import { voiceDisplayName } from "@ai-matrx/media/voices";
@@ -12,7 +13,7 @@ function LiveVoiceDoor({
   const known = Boolean(agentId) && agentType !== null;
   const name = voiceDisplayName("xai", voiceId ?? "");
   if (!known) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       SettingDoor,
       {
         setting: "live-conversation-voice",
@@ -22,17 +23,19 @@ function LiveVoiceDoor({
     );
   }
   if (agentType !== "builtin") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "span",
       {
         className: "text-xs text-muted-foreground",
-        title: "This agent's builder chose its voice."
-      },
-      "Voice: ",
-      name
+        title: "This agent's builder chose its voice.",
+        children: [
+          "Voice: ",
+          name
+        ]
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     SettingDoor,
     {
       setting: "live-conversation-voice",