@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.11

package/dist/components/core/form/SolidFormView.js

@@ -45,15 +45,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useSession } from '../../../hooks/useSession';
 import { permissionExpression } from "../../../helpers/permissions";
@@ -64,11 +55,8 @@ import { useFormik } from "formik";
 import { usePathname } from "../../../hooks/usePathname";
 import { useRouter } from "../../../hooks/useRouter";
 import { useSearchParams } from "../../../hooks/useSearchParams";
-import "primeflex/primeflex.css";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { TabPanel, TabView } from "primereact/tabview";
 import qs from "qs";
+import { getMediaTypeFromUrl } from "../../../helpers/mediaType";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import * as Yup from "yup";
 import { SolidBooleanField } from "./fields/SolidBooleanField";
@@ -89,26 +77,20 @@ import { SolidTimeField } from "./fields/SolidTimeField";
 import { getExtensionComponent, getExtensionFunction } from "../../../helpers/registry";
 import { SolidPasswordField } from "./fields/SolidPasswordField";
 import { SolidEmailField } from "./fields/SolidEmailField";
-import { Panel } from "primereact/panel";
 import { SolidFormUserViewLayout } from "./SolidFormUserViewLayout";
-import Lightbox from "yet-another-react-lightbox";
-import Counter from "yet-another-react-lightbox/plugins/counter";
-import Download from "yet-another-react-lightbox/plugins/download";
-import Video from "yet-another-react-lightbox/plugins/video";
-import "yet-another-react-lightbox/styles.css";
-import "yet-another-react-lightbox/plugins/counter.css";
+import { SolidLightbox } from "../../shad-cn-ui/SolidLightbox";
 import { SolidFormActionHeader } from "./SolidFormActionHeader";
-import { SolidFormViewShimmerLoading } from "./SolidFormViewShimmerLoading";
 import { hasAnyRole } from "../../../helpers/rolesHelper";
 import SolidChatterLocaleTabView from "../locales/SolidChatterLocaleTabView";
-import { ConfirmDialog } from "primereact/confirmdialog";
-import { SolidXAIIcon } from "../solid-ai/SolidXAIIcon";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
 import { useLazyGetMcpUrlQuery, useLazyGetSolidSettingsQuery } from "../../../redux/api/solidSettingsApi";
 import { SolidFormFooter } from "./SolidFormFooter";
 import { normalizeSolidFormActionPath } from "../../../helpers/routePaths";
 import { showToast } from "../../../redux/features/toastSlice";
 import { useDispatch } from "react-redux";
