Upload components/ChatInput.jsx with huggingface_hub

components/ChatInput.jsx

@@ -0,0 +1,50 @@
+import ImageUpload from './ImageUpload'
+
+export default function ChatInput({
+  input,
+  setInput,
+  uploadedImage,
+  setUploadedImage,
+  onImageUpload,
+  onSubmit,
+  onKeyPress,
+  isLoading,
+}) {
+  return (
+    <div className="border-t border-gray-200 p-4 bg-white">
+      <div className="flex items-end space-x-2">
+        <ImageUpload
+          onImageUpload={onImageUpload}
+          uploadedImage={uploadedImage}
+          onRemove={() => setUploadedImage(null)}
+        />
+        <div className="flex-1">
+          <textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={onKeyPress}
+            placeholder={uploadedImage ? "Ask a question about the image..." : "Type your message..."}
+            rows={1}
+            className="w-full resize-none rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            disabled={isLoading}
+          />
+        </div>
+        <button
+          onClick={onSubmit}
+          disabled={isLoading || (!input.trim() && !uploadedImage)}
+          className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+            isLoading || (!input.trim() && !uploadedImage)
+              ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
+              : 'bg-blue-600 text-white hover:bg-blue-700'
+          }`}
+          aria-label="Send message"
+        >
+          {isLoading ? '⏳' : 'Send'}
+        </button>
+      </div>
+      <p className="text-xs text-gray-500 mt-2">
+        Press Enter to send • Shift+Enter for new line
+      </p>
+    </div>
+  )
+}