Wormhole NextJS Agent Integration

// components/ChatInterface.tsx
import { useState, useEffect, useRef } from 'react';
import MessageBubble from './MessageBubble';
import ChatInput from './ChatInput';
import LogsPanel from './LogsPanel';

export default function ChatInterface() {
  const [messages, setMessages] = useState([]);
  const [logs, setLogs] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  
  const sendMessage = async (message) => {
    setIsLoading(true);
    
    // Add user message to chat
    setMessages(prev => [...prev, { role: 'user', content: message }]);
    
    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message })
      });
      
      const data = await response.json();
      
      // Add agent response to chat
      setMessages(prev => [...prev, { 
        role: 'assistant', 
        content: data.text,
        transactionData: data.transactionData // If available
      }]);
      
      // Add to logs if available
      if (data.logs) {
        setLogs(prev => [...prev, ...data.logs]);
      }
    } catch (error) {
      console.error('Error sending message:', error);
      // Add error message
      setMessages(prev => [...prev, { 
        role: 'assistant', 
        content: 'Sorry, an error occurred while processing your request.' 
      }]);
    } finally {
      setIsLoading(false);
    }
  };
  
  return (
    <div className="flex flex-col h-screen">
      <div className="flex-1 overflow-y-auto p-4">
        {messages.map((message, index) => (
          <MessageBubble key={index} message={message} />
        ))}
      </div>
      
      <ChatInput onSendMessage={sendMessage} isLoading={isLoading} />
      
      <LogsPanel logs={logs} />
    </div>
  );
}

// components/MessageBubble.tsx
import TokenTransferUI from './TokenTransferUI';
import CCTPTransferUI from './CCTPTransferUI';

export default function MessageBubble({ message }) {
  const { role, content, transactionData } = message;
  
  const renderContent = () => {
    // Basic text message
    if (!transactionData) {
      return <p>{content}</p>;
    }
    
    // Render special UI based on transaction type
    switch(transactionData.type) {
      case 'tokenTransfer':
        return (
          <TokenTransferUI 
            content={content}
            transaction={transactionData}
          />
        );
      case 'cctpTransfer':
        return (
          <CCTPTransferUI
            content={content}
            transaction={transactionData}
          />
        );
      case 'chainInfo':
        return (
          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
            {transactionData.chains.map(chain => (
              <div key={chain.id} className="border rounded p-2">
                <h3 className="font-bold">{chain.name}</h3>
                <p className="text-sm">{chain.network}</p>
              </div>
            ))}
          </div>
        );
      default:
        return <p>{content}</p>;
    }
  };
  
  return (
    <div className={`mb-4 ${role === 'user' ? 'text-right' : 'text-left'}`}>
      <div
        className={`inline-block max-w-[85%] rounded-lg p-4 
          ${role === 'user' 
            ? 'bg-blue-500 text-white' 
            : 'bg-gray-200 dark:bg-gray-700 dark:text-white'
          }`
        }
      >
        {renderContent()}
      </div>
    </div>
  );
}

// components/TokenTransferUI.tsx
export default function TokenTransferUI({ content, transaction }) {
  const {
    sourceChain,
    destinationChain,
    token,
    amount,
    sourceTxId,
    destinationTxId,
    status
  } = transaction;
  
  return (
    <div className="bg-gradient-to-r from-green-50 to-green-100 dark:from-green-900 dark:to-green-800 p-4 rounded-lg border-l-4 border-green-500">
      <h3 className="font-bold text-lg mb-2">Token Transfer</h3>
      <p className="mb-2">{content}</p>
      
      <div className="grid grid-cols-2 gap-2 mb-2">
        <div>
          <h4 className="text-xs text-gray-500 dark:text-gray-400">From</h4>
          <p className="font-medium">{sourceChain}</p>
        </div>
        <div>
          <h4 className="text-xs text-gray-500 dark:text-gray-400">To</h4>
          <p className="font-medium">{destinationChain}</p>
        </div>
        <div>
          <h4 className="text-xs text-gray-500 dark:text-gray-400">Token</h4>
          <p className="font-medium">{token}</p>
        </div>
        <div>
          <h4 className="text-xs text-gray-500 dark:text-gray-400">Amount</h4>
          <p className="font-medium">{amount}</p>
        </div>
      </div>
      
      <div className="mt-2 text-xs">
        <div className="flex items-center">
          <div className={`w-3 h-3 rounded-full mr-2 ${
            status === 'completed' ? 'bg-green-500' : 
            status === 'pending' ? 'bg-yellow-500' : 'bg-red-500'
          }`}></div>
          <span className="capitalize">{status}</span>
        </div>
        
        {sourceTxId && (
          <a 
            href={`https://solscan.io/tx/${sourceTxId}`} 
            target="_blank" 
            rel="noopener noreferrer"
            className="text-blue-500 hover:underline block mt-1"
          >
            View Source Transaction
          </a>
        )}
        
        {destinationTxId && (
          <a 
            href={`https://explorer.sui.io/txblock/${destinationTxId}`} 
            target="_blank" 
            rel="noopener noreferrer"
            className="text-blue-500 hover:underline block mt-1"
          >
            View Destination Transaction
          </a>
        )}
      </div>
    </div>
  );
}