[V0_FILE]typescriptreact:file="components/chat-widget.tsx" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { MessageCircle, X, Send, Paperclip, Download, ImageIcon, FileText, File } from "lucide-react" interface Message { id: string text: string sender: "user" | "bot" timestamp: Date file?: { name: string size: number type: string url: string } } const ChatWidget: React.FC = () => { // Estados principais const [isOpen, setIsOpen] = useState(false) const [messages, setMessages] = useState([ { id: "1", text: "Olá! 👋 Sou seu assistente virtual. Como posso ajudá-lo hoje?", sender: "bot", timestamp: new Date(), }, ]) const [inputMessage, setInputMessage] = useState("") const [isTyping, setIsTyping] = useState(false) const [dragOver, setDragOver] = useState(false) // Refs const messagesEndRef = useRef(null) const fileInputRef = useRef(null) const textareaRef = useRef(null) // Respostas do bot em português brasileiro const botResponses = [ "Entendi! Deixe-me ajudá-lo com isso. 🤔", "Ótima pergunta! Vou verificar as informações para você.", "Claro! Posso te auxiliar com essa questão. 💡", "Interessante! Vou processar sua solicitação.", "Perfeito! Estou aqui para ajudar no que precisar.", "Compreendo sua necessidade. Vamos resolver isso juntos! 🚀", "Excelente! Vou buscar a melhor solução para você.", "Entendido! Deixe-me analisar e te dar uma resposta completa.", ] // Scroll automático para o final das mensagens const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(() => { scrollToBottom() }, [messages]) // Ajustar altura do textarea automaticamente const adjustTextareaHeight = () => { if (textareaRef.current) { textareaRef.current.style.height = "auto" const scrollHeight = textareaRef.current.scrollHeight const maxHeight = 96 // 4 linhas aproximadamente textareaRef.current.style.height = `${Math.min(scrollHeight, maxHeight)}px` } } useEffect(() => { adjustTextareaHeight() }, [inputMessage]) // Alternar abertura/fechamento do chat const toggleChat = () => { setIsOpen(!isOpen) } // Formatar timestamp const formatTime = (date: Date): string => { return date.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit", }) } // Simular resposta do bot const simulateBotResponse = () => { setIsTyping(true) const delay = Math.random() * 2000 + 1000 // 1-3 segundos setTimeout(() => { const randomResponse = botResponses[Math.floor(Math.random() * botResponses.length)] const botMessage: Message = { id: Date.now().toString(), text: randomResponse, sender: "bot", timestamp: new Date(), } setMessages((prev) => [...prev, botMessage]) setIsTyping(false) }, delay) } // Enviar mensagem const sendMessage = () => { if (inputMessage.trim() === "") return const userMessage: Message = { id: Date.now().toString(), text: inputMessage, sender: "user", timestamp: new Date(), } setMessages((prev) => [...prev, userMessage]) setInputMessage("") // Simular resposta do bot simulateBotResponse() } // Lidar com teclas pressionadas const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() sendMessage() } } // Obter ícone do arquivo baseado no tipo const getFileIcon = (type: string) => { if (type.startsWith("image/")) return if (type.includes("pdf")) return if (type.includes("doc")) return return } // Formatar tamanho do arquivo const formatFileSize = (bytes: number): string => { if (bytes === 0) return "0 Bytes" const k = 1024 const sizes = ["Bytes", "KB", "MB", "GB"] const i = Math.floor(Math.log(bytes) / Math.log(k)) return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i] } // Lidar com upload de arquivos const handleFileUpload = (files: FileList) => { Array.from(files).forEach((file) => { // Verificar tipos aceitos const acceptedTypes = [ "image/jpeg", "image/png", "image/gif", "image/webp", "application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "text/plain", ] if (!acceptedTypes.includes(file.type)) { alert("Tipo de arquivo não suportado. Aceitos: imagens, PDF, DOC, TXT") return } const fileUrl = URL.createObjectURL(file) const fileMessage: Message = { id: Date.now().toString() + Math.random(), text: `Arquivo enviado: ${file.name}`, sender: "user", timestamp: new Date(), file: { name: file.name, size: file.size, type: file.type, url: fileUrl, }, } setMessages((prev) => [...prev, fileMessage]) simulateBotResponse() }) } // Eventos de drag and drop const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setDragOver(true) } const handleDragLeave = (e: React.DragEvent) => { e.preventDefault() setDragOver(false) } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setDragOver(false) const files = e.dataTransfer.files if (files.length > 0) { handleFileUpload(files) } } // Componente de indicador de digitação const TypingIndicator = () => (

Digitando...

) return (

{/* Botão flutuante */} {/* Janela de chat */} {isOpen && (

{/* Header */}

🤖

Assistente Virtual

Online agora

{/* Área de mensagens */}

{dragOver && (

Solte os arquivos aqui

)} {messages.map((message) => (

{/* Avatar */}

{message.sender === "user" ? "👤" : "🤖"}

{/* Mensagem */}

{message.text}

{/* Preview de arquivo */} {message.file && (

{getFileIcon(message.file.type)}

{message.file.name}

{formatFileSize(message.file.size)}

{/* Preview de imagem */} {message.file.type.startsWith("image/") && ( {message.file.name}

)}

{/* Timestamp */} {formatTime(message.timestamp)}

))} {/* Indicador de digitação */} {isTyping && (

🤖

)}

{/* Área de input */}

{/* Botão de anexo */} {/* Input de arquivo (oculto) */} { if (e.target.files) { handleFileUpload(e.target.files) e.target.value = "" } }} className="hidden" /> {/* Textarea */}

setInputMessage(e.target.value)}
                  onKeyPress={handleKeyPress}
                  placeholder="Digite sua mensagem..."
                  className="w-full p-3 pr-12 border border-gray-300 rounded-2xl resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  rows={1}
                  style={{ minHeight: "44px", maxHeight: "96px" }}
                />

{/* Botão de enviar */}
                <button
                  onClick={sendMessage}
                  disabled={inputMessage.trim() === ""}
                  className={`
                    absolute right-2 bottom-2 p-2 rounded-full transition-all
                    ${
                      inputMessage.trim() === ""
                        ? "text-gray-400 cursor-not-allowed"
                        : "text-blue-500 hover:bg-blue-50 hover:text-blue-600"
                    }
                  `}
                  aria-label="Enviar mensagem"
                >
                  <Send className="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

export default ChatWidget
[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import ChatWidget from "@/components/chat-widget"
import { MessageCircle, Upload, Smartphone } from "lucide-react"

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      {/* Conteúdo da página de exemplo */}
      <div className="container mx-auto px-4 py-16">
        <div className="text-center">
          <h1 className="text-4xl font-bold text-gray-900 mb-6">Widget de Chat Moderno</h1>
          <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
            Um widget de chat profissional e responsivo, pronto para integração em qualquer site. Clique no botão de
            chat no canto inferior direito para testar!
          </p>

<div className="grid md:grid-cols-3 gap-8 mt-12">
            <div className="bg-white p-6 rounded-xl shadow-lg">
              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4 mx-auto">
                <MessageCircle className="w-6 h-6 text-blue-600" />
              </div>
              <h3 className="text-lg font-semibold mb-2">Chat Interativo</h3>
              <p className="text-gray-600">Interface moderna com respostas automáticas do bot</p>
            </div>

<div className="bg-white p-6 rounded-xl shadow-lg">
              <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4 mx-auto">
                <Upload className="w-6 h-6 text-green-600" />
              </div>
              <h3 className="text-lg font-semibold mb-2">Upload de Arquivos</h3>
              <p className="text-gray-600">Suporte a drag & drop para imagens, PDFs e documentos</p>
            </div>

<div className="bg-white p-6 rounded-xl shadow-lg">
              <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4 mx-auto">
                <Smartphone className="w-6 h-6 text-purple-600" />
              </div>
              <h3 className="text-lg font-semibold mb-2">Responsivo</h3>
              <p className="text-gray-600">Adaptação automática para desktop e mobile</p>
            </div>
          </div>
        </div>
      </div>

{/* Widget de Chat */}
      <ChatWidget />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Widget de Chat Moderno",
  description: "Um widget de chat profissional e responsivo para integração em sites",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="pt-BR">
      <body className={inter.className}>{children}</body>
    </html>
  )
}
[V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true"
@import "tailwindcss";
@import "tw-animate-css";

/* Scrollbar personalizada */
.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Animações personalizadas */
@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.animate-bounce {
  animation: bounce 1.4s infinite ease-in-out both;
}

/* Focus states para acessibilidade */
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Transições suaves */
* {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
    transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

: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 {
  --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-foreground);
  --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;
  }
}</article></body></html>