Merge branch 'dev' into 'main'

moved render files into their own directory. can not move index.html due to...

See merge request contribute/prompt-dev-env!5

.gitignore

@@ -0,0 +1 @@
+gui/package-lock.json

docs/AI_MODEL_INTEGRATION_GUIDE.md

@@ -0,0 +1,59 @@
+# Universal Endpoint Adapter Research 🧠🔌
+
+## Overview
+
+This document provides an overview of the research conducted to identify suitable Node.js packages for integrating Python and C# AI models with the Prompt Development Environment (PDE).
+
+## Python Integration 🐍
+
+### `python-shell`
+
+- **Description**: A simple way to run Python scripts from Node.js with basic inter-process communication (IPC).
+- **Use Case**: Ideal for executing Python scripts and retrieving the output in the PDE.
+- **Installation**:
+  ```bash
+  npm install python-shell
+  ```
+- **Example Usage**:
+  ```javascript
+  const { PythonShell } = require('python-shell');
+
+  PythonShell.run('my_script.py', null, (err, results) => {
+    if (err) throw err;
+    console.log('Results:', results);
+  });
+  ```
+
+## C# Integration 🔷
+
+### `edge-js`
+
+- **Description**: Allows running .NET and Node.js code in-process, enabling the use of C# functions directly in Node.js.
+- **Use Case**: Suitable for invoking C# methods and handling the responses within the PDE.
+- **Installation**:
+  ```bash
+  npm install edge-js
+  ```
+- **Example Usage**:
+  ```javascript
+  const edge = require('edge-js');
+
+  const helloWorld = edge.func(() => {
+    /*
+      async (input) => {
+        return ".NET Welcomes " + input.ToString();
+      }
+    */
+  });
+
+  helloWorld('JavaScript', (error, result) => {
+    if (error) throw error;
+    console.log(result);
+  });
+  ```
+
+## Conclusion
+
+The `python-shell` and `edge-js` packages provide robust solutions for integrating Python and C# AI models with our PDE. Further testing and implementation will ensure seamless communication between the user's GUI and the AI models.
+
+🚀💻

docs/EVENTFACTORY_DESIGN.md

@@ -0,0 +1,67 @@
+# Event Factory Design 🏭✨
+
+## Event Factory Overview 📊
+
+The Event Factory is a centralized system designed to manage IPC events within the Prompt Development Environment (PDE). It ensures a standardized approach to event handling between the main process and the renderer process.
+
+## Event Object Structure 📦
+
+Each Event object encapsulates the necessary information to send and receive data through IPC channels. The Event object includes the event name, payload, and an optional reply event name.
+
+## Factory Constructor 🛠️
+
+The EventFactory constructor accepts optional send and reply lambda functions. These functions define custom behavior for sending and receiving IPC events.
+
+## Event Naming Convention 🏷️
+
+Event names are stored in a JavaScript Enum-like structure, ensuring consistency across the main and renderer processes. A `-Reply` suffix is appended to the event name for reply events.
+
+## Event Handling Process 🔄
+
+1. **Sending Events**:
+   - Events are dispatched from either the main or renderer process using the EventFactory.
+   - The send function is invoked with the event name and payload.
+
+2. **Receiving Events**:
+   - The corresponding reply event is set up to listen for a response.
+   - The reply function processes the incoming data and updates the state as necessary.
+
+## Event Storage 🗃️
+
+A shared Enum-like structure stores the event names, accessible by both the main and renderer processes. This structure prevents discrepancies in event naming.
+
+# EventFactory.js Design Plan
+
+## Purpose
+The `EventFactory.js` class serves as a centralized manager for creating and dispatching events within the PDE. It abstracts the details of event creation and handling, providing a simple interface for other parts of the application to communicate with.
+
+## Methods
+
+- **createEvent(eventName, payload)**: Creates a new event with the given name and payload.
+- **dispatchEvent(event)**: Dispatches an event to the appropriate handler.
+- **onEvent(eventName, handler)**: Registers a handler for a specific event.
+- **offEvent(eventName, handler)**: Deregisters a handler for a specific event.
+
+## Event Handling
+
+- Events are objects with a `type` property corresponding to the event name and a `payload` property containing any data associated with the event.
+- The factory keeps an internal registry of event handlers, which are functions that get called when an event of a specific type is dispatched.
+
+## Usage
+
+The `EventFactory.js` class will be used by both the main process and the renderer process to ensure consistent event handling across the application. It will be particularly useful for managing the IPC events that facilitate communication between the two processes.
+
+## Integration
+
+- The class will be integrated with the existing IPC mechanisms in Electron.
+- It will utilize the Enum-like structure for event names to maintain consistency.
+
+## Testing
+
+- Unit tests will be written to test the creation, dispatching, and handling of events.
+- Integration tests will ensure that events are correctly communicated between the main and renderer processes.
+
+
+## Conclusion 🔚
+
+The Event Factory design aims to streamline the communication flow within the PDE, providing a robust and maintainable approach to IPC event handling.

docs/UNIVERSAL_ADAPTER_DESIGN.md

