@bytexbyte/nxtlinq-ai-agent-sdk 1.0.7 → 1.0.9

package/src/components/ChatBot.tsx

@@ -1,1192 +0,0 @@
-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';
-
-export interface Message {
-  id: string;
-  content: string;
-  role: 'user' | 'assistant';
-  timestamp: string;
-  button?: boolean;
-  error?: string;
-}
-
-export interface PresetMessage {
-  text: string;
-  autoSend?: boolean;
-}
-
-export interface ToolUse {
-  name: string;
-  input: Record<string, any>;
-}
-
-export interface AITMetadata {
-  model: string;
-  permissions: string[];
-  issuedBy: string;
-}
-
-export interface AIT {
-  aitId: string;
-  controller: string;
-  metadata: AITMetadata;
-  metadataHash: string;
-  metadataCid: string;
-  signature: string;
-}
-
-export interface ChatBotProps {
-  projectId?: string;
-  onMessage?: (message: Message) => void;
-  onError?: (error: Error) => void;
-  onToolUse?: (toolUse: ToolUse) => Promise<Message | void>;
-  presetMessages?: PresetMessage[];
-  placeholder?: string;
-  className?: string;
-  maxRetries?: number;
-  retryDelay?: number;
-  serviceId: string;
-  apiKey: string;
-  apiSecret: string;
-  onVerifyWallet?: (address: string) => Promise<{
-    token: string;
-  }>;
-}
-
-const PermissionForm: React.FC<{
-  hitAddress: string | null;
-  permissions: string[];
-  setPermissions: (permissions: string[]) => void;
-  setIsDisabled: (disabled: boolean) => void;
-  onClose: () => void;
-  onSave: () => void;
-  onConnectWallet: () => void;
-  onSignIn: () => void;
-  isNeedSignInWithWallet: boolean;
-  walletInfo: any;
-  onVerifyWallet: () => void;
-}> = ({ 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 (
-    <div style={{
-      backgroundColor: 'white',
-      padding: '24px',
-      borderRadius: '12px',
-      width: '480px',
-      maxWidth: '90%',
-      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
-    }}>
-      <div style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: '24px'
-      }}>
-        <h3 style={{
-          margin: 0,
-          fontSize: '20px',
-          fontWeight: '600',
-          color: '#1a1a1a'
-        }}>AIT Settings</h3>
-        <button
-          onClick={onClose}
-          style={{
-            background: 'none',
-            border: 'none',
-            fontSize: '24px',
-            cursor: 'pointer',
-            color: '#666',
-            padding: '4px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          ×
-        </button>
-      </div>
-
-      {!hitAddress ? (
-        <div style={{ textAlign: 'center', padding: '32px 0' }}>
-          <div style={{
-            width: '64px',
-            height: '64px',
-            margin: '0 auto 16px',
-            backgroundColor: '#f5f5f5',
-            borderRadius: '50%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}>
-            <span style={{ fontSize: '32px' }}>👛</span>
-          </div>
-          <p style={{
-            marginBottom: '24px',
-            fontSize: '16px',
-            color: '#666'
-          }}>Please connect your wallet first</p>
-          <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'}
-          >
-            Connect Wallet
-          </button>
-        </div>
-      ) : isNeedSignInWithWallet ? (
-        <div style={{ textAlign: 'center', padding: '32px 0' }}>
-          <div style={{ marginBottom: '24px' }}>
-            <h4 style={{
-              marginBottom: '12px',
-              fontSize: '16px',
-              color: '#666'
-            }}>Connected Wallet</h4>
-            <p style={{
-              wordBreak: 'break-all',
-              backgroundColor: '#f8f9fa',
-              padding: '12px',
-              borderRadius: '8px',
-              fontSize: '14px',
-              color: '#333',
-              border: '1px solid #e9ecef'
-            }}>
-              {hitAddress}
-            </p>
-          </div>
-          <p style={{
-            marginBottom: '24px',
-            fontSize: '16px',
-            color: '#666'
-          }}>Please sign in to continue</p>
-          <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'}
-          >
-            Sign In
-          </button>
-        </div>
-      ) : !isWalletVerified ? (
-        <div style={{ textAlign: 'center', padding: '32px 0' }}>
-          <div style={{ marginBottom: '24px' }}>
-            <h4 style={{
-              marginBottom: '12px',
-              fontSize: '16px',
-              color: '#666'
-            }}>Connected Wallet</h4>
-            <p style={{
-              wordBreak: 'break-all',
-              backgroundColor: '#f8f9fa',
-              padding: '12px',
-              borderRadius: '8px',
-              fontSize: '14px',
-              color: '#333',
-              border: '1px solid #e9ecef'
-            }}>
-              {hitAddress}
-            </p>
-          </div>
-          <p style={{
-            marginBottom: '24px',
-            fontSize: '16px',
-            color: '#666'
-          }}>Please verify your wallet to continue</p>
-          <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'}
-          >
-            Verify your wallet
-          </button>
-        </div>
-      ) : (
-        <>
-          <div style={{ marginBottom: '24px' }}>
-            <h4 style={{
-              marginBottom: '12px',
-              fontSize: '16px',
-              color: '#666'
-            }}>Connected Wallet</h4>
-            <p style={{
-              wordBreak: 'break-all',
-              backgroundColor: '#f8f9fa',
-              padding: '12px',
-              borderRadius: '8px',
-              fontSize: '14px',
-              color: '#333',
-              border: '1px solid #e9ecef'
-            }}>
-              {hitAddress}
-            </p>
-          </div>
-          <div style={{ marginBottom: '24px' }}>
-            <h4 style={{
-              marginBottom: '12px',
-              fontSize: '16px',
-              color: '#666'
-            }}>Permissions</h4>
-            <div style={{
-              backgroundColor: '#f8f9fa',
-              padding: '16px',
-              borderRadius: '8px',
-              border: '1px solid #e9ecef'
-            }}>
-              {availablePermissions.map((permission) => (
-                <div key={permission.id} style={{ marginBottom: '12px' }}>
-                  <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'}
-                  >
-                    <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'
-                      }}
-                    />
-                    <span style={{
-                      fontSize: '14px',
-                      color: '#333'
-                    }}>{permission.label}</span>
-                  </label>
-                </div>
-              ))}
-            </div>
-          </div>
-          <div style={{
-            display: 'flex',
-            justifyContent: 'flex-end',
-            gap: '12px',
-            borderTop: '1px solid #e9ecef',
-            paddingTop: '24px'
-          }}>
-            <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';
-              }}
-            >
-              Cancel
-            </button>
-            <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';
-                }
-              }}
-            >
-              Save
-            </button>
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-export const ChatBot: React.FC<ChatBotProps> = ({
-  projectId,
-  onMessage,
-  onError,
-  onToolUse,
-  presetMessages = [],
-  placeholder = 'Type a message...',
-  className = '',
-  maxRetries = 3,
-  retryDelay = 1000,
-  serviceId,
-  apiKey,
-  apiSecret,
-  onVerifyWallet
-}) => {
-  const [messages, setMessages] = React.useState<Message[]>([]);
-  const [inputValue, setInputValue] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [hitAddress, setHitAddress] = React.useState<string | null>(null);
-  const [ait, setAit] = React.useState<AIT | null>(null);
-  const [permissions, setPermissions] = React.useState<string[]>([]);
-  const [showPermissionForm, setShowPermissionForm] = React.useState(false);
-  const [success, setSuccess] = React.useState(false);
-  const messagesEndRef = React.useRef<HTMLDivElement>(null);
-  const [isDisabled, setIsDisabled] = React.useState(true);
-  const [signer, setSigner] = React.useState<ethers.Signer | null>(null);
-  const [provider, setProvider] = React.useState<ethers.BrowserProvider | null>(null);
-  const [accessToken, setAccessToken] = React.useState<string | null>(null);
-  const [walletInfo, setWalletInfo] = React.useState<any>(null);
-  const verifyWalletBtnRef = React.useRef<HTMLButtonElement>(null);
-
-  const nxtlinqApi = React.useMemo(() => createNxtlinqApi(apiKey, apiSecret), [apiKey, apiSecret]);
-
-  const isNeedSignInWithWallet = React.useMemo(() => {
-    if (!hitAddress) {
-      console.log('isNeedSignInWithWallet: false (no hitAddress)');
-      return false;
-    }
-
-    const nxtlinqAITServiceAccessToken = localStorage.getItem('nxtlinqAITServiceAccessToken');
-    if (!nxtlinqAITServiceAccessToken) {
-      console.log('isNeedSignInWithWallet: true (no token)');
-      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) {
-        console.log('isNeedSignInWithWallet: true (token expired)');
-        return true;
-      }
-
-      // Check is the token's payload has the same address as the wallet address
-      const address = payload.address;
-      if (address !== hitAddress) {
-        console.log('isNeedSignInWithWallet: true (address mismatch)');
-        return true;
-      }
-
-      console.log('isNeedSignInWithWallet: false (valid token)');
-      return false;
-    } catch (error) {
-      console.error('Error parsing token:', error);
-      console.log('isNeedSignInWithWallet: true (token parse error)');
-      return true;
-    }
-  }, [hitAddress]);
-
-  const handleVerifySuccess = (address: string) => {
-    console.log('handleVerifySuccess called with address:', 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 as string);
-      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') {
-                // 已存在则直接获取钱包信息
-                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);
-                  }
-                }
-                // 清理 URL 上的 token
-                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;
-            }
-            // 验证成功，获取钱包信息
-            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);
-              }
-            }
-            // 清理 URL 上的 token
-            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;
-    }
-  };
-
-  // 添加一个 useEffect 来处理 URL 参数
-  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;
-      localStorage.setItem('nxtlinqAITServiceAccessToken', JSON.stringify(accessToken));
-      setAccessToken(accessToken);
-
-      // 登录成功后，获取 AIT 信息
-      try {
-        const token = JSON.parse(localStorage.getItem('nxtlinqAITServiceAccessToken') || '');
-        const aitResponse = await nxtlinqApi.ait.getAITByServiceIdAndController(
-          { serviceId, controller: hitAddress },
-          token
-        );
-        if (!('error' in aitResponse)) {
-          setAit(aitResponse);
-        }
-      } catch (error) {
-        console.error('Failed to get AIT:', error);
-      }
-    } catch (error) {
-      console.error('Failed to sign in:', error);
-      alert('Failed to sign in. Please try again.');
-    }
-  };
-
-  const hasPermission = async (toolName: string) => {
-    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: string, retryCount = 0): Promise<Message> => {
-    try {
-      setIsLoading(true);
-      const response = await nxtlinqApi.agent.sendMessage({
-        message: content,
-        serviceId,
-      });
-
-      if ('error' in response) {
-        throw new Error(response.error);
-      }
-
-      const message: Message = {
-        id: Date.now().toString(),
-        content: response.reply,
-        role: 'assistant',
-        timestamp: new Date().toISOString()
-      };
-
-      setMessages(prev => [...prev, message]);
-      onMessage?.(message);
-      return message;
-    } 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: React.FormEvent) => {
-    e.preventDefault();
-    if (!inputValue.trim() || isLoading) return;
-
-    const userMessage: Message = {
-      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('发送消息失败:', error);
-      onError?.(error instanceof Error ? error : new Error('发送消息失败'));
-      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: PresetMessage) => {
-    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);
-      }
-    }
-  };
-
-  // 添加状态变化的监听
-  React.useEffect(() => {
-    console.log('States updated:', {
-      hitAddress,
-      isNeedSignInWithWallet,
-      walletInfo,
-      isOpen
-    });
-  }, [hitAddress, isNeedSignInWithWallet, walletInfo, isOpen]);
-
-  return (
-    <div style={{
-      position: 'fixed',
-      bottom: '20px',
-      right: '20px',
-      zIndex: 1000,
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'flex-end',
-      gap: '10px'
-    }}>
-      {isOpen && (
-        <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'
-        }}>
-          <div style={{
-            padding: '15px',
-            backgroundColor: '#007bff',
-            color: 'white',
-            borderRadius: '10px 10px 0 0',
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center'
-          }}>
-            <h3 style={{ margin: 0 }}>AI Agent</h3>
-            <div style={{ display: 'flex', gap: '10px' }}>
-              <button
-                onClick={() => setShowPermissionForm(true)}
-                style={{
-                  background: 'none',
-                  border: 'none',
-                  color: 'white',
-                  fontSize: '20px',
-                  cursor: 'pointer',
-                  padding: '0 5px'
-                }}
-              >
-                ⚙️
-              </button>
-              <button
-                onClick={() => setIsOpen(false)}
-                style={{
-                  background: 'none',
-                  border: 'none',
-                  color: 'white',
-                  fontSize: '24px',
-                  cursor: 'pointer',
-                  padding: '0 5px'
-                }}
-              >
-                ×
-              </button>
-            </div>
-          </div>
-
-          <div style={{
-            flex: 1,
-            overflowY: 'auto',
-            padding: '15px',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '10px'
-          }}>
-            {messages.map((message, index) => (
-              <div
-                key={index}
-                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'
-                }}
-              >
-                {message.content}
-                {message.button && (
-                  <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'
-                    }}
-                  >
-                    {hitAddress ? 'Connected' : 'Connect HIT wallet'}
-                  </button>
-                )}
-              </div>
-            ))}
-            {isLoading && (
-              <div style={{
-                alignSelf: 'flex-start',
-                backgroundColor: '#f0f0f0',
-                padding: '8px 12px',
-                borderRadius: '15px',
-                maxWidth: '80%'
-              }}>
-                Thinking...
-              </div>
-            )}
-            <div ref={messagesEndRef} />
-          </div>
-
-          <div style={{
-            padding: '10px',
-            borderTop: '1px solid #eee',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '10px'
-          }}>
-            <div style={{
-              display: 'flex',
-              gap: '5px',
-              overflowX: 'auto',
-              padding: '5px 0'
-            }}>
-              {presetMessages.map((message, index) => (
-                <button
-                  key={index}
-                  onClick={() => handlePresetMessage(message)}
-                  style={{
-                    padding: '5px 10px',
-                    backgroundColor: '#f0f0f0',
-                    border: 'none',
-                    borderRadius: '15px',
-                    cursor: 'pointer',
-                    whiteSpace: 'nowrap',
-                    fontSize: '12px'
-                  }}
-                >
-                  {message.text}
-                </button>
-              ))}
-            </div>
-
-            <form onSubmit={handleSubmit} style={{
-              display: 'flex',
-              gap: '10px'
-            }}>
-              <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'
-                }}
-              />
-              <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
-                }}
-              >
-                Send
-              </button>
-            </form>
-          </div>
-        </div>
-      )}
-
-      <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'
-        }}
-      >
-        AI Agent
-      </button>
-
-      {showPermissionForm && (
-        <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
-        }}>
-          <PermissionForm
-            hitAddress={hitAddress}
-            permissions={permissions}
-            setPermissions={setPermissions}
-            setIsDisabled={setIsDisabled}
-            onClose={() => setShowPermissionForm(false)}
-            onConnectWallet={connectWallet}
-            onSignIn={signInWallet}
-            onSave={savePermissions}
-            isNeedSignInWithWallet={isNeedSignInWithWallet}
-            walletInfo={walletInfo}
-            onVerifyWallet={handleVerifyWalletClick}
-          />
-        </div>
-      )}
-
-      {success && (
-        <div style={{
-          position: 'fixed',
-          bottom: 100,
-          right: 40,
-          background: '#4caf50',
-          color: 'white',
-          padding: '12px 24px',
-          borderRadius: 8,
-          zIndex: 2000,
-          fontWeight: 600,
-        }}>
-          Saved successfully!
-          <button
-            style={{
-              background: 'none',
-              border: 'none',
-              color: 'white',
-              marginLeft: 16,
-              fontSize: 18,
-              cursor: 'pointer'
-            }}
-            onClick={() => setSuccess(false)}
-          >×</button>
-        </div>
-      )}
-    </div>
-  );
-};