├── src
    ├── vite-env.d.ts
    ├── http
    │   ├── types
    │   │   ├── create-room-response.ts
    │   │   ├── create-question-request.ts
    │   │   ├── create-room-request.ts
    │   │   ├── create-question-response.ts
    │   │   ├── get-rooms-response.ts
    │   │   └── get-room-questions-response.ts
    │   ├── use-rooms.ts
    │   ├── use-room-questions.ts
    │   ├── use-create-room.ts
    │   └── use-create-question.ts
    ├── lib
    │   ├── utils.ts
    │   └── dayjs.ts
    ├── main.tsx
    ├── pages
    │   ├── create-room.tsx
    │   ├── room.tsx
    │   └── record-room-audio.tsx
    ├── components
    │   ├── ui
    │   │   ├── label.tsx
    │   │   ├── textarea.tsx
    │   │   ├── input.tsx
    │   │   ├── badge.tsx
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   └── form.tsx
    │   ├── question-list.tsx
    │   ├── room-list.tsx
    │   ├── question-item.tsx
    │   ├── question-form.tsx
    │   └── create-room-form.tsx
    ├── app.tsx
    └── index.css
├── biome.jsonc
├── .gitignore
├── index.html
├── tsconfig.json
├── vite.config.ts
├── components.json
├── tsconfig.node.json
├── tsconfig.app.json
├── package.json
└── README.md


/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/http/types/create-room-response.ts:
--------------------------------------------------------------------------------
1 | export type CreateRoomResponse = {
2 |   roomId: string
3 | }
4 | 


--------------------------------------------------------------------------------
/src/http/types/create-question-request.ts:
--------------------------------------------------------------------------------
1 | export type CreateQuestionRequest = {
2 |   question: string
3 | }
4 | 


--------------------------------------------------------------------------------
/src/http/types/create-room-request.ts:
--------------------------------------------------------------------------------
1 | export type CreateRoomRequest = {
2 |   name: string
3 |   description: string
4 | }
5 | 


--------------------------------------------------------------------------------
/src/http/types/create-question-response.ts:
--------------------------------------------------------------------------------
1 | export type CreateQuestionResponse = {
2 |   questionId: string
3 |   answer: string | null
4 | }
5 | 


--------------------------------------------------------------------------------
/src/http/types/get-rooms-response.ts:
--------------------------------------------------------------------------------
1 | export type GetRoomsResponse = Array<{
2 |   id: string
3 |   name: string
4 |   questionsCount: number
5 |   createdAt: string
6 | }>
7 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/src/lib/dayjs.ts:
--------------------------------------------------------------------------------
1 | import lib from 'dayjs'
2 | import 'dayjs/locale/pt-BR'
3 | import relativeTime from 'dayjs/plugin/relativeTime'
4 | 
5 | lib.locale('pt-BR')
6 | lib.extend(relativeTime)
7 | 
8 | export const dayjs = lib
9 | 


--------------------------------------------------------------------------------
/src/http/types/get-room-questions-response.ts:
--------------------------------------------------------------------------------
1 | export type GetRoomQuestionsResponse = Array<{
2 |   id: string
3 |   question: string
4 |   answer: string | null
5 |   createdAt: string
6 |   isGeneratingAnswer?: boolean
7 | }>
8 | 


--------------------------------------------------------------------------------
/biome.jsonc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://biomejs.dev/schemas/2.0.5/schema.json",
 3 |   "extends": [
 4 |     "ultracite"
 5 |   ],
 6 |   "javascript": {
 7 |     "formatter": {
 8 |       "semicolons": "asNeeded"
 9 |     }
10 |   }
11 | }


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import './index.css'
 2 | 
 3 | import { StrictMode } from 'react'
 4 | import { createRoot } from 'react-dom/client'
 5 | import { App } from './app'
 6 | 
 7 | // biome-ignore lint/style/noNonNullAssertion: mandatory by React
 8 | createRoot(document.getElementById('root')!).render(
 9 |   <StrictMode>
10 |     <App />
11 |   </StrictMode>
12 | )
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en" class="dark">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 | 
 7 |     <title>Let me Ask</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "references": [
 4 |     {
 5 |       "path": "./tsconfig.app.json"
 6 |     },
 7 |     {
 8 |       "path": "./tsconfig.node.json"
 9 |     }
10 |   ],
11 |   "compilerOptions": {
12 |     "strictNullChecks": true,
13 |     "baseUrl": ".",
14 |     "paths": {
15 |       "@/*": [
16 |         "./src/*"
17 |       ]
18 |     }
19 |   }
20 | }


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import path from 'node:path'
 2 | import tailwindcss from '@tailwindcss/vite'
 3 | import react from '@vitejs/plugin-react'
 4 | import { defineConfig } from 'vite'
 5 | 
 6 | export default defineConfig({
 7 |   plugins: [react(), tailwindcss()],
 8 |   resolve: {
 9 |     alias: {
10 |       '@': path.resolve(__dirname, './src'),
11 |     },
12 |   },
13 | })
14 | 


--------------------------------------------------------------------------------
/src/http/use-rooms.ts:
--------------------------------------------------------------------------------
 1 | import { useQuery } from '@tanstack/react-query'
 2 | import type { GetRoomsResponse } from './types/get-rooms-response'
 3 | 
 4 | export function useRooms() {
 5 |   return useQuery({
 6 |     queryKey: ['get-rooms'],
 7 |     queryFn: async () => {
 8 |       const response = await fetch('http://localhost:3333/rooms')
 9 |       const result: GetRoomsResponse = await response.json()
10 | 
11 |       return result
12 |     },
13 |   })
14 | }
15 | 


--------------------------------------------------------------------------------
/src/pages/create-room.tsx:
--------------------------------------------------------------------------------
 1 | import { CreateRoomForm } from '@/components/create-room-form'
 2 | import { RoomList } from '@/components/room-list'
 3 | 
 4 | export function CreateRoom() {
 5 |   return (
 6 |     <div className="min-h-screen px-4 py-8">
 7 |       <div className="mx-auto max-w-4xl">
 8 |         <div className="grid grid-cols-2 items-start gap-8">
 9 |           <CreateRoomForm />
10 |           <RoomList />
11 |         </div>
12 |       </div>
13 |     </div>
14 |   )
15 | }
16 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": false,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "",
 8 |     "css": "src/index.css",
 9 |     "baseColor": "zinc",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }


