@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/cx-chat/components/messages/UserMessage.js

@@ -1,7 +1,8 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useClipboard } from "@ai-matrx/kit/clipboard";
 import { toast } from "../../../host/notify.js";
-import React, { useState, useEffect, useRef, useMemo } from "react";
+import { useState, useEffect, useRef, useMemo } from "react";
 import {
   Check,
   Copy,
@@ -47,35 +48,38 @@ function AttachedResourcesDisplay({
   resources
 }) {
   if (resources.length === 0) return null;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-2" }, resources.map((resource, index) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: resources.map((resource, index) => {
     const Icon = getResourceIcon(resource.type);
     const data = resource.data;
     const isImage = resource.type === "image_link" || resource.type === "image_url" || resource.type === "file" && data.mime_type?.startsWith("image/");
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        key: index,
-        className: "relative group rounded-lg overflow-hidden border border-border"
+        className: "relative group rounded-lg overflow-hidden border border-border",
+        children: isImage && data.url ? /* @__PURE__ */ jsx(
+          InlineMediaRef,
+          {
+            ref: data.url,
+            size: { width: 40, height: 40 },
+            fit: "cover",
+            rounded: "none",
+            fallback: null,
+            alt: data.filename || "Attached image"
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "relative h-10 w-12 flex flex-col items-center justify-center bg-muted py-1", children: [
+          /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6 text-muted-foreground mb-1" }),
+          resource.type === "youtube" ? /* @__PURE__ */ jsx(
+            VideoPublishDate,
+            {
+              publishedAt: data.publishedAt ?? data.published_at,
+              className: "text-[8px]"
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "text-[8px] text-muted-foreground text-center truncate w-full px-1", children: data.filename || resource.type })
+        ] })
       },
-      isImage && data.url ? /* @__PURE__ */ React.createElement(
-        InlineMediaRef,
-        {
-          ref: data.url,
-          size: { width: 40, height: 40 },
-          fit: "cover",
-          rounded: "none",
-          fallback: null,
-          alt: data.filename || "Attached image"
-        }
-      ) : /* @__PURE__ */ React.createElement("div", { className: "relative h-10 w-12 flex flex-col items-center justify-center bg-muted py-1" }, /* @__PURE__ */ React.createElement(Icon, { className: "h-6 w-6 text-muted-foreground mb-1" }), resource.type === "youtube" ? /* @__PURE__ */ React.createElement(
-        VideoPublishDate,
-        {
-          publishedAt: data.publishedAt ?? data.published_at,
-          className: "text-[8px]"
-        }
-      ) : /* @__PURE__ */ React.createElement("span", { className: "text-[8px] text-muted-foreground text-center truncate w-full px-1" }, data.filename || resource.type))
+      index
     );
