@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/messages-display/user/UserMessageChipsDemo.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import {
   Globe,
@@ -116,11 +117,20 @@ function DemoBubble({
   children,
   className
 }) {
-  return /* @__PURE__ */ React.createElement("section", { className: cn("space-y-2", className) }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h3", { className: "text-sm font-semibold text-foreground" }, title), description ? /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground mt-0.5" }, description) : null), /* @__PURE__ */ React.createElement("div", { className: "bg-muted border border-border rounded-lg px-2 py-2 max-w-md" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, children)));
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "bg-muted border border-border rounded-lg px-2 py-2 max-w-md", children: /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children }) })
+  ] });
 }
 function DemoAttachmentChip({ spec }) {
   const Icon = ATTACHMENT_ICONS[spec.id] ?? FileText;
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement(Button, { variant: "outline", icon: /* @__PURE__ */ React.createElement(Icon, null), title: spec.title }, spec.title), spec.note ? /* @__PURE__ */ React.createElement("p", { className: "text-[10px] text-muted-foreground" }, spec.note) : null);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx(Button, { variant: "outline", icon: /* @__PURE__ */ jsx(Icon, {}), title: spec.title, children: spec.title }),
+    spec.note ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: spec.note }) : null
+  ] });
 }
 function UserMessageChipsDemo() {
   const dispatch = useAppDispatch();
@@ -134,117 +144,191 @@ function UserMessageChipsDemo() {
     );
     seedInputResources(dispatch, DEMO_CONV_INPUT_CHIPS);
   }, [dispatch]);
