@iblai/iblai-js 1.0.16 → 1.0.17

package/README.md

@@ -63,6 +63,58 @@ Add this to your `package.json` scripts:
 
 No special configuration required. Install and import directly.
 
+## Styling Setup (Tailwind CSS)
+
+The SDK's React components use Tailwind CSS utility classes. To ensure these classes are included in your app's CSS output, you need two things in your global CSS file:
+
+1. **Import the SDK's base styles** (CSS variables for the IBL design system)
+2. **Add a `@source` directive** so your Tailwind instance scans the SDK's compiled components for class names
+
+### Tailwind CSS v4 (recommended)
+
+In your global CSS file (e.g., `app/globals.css`):
+
+```css
+@import 'tailwindcss';
+
+/* SDK: custom base styles (CSS variables, no Tailwind utilities) */
+@import '@iblai/iblai-js/web-containers/styles';
+
+/* SDK: scan compiled components so Tailwind generates their utility classes */
+@source "../node_modules/@iblai/iblai-js/dist/web-containers/source";
+```
+
+The `@source` directive tells your Tailwind instance to scan the SDK's compiled JavaScript for class names like `lg:grid-cols-2`, `md:flex`, `hidden`, etc. Without this, responsive and utility classes used only in SDK components won't be generated.
+
+### Tailwind CSS v3
+
+In your `tailwind.config.js`, add the SDK's compiled output to the `content` array:
+
+```js
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@iblai/iblai-js/dist/web-containers/source/**/*.js',
+  ],
+};
+```
+
+Then import the base styles in your CSS:
+
+```css
+@import '@iblai/iblai-js/web-containers/styles';
+```
+
+### Why this is needed
+
+The SDK does **not** ship pre-built Tailwind utility CSS. Instead, it ships:
+
+- **Base styles** (`styles.css`) — CSS variables and custom component classes that don't depend on Tailwind
+- **Compiled component source** (`source/index.esm.js`) — the bundled JavaScript containing all Tailwind class name strings
+
+Your app's single Tailwind instance scans both your own code and the SDK's compiled source, then generates one unified set of utility classes. This avoids CSS cascade conflicts that would occur if two separate Tailwind builds produced overlapping `@layer utilities` blocks.
+
 ## Quick Start
 
 ### 1. Initialize the data layer

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iblai/iblai-js",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Unified JavaScript SDK for IBL.ai — re-exports data-layer, web-containers, and web-utils under a single package",
   "type": "module",
   "engines": {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { useRef, useEffect, useState, useCallback, useLayoutEffect, forwardRef, createElement as createElement$1, useMemo, createContext, useReducer, useImperativeHandle, useContext, useDebugValue, isValidElement, Children, PureComponent, cloneElement, Component } from 'react';
 import { LOCAL_STORAGE_KEYS, TimeTracker, getInitials, useTenantMetadata, isAlphaNumeric32, checkRbacPermission, getTimeAgo, formatRelativeTime as formatRelativeTime$2, ANONYMOUS_USERNAME, combineCSVData, redirectToAuthSpaJoinTenant, redirectToAuthSpa, getAuthSpaJoinUrl } from '@iblai/web-utils';
-import { useTimeTrackingMutation, useGetUserMetadataQuery, useGetUserMetadataEdxQuery, useUpdateUserMetadataMutation, useUpdateUserMetadataEdxMutation, useUploadProfileImageMutation, useResetPasswordMutation, useCreateUserInstitutionMutation, useGetUserInstitutionsQuery, useCreateUserEducationMutation, useUpdateUserEducationMutation, useDeleteUserEducationMutation, useGetUserEducationQuery, useCreateUserCompanyMutation, useGetUserCompaniesQuery, useCreateUserExperienceMutation, useUpdateUserExperienceMutation, useDeleteUserExperienceMutation, useGetUserExperienceQuery, useGetUserResumeQuery, useCreateUserResumeMutation, useInviteUserMutation, usePlatformInvitationsQuery, useCreateCatalogInvitationCourseBulkMutation, useGetCatalogInvitationsCourseQuery, useLazyPlatformUsersQuery, useLazyPlatformUserGroupsQuery, useGetPersonnalizedSearchQuery, useCreateCatalogInvitationProgramBulkMutation, useGetCatalogInvitationsProgramQuery, useGetNotificationsCountQuery, useLazyGetNotificationsQuery, useMarkAllAsReadMutation, useCreateNotificationPreviewMutation, useSendNotificationMutation, useGetMentorsQuery, useGetRbacPoliciesQuery, usePlatformUsersQuery, usePlatformUserGroupsQuery, useUpdateTemplateMutation, useGetTemplateDetailsQuery, useGetTemplatesQuery, useLazyGetTemplateDetailsQuery, useToggleTemplateMutation, useGetTopicsStatsQuery, useGetUsersStatsQuery, useGetSessionStatsQuery, useGetTopicsDetailsStatsQuery, useGetAccessTimeHeatmapQuery, useGetUserDetailsStatsQuery, useGetTranscriptsConversationHeadlineQuery, useGetAverageRatingQuery, useGetFinancialStatsQuery, useGetDetailedFinancialStatsQuery, useGetTranscriptsMessagesDetailsQuery, useGetTranscriptsMessagesQuery, useGetReportsQuery, useGetReportDetailQuery, useCreateReportMutation, useGetMentorPublicSettingsQuery, useGetContentAnalyticsQuery, useGetContentAnalyticsDetailsQuery } from '@iblai/data-layer';
+import { useTimeTrackingMutation, useGetUserMetadataQuery, useGetUserMetadataEdxQuery, useUpdateUserMetadataMutation, useUpdateUserMetadataEdxMutation, useUploadProfileImageMutation, useResetPasswordMutation, useCreateUserInstitutionMutation, useGetUserInstitutionsQuery, useCreateUserEducationMutation, useUpdateUserEducationMutation, useDeleteUserEducationMutation, useGetUserEducationQuery, useCreateUserCompanyMutation, useGetUserCompaniesQuery, useCreateUserExperienceMutation, useUpdateUserExperienceMutation, useDeleteUserExperienceMutation, useGetUserExperienceQuery, useGetUserResumeQuery, useCreateUserResumeMutation, useInviteUserMutation, usePlatformInvitationsQuery, useCreateCatalogInvitationCourseBulkMutation, useGetCatalogInvitationsCourseQuery, useLazyPlatformUsersQuery, useLazyPlatformUserGroupsQuery, useGetPersonnalizedSearchQuery, useCreateCatalogInvitationProgramBulkMutation, useGetCatalogInvitationsProgramQuery, useGetNotificationsCountQuery, useLazyGetNotificationsQuery, useMarkAllAsReadMutation, useCreateNotificationPreviewMutation, useSendNotificationMutation, useGetMentorsQuery, useGetRbacPoliciesQuery, usePlatformUsersQuery, usePlatformUserGroupsQuery, useUpdateTemplateMutation, useGetTemplateDetailsQuery, useGetTemplatesQuery, useLazyGetTemplateDetailsQuery, useToggleTemplateMutation, useGetTopicsStatsQuery, useGetUsersStatsQuery, useGetSessionStatsQuery, useGetTopicsDetailsStatsQuery, useGetAccessTimeHeatmapQuery, useGetUserDetailsStatsQuery, useGetTranscriptsConversationHeadlineQuery, useGetAverageRatingQuery, useGetFinancialStatsQuery, useGetDetailedFinancialStatsQuery, useGetTranscriptsMessagesDetailsQuery, useGetTranscriptsMessagesQuery, useGetReportsQuery, useGetReportDetailQuery, useCreateReportMutation, useLazyGetDownloadReportFromURLQuery, useGetMentorPublicSettingsQuery, useGetContentAnalyticsQuery, useGetContentAnalyticsDetailsQuery } from '@iblai/data-layer';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import { jsx, Fragment as Fragment$1, jsxs } from 'react/jsx-runtime';
@@ -150156,7 +150156,7 @@ const defaultTabs = [
     },
 ];
 const className = 'inline-flex items-center justify-center whitespace-nowrap rounded-[5px] px-2 sm:px-2.5 pt-1 pb-0.5 sm:text-sm text-gray-500 ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-blue-600 data-[state=active]:font-semibold text-sm font-medium data-[state=active]:bg-[#f5f7fb] data-[state=active]:shadow-none cursor-pointer';
