@iblai/iblai-js 1.27.1 → 2.2.1

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

@@ -61547,6 +61547,7 @@ var datasetsTabLabels$3 = {
 		title: "Datasets",
 		description: "Manage training datasets and knowledge sources."
 	},
+	infoBox: "Teach your agent with your own material. Upload documents, files, or links and it'll answer from them — grounded in your content instead of guessing.",
 	search: {
 		placeholder: "Search datasets..."
 	},
@@ -67246,6 +67247,7 @@ var datasetsTabLabels$2 = {
 		title: "Jeux de données",
 		description: "Gérez les jeux de données d'entraînement et les sources de connaissances."
 	},
+	infoBox: "Formez votre agent avec vos propres contenus. Importez des documents, des fichiers ou des liens, et il y puisera ses réponses — en s'appuyant sur votre contenu plutôt qu'en devinant.",
 	search: {
 		placeholder: "Rechercher des jeux de données..."
 	},
@@ -72945,6 +72947,7 @@ var datasetsTabLabels$1 = {
 		title: "Conjuntos de datos",
 		description: "Administre los conjuntos de datos de entrenamiento y las fuentes de conocimiento."
 	},
+	infoBox: "Enseña a tu agente con tu propio material. Sube documentos, archivos o enlaces y responderá a partir de ellos, basándose en tu contenido en lugar de adivinar.",
 	search: {
 		placeholder: "Buscar conjuntos de datos..."
 	},
@@ -78644,6 +78647,7 @@ var datasetsTabLabels = {
 		title: "数据集",
 		description: "管理训练数据集和知识来源。"
 	},
+	infoBox: "用您自己的资料训练智能体。上传文档、文件或链接，它就会依据这些内容作答——基于您的内容，而不是凭空猜测。",
 	search: {
 		placeholder: "搜索数据集..."
 	},
@@ -225219,23 +225223,36 @@ function useAgentSettings() {
     return ctx;
 }
 
-function useDatasetsWithPagination(itemsPerPage = 5) {
+function useDatasetsWithPagination(itemsPerPage = 5, opts = {}) {
+    const { page: controlledPage, search: controlledSearch, onPageChange, onSearchChange } = opts;
+    // Controlled/uncontrolled is decided per axis, independently.
+    const isPageControlled = controlledPage !== undefined;
+    const isSearchControlled = controlledSearch !== undefined;
     const { tenantKey, mentorId, username } = useAgentSettings();
-    const [searchQuery, setSearchQuery] = React__default.useState('');
+    // Input echo — keeps typing responsive in both modes and is the source of
+    // truth for the search term when uncontrolled. Seeded from the controlled
+    // value so a URL-driven search shows up immediately on mount.
+    const [searchQuery, setSearchQuery] = React__default.useState(isSearchControlled ? controlledSearch : '');
     const [debouncedSearchQuery] = a(searchQuery, 500);
-    const [currentPage, setCurrentPage] = React__default.useState(1);
+    const [localPage, setLocalPage] = React__default.useState(1);
     const [isTraining, setIsTraining] = React__default.useState(false);
-    const [queryParams, setQueryParams] = React__default.useState({
-        limit: itemsPerPage,
-        offset: 0,
-        query: debouncedSearchQuery,
-    });
+    const currentPage = isPageControlled ? controlledPage : localPage;
+    // Reset to the first page during render (not in an effect) when the debounced
+    // search changes, so the query never fires with a stale offset. Only touches
+    // internal page state — in page-controlled mode the host performs the reset
+    // via the onSearchChange contract above.
+    const [lastSearchQuery, setLastSearchQuery] = React__default.useState(debouncedSearchQuery);
+    if (lastSearchQuery !== debouncedSearchQuery) {
+        setLastSearchQuery(debouncedSearchQuery);
+        if (!isPageControlled)
+            setLocalPage(1);
+    }
     const { data: datasets, isLoading: isDatasetsLoading, isFetching: isDatasetsFetching, } = useGetTrainingDocumentsQuery({
         org: tenantKey,
         pathway: mentorId,
-        limit: queryParams.limit,
-        offset: queryParams.offset,
-        search: queryParams.query,
+        limit: itemsPerPage,
+        offset: (currentPage - 1) * itemsPerPage,
+        search: debouncedSearchQuery,
         // @ts-expect-error userId is not in the typed args but the API accepts it
         userId: username !== null && username !== void 0 ? username : '',
     }, {
@@ -225256,24 +225273,31 @@ function useDatasetsWithPagination(itemsPerPage = 5) {
             setIsTraining(_isTraining);
         }
     }, [isDatasetsFetching]);
-    // Effect to update offset when page changes
+    // Report the debounced search back to the host (search-controlled only).
+    // Firing this implies a page reset — see the onSearchChange contract above.
     React__default.useEffect(() => {
-        setQueryParams((prev) => ({
-            ...prev,
-            offset: (currentPage - 1) * itemsPerPage,
-        }));
-    }, [currentPage, itemsPerPage]);
-    // Effect to update query parameter when search changes
+        if (!isSearchControlled)
+            return;
+        if (debouncedSearchQuery === controlledSearch)
+            return;
+        onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(debouncedSearchQuery);
+    }, [debouncedSearchQuery, isSearchControlled]);
+    // Reconcile the input echo when the controlled search changes externally
+    // (back/forward, reload, shared link) without clobbering in-flight typing.
     React__default.useEffect(() => {
-        setQueryParams((prev) => ({
-            ...prev,
-            query: debouncedSearchQuery,
-            offset: 0, // Reset to first page when search changes
-        }));
-        setCurrentPage(1); // Also reset current page state
-    }, [debouncedSearchQuery]);
+        if (!isSearchControlled)
+            return;
+        if (controlledSearch === debouncedSearchQuery)
+            return;
+        setSearchQuery(controlledSearch);
+    }, [controlledSearch, isSearchControlled]);
     const handlePageChange = (newPage) => {
-        setCurrentPage(newPage);
+        if (isPageControlled) {
+            onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(newPage);
+        }
+        else {
+            setLocalPage(newPage);
+        }
         // Scroll to top of the list when changing pages
         window.scrollTo({ top: 0, behavior: 'smooth' });
     };
