Tauri 2.0 WebRTC Video and Audio Streaming

// WebRTC Architecture Overview

// Core components:

// 1. RTCPeerConnection
//    - Manages peer-to-peer connection
//    - Handles ICE candidates
//    - Establishes media streams

// 2. getUserMedia() / getDisplayMedia()
//    - Captures camera/microphone
//    - Captures screen content
//    - Returns MediaStream

// 3. Signaling Server
//    - Exchanges connection information (SDP)
//    - Coordinates ICE candidates
//    - Not part of WebRTC spec (implementation choice)

// 4. STUN/TURN Servers
//    - STUN: Discovers public IP address
//    - TURN: Relays traffic when P2P fails

// Connection establishment flow:

// Peer A (Caller)                    Signaling Server                    Peer B (Callee)
//    |                                      |                                      |
//    | 1. Create RTCPeerConnection          |                                      |
//    |---------------------------------->   |                                      |
//    |                                      |                                      |
//    | 2. Create Offer (SDP)                |                                      |
//    |---------------------------------->   |                                      |
//    |                                      |                                      |
//    | 3. Send Offer via signaling          |                                      |
//    |====================================> |                                      |
//    |                                      | ====================================>|
//    |                                      |                  4. Receive Offer   |
//    |                                      |                                      |
//    |                                      |                  5. Create Answer   |
//    |                                      | <====================================|
//    | 6. Receive Answer                    |                                      |
//    | <====================================|                                      |
//    |                                      |                                      |
//    | 7. Exchange ICE candidates           |                                      |
//    | <===================================>|<===================================> |
//    |                                      |                                      |
//    | 8. Establish P2P connection          |                                      |
//    |<===================================================================>        |
//    |                                      |                                      |
//    | 9. Media streaming (direct)          |                                      |
//    |<===================================================================>        |

// Basic WebRTC setup in Tauri frontend

// Get user media (camera/microphone)
const getUserMedia = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: {
        width: { ideal: 1280 },
        height: { ideal: 720 },
        frameRate: { ideal: 30 }
      },
      audio: {
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true
      }
    });
    
    return stream;
  } catch (error) {
    console.error('Error accessing media devices:', error);
    throw error;
  }
};

// Get display media (screen sharing)
const getDisplayMedia = async () => {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        cursor: 'always'
      },
      audio: false  // Some browsers support audio
    });
    
    return stream;
  } catch (error) {
    console.error('Error capturing screen:', error);
    throw error;
  }
};

// Create RTCPeerConnection
const createPeerConnection = () => {
  const configuration = {
    iceServers: [
      // Google's public STUN server
      { urls: 'stun:stun.l.google.com:19302' },
      { urls: 'stun:stun1.l.google.com:19302' },
      
      // TURN server (if needed)
      {
        urls: 'turn:your-turn-server.com:3478',
        username: 'username',
        credential: 'password'
      }
    ]
  };
  
  const peerConnection = new RTCPeerConnection(configuration);
  
  return peerConnection;
};

// Session Description Protocol (SDP)
// Contains:
// - Media formats (codecs)
// - Network information
// - Session timing
// - Encryption keys

// ICE (Interactive Connectivity Establishment)
// Candidates types:
// - Host: Local IP address
// - Server Reflexive (srflx): Public IP via STUN
// - Relay: TURN server address

// NAT Traversal strategies:
// 1. STUN: Discover public IP for direct connection
// 2. TURN: Relay traffic through server (fallback)
// 3. ICE: Try all candidates, use best one

// src/App.jsx - Video call component
import { invoke } from '@tauri-apps/api/core';
import { useState, useRef, useEffect } from 'react';