--------------------------------------------------------------------------------
/src/http/use-room-questions.ts:
--------------------------------------------------------------------------------
 1 | import { useQuery } from '@tanstack/react-query'
 2 | import type { GetRoomQuestionsResponse } from './types/get-room-questions-response'
 3 | 
 4 | export function useRoomQuestions(roomId: string) {
 5 |   return useQuery({
 6 |     queryKey: ['get-questions', roomId],
 7 |     queryFn: async () => {
 8 |       const response = await fetch(
 9 |         `http://localhost:3333/rooms/${roomId}/questions`
10 |       )
11 |       const result: GetRoomQuestionsResponse = await response.json()
12 | 
13 |       return result
14 |     },
15 |   })
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Label({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof LabelPrimitive.Root>) {
12 |   return (
13 |     <LabelPrimitive.Root
14 |       data-slot="label"
15 |       className={cn(
16 |         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
17 |         className
18 |       )}
19 |       {...props}
20 |     />
21 |   )
22 | }
23 | 
24 | export { Label }
25 | 


--------------------------------------------------------------------------------
/src/components/question-list.tsx:
--------------------------------------------------------------------------------
 1 | import { useRoomQuestions } from '@/http/use-room-questions'
 2 | import { QuestionItem } from './question-item'
 3 | 
 4 | interface QuestionListProps {
 5 |   roomId: string
 6 | }
 7 | 
 8 | export function QuestionList(props: QuestionListProps) {
 9 |   const { data } = useRoomQuestions(props.roomId)
10 | 
11 |   return (
12 |     <div className="space-y-6">
13 |       <div className="flex items-center justify-between">
14 |         <h2 className="font-semibold text-2xl text-foreground">
15 |           Perguntas & Respostas
16 |         </h2>
17 |       </div>
18 | 
19 |       {data?.map((question) => {
20 |         return <QuestionItem key={question.id} question={question} />
21 |       })}
22 |     </div>
23 |   )
24 | }
25 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 4 |     "target": "ES2023",
 5 |     "lib": ["ES2023"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "verbatimModuleSyntax": true,
13 |     "moduleDetection": "force",
14 |     "noEmit": true,
15 | 
16 |     /* Linting */
17 |     "strict": true,
18 |     "noUnusedLocals": true,
19 |     "noUnusedParameters": true,
20 |     "erasableSyntaxOnly": true,
21 |     "noFallthroughCasesInSwitch": true,
22 |     "noUncheckedSideEffectImports": true
23 |   },
24 |   "include": ["vite.config.ts"]
25 | }
26 | 


--------------------------------------------------------------------------------
/src/app.tsx:
--------------------------------------------------------------------------------
 1 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 2 | import { BrowserRouter, Route, Routes } from 'react-router-dom'
 3 | import { CreateRoom } from './pages/create-room'
 4 | import { RecordRoomAudio } from './pages/record-room-audio'
 5 | import { Room } from './pages/room'
 6 | 
 7 | const queryClient = new QueryClient()
 8 | 
 9 | export function App() {
10 |   return (
11 |     <QueryClientProvider client={queryClient}>
12 |       <BrowserRouter>
13 |         <Routes>
14 |           <Route element={<CreateRoom />} index />
15 |           <Route element={<Room />} path="/room/:roomId" />
16 |           <Route element={<RecordRoomAudio />} path="/room/:roomId/audio" />
17 |         </Routes>
18 |       </BrowserRouter>
19 |     </QueryClientProvider>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import type * as React from 'react'
 2 | 
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
 6 |   return (
 7 |     <textarea
 8 |       className={cn(
 9 |         'field-sizing-content flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
10 |         className
11 |       )}
12 |       data-slot="textarea"
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | 
18 | export { Textarea }
19 | 


--------------------------------------------------------------------------------
/src/http/use-create-room.ts:
--------------------------------------------------------------------------------
 1 | import { useMutation, useQueryClient } from '@tanstack/react-query'
 2 | import type { CreateRoomRequest } from './types/create-room-request'
 3 | import type { CreateRoomResponse } from './types/create-room-response'
 4 | 
 5 | export function useCreateRoom() {
 6 |   const queryClient = useQueryClient()
 7 | 
 8 |   return useMutation({
 9 |     mutationFn: async (data: CreateRoomRequest) => {
10 |       const response = await fetch('http://localhost:3333/rooms', {
11 |         method: 'POST',
12 |         headers: {
13 |           'Content-Type': 'application/json',
14 |         },
15 |         body: JSON.stringify(data),
16 |       })
17 | 
18 |       const result: CreateRoomResponse = await response.json()
19 | 
20 |       return result
21 |     },
22 | 
23 |     onSuccess: () => {
24 |       queryClient.invalidateQueries({ queryKey: ['get-rooms'] })
25 |     },
26 |   })
27 | }
28 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 4 |     "target": "ES2022",
 5 |     "useDefineForClassFields": true,
 6 |     "lib": [
 7 |       "ES2022",
 8 |       "DOM",
 9 |       "DOM.Iterable"
10 |     ],
11 |     "module": "ESNext",
12 |     "skipLibCheck": true,
13 |     "moduleResolution": "bundler",
14 |     "allowImportingTsExtensions": true,
15 |     "verbatimModuleSyntax": true,
16 |     "moduleDetection": "force",
17 |     "noEmit": true,
18 |     "jsx": "react-jsx",
19 |     "strict": true,
20 |     "noUnusedLocals": true,
21 |     "noUnusedParameters": true,
22 |     "erasableSyntaxOnly": true,
23 |     "noFallthroughCasesInSwitch": true,
24 |     "noUncheckedSideEffectImports": true,
25 |     "baseUrl": ".",
26 |     "paths": {
27 |       "@/*": [
28 |         "./src/*"
29 |       ]
30 |     }
31 |   },
32 |   "include": [
33 |     "src"
34 |   ]
35 | }


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import type * as React from 'react'
 2 | 
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
 6 |   return (
 7 |     <input
 8 |       className={cn(
 9 |         'flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
10 |         'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
11 |         'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
12 |         className
13 |       )}
14 |       data-slot="input"
15 |       type={type}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | export { Input }
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "web",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc -b && vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "@hookform/resolvers": "5.1.1",
13 |     "@radix-ui/react-label": "2.1.7",
14 |     "@radix-ui/react-slot": "1.2.3",
15 |     "@tailwindcss/vite": "4.1.11",
16 |     "@tanstack/react-query": "5.81.5",
17 |     "class-variance-authority": "0.7.1",
18 |     "clsx": "2.1.1",
19 |     "dayjs": "1.11.13",
20 |     "lucide-react": "0.525.0",
21 |     "react": "^19.1.0",
22 |     "react-dom": "^19.1.0",
23 |     "react-hook-form": "7.59.0",
24 |     "react-router-dom": "7.6.3",
25 |     "tailwind-merge": "3.3.1",
26 |     "tailwindcss": "4.1.11",
27 |     "zod": "3.25.67"
28 |   },
29 |   "devDependencies": {
30 |     "@biomejs/biome": "2.0.5",
31 |     "@types/dom-speech-recognition": "0.0.6",
32 |     "@types/node": "24.0.8",
33 |     "@types/react": "^19.1.8",
34 |     "@types/react-dom": "^19.1.6",
35 |     "@vitejs/plugin-react": "^4.5.2",
36 |     "tw-animate-css": "1.3.4",
37 |     "typescript": "~5.8.3",
38 |     "ultracite": "5.0.27",
39 |     "vite": "^7.0.0"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/pages/room.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowLeft, Radio } from 'lucide-react'
 2 | import { Link, Navigate, useParams } from 'react-router-dom'
 3 | import { QuestionForm } from '@/components/question-form'
 4 | import { QuestionList } from '@/components/question-list'
 5 | import { Button } from '@/components/ui/button'
 6 | 
 7 | type RoomParams = {
 8 |   roomId: string
 9 | }
10 | 
11 | export function Room() {
12 |   const params = useParams<RoomParams>()
13 | 
14 |   if (!params.roomId) {
15 |     return <Navigate replace to="/" />
16 |   }
17 | 
18 |   return (
19 |     <div className="min-h-screen bg-zinc-950">
20 |       <div className="container mx-auto max-w-4xl px-4 py-8">
21 |         <div className="mb-8">
22 |           <div className="mb-4 flex items-center justify-between">
23 |             <Link to="/">
24 |               <Button variant="outline">
25 |                 <ArrowLeft className="mr-2 size-4" />
26 |                 Voltar ao Início
27 |               </Button>
28 |             </Link>
29 |             <Link to={`/room/${params.roomId}/audio`}>
30 |               <Button className="flex items-center gap-2" variant="secondary">
31 |                 <Radio className="size-4" />
32 |                 Gravar Áudio
33 |               </Button>
34 |             </Link>
35 |           </div>
36 |           <h1 className="mb-2 font-bold text-3xl text-foreground">
37 |             Sala de Perguntas
38 |           </h1>
39 |           <p className="text-muted-foreground">
40 |             Faça perguntas e receba respostas com IA
41 |           </p>
42 |         </div>
43 | 
44 |         <div className="mb-8">
45 |           <QuestionForm roomId={params.roomId} />
46 |         </div>
47 | 
48 |         <QuestionList roomId={params.roomId} />
49 |       </div>
50 |     </div>
51 |   )
52 | }
53 | 


--------------------------------------------------------------------------------
/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import { Slot } from '@radix-ui/react-slot'
 2 | import { cva, type VariantProps } from 'class-variance-authority'
 3 | import type * as React from 'react'
 4 | 
 5 | import { cn } from '@/lib/utils'
 6 | 
 7 | const badgeVariants = cva(
 8 |   'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 font-medium text-xs transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3',
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
14 |         secondary:
15 |           'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
16 |         destructive:
17 |           'border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90',
18 |         outline:
19 |           'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
20 |       },
21 |     },
22 |     defaultVariants: {
23 |       variant: 'default',
24 |     },
25 |   }
26 | )
27 | 
28 | function Badge({
29 |   className,
30 |   variant,
31 |   asChild = false,
32 |   ...props
33 | }: React.ComponentProps<'span'> &
34 |   VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
35 |   const Comp = asChild ? Slot : 'span'
36 | 
37 |   return (
38 |     <Comp
39 |       className={cn(badgeVariants({ variant }), className)}
40 |       data-slot="badge"
41 |       {...props}
42 |     />
43 |   )
44 | }
45 | 
46 | export { Badge, badgeVariants }
47 | 