+import { SolidButton, SolidConfirmDialog } from "../../shad-cn-ui";
+import { SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle } from "../../shad-cn-ui/SolidDialog";
+import { SolidHeaderRequestStatus } from "../../common/SolidHeaderRequestStatus";
 var getLayoutFields = function (node) {
     var fields = [];
     if (node.type === "field") {
@@ -229,8 +211,10 @@ var SolidField = function (_a) {
 };
 var SolidGroup = function (_a) {
     var children = _a.children, attrs = _a.attrs;
-    var className = attrs.className;
-    return (_jsxs("div", { className: className, children: [attrs.label && _jsx("p", { children: attrs.label }), _jsx("div", { className: "grid", children: children })] })
+    var className = ["solid-form-layout-group", attrs.label ? "solid-form-layout-group--labeled" : "", attrs.className]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs("div", { className: className, children: [attrs.label && _jsx("p", { className: "solid-form-layout-label", children: attrs.label }), _jsx("div", { className: "grid", children: children })] })
     // <div className={className}>
     //     <div className="s_group">
     //         <fieldset>
@@ -246,7 +230,9 @@ var SolidGroup = function (_a) {
 };
 var SolidRow = function (_a) {
     var children = _a.children, attrs = _a.attrs;
-    var className = attrs.className;
+    var className = ["row", "solid-form-layout-row", attrs.label ? "solid-form-layout-row--labeled" : "", attrs.className]
+        .filter(Boolean)
+        .join(" ");
     return (
     // <div className={`row ${className}`}>
     //     <div className="s_group">
@@ -256,69 +242,57 @@ var SolidRow = function (_a) {
     //         </fieldset>
     //     </div>
     // </div>
-    _jsxs("div", { className: "row ".concat(className), children: [attrs.label && _jsx("p", { children: attrs.label }), _jsx("div", { className: "grid", children: children })] })
+    _jsxs("div", { className: className, children: [attrs.label && _jsx("p", { className: "solid-form-layout-label", children: attrs.label }), _jsx("div", { className: "grid", children: children })] })
     // <div>{children}</div>
     );
 };
 var SolidColumn = function (_a) {
     var children = _a.children, attrs = _a.attrs;
-    var className = attrs.className;
-    return (
-    // first fieldset ui
-    // <div className={`${className}`}>
-    //     <div className="s_group">
-    //         <fieldset>
-    //             {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
-    //             <div className="grid">{children}</div>
-    //         </fieldset>
-    //     </div>
-    // </div>
-    //second fieldset ui
-    // <div className={`${className}`}>
-    //     {attrs.label && <p>{attrs.label}</p>}
-    //     <div className="grid">{children}</div>
-    // </div>
-    //figma fieldset ui
-    attrs.label ?
-        _jsx("div", { className: "".concat(className), children: _jsx(Panel, { header: attrs.label, className: "solid-column-panel", children: _jsx("div", { className: "grid", children: children }) }) })
-        :
-            _jsx("div", { className: "".concat(className), children: _jsx("div", { className: "grid", children: children }) }));
+    var className = ["solid-form-layout-column", attrs.label ? "solid-form-layout-column--labeled" : "", attrs.className]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs("div", { className: className, children: [attrs.label && _jsx("p", { className: "solid-form-layout-label", children: attrs.label }), _jsx("div", { className: "grid", children: children })] }));
 };
 var SolidSheet = function (_a) {
     var children = _a.children;
     return (_jsx("div", { className: "p-fluid p-grid", children: children }));
 };
+// Internal tab data carrier — SolidNotebook reads props from this
+var SolidPageTab = function (_a) {
+    var children = _a.children;
+    return _jsx(_Fragment, { children: children });
+};
 var SolidNotebook = function (_a) {
     var children = _a.children, activeTab = _a.activeTab, embeded = _a.embeded;
-    // const childrenArray = children;
-    // const childrenArray = React.Children.toArray(children).filter(Boolean);
     var childrenArray = React.Children.toArray(children).filter(function (child) { return !!child; });
     var router = useRouter();
     var pathname = usePathname();
     var searchParams = useSearchParams();
-    // Local state to manage active tab in embedded context
     var _b = useState(activeTab), localActiveTab = _b[0], setLocalActiveTab = _b[1];
+    var effectiveTab = embeded ? localActiveTab : activeTab;
     var activeIndex = useMemo(function () {
-        return childrenArray.findIndex(function (child) {
-            return child.key === (embeded ? localActiveTab : activeTab);
-        });
-    }, [childrenArray, activeTab, localActiveTab, embeded]);
-    var handleTabChange = function (e) {
-        var selectedChild = childrenArray[e.index];
-        var newTabLabel = selectedChild === null || selectedChild === void 0 ? void 0 : selectedChild.key;
-        if (newTabLabel) {
+        var idx = childrenArray.findIndex(function (child) { var _a; return ((_a = child.props) === null || _a === void 0 ? void 0 : _a.tabKey) === effectiveTab; });
+        return idx >= 0 ? idx : 0;
+    }, [childrenArray, effectiveTab]);
+    var handleTabChange = function (index) {
+        var _a;
+        var selectedChild = childrenArray[index];
+        var newTabKey = (_a = selectedChild === null || selectedChild === void 0 ? void 0 : selectedChild.props) === null || _a === void 0 ? void 0 : _a.tabKey;
+        if (newTabKey) {
             if (!embeded) {
                 var queryParams = new URLSearchParams(searchParams.toString());
-                queryParams.set('activeTab', newTabLabel);
+                queryParams.set('activeTab', newTabKey);
                 router.push("".concat(pathname, "?").concat(queryParams.toString()));
             }
             else {
-                // Update the active tab state locally for embedded view
-                setLocalActiveTab(newTabLabel);
+                setLocalActiveTab(newTabKey);
             }
         }
     };
-    return (_jsx("div", { className: "solid-tab-view w-full", children: _jsx(TabView, { activeIndex: activeIndex >= 0 ? activeIndex : 0, onTabChange: handleTabChange, children: childrenArray }) }));
+    return (_jsxs("div", { className: "solid-notebook w-full", children: [_jsx("div", { className: "solid-notebook-tablist", role: "tablist", children: childrenArray.map(function (child, index) {
+                    var _a, _b;
+                    return (_jsx("button", { type: "button", role: "tab", "aria-selected": index === activeIndex, onClick: function () { return handleTabChange(index); }, className: "solid-notebook-tab-trigger".concat(index === activeIndex ? ' active' : '').concat(((_a = child.props) === null || _a === void 0 ? void 0 : _a.hasError) ? ' error' : ''), children: (_b = child.props) === null || _b === void 0 ? void 0 : _b.label }, index));
+                }) }), _jsx("div", { className: "solid-notebook-content", role: "tabpanel", children: childrenArray[activeIndex] })] }));
 };
 var SolidDynamicWidget = function (_a) {
     var widgetName = _a.widgetName, formik = _a.formik, field = _a.field, solidFormViewMetaData = _a.solidFormViewMetaData, solidFormViewData = _a.solidFormViewData;
@@ -338,8 +312,8 @@ var SolidPage = function (_a) {
     var attrs = _a.attrs, children = _a.children, key = _a.key, formik = _a.formik, fields = _a.fields;
     var fieldsName = fields.map(function (f) { return f.attrs.name; });
     var errorCount = formik.submitCount > 0 ? fieldsName.filter(function (name) { return !!formik.errors[name]; }).length : 0;
-    var label = (_jsxs("span", { style: { color: errorCount > 0 ? 'red' : 'inherit' }, children: [attrs.label, errorCount > 0 && " (".concat(errorCount, ")")] }));
-    return (_jsx(TabPanel, { header: label, children: _jsx("div", { className: "p-fluid", children: children }) }, key));
+    var label = "".concat(attrs.label).concat(errorCount > 0 ? " (".concat(errorCount, ")") : '');
+    return (_jsx(SolidPageTab, { label: label, tabKey: key, hasError: errorCount > 0, children: _jsx("div", { className: "p-fluid", children: children }) }, key));
 };
 // Original code...
 // const addLevelToGroups = (layout: any, level = 1) => {
@@ -402,7 +376,7 @@ var SolidFormView = function (params) {
     var _2 = useState(false), openLightbox = _2[0], setOpenLightbox = _2[1];
     var _3 = useState([]), lightboxUrls = _3[0], setLightboxUrls = _3[1];
     var _4 = useState(false), isShowChatter = _4[0], setShowChatter = _4[1];
-    var _5 = useState(380), chatterLocaleWidth = _5[0], setChatterLocaleWidth = _5[1]; // default width
+    var _5 = useState(360), chatterLocaleWidth = _5[0], setChatterLocaleWidth = _5[1];
     var _6 = useState(false), isResizingChatterLocale = _6[0], setIsResizingChatterLocale = _6[1];
     var _7 = useState(false), isSubmitting = _7[0], setIsSubmitting = _7[1];
     var _8 = useState(""), solidWorkflowFieldValue = _8[0], setSolidWorkflowFieldValue = _8[1];
@@ -457,7 +431,9 @@ var SolidFormView = function (params) {
     useEffect(function () {
         var stored = localStorage.getItem('chatter_locale_width');
         if (stored) {
-            setChatterLocaleWidth(parseInt(stored, 10));
+            var parsed = parseInt(stored, 10);
+            var clampedWidth = Math.max(320, Math.min(parsed, 420));
+            setChatterLocaleWidth(clampedWidth);
         }
     }, []);
     useEffect(function () {
@@ -465,7 +441,7 @@ var SolidFormView = function (params) {
             if (!isResizingChatterLocale)
                 return;
             var newWidth = window.innerWidth - e.clientX;
-            var clampedWidth = Math.max(280, Math.min(newWidth, 700));
+            var clampedWidth = Math.max(320, Math.min(newWidth, 420));
             setChatterLocaleWidth(clampedWidth);
             localStorage.setItem('chatter_locale_width', clampedWidth.toString());
         };
@@ -1093,7 +1069,7 @@ var SolidFormView = function (params) {
             enableReinitialize: true,
             onSubmit: onFormikSubmit,
         });
-        return _jsx(SolidFormViewShimmerLoading, {});
+        return (_jsx("div", { className: "solid-form-wrapper", children: _jsxs("div", { className: "solid-form-section", children: [_jsx("div", { className: "page-header solid-list-toolbar flex-column lg:flex-row", children: _jsxs("div", { className: "flex justify-content-between w-full solid-form-toolbar-row", children: [_jsx("div", { className: "flex gap-3 align-items-center solid-form-toolbar-left", children: _jsx("p", { className: "m-0 view-title solid-text-wrapper", children: "Loading form" }) }), _jsx("div", { className: "flex align-items-center solid-header-buttons-wrapper solid-form-toolbar-actions", children: _jsx(SolidHeaderRequestStatus, { label: "Loading..." }) })] }) }), _jsx("div", { className: "solid-view-loading-body-spacer flex-1 min-h-0" })] }) }));
     }
     // At this point everything required to render the form is loaded, so we go ahead and start rendering things dynamically...
     else {
@@ -1215,10 +1191,12 @@ var SolidFormView = function (params) {
             });
         }); };
         // Now render the form dynamically...
-        var renderFormElementDynamically_1 = function (element, recursiveFVMD) {
+        var renderFormElementDynamically_1 = function (element, recursiveFVMD, path) {
+            var _a, _b, _c;
+            if (path === void 0) { path = "root"; }
             var type = element.type, attrs = element.attrs, body = element.body, children = element.children;
             // const key = attrs?.name ?? generateRandomKey();
-            var key = attrs === null || attrs === void 0 ? void 0 : attrs.label;
+            var key = (_c = (_b = (_a = attrs === null || attrs === void 0 ? void 0 : attrs.key) !== null && _a !== void 0 ? _a : attrs === null || attrs === void 0 ? void 0 : attrs.name) !== null && _b !== void 0 ? _b : attrs === null || attrs === void 0 ? void 0 : attrs.label) !== null && _c !== void 0 ? _c : "".concat(type, "-").concat(path);
             var visible = attrs === null || attrs === void 0 ? void 0 : attrs.visible;
             if (visible === undefined || visible === null) {
                 visible = true;
@@ -1235,11 +1213,11 @@ var SolidFormView = function (params) {
                 case "form":
                     if (!children)
                         children = [];
-                    return _jsx("div", { children: children.map(function (element) { return renderFormElementDynamically_1(element, recursiveFVMD, formik); }) }, key);
+                    return _jsx("div", { children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }, key);
                 case "div":
                     if (!children)
                         children = [];
-                    return _jsx("div", __assign({}, attrs, { children: children.map(function (element) { return renderFormElementDynamically_1(element, recursiveFVMD, formik); }) }), key);
+                    return _jsx("div", __assign({}, attrs, { children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }), key);
                 case "span":
                     return _jsx("span", __assign({}, attrs, { children: body }), key);
                 case "p":
@@ -1251,24 +1229,24 @@ var SolidFormView = function (params) {
                 case "ul":
                     if (!children)
                         children = [];
-                    return _jsx("ul", __assign({}, attrs, { children: children.map(function (element) { return renderFormElementDynamically_1(element, recursiveFVMD, formik); }) }), key);
+                    return _jsx("ul", __assign({}, attrs, { children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }), key);
                 case "li":
                     return _jsx("li", __assign({}, attrs, { children: body }), key);
                 case "sheet":
-                    return _jsx(SolidSheet, { children: children.map(function (element) { return renderFormElementDynamically_1(element, recursiveFVMD, formik); }) }, key);
+                    return _jsx(SolidSheet, { children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }, key);
                 case "group":
                     if (visible === true) {
-                        return _jsx(SolidGroup, { attrs: attrs, children: children.map(function (element) { return renderFormElementDynamically_1(element, recursiveFVMD, formik); }) }, key);
+                        return _jsx(SolidGroup, { attrs: attrs, children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }, key);
                     }
                     break;
                 case "row":
                     if (visible === true) {
-                        return _jsx(SolidRow, { attrs: attrs, children: children.map(function (element) { return renderFormElementDynamically_1(element, recursiveFVMD, formik); }) }, key);
+                        return _jsx(SolidRow, { attrs: attrs, children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }, key);
                     }
                     break;
                 case "column":
                     if (visible === true) {
-                        return _jsx(SolidColumn, { attrs: attrs, children: children.map(function (element) { return renderFormElementDynamically_1(element, recursiveFVMD, formik); }) }, key);
+                        return _jsx(SolidColumn, { attrs: attrs, children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }, key);
                     }
                     break;
                 case "field":
@@ -1282,13 +1260,13 @@ var SolidFormView = function (params) {
                     break;
                 case "notebook":
                     if (visible === true) {
-                        return _jsx(SolidNotebook, { activeTab: searchParams.get("activeTab") || "", embeded: params.embeded, children: children.map(function (element) { return renderFormElementDynamically_1(element, recursiveFVMD, formik); }) }, key);
+                        return _jsx(SolidNotebook, { activeTab: searchParams.get("activeTab") || "", embeded: params.embeded, children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }, key);
                     }
                     break;
                 case "page":
                     if (visible === true) {
                         var fields = children.flatMap(function (child) { return getLayoutFields(child); });
-                        var pageChildren = children.map(function (element) { return renderFormElementDynamically_1(element, recursiveFVMD); });
+                        var pageChildren = children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); });
                         return SolidPage({ children: pageChildren, attrs: attrs, key: key, formik: formik, fields: fields });
                     }
                     break;
@@ -1319,7 +1297,7 @@ var SolidFormView = function (params) {
                 return;
             }
             var updatedLayout = [formViewLayout];
-            var dynamicForm = updatedLayout.map(function (element) { return renderFormElementDynamically_1(element, recursiveFVMD); });
+            var dynamicForm = updatedLayout.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "root-".concat(index)); });
             return dynamicForm;
         };
         var handleDeleteEntity_1 = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -1335,7 +1313,7 @@ var SolidFormView = function (params) {
                 return [2 /*return*/];
             });
         }); };