function VideoCall() {
  const [isCallActive, setIsCallActive] = useState(false);
  const [isMuted, setIsMuted] = useState(false);
  const [isVideoOff, setIsVideoOff] = useState(false);
  
  const localVideoRef = useRef(null);
  const remoteVideoRef = useRef(null);
  const peerConnectionRef = useRef(null);
  const localStreamRef = useRef(null);
  const signalingSocketRef = useRef(null);
  
  // Initialize WebRTC
  useEffect(() => {
    initializeSignaling();
    
    return () => {
      cleanup();
    };
  }, []);
  
  const initializeSignaling = async () => {
    // Connect to signaling server (WebSocket)
    const socket = new WebSocket('ws://localhost:8080');
    
    socket.onopen = () => {
      console.log('Signaling connection established');
    };
    
    socket.onmessage = async (event) => {
      const data = JSON.parse(event.data);
      await handleSignalingMessage(data);
    };
    
    signalingSocketRef.current = socket;
  };
  
  const startCall = async () => {
    try {
      // Get local media stream
      const stream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
      });
      
      localStreamRef.current = stream;
      localVideoRef.current.srcObject = stream;
      
      // Create peer connection
      const peerConnection = new RTCPeerConnection({
        iceServers: [
          { urls: 'stun:stun.l.google.com:19302' }
        ]
      });
      
      // Add local stream tracks to peer connection
      stream.getTracks().forEach(track => {
        peerConnection.addTrack(track, stream);
      });
      
      // Handle remote stream
      peerConnection.ontrack = (event) => {
        if (remoteVideoRef.current) {
          remoteVideoRef.current.srcObject = event.streams[0];
        }
      };
      
      // Handle ICE candidates
      peerConnection.onicecandidate = (event) => {
        if (event.candidate) {
          sendSignalingMessage({
            type: 'ice-candidate',
            candidate: event.candidate
          });
        }
      };
      
      // Handle connection state changes
      peerConnection.onconnectionstatechange = () => {
        console.log('Connection state:', peerConnection.connectionState);
        
        if (peerConnection.connectionState === 'failed') {
          console.error('Connection failed');
          endCall();
        }
      };
      
      peerConnectionRef.current = peerConnection;
      
      // Create and send offer
      const offer = await peerConnection.createOffer();
      await peerConnection.setLocalDescription(offer);
      
      sendSignalingMessage({
        type: 'offer',
        sdp: offer
      });
      
      setIsCallActive(true);
    } catch (error) {
      console.error('Error starting call:', error);
      alert('Failed to start call: ' + error.message);
    }
  };
  
  const handleSignalingMessage = async (data) => {
    const peerConnection = peerConnectionRef.current;
    
    if (!peerConnection) {
      console.warn('Peer connection not initialized');
      return;
    }
    
    switch (data.type) {
      case 'offer':
        // Received offer from remote peer
        await peerConnection.setRemoteDescription(
          new RTCSessionDescription(data.sdp)
        );
        
        // Create and send answer
        const answer = await peerConnection.createAnswer();
        await peerConnection.setLocalDescription(answer);
        
        sendSignalingMessage({
          type: 'answer',
          sdp: answer
        });
        
        setIsCallActive(true);
        break;
      
      case 'answer':
        // Received answer from remote peer
        await peerConnection.setRemoteDescription(
          new RTCSessionDescription(data.sdp)
        );
        break;
      
      case 'ice-candidate':
        // Received ICE candidate
        await peerConnection.addIceCandidate(
          new RTCIceCandidate(data.candidate)
        );
        break;
      
      case 'end-call':
        endCall();
        break;
    }
  };
  
  const sendSignalingMessage = (message) => {
    if (signalingSocketRef.current?.readyState === WebSocket.OPEN) {
      signalingSocketRef.current.send(JSON.stringify(message));
    }
  };
  
  const toggleMute = () => {
    if (localStreamRef.current) {
      const audioTrack = localStreamRef.current.getAudioTracks()[0];
      if (audioTrack) {
        audioTrack.enabled = !audioTrack.enabled;
        setIsMuted(!audioTrack.enabled);
      }
    }
  };
  
  const toggleVideo = () => {
    if (localStreamRef.current) {
      const videoTrack = localStreamRef.current.getVideoTracks()[0];
      if (videoTrack) {
        videoTrack.enabled = !videoTrack.enabled;
        setIsVideoOff(!videoTrack.enabled);
      }
    }
  };
  
  const endCall = () => {
    // Stop local stream
    if (localStreamRef.current) {
      localStreamRef.current.getTracks().forEach(track => track.stop());
      localStreamRef.current = null;
    }
    
    // Close peer connection
    if (peerConnectionRef.current) {
      peerConnectionRef.current.close();
      peerConnectionRef.current = null;
    }
    
    // Clear video elements
    if (localVideoRef.current) {
      localVideoRef.current.srcObject = null;
    }
    if (remoteVideoRef.current) {
      remoteVideoRef.current.srcObject = null;
    }
    
    // Notify remote peer
    sendSignalingMessage({ type: 'end-call' });
    
    setIsCallActive(false);
    setIsMuted(false);
    setIsVideoOff(false);
  };
  
  const cleanup = () => {
    endCall();
    
    if (signalingSocketRef.current) {
      signalingSocketRef.current.close();
    }
  };
  
  return (
    <div className="video-call">
      <div className="video-container">
        <video
          ref={remoteVideoRef}
          autoPlay
          playsInline
          className="remote-video"
        />
        
        <video
          ref={localVideoRef}
          autoPlay
          playsInline
          muted
          className="local-video"
        />
      </div>
      
      <div className="controls">
        {!isCallActive ? (
          <button onClick={startCall}>Start Call</button>
        ) : (
          <>
            <button onClick={toggleMute}>
              {isMuted ? 'Unmute' : 'Mute'}
            </button>
            <button onClick={toggleVideo}>
              {isVideoOff ? 'Start Video' : 'Stop Video'}
            </button>
            <button onClick={endCall} className="end-call">
              End Call
            </button>
          </>
        )}
      </div>
    </div>
  );
}