--------------------------------------------------------------------------------
/src/components/room-list.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRight } from 'lucide-react'
 2 | import { Link } from 'react-router-dom'
 3 | import { useRooms } from '@/http/use-rooms'
 4 | import { dayjs } from '@/lib/dayjs'
 5 | import { Badge } from './ui/badge'
 6 | import {
 7 |   Card,
 8 |   CardContent,
 9 |   CardDescription,
10 |   CardHeader,
11 |   CardTitle,
12 | } from './ui/card'
13 | 
14 | export function RoomList() {
15 |   const { data, isLoading } = useRooms()
16 | 
17 |   return (
18 |     <Card>
19 |       <CardHeader>
20 |         <CardTitle>Salas recentes</CardTitle>
21 |         <CardDescription>
22 |           Acesso rápido para as salas criadas recentemente
23 |         </CardDescription>
24 |       </CardHeader>
25 |       <CardContent className="flex flex-col gap-3">
26 |         {isLoading && (
27 |           <p className="text-muted-foreground text-sm">Carregando salas...</p>
28 |         )}
29 | 
30 |         {data?.map((room) => {
31 |           return (
32 |             <Link
33 |               className="flex items-center justify-between rounded-lg border p-3 hover:bg-accent/50"
34 |               key={room.id}
35 |               to={`/room/${room.id}`}
36 |             >
37 |               <div className="flex flex-1 flex-col gap-1">
38 |                 <h3 className="font-medium">{room.name}</h3>
39 | 
40 |                 <div className="flex items-center gap-2">
41 |                   <Badge className="text-xs" variant="secondary">
42 |                     {dayjs(room.createdAt).toNow()}
43 |                   </Badge>
44 |                   <Badge className="text-xs" variant="secondary">
45 |                     {room.questionsCount} pergunta(s)
46 |                   </Badge>
47 |                 </div>
48 |               </div>
49 | 
50 |               <span className="flex items-center gap-1 text-sm">
51 |                 Entrar
52 |                 <ArrowRight className="size-3" />
53 |               </span>
54 |             </Link>
55 |           )
56 |         })}
57 |       </CardContent>
58 |     </Card>
59 |   )
60 | }
61 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # NLW Agents
 2 | 
 3 | Projeto desenvolvido durante um evento da Rocketseat para demonstrar o uso de agentes inteligentes na web.
 4 | 
 5 | ## 🚀 Tecnologias
 6 | 
 7 | - **React 19.1** - Biblioteca para interfaces de usuário
 8 | - **TypeScript 5.8** - Superset JavaScript com tipagem estática
 9 | - **Vite 7.0** - Build tool e servidor de desenvolvimento
