Compare commits
No commits in common. "77b7fdd5999d580f24d3e4d551d509a432989ab0" and "f05df3efe34c522f3170e0027453dba6eecdf8b6" have entirely different histories.
77b7fdd599
...
f05df3efe3
@ -1,20 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";
|
||||
import { useTheme } from "next-themes";
|
||||
import React from "react";
|
||||
|
||||
export default function VozPage() {
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === "dark";
|
||||
|
||||
// Classes condicionais para manter coerência com o chat
|
||||
const bgClass = isDark
|
||||
? "bg-gray-900 text-white"
|
||||
: "bg-gray-50 text-gray-900";
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen flex items-center justify-center p-10 transition-colors ${bgClass}`}>
|
||||
<div className="min-h-screen flex items-center justify-center p-10">
|
||||
<AIVoiceFlow />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useTheme } from "next-themes";
|
||||
import { ArrowLeft, Sparkles } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import FileUploadChat from "@/components/ui/file-upload-and-chat";
|
||||
@ -12,8 +11,6 @@ import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";
|
||||
export function ChatWidget() {
|
||||
const [assistantOpen, setAssistantOpen] = useState(false);
|
||||
const [realtimeOpen, setRealtimeOpen] = useState(false);
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === "dark";
|
||||
|
||||
useEffect(() => {
|
||||
if (!assistantOpen && !realtimeOpen) return;
|
||||
@ -51,13 +48,13 @@ export function ChatWidget() {
|
||||
{assistantOpen && (
|
||||
<div
|
||||
id="ai-assistant-overlay"
|
||||
className={`fixed inset-0 z-100 flex flex-col transition-colors ${isDark ? "bg-slate-950" : "bg-white"}`}
|
||||
className="fixed inset-0 z-100 flex flex-col bg-gray-50 dark:bg-slate-950 border-b border-border"
|
||||
>
|
||||
<div className={`flex items-center justify-between border-b px-4 py-3 shadow-sm transition-colors ${isDark ? "bg-slate-900 border-slate-700" : "bg-white border-gray-200"}`}>
|
||||
<div className="flex items-center justify-between border-b px-4 py-3 bg-slate-100 dark:bg-slate-900 border-gray-300 dark:border-slate-700 shadow-sm">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className={`flex items-center gap-2 ${isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-700 hover:bg-slate-100"}`}
|
||||
className="flex items-center gap-2 text-slate-900 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={closeAssistant}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" aria-hidden />
|
||||
@ -75,13 +72,13 @@ export function ChatWidget() {
|
||||
{realtimeOpen && (
|
||||
<div
|
||||
id="ai-realtime-overlay"
|
||||
className={`fixed inset-0 z-110 flex flex-col transition-colors ${isDark ? "bg-slate-950" : "bg-white"}`}
|
||||
className="fixed inset-0 z-110 flex flex-col bg-background"
|
||||
>
|
||||
<div className={`flex items-center justify-between border-b px-4 py-3 transition-colors ${isDark ? "bg-slate-900 border-slate-700" : "bg-white border-gray-200"}`}>
|
||||
<div className="flex items-center justify-between border-b border-border px-4 py-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className={`flex items-center gap-2 ${isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-700 hover:bg-slate-100"}`}
|
||||
className="flex items-center gap-2"
|
||||
onClick={closeRealtime}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" aria-hidden />
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useRef, useCallback, useEffect } from "react";
|
||||
import { useTheme } from "next-themes";
|
||||
import {
|
||||
Upload,
|
||||
Paperclip,
|
||||
@ -20,8 +19,6 @@ import {
|
||||
Info,
|
||||
Lock,
|
||||
Mic,
|
||||
AudioLines,
|
||||
Plus,
|
||||
} from "lucide-react";
|
||||
|
||||
const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/zoe2";
|
||||
@ -29,9 +26,7 @@ const FALLBACK_RESPONSE =
|
||||
"Tive um problema para responder agora. Tente novamente em alguns instantes.";
|
||||
|
||||
const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
|
||||
// Usa tema global fornecido por next-themes
|
||||
const { theme, setTheme } = useTheme();
|
||||
const isDarkMode = theme === "dark";
|
||||
const [isDarkMode, setIsDarkMode] = useState(true);
|
||||
const [messages, setMessages] = useState([
|
||||
{
|
||||
id: 1,
|
||||
@ -49,14 +44,17 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
|
||||
const chatEndRef = useRef<HTMLDivElement>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
// Auto-scroll to bottom when new messages arrive
|
||||
useEffect(() => {
|
||||
chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [messages]);
|
||||
|
||||
// Auto-resize textarea
|
||||
useEffect(() => {
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = "auto";
|
||||
textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
|
||||
textareaRef.current.style.height =
|
||||
textareaRef.current.scrollHeight + "px";
|
||||
}
|
||||
}, [inputValue]);
|
||||
|
||||
@ -91,7 +89,16 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
|
||||
file: file,
|
||||
}));
|
||||
setUploadedFiles((prev) => [...prev, ...newFiles]);
|
||||
// Removido: mensagem de sistema de arquivos adicionados (não desejada na UI)
|
||||
|
||||
// Add system message about file upload
|
||||
const fileNames = newFiles.map((f) => f.name).join(", ");
|
||||
const systemMessage = {
|
||||
id: Date.now(),
|
||||
type: "system",
|
||||
content: `📎 Added ${newFiles.length} file(s): ${fileNames}`,
|
||||
timestamp: new Date(),
|
||||
};
|
||||
setMessages((prev) => [...prev, systemMessage]);
|
||||
};
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
||||
@ -271,16 +278,15 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
|
||||
<div className="flex flex-wrap items-center justify-end gap-1 sm:gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className={`rounded-full px-2 sm:px-4 py-1 sm:py-2 text-xs font-semibold uppercase tracking-[0.12em] sm:tracking-[0.18em] whitespace-nowrap transition shadow-sm border ${isDarkMode ? "border-primary/40 text-primary hover:bg-primary/10" : "bg-primary border-primary text-white hover:bg-primary/90"}`}
|
||||
className={`rounded-full border-primary/40 px-2 sm:px-4 py-1 sm:py-2 text-xs font-semibold uppercase tracking-[0.12em] sm:tracking-[0.18em] text-primary shadow-sm transition hover:bg-primary/10 border whitespace-nowrap`}
|
||||
>
|
||||
Novo atendimento
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTheme(isDarkMode ? "light" : "dark")}
|
||||
className={`p-1.5 sm:p-2 rounded-lg sm:rounded-lg border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
|
||||
aria-label="Alternar tema"
|
||||
onClick={() => setIsDarkMode(!isDarkMode)}
|
||||
className={`p-2 sm:p-3 rounded-lg sm:rounded-xl border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
|
||||
>
|
||||
<Moon className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||
<Moon className="w-5 h-5 sm:w-6 sm:h-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -344,7 +350,50 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* (Removido) Lista de arquivos antiga – agora exibida sobre o input */}
|
||||
{/* Files Ready to Send */}
|
||||
{uploadedFiles.length > 0 && (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2 sm:mb-3">
|
||||
<h4
|
||||
className={`text-xs sm:text-sm font-medium ${themeClasses.text}`}
|
||||
>
|
||||
Files ready to send ({uploadedFiles.length})
|
||||
</h4>
|
||||
<button
|
||||
onClick={() => setUploadedFiles([])}
|
||||
className={`text-xs px-2 sm:px-3 py-1 rounded-full ${themeClasses.textSecondary} hover:text-red-500 transition-colors`}
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{uploadedFiles.map((file) => (
|
||||
<div
|
||||
key={file.id}
|
||||
className={`flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg}`}
|
||||
>
|
||||
{getFileIcon(file.name)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p
|
||||
className={`text-xs sm:text-sm font-medium truncate ${themeClasses.text}`}
|
||||
>
|
||||
{file.name}
|
||||
</p>
|
||||
<p className={`text-xs ${themeClasses.textSecondary}`}>
|
||||
{formatFileSize(file.size)}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => removeFile(file.id)}
|
||||
className={`p-1 rounded-full hover:bg-red-500/20 ${themeClasses.textSecondary} hover:text-red-500 transition-colors`}
|
||||
>
|
||||
<X className="w-3 h-3 sm:w-4 sm:h-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -473,98 +522,60 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
|
||||
|
||||
{/* Chat Input */}
|
||||
<div className={`border-t p-3 sm:p-4 ${themeClasses.border}`}>
|
||||
<div className="flex flex-col gap-2">
|
||||
{/* Anexos selecionados (chips) */}
|
||||
{uploadedFiles.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto pb-1">
|
||||
{uploadedFiles.map((file) => (
|
||||
<div
|
||||
key={file.id}
|
||||
className={`group flex items-center gap-2 px-3 py-2 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg} relative`}
|
||||
>
|
||||
{getFileIcon(file.name)}
|
||||
<div className="min-w-0 max-w-[160px]">
|
||||
<p className={`text-xs font-medium truncate ${themeClasses.text}`}>
|
||||
{file.name}
|
||||
</p>
|
||||
<p className={`text-[10px] leading-tight ${themeClasses.textSecondary}`}>
|
||||
{formatFileSize(file.size)}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => removeFile(file.id)}
|
||||
className={`p-1 rounded-full transition-colors ${themeClasses.textSecondary} hover:text-red-500 hover:bg-red-500/20`}
|
||||
aria-label="Remover arquivo"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
onClick={() => setUploadedFiles([])}
|
||||
className={`ml-auto text-[11px] px-2 py-1 rounded-md ${themeClasses.textSecondary} hover:text-red-500 transition-colors`}
|
||||
>
|
||||
Limpar tudo
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-2 sm:gap-3 items-end">
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className={`p-2 sm:p-3 rounded-lg sm:rounded-xl border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
|
||||
title="Attach files"
|
||||
>
|
||||
<Paperclip className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||
</button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={(e) => handleFileSelect(e.target.files)}
|
||||
/>
|
||||
|
||||
{/* Input unificado com ícones embutidos */}
|
||||
<div className="flex w-full">
|
||||
<div className={`relative flex items-center w-full rounded-full border ${themeClasses.border} ${themeClasses.inputBg} overflow-hidden h-11`}>
|
||||
{/* Botão anexar (esquerda) */}
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
type="button"
|
||||
className={`absolute left-2 flex items-center justify-center h-7 w-7 rounded-full transition-colors hover:bg-primary/20 ${themeClasses.text}`}
|
||||
aria-label="Anexar arquivos"
|
||||
<div className="flex-1 relative">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder="Pergunte qualquer coisa para a Zoe"
|
||||
rows={1}
|
||||
className={`w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg sm:rounded-xl border resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 max-h-32 text-sm ${themeClasses.inputBg} ${themeClasses.border} ${themeClasses.text} placeholder-gray-400`}
|
||||
style={{ minHeight: "40px" }}
|
||||
/>
|
||||
|
||||
{/* Character count */}
|
||||
{inputValue.length > 0 && (
|
||||
<div
|
||||
className={`absolute bottom-1 right-2 text-xs ${themeClasses.textSecondary}`}
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={(e) => handleFileSelect(e.target.files)}
|
||||
/>
|
||||
{/* Textarea */}
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder="Pergunte qualquer coisa para a Zoe"
|
||||
rows={1}
|
||||
className={`pl-11 pr-24 w-full h-full bg-transparent resize-none focus:outline-none text-sm leading-snug py-3 ${themeClasses.text} placeholder-gray-400`}
|
||||
style={{ minHeight: 'auto', overflow: 'hidden' }}
|
||||
/>
|
||||
{/* Ícones à direita */}
|
||||
<div className="absolute right-2 flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => onOpenVoice?.()}
|
||||
type="button"
|
||||
className={`flex items-center justify-center h-8 w-8 rounded-full border ${themeClasses.border} transition-colors hover:bg-primary/20 ${themeClasses.text}`}
|
||||
aria-label="Entrada de voz"
|
||||
>
|
||||
<AudioLines className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={sendMessage}
|
||||
disabled={!inputValue.trim() && uploadedFiles.length === 0}
|
||||
type="button"
|
||||
className="flex items-center justify-center h-8 w-8 rounded-full bg-linear-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700 disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed transition-colors shadow-md"
|
||||
aria-label="Enviar mensagem"
|
||||
>
|
||||
<Send className="w-4 h-4" />
|
||||
</button>
|
||||
{inputValue.length}
|
||||
</div>
|
||||
{/* Contador de caracteres */}
|
||||
{inputValue.length > 0 && (
|
||||
<span className={`absolute bottom-1 right-24 text-[10px] ${themeClasses.textSecondary}`}>{inputValue.length}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={sendMessage}
|
||||
disabled={!inputValue.trim() && uploadedFiles.length === 0}
|
||||
className="p-2 sm:p-3 bg-linear-to-r from-blue-500 to-purple-600 text-white rounded-lg sm:rounded-xl hover:from-blue-600 hover:to-purple-700 disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed transition-all duration-200 hover:scale-105 disabled:hover:scale-100 shadow-lg"
|
||||
title="Send message"
|
||||
>
|
||||
<Send className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => onOpenVoice?.()}
|
||||
className={`p-2 sm:p-3 rounded-lg sm:rounded-xl border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
|
||||
title="Voice capture"
|
||||
>
|
||||
<Mic className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user