281 lines
No EOL
11 KiB
TypeScript
281 lines
No EOL
11 KiB
TypeScript
// 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 '@livekit/components-styles';
|
|
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) {
|
|
// 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-full">
|
|
{/* Video Area - Enhanced with better contrast and controls */}
|
|
<div className="flex-1 bg-gray-900 relative overflow-hidden">
|
|
<VideoConference className="absolute inset-0" />
|
|
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2 bg-gray-800/80 backdrop-blur-sm p-2 rounded-full">
|
|
<Button
|
|
variant={micEnabled ? 'primary' : 'outline'}
|
|
size="icon"
|
|
onClick={() => setMicEnabled(!micEnabled)}
|
|
className="rounded-full h-10 w-10 hover:bg-gray-700 transition-colors"
|
|
>
|
|
{micEnabled ? <Mic className="h-5 w-5" /> : <MicOff className="h-5 w-5" />}
|
|
</Button>
|
|
<Button
|
|
variant={cameraEnabled ? 'primary' : 'outline'}
|
|
size="icon"
|
|
onClick={() => setCameraEnabled(!cameraEnabled)}
|
|
className="rounded-full h-10 w-10 hover:bg-gray-700 transition-colors"
|
|
>
|
|
{cameraEnabled ? <Video className="h-5 w-5" /> : <VideoOff className="h-5 w-5" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Chat/Transcript Area - Improved readability and interaction */}
|
|
<div className="w-80 border-l flex flex-col bg-white shadow-lg">
|
|
<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">AI Assistant</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>
|
|
)
|
|
} |