1 line
5.0 KiB
JSON
1 line
5.0 KiB
JSON
{"repo": "ayushghosh02/studyaceapp-frontend", "files": {"src/UserComponent/ChatGemini.jsx": {"cc2f85faeb9ed961382790674d0b4e30a7cd47c5": {"t": 1785674563.0218167, "n": 4698, "h": "32ad45e6c01c35fa", "c": "import { useState, useRef, useEffect } from \"react\";\nimport axios from \"axios\";\nimport ReactMarkdown from \"react-markdown\";\nimport { Container, Row, Col, Form, Button, Card, Spinner } from \"react-bootstrap\";\n\nfunction ChatGemini() {\n const [chatHistory, setChatHistory] = useState([]);\n const [question, setQuestion] = useState(\"\");\n const [answer, setAnswer] = useState(\"\");\n const [generatingAnswer, setGeneratingAnswer] = useState(false);\n\n const chatContainerRef = useRef(null);\n\n useEffect(() => {\n if (chatContainerRef.current) {\n chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;\n }\n }, [chatHistory, generatingAnswer]);\n\n async function generateAnswer(e) {\n e.preventDefault();\n if (!question.trim()) return;\n\n setGeneratingAnswer(true);\n const currentQuestion = question;\n setQuestion(\"\"); // Clear input immediately after sending\n\n // Add user question to chat history\n setChatHistory((prev) => [...prev, { type: \"question\", content: currentQuestion }]);\n\n try {\n const response = await axios({\n url: `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=AIzaSyCEY1wH4krUFnR3ea2gsf2LseB4oCE0YXU`,\n method: \"post\",\n data: {\n contents: [{ parts: [{ text: question }] }],\n },\n });\n\n const aiResponse = response.data.candidates[0].content.parts[0].text;\n setChatHistory((prev) => [...prev, { type: \"answer\", content: aiResponse }]);\n setAnswer(aiResponse);\n } catch (error) {\n console.error(error);\n setAnswer(\"Sorry - Something went wrong. Please try again!\");\n }\n setGeneratingAnswer(false);\n }\n\n return (\n <Container fluid className=\"bg-light d-flex align-items-center justify-content-center vh-100\">\n <Card className=\"shadow-lg\" style={{ width: \"50rem\", maxHeight: \"90vh\", overflow: \"hidden\" }}>\n {/* Header */}\n <Card.Header className=\"bg-primary text-white text-center py-3\">\n <h2>Learn with Chat AI</h2>\n </Card.Header>\n\n {/* Chat History */}\n <Card.Body\n className=\"d-flex flex-column overflow-auto\"\n style={{ height: \"70vh\" }}\n ref={chatContainerRef}\n >\n {chatHistory.length === 0 ? (\n <Card className=\"text-center p-4 border-0\">\n <Card.Body>\n <Card.Title>Welcome to Chat AI! 👋</Card.Title>\n <Card.Text>\n Ask me about general knowledge, technical questions, writing assistance, or problem-solving.\n Type your question below and click Send!\n </Card.Text>\n </Card.Body>\n </Card>\n ) : (\n chatHistory.map((chat, index) => (\n <div\n key={index}\n className={`d-flex mb-3 ${chat.type === \"question\" ? \"justify-content-end\" : \"justify-content-start\"}`}\n >\n <Card\n className={`p-2 shadow-sm ${\n chat.type === \"question\" ? \"bg-primary text-white\" : \"bg-secondary text-light\"\n }`}\n style={{ maxWidth: \"75%\" }}\n >\n <ReactMarkdown>{chat.content}</ReactMarkdown>\n </Card>\n </div>\n ))\n )}\n {generatingAnswer && (\n <div className=\"d-flex justify-content-start\">\n <Card className=\"p-2 shadow-sm bg-secondary text-light\" style={{ maxWidth: \"75%\" }}>\n <Spinner animation=\"grow\" size=\"sm\" className=\"me-2\" /> Thinking...\n </Card>\n </div>\n )}\n </Card.Body>\n\n {/* Input Form */}\n <Card.Footer className=\"bg-white p-3\">\n <Form onSubmit={generateAnswer} className=\"d-flex gap-2\">\n <Form.Control\n as=\"textarea\"\n rows={2}\n placeholder=\"Ask anything...\"\n value={question}\n onChange={(e) => setQuestion(e.target.value)}\n className=\"flex-grow-1\"\n required\n />\n <Button\n type=\"submit\"\n variant=\"primary\"\n disabled={generatingAnswer}\n className=\"d-flex align-items-center justify-content-center\"\n >\n {generatingAnswer ? (\n <>\n <Spinner animation=\"border\" size=\"sm\" className=\"me-2\" />\n Sending...\n </>\n ) : (\n \"Send\"\n )}\n </Button>\n </Form>\n </Card.Footer>\n </Card>\n </Container>\n );\n}\n\nexport default ChatGemini;\n"}}}} |