From c113227712aeb5b5b5870754bb6fc248a2dd3693 Mon Sep 17 00:00:00 2001 From: Arpandeep Khatua Date: Thu, 21 Nov 2024 16:55:29 -0800 Subject: [PATCH] More UI changes --- .../nodes/frontend/components.json | 22 - .../experimental/nodes/frontend/lib/utils.ts | 6 - .../nodes/{ => frontend}/server.js | 22 +- .../experimental/nodes/frontend/src/App.css | 486 +----------------- .../experimental/nodes/frontend/src/App.tsx | 28 +- .../src/components/Browser/Browser.css | 56 ++ .../{browser.tsx => Browser/Browser.tsx} | 10 +- .../ChatInterface/ChatInterface.css | 323 ++++++++++++ .../ChatInterface/ChatInterface.tsx | 130 +++++ .../src/components/CodeEditor/CodeEditor.css | 51 ++ .../CodeEditor.tsx} | 1 + .../src/components/CodeEditor/FileSystem.css | 37 ++ .../FileSystem.tsx} | 1 + .../src/components/Terminal/Terminal.css | 98 ++++ .../{terminal.tsx => Terminal/Terminal.tsx} | 7 +- .../src/components/chat-interface.tsx | 100 ---- .../experimental/nodes/public/images/jack.png | Bin 106625 -> 0 bytes .../experimental/nodes/public/images/jane.png | Bin 109569 -> 0 bytes examples/experimental/nodes/public/index.html | 124 ----- examples/experimental/nodes/public/index.tsx | 11 - examples/experimental/nodes/public/script.js | 51 -- examples/experimental/nodes/public/styles.css | 247 --------- .../experimental/nodes/public/terminal.js | 39 -- 23 files changed, 751 insertions(+), 1099 deletions(-) delete mode 100644 examples/experimental/nodes/frontend/components.json delete mode 100644 examples/experimental/nodes/frontend/lib/utils.ts rename examples/experimental/nodes/{ => frontend}/server.js (67%) create mode 100644 examples/experimental/nodes/frontend/src/components/Browser/Browser.css rename examples/experimental/nodes/frontend/src/components/{browser.tsx => Browser/Browser.tsx} (73%) create mode 100644 examples/experimental/nodes/frontend/src/components/ChatInterface/ChatInterface.css create mode 100644 examples/experimental/nodes/frontend/src/components/ChatInterface/ChatInterface.tsx create mode 100644 examples/experimental/nodes/frontend/src/components/CodeEditor/CodeEditor.css rename examples/experimental/nodes/frontend/src/components/{code-editor.tsx => CodeEditor/CodeEditor.tsx} (97%) create mode 100644 examples/experimental/nodes/frontend/src/components/CodeEditor/FileSystem.css rename examples/experimental/nodes/frontend/src/components/{file-system.tsx => CodeEditor/FileSystem.tsx} (96%) create mode 100644 examples/experimental/nodes/frontend/src/components/Terminal/Terminal.css rename examples/experimental/nodes/frontend/src/components/{terminal.tsx => Terminal/Terminal.tsx} (89%) delete mode 100644 examples/experimental/nodes/frontend/src/components/chat-interface.tsx delete mode 100644 examples/experimental/nodes/public/images/jack.png delete mode 100644 examples/experimental/nodes/public/images/jane.png delete mode 100644 examples/experimental/nodes/public/index.html delete mode 100644 examples/experimental/nodes/public/index.tsx delete mode 100644 examples/experimental/nodes/public/script.js delete mode 100644 examples/experimental/nodes/public/styles.css delete mode 100644 examples/experimental/nodes/public/terminal.js diff --git a/examples/experimental/nodes/frontend/components.json b/examples/experimental/nodes/frontend/components.json deleted file mode 100644 index 3aedb46d..00000000 --- a/examples/experimental/nodes/frontend/components.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "$schema": "https://ui.shadcn.com/schema.json", - "style": "new-york", - "rsc": false, - "tsx": true, - "tailwind": { - "config": "tailwind.config.js", - "css": "src/index.css", - "baseColor": "zinc", - "cssVariables": true, - "prefix": "" - }, - "aliases": { - "components": "@/components", - "utils": "@/lib/utils", - "ui": "@/components/ui", - "lib": "@/lib", - "hooks": "@/hooks" - }, - "iconLibrary": "lucide" - } - \ No newline at end of file diff --git a/examples/experimental/nodes/frontend/lib/utils.ts b/examples/experimental/nodes/frontend/lib/utils.ts deleted file mode 100644 index 52834c1c..00000000 --- a/examples/experimental/nodes/frontend/lib/utils.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { clsx, type ClassValue } from "clsx" -import { twMerge } from "tailwind-merge" - -export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)) -} \ No newline at end of file diff --git a/examples/experimental/nodes/server.js b/examples/experimental/nodes/frontend/server.js similarity index 67% rename from examples/experimental/nodes/server.js rename to examples/experimental/nodes/frontend/server.js index 2929e3c8..7905b0cd 100644 --- a/examples/experimental/nodes/server.js +++ b/examples/experimental/nodes/frontend/server.js @@ -35,12 +35,30 @@ redisClient.on('error', (err) => { }); })(); + +io.on('connection', (socket) => { + console.log('A user connected'); + + socket.on('terminal_command', async (command) => { + console.log(`Received command: ${command}`); + // try { + // await redisClient.publish('TerminalChannel', command); // Publish to a Redis channel + // } catch (err) { + // console.error('Error publishing to Redis:', err); + // } + }); + + socket.on('disconnect', () => { + console.log('A user disconnected'); + }); +}); + // Serve the index.html file app.get('/', (req, res) => { res.sendFile(__dirname + '/frontend/public/index.html'); }); // Start the server -server.listen(3000, () => { - console.log('Server is running on http://localhost:3000'); +server.listen(8000, () => { + console.log('Server is running on http://localhost:8000'); }); \ No newline at end of file diff --git a/examples/experimental/nodes/frontend/src/App.css b/examples/experimental/nodes/frontend/src/App.css index 2efce679..a644904e 100644 --- a/examples/experimental/nodes/frontend/src/App.css +++ b/examples/experimental/nodes/frontend/src/App.css @@ -29,417 +29,6 @@ body { font-weight: bold; } -/* Chat Container Styles */ -#chat-container { - width: 100%; - min-width: 500px; - max-width: 600px; - background-color: #1e1e1e; - border-left: 1px solid #333; - display: flex; - flex-direction: column; - height: 100vh; -} - -/* Update existing headers */ -#chat-header { - background-color: #252526; - color: #d4d4d4; - padding: 10.5px 12px; - font-size: 13px; - border-bottom: 1px solid #333; - font-weight: bold; - text-align: left; -} - -#messages { - padding: 10px; - height: calc(100vh - 60px); - overflow-y: auto; - display: flex; - flex-direction: column; -} - -/* Message Styles */ -.message { - display: flex; - align-items: flex-start; - padding: 8px 16px; - margin-bottom: 4px; -} - -.message-content-wrapper { - display: flex; - flex-direction: column; - max-width: calc(100% - 52px); -} - -.message-sender { - font-size: 0.875rem; - color: #808080; - margin-bottom: 4px; -} - -.message-bubble { - padding: 10px 15px; - border-radius: 20px; - max-width: 75%; - word-wrap: break-word; - font-size: 14px; - line-height: 20px; -} - -/* Message Avatar Styles */ -.message-avatar { - width: 36px; - height: 36px; - min-width: 36px; - margin-right: 12px; - border-radius: 50%; - overflow: hidden; -} - -.avatar-placeholder { - width: 100%; - height: 100%; - background-color: #ffffff; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - color: #333333; - font-weight: bold; - font-size: 14px; -} - -/* Jack's messages */ -.message[data-sender="Jack"] { - justify-content: flex-start; - align-items: flex-start; -} - -.message[data-sender="Jack"] .message-bubble { - background-color: #007aff; - color: white; - align-self: flex-start; -} - -/* Jane's messages */ -.message[data-sender="Jane"] { - justify-content: flex-end; - align-items: flex-end; - flex-direction: row-reverse; -} - -.message[data-sender="Jane"] .message-bubble { - background-color: #e5e5ea; - color: black; - align-self: flex-end; -} - -/* Add these rules */ -.message[data-sender="Jane"] .message-sender { - text-align: right; - width: 100%; - color: #808080; -} - -.message[data-sender="Jane"] .message-content-wrapper { - align-items: flex-end; -} - -.message[data-sender="Jane"] .message-avatar { - margin-left: 12px; - margin-right: 0; -} - -/* Message Actions */ -.message-actions { - display: flex; - align-items: center; - margin-top: 4px; - font-size: 0.75rem; -} - -.message-replies { - color: #0084ff; - cursor: pointer; - margin-right: 8px; -} - -.message-timestamp { - color: #808080; -} - -/* Emoji Styles */ -.message-emoji { - display: inline-flex; - align-items: center; - background-color: #2d2d2d; - border-radius: 12px; - padding: 2px 8px; - margin-left: 4px; -} - -.emoji-icon { - margin-right: 4px; -} - -/* Reply Button Styles */ -.reply-button { - background-color: #0084ff; - color: white; - padding: 6px 12px; - border-radius: 16px; - font-size: 0.875rem; - border: none; - cursor: pointer; - margin-left: auto; -} - -.reply-button:hover { - background-color: #0073e6; -} - -/* Scrollbar Styles */ -#messages::-webkit-scrollbar { - width: 8px; -} - -#messages::-webkit-scrollbar-track { - background: #1e1e1e; -} - -#messages::-webkit-scrollbar-thumb { - background: #444; - border-radius: 4px; -} - -#messages::-webkit-scrollbar-thumb:hover { - background: #555; -} - -/* IDE Container Styles */ -#ide-container { - display: flex; - flex-direction: row; - flex: 1; - background-color: #1e1e1e; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); -} - -/* File Explorer Styles */ -#file-explorer { - width: 260px; - background-color: #252526; - color: #cccccc; - border-right: 1px solid #333; - overflow-y: auto; - padding: 0px 0 0 10px; -} - -#file-explorer-header { - background-color: #252526; - color: #d4d4d4; - padding: 10.5px 10px; - font-size: 13px; - border-bottom: 1px solid #333; - font-weight: bold; -} - -.file-item { - display: flex; - align-items: center; - padding: 3px 12px; - cursor: pointer; - font-size: 13px; - color: #cccccc; -} - -.file-item:hover { - background-color: #2a2d2e; -} - -.folder-icon, .file-icon { - margin-right: 6px; - color: #c5c5c5; -} - -/* Code Interface Styles */ -#code-interface { - display: flex; - flex-direction: column; - background-color: #1e1e1e; - flex: 1; - height: 100vh; - overflow: hidden; -} - -#code-editor { - height: 67vh; - padding: 0px; - background-color: #1e1e1e; - border-bottom: 1px solid #333; - overflow: auto; - display: flex; - flex-direction: column; -} - -#code-editor h3 { - margin: 0; - color: #d4d4d4; -} - -/* Editor Container Styles */ -.editor-container { - display: flex; - flex-direction: column; - height: 100%; - background-color: #1e1e1e; - overflow: hidden; -} - -.editor-header { - padding: 8px 12px; - background-color: #252526; - color: #cccccc; - font-size: 13px; - border-bottom: 1px solid #333; - user-select: none; -} - -.editor-content { - flex: 1; - overflow: auto; - height: calc(100% - 33px); -} - -/* CodeMirror Styles */ -.cm-editor { - height: auto !important; - font-family: 'Menlo', 'Monaco', 'Courier New', monospace; - font-size: 14px; -} - -.cm-scroller { - max-height: calc(67vh - 40px) !important; - overflow-y: auto !important; -} - -.cm-gutters { - background-color: #1e1e1e !important; - border-right: 1px solid #333 !important; -} - -.cm-lineNumbers { - color: #858585 !important; -} - -.cm-activeLineGutter { - background-color: #282828 !important; -} - -/* Update Terminal Header Styles */ -#terminal-header { - background-color: #252526; - color: #d4d4d4; - padding: 8px 12px; - font-size: 13px; - font-weight: bold; - border-bottom: 1px solid #333; - text-align: left; -} - -.terminal-title { - font-size: 13px; - color: #cccccc; -} - - - -#terminal { - height: 33vh; - padding: 10px; - background-color: #1e1e1e; - border-radius: 0 0 8px 8px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - overflow-y: auto; - color: #d4d4d4; - font-family: 'Courier New', Courier, monospace; - font-size: 14px; - display: flex; - flex-direction: column; -} - -.terminal-container { - display: flex; - flex-direction: column; - height: 33vh; - background-color: #000000; - color: #d4d4d4; - font-family: 'Courier New', monospace; -} - -.terminal-header { - background-color: #333; - color: #fff; - padding: 8px; - text-align: center; - font-weight: bold; - border-radius: 8px 8px 0 0; -} - -.terminal-body { - flex: 1; - display: flex; - flex-direction: column; - padding: 10px; - overflow: hidden; -} - -.terminal-history { - flex: 1; - overflow-y: auto; - margin-bottom: 10px; -} - -.terminal-line { - padding: 2px 0; - white-space: pre-wrap; - word-wrap: break-word; -} - -.terminal-input-line { - display: flex; - align-items: center; - background-color: #000000; - padding: 5px; - border-radius: 4px; -} - -.terminal-prompt { - color: #d4d4d4; - margin-right: 8px; -} - -.terminal-input { - flex: 1; - background: transparent; - border: none; - color: #d4d4d4; - font-family: 'Courier New', monospace; - font-size: inherit; - padding: 0; - outline: none; -} - -.terminal-input:focus { - outline: none; - box-shadow: none; -} - - /* Tab Styles */ .tabs { @@ -471,78 +60,7 @@ body { background-color: #2a2d2e; } -/* Browser Styles */ -.browser-container { - height: 67vh; - background-color: #1e1e1e; - border-bottom: 1px solid #333; - display: flex; - flex-direction: column; -} - -.browser-toolbar { - display: flex; - align-items: center; - padding: 8px; - background-color: #252526; - border-bottom: 1px solid #333; -} - -.browser-toolbar input { - flex: 1; - background-color: #3c3c3c; - border: 1px solid #3c3c3c; - color: #cccccc; - padding: 6px 12px; - border-radius: 4px; - margin-right: 8px; - font-size: 13px; -} - -.browser-toolbar input:focus { - outline: none; - border-color: #007acc; -} - -.browser-toolbar button { - background-color: #007acc; - color: white; - border: none; - padding: 6px 12px; - border-radius: 4px; - cursor: pointer; - font-size: 13px; -} - -.browser-toolbar button:hover { - background-color: #0066aa; -} - -.browser-content { - flex: 1; - background-color: #ffffff; -} - -.browser-content iframe { - width: 100%; - height: 100%; - border: none; -} - -.status-message { - padding: 4px 16px; - color: #666; - font-size: 12px; - font-style: italic; - text-align: center; -} - -.status-message::before { - content: '•'; - margin-right: 4px; -} - -textarea { +/* textarea { width: 100%; height: calc(100% - 30px); font-family: 'Courier New', Courier, monospace; @@ -553,4 +71,4 @@ textarea { padding: 10px; box-sizing: border-box; resize: none; -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/examples/experimental/nodes/frontend/src/App.tsx b/examples/experimental/nodes/frontend/src/App.tsx index 9b2d78d9..cf2260c0 100644 --- a/examples/experimental/nodes/frontend/src/App.tsx +++ b/examples/experimental/nodes/frontend/src/App.tsx @@ -1,13 +1,27 @@ import React, { useEffect, useState } from 'react'; import io from 'socket.io-client'; import './App.css'; -import CodeEditor from './components/code-editor'; -import { FileSystem } from './components/file-system'; -import { Terminal } from './components/terminal'; -import { ChatInterface } from './components/chat-interface'; -import { Browser } from './components/browser'; +import CodeEditor from './components/CodeEditor/CodeEditor'; +import { FileSystem } from './components/CodeEditor/FileSystem'; +import { Terminal } from './components/Terminal/Terminal'; +import { ChatInterface } from './components/ChatInterface/ChatInterface'; +import { Browser } from './components/Browser/Browser'; -const socket = io(); +// const socket = io(); + +// Add this to your frontend code +const socket = io('http://localhost:8000', { + transports: ['websocket'], + reconnection: true +}); + +socket.on('connect', () => { + console.log('Connected to server with ID:', socket.id); +}); + +socket.on('connect_error', (error) => { + console.error('Connection error:', error); +}); type FilesType = { [key: string]: string; @@ -120,7 +134,7 @@ const App: React.FC = () => { ) : ( )} - +
diff --git a/examples/experimental/nodes/frontend/src/components/Browser/Browser.css b/examples/experimental/nodes/frontend/src/components/Browser/Browser.css new file mode 100644 index 00000000..518a2981 --- /dev/null +++ b/examples/experimental/nodes/frontend/src/components/Browser/Browser.css @@ -0,0 +1,56 @@ +.browser-container { + height: 67vh; + background-color: #1e1e1e; + border-bottom: 1px solid #333; + display: flex; + flex-direction: column; + } + + .browser-toolbar { + display: flex; + align-items: center; + padding: 8px; + background-color: #252526; + border-bottom: 1px solid #333; + } + + .browser-toolbar input { + flex: 1; + background-color: #3c3c3c; + border: 1px solid #3c3c3c; + color: #cccccc; + padding: 6px 12px; + border-radius: 4px; + margin-right: 8px; + font-size: 13px; + } + + .browser-toolbar input:focus { + outline: none; + border-color: #007acc; + } + + .browser-toolbar button { + background-color: #007acc; + color: white; + border: none; + padding: 6px 12px; + border-radius: 4px; + cursor: pointer; + font-size: 13px; + } + + .browser-toolbar button:hover { + background-color: #0066aa; + } + + .browser-content { + flex: 1; + background-color: #ffffff; + } + + .browser-content iframe { + width: 100%; + height: 100%; + border: none; + } \ No newline at end of file diff --git a/examples/experimental/nodes/frontend/src/components/browser.tsx b/examples/experimental/nodes/frontend/src/components/Browser/Browser.tsx similarity index 73% rename from examples/experimental/nodes/frontend/src/components/browser.tsx rename to examples/experimental/nodes/frontend/src/components/Browser/Browser.tsx index 14668a05..0e1ad412 100644 --- a/examples/experimental/nodes/frontend/src/components/browser.tsx +++ b/examples/experimental/nodes/frontend/src/components/Browser/Browser.tsx @@ -1,6 +1,6 @@ // examples/experimental/nodes/frontend/src/components/browser.tsx import React, { useState } from 'react'; - +import './Browser.css'; // Import the CSS file interface BrowserProps { url: string; @@ -13,15 +13,15 @@ export const Browser: React.FC = ({ url }) => {
setCurrentUrl(e.target.value)} placeholder="Enter URL" /> - +
-