New web interface, move llm engine to separate process

web/src/components/Chat/ChatInput.tsx

@@ -0,0 +1,62 @@
+import React, { useState, useRef, KeyboardEvent } from 'react';
+import { Send } from 'lucide-react';
+
+interface ChatInputProps {
+  onSendMessage: (message: string) => void;
+  disabled?: boolean;
+}
+
+const ChatInput: React.FC<ChatInputProps> = ({ onSendMessage, disabled = false }) => {
+  const [message, setMessage] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSend = () => {
+    if (message.trim() && !disabled) {
+      onSendMessage(message.trim());
+      setMessage('');
+      setTimeout(() => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, 0);
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div className="border-t p-3 bg-white">
+      <div className="flex gap-2">
+        <input
+          ref={inputRef}
+          type="text"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Type a message..."
+          className="flex-1 px-3 py-2 border rounded-lg text-sm"
+          disabled={disabled}
+          autoFocus
+        />
+        <button
+          onClick={handleSend}
+          className={`px-3 py-2 rounded-lg ${
+            disabled || !message.trim()
+              ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
+              : 'bg-blue-500 hover:bg-blue-600 text-white'
+          }`}
+          disabled={disabled || !message.trim()}
+        >
+          <Send className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ChatInput;