10 | - **TailwindCSS 4.1** - Framework CSS utility-first
11 | - **React Router Dom 7.6** - Biblioteca de roteamento
12 | - **TanStack React Query 5.8** - Gerenciamento de estado servidor e cache
13 | - **Radix UI** - Componentes primitivos acessíveis
14 | - **Shadcn/ui** - Sistema de componentes
15 | - **Lucide React** - Biblioteca de ícones
16 | 
17 | ## 📂 Padrões de Projeto
18 | 
19 | - **Component-based Architecture** - Arquitetura baseada em componentes React
20 | - **File-based Routing** - Roteamento baseado em arquivos com React Router
21 | - **Server State Management** - Gerenciamento de estado servidor com React Query
22 | - **Variant-based Components** - Componentes com variantes usando CVA
23 | - **Composition Pattern** - Padrão de composição com Radix Slot
24 | - **Path Aliasing** - Alias de caminhos (`@/` aponta para `src/`)
25 | 
26 | ## ⚙️ Configuração do Projeto
27 | 
28 | ### Pré-requisitos
29 | 
30 | - Node.js (versão 18 ou superior)
31 | - npm ou yarn
32 | 
33 | ### Instalação
34 | 
35 | 1. Clone o repositório
36 | 2. Instale as dependências:
37 |    ```bash
38 |    npm install
39 |    ```
40 | 
41 | 3. Execute o servidor de desenvolvimento:
42 |    ```bash
43 |    npm run dev
44 |    ```
45 | 
46 | 4. Acesse a aplicação em `http://localhost:5173`
47 | 
48 | ### Scripts Disponíveis
49 | 
50 | - `npm run dev` - Inicia o servidor de desenvolvimento
51 | - `npm run build` - Gera build de produção
52 | - `npm run preview` - Preview do build de produção
53 | 
54 | ### Backend
55 | 
56 | O projeto consome uma API que deve estar rodando na porta 3333. Certifique-se de que o backend esteja configurado e executando antes de iniciar o frontend.
57 | 
58 | ## 🛠️ Estrutura do Projeto
59 | 
60 | ```
61 | src/
62 | ├── components/ui/    # Componentes de interface
63 | ├── pages/           # Páginas da aplicação
64 | ├── lib/             # Utilitários e configurações
65 | └── app.tsx          # Componente raiz
66 | ``` 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import { Slot } from '@radix-ui/react-slot'
 2 | import { cva, type VariantProps } from 'class-variance-authority'
 3 | import type * as React from 'react'
 4 | 
 5 | import { cn } from '@/lib/utils'
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
14 |         destructive:
15 |           'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
16 |         outline:
17 |           'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
18 |         secondary:
19 |           'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
20 |         ghost:
21 |           'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
22 |         link: 'text-primary underline-offset-4 hover:underline',
23 |       },
24 |       size: {
25 |         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
26 |         sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
27 |         lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
28 |         icon: 'size-9',
29 |       },
30 |     },
31 |     defaultVariants: {
32 |       variant: 'default',
33 |       size: 'default',
34 |     },
35 |   }
36 | )
37 | 
38 | function Button({
39 |   className,
40 |   variant,
41 |   size,
42 |   asChild = false,
43 |   ...props
44 | }: React.ComponentProps<'button'> &
45 |   VariantProps<typeof buttonVariants> & {
46 |     asChild?: boolean
47 |   }) {
48 |   const Comp = asChild ? Slot : 'button'
49 | 
50 |   return (
51 |     <Comp
52 |       className={cn(buttonVariants({ variant, size, className }))}
53 |       data-slot="button"
54 |       {...props}
55 |     />
56 |   )
57 | }
58 | 
59 | export { Button, buttonVariants }
60 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import type * as React from 'react'
 2 | 
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | function Card({ className, ...props }: React.ComponentProps<'div'>) {
 6 |   return (
 7 |     <div
 8 |       className={cn(
 9 |         'flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm',
10 |         className
11 |       )}
12 |       data-slot="card"
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | 
18 | function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
19 |   return (
20 |     <div
21 |       className={cn(
22 |         '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
23 |         className
24 |       )}
25 |       data-slot="card-header"
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
32 |   return (
33 |     <div
34 |       className={cn('font-semibold leading-none', className)}
35 |       data-slot="card-title"
36 |       {...props}
37 |     />
38 |   )
39 | }
40 | 
41 | function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
42 |   return (
43 |     <div
44 |       className={cn('text-muted-foreground text-sm', className)}
45 |       data-slot="card-description"
46 |       {...props}
47 |     />
48 |   )
49 | }
50 | 
51 | function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
52 |   return (
53 |     <div
54 |       className={cn(
55 |         'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
56 |         className
57 |       )}
58 |       data-slot="card-action"
59 |       {...props}
60 |     />
61 |   )
62 | }
63 | 
64 | function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
65 |   return (
66 |     <div
67 |       className={cn('px-6', className)}
68 |       data-slot="card-content"
69 |       {...props}
70 |     />
71 |   )
72 | }
73 | 
74 | function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
75 |   return (
76 |     <div
77 |       className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
78 |       data-slot="card-footer"
79 |       {...props}
80 |     />
81 |   )
82 | }
83 | 
84 | export {
85 |   Card,
86 |   CardHeader,
87 |   CardFooter,
88 |   CardTitle,
89 |   CardAction,
90 |   CardDescription,
91 |   CardContent,
92 | }
93 | 


--------------------------------------------------------------------------------
/src/components/question-item.tsx:
--------------------------------------------------------------------------------
 1 | import { Bot, Loader2, MessageSquare } from 'lucide-react'
 2 | import { Card, CardContent } from '@/components/ui/card'
 3 | import { dayjs } from '@/lib/dayjs'
 4 | 
 5 | interface Question {
 6 |   id: string
 7 |   question: string
 8 |   answer?: string | null
 9 |   createdAt: string
10 |   isGeneratingAnswer?: boolean
11 | }
12 | 
13 | interface QuestionItemProps {
14 |   question: Question
15 | }
16 | 
17 | export function QuestionItem({ question }: QuestionItemProps) {
18 |   return (
19 |     <Card>
20 |       <CardContent>
21 |         <div className="space-y-4">
22 |           {/* Question */}
23 |           <div className="flex items-start space-x-3">
24 |             <div className="flex-shrink-0">
25 |               <div className="flex size-8 items-center justify-center rounded-full bg-primary/10">
26 |                 <MessageSquare className="size-4 text-primary" />
27 |               </div>
28 |             </div>
29 |             <div className="flex-1">
30 |               <p className="mb-1 font-medium text-foreground">Pergunta</p>
31 |               <p className="whitespace-pre-line text-muted-foreground text-sm leading-relaxed">
32 |                 {question.question}
33 |               </p>
34 |             </div>
35 |           </div>
36 | 
37 |           {(!!question.answer || question.isGeneratingAnswer) && (
38 |             <div className="flex items-start space-x-3">
39 |               <div className="flex-shrink-0">
40 |                 <div className="flex size-8 items-center justify-center rounded-full bg-primary/10">
41 |                   <Bot className="size-4 text-secondary-foreground" />
42 |                 </div>
43 |               </div>
44 |               <div className="flex-1">
45 |                 <p className="mb-1 font-medium text-foreground">
46 |                   Resposta da IA
47 |                 </p>
48 |                 <div className="text-muted-foreground">
49 |                   {question.isGeneratingAnswer ? (
50 |                     <div className="flex items-center space-x-2">
51 |                       <Loader2 className="size-4 animate-spin text-primary" />
52 |                       <span className="text-primary text-sm italic">
53 |                         Gerando resposta...
54 |                       </span>
55 |                     </div>
56 |                   ) : (
57 |                     <p className="whitespace-pre-line text-sm leading-relaxed">
58 |                       {question.answer}
59 |                     </p>
60 |                   )}
61 |                 </div>
62 |               </div>
63 |             </div>
64 |           )}
65 | 
66 |           <div className="flex justify-end">
67 |             <span className="text-muted-foreground text-xs">
68 |               {dayjs(question.createdAt).toNow()}
69 |             </span>
70 |           </div>
71 |         </div>
72 |       </CardContent>
73 |     </Card>
74 |   )
75 | }
76 | 