export default VideoCall;

// signaling-server.js - Simple Node.js signaling server

const WebSocket = require('ws');
const express = require('express');
const http = require('http');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

// Store connected clients
const clients = new Map();

wss.on('connection', (ws) => {
  // Generate unique client ID
  const clientId = generateId();
  clients.set(clientId, ws);
  
  console.log(`Client ${clientId} connected. Total clients: ${clients.size}`);
  
  // Send client ID to the client
  ws.send(JSON.stringify({
    type: 'connected',
    clientId: clientId
  }));
  
  ws.on('message', (message) => {
    try {
      const data = JSON.parse(message);
      handleMessage(clientId, data);
    } catch (error) {
      console.error('Error parsing message:', error);
    }
  });
  
  ws.on('close', () => {
    console.log(`Client ${clientId} disconnected`);
    clients.delete(clientId);
    
    // Notify other clients
    broadcast(clientId, {
      type: 'peer-disconnected',
      clientId: clientId
    });
  });
  
  ws.on('error', (error) => {
    console.error(`WebSocket error for client ${clientId}:`, error);
  });
});

function handleMessage(senderId, data) {
  const { type, targetId, ...payload } = data;
  
  switch (type) {
    case 'offer':
    case 'answer':
    case 'ice-candidate':
      // Forward signaling message to target peer
      if (targetId && clients.has(targetId)) {
        const targetWs = clients.get(targetId);
        targetWs.send(JSON.stringify({
          type: type,
          senderId: senderId,
          ...payload
        }));
      }
      break;
    
    case 'get-peers':
      // Send list of available peers
      const peers = Array.from(clients.keys())
        .filter(id => id !== senderId);
      
      const ws = clients.get(senderId);
      ws.send(JSON.stringify({
        type: 'peers-list',
        peers: peers
      }));
      break;
    
    default:
      console.log(`Unknown message type: ${type}`);
  }
}

function broadcast(excludeId, message) {
  clients.forEach((ws, clientId) => {
    if (clientId !== excludeId && ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify(message));
    }
  });
}

function generateId() {
  return Math.random().toString(36).substring(2, 15);
}

const PORT = process.env.PORT || 8080;
server.listen(PORT, () => {
  console.log(`Signaling server running on port ${PORT}`);
});

// Enhanced signaling with rooms (for multi-party calls)

class Room {
  constructor(id) {
    this.id = id;
    this.participants = new Map();
  }
  
  addParticipant(clientId, ws) {
    this.participants.set(clientId, ws);
    
    // Notify existing participants
    this.broadcast(clientId, {
      type: 'participant-joined',
      participantId: clientId
    });
  }
  
  removeParticipant(clientId) {
    this.participants.delete(clientId);
    
    this.broadcast(clientId, {
      type: 'participant-left',
      participantId: clientId
    });
  }
  
