chore: 🔖 release new app version

.env.example

@@ -30,3 +30,6 @@ AWS_S3_ACCESS_KEY_ID=
 AWS_S3_SECRET_ACCESS_KEY=
 AWS_S3_BUCKET=
 AWS_CLOUD_FRONT_URL=
+
+#OpenAI
+OPENAI_API_KEY=

additional.d.ts

@@ -0,0 +1,6 @@
+declare module 'compute-cosine-similarity' {
+  export default function calculateSimilarity(
+    firstVector: number[],
+    secondVector: number[],
+  ): number
+}

package.json

@@ -30,20 +30,21 @@
     "@trpc/server": "^10.0.0",
     "@vercel/analytics": "^0.1.6",
     "compressorjs": "^1.1.1",
+    "compute-cosine-similarity": "^1.0.0",
     "jotai": "^1.12.1",
     "lodash": "^4.17.21",
     "next": "13.1.1",
     "next-auth": "^4.18.3",
     "next-superjson-plugin": "^0.5.4",
     "nextjs-progressbar": "^0.0.16",
+    "openai": "^3.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.41.5",
     "react-hot-toast": "^2.4.0",
     "react-intersection-observer": "^9.4.2",
     "react-tooltip": "^5.7.2",
     "sharp": "^0.31.3",
-    "string-similarity": "^4.0.4",
     "superjson": "1.9.1",
     "tailwindcss-animation-delay": "^1.0.7",
     "zod": "^3.18.0"

prisma/migrations/20230305201901_adds_is_ai_powered_flag_to_card/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Card" ADD COLUMN     "isAiPowered" BOOLEAN NOT NULL DEFAULT false;

prisma/schema.prisma