--------------------------------------------------------------------------------
/src/http/use-create-question.ts:
--------------------------------------------------------------------------------
 1 | import { useMutation, useQueryClient } from '@tanstack/react-query'
 2 | import type { CreateQuestionRequest } from './types/create-question-request'
 3 | import type { CreateQuestionResponse } from './types/create-question-response'
 4 | import type { GetRoomQuestionsResponse } from './types/get-room-questions-response'
 5 | 
 6 | export function useCreateQuestion(roomId: string) {
 7 |   const queryClient = useQueryClient()
 8 | 
 9 |   return useMutation({
10 |     mutationFn: async (data: CreateQuestionRequest) => {
11 |       const response = await fetch(
12 |         `http://localhost:3333/rooms/${roomId}/questions`,
13 |         {
14 |           method: 'POST',
15 |           headers: {
16 |             'Content-Type': 'application/json',
17 |           },
18 |           body: JSON.stringify(data),
19 |         }
20 |       )
21 | 
22 |       const result: CreateQuestionResponse = await response.json()
23 | 
24 |       return result
25 |     },
26 | 
27 |     // Executa no momento que for feita a chamada p/ API
28 |     onMutate({ question }) {
29 |       const questions = queryClient.getQueryData<GetRoomQuestionsResponse>([
30 |         'get-questions',
31 |         roomId,
32 |       ])
33 | 
34 |       const questionsArray = questions ?? []
35 | 
36 |       const newQuestion = {
37 |         id: crypto.randomUUID(),
38 |         question,
39 |         answer: null,
40 |         createdAt: new Date().toISOString(),
41 |         isGeneratingAnswer: true,
42 |       }
43 | 
44 |       queryClient.setQueryData<GetRoomQuestionsResponse>(
45 |         ['get-questions', roomId],
46 |         [newQuestion, ...questionsArray]
47 |       )
48 | 
49 |       return { newQuestion, questions }
50 |     },
51 | 
52 |     onSuccess(data, _variables, context) {
53 |       queryClient.setQueryData<GetRoomQuestionsResponse>(
54 |         ['get-questions', roomId],
55 |         (questions) => {
56 |           if (!questions) {
57 |             return questions
58 |           }
59 | 
60 |           if (!context.newQuestion) {
61 |             return questions
62 |           }
63 | 
64 |           return questions.map((question) => {
65 |             if (question.id === context.newQuestion.id) {
66 |               return {
67 |                 ...context.newQuestion,
68 |                 id: data.questionId,
69 |                 answer: data.answer,
70 |                 isGeneratingAnswer: false,
71 |               }
72 |             }
73 | 
74 |             return question
75 |           })
76 |         }
77 |       )
78 |     },
79 | 
80 |     onError(_error, _variables, context) {
81 |       if (context?.questions) {
82 |         queryClient.setQueryData<GetRoomQuestionsResponse>(
83 |           ['get-questions', roomId],
84 |           context.questions
85 |         )
86 |       }
87 |     },
88 | 
89 |     // onSuccess: () => {
90 |     //   queryClient.invalidateQueries({ queryKey: ['get-questions', roomId] })
91 |     // },
92 |   })
93 | }
94 | 


--------------------------------------------------------------------------------
/src/components/question-form.tsx:
--------------------------------------------------------------------------------
 1 | import { zodResolver } from '@hookform/resolvers/zod'
 2 | import { useForm } from 'react-hook-form'
 3 | import { z } from 'zod'
 4 | import { Button } from '@/components/ui/button'
 5 | import {
 6 |   Card,
 7 |   CardContent,
 8 |   CardDescription,
 9 |   CardHeader,
10 |   CardTitle,
11 | } from '@/components/ui/card'
12 | import {
13 |   Form,
14 |   FormControl,
15 |   FormField,
16 |   FormItem,
17 |   FormLabel,
18 |   FormMessage,
19 | } from '@/components/ui/form'
20 | import { Textarea } from '@/components/ui/textarea'
21 | import { useCreateQuestion } from '@/http/use-create-question'
22 | 
23 | // Esquema de validação no mesmo arquivo conforme solicitado
24 | const createQuestionSchema = z.object({
25 |   question: z
26 |     .string()
27 |     .min(1, 'Pergunta é obrigatória')
28 |     .min(10, 'Pergunta deve ter pelo menos 10 caracteres')
29 |     .max(500, 'Pergunta deve ter menos de 500 caracteres'),
30 | })
31 | 
32 | type CreateQuestionFormData = z.infer<typeof createQuestionSchema>
33 | 
34 | interface QuestionFormProps {
35 |   roomId: string
36 | }
37 | 
38 | export function QuestionForm({ roomId }: QuestionFormProps) {
39 |   const { mutateAsync: createQuestion } = useCreateQuestion(roomId)
40 | 
41 |   const form = useForm<CreateQuestionFormData>({
42 |     resolver: zodResolver(createQuestionSchema),
43 |     defaultValues: {
44 |       question: '',
45 |     },
46 |   })
47 | 
48 |   async function handleCreateQuestion(data: CreateQuestionFormData) {
49 |     await createQuestion(data)
50 |   }
51 | 
52 |   const { isSubmitting } = form.formState
53 | 
54 |   return (
55 |     <Card>
56 |       <CardHeader>
57 |         <CardTitle>Fazer uma Pergunta</CardTitle>
58 |         <CardDescription>
59 |           Digite sua pergunta abaixo para receber uma resposta gerada por I.A.
60 |         </CardDescription>
61 |       </CardHeader>
62 |       <CardContent>
63 |         <Form {...form}>
64 |           <form
65 |             className="flex flex-col gap-4"
66 |             onSubmit={form.handleSubmit(handleCreateQuestion)}
67 |           >
68 |             <FormField
69 |               control={form.control}
70 |               name="question"
71 |               render={({ field }) => (
72 |                 <FormItem>
73 |                   <FormLabel>Sua Pergunta</FormLabel>
74 |                   <FormControl>
75 |                     <Textarea
76 |                       className="min-h-[100px]"
77 |                       disabled={isSubmitting}
78 |                       placeholder="O que você gostaria de saber?"
79 |                       {...field}
80 |                     />
81 |                   </FormControl>
82 |                   <FormMessage />
83 |                 </FormItem>
84 |               )}
85 |             />
86 | 
87 |             <Button disabled={isSubmitting} type="submit">
88 |               Enviar pergunta
89 |             </Button>
90 |           </form>
91 |         </Form>
92 |       </CardContent>
93 |     </Card>
94 |   )
95 | }
96 | 