-  }));
+  }) });
 }
 function UserMessage({
   message,
@@ -173,106 +177,128 @@ function UserMessage({
     }
   };
   const marginClass = compact ? "" : "ml-12";
-  return /* @__PURE__ */ React.createElement("div", { className: marginClass }, /* @__PURE__ */ React.createElement("div", { className: "bg-muted border border-border rounded-lg" }, isEditing ? (
+  return /* @__PURE__ */ jsx("div", { className: marginClass, children: /* @__PURE__ */ jsx("div", { className: "bg-muted border border-border rounded-lg", children: isEditing ? (
     // ── Edit mode ──────────────────────────────────────────────
-    /* @__PURE__ */ React.createElement("div", { className: "p-2 space-y-2" }, /* @__PURE__ */ React.createElement(
-      "textarea",
-      {
-        ref: textareaRef,
-        value: editContent,
-        onChange: handleEditChange,
-        onKeyDown: handleKeyDown,
-        className: "w-full text-xs bg-background border border-border rounded px-2 py-1.5 text-foreground resize-none focus:outline-none focus:ring-1 focus:ring-primary min-h-[60px]",
-        style: { fontSize: "16px" },
-        autoFocus: true
-      }
-    ), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 justify-end" }, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", onClick: handleEditCancel }, "Cancel"), /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        variant: "primary",
-        onClick: handleEditSave,
-        disabled: !hasUnsavedChanges
-      },
-      "Save"
-    )))
+    /* @__PURE__ */ jsxs("div", { className: "p-2 space-y-2", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: textareaRef,
+          value: editContent,
+          onChange: handleEditChange,
+          onKeyDown: handleKeyDown,
+          className: "w-full text-xs bg-background border border-border rounded px-2 py-1.5 text-foreground resize-none focus:outline-none focus:ring-1 focus:ring-primary min-h-[60px]",
+          style: { fontSize: "16px" },
+          autoFocus: true
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 justify-end", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "quiet", onClick: handleEditCancel, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "primary",
+            onClick: handleEditSave,
+            disabled: !hasUnsavedChanges,
+            children: "Save"
+          }
+        )
+      ] })
+    ] })
   ) : (
     // ── View mode ──────────────────────────────────────────────
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ jsxs(
       "div",
       {
         className: `p-2 relative group ${shouldBeCollapsible ? "cursor-pointer" : ""}`,
-        onClick: () => handleToggleCollapse()
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "absolute top-1 right-1 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity z-10" }, onContentChange && /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          variant: "quiet",
-          onClick: handleEditStart,
-          className: "w-6",
-          title: "Edit message"
-        },
-        /* @__PURE__ */ React.createElement(
-          "svg",
-          {
-            className: "w-3 h-3",
-            fill: "none",
-            stroke: "currentColor",
-            viewBox: "0 0 24 24"
-          },
-          /* @__PURE__ */ React.createElement(
-            "path",
-            {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              strokeWidth: 2,
-              d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-            }
-          )
-        )
-      ), /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          icon: isCopied ? /* @__PURE__ */ React.createElement(Check, null) : /* @__PURE__ */ React.createElement(Copy, null),
-          "aria-label": "Copy",
-          variant: "quiet",
-          onClick: handleCopy,
-          title: "Copy"
-        }
-      )),
-      /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, embeddedResources.length > 0 && /* @__PURE__ */ React.createElement(ResourcesContainer, { resources: embeddedResources }), textContent.trim() && /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          ref: measureRef,
-          className: `text-xs text-foreground whitespace-pre-wrap break-words overflow-hidden transition-all duration-300 ${shouldBeCollapsible && isCollapsed ? "max-h-12" : ""}`
-        },
-        textContent
-      ), shouldBeCollapsible && isCollapsed && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-muted via-muted/60 to-transparent pointer-events-none" }), /* @__PURE__ */ React.createElement("div", { className: "absolute -bottom-2 left-0 right-0 flex justify-center" }, /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          icon: /* @__PURE__ */ React.createElement(ChevronDown, null),
-          "aria-label": "Expand message",
-          variant: "quiet",
-          onClick: (e) => {
-            e.stopPropagation();
-            handleToggleCollapse();
-          },
-          title: "Expand message"
-        }
-      ))), shouldBeCollapsible && !isCollapsed && /* @__PURE__ */ React.createElement("div", { className: "flex justify-center mt-1" }, /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          icon: /* @__PURE__ */ React.createElement(ChevronUp, null),
-          "aria-label": "Collapse message",
-          variant: "quiet",
-          onClick: (e) => {
-            e.stopPropagation();
-            handleToggleCollapse();
-          },
-          title: "Collapse message"
-        }
-      ))), message.resources && message.resources.length > 0 && /* @__PURE__ */ React.createElement(AttachedResourcesDisplay, { resources: message.resources }))
+        onClick: () => handleToggleCollapse(),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "absolute top-1 right-1 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity z-10", children: [
+            onContentChange && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "quiet",
+                onClick: handleEditStart,
+                className: "w-6",
+                title: "Edit message",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "w-3 h-3",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: isCopied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}),
+                "aria-label": "Copy",
+                variant: "quiet",
+                onClick: handleCopy,
+                title: "Copy"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            embeddedResources.length > 0 && /* @__PURE__ */ jsx(ResourcesContainer, { resources: embeddedResources }),
+            textContent.trim() && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: measureRef,
+                  className: `text-xs text-foreground whitespace-pre-wrap break-words overflow-hidden transition-all duration-300 ${shouldBeCollapsible && isCollapsed ? "max-h-12" : ""}`,
+                  children: textContent
+                }
+              ),
+              shouldBeCollapsible && isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-muted via-muted/60 to-transparent pointer-events-none" }),
+                /* @__PURE__ */ jsx("div", { className: "absolute -bottom-2 left-0 right-0 flex justify-center", children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    icon: /* @__PURE__ */ jsx(ChevronDown, {}),
+                    "aria-label": "Expand message",
+                    variant: "quiet",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleToggleCollapse();
+                    },
+                    title: "Expand message"
+                  }
+                ) })
+              ] }),
+              shouldBeCollapsible && !isCollapsed && /* @__PURE__ */ jsx("div", { className: "flex justify-center mt-1", children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  icon: /* @__PURE__ */ jsx(ChevronUp, {}),
+                  "aria-label": "Collapse message",
+                  variant: "quiet",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleToggleCollapse();
+                  },
+                  title: "Collapse message"
+                }
+              ) })
+            ] }),
+            message.resources && message.resources.length > 0 && /* @__PURE__ */ jsx(AttachedResourcesDisplay, { resources: message.resources })
+          ] })
+        ]
+      }
     )
