@bytexbyte/nxtlinq-ai-agent-sdk 1.2.1 → 1.2.3

package/dist/components/ChatBot.js

@@ -1,1144 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { ethers } from 'ethers';
-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, isAITLoading, isWalletLoading = false }) => {
-    const [availablePermissions, setAvailablePermissions] = React.useState([]);
-    const [isSaving, setIsSaving] = React.useState(false);
-    const fetchAvailablePermissions = async () => {
-        if (!serviceId)
-            return;
-        try {
-            const result = await nxtlinqApi.permissions.getServicePermissions({
-                serviceId,
-                ...(permissionGroup && { groupName: permissionGroup })
-            });
-            if ('error' in result) {
-                console.error('Failed to fetch permissions:', result.error);
-                return;
-            }
-            setAvailablePermissions(result.permissions);
-        }
-        catch (error) {
-            console.error('Error fetching permissions:', error);
-        }
-    };
-    React.useEffect(() => {
-        fetchAvailablePermissions();
-    }, [serviceId, nxtlinqApi, permissionGroup]);
-    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',
-            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" })] }), !hitAddress ? (_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("span", { style: { fontSize: '32px' }, children: "\uD83D\uDC5B" }) }), _jsx("p", { style: {
-                            marginBottom: '24px',
-                            fontSize: '16px',
-                            color: '#666'
-                        }, children: "Please connect your wallet first" }), _jsx("button", { onClick: onConnectWallet, style: {
-                            padding: '12px 24px',
-                            backgroundColor: '#007bff',
-                            color: 'white',
-                            border: 'none',
-                            borderRadius: '8px',
-                            cursor: 'pointer',
-                            fontSize: '16px',
-                            fontWeight: '500',
-                            transition: 'background-color 0.2s'
-                        }, onMouseOver: (e) => e.currentTarget.style.backgroundColor = '#0056b3', onMouseOut: (e) => e.currentTarget.style.backgroundColor = '#007bff', children: "Connect Wallet" })] })) : isNeedSignInWithWallet ? (_jsxs("div", { style: { textAlign: 'center', padding: '32px 0' }, children: [_jsxs("div", { style: { marginBottom: '24px' }, children: [_jsx("h4", { style: {
-                                    marginBottom: '12px',
-                                    fontSize: '16px',
-                                    color: '#666'
-                                }, children: "Connected Wallet" }), _jsx("p", { style: {
-                                    wordBreak: 'break-all',
-                                    backgroundColor: '#f8f9fa',
-                                    padding: '12px',
-                                    borderRadius: '8px',
-                                    fontSize: '14px',
-                                    color: '#333',
-                                    border: '1px solid #e9ecef'
-                                }, children: hitAddress })] }), _jsx("p", { style: {
-                            marginBottom: '24px',
-                            fontSize: '16px',
-                            color: '#666'
-                        }, children: "Please sign in to continue" }), _jsx("button", { onClick: onSignIn, style: {
-                            padding: '12px 24px',
-                            backgroundColor: '#007bff',
-                            color: 'white',
-                            border: 'none',
-                            borderRadius: '8px',
-                            cursor: 'pointer',
-                            fontSize: '16px',
-                            fontWeight: '500',
-                            transition: 'background-color 0.2s'
-                        }, onMouseOver: (e) => e.currentTarget.style.backgroundColor = '#0056b3', onMouseOut: (e) => e.currentTarget.style.backgroundColor = '#007bff', children: "Sign In" })] })) : !isWalletVerified ? (_jsxs("div", { style: { textAlign: 'center', padding: '32px 0' }, children: [_jsxs("div", { style: { marginBottom: '24px' }, children: [_jsx("h4", { style: {
-                                    marginBottom: '12px',
-                                    fontSize: '16px',
-                                    color: '#666'
-                                }, children: "Connected Wallet" }), _jsx("p", { style: {
-                                    wordBreak: 'break-all',
-                                    backgroundColor: '#f8f9fa',
-                                    padding: '12px',
-                                    borderRadius: '8px',
-                                    fontSize: '14px',
-                                    color: '#333',
-                                    border: '1px solid #e9ecef'
-                                }, children: hitAddress })] }), _jsx("p", { style: {
-                            marginBottom: '24px',
-                            fontSize: '16px',
-                            color: '#666'
-                        }, children: "Please verify your wallet to continue" }), _jsx("button", { onClick: onVerifyWallet, style: {
-                            padding: '12px 24px',
-                            backgroundColor: '#007bff',
-                            color: 'white',
-                            border: 'none',
-                            borderRadius: '8px',
-                            cursor: 'pointer',
-                            fontSize: '16px',
-                            fontWeight: '500',
-                            transition: 'background-color 0.2s'
-                        }, onMouseOver: (e) => e.currentTarget.style.backgroundColor = '#0056b3', onMouseOut: (e) => e.currentTarget.style.backgroundColor = '#007bff', children: "Verify your wallet" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: { marginBottom: '24px' }, children: [_jsx("h4", { style: {
-                                    marginBottom: '12px',
-                                    fontSize: '16px',
-                                    color: '#666'
-                                }, children: "Connected Wallet" }), _jsx("p", { style: {
-                                    wordBreak: 'break-all',
-                                    backgroundColor: '#f8f9fa',
-                                    padding: '12px',
-                                    borderRadius: '8px',
-                                    fontSize: '14px',
-                                    color: '#333',
-                                    border: '1px solid #e9ecef'
-                                }, children: hitAddress })] }), _jsxs("div", { style: { marginBottom: '24px' }, children: [_jsx("h4", { style: {
-                                    marginBottom: '12px',
-                                    fontSize: '16px',
-                                    color: '#666'
-                                }, 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',
-                                    border: '1px solid #e9ecef'
-                                }, children: availablePermissions.map((permission) => (_jsx("div", { style: { marginBottom: '12px' }, children: _jsxs("label", { style: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '12px',
-                                            cursor: isAITLoading ? 'not-allowed' : 'pointer',
-                                            padding: '8px',
-                                            borderRadius: '6px',
-                                            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: isAITLoading ? 'not-allowed' : 'pointer'
-                                                } }), _jsx("span", { style: {
-                                                    fontSize: '14px',
-                                                    color: '#333'
-                                                }, children: permission.label })] }) }, permission.id))) }))] }), _jsxs("div", { style: {
-                            display: 'flex',
-                            justifyContent: 'flex-end',
-                            gap: '12px',
-                            borderTop: '1px solid #e9ecef',
-                            paddingTop: '24px'
-                        }, children: [_jsx("button", { onClick: onClose, style: {
-                                    padding: '10px 20px',
-                                    backgroundColor: '#f8f9fa',
-                                    color: '#666',
-                                    border: '1px solid #dee2e6',
-                                    borderRadius: '8px',
-                                    cursor: 'pointer',
-                                    fontSize: '14px',
-                                    fontWeight: '500',
-                                    transition: 'all 0.2s'
-                                }, onMouseOver: (e) => {
-                                    e.currentTarget.style.backgroundColor = '#e9ecef';
-                                    e.currentTarget.style.borderColor = '#ced4da';
-                                }, onMouseOut: (e) => {
-                                    e.currentTarget.style.backgroundColor = '#f8f9fa';
-                                    e.currentTarget.style.borderColor = '#dee2e6';
-                                }, children: "Cancel" }), _jsx("button", { onClick: handleSave, disabled: permissions.length === 0 || isSaving || isAITLoading, style: {
-                                    padding: '10px 20px',
-                                    backgroundColor: permissions.length === 0 || isSaving || isAITLoading ? '#e9ecef' : '#007bff',
-                                    color: permissions.length === 0 || isSaving || isAITLoading ? '#6c757d' : 'white',
-                                    border: 'none',
-                                    borderRadius: '8px',
-                                    cursor: permissions.length === 0 || isSaving || isAITLoading ? 'not-allowed' : 'pointer',
-                                    fontSize: '14px',
-                                    fontWeight: '500',
-                                    transition: 'background-color 0.2s'
-                                }, onMouseOver: (e) => {
-                                    if (permissions.length > 0 && !isSaving && !isAITLoading) {
-                                        e.currentTarget.style.backgroundColor = '#0056b3';
-                                    }
-                                }, onMouseOut: (e) => {
-                                    if (permissions.length > 0 && !isSaving && !isAITLoading) {
-                                        e.currentTarget.style.backgroundColor = '#007bff';
-                                    }
-                                }, 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([]);
-    const [inputValue, setInputValue] = React.useState('');
-    const [isLoading, setIsLoading] = React.useState(false);
-    const [isOpen, setIsOpen] = React.useState(false);
-    const [hitAddress, setHitAddress] = React.useState(null);
-    const [ait, setAit] = React.useState(null);
-    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 nxtlinqApi = React.useMemo(() => createNxtlinqApi(apiKey, apiSecret), [apiKey, apiSecret]);
-    const fetchAvailablePermissions = async () => {
-        if (!serviceId)
-            return;
-        try {
-            const result = await nxtlinqApi.permissions.getServicePermissions({
-                serviceId,
-                ...(permissionGroup && { groupName: permissionGroup })
-            });
-            if ('error' in result) {
-                console.error('Failed to fetch permissions:', result.error);
-                return;
-            }
-            setAvailablePermissions(result.permissions);
-        }
-        catch (error) {
-            console.error('Error fetching permissions:', error);
-        }
-    };
-    const refreshAIT = async (forceUpdatePermissions = false) => {
-        console.log('refreshAIT called');
-        console.log('hitAddress:', hitAddress);
-        console.log('nxtlinqAITServiceAccessToken:', nxtlinqAITServiceAccessToken);
-        if (!hitAddress) {
-            setAit(null);
-            setPermissions([]);
-            return;
-        }
-        setIsAITLoading(true);
-        try {
-            const response = await nxtlinqApi.ait.getAITByServiceIdAndController({
-                serviceId,
-                controller: hitAddress
-            }, nxtlinqAITServiceAccessToken || '');
-            if ('error' in response) {
-                console.error('Failed to fetch AIT:', response.error);
-                setAit(null);
-                setPermissions([]);
-                return;
-            }
-            console.log('AIT response:', response);
-            setAit(response);
-            // 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);
-        console.log('nxtlinqAITServiceAccessToken:', nxtlinqAITServiceAccessToken);
-        if (hitAddress && nxtlinqAITServiceAccessToken) {
-            refreshAIT();
-        }
-    }, [hitAddress, nxtlinqAITServiceAccessToken]);
-    // Fetch available permissions when permissionGroup changes
-    React.useEffect(() => {
-        fetchAvailablePermissions();
-    }, [serviceId, permissionGroup]);
-    const isNeedSignInWithWallet = React.useMemo(() => {
-        if (!hitAddress) {
-            return false;
-        }
-        if (!nxtlinqAITServiceAccessToken) {
-            return true;
-        }
-        try {
-            // Check if the token is expired
-            const payload = JSON.parse(atob(nxtlinqAITServiceAccessToken.split('.')[1]));
-            const exp = payload.exp * 1000; // Convert to milliseconds
-            const now = Date.now();
-            if (exp < now) {
-                return true;
-            }
-            // Check if the token's payload has the same address as the wallet address
-            const address = payload.address;
-            if (address !== hitAddress) {
-                return true;
-            }
-            // If user has valid token but no AIT, they don't need to sign in again
-            // They just need to generate AIT through the permission form
-            return false;
-        }
-        catch (error) {
-            console.error('Error parsing token:', error);
-            return true;
-        }
-    }, [hitAddress, nxtlinqAITServiceAccessToken]);
-    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);
-                console.log('Wallet response:', walletResponse);
-                if (!('error' in walletResponse)) {
-                    setWalletInfo(walletResponse);
-                    const aitResponse = await nxtlinqApi.ait.getAITByServiceIdAndController({
-                        serviceId,
-                        controller: address
-                    }, token);
-                    console.log('AIT response:', aitResponse);
-                    if (!('error' in aitResponse)) {
-                        setAit(aitResponse);
-                    }
-                }
-            }
-            catch (error) {
-                console.error('Failed to update wallet info after verification:', error);
-            }
-            finally {
-                setIsWalletLoading(false);
-            }
-        };
-        getWalletInfo();
-    };
-    React.useEffect(() => {
-        const getWalletInfo = async () => {
-            if (!hitAddress) {
-                return;
-            }
-            if (isNeedSignInWithWallet) {
-                return;
-            }
-            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;
-                }
-                setWalletInfo(getWalletResponse);
-            }
-            catch (error) {
-                console.error('Error getting wallet info:', error);
-            }
-            finally {
-                setIsWalletLoading(false);
-            }
-        };
-        getWalletInfo();
-    }, [hitAddress, isNeedSignInWithWallet]);
-    const handleVerifyWalletClick = async () => {
-        console.log('handleVerifyWalletClick called');
-        console.log('Current states:', {
-            hitAddress,
-            isNeedSignInWithWallet,
-            walletInfo,
-            signer: !!signer
-        });
-        if (!hitAddress) {
-            alert('Please connect your wallet first.');
-            return;
-        }
-        try {
-            if (onVerifyWallet) {
-                setIsLoading(true);
-                const result = await onVerifyWallet();
-                console.log('Verify wallet response:', result);
-                if (!result) {
-                    setIsLoading(false);
-                    return;
-                }
-                const { token } = result;
-                const address = hitAddress;
-                if (token && address) {
-                    const payload = {
-                        address: hitAddress,
-                        token,
-                        timestamp: Date.now(),
-                        method: 'berifyme'
-                    };
-                    try {
-                        const verifyWalletResponse = await nxtlinqApi.wallet.verifyWallet({ ...payload }, token);
-                        if ('error' in verifyWalletResponse) {
-                            if (verifyWalletResponse.error === 'Wallet already exists') {
-                                // If wallet exists, get wallet info directly
-                                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);
-                                        }
-                                    }
-                                }
-                                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) {
-                                        console.error('Failed to clean URL:', e);
-                                    }
-                                }
-                                setIsLoading(false);
-                                // Refresh AIT after wallet verification
-                                refreshAIT();
-                                return { token, hitAddress: address };
-                            }
-                            alert(verifyWalletResponse.error);
-                            setIsLoading(false);
-                            return;
-                        }
-                        // Verification successful, get wallet info
-                        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);
-                                }
-                            }
-                        }
-                        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) {
-                                console.error('Failed to clean URL:', e);
-                            }
-                        }
-                        setIsLoading(false);
-                        // Refresh AIT after wallet verification
-                        refreshAIT();
-                        return { token, hitAddress: address };
-                    }
-                    catch (error) {
-                        let msg = 'Verification failed';
-                        if (typeof error === 'object' && error !== null && 'response' in error) {
-                            // @ts-ignore
-                            msg = error.response?.data?.error || error.message || msg;
-                        }
-                        else if (error instanceof Error) {
-                            msg = error.message;
-                        }
-                        console.error('Wallet verification failed:', error);
-                        alert(msg);
-                        setIsLoading(false);
-                        throw error;
-                    }
-                }
-                setIsLoading(false);
-                return { token, hitAddress: address };
-            }
-        }
-        catch (error) {
-            console.error('Failed to verify wallet:', error);
-            setIsLoading(false);
-            alert('Failed to verify wallet. Please try again.');
-            throw error;
-        }
-    };
-    // Add useEffect to handle URL parameters
-    React.useEffect(() => {
-        if (typeof window !== 'undefined') {
-            try {
-                const urlParams = new URLSearchParams(window.location.search);
-                const token = urlParams.get('token');
-                if (token && hitAddress) {
-                    handleVerifyWalletClick();
-                }
-            }
-            catch (e) {
-                console.error('Failed to get URL params:', e);
-            }
-        }
-    }, [hitAddress]);
-    React.useEffect(() => {
-        console.log('Wallet states changed:', {
-            hitAddress,
-            isNeedSignInWithWallet,
-            walletInfo,
-            signer: !!signer
-        });
-    }, [hitAddress, isNeedSignInWithWallet, walletInfo, signer]);
-    const scrollToBottom = () => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    };
-    React.useEffect(() => {
-        scrollToBottom();
-    }, [messages]);
-    React.useEffect(() => {
-        if (!hitAddress) {
-            setAit(null);
-        }
-    }, [hitAddress]);
-    React.useEffect(() => {
-        if (!ait) {
-            return;
-        }
-        const aitPermissions = ait.metadata?.permissions || [];
-        setPermissions(aitPermissions);
-    }, [ait]);
-    const connectWallet = React.useCallback(async (autoShowSignInMessage = true) => {
-        if (typeof window === 'undefined') {
-            console.error('Web3 is not available in server-side rendering');
-            return;
-        }
-        try {
-            const web3Provider = await metakeepClient.ethereum;
-            if (!web3Provider) {
-                throw new Error('Web3 provider not available');
-            }
-            await web3Provider.enable();
-            const ethersProvider = new ethers.providers.Web3Provider(web3Provider);
-            const userSigner = await ethersProvider.getSigner();
-            const userAddress = await userSigner.getAddress();
-            localStorage.setItem('walletAddress', userAddress);
-            setHitAddress(userAddress);
-            setSigner(userSigner);
-            // Refresh AIT after connecting wallet and wait for completion
-            if (nxtlinqAITServiceAccessToken) {
-                await refreshAIT();
-            }
-            // Auto-show appropriate message after connecting wallet and AIT refresh
-            if (autoShowSignInMessage) {
-                // Check state after refreshAIT has completed
-                if (isNeedSignInWithWallet) {
-                    // User needs to sign in
-                    setMessages(prev => [...prev, {
-                            id: Date.now().toString(),
-                            content: 'Please sign in with your wallet to continue.',
-                            role: 'assistant',
-                            timestamp: new Date().toISOString(),
-                            button: 'signIn'
-                        }]);
-                }
-                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()
-                        }]);
-                }
-            }
-            return userAddress;
-        }
-        catch (error) {
-            console.error('Failed to connect wallet:', error);
-            localStorage.removeItem('walletAddress');
-            setHitAddress(null);
-            setSigner(null);
-            throw error;
-        }
-    }, [nxtlinqAITServiceAccessToken, refreshAIT, isNeedSignInWithWallet]);
-    const signInWallet = async (autoShowSuccessMessage = true) => {
-        if (!hitAddress) {
-            alert('Please connect your wallet first.');
-            return;
-        }
-        if (!signer) {
-            alert('Please connect your wallet first.');
-            return;
-        }
-        try {
-            const nonceResponse = await nxtlinqApi.auth.getNonce({ address: hitAddress });
-            if ('error' in nonceResponse) {
-                alert(nonceResponse.error);
-                return;
-            }
-            const payload = {
-                address: hitAddress,
-                code: nonceResponse.code,
-                timestamp: nonceResponse.timestamp
-            };
-            const stringToSign = stringify(payload);
-            const signature = await signer.signMessage(stringToSign || '');
-            const response = await nxtlinqApi.auth.signIn({
-                ...payload,
-                signature
-            });
-            if ('error' in response) {
-                alert(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()
-                    }]);
-            }
-            // Refresh AIT after signing in
-            refreshAIT();
-        }
-        catch (error) {
-            console.error('Failed to sign in:', error);
-            alert('Failed to sign in. Please try again.');
-        }
-    };
-    const hasPermission = async (toolName) => {
-        if (!hitAddress) {
-            setMessages(prev => [...prev, {
-                    id: Date.now().toString(),
-                    content: 'Please connect your HIT wallet to continue.',
-                    role: 'assistant',
-                    timestamp: new Date().toISOString(),
-                    button: 'connect'
-                }]);
-            return false;
-        }
-        // Check if user has signed in with wallet
-        if (!nxtlinqAITServiceAccessToken) {
-            setMessages(prev => [...prev, {
-                    id: Date.now().toString(),
-                    content: 'Please sign in with your HIT wallet to continue.',
-                    role: 'assistant',
-                    timestamp: new Date().toISOString(),
-                    button: 'signIn'
-                }]);
-            return false;
-        }
-        if (!ait) {
-            setMessages(prev => [...prev, {
-                    id: Date.now().toString(),
-                    content: 'No AIT found for your wallet. Please click the settings button (⚙️) to configure your AIT permissions.',
-                    role: 'assistant',
-                    timestamp: new Date().toISOString()
-                }]);
-            return false;
-        }
-        // Check if the tool permission is available for current identity provider
-        const availablePermissionLabels = availablePermissions.map(p => p.label);
-        if (!availablePermissionLabels.includes(toolName)) {
-            setMessages(prev => [...prev, {
-                    id: Date.now().toString(),
-                    content: `This tool (${toolName}) is not available for your current identity provider.`,
-                    role: 'assistant',
-                    timestamp: new Date().toISOString()
-                }]);
-            return false;
-        }
-        // Check if the tool permission is included in AIT permissions
-        if (!permissions.includes(toolName)) {
-            setMessages(prev => [...prev, {
-                    id: Date.now().toString(),
-                    content: `You do not have the required AIT permission: ${toolName}. Please click the settings button (⚙️) to update your permissions.`,
-                    role: 'assistant',
-                    timestamp: new Date().toISOString()
-                }]);
-            return false;
-        }
-        return true;
-    };
-    const sendMessage = async (content, retryCount = 0) => {
-        try {
-            setIsLoading(true);
-            const response = await nxtlinqApi.agent.sendMessage({
-                message: content,
-                apiKey,
-                apiSecret,
-            });
-            if ('error' in response) {
-                throw new Error(response.error);
-            }
-            const novaResponse = response;
-            if (novaResponse.toolCall?.toolUse && novaResponse.result !== 'Authentication data retrieved') {
-                if (onToolUse) {
-                    const isToolAllowed = await hasPermission(novaResponse.toolCall.toolUse.name);
-                    if (!isToolAllowed) {
-                        return;
-                    }
-                    const toolUseResult = await onToolUse(novaResponse.toolCall.toolUse);
-                    if (toolUseResult) {
-                        setMessages(prev => [...prev, toolUseResult]);
-                        return;
-                    }
-                }
-            }
-            if (!novaResponse.toolCall?.toolUse && novaResponse.reply) {
-                const replyText = novaResponse.reply
-                    .map(item => item.text.replace(/<thinking>/g, '').replace(/<\/thinking>/g, ''))
-                    .join(' ') || '';
-                if (replyText) {
-                    const message = {
-                        id: Date.now().toString(),
-                        content: replyText,
-                        role: 'assistant',
-                        timestamp: new Date().toISOString()
-                    };
-                    setMessages(prev => [...prev, message]);
-                    return;
-                }
-            }
-            return;
-        }
-        catch (error) {
-            if (retryCount < maxRetries) {
-                await new Promise(resolve => setTimeout(resolve, retryDelay));
-                return sendMessage(content, retryCount + 1);
-            }
-            throw error;
-        }
-        finally {
-            setIsLoading(false);
-        }
-    };
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        if (!inputValue.trim() || isLoading)
-            return;
-        const userMessage = {
-            id: Date.now().toString(),
-            content: inputValue,
-            role: 'user',
-            timestamp: new Date().toISOString()
-        };
-        setMessages(prev => [...prev, userMessage]);
-        setInputValue('');
-        setIsLoading(true);
-        try {
-            await sendMessage(inputValue);
-        }
-        catch (error) {
-            console.error('Failed to send message:', error);
-            onError?.(error instanceof Error ? error : new Error('Failed to send message'));
-            const errorMessage = {
-                id: Date.now().toString(),
-                content: 'Sorry, there was an error processing your message. Please try again.',
-                role: 'assistant',
-                timestamp: new Date().toISOString()
-            };
-            setMessages(prev => [...prev, errorMessage]);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    };
-    const handlePresetMessage = (message) => {
-        if (message.autoSend) {
-            setMessages(prev => [...prev, {
-                    id: Date.now().toString(),
-                    content: message.text,
-                    role: 'user',
-                    timestamp: new Date().toISOString()
-                }]);
-            sendMessage(message.text);
-        }
-        else {
-            setInputValue(message.text);
-        }
-    };
-    const generateAndRegisterAIT = async () => {
-        if (!signer || !hitAddress)
-            return;
-        const timestamp = Math.floor(Date.now() / 1000);
-        const aitId = `did:polygon:ike-dashboard:${hitAddress}:${timestamp}`;
-        const metadata = {
-            model: 'gpt-4',
-            permissions,
-            issuedBy: hitAddress,
-        };
-        const metadataStr = stringify(metadata);
-        const metadataHash = ethers.utils.keccak256(ethers.utils.toUtf8Bytes(metadataStr));
-        // 1️⃣ Upload metadata to Pinata, get CID
-        const uploadResponse = await nxtlinqApi.metadata.createMetadata(metadata, nxtlinqAITServiceAccessToken || '');
-        if ('error' in uploadResponse) {
-            throw new Error(`Failed to upload metadata: ${uploadResponse.error}`);
-        }
-        const { metadataCid } = uploadResponse;
-        await nxtlinqApi.ait.createAIT({
-            aitId,
-            controller: hitAddress,
-            serviceId,
-            metadataHash,
-            metadataCid,
-        }, nxtlinqAITServiceAccessToken || '');
-        const aitInfo = {
-            aitId,
-            controller: hitAddress,
-            metadata,
-            metadataHash,
-            metadataCid,
-        };
-        setAit(aitInfo);
-    };
-    const savePermissions = async () => {
-        setIsDisabled(true);
-        try {
-            await generateAndRegisterAIT();
-            setSuccess(true);
-            setShowPermissionForm(false);
-            setIsPermissionFormOpen(false);
-        }
-        catch (error) {
-            console.error('Failed to generate AIT:', error);
-            setIsDisabled(false);
-            if (error instanceof Error) {
-                alert(error.message);
-            }
-        }
-    };
-    // Add state change listener
-    React.useEffect(() => {
-        console.log('States updated:', {
-            hitAddress,
-            isNeedSignInWithWallet,
-            walletInfo,
-            isOpen
-        });
-    }, [hitAddress, isNeedSignInWithWallet, walletInfo, isOpen]);
-    // Add useEffect to monitor message changes
-    React.useEffect(() => {
-        if (messages.length > 0) {
-            const lastMessage = messages[messages.length - 1];
-            onMessage?.(lastMessage);
-        }
-    }, [messages, onMessage]);
-    // Auto hide success message after 3 seconds
-    React.useEffect(() => {
-        if (success) {
-            const timer = setTimeout(() => {
-                setSuccess(false);
-            }, 3000);
-            return () => clearTimeout(timer);
-        }
-    }, [success]);
-    return (_jsxs("div", { style: {
-            position: 'fixed',
-            bottom: '20px',
-            right: '20px',
-            zIndex: 1000,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-            gap: '10px'
-        }, children: [isOpen && (_jsxs("div", { className: `nxtlinq-chatbot ${className}`, style: {
-                    width: '350px',
-                    height: '500px',
-                    backgroundColor: 'white',
-                    borderRadius: '10px',
-                    boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    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: [_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',
-                                            fontSize: '20px',
-                                            cursor: 'pointer',
-                                            padding: '0 5px'
-                                        }, children: "\u2699\uFE0F" }), _jsx("button", { onClick: () => setIsOpen(false), style: {
-                                            background: 'none',
-                                            border: 'none',
-                                            color: 'white',
-                                            fontSize: '24px',
-                                            cursor: 'pointer',
-                                            padding: '0 5px'
-                                        }, children: "\u00D7" })] })] }), _jsxs("div", { style: {
-                            flex: 1,
-                            overflowY: 'auto',
-                            padding: '15px',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: '10px'
-                        }, children: [messages.map((message, index) => (_jsxs("div", { style: {
-                                    alignSelf: message.role === 'user' ? 'flex-end' : 'flex-start',
-                                    backgroundColor: message.role === 'user' ? '#007bff' : '#f0f0f0',
-                                    color: message.role === 'user' ? 'white' : 'black',
-                                    padding: '8px 12px',
-                                    borderRadius: '15px',
-                                    maxWidth: '80%',
-                                    wordBreak: 'break-word'
-                                }, children: [message.content, message.button && (_jsx("button", { onClick: message.button === 'signIn' ? () => signInWallet(true) : () => connectWallet(true), disabled: message.button === 'signIn' ? (!hitAddress || !!ait) : !!hitAddress, style: {
-                                            display: 'block',
-                                            marginTop: '8px',
-                                            padding: '5px 10px',
-                                            backgroundColor: message.button === 'signIn' ? (hitAddress && !ait ? '#28a745' : '#ccc') : (hitAddress ? '#ccc' : '#28a745'),
-                                            color: 'white',
-                                            border: 'none',
-                                            borderRadius: '5px',
-                                            cursor: message.button === 'signIn' ? (hitAddress && !ait ? 'pointer' : 'not-allowed') : (hitAddress ? 'not-allowed' : 'pointer')
-                                        }, children: message.button === 'signIn' ? (!!ait ? 'Signed In' : 'Sign in HIT wallet') : (hitAddress ? 'Connected' : 'Connect HIT wallet') }))] }, index))), isLoading && (_jsx("div", { style: {
-                                    alignSelf: 'flex-start',
-                                    backgroundColor: '#f0f0f0',
-                                    padding: '8px 12px',
-                                    borderRadius: '15px',
-                                    maxWidth: '80%'
-                                }, children: "Thinking..." })), _jsx("div", { ref: messagesEndRef })] }), _jsxs("div", { style: {
-                            padding: '10px',
-                            borderTop: '1px solid #eee',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: '10px'
-                        }, children: [_jsx("div", { style: {
-                                    display: 'flex',
-                                    gap: '5px',
-                                    overflowX: 'auto',
-                                    padding: '5px 0'
-                                }, children: presetMessages.map((message, index) => (_jsx("button", { onClick: () => handlePresetMessage(message), style: {
-                                        padding: '5px 10px',
-                                        backgroundColor: '#f0f0f0',
-                                        border: 'none',
-                                        borderRadius: '15px',
-                                        cursor: 'pointer',
-                                        whiteSpace: 'nowrap',
-                                        fontSize: '12px'
-                                    }, children: message.text }, index))) }), _jsxs("form", { onSubmit: handleSubmit, style: {
-                                    display: 'flex',
-                                    gap: '10px'
-                                }, children: [_jsx("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: placeholder, style: {
-                                            flex: 1,
-                                            padding: '8px 12px',
-                                            border: '1px solid #ddd',
-                                            borderRadius: '20px',
-                                            fontSize: '14px',
-                                            outline: 'none'
-                                        } }), _jsx("button", { type: "submit", disabled: isLoading, style: {
-                                            backgroundColor: '#007bff',
-                                            color: 'white',
-                                            border: 'none',
-                                            borderRadius: '20px',
-                                            padding: '8px 20px',
-                                            cursor: isLoading ? 'not-allowed' : 'pointer',
-                                            fontSize: '14px',
-                                            opacity: isLoading ? 0.7 : 1
-                                        }, children: "Send" })] })] })] })), _jsx("button", { onClick: () => setIsOpen(!isOpen), style: {
-                    width: '120px',
-                    height: '40px',
-                    borderRadius: '20px',
-                    backgroundColor: '#007bff',
-                    color: '#ffffff',
-                    border: 'none',
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontSize: '14px',
-                    fontWeight: 'bold',
-                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-                    transition: 'all 0.3s ease-in-out',
-                    padding: '0 20px'
-                }, children: "AI Agent" }), 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: 2000
-                }, 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 }) })), 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" })] }))] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChatBotProvider } from './context/ChatBotContext';
+import { ChatBotUI } from './ui/ChatBotUI';
+export const ChatBot = (props) => {
+    return (_jsx(ChatBotProvider, { ...props, children: _jsx(ChatBotUI, {}) }));
 };