@iblai/iblai-js 2.5.0 → 2.5.1

package/dist/web-containers/source/index.esm.js

@@ -190354,6 +190354,11 @@ function AlertsTab({ platformKey }) {
                         }) })] }), jsx(EditAlertDialog, { open: isEditDialogOpen, onOpenChange: setIsEditDialogOpen, template: selectedTemplate, platformKey: platformKey, templateType: (_a = selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.type) !== null && _a !== void 0 ? _a : null, onSave: handleTemplateSaved })] }));
 }
 
+// Notification bodies are arbitrary (often email) HTML: long unbroken URLs and
+// fixed-width tables would otherwise bleed out of the panel. Break long words,
+// cap every descendant at the container width, and let anything that still
+// cannot shrink scroll inside the body instead of stretching the layout.
+const notificationBodyClasses = cn('prose prose-sm max-w-none text-gray-700', 'overflow-x-auto break-words [overflow-wrap:anywhere]', '[&_*]:max-w-full', '[&_a]:break-all', '[&_img]:h-auto', '[&_pre]:overflow-x-auto [&_pre]:whitespace-pre-wrap', '[&_code]:whitespace-pre-wrap');
 function NotificationDisplay({ org, userId, isAdmin = false, selectedNotificationId, enableRbac = false, tenant = '', rbacPermissions = {}, className, }) {
     const t = useT();
     const [selectedNotification, setSelectedNotification] = useState(null);
@@ -190537,7 +190542,7 @@ function NotificationDisplay({ org, userId, isAdmin = false, selectedNotificatio
                                                     // Open modal on mobile
                                                     setIsMobileModalOpen(true);
                                                 }, className: cn('w-full p-4 border-b border-gray-100 cursor-pointer hover:bg-gray-50 transition-colors text-left', (selectedNotification === null || selectedNotification === void 0 ? void 0 : selectedNotification.id) === notification.id &&
-                                                    'bg-blue-50 hover:bg-blue-50', !notification.read && 'bg-blue-50/30'), "aria-pressed": (selectedNotification === null || selectedNotification === void 0 ? void 0 : selectedNotification.id) === notification.id, "aria-label": `${notification.read ? '' : t('notificationsNotificationDisplay.unreadPrefix')}${notification.title}, ${formatTimestamp(notification.timestamp)}`, "data-testid": `notification-button-${notification.id}`, "data-read": notification.read, children: jsxs("div", { className: "flex items-start gap-3", children: [jsx("div", { className: cn('w-2 h-2 rounded-full mt-2 flex-shrink-0', !notification.read ? 'bg-blue-500' : 'bg-transparent'), "aria-hidden": "true" }), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("h3", { className: cn('text-sm font-medium text-gray-900 mb-1', !notification.read && 'font-semibold'), children: notification.title }), jsx("p", { className: "text-sm text-gray-600 line-clamp-2 mb-2", children: notification.preview }), jsxs("div", { className: "flex items-center gap-1 text-xs text-gray-500", children: [jsx(Clock, { className: "h-3 w-3", "aria-hidden": "true" }), jsx("time", { dateTime: notification.timestamp.toISOString(), children: formatTimestamp(notification.timestamp) })] })] })] }) }) }, notification.id))) }))] }), jsx("article", { className: "flex-1 min-h-0 overflow-y-auto bg-white p-6 hidden md:block", "aria-label": t('notificationsNotificationDisplay.notificationDetailsAriaLabel'), role: "region", "data-testid": "notification-details-panel", children: selectedNotification ? (jsxs("div", { className: "max-w-3xl mx-auto", "data-testid": "notification-details-content", children: [jsxs("header", { className: "mb-6", children: [jsx("h2", { className: "text-2xl font-semibold text-gray-900 mb-2", id: "selected-notification-title", "data-testid": "notification-details-title", children: selectedNotification.title }), jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [jsx(Clock, { className: "h-4 w-4", "aria-hidden": "true" }), jsx("time", { dateTime: selectedNotification.timestamp.toISOString(), "data-testid": "notification-details-timestamp", children: format$1(selectedNotification.timestamp, "MMMM d, yyyy 'at' h:mm a") })] })] }), jsx("div", { className: "prose prose-sm max-w-none text-gray-700", dangerouslySetInnerHTML: { __html: sanitizeHtml(selectedNotification.body) }, "aria-labelledby": "selected-notification-title", "data-testid": "notification-details-body" })] })) : (jsx("div", { className: "flex items-center justify-center h-full text-gray-500", role: "status", "data-testid": "notification-details-empty", children: t('notificationsNotificationDisplay.selectNotificationPrompt') })) })] }), jsx(TabsContent, { value: "alerts", className: "flex-1 min-h-0 flex m-0 bg-white justify-center items-center data-[state=inactive]:hidden", "data-testid": "alerts-tab-content", children: jsx(AlertsTab, { platformKey: org }) })] }), jsx(SendNotificationDialog, { open: isSendDialogOpen, onOpenChange: setIsSendDialogOpen, tenant: org, hasManageUsersPermission: hasManageUsersPermission, onNotificationSent: async () => {
+                                                    'bg-blue-50 hover:bg-blue-50', !notification.read && 'bg-blue-50/30'), "aria-pressed": (selectedNotification === null || selectedNotification === void 0 ? void 0 : selectedNotification.id) === notification.id, "aria-label": `${notification.read ? '' : t('notificationsNotificationDisplay.unreadPrefix')}${notification.title}, ${formatTimestamp(notification.timestamp)}`, "data-testid": `notification-button-${notification.id}`, "data-read": notification.read, children: jsxs("div", { className: "flex items-start gap-3", children: [jsx("div", { className: cn('w-2 h-2 rounded-full mt-2 flex-shrink-0', !notification.read ? 'bg-blue-500' : 'bg-transparent'), "aria-hidden": "true" }), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("h3", { className: cn('text-sm font-medium text-gray-900 mb-1 break-words', !notification.read && 'font-semibold'), children: notification.title }), jsx("p", { className: "text-sm text-gray-600 line-clamp-2 mb-2 break-words", children: notification.preview }), jsxs("div", { className: "flex items-center gap-1 text-xs text-gray-500", children: [jsx(Clock, { className: "h-3 w-3", "aria-hidden": "true" }), jsx("time", { dateTime: notification.timestamp.toISOString(), children: formatTimestamp(notification.timestamp) })] })] })] }) }) }, notification.id))) }))] }), jsx("article", { className: "flex-1 min-w-0 min-h-0 overflow-y-auto bg-white p-6 hidden md:block", "aria-label": t('notificationsNotificationDisplay.notificationDetailsAriaLabel'), role: "region", "data-testid": "notification-details-panel", children: selectedNotification ? (jsxs("div", { className: "max-w-3xl mx-auto", "data-testid": "notification-details-content", children: [jsxs("header", { className: "mb-6", children: [jsx("h2", { className: "text-2xl font-semibold text-gray-900 mb-2 break-words", id: "selected-notification-title", "data-testid": "notification-details-title", children: selectedNotification.title }), jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [jsx(Clock, { className: "h-4 w-4", "aria-hidden": "true" }), jsx("time", { dateTime: selectedNotification.timestamp.toISOString(), "data-testid": "notification-details-timestamp", children: format$1(selectedNotification.timestamp, "MMMM d, yyyy 'at' h:mm a") })] })] }), jsx("div", { className: notificationBodyClasses, dangerouslySetInnerHTML: { __html: sanitizeHtml(selectedNotification.body) }, "aria-labelledby": "selected-notification-title", "data-testid": "notification-details-body" })] })) : (jsx("div", { className: "flex items-center justify-center h-full text-gray-500", role: "status", "data-testid": "notification-details-empty", children: t('notificationsNotificationDisplay.selectNotificationPrompt') })) })] }), jsx(TabsContent, { value: "alerts", className: "flex-1 min-h-0 flex m-0 bg-white justify-center items-center data-[state=inactive]:hidden", "data-testid": "alerts-tab-content", children: jsx(AlertsTab, { platformKey: org }) })] }), jsx(SendNotificationDialog, { open: isSendDialogOpen, onOpenChange: setIsSendDialogOpen, tenant: org, hasManageUsersPermission: hasManageUsersPermission, onNotificationSent: async () => {
                     // Fetch updated notifications
                     try {
                         // Note: userId is required by the API but missing from @iblai/iblai-api type definitions
@@ -190552,7 +190557,7 @@ function NotificationDisplay({ org, userId, isAdmin = false, selectedNotificatio
                     catch (error) {
                         console.error('Error fetching notifications:', error);
                     }
-                } }), jsx(Dialog, { open: isMobileModalOpen, onOpenChange: setIsMobileModalOpen, children: jsx(DialogContent, { className: "max-h-[85vh] overflow-y-auto max-w-[95vw]", children: selectedNotification && (jsxs(Fragment$1, { children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { className: "text-xl font-semibold text-gray-900 pr-6", children: selectedNotification.title }), jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500 pt-2", children: [jsx(Clock, { className: "h-4 w-4", "aria-hidden": "true" }), jsx("time", { dateTime: selectedNotification.timestamp.toISOString(), children: format$1(selectedNotification.timestamp, "MMMM d, yyyy 'at' h:mm a") })] })] }), jsx("div", { className: "prose prose-sm max-w-none text-gray-700 mt-4", dangerouslySetInnerHTML: { __html: sanitizeHtml(selectedNotification.body) }, "aria-labelledby": "mobile-notification-title" })] })) }) })] }));
+                } }), jsx(Dialog, { open: isMobileModalOpen, onOpenChange: setIsMobileModalOpen, children: jsx(DialogContent, { className: "max-h-[85vh] overflow-y-auto max-w-[95vw]", children: selectedNotification && (jsxs(Fragment$1, { children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { className: "text-xl font-semibold text-gray-900 pr-6 break-words", children: selectedNotification.title }), jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500 pt-2", children: [jsx(Clock, { className: "h-4 w-4", "aria-hidden": "true" }), jsx("time", { dateTime: selectedNotification.timestamp.toISOString(), children: format$1(selectedNotification.timestamp, "MMMM d, yyyy 'at' h:mm a") })] })] }), jsx("div", { className: cn(notificationBodyClasses, 'mt-4'), dangerouslySetInnerHTML: { __html: sanitizeHtml(selectedNotification.body) }, "aria-labelledby": "mobile-notification-title", "data-testid": "notification-details-body-mobile" })] })) }) })] }));
 }
 
 /**

package/dist/web-containers/source/next/index.esm.js

@@ -220700,6 +220700,12 @@ AlertDialogAction.displayName = Action.displayName;
 const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (jsx(Cancel, { ref: ref, className: cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className), ...props })));
 AlertDialogCancel.displayName = Cancel.displayName;
 
+// Notification bodies are arbitrary (often email) HTML: long unbroken URLs and
+// fixed-width tables would otherwise bleed out of the panel. Break long words,
+// cap every descendant at the container width, and let anything that still
+// cannot shrink scroll inside the body instead of stretching the layout.
+cn('prose prose-sm max-w-none text-gray-700', 'overflow-x-auto break-words [overflow-wrap:anywhere]', '[&_*]:max-w-full', '[&_a]:break-all', '[&_img]:h-auto', '[&_pre]:overflow-x-auto [&_pre]:whitespace-pre-wrap', '[&_code]:whitespace-pre-wrap');
+
 const THEMES = { light: '', dark: '.dark' };
 const ChartContext = React.createContext(null);
 function useChart() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iblai/iblai-js",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "Unified JavaScript SDK for IBL.ai — re-exports data-layer, web-containers, and web-utils under a single package",
   "type": "module",
   "engines": {
@@ -78,7 +78,7 @@
     "winston": "3.19.0",
     "@iblai/data-layer": "1.12.7",
     "@iblai/mcp": "1.10.0",
-    "@iblai/web-containers": "1.18.0",
+    "@iblai/web-containers": "1.18.1",
     "@iblai/web-utils": "2.1.16"
   },
   "peerDependencies": {