@bytexbyte/nxtlinq-ai-agent-sdk 1.0.8 → 1.1.0

package/dist/components/ChatBot.js

@@ -0,0 +1,843 @@
+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 }) => {
+    const availablePermissions = [
+        { id: 'setUserName', label: 'Set User Name' },
+        { id: 'navigateToPage', label: 'Navigate To Page' },
+        { id: 'addMember', label: 'Add Member' }
+    ];
+    const hasAccessToken = !!localStorage.getItem('nxtlinqAITServiceAccessToken');
+    const isWalletVerified = walletInfo?.id;
+    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" }), _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: '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.id), onChange: () => {
+                                                    const newPermissions = permissions.includes(permission.id)
+                                                        ? permissions.filter(p => p !== permission.id)
+                                                        : [...permissions, permission.id].sort();
+                                                    setPermissions(newPermissions);
+                                                    setIsDisabled(false);
+                                                }, style: {
+                                                    margin: 0,
+                                                    width: '18px',
+                                                    height: '18px',
+                                                    cursor: '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: onSave, disabled: permissions.length === 0, style: {
+                                    padding: '10px 20px',
+                                    backgroundColor: permissions.length === 0 ? '#e9ecef' : '#007bff',
+                                    color: 'white',
+                                    border: 'none',
+                                    borderRadius: '8px',
+                                    cursor: permissions.length === 0 ? 'not-allowed' : 'pointer',
+                                    fontSize: '14px',
+                                    fontWeight: '500',
+                                    transition: 'background-color 0.2s'
+                                }, onMouseOver: (e) => {
+                                    if (permissions.length > 0) {
+                                        e.currentTarget.style.backgroundColor = '#0056b3';
+                                    }
+                                }, onMouseOut: (e) => {
+                                    if (permissions.length > 0) {
+                                        e.currentTarget.style.backgroundColor = '#007bff';
+                                    }
+                                }, children: "Save" })] })] }))] }));
+};
+export const ChatBot = ({ projectId, onMessage, onError, onToolUse, presetMessages = [], placeholder = 'Type a message...', className = '', maxRetries = 3, retryDelay = 1000, serviceId, apiKey, apiSecret, onVerifyWallet }) => {
+    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 [showPermissionForm, setShowPermissionForm] = React.useState(false);
+    const [success, setSuccess] = React.useState(false);
+    const messagesEndRef = React.useRef(null);
+    const [isDisabled, setIsDisabled] = React.useState(true);
+    const [signer, setSigner] = React.useState(null);
+    const [provider, setProvider] = React.useState(null);
+    const [accessToken, setAccessToken] = React.useState(null);
+    const [walletInfo, setWalletInfo] = React.useState(null);
+    const verifyWalletBtnRef = React.useRef(null);
+    const [nxtlinqAITServiceAccessToken, setNxtlinqAITServiceAccessToken] = useLocalStorage('nxtlinqAITServiceAccessToken', '');
+    const nxtlinqApi = React.useMemo(() => createNxtlinqApi(apiKey, apiSecret), [apiKey, apiSecret]);
+    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 is the token's payload has the same address as the wallet address
+            const address = payload.address;
+            if (address !== hitAddress) {
+                return true;
+            }
+            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 () => {
+            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);
+            }
+        };
+        getWalletInfo();
+    };
+    React.useEffect(() => {
+        const getWalletInfo = async () => {
+            if (!hitAddress) {
+                return;
+            }
+            if (isNeedSignInWithWallet) {
+                return;
+            }
+            const getWalletResponse = await nxtlinqApi.wallet.getWallet({ address: hitAddress }, accessToken);
+            if ('error' in getWalletResponse) {
+                console.error(getWalletResponse.error);
+                return;
+            }
+            setWalletInfo(getWalletResponse);
+        };
+        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(hitAddress);
+                console.log('Verify wallet response:', result);
+                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
+                                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
+                                if (typeof window !== 'undefined') {
+                                    try {
+                                        const url = new URL(window.location.href);
+                                        url.searchParams.delete('token');
+                                        window.history.replaceState({}, '', url.toString());
+                                    }
+                                    catch (e) {
+                                        console.error('Failed to clean URL:', e);
+                                    }
+                                }
+                                setIsLoading(false);
+                                return { token, hitAddress: address };
+                            }
+                            alert(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);
+                            }
+                        }
+                        // Clean up token from URL
+                        if (typeof window !== 'undefined') {
+                            try {
+                                const url = new URL(window.location.href);
+                                url.searchParams.delete('token');
+                                window.history.replaceState({}, '', url.toString());
+                            }
+                            catch (e) {
+                                console.error('Failed to clean URL:', e);
+                            }
+                        }
+                        setIsLoading(false);
+                        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 () => {
+        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.BrowserProvider(web3Provider);
+            const userSigner = await ethersProvider.getSigner();
+            const userAddress = await userSigner.getAddress();
+            localStorage.setItem('walletAddress', userAddress);
+            setHitAddress(userAddress);
+            setSigner(userSigner);
+            setProvider(ethersProvider);
+            return userAddress;
+        }
+        catch (error) {
+            console.error('Failed to connect wallet:', error);
+            localStorage.removeItem('walletAddress');
+            setHitAddress(null);
+            setSigner(null);
+            setProvider(null);
+            throw error;
+        }
+    }, []);
+    const signInWallet = async () => {
+        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);
+            setAccessToken(accessToken);
+        }
+        catch (error) {
+            console.error('Failed to sign in:', error);
+            alert('Failed to sign in. Please try again.');
+        }
+    };
+    const hasPermission = async (toolName) => {
+        if (!ait) {
+            setMessages(prev => [...prev, {
+                    id: Date.now().toString(),
+                    content: 'Please connect your HIT wallet and sign in to access permissions.',
+                    role: 'assistant',
+                    timestamp: new Date().toISOString(),
+                    button: true
+                }]);
+            return false;
+        }
+        return permissions.includes(toolName);
+    };
+    const sendMessage = async (content, retryCount = 0) => {
+        try {
+            setIsLoading(true);
+            const response = await nxtlinqApi.agent.sendMessage({
+                message: content,
+                projectId: projectId || ''
+            });
+            if ('error' in response) {
+                throw new Error(response.error);
+            }
+            const novaResponse = response;
+            if (novaResponse.toolCall?.toolUse && novaResponse.result !== 'Authentication data retrieved') {
+                if (onToolUse) {
+                    const toolUseResult = await onToolUse(novaResponse.toolCall.toolUse);
+                    if (toolUseResult) {
+                        onMessage?.(toolUseResult);
+                        return toolUseResult;
+                    }
+                }
+            }
+            if (!novaResponse.toolCall?.toolUse && novaResponse.reply) {
+                const replyText = novaResponse.reply
+                    .map(item => item.text.replace(/<thinking>/g, '').replace(/<\/thinking>/g, ''))
+                    .join(' ') || 'Sorry, I cannot understand your question';
+                const message = {
+                    id: Date.now().toString(),
+                    content: replyText,
+                    role: 'assistant',
+                    timestamp: new Date().toISOString()
+                };
+                setMessages(prev => [...prev, message]);
+                onMessage?.(message);
+                return message;
+            }
+            const defaultMessage = {
+                id: Date.now().toString(),
+                content: 'Sorry, I cannot understand your question',
+                role: 'assistant',
+                timestamp: new Date().toISOString()
+            };
+            setMessages(prev => [...prev, defaultMessage]);
+            onMessage?.(defaultMessage);
+            return defaultMessage;
+        }
+        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 {
+            const response = await sendMessage(inputValue);
+            if (response.error) {
+                throw new Error(response.error);
+            }
+            setMessages(prev => [...prev, response]);
+        }
+        catch (error) {
+            console.error('Failed to send message:', error);
+            onError?.(error instanceof Error ? error : new Error('Failed to send message'));
+            setMessages(prev => [...prev, {
+                    id: Date.now().toString(),
+                    content: 'Sorry, there was an error processing your message. Please try again.',
+                    role: 'assistant',
+                    timestamp: new Date().toISOString()
+                }]);
+        }
+        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,
+            controller: hitAddress
+        };
+        const metadataStr = stringify(metadata);
+        const metadataHash = ethers.keccak256(ethers.toUtf8Bytes(metadataStr || ''));
+        // 1️⃣ Upload metadata to Pinata, get CID
+        const uploadResponse = await nxtlinqApi.metadata.createMetadata(metadata, accessToken || '');
+        if ('error' in uploadResponse) {
+            throw new Error(`Failed to upload metadata: ${uploadResponse.error}`);
+        }
+        const { metadataCid } = uploadResponse;
+        // 2️⃣ Sign the message
+        const messageHash = ethers.solidityPackedKeccak256(['string', 'address', 'string', 'bytes32', 'uint256'], [aitId, hitAddress, serviceId, metadataHash, timestamp]);
+        const signature = await signer.signMessage(ethers.getBytes(messageHash));
+        await nxtlinqApi.ait.createAIT({
+            aitId,
+            controller: hitAddress,
+            serviceId,
+            metadataHash,
+            metadataCid,
+            timestamp,
+            signature
+        }, accessToken || '');
+        const aitInfo = {
+            aitId,
+            controller: hitAddress,
+            metadata,
+            metadataHash,
+            metadataCid,
+            signature
+        };
+        setAit(aitInfo);
+    };
+    const savePermissions = async () => {
+        setIsLoading(true);
+        setIsDisabled(true);
+        try {
+            await generateAndRegisterAIT();
+            setIsLoading(false);
+            setSuccess(true);
+            setShowPermissionForm(false);
+        }
+        catch (error) {
+            console.error('Failed to generate AIT:', error);
+            setIsLoading(false);
+            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]);
+    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: () => setShowPermissionForm(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: connectWallet, disabled: !!hitAddress, style: {
+                                            display: 'block',
+                                            marginTop: '8px',
+                                            padding: '5px 10px',
+                                            backgroundColor: hitAddress ? '#ccc' : '#28a745',
+                                            color: 'white',
+                                            border: 'none',
+                                            borderRadius: '5px',
+                                            cursor: hitAddress ? 'not-allowed' : 'pointer'
+                                        }, children: 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), onConnectWallet: connectWallet, onSignIn: signInWallet, onSave: savePermissions, isNeedSignInWithWallet: isNeedSignInWithWallet, walletInfo: walletInfo, onVerifyWallet: handleVerifyWalletClick }) })), 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" })] }))] }));
+};