[V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: ui-sans-serif, system-ui, sans-serif; /* Color Palette - Soft, calming, accessible */ --color-sky-50: #f0f9ff; --color-sky-100: #e0f2fe; --color-sky-200: #bae6fd; --color-sky-300: #7dd3fc; --color-sky-400: #38bdf8; --color-sky-500: #0ea5e9; --color-teal-50: #f0fdfa; --color-teal-100: #ccfbf1; --color-teal-200: #99f6e4; --color-teal-300: #5eead4; --color-teal-400: #2dd4bf; --color-teal-500: #14b8a6; --color-slate-50: #f8fafc; --color-slate-100: #f1f5f9; --color-slate-200: #e2e8f0; --color-slate-300: #cbd5e1; --color-slate-600: #475569; --color-slate-700: #334155; --color-slate-800: #1e293b; --color-slate-900: #0f172a; /* Semantic Design Tokens */ --color-background: var(--color-sky-50); --color-foreground: var(--color-slate-900); --color-card: #ffffff; --color-card-foreground: var(--color-slate-900); --color-primary: var(--color-teal-400); --color-primary-foreground: #ffffff; --color-secondary: var(--color-sky-200); --color-secondary-foreground: var(--color-slate-800); --color-muted: var(--color-slate-100); --color-muted-foreground: var(--color-slate-600); --color-accent: var(--color-teal-300); --color-accent-foreground: var(--color-slate-900); --color-border: var(--color-slate-200); --color-input: var(--color-slate-200); --color-ring: var(--color-teal-400); --radius: 1rem; /* shadcn variables */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { LibrasAvatar } from "@/components/libras-avatar" import { useRouter } from "next/navigation" export default function WelcomePage() { const router = useRouter() const [showAvatar, setShowAvatar] = useState(false) const [isRegistered, setIsRegistered] = useState(false) useEffect(() => { // Check if user is already registered const userData = localStorage.getItem("psicodigital_user") if (userData) { setIsRegistered(true) } // Show avatar after a brief delay for animation setTimeout(() => setShowAvatar(true), 300) }, []) const handleEnter = () => { if (isRegistered) { router.push("/chat") } else { router.push("/register") } } return (

{/* Decorative background elements */}

{/* Main content */}

{/* Logo/Title */}

PsicoDigital Inclusivo

Seu espaço seguro de apoio emocional

{/* Avatar with welcome message */} {showAvatar && (

)} {/* Welcome message */}

Bem-vindo(a) ao PsicoDigital Inclusivo. Um espaço acolhedor onde você pode conversar livremente sobre seus sentimentos.

{/* Enter button */} {/* Accessibility note */}

Este aplicativo oferece suporte completo em Libras (Língua Brasileira de Sinais)

) } [V0_FILE]typescriptreact:file="app/register/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { LibrasAvatar } from "@/components/libras-avatar" import { useRouter } from "next/navigation" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" export default function RegisterPage() { const router = useRouter() const [formData, setFormData] = useState({ name: "", age: "", preferredLanguage: "libras", needsAccessibility: true, }) const [errors, setErrors] = useState>({}) const [isSubmitting, setIsSubmitting] = useState(false) const validateForm = () => { const newErrors: Record = {} if (!formData.name.trim()) { newErrors.name = "Por favor, insira seu nome" } if (!formData.age) { newErrors.age = "Por favor, insira sua idade" } else if (Number.parseInt(formData.age) < 13 || Number.parseInt(formData.age) > 120) { newErrors.age = "Por favor, insira uma idade válida" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) { return } setIsSubmitting(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) // Save user data to localStorage localStorage.setItem( "psicodigital_user", JSON.stringify({ ...formData, registeredAt: new Date().toISOString(), }), ) setIsSubmitting(false) router.push("/chat") } return (

{/* Decorative background elements */}

{/* Main content */}

{/* Header with avatar */}

Cadastro

Precisamos de algumas informações para personalizar sua experiência

{/* Registration form */} Informações Pessoais Seus dados são privados e seguros

{/* Name field */}

Nome * setFormData({ ...formData, name: e.target.value })} className={errors.name ? "border-red-500" : ""} aria-invalid={!!errors.name} aria-describedby={errors.name ? "name-error" : undefined} /> {errors.name && (

{errors.name}

)}

{/* Age field */}

Idade * setFormData({ ...formData, age: e.target.value })} className={errors.age ? "border-red-500" : ""} aria-invalid={!!errors.age} aria-describedby={errors.age ? "age-error" : undefined} min="13" max="120" /> {errors.age && (

{errors.age}

)}

