@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/context-preview/AttachedContextSection.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { formatCount } from "@ai-matrx/kit/format";
 import { Badge, Chip, Button } from "@ai-matrx/design-system/controls";
 import { useMemo } from "react";
@@ -51,13 +52,13 @@ function valuePreview(value) {
   return String(value);
 }
 function SectionHead({ children }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "px-4 pt-3 text-[11px] font-semibold uppercase tracking-wider text-primary" }, children);
+  return /* @__PURE__ */ jsx("div", { className: "px-4 pt-3 text-[11px] font-semibold uppercase tracking-wider text-primary", children });
 }
 function RemoveX({
   label,
   onRemove
 }) {
-  return /* @__PURE__ */ React.createElement(Button, { variant: "quiet", removes: true, icon: /* @__PURE__ */ React.createElement(X, null), onClick: onRemove, "aria-label": `Remove ${label} from what is sent`, className: "shrink-0" });
+  return /* @__PURE__ */ jsx(Button, { variant: "quiet", removes: true, icon: /* @__PURE__ */ jsx(X, {}), onClick: onRemove, "aria-label": `Remove ${label} from what is sent`, className: "shrink-0" });
 }
 function resourceLabel(r) {
   const src = r.source;
@@ -144,89 +145,172 @@ function AttachedContextSection({
   };
   const items = entries.map(describeEntry).sort((a, b) => b.chars - a.chars);
   const totalChars = items.reduce((n, i) => n + i.chars, 0);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex min-h-0 flex-1 flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-y-auto scrollbar-thin-auto" }, /* @__PURE__ */ React.createElement(SectionHead, null, "Always sent"), /* @__PURE__ */ React.createElement("ul", { className: "divide-y divide-border/60" }, /* @__PURE__ */ React.createElement("li", { className: "flex items-center gap-2 px-4 py-2" }, /* @__PURE__ */ React.createElement(MessageSquareText, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 text-sm text-foreground" }, "Your messages + the agent's instructions")), resources.map((r) => /* @__PURE__ */ React.createElement("li", { key: r.resourceId, className: "flex items-center gap-2 px-4 py-2" }, /* @__PURE__ */ React.createElement(Paperclip, { className: "h-4 w-4 shrink-0 text-primary" }), /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate text-sm text-foreground" }, resourceLabel(r)), /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      className: "shrink-0",
-      tone: r.status === "ready" ? "primary" : r.status === "error" ? "destructive" : "neutral"
-    },
-    `${r.blockType}${r.status !== "ready" ? ` \xB7 ${r.status}` : ""}`
-  ), /* @__PURE__ */ React.createElement(
-    RemoveX,
-    {
-      label: resourceLabel(r),
-      onRemove: () => dispatch(
-        removeResource({
-          conversationId,
-          resourceId: r.resourceId
-        })
-      )
-    }
-  ))), variableKeys.length > 0 && /* @__PURE__ */ React.createElement("li", { className: "group/vars relative px-4 py-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(Variable, { className: "h-4 w-4 shrink-0 text-primary" }), /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 text-sm text-foreground" }, variableKeys.length, " variable", variableKeys.length === 1 ? "" : "s", " this turn")), /* @__PURE__ */ React.createElement("div", { className: "mt-1 flex flex-wrap gap-1 pl-6" }, variableKeys.sort().map((k) => /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      key: k,
-      title: valuePreview(variables[k]).slice(0, 300),
-      className: "rounded-full bg-muted px-2 py-0.5 font-mono text-[10px] text-foreground/90"
-    },
-    k
-  ))), /* @__PURE__ */ React.createElement(
-    CopyButtons,
-    {
-      label: "Copy",
-      json: variables,
-      size: "xs",
-      className: cn("absolute top-1 right-1 z-10", COPY_REVEAL, "group-hover/vars:opacity-100")
-    }
-  )), memoryOn && /* @__PURE__ */ React.createElement("li", { className: "flex items-center gap-2 px-4 py-2" }, /* @__PURE__ */ React.createElement(Brain, { className: "h-4 w-4 shrink-0 text-primary" }), /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 text-sm text-foreground" }, "Observational memory"), /* @__PURE__ */ React.createElement(
-    Chip,
-    {
-      className: "shrink-0",
-      tone: "primary",
-      label: [memoryModel, memoryScope].filter(Boolean).join(" \xB7 ") || "on"
-    }
-  )), clientTools.length > 0 && /* @__PURE__ */ React.createElement("li", { className: "px-4 py-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(Wrench, { className: "h-4 w-4 shrink-0 text-primary" }), /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 text-sm text-foreground" }, clientTools.length, " client tool", clientTools.length === 1 ? "" : "s")), /* @__PURE__ */ React.createElement("div", { className: "mt-1 flex flex-wrap gap-1 pl-6" }, clientTools.map((t) => /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      key: t,
-      className: "rounded-full bg-muted px-2 py-0.5 font-mono text-[10px] text-foreground/90"
-    },
-    t
-  ))))), layers.count > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SectionHead, null, "Selected"), /* @__PURE__ */ React.createElement("ul", { className: "divide-y divide-border/60" }, layers.items.map((layer) => {
-    const Icon = layer.icon;
-    return /* @__PURE__ */ React.createElement(
-      "li",
-      {
-        key: layer.id,
-        className: "flex items-center gap-2 px-4 py-2.5"
-      },
-      Icon && /* @__PURE__ */ React.createElement(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-      /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-foreground" }, layer.title),
-      /* @__PURE__ */ React.createElement(Chip, { className: "shrink-0", tone: "primary", label: layer.typeLabel })
-    );
-  })), /* @__PURE__ */ React.createElement("div", { className: "px-4 py-1.5 text-[11px] text-muted-foreground" }, "Exact details: see the Resolved view.")), items.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SectionHead, null, "Also attached this turn"), /* @__PURE__ */ React.createElement("ul", { className: "divide-y divide-border/60" }, items.map((item) => {
-    const Icon = item.icon;
-    return /* @__PURE__ */ React.createElement("li", { key: item.key, className: "group/entry relative px-4 py-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-      Icon,
-      {
-        className: cn(
-          "h-4 w-4 shrink-0",
-          item.tone === "primary" ? "text-primary" : "text-muted-foreground"
-        )
-      }
-    ), /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-foreground" }, item.title), /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-[10px] tabular-nums text-muted-foreground" }, formatCount(item.chars), " chars"), item.onRemove && /* @__PURE__ */ React.createElement(RemoveX, { label: item.title, onRemove: item.onRemove })), /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 pl-6 text-xs text-muted-foreground" }, item.kindLine), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 rounded-md border border-border/60 bg-muted/40 px-2 py-1.5 text-[11px] leading-relaxed text-foreground/90" }, item.preview ? /* @__PURE__ */ React.createElement("span", { className: "line-clamp-4 whitespace-pre-wrap break-words" }, item.preview.slice(0, 600), item.preview.length > 600 ? "\u2026" : "") : (
-      /* read-gate-exempt: describes what this request will send for one attached item, not a read's empty answer */
-      /* @__PURE__ */ React.createElement("span", { className: "italic text-muted-foreground" }, "(empty \u2014 sent, but has no content yet)")
-    )), /* @__PURE__ */ React.createElement(
-      CopyButtons,
-      {
-        label: "Copy",
-        human: item.preview,
-        size: "xs",
-        className: cn("absolute top-1 right-1 z-10", COPY_REVEAL, "group-hover/entry:opacity-100")
-      }
-    ));
-  })))), items.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "shrink-0 border-t border-border px-4 py-2.5 text-xs text-muted-foreground" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium text-foreground" }, items.length, " attached item", items.length === 1 ? "" : "s"), " ", "\xB7 ~", formatCount(totalChars), " characters of content"));
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto scrollbar-thin-auto", children: [
+      /* @__PURE__ */ jsx(SectionHead, { children: "Always sent" }),
+      /* @__PURE__ */ jsxs("ul", { className: "divide-y divide-border/60", children: [
+        /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2 px-4 py-2", children: [
+          /* @__PURE__ */ jsx(MessageSquareText, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-sm text-foreground", children: "Your messages + the agent's instructions" })
+        ] }),
+        resources.map((r) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2 px-4 py-2", children: [
+          /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4 shrink-0 text-primary" }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-foreground", children: resourceLabel(r) }),
+          /* @__PURE__ */ jsx(
+            Badge,
+            {
+              className: "shrink-0",
+              tone: r.status === "ready" ? "primary" : r.status === "error" ? "destructive" : "neutral",
+              children: `${r.blockType}${r.status !== "ready" ? ` \xB7 ${r.status}` : ""}`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RemoveX,
+            {
+              label: resourceLabel(r),
+              onRemove: () => dispatch(
+                removeResource({
+                  conversationId,
+                  resourceId: r.resourceId
+                })
+              )
+            }
+          )
+        ] }, r.resourceId)),
+        variableKeys.length > 0 && /* @__PURE__ */ jsxs("li", { className: "group/vars relative px-4 py-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Variable, { className: "h-4 w-4 shrink-0 text-primary" }),
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 text-sm text-foreground", children: [
+              variableKeys.length,
+              " variable",
+              variableKeys.length === 1 ? "" : "s",
+              " this turn"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap gap-1 pl-6", children: variableKeys.sort().map((k) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              title: valuePreview(variables[k]).slice(0, 300),
+              className: "rounded-full bg-muted px-2 py-0.5 font-mono text-[10px] text-foreground/90",
+              children: k
+            },
+            k
+          )) }),
+          /* @__PURE__ */ jsx(
+            CopyButtons,
+            {
+              label: "Copy",
+              json: variables,
+              size: "xs",
+              className: cn("absolute top-1 right-1 z-10", COPY_REVEAL, "group-hover/vars:opacity-100")
+            }
+          )
+        ] }),
+        memoryOn && /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2 px-4 py-2", children: [
+          /* @__PURE__ */ jsx(Brain, { className: "h-4 w-4 shrink-0 text-primary" }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-sm text-foreground", children: "Observational memory" }),
+          /* @__PURE__ */ jsx(
+            Chip,
+            {
+              className: "shrink-0",
+              tone: "primary",
+              label: [memoryModel, memoryScope].filter(Boolean).join(" \xB7 ") || "on"
+            }
+          )
+        ] }),
+        clientTools.length > 0 && /* @__PURE__ */ jsxs("li", { className: "px-4 py-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Wrench, { className: "h-4 w-4 shrink-0 text-primary" }),
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 text-sm text-foreground", children: [
+              clientTools.length,
+              " client tool",
+              clientTools.length === 1 ? "" : "s"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap gap-1 pl-6", children: clientTools.map((t) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "rounded-full bg-muted px-2 py-0.5 font-mono text-[10px] text-foreground/90",
+              children: t
+            },
+            t
+          )) })
+        ] })
+      ] }),
+      layers.count > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SectionHead, { children: "Selected" }),
+        /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border/60", children: layers.items.map((layer) => {
+          const Icon = layer.icon;
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "flex items-center gap-2 px-4 py-2.5",
+              children: [
+                Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-foreground", children: layer.title }),
+                /* @__PURE__ */ jsx(Chip, { className: "shrink-0", tone: "primary", label: layer.typeLabel })
+              ]
+            },
+            layer.id
+          );
+        }) }),
+        /* @__PURE__ */ jsx("div", { className: "px-4 py-1.5 text-[11px] text-muted-foreground", children: "Exact details: see the Resolved view." })
+      ] }),
+      items.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SectionHead, { children: "Also attached this turn" }),
+        /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border/60", children: items.map((item) => {
+          const Icon = item.icon;
+          return /* @__PURE__ */ jsxs("li", { className: "group/entry relative px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  className: cn(
+                    "h-4 w-4 shrink-0",
+                    item.tone === "primary" ? "text-primary" : "text-muted-foreground"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-foreground", children: item.title }),
+              /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-[10px] tabular-nums text-muted-foreground", children: [
+                formatCount(item.chars),
+                " chars"
+              ] }),
+              item.onRemove && /* @__PURE__ */ jsx(RemoveX, { label: item.title, onRemove: item.onRemove })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mt-0.5 pl-6 text-xs text-muted-foreground", children: item.kindLine }),
+            /* @__PURE__ */ jsx("div", { className: "mt-1.5 rounded-md border border-border/60 bg-muted/40 px-2 py-1.5 text-[11px] leading-relaxed text-foreground/90", children: item.preview ? /* @__PURE__ */ jsxs("span", { className: "line-clamp-4 whitespace-pre-wrap break-words", children: [
+              item.preview.slice(0, 600),
+              item.preview.length > 600 ? "\u2026" : ""
+            ] }) : (
+              /* read-gate-exempt: describes what this request will send for one attached item, not a read's empty answer */
+              /* @__PURE__ */ jsx("span", { className: "italic text-muted-foreground", children: "(empty \u2014 sent, but has no content yet)" })
+            ) }),
+            /* @__PURE__ */ jsx(
+              CopyButtons,
+              {
+                label: "Copy",
+                human: item.preview,
+                size: "xs",
+                className: cn("absolute top-1 right-1 z-10", COPY_REVEAL, "group-hover/entry:opacity-100")
+              }
+            )
+          ] }, item.key);
+        }) })
+      ] })
+    ] }),
+    items.length > 0 && /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-t border-border px-4 py-2.5 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", children: [
+        items.length,
+        " attached item",
+        items.length === 1 ? "" : "s"
+      ] }),
+      " ",
+      "\xB7 ~",
+      formatCount(totalChars),
+      " characters of content"
+    ] })
+  ] });
 }
 export {
   AttachedContextSection