@@ -96,6 +96,7 @@ model Card {
   createdAt            DateTime              @default(now())
   updatedAt            DateTime              @default(now()) @updatedAt
   studySessionBoxCards StudySessionBoxCard[]
+  isAiPowered          Boolean               @default(false)
 }
 
 model StudySession {

src/components/card/card.component.tsx

@@ -4,17 +4,19 @@ import { PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline'
 
 import { classNames } from '~/utils/css'
 
+import { Tooltip } from '../tooltip'
 import type { CardProps } from './card.types'
 
 export function _Card(props: CardProps) {
   const {
+    as,
+    onClick,
     children,
+    fullWidth,
     isEditable,
-    onDeletePress,
+    isAiPowered,
     onEditPress,
-    onClick,
-    as,
-    fullWidth,
+    onDeletePress,
   } = props
 
   const renderEditButtons = () => {
@@ -32,6 +34,18 @@ export function _Card(props: CardProps) {
     )
   }
 
+  const renderAiPoweredTag = () => {
+    if (!isAiPowered) return null
+
+    return (
+      <Tooltip hint='Este card foi gerado por uma Inteligência Artificial'>
+        <span className='absolute right-0 bottom-0 p-2 text-lg hover:cursor-pointer'>
+          🤖
+        </span>
+      </Tooltip>
+    )
+  }
+
   const Container = as || 'div'
 
   return (
@@ -45,6 +59,7 @@ export function _Card(props: CardProps) {
     >
       {children}
       {renderEditButtons()}
+      {renderAiPoweredTag()}
     </Container>
   )
 }

src/components/card/card.types.ts

@@ -8,4 +8,5 @@ export type CardProps = {
   onClick?: () => void
   as?: ReactTag
   fullWidth?: boolean
+  isAiPowered?: boolean
 }

src/components/tooltip/tooltip.component.tsx

@@ -32,7 +32,11 @@ function _Tooltip(props: TooltipProps) {
   return (
     <>
       {renderTooltipTrigger()}
-      <ReactTooltip anchorId={tooltipId} className='max-w-xs' variant='dark'>
+      <ReactTooltip
+        anchorId={tooltipId}
+        className='z-50 max-w-xs'
+        variant='dark'
+      >
         <p className='text-left text-xs text-primary-50'>{hint}</p>
       </ReactTooltip>
     </>

src/constants/index.ts

@@ -2,6 +2,7 @@ import { Visibility } from '@prisma/client'
 
 import type { Option } from '~/components/radio-group'
 
+export const MINIMUM_ACCEPTED_SIMILARITY = 0.9
 export const MAX_TOPICS_PER_DECK_AND_USER = 5
 export const ITEMS_PER_PAGE = 30
 

src/contexts/create-new-deck/create-new-deck.context.tsx

@@ -19,6 +19,7 @@ import type {
   CreateNewDeckContextState,
   DeckWithCardsAndTopics,
   FormInputValues,
+  GenerateAiPoweredCardsParams,
   TopicInput,
 } from './create-new-deck.types'
 import { DeckInputFormSchema } from './create-new-deck.types'
@@ -73,6 +74,20 @@ export function CreateNewDeckContextProvider(
   const getFileUploadConfigMutation =
     api.files.getFileUploadConfig.useMutation()
 
+  const {
+    mutate: generateAiPoweredCardsMutation,
+    isLoading: isGeneratingAiPoweredCards,
+    isError: hasErrorGeneratingAiPoweredCards,
+  } = api.cards.generateAiPoweredCards.useMutation({
+    onSuccess: aiPoweredCards => {
+      setCards(prevCards => [...prevCards, ...aiPoweredCards])
+      notify.success('Bip Bop, cards gerados com sucesso. Aproveite 🤖')
+    },
+    onError: () => {
+      notify.error('Ocorreu um erro ao gerar os cards. Tente novamente!')
+    },
+  })
+
   /**
    * Shared states between creation and edit
    */
@@ -93,6 +108,8 @@ export function CreateNewDeckContextProvider(
   const [deletedCards, setDeletedCards] = useState<Array<CardInput>>([])
   const [editedCards, setEditedCards] = useState<Array<CardInput>>([])
 
+  const hasDeckAiPoweredCards = cards.some(card => card.isAiPowered)
+
   const createNewDeckForm = useForm<FormInputValues>({
     resolver: zodResolver(DeckInputFormSchema),
     defaultValues: {
@@ -246,6 +263,26 @@ export function CreateNewDeckContextProvider(
       }
     }
 
+  const generateAiPoweredCards = (params: GenerateAiPoweredCardsParams) => {
+    const { topics } = params
+
+    if (isGeneratingAiPoweredCards) return
+
+    if (topics.length === 0) {
+      notify.warning(
+        'Você precisa cadastrar ao menos 1 tópico para gerar Cards de forma automática',
+      )
+      return
+    }
+
+    if (hasDeckAiPoweredCards) {
+      notify.error('Este Deck já possui Cards gerados por uma IA')
+      return
+    }
+
+    generateAiPoweredCardsMutation({ topics })
+  }
+
   /**
    * If isEditingDeck uses update function (currying) else uses the creation function
    */
@@ -270,6 +307,10 @@ export function CreateNewDeckContextProvider(
 
     visibility,
     setVisibility,
+
+    generateAiPoweredCards,
+    isGeneratingAiPoweredCards,
+    hasErrorGeneratingAiPoweredCards,
   }
 
   return (

src/contexts/create-new-deck/create-new-deck.types.ts

@@ -39,6 +39,8 @@ export type CreateNewDeckContextProviderProps = {
   deck?: DeckWithCardsAndTopics | null
 }
 
+export type GenerateAiPoweredCardsParams = { topics: Array<TopicInput> }
+
 export type CreateNewDeckContextState = {
   createNewDeckForm?: UseFormReturn<FormInputValues>
   submitDeck: (values: FormInputValues) => Promise<void>
@@ -55,6 +57,10 @@ export type CreateNewDeckContextState = {
   visibilityOptions: Array<Option<Visibility>>
   visibility?: Option<Visibility>
   setVisibility: Dispatch<SetStateAction<Option<Visibility> | undefined>>
+
+  generateAiPoweredCards: (params: GenerateAiPoweredCardsParams) => void
+  isGeneratingAiPoweredCards: boolean
+  hasErrorGeneratingAiPoweredCards: boolean
 }
 
 export const initialState: CreateNewDeckContextState = {
@@ -72,4 +78,8 @@ export const initialState: CreateNewDeckContextState = {
   visibilityOptions: DECK_VISIBILITY_OPTIONS,
   visibility: DECK_VISIBILITY_OPTIONS[0],
   setVisibility: noop,
+
+  generateAiPoweredCards: noop,
+  isGeneratingAiPoweredCards: false,
+  hasErrorGeneratingAiPoweredCards: false,
 }

src/env/schema.mjs

@@ -31,6 +31,7 @@ export const serverSchema = z.object({
   AWS_S3_SECRET_ACCESS_KEY: z.string(),
   AWS_S3_BUCKET: z.string(),
   AWS_CLOUD_FRONT_URL: z.string().url(),
+  OPENAI_API_KEY: z.string(),
 })
 
 /**

src/modules/decks/create/components/cards.component.tsx

@@ -3,8 +3,10 @@ import { useState } from 'react'
 import { PlusCircleIcon } from '@heroicons/react/24/outline'
 
 import { Card } from '~/components/card'
+import { Loader } from '~/components/loader'
 import { NewCardModal } from '~/components/modal/new-card/new-card-modal.component'
 import type { CardFormInputValues } from '~/components/modal/new-card/new-card-modal.types'
+import { Tooltip } from '~/components/tooltip'
 import { useCreateNewDeckContext } from '~/contexts/create-new-deck'
 
 type NewCardModalState = {
@@ -13,7 +15,16 @@ type NewCardModalState = {
 }
 
 export const Cards = () => {
-  const { cards, addCard, deleteCard, editCard } = useCreateNewDeckContext()
+  const {
+    cards,
+    addCard,
+    deleteCard,
+    editCard,
+    topics,
+    generateAiPoweredCards,
+    isGeneratingAiPoweredCards,
+    hasErrorGeneratingAiPoweredCards,
+  } = useCreateNewDeckContext()
 
   const [newCardModalState, setNewCardModalState] = useState<NewCardModalState>(
     { isOpen: false },
@@ -40,13 +51,39 @@ export const Cards = () => {
     }))
   }
 
+  const renderAiCardsButton = () => {
+    const successContent = isGeneratingAiPoweredCards ? (
+      <Loader />
+    ) : (
+      <span className='text-4xl'>🤖</span>
+    )
+
+    const errorContent = (
+      <span className='text-4xl'>
+        Houve um erro ao gerar os Cards. Clique aqui para tentar novamente!
+      </span>
+    )
+
+    return (
+      <Card onClick={() => generateAiPoweredCards({ topics })}>
+        {hasErrorGeneratingAiPoweredCards ? errorContent : successContent}
+        <div className='absolute right-0 top-0 p-3'>
+          <Tooltip
+            hint={`Além de criar seus próprios Flashcards manualmente você pode deixar que a nossa Inteligência Artificial os gere para você se baseando nos tópicos previamente cadastrados acima. Lembre-se, a quantidade de Cards criados pode variar de acordo com o tamanho das perguntas e respostas geradas mas deve girar em torno de 3.`}
+          />
+        </div>
+      </Card>
+    )
+  }
+
   return (
     <>
       <h2 className='text-xl font-semibold'>Cards</h2>
       <div className='w-ful flex flex-wrap gap-5'>
         {cards.map((card, idx) => (
           <Card
             isEditable
+            isAiPowered={card.isAiPowered}
             key={`${card.question}-${card.answer}`}
             onDeletePress={() => deleteCard(idx)}
             onEditPress={() => {
@@ -59,6 +96,7 @@ export const Cards = () => {
         <Card onClick={() => setNewCardModalState({ isOpen: true })}>
           <PlusCircleIcon className='h-12 w-12' />
         </Card>
+        {renderAiCardsButton()}
       </div>
       <NewCardModal
         isOpen={newCardModalState.isOpen}

src/modules/decks/review/hooks/use-deck-review.hook.tsx

@@ -75,7 +75,9 @@ export function useDeckReview(deckId: string) {
   }, [cardAnswerStage, answerResult])
 
   useEffect(() => {
-    if (isLastCard && cardAnswerStage === 'validation' && studySessionId) {
+    const isLastCardValidation = isLastCard && cardAnswerStage === 'validation'
+
+    if (isLastCardValidation && studySessionId) {
       finishReviewSession({
         studySessionId,
         reviewedBoxIds: studySessionBoxes?.map(({ id }) => id) ?? [],

src/pages/decks/[id].tsx

@@ -32,7 +32,7 @@ async function getDeckFromDatabase(deckId: string) {
   return await prisma.deck.findFirst({
     where: { id: deckId },
     include: {
-      cards: { select: { id: true, question: true } },
+      cards: { select: { id: true, question: true, isAiPowered: true } },
       topics: true,
     },
   })
@@ -108,10 +108,6 @@ const DeckDetailsPage: NextPage<
     )
   }
 
-  const renderCurrentStudySessionCard = () => {
-    return <StudySessionCard deckId={deck.id} />
-  }
-
   return (
     <>
       <Head>
@@ -141,11 +137,11 @@ const DeckDetailsPage: NextPage<
             {renderTopics()}
           </div>
         </div>
-        {renderCurrentStudySessionCard()}
+        <StudySessionCard deckId={deck.id} />
         <h2 className='text-xl font-medium text-primary-900'>Cards:</h2>
         <ul className='flex w-full flex-wrap gap-5'>
           {deck.cards.map(card => (
-            <Card as='li' key={card.id}>
+            <Card as='li' key={card.id} isAiPowered={card.isAiPowered}>
               {card.question}
             </Card>
           ))}

src/server/api/root.ts

@@ -1,3 +1,4 @@
+import { cardsRouter } from './routers/cards'
 import { decksRouter } from './routers/decks'
 import { filesRouter } from './routers/files'
 import { studySessionRouter } from './routers/study-session'
@@ -14,6 +15,7 @@ export const appRouter = createTRPCRouter({
   files: filesRouter,
   studySession: studySessionRouter,
   user: userRouter,
+  cards: cardsRouter,
 })
 
 export type AppRouter = typeof appRouter

src/server/api/routers/cards/cards.router.ts

@@ -0,0 +1,21 @@
+import { z } from 'zod'
+
+import { MAX_TOPICS_PER_DECK_AND_USER } from '~/constants'
+import { createTRPCRouter, protectedProcedure } from '~/server/api/trpc'
+import { generateFlashCards } from '~/utils/openai'
+import { TopicInputSchema } from '~/utils/validators/topic'
+
+export const cardsRouter = createTRPCRouter({
+  generateAiPoweredCards: protectedProcedure
+    .input(
+      z.object({
+        topics: z
+          .array(TopicInputSchema)
+          .min(1)
+          .max(MAX_TOPICS_PER_DECK_AND_USER),
+      }),
+    )
+    .mutation(({ input: { topics } }) => {
+      return generateFlashCards({ topics })
+    }),
+})

src/server/api/routers/cards/index.ts

@@ -0,0 +1 @@
+export { cardsRouter } from './cards.router'