gbclient/app/meet/page.tsx

// app/meeting/[room]/page.tsx
'use client'

import { useState, useEffect, useRef } from 'react'
import { LiveKitRoom, VideoConference } from '@livekit/components-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Card } from '@/components/ui/card'
import { ScrollArea } from '@/components/ui/scroll-area'
import '@livekit/components-styles';
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Mic, MicOff, Video, VideoOff, Send, Bot } from 'lucide-react'

export default function MeetRoomPage() {

  const [name, setName] = useState('');
  

  const [roomName, setRoomName] = useState('General Bots');

  const [token, setToken] = useState('')
  const [isConnected, setIsConnected] = useState(false)
  const [messages, setMessages] = useState<Array<{ sender: string, text: string, isBot: boolean }>>([])
  const [inputMessage, setInputMessage] = useState('')
  const [micEnabled, setMicEnabled] = useState(true)
  const [cameraEnabled, setCameraEnabled] = useState(true)
  const [botTyping, setBotTyping] = useState(false)
  const botConnectionRef = useRef<any>(null)


  // Connect to LiveKit room
  const connectToRoom = async () => {
    try {
      const resp = await fetch(`https://generalbots.online/PROD-GeneralBots006/meeting-token?room=${roomName}&identity=${name || 'user'}`)
      const data = await resp.json()
      setToken(data.token)
      setIsConnected(true)

      // Connect bot when first user joins
      await connectBot()
    } catch (e) {
      console.error(e)
    }
  }

  // Connect to Bot Framework via Next.js API proxy
  const connectBot = async () => {
    try {
      
      const response = await fetch('https://generalbots.online/directline/PROD-GeneralBots006/conversations', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      })
      
      const data = await response.json()
   
      // Then connect using WebSocket (which doesn't have CORS restrictions)
      const { DirectLine } = await import('botframework-directlinejs')
      const userId = `user_${Math.random().toString(36).slice(2)}`

      botConnectionRef.current = new DirectLine({
        domain: 'https://generalbots.online/directline/PROD-GeneralBots006',
        userId: userId,
        userIdOnStartConversation: userId,
        conversationId: data.conversationId,
        webSocket: false // Force WebSocket connection
      } as any);
      botConnectionRef.current.setUserId(userId);

      // Listen for bot responses
      botConnectionRef.current.activity$.subscribe((activity: any) => {
        console.log('Bot activity:', activity)
        if (activity.text) {
          setBotTyping(false)
          setMessages(prev => [...prev, {
            sender: 'General Bots',
            text: activity.text,
            isBot: true
          }])
          speak(activity.text)
        }
      });

      // Send welcome message
      setMessages(prev => [...prev, {
        sender: 'System',
        text: 'General Bots joined the meeting',
        isBot: true
      }]);
    } catch (error) {
      console.error('Error connecting to bot:', error);
      setMessages(prev => [...prev, {
        sender: 'System',
        text: 'Failed to connect General Bots',
        isBot: true
      }]);
    }
  }

  // Text-to-Speech for bot responses
  const speak = (text: string) => {
    if ('speechSynthesis' in window) {
      const utterance = new SpeechSynthesisUtterance(text)
      utterance.rate = 1.0
      utterance.pitch = 1.0
      speechSynthesis.speak(utterance)
    }
  }

  // Send message to bot
  const sendToBot = (text: string, sender: string) => {
    if (!text.trim() || !botConnectionRef.current) return

    setMessages(prev => [...prev, { sender, text, isBot: false }])
    setBotTyping(true)

    botConnectionRef.current.postActivity({
      from: { id: botConnectionRef.current.userIdOnStartConversation, name: sender },
      type: 'message',
      text
    }).subscribe(
      () => { },
      (err: any) => console.error('Error sending to bot:', err)
    )
  }

  // Manual message send
  const sendMessage = () => {
    sendToBot(inputMessage, name)
    setInputMessage('')
  }

  useEffect(() => {
    if (isConnected) {
      // Setup code if needed
    }
  }, [isConnected])

  if (!isConnected) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen p-4 bg-gradient-to-br from-gray-50 to-gray-100">
        <Card className="w-full max-w-md p-6 shadow-lg rounded-lg border-0">
          <h1 className="text-2xl font-bold mb-6 text-center text-gray-800">Join Meeting</h1>
          <div className="space-y-4">
            <Input
              placeholder="Your Name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary"
            />
            <Input
              placeholder="Room Name"
              value={roomName}
              onChange={(e) => setRoomName(e.target.value)}
              className="border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary"
            />
            <Button
              className="w-full bg-primary hover:bg-primary/90 transition-colors duration-200"
              onClick={connectToRoom}
            >
              Join
            </Button>
          </div>
        </Card>
      </div>
    )
  }

  return (
    <div className="flex flex-col h-screen bg-gray-50">
      <LiveKitRoom data-lk-theme="default"
        token={token}
        serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL}
        connect={true}
        audio={micEnabled}
        video={cameraEnabled}
        className="flex-1"
      >
        <div className="flex flex-1 h-auto">
          
          <div className="flex-1 bg-gray-900 relative overflow-hidden">
            <VideoConference className="h-auto" />
          </div>

          {/* Chat/Transcript Area - Improved readability and interaction */}
          <div className="w-80 border-l flex flex-col bg-white shadow-lg hidden">
            <ScrollArea className="flex-1 p-4 space-y-3">
              {messages.map((msg, i) => (
                <div
                  key={i}
                  className={`p-3 rounded-lg ${msg.isBot ? 'bg-blue-50 border border-blue-100' : 'bg-gray-50 border border-gray-100'}`}
                >
                  <div className="flex items-center gap-2 mb-1.5">
                    {msg.isBot ? (
                      <Avatar className="h-7 w-7 bg-blue-500">
                        <AvatarFallback className="bg-blue-500 text-white">
                          <Bot className="h-4 w-4" />
                        </AvatarFallback>
                      </Avatar>
                    ) : (
                      <Avatar className="h-7 w-7 bg-gray-500">
                        <AvatarFallback className="text-white">
                          {msg.sender[0].toUpperCase()}
                        </AvatarFallback>
                      </Avatar>
                    )}
                    <span className="font-medium text-sm text-gray-800">{msg.sender}</span>
                  </div>
                  <p className="text-sm text-gray-700 pl-9">{msg.text}</p>
                </div>
              ))}
              {botTyping && (
                <div className="p-3 rounded-lg bg-blue-50 border border-blue-100">
                  <div className="flex items-center gap-2 mb-1.5">
                    <Avatar className="h-7 w-7 bg-blue-500">
                      <AvatarFallback className="bg-blue-500 text-white">
                        <Bot className="h-4 w-4" />
                      </AvatarFallback>
                    </Avatar>
                    <span className="font-medium text-sm text-gray-800">General Bots</span>
                  </div>
                  <div className="flex space-x-1 pl-9">
                    <div className="w-2 h-2 rounded-full bg-gray-400 animate-bounce"></div>
                    <div className="w-2 h-2 rounded-full bg-gray-400 animate-bounce" style={{ animationDelay: '0.2s' }}></div>
                    <div className="w-2 h-2 rounded-full bg-gray-400 animate-bounce" style={{ animationDelay: '0.4s' }}></div>
                  </div>
                </div>
              )}
            </ScrollArea>

            {/* Message Input - Enhanced with better visual feedback */}
            <div className="p-4 border-t border-gray-200 bg-white">
              <div className="flex gap-2">
                <Input
                  value={inputMessage}
                  onChange={(e) => setInputMessage(e.target.value)}
                  placeholder="Type a message..."
                  onKeyDown={(e) => e.key === 'Enter' && sendMessage()}
                  className="flex-1 border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary rounded-full px-4"
                />
                <Button
                  size="icon"
                  onClick={sendMessage}
                  className="rounded-full bg-primary hover:bg-primary/90 transition-colors"
                  disabled={!inputMessage.trim()}
                >
                  <Send className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </LiveKitRoom>
    </div>
  )
}