Upload components/ChatInput.jsx with huggingface_hub

components/ChatInput.jsx

@@ -0,0 +1,63 @@
+import { useState } from 'react'
+
+export default function ChatInput({ onSendMessage, disabled }) {
+  const [message, setMessage] = useState('')
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    if (message.trim() && !disabled) {
+      onSendMessage(message)
+      setMessage('')
+    }
+  }
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSubmit(e)
+    }
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-4 mt-4">
+      <form onSubmit={handleSubmit} className="flex items-end space-x-3">
+        <div className="flex-1">
+          <textarea
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Type your message..."
+            disabled={disabled}
+            rows={1}
+            className="w-full resize-none bg-transparent border-0 focus:outline-none text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 text-sm md:text-base disabled:opacity-50"
+          />
+        </div>
+        
+        <button
+          type="submit"
+          disabled={disabled || !message.trim()}
+          className="flex-shrink-0 bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white rounded-xl p-3 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95"
+          aria-label="Send message"
+        >
+          <svg
+            className="w-5 h-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+            />
+          </svg>
+        </button>
+      </form>
+      
+      <p className="text-xs text-gray-400 dark:text-gray-500 mt-2">
+        Press Enter to send, Shift + Enter for new line
+      </p>
+    </div>
+  )
+}