Update AppImage

AppImage/components/script-terminal-modal.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { X, CheckCircle2, XCircle, Loader2 } from "lucide-react"
-import { TerminalPanel } from "./terminal-panel"
+import { TerminalPanel, type TerminalPanelHandle } from "./terminal-panel"
 import { API_PORT } from "@/lib/api-config"
 
 interface WebInteraction {
@@ -42,7 +42,7 @@ export function ScriptTerminalModal({
   const [exitCode, setExitCode] = useState<number | null>(null)
   const [currentInteraction, setCurrentInteraction] = useState<WebInteraction | null>(null)
   const [interactionInput, setInteractionInput] = useState("")
-  const terminalRef = useRef<any>(null)
+  const terminalRef = useRef<TerminalPanelHandle>(null)
 
   useEffect(() => {
     console.log("[v0] currentInteraction changed:", currentInteraction)
@@ -106,14 +106,8 @@ export function ScriptTerminalModal({
 
     console.log("[v0] Sending interaction response:", response)
 
-    // Access the terminal instance to send the response
+    terminalRef.current.sendMessage(response)
-    const terminal = terminalRef.current
-    if (terminal?.terminals?.[0]?.ws) {
-      terminal.terminals[0].ws.send(response)
     console.log("[v0] Response sent successfully")
-    } else {
-      console.log("[v0] Could not send response - no WebSocket available")
-    }
 
     console.log("[v0] Clearing currentInteraction after response")
     setCurrentInteraction(null)

AppImage/components/terminal-panel.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import type React from "react"
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState, forwardRef, useImperativeHandle } from "react"
 import { API_PORT } from "../lib/api-config"
 import { fetchApi } from "@/lib/api-config" // Cambiando import para usar fetchApi directamente
 import {
@@ -30,6 +30,10 @@ type TerminalPanelProps = {
   onWebInteraction?: (interaction: any) => void
 }
 
+export interface TerminalPanelHandle {
+  sendMessage: (message: string) => void
+}
+
 interface TerminalInstance {
   id: string
   title: string
@@ -134,12 +138,8 @@ const proxmoxCommands = [
   { cmd: "clear", desc: "Clear terminal screen" },
 ]
 
-export const TerminalPanel: React.FC<TerminalPanelProps> = ({
+const TerminalPanel = forwardRef<TerminalPanelHandle, TerminalPanelProps>(
-  websocketUrl,
+  ({ websocketUrl, onClose, initMessage, onWebInteraction }, ref) => {
-  onClose,
-  initMessage,
-  onWebInteraction,
-}) => {
     const [terminals, setTerminals] = useState<TerminalInstance[]>([])
     const [activeTerminalId, setActiveTerminalId] = useState<string>("")
     const [layout, setLayout] = useState<"single" | "grid">("grid")
@@ -155,6 +155,24 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({
 
     const containerRefs = useRef<{ [key: string]: HTMLDivElement | null }>({})
 
+    useImperativeHandle(
+      ref,
+      () => ({
+        sendMessage: (message: string) => {
+          console.log("[v0] TerminalPanel.sendMessage called with:", message)
+          // Send to the first terminal (or active terminal if available)
+          const terminal = terminals.find((t) => t.id === activeTerminalId) || terminals[0]
+          if (terminal?.ws && terminal.ws.readyState === WebSocket.OPEN) {
+            console.log("[v0] Sending message via WebSocket")
+            terminal.ws.send(message)
+          } else {
+            console.log("[v0] Cannot send message - no active WebSocket")
+          }
+        },
+      }),
+      [terminals, activeTerminalId],
+    )
+
     useEffect(() => {
       const updateDeviceType = () => {
         const width = window.innerWidth
@@ -1022,4 +1040,9 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({
         </Dialog>
       </div>
     )
-}
+  },
+)
+
+TerminalPanel.displayName = "TerminalPanel"
+
+export default TerminalPanel