@soyfri/template 1.0.1 → 1.0.4

package/dist/layout/core/_LayoutSetup.js

@@ -1,24 +1,10 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getEmptyHTMLAttributes = exports.getEmptyCSSVariables = exports.getEmptyCssClasses = exports.setLayoutIntoLocalStorage = exports.getLayoutFromLocalStorage = exports.LayoutSetup = void 0;
-var _LayoutConfig_1 = require("./_LayoutConfig");
-var envrionment = {
+import { DefaultConfig } from "./_LayoutConfig";
+const envrionment = {
     VITE_BASE_LAYOUT_CONFIG_KEY: "LayoutConfig",
 };
-var LAYOUT_CONFIG_KEY = envrionment.VITE_BASE_LAYOUT_CONFIG_KEY || "LayoutConfig";
-var getLayoutFromLocalStorage = function () {
-    var ls = localStorage.getItem(LAYOUT_CONFIG_KEY);
+const LAYOUT_CONFIG_KEY = envrionment.VITE_BASE_LAYOUT_CONFIG_KEY || "LayoutConfig";
+const getLayoutFromLocalStorage = () => {
+    const ls = localStorage.getItem(LAYOUT_CONFIG_KEY);
     if (ls) {
         try {
             return JSON.parse(ls);
@@ -27,10 +13,9 @@ var getLayoutFromLocalStorage = function () {
             console.error(er);
         }
     }
-    return _LayoutConfig_1.DefaultConfig;
+    return DefaultConfig;
 };
-exports.getLayoutFromLocalStorage = getLayoutFromLocalStorage;
-var setLayoutIntoLocalStorage = function (config) {
+const setLayoutIntoLocalStorage = (config) => {
     try {
         localStorage.setItem(LAYOUT_CONFIG_KEY, JSON.stringify(config));
     }
@@ -38,8 +23,7 @@ var setLayoutIntoLocalStorage = function (config) {
         console.error(er);
     }
 };
-exports.setLayoutIntoLocalStorage = setLayoutIntoLocalStorage;
-var getEmptyCssClasses = function () {
+const getEmptyCssClasses = () => {
     return {
         header: [],
         headerContainer: [],
@@ -58,8 +42,7 @@ var getEmptyCssClasses = function () {
         pageContainer: [],
     };
 };
-exports.getEmptyCssClasses = getEmptyCssClasses;
-var getEmptyHTMLAttributes = function () {
+const getEmptyHTMLAttributes = () => {
     return {
         asideMenu: new Map(),
         headerMobile: new Map(),
@@ -68,132 +51,141 @@ var getEmptyHTMLAttributes = function () {
         pageTitle: new Map(),
     };
 };
-exports.getEmptyHTMLAttributes = getEmptyHTMLAttributes;
-var getEmptyCSSVariables = function () {
+const getEmptyCSSVariables = () => {
     return {
         body: new Map(),
     };
 };
-exports.getEmptyCSSVariables = getEmptyCSSVariables;
-var LayoutSetup = /** @class */ (function () {
-    function LayoutSetup() {
-    }
-    LayoutSetup.initCSSClasses = function () {
+class LayoutSetup {
+    static isLoaded = false;
+    static config = getLayoutFromLocalStorage();
+    static classes = getEmptyCssClasses();
+    static attributes = getEmptyHTMLAttributes();
+    static cssVariables = getEmptyCSSVariables();
+    static initCSSClasses() {
         LayoutSetup.classes = getEmptyCssClasses();
-    };
-    LayoutSetup.initHTMLAttributes = function () {
+    }
+    static initHTMLAttributes() {
         LayoutSetup.attributes = Object.assign({}, getEmptyHTMLAttributes());
-    };
-    LayoutSetup.initCSSVariables = function () {
+    }
+    static initCSSVariables() {
         LayoutSetup.cssVariables = getEmptyCSSVariables();
-    };
-    LayoutSetup.initConfig = function (config) {
-        var updatedConfig = LayoutSetup.initLayoutSettings(config);
+    }
+    static initConfig(config) {
+        let updatedConfig = LayoutSetup.initLayoutSettings(config);
         updatedConfig = LayoutSetup.initToolbarSetting(updatedConfig);
         return LayoutSetup.initWidthSettings(updatedConfig);
-    };
-    LayoutSetup.initLayoutSettings = function (config) {
-        var _a, _b, _c, _d, _e, _f;
-        var updatedConfig = __assign({}, config);
+    }
+    static initLayoutSettings(config) {
+        const updatedConfig = { ...config };
         // clear body classes
         document.body.className = "";
         // clear body attributes
-        var bodyAttributes = document.body
+        const bodyAttributes = document.body
             .getAttributeNames()
-            .filter(function (t) { return t.indexOf("data-") > -1; });
-        bodyAttributes.forEach(function (attr) { return document.body.removeAttribute(attr); });
+            .filter((t) => t.indexOf("data-") > -1);
+        bodyAttributes.forEach((attr) => document.body.removeAttribute(attr));
         document.body.setAttribute("style", "");
         document.body.setAttribute("id", "kt_app_body");
         document.body.setAttribute("data-kt-app-layout", updatedConfig.layoutType);
         document.body.classList.add("app-default");
-        var pageWidth = (_b = (_a = updatedConfig.app) === null || _a === void 0 ? void 0 : _a.general) === null || _b === void 0 ? void 0 : _b.pageWidth;
+        const pageWidth = updatedConfig.app?.general?.pageWidth;
         if (updatedConfig.layoutType === "light-header" ||
             updatedConfig.layoutType === "dark-header") {
             if (pageWidth === "default") {
-                var header = (_c = updatedConfig.app) === null || _c === void 0 ? void 0 : _c.header;
+                const header = updatedConfig.app?.header;
                 if (header && header.default && header.default.container) {
                     header.default.container = "fixed";
                 }
-                var toolbar_1 = (_d = updatedConfig.app) === null || _d === void 0 ? void 0 : _d.toolbar;
-                if (toolbar_1) {
-                    toolbar_1.container = "fixed";
+                const toolbar = updatedConfig.app?.toolbar;
+                if (toolbar) {
+                    toolbar.container = "fixed";
                 }
-                var content = (_e = updatedConfig.app) === null || _e === void 0 ? void 0 : _e.content;
+                const content = updatedConfig.app?.content;
                 if (content) {
                     content.container = "fixed";
                 }
-                var footer = (_f = updatedConfig.app) === null || _f === void 0 ? void 0 : _f.footer;
+                const footer = updatedConfig.app?.footer;
                 if (footer) {
                     footer.container = "fixed";
                 }
-                var updatedApp = __assign(__assign(__assign(__assign(__assign({}, updatedConfig.app), header), toolbar_1), content), footer);
-                return __assign(__assign({}, updatedConfig), { app: updatedApp });
+                const updatedApp = {
+                    ...updatedConfig.app,
+                    ...header,
+                    ...toolbar,
+                    ...content,
+                    ...footer,
+                };
+                return { ...updatedConfig, app: updatedApp };
             }
         }
         LayoutSetup.initHeaderSettigs(updatedConfig);
         return updatedConfig;
-    };
-    LayoutSetup.initToolbarSetting = function (config) {
-        var _a, _b, _c, _d, _e;
-        var updatedConfig = __assign({}, config);
-        var appHeaderDefaultContent = (_c = (_b = (_a = updatedConfig.app) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.default) === null || _c === void 0 ? void 0 : _c.content;
+    }
+    static initToolbarSetting(config) {
+        const updatedConfig = { ...config };
+        const appHeaderDefaultContent = updatedConfig.app?.header?.default?.content;
         if (appHeaderDefaultContent === "page-title") {
-            var toolbar_2 = (_d = updatedConfig.app) === null || _d === void 0 ? void 0 : _d.toolbar;
-            if (toolbar_2) {
-                toolbar_2.display = false;
-                var updatedApp = __assign(__assign({}, updatedConfig.app), toolbar_2);
-                return __assign(__assign({}, updatedConfig), { app: updatedApp });
+            const toolbar = updatedConfig.app?.toolbar;
+            if (toolbar) {
+                toolbar.display = false;
+                const updatedApp = { ...updatedConfig.app, ...toolbar };
+                return { ...updatedConfig, app: updatedApp };
             }
             return updatedConfig;
         }
-        var pageTitle = (_e = updatedConfig.app) === null || _e === void 0 ? void 0 : _e.pageTitle;
+        const pageTitle = updatedConfig.app?.pageTitle;
         if (pageTitle) {
             pageTitle.description = false;
             pageTitle.breadCrumb = true;
-            var updatedApp = __assign(__assign({}, updatedConfig.app), pageTitle);
-            return __assign(__assign({}, updatedConfig), { app: updatedApp });
+            const updatedApp = { ...updatedConfig.app, ...pageTitle };
+            return { ...updatedConfig, app: updatedApp };
         }
         return updatedConfig;
-    };
-    LayoutSetup.initHeaderSettigs = function (config) {
-        var _a, _b, _c;
-        var container = (_c = (_b = (_a = config.app) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.default) === null || _c === void 0 ? void 0 : _c.container;
+    }
+    static initHeaderSettigs(config) {
+        const container = config.app?.header?.default?.container;
         if (container === "fluid") {
             this.classes.headerContainer.push("container-fluid");
         }
         else {
             this.classes.headerContainer.push("container-xxl");
         }
-    };
-    LayoutSetup.initWidthSettings = function (config) {
-        var _a, _b, _c, _d, _e, _f;
-        var updatedConfig = __assign({}, config);
-        var pageWidth = (_b = (_a = updatedConfig.app) === null || _a === void 0 ? void 0 : _a.general) === null || _b === void 0 ? void 0 : _b.pageWidth;
+    }
+    static initWidthSettings(config) {
+        const updatedConfig = { ...config };
+        const pageWidth = updatedConfig.app?.general?.pageWidth;
         if (!pageWidth || pageWidth === "default") {
             return config;
         }
-        var header = (_c = updatedConfig.app) === null || _c === void 0 ? void 0 : _c.header;
+        const header = updatedConfig.app?.header;
         if (header && header.default) {
             header.default.container = pageWidth;
         }
-        var toolbar = (_d = updatedConfig.app) === null || _d === void 0 ? void 0 : _d.toolbar;
+        const toolbar = updatedConfig.app?.toolbar;
         if (toolbar) {
             toolbar.container = pageWidth;
         }
-        var content = (_e = updatedConfig.app) === null || _e === void 0 ? void 0 : _e.content;
+        const content = updatedConfig.app?.content;
         if (content) {
             content.container = pageWidth;
         }
-        var footer = (_f = updatedConfig.app) === null || _f === void 0 ? void 0 : _f.footer;
+        const footer = updatedConfig.app?.footer;
         if (footer) {
             footer.container = pageWidth;
         }
-        var updatedApp = __assign(__assign(__assign(__assign(__assign({}, updatedConfig.app), header), toolbar), content), footer);
-        return __assign(__assign({}, updatedConfig), { app: updatedApp });
-    };
-    LayoutSetup.updatePartialConfig = function (fieldsToUpdate) {
-        var config = LayoutSetup.config;
-        var updatedConfig = __assign(__assign({}, config), fieldsToUpdate);
+        const updatedApp = {
+            ...updatedConfig.app,
+            ...header,
+            ...toolbar,
+            ...content,
+            ...footer,
+        };
+        return { ...updatedConfig, app: updatedApp };
+    }
+    static updatePartialConfig(fieldsToUpdate) {
+        const config = LayoutSetup.config;
+        const updatedConfig = { ...config, ...fieldsToUpdate };
         LayoutSetup.initCSSClasses();
         LayoutSetup.initCSSVariables();
         LayoutSetup.initHTMLAttributes();
@@ -201,18 +193,12 @@ var LayoutSetup = /** @class */ (function () {
         LayoutSetup.config = LayoutSetup.initConfig(Object.assign({}, updatedConfig));
         LayoutSetup.isLoaded = true; // remove loading there
         return updatedConfig;
-    };
-    LayoutSetup.setConfig = function (config) {
+    }
+    static setConfig(config) {
         setLayoutIntoLocalStorage(config);
-    };
-    LayoutSetup.isLoaded = false;
-    LayoutSetup.config = getLayoutFromLocalStorage();
-    LayoutSetup.classes = getEmptyCssClasses();
-    LayoutSetup.attributes = getEmptyHTMLAttributes();
-    LayoutSetup.cssVariables = getEmptyCSSVariables();
-    LayoutSetup.bootstrap = (function () {
+    }
+    static bootstrap = (() => {
         LayoutSetup.updatePartialConfig(LayoutSetup.config);
     })();
-    return LayoutSetup;
-}());
-exports.LayoutSetup = LayoutSetup;
+}
+export { LayoutSetup, getLayoutFromLocalStorage, setLayoutIntoLocalStorage, getEmptyCssClasses, getEmptyCSSVariables, getEmptyHTMLAttributes, };

package/dist/layout/core/_Models.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/layout/core/index.js

@@ -1,22 +1,6 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./_LayoutConfig"), exports);
-__exportStar(require("./_LayoutProvider"), exports);
-__exportStar(require("./_Models"), exports);
-__exportStar(require("./_LayoutSetup"), exports);
-__exportStar(require("./PageData"), exports);
-__exportStar(require("./MetronicSplashScreen"), exports);
+export * from './_LayoutConfig';
+export * from './_LayoutProvider';
+export * from './_Models';
+export * from './_LayoutSetup';
+export * from './PageData';
+export * from './MetronicSplashScreen';

package/dist/layout/index.js

@@ -1,33 +1,17 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
 // Core exports
-__exportStar(require("./core"), exports);
+export * from './core';
 // Main layouts
-__exportStar(require("./MasterLayout"), exports);
-__exportStar(require("./MasterInit"), exports);
+export * from './MasterLayout';
+export * from './MasterInit';
 // Components
-__exportStar(require("./components/header"), exports);
-__exportStar(require("./components/sidebar"), exports);
-__exportStar(require("./components/footer"), exports);
-__exportStar(require("./components/scroll-top"), exports);
-__exportStar(require("./components/toolbar"), exports);
-__exportStar(require("./components/content"), exports);
+export * from './components/header';
+export * from './components/sidebar';
+export * from './components/footer';
+export * from './components/scroll-top';
+export * from './components/toolbar';
+export * from './components/content';
 // Header menus
-__exportStar(require("./components/header/header-menus"), exports);
+export * from './components/header/header-menus';
 // Toolbar components
-__exportStar(require("./components/toolbar/page-title"), exports);
-__exportStar(require("./components/toolbar/toolbars"), exports);
+export * from './components/toolbar/page-title';
+export * from './components/toolbar/toolbars';

package/dist/partials/chat/ChatInner.js

@@ -1,55 +1,14 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatInner = void 0;
-var react_1 = __importStar(require("react"));
-var clsx_1 = __importDefault(require("clsx"));
-var helpers_1 = require("../../helpers");
-var bufferMessages = helpers_1.defaultMessages;
-var ChatInner = function (_a) {
-    var _b = _a.isDrawer, isDrawer = _b === void 0 ? false : _b;
-    var _c = (0, react_1.useState)(false), chatUpdateFlag = _c[0], toggleChatUpdateFlat = _c[1];
-    var _d = (0, react_1.useState)(''), message = _d[0], setMessage = _d[1];
-    var _e = (0, react_1.useState)(bufferMessages), messages = _e[0], setMessages = _e[1];
-    var userInfos = (0, react_1.useState)(helpers_1.defaultUserInfos)[0];
-    var sendMessage = function () {
-        var newMessage = {
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import { toAbsoluteUrl, defaultMessages, defaultUserInfos, messageFromClient, } from '../../helpers';
+const bufferMessages = defaultMessages;
+const ChatInner = ({ isDrawer = false }) => {
+    const [chatUpdateFlag, toggleChatUpdateFlat] = useState(false);
+    const [message, setMessage] = useState('');
+    const [messages, setMessages] = useState(bufferMessages);
+    const [userInfos] = useState(defaultUserInfos);
+    const sendMessage = () => {
+        const newMessage = {
             user: 2,
             type: 'out',
             text: message,
@@ -59,56 +18,56 @@ var ChatInner = function (_a) {
         setMessages(bufferMessages);
         toggleChatUpdateFlat(!chatUpdateFlag);
         setMessage('');
-        setTimeout(function () {
-            bufferMessages.push(helpers_1.messageFromClient);
-            setMessages(function () { return bufferMessages; });
-            toggleChatUpdateFlat(function (flag) { return !flag; });
+        setTimeout(() => {
+            bufferMessages.push(messageFromClient);
+            setMessages(() => bufferMessages);
+            toggleChatUpdateFlat((flag) => !flag);
         }, 1000);
     };
-    var onEnterPress = function (e) {
+    const onEnterPress = (e) => {
         if (e.keyCode === 13 && e.shiftKey === false) {
             e.preventDefault();
             sendMessage();
         }
     };
-    return (react_1.default.createElement("div", { className: 'card-body', id: isDrawer ? 'kt_drawer_chat_messenger_body' : 'kt_chat_messenger_body' },
-        react_1.default.createElement("div", { className: (0, clsx_1.default)('scroll-y me-n5 pe-5', { 'h-300px h-lg-auto': !isDrawer }), "data-kt-element": 'messages', "data-kt-scroll": 'true', "data-kt-scroll-activate": '{default: false, lg: true}', "data-kt-scroll-max-height": 'auto', "data-kt-scroll-dependencies": isDrawer
+    return (React.createElement("div", { className: 'card-body', id: isDrawer ? 'kt_drawer_chat_messenger_body' : 'kt_chat_messenger_body' },
+        React.createElement("div", { className: clsx('scroll-y me-n5 pe-5', { 'h-300px h-lg-auto': !isDrawer }), "data-kt-element": 'messages', "data-kt-scroll": 'true', "data-kt-scroll-activate": '{default: false, lg: true}', "data-kt-scroll-max-height": 'auto', "data-kt-scroll-dependencies": isDrawer
                 ? '#kt_drawer_chat_messenger_header, #kt_drawer_chat_messenger_footer'
                 : '#kt_header, #kt_app_header, #kt_app_toolbar, #kt_toolbar, #kt_footer, #kt_app_footer, #kt_chat_messenger_header, #kt_chat_messenger_footer', "data-kt-scroll-wrappers": isDrawer
                 ? '#kt_drawer_chat_messenger_body'
-                : '#kt_content, #kt_app_content, #kt_chat_messenger_body', "data-kt-scroll-offset": isDrawer ? '0px' : '5px' }, messages.map(function (message, index) {
-            var userInfo = userInfos[message.user];
-            var state = message.type === 'in' ? 'info' : 'primary';
-            var templateAttr = {};
+                : '#kt_content, #kt_app_content, #kt_chat_messenger_body', "data-kt-scroll-offset": isDrawer ? '0px' : '5px' }, messages.map((message, index) => {
+            const userInfo = userInfos[message.user];
+            const state = message.type === 'in' ? 'info' : 'primary';
+            const templateAttr = {};
             if (message.template) {
                 Object.defineProperty(templateAttr, 'data-kt-element', {
-                    value: "template-".concat(message.type),
+                    value: `template-${message.type}`,
                 });
             }
-            var contentClass = "".concat(isDrawer ? '' : 'd-flex', " justify-content-").concat(message.type === 'in' ? 'start' : 'end', " mb-10");
-            return (react_1.default.createElement("div", __assign({ key: "message".concat(index), className: (0, clsx_1.default)('d-flex', contentClass, 'mb-10', { 'd-none': message.template }) }, templateAttr),
-                react_1.default.createElement("div", { className: (0, clsx_1.default)('d-flex flex-column align-items', "align-items-".concat(message.type === 'in' ? 'start' : 'end')) },
-                    react_1.default.createElement("div", { className: 'd-flex align-items-center mb-2' }, message.type === 'in' ? (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement("div", { className: 'symbol  symbol-35px symbol-circle ' },
-                            react_1.default.createElement("img", { alt: 'Pic', src: (0, helpers_1.toAbsoluteUrl)("media/".concat(userInfo.avatar)) })),
-                        react_1.default.createElement("div", { className: 'ms-3' },
-                            react_1.default.createElement("a", { href: '#', className: 'fs-5 fw-bolder text-gray-900 text-hover-primary me-1' }, userInfo.name),
-                            react_1.default.createElement("span", { className: 'text-muted fs-7 mb-1' }, message.time)))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement("div", { className: 'me-3' },
-                            react_1.default.createElement("span", { className: 'text-muted fs-7 mb-1' }, message.time),
-                            react_1.default.createElement("a", { href: '#', className: 'fs-5 fw-bolder text-gray-900 text-hover-primary ms-1' }, "You")),
-                        react_1.default.createElement("div", { className: 'symbol  symbol-35px symbol-circle ' },
-                            react_1.default.createElement("img", { alt: 'Pic', src: (0, helpers_1.toAbsoluteUrl)("media/".concat(userInfo.avatar)) }))))),
-                    react_1.default.createElement("div", { className: (0, clsx_1.default)('p-5 rounded', "bg-light-".concat(state), 'text-gray-900 fw-bold mw-lg-400px', "text-".concat(message.type === 'in' ? 'start' : 'end')), "data-kt-element": 'message-text', dangerouslySetInnerHTML: { __html: message.text } }))));
+            const contentClass = `${isDrawer ? '' : 'd-flex'} justify-content-${message.type === 'in' ? 'start' : 'end'} mb-10`;
+            return (React.createElement("div", { key: `message${index}`, className: clsx('d-flex', contentClass, 'mb-10', { 'd-none': message.template }), ...templateAttr },
+                React.createElement("div", { className: clsx('d-flex flex-column align-items', `align-items-${message.type === 'in' ? 'start' : 'end'}`) },
+                    React.createElement("div", { className: 'd-flex align-items-center mb-2' }, message.type === 'in' ? (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: 'symbol  symbol-35px symbol-circle ' },
+                            React.createElement("img", { alt: 'Pic', src: toAbsoluteUrl(`media/${userInfo.avatar}`) })),
+                        React.createElement("div", { className: 'ms-3' },
+                            React.createElement("a", { href: '#', className: 'fs-5 fw-bolder text-gray-900 text-hover-primary me-1' }, userInfo.name),
+                            React.createElement("span", { className: 'text-muted fs-7 mb-1' }, message.time)))) : (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: 'me-3' },
+                            React.createElement("span", { className: 'text-muted fs-7 mb-1' }, message.time),
+                            React.createElement("a", { href: '#', className: 'fs-5 fw-bolder text-gray-900 text-hover-primary ms-1' }, "You")),
+                        React.createElement("div", { className: 'symbol  symbol-35px symbol-circle ' },
+                            React.createElement("img", { alt: 'Pic', src: toAbsoluteUrl(`media/${userInfo.avatar}`) }))))),
+                    React.createElement("div", { className: clsx('p-5 rounded', `bg-light-${state}`, 'text-gray-900 fw-bold mw-lg-400px', `text-${message.type === 'in' ? 'start' : 'end'}`), "data-kt-element": 'message-text', dangerouslySetInnerHTML: { __html: message.text } }))));
         })),
-        react_1.default.createElement("div", { className: 'card-footer pt-4', id: isDrawer ? 'kt_drawer_chat_messenger_footer' : 'kt_chat_messenger_footer' },
-            react_1.default.createElement("textarea", { className: 'form-control form-control-flush mb-3', rows: 1, "data-kt-element": 'input', placeholder: 'Type a message', value: message, onChange: function (e) { return setMessage(e.target.value); }, onKeyDown: onEnterPress }),
-            react_1.default.createElement("div", { className: 'd-flex flex-stack' },
-                react_1.default.createElement("div", { className: 'd-flex align-items-center me-2' },
-                    react_1.default.createElement("button", { className: 'btn btn-sm btn-icon btn-active-light-primary me-1', type: 'button', "data-bs-toggle": 'tooltip', title: 'Coming soon' },
-                        react_1.default.createElement("i", { className: 'bi bi-paperclip fs-3' })),
-                    react_1.default.createElement("button", { className: 'btn btn-sm btn-icon btn-active-light-primary me-1', type: 'button', "data-bs-toggle": 'tooltip', title: 'Coming soon' },
-                        react_1.default.createElement("i", { className: 'bi bi-upload fs-3' }))),
-                react_1.default.createElement("button", { className: 'btn btn-primary', type: 'button', "data-kt-element": 'send', onClick: sendMessage }, "Send")))));
+        React.createElement("div", { className: 'card-footer pt-4', id: isDrawer ? 'kt_drawer_chat_messenger_footer' : 'kt_chat_messenger_footer' },
+            React.createElement("textarea", { className: 'form-control form-control-flush mb-3', rows: 1, "data-kt-element": 'input', placeholder: 'Type a message', value: message, onChange: (e) => setMessage(e.target.value), onKeyDown: onEnterPress }),
+            React.createElement("div", { className: 'd-flex flex-stack' },
+                React.createElement("div", { className: 'd-flex align-items-center me-2' },
+                    React.createElement("button", { className: 'btn btn-sm btn-icon btn-active-light-primary me-1', type: 'button', "data-bs-toggle": 'tooltip', title: 'Coming soon' },
+                        React.createElement("i", { className: 'bi bi-paperclip fs-3' })),
+                    React.createElement("button", { className: 'btn btn-sm btn-icon btn-active-light-primary me-1', type: 'button', "data-bs-toggle": 'tooltip', title: 'Coming soon' },
+                        React.createElement("i", { className: 'bi bi-upload fs-3' }))),
+                React.createElement("button", { className: 'btn btn-primary', type: 'button', "data-kt-element": 'send', onClick: sendMessage }, "Send")))));
 };
-exports.ChatInner = ChatInner;
+export { ChatInner };