File size: 2,857 Bytes
9fed9f2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
import React, { useState, useEffect } from 'react';
import { formatGeminiResponseToExcel } from '../utils/excelFormatter';
interface GeminiChatProps {
apiKey: string;
initialInput?: string;
}
const GeminiChat: React.FC<GeminiChatProps> = ({ apiKey, initialInput = '' }) => {
const [input, setInput] = useState('');
const [response, setResponse] = useState('');
const [loading, setLoading] = useState(false);
const fetchGeminiResponse = async (text: string) => {
setLoading(true);
try {
const response = await fetch(
`https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${apiKey}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
contents: [{
parts: [{
text: text
}]
}]
})
}
);
const data = await response.json();
if (data.error) {
throw new Error(data.error.message);
}
setResponse(data.candidates[0].content.parts[0].text);
} catch (error) {
console.error('Error:', error);
setResponse('Error getting response from Gemini: ' + (error as Error).message);
} finally {
setLoading(false);
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (input.trim()) {
await fetchGeminiResponse(input);
}
};
useEffect(() => {
if (initialInput) {
fetchGeminiResponse(initialInput);
}
}, [initialInput]);
const handleExportExcel = () => {
try {
formatGeminiResponseToExcel(response);
} catch (error) {
console.error('Export error:', error);
alert('Failed to export to Excel. Please check the response format.');
}
};
return (
<div className="gemini-chat">
<h2>Ask Anything with Gemini</h2>
<form onSubmit={handleSubmit}>
<textarea
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Ask anything... (For Excel export, ask for structured data)"
className="gemini-input"
disabled={loading}
/>
<button
type="submit"
disabled={loading || !input.trim()}
className="gemini-button"
>
{loading ? <span className="loading-dots">Thinking</span> : 'Send'}
</button>
</form>
{response && (
<div className="gemini-response">
<h3>Generated Data</h3>
<div className="response-text">{response}</div>
<button
onClick={handleExportExcel}
className="gemini-button export-excel"
>
Export to Excel
</button>
</div>
)}
</div>
);
};
export default GeminiChat; |