{/* Language preference */}

Preferência de Comunicação * setFormData({ ...formData, preferredLanguage: value })} >

Libras (Língua Brasileira de Sinais)

Texto escrito

Ambos (Libras e texto)

{/* Submit button */}

{/* Back button */}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/chat/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { LibrasAvatar } from "@/components/libras-avatar" import { Send, Menu, Settings, Plus, MessageSquare, Trash2 } from "lucide-react" import { useRouter } from "next/navigation" import { ScrollArea } from "@/components/ui/scroll-area" import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet" import { Avatar, AvatarFallback } from "@/components/ui/avatar" interface Message { id: string content: string sender: "user" | "assistant" timestamp: Date } interface Conversation { id: string title: string messages: Message[] createdAt: Date updatedAt: Date } export default function ChatPage() { const router = useRouter() const [conversations, setConversations] = useState([]) const [currentConversationId, setCurrentConversationId] = useState(null) const [messages, setMessages] = useState([]) const [inputValue, setInputValue] = useState("") const [isTyping, setIsTyping] = useState(false) const [userName, setUserName] = useState("Usuário") const [showSidebar, setShowSidebar] = useState(false) const scrollRef = useRef(null) useEffect(() => { // Check if user is registered const userData = localStorage.getItem("psicodigital_user") if (!userData) { router.push("/register") return } const user = JSON.parse(userData) setUserName(user.name) // Load conversations const savedConversations = localStorage.getItem("psicodigital_conversations") if (savedConversations) { const parsed = JSON.parse(savedConversations) const conversationsWithDates = parsed.map((conv: any) => ({ ...conv, createdAt: new Date(conv.createdAt), updatedAt: new Date(conv.updatedAt), messages: conv.messages.map((msg: any) => ({ ...msg, timestamp: new Date(msg.timestamp), })), })) setConversations(conversationsWithDates) // Load the most recent conversation if (conversationsWithDates.length > 0) { const mostRecent = conversationsWithDates[0] setCurrentConversationId(mostRecent.id) setMessages(mostRecent.messages) } else { // Create initial conversation createNewConversation(user.name) } } else { // Create initial conversation createNewConversation(user.name) } }, [router]) useEffect(() => { // Save conversations to localStorage if (conversations.length > 0) { localStorage.setItem("psicodigital_conversations", JSON.stringify(conversations)) } }, [conversations]) useEffect(() => { // Auto-scroll to bottom if (scrollRef.current) { scrollRef.current.scrollTop = scrollRef.current.scrollHeight } }, [messages]) const createNewConversation = (name: string) => { const greeting: Message = { id: Date.now().toString(), content: `Olá ${name}! Sou seu assistente de apoio emocional. Como você está se sentindo hoje?`, sender: "assistant", timestamp: new Date(), } const newConversation: Conversation = { id: Date.now().toString(), title: "Nova Conversa", messages: [greeting], createdAt: new Date(), updatedAt: new Date(), } setConversations((prev) => [newConversation, ...prev]) setCurrentConversationId(newConversation.id) setMessages([greeting]) } const switchConversation = (conversationId: string) => { const conversation = conversations.find((c) => c.id === conversationId) if (conversation) { setCurrentConversationId(conversationId) setMessages(conversation.messages) setShowSidebar(false) } } const deleteConversation = (conversationId: string) => { const updatedConversations = conversations.filter((c) => c.id !== conversationId) setConversations(updatedConversations) if (conversationId === currentConversationId) { if (updatedConversations.length > 0) { switchConversation(updatedConversations[0].id) } else { createNewConversation(userName) } } } const updateCurrentConversation = (newMessages: Message[]) => { setMessages(newMessages) if (currentConversationId) { setConversations((prev) => prev.map((conv) => { if (conv.id === currentConversationId) { // Update title based on first user message const firstUserMessage = newMessages.find((m) => m.sender === "user") const title = firstUserMessage ? firstUserMessage.content.slice(0, 30) + (firstUserMessage.content.length > 30 ? "..." : "") : "Nova Conversa" return { ...conv, messages: newMessages, title, updatedAt: new Date(), } } return conv }), ) } } const handleSendMessage = async () => { if (!inputValue.trim()) return const userMessage: Message = { id: Date.now().toString(), content: inputValue, sender: "user", timestamp: new Date(), } const newMessages = [...messages, userMessage] updateCurrentConversation(newMessages) setInputValue("") setIsTyping(true) // Simulate AI response setTimeout(() => { const responses = [ "Entendo como você está se sentindo. Gostaria de falar mais sobre isso?", "Obrigado por compartilhar isso comigo. Como posso ajudá-lo(a) melhor?", "Seus sentimentos são válidos. Vamos explorar isso juntos?", "Estou aqui para ouvir. Continue, por favor.", "Isso parece importante para você. Pode me contar mais detalhes?", ] const assistantMessage: Message = { id: (Date.now() + 1).toString(), content: responses[Math.floor(Math.random() * responses.length)], sender: "assistant", timestamp: new Date(), } updateCurrentConversation([...newMessages, assistantMessage]) setIsTyping(false) }, 1500) } const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSendMessage() } } return (

