feat: Add Send button to CommandInput component

src/components/input.css

@@ -1,10 +1,51 @@
+.command-input-container {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
 textarea {
+  flex-grow: 1;
   form-sizing: normal;
   border: 1px solid #ccc;
-  border-radius: 5px;
+  border-radius: 5px 0 0 5px;
   padding: 10px;
-  width: 98%;
   height: 75px;
   font-size: 0.8em;
   font-family: Monaco, Consolas, "Liberation Mono", "Courier New", Courier, monospace;
-}
+  resize: vertical;
+}
+
+.send-button {
+  height: 75px;
+  padding: 0 15px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 0 5px 5px 0;
+  cursor: pointer;
+  font-size: 1em;
+  transition: background-color 0.3s;
+}
+
+.send-button:hover {
+  background-color: #45a049;
+}
+
+@media (max-width: 600px) {
+  .command-input-container {
+    flex-direction: column;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 5px 5px 0 0;
+  }
+
+  .send-button {
+    width: 100%;
+    height: 40px;
+    border-radius: 0 0 5px 5px;
+  }
+}

src/components/input.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef } from "react";
-import { CommandHistory } from "../CommandHistory"; // Assuming CommandHistory is in CommandHistory.js
+import { CommandHistory } from "../CommandHistory";
 import "./input.css";
 
 type SendFunction = (text: string) => void;
@@ -18,9 +18,7 @@ const CommandInput = ({ onSend, inputRef }: Props) => {
 
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
-      onSend(input);
-      commandHistory.addCommand(input);
-      setInput("");
+      handleSend();
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       const prevCommand = commandHistory.navigateUp(input);
@@ -32,15 +30,28 @@ const CommandInput = ({ onSend, inputRef }: Props) => {
     }
   };
 
+  const handleSend = () => {
+    if (input.trim()) {
+      onSend(input);
+      commandHistoryRef.current.addCommand(input);
+      setInput("");
+    }
+  };
+
   return (
-    <textarea
-      value={input}
-      onChange={(e) => setInput(e.target.value)}
-      onKeyDown={handleKeyDown}
-      id="command-input"
-      ref={inputRef}
-      autoFocus
-    />
+    <div className="command-input-container">
+      <textarea
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={handleKeyDown}
+        id="command-input"
+        ref={inputRef}
+        autoFocus
+      />
+      <button onClick={handleSend} className="send-button">
+        Send
+      </button>
+    </div>
   );
 };