-  return /* @__PURE__ */ React.createElement("div", { className: "min-h-dvh bg-textured" }, /* @__PURE__ */ React.createElement("div", { className: "max-w-6xl mx-auto px-4 py-8 space-y-10" }, /* @__PURE__ */ React.createElement("header", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-bold text-foreground" }, "User Message Chips"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-muted-foreground" }, "Production tiles in", " ", /* @__PURE__ */ React.createElement("code", { className: "text-xs" }, "AgentUserMessage"), ",", " ", /* @__PURE__ */ React.createElement("code", { className: "text-xs" }, "SmartAgentResourceChips"), ", and", " ", /* @__PURE__ */ React.createElement("code", { className: "text-xs" }, "ContextPolicyChipStrip"), " (single + group). Style explorations below are kept for future tuning.")), /* @__PURE__ */ React.createElement(ResourceEditableToggleSamples, null), /* @__PURE__ */ React.createElement(
-    DemoBubble,
-    {
-      title: "Submitted typed attachments",
-      description: "The production submitted-message renderer with the exact prefetched webpage payload shape. The drawer is read-only and preserves the sent snapshot.",
-      className: "max-w-lg"
-    },
-    /* @__PURE__ */ React.createElement(
-      MessageAttachmentStrip,
+  return /* @__PURE__ */ jsx("div", { className: "min-h-dvh bg-textured", children: /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto px-4 py-8 space-y-10", children: [
+    /* @__PURE__ */ jsxs("header", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-foreground", children: "User Message Chips" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        "Production tiles in",
+        " ",
+        /* @__PURE__ */ jsx("code", { className: "text-xs", children: "AgentUserMessage" }),
+        ",",
+        " ",
+        /* @__PURE__ */ jsx("code", { className: "text-xs", children: "SmartAgentResourceChips" }),
+        ", and",
+        " ",
+        /* @__PURE__ */ jsx("code", { className: "text-xs", children: "ContextPolicyChipStrip" }),
+        " (single + group). Style explorations below are kept for future tuning."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ResourceEditableToggleSamples, {}),
+    /* @__PURE__ */ jsxs(
+      DemoBubble,
       {
-        conversationId: "demo-submitted-typed-attachments",
-        parts: SUBMITTED_ATTACHMENT_PARTS
+        title: "Submitted typed attachments",
+        description: "The production submitted-message renderer with the exact prefetched webpage payload shape. The drawer is read-only and preserves the sent snapshot.",
+        className: "max-w-lg",
+        children: [
+          /* @__PURE__ */ jsx(
+            MessageAttachmentStrip,
+            {
+              conversationId: "demo-submitted-typed-attachments",
+              parts: SUBMITTED_ATTACHMENT_PARTS
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground whitespace-pre-wrap", children: "Please turn the attached research into an infographic prompt." })
+        ]
       }
     ),
-    /* @__PURE__ */ React.createElement("p", { className: "text-xs text-foreground whitespace-pre-wrap" }, "Please turn the attached research into an infographic prompt.")
-  ), /* @__PURE__ */ React.createElement(
-    UserMessageAttachmentStyleComparison,
-    {
-      specs: DEMO_COMPARISON_ATTACHMENTS,
-      inputChipsConversationId: DEMO_CONV_INPUT_CHIPS
-    }
-  ), /* @__PURE__ */ React.createElement(UserMessageHybridTileSamples, { specs: DEMO_COMPARISON_ATTACHMENTS }), /* @__PURE__ */ React.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React.createElement("h2", { className: "text-base font-semibold text-foreground border-b border-border pb-2" }, "Context policies"), /* @__PURE__ */ React.createElement(
-    DemoBubble,
-    {
-      title: "Single context item",
-      description: "One slot \u2192 full chip with label + preview. Click opens detail sheet."
-    },
-    /* @__PURE__ */ React.createElement(
-      ContextPolicyChipStrip,
+    /* @__PURE__ */ jsx(
+      UserMessageAttachmentStyleComparison,
       {
-        conversationId: DEMO_CONV_SINGLE,
-        agentId: null,
-        entries: [DEMO_SINGLE_ENTRY]
+        specs: DEMO_COMPARISON_ATTACHMENTS,
+        inputChipsConversationId: DEMO_CONV_INPUT_CHIPS
       }
     ),
-    /* @__PURE__ */ React.createElement("p", { className: "text-xs text-foreground whitespace-pre-wrap" }, "Can you go ahead and get this working document ready?")
-  ), /* @__PURE__ */ React.createElement(
-    DemoBubble,
-    {
-      title: "Multiple context items",
-      description: "Two or more \u2192 collapsed \u201CContext Items (N)\u201D popover."
-    },
-    /* @__PURE__ */ React.createElement(
-      ContextPolicyChipStrip,
-      {
-        conversationId: DEMO_CONV_MULTI,
-        agentId: null,
-        entries: DEMO_MULTI_ENTRIES
-      }
-    ),
-    /* @__PURE__ */ React.createElement("p", { className: "text-xs text-foreground whitespace-pre-wrap" }, "Here is everything attached \u2014 open the popover to browse each slot.")
-  ), /* @__PURE__ */ React.createElement("section", { className: "space-y-3" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h3", { className: "text-sm font-semibold text-foreground" }, "All context types"), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground mt-0.5" }, "One bubble per", " ", /* @__PURE__ */ React.createElement("code", { className: "text-[10px]" }, "ContextObjectType"), ". Click any chip to inspect the detail sheet renderer for that type.")), /* @__PURE__ */ React.createElement("div", { className: "grid gap-4 sm:grid-cols-2" }, DEMO_TYPE_ENTRIES.map(({ type, entry, policy }) => /* @__PURE__ */ React.createElement(DemoBubble, { key: type, title: type, className: "max-w-none" }, /* @__PURE__ */ React.createElement(
-    ContextPolicyChip,
-    {
-      conversationId: "demo-user-msg-ctx-types",
-      agentId: null,
-      entry,
-      policy
-    }
-  )))))), /* @__PURE__ */ React.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React.createElement("h2", { className: "text-base font-semibold text-foreground border-b border-border pb-2" }, "Resource attachments"), /* @__PURE__ */ React.createElement(
-    DemoBubble,
-    {
-      title: "File chip with a stored file",
-      description: "Stored files get the rich chip: thumbnail, hover peek, preview on click."
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1" }, /* @__PURE__ */ React.createElement(
-      FileResourceChip,
-      {
-        fileId: "00000000-0000-0000-0000-000000000000",
-        size: "xs"
-      }
-    )),
-    /* @__PURE__ */ React.createElement("p", { className: "text-[10px] text-muted-foreground" }, "Fake UUID above \u2014 shows \u201CUnknown file\u201D fallback until a real file is in Redux. Swap in a real", " ", /* @__PURE__ */ React.createElement("code", { className: "text-[10px]" }, "file_id"), " to test the full path.")
-  ), /* @__PURE__ */ React.createElement("section", { className: "space-y-3" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h3", { className: "text-sm font-semibold text-foreground" }, "Legacy block chips"), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground mt-0.5" }, "Notes, tasks, webpages, tables, etc. \u2014 per-type pill + modal on click. Styled to match", " ", /* @__PURE__ */ React.createElement("code", { className: "text-[10px]" }, "AttachmentChip"), ".")), /* @__PURE__ */ React.createElement(
-    DemoBubble,
-    {
-      title: "All legacy types in one message",
-      className: "max-w-lg"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1" }, DEMO_LEGACY_ATTACHMENTS.map((spec) => /* @__PURE__ */ React.createElement(DemoAttachmentChip, { key: spec.id, spec }))),
-    /* @__PURE__ */ React.createElement("p", { className: "text-xs text-foreground whitespace-pre-wrap" }, "Mixed attachments above a text line \u2014 same layout as production.")
-  ))), /* @__PURE__ */ React.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React.createElement("h2", { className: "text-base font-semibold text-foreground border-b border-border pb-2" }, "Combined (production layout)"), /* @__PURE__ */ React.createElement(
-    DemoBubble,
-    {
-      title: "Context + attachments + text",
-      description: "Order in AgentUserMessage: context strip \u2192 attachment row \u2192 message text.",
-      className: "max-w-lg"
-    },
-    /* @__PURE__ */ React.createElement(
-      ContextPolicyChipStrip,
-      {
-        conversationId: DEMO_CONV_MULTI,
-        agentId: null,
-        entries: DEMO_MULTI_ENTRIES
-      }
-    ),
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1.5" }, DEMO_LEGACY_ATTACHMENTS.slice(0, 3).map((spec) => {
-      const Icon = ATTACHMENT_ICONS[spec.id] ?? FileText;
-      return /* @__PURE__ */ React.createElement(
-        ResourceAttachmentTile,
+    /* @__PURE__ */ jsx(UserMessageHybridTileSamples, { specs: DEMO_COMPARISON_ATTACHMENTS }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-foreground border-b border-border pb-2", children: "Context policies" }),
+      /* @__PURE__ */ jsxs(
+        DemoBubble,
+        {
+          title: "Single context item",
+          description: "One slot \u2192 full chip with label + preview. Click opens detail sheet.",
+          children: [
+            /* @__PURE__ */ jsx(
+              ContextPolicyChipStrip,
+              {
+                conversationId: DEMO_CONV_SINGLE,
+                agentId: null,
+                entries: [DEMO_SINGLE_ENTRY]
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground whitespace-pre-wrap", children: "Can you go ahead and get this working document ready?" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        DemoBubble,
+        {
+          title: "Multiple context items",
+          description: "Two or more \u2192 collapsed \u201CContext Items (N)\u201D popover.",
+          children: [
+            /* @__PURE__ */ jsx(
+              ContextPolicyChipStrip,
+              {
+                conversationId: DEMO_CONV_MULTI,
+                agentId: null,
+                entries: DEMO_MULTI_ENTRIES
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground whitespace-pre-wrap", children: "Here is everything attached \u2014 open the popover to browse each slot." })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "All context types" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-0.5", children: [
+            "One bubble per",
+            " ",
+            /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "ContextObjectType" }),
+            ". Click any chip to inspect the detail sheet renderer for that type."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-4 sm:grid-cols-2", children: DEMO_TYPE_ENTRIES.map(({ type, entry, policy }) => /* @__PURE__ */ jsx(DemoBubble, { title: type, className: "max-w-none", children: /* @__PURE__ */ jsx(
+          ContextPolicyChip,
+          {
+            conversationId: "demo-user-msg-ctx-types",
+            agentId: null,
+            entry,
+            policy
+          }
+        ) }, type)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-foreground border-b border-border pb-2", children: "Resource attachments" }),
+      /* @__PURE__ */ jsxs(
+        DemoBubble,
+        {
+          title: "File chip with a stored file",
+          description: "Stored files get the rich chip: thumbnail, hover peek, preview on click.",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: /* @__PURE__ */ jsx(
+              FileResourceChip,
+              {
+                fileId: "00000000-0000-0000-0000-000000000000",
+                size: "xs"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground", children: [
+              "Fake UUID above \u2014 shows \u201CUnknown file\u201D fallback until a real file is in Redux. Swap in a real",
+              " ",
+              /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "file_id" }),
+              " to test the full path."
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Legacy block chips" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-0.5", children: [
+            "Notes, tasks, webpages, tables, etc. \u2014 per-type pill + modal on click. Styled to match",
+            " ",
+            /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "AttachmentChip" }),
+            "."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          DemoBubble,
+          {
+            title: "All legacy types in one message",
+            className: "max-w-lg",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: DEMO_LEGACY_ATTACHMENTS.map((spec) => /* @__PURE__ */ jsx(DemoAttachmentChip, { spec }, spec.id)) }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground whitespace-pre-wrap", children: "Mixed attachments above a text line \u2014 same layout as production." })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-foreground border-b border-border pb-2", children: "Combined (production layout)" }),
+      /* @__PURE__ */ jsxs(
+        DemoBubble,
         {
-          key: spec.id,
-          typeLabel: spec.label,
-          title: spec.title,
-          icon: Icon,
-          themeKey: spec.id
+          title: "Context + attachments + text",
+          description: "Order in AgentUserMessage: context strip \u2192 attachment row \u2192 message text.",
+          className: "max-w-lg",
+          children: [
+            /* @__PURE__ */ jsx(
+              ContextPolicyChipStrip,
+              {
+                conversationId: DEMO_CONV_MULTI,
+                agentId: null,
+                entries: DEMO_MULTI_ENTRIES
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: DEMO_LEGACY_ATTACHMENTS.slice(0, 3).map((spec) => {
+              const Icon = ATTACHMENT_ICONS[spec.id] ?? FileText;
+              return /* @__PURE__ */ jsx(
+                ResourceAttachmentTile,
+                {
+                  typeLabel: spec.label,
+                  title: spec.title,
+                  icon: Icon,
+                  themeKey: spec.id
+                },
+                spec.id
+              );
+            }) }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground whitespace-pre-wrap", children: "Can you go ahead and get this working document ready with the content and then let's talk about it?" })
+          ]
         }
-      );
-    })),
-    /* @__PURE__ */ React.createElement("p", { className: "text-xs text-foreground whitespace-pre-wrap" }, "Can you go ahead and get this working document ready with the content and then let's talk about it?")
-  ))));
+      )
+    ] })
+  ] }) });
 }
 export {
   UserMessageChipsDemo