📚 docs: update README with Proxmox integration details

README.md

@@ -21,6 +21,33 @@ Chat'nFace is an innovative interface that integrates with Gradio applications t
 - **Interactive Suggestions**: Receive suggestions and guidance on how to use Gradio apps effectively.
 - **Seamless Integration**: Designed to work harmoniously with existing Gradio interfaces.
 
+## Proxmox VMs and Clusters Integration via xterm.js
+
+Chat'nFace now supports interacting with Proxmox VMs and clusters directly through an xterm.js terminal interface. This feature allows users to view and manage their VMs and clusters within the Chat'nFace application.
+
+### Setup and Configuration
+
+#### Frontend
+
+1. Ensure `xterm.js` and `xterm-addon-fit` are installed in your project.
+2. Integrate the `TerminalComponent` into your application where you want the terminal to appear.
+
+#### Backend
+
+1. Set up a WebSocket server that the frontend can connect to for real-time data streaming.
+2. Implement Proxmox API integration in your backend service. This will involve authenticating with your Proxmox server and fetching or sending data as needed.
+
+- **xterm.js**: [xterm.js Documentation](https://xtermjs.org/docs/)
+
+- **Proxmox API**: [Proxmox API Documentation](https://pve.proxmox.com/pve-docs/api-viewer/index.html)
+
+### Usage
+
+To use the Proxmox integration, navigate to the terminal within Chat'nFace and enter your commands. The terminal will communicate with your Proxmox server, allowing you to manage your VMs and clusters directly from the Chat'nFace interface.
+
+### Support
+
+For support with the Proxmox integration, please join our Discord community or contact us directly through the provided channels.
 ## Installation 🛠️
 To get started with Chat'nFace, clone the repository and follow the setup instructions provided in the documentation.
 

package-lock.json

@@ -6,7 +6,8 @@
     "": {
       "dependencies": {
         "react-scripts": "^5.0.1",
-        "xterm": "^5.3.0"
+        "xterm": "^5.3.0",
+        "xterm-addon-fit": "^0.8.0"
       },
       "devDependencies": {
         "@svgr/webpack": "^8.1.0"
@@ -18139,6 +18140,14 @@
       "resolved": "https://registry.npmjs.org/xterm/-/xterm-5.3.0.tgz",
       "integrity": "sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg=="
     },
+    "node_modules/xterm-addon-fit": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/xterm-addon-fit/-/xterm-addon-fit-0.8.0.tgz",
+      "integrity": "sha512-yj3Np7XlvxxhYF/EJ7p3KHaMt6OdwQ+HDu573Vx1lRXsVxOcnVJs51RgjZOouIZOczTsskaS+CpXspK81/DLqw==",
+      "peerDependencies": {
+        "xterm": "^5.0.0"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

package.json

@@ -4,6 +4,7 @@
   },
   "dependencies": {
     "react-scripts": "^5.0.1",
-    "xterm": "^5.3.0"
+    "xterm": "^5.3.0",
+    "xterm-addon-fit": "^0.8.0"
   }
 }