--------------------------------------------------------------------------------
/src/pages/record-room-audio.tsx:
--------------------------------------------------------------------------------
  1 | /** biome-ignore-all lint/suspicious/noConsole: <explanation> */
  2 | import { useRef, useState } from 'react'
  3 | import { Navigate, useParams } from 'react-router-dom'
  4 | import { Button } from '@/components/ui/button'
  5 | 
  6 | const isRecordingSupported =
  7 |   !!navigator.mediaDevices &&
  8 |   typeof navigator.mediaDevices.getUserMedia === 'function' &&
  9 |   typeof window.MediaRecorder === 'function'
 10 | 
 11 | type RoomParams = {
 12 |   roomId: string
 13 | }
 14 | 
 15 | export function RecordRoomAudio() {
 16 |   const params = useParams<RoomParams>()
 17 |   const [isRecording, setIsRecording] = useState(false)
 18 |   const recorder = useRef<MediaRecorder | null>(null)
 19 |   const intervalRef = useRef<NodeJS.Timeout>(null)
 20 | 
 21 |   function stopRecording() {
 22 |     setIsRecording(false)
 23 | 
 24 |     if (recorder.current && recorder.current.state !== 'inactive') {
 25 |       recorder.current.stop()
 26 |     }
 27 | 
 28 |     if (intervalRef.current) {
 29 |       clearInterval(intervalRef.current)
 30 |     }
 31 |   }
 32 | 
 33 |   async function uploadAudio(audio: Blob) {
 34 |     const formData = new FormData()
 35 | 
 36 |     formData.append('file', audio, 'audio.webm')
 37 | 
 38 |     const response = await fetch(
 39 |       `http://localhost:3333/rooms/${params.roomId}/audio`,
 40 |       {
 41 |         method: 'POST',
 42 |         body: formData,
 43 |       }
 44 |     )
 45 | 
 46 |     const result = await response.json()
 47 | 
 48 |     console.log(result)
 49 |   }
 50 | 
 51 |   function createRecorder(audio: MediaStream) {
 52 |     recorder.current = new MediaRecorder(audio, {
 53 |       mimeType: 'audio/webm',
 54 |       audioBitsPerSecond: 64_000,
 55 |     })
 56 | 
 57 |     recorder.current.ondataavailable = (event) => {
 58 |       if (event.data.size > 0) {
 59 |         uploadAudio(event.data)
 60 |       }
 61 |     }
 62 | 
 63 |     recorder.current.onstart = () => {
 64 |       console.log('Gravação iniciada!')
 65 |     }
 66 | 
 67 |     recorder.current.onstop = () => {
 68 |       console.log('Gravação encerrada/pausada')
 69 |     }
 70 | 
 71 |     recorder.current.start()
 72 |   }
 73 | 
 74 |   async function startRecording() {
 75 |     if (!isRecordingSupported) {
 76 |       alert('O seu navegador não suporta gravação')
 77 |       return
 78 |     }
 79 | 
 80 |     setIsRecording(true)
 81 | 
 82 |     const audio = await navigator.mediaDevices.getUserMedia({
 83 |       audio: {
 84 |         echoCancellation: true,
 85 |         noiseSuppression: true,
 86 |         sampleRate: 44_100,
 87 |       },
 88 |     })
 89 | 
 90 |     createRecorder(audio)
 91 | 
 92 |     intervalRef.current = setInterval(() => {
 93 |       recorder.current?.stop()
 94 | 
 95 |       createRecorder(audio)
 96 |     }, 5000)
 97 |   }
 98 | 
 99 |   if (!params.roomId) {
100 |     return <Navigate replace to="/" />
101 |   }
102 | 
103 |   return (
104 |     <div className="flex h-screen flex-col items-center justify-center gap-3">
105 |       {isRecording ? (
106 |         <Button onClick={stopRecording}>Pausar gravação</Button>
107 |       ) : (
108 |         <Button onClick={startRecording}>Gravar áudio</Button>
109 |       )}
110 |       {isRecording ? <p>Gravando...</p> : <p>Pausado</p>}
111 |     </div>
112 |   )
113 | }
114 | 


