From 5ba185e7d80954538c85b70a8cab5a8c2b7bb378 Mon Sep 17 00:00:00 2001
From: Ellie Huxtable <ellie@atuin.sh>
Date: Thu, 25 Jul 2024 16:54:27 +0100
Subject: [PATCH] feat(gui): allow interacting with the embedded terminal
 (#2312)

---
 .../runbooks/editor/blocks/RunBlock/terminal.tsx      | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/ui/src/components/runbooks/editor/blocks/RunBlock/terminal.tsx b/ui/src/components/runbooks/editor/blocks/RunBlock/terminal.tsx
index cb490887..a6dc589f 100644
--- a/ui/src/components/runbooks/editor/blocks/RunBlock/terminal.tsx
+++ b/ui/src/components/runbooks/editor/blocks/RunBlock/terminal.tsx
@@ -2,6 +2,8 @@ import { useState, useEffect, useRef } from "react";
 import { listen } from "@tauri-apps/api/event";
 import "@xterm/xterm/css/xterm.css";
 import { useStore } from "@/state/store";
+import { invoke } from "@tauri-apps/api/core";
+import { IDisposable } from "@xterm/xterm";
 
 const usePersistentTerminal = (pty: string) => {
   const newPtyTerm = useStore((store) => store.newPtyTerm);
@@ -30,6 +32,7 @@ const TerminalComponent = ({ pty }: any) => {
   const { terminalData, isReady } = usePersistentTerminal(pty);
   const [isAttached, setIsAttached] = useState(false);
   const cleanupListenerRef = useRef<(() => void) | null>(null);
+  const keyDispose = useRef<IDisposable | null>(null);
 
   useEffect(() => {
     // no pty? no terminal
@@ -60,6 +63,12 @@ const TerminalComponent = ({ pty }: any) => {
       setIsAttached(true);
 
       window.addEventListener("resize", windowResize);
+
+      const disposeOnKey = terminalData.terminal.onKey(async (event) => {
+        await invoke("pty_write", { pid: pty, data: event.key });
+      });
+
+      keyDispose.current = disposeOnKey;
     }
 
     listen(`pty-${pty}`, (event: any) => {
@@ -88,6 +97,8 @@ const TerminalComponent = ({ pty }: any) => {
         cleanupListenerRef.current();
       }
 
+      if (keyDispose.current) keyDispose.current.dispose();
+
       window.removeEventListener("resize", windowResize);
     };
   }, [terminalData, isReady]);