  broadcast(excludeId, message) {
    this.participants.forEach((ws, clientId) => {
      if (clientId !== excludeId && ws.readyState === WebSocket.OPEN) {
        ws.send(JSON.stringify(message));
      }
    });
  }
  
  getParticipants() {
    return Array.from(this.participants.keys());
  }
}

const rooms = new Map();

function handleRoomMessage(senderId, data) {
  const { type, roomId, ...payload } = data;
  
  switch (type) {
    case 'join-room':
      let room = rooms.get(roomId);
      if (!room) {
        room = new Room(roomId);
        rooms.set(roomId, room);
      }
      
      const ws = clients.get(senderId);
      room.addParticipant(senderId, ws);
      
      // Send current participants to new joiner
      ws.send(JSON.stringify({
        type: 'room-participants',
        participants: room.getParticipants().filter(id => id !== senderId)
      }));
      break;
    
    case 'leave-room':
      const existingRoom = rooms.get(roomId);
      if (existingRoom) {
        existingRoom.removeParticipant(senderId);
        
        if (existingRoom.participants.size === 0) {
          rooms.delete(roomId);
        }
      }
      break;
  }
}

// Rust signaling server using Tauri backend
// src-tauri/src/signaling.rs

use tokio_tungstenite::{accept_async, tungstenite::Message};
use futures_util::{StreamExt, SinkExt};
use std::collections::HashMap;
use std::sync::{Arc, Mutex};

type Clients = Arc<Mutex<HashMap<String, tokio::sync::mpsc::UnboundedSender<Message>>>>;

pub async fn start_signaling_server(port: u16) {
    let clients: Clients = Arc::new(Mutex::new(HashMap::new()));
    
    let addr = format!("127.0.0.1:{}", port);
    let listener = tokio::net::TcpListener::bind(&addr).await.unwrap();
    
    println!("Signaling server listening on {}", addr);
    
    while let Ok((stream, _)) = listener.accept().await {
        let clients = clients.clone();
        
        tokio::spawn(async move {
            handle_connection(stream, clients).await;
        });
    }
}

async fn handle_connection(
    stream: tokio::net::TcpStream,
    clients: Clients
) {
    let ws_stream = accept_async(stream).await.unwrap();
    let (mut ws_sender, mut ws_receiver) = ws_stream.split();
    
    let client_id = uuid::Uuid::new_v4().to_string();
    
    let (tx, mut rx) = tokio::sync::mpsc::unbounded_channel();
    clients.lock().unwrap().insert(client_id.clone(), tx);
    
    // Send messages from channel to WebSocket
    tokio::spawn(async move {
        while let Some(msg) = rx.recv().await {
            if ws_sender.send(msg).await.is_err() {
                break;
            }
        }
    });
    
    // Handle incoming messages
    while let Some(msg) = ws_receiver.next().await {
        if let Ok(msg) = msg {
            if let Message::Text(text) = msg {
                // Handle signaling message
                // Forward to target peer
            }
        }
    }
    
    // Cleanup
    clients.lock().unwrap().remove(&client_id);
}

// Screen sharing component
import { useState, useRef } from 'react';

