@mastra/playground-ui 55.0.0 → 56.0.0-alpha.10

package/dist/message-B-28p4Zs.cjs

@@ -0,0 +1,66 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-BuHW7Wrt.cjs');
+
+function Message({ from, avatar, footer, pending, children, className, ...props }) {
+  const isUser = from === "user";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...props,
+      "data-slot": "message",
+      "data-from": from,
+      "data-message-pending": pending || void 0,
+      className: utils_cn.cn(
+        "group/message max-w-full min-w-0",
+        isUser && "my-3 ml-auto flex w-fit max-w-[70%] items-start gap-2",
+        !isUser && footer && "mb-3",
+        className
+      ),
+      children: [
+        avatar,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("min-w-0", isUser && "flex flex-col items-end"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-slot": "message-content",
+              className: utils_cn.cn(
+                "max-w-full min-w-0 text-ui-md leading-ui-md break-words",
+                isUser && "rounded-xl border border-transparent bg-neutral6/5 px-4 py-2 text-text1",
+                isUser && pending && "border-dashed border-border1",
+                !isUser && footer && "[&>:last-child]:mb-0"
+              ),
+              children
+            }
+          ),
+          footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 max-w-full", children: footer })
+        ] })
+      ]
+    }
+  );
+}
+function MessageActions({ visibility = "hover", children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      "data-slot": "message-actions",
+      className: utils_cn.cn(
+        "flex flex-wrap items-center gap-1 group-data-[from=user]/message:flex-row-reverse",
+        "motion-safe:transition-opacity [&_button]:pointer-coarse:min-h-11 [&_button]:pointer-coarse:min-w-11",
+        visibility === "hover" && "group-focus-within/message:opacity-100 group-hover/message:opacity-100 pointer-fine:opacity-0",
+        className
+      ),
+      children
+    }
+  );
+}
+function MessageMetadata({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, className: utils_cn.cn("text-icon3 inline-flex items-center gap-1 text-ui-xs", className) });
+}
+
+exports.Message = Message;
+exports.MessageActions = MessageActions;
+exports.MessageMetadata = MessageMetadata;
+//# sourceMappingURL=message-B-28p4Zs.cjs.map

