@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/run-controls/AdvancedRunSettings/AdvancedRunSettings.js

@@ -1,5 +1,6 @@
 "use client";
-import React, { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
 import { RotateCcw } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
 import {
@@ -57,67 +58,82 @@ function AdvancedRunSettings({
     onReset?.();
   }, [onChange, onReset]);
   const algorithmResult = useMemo(() => runAlgorithm(value), [value]);
-  return /* @__PURE__ */ React.createElement("div", { className: cn("flex flex-col gap-6 w-full", className) }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-end" }, /* @__PURE__ */ React.createElement(ComplexityBadge, { result: algorithmResult })), /* @__PURE__ */ React.createElement(Section, { accent: "blue", title: "What do you need?" }, /* @__PURE__ */ React.createElement(SectionRow, { label: "Primary Output" }, /* @__PURE__ */ React.createElement(
-    PillChoiceGroup,
-    {
-      mode: "single",
-      options: PRIMARY_OUTPUTS,
-      value: value.primaryOutput,
-      onChange: (next) => patch({ primaryOutput: next })
-    }
-  )), /* @__PURE__ */ React.createElement(SectionRow, { label: "Input Modes" }, /* @__PURE__ */ React.createElement(
-    PillChoiceGroup,
-    {
-      mode: "multi",
-      options: INPUT_MODES,
-      value: value.inputModes,
-      onChange: (next) => patch({ inputModes: next })
-    }
-  ))), /* @__PURE__ */ React.createElement(Section, { accent: "violet", title: "Model attributes" }, ATTRIBUTES.map((attr) => /* @__PURE__ */ React.createElement(SectionRow, { key: attr.id, label: attr.label }, /* @__PURE__ */ React.createElement(
-    LevelPillGroup,
-    {
-      value: value.attributes[attr.id],
-      onChange: (lvl) => patchAttribute(attr.id, lvl)
-    }
-  )))), /* @__PURE__ */ React.createElement(Section, { accent: "amber", title: "How important are these?" }, IMPORTANCE_ITEMS.map((item) => /* @__PURE__ */ React.createElement(SectionRow, { key: item.id, label: item.label }, /* @__PURE__ */ React.createElement(
-    EndpointSlider,
-    {
-      value: value.importance[item.id],
-      onChange: (lvl) => patchImportance(item.id, lvl),
-      startLabel: "Not important",
-      endLabel: "Critical"
-    }
-  )))), /* @__PURE__ */ React.createElement(Section, { accent: "emerald", title: "How hard should the model think?" }, /* @__PURE__ */ React.createElement(SectionRow, { label: "Thinking depth" }, /* @__PURE__ */ React.createElement(
-    LevelPillGroup,
-    {
-      value: value.thinkingLevel,
-      onChange: (lvl) => patch({ thinkingLevel: lvl })
-    }
-  ))), /* @__PURE__ */ React.createElement(Section, { accent: "rose", title: "Tools" }, /* @__PURE__ */ React.createElement(
-    PillChoiceGroup,
-    {
-      mode: "multi",
-      options: TOOLS,
-      value: value.tools,
-      onChange: (next) => patch({ tools: next }),
-      className: "flex-wrap"
-    }
-  )), /* @__PURE__ */ React.createElement(Section, { accent: "indigo", title: "What can the agent create?" }, /* @__PURE__ */ React.createElement(
-    StructuredCheckboxGrid,
-    {
-      options: ARTIFACT_SKILLS,
-      value: value.artifactSkills,
-      onChange: (next) => patch({ artifactSkills: next }),
-      columns: 3
-    }
-  )), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-end pt-2 border-t border-border" }, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(RotateCcw, null), onClick: handleReset }, "Reset to defaults")));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6 w-full", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsx(ComplexityBadge, { result: algorithmResult }) }),
+    /* @__PURE__ */ jsxs(Section, { accent: "blue", title: "What do you need?", children: [
+      /* @__PURE__ */ jsx(SectionRow, { label: "Primary Output", children: /* @__PURE__ */ jsx(
+        PillChoiceGroup,
+        {
+          mode: "single",
+          options: PRIMARY_OUTPUTS,
+          value: value.primaryOutput,
+          onChange: (next) => patch({ primaryOutput: next })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(SectionRow, { label: "Input Modes", children: /* @__PURE__ */ jsx(
+        PillChoiceGroup,
+        {
+          mode: "multi",
+          options: INPUT_MODES,
+          value: value.inputModes,
+          onChange: (next) => patch({ inputModes: next })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(Section, { accent: "violet", title: "Model attributes", children: ATTRIBUTES.map((attr) => /* @__PURE__ */ jsx(SectionRow, { label: attr.label, children: /* @__PURE__ */ jsx(
+      LevelPillGroup,
+      {
+        value: value.attributes[attr.id],
+        onChange: (lvl) => patchAttribute(attr.id, lvl)
+      }
+    ) }, attr.id)) }),
+    /* @__PURE__ */ jsx(Section, { accent: "amber", title: "How important are these?", children: IMPORTANCE_ITEMS.map((item) => /* @__PURE__ */ jsx(SectionRow, { label: item.label, children: /* @__PURE__ */ jsx(
+      EndpointSlider,
+      {
+        value: value.importance[item.id],
+        onChange: (lvl) => patchImportance(item.id, lvl),
+        startLabel: "Not important",
+        endLabel: "Critical"
+      }
+    ) }, item.id)) }),
+    /* @__PURE__ */ jsx(Section, { accent: "emerald", title: "How hard should the model think?", children: /* @__PURE__ */ jsx(SectionRow, { label: "Thinking depth", children: /* @__PURE__ */ jsx(
+      LevelPillGroup,
+      {
+        value: value.thinkingLevel,
+        onChange: (lvl) => patch({ thinkingLevel: lvl })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(Section, { accent: "rose", title: "Tools", children: /* @__PURE__ */ jsx(
+      PillChoiceGroup,
+      {
+        mode: "multi",
+        options: TOOLS,
+        value: value.tools,
+        onChange: (next) => patch({ tools: next }),
+        className: "flex-wrap"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Section, { accent: "indigo", title: "What can the agent create?", children: /* @__PURE__ */ jsx(
+      StructuredCheckboxGrid,
+      {
+        options: ARTIFACT_SKILLS,
+        value: value.artifactSkills,
+        onChange: (next) => patch({ artifactSkills: next }),
+        columns: 3
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end pt-2 border-t border-border", children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(RotateCcw, {}), onClick: handleReset, children: "Reset to defaults" }) })
+  ] });
 }
 function Section({
   accent,
   title,
   children
 }) {
-  return /* @__PURE__ */ React.createElement("section", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement(SectionHeader, { accent, title }), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, children));
+  return /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(SectionHeader, { accent, title }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children })
+  ] });
 }
 export {
   AdvancedRunSettings

package/dist/agents/components/run-controls/AdvancedRunSettings/ComplexityBadge.js

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@ai-matrx/design-system";
 const BAND_DOT = {
   low: "bg-emerald-500",
@@ -21,19 +21,21 @@ const BAND_TINT = {
 };
 function ComplexityBadge({ result }) {
   const { total, band } = result;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "inline-flex items-center gap-2 rounded-full border px-3 py-1",
         BAND_TINT[band]
       ),
-      title: `Complexity ${total} \u2014 ${BAND_LABEL[band]}`
-    },
-    /* @__PURE__ */ React.createElement("span", { className: cn("h-2 w-2 rounded-full", BAND_DOT[band]), "aria-hidden": true }),
-    /* @__PURE__ */ React.createElement("span", { className: "text-[10px] uppercase tracking-wide text-muted-foreground font-medium" }, "Complexity"),
-    /* @__PURE__ */ React.createElement("span", { className: "text-sm font-semibold tabular-nums text-foreground" }, total),
-    /* @__PURE__ */ React.createElement("span", { className: "text-[10px] uppercase tracking-wide text-muted-foreground" }, BAND_LABEL[band])
+      title: `Complexity ${total} \u2014 ${BAND_LABEL[band]}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("h-2 w-2 rounded-full", BAND_DOT[band]), "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wide text-muted-foreground font-medium", children: "Complexity" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold tabular-nums text-foreground", children: total }),
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: BAND_LABEL[band] })
+      ]
+    }
   );
 }
 export {

package/dist/agents/components/run-controls/AdvancedRunSettings/primitives.js

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
 import { LEVELS } from "./constants.js";
@@ -17,23 +17,31 @@ function SectionHeader({
   accent,
   right
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2.5" }, /* @__PURE__ */ React.createElement("span", { className: cn("h-5 w-1 rounded-full", STRIPE_CLASS[accent]) }), /* @__PURE__ */ React.createElement("h3", { className: "text-sm font-semibold text-foreground" }, title)), right ? /* @__PURE__ */ React.createElement("div", { className: "shrink-0" }, right) : null);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+      /* @__PURE__ */ jsx("span", { className: cn("h-5 w-1 rounded-full", STRIPE_CLASS[accent]) }),
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title })
+    ] }),
+    right ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: right }) : null
+  ] });
 }
 function SectionRow({
   label,
   children,
   className
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "flex items-center gap-4 whitespace-nowrap min-w-0",
         className
-      )
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "w-44 shrink-0 text-xs font-medium text-foreground" }, label),
-    /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0 flex items-center" }, children)
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "w-44 shrink-0 text-xs font-medium text-foreground", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 flex items-center", children })
+      ]
+    }
   );
 }
 function LevelPillGroup({
@@ -41,7 +49,7 @@ function LevelPillGroup({
   onChange,
   className
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     SegmentedControl,
     {
       fill: true,
@@ -62,32 +70,40 @@ function EndpointSlider({
 }) {
   const idx = LEVELS.findIndex((l) => l.id === value);
   const filledPct = idx / (LEVELS.length - 1) * 100;
-  return /* @__PURE__ */ React.createElement("div", { className: cn("flex items-center gap-3 w-full", className) }, /* @__PURE__ */ React.createElement("span", { className: "shrink-0 w-[90px] text-right text-[10px] font-medium tracking-wide uppercase text-muted-foreground" }, startLabel), /* @__PURE__ */ React.createElement("div", { className: "relative flex-1 h-6 flex items-center" }, /* @__PURE__ */ React.createElement("div", { className: "absolute inset-x-0 top-1/2 -translate-y-1/2 h-[3px] rounded-full bg-border" }), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "absolute left-0 top-1/2 -translate-y-1/2 h-[3px] rounded-full bg-blue-600 dark:bg-blue-500 transition-all",
-      style: { width: `${filledPct}%` }
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "relative w-full flex justify-between items-center" }, LEVELS.map((l, i) => {
-    const selected = l.id === value;
-    const filled = i <= idx;
-    return /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        key: l.id,
-        type: "button",
-        role: "radio",
-        "aria-checked": selected,
-        "aria-label": l.label,
-        onClick: () => onChange(l.id),
-        className: cn(
-          "h-4 w-4 rounded-full transition-all z-10 border-2 border-background",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          selected ? "bg-blue-600 dark:bg-blue-500 scale-125" : filled ? "bg-blue-500/60 dark:bg-blue-400/60" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
-        )
-      }
-    );
-  }))), /* @__PURE__ */ React.createElement("span", { className: "shrink-0 w-[60px] text-[10px] font-medium tracking-wide uppercase text-muted-foreground" }, endLabel));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3 w-full", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "shrink-0 w-[90px] text-right text-[10px] font-medium tracking-wide uppercase text-muted-foreground", children: startLabel }),
+    /* @__PURE__ */ jsxs("div", { className: "relative flex-1 h-6 flex items-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 -translate-y-1/2 h-[3px] rounded-full bg-border" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute left-0 top-1/2 -translate-y-1/2 h-[3px] rounded-full bg-blue-600 dark:bg-blue-500 transition-all",
+          style: { width: `${filledPct}%` }
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "relative w-full flex justify-between items-center", children: LEVELS.map((l, i) => {
+        const selected = l.id === value;
+        const filled = i <= idx;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": selected,
+            "aria-label": l.label,
+            onClick: () => onChange(l.id),
+            className: cn(
+              "h-4 w-4 rounded-full transition-all z-10 border-2 border-background",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              selected ? "bg-blue-600 dark:bg-blue-500 scale-125" : filled ? "bg-blue-500/60 dark:bg-blue-400/60" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
+            )
+          },
+          l.id
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "shrink-0 w-[60px] text-[10px] font-medium tracking-wide uppercase text-muted-foreground", children: endLabel })
+  ] });
 }
 function PillChoiceGroup({
   options,
@@ -107,16 +123,16 @@ function PillChoiceGroup({
       current.includes(id) ? current.filter((v) => v !== id) : [...current, id]
     );
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       role: mode === "single" ? "radiogroup" : "group",
-      className: cn("flex items-center gap-1.5 min-w-0", className)
-    },
-    options.map((o) => {
-      const selected = isSelected(o.id);
-      return /* @__PURE__ */ React.createElement(Button, { variant: "outline", pressed: selected, key: o.id, role: mode === "single" ? "radio" : "checkbox", "aria-checked": selected, onClick: () => handleClick(o.id), className: "shrink-0" }, o.label);
-    })
+      className: cn("flex items-center gap-1.5 min-w-0", className),
+      children: options.map((o) => {
+        const selected = isSelected(o.id);
+        return /* @__PURE__ */ jsx(Button, { variant: "outline", pressed: selected, role: mode === "single" ? "radio" : "checkbox", "aria-checked": selected, onClick: () => handleClick(o.id), className: "shrink-0", children: o.label }, o.id);
+      })
+    }
   );
 }
 function StructuredCheckboxGrid({
@@ -134,12 +150,11 @@ function StructuredCheckboxGrid({
     3: "grid-cols-2 md:grid-cols-3",
     4: "grid-cols-2 md:grid-cols-4"
   }[columns];
-  return /* @__PURE__ */ React.createElement("div", { role: "group", className: cn("grid gap-x-4 gap-y-1", gridColsClass, className) }, options.map((o) => {
+  return /* @__PURE__ */ jsx("div", { role: "group", className: cn("grid gap-x-4 gap-y-1", gridColsClass, className), children: options.map((o) => {
     const selected = value.includes(o.id);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "button",
       {
-        key: o.id,
         type: "button",
         role: "checkbox",
         "aria-checked": selected,
@@ -147,30 +162,33 @@ function StructuredCheckboxGrid({
         className: cn(
           "flex items-center gap-2 px-1 py-1 rounded text-left transition-colors",
           "hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        )
-      },
-      /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: cn(
-            "flex h-4 w-4 items-center justify-center rounded-sm border shrink-0 transition-colors",
-            selected ? "bg-blue-600 border-blue-600 dark:bg-blue-500 dark:border-blue-500" : "border-border bg-card"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex h-4 w-4 items-center justify-center rounded-sm border shrink-0 transition-colors",
+                selected ? "bg-blue-600 border-blue-600 dark:bg-blue-500 dark:border-blue-500" : "border-border bg-card"
+              ),
+              children: selected && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-white", strokeWidth: 3 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-xs truncate",
+                selected ? "text-foreground font-medium" : "text-muted-foreground"
+              ),
+              children: o.label
+            }
           )
-        },
-        selected && /* @__PURE__ */ React.createElement(Check, { className: "h-3 w-3 text-white", strokeWidth: 3 })
-      ),
-      /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: cn(
-            "text-xs truncate",
-            selected ? "text-foreground font-medium" : "text-muted-foreground"
-          )
-        },
-        o.label
-      )
+        ]
+      },
+      o.id
     );
-  }));
+  }) });
 }
 export {
   EndpointSlider,