Primeiro Commit
This commit is contained in:
luisfepsale
@@ -25,21 +25,28 @@ interface ChatHeaderProps {
|
||||
onSystemPromptChange?: (prompt: string) => void;
|
||||
}
|
||||
|
||||
export const ChatHeader = ({
|
||||
export const ChatHeader = ({
|
||||
showModelSelector = false,
|
||||
selectedModel = "ChatGPT 4.1",
|
||||
selectedModel = "GPT-4o",
|
||||
onModelChange,
|
||||
systemPrompt = "Você é um assistente útil e prestativo.",
|
||||
onSystemPromptChange
|
||||
}: ChatHeaderProps) => {
|
||||
const [isPersonalityOpen, setIsPersonalityOpen] = useState(false);
|
||||
const [tempSystemPrompt, setTempSystemPrompt] = useState(systemPrompt);
|
||||
|
||||
|
||||
const models = [
|
||||
"ChatGPT 4.1",
|
||||
"ChatGPT 5",
|
||||
"GPT-4.1",
|
||||
"GPT-4o",
|
||||
"GPT-5 Mini",
|
||||
"Gemini 2.0 Flash",
|
||||
"Claude Sonnet 4.5",
|
||||
"Claude Opus 4.1",
|
||||
"DeepSeek V3.2 Chat",
|
||||
"DeepSeek V3.2 Reasoner",
|
||||
"Gemini 2.5 Flash",
|
||||
"Gemini 2.5 Flash-Lite",
|
||||
"Claude Haiku 4.5",
|
||||
"GPT-4o Mini",
|
||||
];
|
||||
|
||||
const handleSavePersonality = () => {
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { audioGenerationService, VOICE_OPTIONS, VoiceType } from "@/services/audioGeneration";
|
||||
|
||||
interface GeneratedAudio {
|
||||
id: string;
|
||||
@@ -24,49 +25,10 @@ interface GeneratedAudio {
|
||||
timestamp: Date;
|
||||
}
|
||||
|
||||
const VOICE_OPTIONS = {
|
||||
alloy: {
|
||||
label: "Alloy",
|
||||
gender: "Masculina",
|
||||
style: "Neutra, equilibrada, tom corporativo",
|
||||
description: "Boa para tutoriais e comunicações institucionais."
|
||||
},
|
||||
echo: {
|
||||
label: "Echo",
|
||||
gender: "Masculina",
|
||||
style: "Forte e profissional, mais grave",
|
||||
description: "Ideal para voz de autoridade ou locução firme."
|
||||
},
|
||||
fable: {
|
||||
label: "Fable",
|
||||
gender: "Feminina",
|
||||
style: "Narrativa, calorosa e envolvente",
|
||||
description: "Ótima para storytelling e áudios empáticos."
|
||||
},
|
||||
onyx: {
|
||||
label: "Onyx",
|
||||
gender: "Masculina",
|
||||
style: "Grave, autoritária, impactante",
|
||||
description: "Excelente para trailers, mensagens sérias ou institucionais."
|
||||
},
|
||||
nova: {
|
||||
label: "Nova",
|
||||
gender: "Feminina",
|
||||
style: "Brilhante, animada, energética",
|
||||
description: "Boa para vídeos curtos, marketing ou conteúdos leves."
|
||||
},
|
||||
shimmer: {
|
||||
label: "Shimmer",
|
||||
gender: "Feminina",
|
||||
style: "Suave, otimista, clara",
|
||||
description: "Boa para mensagens acolhedoras, explicações e IA conversacional."
|
||||
}
|
||||
};
|
||||
|
||||
export const GenerationView = () => {
|
||||
const [textToSpeech, setTextToSpeech] = useState("");
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [selectedVoice, setSelectedVoice] = useState<keyof typeof VOICE_OPTIONS>("alloy");
|
||||
const [selectedVoice, setSelectedVoice] = useState<VoiceType>("alloy");
|
||||
const [generatedAudio, setGeneratedAudio] = useState<GeneratedAudio | null>(null);
|
||||
const [audioHistory, setAudioHistory] = useState<GeneratedAudio[]>([]);
|
||||
const [audioSearchQuery, setAudioSearchQuery] = useState("");
|
||||
@@ -79,32 +41,67 @@ export const GenerationView = () => {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleGenerateAudio = () => {
|
||||
setIsProcessing(true);
|
||||
|
||||
setTimeout(() => {
|
||||
const audio: GeneratedAudio = {
|
||||
id: Date.now().toString(),
|
||||
text: textToSpeech,
|
||||
voice: selectedVoice,
|
||||
voiceLabel: VOICE_OPTIONS[selectedVoice].label,
|
||||
audioUrl: "data:audio/mp3;base64,//sample",
|
||||
timestamp: new Date(),
|
||||
};
|
||||
|
||||
setGeneratedAudio(audio);
|
||||
|
||||
const newHistory = [audio, ...audioHistory].slice(0, 10);
|
||||
setAudioHistory(newHistory);
|
||||
localStorage.setItem('audioHistory', JSON.stringify(newHistory));
|
||||
|
||||
setIsProcessing(false);
|
||||
|
||||
const handleGenerateAudio = async () => {
|
||||
// Valida o texto antes de enviar
|
||||
const validation = audioGenerationService.validateText(textToSpeech);
|
||||
if (!validation.valid) {
|
||||
toast({
|
||||
title: "Áudio gerado com sucesso",
|
||||
description: `Voz: ${VOICE_OPTIONS[selectedVoice].label}`,
|
||||
title: "Texto inválido",
|
||||
description: validation.error,
|
||||
variant: "destructive",
|
||||
});
|
||||
}, 2000);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsProcessing(true);
|
||||
|
||||
try {
|
||||
// Chama o serviço de geração de áudio
|
||||
const response = await audioGenerationService.generateAudio({
|
||||
message: textToSpeech,
|
||||
voice: selectedVoice,
|
||||
});
|
||||
|
||||
// Verifica se a geração foi bem-sucedida
|
||||
if (response.success) {
|
||||
console.log('URL do áudio gerado:', response.audio_url);
|
||||
|
||||
const audio: GeneratedAudio = {
|
||||
id: response.audio_generation_id,
|
||||
text: response.message,
|
||||
voice: selectedVoice,
|
||||
voiceLabel: VOICE_OPTIONS[selectedVoice].label,
|
||||
audioUrl: response.audio_url,
|
||||
timestamp: new Date(),
|
||||
};
|
||||
|
||||
setGeneratedAudio(audio);
|
||||
|
||||
const newHistory = [audio, ...audioHistory].slice(0, 10);
|
||||
setAudioHistory(newHistory);
|
||||
localStorage.setItem('audioHistory', JSON.stringify(newHistory));
|
||||
|
||||
toast({
|
||||
title: "Áudio gerado com sucesso",
|
||||
description: `Voz: ${VOICE_OPTIONS[selectedVoice].label}`,
|
||||
});
|
||||
|
||||
// Limpa o campo de texto após sucesso
|
||||
setTextToSpeech("");
|
||||
} else {
|
||||
throw new Error('Erro ao gerar áudio');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Erro na geração de áudio:', error);
|
||||
|
||||
toast({
|
||||
title: "Erro na geração",
|
||||
description: error.message || "Não foi possível gerar o áudio. Tente novamente.",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadAudio = (audio: GeneratedAudio) => {
|
||||
@@ -177,7 +174,7 @@ export const GenerationView = () => {
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Tipo de Voz</label>
|
||||
<Select value={selectedVoice} onValueChange={(value) => setSelectedVoice(value as keyof typeof VOICE_OPTIONS)}>
|
||||
<Select value={selectedVoice} onValueChange={(value) => setSelectedVoice(value as VoiceType)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
@@ -258,7 +255,12 @@ export const GenerationView = () => {
|
||||
|
||||
<div className="bg-muted/30 rounded-lg p-4">
|
||||
<p className="text-sm mb-3">{generatedAudio.text}</p>
|
||||
<audio controls className="w-full">
|
||||
<audio
|
||||
key={generatedAudio.id}
|
||||
controls
|
||||
className="w-full"
|
||||
preload="metadata"
|
||||
>
|
||||
<source src={generatedAudio.audioUrl} type="audio/mpeg" />
|
||||
Seu navegador não suporta o elemento de áudio.
|
||||
</audio>
|
||||
@@ -325,7 +327,12 @@ export const GenerationView = () => {
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
{audio.text}
|
||||
</p>
|
||||
<audio controls className="w-full">
|
||||
<audio
|
||||
key={audio.id}
|
||||
controls
|
||||
className="w-full"
|
||||
preload="metadata"
|
||||
>
|
||||
<source src={audio.audioUrl} type="audio/mpeg" />
|
||||
</audio>
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,7 @@ import { Upload, Download, Trash2, FileAudio, Copy, Search } from "lucide-react"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { transcriptionService } from "@/services/transcription";
|
||||
|
||||
const SUPPORTED_FORMATS = ['flac', 'm4a', 'mp3', 'mp4', 'mpeg', 'mpga', 'oga', 'ogg', 'wav', 'webm'];
|
||||
const MAX_FILE_SIZE = 25 * 1024 * 1024; // 25 MB
|
||||
@@ -15,6 +16,7 @@ interface TranscriptionResult {
|
||||
fileName: string;
|
||||
text: string;
|
||||
timestamp: Date;
|
||||
audioUrl?: string;
|
||||
}
|
||||
|
||||
export const TranscriptionView = () => {
|
||||
@@ -36,20 +38,12 @@ export const TranscriptionView = () => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
// Valida o arquivo usando o serviço
|
||||
const validation = transcriptionService.validateAudioFile(file);
|
||||
if (!validation.valid) {
|
||||
toast({
|
||||
title: "Arquivo muito grande",
|
||||
description: "O arquivo deve ter no máximo 25 MB",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const fileExtension = file.name.split('.').pop()?.toLowerCase();
|
||||
if (!fileExtension || !SUPPORTED_FORMATS.includes(fileExtension)) {
|
||||
toast({
|
||||
title: "Formato não suportado",
|
||||
description: `Formatos suportados: ${SUPPORTED_FORMATS.join(', ')}`,
|
||||
title: "Arquivo inválido",
|
||||
description: validation.error,
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
@@ -61,28 +55,47 @@ export const TranscriptionView = () => {
|
||||
|
||||
const handleTranscription = async (file: File) => {
|
||||
setIsTranscribing(true);
|
||||
|
||||
setTimeout(() => {
|
||||
const result: TranscriptionResult = {
|
||||
id: Date.now().toString(),
|
||||
fileName: file.name,
|
||||
text: "Esta é uma transcrição de exemplo do áudio enviado. O sistema utilizará modelos de IA avançados para converter sua fala em texto com alta precisão. O áudio foi processado com sucesso e convertido para texto.",
|
||||
timestamp: new Date(),
|
||||
};
|
||||
|
||||
setTranscriptionResult(result);
|
||||
|
||||
const newHistory = [result, ...transcriptionHistory].slice(0, 10);
|
||||
setTranscriptionHistory(newHistory);
|
||||
localStorage.setItem('transcriptionHistory', JSON.stringify(newHistory));
|
||||
|
||||
setIsTranscribing(false);
|
||||
|
||||
toast({
|
||||
title: "Transcrição concluída",
|
||||
description: "Seu áudio foi transcrito com sucesso!",
|
||||
|
||||
try {
|
||||
// Chama o serviço de transcrição
|
||||
const response = await transcriptionService.transcribeAudio({
|
||||
audioFile: file,
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
// Verifica se a transcrição foi bem-sucedida
|
||||
if (response.success) {
|
||||
const result: TranscriptionResult = {
|
||||
id: response.transcription_id,
|
||||
fileName: file.name,
|
||||
text: response.message,
|
||||
timestamp: new Date(),
|
||||
audioUrl: response.audio_url,
|
||||
};
|
||||
|
||||
setTranscriptionResult(result);
|
||||
|
||||
const newHistory = [result, ...transcriptionHistory].slice(0, 10);
|
||||
setTranscriptionHistory(newHistory);
|
||||
localStorage.setItem('transcriptionHistory', JSON.stringify(newHistory));
|
||||
|
||||
toast({
|
||||
title: "Transcrição concluída",
|
||||
description: "Seu áudio foi transcrito com sucesso!",
|
||||
});
|
||||
} else {
|
||||
throw new Error(response.message || 'Erro ao transcrever áudio');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Erro na transcrição:', error);
|
||||
|
||||
toast({
|
||||
title: "Erro na transcrição",
|
||||
description: error.message || "Não foi possível transcrever o áudio. Tente novamente.",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsTranscribing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteTranscription = () => {
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { chatService } from "@/services/chat";
|
||||
|
||||
interface ChatInputProps {
|
||||
onSendMessage: (message: string, files?: File[]) => void;
|
||||
@@ -67,21 +68,54 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = Array.from(e.target.files || []);
|
||||
|
||||
// Validate file size (max 10MB per file)
|
||||
const validFiles = files.filter((file) => {
|
||||
const newFiles = [...attachedFiles, ...files];
|
||||
|
||||
// Valida quantidade máxima de anexos (5)
|
||||
if (newFiles.length > chatService.getMaxAttachments()) {
|
||||
toast({
|
||||
title: "Limite de anexos excedido",
|
||||
description: `Você pode anexar no máximo ${chatService.getMaxAttachments()} arquivos por mensagem.`,
|
||||
variant: "destructive",
|
||||
});
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Valida tipos de arquivo e tamanho
|
||||
const validFiles: File[] = [];
|
||||
for (const file of files) {
|
||||
// Valida tamanho (max 10MB por arquivo)
|
||||
if (file.size > 10 * 1024 * 1024) {
|
||||
toast({
|
||||
title: "Arquivo muito grande",
|
||||
description: `${file.name} excede o limite de 10MB`,
|
||||
variant: "destructive",
|
||||
});
|
||||
return false;
|
||||
continue;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
setAttachedFiles([...attachedFiles, ...validFiles]);
|
||||
validFiles.push(file);
|
||||
}
|
||||
|
||||
// Valida formatos permitidos
|
||||
const allFiles = [...attachedFiles, ...validFiles];
|
||||
const validation = chatService.validateAttachments(allFiles);
|
||||
|
||||
if (!validation.valid) {
|
||||
toast({
|
||||
title: "Formato de arquivo não permitido",
|
||||
description: validation.error,
|
||||
variant: "destructive",
|
||||
});
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
setAttachedFiles(allFiles);
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
@@ -156,7 +190,8 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={handleFileSelect}
|
||||
accept=".pdf,.txt,.doc,.docx,.xls,.xlsx,.csv,.png,.jpg,.jpeg,.gif,.webp"
|
||||
accept={chatService.getAllowedFileExtensions()}
|
||||
title={`Formatos aceitos: ${chatService.getAllowedFileTypesLabel()}`}
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
@@ -179,7 +214,7 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
|
||||
</div>
|
||||
|
||||
<p className="hidden md:block text-xs text-muted-foreground text-center">
|
||||
Pressione Enter para enviar, Shift + Enter para nova linha • Máx. 10MB por arquivo
|
||||
Pressione Enter para enviar, Shift + Enter para nova linha • Máx. {chatService.getMaxAttachments()} anexos • Formatos: {chatService.getAllowedFileTypesLabel()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+300
-134
@@ -1,8 +1,12 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Search, Folder, FolderPlus, MessageSquare, MoreVertical, Trash2, Edit, FolderInput, ChevronLeft, ChevronRight, Plus } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { chatService, StoredChat, StoredFolder } from "@/services/chat";
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import { ptBR } from "date-fns/locale";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@@ -30,111 +34,153 @@ import {
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
|
||||
interface Conversation {
|
||||
id: string;
|
||||
title: string;
|
||||
lastMessage: string;
|
||||
timestamp: string;
|
||||
folderId?: string;
|
||||
}
|
||||
|
||||
interface ChatFolder {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface ChatSidebarProps {
|
||||
isCollapsed: boolean;
|
||||
onToggleCollapse: () => void;
|
||||
onNewChat: () => void;
|
||||
onSelectChat?: (chat: StoredChat) => void;
|
||||
currentChatId?: string;
|
||||
}
|
||||
|
||||
export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat }: ChatSidebarProps) => {
|
||||
export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat, onSelectChat, currentChatId }: ChatSidebarProps) => {
|
||||
const { toast } = useToast();
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [isCreateFolderOpen, setIsCreateFolderOpen] = useState(false);
|
||||
const [isEditFolderOpen, setIsEditFolderOpen] = useState(false);
|
||||
const [isDeleteFolderOpen, setIsDeleteFolderOpen] = useState(false);
|
||||
const [isDeleteChatOpen, setIsDeleteChatOpen] = useState(false);
|
||||
const [newFolderName, setNewFolderName] = useState("");
|
||||
const [editingFolder, setEditingFolder] = useState<ChatFolder | null>(null);
|
||||
const [deletingFolder, setDeletingFolder] = useState<ChatFolder | null>(null);
|
||||
const [selectedConversation, setSelectedConversation] = useState<string | null>("1");
|
||||
const [editingFolder, setEditingFolder] = useState<StoredFolder | null>(null);
|
||||
const [deletingFolder, setDeletingFolder] = useState<StoredFolder | null>(null);
|
||||
const [deletingChat, setDeletingChat] = useState<StoredChat | null>(null);
|
||||
|
||||
const [folders, setFolders] = useState<ChatFolder[]>([
|
||||
{ id: "work", name: "Trabalho" },
|
||||
{ id: "personal", name: "Pessoal" },
|
||||
]);
|
||||
// Estado carregado do localStorage via chatService
|
||||
const [chats, setChats] = useState<StoredChat[]>([]);
|
||||
const [folders, setFolders] = useState<StoredFolder[]>([]);
|
||||
const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
|
||||
|
||||
const [conversations, setConversations] = useState<Conversation[]>([
|
||||
{
|
||||
id: "1",
|
||||
title: "Conversa sobre IA",
|
||||
lastMessage: "Como funciona o machine learning?",
|
||||
timestamp: "Há 5 min",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Projeto HGTX",
|
||||
lastMessage: "Discutindo arquitetura do sistema",
|
||||
timestamp: "Há 1 hora",
|
||||
folderId: "work",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Ideias criativas",
|
||||
lastMessage: "Brainstorm para novo produto",
|
||||
timestamp: "Ontem",
|
||||
folderId: "personal",
|
||||
},
|
||||
]);
|
||||
// Carrega chats e pastas do localStorage quando o componente monta
|
||||
useEffect(() => {
|
||||
loadChatsAndFolders();
|
||||
|
||||
const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set(["work", "personal"]));
|
||||
// Escuta evento customizado para recarregar quando chat é atualizado
|
||||
const handleChatUpdate = () => {
|
||||
loadChatsAndFolders();
|
||||
};
|
||||
|
||||
window.addEventListener('chatUpdated', handleChatUpdate);
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
window.removeEventListener('chatUpdated', handleChatUpdate);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const loadChatsAndFolders = () => {
|
||||
const loadedChats = chatService.getAllChats();
|
||||
const loadedFolders = chatService.getAllFolders();
|
||||
|
||||
setChats(loadedChats);
|
||||
setFolders(loadedFolders);
|
||||
|
||||
// Expande todas as pastas por padrão
|
||||
setExpandedFolders(new Set(loadedFolders.map(f => f.id)));
|
||||
};
|
||||
|
||||
const handleCreateFolder = () => {
|
||||
if (newFolderName.trim()) {
|
||||
const newFolder: ChatFolder = {
|
||||
id: Date.now().toString(),
|
||||
name: newFolderName,
|
||||
};
|
||||
setFolders([...folders, newFolder]);
|
||||
setNewFolderName("");
|
||||
setIsCreateFolderOpen(false);
|
||||
try {
|
||||
const newFolder: StoredFolder = {
|
||||
id: chatService.generateChatId(), // Usa mesmo gerador de ID
|
||||
name: newFolderName,
|
||||
createdAt: new Date(),
|
||||
chatIds: [],
|
||||
};
|
||||
chatService.saveFolder(newFolder);
|
||||
loadChatsAndFolders();
|
||||
setNewFolderName("");
|
||||
setIsCreateFolderOpen(false);
|
||||
|
||||
toast({
|
||||
title: "Pasta criada",
|
||||
description: `Pasta "${newFolderName}" criada com sucesso.`,
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Erro ao criar pasta",
|
||||
description: "Não foi possível criar a pasta. Tente novamente.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditFolder = () => {
|
||||
if (editingFolder && newFolderName.trim()) {
|
||||
setFolders(
|
||||
folders.map((f) =>
|
||||
f.id === editingFolder.id ? { ...f, name: newFolderName } : f
|
||||
)
|
||||
);
|
||||
setNewFolderName("");
|
||||
setEditingFolder(null);
|
||||
setIsEditFolderOpen(false);
|
||||
try {
|
||||
const updatedFolder: StoredFolder = {
|
||||
...editingFolder,
|
||||
name: newFolderName,
|
||||
};
|
||||
chatService.saveFolder(updatedFolder);
|
||||
loadChatsAndFolders();
|
||||
setNewFolderName("");
|
||||
setEditingFolder(null);
|
||||
setIsEditFolderOpen(false);
|
||||
|
||||
toast({
|
||||
title: "Pasta renomeada",
|
||||
description: `Pasta renomeada para "${newFolderName}".`,
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Erro ao renomear pasta",
|
||||
description: "Não foi possível renomear a pasta. Tente novamente.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteFolder = () => {
|
||||
if (deletingFolder) {
|
||||
// Remove folder and move conversations back to "no folder"
|
||||
setConversations(
|
||||
conversations.map((conv) =>
|
||||
conv.folderId === deletingFolder.id ? { ...conv, folderId: undefined } : conv
|
||||
)
|
||||
);
|
||||
setFolders(folders.filter((f) => f.id !== deletingFolder.id));
|
||||
setDeletingFolder(null);
|
||||
setIsDeleteFolderOpen(false);
|
||||
try {
|
||||
// Remove chats da pasta (volta para "Sem Pasta")
|
||||
const updatedChats = chats.map(chat => {
|
||||
if (chat.folderId === deletingFolder.id) {
|
||||
const updated = { ...chat, folderId: undefined };
|
||||
chatService.saveChat(updated);
|
||||
return updated;
|
||||
}
|
||||
return chat;
|
||||
});
|
||||
|
||||
chatService.deleteFolder(deletingFolder.id);
|
||||
loadChatsAndFolders();
|
||||
setDeletingFolder(null);
|
||||
setIsDeleteFolderOpen(false);
|
||||
|
||||
toast({
|
||||
title: "Pasta excluída",
|
||||
description: "As conversas foram movidas para 'Sem Pasta'.",
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Erro ao excluir pasta",
|
||||
description: "Não foi possível excluir a pasta. Tente novamente.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const openEditFolder = (folder: ChatFolder) => {
|
||||
const openEditFolder = (folder: StoredFolder) => {
|
||||
setEditingFolder(folder);
|
||||
setNewFolderName(folder.name);
|
||||
setIsEditFolderOpen(true);
|
||||
};
|
||||
|
||||
const openDeleteFolder = (folder: ChatFolder) => {
|
||||
const openDeleteFolder = (folder: StoredFolder) => {
|
||||
setDeletingFolder(folder);
|
||||
setIsDeleteFolderOpen(true);
|
||||
};
|
||||
@@ -149,37 +195,112 @@ export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat }: ChatSi
|
||||
setExpandedFolders(newExpanded);
|
||||
};
|
||||
|
||||
const moveToFolder = (conversationId: string, folderId: string) => {
|
||||
setConversations(
|
||||
conversations.map((conv) =>
|
||||
conv.id === conversationId ? { ...conv, folderId } : conv
|
||||
)
|
||||
);
|
||||
const moveToFolder = (chatId: string, folderId: string) => {
|
||||
try {
|
||||
const chat = chats.find(c => c.id === chatId);
|
||||
if (chat) {
|
||||
const updatedChat: StoredChat = {
|
||||
...chat,
|
||||
folderId: folderId,
|
||||
};
|
||||
chatService.saveChat(updatedChat);
|
||||
loadChatsAndFolders();
|
||||
|
||||
const folder = folders.find(f => f.id === folderId);
|
||||
toast({
|
||||
title: "Chat movido",
|
||||
description: `Movido para a pasta "${folder?.name}".`,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Erro ao mover chat",
|
||||
description: "Não foi possível mover o chat. Tente novamente.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const removeFromFolder = (conversationId: string) => {
|
||||
setConversations(
|
||||
conversations.map((conv) =>
|
||||
conv.id === conversationId ? { ...conv, folderId: undefined } : conv
|
||||
)
|
||||
);
|
||||
const removeFromFolder = (chatId: string) => {
|
||||
try {
|
||||
const chat = chats.find(c => c.id === chatId);
|
||||
if (chat) {
|
||||
const updatedChat: StoredChat = {
|
||||
...chat,
|
||||
folderId: undefined,
|
||||
};
|
||||
chatService.saveChat(updatedChat);
|
||||
loadChatsAndFolders();
|
||||
|
||||
toast({
|
||||
title: "Chat removido da pasta",
|
||||
description: "Chat movido para 'Sem Pasta'.",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Erro ao remover chat",
|
||||
description: "Não foi possível remover o chat da pasta.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const filteredConversations = conversations.filter(
|
||||
(conv) =>
|
||||
conv.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
conv.lastMessage.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
const handleDeleteChat = () => {
|
||||
if (deletingChat) {
|
||||
try {
|
||||
chatService.deleteChat(deletingChat.id);
|
||||
loadChatsAndFolders();
|
||||
setDeletingChat(null);
|
||||
setIsDeleteChatOpen(false);
|
||||
|
||||
const conversationsWithoutFolder = filteredConversations.filter((c) => !c.folderId);
|
||||
const conversationsByFolder = folders.reduce((acc, folder) => {
|
||||
acc[folder.id] = filteredConversations.filter((c) => c.folderId === folder.id);
|
||||
toast({
|
||||
title: "Chat excluído",
|
||||
description: "A conversa foi excluída com sucesso.",
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Erro ao excluir chat",
|
||||
description: "Não foi possível excluir o chat. Tente novamente.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const openDeleteChat = (chat: StoredChat) => {
|
||||
setDeletingChat(chat);
|
||||
setIsDeleteChatOpen(true);
|
||||
};
|
||||
|
||||
const handleSelectChat = (chat: StoredChat) => {
|
||||
if (onSelectChat) {
|
||||
onSelectChat(chat);
|
||||
}
|
||||
};
|
||||
|
||||
// Filtrar chats pela busca
|
||||
const filteredChats = chats.filter((chat) => {
|
||||
const searchLower = searchQuery.toLowerCase();
|
||||
const titleMatch = chat.title.toLowerCase().includes(searchLower);
|
||||
const contentMatch = chat.messages.some(msg =>
|
||||
msg.content.toLowerCase().includes(searchLower)
|
||||
);
|
||||
return titleMatch || contentMatch;
|
||||
});
|
||||
|
||||
// Separar chats sem pasta
|
||||
const chatsWithoutFolder = filteredChats.filter((c) => !c.folderId);
|
||||
|
||||
// Agrupar chats por pasta
|
||||
const chatsByFolder = folders.reduce((acc, folder) => {
|
||||
acc[folder.id] = filteredChats.filter((c) => c.folderId === folder.id);
|
||||
return acc;
|
||||
}, {} as Record<string, Conversation[]>);
|
||||
}, {} as Record<string, StoredChat[]>);
|
||||
|
||||
if (isCollapsed) {
|
||||
return (
|
||||
<div className="w-12 border-r border-border bg-card/30 backdrop-blur-sm flex flex-col items-center py-4">
|
||||
<div className="w-12 h-full border-r border-border bg-card/30 backdrop-blur-sm flex flex-col items-center py-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@@ -193,7 +314,7 @@ export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat }: ChatSi
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-80 border-r border-border bg-card/30 backdrop-blur-sm flex flex-col">
|
||||
<div className="w-80 h-full border-r border-border bg-card/30 backdrop-blur-sm flex flex-col">
|
||||
{/* Header with collapse button */}
|
||||
<div className="px-4 pt-4 pb-2 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-foreground">Conversas</h3>
|
||||
@@ -330,10 +451,10 @@ export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat }: ChatSi
|
||||
{folder.name}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{conversationsByFolder[folder.id]?.length || 0}
|
||||
{chatsByFolder[folder.id]?.length || 0}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
@@ -363,17 +484,18 @@ export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat }: ChatSi
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{expandedFolders.has(folder.id) && conversationsByFolder[folder.id]?.length > 0 && (
|
||||
{expandedFolders.has(folder.id) && chatsByFolder[folder.id]?.length > 0 && (
|
||||
<div className="ml-6 space-y-1">
|
||||
{conversationsByFolder[folder.id].map((conv) => (
|
||||
<ConversationItem
|
||||
key={conv.id}
|
||||
conversation={conv}
|
||||
isSelected={selectedConversation === conv.id}
|
||||
onSelect={() => setSelectedConversation(conv.id)}
|
||||
{chatsByFolder[folder.id].map((chat) => (
|
||||
<ChatItem
|
||||
key={chat.id}
|
||||
chat={chat}
|
||||
isSelected={currentChatId === chat.id}
|
||||
onSelect={() => handleSelectChat(chat)}
|
||||
folders={folders}
|
||||
onMoveToFolder={moveToFolder}
|
||||
onRemoveFromFolder={removeFromFolder}
|
||||
onDelete={() => openDeleteChat(chat)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -381,48 +503,90 @@ export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat }: ChatSi
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Conversations without folder */}
|
||||
{conversationsWithoutFolder.length > 0 && (
|
||||
{/* Chats without folder */}
|
||||
{chatsWithoutFolder.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
<div className="px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
Sem Pasta
|
||||
</div>
|
||||
{conversationsWithoutFolder.map((conv) => (
|
||||
<ConversationItem
|
||||
key={conv.id}
|
||||
conversation={conv}
|
||||
isSelected={selectedConversation === conv.id}
|
||||
onSelect={() => setSelectedConversation(conv.id)}
|
||||
{chatsWithoutFolder.map((chat) => (
|
||||
<ChatItem
|
||||
key={chat.id}
|
||||
chat={chat}
|
||||
isSelected={currentChatId === chat.id}
|
||||
onSelect={() => handleSelectChat(chat)}
|
||||
folders={folders}
|
||||
onMoveToFolder={moveToFolder}
|
||||
onRemoveFromFolder={removeFromFolder}
|
||||
onDelete={() => openDeleteChat(chat)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{/* Delete Chat Alert */}
|
||||
<AlertDialog open={isDeleteChatOpen} onOpenChange={setIsDeleteChatOpen}>
|
||||
<AlertDialogContent className="glass-effect bg-card border-border z-50">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Excluir Conversa?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Esta ação não pode ser desfeita. A conversa "{deletingChat?.title}" será permanentemente excluída.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancelar</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDeleteChat} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
|
||||
Excluir
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface ConversationItemProps {
|
||||
conversation: Conversation;
|
||||
interface ChatItemProps {
|
||||
chat: StoredChat;
|
||||
isSelected: boolean;
|
||||
onSelect: () => void;
|
||||
folders: ChatFolder[];
|
||||
onMoveToFolder: (conversationId: string, folderId: string) => void;
|
||||
onRemoveFromFolder: (conversationId: string) => void;
|
||||
folders: StoredFolder[];
|
||||
onMoveToFolder: (chatId: string, folderId: string) => void;
|
||||
onRemoveFromFolder: (chatId: string) => void;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
const ConversationItem = ({
|
||||
conversation,
|
||||
const ChatItem = ({
|
||||
chat,
|
||||
isSelected,
|
||||
onSelect,
|
||||
folders,
|
||||
onMoveToFolder,
|
||||
onRemoveFromFolder,
|
||||
}: ConversationItemProps) => {
|
||||
onDelete,
|
||||
}: ChatItemProps) => {
|
||||
// Pega a última mensagem do usuário
|
||||
const lastUserMessage = chat.messages
|
||||
.filter(m => m.role === 'user')
|
||||
.slice(-1)[0];
|
||||
|
||||
// Formata timestamp relativo
|
||||
const timeAgo = formatDistanceToNow(new Date(chat.updatedAt), {
|
||||
addSuffix: true,
|
||||
locale: ptBR,
|
||||
});
|
||||
|
||||
// Limita o título a 40 caracteres
|
||||
const truncatedTitle = chat.title.length > 40
|
||||
? chat.title.substring(0, 40) + '...'
|
||||
: chat.title;
|
||||
|
||||
// Limita a mensagem a 50 caracteres
|
||||
const truncatedMessage = lastUserMessage?.content.length > 50
|
||||
? lastUserMessage.content.substring(0, 50) + '...'
|
||||
: lastUserMessage?.content;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group flex items-start gap-2 px-3 py-2 rounded-lg cursor-pointer transition-all ${
|
||||
@@ -433,13 +597,17 @@ const ConversationItem = ({
|
||||
onClick={onSelect}
|
||||
>
|
||||
<MessageSquare className="w-4 h-4 mt-0.5 text-primary flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate">{conversation.title}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{conversation.lastMessage}
|
||||
<div className="flex-1 min-w-0 overflow-hidden">
|
||||
<p className="text-sm font-medium truncate" title={chat.title}>
|
||||
{truncatedTitle}
|
||||
</p>
|
||||
{lastUserMessage && (
|
||||
<p className="text-xs text-muted-foreground truncate" title={lastUserMessage.content}>
|
||||
{truncatedMessage}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{conversation.timestamp}
|
||||
{timeAgo}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -448,21 +616,16 @@ const ConversationItem = ({
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
|
||||
>
|
||||
<MoreVertical className="w-3 h-3" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="glass-effect bg-popover border-border z-50">
|
||||
<DropdownMenuItem className="gap-2">
|
||||
<Edit className="w-3 h-3" />
|
||||
Renomear
|
||||
</DropdownMenuItem>
|
||||
|
||||
{conversation.folderId && (
|
||||
{chat.folderId && (
|
||||
<DropdownMenuItem
|
||||
className="gap-2"
|
||||
onClick={() => onRemoveFromFolder(conversation.id)}
|
||||
onClick={() => onRemoveFromFolder(chat.id)}
|
||||
>
|
||||
<FolderInput className="w-3 h-3" />
|
||||
Remover da Pasta
|
||||
@@ -473,14 +636,17 @@ const ConversationItem = ({
|
||||
<DropdownMenuItem
|
||||
key={folder.id}
|
||||
className="gap-2"
|
||||
onClick={() => onMoveToFolder(conversation.id, folder.id)}
|
||||
onClick={() => onMoveToFolder(chat.id, folder.id)}
|
||||
>
|
||||
<Folder className="w-3 h-3" />
|
||||
Mover para {folder.name}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
|
||||
<DropdownMenuItem className="gap-2 text-destructive">
|
||||
<DropdownMenuItem
|
||||
className="gap-2 text-destructive"
|
||||
onClick={onDelete}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
Excluir
|
||||
</DropdownMenuItem>
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { ChatHeader } from "@/components/ChatHeader";
|
||||
import { ChatMessage } from "./ChatMessage";
|
||||
import { ChatInput } from "./ChatInput";
|
||||
import { ChatSidebar } from "./ChatSidebar";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { chatService, StoredChat } from "@/services/chat";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { getModelId } from "@/config/models";
|
||||
|
||||
interface Message {
|
||||
id: string;
|
||||
@@ -18,24 +21,61 @@ interface Message {
|
||||
}
|
||||
|
||||
export const ChatView = () => {
|
||||
const { toast } = useToast();
|
||||
const [isChatSidebarCollapsed, setIsChatSidebarCollapsed] = useState(false);
|
||||
const [selectedModel, setSelectedModel] = useState("ChatGPT 4.1");
|
||||
const [currentChatId, setCurrentChatId] = useState("1");
|
||||
const [selectedModel, setSelectedModel] = useState("GPT-4o");
|
||||
// Inicia com "0" - será atualizado com o chat_id real após primeira resposta da API
|
||||
const [currentChatId, setCurrentChatId] = useState("0");
|
||||
const [systemPrompt, setSystemPrompt] = useState("Você é um assistente útil e prestativo.");
|
||||
const [messages, setMessages] = useState<Message[]>([
|
||||
{
|
||||
id: "1",
|
||||
role: "assistant",
|
||||
content: "Olá! Sou o assistente HGTX Codex. Como posso ajudá-lo hoje?",
|
||||
model: "ChatGPT 4.1",
|
||||
model: "GPT-4o",
|
||||
},
|
||||
]);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// Salva o chat no localStorage sempre que as mensagens mudam
|
||||
useEffect(() => {
|
||||
if (messages.length > 1) { // Salva apenas se houver mensagens além da inicial
|
||||
saveCurrentChat();
|
||||
// Dispara evento customizado para a sidebar recarregar
|
||||
window.dispatchEvent(new Event('chatUpdated'));
|
||||
}
|
||||
}, [messages]);
|
||||
|
||||
// Função para salvar o chat atual
|
||||
const saveCurrentChat = () => {
|
||||
try {
|
||||
const chatTitle = chatService.generateChatTitle(
|
||||
messages.find(m => m.role === 'user')?.content || 'Nova Conversa'
|
||||
);
|
||||
|
||||
const storedChat: StoredChat = {
|
||||
id: currentChatId,
|
||||
title: chatTitle,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
model: selectedModel,
|
||||
systemPrompt: systemPrompt,
|
||||
messages: messages.map(msg => ({
|
||||
...msg,
|
||||
timestamp: new Date(),
|
||||
})),
|
||||
};
|
||||
|
||||
chatService.saveChat(storedChat);
|
||||
} catch (error) {
|
||||
console.error('Erro ao salvar chat:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNewChat = () => {
|
||||
const newChatId = Date.now().toString();
|
||||
setCurrentChatId(newChatId);
|
||||
// Reseta para "0" - novo chat sempre começa com chat_id "0"
|
||||
setCurrentChatId("0");
|
||||
setMessages([
|
||||
{
|
||||
id: "1",
|
||||
@@ -44,9 +84,31 @@ export const ChatView = () => {
|
||||
model: selectedModel,
|
||||
},
|
||||
]);
|
||||
|
||||
// Dispara evento para atualizar a sidebar
|
||||
window.dispatchEvent(new Event('chatUpdated'));
|
||||
};
|
||||
|
||||
const handleSendMessage = (content: string, files?: File[]) => {
|
||||
const handleLoadChat = (chat: StoredChat) => {
|
||||
// Carrega um chat existente do histórico
|
||||
setCurrentChatId(chat.id);
|
||||
setSelectedModel(chat.model);
|
||||
setSystemPrompt(chat.systemPrompt);
|
||||
|
||||
// Converte mensagens do StoredChat para Message
|
||||
const loadedMessages: Message[] = chat.messages.map(msg => ({
|
||||
id: msg.id,
|
||||
role: msg.role,
|
||||
content: msg.content,
|
||||
model: msg.model,
|
||||
attachments: msg.attachments,
|
||||
}));
|
||||
|
||||
setMessages(loadedMessages);
|
||||
};
|
||||
|
||||
const handleSendMessage = async (content: string, files?: File[]) => {
|
||||
// Adiciona mensagem do usuário na interface
|
||||
const newMessage: Message = {
|
||||
id: Date.now().toString(),
|
||||
role: "user",
|
||||
@@ -61,28 +123,71 @@ export const ChatView = () => {
|
||||
setMessages((prev) => [...prev, newMessage]);
|
||||
setIsLoading(true);
|
||||
|
||||
// Simulate AI response
|
||||
setTimeout(() => {
|
||||
const aiResponse: Message = {
|
||||
try {
|
||||
// Envia mensagem para a API
|
||||
// Converte o nome do modelo para o ID da API
|
||||
const modelId = getModelId(selectedModel);
|
||||
|
||||
const response = await chatService.sendMessage({
|
||||
chatId: currentChatId,
|
||||
message: content,
|
||||
modelId: modelId,
|
||||
personalidade: systemPrompt,
|
||||
anexos: files,
|
||||
});
|
||||
|
||||
// Adiciona resposta da IA na interface
|
||||
if (response.success) {
|
||||
// IMPORTANTE: Atualiza o chat_id com o valor retornado pela API
|
||||
// Isso mantém o contexto da conversa para as próximas mensagens
|
||||
if (response.chat_id && response.chat_id !== currentChatId) {
|
||||
console.log(`Chat ID atualizado: ${currentChatId} → ${response.chat_id}`);
|
||||
setCurrentChatId(response.chat_id);
|
||||
}
|
||||
|
||||
const aiResponse: Message = {
|
||||
id: (Date.now() + 1).toString(),
|
||||
role: "assistant",
|
||||
content: response.response,
|
||||
model: selectedModel,
|
||||
};
|
||||
setMessages((prev) => [...prev, aiResponse]);
|
||||
} else {
|
||||
throw new Error('Resposta inválida da API');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao enviar mensagem:', error);
|
||||
|
||||
// Mostra toast de erro para o usuário
|
||||
toast({
|
||||
title: "Erro ao enviar mensagem",
|
||||
description: error.message || "Não foi possível comunicar com a IA. Tente novamente.",
|
||||
variant: "destructive",
|
||||
});
|
||||
|
||||
// Adiciona mensagem de erro na interface
|
||||
const errorMessage: Message = {
|
||||
id: (Date.now() + 1).toString(),
|
||||
role: "assistant",
|
||||
content:
|
||||
`Resposta com base na personalidade: "${systemPrompt}". Esta é uma resposta simulada que considera as instruções de sistema definidas.`,
|
||||
content: "Desculpe, ocorreu um erro ao processar sua mensagem. Por favor, tente novamente.",
|
||||
model: selectedModel,
|
||||
};
|
||||
setMessages((prev) => [...prev, aiResponse]);
|
||||
setMessages((prev) => [...prev, errorMessage]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full pb-16 md:pb-0">
|
||||
{/* Chat Sidebar - Hidden on mobile */}
|
||||
<div className="hidden md:block">
|
||||
<ChatSidebar
|
||||
<ChatSidebar
|
||||
isCollapsed={isChatSidebarCollapsed}
|
||||
onToggleCollapse={() => setIsChatSidebarCollapsed(!isChatSidebarCollapsed)}
|
||||
onNewChat={handleNewChat}
|
||||
onSelectChat={handleLoadChat}
|
||||
currentChatId={currentChatId}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { ChatHeader } from "@/components/ChatHeader";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
@@ -13,56 +13,133 @@ import {
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { imageGenerationService, IMAGE_SIZE_OPTIONS, ImageSize } from "@/services/imageGeneration";
|
||||
|
||||
interface GeneratedImage {
|
||||
id: string;
|
||||
url: string;
|
||||
prompt: string;
|
||||
size: string;
|
||||
timestamp: string;
|
||||
size: ImageSize;
|
||||
timestamp: Date;
|
||||
}
|
||||
|
||||
export const ImageView = () => {
|
||||
const [prompt, setPrompt] = useState("");
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
const [selectedSize, setSelectedSize] = useState("1024x1024");
|
||||
const [selectedSize, setSelectedSize] = useState<ImageSize>("1024x1024");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [images, setImages] = useState<GeneratedImage[]>([
|
||||
{
|
||||
id: "1",
|
||||
url: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=512&h=512&fit=crop",
|
||||
prompt: "Paisagem futurista com cidades voadoras",
|
||||
size: "1024x1024",
|
||||
timestamp: "Há 2 horas",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
url: "https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?w=512&h=512&fit=crop",
|
||||
prompt: "Robô humanoide em estilo cyberpunk",
|
||||
size: "1024x1536",
|
||||
timestamp: "Há 5 horas",
|
||||
},
|
||||
]);
|
||||
const [images, setImages] = useState<GeneratedImage[]>([]);
|
||||
const { toast } = useToast();
|
||||
|
||||
// Carrega histórico do localStorage ao montar o componente
|
||||
useEffect(() => {
|
||||
const savedImages = localStorage.getItem('imageHistory');
|
||||
if (savedImages) {
|
||||
try {
|
||||
const parsedImages = JSON.parse(savedImages);
|
||||
// Converte strings de data de volta para Date objects
|
||||
const imagesWithDates = parsedImages.map((img: any) => ({
|
||||
...img,
|
||||
timestamp: new Date(img.timestamp),
|
||||
}));
|
||||
setImages(imagesWithDates);
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar histórico de imagens:', error);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleGenerate = async () => {
|
||||
// Valida a descrição antes de enviar
|
||||
const validation = imageGenerationService.validateDescription(prompt);
|
||||
if (!validation.valid) {
|
||||
toast({
|
||||
title: "Descrição inválida",
|
||||
description: validation.error,
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const handleGenerate = () => {
|
||||
setIsGenerating(true);
|
||||
// Simulate image generation
|
||||
setTimeout(() => {
|
||||
const newImage: GeneratedImage = {
|
||||
id: Date.now().toString(),
|
||||
url: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=512&h=512&fit=crop",
|
||||
prompt: prompt,
|
||||
|
||||
try {
|
||||
// Chama o serviço de geração de imagem
|
||||
const response = await imageGenerationService.generateImage({
|
||||
description: prompt,
|
||||
size: selectedSize,
|
||||
timestamp: "Agora",
|
||||
};
|
||||
setImages([newImage, ...images]);
|
||||
});
|
||||
|
||||
// Verifica se a geração foi bem-sucedida
|
||||
if (response.success) {
|
||||
// Log da URL da imagem para debug
|
||||
console.log('URL da imagem gerada:', response.image_url);
|
||||
|
||||
const newImage: GeneratedImage = {
|
||||
id: response.image_generation_id,
|
||||
url: response.image_url,
|
||||
prompt: response.message,
|
||||
size: selectedSize,
|
||||
timestamp: new Date(),
|
||||
};
|
||||
|
||||
const newHistory = [newImage, ...images].slice(0, 20); // Mantém apenas as últimas 20 imagens
|
||||
setImages(newHistory);
|
||||
localStorage.setItem('imageHistory', JSON.stringify(newHistory));
|
||||
|
||||
toast({
|
||||
title: "Imagem gerada com sucesso",
|
||||
description: `Tamanho: ${IMAGE_SIZE_OPTIONS[selectedSize].label}`,
|
||||
});
|
||||
|
||||
// Limpa o campo de descrição após sucesso
|
||||
setPrompt("");
|
||||
} else {
|
||||
throw new Error('Erro ao gerar imagem');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Erro na geração de imagem:', error);
|
||||
|
||||
toast({
|
||||
title: "Erro na geração",
|
||||
description: error.message || "Não foi possível gerar a imagem. Tente novamente.",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsGenerating(false);
|
||||
setPrompt("");
|
||||
}, 3000);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
setImages(images.filter((img) => img.id !== id));
|
||||
const newHistory = images.filter((img) => img.id !== id);
|
||||
setImages(newHistory);
|
||||
localStorage.setItem('imageHistory', JSON.stringify(newHistory));
|
||||
|
||||
toast({
|
||||
title: "Imagem removida",
|
||||
description: "A imagem foi removida do histórico.",
|
||||
});
|
||||
};
|
||||
|
||||
const handleDownload = async (image: GeneratedImage) => {
|
||||
try {
|
||||
await imageGenerationService.downloadImage(
|
||||
image.url,
|
||||
`${image.prompt.substring(0, 30)}_${image.size}.png`
|
||||
);
|
||||
|
||||
toast({
|
||||
title: "Download iniciado",
|
||||
description: "A imagem está sendo baixada.",
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Erro no download",
|
||||
description: "Não foi possível baixar a imagem.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const filteredImages = images.filter((img) =>
|
||||
@@ -107,14 +184,14 @@ export const ImageView = () => {
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
Tamanho
|
||||
</label>
|
||||
<Select value={selectedSize} onValueChange={setSelectedSize}>
|
||||
<Select value={selectedSize} onValueChange={(value) => setSelectedSize(value as ImageSize)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="glass-effect bg-popover border-border z-50">
|
||||
<SelectItem value="1024x1024">1024x1024 (Quadrado)</SelectItem>
|
||||
<SelectItem value="1024x1536">1024x1536 (Retrato)</SelectItem>
|
||||
<SelectItem value="1536x1024">1536x1024 (Paisagem)</SelectItem>
|
||||
<SelectItem value="1024x1792">1024x1792 (Retrato)</SelectItem>
|
||||
<SelectItem value="1792x1024">1792x1024 (Paisagem)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -153,9 +230,10 @@ export const ImageView = () => {
|
||||
{!isGenerating && images.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">Última Geração</h3>
|
||||
<ImageCard
|
||||
image={images[0]}
|
||||
<ImageCard
|
||||
image={images[0]}
|
||||
onDelete={handleDelete}
|
||||
onDownload={handleDownload}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -178,10 +256,11 @@ export const ImageView = () => {
|
||||
{filteredImages.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{filteredImages.map((image) => (
|
||||
<ImageCard
|
||||
key={image.id}
|
||||
<ImageCard
|
||||
key={image.id}
|
||||
image={image}
|
||||
onDelete={handleDelete}
|
||||
onDownload={handleDownload}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -205,29 +284,93 @@ export const ImageView = () => {
|
||||
interface ImageCardProps {
|
||||
image: GeneratedImage;
|
||||
onDelete: (id: string) => void;
|
||||
onDownload: (image: GeneratedImage) => void;
|
||||
}
|
||||
|
||||
const ImageCard = ({ image, onDelete }: ImageCardProps) => {
|
||||
const ImageCard = ({ image, onDelete, onDownload }: ImageCardProps) => {
|
||||
const [imageError, setImageError] = useState(false);
|
||||
const [imageLoading, setImageLoading] = useState(true);
|
||||
|
||||
// Calcula tempo relativo
|
||||
const getRelativeTime = (timestamp: Date) => {
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - new Date(timestamp).getTime();
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
const hours = Math.floor(diff / 3600000);
|
||||
const days = Math.floor(diff / 86400000);
|
||||
|
||||
if (minutes < 1) return 'Agora';
|
||||
if (minutes < 60) return `Há ${minutes} ${minutes === 1 ? 'minuto' : 'minutos'}`;
|
||||
if (hours < 24) return `Há ${hours} ${hours === 1 ? 'hora' : 'horas'}`;
|
||||
return `Há ${days} ${days === 1 ? 'dia' : 'dias'}`;
|
||||
};
|
||||
|
||||
const handleImageError = () => {
|
||||
console.warn('Erro CORS ao carregar imagem:', image.url);
|
||||
setImageError(true);
|
||||
setImageLoading(false);
|
||||
};
|
||||
|
||||
const handleImageLoad = () => {
|
||||
console.log('Imagem carregada com sucesso:', image.url);
|
||||
setImageLoading(false);
|
||||
setImageError(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="group glass-effect rounded-xl overflow-hidden animate-fade-in">
|
||||
<div className="relative aspect-square">
|
||||
<img
|
||||
src={image.url}
|
||||
alt={image.prompt}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
{imageLoading && !imageError && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-muted">
|
||||
<div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
{imageError ? (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center bg-muted text-muted-foreground p-4">
|
||||
<Sparkles className="w-12 h-12 mb-2 opacity-50" />
|
||||
<p className="text-sm text-center font-medium mb-1">Erro ao carregar</p>
|
||||
<p className="text-xs text-center mb-2">A imagem foi gerada, mas não pode ser exibida aqui</p>
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<a
|
||||
href={image.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-center bg-primary text-primary-foreground px-3 py-2 rounded-md hover:bg-primary/90 transition-colors"
|
||||
>
|
||||
Abrir imagem em nova aba
|
||||
</a>
|
||||
<button
|
||||
onClick={() => navigator.clipboard.writeText(image.url)}
|
||||
className="text-xs text-center bg-secondary text-secondary-foreground px-3 py-1 rounded-md hover:bg-secondary/80 transition-colors"
|
||||
>
|
||||
Copiar URL
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<img
|
||||
src={image.url}
|
||||
alt={image.prompt}
|
||||
className="w-full h-full object-cover"
|
||||
onError={handleImageError}
|
||||
onLoad={handleImageLoad}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
)}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/0 to-black/0 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 space-y-2">
|
||||
<p className="text-sm text-white line-clamp-2">{image.prompt}</p>
|
||||
<div className="flex items-center justify-between text-xs text-white/70">
|
||||
<span>{image.size}</span>
|
||||
<span>{image.timestamp}</span>
|
||||
<span>{IMAGE_SIZE_OPTIONS[image.size].label}</span>
|
||||
<span>{getRelativeTime(image.timestamp)}</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
className="flex-1 gap-1"
|
||||
onClick={() => onDownload(image)}
|
||||
>
|
||||
<Download className="w-3 h-3" />
|
||||
Baixar
|
||||
|
||||
Reference in New Issue
Block a user