package/dist/message-B-28p4Zs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-B-28p4Zs.cjs","sources":["../src/ds/components/Message/message.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface MessageProps extends ComponentProps<'div'> {\n  from: 'user' | 'assistant';\n  avatar?: ReactNode;\n  footer?: ReactNode;\n  pending?: boolean;\n}\n\nexport function Message({ from, avatar, footer, pending, children, className, ...props }: MessageProps) {\n  const isUser = from === 'user';\n\n  return (\n    <div\n      {...props}\n      data-slot=\"message\"\n      data-from={from}\n      data-message-pending={pending || undefined}\n      className={cn(\n        'group/message max-w-full min-w-0',\n        isUser && 'my-3 ml-auto flex w-fit max-w-[70%] items-start gap-2',\n        !isUser && footer && 'mb-3',\n        className,\n      )}\n    >\n      {avatar}\n      <div className={cn('min-w-0', isUser && 'flex flex-col items-end')}>\n        <div\n          data-slot=\"message-content\"\n          className={cn(\n            'max-w-full min-w-0 text-ui-md leading-ui-md break-words',\n            isUser && 'rounded-xl border border-transparent bg-neutral6/5 px-4 py-2 text-text1',\n            isUser && pending && 'border-dashed border-border1',\n            !isUser && footer && '[&>:last-child]:mb-0',\n          )}\n        >\n          {children}\n        </div>\n        {footer && <div className=\"mt-1 max-w-full\">{footer}</div>}\n      </div>\n    </div>\n  );\n}\n\nexport interface MessageActionsProps extends ComponentProps<'div'> {\n  visibility?: 'hover' | 'always';\n}\n\nexport function MessageActions({ visibility = 'hover', children, className, ...props }: MessageActionsProps) {\n  return (\n    <div\n      {...props}\n      data-slot=\"message-actions\"\n      className={cn(\n        'flex flex-wrap items-center gap-1 group-data-[from=user]/message:flex-row-reverse',\n        'motion-safe:transition-opacity [&_button]:pointer-coarse:min-h-11 [&_button]:pointer-coarse:min-w-11',\n        visibility === 'hover' &&\n          'group-focus-within/message:opacity-100 group-hover/message:opacity-100 pointer-fine:opacity-0',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function MessageMetadata({ className, ...props }: ComponentProps<'span'>) {\n  return <span {...props} className={cn('text-icon3 inline-flex items-center gap-1 text-ui-xs', className)} />;\n}\n"],"names":["jsxs","cn","jsx"],"mappings":";;;;;AAUO,SAAS,OAAA,CAAQ,EAAE,IAAA,EAAM,MAAA,EAAQ,MAAA,EAAQ,SAAS,QAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAAiB;AACtG,EAAA,MAAM,SAAS,IAAA,KAAS,MAAA;AAExB,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAA,EAAU,SAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,wBAAsB,OAAA,IAAW,MAAA;AAAA,MACjC,SAAA,EAAWC,WAAA;AAAA,QACT,kCAAA;AAAA,QACA,MAAA,IAAU,uDAAA;AAAA,QACV,CAAC,UAAU,MAAA,IAAU,MAAA;AAAA,QACrB;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,MAAA;AAAA,wCACA,KAAA,EAAA,EAAI,SAAA,EAAWA,YAAG,SAAA,EAAW,MAAA,IAAU,yBAAyB,CAAA,EAC/D,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,iBAAA;AAAA,cACV,SAAA,EAAWD,WAAA;AAAA,gBACT,yDAAA;AAAA,gBACA,MAAA,IAAU,yEAAA;AAAA,gBACV,UAAU,OAAA,IAAW,8BAAA;AAAA,gBACrB,CAAC,UAAU,MAAA,IAAU;AAAA,eACvB;AAAA,cAEC;AAAA;AAAA,WACH;AAAA,UACC,MAAA,oBAAUC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAmB,QAAA,EAAA,MAAA,EAAO;AAAA,SAAA,EACtD;AAAA;AAAA;AAAA,GACF;AAEJ;AAMO,SAAS,cAAA,CAAe,EAAE,UAAA,GAAa,OAAA,EAAS,UAAU,SAAA,EAAW,GAAG,OAAM,EAAwB;AAC3G,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAWD,WAAA;AAAA,QACT,mFAAA;AAAA,QACA,sGAAA;AAAA,QACA,eAAe,OAAA,IACb,+FAAA;AAAA,QACF;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEO,SAAS,eAAA,CAAgB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA2B;AAC/E,EAAA,uBAAOC,cAAA,CAAC,UAAM,GAAG,KAAA,EAAO,WAAWD,WAAA,CAAG,sDAAA,EAAwD,SAAS,CAAA,EAAG,CAAA;AAC5G;;;;;;"}

package/dist/message-DGZPjxsh.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { c as cn } from './cn-C6s2yXwM.js';
+
+function Message({ from, avatar, footer, pending, children, className, ...props }) {
+  const isUser = from === "user";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      "data-slot": "message",
+      "data-from": from,
+      "data-message-pending": pending || void 0,
+      className: cn(
+        "group/message max-w-full min-w-0",
+        isUser && "my-3 ml-auto flex w-fit max-w-[70%] items-start gap-2",
+        !isUser && footer && "mb-3",
+        className
+      ),
+      children: [
+        avatar,
+        /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", isUser && "flex flex-col items-end"), children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "message-content",
+              className: cn(
+                "max-w-full min-w-0 text-ui-md leading-ui-md break-words",
+                isUser && "rounded-xl border border-transparent bg-neutral6/5 px-4 py-2 text-text1",
+                isUser && pending && "border-dashed border-border1",
+                !isUser && footer && "[&>:last-child]:mb-0"
+              ),
+              children
+            }
+          ),
+          footer && /* @__PURE__ */ jsx("div", { className: "mt-1 max-w-full", children: footer })
+        ] })
+      ]
+    }
+  );
+}
+function MessageActions({ visibility = "hover", children, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      "data-slot": "message-actions",
+      className: cn(
+        "flex flex-wrap items-center gap-1 group-data-[from=user]/message:flex-row-reverse",
+        "motion-safe:transition-opacity [&_button]:pointer-coarse:min-h-11 [&_button]:pointer-coarse:min-w-11",
+        visibility === "hover" && "group-focus-within/message:opacity-100 group-hover/message:opacity-100 pointer-fine:opacity-0",
+        className
+      ),
+      children
+    }
+  );
+}
+function MessageMetadata({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { ...props, className: cn("text-icon3 inline-flex items-center gap-1 text-ui-xs", className) });
+}
+
+export { Message as M, MessageMetadata as a, MessageActions as b };
+//# sourceMappingURL=message-DGZPjxsh.js.map