-  )));
+  ) }) });
 }
 var UserMessage_default = UserMessage;
 export {

package/dist/cx-chat/components/sidebar/SidebarActions.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import {
   FolderKanban,
   ChevronRight,
@@ -16,23 +17,26 @@ function PlaceholderDropdownRow({
   icon: Icon,
   label
 }) {
-  return /* @__PURE__ */ React.createElement(DropdownMenu, null, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Tile, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(Icon, null), title: label, end: /* @__PURE__ */ React.createElement(ChevronRight, null) })), /* @__PURE__ */ React.createElement(
-    DropdownMenuContent,
-    {
-      align: "start",
-      side: "right",
-      sideOffset: 8,
-      className: "w-44"
-    },
-    /* @__PURE__ */ React.createElement(
-      DropdownMenuItem,
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Tile, { variant: "quiet", icon: /* @__PURE__ */ jsx(Icon, {}), title: label, end: /* @__PURE__ */ jsx(ChevronRight, {}) }) }),
+    /* @__PURE__ */ jsx(
+      DropdownMenuContent,
       {
-        disabled: true,
-        className: "text-[11px] text-muted-foreground"
-      },
-      "Coming soon"
+        align: "start",
+        side: "right",
+        sideOffset: 8,
+        className: "w-44",
+        children: /* @__PURE__ */ jsx(
+          DropdownMenuItem,
+          {
+            disabled: true,
+            className: "text-[11px] text-muted-foreground",
+            children: "Coming soon"
+          }
+        )
+      }
     )
