@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/cx-chat/components/ChatSidebarClient.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useRef, useEffect } from "react";
 import { useRouter, usePathname, useSearchParams } from "../../host/navigation.js";
 import { AgentPickerSheet } from "../../ui/lazy/AgentPickerSheet.js";
@@ -37,78 +38,87 @@ function SidebarSearchGroup({
 }) {
   const inputRef = useRef(null);
   const hasLeft = !!leftButton;
-  return /* @__PURE__ */ React.createElement("div", { className: "relative inline-flex h-9 items-center w-full" }, /* @__PURE__ */ React.createElement("div", { className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 h-8 rounded-full matrx-glass-thin-border" }), /* @__PURE__ */ React.createElement("div", { className: "relative flex items-center w-full" }, leftButton, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: `flex-1 min-w-0 flex items-center gap-1.5 h-8 ${hasLeft ? "" : "pl-3"}`
-    },
-    /* @__PURE__ */ React.createElement(
-      "svg",
-      {
-        className: "flex-shrink-0 w-3.5 h-3.5 text-muted-foreground opacity-50",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor",
-        strokeWidth: 2
-      },
-      /* @__PURE__ */ React.createElement(
-        "path",
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex h-9 items-center w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 h-8 rounded-full matrx-glass-thin-border" }),
+    /* @__PURE__ */ jsxs("div", { className: "relative flex items-center w-full", children: [
+      leftButton,
+      /* @__PURE__ */ jsxs(
+        "div",
         {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+          className: `flex-1 min-w-0 flex items-center gap-1.5 h-8 ${hasLeft ? "" : "pl-3"}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "flex-shrink-0 w-3.5 h-3.5 text-muted-foreground opacity-50",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "search",
+                placeholder: "Search...",
+                value: searchQuery,
+                onChange: (e) => onSearchChange(e.target.value),
+                className: "flex-1 min-w-0 bg-transparent border-none outline-none text-foreground placeholder:text-muted-foreground/70",
+                style: { fontSize: "16px", lineHeight: 1 }
+              }
+            ),
+            searchQuery && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => {
+                  onSearchChange("");
+                  inputRef.current?.focus();
+                },
+                className: "flex-shrink-0 flex items-center justify-center w-5 h-5 rounded-full text-muted-foreground hover:text-foreground transition-colors",
+                "aria-label": "Clear search",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "w-3 h-3",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M6 18L18 6M6 6l12 12"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
         }
-      )
-    ),
-    /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        ref: inputRef,
-        type: "search",
-        placeholder: "Search...",
-        value: searchQuery,
-        onChange: (e) => onSearchChange(e.target.value),
-        className: "flex-1 min-w-0 bg-transparent border-none outline-none text-foreground placeholder:text-muted-foreground/70",
-        style: { fontSize: "16px", lineHeight: 1 }
-      }
-    ),
-    searchQuery && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        onClick: () => {
-          onSearchChange("");
-          inputRef.current?.focus();
-        },
-        className: "flex-shrink-0 flex items-center justify-center w-5 h-5 rounded-full text-muted-foreground hover:text-foreground transition-colors",
-        "aria-label": "Clear search"
-      },
-      /* @__PURE__ */ React.createElement(
-        "svg",
+      ),
+      /* @__PURE__ */ jsx(
+        PlusTapButton,
         {
-          className: "w-3 h-3",
-          fill: "none",
-          viewBox: "0 0 24 24",
-          stroke: "currentColor",
-          strokeWidth: 2
-        },
-        /* @__PURE__ */ React.createElement(
-          "path",
-          {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            d: "M6 18L18 6M6 6l12 12"
-          }
-        )
+          variant: "group",
+          onClick: onNewChat,
+          ariaLabel: "New chat"
+        }
       )
-    )
-  ), /* @__PURE__ */ React.createElement(
-    PlusTapButton,
-    {
-      variant: "group",
-      onClick: onNewChat,
-      ariaLabel: "New chat"
-    }
-  )));
+    ] })
+  ] });
 }
 function ChatPanelContent() {
   const router = useRouter();
@@ -160,61 +170,72 @@ function ChatPanelContent() {
     if (panelCheckbox) panelCheckbox.checked = false;
     if (menuCheckbox) menuCheckbox.checked = true;
   }, []);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "lg:hidden flex items-center flex-shrink-0",
-      style: {
-        height: "var(--shell-header-h)",
-        marginTop: "calc(-1 * var(--shell-header-h))"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      SidebarSearchGroup,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        searchQuery,
-        onSearchChange: setSearchQuery,
-        leftButton: /* @__PURE__ */ React.createElement(
-          ChevronLeftTapButton,
+        className: "lg:hidden flex items-center flex-shrink-0",
+        style: {
+          height: "var(--shell-header-h)",
+          marginTop: "calc(-1 * var(--shell-header-h))"
+        },
+        children: /* @__PURE__ */ jsx(
+          SidebarSearchGroup,
           {
-            variant: "group",
-            onClick: handleBack,
-            ariaLabel: "Back to main navigation"
+            searchQuery,
+            onSearchChange: setSearchQuery,
+            leftButton: /* @__PURE__ */ jsx(
+              ChevronLeftTapButton,
+              {
+                variant: "group",
+                onClick: handleBack,
+                ariaLabel: "Back to main navigation"
+              }
+            ),
+            onNewChat: handleNewChat
           }
-        ),
-        onNewChat: handleNewChat
+        )
       }
-    )
-  ), /* @__PURE__ */ React.createElement("div", { className: "shell-panel-body" }, /* @__PURE__ */ React.createElement("div", { className: "h-full flex flex-col overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "hidden lg:block flex-shrink-0" }, /* @__PURE__ */ React.createElement(
-    SidebarSearchGroup,
-    {
-      searchQuery,
-      onSearchChange: setSearchQuery,
-      onNewChat: handleNewChat
-    }
-  )), /* @__PURE__ */ React.createElement(
-    SidebarActions,
-    {
-      onNewChat: handleNewChat,
-      searchQuery,
-      onSearchChange: setSearchQuery
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-h-0 overflow-y-auto scrollbar-none" }, /* @__PURE__ */ React.createElement(
-    SsrSidebarAgents,
-    {
-      searchQuery,
-      selectedAgent: selectedAgentCompat,
-      onAgentSelect: handleAgentSelect
-    }
-  ), /* @__PURE__ */ React.createElement(
-    SsrSidebarChats,
-    {
-      activeRequestId: conversationIdFromUrl,
-      onSelectChat: handleSelectChat,
-      onNewChat: handleNewChat,
-      searchQuery
-    }
-  )), /* @__PURE__ */ React.createElement(SidebarUserFooter, null))));
+    ),
+    /* @__PURE__ */ jsx("div", { className: "shell-panel-body", children: /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "hidden lg:block flex-shrink-0", children: /* @__PURE__ */ jsx(
+        SidebarSearchGroup,
+        {
+          searchQuery,
+          onSearchChange: setSearchQuery,
+          onNewChat: handleNewChat
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        SidebarActions,
+        {
+          onNewChat: handleNewChat,
+          searchQuery,
+          onSearchChange: setSearchQuery
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 overflow-y-auto scrollbar-none", children: [
+        /* @__PURE__ */ jsx(
+          SsrSidebarAgents,
+          {
+            searchQuery,
+            selectedAgent: selectedAgentCompat,
+            onAgentSelect: handleAgentSelect
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SsrSidebarChats,
+          {
+            activeRequestId: conversationIdFromUrl,
+            onSelectChat: handleSelectChat,
+            onNewChat: handleNewChat,
+            searchQuery
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(SidebarUserFooter, {})
+    ] }) })
+  ] });
 }
 function ChatDesktopHeader() {
   const router = useRouter();
@@ -239,22 +260,30 @@ function ChatDesktopHeader() {
     },
     [router]
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    AgentPickerSheet,
-    {
-      open: isPickerOpen,
-      onOpenChange: setIsPickerOpen,
-      selectedAgent: activeAgentRecord ? { promptId: activeAgentRecord.id, name: activeAgentRecord.name } : null,
-      onSelect: handleAgentSelect
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex items-center w-full min-w-0" }, /* @__PURE__ */ React.createElement(
-    PanelLeftTapButton,
-    {
-      onClick: togglePanel,
-      ariaLabel: "Toggle sidebar",
-      className: "text-muted-foreground"
-    }
-  ), /* @__PURE__ */ React.createElement(Button, { variant: "quiet", iconEnd: /* @__PURE__ */ React.createElement(ChevronDown, null), onClick: () => setIsPickerOpen(true), title: `Active agent: ${displayName}`, className: "min-w-0" }, displayName), /* @__PURE__ */ React.createElement("span", { className: "ml-auto" }), /* @__PURE__ */ React.createElement(PlusTapButton, { onClick: handleNewChat, ariaLabel: "New chat" })));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      AgentPickerSheet,
+      {
+        open: isPickerOpen,
+        onOpenChange: setIsPickerOpen,
+        selectedAgent: activeAgentRecord ? { promptId: activeAgentRecord.id, name: activeAgentRecord.name } : null,
+        onSelect: handleAgentSelect
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full min-w-0", children: [
+      /* @__PURE__ */ jsx(
+        PanelLeftTapButton,
+        {
+          onClick: togglePanel,
+          ariaLabel: "Toggle sidebar",
+          className: "text-muted-foreground"
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { variant: "quiet", iconEnd: /* @__PURE__ */ jsx(ChevronDown, {}), onClick: () => setIsPickerOpen(true), title: `Active agent: ${displayName}`, className: "min-w-0", children: displayName }),
+      /* @__PURE__ */ jsx("span", { className: "ml-auto" }),
+      /* @__PURE__ */ jsx(PlusTapButton, { onClick: handleNewChat, ariaLabel: "New chat" })
+    ] })
+  ] });
 }
 function ChatPanel() {
   return null;

package/dist/cx-chat/components/ChatWelcomeClient.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useCallback } from "react";
 import { useRouter } from "../../host/navigation.js";
 import { AgentPickerSheet } from "../../ui/lazy/AgentPickerSheet.js";
@@ -48,23 +49,32 @@ function ChatWelcomeClient({
     },
     [router]
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    AgentPickerSheet,
-    {
-      open: isPickerOpen,
-      onOpenChange: setIsPickerOpen,
-      selectedAgent: liveAgent ? { promptId: liveAgent.id, name: liveAgent.name } : { promptId: agentId, name: agentName },
-      onSelect: handleAgentSelect
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-h-0 overflow-y-auto overscroll-contain" }, /* @__PURE__ */ React.createElement("div", { className: "min-h-full flex flex-col items-center justify-center px-3 md:px-8" }, /* @__PURE__ */ React.createElement("div", { className: "w-full max-w-3xl" }, /* @__PURE__ */ React.createElement("div", { className: "text-center mb-6 md:mb-8" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl md:text-3xl font-semibold text-foreground" }, displayName || "What can I help with?"), displayDescription ? /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-sm text-muted-foreground max-w-xl mx-auto leading-relaxed" }, displayDescription) : /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-sm text-muted-foreground" }, "AI with Matrx superpowers")), /* @__PURE__ */ React.createElement(
-    SmartAgentInput,
-    {
-      conversationId,
-      surfaceKey: `cx-chat:${agentId}`,
-      composer: { size: "splash", mode: composerMode },
-      enablePasteImages: isAuthenticated
-    }
-  )))));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      AgentPickerSheet,
+      {
+        open: isPickerOpen,
+        onOpenChange: setIsPickerOpen,
+        selectedAgent: liveAgent ? { promptId: liveAgent.id, name: liveAgent.name } : { promptId: agentId, name: agentName },
+        onSelect: handleAgentSelect
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ jsx("div", { className: "min-h-full flex flex-col items-center justify-center px-3 md:px-8", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-3xl", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-center mb-6 md:mb-8", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl md:text-3xl font-semibold text-foreground", children: displayName || "What can I help with?" }),
+        displayDescription ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground max-w-xl mx-auto leading-relaxed", children: displayDescription }) : /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "AI with Matrx superpowers" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        SmartAgentInput,
+        {
+          conversationId,
+          surfaceKey: `cx-chat:${agentId}`,
+          composer: { size: "splash", mode: composerMode },
+          enablePasteImages: isAuthenticated
+        }
+      )
+    ] }) }) })
+  ] });
 }
 export {
   ChatWelcomeClient as default

package/dist/cx-chat/components/ChatWelcomeServer.js

@@ -1,6 +1,7 @@
+import { jsx } from "react/jsx-runtime";
 import { ChatInstanceManager } from "./ChatInstanceManager.js";
 function ChatWelcomeServer({ agent }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "h-full flex flex-col overflow-hidden" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: "h-full flex flex-col overflow-hidden", children: /* @__PURE__ */ jsx(
     ChatInstanceManager,
     {
       mode: "welcome",
@@ -8,7 +9,7 @@ function ChatWelcomeServer({ agent }) {
       agentName: agent.name,
       agentDescription: agent.description
     }
-  ));
+  ) });
 }
 export {
   ChatWelcomeServer as default

package/dist/cx-chat/components/ContextGaugeWidget.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useAppSelector } from "../../store/hooks.js";
 import {
@@ -53,7 +54,7 @@ function ContextGaugeWidget({
       })
     );
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -64,18 +65,26 @@ function ContextGaugeWidget({
         tone.bg,
         tone.text,
         "hover:brightness-110"
-      )
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "relative w-10 h-1.5 rounded-full bg-muted overflow-hidden" }, /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: cn("absolute inset-y-0 left-0", tone.bar),
-        style: { width: `${pct}%` }
-      }
-    )),
-    /* @__PURE__ */ React.createElement("span", null, pct, "%"),
-    /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "\xB7"),
-    /* @__PURE__ */ React.createElement("span", null, formatK(est), " tok")
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "relative w-10 h-1.5 rounded-full bg-muted overflow-hidden", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("absolute inset-y-0 left-0", tone.bar),
+            style: { width: `${pct}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          pct,
+          "%"
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\xB7" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          formatK(est),
+          " tok"
+        ] })
+      ]
+    }
   );
 }
 function formatK(n) {

package/dist/cx-chat/components/SsrSidebarAgents.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { ChevronDown, Network } from "lucide-react";
 import { AgentListDropdown } from "@ai-matrx/agents/catalog/react";
 import { Tile } from "@ai-matrx/design-system/controls";
@@ -6,7 +7,7 @@ function SsrSidebarAgents({
   selectedAgent,
   onAgentSelect
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "border-b border-border px-1 py-1" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: "border-b border-border px-1 py-1", children: /* @__PURE__ */ jsx(
     AgentListDropdown,
     {
       consumerId: "cx-chat-sidebar-agent-picker",
@@ -15,9 +16,9 @@ function SsrSidebarAgents({
       onSelect: (agentId) => onAgentSelect?.({ promptId: agentId }),
       resolveAgentHref: (agent) => `/demos/chat/a/${agent.id}`,
       contentSide: "right",
-      triggerSlot: /* @__PURE__ */ React.createElement(Tile, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(Network, null), title: selectedAgent?.name ?? "Browse agents", end: /* @__PURE__ */ React.createElement(ChevronDown, null) })
+      triggerSlot: /* @__PURE__ */ jsx(Tile, { variant: "quiet", icon: /* @__PURE__ */ jsx(Network, {}), title: selectedAgent?.name ?? "Browse agents", end: /* @__PURE__ */ jsx(ChevronDown, {}) })
     }
-  ));
+  ) });
 }
 export {
   SsrSidebarAgents