feat: Centralize command input state management with InputStore

Author: ctoth

src/InputStore.ts

@@ -0,0 +1,71 @@
+// State
+export type InputState = {
+  text: string;
+};
+
+// Action Types
+export enum InputActionType {
+  SetInput = "SET_INPUT",
+  ClearInput = "CLEAR_INPUT",
+}
+
+// Actions
+export type InputAction =
+  | { type: InputActionType.SetInput; data: string }
+  | { type: InputActionType.ClearInput };
+
+// Store Class
+class InputStore {
+  private state: InputState = { text: "" };
+  private listeners: Set<() => void> = new Set();
+
+  private reducer(state: InputState, action: InputAction): InputState {
+    switch (action.type) {
+      case InputActionType.SetInput:
+        // Only update if the text actually changed
+        if (state.text !== action.data) {
+          return { ...state, text: action.data };
+        }
+        return state;
+      case InputActionType.ClearInput:
+        if (state.text !== "") {
+          return { ...state, text: "" };
+        }
+        return state;
+      default:
+        return state;
+    }
+  }
+
+  dispatch = (action: InputAction) => {
+    const previousState = this.state;
+    this.state = this.reducer(this.state, action);
+    // Only notify listeners if the state actually changed
+    if (this.state !== previousState) {
+      this.listeners.forEach((listener) => listener());
+    }
+  }
+
+  getState(): InputState {
+    return this.state;
+  }
+
+  subscribe(listener: () => void): () => void {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+}
+
+// Singleton instance
+export const inputStore = new InputStore();
+
+// Helper functions for easier dispatching
+export const setInputText = (text: string) => {
+  inputStore.dispatch({ type: InputActionType.SetInput, data: text });
+};
+
+export const clearInputText = () => {
+  inputStore.dispatch({ type: InputActionType.ClearInput });
+};

src/client.ts

@@ -563,18 +563,6 @@ An MCP message consists of three parts: the name of the message, the authenticat
     ] as GMCPClientMedia;
     gmcpClientMedia.stopAllSounds();
   }
-
-  getInput(): string {
-    // get what the user has typed so far
-    return document.getElementById("command-input")?.textContent || "";
-  }
-
-  setInput(text: string) {
-    // place text in the input field
-    const input = document.getElementById("command-input");
-    if (!input) return;
-    input.textContent = text;
-  }
 }
 
 export default MudClient;

src/components/input.tsx

@@ -1,6 +1,8 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useRef, useEffect, useCallback } from "react";
 import { CommandHistory } from "../CommandHistory";
 import "./input.css";
+import { useInputStore } from "../hooks/useInputStore";
+import { InputActionType, setInputText, clearInputText } from "../InputStore";
 
 type SendFunction = (text: string) => void;
 
@@ -13,8 +15,8 @@ const STORAGE_KEY = 'command_history';
 const MAX_HISTORY = 1000;
 
 const CommandInput = ({ onSend, inputRef }: Props) => {
-  const [input, setInput] = useState("");
   const commandHistoryRef = useRef(new CommandHistory());
+  const [inputState, dispatch] = useInputStore();
 
   // Load saved history on component mount
   useEffect(() => {
@@ -41,38 +43,40 @@ const CommandInput = ({ onSend, inputRef }: Props) => {
     }
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     const commandHistory = commandHistoryRef.current;
+    const currentInput = inputState.text;
 
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSend();
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      const prevCommand = commandHistory.navigateUp(input);
-      setInput(prevCommand);
+      const prevCommand = commandHistory.navigateUp(currentInput);
+      setInputText(prevCommand);
     } else if (e.key === "ArrowDown") {
       e.preventDefault();
-      const nextCommand = commandHistory.navigateDown(input);
-      setInput(nextCommand);
+      const nextCommand = commandHistory.navigateDown(currentInput);
+      setInputText(nextCommand);
     }
-  };
+  }, [inputState.text]);
 
-  const handleSend = () => {
-    if (input.trim()) {
-      onSend(input);
-      commandHistoryRef.current.addCommand(input);
+  const handleSend = useCallback(() => {
+    const currentInput = inputState.text;
+    if (currentInput.trim()) {
+      onSend(currentInput);
+      commandHistoryRef.current.addCommand(currentInput);
       saveHistory();
-      setInput("");
+      clearInputText();
       inputRef.current?.focus();
     }
-  };
+  }, [inputState.text, onSend, inputRef]);
 
   return (
     <div className="command-input-container">
       <textarea
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
+        value={inputState.text}
+        onChange={(e) => setInputText(e.target.value)}
         onKeyDown={handleKeyDown}
         id="command-input"
         ref={inputRef}

src/gmcp/Client/Keystrokes.ts

@@ -1,5 +1,6 @@
 import type MudClient from "../../client";
 import { GMCPMessage, GMCPPackage } from "../package";
+import { inputStore, setInputText } from "../../InputStore"; // Import the store and helper
 
 interface KeyBinding {
     key: string;
@@ -50,7 +51,8 @@ export class GMCPClientKeystrokes extends GMCPPackage {
         const binding = this.findBinding(event);
         if (binding) {
             event.preventDefault();
-            const commandInput = this.client.getInput();
+            // Get input directly from the store
+            const commandInput = inputStore.getState().text;
             const command = this.parseCommand(binding.command, commandInput);
             if (binding.autosend) {
                 this.client.sendCommand(command);
@@ -116,7 +118,8 @@ export class GMCPClientKeystrokes extends GMCPPackage {
     }
 
     private placeInInputField(command: string): void {
-        this.client.setInput(command);
+        // Use the centralized store action
+        setInputText(command);
     }
 
     public bindKey(data: GMCPMessageClientKeystrokesBind): void {

src/hooks/useInputStore.ts

@@ -0,0 +1,15 @@
+import { useEffect, useReducer } from "react";
+import { inputStore, InputState, InputAction } from "../InputStore";
+
+type InputStoreHook = [InputState, (action: InputAction) => void];
+
+export const useInputStore = (): InputStoreHook => {
+  const [, forceRender] = useReducer((s) => s + 1, 0);
+
+  useEffect(() => {
+    const unsubscribe = inputStore.subscribe(forceRender);
+    return unsubscribe; // Cleanup subscription on unmount
+  }, []);
+
+  return [inputStore.getState(), inputStore.dispatch];
+};