@bytexbyte/nxtlinq-ai-agent-sdk 1.6.0 → 1.6.1

package/dist/components/context/ChatBotContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatBotContext.d.ts","sourceRoot":"","sources":["../../../src/components/context/ChatBotContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EACL,kBAAkB,EAClB,YAAY,EAGb,MAAM,uBAAuB,CAAC;AAI/B,eAAO,MAAM,UAAU,0BAMtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAu1DlD,CAAC"}
+{"version":3,"file":"ChatBotContext.d.ts","sourceRoot":"","sources":["../../../src/components/context/ChatBotContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EACL,kBAAkB,EAClB,YAAY,EAGb,MAAM,uBAAuB,CAAC;AAI/B,eAAO,MAAM,UAAU,0BAMtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA21DlD,CAAC"}

package/dist/components/context/ChatBotContext.js

@@ -62,8 +62,10 @@ idvBannerDismissSeconds = 86400 // 24 hours in seconds
     // Persistent data (always use localStorage)
     const [nxtlinqAITServiceAccessToken, setNxtlinqAITServiceAccessToken] = useLocalStorage('nxtlinqAITServiceAccessToken', '');
     const [pseudoId, setPseudoId] = useLocalStorage('pseudoId', uuidv4());
-    // UI state (not stored)
-    const [suggestions, setSuggestions] = React.useState(presetMessages);
+    // UI state (use session storage when useSessionStorageMode is true)
+    const [suggestions, setSuggestions] = useSessionStorageMode
+        ? useSessionStorage('chatbot-suggestions', presetMessages)
+        : React.useState(presetMessages);
     const [isAITEnabling, setIsAITEnabling] = React.useState(false);
     // Use refs to get latest state values in hasPermission function
     const hitAddressRef = React.useRef(hitAddress);
@@ -1358,8 +1360,10 @@ idvBannerDismissSeconds = 86400 // 24 hours in seconds
                 setIsAITEnabling(false);
                 return false;
             }
-            // Add the required permission to current permissions
-            const newPermissions = [...permissions];
+            // Get current permissions from AIT metadata instead of React state
+            // This ensures we don't lose existing permissions when enabling new ones
+            const currentAITPermissions = aitRef.current?.metadata?.permissions || permissions;
+            const newPermissions = [...currentAITPermissions];
             if (!newPermissions.includes(toolName)) {
                 newPermissions.push(toolName);
             }

package/dist/components/ui/BerifyMeModal.d.ts