-        var onDeleteClose_1 = function () {
+        var onDeleteClose = function () {
             setDeleteDialogVisible(false);
         };
         var dynamicHeader = (_f = solidView_1.layout) === null || _f === void 0 ? void 0 : _f.header;
@@ -1438,28 +1416,21 @@ var SolidFormView = function (params) {
                 }
             });
         }); };
-        var isVideoOrAudio_1 = function (url) {
-            var _a;
-            // Remove query params if present
-            var cleanUrl = url.split("?")[0];
-            var ext = (_a = cleanUrl.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-            // Combined list of supported media extensions
-            var mediaExt = ["mp4", "webm", "ogg", "mov", "mp3", "wav", "m4a", "aac"];
-            return ext ? mediaExt.includes(ext) : false;
-        };
-        var controlsList = ["nodownload", "nofullscreen", "noremoteplayback"];
-        var slides = lightboxUrls.map(function (item) {
-            var url = item.src || item.downloadUrl || "";
-            if (isVideoOrAudio_1(url)) {
-                return {
-                    type: "video",
-                    sources: [{ src: url, type: "video/mp4", }],
-                };
+        var lightboxSlides = lightboxUrls
+            .map(function (item) {
+            var src = (item === null || item === void 0 ? void 0 : item.src) || (item === null || item === void 0 ? void 0 : item.downloadUrl) || "";
+            if (!src) {
+                return null;
             }
-            return { src: url };
-        });
-        var hasMedia = slides.some(function (s) { return s.type === "video"; });
-        return (_jsxs("div", { className: "solid-form-wrapper", children: [_jsxs("div", { className: "solid-form-section", style: { borderRight: params.embeded !== true ? '1px solid var(--primary-light-color)' : '' }, children: [_jsxs("form", { style: { width: '100%' }, onSubmit: formik.handleSubmit, children: [_jsx(SolidFormActionHeader, { formik: formik, formData: solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data, params: params, actionsAllowed: actionsAllowed, formViewLayout: formViewLayout, solidView: solidView_1, solidFormViewMetaData: solidFormViewMetaData, initialEntityData: solidFormViewData ? solidFormViewData.data : {}, setDeleteDialogVisible: setDeleteDialogVisible, setLayoutDialogVisible: setLayoutDialogVisible, setRedirectToList: setRedirectToList, viewMode: viewMode, setViewMode: setViewMode, solidWorkflowFieldValue: solidWorkflowFieldValue, setSolidWorkflowFieldValue: setSolidWorkflowFieldValue, draftEnabled: (_j = (_h = (_g = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _g === void 0 ? void 0 : _g.solidView) === null || _h === void 0 ? void 0 : _h.model) === null || _j === void 0 ? void 0 : _j.draftPublishWorkflow, publish: published, internationalisationEnabled: (_m = (_l = (_k = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _k === void 0 ? void 0 : _k.solidView) === null || _l === void 0 ? void 0 : _l.model) === null || _m === void 0 ? void 0 : _m.internationalisation, handleDraftPublishWorkFlow: handleDraftPublishWorkFlow, onStepperUpdate: function () { return setRefreshChatterMessage(true); }, isSubmitting: isSubmitting }), _jsxs("div", { className: "px-4 py-3 md:p-4 solid-form-content ".concat(params.embeded === true ? 'h-auto' : ''), style: { maxHeight: params.embeded === true ? '80vh' : '', overflowY: 'auto' }, children: [DynamicHeaderComponent && _jsx(DynamicHeaderComponent, {}), params.id === 'new' && DynamicFormComponentNew ? (_jsx(DynamicFormComponentNew, { params: params })) : params.id !== 'new' && DynamicFormComponentEdit ? (_jsx(DynamicFormComponentEdit, { params: params })) : (renderFormDynamically(formViewMetaData, formViewLayout))] })] }), _jsx(SolidFormFooter, { params: params })] }), params.embeded !== true &&
+            var mediaType = getMediaTypeFromUrl(src);
+            var slide = { src: src };
+            if (mediaType !== "image") {
+                slide.type = mediaType;
+            }
+            return slide;
+        })
+            .filter(function (slide) { return !!slide; });
+        return (_jsxs("div", { className: "solid-form-wrapper", children: [_jsxs("div", { className: "solid-form-section", children: [_jsxs("form", { style: { width: '100%' }, onSubmit: formik.handleSubmit, children: [_jsx(SolidFormActionHeader, { formik: formik, formData: solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data, params: params, actionsAllowed: actionsAllowed, formViewLayout: formViewLayout, solidView: solidView_1, solidFormViewMetaData: solidFormViewMetaData, initialEntityData: solidFormViewData ? solidFormViewData.data : {}, setDeleteDialogVisible: setDeleteDialogVisible, setLayoutDialogVisible: setLayoutDialogVisible, setRedirectToList: setRedirectToList, viewMode: viewMode, setViewMode: setViewMode, solidWorkflowFieldValue: solidWorkflowFieldValue, setSolidWorkflowFieldValue: setSolidWorkflowFieldValue, draftEnabled: (_j = (_h = (_g = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _g === void 0 ? void 0 : _g.solidView) === null || _h === void 0 ? void 0 : _h.model) === null || _j === void 0 ? void 0 : _j.draftPublishWorkflow, publish: published, internationalisationEnabled: (_m = (_l = (_k = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _k === void 0 ? void 0 : _k.solidView) === null || _l === void 0 ? void 0 : _l.model) === null || _m === void 0 ? void 0 : _m.internationalisation, handleDraftPublishWorkFlow: handleDraftPublishWorkFlow, onStepperUpdate: function () { return setRefreshChatterMessage(true); }, isSubmitting: isSubmitting, headerRequestStatusLabel: isSubmitting ? "Saving..." : null }), _jsxs("div", { className: "px-4 py-3 md:p-4 solid-form-content md:pt-1 ".concat(createMode ? 'solid-create-mode-form-content' : '', " ").concat(params.embeded === true ? 'h-auto' : ''), style: { maxHeight: params.embeded === true ? '80vh' : '', overflowY: 'auto' }, children: [DynamicHeaderComponent && _jsx(DynamicHeaderComponent, {}), params.id === 'new' && DynamicFormComponentNew ? (_jsx(DynamicFormComponentNew, { params: params })) : params.id !== 'new' && DynamicFormComponentEdit ? (_jsx(DynamicFormComponentEdit, { params: params })) : (renderFormDynamically(formViewMetaData, formViewLayout))] })] }), _jsx(SolidFormFooter, { params: params })] }), params.embeded !== true &&
                     _jsxs("div", { className: "chatter-section ".concat(isShowChatter === false ? 'collapsed' : 'open'), style: { width: chatterLocaleWidth }, children: [isShowChatter && (_jsx("div", { style: {
                                     width: 5,
                                     cursor: 'col-resize',
@@ -1469,31 +1440,11 @@ var SolidFormView = function (params) {
                                     bottom: 0,
                                     zIndex: 9,
                                 }, onMouseDown: function () { return setIsResizingChatterLocale(true); } })), isShowChatter === true &&
-                                _jsx(Button, { icon: "pi pi-angle-double-right", size: "small", text: true, className: "chatter-collapse-btn", style: { width: 30, height: 30, aspectRatio: '1/1' }, onClick: function () { return setShowChatter(false); } }), isShowChatter === false ?
-                                _jsxs("div", { className: "flex flex-column gap-2 justify-content-center p-2", children: [((_q = (_p = (_o = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _o === void 0 ? void 0 : _o.solidView) === null || _p === void 0 ? void 0 : _p.model) === null || _q === void 0 ? void 0 : _q.draftPublishWorkflow) &&
-                                            _jsx("div", { className: "chatter-collapsed-content", onClick: function () { return handleChatterExpandClick_1('info'); }, children: "Info" }), _jsx("div", { className: "chatter-collapsed-content", onClick: function () { return handleChatterExpandClick_1('chatter'); }, children: "Audit Trail" }), mcpUrl &&
-                                            (_jsx("div", { className: "chatter-collapsed-content", onClick: function () { return handleChatterExpandClick_1('solidx-ai'); }, children: _jsxs("div", { className: "flex gap-2", children: [" ", _jsx(SolidXAIIcon, {}), " SolidX AI "] }) })), _jsx(Button, { icon: "pi pi-chevron-left", size: "small", className: "px-0", style: { width: 30 }, onClick: function () { return handleChatterExpandClick_1('chatter'); } })] })
+                                _jsx(SolidButton, { icon: "si si-angle-double-right", size: "sm", text: true, className: "chatter-collapse-btn", style: { width: 26, height: 26, aspectRatio: '1/1' }, onClick: function () { return setShowChatter(false); } }), isShowChatter === false ?
+                                _jsxs("div", { className: "flex flex-column gap-2 justify-content-center p-1", children: [((_q = (_p = (_o = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _o === void 0 ? void 0 : _o.solidView) === null || _p === void 0 ? void 0 : _p.model) === null || _q === void 0 ? void 0 : _q.draftPublishWorkflow) &&
+                                            _jsx("div", { className: "chatter-collapsed-content", onClick: function () { return handleChatterExpandClick_1('info'); }, children: "Info" }), _jsx("div", { className: "chatter-collapsed-content", onClick: function () { return handleChatterExpandClick_1('chatter'); }, children: "Audit Trail" }), _jsx(SolidButton, { icon: "si si-chevron-left", size: "sm", className: "px-0", style: { width: 30 }, onClick: function () { return handleChatterExpandClick_1('chatter'); } })] })
                                 :
-                                    _jsx(SolidChatterLocaleTabView, { createMode: createMode, setSelectedLocale: setSelectedLocale, selectedLocale: selectedLocale, solidFormViewMetaData: solidFormViewMetaData, id: params.id, refreshChatterMessage: refreshChatterMessage, setRefreshChatterMessage: setRefreshChatterMessage, activeTab: defaultTabViewOptionIndex, viewMode: viewMode, defaultEntityLocaleId: defaultEntityLocaleId, handleLocaleChangeRedirect: handleLocaleChangeRedirect, solidFormViewData: solidFormViewData, published: published, actionsAllowed: actionsAllowed, mcpUrl: mcpUrl })] }), _jsx(Dialog, { visible: isDeleteDialogVisible, header: "Confirm Delete", className: "solid-confirm-dialog", modal: true, footer: function () { return (_jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { label: "Yes", icon: "pi pi-check", className: 'small-button', severity: "danger", autoFocus: true, onClick: function () { return handleDeleteEntity_1(); } }), _jsx(Button, { label: "No", icon: "pi pi-times", className: 'small-button', onClick: onDeleteClose_1 })] })); }, onHide: function () { return setDeleteDialogVisible(false); }, children: _jsx("p", { children: "Are you sure you want to delete?" }) }), _jsx(Dialog, { visible: isLayoutDialogVisible, header: "Change Form Layout", modal: true, onHide: function () { return setLayoutDialogVisible(false); }, style: { width: '50vw' }, breakpoints: {
-                        '960px': '80vw',
-                        '641px': '95vw'
-                    }, contentClassName: "p-3 pt-0 lg:p-4", children: _jsx(SolidFormUserViewLayout, { solidFormViewMetaData: solidFormViewMetaData, setLayoutDialogVisible: setLayoutDialogVisible }) }), openLightbox &&
-                    _jsx(Lightbox, __assign({ open: openLightbox, plugins: hasMedia
-                            ? [Counter, Download, Video] // add Video plugin if needed
-                            : [Counter, Download], close: function () { return setOpenLightbox(false); }, slides: __spreadArray([], slides, true) }, (hasMedia && {
-                        video: {
-                            controls: true,
-                            playsInline: true,
-                            autoPlay: false,
-                            loop: false,
-                            muted: false,
-                            disablePictureInPicture: false,
-                            disableRemotePlayback: false,
-                            controlsList: controlsList.join(" "),
-                            crossOrigin: "anonymous",
-                            preload: "auto",
-                        },
-                    }))), _jsx(ConfirmDialog, { visible: confirmVisible, onHide: function () { return setConfirmVisible(false); }, header: "Confirmation", acceptLabel: "Yes, confrim", rejectLabel: "No, cancel", acceptClassName: "p-button-danger", rejectClassName: "p-button-text", position: "center", accept: handleConfirmAccept, reject: handleConfirmReject, message: _jsx("div", { className: "flex flex-col items-center justify-center text-center space-y-3", children: _jsxs("p", { className: "text-gray-800 text-base", children: ["Are you sure you want to ", published !== null ? 'unpublish' : 'publish', "?"] }) }) })] }));
+                                    _jsx(SolidChatterLocaleTabView, { createMode: createMode, setSelectedLocale: setSelectedLocale, selectedLocale: selectedLocale, solidFormViewMetaData: solidFormViewMetaData, id: params.id, refreshChatterMessage: refreshChatterMessage, setRefreshChatterMessage: setRefreshChatterMessage, activeTab: defaultTabViewOptionIndex, viewMode: viewMode, defaultEntityLocaleId: defaultEntityLocaleId, handleLocaleChangeRedirect: handleLocaleChangeRedirect, solidFormViewData: solidFormViewData, published: published, actionsAllowed: actionsAllowed, mcpUrl: mcpUrl })] }), _jsxs(SolidDialog, { open: isDeleteDialogVisible, onOpenChange: setDeleteDialogVisible, className: "solid-confirm-dialog", children: [_jsxs(SolidDialogHeader, { className: "solid-field-confirm-header", children: [_jsx(SolidDialogTitle, { children: "Confirm Delete" }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogBody, { className: "solid-field-confirm-dialog-body", children: _jsx("p", { className: "solid-field-confirm-message", children: "Are you sure you want to delete?" }) }), _jsxs("div", { className: "solid-radix-dialog-footer solid-field-confirm-actions", children: [_jsx(SolidButton, { label: "Yes", icon: "si si-check", variant: "destructive", autoFocus: true, onClick: function () { return handleDeleteEntity_1(); } }), _jsx(SolidButton, { label: "No", icon: "si si-times", variant: "outline", onClick: onDeleteClose })] })] }), _jsxs(SolidDialog, { open: isLayoutDialogVisible, onOpenChange: setLayoutDialogVisible, className: "solid-form-layout-dialog", children: [_jsxs(SolidDialogHeader, { className: "solid-shadcn-dialog-head", children: [_jsx(SolidDialogTitle, { children: "Change Form Layout" }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogSeparator, {}), _jsx(SolidDialogBody, { className: "p-3 pt-0 lg:p-4", children: _jsx(SolidFormUserViewLayout, { solidFormViewMetaData: solidFormViewMetaData, setLayoutDialogVisible: setLayoutDialogVisible }) })] }), openLightbox && (_jsx(SolidLightbox, { open: openLightbox, slides: lightboxSlides, onClose: function () { return setOpenLightbox(false); } })), _jsx(SolidConfirmDialog, { open: confirmVisible, title: "Confirmation", confirmLabel: "Yes, confirm", cancelLabel: "No, cancel", onConfirm: handleConfirmAccept, onCancel: handleConfirmReject, message: _jsx("div", { className: "flex flex-col items-center justify-center text-center space-y-3", children: _jsxs("p", { className: "text-gray-800 text-base", children: ["Are you sure you want to ", published !== null ? 'unpublish' : 'publish', "?"] }) }) })] }));
     }
 };
 export default SolidFormView;