--------------------------------------------------------------------------------
/src/components/create-room-form.tsx:
--------------------------------------------------------------------------------
  1 | import { zodResolver } from '@hookform/resolvers/zod'
  2 | import { useForm } from 'react-hook-form'
  3 | import { z } from 'zod/v4'
  4 | import { useCreateRoom } from '@/http/use-create-room'
  5 | import { Button } from './ui/button'
  6 | import {
  7 |   Card,
  8 |   CardContent,
  9 |   CardDescription,
 10 |   CardHeader,
 11 |   CardTitle,
 12 | } from './ui/card'
 13 | import {
 14 |   Form,
 15 |   FormControl,
 16 |   FormField,
 17 |   FormItem,
 18 |   FormLabel,
 19 |   FormMessage,
 20 | } from './ui/form'
 21 | import { Input } from './ui/input'
 22 | import { Textarea } from './ui/textarea'
 23 | 
 24 | const createRoomSchema = z.object({
 25 |   name: z.string().min(3, { message: 'Inclua no mínimo 3 caracteres' }),
 26 |   description: z.string(),
 27 | })
 28 | 
 29 | type CreateRoomFormData = z.infer<typeof createRoomSchema>
 30 | 
 31 | export function CreateRoomForm() {
 32 |   const { mutateAsync: createRoom } = useCreateRoom()
 33 | 
 34 |   const createRoomForm = useForm<CreateRoomFormData>({
 35 |     resolver: zodResolver(createRoomSchema),
 36 |     defaultValues: {
 37 |       name: '',
 38 |       description: '',
 39 |     },
 40 |   })
 41 | 
 42 |   async function handleCreateRoom({ name, description }: CreateRoomFormData) {
 43 |     await createRoom({ name, description })
 44 | 
 45 |     createRoomForm.reset()
 46 |   }
 47 | 
 48 |   return (
 49 |     <Card>
 50 |       <CardHeader>
 51 |         <CardTitle>Criar sala</CardTitle>
 52 |         <CardDescription>
 53 |           Crie uam nova sala para começar a fazer perguntas e receber respostas
 54 |           da I.A.
 55 |         </CardDescription>
 56 |       </CardHeader>
 57 |       <CardContent>
 58 |         <Form {...createRoomForm}>
 59 |           <form
 60 |             className="flex flex-col gap-4"
 61 |             onSubmit={createRoomForm.handleSubmit(handleCreateRoom)}
 62 |           >
 63 |             <FormField
 64 |               control={createRoomForm.control}
 65 |               name="name"
 66 |               render={({ field }) => {
 67 |                 return (
 68 |                   <FormItem>
 69 |                     <FormLabel>Nome da sala</FormLabel>
 70 |                     <FormControl>
 71 |                       <Input
 72 |                         {...field}
 73 |                         placeholder="Digite o nome da sala..."
 74 |                       />
 75 |                     </FormControl>
 76 |                     <FormMessage />
 77 |                   </FormItem>
 78 |                 )
 79 |               }}
 80 |             />
 81 | 
 82 |             <FormField
 83 |               control={createRoomForm.control}
 84 |               name="description"
 85 |               render={({ field }) => {
 86 |                 return (
 87 |                   <FormItem>
 88 |                     <FormLabel>Descrição</FormLabel>
 89 |                     <FormControl>
 90 |                       <Textarea {...field} />
 91 |                     </FormControl>
 92 |                     <FormMessage />
 93 |                   </FormItem>
 94 |                 )
 95 |               }}
 96 |             />
 97 | 
 98 |             <Button className="w-full" type="submit">
 99 |               Criar sala
100 |             </Button>
101 |           </form>
102 |         </Form>
103 |       </CardContent>
104 |     </Card>
105 |   )
106 | }
107 | 