function ScreenShare() {
  const [isSharing, setIsSharing] = useState(false);
  const videoRef = useRef(null);
  const streamRef = useRef(null);
  const peerConnectionRef = useRef(null);
  
  const startScreenShare = async () => {
    try {
      // Request screen capture
      const stream = await navigator.mediaDevices.getDisplayMedia({
        video: {
          cursor: 'always',  // Include cursor
          displaySurface: 'monitor',  // Prefer full monitor
          logicalSurface: true,
          width: { ideal: 1920 },
          height: { ideal: 1080 },
          frameRate: { ideal: 30 }
        },
        audio: {
          echoCancellation: true,
          noiseSuppression: true,
          sampleRate: 44100
        }
      });
      
      streamRef.current = stream;
      videoRef.current.srcObject = stream;
      
      // Handle stream ending (user stops sharing)
      stream.getVideoTracks()[0].addEventListener('ended', () => {
        stopScreenShare();
      });
      
      // Add stream to peer connection if exists
      if (peerConnectionRef.current) {
        replaceTrack(stream);
      }
      
      setIsSharing(true);
    } catch (error) {
      console.error('Error starting screen share:', error);
      
      if (error.name === 'NotAllowedError') {
        alert('Screen sharing permission denied');
      } else if (error.name === 'NotFoundError') {
        alert('No screen available to share');
      } else {
        alert('Failed to start screen sharing');
      }
    }
  };
  
  const stopScreenShare = () => {
    if (streamRef.current) {
      streamRef.current.getTracks().forEach(track => track.stop());
      streamRef.current = null;
      videoRef.current.srcObject = null;
    }
    
    setIsSharing(false);
  };
  
  const replaceTrack = async (newStream) => {
    const videoTrack = newStream.getVideoTracks()[0];
    
    const senders = peerConnectionRef.current.getSenders();
    const videoSender = senders.find(sender => 
      sender.track?.kind === 'video'
    );
    
    if (videoSender) {
      await videoSender.replaceTrack(videoTrack);
    }
  };
  
  return (
    <div className="screen-share">
      <video
        ref={videoRef}
        autoPlay
        playsInline
        className="screen-preview"
      />
      
      {!isSharing ? (
        <button onClick={startScreenShare}>
          Start Screen Share
        </button>
      ) : (
        <button onClick={stopScreenShare}>
          Stop Screen Share
        </button>
      )}
    </div>
  );
}

// Combined camera and screen share with switching
function MediaSelector() {
  const [currentSource, setCurrentSource] = useState('camera');
  const videoRef = useRef(null);
  const streamRef = useRef(null);
  
  const switchToCamera = async () => {
    stopCurrentStream();
    
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    
    videoRef.current.srcObject = stream;
    streamRef.current = stream;
    setCurrentSource('camera');
  };
  
  const switchToScreen = async () => {
    stopCurrentStream();
    
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true
    });
    
    videoRef.current.srcObject = stream;
    streamRef.current = stream;
    setCurrentSource('screen');
  };
  
  const stopCurrentStream = () => {
    if (streamRef.current) {
      streamRef.current.getTracks().forEach(track => track.stop());
    }
  };
  
  return (
    <div>
      <video ref={videoRef} autoPlay playsInline />
      
      <div className="source-selector">
        <button 
          onClick={switchToCamera}
          disabled={currentSource === 'camera'}
        >
          Camera
        </button>
        
        <button 
          onClick={switchToScreen}
          disabled={currentSource === 'screen'}
        >
          Screen
        </button>
      </div>
    </div>
  );
}

export default ScreenShare;

// WebRTC Data Channel for chat and file transfer

class DataChannelManager {
  constructor(peerConnection) {
    this.peerConnection = peerConnection;
    this.dataChannel = null;
    this.messageHandlers = [];
    this.fileHandlers = [];
  }
  
  // Create data channel (caller side)
  createDataChannel(label = 'dataChannel') {
    this.dataChannel = this.peerConnection.createDataChannel(label, {
      ordered: true,  // Guaranteed order
      maxRetransmits: 3  // Retry count
    });
    
    this.setupDataChannelEvents();
    return this.dataChannel;
  }
  
  // Handle data channel (callee side)
  handleDataChannel() {
    this.peerConnection.ondatachannel = (event) => {
      this.dataChannel = event.channel;
      this.setupDataChannelEvents();
    };
  }
  
  setupDataChannelEvents() {
    this.dataChannel.onopen = () => {
      console.log('Data channel opened');
    };
    
    this.dataChannel.onclose = () => {
      console.log('Data channel closed');
    };
    
    this.dataChannel.onerror = (error) => {
      console.error('Data channel error:', error);
    };
    
    this.dataChannel.onmessage = (event) => {
      this.handleMessage(event.data);
    };
  }
  
  handleMessage(data) {
    try {
      const message = JSON.parse(data);
      
      switch (message.type) {
        case 'chat':
          this.messageHandlers.forEach(handler => 
            handler(message.content)
          );
          break;
        
        case 'file-metadata':
          this.handleFileMetadata(message);
          break;
        
        case 'file-chunk':
          this.handleFileChunk(message);
          break;
      }
    } catch (error) {
      console.error('Error handling message:', error);
    }
  }
  
