{"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"}}}}