CogniSync Integration Dashboard

import { useEffect, useState } from 'react';

export default function ChatbotPage() {
  const [botUrl, setBotUrl] = useState('/b/YOUR_BOT_URL');
  
  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      if (event.data.type !== 'cognisync-bot-resize') return;
      
      const { action } = event.data;
      console.log('Chatbot action:', action);
      
      // Handle resize actions: maximize, minimize, close, etc.
      switch(action) {
        case 'maximize':
          // Handle maximize
          break;
        case 'minimize':
          // Handle minimize
          break;
        case 'close':
          // Handle close
          break;
      }
    };

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  return (
    <div className="w-full h-screen">
      <iframe
        src={botUrl}
        title="CogniSync Chatbot"
        style={{
          width: '100%',
          height: '100%',
          border: 'none',
          borderRadius: '8px',
        }}
      />
    </div>
  );
}