  // Send chat message
  sendMessage(text) {
    if (this.dataChannel?.readyState === 'open') {
      this.dataChannel.send(JSON.stringify({
        type: 'chat',
        content: text,
        timestamp: Date.now()
      }));
    }
  }
  
  // Send file
  async sendFile(file) {
    if (this.dataChannel?.readyState !== 'open') {
      throw new Error('Data channel not open');
    }
    
    const CHUNK_SIZE = 16384; // 16KB chunks
    const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
    
    // Send file metadata
    this.dataChannel.send(JSON.stringify({
      type: 'file-metadata',
      name: file.name,
      size: file.size,
      type: file.type,
      totalChunks: totalChunks
    }));
    
    // Send file in chunks
    let offset = 0;
    let chunkIndex = 0;
    
    while (offset < file.size) {
      const chunk = file.slice(offset, offset + CHUNK_SIZE);
      const arrayBuffer = await chunk.arrayBuffer();
      
      // Send chunk with metadata
      this.dataChannel.send(JSON.stringify({
        type: 'file-chunk',
        index: chunkIndex,
        totalChunks: totalChunks
      }));
      
      // Wait for buffered amount to reduce
      while (this.dataChannel.bufferedAmount > CHUNK_SIZE * 8) {
        await new Promise(resolve => setTimeout(resolve, 10));
      }
      
      this.dataChannel.send(arrayBuffer);
      
      offset += CHUNK_SIZE;
      chunkIndex++;
    }
  }
  
  // Handle incoming file
  fileMetadata = null;
  fileChunks = [];
  
  handleFileMetadata(metadata) {
    this.fileMetadata = metadata;
    this.fileChunks = [];
    
    console.log('Receiving file:', metadata.name);
  }
  
  handleFileChunk(chunkMeta) {
    // Actual chunk data comes in next message
    // Store and reconstruct file when complete
    if (chunkMeta.index === chunkMeta.totalChunks - 1) {
      this.reconstructFile();
    }
  }
  
  reconstructFile() {
    const blob = new Blob(this.fileChunks, {
      type: this.fileMetadata.type
    });
    
    // Trigger download
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = this.fileMetadata.name;
    a.click();
    
    URL.revokeObjectURL(url);
    
    // Notify handlers
    this.fileHandlers.forEach(handler => 
      handler(this.fileMetadata, blob)
    );
    
    // Cleanup
    this.fileMetadata = null;
    this.fileChunks = [];
  }
  
  // Register handlers
  onMessage(handler) {
    this.messageHandlers.push(handler);
  }
  
  onFile(handler) {
    this.fileHandlers.push(handler);
  }
}

// Usage in React component
function ChatWithFileTransfer() {
  const [messages, setMessages] = useState([]);
  const [inputText, setInputText] = useState('');
  const dataChannelRef = useRef(null);
  const peerConnectionRef = useRef(null);
  
  useEffect(() => {
    // Initialize data channel
    const dcManager = new DataChannelManager(peerConnectionRef.current);
    dcManager.createDataChannel();
    
    dcManager.onMessage((message) => {
      setMessages(prev => [...prev, message]);
    });
    
    dcManager.onFile((metadata, blob) => {
      console.log('File received:', metadata.name);
    });
    
    dataChannelRef.current = dcManager;
  }, []);
  
  const sendMessage = () => {
    if (inputText.trim()) {
      dataChannelRef.current?.sendMessage(inputText);
      setMessages(prev => [...prev, inputText]);
      setInputText('');
    }
  };
  
  const handleFileSelect = (event) => {
    const file = event.target.files[0];
    if (file) {
      dataChannelRef.current?.sendFile(file);
    }
  };
  
  return (
    <div className="chat">
      <div className="messages">
        {messages.map((msg, i) => (
          <div key={i} className="message">{msg}</div>
        ))}
      </div>
      
      <div className="input">
        <input
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
          placeholder="Type a message..."
        />
        
        <button onClick={sendMessage}>Send</button>
        
        <input
          type="file"
          onChange={handleFileSelect}
          style={{ display: 'none' }}
          id="file-input"
        />
        <label htmlFor="file-input">
          <button>Send File</button>
        </label>
      </div>
    </div>
  );
}

export default ChatWithFileTransfer;