-function AnalyticsLayout({ children, currentPath, basePath, onTabChange, tabs = defaultTabs, activeTabClassName = '', beforeDataReports, }) {
+function AnalyticsLayout({ children, currentPath, basePath, onTabChange, tabs = defaultTabs, activeTabClassName = '', beforeDataReports, excludeTabs = [], }) {
     useEffect(() => {
         const mainContentContainer = document.getElementById('main-content-container');
         if (mainContentContainer) {
@@ -150189,7 +150189,9 @@ function AnalyticsLayout({ children, currentPath, basePath, onTabChange, tabs =
     const handleTabClick = (tabValue) => {
         onTabChange(tabValue);
     };
-    return (jsxs("div", { className: "flex flex-col flex-1 min-h-0 h-full overflow-hidden overscroll-none bg-[#f5f7fb]", children: [jsx("div", { className: "p-6 pb-0", children: jsx("div", { className: "flex items-center justify-between mb-6", children: jsxs("div", { className: "flex items-center justify-between w-full overflow-x-auto", children: [jsx(Tabs, { className: "mb-6 bg-[#f5f7fb]", value: getTabValue(currentPath), children: jsx(TabsList, { className: "bg-[#f5f7fb]", children: tabs.map((tab) => {
+    return (jsxs("div", { className: "flex flex-col flex-1 min-h-0 h-full overflow-hidden overscroll-none bg-[#f5f7fb]", children: [jsx("div", { className: "p-6 pb-0", children: jsx("div", { className: "flex items-center justify-between mb-6", children: jsxs("div", { className: "flex items-center justify-between w-full overflow-x-auto", children: [jsx(Tabs, { className: "mb-6 bg-[#f5f7fb]", value: getTabValue(currentPath), children: jsx(TabsList, { className: "bg-[#f5f7fb]", children: tabs
+                                        .filter((tab) => !excludeTabs.includes(tab.value))
+                                        .map((tab) => {
                                         const isActive = getTabValue(currentPath) === tab.value;
                                         return (jsx(TabsTrigger, { value: tab.value, className: cn(className, isActive && activeTabClassName), onClick: () => handleTabClick(tab.value), children: tab.label }, tab.value));
                                     }) }) }), jsxs("div", { className: "flex items-center gap-4", children: [beforeDataReports, jsx(Tabs, { className: "mb-6 bg-[#f5f7fb]", value: getTabValue(currentPath), children: jsx(TabsList, { className: "bg-[#f5f7fb]", children: jsx(TabsTrigger, { value: "reports", className: cn(className, getTabValue(currentPath) === 'reports' && activeTabClassName), onClick: () => handleTabClick('reports'), children: "Data Reports" }) }) })] })] }) }) }), jsx("div", { className: "flex-1 overflow-auto overscroll-contain scrollbar-none px-6 pb-6 pt-0", children: children })] }));
@@ -185631,6 +185633,26 @@ const useReports = ({ tenantKey, selectedMentorId, usergroupIds, }) => {
         refetchOnMountOrArgChange: false,
     });
     const [createReport, { isLoading: isCreating }] = useCreateReportMutation();
+    const [fetchReportBlob] = useLazyGetDownloadReportFromURLQuery();
+    const downloadReportFromUrl = useCallback(async (url) => {
+        try {
+            const result = await fetchReportBlob({ url }).unwrap();
+            const blob = result instanceof Blob ? result : new Blob([result]);
+            const blobUrl = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = blobUrl;
+            link.download = 'report.csv';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            URL.revokeObjectURL(blobUrl);
+            return true;
+        }
+        catch (error) {
+            console.error('Failed to download report:', error);
+            return false;
+        }
+    }, [fetchReportBlob]);
     const clearPollingTimeout = useCallback(() => {
         if (pollTimeoutRef.current) {
             clearTimeout(pollTimeoutRef.current);
@@ -185699,14 +185721,13 @@ const useReports = ({ tenantKey, selectedMentorId, usergroupIds, }) => {
                     onCompletionRef.current(url);
                 }
                 if (autoDownloadRef.current) {
-                    const link = document.createElement('a');
-                    link.href = url;
-                    link.target = '_blank';
-                    link.rel = 'noopener noreferrer';
-                    document.body.appendChild(link);
-                    link.click();
-                    document.body.removeChild(link);
-                    toast.success('Report downloaded successfully');
+                    const success = await downloadReportFromUrl(url);
+                    if (success) {
+                        toast.success('Report downloaded successfully');
+                    }
+                    else {
+                        toast.error('Failed to download report');
+                    }
                 }
                 shouldContinue = false;
                 stopPolling();
@@ -185748,7 +185769,15 @@ const useReports = ({ tenantKey, selectedMentorId, usergroupIds, }) => {
                 void ((_a = pollReportStatusRef.current) === null || _a === void 0 ? void 0 : _a.call(pollReportStatusRef));
             }, nextInterval);
         }
-    }, [activeReportName, clearPollingTimeout, fetchReportDetail, pollArgs, refetch, stopPolling]);
+    }, [
+        activeReportName,
+        clearPollingTimeout,
+        downloadReportFromUrl,
+        fetchReportDetail,
+        pollArgs,
+        refetch,
+        stopPolling,
+    ]);
     useEffect(() => {
         pollReportStatusRef.current = pollReportStatus;
     }, [pollReportStatus]);
@@ -185805,14 +185834,13 @@ const useReports = ({ tenantKey, selectedMentorId, usergroupIds, }) => {
                     onCompletion(url);
                 }
                 if (autoDownload) {
-                    const link = document.createElement('a');
-                    link.href = url;
-                    link.target = '_blank';
-                    link.rel = 'noopener noreferrer';
-                    document.body.appendChild(link);
-                    link.click();
-                    document.body.removeChild(link);
-                    toast.success('Report downloaded successfully');
+                    const success = await downloadReportFromUrl(url);
+                    if (success) {
+                        toast.success('Report downloaded successfully');
+                    }
+                    else {
+                        toast.error('Failed to download report');
+                    }
                 }
                 stopPolling();
                 refetch();
@@ -185834,6 +185862,7 @@ const useReports = ({ tenantKey, selectedMentorId, usergroupIds, }) => {
     }, [
         activeReportName,
         createReport,
+        downloadReportFromUrl,
         selectedMentorId,
         usergroupIds,
         isGenerating,
@@ -185880,6 +185909,30 @@ function AnalyticsReports({ tenantKey, selectedMentorId, disabledReports = [], u
         selectedMentorId,
         usergroupIds,
     });
+    const [fetchReportBlob] = useLazyGetDownloadReportFromURLQuery();
+    const fetchAuthenticatedContent = useCallback(async (url) => {
+        const result = await fetchReportBlob({ url }).unwrap();
+        const blob = result instanceof Blob ? result : new Blob([result]);
+        return blob.text();
+    }, [fetchReportBlob]);
+    const downloadAuthenticatedReport = useCallback(async (url, filename = 'report.csv') => {
+        try {
+            const result = await fetchReportBlob({ url }).unwrap();
+            const blob = result instanceof Blob ? result : new Blob([result]);
+            const blobUrl = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = blobUrl;
+            link.download = filename;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            URL.revokeObjectURL(blobUrl);
+        }
+        catch (error) {
+            console.error('Failed to download report:', error);
+            throw error;
+        }
+    }, [fetchReportBlob]);
     const [csvEditorData, setCsvEditorData] = useState({
         isOpen: false,
         headers: [],
@@ -185926,11 +185979,7 @@ function AnalyticsReports({ tenantKey, selectedMentorId, disabledReports = [], u
     const handleReportCompletion = useCallback(async (url) => {
         const TIMEOUT_MS = 30000;
         const fetchAndParse = async () => {
-            const response = await fetch(url);
-            if (!response.ok) {
-                throw new Error('Failed to fetch report');
-            }
-            const csvText = await response.text();
+            const csvText = await fetchAuthenticatedContent(url);
             return parseCSV(csvText);
         };
         const timeoutPromise = new Promise((_, reject) => {
@@ -185950,16 +185999,16 @@ function AnalyticsReports({ tenantKey, selectedMentorId, disabledReports = [], u
         catch (error) {
             console.error('Failed to load CSV for editing:', error);
             toast.error('Failed to load report for editing. Opening download instead.');
-            // Fallback to direct download
-            const link = document.createElement('a');
-            link.href = url;
-            link.target = '_blank';
-            link.rel = 'noopener noreferrer';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
+            // Fallback to authenticated download
+            try {
+                await downloadAuthenticatedReport(url);
+            }
+            catch (downloadError) {
+                console.error('Failed to download report:', downloadError);
+                toast.error('Failed to download report');
+            }
         }
-    }, [parseCSV]);
+    }, [parseCSV, fetchAuthenticatedContent, downloadAuthenticatedReport]);
     const handleCsvEditorSave = useCallback((data) => {
         // Convert data back to CSV and trigger download
         const csvContent = [
@@ -185989,15 +186038,15 @@ function AnalyticsReports({ tenantKey, selectedMentorId, disabledReports = [], u
     const handleCsvEditorCancel = useCallback(() => {
         setCsvEditorData({ isOpen: false, headers: [], rows: [], reportUrl: null });
     }, []);
-    const handleAutoDownload = useCallback((url) => {
-        const link = document.createElement('a');
-        link.href = url;
-        link.target = '_blank';
-        link.rel = 'noopener noreferrer';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-    }, []);
+    const handleAutoDownload = useCallback(async (url) => {
+        try {
+            await downloadAuthenticatedReport(url);
+        }
+        catch (error) {
+            console.error('Failed to auto-download report:', error);
+            toast.error('Failed to download report');
+        }
+    }, [downloadAuthenticatedReport]);
     // Check if a report is one of the recommendation reports to combine
     const isRecommendationReport = useCallback((reportDisplayName) => {
         return combinedRecommendationReports.some((name) => reportDisplayName.toLowerCase() === name.toLowerCase());
@@ -186050,12 +186099,13 @@ function AnalyticsReports({ tenantKey, selectedMentorId, disabledReports = [], u
                 if (cancelCombiningRef.current) {
                     throw new Error('Cancelled');
                 }
-                const response = await fetch(url);
-                if (!response.ok) {
+                try {
+                    const csvText = await fetchAuthenticatedContent(url);
+                    csvDataArray.push(parseCSV(csvText));
+                }
+                catch (error) {
                     throw new Error(`Failed to fetch ${name}`);
                 }
-                const csvText = await response.text();
-                csvDataArray.push(parseCSV(csvText));
             }
             // Check for cancellation before combining
             if (cancelCombiningRef.current) {
@@ -186090,6 +186140,7 @@ function AnalyticsReports({ tenantKey, selectedMentorId, disabledReports = [], u
         isRecommendationReport,
         initializeReportDownload,
         parseCSV,
+        fetchAuthenticatedContent,
     ]);
     const handleReportClick = useCallback((report) => {
         var _a, _b;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iblai/iblai-js",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Unified JavaScript SDK for IBL.ai — re-exports data-layer, web-containers, and web-utils under a single package",
   "type": "module",
   "engines": {
@@ -49,8 +49,8 @@
   "author": "iblai",
   "license": "ISC",
   "dependencies": {
-    "@iblai/data-layer": "1.1.7",
-    "@iblai/web-containers": "1.1.14",
+    "@iblai/data-layer": "1.1.8",
+    "@iblai/web-containers": "1.1.15",
     "@iblai/web-utils": "1.1.9"
   },
   "peerDependencies": {