diff --git a/webview-ui/src/components/Terminal.tsx b/webview-ui/src/components/Terminal.tsx index 723d479..735ce64 100644 --- a/webview-ui/src/components/Terminal.tsx +++ b/webview-ui/src/components/Terminal.tsx @@ -3,15 +3,15 @@ import DynamicTextArea from "react-textarea-autosize" interface TerminalProps { output: string - shouldAllowInput: boolean handleSendStdin: (text: string) => void + shouldAllowInput: boolean } /* Inspired by https://phuoc.ng/collection/mirror-a-text-area/create-your-own-custom-cursor-in-a-text-area/ */ -const Terminal: React.FC = ({ output, shouldAllowInput, handleSendStdin }) => { +const Terminal: React.FC = ({ output, handleSendStdin, shouldAllowInput }) => { const [userInput, setUserInput] = useState("") const [isFocused, setIsFocused] = useState(false) // Initially not focused const textAreaRef = useRef(null) @@ -27,7 +27,6 @@ const Terminal: React.FC = ({ output, shouldAllowInput, handleSen }, [output, lastProcessedOutput]) const handleKeyPress = (e: React.KeyboardEvent) => { - if (!shouldAllowInput) return if (e.key === "Enter") { e.preventDefault() handleSendStdin(userInput) @@ -130,7 +129,7 @@ const Terminal: React.FC = ({ output, shouldAllowInput, handleSen const caretEle = document.createElement("span") caretEle.classList.add("terminal-cursor") - if (isFocused && shouldAllowInput) { + if (isFocused) { caretEle.classList.add("terminal-cursor-focused") } if (!shouldAllowInput) { @@ -159,7 +158,7 @@ const Terminal: React.FC = ({ output, shouldAllowInput, handleSen const caretEle = document.createElement("span") caretEle.classList.add("terminal-cursor") - if (isFocused && shouldAllowInput) { + if (isFocused) { caretEle.classList.add("terminal-cursor-focused") } if (!shouldAllowInput) { @@ -171,7 +170,6 @@ const Terminal: React.FC = ({ output, shouldAllowInput, handleSen }, [output, userInput, isFocused, shouldAllowInput]) const handleChange = (e: React.ChangeEvent) => { - if (!shouldAllowInput) return const newValue = e.target.value if (newValue.startsWith(output)) { setUserInput(newValue.slice(output.length)) @@ -190,7 +188,6 @@ const Terminal: React.FC = ({ output, shouldAllowInput, handleSen } const handleKeyDown = (e: React.KeyboardEvent) => { - if (!shouldAllowInput) return const textarea = e.target as HTMLTextAreaElement const cursorPosition = textarea.selectionStart @@ -213,6 +210,9 @@ const Terminal: React.FC = ({ output, shouldAllowInput, handleSen if (isFocused) { caretEle.classList.add("terminal-cursor-focused") } + if (!shouldAllowInput) { + caretEle.classList.add("terminal-cursor-hidden") + } caretEle.innerHTML = " " mirrorRef.current!.appendChild(caretEle) @@ -291,9 +291,7 @@ const Terminal: React.FC = ({ output, shouldAllowInput, handleSen color: "var(--vscode-terminal-foreground)", borderRadius: "3px", ...(textAreaStyle as any), - //pointerEvents: shouldAllowInput ? "auto" : "none", }} - readOnly={!shouldAllowInput} minRows={1} />