@bytexbyte/nxtlinq-ai-agent-sdk 1.2.0 → 1.2.2

package/README.md

@@ -17,6 +17,7 @@ A powerful SDK for building intelligent conversation applications with Nxtlinq A
 - 🔑 Permission-based access control
 - 🔍 Enhanced error handling and debugging
 - ⚡ Improved async operation handling
+- 🔔 Unified notification system with Modal prompts
 
 ## Installation
 
@@ -70,6 +71,8 @@ function App() {
 }
 ```
 
+> **Note**: The SDK now includes a unified notification system. All success, error, warning, and info messages are displayed as Modal prompts in the top-right corner, providing a consistent and non-intrusive user experience.
+
 ## Berify.me Integration
 
 The SDK supports Berify.me wallet verification for enhanced security:
@@ -130,6 +133,17 @@ function App() {
 | retryDelay | number | No | Delay between retries in milliseconds (default: 1000) |
 | permissionGroup | string | No | Permission group name for filtering permissions |
 
+### Notification System
+
+The SDK includes a unified notification system that displays Modal prompts for various operations:
+
+- **Success Notifications**: Green modal for successful operations (auto-hide after 3 seconds)
+- **Error Notifications**: Red modal for error messages (auto-hide after 5 seconds)
+- **Warning Notifications**: Orange modal for warnings (auto-hide after 4 seconds)
+- **Info Notifications**: Blue modal for informational messages (auto-hide after 3 seconds)
+
+All notifications appear in the top-right corner and can be manually dismissed by clicking the × button.
+
 ## Types
 
 ### Message

package/dist/components/ChatBot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatBot.d.ts","sourceRoot":"","sources":["../../src/components/ChatBot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,OAAO,EAAkC,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAC1D,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC;QAC7B,KAAK,EAAE,MAAM,CAAC;KACf,GAAG,SAAS,CAAC,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA0VD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA08B1C,CAAC"}
+{"version":3,"file":"ChatBot.d.ts","sourceRoot":"","sources":["../../src/components/ChatBot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,OAAO,EAAkC,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAC1D,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC;QAC7B,KAAK,EAAE,MAAM,CAAC;KACf,GAAG,SAAS,CAAC,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA8hBD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAmjC1C,CAAC"}

package/dist/components/ChatBot.js

@@ -5,8 +5,64 @@ import { createNxtlinqApi } from '../api/nxtlinq-api';
 import stringify from 'fast-json-stable-stringify';
 import metakeepClient from '../core/metakeepClient';
 import useLocalStorage from '../core/lib/useLocalStorage';
-const PermissionForm = ({ hitAddress, permissions, setPermissions, setIsDisabled, onClose, onSave, onConnectWallet, onSignIn, isNeedSignInWithWallet, walletInfo, onVerifyWallet, serviceId, nxtlinqApi, permissionGroup }) => {
+const NotificationModal = ({ notification, onClose }) => {
+    const getStyles = () => {
+        const baseStyles = {
+            position: 'fixed',
+            bottom: 20,
+            right: 20,
+            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'
+        };
+        switch (notification.type) {
+            case 'success':
+                return { ...baseStyles, background: '#4caf50', color: 'white' };
+            case 'error':
+                return { ...baseStyles, background: '#f44336', color: 'white' };
+            case 'warning':
+                return { ...baseStyles, background: '#ff9800', color: 'white' };
+            default:
+                return { ...baseStyles, background: '#2196f3', color: 'white' };
+        }
+    };
+    const getIcon = () => {
+        switch (notification.type) {
+            case 'success':
+                return '✅';
+            case 'error':
+                return '❌';
+            case 'warning':
+                return '⚠️';
+            default:
+                return 'ℹ️';
+        }
+    };
+    return (notification.show && (_jsxs("div", { style: getStyles(), children: [_jsx("span", { style: { fontSize: '18px' }, children: getIcon() }), _jsx("span", { style: { flex: 1 }, children: notification.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" })] })));
+};
+const PermissionForm = ({ hitAddress, permissions, setPermissions, setIsDisabled, onClose, onSave, onConnectWallet, onSignIn, isNeedSignInWithWallet, walletInfo, onVerifyWallet, serviceId, nxtlinqApi, permissionGroup, isAITLoading, isWalletLoading = false }) => {
     const [availablePermissions, setAvailablePermissions] = React.useState([]);
+    const [isSaving, setIsSaving] = React.useState(false);
     const fetchAvailablePermissions = async () => {
         if (!serviceId)
             return;
@@ -28,7 +84,72 @@ const PermissionForm = ({ hitAddress, permissions, setPermissions, setIsDisabled
     React.useEffect(() => {
         fetchAvailablePermissions();
     }, [serviceId, nxtlinqApi, permissionGroup]);
-    const isWalletVerified = walletInfo?.id || !isNeedSignInWithWallet;
+    const isWalletVerified = Boolean(walletInfo?.id);
+    const handleSave = async () => {
+        setIsSaving(true);
+        try {
+            await onSave();
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    // Show loading state while checking wallet status
+    if (isWalletLoading) {
+        return (_jsxs("div", { style: {
+                backgroundColor: 'white',
+                padding: '24px',
+                borderRadius: '12px',
+                width: '480px',
+                maxWidth: '90%',
+                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
+            }, children: [_jsxs("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        marginBottom: '24px'
+                    }, children: [_jsx("h3", { style: {
+                                margin: 0,
+                                fontSize: '20px',
+                                fontWeight: '600',
+                                color: '#1a1a1a'
+                            }, children: "AIT Settings" }), _jsx("button", { onClick: onClose, style: {
+                                background: 'none',
+                                border: 'none',
+                                fontSize: '24px',
+                                cursor: 'pointer',
+                                color: '#666',
+                                padding: '4px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center'
+                            }, children: "\u00D7" })] }), _jsxs("div", { style: { textAlign: 'center', padding: '32px 0' }, children: [_jsx("div", { style: {
+                                width: '64px',
+                                height: '64px',
+                                margin: '0 auto 16px',
+                                backgroundColor: '#f5f5f5',
+                                borderRadius: '50%',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center'
+                            }, children: _jsx("div", { style: {
+                                    width: '32px',
+                                    height: '32px',
+                                    border: '3px solid #e3e3e3',
+                                    borderTop: '3px solid #007bff',
+                                    borderRadius: '50%',
+                                    animation: 'spin 1s linear infinite'
+                                } }) }), _jsx("p", { style: {
+                                marginBottom: '24px',
+                                fontSize: '16px',
+                                color: '#666'
+                            }, children: "Checking wallet status..." })] }), _jsx("style", { children: `
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        ` })] }));
+    }
     return (_jsxs("div", { style: {
             backgroundColor: 'white',
             padding: '24px',
@@ -147,7 +268,14 @@ const PermissionForm = ({ hitAddress, permissions, setPermissions, setIsDisabled
                                     marginBottom: '12px',
                                     fontSize: '16px',
                                     color: '#666'
-                                }, children: "Permissions" }), _jsx("div", { style: {
+                                }, children: "Permissions" }), isAITLoading ? (_jsx("div", { style: {
+                                    backgroundColor: '#f8f9fa',
+                                    padding: '16px',
+                                    borderRadius: '8px',
+                                    border: '1px solid #e9ecef',
+                                    textAlign: 'center',
+                                    color: '#666'
+                                }, children: "Loading permissions..." })) : (_jsx("div", { style: {
                                     backgroundColor: '#f8f9fa',
                                     padding: '16px',
                                     borderRadius: '8px',
@@ -156,25 +284,36 @@ const PermissionForm = ({ hitAddress, permissions, setPermissions, setIsDisabled
                                             display: 'flex',
                                             alignItems: 'center',
                                             gap: '12px',
-                                            cursor: 'pointer',
+                                            cursor: isAITLoading ? 'not-allowed' : 'pointer',
                                             padding: '8px',
                                             borderRadius: '6px',
-                                            transition: 'background-color 0.2s'
-                                        }, onMouseOver: (e) => e.currentTarget.style.backgroundColor = '#e9ecef', onMouseOut: (e) => e.currentTarget.style.backgroundColor = 'transparent', children: [_jsx("input", { type: "checkbox", checked: permissions.includes(permission.label), onChange: () => {
-                                                    const newPermissions = permissions.includes(permission.label)
-                                                        ? permissions.filter(p => p !== permission.label)
-                                                        : [...permissions, permission.label].sort();
-                                                    setPermissions(newPermissions);
-                                                    setIsDisabled(false);
-                                                }, style: {
+                                            transition: 'background-color 0.2s',
+                                            opacity: isAITLoading ? 0.6 : 1
+                                        }, onMouseOver: (e) => {
+                                            if (!isAITLoading) {
+                                                e.currentTarget.style.backgroundColor = '#e9ecef';
+                                            }
+                                        }, onMouseOut: (e) => {
+                                            if (!isAITLoading) {
+                                                e.currentTarget.style.backgroundColor = 'transparent';
+                                            }
+                                        }, children: [_jsx("input", { type: "checkbox", checked: permissions.includes(permission.label), onChange: () => {
+                                                    if (!isAITLoading) {
+                                                        const newPermissions = permissions.includes(permission.label)
+                                                            ? permissions.filter(p => p !== permission.label)
+                                                            : [...permissions, permission.label].sort();
+                                                        setPermissions(newPermissions);
+                                                        setIsDisabled(false);
+                                                    }
+                                                }, disabled: isAITLoading, style: {
                                                     margin: 0,
                                                     width: '18px',
                                                     height: '18px',
-                                                    cursor: 'pointer'
+                                                    cursor: isAITLoading ? 'not-allowed' : 'pointer'
                                                 } }), _jsx("span", { style: {
                                                     fontSize: '14px',
                                                     color: '#333'
-                                                }, children: permission.label })] }) }, permission.id))) })] }), _jsxs("div", { style: {
+                                                }, children: permission.label })] }) }, permission.id))) }))] }), _jsxs("div", { style: {
                             display: 'flex',
                             justifyContent: 'flex-end',
                             gap: '12px',
@@ -196,25 +335,25 @@ const PermissionForm = ({ hitAddress, permissions, setPermissions, setIsDisabled
                                 }, onMouseOut: (e) => {
                                     e.currentTarget.style.backgroundColor = '#f8f9fa';
                                     e.currentTarget.style.borderColor = '#dee2e6';
-                                }, children: "Cancel" }), _jsx("button", { onClick: onSave, disabled: permissions.length === 0, style: {
+                                }, children: "Cancel" }), _jsx("button", { onClick: handleSave, disabled: permissions.length === 0 || isSaving || isAITLoading, style: {
                                     padding: '10px 20px',
-                                    backgroundColor: permissions.length === 0 ? '#e9ecef' : '#007bff',
-                                    color: 'white',
+                                    backgroundColor: permissions.length === 0 || isSaving || isAITLoading ? '#e9ecef' : '#007bff',
+                                    color: permissions.length === 0 || isSaving || isAITLoading ? '#6c757d' : 'white',
                                     border: 'none',
                                     borderRadius: '8px',
-                                    cursor: permissions.length === 0 ? 'not-allowed' : 'pointer',
+                                    cursor: permissions.length === 0 || isSaving || isAITLoading ? 'not-allowed' : 'pointer',
                                     fontSize: '14px',
                                     fontWeight: '500',
                                     transition: 'background-color 0.2s'
                                 }, onMouseOver: (e) => {
-                                    if (permissions.length > 0) {
+                                    if (permissions.length > 0 && !isSaving && !isAITLoading) {
                                         e.currentTarget.style.backgroundColor = '#0056b3';
                                     }
                                 }, onMouseOut: (e) => {
-                                    if (permissions.length > 0) {
+                                    if (permissions.length > 0 && !isSaving && !isAITLoading) {
                                         e.currentTarget.style.backgroundColor = '#007bff';
                                     }
-                                }, children: "Save" })] })] }))] }));
+                                }, children: isSaving ? 'Saving...' : 'Save' })] })] }))] }));
 };
 export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], placeholder = 'Type a message...', className = '', maxRetries = 3, retryDelay = 1000, serviceId, apiKey, apiSecret, onVerifyWallet, permissionGroup }) => {
     const [messages, setMessages] = React.useState([]);
@@ -226,14 +365,43 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
     const [permissions, setPermissions] = React.useState([]);
     const [availablePermissions, setAvailablePermissions] = React.useState([]);
     const [showPermissionForm, setShowPermissionForm] = React.useState(false);
-    const [success, setSuccess] = React.useState(false);
+    const [isPermissionFormOpen, setIsPermissionFormOpen] = React.useState(false);
+    const [isAITLoading, setIsAITLoading] = React.useState(false);
     const messagesEndRef = React.useRef(null);
     const [isDisabled, setIsDisabled] = React.useState(true);
     const [signer, setSigner] = React.useState(null);
     const [walletInfo, setWalletInfo] = React.useState(null);
     const verifyWalletBtnRef = React.useRef(null);
     const [nxtlinqAITServiceAccessToken, setNxtlinqAITServiceAccessToken] = useLocalStorage('nxtlinqAITServiceAccessToken', '');
+    const [isWalletLoading, setIsWalletLoading] = React.useState(false);
+    const [notification, setNotification] = React.useState({
+        show: false,
+        type: 'info',
+        message: '',
+        autoHide: true,
+        duration: 5000
+    });
     const nxtlinqApi = React.useMemo(() => createNxtlinqApi(apiKey, apiSecret), [apiKey, apiSecret]);
+    // Unified notification functions
+    const showNotification = (type, message, duration = 5000) => {
+        setNotification({
+            show: true,
+            type,
+            message,
+            autoHide: true,
+            duration
+        });
+        // Auto-hide
+        if (duration > 0) {
+            setTimeout(() => {
+                setNotification(prev => ({ ...prev, show: false }));
+            }, duration);
+        }
+    };
+    const showSuccess = (message) => showNotification('success', message, 3000);
+    const showError = (message) => showNotification('error', message, 5000);
+    const showWarning = (message) => showNotification('warning', message, 4000);
+    const showInfo = (message) => showNotification('info', message, 3000);
     const fetchAvailablePermissions = async () => {
         if (!serviceId)
             return;
@@ -252,7 +420,7 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
             console.error('Error fetching permissions:', error);
         }
     };
-    const refreshAIT = async () => {
+    const refreshAIT = async (forceUpdatePermissions = false) => {
         console.log('refreshAIT called');
         console.log('hitAddress:', hitAddress);
         console.log('nxtlinqAITServiceAccessToken:', nxtlinqAITServiceAccessToken);
@@ -261,6 +429,7 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
             setPermissions([]);
             return;
         }
+        setIsAITLoading(true);
         try {
             const response = await nxtlinqApi.ait.getAITByServiceIdAndController({
                 serviceId,
@@ -274,13 +443,19 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
             }
             console.log('AIT response:', response);
             setAit(response);
-            setPermissions(response.metadata?.permissions || []);
+            // Update permissions if form is not open OR if force update is requested
+            if (!isPermissionFormOpen || forceUpdatePermissions) {
+                setPermissions(response.metadata?.permissions || []);
+            }
         }
         catch (error) {
             console.error('Failed to fetch AIT:', error);
             setAit(null);
             setPermissions([]);
         }
+        finally {
+            setIsAITLoading(false);
+        }
     };
     React.useEffect(() => {
         console.log('hitAddress:', hitAddress);
@@ -325,6 +500,7 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
     const handleVerifySuccess = (address) => {
         localStorage.setItem(`wallet_verified_${address}`, 'true');
         const getWalletInfo = async () => {
+            setIsWalletLoading(true);
             try {
                 const token = JSON.parse(localStorage.getItem('nxtlinqAITServiceAccessToken') || '');
                 const walletResponse = await nxtlinqApi.wallet.getWallet({ address }, token);
@@ -344,6 +520,9 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
             catch (error) {
                 console.error('Failed to update wallet info after verification:', error);
             }
+            finally {
+                setIsWalletLoading(false);
+            }
         };
         getWalletInfo();
     };
@@ -355,16 +534,25 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
             if (isNeedSignInWithWallet) {
                 return;
             }
-            const getWalletResponse = await nxtlinqApi.wallet.getWallet({ address: hitAddress }, nxtlinqAITServiceAccessToken);
-            if ('error' in getWalletResponse) {
-                if (getWalletResponse.error === 'Wallet not found') {
-                    console.log('Wallet not found - this is expected for new users');
+            setIsWalletLoading(true);
+            try {
+                const getWalletResponse = await nxtlinqApi.wallet.getWallet({ address: hitAddress }, nxtlinqAITServiceAccessToken);
+                if ('error' in getWalletResponse) {
+                    if (getWalletResponse.error === 'Wallet not found') {
+                        console.log('Wallet not found - this is expected for new users');
+                        return;
+                    }
+                    console.error(getWalletResponse.error);
                     return;
                 }
-                console.error(getWalletResponse.error);
-                return;
+                setWalletInfo(getWalletResponse);
+            }
+            catch (error) {
+                console.error('Error getting wallet info:', error);
+            }
+            finally {
+                setIsWalletLoading(false);
             }
-            setWalletInfo(getWalletResponse);
         };
         getWalletInfo();
     }, [hitAddress, isNeedSignInWithWallet]);
@@ -377,7 +565,7 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
             signer: !!signer
         });
         if (!hitAddress) {
-            alert('Please connect your wallet first.');
+            showError('Please connect your wallet first.');
             return;
         }
         try {
@@ -403,19 +591,29 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
                         if ('error' in verifyWalletResponse) {
                             if (verifyWalletResponse.error === 'Wallet already exists') {
                                 // If wallet exists, get wallet info directly
-                                const walletResponse = await nxtlinqApi.wallet.getWallet({ address }, token);
-                                if (!('error' in walletResponse)) {
-                                    setWalletInfo(walletResponse);
-                                    const aitResponse = await nxtlinqApi.ait.getAITByServiceIdAndController({ serviceId, controller: address }, token);
-                                    if (!('error' in aitResponse)) {
-                                        setAit(aitResponse);
+                                setIsWalletLoading(true);
+                                try {
+                                    const walletResponse = await nxtlinqApi.wallet.getWallet({ address }, token);
+                                    if (!('error' in walletResponse)) {
+                                        setWalletInfo(walletResponse);
+                                        const aitResponse = await nxtlinqApi.ait.getAITByServiceIdAndController({ serviceId, controller: address }, token);
+                                        if (!('error' in aitResponse)) {
+                                            setAit(aitResponse);
+                                        }
                                     }
                                 }
-                                // Clean up token from URL
+                                finally {
+                                    setIsWalletLoading(false);
+                                }
+                                // Clean up URL parameters after wallet verification
                                 if (typeof window !== 'undefined') {
                                     try {
                                         const url = new URL(window.location.href);
+                                        // Clean up all Berify.me related parameters
                                         url.searchParams.delete('token');
+                                        url.searchParams.delete('isAutoConnect');
+                                        url.searchParams.delete('method');
+                                        url.searchParams.delete('returnUrl');
                                         window.history.replaceState({}, '', url.toString());
                                     }
                                     catch (e) {
@@ -423,28 +621,40 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
                                     }
                                 }
                                 setIsLoading(false);
+                                // Use Modal notification instead of ChatBot message
+                                showSuccess('Wallet verification completed successfully! Your wallet is now verified and ready to use.');
                                 // Refresh AIT after wallet verification
                                 refreshAIT();
                                 return { token, hitAddress: address };
                             }
-                            alert(verifyWalletResponse.error);
+                            showError(verifyWalletResponse.error);
                             setIsLoading(false);
                             return;
                         }
                         // Verification successful, get wallet info
-                        const walletResponse = await nxtlinqApi.wallet.getWallet({ address }, token);
-                        if (!('error' in walletResponse)) {
-                            setWalletInfo(walletResponse);
-                            const aitResponse = await nxtlinqApi.ait.getAITByServiceIdAndController({ serviceId, controller: address }, token);
-                            if (!('error' in aitResponse)) {
-                                setAit(aitResponse);
+                        setIsWalletLoading(true);
+                        try {
+                            const walletResponse = await nxtlinqApi.wallet.getWallet({ address }, token);
+                            if (!('error' in walletResponse)) {
+                                setWalletInfo(walletResponse);
+                                const aitResponse = await nxtlinqApi.ait.getAITByServiceIdAndController({ serviceId, controller: address }, token);
+                                if (!('error' in aitResponse)) {
+                                    setAit(aitResponse);
+                                }
                             }
                         }
-                        // Clean up token from URL
+                        finally {
+                            setIsWalletLoading(false);
+                        }
+                        // Clean up URL parameters after wallet verification
                         if (typeof window !== 'undefined') {
                             try {
                                 const url = new URL(window.location.href);
+                                // Clean up all Berify.me related parameters
                                 url.searchParams.delete('token');
+                                url.searchParams.delete('isAutoConnect');
+                                url.searchParams.delete('method');
+                                url.searchParams.delete('returnUrl');
                                 window.history.replaceState({}, '', url.toString());
                             }
                             catch (e) {
@@ -452,6 +662,8 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
                             }
                         }
                         setIsLoading(false);
+                        // Use Modal notification instead of ChatBot message
+                        showSuccess('Wallet verification completed successfully! Your wallet is now verified and ready to use.');
                         // Refresh AIT after wallet verification
                         refreshAIT();
                         return { token, hitAddress: address };
@@ -466,7 +678,7 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
                             msg = error.message;
                         }
                         console.error('Wallet verification failed:', error);
-                        alert(msg);
+                        showError(msg);
                         setIsLoading(false);
                         throw error;
                     }
@@ -478,7 +690,7 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
         catch (error) {
             console.error('Failed to verify wallet:', error);
             setIsLoading(false);
-            alert('Failed to verify wallet. Please try again.');
+            showError('Failed to verify wallet. Please try again.');
             throw error;
         }
     };
@@ -559,12 +771,7 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
                 }
                 else {
                     // User is already signed in
-                    setMessages(prev => [...prev, {
-                            id: Date.now().toString(),
-                            content: 'Successfully connected your HIT wallet. You are already signed in and can use the AI agent.',
-                            role: 'assistant',
-                            timestamp: new Date().toISOString()
-                        }]);
+                    showSuccess('Successfully connected your HIT wallet. You are already signed in and can use the AI agent.');
                 }
             }
             return userAddress;
@@ -579,17 +786,17 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
     }, [nxtlinqAITServiceAccessToken, refreshAIT, isNeedSignInWithWallet]);
     const signInWallet = async (autoShowSuccessMessage = true) => {
         if (!hitAddress) {
-            alert('Please connect your wallet first.');
+            showError('Please connect your wallet first.');
             return;
         }
         if (!signer) {
-            alert('Please connect your wallet first.');
+            showError('Please connect your wallet first.');
             return;
         }
         try {
             const nonceResponse = await nxtlinqApi.auth.getNonce({ address: hitAddress });
             if ('error' in nonceResponse) {
-                alert(nonceResponse.error);
+                showError(nonceResponse.error);
                 return;
             }
             const payload = {
@@ -604,26 +811,21 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
                 signature
             });
             if ('error' in response) {
-                alert(response.error);
+                showError(response.error);
                 return;
             }
             const { accessToken } = response;
             setNxtlinqAITServiceAccessToken(accessToken);
             // Auto-show connected message after signing in
             if (autoShowSuccessMessage) {
-                setMessages(prev => [...prev, {
-                        id: Date.now().toString(),
-                        content: 'Successfully signed in with your HIT wallet. You can now use the AI agent.',
-                        role: 'assistant',
-                        timestamp: new Date().toISOString()
-                    }]);
+                showSuccess('Successfully signed in with your HIT wallet. You can now use the AI agent.');
             }
             // Refresh AIT after signing in
             refreshAIT();
         }
         catch (error) {
             console.error('Failed to sign in:', error);
-            alert('Failed to sign in. Please try again.');
+            showError('Failed to sign in. Please try again.');
         }
     };
     const hasPermission = async (toolName) => {
@@ -637,7 +839,7 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
                 }]);
             return false;
         }
-        // Check if user has signed in with wallet
+        // Check if user has signed in with wallet and token is valid
         if (!nxtlinqAITServiceAccessToken) {
             setMessages(prev => [...prev, {
                     id: Date.now().toString(),
@@ -648,6 +850,51 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
                 }]);
             return false;
         }
+        // Validate token - check if it's expired or for different address
+        try {
+            const payload = JSON.parse(atob(nxtlinqAITServiceAccessToken.split('.')[1]));
+            const exp = payload.exp * 1000; // Convert to milliseconds
+            const now = Date.now();
+            if (exp < now) {
+                // Clear invalid token
+                setNxtlinqAITServiceAccessToken('');
+                setMessages(prev => [...prev, {
+                        id: Date.now().toString(),
+                        content: 'Your wallet session has expired. Please sign in again.',
+                        role: 'assistant',
+                        timestamp: new Date().toISOString(),
+                        button: 'signIn'
+                    }]);
+                return false;
+            }
+            // Check if the token's payload has the same address as the wallet address
+            const address = payload.address;
+            if (address !== hitAddress) {
+                // Clear mismatched token
+                setNxtlinqAITServiceAccessToken('');
+                setMessages(prev => [...prev, {
+                        id: Date.now().toString(),
+                        content: 'Wallet address mismatch. Please sign in with the correct wallet.',
+                        role: 'assistant',
+                        timestamp: new Date().toISOString(),
+                        button: 'signIn'
+                    }]);
+                return false;
+            }
+        }
+        catch (error) {
+            console.error('Error parsing token:', error);
+            // Clear invalid token
+            setNxtlinqAITServiceAccessToken('');
+            setMessages(prev => [...prev, {
+                    id: Date.now().toString(),
+                    content: 'Invalid wallet session. Please sign in again.',
+                    role: 'assistant',
+                    timestamp: new Date().toISOString(),
+                    button: 'signIn'
+                }]);
+            return false;
+        }
         if (!ait) {
             setMessages(prev => [...prev, {
                     id: Date.now().toString(),
@@ -813,20 +1060,22 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
         setAit(aitInfo);
     };
     const savePermissions = async () => {
-        setIsLoading(true);
         setIsDisabled(true);
         try {
             await generateAndRegisterAIT();
-            setIsLoading(false);
-            setSuccess(true);
+            // Use Modal notification instead of ChatBot message
+            showSuccess('AIT permissions saved successfully! You can now use the AI agent with your configured permissions.');
             setShowPermissionForm(false);
+            setIsPermissionFormOpen(false);
         }
         catch (error) {
             console.error('Failed to generate AIT:', error);
-            setIsLoading(false);
             setIsDisabled(false);
             if (error instanceof Error) {
-                alert(error.message);
+                showError(error.message);
+            }
+            else {
+                showError('Failed to save permissions. Please try again.');
             }
         }
     };
@@ -872,7 +1121,12 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
                             display: 'flex',
                             justifyContent: 'space-between',
                             alignItems: 'center'
-                        }, children: [_jsx("h3", { style: { margin: 0 }, children: "AI Agent" }), _jsxs("div", { style: { display: 'flex', gap: '10px' }, children: [_jsx("button", { onClick: () => setShowPermissionForm(true), style: {
+                        }, children: [_jsx("h3", { style: { margin: 0 }, children: "AI Agent" }), _jsxs("div", { style: { display: 'flex', gap: '10px' }, children: [_jsx("button", { onClick: async () => {
+                                            setShowPermissionForm(true);
+                                            setIsPermissionFormOpen(true);
+                                            // Force refresh AIT data when opening the form to show latest permissions
+                                            await refreshAIT(true);
+                                        }, style: {
                                             background: 'none',
                                             border: 'none',
                                             color: 'white',
@@ -981,22 +1235,8 @@ export const ChatBot = ({ onMessage, onError, onToolUse, presetMessages = [], pl
                     alignItems: 'center',
                     justifyContent: 'center',
                     zIndex: 2000
-                }, children: _jsx(PermissionForm, { hitAddress: hitAddress, permissions: permissions, setPermissions: setPermissions, setIsDisabled: setIsDisabled, onClose: () => setShowPermissionForm(false), onConnectWallet: () => connectWallet(false), onSignIn: () => signInWallet(false), onSave: savePermissions, isNeedSignInWithWallet: isNeedSignInWithWallet, walletInfo: walletInfo, onVerifyWallet: handleVerifyWalletClick, serviceId: serviceId, nxtlinqApi: nxtlinqApi, permissionGroup: permissionGroup }) })), success && (_jsxs("div", { style: {
-                    position: 'fixed',
-                    bottom: 100,
-                    right: 40,
-                    background: '#4caf50',
-                    color: 'white',
-                    padding: '12px 24px',
-                    borderRadius: 8,
-                    zIndex: 2000,
-                    fontWeight: 600,
-                }, children: ["Saved successfully!", _jsx("button", { style: {
-                            background: 'none',
-                            border: 'none',
-                            color: 'white',
-                            marginLeft: 16,
-                            fontSize: 18,
-                            cursor: 'pointer'
-                        }, onClick: () => setSuccess(false), children: "\u00D7" })] }))] }));
+                }, children: _jsx(PermissionForm, { hitAddress: hitAddress, permissions: permissions, setPermissions: setPermissions, setIsDisabled: setIsDisabled, onClose: () => {
+                        setShowPermissionForm(false);
+                        setIsPermissionFormOpen(false);
+                    }, onConnectWallet: () => connectWallet(false), onSignIn: () => signInWallet(false), onSave: savePermissions, isNeedSignInWithWallet: isNeedSignInWithWallet, walletInfo: walletInfo, onVerifyWallet: handleVerifyWalletClick, serviceId: serviceId, nxtlinqApi: nxtlinqApi, permissionGroup: permissionGroup, isAITLoading: isAITLoading, isWalletLoading: isWalletLoading }) })), notification.show && (_jsx(NotificationModal, { notification: notification, onClose: () => setNotification({ ...notification, show: false }) }))] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytexbyte/nxtlinq-ai-agent-sdk",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Nxtlinq AI Agent SDK - Proprietary Software with enhanced async operation handling",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",