--------------------------------------------------------------------------------
/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | import type * as LabelPrimitive from '@radix-ui/react-label'
  2 | import { Slot } from '@radix-ui/react-slot'
  3 | import { createContext, useContext, useId } from 'react'
  4 | import {
  5 |   Controller,
  6 |   type ControllerProps,
  7 |   type FieldPath,
  8 |   type FieldValues,
  9 |   FormProvider,
 10 |   useFormContext,
 11 |   useFormState,
 12 | } from 'react-hook-form'
 13 | import { Label } from '@/components/ui/label'
 14 | import { cn } from '@/lib/utils'
 15 | 
 16 | const Form = FormProvider
 17 | 
 18 | type FormFieldContextValue<
 19 |   TFieldValues extends FieldValues = FieldValues,
 20 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 21 | > = {
 22 |   name: TName
 23 | }
 24 | 
 25 | const FormFieldContext = createContext<FormFieldContextValue>(
 26 |   {} as FormFieldContextValue
 27 | )
 28 | 
 29 | const FormField = <
 30 |   TFieldValues extends FieldValues = FieldValues,
 31 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 32 | >({
 33 |   ...props
 34 | }: ControllerProps<TFieldValues, TName>) => {
 35 |   return (
 36 |     <FormFieldContext.Provider value={{ name: props.name }}>
 37 |       <Controller {...props} />
 38 |     </FormFieldContext.Provider>
 39 |   )
 40 | }
 41 | 
 42 | const useFormField = () => {
 43 |   const fieldContext = useContext(FormFieldContext)
 44 |   const itemContext = useContext(FormItemContext)
 45 |   const { getFieldState } = useFormContext()
 46 |   const formState = useFormState({ name: fieldContext.name })
 47 |   const fieldState = getFieldState(fieldContext.name, formState)
 48 | 
 49 |   if (!fieldContext) {
 50 |     throw new Error('useFormField should be used within <FormField>')
 51 |   }
 52 | 
 53 |   const { id } = itemContext
 54 | 
 55 |   return {
 56 |     id,
 57 |     name: fieldContext.name,
 58 |     formItemId: `${id}-form-item`,
 59 |     formDescriptionId: `${id}-form-item-description`,
 60 |     formMessageId: `${id}-form-item-message`,
 61 |     ...fieldState,
 62 |   }
 63 | }
 64 | 
 65 | type FormItemContextValue = {
 66 |   id: string
 67 | }
 68 | 
 69 | const FormItemContext = createContext<FormItemContextValue>(
 70 |   {} as FormItemContextValue
 71 | )
 72 | 
 73 | function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
 74 |   const id = useId()
 75 | 
 76 |   return (
 77 |     <FormItemContext.Provider value={{ id }}>
 78 |       <div
 79 |         className={cn('grid gap-2', className)}
 80 |         data-slot="form-item"
 81 |         {...props}
 82 |       />
 83 |     </FormItemContext.Provider>
 84 |   )
 85 | }
 86 | 
 87 | function FormLabel({
 88 |   className,
 89 |   ...props
 90 | }: React.ComponentProps<typeof LabelPrimitive.Root>) {
 91 |   const { error, formItemId } = useFormField()
 92 | 
 93 |   return (
 94 |     <Label
 95 |       className={cn('data-[error=true]:text-destructive', className)}
 96 |       data-error={!!error}
 97 |       data-slot="form-label"
 98 |       htmlFor={formItemId}
 99 |       {...props}
100 |     />
101 |   )
102 | }
103 | 
104 | function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
105 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
106 | 
107 |   return (
108 |     <Slot
109 |       aria-describedby={
110 |         error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
111 |       }
112 |       aria-invalid={!!error}
113 |       data-slot="form-control"
114 |       id={formItemId}
115 |       {...props}
116 |     />
117 |   )
118 | }
119 | 
120 | function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
121 |   const { formDescriptionId } = useFormField()
122 | 
123 |   return (
124 |     <p
125 |       className={cn('text-muted-foreground text-sm', className)}
126 |       data-slot="form-description"
127 |       id={formDescriptionId}
128 |       {...props}
129 |     />
130 |   )
131 | }
132 | 
133 | function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
134 |   const { error, formMessageId } = useFormField()
135 |   const body = error ? String(error?.message ?? '') : props.children
136 | 
137 |   if (!body) {
138 |     return null
139 |   }
140 | 
141 |   return (
142 |     <p
143 |       className={cn('text-destructive text-sm', className)}
144 |       data-slot="form-message"
145 |       id={formMessageId}
146 |       {...props}
147 |     >
148 |       {body}
149 |     </p>
150 |   )
151 | }
152 | 
153 | export {
154 |   useFormField,
155 |   Form,
156 |   FormItem,
157 |   FormLabel,
158 |   FormControl,
159 |   FormDescription,
160 |   FormMessage,
161 |   FormField,
162 | }
163 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | @import "tw-animate-css";
  3 | 
  4 | @custom-variant dark (&:is(.dark *));
  5 | 
  6 | @theme inline {
  7 |   --radius-sm: calc(var(--radius) - 4px);
  8 |   --radius-md: calc(var(--radius) - 2px);
  9 |   --radius-lg: var(--radius);
 10 |   --radius-xl: calc(var(--radius) + 4px);
 11 |   --color-background: var(--background);
 12 |   --color-foreground: var(--foreground);
 13 |   --color-card: var(--card);
 14 |   --color-card-foreground: var(--card-foreground);
 15 |   --color-popover: var(--popover);
 16 |   --color-popover-foreground: var(--popover-foreground);
 17 |   --color-primary: var(--primary);
 18 |   --color-primary-foreground: var(--primary-foreground);
 19 |   --color-secondary: var(--secondary);
 20 |   --color-secondary-foreground: var(--secondary-foreground);
 21 |   --color-muted: var(--muted);
 22 |   --color-muted-foreground: var(--muted-foreground);
 23 |   --color-accent: var(--accent);
 24 |   --color-accent-foreground: var(--accent-foreground);
 25 |   --color-destructive: var(--destructive);
 26 |   --color-border: var(--border);
 27 |   --color-input: var(--input);
 28 |   --color-ring: var(--ring);
 29 |   --color-chart-1: var(--chart-1);
 30 |   --color-chart-2: var(--chart-2);
 31 |   --color-chart-3: var(--chart-3);
 32 |   --color-chart-4: var(--chart-4);
 33 |   --color-chart-5: var(--chart-5);
 34 |   --color-sidebar: var(--sidebar);
 35 |   --color-sidebar-foreground: var(--sidebar-foreground);
 36 |   --color-sidebar-primary: var(--sidebar-primary);
 37 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 38 |   --color-sidebar-accent: var(--sidebar-accent);
 39 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 40 |   --color-sidebar-border: var(--sidebar-border);
 41 |   --color-sidebar-ring: var(--sidebar-ring);
 42 | }
 43 | 
 44 | :root {
 45 |   --radius: 0.625rem;
 46 |   --background: oklch(1 0 0);
 47 |   --foreground: oklch(0.141 0.005 285.823);
 48 |   --card: oklch(1 0 0);
 49 |   --card-foreground: oklch(0.141 0.005 285.823);
 50 |   --popover: oklch(1 0 0);
 51 |   --popover-foreground: oklch(0.141 0.005 285.823);
 52 |   --primary: oklch(0.21 0.006 285.885);
 53 |   --primary-foreground: oklch(0.985 0 0);
 54 |   --secondary: oklch(0.967 0.001 286.375);
 55 |   --secondary-foreground: oklch(0.21 0.006 285.885);
 56 |   --muted: oklch(0.967 0.001 286.375);
 57 |   --muted-foreground: oklch(0.552 0.016 285.938);
 58 |   --accent: oklch(0.967 0.001 286.375);
 59 |   --accent-foreground: oklch(0.21 0.006 285.885);
 60 |   --destructive: oklch(0.577 0.245 27.325);
 61 |   --border: oklch(0.92 0.004 286.32);
 62 |   --input: oklch(0.92 0.004 286.32);
 63 |   --ring: oklch(0.705 0.015 286.067);
 64 |   --chart-1: oklch(0.646 0.222 41.116);
 65 |   --chart-2: oklch(0.6 0.118 184.704);
 66 |   --chart-3: oklch(0.398 0.07 227.392);
 67 |   --chart-4: oklch(0.828 0.189 84.429);
 68 |   --chart-5: oklch(0.769 0.188 70.08);
 69 |   --sidebar: oklch(0.985 0 0);
 70 |   --sidebar-foreground: oklch(0.141 0.005 285.823);
 71 |   --sidebar-primary: oklch(0.21 0.006 285.885);
 72 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 73 |   --sidebar-accent: oklch(0.967 0.001 286.375);
 74 |   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
 75 |   --sidebar-border: oklch(0.92 0.004 286.32);
 76 |   --sidebar-ring: oklch(0.705 0.015 286.067);
 77 | }
 78 | 
 79 | .dark {
 80 |   --background: oklch(0.141 0.005 285.823);
 81 |   --foreground: oklch(0.985 0 0);
 82 |   --card: oklch(0.21 0.006 285.885);
 83 |   --card-foreground: oklch(0.985 0 0);
 84 |   --popover: oklch(0.21 0.006 285.885);
 85 |   --popover-foreground: oklch(0.985 0 0);
 86 |   --primary: oklch(0.92 0.004 286.32);
 87 |   --primary-foreground: oklch(0.21 0.006 285.885);
 88 |   --secondary: oklch(0.274 0.006 286.033);
 89 |   --secondary-foreground: oklch(0.985 0 0);
 90 |   --muted: oklch(0.274 0.006 286.033);
 91 |   --muted-foreground: oklch(0.705 0.015 286.067);
 92 |   --accent: oklch(0.274 0.006 286.033);
 93 |   --accent-foreground: oklch(0.985 0 0);
 94 |   --destructive: oklch(0.704 0.191 22.216);
 95 |   --border: oklch(1 0 0 / 10%);
 96 |   --input: oklch(1 0 0 / 15%);
 97 |   --ring: oklch(0.552 0.016 285.938);
 98 |   --chart-1: oklch(0.488 0.243 264.376);
 99 |   --chart-2: oklch(0.696 0.17 162.48);
100 |   --chart-3: oklch(0.769 0.188 70.08);
101 |   --chart-4: oklch(0.627 0.265 303.9);
102 |   --chart-5: oklch(0.645 0.246 16.439);
103 |   --sidebar: oklch(0.21 0.006 285.885);
104 |   --sidebar-foreground: oklch(0.985 0 0);
105 |   --sidebar-primary: oklch(0.488 0.243 264.376);
106 |   --sidebar-primary-foreground: oklch(0.985 0 0);
107 |   --sidebar-accent: oklch(0.274 0.006 286.033);
108 |   --sidebar-accent-foreground: oklch(0.985 0 0);
109 |   --sidebar-border: oklch(1 0 0 / 10%);
110 |   --sidebar-ring: oklch(0.552 0.016 285.938);
111 | }
112 | 
113 | @layer base {
114 |   * {
115 |     @apply border-border outline-ring/50;
116 |   }
117 |   body {
118 |     @apply bg-background text-foreground;
119 |   }
120 | }


--------------------------------------------------------------------------------