@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/inputs/smart-input/composer/ComposerModeSwitch.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useSyncExternalStore } from "react";
 import { ChevronDown } from "lucide-react";
 import { useCenterControlFit } from "../../../../../host/ui-slots.js";
@@ -28,7 +29,7 @@ function ComposerModeSwitch({
   const triggerRef = useRef(null);
   const fit = useCenterControlFit(cellRef, [fullRef, triggerRef], mode);
   const measured = useSyncExternalStore(noopSubscribe, () => true, () => false);
-  const renderSegments = (interactive) => /* @__PURE__ */ React.createElement(
+  const renderSegments = (interactive) => /* @__PURE__ */ jsx(
     SegmentedControl,
     {
       "aria-label": "Composer mode",
@@ -42,37 +43,48 @@ function ComposerModeSwitch({
   );
   if (panel) return renderSegments(true);
   const triggerClass = "inline-flex h-8 shrink-0 items-center gap-1 rounded-lg bg-muted px-2.5 text-sm font-medium text-foreground";
-  const triggerFace = /* @__PURE__ */ React.createElement(React.Fragment, null, COMPOSER_MODE_LABELS[mode], /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground", "aria-hidden": "true" }));
+  const triggerFace = /* @__PURE__ */ jsxs(Fragment, { children: [
+    COMPOSER_MODE_LABELS[mode],
+    /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground", "aria-hidden": "true" })
+  ] });
   const showFull = measured ? fit.index === 0 : null;
   const showTrigger = measured ? fit.index === 1 : null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: cellRef,
       className: "relative flex w-full min-w-0 justify-center",
-      "data-route-nav-inflow": fit.inflow ? "" : void 0
-    },
-    /* @__PURE__ */ React.createElement("div", { "aria-hidden": true, inert: true, className: "pointer-events-none invisible absolute left-0 top-0" }, /* @__PURE__ */ React.createElement("div", { ref: fullRef, className: "w-max max-w-none" }, renderSegments(false)), /* @__PURE__ */ React.createElement("span", { ref: triggerRef, "data-route-nav-min": true, className: cn(triggerClass, "w-max max-w-none") }, triggerFace)),
-    showFull !== false ? renderSegments(true) : null,
-    showTrigger !== false ? /* @__PURE__ */ React.createElement(DropdownMenu, null, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        "aria-label": `Composer mode: ${COMPOSER_MODE_LABELS[mode]}`,
-        className: cn(triggerClass, showTrigger == null && "sm:hidden", className)
-      },
-      triggerFace
-    )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { align: "center" }, /* @__PURE__ */ React.createElement(
-      DropdownMenuRadioGroup,
-      {
-        value: mode,
-        onValueChange: (value) => {
-          const next = COMPOSER_MODES.find((m) => m === value);
-          if (next) setMode(next);
-        }
-      },
-      COMPOSER_MODES.map((value) => /* @__PURE__ */ React.createElement(DropdownMenuRadioItem, { key: value, value }, COMPOSER_MODE_LABELS[value]))
-    ))) : null
+      "data-route-nav-inflow": fit.inflow ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { "aria-hidden": true, inert: true, className: "pointer-events-none invisible absolute left-0 top-0", children: [
+          /* @__PURE__ */ jsx("div", { ref: fullRef, className: "w-max max-w-none", children: renderSegments(false) }),
+          /* @__PURE__ */ jsx("span", { ref: triggerRef, "data-route-nav-min": true, className: cn(triggerClass, "w-max max-w-none"), children: triggerFace })
+        ] }),
+        showFull !== false ? renderSegments(true) : null,
+        showTrigger !== false ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Composer mode: ${COMPOSER_MODE_LABELS[mode]}`,
+              className: cn(triggerClass, showTrigger == null && "sm:hidden", className),
+              children: triggerFace
+            }
+          ) }),
+          /* @__PURE__ */ jsx(DropdownMenuContent, { align: "center", children: /* @__PURE__ */ jsx(
+            DropdownMenuRadioGroup,
+            {
+              value: mode,
+              onValueChange: (value) => {
+                const next = COMPOSER_MODES.find((m) => m === value);
+                if (next) setMode(next);
+              },
+              children: COMPOSER_MODES.map((value) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value, children: COMPOSER_MODE_LABELS[value] }, value))
+            }
+          ) })
+        ] }) : null
+      ]
+    }
   );
 }
 const noopSubscribe = () => () => {

package/dist/agents/components/inputs/smart-input/composer/ComposerOutput.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import {
   AudioLines,
@@ -128,30 +129,32 @@ function useComposerOutput(conversationId) {
   };
 }
 function TypeGrid({ types, onToggle }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-0.5 px-1 @[300px]:grid-cols-3" }, OUTPUT_TYPES.map((type) => {
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-0.5 px-1 @[300px]:grid-cols-3", children: OUTPUT_TYPES.map((type) => {
     const on = types.includes(type.id);
     const Icon = TYPE_ICONS[type.id] ?? FileText;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "button",
       {
-        key: type.id,
         type: "button",
         "aria-pressed": on,
         onClick: () => onToggle(type.id),
         className: cn(
           "flex h-8 min-w-0 items-center gap-1.5 rounded-md px-2 text-left text-[13px] transition-colors",
           on ? "bg-primary/10 text-primary-ink" : "text-foreground hover:bg-accent"
-        )
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: cn("h-3.5 w-3.5 shrink-0", !on && "text-muted-foreground") }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: type.label }),
+          on ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 shrink-0" }) : null
+        ]
       },
-      /* @__PURE__ */ React.createElement(Icon, { className: cn("h-3.5 w-3.5 shrink-0", !on && "text-muted-foreground") }),
-      /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate" }, type.label),
-      on ? /* @__PURE__ */ React.createElement(Check, { className: "h-3.5 w-3.5 shrink-0" }) : null
+      type.id
     );
-  }));
+  }) });
 }
 function DetailsError({ details }) {
   if (!details.error) return null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ErrorNotice,
     {
       size: "compact",
@@ -160,7 +163,7 @@ function DetailsError({ details }) {
       error: details.error,
       operation: "Read the picked shapes' labels and descriptions",
       calls: ["shx_list_scoped"],
-      actions: /* @__PURE__ */ React.createElement(ComposerMenuRow, { icon: RotateCcw, label: "Try again", onClick: details.retry })
+      actions: /* @__PURE__ */ jsx(ComposerMenuRow, { icon: RotateCcw, label: "Try again", onClick: details.retry })
     }
   );
 }
@@ -188,10 +191,9 @@ function ShapePicker({
   const warning = locked ? pickWarning(lockedShapes) : null;
   const row = (kind, label, checked) => {
     const conflicts = warning !== null && checked && refused.includes(kind);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ComposerMenuRow,
       {
-        key: kind,
         icon: Shapes,
         label,
         description: conflicts ? warning : knownShapeDescription(kind) ?? void 0,
@@ -199,11 +201,12 @@ function ShapePicker({
         checked,
         title: conflicts ? `${label} (${kind}) \u2014 ${warning}` : `${label} (${kind})`,
         onClick: () => onToggle(kind)
-      }
+      },
+      kind
     );
   };
   if (lock.status === "failed") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ErrorNotice,
       {
         size: "compact",
@@ -212,77 +215,117 @@ function ShapePicker({
         error: lock.error,
         operation: "Read the agent's output schema to see whether it is locked to one shape",
         calls: ["agent.definition"],
-        actions: /* @__PURE__ */ React.createElement(ComposerMenuRow, { icon: RotateCcw, label: "Try again", onClick: lock.retry })
+        actions: /* @__PURE__ */ jsx(ComposerMenuRow, { icon: RotateCcw, label: "Try again", onClick: lock.retry })
       }
     );
   }
   if (lock.status === "reading") {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1 px-2.5 py-2", "aria-label": "Checking the agent's shape" }, /* @__PURE__ */ React.createElement(Skeleton, { className: "h-7 w-full rounded-md" }));
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 px-2.5 py-2", "aria-label": "Checking the agent's shape", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-full rounded-md" }) });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "flex min-h-0 flex-1 flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-center justify-between gap-2 px-2.5 pb-1 pt-2" }, /* @__PURE__ */ React.createElement("span", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-muted-foreground" }, "Shapes"), kinds.length > 0 ? /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground" }, kinds.length, " selected") : null), locked ? /* @__PURE__ */ React.createElement(React.Fragment, null, lockedShapes.map((kind) => /* @__PURE__ */ React.createElement(
-    ComposerMenuRow,
-    {
-      key: kind,
-      icon: Lock,
-      label: kindLabel(kind),
-      description: LOCKED_REASON,
-      checked: true,
-      title: `${kindLabel(kind)} (${kind}) \u2014 ${LOCKED_REASON}`
-    }
-  )), refused.length > 0 && warning ? /* @__PURE__ */ React.createElement(
-    "p",
-    {
-      role: "status",
-      className: "flex items-center gap-1.5 px-2.5 py-1.5 text-xs leading-snug text-amber-600 dark:text-amber-400"
-    },
-    /* @__PURE__ */ React.createElement(AlertTriangle, { className: "h-3.5 w-3.5 shrink-0" }),
-    /* @__PURE__ */ React.createElement("span", { className: "min-w-0 truncate" }, warning)
-  ) : null) : null, /* @__PURE__ */ React.createElement("label", { className: "mx-1 flex h-8 shrink-0 items-center gap-2 rounded-md bg-muted/60 px-2" }, /* @__PURE__ */ React.createElement(Search, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      value: search,
-      onChange: (event) => setSearch(event.target.value),
-      placeholder: "Search shapes",
-      "aria-label": "Search shapes",
-      className: "min-w-0 flex-1 bg-transparent text-[13px] text-foreground outline-none placeholder:text-muted-foreground"
-    }
-  ), search ? /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(X, null), onClick: () => setSearch(""), "aria-label": "Clear search", className: "shrink-0" }) : null), /* @__PURE__ */ React.createElement(
-    SegmentedControl,
-    {
-      className: "mx-1 mt-1 shrink-0",
-      "aria-label": "Shape source",
-      value: source,
-      onValueChange: setSource,
-      data: SHAPE_SOURCES.map((option) => ({
-        value: option.id,
-        label: option.label,
-        count: catalog.totals[option.id]
-      }))
-    }
-  ), /* @__PURE__ */ React.createElement(DetailsError, { details }), /* @__PURE__ */ React.createElement("div", { ref: listRef, className: "mt-1 max-h-64 min-h-0 flex-1 overflow-y-auto" }, pinned.map((kind) => row(kind, kindLabel(kind), true)), pinned.length > 0 && (unpinned.length > 0 || catalog.loading) ? /* @__PURE__ */ React.createElement(ComposerMenuDivider, null) : null, catalog.loading ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1 px-2.5 py-1", "aria-label": "Loading shapes" }, [0, 1, 2, 3].map((i) => /* @__PURE__ */ React.createElement(Skeleton, { key: i, className: "h-7 w-full rounded-md" }))) : catalog.error ? /* @__PURE__ */ React.createElement(
-    ErrorNotice,
-    {
-      size: "compact",
-      className: "mx-1",
-      title: "Shapes did not load",
-      error: catalog.error,
-      operation: "Load the shape catalog for the composer Output picker",
-      calls: ["shx_list_scoped"],
-      actions: /* @__PURE__ */ React.createElement(ComposerMenuRow, { icon: RotateCcw, label: "Try again", onClick: catalog.retry })
-    }
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null, unpinned.map((shape) => row(shape.kind, shape.label, false)), unpinned.length === 0 && pinned.length === 0 ? /* @__PURE__ */ React.createElement(ComposerMenuHelp, null, needle ? `No shapes match "${search.trim()}" here.` : "No shapes in this list yet.") : null, catalog.hasMore ? /* @__PURE__ */ React.createElement(
-    ComposerMenuRow,
-    {
-      label: "Show more",
-      detail: `${catalog.rows.length} of ${catalog.total}`,
-      disabled: catalog.loadingMore,
-      onClick: catalog.loadMore
-    }
-  ) : null)));
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-2 px-2.5 pb-1 pt-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Shapes" }),
+      kinds.length > 0 ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground", children: [
+        kinds.length,
+        " selected"
+      ] }) : null
+    ] }),
+    locked ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      lockedShapes.map((kind) => /* @__PURE__ */ jsx(
+        ComposerMenuRow,
+        {
+          icon: Lock,
+          label: kindLabel(kind),
+          description: LOCKED_REASON,
+          checked: true,
+          title: `${kindLabel(kind)} (${kind}) \u2014 ${LOCKED_REASON}`
+        },
+        kind
+      )),
+      refused.length > 0 && warning ? /* @__PURE__ */ jsxs(
+        "p",
+        {
+          role: "status",
+          className: "flex items-center gap-1.5 px-2.5 py-1.5 text-xs leading-snug text-amber-600 dark:text-amber-400",
+          children: [
+            /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3.5 w-3.5 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: warning })
+          ]
+        }
+      ) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxs("label", { className: "mx-1 flex h-8 shrink-0 items-center gap-2 rounded-md bg-muted/60 px-2", children: [
+      /* @__PURE__ */ jsx(Search, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: search,
+          onChange: (event) => setSearch(event.target.value),
+          placeholder: "Search shapes",
+          "aria-label": "Search shapes",
+          className: "min-w-0 flex-1 bg-transparent text-[13px] text-foreground outline-none placeholder:text-muted-foreground"
+        }
+      ),
+      search ? /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(X, {}), onClick: () => setSearch(""), "aria-label": "Clear search", className: "shrink-0" }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        className: "mx-1 mt-1 shrink-0",
+        "aria-label": "Shape source",
+        value: source,
+        onValueChange: setSource,
+        data: SHAPE_SOURCES.map((option) => ({
+          value: option.id,
+          label: option.label,
+          count: catalog.totals[option.id]
+        }))
+      }
+    ),
+    /* @__PURE__ */ jsx(DetailsError, { details }),
+    /* @__PURE__ */ jsxs("div", { ref: listRef, className: "mt-1 max-h-64 min-h-0 flex-1 overflow-y-auto", children: [
+      pinned.map((kind) => row(kind, kindLabel(kind), true)),
+      pinned.length > 0 && (unpinned.length > 0 || catalog.loading) ? /* @__PURE__ */ jsx(ComposerMenuDivider, {}) : null,
+      catalog.loading ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 px-2.5 py-1", "aria-label": "Loading shapes", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-full rounded-md" }, i)) }) : catalog.error ? /* @__PURE__ */ jsx(
+        ErrorNotice,
+        {
+          size: "compact",
+          className: "mx-1",
+          title: "Shapes did not load",
+          error: catalog.error,
+          operation: "Load the shape catalog for the composer Output picker",
+          calls: ["shx_list_scoped"],
+          actions: /* @__PURE__ */ jsx(ComposerMenuRow, { icon: RotateCcw, label: "Try again", onClick: catalog.retry })
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        unpinned.map((shape) => row(shape.kind, shape.label, false)),
+        unpinned.length === 0 && pinned.length === 0 ? /* @__PURE__ */ jsx(ComposerMenuHelp, { children: needle ? `No shapes match "${search.trim()}" here.` : "No shapes in this list yet." }) : null,
+        catalog.hasMore ? /* @__PURE__ */ jsx(
+          ComposerMenuRow,
+          {
+            label: "Show more",
+            detail: `${catalog.rows.length} of ${catalog.total}`,
+            disabled: catalog.loadingMore,
+            onClick: catalog.loadMore
+          }
+        ) : null
+      ] })
+    ] })
+  ] });
 }
 function ComposerOutputPanel({ conversationId }) {
   const output = useComposerOutput(conversationId);
-  return /* @__PURE__ */ React.createElement("div", { className: "@container flex min-h-0 flex-1 flex-col" }, /* @__PURE__ */ React.createElement(ComposerMenuLabel, null, "Output types"), /* @__PURE__ */ React.createElement(TypeGrid, { types: output.types, onToggle: output.toggleType }), /* @__PURE__ */ React.createElement(ComposerMenuHelp, null, "Narrows the agent list. Not sent to the model."), /* @__PURE__ */ React.createElement(ComposerMenuDivider, null), /* @__PURE__ */ React.createElement(ShapePicker, { kinds: output.kinds, lock: output.lock, onToggle: output.toggleKind }), !output.isDefault ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ComposerMenuDivider, null), /* @__PURE__ */ React.createElement(ComposerMenuRow, { icon: RotateCcw, label: "Reset to Text only", onClick: output.clear })) : null);
+  return /* @__PURE__ */ jsxs("div", { className: "@container flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsx(ComposerMenuLabel, { children: "Output types" }),
+    /* @__PURE__ */ jsx(TypeGrid, { types: output.types, onToggle: output.toggleType }),
+    /* @__PURE__ */ jsx(ComposerMenuHelp, { children: "Narrows the agent list. Not sent to the model." }),
+    /* @__PURE__ */ jsx(ComposerMenuDivider, {}),
+    /* @__PURE__ */ jsx(ShapePicker, { kinds: output.kinds, lock: output.lock, onToggle: output.toggleKind }),
+    !output.isDefault ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ComposerMenuDivider, {}),
+      /* @__PURE__ */ jsx(ComposerMenuRow, { icon: RotateCcw, label: "Reset to Text only", onClick: output.clear })
+    ] }) : null
+  ] });
 }
 function ComposerOutputPill({
   conversationId,
@@ -292,31 +335,37 @@ function ComposerOutputPill({
   const [open, setOpen] = useState(false);
   const [roomierSide, setRoomierSide] = useState(null);
   const output = useComposerOutput(conversationId);
-  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React.createElement(SplitButton, { className: "min-w-0" }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "quiet",
-      tone: output.locked || !output.isDefault ? "primary" : void 0,
-      iconEnd: output.lockWarning && output.conflicts.length > 0 ? /* @__PURE__ */ React.createElement(AlertTriangle, { "aria-label": output.lockWarning }) : void 0,
-      "aria-label": `Output: ${output.label}`,
-      title: output.lockWarning ?? void 0,
-      className: "min-w-0",
-      onClick: (event) => {
-        const rect = event.currentTarget.getBoundingClientRect();
-        setRoomierSide(rect.top > window.innerHeight - rect.bottom ? "top" : "bottom");
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
+    /* @__PURE__ */ jsxs(SplitButton, { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "quiet",
+          tone: output.locked || !output.isDefault ? "primary" : void 0,
+          iconEnd: output.lockWarning && output.conflicts.length > 0 ? /* @__PURE__ */ jsx(AlertTriangle, { "aria-label": output.lockWarning }) : void 0,
+          "aria-label": `Output: ${output.label}`,
+          title: output.lockWarning ?? void 0,
+          className: "min-w-0",
+          onClick: (event) => {
+            const rect = event.currentTarget.getBoundingClientRect();
+            setRoomierSide(rect.top > window.innerHeight - rect.bottom ? "top" : "bottom");
+          },
+          children: output.label
+        }
+      ) }),
+      !output.isDefault ? /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(X, {}), onClick: output.clear, "aria-label": "Reset output to Text only", title: "Reset to Text only", className: "shrink-0" }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        side: roomierSide ?? menuSide,
+        align: "start",
+        sideOffset: 8,
+        className: "flex max-h-[var(--radix-popover-content-available-height)] w-[340px] max-w-[calc(100vw-1rem)] flex-col overflow-hidden p-1",
+        children: /* @__PURE__ */ jsx(ComposerOutputPanel, { conversationId })
       }
-    },
-    output.label
-  )), !output.isDefault ? /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(X, null), onClick: output.clear, "aria-label": "Reset output to Text only", title: "Reset to Text only", className: "shrink-0" }) : null), /* @__PURE__ */ React.createElement(
-    PopoverContent,
-    {
-      side: roomierSide ?? menuSide,
-      align: "start",
-      sideOffset: 8,
-      className: "flex max-h-[var(--radix-popover-content-available-height)] w-[340px] max-w-[calc(100vw-1rem)] flex-col overflow-hidden p-1"
-    },
-    /* @__PURE__ */ React.createElement(ComposerOutputPanel, { conversationId })
-  ));
+    )
+  ] });
 }
 export {
   ComposerOutputPanel,