"use client"; import React, { createContext, useContext, useState, useEffect } from 'react'; import { io, Socket } from 'socket.io-client'; import { Terminal } from '@xterm/xterm'; import { createId } from '@paralleldrive/cuid2'; import { createTerminal as createTerminalHelper, closeTerminal as closeTerminalHelper } from '@/lib/terminal'; // Adjust the import path as necessary interface TerminalContextType { socket: Socket | null; terminals: { id: string; terminal: Terminal | null }[]; setTerminals: React.Dispatch>; activeTerminalId: string; setActiveTerminalId: React.Dispatch>; creatingTerminal: boolean; setCreatingTerminal: React.Dispatch>; createNewTerminal: () => void; closeTerminal: (id: string) => void; } const TerminalContext = createContext(undefined); export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [socket, setSocket] = useState(null); const [terminals, setTerminals] = useState<{ id: string; terminal: Terminal | null }[]>([]); const [activeTerminalId, setActiveTerminalId] = useState(''); const [creatingTerminal, setCreatingTerminal] = useState(false); useEffect(() => { // Replace with your server URL const socketIo = io(process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'); setSocket(socketIo); // Log socket events socketIo.on('connect', () => { console.log('Socket connected:', socketIo.id); }); socketIo.on('disconnect', () => { console.log('Socket disconnected'); }); return () => { socketIo.disconnect(); }; }, []); const createNewTerminal = () => { if (socket) { createTerminalHelper({ setTerminals, setActiveTerminalId, setCreatingTerminal, socket, }); } }; const closeTerminal = (id: string) => { const terminalToClose = terminals.find(term => term.id === id); if (terminalToClose && socket) { closeTerminalHelper({ term: terminalToClose, terminals, setTerminals, setActiveTerminalId, setClosingTerminal: () => {}, // Implement if needed socket, activeTerminalId, }); } }; const value = { socket, terminals, setTerminals, activeTerminalId, setActiveTerminalId, creatingTerminal, setCreatingTerminal, createNewTerminal, closeTerminal, }; return ( {children} ); }; export const useTerminal = (): TerminalContextType => { const context = useContext(TerminalContext); if (!context) { throw new Error('useTerminal must be used within a TerminalProvider'); } return context; };