@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import React from 'react';
 interface BerifyMeModalProps {
     isOpen: boolean;

package/dist/components/ui/BerifyMeModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BerifyMeModal.d.ts","sourceRoot":"","sources":["../../../src/components/ui/BerifyMeModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,UAAU,kBAAkB;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;CAChC;AASD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2HtD,CAAC;AAGF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,WAAW,CAAC,EAAE;YACZ,KAAK,EAAE,GAAG,CAAC;YACX,WAAW,EAAE;gBACX,OAAO,EAAE,GAAG,CAAC;gBACb,UAAU,EAAE,GAAG,CAAC;aACjB,CAAC;SACH,CAAC;KACH;CACF"}
+{"version":3,"file":"BerifyMeModal.d.ts","sourceRoot":"","sources":["../../../src/components/ui/BerifyMeModal.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,UAAU,kBAAkB;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;CAChC;AASD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsHtD,CAAC;AAGF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,WAAW,CAAC,EAAE;YACZ,KAAK,EAAE,GAAG,CAAC;YACX,WAAW,EAAE;gBACX,OAAO,EAAE,GAAG,CAAC;gBACb,UAAU,EAAE,GAAG,CAAC;aACjB,CAAC;SACH,CAAC;KACH;CACF"}

package/dist/components/ui/BerifyMeModal.js

@@ -1,5 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
 import React, { useEffect, useRef } from 'react';
+import { css } from '@emotion/react';
+import { modalOverlay } from './styles/isolatedStyles';
 // Built-in BerifyMe configuration
 const BUILT_IN_BERIFYME_CONFIG = {
     apiKeyId: 'staging_83dc824cb50b4e76747e352b4228f2ee',
@@ -102,13 +105,8 @@ export const BerifyMeModal = ({ isOpen, onClose, onVerificationComplete, mode =
     };
     if (!isOpen)
         return null;
-    return (_jsx("div", { ref: modalRef, style: {
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            zIndex: 9999,
-            backgroundColor: 'rgba(0, 0, 0, 0.5)'
-        } }));
+    return (_jsx("div", { ref: modalRef, css: css `
+        ${modalOverlay}
+        z-index: 9999 !important;
+      ` }));
 };

package/dist/components/ui/ChatBotUI.d.ts

@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import * as React from 'react';
 export declare const ChatBotUI: React.FC;
 //# sourceMappingURL=ChatBotUI.d.ts.map

package/dist/components/ui/ChatBotUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatBotUI.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ChatBotUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqG/B,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EA2c7B,CAAC"}
+{"version":3,"file":"ChatBotUI.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ChatBotUI.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyF/B,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAkU7B,CAAC"}

package/dist/components/ui/ChatBotUI.js

@@ -1,53 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
 import * as React from 'react';
+import { css } from '@emotion/react';
 import { useChatBot } from '../context/ChatBotContext';
 import { PermissionForm } from './PermissionForm';
 import { MessageList } from './MessageList';
 import { MessageInput } from './MessageInput';
 import { PresetMessages } from './PresetMessages';
 import { ModelSelector } from './ModelSelector';
+import { sdkContainer, floatingButton, chatWindow, chatHeader, headerTitle, headerButton, closeButton, modalOverlay, idvBanner, idvBannerTitle, idvBannerText, idvVerifyButton, idvDismissButton, loadingSpinner, successToast, errorToast, warningToast, infoToast, toastCloseButton } from './styles/isolatedStyles';
 // Toast Notification Component
 const ToastNotification = ({ type, message, onClose, isChatOpen = false }) => {
-    const getStyles = () => {
-        const baseStyles = {
-            position: 'fixed',
-            padding: '12px 24px',
-            borderRadius: 8,
-            zIndex: 2000,
-            fontWeight: 600,
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-            transition: 'all 0.3s ease',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '12px',
-            minWidth: '300px',
-            maxWidth: '500px'
-        };
-        // Dynamically adjust position based on chat window state
-        if (isChatOpen) {
-            // When chat window is open, show notification above the chat window
-            Object.assign(baseStyles, {
-                top: 20,
-                right: 20, // Align with the right edge of chat window
-                maxWidth: '480px', // Slightly smaller than chat window width
-            });
-        }
-        else {
-            // When chat window is closed, show notification in bottom right corner
-            Object.assign(baseStyles, {
-                bottom: 20,
-                right: 20,
-            });
-        }
+    const getToastStyles = () => {
+        const baseStyles = css `
+      ${isChatOpen ? css `
+        top: 20px !important;
+        right: 20px !important;
+        max-width: 480px !important;
+      ` : css `
+        bottom: 20px !important;
+        right: 20px !important;
+      `}
+    `;
         switch (type) {
             case 'success':
-                return { ...baseStyles, background: '#4caf50', color: 'white' };
+                return css `${successToast} ${baseStyles}`;
             case 'error':
-                return { ...baseStyles, background: '#f44336', color: 'white' };
+                return css `${errorToast} ${baseStyles}`;
             case 'warning':
-                return { ...baseStyles, background: '#ff9800', color: 'white' };
+                return css `${warningToast} ${baseStyles}`;
             default:
-                return { ...baseStyles, background: '#2196f3', color: 'white' };
+                return css `${infoToast} ${baseStyles}`;
         }
     };
     const getIcon = () => {
@@ -62,19 +45,7 @@ const ToastNotification = ({ type, message, onClose, isChatOpen = false }) => {
                 return 'ℹ️';
         }
     };
-    return (_jsxs("div", { style: getStyles(), children: [_jsx("span", { style: { fontSize: '18px' }, children: getIcon() }), _jsx("span", { style: { flex: 1 }, children: message }), _jsx("button", { onClick: onClose, style: {
-                    background: 'none',
-                    border: 'none',
-                    color: 'white',
-                    fontSize: '18px',
-                    cursor: 'pointer',
-                    padding: '4px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: '4px',
-                    transition: 'background-color 0.2s'
-                }, onMouseOver: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.2)', onMouseOut: (e) => e.currentTarget.style.backgroundColor = 'transparent', children: "\u00D7" })] }));
+    return (_jsxs("div", { css: getToastStyles(), children: [_jsx("span", { css: css `font-size: 18px !important;`, children: getIcon() }), _jsx("span", { css: css `flex: 1 !important;`, children: message }), _jsx("button", { onClick: onClose, css: toastCloseButton, children: "\u00D7" })] }));
 };
 export const ChatBotUI = () => {
     const { isOpen, setIsOpen, showPermissionForm, setShowPermissionForm, notification, setNotification, isAITLoading, hitAddress, walletInfo, onVerifyWallet, props } = useChatBot();
@@ -206,177 +177,51 @@ export const ChatBotUI = () => {
     };
     // Show floating button when chat is closed
     if (!isOpen) {
-        return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: handleOpen, style: {
-                        position: 'fixed',
-                        bottom: '20px',
-                        right: '20px',
-                        backgroundColor: '#007bff',
-                        color: 'white',
-                        border: 'none',
-                        padding: '10px 20px',
-                        borderRadius: '20px',
-                        cursor: 'pointer',
-                        boxShadow: '0 2px 5px rgba(0,0,0,0.2)',
-                        transition: 'all 0.3s ease',
-                        zIndex: 1000,
-                        fontSize: '14px',
-                        fontWeight: '500'
-                    }, onMouseOver: (e) => {
-                        e.currentTarget.style.backgroundColor = '#0056b3';
-                        e.currentTarget.style.transform = 'translateY(-2px)';
-                    }, onMouseOut: (e) => {
-                        e.currentTarget.style.backgroundColor = '#007bff';
-                        e.currentTarget.style.transform = 'translateY(0)';
-                    }, title: "Open AI Agent Chat", children: "AI Agent" }), notification.show && (_jsx(ToastNotification, { type: notification.type, message: notification.message, onClose: handleCloseNotification, isChatOpen: isOpen }))] }));
+        return (_jsxs("div", { css: sdkContainer, children: [_jsx("button", { onClick: handleOpen, css: floatingButton, title: "Open AI Agent Chat", children: "AI Agent" }), notification.show && (_jsx(ToastNotification, { type: notification.type, message: notification.message, onClose: handleCloseNotification, isChatOpen: isOpen }))] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
-                    position: 'fixed',
-                    bottom: '20px',
-                    right: '20px',
-                    width: '500px',
-                    height: '600px',
-                    backgroundColor: 'white',
-                    borderRadius: '10px',
-                    boxShadow: '0 5px 15px rgba(0,0,0,0.2)',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    zIndex: 1001,
-                    overflow: 'hidden'
-                }, children: [_jsxs("div", { style: {
-                            padding: '15px',
-                            backgroundColor: '#007bff',
-                            color: 'white',
-                            borderRadius: '10px 10px 0 0',
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'center'
-                        }, children: [_jsxs("div", { style: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: '10px'
-                                }, children: [_jsx("h3", { style: {
-                                            margin: 0,
-                                            fontSize: '16px',
-                                            fontWeight: '600'
-                                        }, children: "AI Agent" }), _jsx("div", { style: { position: 'relative' }, children: _jsx(ModelSelector, {}) }), isAITLoading && (_jsxs("div", { style: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '5px',
-                                            fontSize: '12px',
-                                            opacity: '0.8'
-                                        }, children: [_jsx("div", { style: {
-                                                    width: '12px',
-                                                    height: '12px',
-                                                    border: '2px solid rgba(255, 255, 255, 0.3)',
-                                                    borderTop: '2px solid white',
-                                                    borderRadius: '50%',
-                                                    animation: 'spin 1s linear infinite'
-                                                } }), "Loading..."] }))] }), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: '10px'
-                                }, children: [_jsx("button", { onClick: handleSettingsClick, style: {
-                                            background: 'none',
-                                            border: 'none',
-                                            color: 'white',
-                                            fontSize: '16px',
-                                            cursor: 'pointer',
-                                            padding: '4px',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            borderRadius: '4px',
-                                            transition: 'background-color 0.2s'
-                                        }, onMouseOver: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.2)', onMouseOut: (e) => e.currentTarget.style.backgroundColor = 'transparent', title: "AIT Settings", children: "\u2699\uFE0F" }), _jsx("button", { onClick: handleClose, style: {
-                                            background: 'none',
-                                            border: 'none',
-                                            color: 'white',
-                                            fontSize: '24px',
-                                            cursor: 'pointer',
-                                            padding: '0',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center'
-                                        }, children: "\u00D7" })] })] }), showIDVSuggestion && hitAddress && !props.requireWalletIDVVerification && !hasBerifymeToken && !isWalletVerifiedWithBerifyme && (_jsxs("div", { "data-idv-banner": true, style: {
-                            backgroundColor: '#fff3cd',
-                            border: '1px solid #ffeaa7',
-                            borderLeft: '4px solid #f39c12',
-                            margin: '16px',
-                            padding: '16px',
-                            borderRadius: '8px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '12px'
-                        }, children: [_jsx("div", { style: {
-                                    fontSize: '20px',
-                                    color: '#f39c12'
-                                }, children: "\uD83D\uDCA1" }), _jsxs("div", { style: { flex: 1 }, children: [_jsx("h5", { style: {
-                                            margin: '0 0 8px 0',
-                                            fontSize: '14px',
-                                            fontWeight: '600',
-                                            color: '#856404'
-                                        }, children: "Recommended: Verify Your Wallet" }), _jsx("p", { style: {
-                                            margin: '0 0 12px 0',
-                                            fontSize: '13px',
-                                            color: '#856404',
-                                            lineHeight: '1.4'
-                                        }, children: "While not required, verifying your wallet with Berify.me provides additional security and trust for your AI agent interactions." }), _jsx("button", { onClick: () => onVerifyWallet('berifyme'), style: {
-                                            padding: '8px 16px',
-                                            backgroundColor: '#f39c12',
-                                            color: 'white',
-                                            border: 'none',
-                                            borderRadius: '6px',
-                                            cursor: 'pointer',
-                                            fontSize: '13px',
-                                            fontWeight: '500',
-                                            transition: 'background-color 0.2s'
-                                        }, onMouseOver: (e) => e.currentTarget.style.backgroundColor = '#e67e22', onMouseOut: (e) => e.currentTarget.style.backgroundColor = '#f39c12', children: "Verify Wallet" })] }), _jsx("button", { onClick: handleDismissIDV, style: {
-                                    background: 'none',
-                                    border: 'none',
-                                    color: '#856404',
-                                    fontSize: '18px',
-                                    cursor: 'pointer',
-                                    padding: '4px',
-                                    borderRadius: '4px',
-                                    transition: 'background-color 0.2s'
-                                }, onMouseOver: (e) => e.currentTarget.style.backgroundColor = 'rgba(133, 100, 4, 0.1)', onMouseOut: (e) => e.currentTarget.style.backgroundColor = 'transparent', title: `Hide for ${Math.floor((props.idvBannerDismissSeconds || 86400) / 3600)} hours`, children: "\u00D7" })] })), !showIDVSuggestion && dismissUntil && timeRemaining && (_jsxs("div", { style: {
-                            backgroundColor: '#f8f9fa',
-                            border: '1px solid #e9ecef',
-                            margin: '16px',
-                            padding: '12px',
-                            borderRadius: '8px',
-                            textAlign: 'center',
-                            fontSize: '13px',
-                            color: '#6c757d'
-                        }, children: [_jsxs("span", { children: ["\uD83D\uDCA1 IDV suggestion hidden. Will show again in ", timeRemaining] }), _jsx("button", { onClick: () => {
+    return (_jsxs("div", { css: sdkContainer, children: [_jsxs("div", { css: chatWindow, children: [_jsxs("div", { css: chatHeader, children: [_jsxs("div", { css: css `
+            display: flex !important;
+            align-items: center !important;
+            gap: 10px !important;
+          `, children: [_jsx("h3", { css: headerTitle, children: "AI Agent" }), _jsx("div", { css: css `position: relative !important;`, children: _jsx(ModelSelector, {}) }), isAITLoading && (_jsxs("div", { css: css `
+                display: flex !important;
+                align-items: center !important;
+                gap: 5px !important;
+                font-size: 12px !important;
+                opacity: 0.8 !important;
+              `, children: [_jsx("div", { css: loadingSpinner }), "Loading..."] }))] }), _jsxs("div", { css: css `
+            display: flex !important;
+            align-items: center !important;
+            gap: 10px !important;
+          `, children: [_jsx("button", { onClick: handleSettingsClick, css: headerButton, title: "AIT Settings", children: "\u2699\uFE0F" }), _jsx("button", { onClick: handleClose, css: closeButton, children: "\u00D7" })] })] }), showIDVSuggestion && hitAddress && !props.requireWalletIDVVerification && !hasBerifymeToken && !isWalletVerifiedWithBerifyme && (_jsxs("div", { "data-idv-banner": true, css: idvBanner, children: [_jsx("div", { css: css `
+              font-size: 20px !important;
+              color: #f39c12 !important;
+            `, children: "\uD83D\uDCA1" }), _jsxs("div", { css: css `flex: 1 !important;`, children: [_jsx("h5", { css: idvBannerTitle, children: "Recommended: Verify Your Wallet" }), _jsx("p", { css: idvBannerText, children: "While not required, verifying your wallet with Berify.me provides additional security and trust for your AI agent interactions." }), _jsx("button", { onClick: () => onVerifyWallet('berifyme'), css: idvVerifyButton, children: "Verify Wallet" })] }), _jsx("button", { onClick: handleDismissIDV, css: idvDismissButton, title: `Hide for ${Math.floor((props.idvBannerDismissSeconds || 86400) / 3600)} hours`, children: "\u00D7" })] })), !showIDVSuggestion && dismissUntil && timeRemaining && (_jsxs("div", { css: css `
+            background-color: #f8f9fa !important;
+            border: 1px solid #e9ecef !important;
+            margin: 16px !important;
+            padding: 12px !important;
+            border-radius: 8px !important;
+            text-align: center !important;
+            font-size: 13px !important;
+            color: #6c757d !important;
+          `, children: [_jsxs("span", { children: ["\uD83D\uDCA1 IDV suggestion hidden. Will show again in ", timeRemaining] }), _jsx("button", { onClick: () => {
                                     localStorage.removeItem('idv-suggestion-dismissed');
                                     setShowIDVSuggestion(true);
                                     setDismissUntil(null);
                                     setTimeRemaining('');
-                                }, style: {
-                                    background: 'none',
-                                    border: 'none',
-                                    color: '#007bff',
-                                    fontSize: '12px',
-                                    cursor: 'pointer',
-                                    marginLeft: '8px',
-                                    textDecoration: 'underline'
-                                }, title: "Show now", children: "Show now" })] })), _jsx(MessageList, {}), _jsx(PresetMessages, {}), _jsx(MessageInput, {})] }), showPermissionForm && (_jsx("div", { style: {
-                    position: 'fixed',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    zIndex: 1002,
-                    padding: '20px'
-                }, onClick: (e) => {
+                                }, css: css `
+                background: none !important;
+                border: none !important;
+                color: #007bff !important;
+                font-size: 12px !important;
+                cursor: pointer !important;
+                margin-left: 8px !important;
+                text-decoration: underline !important;
+              `, title: "Show now", children: "Show now" })] })), _jsx(MessageList, {}), _jsx(PresetMessages, {}), _jsx(MessageInput, {})] }), showPermissionForm && (_jsx("div", { css: modalOverlay, onClick: (e) => {
                     // Close modal when clicking on background
                     if (e.target === e.currentTarget) {
                         setShowPermissionForm(false);
                     }
-                }, children: _jsx(PermissionForm, { onClose: () => setShowPermissionForm(false), onOpen: () => setShowPermissionForm(true) }) })), notification.show && (_jsx(ToastNotification, { type: notification.type, message: notification.message, onClose: handleCloseNotification, isChatOpen: isOpen }))] }));
+                }, children: _jsx(PermissionForm, { onClose: () => setShowPermissionForm(false) }) })), notification.show && (_jsx(ToastNotification, { type: notification.type, message: notification.message, onClose: handleCloseNotification, isChatOpen: isOpen }))] }));
 };