Conversas {/* User profile */}

{userName.charAt(0).toUpperCase()}

{userName}

Online

{/* New conversation button */}

{/* Conversation history */}

{conversations.map((conversation) => (

switchConversation(conversation.id)} >

{conversation.title}

{conversation.updatedAt.toLocaleDateString("pt-BR")}

))}

{/* Main chat area */}

{/* Header */}

PsicoDigital Inclusivo

Seu espaço seguro

{/* Messages area */}

{messages.map((message) => (

{/* Avatar */} {message.sender === "assistant" && (

)} {/* Message bubble */}

{message.content}

{message.timestamp.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit", })}

))} {/* Typing indicator */} {isTyping && (

)}

{/* Input area */}

setInputValue(e.target.value)} onKeyPress={handleKeyPress} placeholder="Digite sua mensagem..." className="flex-1 rounded-full px-4 h-12" disabled={isTyping} />

) } [V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isMerged="true" "use client" import * as React from "react" import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" import { cn } from "@/lib/utils" const ScrollArea = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName const ScrollBar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "vertical", ...props }, ref) => ( )) ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName export { ScrollArea, ScrollBar } [V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true" "use client" import * as React from "react" import * as SheetPrimitive from "@radix-ui/react-dialog" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Sheet = SheetPrimitive.Root const SheetTrigger = SheetPrimitive.Trigger const SheetClose = SheetPrimitive.Close const SheetPortal = SheetPrimitive.Portal const SheetOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetOverlay.displayName = SheetPrimitive.Overlay.displayName const sheetVariants = cva( "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out", { variants: { side: { top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", }, }, defaultVariants: { side: "right", }, }, ) interface SheetContentProps extends React.ComponentPropsWithoutRef, VariantProps {} const SheetContent = React.forwardRef, SheetContentProps>( ({ side = "right", className, children, ...props }, ref) => ( {children} Close ), ) SheetContent.displayName = SheetPrimitive.Content.displayName const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (

) SheetHeader.displayName = "SheetHeader" const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (

) SheetFooter.displayName = "SheetFooter" const SheetTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetTitle.displayName = SheetPrimitive.Title.displayName const SheetDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetDescription.displayName = SheetPrimitive.Description.displayName export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } [V0_FILE]typescriptreact:file="app/settings/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Slider } from "@/components/ui/slider" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ArrowLeft, User, Accessibility, Volume2, Palette } from "lucide-react" import { useRouter } from "next/navigation" import { LibrasAvatar } from "@/components/libras-avatar" interface Settings { // Avatar settings avatarEnabled: boolean avatarSize: "small" | "medium" | "large" avatarSpeed: number autoPlayAvatar: boolean // Accessibility settings highContrast: boolean fontSize: "small" | "medium" | "large" reducedMotion: boolean screenReaderOptimized: boolean // Communication preferences preferredLanguage: "libras" | "text" | "both" textToSpeech: boolean voiceVolume: number // Visual preferences theme: "light" | "dark" | "auto" colorScheme: "default" | "warm" | "cool" } const defaultSettings: Settings = { avatarEnabled: true, avatarSize: "medium", avatarSpeed: 1, autoPlayAvatar: true, highContrast: false, fontSize: "medium", reducedMotion: false, screenReaderOptimized: false, preferredLanguage: "libras", textToSpeech: false, voiceVolume: 70, theme: "light", colorScheme: "default", } export default function SettingsPage() { const router = useRouter() const [settings, setSettings] = useState(defaultSettings) const [userName, setUserName] = useState("Usuário") useEffect(() => { // Load user data const userData = localStorage.getItem("psicodigital_user") if (userData) { const user = JSON.parse(userData) setUserName(user.name) } // Load settings const savedSettings = localStorage.getItem("psicodigital_settings") if (savedSettings) { setSettings({ ...defaultSettings, ...JSON.parse(savedSettings) }) } }, []) const updateSetting = (key: K, value: Settings[K]) => { const newSettings = { ...settings, [key]: value } setSettings(newSettings) localStorage.setItem("psicodigital_settings", JSON.stringify(newSettings)) } return (

{/* Header */}

Configurações

Personalize sua experiência

{/* Content */}

{/* Avatar Preview */} Prévia do Avatar Veja como o avatar aparecerá com suas configurações {/* Avatar Settings */} Configurações do Avatar Personalize a aparência e comportamento do avatar em Libras {/* Avatar enabled */}

Exibir Avatar

Mostrar o avatar de Libras nas mensagens

updateSetting("avatarEnabled", checked)} />

{/* Avatar size */}

Tamanho do Avatar updateSetting("avatarSize", value)} >

Pequeno

Médio

Grande

{/* Avatar speed */}

Velocidade da Animação {settings.avatarSpeed}x

updateSetting("avatarSpeed", value)} min={0.5} max={2} step={0.25} />

