Chatbot U I - Copy this React, Tailwind Component to your project
"use client" import { useState } from "react"; import axios from "axios"; import ReactMarkdown from "react markdown"; const Chatbot = () => { const [question, setQuestion] = useState(""); const [answer, setAnswer] = useState(""); const [generatingAnswer, setGeneratingAnswer] = useState(false); async function generateAnswer(e) { const key = process.env.NEXT_PUBLIC_GEMINI_API_KEY; setGeneratingAnswer(true); e.preventDefault(); setAnswer("Loading your answer... \n It might take up to 10 seconds"); try { const response = await axios({ url: `https://generativelanguage.googleapis.com/v1beta/models/gemini 1.5 flash latest:generateContent?key=${key}`, // url: `https://generativelanguage.googleapis.com/v1beta/models/gemini 1.5 flash latest:generateContent?key=AIzaSyDJ8PKh8Jx9V08nMsH Kuq3yaWWhMo8BQ8`, method: "post", data: { contents: [{ parts: [{ text: question }] }], }, }); setAnswer( response.data.candidates[0].content.parts[0].text ); } catch (error) { console.log(error); setAnswer("Sorry Something went wrong. Please try again!"); } setGeneratingAnswer(false); } return ( <div className="flex flex col justify center items center"> <form onSubmit={generateAnswer} className="w full md:w 2/3 lg:w 1/2 xl:w 1/3 text center rounded lg shadow lg bg white py 6 px 4 transition all duration 500 transform hover:scale 105" > <a href="https://github.com/Vishesh Pandey/chat ai" target="_blank" rel="noopener noreferrer" > <h1 className="text 4xl font bold text blue 500 mb 4 animate bounce"> Chat AI </h1> </a> <textarea required className="border border gray 300 rounded w full my 2 min h fit p 3 transition all duration 300 focus:border blue 400 focus:shadow lg" value={question} onChange={(e) => setQuestion(e.target.value)} placeholder="Ask anything" ></textarea> <button type="submit" className={`bg blue 500 text white p 3 rounded md hover:bg blue 600 transition all duration 300 ${ generatingAnswer ? "opacity 50 cursor not allowed" : "" }`} disabled={generatingAnswer} > Generate answer </button> </form> <div className="w full md:w 2/3 lg:w 1/2 xl:w 1/3 text center rounded lg bg white my 4 shadow lg transition all duration 500 transform hover:scale 105"> <ReactMarkdown className="p 4">{answer}</ReactMarkdown> </div> </div> ); }; export default Chatbot; use this existing code dont make any change in logic this is a chatbot i want a text input there and in side i want a button when clicked downside in text area answer should display in proper content should fit and scroll bar should appear if contain doest fit make this beatuful make it responsive in mobile,tab and desktop and for loading.... give text Analysing and note a audio symbol there that which click on that audio will play and a dropdown for multilingual when clicked on any langaue in multilingual dropdown that text should go as a prompt as give that data in that specific langaue make Ui beutiful include audio section also
