/*eslint-disable*/ 'use client'; import MessageBox from '@/components/MessageBox'; import Card from '@/components/card/Card'; import DashboardLayout from '@/components/layout'; import modalImage from '@/public/Modal.png'; import { EssayBody, OpenAIModel } from '@/types/types'; import { Database } from '@/types_db'; import { getErrorRedirect } from '@/utils/helpers'; import { getStripe } from '@/utils/stripe/client'; import { Badge, Button, Flex, FormLabel, Icon, Image, Link, Modal, ModalBody, ModalCloseButton, ModalContent, ModalOverlay, Select, Text, Textarea, useColorModeValue, useDisclosure, useToast } from '@chakra-ui/react'; import { User } from '@supabase/supabase-js'; import { usePathname, useRouter } from 'next/navigation'; import { useState } from 'react'; import { IoIosStar } from 'react-icons/io'; import { MdCheckCircle, MdChevronRight, MdOutlineWorkspacePremium } from 'react-icons/md'; import { checkoutWithStripe } from '@/utils/stripe/server'; type Subscription = Database['public']['Tables']['subscriptions']['Row']; type Product = Database['public']['Tables']['products']['Row']; type Price = Database['public']['Tables']['prices']['Row']; interface ProductWithPrices extends Product { prices: Price[]; } interface PriceWithProduct extends Price { products: Product | null; } interface SubscriptionWithProduct extends Subscription { prices: PriceWithProduct | null; } interface Props { user: User | null | undefined; products: ProductWithPrices[]; subscription: SubscriptionWithProduct | null; userDetails: { [x: string]: any } | null; } export default function AiGenerator(props: Props) { const [priceIdLoading, setPriceIdLoading] = useState(); const [plan, setPlan] = useState({ product: 'prod_PtTCPDFZbburMa', price: 'price_1P3gGXGx8VbJPRgzdEZODy8K' }); const router = useRouter(); const currentPath = usePathname(); const handleCheckout = async (price: Price) => { setPriceIdLoading(price.id); if (!props.user) { setPriceIdLoading(undefined); return router.push('/signin/signup'); } const { errorRedirect, sessionId } = await checkoutWithStripe( price, currentPath ); if (errorRedirect) { setPriceIdLoading(undefined); return router.push(errorRedirect); } if (!sessionId) { setPriceIdLoading(undefined); return router.push( getErrorRedirect( currentPath, 'An unknown error occurred.', 'Please try again later or contact a system administrator.' ) ); } const stripe = await getStripe(); stripe?.redirectToCheckout({ sessionId }); setPriceIdLoading(undefined); }; // Input States const { isOpen, onOpen, onClose } = useDisclosure(); const [words, setWords] = useState<'300' | '200'>('200'); const [essayType, setEssayType] = useState< '' | 'Argumentative' | 'Classic' | 'Persuasive' | 'Critique' >(''); const [topic, setTopic] = useState(''); // Response message const [outputCode, setOutputCode] = useState(''); // ChatGPT model const [model, setModel] = useState('gpt-3.5-turbo'); // Loading state const [loading, setLoading] = useState(false); // API Key // const [apiKey, setApiKey] = useState(); const textColor = useColorModeValue('#120F43', 'white'); const placeholderColor = useColorModeValue( { color: 'gray.500' }, { color: 'whiteAlpha.600' } ); const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200'); const toast = useToast(); // -------------- Main API Handler -------------- const handleTranslate = async () => { const maxCodeLength = model === 'gpt-3.5-turbo' ? 700 : 700; // Chat post conditions(maximum number of characters, valid message etc.) // if (!apiKey?.includes('sk-') && !apiKey?.includes('sk-')) { // alert('Please enter an API key.'); // return; // } if (!topic) { alert('Please enter your subject.'); return; } if (!words) { alert('Please choose number of words.'); return; } if (!essayType) { alert('Please choose a type of essay.'); return; } if (topic.length > maxCodeLength) { alert( `Please enter code less than ${maxCodeLength} characters. You are currently at ${topic.length} characters.` ); return; } setLoading(true); setOutputCode(''); const controller = new AbortController(); const body: EssayBody = { topic, words, essayType, model }; // -------------- Fetch -------------- const response = await fetch('/api/essayAPI', { method: 'POST', headers: { 'Content-Type': 'application/json' }, signal: controller.signal, body: JSON.stringify(body) }); if (!response.ok) { setLoading(false); if (response) { alert( 'Something went wrong went fetching from the API. Make sure to use a valid API key.' ); } return; } const data = response.body; if (!data) { setLoading(false); alert('Something went wrong'); return; } const reader = data.getReader(); const decoder = new TextDecoder(); let done = false; let code = ''; while (!done) { const { value, done: doneReading } = await reader.read(); done = doneReading; const chunkValue = decoder.decode(value); code += chunkValue; setOutputCode((prevCode) => prevCode + chunkValue); } setLoading(false); copyToClipboard(code); }; // -------------- Copy Response -------------- const copyToClipboard = (text: string) => { const el = document.createElement('textarea'); el.value = text; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el); }; // *** Initializing apiKey with .env.local value // useEffect(() => { // ENV file verison // const apiKeyENV = process.env.NEXT_PUBLIC_OPENAI_API_KEY; // if (apiKey === undefined || null) { // setApiKey(apiKeyENV); // } // }, []); // -------------- Input Value Handler -------------- const handleChange = (Event: any) => { setTopic(Event.target.value); }; const handleChangeParagraphs = (Event: any) => { setWords(Event.target.value); }; const handleChangeEssayType = (Event: any) => { setEssayType(Event.target.value); }; return ( Essay Topic What your essay will be about?