{/* Auto-play */}

Reprodução Automática

Iniciar animação automaticamente ao receber mensagens

updateSetting("autoPlayAvatar", checked)} />

{/* Accessibility Settings */} Acessibilidade Ajustes para melhorar a experiência de uso {/* High contrast */}

Alto Contraste

Aumentar o contraste das cores para melhor visibilidade

updateSetting("highContrast", checked)} />

{/* Font size */}

Tamanho da Fonte

{/* Reduced motion */}

Reduzir Movimento

Minimizar animações e transições

updateSetting("reducedMotion", checked)} />

{/* Screen reader optimized */}

Otimizado para Leitores de Tela

Melhorar compatibilidade com tecnologias assistivas

updateSetting("screenReaderOptimized", checked)} />

{/* Communication Preferences */} Preferências de Comunicação Como você prefere se comunicar com o assistente {/* Preferred language */}

Modo de Comunicação updateSetting("preferredLanguage", value)} >

Libras (Língua Brasileira de Sinais)

Texto escrito

Ambos (Libras e texto)

{/* Text to speech */}

Texto para Fala

Ler mensagens em voz alta

updateSetting("textToSpeech", checked)} />

{/* Voice volume */} {settings.textToSpeech && (

Volume da Voz {settings.voiceVolume}%

updateSetting("voiceVolume", value)} min={0} max={100} step={5} />

)} {/* Visual Preferences */} Preferências Visuais Personalize a aparência do aplicativo {/* Theme */}