@@ -227128,6 +227152,9 @@ var addMentorToProjectModal = /*#__PURE__*/Object.freeze({
     AddMentorToProjectModal: AddMentorToProjectModal
 });
 
+const CustomSwitch = React.forwardRef(({ className, checked, onCheckedChange, ...props }, ref) => (jsx(Root$a, { checked: checked, onCheckedChange: onCheckedChange, className: cn('peer focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-500 data-[state=unchecked]:bg-gray-200', className), ...props, ref: ref, children: jsx(Thumb, { className: cn('pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0') }) })));
+CustomSwitch.displayName = Root$a.displayName;
+
 const DeleteDatasetModal$1 = dynamic(() => Promise.resolve().then(function () { return deleteDatasetModal; }).then((mod) => ({
     default: mod.DeleteDatasetModal,
 })));
@@ -227229,7 +227256,7 @@ function TrainingStatusSwitch({ is_trained, url, training_status, disabled, hand
     if (training_status === 'pending') {
         return (jsx(Badge, { variant: "outline", className: "bg-blue-50 text-blue-700", children: t('datasetsTabDatasetItem.inProgress') }));
     }
-    return (jsx(Switch, { checked: is_trained, onCheckedChange: () => {
+    return (jsx(CustomSwitch, { checked: is_trained, onCheckedChange: () => {
             // If trying to train an untrained dataset, show the modal
             if (!is_trained) {
                 onTrainRequest === null || onTrainRequest === void 0 ? void 0 : onTrainRequest();
@@ -227287,6 +227314,7 @@ const AGENT_DATASETS_TAB_LABELS = {
         title: 'Datasets',
         description: 'Manage training datasets and knowledge sources.',
     },
+    infoBox: "Teach your agent with your own material. Upload documents, files, or links and it'll answer from them — grounded in your content instead of guessing.",
     search: {
         placeholder: 'Search datasets...',
     },
@@ -227346,6 +227374,7 @@ function buildDatasetsTabLabels(t) {
             title: t('datasetsTabLabels.header.title'),
             description: t('datasetsTabLabels.header.description'),
         },
+        infoBox: t('datasetsTabLabels.infoBox'),
         search: {
             placeholder: t('datasetsTabLabels.search.placeholder'),
         },

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

@@ -98750,6 +98750,7 @@ var datasetsTabLabels$3 = {
 		title: "Datasets",
 		description: "Manage training datasets and knowledge sources."
 	},
+	infoBox: "Teach your agent with your own material. Upload documents, files, or links and it'll answer from them — grounded in your content instead of guessing.",
 	search: {
 		placeholder: "Search datasets..."
 	},
@@ -104449,6 +104450,7 @@ var datasetsTabLabels$2 = {
 		title: "Jeux de données",
 		description: "Gérez les jeux de données d'entraînement et les sources de connaissances."
 	},
+	infoBox: "Formez votre agent avec vos propres contenus. Importez des documents, des fichiers ou des liens, et il y puisera ses réponses — en s'appuyant sur votre contenu plutôt qu'en devinant.",
 	search: {
 		placeholder: "Rechercher des jeux de données..."
 	},
@@ -110148,6 +110150,7 @@ var datasetsTabLabels$1 = {
 		title: "Conjuntos de datos",
 		description: "Administre los conjuntos de datos de entrenamiento y las fuentes de conocimiento."
 	},
+	infoBox: "Enseña a tu agente con tu propio material. Sube documentos, archivos o enlaces y responderá a partir de ellos, basándose en tu contenido en lugar de adivinar.",
 	search: {
 		placeholder: "Buscar conjuntos de datos..."
 	},
@@ -115847,6 +115850,7 @@ var datasetsTabLabels = {
 		title: "数据集",
 		description: "管理训练数据集和知识来源。"
 	},
+	infoBox: "用您自己的资料训练智能体。上传文档、文件或链接，它就会依据这些内容作答——基于您的内容，而不是凭空猜测。",
 	search: {
 		placeholder: "搜索数据集..."
 	},
@@ -250000,23 +250004,36 @@ function useAgentSettings() {
     return ctx;
 }
 
-function useDatasetsWithPagination(itemsPerPage = 5) {
+function useDatasetsWithPagination(itemsPerPage = 5, opts = {}) {
+    const { page: controlledPage, search: controlledSearch, onPageChange, onSearchChange } = opts;
+    // Controlled/uncontrolled is decided per axis, independently.
+    const isPageControlled = controlledPage !== undefined;
+    const isSearchControlled = controlledSearch !== undefined;
     const { tenantKey, mentorId, username } = useAgentSettings();
-    const [searchQuery, setSearchQuery] = React__default.useState('');
+    // Input echo — keeps typing responsive in both modes and is the source of
+    // truth for the search term when uncontrolled. Seeded from the controlled
+    // value so a URL-driven search shows up immediately on mount.
+    const [searchQuery, setSearchQuery] = React__default.useState(isSearchControlled ? controlledSearch : '');
     const [debouncedSearchQuery] = a$3(searchQuery, 500);
-    const [currentPage, setCurrentPage] = React__default.useState(1);
+    const [localPage, setLocalPage] = React__default.useState(1);
     const [isTraining, setIsTraining] = React__default.useState(false);
-    const [queryParams, setQueryParams] = React__default.useState({
-        limit: itemsPerPage,
-        offset: 0,
-        query: debouncedSearchQuery,
-    });
+    const currentPage = isPageControlled ? controlledPage : localPage;
+    // Reset to the first page during render (not in an effect) when the debounced
+    // search changes, so the query never fires with a stale offset. Only touches
+    // internal page state — in page-controlled mode the host performs the reset
+    // via the onSearchChange contract above.
+    const [lastSearchQuery, setLastSearchQuery] = React__default.useState(debouncedSearchQuery);
+    if (lastSearchQuery !== debouncedSearchQuery) {
+        setLastSearchQuery(debouncedSearchQuery);
+        if (!isPageControlled)
+            setLocalPage(1);
+    }
     const { data: datasets, isLoading: isDatasetsLoading, isFetching: isDatasetsFetching, } = useGetTrainingDocumentsQuery({
         org: tenantKey,
         pathway: mentorId,
-        limit: queryParams.limit,
-        offset: queryParams.offset,
-        search: queryParams.query,
+        limit: itemsPerPage,
+        offset: (currentPage - 1) * itemsPerPage,
+        search: debouncedSearchQuery,
         // @ts-expect-error userId is not in the typed args but the API accepts it
         userId: username !== null && username !== void 0 ? username : '',
     }, {
@@ -250037,24 +250054,31 @@ function useDatasetsWithPagination(itemsPerPage = 5) {
             setIsTraining(_isTraining);
         }
     }, [isDatasetsFetching]);
-    // Effect to update offset when page changes
+    // Report the debounced search back to the host (search-controlled only).
+    // Firing this implies a page reset — see the onSearchChange contract above.
     React__default.useEffect(() => {
-        setQueryParams((prev) => ({
-            ...prev,
-            offset: (currentPage - 1) * itemsPerPage,
-        }));
-    }, [currentPage, itemsPerPage]);
-    // Effect to update query parameter when search changes
+        if (!isSearchControlled)
+            return;
+        if (debouncedSearchQuery === controlledSearch)
+            return;
+        onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(debouncedSearchQuery);
+    }, [debouncedSearchQuery, isSearchControlled]);
+    // Reconcile the input echo when the controlled search changes externally
+    // (back/forward, reload, shared link) without clobbering in-flight typing.
     React__default.useEffect(() => {
-        setQueryParams((prev) => ({
-            ...prev,
-            query: debouncedSearchQuery,
-            offset: 0, // Reset to first page when search changes
-        }));
-        setCurrentPage(1); // Also reset current page state
-    }, [debouncedSearchQuery]);
+        if (!isSearchControlled)
+            return;
+        if (controlledSearch === debouncedSearchQuery)
+            return;
+        setSearchQuery(controlledSearch);
+    }, [controlledSearch, isSearchControlled]);
     const handlePageChange = (newPage) => {
-        setCurrentPage(newPage);
+        if (isPageControlled) {
+            onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(newPage);
+        }
+        else {
+            setLocalPage(newPage);
+        }
         // Scroll to top of the list when changing pages
         window.scrollTo({ top: 0, behavior: 'smooth' });
     };
@@ -251957,6 +251981,9 @@ var addMentorToProjectModal = /*#__PURE__*/Object.freeze({
     AddMentorToProjectModal: AddMentorToProjectModal
 });
 
+const CustomSwitch = React.forwardRef(({ className, checked, onCheckedChange, ...props }, ref) => (jsx(Root$c, { checked: checked, onCheckedChange: onCheckedChange, className: cn('peer focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-500 data-[state=unchecked]:bg-gray-200', className), ...props, ref: ref, children: jsx(Thumb, { className: cn('pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0') }) })));
+CustomSwitch.displayName = Root$c.displayName;
+
 const DeleteDatasetModal$1 = dynamic(() => Promise.resolve().then(function () { return deleteDatasetModal; }).then((mod) => ({
     default: mod.DeleteDatasetModal,
 })));
@@ -252058,7 +252085,7 @@ function TrainingStatusSwitch({ is_trained, url, training_status, disabled, hand
     if (training_status === 'pending') {
         return (jsx(Badge, { variant: "outline", className: "bg-blue-50 text-blue-700", children: t('datasetsTabDatasetItem.inProgress') }));
     }
-    return (jsx(Switch, { checked: is_trained, onCheckedChange: () => {
+    return (jsx(CustomSwitch, { checked: is_trained, onCheckedChange: () => {
             // If trying to train an untrained dataset, show the modal
             if (!is_trained) {
                 onTrainRequest === null || onTrainRequest === void 0 ? void 0 : onTrainRequest();
@@ -252116,6 +252143,7 @@ const AGENT_DATASETS_TAB_LABELS = {
         title: 'Datasets',
         description: 'Manage training datasets and knowledge sources.',
     },
+    infoBox: "Teach your agent with your own material. Upload documents, files, or links and it'll answer from them — grounded in your content instead of guessing.",
     search: {
         placeholder: 'Search datasets...',
     },
@@ -252175,6 +252203,7 @@ function buildDatasetsTabLabels(t) {
             title: t('datasetsTabLabels.header.title'),
             description: t('datasetsTabLabels.header.description'),
         },
+        infoBox: t('datasetsTabLabels.infoBox'),
         search: {
             placeholder: t('datasetsTabLabels.search.placeholder'),
         },
@@ -260103,9 +260132,6 @@ function BasicSubTab({ form, labels, mentor, isDisabled, categories }) {
                                         }, className: "hidden" })] })] })) })) })] }));
 }
 
-const CustomSwitch = React.forwardRef(({ className, checked, onCheckedChange, ...props }, ref) => (jsx(Root$c, { checked: checked, onCheckedChange: onCheckedChange, className: cn('peer focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-500 data-[state=unchecked]:bg-gray-200', className), ...props, ref: ref, children: jsx(Thumb, { className: cn('pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0') }) })));
-CustomSwitch.displayName = Root$c.displayName;
-
 /**
  * A single label + info-tooltip + `CustomSwitch` row bound to a boolean field
  * of the settings form. Collapses the block that was copy-pasted for every
@@ -265347,15 +265373,29 @@ function AgentHumanSupportTab({ PaginationComponent = IblPagination, labels: lab
                                     : labels.list.untitled }) }), jsx("div", { className: "mx-auto w-full max-w-full overflow-x-hidden", children: selectedTicket && renderTicketDetail(selectedTicket) })] }) })] }));
 }
 
-function AgentDatasetsTab({ labels: labelsOverride, onSelect, selectedDatasetId, AddResourceModal, PaginationComponent, }) {
+function AgentDatasetsTab({ labels: labelsOverride, onSelect, selectedDatasetId, AddResourceModal, PaginationComponent, page, search, onPageChange, onSearchChange, }) {
     var _a;
-    const { executeGatedAction } = useAgentSettings();
+    const { tenantKey, mentorId, username, rbacPermissions, executeGatedAction } = useAgentSettings();
     const t = useT();
     const labels = React__default.useMemo(() => resolveDatasetsTabLabels(labelsOverride, t), [labelsOverride, t]);
     const [showAddResourceModal, setShowAddResourceModal] = React__default.useState(false);
     const openAddResourceModal = () => setShowAddResourceModal(true);
     const closeAddResourceModal = () => setShowAddResourceModal(false);
-    const { datasets, isDatasetsLoading, isDatasetsFetching, searchQuery, setSearchQuery, currentPage, totalPages, handlePageChange, } = useDatasetsWithPagination();
+    const { data: mentorSettings } = useGetMentorSettingsQuery({
+        mentor: mentorId,
+        org: tenantKey,
+        // @ts-ignore
+        userId: username !== null && username !== void 0 ? username : '',
+    }, {
+        skip: !mentorId || !tenantKey || !username,
+    });
+    // The RBAC path uses the mentor DB id returned by the settings query — the
+    // URL/modal mentor id is not the same value as the one RBAC permissions are
+    // keyed by. While mentor_id is undefined (still loading), the path will not
+    // match any entry and WithPermissions resolves hasPermission=false.
+    // @ts-ignore mentor_id exists on MentorSettings
+    const createResource = `/mentors/${mentorSettings === null || mentorSettings === void 0 ? void 0 : mentorSettings.mentor_id}/documents/#create`;
+    const { datasets, isDatasetsLoading, isDatasetsFetching, searchQuery, setSearchQuery, currentPage, totalPages, handlePageChange, } = useDatasetsWithPagination(5, { page, search, onPageChange, onSearchChange });
     const handleAddResourceClick = () => {
         if (executeGatedAction) {
             executeGatedAction(() => openAddResourceModal());
@@ -265364,14 +265404,22 @@ function AgentDatasetsTab({ labels: labelsOverride, onSelect, selectedDatasetId,
             openAddResourceModal();
         }
     };
-    return (jsxs(Fragment$1, { children: [jsx("div", { className: "flex h-[73px] flex-shrink-0 items-center border-b border-gray-200 bg-white p-4 lg:block", children: jsxs("div", { children: [jsx("h3", { className: "mb-1 text-base font-medium text-gray-900", children: labels.header.title }), jsx("p", { className: "text-xs text-gray-600", children: labels.header.description })] }) }), jsx("div", { className: "flex-1 space-y-4 p-3 lg:p-4", style: {
+    return (jsxs(Fragment$1, { children: [jsx("div", { className: "flex h-[73px] flex-shrink-0 items-center border-b border-gray-200 bg-white p-4 lg:block", children: jsxs("div", { children: [jsx("h3", { className: "mb-1 text-base font-medium text-gray-900", children: labels.header.title }), jsx("p", { className: "text-xs text-gray-600", children: labels.header.description })] }) }), jsxs("div", { className: "flex-1 space-y-4 p-3 lg:p-4", style: {
                     overflowY: 'auto',
                     overflowX: 'hidden',
-                }, children: jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center", children: [jsxs("div", { className: "relative w-full sm:w-64", children: [isDatasetsFetching ? (jsx(Spinner, { className: "absolute top-2.5 left-2.5 h-4 w-4 text-gray-500" })) : (jsx(Search, { className: "absolute top-2.5 left-2.5 h-4 w-4 text-gray-500" })), jsx(Input, { type: "search", placeholder: labels.search.placeholder, className: "pl-8", value: searchQuery, onChange: (event) => setSearchQuery(event.target.value) })] }), jsxs(Button$1, { onClick: handleAddResourceClick, size: "sm", className: "cursor-pointer bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white hover:opacity-90", children: [jsx(Plus, { className: "h-4 w-4" }), labels.addResource.button] })] }), jsx("div", { className: "overflow-hidden rounded-md border", children: jsx("div", { className: "overflow-x-auto sm:mx-0", children: jsx("div", { className: "inline-block min-w-full align-middle", children: isDatasetsLoading ? (jsx("div", { className: "flex w-full items-center justify-center py-10", children: jsx(Spinner, {}) })) : (jsxs(Table$1, { className: "min-w-full", children: [jsx(TableHeader$1, { children: jsxs(TableRow$1, { className: "bg-muted/50 border-b", children: [jsx(TableHead, { className: "p-3 text-left text-sm whitespace-nowrap text-[#646464]", children: labels.table.nameColumn }), jsx(TableHead, { className: "p-3 text-left text-sm whitespace-nowrap text-[#646464]", children: labels.table.typeColumn }), jsx(TableHead, { className: "p-3 text-left text-sm whitespace-nowrap text-[#646464]", children: labels.table.tokensColumn }), jsx(TableHead, { className: "p-3 text-left text-sm whitespace-nowrap text-[#646464]", children: labels.table.intervalColumn }), jsx(TableHead, { className: "p-3 text-left text-sm whitespace-nowrap text-[#646464]", children: labels.table.visibilityColumn }), jsx(TableHead, { className: "p-3 text-left text-sm whitespace-nowrap text-[#646464]", children: labels.table.statusColumn })] }) }), jsx(DatasetItemList
-                                            // @ts-ignore - Type mismatch between RetrieverDocumentEmbedding[] and Dataset[], id property type difference
+                }, children: [jsx("div", { className: "rounded-md border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600", "data-testid": "datasets-info-box", children: labels.infoBox }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center", children: [jsxs("div", { className: "relative w-full sm:w-64", children: [isDatasetsFetching ? (jsx(Spinner, { className: "absolute top-2.5 left-2.5 h-4 w-4 text-blue-500" })) : (jsx(Search, { className: "absolute top-2.5 left-2.5 h-4 w-4 text-gray-500" })), jsx(Input
+                                            // `type="text"` (not "search") so the browser renders no
+                                            // native clear (✕) button; the Search icon + placeholder
+                                            // convey the search affordance instead.
                                             , { 
+                                                // `type="text"` (not "search") so the browser renders no
+                                                // native clear (✕) button; the Search icon + placeholder
+                                                // convey the search affordance instead.
+                                                type: "text", placeholder: labels.search.placeholder, className: "pl-8", value: searchQuery, onChange: (event) => setSearchQuery(event.target.value) })] }), jsx(WithPermissions, { rbacResource: createResource, rbacPermissions: rbacPermissions !== null && rbacPermissions !== void 0 ? rbacPermissions : {}, children: ({ hasPermission }) => hasPermission ? (jsxs(Button$1, { onClick: handleAddResourceClick, size: "sm", className: "cursor-pointer bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white hover:opacity-90", children: [jsx(Plus, { className: "h-4 w-4" }), labels.addResource.button] })) : null })] }), jsx("div", { className: "overflow-hidden rounded-md border", children: jsx("div", { className: "overflow-x-auto sm:mx-0", children: jsx("div", { className: "inline-block min-w-full align-middle", children: isDatasetsLoading ? (jsx("div", { className: "flex w-full items-center justify-center py-10", children: jsx(Spinner, {}) })) : (jsxs(Table$1, { className: "min-w-full", children: [jsx(TableHeader$1, { children: jsxs(TableRow$1, { className: "bg-muted/50 border-b", children: [jsx(TableHead, { className: "p-3 text-left text-sm whitespace-nowrap text-[#646464]", children: labels.table.nameColumn }), jsx(TableHead, { className: "p-3 text-left text-sm whitespace-nowrap text-[#646464]", children: labels.table.typeColumn }), jsx(TableHead, { className: "p-3 text-left text-sm whitespace-nowrap text-[#646464]", children: labels.table.tokensColumn }), jsx(TableHead, { className: "p-3 text-left text-sm whitespace-nowrap text-[#646464]", children: labels.table.intervalColumn }), jsx(TableHead, { className: "p-3 text-left text-sm whitespace-nowrap text-[#646464]", children: labels.table.visibilityColumn }), jsx(TableHead, { className: "p-3 text-left text-sm whitespace-nowrap text-[#646464]", children: labels.table.statusColumn })] }) }), jsx(DatasetItemList
                                                 // @ts-ignore - Type mismatch between RetrieverDocumentEmbedding[] and Dataset[], id property type difference
-                                                datasets: (_a = datasets === null || datasets === void 0 ? void 0 : datasets.results) !== null && _a !== void 0 ? _a : [], onSelect: onSelect, selectedDatasetId: selectedDatasetId, labels: labels })] })) }) }) }), PaginationComponent && (jsx(PaginationComponent, { currentPage: currentPage, totalPages: totalPages, onPageChange: handlePageChange, disabled: isDatasetsFetching || isDatasetsLoading })), AddResourceModal && (jsx(AddResourceModal, { isOpen: showAddResourceModal, onClose: () => closeAddResourceModal(), keepParentOpen: true }))] }) })] }));
+                                                , { 
+                                                    // @ts-ignore - Type mismatch between RetrieverDocumentEmbedding[] and Dataset[], id property type difference
+                                                    datasets: (_a = datasets === null || datasets === void 0 ? void 0 : datasets.results) !== null && _a !== void 0 ? _a : [], onSelect: onSelect, selectedDatasetId: selectedDatasetId, labels: labels })] })) }) }) }), PaginationComponent && (jsx(PaginationComponent, { currentPage: currentPage, totalPages: totalPages, onPageChange: handlePageChange, disabled: isDatasetsFetching || isDatasetsLoading })), AddResourceModal && (jsx(AddResourceModal, { isOpen: showAddResourceModal, onClose: () => closeAddResourceModal(), keepParentOpen: true }))] })] })] }));
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iblai/iblai-js",
-  "version": "1.27.1",
+  "version": "2.2.1",
   "description": "Unified JavaScript SDK for IBL.ai — re-exports data-layer, web-containers, and web-utils under a single package",
   "type": "module",
   "engines": {
@@ -76,10 +76,10 @@
     "axios": "1.13.6",
     "dotenv": "16.6.1",
     "winston": "3.19.0",
-    "@iblai/data-layer": "1.9.7",
-    "@iblai/web-utils": "1.14.1",
+    "@iblai/mcp": "1.8.3",
+    "@iblai/data-layer": "1.11.0",
     "@iblai/web-containers": "1.15.7",
-    "@iblai/mcp": "1.8.3"
+    "@iblai/web-utils": "2.1.1"
   },
   "peerDependencies": {
     "@radix-ui/react-dialog": "^1.1.7",