Create Index.js

Index.js

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const Chatbot = () => {
+  const [input, setInput] = useState('');
+  const [conversation, setConversation] = useState([]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInput(e.target.value);
+  };
+
+  const handleSendMessage = () => {
+    const newMessage = { text: input, sender: 'user' };
+    setConversation((prevConversation) => [...prevConversation, newMessage]);
+    axios.post('https://example.com/api/chatbot', { input })
+      .then((response) => {
+        const botResponse = { text: response.data, sender: 'bot' };
+        setConversation((prevConversation) => [...prevConversation, botResponse]);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+    setInput('');
+  };
+
+  return (
+    <div className="max-w-md mx-auto p-4 bg-gray-100 rounded-md shadow-md">
+      <h1 className="text-lg font-bold mb-4">Chatbot</h1>
+      <ul className="mb-4">
+        {conversation.map((message, index) => (
+          <li key={index} className={`text-lg ${message.sender === 'user' ? 'text-blue-600' : 'text-green-600'}`}>
+            {message.text}
+          </li>
+        ))}
+      </ul>
+      <input
+        type="text"
+        value={input}
+        onChange={handleInputChange}
+        className="w-full p-2 mb-4 border border-gray-400 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"
+      />
+      <button
+        onClick={handleSendMessage}
+        className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"
+      >
+        Send
+      </button>
+    </div>
+  );
+};
+
+export default Chatbot;