Tema

{/* Color scheme */}

Esquema de Cores

{/* Reset button */}

) } [V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true" "use client" import * as React from "react" import * as SwitchPrimitives from "@radix-ui/react-switch" import { cn } from "@/lib/utils" const Switch = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Switch.displayName = SwitchPrimitives.Root.displayName export { Switch } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="components/libras-avatar.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Play, Pause, RotateCcw, Settings, Heart, Volume2, VolumeX } from "lucide-react" import { Button } from "@/components/ui/button" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" interface LibrasAvatarProps { message?: string isPlaying?: boolean size?: "small" | "medium" | "large" showControls?: boolean className?: string onFavorite?: () => void } export function LibrasAvatar({ message = "", isPlaying: externalIsPlaying, size = "medium", showControls = true, className = "", onFavorite, }: LibrasAvatarProps) { const [isPlaying, setIsPlaying] = useState(externalIsPlaying ?? false) const [speed, setSpeed] = useState([1]) const [isFavorite, setIsFavorite] = useState(false) const [isMuted, setIsMuted] = useState(false) const [showSubtitles, setShowSubtitles] = useState(true) const [avatarStyle, setAvatarStyle] = useState("default") useEffect(() => { const settings = localStorage.getItem("libras_settings") if (settings) { const parsed = JSON.parse(settings) setSpeed([parsed.speed || 1]) setShowSubtitles(parsed.showSubtitles ?? true) setAvatarStyle(parsed.avatarStyle || "default") } }, []) useEffect(() => { if (externalIsPlaying !== undefined) { setIsPlaying(externalIsPlaying) } }, [externalIsPlaying]) const sizeClasses = { small: "w-24 h-24", medium: "w-40 h-40", large: "w-56 h-56", } const handlePlayPause = () => { setIsPlaying(!isPlaying) } const handleReplay = () => { setIsPlaying(true) } const handleFavorite = () => { setIsFavorite(!isFavorite) if (onFavorite) { onFavorite() } } const handleSpeedChange = (value: number[]) => { setSpeed(value) const settings = JSON.parse(localStorage.getItem("libras_settings") || "{}") localStorage.setItem("libras_settings", JSON.stringify({ ...settings, speed: value[0] })) } const avatarStyles = { default: "from-teal-400 to-sky-400", blue: "from-blue-400 to-indigo-400", purple: "from-purple-400 to-pink-400", green: "from-emerald-400 to-teal-400", } return (

{/* Avatar character - simplified representation of Hugo */}

{/* Background pattern */}

{/* Avatar body */}

{/* Head */}

{/* Face features */}

{/* Body */}

{/* Arms - emphasized for sign language */}

{/* Hands - large and prominent like Hugo */}

{isPlaying ? "👋" : "✋"}

{/* Playing indicator */} {isPlaying && (

Sinalizando

)}

{showControls && ( )}

{showSubtitles && message && (

{message}

)} {showControls && (

Velocidade: {speed[0]}x

Ajuste a velocidade da sinalização

Legendas { setShowSubtitles(checked) const settings = JSON.parse(localStorage.getItem("libras_settings") || "{}") localStorage.setItem("libras_settings", JSON.stringify({ ...settings, showSubtitles: checked })) }} />

Estilo do Avatar

{Object.keys(avatarStyles).map((style) => (

)}

) } [V0_FILE]typescriptreact:file="components/ui/label.tsx" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label }