@@ -0,0 +1,65 @@
+# Universal Adapter Design 🌐🔧
+
+## Introduction 📜
+
+This document outlines the design and implementation strategy for the universal adapter in the Prompt Development Environment (PDE), focusing on the use of Socket.IO for WebSocket communication and the creation of DTOs for structured data transfer.
+
+## Architecture 🏗️
+
+The universal adapter will leverage Socket.IO to facilitate real-time bi-directional event-based communication. It will also define DTOs to standardize the data structures used in requests and responses.
+
+### Components 🛠️
+
+- **Socket.IO Server**: Manages WebSocket connections and emits/receives events.
+- **Protocol Handlers** 📡: Handle specific protocols, including WebSocket via Socket.IO.
+- **Serializer/Deserializer** 💾: Convert DTOs to/from JSON for transmission.
+- **Adapter Interface** 🔌: A consistent interface for the PDE to interact with different AI models using DTOs.
+
+## DTOs (Data Transfer Objects)
+
+DTOs will be used to encapsulate the data sent to and from the AI models, ensuring a consistent structure that can be validated and processed efficiently.
+
+### Example DTOs
+
+- **PromptDTO**: Represents a prompt sent to the AI model.
+  ```javascript
+  class PromptDTO {
+    constructor(prompt) {
+      this.prompt = prompt;
+    }
+  }
+  ```
+
+- **ResponseDTO**: Represents a response received from the AI model.
+  ```javascript
+  class ResponseDTO {
+    constructor(response) {
+      this.response = response;
+    }
+  }
+  ```
+
+## Implementation Strategy 🚀
+
+1. **Socket.IO Server Setup**:
+   - Initialize a Socket.IO server to handle incoming WebSocket connections.
+   - Define event listeners for 'prompt' and 'response' events using the DTOs.
+
+2. **Protocol Handlers**:
+   - Integrate Socket.IO within the existing protocol handlers framework.
+   - Ensure that the handlers can serialize and deserialize DTOs.
+
+3. **Adapter Interface**:
+   - Update the adapter interface to use DTOs for sending and receiving data.
+   - Implement validation logic for DTOs to ensure data integrity.
+
+## Testing and Validation ✅
+
+- Unit tests for DTOs and their serialization/deserialization logic.
+- Integration tests with the Socket.IO server to ensure proper event handling.
+
+## Conclusion 🎯
+
+By incorporating Socket.IO and defining DTOs, the universal adapter will support robust and structured communication with AI models. This design will facilitate the development of a flexible and extensible PDE capable of integrating with a wide range of AI technologies.
+
+🚀💻

gui/forge.config.js

@@ -26,27 +26,26 @@ module.exports = {
   ],
   plugins: [
     {
-      name: '@electron-forge/plugin-vite',
+      name: '@electron-forge/plugin-auto-unpack-natives',
+      config: {},
+    },
+    {
+      name: '@electron-forge/plugin-webpack',
       config: {
-        // `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
-        // If you are familiar with Vite configuration, it will look really familiar.
-        build: [
-          {
-            // `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
-            entry: 'src/main.js',
-            config: 'vite.main.config.mjs',
-          },
-          {
-            entry: 'src/preload.js',
-            config: 'vite.preload.config.mjs',
-          },
-        ],
-        renderer: [
-          {
-            name: 'main_window',
-            config: 'vite.renderer.config.mjs',
-          },
-        ],
+        mainConfig: './webpack.main.config.js',
+        renderer: {
+          config: './webpack.renderer.config.js',
+          entryPoints: [
+            {
+              html: './src/renderer/index.html',
+              js: './src/renderer/renderer.js',
+              name: 'main_window',
+              preload: {
+                js: './src/main/preload.js',
+              },
+            },
+          ],
+        },
       },
     },
     // Fuses are used to enable/disable various Electron functionality

gui/package.json

@@ -1,15 +1,14 @@
 {
-  "name": "better-prompt",
-  "productName": "Better Prompt",
+  "name": "prompt-dev-env",
+  "productName": "Prompt Development Environment",
   "version": "1.0.0",
-  "description": "An innovative platform for crafting, testing, and sharing AI prompts. PDE is where developers, researchers, and AI enthusiasts converge to push the boundaries of conversational AI.",
-  "main": ".vite/build/main.js",
+  "description": "An integrated prompt development environment.",
+  "main": ".webpack/main",
   "scripts": {
     "start": "electron-forge start",
     "package": "electron-forge package",
     "make": "electron-forge make",
-    "publish": "electron-forge publish",
-    "lint": "echo \"No linting configured\""
+    "publish": "electron-forge publish"
   },
   "devDependencies": {
     "@electron-forge/cli": "^7.4.0",
@@ -19,10 +18,13 @@
     "@electron-forge/maker-zip": "^7.4.0",
     "@electron-forge/plugin-auto-unpack-natives": "^7.4.0",
     "@electron-forge/plugin-fuses": "^7.4.0",
-    "@electron-forge/plugin-vite": "^7.4.0",
+    "@electron-forge/plugin-webpack": "^7.4.0",
     "@electron/fuses": "^1.8.0",
-    "electron": "31.0.0",
-    "vite": "^5.0.12"
+    "@vercel/webpack-asset-relocator-loader": "1.7.3",
+    "css-loader": "^6.0.0",
+    "electron": "31.0.1",
+    "node-loader": "^2.0.0",
+    "style-loader": "^3.0.0"
   },
   "keywords": [],
   "author": {
@@ -31,6 +33,11 @@
   },
   "license": "MIT",
   "dependencies": {
+    "chalk": "^5.3.0",
+    "electron-is-dev": "^3.0.1",
+    "electron-log": "^5.1.5",
+    "electron-platform": "^1.2.0",
+    "electron-root-path": "^1.1.0",
     "electron-squirrel-startup": "^1.0.1"
   }
 }