package/dist/message-DGZPjxsh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-DGZPjxsh.js","sources":["../src/ds/components/Message/message.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface MessageProps extends ComponentProps<'div'> {\n  from: 'user' | 'assistant';\n  avatar?: ReactNode;\n  footer?: ReactNode;\n  pending?: boolean;\n}\n\nexport function Message({ from, avatar, footer, pending, children, className, ...props }: MessageProps) {\n  const isUser = from === 'user';\n\n  return (\n    <div\n      {...props}\n      data-slot=\"message\"\n      data-from={from}\n      data-message-pending={pending || undefined}\n      className={cn(\n        'group/message max-w-full min-w-0',\n        isUser && 'my-3 ml-auto flex w-fit max-w-[70%] items-start gap-2',\n        !isUser && footer && 'mb-3',\n        className,\n      )}\n    >\n      {avatar}\n      <div className={cn('min-w-0', isUser && 'flex flex-col items-end')}>\n        <div\n          data-slot=\"message-content\"\n          className={cn(\n            'max-w-full min-w-0 text-ui-md leading-ui-md break-words',\n            isUser && 'rounded-xl border border-transparent bg-neutral6/5 px-4 py-2 text-text1',\n            isUser && pending && 'border-dashed border-border1',\n            !isUser && footer && '[&>:last-child]:mb-0',\n          )}\n        >\n          {children}\n        </div>\n        {footer && <div className=\"mt-1 max-w-full\">{footer}</div>}\n      </div>\n    </div>\n  );\n}\n\nexport interface MessageActionsProps extends ComponentProps<'div'> {\n  visibility?: 'hover' | 'always';\n}\n\nexport function MessageActions({ visibility = 'hover', children, className, ...props }: MessageActionsProps) {\n  return (\n    <div\n      {...props}\n      data-slot=\"message-actions\"\n      className={cn(\n        'flex flex-wrap items-center gap-1 group-data-[from=user]/message:flex-row-reverse',\n        'motion-safe:transition-opacity [&_button]:pointer-coarse:min-h-11 [&_button]:pointer-coarse:min-w-11',\n        visibility === 'hover' &&\n          'group-focus-within/message:opacity-100 group-hover/message:opacity-100 pointer-fine:opacity-0',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function MessageMetadata({ className, ...props }: ComponentProps<'span'>) {\n  return <span {...props} className={cn('text-icon3 inline-flex items-center gap-1 text-ui-xs', className)} />;\n}\n"],"names":[],"mappings":";;;AAUO,SAAS,OAAA,CAAQ,EAAE,IAAA,EAAM,MAAA,EAAQ,MAAA,EAAQ,SAAS,QAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAAiB;AACtG,EAAA,MAAM,SAAS,IAAA,KAAS,MAAA;AAExB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAA,EAAU,SAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,wBAAsB,OAAA,IAAW,MAAA;AAAA,MACjC,SAAA,EAAW,EAAA;AAAA,QACT,kCAAA;AAAA,QACA,MAAA,IAAU,uDAAA;AAAA,QACV,CAAC,UAAU,MAAA,IAAU,MAAA;AAAA,QACrB;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,MAAA;AAAA,6BACA,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,SAAA,EAAW,MAAA,IAAU,yBAAyB,CAAA,EAC/D,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,iBAAA;AAAA,cACV,SAAA,EAAW,EAAA;AAAA,gBACT,yDAAA;AAAA,gBACA,MAAA,IAAU,yEAAA;AAAA,gBACV,UAAU,OAAA,IAAW,8BAAA;AAAA,gBACrB,CAAC,UAAU,MAAA,IAAU;AAAA,eACvB;AAAA,cAEC;AAAA;AAAA,WACH;AAAA,UACC,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAmB,QAAA,EAAA,MAAA,EAAO;AAAA,SAAA,EACtD;AAAA;AAAA;AAAA,GACF;AAEJ;AAMO,SAAS,cAAA,CAAe,EAAE,UAAA,GAAa,OAAA,EAAS,UAAU,SAAA,EAAW,GAAG,OAAM,EAAwB;AAC3G,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,mFAAA;AAAA,QACA,sGAAA;AAAA,QACA,eAAe,OAAA,IACb,+FAAA;AAAA,QACF;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEO,SAAS,eAAA,CAAgB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA2B;AAC/E,EAAA,uBAAO,GAAA,CAAC,UAAM,GAAG,KAAA,EAAO,WAAW,EAAA,CAAG,sDAAA,EAAwD,SAAS,CAAA,EAAG,CAAA;AAC5G;;;;"}