-  ));
+  ] });
 }
 function SidebarActions({
   onNewChat,
@@ -40,7 +44,11 @@ function SidebarActions({
   onSearchChange,
   newChatHref = "/demos/chat"
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "px-1.5 py-1" }, /* @__PURE__ */ React.createElement(PlaceholderDropdownRow, { icon: Building, label: "Organization" }), /* @__PURE__ */ React.createElement(PlaceholderDropdownRow, { icon: FolderKanban, label: "Project" }), /* @__PURE__ */ React.createElement(PlaceholderDropdownRow, { icon: ListCheck, label: "Tasks" }));
+  return /* @__PURE__ */ jsxs("div", { className: "px-1.5 py-1", children: [
+    /* @__PURE__ */ jsx(PlaceholderDropdownRow, { icon: Building, label: "Organization" }),
+    /* @__PURE__ */ jsx(PlaceholderDropdownRow, { icon: FolderKanban, label: "Project" }),
+    /* @__PURE__ */ jsx(PlaceholderDropdownRow, { icon: ListCheck, label: "Tasks" })
+  ] });
 }
 var SidebarActions_default = SidebarActions;
 export {

package/dist/cx-chat/components/sidebar/SidebarUserFooter.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Link } from "../../../host/navigation.js";
 import { useAppSelector as useSelector } from "../../../store/hooks.js";
 import {
@@ -19,40 +20,52 @@ function SidebarUserFooter() {
   const isAuthenticated = !!userId;
   const initials = getInitials(displayName);
   if (!isAuthenticated) {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex-shrink-0 border-t border-border px-2.5 py-2.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5" }, /* @__PURE__ */ React.createElement(
-      Link,
-      {
-        href: signUpHref,
-        className: "flex items-center justify-center gap-2 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors"
-      },
-      /* @__PURE__ */ React.createElement(UserPlus, { className: "h-3.5 w-3.5" }),
-      "Sign Up"
-    ), /* @__PURE__ */ React.createElement(
-      Link,
-      {
-        href: loginHref,
-        className: "flex items-center justify-center gap-1.5 px-3 py-1 rounded-md text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
-      },
-      /* @__PURE__ */ React.createElement(LogIn, { className: "h-3 w-3" }),
-      "Sign In"
-    )));
+    return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-t border-border px-2.5 py-2.5", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: signUpHref,
+          className: "flex items-center justify-center gap-2 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx(UserPlus, { className: "h-3.5 w-3.5" }),
+            "Sign Up"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: loginHref,
+          className: "flex items-center justify-center gap-1.5 px-3 py-1 rounded-md text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx(LogIn, { className: "h-3 w-3" }),
+            "Sign In"
+          ]
+        }
+      )
+    ] }) });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "flex-shrink-0 border-t border-border" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-t border-border", children: /* @__PURE__ */ jsxs(
     Link,
     {
       href: "/user-settings",
-      className: "flex items-center gap-2.5 px-2.5 py-2.5 hover:bg-accent/40 transition-colors group"
-    },
-    /* @__PURE__ */ React.createElement(Avatar, { className: "h-6 w-6 flex-shrink-0" }, /* @__PURE__ */ React.createElement(
-      AvatarImage,
-      {
-        src: profilePhoto || void 0,
-        alt: displayName || "User"
-      }
-    ), /* @__PURE__ */ React.createElement(AvatarFallback, { className: "text-[9px] font-medium bg-gradient-to-br from-blue-600 to-violet-600 text-white" }, initials)),
-    /* @__PURE__ */ React.createElement("span", { className: "text-xs text-foreground/80 group-hover:text-foreground truncate flex-1 transition-colors" }, displayName || "Account"),
-    /* @__PURE__ */ React.createElement(ChevronRight, { className: "h-3 w-3 text-muted-foreground flex-shrink-0" })
-  ));
+      className: "flex items-center gap-2.5 px-2.5 py-2.5 hover:bg-accent/40 transition-colors group",
+      children: [
+        /* @__PURE__ */ jsxs(Avatar, { className: "h-6 w-6 flex-shrink-0", children: [
+          /* @__PURE__ */ jsx(
+            AvatarImage,
+            {
+              src: profilePhoto || void 0,
+              alt: displayName || "User"
+            }
+          ),
+          /* @__PURE__ */ jsx(AvatarFallback, { className: "text-[9px] font-medium bg-gradient-to-br from-blue-600 to-violet-600 text-white", children: initials })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground/80 group-hover:text-foreground truncate flex-1 transition-colors", children: displayName || "Account" }),
+        /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground flex-shrink-0" })
+      ]
+    }
+  ) });
 }
 var SidebarUserFooter_default = SidebarUserFooter;
 export {