Update src/App.js

src/App.js

@@ -1,23 +1,91 @@
-import logo from './logo.svg';
-import './App.css';
+import { useState } from 'react';
 
 function App() {
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Replace with your model path (e.g., "your-user/model")
+  const HF_MODEL_PATH = "your-user/model";
+
+  const handleSend = async () => {
+    if (!input.trim()) return;
+
+    setIsLoading(true);
+    setMessages([...messages, { text: input, sender: 'user' }]);
+    setInput('');
+
+    try {
+      const response = await fetch(
+        `https://api-inference.huggingface.co/models/${HF_MODEL_PATH}`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${process.env.HF_TOKEN}`,
+          },
+          body: JSON.stringify({ inputs: input }),
+        }
+      );
+
+      if (!response.ok) throw new Error('Failed to fetch');
+
+      const data = await response.json();
+      // Adjust this based on your model's output format
+      const botResponse = data[0]?.generated_text || data[0]?.answer || "Sorry, I couldn't generate a response.";
+
+      setMessages((prev) => [...prev, { text: botResponse, sender: 'bot' }]);
+    } catch (error) {
+      setMessages((prev) => [...prev, { text: "Error: Could not get a response.", sender: 'bot' }]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
+    <div style={{ maxWidth: '500px', margin: '0 auto', border: '1px solid #ccc', borderRadius: '8px', padding: '16px' }}>
+      <h2>Chatbot</h2>
+      <div style={{ height: '300px', overflowY: 'auto', border: '1px solid #eee', padding: '8px', marginBottom: '8px' }}>
+        {messages.map((msg, i) => (
+          <div key={i} style={{ textAlign: msg.sender === 'user' ? 'right' : 'left', margin: '4px 0' }}>
+            <span style={{
+              background: msg.sender === 'user' ? '#007bff' : '#f1f1f1',
+              color: msg.sender === 'user' ? 'white' : 'black',
+              padding: '4px 8px',
+              borderRadius: '4px',
+              display: 'inline-block'
+            }}>
+              {msg.text}
+            </span>
+          </div>
+        ))}
+        {isLoading && <div style={{ textAlign: 'left', margin: '4px 0' }}>Typing...</div>}
+      </div>
+      <div style={{ display: 'flex' }}>
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyPress={(e) => e.key === 'Enter' && handleSend()}
+          style={{ flex: 1, padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
+          disabled={isLoading}
+        />
+        <button
+          onClick={handleSend}
+          style={{
+            marginLeft: '8px',
+            padding: '8px 16px',
+            background: '#007bff',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer'
+          }}
+          disabled={isLoading}
         >
-          Learn React
-        </a>
-      </header>
+          Send
+        </button>
+      </div>
     </div>
   );
 }