package/dist/components/ui/MessageInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MessageInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAmGhC,CAAC"}
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MessageInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAiGhC,CAAC"}

package/dist/components/ui/MessageInput.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
 import MicIcon from '@mui/icons-material/Mic';
 import MicOffIcon from '@mui/icons-material/MicOff';
 import { IconButton, InputBase } from '@mui/material';
+import { css } from '@emotion/react';
 import { useChatBot } from '../context/ChatBotContext';
+import { actionButton } from './styles/isolatedStyles';
 export const MessageInput = () => {
     const { inputValue, setInputValue, isLoading, isAITLoading, handleSubmit, isRecording, startRecording, stopRecording, textInputRef, props: { placeholder = 'Type a message...' } } = useChatBot();
     const isDisabled = isLoading || isAITLoading;
@@ -13,42 +16,42 @@ export const MessageInput = () => {
             handleSubmit(e);
         }
     };
-    return (_jsxs("div", { style: {
-            padding: '15px',
-            display: 'flex',
-            gap: '10px',
-            borderTop: '1px solid #eee'
-        }, children: [_jsx(InputBase, { value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyPress: handleKeyPress, placeholder: inputPlaceholder, disabled: isDisabled, fullWidth: true, inputProps: {
+    return (_jsxs("div", { css: css `
+      padding: 15px !important;
+      display: flex !important;
+      gap: 10px !important;
+      border-top: 1px solid #eee !important;
+    `, children: [_jsx(InputBase, { value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyPress: handleKeyPress, placeholder: inputPlaceholder, disabled: isDisabled, fullWidth: true, inputProps: {
                     ref: textInputRef
-                }, endAdornment: _jsx(IconButton, { onClick: () => isRecording ? stopRecording() : startRecording(), disabled: isDisabled, children: isRecording ? _jsx(MicIcon, {}) : _jsx(MicOffIcon, {}) }), onFocus: () => stopRecording(), style: {
-                    flex: 1,
-                    padding: '10px',
-                    border: '1px solid #ddd',
-                    borderRadius: '20px',
-                    outline: 'none',
-                    fontSize: '14px',
-                    backgroundColor: isDisabled ? '#f8f9fa' : '#fff'
-                } }), _jsxs("button", { onClick: (e) => handleSubmit(e), disabled: isDisabled || !inputValue.trim(), style: {
-                    backgroundColor: isDisabled || !inputValue.trim() ? '#e9ecef' : '#007bff',
-                    color: isDisabled || !inputValue.trim() ? '#6c757d' : 'white',
-                    border: 'none',
-                    padding: '10px 20px',
-                    borderRadius: '20px',
-                    cursor: isDisabled || !inputValue.trim() ? 'not-allowed' : 'pointer',
-                    fontSize: '14px',
-                    fontWeight: '500',
-                    transition: 'background-color 0.3s',
-                    position: 'relative',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center'
-                }, onMouseOver: (e) => {
-                    if (!isDisabled && inputValue.trim()) {
-                        e.currentTarget.style.backgroundColor = '#0056b3';
-                    }
-                }, onMouseOut: (e) => {
-                    if (!isDisabled && inputValue.trim()) {
-                        e.currentTarget.style.backgroundColor = '#007bff';
-                    }
-                }, children: ["Send", (isLoading || isAITLoading) && (_jsx("span", { style: { marginLeft: 8, display: 'flex', alignItems: 'center' }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 50 50", children: _jsx("circle", { cx: "25", cy: "25", r: "20", fill: "none", stroke: "#fff", strokeWidth: "4", strokeDasharray: "31.4 31.4", strokeLinecap: "round", children: _jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "1s", repeatCount: "indefinite" }) }) }) }))] })] }));
+                }, endAdornment: _jsx(IconButton, { onClick: () => isRecording ? stopRecording() : startRecording(), disabled: isDisabled, children: isRecording ? _jsx(MicIcon, {}) : _jsx(MicOffIcon, {}) }), onFocus: () => stopRecording(), css: css `
+          flex: 1 !important;
+          padding: 10px !important;
+          border: 1px solid #ddd !important;
+          border-radius: 20px !important;
+          outline: none !important;
+          font-size: 14px !important;
+          background-color: ${isDisabled ? '#f8f9fa' : '#fff'} !important;
+        ` }), _jsxs("button", { onClick: (e) => handleSubmit(e), disabled: isDisabled || !inputValue.trim(), css: css `
+          ${actionButton}
+          padding: 10px 20px !important;
+          border-radius: 20px !important;
+          position: relative !important;
+          display: flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+          
+          &:disabled {
+            background-color: #e9ecef !important;
+            color: #6c757d !important;
+            cursor: not-allowed !important;
+          }
+          
+          &:hover:not(:disabled) {
+            background-color: #0056b3 !important;
+          }
+        `, children: ["Send", (isLoading || isAITLoading) && (_jsx("span", { css: css `
+            margin-left: 8px !important;
+            display: flex !important;
+            align-items: center !important;
+          `, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 50 50", children: _jsx("circle", { cx: "25", cy: "25", r: "20", fill: "none", stroke: "#fff", strokeWidth: "4", strokeDasharray: "31.4 31.4", strokeLinecap: "round", children: _jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "1s", repeatCount: "indefinite" }) }) }) }))] })] }));
 };

package/dist/components/ui/MessageList.d.ts

@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import * as React from 'react';
 export declare const MessageList: React.FC;
 //# sourceMappingURL=MessageList.d.ts.map

package/dist/components/ui/MessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MessageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAoM/B,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MessageList.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAiI/B,CAAC"}