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 { RoomEvent, Track } from 'livekit-client'
import { useRouter } from 'next/navigation'
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 { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Mic, MicOff, Video, VideoOff, Send, Bot } from 'lucide-react'

export default function MeetingPage({ params }: { params: { room: string } }) {
  const router = useRouter()
  const [name, setName] = useState('')
  const [roomName, setRoomName] = useState(params.room || '')
  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)
  const audioContextRef = useRef<AudioContext>()
  const processorRef = useRef<ScriptProcessorNode>()
  const participantsRef = useRef<Map<string, MediaStreamAudioSourceNode>>(new Map())

  // Connect to LiveKit room
  const connectToRoom = async () => {
    try {
      const resp = await fetch(`/api/get-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 {
      // First create a conversation through our API proxy
      const convResponse = await fetch('/api/bot/create-conversation', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      });
      
      const convData = await convResponse.json();
      
      if (!convData.conversationId) {
        throw new Error('Failed to create conversation');
      }

      // 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',
        conversationId: convData.conversationId,
        userId: userId,
        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: 'AI Assistant', 
            text: activity.text, 
            isBot: true 
          }])
          speak(activity.text)
        }
      });

      // Send welcome message
      setMessages(prev => [...prev, { 
        sender: 'System', 
        text: 'AI assistant joined the meeting', 
        isBot: true 
      }]);
    } catch (error) {
      console.error('Error connecting to bot:', error);
      setMessages(prev => [...prev, { 
        sender: 'System', 
        text: 'Failed to connect AI assistant', 
        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) {
      
    }
  }, [isConnected])

  if (!isConnected) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen p-4">
        <Card className="w-full max-w-md p-6">
          <h1 className="text-2xl font-bold mb-4">Join Meeting</h1>
          <div className="space-y-4">
            <Input
              placeholder="Your Name"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <Input
              placeholder="Room Name"
              value={roomName}
              onChange={(e) => setRoomName(e.target.value)}
            />
            <Button className="w-full" onClick={connectToRoom}>
              Join
            </Button>
          </div>
        </Card>
      </div>
    )
  }

  return (
    <div className="flex flex-col h-screen">
      <LiveKitRoom
        token={token}
        serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL}
        connect={true}
        audio={micEnabled}
        video={cameraEnabled}
      >
        <div className="flex flex-1">
          {/* Video Area */}
          <div className="flex-1 bg-gray-800 relative">
            <VideoConference />
            <div className="absolute bottom-4 left-4 flex gap-2">
              <Button
                variant={micEnabled ? 'default' : 'outline'}
                size="icon"
                onClick={() => setMicEnabled(!micEnabled)}
              >
                {micEnabled ? <Mic className="h-4 w-4" /> : <MicOff className="h-4 w-4" />}
              </Button>
              <Button
                variant={cameraEnabled ? 'default' : 'outline'}
                size="icon"
                onClick={() => setCameraEnabled(!cameraEnabled)}
              >
                {cameraEnabled ? <Video className="h-4 w-4" /> : <VideoOff className="h-4 w-4" />}
              </Button>
            </div>
          </div>
          
          {/* Chat/Transcript Area */}
          <div className="w-80 border-l flex flex-col bg-background">
            <ScrollArea className="flex-1 p-4">
              {messages.map((msg, i) => (
                <div key={i} className={`mb-3 ${msg.isBot ? 'bg-muted/50' : ''} p-2 rounded`}>
                  <div className="flex items-center gap-2 mb-1">
                    {msg.isBot ? (
                      <Avatar className="h-6 w-6 bg-primary">
                        <AvatarFallback className="bg-primary">
                          <Bot className="h-3 w-3" />
                        </AvatarFallback>
                      </Avatar>
                    ) : (
                      <Avatar className="h-6 w-6">
                        <AvatarFallback>{msg.sender[0]}</AvatarFallback>
                      </Avatar>
                    )}
                    <span className="font-medium">{msg.sender}</span>
                  </div>
                  <p className="text-sm">{msg.text}</p>
                </div>
              ))}
              {botTyping && (
                <div className="mb-3 bg-muted/50 p-2 rounded">
                  <div className="flex items-center gap-2 mb-1">
                    <Avatar className="h-6 w-6 bg-primary">
                      <AvatarFallback className="bg-primary">
                        <Bot className="h-3 w-3" />
                      </AvatarFallback>
                    </Avatar>
                    <span className="font-medium">AI Assistant</span>
                  </div>
                  <p className="text-sm text-muted-foreground">Typing...</p>
                </div>
              )}
            </ScrollArea>
            
            <div className="p-4 border-t">
              <div className="flex gap-2 mb-2">
                <Input
                  value={inputMessage}
                  onChange={(e) => setInputMessage(e.target.value)}
                  placeholder="Type a message"
                  onKeyDown={(e) => e.key === 'Enter' && sendMessage()}
                />
                <Button size="icon" onClick={sendMessage}>
                  <Send className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </LiveKitRoom>
    </div>
  )
}